/*
Theme Name: fgMatchBox Child — Park Ridge Smile Center
Template: fgmatchbox
Author: Firegang Dental Marketing
Description: Park Ridge Smile Center brand layer (Tier-1, runtime token overrides). No build.
Version: 0.2
*/

/* MMFF fallbacks — kill font-swap CLS; overrides fonttools-computed vs Arial/Georgia. */
@font-face {
    font-family: 'Plus Jakarta Sans Fallback';
    src: local('Arial');
    size-adjust: 107.26%;
    ascent-override: 96.78%;
    descent-override: 20.70%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Gilda Display Fallback';
    src: local('Georgia');
    size-adjust: 102.06%;
    ascent-override: 87.40%;
    descent-override: 27.92%;
    line-gap-override: 0%;
}

:root {
    /* Colors (Figma). UI primary = deep green; logo purple is a soft accent. */
    --primaryColor: #02473D;
    --primaryHover: #036253;
    --secondaryColor: #AEAEE4;
    --secondaryHover: #9B9BDB;
    --black: #0A0D10;
    --footerBg: #0A0D10;

    /* Fonts (Google via web_font_url): Gilda Display headings, Plus Jakarta Sans body. */
    --headingFont: 'Gilda Display', 'Gilda Display Fallback', Georgia, serif;
    --bodyFont: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', Arial, sans-serif;
    --headingFontWeight: 400;

    /* Type scale — cap = Figma desktop; floor provisional (confirm vs Figma mobile). */
    --dispFontSize: clamp(40px, 4.375vw, 84px);
    --h2FontSize:   clamp(32px, 2.708vw, 52px);
    --h3FontSize:   clamp(24px, 1.875vw, 36px);
    --h4FontSize:   clamp(20px, 1.25vw, 24px);
    --bodyFontSize: clamp(16px, 0.938vw, 18px);

    /* Line heights (Figma). */
    --dispLineHeight: 100%;
    --h2LineHeight: 115%;
    --h3LineHeight: 125%;
    --h4LineHeight: 125%;
    --bodyLineHeight: 150%;

    /* Card shadow = Figma "Drop shadow (medium)". */
    --shadyMid: 0 40px 50px rgba(0,0,0,0.05), 0 20px 30px rgba(0,0,0,0.10);

    /* Figma CTA Button component is square in every instance (Book Now / Watch Video / Contact Us). */
    --btnBorderRadius: 0;

    --focusColor: #E64A19;
}

/* Buttons — Figma CTA component: PJS SemiBold 16 / 2.4px tracking / 16x32 padding. */
.btn {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.4px;
    padding: 16px 32px;
}

/* Keyboard focus indicator: orange/red ring instead of the browser-default blue (HP-D40). */
:focus-visible {
    outline: 2px solid var(--focusColor);
    outline-offset: 2px;
}
/* Kindling's .btn.btn-primary transition:all animates the ring in — keep bg/color, make the outline instant (HP-D40). */
.btn.btn-primary {
    transition: all .5s linear, outline 0s;
}

/* Content float utilities (align-left/right on in-content embeds) + responsive iFrameWrap —
   standard in every fgB-child (ref: FG-ronaldfuhrmanndds); never made it into Matchbox. */
.align-left {
    float: left;
    margin-right: 20px;
}
.align-right {
    float: right;
    margin-left: 20px;
}
.iFrameWrap iframe {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}


/* ===== HEADER (Figma Desktop/Nav Bar 2928:1917) ===== */

/* Bar width — ~140px side gaps at 1920+, scaling below (Figma). Kindling ships 90% capped
   at 1500 + min-width 1636 @1920+, which drifts the gaps (163 @1962, 150 @1800). */
#header .header-holder {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    min-width: 0;
}
/* Book Now flush with the bar's right edge — kindling pads its wrapper 12px, so the button
   sat 12px inside while the logo (left) and contact row (right) hit the edge. */
#header .navBtns .btn-block {
    padding-right: 0;
}

/* Bar rhythm — Figma 2928:1917: 24 above the contacts row, 24 between it and the nav row
   (the 56px Book Now sets the row box; link text centers against it), 24 below. Kindling
   ships 10/20/10 + a 10px-padded conBlock + 70px-tall links that out-tower the button. */
#header {
    padding: 24px 0;
}
#header .locNavBtns {
    gap: 24px;
}

/* Contact icons = purple (secondary), not green. */
#header .headAdd i,
#header .phoneBlock i,
#header .conBlock i {
    color: var(--secondaryColor);
}

/* Vertically center the icon with its address / phone text; strip kindling's vertical
   padding + 27px line-height so the contacts row sits text-tight (Figma rhythm, HP-D10). */
#header .conBlock,
#header .headAdd,
#header .phoneBlock {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.5;
}
/* Phone flush with the bar's right edge — kindling pads it 12px, misaligning it with the
   Book Now button's right edge below. */
#header .phoneBlock {
    padding-right: 0;
}
/* Contact links — Figma: PJS Regular 16/1.5 (weight already 400). Links only: the
   containers stay at 18px so the icons keep their Figma size. */
#header .headAdd a,
#header .phoneBlock a {
    font-size: 16px;
}

/* Nav links — PJS SemiBold 16 / 2.4px tracking (white + uppercase already). */
#header #mainNav a,
#header #nav a {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: clamp(0.5px, 0.25vw - 2.4px, 2.4px);
}
/* Nav link spacing — fluid (16px gap / 10px li pad at 1920) so the row still fits at the
   1025 desktop floor without shrinking the 16px font. */
#header #nav {
    gap: clamp(6px, 1.1vw - 5.1px, 16px);
}
#header #nav > li {
    padding: 0 clamp(5px, 0.52vw, 10px);
}
/* Top-level links only (sub-menu links keep their own padding): 12px keeps a hover pad
   while the 56px Book Now defines the row box (Figma rhythm, HP-D10). */
#header #nav > li > a {
    padding-top: 12px;
    padding-bottom: 12px;
}
#header #nav > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 2px;
    background: var(--primaryColor);
    transform: scaleX(0);
    transition: transform .25s ease;
}
#header #mainNav a:hover::after,
#header #nav li a:hover::after {
    transform: scaleX(1);
}

/* Sub-nav dropdowns — size to content (no wrapping) + left-aligned links. */
#header #nav .sub-menu {
    width: max-content;
    min-width: 240px;
    max-width: 360px;
    text-align: left;
}
#header #nav .sub-menu li a {
    text-align: left;
    white-space: nowrap;
    font-weight: 400;
    letter-spacing: 0;
}
#header #nav .sub-menu li a:hover {
    text-decoration: underline;
}
/* Dropdown current/selected item → black (parent leaves sub-menu current items on purple --secondaryColor; Int-D42). */
#header #nav .sub-menu > li.current-menu-item > a {
    color: var(--black);
}

/* BOOK NOW — square, uppercase SemiBold (Figma CTA). Shape/type universal; green base. */
#header .booking-opener,
#header .booking-blank {
    border-radius: 0;
    padding: 16px clamp(20px, 1.667vw, 32px);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: clamp(0.5px, 0.25vw - 2.4px, 2.4px);
    background-color: var(--primaryColor);
    color: var(--white);
}
/* Homepage over the hero: white button, black text. */
body.home #header .booking-opener,
body.home #header .booking-blank {
    background-color: var(--white);
    color: var(--black);
}
/* ...green again once the homepage header goes solid (scroll/hover) — rule lives in
   no-rucss-child.css (keyed on the JS-added .scrolled class). */
/* Button hover → black in every header state; home selectors tie the header:hover green
   above and win by order. */
#header .booking-opener:hover,
#header .booking-blank:hover,
body.home #header .booking-opener:hover,
body.home #header .booking-blank:hover {
    background-color: var(--black);
    color: var(--white);
}
/* Wrapper's overflow:hidden crops the button's focus ring (no fill pseudo here) — unclip (HP-D40). */
#header .opener-form {
    overflow: visible;
}

/* Logo to Figma height (100px @1920, fluid below — the img is ~3.2:1, so a fixed height
   renders 320px wide and overruns the nav at mid widths), vertically centered in the slot.
   (Centering is safe here — single logo, #logo static; the parent pins top:0
   because duoLogo headers break on top:50%.) */
#header .logo-block .sLogo {
    height: clamp(56px, 5.208vw, 100px);
}
#header #logo img#mLogo {
    top: 50%;
    transform: translateY(-50%);
}

/* Homepage: white logo over the hero; reverts to color once the header goes solid. */
#header #mLogo {
    transition: filter .3s ease;
}
body.home #header #mLogo {
    filter: saturate(0) brightness(10);
}
/* Solid state (scrolled/hover) reverts the filter — rule lives in no-rucss-child.css
   (keyed on the JS-added .scrolled class). */

/* Interior pages = the homepage header's solid (scrolled/hover) state. */
body:not(.home) #header {
    background-color: var(--white);
    color: var(--black);
    border-bottom: none;
    box-shadow: var(--shadyMid);
}

/* ===== HOMEPAGE ===== */

/* Hero — static_promo_banner video variant. Figma 2849:11908: full-bleed video,
   bottom-left white Gilda headline (sentence case), subtle bottom gradient, no CTA. */
#promoBanner {
    height: min(48.96vw, 940px);
}

/* Poster darkened to match the video (same .45) so the white nav/logo read from first paint;
   the video only loads on desktop, so scope the poster filter the same way. */
@media (min-width: 1025px) {
    #promoBanner .promoBg img {
        filter: brightness(.45);
    }
}

#promoBanner::before {
    background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,0) 60%);
}
#promoBanner .promo-holder .container {
    align-items: end;
}
#promoBanner .slide_content {
    padding-bottom: clamp(40px, 5.2vw, 100px);
    width: 57%;
}
#promoBanner h2.banH {
    text-transform: none;
    letter-spacing: 0;
    -webkit-text-stroke: 0;
    text-align: left;
}
#promoBanner .btn-block {
    display: none;
}
/* Darken the video so the white logo / nav / headline read over any frame — .45 =
   Ali's 55% overlay equivalent (HP-D14; was .65; gradient unchanged). */
#vidBanner {
    filter: brightness(.45);
}

/* Quote Block — freeform module (Figma 5222:2818). Bg = WebP-Express .webp
   (gradient baked into the export). Right copy column, purple accent bar. */
.freeForm.quoteBlock {
    padding: 0;
    display: flex;
    align-items: center;
    min-height: min(37.5vw, 720px);
    color: var(--white);
    background: url('/wp-content/uploads/2026/07/quote_block_bg_desktop.jpg.webp') center / cover no-repeat;
}
.freeForm.quoteBlock .qb-copy {
    display: flex;
    flex-direction: column;
    gap: 56px;
    max-width: 536px;
    padding: 56px 0 56px 56px;
    border-left: 4px solid var(--secondaryColor);
}
.freeForm.quoteBlock .qb-quote {
    margin: 0;
    font-family: var(--headingFont);
    font-size: clamp(20px, 1.25vw, 24px);
    line-height: 1.25;
    color: var(--white);
}
.freeForm.quoteBlock .qb-sig {
    width: 379px;
    max-width: 100%;
}
.freeForm.quoteBlock .qb-sig svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Rules the deployed 0.1α parent carried outside its SCSS; parent 1.0.6 does not ship them. */
h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-family: var(--headingFont, "Gabarito", "Gabarito Fallback", sans-serif);
}
.google-button-container .g-image {
    flex-shrink: 0;
}
header .header-holder .locNavBtns .navBtns #mainNav > ul {
    padding-top: clamp(0px, 0px, 0px);
    padding-bottom: clamp(0px, 0px, 0px);
}
header {
    padding: clamp(10px, 10px, 10px) 0;
}

@media (max-width: 767px) {
    /* Figma mobile 5254:1195: content at TOP (pt-80), photo fills below. */
    .freeForm.quoteBlock {
        background-image: url('/wp-content/uploads/2026/07/quote_block_bg_mobile.jpg.webp');
        min-height: min(205vw, 923px);
        align-items: flex-start;
        padding-top: 80px;
    }
    .freeForm.quoteBlock .qb-copy {
        padding: 40px 0 40px 32px;
        max-width: 100%;
    }
    .freeForm.quoteBlock .qb-quote {
        font-size: 18px;
    }
    .freeForm.quoteBlock .qb-sig {
        width: 217px;
    }
}

/* Differentiator Bar — Figma 2871:1586: normal-case Gilda 36 heading,
   centered PJS-18 items, no checkmarks. */
.diff {
    padding: clamp(64px, 7.292vw, 140px) 0;
}
/* Interior diff WIDGET → light grey; homepage .diff section stays white (per mockup, Int-D44). */
.widget.widget-diff {
    background-color: #E9EAEF;
}
.diff .heading h1,
.widget.widget-diff .heading h2 {
    font-size: var(--h3FontSize);
    text-transform: none;
    margin-top: 0;
}
.diffList li {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--bodyFontSize);
    color: var(--black);
}
.diffList li .fas {
    display: none;
}
/* Items are links; plain text at rest, underline on hover (HP-D15) — desktop + mobile. */
.diffList li a {
    text-decoration: none;
}
.diffList li a:hover {
    text-decoration: underline;
}

/* News block images — matchbox caps nImgRt at 560 / nImgLt at 812 (inconsistent) +
   floats/fixed heights. Make both fill their column as a consistent square. */
.home .half-content .image {
    height: auto;
    align-self: center;
}
.home .half-content .image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    float: none;
    margin: 0;
}
/* First news block — matchbox zeroes #news1's padding; restore section padding (Figma ~140 top/bottom). */
.home #news1.half-content {
    padding: var(--secPadding);
}
/* News text column inner: col-lg-10/offset-lg-1 → 8/offset-2 (per John; matches Figma copy inset). */
@media (min-width: 1025px) {
    .home .half-content .text > .col-lg-10 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
        width: 66.666667%;
        margin-left: 16.666667%;
    }
}

/* Featured Services — Figma 2849:11905: full-height columns (4.67px gap), b&w darkened
   image (55% overlay equivalent, HP-D17) flipping to color on hover at the same darkness
   so the white name keeps contrast (HP-D18). Hover-expand kept (matchbox). */
.home .feat-services .row.flex {
    gap: 4.67px;
}
.home .feat-services img {
    filter: grayscale(1) brightness(0.45);
}
.home .feat-services .featLink:hover img {
    filter: grayscale(0) brightness(0.45);
}
.home .feat-services .featContent .h4 {
    font-family: var(--headingFont);
    font-size: var(--h3FontSize);
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    margin-left: 40px;
}
/* Focus indicator on the service-name text, not the whole tall image tile (HP-D39). */
.home .feat-services .featLink:focus-visible {
    outline: none;
}
.home .feat-services .featLink:focus-visible .featContent .h4 {
    outline: 2px solid var(--focusColor);
    outline-offset: 4px;
}

/* Review block — freeform, mirror of Quote Block (Figma "Review Scroller" 5222:2843;
   Ali repurposed it into a static block, NOT a carousel). Left copy + WATCH VIDEO CTA.
   Gradient added in CSS (asset isn't pre-darkened like the quote bg). */
.freeForm.reviewBlock {
    padding: 0;
    display: flex;
    align-items: center;
    min-height: min(37.5vw, 720px);
    color: var(--white);
    background-image:
        linear-gradient(90deg, rgba(53, 53, 53, 1) 0%, rgba(53, 53, 53, 0) 65%),
        url('/wp-content/uploads/2026/07/review_scroller_bg_desktop.jpg.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.freeForm.reviewBlock .rev-copy {
    display: flex;
    flex-direction: column;
    gap: 56px;
    max-width: 536px;
    padding: 56px 0 56px 56px;
    border-left: 4px solid var(--secondaryColor);
}
.freeForm.reviewBlock .rev-quote {
    margin: 0;
    font-family: var(--headingFont);
    font-size: var(--h3FontSize);
    line-height: 1.25;
    color: var(--white);
}
.freeForm.reviewBlock .rev-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 32px;
    background: var(--white);
    color: var(--black);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s ease, color .3s ease;
}
.freeForm.reviewBlock .rev-cta:hover {
    background: var(--primaryColor);
    color: var(--white);
}
.freeForm.reviewBlock .rev-cta .fas {
    font-size: 12px;
}
@media (max-width: 767px) {
    /* Figma mobile 5254:1241: content at TOP (pt-80), vertical gradient dark-top
       (#353535 → transparent ~53%), photo fills below. */
    .freeForm.reviewBlock {
        background-image:
            linear-gradient(to bottom, rgba(53, 53, 53, 1) 0%, rgba(53, 53, 53, 0) 53%),
            url('/wp-content/uploads/2026/07/review_scroller_bg_mobile.jpg.webp');
        min-height: min(205vw, 800px);
        align-items: flex-start;
        padding-top: 80px;
    }
    .freeForm.reviewBlock .rev-copy {
        padding: 40px 0 40px 32px;
        max-width: 100%;
    }
}

/* ===== REVIEWS MODULE (Splide; replaces the freeform Review Scroller — Figma 5222:2843
   desktop / 5254:1241 mobile). Bg in CSS (module bg fields unused). Parent
   reviews.min.css loads AFTER child style.css → section.reviews prefix wins the ties. ===== */
section.reviews {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: min(37.5vw, 720px);
    padding: 0;
    color: var(--white);
    background-image:
        linear-gradient(90deg, rgba(53, 53, 53, 1) 0%, rgba(53, 53, 53, 0) 65%),
        url('/wp-content/uploads/2026/07/review_scroller_bg_desktop.jpg.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* One column at Figma's inset: 4px purple bar + 56 gap + 536 copy (=596 border-box);
   the bar spans quote AND button, so it lives on the container wrapping both. */
section.reviews .container {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: auto;
    max-width: 596px;
    margin: 0 0 0 min(11.354vw, 218px);
    padding: 56px 0 56px 56px;
    border-left: 4px solid var(--secondaryColor);
}
section.reviews .testimony {
    width: 100%;
    margin: 0;
}
section.reviews .testimony .splide__slide,
section.reviews .testimony .testCont {
    text-align: left;
}
section.reviews .testimony .rQuote,
section.reviews .testimony .testCont {
    padding: 0;
}
section.reviews .testimony .rQuote > p:first-of-type {
    font-family: var(--headingFont);
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 1.25;
    color: var(--white);
}
section.reviews .testimony .rQuote > p:first-of-type::before {
    content: '\201C';
}
section.reviews .testimony .rQuote > p:first-of-type::after {
    content: '\201D';
}
section.reviews .testimony p.tName {
    justify-content: flex-start;
    text-align: left;
    margin: 16px 0 0;
}
/* Splide chrome hidden (James 07-12; Figma shows none) — rotation via autoplay + swipe.
   Rule lives in no-rucss-child.css (Splide injects .splide__arrows/.splide__pagination
   at runtime, absent from the DOM at first paint). */
/* WATCH VIDEO (more_link) — white CTA + play glyph; hover = HP-D20 (#AEAEE4, black). */
section.reviews .row {
    margin: 0;
}
section.reviews .row .center {
    text-align: left;
}
section.reviews .btn.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 32px;
    background: var(--white);
    color: var(--black);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .3s ease, color .3s ease;
}
section.reviews .btn.btn-secondary::after {
    content: '\f04b';
    font-family: 'Font Awesome 5 Free', fantasy;
    font-weight: 900;
    font-size: 12px;
}
section.reviews .btn.btn-secondary:hover {
    background: var(--secondaryColor);
    color: var(--black);
}
@media (max-width: 767px) {
    /* Figma mobile 5254:1241: content at TOP (pt-80), vertical dark-top gradient,
       32px insets, 32px copy gaps. */
    section.reviews {
        background-image:
            linear-gradient(to bottom, rgba(53, 53, 53, 1) 0%, rgba(53, 53, 53, 0) 53%),
            url('/wp-content/uploads/2026/07/review_scroller_bg_mobile.jpg.webp');
        min-height: min(205vw, 800px);
        justify-content: flex-start;
        align-items: flex-start;
        padding-top: 80px;
    }
    section.reviews .container {
        gap: 32px;
        margin: 0 32px;
        padding: 40px 0 40px 32px;
        max-width: none;
    }
}

/* Special Offers — Figma 5247:3204: #e9eaef bg + marble @25%, white cards (0.5px #ececec
   border + medium shadow), PJS-Medium-24 title, green "Learn More" underline, 16px gap. */
.home .offers {
    background-color: #e9eaef;
    background-image: url('/wp-content/uploads/2026/07/special_offers_bg_desktop.jpg.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.home .offers .offers-list {
    gap: 16px;
}
.home .offers .box-offers .box-holder {
    border: 0.5px solid #ececec;
}
/* Offers Expire line — Figma omits it (John 2026-07-08). */
.home .offers .expires {
    display: none;
}

/* Map/Location — Figma 2862:15238: purple contact icons, PJS-18 plain links,
   green square CONTACT US (via --btnBorderRadius token + .btn rule above). */
.section-location .address .address-holder .pin {
    color: var(--secondaryColor);
}
.section-location .address address a,
.section-location .row-location .place span,
.section-location .address .shedule dl {
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
}
.section-location .address address a {
    text-decoration: none;
}
.section-location .address address a:hover {
    text-decoration: underline;
}
/* Map without the parent's drop shadow (HP-D22); CONTACT US hover → black like every
   other green CTA (HP-D23; kindling's .5s fade already on the button). */
.section-location #map,
.widget.section-location #map {
    box-shadow: none;
}
.section-location .bottom-opener:hover {
    background-color: var(--black);
    color: var(--white);
}

/* ===== ASSOCIATIONS BANNER (Figma dark #0A0D10 + white logos) ===== */

section.section-partners {
    padding: clamp(80px, 5.208vw, 100px) 0;
}

/* White logos = the home-logo trick minus saturate() (per John). Reads over the dark banner bg. */
.section-partners .partners-list img {
    filter: brightness(10);
}

/* Size each logo to its content so all five sit on one row (parent forces li width ~33%). */
.section-partners .partners-list li {
    width: auto;
}

/* Mobile logo carousel crossfade (5 logos, 15s loop). Defined here; wired in the mobile block. */
@keyframes prAssocFade {
    0% { opacity: 0; }
    5% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .section-partners .partners-list li {
        animation: none !important;
    }
    .section-partners .partners-list li:first-child {
        opacity: 1 !important;
    }
}

/* ===== FOOTER (Figma 2988:2237: logo 120, Overline titles, Caption links, 14px legal) ===== */
#footer .footer-holder .footer-logo img {
    width: clamp(314px, 19.635vw, 377px);
    height: auto;
}
#footer h3,
#footer .footer-holder .infoNav .h3,
#footer .footer-holder .servNav .h3,
#footer .footer-holder .fLocation h3 {
    font-family: var(--bodyFont);
    font-weight: 600;
    letter-spacing: 2.4px;
}
/* Phone matches the other links — underline on hover only. */
#footer .tel-footer a {
    text-decoration: none;
}
/* 56px between the content and the legal row (desktop + mobile; container ships 20). */
#footer .footer-holder > .container {
    padding-bottom: 56px;
}
/* Links underline on hover only (HP-D27); social icons never (HP-D28). */
#footer a:hover {
    text-decoration: underline;
}
#footer .footer-holder .social a:hover {
    text-decoration: none;
}
/* Legal row — PJS Regular 14 (HP-D29). */
#footer .bottom,
#footer .bottom .copyright,
#footer .bottom-nav a {
    font-size: 14px;
    font-weight: 400;
}
/* Google reviews pill (HP-D31) — full pill, 16/24 side padding, centered stars row,
   regular-weight rating, tighter two-line stack ("Google" removed in child footer.php). */
.google-button-container {
    border-radius: 999px;
    padding: 15px 24px 15px 16px;
}
.google-button-wrap .num-reviews-and-stars p {
    line-height: 1.2;
}
.google-button-wrap .stars-and-rating {
    justify-content: center;
}
.google-button-wrap .star-rating {
    gap: 4px;
}
.google-button-wrap .star-rating li {
    margin: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}
.google-button-container .num-reviews-and-stars p.alpha-match {
    font-weight: 400;
}

/* ===== BOOK NOW POPUP (#formPop via Lity — Figma popup frame is hidden/unmeasurable,
   values from Ali's notes HP-D32..D37) ===== */
#formPop .contactHead {
    font-size: var(--h3FontSize);
}
#formPop .formPop-desc a:hover {
    text-decoration: underline;
}
/* "New Patient?" with its Yes/No radios left-aligned on the line below (HP-D34). The float
   strips the legend's fieldset-border placement so it stacks as a normal flex item. */
#formPop .wpcf7-form .top fieldset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
#formPop .wpcf7-form .top legend {
    float: left;
    width: auto;
}
#formPop .wpcf7-form .top fieldset p {
    margin: 0;
    display: flex;
    align-items: center;
}
#formPop .wpcf7-radio {
    display: flex;
    align-items: center;
    gap: 16px;
}
#formPop .wpcf7-radio .wpcf7-list-item {
    margin: 0;
}
#formPop .wpcf7-radio .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Text/textarea: solid 2px border in place of the weak browser-default inset bevel so the fields
   read thicker/darker — desktop + mobile (HP-M62; same 2px #767676 the default already used). */
#formPop .formPop-form .wpcf7-text,
#formPop .formPop-form .wpcf7-textarea {
    border: 2px solid #767676;
}
/* Placeholder grey to match the contact form (was the browser-default ~#757575; HP-M63, pairs w/ Int-D49). */
#formPop ::placeholder {
    color: #767676;
    opacity: 1;
}
#formPop .formPop-form form input[type="submit"] {
    transition: background-color .5s linear, color .5s linear;
}
#formPop .formPop-form form input[type="submit"]:hover {
    background-color: var(--black);
    color: var(--white);
}
#formPop .formPop-info-head {
    font-family: var(--bodyFont);
    font-size: var(--h4FontSize);
}
#formPop .formPop-info .shedule dl {
    font-size: 16px;
}

/* Book Now popup — mobile (stacked ≤991, matching the parent's formPop-grid column switch). */
@media (max-width: 991px) {
    /* Clear the top-left X so "Contact Us" isn't crammed against it (X spans 10–50px; HP-M60). */
    #formPop .formPop-form {
        padding-top: 72px;
    }
    /* Move the close X to the top-right corner (HP-M61). */
    #formPop .formPop-close {
        left: auto;
        right: 14px;
    }
    /* CF7 text/textarea ship a size/cols intrinsic width (344/341px) wider than the 311px
       column → they overflowed the popup's right edge; fill the wrap instead (James-flagged). */
    #formPop .formPop-form .wpcf7-text,
    #formPop .formPop-form .wpcf7-textarea {
        width: 100%;
    }
    /* Stacked content is taller than the viewport → scroll the grid so the submit + info (clipped
       below "Your Message") are reachable; #formPop keeps its clip so the close X stays pinned (HP-M64). */
    #formPop .formPop-grid {
        max-height: 100vh;
        overflow-y: auto;
    }
}

/* ===== TABLET BAND (768-1024) — kindling's lg grid starts at 1025, so col-lg/offset-lg
   die here while the desktop backgrounds stay; re-anchor the affected sections. ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Quote block — copy back over the bg's right (non-photo) half, desktop proportions.
       Section padding: the narrower column wraps taller than min-height (37.5vw), so
       without it the accent bar rides the section's top/bottom edges. */
    .freeForm.quoteBlock {
        padding: 80px 0;
    }
    .freeForm.quoteBlock .col-lg-5 {
        margin-left: 58.333%;
        width: 41.667%;
    }
    /* Reviews — hold the copy over the gradient's dark left (11.354vw drifts it right;
       the width cap keeps its right edge near the fade line down to 768). Same section
       padding as the quote block so the bar clears the edges. */
    section.reviews {
        padding: 80px 0;
    }
    section.reviews .container {
        margin-left: 32px;
        max-width: min(596px, 62vw);
    }
    /* Contact form: cols don't reflow in this band (col-lg-6 only sizes ≥1025), so wrap them
       full-width to match the phone layout — 1024-down reads the same (Int-D48 follow-up). */
    .conForm .row.flex {
        flex-wrap: wrap;
    }
    .conForm .row.flex > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== MOBILE (Figma Homepage Mobile 2849:11816) ===== */

@media (max-width: 1024px) {
    /* Featured services — full-width stacked tiles; the parent's ≤1024 rule leaves them
       flex-basis 50% everywhere above its 567 phone cutoff. */
    .home .feat-services .featLink {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    /* Nav strip — Figma Mobile/Nav Bar: .header-holder (matchbox's fixed bar host,
       z90 stacking context — a body::before overlay would cover the burger inside it)
       becomes the slim white bar w/ small drop shadow. */
    #header .header-holder {
        width: 100%;
        max-width: none;
        height: 50px;
        background: var(--white);
        box-shadow: 0 20px 30px rgba(0,0,0,.05), 0 5px 15px rgba(0,0,0,.10);
    }
    /* Phone opener → 34px green square at left 32. */
    .mobile-show.moreInfo {
        top: 8px;
        left: 32px;
    }
    .moreInfo .btn.show-info {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Hamburger → black bars (Figma), right 32, centered in the strip. */
    .menu-opener.mobile-show {
        right: 32px;
        top: 14px;
    }
    .menu-opener::before,
    .menu-opener::after,
    body.home .menu-opener::before,
    body.home .menu-opener::after {
        background: var(--black);
    }
    /* Header — Figma Mobile/Header: in-flow white block, color logo + BOOK NOW.
       Logo host = matchbox's .mob-logo-section (NOT .logo-block, hidden on mobile). */
    body #header,
    body.home #header {
        position: relative;
        height: auto;
        background: var(--white);
        padding: 50px 32px 56px;
    }
    /* Fill the header's 32px-padded content box (parent makes it 90vw → overflows right, shifting
       the logo + Book Now ~13px off-center) so the cluster centers (HP-M51). */
    #header .mobHd {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .mob-logo-section {
        text-align: center;
        margin: 56px auto 0;
        padding: 0;
    }
    #mobLogo img {
        width: min(314px, 80vw);
        height: auto;
    }
    /* BOOK NOW leaves the fixed strip, sits centered below the logo — Figma CTA. */
    #header .btn-block.mobile-show {
        position: static;
        width: fit-content;
        margin: 32px auto 0;
        transform: none;
    }
    body.home #header .btn-block.mobile-show .booking-opener,
    body.home #header .btn-block.mobile-show .booking-blank,
    #header .btn-block.mobile-show .booking-opener,
    #header .btn-block.mobile-show .booking-blank {
        padding: 16px 32px;
        font-size: 16px;
        background-color: var(--primaryColor);
        color: var(--white);
    }
    /* On scroll, BOOK NOW docks into the nav strip (per John), compact to fit 50px, and the
       header reserves the button's in-flow height so it doesn't jump at the threshold —
       rules live in no-rucss-child.css (keyed on the JS-added .scrolled class). */
    /* Scroll-dock without bounce: matchbox ships transition:all / 0.5s-linear on the
       header, button block, and logo — they animate the dock's position/padding/pad-
       compensation simultaneously (per John). Kill them on mobile; .header-holder's
       scoped bg/shadow transition stays, and the burger's ::before/::after X-morph
       (pseudo-elements) is untouched. The drawer title bar and submenu chevron rules
       that used to follow here now live in no-rucss-child.css (mmenu builds the drawer
       markup at runtime). */
    #header,
    #header .mobHd,
    #header .btn-block.mobile-show,
    #header .btn-block.mobile-show .btn,
    .mob-logo-section,
    #mobLogo img {
        transition: none;
    }
    /* Unfloat content embeds (align-left/right) once the column narrows. */
    .align-right,
    .align-left {
        float: none;
        margin: 0 0 24px;
    }
    /* News blocks (James's pattern) — applies ≤1024 (blocks stack here too): the vertical rhythm lives
       on .text (100px bottom = section's bottom padding, 56px top = image→heading gap); zero the image
       padding (parent gives news1 50px @1024); section keeps 100 top → 100/100 match, consistent (HP-M53). */
    .home .half-content,
    .home #news1.half-content {
        padding-top: 100px;
        padding-bottom: 0;
    }
    .home .half-content .text {
        padding: 56px 32px 100px;
    }
    .home .half-content .image,
    .home #news1 .image.nImgRt {
        padding: 0;
    }
    /* Offer cards: 32px between copy and "Learn More" — undo the parent's specWrap bottom shift (HP-M55). */
    .home .offers .specWrap {
        bottom: 0;
    }
    /* Footer "Leave a Review" (servNav) accordion — center it to match the Contact Us column (HP-M57):
       drop kindling's asymmetric padding-left (shoved the column 8px right) + center the panel links. */
    #footer .footer-holder .servNav {
        padding-left: 0;
    }
    #footer .footer-holder .servNav .panel {
        text-align: center;
    }
}

@media (max-width: 767px) {
    /* Hero — Figma mobile: short image band (240@390 = 61.54vw), no headline. */
    #promoBanner {
        height: 61.54vw;
    }
    #promoBanner .slide_content {
        display: none;
    }
    /* Diff bar — Figma mobile 2849:11858: py-100 px-32 (matchbox drops to 50/0). */
    .diff {
        padding: 100px 32px;
    }
    /* Featured services — Figma mobile: full-width square stack, name inset 32 (not 40). */
    .home .feat-services .featContent .h4 {
        margin-left: 32px;
    }
    /* Offers — Figma mobile py-100 (cards already stack, marble/icons/heading intact). */
    .home .offers {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    /* Map/Location — Figma mobile 2849:11818: MAP on top, copy below (DOM is
       address-first → column-reverse), py-100 px-32, 56 gap. */
    .home .section-location {
        padding: 100px 32px;
    }
    /* Map-on-top is now the parent default (kindling .map-block.container.flex
       column-reverse); child just adds the gap (home + interior). */
    .section-location .map-block {
        gap: 56px;
    }
    .home .section-location .address .address-holder {
        padding: 0;
    }
    /* Associations — Figma mobile: single-logo carousel (crossfade). py-80 → 240 band.
       `section.` specificity beats matchbox's @media(max-width:768px){padding:40px 0}. */
    section.section-partners {
        padding: 80px 32px;
    }
    .section-partners .partners-list {
        position: relative;
        height: 80px;
        display: block;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }
    .section-partners .partners-list li {
        position: absolute;
        inset: 0;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        animation: prAssocFade 15s infinite;
    }
    .section-partners .partners-list li:nth-child(1) { animation-delay: 0s; }
    .section-partners .partners-list li:nth-child(2) { animation-delay: 3s; }
    .section-partners .partners-list li:nth-child(3) { animation-delay: 6s; }
    .section-partners .partners-list li:nth-child(4) { animation-delay: 9s; }
    .section-partners .partners-list li:nth-child(5) { animation-delay: 12s; }
    /* Footer — 80px above the content on mobile (kindling ships 50). */
    #footer .footer-holder {
        padding-top: 80px;
    }
    /* Reserve room below the footer content for the docked Google reviews pill so it clears the
       social icons instead of covering them (pill 64px + its 10px gap above the legal bar; HP-M59). */
    #footer .footer-holder > .container {
        padding-bottom: 100px;
    }
}
.home .offers .box-offers h4,
.home .offers .box-offers .h4 {
    font-family: var(--bodyFont);
    font-size: var(--h4FontSize);
    font-weight: 500;
}
.home .offers .specWrap a {
    color: var(--black);
    letter-spacing: 2.4px;
    text-decoration: none;
}
.home .offers .specWrap a::after {
    background-color: var(--primaryColor);
}


/* ===== INTERIOR TEMPLATE (Figma "Interior Page" 2849:11777 / mobile 2849:11739) =====
   Child one-off (Ali's new design). Hero + offer card markup live in this child
   (templates/partial-banner.php + partial-offer.php); shared by every interior template.
   Overrides the parent's 2-col navy banner (keyed to .row.flex/.ban-image, unused here). */

/* --- Hero: full-bleed photo, title bottom-left, breadcrumb top-right, offer card right. */
.promo.bar.bar-title.int-hero {
    position: relative;
    height: clamp(400px, 29.17vw, 560px);
    padding: 0;
    overflow: visible;
    background: var(--black);
}
.promo.bar.bar-title.int-hero .pImg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.int-hero .pImg picture { display: block; height: 100%; }
.int-hero .pImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.int-hero .pImg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.int-hero .int-hero-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
}
/* Title — bottom-left, Gilda 52 white (kill the parent's uppercase + slide-up reveal). */
.promo.bar.bar-title.int-hero .tWrap {
    position: absolute;
    left: clamp(32px, 7.29vw, 140px);
    bottom: 56px;
    max-width: min(812px, 60%);
    overflow: visible;
}
.promo.bar.bar-title.int-hero .tWrap h1,
.promo.bar.bar-title.int-hero .tWrap h2 {
    margin: 0;
    color: var(--white);
    font-family: var(--headingFont);
    font-weight: 400;
    font-size: var(--h2FontSize);
    line-height: 1.15;
    text-transform: none;
    letter-spacing: 0;
    transform: none;
    animation: none;
    opacity: 1;
}
/* Breadcrumb — top-right, PJS 16 white. */
.promo.bar.bar-title.int-hero .breadcrumbs-block {
    position: absolute;
    top: 24px;
    right: clamp(32px, 7.29vw, 140px);
    left: auto;
    width: fit-content;
    max-width: calc(100% - 64px);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 400;
    color: var(--white);
    white-space: nowrap;
}
.promo.bar.bar-title.int-hero .breadcrumbs-block a { color: var(--white); text-decoration: none; }
.promo.bar.bar-title.int-hero .breadcrumbs-block a:hover { text-decoration: underline; }
/* Crumbs are inline inside .breadcrumb — make IT the flex row so the caret separators
   get real spacing (Figma 2912:1629 gap 24). */
.promo.bar.bar-title.int-hero .breadcrumbs-block .breadcrumb {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.25vw, 24px);
    padding: 0;
}
.promo.bar.bar-title.int-hero .breadcrumbs-block .breadcrumb .fa-caret-right { font-size: 12px; opacity: .85; }

/* Special Offer card — right, vertically centered (Figma 2849:11810: #0A0D10, centered). */
.promo.bar.bar-title.int-hero .page-offer {
    position: absolute;
    top: auto;
    bottom: -45px;
    right: clamp(32px, 7.29vw, 140px);
    left: auto;
    width: min(535px, 38vw);
    z-index: 2;
    margin: 0;
    padding: clamp(32px, 4.17vw, 80px) clamp(24px, 2.92vw, 56px);
    background: var(--black);
    color: var(--white);
    text-align: center;
    box-shadow: var(--shadyMid);
    border-radius: 0; /* square — overrides parent --cardBorderRad (matchbox 91dcebe) */
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.promo.bar.bar-title.int-hero .page-offer h2 {
    margin: 0;
    font-family: var(--headingFont);
    font-weight: 400;
    font-size: var(--h3FontSize);
    line-height: 1.25;
    color: var(--white);
    text-transform: none;
}
.promo.bar.bar-title.int-hero .page-offer p,
.promo.bar.bar-title.int-hero .page-offer li {
    margin: 0;
    font-family: var(--bodyFont);
    font-size: 16px;
    line-height: 1.5;
    color: var(--white);
}
.promo.bar.bar-title.int-hero .page-offer img { display: none; }

/* --- Content column (.entry.entry-add) — Figma 2849:11789: centered 1088 column,
   ~140 top/bottom; Gilda 44 titles, PJS 18 body. --- */
/* No offer card (default): tighter top so there's no dead gap under the hero. */
body:not(.home) .main-frame .entry.entry-add {
    max-width: 1088px;
    margin: 0 auto;
    padding: clamp(40px, 4.17vw, 80px) 0 clamp(64px, 7.29vw, 140px);
}
/* Offer card present: full top padding so the overhanging card tucks into it (Figma). */
body:has(.int-hero .page-offer) .main-frame .entry.entry-add {
    padding-top: clamp(64px, 7.29vw, 140px);
}
/* Interior content images → subtler 6px corners (interior_style ships 10px aligned / 40–80px general; Int-D43). */
.entry.entry-add img,
.entry.entry-add img.alignleft,
.entry.entry-add img.alignright {
    border-radius: 6px;
}
body:not(.home) .entry.entry-add p,
body:not(.home) .entry.entry-add li {
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
    color: var(--black);
    margin: 0 0 24px;
}
body:not(.home) .entry.entry-add h2,
body:not(.home) .entry.entry-add .h2 {
    font-family: var(--headingFont);
    font-weight: 400;
    font-size: clamp(30px, 2.29vw, 44px);
    line-height: 1.15;
    color: var(--black);
    text-transform: none;
    margin: 0 0 24px;
}
body:not(.home) .entry.entry-add h3,
body:not(.home) .entry.entry-add .h3 {
    font-family: var(--headingFont);
    font-weight: 400;
    font-size: var(--h3FontSize);
    line-height: 1.25;
    color: var(--black);
    text-transform: none;
    margin: 0 0 24px;
}
/* Content CTAs (.btn-orange in page copy: Invisalign "Book a Virtual Consult", Virtual
   Smile Consult submit) — the parent's rule targets legacy #main .fullContent wrappers
   Matchbox markup doesn't emit, so they render as bare text. Match the header Book Now:
   green, black on hover, same 0.5s linear fade (James 07-12). */
.entry.entry-add .btn-orange {
    display: inline-block;
    background: var(--primaryColor);
    color: var(--white);
    border: 0;
    transition: background-color .5s linear, color .5s linear;
}
.entry.entry-add .btn-orange:hover {
    background: var(--black);
    color: var(--white);
}

/* --- Services page (services-page.php): square the service cards (matchbox ships a
   40px/0 diagonal motif; this site is square). --- */
.entry.entry-add .servBlock .servCard {
    border-radius: 0;
}
/* Card heading link: no underline; make the .h3 span block so its 24px bottom
   margin renders (inline spans drop vertical margins). All viewports. */
.entry.entry-add .servBlock .servCard .h3 {
    display: block;
    margin-bottom: 24px;
}
.entry.entry-add .servBlock .servCard .h3 a {
    text-decoration: none;
}
/* Card heading size — 28px on desktop (down from the h3 scale); mobile keeps its size. */
@media (min-width: 768px) {
    .entry.entry-add .servBlock .servCard .h3 {
        font-size: 28px;
    }
}

/* ===== CONTACT (contact-page.php .conForm — CF7 ships browser-default; brand it) ===== */
/* Clean square white fields (they sit on the dark #0A0D10 section). */
.conForm input[type="text"],
.conForm input[type="email"],
.conForm input[type="tel"],
.conForm input[type="url"],
.conForm input[type="number"],
.conForm textarea {
    width: 100%;
    background: var(--white);
    color: var(--black);
    border: 0;
    border-radius: 0;
    padding: 14px 16px;
    font-family: var(--bodyFont);
    font-size: 16px;
    line-height: 1.5;
}
.conForm textarea { min-height: 180px; resize: vertical; }
.conForm ::placeholder { color: #767676; opacity: 1; }

/* "New Patient?" row (Int-D48): center the column so the row lines up with the Full Name field beside it; 18px label; kindling's legend width:100% pushed the radios far right, so shrink to width:auto and zero the 8px bottom margin so the label lines up with the radios. */
.conForm .top.col-lg-6 {
    display: flex;
    align-items: center;
}
.conForm legend {
    font-size: 18px;
    width: auto;
    margin: 0 16px 0 0;
}
.conForm .wpcf7-radio {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
}
.conForm .wpcf7-radio .wpcf7-list-item {
    margin: 0;
}
.conForm .wpcf7-radio .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Submit → site button (white square over the dark section, #AEAEE4 on hover w/ black text — Int-D50). */
.conForm input[type="submit"],
.conForm .wpcf7-submit {
    -webkit-appearance: none;
    appearance: none;
    background: var(--white);
    color: var(--black);
    border: 0;
    border-radius: 0;
    padding: 16px 32px;
    font-family: var(--bodyFont);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}
/* Interior_style ships `.formWrap input[type=submit].btn-orange:hover` (green) that loads after + outranks a plain .conForm hover, so scope higher to win (Int-D50). */
.page-template-contact-page .conForm .wpcf7-submit.btn-orange:hover {
    background: var(--secondaryColor);
    color: var(--black);
}
/* Heading — title-case (matches the rest of the site; the parent uppercases it). */
.page-template-contact-page .conForm .heading h2 {
    text-transform: none;
}

/* ===== SPECIAL OFFERS PAGE (special-offers.php) — match the homepage offer cards ===== */
.page-template-special-offers .offers-list .box-offers .h4 {
    font-family: var(--bodyFont);
    font-size: var(--h4FontSize);
    font-weight: 500;
}
/* Consistent card spacing: fix the title→body gap and push "Learn More" to the bottom (margin-top:auto)
   so the card's flex space-between stops inflating the icon/title/body gaps on shorter-copy cards (Int-D47). */
.page-template-special-offers .offers-list .description {
    margin-bottom: 16px;
}
.page-template-special-offers .offers-list .specWrap {
    margin-top: auto;
}
/* "Learn More" — recolor the parent (offers.min) underline to green and let ITS width-based hover
   animation run. A custom scaleX ::after here fought the parent's card-hover (which only animates
   width/opacity) so the line never showed on card hover — homepage treatment is recolor-only. */
.page-template-special-offers .offers-list .specWrap a {
    color: var(--black);
    letter-spacing: 2.4px;
    text-decoration: none;
}
.page-template-special-offers .offers-list .specWrap a::after {
    background-color: var(--primaryColor);
}
/* Card border to match the homepage offer card, which this page was missing (Int-D47). */
.page-template-special-offers .offers-list .box-offers .box-holder {
    border: 0.5px solid #ececec;
}
/* Wider container + entry so the offer cards are less portrait / more square (desktop). */
.page-template-special-offers .main-frame .container {
    max-width: 1400px;
}
body:not(.home).page-template-special-offers .main-frame .entry.entry-add {
    max-width: 1360px;
    padding-top: 40px;
    padding-bottom: 40px;
}
/* Real width gate: parent pins .container #content to min(95%,1088px) — raise it so the cards expand (Int-D47). */
.page-template-special-offers .main-frame .container #content {
    width: min(95%, 1360px);
}
@media (max-width: 767px) {
    /* Full-bleed entry on mobile so the stacked cards get a bit wider (John). */
    body:not(.home).page-template-special-offers .main-frame .entry.entry-add {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ===== INTERIOR LOCATION/MAP WIDGET (global; the homepage .section-location is styled
   separately under .home). CONTACT US uses .btn-orange, whose bg (--orange) is undefined
   on this green-brand site → transparent; make it the green CTA. ===== */
body:not(.home) .section-location .btn-orange {
    display: inline-block; /* was inline → its 56px vertical margin was dropped, overlapping the disclaimer */
    background: var(--primaryColor);
    color: var(--white);
    transition: background-color .5s linear, color .5s linear;
}
body:not(.home) .section-location .btn-orange:hover {
    background: var(--black);
    color: var(--white);
}
@media (max-width: 767px) {
    /* Section content was edge-to-edge (0 side padding) on mobile — inset it. */
    body:not(.home) .section-location {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* ===== SMILE GALLERY (about-us/smile-gallery) — Shortcodes Ultimate su_row/su_column grid.
   wpautop injects <br> between the floated columns and staggers them; lay each row out as a
   flex grid and hide the stray breaks. Mobile stacking = the plugin's own width:100% rule. ===== */
.su-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    row-gap: 24px;
}
.su-row > br {
    display: none;
}
.su-row .su-column {
    float: none;
}

/* ===== FAQ ACCORDION (section-faq) — Matchbox ships this section's markup + toggle JS
   (general.js toggles .active on .accordion and .show on .answer.panel) but NO CSS, so it
   renders as raw HTML buttons with every answer open. Port the standard FG FAQ look
   (ref: fgB-child ronaldfuhrmann) recolored to Park Ridge tokens. (Int-D3) ===== */
section.faq {
    background: #e9eaef;
    padding: clamp(64px, 7.29vw, 120px) 0;
}
.faq .container {
    max-width: 1400px;
    margin: 0 auto;
}
.faq .heading h2 {
    margin-top: 0;
}
.faq .faq-item {
    margin: clamp(24px, 1.875vw, 36px) 0;
    background: #e9eaef;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.faq .faq-item .question.accordion {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 1.25vw, 22px) clamp(56px, 4.17vw, 80px);
    background: var(--white);
    color: var(--black);
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.faq .faq-item .question.accordion .h4 {
    margin: 0;
    font-family: var(--bodyFont);
    font-weight: 500;
    font-size: var(--h4FontSize);
    line-height: var(--h4LineHeight);
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: inherit;
    pointer-events: none;
}
.faq .faq-item .question.accordion::after {
    content: '\f067';
    position: absolute;
    right: clamp(16px, 1.25vw, 24px);
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Font Awesome 5 Free', fantasy;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    color: var(--primaryColor);
}
/* Open-state icon swap lives in no-rucss-child.css (keyed on the JS-toggled .active class). */
.faq .faq-item .answer.panel {
    display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0 clamp(24px, 2.083vw, 40px);
    transition: max-height .5s ease, padding .5s ease;
}
/* Expanded-state max-height/padding lives in no-rucss-child.css (keyed on the
   JS-toggled .show class). */
.faq .faq-item .answer.panel p {
    margin: 0 0 12px;
}

.faq .faq-item .answer.panel p:last-child {
    margin-bottom: 0;
}

.faq .faq-item .answer.panel li {
    margin-bottom: 10px;
}

/* --- Interior MOBILE (Figma "Interior Page Mobile" 2849:11739) --- */
@media (max-width: 767px) {
    /* Hero = photo band only (240 = 61.54vw); no overlaid title/breadcrumb.
       Unclip the hero so the offer card can flow below the photo. */
    .promo.bar.bar-title.int-hero {
        height: auto;
        overflow: visible;
        background: transparent;
        display: flex;
        flex-direction: column;
    }
    .promo.bar.bar-title.int-hero .pImg {
        position: relative;
        inset: auto;
        height: 61.54vw;
        order: 1;
    }
    .promo.bar.bar-title.int-hero .int-hero-inner {
        position: static;
        height: auto;
        order: 2;
    }
    .promo.bar.bar-title.int-hero .tWrap,
    .promo.bar.bar-title.int-hero .breadcrumbs-block {
        display: none;
    }
    /* Special Offer — full-width card below the hero photo, 32px gap (Figma: hero ends
       590, card at 622). Card pad 40 (3739:1686). */
    .promo.bar.bar-title.int-hero .page-offer {
        position: static;
        top: auto;
        right: auto;
        left: auto;
        transform: none;
        width: auto;
        margin: 32px 32px 0;
        padding: 40px;
    }
    /* Content — Figma mobile 2849:11745: stack. Sides trimmed 32→24 to cut the interior gutter
       (Int-M65); top tightened when there's no offer card (dead-gap); full 80 when the card is present. */
    body:not(.home) .main-frame .entry.entry-add {
        max-width: none;
        padding: 40px 24px 80px;
    }
    body:has(.int-hero .page-offer) .main-frame .entry.entry-add {
        padding-top: 80px;
    }
    /* FAQ — inset the section and left-align the question + toggle (Int-D3). */
    .faq .container {
        padding-left: 32px;
        padding-right: 32px;
    }
    .faq .faq-item .question.accordion {
        justify-content: flex-start;
        padding-right: 52px;
    }
    .faq .faq-item .question.accordion .h4 {
        text-align: left;
    }
}

/* Remaining deployed 0.1α parent drift (mobile). */
@media (max-width: 1024px) {
    #header {
        padding: clamp(0px, 0px, 0px);
    }
}
@media (max-width: 1024px) {
    #formPop.wrap-form-question-fixed {
        height: 100vh;
        overflow-y: scroll;
    }
}