/* Playful vector decoration layer. Loaded only when the Customizer decoration level is "playful". */

.deco-playful {
	--d-coral: #ff7a8a;
	--d-mint: #4fd1b0;
	--d-sun: #ffc233;
	--d-sky: #6fb8ff;
	--d-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C100 0 200 0 300 20S500 40 600 20S800 0 900 20S1100 40 1200 20V40H0Z'/%3E%3C/svg%3E");
	--d-squig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12'%3E%3Cpath d='M0 6Q7 -1 14 6T28 6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Hero style: vector (light hero with an animated illustration) */
.hero-style-vector { background: radial-gradient(circle at 85% 20%, color-mix(in srgb, #ffc233 22%, transparent), transparent 46%), linear-gradient(180deg, var(--c-soft), var(--c-bg)); color: var(--c-text); }
.hero-style-vector h1 { color: var(--c-text); letter-spacing: -.02em; }
.hero-style-vector.hero-tall h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); line-height: 1.08; }
.hero-style-vector .eyebrow, .hero-style-vector .crumbs a { color: var(--c-link); }
.hero-style-vector .crumbs { opacity: 1; }
.hero-style-vector .lead { opacity: .85; }
.hero-style-vector .btn-outline { color: var(--c-text); }
.hero-style-vector .hero-grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
.hero-vector.header-transparent .site-header { color: var(--c-text); }
.scene-wrap { position: relative; justify-self: center; width: min(100%, 520px); }
.hero-style-vector.hero-page .scene-wrap { width: min(100%, 300px); }
.scene { display: block; width: 100%; height: auto; overflow: visible; }
.scene-wrap .arch-chip { left: 2%; bottom: 4%; }

.sc-blob { fill: color-mix(in srgb, var(--c-primary) 16%, var(--c-bg)); }
.sc-sun circle { fill: var(--d-sun); }
.sc-rays path { fill: none; stroke: var(--d-sun); stroke-width: 6; stroke-linecap: round; }
.sc-rays { transform-box: fill-box; transform-origin: center; animation: d-spin 24s linear infinite; }
.sc-cloud path { fill: #fff; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--c-primary) 18%, transparent)); }
.sc-cloud-a { animation: d-drift 9s ease-in-out infinite alternate; }
.sc-cloud-b { animation: d-drift 12s ease-in-out -4s infinite alternate-reverse; }
.sc-heart { transform-box: fill-box; transform-origin: center; animation: d-beat 1.6s ease-in-out infinite; }
.sc-heart path { fill: var(--d-coral); }
.sc-steth { fill: none; stroke: var(--c-primary); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: d-draw 6s ease-in-out infinite; }
.sc-steth-dot { fill: var(--c-primary); }
.sc-steth-end { fill: var(--d-sun); stroke: var(--c-primary); stroke-width: 8; transform-box: fill-box; transform-origin: center; animation: d-beat 1.6s ease-in-out infinite; }
.sc-ecg { fill: none; stroke: var(--d-mint); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 560; stroke-dashoffset: 560; animation: d-ecg 3.4s linear infinite; }
.sc-balloon { transform-box: fill-box; transform-origin: 50% 100%; animation: d-float 5.5s ease-in-out infinite; }
.sc-balloon ellipse, .sc-balloon > path:nth-child(2) { fill: var(--d-coral); }
.sc-b2 { animation-duration: 6.5s; animation-delay: -2s; }
.sc-b2 ellipse, .sc-b2 > path:nth-child(2) { fill: var(--d-mint); }
.sc-b3 { animation-duration: 5s; animation-delay: -3.5s; }
.sc-b3 ellipse, .sc-b3 > path:nth-child(2) { fill: var(--d-sky); }
.sc-string { fill: none; stroke: color-mix(in srgb, var(--c-text) 45%, transparent); stroke-width: 2; }
.sc-star { fill: var(--d-sun); transform-box: fill-box; transform-origin: center; animation: d-twinkle 2.6s ease-in-out infinite; }
.sc-s2 { fill: var(--d-coral); animation-delay: -.9s; }
.sc-s3 { fill: var(--d-mint); animation-delay: -1.7s; }
.sc-dot { transform-box: fill-box; transform-origin: center; animation: d-float 4.5s ease-in-out infinite; }
.sc-d1 { fill: var(--d-sky); }
.sc-d2 { fill: var(--d-sun); animation-delay: -2s; }
.sc-d3 { fill: var(--d-coral); animation-delay: -3s; }
.par { transition: translate .25s ease-out; }

@keyframes d-spin { to { transform: rotate(360deg); } }
@keyframes d-drift { from { transform: translateX(-14px); } to { transform: translateX(18px); } }
@keyframes d-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } 56% { transform: scale(1); } }
@keyframes d-draw { 0% { stroke-dashoffset: 520; } 35%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -520; } }
@keyframes d-ecg { 0% { stroke-dashoffset: 560; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -560; } }
@keyframes d-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes d-twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .55; } 50% { transform: scale(1.15) rotate(18deg); opacity: 1; } }

/* Soft sections get wavy edges that slowly roll sideways */
.deco-playful .section-soft { position: relative; }
.deco-playful .section-soft::before, .deco-playful .section-soft::after, .deco-playful .site-footer::before { content: ""; position: absolute; left: 0; right: 0; height: 36px; background: var(--c-soft); pointer-events: none; -webkit-mask: var(--d-wave) repeat-x 0 0 / 600px 100%; mask: var(--d-wave) repeat-x 0 0 / 600px 100%; animation: d-wave 14s linear infinite; }
.deco-playful .section-soft::before { top: -35px; }
.deco-playful .section-soft::after { bottom: -35px; transform: scaleY(-1); animation-direction: reverse; }
.deco-playful .site-footer { position: relative; }
.deco-playful .site-footer::before { top: -35px; background: var(--c-footer); }
@keyframes d-wave { to { -webkit-mask-position: 600px 0; mask-position: 600px 0; } }

/* Heading underline becomes a moving squiggle */
.deco-playful .rule { width: 84px; height: 12px; border-radius: 0; background: var(--c-accent); -webkit-mask: var(--d-squig) repeat-x 0 0 / 28px 12px; mask: var(--d-squig) repeat-x 0 0 / 28px 12px; animation: d-squig 2.4s linear infinite; }
@keyframes d-squig { to { -webkit-mask-position: 28px 0; mask-position: 28px 0; } }

/* Service cards: an icon in a blob that wobbles on hover */
.card-ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1rem; background: var(--d-coral); border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.card-ico svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.svc-items .card:nth-child(4n+2) .card-ico { background: var(--d-mint); }
.svc-items .card:nth-child(4n+3) .card-ico { background: var(--d-sun); }
.svc-items .card:nth-child(4n+3) .card-ico svg { stroke: #3a2c00; }
.svc-items .card:nth-child(4n+4) .card-ico { background: var(--d-sky); }
.card:hover .card-ico { animation: d-wobble 1.1s ease-in-out infinite; transform: scale(1.08) rotate(-6deg); }
.deco-playful .card-index { display: none; }
@keyframes d-wobble { 0%, 100% { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; } 50% { border-radius: 42% 58% 45% 55% / 56% 44% 52% 48%; } }

/* Steps: numbers sit in slowly morphing colored blobs */
.deco-playful .step-num { width: 3rem; height: 3rem; border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; background: var(--d-coral); animation: d-wobble 7s ease-in-out infinite; }
.deco-playful .step:nth-child(3n+2) .step-num { background: var(--d-mint); animation-delay: -2s; }
.deco-playful .step:nth-child(3n+3) .step-num { background: var(--d-sky); animation-delay: -4s; }

/* Team portraits: colored backgrounds behind the initials */
.deco-playful .team-card:nth-child(4n+1) .team-photo { background: color-mix(in srgb, var(--d-coral) 30%, var(--c-bg)); }
.deco-playful .team-card:nth-child(4n+2) .team-photo { background: color-mix(in srgb, var(--d-mint) 30%, var(--c-bg)); }
.deco-playful .team-card:nth-child(4n+3) .team-photo { background: color-mix(in srgb, var(--d-sky) 32%, var(--c-bg)); }
.deco-playful .team-card:nth-child(4n+4) .team-photo { background: color-mix(in srgb, var(--d-sun) 34%, var(--c-bg)); }

/* Buttons bounce a little */
.deco-playful .btn { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, background .15s; }
.deco-playful .btn:hover { transform: translateY(-3px) rotate(-1.2deg) scale(1.03); }

@media (max-width: 900px) {
	.hero-style-vector .hero-grid { grid-template-columns: 1fr; }
	.scene-wrap { width: min(86%, 380px); }
	.hero-style-vector.hero-page .scene-wrap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.scene *, .deco-playful *, .deco-playful *::before, .deco-playful *::after { animation: none !important; }
	.sc-steth, .sc-ecg { stroke-dashoffset: 0; }
}

.deco-playful .eyebrow { color: var(--c-link); }