
:root{
--ink:#20342d;
--muted:#65716c;
--soft:#f4f6f5;
--line:#dde4e0;
--green:#174d42;
--red:#a63735;
--red-dark:#842a29;
}

*{
box-sizing:border-box;
}

body{
margin:0;
background:#fff;
color:var(--ink);
font-family:Arial,Helvetica,sans-serif;
line-height:1.65;
}

img{
max-width:100%;
display:block;
}

a{
color:inherit;
}

.container{
width:min(1180px,calc(100% - 40px));
margin:0 auto;
}

.header{
background:#fff;
border-bottom:1px solid #e8eeeb;
}

.header-inner{
min-height:76px;
display:flex;
align-items:center;
gap:24px;
}

.brand{
margin-right:auto;
font-family:Georgia,serif;
font-size:24px;
text-decoration:none;
}

.nav{
display:flex;
gap:18px;
font-size:13px;
}

.nav a{
text-decoration:none;
}

.nav a:hover{
color:var(--red);
}

.phone{
font-weight:800;
text-decoration:none;
white-space:nowrap;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 22px;
border-radius:11px;
background:var(--red);
color:#fff;
font-weight:800;
text-decoration:none;
}

.btn:hover{
background:var(--red-dark);
}

.btn-light{
background:#fff;
color:var(--ink);
}

.hero{
padding:52px 0;
background:var(--soft);
}

.hero-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:46px;
align-items:center;
}

.hero-photo{
overflow:hidden;
border-radius:24px;
background:#e8eeeb;
box-shadow:0 24px 70px rgba(20,50,40,.10);
}

.hero-photo img{
width:100%;
height:100%;
min-height:460px;
object-fit:cover;
}

.kicker{
margin:0 0 12px;
color:var(--red);
font-size:11px;
font-weight:900;
letter-spacing:.15em;
text-transform:uppercase;
}

.hero h1{
margin:0;
font-family:Georgia,serif;
font-size:clamp(40px,5.3vw,66px);
font-weight:500;
line-height:1.04;
}

.hero-lead{
margin:22px 0 0;
font-size:18px;
color:var(--muted);
}

.price{
margin-top:24px;
font-size:29px;
font-weight:900;
}

.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:26px;
}

.breadcrumbs{
padding:16px 0;
border-bottom:1px solid var(--line);
color:var(--muted);
font-size:13px;
}

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

.section{
padding:64px 0;
}

.section-soft{
background:var(--soft);
}

.section h2{
margin:0 0 22px;
font-family:Georgia,serif;
font-size:clamp(30px,4vw,44px);
font-weight:500;
line-height:1.1;
}

.section p{
max-width:900px;
color:var(--muted);
}

.room-facts{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:30px;
}

.fact{
padding:22px;
border:1px solid var(--line);
border-radius:18px;
background:#fff;
}

.fact small{
display:block;
margin-bottom:7px;
color:var(--muted);
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
}

.fact strong{
font-size:18px;
}

.amenities{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin:28px 0 0;
padding:0;
list-style:none;
}

.amenities li{
padding:13px 16px;
border:1px solid var(--line);
border-radius:11px;
background:#fff;
}

.links{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:28px;
}

.links a{
padding:14px 16px;
border:1px solid var(--line);
border-radius:11px;
background:#fff;
color:var(--green);
font-weight:700;
text-decoration:none;
}

.links a:hover{
border-color:var(--red);
color:var(--red);
}

.faq{
max-width:900px;
}

.faq-item{
padding:20px 0;
border-bottom:1px solid var(--line);
}

.faq-item h3{
margin:0 0 8px;
font-family:Georgia,serif;
font-size:21px;
font-weight:500;
}

.cta{
margin:60px 0;
padding:40px;
border-radius:22px;
background:var(--green);
color:#fff;
}

.cta h2{
color:#fff;
}

.cta p{
color:rgba(255,255,255,.82);
}

.footer{
padding:40px 0;
background:#132d26;
color:#fff;
}

.footer p,
.footer a{
color:rgba(255,255,255,.75);
}

.footer a{
text-decoration:none;
}

@media(max-width:900px){

.hero-grid{
grid-template-columns:1fr;
}

.hero-photo img{
min-height:320px;
}

.nav{
display:none;
}

.room-facts,
.amenities,
.links{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:620px){

.container{
width:calc(100% - 28px);
}

.phone{
display:none;
}

.hero{
padding:30px 0 45px;
}

.hero h1{
font-size:38px;
}

.room-facts,
.amenities,
.links{
grid-template-columns:1fr;
}

.cta{
padding:28px 22px;
}

}
