/* =========================================================
   Dent-O-Care · shared site layer (loaded last on every page)
   Header navigation, active-page state and footer for the complete website.
   Uses only the existing design tokens; no visual redesign.
   ========================================================= */

/* ---- header: one clean line, Home always visible ---- */
@media (max-width:1560px){ .nav-links>a.nl-home{display:inline-block} }
.nav-links{gap:clamp(18px,2vw,30px)}
.dd-menu.one{grid-template-columns:minmax(230px,1fr);padding:12px}
.dd-menu.one a{padding:10px 12px}

/* ---- active page ---- */
.nav-links a[aria-current="page"],.dd-t.is-current{color:var(--gc-deep);font-weight:600}
.nav-links>a[aria-current="page"]::after,.dd-t.is-current::after{transform:scaleX(1);transform-origin:left}
.dd-menu a[aria-current="page"]{background:var(--gc-pista);color:var(--gc-deep)!important;font-weight:600}
.mnav a[aria-current="page"]{color:var(--gc-deep)}
.mnav a[aria-current="page"]::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gc-dark);margin-right:10px;vertical-align:middle}

/* ---- footer ---- */
.f-brand .f-cta{margin-top:22px}
.footer .logo{text-decoration:none}

/* ---- phone bar on inner pages (Book only) ---- */
.mcta.mcta-one{grid-template-columns:1fr}
.mcta.mcta-one .b{font-size:15px}

/* anchor targets clear the fixed header */
#appointment,#location,#results,#faqs,#services,.fcat,[id^="q-"]{scroll-margin-top:110px}

/* no sideways scroll from decorative rotating badges on small phones */
html{overflow-x:clip}

/* =========================================================
   Atmosphere (V02 complete site): slow-moving gradients, soft shapes and a cursor glow in every hero.
   Decorative only: aria-hidden, pointer-events:none, transform/opacity animation only (GPU-friendly),
   paused off-screen by site.js, removed for prefers-reduced-motion.
   ========================================================= */
.atmo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint}
.atmo *{pointer-events:none}
.hero>.wrap,.phero>.wrap{position:relative;z-index:2}
.hero>.mesh,.hero>.net{z-index:0}
.atmo-b{position:absolute;border-radius:50%;will-change:transform;animation:atmo-drift 26s ease-in-out infinite alternate}
.atmo-b.b1{width:min(58vw,820px);aspect-ratio:1;left:-16%;top:-30%;background:radial-gradient(circle at 50% 50%,rgba(194,212,208,.55),rgba(194,212,208,0) 66%)}
.atmo-b.b2{width:min(48vw,700px);aspect-ratio:1;right:-12%;top:-6%;background:radial-gradient(circle at 50% 50%,rgba(176,219,214,.42),rgba(176,219,214,0) 66%);animation-duration:32s;animation-delay:-8s}
.atmo-b.b3{width:min(40vw,560px);aspect-ratio:1;left:34%;bottom:-38%;background:radial-gradient(circle at 50% 50%,rgba(214,228,223,.7),rgba(214,228,223,0) 66%);animation-duration:22s;animation-delay:-14s}
@keyframes atmo-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(4%,6%,0) scale(1.08)}
  100%{transform:translate3d(-5%,2%,0) scale(.96)}
}
/* cursor glow (desktop, fine pointer): follows the pointer with easing via --gx/--gy set by site.js */
.atmo-glow{position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(150,205,198,.30) 0%,rgba(150,205,198,.12) 35%,rgba(150,205,198,0) 68%);transform:translate3d(var(--gx,70%),var(--gy,40%),0);opacity:0;transition:opacity .8s ease;will-change:transform}
.atmo.glow-on .atmo-glow{opacity:1}
/* touch / no cursor: the glow drifts on its own instead */
.atmo.glow-auto .atmo-glow{opacity:.85;transform:none;left:55%;top:35%;animation:atmo-wander 18s ease-in-out infinite alternate}
@keyframes atmo-wander{0%{transform:translate3d(-30vw,-6vh,0)}50%{transform:translate3d(0,10vh,0)}100%{transform:translate3d(18vw,-4vh,0)}}
.atmo.is-paused *{animation-play-state:paused!important}

/* ---- V03: precision field, rings, dental-arch line, parallax and page-wide cursor light ---- */
.atmo-field{position:absolute;inset:0;width:100%;height:100%;display:block}
.atmo-deco{position:absolute;inset:0}
.pr-rings{position:absolute;right:-4%;top:50%;width:min(46vw,640px);aspect-ratio:1;margin-top:calc(min(46vw,640px) / -2);overflow:visible;opacity:.55}
.pr-rings circle,.pr-rings path{fill:none;vector-effect:non-scaling-stroke}
.pr-c1{stroke:rgba(82,108,106,.16);stroke-width:1;stroke-dasharray:2 6}
.pr-ticks{stroke:rgba(82,108,106,.22);stroke-width:1}
.pr-c2{stroke:rgba(82,108,106,.14);stroke-width:1}
.pr-cross{stroke:rgba(82,108,106,.22);stroke-width:1}
.pr-c3{stroke:rgba(141,158,159,.18);stroke-width:1;stroke-dasharray:1 5}
.pr-dot{fill:rgba(82,108,106,.25)!important}
.pr-spin,.pr-spin2{transform-origin:100px 100px;transform-box:view-box}
.pr-spin{animation:spin 140s linear infinite}
.pr-spin2{animation:spin 90s linear infinite reverse}
.pr-arch{position:absolute;left:6%;right:6%;bottom:-4%;width:88%;height:42%;overflow:visible;opacity:.5}
.pr-arch path{fill:none;stroke:rgba(82,108,106,.14);stroke-width:1.2;stroke-dasharray:3 9;vector-effect:non-scaling-stroke;animation:arch-flow 6s linear infinite}
@keyframes arch-flow{to{stroke-dashoffset:-48}}
/* the shapes shift slightly with the cursor (desktop); "translate" composes with their own drift animation */
.atmo-b{translate:calc(var(--px,0) * -22px) calc(var(--py,0) * -16px);transition:translate .2s linear}
.pr-rings{translate:calc(var(--px,0) * 14px) calc(var(--py,0) * 10px)}
.pr-arch{translate:calc(var(--px,0) * -8px) 0}
.sv6-t,.fq-bub,.fq-card{translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 9px)}
.sv6-t.t2,.sv6-t.t4,.fq-card.c2,.fq-bub.q3{translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -12px)}
/* per-page placement of the rings */
.atmo--home .pr-rings{right:-2%;opacity:.4}
.atmo--services .pr-rings{right:auto;left:-14%;top:30%;width:min(34vw,460px);margin-top:calc(min(34vw,460px) / -2)}
.atmo--faq .pr-rings{right:auto;left:-12%;top:auto;bottom:-30%;margin-top:0;width:min(32vw,440px)}
.atmo--contact .pr-rings{right:auto;left:-10%;top:auto;bottom:-34%;margin-top:0;width:min(30vw,420px)}
.atmo--contact .pr-arch,.atmo--faq .pr-arch{display:none}
/* page-wide soft light following the cursor (desktop): tints, never covers */
.cursor-light{position:fixed;left:0;top:0;z-index:60;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(194,212,208,.38) 0%,rgba(214,228,223,.18) 38%,rgba(232,240,239,0) 70%);mix-blend-mode:multiply;opacity:0;transition:opacity .6s ease;will-change:transform}
.cursor-light.on{opacity:1}
html.in-hero .cursor-light{opacity:0}
.atmo-glow{background:radial-gradient(circle,rgba(150,205,198,.36) 0%,rgba(176,219,214,.16) 36%,rgba(176,219,214,0) 68%)}

/* ---- Services: floating translucent teeth + slow orbits (centred hero) ---- */
.atmo--services .sv6-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(63,89,87,.12) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 0%,transparent 75%)}
.sv6-t{position:absolute;color:var(--gc-dark);fill:currentColor;stroke:currentColor;opacity:.13;will-change:transform;animation:sv6-float 14s ease-in-out infinite alternate}
.sv6-t.t1{width:120px;height:120px;left:7%;top:24%;animation-duration:15s}
.sv6-t.t2{width:70px;height:70px;left:18%;bottom:12%;animation-duration:12s;animation-delay:-4s;opacity:.11}
.sv6-t.t3{width:150px;height:150px;right:6%;top:18%;animation-duration:17s;animation-delay:-7s;opacity:.1}
.sv6-t.t4{width:64px;height:64px;right:20%;bottom:16%;animation-duration:13s;animation-delay:-2s}
.sv6-t.t5{width:54px;height:54px;left:46%;top:13%;animation-duration:11s;animation-delay:-5s;opacity:.08}
@keyframes sv6-float{0%{transform:translate3d(0,0,0) rotate(-8deg)}100%{transform:translate3d(0,-26px,0) rotate(8deg)}}
.sv6-orbit{position:absolute;left:50%;top:50%;border-radius:50%;border:1px dashed rgba(63,89,87,.16);will-change:transform;animation:spin 90s linear infinite}
.sv6-orbit.o1{width:min(92vw,1100px);aspect-ratio:1;margin-left:calc(min(92vw,1100px) / -2);margin-top:calc(min(92vw,1100px) / -2)}
.sv6-orbit.o2{width:min(66vw,760px);aspect-ratio:1;margin-left:calc(min(66vw,760px) / -2);margin-top:calc(min(66vw,760px) / -2);border-style:solid;border-color:rgba(63,89,87,.08);border-top-color:rgba(63,89,87,.32);animation-duration:40s;animation-direction:reverse}

/* ---- FAQ: drifting question bubbles and answer cards on the right ---- */
.fq-bub{position:absolute;display:grid;place-items:center;border-radius:50% 50% 50% 12%;background:rgba(255,255,255,.75);border:1px solid rgba(63,89,87,.14);box-shadow:0 18px 40px -22px rgba(63,89,87,.45);font:italic 400 34px/1 var(--f-display);color:var(--gc-dark);will-change:transform;animation:fq-bob 9s ease-in-out infinite alternate}
.fq-bub.q1{width:76px;height:76px;right:30%;top:26%}
.fq-bub.q2{width:56px;height:56px;right:9%;top:20%;font-size:26px;animation-delay:-3s;animation-duration:11s}
.fq-bub.q3{width:92px;height:92px;right:14%;bottom:16%;font-size:42px;animation-delay:-6s;animation-duration:12s;border-radius:50% 50% 12% 50%}
.fq-bub.q4{width:44px;height:44px;right:38%;bottom:22%;font-size:20px;animation-delay:-2s;opacity:.7}
.fq-card{position:absolute;display:grid;gap:8px;padding:16px 18px;width:200px;border-radius:18px;background:rgba(255,255,255,.62);border:1px solid rgba(63,89,87,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);will-change:transform;animation:fq-bob 13s ease-in-out infinite alternate}
.fq-card i{display:block;height:8px;border-radius:8px;background:rgba(63,89,87,.14)}
.fq-card i:first-child{width:80%;background:rgba(63,89,87,.26)}
.fq-card i:nth-child(2){width:100%}
.fq-card i:nth-child(3){width:62%}
.fq-card.c1{right:18%;top:40%;animation-delay:-5s}
.fq-card.c2{right:4%;top:48%;width:150px;animation-duration:15s}
.fq-card.c3{right:26%;top:62%;width:170px;animation-delay:-9s;opacity:.8}
@keyframes fq-bob{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-10px,-22px,0)}}

/* ---- Contact: map grid, a route drawing itself towards a pulsing clinic pin ---- */
.ct-gridlines{position:absolute;right:0;top:0;bottom:0;width:62%;background-image:linear-gradient(rgba(63,89,87,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(63,89,87,.07) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.ct-route{position:absolute;right:4%;top:14%;width:min(46vw,620px);height:auto;overflow:visible}
.ct-route path{fill:none;stroke-linecap:round}
.ct-route .r-base{stroke:rgba(63,89,87,.12);stroke-width:10}
.ct-route .r-flow{stroke:var(--gc-dark);stroke-width:2.5;stroke-dasharray:6 12;opacity:.55;animation:ct-flow 2.6s linear infinite}
.ct-route .r-start{fill:#fff;stroke:var(--gc-dark);stroke-width:2.5}
@keyframes ct-flow{to{stroke-dashoffset:-36}}
.ct-pin{position:absolute;width:56px;height:56px;display:grid;place-items:center;transform:translate(-50%,-50%)}
.atmo--contact .ct-pin{left:auto;right:calc(4% + min(46vw,620px) * .2167);top:calc(14% + min(46vw,620px) * .2);transform:translate(50%,-50%)}
.ct-pin svg{position:relative;z-index:1;width:30px;height:30px;padding:13px;box-sizing:content-box;border-radius:50%;background:var(--gc-deep);color:#fff;stroke:currentColor;fill:none;box-shadow:0 14px 30px -10px rgba(63,89,87,.6)}
.ct-pin .pulse{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--gc-dark);opacity:0;animation:ct-pulse 3.6s ease-out infinite}
.ct-pin .p2{animation-delay:1.2s}.ct-pin .p3{animation-delay:2.4s}
@keyframes ct-pulse{0%{transform:scale(.9);opacity:.55}100%{transform:scale(3.4);opacity:0}}

/* phones and tablets: lighter decoration that never sits behind the text */
@media (max-width:900px){
  .fq-card,.fq-bub.q1,.fq-bub.q4{display:none}
  .fq-bub.q2{right:6%;top:96px}
  .fq-bub.q3{right:4%;bottom:6%;width:70px;height:70px;font-size:32px;opacity:.6}
  .ct-route{width:80vw;right:-18%;top:auto;bottom:-2%;opacity:.55}
  .atmo--contact .ct-pin{right:calc(-18% + 80vw * .2167);top:auto;bottom:calc(-2% + 80vw * .7 * .714);transform:translate(50%,50%) scale(.8);opacity:.75}
  .ct-gridlines{width:100%;opacity:.7}
  .sv6-t.t1{left:-4%;top:12%}
  .sv6-t.t3{right:-6%;top:auto;bottom:6%;width:110px;height:110px}
  .sv6-t.t5{display:none}
  .atmo-glow{width:420px;height:420px;margin:-210px 0 0 -210px}
}

@media (prefers-reduced-motion:reduce){
  .atmo *,.atmo{animation:none!important;transition:none!important;translate:none!important}
  .atmo-glow,.cursor-light,.atmo-field{display:none}
}
@media (max-width:900px){
  .pr-rings{right:-30%;width:90vw;margin-top:-45vw;opacity:.35}
  .atmo--services .pr-rings,.atmo--faq .pr-rings,.atmo--contact .pr-rings{left:auto;right:-36%;top:auto;bottom:-24%;width:80vw;margin-top:0}
  .pr-arch{opacity:.3}
}
@media (max-width:760px){ .pr-arch{display:none} }
/* phones: keep decoration clear of the text column */
@media (max-width:760px){
  .fq-bub.q3,.atmo--contact .ct-pin,.ct-route{display:none}
  .fq-bub.q2{top:84px;width:46px;height:46px;font-size:22px}
}
.atmo--home .atmo-deco{display:none}