/* Dental fleet layer v1 (2026-11-05) -- full-arch implant funnels (cPanel fullarch). House "Instrument" warm variant:
   white ground, ink #10201f, honey accent (--nx #b9791c decorative, --nx-ink #7f520f for text + buttons, AA on white),
   Instrument Serif display >= 2.25rem, Geist body, Geist Mono labels, soft 4px radius (dental exception), no shadows.
   One bold thing: the photo-led hero with the quiz panel docked over it; everything else stays quiet. */
:root{--dk-ink:#10201f;--dk-ink2:#3c4a49;--dk-line:#dfe5e6;--dk-soft:#f3f6f7;--dk-r:4px}
body[data-fleet="dental"]{color:var(--dk-ink);-webkit-font-smoothing:antialiased}
body[data-fleet="dental"] :focus-visible{outline:2px solid var(--nx-ink);outline-offset:3px}
body[data-fleet="dental"] .kicker{color:var(--nx-ink)}
body[data-fleet="dental"] .cta-link{color:var(--nx-ink)}
body[data-fleet="dental"] .top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body[data-fleet="dental"] .brand{display:inline-flex;align-items:center;gap:10px}
.dk-mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--nx-soft);color:var(--nx-ink);flex:none}
.dk-mark .nxm{width:20px;height:20px}

/* hero: photo on the right two-thirds, white wash under the copy, quiz panel docked over the photo */
.hero--photo{position:relative;overflow:hidden;padding:72px 0 80px;border-bottom:0}
.hero__ph{position:absolute;top:0;right:0;bottom:0;left:34%;z-index:0}
.hero__ph img{width:100%;height:100%;object-fit:cover;object-position:18% 30%}
.hero__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.7) 14%,rgba(255,255,255,.12) 34%,rgba(255,255,255,0) 46%,rgba(255,255,255,.35) 100%)}
.hero--photo .wrap{position:relative;z-index:1}
.hero--photo .grid{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(40px,14vw,220px);align-items:center}
.hero--photo .grid>div:first-child{padding:28px 0}
.hero--photo h1{font-size:clamp(2.4rem,4.6vw,3.9rem);letter-spacing:-.01em;max-width:14ch}
.hero--photo .lede{color:var(--dk-ink2);max-width:46ch}
.hero--photo .panel{background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border:1px solid var(--dk-line);border-top:3px solid var(--nx);border-radius:var(--dk-r);background:#fff;padding:28px}
.hero--photo .ticks{border-top-color:var(--dk-line);max-width:420px;background:rgba(255,255,255,.75)}
.hero--photo .ticks li{display:flex;align-items:center;gap:10px;border-bottom-color:var(--dk-line)}
.hero--photo .ticks li::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;background:var(--nx-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%237f520f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
body[data-fleet="dental"] .nx-badge{margin:0 0 1.2rem;--nx-ring:#fff;background:#fff;border-color:var(--nx-line)}
body[data-fleet="dental"] .nx-badge__ic{background:var(--nx-ink);color:#fff}
body[data-fleet="dental"] .nx-badge__ic+.nx-badge__ic{box-shadow:0 0 0 2px #fff}
body[data-fleet="dental"] .nx-badge__t{font-family:"Geist",system-ui,sans-serif;color:var(--dk-ink)}
@media (max-width:860px){
  .hero--photo{padding:0 0 40px}
  .hero__ph{position:relative;left:auto;inset:auto;height:auto;aspect-ratio:16/10;margin-bottom:24px}
  .hero__ph::after{background:linear-gradient(180deg,rgba(255,255,255,0) 60%,#fff 100%)}
  .hero--photo .grid{grid-template-columns:1fr;gap:28px}
  .hero--photo h1{max-width:none}
}

/* quiz: warm selection state, accent progress, AA buttons */
body[data-fleet="dental"] .btn{background:var(--nx-ink);border-radius:var(--dk-r);transition:background .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1)}
body[data-fleet="dental"] .btn:hover{background:var(--dk-ink);transform:translateY(-1px)}
body[data-fleet="dental"] .opt{border-radius:var(--dk-r);transition:border-color .18s,background .18s}
body[data-fleet="dental"] .opt:has(input:checked){border-color:var(--nx-ink);background:var(--nx-soft)}
body[data-fleet="dental"] .opt input,body[data-fleet="dental"] .check input{accent-color:var(--nx-ink)}
body[data-fleet="dental"] .bar span{background:var(--nx)}
body[data-fleet="dental"] .quiz input:not([type=radio]):not([type=checkbox]){border-radius:var(--dk-r)}
body[data-fleet="dental"] .quiz input:focus{outline-color:var(--nx-ink)}

/* niche band */
.dk-band{padding:10px 0}
body[data-fleet="dental"] .band{border-bottom:0}

/* how it works: centered steps with motif icons and a plan line (no numerals) */
.dk-how h2,.dk-faq h2,.dk-areas h2{text-align:center}
.dk-how .nx-steps{--nx-step-bg:#fff;padding:0;margin:8px 0 0}
.dk-how .nx-steps h3{font-size:18px;margin-bottom:8px}
.dk-how .nx-steps p{color:var(--dk-ink2);max-width:30ch;margin:0 auto}
body[data-fleet="dental"] .nx-ic{background:var(--nx-soft);color:var(--nx-ink);border-radius:50%;width:56px;height:56px}
body[data-fleet="dental"] .nx-ic .nxm{width:26px;height:26px}

/* FAQ beside a consultation photo */
.dk-faq{background:var(--dk-soft)}
.dk-faq__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.dk-faq__ph{position:sticky;top:96px}
.dk-faq__ph img{width:100%;height:auto;border-radius:var(--dk-r)}
.dk-faq h2{text-align:left}
.dk-faq details{border-top-color:var(--dk-line)}
.dk-faq details:last-child{border-bottom-color:var(--dk-line)}
.dk-faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;font-weight:600}
.dk-faq summary::-webkit-details-marker{display:none}
.dk-faq summary::after{content:"+";font:400 24px/1 "Geist Mono",monospace;color:var(--nx-ink);transition:transform .18s cubic-bezier(.16,1,.3,1)}
.dk-faq details[open] summary::after{transform:rotate(45deg)}
@media (max-width:860px){.dk-faq__grid{grid-template-columns:1fr;gap:28px}.dk-faq__ph{position:static}}

/* areas list (cities served) -> centered chips */
body[data-fleet="dental"] .areas ul,body[data-fleet="dental"] .area-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;padding:0}

/* sticky mobile CTA (light fleet) */
body[data-fleet="dental"] .nx-mcta{--nx-mcta-bg:rgba(255,255,255,.95);border-top-color:var(--dk-line)}
body[data-fleet="dental"] .nx-mcta a{background:var(--nx-ink);color:#fff;border-radius:var(--dk-r)}
body[data-fleet="dental"] .foot{background:var(--dk-soft);border-top:1px solid var(--dk-line)}
@media (min-width:861px){body[data-fleet="dental"] .nx-mcta{display:none}}

/* EN/ES toggle stays visible at phone width (site.css hides non-CTA nav links under 860px) */
body[data-fleet="dental"] .top nav .langsw a{display:inline-flex!important;margin-left:0}
body[data-fleet="dental"] .top nav .langsw{margin-right:6px}
@media (max-width:420px){body[data-fleet="dental"] .brand{font-size:18px}body[data-fleet="dental"] .dk-mark{display:none}}
/* copy column readable over the photo edge (Spanish runs ~25% longer) */
.hero--photo h1,.hero--photo .lede{text-wrap:pretty}
@media (min-width:861px){.hero--photo .grid>div:first-child{background:linear-gradient(90deg,rgba(255,255,255,.92) 70%,rgba(255,255,255,0));padding-right:24px}}
