/* Audience switch and two doors. Needs styles.css. Without JavaScript nothing is hidden or reordered. */
main > section[id], main > .aud-bar{scroll-margin-top:140px}
@media (max-width:560px){main > section[id], main > .aud-bar{scroll-margin-top:100px}}

/* the switch bar */
.aud-bar{background:#fff;border-bottom:1px solid var(--line);padding:16px 0}
.aud-bar[hidden]{display:none}
.aud-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px}
.aud-q{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--teal-d)}
.aud-seg{display:inline-flex;gap:4px;padding:4px;background:var(--soft);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.aud-opt{font:inherit;font-weight:600;font-size:.95rem;letter-spacing:.02em;color:var(--navy);background:transparent;border:0;cursor:pointer;
  padding:12px 24px;position:relative;transition:background .25s,color .25s;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.aud-opt:hover{background:#eaf1fc}
.aud-opt[aria-pressed="true"]{background:var(--navy);color:#fff}
.aud-opt[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#27b6c9,#7fc241,#f9c41b,#f58220,#e8433c,#a63c96,#4b3a8f)}
.aud-opt:focus-visible,.aud-reset:focus-visible,.door a:focus-visible{outline:3px solid var(--teal-d);outline-offset:3px}
.aud-status{margin:0;font-size:14px;color:var(--muted);flex-basis:100%;text-align:center}
.aud-reset{font:inherit;font-size:14px;color:var(--navy-2);background:none;border:0;padding:0 2px;text-decoration:underline;cursor:pointer}
@media (min-width:1100px){.aud-status{flex-basis:auto;text-align:left}}
@media (max-width:560px){.aud-seg{display:flex;width:100%}.aud-opt{flex:1;padding:12px 8px;font-size:.88rem}}

/* the two doors */
.aud-doors{background:var(--soft)}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,32px);margin-top:28px}
.door{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(28px,3vw,52px);min-height:clamp(380px,24vw,500px);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%);transition:box-shadow .3s}
.door > *{position:relative;z-index:1}
.door .door-shards{position:absolute;z-index:0;top:0;right:0;width:clamp(150px,42%,320px);height:auto;pointer-events:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.door:hover .door-shards{transform:translate(-8px,8px) scale(1.04)}
.door h3{font-weight:300;font-size:clamp(28px,2.6vw,40px);line-height:1.15;margin:0 0 14px}
.door p{margin:0 0 20px;max-width:34rem}
.door .eyebrow{margin-bottom:12px}
.door-links{list-style:none;margin:0 0 28px;padding:0;width:100%;max-width:34rem}
.door-links li{border-top:1px solid currentColor;border-top-color:rgba(127,150,180,.35)}
.door-links li:last-child{border-bottom:1px solid rgba(127,150,180,.35)}
.door-links a{display:flex;justify-content:space-between;gap:16px;padding:13px 2px;text-decoration:none;font-weight:600;transition:padding .25s}
.door-links a::after{content:"\2192";transition:transform .25s}
.door-links a:hover{padding-left:8px}
.door-links a:hover::after{transform:translateX(5px)}
.door .btn{margin-top:auto}
.door-patient{background:#fff;border:1px solid var(--line);color:var(--ink)}
.door-patient h3{color:var(--navy)}
.door-patient .door-shards{color:var(--teal)}
.door-patient .door-shards polygon{fill:currentColor}
.door-patient p{color:#2c3e50}
.door-patient .door-links a{color:var(--navy)}
.door-referrer{background:linear-gradient(135deg,#1d3f71,#2b5598);color:#fff}
.door-referrer .eyebrow{color:#7fd6e6}
.door-referrer .door-shards{color:#fff}
.door-referrer .door-shards polygon{fill:currentColor}
.door-referrer p{opacity:.92}
.door-referrer .door-links a{color:#fff}
.door-referrer .door-links li{border-color:rgba(255,255,255,.28)}
body[data-audience="patient"] .door-patient{box-shadow:inset 0 0 0 3px var(--teal)}
body[data-audience="referrer"] .door-referrer{box-shadow:inset 0 0 0 3px var(--teal)}
@media (max-width:980px){.doors{grid-template-columns:1fr}.door{min-height:0}.door .btn{margin-top:4px}}
@media (min-width:1900px){.door p,.door-links{max-width:42rem}}

/* patient: what to expect */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.steps li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 24px}
.steps .n{display:flex;align-items:flex-end;justify-content:flex-start;width:52px;height:52px;margin-bottom:14px;padding:0 0 6px 10px;
  background:var(--navy);color:#fff;font-weight:300;font-size:26px;line-height:1;
  clip-path:polygon(0 0,100% 0,0 100%)}
.steps .n{align-items:flex-start;padding:6px 0 0 10px}
.steps h3{margin:0 0 8px;color:var(--navy);font-size:19px}
.steps p{margin:0;color:#2c3e50;font-size:15.5px}
.steps-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.aud-expect{background:#fff}

/* referrer: quick panel */
.aud-ref{background:#fff}
.ref-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.ref-col{background:var(--soft);border:1px solid var(--line);border-top:3px solid var(--teal);padding:26px 24px;display:flex;flex-direction:column;align-items:flex-start}
.ref-col h3{margin:0 0 14px;color:var(--navy);font-size:20px;font-weight:400}
.ref-col ul{margin:0 0 16px;padding:0;list-style:none;width:100%}
.ref-col li{padding:8px 0 8px 22px;position:relative;border-bottom:1px solid var(--line);font-size:15.5px}
.ref-col li:last-child{border-bottom:0}
.ref-col li::before{content:"";position:absolute;left:0;top:1.05em;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--teal)}
.ref-col .note{margin:0;color:var(--muted);font-size:14.5px}
.ref-col .btn{margin-top:auto}
.ref-col a:not(.btn){color:var(--navy-2)}

/* ---------- switching (only active once JavaScript has set data-audience) ---------- */
body[data-audience] main{display:flex;flex-direction:column}
body[data-audience] main > *{order:20}
body[data-audience] .hero{order:0}
body[data-audience] .aud-bar{order:1}
body[data-audience] .aud-doors{order:2}
body[data-audience] #contact{order:30}

body[data-audience="patient"] .aud-ref{display:none}
body[data-audience="patient"] #expect{order:3}
body[data-audience="patient"] #procedures{order:4}
body[data-audience="patient"] #implants{order:5}
body[data-audience="patient"] #locations{order:6}
body[data-audience="patient"] #about{order:7}
body[data-audience="patient"] #faq{order:8;background:var(--soft)}
body[data-audience="patient"] #refer{order:9}

body[data-audience="referrer"] .aud-expect{display:none}
body[data-audience="referrer"] #refer{order:3}
body[data-audience="referrer"] #referrer-panel{order:4}
body[data-audience="referrer"] #locations{order:5}
body[data-audience="referrer"] #procedures{order:6;background:#fff}
body[data-audience="referrer"] #about{order:7;background:var(--soft)}
body[data-audience="referrer"] #implants{order:8}
body[data-audience="referrer"] #faq{order:9;padding:36px 0}
body[data-audience="referrer"] #faq .title{font-size:clamp(22px,2.4vw,28px)}
body[data-audience="referrer"] #faq summary{font-size:16px}
body[data-audience="referrer"] #faq details{padding:12px 0}
body[data-audience="referrer"] #faq details[open]{padding:12px 0}

@media (max-width:980px){.steps,.ref-cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .aud-opt,.door,.door .door-shards,.door-links a,.door-links a::after{transition:none}
  .door:hover .door-shards{transform:none}
}

/* the scroll-through-the-jaw story travels with the implants section */
body[data-audience="patient"] #inside-the-jaw{order:5}
body[data-audience="referrer"] #inside-the-jaw{order:8}
body[data-audience] .practice-band{order:2}
body[data-audience] #procedures{order:0}
body[data-audience] .practice-band{order:0}