/* ==========================================================================
   UrbanNova — Design System
   Midnight Navy #0D1B2A + Urban Gold #D4AF37 (locked brand colours)
   Display: Montserrat — Body: Montserrat
   ========================================================================== */

:root {
   /* brand */
   --navy: #0D1B2A;
   --navy-2: #14263B;
   /* slightly lifted navy for layered panels */
   --gold: #D4AF37;
   --gold-soft: #E6C767;

   /* neutrals */
   --white: #FFFFFF;
   --ivory: #F7F5F0;
   --charcoal: #20252B;
   --grey: #6B7280;
   --border: #E5E7EB;
   --border-on-navy: rgba(247, 245, 240, 0.14);

   /* type */
   --font-display: "Montserrat", sans-serif;
   --font-display-alt: "Montserrat", sans-serif;
   --font-body: "Montserrat", sans-serif;

   /* scale */
   --display-xl: clamp(3.5rem, 8vw, 8rem);
   --display-lg: clamp(3rem, 6vw, 6rem);
   --heading-xl: clamp(2.5rem, 5vw, 4.5rem);
   --heading-lg: clamp(2rem, 4vw, 3.5rem);
   --heading-md: clamp(1.5rem, 3vw, 2.5rem);
   --body-lg: clamp(1.05rem, 1.5vw, 1.25rem);
   --body-md: 1rem;

   --edge: clamp(20px, 5vw, 72px);
   --radius: 0px;
}

* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   * {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
   }
}

body {
   margin: 0;
   background: var(--white);
   color: var(--charcoal);
   font-family: var(--font-body);
   font-size: 1rem;
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   font-weight: 200;
   line-height: 1.08;
   margin: 0;
   color: var(--navy);
   letter-spacing: -0.01em;
}

p {
   margin: 0;
}

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

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

::selection {
   background: var(--gold);
   color: var(--navy);
}

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

button {
   font-family: inherit;
}

.wrap {
   max-width: 1320px;
   margin: 0 auto;
   padding-left: var(--edge);
   padding-right: var(--edge);
}

.on-navy {
   background: var(--navy);
   color: rgba(247, 245, 240, 0.82);
}

.on-navy h1,
.on-navy h2,
.on-navy h3 {
   color: var(--white);
}

.on-ivory {
   background: var(--ivory);
}

.eyebrow {
   font-family: var(--font-body);
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--gold);
   display: inline-flex;
   align-items: center;
   gap: 10px;
}

.eyebrow::before {
   content: "";
   width: 22px;
   height: 1px;
   background: var(--gold);
   display: inline-block;
}

.section {
   padding: 110px 0;
}

.section-sm {
   padding: 70px 0;
}

.section-head {
   max-width: 680px;
   margin-bottom: 52px;
}

.section-head h2 {
   font-size: var(--heading-lg);
   margin-top: 16px;
}

.section-head p {
   color: var(--grey);
   font-size: var(--body-lg);
   margin-top: 18px;
   max-width: 56ch;
}

.on-navy .section-head p {
   color: rgba(247, 245, 240, 0.68);
}

.gold-line {
   width: 64px;
   height: 2px;
   background: var(--gold);
   border: none;
   margin: 20px 0 0;
   transform-origin: left;
}

/* title + dashed rule, sitting inline next to a heading (Goldkey-style section marker) */
.title-dash {
   display: flex;
   align-items: center;
   gap: 24px;
}

.title-dash::after {
   content: "";
   flex: 1 1 auto;
   min-width: 40px;
   height: 1px;
   align-self: center;
   background-image: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 11px);
}

.on-navy .title-dash::after {
   background-image: repeating-linear-gradient(90deg, var(--gold-soft) 0 6px, transparent 6px 11px);
}

/* ---------- buttons ---------- */
.btn {
   font-family: var(--font-body);
   font-weight: 600;
   font-size: 0.8125rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 16px 30px;
   border-radius: var(--radius);
   border: 1px solid var(--navy);
   color: var(--navy);
   background: transparent;
   cursor: pointer;
   transition: all 0.22s ease;
}

.btn:hover {
   background: var(--navy);
   color: var(--white);
}

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

.btn-gold:hover {
   background: var(--gold-soft);
   border-color: var(--gold-soft);
   color: var(--navy);
}

.btn-ghost-light {
   border-color: rgba(247, 245, 240, 0.5);
   color: var(--white);
}

.btn-ghost-light:hover {
   background: var(--white);
   color: var(--navy);
}

.btn-sm {
   padding: 11px 20px;
   font-size: 0.7812rem;
}

.btn-arrow {
   transition: transform 0.2s ease;
}

.btn:hover .btn-arrow {
   transform: translateX(4px);
}

/* ---------- placeholder imagery ---------- */
.ph {
   position: relative;
   overflow: hidden;
   background:
      repeating-linear-gradient(135deg, rgba(212, 175, 55, 0.10) 0 2px, transparent 2px 26px),
      linear-gradient(160deg, var(--navy) 0%, #1B3350 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 10px;
   color: rgba(247, 245, 240, 0.55);
   text-align: center;
   padding: 24px;
   border-radius: var(--radius);
}

.ph .ph-icon {
   width: 30px;
   height: 30px;
   opacity: 0.6;
}

.ph .ph-label {
   font-family: var(--font-body);
   font-size: 0.7188rem;
   letter-spacing: 0.04em;
   max-width: 26ch;
   line-height: 1.5;
}

.ph .ph-tag {
   position: absolute;
   top: 12px;
   left: 12px;
   font-size: 0.5938rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--gold);
   background: rgba(13, 27, 42, 0.7);
   padding: 4px 8px;
   border: 1px solid rgba(212, 175, 55, 0.4);
   border-radius: 2px;
}

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

.ph svg.ph-icon,
.ph span.ph-label,
.ph span.ph-tag {
   display: none !important;
}

/* ==========================================================================
   NAV
   ========================================================================== */
header {
   position: sticky;
   top: 0;
   z-index: 80;
   background: var(--white);
   box-shadow: 0 10px 40px -18px rgba(13, 27, 42, 0.28);
}

.nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px var(--edge);
}

.logo {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.625rem;
   letter-spacing: 0.01em;
   color: var(--navy);
   display: flex;
   align-items: center;
   gap: 12px;
}

.logo .dot {
   width: 6px;
   height: 6px;
   background: var(--gold);
   border-radius: 50%;
}

.logo-img {
   height: 46px;
   width: auto;
   display: block;
}

.logo-text {
   line-height: 1;
}

.logo-accent {
   color: var(--gold);
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 34px;
}

.nav-links>a,
.nav-item>button {
   font-size: 0.7812rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--charcoal);
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   position: relative;
   display: flex;
   align-items: center;
   gap: 6px;
}

.nav-links>a:hover,
.nav-item>button:hover,
.nav-links>a.active {
   color: var(--gold);
}

.nav-links>a.active::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -22px;
   height: 2px;
   background: var(--gold);
}

.nav-item {
   position: relative;
}

.chev {
   width: 10px;
   height: 10px;
   transition: transform 0.2s ease;
}

.nav-item:hover .chev {
   transform: rotate(180deg);
}

.mega {
   position: absolute;
   top: calc(100% + 22px);
   left: 50%;
   transform: translateX(-50%);
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: 0;
   padding: 14px;
   min-width: 220px;
   opacity: 0;
   visibility: hidden;
   transform-origin: top center;
   transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
   box-shadow: 0 24px 48px -20px rgba(13, 27, 42, 0.35);
}

.nav-item:hover .mega {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
}

.mega a {
   display: block;
   padding: 10px 14px;
   font-size: 0.8125rem;
   color: var(--charcoal);
   border-radius: 0;
}

.mega a:hover {
   background: rgba(212, 175, 55, 0.08);
   color: var(--gold);
}

.nav-cta {
   display: flex;
   align-items: center;
   gap: 22px;
}

.nav-toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
}

.nav-toggle span {
   display: block;
   width: 22px;
   height: 1.6px;
   background: var(--navy);
   margin: 5px 0;
}

@media (max-width:980px) {
   .nav-links {
      display: none;
   }

   .nav-toggle {
      display: block;
   }

   .nav-cta .btn {
      display: none;
   }
}

.mobile-panel {
   display: none;
   flex-direction: column;
   gap: 4px;
   padding: 10px var(--edge) 26px;
   background: var(--white);
   border-bottom: 1px solid var(--border);
   box-shadow: 0 10px 40px -18px rgba(13, 27, 42, 0.28);
}

.mobile-panel.open {
   display: flex;
}

.mobile-panel a {
   padding: 14px 4px;
   font-size: 0.8125rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--charcoal);
   border-bottom: 1px solid var(--border);
}

.mobile-panel .btn {
   margin-top: 14px;
   justify-content: center;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
   position: relative;
   background: var(--navy);
   color: var(--white);
   padding: 140px 0 80px;
   overflow: hidden;
}

.hero.hero-tall {
   min-height: 92vh;
   display: flex;
   align-items: center;
   padding-top: 150px;
   padding-bottom: 64px;
}

.hero-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.hero-bg-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   opacity: 0;
   transition: opacity 1.2s ease;
}

.hero-bg-img.active {
   opacity: 1;
}

.hero-bg::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background:
      radial-gradient(62% 60% at 50% 48%, rgba(13, 27, 42, 0.62) 0%, transparent 72%),
      linear-gradient(0deg, rgba(13, 27, 42, 0.82) 0%, rgba(13, 27, 42, 0.2) 45%),
      linear-gradient(90deg, rgba(13, 27, 42, 0.55) 0%, rgba(13, 27, 42, 0.3) 30%, rgba(13, 27, 42, 0.08) 60%, transparent 100%);
}

.hero-content {
   position: relative;
   z-index: 1;
   text-align: center;
   margin: 0 auto;
}

.hero-tag {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   font-size: 0.875rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: rgba(247, 245, 240, 0.6);
   margin-bottom: 20px;
}

.hero-tag .pulse {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--gold);
   box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
   animation: pulse 2.2s infinite;
}

@keyframes pulse {
   0% {
      box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.5);
   }

   70% {
      box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
   }

   100% {
      box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
   }
}

.hero h1 {
   font-size: var(--display-lg);
   font-weight: 600;
   color: var(--white);
   max-width: 29ch;
   margin: 0 auto;
}

.hero p.lede {
   font-size: var(--body-lg);
   color: rgba(247, 245, 240, 0.75);
   max-width: 52ch;
   margin: 20px auto 0;
}

.hero-ctas {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   margin-top: 32px;
   justify-content: center;
}

.hero-meta {
   display: flex;
   gap: 48px;
   margin-top: 40px;
   flex-wrap: wrap;
   justify-content: center;
}

.hero-meta .stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
}

.hero-meta .stat b {
   font-family: var(--font-display);
   font-size: 2rem;
   color: var(--gold);
   display: inline;
}

.hero-meta .stat span {
   font-size: 0.875rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: rgba(253, 253, 253, 0.963);
}

.scroll-indicator {
   position: absolute;
   bottom: 32px;
   right: var(--edge);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   z-index: 1;
}

.scroll-indicator .line {
   width: 1px;
   height: 44px;
   background: linear-gradient(var(--gold), transparent);
   animation: scrollmove 1.8s ease infinite;
}

@keyframes scrollmove {
   0% {
      opacity: 0;
      transform: translateY(-8px);
   }

   50% {
      opacity: 1;
   }

   100% {
      opacity: 0;
      transform: translateY(8px);
   }
}

/* ==========================================================================
   CARDS — projects, features, articles, team
   ========================================================================== */
.grid {
   display: grid;
   gap: 28px;
}

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

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

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

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

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

@media (max-width:640px) {

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

.project-card {
   display: flex;
   flex-direction: column;
}

.project-card .ph {
   aspect-ratio: 4/3;
   margin-bottom: 20px;
}

.status-badge {
   position: absolute;
   top: 12px;
   right: 12px;
   font-size: 0.625rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   padding: 6px 11px;
   border-radius: 2px;
   z-index: 1;
}

.status-completed {
   background: rgba(20, 120, 90, 0.9);
   color: #fff;
}

.status-ongoing {
   background: rgba(212, 175, 55, 0.92);
   color: var(--navy);
}

.status-upcoming {
   background: rgba(255, 255, 255, 0.92);
   color: var(--navy);
}

.status-available {
   background: rgba(13, 27, 42, 0.9);
   color: #fff;
   border: 1px solid var(--gold);
}

.project-card .meta {
   font-size: 0.75rem;
   color: var(--grey);
   letter-spacing: 0.03em;
   margin-bottom: 6px;
}

.project-card h3 {
   font-size: 1.25rem;
   margin-bottom: 8px;
}

.project-card p.desc {
   color: var(--grey);
   font-size: 0.94rem;
   margin-bottom: 16px;
}

.project-card .tags {
   display: flex;
   gap: 8px;
   margin-bottom: 16px;
   flex-wrap: wrap;
}

.project-card .tags span {
   font-size: 0.6562rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--navy);
   border: 1px solid var(--border);
   padding: 5px 9px;
   border-radius: 2px;
}

.feature-card {
   padding: 34px 30px;
   border: 1px solid var(--border);
   border-radius: 6px;
   transition: border-color 0.2s ease, transform 0.2s ease;
}

.feature-card:hover {
   border-color: var(--gold);
   transform: translateY(-3px);
}

.feature-card .num {
   font-family: var(--font-display);
   font-size: 0.75rem;
   color: var(--gold);
   letter-spacing: 0.08em;
}

.feature-card h3 {
   font-size: 1.2rem;
   margin: 16px 0 10px;
}

.feature-card p {
   color: var(--grey);
   font-size: 0.95rem;
}

/* icon-led service card (About — Our Approach) */
.approach-card {
   background: var(--white);
   text-align: center;
   padding: 48px 30px;
   box-shadow: 0 24px 48px -30px rgba(13, 27, 42, 0.28);
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.approach-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 32px 56px -26px rgba(13, 27, 42, 0.32);
}

.approach-icon {
   width: 46px;
   height: 46px;
   margin: 0 auto 22px;
   color: var(--gold);
}

.approach-icon svg {
   width: 100%;
   height: 100%;
}

.approach-card h3 {
   font-size: 1.05rem;
   letter-spacing: 0.03em;
   text-transform: uppercase;
   margin-bottom: 14px;
}

.approach-card p {
   color: var(--grey);
   font-size: 0.9rem;
   max-width: 34ch;
   margin: 0 auto;
}

.article-card .ph {
   aspect-ratio: 16/10;
   margin-bottom: 18px;
}

.article-card .meta {
   font-size: 0.7188rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--gold);
   font-weight: 600;
   margin-bottom: 10px;
}

.article-card h3 {
   font-size: 1.12rem;
   margin-bottom: 10px;
}

.article-card p {
   color: var(--grey);
   font-size: 0.92rem;
   margin-bottom: 12px;
}

.article-card .footer-meta {
   font-size: 0.7188rem;
   color: var(--grey);
   display: flex;
   gap: 10px;
}

.team-card .ph {
   aspect-ratio: 1/1;
   margin-bottom: 20px;
}

.team-card h3 {
   font-size: 1.08rem;
   margin-bottom: 4px;
}

.team-card .role {
   font-size: 0.75rem;
   color: var(--gold);
   letter-spacing: 0.04em;
   margin-bottom: 12px;
   font-weight: 600;
}

.team-card p {
   color: var(--grey);
   font-size: 0.92rem;
}

/* empty silhouette standing in for a portrait until real photos are supplied */
.team-silhouette {
   display: flex;
   align-items: center;
   justify-content: center;
}

.team-silhouette .silhouette-icon {
   width: 34%;
   height: 34%;
   color: rgba(212, 175, 55, 0.55);
}

.value-card {
   text-align: left;
   padding: 28px 24px;
   background: var(--ivory);
   border-radius: 0;
}

.value-card h3 {
   font-size: 1.05rem;
   margin: 14px 0 8px;
}

.value-card p {
   color: var(--grey);
   font-size: 0.9rem;
}

/* ==========================================================================
   TIMELINE / PROCESS / PROGRESS
   ========================================================================== */
.process-steps {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 1px;
   background: var(--border-on-navy);
   border: 1px solid var(--border-on-navy);
   margin-top: 8px;
}

.process-step {
   background: var(--navy);
   padding: 32px 24px 36px;
   position: relative;
}

.process-step .num {
   font-family: var(--font-display);
   font-size: 0.8125rem;
   color: var(--gold);
}

.process-step h3 {
   color: var(--white);
   font-size: 1.05rem;
   margin: 16px 0 10px;
}

.process-step p {
   color: rgba(247, 245, 240, 0.62);
   font-size: 0.88rem;
}

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

@media (max-width:560px) {
   .process-steps {
      grid-template-columns: 1fr;
   }
}

.progress-timeline {
   display: flex;
   align-items: center;
   margin: 22px 0 6px;
}

.progress-timeline .pt-node {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   flex: 0 0 auto;
}

.progress-timeline .pt-dot {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--border);
   border: 2px solid var(--border);
}

.progress-timeline .pt-node.done .pt-dot {
   background: var(--gold);
   border-color: var(--gold);
}

.progress-timeline .pt-node.active .pt-dot {
   background: var(--navy);
   border-color: var(--gold);
   box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
}

.progress-timeline .pt-label {
   font-size: 0.6875rem;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--grey);
   white-space: nowrap;
}

.progress-timeline .pt-node.done .pt-label,
.progress-timeline .pt-node.active .pt-label {
   color: var(--navy);
   font-weight: 600;
}

.progress-timeline .pt-connector {
   flex: 1 1 auto;
   height: 2px;
   background: var(--border);
   margin: 0 6px 22px;
}

.progress-timeline .pt-connector.done {
   background: var(--gold);
}

/* ==========================================================================
   ACCORDION (FAQ)
   ========================================================================== */
.acc-item {
   border-bottom: 1px solid var(--border);
}

.acc-trigger {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   background: none;
   border: none;
   cursor: pointer;
   text-align: left;
   padding: 24px 4px;
   font-family: var(--font-display);
   font-size: 1.1rem;
   color: var(--navy);
}

.acc-chevron {
   flex-shrink: 0;
   transition: transform 0.25s ease;
   color: var(--gold);
}

.acc-item.open .acc-chevron {
   transform: rotate(45deg);
}

.acc-panel {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
}

.acc-item.open .acc-panel {
   max-height: 220px;
}

.acc-panel p {
   padding: 0 4px 24px;
   color: var(--grey);
   max-width: 64ch;
}

/* ==========================================================================
   FILTER BAR (Developments)
   ========================================================================== */
.filter-bar {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   padding-bottom: 44px;
   border-bottom: 1px solid var(--border);
   margin-bottom: 48px;
}

.filter-chip {
   font-size: 0.7188rem;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   padding: 10px 18px;
   border-radius: 0;
   border: 1px solid var(--border);
   background: transparent;
   color: var(--navy);
   cursor: pointer;
   transition: all 0.18s ease;
}

.filter-chip:hover {
   border-color: var(--navy);
}

.filter-chip.active {
   background: var(--navy);
   border-color: var(--navy);
   color: var(--white);
}

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

.filter-chip.is-disabled,
.filter-chip:disabled {
   color: var(--grey);
   border-color: var(--border);
   background: rgba(107, 114, 128, 0.06);
   cursor: not-allowed;
   opacity: 0.6;
}

.filter-chip.is-disabled:hover,
.filter-chip:disabled:hover {
   border-color: var(--border);
}

/* ==========================================================================
   STAT COUNTER STRIP
   ========================================================================== */
.stat-strip {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   border-top: 1px solid var(--border-on-navy);
   border-bottom: 1px solid var(--border-on-navy);
}

.stat-strip .stat {
   padding: 36px var(--edge);
   border-right: 1px solid var(--border-on-navy);
}

.stat-strip .stat:last-child {
   border-right: none;
}

.stat-strip .stat b {
   font-family: var(--font-display);
   font-size: 2.4rem;
   color: var(--gold);
   display: block;
}

.stat-strip .stat span {
   font-size: 0.7188rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: rgba(247, 245, 240, 0.55);
}

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

   .stat-strip .stat:nth-child(2) {
      border-right: none;
   }
}

/* ==========================================================================
   SLIDER (horizontal scroll)
   ========================================================================== */
.slider {
   display: flex;
   gap: 24px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   margin: 0 calc(var(--edge) * -1);
   padding: 4px var(--edge) 16px;
   scrollbar-width: none;
}

.slider::-webkit-scrollbar {
   display: none;
}

.slider>* {
   flex: 0 0 340px;
   scroll-snap-align: start;
}

.slider-controls {
   display: flex;
   gap: 10px;
   justify-content: flex-end;
   margin-top: 8px;
}

.slider-btn {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 1px solid var(--border);
   background: var(--white);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.18s ease;
}

.slider-btn:hover {
   border-color: var(--navy);
   background: var(--navy);
   color: var(--white);
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-panel {
   background: var(--ivory);
   padding: 44px;
   border-radius: 0;
}

form {
   display: grid;
   gap: 20px;
}

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

label {
   font-size: 0.7188rem;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--grey);
   display: block;
   margin-bottom: 8px;
}

input,
select,
textarea {
   width: 100%;
   background: var(--white);
   border: 1px solid var(--border);
   padding: 13px 14px;
   font-family: var(--font-body);
   font-size: 0.9062rem;
   color: var(--charcoal);
   border-radius: 0;
}

select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   padding-right: 42px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 14px center;
   background-size: 14px;
}

input:focus,
select:focus,
textarea:focus {
   outline: none;
   border-color: var(--gold);
}

textarea {
   resize: vertical;
   min-height: 110px;
}

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

   .form-panel {
      padding: 28px;
   }

   .form-panel.has-banner {
      padding: 0;
   }

   .form-panel.has-banner .form-panel-body {
      padding: 28px;
   }
}

/* form-panel with a horizontal image banner across the top */
.form-panel.has-banner {
   padding: 0;
   overflow: hidden;
}

.form-banner {
   aspect-ratio: 21/7;
   overflow: hidden;
}

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

.form-panel-body {
   padding: 48px;
}

@media (max-width:900px) {
   .form-banner {
      aspect-ratio: 16/9;
   }
}

/* compact variant — shorter banner, tighter spacing, so the whole card fits closer
   to a single view instead of needing a long scroll (Contact page enquiry form) */
.form-panel.is-compact .form-banner {
   aspect-ratio: 21/5;
}

.form-panel.is-compact .form-panel-body {
   padding: 36px 44px;
}

.form-compact {
   gap: 14px !important;
}

.form-compact .form-row {
   gap: 16px;
}

.form-compact textarea {
   min-height: 80px;
}

@media (max-width:900px) {
   .form-panel.is-compact .form-banner {
      aspect-ratio: 21/9;
   }
}

/* site-visit intro strip sitting above the wide map */
.site-visit-cta {
   text-align: center;
   max-width: 620px;
   margin: 64px auto 32px;
}

.site-visit-cta h3 {
   font-size: var(--heading-md);
   margin: 14px 0 22px;
   font-family: var(--font-display);
}

/* wide, "stretched and filled" map variant */
.map-embed.map-embed-wide {
   aspect-ratio: 21/6;
   margin-bottom: 0;
}

@media (max-width:900px) {
   .map-embed.map-embed-wide {
      aspect-ratio: 4/3;
   }
}

/* ==========================================================================
   MODAL (Priority List / register interest)
   ========================================================================== */
.modal-overlay {
   position: fixed;
   inset: 0;
   z-index: 200;
   background: rgba(13, 27, 42, 0.66);
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding: 64px 20px;
   overflow-y: auto;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.25s ease, visibility 0.25s;
}

.modal-overlay.open {
   opacity: 1;
   visibility: visible;
}

.modal-panel {
   position: relative;
   background: var(--white);
   width: 100%;
   max-width: 640px;
   padding: 52px;
   transform: translateY(-18px);
   transition: transform 0.25s ease;
}

.modal-overlay.open .modal-panel {
   transform: translateY(0);
}

.modal-close {
   position: absolute;
   top: 22px;
   right: 22px;
   background: none;
   border: none;
   cursor: pointer;
   color: var(--charcoal);
   line-height: 1;
   padding: 4px;
}

.modal-close svg {
   width: 22px;
   height: 22px;
}

.modal-close:hover {
   color: var(--gold);
}

.modal-title {
   font-size: var(--heading-md);
   margin-bottom: 8px;
}

.modal-subtitle {
   color: var(--grey);
   font-size: 0.9rem;
   margin-bottom: 28px;
}

.modal-form {
   display: grid;
   gap: 20px;
}

.modal-consent {
   font-size: 0.8125rem;
   color: var(--grey);
   line-height: 1.6;
}

.modal-checkbox {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: 0.8125rem;
   color: var(--charcoal);
}

.modal-checkbox input {
   width: auto;
   margin-top: 3px;
}

/* small centered confirmation variant (e.g. #successModal) */
.modal-panel-sm {
   max-width: 440px;
   text-align: center;
}

.modal-success-icon {
   width: 56px;
   height: 56px;
   margin: 0 auto 22px;
   color: var(--gold);
}

.modal-success-icon svg {
   width: 100%;
   height: 100%;
}

.modal-panel-sm .modal-subtitle {
   margin-bottom: 30px;
}

@media (max-width:640px) {
   .modal-panel {
      padding: 32px 24px;
   }

   .modal-overlay {
      padding: 32px 14px;
   }
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
   background: var(--navy);
   color: var(--white);
   padding: 100px 0;
   text-align: center;
}

.cta-band h2 {
   color: var(--white);
   font-size: var(--heading-lg);
   max-width: 18ch;
   margin: 0 auto;
}

.cta-band .btns {
   display: flex;
   gap: 16px;
   justify-content: center;
   margin-top: 38px;
   flex-wrap: wrap;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
   background: var(--navy);
   color: rgba(247, 245, 240, 0.7);
   padding: 80px 0 32px;
   border-top: 1px solid var(--border-on-navy);
}

.footer-top {
   display: flex;
   justify-content: space-between;
   gap: 48px;
   flex-wrap: wrap;
   padding-bottom: 52px;
}

.footer-brand .logo {
   margin-bottom: 14px;
   color: var(--white);
}

.footer-brand p {
   max-width: 32ch;
   font-size: 0.92rem;
   color: rgba(247, 245, 240, 0.55);
}

.footer-cols {
   display: flex;
   gap: 64px;
   flex-wrap: wrap;
}

.footer-col h4 {
   color: var(--white);
   font-size: 0.75rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   margin-bottom: 18px;
   font-family: var(--font-body);
   font-weight: 600;
}

.footer-col a {
   display: block;
   font-size: 0.8438rem;
   color: rgba(247, 245, 240, 0.62);
   margin-bottom: 13px;
}

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

.footer-bottom {
   display: flex;
   justify-content: space-between;
   gap: 14px;
   flex-wrap: wrap;
   padding-top: 26px;
   border-top: 1px solid var(--border-on-navy);
   font-size: 0.7188rem;
   color: rgba(247, 245, 240, 0.4);
}

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.reveal {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* ==========================================================================
   CENTERED DASHED EYEBROW (statement sections)
   ========================================================================== */
.eyebrow-center {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   font-size: 0.75rem;
   font-weight: 600;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--grey);
}

.eyebrow-center::before,
.eyebrow-center::after {
   content: "";
   flex: 1 1 80px;
   max-width: 140px;
   height: 1px;
   background: repeating-linear-gradient(90deg, var(--gold) 0 5px, transparent 5px 9px);
}

.on-navy .eyebrow-center {
   color: rgba(247, 245, 240, 0.55);
}

.statement-block {
   text-align: center;
   max-width: 760px;
   margin: 0 auto;
}

.statement-block h2 {
   font-size: var(--heading-lg);
   margin-top: 18px;
}

.statement-block p {
   color: var(--grey);
   font-size: var(--body-lg);
   margin-top: 22px;
}

/* ==========================================================================
   FLOATING SEARCH / FILTER BAR (overlaps hero bottom edge)
   ========================================================================== */
.search-bar-wrap {
   position: relative;
   z-index: 5;
}

.search-bar {
   background: rgba(255, 255, 255, 0.97);
   border-radius: 10px;
   box-shadow: 0 30px 60px -24px rgba(13, 27, 42, 0.45);
   display: flex;
   align-items: stretch;
   max-width: 1180px;
   margin: -46px auto 0;
   overflow: hidden;
}

.search-seg {
   flex: 1 1 0;
   padding: 18px 26px;
   border-right: 1px solid var(--border);
}

.search-seg .sl {
   font-size: 0.6875rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--grey);
   display: block;
   margin-bottom: 4px;
}

.search-seg select {
   border: none;
   padding: 0;
   padding-right: 26px;
   font-family: var(--font-display);
   font-size: 0.9375rem;
   color: var(--navy);
   background-color: transparent;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1B2A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right center;
   background-size: 13px;
}

.search-seg select:focus {
   outline: none;
}

.search-go {
   flex: 0 0 auto;
   background: var(--navy);
   color: var(--white);
   border: none;
   padding: 0 34px;
   font-family: var(--font-body);
   font-weight: 700;
   font-size: 0.8125rem;
   letter-spacing: 0.05em;
   cursor: pointer;
   transition: background 0.2s ease;
}

.search-go:hover {
   background: var(--gold);
   color: var(--navy);
}

@media (max-width:980px) {
   .search-bar {
      flex-wrap: wrap;
      margin-top: -24px;
      border-radius: 8px;
   }

   .search-seg {
      flex: 1 1 50%;
      border-bottom: 1px solid var(--border);
   }

   .search-go {
      flex: 1 1 100%;
      padding: 16px;
   }
}

/* ==========================================================================
   LIVING / DEVELOPING / INVESTING — alternating storytelling blocks
   ========================================================================== */
.story-block {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center;
   padding: 64px 0;
   border-bottom: 1px solid var(--border);
}

.story-block:last-child {
   border-bottom: none;
}

.story-block.reverse {
   direction: rtl;
}

.story-block.reverse>* {
   direction: ltr;
}

.story-block .ph {
   aspect-ratio: 5/4;
}

.story-block h3 {
   font-size: var(--heading-md);
   margin: 16px 0 18px;
}

.story-block p {
   color: var(--grey);
   font-size: var(--body-lg);
   max-width: 46ch;
}

@media (max-width:900px) {
   .story-block {
      grid-template-columns: 1fr;
      gap: 32px;
   }

   .story-block.reverse {
      direction: ltr;
   }
}

/* ==========================================================================
   NEWS CARD (tag overlay on image, Goldkey-style)
   ========================================================================== */
.news-card {
   display: block;
}

.news-card .ph {
   aspect-ratio: 16/11;
   margin-bottom: 0;
   border-radius: 0;
   position: relative;
}

.news-tag {
   position: absolute;
   left: 16px;
   bottom: 16px;
   background: var(--gold);
   color: var(--navy);
   font-size: 0.6562rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   padding: 6px 12px;
   border-radius: 0;
}

.news-body {
   border: 1px solid var(--border);
   border-top: none;
   padding: 24px 22px 26px;
   border-radius: 0;
}

.news-date {
   font-size: 0.7188rem;
   color: var(--grey);
   letter-spacing: 0.04em;
}

.news-body h3 {
   font-size: 1.1rem;
   margin: 10px 0 12px;
}

.news-body p {
   color: var(--grey);
   font-size: 0.92rem;
   margin-bottom: 16px;
}

.news-read {
   font-size: 0.7812rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   color: var(--navy);
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border-bottom: 1px solid var(--gold);
   padding-bottom: 2px;
}

.news-more-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
}

/* ==========================================================================
   PEEK CAROUSEL (Discover the Lifestyle style)
   ========================================================================== */
.peek-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
   margin-bottom: 32px;
}

[data-slider] .slider>.peek-card {
   flex: 0 0 380px;
}

.peek-card .ph {
   aspect-ratio: 4/5;
}

.peek-card .cap {
   margin-top: 16px;
}

.peek-card .cap h3 {
   font-size: 1.1rem;
}

.peek-card .cap span {
   font-size: 0.75rem;
   color: var(--gold);
   letter-spacing: 0.04em;
   text-transform: uppercase;
   font-weight: 600;
}

/* landscape variant — large filling images, no caption (About — Our Path) */
.path-card {
   flex: 0 0 min(760px, 84vw) !important;
}

.path-card .ph {
   aspect-ratio: 16/9;
}

@media (max-width:640px) {
   .path-card {
      flex: 0 0 92vw !important;
   }
}

/* ==========================================================================
   FOOTER — contact block + social row (extends base footer)
   ========================================================================== */
.footer-contact-block {
   font-size: 0.8438rem;
   color: rgba(247, 245, 240, 0.62);
   line-height: 1.9;
}

.footer-address {
   font-style: normal;
   display: block;
   line-height: 1.4;
   margin-bottom: 14px;
}

.footer-contact-block a {
   color: rgba(247, 245, 240, 0.62);
}

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

.footer-brand .footer-social {
   margin-top: 20px;
}

/* ==========================================================================
   EMBEDDED GOOGLE MAP (Contact page)
   ========================================================================== */
.map-embed {
   position: relative;
   aspect-ratio: 4/3;
   margin-bottom: 32px;
   overflow: hidden;
   background: var(--ivory);
}

.map-embed iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
}

.map-embed-cta {
   position: absolute;
   right: 14px;
   bottom: 14px;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--navy);
   color: var(--white);
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   padding: 12px 18px;
   box-shadow: 0 14px 28px -10px rgba(13, 27, 42, 0.55);
   transition: background 0.2s ease, color 0.2s ease;
}

.map-embed-cta:hover {
   background: var(--gold);
   color: var(--navy);
}

.footer-map-link {
   display: inline-flex !important;
   align-items: center;
   gap: 6px;
   margin-top: 10px;
   color: var(--gold) !important;
   font-weight: 600;
   letter-spacing: 0.02em;
}

.footer-social {
   display: flex;
   gap: 14px;
   margin-top: 22px;
}

.footer-social a {
   width: 36px;
   height: 36px;
   border: 1px solid var(--border-on-navy);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
}

.footer-social a:hover {
   border-color: var(--gold);
   background: rgba(212, 175, 55, 0.1);
}

.footer-social svg {
   width: 15px;
   height: 15px;
}

/* ==========================================================================
   FLOATING CONTACT BUTTON
   ========================================================================== */
.float-contact {
   position: fixed;
   right: 26px;
   bottom: 26px;
   z-index: 70;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #25D366;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.4);
   opacity: 0;
   visibility: hidden;
   transform: translateY(14px) scale(0.9);
   transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.float-contact.show {
   opacity: 1;
   visibility: visible;
   transform: translateY(0) scale(1);
}

.float-contact:hover {
   transform: scale(1.08);
}

.float-contact.show:hover {
   transform: translateY(0) scale(1.08);
}

.float-contact svg {
   width: 26px;
   height: 26px;
}

/* ==========================================================================
   MISC UTILITIES
   ========================================================================== */
.split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 56px;
   align-items: center;
}

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

.center {
   text-align: center;
}

.mx-auto {
   margin-left: auto;
   margin-right: auto;
}