:root{
  --bg:#f7fafb; --card:#ffffff; --ink:#0d2b35; --ink-soft:#4d6670;
  --sage:#0396a6; --sage-dark:#03658c; --blush:#e3f4f6; --line:#dce8ea;
  --accent:#f57615; --wa:#25D366;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#0d2b35; --card:#123845; --ink:#eaf6f7; --ink-soft:#a9c4cb; --line:#1c4652; }
}
:root[data-theme="dark"]{ --bg:#0d2b35; --card:#123845; --ink:#eaf6f7; --ink-soft:#a9c4cb; --line:#1c4652; }
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,70px);}
body{font-family:'Nunito Sans',sans-serif; background:var(--bg); color:var(--ink); line-height:1.65; overflow-x:hidden;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; color:var(--ink);}
img{max-width:100%;}
.wrap{max-width:1000px; margin:0 auto; padding:0 20px;}
header{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--line); padding:env(safe-area-inset-top,0px) 0 0;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 20px; max-width:1000px; margin:0 auto;}
.logo{font-family:'Fraunces',serif; font-weight:600; font-size:1.1rem; display:flex; align-items:center; gap:8px;}
.logo img{width:34px; height:34px; border-radius:50%; object-fit:cover;}
.nav a{color:var(--ink-soft); text-decoration:none; font-size:.92rem; margin-left:18px;}
.nav a.cta{background:var(--sage); color:#fff; padding:8px 16px; border-radius:30px;}
.navlinks{display:none;}
@media(min-width:720px){.navlinks{display:flex; align-items:center;}}
section{padding:56px 0;}
.hero{padding-top:48px;}
.hero-inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px;}
.avatar{width:140px; height:140px; border-radius:50%; background:linear-gradient(145deg,var(--sage),var(--blush)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Fraunces',serif; font-size:2.2rem; box-shadow:0 8px 24px rgba(0,0,0,.08);}
.hero-photo{width:160px; height:160px; border-radius:50%; object-fit:cover; object-position:center 15%; box-shadow:0 10px 28px rgba(0,0,0,.14); border:4px solid var(--card);}
.hero h1{font-size:2rem;}
.hero p.role{color:var(--sage-dark); font-weight:600; letter-spacing:.02em;}
.hero p.tag{max-width:520px; color:var(--ink-soft); font-size:1.02rem;}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px;}
.btn{display:inline-block; padding:13px 26px; border-radius:30px; text-decoration:none; font-weight:700; font-size:.95rem; border:1px solid transparent;}
.btn-primary{background:var(--sage); color:#fff;}
.btn-wa{background:var(--wa); color:#fff;}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line);}
.section-title{text-align:center; margin-bottom:8px;}
.section-sub{text-align:center; color:var(--ink-soft); max-width:560px; margin:0 auto 36px;}
.about{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.about-grid{display:grid; gap:28px;}
@media(min-width:720px){.about-grid{grid-template-columns:1fr 1fr; align-items:center;}}
.about ul{margin-top:14px; padding-left:18px; color:var(--ink-soft);}
.about li{margin-bottom:6px;}
.cards{display:grid; gap:18px; grid-template-columns:1fr;}
@media(min-width:640px){.cards{grid-template-columns:repeat(3,1fr);}}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.card img{width:100%; height:170px; object-fit:cover; display:block;}
.card .card-body{padding:20px 22px;}
.card h3{font-size:1.1rem; margin-bottom:8px;}
.card p{color:var(--ink-soft); font-size:.94rem;}
.gallery{display:grid; gap:14px; grid-template-columns:1fr 1fr;}
.gallery img{width:100%; height:220px; object-fit:cover; border-radius:14px; display:block;}
.careers{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.workshop-cta{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:32px 26px; text-align:center; max-width:640px; margin:0 auto;}
.chat-bubble{position:fixed; bottom:calc(20px + env(safe-area-inset-bottom,0px)); right:20px; width:58px; height:58px; border-radius:50%; background:var(--sage); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 8px 20px rgba(0,0,0,.2); cursor:pointer; z-index:40; border:none;}
.chat-panel{position:fixed; bottom:calc(88px + env(safe-area-inset-bottom,0px)); right:20px; width:290px; max-width:calc(100vw - 40px); background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,.18); z-index:40; display:none; overflow:hidden;}
.chat-panel.open{display:block;}
.chat-head{background:var(--sage); color:#fff; padding:14px 16px; font-weight:700; font-size:.95rem;}
.chat-body{max-height:320px; overflow-y:auto; padding:14px; font-size:.88rem;}
.chat-q{display:block; width:100%; text-align:left; background:var(--bg); border:1px solid var(--line); color:var(--ink); padding:9px 12px; border-radius:10px; margin-bottom:8px; cursor:pointer; font-size:.86rem;}
.chat-a{background:var(--blush); color:var(--sage-dark); padding:10px 12px; border-radius:10px; margin-bottom:10px; font-size:.86rem;}
.tags{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:28px;}
.tag{background:var(--blush); color:var(--sage-dark); padding:6px 14px; border-radius:20px; font-size:.85rem; font-weight:600;}
.approach{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.steps{display:grid; gap:20px; margin-top:10px;}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr);}}
.step{padding:18px; border-left:3px solid var(--sage); background:var(--bg); border-radius:0 12px 12px 0;}
.testimonials{display:grid; gap:18px;}
@media(min-width:640px){.testimonials{grid-template-columns:repeat(3,1fr);}}
.t-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; font-style:italic; color:var(--ink-soft); font-size:.93rem;}
.t-card span{display:block; margin-top:12px; font-style:normal; font-weight:700; color:var(--sage-dark); font-size:.85rem;}
.faq{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
details{border-bottom:1px solid var(--line); padding:16px 4px;}
summary{cursor:pointer; font-weight:700; list-style:none;}
summary::-webkit-details-marker{display:none;}
summary:before{content:"+ "; color:var(--sage-dark);}
details[open] summary:before{content:"– ";}
details p{color:var(--ink-soft); margin-top:10px; font-size:.94rem;}
.booking{text-align:center;}
.booking .btn{margin:6px;}
.contact-grid{display:grid; gap:14px; max-width:420px; margin:0 auto;}
.contact-row{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); padding:14px 18px; border-radius:14px; text-decoration:none; color:var(--ink);}
.contact-row .ic{font-size:1.3rem; width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-row .ic svg{width:22px; height:22px;}
footer{text-align:center; padding:34px 20px; color:var(--ink-soft); font-size:.85rem;}
footer a{color:var(--sage-dark); text-decoration:none;}
.note{background:#fff1e6; color:var(--accent); font-weight:700; font-size:.88rem; text-align:center; padding:10px 16px; border-radius:10px; max-width:640px; margin:10px auto 0; border:1px solid #fbd9bd;}

.blog-head{padding:48px 0 8px; text-align:center}
.post-list{display:grid; gap:18px; max-width:760px; margin:24px auto 60px}
.post-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; text-decoration:none; color:var(--ink); display:block}
.post-card h2{font-size:1.25rem; margin:6px 0}
.post-card p{color:var(--ink-soft); font-size:.95rem}
.meta{color:var(--sage-dark); font-size:.82rem; font-weight:700}
article{max-width:700px; margin:0 auto; padding:40px 20px 20px}
article h1{font-size:1.9rem; line-height:1.25; margin:8px 0 18px}
article h2{font-size:1.25rem; margin:28px 0 8px}
article p,article li{color:var(--ink); font-size:1.02rem; margin-bottom:14px}
article ul{padding-left:20px}
.disclaimer{background:var(--blush); border-radius:12px; padding:14px 16px; font-size:.88rem; color:var(--ink-soft); margin:30px 0}
.crisis{max-width:640px; margin:0 auto 10px; font-size:.82rem; color:var(--ink-soft)}
.skip{position:absolute; left:-999px} .skip:focus{left:10px; top:10px; background:#fff; padding:8px; z-index:99}