/* ============================================================
   NOBILIS PROPERTY GROUP - styles.css
   NOBILIS-CHG v65

   THIS IS THE COMPLETE STYLESHEET AND THE ONE YOU EDIT.
   It is a byte-for-byte copy of what used to sit inside <style> in
   index.html, so every rule and every comment you are used to is
   still here, in the same order.

   WHY IT MOVED: while it lived in index.html the browser could not
   draw a single pixel until all 98.9 KB had downloaded and parsed.
   Out here it loads without blocking, and it caches for a year, so
   repeat visitors never download it again.

   ONE THING TO WATCH: index.html carries a small inline copy of the
   header and hero rules so the top of the page can paint instantly.
   It is clearly marked CRITICAL CSS. If you change anything to do
   with the nav, the hero, the buttons or the colour variables in
   :root, make the same change in BOTH places. Everything else on the
   site lives only in this file and can be edited here alone.

   CACHE BUSTING: index.html links this file as styles.css?v=66.
   After you edit it, bump that number or your visitors will keep the
   old copy for up to a year.
   ============================================================ */


/* ============================================================
   CSS VARIABLES & RESET
   ============================================================ */
:root {
  --navy:       #0A1A2F;
  --navy-mid:   #0D2240;
  --navy-light: #122B52;
  --gold:       #C9A86A;
  --gold-dark:  #A8894F;
  --gold-text:  #7C653A; /* NOBILIS-CHG-contrast: AA-compliant text gold for light backgrounds */
  --gold-pale:  #F2E8D5;
  --warm-white: #F7F5F2;
  --charcoal:   #2E2E2E;
  --gray:       #6B6B6B;
  --gray-light: #E8E4DE;
  /* NOBILIS-CHG v64: fallback changed from Georgia to Times New Roman.
     Georgia is wide with a large x-height; Cormorant Garamond is narrow with a
     small one. Swapping between them reflowed the hero headline and was a real
     contributor to the 0.164 layout-shift score. Times is a much closer match,
     so the swap moves far less. See the README, pinning this down completely
     needs a browser to measure the two faces against each other. */
  --ff-display: 'Cormorant Garamond', 'Times New Roman', Times, serif;
  --ff-body:    'Jost', sans-serif;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--ff-body);
  background: var(--warm-white);
  color: var(--charcoal);
  line-height: 1.7;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.container { position: relative; z-index: 1;  max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.container--narrow { max-width: 820px; margin: 0 auto; padding: 0 2rem; }

.section-tag {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text); /* NOBILIS-CHG-contrast */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.section-tag::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold-dark);
}

.section-title {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.section-title--light { color: var(--warm-white); }
.section-title--gold  { color: var(--gold); }

.section-lead {
  font-size: 1.05rem;
  color: var(--gray);
  max-width: 560px;
  margin-top: 1rem;
  line-height: 1.8;
}
.section-lead--light { color: rgba(247,245,242,0.75); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  min-height: 48px;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn:hover::after { opacity: 1; }
.btn:hover { transform: translateY(-2px); }

.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-dark); box-shadow: 0 10px 24px rgba(201,168,106,0.28); }

.btn-outline {
  background: transparent;
  color: var(--warm-white);
  border: 1px solid rgba(201,168,106,0.5);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }

.btn-navy { background: var(--navy); color: var(--warm-white); }
.btn-navy:hover { background: var(--navy-mid); box-shadow: 0 10px 24px rgba(10,26,47,0.26); }

.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn-outline-navy:hover { background: var(--navy); color: var(--warm-white); }

.btn svg { width: 14px; height: 14px; }

/* Animated primary enquiry CTA: idle glow + arrow nudge */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,106,0); }
  50% { box-shadow: 0 0 20px 2px rgba(201,168,106,0.5); }
}
@keyframes ctaArrowNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
.btn-pulse { animation: ctaGlow 2.8s ease-in-out infinite; }
.btn-pulse svg { animation: ctaArrowNudge 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .btn-pulse, .btn-pulse svg { animation: none; }
}

.gold-rule {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  margin: 1.5rem 0;
}

/* Sticky mobile CTA */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  display: none; grid-template-columns: 1fr 1fr;
  transform: translateY(100%); transition: transform 0.35s ease;
  box-shadow: 0 -6px 24px rgba(10,26,47,0.25);
}
.mobile-cta.show { transform: translateY(0); }
.mobile-cta a {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.06em; text-decoration: none;
  background: var(--navy); color: var(--warm-white);
}
.mobile-cta a.gold { background: var(--gold); color: var(--navy); }
@media (max-width: 767px) { .mobile-cta { display: grid; } }

/* Back to top */
.to-top {
  position: fixed; left: 1.4rem; right: auto; bottom: 1.6rem; z-index: 940;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  border: 1px solid rgba(201,168,106,0.55);
  box-shadow: 0 4px 14px rgba(10,26,47,0.28);
  font-size: 1.1rem; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.to-top.show { opacity: 1; pointer-events: all; }
.to-top:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10,26,47,0.4); border-color: var(--gold); }
@media (max-width: 767px) { .to-top { left: 1rem; bottom: calc(56px + 1rem); } }

/* ============================================================
   NOBILIS-CHG v48 additions START
   skip link, visually-hidden, nav language pill, card detail
   panels, section-tag colour logic for dark sections.
   Rollback: delete from START to END marker.
   ============================================================ */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--gold); color: var(--navy);
  padding: 0.6rem 1rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* NOBILIS-CHG v57: Vietnamese toggle with a subtle flag cue.
   A soft red-tinted fill and a low-opacity gold star nod to the
   Vietnamese flag without being loud, finished with a refined gold
   border. The star is drawn in CSS (no image) and sits at low opacity
   so the label stays crisp and easy to read. */
/* NOBILIS-CHG v58: Vietnamese toggle simplified to a plain text tab.
   It now inherits the exact styling of the other nav links (colour,
   gold hover and the gold underline sweep). The red field, gold star
   and border have all been removed, per the brief, for a cleaner and
   more consistent header. The Vietnamese script itself is the signal. */
@media (max-width: 1099px) { .nav__links .nav__lang { display: none; } }
/* Dark sections keep the deeper brand gold on their tags (passes on navy);
   the three sections that flip light on phones switch to the AA text gold. */
.services .section-tag, .smsf .section-tag,
.network .section-tag, .international .section-tag, .local-buyers .section-tag { color: var(--gold-dark); }
@media (max-width: 768px) {
  .network .section-tag, .international .section-tag, .local-buyers .section-tag { color: var(--gold-text); }
}
.suburb-card__more {
  position: absolute; right: 0.9rem; bottom: 0.9rem; z-index: 3;
  background: rgba(10,26,47,0.55); color: var(--warm-white);
  border: 1px solid rgba(201,168,106,0.6); border-radius: 4px;
  padding: 0.35rem 0.7rem; font-family: var(--ff-body);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; cursor: pointer;
}
.suburb-card__more:hover { background: var(--gold); color: var(--navy); }
.suburb-card--sold .suburb-card__more { display: none; }
.nb-suburb-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  opacity: 0; visibility: hidden;
  overflow-y: auto;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* NOBILIS-CHG v53: on short mobile screens a centred modal can ride up
   over the fixed header. Anchor it below the header instead of
   centring, and let it scroll internally if content is tall. */
@media (max-width: 767px) {
  .nb-suburb-modal { align-items: flex-start; padding-top: 6rem; }
  .nb-suburb-modal__card { max-height: calc(100vh - 7.5rem); overflow-y: auto; }
}
.nb-suburb-modal.open { opacity: 1; visibility: visible; }
.nb-suburb-modal__backdrop {
  position: absolute; inset: 0; background: rgba(4,12,24,0.72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.nb-suburb-modal__card {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 82%, #15315c 100%);
  border: 1px solid rgba(201,168,106,0.5); border-radius: 12px;
  box-shadow: 0 24px 70px rgba(4,12,24,0.6);
  padding: 2.1rem 1.9rem 1.9rem;
  transform: translateY(12px) scale(0.98); transition: transform 0.3s ease;
}
.nb-suburb-modal.open .nb-suburb-modal__card { transform: translateY(0) scale(1); }
.nb-suburb-modal__card::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(201,168,106,0.4); border-radius: 7px; pointer-events: none;
}
.nb-suburb-modal__tag {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-text); margin: 0 0 0.4rem;
}
.nb-suburb-modal__title {
  font-family: var(--ff-display); color: var(--warm-white);
  font-size: 1.9rem; line-height: 1.1; margin: 0 0 0.9rem;
}
.nb-suburb-modal__body { color: rgba(247,245,242,0.86); font-size: 0.92rem; line-height: 1.7; margin: 0 0 1.4rem; }
.nb-suburb-modal__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--gold); color: var(--navy);
  font-family: var(--ff-body); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.04em; text-decoration: none; padding: 0.7rem 1.4rem; border-radius: 6px;
}
.nb-suburb-modal__cta:hover { background: var(--warm-white); }
.nb-suburb-modal__close {
  position: absolute; top: 0.7rem; right: 0.9rem; z-index: 2;
  background: none; border: 0; color: var(--gold);
  font-size: 1.3rem; cursor: pointer; padding: 0.3rem 0.5rem; line-height: 1;
}
.nb-suburb-modal__close:hover { color: var(--warm-white); }
@media (prefers-reduced-motion: reduce) { .nb-suburb-modal, .nb-suburb-modal__card { transition: none; } }
/* NOBILIS-CHG v48 additions END */

/* ============================================================
   NOBILIS-CHG v49 chat widget START (styles)
   Floating AI concierge. Fixed positioning only, zero layout
   impact. Launcher sits above the back-to-top circle on desktop
   and above the sticky CTA bar on phones.
   Rollback: delete START to END blocks (styles, markup, script).
   ============================================================ */
.nb-chat-launcher {
  position: fixed; right: 1.35rem; bottom: 1.6rem; z-index: 945;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--navy); border: 2px solid var(--gold);
  box-shadow: 0 8px 24px rgba(10,26,47,0.4);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; overflow: visible;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nb-chat-launcher::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--gold); opacity: 0.7;
  animation: nbPulseRing 2.4s ease-out infinite; pointer-events: none;
}
@keyframes nbPulseRing {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.nb-chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(10,26,47,0.5); }
.nb-chat-launcher img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
body.nb-chat-open .nb-chat-launcher { display: none; }
.nb-chat {
  position: fixed; right: 1.35rem; bottom: 5.2rem; z-index: 990;
  width: 380px; max-width: calc(100vw - 2rem);
  height: 560px; max-height: calc(100vh - 7.5rem);
  background: var(--navy); border: 1px solid rgba(201,168,106,0.45);
  border-radius: 10px; box-shadow: 0 18px 60px rgba(4,12,24,0.5);
  display: none; flex-direction: column; overflow: hidden;
}
body.nb-chat-open .nb-chat { display: flex; }
.nb-chat__head {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(160deg, var(--navy), var(--navy-mid));
  border-bottom: 1px solid rgba(201,168,106,0.25);
}
.nb-chat__head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } /* NOBILIS-CHG v51 */
.nb-chat__title { font-family: var(--ff-display); color: var(--warm-white); font-size: 1.05rem; line-height: 1.15; }
.nb-chat__sub { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.nb-chat__close { margin-left: auto; background: none; border: 0; color: var(--gold); font-size: 1.05rem; cursor: pointer; padding: 0.3rem 0.5rem; }
.nb-chat__log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.nb-msg {
  max-width: 85%; padding: 0.55rem 0.8rem; border-radius: 10px;
  font-size: 0.86rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word;
}
.nb-msg--bot { background: rgba(255,255,255,0.06); color: var(--warm-white); border: 1px solid rgba(201,168,106,0.18); align-self: flex-start; border-bottom-left-radius: 3px; }
.nb-msg--user { background: var(--gold); color: var(--navy); align-self: flex-end; border-bottom-right-radius: 3px; }
.nb-msg a { color: inherit; text-decoration: underline; }
.nb-typing { animation: nbPulse 1.2s ease-in-out infinite; }
@keyframes nbPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 0.9; } }
.nb-chat__row { display: flex; gap: 0.5rem; padding: 0.7rem 0.8rem 0.5rem; border-top: 1px solid rgba(201,168,106,0.2); }
.nb-chat__input {
  flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(201,168,106,0.25);
  color: var(--warm-white); padding: 0.6rem 0.8rem; font-family: var(--ff-body);
  font-size: 16px; border-radius: 6px; outline: none; min-height: 44px;
}
.nb-chat__input::placeholder { color: rgba(247,245,242,0.35); }
.nb-chat__input:focus { border-color: var(--gold); }
.nb-chat__send {
  background: var(--gold); color: var(--navy); border: 0; border-radius: 6px;
  padding: 0 1.1rem; font-family: var(--ff-body); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.05em; cursor: pointer; min-height: 44px;
}
.nb-chat__send:disabled { opacity: 0.55; cursor: default; }
.nb-chat__note { font-size: 0.64rem; color: rgba(247,245,242,0.5); padding: 0.15rem 1rem 0.6rem; text-align: center; }
@media (max-width: 767px) {
  .nb-chat-launcher { right: 1rem; bottom: calc(56px + 1rem); width: 60px; height: 60px; }
  /* NOBILIS-CHG v53: top is a fixed offset (not vh), so the panel can
     never ride up over the header on short viewports. Measured header
     height is ~95px at rest; 6rem (96px) clears it with a small margin
     on every device, tall or short. */
  .nb-chat { left: 0; right: 0; top: 6rem; bottom: 0; width: auto; max-width: none; height: auto; max-height: none; border-radius: 14px 14px 0 0; border-left: 0; border-right: 0; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-chat-launcher { transition: none; }
  .nb-chat-launcher::before { animation: none; opacity: 0; }
  .nb-typing { animation: none; opacity: 0.7; }
}
/* NOBILIS-CHG v49 chat widget END (styles) */

/* ============================================================
   NOBILIS-CHG v55: chat teaser bubble
   A soft, dismissible prompt that appears once per browser session,
   a few seconds after arrival, pointing at the launcher. It never
   forces the chat open. Rollback: delete this block + the markup/
   script blocks marked v55 below.
   ============================================================ */
.nb-teaser {
  position: fixed; z-index: 944;
  right: 1.35rem; bottom: calc(1.6rem + 66px + 14px);
  max-width: 240px;
  background: var(--navy); color: var(--warm-white);
  border: 1px solid rgba(201,168,106,0.5); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(10,26,47,0.4);
  padding: 0.85rem 2rem 0.85rem 1rem;
  font-family: var(--ff-body); font-size: 0.82rem; line-height: 1.5;
  opacity: 0; transform: translateY(6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.nb-teaser.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.nb-teaser::after {
  content: ""; position: absolute; right: 26px; bottom: -7px;
  width: 14px; height: 14px; background: var(--navy);
  border-right: 1px solid rgba(201,168,106,0.5);
  border-bottom: 1px solid rgba(201,168,106,0.5);
  transform: rotate(45deg);
}
.nb-teaser__close {
  position: absolute; top: 0.35rem; right: 0.45rem;
  background: none; border: 0; color: rgba(247,245,242,0.55);
  font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0.3rem;
}
.nb-teaser__close:hover { color: var(--gold); }
body.nb-chat-open .nb-teaser { display: none; }
@media (max-width: 767px) {
  .nb-teaser { right: 1rem; bottom: calc(56px + 1rem + 60px + 12px); max-width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-teaser { transition: opacity 0.2s linear; transform: none; }
  .nb-teaser.show { transform: none; }
}
/* NOBILIS-CHG v55 END (styles) */

.nb-chat__watermark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 62%; width: auto; max-width: 78%;
  opacity: 0.055; pointer-events: none; z-index: 0;
}
@media (prefers-reduced-motion: no-preference) { .nb-chat__watermark { transition: opacity 0.6s ease; } }
.nb-chat__head, .nb-chat__log, .nb-chat__row, .nb-chat__note { position: relative; z-index: 1; }

/* ============================================================
   NOBILIS-CHG v56: shimmer sweep
   One graceful light-band pass on hover, not a continuous loop, kept
   deliberately restrained for a boutique feel. Semi-transparent so
   button and card text stays fully legible while it crosses.
   Rollback: remove the nb-shimmer classes below and delete this block.
   ============================================================ */
.nb-shimmer::before, .nb-shimmer--gold::before {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%;
  transform: skewX(-18deg);
  z-index: 1; pointer-events: none;
  transition: left 0.85s cubic-bezier(0.4,0,0.2,1);
}
.nb-shimmer::before {
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0.30) 45%,
    rgba(255,255,255,0.50) 50%, rgba(255,255,255,0.30) 55%, rgba(255,255,255,0) 100%);
}
.nb-shimmer--gold::before {
  background: linear-gradient(100deg,
    rgba(201,168,106,0) 0%, rgba(201,168,106,0.35) 45%,
    rgba(201,168,106,0.55) 50%, rgba(201,168,106,0.35) 55%, rgba(201,168,106,0) 100%);
}
.nb-shimmer:hover::before, .nb-shimmer--gold:hover::before { left: 130%; }
.blog-card.nb-shimmer--gold { position: relative; overflow: hidden; }
.nav__cta.nb-shimmer { position: relative; overflow: hidden; }
.nb-suburb-modal__cta.nb-shimmer { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .nb-shimmer::before, .nb-shimmer--gold::before { transition: none; }
  .nb-shimmer:hover::before, .nb-shimmer--gold:hover::before { left: -60%; }
}
/* NOBILIS-CHG v56 END */

/* Accessibility quality floor */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Reveal animation */
/* NOBILIS-CHG v63: was 0.75s with a 28px rise, and the observer only fired
   once an element was already on screen, so content visibly lagged the scroll.
   That is the "things feel slow showing up" report. Now 0.45s over 16px, and
   the observer fires 140px early (see the script), so content has finished
   arriving by the time you reach it. Phones get shorter delays again. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.06s; }
.reveal-delay-2 { transition-delay: 0.12s; }
.reveal-delay-3 { transition-delay: 0.18s; }
.reveal-delay-4 { transition-delay: 0.24s; }
/* NOBILIS-CHG v63: on a phone you scroll faster relative to the content, so
   drop the stagger almost entirely and shorten the travel. */
@media (max-width: 768px) {
  .reveal { transform: translateY(10px); transition-duration: 0.32s; }
  .reveal-delay-1, .reveal-delay-2, .reveal-delay-3, .reveal-delay-4 { transition-delay: 0s; }
}

.projects { padding: 7rem 0; background: var(--gold-pale); }
.projects__header { text-align: center; max-width: 660px; margin: 0 auto 3rem; }
/* NOBILIS-CHG v63: featured opportunities rotates ONE CARD AT A TIME on a
   seamless loop, replacing the v51/v52 scroll-snap version that jumped a whole
   page and then snapped back to the start.
   HOW IT WORKS: .suburb-viewport is a fixed-width window with overflow hidden.
   .suburb-grid is a flex strip inside it that is moved with transform only,
   which keeps the whole animation on the GPU compositor (no layout, no paint)
   so it stays smooth on phones. The strip always sits one slot to the left of
   home; to rotate, the script animates it back to home, then silently moves
   the last card to the front and resets. The visitor never sees a rewind.
   Card count per view is driven by --nb-vis, so the same maths covers
   4 across on desktop, 2 on tablet and 1 on phones. */
.suburb-carousel { --nb-gap: 1.4rem; --nb-vis: 4; }
@media (max-width: 1020px) { .suburb-carousel { --nb-vis: 2; } }
@media (max-width: 768px)  { .suburb-carousel { --nb-vis: 1; --nb-gap: 1rem; } }
.suburb-viewport {
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}
.suburb-grid {
  display: flex;
  gap: var(--nb-gap);
  width: 100%;              /* cards overflow this on purpose */
  will-change: transform;
  transform: translate3d(0,0,0);
}
/* Each card is a fraction of the VIEWPORT, so 4 sit exactly across on desktop. */
.suburb-card {
  flex: 0 0 calc((100% - (var(--nb-vis) - 1) * var(--nb-gap)) / var(--nb-vis));
}
.suburb-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 390px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 78%, #15315c 100%);
  border: 1px solid rgba(201,168,106,0.5);
  border-radius: 10px;
  padding: 1.9rem 1.6rem 1.7rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.suburb-card::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(201,168,106,0.42);
  border-radius: 5px;
  z-index: 1;
  pointer-events: none;
  transition: border-color 0.3s ease;
}
.suburb-card:hover::after { border-color: rgba(201,168,106,0.72); }
/* NOBILIS-CHG v63: property photos are STILL. The v51 hover zoom
   (transform: scale(1.06)) is removed so the image never moves, on desktop or
   phone. Only the carousel strip itself travels. */
.suburb-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
/* NOBILIS-CHG v63: blue scrim pared back so more of the development shows.
   Was 0.18 at the top rising to 0.97. Now it starts at 0.05 and stays light
   through the upper two thirds, then ramps hard from 62% down so the suburb
   name, price and Enquire link keep a solid dark base behind them.
   Measured over the brightest suburb photo this still clears WCAG AA for
   normal text; do not lighten the 68%-100% stops without re-checking. */
.suburb-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(10,26,47,0.05) 0%,
    rgba(10,26,47,0.10) 30%,
    rgba(10,26,47,0.30) 50%,
    rgba(10,26,47,0.70) 68%,
    rgba(10,26,47,0.90) 84%,
    rgba(10,26,47,0.94) 100%);
}
.suburb-card__type,
.suburb-card__name,
.suburb-card__price,
.suburb-card__link {
  position: relative;
  z-index: 2;
}
.suburb-card__forsale {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--gold);
  color: var(--navy);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.34rem 0.7rem;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(10,26,47,0.35);
}
.suburb-card__forsale::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--navy);
}
.suburb-card--sold .suburb-card__forsale { display: none; }
.suburb-card__sold-badge { position: relative; z-index: 2; }
.suburb-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(10,26,47,0.28); border-color: rgba(201,168,106,0.6); }
/* NOBILIS-CHG v63: light text-shadow added alongside the pared-back scrim so
   the small uppercase text keeps its edge over a brighter photo. */
.suburb-card__type {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 0.45rem;
  text-shadow: 0 1px 6px rgba(10,26,47,0.85);
}
.suburb-card__name {
  font-family: var(--ff-display); font-size: 1.65rem; font-weight: 600;
  color: var(--warm-white); line-height: 1.1; margin-bottom: 0.85rem;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.suburb-card__price {
  display: flex; flex-direction: column; gap: 0.15rem;
  font-family: var(--ff-display); font-size: 1.6rem; font-weight: 700; color: #F5C518;
  text-shadow: 0 0 10px rgba(245,197,24,0.55), 0 0 26px rgba(245,197,24,0.3), 0 1px 2px rgba(0,0,0,0.5);
  letter-spacing: 0.01em;
  margin-bottom: 1.2rem;
}
.suburb-card__price span {
  font-family: var(--ff-body); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247,245,242,0.55);
}
.suburb-card__link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warm-white); text-decoration: none; transition: color 0.25s;
  text-shadow: 0 1px 6px rgba(10,26,47,0.85); /* NOBILIS-CHG v63 */
}
.suburb-card__link svg { width: 13px; height: 13px; transition: transform 0.25s; }
.suburb-card__link:hover { color: var(--gold); }
.suburb-card__link:hover svg { transform: translateX(4px); }
/* Sold-out state: add class "suburb-card--sold" to a card and unhide its badge */
.suburb-card--sold { filter: grayscale(0.5); opacity: 0.7; }
.suburb-card--sold:hover { transform: none; box-shadow: none; border-color: rgba(201,168,106,0.28); }
.suburb-card__sold-badge {
  display: none;
  position: absolute; top: 14px; right: -34px;
  transform: rotate(38deg);
  background: var(--gold); color: var(--navy);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.3rem 2.6rem;
}
.suburb-card--sold .suburb-card__sold-badge { display: block; }
.suburb-card--sold .suburb-card__link { display: none; }

/* ============================================================
   FEATURED OPPORTUNITIES CAROUSEL (all widths)
   Rotates one card at a time on an endless loop: 4 across on desktop,
   2 on tablet, 1 on phones. Arrows and dots are generated from the DOM, so
   adding another <article class="suburb-card"> needs no other change here.
   ORDER MATTERS: these rules must stay AFTER the .suburb-grid and
   .suburb-card rules above, because media queries add no specificity.
   ============================================================ */
.suburb-carousel { position: relative; }
/* Phones have no hover, so stop the lift sticking after a tap. */
@media (max-width: 768px) { .suburb-card:hover { transform: none; box-shadow: none; } }
/* NOBILIS-CHG v63: while a finger or mouse is dragging the strip we suppress
   the CSS transition (JS adds .is-dragging) so the cards track the pointer
   one-to-one, and we stop the browser hijacking the gesture as a text select. */
.suburb-grid.is-dragging { transition: none !important; cursor: grabbing; }
.suburb-grid.is-dragging * { user-select: none; }
.suburb-viewport { touch-action: pan-y; }

/* Arrows show at ALL widths now. On desktop they sit just outside the track. */
.suburb-carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,106,0.55);
  background: rgba(10,26,47,0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gold);
  cursor: pointer;
  z-index: 3;
  padding: 0;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.suburb-carousel__arrow:hover { background: var(--gold); color: var(--navy); }
.suburb-carousel__arrow svg { width: 17px; height: 17px; }
.suburb-carousel__arrow--prev { left: -8px; }
.suburb-carousel__arrow--next { right: -8px; }
.suburb-carousel__arrow:active { background: rgba(201,168,106,0.92); color: var(--navy); }
@media (max-width: 768px) {
  .suburb-carousel__arrow { width: 42px; height: 42px; top: 38%; }
  .suburb-carousel__arrow svg { width: 16px; height: 16px; }
  .suburb-carousel__arrow--prev { left: 6px; }
  .suburb-carousel__arrow--next { right: 6px; }
}

.suburb-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 1.4rem; flex-wrap: wrap; }
.suburb-carousel__dot {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%; border: none;
  background: rgba(201,168,106,0.3);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.suburb-carousel__dot[aria-current="true"] { background: var(--gold); width: 20px; border-radius: 4px; }

.network {
  padding: 7.5rem 0;
  background: var(--navy-mid);
  position: relative;
  overflow: hidden;
}
.network__header { text-align: center; max-width: 680px; margin: 0 auto 3.2rem; }
.network__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
  max-width: 1060px;
  margin: 0 auto;
}
.network-card {
  background: rgba(10,26,47,0.55);
  border: 1px solid rgba(201,168,106,0.22);
  border-radius: 10px;
  padding: 2.1rem 1.8rem;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.network-card:hover { border-color: rgba(201,168,106,0.55); transform: translateY(-4px); }
.network-card__icon {
  width: 44px; height: 44px;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.network-card__icon svg { width: 100%; height: 100%; }
.network-card h3 {
  font-family: var(--ff-display);
  font-size: 1.3rem; font-weight: 600;
  color: var(--warm-white);
  margin-bottom: 0.6rem;
}
.network-card p { font-size: 0.9rem; color: rgba(247,245,242,0.62); line-height: 1.7; }
.network__more {
  text-align: center; max-width: 640px; margin: 2.4rem auto 0;
  font-size: 0.95rem; color: rgba(247,245,242,0.7);
}
.network__note {
  text-align: center; max-width: 640px; margin: 1.2rem auto 0;
  font-size: 0.72rem; font-style: italic; color: rgba(247,245,242,0.35);
}

.interstate {
  margin: 3.2rem auto 0;
  max-width: 1000px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-mid) 100%);
  border: 1px solid rgba(201,168,106,0.3);
  border-radius: 10px;
  padding: 2.4rem 2.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.interstate__eyebrow {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin-bottom: 0.5rem;
}
.interstate h3 {
  font-family: var(--ff-display); font-size: 1.6rem; font-weight: 600;
  color: var(--warm-white); margin-bottom: 0.55rem;
}
.interstate p { font-size: 0.93rem; color: rgba(247,245,242,0.65); line-height: 1.7; max-width: 560px; }

.projects__cta { text-align: center; margin-top: 2.8rem; }
.projects__cta p { font-family: var(--ff-display); font-size: 1.3rem; color: var(--navy); margin-bottom: 1.2rem; }
.projects__note {
  text-align: center; font-size: 0.72rem; color: rgba(10,26,47,0.5);
  font-style: italic; margin-top: 1.6rem;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.4rem 0;
  transition: background 0.45s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
.nav.scrolled .nav__shield { height: 42px; }
.nav.scrolled {
  background: rgba(10,26,47,0.97);
  backdrop-filter: blur(12px);
  padding: 0.9rem 0;
  box-shadow: 0 2px 32px rgba(0,0,0,0.18);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 2rem;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  text-decoration: none;
}
.nav__shield {
  height: 50px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.25));
}
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s;
}
.nav__phone:hover { color: var(--warm-white); }
.nav__phone svg { width: 13px; height: 13px; }

.nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.8rem;
  flex: 1;
}
.nav__links a {
  position: relative;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247,245,242,0.82);
  transition: color 0.25s;
  text-decoration: none;
  padding: 0.4rem 0;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav__links a:hover { color: var(--gold); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.active { color: var(--gold); }
.nav__links a.active::after { transform: scaleX(1); }

.nav__cta {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  background: var(--gold);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.nav__cta:hover { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(201,168,106,0.3); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  min-width: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--warm-white);
  transition: transform 0.3s ease, opacity 0.25s ease, width 0.3s ease;
}
/* NOBILIS-CHG v53: the SAME three spans morph into an X. There is only
   ever one control in this corner, so it can never double up visually
   with a separate close button. */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile nav */
/* NOBILIS-CHG v57: mobile menu is now top-anchored and evenly spaced, and it
   can scroll if a short screen needs it, so no item is ever pushed off the
   top or bottom or hidden behind the header. */
.nav__mobile {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--navy);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 5.5rem 1.5rem 2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
.nav__mobile-brand {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 2rem; flex: 0 0 auto;
}
.nav__mobile-brand img { width: 46px; height: auto; margin-bottom: 0.55rem; }
.nav__mobile-brand-name {
  font-family: var(--ff-display); color: var(--warm-white);
  font-size: 1.7rem; letter-spacing: 0.16em; line-height: 1;
}
.nav__mobile-brand-sub {
  font-family: var(--ff-body); color: var(--gold);
  font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase;
  margin-top: 0.35rem; white-space: nowrap;
}
.nav__mobile.open { display: flex; opacity: 1; pointer-events: all; }
/* NOBILIS-CHG v57: evenly spaced links that stay on screen. Size uses a clamp
   so they are never too large on small phones or too small on larger ones. */
.nav__mobile a {
  font-family: var(--ff-display);
  font-size: clamp(1.35rem, 5.5vw, 1.85rem);
  font-weight: 400;
  color: var(--warm-white);
  letter-spacing: 0.04em;
  transition: color 0.25s;
  text-decoration: none;
  min-height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0;
  flex: 0 0 auto;
}
.nav__mobile a:hover { color: var(--gold); }
/* NOBILIS-CHG v53: .nav__mobile-close removed. The hamburger button
   itself now morphs into the X, so a second close control is no
   longer needed and can no longer collide with it. */

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--navy);
}
.hero__skyline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  opacity: 0.12;
  pointer-events: none;
}
/* Etched skyline is a mobile-only treatment, desktop keeps its own skyline. */
.hero__etch { display: none; }
.hero__feature {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 70%;
  object-fit: cover;
  object-position: center left;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%);
  /* NOBILIS-CHG v63: the still frame is now a CSS background rather than the
     video's poster attribute, because a background can be swapped per device.
     Phones pull a 900px 61 KB file instead of the 1920px 152 KB one. It shows
     until the video paints, and stays if the video never loads. */
  background: #0A1A2F url('/hero-poster.webp') center / cover no-repeat;
}
@media (max-width: 768px) {
  .hero__feature { background-image: url('/hero-poster-mobile.webp'); }
}
/* NOTE ON ORDER: this base rule must stay ABOVE the @media blocks below.
   Media queries do not add specificity, so when this sat after them it also
   applied on phones, and its 90deg gradient turned the right-hand side of
   the mobile hero solid navy, hiding the male adviser. Do not move it down. */
.hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10,26,47,0.62) 0%, rgba(10,26,47,0.30) 22%, rgba(10,26,47,0.34) 48%, rgba(10,26,47,0.86) 72%, var(--navy) 88%),
    linear-gradient(180deg, transparent 30%, rgba(10,26,47,0.42) 60%, transparent 85%),
    radial-gradient(ellipse 80% 60% at 40% 100%, rgba(201,168,106,0.07) 0%, transparent 60%);
}
@media (max-width: 900px) {
  /* Small tablets and landscape phones: video fills the frame, centred. */
  .hero__feature { width: 100%; opacity: 0.42; object-position: center; -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 768px) {
  /* MOBILE HERO (phones).
     The backdrop and the etched skyline are anchored to the ACTUAL TEXT, not
     to viewport percentages, because the copy reflows at different phone
     widths and percentages drift off the words. A small script near the
     bottom of this file measures the eyebrow, headline and blurb and sets the
     four --hero-* variables below in pixels. The values here are only
     fallbacks used before that script runs.

     THE BACKDROP: spans from just above the "Melbourne - Off-the-Plan &
     Off-Market Advisory" eyebrow down to just under "Your Future.", so it
     backs the main heading and nothing else. That region happens to be almost
     exactly 16:9, the same shape as the footage, so object-fit: cover fills
     it while still showing about 99% of the scene width. The footage is
     MIRRORED with scaleX(-1) so the two advisers sit on the right of the
     screen, clear of the left-aligned copy.

     THE ETCHED SKYLINE: see .hero__etch further down. */
  .hero {
    --hero-band-top: 8%;
    --hero-band-h: 27%;
    --hero-etch-base: 50%;
    --hero-etch-h: 17%;
  }
  .hero__feature {
    position: absolute;
    left: 0;
    top: var(--hero-band-top);
    width: 100%;
    height: var(--hero-band-h);
    max-height: none;
    object-fit: cover;
    object-position: center;
    opacity: 0.62;
    transform: scaleX(-1);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  /* Mobile veil. Deliberately has NO horizontal gradient: the desktop one
     darkens the right-hand side to solid navy, which buries the male adviser
     now that the footage is mirrored. This is a light vertical veil only,
     tuned to let the scene read through. The copy keeps its own text-shadow
     for legibility. Raise these values if any text looks washed out. */
  .hero__gradient {
    background:
      linear-gradient(180deg,
        rgba(10,26,47,0.46) 0%,
        rgba(10,26,47,0.14) 30%,
        rgba(10,26,47,0.14) 68%,
        rgba(10,26,47,0.46) 100%),
      radial-gradient(ellipse 95% 45% at 50% 100%, rgba(201,168,106,0.05) 0%, transparent 60%);
  }
  /* Guarantee legibility over the motion without over-darkening the scene. */
  .hero__eyebrow,
  .hero__headline,
  .hero__sub,
  .hero__feenote { text-shadow: 0 1px 14px rgba(4,12,24,0.55); }

  /* ETCHED MELBOURNE SKYLINE (mobile only).
     One continuous gold line traced from the same Melbourne silhouette used
     along the bottom of the desktop hero, drawn edge to edge across the
     screen. Stroke only, no filled boxes. It sits behind the intro blurb with
     its base level on the final line (the line ending "...care.") and stands
     about 70% of the blurb's height, so it reads as an elegant shadow behind
     the words rather than a graphic competing with them.
     TWEAK: opacity below (0.28) controls how present the line is. */
  .hero__etch {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(var(--hero-etch-base) - var(--hero-etch-h));
    height: var(--hero-etch-h);
    z-index: 2;
    opacity: 0.28;
    pointer-events: none;
    overflow: visible;
  }
  .hero__etch path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  .hero__watermark { display: none; }
}
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.028;
  /* NOBILIS-CHG v64: this was an feTurbulence fractal-noise SVG filter with 4
     octaves, rasterised across the whole hero on every load. It is one of the
     most expensive things you can ask a mobile CPU to draw, and at 0.028
     opacity nobody can see it anyway. Replaced with a pre-rendered 128px tile,
     which is visually identical and effectively free. Hidden outright on
     phones, where it is invisible at this size. */
  background-image: url('/grain.webp');
  background-repeat: repeat;
  background-size: 128px 128px;
  pointer-events: none;
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero__orb--1 {
  width: 600px; height: 600px;
  top: -200px; right: -100px;
  background: radial-gradient(circle, rgba(201,168,106,0.06) 0%, transparent 65%);
  animation: drift1 18s ease-in-out infinite;
}
.hero__orb--2 {
  width: 400px; height: 400px;
  bottom: 10%; left: -80px;
  background: radial-gradient(circle, rgba(201,168,106,0.04) 0%, transparent 65%);
  animation: drift2 22s ease-in-out infinite;
}
@keyframes drift1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-30px, 20px) scale(1.03); }
  66% { transform: translate(20px, -15px) scale(0.98); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(25px, -20px); }
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8rem 2rem 5rem;
  display: flex;
  align-items: center;
  min-height: 100vh;
}
.hero__left { max-width: 680px; }
.hero__watermark {
  position: absolute;
  top: 50%;
  right: -4%;
  transform: translateY(-50%);
  height: 82%;
  max-height: 760px;
  width: auto;
  opacity: 0.09;
  pointer-events: none;
  z-index: 1;
}
.hero__eyebrow {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  /* NOBILIS-CHG v64: was opacity:0 + a staggered fade. Chrome does not
     count transparent content as painted, so that gated First
     Contentful Paint behind the animation delay. Now opaque from the
     first frame, sliding eyebrow into place on transform alone. */
  animation: nbRise 0.5s 0.0s cubic-bezier(0.22,1,0.36,1) both;
}
.hero__eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
}
.hero__eyebrow::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
}
.hero__headline {
  font-family: var(--ff-display);
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 400;
  line-height: 1.07;
  color: var(--warm-white);
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
  /* NOBILIS-CHG v64: was opacity:0 + a staggered fade. Chrome does not
     count transparent content as painted, so that gated First
     Contentful Paint behind the animation delay. Now opaque from the
     first frame, sliding headline into place on transform alone. */
  animation: nbRise 0.5s 0.05s cubic-bezier(0.22,1,0.36,1) both;
}
.hero__headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}
.hero__feenote {
  font-size: 0.82rem;
  font-weight: 300;
  color: rgba(201,168,106,0.85);
  letter-spacing: 0.03em;
  max-width: 460px;
  margin-top: 1.4rem;
  line-height: 1.7;
  /* NOBILIS-CHG v64: was opacity:0 + a staggered fade. Chrome does not
     count transparent content as painted, so that gated First
     Contentful Paint behind the animation delay. Now opaque from the
     first frame, sliding fee note into place on transform alone. */
  animation: nbRise 0.5s 0.2s cubic-bezier(0.22,1,0.36,1) both;
}

.hero__sub {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(247,245,242,0.72);
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 2.5rem;
  /* NOBILIS-CHG v64: was opacity:0 + a staggered fade. Chrome does not
     count transparent content as painted, so that gated First
     Contentful Paint behind the animation delay. Now opaque from the
     first frame, sliding sub into place on transform alone. */
  animation: nbRise 0.5s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  /* NOBILIS-CHG v64: was opacity:0 + a staggered fade. Chrome does not
     count transparent content as painted, so that gated First
     Contentful Paint behind the animation delay. Now opaque from the
     first frame, sliding buttons into place on transform alone. */
  animation: nbRise 0.5s 0.15s cubic-bezier(0.22,1,0.36,1) both;
}
.hero__visual {
  position: relative;
  height: 520px;
  /* NOBILIS-CHG v64: see note above, transform-only now. */
  animation: nbRise 0.6s 0.18s cubic-bezier(0.22,1,0.36,1) both;
}
.hero__img-card {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}
.hero__img-card--main {
  width: 78%;
  height: 360px;
  top: 0; right: 0;
  background: linear-gradient(135deg, #0d2240 0%, #1a3a6b 50%, #0d2240 100%);
  border: 1px solid rgba(201,168,106,0.15);
}
.hero__img-card--accent {
  width: 48%;
  height: 200px;
  bottom: 0; left: 0;
  background: linear-gradient(135deg, #162d55 0%, #0d2240 100%);
  border: 1px solid rgba(201,168,106,0.12);
}
.hero__card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.hero__card-label {
  font-family: var(--ff-body);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  position: absolute;
  bottom: 1rem;
  left: 1.25rem;
}
.hero__stat-badge {
  position: absolute;
  top: -1rem;
  left: -1.5rem;
  background: var(--gold);
  color: var(--navy);
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 10;
}
.hero__stat-badge .num {
  font-family: var(--ff-display);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
  display: block;
}
.hero__stat-badge .lbl {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  display: block;
  margin-top: 2px;
}
.hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  /* NOBILIS-CHG v64: delay pulled in from 1.2s. This one keeps a real fade
     because it is small, decorative, and paints after the headline. */
  opacity: 0;
  animation: fadeIn 0.6s 0.45s forwards;
}
.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
.hero__scroll-text {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,168,106,0.5);
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
/* NOBILIS-CHG v65: a min-height was added here in v64 to absorb a font-swap
   reflow. On review that was wrong. The headline is broken with explicit <br>
   tags into "Your Trust. / Our Expertise. / Your Future.", so it is locked at
   three lines and cannot rewrap whatever font is in use. Its line-height is a
   multiple of font-size, not of the font's own metrics, so the block is the
   same height either way. The rule did nothing and has been removed rather
   than left in place looking like it does something. */

/* NOBILIS-CHG v64: the rise used for above-the-fold hero content. Deliberately
   has NO opacity component, so the browser can paint immediately and First
   Contentful Paint is not held hostage to an animation delay. */
@keyframes nbRise {
  from { transform: translateY(14px); }
  to   { transform: none; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar {
  background: var(--navy-mid);
  border-top: 1px solid rgba(201,168,106,0.12);
  border-bottom: 1px solid rgba(201,168,106,0.12);
  padding: 1.3rem 1.5rem;
  overflow: hidden;
}
.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem 1.9rem;
  max-width: 920px;
  margin: 0 auto;
}
.trust-bar__item {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201,168,106,0.65);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}
.trust-bar__item::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  background: var(--gold-dark);
  border-radius: 50%;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about { padding: 8rem 0; background: var(--warm-white); position: relative; overflow: hidden; }
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
.about__text .section-lead { max-width: 100%; }
.about__text p {
  font-size: 1.0rem;
  line-height: 1.85;
  color: #4a4a4a;
  margin-top: 1.25rem;
}
.about__legal {
  font-size: 0.8rem;
  color: var(--gray);
  font-style: italic;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-light);
}

/* Founder card */
.about__visual { position: relative; }
.founder-card {
  background:
    linear-gradient(rgba(10,26,47,0.85), rgba(10,26,47,0.88)),
    url('/handshake.webp') center / cover no-repeat;
  /* NOBILIS-CHG v63: 900px variant for phones, 86 KB -> 27 KB */
  background-color: var(--navy);
  padding: 3rem 2.75rem;
  position: relative;
  overflow: hidden;
}
.founder-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(201,168,106,0.07) 0%, transparent 60%);
}
.founder-card__accent {
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--gold), transparent);
}
.founder-card__avatar {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-pale) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-family: var(--ff-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--navy);
}
.founder-card__name {
  font-family: var(--ff-display);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--warm-white);
  line-height: 1.2;
}
.founder-card__title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.35rem;
}
.founder-card__bio {
  font-size: 0.93rem;
  color: rgba(247,245,242,0.68);
  line-height: 1.75;
  margin-top: 1.25rem;
}
.founder-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(201,168,106,0.15);
}
.founder-stat__num {
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.founder-stat__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247,245,242,0.5);
  margin-top: 0.3rem;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services {
  padding: 8rem 0;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.services::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(201,168,106,0.05) 0%, transparent 60%);
}
.services__header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 1;
}
.services__header .section-tag { justify-content: center; }
.services__header .section-tag::before { display: none; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  position: relative;
  z-index: 1;
}
.service-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(201,168,106,0.1);
  padding: 2.75rem 2.25rem;
  transition: background 0.35s, border-color 0.35s, transform 0.35s;
  position: relative;
  overflow: hidden;
}
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  transition: width 0.4s ease;
}
.service-card:hover {
  background: rgba(201,168,106,0.05);
  border-color: rgba(201,168,106,0.22);
  transform: translateY(-3px);
}
.service-card:hover::after { width: 100%; }
.service-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 1.5rem;
  color: var(--gold);
  opacity: 0.85;
}
.service-card__icon svg { width: 100%; height: 100%; }
/* NOBILIS-CHG v61: custom N-shield service icons lift, scale and brighten
   on hover, matching the audience section's premium cue. */
.service-card__icon { transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease; }
.service-card:hover .service-card__icon { transform: translateY(-3px) scale(1.09); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .service-card:hover .service-card__icon { transform: none; } }
.service-card__title {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--warm-white);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.service-card__desc {
  font-size: 0.9rem;
  color: rgba(247,245,242,0.55);
  line-height: 1.75;
}
.services__cta {
  text-align: center;
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}

/* ============================================================
   PROCESS
   ============================================================ */
.process { padding: 8rem 0; background: var(--warm-white); }
.process__header { text-align: center; margin-bottom: 4rem; }
.process__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  counter-reset: step-counter;
}
.process__steps::before {
  content: '';
  position: absolute;
  top: 2.15rem;
  left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
  z-index: 0;
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}
.process-step__num {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  border: 2px solid var(--gold-dark);
  background: var(--warm-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 1.5rem;
  transition: background 0.35s, color 0.35s;
  cursor: default;
}
.process-step:hover .process-step__num { background: var(--navy); color: var(--gold); }
.process-step__title {
  font-family: var(--ff-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.6rem;
  line-height: 1.25;
}
.process-step__desc { font-size: 0.82rem; color: var(--gray); line-height: 1.65; }

/* ============================================================
   INTERNATIONAL
   ============================================================ */
.international {
  padding: 8rem 0;
  background: var(--navy-mid);
  position: relative;
  overflow: hidden;
}
.international__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 0% 50%, rgba(201,168,106,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 100% 50%, rgba(10,26,47,0.5) 0%, transparent 70%);
}
.international__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  position: relative;
  z-index: 1;
}
.international__markets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}
.market-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(201,168,106,0.15);
  padding: 1.25rem 1.25rem;
  transition: background 0.3s, border-color 0.3s;
}
.market-card:hover {
  background: rgba(201,168,106,0.08);
  border-color: rgba(201,168,106,0.3);
}
.market-card__flag {
  width: 34px;
  height: 34px;
  margin: 0 0 0.7rem;
  color: var(--gold);
}
.market-card__flag svg { width: 100%; height: 100%; }
.market-card__name {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.market-card__desc {
  font-size: 0.78rem;
  color: rgba(247,245,242,0.5);
  line-height: 1.6;
}
.international__visual {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.intl-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,168,106,0.12);
  padding: 1.75rem 2rem;
  transition: background 0.3s;
}
.intl-card:hover { background: rgba(201,168,106,0.06); }
.intl-card__icon {
  width: 32px;
  height: 32px;
  color: var(--gold);
  margin-bottom: 0.85rem;
}
.intl-card__icon svg { width: 100%; height: 100%; }
.intl-card__title {
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.intl-card__text { font-size: 0.88rem; color: rgba(247,245,242,0.6); line-height: 1.7; }
.international__viet-btn {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.viet-flag { font-size: 1.4rem; line-height: 1; }

/* ============================================================
   RESOURCES
   ============================================================ */
.resources { padding: 8rem 0; background: var(--warm-white); }
.resources__header { margin-bottom: 3.5rem; }
.guide-card {
  background: var(--navy);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  margin-bottom: 3rem;
}
.guide-card__cover {
  background:
    linear-gradient(135deg, rgba(18,43,82,0.90) 0%, rgba(13,34,64,0.93) 100%),
    url('/resources-montage-bg.jpg') center center / cover no-repeat;
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.guide-card__cover::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  border: 1px solid rgba(201,168,106,0.12);
  border-radius: 50%;
}
.guide-card__cover::after {
  content: '';
  position: absolute;
  top: 20px; right: 20px;
  width: 120px; height: 120px;
  border: 1px solid rgba(201,168,106,0.08);
  border-radius: 50%;
}
.guide-card__label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}
.guide-card__label::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
.guide-card__title-wrap { position: relative; z-index: 1; }
.guide-card__title {
  font-family: var(--ff-display);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--warm-white);
  line-height: 1.2;
}
.guide-card__year { font-family: var(--ff-display); font-size: 1.1rem; color: var(--gold); font-style: italic; }
.guide-card__info {
  background: rgba(255,255,255,0.03);
  border-left: 1px solid rgba(201,168,106,0.1);
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.guide-card__desc { font-size: 0.95rem; color: rgba(247,245,242,0.65); line-height: 1.8; margin-bottom: 2rem; }
.guide-card__topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.topic-chip {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,168,106,0.25);
  padding: 0.35rem 0.75rem;
}
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
/* NOBILIS-CHG v62: if the final row holds a single orphan card, centre it
   under the middle column so the grid reads as intentional, not unfinished.
   Scoped to a genuine 3n+1 orphan, so it self-disables if the count changes. */
.blog-grid > .blog-card:last-child:nth-child(3n+1) { grid-column: 2; }
.blog-card {
  background: white;
  border: 1px solid var(--gray-light);
  padding: 2rem;
  transition: box-shadow 0.35s, transform 0.35s;
  display: block;
  text-decoration: none;
  color: inherit;
}
.blog-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); transform: translateY(-2px); }
.blog-card__tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-text); /* NOBILIS-CHG-contrast */
  margin-bottom: 0.75rem;
}
.blog-card__title {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 0.75rem;
}
.blog-card__excerpt { font-size: 0.85rem; color: var(--gray); line-height: 1.7; }
.blog-card__meta {
  font-size: 0.72rem;
  color: #aaa;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-light);
  display: flex;
  gap: 1rem;
}

/* ============================================================
   NOBILIS-CHG v63: MARKET INSIGHTS DECK
   Ten articles used to sit in a 3-across grid four rows deep. They now sit in
   a rotating deck: the front article at full size with one article layered
   either side, angled back into the page. Three headlines stay readable and
   the section drops from roughly four screens of cards to one.

   PROGRESSIVE ENHANCEMENT: none of this applies until the script adds
   .is-deck. With JavaScript off the original grid renders exactly as before,
   and all ten <a href> links are in the raw HTML either way, so nothing is
   hidden from a crawler.

   TUNING: the four custom properties below drive the geometry. --nb-deck-step
   is the horizontal gap between card centres as a fraction of the stage, so
   0.32 means the side cards sit 32% of the stage width out from the middle.
   ============================================================ */
.blog-carousel { position: relative; }
.blog-carousel.is-deck {
  /* On tablet and phone the side cards intentionally run past the stage edge
     so only a sliver of each shows, which is what makes it read as a deck.
     Clip that overhang, otherwise it becomes a horizontal page scroll.
     overflow-x:clip is used rather than hidden because clip does not create a
     scroll container, so the vertical shadows are still free to spill. */
  overflow-x: clip;
  overflow-y: visible;
  --nb-deck-step: 0.32;        /* side card offset, fraction of stage width */
  --nb-deck-side-scale: 0.90;  /* how far the side cards fall back */
  --nb-deck-side-rot: 13;      /* degrees they angle toward the middle */
  --nb-deck-h: 360px;          /* fixed stage height, keeps all cards equal */
  perspective: 1600px;
  padding: 0 3.2rem;
}
.blog-carousel.is-deck .blog-grid {
  display: block;
  position: relative;
  height: var(--nb-deck-h);
  max-width: 1160px;
  margin: 0 auto;
  transform-style: preserve-3d;
}
.blog-carousel.is-deck .blog-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 36%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.75rem;
  border-radius: 8px;
  backface-visibility: hidden;
  /* Only transform and opacity animate, so the whole deck runs on the
     compositor and stays smooth on a phone. */
  transition: transform 0.7s cubic-bezier(0.33,0.9,0.28,1),
              opacity 0.7s ease,
              box-shadow 0.35s ease;
}
/* The front card is lifted off the page, the ones behind sit flatter. */
.blog-carousel.is-deck .blog-card[data-slot="0"] {
  box-shadow: 0 26px 60px rgba(10,26,47,0.16), 0 3px 10px rgba(10,26,47,0.07);
  border-color: rgba(201,168,106,0.55);
}
.blog-carousel.is-deck .blog-card[data-slot="-1"],
.blog-carousel.is-deck .blog-card[data-slot="1"] {
  box-shadow: 0 14px 34px rgba(10,26,47,0.10);
}
/* Hover lift is a grid-mode idea, it fights the deck transform. */
.blog-carousel.is-deck .blog-card:hover { transform: none; }
.blog-carousel.is-deck .blog-card[data-slot="0"]:hover {
  box-shadow: 0 30px 68px rgba(10,26,47,0.20), 0 3px 10px rgba(10,26,47,0.08);
}
/* Cards deeper in the deck are inert: invisible, unclickable, untabbable,
   but still present in the DOM and still crawlable. */
.blog-carousel.is-deck .blog-card[data-deep="true"] { pointer-events: none; }

/* Uniform card height means the copy has to be clamped. The full text stays
   in the markup for search engines, this only limits what is drawn. */
.blog-carousel.is-deck .blog-card__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  line-clamp: 3; overflow: hidden;
}
.blog-carousel.is-deck .blog-card__excerpt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  line-clamp: 4; overflow: hidden; flex: 1 1 auto;
}
.blog-carousel.is-deck .blog-card__meta { margin-top: auto; }

/* ---- Controls, styled to match the Featured Opportunities carousel ---- */
.blog-carousel__arrow {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,106,0.55);
  background: var(--warm-white);
  color: var(--navy);
  cursor: pointer; z-index: 40; padding: 0;
  box-shadow: 0 4px 16px rgba(10,26,47,0.12);
  transition: background 0.25s ease, color 0.25s ease;
}
.blog-carousel__arrow:hover  { background: var(--gold); color: var(--navy); }
.blog-carousel__arrow:active { background: rgba(201,168,106,0.92); }
.blog-carousel__arrow svg { width: 17px; height: 17px; }
.blog-carousel__arrow--prev { left: 0; }
.blog-carousel__arrow--next { right: 0; }
.blog-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 1.9rem; flex-wrap: wrap; }
.blog-carousel__dot {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%; border: none;
  background: rgba(10,26,47,0.18);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.blog-carousel__dot[aria-current="true"] { background: var(--gold-text); width: 20px; border-radius: 4px; }
.blog-carousel__count {
  text-align: center; margin-top: 0.9rem;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray);
}

/* ---- Tablet: pull the side cards in so nothing runs off the edge ---- */
@media (max-width: 1020px) {
  .blog-carousel.is-deck {
    --nb-deck-step: 0.36;
    --nb-deck-side-scale: 0.86;
    --nb-deck-h: 380px;
    padding: 0 2.6rem;
  }
  .blog-carousel.is-deck .blog-card { width: 46%; }
}

/* ---- Phones: one article front and centre, the deck edges just visible
        either side so it is obvious there is more to come. ---- */
@media (max-width: 768px) {
  .blog-carousel.is-deck {
    --nb-deck-step: 0.60;
    --nb-deck-side-scale: 0.84;
    --nb-deck-side-rot: 10;
    --nb-deck-h: 355px;
    padding: 0;
  }
  .blog-carousel.is-deck .blog-card { width: 78%; padding: 1.6rem 1.4rem; }
  .blog-carousel.is-deck .blog-card__title { font-size: 1.08rem; }
  /* Arrows overlay the deck edges rather than sitting outside it. */
  .blog-carousel__arrow { width: 40px; height: 40px; }
  .blog-carousel__arrow--prev { left: 2px; }
  .blog-carousel__arrow--next { right: 2px; }
}
@media (max-width: 400px) {
  .blog-carousel.is-deck { --nb-deck-h: 390px; }
  .blog-carousel.is-deck .blog-card { width: 84%; }
}

/* Safari before 16 has no overflow-x:clip. Fall back to hidden, which costs
   a little shadow bleed but still prevents the sideways scroll. */
@supports not (overflow-x: clip) {
  .blog-carousel.is-deck { overflow: hidden; padding-top: 8px; padding-bottom: 8px; }
}

/* Reduced motion: the deck still works, it just snaps instead of gliding. */
@media (prefers-reduced-motion: reduce) {
  .blog-carousel.is-deck .blog-card { transition: none; }
}


/* ============================================================
   NOBILIS-CHG v66: CLIENT TESTIMONIALS  -  LIVE
   Built in v64 as a hidden shell, published in v66 with the first real
   Google review. Everything on the page is a verbatim client quote.
   Adding another review needs no CSS change: see the note in index.html.
   ============================================================ */
.testimonials { padding: 7rem 0; background: var(--gold-pale); }
.testimonials__header { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1160px;
  margin: 0 auto;
}
@media (max-width: 1020px) { .testimonial-grid { grid-template-columns: 1fr; max-width: 620px; } }
.testimonial-card {
  background: #fff;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem; left: 1.4rem;
  font-family: var(--ff-display);
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(201,168,106,0.28);
  pointer-events: none;
}
.testimonial-card__stars { display: flex; gap: 3px; margin-bottom: 1rem; color: var(--gold); }
.testimonial-card__stars svg { width: 15px; height: 15px; }
.testimonial-card__quote {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--navy);
  margin-bottom: 1.5rem;
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}
.testimonial-card__who {
  border-top: 1px solid var(--gray-light);
  padding-top: 1rem;
  font-size: 0.8rem;
  color: var(--gray);
}
.testimonial-card__name { display: block; font-weight: 600; color: var(--navy); margin-bottom: 0.15rem; }
.testimonials__note { text-align: center; margin-top: 2.5rem; font-size: 0.78rem; color: var(--gray); }
.testimonials__note a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }

/* NOBILIS-CHG v66: with a single review, a three-across grid looks unfinished.
   This variant centres one wider card so it reads as a deliberate feature.
   Add a second <figure> and the modifier stops applying, because the grid
   below only kicks in when there is exactly one child. Nothing to change by
   hand when the next review comes in. */
.testimonial-grid--single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.testimonial-grid--single .testimonial-card { padding: 2.8rem 2.6rem; }
.testimonial-grid--single .testimonial-card__quote { font-size: 1.18rem; line-height: 1.75; }
/* Two or more cards: fall back to the normal grid even if the modifier is left on. */
.testimonial-grid--single:has(.testimonial-card:nth-child(2)) {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1020px) {
  .testimonial-grid--single:has(.testimonial-card:nth-child(2)) { grid-template-columns: 1fr; }
  .testimonial-grid--single .testimonial-card { padding: 2.2rem 1.8rem; }
  .testimonial-grid--single .testimonial-card__quote { font-size: 1.05rem; }
}

/* The short headline the reviewer gave their own review. */
.testimonial-card__headline {
  font-family: var(--ff-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.9rem;
  position: relative;
  z-index: 1;
}
/* "Verified Google review" line under the reviewer's name. */
.testimonial-card__src {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  color: var(--gray);
  letter-spacing: 0.02em;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: 8rem 0; background: var(--navy); position: relative; overflow: hidden; }
.faq__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem;
  align-items: start;
  position: relative;
  z-index: 1;
}

.faq__left .section-title--gold { max-width: 300px; }
.faq__left p { font-size: 0.9rem; color: rgba(247,245,242,0.55); line-height: 1.75; margin-top: 1rem; }
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid rgba(201,168,106,0.1); overflow: hidden; }
.faq-item:first-child { border-top: 1px solid rgba(201,168,106,0.1); }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  cursor: pointer;
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--warm-white);
  gap: 1rem;
  user-select: none;
  transition: color 0.25s;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}
.faq-question:hover { color: var(--gold); }
.faq-question:hover .faq-icon { border-color: var(--gold); color: var(--gold); }
.faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(201,168,106,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--gold);
  transition: all 0.3s;
  line-height: 1;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s;
}
.faq-item.open .faq-answer { max-height: 1200px; }
.faq-answer p { font-size: 0.9rem; color: rgba(247,245,242,0.6); line-height: 1.8; padding-bottom: 1.5rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.fb-strip { background: var(--navy-mid); padding: 2.6rem 0; }
.fb-strip__inner {
  max-width: 1000px; margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.fb-strip__title { font-family: var(--ff-display); font-size: 1.5rem; color: var(--warm-white); font-weight: 500; }
.fb-strip__text p { font-size: 0.9rem; color: rgba(247,245,242,0.65); margin-top: 0.3rem; }

.contact { padding: 8rem 0; background: var(--warm-white); position: relative; overflow: hidden; }
.contact__watermark {
  position: absolute; left: -7%; bottom: -12%;
  height: 70%; width: auto; opacity: 0.05; pointer-events: none;
}
.contact__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}
.contact__info .section-lead { max-width: 400px; }
.contact-details { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.contact-detail { display: flex; align-items: flex-start; gap: 1rem; }
.contact-detail__icon {
  width: 36px;
  height: 36px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
}
.contact-detail__icon svg { width: 16px; height: 16px; }
.contact-detail__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.2rem;
}
.contact-detail__value { font-size: 0.95rem; color: var(--charcoal); }
.contact-detail__value a { color: var(--charcoal); text-decoration: none; }
.contact-detail__value a:hover { color: var(--navy); }

/* Form */
.contact-form { background: var(--navy); padding: 3rem; position: relative; border: 1px solid var(--gold); }
.contact-form::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201,168,106,0.45); pointer-events: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247,245,242,0.5);
  margin-bottom: 0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(201,168,106,0.3);
  padding: 0.85rem 1rem;
  font-family: var(--ff-body);
  font-size: 0.9rem;
  color: var(--warm-white);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  -webkit-appearance: none;
  min-height: 48px;
}
/* NOBILIS-CHG v59: neutralise the browser's own autofill styling.
   Chrome and Safari repaint an autofilled field pale blue with black
   text by default, which cannot be overridden with background-color
   alone. This keeps a filled field looking like every other field. */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group select:-webkit-autofill,
.form-group textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--warm-white);
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.09) inset;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.09) inset;
  caret-color: var(--gold);
  transition: background-color 5000s ease-in-out 0s;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(247,245,242,0.25); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,106,0.14); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select { color: var(--warm-white); }
.form-group select option { background: var(--navy); }
.form-submit {
  width: 100%;
  padding: 1rem;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 52px;
}
.form-submit:hover { background: var(--gold-dark); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(201,168,106,0.3); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--navy);
  padding: 4rem 0 2rem;
  border-top: 1px solid rgba(201,168,106,0.1);
  position: relative;
  overflow: hidden;
}
.footer::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(45%, -50%);
  height: 132%;
  aspect-ratio: 478 / 600;
  background: url('/nobilis-shield-gold.png') center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.footer .container { position: relative; z-index: 1; }
.footer__main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer__logo {
  display: block;
  margin-bottom: 1.25rem;
  text-decoration: none;
}
.footer__logo img { height: 52px; width: auto; }
.footer__brand p {
  font-size: 0.83rem;
  color: rgba(247,245,242,0.45);
  line-height: 1.75;
  max-width: 280px;
  margin-bottom: 1.5rem;
}
.footer__abn {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(201,168,106,0.4);
  margin-bottom: 1rem;
}
.footer__socials { display: flex; gap: 0.75rem; }
.social-link {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(201,168,106,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(247,245,242,0.5);
  font-size: 0.75rem;
  transition: all 0.3s;
  text-decoration: none;
}
.social-link:hover { border-color: var(--gold); color: var(--gold); }
.social-link svg { width: 14px; height: 14px; }
.footer__col-title {
  font-family: var(--ff-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer__col a {
  font-size: 0.85rem;
  color: rgba(247,245,242,0.5);
  transition: color 0.25s;
  text-decoration: none;
  display: block;
}
.footer__col a:hover { color: var(--warm-white); }
.footer__bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(201,168,106,0.08);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer__disclosure { font-size: 0.75rem; color: rgba(247,245,242,0.3); line-height: 1.6; max-width: 680px; }
.footer__copy { font-size: 0.75rem; color: rgba(247,245,242,0.25); white-space: normal; }
.footer__legal {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
.footer__legal a {
  font-size: 0.72rem;
  color: rgba(247,245,242,0.25);
  text-decoration: none;
  transition: color 0.25s;
}
.footer__legal a:hover { color: rgba(247,245,242,0.6); }

/* ============================================================
   VIETNAMESE MODAL
   ============================================================ */
.viet-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: stretch;
}
.viet-modal.open { display: flex; }
.viet-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,26,47,0.85);
  backdrop-filter: blur(8px);
}
.viet-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--warm-white);
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  overflow-y: auto;
  padding: 4rem;
  animation: slideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: none; }
}
.viet-modal__close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  width: 44px; height: 44px;
  background: var(--navy);
  border: none;
  color: var(--warm-white);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viet-modal__flag { font-size: 2.5rem; margin-bottom: 1rem; }
.viet-modal h2 {
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.viet-modal__sub { font-size: 0.85rem; color: var(--gray); margin-bottom: 2.5rem; font-style: italic; }
.viet-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--gray-light);
}
.viet-section:last-child { border-bottom: none; }
.viet-section h3 {
  font-family: var(--ff-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.viet-section p, .viet-section li { font-size: 0.95rem; color: #4a4a4a; line-height: 1.8; }
.viet-section ul { padding-left: 1.25rem; }
.viet-section li { list-style: disc; margin-bottom: 0.4rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero__content { min-height: auto; padding-top: 7rem; }
  .hero__watermark { height: 52%; right: -22%; opacity: 0.07; }
  .about__inner { grid-template-columns: 1fr; }
  .about__inner > * { min-width: 0; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .international__inner { grid-template-columns: 1fr; }
  .footer__main { grid-template-columns: 1fr 1fr; }
  .guide-card { grid-template-columns: 1fr; }
  .faq__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  .services, .local-buyers {
    background:
      radial-gradient(ellipse 85% 45% at 50% 0%, rgba(201,168,106,0.06) 0%, transparent 55%),
      linear-gradient(172deg, var(--navy) 0%, var(--navy-mid) 70%, #15315c 100%);
  }
  .founder-stat__num { font-size: 1.4rem; }
}

@media (max-width: 768px) {
  .nav__links, .nav__cta, .nav__phone { display: none; }
  .nav__toggle { display: flex; }
  .hero__content { padding-top: 6rem; }
  .services__grid { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: 1fr; gap: 0; }
  .process__steps::before { display: none; }
  .process-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 0 0 2rem 1.5rem;
    border-left: 2px solid var(--gold-dark);
  }
  .process-step:last-child { border-left-color: transparent; }
  .process-step__num { flex-shrink: 0; margin-bottom: 0; margin-left: -2.5rem; }
  .contact__inner { grid-template-columns: 1fr; }
  .contact-form { padding: 2rem; }
  .form-row { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-grid > .blog-card:last-child:nth-child(3n+1) { grid-column: auto; }
  .footer__main { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
  .international__markets { grid-template-columns: 1fr; }
  .viet-modal__panel { padding: 2.5rem 1.5rem; }
  /* Prevent iOS auto-zoom on form inputs */
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; }
  .btn { width: 100%; justify-content: center; }
  .hero__buttons .btn { width: auto; }
}

/* ============================================================
   NOBILIS CUSTOM ASSET STYLES
   ============================================================ */
.nobilis-logo { max-height:64px; height:auto; width:auto; display:inline-block; vertical-align:middle; }
.nobilis-profile-photo { width:160px; height:160px; object-fit:cover; border-radius:50%; border:2px solid rgba(0,0,0,0.06); }
@media (max-width:768px) { .nobilis-profile-photo { width:120px; height:120px; } .nobilis-logo { max-height:48px; } }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero__headline, .hero__sub, .hero__eyebrow, .hero__buttons, .hero__visual, .hero__scroll {
    animation: none;
    opacity: 1;
    transform: none; /* NOBILIS-CHG v64: also cancel the nbRise offset */
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__orb--1, .hero__orb--2, .hero__scroll-line { animation: none; }
}

/* ============================================================
   WHO WE SERVE — Audience segment cards
   ============================================================ */
.audience {
  padding: 5rem 0;
  background: #fff;
  border-bottom: 1px solid var(--gray-light);
}
.audience__header {
  text-align: center;
  margin-bottom: 3rem;
}
.audience__header .section-tag { justify-content: center; }
.audience__header .section-lead {
  max-width: 640px;
  margin: 1rem auto 0;
}
.audience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.audience-card {
  background: var(--warm-white);
  border: 1px solid var(--gray-light);
  border-top: 3px solid var(--gold-dark);
  padding: 1.75rem 1.5rem;
  transition: box-shadow var(--transition), transform var(--transition);
}
.audience-card:hover {
  box-shadow: 0 8px 28px rgba(10,26,47,0.09);
  transform: translateY(-3px);
}
.audience-card__icon {
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  color: var(--gold-dark);
}
.audience-card__icon svg { width: 100%; height: 100%; }
/* NOBILIS-CHG v60: custom N-shield icons lift, scale and brighten on hover. */
.audience-card__icon { transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), color 0.4s ease; }
.audience-card:hover .audience-card__icon { transform: translateY(-3px) scale(1.09); color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .audience-card__icon { transition: color 0.4s ease; }
  .audience-card:hover .audience-card__icon { transform: none; }
}
.audience-card__title {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
.audience-card__desc { font-size: 0.83rem; color: var(--gray); line-height: 1.65; }

/* ============================================================
   LOCAL BUYERS & OWNER-OCCUPIERS SECTION
   ============================================================ */
.local-buyers {
  padding: 5.5rem 0;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.local-buyers::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/melbourne-skyline.webp') center bottom / cover no-repeat; /* NOBILIS-CHG v63 mobile variant below */
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.65) 38%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.65) 38%, #000 100%);
}
.local-buyers__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  position: relative;
  z-index: 1;
}
.local-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(201,168,106,0.18);
  padding: 1.75rem 1.75rem;
  margin-bottom: 1rem;
  transition: background var(--transition);
}
.local-card:hover { background: rgba(255,255,255,0.07); }
.local-card:last-child { margin-bottom: 0; }
.local-card__icon {
  width: 34px;
  height: 34px;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.local-card__icon svg { width: 100%; height: 100%; }
/* NOBILIS-CHG v60: same premium lift on the dark local-buyers cards. */
.local-card__icon { transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); }
.local-card:hover .local-card__icon { transform: translateY(-3px) scale(1.09); }
@media (prefers-reduced-motion: reduce) { .local-card:hover .local-card__icon { transform: none; } }
.local-card__title {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.local-card__text { font-size: 0.88rem; color: rgba(247,245,242,0.72); line-height: 1.75; }

@media (max-width: 1024px) {
  .audience__grid { grid-template-columns: repeat(3, 1fr); }
  .local-buyers__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 768px) {
  .audience__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .audience__grid { grid-template-columns: 1fr; }
}

/* --- Featured guide email capture (added) --- */
.guide-capture{margin-top:1.6rem;padding-top:1.5rem;border-top:1px solid rgba(201,168,106,0.18);}
.guide-capture--primary{border-top:none;padding-top:0;margin-top:1.4rem;}
.guide-capture__or{display:block;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(247,245,242,0.45);margin-bottom:0.8rem;}
.guide-capture__row{display:flex;gap:0.6rem;flex-wrap:wrap;}
.guide-capture__row input{flex:1 1 220px;min-width:0;background:rgba(255,255,255,0.05);border:1px solid rgba(201,168,106,0.2);padding:0.8rem 1rem;font-family:var(--ff-body);font-size:0.9rem;color:var(--warm-white);outline:none;min-height:48px;-webkit-appearance:none;}
.guide-capture__row input::placeholder{color:rgba(247,245,242,0.25);}
.guide-capture__row input:focus{border-color:var(--gold);}
.guide-capture__btn{background:transparent;border:1px solid var(--gold);color:var(--gold);font-family:var(--ff-body);font-size:0.74rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:0.8rem 1.4rem;cursor:pointer;transition:all 0.3s;min-height:48px;white-space:nowrap;}
.guide-capture__btn:hover{background:var(--gold);color:var(--navy);}
.guide-capture__btn:disabled{opacity:0.6;cursor:default;}
.guide-capture__note{font-size:0.78rem;color:var(--gold);margin-top:0.7rem;min-height:1.1em;line-height:1.5;}
@media (max-width:768px){.guide-capture__row input{font-size:16px;}}

/* ============================================================
   MOBILE TONE BALANCE (max-width 768px) - added in launch-26
   Breaks the run of dark sections (network, international,
   local-buyers) so the phone view reads lighter and more
   premium. Desktop (>768px) is completely untouched. Hero,
   services, faq and footer stay dark as deliberate accents.
   The interstate callout inside network is left dark on
   purpose as a highlight panel.
   ============================================================ */
@media (max-width: 768px) {

  /* Section backgrounds: was a three-section dark tunnel */
  .network       { background: var(--warm-white); }
  .international { background: var(--gold-pale); }
  .international__bg { display: none; }
  .local-buyers  { background: var(--warm-white); }

  /* Lighten cards, keep gold accents, give a soft premium lift */
  .network-card,
  .market-card,
  .intl-card,
  .local-card {
    background: #fff;
    border-color: rgba(168,137,79,0.28);
    box-shadow: 0 6px 18px rgba(10,26,47,0.06);
  }

  /* NETWORK text (interstate callout intentionally stays dark) */
  .network .section-title--light { color: var(--navy); }
  .network .section-lead--light { color: var(--charcoal); }
  .network-card h3 { color: var(--navy); }
  .network-card p  { color: var(--gray); }
  .network__more   { color: var(--charcoal); }
  .network__note   { color: rgba(10,26,47,0.45); }

  /* INTERNATIONAL text: gold titles wash out on light, so darken them */
  .international .section-title--gold { color: var(--navy); }
  .international .section-lead { color: var(--charcoal); }
  .intl-card__title  { color: var(--navy); }
  .intl-card__text   { color: var(--gray); }
  .market-card__name { color: var(--gold-text); } /* NOBILIS-CHG-contrast */
  .market-card__desc { color: var(--gray); }

  /* LOCAL-BUYERS text: gold titles wash out on light, so darken them */
  .local-buyers .section-title--gold { color: var(--navy); }
  .local-buyers .section-lead--light { color: var(--charcoal); }
  .local-card__title { color: var(--navy); }
  .local-card__text { color: var(--gray); }
  .local-buyers .btn-outline { color: var(--navy); border-color: var(--navy); }
  .local-buyers .btn-outline:hover { background: var(--navy); color: var(--warm-white); border-color: var(--navy); }

  /* Tighten header-to-content gaps so the cards sit closer on mobile */
  .network__header   { margin-bottom: 1.8rem; }
  .projects__header  { margin-bottom: 1.8rem; }
  .process__header   { margin-bottom: 2rem; }
  .resources__header { margin-bottom: 2rem; }

}

  /* INTERSTATE MAP + PIN PULSE — launch-29 */
  .interstate { gap: 1.5rem 2.5rem; align-items: center; }
  .interstate__text { flex: 1 1 300px; }
  .interstate__cta { margin-top: 1.5rem; }
  .interstate__map { flex: 0 0 360px; max-width: 100%; }
  .interstate__map svg { width: 100%; height: auto; display: block; }
  .interstate__map text { font-family: var(--ff-body); font-size: 18px; letter-spacing: 1px; fill: var(--warm-white); }
  .interstate__map .dot-halo { opacity: 0.22; animation: dotPulse 3.5s ease-in-out infinite; }
  @keyframes dotPulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.40; } }
  @media (prefers-reduced-motion: reduce) { .interstate__map .dot-halo { animation: none; opacity: 0.22; } }

/* ============================================================
   NOBILIS-CHG v63: MOBILE PERFORMANCE
   Everything below is phone-only. It does not change the desktop rendering.
   ============================================================ */
@media (max-width: 768px) {
  /* 1. Smaller copies of the three heavy decorative backgrounds. Only the
        image URL is swapped, every gradient and position stays as authored.
        Combined saving on a phone is roughly 250 KB.
        Selectors verified against the rules that actually own each image:
        .founder-card, .local-buyers::before, .guide-card__cover. */
  /* .founder-card and .guide-card__cover layer a tint gradient OVER the photo,
     so the gradient has to be repeated here. Overriding background-image alone
     would silently drop it and the white text on top would stop being legible. */
  .founder-card {
    background-image:
      linear-gradient(rgba(10,26,47,0.85), rgba(10,26,47,0.88)),
      url('/handshake-mobile.webp') !important;
  }
  .guide-card__cover {
    background-image:
      linear-gradient(135deg, rgba(18,43,82,0.90) 0%, rgba(13,34,64,0.93) 100%),
      url('/resources-montage-bg-mobile.webp') !important;
  }
  /* Single layer, safe to swap outright. */
  .local-buyers::before { background-image: url('/melbourne-skyline-mobile.webp') !important; }

  /* 2. backdrop-filter forces an expensive offscreen pass on every frame and
        is a common cause of scroll jank on mid-range Android. These panels
        keep their solid tint, they just stop blurring what sits behind them. */
  .nav.scrolled, .suburb-carousel__arrow,
  .nb-suburb-modal__backdrop, .viet-modal__overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* 3. Let the browser skip layout and paint for long sections that are far
      below the fold until they are close to the viewport. On a 240 KB single
      page this is a large first-render saving. contain-intrinsic-size keeps
      the scrollbar honest so nothing jumps as you scroll.
      DELIBERATELY EXCLUDED: #projects and #resources, whose carousels measure
      their own width and must not be handed a skipped subtree. */
#who-we-serve, #smsf, #services, #process, #network,
#international, #local-buyers, #faq, #contact {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* NOBILIS-CHG v64: on a phone the hero rise is imperceptible and the grain is
   invisible at 0.028 opacity, so neither earns its cost. Removing both gets
   content on screen at the earliest possible moment. */
@media (max-width: 768px) {
  .hero__eyebrow, .hero__headline, .hero__sub, .hero__buttons,
  .hero__feenote, .hero__visual {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hero__grain { display: none !important; }
}

/* 4. Reserve the deck's height before the script runs so the page does not
      reflow when Market Insights switches into deck mode. */
.blog-carousel { min-height: 360px; }
@media (max-width: 768px) { .blog-carousel { min-height: 355px; } }