/* ============================================================
   COVALENT BOND — SHARED COMPONENT STYLES
   Session 2 component library. Mobile-first (min-width queries).
   ============================================================ */

/* Hide custom elements until upgraded to prevent FOUC */
cb-status-pill:not(:defined),
cb-cta:not(:defined),
cb-section-heading:not(:defined),
cb-stats-strip:not(:defined),
cb-stat:not(:defined),
cb-project-card:not(:defined),
cb-unit-card:not(:defined),
cb-site-header:not(:defined),
cb-site-footer:not(:defined) { visibility: hidden; }

/* ── StatusPill ─────────────────────────────────────────── */
.cb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(6, 6, 6, 0.72);
  border: 1px solid var(--gold);
  border-radius: 0;
  white-space: nowrap;
}
.cb-pill--now-selling,
.cb-pill--pre-launch { border-color: var(--gold); color: var(--text); }
.cb-pill--limited-units { border-color: #c47070; color: #e8c8c8; }
.cb-pill--sold-out { border-color: var(--tm); color: var(--td); }
.cb-pill--delivered { border-color: #7abf94; color: #d8efde; }
.cb-pill--coming-soon { border-color: rgba(240, 234, 224, 0.4); color: rgba(240, 234, 224, 0.6); }
.cb-pill__dot {
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── CTAButton ──────────────────────────────────────────── */
.cb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 24px;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cb-cta--primary {
  border-color: var(--gold);
  color: var(--text);
}
.cb-cta--primary:hover,
.cb-cta--primary:focus-visible {
  background: var(--gold);
  color: var(--black);
}
.cb-cta--secondary {
  color: var(--text);
  padding: 0 4px;
  height: 32px;
  width: auto;
  font-size: 13px;
  letter-spacing: 0.18em;
  border-bottom: 1px solid transparent;
}
.cb-cta--secondary:hover,
.cb-cta--secondary:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold-d);
}
.cb-cta--secondary .cb-cta__arrow {
  margin-left: 4px;
  transition: transform 0.2s ease;
}
.cb-cta--secondary:hover .cb-cta__arrow { transform: translateX(3px); }
.cb-cta--whatsapp {
  border-color: #25d366;
  color: var(--text);
}
.cb-cta--whatsapp:hover,
.cb-cta--whatsapp:focus-visible {
  background: #25d366;
  color: var(--black);
}
.cb-cta--whatsapp svg { width: 18px; height: 18px; fill: currentColor; }

@media (min-width: 768px) {
  .cb-cta {
    width: auto;
    height: 48px;
    padding: 0 28px;
    font-size: 15px;
  }
  .cb-cta--secondary { height: 28px; padding: 0 4px; }
}

/* ── SectionHeading ─────────────────────────────────────── */
.cb-heading { margin-bottom: 32px; }
.cb-heading__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5em;
  color: var(--gold-d);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.cb-heading__eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--gold-d);
  flex-shrink: 0;
}
.cb-heading__title {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text);
  line-height: 1.18;
  margin: 0;
  font-size: clamp(24px, 4vw, 40px);
}
.cb-heading__title em {
  font-style: italic;
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
}

/* ── StatsStrip ─────────────────────────────────────────── */
.cb-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--b1);
  border: 1px solid var(--b1);
}
.cb-stat {
  background: var(--s1);
  padding: 22px 18px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cb-stat__value {
  font-family: 'Cormorant Garamond', 'Cinzel', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.5px;
  line-height: 1;
}
.cb-stat__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--tm);
  text-transform: uppercase;
  line-height: 1.4;
}
@media (min-width: 768px) {
  .cb-stats { grid-template-columns: repeat(var(--cb-stats-cols, 4), 1fr); }
  .cb-stat { padding: 28px 22px; }
  .cb-stat__value { font-size: 48px; }
}

/* ── Listing grids (mobile-first) ───────────────────────── */
.cb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--b1);
  border: 1px solid var(--b1);
}
@media (min-width: 768px) { .cb-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .cb-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cb-grid--units { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) and (max-width: 1099px) { .cb-grid--units { grid-template-columns: 1fr 1fr; } }

/* ── ProjectCard ────────────────────────────────────────── */
.cb-card {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.cb-card:hover { border-color: var(--b3); }
.cb-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--black);
  overflow: hidden;
}
.cb-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.cb-card:hover .cb-card__img { transform: scale(1.03); }
.cb-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
}
.cb-card__pill {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
}
.cb-card__city {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--text);
  text-transform: uppercase;
}
.cb-card__body { padding: 24px; }
.cb-card__title {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  line-height: 1.2;
}
.cb-card__tagline {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-d);
  text-transform: uppercase;
  margin: 0 0 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-card__desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--td);
  line-height: 1.82;
  margin: 0 0 20px;
}
.cb-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--b2);
  margin-bottom: 22px;
}
.cb-card__meta-item {
  padding: 12px 14px;
  border-right: 1px solid var(--b2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cb-card__meta-item:last-child { border-right: none; }
.cb-card__meta-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(240, 234, 224, 0.6);
  text-transform: uppercase;
}
.cb-card__meta-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
}
.cb-card__meta-value--accent { color: var(--gold); }
.cb-card__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cb-card__disclaimer {
  margin-top: 14px;
  font-size: 10px;
  font-weight: 300;
  color: var(--tm);
  line-height: 1.6;
}

@media (min-width: 768px) {
  .cb-card__body { padding: 32px; }
  .cb-card__title { font-size: 32px; }
}

/* Variants */
.cb-card--projects .cb-card__title { font-size: clamp(22px, 3vw, 38px); }
.cb-card--compact .cb-card__media { aspect-ratio: 4 / 3; }
.cb-card--compact .cb-card__title { font-size: 18px; }
.cb-card--compact .cb-card__body { padding: 18px; }
.cb-card--compact .cb-card__desc { display: none; }

/* ── UnitCard ───────────────────────────────────────────── */
.cb-unit {
  background: var(--s1);
  border: 1px solid var(--b1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.25s ease;
}
.cb-unit:hover { border-color: var(--b3); }
.cb-unit__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--black);
  overflow: hidden;
}
.cb-unit__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cb-unit__pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.cb-unit__project {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
  background: rgba(6, 6, 6, 0.85);
  text-transform: uppercase;
}
.cb-unit__body { padding: 20px; }
.cb-unit__name {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.08em;
  margin: 0 0 16px;
  line-height: 1.3;
}
.cb-unit__name--sold { color: var(--tm); }
.cb-unit__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.cb-unit__meta-item {
  background: var(--s0);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cb-unit__meta-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--tm);
  text-transform: uppercase;
}
.cb-unit__meta-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: var(--td);
}
.cb-unit__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cb-unit__tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--b3);
  color: var(--gold-d);
}
.cb-unit__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Status pill colour map for units */
.cb-pill--available { border-color: #7abf94; color: #e0f5e9; background: rgba(74, 140, 92, 0.72); }
.cb-pill--reserved  { border-color: #d9a85a; color: #1a1408; background: rgba(196, 163, 90, 0.85); }
.cb-pill--sold      { border-color: var(--tm); color: var(--td); background: rgba(30, 26, 18, 0.9); }

/* Placeholder block (used when image is missing) */
.cb-media-placeholder {
  width: 100%;
  height: 100%;
  background: var(--s1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-media-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 14px,
    rgba(196, 163, 90, 0.025) 14px, rgba(196, 163, 90, 0.025) 15px
  );
}
.cb-media-placeholder svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--gold-d);
  stroke-width: 1.2;
  opacity: 0.4;
  position: relative;
  z-index: 1;
}

/* ── SiteHeader ─────────────────────────────────────────── */
/* The component reuses existing nav classes so pages with inline nav
   styling continue to look right. Below are baseline rules used when
   the page does not define its own nav CSS. Mobile-first. */
cb-site-header { display: block; }
.cb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6, 6, 6, 0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--b1);
}
.cb-header__logo {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--gold);
  text-decoration: none;
  text-transform: uppercase;
}
.cb-header__logo span {
  display: block;
  margin-top: 2px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--td);
}
@media (min-width: 1024px) {
  .cb-header { padding: 0 60px; }
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(6, 6, 6, 0.98);
  backdrop-filter: blur(20px);
  z-index: 199;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer a {
  display: block;
  padding: 16px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--td);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--b1);
}
.nav-drawer a:hover, .nav-drawer a.active { color: var(--gold); }
.nav-drawer .nd-cta {
  margin-top: 24px;
  background: var(--gold);
  color: var(--black);
  text-align: center;
  padding: 16px;
  border-bottom: none;
}
.nav-drawer .nd-cta--ghost {
  margin-top: 8px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-d);
}

/* SiteHeader: separate "Book Strategy Call" CTA button.
   Hidden in mobile; appears as gold button on desktop. */
.cb-header .nav-book-call,
.nav-book-call {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  margin-left: 12px;
  background: var(--gold);
  color: var(--black);
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
}
.cb-header .nav-book-call:hover,
.nav-book-call:hover { background: var(--gold-l); }
@media (max-width: 960px) {
  .cb-header .nav-book-call,
  .nav-book-call { display: none; }
}

/* SiteHeader: language toggle. Provides a baseline so the EN|AR pair
   renders even on pages that did not previously define .lang-sw. */
.cb-header .lang-sw,
.lang-sw {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 20px;
  flex-shrink: 0;
}
.cb-header .lang-btn,
.lang-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--tm);
  text-decoration: none;
  padding: 5px 9px;
  border: 1px solid transparent;
  transition: all 0.2s;
}
a.lang-btn:hover { color: var(--gold); border-color: var(--b3); }
.lang-btn.lang-active {
  color: var(--gold);
  border-color: var(--b3);
  background: var(--b1);
}
@media (max-width: 960px) {
  .cb-header .lang-sw,
  .lang-sw { margin-left: 8px; }
}

/* ── SiteFooter ─────────────────────────────────────────── */
/* The component renders the same .footer-* classes already used on the
   homepage, so existing footer CSS continues to style it without
   duplication. Component-scoped fallbacks below cover pages that did
   not previously define footer styles. */
cb-site-footer { display: block; }
.cb-footer { background: var(--s0); border-top: 1px solid var(--b1); }
.cb-footer .footer-main {
  padding: 48px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.cb-footer .footer-brand-name {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 8px;
}
.cb-footer .footer-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-style: italic;
  color: var(--tm);
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}
.cb-footer .footer-desc {
  font-size: 11px;
  font-weight: 300;
  color: var(--tm);
  line-height: 1.8;
  letter-spacing: 0.3px;
  max-width: 280px;
}
.cb-footer .footer-col h4 {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold-d);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.cb-footer .footer-col ul { list-style: none; padding: 0; margin: 0; }
.cb-footer .footer-col ul li { padding: 6px 0; border-bottom: 1px solid rgba(30, 26, 18, 0.4); }
.cb-footer .footer-col ul li:last-child { border-bottom: none; }
.cb-footer .footer-col ul li a {
  font-size: 11px;
  font-weight: 300;
  color: var(--tm);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.3px;
}
.cb-footer .footer-col ul li a:hover { color: var(--gold); }
.cb-footer .footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 11px;
  font-weight: 300;
  color: var(--tm);
  line-height: 1.6;
}
.cb-footer .footer-contact-item a { color: var(--tm); text-decoration: none; transition: color 0.2s; }
.cb-footer .footer-contact-item a:hover { color: var(--gold); }
.cb-footer .footer-contact-icon {
  width: 14px;
  height: 14px;
  fill: var(--gold-d);
  flex-shrink: 0;
  margin-top: 2px;
}
.cb-footer .footer-bottom {
  padding: 16px 24px;
  border-top: 1px solid var(--b1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  align-items: center;
}
.cb-footer .footer-copy {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--tm);
}
.cb-footer .footer-social { display: flex; gap: 10px; }
.cb-footer .social-ico {
  width: 30px;
  height: 30px;
  border: 1px solid var(--b1);
  background: var(--s0);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s;
}
.cb-footer .social-ico:hover { border-color: var(--gold-d); }
.cb-footer .social-ico svg { width: 12px; height: 12px; fill: var(--td); }

@media (min-width: 768px) {
  .cb-footer .footer-main {
    padding: 70px 80px;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
  }
  .cb-footer .footer-bottom {
    padding: 20px 80px;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ============================================================
   BRAND v1.0 — SiteHeader SVG lockup
   Mobile (<1024 px): horizontal lockup at ~36 px so the wordmark
     reads cleanly alongside the hamburger (the bare monogram looks
     under-weight in the header bar).
   Desktop (≥1024 px): horizontal lockup at full 48 px.
   The monogram-cb-on-ink.svg is still rendered in the DOM for legacy
     contexts but hidden by default; can be re-enabled via the
     .cb-header--monogram opt-in class.
   ============================================================ */
.cb-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; min-width: 0; }
.cb-header__lockup,
.cb-header__monogram { display: block; height: auto; }

/* Mobile-first */
.cb-header__lockup {
  display: block;
  height: 36px;
  width: auto;
  max-width: 220px;
}
.cb-header__monogram { display: none; }

@media (min-width: 1024px) {
  .cb-header__lockup {
    height: 48px;
    max-width: 320px;
    width: auto;
  }
}

/* Opt-in: render the monogram instead of the lockup (rare). */
.cb-header--monogram .cb-header__lockup { display: none; }
.cb-header--monogram .cb-header__monogram { display: block; max-height: 40px; }

/* Safety: the in-list .nav-links should never be visible on mobile.
   The mobile drawer is its own element (.nav-drawer). If legacy CSS
   somewhere flips .nav-links to display:flex on hamburger click, this
   keeps it hidden until the viewport is wide enough for the inline
   list. */
@media (max-width: 1023px) {
  .cb-header .nav-links,
  #main-nav .nav-links { display: none !important; }
}

/* Carryover QA fix: 'Book Strategy Call' secondary CTA causes header
   overflow at 1440 px. Hide it below 1600 px so only the primary
   in-list 'Start Investment' CTA shows. The button reappears above
   1600 px where there's room. */
.cb-header .nav-book-call,
.nav-book-call { display: none; }
@media (min-width: 1600px) {
  .cb-header .nav-book-call,
  .nav-book-call { display: inline-flex; }
}

/* Footer brand block — SVG lockup replaces the wordmark text */
.cb-footer .footer-brand-link { display: inline-block; margin-bottom: 12px; }
.cb-footer .footer-brand-lockup {
  display: block;
  height: 48px;
  width: auto;
  max-width: 280px;
}

/* ============================================================
   BRAND v1.0 — Project page anchor sub-nav scroll-snap + edge fade
   ============================================================ */
.proj-subnav,
.anchor-nav {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  position: relative;
}
.proj-subnav .pn-link,
.anchor-nav a {
  scroll-snap-align: start;
  flex-shrink: 0;
}
/* Right-edge gradient fade hints at scrollable content */
.proj-subnav-fade,
.anchor-nav-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 48px;
  background: linear-gradient(to right, transparent, var(--ink));
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   BRAND v1.0 — Hero subtitle contrast on project pages
   Lifts subtitle opacity to ~78% and adds a soft gradient onto the
   hero image so the text reads cleanly over any background. Scoped to
   the silk-section/st-hero containers so other heroes are unaffected.
   ============================================================ */
.st-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 10, 10, 0.65) 100%);
  pointer-events: none;
  z-index: 1;
}
.st-hero .st-hero-content { position: relative; z-index: 2; }
.st-hero-sub,
.st-hero-tagline,
.st-hero-architect {
  color: rgba(245, 241, 232, 0.78) !important;
}

/* ============================================================
   SESSION 2.6 — VISUAL POLISH
   ============================================================ */

/* ── FIX 1 — luxury-grade mobile drawer ──────────────────── */
/* Drawer slides in from the right; nav items are serif Cormorant
   Garamond at a generous size; active item carries a gold underline;
   close (X) sits top-right inside the drawer. */
.nav-drawer {
  padding: 28px 28px 40px;
}
.nav-drawer__close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-drawer__close:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.nav-drawer__items {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
}
.nav-drawer a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--ivory);
  text-transform: uppercase;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.nav-drawer a.active {
  color: var(--gold);
}
.nav-drawer a.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 36px;
  height: 2px;
  background: var(--gold);
}
.nav-drawer .nd-cta {
  margin-top: 28px;
  background: var(--gold);
  color: var(--ink);
  text-align: center;
  padding: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-bottom: none;
}
.nav-drawer .nd-cta--ghost {
  margin-top: 8px;
  background: rgba(201, 169, 97, 0.12);
  color: var(--gold);
  border: 1px solid var(--gold-d);
}

/* ── FIX 2 — Project card image / metadata divider ───────── */
/* Image is already flush to the top of the card; add a 1px gold
   hairline flush along the image bottom so the metadata block reads
   as an editorial caption block, not a floating box with a gap. */
.cb-card__media {
  border-bottom: 1px solid var(--line);
}

/* ── FIX 3 — Phone / mailto / WhatsApp link styling ─────── */
/* iOS Safari turns tel: into bright blue underlined links. Force
   them back into the brand palette: ivory text, subtle gold hairline
   underline, gold on hover. Applies site-wide. */
/* Exclude buttoned WhatsApp surfaces — they own their own colour:
   .wa-inquiry-wa (sticky CTA bar half), .wa-float (FAB),
   .nav-book-call (in-nav strategy-call CTA), and any element
   tagged data-wa-no-style. */
a[href^="tel:"]:not(.wa-inquiry-wa):not(.wa-float):not(.nav-book-call):not([data-wa-no-style]),
a[href^="mailto:"]:not(.wa-inquiry-wa):not(.wa-float):not(.nav-book-call):not([data-wa-no-style]),
a[href^="https://wa.me/"]:not(.wa-inquiry-wa):not(.wa-float):not(.nav-book-call):not([data-wa-no-style]),
a[href^="http://wa.me/"]:not(.wa-inquiry-wa):not(.wa-float):not(.nav-book-call):not([data-wa-no-style]) {
  color: var(--ivory);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 169, 97, 0.4);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
a[href^="tel:"]:not(.wa-inquiry-wa):not(.wa-float):not(.nav-book-call):not([data-wa-no-style]):hover,
a[href^="mailto:"]:not(.wa-inquiry-wa):not(.wa-float):not(.nav-book-call):not([data-wa-no-style]):hover,
a[href^="https://wa.me/"]:not(.wa-inquiry-wa):not(.wa-float):not(.nav-book-call):not([data-wa-no-style]):hover,
a[href^="http://wa.me/"]:not(.wa-inquiry-wa):not(.wa-float):not(.nav-book-call):not([data-wa-no-style]):hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
/* Inside the footer-contact list, keep the muted look the footer expects */
.footer-contact-item a[href^="tel:"],
.footer-contact-item a[href^="mailto:"],
.footer-contact-item a[href^="https://wa.me/"] {
  color: inherit;
  border-bottom-color: rgba(201, 169, 97, 0.25);
}
.footer-contact-item a[href^="tel:"]:hover,
.footer-contact-item a[href^="mailto:"]:hover,
.footer-contact-item a[href^="https://wa.me/"]:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── FIX 4 — Market Intelligence editorial cards ─────────── */
/* Editorial upgrade: thin 2 px gold top border, ivory hairlines on
   the other 3 sides, larger gold monoline icon, serif heading. */
.cb-intel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .cb-intel-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (min-width: 1100px) {
  .cb-intel-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

.cb-intel-card {
  position: relative;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--gold);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-top-width 0.2s ease, transform 0.2s ease;
}
.cb-intel-card:hover {
  border-top-width: 3px;
}
.cb-intel-card:hover .cb-intel-card__body { color: rgba(245, 241, 232, 0.9); }
@media (min-width: 768px) {
  .cb-intel-card { padding: 32px; }
}

.cb-intel-card__icon {
  width: 32px;
  height: 32px;
  color: var(--gold);
  margin-bottom: 20px;
}
.cb-intel-card__icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cb-intel-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--ivory);
  margin: 0 0 10px;
  line-height: 1.25;
}
@media (min-width: 768px) {
  .cb-intel-card__title { font-size: 22px; }
}
.cb-intel-card__body {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245, 241, 232, 0.75);
  margin: 0;
  transition: color 0.2s ease;
}

/* ============================================================
   SESSION 2.7 — POST-MERGE POLISH
   ============================================================ */

/* FIX 1 — Slashed/distinguishable zero on serif numeric stats.
   Cormorant Garamond's lining 0 reads as a capital "O" at large sizes.
   Apply opentype tabular numerals + slashed zero so the glyph is
   unambiguously a numeric zero. */
[style*="Cormorant Garamond"],
.report-stat-number,
.cb-stat__value {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1, "ss01" 1;
}

/* FIX 2 — Mobile clearance for the WhatsApp FAB.
   On phones the green floating button sits in the bottom-right and
   was overlapping the bottom CTAs of project cards. Reserve enough
   bottom space on the body so the FAB always floats over the section
   padding, never over interactive content. Also respect iOS safe-
   area-inset-bottom so the FAB clears the home-indicator. */
@media (max-width: 768px) {
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  /* The inquiry-bar variant already reserves space — bump its lift
     too. */
  body.has-inquiry-bar { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
}
.wa-float {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 769px) {
  .wa-float { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* FIX 3 — Reduce empty space below the Q1 Portfolio Report mockup.
   On desktop the platform-preview grid used align-items:center which
   vertically centred the (shorter) report card and pushed apparent
   empty space below it. Switched the inline style to align-items:
   start. The CSS rule below guarantees it even if the inline rule is
   ever stripped by minification. */
.platform-preview-grid { align-items: start !important; }

/* FIX 4 — Header lockup spacing safety.
   The lockup is a single SVG and renders correctly; this guards
   against accidental run-together if a future markup change ever
   inlines a text wordmark next to the SVG. */
.cb-header__logo > * + * { margin-inline-start: 0; }

/* ============================================================
   SESSION 2.7 — POST-MERGE POLISH (continued)
   ============================================================ */

/* FIX 5 — Project card overflow on narrow viewports.
   Grid items expand to fit their min-content. The cb-card__tagline
   uses white-space:nowrap to keep the tagline on one line, which
   forces the cb-card minimum width to include the whole tagline.
   On a 375 px viewport that pushes the card past the section padding.
   Setting min-width:0 on the grid items lets them shrink to fit the
   container; the tagline keeps its nowrap+ellipsis behaviour. */
.cb-grid > *,
.cb-card,
cb-project-card { min-width: 0; }
.cb-card { max-width: 100%; }
.cb-card__body { min-width: 0; }

/* Defensive: long unbreakable strings in the description should never
   force the card wider than the body. */
.cb-card__desc,
.cb-card__title { overflow-wrap: anywhere; word-break: break-word; }

/* FIX 6 — Mobile bottom-right corner: ONE FAB at a time.
   When the mobile inquiry bar is on screen, the round green WhatsApp
   FAB is redundant — the bar's own "WhatsApp" button already covers
   that intent. Hide the floating button so the bottom-right corner
   shows just the accessibility ring sitting cleanly above the bar.
   On desktop (≥961 px) the inquiry bar is hidden by media query, so
   the WhatsApp FAB stays visible there. On mobile pages without
   data-page-intent (no inquiry bar) the WhatsApp FAB also stays. */
@media (max-width: 960px) {
  body.has-inquiry-bar .wa-float { display: none !important; }
}

/* Accessibility FAB position.
   • Mobile, no inquiry bar:    sits clear above the WhatsApp FAB
   • Mobile, inquiry bar shown: WhatsApp FAB is hidden, so the a11y
     ring drops to sit just above the bar (90 px clears the bar's
     ~70 px height with a small gap).
   • Desktop: keeps its default 90 px / 84 px from accessibility.js. */
@media (max-width: 600px) {
  #cb-a11y-btn {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.has-inquiry-bar #cb-a11y-btn {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* FIX 7 — Mobile inquiry-bar buttons match in width.
   The bar uses flex:1 on both halves so they're equal width.
   Full structural styling lives in base.css; this CSS adds nothing
   site-wide so the canonical button shell (height 52, font 13/Inter
   Tight, identical padding on both halves) wins without
   !important fights. */
/* (intentionally empty — see assets/css/base.css for the bar styles) */

/* FIX 8 — Hide the in-list .nav-links wrapper on mobile.
   With cb-site-header now on every page, the in-list nav-links is
   for desktop only. This sidesteps any leftover page-level CSS that
   tries to show the list as a dropdown overlay on mobile, which used
   to fire even after the legacy hamburger JS was removed. The mobile
   drawer (rendered by cb-site-header) is the only menu surface
   below 1024 px. */
@media (max-width: 1023px) {
  .cb-header .nav-links,
  #main-nav .nav-links,
  nav#nav .nav-links,
  nav .nav-links { display: none !important; }
}

/* ============================================================
   FIX — WhatsApp buttons should LOOK like WhatsApp buttons site-wide.
   Any anchor pointing at wa.me — regardless of which framework class
   it's wearing (.btn-outline, .silk-btn-ghost, .silk-btn-secondary,
   project-page custom buttons) — gets a WhatsApp-green border, a
   subtle WhatsApp glyph before the label, and fills green on hover.
   This is what tells a user "this opens WhatsApp" without reading.
   Exclusions:
     · .nav-book-call (in-nav strategy-call CTA, has its own gold style)
     · .wa-float (FAB, already styled)
     · .wa-inquiry-wa (inquiry bar, already styled solid green)
     · .footer-contact-item links (muted footer text links)
     · a[data-wa-no-style] (escape hatch)
   ============================================================ */
a[href^="https://wa.me/"]:not(.nav-book-call):not(.wa-float):not(.wa-inquiry-wa):not(.footer-contact-item *):not([data-wa-no-style]),
a[href^="http://wa.me/"]:not(.nav-book-call):not(.wa-float):not(.wa-inquiry-wa):not(.footer-contact-item *):not([data-wa-no-style]) {
  position: relative;
  border-color: rgba(37, 211, 102, 0.55) !important;
  color: var(--ivory) !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* When the WA link is also using cb-cta--primary or a btn-gold style,
   keep its filled background but tint the glyph green. */
a[href^="https://wa.me/"]:not(.nav-book-call):not(.wa-float):not(.wa-inquiry-wa):not(.footer-contact-item *):not([data-wa-no-style]):not(.btn-gold):not(.cb-cta--primary)::before,
a[href^="http://wa.me/"]:not(.nav-book-call):not(.wa-float):not(.wa-inquiry-wa):not(.footer-contact-item *):not([data-wa-no-style]):not(.btn-gold):not(.cb-cta--primary)::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.5 14.4c-.3-.1-1.8-.9-2-.9-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.6.1-1.7-.8-2.8-1.5-3.9-3.4-.3-.5-.3-.3.2-.7.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4-.1-.5-.1-.1-.6-1.6-.9-2.1-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.5 14.4c-.3-.1-1.8-.9-2-.9-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.6.1-1.7-.8-2.8-1.5-3.9-3.4-.3-.5-.3-.3.2-.7.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4-.1-.5-.1-.1-.6-1.6-.9-2.1-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3z'/></svg>") center/contain no-repeat;
  color: #25D366;
  flex-shrink: 0;
}
a[href^="https://wa.me/"]:not(.nav-book-call):not(.wa-float):not(.wa-inquiry-wa):not(.footer-contact-item *):not([data-wa-no-style]):hover,
a[href^="http://wa.me/"]:not(.nav-book-call):not(.wa-float):not(.wa-inquiry-wa):not(.footer-contact-item *):not([data-wa-no-style]):hover {
  background: #25D366 !important;
  color: var(--ink) !important;
  border-color: #25D366 !important;
}
/* On hover, paint the glyph dark so it stays legible on green */
a[href^="https://wa.me/"]:not(.nav-book-call):not(.wa-float):not(.wa-inquiry-wa):not(.footer-contact-item *):not([data-wa-no-style]):hover::before {
  color: var(--ink);
}