/* BR Builders & Developers — site styles */
:root {
  /* BR Developers brand palette — blue 60 / emerald 25 / soil 10 / dark 5 */
  --blue: #015ca8;
  --blue-deep: #013f75;
  --blue-ink: #012b52;
  --blue-tint: #a9cdf0;
  --emerald: #728b4a;
  --emerald-tint: #c6d6a6;
  --soil: #b2410f;
  --ink: #232629;
  --ink-2: #41464c;
  --muted: #6a7179;
  --paper: #f5f6f7;
  --paper-2: #e9edf1;
  --white: #ffffff;
  --line: rgba(1, 43, 82, 0.12);
  --line-light: rgba(255, 255, 255, 0.16);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 24px 50px -24px rgba(1, 43, 82, 0.35);
  --display: "Geologica", system-ui, sans-serif;
  --sans: "Alan Sans", system-ui, -apple-system, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -0.025em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(72px, 10vw, 130px) 0; }
.section--tight { padding: clamp(56px, 7vw, 90px) 0; }
.section--dark { background: var(--blue); color: #fff; position: relative; isolation: isolate; }
.section--paper2 { background: var(--paper-2); }
.section--white { background: var(--white); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.section--dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: var(--blue-tint); }

.h-xl { font-size: clamp(44px, 7.2vw, 96px); }
.h-lg { font-size: clamp(36px, 5vw, 64px); }
.h-md { font-size: clamp(28px, 3.4vw, 42px); }
.h-sm { font-size: clamp(21px, 2vw, 26px); }
.h-lg em, .h-xl em, .h-md em { font-style: normal; color: var(--blue); }
.section--dark em, .hero em, .page-hero em { color: var(--emerald-tint) !important; }
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 60ch; }
.section--dark .lead { color: rgba(255,255,255,.8); }
.muted { color: var(--muted); }

.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .lead { justify-self: end; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; gap: 18px; } .section-head .lead { justify-self: start; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: 15px;
  border: 1.5px solid transparent; cursor: pointer; transition: transform .2s, background .2s, color .2s, border-color .2s;
  font-family: var(--sans);
}
.btn svg { width: 18px; height: 18px; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-deep); }
.hero .btn--primary, .page-hero .btn--primary { background: #fff; color: var(--blue); }
.hero .btn--primary:hover, .page-hero .btn--primary:hover { background: var(--paper-2); }
.btn--dark { background: var(--blue-ink); color: #fff; }
.btn--dark:hover { background: var(--blue); }
.btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.btn--ghost:hover { background: rgba(255,255,255,.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Logo — single-colour SVG used as a mask so it takes the current text colour */
.logo { display: inline-flex; align-items: center; }
.logo-img {
  display: block; width: 150px; aspect-ratio: 830 / 260; background: currentColor;
  -webkit-mask: url(../img/logo-white.svg) center / contain no-repeat;
  mask: url(../img/logo-white.svg) center / contain no-repeat;
}
.site-footer .logo-img { width: 180px; }

/* Brand pattern — repeating BR monogram, from the brand book */
.pattern::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background: url(../img/brand-pattern.svg) 0 0 / 132px 132px repeat;
}

/* Header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: #fff; transition: background .3s, color .3s, box-shadow .3s;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.site-header.is-solid, .site-header.is-light { background: rgba(246, 245, 240, .94); color: var(--ink); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.site-header.is-solid .logo-img, .site-header.is-light .logo-img { background: var(--blue); }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a:not(.btn) { padding: 10px 16px; font-weight: 600; font-size: 15px; border-radius: 999px; opacity: .88; transition: opacity .2s, background .2s; }
.nav a:not(.btn):hover { opacity: 1; background: rgba(127,127,127,.12); }
.nav a[aria-current="page"] { opacity: 1; position: relative; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: translateX(-50%); }
.nav .btn { margin-left: 10px; padding: 11px 20px; }
.menu-toggle { display: none; background: none; border: 0; color: inherit; padding: 8px; cursor: pointer; }
.menu-toggle svg { width: 28px; height: 28px; }

@media (max-width: 900px) {
  .menu-toggle, .site-header .logo { display: block; position: relative; z-index: 2; }
  .nav {
    position: fixed; inset: 0; background: var(--blue); color: #fff;
    flex-direction: column; justify-content: center; gap: 8px;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility .25s;
  }
  .nav a:not(.btn) { font-family: var(--display); font-size: 34px; font-weight: 300; }
  .nav .btn--primary { background: #fff; color: var(--blue); }
  .nav .btn { margin: 20px 0 0; }
  body.menu-open .nav { opacity: 1; visibility: visible; pointer-events: auto; }
  body.menu-open .site-header { color: #fff; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.menu-open .site-header .logo-img { background: #fff; }
  body.menu-open { overflow: hidden; }
}

/* Home hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; transform: scale(1.06); animation: heroZoom 14s ease-out forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,30,58,.6) 0%, rgba(1,30,58,.1) 35%, rgba(1,30,58,.3) 60%, rgba(1,30,58,.9) 100%); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(48px, 8vh, 90px); padding-top: 140px; }
.hero h1 { max-width: 14ch; margin-bottom: 26px; }
.hero .lead { color: rgba(255,255,255,.86); margin-bottom: 34px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 40px; margin-top: clamp(40px, 7vh, 80px); padding-top: 26px; border-top: 1px solid var(--line-light); }
.hero-meta div { min-width: 120px; }
.hero-meta strong { display: block; font-family: var(--display); font-size: clamp(30px, 3.5vw, 44px); font-weight: 300; line-height: 1; }
.hero-meta span { font-size: 13.5px; color: rgba(255,255,255,.72); }

/* Inner page hero */
.page-hero { position: relative; color: #fff; padding: 190px 0 clamp(64px, 9vw, 110px); overflow: hidden; background: var(--blue); isolation: isolate; }
.page-hero--img .page-hero-media { position: absolute; inset: 0; }
.page-hero--img .page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,43,82,.92) 0%, rgba(1,63,117,.6) 55%, rgba(1,63,117,.15) 100%); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { max-width: 16ch; margin-bottom: 22px; }
.page-hero .lead { color: rgba(255,255,255,.82); }

/* Grids */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.split--wide { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 900px) { .split, .split--wide { grid-template-columns: 1fr; } }

.img-frame { border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.img-badge {
  position: absolute; left: 20px; bottom: 20px; background: var(--blue); color: #fff;
  padding: 14px 18px; border-radius: 14px; font-weight: 700; font-size: 14px; line-height: 1.25;
}
.img-badge strong { display: block; font-family: var(--display); font-size: 34px; font-weight: 500; line-height: 1; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stats > div { padding: 30px 24px 6px 0; }
.stats > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.stats strong { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(36px, 4vw, 54px); line-height: 1; margin-bottom: 8px; }
.stats strong sup { font-size: .45em; vertical-align: super; color: var(--blue); }
.stats span { font-size: 14px; color: var(--muted); }
.section--dark .stats { border-color: var(--line-light); }
.section--dark .stats > div + div { border-color: var(--line-light); }
.section--dark .stats span { color: rgba(255,255,255,.7); }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Cards */
.card { background: var(--white); border-radius: var(--radius); padding: 30px; border: 1px solid var(--line); }
.card-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .card-grid, .card-grid--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .card-grid, .card-grid--2, .card-grid--4 { grid-template-columns: 1fr; } }

.value { padding: 30px 28px; border-radius: var(--radius); background: rgba(255,255,255,.07); border: 1px solid var(--line-light); transition: transform .25s, border-color .25s; }
.value:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1); }
.value .num { font-family: var(--display); color: var(--emerald-tint); font-size: 15px; margin-bottom: 30px; display: block; }
.value h3 { font-size: 26px; margin-bottom: 8px; color: #fff; }
.value p { color: rgba(255,255,255,.75); font-size: 15.5px; }

.icon-dot { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(1,92,168,.09); color: var(--blue); margin-bottom: 20px; }
.icon-dot svg { width: 22px; height: 22px; }

/* Quote */
.quote { font-family: var(--display); font-size: clamp(26px, 3.4vw, 46px); line-height: 1.22; max-width: 22ch; font-weight: 300; letter-spacing: -0.02em; }
.quote::before { content: "\201C"; display: block; color: var(--blue); font-size: 2.2em; line-height: .6; margin-bottom: 12px; }
.quote-by { margin-top: 26px; font-size: 14px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }

/* Feature project */
.feature { display: grid; grid-template-columns: 1.3fr 1fr; border-radius: 20px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
.feature-media { min-height: 520px; position: relative; }
.feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-body { padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.tag { display: inline-block; background: var(--emerald); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 20px; align-self: flex-start; }
.mini-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin: 28px 0 34px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mini-specs dt { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.mini-specs dd { margin: 2px 0 0; font-family: var(--display); font-size: 22px; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } .feature-media { min-height: 320px; } }

/* Check list */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; }
.checks li::before {
  content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.checks--2 { grid-template-columns: 1fr 1fr; gap: 14px 30px; }
@media (max-width: 620px) { .checks--2 { grid-template-columns: 1fr; } }

/* Residences */
.res-card { background: var(--white); border-radius: var(--radius); padding: 28px; border: 1px solid var(--line); display: flex; flex-direction: column; }
.res-card .count { font-family: var(--display); font-size: 64px; line-height: 1; font-weight: 200; color: var(--blue); }
.res-card h3 { font-size: 24px; margin: 14px 0 6px; }
.res-card p { color: var(--muted); font-size: 15px; }
.res-card .pill { margin-top: auto; align-self: flex-start; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--paper-2); }
.res-card:nth-child(1) { border-top: 5px solid var(--blue); }
.res-card:nth-child(2) { border-top: 5px solid var(--blue-ink); }
.res-card:nth-child(3) { border-top: 5px solid var(--emerald); }
.res-card:nth-child(4) { border-top: 5px solid var(--soil); }

/* Amenity image cards */
.amen-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.amen { border-radius: var(--radius); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.amen-img { aspect-ratio: 3 / 4; overflow: hidden; }
.amen-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.amen:hover .amen-img img { transform: scale(1.05); }
.amen-body { padding: 18px 18px 22px; flex: 1; }
.amen-body h3 { font-size: 20px; margin-bottom: 4px; }
.amen-body p { font-size: 14px; opacity: .8; }
.amen-body { color: #fff; }
.amen:nth-child(1) .amen-body { background: var(--blue); }
.amen:nth-child(2) .amen-body { background: var(--blue-ink); }
.amen:nth-child(3) .amen-body { background: var(--emerald); }
.amen:nth-child(4) .amen-body { background: var(--soil); }
.amen:nth-child(5) .amen-body { background: var(--ink); }
@media (max-width: 1000px) { .amen-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .amen-grid { grid-template-columns: 1fr 1fr; } .amen:last-child { grid-column: span 2; } .amen:last-child .amen-img { aspect-ratio: 16/9; } }

.facility-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 40px; }
.facility { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--white); border-radius: 12px; font-weight: 600; font-size: 15px; border: 1px solid var(--line); }
.facility svg { width: 22px; height: 22px; color: var(--blue); flex-shrink: 0; }

/* Masterplan */
.masterplan { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.masterplan .img-frame { cursor: zoom-in; }
.legend { list-style: none; margin: 0; padding: 0; counter-reset: lg; }
.legend li { counter-increment: lg; display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-light); font-weight: 500; }
.legend li::before { content: counter(lg, decimal-leading-zero); font-family: var(--display); font-size: 14px; color: var(--blue); background: #fff; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
@media (max-width: 900px) { .masterplan { grid-template-columns: 1fr; } }

/* Location */
.loc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.loc-item { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.loc-item svg { width: 22px; height: 22px; color: var(--blue); flex-shrink: 0; }
@media (max-width: 620px) { .loc-list { grid-template-columns: 1fr; } }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-height: 420px; background: var(--paper-2); }
.map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

/* Tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { padding: 15px 22px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; background: var(--paper); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.total td { font-weight: 800; background: rgba(1,92,168,.08); color: var(--blue-ink); }
tr.highlight td { font-weight: 700; }
.section--dark .table-wrap { background: rgba(255,255,255,.06); border-color: var(--line-light); }
.section--dark th { background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); }
.section--dark th, .section--dark td { border-color: var(--line-light); }
.section--dark tr.total td { background: rgba(255,255,255,.12); color: #fff; }

/* Scenario toggle */
.toggle { display: inline-flex; background: var(--paper-2); padding: 5px; border-radius: 999px; gap: 4px; margin-bottom: 26px; }
.toggle button { border: 0; background: transparent; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-family: var(--sans); font-size: 14px; cursor: pointer; color: var(--muted); }
.toggle button[aria-pressed="true"] { background: var(--blue); color: #fff; }

/* Big numbers (invest) */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.kpi span { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.kpi strong { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3vw, 38px); line-height: 1.05; }
.kpi small { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.kpi--green { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.kpi--green span, .kpi--green small { color: rgba(255,255,255,.8); }
.kpi--dark { background: var(--blue); color: #fff; border-color: var(--blue); }
.kpi--dark span, .kpi--dark small { color: rgba(255,255,255,.75); }
@media (max-width: 1000px) { .kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr; } }

/* Profit flow */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: fl; }
.flow-step { padding: 28px 26px; border: 1px solid var(--line-light); position: relative; counter-increment: fl; }
.flow-step + .flow-step { border-left: 0; }
.flow-step:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.flow-step:last-child { border-radius: 0 var(--radius) var(--radius) 0; background: rgba(255,255,255,.1); }
.flow-step::before { content: counter(fl, decimal-leading-zero); font-family: var(--display); color: var(--emerald-tint); font-size: 14px; display: block; margin-bottom: 16px; }
.flow-step h3 { font-size: 22px; color: #fff; margin-bottom: 8px; }
.flow-step p { font-size: 15px; color: rgba(255,255,255,.75); }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow-step { border-left: 1px solid var(--line-light) !important; border-radius: 0 !important; }
  .flow-step:nth-child(n+3) { border-top: 0; }
}
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } .flow-step + .flow-step { border-top: 0; } }

/* Split bar */
.splitbar { display: flex; height: 64px; border-radius: 14px; overflow: hidden; margin: 30px 0 14px; font-weight: 800; }
.splitbar div { display: flex; align-items: center; padding: 0 20px; }
.splitbar .a { flex: 80; background: var(--emerald); color: #fff; }
.splitbar .b { flex: 20; background: #fff; color: var(--blue); }

/* Cost bars */
.costs { display: grid; gap: 4px; }
.cost-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 120px; gap: 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.cost-row .bar { height: 10px; background: rgba(1, 43, 82, .08); border-radius: 999px; overflow: hidden; }
.cost-row .bar i { display: block; height: 100%; background: var(--blue); border-radius: 999px; width: 0; transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.cost-row .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.cost-row .amt small { display: block; font-weight: 500; color: var(--muted); font-size: 12.5px; }
.cost-row.total { border-bottom: 0; border-top: 2px solid var(--blue-ink); font-weight: 800; margin-top: 6px; padding-top: 18px; }
@media (max-width: 700px) {
  .cost-row { grid-template-columns: 1fr auto; gap: 6px 14px; }
  .cost-row .bar { grid-column: 1 / -1; grid-row: 2; }
}

.note { font-size: 14px; color: var(--muted); padding: 18px 20px; border-left: 3px solid var(--soil); background: rgba(178,65,15,.06); border-radius: 0 10px 10px 0; margin-top: 22px; }
.section--dark .note { color: rgba(255,255,255,.8); }

.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .three-col { grid-template-columns: 1fr; } }
.panel { border-radius: var(--radius); padding: 32px; background: var(--white); border: 1px solid var(--line); }
.panel h3 { font-size: 26px; margin-bottom: 20px; }
.panel ul { margin: 0; padding-left: 18px; display: grid; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.panel--risk { background: #fbf1ec; border-color: rgba(178,65,15,.3); }
.panel--risk h3 { color: var(--soil); }

.disclaimer { font-size: 13.5px; color: var(--muted); line-height: 1.6; max-width: 90ch; }

/* CTA band */
.cta { background: var(--blue); color: #fff; border-radius: 20px; isolation: isolate; padding: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; position: relative; overflow: hidden; }
.cta h2 { max-width: 16ch; }
.cta .btn-row { justify-content: flex-end; }
.cta::after {
  content: ""; position: absolute; right: -40px; bottom: -70px; width: 300px; height: 330px; background: rgba(255,255,255,.08);
  -webkit-mask: url(../img/logo-mark.svg) center / contain no-repeat; mask: url(../img/logo-mark.svg) center / contain no-repeat;
  pointer-events: none; z-index: -1;
}
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; } .cta .btn-row { justify-content: flex-start; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-cards { display: grid; gap: 12px; }
.contact-card { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
a.contact-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.contact-card .icon-dot { margin: 0; }
.contact-card span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.contact-card strong { display: block; font-size: 17px; font-weight: 700; margin-top: 2px; word-break: break-word; }

.form { background: var(--white); border-radius: 24px; padding: clamp(26px, 4vw, 44px); border: 1px solid var(--line); box-shadow: var(--shadow); }
.form h2 { margin-bottom: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); transition: border-color .2s, background .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { margin: 0; position: relative; }
.chips input { position: absolute; inset: 0; opacity: 0; pointer-events: none; margin: 0; }
.chips span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 600; font-size: 14px; cursor: pointer; transition: all .2s; }
.chips input:checked + span { background: var(--blue); color: #fff; border-color: var(--blue); }
.chips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.form-status { margin-top: 14px; font-size: 14px; color: var(--blue); font-weight: 600; min-height: 1.4em; }

/* Footer */
.site-footer { background: var(--blue-ink); color: rgba(255,255,255,.75); position: relative; isolation: isolate; overflow: hidden; padding: 80px 0 30px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid var(--line-light); }
.site-footer .logo { color: #fff; margin-bottom: 20px; }
.site-footer h4 { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fff; font-weight: 800; margin-bottom: 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-tag { font-family: var(--display); font-size: 22px; color: #fff; line-height: 1.3; max-width: 18ch; font-weight: 300; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; font-size: 13px; color: rgba(255,255,255,.55); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* Floating WhatsApp */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(0,0,0,.4); transition: transform .2s; }
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 28px; height: 28px; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-media img { animation: none; transform: none; }
  html { scroll-behavior: auto; }
}

.mt-s { margin-top: 18px; } .mt-m { margin-top: 34px; } .mt-l { margin-top: 60px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* CTA band on brand blue */
.cta .btn--dark { background: #fff; color: var(--blue); }
.cta .btn--dark:hover { background: var(--paper-2); }
.cta .btn--ghost:hover { background: rgba(255,255,255,.1); }

/* Header button stays visible over blue / photo heroes */
.site-header:not(.is-solid) .nav .btn--primary { background: #fff; color: var(--blue); }

/* Key–value table that stacks on small screens */
.kv td:first-child { color: var(--muted); font-weight: 600; width: 34%; }
.kv td:last-child { text-align: right; }
@media (max-width: 620px) {
  .kv tr { display: block; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .kv tr:last-child { border-bottom: 0; }
  .kv td { display: block; padding: 0; border: 0; width: auto !important; text-align: left !important; }
  .kv td:first-child { font-size: 13px; margin-bottom: 2px; }
}

/* ===== Editorial refresh: lighter type, outline nav button ===== */
h1, h2, h3 { font-weight: 300; }
.nav { gap: 4px; }
.nav a:not(.btn) { font-weight: 500; }
.btn--outline { border-color: currentColor; color: inherit; background: transparent; }
.btn--outline:hover { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.site-header.on-light:not(.is-solid) { color: var(--blue-ink); }
.site-header.on-light .logo-img { background: var(--blue); }
@media (min-width: 901px) {
  .nav { flex: 1; margin-left: 40px; }
  .nav a:first-child { margin-left: auto; }
  .nav .btn { margin-left: auto; padding: 11px 26px; }
}
@media (max-width: 900px) { .nav .btn--outline { color: #fff; } }

/* ===== "We build places for people who want to" ===== */
.want { position: relative; background: #0c141c; color: #fff; overflow: hidden; isolation: isolate; padding-bottom: clamp(70px, 9vw, 120px); }
.want-media { position: absolute; left: 0; right: 0; top: 0; height: min(620px, 70vw); z-index: -1; }
.want-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 80%;
  transform: scaleY(-1); opacity: .55; filter: saturate(.9);
  /* the image is flipped, which flips the mask too, so the gradient runs bottom-up */
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
}
.want-inner { padding-top: clamp(90px, 11vw, 150px); }
.want-title {
  font-weight: 200; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(38px, 6vw, 88px); margin: 0 0 clamp(50px, 7vw, 90px) clamp(0px, 12vw, 180px);
}
.want-title span { display: block; }
.want-title .in1 { padding-left: clamp(40px, 15vw, 240px); }
.want-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1060px; }
.want-row { border-top: 1px solid rgba(255,255,255,.16); opacity: .28; transition: opacity .8s ease; }
.want-row:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.want-row.lit { opacity: 1; }
.want-row a { display: grid; grid-template-columns: 1fr 1.25fr 72px; gap: 30px; align-items: center; padding: 30px 0; }
.want-row h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; color: #fff; }
.want-row p { margin: 0; font-size: 15px; color: rgba(255,255,255,.72); max-width: 40ch; }
.want-go { width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; justify-self: end; transition: background .3s, color .3s, transform .3s; }
.want-go svg { width: 24px; height: 24px; transition: transform .35s; }
.want-row a:hover .want-go { background: var(--blue); color: #fff; }
.want-row a:hover .want-go svg { transform: rotate(-45deg); }
@media (max-width: 760px) {
  .want-row a { grid-template-columns: 1fr 52px; gap: 10px 18px; padding: 24px 0; }
  .want-row p { grid-column: 1; grid-row: 2; }
  .want-go { grid-column: 2; grid-row: 1 / span 2; width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .want-row { opacity: 1; } }


/* ===== Investor-first home ===== */
.stats-foot { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); }

.how { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.how--solo { align-items: center; }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; } }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 64px 1fr; gap: 4px 18px; padding: 24px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(st, decimal-leading-zero); grid-row: span 2; font-family: var(--display); font-weight: 200; font-size: 40px; line-height: 1; color: var(--blue); }
.steps h3 { font-size: 23px; }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; }

.calc { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow); }
.calc h3 { font-size: 26px; margin-bottom: 22px; }
.calc-label { display: flex; justify-content: space-between; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.calc-label span { font-weight: 500; color: var(--muted); }
.calc-input { display: grid; grid-template-columns: 52px 1fr 52px; border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; }
.calc-input button { border: 0; background: var(--paper); font-size: 22px; color: var(--blue); cursor: pointer; font-family: var(--sans); }
.calc-input button:hover { background: var(--paper-2); }
.calc-input input { border: 0; text-align: center; font-family: var(--display); font-size: 30px; font-weight: 300; padding: 10px 0; width: 100%; color: var(--blue-ink); -moz-appearance: textfield; appearance: textfield; }
.calc-input input::-webkit-outer-spin-button, .calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input input:focus { outline: none; background: rgba(1,92,168,.04); }
.calc-range { width: 100%; margin: 16px 0 6px; accent-color: var(--blue); }
.calc-out { margin: 14px 0 0; display: grid; gap: 0; }
.calc-out div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.calc-out dt { color: var(--muted); font-size: 14.5px; font-weight: 600; }
.calc-out dd { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(19px, 1.9vw, 24px); color: var(--blue-ink); text-align: right; font-variant-numeric: tabular-nums; }
.calc-out div:nth-child(2) dd { color: var(--blue); }
.calc-note { font-size: 12.5px; color: var(--muted); margin: 14px 0 20px; line-height: 1.55; }

.inv-strip {
  margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 18px 24px; border-radius: 14px; background: rgba(1,92,168,.07); border: 1px solid rgba(1,92,168,.18); color: var(--blue-ink); font-size: 15.5px;
  transition: background .2s;
}
.inv-strip:hover { background: rgba(1,92,168,.12); }
.inv-strip-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.inv-strip-go svg { width: 16px; height: 16px; }
.footer-note { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.55); }
.stats strong { white-space: nowrap; }
@media (max-width: 420px) { .stats strong { font-size: 32px; } }

/* ===== Home hero: photo → headline → building, so the tower stands in front of the words =====
   hero-avenora.jpg and hero-avenora-building.webp share one 3200×2025 canvas, so with identical
   object-fit/position they line up exactly. --s is the browser's cover scale for that canvas;
   the headline and round button are placed in canvas pixels × --s to stay locked to the building.

   The headline is one centred, justified block (like the reference): "Built to last." and "Owned"
   share a left edge, "together." shares the right edge with line one. Its size is the largest that
   fits (a) the sky between the header and the tower and (b) the space left of the side note. */
.hx {
  --H: max(100svh, 680px);
  --s: max(calc(100vw / 3200), calc(var(--H) / 2025));
  --tower: calc(0.7 * var(--H) - 383.5 * var(--s));   /* y of the highest roof peak (canvas y 1034) */
  --overlap: .34;                                      /* how far the tower rises into the last line, in ems */
  --lh: .92;                                           /* headline line height */
  --head-gap: clamp(136px, 15.5vh, 156px);             /* the headline never starts closer than this to the top (header is 84px) */
  --side: calc(max((100vw - var(--wrap)) / 2, 0px) + var(--gutter));
  --f: min(
    clamp(48px, min(9vw, 15vh), 150px),
    calc((var(--tower) - var(--head-gap)) / (3 * var(--lh) - var(--overlap))),
    calc((100vw - 2 * var(--side) - 300px) / 4.9)      /* "Built to last." is ~4.9em wide; fit between the left edge and the note */
  );
  position: relative; height: var(--H); overflow: hidden; isolation: isolate;
  background: #9cc3ec; color: #13202b;
}
.hx-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.hx-photo { z-index: -2; }
.hx::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(238,244,250,.8) 0%, rgba(238,244,250,.45) 30%, rgba(238,244,250,0) 60%);
}
.hx-head {
  position: absolute; left: 0; right: 0; z-index: 1;
  top: max(calc(var(--head-gap) + 3 * var(--lh) * var(--f)), calc(var(--tower) + var(--overlap) * var(--f)));
  transform: translateY(-100%);
}
.hx-title {
  width: max-content; margin: 0 auto; padding: 0;
  font-size: var(--f); font-weight: 400; line-height: var(--lh); letter-spacing: -0.045em;
}
.hx-title span { display: block; white-space: nowrap; }
.hx-title .l1 { font-weight: 200; }
.hx-title .l3 { text-align: right; }
/* With the note on the right, centre the headline in the space left of it (shift left by half the
   note's width + gap) so the composition doesn't lean right. Phones/tablets hide the note and stay centred. */
@media (min-width: 1101px) { .hx-title { transform: translateX(-220px); } }
.hx-note {
  position: absolute; right: var(--gutter); top: calc(var(--f) * .14);
  max-width: 230px; margin: 0; font-size: 16px; line-height: 1.5; color: #22303b;
}
.hx-building { z-index: 2; }
.hx-round {
  position: absolute; z-index: 3;
  left: min(calc(50% + 680 * var(--s)), calc(100% - 80px));   /* over the building's right wing, clear of both signs */
  top: calc(var(--tower) + 360 * var(--s));
  transform: translate(-50%, -50%);
  width: clamp(124px, 12vw, 184px); aspect-ratio: 1; border-radius: 50%;
  background: var(--emerald); color: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 0 clamp(20px, 2.2vw, 32px);
  font-size: clamp(12px, 1vw, 14px); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s;
}
.hx-round svg { width: 20px; height: 20px; align-self: flex-end; transition: transform .35s; }
.hx-round:hover { transform: translate(-50%, -50%) scale(1.05); background: #5f7639; }
.hx-round:hover svg { transform: rotate(-45deg); }
@media (max-width: 1100px) {
  /* no room for the side note beside a large headline; the stats band below says the same */
  .hx { --f: min(clamp(48px, min(9vw, 15vh), 150px), calc((var(--tower) - var(--head-gap)) / (3 * var(--lh) - var(--overlap)))); }
  .hx-note { display: none; }
}
@media (max-width: 760px) {
  .hx { --overlap: .28; --head-gap: 118px; --f: min(17vw, calc((var(--tower) - var(--head-gap)) / (3 * var(--lh) - var(--overlap)))); }
}

/* Quieter navigation over the home hero, closer to the reference */
.site-header.on-light:not(.is-solid) { color: #13202b; }
@media (min-width: 901px) {
  .site-header.on-light .nav a:not(.btn) { font-weight: 400; opacity: .78; }
  .site-header.on-light .nav a[aria-current="page"] { opacity: 1; }
  .site-header.on-light .btn--outline { font-weight: 500; border-width: 1px; }
}

.hx-stats { background: var(--white); padding: 34px 0 40px; border-bottom: 1px solid var(--line); }
.hx-stats .stats { border-top: 0; }
.hx-stats .stats > div { padding-top: 6px; }

/* ===== Gallery page ===== */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.filters button {
  font: inherit; font-size: 14.5px; font-weight: 600; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); transition: all .2s;
}
.filters button:hover { border-color: var(--blue); color: var(--blue); }
.filters button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; grid-auto-flow: dense; gap: 14px; }
.g-item { position: relative; margin: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--paper-2); }
.g-item.g-tall { grid-row: span 2; }
.g-item.g-wide { grid-column: span 2; grid-row: span 2; }
.g-item[hidden] { display: none; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.g-item:hover img, .g-item:focus-visible img { transform: scale(1.04); }
.g-item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 16px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(1,30,58,.78));
  display: grid; gap: 2px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.g-item:hover figcaption, .g-item:focus-visible figcaption { opacity: 1; transform: none; }
.g-item figcaption strong { font-family: var(--display); font-weight: 400; font-size: 19px; }
.g-item figcaption span { font-size: 13.5px; opacity: .85; }
@media (hover: none) { .g-item figcaption { opacity: 1; transform: none; } }
@media (max-width: 900px) { .g-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; } }
@media (max-width: 520px) { .g-grid { grid-auto-rows: 150px; gap: 10px; } .g-item figcaption span { display: none; } .g-item figcaption { padding: 30px 12px 10px; } .g-item figcaption strong { font-size: 15px; } }

/* Lightbox with previous / next */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(1,22,45,.95); display: none; align-items: center; justify-content: center; padding: 70px 80px; }
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: 100%; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 170px); border-radius: 10px; object-fit: contain; }
.lightbox figcaption { color: rgba(255,255,255,.85); font-size: 15px; text-align: center; }
.lightbox figcaption strong { color: #fff; font-family: var(--display); font-weight: 400; font-size: 18px; margin-right: 8px; }
.lb-btn { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 50px; height: 50px; border-radius: 50%; font-size: 22px; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.lb-btn:hover { background: rgba(255,255,255,.25); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: .1em; }
@media (max-width: 640px) { .lightbox { padding: 70px 12px; } .lb-prev, .lb-next { top: auto; bottom: 18px; transform: none; } }

.cost-more summary { cursor: pointer; font-weight: 700; color: var(--blue); padding: 16px 0; list-style: none; }
.cost-more summary::-webkit-details-marker { display: none; }
.cost-more summary::after { content: " +"; }
.cost-more[open] summary::after { content: " –"; }

/* Gallery preview on Home */
.peek { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 260px 260px; gap: 14px; }
.peek a { border-radius: 14px; overflow: hidden; display: block; }
.peek a.peek-big { grid-row: span 2; }
.peek img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.peek a:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .peek { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 160px; } .peek a.peek-big { grid-row: auto; grid-column: span 2; } }

/* Stats: equal columns, each figure centred between its dividers */
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats > div, .stats > div + div { padding-left: 16px; padding-right: 16px; text-align: center; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(3) { padding-left: 16px; }
}
.stats span { display: block; line-height: 1.4; }
.stats > div { padding-bottom: 20px; }
@media (max-width: 760px) { .stats > div:nth-child(n+3) { padding-top: 22px; } }

/* "We build for people who want to" — brand palette: Blue Depth base, photo tinted into it, Emerald accents */
.want { background: var(--blue); }
.want-media { mix-blend-mode: luminosity; }
.want-media img { opacity: .38; filter: grayscale(1) contrast(1.1); }
.want::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(1,92,168,.15) 0%, rgba(1,92,168,.55) 40%, var(--blue) 70%);
}
.want-row, .want-row:last-child { border-color: rgba(255,255,255,.22); }
.want-row p { color: rgba(255,255,255,.8); }
.want-go { background: #fff; color: var(--blue); }
.want-row a:hover .want-go { background: var(--emerald); color: #fff; }
.want-row a:hover h3 { color: var(--emerald-tint); }
.want-row h3 { transition: color .3s; }

/* Round hero button: text and arrow centred, larger arrow */
.hx-round { align-items: center; text-align: center; gap: 14px; padding: 0 18px; }
.hx-round span { max-width: none; }
.hx-round svg { align-self: center; width: clamp(28px, 2.6vw, 38px); height: clamp(28px, 2.6vw, 38px); stroke-width: 1.6; }
.hx-round svg { width: clamp(42px, 3.8vw, 56px); height: clamp(42px, 3.8vw, 56px); stroke-width: 1.4; margin: -6px 0; }

/* Stats: equal space above and below each figure, inside and outside the dividers */
.hx-stats { padding: 36px 0; }
.stats > div, .stats > div + div { padding-top: 24px; padding-bottom: 24px; }
.stats strong { margin-bottom: 10px; }
@media (max-width: 760px) { .stats > div:nth-child(n+3) { padding-top: 24px; } }
.hx-stats .stats > div { padding-top: 24px; padding-bottom: 24px; }

/* ===== Hero entrance: building → headline lines one by one → round button =====
   Photo and building cutout share one animation so they stay aligned while moving.
   "backwards" fill keeps the start state during each delay, then hands back to the
   normal styles, so hover effects on the button still work afterwards. */
.hx-layer { animation: hxScene 1.6s cubic-bezier(.2,.7,.2,1) backwards; }
.hx-building { animation: hxScene 1.6s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes hxScene { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }

.hx-title span { animation: hxLine .9s cubic-bezier(.2,.7,.2,1) backwards; }
.hx-title .l1 { animation-delay: 1.0s; }
.hx-title .l2 { animation-delay: 1.3s; }
.hx-title .l3 { animation-delay: 1.6s; }
@keyframes hxLine { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.hx-note { animation: hxFadeUp .8s ease-out 1.9s backwards; }
@keyframes hxFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hx-round { animation: hxPop .8s cubic-bezier(.34,1.56,.64,1) 2.2s backwards; }
@keyframes hxPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .hx-layer, .hx-building, .hx-title span, .hx-note, .hx-round { animation: none; }
}

/* =====================================================================
   Site-wide motion, in the same language as the Home hero:
   things settle into place → lines rise out of a soft blur in sequence → round elements pop last.
   ===================================================================== */
@keyframes mRise { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mUp   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes mPop  { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes mDash { from { width: 0; } to { width: 26px; } }
@keyframes mDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* Header eases in on every page */
.site-header .wrap { animation: mDown .9s cubic-bezier(.2,.7,.2,1) .15s backwards; }

/* Inner page heroes: image settles, then label → headline → coloured phrase → intro → buttons */
.page-hero-media img { animation: hxScene 1.6s cubic-bezier(.2,.7,.2,1) backwards; }
/* the brand pattern fades up to its normal faint strength (5%), never beyond */
.page-hero.pattern::before { animation: mPattern 1.6s ease-out both; }
@keyframes mPattern { from { opacity: 0; } to { opacity: .05; } }
.page-hero .eyebrow { animation: mUp .8s cubic-bezier(.2,.7,.2,1) .5s backwards; }
.page-hero .eyebrow::before { animation: mDash .8s cubic-bezier(.2,.7,.2,1) .7s backwards; }
.page-hero h1 { animation: mRise 1s cubic-bezier(.2,.7,.2,1) .75s backwards; }
.page-hero h1 em { display: inline-block; animation: mRise 1s cubic-bezier(.2,.7,.2,1) 1.1s backwards; }
.page-hero .lead { animation: mUp .9s cubic-bezier(.2,.7,.2,1) 1.35s backwards; }
.page-hero .btn-row { animation: mUp .9s cubic-bezier(.2,.7,.2,1) 1.6s backwards; }

/* Section headings on scroll: heading comes into focus, coloured phrase follows, dash draws in */
.reveal .h-lg, .reveal .h-md, .reveal .want-title { filter: blur(8px); transition: filter 1s cubic-bezier(.2,.7,.2,1) .1s; }
.reveal.in .h-lg, .reveal.in .h-md, .reveal.in .want-title { filter: none; }
.reveal .h-lg em, .reveal .h-md em { display: inline-block; opacity: 0; transform: translateY(.3em); transition: opacity .9s cubic-bezier(.2,.7,.2,1) .4s, transform .9s cubic-bezier(.2,.7,.2,1) .4s; }
.reveal.in .h-lg em, .reveal.in .h-md em { opacity: 1; transform: none; }
.reveal .eyebrow::before { width: 0; transition: width .8s cubic-bezier(.2,.7,.2,1) .25s; }
.reveal.in .eyebrow::before { width: 26px; }

/* "We build for people who want to:" — lines one by one, like the hero */
.want-title.reveal { opacity: 1; transform: none; filter: none; }
.want-title span { opacity: 0; }
.want-title.in span { animation: mRise 1s cubic-bezier(.2,.7,.2,1) backwards; opacity: 1; }
.want-title.in span:nth-child(2) { animation-delay: .3s; }
.want-title.in span:nth-child(3) { animation-delay: .6s; }
.want-row .want-go { transform: scale(.4); opacity: 0; transition: transform .7s cubic-bezier(.34,1.56,.64,1) .25s, opacity .4s ease .25s, background .3s, color .3s; }
.want-row.lit .want-go { transform: none; opacity: 1; }

/* Images open from a slight crop while the picture settles from a zoom */
.img-frame.reveal, .feature.reveal { opacity: 1; transform: none; clip-path: inset(9% 7% 9% 7% round var(--radius)); transition: clip-path 1.3s cubic-bezier(.2,.7,.2,1); }
.img-frame.reveal.in, .feature.reveal.in { clip-path: inset(0 round var(--radius)); }
.img-frame.reveal.settled, .feature.reveal.settled { clip-path: none; }
.img-frame.reveal img, .feature.reveal .feature-media img { transform: scale(1.14); transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.img-frame.reveal.in img, .feature.reveal.in .feature-media img { transform: none; }
.img-frame .img-badge { opacity: 0; transform: scale(.6); transform-origin: left bottom; transition: opacity .5s ease .9s, transform .8s cubic-bezier(.34,1.56,.64,1) .9s; }
.img-frame.in .img-badge { opacity: 1; transform: none; }

/* Grids and lists: items arrive one by one (--i is set per item by main.js) */
.stagger:not(.in) > * { opacity: 0; }
.stagger.in > * { animation: mUp .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 75ms) backwards; }
.legend.stagger.in > li::before, .steps.stagger.in > li::before { animation: mPop .7s cubic-bezier(.34,1.56,.64,1) calc(var(--i, 0) * 75ms + .2s) backwards; }

/* Calls to action: heading rises, buttons follow */
.cta.reveal .btn-row { opacity: 0; transform: translateY(14px); transition: opacity .7s ease .45s, transform .8s cubic-bezier(.2,.7,.2,1) .45s; }
.cta.reveal.in .btn-row { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .site-header .wrap, .page-hero-media img, .page-hero.pattern::before, .page-hero .eyebrow, .page-hero .eyebrow::before,
  .page-hero h1, .page-hero h1 em, .page-hero .lead, .page-hero .btn-row, .stagger.in > *, .want-title.in span,
  .legend.stagger.in > li::before, .steps.stagger.in > li::before { animation: none !important; }
  .reveal .h-lg, .reveal .h-md, .reveal .want-title, .img-frame.reveal img, .feature.reveal .feature-media img { filter: none; transform: none; transition: none; }
  .reveal .h-lg em, .reveal .h-md em, .want-title span, .want-row .want-go, .img-frame .img-badge, .cta.reveal .btn-row, .stagger:not(.in) > * { opacity: 1; transform: none; transition: none; }
  .img-frame.reveal, .feature.reveal { clip-path: none; transition: none; }
}

/* ===== Map: instant branded stand-in; the live Google map loads only when asked ===== */
.map { position: relative; }
.map-facade { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-pin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px #fff, 0 8px 18px rgba(1,43,82,.35); }
.map-pin span { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--blue); animation: mapPulse 2.2s ease-out infinite; }
@keyframes mapPulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.map-card {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow);
}
.map-card strong { display: block; font-family: var(--display); font-weight: 400; font-size: 21px; color: var(--blue-ink); }
.map-card > span { display: block; font-size: 14.5px; color: var(--muted); margin: 2px 0 14px; }
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.map-actions .btn { padding: 11px 20px; font-size: 14px; }
.map-actions .btn--ghost { color: var(--blue-ink); border-color: rgba(1,43,82,.25); }
.map-actions .btn--ghost:hover { background: rgba(1,92,168,.06); }
.map.is-live .map-facade { display: none; }
.map iframe { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.map iframe.ready { opacity: 1; }
.map.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 3px solid rgba(1,92,168,.18); border-top-color: var(--blue); animation: mapSpin .8s linear infinite;
}
@keyframes mapSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .map-pin span { animation: none; display: none; } }

/* Shadows fade in once the image has opened up, instead of popping when the clip is removed */
.img-frame.reveal, .feature.reveal {
  box-shadow: 0 24px 50px -24px rgba(1, 43, 82, 0);
  transition: clip-path 1.3s cubic-bezier(.2,.7,.2,1), box-shadow 1.1s ease;
}
.img-frame.reveal.settled, .feature.reveal.settled { box-shadow: var(--shadow); }

/* Preloaded map: the stand-in stays on top until the live map is ready, then cross-fades away */
.map-facade { z-index: 1; transition: opacity .6s ease, visibility .6s; }
.map.is-live .map-facade { display: grid; opacity: 0; visibility: hidden; }
.map iframe { z-index: 0; }
.map.is-loading::after { z-index: 2; }

/* Safari clips anything outside an element's box while a blur filter is animating, which cut off
   descenders (the tail of "g", "y", "p") until the blur ended. Give every blurred line room below
   (and a little above) the baseline, cancelled by negative margins so the layout doesn't move. */
.hx-title span, .want-title span, .page-hero h1, .page-hero h1 em,
.reveal .h-lg, .reveal .h-md {
  padding-top: .08em; padding-bottom: .22em;
  margin-top: -.08em; margin-bottom: -.22em;
}
/* keep the original spacing below headings that had their own bottom margin */
.page-hero h1 { margin-bottom: calc(22px - .22em); }
.form.reveal h2.h-md { margin-bottom: calc(8px - .22em); }

/* About › "Building more than homes": the photo runs the full height of the text beside it */
.split--stretch { align-items: stretch; }
.img-frame--tall { min-height: 460px; }
.img-frame--tall img { position: absolute; inset: 0; object-position: 47% 60%; }
@media (max-width: 900px) { .img-frame--tall { min-height: 0; aspect-ratio: 4 / 5; } }

/* Avenora wordmark, used in place of the typed word. Drawn as a mask so it takes the colour of the
   text around it; sized to the cap height and sitting on the baseline, so it reads as part of the line. */
.av {
  display: inline-block; position: relative;
  height: .7em; aspect-ratio: 1558 / 220; vertical-align: baseline;
  background: currentColor;
  -webkit-mask: url(../img/avenora-wordmark.png) center / contain no-repeat;
  mask: url(../img/avenora-wordmark.png) center / contain no-repeat;
}

/* The wordmark is a <span>, so it must not pick up styles that other components give to their spans
   (contact cards, form chips, captions…). */
span.av {
  display: inline-block !important; position: relative !important;
  font-size: inherit !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
  border-radius: 0 !important; letter-spacing: 0 !important; text-transform: none !important;
  box-shadow: none !important; max-width: none !important; color: inherit !important;
}
.chips input:checked + span .av { background: currentColor; }

/* Pattern heroes (Gallery, Contact): the blurred BR pattern image fills the hero */
.page-hero.pattern::before {
  opacity: 1; background: url(../img/hero-pattern.jpg) center / cover no-repeat;
  animation: mPatternImg 1.6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes mPatternImg { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page-hero.pattern::before { animation: none; opacity: 1; } }

/* Footer: facade photo under a deep brand-blue overlay. WebP with a JPEG fallback;
   a wide crop for desktop and a tall crop for phones, where the footer stacks. */
.site-footer {
  background-color: var(--blue-ink);
  background-image:
    linear-gradient(180deg, rgba(1, 43, 82, .9) 0%, rgba(1, 43, 82, .82) 45%, rgba(1, 43, 82, .94) 100%),
    url(../img/footer-facade.jpg);
  background-image:
    linear-gradient(180deg, rgba(1, 43, 82, .9) 0%, rgba(1, 43, 82, .82) 45%, rgba(1, 43, 82, .94) 100%),
    image-set(url(../img/footer-facade.webp) type("image/webp"), url(../img/footer-facade.jpg) type("image/jpeg"));
  background-size: cover; background-position: center;
}
@media (max-width: 700px) {
  .site-footer {
    background-image:
      linear-gradient(180deg, rgba(1, 43, 82, .9) 0%, rgba(1, 43, 82, .82) 45%, rgba(1, 43, 82, .94) 100%),
      url(../img/footer-facade-m.jpg);
    background-image:
      linear-gradient(180deg, rgba(1, 43, 82, .9) 0%, rgba(1, 43, 82, .82) 45%, rgba(1, 43, 82, .94) 100%),
      image-set(url(../img/footer-facade-m.webp) type("image/webp"), url(../img/footer-facade-m.jpg) type("image/jpeg"));
  }
}

/* Call-to-action bands: same blurred BR pattern image as the pattern heroes */
.cta.pattern::before { opacity: 1; background: url(../img/hero-pattern.jpg) center / cover no-repeat; }
.cta::after { display: none; }   /* no BR monogram watermark in the call-to-action bands */

/* Call-to-action bands: lattice-roof photo under a Blue Depth overlay (strongest behind the headline).
   WebP with JPEG fallback; a wide crop for desktop and a squarer one for phones. */
.cta.pattern::before {
  opacity: 1; background-size: cover; background-position: center;
  background-image:
    linear-gradient(90deg, rgba(1, 50, 96, .95) 0%, rgba(1, 63, 117, .9) 45%, rgba(1, 74, 138, .82) 100%),
    url(../img/cta-lattice.jpg?v=2);
  background-image:
    linear-gradient(90deg, rgba(1, 50, 96, .95) 0%, rgba(1, 63, 117, .9) 45%, rgba(1, 74, 138, .82) 100%),
    image-set(url(../img/cta-lattice.webp?v=2) type("image/webp"), url(../img/cta-lattice.jpg?v=2) type("image/jpeg"));
}
@media (max-width: 860px) {
  .cta.pattern::before {
    background-image:
      linear-gradient(180deg, rgba(1, 50, 96, .95) 0%, rgba(1, 63, 117, .9) 55%, rgba(1, 74, 138, .82) 100%),
      url(../img/cta-lattice-m.jpg?v=2);
    background-image:
      linear-gradient(180deg, rgba(1, 50, 96, .95) 0%, rgba(1, 63, 117, .9) 55%, rgba(1, 74, 138, .82) 100%),
      image-set(url(../img/cta-lattice-m.webp?v=2) type("image/webp"), url(../img/cta-lattice-m.jpg?v=2) type("image/jpeg"));
  }
}

/* Footer credit */
.footer-bottom .powered a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.footer-bottom .powered a:hover { color: #fff; text-decoration-color: #fff; }

/* Mobile: the round "Discover Avenora" button sits centred across the hero */
@media (max-width: 760px) {
  .hx-round { left: 50%; }
}

/* Logo as real images (CSS masks didn't render on some mobile browsers).
   White logo over dark/photo heroes; blue logo on the light Home hero and once the header turns solid. */
.logo-c { display: block; width: 150px; height: auto; }
.site-footer .logo-c { width: 180px; }
.site-header .logo-blue { display: none; }
.site-header.is-solid .logo-blue, .site-header.on-light .logo-blue { display: block; }
.site-header.is-solid .logo-white, .site-header.on-light .logo-white { display: none; }
body.menu-open .site-header .logo-blue { display: none; }
body.menu-open .site-header .logo-white { display: block; }

/* Header hides while scrolling down and slides back as soon as you scroll up */
.site-header { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, box-shadow .3s; }
.site-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: background .3s, color .3s; } }