/* ============================================================
   PARDON MY FRENCH — "LE SPA" DESIGN SYSTEM
   You should not need to edit this file to update content.
   ============================================================ */
:root{
  --milk:#FFFFFF; --fog:#F5F3F1; --plum:#3E3B38; --wisteria:#9C6F63;
  --moss:#8F8781; --ink:#3A3734; --line:rgba(62,59,56,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Karla',sans-serif;background:var(--milk);color:var(--ink);line-height:1.7;font-weight:300}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.serif{font-family:'Fraunces',serif}
.container{max-width:1080px;margin:0 auto;padding:0 28px}

/* Buttons */
.btn{display:inline-block;background:var(--plum);color:var(--milk);padding:14px 34px;border-radius:2px;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;transition:.25s;
  border:1px solid var(--plum);cursor:pointer;font-family:'Karla',sans-serif}
.btn:hover{background:transparent;color:var(--plum)}
.btn.light{background:transparent;color:var(--plum)}
.btn.light:hover{background:var(--plum);color:var(--milk)}
.btn.small{padding:10px 24px;font-size:12px}

/* Nav */
nav{position:sticky;top:0;z-index:50;background:rgba(247,244,239,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;max-width:1080px;margin:0 auto;gap:16px}
.logo{font-family:'Fraunces',serif;font-size:21px;letter-spacing:.04em;color:var(--plum);white-space:nowrap}
.logo em{color:var(--wisteria)}
.nav-links{display:flex;gap:34px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.nav-links a{opacity:.7;transition:.2s}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--plum)}
@media(max-width:820px){.nav-links{display:none}}

/* Page headers */
.page-head{padding:80px 28px 50px;text-align:center;background:linear-gradient(160deg,#FFFFFF 0%,#F7F2F0 60%,#F0E7E3 100%)}
.page-head .eyebrow{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--moss);font-weight:600;margin-bottom:18px}
.page-head h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(36px,5.6vw,62px);line-height:1.1;color:var(--plum)}
.page-head h1 em{font-style:italic;color:var(--wisteria)}
.page-head p{max-width:520px;margin:18px auto 0;opacity:.8}

/* Eyebrow + section titles */
.eyebrow{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--moss);font-weight:600}
.sec-title{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(30px,4.4vw,42px);color:var(--plum)}
.sec-title em{font-style:italic;color:var(--wisteria)}

/* Cards */
.card{background:#fff;border:1px solid var(--line);border-radius:2px;padding:34px 30px}

/* Footer */
footer{background:var(--plum);color:var(--milk);padding:64px 28px 40px;margin-top:0}
.foot-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-family:'Fraunces',serif;font-weight:400;font-size:19px;margin-bottom:14px}
.foot-grid p,.foot-grid a{font-size:14px;opacity:.75;display:block;margin-bottom:6px}
.foot-grid a:hover{opacity:1}
.foot-bottom{max-width:1080px;margin:44px auto 0;padding-top:22px;border-top:1px solid rgba(247,244,239,.18);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}

/* Sticky mobile book button */
.mbook{position:fixed;bottom:14px;left:14px;right:14px;z-index:70;display:none}
.mbook a{display:flex;justify-content:center;background:var(--plum);color:var(--milk);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;font-size:13px;padding:16px;border-radius:2px;box-shadow:0 12px 30px rgba(75,51,80,.4)}
@media(max-width:820px){.mbook{display:block} footer{padding-bottom:110px}}



/* ===== Option A palette accents (baked in) ===== */
.btn:hover{background:var(--wisteria);border-color:var(--wisteria);color:#fff}
.btn.light:hover{background:var(--plum);color:var(--milk)}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--wisteria);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important;animation:none!important}}