.prototype-banner { text-align: center; background: var(--color-tint); padding: .45rem var(--space-2); font-size: .7rem; color: var(--color-muted); }
.prototype-banner span { margin-inline: .5rem; }
.header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-block: 1.5rem; }
.navigation { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.nav-list { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.nav-list a { display: block; padding-block: .65rem; font-size: .875rem; text-decoration: none; }
.nav-list a:hover, .nav-list a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
.menu-toggle { background: transparent; border: 1px solid var(--color-line); border-radius: var(--radius-pill); min-height: 44px; padding: .5rem .9rem; color: var(--color-ink); }
.menu-toggle span { margin-left: .5rem; }
.hero-panel { display: grid; border-radius: var(--radius-large); background: linear-gradient(115deg, var(--color-blue), #366789); color: var(--color-white); overflow: hidden; }
.hero-copy { padding: clamp(1.5rem, 4.5vw, 4.5rem); align-self: center; }
.hero h1 span { color: #d2e6f1; }
.hero-description { max-width: 32rem; margin-block: var(--space-3) var(--space-4); color: var(--color-on-blue); font-size: 1.05rem; }
.hero-note { color: var(--color-on-blue); font-size: .75rem; margin-top: var(--space-4); }
.hero-visual { display: flex; flex-direction: column; justify-content: center; padding: var(--space-4); background: radial-gradient(ellipse at 55% 40%, #86aabd 0%, #517d99 50%, transparent 85%); }
.visual-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .6rem; letter-spacing: .15em; }
.tooth-art { width: 100%; max-height: 31rem; margin-inline: auto; }
.hero-visual figcaption { font-size: .7rem; display: flex; align-items: center; gap: .5rem; color: var(--color-white); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; }
.hero-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem .5rem; border-bottom: 1px solid var(--color-line); font-size: .8rem; color: var(--color-muted); }
.section-tint { background: var(--color-tint); }
.service-featured { background: linear-gradient(140deg, var(--color-blue), #547e98); color: var(--color-white); }
.service-soft { background: #dbe7e9; }
.service-motif { font-size: 7rem; line-height: 1; font-weight: 300; color: var(--color-accent); }
.line-motif { height: 5rem; width: 70%; border: 2px solid #789aac; border-radius: 50%; transform: rotate(-20deg); margin: 1rem auto; box-shadow: 0 12px 0 #d9e6ec, 0 -12px 0 #edf3f5; }
.circle-motif { width: 6rem; height: 6rem; border: 1px solid #829eac; border-radius: 50%; margin: 1rem auto; box-shadow: 22px 0 0 -1px #dbe7e9, 23px 0 0 #829eac; }
.reasons article { border-top: 1px solid var(--color-line); padding-top: var(--space-3); }
.index-number { color: var(--color-muted); font-size: .8rem; }
.reasons h3 { margin-block: var(--space-4) var(--space-2); }
.reasons p { color: var(--color-muted); }
.portrait-placeholder { min-height: 24rem; border-radius: var(--radius-large); background: linear-gradient(145deg,#ccdfe5,#e2e9e4); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: var(--space-4); gap: var(--space-4); overflow: hidden; }
.portrait-shape { width: 12rem; height: 15rem; border: 1px solid #89a5b5; border-radius: 7rem 7rem 1rem 1rem; position: relative; }
.portrait-shape::before { content: ''; position: absolute; width: 5rem; height: 5rem; border: 1px solid #89a5b5; border-radius: 50%; top: 2.5rem; left: calc(50% - 2.5rem); }
.portrait-placeholder .tag { align-self: center; }
.profile-placeholder { display: flex; flex-direction: column; padding-block: var(--space-3); border-block: 1px solid var(--color-line); width: 100%; }
.price-list > .note { margin-top: var(--space-2); }
.appointment-panel { padding: clamp(2rem,6vw,5rem); border-radius: var(--radius-large); text-align: center; color: var(--color-white); background: radial-gradient(ellipse at 100% 0%,#5284a2,var(--color-blue) 65%); }
.appointment-panel > p:not(.eyebrow) { margin-block: var(--space-3); color: var(--color-on-blue); }
.appointment-panel .button { margin-top: var(--space-2); }
.appointment-notice { font-size: .8rem; }
.contact-list { width: 100%; }
.contact-list > div { padding-block: .9rem; border-bottom: 1px solid var(--color-line); display: grid; grid-template-columns: 4rem minmax(0,1fr); gap: 1rem; }
.contact-list dt { font-weight: 600; font-size: .85rem; }
.contact-list dd { color: var(--color-muted); }
.map-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-4); min-height: 23rem; border: 1px solid var(--color-line); border-radius: var(--radius-large); background: repeating-linear-gradient(0deg,transparent 0 49px,#dce5e8 49px 50px),repeating-linear-gradient(90deg,var(--color-tint) 0 49px,#dce5e8 49px 50px); }
.map-placeholder .tag { align-self: center; background: var(--color-paper); }
.map-placeholder p { color: var(--color-muted); }
.map-pin { font-size: 3rem; line-height: 1; }
.site-footer { background: var(--color-tint); padding-block: var(--space-5) var(--space-3); }
.footer-top, .footer-bottom { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-top { padding-bottom: var(--space-4); }
.footer-bottom { border-top: 1px solid var(--color-line); padding-top: var(--space-3); font-size: .75rem; color: var(--color-muted); }
/* Internal-page composition; underlying layout and type tokens are shared. */
.about-hero h1, .services-hero h1, .pricing-hero h1, .contact-hero h1 { font-size: var(--text-h2); max-width: 22ch; }
.about-appointment, .pricing-appointment { margin-bottom: var(--section-space); }
.pricing-surface { background: var(--color-white); border-radius: var(--radius-large); padding: clamp(1rem, 3vw, 3rem); }


/* Keep keyboard focus visible against blue gradient panels. */
.hero-panel, .appointment-panel { --color-focus: var(--color-accent); }

/* Anchor target only: retain focus indicators on all interactive controls. */
.appointment-request-section:focus { outline: none; }