@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Outfit:wght@200;300;400;500;600;700&display=swap');

/* Cascade layer order — lowest priority first. The universal reset lives in the
   lowest layer so it no longer clobbers the (layered) ecosystem section rules,
   while unlayered rules still win over both, exactly as before. */
@layer reset, kayo-snippet-additions;
/* Cleaned CSS: duplicate rules merged and sections grouped once. */

/* =========================================================
   01 Global / Base
   ========================================================= */
:root {
  /* The site is a light design only. Declaring the scheme stops Chrome/Edge
     "auto dark mode" from re-tinting our backgrounds dark while leaving the
     navy headings navy — which rendered them invisible. */
  color-scheme: light;

  /* ===== Editorial Luxury brand palette (per redesign strategy) =====
     Primary Charcoal #101418 · Warm Taupe #B49A6C · Warm White #F8F7F5
     Stone Grey #D9D8D4 · Deep Olive Accent #364238 */
  --charcoal:    #0c1013;
  --taupe:       #b79a63;
  --taupe-soft:  #c9b283;
  --warm-white:  #f8f7f5;
  --stone-grey:  #d9d8d4;
  --olive:       #364238;

  /* ---- Legacy token names remapped onto the new palette ---- */
  --hass-navy: #181d22;
  --hass-navy-dark: #101418;
  --hass-charcoal: #14181c;
  --hass-gold: #b49a6c;
  --hass-gold-soft: #c9b189;
  --hass-cream: #f8f7f5;
  --hass-white: #ffffff;
  --hass-muted: rgba(255, 255, 255, 0.62);
 --serif:'DM Serif Display','Georgia','Times New Roman',serif;
  --sans:'Outfit','Helvetica Neue',Arial,sans-serif;
  --navy: #181d22;
  --navy-light: #262c33;
  --gold-muted: #8f7a54;
  --stone: #f8f7f5;
  --stone-mid: #d9d8d4;
  --text-dark: #101418;
  --text-body: #55585b;
  --text-subtle: #8a8b8c;
  --white: #ffffff;

  --radius: 2px;
  --shadow: 0 18px 60px rgba(16,20,24,0.12), 0 4px 16px rgba(16,20,24,0.06);
  --navy-deep: #0c1013;
  --gold-soft: #c9b283;
  --stone-dark: #d9d8d4;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --text:#101418;
  --muted:#6a6c6e;
  --light:#9a9b9c;
  --gold:#b79a63;
  --gold2:#c9b283;
  /* Accessible gold for small text on light backgrounds — the brand gold only
     reaches ~2.5:1 against --stone, which is unreadable at eyebrow sizes. */
  --gold-deep:#8a6d33;
  --page:1280px;

  /* ---- Shared font tokens (uniform across every page) ---- */
  --ff-body: 'Outfit','Helvetica Neue',Arial,sans-serif;
  --ff-display: 'DM Serif Display','Georgia','Times New Roman',serif;

  /* ---- Tokens required by the merged Ecosystem sections ---- */
  --border:#d9d8d4;
  --warm:#f0eeea;
  --off:#f8f7f5;
  --offwhite:#f8f7f5;   /* alias used by older ecosystem rules */
  --black:#101418;
  --navy2:#14181c;
  --lighter:#9a9b9c;    /* alias of --light */
  --page-max:1280px;    /* alias of --page */

  /* ---- Accent fallbacks referenced elsewhere in the sheet ---- */
  --lime:#b49a6c;
  --cream:#f8f7f5;
}

  


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff-body);
  color: var(--text-body);
  background: var(--stone);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: 1px solid currentColor;
  padding: 1rem 1.25rem;
  border-radius: 999px;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .14em;
  font-weight: 700;
}

.btn.dark {
  background: #111;
  color: #fff;
  border-color: #111;
}

.btn.lime {
  background: var(--lime);
  color: #101010;
  border-color: var(--lime);
}

.btn.ghost {
  color: #fff;
  border-color: rgba(255,255,255,.35);
}

.btn-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #c9a84c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #071525;
  font-size: 12px;
  transition: transform 0.35s ease;
  flex-shrink: 0;
}

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }}

.btn-primary {
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--gold);
  border: none;
  padding: 16px 44px;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}

.btn-primary:hover {
  background: var(--gold-soft);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }}
/* prevents fixed header from covering the first section */
body {
  padding-top: 76px;
}

.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO */
/* NEW — logo becomes an image placeholder box */
.brand {
  color: rgba(255, 255, 255, 0.85);   /* was: var(--hass-white) */
  font-family: var(--sans);
  font-size: 0.82rem;                 /* was: 1.05rem */
  font-weight: 700;                   /* was: 900 */
  letter-spacing: 0.22em;            /* was: 0.15em */
  text-decoration: none;
  text-transform: uppercase;
}

.brand span {
  color: rgba(255, 255, 255, 0.85);   /* was: var(--hass-gold) — removes gold tint */
}

/* Logo image placeholder (drop a real logo into the src to replace) */
.brand {
  display: inline-flex;
  align-items: center;
}
/* DESKTOP NAV */
.nav-links {
  display: flex;
  align-items: center;
  gap: 44px; /* even spacing between nav items */
}

.nav-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.24em; /* increased spacing inside each word */
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
  color: rgba(255, 255, 255, 0.95);
}
/* HAMBURGER */
.hamb {
  display: none;
  border: 0;
  background: transparent;
  color: var(--hass-white);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  z-index: 1001;
}

/* MOBILE MENU */
.mobile-menu {
  display: none;
}

/* MOBILE / TABLET */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .hamb {
    display: block;
  }

  .mobile-menu {
    display: none;
    background: var(--hass-charcoal);
    padding: 20px 25px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-menu.open {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .mobile-menu a {
    color: var(--hass-white);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
}

/* =========================================================
   03 Hero
   ========================================================= */
.hero {
  min-height: 400px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--hass-white);
  background: var(--navy-deep);

  min-height: 600px; /* or whatever feels right */
  height: 100vh;

  padding-top: 68px;
}


.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      rgba(11, 25, 33, 0.96) 0%,
      rgba(11, 25, 33, 0.9) 36%,
      rgba(11, 25, 33, 0.66) 67%,
      rgba(11, 25, 33, 0.54) 100%
    ),
    linear-gradient(
      180deg,
      rgba(11, 25, 33, 0.7) 0%,
      rgba(11, 25, 33, 0.26) 42%,
      rgba(11, 25, 33, 0.92) 100%
    ),
    url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=2200&q=85");
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  z-index: 0;
}

.hero h1 {
  font-family: var(--serif, 'Georgia', serif);
  font-size: clamp(3.2rem, 6.5vw, 6rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0 0 1.5rem;
}

.hero h1 span {
  display: block;
  margin-top: 0.12em;
  color: var(--hass-gold-soft);
  font-style: italic;
}

.hero-actions .btn.lime {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 2.4rem;
  background: var(--hass-gold);
  color: var(--hass-navy-dark);
  border: 1px solid var(--hass-gold);
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.28s ease;
}

.hero-actions .btn.lime:hover {
  background: var(--hass-gold-soft);
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 52px 56px;
  width: 100%;
}

.hero-eyebrow {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.9s var(--ease-out) 0.2s forwards;
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

@media (max-width: 980px) {
  .hero {
    align-items: flex-start;
  }

  .hero::before {
    background: linear-gradient(
        180deg,
        rgba(11, 25, 33, 0.92) 0%,
        rgba(11, 25, 33, 0.78) 44%,
        rgba(11, 25, 33, 0.96) 100%
      ),
      url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=85");
    background-size: cover;
    background-position: center;
  }}

@media (max-width: 600px) {

  .hero h1 {
    font-size: clamp(3.25rem, 17vw, 5.3rem);
  }

  .hero-actions .btn.lime {
    width: 100%;
  }}

@media (max-width: 640px) {
  .hero-content {
    padding: 0 24px 44px;
  }}

@media (max-width:768px) {
  .hero-badge {
    left: 20px;
    top: 88px;
  }

  .hero-content {
    padding: 0 20px 56px;
  }

  .hero-stats {
    flex-direction: column;
    width: 100%;
  }

  .hero-stat {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 16px 20px;
  }

  .hero-stat:last-child {
    border-bottom: none;
  }

  .hero-scroll-hint {
    display: none;
  }}

.about-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 140px 20px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 110px;
  align-items: center;
}

@media (max-width:900px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: 54px;
    padding: 96px 30px;
  }}

@media (max-width:560px) {
  .about-inner {
    padding: 78px 24px;
  }}


/* =========================================================
   07 General Sections / Cards
   ========================================================= */
.tab {
  padding: .8rem;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  font-size: .74rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.tab.active {
  background: var(--lime);
  color: #111;
  font-weight: 800;
}

.field {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 1rem;
}

.field label {
  display: block;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #aaa;
  margin-bottom: .3rem;
}

.field strong {
  font-size: .95rem;
}

.section {
  padding: 6rem 0;
}

.section.dark {
  background: #111;
  color: #fff;
}

.section h2 {
  font-family: var(--serif);
  font-size: clamp(2.4rem,5vw,5rem);
  line-height: .95;
  margin: 0 0 1rem;
  letter-spacing: -.06em;
}

.lead {
  max-width: 720px;
  line-height: 1.8;
  color: #6d675f;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.thumb {
  height: 245px;
  background: linear-gradient(135deg,#272727,#767064);
  position: relative;
}

.thumb::after {
  content: "Image placeholder";
  position: absolute;
  inset: auto 1rem 1rem auto;
  color: #fff;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.meta {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  color: #777;
  font-size: .85rem;
}

.price {
  margin-top: 1rem;
  font-weight: 900;
}

.feature {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  padding: 1.4rem;
  background: rgba(255,255,255,.04);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 68vh;
}

.feature h3 {
  margin: .4rem 0;
}

.feature p {
  color: #bbb;
  line-height: 1.6;
}

.filters input, .filters select, .filters button, .contact input, .contact textarea {
  width: 100%;
  padding: 1rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

.contact textarea {
  border-radius: 24px;
  min-height: 140px;
}

.contact {
  display: grid;
  gap: .8rem;
}

.section-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
}

.section-tag::before {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.feature.flip {
  direction: rtl;
}

.feature.flip>* {
  direction: ltr;
}

.feature.cream .feat-text {
  background: var(--cream);
}

.section-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.section-label::after {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
}

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

  .feature.flip {
    direction: ltr;
  }}

@media (max-width: 860px) {

  .owner-section .lead {
    font-size: 0.95rem;
    line-height: 1.75;
  }}

/* =========================================================
   09 Footer
   ========================================================= */
.footer {
  background: var(--navy-deep);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 52px 32px;
  border-top: 1px solid rgba(196,165,90,0.10);
  text-align: center;
}

.footer-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}

.footer-logo {
  font-family: var(--ff-body);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--white);
  line-height: 1;
}

.footer-logo-sub {
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  margin-top: 4px;
  font-family: var(--ff-body);
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: 8px 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-nav a {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: var(--gold);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  width: 100%;
  padding-top: 24px;
  text-align: center;
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 40px;
}

.footer-bottom p {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.7;
}

.footer-bottom a {
  color: rgba(196,165,90,0.5);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-bottom a:hover {
  color: var(--gold);
}

.site-footer {
  background: var(--navy-deep);
  padding: 80px 72px 36px;
  color: rgba(255,255,255,0.65);
}

.ft-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
  margin-bottom: 60px;
}

.ft-brand-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  display: block;
  margin-bottom: 18px;
}

.ft-brand-name span {
  color: var(--gold);
}

.ft-brand p {
  font-size: 12px;
  line-height: 1.85;
  color: rgba(255,255,255,0.35);
  max-width: 270px;
  margin-bottom: 22px;
}

.ft-contact {
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
  line-height: 2.1;
}

.ft-contact a {
  color: var(--gold);
  text-decoration: none;
}

.ft-col h4 {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: 18px;
}

.ft-col a {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  margin-bottom: 9px;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.ft-col a:hover {
  color: var(--gold);
}

.ft-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.ft-copy {
  font-size: 10px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.1em;
}

.ft-socials {
  display: flex;
  gap: 10px;
}

.ft-socials a {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  font-size: 12px;
  transition: all 0.25s;
}

.ft-socials a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: rgba(255,255,255,0.9);
}

.footer-copy {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  font-weight: 300;
  letter-spacing: 0.04em;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  transition: color 0.2s;
}

.footer-legal a:hover {
  color: rgba(255,255,255,0.6);
}

@media (max-width: 768px) {

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 20px;
  }}

@media (max-width: 640px) {
  .footer {
    padding: 44px 28px 28px;
  }

  .footer-nav {
    gap: 8px 20px;
    margin-bottom: 22px;
  }

  .footer-bottom p {
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }}

@media (max-width:1024px) {
  .ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }}

@media (max-width:768px) {
  .site-footer {
    padding: 56px 20px 28px;
  }

  .ft-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ft-bottom {
    flex-direction: column;
    align-items: flex-start;
  }}

@media (max-width: 1024px) {

  .footer-bottom {
    padding: 20px 32px;
  }}

.lc-filter-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.lc-filter-btn.active:hover {
  background: #1a3244;
  border-color: #1a3244;
  color: white;
}

.lc-dropdown-menu.open {
  display: block;
}

.lc-card__status.sold {
  background: rgba(13,28,38,0.52);
}

/* =========================================================
   12 Enquiry Form
   ========================================================= */
.kayo-enquiry-wrap {
  display: flex;
  justify-content: center;
  padding: 72px 24px 100px;
}

.kayo-enquiry {
  width: 100%;
  max-width: 880px;
  background: var(--hass-white);
  border: 1px solid var(--hass-stone-mid);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.kayo-enquiry::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--hass-charcoal);
}

.kayo-enquiry__header {
  padding: 36px 48px 28px;
  border-bottom: 1px solid var(--stone-mid);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.kayo-enquiry__eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.kayo-enquiry__title {
  font-family: var(--ff-display);
  font-size: 2.1rem;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.2;
}

.kayo-enquiry__title em {
  font-style: italic;
  color: var(--gold);
}

.kayo-enquiry__subtitle {
  font-size: 12px;
  color: var(--text-subtle);
  line-height: 1.65;
  max-width: 220px;
  text-align: right;
  flex-shrink: 0;
}

.kayo-enquiry__tabs {
  display: flex;
  border-bottom: 1px solid var(--stone-mid);
  padding: 0 48px;
}

.kayo-tab {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 14px 0;
  margin-right: 32px;
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  outline: none;
  transition: color .2s, border-color .2s;
}

.kayo-tab:hover {
  color: var(--text-dark);
}

.kayo-tab.active {
  color: var(--navy);
  border-bottom-color: var(--hass-charcoal);
}

.kayo-enquiry__body {
  padding: 36px 48px 36px;
}

.kayo-panel {
  display: none;
}

.kayo-panel.active {
  display: block;
}

.kayo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
}

.kayo-span3 {
  grid-column: 1 / -1;
}

.kayo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kayo-field label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.kayo-field input, .kayo-field select, .kayo-field textarea {
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--text-dark);
  background: var(--stone);
  border: 1px solid var(--stone-mid);
  border-radius: var(--radius);
  padding: 11px 14px;
  outline: none;
  transition: border-color .2s, background .2s;
  -webkit-appearance: none;
  appearance: none;
}

.kayo-field input::placeholder, .kayo-field textarea::placeholder {
  color: var(--text-subtle);
}

.kayo-field input:focus, .kayo-field select:focus, .kayo-field textarea:focus {
  border-color: var(--gold);
  background: var(--white);
}

.kayo-field textarea {
  resize: vertical;
  min-height: 88px;
}

.kayo-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a8a82'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.kayo-enquiry__footer {
  padding: 0 48px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.kayo-enquiry__note {
  font-size: 11px;
  color: var(--text-subtle);
  line-height: 1.65;
  max-width: 380px;
}

.kayo-enquiry__note strong {
  color: var(--text-body);
  font-weight: 500;
}

.kayo-btn {
  font-family: var(--ff-body);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 15px 40px;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
  border-radius: var(--radius);
}

.kayo-btn:hover {
  background: var(--navy-light);
}

.kayo-success {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 48px;
  text-align: center;
}

.kayo-success__icon {
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.kayo-success__icon svg {
  stroke: var(--gold);
}

.kayo-success__heading {
  font-family: var(--ff-display);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.kayo-success__text {
  font-size: 13px;
  color: var(--text-subtle);
  line-height: 1.75;
  max-width: 360px;
}

@media (max-width: 700px) {
  .kayo-enquiry__header {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px 22px;
  }

  .kayo-enquiry__subtitle {
    text-align: left;
    max-width: 100%;
  }

  .kayo-enquiry__tabs {
    padding: 0 24px;
  }

  .kayo-enquiry__body {
    padding: 28px 24px 28px;
  }

  .kayo-enquiry__footer {
    padding: 0 24px 36px;
    flex-direction: column;
    align-items: flex-start;
  }

  .kayo-grid, .kayo-grid--3 {
    grid-template-columns: 1fr;
  }

  .kayo-span2, .kayo-span3 {
    grid-column: span 1;
  }

  .kayo-success {
    padding: 48px 24px;
  }}

/* =========================================================
   13 Kwetu Residence Detail Sections
   ========================================================= */
.welcome {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 85vh;
}

.welcome-text {
  background: var(--cream);
  padding: 96px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.welcome-text h2 {
  font-family: var(--serif);
  font-size: clamp(2rem,3.2vw,2.8rem);
  font-weight: 300;
  color: var(--navy);
  letter-spacing: 0.03em;
  line-height: 1.28;
  margin-bottom: 26px;
}

.welcome-text p {
  font-size: 16px;
  line-height: 1.85;
  color: #3d4b56;
  font-weight: 400;
  max-width: 500px;
  margin-bottom: 18px;
}

.welcome-img {
  position: relative;
  overflow: hidden;
}

.welcome-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s ease;
}

.welcome-img:hover img {
  transform: scale(1.04);
}

.quick-facts {
  display: flex;
  gap: 0;
  margin-top: 36px;
  border: 1px solid rgba(13,28,38,0.1);
}

.quick-fact {
  padding: 18px 28px;
  border-right: 1px solid rgba(13,28,38,0.1);
  flex: 1;
}

.quick-fact:last-child {
  border-right: none;
}

.quick-fact__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5c6670;
  margin-bottom: 6px;
}

.quick-fact__value {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--navy);
}

.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  width: fit-content;
  transition: color 0.2s,gap 0.2s;
}

.cta-link:hover {
  color: var(--gold);
  gap: 16px;
}

.cta-link svg {
  transition: transform 0.2s;
}

.cta-link:hover svg {
  transform: translateX(4px);
}

.feat-img {
  overflow: hidden;
  position: relative;
}

.feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s ease;
}

.feat-img:hover img {
  transform: scale(1.04);
}

.feat-text {
  padding: 76px 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}

.feat-text h3 {
  font-family: var(--serif);
  font-size: clamp(1.7rem,2.6vw,2.4rem);
  font-weight: 300;
  color: var(--navy);
  letter-spacing: 0.03em;
  line-height: 1.28;
  margin-bottom: 22px;
}

.feat-text p {
  font-size: 16px;
  line-height: 1.85;
  color: #3d4b56;
  margin-bottom: 16px;
}

.img-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.img-row-col {
  position: relative;
  height: 480px;
  overflow: hidden;
}

.img-row-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s ease;
}

.img-row-col:hover img {
  transform: scale(1.04);
}

.perks {
  background: var(--navy);
  padding: 96px 72px;
  text-align: center;
}

.perks .section-tag {
  justify-content: center;
}

.perks h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem,3.5vw,3rem);
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 60px;
}

.perks-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: rgba(201,168,76,0.1);
  max-width: 1100px;
  margin: 0 auto 56px;
  border: 1px solid rgba(201,168,76,0.1);
}

.perk {
  background: #0d1c26;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: background 0.3s;
}

.perk:hover {
  background: rgba(201,168,76,0.07);
}

.perk-ico {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(201,168,76,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}

.perk-lbl {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.4;
}

.perks-dl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  border: 1px solid var(--gold);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: all 0.25s;
}

.perks-dl:hover {
  background: var(--gold);
  color: var(--navy);
}

.enquiry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
}

.enquiry-img {
  position: relative;
  overflow: hidden;
}

.enquiry-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.enquiry-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13,28,38,0.28);
}

.enquiry-form-wrap {
  background: var(--navy);
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.enquiry-form-wrap .section-tag {
  color: var(--gold);
}

.enquiry-form-wrap h3 {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 300;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.enquiry-form-wrap > p {
  font-size: 12px;
  line-height: 1.85;
  color: rgba(255,255,255,0.45);
  margin-bottom: 32px;
}

.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.f-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.f-field label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}

.f-field input, .f-field select, .f-field textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 13px 15px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}

.f-field input::placeholder,.f-field textarea::placeholder {
  color: rgba(255,255,255,0.2);
}

.f-field input:focus,.f-field select:focus,.f-field textarea:focus {
  border-color: var(--gold);
}

.f-field select option {
  background: var(--navy);
  color: #fff;
}

.f-field textarea {
  resize: vertical;
  min-height: 90px;
}

.f-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  margin-top: 6px;
  background: var(--gold);
  border: 1px solid var(--gold);
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  transition: all 0.25s;
}

.f-submit:hover {
  background: transparent;
  color: var(--gold);
}

@media (max-width:1024px) {
  .perks-grid {
    grid-template-columns: repeat(2,1fr);
  }}

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

  .welcome-text {
    padding: 56px 24px;
  }

  .welcome-img {
    height: 340px;
  }

  .quick-facts {
    flex-direction: column;
  }

  .quick-fact {
    border-right: none;
    border-bottom: 1px solid rgba(13,28,38,0.08);
  }

  .feat-img {
    height: 300px;
  }

  .feat-text {
    padding: 48px 24px;
  }

  .img-row {
    grid-template-columns: 1fr;
  }

  .img-row-col {
    height: 300px;
  }

  .perks {
    padding: 60px 20px;
  }

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

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

  .enquiry-img {
    height: 260px;
  }

  .enquiry-form-wrap {
    padding: 48px 24px;
  }

  .f-row {
    grid-template-columns: 1fr;
  }}

.intro-left {
  padding: 72px 60px 72px 0;
  border-right: 1px solid var(--border);
}

.intro-body {
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
  font-weight: 300;
  margin-bottom: 22px;
  max-width: 640px;
}

.intro-body:last-child {
  margin-bottom: 0;
}

.intro-right {
  display: flex;
  flex-direction: column;
}

.stat-block.last {
  border-bottom: none;
}

.stat-num {
  font-family: var(--ff-display);
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 300;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.stat-num.stat-text {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.stat-num.small {
  font-size: clamp(18px, 2.2vw, 26px);
}

.index-thumb {
  width: 38px;
  height: 38px;
  background: var(--offwhite);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.index-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.2s ease;
}

.index-thumb.active::after {
  transform: scaleY(1);
}

.index-thumb:hover::after {
  transform: scaleY(0.5);
}

.index-entry {
  display: grid;
  grid-template-columns: 140px 80px 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
  min-height: 80px;
  align-items: center;
  transition: background 0.2s;
  cursor: default;
}

.index-entry:hover {
  background: var(--offwhite);
}

.index-entry.hidden {
  display: none;
}

@media (max-width: 768px) {

  .intro-left {
    padding: 48px 0;
  }

  .intro-right {
    flex-direction: column;
  }

  .stat-block.last {
    border-bottom: 1px solid var(--border);
  }

  .index-entry {
    grid-template-columns: 100px 60px 1fr;
  }}

@media (max-width: 1024px) {

  .intro-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 56px 0;
  }

  .intro-right {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .stat-block.last {
    border-bottom: none;
  }}

/* =========================================================
   15 Reveal / Scroll Animations
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

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

.reveal-l {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.75s ease,transform 0.75s ease;
}

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

.reveal-r {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.75s ease,transform 0.75s ease;
}

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

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.stagger.visible > *:nth-child(1) {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.stagger.visible > *:nth-child(2) {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}

.stagger.visible > *:nth-child(3) {
  opacity: 1;
  transform: none;
  transition-delay: 0.24s;
}

.stagger.visible > *:nth-child(4) {
  opacity: 1;
  transform: none;
  transition-delay: 0.36s;
}

.stagger.visible > *:nth-child(5) {
  opacity: 1;
  transform: none;
  transition-delay: 0.48s;
}

/* =========================================================
   16 Other / Utilities
   ========================================================= */
.dark .lead {
  color: #cfc8bd;
}

.img-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 26px;
  background: linear-gradient(to top,rgba(13,28,38,0.78),transparent);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 300;
  color: #fff;
  letter-spacing: 0.05em;
}

/* =========================================================
   Animations
   ========================================================= */
@keyframes float-1 {
0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(7px, -12px); }
  50% { transform: translate(-5px, -20px); }
  75% { transform: translate(8px, -8px); }
}

@keyframes float-2 {
0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-8px, -16px); }
  66% { transform: translate(5px, -10px); }
}

@keyframes float-3 {
0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, -8px); }
  50% { transform: translate(-6px, -18px); }
  75% { transform: translate(4px, -6px); }
}

@keyframes float-4 {
0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(-5px, -14px); }
  60% { transform: translate(8px, -22px); }
}

@keyframes float-5 {
0%, 100% { transform: translate(0, 0); }
  40% { transform: translate(-10px, -15px); }
  70% { transform: translate(6px, -24px); }
}

@keyframes slide {
from{
    transform:translateX(0)}to{transform:translateX(-50%)}
}

@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
to { opacity: 1; transform: scaleX(1); }
}

/* =========================================================
   15 Extracted Homepage Snippet Additions
   Source: Pasted code(7).html
   Added in a cascade layer so the previous main CSS keeps priority.
   Global resets/header overrides from the snippet were excluded.
   ========================================================= */
@layer kayo-snippet-additions {
/* INTRO — HASS index structure */
.intro-section{
  border-bottom:1px solid var(--border);
  background:var(--white)}
  .intro-inner{
    max-width:var(--page);
    margin:0 auto;
    padding:0 44px;
    display:grid;
    grid-template-columns:1fr 340px;
    min-height:540px
  }
  .intro-left{
    padding:84px 74px 84px 0;
    border-right:1px solid var(--border)
  }
  .kicker{
    font-size:10px;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
    margin-bottom:22px
  }
  .intro-heading{
    font-family:var(--serif);
    font-size:clamp(40px,5vw,72px);
    font-weight:300;
    line-height:1.04;
    color:var(--navy);
    letter-spacing:.02em;
    margin-bottom:34px
  }
  .intro-heading em{
    font-style:italic;
    color:#d3b36f
  }
  .intro-body{
    max-width:720px;
    font-size:14px;
    line-height:1.95;
    color:var(--muted);
    margin-bottom:22px
  }
  .intro-right{
    display:flex;
    flex-direction:column
  }
  .stat-block{
    flex:1;
    padding:38px 34px;
    border-bottom:1px solid var(--border);
    display:flex;
    flex-direction:column;
    justify-content:center
  }
  .stat-block:last-child{
    border-bottom:0
  }
  .stat-num{
    font-family:var(--serif);
    font-size:clamp(46px,5vw,76px);
    font-weight:300;
    color:var(--navy);
    line-height:1;
    letter-spacing:-.02em;
    margin-bottom:10px
  }
  .stat-num.text{
    font-size:clamp(24px,2.7vw,38px)
  }
  .stat-label{
    font-size:9px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--light);
    font-weight:600;
    line-height:1.5
  }

/* Image grid */
.image-grid-section{
  max-width:var(--page);
  margin:0 auto;
  padding:0 44px;
  border-bottom:1px solid var(--border)
}
.image-grid{
  height:390px;
  display:grid;
  grid-template-columns:1fr 320px;
  border-left:1px solid var(--border);
  border-right:1px solid var(--border)
}
.image-main{
  border-right:1px solid var(--border);
  overflow:hidden
}
.image-stack{
  display:grid;
  grid-template-rows:1fr 1fr
}
.image-small{
  border-bottom:1px solid var(--border);
  overflow:hidden
}
.image-small:last-child{
  border-bottom:0
}
.visual{
  height:100%;
  position:relative;
  overflow:hidden;
  padding:18px;
  display:flex;
  align-items:flex-end;
  background:#111
}
.visual:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px
}
.visual-label{
  position:relative;
  z-index:2;
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:white;
}
.visual-num{
  position:absolute;
  right:16px;
  bottom:-16px;
  font-family:var(--serif);
  font-size:116px;
  font-weight:300;
  color:rgba(255,255,255,.06);
  line-height:1
}
.v1{
  background:linear-gradient(145deg,#071923,#18313b)
}
.v2{
  background:linear-gradient(145deg,#071923,#12313d)
}
.v3{
  background:linear-gradient(145deg,#1b1a15,#51421f)
}
.v4{
  background:linear-gradient(145deg,#071923,#16362f)
}
.v5{
  background:linear-gradient(145deg,#171411,#4d361b)
}
.v6{
  background:linear-gradient(145deg,#101f2a,#253748)
}
.caption{
  padding:14px 0 0;
  text-align:right;
  font-size:9px;
  letter-spacing:.28em;
  color:var(--light);
  text-transform:uppercase;
  font-weight:600
}
.visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform 0.8s ease;
}

/* keep label and number above overlays */
.visual-label,
.visual-num {
  z-index: 3;
}

.visual:hover .visual-img {
  transform: scale(1.04);
}

/* Reports */
.report-block{
  max-width:var(--page);
  margin:0 auto;
  padding:0 44px;
  display:grid;
  grid-template-columns:300px 1fr;
  min-height:390px;
  border-bottom:1px solid var(--border);
  align-items:center;
}
.report-block.reverse{
  grid-template-columns:1fr 300px
}
.report-block.reverse .report-img{
  order:2;
  border-right:0;
  border-left:1px solid var(--border)
}
.report-block.reverse .report-text{
  order:1
}
.report-img{
  border-right:1px solid var(--border);
  overflow:hidden;
  height:390px;
  align-self:center;
}

.report-visual{
  width:100%;
  height:390px;
  min-height:390px;
  position:relative;
  overflow:hidden;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}

.report-photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.report-block:hover .report-visual{
  transform:scale(1.025);
}

.visual-label{
  position:absolute;
  left:24px;
  bottom:24px;
  z-index:2;
  color:#fff;
  font-size:10px;
  letter-spacing:.25em;
  text-transform:uppercase;
  font-weight:600;
}

.report-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.05),
    rgba(0,0,0,.35)
  );
  z-index:1;
}
.report-visual{
  height:100%;
  min-height:390px;
  transition:transform .8s cubic-bezier(.22,1,.36,1)
}
.report-block:hover .report-visual{
  transform:scale(1.025)
}
.report-text{
  padding:60px 64px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.report-tag{
  display:block;
  font-size:9px;
  letter-spacing:.27em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:700;
  margin-bottom:18px
}
.report-title{
  font-family:var(--serif);
  font-size:clamp(28px,3vw,42px);
  font-weight:400;
  color:var(--navy);
  line-height:1.14;
  margin-bottom:22px
}
.report-body{
  max-width:700px;
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  margin-bottom:16px
}
.report-link{
  margin-top:14px;
  display:inline-flex;
  width:fit-content;
  align-items:center;
  gap:9px;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:700;
  border-bottom:1px solid var(--navy);
  padding-bottom:4px;
  transition:.25s
}
.report-link:hover{
  color:var(--gold);
  border-color:var(--gold);
  gap:16px
}

/* Index */
.index-section{
  max-width:var(--page);
  margin:0 auto;
  padding:46px 44px 0;
  border-bottom:2px solid var(--border)
}
.index-thumbs{
  display:flex;
  gap:6px;
  border-top:1px solid var(--border);
  padding-top:40px
}
.index-thumb{
  width:40px;
  height:40px;
  border:1px solid var(--border);
  background:var(--off);
  cursor:pointer;
  position:relative;
  overflow:hidden
}
.index-thumb:after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--navy);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .25s;
}
.index-thumb:hover:after{
  transform:scaleY(.5)
}
.index-thumb.active:after{
  transform:scaleY(1)
}
.index-label{
  padding-top:20px;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--light);
  font-weight:700
}
.index-entry{
  display:grid;
  grid-template-columns:150px 90px 1fr;
  align-items:center;
  min-height:86px;
  border-top:1px solid var(--border);
  transition:background .25s
}
.index-entry:hover{
  background:var(--off)
}
.index-entry.hidden{
  display:none
}
.index-year,.index-quarter{
  font-family:var(--serif);
  font-size:34px;
  font-weight:300;
  color:var(--navy);
  line-height:1;
  padding:24px 24px 24px 0;
  border-right:1px solid var(--border)
}
.index-quarter{
  padding-left:24px
}
.index-links{
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  padding:24px 34px
}
.index-link{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:700;
  border-bottom:1px solid var(--border);
  padding-bottom:3px;transition:.25s
}
.index-link:hover{
  color:var(--gold);
  border-color:var(--gold)
}

/* Pillars/process/cards */
.split-section{
  background:var(--warm);
  border-bottom:1px solid var(--border)
}
.split-head{
  max-width:var(--page);
  margin:0 auto;
  display:grid;
  grid-template-columns:340px 1fr;
  padding:0 44px;
  border-bottom:1px solid var(--border)
}
.split-left{
  padding:52px 40px 52px 0;
  border-right:1px solid var(--border)
}
.section-title{
  font-family:var(--serif);
  font-size:clamp(30px,3.2vw,44px);
  line-height:1.15;
  font-weight:400;
  color:var(--navy)
}
.section-title em{
  font-style:italic;
  color:#8d9898
}
.split-right{
  padding:52px 60px
}
.section-copy{
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
  max-width:720px
}
.grid-4{
  max-width:var(--page);
  margin:0 auto;
  padding:0 44px;
  display:grid;
  grid-template-columns:repeat(4,1fr)
}
.mini-card{
  padding:46px 34px;
  border-right:1px solid var(--border);
  background:var(--white);
  transition:background .25s
}
.mini-card:first-child{
  border-left:1px solid var(--border)
}
.mini-card:hover{
  background:var(--off)
}
.mini-num{
  font-family:var(--serif);
  font-size:54px;
  font-weight:300;
  color:rgba(7,25,35,.28);
  margin-bottom:18px
}
.mini-title{
  font-size:11px;
  line-height:1.6;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy);
  font-weight:700;
  margin-bottom:12px
}
.mini-desc{
  font-size:13px;
  line-height:1.75;
  color:var(--muted)
}


/**featured band reveal section**/

.featured-band{
  max-width:var(--page);
  margin:0 auto;
  padding:0 44px;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:2px solid var(--border);
}

.featured-item{
  display:grid;
  grid-template-columns:260px 1fr;
  border-right:1px solid var(--border);
  align-items:stretch;
  min-height:260px;
}


.featured-item:last-child{
  border-right:0;
}

.featured-img{
  width:100%;
  height:100%;
  /**min-height:360px;**/ aspect-ratio: 1 / 1;
  position:relative;
  overflow:hidden;
  border-right:1px solid var(--border);
}

.featured-photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}

.featured-item:hover .featured-photo{
  transform:scale(1.04);
}

.featured-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.05),
    rgba(0,0,0,.45)
  );
  z-index:1;
}

.featured-img .visual-label{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:2;
  color:#fff;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  line-height:1.5;
}

.featured-body{
  padding:42px 44px;display:flex;
  flex-direction:column;
  justify-content:center;

}

.featured-tag{
  display:block;
  font-size:9px;
  letter-spacing:.24em;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:16px;
}

.featured-title{
  font-family:var(--serif);
  font-size:28px;
  line-height:1.2;
  font-weight:400;
  color:var(--navy);
  margin-bottom:16px;
}

.featured-desc{
  font-size:13px;
  line-height:1.85;
  color:var(--muted);
  margin-bottom:22px;
}

/**journal/ real estate design and urban growth**/
.journal-grid{
  max-width:var(--page);
  margin:0 auto;
  padding:52px 44px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:38px
}
.journal-card{
  cursor:pointer
}
.journal-visual{
  height:220px;
  margin-bottom:24px;
  overflow:hidden
}
.journal-cat{
  font-size:9px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
  font-weight:700
}
.journal-title{
  font-family:var(--serif);
  font-size:22px;
  font-weight:400;
  color:var(--navy);
  line-height:1.25;
  margin-bottom:12px
}
.journal-excerpt{
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
}
.journal-visual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;  /* or 4/3, 1/1 — whichever fits your grid */
}

.journal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.journal-card:hover .journal-img {
  transform: scale(1.04);
}

.journal-visual .visual-label {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 2;
  color: #fff;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
}



.quote{
  font-family:var(--serif);
  font-size:clamp(30px,4vw,56px);
  line-height:1.28;
  font-style:italic;
  color:var(--white);
  text-align:center;
  max-width:900px;
  margin:0 auto
}
.quote-attr{
  margin-top:34px;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(200,183,158,.7)
}
.team-grid{
  max-width:var(--page);
  margin:0 auto;
  padding:52px 44px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px
}
.team-card{
  background:var(--black);
  transition:transform .35s,box-shadow .35s
}
.team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 64px rgba(0,0,0,.25);
  z-index:2
}
.portrait{
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden
}
.portrait:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:40px 40px
}
.initials{
  font-family:var(--serif);
  font-size:82px;
  color:rgba(255,255,255,.18);
  position:relative
}
.team-info{
  padding:28px;
  background:#070707;
  border-top:1px solid rgba(165,158,150,.14)
}
.team-role{
  font-size:9px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold2);
  margin-bottom:8px
}
.team-name{
  font-family:var(--serif);
  font-size:25px;
  color:var(--white);
  font-weight:400;
  margin-bottom:6px
}
.team-div{
  font-size:10px;
  color:rgba(255,255,255,.32);
  letter-spacing:.08em;
  margin-bottom:16px
}
.team-bio{
  font-size:12px;
  line-height:1.7;
  color:rgba(255,255,255,.45)
}


/* footer */
.site-footer{background:#0c1013;color:rgba(255,255,255,.65)}.footer-wrap{max-width:var(--page);margin:0 auto}.footer-cols{padding:64px 44px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px;border-bottom:1px solid rgba(255,255,255,.08)}.footer-brand{font-family:var(--serif);font-size:22px;letter-spacing:.1em;color:var(--white);text-transform:uppercase;margin-bottom:16px}.footer-text{font-size:13px;line-height:1.8;color:rgba(255,255,255,.45);max-width:420px}.footer-title{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.34);font-weight:700;margin-bottom:20px}.footer-links{list-style:none}.footer-links li{margin-bottom:11px}.footer-links a{font-size:12px;color:rgba(255,255,255,.55);transition:color .2s}.footer-links a:hover{color:var(--white)}.footer-bottom{padding:24px 44px;display:flex;justify-content:space-between;gap:24px}.footer-copy,.footer-legal a{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.28)}.footer-legal{display:flex;gap:24px}

/* animations */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:1024px){.intro-inner,.split-head,.dark-inner{grid-template-columns:1fr}.intro-left,.split-left{border-right:0;border-bottom:1px solid var(--border);padding-right:0}.intro-right{flex-direction:row;flex-wrap:wrap}.stat-block{flex:1 1 50%;border-right:1px solid var(--border)}.stat-block:nth-child(2n){border-right:0}.report-block,.report-block.reverse{grid-template-columns:1fr}.report-block.reverse .report-img,.report-block.reverse .report-text{order:unset}.report-img,.report-block.reverse .report-img{border-right:0;border-left:0;border-bottom:1px solid var(--border)}.grid-4{grid-template-columns:1fr 1fr}.featured-band{grid-template-columns:1fr}.featured-item{border-right:0;border-bottom:1px solid var(--border)}.journal-grid,.team-grid{grid-template-columns:1fr 1fr}.footer-cols{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.wrap,.intro-inner,.image-grid-section,.report-block,.report-block.reverse,.index-section,.split-head,.grid-4,.featured-band,.journal-grid,.team-grid,.footer-cols,.footer-bottom{padding-left:22px;padding-right:22px}.intro-left{padding-top:54px;padding-bottom:54px}.intro-right{flex-direction:column}.stat-block{border-right:0}.image-grid{grid-template-columns:1fr;height:auto}.image-main{height:240px;border-right:0}.image-stack{grid-template-columns:1fr 1fr;grid-template-rows:none;height:150px}.image-small:first-child{border-right:1px solid var(--border)}.report-text{padding:42px 0}.report-visual{min-height:240px}.index-entry{grid-template-columns:96px 60px 1fr}.index-year,.index-quarter{font-size:25px;padding:18px 12px 18px 0}.index-quarter{padding-left:12px}.index-links{padding:18px;gap:14px}.grid-4,.journal-grid,.team-grid{grid-template-columns:1fr}.featured-item{grid-template-columns:1fr}.featured-img{min-height:170px}.footer-cols{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start}.dark-inner{padding:80px 22px}.quote-wrap{padding:90px 22px}}
@media(max-width:900px){
  .featured-band{
    grid-template-columns:1fr;
    padding:0 24px;
  }

  .featured-item{
    grid-template-columns:160px 1fr;
    border-right:0;
    border-bottom:1px solid var(--border);
  }

  .featured-img{
    height:240px;
    min-height:240px;
  }

  .featured-body{
    padding:34px 28px;
  }
}

@media(max-width:600px){
  .featured-band{
    padding:0 24px;
  }

  .featured-item{
    grid-template-columns:1fr;
  }

  .featured-img{
    width:100%;
    height:300px;
    min-height:300px;
    border-right:0;
    border-bottom:1px solid var(--border);
  }

  .featured-body{
    padding:34px 0;
  }

  .featured-title{
    font-size:25px;
  }
}
}
@keyframes heroSlowZoom { from { transform: scale(1.06); } to { transform: scale(1); } }

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide.is-active .hero-slide-img {
  animation: heroZoom 7s ease-out forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

.hero-slide.is-active .hero-slide-eyebrow,
.hero-slide.is-active .hero-slide-title,
.hero-slide.is-active .hero-slide-text,
.hero-slide.is-active .hero-slide-btn {
  animation: heroUp 0.9s var(--ease-out) backwards;
}

.hero-slide.is-active .hero-slide-title { animation-delay: 0.12s; }
.hero-slide.is-active .hero-slide-text  { animation-delay: 0.24s; }
.hero-slide.is-active .hero-slide-btn   { animation-delay: 0.36s; }

@keyframes heroUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-dot.is-active {
  background: var(--hass-gold);
  transform: scaleY(1.6);
}

/* =========================================================
   19 Kwetu Details — Lakehills-style additions
   ========================================================= */
.kd-why {
  background: var(--navy);
  padding: 96px 8%;
}

.kd-why-head {
  text-align: center;
  margin-bottom: 56px;
}

.kd-why-head h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.2;
  margin-top: 14px;
}

.kd-why-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.kd-why-img {
  overflow: visible;
  border-radius: 16px;
  animation: kdFloat 6.5s ease-in-out infinite;
  will-change: transform;
}

.kd-why-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.45);
  transition: transform 0.9s ease;
}

.kd-why-img:hover img { transform: scale(1.02); }

@keyframes kdFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.012); }
}

@media (prefers-reduced-motion: reduce) {
  .kd-why-img { animation: none; }}

.kd-why-list { display: flex; flex-direction: column; }

.kd-why-item {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kd-why-item:first-child { padding-top: 0; }

.kd-why-num {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 300;
  color: var(--gold);
  min-width: 44px;
  line-height: 1;
}

.kd-why-item h4 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-bottom: 9px;
}

.kd-why-item p {
  font-size: 0.86rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.58);
}

/* Location & Map + pricing summary */
.kd-location {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  min-height: 540px;
}

.kd-loc-map iframe {
  width: 100%;
  height: 100%;
  min-height: 540px;
  border: 0;
  display: block;
  filter: grayscale(0.25) contrast(1.05);
}

.kd-loc-summary {
  background: var(--cream);
  padding: 76px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kd-loc-summary h3 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.25;
  margin: 14px 0 18px;
}

.kd-loc-intro {
  font-size: 1rem;
  line-height: 1.85;
  color: #3d4b56;
  margin-bottom: 28px;
}

.kd-summary-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.kd-summary-list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(13, 28, 38, 0.1);
}

.kd-summary-list li span {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c6670;
  flex-shrink: 0;
}

.kd-summary-list li strong {
  font-size: 0.95rem;
  color: var(--navy);
  font-weight: 600;
  text-align: right;
}

.kd-summary-btn {
  display: block;
  text-align: center;
  background: var(--navy);
  color: #fff;
  padding: 16px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 18px;
  transition: background 0.25s, color 0.25s;
}

.kd-summary-btn:hover { background: var(--gold); color: var(--navy); }

@media (max-width: 900px) {
  .kd-why { padding: 72px 24px; }
  .kd-why-grid { grid-template-columns: 1fr; gap: 32px; }
  .kd-why-img img { min-height: 0; height: auto; }
  .kd-location { grid-template-columns: 1fr; }
  .kd-loc-map iframe { min-height: 360px; }
  .kd-loc-summary { padding: 56px 28px; }}

/* =========================================================
   20 Kwetu Details — autoplay video hero + contained
   (Lakehills-style) layout. These classes are used only by
   kwetu-details.html, so the overrides are page-scoped.
   ========================================================= */

/* ---- HERO: full-bleed autoplay video ---- */
.hero {
  height: clamp(560px, 88vh, 800px);
  min-height: 560px;
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--navy-deep);
  padding-top: 0;
}
.hero::before { display: none; }          /* drop the old unsplash overlay */

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11,25,33,0.86) 0%, rgba(11,25,33,0.5) 52%, rgba(11,25,33,0.24) 100%),
    linear-gradient(180deg, rgba(11,25,33,0.30) 0%, rgba(11,25,33,0.16) 42%, rgba(11,25,33,0.9) 100%);
}

.hero-badge {
  position: absolute;
  top: 92px;
  left: 7%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}
.hero-badge svg { color: var(--gold); width: 8px; height: 8px; }

.hero-content {
  position: absolute;
  left: 7%;
  bottom: 84px;
  z-index: 3;
  width: min(900px, 86%);
  padding: 0;
}

.hero-dev-name {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: #fff;
}

.hero-dev-sub {
  margin-top: 14px;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 600;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 6px;
}
.hero-stat {
  padding: 16px 38px 0 0;
  margin-right: 38px;
  border-right: 1px solid rgba(255,255,255,0.14);
}
.hero-stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-stat__icon-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.hero-stat__icon-label svg { color: var(--gold); }
.hero-stat__value,
.hero-stat__value a {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
}
.hero-stat__value a:hover { color: var(--gold); }

.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.54rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.hero-scroll-hint .scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(rgba(255,255,255,0.55), transparent);
}

/* ---- Contained content sections (no full-width images) ---- */
.welcome {
  max-width: 1180px;
  margin: 0 auto;
  padding: 92px 32px;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  min-height: 0;
  align-items: center;
}
.welcome-text { background: transparent; padding: 0; }
.welcome-img { max-height: 480px; border-radius: 3px; }

/* Stacked variant — full-width horizontal image above the text */
.welcome--stack { grid-template-columns: 1fr; gap: 48px; align-items: stretch; }
.welcome--stack .welcome-img { max-height: none; height: auto; }
.welcome--stack .welcome-img img { height: auto; }
.welcome--stack .welcome-text p { max-width: 760px; }

.feature {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 32px;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  min-height: 0;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.feature.cream { background: transparent; }
.feature.cream .feat-text { background: transparent; }
.feat-img { height: 460px; border-radius: 3px; }
.feat-text { background: transparent; padding: 0; }

.img-row {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  gap: 24px;
}
.img-row-col { height: 400px; border-radius: 3px; }

.enquiry {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  min-height: 0;
}
.enquiry-img { border-radius: 3px 0 0 3px; min-height: 560px; }

@media (max-width: 900px) {
  .hero { height: 78vh; }
  .hero-stats { gap: 0; }
  .hero-stat { padding-right: 22px; margin-right: 22px; }
  .welcome, .feature { grid-template-columns: 1fr; gap: 32px; padding: 56px 24px; }
  .welcome-img, .feat-img { height: 300px; max-height: 300px; }
  .img-row { grid-template-columns: 1fr; padding: 24px; }
  .enquiry { grid-template-columns: 1fr; padding: 0; }
  .enquiry-img { min-height: 280px; border-radius: 0; }}

/* Phones: the desktop hero pins the badge to the top and the heading to
   the bottom. On a narrow screen the large heading grows up into the
   badge and they overlap. Reflow into a normal column so the badge sits
   directly above the heading. Applies to Kwetu + Upcoming heroes. */
@media (max-width: 767px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    min-height: 88svh;
    padding: 116px 0 52px;
  }
  .hero-badge {
    position: static;
    top: auto; left: auto;
    align-self: flex-start;
    margin: 0 7% 20px;
  }
  .hero-content {
    position: static;
    top: auto; left: auto; bottom: auto;
    width: auto;
    margin: 0 7%;
  }
  .hero-scroll-hint { display: none; }
}

/* =========================================================
   21 Kwetu — Floor Plan Slider (same 1180px contained width)
   ========================================================= */
.fp-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 32px;
}

.fp-head {
  text-align: center;
  margin-bottom: 36px;
}

.fp-head h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.2;
  margin-top: 12px;
}

.fp-slider {
  position: relative;
  width: 100%;
  height: 640px;
  background: #fbfaf7;
  border: 1px solid var(--border);
  overflow: hidden;
}

.fp-track { position: absolute; inset: 0; }

.fp-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.fp-slide.is-active { opacity: 1; visibility: visible; }

.fp-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.fp-slide figcaption {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--navy);
  color: #fff;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 16px;
}

.fp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.fp-arrow:hover {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.fp-prev { left: 16px; }
.fp-next { right: 16px; }

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

.fp-dot {
  width: 34px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(13, 28, 38, 0.25);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}

.fp-dot.is-active { background: var(--gold); transform: scaleY(1.6); }

@media (max-width: 900px) {
  .fp-section { padding: 48px 24px; }
  .fp-slider { height: 420px; }
  .fp-slide { padding: 16px; }
  .fp-arrow { width: 40px; height: 40px; font-size: 1.3rem; }}
.dev-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 14px;
}

.dev-filter {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 24px 0;
}
.dev-filter-btn {
  font-family: var(--ff-body);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 11px 26px;
  border: 1px solid var(--stone-dark);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.dev-filter-btn:hover { border-color: var(--navy); }
.dev-filter-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.dev-list {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 24px 90px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.dev-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: box-shadow 0.35s var(--ease-out);
}
.dev-card:hover { box-shadow: 0 26px 60px rgba(20, 39, 51, 0.12); }
.dev-card:nth-child(even) .dev-card__media { order: 2; }   /* alternate image side */

.dev-card__media {
  position: relative;
  min-height: 360px;
  overflow: hidden;
}
.dev-card__media img {
  position: absolute;   /* out of flow so a portrait image never inflates the card */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out);
}
.dev-card:hover .dev-card__media img { transform: scale(1.05); }
.dev-card[data-status="sold"] .dev-card__media img { filter: grayscale(0.35) brightness(0.92); }

.dev-card__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 16px;
}
.dev-card__badge--gold { background: var(--gold); color: var(--navy); }
.dev-card__badge--sold { background: rgba(13, 28, 38, 0.82); color: #fff; }

.dev-card__body {
  padding: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dev-card__loc {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 14px;
}
.dev-card__loc svg { width: 14px; height: 14px; }
.dev-card__name {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 16px;
}
.dev-card__desc {
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 28px;
}

.dev-card__stats {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.dev-stat {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 26px 18px 0;
  margin-right: 26px;
  border-right: 1px solid var(--border);
}
.dev-stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.dev-stat svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }
.dev-stat span {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 3px;
}
.dev-stat strong { font-size: 0.88rem; color: var(--navy); font-weight: 600; }

.dev-card__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.dev-btn {
  font-family: var(--ff-body);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 14px 26px;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  display: inline-flex;
  align-items: center;
}
.dev-btn--gold { background: var(--gold); color: var(--navy); border: 1px solid var(--gold); }
.dev-btn--gold:hover { background: var(--hass-gold-soft); border-color: var(--hass-gold-soft); }
.dev-btn--outline { background: transparent; color: var(--navy); border: 1px solid var(--stone-dark); }
.dev-btn--outline:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.dev-btn--ghost { background: var(--off); color: var(--text-subtle); border: 1px solid var(--border); cursor: default; }

.dev-empty {
  display: none;
  text-align: center;
  color: var(--text-subtle);
  font-size: 0.95rem;
  padding: 40px 0;
}

@media (max-width: 860px) {
  .dev-card { grid-template-columns: 1fr; }
  .dev-card:nth-child(even) .dev-card__media { order: 0; }
  .dev-card__media { min-height: 240px; }
  .dev-card__body { padding: 36px 28px; }
  .dev-stat { padding-right: 16px; margin-right: 16px; }}

/* =========================================================
   23 Developments — Residences Gallery (masonry + lightbox)
   ========================================================= */
.upcoming-projects { padding: 96px 24px; background: var(--hass-navy-dark); color: #fff; }
.upcoming-projects__inner { max-width: 1180px; margin: 0 auto; }
.upcoming-projects__head { text-align: center; margin-bottom: 50px; }
.upcoming-projects__head .gallery-title { color: #fff; }
.upcoming-projects__head .gallery-sub { color: rgba(255,255,255,.58); }
.upcoming-card { display: grid; grid-template-columns: 1.15fr .85fr; background: #fff; color: var(--text-body); }
.upcoming-card__media { position: relative; min-height: 520px; overflow: hidden; display: block; }
.upcoming-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.upcoming-card:hover .upcoming-card__media img { transform: scale(1.035); }
.upcoming-card__badge { position: absolute; top: 24px; left: 24px; padding: 9px 16px; background: var(--gold); color: var(--navy); font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.upcoming-card__body { padding: 58px 52px; display: flex; flex-direction: column; justify-content: center; }
.upcoming-card__body h3 { font-family: var(--ff-display); font-size: clamp(2.1rem,3.5vw,3.2rem); font-weight: 300; line-height: 1.08; color: var(--navy); margin-bottom: 20px; }
.upcoming-card__body > p:not(.dev-eyebrow) { color: var(--muted); font-size: .94rem; line-height: 1.8; margin-bottom: 28px; }
.upcoming-card__meta { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--border); margin-bottom: 30px; }
.upcoming-card__meta span { padding: 18px 12px 18px 0; font-size: .56rem; line-height: 1.8; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.upcoming-card__meta strong { font-size: .7rem; color: var(--navy); letter-spacing: .04em; }
.upcoming-card__body .dev-btn { align-self: flex-start; }
@media (max-width: 820px) {
  .upcoming-projects { padding: 68px 20px; }
  .upcoming-card { grid-template-columns: 1fr; }
  .upcoming-card__media { min-height: 300px; }
  .upcoming-card__body { padding: 38px 26px; }
  .upcoming-card__meta { grid-template-columns: 1fr; }
  .upcoming-card__meta span { border-bottom: 1px solid var(--border); }
  .upcoming-card__meta span:last-child { border-bottom: 0; }}

/* Stacked upcoming cards */
.upcoming-projects__inner .upcoming-card + .upcoming-card { margin-top: 34px; }

/* Behind the design — early visualisations */
.upcoming-visuals { margin-top: 60px; }
.upcoming-visuals__title { text-align: center; font-family: var(--ff-display); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; margin: 6px 0 34px; }
.upcoming-visuals__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.upcoming-visual { margin: 0; }
.upcoming-visual img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.upcoming-visual figcaption { margin-top: 14px; font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.62); }
@media (max-width: 820px) {
  .upcoming-visuals__grid { grid-template-columns: 1fr; gap: 30px; }
}

.gallery {
  background: #ffffff;
  padding: 88px 24px;
  border-top: 1px solid var(--border);
}
.gallery-inner { max-width: 1180px; margin: 0 auto; }

.gallery-head { text-align: center; margin-bottom: 54px; }
.gallery-title {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.1;
}
.gallery-title em { font-style: italic; color: var(--gold); }
.gallery-sub {
  max-width: 580px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

.gallery-group { margin-bottom: 56px; }
.gallery-group:last-child { margin-bottom: 0; }
.gallery-group__label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.gallery-group__name {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 300;
  color: var(--navy);
}
.gallery-group__loc {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.gallery-group__tag {
  margin-left: auto;
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-subtle);
  border: 1px solid var(--border);
  padding: 6px 12px;
}

/* Masonry via CSS columns — gap-free, varied heights */
.gallery-grid { column-count: 4; column-gap: 12px; }

.g-item {
  break-inside: avoid;
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}
.g-item img {
  width: 100%;
  display: block;
  transition: transform 0.8s var(--ease-out);
}
.g-item:hover img { transform: scale(1.06); }
.g-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 25, 33, 0.62), rgba(11, 25, 33, 0) 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.g-item:hover::after { opacity: 1; }
.g-item__cap {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  color: #fff;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.g-item:hover .g-item__cap { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) { .gallery-grid { column-count: 3; }}
@media (max-width: 680px) {
  .gallery { padding: 64px 20px; }
  .gallery-grid { column-count: 2; }
  .gallery-group__label { flex-wrap: wrap; }
  .gallery-group__tag { margin-left: 0; }}

/* Lightbox */
.glb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(7, 17, 23, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
}
.glb.open { display: flex; }
.glb__img {
  max-width: 90vw;
  max-height: 86vh;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.glb__close {
  position: absolute;
  top: 22px;
  right: 28px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}
.glb__close:hover { opacity: 1; color: var(--gold); }
.glb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.glb__nav:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.glb__prev { left: 24px; }
.glb__next { right: 24px; }

/* =========================================================
   23b Upcoming-project detail page (.up-*)
   ========================================================= */
.up-page { background: #f7f7f3; color: var(--text-body); }
.up-intro__copy > p:not(.dev-eyebrow),.up-feature__copy > p:not(.dev-eyebrow) { color: var(--muted); line-height: 1.9; margin-bottom: 16px; }
.up-gallery__head > p:not(.dev-eyebrow) { color: var(--muted); line-height: 1.8; }
.up-interest p:not(.dev-eyebrow) { max-width: 620px; color: rgba(255,255,255,.58); line-height: 1.7; }

/* =========================================================
   24 Unified site navigation (.knav) — shared by every page
   ========================================================= */
.knav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 60px;
  background: var(--hass-navy-dark, #0b1921);
  border-bottom: 1px solid rgba(200,169,110,0.12);
  font-family: var(--ff-body, 'Outfit','Helvetica Neue',Arial,sans-serif);
}
.knav-logo { display: inline-flex; align-items: center; }
.knav-logo img { height: 52px; width: auto; display: block; }
.knav-links {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0; padding: 0;
  align-items: center;
}
.knav-links a {
  font-family: var(--ff-body, 'Outfit','Helvetica Neue',Arial,sans-serif);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(246,243,236,0.72);
  text-decoration: none;
  transition: color 0.2s;
}
.knav-links a:hover, .knav-links a.active { color: var(--hass-gold, #c8a96e); }
.knav-cta {
  font-family: var(--ff-body, 'Outfit','Helvetica Neue',Arial,sans-serif);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hass-navy-dark, #0b1921);
  background: var(--hass-gold, #c8a96e);
  border: 1px solid var(--hass-gold, #c8a96e);
  padding: 11px 24px; text-decoration: none; font-weight: 600;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.knav-cta:hover { background: var(--hass-gold-soft, #dfc78d); border-color: var(--hass-gold-soft, #dfc78d); }
.knav-ham { display: none; background: none; border: 0; color: #f6f3ec; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 6px; }

@media (max-width: 1000px) {
  .knav { padding: 10px 22px; }
  .knav-ham { display: block; position: relative; z-index: 1003; color: var(--hass-gold-soft, #dfc78d); }
  .knav-cta { display: none; }

  /* When the menu is open, the whole bar becomes a full-screen charcoal panel
     laid out as a single column: links, then the Inquire button beneath them. */
  .knav:has(.knav-links.open) {
    position: fixed;
    inset: 0;
    height: 100svh;
    z-index: 1001;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 104px 38px 60px;
    background: var(--hass-charcoal, #182832);
    border-bottom: 0;
    overflow-y: auto;
  }
  .knav:has(.knav-links.open) .knav-logo { display: none; }

  .knav-links {
    display: none;
    list-style: none;
    margin: 0; padding: 0;
    border: 0;
  }
  .knav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .knav-links li { margin: 0; }
  .knav-links a {
    display: block;
    padding: 26px 2px;
    border-bottom: 1px solid rgba(246,243,236,.11);
    color: var(--hass-gold-soft, #dfc78d);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .28em;
  }
  .knav-links a:hover,
  .knav-links a.active { color: #fff; }

  /* Inquire button — sits directly below the last link */
  .knav:has(.knav-links.open) .knav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0 0;
    min-height: 66px;
    background: transparent;
    border: 1px solid rgba(223,199,141,.35);
    color: var(--hass-gold-soft, #dfc78d);
    font-size: 11px;
    letter-spacing: .28em;
  }
  .knav:has(.knav-links.open) .knav-cta::before { content: "✦"; margin-right: 18px; }

  /* Hamburger becomes the × close control, pinned top-right */
  .knav:has(.knav-links.open) .knav-ham {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
  }
  .knav:has(.knav-links.open) .knav-ham::after {
    content: "×";
    font-family: var(--ff-body, 'Outfit','Helvetica Neue',Arial,sans-serif);
    font-size: 27px;
    font-weight: 400;
    line-height: 32px;
  }}

@media (max-width: 1000px) and (max-height: 700px) {
  .knav:has(.knav-links.open) { padding-top: 72px; }
  .knav-links a { padding: 17px 2px; }
  .knav:has(.knav-links.open) .knav-cta { margin-top: 26px; min-height: 58px; }}

/* =========================================================
   25 AI chat widget (floating property advisor)
   ========================================================= */
#kayo-fab {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 1400;
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--hass-gold, #c8a96e);
  color: var(--hass-navy-dark, #0b1921);
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(11, 25, 33, 0.35);
  transition: transform .2s, background .2s;
}
#kayo-fab:hover { background: var(--hass-gold-soft, #dfc78d); transform: translateY(-2px); }
#kayo-fab svg { width: 26px; height: 26px; fill: currentColor; }
/* WhatsApp variant of the floating button */
#kayo-fab.wa { background: #25d366; color: #fff; }
#kayo-fab.wa:hover { background: #1ebe57; }

#kayo-chat {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 1401;
  width: 372px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100vh - 52px);
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--hass-cream, #f5f1e8);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(11, 25, 33, 0.42);
  font-family: var(--ff-body);
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition: opacity .24s ease, transform .24s ease;
}
#kayo-chat.open { display: flex; opacity: 1; transform: translateY(0) scale(1); }

.chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--hass-cream, #f5f1e8);
}
.msg {
  max-width: 82%;
  padding: 11px 14px;
  font-size: 13px; line-height: 1.5;
  border-radius: 14px;
  word-wrap: break-word;
}
.msg.bot {
  align-self: flex-start;
  background: #fff;
  color: var(--text-body, #2a2f31);
  border: 1px solid rgba(11, 25, 33, .08);
  border-bottom-left-radius: 4px;
}
.msg.user {
  align-self: flex-end;
  background: var(--hass-navy, #142733);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg.typing {
  align-self: flex-start;
  background: #fff;
  border: 1px solid rgba(11, 25, 33, .08);
}
.typing-dots { display: flex; gap: 4px; }
.typing-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hass-gold, #c8a96e);
  animation: kayoTyping 1s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes kayoTyping {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.quick-replies {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 18px 12px;
  background: var(--hass-cream, #f5f1e8);
}
#chat-input {
  flex: 1 1 auto;
  border: 0; outline: 0;
  background: transparent;
  font-family: var(--ff-body); font-size: 13px;
  color: var(--text-body, #2a2f31);
  padding: 8px 4px;
}
#chat-input::placeholder { color: var(--muted, #6f7b7d); }

@media (max-width: 480px) {
  #kayo-chat {
    right: 12px; left: 12px; bottom: 12px;
    width: auto;
    height: calc(100svh - 24px); max-height: none;
  }
  #kayo-fab { right: 18px; bottom: 18px; }}


/* ═════════════════════════════════════════════════════════════
   Site cohesion — elevated media tiles on the detail pages
   (Kwetu + Upcoming). Soft two-layer shadow matching pages.css
   --pg-shadow so tiles read the same across the whole site.
   ═════════════════════════════════════════════════════════════ */
.welcome-img,
.feat-img,
.kd-why-img,
.img-row-col,
.full-img {
  border-radius: 4px;
  box-shadow: 0 24px 54px -32px rgba(12,16,19,.30), 0 6px 16px -9px rgba(12,16,19,.15);
}
.quick-facts {
  border-radius: 4px;
  box-shadow: 0 18px 44px -30px rgba(12,16,19,.22);
}


/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE SYSTEM  (merged from home.css — kh-* components, index.html)
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   KAYO PROPERTIES — HOMEPAGE (editorial redesign)
   home.css

   Loaded only by index.html, AFTER styles.css. Every rule is
   prefixed `.kh-` (kayo home) or scoped to `body.spl-home`, so
   nothing here can leak into the other pages, which continue to
   use styles.css untouched.

   Colour journey (top → bottom):
     charcoal hero · ivory about · ivory featured · soft-ivory
     portfolio · charcoal process · ivory why · charcoal journal
     · ivory contact · charcoal footer
   ═══════════════════════════════════════════════════════════════ */

:root {
  --kayo-charcoal:      #0c1013;
  --kayo-charcoal-soft: #14181b;
  --kayo-ivory:         #f3f0e9;
  --kayo-ivory-light:   #faf8f3;
  --kayo-white:         #ffffff;
  --kayo-gold:          #b79a63;
  --kayo-gold-soft:     #c9b283;
  /* Deeper gold reserved for small text on ivory — the brand gold
     only reaches ~2.6:1 there, which fails AA at label sizes. */
  --kayo-gold-ink:      #7c5f2d;
  --kayo-text-dark:     #171717;
  --kayo-text-muted:    #5d5a53;

  --kh-serif: 'DM Serif Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --kh-sans:  'Outfit', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --kh-wrap:      1320px;
  --kh-gutter:    clamp(20px, 5vw, 64px);
  --kh-section-y: clamp(72px, 9vw, 132px);
  --kh-ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* ───────────────────────────────────────────────
   BASE
   ─────────────────────────────────────────────── */

/* The shared sheet reserves 76px for the fixed bar. The homepage
   nav sits *over* the hero instead, so that offset is removed. */
body.spl-home {
  padding-top: 0;
  background: var(--kayo-charcoal);
  font-family: var(--kh-sans);
  overflow-x: hidden;
}

.kh-wrap {
  width: 100%;
  max-width: var(--kh-wrap);
  margin-inline: auto;
  padding-inline: var(--kh-gutter);
}

.kh-section { padding-block: var(--kh-section-y); }

.kh-dark  { background: var(--kayo-charcoal); color: rgba(246, 243, 236, 0.86); }

/* ── Shared type ── */
.kh-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-family: var(--kh-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--kayo-gold-ink);
}
.kh-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--kayo-gold);
  flex-shrink: 0;
}
.kh-dark .kh-eyebrow { color: var(--kayo-gold-soft); }

.kh-h2 {
  margin: 0;
  font-family: var(--kh-serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--kayo-text-dark);
}
.kh-dark .kh-h2 { color: var(--kayo-white); }
.kh-h2 em { font-style: italic; color: var(--kayo-gold); }

.kh-body {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--kayo-text-muted);
  max-width: 58ch;
}
.kh-dark .kh-body { color: rgba(246, 243, 236, 0.78); }

/* ── Buttons / links ── */
.kh-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 30px;
  font-family: var(--kh-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--kayo-gold);
  color: var(--kayo-text-dark);
  background: transparent;
  transition: background 0.3s var(--kh-ease), color 0.3s var(--kh-ease);
}
.kh-btn .kh-arw { transition: transform 0.3s var(--kh-ease); }
.kh-btn:hover  { background: var(--kayo-gold); color: var(--kayo-charcoal); }
.kh-btn:hover .kh-arw { transform: translateX(5px); }

.kh-btn--solid { background: var(--kayo-charcoal); border-color: var(--kayo-charcoal); color: var(--kayo-ivory-light); }
.kh-btn--solid:hover { background: var(--kayo-gold); border-color: var(--kayo-gold); color: var(--kayo-charcoal); }

.kh-dark .kh-btn { color: var(--kayo-ivory-light); }
.kh-dark .kh-btn:hover { color: var(--kayo-charcoal); }

/* Text link with the thin gold underline that draws in on hover */
.kh-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  /* Keeps the hit area at/above the 24px minimum target size. */
  padding: 5px 0 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kayo-gold-ink);
}
.kh-dark .kh-link { color: var(--kayo-gold-soft); }
.kh-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 0.4s var(--kh-ease);
}
.kh-link:hover::after { transform: scaleX(1); }
.kh-link .kh-arw { transition: transform 0.3s var(--kh-ease); }
.kh-link:hover .kh-arw { transform: translateX(5px); }

.kh-arw { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Focus visibility (keyboard) ── */
body.spl-home a:focus-visible,
body.spl-home button:focus-visible,
body.spl-home input:focus-visible,
body.spl-home select:focus-visible,
body.spl-home textarea:focus-visible {
  outline: 2px solid var(--kayo-gold);
  outline-offset: 3px;
}

/* ── Scroll reveal ──
   Fail-safe by design: the hidden state is applied only once the
   inline head script has proved JS is running (.kh-js). Without JS
   — or if the observer never fires — the content is simply visible,
   never a blank page. */
.kh-js .kh-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--kh-ease), transform 0.8s var(--kh-ease);
}
.kh-js .kh-reveal.is-in { opacity: 1; transform: none; }

/* ───────────────────────────────────────────────
   NAVIGATION — transparent over the hero, charcoal on scroll
   ─────────────────────────────────────────────── */
body.spl-home .knav {
  background: transparent;
  border-bottom: 1px solid rgba(246, 243, 236, 0.12);
  padding: 14px clamp(20px, 5vw, 64px);
  transition: background 0.45s var(--kh-ease), padding 0.45s var(--kh-ease), border-color 0.45s var(--kh-ease);
}
body.spl-home .knav.is-scrolled {
  background: rgba(12, 16, 19, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding-block: 8px;
  border-bottom-color: rgba(183, 154, 99, 0.2);
}
body.spl-home .knav-logo img { height: 44px; }
body.spl-home .knav-links { gap: clamp(22px, 3vw, 46px); }
body.spl-home .knav-links a {
  font-family: var(--kh-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: rgba(246, 243, 236, 0.82);
}
body.spl-home .knav-links a:hover,
body.spl-home .knav-links a.active { color: var(--kayo-gold-soft); }
body.spl-home .knav-cta {
  background: transparent;
  border: 1px solid rgba(183, 154, 99, 0.6);
  color: var(--kayo-ivory-light);
  font-weight: 500;
  letter-spacing: 0.2em;
  padding: 11px 22px;
}
body.spl-home .knav-cta:hover { background: var(--kayo-gold); border-color: var(--kayo-gold); color: var(--kayo-charcoal); }

/* The shared mobile panel keeps working; just match the palette.
   `.is-menu-open` is set by the nav script — it does not depend on
   :has() support, so the full-screen panel always has a background. */
@media (max-width: 1000px) {
  body.spl-home .knav.is-menu-open,
  body.spl-home .knav:has(.knav-links.open) {
    background: var(--kayo-charcoal);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ───────────────────────────────────────────────
   1 · HERO
   ─────────────────────────────────────────────── */
.kh-hero {
  position: relative;
  /* Fill the viewport so the image reaches the fold; svh keeps it
     honest on mobile where the browser chrome eats into vh. */
  height: 100svh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  background: var(--kayo-charcoal);
  overflow: hidden;
}
.kh-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source is a 3:4 portrait, so only the vertical crop is live — the
     horizontal axis has no overflow to position. 42% holds the dusk sky
     in the upper-left behind the heading (as in the reference shots);
     a true 50% drops the window onto the brightest lit wall and the
     white type loses its background. */
  object-position: center 42%;
}
.kh-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* stronger on the left, behind the heading */
    linear-gradient(90deg,
      rgba(5, 11, 16, 0.72) 0%,
      rgba(5, 11, 16, 0.45) 42%,
      rgba(5, 11, 16, 0.22) 100%),
    /* lift off the bottom edge for the tagline and the ivory seam */
    linear-gradient(0deg,
      rgba(5, 11, 16, 0.45) 0%,
      transparent 45%),
    /* short top wash so the overlaid nav stays legible against sky */
    linear-gradient(180deg,
      rgba(5, 11, 16, 0.42) 0%,
      transparent 20%);
}
.kh-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Sits the heading block low-left, close to the ivory seam. */
  padding-bottom: clamp(60px, 8vh, 104px);
  padding-top: 150px;
}
.kh-hero__title {
  margin: 0;
  font-family: var(--kh-serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 6.9vw, 5.7rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--kayo-white);
  max-width: 15ch;
  text-wrap: balance;
}
.kh-hero__line {
  width: 70px;
  height: 1px;
  border: 0;
  margin: clamp(28px, 4vw, 44px) 0 26px;
  background: var(--kayo-gold);
}
.kh-hero__tag {
  margin: 0;
  max-width: 30ch;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(246, 243, 236, 0.9);
}
.kh-hero__scroll {
  position: absolute;
  z-index: 2;
  /* Sits in the outer gutter, clear of the overlapping About image. */
  right: var(--kh-gutter);
  bottom: clamp(66px, 8.6vh, 112px);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.55);
}
.kh-hero__scroll span { width: 54px; height: 1px; background: rgba(246, 243, 236, 0.4); }

/* ───────────────────────────────────────────────
   2 · ABOUT — ivory panel overlapping the hero
   ─────────────────────────────────────────────── */
.kh-about {
  position: relative;
  z-index: 3;
  background: var(--kayo-ivory);
  /* Nothing crosses the seam: the ivory panel begins cleanly at the
     hero's bottom edge, which keeps the hero a true 90vh. */
  margin-top: 0;
  padding-block: var(--kh-section-y);
}
.kh-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(36px, 5vw, 76px);
  /* Image sits beside the text, centred against it, so the spare
     height splits evenly above and below rather than pooling as one
     dead band underneath. */
  align-items: center;
}
.kh-about__media {
  position: relative;
  /* 4:3 matches the source exactly — shown uncropped. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--kayo-charcoal-soft);
}
.kh-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--kh-ease);
}
.kh-about__media:hover img { transform: scale(1.045); }
.kh-about__text .kh-body { margin-top: 26px; }
.kh-about__quote {
  margin: 30px 0 0;
  padding-left: 22px;
  border-left: 1px solid var(--kayo-gold);
  font-family: var(--kh-serif);
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--kayo-text-dark);
}
.kh-about__quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--kh-sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kayo-text-muted);
}
.kh-about__text .kh-btn { margin-top: 34px; }

/* ───────────────────────────────────────────────
   3 · FEATURED PROJECT
   ─────────────────────────────────────────────── */
.kh-featured { background: var(--kayo-ivory); padding-top: 0; }
.kh-featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6vw, 76px);
  align-items: center;
}
.kh-featured__name {
  margin: 0;
  font-family: var(--kh-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  line-height: 1.1;
  color: var(--kayo-text-dark);
}
.kh-featured__loc {
  margin: 8px 0 0;
  font-family: var(--kh-serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--kayo-gold-ink);
}
.kh-featured__grid .kh-body { margin-top: 22px; }

.kh-specs {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid rgba(183, 154, 99, 0.34);
}
.kh-specs li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(183, 154, 99, 0.34);
}
.kh-specs dt, .kh-specs .kh-spec__k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kayo-text-muted);
}
.kh-specs .kh-spec__v {
  font-family: var(--kh-serif);
  font-size: 1.15rem;
  color: var(--kayo-text-dark);
  text-align: right;
}
.kh-featured__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.kh-featured__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--kayo-charcoal-soft);
}
.kh-featured__media img,
.kh-featured__video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1s var(--kh-ease);
}
.kh-featured__media:hover img { transform: scale(1.045); }

/* Floor-plan + price-list links under the specs */
.kh-featured__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 22px 0 0;
}
.kh-featured__docs a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--kayo-gold-ink);
  text-decoration: none;
  transition: color 0.25s var(--kh-ease);
}
.kh-featured__docs a:hover { color: var(--kayo-charcoal); }
.kh-featured__docs svg { width: 15px; height: 15px; flex-shrink: 0; }

.kh-badge {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 2;
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kayo-charcoal);
  background: var(--kayo-gold);
}

/* ───────────────────────────────────────────────
   4 · PORTFOLIO
   ─────────────────────────────────────────────── */
.kh-portfolio { background: var(--kayo-ivory-light); }
.kh-portfolio__head { text-align: center; margin-bottom: clamp(38px, 5vw, 64px); }
.kh-portfolio__head .kh-eyebrow { justify-content: center; }
.kh-portfolio__head .kh-eyebrow::before { display: none; }

.kh-grid4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.kh-pcard { text-decoration: none; display: block; color: inherit; }
.kh-pcard__media {
  position: relative;
  /* Landscape, as in the mockup. The library mixes 16:9 renders with
     3:4 phone photography — a 4:3 frame crops both gently, where a
     portrait frame cut the renders down to a narrow centre strip. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--kayo-charcoal-soft);
  margin-bottom: 18px;
}
.kh-pcard__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1s var(--kh-ease);
}
.kh-pcard:hover .kh-pcard__media img { transform: scale(1.05); }
.kh-pcard__status {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  padding: 6px 12px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(12, 16, 19, 0.78);
  color: var(--kayo-ivory-light);
}
.kh-pcard__status--gold { background: var(--kayo-gold); color: var(--kayo-charcoal); }
.kh-pcard__name {
  margin: 0;
  font-family: var(--kh-serif);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.25;
  color: var(--kayo-text-dark);
}
.kh-pcard__loc {
  margin: 5px 0 0;
  font-family: var(--kh-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--kayo-gold-ink);
}
.kh-portfolio__foot { display: flex; justify-content: center; margin-top: clamp(38px, 5vw, 58px); }

/* A whisper-light unifying grade so the saturated CGI renders and the
   camera photography read as one set rather than two. Deliberately
   barely-there — enough to pull the renders' oversaturation toward the
   photos, not enough to look filtered. */
.kh-pcard__media img,
.kh-featured__media img,
.kh-featured__video,
.kh-about__media img { filter: saturate(0.94) contrast(1.02); }

/* ───────────────────────────────────────────────
   4b · PROOF — quiet track-record band
   ─────────────────────────────────────────────── */
.kh-proof {
  background: var(--kayo-ivory);
  border-top: 1px solid rgba(183, 154, 99, 0.28);
  padding-block: clamp(44px, 5.5vw, 72px);
}
.kh-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin: 0;
}
.kh-proof__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 22px;
  border-left: 1px solid rgba(183, 154, 99, 0.34);
}
.kh-proof__item dt {
  font-family: var(--kh-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 3.4vw, 3.1rem);
  line-height: 0.9;
  color: var(--kayo-text-dark);
}
.kh-proof__item dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--kayo-text-muted);
}

/* ───────────────────────────────────────────────
   5 · PROCESS
   ─────────────────────────────────────────────── */
.kh-process { background: var(--kayo-charcoal); }
.kh-process__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(38px, 6vw, 80px);
  align-items: center;
}
.kh-process__grid .kh-body { margin-top: 22px; }
.kh-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 38px) clamp(24px, 3vw, 44px);
  margin: clamp(34px, 4.5vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}
.kh-step { border-top: 1px solid rgba(183, 154, 99, 0.26); padding-top: 18px; }
.kh-step__icon { display: block; width: 20px; height: 20px; color: var(--kayo-gold); margin-bottom: 14px; }
.kh-step__num {
  display: block;
  font-family: var(--kh-serif);
  font-size: 0.95rem;
  color: rgba(183, 154, 99, 0.75);
  margin-bottom: 4px;
}
.kh-step__title {
  margin: 0 0 7px;
  font-family: var(--kh-serif);
  font-weight: 400;
  font-size: 1.22rem;
  color: var(--kayo-white);
}
.kh-step__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(246, 243, 236, 0.72);
}
.kh-process__cta { margin-top: clamp(34px, 4vw, 48px); }
.kh-process__media {
  /* Source is a 16:9 render — keep the frame close enough that the
     building is not cropped to a sliver. */
  aspect-ratio: 4 / 3.6;
  overflow: hidden;
  background: var(--kayo-charcoal-soft);
}
.kh-process__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1s var(--kh-ease);
}
.kh-process__media:hover img { transform: scale(1.04); }

/* ───────────────────────────────────────────────
   6 · WHY KAYO
   ─────────────────────────────────────────────── */
.kh-why { background: var(--kayo-ivory); }
.kh-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.kh-why__grid .kh-body { margin-top: 24px; }
.kh-why__points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.kh-why__points li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--kayo-text-muted);
}
.kh-why__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 13px; height: 1px;
  background: var(--kayo-gold);
}
.kh-why__grid .kh-link { margin-top: 32px; }
.kh-why__media {
  position: relative;
  aspect-ratio: 4 / 4.3;
  overflow: hidden;
  background: var(--kayo-charcoal-soft);
}
.kh-why__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  display: block;
  transition: transform 1s var(--kh-ease);
}
.kh-why__media:hover img { transform: scale(1.04); }
.kh-why__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 44px 24px 20px;
  background: linear-gradient(to top, rgba(12,16,19,0.86), transparent);
  color: var(--kayo-ivory-light);
}
.kh-why__caption strong {
  display: block;
  font-family: var(--kh-serif);
  font-weight: 400;
  font-size: 1.16rem;
}
.kh-why__caption span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kayo-gold-soft);
}

/* ───────────────────────────────────────────────
   7 · JOURNAL
   ─────────────────────────────────────────────── */
.kh-journal { background: var(--kayo-charcoal); }
.kh-journal__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: clamp(38px, 5vw, 60px);
}
.kh-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
}
.kh-jcard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  padding-left: clamp(18px, 2vw, 30px);
  border-left: 1px solid rgba(183, 154, 99, 0.24);
}
.kh-grid3 .kh-jcard:first-child { padding-left: 0; border-left: 0; }
.kh-jcard__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--kayo-charcoal-soft);
  margin-bottom: 20px;
}
.kh-jcard__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1s var(--kh-ease);
}
.kh-jcard:hover .kh-jcard__media img { transform: scale(1.05); }
.kh-jcard__cat {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kayo-gold-soft);
}
.kh-jcard__title {
  margin: 0;
  font-family: var(--kh-serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--kayo-white);
}
.kh-jcard__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.6);
  transition: color 0.3s var(--kh-ease);
}
.kh-jcard:hover .kh-jcard__more { color: var(--kayo-gold-soft); }
.kh-jcard:hover .kh-jcard__more .kh-arw { transform: translateX(5px); }
.kh-jcard__more .kh-arw { transition: transform 0.3s var(--kh-ease); }

/* ───────────────────────────────────────────────
   8 · CONTACT
   ─────────────────────────────────────────────── */
.kh-contact { background: var(--kayo-ivory); }
.kh-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(38px, 6vw, 80px);
}
.kh-contact__grid .kh-body { margin-top: 22px; }
.kh-contact__grid .kh-btn { margin-top: 32px; }
.kh-contact__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  align-content: start;
  padding-top: 6px;
}
.kh-detail h3 {
  margin: 0 0 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kayo-gold-ink);
}
.kh-detail p, .kh-detail a {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--kayo-text-muted);
  text-decoration: none;
  transition: color 0.25s var(--kh-ease);
}
.kh-detail a:hover { color: var(--kayo-gold-ink); }
.kh-socials { display: flex; gap: 10px; margin-top: 4px; }
.kh-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  margin: 0;
  border: 1px solid rgba(23, 23, 23, 0.2);
  border-radius: 50%;
  color: var(--kayo-text-dark);
  transition: background 0.25s var(--kh-ease), color 0.25s var(--kh-ease), border-color 0.25s var(--kh-ease);
}
.kh-socials a:hover { background: var(--kayo-charcoal); border-color: var(--kayo-charcoal); color: var(--kayo-ivory-light); }

/* The existing enquiry form, re-skinned for the ivory band. */
.kh-contact .kayo-enquiry-wrap { padding: 0; margin-top: clamp(46px, 6vw, 72px); background: transparent; }
.kh-contact .kayo-enquiry {
  max-width: none;
  margin: 0;
  background: var(--kayo-white);
  border: 1px solid rgba(23, 23, 23, 0.09);
  border-radius: 0;
  box-shadow: none;
}

/* ───────────────────────────────────────────────
   9 · FOOTER
   ─────────────────────────────────────────────── */
.kh-footer {
  background: var(--kayo-charcoal);
  color: rgba(246, 243, 236, 0.6);
  padding-block: clamp(40px, 5vw, 60px) 26px;
  border-top: 1px solid rgba(183, 154, 99, 0.16);
}
.kh-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(246, 243, 236, 0.1);
}
.kh-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--kayo-ivory-light);
}
.kh-footer__brand img { height: 38px; width: auto; display: block; }
.kh-footer__brand span {
  font-family: var(--kh-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.kh-footer__nav { display: flex; gap: clamp(16px, 2.4vw, 34px); flex-wrap: wrap; }
.kh-footer__nav a {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.66);
  text-decoration: none;
  transition: color 0.25s var(--kh-ease);
}
.kh-footer__nav a:hover { color: var(--kayo-gold-soft); }
.kh-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  font-size: 12px;
  color: rgba(246, 243, 236, 0.5);
}
.kh-footer__bottom p { margin: 0; }
.kh-footer__bottom a { color: inherit; text-decoration: none; }
.kh-footer__bottom a:hover { color: var(--kayo-gold-soft); }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

/* ── Laptop ── */
@media (max-width: 1180px) {
  .kh-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}

@media (max-width: 980px) {
  .kh-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 36px; }}
@media (max-width: 430px) {
  .kh-proof__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }}

/* ── Tablet ── */
@media (max-width: 980px) {
  .kh-about__grid,
  .kh-featured__grid,
  .kh-process__grid,
  .kh-why__grid,
  .kh-contact__grid { grid-template-columns: minmax(0, 1fr); }

  /* Image first on the About + Featured panels, matching the
     mockup's reading order once stacked. */
  .kh-about__media { order: -1; aspect-ratio: 4 / 3; }
  .kh-featured__media { order: -1; aspect-ratio: 16 / 10; }
  .kh-process__media { aspect-ratio: 16 / 10; }
  .kh-why__media { aspect-ratio: 4 / 3.4; }

  .kh-grid3 { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .kh-jcard { padding-left: 0; border-left: 0; border-top: 1px solid rgba(183,154,99,0.24); padding-top: 26px; }
  .kh-grid3 .kh-jcard:first-child { border-top: 0; padding-top: 0; }
  .kh-journal__head { align-items: flex-start; flex-direction: column; }
}

/* Short viewports (768px-tall laptops, landscape tablets): fill the
   window like everywhere else, but drop the min-height floor so a very
   short screen never makes the hero taller than the viewport. */
@media (min-width: 641px) and (max-height: 820px) {
  .kh-hero { height: 100svh; min-height: 0; }
  .kh-hero__inner { padding-top: 116px; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .kh-hero { height: auto; min-height: 88svh; max-height: none; }
  .kh-hero__img { object-position: center 52%; }
  .kh-hero__inner { padding-top: 120px; padding-bottom: 72px; }
  .kh-hero__title { max-width: 12ch; }
  .kh-hero__scroll { display: none; }

  .kh-about__media { aspect-ratio: 4 / 3; }
  .kh-grid4 { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .kh-pcard__media { aspect-ratio: 16 / 10; }
  .kh-steps { grid-template-columns: minmax(0, 1fr); }
  .kh-specs li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .kh-specs .kh-spec__v { text-align: left; }
  .kh-featured__actions .kh-btn { flex: 1 1 100%; justify-content: center; }
  .kh-footer__top { flex-direction: column; align-items: flex-start; }
  .kh-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  body.spl-home *,
  body.spl-home *::before,
  body.spl-home *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .kh-js .kh-reveal { opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════
   INNER-PAGE SYSTEM  (merged from pages.css — pg-* components)
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   KAYO PROPERTIES — INNER PAGES (editorial rebuild)
   pages.css

   Loaded by the inner pages (developments, ecosystem, kwetu-details,
   upcoming-project, contacts, privacy-policy) AFTER styles.css and
   home.css. It reuses the homepage's kh-* primitives (from home.css,
   which are unscoped) and adds the components unique to these pages.

   All prefixes are `pg-` so nothing here collides with styles.css or
   home.css. Functional widget classes/ids (forms, sliders, maps) are
   left untouched — only presentation changes.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --pg-charcoal:#0c1013; --pg-charcoal-2:#14181b;
  --pg-ivory:#f3f0e9; --pg-ivory-light:#faf8f3; --pg-white:#fff;
  --pg-gold:#b79a63; --pg-gold-soft:#c9b283; --pg-gold-ink:#7c5f2d;
  --pg-ink:#1a1712; --pg-muted:#57503f; --pg-line:#ddd6c6;
  --pg-serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --pg-sans:'Outfit','Helvetica Neue',Arial,sans-serif;
  --pg-wrap:1240px; --pg-ease:cubic-bezier(.22,1,.36,1);
  /* Refined elevation — large blur, low opacity, warm-biased. Lifts a
     tile off the page without the heavy clip-art drop shadow. Two
     layers: a soft ambient spread and a tight contact shadow. */
  --pg-shadow:0 26px 60px -32px rgba(26,23,18,.32), 0 6px 16px -10px rgba(26,23,18,.18);
  --pg-shadow-hover:0 34px 72px -30px rgba(26,23,18,.40), 0 8px 20px -10px rgba(26,23,18,.20);
}

/* The inner pages set body.contact-page etc.; keep them light + clean. */
.pg{
  background:var(--pg-ivory);
  color:var(--pg-ink);
  font-family:var(--pg-sans);
  /* clears the fixed .knav from styles.css */
  padding-top:76px;
}
.pg-wrap{max-width:var(--pg-wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.pg-section{padding-block:clamp(60px,8vw,110px)}
.pg-ivory{background:var(--pg-ivory)}

.pg-eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 22px;
  font-family:var(--pg-sans);font-size:11px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--pg-gold-ink);
}
.pg-eyebrow::before{content:"";width:34px;height:1px;background:var(--pg-gold);flex:none}
.pg-eyebrow--center{justify-content:center}
.pg-eyebrow--center::before{display:none}
.pg-dark .pg-eyebrow{color:var(--pg-gold-soft)}

.pg-h2{
  margin:0;font-family:var(--pg-serif);font-weight:400;
  font-size:clamp(2rem,4vw,3.2rem);line-height:1.12;letter-spacing:-.01em;
  color:var(--pg-ink);text-wrap:balance;
}
.pg-dark .pg-h2{color:#fff}
.pg-h2 em,.pg-em{font-style:italic;color:var(--pg-gold-ink)}
.pg-dark .pg-h2 em{color:var(--pg-gold-soft)}

.pg-lead{margin:0;font-size:16.5px;line-height:1.8;color:var(--pg-muted);max-width:60ch}
.pg-dark .pg-lead{color:rgba(244,241,234,.78)}
.pg-btn .pg-arw{width:15px;height:15px;transition:transform .3s var(--pg-ease)}
.pg-btn:hover .pg-arw{transform:translateX(5px)}

.pg-link{
  display:inline-flex;align-items:center;gap:11px;position:relative;
  padding:5px 0 8px;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;color:var(--pg-gold-ink);
}
.pg-dark .pg-link{color:var(--pg-gold-soft)}
.pg-link::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(.28);transform-origin:left;transition:transform .4s var(--pg-ease)}
.pg-link:hover::after{transform:scaleX(1)}
.pg-link .pg-arw{width:14px;height:14px;transition:transform .3s var(--pg-ease)}
.pg-link:hover .pg-arw{transform:translateX(5px)}

body :focus-visible{outline:2px solid var(--pg-gold);outline-offset:3px}

/* reveal */
.pg-js .pg-reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--pg-ease),transform .8s var(--pg-ease)}
.pg-js .pg-reveal.in{opacity:1;transform:none}

/* ───────────────────────────────────────────────
   PAGE HERO (compact editorial banner over an image)
   ─────────────────────────────────────────────── */
.pg-hero{
  position:relative;min-height:clamp(340px,44vw,520px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--pg-charcoal);
}
.pg-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.02)}
.pg-hero__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(5,11,16,.78),rgba(5,11,16,.4) 55%,rgba(5,11,16,.2)),
  linear-gradient(0deg,rgba(5,11,16,.6),transparent 50%),
  linear-gradient(180deg,rgba(5,11,16,.5),transparent 24%)}
.pg-hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(40px,6vw,72px);padding-top:clamp(90px,12vw,150px)}
.pg-hero__badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pg-charcoal);background:var(--pg-gold);padding:6px 13px;margin-bottom:18px}
.pg-hero__title{margin:0;font-family:var(--pg-serif);font-weight:400;
  font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.03;letter-spacing:-.015em;color:#fff;max-width:16ch}
.pg-hero__title em{font-style:italic;color:var(--pg-gold-soft)}
.pg-hero__rule{width:64px;height:1px;background:var(--pg-gold);margin:clamp(18px,3vw,28px) 0 18px;border:0}
.pg-hero__sub{margin:0;max-width:46ch;font-size:clamp(.9rem,1.4vw,1.05rem);line-height:1.7;
  color:rgba(244,241,234,.9);font-weight:300}

/* ───────────────────────────────────────────────
   CONTACT
   ─────────────────────────────────────────────── */
.pg-contact__grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(36px,5vw,72px);align-items:start}
.pg-contact__intro .pg-lead{margin-top:22px}
.pg-contact__details{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;margin-top:clamp(30px,4vw,44px)}
.pg-detail h3{margin:0 0 12px;font-family:var(--pg-sans);font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--pg-gold-ink)}
.pg-detail a,.pg-detail p{display:block;margin:0 0 5px;font-size:15px;line-height:1.7;
  color:var(--pg-muted);text-decoration:none;transition:color .25s var(--pg-ease)}
.pg-detail a:hover{color:var(--pg-gold-ink)}
.pg-socials{display:flex;gap:10px;margin-top:2px}
.pg-socials a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid rgba(23,23,23,.2);border-radius:50%;color:var(--pg-ink);
  transition:background .25s,color .25s,border-color .25s}
.pg-socials a svg{width:16px;height:16px;fill:currentColor}
.pg-socials a:hover{background:var(--pg-charcoal);border-color:var(--pg-charcoal);color:var(--pg-ivory-light)}

/* Form — restyles the existing #contactForm markup (cf-* ids preserved) */
.pg-formcard{background:var(--pg-white);border:1px solid var(--pg-line);padding:clamp(24px,3vw,40px);box-shadow:var(--pg-shadow)}
.pg-formcard .cc-form-grid,.pg-formcard .cc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.pg-formcard .cc-field{display:flex;flex-direction:column}
.pg-formcard .cc-field--full{grid-column:1/-1}
.pg-formcard label{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pg-muted);margin-bottom:8px}
.pg-formcard input,.pg-formcard select,.pg-formcard textarea{
  width:100%;font-family:var(--pg-sans);font-size:15px;color:var(--pg-ink);
  background:var(--pg-ivory-light);border:1px solid var(--pg-line);border-radius:0;
  padding:12px 14px;transition:border-color .2s}
.pg-formcard textarea{min-height:110px;resize:vertical}
.pg-formcard input:focus,.pg-formcard select:focus,.pg-formcard textarea:focus{
  outline:none;border-color:var(--pg-gold)}
.pg-formcard .cc-form-submit{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.pg-formcard .btn-primary{
  align-self:flex-start;display:inline-flex;align-items:center;gap:12px;
  background:var(--pg-charcoal);color:var(--pg-ivory-light);border:1px solid var(--pg-charcoal);
  font-family:var(--pg-sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:15px 32px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.pg-formcard .btn-primary:hover{background:var(--pg-gold);border-color:var(--pg-gold);color:var(--pg-charcoal)}
.pg-formcard .cc-form-note{margin:0;font-size:12px;color:var(--pg-muted)}
.pg-formcard .cc-form-note a{color:var(--pg-gold-ink)}
.pg-formcard .cc-form-success{display:none;flex-direction:column;gap:10px;text-align:center;padding:30px 10px}
.pg-formcard .cc-form-success.show,.pg-formcard .cc-form-success[style*="flex"]{display:flex}
.pg-formcard .cc-tick{width:46px;height:46px;border-radius:50%;background:var(--pg-gold);
  color:var(--pg-charcoal);display:flex;align-items:center;justify-content:center;margin:0 auto}
.pg-formcard .cc-form-success h4{font-family:var(--pg-serif);font-weight:400;font-size:1.4rem;margin:0;color:var(--pg-ink)}
.pg-formcard .cc-form-success p{margin:0;color:var(--pg-muted);font-size:14.5px;line-height:1.7;max-width:40ch;margin-inline:auto}

/* Map row */
.pg-map{display:grid;grid-template-columns:1.3fr .7fr;min-height:460px}
.pg-map iframe{width:100%;height:100%;min-height:460px;border:0;display:block;filter:grayscale(.2) contrast(1.03)}
.pg-map__card{background:var(--pg-charcoal);color:#fff;padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.pg-map__card .pg-eyebrow{color:var(--pg-gold-soft)}
.pg-map__name{font-family:var(--pg-serif);font-size:1.5rem;margin:0 0 12px;color:#fff}
.pg-map__addr{margin:0 0 22px;line-height:1.8;color:rgba(244,241,234,.72);font-size:14.5px;letter-spacing:.02em}

/* Subscribe strip */
.pg-subscribe{background:var(--pg-charcoal);color:#fff;text-align:center;padding-block:clamp(52px,7vw,84px)}
.pg-subscribe .pg-h2{color:#fff}
.pg-subscribe__social{display:flex;justify-content:center;gap:12px;margin:26px 0 30px}
.pg-subscribe__social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid rgba(244,241,234,.24);border-radius:50%;color:#f6f3ec;transition:background .25s,color .25s,border-color .25s}
.pg-subscribe__social a svg{width:17px;height:17px;fill:currentColor}
.pg-subscribe__social a:hover{background:var(--pg-gold);border-color:var(--pg-gold);color:var(--pg-charcoal)}
.pg-subscribe form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.pg-subscribe input{flex:1 1 240px;background:rgba(244,241,234,.06);border:1px solid rgba(244,241,234,.24);
  color:#fff;padding:14px 16px;font-family:var(--pg-sans);font-size:14px}
.pg-subscribe input::placeholder{color:rgba(244,241,234,.5)}
.pg-subscribe input:focus{outline:none;border-color:var(--pg-gold)}
.pg-subscribe button{background:var(--pg-gold);color:var(--pg-charcoal);border:1px solid var(--pg-gold);
  padding:14px 28px;font-family:var(--pg-sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:background .25s}
.pg-subscribe button:hover{background:var(--pg-gold-soft)}
.pg-subscribe__confirm{display:block;margin-top:16px;color:var(--pg-gold-soft);font-size:13px;
  opacity:0;transition:opacity .3s}
.pg-subscribe__confirm.show{opacity:1}
.pg-subscribe__fine{margin-top:16px;font-size:12px;color:rgba(244,241,234,.5)}
.pg-subscribe__fine a{color:var(--pg-gold-soft)}

/* ───────────────────────────────────────────────
   DEVELOPMENTS — restyle the existing markup into elevated
   editorial tiles. Only presentation changes; the filter,
   equalize and lightbox scripts keep their classes/ids.
   ─────────────────────────────────────────────── */
.pg-devbg{background:var(--pg-ivory)}

.dev-filter{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  max-width:var(--pg-wrap);margin:0 auto;padding:clamp(40px,5vw,64px) clamp(20px,5vw,56px) 0}
.dev-filter-btn{font-family:var(--pg-sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:11px 24px;border-radius:40px;border:1px solid var(--pg-line);
  background:transparent;color:var(--pg-muted);cursor:pointer;transition:all .25s var(--pg-ease)}
.dev-filter-btn:hover{border-color:var(--pg-gold);color:var(--pg-gold-ink)}
.dev-filter-btn.active{background:var(--pg-charcoal);border-color:var(--pg-charcoal);color:var(--pg-ivory-light)}

.dev-list{max-width:var(--pg-wrap);margin:0 auto;padding:clamp(36px,4vw,52px) clamp(20px,5vw,56px) clamp(70px,9vw,110px);gap:clamp(30px,4vw,48px)}

/* the pretty tile: soft always-on elevation, gently rounded, no hard border */
.dev-card{
  background:var(--pg-white);
  border:0;
  border-radius:6px;
  box-shadow:var(--pg-shadow);
  transition:box-shadow .4s var(--pg-ease),transform .4s var(--pg-ease);
}
.dev-card:hover{box-shadow:var(--pg-shadow-hover);transform:translateY(-3px)}
.dev-card__media{min-height:340px}
.dev-card__body{padding:clamp(30px,3.4vw,52px)}
.dev-card__loc{color:var(--pg-gold-ink);font-family:var(--pg-sans);letter-spacing:.16em}
.dev-card__name{font-family:var(--pg-serif);font-weight:400;color:var(--pg-ink)}
.dev-card__desc{font-size:.96rem;line-height:1.85;color:var(--pg-muted)}
.dev-card__stats{border-top:1px solid var(--pg-line);border-bottom:1px solid var(--pg-line)}
.dev-stat svg{color:var(--pg-gold)}
.dev-stat span{color:var(--pg-muted)}
.dev-stat strong{font-family:var(--pg-serif);font-weight:400;color:var(--pg-ink);font-size:1rem}
.dev-btn{border-radius:2px}
.dev-btn--gold{background:var(--pg-gold);color:var(--pg-charcoal);border-color:var(--pg-gold)}
.dev-btn--gold:hover{background:var(--pg-gold-soft);border-color:var(--pg-gold-soft)}
.dev-btn--outline{border-color:var(--pg-line);color:var(--pg-ink)}
.dev-btn--outline:hover{background:var(--pg-charcoal);border-color:var(--pg-charcoal);color:var(--pg-ivory-light)}
.dev-card__badge--gold{background:var(--pg-gold);color:var(--pg-charcoal)}

/* Gallery — lift the thumbnails into tidy tiles too */
.gallery{background:var(--pg-ivory-light)}
.g-item{border-radius:4px;overflow:hidden;box-shadow:var(--pg-shadow);
  transition:box-shadow .35s var(--pg-ease),transform .35s var(--pg-ease);border:0;background:none;padding:0;cursor:pointer}
.g-item:hover{box-shadow:var(--pg-shadow-hover);transform:translateY(-2px)}
.gallery-group__name{font-family:var(--pg-serif);color:var(--pg-ink)}
.gallery-group__loc{color:var(--pg-gold-ink)}

/* ───────────────────────────────────────────────
   FOOTER (kh-style, self-contained)
   ─────────────────────────────────────────────── */
.pg-footer{background:var(--pg-charcoal);color:rgba(244,241,234,.6);
  padding-block:clamp(40px,5vw,60px) 26px;border-top:1px solid rgba(183,154,99,.16)}
.pg-footer__top{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding-bottom:26px;border-bottom:1px solid rgba(244,241,234,.1)}
.pg-footer__brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none;color:var(--pg-ivory-light)}
.pg-footer__brand img{height:38px;width:auto;display:block}
.pg-footer__brand span{font-family:var(--pg-sans);font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.pg-footer__nav{display:flex;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap}
.pg-footer__nav a{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,241,234,.66);text-decoration:none;transition:color .25s}
.pg-footer__nav a:hover{color:var(--pg-gold-soft)}
.pg-footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;font-size:12px;color:rgba(244,241,234,.5)}
.pg-footer__bottom p{margin:0}
.pg-footer__bottom a{color:inherit;text-decoration:none}
.pg-footer__bottom a:hover{color:var(--pg-gold-soft)}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:900px){
  .pg-contact__grid{grid-template-columns:1fr}
  .pg-map{grid-template-columns:1fr}
  .pg-map iframe{min-height:340px}
}
@media(max-width:560px){
  .pg-contact__details{grid-template-columns:1fr}
  .pg-formcard .cc-form-grid{grid-template-columns:1fr}
  .pg-footer__top,.pg-footer__bottom{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .pg-js .pg-reveal{opacity:1;transform:none;transition:none}
}