/* ============================================================
   Made for You Massage — Shared Stylesheet
   Palette: Deep Forest & Chestnut. Cream ground, forest green,
   warm chestnut brown, touch of gold. Airy, grounded, elegant.
   ============================================================ */

:root{
  --bg:#f1ece1;          /* soft cream */
  --bg-card:#fbf8f0;     /* warm card */
  --bg-deep:#e9e2d3;     /* deeper sand for alt sections */
  --ink:#2a2620;         /* near-black warm ink */
  --ink-soft:#5b5446;    /* soft brown-gray text */
  --forest:#3a4530;      /* deep forest green (primary) */
  --forest-soft:#566348; /* lighter forest for accents */
  --chestnut:#7a4f33;    /* warm chestnut brown (secondary) */
  --chestnut-soft:#9a6b48;
  --gold:#b8893f;        /* warm gold accent */
  --line:#ddd2bd;        /* warm hairline */
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Karla',sans-serif;
  font-size:18px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- decorative atmosphere ---------- */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6;
  background-image:radial-gradient(circle at 18% 28%,rgba(58,69,48,.05) 0,transparent 46%),
                   radial-gradient(circle at 82% 72%,rgba(184,137,63,.055) 0,transparent 42%);
}

.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:0 30px;}
.wrap-narrow{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 30px;}

/* ============================================================
   SITE HEADER / NAVIGATION
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(241,236,225,.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1180px;margin:0 auto;padding:0 30px;
  display:flex;align-items:center;justify-content:space-between;
  height:78px;
}
.brand{display:flex;align-items:center;gap:12px;line-height:1.05;text-decoration:none;}
.brand-logo{
  display:flex;width:46px;height:46px;flex:none;
  color:var(--forest);
}
.logo-mark{width:100%;height:100%;display:block;}
.brand-text{display:flex;flex-direction:column;}
.brand .brand-name{
  font-family:'Fraunces',serif;font-weight:600;font-size:21px;
  color:var(--forest);letter-spacing:-.01em;
}
.brand .brand-sub{
  font-family:'Karla',sans-serif;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.26em;color:var(--chestnut);margin-top:3px;
}
.nav-links{display:flex;align-items:center;gap:5px;list-style:none;}
.nav-links a{
  font-family:'Karla',sans-serif;font-size:13px;text-transform:uppercase;
  letter-spacing:.12em;font-weight:600;color:var(--ink-soft);
  text-decoration:none;padding:9px 13px;border-radius:24px;
  transition:background .2s ease,color .2s ease;white-space:nowrap;
}
.nav-links a:hover{background:var(--bg-card);color:var(--forest);}
.nav-links a.active{color:var(--forest);}
.nav-links a.active::after{
  content:"";display:block;height:2px;width:18px;
  background:var(--gold);margin:3px auto 0;
}
.has-drop{position:relative;}
.drop{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(6px);
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:10px;padding:8px;min-width:248px;
  box-shadow:0 16px 38px rgba(42,38,32,.16);
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px);
}
.drop a{display:block;text-align:left;padding:11px 14px;
  border-radius:7px;letter-spacing:.06em;font-size:12.5px;}
.drop a:hover{background:var(--bg);}
.nav-cta{
  font-family:'Karla',sans-serif;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.13em;font-weight:700;background:var(--chestnut);
  color:#fbf3ea;padding:11px 21px;border-radius:30px;
  text-decoration:none;transition:background .2s ease,transform .2s ease;
}
.nav-cta:hover{background:#653f28;transform:translateY(-1px);}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;cursor:pointer;color:var(--forest);
}
.nav-toggle svg{display:block;width:22px;height:22px;}
@media(max-width:920px){
  /* prevent the whole page from ever scrolling sideways */
  html,body{max-width:100%;overflow-x:hidden;}

  .nav-toggle{display:block;}

  /* mobile menu: simple 6-item list, fixed to the screen */
  .nav-links{
    display:none;
    position:fixed;
    top:78px;left:0;right:0;
    width:100vw;max-width:100vw;
    box-sizing:border-box;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    margin:0;
    padding:14px 16px 22px;
    background:var(--bg-card);
    border-bottom:1px solid var(--line);
    max-height:calc(100vh - 78px);
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    z-index:200;
  }
  .nav-links.open{display:flex;}

  /* each top-level link: plain full-width block */
  .nav-links a{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:0;
    padding:14px 14px;
    text-align:left;
    border-radius:8px;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:break-word;
    line-height:1.35;
  }
  .nav-links a.active::after{margin:3px 0 0;}

  /* MOBILE: sub-menus are not shown in the hamburger.
     "Practice" and "School" simply go to their landing pages;
     the on-page link strips handle jumping between sub-pages. */
  .has-drop{position:static;}
  .has-drop .drop{display:none !important;}

  .nav-cta{
    margin-top:8px;
    text-align:center;
  }
  .nav-cta::after{display:none;}
}

/* ============================================================
   SHARED TYPE & SECTION SCAFFOLDING
   ============================================================ */
.eyebrow{
  font-family:'Karla',sans-serif;text-transform:uppercase;
  letter-spacing:.32em;font-size:12.5px;font-weight:600;
  color:var(--chestnut);margin-bottom:24px;
}
h1{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(2.6rem,6vw,4.2rem);line-height:1.07;
  letter-spacing:-.015em;color:var(--ink);
}
h1 em{font-style:italic;color:var(--forest);}
h2{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(2rem,4vw,2.7rem);line-height:1.14;
  letter-spacing:-.01em;color:var(--ink);
}
h2 em{font-style:italic;color:var(--forest);}
h3{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:1.32rem;color:var(--forest);
}
p{margin-bottom:18px;}
p:last-child{margin-bottom:0;}

.sec-num{
  font-family:'Fraunces',serif;font-style:italic;font-size:16px;
  color:var(--chestnut);display:block;margin-bottom:10px;
}
.section-divider{
  text-align:center;color:var(--line);
  font-size:22px;letter-spacing:.6em;padding:10px 0;
}
.hero-rule{width:54px;height:2px;background:var(--gold);margin:0 auto;}

/* page hero (interior pages) */
.page-hero{
  text-align:center;padding:92px 30px 64px;position:relative;z-index:1;
}
.page-hero .lede{
  max-width:620px;margin:28px auto 0;
  font-size:19px;color:var(--ink-soft);line-height:1.8;
}
.page-hero h1{margin-bottom:0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:'Karla',sans-serif;
  font-size:13px;text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;text-decoration:none;
  padding:15px 32px;border-radius:32px;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.btn-primary{background:var(--chestnut);color:#fbf3ea;}
.btn-primary:hover{background:#653f28;transform:translateY(-2px);box-shadow:0 12px 26px rgba(122,79,51,.3);}
.btn-forest{background:var(--forest);color:#eef0e3;}
.btn-forest:hover{background:#2c3525;transform:translateY(-2px);box-shadow:0 12px 26px rgba(58,69,48,.34);}
.btn-gold{background:var(--gold);color:#2a2620;}
.btn-gold:hover{background:#a3782f;transform:translateY(-2px);box-shadow:0 12px 26px rgba(184,137,63,.32);}
.btn-ghost{
  background:transparent;color:var(--forest);
  border:1.5px solid var(--line);
}
.btn-ghost:hover{border-color:var(--forest-soft);background:var(--bg-card);transform:translateY(-2px);}

/* ---------- generic card ---------- */
.card{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:10px;padding:36px 38px;
}

/* ---------- callout / principle ---------- */
.principle{
  background:var(--bg-card);border:1px solid var(--line);
  border-left:4px solid var(--forest-soft);
  border-radius:4px;padding:30px 34px;
}
.principle .tag{
  font-family:'Karla',sans-serif;text-transform:uppercase;
  letter-spacing:.2em;font-size:11.5px;font-weight:700;
  color:var(--forest-soft);display:block;margin-bottom:12px;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer{
  position:relative;z-index:1;background:var(--forest);
  color:#d9dccb;margin-top:100px;padding:70px 30px 42px;
}
.footer-inner{
  max-width:1040px;margin:0 auto;display:grid;
  grid-template-columns:1.4fr 1fr 1fr;gap:46px;
}
.footer-inner h4{
  font-family:'Karla',sans-serif;text-transform:uppercase;
  letter-spacing:.2em;font-size:11.5px;font-weight:700;
  color:var(--gold);margin-bottom:16px;
}
.footer-brand .footer-logo{
  display:block;width:52px;height:52px;
  color:var(--gold);margin-bottom:14px;
}
.footer-brand .footer-logo .logo-mark{width:100%;height:100%;}
.footer-brand .fb-name{
  font-family:'Fraunces',serif;font-style:italic;font-size:23px;
  color:#fff;margin-bottom:8px;
}
.footer-brand p{font-size:15px;color:#c5c9b4;line-height:1.7;}
.footer-col a,.footer-col p{
  display:block;font-size:15px;color:#d9dccb;text-decoration:none;
  margin-bottom:9px;line-height:1.6;
}
.footer-col a:hover{color:var(--gold);}
.footer-bottom{
  max-width:1040px;margin:50px auto 0;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:#aab09a;
}
.footer-bottom .tagline{
  font-family:'Fraunces',serif;font-style:italic;color:var(--gold);
}
@media(max-width:760px){
  .footer-inner{grid-template-columns:1fr;gap:34px;}
  .site-footer{margin-top:72px;padding:56px 24px 38px;}
}

/* ---------- utility ---------- */
.center{text-align:center;}
.mt-s{margin-top:14px;}
.mt-m{margin-top:26px;}
.mt-l{margin-top:46px;}

/* ---------- nature photo banner (shared) ---------- */
.photo-banner{
  position:relative;z-index:1;
  max-width:1180px;margin:0 auto;padding:0 30px;
}
.photo-banner figure{
  position:relative;margin:0;
  border-radius:16px;overflow:hidden;
  box-shadow:0 24px 54px rgba(42,38,32,.22);
}
.photo-banner img{
  width:100%;height:340px;object-fit:cover;display:block;
}
.photo-banner figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 34px 26px;
  background:linear-gradient(to top,rgba(28,32,22,.94) 0%,rgba(28,32,22,.78) 45%,rgba(28,32,22,0) 100%);
  color:#f1ece1;
}
.photo-banner figcaption .pb-tag{
  font-family:'Karla',sans-serif;font-size:11px;
  text-transform:uppercase;letter-spacing:.22em;font-weight:700;
  color:#e2b56b;margin-bottom:6px;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.photo-banner figcaption .pb-text{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:clamp(1.1rem,2.3vw,1.45rem);line-height:1.4;
  max-width:640px;
}
@media(max-width:780px){
  .photo-banner img{height:230px;}
  .photo-banner figcaption{padding:22px 22px 18px;}
}

/* ===== Section page-link strip (jump between sibling pages) ===== */
.page-nav{
  background:var(--bg-card);
  border-bottom:1px solid var(--line);
}
.page-nav-inner{
  max-width:1120px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:6px;padding:13px 24px;
}
.page-nav .pn-label{
  font-family:'Karla',sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-soft);margin-right:6px;
}
.page-nav a{
  font-family:'Karla',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;text-decoration:none;
  color:var(--forest);
  padding:6px 13px;border-radius:20px;
  border:1px solid var(--line);
  background:var(--bg);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.page-nav a:hover{
  background:var(--forest);color:#fff;border-color:var(--forest);
}
.page-nav a.current{
  background:var(--gold);color:var(--forest);
  border-color:var(--gold);cursor:default;
}
@media(max-width:780px){
  .page-nav-inner{padding:11px 16px;gap:5px;}
  .page-nav .pn-label{width:100%;margin-bottom:3px;}
  .page-nav a{font-size:12px;padding:6px 11px;}
}