/*
Theme Name: fgMatchBox Child — Southern Boulevard Dental
Template: fgMatchBox
Author: Firegang Dental Marketing
Description: Southern Boulevard Dental brand layer (Tier-1, runtime token overrides). No build.
Version: 0.1
*/

/* MMFF fallbacks — kill font-swap CLS; overrides fonttools-computed from the Google woff2s. */
@font-face {
    font-family: 'Tenor Sans Fallback';
    src: local('Arial');
    size-adjust: 109.08%;
    ascent-override: 84.34%;
    descent-override: 22.92%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    font-weight: 400 600;
    size-adjust: 107.64%;
    ascent-override: 90.00%;
    descent-override: 22.41%;
    line-gap-override: 0%;
}

/* Colors (Figma design system 2222:80). Primary = Copper, hovers to Gray. Secondary CTA is a
   white fill with a cream hairline border that fills Cream on hover. altBg = Cream.
   footerBg provisional — confirm vs Desktop/Footer 2988:2237. */
:root {
    --primaryColor: #946F47;
    --primaryHover: #635F5B;
    --secondaryColor: #FFFFFF;
    --secondaryHover: #F4F1EB;
    --black: #303030;
    --gray: #635F5B;
    --altBg: #F4F1EB;
    --accentTeal: #A6B19E;
    --footerBg: #303030;
}

/* Fonts: Google (web_font_url in Theme Settings). Tenor Sans is 400-only. */
:root {
    --headingFont: 'Tenor Sans', 'Tenor Sans Fallback', Arial, sans-serif;
    --bodyFont: 'Inter', 'Inter Fallback', Arial, sans-serif;
    --headingFontWeight: 400;
}

/* Type scale — caps = Figma desktop, floors = Figma mobile (Homepage Mobile 2849:11816,
   Interior Page Mobile 2849:11739). disp + h4 floors provisional: no Mobile/Display or
   Mobile/H4 var exists (the mobile hero headline is baked into the banner image). */
:root {
    --dispFontSize: clamp(36px, 4.375vw, 84px);
    --h1FontSize: clamp(36px, 2.292vw, 44px);
    --h2FontSize: clamp(28px, 1.875vw, 36px);
    --h3FontSize: clamp(24px, 1.458vw, 28px);
    --h4FontSize: clamp(20px, 1.25vw, 24px);
    --bodyFontSize: clamp(16px, 0.938vw, 18px);
}

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

/* Shadows: Figma ships small/medium/large; --shadyMid = "medium".
   large = 0 50px 60px .05, 0 30px 40px .10 — add when a section needs it. */
:root {
    --shadySmall: 0 20px 30px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.10);
    --shadyMid: 0 40px 50px rgba(0,0,0,0.05), 0 20px 30px rgba(0,0,0,0.10);
}

/* Buttons: square corners, Overline character style (Inter SemiBold 16 / 2.4px tracking). */
:root {
    --btnBorderRadius: 0;
    --btnFontWeight: 600;
    --btnLetterSpc: 2.4px;
}

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

/* Font rendering: without antialiasing, the OS subpixel render thickens Inter Regular so it reads
   like Medium vs Figma (Ali). Grayscale/antialiased matches the mockup weight. */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Main section headers → 44px (H1 scale) + all caps, page-wide (Ali). Parent shipped some at the H2
   scale (36) and none uppercased. Excludes the hero .ban-title (own display scale) and the diff
   eyebrow (its own h1 @28). */
body.home section h2:not(.ban-title) {
    font-size: var(--h1FontSize);
    text-transform: uppercase;
}

/* Trademark superscript: functions.php wraps every ® in <sup class="tm">. Small + raised. Uses its
   own normal line-height (not 0) so the line box contains the raised glyph — a 0 line box let it poke
   above and get clipped inside overflow:hidden containers like the offer card's .description. */
sup.tm {
    font-size: 0.6em;
    line-height: normal;
    vertical-align: super;
}

/* Buttons — Figma CTA component: Inter SemiBold 16 / 2.4px tracking / 16x32 padding / uppercase. */
.btn {
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    padding: min(16px, 4vw) min(32px, 8vw);
    text-align: center;
}

/* Associations banner (Figma 2849:11873) — 100/100 section padding and 16px logo gaps, which is what
   breaks the 7 logos to 5 + 2 and lands the section at 376. The body prefix beats partners.min.css,
   which ACFE-enqueues after this sheet. */
body .section-partners {
    padding: clamp(80px, 5.208vw, 100px) 0;
}
body .section-partners .partners-list {
    gap: min(16px, 4vw);
}

/* This section's Figma content width is 1364 (278 insets), narrower than the global 1640
   container — capping it is what breaks the 7 logos to 5 + 2 rather than 6 + 1. The list
   then spans it, because col-lg-10's offset-lg-1 margin is dead (Splide core forces
   .splide__list margin:0 !important) and justify-content does the centring. The list rule
   is scoped to the destroyed/unmounted state so the mounted carousel owns its own sizing. */
body .section-partners .container {
    width: min(90vw, 1364px);
}
body .section-partners .partners-list-wrap:not(.is-active) .partners-list {
    width: 100%;
}

/* Offers slider dots (Ali HP-M): inactive toggle icons = copper #946F47, the highlighted/active one
   = dark #303030. (Parent colours inactive with --secondaryColor = white here → invisible; this pins
   both.) Dots are Splide-JS-generated (.splide__pagination) → on prod RUCSS may strip this from the
   child sheet; port to parent no-rucss.scss at build if it drops on staging/live. */
body .offers .splide__pagination .splide__pagination__page {
    background: var(--primaryColor, #946F47);
}
body .offers .splide__pagination .splide__pagination__page.is-active {
    background: var(--black, #303030);
}

/* Review scroller band (Figma 6254:839) — gradient + slant recreated in CSS instead of the raster,
   which mis-placed the SB watermark. Tan edges → cream centre; parallelogram clip (slant measured from
   the design, ~13/18% top, ~81/87% bottom); faint SB monogram bleeding off the left. The body prefix
   beats reviews.min's `.reviews{background-image:none}`, which enqueues after this sheet. */
body .reviews {
    background-color: #F4F1EB;
    background-image: url("images/sb-watermark.svg"),
        linear-gradient(90deg, #D7CEBD 0%, #EFEAE0 16%, #F4F1EC 42%, #F4F1EC 60%, #EBE4D7 85%, #D2D2C8 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: -40px center, center;
    background-size: auto 72%, cover;
    clip-path: polygon(0 12.6%, 100% 18.5%, 100% 87.2%, 0 81.3%);
    padding-block: clamp(90px, 12vw, 170px);
}

/* Hero banner (Figma Hero Banner 2849:11908). The heading lives in the banner content field as .ban-title
   markup: a Display line over a subhead flanked by two copper accent rules (matches Figma 6254:834). The block
   is left-aligned to the container edge and vertically centred by the pinned holder. */
body .promo .s_content .ban-title {
    display: inline-flex;
    flex-direction: column;
    margin: 0;
    color: var(--white, #fff);
    text-transform: uppercase;
}
body .promo .s_content .ban-display {
    font-family: var(--headingFont);
    font-size: var(--dispFontSize);
    line-height: 1;
    white-space: nowrap;
}
body .promo .s_content .ban-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 40px);
    margin-top: clamp(12px, 1.5vw, 24px);
    font-family: var(--headingFont);
    font-size: var(--h1FontSize);
    line-height: 1.15;
    white-space: nowrap;
}
body .promo .s_content .ban-sub::before,
body .promo .s_content .ban-sub::after {
    content: "";
    flex: 0 0 auto;
    width: clamp(48px, 7.8vw, 150px);
    height: 2px;
    background: var(--primaryColor);
}

/* Overlay: flat 55% tint (Ali — accessibility/contrast requirement), replacing the earlier
   bottom-weighted gradient and the parent's 50% default. */
body .promo::before {
    background: rgba(41, 41, 41, 0.55);
}

/* White slant bottom transition (Figma 6248:822) — shallow on the left, deeper on the right; depth in vw. */
body .promo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 4.74vw;
    background: var(--white, #fff);
    clip-path: polygon(0 0.42vw, 100% 2.7vw, 100% 100%, 0 100%);
    z-index: 2;
    pointer-events: none;
}

/* Faint SB monogram bleeding in on the right (Figma Hero Overlay 6258:888 — ~7%, exclusion blend). */
body .promoBg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("images/sb-watermark.svg");
    background-repeat: no-repeat;
    background-position: right -443px top -148px;
    background-size: auto 126%;
    opacity: 0.1;
    pointer-events: none;
}

/* Video-banner branch (static_promo_banner video mode). The parent leaves .promo-holder in flow below the
   175px header-clearance padding, so the content centres in the padded remainder and sits ~87px low. Pin the
   holder to the full hero (.promo keeps its explicit height) so .container's align-items:center lands the
   heading on the true vertical centre, matching the mock. Re-left-align the heading, and repaint the watermark
   above the <video> that covers .promoBg (::before now spans the full absolute holder → inset:0). */
body .vid-promo.promo-holder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
body .vid-promo .s_content {
    justify-content: start;
}
body .vid-promo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("images/sb-watermark.svg");
    background-repeat: no-repeat;
    background-position: right -443px top -148px;
    background-size: auto 126%;
    opacity: 0.1;
    pointer-events: none;
}

/* Interior banner (Figma Interior Hero Banner 3798:1451): the parent .ban-content is a black gradient panel
   with white text; SB's mockup is a solid sage (accentTeal) panel with a hard edge to the operatory photo
   (no fade) and dark text. */
/* 50/50 hard-edge split (Figma 3798:1451): sage panel = left half, operatory photo = right half — NOT a
   full-bleed photo with the panel overlaid. The parent absolutely-positions .ban-image across the whole
   hero (inset:0), which stretched the 960x560 photo to full width (James). Pin the panel to the left 50%
   and the photo to the right 50% so the photo box matches the 960x560 asset aspect and shows uncropped. */
body .promo.bar.bar-title .ban-content {
    background: var(--accentTeal, #A6B19E);
    width: 50%;
    max-width: 50%;
}
body .promo.bar.bar-title .ban-image {
    left: auto;
    right: 0;
    width: 50%;
}
body .promo.bar.bar-title .ban-content,
body .promo.bar.bar-title .tWrap h1,
body .promo.bar.bar-title .tWrap h2,
body .promo.bar.bar-title .ban-content a,
body .promo.bar.bar-title .breadcrumbs-block,
body .promo.bar.bar-title .breadcrumbs-block a {
    color: var(--black, #303030);
}
/* Figma banner title is Tenor Sans H1 (44 / weight 400). The parent hardcodes weight 600 (faux-bold on the
   400-only Tenor Sans) at the H2 size — restore the token weight and H1 size. */
body .promo.bar.bar-title .tWrap h1,
body .promo.bar.bar-title .tWrap h2 {
    font-weight: var(--headingFontWeight, 400);
    font-size: var(--h1FontSize);
}
/* Breadcrumb caret spacing to the Figma ~24px gaps (the underline affordance is now trunk-wide). */
body .promo.bar.bar-title .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: clamp(8px, 1.25vw, 24px);
}

/* Standalone contact form (.formWrap) ships on CF7/UA defaults — inset field borders, black placeholder, and a
   raw gray submit. The booking-popup form is already brand-styled; this brings the page form in line. Border
   weight/colour is best-guess pending the Contact mockup. */
body .formWrap .wpcf7-form input[type="text"],
body .formWrap .wpcf7-form input[type="email"],
body .formWrap .wpcf7-form input[type="tel"],
body .formWrap .wpcf7-form textarea {
    border: 1px solid #B7B4AE;
    border-radius: 0;
    background: var(--white, #fff);
    color: var(--black, #303030);
}
body .formWrap .wpcf7-form ::placeholder {
    color: #767676;
    opacity: 1;
}
/* Contact Us form submit (Ali): white with #303030 text, hover fills cream #F4F1EB. It sits on the gray
   .conForm (#635F5B), so this is the secondary-button treatment (white fill / cream hover). */
body .formWrap .wpcf7-form input[type="submit"] {
    background-color: var(--secondaryColor, #fff);
    color: var(--black, #303030);
    border: 0;
    border-radius: var(--btnBorderRadius, 0);
    font-weight: var(--btnFontWeight, 600);
    letter-spacing: var(--btnLetterSpc, 2.4px);
    text-transform: uppercase;
    padding: clamp(14px, .833vw, 16px) clamp(22px, 1.667vw, 32px);
    cursor: pointer;
    transition: background-color .5s ease;
}
body .formWrap .wpcf7-form input[type="submit"]:hover {
    background-color: var(--secondaryHover, #F4F1EB);
    color: var(--black, #303030);
}
/* "New Patient?" legend → 18px (Ali). */
body .formWrap .wpcf7-form legend {
    font-size: 18px;
}
/* Form focus rings → white (Ali): the form sits on the gray .conForm, where the framework's currentColor
   (dark) focus outline barely shows. Offset so it reads on the field + the white submit alike. */
body .formWrap .wpcf7-form input:focus-visible,
body .formWrap .wpcf7-form textarea:focus-visible,
body .formWrap .wpcf7-form select:focus-visible,
body .formWrap .wpcf7-form button:focus-visible,
body .formWrap .wpcf7-form .wpcf7-submit:focus-visible {
    outline: 2px solid var(--white, #fff);
    outline-offset: 2px;
}
/* Book Now popup submit: white text on the copper button (needs 1-id/3-class specificity to win),
   with an eased hover so the color change to #635F5B isn't instant (James). */
#formPop .wpcf7 .wpcf7-form .wpcf7-submit {
    color: var(--white, #fff);
    transition: background-color .5s ease;
}
/* Book Now popup submit hover → gray (#635F5B), and the "please call" phone underlines on hover (Ali). */
#formPop .wpcf7 .wpcf7-form .wpcf7-submit:hover {
    background-color: var(--primaryHover, #635F5B);
}
#formPop .formPop-desc a {
    text-decoration: none;
}
#formPop .formPop-desc a:hover {
    text-decoration: underline;
}
/* "New Patient?" legend → 18px, inline with the Yes/No radios (Ali). Only this fieldset has a legend,
   so :has scopes it; the other fieldsets (Full Name/Email/Phone) stay stacked. A <legend> resists flex
   and float (it renders in the fieldset's caption slot), so pin it absolutely and pad the fieldset to
   make room for the radios beside it. */
#formPop .wpcf7-form fieldset:has(> legend) {
    position: relative;
    padding: 0 0 0 132px;
}
#formPop .wpcf7-form fieldset > legend {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
    line-height: 27px;
    width: auto;
    padding: 0;
    margin: 0;
}
/* Zero the radios' <p> default margin so the fieldset height = the radio line and the vertically
   centered legend lines up with Yes/No (radios were sitting ~8px higher — James). */
#formPop .wpcf7-form fieldset:has(> legend) > p {
    margin: 0;
}
#formPop .wpcf7-form fieldset:has(> legend) > p {
    margin: 0;
}

/* Book Now popup hours → 16px, matching the address (Ali/James). Lity moves #formPop out of the footer
   when it opens, so the hours lose the footer-context size and fall back to the 18px body token; the
   #formPop id keeps this rule matching wherever Lity mounts the popup. */
#formPop .formPop-info .shedule dl,
#formPop .formPop-info .shedule dl dt,
#formPop .formPop-info .shedule dl dd {
    font-size: 16px;
}

/* Contact form section: brand gray. */
body .conForm {
    background-color: #635F5B;
}
/* Vertically center the New Patient question row so it lines up with the Full Name field opposite it. */
body .conForm .row.flex .top {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Field labels visually hidden (placeholders serve as labels) but kept in the a11y tree; unclassed Yes/No stay. */
body .wpcf7-form label.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Interior special-offer card: gray band, all-caps heading, white copy; clears floated content above it. */
body .page-offer {
    background-color: #635F5B;
    color: var(--white, #fff);
    clear: both;
}
/* !important beats interior_style.min.css (.entry.entry-add .page-offer h2), enqueued after this sheet. */
body .page-offer h1,
body .page-offer h2,
body .page-offer h3,
body .page-offer h4 {
    font-family: var(--headingFont) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    text-align: center;
    color: var(--white, #fff);
}
body .page-offer p,
body .page-offer .text {
    color: var(--white, #fff);
}

/* Interior content bulleted lists sat flush with the body text — the Matchbox parent resets
   `.entry.entry-add > ul { padding-left: 0 }`, which dropped the usual list indent (Danny: "bulleted
   lists aren't indented like usual"). Restore a standard indent so the copper bullets sit indented from
   the paragraph like other FG sites. (The parent already handles the bullet + the 24px bullet→text gap.) */
body .entry.entry-add > ul {
    padding-left: 40px;
}

/* Meet the Doctor / Team / Blog images were too rounded (Ali). Non-aligned content images (aligncenter,
   alignnone, no-align) inherit the big `.entry img` radius (clamp 40–80px ≈ 67 @1589), whereas aligned
   images already use the subtle 10px `--cardBorderRad`. Match the non-aligned ones to that so all content
   images read alike. (Left/right-aligned are excluded — they're already 10px.) */
body .entry img:not(.alignleft):not(.alignright) {
    border-radius: var(--cardBorderRad, 10px);
}

/* Meet the Team / Doctor grids not aligning (Danny): Shortcodes-Ultimate `.su-row` is display:block with
   float:left columns, which staggered the cells ~1 line-height (24px) lower each instead of lining up in a
   row. Flex the row so columns top-align and wrap cleanly (float is ignored on flex items; the columns
   keep their width + gap). */
body .entry .su-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* DI4: the doctor/team name heading should top-align with its photo. In the bio column a leading empty
   WYSIWYG <p> sits above it and the name (first heading) carries the general ~67px heading top-margin,
   which collapses to the column top and drops the name ~67px below the image. Drop the empty p + zero the
   first heading's top margin so the name lines up with the image top (later section headings keep theirs). */
body .entry .su-row .su-column-inner > p:empty {
    display: none;
}
body .entry .su-row .su-column-inner > h2:first-of-type,
body .entry .su-row .su-column-inner > h3:first-of-type:first-child {
    margin-top: 0;
}

/* Active/hover nav underline: copper (Figma / Ali), not the default ltBlue. */
#nav > li > a::after {
    background-color: var(--primaryColor, #946F47);
}

/* Interior widget CTA buttons: copper like the home sections (parent's .btn-orange copper is scoped to
   .freeForm/.half-content, which the interior widgets aren't inside). */
body .widget .btn.btn-orange {
    display: block;
    background-color: var(--primaryColor, #946F47);
    color: var(--white, #fff);
}
body .widget .btn.btn-orange:hover {
    background-color: var(--primaryHover, #635F5B);
}

/* News block washes (Figma News Block 1 Background 6219:829 + News Blocks 6219:849). Recreated in CSS so the
   side photo stays — the template's bg_img field is a layout switch that hides the photo. Colours + offsets
   sampled from the design rasters: news1 = full-width gray→cream→tan under a ~15% slanted top; news2 = cool
   gray panel from 33.4% fading out at the bottom; news3 = warm cream panel to 66.9%. The panel sits behind the
   text column, photo opposite. Killed on mobile (blocks stack — the offsets are desktop-only). */
body #sbd-news1 {
    position: relative;
    background-image: linear-gradient(90deg, #D8D6CE 0%, #F4F1EC 38%, #F4F1EC 62%, #E0D3BF 100%);
    background-repeat: no-repeat;
}
/* Slanted top edge as a clipped white overlay — Figma has a hard angle, not a fade. The ::before keeps the
   photo intact; a clip-path on the section would crop it. Slant depth in vw so it tracks the design width
   (153/1920 → 7.97vw left, 182/1920 → 9.48vw right). Content sits above the overlay via .container z-index. */
body #sbd-news1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--secondaryColor, #fff);
    clip-path: polygon(0 0, 100% 0, 100% 9.48vw, 0 7.97vw);
    pointer-events: none;
}
body #sbd-news1 .container {
    position: relative;
    z-index: 1;
}
body #sbd-news2 {
    background-image:
        linear-gradient(180deg, transparent 0 58%, #FFFFFF 100%),
        linear-gradient(90deg, transparent 0 33.4%, #E9EBE6 33.4% 100%);
    background-repeat: no-repeat;
}
body #sbd-news3 {
    background-image:
        linear-gradient(90deg, #EFE8DC 0%, #F4F1EC 40%, #F4F1EC 66.9%, transparent 66.9% 100%);
    background-repeat: no-repeat;
}

/* Location CTA carried a fixed margin:56px 0 — the top gap to the button is intended (Figma), but the
   matching 56px BOTTOM was unexplained dead space. Keep the top (fluid), drop the bottom. */
body .section-location .address .address-holder .btn {
    margin: clamp(32px, 4vw, 56px) 0 0;
}

/* Map/location section (Ali): header → main-header scale (44) + caps; contact links underline on hover
   only, @18; hours @18; remove the map drop shadow; give the Contact Us button a visible (dark) focus
   ring — its copper fill + white text made the global currentColor ring white-on-white here. */
body .section-location .row-place .h4 {
    font-size: var(--h1FontSize);
    text-transform: uppercase;
}
/* Address, phone, and hours all ride the body token (--bodyFontSize / --bodyLineHeight). All three
   sit inside .inf (the .pin icons and the .h4 header are siblings, untouched). Target the leaves too
   so nothing keeps a parent-set size (James). */
body .section-location .inf,
body .section-location .inf a,
body .section-location .inf span,
body .section-location .inf dt,
body .section-location .inf dd {
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
}
/* Contact links underline on hover only (Contact Us .btn is outside .inf, so it's unaffected). */
body .section-location .inf a {
    text-decoration: none;
}
body .section-location .inf a:hover {
    text-decoration: underline;
}
body .section-location #map,
body .section-location .map-show-canvas,
body .widget.section-location #map,
body .widget.section-location .map-show-canvas {
    box-shadow: none;
}
/* Interior differentiator widget (Figma "Desktop/Differentiator Bar" 2871:1620): cream fill + flat 100px
   top/bottom so the section matches the mockup (481-tall frame = 100 top → header → 56 → blocks → 100
   bottom). The parent ships it white with padding clamp(50,5.208vw,100) that only hits 100 at 1920, plus a
   ~67px header margin-top — both push the spacing off the mockup below 1920. Cream is scoped to the widget
   so the homepage diff bar stays white. */
body .widget.widget-diff {
    background-color: var(--altBg, #F4F1EB);
    padding-top: 100px;
    padding-bottom: 100px;
}
/* Header sits at the top of the 100px pad (mockup: header y=100 == the padding, no extra gap above). Keeps
   the parent's 56px margin-bottom → the 56px header→blocks gap the mockup shows. */
body .widget.widget-diff .heading h1,
body .widget.widget-diff .heading h2 {
    margin-top: 0;
}
body .section-location .btn:focus-visible {
    outline: 2px solid var(--black, #303030);
    outline-offset: 3px;
}

/* Footer (Ali): section headings ("Leave a Review", "Contact Us") in Inter, styled like the buttons/
   nav (SemiBold, uppercase, tracked) — parent shipped them in Tenor. Contact links underline on hover
   only (phone was always underlined). Terms already 14px. */
#footer .footer-holder .infoNav .h3,
#footer .footer-holder .servNav .h3,
#footer .footer-holder .fLocation h3 {
    font-family: var(--bodyFont);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.4px;
}
#footer .fLocBox a {
    text-decoration: none;
}
#footer .fLocBox a:hover {
    text-decoration: underline;
}
/* Footer phone → 16px (Ali). The parent's 16px footer-link rule (`ul a, .fAddress a`) never covered
   `span.tel-footer a`, so the phone fell through to the inherited body size — pin it explicitly so it
   holds 16px and matches the address at every breakpoint. */
#footer .fLocBox .tel-footer a {
    font-size: 16px;
}

/* Desktop nav bar to Figma (6258:830): the logo fills its (responsive) logo-block box — the box
   width is set in the desktop media block; the img just spans it. Contact links 16px (Caption, not
   the 18px body), nav items SemiBold 600 (Overline, not 500) handled below. */
body #logo img#mLogo,
body #logo img#scLogo {
    width: 100%;
}
body .conBlock a {
    font-size: clamp(14px, 0.833vw, 16px);
}
body #nav > li a {
    font-weight: 600;
}

/* Homepage load: the desktop nav CTA is white-outlined over the hero (Figma 6258:861); on scroll
   (.scrolled → white header) it reverts to the base copper fill. Keyed on :not(.scrolled) so it matches
   crawled HTML (RUCSS-safe) with copper as the fallback. The base keeps a transparent 2px border so the
   button doesn't change size between states. */
#sOpenForm {
    border: 2px solid transparent;
}
body.home:not(.scrolled) #sOpenForm {
    background-color: transparent;
    border-color: var(--white, #fff);
    color: var(--white, #fff);
}

/* Hovering the header whitens it (parent header:hover) — the white-outlined CTA would go white-on-white,
   so revert it to the copper scrolled fill for the duration of the hover. */
body.home:not(.scrolled) #header:hover #sOpenForm {
    background-color: var(--primaryColor);
    border-color: transparent;
    color: var(--white, #fff);
}

/* Direct hover on the pre-scroll (white-outlined) Book Now button gives its own feedback
   (#635F5B fill). The rule above only recolors it when the HEADER is hovered, so the button
   never changed on its own hover (Ali). Same specificity as that rule → source order wins. */
body.home:not(.scrolled) #header #sOpenForm:hover {
    background-color: var(--primaryHover, #635F5B);
    border-color: transparent;
    color: var(--white, #fff);
}

/* The parent clips .opener-form (overflow:hidden), which swallowed the global focus-visible
   ring on the Book Now button (no fill animation needs the clip). Let the ring show. */
#header .opener-form {
    overflow: visible;
}

/* When the header is white (scrolled, interior, or header-hovered) the copper Book Now button has
   white text, so the global currentColor focus ring is white-on-white. Match the nav links' dark
   ring instead. Over the hero (home, unscrolled, not hovering) the white ring is correct and kept. */
body.scrolled #sOpenForm:focus-visible,
body:not(.home) #sOpenForm:focus-visible,
#header:hover #sOpenForm:focus-visible {
    outline-color: var(--black, #303030);
}

/* Diff bar (.diff): header rides the H3 token (28 @desktop, per the design convention that the diff
   h1 takes H3 — scales down below 1920 instead of a fixed 28) with flanking copper accent lines;
   practice highlights 18px (Ali). Parent shipped the h1 at --h4FontSize (24) with no accent rules. */
body .diff .heading h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 40px);
    font-size: var(--h3FontSize);
}
body .diff .heading h1::before,
body .diff .heading h1::after {
    content: "";
    flex: 0 0 auto;
    width: clamp(40px, 5vw, 90px);
    height: 2px;
    background: var(--primaryColor, #946F47);
}
body .diff .diffList li {
    font-size: 18px;
}
/* Trim the diff items' trailing space so the gap to the news block reads as the news block's clean
   140px top padding, not 140 + the items' own bottom spacing (James): the diffContent bottom padding,
   the last checkmark's bottom padding, and the ul's default (never-reset) bottom margin. */
body .diff .diffContent {
    padding-bottom: 0;
}
body .diff .diffList {
    margin-bottom: 0;
}
body .diff .diffList li:last-child {
    padding-bottom: 0;
}

/* Featured services focus ring (Ali: the plain white inset outline was hard to see over the lighter parts
   of the accordion photos). The card is overflow:hidden with flush neighbours, so an outset ring hides
   under the next card — draw an inset two-tone ring via ::after (paints above the photo; an inset
   box-shadow would hide behind it): white border + a dark halo so it reads on any image. */
body .featLink:focus-visible {
    outline: none;
}
body .featLink:focus-visible::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 3px solid var(--white, #fff);
    box-shadow: 0 0 0 2px var(--black, #303030);
    pointer-events: none;
    z-index: 3;
}

/* Special offers section (Ali): the tilted cream→sage band + SB watermark bg. Ali's updated raster
   (special-offers-bg-desktop.jpg) drops the copper accent lines that were baked into the old image —
   they sat at fixed pixel positions and drifted off the centred heading across widths — so the lines
   are now drawn in CSS below. Card title → H4 (24); Learn More copper. */
body .offers {
    background-color: #E9E7DD;
    background-image: url("images/special-offers-bg-desktop.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* Copper accent lines flanking "Our Special Offers" — same flex-pseudo treatment as the diff bar, so
   they track just outside the heading text at any width instead of the baked-in fixed positions. */
body .offers .heading h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 40px);
}
body .offers .heading h2::before,
body .offers .heading h2::after {
    content: "";
    flex: 0 0 auto;
    width: clamp(40px, 5vw, 90px);
    height: 2px;
    background: var(--primaryColor, #946F47);
}
body .offers .box-offers .h4 {
    font-size: var(--h4FontSize);
}
/* Title→body 16px (Ali): the title is a display:inline <span>, so its margin-bottom is inert — put the
   16px as .description padding-bottom instead. padding-top:10 gives the raised ® room inside the clip. */
body .offers .box-offers .description {
    overflow: hidden;
    padding: 10px 0 16px;
}
/* The card is a space-between flex column, which stretched the title→body gap unevenly per card so a
   fixed margin couldn't hold. Stack top-down (gaps = the elements' own margins → title's 16px holds)
   and pin Learn More to the bottom with margin-top:auto so cards still line up. */
body .offers .box-offers .box-holder {
    justify-content: flex-start;
}
body .offers .box-offers .specWrap {
    margin-top: auto;
}
body .offers .specWrap a::after {
    background-color: var(--primaryColor, #946F47);
}
/* Learn More + See All Offers focus rings (Ali). The framework default `outline: currentColor` renders
   white on the copper buttons → invisible on the light section. Use the site's dark ring (as on nav/map)
   for a clear indicator on the cream bg. */
body .offers .specWrap a:focus-visible,
body .offers .moreOff:focus-visible {
    outline: 2px solid var(--black, #303030);
    outline-offset: 3px;
}

/* Google reviews pill (Danny): the "255+ Google Reviews" line's line-box leading adds ~3px above the
   glyphs on top of the symmetric 15px padding, so it read top-heavy. Trim the top padding to 12px so the
   space above the text matches the space below the stars. */
body .google-button-container {
    padding-top: 12px;
}

/* Special Offers page (Danny/James): the page template renders .box-offers OUTSIDE the .offers section,
   so the homepage offer-card treatment (scoped to .offers) never reaches it — cards ran 3-up with the 4th
   full-width and missed the SBD card tweaks. Lay them 2-per-row (2, then 2, … as more are added, via the
   16px list gap) and mirror the homepage card styling so they match. */
body.page-template-special-offers .offers-list li.delta-match {
    flex: 0 0 calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
}
body.page-template-special-offers .box-offers .h4 {
    font-size: var(--h4FontSize);
}
body.page-template-special-offers .box-offers .description {
    overflow: hidden;
    padding: 10px 0 16px;
}
body.page-template-special-offers .box-offers .box-holder {
    justify-content: flex-start;
}
body.page-template-special-offers .box-offers .specWrap {
    margin-top: auto;
}
body.page-template-special-offers .specWrap a::after {
    background-color: var(--primaryColor, #946F47);
}
body.page-template-special-offers .specWrap a:focus-visible {
    outline: 2px solid var(--black, #303030);
    outline-offset: 3px;
}

/* ===== FAQ (page.php section-faq markup on interior/service pages) — the parent ships faq.min.css
   but it's never enqueued on the page-level FAQ, so it renders unstyled with every answer open.
   Port the FG FAQ look on SBD tokens; general.js already toggles .active/.show (DI5). ===== */
section.faq {
    background: var(--altBg, #F4F1EB);
    padding: clamp(64px, 7.29vw, 120px) 0;
}
.faq .heading h2 {
    margin: 0 0 clamp(18px, 1.354vw, 26px);
}
.faq .faq-item {
    margin: clamp(24px, 1.875vw, 36px) 0;
    background: var(--altBg, #F4F1EB);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10);
}
.faq .faq-item .question.accordion {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 1.25vw, 22px) clamp(56px, 4.17vw, 80px);
    background: var(--white, #fff);
    color: var(--black, #303030);
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.faq .faq-item .question.accordion .h4 {
    margin: 0;
    font-family: var(--headingFont);
    font-weight: var(--headingFontWeight, 400);
    font-size: var(--h4FontSize);
    line-height: var(--h4LineHeight);
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: inherit;
    pointer-events: none;
}
.faq .faq-item .question.accordion::after {
    content: '\f067';
    position: absolute;
    right: clamp(16px, 1.25vw, 24px);
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Font Awesome 5 Free', fantasy;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    color: var(--primaryColor, #946F47);
}
.faq .faq-item .question.accordion.active::after {
    content: '\f068';
}
.faq .faq-item .answer.panel {
    display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0 clamp(24px, 2.083vw, 40px);
    transition: max-height .5s ease, padding .5s ease;
}
.faq .faq-item .answer.panel.show {
    max-height: 750px;
    padding: clamp(16px, 1.25vw, 24px) clamp(24px, 2.083vw, 40px);
}
.faq .faq-item .answer.panel p {
    margin: 0 0 12px;
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
}
.faq .faq-item .answer.panel p:last-child {
    margin-bottom: 0;
}
.faq .faq-item .answer.panel li {
    margin-bottom: 10px;
}

/* Desktop-only hero height. The video/text hero exists only >1024 (parent hides .s_content and the video
   below that); the parent re-heights .promo at ≤567, so gating this at min-width keeps mobile untouched.
   Frame is 1920×940 (Figma 2849:11908) — parent's 43.555vw bottoms out at 836 at 1920, so scale to hit 940. */
@media (min-width: 1025px) {
    body.home .promo {
        height: min(48.958vw, 940px);
    }

    /* Diff bar → first news block gap = 140 total (Ali). news1 already owns 140px top padding (carries
       the slant transition), so zero the homepage diff's 100px bottom padding: 0 + 140 = 140. */
    body.home .diff {
        padding-bottom: 0;
    }

    /* Featured services hover: soften the accordion so it expands modestly (grow 1.5 → hovered ~43%,
       siblings ~28.5% each; was 5 → 71%/14%). Keeps labels readable; pad both sides + no hyphen breaks (Ali). */
    body .featLink:hover {
        flex-grow: 1.5;
        transition: all 0.5s ease-in-out;
    }
    /* Snappier expansion, symmetric open/close. The parent set the transition on BOTH .featLink (close)
       and .featLink:hover (open, 1.2s) — so open was slow, close fast (James). Match both at 0.5s. */
    body .featLink {
        transition: all 0.5s ease-in-out;
    }
    body .featContent .h4,
    body .featContent h4 {
        margin-left: clamp(20px, 2vw, 40px);
        margin-right: clamp(20px, 2vw, 40px);
        hyphens: none;
        overflow-wrap: normal;
        word-break: normal;
    }

    /* Offer card shadows + hover-lift were clipped by the Splide track (overflow:hidden). Desktop
       destroys Splide to a static grid, so let the track show the shadows (Danny). */
    body .offers .splide__track {
        overflow: visible;
    }
    /* Offers → map gap (Ali/James): desktop offers bottom = 0; the map section carries the gap as its
       own clamped top padding (up to 140 @1920) — same pattern as diff→news. The section's native clamp
       only reached 120, so match the news block's (140 @1920, ~105 @1440). Mobile offers bottom = 80. */
    body.home .offers {
        padding-bottom: 0;
    }
    body.home .section-location {
        padding-top: clamp(90px, 7.292vw, 140px);
    }

    /* Association bar: force exactly 5 logos per row so the 7 break 5 + 2 (metlife + united concordia
       on row 2, matching the mockup) instead of 6 + 1 (Danny). Row 2 centers via justify-content. */
    body .section-partners .partners-list {
        flex-wrap: wrap;
        justify-content: center;
    }
    body .section-partners .partners-list li {
        flex: 0 0 calc((100% - 4 * min(16px, 4vw)) / 5);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body .section-partners .partners-list li img {
        max-width: 100%;
        height: auto;
    }

    /* Nav bar to Figma (6258:830): match the body container width (140px insets @1920) instead of
       the parent's 1500/1636 cap, which over-padded the sides and mis-aligned the nav with the page. */
    #header .header-holder {
        width: min(90vw, 1640px);
        max-width: none;
    }
    /* Flex the header row instead of the parent's col-3/col-9 split, which capped the nav at 75%
       while the vw-scaled logo stayed large — so the 5-item nav + Book Now overflowed right below
       ~1440. The logo-block takes only its (proportional) width; the nav gets all the rest. */
    #header .logo-block {
        flex: 0 0 auto;
        max-width: none;
        width: clamp(190px, 20.73vw, 398px);
    }
    /* Vertical rhythm: 24px above contact links / 24px between contact + nav / 24px below nav.
       The parent `header { padding: 10px 0 }` already frames the whole header, so locNavBtns adds
       14 (14 + 10 = 24) top/bottom; the 24 between comes from the gap. */
    #header .locNavBtns {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
        min-width: 0;
        justify-content: center;
        gap: 24px;
        padding: 14px 0;
    }
    #header .conBlock.flex {
        padding: 0;
    }

    /* Fly-out arrows on menu items with children. The FGMB walker emits no .opener span (the
       parent's .opener carets are dead), and >a::after is the underline — so the top-level caret
       rides >a::before via flex order, and sub-menu parents get a right caret on ::after. */
    #nav > li.menu-item-has-children > a {
        display: inline-flex;
        align-items: center;
    }
    #nav > li.menu-item-has-children > a::before {
        content: "\f0d7";
        order: 2;
        margin-left: 8px;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 0.75em;
        line-height: 1;
    }
    #nav .sub-menu li.menu-item-has-children > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #nav .sub-menu li.menu-item-has-children > a::after {
        content: "\f0da";
        margin-left: 8px;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 0.85em;
        line-height: 1;
    }
}

/* Laptop range (1025–1600): tighten nav item spacing + Overline tracking so the full nav fits the
   shrinking row. Full 2.4px tracking + roomy padding stay at >=1601 where there's space. */
@media (min-width: 1025px) and (max-width: 1600px) {
    #nav > li {
        padding: 0 clamp(2px, 0.3vw, 8px);
    }
    #nav > li a {
        letter-spacing: clamp(0.6px, 0.09vw, 1.6px);
    }
}

/* Small desktop (1025–1200): shrink the logo further and slim the Book Now button (child bumps
   .btn padding to 32px/side) so the nav clears the row down to the 1024 mobile breakpoint. */
@media (min-width: 1025px) and (max-width: 1200px) {
    #header .logo-block {
        width: clamp(150px, 15vw, 200px);
    }
    #header .btn-block .btn {
        padding: 12px 18px;
        letter-spacing: 1px;
    }
}

/* Offers slider goes full-bleed on mobile so cards run edge-to-edge and neighbours peek. The wrap
   breaks out of the container inset; the track shows the peek instead of clipping it at the box edge. */
@media (max-width: 1024px) {
    /* Mobile offers → map: give the offers section 80px bottom padding (desktop is 0; James). */
    body.home .offers {
        padding-bottom: 80px;
    }
    body .offers .offers-list-wrap.splide {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    body .offers .offers-list-wrap.splide .splide__track {
        overflow: visible;
    }
}

/* News blocks carried too much vertical whitespace on mobile — the .text column adds 50px bottom
   padding on top of the section's 80px. Tighten both (body prefix beats fw_content_half.min, enqueued
   after this sheet). */
@media (max-width: 1024px) {
    body .half-content {
        padding-block: min(56px, 12vw);
    }
    body .half-content .text {
        padding-top: min(16px, 4vw);
        padding-bottom: min(16px, 4vw);
    }
    body #sbd-news1,
    body #sbd-news2,
    body #sbd-news3 {
        background-image: none;
    }
    body #sbd-news1::before {
        display: none;
    }
    body .promo::after,
    body .promoBg::after,
    body .vid-promo::before {
        display: none;
    }
}

/* Review scroller SB mark: large + bleeding off the left on desktop (Figma); a small upper-left accent
   on mobile so it doesn't crowd the single review. */
@media (max-width: 1024px) {
    body .reviews {
        background-position: 5% 24%, center;
        background-size: auto 18%, cover;
    }
}

/* Before scroll, the booking button belongs below the logo (Figma 2912:1610); the parent pins it
   position:fixed over the logo. Keep the BLOCK in flow always so the header height never changes (the
   header is position:relative — fixing the block on scroll shrank it and caused a layout jump / CLS).
   The scroll re-pin (inner button → nav) lives in trunk no-rucss.scss so RUCSS can't strip it. */
@media (max-width: 1024px) {
    body .btn-block.mobile-show {
        position: static;
        transform: none;
        margin: min(24px, 5vw) auto min(48px, 10vw);
        min-height: calc(16px + 2 * min(16px, 4vw));
    }
}

/* Mobile header element sizes to Figma (nav bar 2849:11859 + header 2912:1610): the parent renders a
   64x44 rounded phone button, a 34x22 hamburger, a 240px logo and a 121x32 book button — all off.
   Figma: square 34x34 copper phone + 24x12 hamburger inset 32 in the top bar, a full-width logo, and a
   171x56 book button below. */
@media (max-width: 1024px) {
    body .mobile-show.moreInfo {
        top: 8px;
        left: 32px;
    }
    body .mobile-show.moreInfo a {
        width: 34px;
        height: 34px;
        padding: 0;
        font-size: 18px;
        border-radius: 0;
    }
    body .menu-opener {
        top: 19px;
        right: 32px;
        width: 24px;
        height: 12px;
    }
    /* A1 (Ali): hamburger bars → #303030 (kindling draws them copper via ::before/::after background). */
    body .menu-opener::before {
        top: 0;
        background: var(--black, #303030);
    }
    body .menu-opener::after {
        top: 9px;
        background: var(--black, #303030);
    }
    /* A2 (Ali): mobile drawer submenu arrows were currentColor @ .4 opacity (too light) → #767676.
       ⚠ .mm-spn is added by MmenuLight JS at runtime → RUCSS strips this from the child sheet on prod;
       must be ported into the parent no-rucss.scss (where the rest of the drawer CSS lives) at build. */
    .mm-spn li::before,
    .mm-spn.mm-spn--navbar::before {
        border-color: #767676;
        opacity: 1;
    }
    body #mobLogo img {
        width: min(290px, 72vw);
        max-width: none;
    }
    /* D2 (Danny): the button re-pins to the nav on scroll; the 0.5s transition made it slide in. Kill
       the transition on the mobile book button so the re-pin is instant (no hover to animate on mobile). */
    body .btn-block.mobile-show .booking-opener {
        padding: min(16px, 4vw) min(32px, 8vw);
        font-size: 16px;
        transition: none;
    }
}

/* Mobile location to Figma (2849:11818): the map-block flips to column-reverse and the parent renders
   the map full-bleed + square. Figma insets the whole section to the 32px content gutter (map is a
   326×240 frame) with a 48px gap down to the copy. Inset the container so map + card move together.
   Ali (HP-M) wants the mobile map SQUARE like desktop — the parent already squares .map-show-canvas
   (aspect-ratio:1/1 !important), so match 1/1 here (the override needs !important too) instead of the
   Figma 326×240. Hours stay the day-by-day table — the practice keeps irregular hours
   (Wed/Sat/Sun closed, varied open times), so the mock's condensed "Mon-Fri" line can't represent them.
   Same widget on home + interior. */
@media (max-width: 1024px) {
    /* Stack the map/address from 1024 down (parent only stacked at ≤991, leaving 992–1024 a flex row
       where the mapWrp collapsed to 0 width → the map disappeared). Needs .container.flex specificity
       to beat the parent's base row rule. column-reverse = map on top. */
    body .section-location .map-block.container.flex {
        padding-inline: min(8.205vw, 32px);
        flex-direction: column-reverse;
    }
    /* In the 992–1024 band the col-lg-6 (50% max-width) still applies and collapsed the stacked columns;
       force both full-width so the map gets real width (matches the <992 behavior). */
    body .section-location .map-block.container.flex > .address,
    body .section-location .map-block.container.flex > .mapWrp {
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
    }
    /* Homepage map top padding → 0 at ≤1024; the 80px offers bottom padding provides the gap (James). */
    body.home .section-location {
        padding-top: 0;
    }
    body .section-location .mapWrp {
        aspect-ratio: 1 / 1;
        height: auto;
        min-height: 0;
    }
    /* Constrain the map itself to the 326/240 aspect so it doesn't overflow the wrapper. The homepage
       section renders #map with `.map-show-canvas.single`; the interior fw_map WIDGET renders a bare #map
       (no .map-show-canvas), so it was skipping this clamp → #map grew to its 313px default and spilled
       down over the title (no gap). Target #map too so the interior map matches the homepage. */
    body .section-location .mapWrp .map-show-canvas.single,
    body .section-location .mapWrp #map {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-height: 0;
    }
    body .section-location .address .address-holder {
        padding-top: min(48px, 12vw);
    }
}

@media (max-width: 767px) {
    /* Special Offers page: stack cards 1-per-row on phones (2-up would be too narrow). */
    body.page-template-special-offers .offers-list li.delta-match {
        flex-basis: 100%;
        max-width: 100%;
    }
    /* A5/A3 (Ali): news images square to match the desktop ratio (was a forced ~71vw rectangle),
       with 32px side gutters (was ~90vw near-full-bleed). */
    body #sbd-news1 .image img,
    body #sbd-news2 .image img,
    body #sbd-news3 .image img {
        width: calc(100vw - 64px);
        aspect-ratio: 1 / 1;
        height: auto;
        margin-inline: auto;
        object-fit: cover;
        display: block;
    }
    /* A3/A4 (Ali): 32px side gutters on the news copy + 48px gap down from the image. */
    body .half-content .text {
        padding-inline: 32px;
        padding-top: 48px;
    }
    body .alignleft,
    body .alignright {
        float: none;
        display: block;
        max-width: 100%;
        height: auto;
        margin: min(20px, 5vw) auto;
    }
    body .promo.bar.bar-title,
    body .promo.bar.bar-title .container,
    body .promo.bar.bar-title .row.flex {
        height: auto;
    }
    body .promo.bar.bar-title .row.flex {
        display: flex;
        flex-direction: column-reverse;
    }
    body .promo.bar.bar-title .ban-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: min(60vw, 280px);
    }
    body .promo.bar.bar-title .ban-image .pImg,
    body .promo.bar.bar-title .ban-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    body .promo.bar.bar-title .ban-content {
        width: 100%;
        max-width: 100%;
        min-height: 0;
        padding: min(20.513vw, 80px) min(8.205vw, 32px) min(8.205vw, 32px);
        justify-content: flex-start;
        gap: min(24px, 5vw);
    }
    body .promo.bar.bar-title .breadcrumbs-block {
        display: none;
    }
    body .promo.bar.bar-title .tWrap {
        width: 100%;
    }
    /* FAQ — left-align the question + toggle on phones (centered reads awkward on a narrow line). */
    .faq .faq-item .question.accordion {
        justify-content: flex-start;
        padding-right: 52px;
    }
    .faq .faq-item .question.accordion .h4 {
        text-align: left;
    }
    /* A7 (Ali): featured-services label → 24px on mobile (parent shipped it at 32). */
    body .feat-services .featContent .h4 {
        font-size: 24px;
    }
    /* A6 (Ali): hide the "Learn More" affordance on the featured-service image cards on mobile. */
    body .feat-services .featContent .fade-in {
        display: none;
    }
    /* A10 (Ali): centre the footer "Leave a Review" (servNav) dropdown links on mobile. */
    #footer .servNav .panel {
        text-align: center;
    }
    /* D1 (Danny/James): the Google-reviews pill sat centred and overlapped the GTranslate widget in the
       bottom-right on scroll — anchor it left so the two clear each other. */
    body .google-button-container {
        left: 8px;
        right: auto;
        transform: none;
    }
}