/* ============================================================
   ONE-PAGE LAYER — sits on top of styles.css
   Adds: scroll-spy nav states, section numbering rail,
   scroll progress bar, section rhythm, reveal-on-scroll,
   polish pass for a single continuous landing page.
   ============================================================ */

html{ scroll-padding-top: 96px; }

body{ background: #FBFBFA; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--navy); color:#fff; padding:12px 18px; z-index:200;
  font-family: var(--mono); font-size:0.8rem;
}
.skip-link:focus{ left:16px; top:16px; }

/* Scroll progress bar under the nav */
.scroll-progress{ height:2px; background: var(--line); width:100%; }
.scroll-progress-bar{ height:2px; width:0%; background: var(--brass); transition: width .1s linear; }

/* Nav gains depth once the page has scrolled */
header.site.is-scrolled{ box-shadow: 0 2px 18px rgba(15,29,48,0.08); }

/* Active nav state */
.navlinks a.is-active{ color: var(--navy); }
.navlinks a.is-active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px; background: var(--brass);
}

/* ===== Section color-blocking ===== */
.page-section{ position:relative; }
.page-section:nth-of-type(even){ background: var(--mist); }
.page-section:nth-of-type(even) .mist-bg{ background: transparent; }

.page-section::before{
  content: attr(data-num) " \2014 " attr(data-kicker);
  position:absolute; top:40px; left:32px;
  font-family: var(--mono); font-size:0.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:#9AA7B4; writing-mode: vertical-rl; text-orientation: mixed;
}
@media (max-width: 1280px){
  .page-section::before{ display:none; }
}

/* ===== Hero: give it real presence instead of flat white ===== */
#home .hero{
  padding-top: 64px; padding-bottom: 0;
  position: relative;
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(169,129,46,0.10), transparent 60%),
    linear-gradient(180deg, #F7F5F0 0%, #FBFBFA 55%, #FBFBFA 100%);
  border-bottom: 1px solid var(--line);
}
#home .hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(22,50,79,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22,50,79,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(180deg, black, transparent 70%);
  mask-image: linear-gradient(180deg, black, transparent 70%);
  pointer-events:none;
}
#home .hero .wrap{ position:relative; z-index:1; }
#home .hero-panel{
  background: var(--white);
  box-shadow: 0 18px 40px -18px rgba(15,29,48,0.22), 0 2px 8px rgba(15,29,48,0.05);
  border-color: var(--line);
}

/* Give section-intro blocks (demoted hero headers) breathing room to match hero rhythm */
.section-intro{ padding: 88px 0 8px; }
.section-intro .hero-grid{ align-items:center; }
.section-intro h2{ margin-bottom: 18px; }

/* Landlords section-intro keeps its own panel treatment consistent with hero */
#landlords .section-intro .hero-panel{
  box-shadow: 0 18px 40px -18px rgba(15,29,48,0.18), 0 2px 8px rgba(15,29,48,0.05);
}

/* ===== Stats band: full navy for a strong visual break ===== */
#home .stats{
  background: var(--navy); border-top:none; border-bottom:none;
  border-top: 1px solid rgba(255,255,255,0.08);
}
#home .stats .stat{ border-right-color: rgba(255,255,255,0.12); }
#home .stats .stat .num{ color: var(--brass-lt); }
#home .stats .stat .lbl{ color: #C9D6E2; }

/* ===== Cards: lift off the page instead of sitting flat ===== */
.card{
  box-shadow: 0 1px 2px rgba(15,29,48,0.04);
  border-top: 3px solid transparent;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover{
  border-top-color: var(--brass);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(15,29,48,0.22);
}

/* ===== Tiers: heavier elevation, Standard tier gets a lift treatment ===== */
.tier{ box-shadow: 0 1px 2px rgba(15,29,48,0.04); }
.tier.standard{ box-shadow: 0 18px 36px -18px rgba(22,50,79,0.28); }
.tier.enhanced{ box-shadow: 0 18px 36px -18px rgba(15,29,48,0.4); }

/* ===== Ledger: stronger shadow so it reads as a real document, not a table ===== */
.ledger{ box-shadow: 0 20px 44px -24px rgba(15,29,48,0.28); }

/* ===== Photos: subtle shadow lift ===== */
.photo, .photo-wide{ box-shadow: 0 10px 30px -16px rgba(15,29,48,0.25); }

/* ===== Buttons: slightly heavier primary CTA ===== */
.btn-primary{ box-shadow: 0 8px 20px -10px rgba(22,50,79,0.5); }
.btn-brass{ box-shadow: 0 8px 20px -10px rgba(169,129,46,0.5); }

/* ===== Form panel: lift and richer background ===== */
.form-panel{
  box-shadow: 0 20px 44px -26px rgba(15,29,48,0.25);
  background: var(--white);
  border: 1px solid var(--line);
}

/* ===== Compliance page-section accent: brass tint backdrop behind tier grid ===== */
#compliance{ background: linear-gradient(180deg, var(--brass-tint) 0%, var(--white) 340px); }
#compliance .ledger-head + .ledger-row.head-row{ background: var(--mist); }

/* ===== Table styling with more definition ===== */
table.spec{ box-shadow: 0 1px 2px rgba(15,29,48,0.04); border: 1px solid var(--line); border-radius:4px; overflow:hidden; }
table.spec th{ background: var(--navy); color:#fff; }

/* ===== Footer: subtle top accent line ===== */
footer.site{ position:relative; }
footer.site::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--brass) 0%, var(--brass-lt) 50%, var(--brass) 100%);
}

/* ===== Back-to-top ===== */
.back-to-top{
  position: fixed; right: 28px; bottom: 28px; z-index:60;
  width:44px; height:44px; border-radius:50%; background: var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.85rem;
  opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease;
  border:none; cursor:pointer;
  box-shadow: 0 10px 24px -10px rgba(15,29,48,0.4);
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; }
.back-to-top:hover{ background: var(--navy-2); transform: translateY(-2px); }

/* Content renders immediately — no scroll-triggered visibility, by design,
   so nothing ever depends on JS timing to become visible. */

/* Mobile nav overlay tweak to sit below sticky progress bar */
@media (max-width: 920px){
  html{ scroll-padding-top: 130px; }
  #home .hero::before{ background-size: 28px 28px; }
}