/*
 * style.css — LUMIÈRE Essence Peak landing (lek2, "Essence Peak Landing" design).
 *
 * Ported from the design component's <style> block. Layout/visual values stay
 * inline on each element (1:1 with the design); this file adds what inline
 * styles cannot express: :hover / :focus states (the design's style-hover /
 * style-focus attributes), @keyframes, @media responsive rules, popup animation.
 * Palette: green var(--green-900), gold var(--gold) (hover var(--gold)), cream var(--cream).
 */

/* ---- Base ---------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Reserve space for the fixed bottom sticky CTA bar so it never clips content. */
  padding-bottom: 76px;
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Keyframes ----------------------------------------------------- */
@keyframes ep-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 6px 24px rgba(243,236,227,.45); }
  50%      { transform: scale(1.03); box-shadow: 0 8px 32px rgba(243,236,227,.65); }
}
@keyframes ep-pop {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* ---- Interactive states (were style-hover / style-focus) ---------- */
.ep-nav-link    { transition: color .2s ease; }
.ep-nav-link:hover { color: var(--gold) !important; }

.ep-btn-gold    { transition: background .2s ease; }
.ep-btn-gold:hover { background: var(--gold) !important; }

.ep-btn-dark    { transition: background .2s ease, color .2s ease; }
.ep-btn-dark:hover { background: var(--gold) !important; color: var(--green-900) !important; }

.ep-input       { transition: border-color .2s ease; }
.ep-input:focus { border-color: var(--gold) !important; }

.ep-card        { transition: box-shadow .25s ease; }
.ep-card:hover  { box-shadow: 0 14px 32px rgba(28,26,22,.1); }

.ep-unit-card   { transition: box-shadow .25s ease, transform .25s ease; }
.ep-unit-card:hover { box-shadow: 0 16px 40px rgba(28,26,22,.12); }

.ep-amenity-fig img { transition: transform .6s ease; }
.ep-amenity-fig:hover img { transform: scale(1.07); }

.ep-sticky-link { transition: border-color .2s ease, color .2s ease; }
.ep-sticky-link:hover { border-color: var(--gold) !important; color: var(--gold) !important; }

/* ---- Sticky bar slides away while a lead form field is focused ----- */
#ep-sticky { transition: transform .25s ease; }
#ep-sticky.is-hidden { transform: translateY(100%); }

/* ---- Header call CTA: labeled "Gọi" replaces the number on mobile -- */
#ep-header-phone-short { display: none; }

/* ---- Exit-intent popup open state --------------------------------- */
.js-exit-popup.is-open { display: flex !important; }
.js-exit-popup.is-open .js-exit-popup-card { animation: ep-pop .35s ease both; }

/* ---- Responsive (mirrors the design breakpoints; !important beats the
        inline grid-template-columns on each grid element) ------------ */
@media (max-width: 900px) {
  #ep-nav { display: none !important; }
  #ep-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  #ep-overview-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  #ep-policy-grid { grid-template-columns: 1fr !important; }
  #ep-plan-grid { grid-template-columns: 1fr !important; }
  #ep-units-grid { grid-template-columns: 1fr 1fr !important; }
  #ep-amenity-grid { grid-template-columns: 1fr !important; }
  #ep-amenity-list { grid-template-columns: 1fr 1fr !important; }
  #ep-tam-grid { grid-template-columns: 1fr !important; }
  #ep-loca-grid { grid-template-columns: 1fr 1fr !important; }
  #ep-commit-grid { grid-template-columns: repeat(3, 1fr) !important; }
  #ep-trust { grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  #ep-sticky-note { display: none !important; }
  #ep-header-cta { margin-left: auto !important; }
  /* The desktop 100deg gradient thins to .25 on the right; a full-width mobile
     column needs uniform darkening behind the value-prop text. */
  #ep-hero-overlay { background: rgba(20,18,14,.82) !important; }
}
@media (max-width: 560px) {
  #ep-sticky-bar { gap: 8px !important; padding: 8px 10px !important; justify-content: center !important; }
  #ep-sticky-bar a, #ep-sticky-bar button { font-size: 13px !important; padding: 9px 13px !important; }
  #ep-units-grid { grid-template-columns: 1fr !important; }
  #ep-amenity-list { grid-template-columns: 1fr !important; }
  #ep-facts-grid { grid-template-columns: 1fr !important; }
  #ep-loca-grid { grid-template-columns: 1fr !important; }
  #ep-commit-grid { grid-template-columns: 1fr 1fr !important; }
  #ep-header-phone-label { display: none !important; }
  #ep-header-phone-short { display: inline !important; }
  body { padding-bottom: 64px; }
}

/* ---- Accessibility: respect reduced-motion ------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ep-btn-gold, .js-exit-popup-card { animation: none !important; }
}

/* ---- Brand fonts Masterise: SVN-Optima (tiêu đề) + SVN-Cera (body) -------- */
@font-face{font-family:'SVN-Optima';src:url('../fonts/SVN-Optima-Regular.woff2') format('woff2'),url('../fonts/SVN-Optima-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Optima';src:url('../fonts/SVN-Optima-Medium.woff2') format('woff2'),url('../fonts/SVN-Optima-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Optima';src:url('../fonts/SVN-Optima-DemiBold.woff2') format('woff2'),url('../fonts/SVN-Optima-DemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Optima';src:url('../fonts/SVN-Optima-Bold.woff2') format('woff2'),url('../fonts/SVN-Optima-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Cera';src:url('../fonts/SVN-CeraLight.woff') format('woff');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Cera';src:url('../fonts/SVN-Cera.woff2') format('woff2'),url('../fonts/SVN-Cera.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Cera';src:url('../fonts/SVN-CeraMedium.woff2') format('woff2'),url('../fonts/SVN-CeraMedium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'SVN-Cera';src:url('../fonts/SVN-CeraBold.woff2') format('woff2'),url('../fonts/SVN-CeraBold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;}
/* ---- Font chính Masterise: Neurial Grotesk (SVN-Cera = fallback tiếng Việt) - */
@font-face{font-family:'Neurial Grotesk';src:url('../fonts/NeurialGrotesk-Light.woff2') format('woff2'),url('../fonts/NeurialGrotesk-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Neurial Grotesk';src:url('../fonts/NeurialGrotesk-Regular.woff2') format('woff2'),url('../fonts/NeurialGrotesk-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Neurial Grotesk';src:url('../fonts/NeurialGrotesk-Medium.woff2') format('woff2'),url('../fonts/NeurialGrotesk-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Neurial Grotesk';src:url('../fonts/NeurialGrotesk-Bold.woff2') format('woff2'),url('../fonts/NeurialGrotesk-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Neurial Grotesk';src:url('../fonts/NeurialGrotesk-ExtraBold.woff2') format('woff2'),url('../fonts/NeurialGrotesk-ExtraBold.woff') format('woff');font-weight:800;font-style:normal;font-display:swap;}
/* ---- Design tokens: palette Masterise LUMIERE (emerald + cream + sage) ---- */
:root{
  --green-900:#1c1a16; --green-800:#2a2620; --green-700:#8a6e30; --sage:#d4af5e;
  --cream:#faf7f1; --mint:#f0ead9; --gold:#a2833c;
  --text-body:#2a2620; --text-muted:#6f675c; --border-light:#e0d3ae;
}

/* ---- HSG2 hero + lead capture -------------------------------------- */
.hsg-hero,
.hsg-hero-form-wrap,
.hsg-quick {
  --hero-ink: #14211b;
  --hero-green: #1e4d3b;
  --hero-green-dark: #14382a;
  --hero-gold: #c3a257;
}
.hsg-header-phone-short { display: none; }
.hsg-sticky-cta { min-height: 44px; }
.hsg-hero {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  background: var(--hero-ink);
  isolation: isolate;
}
.hsg-hero-media,
.hsg-hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hsg-hero-media {
  z-index: -2;
  object-fit: cover;
  object-position: center 58%;
  transform: scale(1.015);
}
.hsg-hero-overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 26, 19, .88) 0%, rgba(8, 26, 19, .66) 42%, rgba(8, 26, 19, .16) 75%),
    linear-gradient(180deg, rgba(10, 26, 20, .08) 38%, rgba(10, 26, 20, .72) 100%);
}
.hsg-hero-inner {
  display: flex;
  width: 100%;
  max-width: 1160px;
  min-height: 690px;
  align-items: center;
  margin: 0 auto;
  padding: 88px 40px 168px;
}
.hsg-hero-copy {
  display: flex;
  width: min(790px, 76%);
  flex-direction: column;
  align-items: flex-start;
  gap: 23px;
  color: #fff;
}
.hsg-hero-status {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 9px;
  background: rgba(7, 29, 21, .52);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .7);
  color: rgba(255, 255, 255, .82);
  font: 600 11px/1.3 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
.hsg-hero-status strong { color: #fff; font-weight: 700; }
.hsg-hero-status i { width: 1px; height: 13px; background: rgba(255, 255, 255, .25); }
.hsg-hero-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hero-gold);
  box-shadow: 0 0 0 4px rgba(195, 162, 87, .16);
}
.hsg-hero-title {
  display: flex;
  width: 100%;
  max-width: 760px;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  color: #fff;
  font: 600 clamp(44px, 5vw, 68px)/1.03 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: -.038em;
  text-wrap: balance;
}
.hsg-hero-title em {
  display: inline-block;
  margin-left: 10px;
  color: #e0c77e;
  font-size: .52em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.hsg-hero-lead {
  max-width: 620px;
  margin: -5px 0 0;
  color: rgba(255, 255, 255, .78);
  font: 400 16px/1.65 'Neurial Grotesk', 'SVN-Cera', sans-serif;
}
.hsg-hero-benefits {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 1px 0 0;
  padding: 0;
  list-style: none;
}
.hsg-hero-benefits li {
  display: flex;
  min-width: 0;
  gap: 10px;
  padding: 0 19px;
  border-left: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font: 600 14px/1.35 'Neurial Grotesk', 'SVN-Cera', sans-serif;
}
.hsg-hero-benefits li:first-child { padding-left: 0; border-left: 0; }
.hsg-hero-benefits svg {
  width: 17px;
  flex: 0 0 17px;
  margin-top: 1px;
  fill: none;
  stroke: var(--hero-gold);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}
.hsg-hero-benefits small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  font-weight: 400;
}
.hsg-hero-form-wrap {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 1160px;
  margin: -112px auto 0;
  padding: 0 40px;
}
.hsg-hero-form {
  overflow: hidden;
  border: 1px solid rgba(30, 77, 59, .12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 32px 80px -38px rgba(10, 43, 31, .52);
}
.hsg-hero-form-fields {
  display: grid;
  grid-template-columns: minmax(275px, .82fr) minmax(0, 1.65fr);
}
.hsg-hero-form-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 28px 30px;
  background: var(--hero-green);
  color: #fff;
}
.hsg-hero-form-eyebrow {
  color: #dac27e;
  font: 700 10px/1.4 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hsg-hero-form-intro h2 {
  margin: 0;
  font: 600 23px/1.18 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.hsg-hero-form-intro p {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font: 400 12px/1.55 'Neurial Grotesk', 'SVN-Cera', sans-serif;
}
.hsg-hero-proof {
  margin-top: 5px;
  color: rgba(255, 255, 255, .78);
  font: 500 11px/1.4 'Neurial Grotesk', 'SVN-Cera', sans-serif;
}
.hsg-hero-proof .js-lead-count { color: #fff !important; }
.hsg-hero-form-entry {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-content: center;
  gap: 12px;
  padding: 28px 30px 24px;
}
.hsg-hero-form-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hsg-hero-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  color: #23352c;
  font: 600 11px/1.3 'Neurial Grotesk', 'SVN-Cera', sans-serif;
}
.hsg-hero-field small {
  margin-left: 4px;
  color: #87928c;
  font-size: 9px;
  font-weight: 400;
}
.hsg-hero-field .hsg-in {
  min-height: 50px;
  padding: 13px 14px;
  border-color: #dce4df;
  border-radius: 10px;
  background: #f7f9f7;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.hsg-hero-field .hsg-in::placeholder { color: #909b95; opacity: 1; }
.hsg-hero-field .hsg-in:hover { border-color: #b8c7be; background: #fff; }
.hsg-hero-field .hsg-in:focus {
  border-color: var(--hero-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30, 77, 59, .12);
}
.hsg-hero-submit {
  display: flex;
  min-height: 50px;
  align-self: end;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--hero-green);
  box-shadow: 0 12px 24px -17px rgba(20, 66, 49, .9);
  color: #fff;
  cursor: pointer;
  font: 700 12px/1.3 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hsg-hero-submit svg,
.hsg-quick-action svg {
  width: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform .2s ease;
}
.hsg-hero-submit:hover { background: var(--hero-green-dark); box-shadow: 0 16px 28px -17px rgba(20, 66, 49, 1); transform: translateY(-1px); }
.hsg-hero-submit:hover svg,
.hsg-quick-action:hover svg { transform: translateX(3px); }
.hsg-hero-submit:disabled { cursor: wait; opacity: .68; transform: none; }
.hsg-hero-form-error {
  grid-column: 1 / -1;
  color: #a74735;
  font: 500 11px/1.4 'Neurial Grotesk', 'SVN-Cera', sans-serif;
}
.hsg-hero-trust {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 30px;
  border-top: 1px solid #e8ede9;
  background: #fbfcfb;
}
.hsg-hero-trust span {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-left: 1px solid #e8ede9;
  color: #637168;
  font: 500 10px/1.3 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  text-align: center;
}
.hsg-hero-trust span:first-child { border-left: 0; }
.hsg-hero-trust svg {
  width: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: #a2833c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}
.hsg-hero-form-success {
  margin: 0;
  padding: 24px 30px;
  background: #e8f1eb;
  color: var(--hero-green);
  font: 600 13px/1.5 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  text-align: center;
}
.hsg-hero-submit:focus-visible,
.hsg-quick-action:focus-visible {
  outline: 3px solid rgba(176, 141, 62, .4);
  outline-offset: 3px;
}
.hsg-quick {
  display: grid;
  width: 100%;
  max-width: 1160px;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  margin: 0 auto;
  padding: 54px 40px 0;
}
.hsg-quick-intro { display: flex; flex-direction: column; gap: 5px; }
.hsg-quick-intro > span {
  color: #a2833c;
  font: 700 10px/1.4 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hsg-quick-intro h2 {
  margin: 0;
  color: #14211b;
  font: 600 23px/1.2 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: -.02em;
}
.hsg-quick-intro p { margin: 0; color: #7b8780; font: 400 12px/1.45 'Neurial Grotesk', 'SVN-Cera', sans-serif; }
.hsg-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #dfe6e1;
  border-bottom: 1px solid #dfe6e1;
}
.hsg-quick-action {
  display: grid;
  min-width: 0;
  min-height: 72px;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 15px 18px;
  border: 0;
  border-left: 1px solid #dfe6e1;
  background: transparent;
  color: #1e4d3b;
  cursor: pointer;
  font: 600 12px/1.35 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  text-align: left;
  transition: background .2s ease, color .2s ease;
}
.hsg-quick-action:first-child { border-left: 0; }
.hsg-quick-action:hover { background: #f3f6f3; color: #14382a; }
.hsg-quick-number { color: #a2833c; font: 600 10px/1 'Neurial Grotesk', 'SVN-Cera', sans-serif; letter-spacing: .08em; }

@media (max-width: 900px) {
  .hsg-nav-links { display: none !important; }
  .hsg-nav-actions { gap: 10px !important; }
  .hsg-header-zalo { display: flex !important; flex: 0 0 44px; }
  .hsg-header-phone { display: flex; min-height: 44px; align-items: center; }
  .hsg-floating-contact { display: none !important; }
  .hsg-hero { min-height: 680px; }
  .hsg-hero-inner { min-height: 680px; padding-top: 76px; padding-bottom: 148px; }
  .hsg-hero-copy { width: min(700px, 92%); }
  .hsg-hero-title { font-size: clamp(42px, 7vw, 58px); }
  .hsg-hero-form-wrap { margin-top: -90px; }
  .hsg-hero-form-fields { grid-template-columns: 1fr; }
  .hsg-hero-form-intro { padding: 25px 28px; }
  .hsg-hero-form-entry { padding: 24px 28px; }
  .hsg-quick { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 640px) {
  body { padding-bottom: 64px; }
  .hsg-site-nav { min-height: 68px; gap: 10px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
  .hsg-brand { min-width: 0; }
  .hsg-nav-actions { flex: 0 0 auto; gap: 8px !important; }
  .hsg-brand-name {
    overflow: hidden;
    font-size: 16px !important;
    letter-spacing: .09em !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hsg-brand-sub { overflow: hidden; font-size: 8px !important; letter-spacing: .18em !important; text-overflow: ellipsis; white-space: nowrap; }
  .hsg-header-zalo { display: flex !important; flex: 0 0 44px; }
  .hsg-header-phone { display: flex; width: 44px; min-height: 44px; flex: 0 0 44px; align-items: center; justify-content: center; padding: 0 !important; }
  .hsg-header-phone svg { margin-right: 0 !important; }
  .hsg-header-phone-number { display: none; }
  .hsg-header-phone-short { display: none; }
  .hsg-hero { min-height: 0; }
  .hsg-hero-media { object-position: 56% center; }
  .hsg-hero-overlay {
    background:
      linear-gradient(90deg, rgba(8, 26, 19, .84), rgba(8, 26, 19, .55)),
      linear-gradient(180deg, rgba(10, 26, 20, .12) 20%, rgba(10, 26, 20, .84) 100%);
  }
  .hsg-hero-inner { min-height: 0; align-items: flex-start; padding-top: 38px !important; padding-bottom: 94px !important; }
  .hsg-hero-copy { width: 100%; gap: 15px; }
  .hsg-hero-status { gap: 7px 8px; padding: 8px 10px; font-size: 9px; letter-spacing: .055em; }
  .hsg-hero-status i:nth-of-type(2) { display: none; }
  .hsg-hero-title { gap: 4px; font-size: clamp(36px, 11.5vw, 46px); line-height: 1.02; }
  .hsg-hero-title em { display: block; margin: 7px 0 0; font-size: .55em; letter-spacing: .01em; }
  .hsg-hero-lead { font-size: 14px; line-height: 1.55; }
  .hsg-hero-benefits { grid-template-columns: 1fr; gap: 8px; }
  .hsg-hero-benefits li { padding: 0; border-left: 0; }
  .hsg-hero-benefits small { display: none; }
  .hsg-hero-form-wrap { margin-top: -58px; }
  .hsg-hero-form { border-radius: 17px; }
  .hsg-hero-form-intro { gap: 5px; padding: 18px 20px; }
  .hsg-hero-form-intro h2 { font-size: 20px; }
  .hsg-hero-form-intro p { font-size: 11px; }
  .hsg-hero-proof { margin-top: 2px; }
  .hsg-hero-form-entry { grid-template-columns: 1fr; gap: 11px; padding: 18px 20px; }
  .hsg-hero-form-grid { grid-template-columns: 1fr; }
  .hsg-hero-field .hsg-in { font-size: 16px; }
  .hsg-hero-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .hsg-hero-trust span { min-height: 44px; padding: 6px 8px; border-top: 1px solid #e8ede9; font-size: 9px; }
  .hsg-hero-trust span:nth-child(odd) { border-left: 0; }
  .hsg-quick { gap: 13px; padding-top: 34px !important; }
  .hsg-quick-actions { grid-template-columns: 1fr; border-bottom: 0; }
  .hsg-quick-action { min-height: 54px; border-bottom: 1px solid #dfe6e1; border-left: 0; padding: 11px 4px; }
  .hsg-mobile-grid,
  .hsg-amenities-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .hsg-mobile-grid > *,
  .hsg-amenities-grid > * { min-width: 0; }
  .hsg-amenities-grid { grid-auto-rows: 190px !important; }
  .hsg-amenity-card { grid-column: auto !important; grid-row: auto !important; }
  .hsg-responsive-media { width: 100% !important; min-width: 0 !important; flex-basis: 100% !important; }
  .js-sticky-bar { flex-wrap: nowrap !important; gap: 8px !important; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important; }
  .hsg-sticky-title,
  .hsg-sticky-slots { display: none; }
  .hsg-sticky-countdown { flex: 0 0 auto; font-size: 13px !important; }
  .hsg-sticky-cta { min-height: 44px; padding: 10px 17px !important; font-size: 12px !important; white-space: nowrap; }
  .hsg-floating-contact { display: none !important; }
}

@media (max-width: 360px) {
  .hsg-brand-name { overflow: visible; line-height: 1.06 !important; text-overflow: clip; white-space: normal; }
  .hsg-brand-sub { display: none; }
  .hsg-hero-status-label,
  .hsg-hero-status-divider-first { display: none; }
  .hsg-hero-title { font-size: 36px; }
  .hsg-hero-form-intro,
  .hsg-hero-form-entry { padding-right: 16px; padding-left: 16px; }
}

@media (min-width: 641px) and (max-width: 900px) and (max-height: 500px) {
  .hsg-nav-actions { gap: 10px !important; }
  .hsg-header-zalo { display: flex !important; flex: 0 0 44px; }
  .hsg-hero,
  .hsg-hero-inner { min-height: 0; }
  .hsg-hero-inner { align-items: flex-start; padding-top: 34px !important; padding-bottom: 102px !important; }
  .hsg-hero-copy { gap: 14px; }
  .hsg-hero-title { font-size: clamp(38px, 6.5vw, 46px); }
  .hsg-hero-lead { font-size: 14px; line-height: 1.5; }
  .hsg-hero-benefits small { display: none; }
  .hsg-hero-form-wrap { margin-top: -72px; }
  .hsg-sticky-cta { min-height: 44px; }
  .hsg-floating-contact { display: none !important; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .hsg-header-phone { display: flex; min-height: 44px; align-items: center; }
  .hsg-floating-contact { top: 100px !important; bottom: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hsg-hero-media { transform: none; }
  .hsg-hero-submit,
  .hsg-hero-submit svg,
  .hsg-quick-action,
  .hsg-quick-action svg { transition: none !important; }
}

/* ---- HSG2 lead popup ------------------------------------------------ */
body.hsg-modal-open { overflow: hidden; }
.hsg-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 24, 18, .66);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.hsg-popup-card {
  --popup-primary: #1e4d3b;
  --popup-primary-dark: #163b2d;
  --popup-gold: #b08d3e;
  --popup-ink: #14211b;
  --popup-muted: #607067;
  position: relative;
  display: flex;
  width: min(540px, 100%);
  max-height: calc(100dvh - 32px);
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding: 30px;
  border: 1px solid rgba(30, 77, 59, .14);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 32px 80px -28px rgba(5, 31, 21, .58), 0 1px 0 rgba(255, 255, 255, .8) inset;
}
.hsg-popup-backdrop.is-open .hsg-popup-card { animation: hsg-popup-in .28s cubic-bezier(.2, .8, .2, 1) both; }
.hsg-popup-accent {
  position: absolute;
  top: 0;
  left: 30px;
  width: 72px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--popup-gold);
}
.hsg-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f3f5f2;
  color: #526159;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.hsg-popup-close svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.hsg-popup-close:hover { background: #e8ede9; color: var(--popup-ink); transform: rotate(3deg); }
.hsg-popup-close:active { transform: scale(.96); }
.hsg-popup-header { display: flex; flex-direction: column; gap: 7px; padding-right: 44px; }
.hsg-popup-eyebrow {
  color: var(--popup-gold);
  font: 700 10px/1.4 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hsg-popup-header h2 {
  margin: 0;
  color: var(--popup-ink);
  font: 700 28px/1.14 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hsg-popup-urgency {
  display: flex;
  min-height: 38px;
  align-items: center;
  align-self: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
  padding: 8px 11px;
  border: 1px solid #e1e9e4;
  border-radius: 10px;
  background: #f4f7f4;
  color: var(--popup-muted);
  font: 500 12px/1.35 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  font-variant-numeric: tabular-nums;
}
.hsg-popup-urgency > svg { width: 16px; margin-right: 2px; fill: none; stroke: var(--popup-gold); stroke-linecap: round; stroke-width: 1.8; }
.hsg-popup-urgency strong { color: var(--popup-primary); font-weight: 700; }
.hsg-popup-urgency i { width: 3px; height: 3px; margin: 0 3px; border-radius: 50%; background: #9daf9f; }
.hsg-popup-unit {
  align-self: flex-start;
  padding: 8px 11px;
  border-radius: 9px;
  background: #f5efdf;
  color: #6f5a25;
  font: 500 12px/1.4 'Neurial Grotesk', 'SVN-Cera', sans-serif;
}
.hsg-popup-unit strong { font-weight: 700; }
.hsg-popup-card .js-form-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.hsg-popup-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: var(--popup-ink); font: 600 12px/1.3 'Neurial Grotesk', 'SVN-Cera', sans-serif; }
.hsg-popup-field small { margin-left: 4px; color: #819088; font: 400 10px/1.3 'Neurial Grotesk', 'SVN-Cera', sans-serif; }
.hsg-popup-field .hsg-in {
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #dce4de;
  border-radius: 11px;
  background: #f8faf8;
  color: var(--popup-ink);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.hsg-popup-field .hsg-in::placeholder { color: #8a9690; opacity: 1; }
.hsg-popup-field .hsg-in:hover { border-color: #bac9bf; background: #fff; }
.hsg-popup-field .hsg-in:focus { border-color: var(--popup-primary); background: #fff; box-shadow: 0 0 0 3px rgba(30, 77, 59, .12); }
.hsg-popup-card .js-form-error,
.hsg-popup-submit,
.hsg-popup-assurance { grid-column: 1 / -1; }
.hsg-popup-submit {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 11px !important;
  background: var(--popup-primary) !important;
  box-shadow: 0 12px 24px -16px rgba(20, 66, 49, .9);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hsg-popup-submit svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform .2s ease; }
.hsg-popup-submit:hover { background: var(--popup-primary-dark) !important; box-shadow: 0 16px 28px -16px rgba(20, 66, 49, 1); transform: translateY(-1px); }
.hsg-popup-submit:hover svg { transform: translateX(3px); }
.hsg-popup-submit:active { transform: translateY(0) scale(.99); }
.hsg-popup-assurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--popup-muted);
  font: 500 11px/1.4 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  text-align: center;
}
.hsg-popup-assurance svg { width: 14px; flex: 0 0 14px; fill: none; stroke: var(--popup-gold); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.hsg-popup-close:focus-visible,
.hsg-popup-submit:focus-visible { outline: 3px solid rgba(176, 141, 62, .36); outline-offset: 3px; }
.hsg-popup-form .js-form-success { border-radius: 10px; text-align: center; }

@keyframes hsg-popup-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
  .hsg-popup-backdrop { align-items: flex-end; padding: 12px; }
  .hsg-popup-card { max-height: calc(100dvh - 24px); gap: 16px; padding: 26px 20px 22px; border-radius: 19px; }
  .hsg-popup-accent { left: 20px; }
  .hsg-popup-close { top: 9px; right: 9px; }
  .hsg-popup-header { padding-right: 38px; }
  .hsg-popup-header h2 { font-size: 25px; }
  .hsg-popup-card .js-form-fields { grid-template-columns: 1fr; gap: 12px; }
  .hsg-popup-urgency { padding: 7px 9px; font-size: 11px; }
}

@media (max-height: 640px) and (min-width: 561px) {
  .hsg-popup-card { gap: 14px; padding-top: 24px; padding-bottom: 24px; }
  .hsg-popup-field .hsg-in { min-height: 46px; }
  .hsg-popup-submit { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .hsg-popup-backdrop.is-open .hsg-popup-card,
  .hsg-popup-close,
  .hsg-popup-submit,
  .hsg-popup-submit svg { animation: none !important; transition: none !important; }
}

/* ---- HSG2 resource path, apartment collection & finance calculator --- */
.hsg2-resource-path,
.hsg2-units,
.hsg2-finance {
  max-width: 1160px;
  margin: 0 auto;
  padding: 78px 40px 0;
}
.hsg2-section-eyebrow {
  margin: 0 0 10px;
  color: #b08d3e;
  font: 600 12px/1.3 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Resource path */
.hsg2-resource-path {
  display: grid;
  grid-template-columns: minmax(220px, .68fr) minmax(0, 1.32fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}
.hsg2-resource-intro h2,
.hsg2-units-heading h2,
.hsg2-finance-heading h2 {
  margin: 0;
  color: #14211b;
  font: 600 clamp(30px, 3.5vw, 45px)/1.1 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.hsg2-resource-intro > p:last-child {
  max-width: 28ch;
  margin: 15px 0 0;
  color: #607067;
  font: 400 14px/1.6 'Neurial Grotesk', 'SVN-Cera', sans-serif;
}
.hsg2-resource-actions {
  display: grid;
  border-top: 1px solid #dfe6e1;
}
.hsg2-resource-action {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 97px;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid #dfe6e1;
  background: transparent;
  color: #14211b;
  cursor: pointer;
  text-align: left;
  transition: color .2s ease, padding .2s ease;
  touch-action: manipulation;
}
.hsg2-resource-action:hover { padding-left: 10px; color: #1e4d3b; }
.hsg2-resource-action:active { transform: translateY(1px); }
.hsg2-resource-number {
  color: #b08d3e;
  font: 700 11px/1 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .08em;
}
.hsg2-resource-copy { display: grid; gap: 5px; min-width: 0; }
.hsg2-resource-copy strong { color: currentColor; font: 600 17px/1.32 'Neurial Grotesk', 'SVN-Cera', sans-serif; }
.hsg2-resource-copy small { color: #718078; font: 400 13px/1.45 'Neurial Grotesk', 'SVN-Cera', sans-serif; }
.hsg2-resource-action svg,
.hsg2-unit-cta svg,
.hsg2-finance-cta svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.hsg2-resource-action svg { transition: transform .2s ease; }
.hsg2-resource-action:hover svg { transform: translateX(4px); }

/* Apartment collection */
.hsg2-units-heading,
.hsg2-finance-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}
.hsg2-units-heading h2 { max-width: 21ch; }
.hsg2-units-heading > p,
.hsg2-finance-heading > p {
  max-width: 330px;
  margin: 0 0 3px;
  color: #607067;
  font: 400 14px/1.65 'Neurial Grotesk', 'SVN-Cera', sans-serif;
}
.hsg2-units-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.hsg2-unit-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e0e7e2;
  border-radius: 0;
  background: #fff;
}
.hsg2-unit-media { position: relative; aspect-ratio: 1.32 / 1; margin: 0; overflow: hidden; background: #eaf0eb; }
.hsg2-unit-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.hsg2-unit-card:hover .hsg2-unit-media img { transform: scale(1.035); }
.hsg2-unit-media span {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 7px 10px;
  background: #b08d3e;
  color: #fff;
  font: 700 10px/1.2 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .08em;
}
.hsg2-unit-copy { position: relative; display: flex; min-width: 0; flex: 1; flex-direction: column; padding: 23px 22px 22px; }
.hsg2-unit-index {
  position: absolute;
  top: 19px;
  right: 20px;
  color: #d9e2dc;
  font: 600 22px/1 'SVN-Optima', Georgia, serif;
}
.hsg2-unit-copy h3 {
  max-width: calc(100% - 40px);
  margin: 0;
  color: #14211b;
  font: 600 clamp(20px, 2vw, 24px)/1.17 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: -.025em;
}
.hsg2-unit-copy p { flex: 1; margin: 11px 0 22px; color: #607067; font: 400 14px/1.6 'Neurial Grotesk', 'SVN-Cera', sans-serif; }
.hsg2-unit-cta,
.hsg2-finance-cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #1e4d3b;
  border-radius: 0;
  background: #1e4d3b;
  color: #fff;
  cursor: pointer;
  font: 700 11px/1.3 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  touch-action: manipulation;
}
.hsg2-unit-cta:hover,
.hsg2-finance-cta:hover { border-color: #14382a; background: #14382a; }
.hsg2-unit-cta:active,
.hsg2-finance-cta:active { transform: translateY(1px); }

/* Finance calculator */
.hsg2-finance { padding-bottom: 8px; }
.hsg2-finance-heading h2 { max-width: 700px; }
.hsg2-finance-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(430px, 1.15fr);
  gap: 18px;
}
.hsg2-finance-selector {
  min-width: 0;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid #e0e7e2;
  background: #fff;
}
.hsg2-finance-selector fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.hsg2-finance-selector legend,
.hsg2-finance-input-label > span {
  display: block;
  margin-bottom: 13px;
  color: #506159;
  font: 700 11px/1.45 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hsg2-finance-selector legend span,
.hsg2-finance-input-label em { color: #829087; font-style: normal; font-weight: 500; }
.hsg2-finance-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.hsg2-finance-presets button {
  min-height: 50px;
  padding: 8px 5px;
  border: 1px solid #b8c9bd;
  border-radius: 0;
  background: #fff;
  color: #1e4d3b;
  cursor: pointer;
  font: 700 13px/1.2 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
  touch-action: manipulation;
}
.hsg2-finance-presets button:hover,
.hsg2-finance-presets button.is-active { border-color: #1e4d3b; background: #1e4d3b; color: #fff; }
.hsg2-finance-input-label { display: block; margin-top: 26px; }
.hsg2-finance-input-label .hsg-in {
  min-height: 54px;
  border: 1px solid #d9e3dc;
  border-radius: 0;
  background: #f6f8f6;
  color: #14211b;
  font: 600 18px/1 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  font-variant-numeric: tabular-nums;
}
.hsg2-finance-note { margin: 18px 0 0; color: #7d8b83; font: italic 400 12px/1.65 'Neurial Grotesk', 'SVN-Cera', sans-serif; }
.hsg2-finance-summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(24px, 3vw, 38px);
  background: #1e4d3b;
  color: #f6faf7;
}
.hsg2-finance-summary-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding-bottom: 23px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.hsg2-finance-summary-top span,
.hsg2-finance-summary-top small { color: #d0ded5; font: 600 12px/1.4 'Neurial Grotesk', 'SVN-Cera', sans-serif; letter-spacing: .04em; }
.hsg2-finance-summary-top strong { color: #e8c675; font: 600 clamp(29px, 3vw, 39px)/1 'SVN-Optima', Georgia, serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hsg2-finance-rows { margin: 10px 0 0; }
.hsg2-finance-rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.hsg2-finance-rows dt { color: #d0ded5; font: 400 13px/1.5 'Neurial Grotesk', 'SVN-Cera', sans-serif; }
.hsg2-finance-rows dd { margin: 0; color: #fff; font: 700 14px/1.4 'Neurial Grotesk', 'SVN-Cera', sans-serif; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hsg2-finance-summary-note { margin: 17px 0 22px; color: #b9c9bf; font: 400 12px/1.6 'Neurial Grotesk', 'SVN-Cera', sans-serif; }
.hsg2-finance-cta { margin-top: auto; min-height: 56px; border-color: #d8b96a; background: #d8b96a; color: #14211b; }
.hsg2-finance-cta:hover { border-color: #e8c675; background: #e8c675; }
.hsg2-resource-action:focus-visible,
.hsg2-unit-cta:focus-visible,
.hsg2-finance-cta:focus-visible,
.hsg2-finance-presets button:focus-visible,
.hsg2-finance-input-label .hsg-in:focus-visible { outline: 3px solid rgba(176, 141, 62, .5); outline-offset: 3px; }

@media (max-width: 940px) {
  .hsg2-resource-path { grid-template-columns: 1fr; gap: 22px; }
  .hsg2-resource-intro > p:last-child { max-width: 56ch; }
  .hsg2-units-heading,
  .hsg2-finance-heading { display: block; }
  .hsg2-units-heading > p,
  .hsg2-finance-heading > p { max-width: 520px; margin-top: 14px; }
  .hsg2-units-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hsg2-finance-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); }
}
@media (max-width: 720px) {
  .hsg2-resource-path,
  .hsg2-units,
  .hsg2-finance { padding: 62px 24px 0; }
  .hsg2-units-heading,
  .hsg2-finance-heading { margin-bottom: 27px; }
  .hsg2-units-grid { grid-template-columns: 1fr; gap: 12px; }
  .hsg2-unit-card { display: grid; grid-template-columns: minmax(130px, .75fr) minmax(0, 1fr); }
  .hsg2-unit-media { aspect-ratio: auto; min-height: 220px; }
  .hsg2-finance-layout { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 520px) {
  .hsg2-resource-path,
  .hsg2-units,
  .hsg2-finance { padding: 52px 16px 0; }
  .hsg2-section-eyebrow { margin-bottom: 8px; font-size: 11px; }
  .hsg2-resource-intro h2,
  .hsg2-units-heading h2,
  .hsg2-finance-heading h2 { font-size: clamp(30px, 9vw, 39px); }
  .hsg2-resource-action { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; min-height: 76px; padding: 14px 0; }
  .hsg2-resource-action:hover { padding-left: 0; }
  .hsg2-resource-copy strong { font-size: 15px; }
  .hsg2-resource-copy small { font-size: 12px; }
  .hsg2-resource-action svg { width: 18px; }
  .hsg2-units-heading > p,
  .hsg2-finance-heading > p { margin-top: 12px; font-size: 13px; }
  .hsg2-unit-card { display: flex; }
  .hsg2-unit-media { aspect-ratio: 1.45 / 1; min-height: 0; }
  .hsg2-unit-copy { padding: 20px 18px 18px; }
  .hsg2-unit-copy p { margin: 9px 0 18px; font-size: 13px; }
  .hsg2-finance-selector,
  .hsg2-finance-summary { padding: 24px 18px; }
  .hsg2-finance-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hsg2-finance-presets button:last-child { grid-column: 1 / -1; }
  .hsg2-finance-input-label { margin-top: 22px; }
  .hsg2-finance-input-label .hsg-in { min-height: 54px; font-size: 16px; }
  .hsg2-finance-summary-top strong { flex-basis: 100%; font-size: 31px; }
  .hsg2-finance-rows > div { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
  .hsg2-finance-rows dt,
  .hsg2-finance-rows dd { font-size: 12px; }
  .hsg2-finance-rows dd { text-align: left; white-space: normal; }
  .hsg2-finance-cta { min-height: 54px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hsg2-resource-action,
  .hsg2-resource-action svg,
  .hsg2-unit-media img,
  .hsg2-unit-cta,
  .hsg2-finance-cta,
  .hsg2-finance-presets button { transition: none; }
}

/* Six apartment types: the detail-led selector follows the HSG1 information
   hierarchy while retaining HSG2's emerald palette. */
.hsg2-unit-tabs {
  margin-top: 72px;
  background: #f7f9f7;
}
.hsg2-unit-tabs-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 78px 40px 84px;
}
.hsg2-unit-tabs-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}
.hsg2-unit-tabs-heading h2 {
  max-width: 720px;
  margin: 0;
  color: #14211b;
  font: 600 clamp(34px, 4vw, 56px)/1.06 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hsg2-unit-tabs-heading > p {
  max-width: 340px;
  margin: 0 0 4px;
  color: #607067;
  font: 400 16px/1.58 'Neurial Grotesk', 'SVN-Cera', sans-serif;
}
.hsg2-unit-tablist {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid #315f4e;
  border-radius: 18px;
  background: #1e4d3b;
}
.hsg2-unit-tab {
  position: relative;
  display: flex;
  min-height: 98px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #dbe6df;
  cursor: pointer;
  font: 500 clamp(18px, 1.85vw, 25px)/1 'SVN-Optima', Georgia, serif;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.hsg2-unit-tab small {
  position: absolute;
  bottom: 17px;
  left: 50%;
  display: none;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  color: #e8bd47;
  font: 700 9px/1 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hsg2-unit-tab small::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: '';
}
.hsg2-unit-tab:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.hsg2-unit-tab[aria-selected='true'] {
  border-color: #c7a44f;
  background: rgba(216, 185, 106, .1);
  box-shadow: inset 0 -4px #e0ae34;
  color: #fff;
}
.hsg2-unit-tab[aria-selected='true'] small { display: inline-flex; }
.hsg2-unit-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, .92fr);
  min-height: 596px;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid #315f4e;
  border-radius: 18px;
  background: #1e4d3b;
}
.hsg2-unit-panel[hidden] { display: none; }
.hsg2-unit-plan {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  margin: 0;
  padding: 26px 26px 18px;
  background: #f3efe4;
}
.hsg2-unit-plan img {
  display: block;
  min-width: 0;
  width: 100%;
  height: 100%;
  flex: 1;
  object-fit: contain;
}
.hsg2-unit-plan figcaption {
  margin-top: 13px;
  color: #68776e;
  font: italic 600 10px/1.35 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.hsg2-unit-plan--scene { background: #112c21; }
.hsg2-unit-plan--scene img { object-fit: cover; }
.hsg2-unit-plan--scene figcaption { color: #b2c2b8; }
.hsg2-unit-panel-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 70px);
  color: #f8fbf8;
}
.hsg2-unit-type {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #e7ca78;
  font: 700 11px/1.2 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hsg2-unit-type i { width: 11px; height: 11px; border-radius: 50%; background: currentColor; }
.hsg2-unit-panel-copy h3 {
  margin: 26px 0 20px;
  color: #fffdf8;
  font: 500 clamp(38px, 4.1vw, 61px)/.98 'SVN-Optima', Georgia, serif;
  letter-spacing: -.035em;
}
.hsg2-unit-panel-copy > p {
  max-width: 470px;
  margin: 0;
  color: #c4d2ca;
  font: 400 17px/1.62 'Neurial Grotesk', 'SVN-Cera', sans-serif;
}
.hsg2-unit-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 32px 0;
}
.hsg2-unit-stats > div {
  min-width: 0;
  padding: 18px 16px;
  border: 1px solid rgba(214, 232, 221, .26);
  border-radius: 14px;
  background: rgba(9, 33, 23, .32);
}
.hsg2-unit-stats dt {
  color: #a7baae;
  font: 700 10px/1.2 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hsg2-unit-stats dd {
  margin: 11px 0 0;
  color: #e8bd47;
  font: 500 clamp(21px, 1.7vw, 27px)/1.16 'SVN-Optima', Georgia, serif;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.hsg2-unit-panel-copy .hsg2-unit-cta {
  min-height: 58px;
  border-color: #e5b63d;
  background: #e5b63d;
  color: #14211b;
}
.hsg2-unit-panel-copy .hsg2-unit-cta:hover { border-color: #f2c850; background: #f2c850; }
.hsg2-unit-cta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hsg2-unit-disclaimer {
  max-width: 760px;
  margin: 18px auto 0;
  color: #75847b;
  font: italic 400 12px/1.6 'Neurial Grotesk', 'SVN-Cera', sans-serif;
  text-align: center;
}
.hsg2-unit-tab:focus-visible,
.hsg2-unit-panel-copy .hsg2-unit-cta:focus-visible { outline: 3px solid #e8bd47; outline-offset: 3px; }

@media (max-width: 980px) {
  .hsg2-unit-tabs-heading { display: block; }
  .hsg2-unit-tabs-heading > p { max-width: 550px; margin-top: 16px; }
  .hsg2-unit-panel { grid-template-columns: 1fr; min-height: 0; }
  .hsg2-unit-plan { min-height: min(62vw, 520px); }
  .hsg2-unit-panel-copy { padding: 38px; }
  .hsg2-unit-panel-copy h3 { font-size: clamp(35px, 5.5vw, 50px); }
  .hsg2-unit-panel-copy > p { font-size: 15px; }
  .hsg2-unit-stats { gap: 10px; margin: 26px 0; }
  .hsg2-unit-stats > div { padding: 17px 15px; }
}
@media (max-width: 720px) {
  .hsg2-unit-tabs { margin-top: 54px; }
  .hsg2-unit-tabs-inner { padding: 60px 24px 64px; }
  .hsg2-unit-tabs-heading { margin-bottom: 25px; }
  .hsg2-unit-tabs-heading h2 { font-size: clamp(31px, 9vw, 45px); }
  .hsg2-unit-tabs-heading > p { margin-top: 13px; font-size: 14px; }
  .hsg2-unit-tablist {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 8px;
    scroll-padding-inline: 8px;
    scrollbar-width: thin;
  }
  .hsg2-unit-tab { min-width: 106px; min-height: 80px; flex: 0 0 106px; font-size: 20px; }
  .hsg2-unit-tab small { bottom: 12px; }
  .hsg2-unit-panel { grid-template-columns: 1fr; min-height: 0; margin-top: 16px; }
  .hsg2-unit-plan { min-height: 390px; padding: 18px 18px 13px; }
  .hsg2-unit-plan--scene { min-height: 300px; }
  .hsg2-unit-panel-copy { padding: 32px 24px 26px; }
  .hsg2-unit-panel-copy h3 { margin: 20px 0 15px; font-size: clamp(37px, 11vw, 52px); }
  .hsg2-unit-panel-copy > p { font-size: 15px; }
  .hsg2-unit-stats { margin: 25px 0; }
  .hsg2-unit-disclaimer { margin-top: 14px; font-size: 11px; text-align: left; }
}
@media (max-width: 430px) {
  .hsg2-unit-tabs-inner { padding: 52px 16px 56px; }
  .hsg2-unit-tab { min-width: 96px; flex-basis: 96px; }
  .hsg2-unit-plan { min-height: 310px; padding: 12px 12px 11px; }
  .hsg2-unit-plan--scene { min-height: 245px; }
  .hsg2-unit-plan figcaption { font-size: 9px; }
  .hsg2-unit-panel-copy { padding: 28px 18px 20px; }
  .hsg2-unit-panel-copy > p { font-size: 14px; }
  .hsg2-unit-stats { grid-template-columns: 1fr; gap: 9px; }
  .hsg2-unit-stats > div { padding: 15px; }
  .hsg2-unit-stats dd { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .hsg2-unit-tab { transition: none; }
}