/* ============================================================
   BricksAndKeys - shared design system
   Palette: Deep Navy #0D1B2A · Ivory #F7F5EF · Gold #C9A24A
   Type: Fraunces (display) · Hanken Grotesk (body)
   ============================================================ */

:root {
  /* Colour */
  --navy:        #0D1B2A;
  --navy-700:    #122A40;
  --navy-600:    #18344E;
  --ivory:       #F7F5EF;
  --ivory-200:   #ECE8DC;
  --gold:        #C9A24A;
  --gold-lite:   #E7CB85;
  --gold-deep:   #A8792B;
  --ink:         #1B2430;
  --slate:       #5E6A78;
  --slate-300:   #94A0AC;
  --line:        rgba(201,162,74,.34);   /* gold hairline */
  --line-dark:   rgba(13,27,42,.12);     /* on ivory */

  /* Type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Scale / rhythm */
  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --sec: clamp(64px, 9vw, 132px);
  --r: 14px;
  --r-sm: 9px;

  --shadow: 0 24px 60px -28px rgba(13,27,42,.45);
  --shadow-gold: 0 24px 60px -30px rgba(168,121,43,.5);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
body {
  font-family: var(--sans);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 430; line-height: 1.06; letter-spacing: -.01em; }
.display {
  font-size: clamp(2.7rem, 7vw, 5.4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.015em;
}
.h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.16; }
.lead { font-size: clamp(1.06rem, 1.5vw, 1.22rem); color: var(--slate); }
em, .it { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--gold); display: inline-block;
}
.eyebrow.center::after {
  content: ""; width: 26px; height: 1px; background: var(--gold); display: inline-block;
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::before { content: ""; }

.on-dark { color: var(--ivory); }
.on-dark .lead { color: var(--slate-300); }
.on-dark .eyebrow { color: var(--gold-lite); }
.gold-word { color: var(--gold); font-style: italic; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(48px,6vw,84px); }
.navy { background: var(--navy); color: var(--ivory); }
.navy-grad { background: radial-gradient(120% 100% at 80% -10%, #143049 0%, var(--navy) 55%); color: var(--ivory); }
.ivory-2 { background: var(--ivory-200); }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }
.measure { max-width: 62ch; }
.grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- gold hairline frame (signature) ---------- */
.frame { position: relative; }
.frame::before, .frame::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
}
.frame::before { top: 0; left: 0; border-top: 1.5px solid var(--gold); border-left: 1.5px solid var(--gold); }
.frame::after  { bottom: 0; right: 0; border-bottom: 1.5px solid var(--gold); border-right: 1.5px solid var(--gold); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .92em 1.7em; border-radius: 999px;
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: linear-gradient(120deg, var(--gold-lite), var(--gold)); color: var(--navy); box-shadow: var(--shadow-gold); }
.btn-gold:hover { box-shadow: 0 30px 64px -26px rgba(168,121,43,.7); }
.btn-navy { background: var(--navy); color: var(--ivory); }
.btn-navy:hover { background: var(--navy-600); }
.btn-ghost { border: 1px solid var(--line); color: inherit; }
.btn-ghost:hover { border-color: var(--gold); background: rgba(201,162,74,.08); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-block { width: 100%; }

.link-gold {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--gold-deep); font-weight: 600; font-size: .95rem;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.on-dark .link-gold { color: var(--gold-lite); }
.link-gold:hover { border-color: currentColor; gap: .75em; }

/* ---------- badges / pills ---------- */
.badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: .5em 1em; border-radius: 999px;
  border: 1px solid var(--line); color: var(--gold-lite);
}
.badge.solid { background: rgba(201,162,74,.14); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(13,27,42,.0);
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(13,27,42,.92); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.nav__row { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand__mark { width: 38px; height: 38px; }
.brand__name { font-family: var(--serif); font-size: 1.3rem; letter-spacing: .005em; color: var(--ivory); }
.brand__name b { font-weight: 500; }
.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__links a { color: var(--ivory); font-size: .94rem; font-weight: 500; opacity: .85; transition: opacity .2s, color .2s; }
.nav__links a:hover { opacity: 1; color: var(--gold-lite); }
.nav__cta { display: flex; align-items: center; gap: 1rem; }
.nav__toggle { display: none; width: 30px; height: 22px; position: relative; }
.nav__toggle span { position: absolute; left: 0; height: 2px; width: 100%; background: var(--ivory); transition: .3s var(--ease); }
.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 10px; }
.nav__toggle span:nth-child(3) { top: 20px; }
.nav.open .nav__toggle span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(80% 60% at 78% 8%, rgba(201,162,74,.16) 0%, transparent 55%),
    radial-gradient(70% 80% at 12% 100%, rgba(24,52,78,.6) 0%, transparent 60%),
    var(--navy);
}
.hero__grid {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(201,162,74,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,74,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(70px, 12vh, 150px) clamp(60px, 9vh, 110px); }

/* ---------- stat strip ---------- */
.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stat { background: var(--navy); padding: clamp(20px,2.6vw,30px); text-align: center; }
.ivory-2 .stat, .on-light .stat { background: var(--ivory); }
.stat__num { font-family: var(--serif); font-size: clamp(1.7rem, 3.2vw, 2.7rem); color: var(--gold); line-height: 1; }
.on-light .stat__num { color: var(--gold-deep); }
.stat__label { display: block; margin-top: .55rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-300); }
.on-light .stat__label { color: var(--slate); }

/* ---------- cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line-dark); border-radius: var(--r);
  padding: clamp(24px, 2.6vw, 34px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line); }
.card--navy { background: var(--navy-700); border-color: rgba(201,162,74,.18); color: var(--ivory); }
.card__num { font-family: var(--serif); font-size: 1.1rem; color: var(--gold-deep); letter-spacing: .04em; }
.card .h3 { margin-top: .3rem; }

/* value cards (homepage) */
.value { padding: clamp(22px,2.4vw,30px); border-top: 1.5px solid var(--line); }
.value__k { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-lite); }
.on-light .value__k { color: var(--gold-deep); }

/* ---------- amenities grid ---------- */
.amen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--r); overflow: hidden; }
.amen.on-navy { background: var(--line); border-color: var(--line); }
.amen__item { background: var(--ivory); padding: 22px 18px; display: flex; align-items: center; gap: .7rem; font-size: .92rem; font-weight: 500; transition: background .25s; }
.amen.on-navy .amen__item { background: var(--navy); color: var(--ivory); }
.amen__item:hover { background: #fff; }
.amen.on-navy .amen__item:hover { background: var(--navy-700); }
.amen__ico { color: var(--gold-deep); flex: 0 0 auto; }
.amen.on-navy .amen__ico { color: var(--gold); }

/* ---------- media / render slots ---------- */
.shot {
  position: relative; border-radius: var(--r); overflow: hidden;
  background:
    radial-gradient(120% 120% at 70% 0%, rgba(201,162,74,.14), transparent 60%),
    linear-gradient(160deg, var(--navy-700), var(--navy));
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}
.shot--wide { aspect-ratio: 16 / 7; }
.shot--tall { aspect-ratio: 3 / 4; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot__ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  text-align: center; padding: 24px; color: var(--slate-300);
}
.shot__ph svg { width: 30px; height: 30px; color: var(--gold); opacity: .8; }
.shot__cap { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.shot__tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  background: rgba(13,27,42,.72); color: var(--gold-lite); padding: .5em .9em; border-radius: 999px; border: 1px solid var(--line);
  backdrop-filter: blur(4px);
}

/* ---------- spec / list rows ---------- */
.rows { border-top: 1px solid var(--line-dark); }
.row { display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; padding: 16px 2px; border-bottom: 1px solid var(--line-dark); }
.on-dark .rows, .on-dark .row { border-color: var(--line); }
.row__k { font-weight: 500; }
.row__v { color: var(--gold-deep); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.on-dark .row__v { color: var(--gold-lite); }

.speclist { display: grid; gap: 1.3rem; }
.spec__k { font-family: var(--serif); font-size: 1.06rem; color: var(--gold-deep); }
.spec__v { color: var(--slate); font-size: .94rem; margin-top: .15rem; }

/* ---------- form ---------- */
.enquiry { background: var(--navy-700); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(26px, 3vw, 44px); box-shadow: var(--shadow); }
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-300); margin-bottom: .5rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ivory);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-sm); padding: .85em 1em; transition: border-color .25s, background .25s;
}
.field textarea { resize: vertical; min-height: 92px; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-300); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(201,162,74,.06); }
.field select option { color: #111; }
.form-note { font-size: .82rem; color: var(--slate-300); margin-top: .4rem; }
.form-ok { display: none; text-align: center; padding: 1rem; color: var(--gold-lite); border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 1rem; }
.form-ok.show { display: block; }

/* ---------- sticky CTA bar (landing page) ---------- */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(13,27,42,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .4s var(--ease);
  padding: .7rem var(--gut);
}
.cta-bar.show { transform: translateY(0); }
.cta-bar__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--wrap); margin-inline: auto; }
.cta-bar__txt { color: var(--ivory); }
.cta-bar__txt strong { font-family: var(--serif); font-weight: 500; color: var(--gold-lite); }
.cta-bar__txt span { display: block; font-size: .8rem; color: var(--slate-300); }
.cta-bar__btns { display: flex; gap: .6rem; }

/* ---------- footer ---------- */
.footer { background: var(--navy); color: var(--ivory); padding-block: clamp(56px,7vw,90px) 2rem; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px,4vw,56px); }
.footer h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lite); margin-bottom: 1.1rem; }
.footer a { color: var(--slate-300); font-size: .95rem; display: inline-block; padding: .25rem 0; transition: color .2s; }
.footer a:hover { color: var(--gold-lite); }
.footer__brand .brand__name { font-size: 1.5rem; }
.footer__note { color: var(--slate-300); font-size: .92rem; margin-top: 1rem; max-width: 38ch; }
.footer__bottom { margin-top: clamp(40px,5vw,64px); padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--slate-300); }

/* ---------- video ---------- */
.video { position: relative; aspect-ratio: 16/9; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- divider / misc ---------- */
.rule { height: 1px; background: var(--line-dark); border: 0; }
.on-dark .rule { background: var(--line); }
.kicker-num { font-family: var(--serif); font-size: 3.4rem; color: rgba(201,162,74,.22); line-height: 1; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.brand__name.shine {
  background: linear-gradient(90deg, var(--ivory) 35%, var(--gold-lite) 50%, var(--ivory) 65%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .nav__links { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(13,27,42,.98); backdrop-filter: blur(14px); padding: 1rem var(--gut) 1.6rem;
    border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: transform .35s var(--ease); }
  .nav.open .nav__links { transform: translateY(0); }
  .nav__links a { width: 100%; padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.06); opacity: 1; }
  .nav__toggle { display: block; }
  .nav .btn-ghost { display: none; }
  .cols-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr) !important; }
  .footer__top { grid-template-columns: 1fr; }
  .cta-bar__txt span { display: none; }
  .cta-bar .btn span.hide-sm { display: none; }
}
@media (max-width: 460px) {
  .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- real-photo hero ---------- */
.hero__photo{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.hero__photo::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,18,30,.92) 0%, rgba(8,18,30,.78) 40%, rgba(8,18,30,.4) 72%, rgba(8,18,30,.22) 100%),
    linear-gradient(0deg, rgba(8,18,30,.8) 0%, transparent 38%);
}
@media(max-width:760px){
  .hero__photo::after{ background:linear-gradient(90deg, rgba(8,18,30,.93), rgba(8,18,30,.8)), linear-gradient(0deg, rgba(8,18,30,.92) 0%, transparent 55%); }
}

/* ---------- floor-plan blocks ---------- */
.plan-head{ font-family:var(--serif); font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--ivory); margin:0 0 1rem; display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.plan-head span{ font-family:var(--sans); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.shot--plan{ display:block; background:#fff; cursor:zoom-in; aspect-ratio:13 / 18; }
.shot--plan img{ object-fit:contain; background:#fff; }
.shot--plan .shot__tag{ background:rgba(13,27,42,.9); }
.plan-note{ margin-top:1.4rem; color:var(--slate-300); font-size:.92rem; }
.plan-note a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(201,162,74,.4); }
.plan-note a:hover{ border-color:var(--gold); }

/* ---------- WhatsApp float ---------- */
.wa-float{ position:fixed; right:18px; bottom:84px; z-index:70; width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:0 10px 26px rgba(0,0,0,.28); transition:transform .18s ease, box-shadow .18s ease; }
.wa-float:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 14px 32px rgba(0,0,0,.34); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }
.wa-float__pulse{ position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.45; animation:waPulse 2.4s ease-out infinite; z-index:-1; }
@keyframes waPulse{ 0%{transform:scale(1);opacity:.45} 70%{transform:scale(1.7);opacity:0} 100%{opacity:0} }
@media(max-width:760px){ .wa-float{ right:14px; bottom:78px; width:52px; height:52px; } }
@media(prefers-reduced-motion:reduce){ .wa-float__pulse{ animation:none; } }

/* ---------- exact logo lockup ---------- */
.brand__logo{ height:34px; width:auto; display:block; }
.footer__brand .brand__logo{ height:44px; }
@media(max-width:600px){ .brand__logo{ height:30px; } }