/* Orsmere Dental Studio (concept), direction v3 (ref Oracare): Hanken Grotesk 800 caps / Bodoni Moda italic.
   Ground #ece6ea with white and blush #fbf3f0 rounded surfaces · deep aubergine #2f1a39 · rose #e2416b (CTA circle, form button, active step and figures only; #c8284f where a fill carries small white text, for AA). No second accent. */
:root{
  --aub:#2f1a39;--aub-2:#3d2649;--blush:#fbf3f0;--ground:#ece6ea;--white:#fff;--ink:#1c1520;--ink-2:#4c4252;--mute:#5f5466;
  --rose:#e2416b;--rose-d:#c8284f;--pink:#f5c7d3;--on-aub:#f1e8f3;--rule:#eadde3;
  --f-sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--f-serif:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --maxw:1440px;--edge:clamp(12px,2.8vw,40px);--col:calc(var(--maxw) - 2 * var(--edge));--r:28px;--rs:18px;--ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--rose-d);outline-offset:3px;border-radius:4px}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
i{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em}
.skip{position:absolute;left:-999px;top:0;background:var(--aub);color:#fff;padding:12px 16px;z-index:80}
.skip:focus{left:8px;top:8px}
.small{font-size:15px}
.cite{font:600 12px/1.45 var(--f-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:10px}
.link{display:inline-flex;align-items:center;min-height:44px;font:700 15px/1.2 var(--f-sans);color:var(--aub);text-decoration:underline;text-decoration-color:var(--aub);text-decoration-thickness:2px;text-underline-offset:6px}
/* One column for every block: centred at --col wide, never closer than --edge to the viewport edge */
.stage,.sent,.scan,.visit,.sec,.consult,.foot{--gut:max(var(--edge),calc((100% - var(--col)) / 2));margin-left:var(--gut);margin-right:var(--gut)}

/* ---------- Hero ---------- */
.stage{position:relative;z-index:5}
.hero{position:relative;height:830px;color:#fff}
.hero-bg{position:absolute;inset:0;background:radial-gradient(60% 80% at 62% 40%,#3d2349 0,var(--aub) 70%);border-radius:0 0 var(--r) var(--r)}
.top{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 56px;}
.logo{font:800 22px/1 var(--f-sans);letter-spacing:.05em;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;color:inherit}
.logo i{font-size:25px;letter-spacing:0;margin-left:6px;color:var(--pink)}
.menu ul{display:flex;gap:6px}
.menu a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font:500 15px/1 var(--f-sans);color:var(--on-aub);text-decoration:none;border-radius:999px}
.menu a:hover,.menu a[aria-current]{background:rgba(255,255,255,.1);color:#fff}
.mnav{display:none}
.tel{text-align:right;text-decoration:none;font:700 21px/1.1 var(--f-sans);color:#fff;min-height:44px;display:block}
.tel small{display:block;font:700 11px/1.3 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin-bottom:2px}
.hero :focus-visible,.consult :focus-visible,.foot :focus-visible{outline-color:#fff}
.hero h1{position:absolute;left:56px;top:128px;z-index:3;font:800 80px/.98 var(--f-sans);letter-spacing:-.02em;text-transform:uppercase;margin:0}
.hero h1 i{font-size:88px;color:#f8d6df;line-height:1}
.hero h1 .hl{display:inline-block;margin-top:4px}
.pill{display:inline-block;vertical-align:middle;width:150px;height:76px;border-radius:40px;background:#555 center 40%/cover no-repeat;margin:0 4px 12px 8px;border:2px solid rgba(255,255,255,.28)}
.hero .lede{position:absolute;left:56px;top:482px;width:380px;z-index:3;color:#eadff0;font-size:18px;line-height:1.55}
.cta{position:absolute;left:56px;bottom:-72px;z-index:7;width:172px;height:172px;border-radius:50%;background:var(--rose);color:#fff;text-decoration:none;display:flex;align-items:flex-end;padding:0 0 38px 30px;font:800 20px/1.05 var(--f-sans);letter-spacing:.04em;text-transform:uppercase;box-shadow:0 22px 50px rgba(226,65,107,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.cta::before{content:"";position:absolute;right:-12px;top:-16px;width:74px;height:74px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8284f' stroke-width='2.2'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/26px no-repeat;transition:transform .35s var(--ease)}
.cta:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(226,65,107,.5)}.cta:hover::before{transform:rotate(45deg)}
.cta:focus-visible{outline-color:#fff;outline-offset:5px;border-radius:50%}
.shot{position:absolute;right:16px;top:104px;bottom:16px;width:760px;z-index:2;border-radius:22px;overflow:hidden;background:var(--aub-2)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.seal{display:none;position:absolute;right:56px;top:440px;width:150px;text-align:center;z-index:3}
.seal span{color:var(--rose);display:grid;place-items:center;width:128px;height:128px;margin:0 auto 12px;border-radius:50%;border:1.5px dashed var(--pink);font:400 58px/1 var(--f-serif);font-style:italic}
.seal p{font:700 11px/1.4 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--on-aub)}

/* The stepper: a card over the clinician plus the strip across the hero's base */
.path{position:static}
.path-card{position:absolute;left:480px;bottom:112px;z-index:5;width:470px;background:#fff;color:var(--ink);border-radius:var(--rs);padding:22px 24px 22px 26px;display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:14px;box-shadow:0 24px 60px rgba(20,8,28,.35)}
.path-n{font:800 64px/.9 var(--f-sans);color:var(--rose);grid-row:1;min-width:40px}
.path-count{font:700 12px/1.3 var(--f-sans);letter-spacing:.08em;color:var(--mute)}
.path-t h2{font:800 19px/1.2 var(--f-sans);margin:4px 0 6px}
.path-t p:last-child{font-size:15px;line-height:1.5;color:var(--ink-2)}
.path-go{grid-column:1/-1;display:none;justify-content:flex-end;gap:10px;border-top:1px solid var(--rule);padding-top:12px}
html.js .path-go{display:flex}
.path-go button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--aub);background:#fff;color:var(--aub);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,opacity .25s}
.path-go button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.path-go button:hover{background:var(--aub);color:#fff}
.path-go button.at-end{opacity:.38}
.path-go button:focus-visible{outline-color:var(--rose-d)}
.path-card :focus-visible{outline-color:var(--rose-d)}
.path-strip{position:absolute;left:272px;right:16px;bottom:16px;z-index:4;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid rgba(255,255,255,.16);background:rgba(40,22,50,.88);border-radius:18px 0 22px 18px;overflow:hidden}
.path-strip li{padding:14px 16px 16px;border-left:1px solid rgba(255,255,255,.12);font:600 14px/1.3 var(--f-sans);color:#fff;transition:background .3s var(--ease)}
html.js .path-strip li{cursor:pointer}
.path-strip li:first-child{border-left:0}
.path-strip li:hover{background:rgba(255,255,255,.08)}
.path-strip li small{display:block;font:700 11px/1.2 var(--f-sans);letter-spacing:.16em;color:var(--pink);margin-bottom:4px}
.path-strip li.on{background:var(--rose-d)}.path-strip li.on small{color:#fff}

/* ---------- Rounded surfaces ---------- */
.sent,.scan,.visit,.sec,.consult{margin-top:24px;border-radius:var(--r)}
.sent{background:#fff;padding:120px 56px 56px;text-align:center}
.big{font:800 68px/1.1 var(--f-sans);letter-spacing:-.02em;text-transform:uppercase}
.big i{font-size:78px}
.chip{display:inline-flex;align-items:center;gap:12px;vertical-align:middle;border-radius:44px;padding:6px 22px 6px 6px;font:700 16px/1 var(--f-sans);text-transform:none;letter-spacing:0;margin:0 6px 12px}
.chip-ph{width:54px;height:54px;border-radius:50%;background:#777 center/cover no-repeat;flex:none}
.nw{white-space:nowrap}
.chip.a{background:var(--blush);color:var(--ink);box-shadow:inset 0 0 0 1.5px #d8c4d2}.chip.b{background:var(--aub);color:#fff}
.svc{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:60px;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:500 19px/1.3 var(--f-sans)}
.svc li{display:flex;align-items:center;gap:14px}
.thumb{width:46px;height:46px;border-radius:50%;background:#777 center/cover no-repeat;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--rule)}
.svc li:not(:last-child)::after{content:"";width:7px;height:7px;background:var(--aub);transform:rotate(45deg);margin-left:24px;flex:none}
.scan{display:grid;grid-template-columns:5fr 7fr;gap:48px;background:var(--blush);padding:90px 56px}
.scan h2,.visit h2,.consult h2,.sec h2{font:800 60px/1.02 var(--f-sans);letter-spacing:-.02em;text-transform:uppercase}
.scan h2 i,.visit h2 i,.consult h2 i{font-size:68px;color:var(--aub)}
.scan-copy p{margin-top:22px;color:var(--ink-2);font-size:17px;max-width:440px}
.scan-copy .cite{margin-top:14px}
.coll{position:relative;min-height:470px}
.coll img{width:100%;height:100%;object-fit:cover}
.c-p1{position:absolute;left:0;top:34px;width:300px;height:400px;border-radius:var(--rs);overflow:hidden}
.c-k{position:absolute;left:264px;top:0;width:250px;height:236px;border-radius:var(--rs);background:#fff;color:var(--ink);padding:26px;z-index:2;box-shadow:0 20px 44px rgba(47,26,57,.14)}
.c-k b{display:block;font:400 82px/1 var(--f-serif);font-style:italic;color:var(--rose)}
.c-k p{font-size:15px;line-height:1.45;margin-top:10px}
.c-t{position:absolute;left:340px;top:262px;width:310px;height:196px;border-radius:var(--rs);background:var(--aub);color:#fff;padding:26px;z-index:2}
.c-t h3{font:800 22px/1.15 var(--f-sans);text-transform:uppercase}.c-t h3 i{font-size:25px}
.c-t p{margin-top:14px;font-size:15px;line-height:1.45}
.c-p2{position:absolute;right:0;top:40px;width:180px;height:220px;border-radius:var(--rs);overflow:hidden}
.visit{background:#fff;padding:84px 56px}
.ruled li{padding:22px 0;border-top:1px solid var(--rule);font-size:17px;line-height:1.6;color:var(--ink-2)}
.ruled li:last-child{border-bottom:1px solid var(--rule)}
.ruled b{color:var(--ink);font-weight:700}
.visit-in{display:grid;grid-template-columns:6fr 6fr;gap:56px;align-items:start}
.visit-ph{margin-top:44px;border-radius:var(--rs);overflow:hidden;max-width:520px}
.visit-ph img{width:100%;height:auto;aspect-ratio:13/10;object-fit:cover}
.visit-r{padding-top:8px}.visit-r .link{margin-top:14px}
.visit h2{font-size:84px}.visit h2 i{font-size:94px}

/* ---------- Consultation ---------- */
.consult{background:var(--aub);color:#fff;padding:84px 56px;margin-bottom:0}
.consult-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.consult h2 i{color:var(--pink)}
.consult-copy p{margin-top:22px;color:var(--on-aub);max-width:480px}
.consult .small a{color:#fff}
.form{background:#fff;color:var(--ink);border-radius:var(--rs);padding:30px;display:grid;gap:16px}
.form label{display:grid;gap:6px;font:700 14px/1.3 var(--f-sans)}
.form input,.form select{font:400 16px/1.3 var(--f-sans);min-height:48px;padding:0 14px;border:1.5px solid #cdbfd0;border-radius:12px;background:#fff;color:var(--ink)}
.form :focus-visible{outline:3px solid var(--rose-d);outline-offset:1px}
.btn{min-height:52px;border:0;border-radius:999px;background:var(--rose-d);color:#fff;font:800 16px/1 var(--f-sans);letter-spacing:.04em;padding:0 28px;cursor:pointer;transition:transform .3s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px);background:#b01f44}
.form-note{font-size:13px;color:var(--mute)}

/* ---------- Footer ---------- */
.foot{margin-top:40px;padding:44px 0 56px}
.foot-in{display:grid;grid-template-columns:1.2fr 1fr;gap:28px 48px}
.foot .logo{font-size:20px;color:var(--ink)}.foot .logo i{color:var(--rose-d)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 22px;align-content:flex-start}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.legal{grid-column:1/-1;font-size:14px;color:var(--mute);max-width:70ch}

/* ---------- Inner pages ---------- */
.stage-in{margin-bottom:96px}
.hero-in{height:560px}
.in-copy{position:absolute;left:56px;top:140px;width:640px;z-index:3}
.hero-in h1{position:static;font-size:68px;line-height:1}
.hero-in h1 i{font-size:76px}
.in-copy .lede{position:static;width:auto;margin-top:22px;font-size:18px;color:#eadff0}
.in-copy .link{color:#fff;text-decoration-color:var(--pink);margin-top:10px}
.in-photo{position:absolute;right:56px;bottom:-84px;width:520px;z-index:4;border-radius:var(--rs);overflow:hidden;box-shadow:0 30px 70px rgba(20,8,28,.35);background:var(--aub-2)}
.in-photo img{width:100%;height:auto}
.sec{background:#fff;padding:72px 56px}
.sec:nth-of-type(even){background:var(--blush)}
.sec-in{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}
.sec-head{display:grid;gap:14px}
.sec-num{font:400 56px/1 var(--f-serif);font-style:italic;color:var(--rose)}
.sec h2{font-size:44px}
.prose>*+*{margin-top:18px}
.prose p{color:var(--ink-2)}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:6px 14px;padding:22px 0;border-top:1px solid var(--rule)}
.steps li:last-child{border-bottom:1px solid var(--rule)}
.steps .n{font:400 34px/1 var(--f-serif);font-style:italic;color:var(--rose)}
.steps b{font:800 19px/1.25 var(--f-sans);display:block}
.steps p{margin-top:6px;color:var(--ink-2)}
.faq{display:grid;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:6px 0}
.faq summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font:700 18px/1.3 var(--f-sans);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;padding-left:16px;font:500 26px/1 var(--f-sans);color:var(--aub)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:4px 40px 14px 0;color:var(--ink-2)}
.faq details .cite{padding:0 0 12px;margin-top:0}
.sec-in:has(.faq){grid-template-columns:5fr 7fr}

/* Reveal: gated on html.js so content shows with JS off */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .rv.in{opacity:1;transform:none}

/* ---------- Tablet / phone ---------- */
@media (max-width:1180px){
  .menu{display:none}
  .mnav{display:block;position:relative}
  .tel{margin-left:auto}
  .mnav summary{list-style:none;cursor:pointer;min-height:44px;min-width:76px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.5);border-radius:999px;font:700 15px/1 var(--f-sans);color:#fff}
  .mnav summary::-webkit-details-marker{display:none}
  .mnav[open] summary{background:#fff;color:var(--aub)}
  .mnav ul{position:absolute;right:0;top:52px;z-index:30;min-width:220px;background:#fff;border-radius:var(--rs);padding:8px;box-shadow:0 20px 50px rgba(20,8,28,.4)}
  .mnav a{display:flex;align-items:center;min-height:46px;padding:0 14px;color:var(--ink);font:600 16px/1 var(--f-sans);text-decoration:none;border-radius:10px}
  .mnav a:hover{background:var(--blush)}
  .mnav :focus-visible{outline-color:var(--rose-d)}
  .mnav summary:focus-visible{outline-color:#fff;outline-offset:3px}
  .shot{width:540px}
  .hero h1{font-size:64px}.hero h1 i{font-size:78px}
  .path-card{width:400px;left:auto;right:40px}
  .hero .lede{width:320px}
  .c-p1{width:54%}.c-k{left:46%;width:46%}.c-t{left:auto;right:0;width:60%}.c-p2{display:none}
  .seal{display:none}
  .path-strip{left:250px}
  .path-strip li{font-size:13px;padding:12px 12px 14px}
}
@media (max-width:900px){
  :root{--edge:12px}
  .hero,.hero-in{height:auto;display:flex;flex-direction:column;padding-bottom:0}
  .hero-bg{border-radius:0 0 var(--r) var(--r)}
  .top{padding:14px 18px;flex-wrap:nowrap;gap:10px;order:1}
  .top .logo i{display:none}
  .tel{margin-left:auto;font-size:18px;display:inline-flex;align-items:center}.tel small{display:none}
  .menu{display:none}
  .mnav{display:block;order:2;position:relative}
  .hero h1,.hero-in h1{position:relative;left:auto;top:auto;order:3;margin:22px 18px 0;font-size:46px;line-height:1}
  .hero h1 i,.hero-in h1 i{font-size:52px}
  .pill{width:90px;height:50px;margin:0 2px 8px 4px}
  .hero .lede{position:relative;left:auto;top:auto;width:auto;order:4;margin:18px 18px 0;font-size:17px}
  .cta{position:relative;left:auto;bottom:auto;order:5;margin:26px 18px 0;width:150px;height:150px;font-size:18px;padding:0 0 30px 24px}
  .cta-side{position:absolute;left:190px;bottom:auto;top:auto;display:none}
  .shot{position:relative;right:auto;top:auto;bottom:auto;order:2;width:auto;height:280px;margin:12px 12px 0}
  .shot::after{background:linear-gradient(180deg,rgba(47,26,57,0) 60%,rgba(47,26,57,.4))}
  .path-card{position:relative;left:auto;right:auto;bottom:auto;order:6;width:auto;margin:30px 14px 0;padding:20px 18px;grid-template-columns:auto 1fr}
  .path-n{font-size:60px}
  .path-strip{position:relative;left:auto;right:auto;order:7;display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border-radius:0 0 var(--r) var(--r);background:rgba(20,8,28,.35)}
  .path-strip li{border-left:0;border-top:1px solid rgba(255,255,255,.12);font-size:14px}
  .path-strip li:nth-child(even){border-left:1px solid rgba(255,255,255,.12)}
  .path{display:contents}
  .seal{display:none}
  .in-copy{position:relative;left:auto;top:auto;width:auto;order:2;margin:26px 18px 0}
  .in-copy h1{margin:0}
  .in-photo{position:relative;right:auto;bottom:auto;order:3;width:auto;margin:26px 14px -50px}
  .stage-in{margin-bottom:64px}
  .sent,.scan,.visit,.sec,.consult{margin-top:14px}
  .sent{padding:76px 20px 32px}
  .big{font-size:34px}.big i{font-size:39px}
  .chip{font-size:14px;padding:5px 16px 5px 5px;gap:8px}.chip-ph{width:36px;height:36px}
  .svc{flex-direction:column;align-items:flex-start;gap:12px;margin-top:36px;font-size:17px}
  .svc li:not(:last-child)::after{display:none}
  .scan{grid-template-columns:1fr;padding:48px 20px;gap:36px}
  .scan h2,.visit h2,.consult h2{font-size:40px}.scan h2 i,.visit h2 i,.consult h2 i{font-size:45px}
  .coll{min-height:560px}
  .c-p1{width:56%;height:320px}.c-k{left:44%;width:52%;height:200px;padding:20px}.c-k b{font-size:64px}
  .c-t{left:14%;top:300px;width:80%;height:auto;min-height:150px}
  .c-p2{display:none}
  .coll{min-height:480px}
  .visit{padding:48px 20px}.visit-in{grid-template-columns:1fr;gap:20px}.visit h2{font-size:40px}.visit h2 i{font-size:45px}.visit-ph{margin-top:20px}
  .consult{padding:48px 20px}.consult-in{grid-template-columns:1fr;gap:28px}
  .form{padding:22px 18px}
  .sec{padding:44px 20px}.sec-in,.sec-in:has(.faq){grid-template-columns:1fr;gap:22px}.sec h2{font-size:34px}
  .steps li{grid-template-columns:44px 1fr}
  .foot{margin-top:24px;padding:28px 6px 36px}.foot-in{grid-template-columns:1fr}
}
@media (max-width:420px){
  .hero h1,.hero-in h1{font-size:42px}.hero h1 i,.hero-in h1 i{font-size:47px}
  .big{font-size:30px}.big i{font-size:35px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html.js .rv{opacity:1;transform:none}
}
