/* MindBodyZen — shared stylesheet
   Generated for the static build. Source of truth for layout/colour remains the
   design files in design-source/pages/*.dc.html; this file is the union of the
   per-page <helmet> styles plus the responsive nav the DC prototypes lacked. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  background: #FFFFFF;
  color: #26241F;
  -webkit-font-smoothing: antialiased;
}

a { color: #9A7A38; text-decoration: none; }
a:hover { color: #16233F; }

img { max-width: 100%; }

/* ---------- NAV ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #F0EBE0;
}
.nav-in {
  max-width: 1200px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; gap: 6px;
}
.nav-brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.nav-brand img { width: 42px; height: 42px; }
.nav-brand span {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: 21px; color: #26241F;
}
.nav-links { display: flex; align-items: center; gap: 6px; }

.nvl {
  font: 600 13.5px/1 'Manrope', sans-serif; color: #57534B;
  padding: 9px 13px; border-radius: 999px; transition: all .15s ease;
}
.nvl:hover { background: #F6F5F2; color: #26241F; }
.nvl-on { background: #16233F !important; color: #fff !important; }

.nav-cta {
  font: 700 13.5px/1 'Manrope', sans-serif; color: #fff !important;
  background: #C2A25C; padding: 12px 20px; border-radius: 999px;
  margin-left: 8px; white-space: nowrap;
}
.nav-cta:hover { background: #B08F47; }
.nav-cta-navy { background: #16233F; }
.nav-cta-navy:hover { background: #0F1930; }

.nav-burger {
  display: none; flex: none; width: 42px; height: 42px; margin-left: 6px;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid #E2DCCE; border-radius: 12px;
  cursor: pointer; padding: 0;
}
.nav-burger span {
  display: block; position: relative; width: 17px; height: 1.5px;
  background: #26241F; transition: background .15s ease;
}
.nav-burger span::before,
.nav-burger span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: #26241F; transition: transform .2s ease, top .2s ease;
}
.nav-burger span::before { top: -5.5px; }
.nav-burger span::after { top: 5.5px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav-in { padding: 12px 20px; gap: 4px; }
  .nav-brand img { width: 36px; height: 36px; }
  .nav-brand span { font-size: 19px; }
  .nav-burger { display: flex; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid #F0EBE0;
    padding: 10px 20px 16px;
    box-shadow: 0 18px 40px -24px rgba(38,36,31,.4);
  }
  .nav-links.is-open { display: flex; }
  .nav-links .nvl { padding: 14px 12px; font-size: 15px; border-radius: 12px; }
  .nav-cta { display: none; }
  .nav-links .nav-cta-mobile {
    display: block; text-align: center; margin: 8px 0 0;
    font: 700 14px/1 'Manrope', sans-serif; color: #fff !important;
    background: #C2A25C; padding: 15px 20px; border-radius: 999px;
  }
}
@media (min-width: 861px) {
  .nav-links .nav-cta-mobile { display: none; }
}

/* ---------- BUTTONS ---------- */

.btn-g {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 14px/1 'Manrope', sans-serif; color: #fff !important;
  background: #C2A25C; padding: 15px 26px; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(194,162,92,.3); transition: background .15s ease;
}
.btn-g:hover { background: #B08F47; }

.btn-o {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 14px/1 'Manrope', sans-serif; color: #26241F !important;
  border: 1.5px solid #DDD5C6; padding: 14px 25px; border-radius: 999px;
  transition: all .15s ease;
}
.btn-o:hover { border-color: #16233F; }

.tapb { cursor: pointer; transition: all .15s ease; -webkit-tap-highlight-color: transparent; }
.tapb:active { transform: scale(.98); }

/* ---------- CARDS ---------- */

.card-link { transition: transform .18s ease, box-shadow .18s ease; }
.card-link:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -18px rgba(38,36,31,.22); }

.bcard { display: block; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.bcard:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -18px rgba(38,36,31,.22); color: inherit; }

.pcard { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -18px rgba(38,36,31,.22); }

/* ---------- GALLERY ---------- */

.gph { position: relative; border-radius: 18px; overflow: hidden; }
.gph img { transition: transform .35s ease; display: block; }
.gph:hover img { transform: scale(1.04); }

.soc {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 13.5px/1 'Manrope', sans-serif; color: #26241F !important;
  border: 1.5px solid #DDD5C6; padding: 13px 22px; border-radius: 999px;
  transition: all .2s ease;
}
.soc:hover { color: #fff !important; }
.soc-ig:hover { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); border-color: transparent; }
.soc-yt:hover { background: #FF0000; border-color: #FF0000; }

/* ---------- FORMS ---------- */

.fin {
  width: 100%; border: 1px solid #E2DCCE; border-radius: 12px;
  padding: 14px 15px; font-size: 15px; color: #26241F; background: #fff;
  font-family: 'Manrope', sans-serif;
}
.fin:focus { outline: 2px solid #C2A25C; outline-offset: -1px; }

.flab {
  font: 700 11px/1 'Manrope', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: #9A7A38; margin: 0 0 8px; display: block;
}

/* ---------- FAQ ---------- */

details.faq {
  background: #fff; border: 1px solid #EAE3D6; border-radius: 16px;
  padding: 18px 22px; margin-bottom: 10px;
}
details.faq summary {
  cursor: pointer; list-style: none;
  font: 700 16px/1.4 'Manrope', sans-serif; color: #26241F;
  display: flex; align-items: center; gap: 14px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+'; margin-left: auto; font-size: 21px; color: #9A7A38;
  font-weight: 500; line-height: 1;
}
details.faq[open] summary::after { content: '–'; }
details.faq p { font: 400 15px/1.7 'Manrope', sans-serif; color: #57534B; margin: 14px 0 0; }

/* ---------- RESPONSIVE GRIDS (from the DC helmets) ---------- */

@media (max-width: 900px) {
  [data-hero-grid] { grid-template-columns: 1fr !important; }
  [data-cols]      { grid-template-columns: 1fr 1fr !important; }
  [data-tgrid]     { grid-template-columns: repeat(2,1fr) !important; }
  [data-tgrid] > figure { grid-column: span 1 !important; }
  [data-bgrid]     { grid-template-columns: 1fr 1fr !important; }
  [data-ggrid]     { grid-template-columns: 1fr 1fr !important; }
  [data-pgrid]     { grid-template-columns: 1fr 1fr !important; }
  [data-2col]      { grid-template-columns: 1fr !important; }
  [data-3col]      { grid-template-columns: 1fr 1fr !important; }
  [data-row2]      { grid-template-columns: 1fr !important; }
  [data-fgrid]     { grid-template-columns: 1fr !important; }
  [data-dcol]      { grid-template-columns: 1fr !important; }

  [data-hero-media] { position: relative !important; height: 300px; }
  [data-hero-scrim] { background: linear-gradient(180deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.7) 78%, #fff 100%) !important; }
  [data-hero-inner] { align-items: flex-start !important; text-align: left !important; padding: 30px 24px 60px !important; min-height: 0 !important; }
  [data-hero-inner] > div > div:last-child { justify-content: flex-start !important; }
}

@media (max-width: 560px) {
  [data-cols]  { grid-template-columns: 1fr !important; }
  [data-tgrid] { grid-template-columns: 1fr !important; }
  [data-bgrid] { grid-template-columns: 1fr !important; }
  [data-ggrid] { grid-template-columns: 1fr !important; }
  [data-pgrid] { grid-template-columns: 1fr !important; }
  [data-3col]  { grid-template-columns: 1fr !important; }
  .btn-g, .btn-o { width: 100%; justify-content: center; }
}

/* ---------- VIEW TOGGLES (replaces <sc-if>) ---------- */

[data-view][hidden] { display: none !important; }