/* ════════════════════════════════════════════════════════════
   RE/MAX ACE — adapted from the supplied luxury template.
   The original token NAMES are kept (so all base rules carry over)
   but the VALUES are remapped to the RE/MAX palette:
     --mustard*  → RE/MAX red
     --ivory*    → light app backgrounds
     --choco*    → deep navy (dark sections / headings)
   Extra --blue* tokens add the RE/MAX blue accent.
════════════════════════════════════════════════════════════ */
:root {
  --mustard:       #DC1C2E;   /* RE/MAX red (primary)   */
  --mustard-deep:  #B3121F;
  --mustard-light: #F0333F;
  --mustard-pale:  #FBE0E2;
  --ivory:         #F4F6FB;   /* light background       */
  --ivory-warm:    #EEF1F8;
  --ivory-mid:     #E0E5F0;
  --choco:         #0E1B33;   /* deep navy              */
  --choco-mid:     #16264A;
  --choco-soft:    #5C6880;
  --text-body:     #2C3852;
  --text-mid:      #5A6680;
  --text-light:    #959DB2;
  --white:         #FFFFFF;

  --blue:          #003DA5;   /* RE/MAX blue (secondary)*/
  --blue-deep:     #002E7A;
  --blue-light:    #1E5BC6;

  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body:    'DM Sans', sans-serif;

  --radius-sm:  8px;
  --radius:     16px;
  --radius-lg:  24px;
  --ease:       cubic-bezier(.4,0,.2,1);
  --dur:        .38s;

  --shadow-sm:  0 2px 16px rgba(14,27,51,.08);
  --shadow-md:  0 8px 40px rgba(14,27,51,.13);
  --shadow-lg:  0 20px 80px rgba(14,27,51,.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  background: var(--ivory);
  color: var(--text-body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }

/* ── UTILITIES ── */
.u-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mustard);
  display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem;
}
.u-label::before { content:''; width:28px; height:2px; background:var(--mustard); display:block; flex-shrink:0; }

.u-h2 {
  font-family: var(--ff-display); font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700; color: var(--choco); line-height: 1.15;
}
.u-h2 em { font-style: italic; color: var(--mustard); }

.u-rule { width:48px; height:3px; background:var(--mustard); border-radius:4px; margin:1.1rem 0 1.7rem; }
.u-rule.center { margin-left:auto; margin-right:auto; }

.u-body { font-size: .93rem; line-height: 1.85; color: var(--text-mid); }

section { padding: 96px 0; }

/* ── BUTTONS ── */
.btn-gold {
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--mustard); color:var(--white); border:none;
  padding:.78rem 2rem; border-radius:50px; font-family:var(--ff-body);
  font-weight:600; font-size:.82rem; letter-spacing:.07em; text-transform:uppercase;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor:pointer;
}
.btn-gold::after { content:'→'; }
.btn-gold:hover { background:var(--mustard-deep); transform:translateY(-3px); box-shadow:0 10px 36px rgba(220,28,46,.32); color:var(--white); }

.btn-outline-gold {
  display:inline-flex; align-items:center; gap:.55rem;
  background:transparent; color:var(--mustard); border:2px solid var(--mustard);
  padding:.72rem 1.8rem; border-radius:50px; font-family:var(--ff-body);
  font-weight:600; font-size:.82rem; letter-spacing:.07em; text-transform:uppercase;
  transition: all var(--dur) var(--ease); cursor:pointer;
}
.btn-outline-gold:hover { background:var(--mustard); color:var(--white); transform:translateY(-3px); box-shadow:0 10px 36px rgba(220,28,46,.26); }

/* ══════════ HEADER ══════════ */
#siteHeader {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0,61,165,.12);
  transition: box-shadow var(--dur) var(--ease);
}
#siteHeader.scrolled { box-shadow: 0 4px 40px rgba(14,27,51,.10); }

.header-inner { display:flex; align-items:center; height:74px; gap:2rem; }

/* Logo */
.site-logo { display:flex; align-items:center; gap:.7rem; flex-shrink:0; text-decoration:none; }
.logo-img { height: 44px; width:auto; display:block; }
/* CSS wordmark fallback (shown if no logo image is dropped in) */
.logo-emblem {
  position:relative; width:42px; height:42px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:var(--blue);
}
.logo-emblem::before { content:''; position:absolute; top:0; left:0; width:100%; height:50%; background:var(--mustard); }
.logo-emblem span { position:relative; z-index:1; font-family:var(--ff-display); font-size:1.2rem; font-weight:900; color:var(--white); }
.logo-wordmark { display:flex; flex-direction:column; line-height:1.05; }
.logo-name { font-family:var(--ff-display); font-size:1.18rem; font-weight:800; color:var(--choco); letter-spacing:.01em; }
.logo-name b { color:var(--mustard); }
.logo-sub { font-size:.56rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }

/* Desktop nav */
.main-nav { display:flex; align-items:center; gap:1.8rem; list-style:none; margin:0 auto; }
.main-nav a {
  font-size:.8rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-mid); position:relative; transition:color var(--dur) var(--ease); padding:.2rem 0;
}
.main-nav a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--mustard); transition:width var(--dur) var(--ease); border-radius:2px; }
.main-nav a:hover, .main-nav a.active { color:var(--mustard-deep); }
.main-nav a:hover::after, .main-nav a.active::after { width:100%; }

/* Header contact */
.header-contact { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; }
.header-contact a { font-size:.75rem; color:var(--text-mid); transition:color var(--dur); }
.header-contact a:first-child { font-weight:700; font-size:.82rem; color:var(--choco); }
.header-contact a:hover { color:var(--mustard); }

/* Hamburger */
.ham-btn { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; margin-left:auto; }
.ham-btn span { display:block; width:26px; height:2px; background:var(--choco); border-radius:2px; transition:var(--dur) var(--ease); }
.ham-btn.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ham-btn.active span:nth-child(2){ opacity:0; }
.ham-btn.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile panel */
.mobile-panel { display:none; position:fixed; inset:0; z-index:1100; pointer-events:none; }
.mobile-panel.open { pointer-events:all; }
.mobile-backdrop { position:absolute; inset:0; background:rgba(14,27,51,.5); backdrop-filter:blur(4px); opacity:0; transition:opacity .35s var(--ease); }
.mobile-panel.open .mobile-backdrop { opacity:1; }
.mobile-drawer {
  position:absolute; top:0; right:0; width:min(340px,100vw); height:100%;
  background:var(--ivory); padding:5rem 2.5rem 2.5rem; transform:translateX(100%);
  transition:transform .38s var(--ease); overflow-y:auto;
}
.mobile-panel.open .mobile-drawer { transform:translateX(0); }
.drawer-close { position:absolute; top:1rem; right:1.2rem; background:none; border:none; font-size:1.8rem; color:var(--choco); cursor:pointer; line-height:1; }
.drawer-nav { list-style:none; display:flex; flex-direction:column; gap:0; }
.drawer-nav li a {
  display:block; padding:1rem 0; border-bottom:1px solid var(--ivory-mid);
  font-size:1.1rem; font-family:var(--ff-display); font-weight:600; color:var(--choco);
  transition:color var(--dur), padding-left var(--dur);
}
.drawer-nav li a:hover { color:var(--mustard); padding-left:.6rem; }
.drawer-contacts { margin-top:2.5rem; display:flex; flex-direction:column; gap:.5rem; }
.drawer-contacts a { font-size:.88rem; color:var(--text-mid); transition:color var(--dur); }
.drawer-contacts a:hover { color:var(--mustard); }

@media (max-width: 991px) {
  .main-nav, .header-contact { display:none !important; }
  .ham-btn { display:flex; }
  .mobile-panel { display:block; }
}

/* ══════════ HERO ══════════ */
#hero { position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.hero-media { position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-media-fallback {
  position:absolute; inset:0;
  background:
    url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1920&q=80') center/cover no-repeat,
    linear-gradient(135deg, #0E1B33 0%, #16264A 45%, #1E3A6E 100%);
}
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right, rgba(14,27,51,.86) 0%, rgba(14,27,51,.55) 55%, rgba(14,27,51,.18) 100%),
    linear-gradient(to top, rgba(14,27,51,.65) 0%, transparent 55%);
}
.hero-accent-stripe { position:absolute; top:0; right:15%; width:4px; height:45%; background:linear-gradient(to bottom, var(--mustard), transparent); z-index:2; opacity:.6; }
.hero-content-wrap { position:relative; z-index:3; padding-top:4rem; }

.hero-tag {
  display:inline-flex; align-items:center; gap:.55rem;
  background:rgba(220,28,46,.20); border:1px solid rgba(220,28,46,.4);
  border-radius:50px; padding:.3rem .9rem; font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:#FFD7DB;
  backdrop-filter:blur(6px); margin-bottom:1.8rem; animation:heroIn .9s both;
}
.hero-tag::before { content:''; width:6px; height:6px; background:var(--mustard-light); border-radius:50%; display:block; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.7);} }

.hero-heading {
  font-family:var(--ff-display); font-size:clamp(3rem, 6.5vw, 5.6rem);
  font-weight:900; color:var(--white); line-height:1.04; margin-bottom:1.5rem;
  animation:heroIn .9s .12s both;
}
.hero-heading .line-accent { display:block; font-style:italic; color:var(--mustard-light); }
.hero-lead {
  font-size:clamp(.9rem, 1.5vw, 1.05rem); font-weight:300; color:rgba(255,255,255,.82);
  line-height:1.8; max-width:480px; margin-bottom:3rem; animation:heroIn .9s .24s both;
}
.hero-ctas { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:4rem; animation:heroIn .9s .34s both; }

.btn-hero-white {
  display:inline-flex; align-items:center; gap:.5rem; background:var(--white); color:var(--choco);
  border:none; padding:.82rem 2rem; border-radius:50px; font-family:var(--ff-body);
  font-weight:700; font-size:.82rem; letter-spacing:.07em; text-transform:uppercase;
  cursor:pointer; transition:all var(--dur) var(--ease);
}
.btn-hero-white:hover { background:var(--mustard); color:var(--white); transform:translateY(-3px); box-shadow:0 10px 36px rgba(220,28,46,.35); }
.btn-hero-ghost {
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.1); color:var(--white);
  border:1.5px solid rgba(255,255,255,.4); padding:.82rem 2rem; border-radius:50px;
  font-family:var(--ff-body); font-weight:600; font-size:.82rem; letter-spacing:.07em; text-transform:uppercase;
  cursor:pointer; transition:all var(--dur) var(--ease); backdrop-filter:blur(6px);
}
.btn-hero-ghost:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.7); transform:translateY(-3px); color:var(--white); }

/* ── SEARCH BAR ── */
.hero-search-bar {
  background:var(--white); border-radius:var(--radius); padding:6px;
  display:flex; align-items:stretch; flex-wrap:wrap; gap:4px;
  box-shadow:var(--shadow-lg); max-width:760px; animation:heroIn .9s .46s both;
}
.sb-field { flex:1 1 0; min-width:130px; padding:.7rem 1.1rem; border-radius:calc(var(--radius) - 4px); cursor:pointer; transition:background var(--dur); border:1.5px solid transparent; }
.sb-field:hover { background:var(--ivory-warm); border-color:rgba(0,61,165,.18); }
.sb-field label { display:block; font-size:.59rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mustard); margin-bottom:3px; cursor:pointer; }
.sb-field select, .sb-field input {
  width:100%; border:none; background:transparent; font-family:var(--ff-body);
  font-size:.86rem; font-weight:500; color:var(--choco); outline:none;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}
.sb-field input { cursor:text; }
.sb-field select option { background:var(--white); }
.sb-btn {
  background:var(--blue); color:var(--white); border:none; border-radius:calc(var(--radius) - 4px);
  padding:.85rem 1.8rem; font-family:var(--ff-body); font-weight:700; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); white-space:nowrap; flex:0 0 auto;
}
.sb-btn:hover { background:var(--mustard); transform:translateY(-2px); }

/* ── Hero KPIs ── */
.hero-kpis { position:absolute; bottom:2.5rem; right:0; z-index:3; display:flex; gap:1px; animation:heroIn .9s .55s both; }
.kpi-block { background:rgba(14,27,51,.55); backdrop-filter:blur(12px); border:1px solid rgba(0,61,165,.25); padding:1.1rem 1.5rem; text-align:center; }
.kpi-block:first-child { border-radius:var(--radius) 0 0 var(--radius); }
.kpi-block:last-child { border-radius:0 var(--radius) var(--radius) 0; }
.kpi-num { display:block; font-family:var(--ff-display); font-size:1.9rem; font-weight:800; color:var(--white); line-height:1; }
.kpi-lbl { display:block; font-size:.64rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-top:3px; }

@keyframes heroIn { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

@media (max-width: 575px) {
  .hero-heading { font-size:2.6rem; }
  .hero-kpis { display:none; }
  .hero-search-bar { flex-direction:column; gap:6px; }
  .sb-btn { width:100%; padding:1rem; }
  section { padding:64px 0; }
}

/* ══════════ TICKER ══════════ */
.ticker-strip { background:var(--mustard); padding:.65rem 0; overflow:hidden; white-space:nowrap; }
.ticker-inner { display:inline-flex; gap:3rem; animation:ticker 28s linear infinite; }
.ticker-item { font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--white); display:inline-flex; align-items:center; gap:.75rem; }
.ticker-item::before { content:''; width:5px; height:5px; background:rgba(255,255,255,.6); border-radius:50%; display:block; }
@keyframes ticker { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

/* ══════════ PROPERTIES ══════════ */
#properties { background:var(--ivory-warm); }
.props-topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:3rem; flex-wrap:wrap; }
.tab-group { display:flex; gap:.45rem; flex-wrap:wrap; }
.tab-pill {
  padding:.4rem 1.15rem; border-radius:50px; font-size:.74rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; border:1.5px solid rgba(0,61,165,.3);
  color:var(--text-mid); background:transparent; cursor:pointer; transition:all var(--dur) var(--ease);
  text-decoration:none;
}
.tab-pill.on, .tab-pill:hover { background:var(--mustard); color:var(--white); border-color:var(--mustard); }

.prop-card { background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); display:flex; flex-direction:column; height:100%; }
.prop-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.pc-thumb { position:relative; overflow:hidden; height:228px; flex-shrink:0; background:var(--ivory-mid); }
.pc-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.prop-card:hover .pc-thumb img { transform:scale(1.08); }
.pc-badge { position:absolute; top:1rem; left:1rem; background:var(--mustard); color:var(--white); font-size:.62rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; padding:.27rem .8rem; border-radius:50px; }
.pc-badge.rent { background:var(--blue); }
.pc-badge.new  { background:var(--choco); }
.pc-save { position:absolute; top:.9rem; right:1rem; width:36px; height:36px; background:rgba(255,255,255,.92); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--mustard); cursor:pointer; transition:all var(--dur) var(--ease); backdrop-filter:blur(4px); border:1px solid rgba(0,61,165,.18); }
.pc-save:hover { background:var(--mustard); color:var(--white); transform:scale(1.1); }
.pc-price-strip { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(14,27,51,.82), transparent); padding:1.2rem 1rem .5rem; display:flex; align-items:flex-end; justify-content:space-between; }
.pc-price { font-family:var(--ff-display); font-size:1.35rem; font-weight:700; color:var(--white); line-height:1; }
.pc-price small { font-size:.7rem; font-weight:400; font-family:var(--ff-body); color:rgba(255,255,255,.78); display:block; margin-top:1px; }
.pc-sqft { font-size:.72rem; color:rgba(255,255,255,.78); font-weight:400; text-align:right; }
.pc-body { padding:1.3rem; flex:1; display:flex; flex-direction:column; }
.pc-title { font-family:var(--ff-display); font-size:1.08rem; font-weight:700; color:var(--choco); margin-bottom:.25rem; }
.pc-loc { font-size:.78rem; color:var(--text-light); margin-bottom:1rem; display:flex; align-items:center; gap:.35rem; }
.pc-loc::before { content:''; width:8px; height:8px; background:var(--mustard-pale); border:2px solid var(--mustard); border-radius:50%; flex-shrink:0; }
.pc-specs { display:flex; gap:.7rem; padding-top:.9rem; border-top:1px solid var(--ivory-mid); margin-top:auto; flex-wrap:wrap; }
.pc-spec { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; min-width:50px; }
.spec-dot { width:22px; height:5px; background:var(--mustard-pale); border-radius:4px; position:relative; overflow:hidden; }
.spec-dot::after { content:''; position:absolute; left:0; top:0; bottom:0; background:var(--mustard); border-radius:4px; }
.spec-dot.b2::after { width:60%; } .spec-dot.b3::after { width:80%; } .spec-dot.b4::after { width:100%; }
.spec-val { font-size:.74rem; font-weight:600; color:var(--choco); }
.spec-key { font-size:.62rem; color:var(--text-light); letter-spacing:.05em; }

/* ══════════ ABOUT ══════════ */
#about { background:var(--ivory); overflow:hidden; }
.about-visual { position:relative; min-height:540px; }
.av-main { width:86%; height:490px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.av-secondary { position:absolute; bottom:-20px; right:0; width:55%; height:250px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow-md); border:6px solid var(--ivory); }
.av-years-badge { position:absolute; top:2.5rem; right:.5rem; background:var(--mustard); color:var(--white); padding:1.3rem 1.6rem; border-radius:var(--radius); text-align:center; box-shadow:0 8px 40px rgba(220,28,46,.32); z-index:2; }
.av-years-badge .big { font-family:var(--ff-display); font-size:2.8rem; font-weight:900; line-height:1; display:block; }
.av-years-badge .small { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; opacity:.9; display:block; margin-top:3px; }
.dot-grid { position:absolute; bottom:2rem; left:-1.5rem; width:80px; height:80px; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; z-index:0; }
.dot-grid span { width:4px; height:4px; background:var(--blue); border-radius:50%; opacity:.4; display:block; }
.about-copy { padding-left:3rem; }
.about-points { list-style:none; display:flex; flex-direction:column; gap:1rem; margin:2rem 0 2.5rem; }
.about-points li { display:flex; align-items:flex-start; gap:.9rem; font-size:.91rem; color:var(--text-mid); line-height:1.65; }
.ap-tick { width:22px; height:22px; background:var(--mustard-pale); border-radius:50%; flex-shrink:0; margin-top:1px; position:relative; }
.ap-tick::before { content:''; position:absolute; top:7px; left:5px; width:11px; height:6px; border-left:2px solid var(--mustard-deep); border-bottom:2px solid var(--mustard-deep); transform:rotate(-45deg); }
.about-numbers { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ivory-mid); border-radius:var(--radius); overflow:hidden; margin-bottom:2.5rem; }
.an-block { background:var(--white); padding:1.3rem 1rem; text-align:center; }
.an-num { font-family:var(--ff-display); font-size:1.9rem; font-weight:800; color:var(--mustard); display:block; line-height:1; }
.an-lbl { font-size:.7rem; color:var(--text-light); letter-spacing:.07em; text-transform:uppercase; display:block; margin-top:4px; }
@media (max-width:991px) {
  .about-copy { padding-left:0; margin-top:3rem; }
  .about-visual { min-height:380px; }
  .av-main { height:340px; } .av-secondary { height:190px; }
}

/* ══════════ SERVICES ══════════ */
#services { background:var(--choco); position:relative; overflow:hidden; }
#services::before { content:''; position:absolute; top:-180px; right:-180px; width:550px; height:550px; border-radius:50%; border:60px solid rgba(0,61,165,.10); pointer-events:none; }
#services::after { content:''; position:absolute; bottom:-100px; left:-100px; width:300px; height:300px; background:radial-gradient(circle, rgba(220,28,46,.14), transparent 70%); pointer-events:none; }
#services .u-label { color:#FFD7DB; } #services .u-label::before { background:var(--mustard); }
#services .u-h2 { color:var(--white); } #services .u-h2 em { color:var(--mustard-light); }
#services .u-rule { background:var(--mustard); } #services .u-body { color:rgba(255,255,255,.66); }
.serv-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.5rem; margin-top:3.5rem; }
.serv-card { background:rgba(255,255,255,.05); border:1px solid rgba(0,61,165,.2); border-radius:var(--radius); padding:2.5rem 2rem; position:relative; overflow:hidden; transition:all var(--dur) var(--ease); }
.serv-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(220,28,46,.10), transparent 60%); opacity:0; transition:opacity var(--dur); }
.serv-card:hover { background:rgba(255,255,255,.08); border-color:rgba(220,28,46,.45); transform:translateY(-8px); box-shadow:0 20px 60px rgba(0,0,0,.3); }
.serv-card:hover::before { opacity:1; }
.sc-number { position:absolute; top:1rem; right:1.5rem; font-family:var(--ff-display); font-size:5rem; font-weight:900; color:rgba(255,255,255,.06); line-height:1; transition:color var(--dur); pointer-events:none; }
.serv-card:hover .sc-number { color:rgba(220,28,46,.18); }
.sc-icon-box { width:54px; height:54px; background:rgba(220,28,46,.18); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:1.6rem; transition:background var(--dur); }
.serv-card:hover .sc-icon-box { background:rgba(220,28,46,.3); }
.sc-icon-inner { width:22px; height:22px; background:var(--mustard-light); border-radius:5px; }
.sc-title { font-family:var(--ff-display); font-size:1.38rem; font-weight:700; color:var(--white); margin-bottom:.75rem; }
.sc-text { font-size:.86rem; color:rgba(255,255,255,.64); line-height:1.78; }
.sc-link { display:inline-flex; align-items:center; gap:.4rem; margin-top:1.5rem; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mustard-light); transition:gap var(--dur); }
.sc-link::after { content:'→'; }
.sc-link:hover { gap:.7rem; color:var(--white); }

/* ══════════ TESTIMONIALS ══════════ */
#testimonials { background:var(--ivory); }
.testi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:1.5rem; margin-top:3rem; }
.testi-card { background:var(--white); border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); border-bottom:3px solid transparent; }
.testi-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-bottom-color:var(--mustard); }
.testi-card::before { content:'\201C'; position:absolute; top:-.8rem; right:1rem; font-family:var(--ff-display); font-size:9rem; font-weight:900; color:var(--mustard-pale); line-height:1; pointer-events:none; }
.testi-stars { display:flex; gap:3px; margin-bottom:1.1rem; }
.tstar { width:13px; height:13px; background:var(--mustard); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.tstar.off { background:var(--mustard-pale); }
.testi-quote { font-size:.9rem; font-style:italic; color:var(--text-mid); line-height:1.82; margin-bottom:1.5rem; position:relative; z-index:1; }
.testi-person { display:flex; align-items:center; gap:.9rem; }
.tp-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2.5px solid var(--mustard-pale); flex-shrink:0; }
.tp-name { font-family:var(--ff-display); font-size:1.02rem; font-weight:700; color:var(--choco); }
.tp-role { font-size:.72rem; color:var(--text-light); margin-top:1px; letter-spacing:.04em; }

/* ══════════ CONTACT ══════════ */
#contact { background:var(--ivory-warm); }
.contact-shell { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); display:grid; grid-template-columns:1fr 1fr; }
.ci-panel { background:var(--choco); padding:4rem 3.5rem; position:relative; overflow:hidden; }
.ci-panel::after { content:''; position:absolute; bottom:-120px; right:-120px; width:360px; height:360px; border-radius:50%; border:60px solid rgba(0,61,165,.1); pointer-events:none; }
.ci-panel .u-label { color:#FFD7DB; } .ci-panel .u-label::before { background:var(--mustard); }
.ci-panel .u-h2 { color:var(--white); font-size:1.9rem; } .ci-panel .u-h2 em { color:var(--mustard-light); }
.ci-panel .u-rule { background:var(--mustard); } .ci-panel .u-body { color:rgba(255,255,255,.66); font-size:.88rem; margin-bottom:2.5rem; }
.ci-detail { display:flex; align-items:flex-start; gap:1.1rem; margin-bottom:1.6rem; position:relative; z-index:1; }
.ci-icon { width:48px; height:48px; background:rgba(220,28,46,.14); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid rgba(220,28,46,.22); transition:background var(--dur); color:var(--mustard-light); }
.ci-detail:hover .ci-icon { background:rgba(220,28,46,.24); }
.ci-icon-dot { width:18px; height:18px; background:var(--mustard-light); border-radius:4px; }
.ci-detail-text strong { display:block; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#FFD7DB; margin-bottom:3px; }
.ci-detail-text span { font-size:.88rem; color:rgba(255,255,255,.86); line-height:1.6; }
.ci-detail-text a { color:rgba(255,255,255,.86); transition:color var(--dur); }
.ci-detail-text a:hover { color:var(--mustard-light); }
.cm-panel { position:relative; min-height:520px; }
.cm-panel iframe { display:block; width:100%; height:100%; min-height:520px; border:none; }
@media (max-width: 767px) {
  .contact-shell { grid-template-columns:1fr; }
  .ci-panel { padding:2.5rem 1.8rem; }
  .cm-panel { min-height:320px; } .cm-panel iframe { min-height:320px; }
}

/* ══════════ FOOTER ══════════ */
footer { background:var(--choco); padding:4.5rem 0 0; position:relative; overflow:hidden; }
footer::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--blue), var(--mustard), var(--blue)); }
.footer-cols { display:grid; grid-template-columns:2.2fr 1fr 1fr 1.2fr; gap:3rem; padding-bottom:3.5rem; }
.footer-brand-logo .logo-name { color:var(--white); } .footer-brand-logo .logo-name b { color:var(--mustard-light); }
.footer-brand-logo .logo-sub { color:rgba(255,255,255,.5); }
.footer-brand-logo .logo-emblem { background:var(--choco-mid); }
.footer-brand p { font-size:.83rem; color:rgba(255,255,255,.5); line-height:1.8; margin-top:1.2rem; max-width:300px; }
.fc-heading { font-family:var(--ff-display); font-size:1rem; font-weight:700; color:var(--white); margin-bottom:1.3rem; letter-spacing:.02em; }
.fc-links { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.fc-links a { font-size:.81rem; color:rgba(255,255,255,.5); transition:color var(--dur), padding-left var(--dur); }
.fc-links a:hover { color:var(--mustard-light); padding-left:6px; }
.footer-bar { border-top:1px solid rgba(255,255,255,.1); padding:1.4rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer-bar p { font-size:.76rem; color:rgba(255,255,255,.4); }
.footer-bar-links { display:flex; gap:1.5rem; }
.footer-bar-links a { font-size:.74rem; color:rgba(255,255,255,.4); transition:color var(--dur); }
.footer-bar-links a:hover { color:var(--mustard-light); }
.footer-legal { font-size:.72rem; color:rgba(255,255,255,.35); padding-bottom:1.4rem; line-height:1.6; }
@media (max-width: 991px) { .footer-cols { grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width: 575px) { .footer-cols { grid-template-columns:1fr; gap:1.8rem; } }

/* ══════════ SCROLL REVEAL ══════════ */
.sr { opacity:0; transform:translateY(36px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.sr.visible { opacity:1; transform:none; }
.sr-d1 { transition-delay:.1s; } .sr-d2 { transition-delay:.2s; } .sr-d3 { transition-delay:.3s; } .sr-d4 { transition-delay:.4s; }

/* ════════════════════════════════════════════════════════════
   NEW COMPONENTS (sub-pages, search, detail, forms, agent card)
════════════════════════════════════════════════════════════ */

/* ── Breadcrumb banner (sub-page header) ── */
.page-banner {
  position:relative; padding:120px 0 70px; overflow:hidden;
  background:
    radial-gradient(120% 120% at 85% 0%, rgba(0,61,165,.35), transparent 55%),
    linear-gradient(135deg, #0E1B33 0%, #16264A 55%, #1E3A6E 100%);
}
.page-banner::after { content:''; position:absolute; top:0; right:12%; width:4px; height:55%; background:linear-gradient(to bottom, var(--mustard), transparent); opacity:.6; }
.page-banner .pb-eyebrow { font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--mustard-light); margin-bottom:.9rem; }
.page-banner h1 { font-family:var(--ff-display); font-size:clamp(2.2rem, 5vw, 3.4rem); font-weight:800; color:var(--white); line-height:1.1; }
.page-banner p { color:rgba(255,255,255,.72); font-size:.95rem; margin-top:.8rem; max-width:560px; }
.pb-crumbs { display:flex; gap:.5rem; align-items:center; font-size:.78rem; color:rgba(255,255,255,.6); margin-top:1.2rem; }
.pb-crumbs a { color:rgba(255,255,255,.6); transition:color var(--dur); }
.pb-crumbs a:hover { color:var(--mustard-light); }
.pb-crumbs span { color:var(--mustard-light); }

/* ── Search / filter form ── */
.search-panel { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:1.5rem; margin-top:-48px; position:relative; z-index:5; }
.search-tabs { display:flex; gap:.4rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.search-tab { padding:.4rem 1.1rem; border-radius:50px; font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; border:1.5px solid rgba(0,61,165,.25); color:var(--text-mid); background:transparent; cursor:pointer; text-decoration:none; transition:all var(--dur) var(--ease); }
.search-tab.on { background:var(--blue); color:var(--white); border-color:var(--blue); }
.search-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:.9rem; align-items:end; }
.field { display:flex; flex-direction:column; gap:.35rem; }
.field label { font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mustard); }
.field input, .field select {
  width:100%; border:1.5px solid var(--ivory-mid); background:var(--ivory); border-radius:var(--radius-sm);
  padding:.6rem .8rem; font-family:var(--ff-body); font-size:.86rem; color:var(--choco); outline:none;
  transition:border-color var(--dur), background var(--dur);
}
.field input:focus, .field select:focus { border-color:var(--mustard); background:var(--white); }
.mode-field { display:none; }
.mode-field.show { display:block; }          /* hero quick-search (.sb-field) */
.field.mode-field.show { display:flex; }     /* listings filter (.field column) */

/* ── Results meta + grid ── */
.results-meta { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:2.5rem 0 1.5rem; flex-wrap:wrap; }
.results-meta .count { font-family:var(--ff-display); font-size:1.3rem; font-weight:700; color:var(--choco); }
.results-meta .count b { color:var(--mustard); }
.empty-state { text-align:center; padding:4rem 1rem; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.empty-state h3 { font-family:var(--ff-display); font-size:1.5rem; color:var(--choco); margin-bottom:.6rem; }
.empty-state p { color:var(--text-mid); font-size:.92rem; }

/* ── Pagination ── */
.pagination-wrap { display:flex; justify-content:center; gap:.4rem; margin-top:3rem; flex-wrap:wrap; }
.pagination-wrap a, .pagination-wrap span {
  min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); font-size:.85rem; font-weight:600; border:1.5px solid var(--ivory-mid);
  color:var(--text-mid); background:var(--white); transition:all var(--dur) var(--ease); padding:0 .6rem;
}
.pagination-wrap a:hover { border-color:var(--mustard); color:var(--mustard); }
.pagination-wrap .current { background:var(--mustard); color:var(--white); border-color:var(--mustard); }
.pagination-wrap .disabled { opacity:.4; pointer-events:none; }

/* ── Property detail ── */
.pd-gallery { display:grid; grid-template-columns:3fr 1fr; gap:.8rem; }
.pd-main-img { border-radius:var(--radius); overflow:hidden; height:480px; background:var(--ivory-mid); }
.pd-main-img img { width:100%; height:100%; object-fit:cover; }
.pd-thumbs { display:flex; flex-direction:column; gap:.8rem; max-height:480px; overflow-y:auto; }
.pd-thumb { border-radius:var(--radius-sm); overflow:hidden; height:112px; cursor:pointer; border:2px solid transparent; transition:border-color var(--dur); background:var(--ivory-mid); }
.pd-thumb.active, .pd-thumb:hover { border-color:var(--mustard); }
.pd-thumb img { width:100%; height:100%; object-fit:cover; }
@media (max-width:767px){ .pd-gallery { grid-template-columns:1fr; } .pd-main-img{ height:300px; } .pd-thumbs{ flex-direction:row; max-height:none; } .pd-thumb{ width:96px; flex-shrink:0; } }

.pd-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; margin:2.2rem 0 1.5rem; flex-wrap:wrap; }
.pd-title { font-family:var(--ff-display); font-size:2rem; font-weight:800; color:var(--choco); line-height:1.15; }
.pd-loc { color:var(--text-mid); font-size:.95rem; margin-top:.5rem; display:flex; align-items:center; gap:.4rem; }
.pd-loc::before { content:''; width:9px; height:9px; background:var(--mustard-pale); border:2px solid var(--mustard); border-radius:50%; }
.pd-price { font-family:var(--ff-display); font-size:2rem; font-weight:800; color:var(--mustard); white-space:nowrap; }
.pd-price small { display:block; font-family:var(--ff-body); font-size:.72rem; font-weight:500; color:var(--text-light); text-transform:uppercase; letter-spacing:.08em; text-align:right; }

.pd-specs { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:1px; background:var(--ivory-mid); border-radius:var(--radius); overflow:hidden; margin-bottom:2rem; }
.pd-spec { background:var(--white); padding:1.3rem 1rem; text-align:center; }
.pd-spec .v { font-family:var(--ff-display); font-size:1.5rem; font-weight:800; color:var(--choco); line-height:1; }
.pd-spec .k { font-size:.68rem; color:var(--text-light); text-transform:uppercase; letter-spacing:.08em; margin-top:5px; }

.pd-section-title { font-family:var(--ff-display); font-size:1.4rem; font-weight:700; color:var(--choco); margin:2rem 0 1rem; }
.pd-desc { font-size:.95rem; line-height:1.9; color:var(--text-mid); }
.pd-facts { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:.6rem 2rem; margin-top:1rem; }
.pd-facts li { display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--ivory-mid); font-size:.88rem; }
.pd-facts li span:first-child { color:var(--text-light); }
.pd-facts li span:last-child { color:var(--choco); font-weight:600; text-align:right; }

/* Sticky agent / enquiry sidebar */
.pd-sidebar { position:sticky; top:96px; }
.agent-card { background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; }
.agent-card .ac-top { background:var(--mustard); padding:1.6rem; display:flex; align-items:center; gap:1rem; }
.agent-card .ac-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.6); background:var(--white); flex-shrink:0; }
.agent-card .ac-name { font-family:var(--ff-display); font-size:1.2rem; font-weight:800; color:var(--white); line-height:1.1; }
.agent-card .ac-role { font-size:.74rem; color:rgba(255,255,255,.88); text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }
.agent-card .ac-body { padding:1.5rem; }
.ac-contact { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.3rem; }
.ac-contact a { display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--text-body); font-weight:500; }
.ac-contact a:hover { color:var(--mustard); }
.ac-contact .ic { width:30px; height:30px; border-radius:8px; background:var(--ivory-warm); display:flex; align-items:center; justify-content:center; color:var(--blue); font-size:.9rem; flex-shrink:0; }

/* ── Forms ── */
.form-card { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:2.5rem; }
.form-card.compact { padding:1.5rem; box-shadow:none; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.form-group label { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mid); }
.form-group .req { color:var(--mustard); }
.form-control2, textarea.form-control2 {
  width:100%; border:1.5px solid var(--ivory-mid); background:var(--ivory); border-radius:var(--radius-sm);
  padding:.75rem .9rem; font-family:var(--ff-body); font-size:.9rem; color:var(--choco); outline:none;
  transition:border-color var(--dur), background var(--dur);
}
.form-control2:focus { border-color:var(--mustard); background:var(--white); }
textarea.form-control2 { min-height:130px; resize:vertical; }
@media (max-width:575px){ .form-row { grid-template-columns:1fr; } .form-card { padding:1.6rem; } }

/* ── Alerts ── */
.alert2 { border-radius:var(--radius-sm); padding:1rem 1.2rem; font-size:.9rem; margin-bottom:1.4rem; display:flex; gap:.7rem; align-items:flex-start; }
.alert2.ok { background:#E7F6EC; color:#1B6E3C; border:1px solid #B7E2C6; }
.alert2.err { background:var(--mustard-pale); color:var(--mustard-deep); border:1px solid #F3C2C6; }
.alert2 ul { margin:0; padding-left:1.1rem; }

/* ── Section heading helper for plain pages ── */
.section-head { max-width:620px; margin:0 auto 3rem; text-align:center; }
.section-head .u-label { justify-content:center; }

/* ════════════════════════════════════════════════════════════
   MORTGAGE CALCULATOR (ported from template, recoloured RE/MAX)
════════════════════════════════════════════════════════════ */
#calculator { background: var(--ivory-warm); }

.calc-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 55% 45%;
}
.cc-left { padding: 3.5rem; }
.cc-row { margin-bottom: 2rem; }
.cc-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7rem; }
.cc-field-label { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mid); }
.cc-field-value { font-family: var(--ff-display); font-size: 1.05rem; font-weight: 700; color: var(--mustard-deep); }
.cc-range-wrap { position: relative; height: 8px; border-radius: 8px; background: var(--ivory-mid); margin-bottom: .4rem; }
.cc-range-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--mustard-deep), var(--mustard-light)); border-radius: 8px; pointer-events: none; transition: width .15s; }
.cc-range-wrap input[type="range"] { -webkit-appearance: none; appearance: none; position: absolute; inset: -4px 0; width: 100%; background: transparent; cursor: pointer; opacity: 0; height: 16px; }
.cc-range-thumb { position: absolute; top: 50%; width: 18px; height: 18px; background: var(--white); border: 3px solid var(--mustard-deep); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: left .15s; box-shadow: 0 2px 8px rgba(220,28,46,.25); }
.cc-range-minmax { display: flex; justify-content: space-between; font-size: .68rem; color: var(--text-light); margin-top: .2rem; }
.cc-right { background: var(--choco); padding: 3.5rem 2.5rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.cc-right::before { content: ''; position: absolute; top: -80px; right: -80px; width: 280px; height: 280px; border-radius: 50%; border: 50px solid rgba(0,61,165,.18); pointer-events: none; }
.cc-result-label { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mustard-light); margin-bottom: .5rem; }
.cc-result-amount { font-family: var(--ff-display); font-size: clamp(2.5rem,4vw,3.8rem); font-weight: 900; color: var(--white); line-height: 1; margin-bottom: 2rem; }
.cc-result-amount sup { font-size: 1.5rem; font-weight: 500; vertical-align: super; color: var(--mustard-light); }
.cc-result-amount sub { font-size: 1rem; font-weight: 400; font-family: var(--ff-body); color: rgba(255,255,255,.55); margin-left: .2rem; }
.cc-breakdown { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(255,255,255,.14); }
.cc-brow { display: flex; justify-content: space-between; align-items: center; padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.cc-brow:last-child { border-bottom: none; }
.cc-brow-k { font-size: .78rem; color: rgba(255,255,255,.55); font-weight: 400; }
.cc-brow-v { font-family: var(--ff-display); font-size: 1rem; font-weight: 700; color: var(--white); }
.cc-donut-wrap { margin-top: 2rem; display: flex; align-items: center; gap: 1.2rem; }
.cc-donut { width: 88px; height: 88px; border-radius: 50%; background: conic-gradient(var(--mustard-light) 0% 60%, rgba(0,61,165,.45) 60% 100%); box-shadow: inset 0 0 0 22px var(--choco); position: relative; flex-shrink: 0; transition: background .4s; }
.cc-donut-legend { display: flex; flex-direction: column; gap: .5rem; }
.cc-legend-row { display: flex; align-items: center; gap: .5rem; font-size: .72rem; color: rgba(255,255,255,.6); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 767px) {
  .calc-card { grid-template-columns: 1fr; }
  .cc-left { padding: 2rem 1.5rem; }
  .cc-right { padding: 2rem 1.5rem; }
}