/* ==========================================================================
   ASCEND REALTY GROUP LLC — styles.css
   Brand layer on top of Bootstrap 5.3. Loaded AFTER bootstrap.min.css.
   Shared by pages/index.html and pages/agents.html.

   Flat colour only — no gradients. Depth comes from soft shadows and radii.
   Two typefaces: Cormorant Garamond (display) and Archivo (everything else).

   Contents
     1.  Tokens
     2.  Bootstrap overrides
     3.  Base + shared type
     4.  Sections
     5.  Navbar
     6.  Hero
     7.  Brokerage
     8.  Properties
     9.  Areas we serve
     10. Licensee registry
     11. Contact
     12. Footer
     13. Agent portal page
     14. Motion + accessibility
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — navy and gold sampled from the logo artwork itself
   -------------------------------------------------------------------------- */
:root{
  --navy:#112640;
  --navy-deep:#0A1B2B;
  --navy-line:#26405C;

  --gold:#A6813A;
  --gold-deep:#7D5F26;
  --gold-soft:#C9A96A;

  --white:#FFFFFF;
  --off:#F6F8FA;
  --line:#D9E1EA;
  --line-soft:#E8EEF3;

  --gray:#55616F;
  --gray-light:#8794A3;
  --mist:#A9B5C3;

  --display:"Cormorant Garamond", Georgia, serif;
  --body:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* modern shaping: soft radii + layered shadow instead of hard 1px boxes */
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --shadow:0 1px 2px rgba(17,38,64,.04), 0 10px 30px -18px rgba(17,38,64,.28);
  --shadow-lift:0 2px 6px rgba(17,38,64,.05), 0 26px 50px -26px rgba(17,38,64,.34);
  --ease:cubic-bezier(.22,.68,.32,1);

  --nav-h:76px;
  --pad:clamp(20px, 5vw, 56px);
}

/* --------------------------------------------------------------------------
   2. Bootstrap overrides
   -------------------------------------------------------------------------- */
:root{
  --bs-body-font-family:var(--body);
  --bs-body-color:var(--gray);
  --bs-body-bg:var(--white);
  --bs-border-color:var(--line);
  --bs-border-radius:var(--r-sm);
  --bs-link-color:inherit;
  --bs-link-hover-color:var(--gold-deep);
}

.container{max-width:1160px; padding-left:var(--pad); padding-right:var(--pad)}

.btn{
  --bs-btn-padding-x:30px;
  --bs-btn-padding-y:15px;
  --bs-btn-font-family:var(--body);
  --bs-btn-font-size:12px;
  --bs-btn-font-weight:500;
  --bs-btn-border-radius:var(--r-sm);
  --bs-btn-focus-shadow-rgb:166,129,58;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}

.btn-gold{
  --bs-btn-color:var(--navy-deep);
  --bs-btn-bg:var(--gold);
  --bs-btn-border-color:var(--gold);
  --bs-btn-hover-color:var(--navy-deep);
  --bs-btn-hover-bg:var(--gold-soft);
  --bs-btn-hover-border-color:var(--gold-soft);
  --bs-btn-active-color:var(--navy-deep);
  --bs-btn-active-bg:var(--gold-soft);
  --bs-btn-active-border-color:var(--gold-soft);
}
.btn-gold:hover{box-shadow:0 14px 28px -16px rgba(166,129,58,.9)}

.btn-line{
  --bs-btn-color:var(--white);
  --bs-btn-bg:transparent;
  --bs-btn-border-color:rgba(255,255,255,.32);
  --bs-btn-hover-color:var(--navy-deep);
  --bs-btn-hover-bg:var(--white);
  --bs-btn-hover-border-color:var(--white);
  --bs-btn-active-color:var(--navy-deep);
  --bs-btn-active-bg:var(--white);
  --bs-btn-active-border-color:var(--white);
}

.btn-line-gold{
  --bs-btn-color:var(--gold-soft);
  --bs-btn-bg:transparent;
  --bs-btn-border-color:rgba(201,169,106,.4);
  --bs-btn-hover-color:var(--navy-deep);
  --bs-btn-hover-bg:var(--gold-soft);
  --bs-btn-hover-border-color:var(--gold-soft);
  --bs-btn-active-color:var(--navy-deep);
  --bs-btn-active-bg:var(--gold-soft);
  --bs-btn-active-border-color:var(--gold-soft);
}

/* --------------------------------------------------------------------------
   3. Base + shared type
   -------------------------------------------------------------------------- */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{line-height:1.7; overflow-x:hidden; font-size:16.5px; -webkit-font-smoothing:antialiased}
body:focus{outline:0}                  /* scrollspy needs tabindex on <body> */
img{max-width:100%; display:block}
a{text-decoration:none; color:inherit}
::selection{background:var(--gold); color:var(--white)}

h1,h2,h3{font-family:var(--display); font-weight:400; color:var(--navy)}
h2{font-size:clamp(32px,4.6vw,52px); line-height:1.1; letter-spacing:-.018em}
h3{font-weight:500; font-size:21px; line-height:1.3; letter-spacing:-.005em}
p{color:var(--gray); margin-bottom:0}
.lede{font-size:17.5px; max-width:52ch; margin-top:16px}

/* small uppercase label, led by a gold dot */
.label{
  display:flex; align-items:center; gap:9px;
  font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gray-light); margin-bottom:16px;
}
.label::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:0 0 auto}
.on-dark .label{color:var(--gold-soft)}
.on-dark h2,.on-dark h3{color:var(--white)}
.on-dark p{color:var(--mist)}

/* quiet marker for copy still awaiting Carol's confirmation */
.pending{font-size:12.5px; font-style:italic; color:var(--gray-light)}

/* --------------------------------------------------------------------------
   4. Sections
   -------------------------------------------------------------------------- */
.section{padding:clamp(80px,10vw,132px) 0; scroll-margin-top:var(--nav-h); background:var(--white)}
.section-alt{background:var(--off)}
.section-head{max-width:660px; margin-bottom:clamp(46px,5.5vw,68px)}

/* --------------------------------------------------------------------------
   5. Navbar — overlays the hero, gains a solid backing once scrolled
   -------------------------------------------------------------------------- */
.navbar.ascend-nav{
  position:fixed; top:0; left:0; right:0; z-index:1030;
  min-height:var(--nav-h);
  padding-top:0; padding-bottom:0;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
.ascend-nav.is-scrolled{
  background:rgba(10,27,43,.94);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:rgba(255,255,255,.09);
}
/* agents.html has no hero, so it needs the solid bar immediately */
.ascend-nav.is-solid{background:var(--navy-deep); border-bottom-color:transparent}

.ascend-nav .navbar-brand{display:flex; align-items:center; gap:10px; padding:0; margin:0}
.ascend-nav .navbar-brand img{height:34px; width:auto}
.ascend-nav .brand-name{font-family:var(--display); font-size:18px; letter-spacing:.18em; color:var(--white); line-height:1}
.ascend-nav .brand-sub{font-size:7.5px; font-weight:500; letter-spacing:.3em; color:var(--gold-soft); display:block; margin-top:4px}

.ascend-nav .navbar-nav{align-items:center; gap:clamp(14px,2.2vw,30px)}
.ascend-nav .nav-link{
  font-size:11.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--mist); padding:7px 0; transition:color .25s var(--ease);
}
.ascend-nav .nav-link:hover,
.ascend-nav .nav-link:focus,
.ascend-nav .nav-link.active{color:var(--white)}
.ascend-nav .nav-cta{
  color:var(--white); border:1px solid rgba(255,255,255,.3);
  padding:10px 20px; border-radius:999px;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.ascend-nav .nav-cta:hover,.ascend-nav .nav-cta.active{background:var(--white); color:var(--navy-deep); border-color:var(--white)}

.ascend-nav .navbar-toggler{border:0; padding:8px; box-shadow:none}
.ascend-nav .navbar-toggler:focus{box-shadow:none}
.ascend-nav .navbar-toggler .bar{
  display:block; width:22px; height:1.5px; background:var(--white); margin:6px 0;
  border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.ascend-nav .navbar-toggler[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.ascend-nav .navbar-toggler[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.ascend-nav .navbar-toggler[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width:991.98px){
  .ascend-nav .navbar-collapse{
    background:var(--navy-deep); margin:0 calc(var(--pad) * -1); padding:6px var(--pad) 24px;
  }
  .ascend-nav .navbar-nav{align-items:stretch; gap:0}
  .ascend-nav .nav-item + .nav-item{border-top:1px solid rgba(255,255,255,.08)}
  .ascend-nav .nav-link{display:block; padding:15px 0; font-size:12.5px}
  .ascend-nav .nav-cta{display:block; text-align:center; margin-top:18px; border-radius:var(--r-sm); padding:14px 20px}
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
#top{
  scroll-margin-top:var(--nav-h);
  background:var(--navy);
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:calc(var(--nav-h) + clamp(56px,8vw,96px)) 0 clamp(64px,8vw,96px);
}
.hero-logo{width:clamp(180px,22vw,244px); margin:0 auto 42px}
.hero-tag{
  font-family:var(--display); font-weight:300;
  font-size:clamp(34px,5.6vw,60px); line-height:1.08; letter-spacing:-.02em;
  color:var(--white); margin:0;
}
.hero-sub{color:var(--mist); max-width:52ch; margin:24px auto 0; font-size:16.5px; line-height:1.75}
.hero-btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:42px}

/* --------------------------------------------------------------------------
   7. Brokerage
   -------------------------------------------------------------------------- */
.statement{font-family:var(--display); font-size:clamp(23px,2.7vw,31px); line-height:1.42; color:var(--navy); font-weight:400}
.point{padding:26px 0; border-top:1px solid var(--line)}
.point:first-child{border-top:0; padding-top:0}
.point h3{margin-bottom:6px}
.point p{font-size:15.5px}

/* --------------------------------------------------------------------------
   8. Properties
   -------------------------------------------------------------------------- */
.listing{
  height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.listing:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:#D6DEE7}
.listing .shot{position:relative; background:var(--off); border-bottom:1px solid var(--line)}
.listing .shot svg{position:absolute; inset:0; width:100%; height:100%}
.listing .status{
  position:absolute; top:14px; left:14px; z-index:2;
  display:flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px;
  font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); background:var(--white); box-shadow:var(--shadow);
}
.listing .status i{width:5px; height:5px; border-radius:50%; background:var(--gold)}
.listing .status.closed i{background:var(--gray-light)}
.listing .body{padding:24px 26px; flex:1 1 auto}
.listing h3{margin-bottom:5px}
.listing .loc{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-light)}
.listing .specs{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line-soft); font-size:13px; color:var(--gray-light);
}
.listing .specs b{color:var(--navy); font-weight:500}

/* placeholder strip — delete from each card once real listings are approved */
.listing-pending{
  padding:14px 26px; background:var(--off); border-top:1px solid var(--line);
  font-size:12.5px; font-style:italic; line-height:1.6; color:var(--gray-light);
}

/* --------------------------------------------------------------------------
   9. Areas we serve
   -------------------------------------------------------------------------- */
.state-line{
  margin-top:34px; padding-top:24px; border-top:1px solid var(--line);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gray-light);
}

/* --------------------------------------------------------------------------
   10. Licensee registry
   -------------------------------------------------------------------------- */
.register{
  border:1px solid var(--line); border-radius:var(--r); background:var(--white);
  box-shadow:var(--shadow); overflow:hidden;
}
.reg-head{
  padding:16px 28px; border-bottom:1px solid var(--line); background:var(--off);
  font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-light);
}
.entry{padding:clamp(30px,3.6vw,42px) 28px}
.entry .nm{font-family:var(--display); font-size:clamp(28px,3.4vw,36px); line-height:1.1; color:var(--navy)}
.entry .role{font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-top:9px}
.fields{margin:28px 0 0; max-width:520px}
.field{
  display:grid; grid-template-columns:170px 1fr; gap:16px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--line-soft);
}
.field:first-child{border-top:0}
.field dt{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--gray); font-weight:500}
.field dd{font-size:15.5px; color:var(--navy); margin:0; font-variant-numeric:tabular-nums}
.field dd a{border-bottom:1px solid var(--line); transition:border-color .25s, color .25s}
.field dd a:hover{color:var(--gold-deep); border-color:var(--gold)}
@media (max-width:560px){.field{grid-template-columns:1fr; gap:2px}}

/* --------------------------------------------------------------------------
   11. Contact
   -------------------------------------------------------------------------- */
.cline{padding:17px 0; border-top:1px solid var(--line)}
.cline:first-of-type{border-top:0; padding-top:0}
.cline dt{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--gray); margin-bottom:5px; font-weight:500}
.cline dd{font-size:17px; margin:0; color:var(--navy)}
.cline dd a:hover{color:var(--gold-deep)}
.cline .sm{font-size:14px; color:var(--gray)}

.form-label{
  font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--navy); margin-bottom:8px;
}
/* Fields need a fill that is clearly darker than the page, not a 2% tint,
   plus a mid-tone border. White-on-white reads as empty space. */
.form-control,.form-select{
  font-family:var(--body); font-size:15px; color:var(--navy);
  padding:14px 16px; border:2px solid #2B4A6B; border-radius:var(--r-sm);
  background-color:#DFE7F0;
  box-shadow:inset 0 1px 2px rgba(17,38,64,.08);
  transition:border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control::placeholder{color:#69788A; opacity:1}
.form-control:hover,.form-select:hover{border-color:var(--navy); background-color:#D6E1ED}
.form-control:focus,.form-select:focus{
  background-color:var(--white); border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(166,129,58,.2);
}
textarea.form-control{min-height:130px; resize:vertical}
.form-note{font-size:12.5px; color:var(--gray); margin-top:8px}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.site-footer{background:var(--navy-deep); color:var(--mist); padding:clamp(60px,7vw,84px) 0 0}
.site-footer .f-logo{width:150px; margin-bottom:26px}
.f-block{font-size:13px; line-height:2}
.f-block .nm{color:var(--white); letter-spacing:.16em; text-transform:uppercase; font-size:11px; font-weight:500}
.f-block a:hover{color:var(--white)}
.f-h{font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:16px}
.f-links{list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:13.5px}
.f-links a{transition:color .25s var(--ease), padding-left .25s var(--ease)}
.f-links a:hover{color:var(--white); padding-left:5px}
.f-agent{font-size:13px; line-height:1.7; margin-bottom:18px}
.f-bar{
  border-top:1px solid rgba(255,255,255,.1); margin-top:10px; padding:22px 0 30px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#72839A;
}

/* --------------------------------------------------------------------------
   13. Agent gateway (agents.html)

   Two flat navy tones give the card depth without a gradient: the page sits
   on --navy-deep, the card one step lighter on --navy.
   -------------------------------------------------------------------------- */
.gate-page{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  background:var(--navy-deep); padding:48px 24px;
}
.gate-wrap{width:100%; max-width:428px}

.gate{
  background:var(--navy);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);
  box-shadow:0 40px 80px -44px rgba(0,0,0,.75);
  padding:clamp(34px,5vw,48px) clamp(28px,4.5vw,44px) clamp(26px,3.5vw,34px);
  text-align:center;
}
.gate .mark{width:150px; margin:0 auto}
.gate .rule{width:44px; height:1px; background:var(--gold); margin:26px auto 22px}
.gate h1{
  font-family:var(--display); font-weight:300; font-size:clamp(25px,3.4vw,30px);
  line-height:1.2; letter-spacing:.005em; color:var(--white); margin:0;
}
.gate .hint{font-size:13px; color:var(--mist); margin-top:10px}

.gate form{margin-top:30px; text-align:left}
.gate .form-label{color:var(--gold-soft); font-weight:500}
.gate .form-control{
  background-color:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.22);
  color:var(--white);
  box-shadow:none;
}
.gate .form-control::placeholder{color:rgba(169,181,195,.7)}
.gate .form-control:hover{background-color:rgba(255,255,255,.09); border-color:rgba(255,255,255,.36)}
.gate .form-control:focus{
  background-color:rgba(255,255,255,.11);
  border-color:var(--gold-soft);
  color:var(--white);
  box-shadow:0 0 0 3px rgba(201,169,106,.22);
}
.gate .btn{width:100%; margin-top:18px}
.gate-msg{margin-top:14px; font-size:13px; color:var(--gold-soft); min-height:20px; text-align:center}

.gate-back{
  display:block; text-align:center; margin-top:26px;
  font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:#72839A; transition:color .25s var(--ease);
}
.gate-back:hover{color:var(--gold-soft)}

/* --------------------------------------------------------------------------
   14. Motion + accessibility
   -------------------------------------------------------------------------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .75s var(--ease), transform .75s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.08s}
.rv.d2{transition-delay:.16s}

:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.skip{position:absolute; left:-9999px; top:0; z-index:2000; background:var(--gold); color:var(--white); padding:12px 20px; font-size:13px; border-radius:var(--r-sm)}
.skip:focus{left:12px; top:12px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .rv{opacity:1; transform:none}
  .btn:hover,.listing:hover,.res:hover{transform:none}
}

/* --------------------------------------------------------------------------
   15. Visual polish — homepage refinements
   Keeps the existing navy/gold identity and adds no new content.
   -------------------------------------------------------------------------- */

/* Slightly calmer page rhythm and stronger section separation. */
body{
  background:var(--white);
  color:var(--gray);
}

.section{
  position:relative;
  padding:clamp(88px,9vw,124px) 0;
}

.section + .section{
  border-top:1px solid rgba(17,38,64,.055);
}

.section-alt{
  background:#F4F7FA;
}

.section-head{
  margin-bottom:clamp(42px,5vw,62px);
}

h2{
  max-width:14ch;
  font-size:clamp(36px,4.7vw,54px);
}

.label{
  gap:11px;
  margin-bottom:18px;
  color:#748294;
}

.label::before{
  width:22px;
  height:1px;
  border-radius:0;
}

/* Keep navigation readable over every section. The small transparent state
   only exists while the page is at the very top of the navy hero. */
.navbar.ascend-nav{
  background:rgba(10,27,43,0);
  border-bottom-color:rgba(255,255,255,0);
  transition:background-color .28s var(--ease), border-color .28s var(--ease),
             box-shadow .28s var(--ease), min-height .28s var(--ease);
}

.ascend-nav.is-scrolled,
.ascend-nav.is-solid{
  background:rgba(10,27,43,.97);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:rgba(255,255,255,.09);
  box-shadow:0 8px 28px -24px rgba(0,0,0,.9);
}

.ascend-nav .nav-link{
  position:relative;
  color:#C0CAD5;
}

.ascend-nav .nav-link:not(.nav-cta)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--gold-soft);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s var(--ease);
}

.ascend-nav .nav-link:not(.nav-cta):hover::after,
.ascend-nav .nav-link:not(.nav-cta):focus::after,
.ascend-nav .nav-link:not(.nav-cta).active::after{
  transform:scaleX(1);
}

.ascend-nav .nav-cta{
  border-color:rgba(201,169,106,.58);
  color:var(--gold-soft);
}

.ascend-nav .nav-cta:hover,
.ascend-nav .nav-cta.active{
  background:var(--gold-soft);
  border-color:var(--gold-soft);
  color:var(--navy-deep);
}

/* More deliberate hero composition without changing the content. */
#top{
  position:relative;
  min-height:min(900px,100svh);
  background:var(--navy);
  overflow:hidden;
}

#top::before,
#top::after{
  content:"";
  position:absolute;
  left:50%;
  width:min(860px,72vw);
  height:1px;
  background:rgba(201,169,106,.22);
  transform:translateX(-50%);
  pointer-events:none;
}

#top::before{top:24%}
#top::after{bottom:17%}

#top .container{
  position:relative;
  z-index:1;
  max-width:900px;
}

.hero-logo{
  width:clamp(170px,20vw,226px);
  margin-bottom:38px;
}

.hero-tag{
  max-width:900px;
  margin-inline:auto;
  font-size:clamp(40px,5.8vw,64px);
  line-height:1.03;
}

.hero-sub{
  max-width:48ch;
  margin-top:26px;
  color:#BCC7D3;
}

.hero-btns{
  margin-top:38px;
}

.hero-btns .btn{
  min-width:170px;
  border-radius:999px;
}

/* Brokerage section: preserve the simple list but give it more structure. */
#brokerage .statement{
  max-width:21ch;
}

.points{
  border-left:1px solid var(--line);
  padding-left:clamp(22px,3vw,38px);
}

.point{
  position:relative;
  padding:24px 0;
  border-top-color:var(--line-soft);
}

.point::before{
  content:"";
  position:absolute;
  left:calc(clamp(22px,3vw,38px) * -1 - 3px);
  top:34px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
}

/* Property cards: cleaner edges, stronger image area, subtler motion. */
.listing{
  border-color:#E1E7ED;
  border-radius:18px;
  box-shadow:0 2px 3px rgba(17,38,64,.025), 0 18px 42px -32px rgba(17,38,64,.38);
}

.listing:hover{
  transform:translateY(-4px);
  border-color:#D5DEE7;
  box-shadow:0 4px 10px rgba(17,38,64,.045), 0 30px 58px -34px rgba(17,38,64,.42);
}

.listing .shot{
  background:#F7F9FB;
}

.listing .shot::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--gold);
  opacity:.72;
}

.listing .body{
  padding:26px 28px 24px;
}

.listing h3{
  font-size:24px;
}

.listing .status{
  padding:7px 13px;
  border:1px solid rgba(17,38,64,.08);
  box-shadow:0 8px 24px -18px rgba(17,38,64,.45);
}

.listing-pending{
  padding:14px 28px 16px;
  background:#F8FAFC;
}

/* Give the service area a quiet editorial feel. */
#areas .col-lg-7{
  padding-top:4px;
}

.state-line{
  display:inline-block;
  margin-top:32px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--off);
}

/* Registry feels more like a polished credential card. */
.register{
  position:relative;
  border-color:#DEE5EC;
  border-radius:18px;
  box-shadow:0 18px 50px -38px rgba(17,38,64,.42);
}

.register::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:3px;
  background:var(--gold);
}

.reg-head{
  padding:17px 30px;
  background:#F8FAFC;
}

.entry{
  padding:clamp(32px,4vw,46px) 30px;
}

.fields{
  max-width:600px;
}

/* Contact details and form become two balanced panels. */
#contact .row.g-5{
  --bs-gutter-x:clamp(32px,5vw,64px);
}

#contact dl.mb-0{
  height:100%;
  padding:clamp(24px,3vw,34px);
  border:1px solid var(--line);
  border-radius:18px;
  background:#F8FAFC;
}

#contact-form{
  margin:0;
  padding:clamp(24px,3vw,34px);
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
  box-shadow:0 18px 50px -40px rgba(17,38,64,.42);
}

.form-control,
.form-select{
  min-height:50px;
  border:1px solid #CBD5DF;
  border-radius:10px;
  background:#F6F8FA;
  box-shadow:none;
}

.form-control:hover,
.form-select:hover{
  border-color:#AAB8C6;
  background:#F3F6F8;
}

.form-control:focus,
.form-select:focus{
  background:var(--white);
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(166,129,58,.13);
}

textarea.form-control{
  min-height:140px;
}

#contact-form .btn-gold{
  border-radius:999px;
  min-width:168px;
}

/* Footer: a little more breathing room and a cleaner top edge. */
.site-footer{
  border-top:3px solid var(--gold);
}

.f-links a{
  display:inline-block;
}

@media (max-width:991.98px){
  .navbar.ascend-nav{
    background:rgba(10,27,43,.97);
  }

  #top::before,
  #top::after{
    width:82vw;
  }

  .points{
    border-left:0;
    padding-left:0;
  }

  .point::before{
    display:none;
  }

  #contact dl.mb-0{
    height:auto;
  }
}

@media (max-width:575.98px){
  :root{--nav-h:70px}

  .section{
    padding:72px 0;
  }

  #top{
    min-height:760px;
  }

  #top::before{top:21%}
  #top::after{bottom:14%}

  .hero-logo{
    margin-bottom:30px;
  }

  .hero-btns .btn{
    width:100%;
    max-width:280px;
  }

  .listing .body,
  .listing-pending{
    padding-left:22px;
    padding-right:22px;
  }

  #contact dl.mb-0,
  #contact-form{
    padding:22px;
  }

  .state-line{
    border-radius:10px;
    line-height:1.5;
  }
}