/* ============================================================
   Theta Soul Healer — Warm sand & terracotta design system
   Shared across sample-home / sample-about / sample-contact
   ============================================================ */
:root{
  --bg:#F5EBE0; --surface:#FFFFFF; --text:#2B2520; --muted:#6E6258;
  --clay:#BB9B49; --clay-deep:#8C7330; --sage:#503C3C; --sage-deep:#3E2E2E;
  --sand:#EFE3D3; --line:#E4D7C4;
  --shadow:0 10px 30px rgba(80,60,40,.10);
  --shadow-lg:0 22px 50px rgba(80,60,40,.16);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Mulish',system-ui,sans-serif;
  --r:18px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--text); background:var(--bg);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.wrap{width:min(1120px,92%); margin-inline:auto}
.serif{font-family:var(--serif)}
.eyebrow{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sage-deep); font-weight:600; margin-bottom:.9rem;
}
h1,h2,h3{font-family:var(--serif); font-weight:500; line-height:1.12; color:var(--text)}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:.98rem;
  padding:.95rem 1.8rem; border-radius:999px; border:1.5px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-primary{background:var(--clay); color:var(--text); box-shadow:0 10px 22px rgba(140,115,48,.30)}
.btn-primary:hover{background:var(--sage); color:#fff; transform:translateY(-2px); box-shadow:0 16px 30px rgba(80,60,40,.34)}
.btn-ghost{border-color:var(--line); color:var(--text); background:transparent}
.btn-ghost:hover{border-color:var(--clay); color:var(--clay-deep); transform:translateY(-2px)}
.btn-light{background:#fff; color:var(--clay-deep)}
.btn-light:hover{transform:translateY(-2px); box-shadow:var(--shadow)}

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 0; transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; width:min(1120px,92%)}
.nav.scrolled{background:rgba(245,235,224,.86); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line)}
.nav-logo img{height:132px; width:auto; transition:height .3s ease}
.nav.scrolled .nav-logo img{height:104px}
.nav-links{display:flex; align-items:center; gap:2rem; list-style:none}
.nav-links a{font-weight:600; font-size:.95rem; color:var(--text); opacity:.85; transition:opacity .2s, color .2s}
.nav-links a:hover{opacity:1; color:var(--clay-deep)}
.nav-links a.active{opacity:1; color:var(--clay-deep)}
.nav-cta{padding:.6rem 1.25rem !important; font-size:.9rem !important; color:var(--text) !important; opacity:1 !important}
.nav-cta:hover{color:#fff !important}
.flag img{height:22px; width:auto; border-radius:4px; box-shadow:var(--shadow)}
/* nav dropdown */
.drop{position:relative}
.drop-toggle{display:inline-flex; align-items:center; cursor:pointer}
.drop-toggle::after{content:""; width:.45em; height:.45em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-left:.45em; margin-top:-.2em; opacity:.65}
.drop-menu{list-style:none; position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); min-width:220px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:.5rem; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s}
/* transparent bridge so the menu doesn't close in the gap under the toggle */
.drop-menu::before{content:""; position:absolute; left:0; right:0; top:-16px; height:16px}
.drop:hover .drop-menu, .drop:focus-within .drop-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(4px)}
.drop-menu a{display:block; padding:.55rem .8rem; border-radius:8px; font-size:.92rem; opacity:.9}
.drop-menu a:hover{background:var(--sand); color:var(--clay-deep); opacity:1}
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px}
.hamburger span{width:26px; height:2px; background:var(--text); border-radius:2px; transition:.3s}

/* ---------- Home hero ---------- */
.hero{
  position:relative; padding-top:clamp(10rem,18vw,13rem); padding-bottom:clamp(3rem,7vw,5rem);
  background:radial-gradient(120% 90% at 85% 10%, #F1E3CF 0%, var(--bg) 55%);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; top:-12%; right:-8%; width:46vw; max-width:620px; aspect-ratio:1;
  background:radial-gradient(circle, rgba(187,155,73,.16), transparent 68%); border-radius:50%;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.2rem); margin:.4rem 0 1.3rem}
.hero h1 em{font-style:italic; color:var(--clay-deep)}
.hero p.lead{font-size:1.18rem; color:var(--muted); max-width:34ch; margin-bottom:2rem}
.hero-actions{display:flex; gap:1rem; flex-wrap:wrap}
.hero-figure{position:relative; justify-self:center}
.hero-figure img{
  width:min(420px,80vw); aspect-ratio:4/5; object-fit:cover; object-position:center top;
  border-radius:230px 230px 26px 26px; box-shadow:var(--shadow-lg);
}
.hero-figure::after{
  content:""; position:absolute; inset:auto -18px -18px auto; width:64%; height:64%;
  border:1.5px solid var(--line); border-radius:230px 26px 26px 26px; z-index:-1;
}
.hero-badge{
  position:absolute; left:-14px; bottom:34px; background:#fff; border-radius:16px;
  padding:.7rem 1rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:600; max-width:200px;
}
.hero-badge .dot{width:10px;height:10px;border-radius:50%;background:var(--sage);flex:0 0 auto;box-shadow:0 0 0 4px rgba(187,155,73,.2)}

/* ---------- Interior page hero ---------- */
.page-hero{
  position:relative; text-align:center; overflow:hidden;
  padding:clamp(9rem,16vw,12rem) 0 clamp(2.5rem,6vw,4rem);
  background:radial-gradient(120% 100% at 50% 0%, #F1E3CF 0%, var(--bg) 62%);
}
.page-hero::before{
  content:""; position:absolute; top:-12%; left:50%; transform:translateX(-50%);
  width:520px; max-width:82vw; aspect-ratio:1;
  background:radial-gradient(circle, rgba(187,155,73,.14), transparent 68%); border-radius:50%;
}
.page-hero .eyebrow{justify-content:center}
.page-hero h1{font-size:clamp(2.4rem,5.4vw,3.8rem); margin:.3rem 0 .8rem}
.page-hero h1 em{font-style:italic; color:var(--clay-deep)}
.page-hero p{color:var(--muted); max-width:48ch; margin:0 auto; font-size:1.12rem}

/* ---------- Trust strip ---------- */
.trust{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.trust .wrap{display:flex; align-items:center; justify-content:center; gap:clamp(1.5rem,5vw,4rem); flex-wrap:wrap}
.trust img{height:74px; width:auto; opacity:.95}
.trust-chips{display:flex; gap:clamp(1rem,3vw,2.5rem); flex-wrap:wrap}
.chip{display:flex; align-items:center; gap:.6rem; font-weight:600; font-size:.95rem; color:var(--muted)}
.chip svg{width:22px;height:22px;color:var(--clay);flex:0 0 auto}

/* ---------- Empathy ---------- */
.empathy{text-align:center}
.empathy .inner{max-width:760px; margin-inline:auto}
.empathy h2{font-size:clamp(2rem,4.5vw,3rem); margin-bottom:1.3rem}
.empathy p{color:var(--muted); font-size:1.12rem; margin-bottom:2rem}
.empathy h2 em{font-style:italic;color:var(--clay-deep)}

/* ---------- Section head ---------- */
.section-head{text-align:center; max-width:640px; margin:0 auto clamp(2.5rem,5vw,3.5rem)}
.section-head h2{font-size:clamp(2rem,4.5vw,3rem); margin-bottom:.7rem}
.section-head p{color:var(--muted)}

/* ---------- Cards (services) ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.8rem;
  display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
.card-ico{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.2rem;
  background:linear-gradient(140deg,#F1E4D0,#EAD9C2); color:var(--clay-deep);
}
.card-ico svg{width:28px;height:28px}
.card h3{font-size:1.6rem; margin-bottom:.5rem}
.card p{color:var(--muted); font-size:.97rem; flex:1; margin-bottom:1.3rem}
.card-foot{display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:1rem}
.price{font-family:var(--serif); font-size:1.5rem; color:var(--clay-deep)}
.price small{font-family:var(--sans); font-size:.72rem; color:var(--muted); font-weight:600}
.card-link{font-weight:700; font-size:.9rem; color:var(--clay-deep); display:inline-flex; align-items:center; gap:.35rem}
.card-link:hover{gap:.6rem}

/* ---------- About ---------- */
.about{background:var(--surface)}
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.about-figure img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; border-radius:24px; box-shadow:var(--shadow)}
.about h2{font-size:clamp(2rem,4.5vw,3rem); margin:.4rem 0 1.2rem}
.about p{color:var(--muted); margin-bottom:1.1rem}
.about .sig{font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--clay-deep); margin:.3rem 0 1.6rem}

/* ---------- Prose ---------- */
.prose{max-width:760px; margin-inline:auto}
.prose h2{font-size:clamp(1.8rem,4vw,2.6rem); margin:.4rem 0 1rem}
.prose p{color:var(--muted); margin-bottom:1.1rem}

/* ---------- Credentials ---------- */
.creds{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:1.4rem}
.cred{display:flex; gap:.9rem; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem}
.cred svg{width:24px;height:24px;color:var(--clay);flex:0 0 auto;margin-top:2px}
.cred h4{font-family:var(--sans); font-weight:700; font-size:1rem; margin-bottom:.2rem}
.cred p{font-size:.9rem; color:var(--muted); margin:0}

/* ---------- Steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.7rem}
.step .num{font-family:var(--serif); font-size:2.6rem; color:var(--clay); line-height:1; margin-bottom:.5rem}
.step h3{font-size:1.5rem; margin-bottom:.4rem}
.step p{color:var(--muted); font-size:.96rem}

/* ---------- Testimonials ---------- */
.tst{background:linear-gradient(180deg,var(--bg),#F1E6D4)}
.tst-viewport{position:relative; overflow:hidden}
.tst-track{display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:.3rem .3rem 1rem; -ms-overflow-style:none; scrollbar-width:none}
.tst-track::-webkit-scrollbar{display:none}
.tst-track .quote{flex:0 0 calc((100% - 3rem)/3); scroll-snap-align:start}
.tst-controls{display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:2.2rem}
.tst-btn{width:54px; height:54px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); color:var(--clay-deep); cursor:pointer; display:grid; place-items:center; transition:transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s}
.tst-btn:hover{background:var(--clay); color:var(--text); border-color:var(--clay); transform:translateY(-2px); box-shadow:var(--shadow)}
.tst-btn svg{width:22px; height:22px}
.tst-hint{font-size:.85rem; color:var(--muted); font-weight:600}
.quote{
  background:var(--surface); border-radius:var(--r); padding:2rem; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.quote .mark{font-family:var(--serif); font-size:3.4rem; line-height:.6; color:var(--clay); opacity:.5; height:1.4rem}
.quote p{font-family:var(--serif); font-style:italic; font-size:1.18rem; color:var(--text); flex:1; margin:.6rem 0 1.4rem}
.quote .who{font-weight:700}
.quote .where{font-size:.85rem; color:var(--muted)}
.stars{color:var(--clay); letter-spacing:2px; font-size:.9rem; margin-bottom:.4rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start}
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.6rem,3vw,2.2rem); box-shadow:var(--shadow)}
.contact-card h2{font-size:1.9rem; margin-bottom:.4rem}
.contact-card>p{color:var(--muted); margin-bottom:1rem}
.contact-list{list-style:none; margin:.6rem 0 1.4rem}
.contact-list li{display:flex; align-items:center; gap:.7rem; padding:.5rem 0; font-weight:600}
.contact-list svg{width:20px;height:20px;color:var(--clay);flex:0 0 auto}
.contact-list a{color:var(--text)}
.contact-list a:hover{color:var(--clay-deep)}
.social-row{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.2rem}
.social-row a{display:inline-flex; align-items:center; gap:.45rem; padding:.55rem 1rem; border-radius:999px; font-weight:700; font-size:.86rem; color:#fff; transition:transform .2s, box-shadow .2s, filter .2s}
.social-row a:hover{transform:translateY(-2px); box-shadow:var(--shadow); filter:brightness(1.05)}
.social-row svg{width:16px;height:16px;fill:currentColor}
.sc-wa{background:#25D366}.sc-vi{background:#7360F2}.sc-tg{background:#2AABEE}.sc-li{background:#0A66C2}

/* Form */
.form{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.form .full{grid-column:1 / -1}
.form label{display:block; font-weight:600; font-size:.85rem; margin-bottom:.35rem; color:var(--text)}
.form input,.form textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--text);
  background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:.85rem 1rem;
  transition:border-color .2s, box-shadow .2s;
}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(187,155,73,.18)}
.form textarea{min-height:150px; resize:vertical}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.notification{margin-top:1rem; font-weight:600}

/* ---------- Service page bits ---------- */
.benefits{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; max-width:940px; margin:0 auto}
.benefits li{display:flex; gap:.75rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.05rem 1.2rem; font-size:.95rem; color:var(--muted)}
.benefits li::before{content:"✓"; color:var(--clay); font-weight:800; flex:0 0 auto; font-size:1.05rem; line-height:1.5}
.benefits b{display:block; font-family:var(--sans); font-weight:700; color:var(--text); margin-bottom:.15rem}
.note{max-width:760px; margin:2rem auto 0; font-size:.9rem; color:var(--muted); background:var(--sand); border:1px solid var(--line); border-radius:12px; padding:1rem 1.3rem; text-align:center}
.pill-row{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:.5rem}
.pill-row a{padding:.6rem 1.2rem; border-radius:999px; border:1.5px solid var(--line); font-weight:600; font-size:.92rem; color:var(--text); transition:border-color .2s, color .2s, transform .2s, background .2s}
.pill-row a:hover{border-color:var(--clay); color:var(--clay-deep); background:var(--surface); transform:translateY(-2px)}
/* related-service image cards */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; max-width:1040px; margin:0 auto}
.svc-card{position:relative; display:block; aspect-ratio:3/4; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); transition:transform .35s ease, box-shadow .35s ease}
.svc-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.svc-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.svc-card:hover img{transform:scale(1.07)}
.svc-card::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 35%, rgba(58,50,44,.25) 60%, rgba(58,50,44,.86)); transition:background .3s}
.svc-card:hover::after{background:linear-gradient(transparent 25%, rgba(80,60,40,.40) 55%, rgba(43,37,32,.9))}
.svc-card span{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:1.4rem 1rem 1.1rem; color:#fff; font-family:var(--serif); font-size:1.35rem; font-weight:600; text-align:center; line-height:1.15}
.svc-card span small{display:block; font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-top:.3rem}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; max-width:1000px; margin-inline:auto}
.split .prose{margin:0}
.split-img img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:24px; box-shadow:var(--shadow)}
/* premium offer/price card: clean photo header + price badge + button */
.price-card{position:relative; aspect-ratio:3/4; border-radius:20px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease}
.price-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.pc-img{position:absolute; inset:0}
.pc-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.price-card:hover .pc-img img{transform:scale(1.05)}
.price-card::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(transparent 28%, rgba(40,32,28,.4) 50%, rgba(40,32,28,.9) 100%)}
/* top scrim: the ::after gradient starts at 28%, leaving the badge zone unprotected
   against the lettering baked into c1.jpg / c5.jpg */
.price-card::before{content:""; position:absolute; inset:0 0 auto; height:34%; z-index:1; background:linear-gradient(rgba(40,32,28,.55), rgba(40,32,28,0))}
.pc-badge{position:absolute; top:12px; right:12px; z-index:3; background:var(--clay); color:var(--text); font-family:var(--serif); font-size:1.4rem; line-height:1; padding:.45rem .95rem; border:1px solid rgba(255,255,255,.55); border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.35)}
.pc-body{position:relative; z-index:2; margin-top:auto; padding:1.4rem 1.4rem 1.5rem; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.55)}
.pc-body h3{color:#fff; font-size:1.45rem; margin-bottom:.4rem}
.pc-body p{color:rgba(255,255,255,.94); font-size:.92rem; margin-bottom:1.1rem}
.pc-body .btn{width:100%; justify-content:center; text-shadow:none}

/* offer card with photo behind */
.card.photo{position:relative; overflow:hidden; border:0; color:#fff}
.card.photo::before{content:""; position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; transition:transform .6s ease; z-index:0}
.card.photo::after{content:""; position:absolute; inset:0; background:linear-gradient(rgba(58,50,44,.5), rgba(58,50,44,.82)); z-index:0}
.card.photo:hover::before{transform:scale(1.06)}
.card.photo > *{position:relative; z-index:1}
.card.photo h3{color:#fff}
.card.photo p{color:rgba(255,255,255,.92)}
.card.photo .card-foot{border-top-color:rgba(255,255,255,.3)}
.card.photo .price{color:#fff}
.card.photo .price small{color:rgba(255,255,255,.8)}
.card.photo .card-link{color:#fff}
.cards-bg{position:relative; background-size:cover; background-position:center}
.cards-bg::before{content:""; position:absolute; inset:0; background:linear-gradient(rgba(247,239,228,.88), rgba(239,227,211,.92))}
.cards-bg > .wrap{position:relative; z-index:1}
.feature{padding:clamp(2rem,5vw,3rem) 0 0}
.feature img{width:auto; max-width:min(960px,100%); max-height:400px; margin-inline:auto; border-radius:24px; box-shadow:var(--shadow-lg)}

/* ---------- Booking band ---------- */
.booking{
  color:#fff;
  background:linear-gradient(135deg,var(--sage) 0%, var(--clay-deep) 130%);
}
.booking-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.booking h2{color:#fff; font-size:clamp(2rem,4.5vw,3rem); margin-bottom:1rem}
.booking p{color:rgba(255,255,255,.9); margin-bottom:1.8rem; max-width:42ch}
.booking-actions{display:flex; gap:1rem; flex-wrap:wrap}
.hours{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:var(--r); padding:1.6rem 1.8rem; backdrop-filter:blur(4px)}
.hours h3{color:#fff; font-size:1.5rem; margin-bottom:.9rem}
.hours ul{list-style:none}
.hours li{display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px dashed rgba(255,255,255,.22); font-size:.95rem}
.hours li:last-child{border-bottom:0}
.hours li span{font-weight:700}

/* ---------- Footer ---------- */
.footer{background:#3A2E26; color:#E6D9C6; text-align:center; padding:2.5rem 0}
.footer a{color:#fff}
.footer .socials{display:flex; gap:1rem; justify-content:center; margin-bottom:1.4rem; flex-wrap:wrap}
.footer .socials a{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:999px;
  background:var(--clay); color:var(--text); font-weight:700; font-size:.9rem;
  transition:background .2s, color .2s, transform .2s, box-shadow .2s;
}
.footer .socials a:hover{background:var(--sage);color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.footer .socials svg{width:18px;height:18px;flex:0 0 auto;fill:currentColor}
.footer small{opacity:.65; font-size:.85rem}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- Services overview (home) ---------- */
.svc-list{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.svc-item{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.7rem 1.5rem; text-decoration:none; color:inherit; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease}
.svc-item:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--clay)}
.svc-ico{width:48px; height:48px; display:grid; place-items:center; border-radius:13px; background:rgba(187,155,73,.14); color:var(--clay-deep); margin-bottom:1.1rem}
.svc-ico svg{width:24px; height:24px}
.svc-item h3{font-size:1.4rem; margin-bottom:.5rem}
.svc-item p{color:var(--muted); font-size:.94rem; margin-bottom:1.2rem}
.svc-item .more{margin-top:auto; font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--clay); display:inline-flex; align-items:center; gap:.45rem}
.svc-item .more svg{width:16px; height:16px; transition:transform .3s ease}
.svc-item:hover .more svg{transform:translateX(4px)}

/* ---------- Responsive ---------- */
@media(max-width:880px){
  /* backdrop-filter on the scrolled bar makes .nav the containing block for the
     fixed drawer, clipping it to header height. Drop it on mobile, keep solid bg. */
  .nav.scrolled{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(245,235,224,.97)}
  .nav-links{
    position:fixed; inset:0 0 0 auto; z-index:55; width:min(80vw,320px); height:100dvh; flex-direction:column;
    align-items:flex-start; justify-content:center; gap:1.6rem; padding:2rem;
    background:var(--bg); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .35s ease;
  }
  .nav-links.open{transform:none}
  .hamburger{display:flex; z-index:60}
  .hero-grid,.about-grid,.booking-grid,.contact-grid{grid-template-columns:1fr}
  .hero-figure{order:-1}
  .cards,.steps,.creds,.form,.benefits,.split,.svc-list{grid-template-columns:1fr}
  /* keep long Greek titles from growing tall enough to reach the price badge */
  .pc-body h3{font-size:1.25rem}
  .svc-grid{grid-template-columns:1fr 1fr}
  .tst-track .quote{flex:0 0 100%}
  .hero p.lead{max-width:none}
  /* dropdown opens inline inside the mobile drawer */
  .drop-menu{position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0; background:transparent; padding:.2rem 0 .2rem .9rem; min-width:0}
  .drop-menu a{padding:.4rem 0}
  .drop-toggle::after{display:none}
}
@media(min-width:881px) and (max-width:1040px){
  .cards,.svc-list{grid-template-columns:repeat(2,1fr)}
  .tst-track .quote{flex:0 0 calc((100% - 1.5rem)/2)}
}