padding-bottom: 2rem (32px) — here
it stacks below the subtitle on top of the hero's own bottom padding,
puffing dead space. Zero it so the card closes up tight. */
.v3-service-hero p { padding-bottom: 0; }
.v3-callout {
background: #f4f9fb; border-left: 4px solid #264068; border-radius: 0 6px 6px 0;
padding: 20px 24px; margin: 32px 0;
}
.v3-callout p { margin: 0; } /* type: BODY role */
/* ── Pillar sections on the Services landing ───────────────────────── */
.v3-pillar { margin: 0 0 72px; scroll-margin-top: 96px; }
.v3-pillar__head { max-width: 46em; margin: 0 0 28px; }
.v3-pillar__label {
font-family: var(--font-sans); font-weight: 700; font-size: 0.78rem;
letter-spacing: 0.12em; text-transform: uppercase; color: #5a7298; margin: 0 0 10px;
}
.v3-pillar__head h2 {
font-family: var(--font-display); font-weight: 300; color: #264068;
font-size: clamp(1.7rem, 3.2vw, 2.3rem); line-height: 1.15; margin: 0 0 12px;
}
/* Zero the base padding inside the pillar head: the v3-reset.css h2
{ padding-bottom: 1rem } (16px under each subtitle) and p { padding-bottom:
2rem } (32px under the intro). Margins below control the rhythm instead. */
.v3-pillar__head h2 { padding-bottom: 0; }
.v3-pillar__head p { padding-bottom: 0; }
.v3-pillar__intro { margin: 0; } /* type: BODY role */
/* Sub-groups inside a pillar. Used where one client category holds treatments that do
genuinely different jobs — Sleep & Airway carries both apnea appliances and
clenching guards, and a guard must never read as an apnea treatment. */
.v3-pillar__subhead {
font-family: var(--font-sans); font-weight: 700; font-size: 0.82rem;
letter-spacing: 0.06em; text-transform: uppercase;
color: #5c6f8f; margin: 32px 0 0;
}
.v3-pillar__subnote {
font-family: var(--font-sans); font-size: 0.92rem; line-height: 1.6;
color: #5c6f8f; margin: 8px 0 0; max-width: 62ch;
}
.v3-pillar__subhead + .v3-pillar-grid,
.v3-pillar__subnote + .v3-pillar-grid { margin-top: 16px; }
.v3-pillar-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch;
}
@media (max-width: 860px) { .v3-pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v3-pillar-grid { grid-template-columns: 1fr; } }
/* A two-card subgroup is still part of the three-column desktop system.
Six tracks let each card keep the exact width of a normal three-column
card while the empty third is split evenly across both outer edges. */
@media (min-width: 861px) {
.v3-pillar-grid--centered-pair { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.v3-pillar-grid--centered-pair > * { grid-column: span 2; }
.v3-pillar-grid--centered-pair > :first-child { grid-column: 2 / span 2; }
/* Some full grids lose one optional card when an experiment is parked. Keep
the standard three-card width, but center the remaining last pair only when
the grid has exactly 11 cards. With all 12 cards restored, normal rows win. */
.v3-pillar-grid--centered-last-pair { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.v3-pillar-grid--centered-last-pair > * { grid-column: span 2; }
.v3-pillar-grid--centered-last-pair > :first-child:nth-last-child(11) ~ :nth-last-child(2) {
grid-column: 2 / span 2;
}
.v3-pillar-grid--centered-last-pair > :first-child:nth-last-child(11) ~ :last-child {
grid-column: 4 / span 2;
}
}
/* Desktop breakout: the --w-read page column leaves big empty gutters on
wide monitors, so let the card grids spill out to the --w-wide frame
while the section heads stay narrow for a readable line length. Centered
on the page via margin-inline: calc(50% - W/2); capped to leave a 48px
viewport gutter so mid-size desktops don't slam edge-to-edge. */
@media (min-width: 1080px) {
.v3-pillar .v3-pillar-grid {
--pillar-grid-w: min(var(--w-wide), 100vw - 2 * var(--space-12));
width: var(--pillar-grid-w);
margin-inline: calc(50% - var(--pillar-grid-w) / 2);
}
}
/* Treatment card. Anchor wrapper when it has its own page; plain div otherwise. */
.v3-tcard {
background: #ffffff; border: 1px solid #d9e6ec; border-radius: var(--radius);
box-shadow: -6px 5px 0 rgba(150,168,190,0.24);
padding: 20px 22px; display: flex; flex-direction: column; gap: 6px;
text-decoration: none; color: inherit;
transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
a.v3-tcard:hover { /* rise comes from .v3-lift (v3-components.css); this is the shadow + border flavor */
box-shadow: -8px 8px 0 rgba(150,168,190,0.32); border-color: #bcd2e0;
}
a.v3-tcard:focus-visible { outline: 2px solid #264068; outline-offset: 3px; }
.v3-tcard__name { /* type: CARD-TITLE role */
margin: 0; padding: 0;
text-wrap: balance; /* even out 2-line titles — no lone dangling word */
}
.v3-tcard__desc { margin: 0; } /* type: BODY-SM role */
.v3-tcard__cta {
margin-top: auto; padding-top: 8px; font-family: var(--font-sans);
font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em; color: #264068;
}
/* "Learn more" arrow — mdi:arrow-right (iconify mdi set) as a
color-matched CSS mask, so no per-card markup. It DRAWS IN left→right
on hover (the box width reveals the fixed-size mask from the tail) and
RETRACTS right→left on release (the transition simply reverses). */
.v3-tcard__cta::after {
content: ''; display: inline-block; vertical-align: -0.06em;
width: 0; height: 0.78em; margin-left: 0; opacity: 0;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/%3E%3C/svg%3E") no-repeat left center / 1.05em 0.78em;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/%3E%3C/svg%3E") no-repeat left center / 1.05em 0.78em;
transition: width 0.3s cubic-bezier(0.45,0,0.25,1), margin-left 0.3s cubic-bezier(0.45,0,0.25,1), opacity 0.22s ease;
}
a.v3-tcard:hover .v3-tcard__cta::after { width: 1.05em; margin-left: 0.4em; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .v3-tcard__cta::after { transition: none; } }
.v3-tcard--plain .v3-tcard__cta { color: #8092a8; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.7rem; }
.v3-tcard__tag {
display: inline-block; align-self: flex-start; font-family: var(--font-sans);
font-weight: 700; font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase;
background: #e8f5f9; color: #3f6188; padding: 3px 8px; border-radius: var(--radius-sm); margin-bottom: 2px;
}
/* ── Patient testimonials: quote cards reusing .v3-tcard ───────────────
The whole card links to that person's Google review. Stars + quote on
top, author footer pinned to the bottom (margin-top:auto) so uneven
quote lengths still line their bylines up across the row. */
.v3-tcard--quote { gap: 14px; }
.v3-tcard__stars { color: var(--color-accent); font-size: 0.9rem; letter-spacing: 2px; line-height: 1; }
.v3-tcard__quote { margin: 0; color: var(--color-ink-body); font-size: 0.98rem; line-height: 1.6; }
.v3-tcard__author { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.v3-tcard__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* Initials avatar — when a reviewer has no Google profile photo. */
.v3-tcard__avatar--initial {
display: flex; align-items: center; justify-content: center;
background: #e8f1f6; color: #264068;
font-family: var(--font-sans); font-weight: 700; font-size: 18px;
}
/* Google rating summary — partial-fill stars, like Google's own panel.
UPDATE after a fresh review pull: change the score, the --pct
(= rating ÷ 5 × 100), and the count in the markup (search
"v3-review-summary" in about.html). Last pull 2026-06-19: 4.8 ★ · 465. */
.v3-review-summary {
display: inline-flex; align-items: center; gap: 12px;
margin: 0 auto 32px; padding: 10px 20px;
border: 1px solid #d9e6ec; border-radius: 999px;
background: #fff; text-decoration: none; color: #264068;
transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
a.v3-review-summary:hover { border-color: #bcd2e0; box-shadow: -4px 4px 0 rgba(150,168,190,0.24); }
a.v3-review-summary:focus-visible { outline: 2px solid #264068; outline-offset: 3px; }
.v3-review-summary__score { font-family: var(--font-sans); font-weight: 800; font-size: 1.4rem; line-height: 1; }
.v3-review-summary__stars { display: inline-block; position: relative; line-height: 1; font-size: 1.05rem; white-space: nowrap; }
.v3-review-summary__stars::before { content: "★★★★★"; color: #d9e6ec; }
.v3-review-summary__stars::after { content: "★★★★★"; color: var(--color-accent); position: absolute; left: 0; top: 0; width: var(--pct, 100%); overflow: hidden; }
.v3-review-summary__count { font-family: var(--font-sans); font-size: 0.9rem; color: var(--color-ink-muted); }
.v3-tcard__byline { display: flex; flex-direction: column; line-height: 1.3; }
.v3-tcard__byname { font-family: var(--font-sans); font-weight: 700; color: #264068; font-size: 0.92rem; }
.v3-tcard__bydate { font-family: var(--font-sans); color: var(--color-ink-muted); font-size: 0.8rem; }
/* ── Reviews masonry: column-flow "book" packing instead of the equal-height
pillar grid. Each card sizes to its own content, so a long review no longer
stretches the short ones and leaves a gap under the quote. Order is
column-major — fine, review order carries no meaning. break-inside keeps a
card whole across the column break. ── */
.v3-review-masonry { columns: 3; column-gap: 20px; }
.v3-review-masonry > .v3-tcard { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 20px; }
@media (max-width: 860px) { .v3-review-masonry { columns: 2; } }
@media (max-width: 560px) { .v3-review-masonry { columns: 1; } }
/* ── Service page: numbered "How it works" steps ───────────────────── */
.v3-steps { list-style: none; counter-reset: step; padding: 0; margin: 8px 0 28px; }
.v3-steps li {
counter-increment: step; position: relative; padding: 0 0 22px 56px; margin: 0;
line-height: 1.7; color: var(--color-ink-body);
}
.v3-steps li::before {
content: counter(step); position: absolute; left: 0; top: -2px;
width: 38px; height: 38px; border-radius: 50%; background: #264068; color: #fff;
font-family: var(--font-sans); font-weight: 700; font-size: 1.05rem;
display: flex; align-items: center; justify-content: center;
}
.v3-steps li::after {
content: ''; position: absolute; left: 18px; top: 42px; bottom: 4px; width: 2px;
background: #d9e6ec;
}
.v3-steps li:last-child::after { display: none; }
.v3-steps li strong { color: #264068; }
/* The steps live inside .v3-prose on service pages, and prose's
'.v3-prose ol { list-style: decimal; padding-left: 1.5em }' (0,1,1)
out-specs the base .v3-steps (0,1,0) — re-adding decimal markers + indent
ON TOP of our numbered circles (the duplicate '1.' next to the circle).
Re-scope to kill the marker + the prose indent; keep our circles. */
.v3-prose ol.v3-steps { list-style: none; padding-left: 0; }
.v3-prose ol.v3-steps li { padding-left: 56px; }
/* ── Service page: FAQ accordion ───────────────────────────────────── */
/* Native with a +/- marker — the SAME system as the
homepage's .service-item disclosures. Each item opens independently (no
single-open lock) and there's no Alpine x-collapse close lag. The
.v3nav trailing script adds the matching 150ms height animation. */
.v3-faq { margin: 8px 0 28px; }
.v3-faq__item { border-bottom: 1px solid #d9e6ec; }
.v3-faq__q {
list-style: none; cursor: pointer; padding: 14px 12px; margin: 6px -12px; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: space-between; gap: 16px;
font-family: var(--font-sans); font-weight: 600; font-size: var(--text-body); color: #264068;
transition: color 0.15s ease, background-color 0.15s ease;
}
.v3-faq__q::-webkit-details-marker { display: none; }
.v3-faq__q:hover { color: #2f4d7d; background-color: var(--ds-sky-soft); }
.v3-faq__q:focus-visible { outline: 2px solid #264068; outline-offset: 2px; border-radius: var(--radius-sm); }
/* A106. The +/− is decorative —
already announces "collapsed" /
"expanded", so a screen reader reading the glyph too gives you "What insurances do you
accept? PLUS, collapsed, disclosure triangle". You can't put aria-hidden on a
pseudo-element; the alt-text syntax `content: 'x' / ''` is how you hide generated
content from AT. The bare `content` on the line before is a deliberate fallback:
browsers that don't support alt text (Safari < 17.4) drop the second declaration as
invalid and keep the first, so they still SEE the icon. Don't collapse these to one
line — that's what makes it degrade safely. */
.v3-faq__q::after {
content: '+';
content: '+' / '';
font-size: 1.5em; font-weight: 400; color: #264068;
flex-shrink: 0; width: 1em; text-align: center; line-height: 1;
transition: transform 0.25s ease, color 0.15s ease;
}
.v3-faq__q:hover::after { color: #2f4d7d; transform: scale(1.15); }
.v3-faq__item[open] > .v3-faq__q::after { content: '−'; content: '−' / ''; }
.v3-faq__a { overflow: hidden; }
.v3-faq__a a:hover { text-decoration: underline; text-underline-offset: 2px; } /* inline text links in answers */
.v3-faq__a-inner { padding: 0 4px 20px; max-width: 60em; } /* type: BODY role */
.v3-faq__a p { margin: 0 0 12px; }
.v3-faq__a p:last-child { margin: 0; }
/* ── Related strip: real .v3-tcard cards in a grid ─────────────────────
Used by service pages AND the blog "Keep reading" block (one system;
the old bespoke .v3-related cards were retired). */
.v3-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 12px 0 8px; align-items: stretch; }
@media (max-width: 700px) { .v3-related-grid { grid-template-columns: 1fr; } }
/* These related cards have no description, so the homepage tcard's
'margin-top:auto' (which pins the cta to the bottom of a stretched card)
just opened a tall empty gap. Sit the cta right under the title + trim
padding so the cards hug their content instead of reading as big squares. */
.v3-related-grid .v3-tcard { padding: 16px 18px; gap: 4px; }
.v3-related-grid .v3-tcard__cta { margin-top: 6px; padding-top: 0; }
/* The title is an
; inside .v3-prose, '.v3-prose h3 { margin: 32px 0 12px }'
(0,1,1) beat the tcard's 'margin:0' (0,1,0) and forced a tall gap above it.
Reset at 0,2,0 so the card hugs its content. */
.v3-related-grid .v3-tcard__name { margin: 0; }
/* ── Service page: persistent Book CTA band ────────────────────────── */
.v3-book-band {
background: #264068; color: #fff; border-radius: var(--radius); padding: 40px 40px;
margin: 48px 0 8px; text-align: center;
box-shadow: -10px 8px 0 rgba(150,168,190,0.28);
--focus-ring: #fff; /* A105 — dark band; the default navy ring is invisible on it */
}
.v3-book-band h2 { font-family: var(--font-display); font-weight: 300; color: #fff; font-size: 1.8rem; margin: 0 0 10px; line-height: 1.15; text-align: center; } /* center to match the band — .v3-prose h2's left-align (service pages) would otherwise win */
.v3-book-band p { color: #d7e3f2; line-height: 1.6; margin: 0 0 22px; max-width: 36em; margin-left: auto; margin-right: auto; }
.v3-book-band .btn { background: #fff; color: #264068; border-color: #fff; }
.v3-book-band .btn:hover { background: #eef3f8; color: #264068; }
/* ── Team page (carried staff-card styling) ────────────────────────── */
.v3-team-section { max-width: var(--w-read); margin: 0 auto; padding: 0 24px; }
.v3-team-photo { max-width: var(--w-read); margin: 0 auto 56px; }
.v3-team-photo img { width: 100%; border-radius: var(--radius); display: block; }
/* Mobile/tablet gutter so the photo isn't edge-to-edge — the rotated
photo-peek candid needs ~16px of room or it pokes past the right edge.
820px matches the nav's mobile breakpoint; covers every width below the
760px container cap so there's no tablet sliver of horizontal scroll. */
@media (max-width: 820px) { .v3-team-photo { padding: 0 var(--space-4); } }
.v3-team-group {
color: #264068; border-bottom: 1px solid #264068; padding-bottom: 8px;
margin: 56px 0 28px; font-family: var(--font-display); font-weight: 300;
font-size: 1.7rem;
}
.staff-card {
display: grid; grid-template-columns: 200px 1fr; gap: 32px;
margin-bottom: 40px; align-items: start;
}
/* Staff photos as little polaroids — white frame + thick bottom, soft
shadow, a slight tilt that straightens on hover. (Carolyn's photo-peek
flip card is already polaroid-flavored, so it keeps its own animation.) */
.staff-card img.staff-photo {
width: 190px; height: 214px; object-fit: cover; object-position: center top;
box-sizing: border-box; background: #fff;
border: 9px solid #fff; border-bottom-width: 32px; border-radius: 2px;
box-shadow: 0 9px 22px rgba(38,64,104,0.15);
transform: rotate(-2deg); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.staff-card:hover img.staff-photo { transform: rotate(0); box-shadow: 0 14px 30px rgba(38,64,104,0.22); }
/* Fallback for any staffer still on the silhouette placeholder: keep the
white polaroid frame visible (opt out of the mix-blend trick). */
.staff-card img.staff-photo[src*="placeholder"] { mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .staff-card img.staff-photo { transition: none; } }
.staff-name { margin: 0 0 2px; scroll-margin-top: 90px; } /* type: CARD-TITLE role */
.staff-role { font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; color: #5a7298; margin-bottom: 8px; }
.staff-tagline { font-family: var(--font-display); font-weight: 500; font-size: 1.2em; font-style: italic; line-height: 1.3; margin: 0 0 10px; padding: 0; color: #2f3b4f; }
.staff-card p { margin: 0 0 8px; } /* type: BODY role */
@media (max-width: 640px) {
.staff-card { grid-template-columns: 1fr; text-align: left; }
.staff-card img.staff-photo { margin: 0 auto; }
}
/* ── Contact page ──────────────────────────────────────────────────── */
.v3-contact-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
max-width: var(--w-content); margin: 0 auto;
}
@media (max-width: 760px) { .v3-contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.v3-contact-grid h2 {
font-family: var(--font-display); font-weight: 300; color: #264068;
font-size: 1.7rem; border-bottom: 1px solid #264068; padding-bottom: 8px; margin: 0 0 16px;
}
.v3-contact-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 1.05rem; line-height: 1.7; }
.v3-contact-row .iconify { width: 22px; height: 22px; color: #264068; flex-shrink: 0; }
.v3-contact-row a { color: #264068; }
/* Every link in the contact grid (rows + the location address) is a text
link — the grid holds no buttons — so underline on hover, no opt-out. */
.v3-contact-grid a:hover { text-decoration: underline; text-underline-offset: 2px; }
.v3-hours-row { display: grid; grid-template-columns: 120px 1fr; margin-bottom: 4px; font-size: var(--text-body); line-height: 1.7; color: #2f3b4f; }
/* Contact action cards (New Patient / Make a Payment / Dental Warranty).
auto-fit so it holds 2 OR 3 cards without a fixed column count. */
.v3-cards-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; max-width: var(--w-content); margin: 48px auto 0; }
@media (max-width: 640px) { .v3-cards-2 { grid-template-columns: 1fr; } }
.v3-info-card {
background: #fff; border: 1px solid #d9e6ec; border-radius: 6px;
box-shadow: -8px 6px 0 rgba(150,168,190,0.28);
padding: 28px; display: flex; flex-direction: column; text-align: center;
}
.v3-info-card h2 { margin: 0 0 10px; text-align: center; } /* type: CARD-TITLE role; the card centers, but the bare
is caught by the unclassed-heading guard (text-align:left) — re-center it here */
.v3-info-card p { flex-grow: 1; margin: 0 0 18px; } /* type: BODY role */
/* ── Info/financing grid (relocated from home) ─────────────────────── */
.v3-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; max-width: var(--w-content); margin: 8px auto 0; }
@media (max-width: 700px) { .v3-info-grid { grid-template-columns: 1fr; } }
.v3-info-grid h3 { margin: 0 0 12px; } /* type: CARD-TITLE role */
.v3-info-grid p { margin: 0 0 12px; } /* type: BODY role */