/* ═══════════════════════════════════════════════════════════════
   THEME · International Property Investment colour system
   Loads AFTER tokens.css and v2.css and overrides colour only.

     --color-primary     #0B1F33  Midnight Navy
     --color-secondary   #1E4E8C  Royal Blue
     --color-accent      #C47A44  Warm Copper
     --color-background  #F7F6F2  Warm Off-White
     --color-surface     #FFFFFF  Pure White
     --color-text-primary   #20262D  Charcoal
     --color-text-secondary #66717D  Slate
     --color-financial   #24705A  Deep Green

   Balance target: 65–70% white / off-white, 20–25% navy, 5–10%
   royal blue, copper as a sparing accent, green reserved for
   financial figures.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ─── The system, by its own names ─── */
  --color-primary:        #0B1F33;
  --color-secondary:      #1E4E8C;
  --color-accent:         #C47A44;
  --color-background:     #F7F6F2;
  --color-surface:        #FFFFFF;
  --color-text-primary:   #20262D;
  --color-text-secondary: #66717D;
  --color-financial:      #24705A;

  /* light variants for use on navy */
  --secondary-l: #7FA9DC;
  --accent-l:    #D9A176;
  --financial-l: #5FB395;

  /* ─── Mapped onto the existing token names ─── */
  --sire-navy-dd: var(--color-primary);
  --sire-navy-d:  #0F2942;
  --sire-navy:    #16375A;
  --sire-navy-l:  var(--color-secondary);
  --dark-rgb:     11, 31, 51;

  /* the interactive accent is royal blue */
  --sire-pink:      var(--color-secondary);
  --sire-pink-d:    #163C6B;
  --sire-pink-l:    var(--secondary-l);
  --sire-pink-pale: rgba(30, 78, 140, 0.07);

  --white:      var(--color-surface);
  --off-white:  var(--color-background);
  --warm-light: #EFEDE7;
  --grey-warm:  #C7CBD1;
  --grey-mid:   var(--color-text-secondary);
  --charcoal:   var(--color-text-primary);
  --ink:        var(--color-primary);

  --gold:       var(--color-accent);
  --gold-light: var(--accent-l);
  --gold-pale:  #F6EDE4;

  --positive:      var(--color-financial);
  --positive-pale: #EAF2EF;

  --border-light: rgba(11,31,51,.08);
  --border-mid:   rgba(11,31,51,.14);
  --border-accent: rgba(196,122,68,.35);

  /* restrained shadows — hairlines do the work instead */
  --shadow-sm: 0 1px 2px rgba(11,31,51,.04);
  --shadow-md: 0 1px 3px rgba(11,31,51,.06), 0 10px 26px rgba(11,31,51,.06);
  --shadow-lg: 0 2px 6px rgba(11,31,51,.07), 0 18px 44px rgba(11,31,51,.09);
}

/* ═══ SURFACES ═══════════════════════════════════════════════════
   Off-white is the page. White is for cards, listings, forms and
   the alternating content bands.
   ═════════════════════════════════════════════════════════════ */
body{ background:var(--color-background); color:var(--color-text-primary); }
section{ border-bottom:none; }
.sec-cream{ background:var(--color-surface); }
.sec-warm{ background:#EFEDE7; }
.sec-navy{ background:var(--color-primary); }

/* cards and panels sit on pure white with a hairline, not a shadow */
.pcard, .form-card, .person, .gcard, .goal, .step, .pn, .spec > div,
.strip .s, .sec-cream .strip .s, .sec-cream .step, .modal-box, .pd-panel{
  background:var(--color-surface);
}
.pcard{ border:1px solid var(--border-light); box-shadow:none; }
.pcard:hover{ box-shadow:var(--shadow-md); border-color:rgba(11,31,51,.14); }
.potm{ box-shadow:none; border:1px solid var(--border-light); }
.form-card{ border:1px solid var(--border-light); }
.pd-panel{ border:1px solid var(--border-light); }

/* ═══ TYPOGRAPHY ════════════════════════════════════════════════ */
h1,h2,h3,h4{ color:var(--color-primary); }
.sec-navy h1,.sec-navy h2,.sec-navy h3,.sec-navy h4{ color:var(--color-surface); }
p{ color:var(--color-text-primary); }
.lead, .footnote, .pcard-loc, .potm-loc, .fig-l, .pn-l, .s-l, .sb-lbl{
  color:var(--color-text-secondary);
}

/* copper is reserved for fine detail: eyebrows, rules, numerals, icons */
.eyebrow{ color:var(--color-accent); }
.sec-navy .eyebrow{ color:var(--accent-l); }
.rule{ background:var(--color-accent); }
.acc-n, .gcard-num, .step-n, .pillar-num{ color:var(--color-accent); }
.goal-ic, .svc-ic{ color:var(--color-accent); }
.sec-navy .svc-ic{ color:var(--accent-l); }
.checks li::before{ border-color:var(--color-accent); }

/* emphasis inside headings — copper, as a premium detail */
em{ color:var(--color-accent); }
.sec-navy em, .hero em, .phero em{ color:var(--accent-l); }

/* ═══ HEADER — navy, per the system ═════════════════════════════ */
.hdr{
  background:var(--color-primary);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.hdr-top{ background:#071726; color:rgba(255,255,255,.62); }
.hdr-top a{ color:rgba(255,255,255,.62); }
.hdr-top a:hover{ color:var(--accent-l); }

.brand-name{ color:var(--color-surface); }
.brand-dot{ color:var(--color-accent); }
.brand-sub{ color:rgba(255,255,255,.52); }

.nav a{ color:rgba(255,255,255,.80); }
.nav a:hover, .nav a.on{ color:var(--color-surface); border-bottom-color:var(--color-accent); }
.burger{ color:var(--color-surface); }
@media(max-width:1040px){
  .nav{ background:var(--color-primary); border-bottom:1px solid rgba(255,255,255,.12); }
  .nav a{ border-bottom:1px solid rgba(255,255,255,.07); }
}

/* ═══ INTERACTIVE — royal blue ══════════════════════════════════ */
.btn{ background:var(--color-secondary); color:var(--color-surface); }
.btn:hover{ background:#163C6B; }
.btn.ghost{ background:transparent; color:var(--color-primary); border:1px solid var(--border-mid); }
.btn.ghost:hover{ background:var(--color-primary); color:var(--color-surface); border-color:var(--color-primary); }
.sec-navy .btn.ghost, .hero .btn.ghost, .phero .btn.ghost{
  color:var(--color-surface); border-color:rgba(255,255,255,.35);
}
.sec-navy .btn.ghost:hover, .hero .btn.ghost:hover, .phero .btn.ghost:hover{
  background:var(--color-surface); color:var(--color-primary); border-color:var(--color-surface);
}
.pcard-cta, .gcard-link{ color:var(--color-secondary); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--color-secondary); }
.chip.on{ background:var(--color-secondary); border-color:var(--color-secondary); color:var(--color-surface); }
.chip:hover{ border-color:var(--color-secondary); }
.gcard:hover{ border-color:var(--color-secondary); }
.acc-item.open .acc-plus{ color:var(--color-secondary); }
.dtable th{ background:var(--color-primary); }
.avatar{ background:var(--color-primary); }

/* ═══ HERO — navy scrim, no decorative gradient ═════════════════ */
.hero{ background:var(--color-primary); }
.hero-bg img{ opacity:.30; }
.hero-bg::after{
  background:linear-gradient(100deg, rgba(11,31,51,.95) 0%, rgba(11,31,51,.90) 55%, rgba(11,31,51,.62) 100%);
}
.phero{ background:var(--color-primary); }
.phero-bg img{ opacity:.34; }
.phero-bg::after{ background:rgba(11,31,51,.86); }
.hero-pill{
  border-color:rgba(196,122,68,.45);
  background:rgba(196,122,68,.10);
  color:var(--accent-l);
}
.dot{ background:var(--color-accent); }
.statband{ background:rgba(0,0,0,.22); border-top-color:rgba(255,255,255,.14); }
.sb{ border-right-color:rgba(255,255,255,.12); }
.sb-val sup{ color:var(--accent-l); }
.sb-lbl{ color:rgba(255,255,255,.60); }

/* ═══ FINANCIAL FIGURES — deep green, and made prominent ════════
   Purchase price reads navy and large; target yield and income
   read green so the three numbers separate at a glance.
   ═════════════════════════════════════════════════════════════ */
.fig-v{ color:var(--color-primary); font-size:25px; }
.pcard-figs > div:nth-child(2) .fig-v,
.pcard-figs > div:nth-child(3) .fig-v{ color:var(--color-financial); }
.fig-v.pink{ color:var(--color-financial); }

.pn-v{ color:var(--color-primary); }
.potm-nums .pn:nth-child(2) .pn-v,
.potm-nums .pn:nth-child(3) .pn-v{ color:var(--color-financial); }
.pd-panel .potm-nums .pn-v{ color:var(--color-financial); }
.pn{ background:var(--color-surface); border-top:2px solid transparent; }
.potm-nums .pn:nth-child(2), .potm-nums .pn:nth-child(3){ border-top-color:rgba(36,112,90,.35); }

.strip .s-v{ color:var(--color-primary); }
.strip .s-v sup{ color:var(--color-accent); }

/* headline yield in the hero band */
.statband-in .sb:nth-child(2) .sb-val{ color:var(--financial-l); }
.statband-in .sb:nth-child(2) .sb-val sup{ color:var(--financial-l); }

/* ledger value emphasis */
.lval{ color:var(--color-primary); }
.lval em{ color:var(--color-financial); font-style:normal; }

/* ═══ STATUS / RIBBONS ══════════════════════════════════════════ */
.status{ background:var(--color-financial); }
.status.under-offer{ background:var(--color-accent); }
.status.reserved{ background:var(--color-text-secondary); }
.potm-ribbon{ background:var(--color-primary); color:var(--color-surface); }

/* ═══ DARK BANDS ════════════════════════════════════════════════ */
.marq{ background:var(--color-primary); }
.marq-item{ color:rgba(255,255,255,.62); }
.marq-item strong{ color:var(--accent-l); }
.disclaim{ background:#071726; color:rgba(255,255,255,.52); }
.disclaim strong{ color:rgba(255,255,255,.82); }
.ftr{ background:var(--color-primary); color:rgba(255,255,255,.66); }
.ftr h4{ color:var(--accent-l); }
.svc{ background:var(--color-primary); }
.svcs{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.12); }

/* ═══ SPACING — a little more air, per the design direction ═════ */
@media(min-width:900px){
  :root{ --sec-v: 100px; }
  .sec-head{ margin-bottom:58px; }
}

/* ═══ CONTACT & FORM ADDITIONS ══════════════════════════════════
   Added with the live Hong Kong contact details and the working
   enquiry form. Uses the existing palette only — no new colours.
   ────────────────────────────────────────────────────────────── */

/* header strip: phone · email */
.hdr-top .tz{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.hdr-top .tz-sep{ opacity:.4; }
@media(max-width:520px){
  .hdr-top .tz{ gap:8px; font-size:11px; }
  /* keep the phone on small screens, drop the email and its separator */
  .hdr-top .tz a:last-child, .hdr-top .tz-sep{ display:none; }
}

/* footer contact list */
.ftr-contact{ list-style:none; margin:20px 0 0; padding:0; }
.ftr-contact li{ font-size:13.5px; line-height:1.9; }
.ftr-contact a{ color:rgba(255,255,255,.86); }
.ftr-contact a:hover{ color:var(--accent-l); }
.ftr-c-l{ color:rgba(255,255,255,.42); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; margin-left:8px; }
.ftr-bot span:last-child{ text-align:right; max-width:52ch; line-height:1.7; }
@media(max-width:700px){
  .ftr-bot span:last-child{ text-align:left; }
  .ftr-addr-sep{ display:none; }
}
@media(min-width:701px){ .ftr-br{ display:none; } }

/* honeypot — hidden from people, visible to bots */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* form failure fallback + gentle invalid state */
.form-err{ display:none; background:rgba(196,122,68,.10); border-left:3px solid var(--color-accent);
           padding:16px 18px; font-size:14px; color:var(--color-text-primary); margin-top:16px; line-height:1.65; }
.form-err.show{ display:block; }
.form-err a{ color:var(--color-secondary); }
.form-note a{ color:var(--color-secondary); }
.field input.invalid, .field select.invalid, .field textarea.invalid{ border-color:var(--color-accent); }
.enq button[type=submit][disabled]{ opacity:.6; cursor:default; }

/* WhatsApp / call row on the contact page */
.reach{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

/* ═══ ACCESSIBILITY ═════════════════════════════════════════════ */
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--color-primary);
       color:#fff; padding:12px 18px; font-size:14px; }
.skip:focus{ left:0; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--color-secondary); outline-offset:2px;
}

/* footer intro paragraph was inheriting the body text colour on a navy
   ground and reading as almost black — put it back on the footer scale */
.ftr-brand p{ color:rgba(255,255,255,.66); }
.ftr-bot{ color:rgba(255,255,255,.52); }

/* ═══ IMAGE PROPORTIONS ═════════════════════════════════════════
   Portrait photography was rendering at the full column width in
   the two-column blocks — a 552px-wide image 736px tall. Every
   feature image now sits in a fixed landscape frame and crops,
   so no single photo dominates the page.
   ────────────────────────────────────────────────────────────── */
.duo-media{ position:relative; }
.duo-media img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:center 42%; }
@media(max-width:900px){ .duo-media img{ aspect-ratio:16/10; } }

/* floor-plan style images, if ever added, must never be cropped */
.plan img{ object-fit:contain; background:var(--color-surface); }

/* the "prefer to talk" line is a call to action, not small print */
.form-reach{ font-size:13.5px; line-height:1.65; color:var(--color-text-secondary); margin:14px 0 0; }
.form-reach a{ color:var(--color-secondary); border-bottom:1px solid rgba(30,78,140,.30); }
.form-reach a:hover{ border-bottom-color:var(--color-secondary); }
.form-note{ margin-top:10px; }

/* property reference was breaking across two lines on small phones */
@media(max-width:430px){ .potm-loc{ letter-spacing:.07em; font-size:10.5px; } }