/* page */
:root{
  --page-bg: #f6f6f6;          /* dusty mauve like screenshot */
  --chip: #7E8D7B;             /* soft blue CTA */
  --text: #111;
}

*{box-sizing:border-box}
body{
  background: var(--page-bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
}

/* brand */
.brand .logo-box{
  width: 36px; height: 36px;
  background:#fff;
  border-radius:10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  font-size:18px;
  line-height:1;
}

/* links */
.nav-link{ color: var(--text); opacity:.9 }
.nav-link:hover{ opacity:1 }

/* hero */
.hero-propdoc { background: var(--page-bg); color: var(--text); }
.hero-row { min-height: 420px; } /* keeps presence without forcing huge heights */

/* Right column stack */
.hero-right { min-height: 100%; }

/* Title */
.hero-title{
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .2px;
  font-size: clamp(28px, 4vw, 52px);
  margin-top: 200px;
  text-wrap: balance;
}

/* Card */
.hero-card{
  background: #fff;
  border-radius: 22px;
  padding: clamp(16px, 2.2vw, 26px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* CTA chip */
.btn-chip{
  background: var(--chip);
  border: 0;
  color: #0b3341;
}

/* --- Masked Image --- */
.hero-image-wrap{
  /* Make the image column match text+card height BUT cap it */
  display: flex;
  align-items: stretch;
  width: 100%;

  /* This keeps the image aligned to the full height of the right stack,
     while max-height prevents it from becoming too tall */
  max-height: var(--hero-img-max);
  margin-left: auto;  /* keeps nice spacing on large screens */
}

/* Two-corner mask: round only top-right and bottom-left */
.mask-diagonal{
  border-top-right-radius: 42%;
  border-bottom-left-radius: 42%;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Keep image from distorting */
.mask-diagonal img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Responsive behavior --- */
@media (min-width: 992px){
  /* On desktop, make both columns equal height so tops/bottoms align */
  .hero-row > [class*="col-lg-"]{ display: flex; }
  .hero-right{ justify-content: flex-start; }
  .hero-image-wrap{ height: 100%; } /* stretch to match text+card height but still capped by max */
}

@media (max-width: 991.98px){
  /* On mobile/tablet, let the image size breathe */
  .hero-image-wrap{
    max-height: 420px;         /* smaller cap on mobile */
  }
}

/* CTA */
.btn-chip{
  background: var(--chip);
  border: 0;
  color: #0b3341;
}

/* login button */
.login-btn{ box-shadow: 0 8px 20px rgba(0,0,0,.12) }

/* responsiveness tweaks */
@media (min-width: 992px){
  .display-5{ font-size: 3.2rem } /* push size closer to screenshot on desktop */
}

.workorders{
  background: transparent; /* page bg remains what you have */
}

.wo-panel{
  background:#fff;
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: clamp(18px, 2.5vw, 28px);
}

/* Title */
.wo-title{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-top: 4px;
  font-size: clamp(28px, 3.2vw, 44px); /* matches big headline scale */
}

/* Small cards (3) */
.wo-card{
  width: 100%;
  aspect-ratio: 1 / 1;          /* square like the screenshot */
  max-height: 280px;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) inset;
}
.wom-section { background: #f2f3f2; } /* subtle gray like screenshot */
.wom-surface{
  background:#fff;
  border:1px solid #e5e6e5;
  border-radius:16px;
  padding:28px;
  box-shadow:0 2px 0 rgba(0,0,0,.02) inset;
  font-family: 'Montserrat', sans-serif;
}

/* Title */
.wom-title{
  font-weight:800;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing:.2px;
  margin-left:6px;
}

/* Feature cards */
.wom-card{
  background:#fff;
  border:1px solid #e9eaea;
  border-radius:16px;
  padding:22px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}
.wom-card-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}
.wom-ico{
  font-size:28px;
  color:#2c2c2c;
}
.wom-card-title{
  font-weight:800;
  line-height:1.1;
  font-size:18px;
}
.wom-card-text{
  color:#4a4a4a;
  font-size:14px;
  line-height:1.45;
  margin:0;
}

/* Stats */
.wom-stat-num{
  font-weight:700;
  font-size: clamp(46px, 7vw, 82px);
  line-height:1;
  color:#000;
}
.wom-stat-label{
  font-weight:700;
  margin-top:4px;
}
.wom-stat-note{
  margin:6px 0 0;
  font-size:14px;
  color:#555;
}

/* CTA */
.wom-btn{
  background:#7b8f7a;           /* muted green/gray like screenshot */
  color:#fff;
  text-decoration:none;
  padding:12px 22px;
  border-radius:15px;           /* rectangle with 15px corners */
  font-weight:700;
  display:inline-block;
}
.wom-btn:hover{ color:#fff; opacity:.9; }

/* Right image card */
.wom-image-card{
  background:#f3f6f9;
  border:1px solid #e6e8ea;
  border-radius:14px;
  height:100%;
  width: 200px;
  display:flex;
}
.wom-image-card img {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
  max-height: 520px;  /* adjust this value to match screenshot */
}
/* Keep whitespace under the three cards to replicate the big empty area */
.wo-spacer{ height: 280px; }

/* Tall image card on the right */
.wo-image-wrap{
  background:#f8fafc;
  border: 1px solid #e9e9e9;
  border-radius: 16px;
  overflow: hidden;
  height: 640px;          /* tall like screenshot */
  display: flex;
  align-items: stretch;
}
.wo-image-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fills while preserving the look */
}

/* Desktop ratio tuning */
@media (min-width: 992px){
  .wo-panel{ padding: 28px 32px; }
  .wo-card{ max-height: 260px; }
  .wo-spacer{ height: 320px; }  /* keeps overall panel height balanced with image */
}

/* XL screens – match the wide screenshot proportions */
@media (min-width: 1400px){
  .wo-image-wrap{ height: 660px; }
  .wo-card{ max-height: 280px; }
  .wo-spacer{ height: 340px; }
}

/* Image + Text Section */
.image-text-section {
  background: #f9f9f9; /* match CPA section background */
}

.its-card {
  border-radius: 14px;
  overflow: hidden;
  background: white;
  border: 1px solid #ececec;
}

.its-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Montserrat everywhere (if not already added) */
body { font-family: 'Montserrat', sans-serif; }

/* Section */
.features-roles { background: #f5f7f8; }

/* Accent word in header */
.text-accent { color: #7a9a82; } /* soft sage green */

/* Big portal cards */
.portal-card {
  border-radius: 12px;
  background: #ffffff;
}

/* Images inside portal cards */
.portal-image img.object-cover {
  object-fit: cover;
}
.rounded-left { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.rounded-right { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

/* Tenant info chips */
.info-chip{
  background: #eaf6ff;
  border: 2px solid #b9d7f3;
  border-radius: 12px;
  padding: 12px 14px;
}
.chip-title{ font-weight:700; }
.chip-sub{ font-size:.95rem; color:#506070; }

/* Buttons */
.btn-tenant{
  background:#bcd4e8;
  color:#1e2d3a;
  border: 0;
}
.btn-landlord{
  background:#d8c9b5;
  color:#3b3327;
  border: 0;
}

/* Mini feature cards */
.mini-card{
  background:#fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
}
.mini-thumb{
  width: 100%;
  height: 116px;
  object-fit: cover;
  display:block;
}
.mini-body{ padding: 10px 12px 12px; }
.mini-title{ font-weight:700; font-size:.95rem; margin-bottom:6px; }
.mini-text{ font-size:.86rem; color:#52606b; }

/* Small visual polish */
.portal-card .p-3, .portal-card .p-lg-4 { padding-bottom: 1rem !important; }

.owner-card { border-radius: 14px; background:#fff; }

/* Grid with medium tile spanning two rows */
.owner-grid{
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr; /* medium | small | small */
  grid-auto-rows: 1fr;                  /* equal row heights for small tiles */
  gap: 16px;
}

/* Medium card */
.owner-medium{
  grid-row: span 2;
  border-radius: 14px;
  overflow: hidden;
  background:#fff;
  border: 1px solid #e9ecef;
}
.owner-medium-img{
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

/* Small cards (text-only) */
.owner-small{
  border-radius: 14px;
  background:#fff;
  border: 1px solid #e9ecef;
  display:flex;
}
.owner-small-body{
  padding: 16px;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight: 500;
}

/* Text styles reused from earlier mini cards */
.mini-title{ font-weight:700; font-size:.95rem; }
.mini-text{ font-size:.86rem; color:#52606b; }

/* Button (muted purple like screenshot) */
.btn-owner{
  background:#b88abc;
  color:#fff;
  border:0;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

/* Subtle tiny shadow like other chips */
.shadow-xs{ box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* Image rounding helpers */
.rounded-left { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
.object-cover { object-fit: cover; }

/* Responsive: stack grid on tablets/phones */
@media (max-width: 991.98px){
  .owner-grid{
    grid-template-columns: 1fr;   /* stack */
  }
  .owner-medium{ grid-row: auto; }
}

/* ========== Dashboard (Layered) ========== */
.dashboard-section{ background:#f5f6f7; } /* subtle page gray */
.py-6{ padding-block: clamp(2.5rem, 6vw, 5rem); }

.dash-stage{
  position: relative;
  min-height: 560px;         /* room for overlaps */
}

/* Back Title Card */
.dash-title{
  position: relative;
  margin-inline: auto;
  width: min(760px, 92%);
  border-radius: 14px;
  background:#fff;
}
.dash-heading{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(32px, 5.6vw, 68px);
  padding: clamp(10px, 2vw, 16px) clamp(8px, 2vw, 16px);
}
.dash-heading span{ color:#6e8f77; } /* sage accent */

/* Historical Financials (elongated width) */
.dash-historical{
  position: relative;
  width: min(980px, 94%);
  height: min(250px);
  margin: clamp(28px, 5vw, 44px) auto 0;  /* sits under title card */
  border-radius: 14px;
  bottom: 50px;
  overflow: hidden;
  background:#fff;
  z-index: 2;
}

/* YoY graph – bottom-left overlap */
.dash-yoy {
  position: absolute;
  left: calc(max(1.5rem, 4%) + 200px); /* moved 50px right */
  bottom: calc(max(-26px, -2.0vw) - 70px); /* moved 50px lower */
  width: min(520px, 46%);
  height: min(300px, 40vw);
  border-radius: 12px;
  overflow: hidden;
  z-index: 3;
  background: #fff;
}

/* IRR calculator – top-right overlap */
.dash-irr {
  position: absolute;
  right: calc(max(1.2rem, 3.5%) + 50px); /* moved 50px left */
  top: calc(clamp(90px, 13vw, 160px) + 150px); /* moved 50px lower */
  width: min(520px, 46%);
  height: min(300px, 46vw);
  border-radius: 12px;
  overflow: hidden;
  z-index: 4;
  background: #fff;
}

/* Helpers */
.object-fit-cover{ object-fit: cover; }

/* Responsiveness */
@media (max-width: 991.98px){
  .dash-stage{ min-height: 880px; }
  .dash-yoy{
    position: relative;
    left: 0; bottom: 0;
    width: min(720px, 96%);
    height: auto;
    margin: 16px auto 0;
  }
  .dash-irr{
    position: relative;
    right: 0; top: 0;
    width: min(720px, 96%);
    height: auto;
    margin: 16px auto 0;
  }
}

.dash-insights{
  background: transparent;
  margin-top: 100px;
  color: #0e2230;
}

.insights-title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(15px, 4vw, 25.8px); /* 20% smaller */
  letter-spacing: 0.2px;
}

.insights-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 20px 30px; /* row-gap col-gap */
}

.insight {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  gap: 12px;
}

.insight-ico {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(14, 34, 48, .25);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
}

.insights-list .insight span:last-child {
  font-size: clamp(12.8px, 1.12vw, 16px);
  line-height: 1.45;
}

.insights-closer {
  margin-top: 8px;
  font-size: clamp(12.8px, 1.28vw, 17.6px);
  width: 100%;
}

.btn-accent-rect {
  background-color: #6f8f7a;  /* your accent green */
  color: #fff;
  border: none;
  border-radius: 15px;        /* rectangle with slightly rounded corners */
  padding: 0.6rem 1.2rem;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

.btn-accent {
  background-color: #6f8f7a;   /* your accent green */
  color: #fff;
  border: none;
}
.btn-accent:hover {
  background-color: #5d7766;
  color: #fff;
}


/* Section background */
.hap-section { background:#f3f4f3; /* page gray like mock */ }

/* Big surface card */
.hap-surface{
  background:#fff;
  border:1px solid #e6e7e6;
  border-radius:16px;
  padding:28px 24px 24px;
  box-shadow:0 2px 0 rgba(0,0,0,.02) inset;
  font-family:'Montserrat',sans-serif;
}

/* Title + subtitle */
.hap-title{
  font-weight:800;
  font-size: clamp(28px, 3.4vw, 44px);
  color:#6e8f77; /* sage accent like mock */
  text-align:center;
}
.hap-subtitle{
  font-size: clamp(18px, 2vw, 26px);
  text-align:center;
  margin-bottom: 28px !important;
}

/* Card shells */
.hap-card{
  border:1px solid #ffffff;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}
.hap-card .card-body{ padding:18px 20px; }

/* Equal-sized info cards */
.hap-info{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height: var(--hap-info-h, 172px); /* same height for both info cards */
}

/* Equal-sized image placeholders */
.hap-media{
  width:100%;
  height: var(--hap-media-h, 172px);    /* same height for both media */
  border-radius:10px;
  background:#eef1f3;
  
}

/* subtle glossy overlay like screenshot */
.placeholder-gloss{
  position:relative;
}
.placeholder-gloss::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  border-radius:10px;
  pointer-events:none;
}

/* Bottom CTA button (rectangle with 15px radius) */
.hap-btn{
  background:#7b8f7a;
  color:#fff;
  border:none;
  border-radius:15px;
  font-weight:700;
}
.hap-btn:hover{ color:#fff; opacity:.9; }

.hap-media-img{
  display:block;
  width:100%;
  height: var(--hap-media-h, 172px); /* same as info-card height */
  object-fit: cover;                 /* crops neatly if aspect differs */
  border-radius:10px;
  border:1px solid #e2e5e7;
}

/* (Optional) if you want the info cards to match exactly */
.hap-info{
  min-height: var(--hap-media-h, 172px);
  display:flex; align-items:center;
}