:root {
  --ink: #252821;
  --muted: #6f736a;
  --forest: #35412f;
  --forest-2: #49553f;
  --paper: #f5f3ef;
  --white: #fff;
  --line: #dcd9d1;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); margin: 0; overflow-x: hidden; }
body.modal-open { overflow: hidden; }
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.container-xxl { max-width: 1270px; padding-left: 34px; padding-right: 34px; }
.section { padding: 112px 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
h2 { font-size: clamp(2.3rem, 4vw, 4.3rem); line-height: 1.15; letter-spacing: -.025em; }
.sr-only { clip: rect(0,0,0,0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

.hero { color: white; min-height: 100vh; overflow: hidden; position: relative; }
.hero-backdrop { background-image: linear-gradient(90deg, rgba(17,25,25,.58), rgba(19,23,19,.04) 64%), linear-gradient(0deg, rgba(9,13,11,.36), transparent 48%), url("assets/hero-a-frame.jpg"); background-position: center; background-size: cover; inset: 0; position: absolute; }
.navbar { align-items: center; display: grid; grid-template-columns: 1fr auto 1fr; height: 108px; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 100%; z-index: 4; }
.logo { align-items: center; display: inline-flex; flex-direction: column; justify-self: start; width: 145px; }
.logo svg { fill: none; height: 44px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.2; width: 105px; }
.logo span { font-family: Georgia, serif; font-size: 10px; letter-spacing: .1em; }
.nav-links { align-items: center; display: flex; gap: 42px; }
.nav-links a { color: rgba(255,255,255,.85); font-size: 12px; position: relative; }
.nav-links a::after { background: white; bottom: -9px; content: ""; height: 1px; left: 0; position: absolute; transform: scaleX(0); transition: transform .25s; width: 100%; }
.nav-links a:hover::after { transform: scaleX(1); }
.reserve-button { background: rgba(54,66,47,.94); border: 1px solid rgba(255,255,255,.18); border-radius: 3px; color: white; font-size: 11px; justify-self: end; min-height: 46px; padding: 0 25px; }
.reserve-button:hover { background: #526047; }
.menu-toggle { display: none; }
.hero-inner { align-items: center; display: flex; min-height: 100vh; padding-top: 105px; position: relative; z-index: 1; }
.hero-copy { margin-left: 7.7%; }
.hero h1 { font-size: clamp(3.8rem, 6.8vw, 7.15rem); line-height: 1.03; letter-spacing: -.035em; margin-bottom: 38px; }
.hero-copy p { color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.75; margin-bottom: 32px; }
.light-button, .dark-button { align-items: center; background: white; border: 0; border-radius: 3px; color: #30352d; display: inline-flex; font-size: 11px; gap: 18px; justify-content: center; min-height: 54px; padding: 0 28px; transition: .25s; }
.light-button:hover { background: #e9e8e2; transform: translateY(-2px); }
.light-button svg, .dark-button svg, .arrow-link svg { height: 16px; width: 16px; }
.scroll-prompt { align-items: center; bottom: 48px; display: flex; flex-direction: column; font-size: 9px; gap: 9px; left: 50%; position: absolute; transform: translateX(-50%); z-index: 2; }
.scroll-prompt span { align-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 45%; display: flex; height: 39px; justify-content: center; width: 25px; }
.scroll-prompt svg { height: 14px; width: 14px; }

.about { background: #f8f7f4; overflow: hidden; }
.about-grid { align-items: center; display: grid; grid-template-columns: 38% 62%; }
.about-copy { padding: 30px 14% 30px 9%; }
.section-label { align-items: center; color: #5f655a; display: flex; font-size: 9px; letter-spacing: .14em; margin-bottom: 28px; text-transform: uppercase; }
.section-label::after { background: #9da096; content: ""; height: 1px; margin-left: 12px; width: 33px; }
.section-label.light { color: rgba(255,255,255,.75); justify-content: center; }
.section-label.light::before { background: rgba(255,255,255,.34); content: ""; height: 1px; margin-right: 12px; width: 33px; }
.section-label.light::after { background: rgba(255,255,255,.34); }
.about-copy h2 { margin-bottom: 37px; }
.about-copy p, .stay-copy p { color: var(--muted); font-size: 12px; line-height: 1.85; margin-bottom: 31px; max-width: 350px; }
.arrow-link { align-items: center; background: transparent; border: 0; color: #52594d; display: inline-flex; font-size: 10px; gap: 18px; padding: 0; }
.arrow-link:hover svg { transform: translateX(4px); }
.arrow-link svg { transition: transform .2s; }
.about-image { position: relative; }
.about-image::before { background: #f8f7f4; content: ""; height: 100%; left: -1px; position: absolute; top: 0; width: 54px; z-index: 1; clip-path: polygon(0 0, 100% 0, 61% 8%, 83% 15%, 48% 23%, 70% 31%, 39% 42%, 75% 50%, 40% 60%, 67% 72%, 31% 84%, 76% 91%, 45% 100%, 0 100%); }
.about-image img { aspect-ratio: 1.62; object-fit: cover; }

.surroundings { background: var(--forest); color: white; padding-bottom: 48px; }
.center-heading { text-align: center; }
.center-heading h2 { font-size: clamp(2.5rem, 4vw, 4.4rem); margin-bottom: 70px; }
.activity-grid { margin: 0 auto; max-width: 1080px; }
.activity-card { min-height: 220px; padding: 0 20px; }
.activity-card > svg { height: 37px; margin-bottom: 28px; stroke-width: 1.2; width: 37px; }
.activity-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; margin-bottom: 15px; }
.activity-card p { color: rgba(255,255,255,.67); font-size: 10px; line-height: 1.8; max-width: 185px; min-height: 55px; }
.activity-card a { display: inline-block; margin-top: 15px; }
.activity-card a svg { height: 19px; width: 19px; }
.mountain-line { fill: none; margin: 30px auto -8px; opacity: .32; stroke: white; stroke-width: 1; width: 100%; }
.center-action { text-align: center; }
.light-button.compact { min-height: 46px; padding: 0 25px; }

.stay { background: #f8f7f4; display: grid; grid-template-columns: 55% 45%; }
.stay-image img { height: 100%; min-height: 520px; object-fit: cover; }
.stay-copy { align-self: center; padding: 65px 18%; }
.stay-copy h2 { font-size: clamp(2.5rem, 4vw, 4.5rem); margin-bottom: 37px; }
.price-strip { background: #ece9e2; padding: 42px 0; }
.price-strip .container-xxl { display: grid; grid-template-columns: repeat(3, 1fr); }
.price-strip .container-xxl > div { align-items: center; border-right: 1px solid #cecbc2; display: flex; flex-direction: column; text-align: center; }
.price-strip .container-xxl > div:last-child { border-right: 0; }
.price-strip span { color: var(--muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.price-strip strong { font-family: var(--serif); font-size: 27px; font-weight: 400; margin: 5px 0; }
.price-strip small { color: #898c84; font-size: 9px; }

.newsletter { min-height: 300px; overflow: hidden; position: relative; }
.newsletter-backdrop { background-image: linear-gradient(rgba(240,238,232,.77), rgba(240,238,232,.82)), url("assets/terrace-view.jpg"); background-position: center 55%; background-size: cover; filter: grayscale(.15); inset: 0; position: absolute; }
.newsletter-inner { padding-bottom: 65px; padding-top: 65px; position: relative; text-align: center; z-index: 1; }
.newsletter h2 { font-size: clamp(1.8rem, 3vw, 3rem); margin-bottom: 13px; }
.newsletter p { color: var(--muted); font-size: 12px; }
.newsletter-form { display: flex; margin: 25px auto 0; max-width: 600px; }
.newsletter-form input { background: rgba(255,255,255,.85); border: 1px solid white; min-width: 0; outline: 0; padding: 0 18px; width: 100%; }
.newsletter-form input:focus { border-color: var(--forest); }
.newsletter-form button { background: var(--forest); border: 0; color: white; font-size: 10px; margin-left: 10px; min-height: 46px; padding: 0 30px; }
.form-message { color: var(--forest); font-size: 10px; margin-top: 8px; }

.footer { background: #f8f7f4; padding: 80px 0 22px; }
.footer-logo { color: #343b31; margin-bottom: 25px; }
.footer-main p { color: var(--muted); font-size: 10px; line-height: 1.8; max-width: 260px; }
.footer h3 { font-size: 10px; margin: 5px 0 24px; }
.footer .col-lg-2 > a, .footer .col-lg-3 > a { align-items: flex-start; color: #666b62; display: flex; font-size: 9px; gap: 8px; margin-bottom: 13px; }
.footer a:hover { color: var(--forest); }
.footer a svg { flex: 0 0 auto; height: 13px; width: 13px; }
.socials { display: flex; gap: 15px; margin-top: 22px; }
.socials svg { height: 14px; width: 14px; }
.footer-bottom { border-top: 1px solid var(--line); color: #92958d; display: flex; font-size: 8px; justify-content: space-between; margin-top: 65px; padding-top: 20px; }

.modal { align-items: center; display: none; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 30; }
.modal.open { display: flex; }
.modal-backdrop { background: rgba(16,22,17,.78); inset: 0; position: absolute; }
.modal-card { background: #f8f7f4; border-radius: 4px; max-width: 580px; padding: 45px; position: relative; width: 100%; z-index: 1; }
.modal-card h2 { font-size: 2.7rem; margin-bottom: 10px; }
.modal-card > p { color: var(--muted); font-size: 11px; }
.modal-close { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 50%; display: flex; height: 36px; justify-content: center; position: absolute; right: 20px; top: 20px; width: 36px; }
.modal-close svg { height: 16px; }
.booking-form { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 26px; }
.booking-form label { display: flex; flex-direction: column; font-size: 9px; gap: 7px; letter-spacing: .08em; text-transform: uppercase; }
.booking-form input, .booking-form select { background: white; border: 1px solid var(--line); min-height: 45px; padding: 0 12px; }
.dark-button { background: var(--forest); color: white; grid-column: 1/-1; }
.dark-button:hover { background: var(--forest-2); }
.booking-message { color: var(--forest); font-size: 10px; margin-top: 11px; text-align: center; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 991.98px) {
  .container-xxl { padding-left: 25px; padding-right: 25px; }
  .navbar { display: flex; height: 84px; justify-content: space-between; }
  .reserve-button { display: none; }
  .menu-toggle { background: transparent; border: 0; display: grid; gap: 7px; padding: 12px 0 12px 12px; position: relative; z-index: 7; }
  .menu-toggle span { background: white; display: block; height: 1px; transition: .25s; width: 28px; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav-links { align-items: flex-start; background: rgba(35,43,34,.98); flex-direction: column; gap: 22px; inset: 0 0 auto 0; max-height: 0; overflow: hidden; padding: 0 25px; position: fixed; transition: max-height .4s, padding .4s; width: 100vw; }
  .nav-links.open { max-height: 430px; padding-bottom: 35px; padding-top: 95px; }
  .nav-links a { font-size: 14px; }
  .about-grid { grid-template-columns: 43% 57%; }
  .about-copy { padding-left: 0; }
  .stay-copy { padding: 60px 11%; }
}

@media (max-width: 767.98px) {
  .section { padding: 76px 0; }
  .hero { min-height: 720px; }
  .hero-backdrop { background-image: linear-gradient(0deg, rgba(10,16,12,.7), rgba(19,23,19,.08) 72%), url("assets/hero-a-frame.jpg"); background-position: 62% center; }
  .hero-inner { align-items: flex-end; min-height: 720px; padding-bottom: 92px; }
  .hero-copy { margin-left: 0; }
  .hero h1 { font-size: clamp(3.5rem, 16vw, 5rem); }
  .hero-copy p { font-size: 13px; }
  .scroll-prompt { display: none; }
  .about-grid { grid-template-columns: 1fr; }
  .about-copy { padding: 0 0 45px; }
  .about-image::before { display: none; }
  .about-image img { aspect-ratio: 1.2; }
  .center-heading h2 { margin-bottom: 45px; }
  .activity-grid { --bs-gutter-x: 20px; --bs-gutter-y: 35px; }
  .activity-card { min-height: 210px; padding: 0; }
  .activity-card p { min-height: 72px; }
  .mountain-line { margin-top: 10px; }
  .stay { grid-template-columns: 1fr; }
  .stay-image img { min-height: 390px; }
  .stay-copy { padding: 65px 25px; }
  .price-strip .container-xxl { gap: 25px; grid-template-columns: 1fr; }
  .price-strip .container-xxl > div { border-bottom: 1px solid #cecbc2; border-right: 0; padding-bottom: 24px; }
  .price-strip .container-xxl > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .newsletter-form { flex-direction: column; gap: 10px; }
  .newsletter-form input { min-height: 46px; }
  .newsletter-form button { margin-left: 0; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 10px; }
  .booking-form { grid-template-columns: 1fr; }
  .dark-button { grid-column: auto; }
}

@media (max-width: 420px) {
  .logo { width: 125px; }
  .logo svg { width: 92px; }
  .logo span { font-size: 8px; }
  .hero h1 { font-size: 3.25rem; }
  .activity-grid > div { width: 100%; }
  .activity-card { min-height: auto; }
  .activity-card p { min-height: 0; }
  .modal-card { max-height: calc(100vh - 30px); overflow-y: auto; padding: 38px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}