/* 2026-05-19 full cartoon-art implementation: African animated healthcare characters across the whole app */
:root{
  --cartoon-radius-xl: 32px;
  --cartoon-radius-lg: 24px;
  --cartoon-border: rgba(15, 23, 42, .10);
  --cartoon-shadow: 0 26px 70px rgba(15,23,42,.13), 0 8px 20px rgba(15,23,42,.08);
  --cartoon-ring: rgba(20,184,166,.20);
}
body.cartoon-ui{background:
  radial-gradient(circle at 12% 8%, rgba(45,212,191,.12), transparent 28%),
  radial-gradient(circle at 88% 12%, rgba(244,63,94,.10), transparent 26%),
  linear-gradient(180deg,#fbfdff 0%,#f8fbff 42%,#ffffff 100%);
}
body.cartoon-ui .header{backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);}
body.cartoon-ui .nav{gap:16px; min-height:78px;}
body.cartoon-ui .nav-links{padding:6px; border:1px solid rgba(15,23,42,.08); background:rgba(255,255,255,.78); border-radius:999px; box-shadow:0 12px 34px rgba(15,23,42,.06);}
body.cartoon-ui .nav-links a{position:relative; padding:10px 14px; border-radius:999px; transition:background .18s ease, color .18s ease, transform .18s ease;}
body.cartoon-ui .nav-links a:hover{background:rgba(20,184,166,.10); color:#0f766e; transform:translateY(-1px); text-decoration:none;}
body.cartoon-ui .nav-links a.is-active, body.cartoon-ui .nav-links a[aria-current="page"]{background:linear-gradient(135deg,rgba(20,184,166,.15),rgba(59,130,246,.12)); color:#0f766e; box-shadow:inset 0 0 0 1px rgba(20,184,166,.16); font-weight:900;}
body.cartoon-ui .btn-whatsapp-mini{background:linear-gradient(135deg,#16a34a,#14b8a6)!important; color:#fff!important; border-color:rgba(255,255,255,.32)!important; box-shadow:0 14px 34px rgba(20,184,166,.22)!important;}
body.cartoon-ui .btn-whatsapp-mini:hover{transform:translateY(-2px); text-decoration:none; box-shadow:0 20px 46px rgba(20,184,166,.30)!important;}
body.cartoon-ui .studio-art, body.cartoon-ui .cartoon-visual-img, body.cartoon-ui .page-hero-visual img, body.cartoon-ui .home-work-card>img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center; border-radius:inherit; image-rendering:auto;
}
body.cartoon-ui .hero-media-frame, body.cartoon-ui .home-service-media, body.cartoon-ui .home-cta-media, body.cartoon-ui .home-work-card>img, body.cartoon-ui .page-hero-visual{
  overflow:hidden; position:relative; border:1px solid var(--cartoon-border); background:linear-gradient(145deg,#fff,#edf9ff); box-shadow:var(--cartoon-shadow); isolation:isolate;
}
body.cartoon-ui .hero-media-frame::before, body.cartoon-ui .home-service-media::before, body.cartoon-ui .home-cta-media::before, body.cartoon-ui .page-hero-visual::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 38%,rgba(2,6,23,.08)); mix-blend-mode:soft-light;
}
body.cartoon-ui .hero-media-frame{border-radius:var(--cartoon-radius-xl); aspect-ratio:16/9; transform:translateZ(0);}
body.cartoon-ui .home-service-media{border-radius:24px; aspect-ratio:4/3; margin-bottom:18px;}
body.cartoon-ui .home-cta-media{border-radius:28px; aspect-ratio:4/3;}
body.cartoon-ui .home-work-card>img{border-radius:22px; aspect-ratio:4/3; max-height:260px; margin-bottom:16px;}
body.cartoon-ui .home-service-card, body.cartoon-ui .home-work-card, body.cartoon-ui .home-panel, body.cartoon-ui .card, body.cartoon-ui .faq{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
body.cartoon-ui .home-service-card:hover, body.cartoon-ui .home-work-card:hover, body.cartoon-ui .card:hover{transform:translateY(-4px); border-color:rgba(20,184,166,.24); box-shadow:0 22px 58px rgba(15,23,42,.10);}
body.cartoon-ui .page-hero{overflow:hidden;}
body.cartoon-ui .page-hero > .container{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr); gap:clamp(22px,4vw,52px); align-items:center;}
body.cartoon-ui .page-hero > .container > :not(.page-hero-visual){grid-column:1;}
body.cartoon-ui .page-hero-visual{grid-column:2; grid-row:1 / span 6; border-radius:30px; aspect-ratio:4/3; min-height:260px; align-self:center;}
body.cartoon-ui .page-hero-visual::after{content:""; position:absolute; inset:auto -18% -26% auto; width:54%; height:54%; background:radial-gradient(circle, rgba(244,63,94,.14), transparent 64%); z-index:1; pointer-events:none;}
body.cartoon-ui .page-hero-visual img{position:relative; z-index:0;}
body.cartoon-ui .page-hero .title{max-width:12ch;}
body.cartoon-ui .page-hero .desc{max-width:66ch;}
body.cartoon-ui .section .grid-3 .card, body.cartoon-ui .section .grid-2 .card{border-radius:24px;}
body.cartoon-ui .mobile-panel{border-radius:0 0 24px 24px; box-shadow:0 28px 64px rgba(15,23,42,.15);}
body.cartoon-ui .mobile-links a{font-size:16px; padding:14px 16px; border-radius:16px;}
body.cartoon-ui .mobile-links a.is-active, body.cartoon-ui .mobile-links a[aria-current="page"]{background:linear-gradient(135deg,rgba(20,184,166,.15),rgba(59,130,246,.12)); color:#0f766e; font-weight:900;}
body.cartoon-ui .floating-whatsapp{right:24px; bottom:24px;}
body.cartoon-ui .service-link{font-weight:900;}
@media (max-width: 1120px){
  body.cartoon-ui .nav-links a{padding:9px 10px;}
  body.cartoon-ui .btn-whatsapp-mini{display:none!important;}
}
@media (max-width: 900px){
  body.cartoon-ui .page-hero > .container{grid-template-columns:1fr;}
  body.cartoon-ui .page-hero-visual{grid-column:1; grid-row:auto; max-width:720px; width:100%;}
  body.cartoon-ui .page-hero .title{max-width:100%;}
  body.cartoon-ui .hero-media-frame{border-radius:24px;}
}
@media (max-width: 640px){
  body.cartoon-ui .nav{min-height:70px;}
  body.cartoon-ui .page-hero-visual{min-height:auto; border-radius:22px;}
  body.cartoon-ui .home-service-media, body.cartoon-ui .home-cta-media, body.cartoon-ui .home-work-card>img{border-radius:18px;}
  body.cartoon-ui .floating-whatsapp{right:14px; bottom:86px;}
}
@media (prefers-reduced-motion: reduce){
  body.cartoon-ui .home-service-card, body.cartoon-ui .home-work-card, body.cartoon-ui .card, body.cartoon-ui .nav-links a, body.cartoon-ui .btn-whatsapp-mini{transition:none!important; transform:none!important;}
}

body.cartoon-ui .sidebar-nav .nav-item.is-active{background:linear-gradient(135deg,rgba(20,184,166,.14),rgba(59,130,246,.11)); color:#0f766e; border-color:rgba(20,184,166,.24); font-weight:900;}
body.cartoon-ui .topbar .btn-whatsapp-mini{white-space:nowrap;}