/* ==========================================================================
   home.css — styles used only by the home page (hero and the services list).
   Anything that another page could reuse belongs in components.css or sections.css.
   ========================================================================== */

/* hero: full-bleed photo with the text over a cream gradient */
.hero{position:relative;overflow:hidden;padding:48px 0 320px;background:var(--cream)}
.hero-bg{position:absolute;left:0;right:0;bottom:0;height:360px;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(238,231,222,1) 0%,rgba(238,231,222,.55) 30%,rgba(238,231,222,0) 62%)}
.hero-bg .note{right:var(--gutter);bottom:10px}
.hero .wrap{position:relative;z-index:1}
.hero-copy{max-width:600px}
.hero h1{margin-bottom:1.6rem}
.hero .lede{margin-bottom:1.4rem}
.hero .for{font-size:.92rem;margin-bottom:2.2rem;max-width:30em}
/* stacked: both CTAs share one centre axis; side by side from 700px */
.cta-row{display:inline-grid;justify-items:center;gap:1.5rem}
@media(min-width:700px){.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2rem}}
@media(min-width:900px){
  .hero{padding:110px 0 130px;min-height:min(780px,calc(100vh - 110px));display:flex;align-items:center}
  .hero .wrap{width:100%}
  .hero-bg{top:0;height:auto}
  .hero-bg img{object-position:70% 50%}
  .hero-bg::after{background:linear-gradient(90deg,rgba(238,231,222,.97) 0%,rgba(238,231,222,.9) 34%,rgba(238,231,222,.55) 52%,rgba(238,231,222,0) 74%)}
}

/* home staging: the three services list */
.services{margin-top:2.6rem;border-top:1px solid var(--sienna)}
.svc{padding:1.7rem 0;border-bottom:1px solid var(--sienna)}
.svc h3{margin-bottom:.5rem}
.svc p{font-size:.98rem;max-width:32em}
.statement{margin:2.4rem 0 0}
.statement span{display:block}
.statement .mr{font-style:italic;color:var(--sienna)}