/* ============================================================
   MYST RESORT — shared styles for Tariff & Payment pages
   Design language: the live homepage — a deep pine-green
   header with a champagne-gold call-to-action and cream
   lettering, carried over a warm ivory page. Delicate,
   high-contrast serif display.
   ============================================================ */

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

:root{
  /* -- colour tokens — pine green · champagne gold · cream --------- */
  --gold:        #C6A15C;   /* champagne gold — CTA buttons, icons on dark */
  --gold-deep:   #A67C36;   /* bronze — gold text / hover on light */
  --gold-soft:   #E6D2A8;   /* soft gold — labels/accents on the dark card */
  --pine:        #13291D;   /* deep pine green — nav, hero, footer, card */
  --pine-2:      #1E3A2A;   /* lighter pine — hills, hover on dark */
  --pine-3:      #2C4E39;   /* mid green — hills */
  --cream:       #F0E4D2;   /* warm cream — text / logo on pine */
  --cream-soft:  #C9C1AE;   /* muted cream — secondary text on pine */
  --ivory:       #FAF6EF;   /* page background */
  --ivory-2:     #F2EBDD;   /* panels, thumbs, sand tags */
  --white:       #FFFFFF;
  --ink:         #20271F;   /* primary dark text on light */
  --ink-soft:    #6A6C60;   /* secondary text on light */
  --line:        #E7DECB;   /* hairline / divider on light */

  --radius-card: 4px;
  --shadow-card: 0 20px 44px -24px rgba(19,41,29,0.30);

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.eyebrow{
  font-family:var(--font-body);
  font-weight:500;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--gold);
  display:inline-block;
}

/* ---------------------------------------------------------------- */
/* Buttons                                                           */
/* ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:13px 26px;
  border-radius:2px;
  border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn-gold{
  background:var(--gold);
  color:var(--pine);
}
.btn-gold:hover{ background:var(--gold-deep); color:var(--white); transform:translateY(-1px); box-shadow:var(--shadow-card); }
.btn-primary{
  background:var(--pine);
  color:var(--cream);
}
.btn-primary:hover{ background:#0B1A12; transform:translateY(-1px); box-shadow:var(--shadow-card); }
.btn-ghost{
  background:transparent;
  border-color:var(--gold);
  color:var(--gold-deep);
}
.btn-ghost:hover{ background:var(--gold); color:var(--pine); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ---------------------------------------------------------------- */
/* Top nav — mirrors the live homepage header                        */
/* ---------------------------------------------------------------- */
.myst-nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 5vw;
  background:var(--pine);
  border-bottom:1px solid rgba(240,228,210,0.12);
}
.myst-nav .brand{ display:inline-flex; align-items:center; }
.myst-nav .brand-mark{ height:54px; }
.myst-nav .brand-word{ flex-direction:column; align-items:center; line-height:1; }
.myst-nav .brand-word .bw-name{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:32px; color:var(--cream); letter-spacing:.01em;
}
.myst-nav .brand-word .bw-sub{
  font-family:var(--font-body); font-size:9px; letter-spacing:.52em;
  text-transform:uppercase; color:var(--cream); padding-left:.52em; margin-top:4px;
}
.myst-nav .nav-right{ display:flex; align-items:center; gap:26px; }
.myst-nav .phone{
  display:flex; align-items:center; gap:9px;
  font-size:15px; font-weight:500; letter-spacing:.02em;
  color:var(--cream);
}
.myst-nav .phone .phone-ic{ color:var(--gold); display:inline-flex; }

/* ---------------------------------------------------------------- */
/* Misted hills hero — dark pine sky rising into the ivory page      */
/* ---------------------------------------------------------------- */
.hills-hero{
  position:relative;
  overflow:hidden;
  padding:56px 0 0;
  background:var(--pine);
}
.hills-hero .hero-copy{
  position:relative; z-index:2;
  max-width:640px;
  margin:0 auto;
  text-align:center;
  padding:0 5vw 26px;
}
.hills-hero .eyebrow{ justify-content:center; }
.hills-hero h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(40px, 5.6vw, 64px);
  line-height:1.05;
  margin:16px 0 14px;
  color:var(--cream);
  letter-spacing:.01em;
}
.hills-hero h1 em{
  font-style:italic;
  font-weight:500;
  color:var(--gold);
}
.hills-hero p{
  font-size:15px;
  color:var(--cream-soft);
  line-height:1.7;
  margin:0 auto;
  max-width:470px;
}
.hills-hero svg{ display:block; width:100%; height:auto; position:relative; z-index:1; }

/* ---------------------------------------------------------------- */
/* Page shell                                                        */
/* ---------------------------------------------------------------- */
.page-wrap{
  max-width:980px;
  margin:0 auto;
  padding:8px 5vw 84px;
}

.myst-footer{
  background:var(--pine);
  padding:48px 5vw 34px;
  display:flex; flex-direction:column; align-items:center; gap:22px;
  text-align:center;
}
.myst-footer .foot-contact{
  display:flex; flex-direction:column; gap:8px;
  font-size:13px; color:var(--cream-soft); letter-spacing:.01em;
}
.myst-footer .foot-contact .foot-row{ display:flex; align-items:center; justify-content:center; gap:8px; }
.myst-footer .foot-contact .foot-row span.ic{ color:var(--gold); }
.myst-footer .foot-legal{
  display:flex; align-items:center; gap:16px;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--cream-soft);
  padding-top:18px; border-top:1px solid rgba(240,228,210,0.14); width:100%;
  justify-content:center;
}
.myst-footer .foot-legal a{ color:var(--gold); }
.myst-footer .foot-legal a:hover{ text-decoration:underline; }

@media (max-width:640px){
  .myst-nav .phone .num{ display:none; }
  .myst-footer .foot-legal{ flex-direction:column; gap:8px; }
}