/* ============================================================
   CALM by Clearview Hospital - shared stylesheet
   Mobile-first. Breakpoints: 700px (tablet), 1080px (desktop)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- THEME TOKENS ---------- */
:root{
  --bg:#F4EEE3;
  --bg-alt:#0B3A5B;
  --surface:#FFFDF9;
  --surface-2:#EAE1D0;
  --text:#2A2924;
  --text-soft:#6B685F;
  --text-inverse:#FFFDF9;
  --border:rgba(11,58,91,0.10);
  --accent:#0B3A5B;
  --accent-deep:#082A43;
  --accent-warm:#BE7350;
  --accent-warm-deep:#8F5335;
  --accent-calm:#8FA487;
  --accent-calm-deep:#5F7358;
  --shadow:rgba(11,58,91,0.16);
  --radius-lg:24px;
  --radius-md:14px;
  color-scheme: light;
}

:root[data-theme="dark"]{
  --bg:#122019;
  --bg-alt:#0D1B14;
  --surface:#1B2C22;
  --surface-2:#213526;
  --text:#ECE9DF;
  --text-soft:#B3BFAC;
  --text-inverse:#ECE9DF;
  --border:rgba(255,255,255,0.09);
  --accent:#7FA377;
  --accent-deep:#628262;
  --accent-warm:#D98F66;
  --accent-warm-deep:#B96F49;
  --accent-calm:#6FA0B8;
  --accent-calm-deep:#4E7C90;
  --shadow:rgba(0,0,0,0.4);
  color-scheme: dark;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  transition:background 0.4s ease, color 0.4s ease;
}
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--text);
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-calm-deep);
}
.section{padding:64px 0;}
@media(min-width:700px){ .section{padding:88px 0;} }

.reveal{opacity:0; transform:translateY(20px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- HEADER ---------- */
header.site-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; max-width:1180px; margin:0 auto;
}
.logo{display:flex; align-items:center;}
.logo-img{height:44px; width:auto; border-radius:9px; display:block; box-shadow:0 4px 14px var(--shadow);}

.nav-right{display:flex; align-items:center; gap:10px;}
.nav-links{
  position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
  background:var(--surface); border-left:1px solid var(--border);
  padding:90px 26px 26px; display:flex; flex-direction:column; gap:22px;
  transform:translateX(100%); transition:transform 0.4s cubic-bezier(.4,0,.2,1);
  z-index:70;
}
.nav-links.open{transform:translateX(0);}
.nav-links a{font-size:16px; font-weight:500; color:var(--text); padding-bottom:2px; border-bottom:1px solid transparent;}
.nav-links a[aria-current="page"]{color:var(--accent-warm-deep); border-color:var(--accent-warm);}
.nav-links .cta-btn{margin-top:8px;}
.nav-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,0.35); opacity:0; pointer-events:none;
  transition:opacity 0.4s ease; z-index:65;
}
.nav-scrim.open{opacity:1; pointer-events:auto;}

.menu-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.menu-btn .bars{width:16px; height:11px; position:relative;}
.menu-btn .bars span{position:absolute; left:0; width:100%; height:1.4px; background:var(--text); transition:transform 0.3s ease, opacity 0.3s ease;}
.menu-btn .bars span:nth-child(1){top:0;}
.menu-btn .bars span:nth-child(2){top:5px;}
.menu-btn .bars span:nth-child(3){top:10px;}
.menu-btn.open .bars span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.menu-btn.open .bars span:nth-child(2){opacity:0;}
.menu-btn.open .bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; flex-shrink:0;
}
.theme-toggle svg{width:17px; height:17px; stroke:var(--text); transition:transform 0.5s ease, opacity 0.3s ease;}
.theme-toggle .sun{position:absolute;}
.theme-toggle .moon{position:absolute; opacity:0; transform:rotate(-40deg) scale(0.5);}
:root[data-theme="dark"] .theme-toggle .sun{opacity:0; transform:rotate(40deg) scale(0.5);}
:root[data-theme="dark"] .theme-toggle .moon{opacity:1; transform:rotate(0) scale(1);}

.cta-btn{
  background:var(--accent); color:var(--text-inverse); font-size:13.5px; font-weight:500;
  padding:10px 18px; border-radius:100px; border:none; cursor:pointer;
  transition:transform 0.25s ease, background 0.25s ease; display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.cta-btn:hover{background:var(--accent-deep); transform:translateY(-2px);}
.cta-btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent);}
.cta-btn.ghost:hover{background:var(--accent); color:var(--text-inverse);}
.cta-btn.sm{padding:8px 14px; font-size:12.5px;}
.cta-btn.block{width:100%; justify-content:center;}

@media(min-width:900px){
  .menu-btn{display:none;}
  .nav-scrim{display:none;}
  .nav-links{
    position:static; width:auto; height:auto; background:transparent; border:none; padding:0;
    flex-direction:row; align-items:center; transform:none; gap:28px;
  }
  .nav-links .cta-btn{margin-top:0;}
  .nav-links a{font-size:14px;}
}

/* ---------- HERO ---------- */
.hero{padding:56px 0 48px; display:flex; flex-direction:column; gap:36px;}
.hero h1{font-size:34px; line-height:1.1; margin:16px 0 16px; font-weight:400;}
.hero h1 em{font-style:italic; color:var(--accent-warm-deep);}
.hero p.lead{font-size:15.5px; color:var(--text-soft); max-width:480px; margin-bottom:26px;}
.hero-ctas{display:flex; gap:12px; align-items:center; margin-bottom:28px; flex-wrap:wrap;}
.trust-line{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-soft); padding-top:18px; border-top:1px solid var(--border);}
.trust-line .badge{width:20px; height:20px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; color:var(--text-inverse); font-size:10px; font-family:'Fraunces',serif; flex-shrink:0;}

.breath-stage{position:relative; height:260px; display:flex; align-items:center; justify-content:center;}
.ring{position:absolute; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);}
.ring.r1{width:210px; height:210px; animation:breathe 11s ease-in-out infinite;}
.ring.r2{width:150px; height:150px; border-color:color-mix(in srgb, var(--accent-warm) 40%, transparent); animation:breathe 11s ease-in-out infinite; animation-delay:0.3s;}
.ring.r3{width:96px; height:96px; background:var(--accent-calm); opacity:0.2; border:none; animation:breathe 11s ease-in-out infinite; animation-delay:0.6s;}
@keyframes breathe{0%{transform:scale(0.72);} 36%{transform:scale(1);} 55%{transform:scale(1);} 100%{transform:scale(0.72);}}
.breath-label{position:relative; z-index:2; font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text); background:var(--bg); padding:6px 13px; border-radius:100px; border:1px solid var(--border);}

@media(min-width:900px){
  .hero{flex-direction:row; align-items:center; gap:56px; padding:88px 0 72px;}
  .hero > div:first-child{flex:1.1;}
  .breath-stage{flex:0.9; height:400px;}
  .hero h1{font-size:48px;}
  .breath-stage .ring.r1{width:300px; height:300px;}
  .breath-stage .ring.r2{width:216px; height:216px;}
  .breath-stage .ring.r3{width:140px; height:140px;}
}

/* ---------- PHILOSOPHY BAND ---------- */
.philosophy{background:var(--bg-alt); color:var(--text-inverse); padding:56px 0;}
.philosophy .wrap{display:flex; flex-direction:column; gap:26px;}
.philosophy .eyebrow{color:var(--accent-calm);}
.philosophy h2{color:var(--text-inverse); font-size:24px; font-weight:400; margin-top:8px;}
.philosophy blockquote{font-family:'Fraunces', serif; font-style:italic; font-size:19px; line-height:1.5; font-weight:300; color:var(--text-inverse);}
.philosophy cite{display:block; margin-top:18px; font-style:normal; font-size:13px; color:color-mix(in srgb, var(--text-inverse) 65%, transparent);}
@media(min-width:900px){
  .philosophy{padding:80px 0;}
  .philosophy .wrap{flex-direction:row; gap:50px; align-items:flex-start;}
  .philosophy .wrap > div:first-child{flex:0.35;}
  .philosophy .wrap > div:last-child{flex:0.65;}
  .philosophy h2{font-size:28px;}
  .philosophy blockquote{font-size:23px; max-width:620px;}
}

/* ---------- GRID / CARDS (services, gallery, blog, team) ---------- */
.section-head{max-width:560px; margin-bottom:36px;}
.section-head h2{font-size:26px; font-weight:400; margin-top:8px;}
.card-grid{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:700px){ .card-grid.cols-3{grid-template-columns:repeat(3,1fr);} .card-grid.cols-2{grid-template-columns:repeat(2,1fr);} }

.card{
  background:var(--surface); border-radius:var(--radius-lg); padding:26px 22px;
  border:1px solid var(--border); transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 36px var(--shadow);}
.card .icon{width:42px; height:42px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-family:'Fraunces',serif; font-size:17px; color:var(--accent-warm-deep);}
.card h3{font-size:18px; font-weight:500; margin-bottom:8px;}
.card p{font-size:13.5px; color:var(--text-soft); margin-bottom:14px;}
.card .link{font-size:12.5px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px; cursor:pointer;}
.card .link .arrow{transition:transform 0.25s ease;}
.card:hover .link .arrow{transform:translateX(4px);}

/* ---------- AUTOMATION DEMO ---------- */
.automation{background:var(--surface-2); padding:56px 0;}
.auto-grid{display:flex; flex-direction:column; gap:40px; align-items:center;}
.auto-copy h2{font-size:24px; font-weight:400; margin:8px 0 14px;}
.auto-copy p{color:var(--text-soft); font-size:14px; margin-bottom:18px; max-width:440px;}
.auto-features{list-style:none; display:flex; flex-direction:column; gap:12px;}
.auto-features li{display:flex; gap:11px; align-items:flex-start; font-size:13.5px;}
.auto-features .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-warm); margin-top:7px; flex-shrink:0;}
@media(min-width:900px){
  .automation{padding:80px 0;}
  .auto-grid{flex-direction:row; gap:56px; align-items:center;}
  .auto-grid > div:first-child{flex:0.9;}
  .auto-grid > div:last-child{flex:1.1;}
}

.phone{background:var(--surface); border-radius:24px; padding:8px; box-shadow:0 24px 48px var(--shadow); max-width:320px; margin:0 auto; border:1px solid var(--border);}
.phone-screen{background:var(--bg); border-radius:18px; padding:16px; min-height:360px; display:flex; flex-direction:column;}
.phone-header{display:flex; align-items:center; gap:9px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--border);}
.phone-header .avatar{width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--text-inverse); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:13px;}
.phone-header .who{font-size:12.5px; font-weight:600;}
.phone-header .status{font-size:10.5px; color:var(--accent-calm-deep);}
.chat{display:flex; flex-direction:column; gap:9px; flex:1;}
.bubble{max-width:82%; padding:9px 13px; border-radius:15px; font-size:12.5px; opacity:0; transform:translateY(8px); animation:pop-in 0.5s ease forwards;}
.bubble.bot{background:var(--surface); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px;}
.bubble.user{background:var(--accent); color:var(--text-inverse); align-self:flex-end; border-bottom-right-radius:4px;}
@keyframes pop-in{to{opacity:1; transform:translateY(0);}}
.typing{align-self:flex-start; display:flex; gap:4px; padding:11px 13px; background:var(--surface); border-radius:15px; border-bottom-left-radius:4px; border:1px solid var(--border); opacity:0; animation:pop-in 0.4s ease forwards;}
.typing span{width:4.5px; height:4.5px; border-radius:50%; background:var(--text-soft); animation:blink 1.2s infinite;}
.typing span:nth-child(2){animation-delay:0.2s;} .typing span:nth-child(3){animation-delay:0.4s;}
@keyframes blink{0%,60%,100%{opacity:0.3;} 30%{opacity:1;}}
.quick-replies{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; opacity:0; animation:pop-in 0.5s ease forwards;}
.quick-replies button{font-size:11.5px; padding:7px 11px; border-radius:100px; border:1px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer;}

/* ---------- TRUST STRIP ---------- */
.trust{padding:56px 0; text-align:center;}
.trust .stats{display:flex; justify-content:center; gap:14px; margin-top:32px; flex-wrap:wrap;}
.stat{min-width:110px;}
.stat b{display:block; font-family:'Fraunces',serif; font-size:28px; font-weight:400; color:var(--text);}
.stat span{font-size:12px; color:var(--text-soft);}

/* ---------- GALLERY ---------- */
.gallery-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;}
.filter-btn{
  font-size:12.5px; padding:8px 15px; border-radius:100px; border:1px solid var(--border);
  background:var(--surface); color:var(--text-soft); cursor:pointer; transition:all 0.25s ease;
}
.filter-btn.active, .filter-btn:hover{background:var(--accent); color:var(--text-inverse); border-color:var(--accent);}
.gallery-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media(min-width:700px){ .gallery-grid{grid-template-columns:repeat(3,1fr); gap:16px;} }
.gallery-tile{
  aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; position:relative;
  background:linear-gradient(135deg, var(--surface-2), var(--surface));
  display:flex; align-items:flex-end; padding:12px; border:1px solid var(--border);
  transition:transform 0.4s ease;
}
.gallery-tile:hover{transform:scale(1.03);}
.gallery-tile .tag{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-soft); background:var(--surface); padding:4px 9px; border-radius:100px; border:1px solid var(--border);}
.gallery-note{font-size:12.5px; color:var(--text-soft); margin-top:20px;}
/* neutral class used by JS filtering only - carries no visual styling of its own,
   so it can be applied to both square gallery tiles and blog cards safely */
.filter-item{transition:opacity 0.3s ease, transform 0.3s ease;}

/* ---------- BLOG ---------- */
.blog-card{display:flex; flex-direction:column; gap:10px;}
.blog-card .thumb{aspect-ratio:16/10; border-radius:var(--radius-md); background:linear-gradient(140deg, var(--surface-2), var(--accent-calm) 180%); opacity:0.9; margin-bottom:6px;}
.blog-meta{display:flex; gap:10px; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-soft);}
.blog-meta .cat{color:var(--accent-warm-deep);}

/* ---------- CONTACT ---------- */
.contact-grid{display:flex; flex-direction:column; gap:32px;}
@media(min-width:900px){ .contact-grid{flex-direction:row; gap:56px;} .contact-grid > div{flex:1;} }
.info-row{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--border);}
.info-row .ic{width:36px; height:36px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent-warm-deep); font-size:15px;}
.info-row .lbl{font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-soft); font-family:'IBM Plex Mono',monospace; margin-bottom:3px;}
.info-row .val{font-size:14px;}
.map-block{margin-top:20px; aspect-ratio:16/9; border-radius:var(--radius-md); background:linear-gradient(135deg, var(--surface-2), var(--surface)); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-soft); font-size:12.5px; font-family:'IBM Plex Mono',monospace;}

/* ---------- FORMS (contact + modal share styles) ---------- */
.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.form-field label{font-size:12px; font-weight:600; color:var(--text-soft);}
.form-field input, .form-field select, .form-field textarea{
  font-family:'Inter',sans-serif; font-size:14px; padding:11px 13px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg); color:var(--text); outline:none;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form-field textarea{resize:vertical; min-height:90px;}
.form-row-2{display:grid; grid-template-columns:1fr; gap:0 14px;}
@media(min-width:520px){ .form-row-2{grid-template-columns:1fr 1fr;} }

/* ---------- ABOUT / TEAM ---------- */
.team-card{text-align:center; display:flex; flex-direction:column; align-items:center;}
.team-card .avatar{width:76px; height:76px; border-radius:50%; background:var(--surface-2); margin-bottom:14px; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:24px; color:var(--accent-warm-deep);}
.team-card h3{font-size:16px; margin-bottom:3px;}
.team-card .role{font-size:12px; color:var(--accent-calm-deep); font-weight:600; margin-bottom:10px;}
.team-card p{font-size:13px; color:var(--text-soft);}

/* ---------- FOOTER ---------- */
footer.site-footer{background:var(--bg-alt); color:color-mix(in srgb, var(--text-inverse) 78%, transparent); padding:48px 0 24px;}
.foot-grid{display:grid; grid-template-columns:1fr; gap:30px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.12);}
@media(min-width:700px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;} }
footer h4{color:var(--text-inverse); font-size:12.5px; font-weight:600; margin-bottom:14px; letter-spacing:0.03em;}
footer ul{list-style:none; display:flex; flex-direction:column; gap:9px;}
footer ul li a{font-size:12.5px; color:color-mix(in srgb, var(--text-inverse) 68%, transparent); transition:color 0.2s ease;}
footer ul li a:hover{color:var(--text-inverse);}
.foot-bottom{display:flex; flex-direction:column; gap:6px; justify-content:space-between; padding-top:20px; font-size:11.5px; color:color-mix(in srgb, var(--text-inverse) 48%, transparent);}
@media(min-width:700px){ .foot-bottom{flex-direction:row; align-items:center;} }
.foot-brand{font-family:'Fraunces',serif; color:var(--text-inverse); font-size:16px; margin-bottom:8px;}
.foot-sub{font-size:12.5px; max-width:280px; color:color-mix(in srgb, var(--text-inverse) 58%, transparent); margin-bottom:16px;}

/* ---------- MODAL (booking form) ---------- */
.modal-scrim{
  position:fixed; inset:0; background:rgba(10,20,15,0.55); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity 0.3s ease; z-index:200;
  display:flex; align-items:flex-end; justify-content:center;
}
.modal-scrim.open{opacity:1; pointer-events:auto;}
@media(min-width:700px){ .modal-scrim{align-items:center;} }
.modal-panel{
  background:var(--surface); width:100%; max-width:520px; max-height:92vh; overflow-y:auto;
  border-radius:22px 22px 0 0; padding:26px 22px 30px; position:relative;
  transform:translateY(100%); transition:transform 0.4s cubic-bezier(.4,0,.2,1);
  border:1px solid var(--border);
}
.modal-scrim.open .modal-panel{transform:translateY(0);}
@media(min-width:700px){
  .modal-panel{border-radius:22px; transform:translateY(24px) scale(0.97); opacity:0;}
  .modal-scrim.open .modal-panel{transform:translateY(0) scale(1); opacity:1; transition:transform 0.35s ease, opacity 0.35s ease;}
}
.modal-close{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--bg); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--text-soft);}
.modal-panel h2{font-size:21px; margin-bottom:6px; font-weight:400;}
.modal-panel .sub{font-size:13px; color:var(--text-soft); margin-bottom:22px;}
.modal-success{display:none; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:20px 0;}
.modal-success.show{display:flex;}
.modal-success .tick{
  width:56px; height:56px; border-radius:50%; background:var(--accent-calm); color:var(--text-inverse);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.modal-form.hide{display:none;}
.hide{display:none;}

/* ---------- FLOATING WIDGETS ---------- */
.floating-widgets{position:fixed; z-index:150; inset:auto 16px 16px auto; display:flex; flex-direction:column; align-items:flex-end; gap:10px;}
@media(min-width:700px){ .floating-widgets{inset:auto 28px 28px auto;} }

.chat-fab, .call-fab{
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px var(--shadow);
  color:var(--text-inverse); position:relative; flex-shrink:0;
}
.chat-fab{background:var(--accent);}
.call-fab{background:var(--accent-warm);}
.chat-fab:hover, .call-fab:hover{transform:translateY(-2px);}
.fab-ping{position:absolute; inset:-4px; border-radius:50%; border:1.5px solid currentColor; opacity:0.5; animation:ping 2.4s ease-out infinite;}
@keyframes ping{0%{transform:scale(0.85); opacity:0.55;} 100%{transform:scale(1.35); opacity:0;}}

.call-widget-wrap{position:fixed; left:16px; bottom:16px; z-index:150;}
@media(min-width:700px){ .call-widget-wrap{left:28px; bottom:28px;} }

.chat-panel, .call-panel{
  position:absolute; bottom:70px; right:0; width:min(88vw,340px);
  background:var(--surface); border-radius:20px; border:1px solid var(--border);
  box-shadow:0 24px 50px var(--shadow); overflow:hidden;
  transform:translateY(14px) scale(0.96); opacity:0; pointer-events:none;
  transition:transform 0.3s ease, opacity 0.3s ease;
}
.call-panel{right:auto; left:0;}
.chat-panel.open, .call-panel.open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;}

.widget-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); background:var(--surface-2);}
.widget-head .avatar{width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--text-inverse); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:13px;}
.widget-head .info b{display:block; font-size:12.5px;}
.widget-head .info span{font-size:10.5px; color:var(--accent-calm-deep);}
.widget-head .close-w{margin-left:auto; background:none; border:none; color:var(--text-soft); font-size:16px; cursor:pointer;}

.chat-body{padding:14px 14px 10px; max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:9px;}
.chat-input-row{display:flex; gap:8px; padding:10px 12px 14px;}
.chat-input-row input{flex:1; font-size:13px; padding:9px 12px; border-radius:100px; border:1px solid var(--border); background:var(--bg); color:var(--text); outline:none;}
.chat-input-row button{width:36px; height:36px; border-radius:50%; background:var(--accent); color:var(--text-inverse); border:none; cursor:pointer; flex-shrink:0;}

.call-body{padding:16px;}
.call-body p{font-size:12.5px; color:var(--text-soft); margin-bottom:14px;}
.call-status{display:none; align-items:center; gap:10px; font-size:12.5px; color:var(--accent-calm-deep); margin-top:12px;}
.call-status.show{display:flex;}
.call-status .dot{width:7px; height:7px; border-radius:50%; background:var(--accent-calm-deep); animation:blink 1s infinite;}

/* ---------- PRELOADER (index only) ---------- */
#preloader{position:fixed; inset:0; z-index:999; background:var(--bg); display:flex; align-items:center; justify-content:center;}
#preloader .pl-stage{position:relative; display:flex; flex-direction:column; align-items:center; gap:22px;}
#preloader .pl-rings{position:relative; width:130px; height:130px; display:flex; align-items:center; justify-content:center;}
#preloader .pl-ring{position:absolute; border-radius:50%; border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); transform:scale(0); opacity:0;}
#preloader .pl-ring.a{width:130px; height:130px;}
#preloader .pl-ring.b{width:90px; height:90px; border-color:color-mix(in srgb, var(--accent-warm) 42%, transparent);}
#preloader .pl-core{position:relative; width:12px; height:12px; border-radius:50%; background:var(--accent-warm); opacity:0;}
#preloader .pl-logo{width:88px; height:auto; border-radius:14px; opacity:0; transform:scale(0.85); box-shadow:0 10px 30px var(--shadow);}
#preloader .pl-track{width:140px; height:2px; background:var(--border); border-radius:2px; overflow:hidden;}
#preloader .pl-bar{width:0%; height:100%; background:var(--accent);}
#preloader .pl-tag{font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-soft); opacity:0;}

#siteContent{visibility:hidden;}
#siteContent.ready{visibility:visible;}
body:not(.has-preloader) #siteContent{visibility:visible;}

/* ---------- QUIZ ---------- */
.quiz-progress{display:flex; justify-content:center; gap:8px; margin-bottom:24px;}
.quiz-progress .dot{width:8px; height:8px; border-radius:50%; background:var(--border); transition:background 0.3s ease, transform 0.3s ease;}
.quiz-progress .dot.active{background:var(--accent); transform:scale(1.2);}
.quiz-step h2{font-size:19px; font-weight:400; margin-bottom:18px;}
.quiz-options{display:flex; flex-direction:column; gap:10px;}
.quiz-opt{
  text-align:left; padding:14px 16px; border-radius:14px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:14px; cursor:pointer;
  transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.quiz-opt:hover{border-color:var(--accent); background:var(--surface-2); transform:translateX(2px);}
.quiz-result{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:10px 0;}
.quiz-result h2{font-size:22px; font-weight:400; margin-top:4px;}
.quiz-result .sub{max-width:380px;}

/* ---------- CALL WIDGET (direct call, answered by AI voice agent) ---------- */
.call-body .call-number{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Fraunces',serif; font-size:19px; color:var(--text);
  background:var(--surface-2); border-radius:14px; padding:14px; margin-bottom:14px;
}
.call-body .ai-note{
  display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--accent-calm-deep);
  margin-top:12px; justify-content:center;
}
.call-body .ai-note .dot2{width:6px; height:6px; border-radius:50%; background:var(--accent-calm-deep); animation:blink 1.4s infinite;}
.page-hero{padding:44px 0 8px;}
.page-hero .eyebrow{margin-bottom:10px;}
.page-hero h1{font-size:30px; font-weight:400;}
.page-hero p{font-size:14px; color:var(--text-soft); max-width:520px; margin-top:12px;}
@media(min-width:900px){ .page-hero{padding:64px 0 8px;} .page-hero h1{font-size:38px;} }