*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f7f3eb;color:#142c24;font-family:"DM Sans",sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}
.site-header{height:94px;padding:0 5.4vw;display:flex;align-items:center;justify-content:space-between;background:#f7f3eb;position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(20,44,36,.08)}
.brand{display:flex;align-items:center;white-space:nowrap}.brand img{display:block;width:72px;height:72px;object-fit:contain}
.nav{display:flex;gap:38px;margin-left:auto;margin-right:48px;font-size:16px}
.nav a{transition:opacity .2s}.nav a:hover{opacity:.55}
.header-phone{font-size:14px;white-space:nowrap}
.menu-toggle{display:none;border:0;background:none;font-size:24px;color:#142c24}

.hero{position:relative;min-height:610px;overflow:hidden;background:#e9dfcf}
.hero-image{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(247,243,235,.97) 0%,rgba(247,243,235,.90) 35%,rgba(247,243,235,.10) 64%,rgba(247,243,235,0) 100%),url("assets/hero-garden-room.jpg");background-size:cover;background-position:center right}
.hero-copy{position:relative;z-index:1;width:min(760px,62vw);padding:82px 0 100px 13.8vw}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:10px;font-weight:600;margin:0 0 14px;color:#335347}
.hero h1{font:500 clamp(58px,7.5vw,102px)/.95 "Playfair Display",serif;letter-spacing:-.045em;margin:0;color:#173b30}
.hero h2{font:500 clamp(35px,4.2vw,58px)/1.05 "Playfair Display",serif;letter-spacing:-.035em;margin:18px 0 25px;color:#173b30}
.hero-intro{font-size:21px;max-width:520px;margin:0 0 30px;color:#172c25}
.button{display:inline-flex;align-items:center;justify-content:center;background:#173f31;color:#fff;border:1px solid #173f31;padding:17px 28px;border-radius:28px;font-size:15px;transition:transform .2s,background .2s}
.button:hover{transform:translateY(-2px);background:#255444}

.intro{padding:70px 13.4vw 64px;text-align:center;background:#f7f3eb}
.intro>p{max-width:820px;margin:0 auto;font:500 clamp(23px,2.5vw,31px)/1.55 "Playfair Display",serif;color:#17372d}

.rooms{padding:35px 5.6vw 100px;background:#f7f3eb}
.section-title{text-align:center;margin-bottom:36px}
.section-title h2{font:500 clamp(42px,5vw,62px)/1.05 "Playfair Display",serif;letter-spacing:-.035em;margin:0;color:#173b30}
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;max-width:1170px;margin:auto}
.room-card{min-width:0}
.room-image{height:310px;border-radius:4px;background-size:cover;background-position:center;box-shadow:0 2px 10px rgba(20,44,36,.06)}
.image-office{background-image:url("assets/office-pod.jpg")}
.image-studio{background-image:url("assets/serenity-studio.jpg")}
.image-family{background-image:url("assets/family-hub.jpg")}
.room-info{padding-top:18px}
.room-info h3{font:500 29px/1.1 "Playfair Display",serif;margin:0 0 16px;color:#173b30}
.room-info p{font-size:17px;line-height:1.55;margin:0 0 18px;color:#24362f}
.room-meta{display:flex;flex-direction:column;gap:3px;font-size:15px;color:#23382f}
.room-meta strong{font-weight:500}

.story{display:grid;grid-template-columns:1fr 1fr;background:#e6e0d4}
.story-image{min-height:620px;background:url("assets/cedar-garden-room.jpg") center/cover}
.story-copy{padding:90px 9vw;align-self:center}
.story-copy h2{font:500 clamp(43px,5vw,67px)/1.02 "Playfair Display",serif;letter-spacing:-.035em;margin:0 0 28px}
.story-copy h2 em,.contact h2 em{font-style:italic}
.story-copy>p:not(.eyebrow){max-width:500px;font-size:17px;color:#4b5d55}
.text-link{display:inline-flex;gap:14px;border-bottom:1px solid #173b30;padding-bottom:5px;margin-top:18px;font-weight:600;font-size:14px}

.process{padding:100px 8vw;background:#f7f3eb}
.steps{display:grid;grid-template-columns:repeat(4,1fr);max-width:1200px;margin:60px auto 0}
.steps>div{padding:0 28px;border-left:1px solid #c9c6bd}
.steps>div:first-child{padding-left:0;border-left:0}
.steps span{font-size:11px;letter-spacing:.16em;color:#63736b}
.steps h3{font:500 28px "Playfair Display",serif;margin:14px 0 8px}
.steps p{font-size:14px;color:#617068;max-width:230px;margin:0}

.contact{background:#183b2f;color:#fff;padding:95px 8vw}
.contact-inner{max-width:1050px;margin:auto}
.contact .eyebrow{color:#c5d5cd}
.contact h2{font:500 clamp(50px,7vw,88px)/.98 "Playfair Display",serif;letter-spacing:-.045em;margin:0 0 22px}
.contact-inner>p:not(.eyebrow){max-width:610px;color:#c9d4cf;font-size:16px}
.contact-details{display:flex;gap:30px;flex-wrap:wrap;margin:28px 0 42px;font-size:16px}
.contact-details a{text-decoration:underline;text-underline-offset:4px}
.contact form{margin-top:20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
label{display:flex;flex-direction:column;gap:7px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:23px}
input,select,textarea{font:15px "DM Sans";color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);padding:11px 0;outline:0;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#fff}
select{color:#fff}select option{color:#173b30}
.button-light{background:#f7f3eb;color:#173b30;border-color:#f7f3eb}
.button-light:hover{background:#fff}
.form-status{font-size:12px;margin-top:13px}

footer{background:#102a22;color:#dce5e0;padding:48px 6vw 24px;display:grid;grid-template-columns:1fr auto;gap:40px}
.footer-brand{display:inline-flex}.footer-brand img{width:88px;height:88px}
footer p{font-size:13px;color:#8ea098;margin:13px 0 0}
.footer-links{display:flex;gap:25px;align-items:flex-start;flex-wrap:wrap;font-size:12px}
.footer-links a:hover{opacity:.65}
.footer-bottom{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:20px;margin-top:10px;display:flex;justify-content:space-between;color:#82938b;font-size:11px;letter-spacing:.08em}

@media(max-width:900px){
  .site-header{height:76px;padding:0 6vw}
  .brand img{width:58px;height:58px}
  .nav,.header-phone{display:none}
  .menu-toggle{display:block}
  .hero{min-height:650px}
  .hero-image{background-image:linear-gradient(180deg,rgba(247,243,235,.96) 0%,rgba(247,243,235,.78) 48%,rgba(247,243,235,.05) 100%),url("assets/hero-garden-room.jpg");background-position:center bottom}
  .hero-copy{width:100%;padding:65px 7vw 300px}
  .hero h1{font-size:62px}
  .hero h2{font-size:39px}
  .hero-intro{font-size:18px}
  .room-grid{grid-template-columns:1fr;max-width:650px}
  .room-image{height:360px}
  .story{grid-template-columns:1fr}
  .story-image{min-height:420px}
  .story-copy{padding:70px 8vw}
  .steps{grid-template-columns:1fr 1fr;gap:35px}
  .steps>div{border-left:0;border-top:1px solid #c9c6bd;padding:22px 0 0}
  .steps>div:first-child{border-top:0;padding-top:0}
  footer{grid-template-columns:1fr}
  .footer-bottom{grid-column:auto}
}
@media(max-width:600px){
  .hero{min-height:650px}
  .hero-copy{padding:55px 7vw 310px}
  .hero h1{font-size:51px}
  .hero h2{font-size:32px}
  .intro{padding:55px 8vw}
  .rooms{padding:25px 7vw 75px}
  .room-image{height:300px}
  .steps{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .contact{padding:75px 7vw}
  footer{padding:40px 7vw 22px}
  .footer-bottom{flex-direction:column;gap:8px}
}