/* =======================
   The Tranquil Room
   Global Styles (mobile-first, responsive)
   ======================= */
:root{
  --brand-deep: #2f4736;     /* deep green header/footer */
  --brand-sand: #d9c1a5;     /* warm sand background */
  --brand-ink:  #243424;     /* headings */
  --brand-text: #1f1f1f;     /* body */
  --brand-cta:  #2f4736;
  --brand-cta-text: #f5f1ea;
  --radius-lg: 1.25rem;
  --radius-md: .75rem;
  --radius-sm: .5rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 6px 18px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--brand-text);
  line-height:1.65;
  background: var(--brand-sand);
}

/* --- Helpers --- */
.container{
  width:min(1120px, 92%);
  margin-inline:auto;
}
.section{padding: clamp(2.5rem, 2.5rem + 2vw, 5rem) 0;}
h1,h2,h3{color:var(--brand-ink); line-height:1.2; margin:0 0 1.5rem}
.lead{font-size:clamp(1.05rem, 1rem + .4vw, 1.25rem); color:#2a2a2a}

.button, button, [type="submit"]{
  appearance:none; border:none; cursor:pointer;
  background:var(--brand-cta); color:var(--brand-cta-text);
  padding:.85rem 1.25rem; font-weight:600; border-radius: 999px;
  box-shadow:var(--shadow-sm); transition:.2s transform ease, .2s box-shadow ease;
}
.button:hover, button:hover, [type="submit"]:hover{transform:translateY(-1px); box-shadow:var(--shadow-md)}
.button--ghost{background:transparent; color:var(--brand-cta); border:2px solid var(--brand-cta)}
.badge{
  display:inline-block;border:1px solid #4443; padding:.35rem .6rem; border-radius:999px; font-size:.9rem; margin:.25rem .35rem .25rem 0;
  background:#fff7; backdrop-filter:saturate(120%) blur(4px);
}

/* --- Top Bar --- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:#fffefc; border-bottom:1px solid #0000000f;
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 0; position:relative}
.brand{display:flex; align-items:center; gap:.8rem; text-decoration:none}
.brand__logo{
  height:120px; width:auto; display:block;
}
.nav__links{display:flex; gap:.6rem; align-items:center}
.nav__links a{padding:.55rem .9rem; text-decoration:none; color:#263126; font-weight:600; border-radius:999px}
.nav__links a.active, .nav__links a:hover{background:#00000008}

.mobile-toggle{display:inline-flex; gap:.35rem; align-items:center; padding:.55rem .8rem; border-radius:999px; background:#0000; border:2px solid #00000012}
.mobile-toggle span{display:block; width:18px; height:2px; background:#2a2a2a; position:relative}
.mobile-toggle span::before,.mobile-toggle span::after{content:""; position:absolute; left:0; right:0; height:2px; background:#2a2a2a}
.mobile-toggle span::before{top:-6px}.mobile-toggle span::after{bottom:-6px}
@media (min-width: 900px){
  .mobile-toggle{display:none}
  .nav__links.hide{display:flex}
}

/* Mobile drawer */
@media (max-width: 899px){
  .nav__links.hide{display:none}
  .nav__links.hide.open{display:flex; flex-direction:column; width:100%; position:absolute; top:100%; left:0; right:0; background:#fffefc; border-bottom:1px solid #0000000f; padding:.75rem 0; box-shadow:var(--shadow-md)}
  .nav__links.open a{width:100%; padding:.75rem 1.5rem}
}

/* --- Hero --- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height: clamp(340px, 58vh, 560px);
  display:grid; place-items:center;
  color:#fff;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(27,42,35,.66), rgba(27,42,35,.68)),
              url('./assets/MassageHero.webp') center/cover no-repeat;
  filter:saturate(90%) contrast(102%);
  z-index:-1;
}
.hero__content{text-align:center}
.hero__title{font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); text-align:center; letter-spacing:.5px; color:var(--brand-sand)}
.hero__subtitle{opacity:.92; text-align:center; margin-top:.6rem}
.button--ghost-light{color:#fff; border-color:#fff}

/* --- Feature Cards --- */
.grid{display:grid; gap: clamp(1rem, 1rem + .7vw, 1.5rem)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
@media (min-width: 700px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width: 1000px){.grid--3{grid-template-columns:repeat(3,1fr)}}

.card{
  background:#fff; border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid #0000000a;
  display:flex; flex-direction:column; height:100%;
}
.card__img{
  width:100%; aspect-ratio: 16/10; object-fit:cover;
}
.card__body{padding:1.1rem 1.1rem 1.25rem}
.card__title{font-size: clamp(1.15rem, 1rem + .35vw, 1.35rem); margin:.25rem 0 .35rem}
.card__meta{color:#243424; font-weight:600; margin-bottom:.25rem}
.card__desc{opacity:.9; margin-bottom:1.25rem}
.card__body > p:not(:last-child){margin-bottom:2rem}

.center{text-align:center}

/* --- Testimonials Carousel --- */
.testimonials-carousel{position:relative; max-width:100%; padding:0 3rem}
.carousel-container{display:flex; align-items:center; gap:0; position:relative}
.carousel-track-wrapper{overflow:hidden; width:100%; position:relative; padding:1rem 0}
.carousel-track{
  display:flex; transition:transform 0.5s ease-in-out; gap:1rem;
}
.carousel-slide{
  min-width:100%; flex-shrink:0;
}
@media (min-width: 700px){
  .carousel-slide{min-width:calc(50% - .5rem)}
  .carousel-track{gap:1rem}
}
@media (min-width: 900px){
  .carousel-slide{min-width:calc(33.333% - .67rem)}
  .carousel-track{gap:1rem}
}
@media (min-width: 1200px){
  .carousel-slide{min-width:calc(25% - .75rem)}
  .carousel-track{gap:1rem}
  .testimonials-carousel{padding:0 4rem}
}
.quote{
  background:#e8dcc8; border:none; border-radius:0; 
  padding:2rem 1rem; box-shadow:none; margin:0 auto; text-align:center;
  min-height:280px; max-width:100%; width:100%; display:flex; flex-direction:column; justify-content:center;
  font-size:.9rem; line-height:1.5;
}
@media (min-width: 700px){
  .quote{padding:2.5rem 1.25rem; min-height:320px; max-width:320px; font-size:.95rem; line-height:1.6}
}
@media (min-width: 1200px){
  .quote{padding:3rem 1.5rem; min-height:350px}
}
.quote footer{margin-top:1.25rem; font-weight:600; color:var(--brand-ink); font-size:.9rem}

.carousel-btn{
  background:rgba(47, 71, 54, 0.9); color:#fff; border:none; cursor:pointer;
  width:56px; height:56px; border-radius:50%; font-size:1.3rem; font-weight:400;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.2); transition:.2s all ease;
  position:absolute; z-index:10;
}
.carousel-btn--prev{left:-1rem}
.carousel-btn--next{right:-1rem}
.carousel-btn:hover{transform:scale(1.08); background:var(--brand-cta)}
.carousel-btn:disabled{opacity:.3; cursor:not-allowed; transform:scale(1)}
@media (max-width: 699px){
  .carousel-btn{width:44px; height:44px; font-size:1.2rem}
  .carousel-btn--prev{left:0}
  .carousel-btn--next{right:0}
  .testimonials-carousel{padding:0 3rem}
}

.carousel-dots{
  display:flex; justify-content:center; gap:.6rem; margin-top:2rem;
}
.carousel-dot{
  width:10px; height:10px; border-radius:50%; background:#c5c5c5; border:none; cursor:pointer;
  transition:.2s all ease; padding:0;
}
.carousel-dot:hover{background:#8a8a8a}
.carousel-dot.active{background:var(--brand-ink); transform:scale(1.3)}

/* --- Footer --- */
.footer{
  background: var(--brand-deep); color:#f6f6f3;
  padding: clamp(2rem, 2rem + 2vw, 3rem) 0;
}
.footer a{color:#f3e9d4; text-decoration:none}
.footer__brand{font-weight:700; font-size:1.25rem}

/* --- Treatments page --- */
.kicker{letter-spacing:.08em; text-transform:uppercase; color:#243424b5; font-weight:700; font-size:1.5rem}
.treat-hero{background: var(--brand-deep); color:#fff; padding: 3.5rem 0 2.25rem}
.treat-hero h1{color:#fff}
.treat-grid{grid-template-columns:1fr}
.treat-grid .card__img{aspect-ratio: 3/2}
@media (min-width: 600px){.treat-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width: 900px){.treat-grid{grid-template-columns:repeat(3,1fr)}}
.treat-grid .card__body{padding:.9rem .9rem 1rem}
.treat-grid .card__title{font-size:1.1rem}
.treat-grid .card__meta{font-size:.9rem}
.treat-grid .card__body p{font-size:.9rem}

/* --- About page --- */
.about-grid{display:grid; gap:1.5rem}
@media (min-width: 950px){.about-grid{grid-template-columns: 1.2fr .8fr; align-items:start}}
.portrait{
  width:100%; border-radius: var(--radius-lg); object-fit:cover; aspect-ratio: 4/5;
  box-shadow: var(--shadow-sm)
}

/* --- Contact page --- */
.form{background:#fff; border-radius:var(--radius-lg); padding:1rem; border:1px solid #0000000a; box-shadow:var(--shadow-sm)}
label{font-weight:600; display:block; margin:.5rem 0 .35rem}
input,select,textarea{
  width:100%; padding:.75rem .85rem; border-radius:.65rem; border:1px solid #a0a0a033; background:#faf9f7;
  font:inherit; color:inherit; outline:none
}
textarea{min-height:140px; resize:vertical}
.form-grid{display:grid; gap:.9rem}
@media (min-width: 800px){.form-grid{grid-template-columns:1fr 1fr}}
.form-actions{display:flex; gap:.6rem; align-items:center; flex-wrap:wrap}
.small{font-size:.9rem; opacity:.8}

/* --- Success Overlay --- */
.success-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:1rem; animation:fadeIn .3s ease;
}
.success-message{
  background:#fff; border-radius:var(--radius-lg);
  padding:2.5rem 2rem; max-width:500px; width:100%;
  text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:slideUp .4s ease;
}
.success-icon{
  width:80px; height:80px; margin:0 auto 1.5rem;
  background:linear-gradient(135deg, #2f4736, #3d5c47);
  color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; font-weight:700;
}
.success-message h2{margin:0 0 1rem; color:var(--brand-ink)}
.success-message p{margin:.5rem 0; line-height:1.6}
.success-message button{margin-top:1.5rem; min-width:120px}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes slideUp{
  from{transform:translateY(30px); opacity:0}
  to{transform:translateY(0); opacity:1}
}

@media (max-width: 600px){
  .success-message{padding:2rem 1.5rem}
  .success-icon{width:70px; height:70px; font-size:2.5rem}
  .success-message h2{font-size:1.5rem}
  .success-message p{font-size:.95rem}
}

/* --- Utilities --- */
.hide{display:none}
.link{color:var(--brand-cta); font-weight:600; text-decoration:none}
hr.div{border:0; height:1px; background: #00000014; margin:1.25rem 0}