/* ============================================
   LANDSCAPING & OUTDOOR LIVING PAGE — extends styles.css
   Reuses: header, footer, hero, trust-bar, buttons,
   intro, feature-grid, process-full, type-grid/type-card,
   fp-* case study, faq, related, final-cta, service-card.
   Only NEW components unique to this page live here.
============================================ */

/* ===== CONVERSION HERO ===== */
.landscape-hero{min-height:790px;}
.landscape-hero .hero-scrim{background:linear-gradient(90deg, rgba(5,14,29,.93) 0%, rgba(5,14,29,.8) 48%, rgba(5,14,29,.48) 100%);}
.landscape-hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(370px,.72fr); gap:68px; align-items:center; width:100%; padding:54px 32px;}
.landscape-hero-copy{padding-top:6px;}
.landscape-hero .hero-eyebrow{display:inline-flex; align-items:center; padding:8px 13px; margin-bottom:18px; border:1px solid rgba(154,170,138,.42); border-radius:30px; background:rgba(8,20,38,.48); color:var(--sky); font:700 11px/1 'Manrope',sans-serif; letter-spacing:.1em; text-transform:uppercase;}
.landscape-hero h1{font-size:56px; max-width:690px; margin-bottom:22px;}
.landscape-hero-copy > p{max-width:620px; margin-bottom:24px; font-size:16px; line-height:1.72;}
.hero-proof{display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:30px;}
.hero-proof span{display:flex; align-items:center; gap:7px; color:#f4f1e9; font-size:12.5px; font-weight:600;}
.hero-proof .icon{width:15px; height:15px; color:var(--sky); stroke-width:2.4;}
.landscape-hero .hero-ctas{margin-bottom:0;}

.landscape-quote-panel{scroll-margin-top:92px; background:#fff; border:1px solid rgba(255,255,255,.48); border-radius:10px; box-shadow:0 24px 70px rgba(0,0,0,.34); padding:31px; position:relative; overflow:hidden;}
.landscape-quote-panel::before{content:''; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--sky),#cbd5c0);}
.quote-panel-top{margin-bottom:20px;}
.quote-panel-top .quote-kicker{display:block; color:var(--sky-dark); font:800 10.5px/1 'Manrope',sans-serif; letter-spacing:.09em; text-transform:uppercase; margin-bottom:10px;}
.landscape-quote-panel h2{font-size:25px; margin-bottom:8px; color:var(--navy);}
.landscape-quote-panel .quote-panel-top p{color:var(--grey); max-width:none; font-size:13px; line-height:1.55; margin:0;}
.landscape-quote-panel form{display:flex; flex-direction:column;}
.landscape-quote-panel label{font-size:11.5px; font-weight:700; color:var(--navy); margin:0 0 6px;}
.landscape-quote-panel label span{font-weight:500; color:var(--grey-light);}
.landscape-quote-panel input,.landscape-quote-panel select,.landscape-quote-panel textarea{padding:11px 12px; margin-bottom:12px; background:#f8fafc; font-size:13px;}
.landscape-quote-panel textarea{min-height:64px;}
.quote-form-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.quote-form-row > div{display:flex; flex-direction:column;}
.landscape-quote-panel .btn{justify-content:center; width:100%; padding:14px 18px; margin-top:2px;}
.landscape-quote-panel small{display:block; color:var(--grey-light); text-align:center; font-size:10.5px; line-height:1.45; margin-top:10px;}

/* ===== SERVICES (6-up premium cards) ===== */
.services-landscaping{padding:100px 0; background:var(--cream);}
.services-landscaping .service-grid{gap:24px;}
.services-landscaping .service-card{height:360px;}

/* ===== PROJECT INVESTMENT GUIDE ===== */
.landscape-investment{padding:104px 0; background:var(--white);}
.investment-intro{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,.7fr); gap:70px; align-items:end; margin-bottom:48px;}
.investment-intro .eyebrow{justify-content:flex-start;}
.investment-intro h2{font-size:34px; max-width:640px;}
.investment-intro > p{color:var(--grey); font-size:14.5px; line-height:1.75; max-width:520px;}
.budget-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;}
.budget-card{position:relative; padding:35px 30px; border:1px solid var(--line); border-radius:10px; background:var(--cream); box-shadow:var(--shadow-sm);}
.budget-card.featured{background:var(--navy); border-color:var(--navy); box-shadow:var(--shadow-lift); transform:translateY(-8px);}
.budget-label{display:block; min-height:28px; color:var(--sky-dark); font:800 10.5px/1.25 'Manrope',sans-serif; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px;}
.budget-card.featured .budget-label{color:var(--sky);}
.budget-card h3{font-size:27px; margin-bottom:14px;}
.budget-card.featured h3{color:#fff;}
.budget-card > p{color:var(--grey); font-size:13px; line-height:1.65; min-height:66px; margin-bottom:22px;}
.budget-card.featured > p{color:#c5d0e2;}
.budget-card ul{display:flex; flex-direction:column; gap:10px; padding-top:19px; border-top:1px solid var(--line);}
.budget-card.featured ul{border-color:rgba(255,255,255,.12);}
.budget-card li{position:relative; padding-left:17px; color:var(--grey); font-size:12.5px; line-height:1.5;}
.budget-card li::before{content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--sky-dark);}
.budget-card.featured li{color:#dbe4f2;}
.budget-card.featured li::before{background:var(--sky);}
.budget-badge{position:absolute; top:-14px; right:24px; padding:8px 14px; border-radius:24px; background:var(--sky); color:var(--navy); font:800 10px/1 'Manrope',sans-serif; letter-spacing:.06em; text-transform:uppercase;}
.investment-note{display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:36px; padding:22px 25px; border-left:4px solid var(--sky); background:var(--cream); border-radius:0 var(--r-md) var(--r-md) 0;}
.investment-note p{color:var(--grey); font-size:12.5px; line-height:1.6; max-width:780px;}
.investment-note strong{color:var(--navy);}
.investment-note .btn{flex-shrink:0;}

/* ===== MASONRY GALLERY (Featured Transformations) ===== */
.gallery{padding:100px 0; background:var(--white);}
.gallery-masonry{column-count:3; column-gap:24px;}
.gallery-item{
  break-inside:avoid; margin-bottom:24px; border-radius:var(--r-md); overflow:hidden; background:#fff;
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.gallery-item:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.gallery-image{overflow:hidden;}
.gallery-image .ph{transition:transform .5s var(--ease);}
.gallery-item:hover .gallery-image .ph{transform:scale(1.06);}
.gallery-image.h-tall .ph{height:400px;}
.gallery-image.h-mid .ph{height:300px;}
.gallery-image.h-short .ph{height:230px;}
.gallery-body{padding:22px 24px 26px;}
.gallery-body h4{font-size:16px; margin-bottom:8px; letter-spacing:-0.005em;}
.gallery-loc{font-size:12px; color:var(--grey-light); margin-bottom:10px; display:flex; align-items:center; gap:6px; font-weight:600;}
.gallery-loc .icon{width:13px; height:13px;}
.gallery-body p.desc{font-size:13.5px; color:var(--grey); margin-bottom:14px; line-height:1.6;}
.gallery-body .view-link{font-size:12px; font-weight:700; color:var(--sky-dark); text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:6px; transition:gap .3s var(--ease);}
.gallery-body .view-link:hover{gap:10px;}
.gallery-body .view-link .icon{width:13px; height:13px;}

/* ===== WHY HOMEOWNERS CHOOSE GLANVILLE (quality rows) ===== */
.quality{padding:104px 0; background:var(--white);}
.quality-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;}
.quality-image{border-radius:var(--r-md); overflow:hidden; height:520px; box-shadow:var(--shadow-md);}
.quality-image .ph{height:100%;}
.quality-content .eyebrow{justify-content:flex-start;}
.quality-content h2{font-size:30px; margin-bottom:32px;}
.quality-row-list{display:flex; flex-direction:column;}
.quality-row{
  display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);
}
.quality-row:last-child{border-bottom:none;}
.quality-row-icon{
  width:38px; height:38px; border-radius:50%; background:var(--cream); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; transition:background .3s var(--ease);
}
.quality-row:hover .quality-row-icon{background:var(--sky);}
.quality-row-icon .icon{width:17px; height:17px; color:var(--sky-dark); transition:color .3s var(--ease);}
.quality-row:hover .quality-row-icon .icon{color:var(--navy);}
.quality-row-text h4{font-size:14.5px; margin-bottom:4px; color:var(--navy);}
.quality-row-text p{font-size:13px; color:var(--grey); margin:0;}

/* ===== PREMIUM MATERIALS ===== */
.materials{padding:100px 0; background:var(--cream);}

/* ===== INSPIRATION (emotional, full-bleed lifestyle banner) ===== */
.inspiration{
  position:relative; min-height:560px; display:flex; align-items:center; overflow:hidden;
}
.inspiration .hero-bg{animation:heroZoom 30s ease-in-out infinite alternate;}
.inspiration .hero-scrim{background:linear-gradient(100deg, rgba(6,14,30,0.8) 0%, rgba(6,14,30,0.5) 55%, rgba(6,14,30,0.15) 100%);}
.inspiration-content{position:relative; z-index:2; max-width:560px; padding:0 24px;}
.inspiration-content .eyebrow{justify-content:flex-start; color:var(--sky);}
.inspiration-content h2{color:#fff; font-size:36px; margin-bottom:22px; letter-spacing:-0.01em;}
.inspiration-content p{color:#dbe4f2; font-size:16px; line-height:1.8;}

/* ===== SERVICE AREAS ===== */
.landscape-areas{padding:88px 0; background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.areas-inner{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:66px; align-items:center;}
.areas-copy .eyebrow{justify-content:flex-start;}
.areas-copy h2{font-size:30px; margin-bottom:16px;}
.areas-copy p{color:var(--grey); font-size:14px; line-height:1.72; margin-bottom:24px; max-width:540px;}
.area-pills{display:flex; flex-wrap:wrap; gap:10px; align-content:center;}
.area-pills span{padding:11px 15px; border-radius:30px; background:#fff; border:1px solid var(--line); color:var(--navy); font:700 12px/1 'Manrope',sans-serif; box-shadow:var(--shadow-sm);}

/* ===== MOBILE CONVERSION BAR ===== */
.landscape-mobile-cta{display:none;}

/* ===== RESPONSIVE ===== */
@media (max-width: 980px){
  .landscape-hero{min-height:auto;}
  .landscape-hero-grid{grid-template-columns:1fr; gap:34px; padding-top:60px; padding-bottom:48px;}
  .landscape-hero h1{font-size:46px; max-width:720px;}
  .landscape-hero-copy > p{max-width:720px;}
  .landscape-quote-panel{max-width:720px; width:100%;}
  .investment-intro,.areas-inner{grid-template-columns:1fr; gap:28px;}
  .budget-grid{grid-template-columns:1fr; max-width:720px; margin:0 auto;}
  .budget-card.featured{transform:none;}
  .gallery-masonry{column-count:2;}
  .quality-grid{grid-template-columns:1fr; gap:36px;}
  .quality-image{height:340px;}
  .inspiration-content{max-width:100%;}
}
@media (max-width: 600px){
  body{padding-bottom:62px;}
  .landscape-hero-grid{padding:44px 24px 36px;}
  .landscape-hero h1{font-size:38px; line-height:1.08;}
  .landscape-hero-copy > p{font-size:14.5px;}
  .hero-proof{flex-direction:column; gap:8px;}
  .landscape-hero .hero-ctas{gap:10px;}
  .landscape-hero .hero-ctas .btn{width:100%; justify-content:center; padding:14px 18px;}
  .landscape-quote-panel{padding:25px 20px;}
  .quote-form-row{grid-template-columns:1fr; gap:0;}
  .landscape-investment{padding:76px 0;}
  .investment-intro h2{font-size:28px;}
  .budget-card{padding:31px 24px;}
  .budget-card > p{min-height:0;}
  .investment-note{align-items:flex-start; flex-direction:column;}
  .investment-note .btn{width:100%; justify-content:center;}
  .gallery-masonry{column-count:1;}
  .inspiration-content h2{font-size:27px;}
  .landscape-areas{padding:70px 0;}
  .areas-copy h2{font-size:27px;}
  .area-pills span{font-size:11px; padding:10px 13px;}
  .landscape-mobile-cta{position:fixed; left:0; right:0; bottom:0; z-index:260; display:grid; grid-template-columns:.8fr 1.2fr; height:62px; box-shadow:0 -7px 24px rgba(4,12,25,.22);}
  .landscape-mobile-cta a{display:flex; align-items:center; justify-content:center; font:800 12px/1 'Manrope',sans-serif; letter-spacing:.03em; text-transform:uppercase;}
  .mobile-call{background:#fff; color:var(--navy);}
  .mobile-survey{background:var(--sky); color:var(--navy);}
}