/*
Theme Name: fgMatchBox Child — Kanellis Family Dentistry
Template: fgmatchbox
Author: Firegang Dental Marketing
Description: Thin per-client brand layer. Override tokens in :root below. No build required.
Version: 0.1
*/

:root {
    /* --- Brand colors --- */
    --navy: #142B37;
    --darkGreen: #637B70;
    --green: #A7BAB0;
    --brown: #51443C;
    --tan: #F3F0EC;
    --white: #FFFFFF;
    --black: #142B37;
    --altBg: #F3F0EC;
    --footerBg: #142B37;
    --primaryColor: #637B70;
    --primaryHover: #51443C;
    --secondaryColor: #142B37;
    --secondaryHover: #F3F0EC;
    /* --- Fonts (also set the Adobe Fonts URL in ACF Theme Settings to load them) --- */
    --headingFont: 'hardcover-vf', serif;
    --bodyFont: 'area-normal', sans-serif;
    --overlineFont: 'area-extended', sans-serif;
    /* --- Type scale --- */
    --bodyFontSize: clamp( 16px, 0.938vw, 18px );
    --dispFontSize: clamp( 56px, 4.375vw, 84px );
    --h1FontSize: clamp( 40px, 2.917vw, 56px );
    --h2FontSize: clamp( 40px, 2.917vw, 56px );
    --h2TitleFontSize: clamp( 32px, 2.292vw, 44px ); /* H2 Title — interior content headings */
    --h3FontSize: 22px;
    --h4FontSize: 20px;
    --bodyFontWeight: 400;
    --headingFontWeight: 300;
    --bodyLineHeight: 150%;
    --dispLineHeight: 115%;
    --h1LineHeight: 115%;
    --h2LineHeight: 115%;
    --h3LineHeight: 125%;
    --h4LineHeight: 125%;
    --headingLineHeight: 115%;
    --h3LetterSpc: 0.05em;
    --h4LetterSpc: 0;
    /* --- Buttons --- */
    --btnFontWeight: 700;
    --btnLetterSpc: 0.15em;
    --btnBorderRadius: 0;
    --btnPadding: 14px 30px;
    --btnBorderWidth: 2px;
    --cardBorderRad: 0;
    /* --- Shadows --- */
    --shadySmall: 0 20px 30px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadyMid: 0 40px 50px rgba(0, 0, 0, 0.05), 0 20px 30px rgba(0, 0, 0, 0.1);
    --shadyLarge: 0 50px 60px rgba(0, 0, 0, 0.05), 0 30px 40px rgba(0, 0, 0, 0.1);
    /* --- Navy band texture: the Figma pattern fill (an 8×1200 white "pattern_tile" at 0.8 spacing,
       3%, centred) = an 8px white stripe every 14.4px. Use with background-size 14.4px 100%,
       repeat-x, position 50% 0. --- */
    --navyStripes: linear-gradient(90deg, transparent 3.2px, rgba(255, 255, 255, 0.03) 3.2px 11.2px, transparent 11.2px);
}

/* ===== Buttons (style guide 2988:3669) — Overline type; 53px tall with the 2px border ===== */
.btn {
    font-size: 14px;
    line-height: 1.5;
}

/* ===== Keyboard focus (James 2026-09-30) =====
   Tabbing scrolls the next control into view, but the browser counts the fixed header (146, phones
   48) and the Google pill (bottom 24 + ~70) as visible screen, so a focused link could sit hidden
   under them (WCAG 2.2 2.4.11). scroll-padding keeps focused things out of those strips; ordinary
   scrolling is untouched. The CF7 honeypot plugin gives its hidden field tabindex="1000", which made
   an invisible field the first Tab stop on every page with a form: visibility takes it out of the Tab
   order (and the accessibility tree) while bots still fill it. */
html {
    scroll-padding: 146px 0 110px;
}

.cf7apps-honeypot-wrap {
    visibility: hidden;
}

/* ===== Header (Figma Desktop/Nav Bar — home 2928:1917, interior 3715:1780) =====
   Base = the solid look: interior pages, and home once hovered or scrolled. The homepage's
   transparent look over the hero is keyed on `body.home:not(.scrolled) #header:not(:hover)`, which
   matches the served HTML, so RUCSS keeps it. `body` beats interior_style.min.css (loads after this).
   The --hdr* values ramp linearly from a 1025 floor to the 1920 mockup value, so the nav row still
   fits beside the logo down to the 1024 mobile switch (type holds 14px down to 1280). */
body #header,
body #header:hover {
    --hdrLogoW: clamp(150px, calc(18.659vw - 41.26px), 317px);
    --hdrGap: clamp(12px, calc(4.022vw - 29.23px), 48px);
    --hdrBtnPadX: clamp(12px, calc(2.011vw - 8.61px), 30px);
    --hdrType: clamp(13px, calc(0.392vw + 8.98px), 14px);
    --hdrTrack: clamp(0.7px, calc(0.1564vw - 0.903px), 2.1px);
    padding: 24px 0 22px;
    border-bottom: 2px solid transparent;
    background-color: var(--white);
    color: var(--black);
    box-shadow: var(--shadyMid);
}

body.home:not(.scrolled) #header:not(:hover) {
    border-bottom-color: rgba(255, 255, 255, 0.15);
    background-color: transparent;
    color: var(--white);
    box-shadow: none;
}

#header .header-holder {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    min-width: 0;
}

#header .header-holder .logo-block {
    flex: 0 0 auto;
    width: var(--hdrLogoW);
}

#header .header-holder .logo-block .sLogo {
    width: var(--hdrLogoW);
    height: calc(var(--hdrLogoW) * 88 / 317);
}

#header #logo img#mLogo,
#header #logo img#scLogo {
    width: var(--hdrLogoW);
}

/* the parent fades the logo link with `transition: all`, which fades its focus ring in too */
#header #logo {
    transition: opacity .5s linear;
}

#header .header-holder .locNavBtns {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    gap: 24px;
}

#header .conBlock {
    padding: 0;
}

#header .conBlock .headAdd,
#header .conBlock .phoneBlock {
    padding: 0;
}

#header .conBlock .phoneBlock {
    gap: 14px;
}

#header .conBlock i {
    font-size: 18px;
    line-height: 1;
    color: var(--green);
}

body.home:not(.scrolled) #header:not(:hover) .conBlock i {
    color: var(--white);
}

/* the dropdown panel is white in every state, so its links stay navy even while the bar is
   transparent — a keyboard-opened sub-menu (no hover) inherited the bar's white */
body.home:not(.scrolled) #header:not(:hover) #nav .sub-menu a {
    color: var(--black);
}

#header .conBlock a {
    font-size: 14px;
    line-height: 1.5;
}

#header .navBtns {
    gap: var(--hdrGap);
}

#header #mainNav,
#header .navBtns .btn-block {
    padding: 0;
}

#header #nav {
    --navLinkPadY: 16px;
    --navLinkPadX: 0;
    gap: var(--hdrGap);
    padding: 0;
}

#header #nav > li {
    padding: 0;
}

#header #nav > li > a {
    font-family: var(--overlineFont);
    font-size: var(--hdrType);
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: var(--hdrTrack);
}

#header #nav > li > a::after {
    bottom: 0;
    background-color: var(--darkGreen);
}

/* a chevron after each top item with a sub-menu (the FG dropdown arrow; James 2026-09-30) — the
   flyout chevron below: it points right, and turns down while the item is hovered or its sub-menu
   is open from the keyboard (focus-within). On the li, so the hover underline (a::after) stays
   under the words; currentColor, so it flips with the header state. Only the transform moves; the
   translates keep the chevron's ink turning on the spot, centred on the caps. Its gap ramps 5 → 8
   with the header, and --hdrGap's 1025 floor dropped 16 → 12 to make room (logo → nav 15 at 1025). */
#header #nav > li.menu-item-has-children {
    display: flex;
    align-items: center;
}

#header #nav > li.menu-item-has-children::after {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0 1px 0 clamp(5px, calc(0.3352vw + 1.564px), 8px);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(-1.5px, 0.5px) rotate(-45deg);
    transition: transform .3s ease;
}

#header #nav > li.menu-item-has-children:hover::after,
#header #nav > li.menu-item-has-children:focus-within::after {
    transform: translateY(-1px) rotate(45deg);
}

#header #nav > li > .sub-menu {
    top: 100%;
}

/* dropdowns size to their longest link instead of trunk's fixed 240px, so no item wraps
   ("Virtual Smile Consultations" broke to two lines); trunk src/sass_utils/nav.scss:96 */
#header #nav .sub-menu {
    width: max-content;
    min-width: 240px;
}

#header #nav .sub-menu a {
    white-space: nowrap;
}

/* the parent opens the dropdowns on hover only; keyboard focus inside a menu item opens its sub-menu
   too (flyouts beside their item, as on hover). #header scopes it to the desktop bar — at 1024 and
   below the menu lives in the drawer. */
#header #nav li.menu-item-has-children:focus-within > .sub-menu {
    display: block;
}

#header #nav .sub-menu li.menu-item-has-children:focus-within > .sub-menu {
    top: 0;
    left: 100%;
}

#header #nav .sub-menu a:hover {
    text-decoration: underline;
}

#header #nav .sub-menu .menu-item-has-children > a {
    padding-right: 36px;
}

#header #nav .sub-menu .menu-item-has-children > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

#header .navBtns .btn {
    display: block;
    padding-right: var(--hdrBtnPadX);
    padding-left: var(--hdrBtnPadX);
    font-size: var(--hdrType);
    letter-spacing: var(--hdrTrack);
    transition: background-color .5s linear, border-color .5s linear, color .5s linear;
}

/* Pay Online = Primary outline */
#header .navBtns .btn-list {
    display: flex;
    margin: 0 -2px 0 0;
    padding: 0;
    list-style: none;
}

#header .navBtns .btn-list .btn {
    border-color: var(--darkGreen);
    background-color: transparent;
    color: var(--black);
}

#header .navBtns .btn-list .btn:hover {
    background-color: color-mix(in srgb, var(--darkGreen) 25%, transparent);
}

body.home:not(.scrolled) #header:not(:hover) .navBtns .btn-list .btn {
    border-color: var(--white);
    color: var(--white);
}

/* Book Now = Primary (Secondary white over the hero). Parent's overflow:hidden crops its focus ring. */
#header .navBtns .opener-form {
    overflow: visible;
}

#header .navBtns .opener-form .btn {
    min-width: clamp(131px, calc(7.821vw + 50.83px), 201px);
    text-align: center;
}

body.home:not(.scrolled) #header:not(:hover) .navBtns .opener-form .btn {
    background-color: var(--white);
    color: var(--black);
}

/* its navy label colours the parent's ring, lost on the hero photo: white, past the navy inner ring */
body.home:not(.scrolled) #header:not(:hover) .navBtns .opener-form .btn:focus-visible {
    outline-color: var(--white);
}

/* ===== Hero (Figma Hero Banner — desktop 2849:11908, mobile 2849:11854) =====
   static_promo_banner.min.css loads after this sheet, so every rule leads with body.home.
   Mockup overlay samples at 50% black (the parent's scrim is a lighter grey). */
body.home .promo {
    height: min(48.958vw, 940px);
    padding-top: 0;
}

body.home .promo::before {
    background-color: rgba(0, 0, 0, 0.5);
}

body.home .promo::after {
    content: "";
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: min(5.208vw, 100px);
    background: url("/wp-content/uploads/2026/09/slant_transition_white.svg") center bottom / 100% 100% no-repeat;
    transform: none;
}

body.home .promo .promo-holder .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    align-items: end;
    padding-bottom: min(7.292vw, 140px);
}

body.home .promo .slide_content {
    position: static;
    width: 100%;
}

/* Staggered slide-up on load (Dr. K, 10/26, in place of the prototype's line-2 fade): line 1, then
   "40 Years & Running", then the badge, each rising 40px as it fades in, 0.3s apart. Line 2 rides
   line 1's rise and adds its own; the photo stays the LCP, so the text can start hidden. */
body.home .promo h2.banH {
    display: block;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    -webkit-text-stroke: 0;
    animation: kfdHeroRise .8s cubic-bezier(.22, 1, .36, 1) .3s both;
}

body.home .promo h2.banH .banH-sub {
    display: block;
    margin-top: 0.095em;
    font-style: italic;
    animation: kfdHeroRise .8s cubic-bezier(.22, 1, .36, 1) .6s both;
}

@keyframes kfdHeroRise {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* award badge sits on the container's right gutter, over the slant */
body.home .promo .s_content {
    position: absolute;
    right: 0;
    bottom: min(2.396vw, 46px);
    width: min(12.5vw, 240px);
}

body.home .promo .hero-badge {
    display: block;
    width: 100%;
    height: auto;
    animation: kfdHeroRise .8s cubic-bezier(.22, 1, .36, 1) .9s both;
}

/* ===== Differentiator (Figma Desktop/Differentiator Bar 2871:1586, mobile 2849:11858) and the
   interior widget (the same component on navy — 2871:1620, mobile 2849:11757) =====
   Content = Theme Settings → Reciprocal Fields diff_fields (new_diff runs diff_loc 0; the widget is
   set to "There"). The parent's diff rules are in kindling, which loads before this sheet, so
   matching specificity wins; interior_style.min.css loads after it, so the widget's stacked-row rule
   (≤1024) leads with body. The widget has no .spWrap and an h2 heading: the bare .diffImg /
   .diffContent / .diffList rules reach it as they are, the .diff-scoped ones name it too.
   Section frame = 100 top and NO bottom padding: news1 below carries its own 140 (mobile 100). */
.diff {
    padding: 100px 0 0;
}

/* Widget frame = 100 / 100 at every width, on navy with the Figma pattern fill (--navyStripes, as the
   navy bands), white type and checks; it sits flush between the FAQ band and the map */
.widget.widget-diff {
    padding: 100px 0;
    background: var(--navyStripes) 50% 0 / 14.4px 100% repeat-x, var(--navy);
    color: var(--white);
}

/* same side gutters as the header and hero; the floor is the phone frame's 32px */
.diff .container,
.widget.widget-diff .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
}

/* Theme Settings' 10/1 wrapper would squeeze the 1364 row below 398 columns; the row centres itself */
.diff .container > div,
.widget.widget-diff .container > div {
    width: 100%;
    margin-left: 0;
}

/* the heading's own margin carries the title → icons gap, so the wrapper's 36 can't collapse into it */
.diff .heading,
.widget.widget-diff .heading {
    margin-bottom: 0;
}

/* H3 Subheader: Area Extended Bold 22/1.25 at 5% tracking (mobile 20 at 10%), not the parent's display
   serif. The margin also clears the interior sheet's h2 top margin (40–80) off the widget's heading. */
.diff .heading h1,
.widget.widget-diff .heading h2 {
    margin: 0 0 clamp(48px, 2.917vw, 56px);
    font-family: var(--overlineFont);
    font-size: clamp(20px, 1.146vw, 22px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* 3 × 398 on the parent's 85 gap = the mockup's 1364 row. col-lg-4's flat 33.333% plus two gaps
   overflowed the row; a 398 column that may shrink never can. */
.diff .diffBox,
.widget.widget-diff .diffBox {
    flex: 0 1 auto;
    width: 398px;
    min-width: 0;
}

/* icon → list is 32 in every block (parent nets 20 from padding on both sides) */
.diffImg {
    margin-bottom: 32px;
    padding-bottom: 0;
}

/* body token 18/27 → 16/24; the unitless line-height keeps it a ratio for the items */
.diffContent {
    padding: 0;
    font-size: var(--bodyFontSize);
    line-height: 1.5;
}

.diffList {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
}

.diffList li {
    padding: 0;
}

/* The check stays INLINE in the centred text: a flexed row mis-centres the items that wrap.
   It's the mockup's 20×14 SVG painted as a currentColor mask, so the widget's white type gets a
   white check. Top-aligned + (line − 14) / 2 centres it on line 1; the right margin nets the 16px
   gap after the markup's space (an Area Normal space is 0.263em). */
.diffList li .fa-check {
    display: inline-block;
    width: 20px;
    height: 14px;
    margin: calc(0.75em - 7px) calc(16px - 0.263em) 0 0;
    vertical-align: top;
    background-color: currentColor;
    -webkit-mask: url("images/check-mark.svg") center / 20px 14px no-repeat;
    mask: url("images/check-mark.svg") center / 20px 14px no-repeat;
}

.diffList li .fa-check::before {
    content: none;
}

/* the links take the item colour — navy on the homepage, the widget's white */
.diffList li a {
    color: inherit;
    text-decoration: none;
}

.diffList li a:hover {
    text-decoration: underline;
}

/* ===== News blocks — News 1 (Figma Interactions/News Block 5257:2155, mobile 4002:2302) and its
   mirror News 2 (5257:2167, mobile 5244:6975) =====
   fw_content_half. News 1: photo in the left field + `reverse` = copy left, photo right; News 2:
   photo left, copy right. The section bundle loads after this sheet, so every rule carries the
   section id (the parent's own #news1 / #news2 rules need the extra body / child combinator).
   Frame: 140 / 140 (mobile 100); two 820 squares share one 2px Brown line, 1638 wide on a 141
   gutter. News 1 sits on a transparent → Tan wash, News 2 on solid Tan. The Meet the Doctor widget
   (includes/widget-meet-doctor.php) prints News 2's markup on interior pages, so it shares News 2's rules. */
body #news1.half-content,
body #news2.half-content,
body #meet-doctor.half-content {
    --kfdSlide: clamp(60px, 7.292vw, 140px);
    padding: clamp(100px, 7.292vw, 140px) 0;
    background: linear-gradient(rgba(243, 240, 236, 0), var(--tan)) var(--white);
}

body #news2.half-content,
body #meet-doctor.half-content {
    background: var(--tan);
}

#news1 .container,
#news2 .container,
#meet-doctor .container {
    width: calc(100% - clamp(64px, 14.688vw, 282px));
    max-width: none;
    padding: 0;
}

/* each square is half + 1px, and the copy overlaps the photo by 2 so their borders read as one line */
body #news1 .container > div,
body #news2 .container > div,
body #meet-doctor .container > div {
    flex: 0 0 calc(50% + 1px);
    width: calc(50% + 1px);
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    border: 2px solid var(--brown);
}

body #news1 .container > .image,
body #news2 .container > .image,
body #meet-doctor .container > .image {
    display: block;
    float: none;
    padding: clamp(32px, 2.083vw, 40px);
}

/* the photo fills its frame, so where the copy outgrows its square (~1025–1090) the photo crops
   taller instead of leaving a gap under it */
#news1 .image picture,
#news2 .image picture,
#meet-doctor .image picture {
    display: block;
    height: 100%;
}

#news1 .image img,
#news2 .image img,
#meet-doctor .image img {
    display: block;
    float: none;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    margin: 0;
    object-fit: cover;
}

/* overline pinned to the top, heading + body to the bottom (the mockup's justify-between). The
   desktop copy sits 80 from the OUTER edge (that frame's stroke isn't in its padding), so 78 + the
   2px border; the photo frame and both phone bands do count the stroke. The column carries the
   parent's slide-in hook (Right ID field) for the reveal below — the framed box itself must not
   fade with it, so its opacity and transition are held here. */
body #news1 .container > .text,
body #news2 .container > .text,
body #meet-doctor .container > .text {
    display: flex;
    flex-direction: column;
    margin-right: -2px;
    padding: clamp(64px, 4.063vw, 78px) clamp(32px, 4.063vw, 78px);
    opacity: 1;
    transition: none;
}

/* News 2's copy is on the right, so it overlaps the photo from that side */
body #news2 .container > .text,
body #meet-doctor .container > .text {
    margin: 0 0 0 -2px;
}

#news1 .text > div,
#news2 .text > div,
#meet-doctor .text > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
    padding: 0;
}

/* The overline is the <small> inside the heading (FG convention), so the h2 is a column whose
   space-between splits it from the heading text. 10em caps the measure between "The Comprehensive
   Dental" (11em) and "Dental Care You Need" (8.8em), which is the mockup's line break. */
#news1 .text h2,
#news2 .text h2,
#meet-doctor .text h2 {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    max-width: 10em;
    margin: 0 0 clamp(24px, 1.667vw, 32px);
    transition: transform .8s ease-out, color .8s ease-out;
}

/* Overline: Area Extended Bold 14/1.5 at 15% + a 2px Green rule 24 after it (120, mobile 60). The h2's
   gap spaces it, so trunk's small.overline margin (#90) is zeroed. */
#news1 .text h2 small,
#news2 .text h2 small,
#meet-doctor .text h2 small {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 0;
    font-family: var(--overlineFont);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--black);
    transition: transform .8s ease-out;
}

#news1 .text h2 small::after,
#news2 .text h2 small::after,
#meet-doctor .text h2 small::after {
    content: "";
    flex: none;
    width: clamp(60px, 6.25vw, 120px);
    height: 2px;
    background-color: var(--green);
    transform-origin: left center;
    transition: transform .8s ease-out, opacity .8s ease-out;
}

#news1 .text p,
#news2 .text p,
#meet-doctor .text p {
    transition: transform .8s ease-out, color .8s ease-out;
}

#news1 .text p:last-child,
#news2 .text p:last-child,
#meet-doctor .text p:last-child {
    margin-bottom: 0;
}

/* Scroll reveal (Figma prototype): the overline rule grows from the left while the heading and body
   slide down into place and fade in, finishing together — 140 on desktop (the prototype's start
   state), 60 on phones so they start below the overline. The parent's slidein.js (already on every
   page) adds .active to the slide-in column as it scrolls in, so the start state is in the served
   HTML: no class change at load, and RUCSS keeps it. The overline counter-moves the h2 so it holds
   still; the fade is on color because it sits inside that h2; the rule scales rather than resizes,
   so nothing here needs a layout pass. The transitions live on the rules above. */
#news1 .text.slide-in:not(.active) h2,
#news1 .text.slide-in:not(.active) p,
#news2 .text.slide-in:not(.active) h2,
#news2 .text.slide-in:not(.active) p,
#meet-doctor .text.slide-in:not(.active) h2,
#meet-doctor .text.slide-in:not(.active) p {
    color: transparent;
    transform: translateY(calc(-1 * var(--kfdSlide)));
}

#news1 .text.slide-in:not(.active) h2 small,
#news2 .text.slide-in:not(.active) h2 small,
#meet-doctor .text.slide-in:not(.active) h2 small {
    transform: translateY(var(--kfdSlide));
}

#news1 .text.slide-in:not(.active) h2 small::after,
#news2 .text.slide-in:not(.active) h2 small::after,
#meet-doctor .text.slide-in:not(.active) h2 small::after {
    opacity: 0;
    transform: scaleX(0);
}

/* Meet the Doctor: the portrait crops to the square from the top, so his face stays in frame */
#meet-doctor .image img {
    object-position: center top;
}

#meet-doctor .text .btn {
    align-self: flex-start;
    margin-top: clamp(24px, 1.667vw, 32px);
}

/* ===== Navy bands — Virtual Consults (Figma "News Block" 2849:11891, mobile 5244:6980) and
   Insurance & Financing (Interactions/News Banner 5274:2381 — states 5274:2379, mobile 5244:7000) =====
   content modules #virtual-consults / #insurance-financing: the navy and white come from their ACF
   colour fields (inline), the stripes from --navyStripes. content.min.css loads after this sheet, so
   rules lead with the id. Frame: 100 / 100, copy centred at 810, heading → body 32 (mobile 24),
   body → button 56 (48). Insurance & Financing adds the photo that slides in from the left. */
#virtual-consults,
#insurance-financing {
    padding: 100px 0;
    background-image: var(--navyStripes);
    background-position: 50% 0;
    background-size: 14.4px 100%;
    background-repeat: repeat-x;
    text-align: center;
}

#virtual-consults .container,
#insurance-financing .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    padding: 0;
}

#virtual-consults .container > div,
#insurance-financing .container > div {
    width: 100%;
    max-width: 810px;
    margin: 0 auto;
    padding: 0;
}

#virtual-consults h2,
#insurance-financing h2 {
    margin: 0 0 clamp(24px, 1.667vw, 32px);
    font-size: var(--h2FontSize);
    line-height: var(--h2LineHeight);
    font-weight: var(--headingFontWeight);
}

/* the phone frame keeps the desktop 18/27 body here (the news blocks drop to 16) */
#virtual-consults p,
#insurance-financing p {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
}

/* Secondary CTA (style guide): navy on white → Tan on hover. The Figma CTA component is 201 wide
   with the label centred; the web font sets "GET STARTED" ~5px wider than Figma, so the width
   comes from min-width rather than the 32px side padding. */
#virtual-consults .btn-content,
#insurance-financing .btn-content {
    min-width: 201px;
    margin: clamp(48px, 2.917vw, 56px) auto 0;
    padding-right: 16px;
    padding-left: 16px;
    border-color: var(--white);
    background-color: var(--white);
    color: var(--black);
    transition: background-color .5s linear, border-color .5s linear;
}

#virtual-consults .btn-content:hover,
#insurance-financing .btn-content:hover {
    border-color: var(--tan);
    background-color: var(--tan);
}

/* the parent's ring takes the navy label colour, lost on the band: white, past the navy inner ring */
#virtual-consults .btn-content:focus-visible,
#insurance-financing .btn-content:focus-visible {
    outline-color: var(--white);
}

/* Insurance & Financing: the 260 × 320 photo overhangs the map below by 80, so the box runs on past
   the band by that + the photo's shadow and pulls the map back up by the same amount. The photo then
   stays inside the box that the template's content-visibility:auto (kept for performance) clips to.
   The band's 100 / 100 moves to the container, so background-clip: content-box keeps the module's
   navy and the stripes on the band. z-index 2 paints the photo over the map; the box itself ignores
   the pointer so the run-on strip never blocks the map (the band's content takes it back). The Class
   field carries the parent's slide-in hook for the reveal; only the photo moves, so the section's own
   fade is held. */
#insurance-financing {
    --kfdInsOut: calc(min(4.167vw, 80px) + min(2.604vw, 50px));
    position: relative;
    z-index: 2;
    margin-bottom: calc(-1 * var(--kfdInsOut));
    padding: 0 0 var(--kfdInsOut);
    background-clip: content-box;
    opacity: 1;
    transition: none;
    pointer-events: none;
}

#insurance-financing .container {
    padding: 100px 0;
    pointer-events: auto;
}

/* 810 centred; below ~1600 it narrows so the copy keeps 40 clear of the photo (as the reviews quote) */
#insurance-financing .container > div {
    width: min(810px, calc(100% - 2 * (min(13.542vw, 260px) + 40px)));
}

/* on the header gutter, 80 past the band's foot, its shadow in the box's last 50 (all scale below
   1920) — the Figma "Mouse Enter" state, with its 0.3s delay and "Slow" spring (as the reviews photo) */
#insurance-financing::after {
    content: "";
    position: absolute;
    bottom: min(2.604vw, 50px);
    left: clamp(32px, 7.292vw, 140px);
    width: min(13.542vw, 260px);
    aspect-ratio: 260 / 320;
    background-image: url("/wp-content/uploads/2026/09/insurance_photo.jpg");
    background-position: center;
    background-size: cover;
    box-shadow: 0 min(1.042vw, 20px) min(1.563vw, 30px) rgba(0, 0, 0, 0.05);
    transition: transform 1.25s linear(0, 0.0776, 0.2272, 0.3823, 0.5189, 0.6308, 0.7192, 0.7876, 0.8398, 0.8795, 0.9094, 0.932, 0.949, 0.9617, 0.9713, 0.9785, 0.9839, 0.9879, 0.9909, 0.9932, 0.9949, 0.9962, 0.9971, 0.9978, 1) .3s;
}

/* start state until slidein.js marks the band .active: just past the left edge, with no image yet
   so the photo isn't fetched with the page. It matches the served markup, so RUCSS keeps it. */
#insurance-financing:not(.active)::after {
    background-image: none;
    transform: translateX(calc(-100% - clamp(32px, 7.292vw, 140px)));
}

/* ===== Featured Services (Figma Featured Services Module 5217:4129 — states 2391:422, mobile 5244:6976) =====
   feat_serv has no id/class field and feat_serv.min.css loads after this sheet, so rules lead with
   body .feat-services (the parent's own hover rules need .featLink in the chain too). Frame: a 4px
   white line under Virtual Consults, then B&W photos (colour files + grayscale, the 50% black scrim
   in every state) on a 4px Tan grid, 800 tall at 1920. The cards sit at the row's left edge and are
   placed with transforms, so the hover (widths only, desktop block below) moves no start point and
   Chrome logs no layout shift — the parent's in-row flex-grow logged ~0.6 CLS per sweep. */
body .feat-services {
    container-type: inline-size;
    padding: 0;
    border-top: 4px solid var(--white);
    background-color: var(--tan);
}

/* only the cards take the pointer, so the gaps never count as hovering the row */
body .feat-services .row.flex {
    --kfdGap: 4px;
    --kfdGrow: 1.5605;
    position: relative;
    display: block;
    height: min(41.667vw, 800px);
    margin: 0;
    pointer-events: none;
}

/* card count and position (1–6 cards) feed the geometry below. The count uses quantity queries
   (plain CSS3), which RUCSS can match against the served markup. */
body .feat-services .row.flex > * {
    --kfdN: 1;
    --kfdI: 0;
}

body .feat-services .row.flex > :first-child:nth-last-child(2),
body .feat-services .row.flex > :first-child:nth-last-child(2) ~ * {
    --kfdN: 2;
}

body .feat-services .row.flex > :first-child:nth-last-child(3),
body .feat-services .row.flex > :first-child:nth-last-child(3) ~ * {
    --kfdN: 3;
}

body .feat-services .row.flex > :first-child:nth-last-child(4),
body .feat-services .row.flex > :first-child:nth-last-child(4) ~ * {
    --kfdN: 4;
}

body .feat-services .row.flex > :first-child:nth-last-child(5),
body .feat-services .row.flex > :first-child:nth-last-child(5) ~ * {
    --kfdN: 5;
}

body .feat-services .row.flex > :first-child:nth-last-child(6),
body .feat-services .row.flex > :first-child:nth-last-child(6) ~ * {
    --kfdN: 6;
}

body .feat-services .row.flex > :nth-child(2) {
    --kfdI: 1;
}

body .feat-services .row.flex > :nth-child(3) {
    --kfdI: 2;
}

body .feat-services .row.flex > :nth-child(4) {
    --kfdI: 3;
}

body .feat-services .row.flex > :nth-child(5) {
    --kfdI: 4;
}

body .feat-services .row.flex > :nth-child(6) {
    --kfdI: 5;
}

/* At rest the cards share the row equally (637.33 at 1920). On hover one card takes --kfdGrow × the
   others' width: 838 : 537 at 1920, the prototype's sizes (Smart Animate 0.6s ease-in-out). */
body .feat-services .featLink {
    --kfdW: calc(100cqw - (var(--kfdN) - 1) * var(--kfdGap));
    --kfdD: calc(var(--kfdW) / var(--kfdN));
    --kfdS: calc(var(--kfdW) / (var(--kfdGrow) + var(--kfdN) - 1));
    --kfdH: calc(var(--kfdS) * var(--kfdGrow));
    --kfdCardW: var(--kfdD);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: var(--kfdCardW);
    height: 100%;
    overflow: hidden;
    pointer-events: auto;
    transform: translateX(calc(var(--kfdI) * (var(--kfdD) + var(--kfdGap))));
    transition: width .6s ease-in-out, transform .6s ease-in-out;
}

/* keyboard focus rings the title, not the card (Ali's QA convention): the card clips its overflow
   and its photo covers it, so a ring on the card itself is hidden */
body .feat-services .featLink:focus-visible {
    outline: none;
    box-shadow: none;
}

body .feat-services .featBox {
    width: 100%;
    height: 100%;
    padding: 0;
    transition: none;
}

body .feat-services .featImg {
    inset: 0;
}

/* the 50% black scrim sits over the photo in every state */
body .feat-services .featImg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Figma FILL centres the photo (the parent sits it at 38%); grayscale replaces the parent's dim */
body .feat-services .featImg img {
    object-position: 50% 50%;
    filter: grayscale(1);
    transition: filter .6s ease-in-out;
}

body .feat-services .featLink:focus-visible .featImg img {
    filter: grayscale(0);
}

/* title 40 from the left and bottom (phones 32 / 38) */
body .feat-services .featContent {
    display: block;
    padding: 0 clamp(20px, 2.083vw, 40px) clamp(20px, 2.083vw, 40px);
    box-shadow: none;
    text-align: left;
}

/* H3 Subheader: Area Extended Bold 22/1.25 at 5% (phones 20 at 10%); fit-content so the focus ring
   hugs the words */
body .feat-services .featContent .h4 {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    font-family: var(--overlineFont);
    font-size: clamp(20px, 1.146vw, 22px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--white);
}

body .feat-services .featLink:focus-visible .featContent .h4 {
    outline: 3px solid var(--white);
    outline-offset: 4px;
}

/* Learn More (Figma CTA Button, Tertiary): Overline type + the Figma chevron 16 after it, 36 in from
   the card's right edge and 49.5 up (where the mockup draws it, not on the title's line). It sits at
   left 0 and rides a transform that tracks the card's width, so it moves no start point either. */
body .feat-services .featLink .featContent .fade-in {
    position: absolute;
    bottom: calc(clamp(20px, 2.083vw, 40px) + 9.5px);
    left: 0;
    gap: 16px;
    margin: 0;
    font-family: var(--overlineFont);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.15em;
    opacity: 0;
    transform: translateX(calc(var(--kfdCardW) - 100% - 36px));
    transition: opacity .6s ease-in-out, transform .6s ease-in-out;
}

body .feat-services .featLink:focus-visible .featContent .fade-in {
    opacity: 1;
}

body .feat-services .featLink .featContent .fade-in .fas {
    width: 6.718px;
    height: 11.314px;
    margin: 0;
    background-color: currentColor;
    -webkit-mask: url("images/chevron-right.svg") center / 6.718px 11.314px no-repeat;
    mask: url("images/chevron-right.svg") center / 6.718px 11.314px no-repeat;
    transition: transform .3s ease-in;
}

body .feat-services .featLink .featContent .fade-in .fas::before {
    content: none;
}

/* ===== Reviews (Figma Interactions/Review Scroller 5274:2323 — states 5274:2265, mobile 2849:11831) =====
   reviews has no id/class field and reviews.min.css loads after this sheet, so rules lead with
   body .reviews. Dark Green band, 100 / 100, one review at a time centred at 810 (parent reviews.js
   Splide, 5s autoplay). The 260 × 320 B&W photo slides in from the right edge and overhangs 80 into
   the offers below (the Figma "Mouse Enter" state; the site runs it when the scroller mounts). The
   photo is drawn by .testimony::after from its Media Library file; the URL only applies once the
   scroller mounts, so it downloads as the section nears the viewport rather than with the page. */
/* The box runs on past the band by the photo's overhang + its shadow and pulls the offers back up
   by the same amount, so the photo stays inside the section: the template's content-visibility:auto
   (skips rendering while off-screen — kept for performance) and overflow:hidden clip to this box.
   The band colour is painted on the band only. */
body .reviews {
    --kfdRevOut: calc(min(4.167vw, 80px) + min(2.604vw, 50px));
    margin-bottom: calc(-1 * var(--kfdRevOut));
    padding: 100px 0 calc(100px + var(--kfdRevOut));
    background: linear-gradient(var(--darkGreen), var(--darkGreen)) 0 0 / 100% calc(100% - var(--kfdRevOut)) no-repeat;
    color: var(--white);
}

body .reviews .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

/* 810 centred; below ~1600 it narrows so the quote clears the photo (gutter + photo + 40 a side).
   Static so the photo pseudo is placed against the section, not the scroller. */
body .reviews .testimony {
    position: static;
    width: min(810px, calc(100% - 2 * (clamp(32px, 7.292vw, 140px) + min(13.542vw, 260px) + 40px)));
    margin: 0 auto;
    padding: 0;
}

/* on the header gutter, 80 below the band, its shadow in the box's last 50 (all scale below 1920).
   Figma's 0.3s delay and its "Slow" spring (stiffness 80, damping 20 — settles in the 1.25s Figma
   reports) as linear() points. */
body .reviews .testimony::after {
    content: "";
    position: absolute;
    right: clamp(32px, 7.292vw, 140px);
    bottom: min(2.604vw, 50px);
    z-index: 1;
    width: min(13.542vw, 260px);
    aspect-ratio: 260 / 320;
    background-image: url("/wp-content/uploads/2026/09/reviews_photo.jpg");
    background-position: center;
    background-size: cover;
    box-shadow: 0 min(1.042vw, 20px) min(1.563vw, 30px) rgba(0, 0, 0, 0.05);
    transition: transform 1.25s linear(0, 0.0776, 0.2272, 0.3823, 0.5189, 0.6308, 0.7192, 0.7876, 0.8398, 0.8795, 0.9094, 0.932, 0.949, 0.9617, 0.9713, 0.9785, 0.9839, 0.9879, 0.9909, 0.9932, 0.9949, 0.9962, 0.9971, 0.9978, 1) .3s;
}

/* start state until reviews.js mounts the scroller (Splide adds .is-initialized): just past the
   right edge, with no image yet so the photo isn't fetched with the page. It matches the served
   markup, so RUCSS keeps it. */
body .reviews .testimony:not(.is-initialized)::after {
    background-image: none;
    transform: translateX(calc(100% + clamp(32px, 7.292vw, 140px)));
}

/* the band takes the longest review's height; shorter ones sit centred in it (the parent's
   fit-content height kept each slide from stretching to the band) */
body .reviews .quotWrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    padding: 0;
}

/* the parent's inline-block quote wrapper left a 6px descender gap under every review, and it
   pads the quote 100 a side (phones 15) */
body .reviews .testCont,
body .reviews .testCont .rQuote {
    display: block;
    padding: 0;
}

/* Body 18/1.5 at both sizes (the phone frame keeps 18) and the whole quote — the parent clamps it
   to 4 lines, the phone mockup shows 7. 24 to the name (phones 16). */
body .reviews .testimony .rQuote > p {
    display: block;
    margin: 0 0 24px;
    overflow: visible;
    font-size: 18px;
    line-height: 1.5;
    -webkit-line-clamp: none;
}

/* name: Overline type, 16 to the Google badge. The parent's quote clamp (overflow hidden on every p)
   cut the badge link's focus ring off top and bottom. */
body .reviews .testimony p.tName {
    gap: 16px;
    margin: 0;
    overflow: visible;
    font-family: var(--overlineFont);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.15em;
}

/* the template's Google PNG is already the mockup's white 24px badge (a 2x asset) */
body .reviews .testimony p.tName img {
    display: block;
    width: 24px;
    height: 24px;
}

/* ===== Special Offers (Figma Special Offer Block 2849:11882 — card states 2834:954, mobile 2849:11822) =====
   offers module, style 3 (Image Center), offers_slider on: Splide runs the carousel below 1025 and
   destroys itself above, leaving the static row. offers.min.css loads after this sheet, so rules
   lead with body .offers. Its desktop rules key on Splide's JS-added classes (the parent keeps that
   file out of RUCSS); the rules here match the served HTML, so RUCSS keeps them. Frame: Tan,
   140 / 140 (mobile 100), heading → cards 50 + the 24 a card lifts on hover (mobile 48), three 442
   cards on the parent's 16 gap = 1358 centred. The cards are transparent (white on hover). The
   Special Offers page's list (page-templates/special-offers.php — its own markup: .spcImg icon,
   linked title, centred text) shares the card rules; its grid is at the end of this block. */
body .offers,
body.page-template-special-offers .main-frame .offers-list {
    --offerCardBg: transparent;
    --offerCardText: var(--black);
    --kfdOfferShadow: 0 min(2.084vw, 40px) min(2.605vw, 50px);
}

body .offers {
    padding: clamp(100px, 7.292vw, 140px) 0;
    background-color: var(--tan);
}

body .offers .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
}

/* the 10/1 column would squeeze the row; the heading and the cards centre themselves */
body .offers .offers-holder {
    width: 100%;
    margin-left: 0;
}

body .offers .heading {
    margin: 0 0 clamp(48px, 3.855vw, 74px);
    padding: 0;
}

body .offers .heading h2 {
    margin: 0;
    font-weight: var(--headingFontWeight);
}

/* 3 × 442 on the 16 gap (the list itself can't take an auto margin: Splide forces it to 0) */
body .offers .offers-list-wrap {
    max-width: 1358px;
    margin: 0 auto;
}

/* Splide is destroyed at 1025+, so the track needn't clip: the hover lift and the shadows stay
   whole. The ≤1024 block clips it again for the carousel. */
body .offers .splide__track {
    overflow: visible;
}

/* the cards share the row equally: a 0 flex-basis overrides the parent's 30% width without the
   JS-state selector it sits behind. The carousel puts it back to auto (≤1024) for Splide's widths. */
body .offers .offers-list li {
    flex: 1 1 0%;
    transition: transform .3s ease-in;
}

/* the parent lifts every card 20px on hover at every width, touch included; the mockup's lift is
   desktop hover only (hover block below) */
body .offers .offers-list li:hover,
body.page-template-special-offers .main-frame .offers-list li:hover {
    transform: none;
    transition: transform .3s ease-in;
}

body .offers .box-offers,
body.page-template-special-offers .main-frame .offers-list .box-offers {
    padding: 0;
}

/* The card: the parent's flex column runs top-down (it spread the parts with space-between) with
   Learn More pinned to the foot, so the three line up. 40 in from the outer edge (mobile 32), the
   2px Brown frame inside it. Its soft shadow only shows once the card fills white on hover: Figma
   casts a no-fill frame's shadow from the outline alone (nothing visible at rest), CSS from the
   whole box, so at rest it's held transparent and only its colour animates. */
body .offers .box-holder,
body.page-template-special-offers .main-frame .offers-list .box-holder {
    justify-content: flex-start;
    padding: clamp(30px, 1.98vw, 38px);
    border: 2px solid var(--brown);
    box-shadow: var(--kfdOfferShadow) transparent;
    transition: background-color .3s ease-in, box-shadow .3s ease-in;
}

/* the 80px icon as a block: the parent's inline-block + alignment strut add space under it */
body .offers .box-offers .alpha-match {
    margin: 0;
}

body .offers .alignHelp {
    display: none;
}

body .offers .alpha-match img {
    display: block;
}

/* H3 Subheader: Area Extended Bold 22/1.25 at 5% (phones 20 at 10%), 32 under the icon. The
   parent's overflow: hidden would cut the focus ring of the page's linked titles. */
body .offers .description,
body.page-template-special-offers .main-frame .offers-list .description {
    margin: 32px 0 0;
    overflow: visible;
}

body .offers .description .h4,
body.page-template-special-offers .main-frame .offers-list .description .h4 {
    display: block;
    margin: 0;
    font-family: var(--overlineFont);
    font-size: clamp(20px, 1.146vw, 22px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Caption: Area Normal 14/1.5, 16 under the title (the page's paragraphs lose the content margin) */
body .offers .image-center .offers-info,
body.page-template-special-offers .main-frame .offers-list .offers-info {
    margin-top: 16px;
}

body .offers .offers-info p,
body.page-template-special-offers .main-frame .offers-list .offers-info p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Learn More (Figma CTA Button, Tertiary / Movement): Overline type and the Figma arrow 16 after
   it, at least 32 under the copy. The parent centres it and nudges it up 20 on tablets. */
body .offers .specWrap,
body.page-template-special-offers .main-frame .offers-list .specWrap {
    bottom: auto;
    margin-top: auto;
    padding: 32px 0 0;
    text-align: left;
}

body .offers .specWrap a,
body.page-template-special-offers .main-frame .offers-list .specWrap a {
    display: flex;
    gap: 16px;
    margin: 0;
    font-family: var(--overlineFont);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.15em;
}

/* the arrow follows the words (::after is the parent's hover underline, which the mockup drops) */
body .offers .specWrap a::before,
body.page-template-special-offers .main-frame .offers-list .specWrap a::before {
    content: "";
    flex: none;
    order: 1;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("images/arrow-right.svg") center / 16.3px 16px no-repeat;
    mask: url("images/arrow-right.svg") center / 16.3px 16px no-repeat;
    transition: transform .3s ease-in;
}

/* The section is laid out at page load (the carousel can't be skipped while off-screen), so a
   plain URL would download with the page: the arrow is drawn once the carousel script has mounted
   Splide, as the section nears the viewport. Splide keeps the slider hidden until then. */
body .offers .offers-list-wrap:not(.is-initialized) .specWrap a::before {
    -webkit-mask-image: none;
    mask-image: none;
    background-color: transparent;
}

body .offers .specWrap a::after,
body.page-template-special-offers .main-frame .offers-list .specWrap a::after {
    content: none;
}

body .offers .specWrap a:hover::before,
body.page-template-special-offers .main-frame .offers-list .specWrap a:hover::before {
    transform: translateX(8px);
}

/* The Special Offers page: the homepage card at its homepage size — thirds of a row up to 1358 on
   the 16 gap, wider than the 1088 text column and centred on the page (container units measure the
   gutter-wide container) — and each row centres itself, so a 4th or 5th card sits centred under the
   three and six make two rows that line up (James 2026-09-30). The template's own 120 frame padding
   doubled #content's 140 / 80, and its markup centres the copy (.center) where the card sets it left. */
body.page-template-special-offers .main-frame {
    padding: 0;
}

body.page-template-special-offers .main-frame > .container {
    container-type: inline-size;
}

body.page-template-special-offers .main-frame .offers-list {
    justify-content: center;
    gap: 16px;
    width: min(1358px, 100cqw);
    max-width: none;
    margin: 0 calc((100% - min(1358px, 100cqw)) / 2);
}

/* the parent pads every card 0 10 22 from 1440 down, which would inset the frames off the row */
body.page-template-special-offers .main-frame .offers-list > li {
    flex: 0 0 calc((100% - 32px) / 3);
    min-width: 0;
    margin: 0;
    padding: 0;
    transition: transform .3s ease-in;
}

body.page-template-special-offers .main-frame .offers-list .center {
    text-align: left;
}

body.page-template-special-offers .main-frame .offers-list .spcImg {
    display: block;
    margin: 0;
}

/* an offer without an icon starts with its title */
body.page-template-special-offers .main-frame .offers-list .box-holder > .description:first-child {
    margin-top: 0;
}

/* ===== Map (Figma Desktop/Map Block 5235:5500, mobile 2849:11818 — the same block on interior pages) =====
   location module + the interior Full Width Map widget (same markup; its heading is the widget
   title). Theme Settings → Footer → Full Width Maps is OFF (James 2026-09-29): this branch prints
   the copy and then the map, which stack into the mockup here; the full-width branch's script pans
   the map off-centre for its floating card. The parent writes its shell and #map rules as
   `.section-location, .widget.section-location`, so the widget needs the (0,2,x) selector too, and
   its contact rules run to (0,4,0). Frame: Tan → transparent, 140 / 140 (mobile 100 / 80); a 1365
   copy row — the heading bottom-left, address / phone / hours on the right 24 apart — then the map
   80 below (mobile 48), header-gutter wide, 380 tall (mobile 180). The pin is images/map-mark.png. */
body .section-location,
body .widget.section-location {
    padding: clamp(100px, 7.292vw, 140px) 0 clamp(80px, 7.292vw, 140px);
    background: linear-gradient(var(--tan), rgba(243, 240, 236, 0)) var(--white);
}

body .section-location .map-block.container {
    flex-direction: column;
    gap: clamp(48px, 4.167vw, 80px);
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    overflow: hidden;
}

body .section-location .address {
    display: block;
    width: 100%;
    max-width: 1365px;
    margin: 0 auto;
    padding: 0;
}

/* The copy row is a grid over the address markup: the heading sits inside the first <address> row,
   so both wrappers step aside (display: contents) and the heading takes the left column across
   the three rows, bottom-aligned; the address, phone and hours rows fill the right column. */
body .section-location .address .address-holder {
    --kfdLocText: var(--bodyFontSize);
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 24px 40px;
    padding: 0;
}

body .section-location .address-holder address,
body .section-location .row-location.row-place {
    display: contents;
}

/* "Ready to Get Started?" already takes the h2 tokens from the parent */
body .section-location .row-place .h4 {
    grid-row: 1 / span 3;
    align-self: end;
    margin: 0;
    padding: 0;
}

/* each contact row: the 18px icon (the Figma icons are these glyphs) centred on the first line,
   16 to the text (the phone 14) */
body .section-location .row-location .row,
body .section-location .row-location.row-tel,
body .section-location .shedule .row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
}

body .section-location .row-location.row-tel {
    gap: 14px;
}

body .section-location .address .address-holder .pin {
    flex: none;
    width: 18px;
    padding: 0;
    font-size: 18px;
    line-height: calc(var(--kfdLocText) * 1.5);
    text-align: center;
    color: var(--green);
}

body .section-location .pin i {
    display: block;
    line-height: inherit;
}

/* Body type (18 / 16), navy; the parent sets its own 16 / 24 on the links and the address text */
body .section-location .address .address-holder .inf {
    padding: 0;
    font-size: var(--kfdLocText);
    line-height: 1.5;
    font-weight: var(--bodyFontWeight);
}

body .section-location .inf a,
body .section-location .inf .place span {
    font-size: inherit;
    line-height: inherit;
}

body .section-location .inf a {
    text-decoration: none;
}

body .section-location .inf a:hover {
    text-decoration: underline;
}

/* the hours run on one line: "Tues-Thurs: 8 am to 5 pm   |    Friday: 8 am to 2 pm" — the Figma
   spacing is 3 spaces before the bar and 4 after (an Area Normal space is 0.263em; the markup's
   own space follows the bar) */
body .section-location .address .shedule dl {
    display: block;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

body .section-location .address .shedule dt,
body .section-location .address .shedule dd {
    display: inline;
    width: auto;
    margin: 0;
    font-weight: inherit;
}

body .section-location .address .shedule dd:not(:last-of-type)::after {
    content: "|";
    margin: 0 0.789em;
}

/* the template's "Contact Us" button (the Theme Settings form) isn't in the mockup (James 2026-09-24) */
body .section-location #footForm {
    display: none;
}

body .section-location .mapWrp {
    flex: none;
    width: 100%;
    padding: 0;
}

/* flush — no shadow; the parent draws it square */
body .section-location #map,
body .widget.section-location #map {
    height: clamp(180px, 19.792vw, 380px);
    aspect-ratio: auto;
    box-shadow: none;
}

/* ===== Associations (Figma Associations Banner 2849:11873, mobile 2849:11819) =====
   partners module, partners_slider on: Splide runs the carousel below 1025 (no dots or arrows —
   the mockup has none either) and destroys itself above, leaving the static row. partners.min.css
   loads after this sheet, so rules lead with body .section-partners. Frame: no top padding (the
   map's 140 / 80 above is the gap), 100 below (mobile 80); five 260 × 80 logos on 56 = a 1524 row
   centred, which shrinks as one row (never wraps) below ~1600. Phones: one logo, centred. */
body .section-partners {
    padding: 0 0 clamp(80px, 5.209vw, 100px);
}

/* moved up under the Diff bar on the homepage (Dr. K, 10/26): the Diff bar has no bottom padding, so the
   gap goes above the logos instead, and News 1's own 140 / 100 top spaces them from what follows */
body .diff + .section-partners {
    padding: clamp(80px, 5.209vw, 100px) 0 0;
}

body .section-partners .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
}

body .section-partners .partners-list {
    width: 100%;
    flex-wrap: nowrap;
    gap: clamp(24px, 2.917vw, 56px);
}

/* each logo takes up to 260 and gives way evenly; the carousel puts the basis back to auto (≤1024)
   so Splide's slide widths count */
body .section-partners .partners-list li {
    flex: 0 1 260px;
    width: auto;
    min-width: 0;
    margin: 0;
}

body .section-partners .partners-list li img {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
}

/* ===== Footer (Figma Desktop/Footer 5235:5567 — interior copy 2988:2274, mobile 2849:11817) =====
   Sitewide. The parent's footer rules are in kindling, which loads before this sheet, nested under
   #footer .footer-holder, so matching them is enough (interior_style's heading margins are bare
   element / class rules). The top edge is the slant: Media #21163 slant_transition_navy.svg (Ali's
   export + preserveAspectRatio="none"), a navy wedge rising to the left, 100 tall (20 on the phone —
   the same slope, so one height), drawn by #footer::before so every page gets it; the navy moves to
   .footer-holder, 1px up under the wedge (the Figma overlap). Frame: 56 top (mobile 80); logo
   374 × 104 (mobile 317 × 88); "Leave a Review" + "Contact Us" in 398 columns on 16, right-aligned;
   headings Overline 14 / 1.5, 0.15em, 32 to their links; links Caption 14 / 1.5, 24 apart; socials in
   32px boxes (Facebook 16) on 24; 56 to the legal bar: a 2px white rule (25%, mobile 15%), 24 to its
   line (the Figma stroke sits inside the padding), copyright left / legal links right, 24 below. */
#footer {
    background-color: transparent;
}

#footer::before {
    content: "";
    display: block;
    height: min(5.2084vw, 100px);
    margin-bottom: -1px;
    background: url("/wp-content/uploads/2026/09/slant_transition_navy.svg") center bottom / 100% 100% no-repeat;
}

#footer .footer-holder {
    padding: 56px 0 0;
    background-color: var(--footerBg);
}

#footer .footer-holder > .container {
    flex-wrap: nowrap;
    align-items: flex-start;
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    padding-bottom: 56px;
}

/* the logo column hugs the logo, at least 56 from the columns; the parent's 90px under it (room for
   the docked Google pill) goes — the pill already clears the logo inside the row */
#footer .footer-holder .foot:first-of-type {
    flex: 0 0 auto;
    width: auto;
    margin-right: 56px;
}

#footer .footer-holder .footer-logo {
    padding-bottom: 0;
}

/* an inline link round the block logo draws its focus ring round empty line boxes; a block that
   hugs the logo puts it round the logo */
#footer .footer-holder .footer-logo a {
    display: block;
    width: fit-content;
}

#footer .footer-holder .footer-logo img {
    width: clamp(317px, 19.479vw, 374px);
    max-width: 100%;
    margin: 0;
}

/* no Info menu here — the empty column would take a quarter of the row */
#footer .footer-holder .infoNav {
    display: none;
}

/* the columns hold 398 until the row runs short, then give way, never past their one-line heading
   and address (> .container: the accordion button inside carries .servNav too) */
#footer .footer-holder > .container > .servNav,
#footer .footer-holder > .container > .loc {
    flex: 0 1 398px;
    width: auto;
}

/* each column: its heading, 32 to the links */
#footer .footer-holder > .container > .servNav,
#footer .footer-holder .fLocation {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* the columns sit right, 16 apart */
#footer .footer-holder > .container > .servNav {
    margin-left: auto;
}

#footer .footer-holder > .container > .loc {
    margin-left: 16px;
}

/* "Leave a Review" is the parent's accordion button, but its links stay open at every width here,
   so it is only a heading: no hand cursor or clicks, and kfd_footer_heading_untab (functions.php)
   takes it out of the Tab order. Trunk footer.php always renders a button (GH #31). */
#footer .footer-holder .mod-btn.accordion {
    display: block;
    width: fit-content;
    padding: 0;
    cursor: default;
    pointer-events: none;
}

#footer .footer-holder .servNav .h3,
#footer .footer-holder .fLocation h3 {
    display: block;
    margin: 0;
    font-family: var(--overlineFont);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.15em;
    white-space: nowrap;
}

#footer .footer-holder .serv-nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* every footer link in Caption type (the parent sets 16 / 24 and 10px of padding) */
#footer .footer-holder ul a,
#footer .footer-holder .fAddress a {
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
}

/* the contact column — address, phone, socials, 24 apart. The template prints an empty
   <p class="practice"> (no location name set), zeroed so it takes no room. The address and phone
   links keep the parent's 24px tap height (WCAG 2.5.8), so the next row starts 21 under them. */
#footer .footer-holder .fLocBox {
    font-size: 14px;
    line-height: 1.5;
}

#footer .footer-holder .fLocBox p {
    margin: 0;
}

#footer .footer-holder .fLocBox .fAddress + p {
    margin-top: 21px;
}

#footer .footer-holder span.tel-footer a {
    text-decoration: none;
}

#footer .footer-holder span.tel-footer a:hover {
    text-decoration: underline;
}

/* the Figma icon boxes: 32 × 32 (Facebook 16 × 32) on 24, each glyph at its Figma size (Yelp keeps
   the parent's 24) */
#footer .footer-holder .social {
    align-items: center;
    gap: 24px;
    margin-top: 21px;
}

#footer .footer-holder .social li {
    display: flex;
}

#footer .footer-holder .social a {
    width: 32px;
    height: 32px;
}

/* Facebook's box is 16 wide: the link keeps the parent's 24px minimum and hands the extra 8 back
   to its gaps */
#footer .footer-holder .social a[href*="facebook."] {
    width: 24px;
    margin: 0 -4px;
}

#footer .footer-holder .social .fa-facebook-f {
    font-size: 20px;
}

#footer .footer-holder .social .fa-instagram {
    font-size: 25px;
}

#footer .footer-holder .social .fa-youtube {
    font-size: 26.5px;
}

#footer .footer-holder .social .fa-google {
    font-size: 23px;
}

/* legal bar: copyright left, links right (the markup has the links first) */
#footer .footer-holder .bottom {
    padding: 22px 0 24px;
    border-top-color: rgba(255, 255, 255, 0.25);
    font-size: 14px;
    line-height: 1.5;
}

#footer .footer-holder .bottom .container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    padding-top: 0;
    overflow: visible;
}

#footer .footer-holder .bottom .bottom-nav {
    white-space: nowrap;
}

#footer .footer-holder .bottom ul a {
    padding: 0;
}

/* 3 Area Normal spaces (0.263em each) either side of each bar — the markup's own space after an
   item is the third on the right */
#footer .footer-holder .bottom .bottom-nav li:not(:last-child)::after {
    margin: 0 0.526em 0 0.789em;
}

/* the Google pill: its link is an empty inline box (the pill inside is position: fixed), so the
   parent's ring never shows — the pill wears it instead, the parent's two tones (a white ring past a
   navy one) so it reads over the light sections and the navy footer alike */
.google-button-wrap:focus-visible {
    outline: none;
    box-shadow: none;
}

.google-button-wrap:focus-visible .google-button-container {
    outline: 2px solid var(--white);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--navy), 0 10px 20px 0 rgba(0, 0, 0, 0.05);
}

/* its "421+ Google Reviews" line inherited the body's 150% as a fixed 27px (24 on phones) round 14px
   type, so the text sat low in the pill — 24 of white above it, 15 under the stars. Line-height 1,
   less Area Normal's 2px above the caps: 16 above / 16 below (the fix Smiles On X shipped; > p
   leaves the "5.0 stars" line alone) */
body .google-button-container .num-reviews-and-stars > p {
    margin: -2px 0 6px;
    line-height: 1;
}

/* ===== Interior hero (Figma Desktop/Interior Hero Banner 3798:1451, mobile 3798:1471) =====
   templates/partial-banner.php on every interior page type; interior_style.min.css loads after this
   sheet, so the rules lead with body. Desktop: the navy copy half — the Figma pattern fill, i.e. the
   --navyStripes tile centred on the half — holds the breadcrumbs 32 from the top and the H1 56 from
   the bottom, on the header gutter (140 left, 146 right); the photo takes the right half (the page's
   banner or the Theme Settings fallback, 960 × 560 = the Figma crop). 560 tall at 1920 (the parent's
   clamp, floor 320). Mobile: the photo band over the navy copy block (≤1024 rules). */
body .promo.bar.bar-title .ban-content {
    width: 50%;
    padding: 32px clamp(32px, 7.604vw, 146px) 56px clamp(32px, 7.292vw, 140px);
    background: var(--navyStripes) 50% 0 / 14.4px 100% repeat-x, var(--navy);
}

body .promo.bar.bar-title .ban-image {
    left: 50%;
}

body .promo.bar.bar-title .tWrap {
    width: 100%;
}

/* H1 token (56 / 40) at the heading weight — the parent sets 600, uppercase, at the H2 size; its
   load-in reveal stays */
body .promo.bar.bar-title .tWrap h1,
body .promo.bar.bar-title .tWrap h2 {
    font-size: var(--h1FontSize);
    line-height: 1.15;
    font-weight: var(--headingFontWeight);
    text-transform: none;
}

/* breadcrumbs: Caption type, 24 either side of each chevron — the Figma chevron (the feat serv CTA's
   images/chevron-right.svg, centred in a 16 box on the text line) as a currentColor mask in place of
   the FA caret; the leading caret stays hidden (parent) */
body .promo.bar.bar-title .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 24px;
    padding: 0;
}

body .promo.bar.bar-title .breadcrumb .fa-caret-right {
    width: 6.718px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("images/chevron-right.svg") center / 6.718px 11.314px no-repeat;
    mask: url("images/chevron-right.svg") center / 6.718px 11.314px no-repeat;
}

body .promo.bar.bar-title .breadcrumb .fa-caret-right::before {
    content: none;
}

body .promo.bar.bar-title .breadcrumb a {
    text-decoration: none;
}

body .promo.bar.bar-title .breadcrumb a:hover {
    text-decoration: underline;
}

/* ===== Interior body (Figma Page Content 2849:11789, mobile 2849:11745) =====
   the page content (.entry.entry-add) on every interior template; interior_style.min.css loads after
   this sheet, so the rules lead with body. Frame: transparent → Tan, 140 / 140 (mobile 80), the
   parent's 1088 column on the header gutter; blocks 80 apart (mobile 56) = the heading's top margin,
   24 to the copy. H2 = the H2 Title (44 / 32, 1.15); body 18 / 16 at 1.5 with a blank line between
   paragraphs; the closing H3 (the content's old h4s — James 2026-09-29 shifted every page up a level)
   = the H3 Subheader, centred with the copy after it; every content image rounded 10 (James
   2026-09-29); side photos with the large Figma shadow, 154 from the text (the mockup's two-column
   block). */
body .main-frame {
    background: linear-gradient(rgba(243, 240, 236, 0), var(--tan)) var(--white);
}

body .main-frame > .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
}

body .main-frame .container #content {
    width: min(100%, 1088px);
    padding: clamp(80px, 7.292vw, 140px) 0;
}

body .entry.entry-add > :first-child {
    margin-top: 0;
}

body .entry.entry-add > :last-child {
    margin-bottom: 0;
}

body .entry.entry-add p,
body .entry.entry-add ul li {
    line-height: 1.5;
}

body .entry.entry-add p {
    margin: 0 0 1.5em;
}

body .entry.entry-add h2 {
    margin: clamp(56px, 4.167vw, 80px) 0 24px;
    font-size: var(--h2TitleFontSize);
    line-height: 1.15;
}

body .entry.entry-add h3 {
    margin: clamp(56px, 4.167vw, 80px) 0 24px;
    font-family: var(--overlineFont);
    font-size: clamp(20px, 1.146vw, 22px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}

body .entry.entry-add h3 ~ p {
    text-align: center;
}

/* every content image — side photos, column photos, gallery thumbnails — 10 all round (James
   2026-09-29; the parent rounds them 40–80 and squares the side photos) */
body .entry.entry-add img {
    border-radius: 10px;
}

body .entry.entry-add img.alignright,
body .entry.entry-add img.alignleft {
    box-shadow: var(--shadyLarge);
}

body .entry.entry-add img.alignright {
    margin: 0 0 40px clamp(40px, 8.021vw, 154px);
}

body .entry.entry-add img.alignleft {
    margin: 0 clamp(40px, 8.021vw, 154px) 40px 0;
}

/* side videos from the old site's content (<div class="col-lg-5 align-right"><div class="iFrameWrap">
   — Restorative, Cosmetic, Invisalign): fgB floated .align-right / .align-left, MatchBox doesn't,
   so they sat on the left with the copy jammed under them (Kristen's QA 2026-10-08; GH #32). They
   float like the side photos, rounded and shadowed the same; the next heading clears them. */
body .entry.entry-add .align-right,
body .entry.entry-add .align-left {
    padding: 0;
}

body .entry.entry-add .align-right {
    float: right;
    margin: 0 0 40px clamp(40px, 4.167vw, 80px);
}

body .entry.entry-add .align-left {
    float: left;
    margin: 0 clamp(40px, 4.167vw, 80px) 40px 0;
}

body .entry.entry-add .align-right .iFrameWrap,
body .entry.entry-add .align-left .iFrameWrap {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: var(--shadyLarge);
}

body .entry.entry-add .align-right ~ h2,
body .entry.entry-add .align-left ~ h2 {
    clear: both;
}

/* Shortcodes Ultimate rows that don't fill the width (Same-Day Crowns: two 1/3 videos) centre
   instead of hugging the left */
body .entry.entry-add .su-row {
    justify-content: center;
}

/* NextGEN galleries (Meet Our Team): the plugin's overflow: hidden cut the thumbnails' focus rings
   (its thumbnails are inline blocks, nothing to contain) */
body .entry.entry-add .ngg-galleryoverview {
    overflow: visible;
}

/* blog cards: an inline link round the block photo drew its focus ring round nothing */
body .entry.entry-add .posts-list .post > a {
    display: block;
}

/* ===== Page offer card ([display_offer id="…"] in page content — Figma Special Offer Promo Card
   2849:11810, mobile 2849:11759) =====
   The parent's shortcode prints the offer's heading (h2) and its content field — the copy, then a
   Book Now link (.bottom-opener: general.js opens the booking popup from it) — in .page-offer, which
   the parent paints as a filled, shadowed box. interior_style.min.css loads after this sheet, so the
   rules lead with body. Placed after a page's intro (New Patients, Dental Implants — James
   2026-09-30). Frame: 811 wide centred (phones: the column), a content block (80 / 56) from the copy
   either side and clear of any float above; a 2px Brown frame on no fill, 64 / 40 / 40 from its outer
   edge (mobile 56 / 32 / 32 — Figma's stroke sits inside, so 62 / 38 / 38 + 2); the title = H3
   Subheader (22 / 20 at 10%), 16 to the copy — Caption 14 (the phone frame: Body 16) on a 699
   measure — and 32 to the button: the Primary CTA (the header's Book Now) at the Figma CTA's 201
   (phones: its label + 32 a side). */
body .entry.entry-add .page-offer {
    clear: both;
    width: 100%;
    max-width: 811px;
    margin: clamp(56px, 4.167vw, 80px) auto;
    padding: clamp(54px, 3.229vw, 62px) clamp(30px, 1.979vw, 38px) clamp(30px, 1.979vw, 38px);
    border: 2px solid var(--brown);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--black);
}

body .entry.entry-add .page-offer h2 {
    margin: 0 0 16px;
    font-family: var(--overlineFont);
    font-size: clamp(20px, 1.146vw, 22px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: inherit;
}

body .entry.entry-add .page-offer p {
    max-width: 699px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.5;
}

/* 16 between paragraphs; the button's own 16 on top makes the 32 above it (inline-block, so that
   margin can't collapse into its paragraph's) */
body .entry.entry-add .page-offer p + p {
    margin-top: 16px;
}

body .entry.entry-add .page-offer .btn {
    display: inline-block;
    min-width: 201px;
    margin: 16px 0 0;
    vertical-align: top;
    padding-right: 16px;
    padding-left: 16px;
    border-color: transparent;
    color: var(--white);
    text-decoration: none;
    transition: background-color .5s linear, border-color .5s linear, color .5s linear;
}

/* ===== Content columns — Shortcodes Ultimate [su_row] / [su_column] in page content =====
   The plugin floats its columns, and wpautop drops a <br> between them plus a stray </p> that opens an
   empty paragraph at the top of the next one, so every second column sat 27 lower than the first (the
   photo pairs on Meet Our Doctor, Our Dental Technology, the Smile Gallery…). A flex row top-aligns
   the columns whatever wpautop leaves, and the gaps move onto the row: the plugin's 4% gutter, and
   its 1.5rem between columns once its ≤767 rule stacks them (its `.su-column + .su-column` margin
   never matched past the <br>, whose blank line had been the gap). Each column's content starts at its
   top again — the plugin's first-child trim, which the interior heading margin out-ranks. */
body .entry.entry-add .su-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem 4%;
}

body .entry.entry-add .su-row > br,
body .entry.entry-add .su-row::after,
body .entry.entry-add .su-row .su-column-inner > p:empty {
    display: none;
}

body .entry.entry-add .su-row .su-column:not(.su-column-centered) {
    margin: 0;
}

/* in a row only: a column outside one (Our Dental Technology has one) keeps its heading's margin */
body .entry.entry-add .su-row .su-column-inner > :first-child,
body .entry.entry-add .su-row .su-column-inner > p:empty:first-child + * {
    margin-top: 0;
}

/* Meet Our Team (page 15472): a photo (¼) beside each name and bio (¾). The name lines up with the
   photo; staff members sit a content block apart (80 / 56, as the body blocks); stacked (the plugin,
   ≤767) the name is 48 under the photo — the row gap (James 2026-09-29). Both columns end flush (the
   plugin's last-child trim). */
body.page-id-15472 .entry.entry-add .su-row {
    row-gap: 48px;
}

body.page-id-15472 .entry.entry-add .su-row ~ .su-row {
    margin-top: clamp(56px, 4.167vw, 80px);
}

body.page-id-15472 .entry.entry-add .su-row .su-column-inner > :last-child {
    margin-bottom: 0;
}

/* ===== Our Services cards (services-page.php; no mockup) =====
   James 2026-09-29: the homepage offer card's frame (2px Brown, transparent, 40 in from the edge,
   mobile 32), the title 16 above the services, centred (the parent's .center), no hover beyond the
   links underlining. The title is the style guide H3 (H3 Subheader 22 / 20), the services the body
   type. Three across on the offers' 16 gap (tablets two, phones one); the block sits a content block
   (80 / 56) under the intro, as does the bottom content under it. */
body .entry.entry-add .servBlock.row.flex.wrap {
    flex-direction: row;
    gap: 16px;
    margin: clamp(56px, 4.167vw, 80px) 0 0;
    padding: 0;
}

body .entry.entry-add .servBlock .servCard {
    flex: 0 0 calc((100% - 32px) / 3);
    width: auto;
    margin: 0;
    padding: clamp(30px, 1.98vw, 38px);
    border: 2px solid var(--brown);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    text-align: center;
}

body .entry.entry-add .servBlock .servCard .h3 {
    display: block;
    margin: 0 0 16px;
    font-family: var(--overlineFont);
    font-size: clamp(20px, 1.146vw, 22px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body .entry.entry-add .servBlock .servCard p {
    margin: 0;
    font-size: var(--bodyFontSize);
    line-height: 1.5;
}

body .entry.entry-add .servBlock .servCard a {
    color: inherit;
    text-decoration: none;
}

body .entry.entry-add .servBlock .servCard a:hover {
    text-decoration: underline;
}

body .entry.entry-add .servBtmCon {
    margin-top: clamp(56px, 4.167vw, 80px);
}

/* ===== FAQ (Figma Desktop/FAQ Block 5244:5771, mobile 5250:8093) =====
   page.php prints it under the content when the page has FAQs; faq.min.css loads after this sheet,
   so the rules lead with body. Navy band (Ali 2026-10-27; it was Dark Green, swapped with the Contact
   Form widget below it), 140 / 140 (mobile 100); the heading 44 / 40, 56 above
   the list (mobile 48); the list 1084 wide, items 28 apart, each over a 2px white 15% rule 24 below
   it (the last has none); the question Area Normal Bold 20 / 18 with the Figma chevron at the right
   (images/chevron-right.svg is the same path) pointing down, up when open; the answer 18 / 16 at 1.5,
   24 under the question and 40 clear of the right edge. The parent's accordion (general.js .active /
   .show and its max-height reveal) stays. */
body section.faq {
    padding: clamp(100px, 7.292vw, 140px) 0;
    background-color: var(--navy);
    color: var(--white);
}

body section.faq .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
}

body section.faq .heading h2 {
    margin: 0 0 clamp(48px, 2.917vw, 56px);
    font-size: clamp(40px, 2.292vw, 44px);
    line-height: 1.15;
    font-weight: var(--headingFontWeight);
    text-align: center;
    color: var(--white);
}

body section.faq .faq-holder {
    width: 100%;
    max-width: 1084px;
    margin: 0 auto;
    padding: 0;
}

/* 22 + the 2px rule = the Figma 24 (its stroke sits inside the padding) */
body section.faq .faq-item {
    margin: 0;
    padding: 0 0 22px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    background-color: transparent;
    box-shadow: none;
}

body section.faq .faq-item + .faq-item {
    margin-top: 28px;
}

body section.faq .faq-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

body section.faq .faq-item .accordion {
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--white);
    letter-spacing: normal;
    text-align: left;
}

body section.faq .faq-item .h4 {
    flex: 1 1 auto;
    font-family: var(--bodyFont);
    font-size: clamp(18px, 1.042vw, 20px);
    line-height: 1.25;
    font-weight: 700;
    color: inherit;
}

/* the chevron box is the Figma 9 × 15.158 turned on its side; its 3px overhang is given back so the
   turned chevron ends on the row's right edge */
body section.faq .faq-item .accordion::after {
    content: "";
    position: static;
    flex: none;
    width: 9px;
    height: 15.158px;
    margin-right: 3.08px;
    color: inherit;
    background-color: currentColor;
    -webkit-mask: url("images/chevron-right.svg") center / 100% 100% no-repeat;
    mask: url("images/chevron-right.svg") center / 100% 100% no-repeat;
    transform: rotate(90deg);
}

body section.faq .faq-item .accordion.active::after {
    transform: rotate(-90deg);
}

body section.faq .faq-item .panel.show {
    padding: 24px 40px 0 0;
}

body section.faq .faq-item .answer p {
    margin: 0;
    font-size: var(--bodyFontSize);
    line-height: 1.5;
    color: var(--white);
}

/* ===== Contact page form (page-templates/contact-page.php; no mockup) =====
   The CF7 "Contact Page Form" in .conForm, the parent's navy band; interior_style.min.css loads after
   this sheet, so the rules lead with body. The submit wears the homepage Virtual Consults "Get
   Started" button (James 2026-09-29) — the style guide's Secondary CTA: white with a 2px white
   border, the navy Overline label 14 / 1.5, 201 wide (16 side padding), 53 tall, Tan on hover with
   the same .5s linear fade. The parent paints it Primary (green, no border) at the 16 / 24 input type. */
/* "Get in Touch" in title case at 300 (Ali's QA 2026-10-08); interior_style uppercases it */
body .conForm .heading h2 {
    font-weight: 300;
    text-transform: none;
}

/* the Contact Form widget (service pages + New Patients) sits on Dark Green so it doesn't run into the
   navy Why Choose Us band under it (Ali 2026-10-27); the Contact page keeps the navy band */
body .conForm.conForm-widget {
    background-color: var(--darkGreen);
}

body .conForm input[type="submit"] {
    min-width: 201px;
    padding-right: 16px;
    padding-left: 16px;
    border: var(--btnBorderWidth) solid var(--white);
    background-color: var(--white);
    color: var(--black);
    font-size: 14px;
    line-height: 1.5;
    transition: background-color .5s linear, border-color .5s linear;
}

body .conForm input[type="submit"]:hover {
    border-color: var(--tan);
    background-color: var(--tan);
}

/* the parent's focus ring takes the text colour (the navy label, the fields' dark text) — lost on the
   navy band — so every control's ring is white here, past the navy inner ring */
body .conForm input:focus-visible,
body .conForm textarea:focus-visible,
body .conForm select:focus-visible {
    outline-color: var(--white);
}

/* ===== Content forms (CF7 forms in the page content: Virtual Smile Consultation #15532, Careers #16096) =====
   Their submit buttons had no theme styling (the browser's grey, black 16 / 24 label, 130 × 56). James
   2026-09-30: the scrolled header's Book Now — Primary: Dark Green, the white Overline label 14 / 1.5,
   201 wide, 53 tall with the 2px border (kindling already gives it the border, padding and the
   Overline face), Brown on hover with the header's .5s linear fade. The Contact page form (.conForm)
   and the Book Now popup sit outside .entry and have their own blocks. */
body .entry.entry-add .wpcf7-form input[type="submit"] {
    min-width: 201px;
    background-color: var(--primaryColor);
    color: var(--white);
    font-size: 14px;
    line-height: 1.5;
    transition: background-color .5s linear, border-color .5s linear, color .5s linear;
}

body .entry.entry-add .wpcf7-form input[type="submit"]:hover {
    background-color: var(--primaryHover);
}

/* ===== Book Now popup (#formPop in footer.php — home and interior; James's QA 2026-09-29) =====
   kindling styles it and loads before this sheet, so its own #formPop selectors win here. The phone
   number in the intro is underlined; "New Patient?" (a Bootstrap legend — floated full width at
   1.5rem) is the body size, on the Yes / No line; the hours Area Normal 16 / 1.5 at 400 (the parent
   bolds the days); the submit = the scrolled header's Book Now — Primary: Dark Green, the white
   Overline label 14 / 1.5, 201 × 53 with the 2px border, Brown on hover with its .5s linear fade (the
   parent's: a black label, no border, a darkening filter); the fields a solid 2px #767676 border (the
   parent's is a 2px inset bevel, the textarea 1px). The placeholders are already #767676 (kindling). */
#formPop .formPop-desc a {
    text-decoration: underline;
}

#formPop .top legend {
    width: auto;
    margin: 0;
    font-size: var(--bodyFontSize);
    line-height: 1.5;
}

/* reboot's `legend + * { clear: left }` puts the radios under the legend */
#formPop .top legend + p {
    clear: none;
}

/* "Contact Us" and "Location Information" in Area Extended caps at 700 (Ali's QA 2026-10-08) */
#formPop .contactHead,
#formPop .formPop-info-head {
    font-family: var(--overlineFont);
    font-weight: 700;
    text-transform: uppercase;
}

#formPop .formPop-info dt,
#formPop .formPop-info dd {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}

#formPop .formPop-form form input[type="submit"] {
    min-width: 201px;
    border: var(--btnBorderWidth) solid transparent;
    color: var(--white);
    font-size: 14px;
    line-height: 1.5;
    transition: background-color .5s linear, border-color .5s linear, color .5s linear;
}

#formPop .formPop-form form input[type="submit"]:hover {
    background-color: var(--primaryHover);
    filter: none;
}

#formPop .formPop-form form input[type="text"],
#formPop .formPop-form form input[type="email"],
#formPop .formPop-form form input[type="tel"],
#formPop .formPop-form form input[type="number"],
#formPop .formPop-form form textarea {
    border: 2px solid #767676;
}

@media (max-width: 1024px) {
    /* ---- Keyboard focus: the fixed bar is 48 here. The menu drawer (MmenuLight) keeps its links
       focusable while it's closed — ~40 invisible Tab stops at the end of every page — so the menu
       is hidden from Tab until the drawer opens, and hides again once it has slid shut (.3s). Keyed
       on the served <body>, so RUCSS keeps it. ---- */
    html {
        scroll-padding-top: 48px;
    }

    #header #nav > li.gt-nav-lang {
        display: flex;
    }

    body:not(.mm-ocd-opened) #mainNav {
        visibility: hidden;
        transition: visibility 0s .3s;
    }

    /* ---- Mobile header (Figma Mobile/Nav Bar 2849:11859 + Mobile/Header 2912:1610) ---- */
    body #header,
    body #header:hover {
        padding: 50px 0 0;
        border-bottom: 0;
        box-shadow: none;
    }

    #header .header-holder {
        width: 100%;
        height: 48px;
        background-color: var(--white);
        box-shadow: var(--shadySmall);
    }

    #header .menu-opener {
        top: 2px;
        right: 22px;
    }

    #header .menu-opener::before,
    #header .menu-opener::after {
        left: 10px;
        width: 24px;
        height: 2px;
        border-radius: 0;
        background: var(--black);
    }

    /* no #header here: the parent's open-state X (body.mm-ocd-opened .menu-opener::before) must out-rank these */
    .menu-opener::before {
        top: 16px;
    }

    .menu-opener::after {
        top: 26px;
    }

    .mobile-show.moreInfo {
        top: 8px;
        left: 32px;
    }

    /* the colour fade only — the parent's `transition: all` fades the focus ring in too */
    .mobile-show.moreInfo a {
        width: 32px;
        height: 32px;
        padding: 0;
        font-size: 18px;
        transition: background-color .5s linear, border-color .5s linear, color .5s linear;
    }

    /* mockup draws the phone-alt glyph (same as the desktop contact row), parent markup is fa-phone */
    .mobile-show.moreInfo .fa-phone::before {
        content: "\f879";
    }

    #header .mobHd {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 48px;
        width: 100%;
        padding: 80px 32px;
    }

    #header .mob-logo-section {
        width: 100%;
        max-width: 317px;
        margin: 0;
        padding: 0;
    }

    #header #mobLogo img {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    /* an inline link round the block logo drew its focus ring round nothing */
    #header #mobLogo a {
        display: block;
    }

    /* Pay Online + Book Now share one row (James); they stack only on the narrowest phones. On scroll
       the parent re-pins Book Now into the bar (no-rucss), so the compact bar size is the base and the
       in-row size is keyed on :not(.scrolled). The block keeps its height so nothing jumps.
       z-index auto: the parent's 95 still applies to a static FLEX item and lifted Pay Online over the bar. */
    #header .mobHd .btn-block.mobile-show {
        position: static;
        z-index: auto;
        display: flex;
        flex-wrap: wrap;
        row-gap: 16px;
        width: 100%;
        max-width: 370px;
        min-height: 53px;
        transform: none;
    }

    #header .mobHd .btn-list,
    #header .mobHd .opener-form {
        flex: 1 1 140px;
    }

    #header .mobHd .btn-list {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #header .mobHd .btn-list li {
        flex: 1 1 auto;
    }

    #header .mobHd .btn-list .btn {
        display: block;
        width: 100%;
        padding: 14px 8px;
        border-color: var(--darkGreen);
        background-color: transparent;
        color: var(--black);
    }

    #header .mobHd .btn-list .btn:hover {
        background-color: color-mix(in srgb, var(--darkGreen) 25%, transparent);
    }

    #header .mobHd .opener-form .btn {
        top: 24px;
        padding: 0 16px;
        line-height: 28px;
        transition: none;
    }

    body:not(.scrolled) #header .mobHd .opener-form .btn {
        width: 100%;
        padding: 14px 8px;
        line-height: 1.5;
    }

    /* ---- Hero: the photo band only (mobile mockup has no heading or badge; the parent already
       drops the scrim and badge here). The video is the parent's Theme Settings Mobile Video (Dr. K,
       10/26). ---- */
    body.home .promo {
        height: 61.069vw;
    }

    body.home .promo h2.banH {
        display: none;
    }

    /* ---- Differentiator + the interior widget: one column, 48 between blocks (mobile frames
       2849:11858 / 2849:11757); the heading's clamp already lands on 48 here. The parent stacks the
       section's row but keeps its ~42px desktop gap; the widget's row it leaves across — wider than
       the screen at 769–1024 — until interior_style (loads after this sheet, hence body) wraps it
       at ≤768. ---- */
    .diff .row.flex,
    body .widget.widget-diff .row.flex {
        flex-direction: column;
        align-items: center;
        row-gap: 48px;
    }

    .diff .diffBox,
    .widget.widget-diff .diffBox {
        width: 100%;
        max-width: 398px;
    }

    /* ---- News blocks: full-bleed photo band over a copy band, top/bottom rules only (mobile frames
       4002:2302 / 5244:6975). flex:none because a column would read the desktop basis as a height. ---- */
    #news1 .container,
    #news2 .container,
    #meet-doctor .container {
        width: 100%;
        flex-direction: column;
    }

    body #news1 .container > div,
    body #news2 .container > div,
    body #meet-doctor .container > div {
        flex: none;
        width: 100%;
        aspect-ratio: auto;
        border-width: 2px 0;
    }

    /* photo and copy hold to 736 (the desktop photo's native width) and centre, so tablets don't
       upscale it and the copy stays flush with it; phones keep the frame's 32 */
    body #news1 .container > .image,
    body #news2 .container > .image,
    body #meet-doctor .container > .image {
        margin-bottom: -2px;
        padding-right: max(32px, calc((100% - 736px) / 2));
        padding-left: max(32px, calc((100% - 736px) / 2));
    }

    /* the phone frame's photo is 329 × 326 */
    #news1 .image img,
    #news2 .image img,
    #meet-doctor .image img {
        aspect-ratio: 329 / 326;
    }

    /* margin 0 also drops the desktop overlap (News 1 right, News 2 left) */
    body #news1 .container > .text,
    body #news2 .container > .text,
    body #meet-doctor .container > .text {
        margin: 0;
        padding-right: max(32px, calc((100% - 736px) / 2));
        padding-left: max(32px, calc((100% - 736px) / 2));
    }

    #news1 .text h2,
    #news2 .text h2,
    #meet-doctor .text h2 {
        gap: 120px;
    }

    /* ---- Insurance & Financing: no photo (the phone frame has none, and a hidden pseudo never
       fetches it), so no overhang room and the copy takes the full 810 again ---- */
    #insurance-financing {
        --kfdInsOut: 0px;
    }

    #insurance-financing .container > div {
        width: 100%;
    }

    #insurance-financing::after {
        display: none;
    }

    /* ---- Reviews: no photo (the phone frame has none, and a hidden pseudo never fetches it), so no
       overhang room; the quote column sits on the phone frame's 32px gutters ---- */
    body .reviews {
        --kfdRevOut: 0px;
    }

    body .reviews .testimony {
        width: min(810px, calc(100% - 64px));
    }

    body .reviews .testimony::after {
        display: none;
    }

    /* ---- Special Offers: the carousel runs full bleed so the neighbouring cards peek in at the
       edges; the heading keeps the phone frame's 32 gutter. The track clips again, so the cards
       drop their shadow (the phone frame has none). ---- */
    body .offers .container {
        width: 100%;
    }

    body .offers .heading {
        padding: 0 32px;
    }

    body .offers .splide__track {
        overflow: hidden;
    }

    /* Splide sizes each slide inline; that only counts with the flex-basis back at auto */
    body .offers .offers-list li {
        flex: 0 0 auto;
    }

    body .offers .box-holder {
        box-shadow: none;
    }

    /* the dots' focus ring: Splide's light blue → navy, clear of the dot so a navy dot still reads
       (.splide__pagination out-ranks Splide's `.splide.is-focus-in … :focus`) */
    body .offers .splide__pagination .splide__pagination__page:focus-visible {
        outline: 2px solid var(--navy);
        outline-offset: 2px;
        box-shadow: none;
    }

    /* the Special Offers page has no carousel: two cards a row */
    body.page-template-special-offers .main-frame .offers-list > li {
        flex-basis: calc((100% - 16px) / 2);
    }

    /* ---- Map: the copy stacks — the heading, 32 to the contact rows, 24 between them (mobile frame
       2849:11818) ---- */
    body .section-location .address .address-holder {
        grid-template-columns: minmax(0, 1fr);
    }

    body .section-location .row-place .h4 {
        grid-row: auto;
        margin-bottom: 8px;
    }

    /* ---- Associations: the carousel runs full bleed, so only the centred logo shows (the
       neighbours sit past the edges) ---- */
    body .section-partners .container {
        width: 100%;
    }

    body .section-partners .partners-list li {
        flex: 0 0 auto;
    }

    /* ---- Footer (mobile frame 2849:11817): one centred column — logo, 48, address / phone /
       socials (no "Contact Us" heading), 48, "Leave a Review" over its links on one line; 80 above,
       56 to the legal bar, where the copyright and two lines of links stack 16 apart. The Leave a
       Review links stay open (James 2026-09-29): the parent folds them into an accordion here. ---- */
    #footer .footer-holder {
        padding-top: 80px;
    }

    #footer .footer-holder > .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 48px;
        padding-bottom: 56px;
    }

    #footer .footer-holder .foot:first-of-type {
        margin: 0;
    }

    #footer .footer-holder .footer-logo img {
        width: 317px;
    }

    /* flex: none — the column would read the 398 basis as a height */
    #footer .footer-holder > .container > .servNav,
    #footer .footer-holder > .container > .loc {
        flex: none;
    }

    /* the contact block comes first, then Leave a Review, 24 from its heading to the links */
    #footer .footer-holder > .container > .servNav {
        order: 1;
        align-items: center;
        gap: 24px;
        margin-left: 0;
        padding-left: 0;
    }

    #footer .footer-holder > .container > .loc {
        margin-left: 0;
    }

    #footer .footer-holder .fLocation h3 {
        display: none;
    }

    #footer .footer-holder .mod-btn.accordion::after {
        content: none;
    }

    #footer .footer-holder .panel {
        display: block;
    }

    /* "Google | Facebook | Yelp", 24 either side of each bar */
    #footer .footer-holder .serv-nav {
        flex-direction: row;
    }

    #footer .footer-holder .serv-nav li {
        display: flex;
        gap: 24px;
    }

    #footer .footer-holder .serv-nav li:not(:last-child)::after {
        content: "|";
        color: var(--white);
    }

    /* the address may wrap on the narrowest phones */
    #footer .footer-holder .fAddress a {
        white-space: normal;
    }

    #footer .footer-holder .bottom {
        border-top-color: rgba(255, 255, 255, 0.15);
    }

    #footer .footer-holder .bottom .container {
        flex-direction: column-reverse;
        align-items: center;
        gap: 16px;
        text-align: center;
    }

    #footer .footer-holder .copyright {
        margin-right: 0;
    }

    /* two lines of links, 16 apart: the second bar becomes a line break, and the line height carries
       the 16 (its half-leading pulled back by the margins) */
    #footer .footer-holder .bottom .bottom-nav {
        margin: -8px 0;
        line-height: calc(1.5em + 16px);
        white-space: normal;
    }

    #footer .footer-holder .bottom .bottom-nav li,
    #footer .footer-holder .bottom ul a {
        display: inline;
    }

    #footer .footer-holder .bottom .bottom-nav li:nth-child(2)::after {
        content: "\A";
        margin: 0;
        white-space: pre;
    }

    /* the Google pill: the parent lifts it 10 above the legal bar once the page bottom is reached,
       which parks it on the review links here. It rests over the divider instead, centred in the 80
       band between the links and the copyright (James 2026-09-29; the pill is 62 tall here since its
       line-height fix). Static, so RUCSS keeps it: the margin moves both states down 25 and the
       resting bottom makes up for it. */
    .google-button-container {
        bottom: 49px;
        margin-bottom: -25px;
    }

    /* ---- Interior hero (mobile frame 3798:1471): the photo band on top (240 at 393 — the homepage
       hero's ratio), the navy copy block under it, 80 / 32 / 32, the H1 at 40 (the token), no
       breadcrumbs. The parent lays the copy over the photo here. ---- */
    body .promo.bar.bar-title .row.flex {
        display: flex;
        flex-direction: column-reverse;
        min-height: 0;
    }

    body .promo.bar.bar-title .ban-image {
        position: relative;
        left: 0;
        height: 61.069vw;
    }

    body .promo.bar.bar-title .ban-content {
        width: 100%;
        min-height: 0;
        padding: 80px 32px 32px;
    }

    body .promo.bar.bar-title .breadcrumbs-block {
        display: none;
    }

    /* ---- Interior body: side photos stack full width (the parent) with the small Figma shadow ---- */
    body .entry.entry-add img.alignright,
    body .entry.entry-add img.alignleft {
        margin: 0 0 24px;
        box-shadow: var(--shadySmall);
    }

    /* side videos stack full width too */
    body .entry.entry-add .align-right,
    body .entry.entry-add .align-left {
        float: none;
        width: 100%;
        margin: 0 0 24px;
    }

    body .entry.entry-add .align-right .iFrameWrap,
    body .entry.entry-add .align-left .iFrameWrap {
        box-shadow: var(--shadySmall);
    }

    /* ---- Our Services cards: two across (the parent stacks them at 90% with a rounded bottom rule) ---- */
    body .entry.entry-add .servBlock .servCard {
        flex-basis: calc((100% - 16px) / 2);
    }

    /* ---- Book Now popup: the close X at the top right (the parent means to — its ≤1024 rule sits above
       its base rule, whose left: 14px wins); one scroller the height of the visible screen that keeps
       its scroll to itself — the parent nests the grid as a second scroller and lets the scroll run on
       into the page behind (Glendale, Smiles On X), and its 100vh sits under a phone's toolbar ---- */
    #formPop .formPop-close {
        left: auto;
        right: 14px;
    }

    #formPop.wrap-form-question-fixed {
        height: 100dvh;
        overscroll-behavior: contain;
    }

    #formPop .formPop-grid {
        max-height: none;
        overflow-y: visible;
    }

    /* the language widget (#gt_float_wrapper) is fixed 115–164 from the bottom and doesn't scale, so it
       sat on the hours at the end of the scroll (Ali's QA 2026-10-08); a hard 188 under the hours (its
       top + 24) scrolls them clear — px, not a clamp, because the widget is fixed-size */
    body #formPop .formPop-info {
        --kfdGtClear: 188px;
        padding-bottom: var(--kfdGtClear);
    }
}

@media (max-width: 567px) {
    :root {
        --h3FontSize: 28px;
        --h4FontSize: 24px;
    }

    /* mobile H3 Subheader tracks 10%. The span (Theme Settings heading) breaks it "DENTIST / IN
       SPARKS, NV" like the mockup (section and widget); left to wrap at 393 it strands "NV" on line 2. */
    .diff .heading h1,
    .widget.widget-diff .heading h2 {
        letter-spacing: 0.1em;
    }

    .diff .heading h1 .line-2,
    .widget.widget-diff .heading h2 .line-2 {
        display: block;
    }

    /* ---- Featured Services: the cards stack full width, 390 tall on 4px white gaps (mobile frame
       5244:6976). No hover on phones, so no Learn More. ---- */
    body .feat-services {
        background-color: var(--white);
    }

    body .feat-services .row.flex {
        display: flex;
        flex-direction: column;
        gap: 4px;
        height: auto;
    }

    body .feat-services .featLink {
        position: relative;
        flex: none;
        width: 100%;
        height: 390px;
        transform: none;
    }

    body .feat-services .featContent {
        padding: 0 32px 38px;
    }

    body .feat-services .featContent .h4 {
        letter-spacing: 0.1em;
    }

    body .feat-services .featLink .featContent .fade-in {
        display: none;
    }

    /* ---- Phone body copy at 16 (Ali's QA 2026-10-08; the frames had 18 / 14): Virtual Consults,
       Insurance & Financing, the review quotes and the offer cards ---- */
    #virtual-consults p,
    #insurance-financing p {
        font-size: 16px;
    }

    /* ---- Reviews: 16 from the quote to the name (mobile frame 2849:11831) ---- */
    body .reviews .testimony .rQuote > p {
        margin-bottom: 16px;
        font-size: 16px;
    }

    /* ---- Special Offers: the mobile H3 Subheader tracks 10% (mobile frame 2849:11822); the Special
       Offers page stacks its cards ---- */
    body .offers .description .h4,
    body.page-template-special-offers .main-frame .offers-list .description .h4 {
        letter-spacing: 0.1em;
    }

    body.page-template-special-offers .main-frame .offers-list > li {
        flex-basis: 100%;
    }

    body .offers .offers-info p,
    body.page-template-special-offers .main-frame .offers-list .offers-info p {
        font-size: 16px;
    }

    /* ---- Map: the address and phone at 16 like the hours (Ali's QA 2026-10-08; the phone frame had
       14), the phone icon 16 from its number, and the hours in two columns 8 apart ---- */
    body .section-location .row-location .row,
    body .section-location .row-location.row-tel {
        --kfdLocText: 16px;
        gap: 16px;
    }

    /* the frame's address icon sits 4 down in a 22px box (the row is 22 tall, not the text's 21) */
    body .section-location .row-place .row .pin {
        padding-top: 4px;
        line-height: 18px;
    }

    body .section-location .address .shedule dl {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 8px;
    }

    body .section-location .address .shedule dt,
    body .section-location .address .shedule dd {
        display: block;
    }

    body .section-location .address .shedule dd:not(:last-of-type)::after {
        content: none;
    }

    /* ---- Footer: the template copyright breaks after the practice name — "© 2026 Kanellis Family
       Dentistry." / "All rights reserved." (James 2026-09-29) ---- */
    #footer .footer-holder .copyright {
        max-width: 16.9em;
    }

    /* ---- Interior body: the mobile H3 Subheader tracks 10% (content, the Our Services card titles and
       the page offer card); the cards stack one to a row. The offer card's copy is Body 16 here and
       its button hugs the label (32 a side, as the phone frame). ---- */
    body .entry.entry-add h3,
    body .entry.entry-add .servBlock .servCard .h3,
    body .entry.entry-add .page-offer h2 {
        letter-spacing: 0.1em;
    }

    body .entry.entry-add .page-offer p {
        font-size: 16px;
    }

    body .entry.entry-add .page-offer .btn {
        min-width: 0;
        padding-right: 30px;
        padding-left: 30px;
    }

    body .entry.entry-add .servBlock .servCard {
        flex-basis: 100%;
    }
}

@media (min-width: 1025px) and (hover: hover) {
    /* ---- Featured Services hover (Figma states 2391:422): every card takes the narrow width and
       slides left, the hovered one takes the wide width, and the cards after it move right by the
       difference. The photo turns colour and Learn More fades in with it; hovering Learn More nudges
       its chevron 8px (CTA Button Movement, 0.3s ease-in). Touch screens never match this block, so
       a tap goes straight through to the page. ---- */
    body .feat-services .row.flex:hover > .featLink {
        --kfdCardW: var(--kfdS);
        transform: translateX(calc(var(--kfdI) * (var(--kfdS) + var(--kfdGap))));
    }

    body .feat-services .row.flex > .featLink:hover {
        --kfdCardW: var(--kfdH);
    }

    body .feat-services .row.flex > .featLink:hover ~ .featLink {
        transform: translateX(calc(var(--kfdI) * (var(--kfdS) + var(--kfdGap)) + var(--kfdH) - var(--kfdS)));
    }

    body .feat-services .featLink:hover .featImg img {
        filter: grayscale(0);
    }

    body .feat-services .featLink:hover .featContent .fade-in {
        opacity: 1;
    }

    body .feat-services .featLink .featContent .fade-in:hover .fas {
        transform: translateX(8px);
    }

    /* ---- Special Offers hover (Figma states 2834:954): the card lifts 24 into the room above the
       row, fills white and nudges its arrow 8 (Smart Animate 0.3s ease-in). ---- */
    body .offers .offers-list li:hover,
    body.page-template-special-offers .main-frame .offers-list li:hover {
        transform: translateY(-24px);
    }

    body .offers .offers-list li:hover .box-holder,
    body.page-template-special-offers .main-frame .offers-list li:hover .box-holder {
        background-color: var(--white);
        box-shadow: var(--kfdOfferShadow) rgba(0, 0, 0, 0.05);
        transition: background-color .3s ease-in, box-shadow .3s ease-in;
    }

    body .offers .offers-list li:hover .specWrap a::before,
    body.page-template-special-offers .main-frame .offers-list li:hover .specWrap a::before {
        transform: translateX(8px);
    }

    /* the Special Offers page stacks rows: each row gets the lift's 24 of room (the homepage row
       has it in its heading gap), so a lifted card stays 16 clear of the card above (James
       2026-09-30 — on the 16 gap it rode 8 over it) */
    body.page-template-special-offers .main-frame .offers-list {
        row-gap: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* the nav chevrons still turn, just without the motion */
    #header #nav > li.menu-item-has-children::after {
        transition: none;
    }

    body.home .promo h2.banH,
    body.home .promo h2.banH .banH-sub,
    body.home .promo .hero-badge {
        animation: none;
    }

    /* no motion: the news copy shows straight away instead of waiting for the reveal */
    #news1 .text.slide-in:not(.active) h2,
    #news1 .text.slide-in:not(.active) p,
    #news2 .text.slide-in:not(.active) h2,
    #news2 .text.slide-in:not(.active) p,
    #meet-doctor .text.slide-in:not(.active) h2,
    #meet-doctor .text.slide-in:not(.active) p {
        color: inherit;
        transform: none;
    }

    #news1 .text.slide-in:not(.active) h2 small,
    #news1 .text.slide-in:not(.active) h2 small::after,
    #news2 .text.slide-in:not(.active) h2 small,
    #news2 .text.slide-in:not(.active) h2 small::after,
    #meet-doctor .text.slide-in:not(.active) h2 small,
    #meet-doctor .text.slide-in:not(.active) h2 small::after {
        opacity: 1;
        transform: none;
    }

    /* the reviews photo is simply in place once the scroller mounts, the insurance photo once its
       band scrolls in */
    body .reviews .testimony:not(.is-initialized)::after,
    #insurance-financing:not(.active)::after {
        transform: none;
    }

    /* the feature cards still resize and turn colour on hover, just without the motion */
    body .feat-services .featLink,
    body .feat-services .featImg img,
    body .feat-services .featLink .featContent .fade-in,
    body .feat-services .featLink .featContent .fade-in .fas {
        transition: none;
    }

    /* the offer cards still lift and fill on hover, just without the motion */
    body .offers .offers-list li,
    body .offers .offers-list li:hover,
    body .offers .box-holder,
    body .offers .offers-list li:hover .box-holder,
    body .offers .specWrap a::before,
    body.page-template-special-offers .main-frame .offers-list > li,
    body.page-template-special-offers .main-frame .offers-list li:hover,
    body.page-template-special-offers .main-frame .offers-list .box-holder,
    body.page-template-special-offers .main-frame .offers-list li:hover .box-holder,
    body.page-template-special-offers .main-frame .offers-list .specWrap a::before {
        transition: none;
    }
}