@import url("./preventive-dentistry.css");

:where(.perio-signs,.perio-stages,.perio-treatment,.perio-wellness,.perio-maintenance,.perio-faq) *{box-sizing:border-box}:where(.perio-signs,.perio-stages,.perio-treatment,.perio-wellness,.perio-maintenance,.perio-faq) :where(p,figure){margin:0}:where(.perio-signs,.perio-stages,.perio-treatment,.perio-wellness,.perio-maintenance,.perio-faq) .heading{margin:18px 0 0;color:var(--navy);font-family:var(--display);font-size:clamp(2.25rem,4.6vw,4.35rem);font-weight:400;letter-spacing:-.04em;line-height:1.05;text-wrap:balance}:where(.perio-signs,.perio-stages,.perio-treatment,.perio-wellness,.perio-maintenance,.perio-faq) .heading em{display:block;margin-top:12px;color:var(--gold-text);font-family:var(--script);font-size:clamp(2.8rem,5vw,4.375rem);font-weight:400;letter-spacing:0;line-height:1}.perio-header{max-width:980px;margin-bottom:clamp(44px,6vw,82px)}.perio-header>p,.perio-treatment__header>p,.perio-signs__content>p,.perio-wellness__content>p{color:#515a70;font-size:clamp(1.02rem,.98rem + .18vw,1.16rem);line-height:1.8}
.perio-signs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.7fr);align-items:center;gap:clamp(48px,9vw,150px);background:var(--navy-deep)}.perio-signs .heading,.perio-signs__panel .heading{color:var(--white)}.perio-signs .preventive-eyebrow,.perio-signs .heading em{color:var(--gold-light)}.perio-signs__content>p{max-width:680px;margin-top:30px;color:rgba(255,255,255,.8)}.perio-signs__panel,.perio-wellness__note{padding:clamp(30px,4.5vw,62px);border:1px solid rgba(239,192,112,.45);background:rgba(255,255,255,.045)}.perio-signs__panel .heading,.perio-wellness__note .heading{margin:0 0 28px;font-size:clamp(1.45rem,2vw,2rem)}.perio-signs__panel ul,.perio-wellness__note ul{display:grid;gap:16px;margin:0;padding:0;list-style:none}.perio-signs__panel li,.perio-wellness__note li{position:relative;padding-left:30px;color:rgba(255,255,255,.86);line-height:1.65}.perio-signs__panel li::before,.perio-wellness__note li::before{position:absolute;top:.57em;left:0;width:11px;height:11px;border:1px solid var(--gold-light);border-radius:50%;box-shadow:inset 0 0 0 3px var(--navy-deep);background:var(--gold-light);content:""}
.perio-stages{background:#eef4f5}.perio-stages__grid,.perio-maintenance__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.perio-stages__grid article,.perio-maintenance__grid article{padding:clamp(30px,3.2vw,50px);border-top:4px solid var(--gold-light);background:var(--white);box-shadow:0 18px 44px rgba(19,36,63,.07)}.perio-stages__grid article>span,.perio-maintenance__grid article>span{display:block;margin-bottom:32px;color:var(--gold-text);font-family:var(--display);letter-spacing:.16em}.perio-stages__grid .heading,.perio-maintenance__grid .heading{margin:0 0 15px;font-size:clamp(1.45rem,1.8vw,2rem);line-height:1.25}.perio-stages__grid p,.perio-maintenance__grid p{color:#515a70;line-height:1.72}
.perio-treatment{background:var(--white)}.perio-treatment__header{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.55fr);align-items:end;gap:clamp(40px,8vw,140px)}.perio-treatment__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.5vw,52px)}.perio-treatment-card{overflow:hidden;border:1px solid rgba(32,41,85,.12);background:#fbfaf7;box-shadow:0 16px 42px rgba(18,31,58,.06);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}.perio-treatment-card:hover{border-color:rgba(203,156,77,.62);box-shadow:0 22px 48px rgba(18,31,58,.1);transform:translateY(-3px)}.perio-treatment-card figure{aspect-ratio:5/3;overflow:hidden;background:#e7ecee}.perio-treatment-card figure img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.25,1)}.perio-treatment-card:hover figure img{transform:scale(1.025)}.perio-treatment-card>div{padding:clamp(28px,3.4vw,50px)}.perio-treatment-card .heading{margin:14px 0 18px;font-size:clamp(1.65rem,2.3vw,2.45rem);line-height:1.15}.perio-treatment-card>div>p:not(.preventive-service-card__kicker){color:#515a70;line-height:1.75}.perio-treatment-card a{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--navy);font-size:.8rem;font-weight:600;letter-spacing:.11em;line-height:1.45;text-decoration:none;text-transform:uppercase}.perio-treatment-card a:hover,.perio-treatment-card a:focus-visible{border-color:rgba(131,91,24,.5);color:var(--gold-text)}
.perio-wellness{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.7fr);align-items:center;gap:clamp(48px,9vw,150px);padding:clamp(88px,9vw,150px) clamp(24px,7vw,132px);background:var(--navy-deep)}.perio-wellness .heading{color:var(--white)}.perio-wellness .preventive-eyebrow,.perio-wellness .heading em{color:var(--gold-light)}.perio-wellness__content>p{max-width:680px;margin-top:30px;color:rgba(255,255,255,.8)}.perio-wellness__note .heading{color:var(--white)}.perio-maintenance{background:#eef4f5}.perio-maintenance__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.perio-faq{background:var(--ivory)}.perio-faq__list{display:grid;max-width:1060px;margin:auto;border-top:1px solid rgba(32,41,85,.2)}.perio-faq details{padding:0 4px;border-bottom:1px solid rgba(32,41,85,.2)}.perio-faq summary{padding:24px 48px 24px 0;color:var(--navy);font-family:var(--display);font-size:clamp(1.25rem,2vw,1.7rem);cursor:pointer}.perio-faq details p{padding:0 0 26px;color:#515a70;line-height:1.75}.perio-treatment-card a:focus-visible,.perio-faq summary:focus-visible{outline:3px solid var(--azure);outline-offset:4px}
@media(max-width:1100px){.perio-treatment__header{grid-template-columns:1fr;align-items:start;gap:28px}}@media(max-width:900px){.perio-signs,.perio-wellness{grid-template-columns:1fr;gap:48px}.perio-stages__grid,.perio-treatment__grid{grid-template-columns:1fr}}@media(max-width:680px){.perio-signs,.perio-wellness{padding:76px 22px}:where(.perio-signs,.perio-stages,.perio-treatment,.perio-wellness,.perio-maintenance,.perio-faq) .heading{font-size:clamp(2.55rem,12vw,4rem)}:where(.perio-signs,.perio-stages,.perio-treatment,.perio-wellness,.perio-maintenance,.perio-faq) .heading em{font-size:clamp(2.65rem,13vw,4rem)}.perio-maintenance__grid{grid-template-columns:1fr}.perio-treatment-card figure{aspect-ratio:4/3}.perio-treatment-card>div{padding:28px 24px 34px}}
@media(prefers-reduced-motion:reduce){.perio-treatment-card,.perio-treatment-card img{transition:none}}