/* ============================================================
AMUSHELELO COMMUNITY PROJECT — v2 "Sunrise" design system
Warm & optimistic · bold campaign type · premium masterplan
Headings: Poppins · Body: Open Sans · Palette from logo
============================================================ */
/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Poppins';src:url('../fonts/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Open Sans';src:url('../fonts/open-sans-var.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap;}
@font-face{font-family:'Open Sans';src:url('../fonts/open-sans-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
/* ---------- Tokens ---------- */
:root{
/* logo palette */
--navy:#1d3d8c; /* logo royal blue */
--navy-deep:#122a63;
--ink:#182448; /* headings on light */
--green:#2f7d33; /* logo green */
--green-deep:#1f5c25;
--gold:#d9a326; /* logo gold arc */
--gold-deep:#b07f14;
--gold-soft:#f7e8c4;
/* warm neutrals */
--sand:#f7f1e6; /* main warm background */
--cream:#fdfaf3; /* lighter section */
--paper:#ffffff;
--earth:#c97b4a; /* terracotta accent from the land */
--body:#41496b; /* body text on light */
--muted:#6d7492;
--line:#e8dfcd;
/* on dark */
--on-dark:#f4f1e9;
--on-dark-muted:#b9c2dd;
--radius:22px;
--radius-sm:14px;
--shadow:0 10px 34px rgba(24,36,72,.10);
--shadow-lg:0 24px 64px rgba(24,36,72,.16);
--font-head:'Poppins',system-ui,sans-serif;
--font-body:'Open Sans',system-ui,sans-serif;
--nav-h:78px;
--container:1180px;
--container-wide:1320px;
}
/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
font-family:var(--font-body);
font-size:16.5px;line-height:1.7;color:var(--body);
background:var(--sand);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* height:auto is NOT optional now that every carries intrinsic width and
height attributes. Those attributes give the browser an aspect-ratio box to
reserve before the bytes arrive — which is what stopped the page jumping as
lazy images loaded — but without height:auto the attribute height is USED,
so a 2600x985 sheet scaled to 700px wide would still be laid out 985px tall
and the image would render squashed. */
img{max-width:100%;height:auto;display:block;}
[hidden]{display:none !important;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit;}
ul{list-style:none;}
::selection{background:var(--gold);color:var(--navy-deep);}
h1,h2,h3,h4,h5{font-family:var(--font-head);color:var(--ink);line-height:1.18;letter-spacing:-.01em;}
h1{font-weight:800;}h2{font-weight:700;}h3,h4{font-weight:600;}
.display-1{font-size:clamp(2.5rem,5.6vw,4.4rem);font-weight:800;line-height:1.06;letter-spacing:-.02em;}
.display-2{font-size:clamp(2.1rem,4.2vw,3.3rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;}
.section-title{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700;line-height:1.15;max-width:24ch;}
.lede{font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.75;max-width:58ch;}
.on-dark{color:var(--on-dark);}
p.on-dark,.lede.on-dark{color:var(--on-dark-muted);}
h1.on-dark,h2.on-dark,h3.on-dark,h4.on-dark,.section-title.on-dark{color:var(--on-dark);}
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:var(--font-head);font-size:.78rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
margin-bottom:14px;
}
.eyebrow::before{content:'';width:26px;height:3px;border-radius:2px;background:var(--gold);}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{content:'';width:26px;height:3px;border-radius:2px;background:var(--gold);}
.mt-8{margin-top:8px;}.mt-16{margin-top:16px;}.mt-24{margin-top:24px;}
.mt-32{margin-top:32px;}.mt-48{margin-top:48px;}
.center{text-align:center;}
.flex{display:flex;}.gap-10{gap:10px;}
/* ---------- Layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:24px;}
.container-wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:24px;}
.section{padding:104px 0;}
.section-sm{padding:64px 0;}
.section-cream{background:var(--cream);}
.section-sand{background:var(--sand);}
.section-paper{background:var(--paper);}
.section-navy{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:var(--on-dark);}
.section-green{background:linear-gradient(135deg,var(--green-deep),var(--green));color:var(--on-dark);}
.section-dark{background:radial-gradient(120% 160% at 80% -20%,var(--navy) 0%,var(--navy-deep) 58%,#0c1c44 100%);color:var(--on-dark);}
.grid{display:grid;gap:26px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.split.reverse{grid-template-columns:.95fr 1.05fr;}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px;flex-wrap:wrap;}
@media(max-width:1020px){
.grid-4{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(2,1fr);}
.split,.split.reverse{grid-template-columns:1fr;gap:44px;}
.section{padding:80px 0;}
}
@media(max-width:640px){
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
.section{padding:64px 0;}
.section-sm{padding:48px 0;}
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--font-head);font-weight:600;font-size:.95rem;
padding:14px 28px;border-radius:999px;border:2px solid transparent;
transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .18s ease;}
.btn:hover svg{transform:translateX(3px);}
.btn-lg{padding:17px 34px;font-size:1.02rem;}
.btn-primary{
background:linear-gradient(180deg,#e7b437,var(--gold));
color:var(--navy-deep);
box-shadow:0 8px 22px rgba(217,163,38,.38);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(217,163,38,.48);}
[data-application-paused-link],
[data-portal-paused-link]{
opacity:.62;filter:saturate(.35);box-shadow:none;
}
[data-application-paused-link]:hover,
[data-portal-paused-link]:hover{
opacity:.82;filter:saturate(.55);transform:none;box-shadow:none;
}
/* Public purchaser access is deliberately fail-closed while the application
platform is being re-architected. These three documents ship with the pause
class in their HTML, so JavaScript being unavailable cannot reveal a form. */
body.portal-access-paused{
min-height:100vh;background:var(--cream);padding:clamp(22px,5vw,64px);
}
body.portal-access-paused > :not(.portal-pause-screen){display:none!important;}
.portal-pause-screen{
min-height:calc(100vh - clamp(44px,10vw,128px));display:grid;place-items:center;
}
.portal-pause-card{
width:min(760px,100%);padding:clamp(28px,5vw,58px);background:#fff;
border:1px solid var(--line);border-radius:24px;
box-shadow:0 24px 70px rgba(18,42,99,.13);
}
.portal-pause-card .eyebrow{color:var(--green);}
.portal-pause-card h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.06;color:var(--navy-deep);}
.portal-pause-card p{max-width:64ch;color:var(--ink-soft);}
.portal-pause-card .portal-pause-assurance{
padding:16px 18px;border-left:4px solid var(--gold);background:var(--gold-soft);
color:var(--navy-deep);font-weight:700;
}
.portal-pause-card .portal-pause-signoff{color:var(--navy-deep);font-weight:700;}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(29,61,140,.28);}
.btn-navy:hover{transform:translateY(-2px);background:var(--navy-deep);}
.btn-outline{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(4px);}
.btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff;}
.btn-outline-dark{border-color:var(--navy);color:var(--navy);background:transparent;}
.btn-outline-dark:hover{background:var(--navy);color:#fff;}
.btn-green{background:var(--green);color:#fff;box-shadow:0 8px 22px rgba(47,125,51,.3);}
.btn-green:hover{transform:translateY(-2px);background:var(--green-deep);}
/* ---------- Navigation ---------- */
.site-nav{
position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
background:rgba(253,250,243,.86);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid rgba(232,223,205,.7);
transition:box-shadow .25s ease;
}
.site-nav.scrolled{box-shadow:0 6px 30px rgba(24,36,72,.08);}
.site-nav .container-wide{max-width:1520px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.nav-logo{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0;}
/* The client-supplied transparent full logo is displayed without cropping or
artwork changes. Its rendered height keeps the navigation row compact. */
.nav-logo img{height:52px;width:auto;flex:0 0 auto;}
.nav-logo-word{display:block;font-family:var(--font-head);font-weight:800;font-size:1.06rem;letter-spacing:.02em;color:var(--navy);line-height:1.1;}
.nav-logo-tag{display:block;font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--green);}
.nav-links{display:flex;gap:2px;}
.nav-links a{
font-family:var(--font-head);font-weight:500;font-size:.88rem;color:var(--ink);
padding:8px 11px;border-radius:999px;transition:background .15s ease,color .15s ease;
white-space:nowrap;
}
.nav-links a:hover{background:var(--gold-soft);color:var(--navy-deep);}
.nav-links a.active{background:var(--navy);color:#fff;}
.nav-cta{display:flex;align-items:center;gap:12px;flex:none;}
.nav-cta .btn{padding:11px 22px;font-size:.88rem;}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:10px;}
.nav-burger span{width:24px;height:2.5px;border-radius:2px;background:var(--navy);transition:transform .25s ease,opacity .25s ease;}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.mobile-menu{
position:fixed;inset:var(--nav-h) 0 auto 0;z-index:99;
background:var(--cream);border-bottom:1px solid var(--line);
padding:18px 24px 28px;display:none;flex-direction:column;gap:2px;
box-shadow:0 30px 60px rgba(24,36,72,.18);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-family:var(--font-head);font-weight:600;font-size:1.02rem;color:var(--ink);padding:11px 6px;border-bottom:1px solid var(--line);}
.mobile-menu a:last-of-type{border-bottom:0;}
.mobile-menu-foot{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;}
.mobile-menu-foot .btn{flex:1;}
@media(max-width:1420px){
.nav-logo img{height:44px;}
.nav-links a{font-size:.84rem;padding:7px 9px;}
.nav-cta{gap:8px;}
.nav-cta .btn{padding:10px 16px;font-size:.82rem;}
}
@media(max-width:1320px){
.nav-links{display:none;}
.nav-burger{display:flex;}
.nav-cta .btn-outline-dark,.nav-cta .nav-login{display:none;}
}
@media(max-width:560px){
.nav-cta .btn-primary{display:none;}
}
/* ---------- Hero ---------- */
.hero{
position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
color:#fff;overflow:hidden;
}
.hero-media{position:absolute;inset:0;overflow:hidden;}
.hero-media img{width:100%;height:100%;object-fit:cover;}
/* The clip sits ON TOP of the still and only becomes visible once it can
actually play (assets/js/hero-video.js adds .has-video). Until then, and
forever on a metered connection, the still IS the hero — it is a frame of the
same shot, so nothing changes except that it stops moving. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .9s ease;pointer-events:none;}
.hero-media.has-video .hero-video{opacity:1;}
@media (prefers-reduced-motion:reduce){
.hero-video{display:none;}
}
/* Scrim on the base layer — replaces the former .hero-media::after so there
is only one gradient, on the parallax base layer. */
.hero-layer--bg::after{
content:'';position:absolute;inset:0;
background:
linear-gradient(200deg,rgba(217,163,38,.18) 0%,rgba(18,42,99,.12) 34%,rgba(12,25,60,.72) 100%),
linear-gradient(to top,rgba(10,20,50,.86) 0%,rgba(10,20,50,.28) 45%,rgba(10,20,50,.06) 70%);
}
.hero-content{position:relative;z-index:2;padding:calc(var(--nav-h) + 64px) 0 56px;}
.hero-badge{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--font-head);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
backdrop-filter:blur(6px);padding:9px 18px;border-radius:999px;margin-bottom:26px;
}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#5ee27c;box-shadow:0 0 0 4px rgba(94,226,124,.25);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(94,226,124,.3);}50%{box-shadow:0 0 0 7px rgba(94,226,124,.08);}}
.hero-title{color:#fff;max-width:19ch;text-wrap:balance;}
.hero-title em{font-style:normal;color:var(--gold);white-space:nowrap;}
/* Campaign line above the hero headline. Replaces the withdrawn "Tired of …"
rotator, which cycled shame-based framing as the largest text on the page.
See SOURCE_CONFLICTS.md C-53 and banned lexicon rule B35. */
.hero-campaign-line{display:block;font-size:clamp(1.1rem,4.4vw,2.1rem);font-weight:700;letter-spacing:.01em;color:var(--gold);margin-bottom:14px;}
.hero-sub{margin-top:26px;max-width:56ch;font-size:clamp(1rem,1.3vw,1.14rem);color:rgba(244,241,233,.92);}
.hero-actions{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}
.hero-microcopy{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:.85rem;color:rgba(244,241,233,.78);flex-wrap:wrap;}
.hero-microcopy svg{width:17px;height:17px;color:#5ee27c;flex:none;}
.hero-layout{
display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
gap:clamp(36px,5vw,82px);align-items:center;
}
.hero-copy{min-width:0;}
.hero-update{
scroll-margin-top:calc(var(--nav-h) + 24px);
color:var(--ink);background:rgba(253,250,243,.94);
border:1px solid rgba(255,255,255,.72);border-top:5px solid var(--gold);
border-radius:22px;padding:clamp(24px,2.8vw,40px);
box-shadow:0 24px 70px rgba(6,14,38,.38);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.hero-update-kicker{
margin:0 0 8px;font-family:var(--font-head);font-size:.72rem;
font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);
}
.hero-update h2{
margin:0 0 18px;color:var(--navy-deep);font-size:clamp(1.35rem,2vw,2rem);
line-height:1.12;
}
.hero-update p{margin:0 0 13px;font-size:clamp(.82rem,.95vw,.94rem);line-height:1.58;}
.hero-update p:last-child{margin-bottom:0;}
.hero-update-signoff{
display:flex;flex-direction:column;gap:2px;padding-top:4px;color:var(--navy-deep);
}
.hero-update-signoff span{font-family:var(--font-head);font-size:.78rem;font-weight:700;color:var(--green-deep);}
.hero-launch-clock{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:22px 0;}
.hero-launch-unit{padding:12px 6px 10px;border-radius:12px;background:var(--navy-deep);color:#fff;text-align:center;}
.hero-launch-unit strong{display:block;font-family:var(--font-head);font-size:clamp(1.45rem,2.4vw,2rem);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.hero-launch-unit span{display:block;margin-top:6px;font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);}
.hero-launch .btn{margin-top:2px;}
.hero-launch-note{margin-top:16px!important;padding-top:14px;border-top:1px solid var(--line);font-size:.78rem!important;}
@media(max-width:480px){.hero-launch-clock{grid-template-columns:repeat(2,1fr);}}
@media(max-width:1080px){
.hero-layout{grid-template-columns:1fr;gap:34px;}
.hero-update{max-width:760px;}
}
@media(max-width:640px){
.hero-update{border-radius:16px;padding:22px 20px;}
.hero-update p{font-size:.83rem;line-height:1.52;}
}
.hero-stats{
position:relative;z-index:2;
background:rgba(12,25,60,.5);backdrop-filter:blur(10px);
border-top:1px solid rgba(255,255,255,.14);
}
.hero-stats .container-wide{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:26px;padding-bottom:26px;}
.hero-stat .num{font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);color:var(--gold);line-height:1;}
.hero-stat .lbl{font-size:.82rem;letter-spacing:.04em;color:rgba(244,241,233,.75);margin-top:7px;}
@media(max-width:840px){
.hero-stats .container-wide{grid-template-columns:repeat(2,1fr);}
.hero{min-height:92svh;}
}
/* ---------- Page hero (interior pages) ---------- */
.page-hero{
position:relative;padding:calc(var(--nav-h) + 96px) 0 88px;
background:
radial-gradient(90% 130% at 85% -30%,rgba(217,163,38,.28) 0%,rgba(217,163,38,0) 55%),
linear-gradient(140deg,var(--navy-deep) 10%,var(--navy) 65%,#2a4fa8 100%);
color:var(--on-dark);overflow:hidden;
}
.page-hero::after{
content:'';position:absolute;inset:auto 0 0 0;height:130px;
background:linear-gradient(to top,rgba(12,25,60,.35),transparent);pointer-events:none;
}
.page-hero .display-2,.page-hero h1{color:#fff;}
.page-hero .lede{color:var(--on-dark-muted);}
.page-hero--img{padding:calc(var(--nav-h) + 130px) 0 110px;}
.page-hero--img .ph-media{position:absolute;inset:0;}
.page-hero--img .ph-media img{width:100%;height:100%;object-fit:cover;}
.page-hero--img .ph-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,50,.88),rgba(10,20,50,.35) 60%,rgba(10,20,50,.25));}
.page-hero--img>.container,.page-hero--img>.container-wide{position:relative;z-index:2;}
/* ---------- Cards ---------- */
.card{
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
padding:36px;box-shadow:var(--shadow);
transition:transform .22s ease,box-shadow .22s ease;
/* A white card must never inherit the light text colour of a dark parent
section (.section-navy/-dark/-green) — that renders near-white on white. */
color:var(--body);
}
.card p,.card li,.card td{color:var(--body);}
.card .lbl,.card .meta,.card .hint{color:var(--muted);}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.card h3{font-size:1.3rem;}
/* ladder cards */
.ladder-card{position:relative;padding-top:44px;overflow:hidden;}
.ladder-card::before{content:'';position:absolute;inset:0 auto auto 0;width:100%;height:6px;background:linear-gradient(90deg,var(--gold),var(--green));}
.ladder-step{
display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.74rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);
background:#e7f2e4;border-radius:999px;padding:6px 14px;margin-bottom:18px;
}
.ladder-price{font-family:var(--font-head);font-weight:800;font-size:2rem;color:var(--navy);margin-top:10px;line-height:1.15;}
.ladder-was{display:block;font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--muted);margin-top:4px;}
.ladder-terms{
display:inline-block;margin-top:12px;font-family:var(--font-head);font-weight:600;font-size:.86rem;
color:var(--gold-deep);background:var(--gold-soft);border-radius:999px;padding:7px 15px;
}
/* stat blocks */
.stat-block .num{font-family:var(--font-head);font-weight:800;font-size:2.2rem;color:var(--gold);line-height:1.05;}
.stat-block .lbl{margin-top:9px;font-size:.9rem;color:var(--on-dark-muted);}
.stat-block{padding:10px 0;}
/* tag pill */
.tag-pill{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-head);font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--green-deep);background:#e7f2e4;border-radius:999px;padding:8px 16px;
}
.tag-pill svg{width:14px;height:14px;}
.tag-pill.gold{color:var(--gold-deep);background:var(--gold-soft);}
.tag-pill.navy{color:var(--navy);background:#e4eafc;}
/* feature list */
.feat-list{display:flex;flex-direction:column;gap:26px;}
.feat-list li{display:flex;gap:20px;align-items:flex-start;}
.feat-list .n{
flex:none;font-family:var(--font-head);font-weight:800;font-size:.95rem;color:var(--navy);
width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--gold-soft);border:1.5px solid var(--gold);
}
.feat-list h4{font-size:1.08rem;margin-bottom:4px;}
.feat-list p{font-size:.95rem;color:var(--muted);}
/* media */
.rounded-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);position:relative;background:var(--paper);}
.rounded-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.rounded-media:hover img{transform:scale(1.03);}
.media-caption{
position:absolute;inset:auto 12px 12px 12px;z-index:2;
font-size:.75rem;font-weight:600;color:#fff;
background:rgba(12,25,60,.62);backdrop-filter:blur(6px);
border-radius:10px;padding:7px 12px;pointer-events:none;
}
.render-tag{
position:absolute;top:12px;left:12px;z-index:2;
font-family:var(--font-head);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--navy-deep);background:rgba(247,232,196,.95);border-radius:999px;padding:5px 12px;pointer-events:none;
}
.render-tag.photo{color:#fff;background:rgba(47,125,51,.92);}
/* ---------- Timeline ---------- */
.timeline-track{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative;padding-top:26px;}
.timeline-line{position:absolute;top:49px;left:6%;right:6%;height:3px;background:var(--line);border-radius:2px;overflow:hidden;}
.timeline-line-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--green));transition:width 1.4s cubic-bezier(.4,0,.2,1);}
.timeline-track.inview .timeline-line-fill{width:100%;}
.timeline-dot{
width:48px;height:48px;border-radius:50%;position:relative;z-index:2;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-head);font-weight:800;color:#fff;
background:var(--navy);border:4px solid var(--cream);box-shadow:var(--shadow);
margin-bottom:18px;
}
.timeline-step h4{font-size:1.06rem;margin-bottom:6px;}
.timeline-step p{font-size:.92rem;color:var(--muted);}
@media(max-width:840px){
.timeline-track{grid-template-columns:1fr;gap:34px;padding-left:8px;}
.timeline-line{left:31px;right:auto;top:26px;bottom:26px;width:3px;height:auto;}
.timeline-line-fill{width:100%!important;height:0;}
.timeline-track.inview .timeline-line-fill{height:100%;}
.timeline-step{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start;}
.timeline-step h4{grid-column:2;}
.timeline-step p{grid-column:2;}
.timeline-dot{margin-bottom:0;grid-row:1/3;}
}
/* ---------- Accordion ---------- */
.accordion-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden;transition:box-shadow .2s ease;}
.accordion-item.open{box-shadow:var(--shadow);}
.accordion-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 26px;text-align:left;}
.accordion-trigger h3{font-size:1.05rem;font-weight:600;}
.accordion-icon{flex:none;width:30px;height:30px;border-radius:50%;background:var(--gold-soft);position:relative;transition:transform .25s ease,background .25s ease;}
.accordion-icon::before,.accordion-icon::after{content:'';position:absolute;inset:0;margin:auto;background:var(--navy);border-radius:2px;}
.accordion-icon::before{width:12px;height:2px;}
.accordion-icon::after{width:2px;height:12px;transition:transform .25s ease;}
.accordion-item.open .accordion-icon{transform:rotate(180deg);background:var(--gold);}
.accordion-item.open .accordion-icon::after{transform:rotate(90deg);}
/* The panel opens by CSS, not by a measured pixel height.
IT WAS BROKEN. The old rule was `.accordion-panel{max-height:0}` with NO open
state, so opening depended entirely on main.js writing
`panel.style.maxHeight = panel.scrollHeight + 'px'`. When that measurement
does not produce a usable value the panel stays shut and the answer is
unreachable — which is what shipped on the FAQ page: clicking a question
added `.open`, rotated the icon, and revealed nothing.
A disclosure widget that cannot disclose is worse than no widget: the content
looks present and is not. So the open state now lives in the stylesheet, where
it cannot depend on a runtime measurement.
0fr -> 1fr animates to the content's real height with no cap to overflow. */
/* minmax(0,0fr), not bare 0fr. A bare `0fr` track keeps an AUTO minimum, so the
row still reserves the item's min-content height — which for a paragraph is
one line. The first attempt at this fix left a single line of every answer
showing under every question. minmax(0,...) forces the minimum to zero. */
.accordion-panel{display:grid;grid-template-rows:minmax(0,0fr);
transition:grid-template-rows .35s ease;}
.accordion-panel>.accordion-panel-inner{min-height:0;overflow:hidden;}
.accordion-item.open .accordion-panel{grid-template-rows:minmax(0,1fr);}
/* Older engines that cannot interpolate grid rows: open fully, no animation.
Never a pixel cap — a cap silently clips the longest answers, which are the
ones most worth reading. */
@supports not (grid-template-rows:minmax(0,0fr)){
.accordion-panel{display:block;max-height:0;overflow:hidden;}
.accordion-item.open .accordion-panel{max-height:none;}
}
@media (prefers-reduced-motion:reduce){.accordion-panel{transition:none;}}
.accordion-panel-inner{padding:0 26px 24px;font-size:.98rem;}
.accordion-panel-inner a{color:var(--navy);font-weight:600;text-decoration:underline;}
/* ---------- Tables (pricing / breakdown) ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--line);box-shadow:var(--shadow);background:var(--paper);}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px;}
thead th{
font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
text-align:left;color:#fff;background:var(--navy);padding:15px 20px;
}
tbody td{padding:15px 20px;border-top:1px solid var(--line);color:var(--body);}
tbody tr:nth-child(even){background:var(--cream);}
tbody td strong{color:var(--ink);}
/* ---------- Forms ---------- */
.field{margin-bottom:20px;}
.field label{display:block;font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--ink);margin-bottom:8px;}
.field input,.field select,.field textarea{
width:100%;font:inherit;font-size:.98rem;color:var(--ink);
background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
padding:13px 16px;transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(29,61,140,.12);
}
.field .hint{font-size:.8rem;color:var(--muted);margin-top:6px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}
/* ---------- Misc utilities ---------- */
.icon-badge{
width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;
background:var(--gold-soft);color:var(--navy);margin-bottom:20px;
}
.icon-badge svg{width:26px;height:26px;}
.step-num{
display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.74rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
background:#e4eafc;border-radius:999px;padding:6px 14px;
}
.btn-block{width:100%;}
.req{color:var(--earth);}
.form-note{font-size:.8rem;color:var(--muted);margin-top:14px;text-align:center;}
.pill-group{display:flex;gap:10px;flex-wrap:wrap;}
.pill-option input{position:absolute;opacity:0;pointer-events:none;}
.pill-option span{
display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.88rem;
border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;
transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.pill-option input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff;}
.form-done{text-align:center;padding:24px 8px;}
.form-done svg{width:56px;height:56px;margin:0 auto 18px;}
.avatar-circle{
width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-family:var(--font-head);font-weight:700;font-size:1.3rem;color:#fff;
background:linear-gradient(135deg,var(--navy),var(--green));margin-bottom:18px;
}
.press-item{
display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:22px 26px;margin-bottom:14px;box-shadow:var(--shadow);
}
.press-item h4{font-size:1.05rem;}
.press-item .meta{font-size:.85rem;color:var(--muted);margin-top:3px;}
.badge-outline{
display:inline-block;font-family:var(--font-head);font-weight:600;font-size:.8rem;
border:1.5px solid var(--line);border-radius:999px;padding:8px 18px;color:var(--muted);
}
.card-dark{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:36px;backdrop-filter:blur(6px);}
.card-dark h3,.card-dark h4{color:#fff;}
.card-dark p{color:var(--on-dark-muted);}
/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:var(--on-dark-muted);padding:76px 0 34px;position:relative;}
.site-footer::before{content:'';position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--navy),var(--gold) 50%,var(--green));}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-logo-chip{display:inline-block;background:#fff;border-radius:14px;padding:10px 16px;margin-bottom:20px;}
.footer-logo-chip img{height:54px;width:auto;}
.footer-brand p{font-size:.92rem;max-width:38ch;}
.footer-col h4{color:#fff;font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;}
.footer-col a{display:block;font-size:.94rem;padding:5px 0;color:var(--on-dark-muted);transition:color .15s ease;}
.footer-col a:hover{color:var(--gold);}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-deep);}
.footer-social svg{width:17px;height:17px;}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:26px;font-size:.8rem;flex-wrap:wrap;color:rgba(185,194,221,.75);}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr;gap:34px;}}
/* ---------- Reveal animations ---------- */
[data-reveal],[data-reveal-group]>*{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
[data-reveal="left"]{transform:translateX(-34px);}
[data-reveal="right"]{transform:translateX(34px);}
[data-reveal].inview,[data-reveal-group].inview>*{opacity:1;transform:none;}
[data-reveal-group].inview>*:nth-child(2){transition-delay:.12s;}
[data-reveal-group].inview>*:nth-child(3){transition-delay:.24s;}
[data-reveal-group].inview>*:nth-child(4){transition-delay:.36s;}
@media(prefers-reduced-motion:reduce){
[data-reveal],[data-reveal-group]>*{opacity:1;transform:none;transition:none;}
html{scroll-behavior:auto;}
}
.noscript [data-reveal],.noscript [data-reveal-group]>*{opacity:1;transform:none;}
/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(12,25,60,.9);display:none;align-items:center;justify-content:center;padding:38px;cursor:zoom-out;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:82vh;border-radius:12px;box-shadow:0 40px 90px rgba(0,0,0,.5);}
.lightbox-caption{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff;font-size:.9rem;padding:0 24px;}
[data-lightbox]{cursor:zoom-in;}
/* ---------- To top ---------- */
.to-top{
position:fixed;right:22px;bottom:22px;z-index:90;width:48px;height:48px;border-radius:50%;
background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(12px);
transition:opacity .25s ease,transform .25s ease;cursor:pointer;
}
.to-top.show{opacity:1;pointer-events:auto;transform:none;}
.to-top svg{width:20px;height:20px;}
/* ---------- WhatsApp float ---------- */
.wa-float{
position:fixed;left:22px;bottom:22px;z-index:90;
display:inline-flex;align-items:center;gap:10px;
background:#25d366;color:#fff;font-family:var(--font-head);font-weight:600;font-size:.9rem;
padding:12px 20px;border-radius:999px;box-shadow:0 10px 28px rgba(37,211,102,.4);
transition:transform .18s ease;
}
.wa-float:hover{transform:translateY(-2px);}
.wa-float svg{width:19px;height:19px;}
@media(max-width:640px){.wa-float span{display:none;}.wa-float{padding:13px;}}
/* ---------- Portal-specific helpers ---------- */
.badge{
display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);
font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
border-radius:999px;padding:5px 13px;
}
.badge-green{background:#e7f2e4;color:var(--green-deep);}
.badge-gold{background:var(--gold-soft);color:var(--gold-deep);}
.badge-navy{background:#e4eafc;color:var(--navy);}
.badge-grey{background:#eceef4;color:var(--muted);}
.progress-bar{height:10px;border-radius:999px;background:var(--line);overflow:hidden;}
.progress-bar>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--green));transition:width .8s cubic-bezier(.4,0,.2,1);}
/* ---------- Live availability tracker ---------- */
.avail-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
@media(max-width:900px){.avail-wrap{grid-template-columns:1fr;gap:32px;}}
.avail-meter{background:var(--paper);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-lg);}
.avail-nums{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.avail-big{font-family:var(--font-head);font-weight:800;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;color:var(--navy);}
.avail-lbl{display:block;font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--body);margin-top:4px;}
.avail-of{font-family:var(--font-head);font-weight:600;font-size:.92rem;color:var(--muted);text-align:right;}
.avail-of strong{color:var(--green);}
.avail-updated{font-size:.78rem;color:var(--muted);margin-top:14px;display:flex;align-items:center;gap:7px;}
.avail-live-dot{width:8px;height:8px;border-radius:50%;background:#37c46a;box-shadow:0 0 0 4px rgba(55,196,106,.2);flex:none;animation:pulse 2s infinite;}
/* ============================================================
Purchaser Portal (interactive prototype / UX spec)
============================================================ */
.text-green{color:var(--green);}
.gap-16{gap:16px;}
.portal-body{background:var(--sand);}
.demo-banner{
position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:10px;
background:var(--navy-deep);color:rgba(255,255,255,.85);font-size:12.5px;padding:9px 16px;text-align:center;flex-wrap:wrap;
}
.demo-banner strong{color:var(--gold);}
.demo-banner button{background:none;border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.8);border-radius:999px;padding:3px 12px;font-size:11.5px;font-weight:600;}
.demo-banner button:hover{border-color:var(--gold);color:var(--gold);}
.portal-nav{position:relative;}
.portal-main{padding:clamp(30px,5vw,60px) 0 80px;}
.portal-shell{max-width:1180px;margin-inline:auto;padding-inline:24px;}
.portal-shell-narrow{max-width:660px;}
.portal-card{padding:clamp(26px,4vw,44px);}
.portal-card:hover{transform:none;}
.oauth-row{display:flex;flex-direction:column;gap:12px;}
.oauth-btn{
display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
padding:14px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--paper);
font-weight:600;font-size:14.5px;transition:border-color .25s,background .25s;
}
.oauth-btn:hover{border-color:var(--navy);}
.oauth-btn.is-busy{opacity:.6;pointer-events:none;}
.auth-divider{display:flex;align-items:center;gap:14px;margin:26px 0 22px;color:var(--muted);font-size:12.5px;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line);}
.apply-steps{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--muted);}
.wizard-progress{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap;}
.wizard-step{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted);padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-family:var(--font-head);}
.wizard-step span{width:20px;height:20px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);}
.wizard-step.is-active{border-color:var(--navy);color:var(--navy);}
.wizard-step.is-active span{background:var(--navy);color:#fff;}
.wizard-step.is-done{border-color:var(--green);color:var(--green);}
.wizard-step.is-done span{background:var(--green);color:#fff;}
.id-drop{display:block;border:2px dashed var(--line);border-radius:var(--radius);padding:10px;cursor:pointer;transition:border-color .25s;overflow:hidden;}
.id-drop:hover{border-color:var(--green);}
.id-drop-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:34px 16px;text-align:center;color:var(--muted);}
.id-drop-inner strong{color:var(--ink);}
.id-drop-inner span{font-size:12.5px;color:var(--muted);}
#id-preview{width:100%;max-height:260px;object-fit:contain;border-radius:8px;}
.ocr-status{margin-top:16px;font-size:13px;color:var(--muted);}
.ocr-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-bottom:8px;}
.ocr-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .6s ease;}
.ocr-filled{border-color:var(--green) !important;background:rgba(47,125,51,.05) !important;}
.contract-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.contract-paper{
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
padding:clamp(20px,3vw,34px);max-height:420px;overflow-y:auto;font-size:14px;line-height:1.7;
}
.contract-paper h4{margin-bottom:14px;font-size:17px;}
.contract-paper h4 small{display:block;font-family:var(--font-body);font-weight:600;font-size:11px;color:var(--muted);margin-top:6px;letter-spacing:.04em;}
.contract-paper p{margin-bottom:12px;color:var(--body);}
.contract-paper .contract-note{color:var(--gold-deep);font-size:12.5px;font-weight:600;}
.contract-sig{border-top:1px solid var(--line);padding-top:14px;}
.contract-sig span{font-family:var(--font-head);font-style:italic;font-size:20px;color:var(--navy);}
.signature-box{border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);padding:22px;text-align:center;min-height:76px;display:flex;align-items:center;justify-content:center;}
#signature-render{color:var(--muted);font-size:14px;}
#signature-render.has-sig{font-family:var(--font-head);font-style:italic;font-size:28px;color:var(--navy);}
.pay-tabs{display:flex;gap:8px;}
.pay-tab{flex:1;padding:12px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:var(--paper);font-weight:700;font-size:13.5px;color:var(--muted);font-family:var(--font-head);}
.pay-tab.is-active{border-color:var(--navy);background:var(--navy);color:#fff;}
.trust-box{border:1.5px solid var(--green);border-radius:var(--radius-sm);overflow:hidden;background:var(--paper);}
.trust-box-row{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.trust-box-row:last-child{border-bottom:none;}
.trust-box-row span{color:var(--muted);}
.trust-box-row.highlight{background:rgba(47,125,51,.08);}
.trust-box-row.highlight strong{color:var(--green);}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.status-pill{display:inline-block;padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--line);color:var(--muted);font-family:var(--font-head);}
.status-pill.pending{background:var(--gold-soft);color:var(--gold-deep);}
.status-pill.active{background:rgba(47,125,51,.14);color:var(--green);}
.dash-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:860px){.dash-grid{grid-template-columns:1fr;}}
.dash-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.dash-card-head h3{font-size:1.1rem;}
.kv div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;flex-wrap:wrap;}
.kv div:last-child{border-bottom:none;}
.kv span{color:var(--muted);}
.balance-line{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px;}
.balance-line strong{font-family:var(--font-head);font-size:20px;color:var(--navy);}
.balance-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;}
.balance-bar-fill{height:100%;width:1%;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .8s ease;}
.pay-table{width:100%;border-collapse:collapse;font-size:13px;min-width:0;}
.pay-table th{text-align:left;padding:8px 6px;color:var(--muted);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--line);background:none;}
.pay-table td{padding:10px 6px;border-bottom:1px solid var(--line);}
.receipt-link{color:var(--green);font-weight:700;text-decoration:underline;}
.pending-txt{color:var(--gold-deep);font-weight:600;font-size:12px;}
.updates-list li{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.updates-list li:last-child{border-bottom:none;}
.updates-list .upd-date{flex-shrink:0;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;padding-top:3px;}
.updates-list p{font-size:13px;margin-top:2px;}
.transfer-steps li{position:relative;padding:8px 0 8px 30px;font-size:13.5px;color:var(--muted);}
.transfer-steps li::before{content:'';position:absolute;left:8px;top:14px;width:10px;height:10px;border-radius:50%;border:2px solid var(--line);background:var(--paper);}
.transfer-steps li.done{color:var(--ink);font-weight:600;}
.transfer-steps li.done::before{background:var(--green);border-color:var(--green);}
.plot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.plot-cell{padding:12px 4px;border-radius:8px;border:1.5px solid var(--green);background:rgba(47,125,51,.08);color:var(--green);font-weight:700;font-size:12px;transition:all .2s;}
.plot-cell:hover:not(.taken){background:var(--green);color:#fff;}
.plot-cell.taken{border-color:var(--line);background:var(--sand);color:var(--muted);text-decoration:line-through;cursor:not-allowed;}
.plot-cell.selected{background:var(--navy);border-color:var(--navy);color:#fff;}
.plot-confirmed{padding:16px;border-radius:var(--radius-sm);background:rgba(47,125,51,.1);color:var(--green);font-weight:600;font-size:13.5px;}
.portal-modal{position:fixed;inset:0;background:rgba(12,25,60,.6);z-index:300;display:flex;align-items:center;justify-content:center;padding:5vw;}
.portal-modal-box{background:var(--cream);border-radius:var(--radius);padding:clamp(22px,4vw,40px);max-width:720px;width:100%;position:relative;max-height:88vh;overflow-y:auto;}
.portal-modal-close{position:absolute;top:10px;right:14px;background:none;border:none;font-size:26px;color:var(--muted);line-height:1;}
.demo-sms{background:var(--navy-deep);color:rgba(255,255,255,.85);border-radius:var(--radius-sm);padding:12px 16px;font-size:13px;}
.demo-sms strong{color:var(--gold);letter-spacing:.15em;}
.code-input{width:100%;padding:14px;text-align:center;font-size:24px;letter-spacing:.4em;border-radius:var(--radius-sm);border:1.5px solid var(--line);}
.code-input.shake{animation:shake .4s;border-color:#c0392b;}
@keyframes shake{25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}
.doc-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.doc-list li:last-child{border-bottom:none;}
.doc-list .doc-meta{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.doc-open{border:1.5px solid var(--line);background:none;border-radius:999px;padding:6px 16px;font-size:12.5px;font-weight:700;color:var(--ink);}
.doc-open:hover{border-color:var(--navy);}
.doc-pdf{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.06em;}
.doc-head{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--navy);padding-bottom:10px;margin-bottom:16px;}
.doc-head strong{color:var(--ink);font-size:12.5px;}
.doc-cover{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:13px;min-width:0;}
.doc-cover td{border:1px solid var(--line);padding:8px 12px;vertical-align:top;}
.doc-cover td:first-child{width:42%;color:var(--muted);background:rgba(24,36,72,.03);}
/* ============================================================
Payment calculator
============================================================ */
.calc-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;}
@media(max-width:820px){.calc-grid{grid-template-columns:1fr;}}
.calc-controls{padding:clamp(28px,4vw,44px);}
.calc-q{font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:var(--ink);}
.calc-value{font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,5vw,3.2rem);color:var(--navy);line-height:1;margin:10px 0 4px;}
.calc-slider{width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:var(--line);outline:none;margin:22px 0 8px;}
.calc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:var(--gold);border:4px solid #fff;box-shadow:var(--shadow);cursor:pointer;}
.calc-slider::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--gold);border:4px solid #fff;box-shadow:var(--shadow);cursor:pointer;}
.calc-slider:focus-visible{box-shadow:0 0 0 4px rgba(29,61,140,.18);}
.calc-scale{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);}
.calc-presets{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.calc-preset{font-family:var(--font-head);font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.calc-preset:hover{border-color:var(--navy);}
.calc-preset.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.calc-toggle{display:flex;align-items:center;gap:12px;margin-top:26px;padding:15px 16px;border:1.5px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;}
.calc-toggle input{width:20px;height:20px;accent-color:var(--green);flex:none;}
.calc-toggle .lbl{font-size:.92rem;}
.calc-note{font-size:.78rem;color:var(--muted);margin-top:16px;line-height:1.6;}
.calc-results{background:linear-gradient(160deg,var(--navy-deep),var(--navy));color:#fff;padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;}
.calc-results .eyebrow{color:var(--gold);}
.calc-headline{font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;color:#fff;margin:4px 0 6px;}
.calc-headline strong{color:var(--gold);}
.calc-sub{color:var(--on-dark-muted);font-size:.95rem;}
.calc-rows{margin-top:24px;border-top:1px solid rgba(255,255,255,.15);}
.calc-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.95rem;}
.calc-row span{color:var(--on-dark-muted);}
.calc-row strong{color:#fff;font-family:var(--font-head);font-weight:600;}
.calc-timeline{display:flex;height:14px;border-radius:999px;overflow:hidden;margin:20px 0 10px;background:rgba(255,255,255,.14);}
.calc-seg{height:100%;transition:width .4s ease;}
.calc-seg-land{background:var(--gold);}
.calc-seg-services{background:#5bbf63;}
.calc-legend{display:flex;gap:18px;font-size:.78rem;color:var(--on-dark-muted);}
.calc-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle;}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 4px;font-family:var(--font-head);margin-top:8px;border-top:1px solid rgba(255,255,255,.15);}
.calc-total .t-lbl{font-weight:600;font-size:.95rem;}
.calc-total .t-val{font-weight:800;color:var(--gold);font-size:1.2rem;}
.calc-cta{margin-top:auto;padding-top:22px;}
/* Calculator scope callout */
.calc-callout{
margin-top:24px;padding:16px 18px;border-radius:var(--radius-sm);
background:var(--gold-soft);border-left:4px solid var(--gold);
font-size:.9rem;line-height:1.65;color:var(--ink);border-top-left-radius:0;border-bottom-left-radius:0;
}
.calc-callout strong{display:block;margin-bottom:4px;color:var(--navy-deep);}
/* ============================================================
Brick vs modular comparison + assembly diagram
============================================================ */
.timebar-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:32px clamp(20px,3vw,36px);box-shadow:var(--shadow);}
.timebar-row{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:center;margin-bottom:16px;}
.timebar-label{font-family:var(--font-head);font-size:.92rem;color:var(--body);}
.timebar-label strong{color:var(--navy);}
.timebar-track{position:relative;display:flex;align-items:center;gap:12px;background:var(--sand);border-radius:999px;height:38px;}
.timebar-fill{height:38px;border-radius:999px;display:flex;align-items:center;padding-inline:16px;font-family:var(--font-head);font-weight:600;font-size:.86rem;white-space:nowrap;transition:width .9s cubic-bezier(.4,0,.2,1);}
.timebar-fill--old{background:#e3d6bd;color:#6b5a3c;}
.timebar-fill--new{background:linear-gradient(90deg,var(--green),#5bbf63);min-width:46px;}
.timebar-note{font-family:var(--font-head);font-weight:600;font-size:.86rem;color:var(--green-deep);}
.timebar-caption{font-size:.78rem;color:var(--muted);margin-top:10px;}
@media(max-width:720px){
.timebar-row{grid-template-columns:1fr;gap:8px;}
.timebar-fill{font-size:.78rem;padding-inline:12px;}
}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
@media(max-width:820px){.compare-grid{grid-template-columns:1fr;}}
.compare-col{border-radius:var(--radius);padding:32px;border:1px solid var(--line);background:var(--paper);}
.compare-col--old{background:#f4efe4;border-color:#e3d6bd;}
.compare-col--new{border:2px solid var(--green);box-shadow:var(--shadow-lg);position:relative;}
.compare-head{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.compare-tag{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:6px 14px;margin-bottom:12px;}
.compare-col--old .compare-tag{background:#e3d6bd;color:#6b5a3c;}
.compare-col--new .compare-tag{background:#e7f2e4;color:var(--green-deep);}
.compare-col h3{font-size:1.15rem;}
.compare-col--old h3{color:#6b5a3c;}
.compare-list{display:flex;flex-direction:column;gap:16px;}
.compare-list li{display:flex;gap:13px;align-items:flex-start;font-size:.94rem;line-height:1.6;}
.compare-list svg{width:21px;height:21px;flex:none;margin-top:2px;border-radius:50%;padding:3px;}
.compare-col--old .compare-list svg{color:#a8895a;background:#e9dcc4;}
.compare-col--old .compare-list li{color:#6b5a3c;}
.compare-col--old .compare-list strong{color:#5a4a30;}
.compare-col--new .compare-list svg{color:#fff;background:var(--green);}
.compare-col--new .compare-list strong{color:var(--navy);}
.assembly{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:clamp(18px,3vw,32px);overflow-x:auto;}
.assembly svg{min-width:640px;}
.asm-n{font-family:var(--font-head);font-size:12px;font-weight:700;fill:var(--gold);letter-spacing:.12em;}
.asm-l{font-family:var(--font-head);font-size:15px;font-weight:600;fill:#f4f1e9;}
.asm-op{font-family:var(--font-head);font-size:30px;font-weight:700;fill:rgba(255,255,255,.4);}
/* ============================================================
Portal — 3-step sign + debit order (no online payment)
============================================================ */
.step3-block{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--line);}
.step3-num{
width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-head);font-weight:700;font-size:.95rem;flex:none;
}
@media(max-width:560px){.step3-block{grid-template-columns:1fr;gap:12px;}}
.ack{display:flex;gap:12px;align-items:flex-start;padding:13px 0;font-size:.9rem;line-height:1.6;border-bottom:1px solid var(--line);cursor:pointer;}
.ack:last-of-type{border-bottom:0;}
.ack input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--green);}
.ack strong{color:var(--navy);}
.verify-box{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;background:var(--cream);}
.verify-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.verify-ok{
display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;
font-family:var(--font-head);font-weight:600;font-size:.86rem;color:var(--green-deep);
background:rgba(47,125,51,.1);border-radius:10px;
}
.verify-ok::before{content:'✓';font-weight:800;}
.done-tick{
width:78px;height:78px;border-radius:50%;margin:0 auto;
background:rgba(47,125,51,.12);color:var(--green);
display:flex;align-items:center;justify-content:center;
}
.done-tick svg{width:38px;height:38px;}
.next-steps{counter-reset:ns;display:flex;flex-direction:column;gap:14px;text-align:left;}
.next-steps li{counter-increment:ns;position:relative;padding-left:40px;font-size:.94rem;line-height:1.6;}
.next-steps li::before{
content:counter(ns);position:absolute;left:0;top:1px;
width:26px;height:26px;border-radius:50%;background:var(--gold-soft);color:var(--navy-deep);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-head);font-weight:700;font-size:.8rem;
}
.next-steps strong{color:var(--navy);}
/* Priority-intake counter — honest zero state.
Unit is PRIORITY PLACES, never plots. The target line and the bar are hidden
in the markup and revealed only when a real First Intake Target exists. */
[data-intake].is-zero .progress-bar{background:rgba(255,255,255,.16);}
[data-intake].is-zero .avail-of strong{color:var(--gold);}
.avail-of span[hidden]{display:none;}
[data-intake] [hidden]{display:none;}
.avail-target{font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--muted);margin:0;}
.avail-target strong{color:var(--navy);}
.avail-remaining{font-family:var(--font-head);font-weight:700;font-size:1.02rem;color:var(--body);margin:4px 0 0;}
.avail-remaining strong{color:var(--green);font-size:1.3rem;}
/* ==========================================================================
STAGE 6/7 — clarity panel, categories, the two calculators, facilities
========================================================================== */
/* ---------- "What are you securing today?" clarity panel ----------
Sits second, immediately after the aspiration. With the previous three-line
core message retired, this panel and the journey section are the only places
the two-stage structure is stated — they are load-bearing for legal accuracy,
not decoration. */
.clarity{background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:var(--radius);padding:34px 36px;}
.clarity h2{font-family:var(--font-head);font-size:clamp(1.3rem,3.2vw,1.75rem);color:var(--ink);margin:0 0 18px;}
.clarity-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
@media(max-width:820px){.clarity-cols{grid-template-columns:1fr;gap:22px;}.clarity{padding:26px 22px;}}
.clarity-col h3{font-family:var(--font-head);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;}
.clarity-yes h3{color:var(--green-deep);}
.clarity-no h3{color:#8a2f2f;}
.clarity-list{list-style:none;margin:0;padding:0;}
.clarity-list li{position:relative;padding-left:28px;margin-bottom:11px;line-height:1.6;font-size:.95rem;}
.clarity-list li::before{position:absolute;left:0;top:0;font-weight:700;}
.clarity-yes li::before{content:'✓';color:var(--green);}
.clarity-no li::before{content:'✕';color:#a94442;}
.clarity-foot{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem;color:var(--body);line-height:1.65;}
.clarity-foot em{color:var(--muted);font-size:.82rem;}
/* ---------- Plot-size categories ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.cat-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 22px;display:flex;flex-direction:column;}
.cat-card h3{font-family:var(--font-head);font-size:1.5rem;color:var(--ink);margin:0;}
.cat-price{font-family:var(--font-head);font-weight:800;font-size:1.6rem;color:var(--green-deep);margin:12px 0 2px;}
.cat-price-note{font-size:.78rem;color:var(--muted);}
.cat-meta{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:.84rem;color:var(--body);line-height:1.6;}
.cat-meta div{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;}
.cat-meta span:last-child{font-weight:600;color:var(--ink);text-align:right;}
.cat-card.is-unavailable{opacity:.72;border-style:dashed;}
.cat-unavailable{margin-top:14px;font-size:.8rem;font-style:italic;color:var(--muted);line-height:1.55;}
/* ---------- The two calculators ---------- */
.calc-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
@media(max-width:960px){.calc-pair{grid-template-columns:1fr;}}
.calc-panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px 26px;}
.calc-panel h3{font-family:var(--font-head);font-size:1.12rem;color:var(--ink);margin:0 0 6px;}
.calc-panel .calc-kind{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;}
.calc-kind-real{color:var(--green-deep);}
.calc-kind-estimate{color:var(--gold-deep);}
.calc-panel .calc-intro{font-size:.88rem;color:var(--body);line-height:1.6;margin:10px 0 20px;}
.calc-field{margin-bottom:18px;}
.calc-field label{display:block;font-family:var(--font-head);font-weight:600;font-size:.85rem;color:var(--ink);margin-bottom:8px;}
.calc-field input[type=number]{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--cream);}
.calc-cats{display:flex;gap:7px;flex-wrap:wrap;}
.calc-presets-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
.land-out{background:var(--cream);border-radius:12px;padding:18px 20px;margin-top:4px;}
.land-out.is-unset .land-figure{font-size:1.1rem;color:var(--muted);font-style:italic;}
.land-figure{font-family:var(--font-head);font-weight:800;font-size:1.9rem;color:var(--ink);line-height:1.1;}
.land-months{font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--green-deep);margin-top:8px;}
.land-years{font-size:.84rem;color:var(--muted);margin-top:3px;line-height:1.5;}
.calc-unset{font-size:.88rem;font-style:italic;color:var(--muted);line-height:1.6;margin:0;}
.infra-range{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
@media(max-width:520px){.infra-range{grid-template-columns:1fr;}}
.infra-col{background:var(--cream);border:1px solid var(--line);border-radius:11px;padding:14px 12px;text-align:center;}
.infra-col.is-central{background:#fdf6e6;border-color:var(--gold);}
.infra-lbl{display:block;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--muted);line-height:1.3;}
.infra-val{display:block;font-family:var(--font-head);font-weight:800;font-size:1.22rem;color:var(--ink);margin-top:7px;}
.infra-rate{display:block;font-size:.72rem;color:var(--muted);margin-top:3px;}
.infra-basis{font-size:.83rem;color:var(--body);line-height:1.6;margin:0 0 12px;}
/* R10. Written by the same code that writes the amounts — it cannot be
deleted while the figures remain. */
.infra-qualification{font-size:.83rem;line-height:1.65;color:#5c430a;background:#fff6e6;border:1px solid var(--gold);border-radius:10px;padding:13px 15px;margin:0 0 12px;}
.infra-indexation{font-size:.8rem;color:var(--muted);line-height:1.6;margin:0;}
.combined{background:var(--navy-deep);color:var(--on-dark);border-radius:18px;padding:26px 28px;margin-top:22px;}
.combined .eyebrow{color:var(--gold);}
.combined-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.93rem;}
.combined-row strong{color:#fff;white-space:nowrap;}
.combined-row.is-sum{border-bottom:0;padding-top:14px;font-family:var(--font-head);font-weight:700;font-size:1.02rem;}
.combined-warning{font-size:.82rem;color:var(--on-dark-muted);line-height:1.65;margin:14px 0 0;}
.combined-warning strong{color:var(--gold);}
/* ---------- Planned future facilities ---------- */
.fac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;}
/* The facility cards carry a colour taken from the plan's OWN legend (page 2 of
the A0 review set), so the card for schools is the colour the drawing uses for
schools. It is a wayfinding cue, not decoration — which is why the values are
sampled from the sheet rather than picked. */
.fac-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 20px;overflow:hidden;
transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease;}
.fac-card::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--fac,var(--gold));
transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.fac-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px -18px rgba(11,31,59,.4);border-color:color-mix(in srgb,var(--fac,var(--gold)) 45%,var(--line));}
.fac-card:hover::before{transform:scaleY(1);}
.fac-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
background:color-mix(in srgb,var(--fac,var(--gold)) 16%,#fff);color:color-mix(in srgb,var(--fac,var(--gold)) 78%,#000);
transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.fac-ico svg{width:22px;height:22px;}
.fac-card:hover .fac-ico{transform:scale(1.08) rotate(-4deg);}
.fac-card h3{font-family:var(--font-head);font-size:1rem;color:var(--ink);margin:0 0 7px;}
.fac-card p{font-size:.85rem;color:var(--body);line-height:1.6;margin:0;}
.fac-tag{display:inline-block;font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);background:#fdf6e6;border:1px solid var(--gold);border-radius:5px;padding:2px 7px;margin-bottom:9px;}
@media (prefers-reduced-motion:reduce){
.fac-card,.fac-card::before,.fac-ico{transition:none;}
.fac-card:hover{transform:none;}
.fac-card:hover .fac-ico{transform:none;}
.fac-card::before{transform:scaleY(1);}
}
/* ---- master plan sheet viewer ------------------------------------------- */
.plan-viewer{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:26px;}
.plan-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px;}
.plan-tabs{display:flex;flex-wrap:wrap;gap:8px;}
.plan-tab{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
background:var(--cream);border:1px solid var(--line);color:var(--body);border-radius:999px;padding:9px 16px;
transition:background .2s ease,color .2s ease,border-color .2s ease;}
.plan-tab svg{width:16px;height:16px;flex:none;}
.plan-tab:hover{border-color:var(--gold);color:var(--ink);}
.plan-tab.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.plan-tools{display:flex;align-items:center;gap:6px;}
.plan-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;cursor:pointer;
background:var(--cream);border:1px solid var(--line);color:var(--navy);transition:background .2s ease,border-color .2s ease;}
.plan-btn svg{width:18px;height:18px;}
.plan-btn:hover:not(:disabled){background:#fff;border-color:var(--gold);}
.plan-btn:disabled{opacity:.38;cursor:default;}
.plan-btn-text{width:auto;padding:0 14px;font:inherit;font-size:.8rem;font-weight:700;}
.plan-zoom{min-width:48px;text-align:center;font-size:.78rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.plan-stage{position:relative;overflow:hidden;border-radius:12px;background:#fff;border:1px solid var(--line);
aspect-ratio:2600/985;touch-action:pan-y pinch-zoom;cursor:zoom-in;}
.plan-stage:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.plan-stage.is-zoomed{cursor:grab;}
.plan-stage.is-zoomed:active{cursor:grabbing;}
.plan-stage img{width:100%;height:100%;object-fit:contain;display:block;transform-origin:center center;
transition:transform .18s ease-out;will-change:transform;}
.plan-stage.is-loading::after{content:'';position:absolute;inset:0;background:
linear-gradient(100deg,transparent 20%,rgba(11,31,59,.06) 50%,transparent 80%);
background-size:220% 100%;animation:plan-shimmer 1.1s linear infinite;}
@keyframes plan-shimmer{from{background-position:120% 0;}to{background-position:-120% 0;}}
.plan-hint{position:absolute;right:10px;bottom:10px;font-size:.7rem;font-weight:700;letter-spacing:.02em;
background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:999px;padding:5px 11px;color:var(--muted);
pointer-events:none;transition:opacity .25s ease;}
.plan-stage.is-zoomed .plan-hint{opacity:0;}
.plan-legend{margin:12px 0 0;overflow-x:auto;}
.plan-legend img{display:block;min-width:640px;width:100%;}
.plan-caption{margin:12px 2px 16px;font-size:.84rem;line-height:1.65;color:var(--body);}
@media (prefers-reduced-motion:reduce){
.plan-stage img{transition:none;}
.plan-stage.is-loading::after{animation:none;}
}
@media (max-width:640px){
.plan-stage{aspect-ratio:4/3;}
.plan-head{flex-direction:column;align-items:stretch;}
.plan-tools{justify-content:flex-end;}
}
.fac-disclaimer{background:var(--cream);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:16px 20px;margin-top:22px;font-size:.85rem;line-height:1.7;color:var(--body);}
/* ==========================================================================
STAGE 8 — concept master-plan explorer
========================================================================== */
.mp-shell{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start;}
@media(max-width:900px){.mp-shell{grid-template-columns:1fr;}}
.mp-controls{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 20px;position:sticky;top:88px;}
@media(max-width:900px){.mp-controls{position:static;}}
.mp-controls label{display:block;font-family:var(--font-head);font-weight:600;font-size:.82rem;color:var(--ink);margin:0 0 8px;}
.mp-controls input[type=search],.mp-controls select{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--cream);}
.mp-field{margin-bottom:18px;}
.mp-chips{display:flex;gap:6px;flex-wrap:wrap;}
.mp-chip{font:inherit;font-size:.78rem;font-weight:600;font-family:var(--font-head);padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--body);cursor:pointer;}
.mp-chip.active{background:var(--navy);border-color:var(--navy);color:#fff;}
.mp-chip-n{opacity:.62;font-weight:400;margin-left:3px;}
.mp-status{font-size:.78rem;color:var(--muted);line-height:1.55;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);}
.mp-main{min-width:0;}
.mp-count{font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--ink);margin:0 0 12px;}
.mp-results{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px;}
.mp-item-btn{width:100%;text-align:left;font:inherit;background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:12px 14px;cursor:pointer;display:block;}
.mp-item-btn:hover,.mp-item-btn:focus-visible{border-color:var(--navy);background:#eef2fb;outline:none;}
.mp-item-n{display:block;font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--ink);}
.mp-item-meta{display:block;font-size:.76rem;color:var(--muted);margin-top:3px;}
.mp-more{margin-top:16px;font:inherit;font-family:var(--font-head);font-weight:600;font-size:.82rem;padding:10px 18px;border-radius:10px;border:1px solid var(--navy);background:var(--paper);color:var(--navy);cursor:pointer;}
.mp-panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 26px 24px;margin-top:22px;position:relative;}
.mp-panel[hidden]{display:none;}
.mp-close{position:absolute;top:14px;right:16px;font-size:1.5rem;line-height:1;background:none;border:0;color:var(--muted);cursor:pointer;padding:4px 8px;}
.mp-eyebrow{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);}
.mp-panel h3{font-family:var(--font-head);font-size:1.2rem;color:var(--ink);margin:6px 0 10px;}
.mp-summary{font-size:.92rem;line-height:1.65;color:var(--body);margin:0 0 18px;}
.mp-rows{border-top:1px solid var(--line);margin-bottom:16px;}
.mp-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.86rem;}
.mp-row span{color:var(--muted);}
.mp-row strong{color:var(--ink);text-align:right;font-weight:600;}
.mp-prose{font-size:.87rem;line-height:1.65;color:var(--body);margin:0 0 12px;}
.mp-loading{font-size:.9rem;color:var(--muted);font-style:italic;margin:0;}
/* R03, verbatim. Never collapsed behind a disclosure widget. */
.mp-disclaimer{font-size:.8rem;line-height:1.65;color:#5c430a;background:#fff6e6;border:1px solid var(--gold);border-radius:10px;padding:13px 15px;margin:16px 0;}
.mp-cta{border-top:1px solid var(--line);padding-top:18px;}
.mp-cta-note{font-size:.8rem;color:var(--muted);line-height:1.6;margin:12px 0 0;}
.mp-nogeo{background:var(--cream);border-left:4px solid var(--navy);border-radius:0 12px 12px 0;padding:18px 22px;margin-bottom:24px;font-size:.87rem;line-height:1.7;color:var(--body);}
.mp-nogeo strong{color:var(--ink);}
@media (prefers-reduced-motion:reduce){.mp-item-btn{transition:none;}}
/* ==========================================================================
HARVEY SEQUENCE — the five-stage pathway, the category qualifier, nav
========================================================================== */
/* The one line that rides with the category cards. Harvey's sequence puts
three prices and a Reserve button near the fold and defers "you are not
buying a specific plot" to section 5. That gap is the exact misreading this
migration exists to prevent, so the qualification travels with the prices —
one line, stated plainly, not a panel and not a warning. */
.cat-qualifier{
max-width:66ch;margin-inline:auto;font-size:.92rem;line-height:1.6;
color:var(--body);background:var(--cream);border:1px solid var(--line);
border-radius:12px;padding:13px 18px;
}
.cat-qualifier strong{color:var(--ink);}
.cat-qualifier a{color:var(--navy);text-decoration:underline;font-weight:600;}
/* The five-stage pathway */
.pathway{list-style:none;margin:0;padding:0;max-width:76ch;margin-inline:auto;}
.pathway li{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line);}
.pathway li:last-child{border-bottom:0;}
.pathway-n{
flex:none;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
display:flex;align-items:center;justify-content:center;
font-family:var(--font-head);font-weight:800;font-size:1.02rem;
}
.pathway h3{font-family:var(--font-head);font-size:1.05rem;color:var(--ink);margin:6px 0 5px;}
.pathway p{margin:0;font-size:.93rem;line-height:1.65;color:var(--body);}
@media(max-width:560px){
.pathway li{gap:13px;}
.pathway-n{width:32px;height:32px;font-size:.9rem;}
}
/* The three categories in the hero. Harvey: "that is the product. Do not make
people search for it." */
.hero-stats .container-wide.hero-cats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;grid-template-columns:none;}
.hero-cat{
flex:1 1 160px;max-width:230px;text-decoration:none;text-align:center;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
border-radius:14px;padding:14px 16px;backdrop-filter:blur(4px);
transition:background .18s ease,border-color .18s ease;
}
.hero-cat:hover,.hero-cat:focus-visible{background:rgba(255,255,255,.18);border-color:var(--gold);outline:none;}
.hero-cat-size{display:block;font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--on-dark-muted);letter-spacing:.03em;}
.hero-cat-price{display:block;font-family:var(--font-head);font-weight:800;font-size:1.6rem;color:#fff;line-height:1.1;margin-top:3px;}
.hero-cat-note{display:block;font-size:.74rem;color:var(--on-dark-muted);margin-top:3px;}
@media(max-width:560px){
/* Three across, not 2+1. A wrapped third chip reads as an afterthought, and
these three ARE the product — they should look like one set of choices. */
.hero-stats .container-wide.hero-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.hero-cat{flex:none;max-width:none;padding:10px 4px;}
.hero-cat-size{font-size:.76rem;}
.hero-cat-price{font-size:1.02rem;}
.hero-cat-note{display:none;}
}
@media (prefers-reduced-motion:reduce){.hero-cat{transition:none;}}
/* ---------------------------------------------------------------------------
MOBILE HERO — get the three prices to the fold.
Harvey: the categories must be "visible above the fold or immediately below
the hero. That is the product. Do not make people search for it."
Measured on a 375x812 viewport the price strip sat at 987px — below the fold,
after a four-line headline and a six-line paragraph. The headline was sized
for desktop drama and carried straight down to mobile.
--------------------------------------------------------------------------- */
@media (max-width:560px){
.hero .display-1{font-size:clamp(1.9rem,8.4vw,2.6rem);line-height:1.08;}
.hero-campaign-line{font-size:1.02rem;margin-bottom:8px;}
.hero-sub{font-size:.96rem;line-height:1.55;}
.hero-badge{font-size:.68rem;padding:6px 12px;}
/* This used to be two buttons sharing the row (flex:1 1 0 each), which was
right when "See How It Works" sat beside the CTA. That button is gone, so
the same rule squeezed the one remaining CTA to 146px against the film
link and "Start Your Application" painted outside its own pill. The CTA
now sizes to its label and the film link sits under it. */
.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.hero-actions .btn{padding-inline:22px;font-size:.9rem;}
.hero-actions .btn svg{display:none;}
.hero-microcopy{font-size:.72rem;line-height:1.5;}
.hero-content{padding-block:22px;}
}
/* A lead that failed to send must SAY so. The previous handler showed a success
tick unconditionally, which is how people came to believe we had their
details when we did not. */
.form-error-box{
margin:14px 0 0;padding:12px 15px;border-radius:10px;
background:#fffafa;border:1px solid #a94442;color:#8a2f2f;
font-size:.86rem;line-height:1.6;
}
/* ==========================================================================
PROGRESSIVE SEQUENCE — sections expand on arrival, collapse once passed
--------------------------------------------------------------------------
A collapsed section is never a bare heading: it keeps its title, a one-line
summary and a visible Show control. Nothing looks deleted, and nobody has to
guess what is behind it.
========================================================================== */
.seq-bar{
display:none;width:100%;text-align:left;font:inherit;cursor:pointer;
align-items:center;gap:16px;
background:var(--paper);border:1px solid var(--line);border-radius:14px;
padding:16px 20px;color:var(--body);
transition:border-color .16s ease,background .16s ease;
}
.seq-closed .seq-bar{display:flex;}
.seq-bar:hover{border-color:var(--navy);background:#eef2fb;}
.seq-bar:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.seq-bar-text{flex:1 1 auto;min-width:0;}
.seq-bar-title{
display:block;font-family:var(--font-head);font-weight:700;
font-size:1.02rem;color:var(--ink);line-height:1.25;
}
.seq-bar-summary{
display:block;font-size:.86rem;color:var(--muted);line-height:1.5;margin-top:3px;
}
.seq-bar-action{
flex:none;display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-head);font-weight:700;font-size:.8rem;
letter-spacing:.04em;text-transform:uppercase;color:var(--navy);
}
.seq-bar-action svg{width:16px;height:16px;}
/* A closed section shrinks to its bar. The section padding collapses with it,
or the page would keep a band of empty colour where the content was. */
.seq-closed{padding-block:14px;}
.seq-closed [data-seq-body]{display:none;}
/* The open state animates only when motion is welcome. */
.seq-open [data-seq-body]{animation:seqIn .28s ease both;}
@keyframes seqIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
.seq-bar{transition:none;}
.seq-open [data-seq-body]{animation:none;}
}
@media(max-width:560px){
.seq-bar{padding:13px 15px;gap:11px;}
.seq-bar-title{font-size:.95rem;}
.seq-bar-summary{font-size:.8rem;}
.seq-bar-action span{display:none;} /* chevron only — the label costs width */
}
/* ---- purchaser portal ---------------------------------------------------- */
.portal-gate{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start;}
.portal-card{padding:34px;}
.portal-form label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.02em;
text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.portal-form input{width:100%;font:inherit;font-size:1rem;padding:14px 16px;border-radius:12px;
border:1.5px solid var(--line);background:#fff;color:var(--ink);transition:border-color .2s ease;}
.portal-form input:focus{outline:none;border-color:var(--gold);}
.portal-form input:disabled{background:var(--cream);color:var(--muted);}
.portal-msg{margin-top:14px;font-size:.86rem;line-height:1.6;}
.portal-msg.is-ok{color:#1c6b3a;font-weight:600;}
.portal-msg.is-error{color:#a32020;font-weight:600;}
.portal-msg.is-note{color:var(--muted);}
.portal-note{font-size:.85rem;color:var(--muted);}
.portal-note a{color:var(--navy);font-weight:700;}
.portal-aside{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:30px;}
.portal-aside h3{font-family:var(--font-head);font-size:1rem;color:var(--ink);margin:0 0 12px;}
.portal-aside p{font-size:.85rem;line-height:1.7;color:var(--body);margin:0;}
.portal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.portal-list li{font-size:.85rem;line-height:1.65;color:var(--body);padding-left:20px;position:relative;}
.portal-list li::before{content:'';position:absolute;left:0;top:.55em;width:8px;height:8px;
border-radius:50%;background:var(--gold);}
.portal-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;}
.portal-who{font-size:.9rem;color:var(--body);margin:0;}
.portal-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.portal-rows{display:flex;flex-direction:column;}
.portal-row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
border-bottom:1px solid var(--line);font-size:.88rem;}
.portal-row:last-child{border-bottom:none;}
.portal-row span{color:var(--muted);}
.portal-row strong{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;}
.portal-updates{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.portal-updates li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);
font-size:.87rem;color:var(--body);}
.portal-updates li:last-child{border-bottom:none;}
.portal-when{flex:none;width:104px;color:var(--muted);font-variant-numeric:tabular-nums;}
.portal-fine{font-size:.78rem;line-height:1.65;color:var(--muted);}
.nav-login{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:700;
color:var(--navy);padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);
transition:border-color .2s ease,background .2s ease;}
.nav-login svg{width:15px;height:15px;}
.nav-login:hover{border-color:var(--gold);background:var(--cream);}
@media (max-width:900px){
.portal-gate{grid-template-columns:1fr;}
.portal-grid{grid-template-columns:1fr;}
.nav-login{display:none;}
}
/* ---- what the plan contains --------------------------------------------- */
.plan-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
margin-bottom:26px;}
.plan-stat{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 18px;}
.plan-stat-lead{grid-column:span 2;background:var(--navy);border-color:var(--navy);}
.plan-stat-lead .plan-stat-n{color:#fff;}
.plan-stat-lead .plan-stat-l{color:rgba(255,255,255,.72);}
.plan-stat-n{display:block;font-family:var(--font-head);font-size:1.9rem;line-height:1.05;
color:var(--navy);font-variant-numeric:tabular-nums;}
.plan-stat-l{display:block;margin-top:6px;font-size:.79rem;line-height:1.45;color:var(--muted);}
.plan-stat-note{grid-column:1/-1;margin:0;font-size:.76rem;color:var(--muted);}
@media (max-width:560px){.plan-stat-lead{grid-column:1/-1;}}
/* Press-kit thumbnails. The page listed downloadable imagery and showed none of
it, so a journalist had to guess from a filename. */
.press-thumb{flex:none;width:132px;height:84px;border-radius:10px;overflow:hidden;
border:1px solid var(--line);background:#fff;}
.press-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:560px){.press-thumb{width:100%;height:150px;}}
/* Master plan preview — a link that IS the drawing. The homepage previously
described a plan and showed none of it. */
.plan-preview{display:block;position:relative;border-radius:16px;overflow:hidden;
border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);
transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;}
.plan-preview img{display:block;width:100%;height:auto;}
.plan-preview:hover{transform:translateY(-3px);box-shadow:0 20px 46px -22px rgba(11,31,59,.45);}
.plan-preview-bar{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;
justify-content:space-between;gap:18px;padding:16px 22px;
background:linear-gradient(to top,rgba(11,31,59,.94),rgba(11,31,59,.72) 70%,transparent);
color:#fff;}
.plan-preview-text{display:flex;flex-direction:column;gap:2px;}
.plan-preview-text strong{font-family:var(--font-head);font-size:1.02rem;}
.plan-preview-text span{font-size:.82rem;color:rgba(255,255,255,.78);}
.plan-preview-bar svg{width:22px;height:22px;flex:none;transition:transform .25s ease;}
.plan-preview:hover .plan-preview-bar svg{transform:translateX(4px);}
@media (prefers-reduced-motion:reduce){
.plan-preview,.plan-preview-bar svg{transition:none;}
.plan-preview:hover{transform:none;}
}
/* Site figures. Real photography and real plan sheets, captioned so a reader
knows which is which and how firm it is. */
.site-figure{margin:0;background:var(--paper);border:1px solid var(--line);
border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
/* A fixed aspect ratio on both images, so a tall photograph and a wide plan
sheet sit at the same height side by side instead of one card ending 200px
above the other. */
.site-figure img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;}
.site-figure{display:flex;flex-direction:column;}
.site-figure figcaption{margin-top:auto;}
.site-figure a{display:block;}
.site-figure figcaption{padding:16px 20px;font-size:.82rem;line-height:1.6;
color:var(--muted);border-top:1px solid var(--line);}
.site-figure figcaption strong{color:var(--ink);}
.site-figure figcaption a{color:var(--navy);font-weight:700;text-decoration:underline;}
.site-figure-wide img{max-height:440px;}
/* ---- illustrated facility columns --------------------------------------- */
/* Three of the six columns carry a concept illustration. The grid gives an
illustrated card two tracks so the drawing is legible; the text-only cards
keep one. Captions are not optional: these images show houses, schools and
shops that do not exist. */
/* One even grid for all six columns. Giving the illustrated cards two tracks
left a hole wherever the next card was also illustrated, and stranded a
text-only card beside a 700px-wide drawing. The renders are teasers here; the
lightbox is where they are read. */
.fac-grid-illustrated{grid-template-columns:repeat(auto-fit,minmax(248px,1fr));}
.fac-shot{margin:-22px -20px 16px;border-bottom:1px solid var(--line);position:relative;
cursor:zoom-in;}
.fac-shot::after{content:'Tap to enlarge';position:absolute;right:9px;top:9px;
font-size:.63rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
background:rgba(255,255,255,.92);border-radius:999px;padding:4px 9px;color:var(--navy);
opacity:0;transition:opacity .25s ease;pointer-events:none;}
.fac-shot:hover::after,.fac-card:focus-within .fac-shot::after{opacity:1;}
/* height:auto and NO crop. These are informational graphics, not decorative
photography: the roads render carries its legend down the left edge and the
retail render carries its disclaimer along the bottom. object-fit:cover threw
both away. Their natural ratio is already close to 3:2, so nothing is gained
by forcing one. */
.fac-shot img{display:block;width:100%;height:auto;}
.fac-shot figcaption{padding:11px 20px 12px;font-size:.73rem;line-height:1.5;
color:var(--muted);background:var(--cream);font-style:italic;}
/* =========================================================================
HARVEY'S STORYLINE — the sections the 31 July deck added
========================================================================= */
/* ---- 4. the schematic route diagram ------------------------------------- */
/* Deliberately NOT a map embed: an embed is a third-party request on every
homepage load, and a pin needs coordinates nobody has released. */
.route-map{margin:0;background:var(--paper);border:1px solid var(--line);
border-radius:18px;padding:22px 22px 0;overflow:hidden;}
.route-map svg{display:block;width:100%;height:auto;}
.route-map .rm-road{font:700 15px/1 var(--font-body);fill:#5c7fa8;letter-spacing:.1em;}
.route-map .rm-estate{font:800 22px/1 var(--font-head);fill:var(--ink);letter-spacing:.03em;}
.route-map .rm-sub{font:400 13px/1 var(--font-body);fill:#6a7383;}
.route-map .rm-pin{font:800 12px/1 var(--font-body);fill:#fff;letter-spacing:.04em;}
.route-map .rm-label{font:700 13px/1 var(--font-body);fill:var(--navy);letter-spacing:.05em;}
.route-map figcaption{padding:16px 2px 20px;font-size:.83rem;line-height:1.65;color:var(--muted);}
.route-map figcaption strong{color:var(--ink);}
.route-map figcaption a{color:var(--navy);font-weight:700;text-decoration:underline;}
@media (max-width:640px){
.route-map .rm-estate{font-size:30px;}
.route-map .rm-sub,.route-map .rm-road,.route-map .rm-label{font-size:17px;}
.route-map .rm-pin{font-size:16px;}
}
/* ---- 5. facility labels ------------------------------------------------- */
/* Six labels, not six paragraphs. The detail is on the master plan page. */
.fac-labels{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;}
.fac-labels li{display:flex;align-items:center;gap:11px;background:var(--paper);
border:1px solid var(--line);border-radius:12px;padding:15px 17px;
font-size:.92rem;font-weight:600;color:var(--ink);}
.fac-labels svg{width:20px;height:20px;flex:none;color:var(--gold-deep);}
/* ---- 6. the stage bands ------------------------------------------------- */
/* The two-stage split IS the legal shape of the deal, so it is labelled rather
than left for the reader to infer from step numbers. */
.stage-band{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:0 0 18px;
font-size:.88rem;color:var(--body);}
.stage-band span{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:#fff;background:var(--navy);border-radius:999px;padding:6px 13px;}
.stage-band-later span{background:var(--gold-deep);}
/* ---- 7. calculator additions ------------------------------------------- */
.calc-pair-single{grid-template-columns:1.15fr .85fr;}
@media (max-width:900px){.calc-pair-single{grid-template-columns:1fr;}}
.calc-panel-alt{background:var(--cream);}
.onceoff-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
border-bottom:1px solid var(--line);font-size:.9rem;}
.onceoff-row span{color:var(--muted);}
.onceoff-row strong{color:var(--ink);font-variant-numeric:tabular-nums;}
.onceoff-total{border-bottom:none;border-top:2px solid var(--gold);margin-top:4px;padding-top:13px;}
.onceoff-total strong{font-family:var(--font-head);font-size:1.15rem;}
.onceoff-window{margin-top:14px;font-size:.8rem;line-height:1.6;color:var(--muted);}
.onceoff-none{font-size:.86rem;color:var(--muted);}
/* Slide 10's three "must also say" statements. Equal weight, no hierarchy —
any one of them being missed is the misunderstanding. */
.calc-musts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.calc-musts > div{background:var(--cream);border-left:3px solid var(--gold);
border-radius:0 12px 12px 0;padding:17px 19px;font-size:.86rem;line-height:1.65;color:var(--body);}
.calc-musts strong{color:var(--ink);display:block;margin-bottom:5px;}
.calc-musts a{color:var(--navy);font-weight:700;text-decoration:underline;}
/* ---- 8. secured now vs later ------------------------------------------- */
.secure-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media (max-width:760px){.secure-pair{grid-template-columns:1fr;}}
.secure-col{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px;}
.secure-col h3{font-family:var(--font-head);font-size:1.08rem;margin:0 0 16px;color:var(--ink);}
.secure-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.secure-col li{position:relative;padding-left:30px;font-size:.92rem;line-height:1.55;color:var(--body);}
.secure-col li::before{position:absolute;left:0;top:-1px;width:20px;height:20px;border-radius:50%;
display:grid;place-items:center;font-size:.72rem;font-weight:800;}
.secure-yes{border-top:4px solid var(--green);}
.secure-yes li::before{content:'✓';background:#e4f2e6;color:#1c6b3a;}
.secure-no{border-top:4px solid #b4453f;}
.secure-no li::before{content:'✕';background:#f9e6e5;color:#a32020;}
/* ---- 9. trust ---------------------------------------------------------- */
.trust-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
border-radius:16px;padding:28px 24px;}
.trust-n{display:block;font-family:var(--font-head);font-size:.9rem;letter-spacing:.1em;
color:var(--gold);margin-bottom:12px;}
.trust-card h3{font-family:var(--font-head);font-size:1.05rem;color:#fff;margin:0 0 10px;}
.trust-card p{font-size:.88rem;line-height:1.7;color:rgba(255,255,255,.78);margin:0;}
.trust-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.trust-links a{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;
color:#fff;border:1.5px solid rgba(255,255,255,.3);border-radius:999px;padding:11px 20px;
transition:border-color .2s ease,background .2s ease;}
.trust-links a:hover{border-color:var(--gold);background:rgba(217,163,38,.14);}
/* ---- 10. FAQ citation -------------------------------------------------- */
.faq-cite{margin-top:12px;font-size:12.5px;color:var(--muted);font-style:italic;}
/* ---- the community render ------------------------------------------------ */
/* Replaces six facility label chips. "Schools & ECD" as a chip is a filing
category; this is a picture of a place. The caption is what keeps a render
from reading as a photograph of something that exists. */
.community-shot{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);
background:var(--paper);cursor:zoom-in;position:relative;}
.community-shot img{display:block;width:100%;height:auto;}
.community-shot figcaption{padding:16px 22px;font-size:.85rem;line-height:1.6;color:var(--muted);
border-top:1px solid var(--line);}
.community-shot figcaption strong{color:var(--ink);}
.community-shot::after{content:'Tap to enlarge';position:absolute;right:12px;top:12px;
font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px;color:var(--navy);
opacity:0;transition:opacity .25s ease;pointer-events:none;}
.community-shot:hover::after{opacity:1;}
/* The plan sheet becomes the secondary visual under it, so it reads as the
technical companion rather than competing for the same job. */
.plan-preview-compact img{max-height:210px;object-fit:cover;object-position:center 42%;}
@media (prefers-reduced-motion:reduce){.community-shot::after{transition:none;}}
/* =========================================================================
"CHOOSE YOUR LAND" — built to the client's mockup of 31 July 2026
========================================================================= */
/* Per-card tints, from the mockup: navy, green, gold. */
.choose-card[data-tint="navy"]{--ct:#1c2f66;--ct-soft:#e8ebf5;}
.choose-card[data-tint="green"]{--ct:#265c2b;--ct-soft:#e6efe4;}
.choose-card[data-tint="gold"]{--ct:#c8931b;--ct-soft:#fbf1da;}
/* ---- the "not a specific plot" callout ---------------------------------- */
.choose-note{display:flex;gap:16px;align-items:flex-start;background:var(--cream);
border:1px solid var(--line);border-radius:14px;padding:18px 22px;
max-width:880px;margin-inline:auto;}
.choose-note-ico{flex:none;width:34px;height:34px;border-radius:50%;background:var(--gold);
color:#fff;display:grid;place-items:center;}
.choose-note-ico svg{width:20px;height:20px;}
.choose-note p{margin:0;font-size:.88rem;line-height:1.65;color:var(--body);}
.choose-note strong{color:var(--ink);}
/* ---- the three plots, side by side -------------------------------------- */
.plot-compare{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);
background:var(--paper);}
.plot-compare img{display:block;width:100%;height:auto;}
.plot-compare figcaption{padding:14px 20px;font-size:.79rem;line-height:1.6;
color:var(--muted);border-top:1px solid var(--line);}
.plot-compare figcaption strong{color:var(--ink);}
/* ---- the cards ---------------------------------------------------------- */
.choose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:960px){.choose-grid{grid-template-columns:1fr;}}
.choose-card{display:flex;flex-direction:column;background:var(--paper);
border:1px solid var(--line);border-radius:16px;overflow:hidden;
transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;}
.choose-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px -20px rgba(11,31,59,.4);}
.choose-card-top{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:22px 20px;
align-items:center;}
.choose-card-ico{width:62px;height:62px;border-radius:50%;background:var(--ct-soft);
color:var(--ct);display:grid;place-items:center;}
.choose-card-ico svg{width:30px;height:30px;}
.choose-card-price{display:flex;flex-direction:column;gap:2px;}
.choose-card-size{font-family:var(--font-head);font-size:1.5rem;line-height:1.1;color:var(--ink);}
.choose-card-kind{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);}
.choose-card-figure{font-family:var(--font-head);font-size:1.5rem;line-height:1.15;
color:#1c6b3a;margin-top:5px;font-variant-numeric:tabular-nums;}
/* The two payment options sit beside the price, divided, as in the mockup. */
.choose-card-options{grid-column:1/-1;display:flex;flex-direction:column;gap:8px;
border-top:1px solid var(--line);padding-top:15px;}
.choose-opt{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;line-height:1.4;
color:var(--muted);}
.choose-opt svg{width:17px;height:17px;flex:none;margin-top:1px;color:var(--ct);}
.choose-opt strong{display:block;color:var(--ink);font-size:.86rem;}
.choose-or{align-self:center;font-size:.63rem;font-weight:800;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);background:var(--cream);
border:1px solid var(--line);border-radius:999px;padding:3px 10px;}
/* The button. Full width, tinted per category, and it goes somewhere. */
.choose-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;
background:var(--ct);color:#fff;font-family:var(--font-head);font-weight:700;
font-size:.92rem;letter-spacing:.02em;padding:17px 18px;
transition:filter .2s ease;}
.choose-cta svg{width:18px;height:18px;transition:transform .22s ease;}
.choose-cta:hover{filter:brightness(1.12);}
.choose-cta:hover svg{transform:translateX(4px);}
.choose-cta:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;}
@media (min-width:961px){
/* Equal-height buttons across the row regardless of text length. */
.choose-card-options{min-height:96px;}
}
/* ---- how it works, four steps ------------------------------------------ */
.choose-steps-title{text-align:center;margin:0 0 22px;position:relative;}
.choose-steps-title::before{content:'';position:absolute;left:0;right:0;top:50%;
height:1px;background:var(--line);}
.choose-steps-title span{position:relative;background:var(--paper);padding:0 18px;
font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);}
.section-paper .choose-steps-title span{background:var(--paper);}
.choose-steps-list{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(4,1fr);gap:18px;}
@media (max-width:960px){.choose-steps-list{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.choose-steps-list{grid-template-columns:1fr;}}
.choose-steps-list li{display:flex;gap:14px;align-items:flex-start;position:relative;}
/* The dashed connector between steps, from the mockup. Drawn on the gap so it
disappears automatically when the grid wraps to one column. */
@media (min-width:961px){
.choose-steps-list li:not(:last-child)::after{content:'';position:absolute;
right:-13px;top:26px;width:10px;border-top:2px dashed var(--line);}
}
/* --sc carries the tint so the badge can use it as a BACKGROUND while setting
its own white text. The first attempt used `background:currentColor;color:#fff`
on the badge itself — which makes currentColor resolve to #fff too, so the
numbers 1 to 4 rendered white on white and were invisible. */
.choose-step-ico{--sc:#1c2f66;flex:none;position:relative;width:54px;height:54px;
border-radius:50%;display:grid;place-items:center;background:#eef0f7;color:var(--sc);}
.choose-step-ico[data-tint="green"]{--sc:#265c2b;background:#e6efe4;}
.choose-step-ico[data-tint="gold"]{--sc:#a8790f;background:#fbf1da;}
.choose-step-ico svg{width:26px;height:26px;}
.choose-step-ico b{position:absolute;right:-4px;top:-4px;width:21px;height:21px;
border-radius:50%;background:var(--sc);color:#fff;font-size:.68rem;font-weight:800;
display:grid;place-items:center;line-height:1;}
.choose-steps-list h4{font-family:var(--font-head);font-size:.94rem;margin:2px 0 5px;
color:var(--ink);}
.choose-steps-list p{margin:0;font-size:.82rem;line-height:1.55;color:var(--muted);}
/* ---- the closing assurance band ---------------------------------------- */
.choose-assure{display:flex;gap:18px;align-items:flex-start;background:var(--cream);
border:1px solid var(--line);border-radius:16px;padding:24px 26px;}
.choose-assure-ico{flex:none;width:46px;height:46px;border-radius:50%;background:var(--gold);
color:#fff;display:grid;place-items:center;}
.choose-assure-ico svg{width:24px;height:24px;}
.choose-assure h3{font-family:var(--font-head);font-size:1.02rem;margin:0 0 8px;color:var(--ink);}
.choose-assure p{margin:0 0 8px;font-size:.84rem;line-height:1.65;color:var(--body);}
.choose-assure p:last-child{margin-bottom:0;font-size:.78rem;color:var(--muted);}
@media (prefers-reduced-motion:reduce){
.choose-card,.choose-cta,.choose-cta svg{transition:none;}
.choose-card:hover{transform:none;}
.choose-cta:hover svg{transform:none;}
}
/* ---- social sign-in ------------------------------------------------------ */
.portal-providers{display:flex;flex-direction:column;gap:10px;margin-top:24px;}
.provider-btn{display:flex;align-items:center;justify-content:center;gap:11px;
width:100%;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;
background:#fff;color:var(--ink);border:1.5px solid var(--line);
border-radius:12px;padding:14px 18px;transition:border-color .18s ease,background .18s ease;}
.provider-btn svg{width:20px;height:20px;flex:none;}
.provider-btn:hover:not(:disabled){border-color:var(--navy);background:#f7f9fd;}
.provider-btn:disabled{opacity:.55;cursor:default;}
.provider-btn[data-provider="apple"]{background:#000;color:#fff;border-color:#000;}
.provider-btn[data-provider="apple"]:hover:not(:disabled){background:#1a1a1a;border-color:#1a1a1a;}
.provider-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.portal-or{position:relative;text-align:center;margin:6px 0 0;}
.portal-or::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
background:var(--line);}
.portal-or span{position:relative;background:var(--paper);padding:0 14px;
font-size:.78rem;color:var(--muted);}
/* --------------------------------------------------------------------------
Staff route into the back office, shown on the purchaser portal only after
sign-in and only when the DATABASE confirms the person is an administrator.
See offerAdminPortal() in assets/js/portal.js.
-------------------------------------------------------------------------- */
.portal-admin-link{
display:flex;align-items:center;gap:18px;flex-wrap:wrap;
background:linear-gradient(135deg,var(--navy-deep),var(--navy));
color:#fff;border-radius:14px;padding:18px 22px;margin-bottom:26px;
box-shadow:0 10px 28px rgba(18,42,99,.18);
}
.portal-admin-link > div{flex:1 1 260px;display:flex;flex-direction:column;gap:3px;}
.portal-admin-link strong{font-family:var(--font-head);font-size:1rem;}
.portal-admin-link span{font-size:.84rem;opacity:.82;line-height:1.5;}
.portal-admin-link .btn{flex:0 0 auto;background:#fff;color:var(--navy-deep);box-shadow:none;}
.portal-admin-link .btn:hover{background:var(--gold);color:var(--navy-deep);}
/* --------------------------------------------------------------------------
WhatsApp click-to-chat. Bottom-LEFT deliberately: the right is where the
"Start Your Application" call to action sits on mobile, and a chat bubble
covering the primary action would cost more applications than it wins
conversations.
-------------------------------------------------------------------------- */
.wa-float{
position:fixed;left:18px;bottom:18px;z-index:40;
display:inline-flex;align-items:center;gap:9px;
background:#25D366;color:#fff;text-decoration:none;
padding:11px 16px 11px 13px;border-radius:999px;
font-family:var(--font-head);font-weight:700;font-size:.86rem;
box-shadow:0 8px 24px rgba(18,42,99,.24);
transition:transform .18s ease,box-shadow .18s ease;
}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(18,42,99,.3);color:#fff;}
.wa-float svg{width:22px;height:22px;flex:0 0 auto;}
@media (max-width:600px){
.wa-float{padding:12px;border-radius:50%;}
.wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}
@media print{.wa-float{display:none;}}
/* --------------------------------------------------------------------------
THE FLOATING WAY HOME. Injected by assets/js/homelink.js on every page of
the site except the home page itself.
IT SITS ABOVE .to-top, NOT ON IT. The right-hand corner was already taken:
main.js puts a 48px back-to-top circle at right:22 bottom:22 on nine pages.
The first version of this button used right:18 bottom:18 and landed
directly on top of it — two circles in the same place, the lower one
unreachable. So this one is stacked in the same column, one button-height
up, and shares .to-top's z-index so neither can cover the other.
Bottom-left is not an option either: that is the WhatsApp button.
-------------------------------------------------------------------------- */
.home-float{
position:fixed;right:22px;bottom:80px;z-index:90;
display:inline-flex;align-items:center;gap:8px;
background:var(--navy-deep);color:var(--on-dark);text-decoration:none;
padding:10px 15px 10px 13px;border-radius:999px;
border:1px solid rgba(255,255,255,.18);
font-family:var(--font-head);font-weight:700;font-size:.82rem;
box-shadow:0 8px 24px rgba(18,42,99,.26);
transition:transform .18s ease,box-shadow .18s ease,background .18s ease,
opacity .22s ease,visibility .22s ease;
}
.home-float:hover{
transform:translateY(-2px);background:var(--gold);color:var(--navy-deep);
border-color:var(--gold);box-shadow:0 12px 30px rgba(18,42,99,.32);
}
.home-float:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
.home-float svg{width:17px;height:17px;flex:0 0 auto;}
@media (max-width:600px){
/* Matches .to-top's 48px circle so the two read as one stack. */
.home-float{padding:0;width:48px;height:48px;border-radius:50%;
align-items:center;justify-content:center;bottom:82px;right:22px;}
.home-float span{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;}
}
@media (prefers-reduced-motion:reduce){
.home-float{transition:background .18s ease;}
.home-float:hover{transform:none;}
}
@media print{.home-float{display:none;}}
/* ==========================================================================
PURCHASER DASHBOARD (portal.html, signed in)
A warm, scannable account view. The sign-in gate above it is unchanged.
========================================================================== */
.pdash{display:grid;grid-template-columns:236px 1fr;gap:26px;align-items:start;}
@media (max-width:900px){.pdash{grid-template-columns:1fr;}}
.pdash-side{position:sticky;top:96px;background:#fff;border:1px solid var(--line);
border-radius:16px;padding:14px;box-shadow:0 10px 30px rgba(18,42,99,.06);}
@media (max-width:900px){.pdash-side{position:static;}}
.pdash-nav{display:flex;flex-direction:column;gap:2px;}
.pdash-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
font-size:.88rem;font-weight:600;color:var(--muted);text-decoration:none;}
.pdash-nav a:hover{background:#f4f7fc;color:var(--ink);}
.pdash-nav a.is-active{background:var(--gold-soft);color:var(--navy-deep);}
.pdash-ico{width:22px;text-align:center;opacity:.7;font-size:.95rem;}
.pdash-side-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.pdash-side-foot .portal-who{font-size:.76rem;color:var(--muted);margin:0 0 10px;word-break:break-word;}
.pdash-side-foot .btn{width:100%;justify-content:center;font-size:.82rem;padding:9px 14px;}
.pdash-main{min-width:0;display:flex;flex-direction:column;gap:20px;}
/* ---- welcome ---- */
.pdash-hero{display:grid;grid-template-columns:1fr minmax(210px,270px);gap:22px;
background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;
border-radius:18px;padding:28px 30px;}
@media (max-width:760px){.pdash-hero{grid-template-columns:1fr;}}
.pdash-eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold);margin:0 0 4px;font-weight:700;}
.pdash-hero h2{color:#fff;font-size:2rem;margin:0 0 6px;}
.pdash-hero-lede{font-size:.9rem;opacity:.86;line-height:1.6;margin:0;max-width:46ch;}
.pdash-progress-block{margin-top:22px;}
.pdash-pct{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.pdash-pct strong{font-family:var(--font-head);font-size:2.4rem;color:var(--gold);line-height:1;}
.pdash-pct span{font-size:.84rem;opacity:.86;}
.pdash-bar{height:9px;border-radius:99px;background:rgba(255,255,255,.18);
overflow:hidden;margin:12px 0 8px;max-width:420px;}
.pdash-bar i{display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg,#3ea06a,var(--gold));transition:width .5s ease;}
.pdash-bar.sm{background:#e3e8f1;height:7px;margin:10px 0 8px;max-width:none;}
.pdash-stage{font-size:.8rem;opacity:.8;margin:0;}
.pdash-hero-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:8px;align-self:start;}
.pdash-hero-card svg{width:26px;height:26px;color:var(--gold);}
.pdash-hero-card strong{font-family:var(--font-head);font-size:1rem;}
.pdash-hero-card span{font-size:.76rem;opacity:.82;line-height:1.55;}
/* ---- labels ---- */
.pdash-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold-deep);font-weight:700;margin:0 0 12px;}
/* ---- journey ---- */
.pdash-journey{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;}
.pdash-steps{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(5,1fr);gap:10px;}
@media (max-width:820px){.pdash-steps{grid-template-columns:1fr;}}
.pdash-steps li{display:flex;flex-direction:column;gap:4px;padding:14px 12px;
border-radius:12px;border:1px solid var(--line);background:#fbfcfe;position:relative;}
.pdash-steps li.is-done{background:#f1f8f3;border-color:#cbe5d4;}
.pdash-steps li.is-current{background:var(--navy);border-color:var(--navy);color:#fff;
box-shadow:0 8px 22px rgba(29,61,140,.24);}
.pdash-steps li.is-future{opacity:.62;}
.pdash-step-n{display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:50%;font-family:var(--font-head);font-weight:800;
font-size:.82rem;background:#fff;color:var(--navy);border:1px solid var(--line);}
.pdash-steps li.is-done .pdash-step-n{background:#3ea06a;color:#fff;border-color:#3ea06a;}
.pdash-steps li.is-current .pdash-step-n{background:var(--gold);color:var(--navy-deep);border-color:var(--gold);}
.pdash-step-l{font-size:.85rem;font-weight:700;line-height:1.3;}
.pdash-step-s{font-size:.72rem;opacity:.8;}
/* ---- cards ---- */
.pdash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;}
.pdash-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;
box-shadow:0 8px 24px rgba(18,42,99,.05);display:flex;flex-direction:column;}
.pdash-card-figure{font-family:var(--font-head);font-size:1.75rem;color:var(--navy);
margin:0 0 4px;line-height:1.1;word-break:break-word;}
.pdash-card-figure.sm{font-size:1.15rem;}
.pdash-card-sub{font-size:.82rem;color:var(--muted);margin:0;line-height:1.5;}
.pdash-card-note{font-size:.76rem;color:var(--muted);line-height:1.55;margin:10px 0 0;}
.pdash-rows{margin-top:12px;}
.pdash-rows .portal-row{display:flex;justify-content:space-between;gap:12px;
padding:6px 0;border-bottom:1px solid #f2f4f8;font-size:.79rem;}
.pdash-rows .portal-row:last-child{border-bottom:none;}
.pdash-rows .portal-row span{color:var(--muted);}
.pdash-rows .portal-row strong{text-align:right;font-weight:600;color:var(--ink);}
/* ---- activity ---- */
.pdash-activity{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;}
.pdash-fine{margin:0;}
/* ---- trust strip ---- */
.pdash-trust{list-style:none;margin:6px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;}
.pdash-trust li{display:flex;flex-direction:column;gap:4px;}
.pdash-trust strong{font-family:var(--font-head);font-size:.88rem;color:var(--ink);}
.pdash-trust span{font-size:.76rem;color:var(--muted);line-height:1.55;}
/* Signed in: the dashboard carries its own welcome, so the marketing hero
collapses to a slim band instead of stacking a second header. */
body.is-portal-signed-in .page-hero{padding-top:44px;padding-bottom:34px;}
body.is-portal-signed-in .page-hero .display-2{font-size:1.7rem;}
body.is-portal-signed-in .page-hero .lede{display:none;}
body.is-portal-signed-in .section-cream{padding-top:28px;}
/* ==========================================================================
TRUST & LEGAL (trust.html)
========================================================================== */
.trust-hero{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;
padding:74px 0 66px;}
.trust-hero h1,.trust-hero .lede{color:#fff;}
.trust-hero .lede{opacity:.88;}
.trust-hero-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:40px;align-items:center;}
@media (max-width:860px){.trust-hero-grid{grid-template-columns:1fr;gap:28px;}}
.trust-hero-list{list-style:none;margin:0;padding:22px 24px;display:flex;flex-direction:column;gap:13px;
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);border-radius:16px;}
.trust-hero-list li{position:relative;padding-left:30px;font-size:.9rem;line-height:1.5;}
.trust-hero-list li::before{content:'';position:absolute;left:0;top:2px;width:19px;height:19px;
border-radius:50%;background:var(--gold);
-webkit-mask:url("data:image/svg+xml;utf8,") center/13px no-repeat,linear-gradient(#000,#000);
-webkit-mask-composite:destination-out;mask-composite:exclude;}
.trust-steps{list-style:none;margin:0;padding:0;counter-reset:trust;}
.trust-step{display:grid;grid-template-columns:64px 1fr 200px;gap:24px;align-items:start;
padding:30px 0;border-bottom:1px solid var(--line);position:relative;}
.trust-step:last-child{border-bottom:none;}
@media (max-width:860px){
.trust-step{grid-template-columns:44px 1fr;gap:16px;}
.trust-step-note{grid-column:2;}
}
.trust-step-n{font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:var(--gold);
display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
background:var(--gold-soft);}
@media (max-width:860px){.trust-step-n{width:40px;height:40px;font-size:1.05rem;}}
.trust-step-body h2{font-size:1.28rem;margin:12px 0 12px;}
.trust-step-body p{font-size:.94rem;line-height:1.7;margin:0 0 12px;max-width:64ch;}
.trust-cite{font-size:.78rem !important;color:var(--muted);font-style:italic;margin-bottom:0 !important;}
.trust-step-note{align-self:center;background:#f3f7f4;border:1px solid #cfe3d6;border-radius:12px;
padding:14px 16px;font-size:.83rem;font-weight:600;color:#2b6a44;line-height:1.45;}
.trust-truths{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.trust-truth{background:#fff;border:1px solid var(--line);border-radius:15px;padding:22px 24px;}
.trust-truth h3{font-size:1.02rem;margin:0 0 10px;}
.trust-truth p{font-size:.87rem;line-height:1.65;color:var(--muted);margin:0;}
.trust-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;
border-radius:18px;padding:34px 38px;}
.trust-cta h2{color:#fff;font-size:1.4rem;margin:0 0 8px;}
.trust-cta p{font-size:.88rem;opacity:.85;line-height:1.6;margin:0;max-width:62ch;}
/* ==========================================================================
"Why families choose Amushelelo" — numbered cards, payment flow, amenities
========================================================================== */
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
@media (max-width:940px){.why-cards{grid-template-columns:1fr;}}
.why-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
padding:30px 26px 26px;display:flex;flex-direction:column;
box-shadow:0 10px 30px rgba(18,42,99,.06);}
.why-card.is-feature{background:linear-gradient(170deg,#fffdf7,#fff);border-color:var(--gold-soft);}
.why-n{position:absolute;top:-15px;left:26px;width:38px;height:38px;border-radius:50%;
background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
font-family:var(--font-head);font-weight:800;font-size:1rem;
box-shadow:0 6px 16px rgba(29,61,140,.3);}
.why-card .tag-pill{align-self:flex-start;margin-top:6px;}
.why-card h3{font-size:1.22rem;margin:14px 0 10px;}
.why-card > p{font-size:.92rem;line-height:1.65;margin:0 0 14px;}
.why-fine{font-size:.79rem !important;color:var(--muted);line-height:1.55;margin-top:auto !important;
padding-top:12px;border-top:1px solid var(--line);}
.why-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;}
.why-list li{position:relative;padding-left:26px;font-size:.86rem;color:var(--muted);}
.why-list li::before{content:'';position:absolute;left:0;top:6px;width:8px;height:8px;
border-radius:50%;background:var(--gold);}
.why-flow{list-style:none;margin:4px 0 0;padding:0;counter-reset:f;display:flex;
flex-direction:column;gap:0;}
.why-flow li{display:flex;flex-direction:column;gap:1px;padding:11px 0 11px 30px;position:relative;}
.why-flow li::before{content:'';position:absolute;left:8px;top:16px;width:9px;height:9px;
border-radius:50%;background:var(--gold);z-index:1;}
.why-flow li:not(:last-child)::after{content:'';position:absolute;left:12px;top:25px;bottom:-9px;
width:1px;background:var(--line);}
.why-flow strong{font-family:var(--font-head);font-size:.98rem;color:var(--ink);}
.why-flow span{font-size:.78rem;color:var(--muted);line-height:1.45;}
.why-amenities{margin-top:22px;background:#fff;border:1px solid var(--line);
border-radius:18px;padding:22px 26px;}
.why-amenities-head{font-size:.82rem !important;color:var(--muted);margin:0 0 16px !important;
line-height:1.55;}
.why-amenities-head strong{color:var(--ink);}
.why-amenities ul{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;}
.why-amenities li{display:flex;align-items:center;gap:10px;font-size:.87rem;font-weight:600;color:var(--ink);}
.why-amenities li span{flex:0 0 auto;width:36px;height:36px;border-radius:50%;
background:var(--gold-soft);display:flex;align-items:center;justify-content:center;font-size:1rem;}
.why-cta{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:20px;
flex-wrap:wrap;background:var(--gold-soft);border-radius:16px;padding:20px 26px;}
.why-cta p{margin:0;font-size:.95rem;font-weight:600;color:var(--navy-deep);}
/* Zoom readout at the sheet's own resolution limit — named, not silently dead. */
[data-plan-zoom].is-max{color:var(--gold-deep);font-weight:700;}
[data-plan-zoom].is-max::after{content:' · full detail';font-weight:400;font-size:.86em;opacity:.8;}
/* Team headshots. Square source, circular crop, faces sit high in frame so the
crop favours the top rather than the centre. */
.team-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;
object-position:50% 22%;display:block;margin-bottom:18px;
background:#eef1f7;border:2px solid #fff;box-shadow:0 4px 14px rgba(18,42,99,.16);}
/* --------------------------------------------------------------------------
NAV "MORE" MENU
The five destinations held by the burger but not the desktop bar — Home
Options, Location, Gallery, FAQs and Employers — are grouped under a "More"
trigger with a small gold caret. The panel mirrors the footer columns
(Explore / Project / Get in touch), so desktop and burger reach the same
pages and the two menus do not drift.
-------------------------------------------------------------------------- */
.nav-more{position:relative;display:flex;align-items:center;}
.nav-more-btn{
display:inline-flex;align-items:center;gap:5px;
background:none;border:none;cursor:pointer;
font-family:inherit;font-size:.88rem;font-weight:600;color:var(--ink);
padding:8px 11px;border-radius:999px;line-height:1.2;
transition:background .15s ease,color .15s ease;
}
.nav-more-btn svg{width:11px;height:11px;stroke:var(--gold);transition:transform .18s ease;}
.nav-more-btn:hover{background:var(--gold-soft);color:var(--navy-deep);}
.nav-more[data-open] .nav-more-btn{background:var(--gold-soft);color:var(--navy-deep);}
.nav-more[data-open] .nav-more-btn svg{transform:rotate(180deg);}
.nav-more-panel{
position:absolute;top:calc(100% + 8px);right:0;z-index:60;
display:flex;gap:30px;justify-content:flex-end;
min-width:400px;background:#fff;border:1px solid var(--line);border-radius:12px;
padding:16px 18px;box-shadow:0 14px 34px rgba(18,42,99,.16);
}
.nav-more-group{display:flex;flex-direction:column;gap:2px;min-width:120px;}
.nav-more-group .nav-more-head{
font-family:var(--font-head);font-size:.66rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
margin:0 0 6px;padding:0 10px;line-height:1.3;
}
.nav-more-panel a{
padding:7px 10px;border-radius:8px;font-size:.86rem;font-weight:600;
color:var(--ink);text-decoration:none;white-space:nowrap;
}
.nav-more-panel a:hover{background:var(--gold-soft);color:var(--navy-deep);}
.nav-more-panel a.active{background:var(--navy);color:#fff;}
/* The burger already lists these, so the grouped menu would duplicate it. */
@media (max-width:1120px){ .nav-more{display:none;} }
/* The purchaser's own signed agreement, in their Documents card. */
.pd-docbox{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.pd-docbox .btn{font-size:.85rem;padding:9px 16px;}
.pd-docbox .portal-msg{font-size:.78rem;margin:8px 0 0;min-height:1em;}
.pd-docbox .portal-fine{margin-top:8px;}
/* ===========================================================================
HOLDING COUNTDOWN (index.html only)
---------------------------------------------------------------------------
Visible only while , which is set by the inline
script in the head BEFORE the browser paints. Everything else in the body is
hidden by the rule below rather than by moving nodes around, so dismissing
the screen is one class removal and the page underneath is already laid out.
Nothing here asserts availability or scarcity. Rule R09 fixes the unit for a
public availability countdown as "priority places remaining", gated behind
INTAKE_TARGET_PUBLISHED (false, OI-32). This is a clock, not a stock level.
=========================================================================== */
/* WHAT SHOWS THIS SCREEN IS CSS, NOT SCRIPT. It used to be the `hidden`
attribute, taken off by countdown.js. That meant a countdown.js which never
arrived left the page hidden by the head script AND the screen hidden by
`hidden`: a blank page with nothing left to rescue it. Keying off the same
class that does the hiding means the two can never disagree. */
.holding{display:none;}
html.amu-holding .holding{display:flex;}
/* THE TAKEOVER. Scoped to direct children of body so the screen itself stays
visible; :not() on a single class keeps specificity low enough that no
component style has to fight it. */
html.amu-holding{overflow:hidden;}
html.amu-holding body>*:not(.holding):not(.filmbox){display:none !important;}
.holding{
/* Kept beside CLEAR_MS in countdown.js, which times the removal to it. */
--holding-clear:3s;
position:fixed;inset:0;z-index:9999;
align-items:center;justify-content:center;
padding:32px 22px calc(32px + env(safe-area-inset-bottom));
background:var(--navy-deep);color:var(--on-dark);
text-align:center;overflow-y:auto;
}
/* Focused by script only to place the screen reader, so no ring is wanted. */
.holding:focus{outline:none;}
.holding-media{position:absolute;inset:0;overflow:hidden;}
.holding-media img{
width:100%;height:100%;object-fit:cover;
/* Far enough back that white type stays legible over the brightest part of
the aerial photograph without a second overlay element. */
opacity:.24;filter:saturate(.85);
}
.holding-media::after{
content:"";position:absolute;inset:0;
background:radial-gradient(120% 90% at 50% 40%,
rgba(18,42,99,.55) 0%, rgba(18,42,99,.92) 70%);
}
.holding-inner{position:relative;max-width:760px;width:100%;}
/* The mark carries the name and "Housing Our People", so the AMUSHELELO
lettering that used to sit above it would now say it twice. */
.holding-logo{
display:block;margin:0 auto;
width:min(340px,72vw);height:auto;
}
/* .holding-estate is gone — client instruction, 5 August 2026. The logo above
already carries the name; the estate line under it made three stacked
headings before the clock. */
.holding-title{
margin:30px 0 0;font-family:var(--font-head);font-weight:800;
font-size:clamp(1.35rem,5vw,2.3rem);line-height:1.18;color:var(--gold);
letter-spacing:.02em;
}
.holding-clock{
display:flex;justify-content:center;flex-wrap:wrap;gap:10px;
margin:30px 0 0;
}
.holding-unit{
flex:0 1 108px;min-width:82px;
padding:14px 8px 11px;border-radius:var(--radius-sm);
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
}
.holding-unit strong{
display:block;font-family:var(--font-head);font-weight:800;
font-size:clamp(1.7rem,7vw,2.7rem);line-height:1;color:#fff;
/* Tabular figures, or the digits jitter sideways every second. */
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.holding-unit span{
display:block;margin-top:6px;font-size:.66rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--on-dark-muted);
}
/* The spoken sentence. Off-screen rather than display:none, which screen
readers skip. */
.holding-sr{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.holding-tagline{
margin:26px 0 0;font-size:.92rem;letter-spacing:.02em;
color:var(--on-dark-muted);
}
/* THE THREE-SECOND CLEAR. countdown.js drops html.amu-holding first, so the
real page is already there and laid out; this fades the screen off the top
of it rather than cutting to the hero. pointer-events:none from the first
frame means the site is clickable for the whole three seconds — a visitor
who has waited for the launch should not have to wait out an animation too.
Nothing here transitions on load: the screen has to be at full opacity in
the very first painted frame or it defeats its own purpose. */
.holding{transition:opacity var(--holding-clear) ease;}
/* display:flex again, and not by accident: clear() removes html.amu-holding
first so the site is there to be revealed, which takes this element's only
other display rule with it. Without it the screen would vanish instantly
instead of fading. */
.holding.is-clearing{display:flex;opacity:0;pointer-events:none;}
@media (max-width:420px){
.holding-unit{flex:1 1 40%;}
}
/* The photograph is heavy motion for some readers at this scale — hold it
still and flat. The clear stays: it is an opacity fade with no movement in
it, and cutting it would put the site on screen with no transition at all. */
@media (prefers-reduced-motion:reduce){
.holding-media img{opacity:.14;}
}
/* ===========================================================================
THE VISION FILM — hero link, countdown-screen button, and the dialog
=========================================================================== */
/* --------------------------------------------------------------------------
THE HERO TEASER — a still of the film, bottom-right of the hero, opening
the same full-screen dialog as the text link. Absolute inside .hero, not
fixed: it belongs to the hero and should scroll away with it rather than
follow the visitor down a page about legal terms.
-------------------------------------------------------------------------- */
.hero-teaser{
position:absolute;right:clamp(18px,3vw,44px);bottom:clamp(18px,4vh,52px);
z-index:3; /* over the hero image, under the nav and dialogs */
width:clamp(440px,38vw,620px);
padding:0;border:0;background:none;cursor:pointer;
border-radius:18px;overflow:hidden;
box-shadow:0 20px 54px rgba(6,14,38,.5);
transition:transform .2s ease, box-shadow .2s ease;
}
.hero-teaser img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;}
.hero-teaser::after{ /* keeps the caption legible over any frame */
content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(6,14,38,.78) 0%,rgba(6,14,38,0) 58%);
}
.hero-teaser-play{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:clamp(52px,4.5vw,70px);height:clamp(52px,4.5vw,70px);border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.9);
transition:background .2s ease,transform .2s ease;
}
.hero-teaser-play svg{width:clamp(22px,1.7vw,29px);height:clamp(22px,1.7vw,29px);fill:var(--navy-deep);margin-left:3px;}
.hero-teaser-cap{
position:absolute;left:0;right:0;bottom:0;z-index:2;
display:flex;align-items:baseline;gap:7px;
padding:clamp(11px,1.25vw,17px) clamp(13px,1.5vw,20px);text-align:left;
font-family:var(--font-head);color:#fff;
}
.hero-teaser-cap strong{font-weight:700;font-size:clamp(.86rem,1.05vw,1.08rem);}
.hero-teaser-cap em{font-style:normal;font-size:clamp(.74rem,.9vw,.9rem);opacity:.75;}
.hero-teaser:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(6,14,38,.55);}
.hero-teaser:hover .hero-teaser-play{background:var(--gold);transform:translate(-50%,-50%) scale(1.08);}
.hero-teaser:focus-visible{outline:3px solid var(--gold);outline-offset:4px;}
/* Keep mid-size laptops clear of the hero copy while retaining a noticeably
larger preview than the previous 250px desktop card. */
@media (min-width:901px) and (max-width:1180px){
.hero-teaser{width:360px;right:24px;bottom:24px;}
}
/* On smaller screens it joins the document flow so it cannot cover Apply Now. */
@media (max-width:900px){
.hero-teaser{
position:relative;right:auto;bottom:auto;align-self:center;
width:min(360px,calc(100% - 36px));margin:0 18px 32px;
}
.hero-teaser-play{width:44px;height:44px;}
.hero-teaser-play svg{width:19px;height:19px;margin-left:2px;}
.hero-teaser-cap{padding:10px 12px;}
.hero-teaser-cap strong{font-size:.82rem;}
.hero-teaser-cap em{font-size:.72rem;}
}
@media (prefers-reduced-motion:reduce){
.hero-teaser,.hero-teaser-play{transition:none;}
.hero-teaser:hover{transform:none;}
.hero-teaser:hover .hero-teaser-play{transform:translate(-50%,-50%);}
}
/* Hero: a play link, not a third solid button. */
.hero-film{
display:inline-flex;align-items:center;gap:11px;
background:none;border:0;padding:8px 4px;cursor:pointer;
font-family:var(--font-head);font-weight:600;font-size:1rem;color:#fff;
}
.hero-film-play{
display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
border-radius:999px;background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.5);
}
.hero-film-play svg{width:16px;height:16px;fill:#fff;margin-left:2px;}
.hero-film em{
font-style:normal;font-weight:500;font-size:.82rem;
color:var(--on-dark-muted);margin-left:9px;
}
.hero-film:hover .hero-film-play{background:var(--gold);border-color:var(--gold);}
.hero-film:hover .hero-film-play svg{fill:var(--navy-deep);}
.hero-film:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px;}
/* The countdown screen used to offer the film too. It no longer offers
anything — client instruction, 5 August 2026 — so .holding-actions and
.holding-film are gone rather than left here unreferenced. The hero link
above is now the only way into the film. */
/* The dialog. Above the countdown (9999) so it can open on top of it. */
.filmbox[hidden]{display:none;}
.filmbox{
position:fixed;inset:0;z-index:10050;
display:flex;align-items:center;justify-content:center;
padding:clamp(12px,3vw,40px);
background:rgba(10,18,42,.94);
}
.filmbox-frame{width:100%;max-width:1180px;}
.filmbox-video{
display:block;width:100%;max-height:78vh;background:#000;
border-radius:var(--radius-sm);box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.filmbox-note{
margin:14px auto 0;max-width:60ch;text-align:center;
font-size:.76rem;line-height:1.6;color:var(--on-dark-muted);
}
.filmbox-close{
position:absolute;top:max(12px,env(safe-area-inset-top));right:14px;
width:46px;height:46px;border-radius:999px;cursor:pointer;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.4);
color:#fff;font-size:1.6rem;line-height:1;
}
.filmbox-close:hover{background:rgba(255,255,255,.24);}
.filmbox-close:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
/* The master plan's required chrome disclaimer, on the home page since the
standalone plan page was retired. Never inside a collapsed element. */
.plan-chrome-note{
margin:0 0 18px;padding:12px 14px;border-left:4px solid var(--gold);
background:#fdf8ec;border-radius:0 10px 10px 0;
font-size:.85rem;line-height:1.6;color:var(--body);
}
.plan-chrome-note strong{color:var(--ink);}
/* ===========================================================================
HOW IT WORKS — the five-step pathway
---------------------------------------------------------------------------
Built from the client's design, 5 August 2026. The illustrations are inline
SVG rather than image files: the artwork existed only inside a shared
screenshot, and hand-drawn flat SVG in the brand palette scales, themes,
costs nothing to load and cannot 404. Swap in real artwork later by
replacing the