/* ============================================================
GAUR ALARIS — gaursonsalaris.com design system
The Gaurs-trust build: developer credibility + RERA transparency
------------------------------------------------------------
FONTS — paste in BEFORE this stylesheet:
RULES:
- Marcellus (single weight, 400) for display headings only.
- Poppins for ALL running text, labels, buttons, forms, nav, tables.
- No eyebrow kickers above headings — section titles stand alone.
- Price: headline only. Full cost sheet is gated behind the form.
- No possession year anywhere in this file's consuming markup.
============================================================ */
/* ---------- 1. TOKENS ---------- */
:root {
--font-display: "Marcellus", Georgia, "Times New Roman", serif;
--font-body: "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Peacock palette */
--ink: #08201f;
--ink-soft: #0b2b2a;
--teal: #0d4a4a;
--teal-deep: #093736;
--emerald: #14695c;
--emerald-bright: #1e8a74;
--gold: #c9a961;
--gold-bright: #d9bd77;
--gold-deep: #a8873f;
--cream: #f7f4ee;
--cream-card: #fffdf8;
--white: #ffffff;
--text: #1c2a29;
--text-muted: #4c5f5d;
--text-on-dark: #eef0ea;
--text-on-dark-muted: #b7c4bf;
--line: rgba(13, 74, 74, .14);
--line-on-dark: rgba(217, 189, 119, .22);
--wa-green: #1faa53;
--grad-plume: linear-gradient(120deg, #0d4a4a 0%, #14695c 45%, #0a1f2b 100%);
--grad-gold: linear-gradient(100deg, #a8873f 0%, #c9a961 45%, #d9bd77 100%);
--grad-gold-text: linear-gradient(100deg, #c9a961, #e7d194 55%, #c9a961);
--space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
--space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6.5rem;
--radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-pill: 999px;
--shadow-sm: 0 1px 3px rgba(8, 32, 31, .08);
--shadow: 0 10px 30px -12px rgba(8, 32, 31, .22);
--shadow-lift: 0 24px 60px -24px rgba(8, 32, 31, .38);
--shadow-gold: 0 8px 28px -10px rgba(201, 169, 97, .45);
--container: 74rem;
--container-pad: clamp(1.25rem, 5vw, 2.5rem);
--bar-h: 3.75rem;
}
/* ---------- 2. BASE RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 400;
line-height: 1.65; color: var(--text); background: var(--cream);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}
img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: rgba(13, 74, 74, .06); }
h1, h2, h3, h4, p, figure { margin: 0 0 var(--space-4); }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--emerald); }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; }
}
.skip-link { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: .6rem 1rem; z-index: 100; font-weight: 600; }
.skip-link:focus { left: .5rem; top: .5rem; }
/* ---------- 3. TYPE SYSTEM ---------- */
.display, h1, h2 {
font-family: var(--font-display); font-weight: 400; line-height: 1.14;
letter-spacing: .002em; color: var(--ink);
}
h1, .display-xl { font-size: clamp(2.3rem, 6vw, 3.9rem); }
h2, .display-lg { font-size: clamp(1.8rem, 4.2vw, 2.75rem); }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; line-height: 1.35; color: var(--ink); }
h4 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink); }
.lead { font-size: 1.1rem; font-weight: 400; color: var(--text-muted); max-width: 42em; }
.on-dark { color: var(--text-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark .lead, .on-dark .muted { color: var(--text-on-dark-muted); }
.gold-text { background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--text-muted); }
/* ---------- 4. LAYOUT / SECTION RHYTHM ---------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }
.section { padding-block: var(--space-8); }
.section--dark { background: var(--ink); }
.section--teal { background: var(--grad-plume); }
.section--tight { padding-block: var(--space-7); }
@media (min-width: 48em) { .section { padding-block: var(--space-9); } }
.section-head { max-width: 46em; margin-bottom: var(--space-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.rule-gold { width: 4.5rem; height: 2px; border: 0; background: var(--grad-gold); margin: var(--space-4) 0 var(--space-5); }
.section-head--center .rule-gold { margin-inline: auto; }
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 40em) { .grid--2 { grid-template-columns: 1fr 1fr; } }
/* Editorial alternating rows — image-left/image-right, never a symmetric triplet */
.row-editorial { display: grid; gap: var(--space-6); align-items: center; padding-block: var(--space-6); border-top: 1px solid var(--line); }
.row-editorial:first-of-type { border-top: none; padding-top: 0; }
@media (min-width: 56em) { .row-editorial { grid-template-columns: 1.05fr .95fr; gap: var(--space-8); } }
.row-editorial--reverse .row-editorial__media { order: 2; }
.row-editorial__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.row-editorial__tag { display: inline-block; font-size: .82rem; font-weight: 600; letter-spacing: .005em; color: var(--gold-deep); margin-bottom: var(--space-2); }
.row-editorial__caption { font-size: .76rem; color: var(--text-muted); margin-top: var(--space-2); }
.section--dark .row-editorial, .section--teal .row-editorial { border-color: var(--line-on-dark); }
/* ---------- 5. BUTTONS ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-weight: 700; font-size: .95rem; letter-spacing: .02em;
padding: .9rem 1.9rem; border-radius: var(--radius-pill);
border: 1px solid transparent; cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--grad-gold); color: var(--ink); box-shadow: var(--shadow-gold); }
.btn--gold:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 34px -10px rgba(201,169,97,.6); }
.btn--ghost { background: transparent; color: var(--gold-bright); border-color: var(--gold); }
.btn--ghost:hover { background: rgba(201, 169, 97, .12); color: var(--gold-bright); }
.btn--outline-dark { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn--outline-dark:hover { background: rgba(13,74,74,.08); }
.btn--block { width: 100%; }
/* ---------- 6. NAV ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(8,32,31,.94); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line-on-dark); }
.nav .container { display: flex; align-items: center; justify-content: space-between; padding-block: .65rem; gap: .6rem; }
@media (min-width: 30em) { .nav .container { padding-block: .8rem; gap: var(--space-4); } }
@media (max-width: 26em) { .nav-brand { font-size: 1.02rem; } .nav-cta .btn { padding: .55rem .85rem !important; font-size: .74rem !important; } }
.nav-brand { font-family: var(--font-display); font-size: 1.3rem; color: var(--white); letter-spacing: .03em; flex-shrink: 0; display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.nav-brand span { color: var(--gold-bright); }
.nav-mark { flex-shrink: 0; }
.nav-logo-chip { flex-shrink: 0; display: inline-flex; align-items: center; background: var(--cream-card); border-radius: 7px; padding: .28rem .5rem; line-height: 0; }
.nav-logo { height: 15px; width: auto; display: block; }
@media (min-width: 26em) { .nav-logo { height: 18px; } }
.nav-brand-word { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-links { display: none; gap: var(--space-5); align-items: center; white-space: nowrap; }
.nav-links a { color: var(--text-on-dark-muted); font-weight: 500; font-size: .88rem; }
.nav-links a:hover { color: var(--gold-bright); }
.nav-cta { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.nav-phone { color: var(--gold-bright); font-weight: 600; font-size: .86rem; display: none; white-space: nowrap; }
@media (min-width: 72em) { .nav-links { display: flex; } .nav-phone { display: inline-flex; align-items: center; gap: .4rem; } }
/* ---------- 7. HERO — full-bleed render, bottom scrim, in-view lead form ---------- */
.hero {
position: relative; color: var(--text-on-dark); overflow: hidden; isolation: isolate;
display: flex; align-items: center;
padding-block: 5.25rem var(--space-6);
}
@media (min-width: 30em) { .hero { padding-block: 6rem var(--space-7); } }
.hero-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 32% 42%; }
.hero::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(8,32,31,.72) 0%, rgba(8,32,31,.58) 100%), linear-gradient(90deg, rgba(8,32,31,.5) 0%, rgba(8,32,31,.34) 45%, rgba(8,32,31,.62) 100%);
}
.hero .container { position: relative; width: 100%; }
.hero-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 62em) { .hero-grid { grid-template-columns: 1.15fr .85fr; gap: var(--space-7); align-items: center; } }
.hero-inner { max-width: 40rem; }
.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-3); }
.chip {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .7rem; font-weight: 600; letter-spacing: .03em;
padding: .35rem .75rem; border-radius: var(--radius-pill);
background: var(--cream-card); border: 1px solid var(--line); color: var(--teal);
}
.chip--dark { background: rgba(8,32,31,.6); border-color: var(--line-on-dark); color: var(--gold-bright); }
.chip--live::before { content:""; width:.42rem; height:.42rem; border-radius:50%; background:#3ecf8e; display:inline-block; box-shadow:0 0 0 3px rgba(62,207,142,.25); }
.hero h1 { color: var(--white); margin-bottom: var(--space-3); font-size: clamp(1.7rem, 5.4vw, 3.4rem); text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero-sub { font-size: clamp(.96rem, 2vw, 1.12rem); font-weight: 400; color: var(--text-on-dark-muted); max-width: 34em; margin-bottom: var(--space-4); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.hero-note { font-size: .78rem; color: var(--text-on-dark-muted); margin-bottom: 0; }
.hero-form-col { width: 100%; }
.lead-card--hero { max-width: 26rem; margin: 0; padding: var(--space-5) var(--space-4); }
@media (min-width: 30em) { .lead-card--hero { padding: var(--space-5); } }
.lead-card--hero h3 { font-size: 1.28rem; margin-bottom: .3rem; }
.lead-card--hero .lead-card__sub { margin-bottom: var(--space-4); font-size: .86rem; }
.lead-card--hero input { padding: .68rem .9rem; margin-bottom: .75rem; }
.lead-card--hero label { margin-bottom: .25rem; font-size: .76rem; }
.lead-card--hero .consent-row { margin-bottom: var(--space-3); }
.lead-card--hero .btn { padding: .78rem 1.5rem; font-size: .9rem; }
/* Mobile hero compaction — the lead form must clear the fold at 390px */
@media (max-width: 40em) {
:root { --bar-h: 3.3rem; }
.nav .container { padding-block: .5rem; }
.hero { padding-block: 3.6rem .6rem; align-items: flex-start; }
.hero-grid { gap: .65rem; }
.badge-row { margin-bottom: .4rem; gap: .35rem; }
.chip { font-size: .6rem; padding: .26rem .55rem; }
.hero h1 { font-size: clamp(1.22rem, 7.2vw, 1.6rem); margin-bottom: .35rem; line-height: 1.16; }
.hero-sub, .hero-cta { display: none; }
.hero-note { font-size: .68rem; line-height: 1.42; margin-bottom: 0; }
.lead-card--hero { padding: .75rem .8rem; max-width: none; border-top-width: 2px; }
.lead-card--hero h3 { font-size: .96rem; margin-bottom: .1rem; }
.lead-card--hero .lead-card__sub { font-size: .7rem; margin-bottom: .5rem; }
.lead-card--hero label { font-size: .64rem; margin-bottom: .15rem; }
.lead-card--hero input { padding: .42rem .6rem; margin-bottom: .38rem; font-size: .86rem; }
.lead-card--hero .consent-row { margin-bottom: .45rem; gap: .4rem; }
.lead-card--hero .consent-row label { font-size: .66rem; line-height: 1.3; }
.lead-card--hero .btn { padding: .52rem 1.1rem; font-size: .8rem; }
.lead-card--hero .lead-card__fine { margin-top: .35rem; font-size: .64rem; }
}
/* ---------- 8. TABLES (project details + config/price) ---------- */
.table-card { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.table-card--dark { background: var(--ink-soft); border-color: var(--line-on-dark); }
.spec-table { font-size: .96rem; }
.spec-table tr { border-top: 1px solid var(--line); }
.spec-table tr:first-child { border-top: none; }
.spec-table th, .spec-table td { padding: 1rem 1.3rem; text-align: left; vertical-align: top; }
.spec-table th {
width: 30%; font-weight: 600; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
color: var(--gold-deep); white-space: nowrap;
}
.spec-table td { color: var(--text); font-weight: 500; }
.spec-table td strong { color: var(--ink); font-weight: 700; }
.table-card--dark .spec-table tr { border-color: var(--line-on-dark); }
.table-card--dark .spec-table th { color: var(--gold-bright); }
.table-card--dark .spec-table td { color: var(--text-on-dark); }
.spec-table .row-price td { background: rgba(201,169,97,.08); font-size: 1.05rem; }
.table-card--dark .spec-table .row-price td { background: rgba(201,169,97,.14); }
/* Stack label-above-value on narrow screens — prevents the nowrap label
column from squeezing/clipping the value column (table-card has
overflow:hidden, so a forced-wide row would otherwise clip text). */
@media (max-width: 40em) {
.spec-table th, .spec-table td { display: block; width: auto; padding: .3rem 1.1rem; white-space: normal; }
.spec-table th { padding-top: 1rem; font-size: .72rem; }
.spec-table td { padding-bottom: 1rem; }
.config-table th, .config-table td { padding: .8rem .75rem; }
}
.config-table { font-size: .96rem; }
.config-table th, .config-table td { padding: 1rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.config-table thead th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; border-bottom: 2px solid var(--line); }
.config-table tbody td:first-child { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.config-table tbody .price-cell { font-weight: 700; color: var(--emerald-bright); }
.config-table tbody tr:last-child td { border-bottom: none; }
/* ---------- 9. STAT ROW ---------- */
.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 48em) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: left; }
.stat__num { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 2.6rem); line-height: 1.05; color: var(--teal); display: block; }
.stat__num--long { font-size: clamp(1.4rem, 3.6vw, 2.05rem); }
.stat__num small { font-size: .42em; font-family: var(--font-body); font-weight: 600; }
.stat__label { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); margin-top: var(--space-2); display: block; }
.on-dark .stat-row, .section--dark .stat-row, .section--teal .stat-row { border-color: var(--line-on-dark); }
.on-dark .stat__num, .section--dark .stat__num, .section--teal .stat__num { color: var(--gold-bright); }
.on-dark .stat__label, .section--dark .stat__label, .section--teal .stat__label { color: var(--text-on-dark-muted); }
/* ---------- 10. MASTERPLAN CALLOUTS ---------- */
.callout-figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); }
.callout-figure img { width: 100%; }
.callout-pin {
position: absolute; transform: translate(-50%, -50%);
width: 2rem; height: 2rem; border-radius: 50%;
background: var(--grad-gold); color: var(--ink);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: .85rem;
box-shadow: 0 0 0 5px rgba(8,32,31,.35), 0 4px 14px rgba(0,0,0,.4);
}
.callout-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.callout-legend li { display: flex; gap: 1rem; align-items: flex-start; }
.callout-legend .num {
flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%;
background: var(--ink); color: var(--gold-bright);
display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.callout-legend h4 { margin-bottom: .15rem; }
.callout-legend p { margin: 0; font-size: .92rem; color: var(--text-muted); }
.figure-caption { font-size: .78rem; color: var(--text-muted); margin-top: var(--space-3); }
.on-dark .figure-caption { color: var(--text-on-dark-muted); }
/* ---------- 11. DESIGN PEDIGREE ---------- */
.pedigree-list { list-style: none; margin: 0; padding: 0; }
.pedigree-list li { display: grid; grid-template-columns: 1fr; gap: .4rem; padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.pedigree-list li:first-child { border-top: none; padding-top: 0; }
@media (min-width: 42em) { .pedigree-list li { grid-template-columns: 10rem 1fr; gap: var(--space-5); align-items: baseline; } }
.pedigree-role { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.pedigree-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--ink); display: block; margin-bottom: .2rem; }
.pedigree-detail { color: var(--text-muted); font-size: .95rem; margin: 0; }
.pedigree-note { font-size: .82rem; color: var(--text-muted); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
/* ---------- 12. LOCATION LIST ---------- */
.loc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.loc-list li { display: flex; gap: .65rem; align-items: flex-start; font-weight: 500; }
.loc-list li::before { content: "—"; color: var(--gold-bright); font-weight: 700; flex-shrink: 0; }
.on-dark .loc-list li::before { color: var(--gold-bright); }
/* ---------- 13. RERA VERIFICATION BAND ---------- */
.rera-band { background: var(--ink-soft); border: 1px solid var(--line-on-dark); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-5); }
@media (min-width: 56em) { .rera-band { grid-template-columns: 1.1fr .9fr; align-items: center; padding: var(--space-7); } }
.rera-id { font-weight: 700; letter-spacing: .02em; color: var(--gold-bright); background: rgba(8,32,31,.6); border: 1px solid var(--line-on-dark); border-radius: var(--radius-sm); padding: .9rem 1.1rem; font-size: .92rem; margin-bottom: .6rem; }
.step-row { display: grid; gap: var(--space-5); counter-reset: step; }
@media (min-width: 48em) { .step-row { grid-template-columns: 1fr; } }
.step { position: relative; padding-left: 2.75rem; }
.step::before {
counter-increment: step; content: counter(step);
position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%;
background: var(--grad-gold); color: var(--ink); font-weight: 700;
display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
/* ---------- 14. PRICE CALLOUT BAND ---------- */
.price-band {
background: var(--grad-plume); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5);
color: var(--text-on-dark); display: flex; flex-direction: column; gap: var(--space-5); box-shadow: var(--shadow-lift);
}
@media (min-width: 48em) { .price-band { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-7); } }
.price-band__label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright); display: block; margin-bottom: var(--space-2); }
.price-band__figure { font-family: var(--font-display); font-size: clamp(1.8rem, 4.6vw, 2.75rem); line-height: 1.1; color: var(--white); display: block; }
.price-band__figure .star { color: var(--gold-bright); }
.price-band__caveat { font-size: .8rem; color: var(--text-on-dark-muted); margin: var(--space-2) 0 0; max-width: 30em; }
.price-band .btn { flex-shrink: 0; }
/* ---------- 15. LEAD-FORM CARD ---------- */
.lead-card { background: var(--cream-card); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); box-shadow: var(--shadow-lift); max-width: 28rem; }
@media (min-width: 48em) { .lead-card { padding: var(--space-6); } }
.lead-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; margin-bottom: var(--space-2); }
.lead-card__sub { font-size: .92rem; color: var(--text-muted); margin-bottom: var(--space-5); }
.lead-card label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); }
.lead-card input { width: 100%; padding: .8rem 1rem; margin-bottom: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-size: 1rem; font-weight: 400; transition: border-color .15s ease, box-shadow .15s ease; }
.lead-card input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13, 74, 74, .12); }
.lead-card input::placeholder { color: #8a9895; }
.consent-row { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: var(--space-4); }
.consent-row input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: .15rem; flex-shrink: 0; accent-color: var(--teal); }
.consent-row label { font-size: .82rem; font-weight: 400; color: var(--text-muted); margin-bottom: 0; line-height: 1.5; }
.lead-card__fine { font-size: .74rem; line-height: 1.5; color: var(--text-muted); margin: var(--space-3) 0 0; }
/* ---------- 16. QA (prose FAQ — no accordion) ---------- */
.qa-list { max-width: 46rem; }
.qa-item { padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.qa-item:first-child { border-top: none; padding-top: 0; }
.qa-item h3 { margin-bottom: var(--space-2); }
.qa-item p { color: var(--text-muted); margin-bottom: 0; }
/* ---------- 17. STICKY MOBILE ACTION BAR ---------- */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 24px rgba(8, 32, 31, .25); }
.action-bar a { display: flex; align-items: center; justify-content: center; gap: .55rem; font-weight: 700; font-size: .95rem; }
.action-bar__call { background: var(--ink); color: var(--gold-bright); }
.action-bar__call:hover { color: var(--gold-bright); background: var(--teal-deep); }
.action-bar__wa { background: var(--wa-green); color: var(--white); }
.action-bar__wa:hover { color: var(--white); filter: brightness(1.06); }
@media (min-width: 64em) {
.action-bar { left: auto; right: 1.5rem; bottom: 1.5rem; grid-template-columns: auto auto; gap: .75rem; height: auto; padding-bottom: 0; box-shadow: none; background: transparent; }
.action-bar a { padding: .85rem 1.5rem; border-radius: var(--radius-pill); box-shadow: var(--shadow); }
body { padding-bottom: 0; }
}
/* ---------- 18. FOOTER / DISCLOSURE ---------- */
.site-footer { background: var(--ink); color: var(--text-on-dark-muted); padding: var(--space-8) 0 var(--space-7); font-size: .88rem; }
.site-footer a { color: var(--gold-bright); }
.site-footer a:hover { color: var(--gold); }
.site-footer h4 { color: var(--white); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--space-3); }
.footer-brand { font-family: var(--font-display); font-size: 1.45rem; color: var(--white); letter-spacing: .04em; margin-bottom: var(--space-2); }
.footer-disclaimer { border-top: 1px solid var(--line-on-dark); margin-top: var(--space-6); padding-top: var(--space-5); font-size: .74rem; line-height: 1.7; color: var(--text-on-dark-muted); }
/* ---------- 19. UTILITIES ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
/* ---------- 20. FAQ ACCORDION ("Answers, Before You Call") ---------- */
.accordion { max-width: 48rem; border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item summary {
list-style: none; cursor: pointer; padding: var(--space-4) var(--space-1);
font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink);
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after {
content: "+"; flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%;
background: var(--cream); border: 1px solid var(--line); color: var(--teal);
display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 400;
transition: transform .2s ease;
}
.accordion-item[open] summary::after { content: "−"; transform: rotate(180deg); background: var(--grad-gold); color: var(--ink); border-color: transparent; }
.accordion-item .accordion-body { padding: 0 var(--space-1) var(--space-4); color: var(--text-muted); max-width: 42em; }
.accordion-item .accordion-body p { margin: 0; }
/* ---------- 21. LEAD POPUPS (exit-intent + floor-plan) ---------- */
.popup-overlay {
position: fixed; inset: 0; z-index: 200; display: none;
align-items: center; justify-content: center; padding: var(--space-4);
background: rgba(8, 32, 31, .68); backdrop-filter: blur(2px);
}
.popup-overlay.is-open { display: flex; }
body.popup-lock { overflow: hidden; }
.popup-card {
position: relative; width: 100%; max-width: 25rem; max-height: calc(100vh - 2rem); overflow-y: auto;
background: var(--cream-card); border-radius: var(--radius-lg); border-top: 3px solid var(--gold);
box-shadow: var(--shadow-lift); padding: var(--space-6) var(--space-5) var(--space-5);
animation: popup-in .22s ease;
}
@keyframes popup-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.popup-close {
position: absolute; top: .75rem; right: .75rem; width: 2rem; height: 2rem; border-radius: 50%;
background: var(--cream); border: 1px solid var(--line); color: var(--ink);
display: flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.popup-close:hover { background: var(--gold); border-color: var(--gold); }
.popup-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin-bottom: var(--space-2); padding-right: 2rem; }
.popup-card .lead-card__sub { font-size: .9rem; color: var(--text-muted); margin-bottom: var(--space-4); }
.popup-card form label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); }
.popup-card form input { width: 100%; padding: .75rem .95rem; margin-bottom: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-size: 1rem; }
.popup-card form input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13, 74, 74, .12); }