/* דני-דנט: a journey. A trail winds down the page, a tooth mascot walks it, and every chapter is its own color world with wavy edges. */
:root {
  --white: #fff; --mint: #E9F8F6; --aqua: #12B5B0; --aqua-d: #0A7A77; --deep: #0B3C49; --sky: #CBEFFB; --sun: #FFB84D; --coral: #FF8A7A; --mut: #4F6F77;
  --accent: var(--aqua); --line: rgba(11, 60, 73, .16);
  --pad: clamp(1.25rem, 6vw, 5rem); --round: "Varela Round", "Rubik", sans-serif; --sans: "Rubik", system-ui, sans-serif;
  --loader-bg: var(--aqua); --loader-fg: #fff;
}
body { background: var(--mint); color: var(--deep); font: 400 1.0625rem/1.7 var(--sans); }
h1, h2, h3 { font-family: var(--round); font-weight: 400; line-height: 1.08; } em { font-style: normal; color: var(--aqua-d); } i { font-style: normal; }
.tag { display: inline-block; font-size: .85rem; font-weight: 500; color: var(--aqua-d); background: rgba(255, 255, 255, .7); padding: .3rem .9rem; border-radius: 99px; margin-bottom: 1.2rem; }
.lead { color: var(--mut); font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 36ch; }
.loader { align-content: center; justify-items: center; } .loader-tooth { width: 90px; fill: #fff; margin-bottom: 1.2rem; animation: bob 1.2s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(-14px) rotate(4deg); } } .loader-brand { font-family: var(--round); }
/* floating pill nav */
.site-header.pill { inset-inline: 50%; translate: 50% 0; top: 14px; width: min(94%, 820px); padding: .55rem .7rem .55rem 1.4rem; border-radius: 99px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(12px); box-shadow: 0 10px 40px rgba(11, 60, 73, .12); }
.site-header.pill.is-solid { padding-block: .55rem; background: rgba(255, 255, 255, .92); } .site-header.pill.is-hidden { transform: translateY(-140%); }
.brand { display: flex; align-items: center; gap: .5rem; font-family: var(--round); font-size: 1.35rem; } .brand svg { width: 1.3rem; fill: var(--aqua); }
.site-header li a { font-size: .92rem; font-weight: 500; } .nav-cta { background: var(--aqua); color: #fff; padding: .5rem 1.3rem; border-radius: 99px; box-shadow: 0 6px 16px rgba(18, 181, 176, .35); transition: .3s; } .nav-cta:hover { background: var(--aqua-d); }
.btn { display: inline-block; border: 0; cursor: pointer; background: var(--aqua); color: #fff; font: 500 1.05rem var(--sans); padding: 1rem 2.4rem; border-radius: 99px; box-shadow: 0 10px 28px rgba(18, 181, 176, .4); will-change: transform; transition: background .3s; } .btn:hover { background: var(--aqua-d); }
.link { border-bottom: 2px solid var(--sky); padding-block: .2rem; font-weight: 500; }

/* journey scaffold */
.journey { position: relative; }
.trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.trail path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trail-bg { stroke: rgba(11, 60, 73, .25); stroke-width: 4; stroke-dasharray: 2 16; }
.trail-fg path { stroke: var(--aqua); stroke-width: 10; filter: drop-shadow(0 0 8px rgba(18, 181, 176, .6)); } .trail-fg { clip-path: inset(0 0 100% 0); }
.walker { position: absolute; left: 0; top: 0; width: clamp(54px, 6vw, 84px); z-index: 3; filter: drop-shadow(0 10px 14px rgba(11, 60, 73, .3)); } .walker svg { display: block; width: 100%; }
.ch { position: relative; padding: clamp(6rem, 12vw, 10rem) var(--pad); min-height: 100svh; }
.ch > :not(.wave):not(.deco):not(.blob) { position: relative; z-index: 2; }
.wave { position: absolute; left: 0; right: 0; top: -89px; width: 100%; height: 90px; z-index: 2; fill: var(--bg); } .wave path { fill: var(--bg); }
.ch-head { margin-bottom: clamp(2rem, 5vw, 4rem); } .ch-head h2 { font-size: clamp(2.4rem, 5.4vw, 5rem); max-width: 12ch; }
.deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }

/* decor pieces */
.bub { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95), rgba(191, 233, 247, .35)); box-shadow: 0 6px 20px rgba(18, 181, 176, .18); }
.star { position: absolute; width: var(--s); fill: var(--sun); filter: drop-shadow(0 4px 8px rgba(255, 184, 77, .5)); } .star.y { fill: var(--coral); } .star.c { fill: var(--aqua); } .star.big { fill: #FFD166; }
.ring-d { position: absolute; width: 70px; height: 70px; border: 3px dashed var(--aqua); border-radius: 50%; animation: spin 16s linear infinite; } .ring-d.r2 { width: 46px; height: 46px; border-color: var(--coral); animation-direction: reverse; }
.mini { position: absolute; width: 46px; fill: #fff; stroke: var(--deep); stroke-width: 5; opacity: .85; } .mini.m2 { width: 34px; }
.blob { position: absolute; filter: blur(8px); opacity: .55; animation: morph 14s ease-in-out infinite; } @keyframes morph { 0%, 100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; } 50% { border-radius: 42% 58% 46% 54% / 58% 42% 58% 42%; } }
.b1 { width: 46vw; height: 46vw; background: linear-gradient(135deg, var(--sky), #fff); top: -12%; inset-inline-end: -8%; } .b2 { width: 32vw; height: 32vw; background: linear-gradient(135deg, #FFE2B8, #FFD1C9); bottom: -10%; inset-inline-start: -6%; animation-duration: 18s; } .b3 { width: 18vw; height: 18vw; background: linear-gradient(135deg, #B9F0EC, #D9F4FF); top: 40%; inset-inline-start: 38%; animation-duration: 11s; }

/* 1 hero */
.c-hero { --bg: var(--mint); background: linear-gradient(180deg, #DDF6F3, var(--mint)); display: grid; align-content: center; justify-items: center; text-align: center; overflow: hidden; }
.hero-copy h1 { font-size: clamp(3.6rem, 10vw, 9rem); margin-bottom: 1.2rem; } .hero-copy .lead { margin-inline: auto; } .acts { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: center; margin-top: 2rem; }
/* 2 visit */
.c-visit { --bg: #fff; background: #fff; } .stations { display: grid; gap: clamp(4rem, 12vw, 9rem); } .station { width: min(100%, 26rem); background: var(--mint); border-radius: 36px; padding: 1.8rem 2rem; box-shadow: 0 24px 60px rgba(11, 60, 73, .1); } .station h3 { font-size: 1.8rem; margin: .4rem 0; } .station p { color: var(--mut); }
.s-l { justify-self: start; } .s-r { justify-self: end; } .ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--aqua); color: #fff; font-family: var(--round); font-size: 1.4rem; box-shadow: 0 8px 18px rgba(18, 181, 176, .4); }
/* 3 treat */
.c-treat { --bg: var(--sky); background: var(--sky); overflow: hidden; } .bubs { position: relative; height: clamp(640px, 90vh, 900px); }
.bb { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-content: center; text-align: center; padding: 12%; background: radial-gradient(circle at 30% 26%, #fff 0 6%, transparent 7%), radial-gradient(circle at 40% 35%, var(--c1), var(--c2)); box-shadow: 0 30px 60px rgba(11, 60, 73, .18), inset 0 -16px 30px rgba(0, 0, 0, .06); cursor: pointer; transition: box-shadow .4s; } .bb:hover { box-shadow: 0 40px 80px rgba(11, 60, 73, .28); }
.bb h3 { font-size: clamp(1.3rem, 2.4vw, 2.2rem); } .bb p { font-size: .95rem; color: var(--mut); }
/* 4 before */
.c-before { --bg: var(--mint); background: linear-gradient(180deg, var(--mint), #fff); }
.compare { --c: 50; position: relative; width: min(100%, 52rem); margin-inline: auto; aspect-ratio: 16 / 9; border-radius: 44px; overflow: hidden; background: radial-gradient(80% 110% at 50% 100%, #8e2f3c, #c4616b); box-shadow: 0 30px 70px rgba(11, 60, 73, .25); cursor: ew-resize; touch-action: pan-y; user-select: none; }
.teeth { position: absolute; inset: 20% 7%; display: flex; gap: 1.4%; align-items: center; justify-content: space-between; } .teeth i { flex: 1; height: 100%; border-radius: 34% 34% 46% 46% / 20% 20% 80% 80%; } .teeth i:nth-child(1), .teeth i:nth-child(6) { height: 84%; } .teeth i:nth-child(2), .teeth i:nth-child(5) { height: 94%; }
.t-after i { background: linear-gradient(#fff, #E6F1F4); box-shadow: inset 0 -12px 16px rgba(11, 60, 73, .08), 0 8px 18px rgba(0, 0, 0, .22); }
.t-before { clip-path: inset(0 calc(var(--c) * 1%) 0 0); } .t-before i { background: radial-gradient(circle at 30% 70%, rgba(140, 100, 20, .5) 0 6%, transparent 7%), radial-gradient(circle at 70% 40%, rgba(140, 100, 20, .35) 0 8%, transparent 9%), linear-gradient(#E8D27F, #C2A646); box-shadow: inset 0 -12px 16px rgba(80, 50, 0, .2), 0 8px 18px rgba(0, 0, 0, .22); }
.divider { position: absolute; top: 0; bottom: 0; right: calc(var(--c) * 1%); width: 4px; background: #fff; box-shadow: 0 0 24px rgba(255, 255, 255, .9); } .divider span { position: absolute; top: 50%; right: -22px; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); display: grid; place-items: center; } .divider span::before { content: "↔"; color: var(--aqua-d); font-size: 1.3rem; }
.lbl { position: absolute; top: 1.2rem; font-family: var(--round); font-weight: 400; background: rgba(255, 255, 255, .9); padding: .3rem 1rem; border-radius: 99px; font-size: .95rem; } .l-before { left: 1.2rem; } .l-after { right: 1.2rem; color: var(--aqua-d); }
.spark { position: absolute; width: 18px; height: 18px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; } .sp1 { top: 24%; left: 30%; } .sp2 { top: 40%; left: 55%; } .sp3 { top: 28%; left: 78%; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-top: 3.5rem; } .badge-n { background: #fff; border-radius: 40px; padding: 1.4rem 2.2rem; text-align: center; box-shadow: 0 18px 50px rgba(11, 60, 73, .1); } .badge-n strong { display: block; direction: ltr; unicode-bidi: isolate; font-family: var(--round); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; color: var(--aqua); } .badge-n:nth-child(2) strong { color: var(--coral); } .badge-n:nth-child(3) strong { color: var(--sun); } .badge-n span { color: var(--mut); }
/* 5 kids */
.c-kids { --bg: #FFF1D6; background: linear-gradient(180deg, #FFF1D6, #FFE0C9); display: grid; place-items: center; overflow: hidden; }
.kids-card { background: #fff; border-radius: 56px; padding: clamp(2rem, 5vw, 4rem); max-width: 46rem; text-align: center; box-shadow: 0 30px 80px rgba(255, 138, 122, .3); } .kids-card h2 { font-size: clamp(2.6rem, 6vw, 5.4rem); margin-bottom: 1rem; } .kids-card .lead { margin: 0 auto 1.8rem; } .kids-card em { color: var(--coral); }
.balloon { position: absolute; bottom: -120px; width: 70px; height: 86px; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 8%, transparent 9%), var(--b); } .balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 70px; background: rgba(11, 60, 73, .4); }
.brush { position: absolute; right: 8%; bottom: 6%; width: 22px; height: 200px; transform-origin: 50% 0; } .brush i { display: block; width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(var(--aqua) 0 30%, #fff 30% 36%, var(--coral) 36%); box-shadow: 0 8px 14px rgba(0, 0, 0, .15); }
/* 6 contact */
.c-contact { --bg: var(--deep); background: var(--deep); color: #fff; overflow: hidden; } .c-contact .tag { background: rgba(255, 255, 255, .14); color: #fff; } .c-contact em { color: var(--sun); } .c-contact .lead { color: rgba(255, 255, 255, .75); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; } .c-copy h2 { font-size: clamp(2.6rem, 6vw, 5.4rem); margin-bottom: 1rem; }
.details { margin-top: 2rem; display: grid; gap: .8rem; } .details div { background: rgba(255, 255, 255, .08); border-radius: 20px; padding: .8rem 1.2rem; } .details dt { font-size: .8rem; color: var(--sun); font-weight: 500; } .details dd { margin: 0; }
.form { display: grid; gap: 1.2rem; align-content: start; background: #fff; color: var(--deep); border-radius: 36px; padding: clamp(1.4rem, 3vw, 2.6rem); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); } .form label { display: grid; gap: .35rem; font-size: .9rem; color: var(--mut); }
.form input, .form select, .form textarea { font: 400 1.05rem var(--sans); color: var(--deep); background: var(--mint); border: 2px solid transparent; border-radius: 18px; padding: .8rem 1.1rem; width: 100%; } .form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--aqua); background: #fff; } .form input[aria-invalid="true"] { border-color: var(--coral); } .form .btn { justify-self: start; } .form-note { min-height: 1.4em; color: var(--aqua-d); font-weight: 500; }
.wordmark { overflow: hidden; line-height: .95; margin: 5rem 0 1rem; } .wordmark span { display: block; text-align: center; font-family: var(--round); font-size: clamp(5rem, 22vw, 20rem); background: linear-gradient(90deg, var(--aqua), var(--sky), var(--sun)); -webkit-background-clip: text; background-clip: text; color: transparent; } .foot { text-align: center; color: rgba(255, 255, 255, .6); font-size: .85rem; }
.motion-toggle { border-radius: 99px; border-color: var(--aqua); color: var(--aqua-d); bottom: 1rem; }
@media (max-width: 860px) { .walker { width: 46px; } .contact-grid { grid-template-columns: 1fr; } .s-l, .s-r { justify-self: center; } .bubs { height: 1100px; } .bb { position: relative; left: auto !important; top: auto !important; margin: -2rem auto 0; } .bubs { height: auto; padding-bottom: 3rem; display: grid; } .brush { display: none; } }

/* a11y: white-on-teal buttons >= 4.5:1, accent numerals >= 3:1 on white */
.btn, .nav-cta, .ico { background: var(--aqua-d); }
.btn:hover, .nav-cta:hover { background: var(--deep); }
.badge-n strong { color: var(--aqua-d); } .badge-n:nth-child(2) strong { color: #C4452F; } .badge-n:nth-child(3) strong { color: #A85F00; }
.kids-card em { color: #C4452F; }
.motion-toggle { color: var(--deep); border-color: var(--deep); }