/*
Theme Name: fgMatchBox Child — Stono Dental Care
Template: fgmatchbox
Author: Firegang Dental Marketing
Description: Stono Dental Care brand layer (runtime token overrides). No build.
Version: 0.2
*/

/* MMFF fallbacks — kill font-swap CLS; fonttools-computed from the Google Fonts latin woff2s. */
@font-face {
    font-family: 'Instrument Sans Fallback';
    src: local('Arial');
    font-weight: 400 600;   /* cover Medium (500) + SemiBold (600) UI weights */
    size-adjust: 104.09%;
    ascent-override: 93.19%;
    descent-override: 24.02%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Instrument Serif Fallback';
    src: local('Georgia');
    size-adjust: 77.07%;
    ascent-override: 128.46%;
    descent-override: 40.23%;
    line-gap-override: 0%;
}

:root {
    /* Colors (Figma 2849:11871 vars). Blue = UI primary (nav bar, offers band, CTAs);
       Green = accent (checkmarks). */
    --primaryColor: #32789D;   /* Blue */
    --primaryHover: #212B37;   /* provisional: hover -> Black (verify vs Figma) */
    --secondaryColor: #B5D4A1; /* Green */
    --secondaryHover: #FFFFFF; /* provisional */
    --accentGreen: #B5D4A1;
    --black: #212B37;
    --white: #FFFFFF;
    --tan: #F5F4F2;            /* Figma "Tan" token — secondary-button fill + hover, warm section wash */
    --footerBg: #212B37;       /* provisional — confirm vs footer frame */

    /* Fonts: Instrument Serif (Display/H1) + Instrument Sans (Body/H3/H4/UI).
       web_font_url loads them. Serif is 400-only. Parent binds --headingFont to h1-h3;
       h3 is overridden to Sans below (h4 is unbound → already Sans). */
    --headingFont: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
    --bodyFont: 'Instrument Sans', 'Instrument Sans Fallback', Arial, sans-serif;
    --headingFontWeight: 400;

    /* Type scale — caps = Figma desktop tokens; floors provisional (Mobile frame not yet
       read — lock per-section during the mobile-first build). No H2 in the design. */
    --dispFontSize: clamp(40px, 5vw, 96px);
    --h1FontSize:   clamp(48px, 3.333vw, 64px);   /* floor = Figma Mobile/H1 48 (confirmed news + reviews frames) */
    --h2FontSize:   clamp(30px, 2.5vw, 48px);    /* not in design; sane default for wysiwyg */
    --h3FontSize:   clamp(26px, 1.667vw, 32px);
    --h4FontSize:   clamp(20px, 1.25vw, 24px);
    --bodyFontSize: clamp(16px, 0.9375vw, 18px);

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

    /* Shadow — Figma "Drop shadow (medium)": 0 40 50, #00000008, spread 0 (single subtle layer). */
    --shadyMid: 0 40px 50px rgba(0, 0, 0, 0.03);
    /* Figma "Drop shadow (small)" (two layers) — the mobile nav bar's effect. */
    --shadySm: 0 20px 30px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.10);

    /* Buttons — nav CTA reads sharp-cornered; confirm exact radius at nav/hero build. */
    --btnBorderRadius: 0;

    /* Interior content images get a slight uniform rounding (Ali, Int-D6). Deliberately its
       OWN token, not --cardBorderRad: cards/buttons stay square per the brand motif, and this
       is the single knob to tune if 10px reads wrong. */
    --imgBorderRad: 10px;
}

/* Container caps at the design content width: 1920 - (2 x 140) = 1640. */
.container {
    width: min(90vw, 1640px);
}

/* H3 is Instrument Sans in this design (kindling binds --headingFont to h1-h3). */
h3,
.h3 {
    font-family: var(--bodyFont);
}

/* Bold body emphasis = Instrument Sans 600 (heaviest loaded weight; avoids faux-bold 700). */
strong,
b {
    font-weight: 600;
}

/* Buttons — Overline character style: Instrument Sans 16 / 600 / 2.4px tracking / uppercase. */
.btn {
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    padding: min(16px, 4vw) min(32px, 8vw);
    text-align: center;
}


/* ===== HERO (Figma Hero Banner 2849:11908) =====
   Section sheet loads after the child, so scope with .home .promo to out-specify it. */

/* 788 @ 1920 (41.04vw); copy bottom-anchored, no top pad. */
.home .promo {
    height: min(41.04vw, 788px);
    padding-top: 0;
}
/* Figma overlay: flat 25% black + bottom fade to +50%. */
.home .promo::before {
    background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%),
                linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
}
.home .promo .promoBg img {
    object-position: center;
}
/* Copy anchored bottom-center, 80 off the bottom @ 1920. */
.home .promo .promo-holder .container {
    align-items: end;
    padding-bottom: clamp(48px, 4.167vw, 80px);
}
.home .promo .slide_content > div {
    gap: 24px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: center;
}
/* Headline = Display 96 Instrument Serif uppercase (non-semantic span.h2.banH — the
   base h2.banH rules no longer match, so style .banH fully here). */
.home .promo .banH {
    display: block;
    font-family: var(--headingFont);
    font-size: var(--dispFontSize);
    line-height: var(--dispLineHeight);
    font-weight: var(--headingFontWeight);
    color: var(--white);
    letter-spacing: 0;
    -webkit-text-stroke: 0;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}
/* Subhead = the page H1 (h1.s_content), Instrument Sans H3 32, white. margin:0 kills
   the theme's bare-heading top margin. */
.home .promo .s_content,
.home .promo .s_content p {
    color: var(--white);
    font-family: var(--bodyFont);
    font-size: var(--h3FontSize);
    line-height: var(--h3LineHeight);
    font-weight: 400;
    text-align: center;
    margin: 0;
}

@media (max-width: 1024px) {
    /* Mobile hero = bare image band (no copy), 240 @ 390 handled at 567. */
    .home .promo {
        height: 48.9vw;
        padding-top: 0;
    }
    .home .promo::before {
        display: none;
    }
    .home .promo .slide_content {
        display: none;
    }
}
@media (max-width: 567px) {
    .home .promo {
        height: 61.54vw;
    }
}


/* ===== HEADER (Figma Desktop/Nav Bar 2928:1917) =====
   Figma = solid white bar (dark text) at rest, sitting above the hero. Base header is
   transparent white-text over the hero; make the rest state solid + offset content below. */

#header {
    background-color: var(--white);
    color: var(--black);
    border-bottom: none;
    box-shadow: var(--shadyMid);
}

@media (min-width: 1025px) {
    #header {
        padding: clamp(16px, 1.25vw, 24px) 0;
    }
    /* logo left, nav block right (logo_cols/nav_cols are unset → bypass bootstrap cols). */
    .header-holder {
        width: min(90vw, 1640px);
        max-width: none;
        justify-content: space-between;
        align-items: center;
    }
    #header .logo-block {
        flex: 0 0 auto;
        width: auto;
    }
    #header .locNavBtns {
        flex: 0 1 auto;
        width: auto;
    }
    /* Logo 349x96 @1920 — height fluid (5vw = 96 at 1920), floored 64 for legibility. */
    #header .logo-block .sLogo {
        height: clamp(64px, 5vw, 96px);
    }
    #header #logo img#mLogo {
        width: auto;
        height: clamp(64px, 5vw, 96px);
    }
    /* Contact row over nav row, 24 gap. */
    #header .locNavBtns {
        gap: 24px;
    }
    #header .conBlock.flex {
        padding: 0;
    }
    #header .conBlock .headAdd a,
    #header .conBlock .phoneBlock a {
        font-size: 16px;
        color: var(--black);
    }
    /* Header contact icons = green (accent), 18 (Figma). Alignment is on the trunk. */
    #header .conBlock .headAdd i,
    #header .conBlock .phoneBlock i {
        color: var(--accentGreen);
        font-size: 18px;
        line-height: 1;
    }
    /* Nav items: 48 gap, Overline, blue center-grow hover underline. */
    #header #nav {
        gap: clamp(12px, 1.5vw, 40px);   /* shrink on narrow desktops so nav clears the logo */
        padding: 0;
        --navLinkPadY: min(0.833vw, 16px); /* link vertical padding = hover bridge to the dropdown (fills the ~56 nav row) */
        --navLinkPadX: 0px;                /* horizontal spacing is the 48 flex gap, not link padding */
    }
    /* Horizontal spacing is the 48 flex gap; link padding comes from the vars above. */
    #header #nav > li {
        padding: 0;
    }
    #header #nav > li > a {
        position: relative;
        font-family: var(--bodyFont);
        font-size: clamp(13px, 1.05vw, 16px);   /* scales down on narrow desktops */
        font-weight: 600;
        letter-spacing: 2.4px;
        text-transform: uppercase;
        color: var(--black);
    }
    #header #nav > li > a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(var(--navLinkPadY, min(0.833vw, 16px)) - 4px); /* tuck under the text, inside the padding */
        height: 2px;
        background: var(--primaryColor);
        transform: scaleX(0);
        transition: transform 0.25s ease;
    }
    #header #nav > li:hover > a::after,
    #header #nav > li.current-menu-item > a::after {
        transform: scaleX(1);
    }
    /* Dropdown items are 16/black = Figma Components/Hyperlink "Size=16, Color=Black",
       whose Hover variant (2815:525) is a plain underline with the colour unchanged.
       Beats nav.scss's `#nav >li a:hover{text-decoration:none}` (1,1,2) at (2,2,2).
       The top-level `> li > a::after` underline can't reach these — it's a direct child. */
    #header #nav .sub-menu > li > a:hover,
    #header #nav .sub-menu > li > a:focus-visible {
        text-decoration: underline;
        text-decoration-skip-ink: none;
        text-underline-position: from-font;
    }
    /* Fly-out affordance on the only two dropdown items that own a sub-menu (Restorative
       + Cosmetic). nav.scss has a caret mechanism (`.opener::after` \f0da) but it is dead
       code here — FGMB_Walker_Nav_Menu emits no .opener — so draw it on the link, which is
       already position:relative. fa-chevron-right matches Figma Components/Chevron
       (2284:65, tall+thin, not a solid caret) and the site's existing fa-chevron-right. */
    #header #nav .sub-menu > li.menu-item-has-children > a {
        padding-right: 40px;
    }
    #header #nav .sub-menu > li.menu-item-has-children > a::after {
        content: '\f054';
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 12px;
        line-height: 1;
    }
    /* BOOK NOW = blue fill / white. */
    #header .booking-opener,
    #header .booking-blank {
        background-color: var(--primaryColor);
        color: var(--white);
    }
    #header .booking-opener:hover,
    #header .booking-blank:hover {
        background-color: var(--primaryHover);
        color: var(--white);
    }
    /* Offset content below the fixed solid header (Figma stacks nav + hero).
       Tracks header height = nav-block 107 (contact 27 + gap 24 + nav row 56) + vertical padding. */
    #main {
        padding-top: calc(107px + 2 * clamp(16px, 1.25vw, 24px));
    }
    /* interior_style.scss overrides the base fixed header to sticky (ported fgB). Sticky is
       in-flow, so with the #main offset above, the header's space is reserved twice = a gap
       under the header. Restore fixed on interior pages (homepage keeps the base fixed header). */
    body:not(.home) #header {
        position: fixed;
    }
}

/* Mobile header (Figma Mobile/Nav Bar 2849:11859 [50h] + Mobile/Header 2912:1610 [280h]):
   thin bar (phone left / hamburger right) + centered logo 290x80 + centered Book Now.
   Header section = px32 py56, gap 32. */
@media (max-width: 1024px) {
    /* Thin bar 50 (Figma); hamburger = black bars, phone = sharp blue square.
       Figma's Mobile/Nav Bar carries "Drop shadow (small)", not medium, and the bar had
       no visible separation from the page. Retargeting --shadyMid on the bar also fixes
       the post-scroll state: the parent's own sticky-nav rule out-specifies anything sane
       here, but it resolves var(--shadyMid) locally. */
    #header .header-holder {
        --shadyMid: var(--shadySm);
        height: 50px;
        box-shadow: var(--shadySm);
    }
    #header .menu-opener::before,
    #header .menu-opener::after {
        background: var(--black);
    }
    /* Hamburger inset = Figma bar px-32. */
    #header .menu-opener {
        right: min(32px, 8vw);
    }
    /* Phone button: 34x34 square, 32px inset, centered in the 50 bar (Figma py-8). */
    .mobile-show.moreInfo {
        top: 8px;
        left: min(32px, 8vw);
    }
    .mobile-show.moreInfo a {
        width: 34px;
        height: 34px;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
        border-radius: 0;
    }
    /* Logo section: clear the 50 bar + 56 top pad; logo 290x80 centered. */
    .mobHd {
        padding-top: 106px;
        padding-bottom: 56px;
    }
    .mob-logo-section {
        max-width: none;
        padding: 0;
    }
    #mobLogo img {
        width: min(290px, 74vw);
        max-width: 290px;
    }
}


/* ===== FOOTER (Figma Desktop 2988:2237 / Mobile 2849:11817) — GLOBAL =====
   Navy band; logo (white via filter — one asset, John's call) left, Review + Contact
   menus right; legal row (copyright | fine-print). Mobile = centered stack. */
#footer {
    background-color: var(--footerBg);
    border-top: 2px solid rgba(255, 255, 255, 0.15);
}
/* Reuse the color extended logo, filter it white (avoids a 2nd asset). */
body #footer .foot .footer-logo img {
    filter: saturate(0) brightness(10);
    width: auto;
    height: clamp(64px, 5vw, 96px);
}
body #footer .foot .footer-logo { display: inline-block; }
/* Column headings = Overline 16/600/2.4px uppercase white. */
body #footer .footer-holder .servNav .h3,
body #footer .footer-holder .infoNav .h3,
body #footer .footer-holder .fLocation h3,
body #footer .footer-holder .loc h3 {
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.4px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--white);
    margin: 0 0 clamp(20px, 1.667vw, 32px);
}
/* Neutralize the accordion button chrome on the heading (desktop static).
   display:block + margin-bottom so the heading->links gap works (the .h3 is an
   inline <span>, so its own margin-bottom is ignored). */
body #footer .footer-holder .mod-btn.accordion {
    background: transparent;
    border: 0;
    padding: 0;
    width: auto;
    text-align: left;
    display: block;
    margin-bottom: clamp(24px, 1.667vw, 32px);
}
/* Links = Caption 16/400 white. */
body #footer .footer-holder .servNav a,
body #footer .footer-holder .loc .fAddress a,
body #footer .footer-holder .loc .tel-footer a {
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--white);
    text-decoration: none;
    padding: 0; /* base menu-link padding (10px 0) inflated the flex gap — remove so gap=24 net (Figma) */
}
body #footer .footer-holder .loc .practice:empty { display: none; }
body #footer .footer-holder .loc .fLocBox p { margin: 0; }
/* Social icons = 32 white, 24 gap. */
body #footer .footer-holder .social {
    display: flex;
    gap: 24px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
body #footer .footer-holder .social li { margin: 0; padding: 0; }
body #footer .footer-holder .social a { color: var(--white); display: inline-flex; }
body #footer .footer-holder .social a i { font-size: 28px; line-height: 1; color: var(--white); }
/* Legal row: 2px 25%-white top border, 14px white, copyright left | fine-print right. */
body #footer #btm.bottom {
    border-top: 2px solid rgba(255, 255, 255, 0.25);
    margin-top: clamp(40px, 4.17vw, 56px);
}
body #footer #btm .copyright,
body #footer #btm .bottom-nav a {
    font-family: var(--bodyFont);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--white);
    text-decoration: none;
}

/* ---- Desktop layout (>=1025): logo left, Review + Contact right, legal row ---- */
@media (min-width: 1025px) {
    #gt_float_wrapper {
        transition: bottom 0.3s ease;
    }
    body #footer .footer-holder {
        padding-top: clamp(40px, 2.92vw, 56px);
    }
    body #footer .footer-holder > .container {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }
    body #footer .footer-holder > .container > .foot {
        width: auto;
        flex: 0 0 auto;
        margin-right: auto;      /* push Review + Contact to the right */
        padding: 0;
    }
    body #footer .footer-holder > .container > .infoNav { display: none; } /* infoNav unassigned/empty */
    body #footer .footer-holder > .container > .servNav,
    body #footer .footer-holder > .container > .loc {
        width: min(398px, 26vw);
        flex: 0 0 auto;
        padding: 0;
        float: none;
    }
    /* panels open on desktop */
    body #footer .footer-holder .panel { max-height: none; overflow: visible; display: block; }
    body #footer .footer-holder .servNav .serv-nav {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-direction: column; gap: 24px;
    }
    body #footer .footer-holder .servNav .serv-nav li { margin: 0; padding: 0; }
    /* contact: address / phone / socials spaced 24 */
    body #footer .footer-holder .loc .fLocBox { display: flex; flex-direction: column; gap: 24px; }
    body #footer .footer-holder .loc .fLocBox p,
    body #footer .footer-holder .loc .fLocBox .social { margin: 0; }
    /* legal row: copyright left, fine-print right (DOM is nav-then-copyright → reverse) */
    body #footer #btm.bottom .container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        padding-top: 24px;
        padding-bottom: 24px;
    }
    body #footer #btm .copyright { margin: 0; }
    body #footer #btm .bottom-nav {
        display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; align-items: center;
    }
    body #footer #btm .bottom-nav li { margin: 0; padding: 0; display: flex; align-items: center; }
    body #footer #btm .bottom-nav li:not(:last-child)::after {
        content: '|'; margin-left: 8px; color: rgba(255, 255, 255, 0.5);
    }
}

/* ---- Mobile (<=1024): centered stack — logo, Contact, Review, legal ---- */
@media (max-width: 1024px) {
    body #footer .footer-holder > .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: clamp(32px, 8vw, 56px);
        padding-top: min(80px, 16vw);
    }
    body #footer .footer-holder > .container > div { width: 100%; padding: 0; float: none; }
    body #footer .footer-holder > .container > .infoNav { display: none; }
    body #footer .foot { order: 0; }
    body #footer .loc { order: 1; }        /* Contact before Review on mobile (Figma) */
    body #footer .servNav { order: 2; }
    body #footer .foot .footer-logo img { height: 80px; margin: 0 auto; display: block; }
    /* kill the accordion — everything expanded + centered */
    body #footer .footer-holder .mod-btn.accordion { pointer-events: none; text-align: center; width: 100%; padding: 0; }
    body #footer .footer-holder .mod-btn.accordion::after { display: none; }
    body #footer .footer-holder .panel { max-height: none !important; overflow: visible !important; display: block !important; }
    /* Contact centered */
    body #footer .loc .fLocation { display: flex; flex-direction: column; align-items: center; gap: 24px; }
    body #footer .loc .fLocation h3 { margin: 0; }
    body #footer .loc .fLocBox { display: flex; flex-direction: column; align-items: center; gap: 24px; }
    body #footer .loc .fLocBox p { margin: 0; }
    body #footer .footer-holder .social { justify-content: center; }
    /* Review menu: heading + horizontal pipe-separated links */
    body #footer .servNav .h3 { margin: 0 0 24px; }
    body #footer .servNav .serv-nav {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px;
    }
    body #footer .servNav .serv-nav li { margin: 0; padding: 0; display: flex; align-items: center; }
    body #footer .servNav .serv-nav li:not(:last-child)::after {
        content: '|'; margin-left: 16px; color: rgba(255, 255, 255, 0.5);
    }
    /* legal centered */
    body #footer #btm.bottom .container {
        display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
        padding-top: 24px; padding-bottom: 24px;
    }
    body #footer #btm .bottom-nav {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px;
        list-style: none; margin: 0; padding: 0;
    }
    body #footer #btm .bottom-nav li { margin: 0; padding: 0; }
    body #footer #btm .copyright { margin: 0; }
}


/* ===== DIFFERENTIATOR BAR (Figma homepage 7227:1743 py140/470h; interior 2871:1585 py100/486h) =====
   Blue band, 3 blocks (green-circle icon 80 + white checkmark list). Palm watermark. */
.home .diff,
.widget.widget-diff {
    position: relative;
    overflow: hidden;
    background-color: var(--primaryColor);
}
/* Homepage instance = py140 (no heading). Interior WIDGET instance = py100 WITH a heading +
   56 gap (Figma) — the widget keeps the base .widget.widget-diff py100, so only pad .home here. */
.home .diff {
    padding: clamp(80px, 7.29vw, 140px) 0;
}
/* Palm frond watermark bleeding off the top-right (Figma diff_bar_graphic 813x486). */
.home .diff::after,
.widget.widget-diff::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: min(42.34vw, 813px);
    height: min(25.31vw, 486px);
    background: url(images/diff_bar_graphic.svg) top right / contain no-repeat;
    pointer-events: none;
}
.home .diff .container,
.widget.widget-diff .container {
    position: relative;
    z-index: 1;
}
/* 3 blocks, 398 wide, gap 85, centered (capped 1364). */
.home .diff .row.flex,
.widget.widget-diff .row.flex {
    display: flex;
    flex-wrap: nowrap;              /* stay 3-across on desktop/tablet; mobile MQ stacks it */
    justify-content: center;
    align-items: flex-start;
    gap: min(85px, 4.427vw);        /* fluid gutter, no hard px */
    max-width: min(1364px, 100%);
    margin: 0 auto;
}
.home .diff .diffBox,
.widget.widget-diff .diffBox {
    flex: 1 1 0;                    /* equal, shrinkable columns — never force a wrap */
    width: auto;
    max-width: 398px;
    margin: 0;
    padding: 0;
}
/* Icon over checklist, 32 gap. Figma holds 32 at every breakpoint (desktop + mobile,
   homepage + interior) — a min() with a vw term shrank it to ~6px at 390. */
.home .diff .spWrap,
.widget.widget-diff .spWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.home .diff .diffImg,
.widget.widget-diff .diffImg {
    margin: 0;
    padding: 0;
}
/* The interior widget has no .spWrap — .diffImg/.diffContent are direct .diffBox children,
   so the gap above never applied and the icon sat flush on the checklist. Same 32 here. */
.widget.widget-diff .diffImg {
    margin-bottom: 32px;
}
.home .diff .diffImg img,
.widget.widget-diff .diffImg img {
    width: 80px;
    height: 80px;
}
/* Checklist: 24 gap; item = white check + Body 18 white, 16 gap, centered.
   (base .diffContent pad 8 / .diffList li pad 10-14 / .fas margin 5 all zeroed.) */
.home .diff .diffContent,
.widget.widget-diff .diffContent {
    padding: 0;
}
.home .diff .diffList,
.widget.widget-diff .diffList {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.home .diff .diffList li,
.widget.widget-diff .diffList li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
    color: var(--white);
}
.home .diff .diffList li i,
.widget.widget-diff .diffList li i,
.home .diff .diffList li .fas,
.widget.widget-diff .diffList li .fas,
.home .diff .diffList li .fa-check,
.widget.widget-diff .diffList li .fa-check {
    color: var(--white);
    font-size: 16px;
    margin: 0;
}
/* Interior diff WIDGET renders a heading (h2) on desktop (homepage's diff heading is
   mobile-only). Sans H3, white, centered, above the 3 columns. Match the base's
   `.widget.widget-diff .heading h2` specificity (0,3,1) — child loads after kindling. */
.widget.widget-diff .heading h2 {
    font-family: var(--bodyFont);
    font-size: var(--h3FontSize);
    line-height: var(--h3LineHeight);
    font-weight: 400;
    color: var(--white);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 clamp(32px, 2.917vw, 56px); /* Figma gap-56 heading->columns */
}

/* ===== NEWS BLOCKS (Figma 7240:8257 — half_content_masonry, 2 items) =====
   col0 (left): implant image top / copy bottom.  col1 (right, colReverse): copy top / collage bottom.
   Read row-wise that's img-left/copy-right then copy-left/collage-right = the Figma interleave.
   The masonry .text is transparent — no white-box artifact the old fw_content_half pair had.
   #id-scoped to out-order the ACFE-late section sheet. Copy = LOREM (Kristen). */

#stono-news {
    padding-top: clamp(80px, 7.29vw, 140px);
    padding-bottom: clamp(80px, 7.29vw, 140px);
    background-color: transparent;
}
/* Square corners (Figma) — kill the base 60px radius. Natural width (673 / 812), scaling
   down only when the column is narrower than the image. */
#stono-news .image img {
    border-radius: 0;
    display: block;
    max-width: 100%;
    height: auto;
}
/* Copy type: Serif H1 (48→64) + Body, 32 gap. */
#stono-news .text h2 {
    font-family: var(--headingFont);
    font-size: clamp(48px, 3.333vw, 64px); /* floor 48 = Mobile/H1, no snap at 1025 */
    line-height: var(--headingLineHeight);
    font-weight: var(--headingFontWeight);
    color: var(--black);
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 32px;
}
#stono-news .text p {
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
    color: var(--black);
    margin: 0;
}
#stono-news .text p + p { margin-top: 1em; }

@media (min-width: 1025px) {
    /* Natural-height copy so each column's space-between pins the blocks:
       left col -> image top / copy bottom; right col (reverse) -> copy top / collage bottom. */
    #stono-news .text {
        min-height: 0;
    }
    /* copy_item0 = bottom-left -> sits ~140 above the section floor (Figma pb140) */
    #stono-news .col:not(.colReverse) .text {
        padding-bottom: clamp(70px, 7.292vw, 140px);
    }
    /* copy_item1 = top-right -> sits ~140 below the image top (Figma pt140).
       min-height is what sets the masonry STAGGER: in Figma (7240:8257) row 2 starts 640
       below row 1, so the two images overlap by only 160. Sized to the copy instead, this
       box was 454, dropping row 2 186px too high -> 346 of overlap and a section 186 short.
       Pinning it to 640 fixes both halves of row 2 at once: the collage lands at 640, and
       the container grows to 640+890=1530, which hands the left column 276 of space-between
       slack — exactly the image->copy gap Figma wants there. Robust to copy length up to
       640-140=500. Fixed px on purpose: the images are natural-size above ~1500 so the
       stagger shouldn't scale, and below that they shrink while 640 holds, which errs
       toward LESS overlap — the direction Ali asked for.
       align-items is load-bearing with it: .text is a ROW flex container that the masonry
       sheet sets to align-items:center. That was a no-op while the box hugged its content,
       but at 640 it centred the copy and dropped the header to 233 instead of Figma's 140. */
    #stono-news .col.colReverse .text {
        padding-top: clamp(70px, 7.292vw, 140px);
        min-height: 640px;
        align-items: flex-start;
    }
    /* Implant (rect jpg) = box-shadow; collage (alpha webp) = silhouette drop-shadow. */
    #stono-news .col:not(.colReverse) .image img {
        box-shadow: var(--shadyMid);
    }
    #stono-news .col.colReverse .image img {
        box-shadow: none;
        filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.03));
    }
}

@media (max-width: 1024px) {
    /* Base already un-reverses .col (flex-direction:column) so each image is followed by
       its own copy: img1 -> copy1 -> collage -> copy2. Just retune spacing/type/shadow. */
    #stono-news {
        padding: min(32px, 8vw) 0 100px;
    }
    /* Base container is 90vw centered -> ~52px gutters. Force full-width + 32px padding
       so gutters are the site's 32px. */
    #stono-news .container.flex {
        gap: 0;
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    #stono-news .text {
        min-height: 0;
        padding: min(56px, 13.6vw) 0 min(80px, 19.4vw);
    }
    /* Last block's copy: let the section's own padding-bottom own the gap to the
       associations logos, so it's a single fixed 100 (Figma 7255:4349 -> 2849:11819)
       instead of that copy's 76 stacked on the section's 95. */
    #stono-news .col.colReverse .text {
        padding-bottom: 0;
    }
    /* Block 1 mobile shadow = small (2 layers); collage keeps the silhouette drop-shadow. */
    #stono-news .col:not(.colReverse) .image img {
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.10);
    }
    #stono-news .col.colReverse .image img {
        box-shadow: none;
        filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.03));
    }
    #stono-news .text h2 {
        font-size: min(48px, 12.3vw);
        margin-bottom: 24px;
    }
    #stono-news .text p {
        font-size: 16px;
    }
}


@media (max-width: 1024px) {
    /* Blocks stack, full width; watermark off. */
    .home .diff,
.widget.widget-diff {
        padding: min(80px, 19.4vw) 0;
    }
    .home .diff::after,
.widget.widget-diff::after {
        display: none;
    }
    /* Mobile-only H1 heading (wp_is_mobile in template): Instrument Sans H3, white, centered. */
    .home .diff .heading,
.widget.widget-diff .heading {
        margin-bottom: min(48px, 11.6vw);
    }
    .home .diff .heading h1,
.widget.widget-diff .heading h1 {
        font-family: var(--bodyFont);
        font-size: var(--h3FontSize);
        line-height: var(--h3LineHeight);
        font-weight: 400;
        color: var(--white);
        text-transform: none;
        text-align: center;
        margin: 0;
    }
    /* `body` prefix breaks a specificity TIE: interior_style's
       `.widget.widget-diff .row.flex{row-gap:40px}` is also (0,4,0) and loads after the child,
       so the interior bar stacked at 40 while the homepage stacked at 53. 56 = Figma, both
       frames — this is what puts interior and homepage on the same stacked gap. */
    body .home .diff .row.flex,
body .widget.widget-diff .row.flex {
        flex-direction: column;
        gap: 56px;
        max-width: 100%;
    }
    .home .diff .diffBox,
.widget.widget-diff .diffBox {
        width: 100%;
        max-width: 100%;
    }
}


/* ===== ASSOCIATIONS BANNER (Figma 7222:10293 — partners) =====
   Logo strip: 4 logos (ADA/AGD/AAID/OrthoFX) 260x80, gap 100, centered, no heading.
   Sits after the news blocks (pt 0); pb 140 before the reviews. */
.home .section-partners {
    background-color: transparent;
    padding: 0 0 clamp(80px, 7.29vw, 140px);
}
.home .section-partners .partners-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: min(100px, 5.21vw);
    list-style: none;
    margin: 0 auto;
    padding: 0;
}
.home .section-partners .partners-list li {
    flex: 0 0 auto;
    margin: 0;
}
.home .section-partners .partners-list li img {
    display: block;
    width: auto;
    height: 80px;
}
/* AGD (2nd) optically balanced at 80% per Figma — keep the 260 box, center the mark. */
.home .section-partners .partners-list li:nth-child(2) {
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home .section-partners .partners-list li:nth-child(2) img {
    height: 64px;
}

@media (max-width: 1024px) {
    /* Logos stack, 56 gap (Figma Mobile/Associations 2849:11819). */
    .home .section-partners {
        padding: 0 min(32px, 8vw) min(80px, 19.4vw);
    }
    /* width:100% + margin:0 are load-bearing. The base sets `margin: 0 auto` with no width;
       once the list becomes a COLUMN flex item, auto cross-axis margins suppress the stretch
       and size it to fit-content, which left the li's `width:100%` (parent partners.scss,
       <=567) resolving against an indefinite basis. The li collapsed to 130 while its img
       stayed 260, so ADA / AAID / OrthoFX overflowed 65px right of centre — only AGD looked
       right, because it's the one with an explicit 260 box + justify-content:center. */
    .home .section-partners .partners-list {
        flex-direction: column;
        gap: min(56px, 13.6vw);
        width: 100%;
        margin: 0;
    }
    .home .section-partners .partners-list li {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* ===== REVIEWS SCROLLER (Figma 7224:1589 — reviews Splide, one per view) =====
   Warm #F5F4F2 wash + 25% cloudy texture. Only the in-slide content is styled here —
   Splide owns .testimony/.splide__track/list/slide layout. */
.home .reviews {
    flex-direction: column;
    align-items: center;
    background-color: #F5F4F2;
    background-image: linear-gradient(rgba(245, 244, 242, 0.75), rgba(245, 244, 242, 0.75)),
                      url(images/reviews-texture.jpg);
    background-size: cover;
    background-position: center;
    padding: clamp(80px, 7.29vw, 140px) 0;
}
.home .reviews .heading {
    margin-bottom: 32px;
    text-align: center;
}
.home .reviews .heading h2 {
    font-family: var(--headingFont);
    font-size: var(--h1FontSize);
    line-height: var(--headingLineHeight);
    font-weight: var(--headingFontWeight);
    color: var(--black);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
/* Quote + reviewer stack, centered, 24 gap (kill the base 0 100px rQuote pad). */
.home .reviews .testCont .rQuote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0;
}
.home .reviews .testCont .rQuote p {
    display: block; /* lift the base -webkit-line-clamp:4 — Figma shows full quotes */
    -webkit-line-clamp: unset;
    overflow: visible;
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
    color: var(--black);
    text-align: center;
    margin: 0;
}
.home .reviews .attribWrap {
    width: 100%;
}
/* Reviewer name = Overline + Google icon, 16 gap, centered. */
body.home .reviews .attribWrap .tName.h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0;
}
/* Google icon: colorful G in a 24 white circle (Figma). */
.home .reviews .attribWrap .tName a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background: var(--white);
    border-radius: 50%;
}
.home .reviews .attribWrap .tName a img {
    width: 15px;
    height: 15px;
}

@media (max-width: 1024px) {
    .home .reviews {
        padding: 100px 0;
        background-image: none; /* Figma mobile = solid #F5F4F2, no texture */
    }
    /* Own the 100 at the section level. Splide mounts with arrows:false/pagination:false,
       so the only things under the reviewer were two inner bottom paddings the design
       has no room for — the slide's (.quotWrap 15) and the track's (.testimony 30) —
       which read as ~121 below vs 76 above. Figma 2849:11831 is 100/100. */
    .home .reviews .testimony,
    .home .reviews .quotWrap {
        padding-bottom: 0;
    }
    /* Re-clamp the quote on mobile. Unclamped, the reviews run 5 / 5 / 12 lines at 390,
       and Splide sizes .splide__track to the TALLEST slide with short slides top-aligned
       in it — so the two short reviews showed 168px of dead space (100 above / 268 below).
       5 = the short reviews' natural length at 390, so they are untouched and only the
       long one is trimmed, with the clamp's own ellipsis.
       Selector must carry .testCont to reach (0,4,1) — the base rule that un-clamps this
       paragraph is `.home .reviews .testCont .rQuote p`, so the plainer `.home .reviews
       .rQuote p` (0,3,1) silently loses. That's why the old font-size here was a no-op
       (it agreed with --bodyFontSize's 16px floor by luck); it's folded in below.
       max-height is the belt to the clamp's braces: .rQuote is a flex column, so the <p>
       is a flex item and its display is blockified (Chrome computes flow-root, not
       -webkit-box). Blink and Safari 18.4+ still clamp, but iOS 16/17 needs the real
       -webkit-box, so 7.5em (5 lines x the 1.5 body line-height) pins the height there —
       it just loses the ellipsis. Both must stay in step if the clamp count changes. */
    .home .reviews .testCont .rQuote p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        max-height: 7.5em;
        overflow: hidden;
        font-size: 16px;
    }
}


/* ===== FEATURED SERVICES (Figma 2849:11905 — feat_serv hover-expand accordion) =====
   Theme's expand + Learn-More-reveal kept; brand the title + overlay only.
   Title is already 32/40 from the base clamp — just drop uppercase/tracking, inset 40 (Figma p40). */
.home .feat-services .featContent .h4 {
    text-transform: none;
    letter-spacing: 0;
    margin-left: clamp(20px, 2.083vw, 40px);
}
/* Overlay ~50% at rest (Figma); active/hovered card lightens (Figma center card). */
.home .feat-services img {
    filter: brightness(0.5);
}
.home .featLink:hover img {
    filter: brightness(0.65);
}

/* Kill the "Learn More" reveal on touch. A tap latches :hover, so the parent's
   .featLink:hover .fade-in fired half a second after any tap. Also covers <=1024
   generally: the cards don't hover-expand there (parent sets flex-grow:0), so the
   reveal has nothing to reveal into. */
@media (hover: none), (max-width: 1024px) {
    .home .feat-services .featContent .fade-in {
        display: none;
    }
}


/* ===== CONTENT MODULE (Figma desktop 7213:7894 / mobile 7255:4365 — `content` section) =====
   Labelled "News Block" in the mockup but built as the `content` flexible layout: a centred
   Serif heading + body on the tan band, sitting between Featured Services and Special Offers.
   Tan + 25% texture is the same recipe as the reviews section (75% tan wash over the texture),
   and reuses that section's asset rather than adding a second near-identical one.
   #id-scoped to out-order the ACFE-late content.css, same as #stono-news. */
#stono-content {
    padding: clamp(100px, 7.29vw, 140px) 0;   /* 140 @1920, floors at the mobile spec's 100 */
    background-color: var(--tan);
    background-image: linear-gradient(rgba(245, 244, 242, 0.75), rgba(245, 244, 242, 0.75)),
                      url(images/reviews-texture.jpg);
    background-size: cover;
    background-position: center;
}
/* Figma insets the copy 555 each side of 1920 = an 810 column. col-lg-6 + offset-lg-3 gives
   820 at the 1640 container, so cap it at 810 and centre — auto margins also neutralise the
   offset's margin-left, landing it at exactly 555 from the viewport edge at 1920. */
#stono-content .container > [class*="col-lg-"] {
    width: 100%;
    max-width: 810px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}
#stono-content h2 {
    font-family: var(--headingFont);
    font-size: var(--h1FontSize);   /* clamp(48,3.333vw,64) = Figma's 48 mobile / 64 desktop */
    line-height: var(--headingLineHeight);
    font-weight: var(--headingFontWeight);
    color: var(--black);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 clamp(24px, 1.667vw, 32px);   /* Figma gap: 32 desktop / 24 mobile */
}
/* 18 flat, not --bodyFontSize: Figma specifies 18 at BOTH 1920 and 390 for this section (the
   news blocks drop to 16 on mobile — designer inconsistency, flagged, mockup followed). */
#stono-content p {
    font-size: 18px;
    line-height: var(--bodyLineHeight);
    color: var(--black);
    text-align: center;
    margin: 0;
}
#stono-content p + p {
    margin-top: 1em;
}

@media (max-width: 1024px) {
    /* Figma mobile = solid tan, no texture (same call as the reviews section). Section owns the
       32px gutters, so the container goes full-width — 390 - 64 = the mock's 326 copy width. */
    #stono-content {
        padding: 100px min(32px, 8vw);
        background-image: none;
    }
    #stono-content .container {
        width: 100%;
        max-width: none;
    }
}


/* ===== SPECIAL OFFERS (Figma 2849:11882 — offers, style 2) =====
   Blue band, "Our Special Offers" serif heading, 3 transparent white-bordered cards
   (green-circle icon + H4 title + Caption body + Overline Learn More). Palm bleeds left. */
.home .offers {
    position: relative;
    overflow: hidden;
    background-color: var(--primaryColor);
    padding: clamp(80px, 7.29vw, 140px) 0;
}
.home .offers::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: min(20.885vw, 401px);
    height: min(43.125vw, 828px);
    background: url(images/special_offers_graphic.svg) left top / contain no-repeat;
    pointer-events: none;
}
.home .offers .container,
.home .offers .offers-holder {
    position: relative;
    z-index: 1;
}
.home .offers .heading {
    text-align: center;
    margin-bottom: 50px;
}
.home .offers .heading h2 {
    font-family: var(--headingFont);
    font-size: var(--h1FontSize);
    line-height: var(--headingLineHeight);
    font-weight: var(--headingFontWeight);
    color: var(--white);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
/* 3 cards, gap 16, equal, capped 442. */
.home .offers .offers-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.home .offers .offers-list li {
    flex: 1 1 0;
    min-width: 0;
    max-width: 442px;
    margin: 0;
    padding: 0;
}
/* Card: transparent + white-15% border, p40, left-aligned. Per-child margins carry the
   Figma gaps (icon 32 / title 16 / body 32) — the parent's justify-content:space-between
   would otherwise redistribute a height-matched card's slack into every gap. */
.home .offers .box-offers {
    padding: 0;
    width: 100%;
    height: 100%;
}
.home .offers .box-offers .box-holder {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    box-shadow: var(--shadyMid);
    padding: clamp(24px, 2.083vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    height: 100%;
}
.home .offers .spcImg {
    margin: 0 0 32px;
    padding: 0;
    width: auto;
}
.home .offers .spcImg img {
    width: 80px;
    height: 80px;
    border-radius: 0;
}
/* Title = H4 24 medium, white, left. 16 to the body copy (Figma Main Copy gap). */
.home .offers .description {
    padding: 0;
    margin: 0 0 16px;
    width: 100%;
    text-align: left;
}
.home .offers .description .h4 {
    font-family: var(--bodyFont);
    font-size: var(--h4FontSize);
    line-height: var(--h4LineHeight);
    font-weight: 500;
    color: var(--white);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
/* Body = Caption 16, white, left. */
.home .offers .offers-info,
.home .offers .offers-info p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--white);
    text-align: left;
    margin: 0;
    padding: 0;
}
/* Learn More = Overline text link + white underline-fill (blue would vanish on the blue band). */
.home .offers .specWrap {
    margin: auto 0 0;  /* pin the CTA to the card floor; cards are height-matched on desktop */
    padding: 32px 0 0; /* Figma body->CTA gap; a floor-pinned CTA only ever grows it */
    bottom: 0;         /* parent offers.scss lifts .specWrap 20px <=1024 / 24px <=479 */
    width: auto;
    color: var(--white); /* card-hover sets the link to color:inherit — resolve it to white, not body black */
}
.home .offers .specWrap a {
    display: inline-block;
    position: relative;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--white);
}
.home .offers .specWrap a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--white);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.home .offers .specWrap a:hover::after {
    transform: scaleX(1);
}
/* Card hover (Figma variant 2834:981): white fill, tan border, all copy -> black, and the
   Learn More underline resolves to blue at full width. Icon is unchanged per the variant. */
.home .offers .offers-list li:hover .box-holder {
    background-color: var(--white);
    border-color: var(--tan);
}
.home .offers .offers-list li:hover .description .h4,
.home .offers .offers-list li:hover .offers-info,
.home .offers .offers-list li:hover .offers-info p,
.home .offers .offers-list li:hover .specWrap,
.home .offers .offers-list li:hover .specWrap a {
    color: var(--black);
}
.home .offers .offers-list li:hover .specWrap a::after {
    background: var(--primaryColor);
    transform: scaleX(1);
}
/* "See All Offers" = the Components Secondary button (white / black text -> tan on hover).
   Inherited .btn-primary painted it --primaryColor, identical to the band = invisible. */
.home .offers .btn.moreOff {
    background-color: var(--white);
    color: var(--black);
    border: 2px solid var(--tan);
}
.home .offers .btn.moreOff:hover,
.home .offers .btn.moreOff:focus-visible {
    background-color: var(--tan);
    color: var(--black);
}
/* Auto "Offers Expire" line not in the Figma. */
.home .offers .expires {
    display: none;
}

@media (max-width: 1024px) {
    .home .offers {
        padding: min(80px, 19.4vw) 0;
    }
    .home .offers::before {
        display: none;
    }
    .home .offers .heading {
        margin-bottom: min(48px, 11.6vw);
    }
    .home .offers .offers-list {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .home .offers .offers-list li {
        flex: 0 0 auto;
        width: 100%;
        max-width: 442px;
    }
}


/* ===== MAP / READY TO GET STARTED (Figma 2862:15238 — location, fw_map) =====
   Map inset 40 (desktop) / 32 (mobile) + floating white card: Sans H3 heading, green
   pin/phone/clock icons, address/phone, two-col hours.
   The homepage section and the interior fw_map WIDGET are instances of the SAME Figma
   component (2834:1061 — byte-identical), so both share this block. The widget does use
   #lg-address/#xs-address like the homepage; while these rules were .home-scoped it fell
   through to the parent baseline (812px map, full-bleed, 40px card padding). */
.home .section-location .fwMap #map,
.section-location.loc-widget .fwMap #map {
    height: clamp(360px, 29.17vw, 560px);
    box-shadow: none; /* parent kindling paints 0 10px 25px rgba(0,0,0,.1); no shadow in Figma at any breakpoint */
}
/* Figma wraps the map in a 40px frame (desktop); mobile retunes this to 32 below. */
.home .section-location .map-block.fwMap,
.section-location.loc-widget .map-block.fwMap {
    padding: 40px;
}
/* Address/phone links: no underline by default, underline on hover. */
.home .section-location .row-location a,
.section-location.loc-widget .row-location a { text-decoration: none; }
.home .section-location .row-location a:hover,
.section-location.loc-widget .row-location a:hover { text-decoration: underline; }
.home .section-location #lg-address,
.section-location.loc-widget #lg-address {
    left: calc(40px + 12.4%); /* 40 map inset + Figma's 238 card offset from the map edge */
    width: min(640px, 48vw);
}
.home .section-location #lg-address .address-holder,
.section-location.loc-widget #lg-address .address-holder {
    padding: clamp(36px, 2.92vw, 56px) clamp(32px, 4.17vw, 80px);
}
/* Heading = Instrument Sans H3 32, no icon indent, 32 gap to contact links.
   Weight 500 per Ali's QA note — Figma's "Desktop/H3: Subheader" token is 400. */
.home .section-location #lg-address .row-location.row-place .h4,
.section-location.loc-widget #lg-address .row-location.row-place .h4 {
    font-family: var(--bodyFont);
    font-size: var(--h3FontSize);
    line-height: 1.25;
    font-weight: 500;
    color: var(--black);
    padding-left: 0;
    margin: 0 0 clamp(20px, 1.667vw, 32px);
    text-transform: none;
    letter-spacing: 0;
}
/* Icons green, 18. */
.home .section-location #lg-address .pin,
.section-location.loc-widget #lg-address .pin,
.home .section-location #lg-address .pin i,
.section-location.loc-widget #lg-address .pin i {
    color: var(--accentGreen);
    font-size: 18px;
    padding: 0;
}
/* Body copy = Body 18, 24 between rows (Figma gap-24). */
.home .section-location #lg-address address,
.section-location.loc-widget #lg-address address {
    font-size: 18px;
    line-height: 1.5;
}
.home .section-location #lg-address .row-location.row-place .row,
.section-location.loc-widget #lg-address .row-location.row-place .row {
    gap: 16px;
    margin: 0 0 clamp(16px, 1.25vw, 24px);
}
.home .section-location #lg-address .row-location.row-tel,
.section-location.loc-widget #lg-address .row-location.row-tel {
    gap: 14px;
    margin-bottom: 0;
}
.home .section-location #lg-address .row-location .place span,
.section-location.loc-widget #lg-address .row-location .place span,
.home .section-location #lg-address address .row-location a,
.section-location.loc-widget #lg-address address .row-location a {
    font-size: 18px;
    line-height: 1.5;
}
/* Clock row: 24 gap above (from phone), icon gap-16, two-col hours tight (gap-8). */
.home .section-location #lg-address .shedule,
.section-location.loc-widget #lg-address .shedule {
    margin-top: clamp(16px, 1.25vw, 24px);
}
.home .section-location #lg-address .shedule .row,
.section-location.loc-widget #lg-address .shedule .row {
    gap: 16px;
}
.home .section-location #lg-address .shedule dl,
.section-location.loc-widget #lg-address .shedule dl {
    grid-template-columns: max-content max-content;
    column-gap: 8px;
    row-gap: 0;
    font-size: 18px;
    line-height: 1.5;
}
.home .section-location #lg-address .shedule dt,
.section-location.loc-widget #lg-address .shedule dt,
.home .section-location #lg-address .shedule dd,
.section-location.loc-widget #lg-address .shedule dd {
    width: auto;
    font-size: 18px;
    line-height: 1.5;
}

/* Mobile (Figma 2849:11818): map on top (326x240), stacked copy below;
   Serif 48 heading, Body 16, px-32 gutters, 56 gap, pt-32 pb-100. */
@media (max-width: 1024px) {
    .home .section-location #lg-address,
.section-location.loc-widget #lg-address { display: none; }
    .home .section-location #xs-address,
.section-location.loc-widget #xs-address { display: block; }
    .home .section-location .map-block.fwMap,
.section-location.loc-widget .map-block.fwMap {
        display: flex;
        flex-direction: column;
        gap: min(56px, 14.4vw);
        padding: min(32px, 8.2vw) min(32px, 8.2vw) min(100px, 25.6vw);
    }
    .home .section-location .fwMap #map,
.section-location.loc-widget .fwMap #map {
        order: 1;
        width: 100%;
        height: min(240px, 61.5vw);
    }
    .home .section-location #xs-address,
.section-location.loc-widget #xs-address {
        order: 2;
        width: 100%;
    }
    .home .section-location #xs-address .address-holder,
.section-location.loc-widget #xs-address .address-holder {
        padding: 0;
    }
    .home .section-location #xs-address .row-location.row-place .h4,
.section-location.loc-widget #xs-address .row-location.row-place .h4 {
        font-family: var(--headingFont);
        font-size: var(--h1FontSize);
        line-height: 1.15;
        font-weight: 400;
        color: var(--black);
        padding-left: 0;
        margin: 0 0 clamp(24px, 8.2vw, 32px);
        text-transform: none;
        letter-spacing: 0;
    }
    .home .section-location #xs-address .pin,
.section-location.loc-widget #xs-address .pin,
.home .section-location #xs-address .pin i,
.section-location.loc-widget #xs-address .pin i {
        color: var(--accentGreen);
        font-size: 18px;
        padding: 0;
    }
    .home .section-location #xs-address address,
.section-location.loc-widget #xs-address address {
        font-size: 16px;
        line-height: 1.5;
    }
    .home .section-location #xs-address .row-location .place span,
.section-location.loc-widget #xs-address .row-location .place span,
.home .section-location #xs-address address .row-location a,
.section-location.loc-widget #xs-address address .row-location a {
        font-size: 16px;
        line-height: 1.5;
    }
    .home .section-location #xs-address .row-location.row-place .row,
.section-location.loc-widget #xs-address .row-location.row-place .row {
        gap: 16px;
        margin: 0 0 24px;
    }
    .home .section-location #xs-address .row-location.row-tel,
.section-location.loc-widget #xs-address .row-location.row-tel {
        gap: 16px;
        margin-bottom: 0;
    }
    .home .section-location #xs-address .shedule,
.section-location.loc-widget #xs-address .shedule {
        margin-top: 24px;
    }
    .home .section-location #xs-address .shedule .row,
.section-location.loc-widget #xs-address .shedule .row {
        gap: 16px;
    }
    .home .section-location #xs-address .shedule dl,
.section-location.loc-widget #xs-address .shedule dl {
        grid-template-columns: max-content max-content;
        column-gap: 8px;
        row-gap: 0;
        font-size: 16px;
        line-height: 1.5;
    }
    .home .section-location #xs-address .shedule dt,
.section-location.loc-widget #xs-address .shedule dt,
.home .section-location #xs-address .shedule dd,
.section-location.loc-widget #xs-address .shedule dd {
        width: auto;
        font-size: 16px;
        line-height: 1.5;
    }
}


/* ===== FAQ (Figma 7222:10301 — faq, DESKTOP-ONLY) =====
   Navy band, 2-col split: Serif-64 heading left (536), borderless divider-split
   accordion right (950). White text + white +/- icon. NOT in the mobile homepage
   frame (Map->Footer) → hidden <=1024. Overrides the theme's usual stacked white cards.

   Int-D3: scope widened from `.home` to both `.home` and `.page` so the INTERIOR FAQs match
   (Cosmetic 24, Sedation 27, Dental Implants 17185) — same reasoning, and the same fix, as the
   interior map in Int-D5. Two things made interior worse than merely unstyled:
   1. The interior FAQ is NOT an ACFE section — the parent's `page.php` renders it from a plain
      `faqs` repeater on any non-front page. Per-section CSS is only enqueued for sections listed
      in the ACFE `sections` field, so `faq.min.css` never loads there at all. That's why this
      block now also carries the handful of BASELINE declarations it used to inherit from
      faq.scss (`position`/`display` on .accordion, the ::after glyph + absolute placement,
      `.panel{max-height:0}` and its `.show` counterpart). They're identical to the parent's
      values, so the homepage is unaffected. Without `max-height:0` every answer rendered OPEN.
   2. `page.php` labels the question `<span class="h4">` while section-faq.php uses `<h4>` —
      hence both `h4` and `.h4` are targeted below. The bare `h4` selector silently missed
      every interior question.
   Scopes are written out per selector (`.home …, .page …`), not grouped with `:is()`: WP
   Rocket's Remove Unused CSS can't match `:is()` and prunes the whole rule (live backgrounds
   dropped). Keep them expanded. Interior FAQ has no Figma frame — matching the homepage
   treatment is the deliberate call. */
.home .faq,
.page .faq {
    background-color: var(--black);
    padding: clamp(64px, 7.29vw, 140px) 0;
}
.home .faq .container,
.page .faq .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(20px, 2.6vw, 90px);   /* was 8vw — overflowed the holder (+carets) past the viewport on narrow desktops */
}
/* Heading = Instrument Serif 64, white, left, 536 col. */
.home .faq .heading,
.page .faq .heading {
    flex: 0 0 auto;
    width: min(536px, 32.7vw);
    margin: 0;
    text-align: left;
}
.home .faq .heading h2,
.page .faq .heading h2 {
    font-family: var(--headingFont);
    font-size: var(--h1FontSize);
    line-height: 1.15;
    font-weight: 400;
    color: var(--white);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
/* FAQ list = 950 col; kill bootstrap col-lg-10 offset-lg-1. */
.home .faq .faq-holder,
.page .faq .faq-holder {
    flex: 0 0 auto;
    width: min(880px, 53vw);
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
/* Items: borderless, 24 gap, 2px 15%-white divider between (none after last). */
.home .faq .faq-item,
.page .faq .faq-item {
    margin: 0 0 24px;
    padding: 0 0 24px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
    transition: none;
}
.home .faq .faq-item:last-child,
.page .faq .faq-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
/* Question: text left (Sans 24 white) + white +/- icon at the right edge. */
.home .faq .question.accordion,
.page .faq .question.accordion {
    position: relative; /* the ::after +/- icon is absolutely placed against this */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 44px 0 0;
    background: transparent;
    border: 0; /* kill the default <button> 2px outset border */
    width: 100%;
    cursor: pointer;
    text-align: left;
}
.home .faq .question.accordion h4,
.home .faq .question.accordion .h4,
.page .faq .question.accordion h4,
.page .faq .question.accordion .h4 {
    font-family: var(--bodyFont);
    font-weight: 400;
    font-size: var(--h4FontSize);
    line-height: 1.25;
    letter-spacing: 0; /* base .accordion leaks 2.4px Overline tracking; Figma question = 0 */
    color: var(--white);
    text-align: left;
    text-transform: none; /* baseline: interior renders the questions UPPERCASE without this */
    margin: 0; /* baseline (faq.scss `h4,.h4{margin:0}`). Without it interior_style's bare
        heading rhythm — the same `clamp(40px,4.167vw,80px) 0 24px` behind Int-D4 — hit the
        question's `.h4` and made every interior button 134px tall against the homepage's 30. */
    pointer-events: none; /* clicks fall through to the .accordion button — the trunk
        general.js accordion delegation checks e.target (not closest), so clicking the
        h4 text otherwise never toggles. FLAG: trunk bug, see hand-off note. */
}
.home .faq .question.accordion::after,
.page .faq .question.accordion::after {
    content: "\f067"; /* fa-plus — baseline, needed because faq.css never loads on interior */
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free", fantasy;
    font-weight: 900;
    display: inline-block;
    width: 24px;
    font-size: 24px;
    color: var(--white);
}
/* Answer: white body, aligned under the question when open. */
.home .faq .answer.panel,
.page .faq .answer.panel {
    display: block;
    max-height: 0; /* baseline: without this every interior answer rendered open */
    overflow: hidden;
    color: var(--white);
    transition: all 0.75s linear;
}
.home .faq .answer.panel.show,
.page .faq .answer.panel.show {
    max-height: 750px;
    padding: 16px 44px 0 0;
}
.home .faq .answer,
.page .faq .answer,
.home .faq .answer p,
.page .faq .answer p,
.home .faq .answer li,
.page .faq .answer li {
    color: var(--white);
    font-size: var(--bodyFontSize);
    line-height: 1.5;
    margin: 0;
}

/* Mobile: no Figma frame for this — stack single-column (heading over accordion),
   32 gutters, Serif heading auto-scales to 48 via --h1FontSize. (John: stack on mobile.) */
@media (max-width: 1024px) {
    .home .faq,
.page .faq {
        padding: min(80px, 16vw) 0;
    }
    .home .faq .container,
.page .faq .container {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(24px, 8vw, 40px);
        width: 100%;
        padding: 0 min(32px, 8vw);
    }
    .home .faq .heading,
.page .faq .heading,
.home .faq .faq-holder,
.page .faq .faq-holder {
        width: 100%;
    }
}

/* INTERIOR MAP WIDGET (am_fw_map_widget): folded into the Map Block above — the widget uses
   the same #lg-address/#xs-address markup as the homepage, so the widened location scope there
   now covers it and this separate block would only re-state (and contradict) those rules.
   Heading TEXT is still the widget's config ("Why not pay a visit upon us?" — Figma says
   "Ready to Get Started?"); flagged, content not touched. */

/* ===== INTERIOR BANNER (Figma Desktop 3798:1451 1920x560 / Mobile 3798:1471 stacked) =====
   Desktop = clean 50/50: solid light #f5f4f2 panel LEFT (breadcrumb top / Serif-64 title
   bottom, #212B37) + operatory photo RIGHT (the opaque 50% panel covers the full-bleed
   photo's left half — no image repositioning). Mobile = stacked: photo (240h) on TOP, light
   panel below (Serif-48 title, NO breadcrumb). Base interior_style = navy gradient over a
   full-bleed photo; `body` prefix out-specifies interior_style (loads after the child). */
/* --- shared --- */
body .promo.bar.bar-title .ban-content { background: #f5f4f2; }
body .promo.bar.bar-title .tWrap h1,
body .promo.bar.bar-title .tWrap h2 {
    font-family: var(--headingFont);
    line-height: 1.15;
    font-weight: var(--headingFontWeight);
    color: var(--black);
    text-transform: none;
}
body .promo.bar.bar-title .breadcrumbs-block,
body .promo.bar.bar-title .breadcrumbs-block a {
    color: var(--black);
    font-family: var(--bodyFont);
    font-size: 14px;
}
/* Breadcrumb separator spacing — base carets sit flush against the text. */
body .promo.bar.bar-title .breadcrumbs-block .fa-caret-right {
    margin: 0 8px;
}
/* Title fills the panel content width (base flex shrink-wraps .tWrap to ~366, forcing the
   title to wrap far too early instead of using the panel). */
body .promo.bar.bar-title .tWrap {
    width: 100%;
}

@media (min-width: 1025px) {
    /* 50/50 split — panel left 50%, photo right 50% (960x560 img fills it 1:1). */
    body .promo.bar.bar-title .ban-content {
        width: 50%;
        padding: clamp(24px, 1.667vw, 32px) clamp(32px, 7.604vw, 146px) clamp(36px, 2.917vw, 56px) clamp(32px, 7.292vw, 140px);
    }
    body .promo.bar.bar-title .tWrap h1,
    body .promo.bar.bar-title .tWrap h2 {
        font-size: clamp(40px, 3.333vw, 64px);
    }
    body .promo.bar.bar-title .ban-image {
        left: auto;
        right: 0;
        width: 50%;
    }
}

@media (max-width: 1024px) {
    /* Stacked — photo (2nd in DOM) on top via column-reverse, panel below. */
    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: auto;
        right: auto;
        width: 100%;
        height: min(240px, 61.54vw);   /* Figma 240 @ 390 */
        min-height: 0;
    }
    body .promo.bar.bar-title .ban-content {
        width: 100%;
        min-height: 0;
        padding: min(80px, 20.5vw) min(32px, 8.2vw) min(32px, 8.2vw);   /* Figma pt80 / px32 / pb32 */
    }
    body .promo.bar.bar-title .tWrap h1,
    body .promo.bar.bar-title .tWrap h2 {
        font-size: min(48px, 12.3vw);   /* Figma mobile 48 */
    }
    body .promo.bar.bar-title .breadcrumbs-block {
        display: none;   /* Figma mobile banner omits the breadcrumb */
    }
}

/* ===== INTERIOR CONTENT — the_content() typography (Figma Page Content 2849:11789) =====
   Base interior_style gives the 1088 centered column; this is the Stono brand layer.
   `body` prefix out-specifies interior_style (loads after the child). */
/* Body + list text = Sans 18 / 1.5, brand black. */
body .entry.entry-add p,
body .entry.entry-add li {
    font-size: var(--bodyFontSize);
    line-height: 1.5;
    color: var(--black);
}
/* Content section headings (Figma content "Title" = Instrument Serif). h2 = 48, h3 = Serif
   32 (content treatment, not the global Sans h3), h4 = Sans 24 — all at the design tokens
   (base interior_style caps h3/h4 below at 26/20). */
body .entry.entry-add h2,
body .entry.entry-add .h2 {
    font-family: var(--headingFont);
    font-size: clamp(32px, 2.5vw, 48px);
    line-height: 1.15;
    font-weight: var(--headingFontWeight);
    color: var(--black);
    text-transform: none;
}
body .entry.entry-add h3,
body .entry.entry-add .h3 {
    font-family: var(--headingFont);
    font-size: var(--h3FontSize);
    line-height: var(--h3LineHeight);
    font-weight: var(--headingFontWeight);
    color: var(--black);
    text-transform: none;
}
body .entry.entry-add h4,
body .entry.entry-add .h4 {
    font-family: var(--bodyFont);
    font-size: var(--h4FontSize);
    line-height: var(--h4LineHeight);
    font-weight: 500;
    color: var(--black);
    text-transform: none;
}
/* Int-D4: headings align with the tops of their images. interior_style gives EVERY heading
   `margin: clamp(40px, 4.167vw, 80px) 0 24px` from a bare `h1,.h1,h2,…` selector (0,1,0) — the
   interior heading rhythm, which has to stay — so the Meet-the-Team / Doctor rows sat exactly
   80 below their headshots. A column's top edge IS the alignment reference, so nothing leading
   one should carry a top margin. Scoped to su_column, which is what makes this cover the Team
   page and both Doctor pages at once.
   TWO rules, and the empty-<p> one is not optional: wpautop leaves an empty `<p></p>` as the
   first child of every su_column (the newline after the shortcode), so the heading is the
   SECOND element child and `:first-child` cannot reach it — hence `:first-of-type`. That empty
   p is zero-height but still carries a bottom margin, which would collapse with the heading's
   top margin and keep the gap open, so it has to leave the flow entirely. */
body .entry .su-column-inner > p:empty {
    display: none;
}
body .entry .su-column-inner > h1:first-of-type,
body .entry .su-column-inner > h2:first-of-type,
body .entry .su-column-inner > h3:first-of-type,
body .entry .su-column-inner > h4:first-of-type,
body .entry .su-column-inner > h5:first-of-type,
body .entry .su-column-inner > h6:first-of-type {
    margin-top: 0;
}
/* Int-D8: the two images below the Doctor copy sat 27px out of line. The su_columns are
   `float: left` and the page content has a stray `<br>` BETWEEN them — it opens a line box
   after the first float, pushing the second down by exactly one body line-height (18 x 1.5).
   Not a baseline issue: `vertical-align: top` on the columns provably does nothing to floats.
   Killed in CSS rather than editing post_content so it ships with the theme and covers any
   other page carrying the same shortcode artifact. */
body .entry .su-row > br {
    display: none;
}

/* Breathing room under a standalone centred content image — the Meet-the-Team group photo.
   It only had the wrapping <p>'s 16px, which read tight once Int-D4 removed the 80px the first
   heading used to contribute. Set on the <p>, NOT the image: the image's own bottom margin
   collapses into the p's (no padding/border between them) and the larger simply wins, so an
   image-side value doesn't reliably add up. `> p >` is what keeps this off the images inside
   su_columns — the Doctor portraits are aligncenter too, but they sit in .su-column-inner. */
body .entry.entry-add > p:has(> img.aligncenter) {
    margin-bottom: 56px;
}

/* Int-D8: a lone centred image CLOSING interior copy — the family photo at the foot of both
   Meet-the-Doctor pages — read as dropped in rather than placed: it rendered at whatever width
   the upload happened to be (400 hardcoded / 400 natural, fixed px at every viewport) and sat
   only 27px below the copy, that 27 being nothing but the su_column shortcode's own 1.5em row
   margin. Now it takes the same width ramp as the site's designed content image and the
   interior 80px heading rhythm above it. The two margins are adjacent siblings, so the 80
   COLLAPSES with that 27 rather than adding to it — the gap lands on 80, not 107.
   `:last-child` is load-bearing: it scopes this to "the image that ends the page" and so keeps
   both declarations off the Meet-Our-Team group photo, which is :first-child of .entry and
   keeps the G3 spacing above. It also fails safe — a trailing empty <p> would no-op the rule
   rather than mis-space a page. */
body .entry.entry-add > p:last-child:has(> img.aligncenter) {
    margin-top: clamp(40px, 4.167vw, 80px);
}
body .entry.entry-add > p:last-child > img.aligncenter {
    width: clamp(240px, 20.73vw, 398px);
    height: auto;
}

/* Int-D8: the PAIR of photos closing Dr. Game's page (16148) — the only Doctor page with two.
   Same 27px of non-spacing above as the lone image, so it gets the same interior rhythm; the 80
   collapses with the previous row's 27 rather than adding to it, landing on 80 not 107.
   The other half of this note — the taller photo on the left — is a straight swap of the two
   <img> tags in the page content (James, 2026-08-04), NOT a CSS reorder. That's deliberate: the
   short 400x300 landscape used to sit first and open a 333px dead area beneath it, and swapping
   in the content keeps DOM order matching visual order. Nothing here re-orders anything, so
   don't go looking for it.
   PAGE-SCOPED ON PURPOSE — do not "improve" this into a structural selector. The Smile Gallery
   (25765) also ends in an su-row of two 1/2 columns holding a single image each, and it wants no
   spacing above its final row. The only markup difference is aligncenter vs alignnone, far too
   thin a thread to hang this on. */
body.page-id-16148 .entry > .su-row:last-of-type {
    margin-top: clamp(40px, 4.167vw, 80px);
}

/* (List item spacing left at the base matchbox interior rhythm — shared across Lyon/PR,
   not Figma-specified here. Revisit trunk-wide if the sprawl needs tightening.) */
/* Floated image = Figma 398 wide w/ large drop shadow. Radius comes from --imgBorderRad
   (Int-D6) — this rule is (0,3,1) and owns the floated pair, so hardcoding 0 here was what
   kept them square while the rest of the interior images rounded. */
body .entry.entry-add .alignright,
body .entry.entry-add .alignleft {
    width: clamp(240px, 20.73vw, 398px);
    height: auto;
    border-radius: var(--imgBorderRad);
    box-shadow: 0 50px 60px rgba(0, 0, 0, 0.05);
}
body .entry.entry-add .alignright { margin: 0 0 clamp(16px, 1.667vw, 32px) clamp(24px, 2.6vw, 50px); }
body .entry.entry-add .alignleft  { margin: 0 clamp(24px, 2.6vw, 50px) clamp(16px, 1.667vw, 32px) 0; }
@media (max-width: 1024px) {
    /* 56 -> 32 under the standalone centred image on mobile. */
    body .entry.entry-add > p:has(> img.aligncenter) {
        margin-bottom: 32px;
    }
    /* Int-D8: the closing image goes full-width like every other mobile content image — the
       desktop ramp bottoms out at 240px, which would leave it floating in a 333px column. */
    body .entry.entry-add > p:last-child > img.aligncenter {
        width: 100%;
    }
    /* Int-D8: the closing pair stacks here, and the floated columns left them with a literal 0
       between — the two photos were physically touching. `:last-of-type`, not `+`, because the
       shortcode leaves a stray node between the two columns that breaks adjacency. */
    body.page-id-16148 .entry > .su-row:last-of-type > .su-column:last-of-type {
        margin-top: 32px;
    }
    /* Content images go full-width block on mobile (Figma mobile = full-width image, no float);
       a floated 240 in a ~352 column leaves unusable text-wrap space. */
    body .entry.entry-add .alignright,
    body .entry.entry-add .alignleft {
        float: none;
        width: 100%;
        margin: 0 0 clamp(24px, 6vw, 32px);
    }
}

/* ===== SERVICES PAGE grid (page-templates/services-page.php — servBlock/servCard) =====
   No Figma services-page frame; branded to the design system + the site's square-card motif.
   3-up white square cards + shadyMid, Sans category headings, Sans service lists.
   All card text is --black; links differentiate by underline-on-hover, not colour (ali-pass). */
body .servBlock.row.flex.wrap {
    padding: clamp(40px, 4.167vw, 80px) 0 0;
    gap: min(40px, 2.083vw);
    align-items: stretch;
    justify-content: flex-start;
}
body .servBlock .servCard {
    width: calc((100% - 2 * min(40px, 2.083vw)) / 3);
    max-width: none;
    background: var(--white);
    box-shadow: var(--shadyMid);
    border-radius: 0;
    padding: clamp(28px, 2.5vw, 48px);
}
/* `.entry-add` in the selector is load-bearing: interior_style's `.entry.entry-add .h3`
   is (0,3,0) and loads after the child, so plain `body .servCard .h3` (0,2,1) lost. */
body .entry-add .servCard h3,
body .entry-add .servCard .h3 {
    font-family: var(--bodyFont);
    font-size: 24px;   /* fixed, not the --h4 clamp — Ali asked for 24 flat */
    line-height: var(--h3LineHeight);
    font-weight: var(--headingFontWeight);
    color: var(--black);
    text-transform: none;
    display: block;   /* .h3 is a <span> (inline) → block so the bottom margin takes effect */
    margin: 0 0 clamp(16px, 1.25vw, 24px);   /* clamped, 24px ceiling */
}
body .servCard h3 a,
body .servCard .h3 a { color: inherit; text-decoration: none; }
/* Title stays black on hover — underline only. */
body .servCard h3 a:hover,
body .servCard .h3 a:hover { text-decoration: underline; }
body .servBlock .servCard p {
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: 1.5;
    color: var(--black);
    margin: 0;
}
body .servCard p a { color: var(--black); text-decoration: none; }
/* Beats the site-wide `body .entry-add p a:hover{color:var(--primaryColor)}` (0,2,3 — ties
   and loads later), which would otherwise turn these blue on hover. Cards stay all-black;
   links read as links via the underline. Site-wide prose links keep their primary hover. */
body .entry-add .servCard p a:hover { color: var(--black); text-decoration: underline; }
/* Closing CTA line below the grid. */
body .servBtmCon {
    margin-top: clamp(40px, 4.167vw, 80px);
    font-size: var(--bodyFontSize);
    line-height: 1.5;
}

@media (max-width: 1024px) {
    body .servBlock.row.flex.wrap { gap: min(24px, 6vw); }
    /* full-width stack; override base .servCard{width:90%;margin:auto} which
       otherwise centers the middle row at 90% (uneven widths — ali-pass) */
    body .servBlock.row.flex.wrap .servCard { width: 100%; margin: 0; }
}

/* ===== SPECIAL OFFERS PAGE grid (.entry-add .offers-list — box-offers cards) =====
   Same offer-card component as the homepage `offers` section, but on a WHITE page (homepage
   cards are white-on-blue-band). White square cards + shadyMid, dark text, primary Learn More.
   Scoped to `.entry-add .offers-list` (landing only; homepage's is `.home .offers`). */
body .entry-add .offers-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: min(24px, 1.667vw);
    margin: clamp(40px, 4.167vw, 80px) 0 0;
    padding: 0;
    list-style: none;
}
/* Fixed 3-up basis, NOT `flex: 1 1 0`. With grow enabled a PARTIAL trailing row stretched its
   cards to the 442 cap while full rows stayed 352 — measured 352/352/352 + 442 at 4 offers and
   + 442/442 at 5. Today's 6 offers happen to fill two rows evenly, so it only shows up as
   offers expire. 32px = 2 x the 16px gap interior_style sets on the list (it out-specifies the
   child's gap at (0,3,0), so 16 is the real value here). max-width stays as a ceiling guard;
   the <=1024 block below re-enables grow for the stacked layout. */
body .entry-add .offers-list li {
    flex: 0 0 calc((100% - 32px) / 3);
    min-width: min(280px, 100%);
    max-width: 442px;
    margin: 0;
    padding: 0;
}
body .entry-add .offers-list .box-offers { padding: 0; width: 100%; height: 100%; }
body .entry-add .offers-list .box-holder {
    background: var(--white);
    border: 0;
    border-radius: 0;
    box-shadow: var(--shadyMid);
    padding: clamp(28px, 2.5vw, 48px);
    display: flex;
    flex-direction: column;
    /* Left-aligned like the homepage card (Ali, via James). This is what left-aligns the
       icon and the Learn More link — both are width:auto, so they follow align-items. */
    align-items: flex-start;
    justify-content: center;   /* balance cards regardless of icon/CTA presence */
    /* gap:0 + per-child margins, matching the homepage white card exactly (icon 32 /
       title 16 / body->CTA 32). A single uniform gap put 20px in all three places. */
    gap: 0;
    height: 100%;
}
body .entry-add .offers-list .spcImg { margin: 0 0 32px; padding: 0; width: auto; }
body .entry-add .offers-list .spcImg img { width: 80px; height: 80px; border-radius: 0; }
body .entry-add .offers-list .description { padding: 0; margin: 0 0 16px; width: 100%; text-align: left; }
body .entry-add .offers-list .description .h4 {
    font-family: var(--bodyFont);
    font-size: var(--h4FontSize);
    line-height: var(--h4LineHeight);
    font-weight: 500;
    color: var(--black);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}
body .entry-add .offers-list .offers-info,
body .entry-add .offers-list .offers-info p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
    text-align: left;
    margin: 0;
    padding: 0;
}
/* Learn More = Overline link, left-aligned. Text is --black to match the homepage card's
   WHITE (hover) variant, where li:hover resolves the copy to --black and only the underline
   stays --primaryColor. The interior card is permanently in that white state. */
body .entry-add .offers-list .specWrap {
    margin: 0;
    padding: 32px 0 0;   /* Figma body->CTA gap, same as the homepage card */
    width: auto;
    color: var(--black);
}
body .entry-add .offers-list .specWrap a {
    display: inline-block;
    position: relative;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--black);
}
body .entry-add .offers-list .specWrap a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--primaryColor);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
body .entry-add .offers-list .specWrap a:hover::after { transform: scaleX(1); }

@media (max-width: 1024px) {
    body .entry-add .offers-list li { flex: 1 1 100%; max-width: none; }   /* stack on mobile */
}

/* ===== CONTACT FORM (.conForm navy band — page-templates/contact-page.php) =====
   Base .conForm/.formWrap live in interior_style; brand the CF7 fields + submit
   here. Cols keep bootstrap's 12px gutter (no new flex gap → no wrap). */
body .conForm .formWrap .row.flex { margin-bottom: min(24px, 1.667vw); align-items: center; }
body .conForm .formWrap .row.flex:last-of-type { margin-bottom: 0; }

/* placeholder duplicates the label — sr-only it so it keeps a11y without
   reserving a phantom line that pushes fields below the New Patient? radios */
body .conForm .formWrap label.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

body .conForm .formWrap input[type=text],
body .conForm .formWrap input[type=email],
body .conForm .formWrap input[type=tel],
body .conForm .formWrap textarea {
    width: 100%;
    background: var(--white);
    border: 0;
    border-radius: 0;
    padding: clamp(12px, 1.04vw, 18px) clamp(14px, 1.25vw, 20px);
    font-family: var(--bodyFont);
    font-size: 16px;
    line-height: 1.4;
    color: var(--black);
}
body .conForm .formWrap textarea { min-height: min(200px, 52vw); resize: vertical; }
body .conForm .formWrap ::placeholder { color: #6b727b; opacity: 1; }
body .conForm .formWrap input:focus,
body .conForm .formWrap textarea:focus {
    outline: 2px solid var(--accentGreen);
    outline-offset: 2px;
}

/* "New Patient?" sits beside its Yes/No radios. kindling ships Bootstrap's reboot
   `legend{width:100%;float:left}`, and .flexWrap is a flex row — so the float is ignored
   and width:100% made the legend absorb the whole leftover row (275px for ~100px of text),
   shoving the radios to the far right. width:auto shrink-wraps it; the gap is then the
   radios' own 18px margin-left, so no margin-right is needed here. Dropping the bottom
   margin also fixes a 6px vertical offset — under align-items:center it was being counted
   into the legend's box while the radios' box had none. */
body .conForm .formWrap legend {
    width: auto;
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--white);
    margin: 0;
}

/* submit: btn-orange is undefined in this child — render as the site's primary CTA */
body .conForm input[type=submit] {
    display: block;
    margin: clamp(24px, 2.5vw, 40px) auto 0;
    background: var(--primaryColor);
    color: var(--white);
    border: 0;
    border-radius: 0;
    padding: 16px clamp(32px, 3.33vw, 48px);
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
body .conForm input[type=submit]:hover,
body .conForm input[type=submit]:focus {
    background: #285f7d;   /* primary, darkened */
}

@media (max-width: 1024px) {
    body .conForm .formWrap .row.flex { flex-wrap: wrap; }
    body .conForm .formWrap .row.flex > [class*="col-"] {
        flex: 1 1 100%;
        max-width: none;
    }
    body .conForm .formWrap .row.flex > [class*="col-"] + [class*="col-"] {
        margin-top: min(24px, 6.15vw);
    }
}


/* ===== VIRTUAL CONSULTS FORM (form.virtualSmile — CF7 html_class, page 26041) =====
   This form carried NO theme styling: the fields were raw UA defaults (2px inset #767676,
   1-2px padding, black text) and the submit was a UA button (outset border, #F0F0F0).
   Mirrors the #formPop field recipe — same context (dark text on the white page), and
   Ali's #767676 placeholder is that block's exact value. */
body .virtualSmile input[type=text],
body .virtualSmile input[type=email],
body .virtualSmile input[type=tel],
body .virtualSmile input[type=date],
body .virtualSmile select,
body .virtualSmile textarea {
    width: 100%;
}
body .virtualSmile input[type=text],
body .virtualSmile input[type=email],
body .virtualSmile input[type=tel],
body .virtualSmile input[type=date],
body .virtualSmile select,
body .virtualSmile textarea {
    box-sizing: border-box;
    border: 2px solid var(--black);
    border-radius: 0;
    padding: 12px 16px;
    font-family: var(--bodyFont);
    font-size: 16px;
    line-height: 1.5;
    background: var(--white);
    color: var(--black);
}
body .virtualSmile textarea { min-height: min(200px, 52vw); resize: vertical; }
/* Int-D13. Chrome's UA default already computed to #767676, so this pins what was
   incidental — once the fields above are authored, the default is no longer guaranteed
   (and it was never guaranteed cross-browser). */
body .virtualSmile ::placeholder {
    color: #767676;
    opacity: 1;
}
body .virtualSmile input:focus,
body .virtualSmile select:focus,
body .virtualSmile textarea:focus {
    outline: 2px solid var(--primaryColor);
    outline-offset: 2px;
}
/* Int-D14: submit = the site's primary CTA, per the parent's buttons.scss .btn-primary
   (--primaryColor, hover -> --primaryHover). Was a raw UA button.
   APPEARANCE ONLY — no display/margin. This form's fields all stack in the LEFT col-lg-6
   (520 wide, right half empty), so `display:block;margin:auto` would centre the button on
   the 1088 form and land it right of the field column. Left where it was pending James. */
body .virtualSmile input[type=submit] {
    background: var(--primaryColor);
    color: var(--white);
    border: 0;
    border-radius: 0;
    padding: 16px clamp(32px, 3.33vw, 48px);
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.5s linear;
}
body .virtualSmile input[type=submit]:hover,
body .virtualSmile input[type=submit]:focus-visible {
    background: var(--primaryHover);
}
/* The submit's <p> is a direct form child while every field sits in a .col-lg-6 (12px
   bootstrap gutter), so the button read 12px left of the field column. */
body .virtualSmile input[type=submit] {
    margin-left: 12px;
}

@media (min-width: 1025px) {
    /* Selects were the only ragged fields (UA-default ~254 against the fields' 520).
       width:100% fixes the in-grid one, but "Are You A New Patient?" sits OUTSIDE the
       col-lg-6 grid, so 100% of ITS container is the full 1088 — cap it to one column.
       Desktop-only: below 1025 the bootstrap cols are full width, so 100% is already right. */
    body .virtualSmile .top select {
        width: calc(50% - 24px);
        margin-left: 12px;   /* match the col-lg-6 gutter the other fields sit behind */
    }
}


/* ===== ALI-PASS FIXES (2026-07-23) ===== */
/* Brand motif = square corners everywhere; framework --cardBorderRad was unset
   → fell back to 10px on the .page-offer promo card (interior [display_offer]). */
:root { --cardBorderRad: 0px; }
body .entry-add .page-offer { border-radius: 0; }

/* Int-D6: interior content images all get the SAME slight rounding. Ali's objection was the
   inconsistency, not the rounding itself — interior_style rounds every `.entry img` with
   `clamp(40px, 4.17vw, 80px)` (= 80 at 1920, severe) but resets only the FLOATED ones to
   --cardBorderRad, which the ali-pass above set to 0. So the team page's aligncenter/alignnone
   images read 80 while alignright images beside them read 0. Now all of them read --imgBorderRad.
   This covers aligncenter / alignnone / unclassed: (0,1,2) beats the parent's `.entry img`
   (0,1,1). The FLOATED pair is not handled here — the child's own `.entry.entry-add .alignright`
   rule is (0,3,1) and outranks anything sane at this level, so it carries --imgBorderRad
   itself (see the interior-content section). Don't re-add align* selectors here; they'd be
   dead weight. */
body .entry img {
    border-radius: var(--imgBorderRad);
}

/* Content prose links had no :hover state (states audit) — primary on hover. */
body .entry-add p a:hover,
body .entry-add li a:hover { color: var(--primaryColor); }

/* "Learn More" links. This rule exists only to out-rank interior_style's
   `.page-template-special-offers .entry-add .box-offers .specWrap a` (0,4,1) — matching its
   structure + `body` wins at (0,4,2); the section rule above is (0,3,2) and would lose.
   REVERSES the earlier F3 pass, which set --primaryColor here: as of 2026-08-04 Ali wants the
   interior card's font colours to match the homepage card's WHITE variant, where the copy —
   Learn More included — is --black and only the underline stays --primaryColor. */
body.page-template-special-offers .entry-add .box-offers .specWrap a { color: var(--black); }

/* Narrow-desktop nav: tighten the Overline tracking so items clear the logo.
   Font/gap clamps already shrink; this recovers ~100px in the 1025–1300 band. */
@media (min-width: 1025px) and (max-width: 1300px) {
    #header #nav > li > a { letter-spacing: 0.5px; }
}


/* ===== SKIP LINK (WCAG 2.4.1 Bypass Blocks) =====
   Markup lives in fgMatchBox/header.php after <body>; fgMatchBox shipped none, and the
   fgb-header-patch plugin that injects it is hard-gated to fgBFramework so it no-ops here.
   Hidden by CLIP, never by a top/left offset + transition — an offset+transition skip link
   animates itself into view during scroll (the known fgB bug). */
.fgb-skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    transition: none; /* the sheet inherits `transition: all`; never animate a skip link */
}
/* #main is the skip target and carries tabindex="-1" so focus actually lands there —
   suppress the ring on that programmatic focus (the link itself stays visibly focused). */
#main:focus {
    outline: none;
}
.fgb-skip-link:focus,
.fgb-skip-link:focus-visible {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    clip: auto;
    clip-path: none;
    background: var(--white);
    color: var(--black);
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: underline;
    outline: 3px solid var(--black);
    outline-offset: 2px;
    box-shadow: var(--shadyMid);
}


/* ===== KEYBOARD FOCUS RINGS (WCAG 2.4.11) =====
   kindling ships a global `outline: 2px solid currentColor`, which disappears wherever an
   element's TEXT colour matches whatever sits behind the ring:
     - Book Now: white text -> white ring, drawn outside onto the white header
     - Featured service: inherits --black -> navy ring on dark card imagery
     - FAQ question: inherits --black -> navy ring on the --black band (identical hex)
   Pin a contrasting colour per context instead of relying on currentColor. */
/* .opener-form wraps the button, is exactly button-sized AND overflow:hidden, so the outset
   ring was clipped away — computed correctly, never painted. It holds only the button (no
   pseudo-element/slide fill to clip), so releasing it while focused changes nothing else. */
#header .opener-form:focus-within {
    overflow: visible;
}
#header .booking-opener:focus-visible,
#header .booking-blank:focus-visible {
    outline: 3px solid var(--black);
    outline-offset: 3px;
}
/* Ring the service-name label, NOT the tall image tile: the tile's <img> carries
   filter:brightness(.5), which makes a stacking context and paints over any outline or inset
   shadow on the link itself. Same treatment as Park Ridge (same framework, byte-identical
   section markup); 3px here rather than its 2px to match Stono's other rings. */
.home .feat-services .featLink:focus-visible {
    outline: none;
}
.home .feat-services .featLink:focus-visible .featContent .h4 {
    outline: 3px solid var(--white);
    outline-offset: 4px;
}
/* kindling's transition:all animates the ring in, so a quick tab reads as "no indicator".
   Keep the bg/colour easing, make the outline instant. */
.btn.btn-primary {
    transition: all 0.5s linear, outline 0s;
}
.home .faq .question.accordion:focus-visible,
.page .faq .question.accordion:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 2px;
}


/* ===== BOOK NOW POPUP (#formPop — Lity) ===== */
/* CF7 inputs render at size=40 intrinsic width (~386px) and overflowed the padded
   .formPop-form (331px) off-screen on mobile. */
/* These fields had NO theme styling — computed border was the raw UA default
   (2px inset #767676, padding 1px 2px). No popup exists in the Figma file, so the
   border follows the site motif: square corners + the 2px stroke used on the offer
   cards / Secondary CTA, in the brand neutral. */
#formPop .wpcf7-form input[type=text],
#formPop .wpcf7-form input[type=email],
#formPop .wpcf7-form input[type=tel],
#formPop .wpcf7-form textarea {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid var(--black);
    border-radius: 0;
    padding: 12px 16px;
    font-family: var(--bodyFont);
    font-size: 16px;
    line-height: 1.5;
    background: var(--white);
    color: var(--black);
}
#formPop .wpcf7-form ::placeholder {
    color: #767676;
    opacity: 1;
}
#formPop .wpcf7-form input:focus,
#formPop .wpcf7-form textarea:focus {
    outline: 2px solid var(--primaryColor);
    outline-offset: 2px;
}
/* Intro-line phone: underline on hover. */
#formPop .formPop-desc a:hover,
#formPop .formPop-desc a:focus-visible {
    text-decoration: underline;
}
/* "New Patient?" on the same row as Yes/No, matched to the radios' 18px. The legend
   already floats left but stretched to the full 384 column, so the radios wrapped under it. */
#formPop .top legend {
    width: auto;
    margin: 0 16px 0 0;
    font-size: 18px;
    line-height: 1.5;
}
#formPop .top fieldset > p {
    clear: none; /* inherited clear:left was dropping the radios below the floated legend */
    margin: 0 0 16px;
}
/* Office hours 16 (desktop inherited 18; mobile was already 16). */
#formPop .shedule,
#formPop .shedule dt,
#formPop .shedule dd {
    font-size: 16px;
}

@media (max-width: 1024px) {
    /* Close X to the right edge — base rule sets both left and right, so left wins until
       it is cleared. Desktop still opens it top-left (not flagged; confirm with Ali). */
    #formPop .formPop-close {
        left: auto;
        right: 14px;
    }
    /* Clear the fixed GTranslate widget so it cannot cover the last hours row. */
    #formPop .formPop-info {
        padding-bottom: 80px;
    }
}