/* Self-hosted variable fonts (latin subset) */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('assets/fonts/CormorantGaramond.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/CormorantGaramond-Italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('assets/fonts/Jost.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   EDIT ME — the whole look is controlled from this block.
   ------------------------------------------------------------
   BACKGROUNDS: drop any .jpg into /assets and change the
   filenames below. Recommended: ~1920px wide, <400 KB.
   COLORS: tweak the palette variables; everything follows.
   ============================================================ */
:root{
  --bg-hero:  url('assets/bg-hero.jpg');   /* full-screen opener  */
  --bg-hero-mobile: url('assets/bg-hero-mobile.jpg'); /* smaller crop for phones */
  --bg-about: url('assets/bg-about.jpg');  /* behind About        */
  --bg-visit: url('assets/bg-visit.jpg');  /* behind Visit/Hours  */

  --ink:        #2e2c28;   /* main text            */
  --ink-soft:   #5c574e;   /* secondary text       */
  --paper:      #faf7f2;   /* page background      */
  --sand:       #e9e2d5;   /* light panels         */
  --sage:       #6f7d6a;   /* accent (buttons)     */
  --sage-deep:  #4c5a48;   /* accent hover / dark  */
  --gold:       #b99a5f;   /* fine lines, details  */
  --hero-tint:  rgba(38,42,36,.38);  /* darkens hero photo so text reads */
  --panel-tint: rgba(250,247,242,.88); /* frosted card over section photos */
}
/* ================== end of quick-edit block ================== */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-weight:300}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.15}
img{max-width:100%}
a{color:var(--sage-deep)}
.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}

/* top bar */
header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1.25rem;background:rgba(250,247,242,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.06)}
.brand{font-family:'Cormorant Garamond',serif;font-size:1.25rem;letter-spacing:.06em;text-decoration:none;color:var(--ink)}
.brand em{font-style:normal;color:var(--gold)}
nav{display:flex;align-items:center;gap:1rem}
nav a.link{display:none;text-decoration:none;color:var(--ink-soft);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}
.btn{display:inline-block;padding:.65rem 1.4rem;border-radius:999px;text-decoration:none;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:all .25s}
.btn-solid{background:var(--sage);color:#fff}
.btn-solid:hover{background:var(--sage-deep)}
.btn-ghost{border:1px solid rgba(255,255,255,.75);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.btn-dark-ghost{border:1px solid var(--sage);color:var(--sage-deep)}
.btn-dark-ghost:hover{background:var(--sage);color:#fff}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;
  background:var(--bg-hero) center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:var(--hero-tint)}
.hero-inner{position:relative;color:#fff;padding:6rem 1.25rem 3rem;max-width:52rem}
.kicker{letter-spacing:.32em;text-transform:uppercase;font-size:.78rem;opacity:.9}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);margin:.6rem 0 .4rem}
.hero .sub{font-size:clamp(1rem,2.4vw,1.25rem);opacity:.95;max-width:36rem;margin:0 auto}
.hero .rule{width:64px;height:1px;background:var(--gold);margin:1.4rem auto}
.hero-ctas{margin-top:2rem;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.hero-phone{margin-top:1.1rem;font-size:1.05rem;letter-spacing:.05em}
.hero-phone a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}

.hero-loc{margin-top:1.6rem;font-size:.85rem;letter-spacing:.08em;opacity:.85}
.hero-loc a{color:#fff;text-decoration:none;border-bottom:1px solid var(--gold)}
.lifespa-link{color:inherit;text-decoration:none;border-bottom:2px solid var(--gold)}
.lifespa-link:hover{color:var(--sage-deep)}

/* sections */
section{padding:4.5rem 0;scroll-margin-top:3.5rem}
.eyebrow{letter-spacing:.28em;text-transform:uppercase;font-size:.75rem;color:var(--gold)}
h2{font-size:clamp(1.9rem,4.5vw,2.7rem);margin:.35rem 0 1.2rem}
.lead{color:var(--ink-soft);max-width:44rem}

/* services */
.cards{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2rem}
.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:1.6rem;box-shadow:0 1px 10px rgba(0,0,0,.04)}
.card h3{font-size:1.35rem;margin-bottom:.4rem;color:var(--sage-deep)}
.card p{font-size:.95rem;color:var(--ink-soft)}
.svc-note{margin-top:1.6rem;font-size:.92rem;color:var(--ink-soft)}

/* photo-backed sections */
.photo-sec{background:center/cover no-repeat;position:relative}
.photo-sec .panel{background:var(--panel-tint);backdrop-filter:blur(3px);border-radius:16px;padding:2.2rem;max-width:44rem}
#about{background-image:var(--bg-about)}
.portrait{width:150px;height:150px;border-radius:50%;object-fit:cover;float:right;
  margin:0 0 1rem 1.2rem;border:3px solid var(--gold);box-shadow:0 2px 12px rgba(0,0,0,.18)}
#visit{background-image:var(--bg-visit)}

/* visit details */
.visit-grid{display:grid;gap:1.6rem;grid-template-columns:1fr;margin-top:1.4rem}
.visit-grid h3{font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;font-family:'Jost',sans-serif;font-weight:500;margin-bottom:.5rem;color:var(--sage-deep)}
.hours{width:100%;border-collapse:collapse;font-size:.95rem}
.hours td{padding:.28rem 0;color:var(--ink-soft)}
.hours td:last-child{text-align:right}
.addr{font-style:normal;color:var(--ink-soft)}
.big-phone{font-size:1.5rem;font-family:'Cormorant Garamond',serif}
.big-phone a{text-decoration:none;color:var(--ink)}

/* utility spacing (replaces inline styles for CSP) */
.mt{margin-top:.8rem}
.mt-sm{margin-top:.6rem}
.mt-lg{margin-top:1.3rem}
.small{font-size:.85rem}
.note{font-size:.85rem;color:var(--ink-soft);margin-top:.7rem}

/* faq */
.faq-list{margin-top:1.6rem;max-width:44rem}
.faq-list details{border-bottom:1px solid rgba(0,0,0,.1);padding:.9rem 0}
.faq-list summary{cursor:pointer;font-weight:400;font-size:1.05rem;list-style:none;position:relative;padding-right:2rem}
.faq-list summary::after{content:"+";position:absolute;right:.2rem;top:0;color:var(--gold);font-size:1.3rem;line-height:1}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{margin-top:.6rem;color:var(--ink-soft);font-size:.95rem;max-width:40rem}

/* footer */
footer{padding:2.4rem 1.25rem;text-align:center;font-size:.8rem;color:var(--ink-soft);border-top:1px solid rgba(0,0,0,.07)}
footer p{max-width:46rem;margin:.35rem auto}

@media(max-width:719px){
  .hero{background-image:var(--bg-hero-mobile)}
}
@media(min-width:720px){
  nav a.link{display:inline}
  .cards{grid-template-columns:repeat(2,1fr)}
  .visit-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:1000px){
  .cards{grid-template-columns:repeat(4,1fr)}
}