@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:    #faf8f4;
  --warm:     #f3ede3;
  --linen:    #e8ddd0;
  --sand:     #d4c4b0;
  --teal:     #4a9e9e;
  --teal-dk:  #3a8080;
  --teal-lt:  #e8f4f4;
  --gold:     #c8a96e;
  --bark:     #2c2420;
  --stone:    #7a7066;
  --smoke:    #a09890;
  --white:    #ffffff;
}

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--bark);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 60px;
  background: rgba(250,248,244,0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linen);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px; font-weight: 400; letter-spacing: 0.04em;
  color: var(--bark); text-decoration: none;
}
.nav-logo span { color: var(--teal); font-style: italic; }
.nav-links { display: flex; gap: 32px; list-style: none; align-items: center; }
.nav-links a {
  font-size: 12px; font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--stone);
  text-decoration: none; transition: color 0.25s;
}
.nav-links a:hover, .nav-links a.active { color: var(--teal); }
.nav-book {
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--white);
  background: var(--teal); padding: 11px 24px;
  text-decoration: none; transition: background 0.25s; white-space: nowrap;
}
.nav-book:hover { background: var(--teal-dk); }
.nav-shop {
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal);
  background: transparent; padding: 10px 20px;
  border: 1px solid var(--teal); text-decoration: none;
  transition: all 0.25s; white-space: nowrap;
}
.nav-shop:hover { background: var(--teal-lt); }

/* BUTTONS */
.btn-primary {
  display: inline-block; font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white); background: var(--teal);
  padding: 14px 36px; text-decoration: none;
  transition: background 0.25s; border: none; cursor: pointer;
}
.btn-primary:hover { background: var(--teal-dk); }
.btn-secondary {
  display: inline-block; font-size: 12px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--teal); background: transparent;
  padding: 13px 32px; text-decoration: none;
  border: 1px solid rgba(74,158,158,0.4);
  transition: all 0.25s; cursor: pointer;
}
.btn-secondary:hover { border-color: var(--teal); background: var(--teal-lt); }
.btn-join {
  display: inline-block; font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); background: var(--teal);
  padding: 10px 20px; text-decoration: none;
  transition: background 0.25s; white-space: nowrap;
}
.btn-join:hover { background: var(--teal-dk); }
.btn-price {
  display: inline-block; font-size: 11px; font-weight: 400;
  letter-spacing: 0.1em; color: var(--teal);
  text-decoration: none; border-bottom: 1px solid rgba(74,158,158,0.4);
  padding-bottom: 1px; transition: border-color 0.2s;
}
.btn-price:hover { border-color: var(--teal); }

/* SECTION LABELS */
.section-eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--teal);
  margin-bottom: 16px; display: block;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300; line-height: 1.15; color: var(--bark);
}
.section-title em { font-style: italic; color: var(--teal); }
.section-body {
  font-size: 15px; font-weight: 300; line-height: 1.9;
  color: var(--stone); margin-top: 20px;
}

/* FOOTER */
footer {
  background: var(--bark);
  padding: 56px 60px 32px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 300; color: var(--cream);
  margin-bottom: 14px; display: block;
}
.footer-logo span { color: var(--teal); font-style: italic; }
.footer-tagline {
  font-size: 13px; font-weight: 300; color: var(--smoke);
  line-height: 1.7; margin-bottom: 20px;
}
.footer-social { display: flex; gap: 12px; }
.social-link {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(250,248,244,0.15);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 11px; color: var(--smoke);
  transition: all 0.25s; font-weight: 500; letter-spacing: 0.05em;
}
.social-link:hover { border-color: var(--teal); color: var(--teal); }
.footer-heading {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--teal);
  margin-bottom: 20px; display: block;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 13px; font-weight: 300; color: var(--smoke);
  text-decoration: none; transition: color 0.2s;
}
.footer-links a:hover { color: var(--cream); }
.footer-bottom {
  border-top: 1px solid rgba(250,248,244,0.08);
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-size: 12px; font-weight: 300; color: var(--stone); }
.footer-credit { font-size: 12px; font-weight: 300; color: rgba(74,158,158,0.5); }

@media (max-width: 768px) {
  nav { padding: 16px 24px; }
  .nav-links { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  footer { padding: 40px 24px 24px; }
}

/* Refinement: accessible navigation and discovery hero */
:root { --teal: #397b76; --teal-dk: #2d635f; }
a:focus-visible, button:focus-visible { outline: 3px solid #397b76; outline-offset: 4px; }
nav { gap: 20px; padding: 16px clamp(20px, 4vw, 60px); }
.nav-logo { flex-shrink: 0; }
.nav-links { gap: clamp(12px, 2vw, 28px); }
.nav-links a, .nav-book { min-height: 44px; display: inline-flex; align-items: center; }
.menu-toggle { display: none; min-height: 44px; padding: 10px 14px; color: var(--bark); border: 1px solid var(--teal); background: var(--cream); font: inherit; cursor: pointer; }
body .hero { min-height: 740px; padding-top: 88px; }
body .hero-inner { max-width: 900px; padding: 70px 28px; }
body .hero-eyebrow { color: #e5d6bd; letter-spacing: .2em; }
body .hero-title { font-size: clamp(48px, 7vw, 84px); }
body .hero-sub { color: #faf8f4; margin: 24px auto; font-weight: 400; }
body .hero-bg { background-image: url('red-light-room.jpg'); opacity: .6; }
.hero-offer { max-width: 530px; margin: 0 auto 28px; padding: 22px; border: 1px solid #c8a96e; background: rgba(44,36,32,.68); color: var(--cream); }
.hero-offer > span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 8px; }
.hero-offer strong { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 4vw, 38px); font-weight: 400; }
.hero-offer p { font-size: 14px; line-height: 1.65; margin-top: 8px; }
.hero-actions a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: .08em; }
.hero-actions .btn-secondary { color: var(--cream); border-color: #d4c4b0; }
.hero-actions .btn-secondary:hover { background: rgba(255,255,255,.12); }
@media(max-width:1100px) {
 nav { flex-wrap: wrap; gap: 10px; }
 .menu-toggle { display: block; margin-left: auto; }
 .nav-book { padding: 10px 16px; }
 .nav-links { display: none; order: 4; width: 100%; max-height: calc(100dvh - 100px); overflow-y: auto; border-top: 1px solid var(--linen); padding-top: 12px; flex-direction: column; align-items: stretch; gap: 4px; }
 .nav-links.is-open { display: flex; }
 .nav-links a { padding: 10px 12px; }
 .about { gap: 36px; }
}
@media(max-width:600px) {
 nav { padding: 12px 16px; }
 .nav-logo { font-size: 18px; max-width: 145px; }
 .nav-book { font-size: 10px; letter-spacing: .06em; padding: 10px 12px; }
 body .hero { min-height: auto; padding-top: 94px; }
 body .hero-inner { padding: 48px 20px 56px; }
 body .hero-eyebrow { font-size: 10px; letter-spacing: .12em; }
 .hero-actions { flex-direction: column; }
 .hero-actions a { width: 100%; padding: 15px 18px; }
 .about-box { padding: 32px 24px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

.about-photo { width:100%; height:440px; object-fit:cover; display:block; border-radius:4px; }
@media(max-width:600px) { .about-photo {height:300px;} }

[id] { scroll-margin-top: 110px; }
.skip-link { position:fixed; top:8px; left:8px; transform:translateY(-200%); z-index:200; background:white; color:#253b39; padding:12px; }
.skip-link:focus { transform:none; }
.story-section { max-width:1000px; margin:auto; padding:72px 28px; }
.video-frame { aspect-ratio:16/9; margin:28px 0 16px; background:#2c2420; }
.video-frame iframe { width:100%; height:100%; display:block; border:0; }
.community-section { background:var(--warm); padding:72px 28px; }
.community-inner { max-width:1200px; margin:auto; }
.community-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:32px; }
.community-grid figure { margin:0; }
.community-grid img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:4px; }
.service-card .btn-price { align-self:flex-start; margin-top:16px; }
@media(max-width:900px) { .community-grid {grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:480px) { .community-section,.story-section {padding:48px 20px;} .community-grid {gap:10px;} }

.services-hero { background:var(--warm); padding:130px 28px 56px; border-bottom:1px solid var(--linen); }
.services-hero-inner { max-width:1200px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.services-hero h1 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-size:clamp(44px,5vw,68px); line-height:1.08; }
.services-hero h1 em { display:block; color:var(--teal); }
.services-hero p { font-size:16px; line-height:1.8; color:var(--stone); margin-top:20px; }
.services-hero .btn-primary { margin-top:26px; letter-spacing:.08em; }
.services-hero img { width:100%; height:420px; object-fit:cover; border-radius:4px; display:block; }
@media(max-width:900px) { .services-hero-inner {grid-template-columns:1fr;gap:28px;} .services-hero img {height:340px;} }
@media(max-width:480px) { .services-hero {padding:115px 20px 40px;} .services-hero img {height:260px;} }

.community-grid a { display:block; border-radius:4px; }
.community-grid img {object-position:center 30%;}

.footer-credit {font-size:14px; line-height:1.6; color:#d4c4b0;}
.footer-credit a {color:#d4c4b0; font-weight:500; text-decoration:underline; text-underline-offset:4px;}
.footer-credit a:hover {color:#ffffff;}

/* Give all gallery photos an identical frame, independent of source dimensions. */
.community-grid figure { min-width:0; }
.community-grid a { aspect-ratio:4 / 5; overflow:hidden; position:relative; }
.community-grid a img { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:center 30%; }