/* ========================================================================
   Components - nav, hero, cards, footer, calculators
   ======================================================================== */

/* ── Navbar ─────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(250, 247, 239, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav.is-scrolled { background: rgba(250, 247, 239, 0.96); box-shadow: 0 1px 14px rgba(20, 36, 28, 0.05); }

.nav .container {
  height: 100%;
}
.nav__row {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--forest-900);
  text-decoration: none;
}
.nav__logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: block;
}
.nav__brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.nav__brand-text > span { font-size: 22px; }
.nav__brand small { line-height: 1; }
.nav__brand b { color: var(--forest-700); font-weight: 600; }
.nav__brand small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-700);
  font-weight: 500;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
  position: relative;
}
.nav__links a:hover { color: var(--forest-700); }
.nav__links a.is-active { color: var(--forest-700); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1.5px; background: var(--gold-600);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }

.nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* lang switch */
.lang-switch {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface);
}
.lang-switch button {
  padding: 6px 12px;
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.lang-switch button.is-active { background: var(--forest-700); color: var(--sand-50); }

/* mobile burger */
.nav__burger {
  display: none;
  width: 36px; height: 36px;
  background: transparent;
  border: 0;
  position: relative;
  cursor: pointer;
}
.nav__burger span {
  position: absolute; left: 8px; right: 8px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s ease;
}
.nav__burger span:nth-child(1) { top: 13px; }
.nav__burger span:nth-child(2) { top: 18px; }
.nav__burger span:nth-child(3) { top: 23px; }
.nav__burger.is-open span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { top: 18px; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav__links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100vw;
    height: calc(100dvh - var(--nav-height));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--sand-50);
    padding: 24px 24px 40px;
    transform: translateX(100%);
    transition: transform 0.32s var(--ease);
    border-top: 1px solid var(--line-soft);
    overflow-y: auto;
    z-index: 99;
    box-shadow: -10px 0 30px rgba(20, 36, 28, 0.06);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__links a { padding: 16px 0; font-size: 17px; border-bottom: 1px solid var(--line-soft); }
  .nav__links a::after { display: none; }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__burger { display: block; }
  .nav__cta .btn { display: none; }
  .nav__cta .lang-switch { display: flex; }
  body.menu-open { overflow: hidden; }
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  padding: calc(var(--nav-height) + 60px) 0 80px;
  background:
    radial-gradient(ellipse at 80% 0%, var(--forest-100) 0%, transparent 60%),
    var(--sand-50);
  position: relative;
  overflow: hidden;
}

/* ── Fixed Singapore skyline backdrop: infinite left pan + scroll parallax ──
   Sits fixed behind the whole homepage at z-index -1. Most sections are
   opaque and hide it; the hero, the numbers strip and the cert quote are
   transparent "windows" that reveal it, so it parallaxes as the page scrolls.
   The skyline doesn't tile, so the track alternates the image with a flipped
   copy (every seam is a mirror) and loops on a 2-tile period (invisible reset). */
.parallax-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.parallax-bg__track {
  position: absolute; top: 0; left: 0; height: 100%;
  display: flex; width: 200vw;
  opacity: 0.5;
  animation: hero-pan 80s linear infinite;
  will-change: transform;
}
.parallax-bg__track img {
  flex: 0 0 50vw; width: 50vw; height: 100%;
  object-fit: cover; object-position: center 42%;
  display: block;
}
.parallax-bg__track img.is-mirror { transform: scaleX(-1); }
@keyframes hero-pan { from { transform: translateX(0); } to { transform: translateX(-100vw); } }

.parallax-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(250,247,239,0.82) 0%, rgba(250,247,239,0.58) 42%, rgba(250,247,239,0.44) 100%);
}

/* Homepage layering: windows reveal the fixed skyline, everything else is opaque */
.home .hero,
.home #services { background: transparent; }
.home .numbers {
  background:
    linear-gradient(158deg, rgba(12, 22, 17, 0.92) 0%, rgba(12, 22, 17, 0.80) 100%),
    radial-gradient(ellipse at 78% -10%, rgba(31, 53, 40, 0.7) 0%, transparent 58%),
    url("/assets/images/hero/hero-contact.webp") center 38% / cover no-repeat,
    var(--forest-950);
}
.home .section { background: var(--sand-50); }
.home .section--sand { background: var(--sand-200); }
.home .hero > .container { position: relative; z-index: 1; }
/* "What I do" sits over the skyline, so give its label a stronger presence */
.home #services .eyebrow { font-size: 18px; letter-spacing: 0.1em; }

@media (max-width: 880px) {
  .parallax-bg__track { opacity: 0.34; }
  .parallax-bg__track img { object-position: center 30%; }
  .parallax-bg::after {
    background: linear-gradient(180deg, rgba(250,247,239,0.64) 0%, rgba(250,247,239,0.5) 50%, rgba(250,247,239,0.72) 100%);
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}
/* The grid centres this column against the taller figure, so growing the copy's
   internal gaps pulls the whole block up by half the growth - widening the space
   under the headline moved the headline up instead of moving the lede down. This
   padding is absorbed by the same centring and cancels that drift. */
.hero__copy { padding-top: 34px; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: var(--gold-100);
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-right: 16px;
  margin-bottom: 26px;
}
.hero__badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-600);
}

.hero h1 {
  font-size: clamp(50px, 7.8vw, 108px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin-bottom: 54px;
  color: var(--forest-900);
  text-wrap: balance;
  max-width: 14ch;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--forest-700);
}
.hero__lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 52ch;
  margin-bottom: 58px;
}
.hero__lead strong { color: var(--forest-900); font-weight: 600; }

.hero__zh {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--forest-700);
  margin-bottom: 26px;
  letter-spacing: 0.04em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

.hero__creds {
  display: flex;
  flex-wrap: wrap;
  /* No rule above the row. With three creds it separated them from the buttons;
     with two it just cut the hero in half. The space does that job instead. */
  padding-top: 34px;
  column-gap: clamp(40px, 6vw, 78px);
  row-gap: 22px;
}
/* Sized to content rather than 1 1 120px: with two creds, stretching them to
   fill the hero pushed them to opposite ends. Separation is carried by the gap
   on the row rather than a rule between them - at two items a divider reads as
   a leftover from the three-item version. */
.hero__cred {
  flex: 0 1 auto;
  padding-right: 0;
}
.hero__cred + .hero__cred { border-left: 0; padding-left: 0; }
.hero__cred strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--forest-700);
  line-height: 1.1;
  margin-bottom: 4px;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
/* small trailing unit (yrs / 年) so the number stays the dominant size */
.hero__cred strong .cred-unit {
  font-family: var(--font-sans);
  font-size: 0.44em;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
  margin-left: 3px;
}
/* CJK fills the full em box, so scale it down to match the Latin cap height */
.hero__cred strong .cred-cjk { font-size: 0.82em; }
.hero__cred span {
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

/* ── Hero figure (Ivan cutout) ────────────────────────────── */
.hero__figure {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  /* negate hero's bottom padding so the figure flushes with the section edge */
  margin-bottom: -80px;
  /* Ivan's head should reach near the top of the copy column */
  padding-top: 12px;
}

.hero__figure-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 0 18px rgba(201, 166, 114, 0.55))
          drop-shadow(0 0 42px rgba(201, 166, 114, 0.40))
          drop-shadow(0 0 90px rgba(184, 148, 92, 0.30))
          drop-shadow(0 22px 28px rgba(20, 36, 28, 0.14))
          drop-shadow(0 4px 8px rgba(20, 36, 28, 0.06));
}

@media (max-width: 880px) {
  .hero { padding: calc(var(--nav-height) + 12px) 0 36px; }

  /* Mobile hero fills the first screen: a big full-width title up top, Ivan large
     below it, CTAs at the bottom of the viewport. The "With ERA since 2012" line and
     the credentials sit below the fold. display:contents promotes the copy's children
     so they can be flex-ordered into one column. */
  .hero__copy { display: contents; }
  .hero__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    min-height: calc(100vh - var(--nav-height) - 56px);
  }
  .hero__badge   { order: 1; align-self: center; margin-bottom: 14px; }
  .hero__zh      { order: 2; margin-bottom: 2px; font-size: 18px; }
  .hero h1       { order: 3; max-width: 14ch; align-self: center; font-size: clamp(46px, 12.5vw, 64px); line-height: 1.05; margin-bottom: 0; }
  .hero__figure  { order: 4; flex: 0 0 auto; align-self: center; margin: 8px 0 0; align-items: flex-end; justify-content: center; }
  .hero__actions { order: 5; align-self: stretch; margin: 16px 0 0; justify-content: center; }
  .hero__lead    { order: 6; align-self: center; max-width: 42ch; font-size: 16.5px; margin: 30px 0 0; }
  .hero__creds   { order: 7; align-self: stretch; gap: 12px 0; margin-top: 24px; justify-content: center; }
  .hero__cred + .hero__cred { padding-left: 14px; }
  .hero__cred { padding-right: 14px; }

  .hero__figure-img {
    height: 33vh; width: auto; max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 0 16px rgba(201,166,114,0.5)) drop-shadow(0 14px 24px rgba(20,36,28,0.16));
  }
}
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(40px, 12vw, 58px); max-width: 12ch; }
  .hero__cred strong { font-size: 22px; }
  .hero__cred span { font-size: 11px; }
}

/* ── Trust strip ────────────────────────────────────────────── */
/* ── Cert pull quote - replaces the old credential strip ────── */
.cert-quote {
  padding: clamp(80px, 12vw, 160px) 0;
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.cert-quote__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.cert-quote__text {
  font-family: var(--font-serif);
  font-size: clamp(52px, 9.5vw, 132px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--forest-900);
  margin: 0;
  max-width: 13ch;
}
.cert-quote__text em {
  font-style: italic;
  color: var(--gold-700);
  font-weight: 500;
}
.cert-quote__cite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 4px;
}
.cert-quote__cite span:first-child { color: var(--forest-700); font-weight: 500; }
.cert-quote__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding: 13px 26px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest-700);
  background: transparent;
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
              color 0.35s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.cert-quote__link::after {
  content: "→";
  font-size: 14px;
  transition: transform 0.35s var(--ease-out);
}
.cert-quote__link:hover {
  background: var(--forest-700);
  border-color: var(--forest-700);
  color: var(--sand-50);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(20, 36, 28, 0.5);
}
.cert-quote__link:hover::after { transform: translateX(4px); }
@media (max-width: 720px) {
  .cert-quote { padding: 48px 0 44px; }
  .cert-quote__cite { font-size: 10.5px; letter-spacing: 0.12em; padding: 0 12px; }
}

/* ── Section header ────────────────────────────────────────── */
.sec-header { margin-bottom: 56px; max-width: 720px; }
.sec-header h2 { margin-bottom: 14px; }
.sec-header p { color: var(--ink-muted); font-size: 17px; line-height: 1.55; max-width: 60ch; }

/* ── Service cards ─────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* Asymmetric "How I work" grid - 1 featured + 3 normal */
.howiwork-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.howiwork-feature {
  grid-column: 1 / -1;
  padding: 48px 56px;
  background: var(--forest-800);
  color: var(--sand-50);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.howiwork-feature::before {
  /* large open-quote glyph */
  content: "\201C";
  position: absolute;
  top: -32px;
  left: 36px;
  font-family: var(--font-serif);
  font-size: 220px;
  line-height: 1;
  color: var(--gold-600);
  opacity: 0.18;
  font-style: italic;
  pointer-events: none;
}
.howiwork-feature__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 22px;
  position: relative;
}
.howiwork-feature__text {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--sand-50);
  margin: 0 0 22px;
  max-width: 56ch;
  position: relative;
}
.howiwork-feature__text em {
  font-style: italic;
  color: var(--gold-500);
}
/* The global a{} colour is --forest-700, the brand green, which assumes a light
   background. Inside this dark block it sat at 1.35:1 against --forest-800 and
   was effectively invisible. --gold-400 is the token already documented for
   highlights on dark surfaces and gives 7.2:1 here. The underline is there
   because colour alone should not be the only thing marking a link. */
.howiwork-feature__text a,
.article-head .lede a,
.page-head .lede a {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(216, 189, 134, 0.45);
}
.howiwork-feature__text a:hover,
.howiwork-feature__text a:focus-visible,
.article-head .lede a:hover,
.article-head .lede a:focus-visible,
.page-head .lede a:hover,
.page-head .lede a:focus-visible {
  color: var(--sand-50);
  text-decoration-color: currentColor;
}
.howiwork-feature__cite {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--sand-200);
  letter-spacing: 0.01em;
  position: relative;
}
@media (max-width: 880px) {
  .howiwork-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .howiwork-feature { padding: 32px 28px; }
  .howiwork-feature::before { font-size: 140px; left: 14px; top: -22px; }
}
@media (max-width: 560px) {
  .howiwork-grid { grid-template-columns: 1fr; }
  .howiwork-feature { padding: 28px 22px; }
  .howiwork-feature::before { font-size: 110px; top: -16px; left: 8px; }
  .howiwork-feature__text { font-size: 18px; line-height: 1.45; }
  .howiwork-feature__eyebrow { margin-bottom: 16px; }
}
.service-card {
  position: relative;
  padding: 38px 32px 32px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart), border-color 0.4s var(--ease-out-quart);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-500);
  box-shadow: var(--shadow-lg);
}
.service-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold-700);
  margin-bottom: 14px;
}
.service-card h3 {
  font-size: 26px;
  margin-bottom: 12px;
  color: var(--forest-900);
}
.service-card h3 small {
  display: block;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--forest-600);
  margin-top: 4px;
}
.service-card p { color: var(--ink-muted); font-size: 15px; margin-bottom: 18px; }
.service-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--ink);
}
.service-card__list li {
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; gap: 8px;
}
.service-card__list li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-600);
  margin-top: 8px; flex-shrink: 0;
}
.service-card__cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--forest-700);
  display: inline-flex; align-items: center; gap: 6px;
}
.service-card__cta::after {
  content: "→"; transition: transform 0.2s var(--ease);
}
.service-card:hover .service-card__cta::after { transform: translateX(4px); }

/* Hover-reveal: each card RESERVES its full size up front (the detail occupies its
   space but sits faded out), showing number + title. Hovering (or keyboard focus)
   only cross-fades the detail in - nothing resizes, so nothing below ever moves.
   Touch devices show the detail solid. The copy stays in the DOM for SEO. */
.service-card__more-inner > :first-child { margin-top: 16px; }
.service-card__more-inner > :last-child  { margin-bottom: 0; }
/* Scoped to the homepage "What I do" section only. Other .service-card grids
   (e.g. the calculator teasers) keep their normal always-visible layout. */
@media (hover: hover) {
  /* Collapsed: the title sits large on the card's middle line and the number sits
     below it as a watermark. On hover the title rises to the top and shrinks to its
     normal size, the detail fades in, and the watermark brightens. The detail keeps
     reserving its space throughout, so the card never resizes and nothing below it
     moves. Only transform/opacity animate. */
  #services .service-card { position: relative; overflow: hidden; }
  /* Anchored to the BOTTOM, not the top: the card is ~366px tall in English but
     ~287px in Chinese, because the reserved detail block follows the copy. A
     fixed top offset therefore dropped the numeral onto the card edge in zh.
     line-height 1 keeps the glyph inside its own box - at 0.78 the box was
     shorter than the type, and this serif uses old-style figures, so the
     descending 3 (and only the 3) was clipped by the card's overflow. 118px is
     the largest size that still clears the title in the shorter Chinese card. */
  #services .service-card__num {
    position: absolute; right: 18px; top: auto; bottom: 18px; margin: 0;
    font-family: var(--font-serif); font-size: 118px; line-height: 1;
    letter-spacing: -0.03em; color: var(--gold-700); opacity: 0.14;
    pointer-events: none; transform-origin: center center;
    transition: opacity 0.45s var(--ease-out-quart), transform 0.55s var(--ease-out-quart);
  }
  /* The cap is on the UNSCALED width, so "New launch & auction" breaks over two
     lines while the shorter titles stay on one, and every card keeps the same
     right-hand margin. Without it the long title ran to the card edge. */
  #services .service-card h3 {
    max-width: 186px; text-wrap: balance; line-height: 1.15;
    transform: translateY(44px) scale(1.45);
    transform-origin: left center;
    transition: transform 0.45s var(--ease-out-quart);
  }
  #services .service-card__more {
    opacity: 0;
    pointer-events: none;                /* don't let the faded links catch clicks */
    transition: opacity 0.4s var(--ease-out-quart);
  }
  #services .service-card:hover .service-card__num,
  #services .service-card:focus-within .service-card__num { opacity: 0.32; transform: scale(1.06); }
  /* Only transform changes here. max-width is layout: lifting the cap on hover
     re-wrapped the long title from two lines to one, which changed the card's
     height and resized the whole row. The cap stays on in both states, so the
     wrap point is identical and the scale is purely visual. */
  #services .service-card:hover h3,
  #services .service-card:focus-within h3 { transform: none; }
  #services .service-card:hover .service-card__more,
  #services .service-card:focus-within .service-card__more { opacity: 1; pointer-events: auto; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  #services .service-card h3 { transition: none; }
  #services .service-card__num, #services .service-card__more { transition: opacity 0.2s var(--ease); }
}

/* ── Story / split blocks ──────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}
.split--reverse { grid-template-columns: 1.1fr 1fr; }
.split__media {
  aspect-ratio: 4 / 5;
  background: var(--forest-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out-quart);
}
.split:hover .split__media img,
.split--reverse:hover .split__media img { transform: scale(1.03); }
.split__body h2 { margin-bottom: 18px; }
.split__body p { color: var(--ink-muted); font-size: 16.5px; line-height: 1.7; max-width: 56ch; margin-bottom: 14px; }
.split__body p strong { color: var(--ink-strong); font-weight: 600; }

/* Two-tier service heading: dominant name + demoted tagline */
.split__body h2.split__title { margin-bottom: 8px; }
.split__body .split__tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.25;
  color: var(--forest-600);
  margin: 0 0 22px;
  max-width: 42ch;
}
/* Scannable "Best for" callout - full frame + leading mono chip */
.split__body .svc-for {
  display: block;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: rgba(157, 122, 71, 0.06);
  border: 1px solid rgba(157, 122, 71, 0.22);
  padding: 15px 18px;
  border-radius: var(--radius);
  margin: 0 0 24px;
  max-width: 56ch;
}
.svc-for__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
  background: rgba(157, 122, 71, 0.13);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-right: 10px;
  position: relative;
  top: -1px;
}

/* Jy Simplicity service block: the image fills its column to match the text
   head's height, so neither side is left with an empty column. An absolutely
   positioned img doesn't inflate the row, so the row height is driven by the
   text and the picture stretches to meet it. */
.split--fill { align-items: stretch; }
.split--fill .split__media {
  aspect-ratio: auto;
  position: relative;
  min-height: 320px;
  align-self: stretch;
}
.split--fill .split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Head is a flex column so the "What's included" toggle can be pushed to the
   bottom (margin-top:auto), landing flush with the image's bottom edge. The gap
   above it auto-sizes to whatever it takes to reach the bottom. */
.split--fill .split__body { display: flex; flex-direction: column; }
.split--fill .jy-more__toggle { margin-top: auto; align-self: flex-start; padding-bottom: 0; }
.split__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* The one 5-10 word hook line that stays visible per section. */
.jy-hook {
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink-strong);
  margin: 0 0 22px;
  max-width: 42ch;
}

/* Progressive disclosure (.svc block): the "What's included" toggle sits in the
   text column; the detail itself expands FULL WIDTH below the whole head row, so
   opening it never stretches one column past the other. Content stays in the DOM
   for SEO; with JS off the panel is simply left open. */
.jy-more__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 9px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--forest-700);
  transition: color 0.2s var(--ease);
}
.jy-more__toggle:hover { color: var(--gold-700); }
.jy-more__toggle:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; border-radius: var(--radius-sm); }
.jy-more__chev { width: 14px; height: 14px; transition: transform 0.42s var(--ease-out-quart); }
.svc:not(.jy-collapsed) .jy-more__chev { transform: rotate(180deg); }

/* Full-width collapsible detail. grid-rows 0fr<->1fr animates height:auto cleanly.
   Two columns (prose | checklist) so the width is used instead of a long thin run.
   No-JS: stays open (rows 1fr) so the content shows and indexes normally. */
.jy-more__wrap { display: grid; grid-template-rows: 1fr; }
.jy-more__panel { overflow: hidden; min-height: 0; }
.jy-more__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(22px, 3vw, 36px);
  padding-top: clamp(22px, 3vw, 36px);
  border-top: 1px solid var(--line-soft);
}
.jy-more__inner > * { min-width: 0; }
.jy-more__inner .svc-for { margin-top: 0; }
.jy-more__inner :last-child { margin-bottom: 0; }
.svc.jy-collapsed .jy-more__wrap { grid-template-rows: 0fr; }
.svc.jy-collapsed .jy-more__panel { opacity: 0; }
.svc.jy-js .jy-more__wrap { transition: grid-template-rows 0.45s var(--ease-out-quart); }
.svc.jy-js .jy-more__panel { transition: opacity 0.34s var(--ease-out-quart); }
@media (prefers-reduced-motion: reduce) {
  .svc.jy-js .jy-more__wrap, .svc.jy-js .jy-more__panel { transition: none; }
}

@media (max-width: 880px) {
  .split, .split--reverse { grid-template-columns: 1fr; gap: 36px; }
  .split__media { max-width: 480px; }
  .split--fill .split__media { min-height: 360px; }
}
@media (max-width: 720px) {
  .jy-more__inner { grid-template-columns: 1fr; gap: 22px; }
}

/* ── Stat strip ────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--forest-600);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  background: var(--forest-700);
  padding: 36px 28px;
  color: var(--sand-100);
}
.stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  line-height: 1;
  color: var(--gold-500);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.stat span {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--sand-200);
  line-height: 1.45;
  display: block;
}

/* ── Award honours plaque ──────────────────────────────────── */
.awards {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(168deg, #ffffff 0%, #fcf8f0 100%);
  padding: clamp(30px, 5vw, 54px);
  box-shadow: 0 1px 2px rgba(43, 30, 10, 0.05), 0 24px 60px -30px rgba(43, 30, 10, 0.24);
}
.awards::before {                /* gold crown bar */
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-500) 22%, var(--gold-700) 50%, var(--gold-500) 78%, transparent);
}

/* Feature header - large serif headline (homepage) */
.awards__head { text-align: center; margin-bottom: clamp(28px, 4vw, 42px); }
.awards__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 14px;
}
.awards__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.awards__heading::after {
  content: ""; display: block;
  width: 52px; height: 2px; margin: 18px auto 0;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-500));
}

/* Small mono label - year-group caption (about page) */
.awards__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 28px;
  display: flex; align-items: center; gap: 14px;
}
.awards__title::before, .awards__title::after {
  content: ""; flex: 1; height: 1px; background: var(--line-soft);
}

.awards__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(22px, 3vw, 32px) 30px;
  list-style: none;
  padding: 0; margin: 0;
}
.awards__list li {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.awards__list li::before {       /* gold star */
  content: ""; position: absolute; left: 0; top: 4px;
  width: 17px; height: 17px;
  background: linear-gradient(150deg, var(--gold-500), var(--gold-700));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26'/%3E%3C/svg%3E") center / contain no-repeat;
}
.awards__list li b {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--forest-700);
  margin-bottom: 3px;
}
.awards__list li a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
}

/* ── CTA strip ─────────────────────────────────────────────── */
.cta-strip {
  position: relative;
  padding: clamp(64px, 9vw, 108px) 0;
  background:
    radial-gradient(ellipse at 50% -10%, var(--forest-700) 0%, transparent 62%),
    linear-gradient(162deg, var(--forest-900) 0%, var(--forest-800) 100%);
  color: var(--sand-200);
  text-align: center;
}
.cta-strip::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-600) 50%, transparent);
}
.cta-strip h2 { color: var(--sand-50); margin-bottom: 16px; }
.cta-strip p { color: var(--sand-200); font-size: 17px; max-width: 56ch; margin: 0 auto 28px; }
.cta-strip__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-strip .btn--ghost { color: var(--sand-50); border-color: var(--sand-200); }
.cta-strip .btn--ghost:hover { background: var(--sand-50); color: var(--forest-900); }

/* ── Testimonial - framed pull-quote with a hanging gold quote mark ── */
.quote {
  position: relative;
  background: linear-gradient(168deg, #ffffff 0%, var(--sand-50) 100%);
  border: 1px solid var(--line-soft);
  padding: clamp(36px, 5vw, 52px) clamp(32px, 4vw, 52px) clamp(30px, 4vw, 40px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.5vw, 29px);
  font-style: italic;
  font-weight: 400;
  color: var(--forest-900);
  line-height: 1.42;
  margin: 0 auto;
  max-width: 760px;
}
.quote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-serif);
  font-size: 72px;
  line-height: 0.5;
  color: var(--gold-500);
  margin-bottom: 18px;
}
.quote footer {
  margin-top: 22px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 13.5px;
  color: var(--ink-muted);
  font-weight: 500;
}
.quote footer b { color: var(--forest-700); display: block; margin-bottom: 2px; font-weight: 600; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq__item {
  border-bottom: 1px solid var(--line-soft);
}
.faq__item summary {
  padding: 22px 0;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--forest-900);
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: color 0.2s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 300;
  color: var(--forest-700);
  transition: transform 0.25s var(--ease);
  flex-shrink: 0;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--forest-700); }
.faq__answer {
  padding: 0 0 26px;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 64ch;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  position: relative;
  background: var(--forest-900);
  color: var(--sand-200);
  padding: clamp(64px, 8vw, 88px) 0 32px;
}
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 148, 92, 0.55) 50%, transparent);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer__brand {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--sand-50);
  margin-bottom: 14px;
  font-weight: 400;
}
.footer__brand b { color: var(--gold-500); font-weight: 500; }
.footer__about { font-size: 14.5px; line-height: 1.65; color: var(--sand-200); max-width: 36ch; margin-bottom: 18px; }
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 18px;
  font-weight: 500;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: 10px; }
.footer__col a {
  color: var(--sand-200);
  font-size: 14px;
}
.footer__col a:hover { color: var(--sand-50); }
.footer__contact-line { font-size: 14px; color: var(--sand-200); margin-bottom: 6px; }
.footer__contact-line b { color: var(--sand-50); display: inline-block; min-width: 60px; font-weight: 500; }
.footer__bottom {
  border-top: 1px solid var(--forest-600);
  padding-top: 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  font-size: 12.5px;
  color: var(--sand-200);
}
.footer__bottom a { color: var(--sand-200); }
.footer__bottom a:hover { color: var(--sand-50); }

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

/* ── Page header (interior pages) ──────────────────────────── */
.page-head {
  position: relative;
  isolation: isolate;
  padding: calc(var(--nav-height) + 104px) 0 clamp(60px, 7vw, 96px);
  border-bottom: 0;
  background-color: var(--forest-950);
  background-image:
    linear-gradient(158deg, rgba(12,22,17,0.74) 0%, rgba(12,22,17,0.56) 44%, rgba(12,22,17,0.92) 100%),
    linear-gradient(100deg, rgba(12,22,17,0.62) 0%, rgba(12,22,17,0.08) 62%),
    var(--head-img, url("/assets/images/hero/sg-interior-hero.webp"));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, center 38%;
  background-size: cover, cover, cover;
}
@media (max-width: 768px) {
  .page-head {
    padding: calc(var(--nav-height) + 64px) 0 clamp(48px, 9vw, 68px);
    background-image:
      linear-gradient(176deg, rgba(12,22,17,0.70) 0%, rgba(12,22,17,0.60) 46%, rgba(12,22,17,0.93) 100%),
      var(--head-img, url("/assets/images/hero/sg-interior-hero.webp"));
    background-position: 0 0, center 36%;
    background-size: cover, cover;
  }
}
.page-head .eyebrow { margin-bottom: 18px; color: var(--gold-400); }
.page-head h1 { margin-bottom: 18px; max-width: 18ch; color: #fbf8f1; text-shadow: 0 2px 30px rgba(0,0,0,0.34); }
.page-head h1 em { color: var(--gold-400); font-style: italic; }
.page-head .lede { max-width: 58ch; color: rgba(245,240,231,0.86); }
/* breadcrumb + inline pill chips, recolored for the dark head */
.page-head [aria-label="Breadcrumb"] a,
.page-head [aria-label="Breadcrumb"] span { color: rgba(247,243,235,0.7) !important; }
.page-head [aria-label="Breadcrumb"] a:hover { color: #fbf8f1 !important; }
.page-head a[style*="radius-pill"] { color: #fbf8f1 !important; border-color: rgba(251,248,241,0.42) !important; }

/* ── Calculator ────────────────────────────────────────────── */
.calc-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.calc-form {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.calc-form h3 {
  font-size: 26px;
  margin-bottom: 6px;
}
.calc-form .calc-form__intro {
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: 28px;
}
.calc-row { margin-bottom: 18px; }
.calc-row__label-line {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.calc-row__label-line label { margin-bottom: 0; }
.calc-row__hint { font-size: 12px; color: var(--ink-faint); }
.calc-row input[type="range"] {
  width: 100%; padding: 0; height: 6px;
  -webkit-appearance: none; appearance: none;
  background: var(--sand-200);
  border-radius: 999px;
  border: 0;
}
.calc-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  background: var(--forest-700);
  border-radius: 50%;
  border: 3px solid var(--sand-50);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.calc-row input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--forest-700);
  border-radius: 50%;
  border: 3px solid var(--sand-50);
  cursor: pointer;
}
.calc-row select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%232d4a3e' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }

.calc-result {
  background: var(--forest-700);
  color: var(--sand-100);
  padding: 36px;
  border-radius: var(--radius-lg);
  position: sticky; top: calc(var(--nav-height) + 16px);
}
.calc-result h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 22px;
}
.calc-result__big {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  color: var(--sand-50);
  line-height: 1.05;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.calc-result__big small {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gold-500);
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.calc-result__sub {
  font-size: 14.5px;
  color: var(--sand-200);
  margin-bottom: 28px;
  line-height: 1.5;
}
.calc-result__breakdown {
  border-top: 1px solid var(--forest-600);
  padding-top: 22px;
}
.calc-result__breakdown dl {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 16px;
  margin: 0;
  font-size: 14px;
}
.calc-result__breakdown dt { color: var(--sand-200); }
.calc-result__breakdown dd { font-family: var(--font-mono); color: var(--sand-50); margin: 0; font-size: 13.5px; }
.calc-result__breakdown dd.is-emphasis { color: var(--gold-500); font-weight: 600; }

.calc-result__cta {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--forest-600);
}
.calc-result__cta p { font-size: 14px; color: var(--sand-200); margin-bottom: 14px; }

.calc-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 0;
}
.calc-tab {
  padding: 14px 22px;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.calc-tab:hover { color: var(--forest-700); }
.calc-tab.is-active { color: var(--forest-700); border-bottom-color: var(--forest-700); }

@media (max-width: 880px) {
  .calc-grid { grid-template-columns: 1fr; gap: 28px; }
  .calc-result { position: static; }
}

/* ── District pills (calculators page) ─────────────────────── */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pill {
  padding: 6px 14px;
  background: var(--sand-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.pill:hover { background: var(--sand-200); color: var(--forest-700); }
.pill.is-active { background: var(--forest-700); color: var(--sand-50); border-color: var(--forest-700); }

/* ── Disclaimer ────────────────────────────────────────────── */
.disclaimer {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--sand-100);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.55;
}
.disclaimer b { color: var(--ink); font-weight: 600; }

/* ── Floating WhatsApp - discreet brand pill, fades in after hero ── */
.fab-whatsapp {
  position: fixed;
  bottom: 22px; right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 11px 14px;
  background: var(--forest-700);
  color: var(--sand-50);
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 22px rgba(20, 36, 28, 0.22);
  z-index: 90;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), background 0.2s var(--ease);
}
.fab-whatsapp.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fab-whatsapp:hover { background: var(--forest-800); color: var(--sand-50); }
.fab-whatsapp svg { width: 16px; height: 16px; flex-shrink: 0; color: #25d366; }
.fab-whatsapp__label { white-space: nowrap; }
@media (max-width: 520px) {
  .fab-whatsapp { padding: 11px 14px; }
  .fab-whatsapp__label { display: none; }
  .fab-whatsapp svg { width: 20px; height: 20px; }
}

/* ── Scroll reveal helpers ─────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Service splits "bloom" open from the centre line: the left column unclips
   leftward while sliding out from the middle, the right column unclips rightward.
   Reuses the .reveal -> .is-visible observer; the sibling stagger makes the left
   column lead and the other follow a beat later. Reduced-motion users skip it. */
@media (prefers-reduced-motion: no-preference) {
  .split--fill > .reveal {
    opacity: 0;
    transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out), clip-path 1.05s var(--ease-out);
  }
  .split--fill > .reveal:first-child  { transform: translateX(40px);  clip-path: inset(0 0 0 74%); }
  .split--fill > .reveal:last-child   { transform: translateX(-40px); clip-path: inset(0 74% 0 0); }
  .split--fill > .reveal.is-visible   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

/* ── Page-load entrance choreography ───────────────────────────
   The first thing every page shows (homepage hero, interior page
   headers, launch heroes) arrives in one rehearsed staggered rise.
   Gated behind no-preference so reduced-motion users - and any
   no-CSS/no-JS fallback - see everything immediately, never hidden. */
@keyframes rise-in     { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes figure-in   { from { opacity: 0; transform: translateY(22px) scale(0.99); } to { opacity: 1; transform: none; } }
/* Headline rises out of a clipped band - a kinetic, editorial reveal */
@keyframes title-rise  { from { opacity: 0; clip-path: inset(0 0 112% 0); transform: translateY(0.12em); } to { opacity: 1; clip-path: inset(-14% 0 -14% 0); transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Homepage hero */
  .hero__badge, .hero__zh, .hero h1, .hero__lead, .hero__actions, .hero__creds {
    opacity: 0; animation: rise-in 0.95s var(--ease-out) both;
  }
  .hero__badge   { animation-delay: 0.08s; }
  .hero__zh      { animation-delay: 0.18s; }
  .hero h1       { animation: title-rise 1.3s var(--ease-out) 0.24s both; }
  .hero__lead    { animation-delay: 0.44s; }
  .hero__actions { animation-delay: 0.60s; }
  .hero__creds   { animation-delay: 0.74s; }
  .hero__figure  { opacity: 0; animation: figure-in 1.15s var(--ease-out) 0.30s both; }

  /* Interior page headers (about, services, calculators, new-launches, contact, calc + rental pages) */
  .page-head [aria-label="Breadcrumb"], .page-head .eyebrow, .page-head h1, .page-head .lede {
    opacity: 0; animation: rise-in 0.85s var(--ease-out) both;
  }
  .page-head [aria-label="Breadcrumb"] { animation-delay: 0.06s; }
  .page-head .eyebrow { animation-delay: 0.14s; }
  .page-head h1       { animation-delay: 0.24s; }
  .page-head .lede    { animation-delay: 0.40s; }

  /* Launch-page heroes (Lentor, Thomson) */
  .launch-hero [aria-label="Breadcrumb"], .launch-hero__badge, .launch-hero h1,
  .launch-hero__sub, .launch-hero .launch-countdown, .launch-hero .cta-strip__actions {
    opacity: 0; animation: rise-in 0.95s var(--ease-out) both;
  }
  .launch-hero [aria-label="Breadcrumb"] { animation-delay: 0.07s; }
  .launch-hero__badge { animation-delay: 0.15s; }
  .launch-hero h1     { animation-delay: 0.26s; }
  .launch-hero__sub   { animation-delay: 0.42s; }
  .launch-hero .launch-countdown { animation-delay: 0.56s; }
  .launch-hero .cta-strip__actions { animation-delay: 0.70s; }

  /* Blog article headers */
  .article-head__crumbs, .article-head__tag, .article-head h1, .article-head .lede, .article-head .byline {
    opacity: 0; animation: rise-in 0.85s var(--ease-out) both;
  }
  .article-head__crumbs { animation-delay: 0.06s; }
  .article-head__tag    { animation-delay: 0.14s; }
  .article-head h1      { animation-delay: 0.24s; }
  .article-head .lede   { animation-delay: 0.40s; }
  .article-head .byline { animation-delay: 0.54s; }
}

/* ── Project / launch cards ────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.filter-pill {
  padding: 9px 18px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: all 0.2s var(--ease);
}
.filter-pill:hover { background: var(--sand-100); color: var(--forest-700); border-color: var(--line-strong); }
.filter-pill.is-active { background: var(--forest-700); color: var(--sand-50); border-color: var(--forest-700); }
.filter-pill small {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--sand-100);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}
.filter-pill.is-active small { background: rgba(255,255,255,0.16); color: var(--sand-100); }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  grid-auto-flow: dense;
  gap: 22px;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: transform 0.4s var(--ease-out-quart), border-color 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart);
  position: relative;
}
.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-500);
  box-shadow: var(--shadow-lg);
}
.project-card.is-hidden { display: none; }

/* Featured project - spans 2 columns, larger media, "Featured" tag */
.project-card.is-featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 360px;
}
.project-card.is-featured .project-card__media {
  aspect-ratio: auto;
  min-height: 100%;
}
.project-card.is-featured::before {
  content: "Featured · 重点关注";
  position: absolute;
  top: 18px; left: 18px;
  z-index: 4;
  padding: 6px 12px;
  background: var(--terra-600);
  color: var(--sand-50);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(162, 82, 56, 0.28);
}
/* on featured: hide status/pin in top corners - they conflict with Featured badge */
.project-card.is-featured .project-card__pin { display: none; }
.project-card.is-featured .project-card__status { top: auto; bottom: 14px; right: 14px; }
.project-card.is-featured .project-card__title {
  font-size: clamp(26px, 2.8vw, 36px);
}
.project-card.is-featured .project-card__body { padding: 30px 32px 32px; }

@media (max-width: 880px) {
  .project-card.is-featured {
    min-height: 320px;
  }
  .project-card.is-featured .project-card__body { padding: 24px 24px 26px; }
}
@media (max-width: 720px) {
  .project-card.is-featured {
    grid-column: span 1;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .project-card.is-featured .project-card__media { aspect-ratio: 4 / 3; }
}

.project-card__media {
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
  overflow: hidden;
}
/* When the media area is an <a> (project has a detail page), make it clearly clickable */
a.project-card__media { text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.3s var(--ease); }
a.project-card__media img { transition: transform 0.5s var(--ease); }
a.project-card__media:hover img { transform: scale(1.04); }
a.project-card__media:hover .project-card__title { color: var(--gold-500); }
.project-card__title { transition: color 0.25s var(--ease); }
/* Six gradient variants - applied via .project-card[data-variant="N"] */
.project-card[data-variant="1"] .project-card__media { background: linear-gradient(135deg, #2d4a3e 0%, #547062 100%); color: #faf7ef; }
.project-card[data-variant="2"] .project-card__media { background: linear-gradient(135deg, #3d5e4f 0%, #b8945c 100%); color: #faf7ef; }
.project-card[data-variant="3"] .project-card__media { background: linear-gradient(135deg, #1f3528 0%, #2d4a3e 60%, #b8945c 100%); color: #efe2c9; }
.project-card[data-variant="4"] .project-card__media { background: linear-gradient(135deg, #d4c8b1 0%, #b8a989 100%); color: #1f3528; }
.project-card[data-variant="5"] .project-card__media { background: linear-gradient(135deg, #14241c 0%, #3d5e4f 100%); color: #efe2c9; }
.project-card[data-variant="6"] .project-card__media { background: linear-gradient(135deg, #b8945c 0%, #9d7a47 100%); color: #faf7ef; }

.project-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.project-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.project-card__media:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20,36,28,0) 0%,
    rgba(20,36,28,0) 35%,
    rgba(20,36,28,0.18) 55%,
    rgba(20,36,28,0.5) 80%,
    rgba(20,36,28,0.72) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Featured cards run a busy hero image - strengthen the top fade
   (so the FEATURED badge stays legible) and the bottom fade (so the
   status badge + project title read clearly against ERA marketing art). */
.project-card.is-featured .project-card__media:has(img)::after {
  background:
    linear-gradient(180deg,
      rgba(20,36,28,0.42) 0%,
      rgba(20,36,28,0.18) 14%,
      rgba(20,36,28,0) 28%,
      rgba(20,36,28,0) 52%,
      rgba(20,36,28,0.32) 72%,
      rgba(20,36,28,0.7) 92%,
      rgba(20,36,28,0.84) 100%);
}
.project-card__media:has(img) {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  padding: 22px;
}
.project-card__media:has(img) .project-card__title,
.project-card__media:has(img) .project-card__pin,
.project-card__media:has(img) .project-card__status {
  position: relative;
  z-index: 2;
}
.project-card__media:has(img) .project-card__title {
  color: #faf7ef;
  text-align: left;
  font-size: clamp(20px, 2.2vw, 26px);
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}

.project-card__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
  max-width: 100%;
}

.project-card__pin {
  position: absolute;
  top: 14px; left: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.project-card__pin svg { width: 14px; height: 14px; color: currentColor; opacity: 0.92; }

.project-card__status {
  position: absolute;
  top: 14px; right: 14px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  z-index: 2;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.project-card__status[data-status="launched"]    { background: rgba(45, 190, 90, 0.94); color: #0a3a14; }
.project-card__status[data-status="coming-soon"] { background: rgba(184, 148, 92, 0.94); color: #2d1f0a; }
.project-card__status[data-status="gls"]         { background: rgba(85, 110, 100, 0.94); color: #faf7ef; }

.project-card__body {
  padding: 22px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.project-card__row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.project-card__row span {
  padding: 3px 10px;
  background: var(--sand-100);
  border-radius: var(--radius-pill);
  font-weight: 500;
}
.project-card__row span.is-tenure { color: var(--gold-700); }

.project-card__facts {
  list-style: none;
  padding: 14px 0;
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--ink);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.project-card__facts li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}
.project-card__facts dt { color: var(--ink-muted); }
.project-card__facts dd { font-family: var(--font-mono); font-size: 12.5px; color: var(--forest-700); margin: 0; font-weight: 500; }

.project-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--forest-700);
  color: var(--sand-50);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s var(--ease);
}
.project-card__cta:hover { background: var(--forest-800); color: var(--sand-50); }
.project-card__cta svg { width: 14px; height: 14px; }

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

/* Empty state */
.projects-empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--ink-muted);
  font-size: 15px;
  display: none;
}
.projects-empty.is-visible { display: block; }

/* ── By the numbers strip ─────────────────────────────────── */
.numbers {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 124px) 0;
  background:
    linear-gradient(158deg, rgba(12, 22, 17, 0.92) 0%, rgba(12, 22, 17, 0.80) 100%),
    radial-gradient(ellipse at 78% -10%, rgba(31, 53, 40, 0.7) 0%, transparent 58%),
    url("/assets/images/hero/hero-contact.webp") center 38% / cover no-repeat,
    var(--forest-950);
  color: var(--sand-200);
}
/* subtle film grain for cinematic tactility */
.numbers::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.numbers > .container { position: relative; z-index: 1; }
.numbers__grid {
  display: grid;
  /* Track count matches the number of stats. It was repeat(4, 1fr) while four
     were shown; with three, the fourth track stayed on the grid and left an
     empty quarter on the right. */
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.numbers__item {
  /* Centred rather than left-aligned, and symmetric padding to match: the
     asymmetric right padding was there to sit the text off the divider when
     everything was ragged-left. */
  padding: 8px 24px;
  align-items: center;
  text-align: center;
  border-right: 1px solid rgba(216, 189, 134, 0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.numbers__cat {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-500);
  font-weight: 500;
  margin-bottom: 2px;
}
.numbers__item:last-child { border-right: 0; }
.numbers__num {
  font-family: var(--font-serif);
  font-size: clamp(66px, 7.8vw, 108px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--sand-50);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.numbers__num small {
  font-family: var(--font-mono);
  font-size: 0.2em;
  font-weight: 400;
  color: var(--gold-400);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.numbers__num em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-400);
  font-size: 0.5em;
  margin: 0 2px;
  align-self: center;
}
.numbers__caption {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sand-200);
  font-family: var(--font-sans);
  max-width: 30ch;
  margin-inline: auto;
}
.numbers__caption b {
  color: var(--sand-50);
  font-weight: 600;
}
@media (max-width: 880px) {
  .numbers__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
  .numbers__item:nth-child(2) { border-right: 0; }
  .numbers__item { padding: 0 24px 0 0; }
}
@media (max-width: 480px) {
  .numbers__grid { grid-template-columns: 1fr; gap: 32px; }
  .numbers__item { border-right: 0 !important; padding: 0; }
  .numbers__item:last-child { border-bottom: 0; }
}

/* ── Listings (live ERA portal) ─────────────────────────── */
.listings-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 28px;
  background: var(--sand-50);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.listings-meta__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
  flex-shrink: 0;
}
.listings-meta__text { flex: 1; min-width: 200px; }
.listings-meta__text b { color: var(--forest-700); font-weight: 600; }
.listings-meta__link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--forest-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}

.listing-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.listing-card:hover {
  transform: translateY(-3px);
  border-color: var(--forest-200);
  box-shadow: var(--shadow);
}

.listing-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sand-100);
}
.listing-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.listing-card:hover .listing-card__media img { transform: scale(1.04); }

.listing-card__badge {
  position: absolute;
  top: 14px; left: 14px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.listing-card__badge[data-kind="sale"] {
  background: rgba(45, 74, 62, 0.94);
  color: var(--sand-50);
}
.listing-card__badge[data-kind="rent"] {
  background: rgba(184, 148, 92, 0.94);
  color: #2d1f0a;
}

.listing-card__body {
  padding: 22px 22px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.listing-card__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--forest-900);
  margin-bottom: 4px;
}
.listing-card__address {
  font-size: 13.5px;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.listing-card__price {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--forest-700);
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.listing-card__price small {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
}
.listing-card__facts {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--forest-700);
}
.listing-card__fact {
  display: flex;
  align-items: center;
  gap: 6px;
}
.listing-card__fact svg {
  width: 14px; height: 14px;
  color: var(--gold-700);
}
.listing-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest-700);
}
.listing-card__cta::after {
  content: "↗";
  font-size: 14px;
  margin-left: 8px;
}

/* Empty state */
.listings-empty {
  text-align: center;
  padding: 56px 24px 64px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--sand-50);
  max-width: 620px;
  margin: 0 auto;
}
.listings-empty__art {
  width: 72px; height: 72px;
  margin: 0 auto 22px;
  color: var(--gold-600);
  opacity: 0.85;
}
.listings-empty__art svg { width: 100%; height: 100%; }
.listings-empty h2 {
  font-size: 26px;
  margin-bottom: 14px;
  color: var(--forest-900);
}
.listings-empty p {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 auto 26px;
}
.listings-empty__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.listings-disclaimer {
  margin-top: 36px;
  padding: 16px 20px;
  font-size: 13px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line-soft);
  max-width: 70ch;
  line-height: 1.6;
}
.listings-disclaimer b { color: var(--ink-muted); }

/* Skeleton loaders during fetch */
.listing-skeleton {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.listing-skeleton__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(90deg, var(--sand-100) 0%, var(--sand-50) 50%, var(--sand-100) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.listing-skeleton__body { padding: 22px; }
.listing-skeleton__line {
  height: 12px;
  background: var(--sand-100);
  border-radius: 4px;
  margin-bottom: 10px;
}
.listing-skeleton__line:nth-child(1) { width: 70%; }
.listing-skeleton__line:nth-child(2) { width: 50%; }
.listing-skeleton__line:nth-child(3) { width: 40%; }
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Award feature (about page main media) ───────────────── */
.award-feature {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a1410;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.award-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.award-feature figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 24px 22px;
  background: linear-gradient(180deg, rgba(10, 20, 16, 0) 0%, rgba(10, 20, 16, 0.78) 60%, rgba(10, 20, 16, 0.92) 100%);
  color: var(--sand-50);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.award-feature__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-500);
}
.award-feature__title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sand-50);
}
.award-feature__cite {
  font-size: 12.5px;
  color: var(--sand-200);
  line-height: 1.5;
  font-style: italic;
}

/* ── Awards gallery (physical recognition) ───────────────── */
.awards-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 720px;
  margin: 0 auto 8px;
}
.awards-gallery__item {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.awards-gallery__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.awards-gallery__item img {
  width: 100%;
  display: block;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  object-position: center;
}
.awards-gallery__item figcaption {
  padding: 12px 14px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.awards-gallery__item figcaption b {
  color: var(--gold-700);
  font-weight: 600;
}
@media (max-width: 520px) {
  .awards-gallery { grid-template-columns: 1fr; max-width: 360px; }
}

/* ── Live listings CTA (services page) ───────────────────── */
.live-listings {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
  padding: 36px 40px;
  background: var(--sand-50);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.live-listings::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 240px; height: 240px;
  background: radial-gradient(circle at 70% 30%, rgba(184, 148, 92, 0.12) 0%, transparent 65%);
  pointer-events: none;
}
.live-listings__pulse {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.live-listings__dot {
  width: 8px; height: 8px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.04); }
}
.live-listings__pulse-text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-700);
}
.live-listings__title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--forest-900);
  margin-bottom: 12px;
}
.live-listings__lede {
  color: var(--ink-muted);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 56ch;
  margin: 0;
}
.live-listings__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.live-listings__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.live-listings__btn svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}
.live-listings__btn:hover svg { transform: translate(2px, -2px); }
.live-listings__hint {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
@media (max-width: 720px) {
  .live-listings {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 22px;
  }
  .live-listings__action { align-items: stretch; }
  .live-listings__btn { justify-content: center; }
}