/* Tasscreative Multisite UI v4.5 — modern mobile navigation + flexible about detail */
.mobile-menu-backdrop,
.mobile-nav-head,
.mobile-nav-footer,
.mobile-nav-icon,
.mobile-nav-copy small,
.mobile-nav-arrow{display:none}

.about-action-button{appearance:none}
.about-action-button i{font-style:normal;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.about-action-button:hover i{transform:translate(2px,-2px) rotate(4deg)}
.about-action-button[aria-expanded="true"] i{transform:rotate(180deg)}

.about-expand-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .62s cubic-bezier(.22,1,.36,1),opacity .38s ease;margin-top:0}
.about-expand-panel.is-open{grid-template-rows:1fr;opacity:1;margin-top:34px}
.about-expand-clip{min-height:0;overflow:hidden}
.about-expand-card{position:relative;padding:42px 46px 44px;border:1px solid color-mix(in srgb,var(--about-button,var(--primary)) 17%,transparent);border-radius:30px;background:color-mix(in srgb,var(--section-bg,#fff) 68%,#fff);box-shadow:0 26px 65px rgba(31,74,104,.11);overflow:hidden}
.about-expand-card:before{content:"";position:absolute;right:-65px;top:-85px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--about-button,var(--primary)) 22%,transparent),transparent 67%)}
.about-detail-heading{position:relative;z-index:1;max-width:780px;margin-bottom:24px}
.about-detail-heading span,.about-modal-kicker{display:block;margin-bottom:7px;color:var(--about-button,var(--primary));font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.about-detail-heading h3,.about-modal-dialog h3{margin:0;font-family:var(--heading-font);font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.035em;color:var(--section-title,var(--text))}
.about-rich-content{position:relative;z-index:1;max-width:900px;color:var(--section-text,var(--text));font-size:15px;line-height:1.85}
.about-rich-content>*:first-child{margin-top:0}.about-rich-content>*:last-child{margin-bottom:0}
.about-rich-content h2,.about-rich-content h3,.about-rich-content h4{font-family:var(--heading-font);color:var(--section-title,var(--text));letter-spacing:-.025em;line-height:1.18;margin:30px 0 12px}
.about-rich-content h2{font-size:30px}.about-rich-content h3{font-size:24px}.about-rich-content h4{font-size:19px}
.about-rich-content p{margin:0 0 16px}.about-rich-content ul,.about-rich-content ol{padding-left:22px;margin:0 0 18px}.about-rich-content li{margin:7px 0}
.about-rich-content a{color:var(--about-button,var(--primary));font-weight:800;text-decoration:underline;text-underline-offset:3px}
.about-rich-content blockquote{margin:22px 0;padding:18px 20px;border-left:4px solid var(--about-button,var(--primary));border-radius:0 16px 16px 0;background:color-mix(in srgb,var(--about-button,var(--primary)) 8%,#fff)}
.about-detail-close{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;margin-top:28px;padding:11px 15px;border:1px solid color-mix(in srgb,var(--about-button,var(--primary)) 24%,transparent);border-radius:13px;background:#fff;color:var(--about-button,var(--primary));font-weight:850;cursor:pointer;transition:.25s ease}
.about-detail-close:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(28,72,104,.09)}
.about-detail-close i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:color-mix(in srgb,var(--about-button,var(--primary)) 10%,#fff);font-style:normal}

.about-modal{position:fixed;z-index:520;inset:0;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease}
.about-modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.about-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(12,32,51,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer}
.about-modal-dialog{position:relative;width:min(760px,100%);max-height:min(82vh,820px);overflow:auto;padding:46px 48px 48px;border:1px solid rgba(255,255,255,.7);border-radius:32px;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--soft-blue,#eef8ff) 38%,#fff));box-shadow:0 34px 100px rgba(8,31,49,.32);transform:translateY(26px) scale(.96);transition:transform .42s cubic-bezier(.22,1,.36,1);overscroll-behavior:contain}
.about-modal.is-open .about-modal-dialog{transform:none}
.about-modal-x{position:sticky;z-index:3;top:0;float:right;width:42px;height:42px;margin:-20px -20px 0 18px;border:1px solid #e6edf3;border-radius:14px;background:#fff;color:var(--text);font-size:25px;line-height:1;cursor:pointer;box-shadow:0 10px 24px rgba(25,64,91,.1);transition:.25s ease}
.about-modal-x:hover{transform:rotate(6deg) scale(1.04);color:var(--secondary)}
body.about-modal-open{overflow:hidden}

.about-float-dot{position:absolute;z-index:4;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.65),0 8px 18px rgba(31,76,108,.12);animation:aboutFloat 4s ease-in-out infinite}
.about-float-dot-one{width:24px;height:24px;left:2%;top:18%;background:var(--accent)}
.about-float-dot-two{width:17px;height:17px;right:8%;bottom:14%;background:var(--secondary);animation-delay:-1.7s}
.about-float-star{position:absolute;z-index:4;right:2%;top:10%;color:var(--primary);font-size:26px;animation:aboutStar 3s ease-in-out infinite}
@keyframes aboutFloat{50%{transform:translateY(-12px) rotate(8deg)}}
@keyframes aboutStar{50%{transform:scale(1.18) rotate(14deg);opacity:.7}}

@media(max-width:920px){
  html{scroll-padding-top:86px}
  body.menu-open{overflow:hidden;touch-action:none}

  .mobile-menu-backdrop{display:block;position:fixed;z-index:438;inset:0;border:0;background:rgba(9,29,45,.52);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
  body.menu-open .mobile-menu-backdrop{opacity:1;visibility:visible;pointer-events:auto}

  .menu-toggle{position:relative;z-index:455;display:grid!important;place-items:center;width:46px!important;height:46px!important;padding:0!important;border:1px solid color-mix(in srgb,var(--primary) 14%,var(--header-border))!important;border-radius:16px!important;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--soft-blue) 56%,#fff))!important;box-shadow:0 10px 26px rgba(28,76,110,.11),inset 0 1px 0 rgba(255,255,255,.9);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
  .menu-toggle:before{content:"";position:absolute;inset:6px;border-radius:12px;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.95),transparent 45%);pointer-events:none}
  .menu-toggle span{position:absolute;left:13px;width:20px;height:2.5px;margin:0!important;border-radius:999px;background:var(--primary)!important;transition:transform .38s cubic-bezier(.22,1,.36,1),top .3s ease,opacity .2s ease,width .3s ease}
  .menu-toggle span:nth-child(1){top:15px}.menu-toggle span:nth-child(2){top:22px;width:15px}.menu-toggle span:nth-child(3){top:29px}
  body.menu-open .menu-toggle{background:linear-gradient(145deg,var(--secondary),color-mix(in srgb,var(--secondary) 72%,var(--primary)))!important;box-shadow:0 14px 30px color-mix(in srgb,var(--secondary) 30%,transparent)}
  body.menu-open .menu-toggle span{top:22px;background:#fff!important}
  body.menu-open .menu-toggle span:nth-child(1){transform:rotate(45deg)}
  body.menu-open .menu-toggle span:nth-child(2){opacity:0;transform:translateX(10px)}
  body.menu-open .menu-toggle span:nth-child(3){transform:rotate(-45deg)}

  .main-nav,
  .template-test-clinic .main-nav{
    display:flex!important;position:fixed!important;z-index:450!important;top:12px!important;right:12px!important;bottom:12px!important;left:auto!important;width:min(88vw,392px)!important;max-height:none!important;margin:0!important;padding:14px 14px 18px!important;gap:8px!important;align-items:stretch!important;justify-content:flex-start!important;flex-direction:column!important;border:1px solid rgba(255,255,255,.78)!important;border-radius:28px!important;background:linear-gradient(165deg,rgba(255,255,255,.98),color-mix(in srgb,var(--soft-blue) 56%,#fff))!important;box-shadow:-25px 22px 80px rgba(8,33,52,.24),inset 0 1px 0 #fff!important;backdrop-filter:blur(24px) saturate(150%)!important;-webkit-backdrop-filter:blur(24px) saturate(150%)!important;overflow:hidden auto!important;opacity:1!important;visibility:visible!important;transform:translateX(calc(100% + 34px)) scale(.97)!important;transform-origin:right center;transition:transform .5s cubic-bezier(.22,1,.36,1)!important;overscroll-behavior:contain
  }
  body.menu-open .main-nav{transform:none!important}
  .main-nav:before{content:"";position:absolute;z-index:-1;right:-70px;top:-70px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 68%)}
  .main-nav:after{content:"";position:absolute;z-index:-1;left:-72px;bottom:70px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%)}
  .main-nav .nav-active-indicator{display:none!important}

  .mobile-nav-head{display:flex;align-items:center;gap:12px;min-height:64px;padding:5px 5px 13px;border-bottom:1px solid color-mix(in srgb,var(--header-border) 78%,transparent)}
  .mobile-nav-brand{display:flex;align-items:center;gap:10px;min-width:0}
  .mobile-nav-brand img{width:68px;height:46px;object-fit:contain;flex:0 0 auto}
  .mobile-nav-brand span{display:flex;min-width:0;flex-direction:column}
  .mobile-nav-brand b{overflow:hidden;color:var(--text);font-size:13px;text-overflow:ellipsis;white-space:nowrap}
  .mobile-nav-brand small{color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
  .mobile-nav-close{display:grid;place-items:center;width:38px;height:38px;margin-left:auto;border:1px solid color-mix(in srgb,var(--primary) 12%,var(--header-border));border-radius:13px;background:#fff;color:var(--primary);font-size:23px;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(28,75,108,.08)}

  .main-nav>a{position:relative;display:grid!important;grid-template-columns:48px minmax(0,1fr) 28px;align-items:center;gap:12px;min-height:64px;padding:8px 10px!important;border:1px solid rgba(29,85,122,.075)!important;border-radius:18px!important;background:rgba(255,255,255,.72)!important;color:var(--text)!important;box-shadow:0 7px 18px rgba(28,72,101,.055);font-size:13px!important;text-align:left;opacity:0;transform:translateX(28px);transition:opacity .32s ease,transform .46s cubic-bezier(.22,1,.36,1),background .24s ease,border-color .24s ease,box-shadow .24s ease!important}
  body.menu-open .main-nav>a{opacity:1;transform:none;transition-delay:calc(var(--menu-index,0) * 42ms + 90ms)!important}
  .main-nav>a:hover,.main-nav>a.is-active{background:#fff!important;border-color:color-mix(in srgb,var(--primary) 22%,transparent)!important;box-shadow:0 12px 28px rgba(27,76,108,.1)!important;transform:translateX(2px)!important}
  .main-nav>a:after{display:none!important}
  .mobile-nav-icon{position:relative;display:grid;width:48px;height:48px;place-items:center;border-radius:16px;color:var(--primary);background:linear-gradient(145deg,color-mix(in srgb,var(--soft-blue) 82%,#fff),#fff);box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(25,83,120,.09);overflow:hidden}
  .mobile-nav-icon:after{content:"";position:absolute;right:-6px;bottom:-7px;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--accent) 45%,transparent)}
  .mobile-nav-icon svg{position:relative;z-index:1;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .32s cubic-bezier(.22,1,.36,1)}
  .main-nav>a:nth-of-type(2n) .mobile-nav-icon{color:var(--secondary);background:linear-gradient(145deg,color-mix(in srgb,var(--soft-pink) 82%,#fff),#fff)}
  .main-nav>a:nth-of-type(3n) .mobile-nav-icon{color:color-mix(in srgb,var(--accent) 72%,#9b6710);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 22%,#fff),#fff)}
  .main-nav>a:hover .mobile-nav-icon svg,.main-nav>a.is-active .mobile-nav-icon svg{transform:scale(1.12) rotate(-5deg)}
  .mobile-nav-copy{display:flex;min-width:0;flex-direction:column;line-height:1.25}
  .mobile-nav-copy b{overflow:hidden;font-size:13px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
  .mobile-nav-copy small{display:block;margin-top:4px;color:var(--muted);font-size:9px;font-weight:650}
  .mobile-nav-arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:color-mix(in srgb,var(--primary) 8%,#fff);color:var(--primary);font-style:normal;font-weight:900;transition:transform .25s ease,background .25s ease}
  .main-nav>a:hover .mobile-nav-arrow,.main-nav>a.is-active .mobile-nav-arrow{transform:translateX(2px);background:color-mix(in srgb,var(--primary) 14%,#fff)}

  .mobile-nav-footer{position:relative;display:flex;align-items:center;min-height:88px;margin-top:auto;padding:12px 12px 8px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 9%,#fff),color-mix(in srgb,var(--secondary) 8%,#fff));overflow:hidden}
  .mobile-nav-footer-copy{position:relative;z-index:2;max-width:175px}
  .mobile-nav-footer-copy strong{display:block;color:var(--primary);font-family:var(--heading-font);font-size:17px;line-height:1.08}
  .mobile-nav-footer-copy small{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.4}
  .mobile-nav-characters{position:absolute;right:1px;bottom:-7px;width:126px;max-height:103px;object-fit:contain;object-position:right bottom;filter:drop-shadow(0 10px 12px rgba(23,70,100,.12));animation:mobileCharacterHello 3.2s ease-in-out infinite}
  .template-test-clinic .mobile-nav-characters{display:none}
  .template-test-clinic .mobile-nav-footer{min-height:70px;background:linear-gradient(135deg,#f0efff,#e9fbf7)}
  .template-test-clinic .mobile-nav-footer-copy strong{color:var(--tc-primary)}
  @keyframes mobileCharacterHello{50%{transform:translateY(-4px) rotate(1deg)}}

  .header-actions{display:flex!important}
  .header-actions .phone-link{display:none!important}
  .header-appointment{margin-left:auto}

  .about-modal{padding:12px}
  .about-modal-dialog{max-height:88vh;padding:38px 24px 30px;border-radius:24px}
  .about-modal-x{margin:-15px -8px 0 12px}
  .about-expand-card{padding:30px 26px 32px;border-radius:24px}
}

@media(max-width:640px){
  /* Modern, playful service icon system on the children's template */
  .template-kids .service-card{justify-content:flex-start;padding-top:20px;background:linear-gradient(155deg,var(--card-bg),color-mix(in srgb,var(--hover-color) 18%,var(--card-bg)));border-color:color-mix(in srgb,var(--icon-color) 12%,transparent);box-shadow:0 13px 28px rgba(24,75,108,.1),inset 0 1px 0 rgba(255,255,255,.9)}
  .template-kids .service-card:before{width:90px;height:90px;right:-35px;bottom:-35px;opacity:.48}
  .template-kids .service-icon{position:relative;width:62px;height:62px;margin-bottom:14px;border-radius:21px;background:linear-gradient(145deg,#fff,var(--icon-bg));box-shadow:0 12px 24px color-mix(in srgb,var(--icon-color) 13%,transparent),inset 0 1px 0 #fff;isolation:isolate;animation:serviceIconBreathe 3.4s ease-in-out infinite}
  .template-kids .service-card:nth-child(2n) .service-icon{animation-delay:-1.1s}.template-kids .service-card:nth-child(3n) .service-icon{animation-delay:-2.2s}
  .template-kids .service-icon:before{content:"";position:absolute;z-index:-1;inset:-6px;border:2px dashed color-mix(in srgb,var(--icon-color) 30%,transparent);border-radius:25px;opacity:.6;animation:serviceOrbit 9s linear infinite}
  .template-kids .service-icon:after{content:"";position:absolute;right:-5px;top:-5px;width:15px;height:15px;border:3px solid #fff;border-radius:50%;background:var(--accent);box-shadow:0 5px 12px rgba(31,76,108,.13)}
  .template-kids .service-icon svg{width:35px;height:35px;filter:drop-shadow(0 5px 7px color-mix(in srgb,var(--icon-color) 20%,transparent))}
  .template-kids .service-card strong{max-width:125px;font-size:14px;line-height:1.2}.template-kids .service-card small{max-width:135px;font-size:9px;line-height:1.45}
  .template-kids .card-arrow{display:grid;place-items:center;width:25px;height:25px;right:8px;top:8px;border-radius:9px;background:rgba(255,255,255,.78);opacity:1;transform:none;box-shadow:0 6px 14px rgba(27,72,102,.08)}
  @keyframes serviceOrbit{to{transform:rotate(360deg)}}
  @keyframes serviceIconBreathe{50%{transform:translateY(-4px) rotate(-2deg)}}

  .template-kids .characters-grid{display:flex;gap:14px;margin-inline:-11px;padding:4px 11px 20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.template-kids .characters-grid::-webkit-scrollbar{display:none}
  .template-kids .character-card{flex:0 0 calc(100vw - 42px);min-width:0;scroll-snap-align:center;box-shadow:0 18px 38px rgba(31,79,109,.12)}

  .about-expand-panel.is-open{margin-top:22px}
  .about-detail-heading h3,.about-modal-dialog h3{font-size:31px}
  .about-rich-content{font-size:13.5px;line-height:1.78}.about-rich-content h2{font-size:25px}.about-rich-content h3{font-size:21px}
  .about-action-button{width:100%;max-width:280px;margin-inline:auto}
}

@media(max-width:390px){
  .main-nav,.template-test-clinic .main-nav{right:7px!important;top:7px!important;bottom:7px!important;width:calc(100vw - 14px)!important;border-radius:24px!important}
  .main-nav>a{grid-template-columns:44px minmax(0,1fr) 26px;min-height:59px}.mobile-nav-icon{width:44px;height:44px;border-radius:14px}.mobile-nav-icon svg{width:23px;height:23px}
  .mobile-nav-footer{min-height:80px}.mobile-nav-characters{width:112px}
}

@media(prefers-reduced-motion:reduce){
  .about-expand-panel,.about-modal,.about-modal-dialog,.main-nav,.main-nav>a,.menu-toggle span,.service-icon,.mobile-nav-characters{animation:none!important;transition-duration:.01ms!important}
}

@media(min-width:921px) and (max-width:1180px){
  .template-test-clinic .brand img{width:142px}
  .template-test-clinic .main-nav{display:flex!important;padding:5px!important;gap:1px!important}
  .template-test-clinic .main-nav a{padding:8px 7px!important;font-size:10.5px!important}
  .template-test-clinic .header-appointment{padding-inline:13px;font-size:11px}
}
