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

:root {
    /* --- Brand palette --- */
    --teal: #134755;
    --gold: #C9AD88;
    --tan: #F7F4F1;
    --pink: #E5CABA;
    --black: #091F25;
    --white: #FFFFFF;

    /* --- Contract colors --- */
    --primaryColor: #134755;
    --primaryHover: #091F25;
    --secondaryColor: #134755;
    --ltBlue: #134755;
    --altBg: #F7F4F1;
    --footerBg: #134755;
    --offerCardBg: #FFFFFF;
    --offerCardText: #091F25;

    /* --- Fonts --- */
    --headingFont: 'Bacasime Antique', Georgia, serif;
    --bodyFont: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;

    /* --- Type sizes --- */
    --dispFontSize: clamp(56px, 5.417vw, 104px);
    --h2FontSize: clamp(36px, 2.5vw, 48px);
    --h3FontSize: clamp(24px, 1.354vw, 26px);
    --h4FontSize: 24px;
    --bodyFontSize: clamp(16px, 0.938vw, 18px);

    /* --- Weights --- */
    --headingFontWeight: 400;
    --bodyFontWeight: 400;
    --btnFontWeight: 600;

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

    /* --- Letter spacing --- */
    --btnLetterSpc: 2.4px;
    --h4LetterSpc: 0;

    /* --- Shape --- */
    --btnBorderRadius: 0;
    --cardBorderRad: 0;

    /* --- Effects --- */
    --shadyMid: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 40px 50px 0 rgba(0, 0, 0, 0.05);
}

/* The parent's base heading rules compile Bootstrap literals rather than reading
   the type tokens, so bare WYSIWYG headings ignore :root. Re-point them here. */
h1,
h2,
.h1,
.h2 {
    font-weight: var(--headingFontWeight, 400);
}

h2,
.h2 {
    font-size: var(--h2FontSize, clamp(36px, 2.5vw, 48px));
    line-height: var(--h2LineHeight, 115%);
}

/* h3 is grouped with h1/h2 on --headingFont in the parent; this design sets it in the body sans. */
h3,
.h3 {
    font-family: var(--bodyFont, 'Plus Jakarta Sans', Helvetica, Arial, sans-serif);
    font-size: var(--h3FontSize, clamp(24px, 1.354vw, 26px));
    line-height: var(--h3LineHeight, 125%);
}

h4,
.h4 {
    font-size: var(--h4FontSize, 24px);
    line-height: var(--h4LineHeight, 125%);
}

/* ============================================================
   Header
   The parent's bare `header` rule makes the homepage header a fixed transparent
   overlay over the hero; interior pages override it to white + sticky. This
   mockup wants the interior treatment everywhere, so mirror it here. Sticky
   (not fixed) keeps the header in flow, which is what pushes the hero down.
   ============================================================ */
/* `body` prefix is load-order, not taste: interior_style.min.css ships its own
   `#header, #header:hover` (1,0,0) and is enqueued AFTER this sheet on every
   interior page, so at equal specificity it wins there. Its version adds
   `box-shadow: 0 5px 25px rgba(0,0,0,.05)` on LOAD, which the homepage doesn't
   have — the interior header arrived with a drop shadow home lacks, and both
   mockup headers are the same 152px component. */
body #header,
body #header:hover {
    position: sticky;
    top: 0;
    z-index: 990;
    padding: 26px 0 24px;
    background-color: var(--white, #fff);
    color: var(--black, #091F25);
    border-bottom: 0;
    /* parent reads these on #nav>li a; 23px made the nav row 70px vs the button's 56 */
    --navLinkPadY: 16px;
    /* one source of truth for the logo width — the logo img and the column that
       reserves space for it both read this, and they must not drift (see below) */
    --hdrLogoW: clamp(150px, 11.927vw, 229px);
}

/* Kill the on-LOAD shadow only (interior_style ships `#header{box-shadow:0 5px 25px}`;
   the homepage has none). Scoping to `:not(.scrolled)` lets the parent's no-rucss
   `.scrolled header` shadow through once scrolling starts — the blanket `box-shadow:
   none` here was out-specifying it (1,0,1 > 0,1,1), so the header never gained the
   scrolled drop shadow (Ali QA). `body:not(.scrolled)` matches the served HTML, so
   RUCSS keeps this rule on prod. */
body:not(.scrolled) #header,
body:not(.scrolled) #header:hover {
    box-shadow: none;
}

/* ============================================================
   Keyboard focus indicators (Ali a11y QA)
   The flagged controls fell back to the UA/currentColor ring, which disappears on a
   same-colour ground (Book Now nav button, featured services, Schedule a Consult, map
   Contact Us, footer legal links). Use `outline` — never box-shadow — so the featured
   panels' overflow:hidden can't clip the ring. `:focus-visible` is keyboard-only, so
   pointer clicks stay clean; RUCSS preserves interaction pseudos.
   ============================================================ */

/* the CTAs are teal buttons on light grounds — a dark ring in the surrounding area */
.btn:focus-visible {
    outline: 2px solid var(--black, #091F25);
    outline-offset: 3px;
}

/* featured-service panels are dark photos clipped to overflow:hidden — inset white ring */
.feat-services .featLink:focus-visible {
    outline: 3px solid var(--white, #fff);
    outline-offset: -3px;
}

/* footer legal links sit on the teal band — white ring */
#footer .bottom-nav a:focus-visible {
    outline: 2px solid var(--white, #fff);
    outline-offset: 2px;
}

/* Bar content sits on the mockup's 1640 — i.e. a 140px gutter each side at 1920,
   held as a proportional gutter as the screen shrinks. It has to be expressed as
   `100% - clamp(gutters)`, not a max-width: kindling ships 90% capped at 1500
   (plus min-width:1636 above 1920), and a flat max-width:1640 closed the gaps to
   nothing everywhere between 1640 and 1920, then ran the bar edge-to-edge below. */
#header .header-holder {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
    min-width: 0;
}

/* parent hardcodes .sLogo to 132px, which stretched the whole header past the
   mockup's 152 even once the logo itself was sized correctly */
#header .header-holder .logo-block .sLogo {
    height: auto;
}

/* 🔴 The bar overflowed to the RIGHT below ~1326 — the nav and Book Now slid off the
   page (James, 2026-08-05). NOT the logo pushing, which is what it looks like: the
   logo is `position: absolute`, so it contributes nothing to flow and its column was
   reserving a flat col-lg-3 (25%, Theme Settings Logo Columns = 3) on its behalf —
   279px holding a 158px logo at 1326, i.e. 121px of dead space. Meanwhile
   .logo-block, .locNavBtns and #mainNav are ALL `flex: 0 0 auto`, so nothing could
   give: the nav row needed 836 in an 822 box and simply spilled past the container.
   Size the column to the logo it is actually reserving for, and let the nav column
   take the remainder. `width: auto` is NOT an option — the logo being out of flow
   would collapse the column to 0 and the logo would overlap the nav. Nothing moves
   at 1920: the logo already sits on the container's left edge and .conBlock / #nav
   are right-aligned, so the reclaimed space all falls on the nav's left.
   ⚠️ These two rules make Theme Settings **Logo Columns / Nav Columns INERT** on
   desktop — an explicit width and `flex: 1 1 auto` both beat bootstrap's `col-lg-N`
   percentage. Verified by forcing 2/10 and even 6/6 in the DOM: no change at all.
   So don't reach for those fields to tune header spacing; tune --hdrLogoW instead. */
#header .header-holder .logo-block {
    flex: 0 0 auto;
    width: var(--hdrLogoW, clamp(150px, 11.927vw, 229px));
}

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

/* the nav's own width is near-incompressible — the parent already clamps the link
   font-size (16 at 1920, floored at 14 from ~1680 down), the link padding and the
   button, and all three are at their floors by ~1150. These two are what is left
   that costs nothing at 1920: the 16px item gap is flat where everything around it
   is proportional, and #nav is right-aligned inside #mainNav so that 12px of left
   padding is dead space. The right padding stays — it IS the gap between the last
   item and the Book Now button. */
#header #mainNav {
    padding-left: 0;
}

#header #nav {
    gap: clamp(8px, 0.833vw, 16px);
}

/* contact row ships 10px block padding — mockup sits it tight under the header padding */
#header .conBlock {
    padding-top: 0;
    padding-bottom: 0;
}

/* two separate blocks — .headAdd holds the map pin, .phoneBlock the phone */
#header .conBlock .headAdd i,
#header .conBlock .phoneBlock i {
    color: var(--pink, #E5CABA);
}

/* nav links are the Overline style: parent ships weight 500, mockup is SemiBold 600 */
#header #nav > li a {
    font-weight: 600;
}

/* Dropdown page links read as regular body weight, underline on hover — the 600
   overline weight is a top-level-only treatment (beats the inherited #nav>li a). */
#header #nav .sub-menu a {
    font-weight: 400;
}

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

/* Flyout affordance: the 2nd-level parents (Restorative, Cosmetic) open a side
   flyout at left:100% with no visual cue. A right chevron on those parents only. */
#header #nav .sub-menu li.menu-item-has-children > a {
    position: relative;
    padding-right: clamp(20px, 1.4vw, 24px);
}

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

/* parent ships `#logo img#mLogo` at clamp(150px,16.667vw,320px) — (2,0,1), so
   this needs the extra element to win. Reads the same var as .logo-block above so
   the logo and the space reserved for it can never drift apart. */
#header #logo img#mLogo {
    width: var(--hdrLogoW, clamp(150px, 11.927vw, 229px));
    height: auto;
}

/* ============================================================
   Hero — split promo banner
   Mockup splits the hero: photo fills the left 1382/1920 (71.979%), a solid teal
   panel the right 538/1920 (28.021%), headline bottom-anchored inside the panel.
   The parent ships a full-bleed photo under a 50% scrim, so both are overridden.
   Scoped from `body.home` to out-specify static_promo_banner.min.css, which
   loads after this sheet.
   ============================================================ */
body.home .promo {
    height: min(41.042vw, 788px);
    padding-top: 0;
    background-color: var(--teal, #134755);
    overflow: hidden;
}

/* parent paints rgba(41,41,41,.5) over the whole hero — not in this design */
body.home .promo::before {
    display: none;
}

body.home .promo .promoBg {
    left: 0;
    right: auto;
    width: 71.979%;
}

body.home .promo .promoBg img {
    object-position: center center;
}

body.home .promo .promo-holder {
    height: 100%;
    align-items: flex-end;
}

/* headline is panel-relative, not grid-relative — it overflows the 1640 container.
   Column flex + flex-end bottom-anchors regardless of the container's own height. */
body.home .promo .promo-holder .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.home .promo .slide_content {
    width: 28.021%;
    margin: 0 0 min(4.219vw, 81px) auto;
    padding: 0 0 0 min(2.813vw, 54px);
    /* h2.banH is inline-block; without this it gets centred by an inherited text-align */
    text-align: left;
}

/* template nests the headline in a `col-lg-10 offset-lg-1` wrapper whose Bootstrap
   offset pushes it ~40px right of the panel padding — neutralise it */
body.home .promo .slide_content > div {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    flex: none;
}

body.home .promo h2.banH {
    margin: 0;
    text-align: left;
    /* parent sets letter-spacing 6px and a 1px white text-stroke on this headline —
       the Display token is tracking 0, and the stroke thickens the 400 weight so it
       reads bolder than the mockup */
    letter-spacing: 0;
    -webkit-text-stroke-width: 0;
}

/* ============================================================
   Differentiator bar
   Grouped with the interior diff widget so both stay in step — the widget has
   different markup (h2, no .spWrap), so only structure-independent rules here.
   Diff styles live in the main kindling bundle, which loads before this sheet,
   so matching specificity is enough.
   ============================================================ */
/* Both instances are the SAME Figma component and reconcile exactly — homepage
   1920x559 = 120 + 33 + 56 + 190 + 160, interior 1920x479 = 100 + 33 + 56 + 190 + 100.
   So padding and background are the ONLY two properties that differ; everything else
   below is shared, and the widget needs each rule spelled out because it has no
   .spWrap and its heading is an h2. On mobile both frames are 390x922 — identical
   apart from the background. */

/* design spec: 120 top / 160 bottom at desktop, 100 / 100 at mobile.
   Parent uses --ltSecPadding (100px), which matches the mobile end only. */
.diff {
    padding: clamp(100px, 6.25vw, 120px) 0 clamp(100px, 8.333vw, 160px);
}

/* the interior widget is a flat 100 top and bottom at every width, and it sits on Tan
   where the homepage bar is white — the parent hardcodes var(--white) here */
.widget.widget-diff {
    padding: 100px 0;
    background-color: var(--tan, #F7F4F1);
}

/* Content row is 1364 wide at x=278 — the same 1640 container as the header, Steps and
   Offers, so this uses the shared gutter. (An earlier pass set 1740 here, inferring the
   container from the column CENTRES; 1740 reproduces those centres but makes each column
   483 wide instead of the mockup's 398, which changes where real copy wraps.) The widget
   otherwise falls back to the base 90vw container. */
.diff .container,
.widget.widget-diff .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
}

/* 3 columns of 398 on an 85 gap = 1364. The parent already ships the 85 gap on both
   contexts; what it gets wrong is the column width — col-lg-4's flat 33.333% plus two
   85s overflows the row, and justify-content:center then pushes the outer columns past
   the container. Subtracting the gaps from the width is what holds 398. */
.diff .diffBox,
.widget.widget-diff .diffBox {
    width: calc((100% - 2 * clamp(42px, 4.427vw, 85px)) / 3);
}

/* Markup is `<i class="fa-check"></i> <a>text</a>`. Keep the check INLINE in the text
   flow — don't flex the row. Flexing makes the icon a sibling of the whole text block,
   so a wrapped item either left-aligns (breaking the centred look) or centres its first
   line inside its own box (making the gap read far wider than on single-line rows).
   Inline, line 1 is "check + first words" centred, any wrapped line centres beneath it,
   and the icon-to-text gap is uniform by construction. Gap = margin-right + the literal
   whitespace text node (~3px), so 13 nets the mockup's 16. Mockup check is 20x14, which
   is a 21px fa-check. */
.diff .diffList li i,
.widget.widget-diff .diffList li i {
    margin-right: 13px;
    font-size: 21px;
}

/* The solid FA check reads too heavy (Ali QA). Swap the glyph for a Unicode check
   in the body sans at regular weight — keeps the inline metrics above, lighter stroke. */
.diff .diffList li i.fa-check::before,
.widget.widget-diff .diffList li i.fa-check::before {
    content: "\2713";
    font-family: var(--bodyFont, 'Plus Jakarta Sans', Helvetica, Arial, sans-serif);
    font-weight: 400;
}

/* the "linked" diff item renders underlined by default; mockup shows neither item
   underlined, so keep it for hover only */
.diff .diffList a,
.widget.widget-diff .diffList a {
    text-decoration: none;
}

.diff .diffList a:hover,
.widget.widget-diff .diffList a:hover {
    text-decoration: underline;
}

/* the heading's own margin carries the title→icons gap (56 desktop / 48 mobile), so
   zero the wrapper's — the section ships 36 and the widget 32, and relying on which one
   wins a margin collapse is what let the two contexts drift apart */
.diff .heading,
.widget.widget-diff .heading {
    margin-bottom: 0;
}

/* parent renders this in the display serif, uppercase, at --h4FontSize (a flat 24) with
   --headingLineHeight; mockup is the body sans, mixed case, H3 Subheader at 26/1.25 —
   which is 3px per line taller and is why the built bar measured 548 against the
   mockup's 559. margin-top:0 kills the global h1-h6 clamp that leaks ~80px onto the
   widget's h2 (the section's h1 escapes it, so this only ever showed on interior). */
.diff .heading h1,
.widget.widget-diff .heading h2 {
    font-family: var(--bodyFont, 'Plus Jakarta Sans', Helvetica, Arial, sans-serif);
    font-size: var(--h3FontSize, clamp(24px, 1.354vw, 26px));
    line-height: 1.25;
    font-weight: 500;
    text-transform: none;
    margin-top: 0;
    margin-bottom: clamp(48px, 2.917vw, 56px);
}

/* icon→list is 32 in every block of both frames. A margin (not a .spWrap gap) is what
   reaches both contexts — the widget has no .spWrap to hang a gap on. Parent ships a
   12px bottom padding here and 8px top on .diffContent, which nets 20. */
.diff .diffImg,
.widget.widget-diff .diffImg {
    margin-bottom: 32px;
    padding-bottom: 0;
}

/* list copy is the body token — 18/27 desktop, 16/24 phone — where the parent pins a
   flat 16/24. Declaring size and line-height on the same element matters: a percentage
   line-height computes to a LENGTH here and inherits down to the items as that length. */
.diff .diffContent,
.widget.widget-diff .diffContent {
    padding: 0;
    font-size: var(--bodyFontSize, clamp(16px, 0.938vw, 18px));
    line-height: var(--bodyLineHeight, 150%);
}

.diff .diffList,
.widget.widget-diff .diffList {
    margin-bottom: 0;
}

/* items are 27 line boxes on a 24 gap (mockup 27 + 24 + 27 = 78). Parent pads each item
   10 top / 14 bottom, which both mis-sizes the gap and adds slack under the last one. */
.diff .diffList li,
.widget.widget-diff .diffList li {
    padding: 0;
    margin-bottom: 24px;
}

.diff .diffList li:last-child,
.widget.widget-diff .diffList li:last-child {
    margin-bottom: 0;
}

/* ============================================================
   News blocks (fw_content_half) — #news1 / #news2
   Both share ONE background (news_block_bg.jpg) with the faded-white half on the
   right for news1 and mirrored for news2, a gold panel spanning the full container
   behind everything, and the photo at its natural 812x880 inset 59px from the
   container's OUTER edge. Section height falls out as 140 + 880 + 140 = 1160, the
   background image's own height.

   Scoped from `body` because fw_content_half.min.css loads AFTER this sheet and
   already hardcodes `#news1.half-content{padding:0}` at (1,1,0).
   ============================================================ */
body #news1.half-content,
body #news2.half-content {
    position: relative;
    padding: clamp(100px, 7.292vw, 140px) 0;
    overflow: hidden;
}

/* shared background; news2 mirrors it rather than shipping a second flipped JPG */
body #news1.half-content::before,
body #news2.half-content::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('/wp-content/uploads/2026/07/news_block_bg.jpg') center center / cover no-repeat;
}

body #news2.half-content::before {
    transform: scaleX(-1);
}

/* gold panel: 600 tall, full container width, vertically centred behind the content */
body #news1.half-content::after,
body #news2.half-content::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: min(91.667vw, 1760px);
    height: min(31.25vw, 600px);
    transform: translate(-50%, -50%);
    background-color: var(--gold, #C9AD88);
}

body #news1.half-content .container,
body #news2.half-content .container {
    position: relative;
    z-index: 2;
    width: min(91.667vw, 1760px);
    max-width: none;
}

/* parent clamps both the column and the photo to 560px tall; this design uses the
   asset at its natural size so it overhangs the gold panel by 140 top and bottom */
body #news1 .image,
body #news2 .image {
    height: auto;
    display: block;
    z-index: 5;
}

body #news1 .image img,
body #news2 .image img {
    width: min(42.292vw, 812px);
    height: auto;
    object-fit: unset;
    display: block;
    box-shadow: 0 50px 60px rgba(0, 0, 0, 0.05), 0 30px 40px rgba(0, 0, 0, 0.1);
}

/* photo sits 59px inside the container's outer edge — right for news1, left for news2 */
body #news1 .image img {
    margin-left: auto;
    margin-right: min(3.073vw, 59px);
}

body #news2 .image img {
    margin-left: min(3.073vw, 59px);
    margin-right: auto;
}

/* text block: 533 wide, vertically centred, ~199 from the gold's outer edge and
   ~155 from the photo side */
body #news1 .text,
body #news2 .text {
    align-self: center;
}

body #news1 .text {
    padding: 0 min(7.708vw, 148px) 0 min(10.365vw, 199px);
}

body #news2 .text {
    padding: 0 min(10.365vw, 199px) 0 min(7.708vw, 148px);
}

/* mockup sets these headings in caps — verified by width: "LOREM IPSUM" at 56px
   tracking 0 measures 388 against the mockup's 383 ink, where title case is only 309 */
body #news1 .text h2,
body #news2 .text h2 {
    text-transform: uppercase;
    /* both mockups put a flat 24 between the heading and the body; the parent's
       clamp(20px, 1.25vw, 24px) only reaches it at 1920 and floors at 20 on mobile */
    margin-bottom: 24px;
}

/* same `col-lg-10 offset-lg-1` wrapper the hero uses — its Bootstrap offset shrinks
   the copy to 10/12 and shifts it ~43px right of the padding */
body #news1 .text > div,
body #news2 .text > div {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    flex: none;
}

/* .text is a flex item, so the WYSIWYG paragraph's 1rem bottom margin can't
   collapse out of it — it lifts the copy 8px above the gold's centre on desktop
   and adds to the section's bottom gap once the blocks stack. */
body #news1 .text p:last-child,
body #news2 .text p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Reviews (Splide scroller) — #4
   White section with the tan squiggle behind it. The exported SVG is already
   the section-width crop: its viewBox is 0..1920 while the path runs
   -218..2138, so it drops in at 100% width with nothing to crop by hand. The
   mockup holds it at 1920x387 / 127 from the top on desktop and 747 wide / 67
   from the top on a phone, which `max()` + `clamp()` cover without a
   breakpoint. Scoped from `body` because reviews.min.css loads after this
   sheet and blanks the background image at ≤1024.
   ============================================================ */
body .reviews {
    padding: clamp(100px, 12.5vw, 240px) 0;
    background: var(--white, #fff) url('/wp-content/uploads/2026/07/squiggle_vector.svg') center clamp(67px, 6.615vw, 127px) / max(min(100vw, 1920px), 747px) auto no-repeat;
}

/* the wrapper carries its own 32px margin on top of the h2's, which doubled the
   mockup's heading→quote gap to 64 */
body .reviews .heading {
    margin-bottom: 0;
}

/* gap is 32 desktop / 24 mobile; the parent's min() floors it at 6.5px on a phone */
body .reviews .heading h2 {
    text-transform: uppercase;
    margin: 0 auto clamp(24px, 1.667vw, 32px);
}

/* quote column is 812 wide and centred — the parent's col-lg-6 + offset-lg-3
   lands it at 864, and .rQuote's 100px side padding then squeezes the copy to
   664, which wraps the mockup's 3 lines to 4 */
body .reviews .testimony {
    width: min(100%, 812px);
    max-width: none;
    margin: 0 auto;
    padding-bottom: 0;
}

body .reviews .quotWrap {
    padding: 0;
}

/* parent adds a 15px side inset below 479, which lands inside the mockup's own
   32px gutter and narrows the quote to 296 on a phone */
body .reviews .testCont {
    padding: 0;
}

/* inline-block puts the quote on a line box, adding a stray descender gap under
   it; the mockup has none and nothing here needs the inline flow */
body .reviews .testCont .rQuote {
    display: block;
    padding: 0;
}

/* the review body holds 18/27 on mobile too — the mockup uses the desktop body
   token at both sizes — and the parent's 4-line clamp would cut the phone's 7 */
body .reviews .rQuote > p {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
    font-size: 18px;
    line-height: 1.5;
    /* quote→name is 24 on the desktop mockup and 16 on the mobile one */
    margin-bottom: clamp(16px, 1.25vw, 24px);
}

/* mockup wraps every quote in curly quotes; doing it here rather than in the CPT
   copy means it survives whatever gets pasted in at import */
body .reviews .rQuote > p::before {
    content: '\201C';
}

body .reviews .rQuote > p::after {
    content: '\201D';
}

/* reviewer name is the Overline style — the parent clamps it to 14 / 1.54px
   below 1920 where the mockup holds 16 / 2.4px at both ends. The 16px name→icon
   gap currently arrives by accident, from fw_content_half's bare
   `.tName.h3 { gap: 16px }`, so declare it here too. */
body .reviews .testimony p.tName {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 2.4px;
    margin: 0 auto;
    gap: 16px;
}

/* Reviews badge label — Ali wants a compact "1.5K Reviews" (saves room, esp. mobile).
   The footer template hardcodes "<count>+ [Google ]Reviews" around the count field, so
   the copy can't be set from Theme Settings. Swap it here: the real count text stays in
   the DOM for assistive tech, the ::after carries the visual label. Metrics restate
   kindling's .num-reviews-and-stars p (14/600/uppercase); weight+transform+color inherit.
   `body` + full context out-specifies kindling AND the inlined critical CSS, both
   (0,2,1); `> p` keeps this off the nested "4.8 stars" .alpha-match line. */
body .google-button-container .num-reviews-and-stars > p {
    font-size: 0;
}

body .google-button-container .num-reviews-and-stars > p::after {
    content: "1.5K Reviews";
    font-size: 14px;
}

/* ============================================================
   Featured Services (feat_serv) — #5
   Three full-bleed image panels that expand on hover. The parent already
   builds the expand and the 5px gutters, so this is the image treatment and
   the title only.
   ============================================================ */

/* mockup crops the panels dead centre, not at the parent's 38%, and sits them
   under a much heavier wash: all three panels measured a 0.45 brightness factor
   against their source assets, within ±0.003 of each other. No hover frame was
   drawn, so hover keeps the parent's relative step (it darkened 0.7 → 0.55). */
body .feat-services img {
    object-position: center;
    filter: brightness(0.45);
}

body .feat-services .featLink:hover img {
    filter: brightness(0.35);
}

/* title is the H3 Subheader token — Plus Jakarta Sans Medium 26/32.5, no
   tracking, title case — where the parent renders it uppercase at 32/40,
   weight 400, 1.6px tracking, 60px in from the panel edge.
   nowrap holds it on one line through the hover shrink — the longest title
   (Sedation Dentistry, 232px) + margin fits inside the 320px idle-panel floor. */
body .feat-services .featContent .h4 {
    width: auto;
    font-size: var(--h3FontSize, clamp(24px, 1.354vw, 26px));
    line-height: var(--h3LineHeight, 125%);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-left: clamp(32px, 2.083vw, 40px);
    white-space: nowrap;
}

/* On hover the parent grows the active panel to flex-grow:5, squeezing the two idle
   panels to ~1/7 of the row (~272px) — right at the "Sedation Dentistry" one-line
   width, so the title wraps to two lines and the panels read cramped (Ali QA). Floor
   the panel width: idle panels stay wide enough for a single line, the hovered panel
   still claims the remaining space. Parent ships min-width:0 here, so beat it. */
body .feat-services .featLink {
    min-width: 320px;
}

/* ============================================================
   Steps (card_block) — #6
   Three text blocks sitting ON one gold rule that spans the whole container and
   is knocked out behind each title — so the rule lives on the row and the titles
   paint over it in the section's own background. At ≤1024 the same rule turns
   vertical between the stacked blocks. Section is WHITE, not the parent's
   --altBg tan: five points sampled across both mockups all read #ffffff, and the
   mobile overline's flat #6B797C is the Black swatch at 60% over white exactly.
   The parent's card treatment — grey panel, 6px green border, drop shadow, 40px
   pad, hover lift — is not in this design at all.
   Scoped from `body` because card_block.min.css loads after this sheet.
   ============================================================ */
body .cardBlock {
    padding: clamp(100px, 7.292vw, 140px) 0;
    background-color: var(--white, #fff);
}

/* content sits on 1640, i.e. the header bar's 140px gutter, so the rule ends
   flush with the logo and the Book Now button. Driving the GUTTER rather than
   capping the width keeps that true once the scrollbar takes 15px off the
   layout — and the 64px floor is the mobile mockup's 32px gutter, so the one
   declaration covers both ends. */
body .cardBlock .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
}

/* heading to the first title is 80 desktop / 48 mobile */
body .cardBlock .heading {
    margin-bottom: clamp(48px, 4.167vw, 80px);
}

body .cardBlock .heading h2 {
    text-transform: uppercase;
    /* reboot's .5rem would collapse into .heading's margin and make the gap
       above read from two places */
    margin-bottom: 0;
}

/* the second heading line lives INSIDE the h2 (`<span class="ovl">`), so it
   needs the body sans back plus the Overline treatment. Size is the body token
   at both ends — 18 desktop / 16 mobile is exactly what it clamps to. */
body .cardBlock .heading .ovl {
    display: block;
    font-family: var(--bodyFont, 'Plus Jakarta Sans', Helvetica, Arial, sans-serif);
    font-size: var(--bodyFontSize, clamp(16px, 0.938vw, 18px));
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: clamp(4px, 0.234vw, 4.5px);
    color: rgba(9, 31, 37, 0.6);
}

/* blocks are 398 wide on an 85 gap — 1364 centred in the col-lg-10 row, which
   puts them within a pixel of the mockup's 278 / 761 / 1244. flex-start rather
   than the parent's center keeps every title on the rule when the copy lengths
   differ; align: center would only line them up while all three match. */
body .cardBlock .flex-row {
    position: relative;
    align-items: flex-start;
    gap: clamp(42px, 4.427vw, 85px);
}

/* the rule. The row is col-lg-10 at offset-lg-1, so -10%/120% of the ROW is the
   full container width exactly, whatever the container resolves to. It crosses
   the titles at their cap-height centre, which the mockup puts 18px into the
   26px title's line box — 0.692em of the title size, so it tracks the token as
   the h3 clamps down. */
body .cardBlock .flex-row::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0.692em;
    left: -10%;
    width: 120%;
    height: 2px;
    font-size: var(--h3FontSize, clamp(24px, 1.354vw, 26px));
    background-color: var(--gold, #C9AD88);
}

/* parent pads 20px on top and pulls it to 0 on hover as a card lift; there is
   no card here and nothing in a block is interactive */
body .cbCard {
    position: relative;
    flex: 0 1 398px;
    padding: 0;
}

body .cbCard:hover {
    padding: 0;
}

body .cbCard .cWrap {
    padding: 0;
    background-color: transparent;
    border-bottom: 0;
    box-shadow: none;
}

/* inline-block so the knockout hugs the words — 24px each side is the gap the
   mockup leaves between the rule and the title */
body .cbCard h3 {
    z-index: 1;
    display: inline-block;
    margin: 0 0 24px;
    padding: 0 24px;
    background-color: var(--white, #fff);
}

/* section body is 16/24 here, not the 18 the desktop body token reaches. The
   ratio has to be restated: --bodyLineHeight is a percentage, so it computed to
   27px against body's 18 and inherited down as that LENGTH, giving 27px lines
   under 16px text. Unitless inherits as a factor, so it also lands the phone's
   14/21. */
body .cbCard .beta-match p {
    font-size: 16px;
    line-height: 1.5;
}

/* .cbCard is a flex item, so the WYSIWYG's 1rem bottom margin can't collapse
   out — it would add to the row gap once the blocks stack */
body .cbCard .beta-match p:last-child {
    margin-bottom: 0;
}

/* no per-card link in this design, and the template prints the anchor
   unconditionally — an empty `<a href="">` sitting in the a11y tree */
body .cbCard .cLink:empty {
    display: none;
}

/* .row is display:block in this framework, so the fit-content button needs
   centring. The component is 284x56 at BOTH breakpoints — the parent's clamps
   drop it to 14px text on 22px padding below 1920, where the mockup holds
   16 / 16-32. Restating the parent's 56 top gives the mobile 32 something to
   override. */
body .cardBlock .row .btn {
    margin: 56px auto 0;
    padding: 16px 32px;
    font-size: 16px;
}

/* ============================================================
   Special Offers (offers) — #8
   Teal section, three white cards, and a 1-up slider on a phone. The parent
   already lands most of the card: 40px padding, square corners, the 32/16/32
   internal rhythm, and `var(--shadyMid)`, which IS this style guide's Drop
   shadow (medium) — so what's left is the section shell, the card width, the
   three type values the parent gets wrong, and the mobile slider.

   `offers_slider` is ON, so the section renders as `.offers--slider` with the
   Splide markup and the parent's offers.js mounts it below 1025 (1-up, 16px gap,
   8% side padding — which is the mockup's 32px gutter with 16px peeks at 390)
   and destroys it above, leaving the static 3-up. Both frames reconcile exactly:
   140 + 64 + 74 + 400 + 140 = 818 desktop, 100 + 80 + 48 + 393 + 100 = 721 phone.
   ============================================================ */
body .offers {
    padding: clamp(100px, 7.292vw, 140px) 0;
    background-color: var(--teal, #134755);
    color: var(--white, #fff);
}

/* cards row is 1364 = the col-lg-10 of a 1640 container, i.e. the same gutter the
   header and Steps use */
body .offers .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
}

/* heading ink to the card's top edge is 74 desktop / 48 mobile. The desktop 74
   carries the 20px the parent's hover lift needs above the card — the mockup
   leaves exactly that much dead space above the white box. */
body .offers .heading {
    margin-bottom: clamp(48px, 3.854vw, 74px);
}

body .offers .heading h2 {
    text-transform: uppercase;
    margin-bottom: 0;
}

/* 444 cards on a 16 gap. The parent's slider-variant rule ships 30% (409 at this
   container), and it has a `.splide.is-initialized:not(.is-active)` twin at
   (0,5,1) that takes over once Splide has mounted and destroyed itself — so both
   selectors need answering, and the second must out-specify five classes. */
body .offers--slider .offers-list li,
body .offers--slider .splide.is-initialized:not(.is-active) .offers-list li {
    width: calc((100% - 32px) / 3);
    max-width: 444px;
}

/* Splide's track is overflow:hidden and the cards fill it exactly, so at desktop it
   crops the parent's 20px hover lift off the TOP of the card — reading as the bottom
   edge rising while the top stays put — and clips the drop shadow below them too.
   Safe to un-clip here because Splide destroys itself at ≥1025, so the track isn't
   holding anything back; it goes back to hidden at the slider breakpoint. */
body .offers--slider .splide__track {
    overflow: visible;
}

/* parent insets the card 10px each side and 25 on top, shrinking the white box
   inside its own slot */
body .offers .box-offers,
body.page-template-special-offers .box-offers {
    padding: 0;
}

/* 40 padding desktop / 32 phone, plus the 0.5px tan hairline the card carries */
body .offers .box-offers .box-holder,
body.page-template-special-offers .box-offers .box-holder {
    padding: clamp(32px, 2.083vw, 40px);
    border: 0.5px solid var(--tan, #F7F4F1);
}

/* card title is the H4 token in the body sans; the parent renders it in the
   display serif at clamp(20px, 1.15vw, 22px) weight 400. It's a `<span class="h4">`,
   so it needs display:block before the parent's own 16px bottom margin — the
   mockup's title→body gap — can apply at all. */
body .offers .box-offers .h4,
body.page-template-special-offers .box-offers .h4 {
    display: block;
    font-family: var(--bodyFont, 'Plus Jakarta Sans', Helvetica, Arial, sans-serif);
    font-size: var(--h4FontSize, 24px);
    line-height: var(--h4LineHeight, 125%);
    font-weight: 500;
}

/* LEARN MORE holds 16/24 and 2.4px tracking at both ends; the parent clamps it to
   14/1.54px below 1920, and the line height needs restating as a ratio for the
   same reason the Steps body did — it was inheriting body's 27px as a length. */
body .offers .specWrap a,
body.page-template-special-offers .specWrap a {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: var(--btnLetterSpc, 2.4px);
}

/* the hover underline sits 8 below the label, not 6 above and below — and since
   it holds its box while transparent, that difference is the card's 400 vs 404 */
body .offers .specWrap a::after,
body.page-template-special-offers .specWrap a::after {
    margin: 8px auto 0;
}

/* neither frame draws the template's auto-generated expiry line */
body .offers p.expires {
    display: none;
}

/* ============================================================
   Map / Location — #9 (homepage section AND interior widget)
   The homepage `location` section and the interior Full Width Map widget are the
   SAME Figma component placed twice: desktop 1920x880 in both, phone 390x828 in
   both, and the interior instance carries ZERO overrides (every child matches the
   master down to the decimals). So EVERY rule here is shared — the interior widget
   renders `.widget.loc-widget.<id>.section-location`, so `.section-location …`
   reaches it for free. Only three things differ, and all three are markup, not
   design: the widget's heading comes from the WIDGET TITLE (not `l_heading`), its
   `#map` is `.map-show-canvas-w`, and its CTA is `.btn-orange` where the section
   uses `.btn-primary` — hence the doubled button selector below.

   Desktop reconciles as 140 + 600 (map, the tallest child) + 140 = 880, and across
   as 278 slack + 536 copy + 154 gap + 812 map + 140 gutter = 1920. Phone reconciles
   as 32 + 240 (map) + 48 + 408 (copy) + 100 = 828.
   ============================================================ */
/* The parent writes its shell and #map rules as `.section-location, .widget.section-location`,
   and that second alternative is (0,2,0) — so on the interior widget it out-specifies a
   plain `body .section-location`. Only these two rules need the doubled selector; every
   other rule below uses a deeper chain that already wins in both contexts. */
body .section-location,
body .widget.section-location {
    padding: clamp(32px, 7.292vw, 140px) 0 clamp(100px, 7.292vw, 140px);
}

/* the group is right-aligned in the shared 1640 container: 536 + 154 + 812 = 1502
   leaves 138 of slack on the left, and the map's right edge lands on the container's
   own 140 gutter. overflow:hidden replaces the parent's `auto`, which turns the
   content being a hair wider than the container into a page scrollbar above 1920. */
body .section-location .map-block {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    gap: min(8.021vw, 154px);
    overflow: hidden;
}

body .section-location .address {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: min(27.917vw, 536px);
}

/* Parent insets this by clamp(70px, 7.292vw, 140px) each side, which ate 280 of the
   536 column and wrapped the heading to 3 lines. Its selector is
   `.section-location .address .address-holder` (0,3,0) — and it has a second rule at
   ≤991 that swaps the inset for a top padding — so the full chain plus `body` is what
   it takes to win at every width. */
body .section-location .address .address-holder {
    padding: 0;
}

/* reboot gives `address` a 1rem bottom margin that lands in the phone→hours gap */
body .section-location address {
    margin-bottom: 0;
}

/* section heading is the site h2 in the display serif, uppercase, left-aligned; the
   template prints it as `<p class="h4">` so it arrives at the h4 token. The parent also
   pads it 10px in, which set its ink 10px right of the address pin below it — the mockup
   has the heading and all three icons flush on the same left edge. */
body .section-location .row-place .h4 {
    font-family: var(--headingFont, 'Bacasime Antique', Georgia, serif);
    font-size: var(--h2FontSize, clamp(36px, 2.5vw, 48px));
    line-height: var(--h2LineHeight, 115%);
    font-weight: var(--headingFontWeight, 400);
    text-transform: uppercase;
    padding-left: 0;
    margin: 0 0 32px;
}

/* the three contact rows sit on a 24 rhythm. The mockup's desktop phone row uses a
   14px icon gap where its own address and hours rows — and every row on the phone
   frame — use 16; normalised to 16 as an authoring slip. */
body .section-location .row-place .row,
body .section-location .row-location.row-tel {
    gap: 16px;
    margin-bottom: 24px;
}

body .section-location .shedule {
    margin: 0;
}

body .section-location .shedule .row {
    gap: 16px;
}

/* .pin/.inf are bootstrap col-xs-1/col-xs-11, so the icon floats in a ~29px column with
   8px of padding either side and the gap reads far wider than the 16 it should be. Parent
   scopes these at (0,4,0), hence the full chain. */
body .section-location .address .address-holder .pin {
    width: auto;
    flex: 0 0 auto;
    padding: 0;
}

body .section-location .address .address-holder .inf {
    flex: 1 1 auto;
    padding: 0;
    min-width: 0;
}

/* all three icons are the Pink swatch at 18px — not gold, not teal. The parent paints
   .pin with --primaryColor and expanded_map.min.css repeats it on a bare `.pin`, so set
   both the wrapper and the glyph. */
body .section-location .address .address-holder .pin,
body .section-location .address .address-holder .pin i {
    color: var(--pink, #E5CABA);
    font-size: 18px;
}

/* contact copy is the body token: 18/27 desktop, 16/24 phone. The hours `dl` needs the
   deeper chain — the parent pins it 16/24 at (0,3,1), which is why the three-row block
   measured 72 against the mockup's 81 (3 x 27). */
body .section-location .place span,
body .section-location .tel span,
body .section-location .address .shedule dl {
    font-size: var(--bodyFontSize, clamp(16px, 0.938vw, 18px));
    line-height: var(--bodyLineHeight, 150%);
}

/* the address and phone are Hyperlink components in the mockup and its Default state
   draws no underline — same treatment the differentiator items get */
body .section-location .place a,
body .section-location .tel a {
    text-decoration: none;
}

body .section-location .place a:hover,
body .section-location .tel a:hover {
    text-decoration: underline;
}

/* parent ships the hours as a `.3fr 1fr` grid, which wraps "Tues-/Thurs:"; the mockup is
   two hugging columns on an 8px gutter with the rows flush */
body .section-location .address .shedule dl {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 8px;
    row-gap: 0;
    margin: 0;
}

/* reboot bolds `dt` and gives `dd` a bottom margin; the mockup runs both at the body
   weight with the rows flush */
body .section-location .address .shedule dt,
body .section-location .address .shedule dd {
    width: auto;
    margin: 0;
    white-space: nowrap;
    font-weight: var(--bodyFontWeight, 400);
}

/* the mockup DOES draw this button (188x56, 56 below the hours). The section renders
   it as .btn-primary and the widget as .btn-orange, so both are pinned to the site's
   button treatment here. */
/* parent sets `margin: 56px 0`, and that bottom 56 becomes dead height inside the copy
   column — which is vertically centred against the map, so it lifted the whole copy
   28px above the map's centre line */
body .section-location #footForm.btn-primary,
body .section-location #footForm.btn-orange {
    /* the parent only makes .btn-primary a block, so the widget's .btn-orange stayed
       inline and its vertical padding never built the 56px box (it measured 53) */
    display: block;
    margin: clamp(48px, 2.917vw, 56px) 0 0;
    padding: 16px 32px;
    font-size: 16px;
    line-height: 1.5;
    background-color: var(--primaryColor, #134755);
    color: var(--white, #fff);
    /* Match the header Book Now's hover, which is a plain colour fade — neither button
       draws a ::before/::after slide on this site. Book Now is `.btn.btn-primary`, and
       buttons.scss hangs `transition: all .5s linear` on `.btn-primary` only; the
       interior widget's CTA is `.btn-orange`, which the parent never defines at all, so
       it resolved to `transition: all` with NO duration and the colour snapped. The
       homepage CTA already matched (it renders as .btn-primary) — this is what brings
       the interior one into step. (James, 2026-08-06) */
    transition: all .5s linear;
}

body .section-location #footForm.btn-primary:hover,
body .section-location #footForm.btn-orange:hover {
    background-color: var(--primaryHover, #091F25);
}

body .section-location .mapWrp {
    width: min(42.292vw, 812px);
    float: none;
    padding: 0;
}

/* 812x600, flush. The parent hangs a drop shadow off it that the mockup doesn't draw, and
   pins `height:auto; aspect-ratio:1/1` — which on the interior widget (where its selector
   is (1,2,0)) rendered the map as an 812 square. */
body .section-location #map,
body .widget.section-location #map {
    width: 100%;
    height: min(31.25vw, 600px);
    aspect-ratio: auto;
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
}

/* ============================================================
   Partners / Associations strip — #10
   Rendered by footer.php off Theme Settings (`part_sect.part_active`), not a
   homepage section, so the same strip lands on every interior page. Both frames
   are a flat teal band — sampled #134755 with no border on either edge; the
   hairline under it belongs to the footer — holding the same five 260x80
   knockout logos. Desktop 1920x280 = 100 + 80 + 100 with a 56 gap across;
   phone 390x752 = 80 + (5 x 80 + 4 x 48) + 80. So the logos are a FIXED size at
   both ends and only the wrap count changes between them.
   Scoped from `body` because partners.min.css loads after this sheet.
   ============================================================ */
body .section-partners {
    padding: clamp(80px, 5.208vw, 100px) 0;
}

/* the parent runs one clamp(20px, 3.125vw, 60px) in both axes; the mockups use a
   different value per axis — 56 across the desktop row, 48 down the phone stack */
body .section-partners .partners-list {
    row-gap: 48px;
    column-gap: clamp(20px, 2.917vw, 56px);
}

/* every asset is natively 260x80 and both frames draw them at exactly that. The
   parent instead scales the box to 13.542vw and the height to 4.667vw, which
   shrinks the strip across the whole 1025-1714 range and then jumps it back to
   80 at the breakpoint; a fixed size that wraps is what the design does. */
body .section-partners .partners-list li {
    width: 260px;
    margin-bottom: 0;
}

body .section-partners .partners-list li img {
    height: 80px;
    width: auto;
}

/* ============================================================
   Footer + legal bar — #11 (shared home and interior)
   Both frames are the same component: the teal block opens on a 2px white-15%
   divider, then the content row, then the legal bar behind a second divider.
   Desktop 1920x367 = 2 + 56 + 184 + 56 + (2 + 22 + 21 + 24); phone 390x640 =
   2 + 80 + (100 + 48 + 128 + 48 + 69) + 56 + (2 + 22 + 63 + 24). The footer
   rules ship in the main kindling bundle, which loads BEFORE this sheet, so
   matching its specificity is enough — no `body` prefix needed here.
   ============================================================ */
/* content row and legal bar share the 1640 container — the header's 140px gutter
   — so the footer logo lines up with the header logo and the copyright with the
   Book Now button. kindling ships `.container { width: 90vw }`, and vw counts the
   scrollbar, so that renders an 88.5px gutter in a 1905 layout rather than 140.
   The 64px floor IS the phone frame's own 32px gutter, so this one declaration
   covers both ends and neither breakpoint needs a container override. */
#footer .footer-holder .container {
    width: calc(100% - clamp(64px, 14.583vw, 280px));
    max-width: none;
}

/* logo left, the two menu columns right-aligned as a pair. `space-between` can't
   express that once the empty infoNav column is dropped — it would spread three
   items — so the logo takes an auto margin instead. nowrap so the 398 columns
   SHRINK rather than wrap when the row tightens: an auto margin eats positive
   free space first, so they hold 398 while there is slack and give it back below
   ~1220, where the address is still on one line. */
#footer .footer-holder > .container {
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    padding-bottom: 56px;
}

#footer .footer-holder .foot {
    flex: 0 0 auto;
    width: auto;
    margin-right: auto;
}

/* no menu is assigned to the infoNav location, so the template still prints the
   column — an empty col-lg-3 eating a quarter of the row */
#footer .footer-holder .infoNav {
    display: none;
}

/* align-self, not the row's align-items: the mockup centres the LOGO against the
   content row but top-aligns the two menu columns against each other, so the
   shorter review column starts level with CONTACT US rather than 7px below it */
#footer .footer-holder .servNav,
#footer .footer-holder .loc {
    flex: 0 1 398px;
    width: auto;
    min-width: 0;
    align-self: flex-start;
}

/* 321x140 desktop / 229x100 phone — the same asset at the same aspect, so one
   clamp covers both and floors at the phone width from ~1370 down. The parent
   runs it to 512 wide and opens a 90px well beneath it for the Google reviews
   pill, but the pill is position:fixed and docks itself off the `--btmH` var
   general.js publishes, so that well is dead height — and it is what pushed the
   content row past the mockup's 184. */
#footer .footer-holder .footer-logo {
    width: auto;
    padding-bottom: 0;
}

#footer .footer-holder .footer-logo img {
    width: clamp(229px, 16.719vw, 321px);
    margin: 0;
}

/* column headings are the Overline token — Plus Jakarta Sans SemiBold 16/24 on
   2.4px tracking, uppercase — where the parent renders them in the display serif
   at weight 500 on a 1.54px clamp. display:block is what lets the margin apply
   at all: two of the three are inline `<span class="h3">`. */
#footer .footer-holder .infoNav .h3,
#footer .footer-holder .servNav .h3,
#footer .footer-holder .fLocation h3 {
    display: block;
    font-family: var(--bodyFont, 'Plus Jakarta Sans', Helvetica, Arial, sans-serif);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: var(--btnLetterSpc, 2.4px);
    margin: 0 0 32px;
}

/* the servNav heading is a <button> (the accordion trigger). Flatten it so the
   heading box IS its line box and the 32px below carries from the .h3 margin —
   the parent pads it 18px at the bottom instead, and the base `button` rule sets
   line-height to --btnLetterSpc, i.e. 2.4px. */
#footer .footer-holder .mod-btn.accordion {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    line-height: inherit;
}

/* the parent indents the panel 18px, which sets the review links 18px right of
   their own heading */
#footer .footer-holder .servNav .panel {
    padding: 0;
}

/* links sit on a 24px rhythm off a 24px line box. The parent pads each one 10px
   top and bottom, which makes the pitch 44 rather than the mockup's 48; stating
   line-height as a ratio also lands the phone's 14/21 for free. */
#footer .footer-holder ul a {
    padding: 0;
    line-height: 1.5;
}

#footer .footer-holder .serv-nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
}

/* Contact column: address, phone and socials on the same 24px rhythm as the
   review links. A flex gap rather than the parent's per-child margins, which the
   phone frame would otherwise stack on top of the socials' own 24px top margin. */
#footer .footer-holder .fLocBox {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Location Name is deliberately blank on a single-location site, but the template
   prints the <p> regardless — as a flex item it buys a 24px gap for nothing */
#footer .footer-holder p.practice:empty {
    display: none;
}

/* the size and ratio have to be declared on the PARAGRAPH, not just the link
   inside it: --bodyLineHeight is a percentage, so it computed to 27px against
   body's 18 and inherited down as that LENGTH, which made each row's line-box
   strut 27 and the 24-tall inline-block link sit inside a 27px box — 6px of the
   Contact column's 134-against-128 came from those two rows alone */
#footer .footer-holder .fAddress,
#footer .footer-holder .fLocBox p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

/* both are the 16/24 caption token; the phone link has no size rule at all in the
   parent, so it was inheriting the 18px body token and 27px lines */
#footer .footer-holder .fAddress a,
#footer .footer-holder .tel-footer a {
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
    /* the parent's no-underline rule covers `ul a` and `.fAddress a` but not the
       phone, so it was the one footer link arriving underlined — the mockup draws
       every one of them in the Hyperlink component's Default (no-rule) state */
    text-decoration: none;
}

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

/* 24px BETWEEN THE ICONS AS DRAWN (James, 2026-08-05). The mockup lays them out as
   32x32 frames on a 24px gap, but the glyphs don't fill those frames — a 15px-wide
   facebook-f in a 32 box contributes 8.5px of its own, so boxing them out measured
   a 37.1px visible gap for a 24px flex gap. Letting each link shrink-wrap its glyph
   makes the gap the gap. The parent's 16px gap plus the 10px it inherits from
   `ul a` gave a 24-wide, 44-tall box instead.
   Height stays 32 for the tap target; the narrower glyphs rely on SC 2.5.8's
   spacing exception, which a 24px gap satisfies (24px circles can't intersect). */
#footer .footer-holder .social {
    gap: 24px;
    margin: 0;
}

#footer .footer-holder .social a {
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 0;
}

/* legal bar sits on the footer's own teal behind a 2px white-25% divider — the
   mockup draws this one heavier than the 15% hairline that opens the footer — and
   its 24/24 padding replaces the parent's 16 top / 20 bottom. The parent also
   paints it --black, which would cut the teal band in two.
   Both halves of the line are the 14/21 Minimum token; setting it on the bar
   itself covers the copyright (which has no size rule of its own in the parent, so
   it arrived at the 18px body token) as well as the links, and it resets the same
   inherited 27px line-height LENGTH that was making the bar 82 tall against 71. */
#footer .footer-holder .bottom {
    background-color: transparent;
    border-top-color: #FFFFFF40;
    padding: 24px 0;
    font-size: 14px;
    line-height: 1.5;
}

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

/* the legal items are inline-flex `li`s, so on a line box they pick up the strut's
   descender room on top of their own 21px — flexing the list drops the line box
   entirely. It stays float:right, which blockifies it, so it still shrink-wraps
   against the container's right edge. */
#footer .footer-holder .bottom .bottom-nav {
    display: flex;
    flex-wrap: wrap;
}

/* ============================================================
   Dental Services cards — `.servBlock .servCard`
   Rendered by `page-templates/services-page.php` from the page-level `servs`
   repeater: `.servCard.col-lg-4.center > span.h3 > a` + a `<p>` of comma-separated
   service links (only some of which are linked, which is why the underlines stay —
   they're what distinguishes a linked offering from plain text).
   ⚠️ There is NO mockup for this page (James, 2026-08-06) — the generic interior
   frames contain no cards. So this keeps the parent's card look (Tan, 40px pad,
   square, --shadyMid, centred) and only fixes what is measurably broken plus the two
   things James specified: 16px under the title, and no radius at either breakpoint.
   Prefixed `body .entry.entry-add` because interior_style loads after this sheet AND
   its ≤1024 rule uses `:nth-of-type` alternatives at (0,3,0), which a plain
   `body .servBlock .servCard` (0,2,1) would lose to on cards 4-6.
   ============================================================ */

/* the parent's `width: 28%` is a donor value, not a spec: 3 cards + 2 40px gaps came
   to 995 in the 1088 column, leaving 93px of dead space on the right. Deriving the
   width from the gap fills the row exactly (3 x 336 + 2 x 40 = 1088).
   Ali QA: drop the parent's --shadyMid drop shadow behind the cards. */
body .entry.entry-add .servBlock .servCard {
    width: calc((100% - 80px) / 3);
    border-radius: 0;
    box-shadow: none;
}

/* 16px between the title and the services (James). The margin the parent already
   declares here is 24 AND silently dead — `span.h3` is inline, so vertical margin
   never applied and there was no gap at all.
   Ali QA: card titles are the body sans, all-caps, 24px (parent renders the linked
   title in Bacasime 26 title-case). Set it on the `.h3` and the inner `<a>`, which
   carries its own heading-font/size. */
body .entry.entry-add .servBlock .servCard .h3 {
    display: block;
    margin: 0 0 16px;
    font-family: var(--bodyFont, 'Plus Jakarta Sans', Helvetica, Arial, sans-serif);
    font-size: 24px;
    text-transform: uppercase;
}

body .entry.entry-add .servBlock .servCard .h3 a {
    font-family: var(--bodyFont, 'Plus Jakarta Sans', Helvetica, Arial, sans-serif);
    font-size: 24px;
    text-transform: uppercase;
}

/* card body is 16/24 like every other card on this site. The parent says so too, but
   my `.entry.entry-add p` rule out-specifies its `.servBlock .servCard p` and was
   pulling these up to the 18/27 body token. */
body .entry.entry-add .servBlock .servCard p {
    font-size: 16px;
    line-height: 1.5;
}

/* the block sits between two content blocks, so it takes the interior body's own
   rhythm (80 desktop / 56 phone) rather than the parent's one-off 100/50 */
body .entry.entry-add .servBlock.row.flex.wrap {
    padding: clamp(56px, 4.167vw, 80px) 0;
}

/* ============================================================
   Interior FAQ accordion (Veneers/Implants/Sedation) — page.php `faqs`
   The section is injected outside the ACFE pipeline; faq.min.css is now enqueued
   for it (fn-core.php), which restores the accordion. Ali QA: teal band, white
   text, all-caps heading. All static selectors — the .active/.show expand stays in
   the parent sheet — so these overrides are RUCSS-safe.
   ============================================================ */
body section.faq {
    background-color: var(--teal, #134755);
}

body section.faq .heading h2 {
    text-transform: uppercase;
    color: var(--white, #fff);
}

/* items blend into the band: drop the white card + shadow, keep a hairline divider */
body section.faq .faq-item {
    background-color: transparent;
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

body section.faq .faq-item .accordion {
    background-color: transparent;
    color: var(--white, #fff);
}

body section.faq .faq-item .accordion .h4,
body section.faq .faq-item .accordion::after {
    color: var(--white, #fff);
}

/* the parent collapses via max-height:0 but leaves overflow visible, so the answers
   spilled through under the closed questions — clip them */
body section.faq .faq-item .panel {
    overflow: hidden;
}

body section.faq .faq-item .answer,
body section.faq .faq-item .answer p {
    color: var(--white, #fff);
}

/* ============================================================
   Interior Shortcodes-Ultimate columns (Doctor & Team image|text rows)
   The bio text sits in an su-column beside the photo. The first heading carries the
   bare-WYSIWYG 80px top margin, which drops it ~80px below the photo's top edge
   (Kristen QA: headings should align to the top of the images). The su-column starts
   flush with the photo, so zeroing the leading heading's top margin top-aligns them.
   ============================================================ */
body .entry-add .su-column-inner h2:first-of-type,
body .entry-add .su-column-inner .h2:first-of-type,
body .entry-add .su-column-inner h3:first-of-type {
    margin-top: 0;
}

/* editor leaves an empty leading <p> in the bio column; its bottom margin collapses
   in above the heading and re-opens the gap the rule above just closed */
body .entry-add .su-column-inner > p:empty:first-child {
    margin: 0;
}

/* ============================================================
   Special Offers page card list — page-templates/special-offers.php
   Same `.offers-list > li > .box-offers` markup as the homepage `offers`
   section, rendered from the page-level `spec_off` repeater into
   `.entry.entry-add`. offers.min.css IS enqueued here, so the card base
   (box-holder flex/square/--shadyMid, 80px flex-centred icon, 16/24 body)
   already matches; the visible deltas are exactly the child's `.offers`
   refinements — title font, hairline border, Learn More tracking — which are
   grafted onto `body.page-template-special-offers` up in the offers block.
   What's left is page-only. No page mockup (James): the homepage offer card
   is the reference, on the plain white page like the Dental Services cards.
   ============================================================ */

/* white, not the parent's --altBg tan (James). Drop the interior_style
   main-frame padding so #content's own 140/140 owns the vertical rhythm like
   every other interior page, rather than stacking 120 on top of it. */
body.page-template-special-offers .main-frame {
    background-color: var(--white, #fff);
    padding: 0;
}

/* widen the 1088 content column to the homepage card row (3 x 444 + 2 x 16)
   so the cards land at 444 rather than shrinking to 352 in here */
body.page-template-special-offers .main-frame .container #content {
    width: min(1408px, calc(100% - 64px));
}

/* the homepage's 444 card on the 16px gap, 3-up; interior_style otherwise
   flexes them 1 1 0 to fill the row */
body.page-template-special-offers .offers-list > li {
    flex: 0 0 auto;
    width: calc((100% - 32px) / 3);
    max-width: 444px;
    min-width: 0;
    margin-bottom: 0;
}

/* card body is the flat 16/24 offers.min.css gives the homepage — here the
   interior `.entry.entry-add p` rule (18/27 + a 1.5em bottom margin) out-
   specifies that base, so pin it back. The ≤567 block already drops it to
   14/1.5 for both contexts. */
body.page-template-special-offers .box-offers .offers-info p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* ============================================================
   Interior hero banner — `.promo.bar.bar-title`
   Rendered by templates/partial-banner.php on every interior page type, so this
   one block covers About Us, Dental Services, Special Offers, Contact Us and Blog.
   ⚠️ EVERY rule here carries a `body` prefix for LOAD ORDER, not specificity
   theatre: interior_style.min.css is enqueued AFTER this sheet on interior pages
   and its hero rules run to (0,4,0)/(0,5,1), so a matching child selector loses.
   `.promo.bar.bar-title` can't reach the homepage hero — that one is a bare
   `.promo` from static_promo_banner — so none of this bleeds.

   The parent ships the Dental Beauty treatment: a full-bleed photo under a navy
   GRADIENT panel sized clamp(420px, 58%, 950px). This design is a hard 50/50
   split — flat Tan left, photo right — so the panel becomes opaque Tan at exactly
   50% and the photo is constrained to the other half. Constraining it matters even
   though an opaque panel would hide a full-bleed photo anyway: `object-fit: cover`
   against a 1920-wide box crops differently than against the mockup's 960.
   Desktop 1920x560. Phone 390x416 = 240 photo + 80 + 2 x 32 title + 32.
   ============================================================ */
body .promo.bar.bar-title {
    background-color: var(--tan, #F7F4F1);
}

/* right half only; the parent pins this to `inset: 0` */
body .promo.bar.bar-title .ban-image {
    inset: 0 0 0 50%;
    width: auto;
}

/* Left padding is the container gutter (140 at 1920, floor 32 = the phone frame's
   own gutter), so the breadcrumb and title ink line up with the header logo and
   every section below. Top 32 / bottom 56 are the mockup's breadcrumb pt- and
   title pb-; both change at ≤1024. */
body .promo.bar.bar-title .ban-content {
    width: 50%;
    background: var(--tan, #F7F4F1);
    padding: 32px clamp(32px, 7.604vw, 146px) 56px clamp(32px, 7.292vw, 140px);
}

/* parent holds this at 55%, which wraps the title early inside the panel */
body .promo.bar.bar-title .tWrap {
    width: 100%;
}

/* Bacasime REGULAR — the parent renders it at weight 600, which thickens the
   display serif the same way the homepage hero's text-stroke did. 56 at 1920 is the
   h2 token's own maximum, but the phone frame drops to 32 where --h2FontSize floors
   at 40, so this needs its own clamp. --h2LineHeight already goes 115% → 100% at
   ≤567, which IS the mockup's 1.15 desktop / 1.0 phone. */
body .promo.bar.bar-title .tWrap h1,
body .promo.bar.bar-title .tWrap h2 {
    font-weight: var(--headingFontWeight, 400);
    font-size: clamp(32px, 2.917vw, 56px);
    line-height: var(--h2LineHeight, 115%);
    color: var(--black, #091F25);
}

/* the panel is Tan now, so white breadcrumbs are invisible. The parent also clamps
   the size 14→16; the mockup holds a flat 14. */
body .promo.bar.bar-title .breadcrumbs-block,
body .promo.bar.bar-title .breadcrumbs-block a {
    color: var(--black, #091F25);
}

/* the crumb link arrives underlined; the mockup draws it plain, same Hyperlink
   Default state as the diff items, footer and map links */
body .promo.bar.bar-title .breadcrumbs-block a {
    text-decoration: none;
}

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

body .promo.bar.bar-title .breadcrumbs-block {
    font-size: 14px;
    line-height: 1.5;
}

/* the crumbs live in an inner `.breadcrumb` div, so the mockup's 24px gap belongs
   there rather than on .breadcrumbs-block. Parent pads it 5px on top. */
body .promo.bar.bar-title .breadcrumb {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0;
}

/* the separator ships as `fa-caret-right` (a filled triangle); the mockup draws a
   thin chevron, so swap the glyph rather than the markup — \f054 is in the build */
body .promo.bar.bar-title .breadcrumb .fa-caret-right::before {
    content: '\f054';
}

/* ============================================================
   Interior page content — `.entry.entry-add` + the page-offer card
   Same load-order rule as the hero: interior_style.min.css comes after this sheet,
   so everything here carries a `body` prefix.

   The frame's rhythm is one number: 80 desktop / 56 phone between blocks, with a
   flat 24 under every heading. interior_style's global heading margin already says
   `clamp(40px, 4.167vw, 80px) 0 24px` — so only the FLOOR is wrong (every phone gap
   in the frame is 56), which is why the headings below just restate the clamp
   rather than inventing a scale.
   ============================================================ */

/* Column measure. The parent already lands the mockup's 1088 via
   `min(95%, 1088px)` — but that 95% is of the 90vw `.container`, which leaves 333
   on a phone where the frame wants 326, and its vertical padding is 80 where the
   frame is 140. Neutralise the nested container and drive both off #content; the
   64px floor IS the phone's 32px gutter, so one declaration covers both ends.
   `:has(#content)` keeps this off the other .main-frame templates (the special-
   offers page puts its card list in there), mirroring the parent's own idiom.
   Note the mockup's 416 side gutter falls out as 408.5 in a 1905 layout — here the
   spec is the 1088 COLUMN, not gutter alignment, so the cap is the faithful form. */
body .main-frame > .container:has(#content) {
    width: 100%;
    max-width: none;
    padding: 0;
}

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

/* Content headings are the Desktop/H2 Title token — Bacasime 48/1.15 uppercase,
   dropping to 32/1.0 on the phone frame. They currently fall through to the global
   h2 at --h2FontSize's 56, because interior_style declares `$i-h1-font-size` /
   `$i-h2-font-size` and then never uses them — the only reference is a comment, and
   they are Sass literals anyway, so they can't be re-pointed from a child var.
   --h2LineHeight already goes 115% → 100% at ≤567, i.e. the mockup's 1.15 / 1.0. */
body .entry.entry-add h1,
body .entry.entry-add h2 {
    font-family: var(--headingFont, 'Bacasime Antique', Georgia, serif);
    font-size: clamp(32px, 2.5vw, 48px);
    line-height: var(--h2LineHeight, 115%);
    font-weight: var(--headingFontWeight, 400);
    text-transform: uppercase;
    color: var(--black, #091F25);
    margin: clamp(56px, 4.167vw, 80px) 0 24px;
}

/* Interior h3 = a smaller sibling of the h2 (James, 2026-08-06). It already arrived
   as Bacasime 400 in --black, so family, weight and colour matched; what made it read
   wrong was (a) no uppercase where the h2 is uppercase, and (b) it borrowed
   --h3FontSize, which is the style guide's H3 **Subheader** — a Plus Jakarta Sans
   Medium 26 for cards and overlines, not a serif display step. At 26 against the h2's
   48 that is a 46% drop, not "a little smaller".
   32/24 keeps the same 2:3 step at both breakpoints (48→32 desktop, 32→24 phone) and
   invents nothing: 32 is the design's own Mobile H2 Title and 24 its H4 Subtitle. The
   resulting ladder reads 48 serif caps → 32 serif caps → 26 sans medium on cards → 18
   body. line-height follows the h2's token, so it tightens to 1.0 at ≤567 like the h2.
   ⚠️ Scoped to the h3 ELEMENT only, deliberately not `.h3`: the services-page card
   titles are `span.h3` inside this same .entry, and they belong to the card recipe's
   sans subheader — widening this to .h3 would restyle them too. */
body .entry.entry-add h3 {
    font-size: clamp(24px, 1.667vw, 32px);
    line-height: var(--h2LineHeight, 115%);
    text-transform: uppercase;
    margin: clamp(56px, 4.167vw, 80px) 0 24px;
}

/* both frames open on body copy, and #content's own padding is the space above it */
body .entry.entry-add > *:first-child {
    margin-top: 0;
}

/* Body is the 18/27 → 16/24 token. The parent pins line-height to
   `clamp(24px, 1.667vw, 26px)` — 26 at 1920 where 18 x 1.5 is 27, the same
   px-line-height-that-isn't-1.5 slip the diff list and legal bar had.
   Paragraph spacing in both frames is exactly ONE line (27 desktop / 24 phone),
   which `1.5em` expresses at either size; reboot ships a flat 1rem. */
body .entry.entry-add p,
body .entry.entry-add ul li {
    font-size: var(--bodyFontSize, clamp(16px, 0.938vw, 18px));
    line-height: 1.5;
}

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

/* Content bulleted/numbered lists sit flush with the body copy — the parent pins the
   dot ::before at the li's left:0 but never indents the ul, so the list reads
   un-indented against the paragraph above it (Kristen QA, Insurance & Financing).
   Indent the whole list so the bullets clear the body-copy margin. */
body .entry.entry-add > ul:not(.offers-list),
body .entry.entry-add > ol {
    padding-left: clamp(24px, 2.083vw, 40px);
}

/* 10px on every in-content image (James, 2026-08-06). The parent runs the plain
   case to `clamp(40px, 4.17vw, 80px)` — pill-round at desktop — and then the float
   variants to --cardBorderRad's 0, so the two disagree with each other as well. */
body .entry img,
body .entry img.alignleft,
body .entry img.alignright {
    border-radius: 10px;
}

/* ---- page-offer card ----
   ⚠️ Matchbox renders this from a `[display_offer id]` SHORTCODE that editors place
   with the WYSIWYG "Special Offer" button (fn-custom.php) — `templates/partial-offer.php`
   is dead code and the page-level `special_offer` field is vestigial. So the card
   sits in the content flow exactly where the frame draws it, and it only appears
   once the shortcode is in the copy. It cannot land in the hero on this framework,
   so the fgB "three contexts" problem doesn't arise.
   Teal, square, and the style guide's Drop shadow (medium) — which IS --shadyMid;
   the parent hangs a one-off `0 40px 40px #0000001A` on it instead. Frame padding is
   80/56, not the parent's uniform 56. */
body .entry.entry-add .page-offer {
    padding: 80px 56px;
    margin: clamp(56px, 4.167vw, 80px) 0;
    text-align: center;
    box-shadow: var(--shadyMid, 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 40px 50px 0 rgba(0, 0, 0, 0.05));
}

/* both children cap at 812 and centre inside the 976 content box */
body .entry.entry-add .page-offer h2,
body .entry.entry-add .page-offer p {
    max-width: 812px;
    margin-left: auto;
    margin-right: auto;
}

/* title is the H3 Subheader token (26/1.25 desktop, floors at the frame's 24/30 on
   a phone); the parent runs it to 30/38 */
body .entry.entry-add .page-offer h2 {
    font-size: var(--h3FontSize, clamp(24px, 1.354vw, 26px));
    line-height: var(--h3LineHeight, 125%);
    margin-top: 0;
    margin-bottom: 24px;
}

/* card body holds a flat 16/24 where the entry body token reaches 18/27 */
body .entry.entry-add .page-offer p {
    font-size: 16px;
    line-height: 1.5;
}

body .entry.entry-add .page-offer p:last-child {
    margin-bottom: 0;
}

/* The parent hides images inside the offer card by design (`.page-offer img
   { display: none }`), but the WYSIWYG wraps them in their own `<p>` — which then
   collapses to 0 height while keeping its 24px bottom margin, so the card measured
   312.5 against a 288.5 content stack. Hide the wrapper on the same intent.
   (HCD's offer copy carries one such image, still hotlinked from the fgframeb PRD —
   flagged for import & format; this only stops it costing layout.) */
body .entry.entry-add .page-offer p:has(img) {
    display: none;
}

/* ============================================================
   Contact page form — `.conForm` (contact-page.php)
   A CF7 form (id 15663) placed via the `con_sc` field into
   `.conForm > .container > .heading + .formWrap > form`. James: the section is
   the FOOTER colour, so it's a dark section — the parent already whitens the
   heading and the `.top` legend/labels, so only the deltas live here. Submit is
   #fff with dark text, fading to --tan on hover (James). No page mockup.
   (The email input was collapsing because the CF7-honeypot plugin collapses the
   `<p>` its trap lives in, and the trap was inline with the email — fixed by
   moving the honeypot to its own paragraph in the form's `_form` meta; see the
   DB edits, not this sheet.)
   ============================================================ */

/* footer teal, not the parent interior_style's --black */
body .conForm {
    background-color: var(--footerBg, #134755);
}

/* validation/response text readable on the dark section */
body .conForm .wpcf7-response-output {
    color: var(--white, #fff);
}

/* the field labels are `class="hidden"` — the FG screen-reader-only pattern with
   the placeholders as the visible labels — but `.hidden` doesn't actually hide on
   this build, so the dark label text was merely camouflaged on the old --black
   section and turned into low-contrast dark-on-teal once the bg changed. Make them
   properly visually-hidden (still read by AT via their `for=`). */
body .conForm .formWrap label.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* New Patient? row (James): left-align the legend + Yes/No so the label lines up
   with the inputs in the left column below it, keep the radios close to the label,
   and vertically centre the row so the group aligns with the Full Name input to its
   right (that input sits mid-row inside its autop <p>). The legend is a flex item
   that fills the leftover row width (~273 of 456), which parked the radios at the
   right edge — shrink it to its text. */
body .conForm .formWrap form .row.flex {
    align-items: center;
}

body .conForm .formWrap .top .flexWrap {
    justify-content: flex-start;
    gap: 16px;
}

body .conForm .formWrap .top .flexWrap legend {
    width: fit-content;
    flex: 0 0 auto;
    font-size: 18px;
}

/* placeholder text colour on both CF7 forms — the inline contact form and the
   Book Now popup #formPop / #formPop2 (James) */
body .conForm .formWrap ::placeholder,
body #formPop ::placeholder,
body #formPop2 ::placeholder {
    color: #767676;
}

/* submit: #fff with dark text, fading to --tan on hover (James) — the site's
   plain colour-fade button hover, not a slide. The parent's `.btn-orange:hover`
   (interior_style, loads after this sheet) pins it to --primaryColor + white, so
   both states are out-specified here. */
/* Ali QA: drop the UA `2px outset` border the submit falls back to (`.btn` sets no
   border) — the "stroke" reads as an unstyled edge on the white button. */
body .conForm input[type="submit"].btn-orange {
    background-color: var(--white, #fff);
    color: var(--black, #091F25);
    border: none;
    transition: background-color 0.5s linear;
}

/* Ali QA: keyboard focus on the teal form needs a WHITE ring — the UA/dark default
   is invisible on the dark band. Applies to every control incl. the Yes/No radios. */
body .conForm .formWrap :focus-visible {
    outline: 2px solid var(--white, #fff);
    outline-offset: 2px;
}

body .conForm input[type="submit"].btn-orange:hover {
    background-color: var(--tan, #F7F4F1);
    color: var(--black, #091F25);
}

/* Ali QA: the Yes/No radios render inconsistently on mobile (native accent-color is
   drawn by the OS, so Android's Material control looks nothing like desktop's). Draw a
   custom control instead — appearance:none makes it identical on every device, and a
   white ring + white dot reads cleanly on the teal band. `middle` centres it on the
   label where the native baseline dropped it low. */
body .conForm input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
    border: 2px solid var(--white, #fff);
    border-radius: 50%;
    background: transparent;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
}

body .conForm input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--white, #fff);
}

/* ============================================================
   formPop (Book Now popup — shared home + interior)
   The Matchbox #formPop modal is already well-styled: white, contactHead 26px
   title-case dark, inputs carry a 2px #767676 border, the .hidden labels are
   display:none, the response text is already --black, and placeholders are set
   to #767676 up in the contact-form block. The submit even ships the Book Now
   look (teal, white, Plus Jakarta 16/600, 2.4px, uppercase, square, 16/32).
   James: it's on white, so it should BE the Book Now button — the only gap is
   the hover. The parent snaps it with `filter: brightness(.92)` and no
   transition, where Book Now (.btn-primary) fades --primaryColor → --primaryHover
   over .5s. Match that. Selector mirrors the parent so it wins on load order. */
#formPop .formPop-form form input[type="submit"],
#formPop2 .formPop-form form input[type="submit"] {
    transition: background-color 0.5s linear;
}

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

/* Ali QA: the intro phone number reads as plain text — underline it on hover */
#formPop a[href^="tel"]:hover,
#formPop2 a[href^="tel"]:hover {
    text-decoration: underline;
}

/* Ali QA: "New Patient?" is the 18px body size (was 24px), so it sits level with the
   Yes/No options below it */
#formPop legend,
#formPop2 legend {
    font-size: 18px;
}

/* Ali QA: the Location Information hours read at 16px */
#formPop .inf dl dt,
#formPop .inf dl dd,
#formPop2 .inf dl dt,
#formPop2 .inf dl dd {
    font-size: 16px;
}

@media (max-width: 1024px) {
    /* ---- Mobile header ----
       Parent hides .logo-block/.locNavBtns here and swaps to the fixed 56px
       .header-holder bar plus the in-flow .mobHd block (logo + Book Now).
       Mockup bar is 50px, so #header pads down by that to clear it.
       `body` prefix is load-bearing (Ali QA): the desktop sticky-header rule is
       `body #header{padding:26px 0 24px}` (1,0,1) and out-specified this (1,0,0), so
       on mobile the header kept 26/24 — the bar then covered half the top padding and
       an extra 24px opened below, making the visible top/bottom gaps read 24 vs 73.
       Matching specificity (later in source) lets the 50/0/0 win: the bar clears fully
       and .mobHd's own 48/49 becomes the visible gap on both ends. */
    body #header,
    body #header:hover {
        padding: 50px 0 0;
    }

    /* mockup casts a shadow off the bar onto the header block below it — measured
       ~42px deep, ~0.05 peak alpha, which is the style guide's Drop shadow (small),
       the effect the mobile frame declares. Parent only applies a shadow here once
       body.scrolled is set, so it needs to be unconditional. */
    #header .header-holder {
        /* the bar is full-bleed here — the parent declares this too, but the child's
           desktop gutter rule matches its specificity and loads later, so it wins
           unless the width is restated at this breakpoint */
        width: 100%;
        height: 50px;
        background-color: var(--white, #fff);
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    #header .menu-opener {
        top: 14px;
        right: 32px;
    }

    /* teal phone square, top-left of the bar — opens the #contInfo popup.
       Parent pins it via .mobile-show.moreInfo / .mobile-show.moreInfo a, so both
       need matching specificity. Square corners — confirmed by sampling the
       mockup's corner pixels, and the parent's var(--cardBorderRad) is 0 here. */
    .mobile-show.moreInfo {
        top: 8px;
        left: 32px;
    }

    .mobile-show.moreInfo a.show-info {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 0;
    }

    #header .mobHd {
        padding: 48px 0 49px;
        text-align: center;
    }

    /* ships padding 27.75px/19.4px, which offsets the logo and inflates the gap
       to the button — spacing is driven by .mobHd and the button margin instead */
    #header .mobHd .mob-logo-section {
        padding: 0;
    }

    #header .mobHd #mobLogo img {
        width: 228px;
        height: auto;
        margin: 0 auto;
    }

    /* framework floats this fixed at top:28px with left:50% + translate(-50%,-50%);
       going back into flow means the transform must be cleared too, or it drags the
       button ~250px left and 28px up */
    #header .mobHd .btn-block.mobile-show {
        position: static;
        transform: none;
        margin-top: 33px;
    }

    #header .mobHd #sOpenFormMob {
        width: 176px;
        height: 56px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    /* ---- Mobile nav drawer (MmenuLight off-canvas) ----
       The drawer's own CSS is in the parent's no-rucss.min.css, which is enqueued
       between kindling and this sheet, so matching its specificity is enough.
       The panel stays light (white, black links); only the 50px title bar goes dark.

       The bar IS the navbar's ::after — it carries `data-mm-spn-title` across
       top/left/right at the 50px item height — so the background belongs on the
       pseudo, not on .mm-spn (which would repaint the whole panel). The parent
       ships the title at opacity .4, i.e. --black at 40% over white, which is what
       made "High Country Dental" disappear into the panel (James, 2026-08-05).
       Teal to match the footer and offers bands; --black is the other candidate. */
    .mm-spn.mm-spn--navbar::after {
        background-color: var(--teal, #134755);
        color: var(--white, #fff);
        opacity: 1;
    }

    /* the back arrow on a sub-panel lives INSIDE that bar, and both are pseudos of
       the same element — ::after paints later, so it would bury the arrow under the
       new background. Raising it also has to re-colour it: it draws in currentColor
       at .4, which is invisible on teal. */
    .mm-spn.mm-spn--navbar::before {
        z-index: 1;
        border-color: var(--white, #fff);
        opacity: 1;
    }

    /* ⚠️ MmenuLight draws its chevron on EVERY `li`, not just the ones with a
       submenu — at --black/.4 over white the leaf ones are faint enough to read as
       absent, but they are all rendering. So darkening to #767676 has to be scoped
       to real parents, or About Us / Special Offers / Contact Us grow chevrons that
       point at nothing. opacity has to go to 1 as well, or #767676 at 40% lands
       around #c8c8c8 and the arrows stay washed out. */
    .mm-spn li:has(> ul)::before {
        border-color: #767676;
        opacity: 1;
    }

    .mm-spn li:not(:has(> ul))::before {
        display: none;
    }

    /* ---- Differentiator stacks (both contexts) ----
       Both phone frames are 390x922 and reconcile as 100 + 30 + 48 + 184 + 48 + 184
       + 48 + 184 + 100, i.e. one column with a flat 48 between blocks. (The mockup's
       own last block is pinned 4px short of its content, so the natural build is 926 —
       the 4px is a Figma drag-resize, not spec.)
       The parent only turns the HOMEPAGE row into a column at ≤1024. The interior
       widget's row is re-styled by interior_style.min.css — wrap + 40px row-gap at
       ≤768, column only at ≤567 — and that sheet loads AFTER this one, so the widget
       selector needs the extra `body` to out-specify it. */
    .diff .row.flex,
    body .widget.widget-diff .row.flex {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        row-gap: 48px;
        column-gap: 0;
    }

    /* desktop's gap-aware thirds give way to a full-width block, capped so the tablet
       range doesn't stretch a phone-designed column across 875px */
    .diff .diffBox,
    .widget.widget-diff .diffBox {
        width: 100%;
        max-width: 398px;
    }

    /* ---- Hero stacks ----
       The 28% teal panel can't hold the 56px display type below ~950px, so the
       split gives way to a photo band above a full-width teal panel. */
    body.home .promo {
        height: auto;
    }

    body.home .promo .promoBg {
        position: relative;
        left: auto;
        width: 100%;
        height: auto;
    }

    body.home .promo .promoBg img {
        width: 100%;
        height: auto;
    }

    body.home .promo .promo-holder {
        height: auto;
    }

    /* mockup panel is 300 tall with the headline ink 110 from the top / 46 from the
       bottom; the 3 line boxes (168) run ~12px taller than the ink (144), so the
       padding is 98/34 rather than 110/46 */
    body.home .promo .slide_content {
        width: 100%;
        margin: 0;
        padding: 98px 32px 34px;
    }

    /* ---- News blocks stack ----
       Photo on top with the gold band behind it, copy below on the section
       background. The two blocks are IDENTICAL here — the desktop mirroring is
       dropped, so news2 loses its flipped background too.
       Mockup: 100 pad / photo 326x353 / 48 / copy / 100 pad = the 873 frame.
       The parent keeps `.half-content.reverse .container` on row-reverse even at
       this breakpoint, so news1 needs the column direction forcing back. */
    body #news1.half-content .container,
    body #news2.half-content .container {
        width: 100%;
        flex-direction: column;
    }

    /* the mobile frame shows the background's whole left-to-right gradient, not
       the flat centre slice `cover` crops to at this aspect */
    body #news1.half-content::before,
    body #news2.half-content::before {
        background-size: 100% 100%;
    }

    body #news2.half-content::before {
        transform: none;
    }

    body #news1.half-content::after,
    body #news2.half-content::after {
        display: none;
    }

    /* the gold moves off the section and onto the photo's own box, which is
       exactly the photo's height: 240 of 353 is 68%, centred, which leaves the
       mockup's 57 top / 56 bottom overhang at whatever size the photo lands. */
    body #news1.half-content .image,
    body #news2.half-content .image {
        height: auto;
        padding: 0;
        background: linear-gradient(var(--gold, #C9AD88) 0 0) center / 100% 68% no-repeat;
    }

    /* 32px of gold each side, capped at the width the desktop layout hands over
       at 1025 so the photo doesn't jump across the breakpoint */
    body #news1 .image img,
    body #news2 .image img {
        width: min(100% - 64px, 433px);
        margin: 0 auto;
    }

    body #news1 .text,
    body #news2 .text {
        align-self: stretch;
        padding: 48px 32px 0;
    }

    /* hold the copy to the photo's width so the two stay aligned once the photo
       caps — on a phone both are 100% - 64px, so this only bites above ~497 */
    body #news1 .text > div,
    body #news2 .text > div {
        max-width: 433px;
        margin: 0 auto;
    }

    /* ---- Reviews ----
       Parent drops the container to 90%, which is a 19.5px gutter on a phone
       where the mockup wants 32. The quote's own min(100%, 812px) then falls
       out of the container at every width. */
    body .reviews .container {
        width: 100%;
        padding: 0 32px;
    }

    /* ---- Featured Services stacks ----
       Mockup runs one full-width tile per row. The parent goes 2-up here, which
       leaves the third panel as a half-width orphan on a row of its own. */
    body .feat-services .row.flex {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
    }

    body .feat-services .featLink {
        flex: 0 0 auto;
        width: 100%;
    }

    body .feat-services .featBox {
        height: 100%;
    }

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

    /* ---- Steps stack ----
       The rule turns vertical: the mockup draws one 3px line from the first
       title's top to the last body's bottom, with the blocks covering it, so
       only the 32px it shows in each gap is real. Cheaper to draw those two
       segments than to mask a full-height line. */
    body .cardBlock .flex-row {
        flex-direction: column;
        align-items: center;
        gap: 64px;
    }

    body .cardBlock .flex-row::before {
        display: none;
    }

    /* a 398px basis becomes a HEIGHT once the main axis flips; the parent also
       ships 95% width and a 43px bottom margin at ≤479, which fight the gap */
    body .cbCard {
        flex: 0 0 auto;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* 3x32 gold, centred in the 64px gap above each block after the first */
    body .cbCard + .cbCard::before {
        content: '';
        position: absolute;
        top: -48px;
        left: 50%;
        width: 3px;
        height: 32px;
        transform: translateX(-50%);
        background-color: var(--gold, #C9AD88);
    }

    /* title→body is 16 here, and with the rule gone the knockout inset would
       only narrow the title for nothing */
    body .cbCard h3 {
        margin-bottom: 16px;
        padding: 0;
    }

    body .cardBlock .row .btn {
        margin-top: 32px;
    }

    /* ---- Offers become a slider ----
       Container goes full-bleed so Splide's 8% side padding lands the mockup's
       32px gutter with a 16px peek of each neighbour; the heading keeps its own
       32px gutter (the parent gives it 20 at ≤768). */
    body .offers .container {
        width: 100%;
    }

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

    /* Splide owns the slide width here — the desktop 3-up would otherwise win on
       specificity, and the max-width would cap the slide */
    body .offers--slider .offers-list li {
        width: auto;
        max-width: none;
    }

    /* Splide is live here, so the track has to clip again — without it every slide
       and clone spills across the page. That puts the shadow crop back, so pad the
       clip box out and pull the same amount off the margin, keeping section spacing
       unchanged. Vertical only — horizontal padding would change Splide's
       slide-width maths (and its own inline padding wins there anyway). */
    body .offers--slider .splide__track {
        overflow: hidden;
        padding: 16px 0 56px;
        margin: -16px 0 -56px;
    }

    /* phone card carries the style guide's small drop shadow, not the medium */
    body .offers .box-offers .box-holder,
    body.page-template-special-offers .box-offers .box-holder {
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    /* mockup draws no pagination, and hiding it is what makes the card sit 100
       off the section's bottom edge. The slider autoplays, is swipeable, and every
       card stays in the DOM. */
    body .offers--slider .splide__pagination {
        display: none;
    }

    /* ---- Map / Location stacks (both contexts) ----
       Phone frame puts the MAP ON TOP with the copy below it. The DOM order is
       address-then-map, so column-reverse is what lifts the map without touching the
       template. Copy stays LEFT aligned (the framework centres it). */
    body .section-location .map-block {
        flex-direction: column-reverse;
        justify-content: normal;
        gap: 48px;
    }

    body .section-location .address,
    body .section-location .mapWrp {
        width: 100%;
    }

    /* 240 on the phone frame. The clamp reaches 320 at 1024, which is exactly what the
       desktop rule's min(31.25vw, 600px) gives at 1025 — so the height flows through
       the breakpoint instead of snapping. */
    body .section-location #map,
    body .widget.section-location #map {
        height: clamp(240px, 31.25vw, 320px);
    }

    /* ---- Partners ----
       nothing to restate: the fixed 260x80 logo and the 48px row gap in the base
       rules already reproduce the phone frame once the row wraps to one-up, and
       the base padding clamp floors at the frame's 80. The parent's own ≤768
       `padding: 40px 0` and ≤768 `li { margin-bottom: 20px }` are both out-
       specified from the base rules rather than answered here. */

    /* ---- Footer stacks ----
       Phone frame is one centred column: logo, then the CONTACT block (address /
       phone / socials, with its heading dropped), then LEAVE A REVIEW with its
       links laid out inline on pipes. So the two menu columns SWAP against the
       DOM order (foot, infoNav, servNav, loc) — hence `order`.
       The parent's ≤567 `.footer-holder { padding: 50px 0 0 }` would normally win
       over a ≤1024 rule, but that block is in kindling and this sheet loads after
       it, so the 80 below holds at every phone width. */
    #footer .footer-holder {
        padding-top: 80px;
    }

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

    /* parent adds 20px under the logo, which lands on top of the 48px gap */
    #footer .footer-holder .foot:first-of-type {
        width: 100%;
        margin: 0;
    }

    /* ⚠️ a 398px basis becomes a HEIGHT once the main axis flips to column */
    #footer .footer-holder .loc {
        order: 2;
        flex: 0 0 auto;
        width: 100%;
    }

    #footer .footer-holder .servNav {
        order: 3;
        flex: 0 0 auto;
        width: 100%;
        padding-left: 0;
    }

    /* the phone frame runs the address straight off the logo — no CONTACT US */
    #footer .footer-holder .fLocation h3 {
        display: none;
    }

    /* heading to links closes from 32 to 24 */
    #footer .footer-holder .servNav .h3 {
        margin-bottom: 24px;
    }

    /* The review links stay OPEN here and run inline on pipes, so the accordion is
       neutralised rather than restored: the phone frame draws no chevron and no
       collapsed state. That does drop the mobile accordion behaviour — flagged to
       James as a design call, not an oversight. */
    #footer .footer-holder .mod-btn.accordion::after {
        display: none;
    }

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

    #footer .footer-holder .serv-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }

    /* the pipe has to share a line with the link, and `ul a` is display:block, so
       the item becomes a flex row: its own 24px gap sits between the text and the
       pipe, the list's 24px between the pipe and the next label. */
    #footer .footer-holder .serv-nav li {
        display: flex;
        align-items: center;
        gap: 24px;
        /* size AND ratio have to be on the ITEM, not just the link: the pipe is the
           item's own ::after and inherits both. It was arriving at 16px on a 24px
           line-height LENGTH, so `align-items: center` sized every row to 24 against
           the frame's 21 — 3px straight into the section height. */
        font-size: 14px;
        line-height: 1.5;
    }

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

    #footer .footer-holder .serv-nav a {
        font-size: 14px;
    }

    /* legal bar stacks with the copyright FIRST — the DOM order is nav then
       copyright — and the frame's three 21px lines run flush, so no gap */
    #footer .footer-holder .bottom .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #footer .footer-holder .copyright {
        order: 1;
        float: none;
        margin: 0;
        text-align: center;
    }

    #footer .footer-holder .bottom .bottom-nav {
        order: 2;
        float: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ---- Interior hero stacks ----
       Phone frame is photo band on top, Tan copy band below, and NO breadcrumbs.
       The parent instead keeps the photo full-bleed and lays a dark gradient panel
       over it at full width, so the whole arrangement is rebuilt here.
       390x416 = 240 + (80 + 2 x 32 + 32). */
    body .bar.bar-title {
        /* parent adds `30px 15px` here, which would inset the full-bleed photo */
        padding: 0;
    }

    /* column-REVERSE: the DOM is .ban-content then .ban-image, and the phone frame
       puts the photo on top — same reason the map block reverses */
    body .promo.bar.bar-title .row.flex {
        display: flex;
        flex-direction: column-reverse;
        min-height: 0;
    }

    /* out of absolute and into the flow as a band. 240 is the phone frame; the cap
       meets the desktop half-panel's own floor at the breakpoint so the switch
       doesn't jump — same clamp the map band uses. */
    body .promo.bar.bar-title .ban-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: clamp(240px, 31.25vw, 320px);
    }

    body .promo.bar.bar-title .ban-content {
        width: 100%;
        min-height: 0;
        background: var(--tan, #F7F4F1);
        padding: 80px 32px 32px;
    }

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

    /* ---- Dental Services cards stack ----
       The parent stacks them here but also hangs an asymmetric
       `border-radius: clamp(40px, 4.17vw, 80px) 0 …` on two corners plus a 2px bottom
       border — neither of which exists at desktop. James: no radius at either
       breakpoint. The border goes with it: the desktop card is a Tan panel with a
       shadow and no border, so a mobile-only bottom rule reads as a mistake.
       Full width rather than the parent's 90%, so the cards line up with the
       paragraphs above them — the content column already provides the 32px gutter. */
    body .entry.entry-add .servBlock .servCard {
        width: 100%;
        margin: 0;
        border-radius: 0;
        border-bottom: 0;
    }

    /* ---- Special Offers page cards stack ----
       1-up below 1025 (the homepage drops its 3-up here too, to a slider),
       each capped at the 444 card width and centred by the list. */
    body.page-template-special-offers .offers-list > li {
        width: 100%;
        max-width: 444px;
    }

    /* ---- Interior content ----
       The column, its 80px padding floor and the 56px block rhythm all come from
       the base clamps, so only the offer card's own padding changes here: the frame
       goes 80/56 → 56/32, and the title-to-body gap 24 → 16. */
    body .entry.entry-add .page-offer {
        padding: 56px 32px;
    }

    body .entry.entry-add .page-offer h2 {
        margin-bottom: 16px;
    }

    #formPop .formPop-close,
    #formPop2 .formPop-close {
        left: auto;
        right: 14px;
    }

    #formPop legend,
    #formPop2 legend {
        font-size: 16px;
    }

    #formPop .formPop-form input:not([type="submit"]),
    #formPop .formPop-form textarea,
    #formPop2 .formPop-form input:not([type="submit"]),
    #formPop2 .formPop-form textarea {
        border: 2px solid var(--black, #091F25);
    }

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

@media (max-width: 567px) {
    :root {
        --h2LineHeight: 100%;
    }

    body .cardBlock .row a.btn.bottom-opener {
        margin-top: 56px;
    }

    body .offers .box-offers .specFormWrapper {
        margin-top: 24px;
    }

    body #footer .footer-holder #btm {
        margin-top: clamp(48px, 14vw, 64px);
    }

    body .google-button-container {
        left: 16px;
        right: auto;
        transform: none;
    }

    /* mockup pins the photo band to 240px, cropping the 567x324 asset */
    body.home .promo .promoBg img {
        height: 240px;
        object-fit: cover;
    }

    /* parent adds min(4.233vw, 24px) here at this breakpoint, which stacked on top of
       the .slide_content gutter and indented the headline to 56px instead of 32 */
    body.home .promo h2.banH {
        padding-left: 0;
    }

    /* the phone tile is square, which is also the width where the <source>
       swaps to the 450x450 mobile asset — so it covers with no crop at all.
       Parent pins a flat 414 here. */
    body .feat-services .featLink {
        height: auto;
        aspect-ratio: 1;
    }

    /* ---- Steps ----
       mockup breaks the heading VIRTUAL / CHECK-INS. Unconstrained the line runs
       402px, so it sits on ONE line from ~466 up, and between ~400 and 465 it breaks
       at the HYPHEN instead — "VIRTUAL CHECK-" / "INS" — which lands on the 414 QA
       width. Capping at the mockup's own 326px heading width is narrower than the
       336 "VIRTUAL CHECK-" needs, so the space is the only break left, and
       "CHECK-INS" (215) still fits on the second line at every phone size. */
    body .cardBlock .heading h2 {
        max-width: 326px;
        margin: 0 auto;
    }

    /* phone frame holds the body at 14/21 and opens 8px under the h2, where the
       desktop frame runs the two heading lines tight together */
    body .cardBlock .heading .ovl {
        margin-top: 8px;
        line-height: 1.15;
    }

    body .cbCard .beta-match p {
        font-size: 14px;
    }

    /* ---- Offers ----
       phone card body is 14/21 where the parent pins a 24px line height */
    body .offers .box-offers .offers-info p,
    body.page-template-special-offers .box-offers .offers-info p {
        font-size: 14px;
        line-height: 1.5;
    }
}