/* Sunny Steps Pediatric Clinic - THEME: change only these two colours. White and black are the neutrals.
   --primary: coral (buttons, accents)   --secondary: sunshine yellow (highlights, badges) */
:root {
   --primary: #de4d36;
   --secondary: #ffbf3c;
   --bg: #fff;
   --surface: color-mix(in srgb, var(--primary) 6%, #fff);
   --ink: #000;
   --muted: #555;
   --line: color-mix(in srgb, var(--primary) 18%, #fff);
   --ptext: var(--primary);
   --sh: 0 18px 44px rgba(0, 0, 0, .12);
   --sh-s: 0 8px 20px rgba(0, 0, 0, .09);
   --r: 26px;
   --blob: 42% 58% 55% 45%/50% 40% 60% 50%;
   --f-head: 'Baloo 2', 'Noto Sans Arabic', sans-serif;
   --f-body: 'Nunito', 'Noto Sans Arabic', sans-serif;
   --nav-h: 78px
}

*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: var(--nav-h);
   overflow-x: clip
}

body {
   font-family: var(--f-body);
   font-size: 17px;
   font-weight: 400;
   line-height: 1.7;
   color: var(--ink);
   background: var(--bg);
   overflow-x: clip;
   padding-top: var(--nav-h)
}

img {
   max-width: 100%;
   height: auto;
   display: block
}

a {
   color: inherit;
   text-decoration: none
}

ul {
   list-style: none
}

button {
   font: inherit;
   cursor: pointer;
   border: 0;
   background: none;
   color: inherit
}

h1,
h2,
h3,
h4 {
   font-family: var(--f-head);
   font-weight: 600;
   line-height: 1.12
}

:focus-visible {
   outline: 3px solid var(--secondary);
   outline-offset: 3px
}

.container {
   width: min(1280px, 100% - clamp(32px, 8vw, 100px));
   margin-inline: auto
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 14px 28px;
   border-radius: 999px;
   font-weight: 700;
   border: 2px solid transparent;
   transition: .2s;
   white-space: nowrap;
}

.btn:hover {
   transform: translateY(-3px)
}

.btn-primary {
   background: var(--primary);
   color: #fff;
   box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 35%, transparent)
}

.btn-primary:hover {
   background: color-mix(in srgb, var(--primary) 85%, #000)
}

.btn-ghost {
   border-color: var(--ink);
   color: var(--ink)
}

.btn-ghost:hover {
   background: var(--ink);
   color: var(--bg)
}

.btn-sm {
   padding: 10px 20px;
   font-size: 15px
}

.btn-row {
   display: flex;
   flex-wrap: wrap;
   gap: 14px
}

.icon-btn {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   border: 2px solid var(--line);
   font-size: 18px;
   transition: .2s
}

.icon-btn:hover {
   background: var(--primary);
   color: #fff;
   border-color: var(--primary)
}

.to-top {
   position: fixed;
   inset-inline-end: 22px;
   bottom: 22px;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--primary);
   color: #fff;
   font-size: 20px;
   display: grid;
   place-items: center;
   box-shadow: var(--sh-s);
   opacity: 0;
   visibility: hidden;
   transition: .2s;
   z-index: 90
}

.to-top.show {
   opacity: 1;
   visibility: visible
}

/* navbar */
.navbar {
   position: fixed;
   inset: 0 0 auto;
   z-index: 100;
   height: var(--nav-h);
   background: rgba(255, 255, 255, .93);
   backdrop-filter: blur(14px);
   border-bottom: 1px solid transparent;
   transition: .2s
}

.navbar.scrolled {
   border-color: var(--line);
   box-shadow: 0 6px 24px rgba(0, 0, 0, .07)
}

.nav-container {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px
}

.logo {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--f-head);
   font-weight: 800;
   font-size: 27px;
   color: #222
}

.logo i {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--primary);
   color: #fff;
   font-size: 21px;
   animation: wob 4s ease-in-out infinite
}

.logo span {
   color: var(--primary)
}

.nav-menu {
   display: flex;
   align-items: center;
   gap: 2px
}

.nav-link {
   position: relative;
   padding: 10px 14px;
   font-weight: 700;
   font-size: 16px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: color .15s
}

.nav-link::after {
   content: '';
   position: absolute;
   inset-inline: 14px;
   bottom: 3px;
   height: 3px;
   border-radius: 3px;
   background: var(--secondary);
   transform: scaleX(0);
   transition: transform .2s
}

.nav-link:hover,
.nav-link.active {
   color: var(--ptext)
}

.nav-link:hover::after,
.nav-link.active::after {
   transform: scaleX(1)
}

.nav-link .bi-chevron-down {
   font-size: 12px;
   transition: .2s
}

.dropdown {
   position: relative
}

.dropdown.open .bi-chevron-down {
   transform: rotate(180deg)
}

.dropdown-menu {
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
   min-width: 200px;
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 18px;
   padding: 8px;
   box-shadow: var(--sh);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px);
   transition: .18s;
   z-index: 1050
}

.dropdown.open .dropdown-menu {
   opacity: 1;
   visibility: visible;
   transform: none
}

.dropdown-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 11px 14px;
   border-radius: 12px;
   font-weight: 700
}

.dropdown-item i {
   color: var(--secondary)
}

.dropdown-item:hover,
.dropdown-item.active {
   background: var(--surface);
   color: var(--ptext)
}

.nav-actions {
   display: flex;
   align-items: center;
   gap: 10px
}

.burger,
.nav-mobile-toggles,
.mobile-only {
   display: none
}

/* sections */
.section {
   padding: 100px 0;
   position: relative
}

.section.alt {
   background: var(--surface)
}

.head {
   max-width: 680px;
   margin-bottom: 52px
}

.head.center {
   margin-inline: auto;
   text-align: center
}

.head h2 {
   font-size: clamp(34px, 4.6vw, 52px);
   margin-bottom: 14px
}

.head p {
   color: var(--muted);
   font-size: 18px
}

.tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 16px;
   border-radius: 999px;
   background: var(--surface);
   color: var(--ptext);
   font-weight: 700;
   font-size: 15px;
   border: 1px solid var(--line);
   margin-bottom: 16px
}

.tag i {
   color: var(--secondary)
}

.hl {
   background: linear-gradient(transparent 62%, var(--secondary) 62%);
   padding-inline: 4px;
   color: #000
}

/* reveal animations */
html.js .reveal {
   opacity: 0;
   transform: translateY(34px);
   transition: opacity .7s ease, transform .7s ease
}

html.js .reveal.l {
   transform: translateX(-40px)
}

html.js .reveal.r {
   transform: translateX(40px)
}

html.js .reveal.in {
   opacity: 1;
   transform: none
}

.d1 {
   transition-delay: .1s !important
}

.d2 {
   transition-delay: .2s !important
}

.d3 {
   transition-delay: .3s !important
}

@keyframes flo {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-14px)
   }
}

@keyframes wob {

   0%,
   100% {
      transform: rotate(-6deg)
   }

   50% {
      transform: rotate(6deg)
   }
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes mq {
   to {
      transform: translateX(-50%)
   }
}

/* 1 hero */
.hero {
   padding: 60px 0 90px;
   position: relative;
   overflow: hidden;
   background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--secondary) 35%, transparent), transparent 40%), var(--surface)
}

.hero-grid {
   display: grid;
   grid-template-columns: 1.05fr 1fr;
   gap: 50px;
   align-items: center
}

.hero h1 {
   font-size: clamp(40px, 5.6vw, 72px);
   margin-bottom: 20px
}

.hero p {
   color: var(--muted);
   font-size: 19px;
   max-width: 560px;
   margin-bottom: 30px
}

.hero-points {
   display: flex;
   flex-wrap: wrap;
   gap: 12px 26px;
   margin-top: 30px;
   font-weight: 400
}

.hero-points i {
   color: var(--primary);
   margin-inline-end: 6px
}

.stage {
   position: relative;
   height: 560px
}

.stage .b {
   position: absolute;
   overflow: hidden;
   border: 8px solid #fff;
   box-shadow: var(--sh)
}

.stage .b img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.b.main {
   inset: 0 12% 0 8%;
   border-radius: var(--blob);
   animation: flo 7s ease-in-out infinite
}

.b.sm {
   width: 190px;
   height: 190px;
   border-radius: 50%;
   inset-inline-end: 0;
   top: 6%;
   animation: flo 5s ease-in-out infinite .5s
}

.b.rd {
   width: 170px;
   height: 170px;
   border-radius: 30% 70% 60% 40%/40% 40% 60% 60%;
   inset-inline-start: 0;
   bottom: 4%;
   animation: flo 6s ease-in-out infinite 1s
}

.hero-badge {
   position: absolute;
   inset-inline-end: 2%;
   bottom: 8%;
   background: #fff;
   color: #000;
   border-radius: 20px;
   padding: 14px 20px;
   display: flex;
   gap: 12px;
   align-items: center;
   box-shadow: var(--sh);
   animation: flo 5.5s ease-in-out infinite
}

.hero-badge>i {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: var(--primary);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 22px
}

.hero-badge b {
   display: block;
   font: 800 26px/1 var(--f-head)
}

.hero-badge small {
   font-size: 14px;
   color: #555
}

.deco {
   position: absolute;
   color: var(--secondary);
   font-size: 34px;
   animation: spin 14s linear infinite;
   opacity: .9
}

.deco.a {
   top: 14%;
   left: 46%
}

.deco.b2 {
   bottom: 10%;
   left: 44%;
   color: var(--primary);
   font-size: 26px;
   animation-duration: 9s
}

/* marquee */
.marquee {
   background: var(--primary);
   color: #fff;
   padding: 16px 0;
   overflow: hidden;
   white-space: nowrap
}

.marquee-track {
   display: inline-flex;
   gap: 38px;
   animation: mq 26s linear infinite;
   font: 700 22px var(--f-head)
}

.marquee i {
   color: var(--secondary);
   margin-inline-start: 38px
}

/* 2 services */
.cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px
}

.card {
   display: flex;
   flex-direction: column;
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: var(--r);
   padding: 34px 30px;
   transition: .3s;
   position: relative;
   overflow: hidden
}

.card:hover {
   transform: translateY(-10px);
   border-color: var(--secondary);
   box-shadow: var(--sh)
}

.card .ic {
   width: 68px;
   height: 68px;
   border-radius: 50%;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 30px;
   margin-bottom: 20px;
   transition: .3s
}

.card:hover .ic {
   background: var(--primary);
   color: #fff;
   transform: rotate(-8deg) scale(1.08)
}

.card h3 {
   font-size: 25px;
   margin-bottom: 8px
}

.card p {
   color: var(--muted);
   margin-bottom: 14px
}

.card a {
   display: inline-flex;
   gap: 8px;
   margin-top: auto;
   align-self: flex-start;
   font-weight: 800;
   color: var(--ptext)
}

/* 3 about */
.about-grid {
   display: grid;
   grid-template-columns: 1fr 1.05fr;
   gap: 64px;
   align-items: center
}

.collage {
   position: relative;
   height: 540px
}

.collage .p {
   position: absolute;
   overflow: hidden;
   border: 8px solid #fff;
   box-shadow: var(--sh)
}

.collage img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.p.one {
   inset: 0 22% 18% 0;
   border-radius: var(--blob)
}

.p.two {
   width: 52%;
   height: 48%;
   inset-inline-end: 0;
   bottom: 0;
   border-radius: 36% 64% 50% 50%/50% 40% 60% 50%;
   animation: flo 6s ease-in-out infinite
}

.ticks {
   display: grid;
   gap: 14px;
   margin: 24px 0 30px
}

.ticks li {
   display: flex;
   gap: 12px;
   font-weight: 400
}

.ticks i {
   color: var(--primary);
   font-size: 20px
}

.stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-top: 70px;
   background: var(--primary);
   color: #fff;
   border-radius: var(--r);
   padding: 36px
}

.stats div {
   text-align: center
}

.stats b {
   display: block;
   font: 800 clamp(34px, 4vw, 50px)/1.1 var(--f-head);
   color: var(--secondary)
}

/* 4 schedule */
.sch {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   gap: 50px;
   align-items: center
}

.ages {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 24px
}

.chip {
   padding: 10px 20px;
   border-radius: 999px;
   border: 2px solid var(--line);
   font-weight: 800;
   transition: .2s
}

.chip:hover {
   border-color: var(--primary)
}

.chip.active {
   background: var(--primary);
   border-color: var(--primary);
   color: #fff
}

.panel {
   background: var(--bg);
   border: 2px dashed var(--secondary);
   border-radius: var(--r);
   padding: 30px
}

.panel h3 {
   font-size: 28px;
   margin-bottom: 16px
}

.vac {
   display: flex;
   flex-wrap: wrap;
   gap: 10px
}

.vac span {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   padding: 9px 16px;
   border-radius: 14px;
   background: var(--surface);
   font-weight: 700;
   animation: pop .35s ease both
}

.vac i {
   color: var(--primary)
}

@keyframes pop {
   from {
      opacity: 0;
      transform: scale(.7)
   }
}

.note {
   font-size: 14px;
   color: var(--muted);
   margin-top: 16px
}

.sch .pic {
   border-radius: var(--blob);
   overflow: hidden;
   border: 8px solid #fff;
   box-shadow: var(--sh);
   aspect-ratio: 1/1.05;
   animation: flo 8s ease-in-out infinite
}

.pic img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

/* 5 doctors */
.docs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px
}

.doc {
   background: var(--bg);
   border-radius: var(--r);
   overflow: hidden;
   border: 2px solid var(--line);
   transition: .3s;
   text-align: center;
   padding-bottom: 26px
}

.doc:hover {
   transform: translateY(-10px);
   box-shadow: var(--sh)
}

.doc .ph {
   aspect-ratio: 1/1;
   overflow: hidden;
   margin-bottom: 20px;
   border-radius: 0 0 50% 50%/0 0 22% 22%
}

.doc img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s
}

.doc:hover img {
   transform: scale(1.08)
}

.doc h3 {
   font-size: 25px
}

.doc small {
   display: block;
   color: var(--ptext);
   font-weight: 800;
   margin-bottom: 6px
}

.doc p {
   color: var(--muted);
   padding-inline: 24px;
   font-size: 16px
}

/* 6 portal */
.portal {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 56px;
   align-items: center
}

.dash {
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: var(--r);
   padding: 22px;
   box-shadow: var(--sh)
}

.dash-top {
   display: flex;
   gap: 14px;
   align-items: center;
   margin-bottom: 18px
}

.dash-top img {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   object-fit: cover
}

.dash-top b {
   font: 700 20px var(--f-head);
   display: block
}

.dgrid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
}

.dc {
   background: var(--surface);
   border-radius: 18px;
   padding: 16px
}

.dc small {
   color: var(--muted);
   font-weight: 700
}

.dc b {
   display: block;
   font: 700 20px var(--f-head)
}

.dc.wide {
   grid-column: 1/-1
}

.bar {
   height: 12px;
   border-radius: 12px;
   background: var(--line);
   margin: 10px 0 4px;
   overflow: hidden
}

.bar i {
   display: block;
   height: 100%;
   width: 0;
   border-radius: 12px;
   background: linear-gradient(90deg, var(--primary), var(--secondary));
   transition: width 1.6s ease
}

.in .bar i {
   width: var(--w)
}

.feats {
   display: grid;
   gap: 18px;
   margin: 26px 0 30px
}

.feats li {
   display: flex;
   gap: 16px
}

.feats>li>i {
   flex: none;
   width: 52px;
   height: 52px;
   border-radius: 16px;
   background: var(--primary);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 23px
}

.feats b {
   display: block;
   font: 700 21px var(--f-head)
}

.feats span {
   color: var(--muted)
}

/* 7 reviews */
.slider {
   overflow: hidden;
   max-width: 860px;
   margin-inline: auto
}

.track {
   display: flex;
   transition: transform .6s ease
}

.slide {
   min-width: 100%;
   padding: 6px
}

.rv {
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: var(--r);
   padding: 38px;
   text-align: center
}

.rv>i {
   font-size: 40px;
   color: var(--secondary)
}

.rv p {
   font-size: 20px;
   margin: 10px 0 22px
}

.rv img {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   object-fit: cover;
   margin: 0 auto 8px;
   border: 4px solid var(--secondary)
}

.rv b {
   font: 700 20px var(--f-head);
   display: block
}

.stars {
   color: var(--secondary);
   letter-spacing: 3px
}

.dots {
   display: flex;
   gap: 10px;
   justify-content: center;
   margin-top: 22px
}

.dots button {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: var(--line);
   transition: .2s
}

.dots button.on {
   background: var(--primary);
   width: 34px;
   border-radius: 12px
}

/* 8 book */
.book-wrap {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 56px;
   align-items: center;
   background: var(--primary);
   color: #fff;
   border-radius: 36px;
   padding: clamp(28px, 5vw, 64px);
   position: relative;
   overflow: hidden
}

.book-wrap::before {
   content: '';
   position: absolute;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   background: var(--secondary);
   opacity: .25;
   top: -100px;
   inset-inline-end: -80px;
   animation: flo 8s ease-in-out infinite
}

.book-wrap>* {
   position: relative
}

.book-wrap h2 {
   font-size: clamp(32px, 4.2vw, 48px);
   margin-bottom: 14px
}

.book-wrap ul {
   display: grid;
   gap: 14px;
   margin-top: 24px
}

.book-wrap li {
   display: flex;
   gap: 12px;
   align-items: center;
   font-weight: 400
}

.book-wrap li i {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #fff;
   color: var(--primary);
   display: grid;
   place-items: center;
   flex: none
}

.bf {
   background: var(--bg);
   color: var(--ink);
   border-radius: var(--r);
   padding: 30px
}

.bf h3 {
   font-size: 26px;
   margin-bottom: 16px
}

.fg {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
}

.fg .full {
   grid-column: 1/-1
}

label {
   font-weight: 800;
   font-size: 14px;
   display: block;
   margin-bottom: 4px
}

input,
select,
textarea {
   width: 100%;
   font: inherit;
   padding: 12px 14px;
   border: 2px solid var(--line);
   border-radius: 14px;
   background: var(--bg);
   color: var(--ink)
}

input:focus,
select:focus,
textarea:focus {
   outline: 0;
   border-color: var(--primary)
}

.bad {
   border-color: #c00 !important
}

.bf .btn {
   width: 100%;
   margin-top: 16px
}

.ok {
   display: none;
   margin-top: 14px;
   padding: 12px;
   border-radius: 12px;
   background: #e3f5ea;
   color: #075c27;
   font-weight: 700
}

/* footer */
.footer {
   background: #fff;
   color: #222;
   padding: 80px 0 26px;
   border-top: 1px solid var(--line)
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
   gap: 44px
}

.footer p,
.footer-links li {
   color: rgba(0, 0, 0, .68)
}

.footer h4 {
   font-size: 22px;
   margin-bottom: 16px
}

.footer-links li {
   margin-bottom: 10px;
   display: flex;
   gap: 10px;
   align-items: baseline
}

.footer-links i {
   color: var(--primary);
   font-size: 13px
}

.footer-links a:hover {
   color: var(--primary)
}

.social {
   display: flex;
   gap: 10px;
   margin-top: 20px
}

.social a {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 2px solid rgba(0, 0, 0, .15);
   display: grid;
   place-items: center;
   transition: .2s
}

.social a:hover {
   background: var(--secondary);
   border-color: var(--secondary);
   color: #000;
   transform: translateY(-3px)
}

.fbar {
   margin-top: 50px;
   padding-top: 22px;
   border-top: 1px solid rgba(0, 0, 0, .12);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 15px;
   color: rgba(0, 0, 0, .55)
}

/* responsive */
@media(max-width:1180px) {
   /* backdrop-filter makes the fixed header a containing block for its fixed menu.
      Remove it on mobile so the menu is positioned against the viewport. */
   .navbar {
      backdrop-filter: none;
      -webkit-backdrop-filter: none
   }

   .burger {
      display: grid
   }

   .desk-only,
   .nav-actions .icon-btn[data-theme-toggle],
   .nav-actions .icon-btn[data-rtl-toggle] {
      display: none
   }

   .mobile-only {
      display: inline-flex
   }

   .nav-menu {
      position: fixed;
      inset: var(--nav-h) 0 0;
      height: auto;
      max-height: none;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      background: var(--bg);
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      padding: 20px 20px 28px;
      border-top: 1px solid var(--line);
      box-shadow: 0 24px 40px rgba(0, 0, 0, .12);
      transform: translateY(-14px);
      opacity: 0;
      visibility: hidden;
      transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
      pointer-events: none
   }

   .nav-menu.open {
      transform: none;
      opacity: 1;
      visibility: visible;
      pointer-events: auto
   }

   .nav-link {
      padding: 14px 16px;
      justify-content: space-between;
      border-radius: 14px
   }

   .nav-link::after {
      display: none
   }

   .nav-link:hover,
   .nav-link.active {
      background: var(--surface)
   }

   .dropdown-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border: 0;
      padding: 0 0 0 14px;
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s
   }

   .dropdown.open .dropdown-menu {
      max-height: 200px
   }

   .nav-mobile-toggles {
      display: flex;
      gap: 10px;
      margin-top: 10px
   }

   .nav-side-toggle {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px;
      border: 2px solid var(--line);
      border-radius: 14px;
      font-weight: 700
   }

   .nav-menu .btn {
      margin-top: 10px
   }

   body.menu-open {
      overflow: hidden;
      overscroll-behavior: none
   }
}

@media(max-width:1024px) {

   .hero-grid,
   .about-grid,
   .sch,
   .portal,
   .book-wrap {
      grid-template-columns: 1fr
   }

   .stage {
      height: 480px;
      max-width: 560px;
      margin-inline: auto;
      width: 100%
   }

   .sch .pic {
      max-width: 520px;
      margin-inline: auto;
      width: 100%
   }

   .cards,
   .docs {
      grid-template-columns: repeat(2, 1fr)
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr
   }

   .collage {
      max-width: 540px;
      margin-inline: auto;
      width: 100%
   }

   .deco {
      display: none
   }
}

@media(max-width:680px) {
   .section {
      padding: 70px 0
   }

   .cards,
   .docs,
   .fg,
   .footer-grid {
      grid-template-columns: 1fr
   }

   .stats {
      grid-template-columns: 1fr 1fr;
      padding: 26px 16px
   }

   .stage {
      height: 390px;
      max-width: 440px
   }

   .stage .b {
      border-width: 5px
   }

   .b.main {
      inset: 0 10% 20px 6%
   }

   .b.sm {
      width: 105px;
      height: 105px;
      top: 2%;
      inset-inline-end: -4px
   }

   .b.rd {
      width: 95px;
      height: 95px;
      inset-inline-start: -6px;
      bottom: 12%
   }

   .hero-badge {
      inset-inline-end: 0;
      bottom: 0;
      padding: 9px 14px;
      gap: 10px;
      border-radius: 16px
   }

   .hero-badge>i {
      width: 36px;
      height: 36px;
      font-size: 16px
   }

   .hero-badge b {
      font-size: 19px
   }

   .hero-badge small {
      font-size: 12px
   }

   .collage {
      height: 400px
   }

   .hero {
      padding-top: 36px
   }

   .btn-row .btn {
      flex: 1
   }

   .rv {
      padding: 26px 18px
   }

   .rv p {
      font-size: 18px
   }

   .logo {
      font-size: 23px
   }

   .fbar {
      flex-direction: column
   }
}

@media(max-width:360px) {
   .stage {
      height: 350px
   }

   .b.sm {
      width: 90px;
      height: 90px
   }

   .b.rd {
      width: 82px;
      height: 82px;
      bottom: 13%
   }

   .hero-badge {
      padding: 8px 12px;
      gap: 8px
   }

   .hero-badge>i {
      width: 32px;
      height: 32px;
      font-size: 15px
   }

   .hero-badge b {
      font-size: 17px
   }

   .hero-badge small {
      font-size: 11px
   }
}

@media(prefers-reduced-motion:reduce) {
   * {
      animation: none !important;
      transition: none !important
   }

   html.js .reveal {
      opacity: 1;
      transform: none
   }
}

/* ===== HOME 2 ===== */
.hero2 {
   padding: 64px 0 96px;
   position: relative;
   overflow: hidden;
   background: radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--secondary) 34%, transparent), transparent 42%), linear-gradient(180deg, var(--surface), var(--bg))
}

.hero2-grid {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: clamp(32px, 5vw, 64px);
   align-items: center
}

.hero2 h1 {
   font-size: clamp(38px, 5.4vw, 68px);
   margin-bottom: 18px
}

.hero2 .lead {
   color: var(--muted);
   font-size: 19px;
   max-width: 560px;
   margin-bottom: 28px
}

.hero2-quick {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 30px
}

.hero2-quick div {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 11px 16px;
   font-weight: 700;
   font-size: 15px
}

.hero2-quick i {
   color: var(--primary);
   font-size: 19px
}

.hero2 .deco2 {
   position: absolute;
   color: var(--primary);
   font-size: 28px;
   opacity: .75;
   animation: flo 6s ease-in-out infinite
}

.hero2 .deco2.a {
   top: 12%;
   inset-inline-end: 5%
}

.hero2 .deco2.b {
   top: 30%;
   inset-inline-start: 2%;
   font-size: 20px;
   color: var(--secondary);
   animation-delay: 1s
}

.hero2-visual {
   display: grid;
   grid-template-columns: 1.28fr 1fr;
   grid-template-rows: 1.15fr .85fr;
   gap: 16px;
   min-height: 540px
}

.hv-main {
   grid-row: 1/3;
   overflow: hidden;
   border-radius: 34px 34px 34px 110px;
   border: 8px solid var(--bg);
   box-shadow: var(--sh)
}

.hv-main img,
.hv-small img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.hv-small {
   overflow: hidden;
   border-radius: 28px;
   border: 8px solid var(--bg);
   box-shadow: var(--sh)
}

.hv-info {
   background: var(--primary);
   color: #fff;
   border-radius: 24px;
   padding: 22px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 4px;
   box-shadow: var(--sh-s)
}

.hv-info .rating {
   color: var(--secondary);
   letter-spacing: 2px;
   font-size: 15px
}

.hv-info b {
   font: 800 24px/1.2 var(--f-head)
}

.hv-info small {
   opacity: .9
}

/* age-stage care */
.agecare {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 22px
}

.agecard {
   position: relative;
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 26px;
   padding: 30px 24px;
   overflow: hidden;
   transition: .3s
}

.agecard::before {
   content: attr(data-step);
   position: absolute;
   top: 10px;
   inset-inline-end: 18px;
   font: 800 52px/1 var(--f-head);
   color: color-mix(in srgb, var(--primary) 12%, transparent)
}

.agecard:hover {
   transform: translateY(-8px);
   border-color: var(--secondary);
   box-shadow: var(--sh)
}

.agecard .ic {
   width: 62px;
   height: 62px;
   border-radius: 18px;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 28px;
   margin-bottom: 16px;
   transition: .3s
}

.agecard:hover .ic {
   background: var(--primary);
   color: #fff;
   transform: rotate(-6deg)
}

.agecard .age {
   display: inline-block;
   font-weight: 800;
   font-size: 13px;
   color: var(--ptext);
   background: var(--surface);
   border-radius: 999px;
   padding: 3px 11px;
   margin-bottom: 10px
}

.agecard h3 {
   font-size: 23px;
   margin-bottom: 6px
}

.agecard p {
   color: var(--muted);
   font-size: 16px;
   margin-bottom: 14px
}

.agecard ul {
   display: grid;
   gap: 8px;
   font-size: 15px;
   font-weight: 400
}

.agecard li {
   display: flex;
   gap: 8px;
   align-items: flex-start;
   line-height: 1.5
}

.agecard li i {
   color: var(--primary);
   font-size: 16px;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 1.5em;
   line-height: 1
}

/* steps */
.steps {
   position: relative;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
}

.steps::before {
   content: '';
   position: absolute;
   top: 62px;
   left: 12%;
   right: 12%;
   border-top: 2px dashed var(--line)
}

.step {
   position: relative;
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 26px;
   padding: 30px 26px 32px;
   text-align: center;
   transition: .3s
}

.step:hover {
   transform: translateY(-6px);
   box-shadow: var(--sh);
   border-color: var(--secondary)
}

.step .num {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--primary);
   color: #fff;
   display: grid;
   place-items: center;
   font: 800 25px var(--f-head);
   margin: 0 auto 18px;
   box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 35%, transparent);
   position: relative;
   z-index: 1
}

.step h3 {
   font-size: 23px;
   margin-bottom: 8px
}

.step p {
   color: var(--muted);
   font-size: 16px
}

.how-facts {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   margin-top: 34px
}

.how-facts div {
   display: flex;
   align-items: center;
   gap: 12px;
   justify-content: center;
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 14px;
   font-weight: 800;
   font-size: 15px;
   text-align: center
}

.how-facts i {
   color: var(--primary);
   font-size: 20px
}

/* care plans */
.plans {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
   align-items: stretch
}

.plan {
   display: flex;
   flex-direction: column;
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 28px;
   padding: 34px 30px;
   position: relative;
   transition: .3s
}

.plan:hover {
   transform: translateY(-8px);
   box-shadow: var(--sh)
}

.plan.pop {
   border-color: var(--primary);
   box-shadow: var(--sh);
   transform: translateY(-10px)
}

.plan.pop:hover {
   transform: translateY(-16px)
}

.plan .pop-badge {
   position: absolute;
   top: -14px;
   inset-inline-start: 30px;
   background: var(--secondary);
   color: #000;
   font-weight: 800;
   font-size: 13px;
   padding: 6px 14px;
   border-radius: 999px
}

.plan .plan-ic {
   width: 58px;
   height: 58px;
   border-radius: 16px;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 26px;
   margin-bottom: 16px
}

.plan h3 {
   font-size: 26px
}

.plan .plan-sub {
   color: var(--muted);
   font-size: 15px;
   margin: 4px 0 16px
}

.plan .price {
   color: var(--muted);
   font-weight: 700
}

.plan .price b {
   font: 800 44px/1 var(--f-head);
   color: var(--ink)
}

.plan ul {
   display: grid;
   gap: 11px;
   margin: 22px 0 26px
}

.plan li {
   display: flex;
   gap: 10px;
   font-weight: 400;
   color: var(--muted);
   font-size: 15px;
   line-height: 1.5
}

.plan li i {
   color: var(--primary);
   font-size: 16px;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 1.5em;
   line-height: 1
}

.plan .btn {
   margin-top: auto;
   width: 100%
}

.plan-note {
   text-align: center;
   color: var(--muted);
   font-size: 15px;
   margin-top: 30px
}

/* symptom guide */
.sym-grid {
   display: grid;
   grid-template-columns: .92fr 1.08fr;
   gap: clamp(32px, 5vw, 56px);
   align-items: center
}

.sym-cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px
}

.sym {
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 24px;
   padding: 26px 24px;
   transition: .3s
}

.sym:hover {
   transform: translateY(-6px);
   border-color: var(--secondary);
   box-shadow: var(--sh)
}

.sym .ic {
   width: 54px;
   height: 54px;
   border-radius: 16px;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 24px;
   margin-bottom: 14px
}

.sym h3 {
   font-size: 21px;
   margin-bottom: 6px
}

.sym p {
   color: var(--muted);
   font-size: 15px
}

.sym .urg {
   display: inline-block;
   margin-top: 14px;
   font-size: 12px;
   font-weight: 800;
   padding: 4px 11px;
   border-radius: 999px;
   background: var(--surface);
   color: var(--ptext)
}

.callout {
   display: flex;
   align-items: center;
   gap: 14px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 16px 18px;
   margin: 24px 0
}

.callout>i {
   flex: none;
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: var(--primary);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 21px
}

.callout b {
   display: block;
   font: 700 18px var(--f-head)
}

.callout small {
   color: var(--muted)
}

/* parenting corner */
.blog-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 24px;
   flex-wrap: wrap;
   margin-bottom: 44px
}

.blog-head .head {
   margin-bottom: 0
}

.posts {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px
}

.post {
   display: flex;
   flex-direction: column;
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 26px;
   overflow: hidden;
   transition: .3s
}

.post:hover {
   transform: translateY(-8px);
   border-color: var(--secondary);
   box-shadow: var(--sh)
}

.post .ph {
   position: relative;
   aspect-ratio: 16/10;
   overflow: hidden
}

.post .ph img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s
}

.post:hover .ph img {
   transform: scale(1.06)
}

.post .cat {
   position: absolute;
   top: 14px;
   inset-inline-start: 14px;
   background: var(--primary);
   color: #fff;
   font-weight: 800;
   font-size: 12px;
   padding: 5px 12px;
   border-radius: 999px;
   box-shadow: var(--sh-s)
}

.post .body {
   display: flex;
   flex-direction: column;
   flex: 1;
   padding: 24px
}

.post h3 {
   font-size: 21px;
   margin: 6px 0 10px
}

.post .body p {
   color: var(--muted);
   font-size: 16px;
   flex: 1
}

.post .meta {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   font-size: 14px;
   font-weight: 700;
   color: var(--muted);
   margin-top: 18px;
   padding-top: 14px;
   border-top: 1px solid var(--line)
}

.post .body>a {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   font-weight: 800;
   color: var(--ptext);
   margin-top: 14px
}

/* faq */
.faq-grid {
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: clamp(32px, 5vw, 56px);
   align-items: start
}

.faq-help {
   background: var(--bg);
   border: 2px dashed var(--secondary);
   border-radius: 24px;
   padding: 24px;
   margin-top: 24px
}

.faq-help i.big {
   width: 52px;
   height: 52px;
   border-radius: 16px;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 24px;
   margin-bottom: 14px
}

.faq-help b {
   display: block;
   font: 700 20px var(--f-head);
   margin-bottom: 4px
}

.faq-help p {
   color: var(--muted);
   font-size: 15px;
   margin-bottom: 16px
}

.faq-list {
   display: grid;
   gap: 12px
}

.faq-item {
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 18px;
   padding: 0 22px;
   transition: border-color .2s
}

.faq-item[open] {
   border-color: var(--secondary)
}

.faq-item summary {
   list-style: none;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   padding: 18px 0;
   font: 700 19px var(--f-head)
}

.faq-item summary::-webkit-details-marker {
   display: none
}

.faq-item summary i {
   color: var(--primary);
   transition: transform .2s;
   font-size: 18px
}

.faq-item[open] summary i {
   transform: rotate(45deg)
}

.faq-item p {
   color: var(--muted);
   padding: 0 0 20px;
   font-size: 16px
}

/* visit */
.visit-wrap {
   position: relative;
   overflow: hidden;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(32px, 4.5vw, 56px);
   align-items: center;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 36px;
   padding: clamp(26px, 4.5vw, 60px)
}

.visit-wrap::before {
   content: '';
   position: absolute;
   width: 320px;
   height: 320px;
   border-radius: 50%;
   background: var(--secondary);
   opacity: .18;
   top: -120px;
   inset-inline-end: -90px
}

.visit-wrap>* {
   position: relative
}

.visit-media {
   position: relative;
   border-radius: 28px;
   overflow: hidden;
   border: 8px solid var(--bg);
   box-shadow: var(--sh);
   aspect-ratio: 4/3.4;
   max-width: 560px;
   width: 100%;
   margin-inline: auto;
   justify-self: center
}

.visit-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block
}

.visit-media .welcome {
   position: absolute;
   inset-inline-start: 14px;
   bottom: 14px;
   display: flex;
   gap: 10px;
   align-items: center;
   background: var(--bg);
   border-radius: 16px;
   padding: 12px 16px;
   box-shadow: var(--sh-s);
   font-weight: 800;
   font-size: 14px
}

.visit-media .welcome i {
   color: var(--primary);
   font-size: 20px
}

.visit-list {
   display: grid;
   gap: 14px;
   margin: 24px 0 28px
}

.visit-list li {
   display: flex;
   gap: 14px;
   align-items: center;
   font-weight: 400
}

.visit-list i {
   flex: none;
   width: 44px;
   height: 44px;
   border-radius: 14px;
   background: var(--primary);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 19px
}

.visit-list small {
   display: block;
   color: var(--muted);
   font-weight: 600
}

@media(max-width:1024px) {

   .hero2-grid,
   .sym-grid,
   .faq-grid,
   .visit-wrap {
      grid-template-columns: 1fr
   }

   .hero2-visual {
      max-width: 600px;
      width: 100%;
      margin-inline: auto
   }

   .agecare {
      grid-template-columns: 1fr 1fr
   }

   .steps {
      grid-template-columns: 1fr
   }

   .steps::before {
      display: none
   }

   .plans {
      grid-template-columns: 1fr;
      max-width: 520px;
      margin-inline: auto;
      gap: 30px
   }

   .plan.pop,
   .plan.pop:hover {
      transform: none
   }

   .posts {
      grid-template-columns: 1fr 1fr
   }

   .visit-media {
      max-width: 560px;
      width: 100%;
      margin-inline: auto;
      justify-self: center
   }
}

@media(max-width:680px) {
   .hero2 {
      padding: 44px 0 70px
   }

   .hero2 .deco2 {
      display: none
   }

   .hero2-quick div {
      flex: 1 1 100%
   }

   .hero2-visual {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1.1fr .9fr;
      gap: 12px;
      min-height: 420px
   }

   .hv-main {
      grid-row: 1/3;
      border-radius: 26px 26px 26px 70px
   }

   .hv-small {
      min-height: 150px;
      border-radius: 20px
   }

   .hv-info {
      border-radius: 20px;
      padding: 16px
   }

   .hv-info b {
      font-size: 20px
   }

   .agecare,
   .sym-cards,
   .posts {
      grid-template-columns: 1fr
   }

   .how-facts {
      grid-template-columns: 1fr
   }

   .blog-head {
      align-items: flex-start
   }

   .visit-media {
      aspect-ratio: 4/3.6
   }
}

@media(max-width:420px) {
   .hero2-visual {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto
   }

   .hv-main {
      grid-row: auto;
      aspect-ratio: 1/1
   }

   .hv-small {
      aspect-ratio: 2/1
   }
}

/* ===== INNER PAGES HERO (ABOUT, SERVICES, DOCTORS, VACCINATION) ===== */
.about-hero,
.svc-hero,
.doc-hero,
.doc-banner,
.vx-hero,
.vx-banner {
   padding: clamp(70px, 9vw, 120px) 0;
   position: relative;
   overflow: hidden;
   color: #fff
}

.about-hero {
   background: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .52)), url('../images/h-1.avif') center/cover no-repeat
}

.svc-hero {
   background: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .52)), url('../images/hero7.png') center/cover no-repeat
}

.doc-hero,
.doc-banner {
   background: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .52)), url('../images/hero-6.avif') center 32%/cover no-repeat
}

.vx-hero,
.vx-banner {
   background: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .52)), url('../images/d-1.avif') center 28%/cover no-repeat
}

.about-hero::before,
.svc-hero::before,
.doc-hero::before,
.doc-banner::before,
.vx-hero::before,
.vx-banner::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 42%);
   pointer-events: none
}

.about-hero .container,
.svc-hero .container,
.doc-hero .container,
.doc-banner .container,
.vx-hero .container,
.vx-banner .container {
   position: relative;
   z-index: 1
}

.about-hero-top,
.svc-hero-top,
.doc-hero-top,
.doc-banner-top,
.vx-hero-top,
.vx-banner-top,
.ct-hero-top,
.ct-hero-copy {
   max-width: 820px;
   margin-inline: auto;
   text-align: center
}

.about-hero h1,
.svc-hero h1,
.doc-hero h1,
.doc-banner h1,
.vx-hero h1,
.vx-banner h1,
.ct-hero h1 {
   font-size: clamp(38px, 5.2vw, 66px);
   margin-bottom: 18px
}

.about-hero .lead,
.svc-hero .lead,
.doc-hero .lead,
.doc-banner .lead,
.vx-hero .lead,
.vx-banner .lead,
.ct-hero .lead {
   color: rgba(255, 255, 255, .9);
   font-size: 19px;
   max-width: 640px;
   margin: 0 auto 28px
}

.about-hero .btn-row,
.about-hero .hero2-quick,
.svc-hero .btn-row,
.svc-hero .hero2-quick,
.doc-hero .btn-row,
.doc-hero .hero2-quick,
.doc-banner .btn-row,
.doc-banner .hero2-quick,
.vx-hero .btn-row,
.vx-hero .hero2-quick,
.vx-banner .btn-row,
.vx-banner .hero2-quick,
.ct-hero-actions {
   justify-content: center
}

.about-hero .tag,
.svc-hero .tag,
.doc-hero .tag,
.doc-banner .tag,
.vx-hero .tag,
.vx-banner .tag {
   background: rgba(255, 255, 255, .14);
   border-color: rgba(255, 255, 255, .35);
   color: #fff;
   backdrop-filter: blur(6px)
}

.about-hero .tag i,
.svc-hero .tag i,
.doc-hero .tag i,
.doc-banner .tag i,
.vx-hero .tag i,
.vx-banner .tag i {
   color: var(--secondary)
}

.about-hero .btn-ghost,
.svc-hero .btn-ghost,
.doc-hero .btn-ghost,
.doc-banner .btn-ghost,
.vx-hero .btn-ghost,
.vx-banner .btn-ghost {
   border-color: #fff;
   color: #fff
}

.about-hero .btn-ghost:hover,
.svc-hero .btn-ghost:hover,
.doc-hero .btn-ghost:hover,
.doc-banner .btn-ghost:hover,
.vx-hero .btn-ghost:hover,
.vx-banner .btn-ghost:hover {
   background: #fff;
   color: #000
}

.about-hero .hero2-quick div,
.svc-hero .hero2-quick div,
.doc-hero .hero2-quick div,
.doc-banner .hero2-quick div,
.vx-hero .hero2-quick div,
.vx-banner .hero2-quick div {
   background: rgba(255, 255, 255, .14);
   border-color: rgba(255, 255, 255, .28);
   color: #fff;
   backdrop-filter: blur(6px)
}

.about-hero .hero2-quick i,
.svc-hero .hero2-quick i,
.doc-hero .hero2-quick i,
.doc-banner .hero2-quick i,
.vx-hero .hero2-quick i,
.vx-banner .hero2-quick i {
   color: var(--secondary)
}

.about-hero .deco2,
.svc-hero .deco2,
.doc-hero .deco2,
.doc-banner .banner-deco,
.vx-hero .deco2,
.vx-banner .vx-banner-deco {
   position: absolute;
   color: var(--secondary);
   font-size: 28px;
   opacity: .85;
   animation: flo 6s ease-in-out infinite
}

.about-hero .deco2.a,
.svc-hero .deco2.a,
.doc-hero .deco2.a,
.doc-banner .banner-deco.a,
.vx-hero .deco2.a,
.vx-banner .vx-banner-deco.a {
   top: 16%;
   inset-inline-end: 8%
}

.about-hero .deco2.b,
.svc-hero .deco2.b,
.doc-hero .deco2.b,
.doc-banner .banner-deco.b,
.vx-hero .deco2.b,
.vx-banner .vx-banner-deco.b {
   bottom: 16%;
   top: auto;
   inset-inline-start: auto;
   inset-inline-end: 18%;
   font-size: 20px;
   animation-delay: 1s
}

/* story */
.story {
   display: grid;
   grid-template-columns: 1fr 1.05fr;
   gap: clamp(32px, 5vw, 60px);
   align-items: center
}

.story-media {
   position: relative;
   border-radius: var(--blob);
   overflow: hidden;
   border: 8px solid var(--bg);
   box-shadow: var(--sh);
   aspect-ratio: 1/1.05;
   animation: flo 8s ease-in-out infinite
}

.story-media img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.founder {
   display: flex;
   gap: 14px;
   align-items: center;
   margin-top: 26px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 16px 18px
}

.founder img {
   flex: none;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--secondary)
}

.founder b {
   display: block;
   font: 700 19px var(--f-head)
}

.founder span {
   color: var(--muted);
   font-size: 14px
}

/* values */
.values {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
}

.value {
   position: relative;
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 26px;
   padding: 34px 28px;
   overflow: hidden;
   transition: .3s
}

.value::before {
   content: attr(data-num);
   position: absolute;
   top: 8px;
   inset-inline-end: 18px;
   font: 800 64px/1 var(--f-head);
   color: color-mix(in srgb, var(--primary) 10%, transparent)
}

.value:hover {
   transform: translateY(-8px);
   border-color: var(--secondary);
   box-shadow: var(--sh)
}

.value .ic {
   width: 60px;
   height: 60px;
   border-radius: 18px;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 27px;
   margin-bottom: 18px;
   transition: .3s
}

.value:hover .ic {
   background: var(--primary);
   color: #fff;
   transform: rotate(-6deg)
}

.value h3 {
   font-size: 24px;
   margin-bottom: 8px
}

.value p {
   color: var(--muted);
   font-size: 16px
}

/* timeline */
.timeline {
   position: relative;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 18px
}

.timeline::before {
   content: '';
   position: absolute;
   top: 22px;
   left: 4%;
   right: 4%;
   border-top: 2px dashed var(--line)
}

.tl {
   position: relative;
   text-align: center
}

.tl .dot {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: var(--bg);
   border: 3px solid var(--primary);
   color: var(--primary);
   display: grid;
   place-items: center;
   margin: 0 auto 16px;
   font-size: 18px;
   position: relative;
   z-index: 1;
   transition: .3s
}

.tl:hover .dot {
   background: var(--primary);
   color: #fff;
   transform: scale(1.08)
}

.tl b {
   display: block;
   font: 800 25px/1 var(--f-head);
   color: var(--ptext)
}

.tl h3 {
   font-size: 19px;
   margin: 8px 0 6px
}

.tl p {
   color: var(--muted);
   font-size: 15px
}

/* difference */
.diff {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: clamp(32px, 5vw, 56px);
   align-items: center
}

.diff-media {
   position: relative;
   border-radius: 34px;
   overflow: hidden;
   border: 8px solid var(--bg);
   box-shadow: var(--sh);
   aspect-ratio: 1/1
}

.diff-media img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.diff-note {
   position: absolute;
   inset-inline: 18px;
   bottom: 18px;
   background: var(--bg);
   border-radius: 16px;
   padding: 14px 16px;
   display: flex;
   gap: 10px;
   align-items: center;
   font-weight: 800;
   font-size: 14px;
   box-shadow: var(--sh-s)
}

.diff-note i {
   flex: none;
   color: var(--primary);
   font-size: 20px
}

.diff-list {
   display: grid;
   gap: 16px;
   margin: 24px 0 30px
}

.diff-list li {
   display: flex;
   gap: 14px
}

.diff-list>li>i {
   flex: none;
   width: 50px;
   height: 50px;
   border-radius: 15px;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 22px
}

.diff-list b {
   display: block;
   font: 700 20px var(--f-head)
}

.diff-list span {
   color: var(--muted);
   font-size: 15px
}

/* gallery */
.gallery {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
}

.gallery figure {
   position: relative;
   overflow: hidden;
   border-radius: 24px;
   border: 6px solid var(--bg);
   box-shadow: var(--sh-s);
   aspect-ratio: 4/3
}

.gallery img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .5s
}

.gallery figure:hover img {
   transform: scale(1.06)
}

.gallery figcaption {
   position: absolute;
   inset-inline: 12px;
   bottom: 12px;
   width: max-content;
   max-width: calc(100% - 24px);
   background: rgba(255, 255, 255, .94);
   color: #000;
   border-radius: 999px;
   padding: 7px 13px;
   font-weight: 800;
   font-size: 13px;
   opacity: 0;
   transform: translateY(8px);
   transition: .3s
}

.gallery figure:hover figcaption,
.gallery figure:focus-within figcaption {
   opacity: 1;
   transform: none
}

/* trust */
.trust {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: clamp(32px, 5vw, 56px);
   align-items: center
}

.trust-badges {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
}

.tbadge {
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 22px;
   padding: 26px 20px;
   text-align: center;
   transition: .3s
}

.tbadge:hover {
   transform: translateY(-6px);
   border-color: var(--secondary);
   box-shadow: var(--sh)
}

.tbadge i {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 23px;
   margin: 0 auto 12px
}

.tbadge b {
   display: block;
   font: 700 18px var(--f-head)
}

.tbadge small {
   color: var(--muted);
   font-size: 13px
}

/* visit cta */
.about-cta {
   position: relative;
   overflow: hidden;
   background: var(--primary);
   color: #fff;
   border-radius: 36px;
   padding: clamp(30px, 5vw, 64px);
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: clamp(28px, 4vw, 50px);
   align-items: center
}

.about-cta::before {
   content: '';
   position: absolute;
   width: 340px;
   height: 340px;
   border-radius: 50%;
   background: var(--secondary);
   opacity: .22;
   top: -120px;
   inset-inline-end: -80px
}

.about-cta>* {
   position: relative
}

.about-cta h2 {
   font-size: clamp(32px, 4.2vw, 48px);
   margin-bottom: 12px
}

.about-cta p {
   opacity: .95;
   margin-bottom: 24px
}

.about-cta .btn-light {
   background: #fff;
   color: var(--primary)
}

.about-cta .btn-light:hover {
   background: var(--secondary);
   color: #000
}

.about-cta .btn-ghost {
   border-color: #fff;
   color: #fff
}

.about-cta .btn-ghost:hover {
   background: #fff;
   color: var(--primary)
}

.about-cta-media {
   border-radius: 26px;
   overflow: hidden;
   border: 6px solid rgba(255, 255, 255, .35);
   box-shadow: var(--sh);
   aspect-ratio: 4/3
}

.about-cta-media img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

@media(max-width:1024px) {

   .story,
   .diff,
   .trust,
   .about-cta {
      grid-template-columns: 1fr
   }

   .story-media {
      max-width: 520px;
      margin-inline: auto;
      width: 100%
   }

   .diff-media {
      max-width: 520px;
      margin-inline: auto;
      width: 100%
   }

   .about-hero,
   .svc-hero,
   .doc-hero,
   .doc-banner,
   .vx-hero,
   .vx-banner {
      padding: 90px 0
   }

   .values {
      grid-template-columns: 1fr 1fr
   }

   .timeline {
      grid-template-columns: 1fr 1fr;
      gap: 28px 18px
   }

   .timeline::before {
      display: none
   }

   .gallery {
      grid-template-columns: 1fr 1fr
   }

   .about-cta-media {
      max-width: 520px;
      width: 100%;
      margin-inline: auto
   }
}

@media(max-width:680px) {
   .about-hero,
   .svc-hero,
   .doc-hero,
   .doc-banner,
   .vx-hero,
   .vx-banner {
      padding: 64px 0
   }

   .about-hero .deco2,
   .svc-hero .deco2,
   .doc-hero .deco2,
   .doc-banner .banner-deco,
   .vx-hero .deco2,
   .vx-banner .vx-banner-deco {
      display: none
   }

   .values,
   .timeline {
      grid-template-columns: 1fr
   }

   .story-media {
      aspect-ratio: 4/3.4
   }

   .gallery {
      grid-template-columns: 1fr 1fr;
      gap: 12px
   }

   .gallery figure {
      border-width: 4px
   }

   .gallery figcaption {
      opacity: 1;
      transform: none;
      font-size: 11px;
      padding: 5px 9px;
      bottom: 8px;
      inset-inline: 8px
   }

   .about-cta .btn-row .btn {
      flex: 1
   }
}

@media(max-width:420px) {
   .gallery {
      grid-template-columns: 1fr
   }

   .hero2-quick {
      width: 100%
   }
}

/* ===== SERVICES ===== */
/* filter + services grid */
.svc-filter {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
   margin-bottom: 42px
}

.fbtn {
   padding: 11px 20px;
   border-radius: 999px;
   border: 2px solid var(--line);
   background: var(--bg);
   font-weight: 800;
   transition: .2s;
   display: inline-flex;
   align-items: center;
   gap: 8px
}

.fbtn i {
   color: var(--primary)
}

.fbtn:hover {
   border-color: var(--primary)
}

.fbtn.active {
   background: var(--primary);
   border-color: var(--primary);
   color: #fff
}

.fbtn.active i {
   color: var(--secondary)
}

.svc-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 26px;
   grid-auto-rows: 1fr
}

.svcard {
   position: relative;
   display: flex;
   flex-direction: column;
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 26px;
   padding: 24px 24px 28px;
   overflow: hidden;
   transition: .3s
}

.svcard.hide {
   display: none
}

.svcard::before {
   content: attr(data-num);
   position: absolute;
   top: 36px;
   inset-inline-end: 36px;
   font: 800 13px/1 var(--f-head);
   background: var(--bg);
   color: var(--primary);
   border: 1px solid var(--line);
   padding: 5px 12px;
   border-radius: 999px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
   z-index: 2;
   letter-spacing: .5px;
   pointer-events: none;
}

.svcard:hover {
   transform: translateY(-8px);
   border-color: var(--secondary);
   box-shadow: var(--sh)
}

.svcard-img {
   position: relative;
   width: 100%;
   height: 190px;
   border-radius: 18px;
   overflow: hidden;
   margin-bottom: 20px;
   background: var(--surface);
   flex-shrink: 0;
}

.svcard-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 20%;
   display: block;
   transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}

.svcard:hover .svcard-img img {
   transform: scale(1.06);
}

.svcard .ic {
   width: 62px;
   height: 62px;
   border-radius: 18px;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 28px;
   margin-bottom: 16px;
   transition: .3s
}

.svcard:hover .ic {
   background: var(--primary);
   color: #fff;
   transform: rotate(-6deg)
}

.svcard h3 {
   font-size: 24px;
   margin-bottom: 8px
}

.svcard>p {
   color: var(--muted);
   font-size: 16px
}

.svcard ul {
   display: grid;
   gap: 10px;
   margin: 18px 0 20px
}

.svcard li {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   font-size: 15px;
   font-weight: 400;
   color: var(--muted);
   line-height: 1.5
}

.svcard li i {
   color: var(--primary);
   font-size: 16px;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 1.5em;
   line-height: 1
}

.svcard .book {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   margin-top: 14px;
   font-weight: 800;
   color: var(--ptext)
}

.svcard .meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: auto;
   padding-top: 10px
}

.svcard .meta span {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: var(--surface);
   border-radius: 999px;
   padding: 5px 12px;
   font-size: 13px;
   font-weight: 800;
   color: var(--ptext)
}

.svcard .meta i {
   color: var(--primary);
   font-size: 14px
}

/* which visit do I need */
.need-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
}

.need {
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 24px;
   padding: 28px 26px;
   transition: .3s;
   display: flex;
   flex-direction: column
}

.need:hover {
   transform: translateY(-6px);
   border-color: var(--secondary);
   box-shadow: var(--sh)
}

.need .band {
   align-self: flex-start;
   font-size: 12px;
   font-weight: 800;
   padding: 4px 12px;
   border-radius: 999px;
   margin-bottom: 14px
}

.band.now {
   background: var(--primary);
   color: #fff
}

.band.soon {
   background: var(--secondary);
   color: #000
}

.band.routine {
   background: var(--surface);
   color: var(--ptext)
}

.need h3 {
   font-size: 22px;
   margin-bottom: 8px
}

.need p {
   color: var(--muted);
   font-size: 16px;
   flex: 1
}

.need p b {
   color: var(--ptext)
}

.need a {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   margin-top: 16px;
   font-weight: 800;
   color: var(--ptext)
}

/* minute-by-minute vaccine visit */
.visit-x {
   display: grid;
   grid-template-columns: 1.15fr .85fr;
   gap: clamp(32px, 5vw, 56px);
   align-items: start
}

.mins {
   position: relative
}

.mins::before {
   content: '';
   position: absolute;
   top: 8px;
   bottom: 8px;
   inset-inline-start: 9px;
   border-inline-start: 2px dashed var(--line)
}

.min {
   position: relative;
   display: flex;
   gap: 20px;
   padding-bottom: 30px
}

.min:last-child {
   padding-bottom: 0
}

.min .pin {
   flex: none;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--bg);
   border: 3px solid var(--primary);
   margin-top: 5px;
   position: relative;
   z-index: 1;
   transition: .3s
}

.min:hover .pin {
   background: var(--primary);
   transform: scale(1.18)
}

.min .when {
   flex: none;
   min-width: 84px;
   font: 800 15px/1.5 var(--f-head);
   color: var(--ptext);
   padding-top: 2px
}

.min h3 {
   font-size: 21px;
   margin-bottom: 4px
}

.min p {
   color: var(--muted);
   font-size: 16px
}

.kit {
   background: var(--bg);
   border: 2px dashed var(--secondary);
   border-radius: 24px;
   padding: 26px
}

.kit h3 {
   font-size: 22px;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   gap: 10px
}

.kit h3 i {
   color: var(--primary)
}

.kit>p {
   color: var(--muted);
   font-size: 15px
}

.kit ul {
   display: grid;
   gap: 12px;
   margin-top: 18px
}

.kit li {
   display: flex;
   gap: 12px;
   align-items: center;
   font-weight: 400
}

.kit li i {
   flex: none;
   width: 40px;
   height: 40px;
   border-radius: 12px;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 18px
}

/* compare table */
.cmp-wrap {
   overflow-x: auto;
   border: 2px solid var(--line);
   border-radius: 24px;
   background: var(--bg)
}

.cmp {
   width: 100%;
   min-width: 760px;
   border-collapse: collapse;
   table-layout: fixed
}

.cmp th,
.cmp td {
   vertical-align: middle
}

.cmp thead th {
   background: var(--primary);
   color: #fff;
   text-align: start;
   padding: 20px 18px;
   font: 800 20px var(--f-head)
}

.cmp thead th:first-child {
   width: 190px;
   background: color-mix(in srgb, var(--primary) 82%, #000)
}

.cmp thead th i {
   display: grid;
   place-items: center;
   width: 42px;
   height: 42px;
   border-radius: 12px;
   background: rgba(255, 255, 255, .16);
   margin-bottom: 8px;
   font-size: 20px
}

.cmp tbody th {
   text-align: start;
   padding: 16px 18px;
   font-weight: 800;
   border-top: 2px solid var(--line);
   background: var(--bg)
}

.cmp td {
   padding: 16px 18px;
   border-top: 2px solid var(--line);
   color: var(--muted);
   font-size: 15.5px
}

.cmp tbody tr:nth-child(odd) {
   background: var(--surface)
}

.cmp tbody tr:nth-child(odd) th {
   background: var(--surface)
}

.cmp thead th:first-child,
.cmp tbody th {
   position: sticky;
   inset-inline-start: 0;
   z-index: 2
}

.cmp thead th:first-child {
   z-index: 3
}

.cmp .ci {
   color: var(--primary);
   font-weight: 800
}

.cmp-note {
   margin-top: 16px;
   text-align: center;
   color: var(--muted);
   font-size: 14px
}

/* add-on services */
.addons {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 22px
}

.addon {
   display: flex;
   gap: 14px;
   align-items: center;
   background: var(--bg);
   color: var(--ink);
   border: 2px dashed var(--line);
   border-radius: 20px;
   padding: 20px;
   transition: .25s
}

.addon:hover {
   border-color: var(--primary);
   transform: translateY(-4px)
}

.addon i {
   flex: none;
   width: 46px;
   height: 46px;
   border-radius: 14px;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 21px
}

.addon b {
   display: block;
   font: 700 16px var(--f-head);
   margin-bottom: 2px
}

.addon small {
   color: var(--muted);
   font-size: 13px
}

/* beyond the visit: fixed background image */
#addons {
   background: linear-gradient(180deg, rgba(13, 38, 52, .84), rgba(13, 38, 52, .72)), url('../images/s-2.avif') center/cover no-repeat fixed;
   color: #fff
}

#addons .head h2 {
   color: #fff
}

#addons .head p {
   color: rgba(255, 255, 255, .86)
}

#addons .tag {
   background: rgba(255, 255, 255, .14);
   color: #fff;
   border-color: rgba(255, 255, 255, .3)
}

/* services responsive */
@media(max-width:1024px) {
   .svc-hero {
      padding: 90px 0
   }

   .svc-hero .hero2-quick div {
      padding: 9px 12px;
      font-size: 14px
   }

   .svc-grid,
   .need-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .visit-x {
      grid-template-columns: 1fr
   }

   .kit {
      max-width: 600px;
      margin-inline: auto;
      width: 100%
   }

   .addons {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:680px) {
   .svc-hero {
      padding: 64px 0
   }

   .svc-hero .deco2 {
      display: none
   }

   .svc-hero .hero2-quick div {
      padding: 11px 16px;
      font-size: 15px
   }

   .svc-grid,
   .need-grid,
   .addons {
      grid-template-columns: 1fr
   }

   .svcard {
      padding: 28px 22px
   }

   .min .when {
      min-width: 64px
   }

   .cmp {
      min-width: 620px
   }

   .cmp thead th {
      padding: 14px 12px;
      font-size: 17px
   }

   .cmp thead th:first-child {
      width: 140px
   }

   .cmp td,
   .cmp tbody th {
      padding: 12px
   }
}

/* ===== DOCTORS ===== */
/* 2 match / route board */

/* find your doctor */
.route-board {
   display: grid;
   gap: 14px
}

.route-row {
   display: grid;
   grid-template-columns: auto 1fr auto auto;
   align-items: center;
   gap: 18px;
   background: var(--bg);
   border: 2px solid var(--line);
   border-inline-start: 6px solid var(--secondary);
   border-radius: 22px;
   padding: 18px 20px;
   transition: .25s
}

.route-row:hover {
   border-color: var(--primary);
   border-inline-start-color: var(--primary);
   box-shadow: var(--sh-s)
}

.route-avatar img {
   width: 64px;
   height: 64px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--secondary)
}

.route-kicker {
   font-weight: 800;
   font-size: 12px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--ptext)
}

.route-main h3 {
   font-size: 20px;
   margin: 2px 0
}

.route-main p {
   color: var(--muted);
   font-size: 15px
}

.route-meta {
   min-width: 170px;
   text-align: end
}

.route-meta b {
   display: block;
   font: 700 17px var(--f-head)
}

.route-meta small {
   color: var(--muted);
   font-size: 13px;
   font-weight: 700
}

.route-go {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 18px;
   transition: .2s
}

.route-row:hover .route-go {
   background: var(--primary);
   color: #fff
}

/* team profiles */
.profile {
   display: grid;
   grid-template-columns: 1fr 1.05fr;
   gap: clamp(28px, 4.5vw, 56px);
   align-items: center
}

.profile+.profile {
   margin-top: clamp(40px, 6vw, 72px);
   padding-top: clamp(40px, 6vw, 72px);
   border-top: 2px dashed var(--line)
}

.profile:nth-child(even) .profile-media {
   order: 2
}

.profile-media {
   position: relative;
   aspect-ratio: 1/1.02;
   border-radius: 34px;
   overflow: hidden;
   border: 8px solid var(--bg);
   box-shadow: var(--sh)
}

.profile-media img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.profile-years {
   position: absolute;
   inset-inline-start: 16px;
   bottom: 16px;
   display: flex;
   align-items: baseline;
   gap: 8px;
   background: var(--primary);
   color: #fff;
   border-radius: 16px;
   padding: 10px 16px;
   font-weight: 800;
   font-size: 13px;
   box-shadow: var(--sh-s)
}

.profile-years b {
   font: 800 26px/1 var(--f-head);
   color: var(--secondary)
}

.profile-body h3 {
   font-size: clamp(30px, 3.6vw, 42px);
   margin-bottom: 2px
}

.profile-role {
   color: var(--ptext);
   font-weight: 800;
   margin-bottom: 8px
}

.profile-body>p {
   color: var(--muted)
}

.profile-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 14px 0
}

.profile-tags span {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 999px;
   padding: 5px 12px;
   font-size: 13px;
   font-weight: 800;
   color: var(--ptext)
}

.profile-facts {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px 20px;
   margin: 22px 0 26px
}

.profile-facts small {
   display: block;
   color: var(--muted);
   font-weight: 700;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: .05em
}

.profile-facts b {
   font: 700 16px var(--f-head)
}

/* care circle */
.circle-wrap {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: clamp(32px, 5vw, 56px);
   align-items: center
}

.circle-media {
   position: relative;
   aspect-ratio: 4/4.2;
   border-radius: 36px;
   overflow: hidden;
   border: 8px solid var(--bg);
   box-shadow: var(--sh)
}

.circle-media img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.circle-media figcaption {
   position: absolute;
   inset-inline: 16px;
   bottom: 16px;
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--bg);
   color: var(--ink);
   border-radius: 16px;
   padding: 14px 18px;
   font-weight: 800;
   font-size: 15px;
   box-shadow: var(--sh-s)
}

.circle-media figcaption i {
   color: var(--primary);
   font-size: 22px
}

.circle-list {
   display: grid;
   gap: 12px;
   margin-top: 24px
}

.circle-list li {
   display: flex;
   align-items: center;
   gap: 14px;
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 12px 16px;
   transition: .2s
}

.circle-list li:hover {
   border-color: var(--secondary)
}

.circle-list i {
   flex: none;
   width: 42px;
   height: 42px;
   border-radius: 13px;
   background: var(--surface);
   color: var(--primary);
   display: grid;
   place-items: center;
   font-size: 19px
}

.circle-list b {
   display: block;
   font: 700 17px var(--f-head)
}

.circle-list small {
   color: var(--muted);
   font-size: 13px;
   font-weight: 700
}

/* rota */
.rota-wrap {
   overflow-x: auto;
   border: 2px solid var(--line);
   border-radius: 24px;
   background: var(--bg)
}

.rota {
   width: 100%;
   min-width: 760px;
   border-collapse: collapse;
   table-layout: fixed
}

.rota th,
.rota td {
   padding: 14px 12px;
   border-bottom: 1px solid var(--line);
   text-align: center;
   font-size: 14px
}

.rota thead th {
   background: var(--surface);
   font: 800 15px var(--f-head);
   color: var(--ptext)
}

.rota thead th:first-child {
   width: 220px;
   text-align: start
}

.rota tbody th {
   text-align: start;
   font: 700 17px var(--f-head);
   background: var(--bg);
   border-inline-end: 1px solid var(--line)
}

.rota tbody th small {
   display: block;
   color: var(--muted);
   font: 700 12px var(--f-body)
}

.rota tbody tr:last-child th,
.rota tbody tr:last-child td {
   border-bottom: 0
}

.rota thead th:first-child,
.rota tbody th {
   position: sticky;
   inset-inline-start: 0;
   z-index: 2
}

.rota thead th:first-child {
   z-index: 3
}

.rota .slot {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin: 2px;
   padding: 5px 10px;
   border-radius: 999px;
   background: var(--surface);
   color: var(--ptext);
   font-weight: 800;
   font-size: 12px;
   white-space: nowrap
}

.rota .off {
   color: var(--muted);
   font-size: 12px;
   font-weight: 700
}

.rota-note {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px 22px;
   margin-top: 16px;
   color: var(--muted);
   font-size: 14px
}

.rota-note span {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-weight: 400
}

.rota-note i {
   color: var(--primary)
}

/* parent notes */
.notes-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 24px;
   flex-wrap: wrap;
   margin-bottom: 44px
}

.notes-head .head {
   margin-bottom: 0
}

.notes-wall {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   align-items: stretch
}

.note-card {
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 26px;
   padding: 30px 26px 24px;
   transition: .3s
}

.note-card:hover {
   border-color: var(--secondary);
   box-shadow: var(--sh)
}

.note-card::before {
   content: '\201C';
   position: absolute;
   top: 2px;
   inset-inline-end: 20px;
   font: 800 72px/1 var(--f-head);
   color: color-mix(in srgb, var(--primary) 14%, transparent)
}

.note-card>p {
   position: relative;
   flex: 1;
   font-size: 16px
}

.note-stars {
   display: inline-flex;
   gap: 2px;
   margin-bottom: 12px;
   color: var(--secondary);
   font-size: 13px
}

.note-who {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 20px;
   padding-top: 16px;
   border-top: 1px solid var(--line)
}

.note-who img {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--secondary)
}

.note-who b {
   display: block;
   font: 700 17px var(--f-head)
}

.note-who small {
   color: var(--muted);
   font-size: 13px
}

/* book cta */
.doc-cta {
   position: relative;
   overflow: hidden;
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: clamp(28px, 4vw, 50px);
   align-items: center;
   border-radius: 36px;
   padding: clamp(30px, 5vw, 64px);
   color: #fff;
   background: linear-gradient(115deg, rgba(6, 32, 42, .95) 0%, rgba(6, 32, 42, .78) 55%, rgba(6, 32, 42, .5) 100%), url('../images/d-2.avif') center/cover no-repeat
}

.doc-cta::before {
   content: '';
   position: absolute;
   width: 340px;
   height: 340px;
   border-radius: 50%;
   background: var(--secondary);
   opacity: .18;
   top: -120px;
   inset-inline-end: -80px
}

.doc-cta>* {
   position: relative
}

.doc-cta .tag {
   background: rgba(255, 255, 255, .14);
   border-color: rgba(255, 255, 255, .3);
   color: #fff;
   backdrop-filter: blur(6px)
}

.doc-cta .tag i {
   color: var(--secondary)
}

.doc-cta h2 {
   font-size: clamp(32px, 4.2vw, 48px);
   margin-bottom: 12px
}

.doc-cta p {
   opacity: .92;
   margin-bottom: 24px
}

.doc-cta .btn-light {
   background: #fff;
   color: var(--primary)
}

.doc-cta .btn-light:hover {
   background: var(--secondary);
   color: #000
}

.doc-cta .btn-ghost {
   border-color: #fff;
   color: #fff
}

.doc-cta .btn-ghost:hover {
   background: #fff;
   color: #000
}

.cta-choices {
   display: grid;
   gap: 12px
}

.cta-choice {
   display: flex;
   align-items: center;
   gap: 14px;
   background: rgba(255, 255, 255, .1);
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 18px;
   padding: 16px 18px;
   backdrop-filter: blur(6px)
}

.cta-choice i {
   flex: none;
   width: 46px;
   height: 46px;
   border-radius: 14px;
   background: rgba(255, 255, 255, .14);
   color: var(--secondary);
   display: grid;
   place-items: center;
   font-size: 20px
}

.cta-choice b {
   display: block;
   font: 700 17px var(--f-head)
}

.cta-choice small {
   opacity: .82;
   font-size: 13px
}

/* doctors responsive */
@media(max-width:1024px) {
   .route-row {
      grid-template-columns: auto 1fr auto
   }

   .route-go {
      display: none
   }

   .route-meta {
      min-width: 150px
   }

   .profile {
      grid-template-columns: 1fr
   }

   .profile:nth-child(even) .profile-media {
      order: 0
   }

   .profile-media {
      max-width: 540px;
      width: 100%;
      margin-inline: auto
   }

   .circle-wrap,
   .doc-cta {
      grid-template-columns: 1fr
   }

   .circle-media {
      max-width: 560px;
      width: 100%;
      margin-inline: auto
   }
}

@media(max-width:680px) {
   .route-row {
      grid-template-columns: auto 1fr;
      gap: 12px 14px;
      padding: 16px
   }

   .route-avatar {
      grid-row: 1/3
   }

   .route-avatar img {
      width: 54px;
      height: 54px
   }

   .route-main h3 {
      font-size: 19px
   }

   .route-main p {
      font-size: 14px
   }

   .route-meta {
      grid-column: 2;
      min-width: 0;
      text-align: start;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 4px 10px
   }

   .profile-media {
      aspect-ratio: 4/4.4
   }

   .profile-body h3 {
      font-size: 30px
   }

   .profile-facts {
      grid-template-columns: 1fr
   }

   .circle-list li {
      padding: 11px 13px
   }

   .rota {
      min-width: 640px
   }

   .rota thead th:first-child {
      width: 170px
   }

   .notes-head {
      align-items: flex-start
   }

   .notes-wall {
      grid-template-columns: 1fr;
      gap: 16px
   }

   .doc-cta .btn-row .btn {
      flex: 1
   }
}

/* ===== VACCINATION ===== */
.vx-float {
   position: absolute;
   z-index: 2;
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 18px;
   padding: 12px 18px;
   box-shadow: var(--sh);
   animation: flo 5s ease-in-out infinite
}

.vx-float i {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: var(--primary);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 19px;
   flex: none
}

.vx-float b {
   display: block;
   font-family: var(--f-head);
   font-size: 17px;
   line-height: 1.2
}

.vx-float small {
   color: var(--muted);
   font-weight: 700;
   font-size: 13px
}

/* 2 schedule explorer */
.vx-tabs {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
   margin-bottom: 28px
}

.vx-tabs .chip {
   display: inline-flex;
   align-items: center;
   gap: 8px
}

.vx-sched {
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: var(--r);
   padding: 14px 30px 26px;
   box-shadow: var(--sh-s)
}

.vx-panel {
   display: none
}

.vx-panel.show {
   display: block;
   animation: vxIn .45s ease
}

html:not(.js) .vx-panel {
   display: block
}

@keyframes vxIn {
   from {
      opacity: 0;
      transform: translateY(14px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

.vx-row {
   display: grid;
   grid-template-columns: 140px 1.35fr 1fr;
   gap: 22px;
   align-items: center;
   padding: 18px 4px;
   border-bottom: 1px dashed var(--line)
}

.vx-row:last-of-type {
   border-bottom: 0
}

.vx-row-head {
   border-bottom: 2px solid var(--line);
   font-weight: 800;
   font-size: 14px;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--ptext);
   padding-block: 14px
}

.vx-age {
   justify-self: start;
   background: var(--secondary);
   color: #000;
   font-family: var(--f-head);
   font-size: 18px;
   font-weight: 700;
   padding: 5px 16px;
   border-radius: 999px;
   white-space: nowrap
}

.vx-vacs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

.vx-vacs em {
   font-style: normal;
   font-weight: 700;
   font-size: 14px;
   padding: 5px 13px;
   border: 1px solid var(--line);
   background: var(--surface);
   border-radius: 999px
}

.vx-row p {
   color: var(--muted);
   font-size: 15px;
   line-height: 1.5
}

.vx-note {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   margin-top: 18px;
   color: var(--muted);
   font-size: 14.5px
}

.vx-note i {
   color: var(--primary);
   margin-top: 2px
}

.vx-note.c {
   justify-content: center;
   margin-top: 30px
}

/* 3 diseases */
.vx-shields {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 1fr;
   gap: 22px
}

.vx-shield {
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 24px;
   padding: 34px 22px 24px;
   transition: .3s
}

.vx-shield::before {
   content: '';
   position: absolute;
   inset-inline: 0;
   top: 0;
   height: 7px;
   background: linear-gradient(90deg, var(--primary), var(--secondary))
}

.vx-shield:hover {
   transform: translateY(-6px);
   border-color: var(--secondary);
   box-shadow: var(--sh)
}

.vx-shield>i {
   width: 66px;
   height: 76px;
   display: grid;
   place-items: center;
   border-radius: 18px 18px 50% 50%/18px 18px 60% 60%;
   background: var(--primary);
   color: #fff;
   font-size: 29px;
   margin-bottom: 16px;
   transition: .3s
}

.vx-shield:hover>i {
   background: var(--secondary);
   color: #000;
   transform: rotate(-6deg)
}

.vx-shield h3 {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 2.24em;
   font-size: 20px;
   margin-bottom: 8px
}

.vx-shield p {
   color: var(--muted);
   font-size: 15.5px;
   line-height: 1.55;
   flex: 1
}

.vx-shield span {
   margin-top: 16px;
   background: var(--surface);
   border: 1px solid var(--line);
   color: var(--ptext);
   font-weight: 800;
   font-size: 13px;
   padding: 4px 14px;
   border-radius: 999px
}

/* 4 dose finder */
.vx-finder {
   display: grid;
   grid-template-columns: 1fr 1.05fr;
   gap: 56px;
   align-items: center;
   background: var(--surface);
   border: 2px solid var(--line);
   border-radius: 36px;
   padding: clamp(26px, 5vw, 60px)
}

.vx-finder-copy h2 {
   font-size: clamp(32px, 4vw, 46px);
   margin-bottom: 14px
}

.vx-finder-copy>p {
   color: var(--muted);
   font-size: 18px;
   margin-bottom: 20px
}

.vx-ticks li {
   display: flex;
   gap: 12px;
   align-items: center;
   font-weight: 400;
   margin-bottom: 10px
}

.vx-ticks li i {
   color: var(--primary);
   font-size: 19px
}

.vx-finder-card {
   background: var(--bg);
   border: 2px dashed var(--secondary);
   border-radius: var(--r);
   padding: 28px
}

.vx-finder-row {
   display: flex;
   gap: 12px
}

.vx-finder-row input {
   flex: 1;
   min-width: 0
}

.vx-finder-row .btn {
   padding: 12px 22px;
   white-space: nowrap
}

.vx-err {
   color: #c00;
   font-weight: 400;
   font-size: 14px;
   margin-top: 8px
}

.vx-err:empty {
   display: none
}

.vx-result {
   margin-top: 20px
}

.vx-res-empty {
   text-align: center;
   color: var(--muted);
   padding: 18px 0
}

.vx-res-empty i {
   font-size: 46px;
   color: var(--secondary);
   display: block;
   line-height: 1.2
}

.vx-age-line {
   font-family: var(--f-head);
   font-size: 22px;
   margin-bottom: 12px
}

.vx-age-line span {
   color: var(--ptext)
}

.vx-res {
   border-radius: 18px;
   padding: 16px 18px;
   margin-bottom: 12px;
   border: 1px solid var(--line);
   background: var(--surface);
   animation: vxIn .45s ease both
}

.vx-res.next {
   background: color-mix(in srgb, var(--secondary) 22%, var(--bg));
   border-color: var(--secondary);
   animation-delay: .1s
}

.vx-res .lab {
   display: inline-block;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--ptext);
   margin-bottom: 2px
}

.vx-res .lab.now {
   background: var(--primary);
   color: #fff;
   padding: 2px 10px;
   border-radius: 999px
}

.vx-res h4 {
   font-size: 21px;
   margin-bottom: 10px
}

.vx-res h4 small {
   font-family: var(--f-body);
   font-weight: 700;
   font-size: 14px;
   color: var(--muted)
}

.vx-res-note {
   color: var(--muted);
   font-size: 14.5px
}

/* 6 after the shot */
.vx-care {
   display: grid;
   grid-template-columns: 1fr .8fr 1fr;
   gap: 28px;
   align-items: stretch
}

.vx-care-col {
   background: var(--bg);
   border: 2px solid var(--line);
   border-top: 8px solid var(--secondary);
   border-radius: 26px;
   padding: 28px 26px
}

.vx-care-col.call {
   border-top-color: var(--primary)
}

.vx-care-col h3 {
   display: flex;
   gap: 10px;
   align-items: center;
   font-size: 24px;
   margin-bottom: 18px
}

.vx-care-col.normal h3 i {
   color: var(--secondary)
}

.vx-care-col.call h3 i {
   color: var(--primary)
}

.vx-care-col li {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   font-weight: 400;
   font-size: 16px;
   line-height: 1.5;
   margin-bottom: 14px
}

.vx-care-col li i {
   margin-top: 3px
}

.vx-care-col.normal li i {
   color: color-mix(in srgb, var(--secondary) 70%, #000)
}

.vx-care-col.call li i {
   color: var(--primary)
}

.vx-care-img {
   border-radius: 26px;
   overflow: hidden;
   box-shadow: var(--sh);
   min-height: 280px
}

.vx-care-img img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.vx-comfort {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-top: 44px
}

.vx-step {
   position: relative;
   text-align: center;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 22px;
   padding: 28px 18px 20px
}

.vx-step span {
   position: absolute;
   top: -13px;
   inset-inline-start: 18px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--primary);
   color: #fff;
   display: grid;
   place-items: center;
   font-family: var(--f-head);
   font-size: 16px
}

.vx-step i {
   display: block;
   font-size: 32px;
   color: var(--ptext)
}

.vx-step b {
   display: block;
   font-family: var(--f-head);
   font-size: 20px;
   margin: 6px 0 4px
}

.vx-step small {
   display: block;
   color: var(--muted);
   font-size: 14.5px;
   line-height: 1.45
}

/* 7 myths vs facts */
.vx-myths {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px
}

.vx-flip {
   display: block;
   width: 100%;
   text-align: start;
   color: inherit
}

.vx-flip .face {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 10px;
   padding: 26px 24px;
   border: 2px solid var(--line);
   border-radius: 24px;
   background: var(--bg);
   margin-bottom: 12px
}

.vx-flip .face em {
   align-self: flex-start;
   font-style: normal;
   font-weight: 800;
   font-size: 12px;
   letter-spacing: .08em;
   text-transform: uppercase;
   padding: 3px 12px;
   border-radius: 999px;
   background: var(--primary);
   color: #fff
}

.vx-flip .face b {
   font-family: var(--f-head);
   font-size: 21px;
   line-height: 1.25
}

.vx-flip .face small {
   color: var(--muted);
   font-size: 15px;
   line-height: 1.5;
   font-weight: 600
}

.vx-flip .back {
   background: var(--secondary);
   border-color: var(--secondary);
   color: #000
}

.vx-flip .back em {
   background: #000;
   color: #fff
}

.vx-flip .back small {
   color: rgba(0, 0, 0, .82)
}

html.js .vx-flip {
   position: relative;
   height: 250px;
   perspective: 1100px
}

html.js .vx-flip .face {
   position: absolute;
   inset: 0;
   margin: 0;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   transition: transform .6s ease, box-shadow .3s
}

html.js .vx-flip .back {
   transform: rotateY(180deg)
}

html.js .vx-flip.on .front {
   transform: rotateY(-180deg)
}

html.js .vx-flip.on .back {
   transform: rotateY(0)
}

html.js .vx-flip:hover .face {
   box-shadow: var(--sh)
}

/* 8 reminders */
.vx-remind {
   display: grid;
   grid-template-columns: 1.15fr .85fr;
   gap: 56px;
   align-items: center;
   background: var(--primary);
   color: #fff;
   border-radius: 36px;
   padding: clamp(28px, 5vw, 64px);
   position: relative;
   overflow: hidden
}

.vx-remind::before {
   content: '';
   position: absolute;
   width: 340px;
   height: 340px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .09);
   top: -120px;
   inset-inline-end: -90px
}

.vx-remind>* {
   position: relative
}

.vx-remind .tag {
   background: rgba(255, 255, 255, .16);
   border-color: rgba(255, 255, 255, .35);
   color: #fff
}

.vx-remind h2 {
   font-size: clamp(34px, 4.4vw, 52px);
   margin-bottom: 14px
}

.vx-remind-copy>p {
   color: rgba(255, 255, 255, .92);
   font-size: 18px;
   margin-bottom: 20px
}

.vx-remind .vx-ticks li i {
   color: var(--secondary)
}

.vx-remind-form {
   margin-top: 24px
}

.vx-rf {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
}

.vx-remind label {
   color: #fff
}

.vx-remind input {
   border-color: transparent
}

.vx-remind input.bad {
   border-color: #000 !important
}

.vx-remind .btn-primary {
   margin-top: 16px;
   background: var(--secondary);
   color: #000;
   box-shadow: none
}

.vx-remind .btn-primary:hover {
   background: #fff
}

.vx-remind-img {
   position: relative;
   max-width: 380px;
   width: 100%;
   margin-inline: auto
}

.vx-remind-img>img {
   width: 100%;
   aspect-ratio: 4/4.8;
   object-fit: cover;
   border-radius: var(--r);
   border: 6px solid #fff;
   box-shadow: 0 18px 44px rgba(0, 0, 0, .25)
}

.vx-float.three {
   bottom: 22px;
   inset-inline-start: -28px;
   color: #000;
   background: #fff
}

.vx-float.three small {
   color: #555
}

/* vaccination responsive */
@media(max-width:1024px) {
   .vx-shields {
      grid-template-columns: repeat(2, 1fr)
   }

   .vx-finder,
   .vx-remind {
      grid-template-columns: 1fr;
      gap: 40px
   }

   .vx-care {
      grid-template-columns: 1fr 1fr
   }

   .vx-care-img {
      grid-column: 1/-1;
      order: -1;
      min-height: 0;
      aspect-ratio: 16/7
   }

   .vx-comfort {
      grid-template-columns: repeat(2, 1fr);
      gap: 28px 20px
   }

   .vx-myths {
      grid-template-columns: repeat(2, 1fr)
   }

   .vx-row {
      grid-template-columns: 120px 1.3fr 1fr;
      gap: 16px
   }
}

@media(max-width:680px) {
   .vx-float {
      padding: 8px 12px
   }

   .vx-float i {
      width: 34px;
      height: 34px;
      font-size: 16px
   }

   .vx-float b {
      font-size: 15px
   }

   .vx-float.one {
      inset-inline-start: -2%
   }

   .vx-float.two {
      inset-inline-end: -2%
   }

   .vx-tabs .chip {
      padding: 9px 14px;
      font-size: 15px
   }

   .vx-sched {
      padding: 6px 18px 20px
   }

   .vx-row-head {
      display: none
   }

   .vx-row {
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 18px 0
   }

   .vx-shields,
   .vx-care,
   .vx-myths {
      grid-template-columns: 1fr
   }

   .vx-care-img {
      aspect-ratio: 16/10
   }

   .vx-finder-row {
      flex-direction: column
   }

   .vx-finder-card {
      padding: 22px 18px
   }

   .vx-rf {
      grid-template-columns: 1fr
   }

   .vx-remind .btn-primary {
      width: 100%
   }

   .vx-float.three {
      inset-inline-start: -6px
   }
}


@media(max-width:420px) {
   .vx-comfort {
      grid-template-columns: 1fr
   }

   html.js .vx-flip {
      height: 270px
   }
}

/* ===== CONTACT ===== */
.ct-hero {
   position: relative;
   overflow: hidden;
   padding: clamp(70px, 9vw, 118px) 0;
   color: #fff;
   background: linear-gradient(180deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .52)), url('../images/c-1.avif') center 30%/cover no-repeat
}

.ct-hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--secondary) 22%, transparent), transparent 44%);
   pointer-events: none
}

.ct-hero .container {
   position: relative;
   z-index: 1
}

.ct-hero .deco2 {
   position: absolute;
   color: var(--secondary);
   font-size: 26px;
   opacity: .85;
   animation: flo 6s ease-in-out infinite
}

.ct-hero .deco2.a {
   top: 14%;
   inset-inline-end: 6%
}

.ct-hero .deco2.b {
   bottom: 12%;
   inset-inline-start: 4%;
   font-size: 19px;
   animation-delay: 1s
}

.ct-hero-top,
.ct-hero-copy {
   max-width: 820px;
   margin-inline: auto;
   text-align: center
}

.ct-hero .tag {
   background: rgba(255, 255, 255, .14);
   border-color: rgba(255, 255, 255, .35);
   color: #fff;
   backdrop-filter: blur(6px)
}

.ct-hero .tag i {
   color: var(--secondary)
}

.ct-hero h1 {
   font-size: clamp(38px, 5.2vw, 66px);
   margin-bottom: 18px
}

.ct-hero .lead {
   color: rgba(255, 255, 255, .9);
   font-size: 19px;
   max-width: 640px;
   margin: 0 auto 28px
}

.ct-hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   align-items: center;
   justify-content: center
}

.ct-hero .btn-ghost {
   border-color: #fff;
   color: #fff
}

.ct-hero .btn-ghost:hover {
   background: #fff;
   color: #000
}

.ct-open {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   margin-top: 22px;
   padding: 9px 16px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .14);
   border: 1px solid rgba(255, 255, 255, .3);
   font-weight: 700;
   font-size: 14.5px;
   backdrop-filter: blur(6px)
}

.ct-open i {
   color: var(--secondary)
}

.ct-open.is-open i {
   color: #8ef0b0
}

.ct-open.is-closed i {
   color: #ffb4a8
}

.ct-hero-card {
   background: var(--bg);
   color: var(--ink);
   border: 1px solid var(--line);
   border-radius: 28px;
   padding: 26px;
   box-shadow: 0 26px 60px rgba(0, 0, 0, .35)
}

.ct-hero-card-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 18px
}

.ct-hero-card-head>i {
   color: var(--primary);
   font-size: 24px
}

.ct-live {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 800;
   font-size: 13.5px;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--muted)
}

.ct-live span {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #2bb673;
   box-shadow: 0 0 0 4px color-mix(in srgb, #2bb673 22%, transparent);
   animation: ct-pulse 2s infinite
}

@keyframes ct-pulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 1
   }

   50% {
      transform: scale(.7);
      opacity: .6
   }
}

.ct-quick {
   display: grid;
   gap: 6px
}

.ct-quick li {
   display: flex;
   gap: 14px;
   align-items: center;
   padding: 12px;
   border-radius: 16px;
   transition: .2s
}

.ct-quick li:hover {
   background: var(--surface)
}

.ct-quick li>i {
   width: 44px;
   height: 44px;
   flex: none;
   display: grid;
   place-items: center;
   border-radius: 14px;
   background: var(--surface);
   border: 1px solid var(--line);
   color: var(--primary);
   font-size: 19px
}

.ct-quick small {
   display: block;
   color: var(--muted);
   font-weight: 700;
   font-size: 12.5px;
   text-transform: uppercase;
   letter-spacing: .05em
}

.ct-quick a,
.ct-quick span {
   font-weight: 800;
   font-size: 16.5px
}

.ct-quick a:hover {
   color: var(--primary)
}

.ct-hero-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-top: 14px;
   padding: 13px 18px;
   border-radius: 14px;
   background: var(--primary);
   color: #fff;
   font-weight: 800
}

.ct-hero-link:hover {
   background: color-mix(in srgb, var(--primary) 85%, #000)
}

.ct-hero-link i {
   transition: .2s
}

.ct-hero-link:hover i {
   transform: translateX(4px)
}

.ct-desks {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 1fr;
   gap: 22px
}

.ct-desk {
   display: flex;
   flex-direction: column;
   gap: 10px;
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 24px;
   padding: 28px 24px;
   transition: .3s
}

.ct-desk:hover {
   transform: translateY(-6px);
   border-color: var(--secondary);
   box-shadow: var(--sh)
}

.ct-desk-ic {
   width: 58px;
   height: 58px;
   display: grid;
   place-items: center;
   border-radius: 18px;
   background: var(--primary);
   color: #fff;
   font-size: 25px;
   margin-bottom: 2px;
   transition: .3s
}

.ct-desk:nth-child(even) .ct-desk-ic {
   background: var(--secondary);
   color: #000
}

.ct-desk:hover .ct-desk-ic {
   transform: rotate(-6deg)
}

.ct-desk-time {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-weight: 800;
   font-size: 13px;
   color: var(--ptext)
}

.ct-desk h3 {
   font-size: 22px
}

.ct-desk p {
   flex: 1;
   color: var(--muted);
   font-size: 15.5px;
   line-height: 1.55
}

.ct-desk a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 800;
   font-size: 15px;
   color: var(--ptext)
}

.ct-desk a i {
   transition: .2s
}

.ct-desk a:hover i {
   transform: translateX(4px)
}

.ct-visit {
   display: grid;
   grid-template-columns: 1fr 1.05fr;
   gap: 48px;
   align-items: stretch
}

.ct-visit-info {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.ct-info {
   display: flex;
   gap: 16px;
   align-items: flex-start;
   padding: 18px 0;
   border-bottom: 1px solid var(--line)
}

.ct-info:first-child {
   padding-top: 0
}

.ct-info>i {
   width: 46px;
   height: 46px;
   flex: none;
   display: grid;
   place-items: center;
   border-radius: 14px;
   background: var(--surface);
   border: 1px solid var(--line);
   color: var(--primary);
   font-size: 20px
}

.ct-info h3 {
   font-size: 20px;
   margin-bottom: 2px
}

.ct-info p {
   color: var(--muted);
   font-size: 15.5px;
   line-height: 1.55
}

.ct-visit-info .btn-row {
   margin-top: 22px
}

.ct-map {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   min-height: 440px;
   border: 2px solid var(--line);
   border-radius: 28px;
   background: var(--bg);
   box-shadow: var(--sh-s)
}

.ct-map-frame {
   display: block;
   width: 100%;
   flex: 1;
   min-height: 360px;
   border: 0
}

.ct-map-card {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 8px 18px;
   padding: 14px 18px;
   border-top: 1px solid var(--line);
   background: var(--bg)
}

.ct-map-card b {
   display: block;
   font-family: var(--f-head);
   font-size: 18px
}

.ct-map-card small {
   display: block;
   color: var(--muted);
   font-size: 13.5px
}

.ct-map-card span {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 13.5px;
   font-weight: 700;
   color: var(--ptext)
}

.ct-msg {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: clamp(32px, 5vw, 60px);
   align-items: start
}

.ct-msg-copy h2,
.ct-hours-copy h2 {
   font-size: clamp(32px, 4.2vw, 48px);
   margin-bottom: 14px
}

.ct-msg-copy>p,
.ct-hours-copy>p {
   color: var(--muted);
   font-size: 18px;
   margin-bottom: 24px
}

.ct-steps {
   display: grid;
   gap: 18px;
   margin-bottom: 24px
}

.ct-steps li {
   display: flex;
   gap: 14px;
   align-items: flex-start
}

.ct-steps li>span {
   width: 40px;
   height: 40px;
   flex: none;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: var(--primary);
   color: #fff;
   font-family: var(--f-head);
   font-weight: 800;
   font-size: 17px
}

.ct-steps li:nth-child(2)>span {
   background: var(--secondary);
   color: #000
}

.ct-steps b {
   display: block;
   font-family: var(--f-head);
   font-size: 17px;
   line-height: 1.3
}

.ct-steps small {
   display: block;
   color: var(--muted);
   font-size: 14.5px;
   line-height: 1.5
}

.ct-msg-note {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   padding: 14px 16px;
   border-radius: 14px;
   background: var(--bg);
   border: 1px solid var(--line);
   color: var(--muted);
   font-size: 14px;
   font-weight: 400;
   line-height: 1.55
}

.ct-msg-note i {
   flex-shrink: 0;
   margin-top: 4px;
   color: var(--primary);
   font-size: 18px;
   line-height: 1
}

.ct-msg-note span {
   flex: 1
}

.ct-msg-note a {
   color: var(--ptext);
   text-decoration: underline;
   text-underline-offset: 2px;
   white-space: nowrap
}

.ct-msg-form {
   padding: clamp(22px, 4vw, 36px);
   border: 2px solid var(--line);
   border-radius: 28px;
   background: var(--bg);
   box-shadow: var(--sh-s)
}

.ct-fg {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
}

.ct-fg .full {
   grid-column: 1/-1
}

.ct-fg label span {
   color: var(--muted);
   font-weight: 600
}

.ct-fg textarea {
   min-height: 120px;
   resize: vertical
}

.ct-msg-form .btn {
   width: 100%;
   margin-top: 18px
}

.ct-ok {
   display: none;
   margin-top: 14px;
   padding: 12px 14px;
   border-radius: 12px;
   background: #e3f5ea;
   color: #075c27;
   font-weight: 700;
   font-size: 14.5px
}

[data-theme="dark"] .ct-ok {
   background: #0b2a17;
   color: #8be0a8
}

.ct-hours {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: clamp(32px, 5vw, 64px);
   align-items: center
}

.ct-hours-note {
   display: flex;
   gap: 14px;
   align-items: flex-start;
   padding: 16px 0;
   border-top: 1px solid var(--line)
}

.ct-hours-note>i {
   width: 44px;
   height: 44px;
   flex: none;
   display: grid;
   place-items: center;
   border-radius: 14px;
   background: var(--surface);
   border: 1px solid var(--line);
   color: var(--primary);
   font-size: 20px
}

.ct-hours-note b {
   display: block;
   font-family: var(--f-head);
   font-size: 18px
}

.ct-hours-note small {
   display: block;
   color: var(--muted);
   font-size: 14.5px;
   line-height: 1.5
}

.ct-week {
   display: grid;
   gap: 8px;
   padding: 18px;
   border: 2px solid var(--line);
   border-radius: 28px;
   background: var(--bg);
   box-shadow: var(--sh-s)
}

.ct-week li {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   border-radius: 14px;
   font-weight: 700;
   transition: .2s
}

.ct-week li span {
   flex: 1;
   font-family: var(--f-head);
   font-size: 17px
}

.ct-week li b {
   color: var(--muted);
   font-size: 14.5px;
   font-weight: 800
}

.ct-week li em {
   padding: 3px 9px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--surface);
   color: var(--ptext);
   font-style: normal;
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .05em
}

.ct-week li.today {
   background: var(--surface);
   outline: 2px solid var(--primary)
}

.ct-week li.today b {
   color: var(--ink)
}

.ct-week li.today em {
   border-color: var(--primary);
   background: var(--primary);
   color: #fff
}

.ct-week li.closed {
   opacity: .62
}

.ct-cta-wrap {
   padding: 0 0 100px
}

.ct-cta {
   position: relative;
   overflow: hidden;
   padding: clamp(40px, 7vw, 80px) clamp(24px, 5vw, 64px);
   border-radius: 40px;
   background: var(--ink);
   color: var(--bg);
   text-align: center
}

.ct-cta::before,
.ct-cta::after {
   content: '';
   position: absolute;
   border-radius: 50%;
   background: var(--primary);
   opacity: .22
}

.ct-cta::before {
   width: 260px;
   height: 260px;
   top: -120px;
   inset-inline-start: -80px
}

.ct-cta::after {
   width: 220px;
   height: 220px;
   bottom: -110px;
   inset-inline-end: -60px;
   background: var(--secondary)
}

.ct-cta>* {
   position: relative;
   z-index: 1
}

.ct-cta-ic {
   width: 76px;
   height: 76px;
   margin: 0 auto 20px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: var(--primary);
   color: #fff;
   font-size: 32px;
   box-shadow: 0 0 0 12px color-mix(in srgb, var(--primary) 18%, transparent)
}

.ct-cta h2 {
   font-size: clamp(32px, 4.6vw, 52px);
   margin-bottom: 12px
}

.ct-cta p {
   max-width: 560px;
   margin: 0 auto 26px;
   color: color-mix(in srgb, var(--bg) 74%, transparent);
   font-size: 18px
}

.ct-cta .btn-row {
   justify-content: center
}

.ct-cta .btn-ghost {
   border-color: color-mix(in srgb, var(--bg) 45%, transparent);
   color: var(--bg)
}

.ct-cta .btn-ghost:hover {
   background: var(--bg);
   color: var(--ink)
}

.ct-cta-chips {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px 20px;
   margin-top: 26px
}

.ct-cta-chips span {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: color-mix(in srgb, var(--bg) 78%, transparent);
   font-size: 14px;
   font-weight: 700
}

.ct-cta-chips i {
   color: var(--primary)
}

[dir="rtl"] .ct-hero-link i,
[dir="rtl"] .ct-desk a i {
   transform: scaleX(-1)
}

[dir="rtl"] .ct-hero-link:hover i,
[dir="rtl"] .ct-desk a:hover i {
   transform: scaleX(-1) translateX(4px)
}

@media(max-width:1024px) {
   .ct-hero-grid {
      grid-template-columns: 1fr
   }

   .ct-hero-top,
   .ct-hero-copy {
      max-width: 720px;
      margin-inline: auto;
      text-align: center
   }

   .ct-hero .lead {
      margin-inline: auto
   }

   .ct-hero-actions,
   .ct-open {
      justify-content: center
   }

   .ct-hero-card {
      width: 100%;
      max-width: 560px;
      margin-inline: auto
   }

   .ct-desks {
      grid-template-columns: repeat(2, 1fr)
   }

   .ct-visit,
   .ct-msg,
   .ct-hours {
      grid-template-columns: 1fr
   }

   .ct-map {
      min-height: 400px
   }

   .ct-hours-copy {
      max-width: 640px
   }
}

@media(max-width:680px) {
   .ct-hero {
      padding: 56px 0
   }

   .ct-hero h1 {
      font-size: clamp(32px, 9vw, 42px)
   }

   .ct-hero .lead {
      font-size: 17px
   }

   .ct-hero .deco2 {
      display: none
   }

   .ct-hero-card {
      padding: 20px
   }

   .ct-quick li {
      padding: 10px
   }

   .ct-desks,
   .ct-fg {
      grid-template-columns: 1fr
   }

   .ct-map {
      min-height: 360px
   }

   .ct-map-frame {
      min-height: 300px
   }

   .ct-week {
      padding: 12px
   }

   .ct-week li {
      flex-wrap: wrap;
      padding: 12px
   }

   .ct-week li b {
      order: 3;
      width: 100%;
      font-size: 13px
   }

   .ct-week li em {
      margin-inline-start: auto
   }

   .ct-cta-wrap {
      padding-bottom: 70px
   }
}

@media(max-width:420px) {
   .ct-quick a,
   .ct-quick span {
      font-size: 15px
   }

   .ct-map-card {
      padding: 12px 14px
   }
}

.auth-page {
   min-height: 100vh;
   min-height: 100dvh;
   padding-top: var(--nav-h);
   background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 46%), radial-gradient(circle at 88% 100%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 46%), var(--bg)
}

.auth {
   min-height: calc(100vh - var(--nav-h));
   min-height: calc(100dvh - var(--nav-h));
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: clamp(24px, 5vw, 56px) clamp(18px, 4vw, 34px)
}

.auth-page input,
.auth-page select,
.auth-page textarea {
   scroll-margin-top: calc(var(--nav-h) + 18px)
}

.auth-tools {
   display: flex;
   gap: 10px
}

.auth-grid {
   width: 100%;
   max-width: 470px;
   margin-inline: auto
}

.auth-card-wrap {
   width: 100%;
   max-width: 470px;
   margin-inline: auto
}

.auth-card {
   padding: clamp(24px, 4vw, 40px);
   border: 2px solid var(--line);
   border-radius: 30px;
   background: var(--bg);
   box-shadow: var(--sh)
}

.auth-head h2 {
   margin-bottom: 8px;
   font-size: clamp(30px, 3.4vw, 40px)
}

.auth-head p {
   margin-bottom: 24px;
   color: var(--muted);
   font-size: 15.5px
}

.auth-field {
   margin-bottom: 16px
}

.auth-field label {
   margin-bottom: 6px;
   font-size: 14px;
   font-weight: 800
}

.auth-input {
   position: relative
}

.auth-input>i {
   position: absolute;
   top: 50%;
   inset-inline-start: 16px;
   transform: translateY(-50%);
   color: var(--muted);
   font-size: 17px;
   pointer-events: none
}

.auth-input input {
   height: 54px;
   padding-inline-start: 44px;
   padding-inline-end: 16px;
   border-radius: 16px
}

.auth-input input.auth-pass {
   padding-inline-end: 50px
}

.auth-eye {
   position: absolute;
   top: 50%;
   inset-inline-end: 8px;
   transform: translateY(-50%);
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   border-radius: 10px;
   color: var(--muted);
   font-size: 17px;
   transition: .2s
}

.auth-eye:hover {
   background: var(--surface);
   color: var(--primary)
}

.auth-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 10px 16px;
   margin: 4px 0 20px
}

.auth-check {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   font-size: 14px;
   font-weight: 700;
   cursor: pointer
}

.auth-check input {
   width: 18px;
   height: 18px;
   flex: none;
   padding: 0;
   accent-color: var(--primary)
}

.auth-link {
   color: var(--primary);
   font-size: 14px;
   font-weight: 800
}

.auth-link:hover {
   text-decoration: underline
}

.auth-submit {
   width: 100%
}

.auth-note {
   min-height: 20px;
   margin-top: 10px;
   color: color-mix(in srgb, #c62828 88%, var(--ink));
   font-size: 13.5px;
   font-weight: 400;
   line-height: 1.45
}

.auth-ok {
   display: none;
   margin-top: 14px;
   padding: 12px 14px;
   border-radius: 12px;
   background: color-mix(in srgb, #1f9d55 12%, var(--bg));
   color: color-mix(in srgb, #1f9d55 80%, var(--ink));
   font-size: 14px;
   font-weight: 800;
   line-height: 1.45
}

.auth-alt {
   margin-top: 18px;
   text-align: center;
   color: var(--muted);
   font-size: 14.5px
}

.auth-alt a {
   color: var(--primary);
   font-weight: 800
}

.auth-alt a:hover {
   text-decoration: underline
}

.auth-legal {
   margin-top: 14px;
   padding-inline: 8px;
   text-align: center;
   color: var(--muted);
   font-size: 12.5px;
   line-height: 1.6
}

[dir="rtl"] .auth-submit i {
   transform: scaleX(-1)
}

@media(max-width:480px) {
   .auth {
      padding: 16px
   }

   .auth-page .logo {
      font-size: 23px
   }

   .auth-page .logo i {
      width: 38px;
      height: 38px;
      font-size: 19px
   }

   .auth-tools .icon-btn {
      width: 40px;
      height: 40px
   }

   .auth-card {
      padding: 22px 18px;
      border-radius: 24px
   }

   .auth-head h2 {
      font-size: 30px
   }
}

@media(max-width:600px) {
   .auth {
      padding: 12px 12px max(24px, env(safe-area-inset-bottom))
   }

   .auth-card {
      padding: 20px 16px;
      border-radius: 22px
   }

   .auth-head h2 {
      font-size: 28px
   }

   .auth-head p {
      margin-bottom: 18px;
      font-size: 15px
   }

   .auth-field {
      margin-bottom: 12px
   }

   .auth-input input {
      height: 50px
   }

   .auth-consent {
      margin: 2px 0 14px;
      font-size: 13px
   }

   .auth-submit {
      padding: 13px 22px
   }

   .auth-alt {
      margin-top: 14px
   }

   .auth-legal {
      margin-top: 10px;
      font-size: 12px
   }
}

.auth-split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 14px
}

.auth-consent {
   align-items: flex-start;
   margin: 2px 0 18px;
   color: var(--muted);
   font-size: 13.5px;
   line-height: 1.55
}

.auth-consent input {
   margin-top: 3px
}

.auth-consent.bad span {
   color: color-mix(in srgb, #c62828 88%, var(--ink))
}

.auth-consent.bad input {
   outline: 2px solid #c62828;
   outline-offset: 2px
}

.auth-ok a {
   color: inherit;
   text-decoration: underline;
   text-underline-offset: 2px
}

@media(max-width:1100px) {
   .auth-split {
      grid-template-columns: 1fr
   }
}

@media(max-width:600px) {
   .signup-page .auth {
      padding: 10px 10px max(20px, env(safe-area-inset-bottom))
   }

   .signup-page .auth-card {
      padding: 15px 14px;
      border-radius: 20px
   }

   .signup-page .auth-head .tag {
      margin-bottom: 8px
   }

   .signup-page .auth-head h2 {
      font-size: 26px
   }

   .signup-page .auth-head p {
      margin-bottom: 10px;
      font-size: 14.5px
   }

   .signup-page .auth-field {
      margin-bottom: 8px
   }

   .signup-page .auth-input input {
      height: 44px
   }

   .signup-page .auth-consent {
      margin: 0 0 8px;
      font-size: 12.5px;
      line-height: 1.45
   }

   .signup-page .auth-submit {
      padding: 12px 20px
   }

   .signup-page .auth-alt {
      margin-top: 8px;
      font-size: 13.5px
   }

   .signup-page .auth-legal {
      margin-top: 8px;
      font-size: 11.5px;
      line-height: 1.45
   }
}

@media(max-width:340px) {
   .signup-page .auth-card {
      padding: 12px
   }

   .signup-page .auth-field {
      margin-bottom: 7px
   }

   .signup-page .auth-consent {
      margin-bottom: 7px
   }

   .signup-page .auth-alt {
      margin-top: 6px
   }

   .signup-page .auth-legal {
      margin-top: 6px;
      font-size: 11px
   }
}


/* ===== DASHBOARDS (parent + admin) ===== */
body.pd-body {
   padding-top: 0;
   background: var(--surface);
   font-size: 16px;
   line-height: 1.55
}

.pd-shell {
   display: flex;
   min-height: 100vh
}

/* sidebar */
.pd-side {
   position: fixed;
   inset-block: 0;
   inset-inline-start: 0;
   width: 276px;
   background: var(--bg);
   border-inline-end: 1px solid var(--line);
   display: flex;
   flex-direction: column;
   padding: 20px 16px;
   gap: 16px;
   overflow-y: auto;
   z-index: 130;
   transition: transform .3s ease
}

.pd-brand {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 0 4px;
   min-height: 42px
}

.pd-brand .logo {
   font-size: 27px;
   gap: 10px;
   white-space: nowrap;
   flex-shrink: 0
}

.pd-brand .logo i {
   width: 42px;
   height: 42px;
   font-size: 21px;
   flex-shrink: 0
}

.pd-side-x {
   display: none;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 2px solid var(--line);
   place-items: center;
   flex-shrink: 0;
   background: transparent;
   cursor: pointer;
   color: var(--ink);
   font-size: 18px;
   transition: background var(--tr), border-color var(--tr), color var(--tr)
}

.pd-side-x:hover {
   background: var(--surface);
   border-color: var(--primary);
   color: var(--primary)
}

.pd-me {
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 12px
}

.pd-me img,
.pd-av {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   object-fit: cover;
   flex: none
}

.pd-me strong {
   display: block;
   font-family: var(--f-head);
   font-size: 17px;
   line-height: 1.2
}

.pd-me span {
   font-size: 13.5px;
   color: var(--muted);
   font-weight: 700
}

.pd-me .pd-dot {
   position: absolute
}

.pd-kids {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 12px
}

.pd-kids small,
.pd-nav-title {
   display: block;
   font-size: 12px;
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--muted);
   margin-bottom: 8px;
   padding-inline: 4px
}

.pd-kid-row {
   display: flex;
   gap: 8px
}

.pd-kid {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   border-radius: 14px;
   border: 2px solid var(--line);
   background: var(--bg);
   font-weight: 800;
   font-size: 14.5px;
   transition: .2s;
   min-width: 0
}

.pd-kid:hover {
   border-color: var(--secondary)
}

.pd-kid.active {
   border-color: var(--primary);
   background: color-mix(in srgb, var(--primary) 9%, var(--bg))
}

.pd-kid .pd-av {
   width: 30px;
   height: 30px;
   font-size: 14px
}

.pd-av.ini {
   display: grid;
   place-items: center;
   background: var(--secondary);
   color: #000;
   font-family: var(--f-head);
   font-weight: 700
}

.pd-av.ini.c2 {
   background: var(--primary);
   color: #fff
}

.pd-nav ul {
   display: grid;
   gap: 4px
}

.pd-nav-item {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 11px 14px;
   border-radius: 14px;
   font-weight: 800;
   color: var(--muted);
   text-align: start;
   transition: .2s
}

.pd-nav-item i {
   font-size: 19px;
   width: 22px;
   text-align: center
}

.pd-nav-item:hover {
   background: var(--surface);
   color: var(--ink)
}

.pd-nav-item.active {
   background: var(--primary);
   color: #fff;
   box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 32%, transparent)
}

.pd-count {
   margin-inline-start: auto;
   font-size: 12px;
   font-weight: 800;
   min-width: 24px;
   text-align: center;
   padding: 1px 8px;
   border-radius: 999px;
   background: var(--secondary);
   color: #000
}

.pd-side-foot {
   margin-top: auto;
   display: grid;
   gap: 8px;
   border-top: 1px solid var(--line);
   padding-top: 14px
}

.pd-side-foot [data-theme-toggle],
.pd-side-foot [data-rtl-toggle] {
   display: none
}

.pd-tool {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 14px;
   border-radius: 14px;
   font-weight: 800;
   color: var(--muted);
   transition: .2s
}

.pd-tool:hover {
   background: var(--surface);
   color: var(--ink)
}

.pd-tool i {
   font-size: 18px;
   width: 22px;
   text-align: center
}

.pd-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .5);
   opacity: 0;
   visibility: hidden;
   transition: .3s;
   z-index: 120
}

.pd-overlay.show {
   opacity: 1;
   visibility: visible
}

/* stage + topbar */
.pd-stage {
   margin-inline-start: 276px;
   flex: 1;
   min-width: 0
}

.pd-top {
   position: sticky;
   top: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   height: 78px;
   padding: 0 28px;
   background: var(--bg);
   border-bottom: 1px solid var(--line)
}

.pd-top-l {
   display: flex;
   align-items: center;
   gap: 14px;
   min-width: 0
}

.pd-burger {
   display: none
}

.pd-title h1 {
   font-size: 26px;
   line-height: 1.15;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.pd-title p {
   font-size: 14px;
   color: var(--muted);
   font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.pd-top-r {
   display: flex;
   align-items: center;
   gap: 10px
}

.pd-profile {
   position: relative
}

.pd-pro-btn {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 5px 12px 5px 5px;
   border: 2px solid var(--line);
   border-radius: 999px;
   font-weight: 800;
   transition: .2s
}

.pd-pro-btn:hover {
   border-color: var(--primary)
}

.pd-pro-btn img {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   object-fit: cover
}

.pd-pro-name {
   display: grid;
   text-align: start;
   line-height: 1.2;
   font-size: 14.5px
}

.pd-pro-name small {
   color: var(--muted);
   font-weight: 700;
   font-size: 12.5px
}

.pd-pop {
   position: absolute;
   inset-inline-end: 0;
   top: calc(100% + 10px);
   min-width: 200px;
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 16px;
   box-shadow: var(--sh);
   padding: 8px;
   display: none
}

.pd-pop.open {
   display: block
}

.pd-pop a,
.pd-pop button {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   padding: 10px 12px;
   border-radius: 10px;
   font-weight: 700
}

.pd-pop a:hover,
.pd-pop button:hover {
   background: var(--surface)
}

/* main + panels */
.pd-main {
   padding: 28px
}

.pd-panel {
   display: none
}

.pd-panel.active {
   display: block;
   animation: vxIn .4s ease
}

.pd-banner {
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
   background: linear-gradient(120deg, color-mix(in srgb, var(--secondary) 22%, var(--bg)), var(--bg) 70%);
   border: 1px solid var(--line);
   border-inline-start: 7px solid var(--primary);
   border-radius: 24px;
   padding: 26px 30px;
   margin-bottom: 24px
}

.pd-banner::after {
   content: '';
   position: absolute;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   background: color-mix(in srgb, var(--primary) 10%, transparent);
   inset-inline-end: -60px;
   top: -80px;
   pointer-events: none
}

.pd-banner>* {
   position: relative;
   z-index: 1
}

.pd-banner .tag {
   margin-bottom: 10px;
   padding: 4px 14px;
   font-size: 13px
}

.pd-banner h2 {
   font-size: clamp(24px, 3vw, 32px);
   margin-bottom: 6px
}

.pd-banner h2 em {
   font-style: normal;
   color: var(--ptext)
}

.pd-banner p {
   color: var(--muted);
   max-width: 620px;
   font-weight: 400
}

.pd-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-bottom: 24px
}

.pd-stats.c3 {
   grid-template-columns: repeat(3, 1fr)
}

.pd-card {
   background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 22px;
   box-shadow: var(--sh-s);
   min-width: 0
}

.pd-stat {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 20px
}

.pd-ic {
   --c: var(--primary);
   width: 54px;
   height: 54px;
   flex: none;
   border-radius: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   line-height: 1;
   background: color-mix(in srgb, var(--c) 16%, transparent);
   color: color-mix(in srgb, var(--c) 80%, var(--ink))
}

.pd-ic i {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: inherit;
   line-height: 1;
   width: 1em;
   height: 1em
}

.pd-ic i::before {
   vertical-align: 0;
   line-height: 1
}

.pd-ic.y {
   --c: var(--secondary)
}

.pd-ic.g {
   --c: #1f9d55
}

.pd-ic.b {
   --c: #2f7de1
}

.pd-stat b {
   display: block;
   font-family: var(--f-head);
   font-size: 28px;
   line-height: 1.1
}

.pd-stat div span {
   display: block;
   color: var(--muted);
   font-weight: 700;
   font-size: 14.5px
}

.pd-stat small {
   font-weight: 800;
   font-size: 12.5px;
   color: #1f9d55
}

.pd-stat small.r {
   color: var(--ptext)
}

.pd-g2 {
   display: grid;
   grid-template-columns: 1.65fr 1fr;
   gap: 24px;
   margin-bottom: 24px
}

.pd-g2.eq {
   grid-template-columns: 1fr 1fr
}

.pd-card-h {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
   padding: 18px 22px;
   border-bottom: 1px solid var(--line)
}

.pd-card-h h3 {
   font-size: 21px
}

.pd-card-h a,
.pd-link {
   font-weight: 800;
   color: var(--ptext);
   font-size: 15px
}

.pd-card-b {
   padding: 20px 22px
}

.pd-wrap {
   overflow-x: auto
}

.pd-table {
   width: 100%;
   border-collapse: collapse;
   min-width: 640px
}

.pd-table th {
   text-align: start;
   background: var(--surface);
   font-size: 12.5px;
   letter-spacing: .07em;
   text-transform: uppercase;
   color: var(--muted);
   font-weight: 800;
   padding: 12px 18px;
   white-space: nowrap
}

.pd-table td {
   padding: 14px 18px;
   border-bottom: 1px solid var(--line);
   vertical-align: middle
}

.pd-table tr:last-child td {
   border-bottom: 0
}

.pd-table tbody tr:hover td {
   background: color-mix(in srgb, var(--secondary) 7%, transparent)
}

.pd-cell {
   display: flex;
   align-items: center;
   gap: 12px
}

.pd-cell b {
   display: block;
   font-weight: 800;
   line-height: 1.25
}

.pd-cell small,
.pd-table small {
   display: block;
   color: var(--muted);
   font-weight: 600;
   font-size: 13.5px
}

.pd-pill {
   --c: #777;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 4px 12px;
   border-radius: 999px;
   font-weight: 800;
   font-size: 13px;
   white-space: nowrap;
   background: color-mix(in srgb, var(--c) 16%, transparent);
   color: color-mix(in srgb, var(--c) 72%, var(--ink))
}

.pd-pill::before {
   content: '';
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: currentColor
}

.pd-pill.ok {
   --c: #1f9d55
}

.pd-pill.warn {
   --c: var(--secondary)
}

.pd-pill.bad {
   --c: var(--primary)
}

.pd-pill.info {
   --c: #2f7de1
}

.pd-acts {
   display: flex;
   gap: 6px
}

.pd-act {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   border: 2px solid var(--line);
   display: grid;
   place-items: center;
   font-size: 15px;
   transition: .2s
}

.pd-act:hover {
   background: var(--primary);
   border-color: var(--primary);
   color: #fff
}

.pd-act.g:hover {
   background: #1f9d55;
   border-color: #1f9d55
}

/* toolbar */
.pd-head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   margin-bottom: 20px
}

.pd-head h2 {
   font-size: 30px
}

.pd-head p {
   color: var(--muted);
   font-weight: 400
}

.pd-tools {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   align-items: center
}

.pd-search {
   position: relative
}

.pd-search i {
   position: absolute;
   inset-inline-start: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--muted)
}

.pd-search input {
   padding-inline-start: 40px;
   width: 240px;
   border-radius: 999px;
   padding-block: 10px
}

.pd-tools select {
   width: auto;
   border-radius: 999px;
   padding: 10px 16px
}

.pd-tools .btn {
   padding: 10px 20px;
   font-size: 15px
}

.pd-empty {
   text-align: center;
   padding: 36px 16px;
   color: var(--muted);
   font-weight: 400
}

.pd-empty i {
   display: block;
   font-size: 40px;
   color: var(--secondary)
}

/* lists / schedule */
.pd-rows {
   display: grid;
   gap: 12px
}

.pd-row {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 12px 14px;
   border: 1px solid var(--line);
   border-radius: 16px;
   background: var(--bg)
}

.pd-time {
   background: color-mix(in srgb, var(--secondary) 28%, transparent);
   border-radius: 12px;
   padding: 6px 10px;
   font-family: var(--f-head);
   font-weight: 700;
   font-size: 16px;
   min-width: 70px;
   text-align: center;
   flex: none
}

.pd-row .grow {
   flex: 1;
   min-width: 0
}

.pd-row b {
   display: block;
   line-height: 1.25
}

.pd-row small {
   color: var(--muted);
   font-weight: 600;
   font-size: 13.5px
}

/* ring + chart */
.pd-ringbox {
   display: flex;
   align-items: center;
   gap: 22px;
   flex-wrap: wrap;
   justify-content: center
}

.pd-ring {
   width: 150px;
   height: 150px;
   position: relative;
   flex: none
}

.pd-ring svg {
   width: 100%;
   height: 100%;
   transform: rotate(-90deg)
}

.pd-ring circle {
   fill: none;
   stroke-width: 14
}

.pd-ring .bg {
   stroke: var(--line)
}

.pd-ring .fg {
   stroke: var(--primary);
   stroke-linecap: round;
   transition: stroke-dasharray .8s ease
}

.pd-ring div {
   position: absolute;
   inset: 0;
   display: grid;
   place-content: center;
   text-align: center
}

.pd-ring b {
   font-family: var(--f-head);
   font-size: 30px;
   line-height: 1
}

.pd-ring small {
   color: var(--muted);
   font-weight: 700;
   font-size: 12.5px
}

.pd-legend {
   display: grid;
   gap: 8px;
   font-weight: 400;
   font-size: 14.5px
}

.pd-legend i {
   display: inline-block;
   width: 12px;
   height: 12px;
   border-radius: 4px;
   margin-inline-end: 8px;
   vertical-align: -1px
}

.pd-chart {
   width: 100%;
   height: auto;
   display: block
}

.pd-chart text {
   fill: var(--muted);
   font: 700 11px var(--f-body)
}

.pd-chart .grid {
   stroke: var(--line);
   stroke-width: 1
}

.pd-seg {
   display: inline-flex;
   border: 2px solid var(--line);
   border-radius: 999px;
   padding: 3px
}

.pd-seg button {
   padding: 5px 16px;
   border-radius: 999px;
   font-weight: 800;
   font-size: 14px;
   color: var(--muted)
}

.pd-seg button.active {
   background: var(--primary);
   color: #fff
}

.pd-note {
   color: var(--muted);
   font-size: 13.5px;
   font-weight: 400;
   margin-top: 10px
}

/* next-vaccine / info cards */
.pd-next {
   background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--secondary)));
   color: #fff;
   border-radius: 22px;
   padding: 24px;
   position: relative;
   overflow: hidden
}

.pd-next::after {
   content: '';
   position: absolute;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .12);
   inset-inline-end: -40px;
   bottom: -60px
}

.pd-next small {
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
   opacity: .9
}

.pd-next h3 {
   font-size: 26px;
   margin: 6px 0 4px
}

.pd-next p {
   opacity: .92;
   font-weight: 400;
   margin-bottom: 14px
}

.pd-next .btn {
   background: var(--secondary);
   color: #000;
   padding: 10px 20px;
   font-size: 15px;
   position: relative;
   z-index: 1
}

/* doctors */
.pd-docs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px
}

.pd-doc {
   text-align: center;
   padding: 26px 22px
}

.pd-doc img {
   width: 110px;
   height: 110px;
   border-radius: 50%;
   object-fit: cover;
   margin: 0 auto 14px;
   border: 4px solid var(--secondary)
}

.pd-doc h3 {
   font-size: 22px
}

.pd-doc p {
   color: var(--muted);
   font-weight: 400;
   margin: 4px 0 12px;
   font-size: 15px
}

.pd-doc .btn {
   width: 100%;
   margin-top: 14px;
   padding: 10px 20px;
   font-size: 15px
}

.pd-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   justify-content: center
}

.pd-chips span {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 999px;
   padding: 2px 12px;
   font-size: 13px;
   font-weight: 700
}

.pd-sw {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin-top: 14px;
   font-weight: 800;
   font-size: 14.5px
}

/* stock meter */
.pd-meter {
   height: 10px;
   border-radius: 999px;
   background: var(--line);
   min-width: 110px;
   overflow: hidden
}

.pd-meter span {
   display: block;
   height: 100%;
   border-radius: 999px;
   background: #1f9d55
}

.pd-meter.low span {
   background: var(--primary)
}

.pd-meter.mid span {
   background: var(--secondary)
}

/* settings + switch */
.pd-set {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px
}

.pd-form {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
}

.pd-form .full {
   grid-column: 1/-1
}

.pd-form label {
   margin-bottom: 4px
}

.pd-form textarea {
   resize: vertical;
   min-height: 84px
}

.pd-form .btn {
   width: auto;
   margin: 0
}

.pd-opt {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 12px 0;
   border-bottom: 1px dashed var(--line)
}

.pd-opt:last-child {
   border-bottom: 0
}

.pd-opt b {
   display: block;
   line-height: 1.3
}

.pd-opt small {
   color: var(--muted);
   font-weight: 600
}

.pd-switch {
   position: relative;
   width: 50px;
   height: 28px;
   flex: none;
   display: inline-block;
   margin: 0
}

.pd-switch input {
   position: absolute;
   opacity: 0;
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
   cursor: pointer;
   z-index: 2
}

.pd-switch i {
   position: absolute;
   inset: 0;
   border-radius: 999px;
   background: var(--line);
   transition: .2s
}

.pd-switch i::after {
   content: '';
   position: absolute;
   top: 3px;
   inset-inline-start: 3px;
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
   transition: .2s
}

.pd-switch input:checked+i {
   background: var(--primary)
}

.pd-switch input:checked+i::after {
   inset-inline-start: 25px
}

.pd-switch input:focus-visible+i {
   outline: 3px solid var(--secondary);
   outline-offset: 2px
}

/* modal + toast */
.pd-modal {
   position: fixed;
   inset: 0;
   z-index: 300;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 20px;
   background: rgba(0, 0, 0, .55)
}

.pd-modal.open {
   display: flex
}

.pd-box {
   position: relative;
   width: min(560px, 100%);
   max-height: calc(100vh - 40px);
   overflow-y: auto;
   background: var(--bg);
   border-radius: 26px;
   padding: 28px;
   box-shadow: var(--sh);
   animation: vxIn .3s ease
}

.pd-box.sm {
   width: min(420px, 100%);
   text-align: center
}

.pd-box.lg {
   width: min(680px, 100%)
}

.pd-x {
   position: absolute;
   top: 16px;
   inset-inline-end: 16px;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 2px solid var(--line);
   display: grid;
   place-items: center
}

.pd-x:hover {
   background: var(--primary);
   color: #fff;
   border-color: var(--primary)
}

.pd-mh {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 20px;
   padding-inline-end: 40px
}

.pd-mh h3 {
   font-size: 24px
}

.pd-mh p {
   color: var(--muted);
   font-weight: 400;
   font-size: 14.5px
}

.pd-box.sm .pd-ic {
   margin: 0 auto 12px
}

.pd-box.sm p {
   color: var(--muted);
   margin: 6px 0 18px
}

.pd-ma {
   display: flex;
   gap: 12px;
   justify-content: flex-end;
   margin-top: 20px
}

.pd-box.sm .pd-ma {
   justify-content: center
}

.pd-ma .btn {
   padding: 10px 24px;
   margin: 0;
   width: auto
}

.pd-kv {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin: 16px 0
}

.pd-kv div {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 16px;
   padding: 12px;
   text-align: center
}

.pd-kv b {
   display: block;
   font-family: var(--f-head);
   font-size: 20px
}

.pd-kv span {
   color: var(--muted);
   font-size: 13px;
   font-weight: 700
}

.pd-toasts {
   position: fixed;
   bottom: 22px;
   inset-inline-end: 22px;
   z-index: 400;
   display: grid;
   gap: 10px
}

.pd-toast {
   display: flex;
   align-items: center;
   gap: 10px;
   background: var(--ink);
   color: var(--bg);
   padding: 12px 18px;
   border-radius: 14px;
   font-weight: 700;
   box-shadow: var(--sh);
   animation: vxIn .3s ease
}

.pd-toast i {
   color: var(--secondary)
}

/* dashboards responsive */
@media(max-width:1180px) {
   .pd-side {
      width: min(290px, 86vw);
      transform: translateX(-102%)
   }

   [dir="rtl"] .pd-side {
      transform: translateX(102%)
   }

   .pd-side.open {
      transform: none !important
   }

   .pd-side-x,
   .pd-burger {
      display: grid
   }

   .pd-side-foot [data-theme-toggle],
   .pd-side-foot [data-rtl-toggle] {
      display: flex
   }

   .pd-top-r [data-theme-toggle],
   .pd-top-r [data-rtl-toggle] {
      display: none
   }

   .pd-stage {
      margin-inline-start: 0
   }

   .pd-stats,
   .pd-stats.c3 {
      grid-template-columns: repeat(2, 1fr)
   }

   .pd-g2,
   .pd-g2.eq {
      grid-template-columns: 1fr
   }

   .pd-docs {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:760px) {
   .pd-top {
      padding: 0 16px;
      height: 70px
   }

   .pd-title h1 {
      font-size: 20px
   }

   .pd-title p,
   .pd-pro-name,
   .pd-pro-btn>.bi {
      display: none
   }

   .pd-pro-btn {
      padding: 4px
   }

   .pd-top-r .icon-btn {
      width: 38px;
      height: 38px
   }

   .pd-main {
      padding: 16px
   }

   .pd-banner {
      padding: 20px
   }

   .pd-banner .btn-row {
      width: 100%
   }

   .pd-banner .btn-row .btn {
      flex: 1;
      padding: 12px 14px;
      font-size: 15px
   }

   .pd-stats {
      gap: 12px
   }

   .pd-stat {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding: 16px
   }

   .pd-stat b {
      font-size: 24px
   }

   .pd-docs,
   .pd-set,
   .pd-form {
      grid-template-columns: 1fr
   }

   .pd-search,
   .pd-search input {
      width: 100%
   }

   .pd-tools {
      width: 100%
   }

   .pd-tools select {
      flex: 1
   }

   .pd-head h2 {
      font-size: 25px
   }

   .pd-box {
      padding: 22px 18px
   }

   .pd-kv {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px
   }

   .pd-ma {
      flex-wrap: wrap
   }

   .pd-ma .btn {
      flex: 1
   }

   .pd-toasts {
      inset-inline: 16px
   }

   .pd-card-h {
      padding: 14px 16px
   }

   .pd-card-b {
      padding: 16px
   }

   .pd-row {
      flex-wrap: wrap;
      gap: 10px 12px;
      padding: 14px
   }

   .pd-row .pd-time,
   .pd-row .pd-ic {
      order: 1;
      flex-shrink: 0
   }

   .pd-row .pd-pill,
   .pd-row .btn,
   .pd-row .pd-act,
   .pd-row .pd-acts {
      order: 2;
      margin-inline-start: auto;
      flex-shrink: 0
   }

   .pd-row .grow {
      order: 3;
      flex: 0 0 100%;
      width: 100%;
      min-width: 0
   }

   .pd-row .grow b {
      font-size: 15.5px;
      margin-bottom: 3px
   }

   .pd-row .grow small {
      display: block;
      line-height: 1.4;
      font-size: 13px
   }
}

@media(max-width:420px) {
   .pd-stats,
   .pd-stats.c3 {
      grid-template-columns: 1fr 1fr
   }

   .pd-stat div span {
      font-size: 13px
   }

   .pd-ring {
      width: 130px;
      height: 130px
   }
}

.pd-burger,
.pd-top-r .icon-btn,
.pd-pro-btn {
   flex: none
}

.pd-top-l {
   flex: 1
}

.pd-title {
   min-width: 0
}

.pd-pro-btn,
.pd-act,
.pd-kid,
.pd-side-x,
.pd-x,
.pd-pop a,
.pd-pop button {
   color: var(--ink)
}

.pd-act:hover,
.pd-x:hover {
   color: #fff
}

/* ===== 404 PAGE ===== */
body.nf-body {
   padding-top: 0
}

.nf {
   min-height: 100vh;
   min-height: 100dvh;
   display: grid;
   place-items: center;
   padding: 48px 20px;
   background: radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--secondary) 30%, transparent), transparent 42%), radial-gradient(circle at 6% 94%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 40%), var(--surface)
}

.nf-wrap {
   width: min(680px, 100%);
   text-align: center
}

.nf-code {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: clamp(8px, 2vw, 18px);
   margin-bottom: 22px;
   font-family: var(--f-head);
   font-weight: 800;
   font-size: clamp(110px, 24vw, 210px);
   line-height: 1;
   color: var(--primary)
}

.nf-face {
   position: relative;
   display: grid;
   place-items: center;
   width: .86em;
   height: .86em;
   border-radius: 50%;
   background: var(--secondary);
   color: #000;
   box-shadow: 0 14px 0 color-mix(in srgb, var(--primary) 22%, transparent);
   animation: nfBob 3.2s ease-in-out infinite
}

.nf-face i {
   font-size: .5em;
   line-height: 1
}

.nf-bandage {
   position: absolute;
   top: 14%;
   inset-inline-end: -6%;
   width: .34em;
   height: .13em;
   border-radius: 999px;
   background: var(--bg);
   border: 3px solid var(--primary);
   transform: rotate(35deg)
}

.nf h1 {
   font-size: clamp(30px, 5vw, 46px);
   margin: 14px 0 12px
}

.nf-text {
   max-width: 520px;
   margin: 0 auto 28px;
   color: var(--muted);
   font-size: 18px;
   line-height: 1.65
}

.nf-actions {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 14px;
   margin-bottom: 34px
}

.nf-links {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   padding-top: 26px;
   border-top: 2px dashed var(--line)
}

.nf-links a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
   border-radius: 999px;
   border: 2px solid var(--line);
   background: var(--bg);
   font-weight: 800;
   font-size: 15px;
   transition: .25s
}

.nf-links a i {
   color: var(--primary)
}

.nf-links a:hover {
   border-color: var(--secondary);
   transform: translateY(-3px);
   box-shadow: var(--sh-s)
}

@keyframes nfBob {

   0%,
   100% {
      transform: translateY(0) rotate(-3deg)
   }

   50% {
      transform: translateY(-14px) rotate(3deg)
   }
}

@media (max-width:520px) {
   .nf-actions .btn {
      width: 100%
   }

   .nf-text {
      font-size: 16px
   }
}

@media (prefers-reduced-motion:reduce) {
   .nf-face {
      animation: none
   }
}

/* ===== COMING SOON PAGE ===== */
body.cs-body {
   padding-top: 0
}

.cs {
   position: relative;
   overflow: hidden;
   min-height: 100vh;
   min-height: 100dvh;
   display: grid;
   place-items: center;
   padding: 40px 20px;
   background: radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--secondary) 32%, transparent), transparent 42%), radial-gradient(circle at 5% 95%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 42%), var(--surface)
}

.cs-wrap {
   position: relative;
   z-index: 1;
   width: min(720px, 100%);
   text-align: center
}

.cs-logo {
   display: flex;
   justify-content: center;
   width: max-content;
   margin: 0 auto 30px
}


.cs h1 {
   font-size: clamp(36px, 7vw, 66px);
   line-height: 1.1;
   margin: 16px 0 14px
}

.cs-text {
   max-width: 540px;
   margin: 0 auto 32px;
   color: var(--muted);
   font-size: 18px;
   line-height: 1.65
}

.cs-count {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: clamp(10px, 2vw, 18px);
   margin-bottom: 28px
}

.cs-box {
   background: var(--bg);
   border: 2px solid var(--line);
   border-radius: 22px;
   padding: 18px 8px 14px;
   box-shadow: var(--sh-s)
}

.cs-box b {
   display: block;
   font-family: var(--f-head);
   font-size: clamp(30px, 6vw, 52px);
   line-height: 1;
   color: var(--ptext);
   font-variant-numeric: tabular-nums
}

.cs-box span {
   display: block;
   margin-top: 8px;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--muted)
}

.cs-progress {
   max-width: 420px;
   margin: 0 auto 32px
}

.cs-bar {
   height: 12px;
   border-radius: 999px;
   background: var(--line);
   overflow: hidden
}

.cs-bar span {
   display: block;
   height: 100%;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--primary), var(--secondary))
}

.cs-progress small {
   display: block;
   margin-top: 8px;
   font-weight: 800;
   color: var(--muted)
}

.cs-sr {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap
}


.cs-back {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-top: 30px;
   font-weight: 800;
   color: var(--ptext)
}

.cs-back:hover {
   text-decoration: underline
}

.cs-deco {
   position: absolute;
   color: var(--secondary);
   opacity: .85;
   animation: csFloat 6s ease-in-out infinite
}

.cs-deco.a {
   top: 10%;
   inset-inline-start: 8%;
   font-size: 44px;
   color: var(--primary)
}

.cs-deco.b {
   top: 18%;
   inset-inline-end: 10%;
   font-size: 38px;
   animation-delay: 1s
}

.cs-deco.c {
   bottom: 14%;
   inset-inline-start: 12%;
   font-size: 34px;
   animation-delay: 2s
}

.cs-deco.d {
   bottom: 12%;
   inset-inline-end: 9%;
   font-size: 40px;
   color: var(--primary);
   animation-delay: 3s
}

@keyframes csFloat {

   0%,
   100% {
      transform: translateY(0) rotate(-4deg)
   }

   50% {
      transform: translateY(-16px) rotate(4deg)
   }
}

@media (max-width:640px) {
   .cs-deco {
      display: none
   }

   .cs-text {
      font-size: 16px
   }

   .cs-form {
      flex-direction: column
   }

   .cs-form .btn {
      width: 100%
   }
}

@media (max-width:380px) {
   .cs-box {
      padding: 14px 4px 10px
   }

   .cs-box span {
      font-size: 11px;
      letter-spacing: .04em
   }
}

@media (prefers-reduced-motion:reduce) {
   .cs-deco {
      animation: none
   }
}

/* hero CTA buttons: equal height, single-line + responsive alignment */
.hero .btn-row,
.hero2 .btn-row,
.about-hero .btn-row,
.svc-hero .btn-row,
.doc-hero .btn-row,
.vx-hero .btn-row,
.ct-hero-actions {
   display: inline-flex;
   flex-wrap: wrap;
   gap: 14px;
   align-items: center;
   width: fit-content
}

.about-hero .btn-row,
.svc-hero .btn-row,
.doc-hero .btn-row,
.vx-hero .btn-row,
.ct-hero-actions {
   margin-inline: auto;
   justify-content: center
}

.hero .btn-row .btn,
.hero2 .btn-row .btn,
.about-hero .btn-row .btn,
.svc-hero .btn-row .btn,
.doc-hero .btn-row .btn,
.vx-hero .btn-row .btn,
.ct-hero-actions .btn {
   min-height: 50px;
   white-space: nowrap
}

@media(max-width:560px) {

   .hero .btn-row,
   .hero2 .btn-row,
   .about-hero .btn-row,
   .svc-hero .btn-row,
   .doc-hero .btn-row,
   .vx-hero .btn-row,
   .ct-hero-actions {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 100%;
      gap: 12px;
      margin-inline: 0
   }

   .about-hero .btn-row,
   .svc-hero .btn-row,
   .doc-hero .btn-row,
   .vx-hero .btn-row,
   .ct-hero-actions {
      max-width: 400px;
      margin-inline: auto
   }

   .hero .btn-row .btn,
   .hero2 .btn-row .btn,
   .about-hero .btn-row .btn,
   .svc-hero .btn-row .btn,
   .doc-hero .btn-row .btn,
   .vx-hero .btn-row .btn,
   .ct-hero-actions .btn {
      width: 100%;
      flex: 1 1 auto;
      justify-content: center;
      text-align: center;
      padding: 13px 20px;
      font-size: 16px;
      min-height: 50px;
      white-space: nowrap
   }
}