/* Hotel Grand Hill View — redesign stylesheet */
:root{
  --night:#0e1822; --night-2:#16232f; --ivory:#f6f1e7; --ivory-2:#ece4d4;
  --gold:#b8924a; --gold-soft:#d7bd86; --ink:#1f2a33; --muted:#6b6a64; --line:rgba(184,146,74,.35);
  --display:"Marcellus",Georgia,serif; --serif:"Cormorant Garamond",Georgia,serif; --body:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px; --gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 16px/1.7 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font:500 12px/1 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.lead{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);font-style:italic;line-height:1.45;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;font:500 13px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--gold);color:var(--gold);transition:.3s}
.btn:hover,.btn:focus-visible{background:var(--gold);color:var(--night)}
.btn.solid{background:var(--gold);color:var(--night)}
.btn.solid:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Top bar + header */
.topbar{background:var(--night);color:var(--ivory-2);font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-block:8px;flex-wrap:wrap}
.topbar a:hover{color:var(--gold-soft)}
.topbar span{opacity:.75}
.header{position:sticky;top:0;z-index:50;background:rgba(14,24,34,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(184,146,74,.25)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
.logo img{height:48px;width:auto;flex:none}
.nav{display:flex;gap:20px;align-items:center}
.nav a{white-space:nowrap}
.nav a{font:500 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-2);padding:8px 0;border-bottom:1px solid transparent;transition:.25s}
.nav a:hover,.nav a.active{color:var(--gold-soft);border-color:var(--gold)}
.nav .btn{padding:11px 20px;border-bottom:1px solid var(--gold)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--ivory);width:44px;height:44px;cursor:pointer;font-size:20px}
@media (max-width:1180px){
  .burger{display:block}
  .nav{position:fixed;inset:0 0 0 auto;width:min(320px,85vw);background:var(--night);flex-direction:column;align-items:flex-start;padding:90px 32px 32px;gap:22px;transform:translateX(100%);visibility:hidden;transition:transform .35s,visibility .35s;z-index:60}
  .nav.open{transform:none;visibility:visible}
  .nav .close{position:absolute;top:22px;right:22px}
  .topbar .hide-sm{display:none}
}
@media (min-width:1181px){.nav .close{display:none}}

/* Hero slideshow */
.hero{position:relative;height:calc(100vh - 120px);min-height:520px;max-height:860px;overflow:hidden;background:var(--night);color:var(--ivory)}
.hero .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.6s ease,transform 7s ease}
.hero .slide.on{opacity:1;transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,34,.25) 0%,rgba(14,24,34,.35) 45%,rgba(14,24,34,.85) 100%)}
.hero .copy{position:absolute;z-index:2;left:0;right:0;bottom:clamp(40px,9vh,100px)}
.hero h1{font-size:clamp(38px,6vw,76px);max-width:18ch;margin-top:18px}
.hero h1 em{font-family:var(--serif);font-style:italic;color:var(--gold-soft)}
.hero .sub{margin-top:18px;font-size:17px;max-width:46ch;color:var(--ivory-2)}
.hero .ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero .ctas .btn:not(.solid){color:var(--ivory);border-color:rgba(246,241,231,.6)}
.hero .dots{position:absolute;z-index:2;right:var(--gut);bottom:clamp(40px,9vh,100px);display:flex;gap:10px}
.hero .dots button{width:34px;height:2px;border:0;background:rgba(246,241,231,.35);cursor:pointer;padding:0}
.hero .dots button.on{background:var(--gold)}

/* Booking strip */
.strip{background:var(--night-2);color:var(--ivory-2)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.strip div{padding:22px 20px;border-left:1px solid rgba(184,146,74,.2)}
.strip div:first-child{border-left:0}
.strip b{display:block;font:400 22px/1.2 var(--display);color:var(--ivory)}
.strip small{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft)}
@media (max-width:760px){.strip .wrap{grid-template-columns:1fr 1fr}.strip div:nth-child(3){border-left:0}.strip div{border-top:1px solid rgba(184,146,74,.2)}}

/* Sections */
.sec{padding-block:clamp(64px,10vw,120px)}
.sec.dark{background:var(--night);color:var(--ivory)}
.sec.dark .lead{color:var(--ivory-2)}
.sec.tint{background:var(--ivory-2)}
.head{display:grid;gap:16px;margin-bottom:48px;max-width:720px}
.head h2{font-size:clamp(32px,4.4vw,54px)}
.head.center{margin-inline:auto;text-align:center;justify-items:center}
.rule{width:60px;height:1px;background:var(--gold)}

/* Intro split */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.split .pics{position:relative;aspect-ratio:4/5;max-width:100%}
.split .pics img{position:absolute;object-fit:cover}
.split .pics .a{inset:0 18% 14% 0;width:82%;height:86%}
.split .pics .b{right:0;bottom:0;width:48%;height:46%;border:8px solid var(--ivory);object-fit:cover}
.split .txt{display:grid;gap:22px}
.split .txt h2{font-size:clamp(30px,4vw,48px)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--line);padding-top:24px;margin-top:6px}
.facts b{display:block;font:400 36px/1 var(--display);color:var(--gold)}
.facts span{font-size:13px;color:var(--muted)}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* Rooms tabs */
.tabs{display:flex;gap:6px;border-bottom:1px solid rgba(184,146,74,.3);margin-bottom:40px;flex-wrap:wrap}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--ivory-2);font:500 13px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;padding:16px 18px;cursor:pointer;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--gold-soft);border-color:var(--gold)}
.panel{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.panel[hidden]{display:none}
.panel .img{aspect-ratio:4/3;overflow:hidden}
.panel .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.panel:hover .img img{transform:scale(1.04)}
.panel .info{display:grid;gap:18px}
.panel h3{font-size:clamp(30px,3.6vw,44px)}
.price{display:flex;align-items:baseline;gap:14px;font-variant-numeric:tabular-nums}
.price b{font:400 34px/1 var(--display);color:var(--gold-soft)}
.price s{color:rgba(246,241,231,.45);font-size:16px}
.price small{font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.amen{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;padding:0;margin:0;list-style:none;font-size:14px}
.amen li{padding-left:18px;position:relative}
.amen li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--gold)}
.panel .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.sec:not(.dark) .price s{color:var(--muted)}
.sec:not(.dark) .price b{color:var(--gold)}
@media (max-width:860px){.panel{grid-template-columns:1fr}}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{display:grid;gap:14px}
.card .img{aspect-ratio:4/3;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.card:hover .img img{transform:scale(1.05)}
.card h3{font-size:26px}
.card p{color:var(--muted);font-size:15px}
@media (max-width:860px){.cards{grid-template-columns:1fr}}

/* Services grid */
.svc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.svc div{padding:22px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px;display:flex;gap:12px;align-items:flex-start}
.svc div::before{content:"";flex:none;width:7px;height:7px;margin-top:.6em;border:1px solid var(--gold);transform:rotate(45deg)}

/* Gallery */
.filters{display:flex;gap:10px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.filters button{background:none;border:1px solid var(--line);padding:10px 18px;font:500 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;color:inherit}
.filters button.on{background:var(--gold);color:var(--night);border-color:var(--gold)}
.grid{columns:4 240px;column-gap:14px}
.grid a{display:block;margin-bottom:14px;overflow:hidden;break-inside:avoid;position:relative}
.grid img{width:100%;height:auto;transition:transform .8s,filter .8s}
.grid a:hover img{transform:scale(1.04);filter:brightness(.85)}
.strip-gal{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.strip-gal a{aspect-ratio:1;overflow:hidden}
.strip-gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.strip-gal a:hover img{transform:scale(1.06)}
@media (max-width:760px){.strip-gal{grid-template-columns:repeat(3,1fr)}}
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,13,18,.94);display:flex;align-items:center;justify-content:center;padding:40px 16px}
.lb[hidden]{display:none}
.lb img{max-height:86vh;max-width:92vw;object-fit:contain}
.lb button{position:absolute;background:none;border:1px solid var(--line);color:var(--ivory);width:48px;height:48px;font-size:22px;cursor:pointer}
.lb .x{top:16px;right:16px}.lb .p{left:16px;top:50%}.lb .n{right:16px;top:50%}

/* Video band */
.band{position:relative;background:var(--night) center/cover no-repeat;color:var(--ivory);text-align:center}
.band::before{content:"";position:absolute;inset:0;background:rgba(14,24,34,.7)}
.band .wrap{position:relative;display:grid;justify-items:center;gap:20px;padding-block:clamp(80px,12vw,150px)}
.band h2{font-size:clamp(34px,5vw,60px)}
.play{width:84px;height:84px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;transition:.3s}
.play:hover{background:var(--gold)}
.play svg{width:26px;fill:var(--ivory);margin-left:4px}

/* Page banner */
.banner{position:relative;background:var(--night) center/cover no-repeat;color:var(--ivory);padding-block:clamp(90px,14vw,170px) clamp(50px,7vw,80px)}
.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,34,.45),rgba(14,24,34,.85))}
.banner .wrap{position:relative;display:grid;gap:14px}
.banner h1{font-size:clamp(40px,6vw,76px)}
.crumbs{font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--ivory-2)}
.crumbs a:hover{color:var(--gold-soft)}

/* Prose */
.prose{display:grid;gap:20px;max-width:68ch;font-size:17px}
.prose p:first-child::first-letter{font-family:var(--display);float:left;font-size:64px;line-height:.9;padding:6px 10px 0 0;color:var(--gold)}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,5vw,70px)}
.cinfo{display:grid;gap:26px;align-content:start}
.cinfo div{display:grid;gap:4px;border-bottom:1px solid var(--line);padding-bottom:20px}
.cinfo b{font:400 22px/1.3 var(--display)}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .full{grid-column:1/-1}
label{display:grid;gap:6px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font:400 16px/1.4 var(--body);padding:13px 14px;border:1px solid rgba(31,42,51,.2);background:#fff;color:var(--ink);border-radius:0;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
.map{margin-top:clamp(48px,7vw,80px);aspect-ratio:21/8;min-height:320px;width:100%;border:0;filter:grayscale(.3)}
.pay{background:var(--night);color:var(--ivory);padding:32px;display:grid;gap:12px}
.pay b{font:400 26px/1.2 var(--display)}
@media (max-width:860px){.contact{grid-template-columns:1fr}form{grid-template-columns:1fr}}

/* CTA + footer */
.cta{background:var(--gold);color:var(--night)}
.cta .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:44px;flex-wrap:wrap}
.cta h2{font-size:clamp(26px,3.4vw,40px)}
.cta .btn{border-color:var(--night);color:var(--night)}
.cta .btn:hover{background:var(--night);color:var(--gold-soft)}
.footer{background:var(--night);color:var(--ivory-2);font-size:15px}
.footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr 1.2fr;gap:40px;padding-block:72px 48px}
.footer h4{font:500 12px/1 var(--body);letter-spacing:.25em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:20px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer a:hover{color:var(--gold-soft)}
.footer .logo img{height:60px;margin-bottom:18px}
.footer .bottom{border-top:1px solid rgba(184,146,74,.2);padding-block:22px;font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;opacity:.8}
@media (max-width:860px){.footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer .cols{grid-template-columns:1fr}}

/* Floating actions */
.float{position:fixed;right:18px;bottom:18px;z-index:40;display:grid;gap:10px}
.float a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.float .wa{background:#25d366}.float .call{background:var(--gold)}
.float svg{width:26px;fill:#fff}

/* Reveal */
.reveal{opacity:1;transform:none;transition:opacity .9s,transform .9s}

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

/* SEO content blocks */
.faqs{display:grid;gap:0;max-width:880px;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;font:400 21px/1.35 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font:300 28px/1 var(--body);color:var(--gold);transition:transform .3s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 22px;max-width:68ch;color:var(--muted)}
.tbl{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.tbl caption{text-align:left;font:500 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);padding-bottom:16px}
.tbl th,.tbl td{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font-weight:500;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.tbl tbody th{font-weight:500}
.note{font-size:13px;color:var(--muted);margin-top:12px}
.updated{margin-top:40px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}

/* Guides */
.cards.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.cards.four{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards.four{grid-template-columns:1fr}}
.card .eyebrow{font-size:11px}
a.il{color:var(--gold);border-bottom:1px solid var(--line)}
a.il:hover{border-color:var(--gold)}
.sec.dark a.il{color:var(--gold-soft)}
.guide{display:grid;grid-template-columns:260px 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.toc{position:sticky;top:100px;display:grid;gap:18px}
.toc ol{margin:0;padding-left:18px;display:grid;gap:8px;font-size:14px}
.toc a:hover{color:var(--gold)}
.stay{background:var(--night);color:var(--ivory);padding:22px;display:grid;gap:10px}
.stay b{font:400 22px/1.2 var(--display)}
.stay p{font-size:14px;color:var(--ivory-2)}
.stay .btn{justify-content:center;padding:12px 16px}
.stay .btn:not(.solid){color:var(--ivory)}
.gbody{display:grid;gap:22px;max-width:760px;font-size:17px}
.byline{font-size:13px;letter-spacing:.08em;color:var(--muted)}
.gsec{display:grid;gap:14px;padding-top:18px;scroll-margin-top:100px}
.gsec h2{font-size:clamp(26px,3vw,34px)}
.gsec .meta{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.list{margin:0;padding-left:20px;display:grid;gap:10px}
@media (max-width:900px){.guide{grid-template-columns:1fr}.toc{position:static}}

/* 404 */
.banner.nf{padding-block:clamp(110px,16vw,200px) clamp(70px,9vw,110px)}
.nf-links div{font-size:16px}