/* =====================================================================
   NA Dental — Anatomy illustrations & motion graphics (assets/anatomy.js)
   ===================================================================== */
.scroll-prog{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--cobalt);transform-origin:left;transform:scaleX(0);z-index:120;pointer-events:none}

/* shared line-art tokens */
.an-hero,.an-decay,.an-proc,.an-field,.jico{display:block;width:100%;height:auto;overflow:visible}
.an-hero .ln,.an-decay .ln{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.an-hero .hatch,.an-decay .hatch,.an-proc .hatch{stroke:var(--rule);stroke-width:1}
.an-hero .bonefill,.an-decay .bonefill,.an-proc .bonefill{opacity:.7}
.an-hero .al,.an-decay .al{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink)}
.an-hero .al.n{fill:var(--cobalt);font-size:9px}
.an-hero .axis{stroke:var(--rule);stroke-dasharray:3 5;stroke-width:1}
.an-hero .ln.pulp{stroke:var(--cobalt)}
.an-hero .ln.gum{stroke:#c0607a}
.an-hero .ln.bone{stroke:var(--graphite)}
.an-hero .ln.cut{stroke-dasharray:2 3;stroke-width:1}

/* ---------- Hero cross-section ---------- */
.hero-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.6fr) minmax(0,.55fr)}
/* Headline scales to its own column (container units) so a long word like "CONSERVE" can never squeeze the anatomy column */
@supports (font-size:1cqw){@media (min-width:1025px){
 .hero-grid>:first-child{container-type:inline-size;min-width:0}
 h1.mega{font-size:clamp(2.7rem,12.3cqw,7.4rem)}
 html[lang="ko"] h1.mega{font-size:clamp(2.4rem,12.7cqw,6.1rem)}
 html[lang="es"] h1.mega{font-size:clamp(2.7rem,11.3cqw,7.4rem)}
}}
.hero-art{align-self:center;width:100%;max-width:460px;justify-self:center;margin-bottom:-2%;pointer-events:none;transform:translate(var(--px,0),var(--py,0));transition:transform .6s var(--ease)}
.an-hero .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s var(--ease) forwards}
.an-hero .ln.bone{animation-delay:.1s}.an-hero .ln.gum{animation-delay:.4s}.an-hero .ln.dentin{animation-delay:.6s}.an-hero .ln.enamel{animation-delay:.9s}.an-hero .ln.pulp{animation-delay:1.3s}.an-hero .ln.cut{animation-delay:1.6s}
.an-hero .bonefill{opacity:0;animation:fade 1.2s 1s forwards}
.an-hero .call{opacity:0;animation:fade .6s calc(1.9s + var(--i)*.22s) forwards}
.an-hero .call .dot{fill:var(--cobalt)}
.an-hero .call .lead{fill:none;stroke:var(--cobalt);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .8s calc(2s + var(--i)*.22s) var(--ease) forwards}
.an-hero .call .dot{transform-box:fill-box;transform-origin:center;animation:fade .6s calc(1.9s + var(--i)*.22s) forwards,pulse 2.6s calc(3s + var(--i)*.4s) infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.7)}}

/* ---------- About: decay depth -> treatment ---------- */
.an-block{display:grid;grid-template-columns:140px 1fr;gap:24px;margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--ink);padding-top:28px}
.an-block>.mono{color:var(--cobalt)}
.an-block h3{margin:0 0 22px;font-family:var(--display);font-stretch:112%;font-weight:700;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.02em;line-height:1.15;max-width:24ch}
.an-decay-grid{display:grid;grid-template-columns:minmax(260px,.9fr) 1.1fr;gap:clamp(24px,4vw,64px);align-items:center}
.an-decay-wrap{border:1px solid var(--ink);background:var(--paper);position:relative;padding:14px}
.an-decay-wrap:before{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--rule) 1px,transparent 1px) 0 0/100% 40px,
  linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/40px 100%;opacity:.35;pointer-events:none}
.an-decay .fill{stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:opacity .5s}
.an-decay .fill.enamel{fill:#fff}
.an-decay .fill.dentin{fill:#F1EBDD}
.an-decay .fill.pulp{fill:#F5D7DE;stroke:#c0607a}
.an-decay .ln.gum{stroke:#c0607a}
.an-decay .ln.bone{stroke:var(--graphite)}
.an-decay .ln.cut{stroke-dasharray:2 3;stroke-width:1;transition:opacity .5s}
.an-decay .les{fill:#3b2a1d;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .5s var(--ease),transform .7s var(--ease)}
.an-decay[data-stage="1"] .l1,
.an-decay[data-stage="2"] .l1,.an-decay[data-stage="2"] .l2,
.an-decay[data-stage="3"] .l1,.an-decay[data-stage="3"] .l2,.an-decay[data-stage="3"] .l3{opacity:.9;transform:none}
.an-decay .rx{opacity:0;transition:opacity .5s .35s var(--ease),transform .7s .35s var(--ease)}
.an-decay .rx.filling{fill:var(--cobalt);stroke:none}
.an-decay .rx.crown{fill:none;stroke:var(--cobalt);stroke-width:5;vector-effect:non-scaling-stroke;transform:translateY(-14px)}
.an-decay .rx.rct{fill:var(--cobalt);stroke:none}
.an-decay .rx.implant .fix{fill:var(--paper);stroke:var(--cobalt);stroke-width:1.6}
.an-decay .rx.implant .thr{fill:none;stroke:var(--cobalt);stroke-width:1.2}
.an-decay .rx.implant .abut{fill:var(--cobalt)}
.an-decay .rx.implant{transform:translateY(-40px)}
.an-decay[data-stage="1"] .rx.filling{opacity:1}
.an-decay[data-stage="2"] .rx.crown{opacity:1;transform:none}
.an-decay[data-stage="3"] .rx.rct{opacity:1}
.an-decay[data-stage="3"] .rx.crown{opacity:1;transform:none}
.an-decay[data-stage="4"] .fill,.an-decay[data-stage="4"] .ln.cut{opacity:.14}
.an-decay[data-stage="4"] .rx.crown{opacity:1;transform:none}
.an-decay[data-stage="4"] .rx.implant{opacity:1;transform:none}
.an-decay .stage{font-size:12px;fill:var(--cobalt)}
.an-decay .verdict{font-size:11px;fill:var(--ink)}
.an-decay .verdict.bad{fill:#b4452f}
.an-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.an-steps li{display:grid;grid-template-columns:44px 1fr;gap:2px 14px;padding:14px 0;border-bottom:1px solid var(--rule);cursor:pointer;position:relative;transition:padding .35s var(--ease)}
.an-steps li b{grid-row:1/3;color:var(--graphite);font-weight:500;padding-top:3px}
.an-steps li span{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:1.15rem;letter-spacing:-.01em;color:var(--graphite);transition:color .3s}
.an-steps li small{display:block;color:var(--graphite);font-size:.9rem;opacity:.7;transition:opacity .3s}
.an-steps li:before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:2px;background:var(--cobalt);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.an-steps li.on{padding-left:16px}
.an-steps li.on:before{transform:none}
.an-steps li.on span,.an-steps li.done span{color:var(--ink)}
.an-steps li.on b{color:var(--cobalt)}
.an-steps li.on small{opacity:1}
.an-steps li:last-child.on:before{background:#b4452f}
.an-steps li:last-child.on b{color:#b4452f}

/* ---------- Services: pictograms + stage ---------- */
.svc-wrap{display:grid;grid-template-columns:1fr minmax(300px,34%);gap:clamp(24px,4vw,64px);align-items:start}
.svc-stage{position:sticky;top:96px;border:1px solid var(--ink);background:var(--bone);padding:14px}
.svc-frame{aspect-ratio:1;position:relative;background:
  linear-gradient(var(--rule) 1px,transparent 1px) 0 0/100% 32px,
  linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/32px 100%}
.svc-frame .an-proc{position:absolute;inset:8%;width:84%;height:84%}
.svc-frame.swap .an-proc{animation:fade .5s both}
.svc-cap{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);color:var(--graphite);display:flex;justify-content:space-between;gap:12px}
.svc-cap:after{content:"\25CF";color:var(--cobalt);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.2}}
.svc-mini{display:none}
.svc.on{background:color-mix(in srgb,var(--cobalt-soft) 45%,transparent)}
.svc.on .no{color:var(--cobalt)}
.svc:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}

/* procedure pictogram language */
.an-proc path,.an-proc rect,.an-proc ellipse{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.an-proc .tooth{fill:#fff}
.an-proc .gum{stroke:#c0607a}
.an-proc .bone{stroke:var(--graphite)}
.an-proc .tool{stroke:var(--cobalt);stroke-width:2.2}
.an-proc .sp{stroke:var(--cobalt);opacity:0;transform-box:fill-box;transform-origin:center;animation:spark 1.6s infinite}
.an-proc .spark .sp:nth-child(2){animation-delay:.5s}.an-proc .spark .sp:nth-child(3){animation-delay:1s}
@keyframes spark{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
.p-clean .plaque{stroke:#b8a36a;stroke-width:3;stroke-dasharray:60;animation:undraw 2.4s 1s var(--ease) infinite alternate}
@keyframes undraw{from{stroke-dashoffset:0;opacity:1}to{stroke-dashoffset:60;opacity:.2}}
.p-clean .tool{transform-box:fill-box;transform-origin:left bottom;animation:scrub 1.2s ease-in-out infinite alternate}
@keyframes scrub{from{transform:translate(-26px,30px) rotate(-6deg)}to{transform:translate(-50px,38px) rotate(6deg)}}
.p-fill .cavity{fill:#3b2a1d;stroke:none;animation:cavfade 3s infinite}
.p-fill .comp{fill:var(--cobalt);stroke:none;transform-box:fill-box;transform-origin:center;animation:compin 3s infinite}
.p-fill .tool{animation:toolin 3s infinite}
@keyframes cavfade{0%,40%{opacity:1}55%,100%{opacity:0}}
@keyframes compin{0%,40%{opacity:0;transform:scale(.2)}60%,100%{opacity:1;transform:none}}
@keyframes toolin{0%,30%{transform:translateY(-16px);opacity:0}45%,60%{transform:none;opacity:1}75%,100%{transform:translateY(-16px);opacity:0}}
.p-crown .prep{fill:#F1EBDD}
.p-crown .root{fill:#fff}
.p-crown .cap{fill:#fff;stroke:var(--cobalt);stroke-width:2;animation:capdown 3s var(--ease) infinite}
.p-crown .arrow{stroke:var(--cobalt);animation:capdown 3s var(--ease) infinite}
@keyframes capdown{0%,15%{transform:translateY(-38px)}50%,80%{transform:none}100%{transform:translateY(-38px)}}
.p-imp .fix .body{fill:var(--paper);stroke:var(--cobalt)}
.p-imp .fix .thr{stroke:var(--cobalt);stroke-width:1.3}
.p-imp .fix{animation:screw 4s var(--ease) infinite}
.p-imp .abut{fill:var(--cobalt);stroke:none;animation:abutin 4s var(--ease) infinite}
.p-imp .cap{fill:#fff;stroke:var(--ink);animation:capin 4s var(--ease) infinite}
@keyframes screw{0%{transform:translateY(-70px);opacity:0}10%{opacity:1}35%,100%{transform:none}}
@keyframes abutin{0%,35%{opacity:0;transform:translateY(-30px)}50%,100%{opacity:1;transform:none}}
@keyframes capin{0%,50%{opacity:0;transform:translateY(-40px)}70%,100%{opacity:1;transform:none}}
.p-ortho .tt{animation:align 4s var(--ease) infinite;animation-delay:calc(var(--i)*.08s)}
.p-ortho .bracket{fill:var(--cobalt);stroke:none}
.p-ortho .wire{stroke:var(--cobalt);stroke-width:1.4}
@keyframes align{0%,20%{transform:rotate(var(--r))}60%,100%{transform:rotate(0deg)}}
.p-rct .canal{stroke:#c0607a;stroke-width:3}
.p-rct .pulpc{fill:#c0607a;stroke:none;animation:cavfade 4s infinite}
.p-rct .gutta{stroke:var(--cobalt);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;animation:guttafill 4s var(--ease) infinite}
@keyframes guttafill{0%,45%{stroke-dashoffset:1}80%,100%{stroke-dashoffset:0}}
.p-rct .tool{animation:toolin 4s infinite}
.p-ext .socket{fill:#F5D7DE;stroke:#c0607a}
.p-ext .forceps{stroke:var(--cobalt);stroke-width:2.2}
.p-ext .tooth-g{animation:lift 4s var(--ease) infinite}
.p-ext .heal{fill:#c0607a;stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;animation:healin 4s infinite}
@keyframes lift{0%,25%{transform:none}60%,100%{transform:translateY(-54px)}}
@keyframes healin{0%,55%{opacity:0;transform:scale(.3)}80%,100%{opacity:1;transform:none}}
.p-fam .tf{transform-box:fill-box;transform-origin:bottom center;animation:bob 3s ease-in-out infinite;animation-delay:calc(var(--i)*.6s)}
.p-fam .heart{fill:var(--cobalt);stroke:none;transform-box:fill-box;transform-origin:center;animation:pulse 2s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* case chips */
.case-chip{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid var(--rule-dark);margin-left:auto}
.case-chip .an-proc{width:20px;height:20px}
.case-chip .an-proc path,.case-chip .an-proc rect,.case-chip .an-proc ellipse{stroke:var(--bone);stroke-width:5}
.case-chip .an-proc .tooth,.case-chip .an-proc .cap,.case-chip .an-proc .prep,.case-chip .an-proc .root,.case-chip .an-proc .socket{fill:none}
.case-chip .an-proc *{animation:none!important}
.case-chip .an-proc .bonefill,.case-chip .an-proc .sp,.case-chip .an-proc .plaque,.case-chip .an-proc .heal{display:none}

/* ---------- Visit: patient journey ---------- */
.journey{list-style:none;margin:0 0 clamp(36px,5vw,64px);padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);position:relative}
.journey:before{content:"";position:absolute;left:0;top:50%;height:1px;width:100%;background:var(--cobalt);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease)}
.journey.go:before{transform:none}
.journey li{position:relative;padding:22px 18px 22px 0;border-right:1px solid var(--rule);display:grid;gap:8px;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(.25s + var(--i)*.22s);background:var(--paper)}
.journey li:last-child{border-right:0}
.journey li+li{padding-left:18px}
.journey.go li{opacity:1;transform:none}
.journey li b{color:var(--cobalt);font-weight:500}
.journey li span{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;line-height:1.2}
.jic{width:40px;height:40px;border:1px solid var(--ink);display:grid;place-items:center;background:var(--bone)}
.jico{width:30px;height:30px}
.jico path{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.2s var(--ease);transition-delay:calc(.5s + var(--i)*.22s)}
.jico path.thin{stroke-width:1}
.journey.go .jico path{stroke-dashoffset:0}
.map{position:relative}
.map:after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 0 rgba(35,56,230,.5);animation:ping 2.4s infinite;pointer-events:none}

/* ---------- Reviews: background tooth field ---------- */
#reviews{position:relative}
.an-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.an-bg .an-field{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.9}
.an-field .ft{fill:none;stroke:#C4BDAF;stroke-width:1.3;vector-effect:non-scaling-stroke;animation:drift 12s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-1.3s)}
@keyframes drift{to{transform:translateY(-18px)}}
#reviews>*{position:relative;z-index:1}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .an-hero .ln,.an-hero .call .lead{stroke-dashoffset:0;animation:none}
  .an-hero .call,.an-hero .bonefill{opacity:1;animation:none}
  .jico path{stroke-dashoffset:0}
  .journey li{opacity:1;transform:none}
  .journey:before{transform:none}
  .scroll-prog{display:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{width:min(78%,380px);margin:8px auto -8px}
  .an-block{grid-template-columns:1fr;gap:12px}
  .an-decay-grid{grid-template-columns:1fr}
  .an-decay-wrap{max-width:420px;margin-inline:auto}
  .svc-wrap{grid-template-columns:1fr}
  .svc-stage{display:none}
  .svc{grid-template-columns:44px 1fr 48px}
  .svc-mini{display:block;grid-column:3;grid-row:1/3;width:44px;height:44px;align-self:center;justify-self:end}
  .svc-mini .an-proc{width:44px;height:44px}
  .svc .plus{display:none}
  .journey{grid-template-columns:1fr;border:0;gap:0}
  .journey:before{left:19px;top:0;width:1px;height:100%;transform:scaleY(0);transform-origin:top}
  .journey.go:before{transform:none}
  .journey li{border:0;border-bottom:1px solid var(--rule);grid-template-columns:40px auto 1fr;align-items:center;padding:14px 0;background:transparent}
  .journey li+li{padding-left:0}
  .journey li span{font-size:1rem}
}
.an-p{color:var(--graphite);margin:0 0 22px;max-width:52ch;font-size:.95rem}
.journey-wrap{margin-bottom:clamp(36px,5vw,64px)}
.an-jt{display:block;color:var(--cobalt);margin-bottom:14px}
.journey-wrap .journey{margin-bottom:0}

/* ---------- FAQ (SEO long-tail block inside #visit) ---------- */
.faq-wrap{display:grid;grid-template-columns:140px 1fr;gap:24px;margin-top:clamp(48px,7vw,88px);padding-top:28px;border-top:1px solid var(--rule)}
.faq-wrap>.mono{color:var(--cobalt)}
.faq-h{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 18px;max-width:30ch}
html[lang="ko"] .faq-h{line-height:1.3}
.faq-list{border-top:1px solid var(--rule)}
.faq{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;align-items:center;gap:16px;padding:16px 0;font-weight:600;font-size:1.02rem;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.2rem;color:var(--cobalt);justify-self:end;transition:transform .3s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--cobalt)}
.faq p{margin:0 0 18px;max-width:62ch;color:var(--graphite);font-size:.98rem}
@media (max-width:1024px){.faq-wrap{grid-template-columns:1fr;gap:10px}}