:root{
  --front-porch:#FAFAF6;
  --yard-green:#3E6B45;
  --porch-cream:#FFFDF7;
  --key-brass:#C9A85A;
  --brick-dust:#C77E5A;
  --sage-ink:#262B24;
  --rent-grey:#8B9288;
  --hairline:#E3E6DA;
  --deep-sage:#1E2820;
  --mint:#DCE7D8;
  --white:#FFFFFF;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--sage-ink);
  background-color:var(--front-porch);
  overflow-x:hidden;
}

.bodywrap{
  width:100%;
}

a{
  color:var(--yard-green);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

img{
  max-width:100%;
}

/* ==================== NAVIGATION : PICKET-RAIL NAV ==================== */
.picketrail-nav{
  position:sticky;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  background-color:var(--porch-cream);
  box-shadow:0 2px 10px rgba(38,43,36,0.06);
}

.picket-strip{
  width:100%;
  height:12px;
  background-color:var(--porch-cream);
  border-bottom:1px solid var(--yard-green);
  position:relative;
  overflow:hidden;
}

.picket-strip::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background-image:repeating-linear-gradient(
    90deg,
    var(--white) 0 18px,
    transparent 18px 30px,
    var(--white) 30px 48px
  );
  opacity:1;
}

.picket-strip::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:6px;
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0 14px,
    var(--sage-ink) 14px 18px,
    transparent 18px 34px,
    var(--sage-ink) 34px 38px
  );
  filter: saturate(0.22);
}

.nav-row{
  max-width:1200px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}

.brand-link{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:21px;
  letter-spacing:0.12em;
  color:var(--sage-ink);
  text-transform:uppercase;
}

.brand-link:hover{
  text-decoration:none;
}

.key-glyph{
  width:18px;
  height:18px;
  display:inline-block;
  position:relative;
}

.key-glyph::before{
  content:"";
  position:absolute;
  left:0;
  top:4px;
  width:12px;
  height:8px;
  border:2px solid var(--key-brass);
  border-radius:50% 50% 0 0;
  border-bottom:none;
}

.key-glyph::after{
  content:"";
  position:absolute;
  left:14px;
  top:6px;
  width:3px;
  height:8px;
  background-color:var(--key-brass);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
  flex-wrap:wrap;
}

.nav-links li{
  display:flex;
  align-items:center;
  gap:6px;
}

.nav-links li::after{
  content:"";
  width:5px;
  height:5px;
  background-color:var(--brick-dust);
  border-radius:50%;
  display:inline-block;
}

.nav-links li:last-child::after{
  display:none;
}

.nav-links a{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--sage-ink);
  font-weight:600;
  padding:6px 2px;
  position:relative;
}

.nav-links a:hover{
  color:var(--yard-green);
  text-decoration:none;
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background-color:var(--yard-green);
  transition:width 0.3s ease;
}

.nav-links a:hover::after{
  width:100%;
}

.menu-toggle{
  display:none;
  background:none;
  border:1px solid var(--hairline);
  color:var(--sage-ink);
  font-size:24px;
  padding:4px 12px;
  border-radius:6px;
  cursor:pointer;
  background-color:var(--porch-cream);
}

/* ==================== HERO : FRONT-PORCH HERO ==================== */
.porch-hero{
  width:100%;
  padding:72px 24px 88px;
  background-color:var(--front-porch);
}

.hero-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:48px;
  flex-wrap:wrap;
}

.hero-text{
  flex:1.1;
  flex-basis:440px;
  text-align:left;
}

.eyebrow-chip{
  display:inline-block;
  background-color:var(--yard-green);
  color:var(--porch-cream);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:8px 16px;
  border-radius:30px;
  font-weight:700;
  margin-bottom:22px;
}

.hero-title{
  font-size:50px;
  line-height:1.12;
  font-weight:800;
  color:var(--sage-ink);
  letter-spacing:-0.01em;
  margin-bottom:24px;
}

.hero-title .accent{
  color:var(--yard-green);
}

.hero-sub{
  font-size:17px;
  color:var(--rent-grey);
  max-width:520px;
  margin-bottom:32px;
}

.hero-ctas{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.04em;
  padding:13px 26px;
  border-radius:6px;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  cursor:pointer;
}

.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  background-color:var(--yard-green);
  color:var(--porch-cream);
}

.btn-primary:hover{
  text-decoration:none;
  box-shadow:0 8px 18px rgba(62,107,69,0.25);
}

.btn-outline{
  border:1px solid var(--yard-green);
  color:var(--yard-green);
  background-color:transparent;
}

.btn-outline:hover{
  text-decoration:none;
  background-color:#EEF3EC;
}

/* House facade */
.hero-facade{
  flex:0.9;
  flex-basis:360px;
  position:relative;
  min-height:460px;
}

/* Shrub in planter */
.shrub-planters{
  display:flex;
  justify-content:center;
  gap:30px;
  margin-bottom:14px;
}

.shrub-planter{
  width:74px;
  text-align:center;
}

.shrub{
  width:60px;
  height:28px;
  margin:0 auto;
  background-color:var(--yard-green);
  border-radius:50% 50% 30% 30%;
  position:relative;
}

.shrub::before{
  content:"";
  position:absolute;
  left:-12px;
  bottom:0;
  width:48px;
  height:18px;
  background-color:var(--yard-green);
  border-radius:50%;
  filter: saturate(0.75);
}

.planter{
  width:70px;
  height:22px;
  background-color:var(--brick-dust);
  border-radius:3px;
  margin:0 auto;
  position:relative;
}

.planter::before{
  content:"";
  position:absolute;
  top:-6px;
  left:0;
  width:70px;
  height:8px;
  background-color:var(--brick-dust);
  border-radius:50%;
}

/* House body */
.house{
  width:280px;
  margin:0 auto;
  position:relative;
}

.roof{
  width:0;
  height:0;
  border-left:150px solid transparent;
  border-right:150px solid transparent;
  border-bottom:72px solid var(--yard-green);
  margin:0 auto;
  position:relative;
}

.chimney{
  position:absolute;
  top:-40px;
  right:-56px;
  width:26px;
  height:54px;
  background-color:var(--brick-dust);
  border-radius:2px;
}

.house-body{
  width:280px;
  height:150px;
  background-color:var(--porch-cream);
  border:1px solid var(--hairline);
  position:relative;
}

.home-window{
  position:absolute;
  top:26px;
  left:24px;
  width:76px;
  height:66px;
  background-color:var(--key-brass);
  border:5px solid var(--white);
  border-radius:3px;
}

.home-window::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:3px;
  height:100%;
  background-color:var(--white);
  transform:translateX(-50%);
}

.home-window::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:3px;
  background-color:var(--white);
  transform:translateY(-50%);
}

.flower-box{
  position:absolute;
  bottom:-14px;
  left:-3px;
  width:82px;
  height:14px;
  background-color:var(--brick-dust);
  border-radius:2px;
}

.flower-box::before{
  content:"";
  position:absolute;
  top:-8px;
  left:6px;
  width:10px;
  height:10px;
  background-color:var(--brick-dust);
  border-radius:50%;
  box-shadow:22px -4px 0 -2px var(--brick-dust), 46px 0 0 -1px var(--brick-dust), 14px -2px 0 -1px var(--brick-dust), 36px -2px 0 -2px var(--brick-dust);
}

.home-door{
  position:absolute;
  top:42px;
  right:48px;
  width:46px;
  height:108px;
  background-color:var(--brick-dust);
  border:3px solid var(--white);
  border-radius:3px 3px 0 0;
}

.porch-lamp{
  position:absolute;
  top:40px;
  right:4px;
  width:14px;
  height:16px;
  background-color:var(--key-brass);
  border-radius:2px;
}

.mail-slot{
  position:absolute;
  top:52px;
  right:58px;
  width:20px;
  height:4px;
  background-color:var(--sage-ink);
  border-radius:2px;
}

/* Mailbox on post */
.mailbox-post{
  position:absolute;
  left:16px;
  bottom:-46px;
  text-align:center;
  width:70px;
}

.mailbox{
  width:58px;
  height:30px;
  background-color:var(--yard-green);
  border-radius:8px 8px 3px 3px;
  position:relative;
  margin:0 auto;
}

.mailbox::before{
  content:"";
  position:absolute;
  left:6px;
  top:6px;
  width:30px;
  height:12px;
  background-color:var(--sage-ink);
  border-radius:2px;
}

.mailbox::after{
  content:"";
  position:absolute;
  right:12px;
  top:-14px;
  width:4px;
  height:14px;
  background-color:var(--key-brass);
  border-radius:2px;
  transform:rotate(-15deg);
}

.mail-flag-up{
  position:absolute;
  right:-14px;
  top:-12px;
  width:4px;
  height:26px;
  background-color:var(--key-brass);
  border-radius:2px;
}

.mail-flag-up::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:14px;
  height:9px;
  background-color:var(--brick-dust);
  border-radius:2px;
}

.mailbox-post::before{
  content:"";
  display:block;
  width:8px;
  height:52px;
  background-color:var(--brick-dust);
  margin:4px auto 0;
  border-radius:2px;
}

.mailbox-base{
  width:26px;
  height:5px;
  background-color:var(--brick-dust);
  margin:0 auto;
  border-radius:2px;
}

/* FOR RENT board */
.for-rent{
  position:absolute;
  right:30px;
  bottom:-70px;
  width:96px;
  text-align:center;
}

.for-rent-btn{
  width:66px;
  margin:0 auto;
  position:relative;
  background:none;
  border:none;
}

.for-rent-btn::before{
  content:"";
  display:block;
  width:62px;
  height:44px;
  background-color:var(--porch-cream);
  border:2px solid var(--yard-green);
  border-radius:5px;
  margin:0 auto;
}

.for-rent-btn::after{
  content:"RENT";
  position:absolute;
  top:12px;
  left:0;
  width:62px;
  text-align:center;
  font-size:15px;
  font-weight:800;
  letter-spacing:0.08em;
  color:var(--sage-ink);
}

.for-rent-post{
  width:6px;
  height:38px;
  background-color:var(--brick-dust);
  margin:0 auto;
}

.for-rent-tag{
  display:inline-block;
  background-color:var(--key-brass);
  color:var(--sage-ink);
  font-size:9px;
  letter-spacing:0.08em;
  font-weight:700;
  padding:2px 8px;
  border-radius:3px;
  text-transform:uppercase;
  margin-top:2px;
}

/* Handrail */
.handrail{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:46px;
  background-color:transparent;
}

.handrail-rail{
  position:absolute;
  bottom:26px;
  left:0;
  width:100%;
  height:4px;
  background-color:var(--sage-ink);
}

.handrail-pickets{
  position:absolute;
  bottom:30px;
  left:0;
  width:100%;
  height:18px;
  background-image:repeating-linear-gradient(
    90deg,
    var(--white) 0 14px,
    transparent 14px 22px
  );
  border-bottom:2px solid var(--sage-ink);
}

/* Stepping stones path */
.step-path{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-148px;
  display:flex;
  gap:16px;
  align-items:center;
}

.step{
  width:40px;
  height:16px;
  background-color:var(--brick-dust);
  border-radius:4px;
  transform:rotate(-4deg);
}

.step:nth-child(2){
  transform:rotate(3deg) translateY(-4px);
}

.step:nth-child(3){
  transform:rotate(-2deg);
}

/* Sprinkler arc */
.sprinkler{
  position:absolute;
  left:20%;
  bottom:-44px;
  width:60px;
  text-align:center;
}

.sprinkler-head{
  width:26px;
  height:14px;
  background-color:var(--rent-grey);
  border-radius:3px;
  margin:0 auto;
  position:relative;
}

.sprinkler-arc{
  position:absolute;
  top:-30px;
  left:6px;
  width:48px;
  height:30px;
  border-left:3px dashed var(--key-brass);
  border-top:3px dashed var(--key-brass);
  border-right:3px dashed transparent;
  transform:rotate(12deg);
  border-radius:50% 20% 0 0;
}

/* ==================== LEASE-LINE ROWS ==================== */
.leaseline-rows{
  width:100%;
  padding:72px 24px;
  background-color:var(--front-porch);
}

.lease-inner{
  max-width:1080px;
  margin:0 auto;
}

.section-head{
  margin-bottom:38px;
}

.section-head h2{
  font-size:36px;
  color:var(--yard-green);
  font-weight:800;
  letter-spacing:-0.01em;
  margin-bottom:8px;
}

.section-head p{
  color:var(--rent-grey);
  font-size:16px;
  max-width:640px;
}

.lease-row{
  display:flex;
  align-items:center;
  gap:24px;
  background-color:var(--porch-cream);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:24px 26px;
  margin-bottom:12px;
  transition:box-shadow 0.25s ease, transform 0.25s ease;
}

.lease-row:hover{
  box-shadow:0 6px 20px rgba(38,43,36,0.08);
  transform:translateY(-2px);
}

.unit-plaque{
  flex:0 0 auto;
  width:86px;
  height:86px;
  background-color:var(--sage-ink);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--porch-cream);
  font-family:"Courier New",monospace;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.1em;
  text-align:center;
  line-height:1.3;
}

.lease-body{
  flex:1;
}

.lease-body h3{
  font-size:22px;
  color:var(--sage-ink);
  margin-bottom:8px;
  font-weight:800;
}

.lease-body p{
  color:var(--rent-grey);
  font-size:15px;
}

.status-stamp{
  flex:0 0 auto;
  border:2px solid var(--brick-dust);
  color:var(--brick-dust);
  font-size:13px;
  letter-spacing:0.18em;
  font-weight:700;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:6px;
  transform:rotate(-6deg);
  display:inline-block;
  white-space:nowrap;
}

/* ==================== PORTFOLIO METRIC BAND ==================== */
.metric-band{
  width:100%;
  background-color:var(--yard-green);
  padding:64px 24px;
}

.metric-inner{
  max-width:1080px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-around;
  flex-wrap:wrap;
  gap:0;
}

.metric-item{
  flex:1;
  min-width:200px;
  text-align:center;
  padding:10px 20px;
  position:relative;
}

.metric-item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:20%;
  bottom:20%;
  width:1px;
  background-color:var(--mint);
  filter: saturate(0.65);
}

.metric-num{
  font-size:50px;
  font-weight:800;
  color:var(--porch-cream);
  font-family:"Segoe UI",Arial,sans-serif;
  margin-bottom:8px;
}

.metric-label{
  color:var(--mint);
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}

/* ==================== STATEMENT BAND ==================== */
.statement-band{
  width:100%;
  background-color:var(--porch-cream);
  padding:72px 24px;
}

.statement-inner{
  max-width:840px;
  margin:0 auto;
  text-align:center;
}

.statement-quote{
  font-size:28px;
  line-height:1.5;
  color:var(--sage-ink);
  font-weight:600;
  padding-left:24px;
  border-left:4px solid var(--key-brass);
  text-align:left;
  max-width:760px;
  margin:0 auto 18px;
}

.statement-attrib{
  color:var(--rent-grey);
  font-size:15px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
}

/* ==================== CTA BAND ==================== */
.cta-band{
  width:100%;
  background-color:var(--front-porch);
  padding:72px 24px 84px;
}

.cta-inner{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

.cta-inner h2{
  font-size:36px;
  color:var(--yard-green);
  font-weight:800;
  margin-bottom:14px;
}

.cta-inner p{
  color:var(--rent-grey);
  font-size:17px;
  margin-bottom:30px;
}

/* ==================== FOOTER : MAILBOX-POST FOOTER ==================== */
.mailboxpost-footer{
  width:100%;
  background-color:var(--deep-sage);
  color:var(--porch-cream);
  position:relative;
  z-index:1;
}

.fence-top{
  width:100%;
  height:14px;
  background-color:var(--deep-sage);
  border-bottom:1px solid var(--yard-green);
  position:relative;
  overflow:hidden;
}

.fence-top::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:10px;
  background-image:repeating-linear-gradient(
    90deg,
    var(--white) 0 16px,
    transparent 16px 28px,
    var(--white) 28px 46px
  );
}

.footer-inner{
  max-width:1080px;
  margin:0 auto;
  padding:52px 24px 34px;
  text-align:center;
  position:relative;
  z-index:1;
}

.footer-wordmark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:22px;
  font-weight:800;
  letter-spacing:0.12em;
  color:var(--porch-cream);
  margin-bottom:22px;
}

.footer-wordmark .key-glyph::before{
  border-color:var(--key-brass);
}

.footer-wordmark .key-glyph::after{
  background-color:var(--key-brass);
}

.footer-links{
  list-style:none;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:28px;
}

.footer-links a{
  color:var(--porch-cream);
  font-size:14px;
  letter-spacing:0.06em;
}

.footer-links a:hover{
  color:var(--key-brass);
}

.footer-links li::after{
  content:"";
}

.footer-mailbox-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  margin-bottom:26px;
}

.shrub-dot{
  width:10px;
  height:10px;
  background-color:var(--yard-green);
  border-radius:50%;
  box-shadow:0 -4px 0 -1px var(--yard-green);
}

.fb-mailbox{
  position:relative;
  width:72px;
  height:40px;
  background-color:var(--porch-cream);
  border:2px solid var(--yard-green);
  border-radius:8px 8px 3px 3px;
}

.fb-mailbox::before{
  content:"";
  position:absolute;
  left:8px;
  top:7px;
  width:40px;
  height:14px;
  background-color:var(--brick-dust);
  border-radius:2px;
}

.mb-post{
  width:6px;
  height:22px;
  background-color:var(--brick-dust);
  margin:0 auto;
}

.mb-flag{
  position:absolute;
  right:-10px;
  top:-8px;
  width:3px;
  height:20px;
  background-color:var(--key-brass);
}

.mb-flag::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:11px;
  height:8px;
  background-color:var(--key-brass);
  border-radius:2px;
}

.footer-legal-line{
  color:var(--rent-grey);
  font-size:14px;
  line-height:1.8;
  border-top:1px solid #3A4438;
  padding-top:22px;
}

.footer-legal-line a{
  color:var(--key-brass);
}

/* ==================== SCROLL REVEAL ==================== */
.fade-up{
  opacity:1;
  transform:none;
  transform-origin:center;
  transition:opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible{
  opacity:1;
  transform:none;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width:900px){
  .hero-inner{
    flex-direction:column;
    text-align:center;
  }

  .hero-text{
    text-align:center;
  }

  .hero-sub{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-ctas{
    justify-content:center;
  }

  .lease-row{
    flex-direction:column;
    text-align:center;
    align-items:center;
  }

  .lease-body{
    text-align:center;
  }

  .status-stamp{
    margin-top:6px;
  }

  .metric-item:not(:last-child)::after{
    display:none;
  }
}

@media (max-width:680px){
  .nav-row{
    flex-wrap:wrap;
  }

  .menu-toggle{
    display:block;
  }

  .nav-links{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    background-color:var(--porch-cream);
    padding:12px 0;
    border-top:1px solid var(--hairline);
  }

  .nav-links.open{
    display:flex;
  }

  .nav-links li{
    flex-direction:column;
  }

  .nav-links li::after{
    display:none;
  }

  .nav-links a{
    padding:12px 20px;
    display:block;
  }

  .hero-title{
    font-size:36px;
  }

  .statement-quote{
    font-size:22px;
  }

  .metric-num{
    font-size:38px;
  }
}

@media (prefers-reduced-motion:reduce){
  *{
    transition:none !important;
  }
}