/* ===================================================================
   PAL AMARA — DESIGN SYSTEM
   Architects · Consultants · Developers
   Palette + type pulled directly from the brand mark:
   warm signal-orange, architectural charcoal/graphite, and paper-white.
   =================================================================== */

:root {
  /* --- Brand palette (from logo — used everywhere, no off-palette whites/blacks) --- */
  --color-orange:        #f2670f;   /* signature orange from "amara" + dot squares */
  /* --color-orange-dark:   #cf5407; */
  --color-orange-dark: #b3500c;
  --color-orange-light:  #ff8a3d;
  --color-orange-rgb:    242,103,15;
  --color-orange-dark-rgb: 179, 80, 12;

  --color-ink:           #191c22;   /* deep graphite-navy — a considered near-black with a cool undertone, used for all dark surfaces (header, footer, overlays) instead of flat black */
  --color-ink-rgb:       25,28,34;
  --color-graphite:      #4a4a4a;   /* the mark's structural gray, headings/body on light */
  --color-stone:         #7c7c7c;   /* secondary gray, from "PAL." wordmark */
  --color-mist:          #b9b6b1;   /* faint gray for rules / muted text */

  --color-paper:         #fdfcfa;   /* warm paper white — never pure #fff */
  --color-sand:          #f4f1ec;   /* warm off-white section backgrounds */
  --color-sand-deep:     #e9e4dc;

  /* --- Type --- */
  --font-display: 'Space Grotesk', 'Archivo', sans-serif;
  --font-body: 'Roboto', 'Segoe UI', sans-serif;

  /* --- Spacing / shape --- */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --container: 1240px;
  --header-h: 96px;

  --ease: cubic-bezier(.25,.8,.25,1);
}

/* ===== Global Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 30px); }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink);
  background-color: var(--color-paper);
  overflow-x: hidden;
}
html, body {
  overflow-x: hidden;
  width: 100%;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.lightbox img { max-width: none; }

/* Signature mark: two small squares, lifted straight from the "PAL." dots
   in the logo. Used as the recurring identity motif in place of generic
   rules/numbering throughout the site. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  display: inline-flex;
  width: 7px; height: 7px;
  background: var(--color-orange);
}
.eyebrow::after {
  content: "";
  display: inline-flex;
  width: 7px; height: 7px;
  background: var(--color-graphite);
  margin-right: 2px;
}
.text-right .eyebrow { flex-direction: row-reverse; }
.text-right .eyebrow::after { margin-right: 0; margin-left: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

.line { display: none; } /* replaced site-wide by the .eyebrow square-mark */

section { padding: 50px 0; }

/* ===== Buttons =====
   Deliberately light on borders — solid fills or quiet underlined links,
   never a boxed outline. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 34px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  color: var(--color-paper);
  background: var(--color-orange);
  border-radius: var(--radius-sm);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  cursor: pointer;
}
.btn i, .btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover {
  background: var(--color-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(var(--color-orange-rgb), 0.32);
}
.btn:hover .arrow, .btn:hover i.fa-arrow-right { transform: translateX(4px); }

.btn.btn-dark {
  background: var(--color-ink);
}
.btn.btn-dark:hover {
  background: #000;
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}
.btn.btn-compact { padding: 12px 26px; gap: 8px; }

/* Quiet text link with an animated underline + arrow — the site's
   secondary call to action, used wherever a boxed button would feel heavy. */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding-bottom: 4px;
  position: relative;
}
.cta-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity 0.3s var(--ease);
}
.cta-link i { color: var(--color-orange); transition: transform 0.3s var(--ease); }
.cta-link:hover::after { opacity: 1; }
.cta-link:hover i { transform: translateX(5px); }

.cta-approach-toggle {
  background: none;
  border: none;
  cursor: pointer;
}
.cta-approach-toggle i {
  transition: transform 0.3s var(--ease);
}
.cta-approach-toggle.open i {
  transform: rotate(90deg);
}

.approach-bubble {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
  margin-bottom: 0;
}
/* .approach-bubble.open {
  margin-bottom: 12px;
} */
.approach-bubble.open.visible {
  opacity: 1;
  transform: translateY(0);
}

.approach-bubble-inner {
  position: relative;
  /* margin-top: 22px;
  margin-left: 6px;
  margin-right: 20px;
  margin-bottom: 30px; */
  margin: 22px 20px 30px 6px;
  padding: 24px 30px 24px 32px;
  background: var(--color-paper);
  border-left: 4px solid var(--color-orange);
  border-radius: 2px;
  box-shadow:
    0 10px 24px rgba(28,28,28,0.16),
    0 2px 6px rgba(28,28,28,0.08);
  transform: rotate(-1.2deg);
  max-height: 180px;
  overflow-y: auto; 
  /* Subtle, orange, visible scrollbar (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--color-orange) transparent;
}
.approach-bubble-inner::-webkit-scrollbar {
    width: 5px;
}
.approach-bubble-inner::-webkit-scrollbar-track {
  background: transparent;
}
.approach-bubble-inner::-webkit-scrollbar-thumb {
  background: var(--color-orange);
  border-radius: 10px;
}

/* Folded corner — the classic sticky-note dog-ear, top-right */
.approach-bubble-inner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent var(--color-sand) transparent transparent;
  filter: drop-shadow(-1px 1px 1px rgba(28,28,28,0.18));
}

/* Small pin accent, as if the note is pinned to the page */
.approach-bubble-inner::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 2px 4px rgba(28,28,28,0.3);
}

.approach-bubble-inner p {
  margin: 0;
  color: var(--color-graphite);
  line-height: 1.7;
  font-style: italic;
}

/* ===== Header =====
   Stays within the brand's dark/orange register at every state — never
   flips to a plain white bar. Over imagery it's fully transparent; once
   scrolled (or on interior pages) it becomes a frosted graphite panel. */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 40px;
  background: transparent;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), padding 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  transition: height 0.60s var(--ease);
}
.logo-area { display: flex; align-items: center; height: 100%; overflow: hidden; }
.logo-area a { display: flex; align-items: center; }
.logo-area img {
  display: block;
  height: 60px;
  max-height: 60px;
  width: auto;
  transition: height 0.3s var(--ease), max-height 0.3s var(--ease);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 44px;
}
.main-nav a {
  text-decoration: none;
  color: var(--color-paper);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.35s var(--ease);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--color-orange);
  transition: width 0.3s var(--ease);
}

/* .main-nav a:hover::after { width: 100%; }
.main-nav a:hover { color: var(--color-orange); } */

@media (hover: hover) {
  .main-nav a:hover::after { width: 100%; }
  .main-nav a:hover { color: var(--color-orange); }
}
.main-nav a.tap-active::after { width: 100%; }
.main-nav a.tap-active { color: var(--color-orange); }

header.solid,
header.scrolled,
header.overlay-header {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 4px 24px rgba(28,28,28,0.08);
}
header.solid .main-nav a,
header.scrolled .main-nav a,
header.overlay-header .main-nav a { color: var(--color-ink); }
header.solid .logo-area img,
header.scrolled .logo-area img,
header.overlay-header .logo-area img { filter: none; }
header.solid .menu-trigger span,
header.scrolled .menu-trigger span,
header.overlay-header .menu-trigger span { background-color: var(--color-ink); }

.menu-trigger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background-color: var(--color-sand);
}
.menu-trigger.active span:nth-child(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background-color: var(--color-sand);
}

/* Scroll-shrink behavior — completely unchanged, still only kicks in
   once .scrolled is actually added by JS on scroll: */
header.scrolled .header-wrap { height: 76px; }
header.scrolled .logo-area img { height: 46px; max-height: 46px; }

/* Homepage only: logo appears large on load, then eases down to a resting
   size that's still bigger than the site-wide default (60px). The header
   bar itself grows to match during the intro (so the oversized logo isn't
   clipped by .logo-area's overflow:hidden), then both settle together.
   The scroll-shrink rules above still take over normally once scrolled. */
.home-header .header-wrap {
  height: 130px; /* used to be: height: 200px; */
}
@media (max-width: 480px) {
  .home-header .header-wrap {
    height: 100px;
  }
  .hero-pretitle {
    margin-bottom: 50px;
  }
}
.home-header .logo-area img {
  height: clamp(70px, 15vw, 85px);
  max-height: clamp(70px, 15vw, 112px);
}

/* ===== Homepage logo intro overlay (v2) ===== */
.logo-intro.li-fade-out {
  background-color: rgba(255, 255, 255, 0);
  /* opacity: 0; */
  pointer-events: none;
}

.logo-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 5px; */
}
 
.li-top,
.li-bottom {
  width: 37vw;
}

/* Beat 2: travel — JS switches both to position:fixed (see JS file) right
   before adding this class, then this class supplies the actual
   transform (translate + scale, plus rotate for li-bottom) toward each
   piece's computed target. Duration/easing intentionally slower and more
   dramatic than the entrance, since this is the "cool" main movement. */
.li-piece.li-traveling {
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.4s var(--ease);
}

/* The precise combined artwork — positioned via JS to sit exactly over
   the real header logo, crossfades in right as the two pieces finish
   traveling, masking any small landing imprecision between them. */
.li-combined {
  position: fixed;
  opacity: 0;
  transform: none;
  transition: opacity 0.3s var(--ease);
  z-index: 2;
}
.logo-intro.li-combined-visible .li-combined {
  opacity: 1;
}
.logo-intro.li-combined-visible .li-top,
.logo-intro.li-combined-visible .li-bottom,
.logo-intro.li-combined-visible .li-stack-piece,
.logo-intro.li-combined-visible .li-pretitle {
  opacity: 0;
}


/* Mobile menu trigger */
.menu-trigger {
  display: none;
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  z-index: 1100;
}
.menu-trigger span {
  width: 26px;
  height: 2px;
  background-color: var(--color-paper);
  transition: all 0.3s var(--ease);
}

/* ===== Hero Slider (home) =====
   The zoom (Ken Burns) runs continuously and independently on every slide;
   only opacity is toggled to crossfade. This is what makes the transition
   read as smooth and continuous, like leptosestates.com, instead of
   snapping back to a fixed start-scale every time a slide re-activates. */
.hero-slider {
  position: relative;
  /* height: 100vh; */
  /* height: 100svh; */
  height: var(--stable-vh, 100vh); /* falls back to 100vh only if JS hasn't run yet */
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  background: var(--color-ink);
  margin-top: 55px;
}
.hero-slider .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* background-position: center; */
  background-position: center 50%;
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 2s ease-in-out;
  animation: heroKenBurns 26s ease-in-out infinite alternate;
}
.hero-slider .slide:nth-child(2) { animation-delay: -6s; }
.hero-slider .slide:nth-child(3) { animation-delay: -12s; }
.hero-slider .slide:nth-child(4) { animation-delay: -18s; }
.hero-slider .slide:nth-child(5) { animation-delay: -24s; }
.hero-slider .slide.active { opacity: 1; z-index: 1; }
@keyframes heroKenBurns {
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.12) translate(-1%, -1%); }
}

.hero-slider .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--color-ink-rgb),0.5) 0%, rgba(var(--color-ink-rgb),0.22) 45%, rgba(var(--color-ink-rgb),0.78) 100%);
  z-index: 2;
}

.hero-pretitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 80px;
  text-align: center;
}
.hero-pretitle span {
  font-family: 'Poppins', var(--font-display);
  font-weight: 100;
  /* font-size: 2rem; */
  text-transform: uppercase;
  color: var(--color-paper);
  -webkit-text-stroke: 1px rgba(0,0,0,0.6);
  paint-order: stroke fill;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.9),
    0 4px 12px rgba(0,0,0,0.85),
    0 8px 24px rgba(0,0,0,0.7),
    0 0 40px rgba(0,0,0,0.5);
}
.hero-pretitle-line1 {
  letter-spacing: 1.5em;
  margin-right: -1.5em;
}
.hero-pretitle-line2 {
  letter-spacing: 0.50em;
  margin-right: -0.5em;
}
.hero-pretitle span {
  font-size: clamp(1.4rem, 5vw, 2.4rem);
}

.hero-content {
  position: absolute;
  z-index: 3;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: var(--color-paper);
  padding: 0 20px;
}
.hero-content .eyebrow { color: var(--color-orange-light); justify-content: center; }
.hero-content .eyebrow::after { background: rgba(255,255,255,0.6); }
.hero-content h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  color: var(--color-paper);
  max-width: 920px;
  margin: 0 auto 20px;
}
.hero-content p {
  max-width: 560px;
  margin: 0 auto 34px;
  font-size: 1.15rem;
  color: rgba(255,255,255,0.88);
}

/* Staggered entrance once the page has loaded */
.hero-content .eyebrow,
.hero-content h1,
.hero-content p,
.hero-content .btn {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.fade-in.loaded .hero-content .eyebrow { transition-delay: 0.2s; }
.fade-in.loaded .hero-content h1 { transition-delay: 0.35s; }
.fade-in.loaded .hero-content p { transition-delay: 0.5s; }
.fade-in.loaded .hero-content .btn { transition-delay: 0.65s; }
.fade-in.loaded .hero-content .eyebrow,
.fade-in.loaded .hero-content h1,
.fade-in.loaded .hero-content p,
.fade-in.loaded .hero-content .btn {
  opacity: 1;
  transform: translateY(0);
}

.hero-scroll-cue {
  position: absolute;
  bottom: 80px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--color-paper);
  font-size: 1.5rem;
  opacity: 0.7;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* ===== Floating stats strip — overlaps the base of the hero ===== */
.stats-strip {
  position: relative;
  z-index: 4;
  max-width: 1080px;
  margin: -78px auto 0;
  padding: 0 20px;
}
.stats-strip .stats-inner {
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-shadow: 0 30px 60px rgba(0,0,0,0.28);
  overflow: hidden;
}
.stats-strip .stat {
  padding: 34px 20px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.stats-strip .stat:last-child { border-right: none; }
.stats-strip .stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--color-orange-light);
  margin-bottom: 6px;
}
.stats-strip .stat span {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
@media (max-width: 768px) {
  .stats-strip .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stats-strip .stat:nth-child(2) { border-right: none; }
  .stats-strip { margin-top: -50px; }
}

/* ===== Alternating split sections (About / Contact) ===== */
.split-section { background: var(--color-paper); position: relative; scroll-margin-top: 100px; }
/* Contact sits right after the full-bleed, animated Projects banner — a
   smaller scroll-margin here means jumping to it via the nav scrolls
   further down the page, clearing that banner out of view entirely
   instead of leaving a sliver of it flickering across the fade-animation's
   visibility threshold. Contact's own ~110px of top padding (from the
   generic 'section' rule) is enough on its own to keep the header clear
   of the heading text, so this doesn't need the full 100px other sections use. */
#contact-section { scroll-margin-top: 20px; }
.split-section.alt {
  background-color: var(--color-sand);
  background-image:
    linear-gradient(rgba(74,74,74,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,74,74,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

.split-layout {
  display: flex;
  align-items: center;
  gap: 80px;
}
.split-layout.reverse { flex-direction: row-reverse; }

.split-layout {
  display: flex;
  align-items: center;
  gap: 80px;
}

.split-media { flex: 1; position: relative; }
/* Offset drafting-frame behind the image — a nod to architectural plans */
.split-media::before {
  content: "";
  position: absolute;
  top: 22px; left: 22px;
  width: 100%; height: 100%;
  border: 2px solid var(--color-orange);
  border-radius: var(--radius-md);
  z-index: 0;
}
.split-layout.reverse .split-media::before { left: auto; right: 22px; }
@media (max-width: 576px) { /*480*/
  .split-media::before {
    left: 10px;
    right: auto;
  }
  .split-layout.reverse .split-media::before {
    right: 10px;
    left: auto;
  }
}
.split-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
  object-fit: cover;
  box-shadow: 0 24px 55px rgba(28,28,28,0.22);
  transition: transform 0.6s var(--ease);
}
.split-media:hover img { transform: scale(1.05); }
.split-text { flex: 1; max-width: 520px; }
.split-text h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); margin-bottom: 20px; }
.split-text p { color: var(--color-graphite); font-size: 1.10rem; }
.split-text h5 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 10px; color: var(--color-graphite); }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 26px 0 30px;
  padding-top: 22px;
  border-top: 1px solid var(--color-sand-deep);
}
.meta-row div { font-size: 0.85rem; color: var(--color-stone); }
.meta-row strong { display: block; font-family: var(--font-display); color: var(--color-ink); font-size: 0.98rem; }

.contact-lines p { font-size: 1.05rem; margin-bottom: 14px; display: flex; align-items: center; }
.contact-lines a { text-decoration: none; color: var(--color-ink); transition: color .3s; }
.contact-lines a:hover { color: var(--color-orange); }
.contact-lines i {
  color: var(--color-paper);
  background: var(--color-orange);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 14px;
  font-size: 0.85rem;
  flex-shrink: 0;
}
/* the enquiry button's own icon should NOT get the circular badge styling above */
.contact-lines a.btn { color: var(--color-paper); text-decoration: none; }
.contact-lines a.btn i {
  background: none;
  width: auto; height: auto;
  border-radius: 0;
  margin-right: 0;
  font-size: inherit;
}

/* ===== Full-bleed project banner teaser (distinct rhythm from the split sections) ===== */
#projects-section { padding: 0; }
.project-banner {
  position: relative;
  height: 640px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-ink);
  text-decoration: none;
}
.project-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 8s var(--ease);
}
.project-banner:hover img { transform: scale(1.06); }
.project-banner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(var(--color-ink-rgb),0.92) 0%, rgba(var(--color-ink-rgb),0.35) 55%, rgba(var(--color-ink-rgb),0.1) 100%);
}
.project-banner-content {
  position: relative; z-index: 2;
  padding: 60px;
  color: var(--color-paper);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}
.project-banner-content .eyebrow::after { background: rgba(255,255,255,0.6); }
.project-banner-content h2 { color: var(--color-paper); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 8px; }
.project-banner-content p { color: rgba(255,255,255,0.8); max-width: 480px; font-size: 1.02rem; }
.project-banner-tag {
  display: block;
  width: fit-content;
  background: var(--color-orange);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 3px;
  margin-bottom: 24px;
}

/* ===== Project thumbnails ===== */
.projects-thumbs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 50px;
}

.projects-thumbs-wrap {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* smooth native swipe on iOS */
  scrollbar-width: none;
}
.projects-thumbs-wrap::-webkit-scrollbar { display: none; }

.projects-thumbs-track {
  display: flex;
  gap: 24px;
  padding: 6px 4px; /* room so the hover scale doesn't get clipped */
}

.project-thumb {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  text-align: center;
}
.project-thumb img {
  width: 120px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  margin: 0 auto 10px;
  transition: transform 0.3s var(--ease);
}
.project-thumb span {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-graphite);
  transition: color 0.3s var(--ease);
}
.project-thumb:hover img,
.project-thumb.active img {
  transform: scale(1.12);
}
.project-thumb:hover span,
.project-thumb.active span {
  color: var(--color-orange);
}

.projects-thumbs-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-paper);
  border: 1px solid var(--color-sand-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.projects-thumbs-arrow:hover { background: var(--color-orange); color: var(--color-paper); }
.projects-thumbs-arrow.hidden { visibility: hidden; }


/* ===== Main project slider ===== */
.projects-slider-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.projects-slider {
  flex: 1;
  min-width: 0;
}

/* .project-slide {
  display: none;
}
.project-slide.active {
  display: block;
  animation: projectSlideIn 0.5s var(--ease);
} */
.project-slide {
  display: none;
  max-width: 100%;
  margin: 0 auto;
}
.project-slide.active {
  display: block;
  animation: projectSlideIn 0.5s var(--ease);
}
@keyframes projectSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

.projects-slider-arrow {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  color: var(--color-ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.projects-slider-arrow:hover { background: var(--color-orange); color: var(--color-paper); }

.credentials-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.credentials-list li {
  font-size: 0.95rem;
  color: var(--color-graphite);
  line-height: 1.6;
}
.credentials-list strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  margin-right: 6px;
}

.credentials-trigger-text {
  display: inline-block;
  margin-bottom: 16px;
  margin-right: 10px;
  font-size: 0.85rem;
  color: var(--color-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.85;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
/* .credentials-trigger-text:hover {
  color: var(--color-orange);
  opacity: 1;
} */
.credentials-trigger-text {
  position: absolute;
  top: 10px;            /* was 20px — sits higher, closer to the top edge */
  right: 20px;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-paper);
  text-decoration: none;   /* was underline */
  opacity: 0.85;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
/* .credentials-trigger-text:hover {
  color: var(--color-orange);
  opacity: 1;
} */
@media (hover: hover) {
  .credentials-trigger-text:hover {
    color: var(--color-orange);
    opacity: 1;
  }
}
.credentials-trigger-arrow {
  font-size: 0.75rem;
}

.credentials-popup {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 16px;
  width: 320px;
  max-width: 90vw;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s var(--ease);
  z-index: 20;
  overflow-y: auto;   /* NEW — scrolls internally once content exceeds max-height */
  /* max-height is set dynamically via JS, matching .project-card's real height */
}
.credentials-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.credentials-popup h3 {
  font-family: var(--font-display);
  margin-bottom: 18px;
  color: var(--color-ink);
}

.credentials-popup-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-stone);
}
/* .credentials-popup-close:hover { color: var(--color-orange); } */
@media (hover: hover) {
  .credentials-popup-close:hover { color: var(--color-orange); }
}

@media (max-width: 1250px) {
  .credentials-popup {
    margin-left: 6px;
  }
}

/* On narrower screens, there's no room beside the card — drop it below
   instead, full width, sliding down rather than in from the side. */
@media (max-width: 1230px) {
  .credentials-popup {
    left: 0;
    margin-left: 0;
    top: calc(100% + 16px);
    width: 100%;
    max-width: none;
    transform: translateY(-12px);
  }
  .credentials-popup.active {
    transform: translateY(0);
  }

  /* .credentials-trigger-arrow {
    transform: rotate(90deg);
  } */
  .credentials-trigger-arrow {
    transform: rotate(90deg);
    transition: transform 0.3s var(--ease);
  }
  .credentials-trigger-text.popup-open .credentials-trigger-arrow {
    transform: rotate(-90deg);
  }
}
/* ===== Breadcrumb ===== */
.breadcrumb {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 18px 40px;
  background: var(--color-sand);
  border-bottom: 1px solid var(--color-sand-deep);
}
.breadcrumb a { color: var(--color-stone); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-orange); }
.breadcrumb span { color: var(--color-mist); margin: 0 8px; }
.breadcrumb .current { color: var(--color-orange); }

/* ===== Projects hero banner (interior pages) ===== */
.page-banner {
  position: relative;
  /* padding: calc(var(--header-h) + 54px) 0 62px; */
  background-color: var(--color-ink);
  background-image:
    linear-gradient(rgba(var(--color-orange-rgb),0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-orange-rgb),0.08) 1px, transparent 1px),
    linear-gradient(135deg, var(--color-ink), var(--color-graphite));
  background-size: 44px 44px, 44px 44px, 100% 100%;
  color: var(--color-paper);
  text-align: left;
  overflow: hidden;
  margin-top: 65px;
}
/* Architectural drafting-style corner brackets, replacing the old circle motif */
.page-banner::after {
  content: "";
  position: absolute;
  top: 34px; right: 34px;
  width: 64px; height: 64px;
  border-top: 2px solid rgba(var(--color-orange-rgb), 0.55);
  border-right: 2px solid rgba(var(--color-orange-rgb), 0.55);
}
.page-banner::before {
  content: "";
  position: absolute;
  bottom: 30px; left: 30px;
  width: 64px; height: 64px;
  border-bottom: 2px solid rgba(var(--color-orange-rgb), 0.4);
  border-left: 2px solid rgba(var(--color-orange-rgb), 0.4);
}
.banner-watermark {
  position: absolute;
  right: 5%;
  top: 50%;
  font-size: 260px;
  line-height: 1;
  transform: translateY(-50%);
  color: rgba(var(--color-orange-rgb), 0.14);
  pointer-events: none;
  user-select: none;
  z-index: 1;
  animation: watermarkDrift 24s ease-in-out infinite alternate;
}
@keyframes watermarkDrift {
  0%   { transform: translateY(-50%) scale(1) rotate(0deg); }
  100% { transform: translateY(-53%) scale(1.06) rotate(3deg); }
}
@media (max-width: 768px) {
  .banner-watermark { font-size: 150px; right: -10px; }
}
@media (max-width: 520px) {
  .banner-watermark { display: none; }
}
.page-banner .container { position: relative; z-index: 2; }

/* Load-in choreography: eyebrow rises, heading slides in from the left,
   the underline slides in to meet it from the right, then the paragraph
   and the live project count settle in. */
.page-banner .eyebrow,
.page-banner h1,
.page-banner p,
.page-banner .banner-count {
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.page-banner .eyebrow { color: var(--color-orange-light); transform: translateY(16px); }
.page-banner h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: var(--color-paper);
  max-width: 700px;
  transform: translateX(-46px);
}
.page-banner p { max-width: 580px; color: rgba(255,255,255,0.82); font-size: 1rem; margin-top: 8px; transform: translateY(16px); }

.banner-underline {
  width: 90px;
  height: 3px;
  background: var(--color-orange);
  margin: 14px 0 20px;
  opacity: 0;
  transform: translateX(46px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), width 0.4s var(--ease);
}

.banner-count {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;      /* was implicitly nowrap — now allowed to drop to a new line */
  font-family: var(--font-display);
  font-size: 0.86rem;
  color: rgba(255,255,255,0.75);
  margin-top: 16px;
  transform: translateY(16px);
  max-width: 100%;
  gap: 8px;
}
.banner-count span,
.banner-count strong {
  white-space: nowrap;   /* each phrase stays intact — never splits mid-word */
}
.banner-count strong { color: var(--color-orange-light); font-size: 1.15rem; }

/* NEW — only at 1266px and below: shrink slightly so the nowrap text
   still fits comfortably, and push it clear of the decorative bracket
   (which sits fixed at left: 30px, spanning ~64px wide) so they never
   overlap. */
@media (max-width: 1266px) {
  .banner-count {
    font-size: 0.8rem;
    gap: 1px 8px;
    margin-left: 25px;
  }
}

.fade-in.loaded .page-banner .eyebrow { transition-delay: 0.15s; }
.fade-in.loaded .page-banner h1 { transition-delay: 0.3s; }
.fade-in.loaded .page-banner .banner-underline { transition-delay: 0.55s; }
.fade-in.loaded .page-banner p { transition-delay: 0.7s; }
.fade-in.loaded .page-banner .banner-count { transition-delay: 0.85s; }
.fade-in.loaded .page-banner .eyebrow,
.fade-in.loaded .page-banner h1,
.fade-in.loaded .page-banner .banner-underline,
.fade-in.loaded .page-banner p,
.fade-in.loaded .page-banner .banner-count {
  opacity: 1;
  transform: translate(0,0);
}

/* Status badge: hidden by default, fades in on hover of the project card
   Status badge on each project photo — find ALL existing rules starting
   with ".project-status" in main.css and delete them, then paste this
   block in their place. Having it fully self-contained avoids any risk
   of an old, incomplete rule (missing position/top/left) still lurking
   elsewhere in the file and causing exactly the bug we just found. */
.project-status {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.05rem;         /* was 0.72rem — significantly larger */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-orange);
  color: var(--color-paper);
  padding: 8px 15px;         /* was 5px 12px — larger to match */
  border-radius: 4px;
  /* opacity: 0; */
  box-shadow: 0 6px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.2);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
/*Now Selling: orange*/
.project-status.status-soldout { background: var(--color-stone); } /*mid grey*/
.project-status.status-constructing { background: var(--color-graphite); }
.project-status.status-private { background: var(--color-ink); }
.project-status.status-soon { background: var(--color-orange-dark); }

.projects-card.projects-card-disabled {
  cursor: default;
}

/* Badge hover — clickable vs disabled */
.projects-card-disabled:hover .project-status {
  opacity: 0;
}
.projects-card:not(.projects-card-disabled):hover .project-status {
  transform: scale(1.02);
}

/* ── CLICKABLE cards — always the same uniform orange, regardless of
   status. (.project-btn's own base rule already handles the resting
   translucent-orange state — this just governs the hover.) ── */
.projects-card:hover .project-btn { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.project-btn:hover {
  background: var(--color-orange);
  box-shadow: 5px 5px 10px rgba(var(--color-orange-rgb), 0.32);
}

/* ── NON-CLICKABLE cards — bigger button, and colored to match that
   project's OWN status badge color specifically. Fallback below covers
   "Now Selling" and "no status set" (both use the default orange). ── */
.projects-card-disabled .project-btn {
  background: rgba(var(--color-orange-rgb), 0.28);
  color: var(--color-paper);
  padding: 18px 38px;
  font-size: 1.15rem;
}
.projects-card-disabled .project-btn:hover {
  background: var(--color-orange);
  box-shadow: 5px 5px 10px rgba(var(--color-orange-rgb), 0.32);
}
 
.projects-card-disabled[data-status="soon"] .project-btn {
  background: rgba(var(--color-orange-dark-rgb), 0.28);
}
.projects-card-disabled[data-status="soon"] .project-btn:hover {
  background: var(--color-orange-dark);
  box-shadow: 5px 5px 10px rgba(var(--color-orange-dark-rgb), 0.32);
}
 
.projects-card-disabled[data-status="soldout"] .project-btn {
  background: rgba(124, 124, 124, 0.28); /* --color-stone */
}
.projects-card-disabled[data-status="soldout"] .project-btn:hover {
  background: var(--color-stone);
  box-shadow: 5px 5px 10px rgba(124, 124, 124, 0.32);
}
 
.projects-card-disabled[data-status="constructing"] .project-btn {
  background: rgba(74, 74, 74, 0.28); /* --color-graphite */
}
.projects-card-disabled[data-status="constructing"] .project-btn:hover {
  background: var(--color-graphite);
  box-shadow: 5px 5px 10px rgba(74, 74, 74, 0.32);
}
 
.projects-card-disabled[data-status="private_residence"] .project-btn {
  background: rgba(var(--color-ink-rgb), 0.28);
}
.projects-card-disabled[data-status="private_residence"] .project-btn:hover {
  background: var(--color-ink);
  box-shadow: 5px 5px 10px rgba(var(--color-ink-rgb), 0.32);
}

/* ===== Projects listing grid ===== */
.projects-intro-grid {
  padding: 25px 0 60px;
}
.projects-count {
  font-family: var(--font-display);
  color: var(--color-stone);
  font-size: 0.95rem;
  margin-bottom: 40px;
}
.projects-count strong { color: var(--color-orange); }

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px 100px;
}
.project-grid.single { grid-template-columns: 1fr; max-width: 820px; }

/* Cascading reveal for the cards, replaying with the shared .fade-section
   observer used across the site */
.project-grid .projects-card {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fade-section.visible .project-grid .projects-card { opacity: 1; transform: translateY(0); }
.project-grid .projects-card:nth-child(1) { transition-delay: 0s; }
.project-grid .projects-card:nth-child(2) { transition-delay: 0.1s; }
.project-grid .projects-card:nth-child(3) { transition-delay: 0.2s; }
.project-grid .projects-card:nth-child(4) { transition-delay: 0.3s; }

.projects-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.projects-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.projects-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(var(--color-ink-rgb),0.88) 0%, rgba(var(--color-ink-rgb),0.15) 55%, rgba(var(--color-ink-rgb),0.05) 100%);
  transition: background 0.4s var(--ease);
}
.projects-card:hover img { transform: scale(1.08); }

.project-info {
  position: absolute;
  bottom: 30px; left: 40px; right: 28px;
  color: var(--color-paper);
  z-index: 2;
}
.project-info h3 { font-size: 2.5rem; margin-bottom: 4px; color: var(--color-paper); }
.project-info p { font-size: 1.3rem; opacity: 0.85; display: flex; align-items: center; gap: 6px; }
.project-info p i { color: var(--color-orange-light); }

/* Translucent orange by default; solidifies with a directional shadow on hover */
.project-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(var(--color-orange-rgb), 0.28);
  backdrop-filter: blur(6px);
  border: none;
  color: var(--color-paper);
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  transition: all 0.35s var(--ease);
  z-index: 3;
}
 
/* Right-aligned variant — same class name convention your
   .section-head.text-right already uses, so it lines up with the title
   it belongs to. */
.section-note.text-right {
  margin-left: auto;
  text-align: right;
}

/* Replace your existing .section-note / .section-note.text-right rules
   entirely with this. */

.section-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--color-sand);
  border-radius: var(--radius-md);
  padding: 22px 28px;
  max-width: 640px;
  margin-bottom: 40px;
  box-shadow: 0 8px 24px rgba(28,28,28,0.06);
  border-left: 3px solid var(--color-orange);
}

/* Mirrors the accent to the right side, for the right-aligned Benefits
   section — and pushes the whole card to the right, matching that
   section's overall right-leaning layout. */
.section-note-right {
  margin-left: auto;
  border-left: none;
  border-right: 3px solid var(--color-orange);
}
/* .section-note-right p {
  text-align: right;
} */
.section-note-right p {
  text-align: justify;
  text-align-last: left;
}

.section-note i {
  color: var(--color-orange);
  font-size: 1.1rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.section-note p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-graphite);
  text-align: justify;
}

/* ===== Fade / reveal animations ===== */
.fade-in { opacity: 0; transition: opacity 0.8s ease-in-out; }
.fade-in.loaded, .fade-in.visible { opacity: 1; }

.fade-section { opacity: 0; transform: translateY(40px); transition: all 0.8s var(--ease); }
.fade-section.visible { opacity: 1; transform: translateY(0); }

.fade-right, .fade-left, .fade-bottom { opacity: 0; transition: all 0.9s var(--ease); }
.fade-right { transform: translateX(40px); }
.fade-left { transform: translateX(-40px); }
.fade-bottom { transform: translateY(40px); }
.fade-section.visible .fade-right,
.fade-section.visible .fade-left,
.fade-section.visible .fade-bottom {
  opacity: 1; transform: translate(0,0);
}

/* ===== Slick overrides ===== */
.slick-prev, .slick-next {
  background: rgba(28,28,28,0.55);
  border-radius: 50%;
  width: 44px; height: 44px;
  z-index: 5;
}
.slick-prev:before, .slick-next:before {
  color: var(--color-paper);
  font-size: 18px;
  opacity: 1;
}
.slick-prev:hover, .slick-next:hover,
.slick-prev:focus, .slick-next:focus { background: var(--color-orange); }
.slick-dots li button:before { font-size: 9px; color: var(--color-paper); opacity: 0.6; }
.slick-dots li.slick-active button:before { color: var(--color-orange); opacity: 1; }

/* ===== Footer =====
   White, like the header — matches how the logo is normally presented,
   set apart from the page above it with a soft shadow rather than a
   color change. */
.site-footer {
  background-color: var(--color-paper);
  color: var(--color-graphite);
  padding-top: 70px;
  box-shadow: 0 -6px 24px rgba(28,28,28,0.07);
  position: relative;
  z-index: 2;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px 50px;
  border-bottom: 1px solid var(--color-sand-deep);
}
.footer-column { flex: 1; min-width: 230px; }
.footer-logo { max-width: 170px; margin-bottom: 18px; }
.tagline {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-orange-dark);
  line-height: 1.5;
}
.footer-links h4, .footer-contact h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--color-ink);
}
.footer-links ul { list-style: none; }
.footer-links ul li { margin-bottom: 12px; }
.footer-links ul li a { color: var(--color-graphite); text-decoration: none; transition: color 0.3s; }
/* .footer-links ul li a:hover { color: var(--color-orange); } */
@media (hover: hover) {
  .footer-links ul li a:hover { color: var(--color-orange); }
  .footer-contact a:hover { color: var(--color-orange); }
  .social-icons a:hover { background: var(--color-orange); border-color: var(--color-orange); color: var(--color-paper); }
}
.footer-contact p { font-size: 0.92rem; margin-bottom: 12px; color: var(--color-graphite); }
.footer-contact a { color: var(--color-ink); text-decoration: none; }
/* .footer-contact a:hover { color: var(--color-orange); } */
.social-icons { margin-top: 18px; display: flex; gap: 12px; }
.social-icons a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--color-sand-deep);
  border-radius: 50%;
  color: var(--color-graphite);
  transition: all 0.3s;
}
/* .social-icons a:hover { background: var(--color-orange); border-color: var(--color-orange); color: var(--color-paper); } */
/* .footer-bottom {
  text-align: center;
  padding: 22px 10px;
  font-size: 0.85rem;
  color: var(--color-stone);
} */
.footer-bottom {
  text-align: center;
  padding: 22px 10px;
  color: var(--color-stone);
}
.footer-copyright {
  font-size: 0.85rem;
  margin: 0 0 4px;
}
/*.footer-credit {
  font-size: 0.8rem;
  margin: 0 0 4px;
}*/
.footer-legal-links {
  font-size: 0.7rem;
  margin: 0;
}

.footer-break {
  display: none;
}

@media (max-width: 480px) {
  .footer-dot-first {
    display: none;
  }
  .footer-break {
    display: block;
  }
  #disclaimer-trigger {
    display: inline-block; /* needed for margin-top to actually apply to an inline link */
    margin-top: 0px;
  }
  .footer-links ul li,
  .footer-contact p {
    margin-bottom: 5px;
  }

  .footer-copyright {
    font-size: 0.65rem;
  }
  .footer-legal-links {
    font-size: 0.5rem;
  }
}

@media (min-width: 620px) and (max-width: 1280px) {
  .footer-top {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(45px, 4vw, 60px);
  }
  .footer-column {
    min-width: clamp(120px, 15vw, 180px);
    flex: 0 1 auto;
  }

  .footer-logo {
    margin-right: 250px;
  }

}
@media (min-width: 480px) and (max-width: 1280px) {
  .footer-contact {
    max-width: 300px;
  }
  .footer-column .footer-brand {
    margin-right: 0px;
  }
}

@media (max-width: 560px) {
  .footer-top {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 50px;
  }
  .footer-brand,
  .footer-links {
    flex: 0 1 auto;
    min-width: 0;
  }
  .footer-contact {
    flex: 1 1 100%; /* forces it onto its own row */
    min-width: 0;
  }
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .split-layout { flex-direction: column; }
  .split-layout.reverse { flex-direction: column; align-items: stretch; }
  .split-text { max-width: 100%; }
  .project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  header { padding: 0 20px; }
  .main-nav {
    display: none;
    position: fixed;
    top: 0; right: 0;
    /* height: 100vh; */
    height: 100svh;
    width: 260px;
    background: var(--color-ink);
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.3);
    z-index: 1050;
  }
  .main-nav.active { display: flex; }
  .main-nav ul { flex-direction: column; gap: 28px; }
  .main-nav a { color: var(--color-paper) !important; }
  .menu-trigger { display: flex; }
  section { padding: 40px 0; }
  .breadcrumb { padding: 14px 20px; }
}

@media (max-width: 576px) {
  .container { padding: 0 20px; }
  .hero-content h1 { font-size: 2rem; }

  .meta-row {
  flex-wrap: nowrap;
  gap: 6px 30px;
  margin: 18px 0 20px;
  padding-top: 16px;
}
 .meta-row div { font-size: 0.73rem; }
.meta-row strong { font-size: 0.9rem; }
}

@media (max-width: 480px) {
  /* section { padding: 30px 0; } */
  .breadcrumb { padding: 12px 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}


/* ===================================================================
   PROJECT DETAIL PAGE
   =================================================================== */
.project-hero {
  /* height: 100vh; */
  /* height: 100svh; */
  height: var(--stable-vh, 100vh);
  min-height: 600px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0 0 80px;
  color: var(--color-paper);
}
.project-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--color-ink-rgb),0.28) 0%, rgba(var(--color-ink-rgb),0.08) 35%, rgba(var(--color-ink-rgb),0.78) 100%);
}
.project-hero .container { position: relative; z-index: 2; }

.project-card {
  position: relative;
  background: rgba(var(--color-ink-rgb),0.34);
  backdrop-filter: blur(9px);
  padding: 50px 60px;
  border-radius: var(--radius-lg);
  max-width: 800px;
  min-width: 450px;
  border: 1px solid rgba(255,255,255,0.15);
  opacity: 0;
  transform: translateY(26px) scale(0.98);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: 0.25s;
  margin-bottom: 20px;
}
.fade-in.loaded .project-card { opacity: 1; transform: translateY(0) scale(1); }
/* Offset orange drafting-frame — the same motif used behind the About/Contact images */
.project-card::before {
  content: "";
  position: absolute;
  top: -16px; left: -16px;
  width: 100%; height: 100%;
  border: 2px solid var(--color-orange);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.project-card .eyebrow { color: var(--color-orange-light); }
.project-card h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--color-paper); margin-bottom: 6px; }
.project-card > p { color: rgba(255,255,255,0.85); font-size: 1rem; margin-bottom: 26px; display:flex; align-items:center; gap:8px;}
.project-card > p i { color: var(--color-orange); }

.project-icons { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-paper);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), color 0.3s;
}
.icon-btn i {
  font-size: 1.2rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  transition: all 0.3s var(--ease);
}
/* .icon-btn:hover { color: var(--color-orange-light); } */
/* .icon-btn:hover i { border-color: var(--color-orange); background: var(--color-orange); color: var(--color-paper); transform: translateY(-3px); } */
@media (hover: hover) {
  .icon-btn:hover { color: var(--color-orange-light); }
  .icon-btn:hover i { border-color: var(--color-orange); background: var(--color-orange); color: var(--color-paper); transform: translateY(-3px); }
}

@media (min-width: 860px) {
  .project-icons { flex-wrap: nowrap; }
  .icon-btn { flex-shrink: 0; }
}

/* .project-section { padding: 100px 0; scroll-margin-top: 110px; } */
.project-section.alt-bg { background: var(--color-sand); }
.section-head { max-width: 640px; margin-bottom: 50px; }
.section-head.text-right { margin-left: auto; text-align: right; }
.section-head p { color: var(--color-graphite); margin-top: 6px; }

/* Heading text slides in from the side it's aligned on; the eyebrow rises
   gently. display:inline-block makes h2 shrink to its actual text width
   (instead of stretching to fill .section-head), which is also what makes
   the underline's width measurement below accurate. */
.section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.section-head:not(.text-right) h2 { transform: translateX(-46px); }
.section-head.text-right h2 { transform: translateX(46px); }
.fade-section.visible .section-head h2 { opacity: 1; transform: translateX(0); }

.section-head .eyebrow {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.fade-section.visible .section-head .eyebrow { opacity: 1; transform: translateY(0); }

/* Orange underline that slides in from the OPPOSITE side of the heading —
   same mechanism as the Cyprus Projects banner underline. */
.section-line {
  height: 3px;
  background: var(--color-orange);
  margin: 16px 0 22px;
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), width 0.4s var(--ease);
}
.section-line.from-left { transform: translateX(-46px); }
.section-line.from-right { transform: translateX(46px); }
.section-head.text-right .section-line { margin-left: auto; }
.fade-section.visible .section-line { opacity: 1; transform: translateX(0); }

/* ===== Benefits — borderless, icon-led proximity row ===== */
.benefits-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 34px 20px;
}
.benefit-item {
  flex: 1 1 130px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.benefit-item i {
  font-size: 2.15rem;
  color: var(--color-orange);
  margin-bottom: 20px;
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
.benefit-item:hover i { transform: translateY(-4px) scale(1.08); color: var(--color-orange-dark); }
.benefit-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.65rem;
  color: var(--color-ink);
  line-height: 1;
}
.benefit-stat small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--color-stone);
  margin-left: 3px;
}
.benefit-label {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-graphite);
  margin-top: 8px;
}
@media (max-width: 700px) {
  .benefits-row { justify-content: center; }
  .benefit-item { flex: 1 1 30%; }
}

/* ===== Gallery — a fixed 5-photo collage layout (mirrors the reference
   collage: two stacked tiles on the left, one tall feature on the right,
   two even tiles beneath) with a staggered scroll-in reveal ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  grid-template-rows: repeat(3, 200px);
  grid-auto-rows: 200px; /* NEW — gives any images beyond the first 5 (auto-placed into new rows) the same row height as the rest */
  gap: 16px;
}
.gallery-grid a:nth-child(1) { grid-column: 1; grid-row: 1; }
.gallery-grid a:nth-child(2) { grid-column: 1; grid-row: 2; }
.gallery-grid a:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.gallery-grid a:nth-child(4) { grid-column: 1; grid-row: 3; }
.gallery-grid a:nth-child(5) { grid-column: 2; grid-row: 3; }
.gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform 0.4s var(--ease), filter 0.4s;
}
.gallery-grid a:hover img { transform: scale(1.04); filter: brightness(1.05); }

.gallery-grid a {
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}

.fade-section.visible .gallery-grid a { opacity: 1; transform: translateY(0) scale(1); }
.gallery-grid a:nth-child(1) { transition-delay: 0.05s; }
.gallery-grid a:nth-child(2) { transition-delay: 0.15s; }
.gallery-grid a:nth-child(3) { transition-delay: 0.25s; }
.gallery-grid a:nth-child(4) { transition-delay: 0.35s; }
.gallery-grid a:nth-child(5) { transition-delay: 0.45s; }
.gallery-grid a:nth-child(6) { transition-delay: 0.55s; }
.gallery-grid a:nth-child(7) { transition-delay: 0.65s; }
.gallery-grid a:nth-child(8) { transition-delay: 0.75s; }

/* NEW — exactly 4, 6, or 8 images total: the lone image in the last row
   spans the full width instead of sitting alone on one side. Exactly 5
   or 7 already fill their last row completely, so they're untouched. */
.gallery-grid a:nth-child(4):last-child {
  grid-column: 1 / -1;
  grid-row: 3;
}
.gallery-grid a:nth-child(6):last-child {
  grid-column: 1 / -1;
}
.gallery-grid a:nth-child(8):last-child {
  grid-column: 1 / -1;
}

/* Update .gallery-split — align-items changes from the default
   "stretch" to "flex-start", so the main display no longer gets
   squished to match the thumbnail column's height. */
.gallery-split {
  display: flex;
  align-items: flex-start;   /* was stretch (the default) */
  gap: 20px;
}

/* .gallery-thumbs-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 140px;
  flex-shrink: 0;
} */
.gallery-thumbs-col {
  position: relative;   /* NEW — anchors the floating arrows */
  width: 140px;
  flex-shrink: 0;
}

/* .gallery-thumbs-scroll {
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-height: 520px;
} */
.gallery-thumbs-scroll {
  height: 520px;         /* NEW — was only max-height before */
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-thumbs-scroll::-webkit-scrollbar { display: none; }

.gallery-thumbs-track {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery-thumb {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.gallery-thumb img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
}
.gallery-thumb:hover,
.gallery-thumb.active {
  border-color: var(--color-orange);
}

/* Arrows are now small floating circles overlaying the top/bottom edges
   of the scroll area, instead of pushing content down. */
.gallery-thumbs-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--color-sand-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.gallery-thumbs-arrow.up { top: 10px; }
.gallery-thumbs-arrow.down { bottom: 10px; }
.gallery-thumbs-arrow:hover { background: var(--color-orange); color: var(--color-paper); }
.gallery-thumbs-arrow.hidden { visibility: hidden; }

/* Explicit height directly on the button itself now — this is what
   actually fixes the "shrinks to match thumbnail" bug. */
.gallery-main-display {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 520px;   /* NEW */
}
.gallery-main-display img {
  width: 100%;
  height: 100%;   /* was a fixed 520px — now just fills its parent's explicit height */
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease);
}
.gallery-main-display:hover img {
  transform: scale(1.03);
}
.gallery-main-display {
  outline: none;
}
.gallery-main-display:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: white;   /* was rgba(255,255,255,0.92) */
  z-index: 3000;
  align-items: center;
  justify-content: center;
  overscroll-behavior: contain;   /* NEW */
  touch-action: manipulation;   /* was none */
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: var(--radius-sm); }

.lightbox {
  opacity: 0;
  visibility: hidden;
  /* transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease); */
}
.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  transform: scale(0.92);
  transition: transform 0.35s var(--ease);
}
.lightbox.active img {
  transform: scale(1.2);
}

.lightbox-close {
  position: absolute; top: 34px; right: 34px;
  color: var(--color-ink); font-size: 2.5rem; cursor: pointer;
  background: none; border: none;
}
.lightbox-close:hover { color: var(--color-orange); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(var(--color-ink-rgb), 0.06); border: none; color: var(--color-ink);
  width: 50px; height: 50px; border-radius: 50%; font-size: 1.3rem; cursor: pointer;
}

.lightbox-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}
.lightbox-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-mist);
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.lightbox-dots .dot.active {
  background: var(--color-orange);
}

.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(var(--color-ink-rgb), 0.6);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.confirm-modal.active {
  opacity: 1;
  visibility: visible;
}
.confirm-modal-box {
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.35s var(--ease);
}
.confirm-modal.active .confirm-modal-box {
  transform: translateY(0) scale(1);
}
.confirm-modal-box p {
  margin-bottom: 22px;
  font-size: 1.05rem;
  color: var(--color-ink);
}
.confirm-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.confirm-modal-cancel {
  background: none;
  border: none;
  color: var(--color-stone);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 6px;
}
.confirm-modal-cancel:hover { color: var(--color-ink); }
.confirm-modal-actions .btn {
  width: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
}

/* ===== Interactive Floor Plan ===== */
.floorplan-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(28,28,28,0.12);
  background: var(--color-sand);
}
.floorplan-wrap img { width: 100%; display: block; }
.floorplan-img-base {
  filter: grayscale(0.9) brightness(0.55);
}
.floorplan-img-color {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  clip-path: polygon(0% 0%, 0% 0%, 0% 0%);
  transition: clip-path 0.35s ease;
}
.floorplan-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hotspot {
  fill: rgba(242,103,15,0.0);
  stroke: rgba(242,103,15,0.9);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 0.25s var(--ease);
}
/* .hotspot:hover, .hotspot.active-hotspot { fill: rgba(242,103,15,0.35); } */
.floor-toggle { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.floor-toggle button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 2px solid var(--color-mist);
  background: transparent;
  color: var(--color-graphite);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.3s;
}
.floor-toggle button.active, .floor-toggle button:hover { border-color: var(--color-orange); color: var(--color-orange); }

.unit-tooltip {
  position: absolute;
  z-index: 20;
  background: var(--color-paper);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
  padding: 18px 20px;
  min-width: 220px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.unit-tooltip.visible { opacity: 1; transform: translateY(0); }
.unit-tooltip h4 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 4px; color: var(--color-ink); }
.unit-tooltip .unit-price { color: var(--color-orange); font-weight: 700; font-family: var(--font-display); margin-bottom: 10px; font-size: 1rem; }
.unit-specs { display: flex; gap: 16px; font-size: 0.85rem; color: var(--color-graphite); }
.unit-specs span { display: flex; align-items: center; gap: 5px; }
.unit-specs i { color: var(--color-orange); }
.unit-tooltip .tap-hint { margin-top: 10px; font-size: 0.75rem; color: var(--color-stone); }

.floorplan-thumbs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.floorplan-thumb {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 10px 22px;
  /* padding: 7px 16px; */
  border: 2px solid var(--color-mist);
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-graphite);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
  flex-shrink: 0;         /* NEW — prevents thumbs from squishing in the scroll row */
}
.floorplan-thumb:hover,
.floorplan-thumb.active {
  border-color: var(--color-orange);
  color: var(--color-orange);
}
.floorplan-thumbs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 5px;
}
 
.floorplan-thumbs-scroll {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.floorplan-thumbs-scroll::-webkit-scrollbar { display: none; }

.floorplan-thumbs-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-paper);
  border: 1px solid var(--color-sand-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.floorplan-thumbs-arrow:hover { background: var(--color-orange); color: var(--color-paper); }
.floorplan-thumbs-arrow.hidden { visibility: hidden; }

.floorplan-fullview-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: background 0.3s var(--ease);
}
.floorplan-fullview-btn i {
  font-size: 1.15rem;
  color: var(--color-ink);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.floorplan-fullview-btn:hover {
  background: var(--color-orange);
}
.floorplan-fullview-btn:hover i {
  color: var(--color-paper);
  transform: scale(1.25);
}

/* NEW — cursor hint that the image itself is now clickable too */
.floorplan-image-stack {
  cursor: pointer;
}

/* When opened via the full-view button (a single static image, not a
   browsable gallery), hide the prev/next arrows and dots — there's
   nothing to page through in this context. */
.lightbox.single-image-mode .lightbox-nav,
.lightbox.single-image-mode .lightbox-dots {
  display: none;
}

/* ===== Floor plan slider ===== */
.floorplan-slider {
  position: relative;
  /* border-radius: var(--radius-lg); */
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(28,28,28,0.12);
  background: var(--color-sand);
  /* aspect-ratio: 16 / 10; adjust to taste based on your real floor plan proportions */
  aspect-ratio: 4 / 3;
}
.floorplan-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.floorplan-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(60px) scale(0.97);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.floorplan-slide.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.floorplan-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-sand);
}

.floorplan-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 12px; /* pulls it closer to the slider than before */
}

.floorplan-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  color: var(--color-ink);
  z-index: 5;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.floorplan-arrow:hover { background: var(--color-orange); color: var(--color-paper); }
.floorplan-arrow.prev { left: 20px; }
.floorplan-arrow.next { right: 20px; }

.floorplan-dots-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* .floorplan-dots .dot.active { background: var(--color-orange); } */
.floorplan-dots {
  position: absolute;
  /* bottom: 18px; */
  bottom: clamp(6px, 1vw, 18px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  /* gap: 8px; */
  gap: clamp(5px, 1.5vw, 8px);
  z-index: 5;
}
.floorplan-dots .dot {
  /* width: 9px; */
  width: clamp(6px, 2vw, 9px);
  /* height: 9px; */
  height: clamp(6px, 2vw, 9px);
  border-radius: 50%;
  background: var(--color-mist);
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.floorplan-dots .dot.active {
  background: var(--color-orange);
}

.floorplan-download-row {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.floorplan-image-stack {
  position: relative;
  width: 100%;
  height: 100%;
}
.fp-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.fp-layer.fp-main {
  opacity: 1;
}

.fp-hover-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 3;
  cursor: pointer;
}

.floorplan-slider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* .floorplan-slider no longer has a fixed width:100% — JS sets its real
   width/height explicitly now (fpFitSlider), so just clear any old
   fixed-width rule and let it size itself: */
.floorplan-slider {
  flex-shrink: 0;
}

/* Arrows are no longer position:absolute — remove "position: absolute",
   "top", "left"/"right" from your existing rule. Keep everything else
   (size, background, hover color): */
.floorplan-arrow {
  position: static;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  color: var(--color-ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.floorplan-arrow:hover { background: var(--color-orange); color: var(--color-paper); }

/* Ribbon width now gets matched to the slider's actual computed width
   via JS too, so it stays visually aligned underneath it. */
.floorplan-ribbon-wrap {
  transition: width 0.2s ease;
}

.fp-popup h4 {
  font-family: var(--font-display);
  font-size: 1.35rem; /*1.15*/
  margin-bottom: 18px; /*14px*/
  color: var(--color-ink);
}

.fp-popup-areas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 26px;  /* was 14px — more space before the specs row */
  font-size: 0.85rem;
}
.fp-popup-areas div {
  display: flex;
  justify-content: space-between;
  color: var(--color-graphite);
}

.fp-popup-specs {
  display: flex;
  gap: 18px; /*14*/
  font-size: 0.95rem; /*0.85*/
  margin-bottom: 18px; /*14*/
  flex-wrap: wrap;
  color: var(--color-graphite);
}
/* .fp-popup-specs i { color: var(--color-orange); margin-right: 4px; } */
.fp-popup-specs i { color: var(--color-orange); margin-right: 6px; font-size: 1.05rem; }

.fp-popup-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem; /*0.82*/
  display: flex;
  flex-direction: column;
  gap: 8px; /*6*/
  color: var(--color-graphite);
}
.fp-popup-checks i { color: var(--color-orange); margin-right: 8px; font-size: 1rem; }

.floorplan-apartments.active {
  display: block;
}

.fp-apt-btn:hover,
.fp-apt-btn.active {
  border-color: var(--color-orange);
  color: var(--color-orange);
}
 
.fp-panel.open {
  max-height: 800px;
}

.fp-price-status-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.fp-price-line {
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-orange);
}

.fp-vat-note {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-stone);
  margin-left: 4px;
}

/* NEW — Enquire Now's row at the bottom */
.fp-panel-enquire-row {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-sand-deep);
  text-align: right;
}

/* Always pushed to the far right of the row — works whether or not the
   price is showing next to it (e.g. when status is Sold and price is
   hidden entirely, the badge still lands on the right, not the left). */
.fp-price-status-row .fp-status-badge {
  margin-left: auto;
}
.fp-status-badge.fp-status-badge-large {
  font-size: 1.15rem;
  padding: 9px 20px;
  margin-left: 0;   /* overrides the base .fp-status-badge's margin-left: 10px, meant for when it sits next to something */
}
.fp-popup-areas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}
.fp-popup-areas div {
  display: flex;
  justify-content: space-between;
  color: var(--color-graphite);
}

.fp-popup-specs {
  display: flex;
  gap: 18px;
  font-size: 0.95rem;
  margin-bottom: 18px;
  flex-wrap: wrap;
  color: var(--color-graphite);
}
.fp-popup-specs i { color: var(--color-orange); margin-right: 6px; font-size: 1.05rem; }
.fp-popup-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-graphite);
}
.fp-popup-checks i { color: var(--color-orange); margin-right: 8px; font-size: 1rem; }

/* ── NEW — the ribbon bar ── */
.floorplan-ribbon-wrap {
  position: relative;
}

.floorplan-ribbon {
  display: none;
  align-items: stretch;
  background: var(--color-paper);
  border: 1px solid var(--color-sand-deep);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(28,28,28,0.06);
}
.floorplan-ribbon.active {
  display: grid;
}

.floorplan-ribbon-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--color-sand-deep); /* divider between every button */
  /* padding: 8px 22px; */
  /* font-family: 'Poppins', var(--font-display); */
  font-family: var(--font-display);
  font-weight: 300;
  /* font-size: 1rem; */
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  padding: clamp(6px, 2vw, 8px) clamp(12px, 4vw, 22px);
  letter-spacing: 0.02em;
  color: var(--color-graphite);
  cursor: pointer;
  text-align: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.floorplan-ribbon-btn:last-child {
  border-right: none; /* no divider after the final button */
}
/* .floorplan-ribbon-btn:hover,
.floorplan-ribbon-btn.active,
.floorplan-ribbon-btn.hover-linked {
  background: var(--color-orange);
  color: var(--color-paper);
} */
.floorplan-ribbon-btn.active,
.floorplan-ribbon-btn.hover-linked {
  background: var(--color-orange);
  color: var(--color-paper);
}

@media (hover: hover) {
  .floorplan-ribbon-btn:hover {
    background: var(--color-orange);
    color: var(--color-paper);
  }
}

.floorplan-ribbon-floor {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  /* font-family: 'Poppins', var(--font-display); */
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
  background: var(--color-sand);
} */

.floorplan-ribbon-arrow {
  margin-left: 8px;
  font-size: 0.75rem;
  transition: transform 0.3s var(--ease);
}
.floorplan-ribbon-btn.active .floorplan-ribbon-arrow {
  transform: rotate(180deg);
}

/* ── NEW — floor label row, sitting above the ribbon ── */
.floorplan-floor-label-wrap {
  text-align: center;
}
.floorplan-floor-label {
  display: none;
  font-family: 'Poppins', var(--font-display);
  font-weight: 300;              /* was 100 — bolder, more visible */
  /* font-size: 0.8rem; */
  font-size: clamp(0.75rem, 2.2vw, 0.8rem);
  letter-spacing: 0.4em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--color-ink);       /* was graphite — higher contrast */
  padding: 2px 0;
  background: var(--color-sand-deep);
  border-radius: var(--radius-sm);
}
.floorplan-floor-label.active {
  display: block;
}

/* ── Crossfade highlight — now triggered by EITHER real hover/tap
   (hover-left/hover-right) OR a locked click-state (force-left/
   force-right), so clicking a button keeps the highlight in place
   regardless of where the mouse goes afterward. ── */
.floorplan-slide.hover-left .fp-main,
.floorplan-slide.force-left .fp-main { opacity: 0; }
.floorplan-slide.hover-left .fp-left,
.floorplan-slide.force-left .fp-left { opacity: 1; }
.floorplan-slide.hover-right .fp-main,
.floorplan-slide.force-right .fp-main { opacity: 0; }
.floorplan-slide.hover-right .fp-right,
.floorplan-slide.force-right .fp-right { opacity: 1; }


/* ── Panels wrap — sits directly below the slider with zero gap, so it
   reads as "dropping down from the image" rather than a separate
   floating box. ── */
.floorplan-panels-wrap {
  position: relative;
}
.floorplan-panel-group {
  display: none;
}
.floorplan-panel-group.active {
  display: flow-root; /* contains the floated panels below without extra markup */
}

.floorplan-panel-group {
  position: relative;
  height: 0;
  overflow: visible;   /* was hidden */
  transition: height 0.9s var(--ease);
}

/* ── Panels — always full width now, no left/right split ── */
.fp-panel {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  /* background: #f0f0f0; */
  background: var(--color-paper); /* very light neutral grey — not in your existing palette variables, so using it directly */
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),
    0 8px 16px rgba(0,0,0,0.10),
    0 20px 40px rgba(0,0,0,0.14);
  transition: max-height 0.9s var(--ease);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.fp-panel-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-stone);
  cursor: pointer;
  z-index: 2;
}
.fp-panel-close:hover { color: var(--color-orange); }

.fp-apartment-details { padding: 32px 34px; padding-bottom: 16px; }

.fp-status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 11px;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-left: 10px;
  margin-bottom: 4px;
  color: #fff;
}
.fp-status-sold { background: #c0392b; }
.fp-status-available { background: #2e8b57; }
.fp-status-reserved { background: #8a8a8a; }

/* ── Content inside the panel — same as before ── */
.fp-popup-areas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; font-size: 0.95rem; }
.fp-popup-areas div { display: flex; justify-content: space-between; color: var(--color-graphite); }
.fp-popup-areas .fp-popup-total {
  border-top: 1px solid var(--color-sand-deep);
  padding-top: 8px;
  /* margin-top: 6px; */
  font-weight: 600;
  color: var(--color-ink);
}
.fp-popup-specs { display: flex; gap: 18px; font-size: 0.95rem; margin-bottom: 18px; flex-wrap: wrap; color: var(--color-graphite); }
.fp-popup-specs i { color: var(--color-orange); margin-right: 6px; font-size: 1.05rem; }
.fp-popup-checks { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; display: flex; flex-direction: column; gap: 8px; color: var(--color-graphite); }
.fp-popup-checks i { color: var(--color-orange); margin-right: 8px; font-size: 1rem; }

/* ===== Properties for Sale grid ===== */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 30px;
}
.property-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/2;
  text-decoration: none;
  display: block;
  box-shadow: 0 10px 30px rgba(28,28,28,0.1);
}
.property-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.property-card:hover img { transform: scale(1.06); }
.property-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(var(--color-ink-rgb),0.92) 0%, rgba(var(--color-ink-rgb),0.05) 55%);
}
.property-card-label {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--color-orange);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 3px;
}
.property-card-info { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; color: var(--color-paper); }
.property-card-info h4 { color: var(--color-paper); font-size: 1.15rem; margin-bottom: 10px; }
.property-card-specs {
  display: flex; gap: 14px; font-size: 0.85rem; flex-wrap: wrap;
  opacity: 0; transform: translateY(10px);
  transition: all 0.35s var(--ease);
  margin-bottom: 8px;
}
.property-card:hover .property-card-specs { opacity: 1; transform: translateY(0); }
.property-card-specs span { display: flex; align-items: center; gap: 5px; }
.property-card-specs i { color: var(--color-orange-light); }
.property-card-price { font-family: var(--font-display); font-weight: 700; color: var(--color-orange-light); font-size: 1.05rem; }

/* ===== Location — smaller map, unboxed details stacked beside it ===== */
.location-layout {
  display: flex;
  align-items: center;
  gap: 30px;
}
.location-map {
  flex: 2.3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(28,28,28,0.12);
}
.location-map iframe { width: 100%; height: 380px; border: 0; display: block; }

.location-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.location-details div {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.05rem;
  color: var(--color-graphite);
}
.location-details i {
  color: var(--color-orange);
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .location-layout { flex-direction: column; }
  .location-details { flex-direction: row; flex-wrap: wrap; gap: 20px 40px; width: 100%; }
}

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(4, 160px); }
  .gallery-grid a:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  .gallery-grid a:nth-child(4) { grid-row: 3; }
  .gallery-grid a:nth-child(5) { grid-row: 3; }
  .project-card { max-width: 100%; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .gallery-grid a { grid-column: 1 !important; grid-row: auto !important; aspect-ratio: 4/3; }
}


/* ===================================================================
   SINGLE PROPERTY PAGE
   =================================================================== */

/* ---- Hero: fills nearly the full screen. Only a small strip at the
   bottom of the initial viewport shows the breadcrumb and the top of the
   price card (title/project/location) — the price block and everything
   below is revealed by scrolling. Tune --hero-vh/--card-pull together if
   this needs adjusting for a specific viewport height. ---- */
.apartment-hero {
  position: relative;
  height: 88vh;
  min-height: 620px;
  background-size: cover;
  background-position: center;
  color: var(--color-paper);
}
.apartment-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--color-ink-rgb),0.2) 0%, rgba(var(--color-ink-rgb),0.05) 45%, rgba(var(--color-ink-rgb),0.55) 100%);
}

.apartment-intro { background: var(--color-paper); padding-top: 0; display: flow-root; }
.apartment-intro-grid {
  display: grid;
  grid-template-columns: 540px 1fr;
  gap: 60px;
  align-items: flex-start;
  max-width: none;   /* cancels .container's 1240px cap */
  margin: 0;
  padding-right: 0;
  padding-left: 160px;   /* was 0 — this pushes the whole row in from both edges */
}

.apartment-price-card {
  position: relative;
  margin-top: -280px;
  height: 580px;
  width: 600px;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  background: rgba(var(--color-ink-rgb),0.88);
  backdrop-filter: blur(10px);
  padding: 60px 60px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.15);
  opacity: 0;
  transform: translateY(26px) scale(0.98);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: 0.25s;
  z-index: 3;
}
.fade-in.loaded .apartment-price-card { opacity: 1; transform: translateY(0) scale(1); }
.apartment-price-card::before {
  content: "";
  position: absolute;
  top: -16px; left: -16px;
  width: 100%; height: 100%;
  border: 2px solid var(--color-orange);
  border-radius: var(--radius-lg);
  z-index: -1;
}
.apartment-price-card h1 { font-size: clamp(1.8rem, 3.0vw, 2.2rem); color: var(--color-paper); margin-bottom: 35px; line-height: 1.25; white-space: nowrap; }
.apartment-price-card .project-name { font-family: var(--font-display); font-weight: 600; color: var(--color-orange-light); font-size: 1.8rem; }
.apartment-price-card .location { font-size: 1.10rem; color: rgba(255,255,255,0.72); margin-top: 3px; }
.card-price-block { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; }
.apartment-price-card .for-sale-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange-light);
  margin-top: 130px;
  margin-bottom: 8px;
}
.apartment-price-card .price { font-family: var(--font-display); font-weight: 700; font-size: 2.8rem; color: var(--color-paper); line-height: 1.1; }
.apartment-price-card .vat-note { font-size: 1.0rem; color: rgba(255,255,255,0.6); margin-top: 1px; }

/* ---- Sidebar: full-width breadcrumb band flush under the hero, then
   divided specs square, then quick-nav icons ---- */
.breadcrumb-inline {
  display: flex;
  align-items: center;
  width: 100%; 
  font-family: var(--font-display);
  font-size: 1.0em;
  letter-spacing: 0.08em;
  padding: 12px 18px;
  background: var(--color-sand);
  border-radius: var(--radius-sm);
}
.breadcrumb-inline a { color: var(--color-stone); text-decoration: none; }
.breadcrumb-inline a:hover { color: var(--color-orange); }
.breadcrumb-inline span { color: var(--color-mist); padding: 5px 4px; }
.breadcrumb-inline .current { color: var(--color-orange); }

.side-specs-pair { display: grid; grid-template-columns: 1fr 1fr; }
.side-specs-pair .cell { position: relative; }
.side-specs-pair .cell::after {
  content: "";
  position: absolute;
  left: 30px; right: 30px; bottom: 0;
  border-bottom: 1px solid var(--color-orange);
}
/* .side-specs-pair .cell:first-child { border-right: 1.5px solid var(--color-orange); } */
.side-specs-pair .cell:first-child { border-right: none; }
.side-specs-pair .cell:first-child::before {
  content: "";
  position: absolute;
  top: 20px; bottom: 0; right: 0;
  border-right: 1px solid var(--color-orange);
}

.side-specs-pair:last-child { border-bottom: 1.5px solid var(--color-orange); }
.side-specs-pair:last-child .cell::after { content: none; }
.side-specs-pair:last-child .cell:first-child { border-right: none; }
.side-specs-pair:last-child .cell:first-child::before {
  content: "";
  position: absolute;
  top: 0; bottom: 20px; right: 0;
  border-right: 1px solid var(--color-orange);
}
.side-specs-pair:last-child { position: relative; border-bottom: none; }
.side-specs-pair:last-child::after {
  content: "";
  position: absolute;
  left: 30px; right: 30px; bottom: 0;
  border-bottom: 1px solid var(--color-orange);
}

.side-specs .cell {
  padding: 14px 0px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.side-specs .cell i { color: var(--color-orange); font-size: 1.3rem; margin-bottom: 10px; }
.side-specs .cell strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-ink); }
.side-specs .cell span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-stone); margin-top: 4px; }

.quick-nav { display: flex; gap: 40px; width: 100%; margin-top: 30px; justify-content: center; }
.icon-btn-light {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-graphite);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}
.icon-btn-light i {
  font-size: 1.5rem;
  width: 64px; height: 64px;
  display: flex; 
  align-items: center; 
  justify-content: center;
  border: 1.5px solid var(--color-sand-deep);
  border-radius: 50%;
  color: var(--color-graphite);
  transition: all 0.3s var(--ease);
}
.icon-btn-light:hover { color: var(--color-orange); }
.icon-btn-light:hover i { border-color: var(--color-orange); background: var(--color-orange); color: var(--color-paper); transform: translateY(-3px); }

/* ---- Specs: a clean, square-celled grid (used elsewhere, kept for reuse) ---- */
.apartment-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-sand-deep);
}
.spec-cell {
  background: var(--color-paper);
  padding: 44px 20px;
  min-height: 170px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.spec-cell i { color: var(--color-orange); font-size: 1.7rem; margin-bottom: 14px; }
.spec-cell strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--color-ink); }
.spec-cell span { display: block; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-stone); margin-top: 5px; }

#about-section {
  scroll-margin-top: 0px; /* try smaller numbers to scroll further; larger to scroll less */
}

/* .about-top-pad { padding-top: 150px; }
@media (max-width: 480px) {
  .about-top-pad { padding-top: 70px; }
} */

/* ---- Feature checklist: compact, dark blueprint-grid panel (same texture
   technique as the projects.html banner, with orange grid lines) ---- */
.feature-panel {
  position: relative;
  background-color: var(--color-ink);
  background-image:
    linear-gradient(rgba(var(--color-orange-rgb),0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-orange-rgb),0.12) 1px, transparent 1px);
  background-size: 36px 36px;
  border-radius: var(--radius-lg);
  padding: 42px 46px;
  overflow: hidden;
}
.feature-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px 32px;
  position: relative;
  z-index: 2;
}
.feature-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.96rem;
  color: rgba(255,255,255,0.88);
}
.feature-checklist li i {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-orange);
  color: var(--color-paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem;
}

/* ---- Enquiry panel: dark blueprint-grid card, two-column, with a
   dedicated CTA box instead of one flat centered block ---- */
.enquire-panel {
  position: relative;
  background-color: var(--color-ink);
  background-image:
    linear-gradient(rgba(var(--color-orange-rgb),0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-orange-rgb),0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  border-radius: var(--radius-lg);
  padding: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
  overflow: hidden;
}
.enquire-panel::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -60px;
  width: 220px; height: 220px;
  border: 36px solid rgba(var(--color-orange-rgb),0.1);
  border-radius: 50%;
}
.enquire-text { position: relative; z-index: 2; max-width: 480px; }
.enquire-text .eyebrow { color: var(--color-orange-light); }
.enquire-text h3 { color: var(--color-paper); font-size: 1.7rem; margin-bottom: 12px; }
.enquire-text p { color: rgba(255,255,255,0.72); margin-bottom: 22px; }
.enquire-contact-row { display: flex; gap: 26px; flex-wrap: wrap; }
.enquire-contact-row a {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s;
}
.enquire-contact-row a:hover { color: var(--color-orange-light); }
.enquire-contact-row i { color: var(--color-orange); }

.enquire-cta-box {
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: 30px 34px;
  text-align: center;
  flex-shrink: 0;
}
.enquire-cta-box .listing-id {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 18px;
}

@media (max-width: 900px) {
  .apartment-intro-grid { grid-template-columns: 1fr; }
  .apartment-price-card { margin-top: -100px; }
  .apartment-specs-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid.alt-collage { grid-template-columns: repeat(2, 1fr); grid-template-rows: 220px 160px 160px; }
  .gallery-grid.alt-collage a:nth-child(1) { grid-column: 1 / span 2; }
  .gallery-grid.alt-collage a:nth-child(2) { grid-column: 1; grid-row: 2; }
  .gallery-grid.alt-collage a:nth-child(3) { grid-column: 2; grid-row: 2; }
  .gallery-grid.alt-collage a:nth-child(4) { grid-column: 1 / span 2; grid-row: 3; }
}
@media (max-width: 700px) {
  .properties-grid { grid-template-columns: 1fr; }
  .feature-panel { padding: 32px 26px; }
  .enquire-panel { padding: 40px 30px; text-align: center; justify-content: center; }
  .enquire-contact-row { justify-content: center; }
}

/* Enquiry modal */
.enquiry-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(var(--color-ink-rgb), 0.6);
  z-index: 999;
  /* align-items: center; */
  align-items: flex-start; /* was center */
  justify-content: center;
  padding: 20px;
}
.enquiry-modal.active { display: flex; }
.enquiry-modal-box {
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 480px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  margin-top: 12vh; /* pushes it down from the top — adjust to taste */
}
.enquiry-modal-close {
  position: absolute;
  top: 18px; right: 18px;
  background: none; border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--color-stone);
}
.enquiry-modal h3 { margin-bottom: 4px; }
.enquiry-modal-to { color: var(--color-stone); font-size: 0.9rem; margin-bottom: 20px; }
.enquiry-modal label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.enquiry-modal input,
.enquiry-modal textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--color-sand-deep);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.enquiry-toggle-cc {
  background: none; border: none;
  color: var(--color-orange);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
  padding: 0;
}
/* .enquiry-cc-row { display: flex; gap: 12px; margin-bottom: 14px; } */
.enquiry-cc-row {
  display: none;
  gap: 12px;
  margin-bottom: 14px;
}
.enquiry-cc-row:not([hidden]) {
  display: flex;
}
.enquiry-cc-row label { flex: 1; margin-bottom: 0; }
.enquiry-status { margin-top: 12px; font-size: 0.9rem; }
.enquiry-status.success { color: #2e7d32; }
.enquiry-status.error { color: #c62828; }

/* Copy-to-clipboard email "link" — styled to sit and behave exactly like
   the plain <a> tag it replaced */
/* .copy-email {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none; 
  display: inline;          
  vertical-align: baseline;
  line-height: inherit;
  transition: color 0.3s var(--ease);
}
.copy-email:hover {
  color: var(--color-orange);
}
.copy-email-confirm {
  font-size: 0.8rem;
  color: var(--color-orange);
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.copy-email-confirm.visible { opacity: 1; }

.enquire-email-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.enquire-contact-row .copy-email {
  color: rgba(255, 255, 255, 0.88);
}

.enquire-contact-row .copy-email:hover {
  color: var(--color-orange);
} */

.footer-bottom .footer-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom .footer-link:hover {
  color: var(--color-orange);
}
.footer-dot {
  margin: 0 6px;
  opacity: 0.5;
}

/* Disclaimer modal */
.disclaimer-modal {
  position: fixed;
  inset: 0;
  background: rgba(var(--color-ink-rgb), 0.6);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.disclaimer-modal.active {
  opacity: 1;
  visibility: visible;
}
.disclaimer-modal-box {
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(16px) scale(0.96);
  transition: transform 0.35s var(--ease);
}
.disclaimer-modal.active .disclaimer-modal-box {
  transform: translateY(0) scale(1);
}
.disclaimer-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-stone);
}
.disclaimer-modal-close:hover { color: var(--color-orange); }
.disclaimer-modal-box h3 {
  font-family: var(--font-display);
  margin-bottom: 18px;
  color: var(--color-ink);
}
.disclaimer-modal-box p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-graphite);
}

@media (max-width: 520px) {
  .disclaimer-modal-box {
    margin-top: 30px;
  }
}
.enquiry-terms-note {
  font-size: 0.78rem;
  color: var(--color-stone);
  margin-top: 14px;
  /* text-align: center; */
  margin-left: 5px;
}
.enquiry-terms-note a {
  color: var(--color-stone);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.enquiry-terms-note a:hover {
  color: var(--color-orange);
}

.policies-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.policies-tab {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 26px;
  border: 2px solid var(--color-mist);
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-graphite);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.policies-tab:hover,
.policies-tab.active {
  border-color: var(--color-orange);
  background: var(--color-orange);
  color: var(--color-paper);
}
@media (max-width: 596px) {
  .policies-tabs {
    flex-direction: column;
    align-content: center;
  }
  .policies-tab {
    max-width: 260px;
  }
}

.policies-panel {
  display: none;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  /* padding: 48px 56px; */
  padding: 20px 30px;
  box-shadow: 0 20px 50px rgba(28,28,28,0.08);
  border: 1px solid var(--color-sand-deep);
  max-width: 820px;
  line-height: 1.85;
  color: var(--color-graphite);
  font-size: 1rem;
}
.policies-panel.active {
  display: block;
  animation: policiesFadeIn 0.4s var(--ease);
}

.policies-panel h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 32px 0 16px;
  padding-left: 16px;
  border-left: 3px solid var(--color-orange);
}
.policies-panel h2:first-child { margin-top: 0; }

.policies-panel h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: 24px 0 10px;
}

.policies-panel p {
  margin-bottom: 18px;
}

.policies-panel strong,
.policies-panel b {
  color: var(--color-ink);
  font-weight: 700;
}

.policies-panel a {
  color: var(--color-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.policies-panel a:hover {
  opacity: 0.8;
}

.policies-panel ul,
.policies-panel ol {
  margin: 0 0 20px 4px;
  padding-left: 20px;
}
.policies-panel li {
  margin-bottom: 10px;
  padding-left: 6px;
}
.policies-panel ul li::marker {
  color: var(--color-orange);
}
.policies-panel ol li::marker {
  color: var(--color-orange);
  font-weight: 700;
}

.policies-panel hr {
  border: none;
  border-top: 1px solid var(--color-sand-deep);
  margin: 32px 0;
}

.policies-panel blockquote {
  border-left: 3px solid var(--color-sand-deep);
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  color: var(--color-stone);
}

/* LOGO INTRO */
.li-pretitle.li-pretitle-visible {
  opacity: 1;
}
.li-pretitle.li-traveling {
  transition: transform 3s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Matches the real .hero-pretitle span exactly on font/weight/size/
   letter-spacing/uppercase. Color intentionally differs — dark fill
   instead of white+stroke, since this sits on a plain light background
   rather than a photo. */
.li-pretitle span {
  font-family: 'Poppins', var(--font-display);
  font-weight: 100;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(0,0,0,0.6);
}

.li-pretitle-line1 {
  letter-spacing: 1.5em;
  margin-right: -1.5em;
}
.li-pretitle-line2 {
  letter-spacing: 0.50em;
  margin-right: -0.5em;
}
.li-pretitle span {
  font-size: clamp(1.4rem, 5vw, 2.4rem);
}

/* Travel — shared duration for logo-top and each stack piece */
.li-piece.li-traveling {
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.li-stack-piece.li-traveling {
  transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1); /* was 1.1s */
}

/* NEW — wraps li-bottom. Stays completely passive in layout: li-bottom
   inside it renders totally normally, so this wrapper's size is exactly
   whatever li-bottom's own natural size already was. */
.li-bottom-slot {
  position: relative;
}

.logo-intro.li-revealed .li-bottom-stack {
  opacity: 1;
}

/* A quick, smooth crossfade for the swap moment itself */
.li-bottom-stack,
.li-bottom.li-piece {
  transition: opacity 0.3s var(--ease), transform 1.6s var(--ease);
}

.li-stack-piece.li-visible {
  opacity: 1;
}

@keyframes liPulseIn {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
/* .li-piece.li-pulse-in, */
.li-stack-piece.li-pulse-in {
  animation: liPulseIn 1s ease-out forwards;
}

.li-piece.li-pulse-in {
    animation: liPulseIn 2s ease-out forwards;
}

/* ===== Homepage logo intro overlay ===== */
.logo-intro {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  /* align-items: flex-start; */
  justify-content: center;
  transition: background-color 1.8s ease-out;
}
.logo-intro.li-fade-out {
  background-color: rgba(255, 255, 255, 0);
  pointer-events: none;
}

.logo-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Base piece sizing/shape only — NO opacity or transition here anymore.
   Each piece's visibility is controlled entirely by JS adding/removing
   li-pulse-in or li-traveling, avoiding any base rule fighting with
   those states. */
.li-top,
.li-bottom {
  width: min(56vw, 380px);
  opacity: 0;
}

/* li-bottom itself is no longer part of the active animation — stays
   permanently invisible */
.li-bottom {
  opacity: 0;
}

/* Wrapper — purely structural, no opacity here (opacity lives on the
   individual pieces inside it instead) */
.li-bottom-slot {
  position: relative;
}
.li-bottom-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* Each stack piece — starts invisible, pulse-in reveals it */
.li-stack-piece {
  display: block;
  width: 100%;
  /* height: 33.333%; */
  /* object-fit: fill; */
  opacity: 0;
}

/* The pulse: small -> overshoot big -> settles to normal size */
@keyframes liPulseIn {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes liPulseInShift {
  0%   { opacity: 0; transform: scale(0.3) translateY(0); }
  40%  { opacity: 1; transform: scale(1.10) translateY(0); }   /* overshoot, no shift yet */
  100% { opacity: 1; transform: scale(1) translateY(-80px); } /* was -60px — must match shiftAmount exactly */
}
.li-top.li-pulse-shift {
  animation: liPulseInShift 5s ease-out forwards; /* duration gets overridden dynamically via JS below */
}

@keyframes liPulseInShiftStack {
  0%   { opacity: 0; transform: scale(0.3); }
  40%  { opacity: 1; transform: scale(1.10); }
  100% { opacity: 1; transform: scale(1); }
}
.li-stack-piece.li-pulse-shift {
  animation: liPulseInShiftStack 3s ease-out forwards; /* match your logo-top duration, or tune independently */
}

.li-stack-piece.li-pulse-in {
  animation: liPulseIn 0.6s ease-out forwards; /* unchanged — will revisit when we get to the stack pieces */
}

/* Add opacity into each existing travel transition, so it actually
   animates instead of snapping */
.li-top.li-traveling {
  transition: transform 2s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.5s ease-out;
}

/* NEW — the missing rule that hides li-top once the combined logo has
   crossfaded in. This existed before the CSS consolidation and got
   dropped by mistake — add it back: */
.logo-intro.li-combined-visible .li-top {
  opacity: 0;
}

/* Combined logo mark — instant position + crossfade, unchanged */
.li-combined {
  position: fixed;
  opacity: 0;
  transform: none;
  transition: opacity 0.3s var(--ease);
  z-index: 2;
}
.logo-intro.li-combined-visible .li-combined {
  opacity: 1;
}

.li-pretitle {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  /* transform: translateY(15px); NEW — starts slightly lower */
  z-index: 2;
  transition: opacity 2s var(--ease), transform 2s var(--ease); /* was just opacity 0.9s */
}
.li-pretitle.li-pretitle-visible {
  opacity: 1;
  transform: translateY(0); /* NEW — settles into place as it fades in */
}
.li-pretitle.li-traveling {
  transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.li-pretitle span {
  font-family: 'Poppins', var(--font-display);
  font-weight: 100;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(0,0,0,0.6);
  color: var(--color-paper);
  paint-order: stroke fill;
}

.hero-pretitle {
  transition: opacity 0.6s var(--ease);
}
body.intro-playing .hero-pretitle {
  opacity: 0;
}

body.intro-playing .home-header .logo-area img {
  opacity: 0;
}

.split-text-wrap {
  display: flex;
  flex-direction: column;
}

/* Subtle fade-out hint at the bottom edge when text is clamped and cut off */
.cyprus-clamped-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-paper));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.split-text-wrap.has-overflow .cyprus-clamped-text::after {
  opacity: 1;
}

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

.cyprus-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 40px;
  margin-left: 10px;
}
.cyprus-section-nav-link {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease);
}
.cyprus-section-nav-link::before {
  content: "";
  display: inline-flex;
  width: 7px;
  height: 7px;
  background: var(--color-orange);
  flex-shrink: 0;
  margin-right: 10px;
}

@media (max-width: 673px) {
  .cyprus-section-nav {
    gap: 10px;
  }
}
@media (max-width: 724px) {
  .cyprus-section-nav {
    flex-direction: column;
    gap: 10px; /* smaller than the current 24px */
  }
}
@media (hover: hover) {
  .cyprus-section-nav-link:hover {
    color: var(--color-orange-light);
  }
}

.cyprus-clamped-text {
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}

.cyprus-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-orange);
  cursor: pointer;
}
.cyprus-expand-btn:hover {
  opacity: 0.75;
}
.cyprus-expand-btn i {
  transition: transform 0.3s var(--ease);
}
.cyprus-expand-btn.expanded i {
  transform: rotate(180deg);
}

.split-layout.no-image .split-text-wrap {
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.cyprus-clamped-text {
  position: relative;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}
.cyprus-clamped-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-paper));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.cyprus-clamped-text.has-fade::after {
  opacity: 1;
}

.cyprus-links-block {
  margin-top: 20px;
}
.cyprus-links-intro {
  font-size: 0.95rem;
  color: var(--color-graphite);
  margin-bottom: 10px;
}
.cyprus-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cyprus-links-list li {
  position: relative;
  padding-left: 20px;
}
.cyprus-links-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-orange);
}
.cyprus-links-list a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s var(--ease);
}
.cyprus-links-list a:hover {
  color: var(--color-orange);
}

.about-cyprus-section .split-layout {
  align-items: flex-start;
}

@media (max-width: 970px) {
  /* Main slider's own arrows are gone entirely on these screens —
     navigation now happens exclusively via the thumbnail arrows. */
  .projects-slider-arrow {
    display: none;
  }

  /* Slider expands to fill the space the arrows used to occupy */
  .projects-slider {
    width: 100%;
  }

  /* Thumbnail row becomes the positioning context for the overlaid arrows */
  .projects-thumbs-row {
    position: relative;
  }
  .projects-thumbs-wrap {
    width: 100%; /* expands into the space its own arrows used to occupy */
  }

  /* Bare icon arrows, overlaid on top of the thumbnail strip itself */
  .projects-thumbs-arrow,
  .projects-thumbs-arrow:hover,
  .projects-thumbs-arrow:active,
  .projects-thumbs-arrow:focus {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .projects-thumbs-arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 5;
    width: auto;
    height: auto;
    padding: 10px;
    color: var(--color-paper);
    font-size: 1.7rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
    transition: color 0.1s var(--ease), transform 0.1s var(--ease);
  }
  .projects-thumbs-arrow.prev { left: 4px; }
  .projects-thumbs-arrow.next { right: 4px; }

  /* .projects-thumbs-arrow:hover {
    color: var(--color-orange) !important;
    transform: translateY(-50%) scale(1.15);
  } */
  @media (hover: hover) {
    .projects-thumbs-arrow:hover {
      color: var(--color-orange) !important;
      transform: translateY(-50%) scale(1.15);
    }
  }

  /* NEW — JS adds this briefly on click, then removes it */
  .projects-thumbs-arrow.flash-orange {
    color: var(--color-orange) !important;
    transform: translateY(-50%) scale(1.15);
  }

  .projects-thumbs-arrow.hidden {
    visibility: visible;
  }
}

@media (max-width: 480px) {
  /* Status badge — was font-size: 1.05rem; padding: 10px 20px; */
  .project-status {
    font-size: clamp(0.65rem, 3vw, 0.85rem);
    padding: clamp(6px, 2vw, 10px) clamp(12px, 4vw, 16px);
    top: 12px;
    left: 12px;
  }

  /* Project info (title/location) — estimated starting values, tune
     directly once you see it against your actual current sizing */
  .project-info {
    padding: clamp(12px, 4vw, 20px);
    left: 10px;
    bottom: 8px;
  }
  .project-info h3 {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
  }
  .project-info p {
    font-size: clamp(0.75rem, 3vw, 0.9rem);
  }

  /* Middle button — was padding: 18px 38px; font-size: 1.15rem; (disabled state) */
  .project-btn {
    font-size: clamp(0.75rem, 3.5vw, 0.95rem);
    padding: clamp(10px, 3vw, 14px) clamp(18px, 6vw, 26px);
  }
  .projects-card-disabled .project-btn {
    font-size: clamp(0.75rem, 3.5vw, 0.95rem);
    padding: clamp(10px, 3vw, 14px) clamp(18px, 6vw, 26px);
  }
}

@media (max-width: 1094px) { /*970*/
  /* Main slider's own arrows hide ONLY when a labeled thumbnail row
     actually exists to take over navigation — otherwise they stay as
     the fallback for floor plans without labels. */
  .has-fp-thumbs .floorplan-arrow {
    display: none;
  }

  .floorplan-slider {
    width: 100%;
  }

  .floorplan-thumbs-row {
    position: relative;
  }
  .floorplan-thumbs-scroll {
    width: 100%;
  }

  .floorplan-thumbs-arrow,
  .floorplan-thumbs-arrow:hover,
  .floorplan-thumbs-arrow:active,
  .floorplan-thumbs-arrow:focus {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .floorplan-thumbs-arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 5;
    width: auto;
    height: auto;
    padding: 10px;
    color: var(--color-paper);
    font-size: 1.7rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
    transition: color 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .floorplan-thumbs-arrow.prev { left: 4px; }
  .floorplan-thumbs-arrow.next { right: 4px; }

  .floorplan-thumbs-arrow.flash-orange {
    color: var(--color-orange) !important;
    transform: translateY(-50%) scale(1.15);
  }

  .floorplan-thumbs-arrow.hidden {
    visibility: visible;
  }
}

@media (max-width: 970px) and (hover: hover) {
  .floorplan-thumbs-arrow:hover {
    color: var(--color-orange) !important;
    transform: translateY(-50%) scale(1.15);
  }
}

@media (max-width: 500px) {
  .gallery-split {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  /* Reorders visually without touching the HTML — main image first,
     thumbnail row second, regardless of their actual DOM order. */
  .gallery-main-display {
    order: 1;
    width: 100%;
    flex: none;
    height: 320px; /* was 520px — too tall for a phone viewport */
  }
  .gallery-thumbs-col {
    order: 2;
    width: 100%;
  }

  /* Thumbnail column becomes a horizontal row */
  .gallery-thumbs-scroll {
    height: auto;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .gallery-thumbs-track {
    flex-direction: row;
  }
  .gallery-thumb {
    flex-shrink: 0;
  }
  .gallery-thumb img {
    width: 90px;
    height: 70px;
  }

  /* Arrows flip from vertical (top/bottom, horizontally centered) to
     horizontal (left/right, vertically centered) */
  .gallery-thumbs-arrow {
    top: 50%;
    left: auto;
    transform: translateY(-50%);
  }
  .gallery-thumbs-arrow.up {
    left: 4px;
    top: 50%; /* overrides the desktop top: 10px, as long as this media query comes after the base rule in the file */
  }
  .gallery-thumbs-arrow.down {
    left: auto;
    right: 4px;
  }

  .gallery-thumbs-arrow,
  .gallery-thumbs-arrow:hover,
  .gallery-thumbs-arrow:active,
  .gallery-thumbs-arrow:focus {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .gallery-thumbs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: auto;
    height: auto;
    padding: 10px;
    color: var(--color-paper);
    font-size: 1.7rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
    transition: color 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .gallery-thumbs-arrow.up {
    left: 4px;
  }
  .gallery-thumbs-arrow.down {
    left: auto;
    right: 4px;
  }

  /* .gallery-thumbs-arrow:hover {
    color: var(--color-orange) !important;
    transform: translateY(-50%) scale(1.15);
  } */

  .gallery-thumbs-arrow.up i,
  .gallery-thumbs-arrow.down i {
    display: inline-block;
    transform: rotate(-90deg);
  }

  /* .gallery-thumbs-arrow.hidden {
    visibility: visible;
  } */
  .gallery-thumbs-arrow.flash-orange {
    color: var(--color-orange) !important;
    transform: translateY(-50%) scale(1.15);
  }
}

@media (max-width: 500px) and (hover: hover) {
  .gallery-thumbs-arrow:hover {
    color: var(--color-orange) !important;
    transform: translateY(-50%) scale(1.15);
  }
}

#gallery-thumbs-scroll {
  overflow-anchor: none;
}

.floorplan-download-row .js-confirm-download,
.floorplan-download-row .js-enquire,
.fp-panel-enquire-row .btn {
  font-size: clamp(0.75rem, 2.5vw, 1rem);
  padding: clamp(8px, 3vw, 12px) clamp(16px, 4vw, 28px);
}

.floorplan-download-row {
  margin-top: clamp(16px, 5vw, 32px);
  display: flex;
  justify-content: center;
  gap: clamp(8px, 3vw, 16px);
  flex-wrap: wrap;
}

.fp-panel-enquire-row {
  margin-top: clamp(12px, 4vw, 24px);
  padding-top: clamp(8px, 3vw, 16px);
  border-top: 1px solid var(--color-sand-deep);
  text-align: right;
}

.lightbox-close {
  z-index: 10;
  color: #fff;
  /* -webkit-text-stroke: 1px rgba(0,0,0,0.4); */
  text-shadow:
    1px 0 0 rgba(0,0,0,0.4),
    -1px 0 0 rgba(0,0,0,0.4),
    0 1px 0 rgba(0,0,0,0.4),
    0 -1px 0 rgba(0,0,0,0.4);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox-close:hover {
  color: var(--color-orange) !important;
  transform: scale(1.15);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  width: auto;
  height: auto;
  border-radius: 0;
  padding: 10px;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  -webkit-text-stroke: 1px rgba(0,0,0,0.4);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox-nav {
  z-index: 10;
  width: 50px;
  height: 50px;
  /* border-radius: 50%; */
  font-size: 1.3rem;
  cursor: pointer;
}
/* .lightbox-nav:hover {
  color: var(--color-orange) !important;
  transform: translateY(-50%) scale(1.25);
  -webkit-text-stroke: 0px;
} */
.lightbox-nav.prev { left: 0; }
.lightbox-nav.next { right: 0; }

@media (hover: hover) {
  .lightbox-nav:hover {
    color: var(--color-orange) !important;
    transform: translateY(-50%) scale(1.25);
    -webkit-text-stroke: 0px;
  }
}

/* NEW — JS adds this briefly on click, then removes it */
.lightbox-nav.flash-active {
  color: var(--color-orange) !important;
  transform: translateY(-50%) scale(1.25);
  -webkit-text-stroke: 0px;
}

/* @media (max-width: 640px) {
  body.single-project .page-banner,
  body.single-project .breadcrumb,
  body.single-project .project-section {
    zoom: 0.85;
  }
} */
@media (max-width: 640px) {
  .project-card {
    padding: clamp(20px, 6vw, 38px) clamp(20px, 6vw, 42px);
    min-width: 0; /* removes the 450px floor that was forcing overflow on phones */
    max-width: 100%;
  }

  .project-card > p {
    font-size: clamp(0.8rem, 3vw, 1rem);
    margin-bottom: clamp(20px, 4vw, 26px);
  }

  .project-icons {
    gap: clamp(10px, 2vw, 22px);
  }

  .icon-btn {
    gap: clamp(4px, 1.5vw, 8px);
    /* font-size: clamp(0.55rem, 2vw, 0.76rem); */
  }

  .icon-btn i {
    font-size: clamp(0.85rem, 3.5vw, 1.2rem);
    width: clamp(30px, 9vw, 44px);
    height: clamp(30px, 9vw, 44px);
  }
    .project-card .eyebrow {
    font-size: clamp(0.65rem, 2.5vw, 0.85rem);
    margin-bottom: 10px;
    margin-top: 25px;
  }

  .project-card h1 {
    font-size: clamp(0.9rem, 6vw, 1.8rem);
    margin-bottom: clamp(4px, 1.5vw, 6px);
  }

  .credentials-list li {
    font-size: clamp(0.85rem, 3vw, 0.95rem);
    line-height: 1.5;
  }
}

/* @media (max-width: 572px) {
  .project-icons {
    justify-content: center;
  }
} */

@media (max-width: 782px) {
  .project-hero {
    /* padding-bottom: clamp(40px, 25vw, 100px); */
    padding-bottom: clamp(50px, 50vw, 150px);
  }
}

@media (max-width: 640px) {
  .split-text p {
    font-size: clamp(1rem, 3.5vw, 1.10rem);
  }

  .section-note p {
    font-size: clamp(1rem, 3.5vw, 1.10rem);
    line-height: 1.55;
  }
}

.para-clamp-text {
  position: relative; /* NEW — anchors the gradient overlay */
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}
/* NEW — soft fade-out at the clipped edge */
.para-clamp-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-paper));
}
.para-clamp-text.has-fade::after {
  opacity: 1;
}
/* Key Benefits sits on the alt/sand background, not plain paper — give
   its fade a matching solid color so it doesn't show a visible seam. */
#benefits .para-clamp-text::after,
#features .para-clamp-text::after {
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-sand));
}

.para-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-orange);
  cursor: pointer;
}
.para-expand-btn:hover {
  opacity: 0.75;
}
.para-expand-btn i {
  transition: transform 0.3s var(--ease);
}
.para-expand-btn.expanded i {
  transform: rotate(180deg);
}

.para-clamp-outer {
  flex: 1;
  min-width: 0;
}

@media (max-width: 1090px) {
  .benefits-row {
    gap: clamp(16px, 5vw, 34px) clamp(10px, 1vw, 20px);
  }
  .benefit-item {
    flex: 1 1 clamp(80px, 22vw, 130px);
  }
  .benefit-item i {
    font-size: clamp(1.4rem, 6vw, 2.15rem);
    margin-bottom: clamp(10px, 3vw, 20px);
  }
  .benefit-stat {
    font-size: clamp(1.1rem, 4.5vw, 1.65rem);
  }
  .benefit-stat small {
    font-size: clamp(0.65rem, 2.5vw, 0.85rem);
  }
  .benefit-label {
    font-size: clamp(0.6rem, 2.2vw, 0.76rem);
    margin-top: clamp(4px, 1.5vw, 8px);
  }
}

@media (max-width: 640px) {
  .feature-checklist {
    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 40vw, 210px), 1fr));
    gap: clamp(10px, 3vw, 16px) clamp(16px, 5vw, 32px);
  }
  .feature-checklist li {
    gap: clamp(8px, 2.5vw, 12px);
    font-size: clamp(1rem, 3vw, 1.1rem);
  }
  .feature-checklist li i {
    width: clamp(18px, 5vw, 24px);
    height: clamp(18px, 5vw, 24px);
    font-size: clamp(0.5rem, 2vw, 0.66rem);
  }
}

@media (max-width: 900px) {
  .location-layout {
    flex-direction: column;
    align-items: stretch; /* overrides the inherited center — this is the actual fix for the shrinking */
    gap: 24px;
  }

  .location-map {
    width: calc(100% - 40px); /* almost full width, with breathing room on both sides */
    margin: 0 auto;
  }
  .location-map iframe {
    height: 300px; /* proportionally smaller than the 380px desktop height */
  }

  .location-details {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; /* centers the details as a group below the map */
    gap: 16px 32px;
    width: 100%;
  }
}

.icon-btn.flash-active { color: var(--color-orange-light); }
.icon-btn.flash-active i { border-color: var(--color-orange); background: var(--color-orange); color: var(--color-paper); transform: translateY(-3px); }

.credentials-trigger-text.popup-open {
  color: var(--color-orange);
  opacity: 1;
}

.credentials-popup-close.flash-active { color: var(--color-orange); }

@media (max-width: 1289px) {
  .terms-banner .container {
    transform: translateX(min(30px, calc((1289px - 100vw) * 0.08)));
  }
}

@media (max-width: 480px) {
  .enquiry-modal {
    padding: 12px;
  }
  .enquiry-modal-box {
    padding: clamp(20px, 6vw, 40px);
    margin-top: 12vh; /* kept as requested */
  }
  .enquiry-modal-close {
    top: clamp(10px, 3vw, 18px);
    right: clamp(10px, 3vw, 18px);
    font-size: clamp(1.2rem, 5vw, 1.6rem);
  }
  .enquiry-modal h3 {
    margin-bottom: clamp(2px, 1vw, 4px);
  }
  .enquiry-modal-to {
    font-size: clamp(0.75rem, 3vw, 0.9rem);
    margin-bottom: clamp(12px, 4vw, 20px);
  }
  .enquiry-modal label {
    font-size: clamp(0.75rem, 3vw, 0.85rem);
    margin-bottom: clamp(10px, 3vw, 14px);
  }
  .enquiry-modal input,
  .enquiry-modal textarea {
    margin-top: clamp(4px, 1.5vw, 6px);
    padding: clamp(8px, 2.5vw, 10px) clamp(10px, 3vw, 12px);
    font-size: clamp(0.85rem, 3.5vw, 0.95rem);
  }
  .enquiry-toggle-cc {
    font-size: clamp(0.75rem, 3vw, 0.85rem);
    margin-bottom: clamp(10px, 3vw, 14px);
  }
  .enquiry-cc-row {
    gap: clamp(8px, 2.5vw, 12px);
    margin-bottom: clamp(10px, 3vw, 14px);
  }
  .enquiry-status {
    margin-top: clamp(8px, 2.5vw, 12px);
    font-size: clamp(0.8rem, 3vw, 0.9rem);
  }
  .enquiry-terms-note {
    font-size: clamp(0.68rem, 2.5vw, 0.78rem);
    margin-top: clamp(10px, 3vw, 14px);
  }
  .enquiry-modal-box .btn {
    font-size: clamp(0.75rem, 3vw, 0.88rem);
    padding: clamp(10px, 3vw, 16px) clamp(18px, 5vw, 34px);
  }
}

@media (max-width: 480px) {
  .approach-bubble-inner {
    margin-top: clamp(14px, 4vw, 22px);
    margin-left: clamp(3px, 1.5vw, 6px);
    padding: clamp(16px, 5vw, 24px) clamp(18px, 5vw, 30px) clamp(16px, 5vw, 24px) clamp(20px, 6vw, 32px);
    border-left-width: clamp(3px, 1vw, 4px);
  }

  .approach-bubble-inner::before {
    border-width: 0 clamp(14px, 4vw, 22px) clamp(14px, 4vw, 22px) 0;
  }

  .approach-bubble-inner::after {
    /* top: clamp(-5px, -1.5vw, -6px); */
    /* left: clamp(18px, 5vw, 30px); */
    width: clamp(9px, 2.5vw, 12px);
    height: clamp(9px, 2.5vw, 12px);
  }

  .approach-bubble-inner p {
    font-size: clamp(1rem, 3.5vw, 1.10rem);
    line-height: 1.6;
  }
}

@media (max-width: 770px) {
  .page-banner::before {
    bottom: 15px;
    left: 15px;
  }
  .page-banner::after {
    top: 19px;
    right: 19px;
  } 
}

/* LIGHTBOX */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;

  display: flex;
  align-items: center;
  justify-content: center;

  background: white;
  overflow: hidden;

  overscroll-behavior: contain;
  touch-action: manipulation;

  opacity: 0;
  visibility: hidden;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}


/* SLIDER VIEWPORT */
.lightbox-track {
  display: flex;

  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;

  height: 100%;
  align-self: stretch;

  /* overflow: hidden; */

  transition: transform 0.4s var(--ease);
}


/* INDIVIDUAL SLIDE */
.lightbox-slide {
  flex: 0 0 100%;

  width: 100%;
  min-width: 100%;
  max-width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}


/* IMAGE */
.lightbox-slide img {
  max-width: 92vw;
  max-height: 92vh;

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

  transform: scale(1.28);
  transition: transform 0.35s var(--ease);
}

/* Gallery track hidden entirely when viewing a single standalone image */
.lightbox.single-image-mode .lightbox-track {
  display: none;
}

/* The standalone single-image-mode img should likewise stay hidden
   UNLESS single-image-mode is actually active */
.lightbox > img {
  display: none;
}
.lightbox.single-image-mode > img {
  display: block;
}

.availability-table-wrap {
  overflow-x: auto;
  overflow-y: visible; /* NEW — prevents the implicit overflow-y: auto that was trapping the sticky header */
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(28,28,28,0.10);
  border: 1px solid var(--color-sand-deep);
  scrollbar-color: var(--color-orange) transparent;
  scrollbar-width: thin;
}
.availability-table-wrap::-webkit-scrollbar {
  height: 6px;
}
.availability-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.availability-table-wrap::-webkit-scrollbar-thumb {
  background: var(--color-orange);
  border-radius: 10px;
}

.availability-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  white-space: nowrap;
}

.availability-table thead {
  background: var(--color-ink);
}
.availability-table th {
  padding: 16px 18px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-paper);
  white-space: normal;
}

.availability-table td {
  padding: 16px 18px;
  border-top: 1px solid var(--color-sand-deep);
  color: var(--color-graphite);
}

.availability-table tbody tr {
  background: var(--color-paper);
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.availability-table tbody tr:nth-child(even) {
  background: var(--color-sand);
}

@media (hover: hover) {
  .availability-table tbody tr:hover {
    background: rgba(var(--color-orange-dark-rgb), 0.3);
  }
}

.availability-floor {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
}
.availability-unit {
  font-weight: 600;
  color: var(--color-ink);
}
.availability-total {
  font-weight: 600;
  color: var(--color-ink);
}
.availability-price {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-orange-dark);
}

.availability-status-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.availability-status-available {
  background: rgba(46,125,50,0.12);
  color: #2e7d32;
}
.availability-status-reserved {
  background: rgba(var(--color-orange-rgb), 0.14);
  color: var(--color-orange-dark);
}
.availability-status-sold {
  background: rgba(28,28,28,0.08);
  color: var(--color-stone);
}

/* Sold-out rows: visually muted, not clickable */
.availability-table tbody tr.is-sold {
  cursor: default;
}
.availability-table tbody tr.is-sold td {
  color: var(--color-mist);
}

/* Floor cell stays fully colored, even on a sold row — UNLESS the
   entire floor is sold, in which case it mutes too. */
.availability-table tbody tr.is-sold .availability-floor {
  color: var(--color-ink);
}
.availability-table tbody tr.is-sold .availability-floor.availability-floor-all-sold {
  color: var(--color-mist);
}
@media (hover: hover) {
  .availability-table tbody tr:not(.is-sold):hover td:nth-child(2) {
    background: var(--color-mist);
  }
}
.availability-table tbody tr.row-active-touch {
background: rgba(var(--color-orange-dark-rgb), 0.2);
}
.availability-table tbody tr:not(.is-sold).row-active-touch td:nth-child(2) {
  background: var(--color-mist);
}

.availability-table tbody tr.is-sold:hover {
  background: var(--color-paper);
}
.availability-table tbody tr.is-sold:nth-child(even):hover {
  background: var(--color-sand);
}

.availability-table th,
.availability-table td {
  text-align: center;
}
/* 
.availability-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}

.availability-toggle-btn i {
  transition: transform 0.3s var(--ease);
}
.availability-toggle-btn.open i {
  transform: rotate(180deg);
}

#availability {
  padding: 0;
} */

.fp-roof-terrace-heading {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 6px;
  color: var(--color-ink);
}
.fp-roof-terrace-list {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fp-roof-terrace-list li {
  position: relative;
  padding-left: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  color: var(--color-graphite);
}
.fp-roof-terrace-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 7px;
  height: 7px;
  background: var(--color-orange);
}

.fp-roof-terrace-block {
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  width: 100%;
  flex-basis: 100%;
}

.fp-popup-areas > div:not(.fp-roof-terrace-block) {
  display: flex;
  justify-content: space-between;
}

.fp-roof-terrace-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fp-roof-terrace-list li {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.availability-property-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(var(--color-ink-rgb), 0.6);
  z-index: 999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.availability-property-modal.active {
  display: flex;
}
.availability-property-modal-box {
  position: relative;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 30px;
  top: 40px;
}
.availability-property-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-stone);
}
.availability-property-modal-close:hover {
  color: var(--color-orange);
}

@media (max-width: 600px) {
  .availability-property-modal-box {
    padding: clamp(16px, 5vw, 30px);
    /* max-width: clamp(280px, 85vw, 480px); */
    max-height: clamp(60vh, 85vh, 88vh);
  }
  .availability-property-modal-box .fp-apartment-details {
    font-size: clamp(0.8rem, 3.5vw, 1rem);
  }
}
/* 
.availability-property-modal.stacked-below {
  background: none;
  align-items: flex-start;
  z-index: 1000;
  pointer-events: none;
}
.availability-property-modal.stacked-below .availability-property-modal-box {
  pointer-events: auto;
  transition: top 0.4s var(--ease), max-height 0.4s var(--ease);
}

#enquiry-modal.stacked-mode {
  align-items: flex-start;
}
#enquiry-modal.stacked-mode .enquiry-modal-box {
  margin-top: 0;
  transition: top 0.3s var(--ease);
}

@media (max-height: 785px) {
  #enquiry-modal.stacked-mode .enquiry-modal-box {
    padding: 12px;
  }
  .availability-property-modal.stacked-below .availability-property-modal-box {
    padding: 12px;
  }
  #enquiry-modal.stacked-mode .enquiry-modal-box h3,
  #enquiry-modal.stacked-mode .enquiry-modal-box .enquiry-modal-to,
  #enquiry-modal.stacked-mode .enquiry-modal-box label {
    margin-bottom: 8px;
  }
}

@media (max-width: 520px) {
  #enquiry-modal.stacked-mode .enquiry-modal-box {
    max-width: calc(100% - 27px);
  }
  .availability-property-modal.stacked-below .availability-property-modal-box {
    max-width: calc(100% - 27px);
  }
} */

/* .availability-modal-flat-header {
  display: none;
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-orange);
}
.availability-property-modal.stacked-below .availability-modal-flat-header {
  display: block;
} */

.availability-property-modal.stacked-below .fp-apartment-details {
  margin-top: 32px;
}

/* Hide "Flat Enquiry" ONLY in the stacked state — the normal,
   standalone availability modal keeps it. */
.availability-property-modal.stacked-below .fp-panel-enquire-row {
  display: none;
}

@media (min-width: 768px) {
  #enquiry-modal.stacked-mode .enquiry-modal-box {
    max-width: 600px;
    padding: 40px;
    font-size: 1.05rem;
  }
  .availability-property-modal.stacked-below .availability-property-modal-box {
    max-width: 600px;
    padding: 40px;
    font-size: 1.05rem;
  }

  /* .availability-modal-flat-header {
    font-size: 1.3rem;
  } */
}

.availability-table th:nth-child(2),
.availability-table td:nth-child(2) {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit; /* pulls whatever background the row already has (zebra-striping, hover, sold-out, active) so it doesn't look mismatched against the scrolling content behind it */
}

.availability-table thead th:nth-child(2) {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--color-ink); /* explicit, not inherited — matches thead's actual color directly */
}

.availability-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-ink); /* explicit, not inherited — same lesson as before */
}

.brochure-flipbook-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Background — matching the site's dark accent color instead of the plugin's default grey */
.brochure-flipbook-wrap [class*="real3dflipbook"],
.brochure-flipbook-wrap .flipbook-main-wrapper {
  /* background: var(--color-ink) !important; */
  background: var(--color-paper) !important;
}

.skin-color-bg {
  background: var(--color-paper) !important;
}

/* Arrows — no background circle ever, orange icon, zoom on hover/click */
.brochure-flipbook-wrap .flipbook-right-arrow,
.brochure-flipbook-wrap .flipbook-left-arrow {
  background: transparent !important;
  transition: transform 0.25s ease !important;
}

.brochure-flipbook-wrap .flipbook-icon {
  fill: var(--color-orange) !important;
}

@media (hover: hover) {
  .brochure-flipbook-wrap .flipbook-right-arrow:hover,
  .brochure-flipbook-wrap .flipbook-left-arrow:hover {
    background: transparent !important;
    transform: scale(1.25) !important;
  }
}

.brochure-flipbook-wrap .flipbook-right-arrow:active,
.brochure-flipbook-wrap .flipbook-left-arrow:active {
  background: transparent !important;
  transform: scale(1.25) !important;
}

.split-text .js-enquire {
  margin-top: clamp(16px, 5vw, 32px);
  font-size: clamp(0.75rem, 2.5vw, 1rem);
  padding: clamp(8px, 3vw, 12px) clamp(16px, 4vw, 28px);
}

.brochure-flipbook-wrap .flipbook-menu-btn-wrapper {
  width: 50px !important;
  height: 30px !important;
}
.brochure-flipbook-wrap .flipbook-icon {
  width: 1.4em !important;
  height: 1.4em !important;
}

.flipbook-border {
    border: 0px !important;
}

.availability-table-wrap {
  overflow: auto;                      /* both axes, explicitly */
  max-height: min(70vh, 468px);        /* the header now has something to stick within */
  /* overscroll-behavior: contain;    */
}

/* border-collapse drops borders on sticky cells in Chrome and Safari, so the
   header's edge scrolls away with the rows. Use separate + a box-shadow rule. */
.availability-table { border-collapse: separate; border-spacing: 0; }

/* the corner cell — sticky in both directions, so it must outrank both */
.availability-table thead th:nth-child(2) {
  left: 0;
  z-index: 4;
}

.enquiry-modal-tabs {
  display: none; /* JS sets this to flex only when opened from an availability row */
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-sand-deep);
}
.enquiry-modal-tab {
  background: none;
  border: none;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-stone);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.enquiry-modal-tab.active {
  color: var(--color-orange-dark);
  border-bottom-color: var(--color-orange);
}
@media (hover: hover) {
  .enquiry-modal-tab:hover {
    color: var(--color-orange);
  }
}

body.intro-pretitle-hidden .hero-pretitle {
  opacity: 0;
}

body.intro-logo-hidden .home-header .logo-area img {
  opacity: 0;
}

#enquiry-tab-panel-summary {
  max-height: 60vh;
  /* overflow-y: auto; */
}

@media (max-width: 600px) {
  #enquiry-tab-panel-summary {
    /* max-height: clamp(50vh, 70vh, 80vh); */
    max-height: clamp(60vh, 67vh, 88vh);
    font-size: clamp(0.8rem, 3.5vw, 1rem);
  }
}

/* ===== Container ===== */
.cky-preference-center {
  background-color: var(--color-paper) !important;
  border-color: var(--color-sand-deep) !important;
  color: var(--color-graphite) !important;
  border-radius: var(--radius-lg) !important;
  width: 100% !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}

/* ===== Header ===== */
.cky-preference-header {
  padding: 20px 24px 12px !important;
}
.cky-preference-title {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}
.cky-btn-close img {
  filter: opacity(0.6);
}

/* ===== Body text ===== */
.cky-preference-content-wrapper,
.cky-preference-content-wrapper p {
  color: var(--color-graphite) !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
}
.cky-show-desc-btn {
  color: var(--color-orange) !important;
}
.cky-horizontal-separator {
  border-color: var(--color-sand-deep) !important;
}

/* ===== Accordion (Necessary / Analytics) ===== */
.cky-accordion-btn {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
}
.cky-accordion-header-des,
.cky-accordion-header-des p {
  color: var(--color-stone) !important;
  font-size: 0.8rem !important;
}
.cky-always-active {
  color: #2e7d32 !important; /* matches the site's existing "Available" status green */
}

/* Toggle switch — orange when active, matching the site's accent */
.cky-switch input:checked {
  background-color: var(--color-orange) !important;
}

/* ===== Cookie detail tables ===== */
.cky-audit-table {
  background-color: var(--color-sand) !important;
  border-color: var(--color-sand-deep) !important;
  color: var(--color-graphite) !important;
  border-radius: var(--radius-sm) !important;
}
.cky-cookie-des-table div {
  font-size: 0.78rem !important;
}

/* ===== Footer buttons ===== */
.cky-footer-shadow {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--color-paper) 100%) !important;
}

.cky-btn {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 16px !important;
}

.cky-btn-accept {
  background-color: var(--color-orange) !important;
  border-color: var(--color-orange) !important;
  color: var(--color-paper) !important;
}

.cky-btn-reject {
  background-color: transparent !important;
  border-color: var(--color-stone) !important;
  color: var(--color-ink) !important;
}

.cky-btn-preferences {
  background-color: var(--color-paper) !important;
  border-color: var(--color-orange) !important;
  color: var(--color-orange) !important;
}

@media (hover: hover) {
  .cky-btn-preferences:hover,
  .cky-btn-reject:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
  }

  .cky-btn-close:hover {
    transform: scale(1.2);
  }
  .cky-btn-close:hover img {
    filter: brightness(0) saturate(100%) invert(56%) sepia(89%) saturate(1573%) hue-rotate(348deg) brightness(97%) contrast(96%);
  }
}
.cky-btn-close {
  transition: transform 0.25s var(--ease);
}
.cky-btn-close img {
  transition: filter 0.25s var(--ease);
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
  .cky-preference-center {
    width: 340px !important;
    max-height: 65vh !important;
  }
  .cky-preference-header {
    padding: 16px 18px 10px !important;
  }
  .cky-preference-title {
    font-size: 1rem !important;
  }
  .cky-prefrence-btn-wrapper {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .cky-btn {
    width: 100% !important;
  }
}

[data-cky-tag="detail-powered-by"] {
  display: none !important;
}

[data-cky-tag="powered-by"] {
  display: none !important;
}

div:has(> [data-cky-tag="powered-by"]) {
  padding-bottom: 0 !important;
}

/* ===== Container ===== */
.cky-notice {
  background-color: var(--color-paper) !important;
  max-width: 480px !important;
}

/* ===== Title & description ===== */
.cky-title {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}
.cky-notice-des,
.cky-notice-des p {
  color: var(--color-graphite) !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
}

/* ===== Buttons — same hierarchy as the Preference Centre ===== */
.cky-btn {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 16px !important;
}

/* Accept All — primary, filled orange */
.cky-notice-btn-wrapper .cky-btn-accept {
  background-color: var(--color-orange) !important;
  border-color: var(--color-orange) !important;
  color: var(--color-paper) !important;
}

/* Reject All — secondary, neutral outline */
.cky-notice-btn-wrapper .cky-btn-reject {
  background-color: transparent !important;
  border-color: var(--color-stone) !important;
  color: var(--color-ink) !important;
}

/* Customise — matches "Save My Preferences" treatment from before */
.cky-notice-btn-wrapper .cky-btn-customize {
  background-color: var(--color-paper) !important;
  border-color: var(--color-orange) !important;
  color: var(--color-orange) !important;
}

/* ===== Hover states — same pattern as the Preference Centre ===== */
@media (hover: hover) {
  .cky-notice-btn-wrapper .cky-btn-accept:hover {
    background-color: var(--color-orange-dark) !important;
    border-color: var(--color-orange-dark) !important;
  }
  .cky-notice-btn-wrapper .cky-btn-reject:hover {
    background-color: var(--color-paper) !important;
    border-color: var(--color-orange) !important;
    color: var(--color-orange) !important;
  }
  .cky-notice-btn-wrapper .cky-btn-customize:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--color-orange) !important;
    color: var(--color-orange) !important;
  }
}

/* ===== Responsive ===== */
@media (max-width: 480px) {
  .cky-notice-btn-wrapper {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .cky-notice-btn-wrapper .cky-btn {
    width: 70% !important;
    max-width: 220px !important;
  }
}

.cky-notice-content-wrapper {
  animation: ckyNoticeSlideUp 1s var(--ease);
}

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

.cky-consent-container {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
body.cookie-banner-ready .cky-consent-container {
  opacity: 1;
  pointer-events: auto;
}

@media (orientation: landscape) {
  .projects-card {
    aspect-ratio: 5/3;
  }
}

.projects-thumbs-row.projects-compact-gap {
  margin: 10px 0 20px; /* reduced from the default 24px 0 50px */
}

@media (max-width: 767px) and (orientation: landscape) {
  .project-status {
    left: auto;
    top: 10px;
    right: 18px;
  }
}

@media (max-width: 480px) {
  #enquiry-modal:has(.enquiry-modal-tabs[style*="display: flex"]) .enquiry-modal-box {
    max-height: 85vh; /* adjust this value to taste */
  }
}

@media (orientation: landscape) and (min-height: 800px) {
  #enquiry-modal:has(.enquiry-modal-tabs[style*="display: flex"]) .enquiry-modal-box {
    max-height: 80vh;
    padding: 20px;
    margin-top: 9vh;
  }
}

@media (orientation: landscape) and (max-height: 800px) {
  #enquiry-modal:has(.enquiry-modal-tabs[style*="display: flex"]) .enquiry-modal-box {
    max-height: 78vh;
    padding: 15px;
    margin-top: 9vh;
  }
}

@media (orientation: landscape) {
  .li-top,
  .li-bottom {
    width: 33vh; /* switched from a width-based unit to a HEIGHT-based one, since height is now the constrained dimension */
  }
}

@media (orientation: landscape) {
  .hero-scroll-cue {
    bottom: 25px;
  }
}

@media (orientation: landscape) {
  .lightbox.active #lightbox-single-img {
    transform: scale(1.0); /* reduced from 1.28 — adjust this number to taste */
  }
}

@media (max-width: 480px) {
  .hero-slider {
    margin-top: 0px;
  }
  .hero-pretitle {
    margin-bottom: 40px;
  }
  .page-banner {
    margin-top: 90px;
  }
}

@media (max-width: 1024px) {
  .page-banner {
    margin-top: 85px;
  }
} 

@media (max-width: 480px) or (orientation: landscape) {
  .home-header .header-wrap {
    height: 100px;
  }
  .hero-pretitle {
    margin-bottom: 50px;
  }
}

@media (orientation: landscape) {
  .page-banner {
    margin-top: 90px;
  }
}