/*
Theme Name: fgMatchBox Child — Smiles on X
Template: fgmatchbox
Author: Firegang Dental Marketing
Description: Smiles on X brand layer (runtime token overrides). No build.
Version: 0.1
*/

/* Self-hosted Gloock/Jost real faces — parent ships fallbacks only. Leave web_font_url blank in Theme Settings. */
@font-face {
    font-family: 'Gloock';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/gloock-400-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/jost-400-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/jost-500-latin.woff2') format('woff2');
}

/* MMFF fallbacks — kill font-swap CLS; fonttools-computed against the Google woff2s. */
@font-face {
    font-family: 'Gloock Fallback';
    src: local('Georgia');
    size-adjust: 106.34%;
    ascent-override: 91.68%;
    descent-override: 21.16%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Jost Fallback';
    src: local('Arial');
    font-weight: 400 500;
    size-adjust: 95.36%;
    ascent-override: 112.20%;
    descent-override: 39.32%;
    line-gap-override: 0%;
}

/* Brand tokens — Figma Homepage Desktop 2849:11871. Green primary, gold accents, cream wash;
   Gloock headings + Jost body. Type caps = desktop @1920. */
:root {
    --primaryColor: #22473B;
    --primaryHover: #231F20;
    --secondaryColor: #A89256;
    --secondaryHover: #E8D288;
    --darkGold: #A89256;
    --lightGold: #E8D288;
    --goldGradient: linear-gradient(104deg, #A89256 0%, #E8D288 25%, #E8D288 75%, #A89256 100%);
    --altBg: #F5F3EB;
    --black: #231F20;
    --white: #FFFFFF;
    --footerBg: #22473B;

    --headingFont: 'Gloock', 'Gloock Fallback', Georgia, serif;
    --bodyFont: 'Jost', 'Jost Fallback', Arial, sans-serif;
    --headingFontWeight: 400;

    --navLinkPadY: min(0.99vw, 19px);

    --dispFontSize: clamp(48px, 7.29vw, 140px);
    --h1FontSize:   clamp(36px, 2.5vw, 48px);
    --h2FontSize:   clamp(28px, 1.875vw, 36px);
    --h3FontSize:   clamp(24px, 1.458vw, 28px);
    --h4FontSize:   clamp(20px, 1.25vw, 24px);
    --bodyFontSize: clamp(16px, 0.938vw, 18px);

    --headingLineHeight: 115%;
    --h3LineHeight: 125%;
    --h4LineHeight: 125%;
    --bodyLineHeight: 150%;

    --shadySm:  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);
    --shadyLg:  0 50px 60px rgba(0,0,0,0.05), 0 30px 40px rgba(0,0,0,0.10);
}

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

/* Gloock is 400-only — hold headings at 400 so the theme's 500 never faux-bolds. */
h1, h2, h3, .h1, .h2, .h3 {
    font-weight: var(--headingFontWeight);
}


/* ===== HERO — Video Banner (Figma 2849:11908) =====
   .promo > .promoBg(poster) + video#vidBanner + .vid-promo; gold script SVG bottom-left; white round-top base. */
.home .promo {
    height: min(48.96vw, 940px);
}

/* .vid-promo fills the hero so the overlay + script anchor to the full 940 frame, not the padded holder. */
.home .promo .vid-promo.promo-holder {
    position: absolute;
    inset: 0;
}
/* Overlay over the video; darker at top for nav contrast. */
.home .promo .vid-promo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(35,31,32,0.55) 0%, rgba(35,31,32,0.18) 22%, rgba(35,31,32,0.18) 100%);
    pointer-events: none;
}
.home .promo .vid-promo .container {
    position: relative;
    height: 100%;
    z-index: 3;
}
/* Pin .slide_content to the full container so the absolute script anchors to the hero bottom. */
.home .promo .vid-promo .slide_content {
    position: absolute;
    inset: 0;
}
.home .promo .banH {
    display: none;
}
/* Gold script SVG (Figma top-left 140,455); its bbox bleeds 17px below the hero (clipped). */
.home .promo .hero-copy {
    position: absolute;
    left: 0;
    bottom: -0.885vw;
    width: min(46.46vw, 892px);
    height: auto;
    z-index: 2;
}

/* White rounded-top transition at the hero base — on .vid-promo::after so it anchors bottom (z2). */
.home .promo .vid-promo::after {
    content: '';
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    z-index: 2;
    height: clamp(40px, 7.29vw, 140px);
    background: var(--white);
    border-radius: clamp(20px, 2.08vw, 40px) clamp(20px, 2.08vw, 40px) 0 0;
    pointer-events: none;
}


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

/* Nav bar vertical padding 24/24 (158-tall bar). Element selector so the parent's mobile
   #header{padding:0} out-specifies this — mobile stays untouched with no media query. */
header {
    padding-top: 24px;
    padding-bottom: 24px;
}

/* Book Now CTA — gold-gradient, sharp, dark text. Named transitions so the focus ring doesn't animate in. */
#header .booking-opener,
#header .booking-blank {
    background: var(--goldGradient);
    color: var(--black);
    white-space: nowrap;
    border-radius: 0;
    transition: transform .5s linear, background .5s linear, color .5s linear;
}
#header .booking-opener:hover,
#header .booking-blank:hover {
    transform: translateY(-5px);
}
/* White-bg nav (hover + scrolled): Book Now = black fill, white text. */
#header:hover .booking-opener,
#header:hover .booking-blank,
body.scrolled #header .booking-opener,
body.scrolled #header .booking-blank {
    background: var(--black);
    color: var(--white);
}
/* Book Now keyboard focus: white ring on the transparent variant. */
#header .booking-opener:focus-visible,
#header .booking-blank:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 6px;
}
/* White-bg variant (hover + scrolled): the ring goes dark, offset further off the black button. */
#header:hover .booking-opener:focus-visible,
#header:hover .booking-blank:focus-visible,
body.scrolled #header .booking-opener:focus-visible,
body.scrolled #header .booking-blank:focus-visible {
    outline-color: var(--black);
    outline-offset: 8px;
}

/* Logo 216x104 @1920. Size the .sLogo box; the imgs fill it (width/height only, never re-pin top). */
#header .sLogo {
    width: clamp(150px, 11.25vw, 216px);
    height: clamp(72px, 5.42vw, 104px);
}
#header #logo img#mLogo,
#header #logo img#scLogo {
    width: 100%;
    height: 100%;
}

/* Contact row -> nav row vertical rhythm = 24 (Figma). */
#header .locNavBtns {
    gap: 24px;
}

/* Contact row = its natural 24px height (drop the parent's 10px pad) so the 24px gap reads clean. */
#header .conBlock.flex {
    padding-top: 0;
    padding-bottom: 0;
}

/* Nav links: 48 between link boxes — gap 28 + li 10/10. */
#header .locNavBtns #nav {
    gap: clamp(14px, 1.458vw, 28px);
}

/* Nav hover underline = Dark Gold (Figma), not the parent's --ltBlue fallback. */
#header #nav > li > a::after {
    background-color: var(--darkGold);
}

/* Dropdown caret on parent nav items ("Our Services") — rides a ::before in the link's reserved
   right padding (the underline owns a::after). Colour inherits the link. */
#header #nav > li.menu-item-has-children > a {
    padding-right: 18px;
}
#header #nav > li.menu-item-has-children > a::before {
    content: "\f0d7";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Right caret on sub-menu items that open a nested flyout — uses ::after (dark on the white dropdown). */
#header #nav .sub-menu > li.menu-item-has-children > a {
    position: relative;
    padding-right: 32px;
}
#header #nav .sub-menu > li.menu-item-has-children > a::after {
    content: "\f0da";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Last link -> BOOK NOW = 48 (Figma); overflow visible so the CTA's hover lift isn't clipped. */
#header .locNavBtns .opener-form {
    margin-left: clamp(8px, 0.73vw, 14px);
    overflow: visible;
}

/* Contact icons = Light Gold (Figma), not the parent's green. */
#header .headAdd i,
#header .phoneBlock i,
#header .conBlock i {
    color: var(--lightGold);
}

/* White-bg nav (hover + scrolled): contact icons = Dark Gold for contrast (Figma). */
#header:hover .headAdd i,
#header:hover .phoneBlock i,
#header:hover .conBlock i,
body.scrolled #header .headAdd i,
body.scrolled #header .phoneBlock i,
body.scrolled #header .conBlock i {
    color: var(--darkGold);
}

/* Interior pages have a white header at rest, so contact icons take the Dark Gold variant in every state. */
body:not(.home) #header .headAdd i,
body:not(.home) #header .phoneBlock i,
body:not(.home) #header .conBlock i {
    color: var(--darkGold);
}

/* No header bottom border in any state. */
#header,
#header:hover,
body.scrolled #header,
body.scrolled #header:hover {
    border-bottom: none;
}

/* Address + phone = Caption 16 (Figma), not the 18 body size. */
#header .headAdd a,
#header .phoneBlock a {
    font-size: 16px;
    font-weight: 400;
}

/* Header hours (#3, James) — desktop contact row: clock + Mon–Fri 9–5, left of the address.
   width:fit-content + flex:0 0 auto so it sizes to content like .headAdd/.phoneBlock (else it
   stretches to the full row width and pushes off-screen). */
#header .conBlock .hoursBlock {
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 400;
}

/* Overline tracking = 20% (3.2px) on nav links + header CTA (Figma). */
#header .locNavBtns #nav a,
#header .booking-opener,
#header .booking-blank {
    letter-spacing: 3.2px;
}

/* CTA button = 178x62 (Figma) — 19 vertical pad + 24 line-box. */
#header .opener-form .booking-opener,
#header .opener-form .booking-blank {
    padding: clamp(12px, 0.99vw, 19px) clamp(22px, 1.56vw, 30px);
}


/* ===== DIFFERENTIATOR BAR (Figma 5285:998) =====
   Cream->white gradient, 60 top / 140 bottom; H3 heading; green circle icons + green checks. */
.diff {
    background: linear-gradient(to top, var(--altBg) 0%, var(--white) 100%);
    padding: clamp(40px, 3.125vw, 60px) 0 clamp(80px, 7.29vw, 140px);
}
.diff .heading h1,
.diff .heading .h1 {
    font-family: var(--bodyFont);
    font-size: var(--h3FontSize);
    line-height: var(--h3LineHeight);
    font-weight: 400;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    text-align: center;
    color: var(--black);
    margin-top: 0;
    margin-bottom: 56px;
}
.diff .diffImg img {
    width: 80px;
    height: 80px;
}
.diff .diffImg {
    margin-bottom: 32px;
}
.diff .diffList li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(16px, 4vw);
    padding: 0;
    margin-bottom: 24px;
}
.diff .diffList li:last-child {
    margin-bottom: 0;
}
.diff .diffList li,
.diff .diffList li a {
    font-size: var(--bodyFontSize);
    color: var(--black);
    text-decoration: none;
}
.diff .diffList li i,
.diff .diffList li .fa-check {
    color: var(--primaryColor);
}


/* ===== NEWS BLOCK 1 (Figma 5250:1079) =====
   Brand deltas over the parent fw_content_half: right-anchored cream swoosh, right-weighted widths
   (812 photo / 536 copy), H1 heading, photo shadow, AGD/ICOI logos. id-scoped to beat the
   per-section sheet's load order. */
#sox-news1.half-content {
    background-image: url('images/news-swoosh-desktop.svg');
    background-position: right center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
#sox-news1 .container {
    align-items: center;
    justify-content: flex-start;
    gap: clamp(40px, 8.02vw, 154px);
}
#sox-news1 .image {
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadyLg);
}
#sox-news1 .image picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#sox-news1 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video variant — if NB1 is switched to a video the markup is .video not .image; mirror the image
   rules (square, cover, shadow) + add the Figma white play button, bottom-left. Triangle = primary. */
#sox-news1 .video {
    aspect-ratio: 1 / 1;
    position: relative;
    box-shadow: var(--shadyLg);
}
#sox-news1 .video .cVidWrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
#sox-news1 .video .cVidWrap a.popVid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
#sox-news1 .video .cVidWrap a.popVid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
}
#sox-news1 .video .cVidWrap a.popVid::after {
    content: "\f04b";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: clamp(20px, 1.46vw, 28px);
    color: var(--primaryColor);
    position: absolute;
    left: clamp(8px, 0.83vw, 16px);
    bottom: clamp(8px, 0.83vw, 16px);
    z-index: 3;
    width: clamp(56px, 4.17vw, 80px);
    height: clamp(56px, 4.17vw, 80px);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Autoplay Video variant (self-hosted inline <video>, play-once) — keep the .image 1:1 square + shadow
   so NB1 flows identically whether it's an image or an autoplay video. The clip is 16:9, so
   object-fit:contain shows the WHOLE frame letterboxed inside the square, with brand-dark (--black)
   bars top/bottom (James: keep the square, show the full video — no side cropping). Controls =
   gold-gradient squares (carousel/testimonial treatment), overlaid TOP-LEFT over the top bar.
   Desktop here; mobile match added in the @media(max-1024) block. */
#sox-news1 .autoplay_video {
    aspect-ratio: 1 / 1;
    position: relative;
    box-shadow: var(--shadyLg);
}
#sox-news1 .autoplay_video .avVidWrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--black);
}
#sox-news1 .autoplay_video .av-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#sox-news1 .av-controls {
    position: absolute;
    left: clamp(8px, 0.83vw, 16px);
    top: clamp(8px, 0.83vw, 16px);
    z-index: 3;
    display: flex;
    gap: clamp(8px, 0.83vw, 16px);
}
#sox-news1 .av-playpause,
#sox-news1 .av-sound {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 4.17vw, 64px);
    height: clamp(48px, 4.17vw, 64px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--goldGradient);
    color: var(--black);
    cursor: pointer;
    transition: transform 0.3s ease;
}
#sox-news1 .av-playpause svg,
#sox-news1 .av-sound svg {
    width: clamp(20px, 1.56vw, 24px);
    height: clamp(20px, 1.56vw, 24px);
    display: block;
}
#sox-news1 .av-sound .ico-unmuted,
#sox-news1 .av-playpause .ico-play {
    display: none;
}
#sox-news1 .av-sound.is-on .ico-muted {
    display: none;
}
#sox-news1 .av-sound.is-on .ico-unmuted {
    display: block;
}
#sox-news1 .av-playpause.is-paused .ico-pause {
    display: none;
}
#sox-news1 .av-playpause.is-paused .ico-play {
    display: block;
}
#sox-news1 .av-playpause:hover,
#sox-news1 .av-playpause:focus-visible,
#sox-news1 .av-sound:hover,
#sox-news1 .av-sound:focus-visible {
    transform: translateY(-3px);
}
#sox-news1 .av-playpause:focus-visible,
#sox-news1 .av-sound:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}
/* Copy column = 536 @1920; row-reverse anchors the image right, so narrowing copy just opens the
   Figma left inset — no justify change (#5). */
#sox-news1 .text {
    width: min(27.92vw, 536px);
}
#sox-news1 .text > div {
    width: 100%;
    margin: 0;
}
#sox-news1 .text h2 {
    font-size: clamp(32px, 2.5vw, 48px);
    line-height: 1.15;
    margin-bottom: clamp(20px, 1.67vw, 32px);
}
/* AGD + ICOI association logos, 64 tall, 32 gap (Figma — plain gap, no divider). */
#sox-news1 .assocLogos {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.667vw, 32px);
    margin-top: clamp(40px, 4.17vw, 80px);
}
#sox-news1 .assocLogo {
    height: clamp(48px, 3.33vw, 64px);
    width: auto;
    margin-top: 0;
}


/* ===== FEATURED SERVICES (Figma 5241:1019) =====
   Full-bleed photo bg + 55% black overlay; bottom-anchored left-278 stack of white Gloock 48
   service links with a hover underline. 720 tall @1920. */
#sox-services.freeForm {
    position: relative;
    min-height: min(37.5vw, 720px);
    display: flex;
    align-items: flex-end;
    background: url('/wp-content/uploads/2026/09/featured_services_bg_desktop.jpg') center / cover no-repeat;
}
#sox-services.freeForm::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}
#sox-services .container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: min(14.48vw, 278px);
}
#sox-services .svcList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 2.08vw, 40px);
}
#sox-services .svcList li {
    margin: 0;
    padding: 0;
}
#sox-services .svcList a {
    position: relative;
    display: inline-block;
    font-family: var(--headingFont);
    font-size: clamp(32px, 2.5vw, 48px);
    line-height: 1.15;
    color: var(--white);
    text-decoration: none;
    padding-bottom: clamp(8px, 0.83vw, 16px);
}
#sox-services .svcList a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--white);
    transition: width 0.3s ease;
}
#sox-services .svcList a:hover::after {
    width: 100%;
}


/* ===== NEWS BLOCK 2 (Figma 5313:4049) =====
   Mirror of NB1, left-weighted: image LEFT, 812 photo / 536 copy, 154 gap, 140 left inset. Cream
   section + bottom-anchored white rounded card + cream decorative line. 1022 tall. */
#sox-news2.half-content {
    position: relative;
    background-color: var(--altBg);
    min-height: min(53.23vw, 1022px);
    padding: clamp(80px, 7.29vw, 140px) 0 clamp(40px, 3.65vw, 70px);
}
#sox-news2 .container {
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(40px, 8.02vw, 154px);
}
/* White card + decorative line as solid CSS layers (not a stretched SVG) so the card meets NB3
   with a crisp edge and no seam. Card = 4.167% side insets, top 21.53% (Figma). */
#sox-news2.half-content::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 4.167%;
    right: 4.167%;
    top: 21.53%;
    bottom: 0;
    background: var(--white);
    border-radius: clamp(20px, 2.08vw, 40px) clamp(20px, 2.08vw, 40px) 0 0;
}
#sox-news2.half-content::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    background-color: var(--altBg);
    -webkit-mask: url('images/news-block-b-line.svg') center / 100% 100% no-repeat;
    mask: url('images/news-block-b-line.svg') center / 100% 100% no-repeat;
    pointer-events: none;
}
#sox-news2 .image,
#sox-news2 .text {
    position: relative;
    z-index: 1;
}
#sox-news2 .image {
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadyLg);
}
#sox-news2 .image picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#sox-news2 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Copy = 536 (#5); bottom-aligned with 140 below it (#7). Container stretched (above) so the column = image height. */
#sox-news2 .text {
    width: min(27.92vw, 536px);
    align-content: end;
    padding-bottom: min(7.29vw, 140px);
}
#sox-news2 .text > div {
    width: 100%;
    margin: 0;
}
#sox-news2 .text h2 {
    font-size: clamp(32px, 2.5vw, 48px);
    line-height: 1.15;
    margin-bottom: clamp(20px, 1.67vw, 32px);
}


/* ===== NEWS BLOCK 3 (Figma 5250:1030) =====
   Point-mirror of NB2: text LEFT / image RIGHT, right + bottom anchored. Same card, rotated 180
   (rounds at the bottom, sits at the top) via ::before so the one SVG serves both blocks. */
#sox-news3.half-content {
    position: relative;
    background-color: var(--altBg);
    min-height: min(53.23vw, 1022px);
    padding: clamp(40px, 3.65vw, 70px) 0 clamp(80px, 7.29vw, 140px);
}
#sox-news3 .container {
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(40px, 8.02vw, 154px);
}
/* Card rounds at the bottom, top-anchored; -1px overlaps NB2's card so two white edges meet with no
   seam. Decorative line rotated 180 to match. */
#sox-news3.half-content::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 4.167%;
    right: 4.167%;
    top: -1px;
    bottom: 21.53%;
    background: var(--white);
    border-radius: 0 0 clamp(20px, 2.08vw, 40px) clamp(20px, 2.08vw, 40px);
}
#sox-news3.half-content::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    background-color: var(--altBg);
    -webkit-mask: url('images/news-block-b-line.svg') center / 100% 100% no-repeat;
    mask: url('images/news-block-b-line.svg') center / 100% 100% no-repeat;
    transform: rotate(180deg);
    pointer-events: none;
}
#sox-news3 .image,
#sox-news3 .text {
    position: relative;
    z-index: 1;
}
#sox-news3 .image {
    aspect-ratio: 1 / 1;
    box-shadow: var(--shadyLg);
}
#sox-news3 .image picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#sox-news3 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Copy = 536 (#5); top-aligned with 140 above it — mirror of NB2 (#7). */
#sox-news3 .text {
    width: min(27.92vw, 536px);
    align-content: start;
    padding-top: min(7.29vw, 140px);
}
#sox-news3 .text > div {
    width: 100%;
    margin: 0;
}
#sox-news3 .text h2 {
    font-size: clamp(32px, 2.5vw, 48px);
    line-height: 1.15;
    margin-bottom: clamp(20px, 1.67vw, 32px);
}


/* Google Reviews pill (#R1, James) — the floating .google-button-container. The "75+ GOOGLE REVIEWS"
   line shipped with a 24px line-height whose ~5px top leading pushed the text high (uneven vs the stars
   below); line-height:1 + an explicit gap evens the top/bottom space inside the pill. */
.google-button-container .num-reviews-and-stars p {
    line-height: 1;
    margin: 0 0 4px;
}


/* ===== REVIEWS SCROLLER (Figma 5289:1268) =====
   Centered Gloock heading + Splide peek-carousel: 812 slides, centre opaque, neighbours dim+blur
   +dropped, bleeding off the section edges. Dim/blur/drop live on .con-wrap-match, NOT the slide
   (Splide focus:center owns the slide transform). Content is easter-egg — style only. */
body .reviews {
    overflow-x: hidden;
    text-align: center;
    background: linear-gradient(to top, rgba(255, 255, 255, 0), var(--altBg));
    padding: clamp(40px, 3.65vw, 70px) 0 clamp(56px, 5.21vw, 100px);
}
.reviews .heading h2,
.reviews .heading .h2 {
    font-family: var(--headingFont);
    font-size: clamp(32px, 2.5vw, 48px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--black);
    text-align: center;
    margin: 0 0 clamp(24px, 1.67vw, 32px);
}
.reviews .container {
    width: 100%;
    max-width: none;
}
/* Peek dim/blur states (.is-active/.is-prev/.is-next) live in no-rucss-child.css —
   RUCSS strips JS-added-class rules from this (non-excluded) sheet. */
.reviews .rQuote {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}
.reviews .rQuote > p {
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
    color: var(--black);
    text-align: center;
    margin: 0 0 clamp(16px, 1.67vw, 24px);
}
.reviews .rQuote > p::before {
    content: '\201C';
}
.reviews .rQuote > p::after {
    content: '\201D';
}
.reviews .attribWrap .tName {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.11vw, 16px);
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0;
}
.reviews .attribWrap .tName a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: var(--white);
    border-radius: 50%;
}
.reviews .attribWrap .tName a img {
    width: 14.667px;
    height: 14.667px;
}


/* ===== AUTOPLAY VIDEO CAROUSEL (R4, child section autoplay_vid_carousel) — Splide center-focus
   carousel of self-hosted testimonial videos, between the reviews scroller and the testimonial block.
   Square tiles for the square footage; the centred tile plays full-colour, side tiles greyed + paused
   (Ali's center-focus idea). Controls show only on the active tile. First-pass spacing/bg — tune live. */
.autoplay-vid-carousel {
    padding: 0 0 clamp(100px, 7.29vw, 140px);
    overflow: hidden;
}
.autoplay-vid-carousel .heading h2 {
    font-family: var(--headingFont);
    font-size: clamp(32px, 2.5vw, 48px);
    font-weight: 400;
    line-height: 1.15;
    text-align: center;
    color: var(--black);
    margin: 0 0 clamp(24px, 1.67vw, 32px);
}
.autoplay-vid-carousel .avc-carousel {
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
}
.autoplay-vid-carousel .splide__slide {
    cursor: pointer;
}
.autoplay-vid-carousel .splide__slide.is-active {
    cursor: default;
}
.autoplay-vid-carousel .avc-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--black);
    box-shadow: var(--shadySm);
    transition: filter 0.4s ease, opacity 0.4s ease;
}
/* Side (non-centred) tiles greyed out — Ali's center-focus idea. */
.autoplay-vid-carousel .splide__slide:not(.is-active) .avc-tile {
    filter: grayscale(1);
    opacity: 0.55;
}
.autoplay-vid-carousel .avc-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Controls — gold-gradient squares (Book Now treatment); a single bar centred BELOW the carousel
   (not overlaid) so it never covers the videos' burned-in captions or the speaker. Drives the
   centred video. */
.autoplay-vid-carousel .avc-controls {
    display: flex;
    justify-content: center;
    gap: clamp(8px, 0.83vw, 16px);
    margin-top: clamp(16px, 1.67vw, 32px);
}
.autoplay-vid-carousel .avc-playpause,
.autoplay-vid-carousel .avc-sound {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 4.17vw, 64px);
    height: clamp(48px, 4.17vw, 64px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--goldGradient);
    color: var(--black);
    cursor: pointer;
    transition: transform 0.3s ease;
}
.autoplay-vid-carousel .avc-playpause svg,
.autoplay-vid-carousel .avc-sound svg {
    width: clamp(20px, 1.56vw, 24px);
    height: clamp(20px, 1.56vw, 24px);
    display: block;
}
.autoplay-vid-carousel .avc-sound .ico-unmuted,
.autoplay-vid-carousel .avc-playpause .ico-play {
    display: none;
}
.autoplay-vid-carousel .avc-sound.is-on .ico-muted {
    display: none;
}
.autoplay-vid-carousel .avc-sound.is-on .ico-unmuted {
    display: block;
}
.autoplay-vid-carousel .avc-playpause.is-paused .ico-pause {
    display: none;
}
.autoplay-vid-carousel .avc-playpause.is-paused .ico-play {
    display: block;
}
.autoplay-vid-carousel .avc-playpause:hover,
.autoplay-vid-carousel .avc-playpause:focus-visible,
.autoplay-vid-carousel .avc-sound:hover,
.autoplay-vid-carousel .avc-sound:focus-visible {
    transform: translateY(-3px);
}
.autoplay-vid-carousel .avc-playpause:focus-visible,
.autoplay-vid-carousel .avc-sound:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}


/* ===== TESTIMONIAL BLOCK (Figma 5285:1141) =====
   Dark section: before/after tile + video-thumbnail tile (two 812 squares, 16 gap) then a centred
   "View All Cases" CTA. Video deferred (client) = static thumb + play button. Play triangle = green. */
#sox-testimonial {
    background-color: var(--black);
    padding: clamp(64px, 7.29vw, 140px) 0 clamp(40px, 2.81vw, 54px);
}
#sox-testimonial .col-lg-12 {
    padding-left: 0;
    padding-right: 0;
}
#sox-testimonial .tBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(32px, 2.92vw, 56px);
}
#sox-testimonial .tBlock-images {
    display: flex;
    align-items: stretch;
    gap: clamp(8px, 0.83vw, 16px);
    width: 100%;
}
#sox-testimonial .tBlock-ba,
#sox-testimonial .tBlock-video {
    position: relative;
    flex: 1 1 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    box-shadow: 0 30px 40px rgba(0, 0, 0, 0.1);
}
#sox-testimonial .tBlock-ba picture,
#sox-testimonial .tBlock-video picture {
    display: block;
    width: 100%;
    height: 100%;
}
#sox-testimonial .tBlock-ba img,
#sox-testimonial .tBlock-video img,
#sox-testimonial .tBlock-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* #10 — Before/After as coded text (the placed image must be the BLANK version). Vertical-split
   tile: "Before" bottom-left of the top half, "After" bottom-left of the bottom half; white overline. */
#sox-testimonial .tBlock-ba::before,
#sox-testimonial .tBlock-ba::after {
    position: absolute;
    left: clamp(20px, 2.08vw, 40px);
    z-index: 2;
    font-family: var(--bodyFont);
    font-size: clamp(14px, 0.83vw, 16px);
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--white);
    pointer-events: none;
}
#sox-testimonial .tBlock-ba::before {
    content: 'Before';
    bottom: calc(50% + clamp(20px, 2.08vw, 40px));
}
#sox-testimonial .tBlock-ba::after {
    content: 'After';
    bottom: clamp(20px, 2.08vw, 40px);
}
#sox-testimonial .tBlock-video {
    display: block;
}
/* R2 — testimonial video controls (play/pause + mute/unmute), bottom-left bar. Both are gold-gradient
   sharp squares (Book Now CTA treatment) with dark inline-SVG icons injected by the JS (the FA subset
   has no volume/transport glyphs); each toggles its icon. Play/pause = the WCAG 2.2.2 pause control. */
#sox-testimonial .tBlock-controls {
    position: absolute;
    left: clamp(8px, 0.83vw, 16px);
    top: clamp(8px, 0.83vw, 16px);
    z-index: 2;
    display: flex;
    gap: clamp(8px, 0.83vw, 16px);
}
#sox-testimonial .tBlock-playpause,
#sox-testimonial .tBlock-sound {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    background: var(--goldGradient);
    color: var(--black);
    cursor: pointer;
    transition: transform 0.3s ease;
}
#sox-testimonial .tBlock-playpause svg,
#sox-testimonial .tBlock-sound svg {
    width: 30px;
    height: 30px;
    display: block;
}
#sox-testimonial .tBlock-sound .ico-unmuted,
#sox-testimonial .tBlock-playpause .ico-play {
    display: none;
}
#sox-testimonial .tBlock-sound.is-on .ico-muted {
    display: none;
}
#sox-testimonial .tBlock-sound.is-on .ico-unmuted {
    display: block;
}
#sox-testimonial .tBlock-playpause.is-paused .ico-pause {
    display: none;
}
#sox-testimonial .tBlock-playpause.is-paused .ico-play {
    display: block;
}
#sox-testimonial .tBlock-playpause:hover,
#sox-testimonial .tBlock-playpause:focus-visible,
#sox-testimonial .tBlock-sound:hover,
#sox-testimonial .tBlock-sound:focus-visible {
    transform: translateY(-3px);
}
/* Keyboard focus (WCAG 2.4.7): white ring offset onto the dark section behind the gold buttons. */
#sox-testimonial .tBlock-playpause:focus-visible,
#sox-testimonial .tBlock-sound:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}
#sox-testimonial .tBlock-cta {
    position: relative;
    display: inline-block;
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
}
#sox-testimonial .tBlock-cta::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--white);
    transition: width 0.3s ease;
}
#sox-testimonial .tBlock-cta:hover::after,
#sox-testimonial .tBlock-cta:focus-visible::after {
    width: 100%;
}


/* ===== SPECIAL OFFERS (Figma 2849:11882) =====
   White section, Gloock 48 heading, 3 white cards (1.5px cream border, no shadow): green 80px icon,
   Jost Medium 24 title, Jost 16 caption, "Learn More" hover-underline. Mobile = single-card Splide
   (parent destroys Splide >=1025). Overrides beat offers.min.css via body / .offers prefixes. */
body .offers {
    padding: clamp(64px, 7.29vw, 140px) 0;
}
.offers .offers-holder {
    padding-left: 0;
    padding-right: 0;
}
.offers .heading {
    margin-bottom: clamp(32px, 2.5vw, 48px);
}
.offers .heading h2 {
    font-family: var(--headingFont);
    font-size: clamp(32px, 2.5vw, 48px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--black);
}
body .offers .offers-list li,
body .offers .splide.is-initialized:not(.is-active) .offers-list li {
    width: calc((100% - 32px) / 3);
}
.offers .box-offers.center {
    text-align: center;
    padding: clamp(16px, 1.25vw, 24px) 0 0;
}
.offers .box-offers .box-holder {
    border: 1.5px solid var(--altBg);
    box-shadow: none;
    transition: border-color 0.3s ease;
}
/* Card outline -> Dark Gold on hover (#11). */
.offers .box-offers .box-holder:hover {
    border-color: var(--darkGold);
}
.offers .box-offers.center .description .h4 {
    display: block;
    font-family: var(--bodyFont);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--black);
    margin: 0 0 16px;
}
.offers .spcImg img {
    width: 80px;
    height: 80px;
}
.offers .specWrap a {
    font-weight: 500;
    letter-spacing: 3.2px;
    color: var(--black);
}
/* "Learn More" hover-reveal underline -> Dark Gold (#13). */
.offers .specWrap a::after {
    background-color: var(--darkGold);
}
.offers .box-offers .offers-info p {
    color: var(--black);
}


/* Special Offers page (special-offers.php) — match the homepage offers cards and widen the content
   band so the 3-up grid matches (~1298 = the homepage offers band). */
body.page-template-special-offers .main-frame .container #content {
    width: min(95%, 1367px);
}
body.page-template-special-offers .box-offers.center {
    text-align: center;
    padding: clamp(16px, 1.25vw, 24px) 0 0;
}
body.page-template-special-offers .box-offers .box-holder {
    border: 1.5px solid var(--altBg);
    box-shadow: none;
    transition: border-color 0.3s ease;
}
/* Int-D9 (#11) — card outline -> Dark Gold on hover, matching the homepage offers. */
body.page-template-special-offers .box-offers .box-holder:hover {
    border-color: var(--darkGold);
}
body.page-template-special-offers .box-offers.center .description .h4 {
    display: block;
    font-family: var(--bodyFont);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    margin: 0 0 16px;
}
body.page-template-special-offers .box-offers.center .description .h4 a {
    color: var(--black);
}
body.page-template-special-offers .spcImg img {
    width: 80px;
    height: 80px;
}
body.page-template-special-offers .specWrap a {
    font-family: var(--bodyFont);
    font-weight: 500;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: var(--black);
}
body.page-template-special-offers .specWrap a::after {
    background-color: var(--darkGold);
}
body.page-template-special-offers .box-offers .offers-info p {
    color: var(--black);
}
/* Int-D9 — cards section background = white (was the interior cream .main-frame). */
body.page-template-special-offers .main-frame {
    background-color: var(--white);
}


/* ===== MAP / LOCATION (Figma 5289:1243) =====
   Cream section, right-aligned: 536 copy column (Gloock 48 heading + address/phone/hours rows with
   dark-gold icons) + 154 gap + an 812 dark Google map. Map style + API key in Theme Settings. */
.section-location,
.widget.section-location {
    position: relative;
    overflow: hidden;
    background-color: var(--altBg);
    padding-top: 0;
    padding-bottom: 0;
}
/* Right-anchored white-shape bg SVG. auto 100% (not contain) always fills the section height; the
   42.29vw map below keeps the box at the SVG's 0.745 aspect so width matches too — no seam (#14). */
.section-location::after {
    content: '';
    position: absolute;
    inset: 0 0 0 auto;
    width: min(42.4vw, 814px);
    background: url('images/map-block-bg-desktop.svg') no-repeat right center / auto 100%;
    z-index: 0;
    pointer-events: none;
}
/* Full-width block with vw insets so copy (14.48vw left), map (7.29vw right) and the right-anchored
   bg all scale by ONE vw factor — the section scales together, matching Figma at every width (#14). */
.section-location .map-block {
    position: relative;
    z-index: 1;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(40px, 8.02vw, 154px);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: clamp(56px, 7.29vw, 140px) min(7.29vw, 140px) clamp(56px, 7.29vw, 140px) 0;
}
.section-location .map-block .address {
    display: block;
    width: min(27.92vw, 536px);
    flex: 0 0 auto;
    padding: 0;
}
.section-location .address .address-holder {
    display: block;
    column-count: 1;
    columns: auto;
    padding: 0;
}
.section-location .address-holder,
.section-location .address-holder address,
.section-location .address-holder .shedule {
    width: 100%;
    max-width: none;
    float: none;
}
.section-location .map-block .mapWrp {
    width: min(42.29vw, 812px);
    flex: 0 0 auto;
}
.section-location .mapWrp #map {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}
.section-location .address-holder .row-place .h4 {
    font-family: var(--headingFont);
    font-size: clamp(32px, 2.5vw, 48px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--black);
    margin: 0 0 clamp(24px, 1.67vw, 32px);
}
.section-location .pin i {
    color: var(--darkGold);
}
.section-location .inf a,
.section-location .inf .place span,
.section-location .shedule dt,
.section-location .shedule dd {
    font-family: var(--bodyFont);
    font-size: 18px;
    color: var(--black);
    text-decoration: none;
}
.section-location .address-holder .shedule dl {
    display: flex;
    gap: 8px;
    margin: 0;
}
.section-location .address-holder .shedule dt,
.section-location .address-holder .shedule dd {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}
/* #15 — address + phone links underline on hover (hours are dt/dd, not links, so unaffected). */
.section-location .inf a:hover {
    text-decoration: underline;
}

/* #16 — Contact Us button (was hidden, "design has none"). general.js relays the click
   (.bottom-opener -> #openForm/#sOpenForm) to open the popup; styled as the site's dark CTA. */
.section-location .bottom-opener {
    display: inline-block;
    margin-top: clamp(24px, 1.67vw, 32px);
    padding: clamp(12px, 0.99vw, 19px) clamp(22px, 1.56vw, 30px);
    background: var(--black);
    color: var(--white);
    border: 0;
    border-radius: 0;
    font-weight: 500;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    transition: transform 0.3s ease;
}
.section-location .bottom-opener:hover,
.section-location .bottom-opener:focus-visible {
    transform: translateY(-5px);
}

/* #23 — keyboard focus for the map container + its Google UI controls (dark-gold reads on both). */
.section-location #map:focus-visible,
.section-location .mapWrp button:focus-visible,
.section-location .mapWrp a:focus-visible,
.section-location .mapWrp [tabindex]:focus-visible {
    outline: 3px solid var(--darkGold);
    outline-offset: 2px;
}


/* ===== CTA / FOOTER BANNER (Figma 2849:11873) =====
   White band above the footer: Gloock 36 centred heading + black sharp "Book Now" (gold-gradient
   on hover). Content is a John easter egg — style only. */
.cta.cta-center {
    background-color: var(--white);
    padding: clamp(56px, 5.21vw, 100px) 0;
    text-align: center;
}
.cta.cta-center .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 1.67vw, 32px);
}
.cta.cta-center h2 {
    font-family: var(--headingFont);
    font-size: clamp(28px, 1.875vw, 36px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--black);
    margin: 0;
    max-width: min(90vw, 1088px);
}
.cta.cta-center .btn.btn-white {
    background: var(--black);
    color: var(--white);
    border: 0;
    border-radius: 0;
    font-weight: 500;
    letter-spacing: 3.2px;
    transition: transform 0.3s ease;
}
.cta.cta-center .btn.btn-white:hover,
.cta.cta-center .btn.btn-white:focus-visible {
    transform: translateY(-5px);
}
/* #24 — banner button keyboard focus: a dark ring offset into the white banner (the 4px gap
   separates the black button from the ring). */
.cta.cta-center .btn.btn-white:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 4px;
}


/* ===== FOOTER (Figma 2988:2237) — global (footer.php, all pages) =====
   Black band: logo left, "Leave a Review" + "Contact Us" nav grouped right, then a legal bar.
   Column headings = Jost Medium overline. Social content is still demo, real links TBD. */
body #footer {
    background-color: var(--black);
}
/* #25 — footer logo link is inline-block so its keyboard-focus ring wraps the (display:block) logo
   img instead of collapsing to 0x0. */
#footer .footer-holder .footer-logo a {
    display: inline-block;
}
#footer .footer-holder .footer-logo img {
    width: clamp(290px, 19.43vw, 373px);
    height: auto;
}
#footer .footer-holder .infoNav .h3,
#footer .footer-holder .servNav .h3,
#footer .footer-holder .fLocation h3 {
    font-family: var(--bodyFont);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: var(--white);
}
#footer .fAddress a,
#footer .tel-footer a,
#footer .info-nav a,
#footer .serv-nav a {
    font-size: 16px;
    color: var(--white);
    text-decoration: none;
}
#footer .footer-holder .social {
    gap: clamp(16px, 1.25vw, 24px);
}
#footer .social a,
#footer .social a i {
    color: var(--white);
}
#footer .social a i {
    font-size: clamp(20px, 1.46vw, 28px);
}
#footer #btm {
    border-top: 2px solid rgba(255, 255, 255, 0.25);
}
#footer #btm .container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: clamp(16px, 1.67vw, 32px);
}
#footer #btm .copyright,
#footer #btm .bottom-nav a {
    font-size: 14px;
    color: var(--white);
}


/* ===== CONTACT form section (Figma 2988:3894) — green section, gold-gradient submit with the
   translateY lift hover (matches the header BOOK NOW), not the colour-change variant. */
body .conForm {
    background-color: var(--primaryColor);
}
/* Int-D10 — contact form header (.conForm .heading h2) title case, not uppercase. */
body .conForm .heading h2 {
    text-transform: none;
}
/* Int-Mobile #5 (also desktop, per James) — centre the "New Patient?" Yes/No radios with the legend
   by zeroing the legend's 8px bottom margin (it made the margin-box taller, sitting the radios ~4px low). */
.conForm .flexWrap legend {
    margin-bottom: 0;
}
.conForm .wpcf7 input.wpcf7-submit {
    background: var(--goldGradient);
    color: var(--black);
    border: 0;
    border-radius: 0;
    font-weight: 500;
    letter-spacing: 3.2px;
    transition: transform 0.3s ease;
}
.conForm .wpcf7 input.wpcf7-submit:hover,
.conForm .wpcf7 input.wpcf7-submit:focus-visible {
    transform: translateY(-5px);
}
.conForm .wpcf7 textarea.wpcf7-textarea {
    border: 2px solid #767676;
}
.conForm .wpcf7-form label.hidden,
.conForm .wpcf7-form .hp-message {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


/* Interior WYSIWYG content images are SHARP per Figma; zero the parent interior_style rounding. */
body .entry-add img,
body .entry-add img.alignleft,
body .entry-add img.alignright {
    border-radius: 0;
}


/* Gloock content headings render at 1.15 (design system); the parent leaves them 1.25. The Jost
   promo-card heading keeps its own 1.25 via higher specificity. */
body .entry.entry-add h2,
body .entry.entry-add .h2 {
    line-height: 1.15;
}


/* ===== ON-PAGE SPECIAL OFFER card (Figma 2849:11810) — green, SHARP (parent rounds 10px), centred
   Jost-28 uppercase heading + Jost-16 body, medium drop shadow, 80/56 padding. */
body .entry.entry-add .page-offer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 1.25vw, 24px);
    padding: clamp(48px, 4.17vw, 80px) clamp(32px, 2.92vw, 56px);
    border-radius: 0;
    box-shadow: 0 40px 50px rgba(0, 0, 0, 0.05), 0 20px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}
body .entry.entry-add .page-offer h2,
body .entry.entry-add .page-offer .h2 {
    font-family: var(--bodyFont);
    font-weight: 400;
    font-size: clamp(22px, 1.46vw, 28px);
    line-height: 1.25;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: var(--white);
    max-width: 812px;
    margin: 0;
}
body .entry.entry-add .page-offer p {
    font-family: var(--bodyFont);
    font-size: 16px;
    line-height: 1.5;
    color: var(--white);
    max-width: 812px;
    margin: 0;
}


/* Interior content divider — 2px dark-gold line under #content, above the diff bar (Figma "Line"
   5289:1489). Int-D5: 140px @1920 total above the line — raise #content's existing 80px bottom pad
   (do NOT add a second pad on .container; that double-counts to 220). */
.main-frame > .container {
    border-bottom: 2px solid var(--darkGold);
}
body .main-frame .container #content {
    padding-bottom: clamp(100px, 7.29vw, 140px);
}
/* Int-D6 — interior diff bar matches the homepage .diff (Jost H3, green checks, 18px links) but with
   NO background (the interior mockup's diff section is transparent). Int-D5: 140px @1920 top + bottom. */
body .widget.widget-diff {
    padding: clamp(100px, 7.29vw, 140px) 0;
}
body .widget.widget-diff .heading h2,
body .widget.widget-diff .heading .h2 {
    font-family: var(--bodyFont);
    font-size: var(--h3FontSize);
    line-height: var(--h3LineHeight);
    font-weight: 400;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    text-align: center;
    color: var(--black);
    margin: 0 0 56px;
}
body .widget.widget-diff .diffImg img {
    width: 80px;
    height: 80px;
}
body .widget.widget-diff .diffImg {
    margin-bottom: 32px;
}
body .widget.widget-diff .diffList li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(16px, 4vw);
    padding: 0;
    margin-bottom: 24px;
}
body .widget.widget-diff .diffList li:last-child {
    margin-bottom: 0;
}
body .widget.widget-diff .diffList li,
body .widget.widget-diff .diffList li a {
    font-size: var(--bodyFontSize);
    color: var(--black);
    text-decoration: none;
}
body .widget.widget-diff .diffList li i,
body .widget.widget-diff .diffList li .fa-check {
    color: var(--primaryColor);
}
/* Int-D7 — Our Services cards: remove the drop shadow (interior_style.min sets shadyMid). */
body .servBlock .servCard {
    box-shadow: none;
}
/* Int-D8 — Our Services card titles -> 24px @1920 (were 28). */
body .entry.entry-add .servCard .h3 {
    display: block;
    font-family: var(--bodyFont);
    font-weight: 400;
    font-size: clamp(22px, 1.25vw, 24px);
    line-height: 1.25;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: clamp(12px, 1.04vw, 20px);
}


/* Int-D2 — Doctor/Team bio rows (.su-column): the WYSIWYG drops an empty leading <p> and the first
   <h2> carries an 80px top margin; drop both so the name aligns to the top of the image. */
.su-column-size-2-3 .su-column-inner > p:first-child:empty {
    display: none;
}
.su-column-size-2-3 .su-column-inner > h2:first-of-type {
    margin-top: 0;
}

/* Int-D3 — Team & Smile Gallery grids: hide the WYSIWYG's column-separator <br>s (each is a 27px
   line-box that staircases the float:left .su-columns; content <br>s live inside .su-column-inner). */
.su-row > br {
    display: none;
}


/* ===== BOOK NOW POPUP (#formPop) — QA #18-21 ===== */

/* #18 — "Please call [phone]" link underlines on hover (parent pins it none; mirrors #15). */
#formPop .formPop-desc a:hover {
    text-decoration: underline;
}

/* #19 — "New Patient?" label inline with the Yes/No radios at 18px (parent floats a full-width
   legend + clears the next <p>, stacking them). Shrink the legend, drop the clear, match line-heights. */
#formPop .top fieldset {
    display: flow-root;
}
#formPop .top legend {
    width: auto;
    margin: 0 14px 0 0;
    font-size: 18px;
    line-height: 24px;
}
#formPop .top legend + * {
    clear: none;
    line-height: 24px;
}
#formPop .top .wpcf7-list-item.first {
    margin-left: 0;
}

/* #20 — submit styled like the nav Book Now: square, black fill, white text, lift on hover with NO
   colour shift (kill the framework's brightness filter; white text pinned for no-contrast-color browsers). */
#formPop .formPop-form form input.wpcf7-submit[type="submit"] {
    background-color: var(--black);
    color: var(--white);
    border-radius: 0;
    transition: transform .5s linear, background .5s linear, color .5s linear;
}
#formPop .formPop-form form input.wpcf7-submit[type="submit"]:hover {
    background-color: var(--black);
    color: var(--white);
    filter: none;
    transform: translateY(-5px);
}

/* #21 — hours list 16px / weight 400 (parent renders the day <dt> at 600). */
#formPop .formPop-info .shedule dl dt,
#formPop .formPop-info .shedule dl dd {
    font-size: 16px;
    font-weight: 400;
}


/* ===== BOOKING WIDGET ([sox_booking]) — Wix-parity 4-step flow, on-brand ===== */
/* Scheduler-scoped WCAG-AA colors (ticket #103955828): AA gold 4.57:1, disabled 4.54:1. Site gold stays --darkGold. */
.sox-booking {
    max-width: 720px;
    margin-inline: auto;
    color: var(--black);
    --schedGold: #867444;
    --schedDisabled: #767676;
}
/* Popup instance: 56px top/bottom breathing room, wider 850 form, fixed vertically-centered frame; the page instance sizes to content. */
.formPop-custom {
    padding: min(56px, 10vw) 0;
}
.formPop-custom .sox-booking {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 960px;
    max-width: 850px;
}
.sox-progress {
    color: var(--primaryColor);
    font-weight: 600;
    margin: 0 0 clamp(12px, 1.5vw, 20px);
}
.sox-step-title {
    margin: 0 0 clamp(16px, 2vw, 28px);
}
.sox-avail-note {
    margin: 0 0 clamp(12px, 1.5vw, 20px);
    font-size: 0.875rem;
    opacity: 0.6;
}
.sox-choices {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 16px);
}
/* Patient/service choices = Secondary CTA (white, black text + border); next-step = gold booking-opener. Both lift on hover. */
.sox-choice {
    width: 100%;
    background: var(--white);
    border: 1px solid var(--black);
    border-radius: 0;
    color: var(--black);
    transition: transform .3s ease, background .3s ease, color .3s ease;
}
.sox-choice:hover {
    transform: translateY(-5px);
}
.sox-choice.is-selected {
    background: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--white);
}
/* Primary buttons: black fill + white text (16.3:1); the gold gradient fails AA on white. */
.sox-continue,
.sox-submit {
    background: var(--black);
    border: 0;
    border-radius: 0;
    color: var(--white);
    transition: transform .3s ease, opacity .3s ease;
}
.sox-continue:hover:not([disabled]),
.sox-submit:hover:not([disabled]) {
    transform: translateY(-5px);
}
.sox-week-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.5vw, 16px);
    margin-bottom: clamp(12px, 2vw, 20px);
}
.sox-week-label {
    order: -1;
    flex-basis: 100%;
    text-align: center;
    color: var(--primaryColor);
    font-weight: 600;
}
.sox-week-btn,
.sox-back {
    background: none;
    border: 0;
    color: var(--schedGold);
    font-weight: 600;
    cursor: pointer;
}
.sox-week-btn:hover,
.sox-back:hover {
    color: var(--primaryColor);
}
/* Disabled = solid AA grey, not an opacity fade (the fade drops below contrast). */
.sox-week-btn[disabled] {
    color: var(--schedDisabled);
    cursor: not-allowed;
}
.sox-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
    min-height: 120px;
}
.sox-day-label {
    color: var(--primaryColor);
    font-weight: 600;
    margin: 0 0 8px;
}
.sox-slot {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: clamp(8px, 1vw, 12px);
    background: var(--altBg);
    border: 1px solid var(--schedGold);
    color: var(--black);
    text-align: center;
    line-height: 1.3;
    border-radius: 0;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.sox-slot:hover {
    background: var(--lightGold);
}
.sox-slot.is-selected {
    background: var(--primaryColor);
    border-color: var(--primaryColor);
    color: var(--white);
}
.sox-slot-time {
    display: block;
    font-weight: 600;
    letter-spacing: 0;
}
.sox-slot-prov {
    display: block;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.75;
}
.sox-week-empty {
    grid-column: 1 / -1;
    margin: 0;
    align-self: center;
    text-align: center;
    opacity: 0.6;
}
.sox-fields {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 18px);
}
.sox-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sox-field input {
    width: 100%;
    padding: clamp(10px, 1vw, 14px);
    background: var(--white);
    border: 1px solid var(--schedGold);
    color: var(--black);
}
.sox-policy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: clamp(16px, 2vw, 24px) 0;
    font-size: 0.9375rem;
}
.sox-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.sox-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 20px);
    margin-top: clamp(16px, 2vw, 24px);
}
.sox-continue[disabled],
.sox-submit[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.sox-msg {
    margin-top: 12px;
}
.sox-error,
.sox-none {
    color: var(--primaryColor);
}
/* Availability loader — spinner + text, centered across the slots grid. */
.sox-loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    align-self: center;
}
.sox-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--lightGold);
    border-top-color: var(--primaryColor);
    border-radius: 50%;
    animation: sox-spin 0.7s linear infinite;
}
@keyframes sox-spin {
    to { transform: rotate(360deg); }
}


/* ===== INTERIOR BANNER (Figma 3798:1451) — cream->white gradient, dark breadcrumb + Gloock 48
   title-case heading, photo right, bottom-left round. Desktop-only (mobile keeps the parent treatment). */
@media (min-width: 1025px) {
    .sox-week-label {
        order: 0;
        flex-basis: auto;
        text-align: left;
    }
    body .promo.bar.bar-title {
        background: linear-gradient(to top, var(--altBg), var(--white));
        border-radius: 0 0 0 clamp(40px, 4.17vw, 80px);
    }
    body .promo.bar.bar-title .ban-content {
        background: none;
        width: 50%;
        padding-right: clamp(20px, 7.29vw, 140px);
    }
    /* Int-D1 — hero page-title column fills the width (parent .tWrap 55% = squished); with the 140px
       padding-right above, the title gets 140px both sides (Figma interior hero = 674px @1920). */
    body .promo.bar.bar-title .tWrap {
        width: 100%;
    }
    body .promo.bar.bar-title .ban-image {
        inset: 0 0 0 50%;
    }
    body .promo.bar.bar-title .tWrap h1,
    body .promo.bar.bar-title .tWrap h2 {
        font-family: var(--headingFont);
        font-weight: var(--headingFontWeight);
        font-size: clamp(38px, 2.5vw, 48px);
        line-height: 1.15;
        text-transform: none;
        color: var(--black);
    }
    body .promo.bar.bar-title .breadcrumbs-block,
    body .promo.bar.bar-title .breadcrumbs-block a,
    body .promo.bar.bar-title .breadcrumbs-block span {
        color: var(--black);
    }

    /* Int-D4 — special-offers cards 3 per row (grid replaces the theme's flex, which rendered 4-up +
       1 stretched); !important beats the offers height-equalizer's inline flex. Desktop-only. */
    body.page-template-special-offers .offers-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        align-items: start;
    }
    body.page-template-special-offers .offers-list > li {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* ===== MOBILE (Figma Homepage Mobile 2849:11816) =====
   Hero 280 @390 (71.79vw): script 52px SVG at left 32, 55% overlay + text shadow. Header: phone
   34x34 @32 left, hamburger @32 right, color logo 265; BOOK NOW un-pinned to static so it flows
   under the logo at top-of-page, the sticky bar reclaims it on scroll. */
@media (max-width: 1024px) {
    body .promo.bar.bar-title .row.flex {
        display: flex;
        flex-direction: column-reverse;
        min-height: 0;
    }
    body .promo.bar.bar-title .ban-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: clamp(180px, 61.54vw, 280px);
        overflow: hidden;
    }
    body .promo.bar.bar-title .ban-content {
        position: static;
        width: 100%;
        min-height: 0;
        background: linear-gradient(to top, var(--altBg), var(--white));
        border-radius: 0 0 0 clamp(24px, 10.26vw, 40px);
        padding: clamp(48px, 20.5vw, 80px) min(8.2vw, 32px) min(8.2vw, 32px);
    }
    body .promo.bar.bar-title .breadcrumbs-block {
        display: none;
    }
    /* Int-Mobile #1 — page-title container fills the width (parent .tWrap 55% ≈ 179px scrunches long
       titles); the .ban-content carries the 32px L/R padding. Mirrors Int-D1 @min-1025. */
    body .promo.bar.bar-title .tWrap {
        width: 100%;
    }
    body .promo.bar.bar-title .tWrap h1,
    body .promo.bar.bar-title .tWrap h2 {
        font-family: var(--headingFont);
        font-weight: var(--headingFontWeight);
        font-size: clamp(24px, 7.18vw, 28px);
        line-height: 1.15;
        text-transform: none;
        color: var(--black);
    }
    .home .promo {
        height: 71.79vw;
    }
    .home .promo .vid-promo::before {
        background: rgba(0, 0, 0, 0.25);
    }
    .home .promo .vid-promo .container {
        width: 100%;
    }
    .home .promo .vid-promo .s_content {
        display: block;
    }
    .home .promo .hero-copy {
        left: min(32px, 8.2vw);
        bottom: -4.87vw;
        width: min(85vw, 340px);
        filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.25));
    }
    .mobile-show.moreInfo {
        left: min(32px, 8vw);
    }
    .mobile-show.moreInfo a {
        background: var(--black);
        color: var(--white);
        width: 34px;
        height: 34px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        border-radius: 0;
    }
    #header .booking-opener,
    #header .booking-blank {
        background: var(--black);
        color: var(--white);
    }
    #header .menu-opener {
        right: min(32px, 8vw);
    }
    #header .menu-opener span,
    #header .menu-opener::before,
    #header .menu-opener::after {
        background-color: var(--black);
    }
    /* HP-Mobile #1 — mobile sidebar submenu chevrons: solid #767676 (the theme draws them as a
       #231F20 border-arrow at opacity .4 ≈ #a7a5a6, too faint). Page-name text already renders #231F20. */
    .mm-ocd .mm-spn li::before {
        border-color: #767676;
        opacity: 1;
    }
    #header .mob-logo-section img {
        width: clamp(200px, 68vw, 265px);
        height: auto;
    }
    body:not(.scrolled) #header .mobHd .btn-block.mobile-show {
        position: static;
        transform: none;
        margin: min(32px, 8vw) auto min(48px, 12.31vw);
        width: fit-content;
    }
    body:not(.scrolled) #header .mobHd .btn-block.mobile-show .booking-opener,
    body:not(.scrolled) #header .mobHd .btn-block.mobile-show .booking-blank {
        padding: min(19px, 5vw) min(32px, 8vw);
        font-size: 16px;
        line-height: 1.5;
    }
    body.scrolled .mobile-show.moreInfo {
        top: 11px;
    }
    body.scrolled #header .btn-block.mobile-show {
        transform: none;
    }
    body.scrolled #header .btn-block.mobile-show .booking-opener,
    body.scrolled #header .btn-block.mobile-show .booking-blank {
        top: 11px;
        left: 50%;
        transform: translateX(-50%);
        height: 34px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #sox-news1.half-content {
        background-image: url('images/news1-bg-mobile.svg');
        background-position: top center;
        background-size: 100% auto;
        padding: clamp(24px, 8.2vw, 32px) min(8.2vw, 32px) clamp(64px, 25.6vw, 100px);
    }
    #sox-news1 .container {
        gap: clamp(32px, 12.3vw, 48px);
    }
    #sox-news1 .image {
        width: 100%;
    }
    #sox-news1 .image.nImgLt img {
        width: 100%;
        box-shadow: var(--shadySm);
    }
    /* Autoplay video matches the image's full-width mobile treatment (the parent's :not(.video)
       80% rule needs the .image class, so it misses .autoplay_video). Square + contain + dark bars
       carry over from the base rules. */
    #sox-news1 .autoplay_video {
        width: 100%;
    }
    #sox-news1 .text {
        width: 100%;
        padding: 0;
    }
    #sox-news1 .text h2 {
        font-size: clamp(28px, 8.74vw, 36px);
        margin-bottom: clamp(16px, 5.83vw, 24px);
    }
    #sox-news1 .text p {
        font-size: 16px;
    }
    #sox-news1 .assocLogos {
        margin-top: clamp(32px, 11.65vw, 48px);
    }

    #sox-services.freeForm {
        background-image: url('/wp-content/uploads/2026/09/featured_services_bg_mobile.jpg');
        background-image: -webkit-image-set(url('/wp-content/uploads/2026/09/featured_services_bg_mobile.jpg') 1x, url('/wp-content/uploads/2026/09/featured_services_bg_mobile_2x.jpg') 2x);
        background-image: image-set(url('/wp-content/uploads/2026/09/featured_services_bg_mobile.jpg') 1x, url('/wp-content/uploads/2026/09/featured_services_bg_mobile_2x.jpg') 2x);
        min-height: min(102.56vw, 400px);
        padding: min(8.2vw, 32px) 0;
    }
    #sox-services .container {
        padding-left: min(8.2vw, 32px);
        padding-right: min(8.2vw, 32px);
    }
    #sox-services .svcList {
        gap: min(6.15vw, 24px);
    }
    #sox-services .svcList a {
        font-size: clamp(24px, 6.8vw, 28px);
    }

    body .reviews {
        padding: clamp(48px, 16.4vw, 68px) 0 clamp(64px, 25.6vw, 100px);
    }
    .reviews .heading h2,
    .reviews .heading .h2 {
        font-size: clamp(28px, 8.74vw, 36px);
    }
    .reviews .rQuote > p {
        font-size: 18px;
    }
    .reviews .splide__slide .con-wrap-match,
    .reviews .splide__slide.is-active .con-wrap-match {
        opacity: 1;
        filter: none;
        transform: none;
    }

    #sox-testimonial {
        padding: min(32px, 8.2vw) 0;
    }
    #sox-testimonial .container {
        width: 100%;
        max-width: none;
        padding-left: min(32px, 8.2vw);
        padding-right: min(32px, 8.2vw);
    }
    /* HP-Mobile #3 — 32px between the bottom image and the "View All Cases" button (Figma 5302:3769). */
    #sox-testimonial .tBlock {
        gap: min(32px, 8.2vw);
    }
    #sox-testimonial .tBlock-images {
        flex-direction: column;
        gap: min(16px, 4.1vw);
    }
    #sox-testimonial .tBlock-ba,
    #sox-testimonial .tBlock-video {
        flex: 0 0 auto;
        width: 100%;
    }
    /* Video control buttons scale down on mobile. */
    #sox-testimonial .tBlock-playpause,
    #sox-testimonial .tBlock-sound {
        width: 56px;
        height: 56px;
    }
    #sox-testimonial .tBlock-playpause svg,
    #sox-testimonial .tBlock-sound svg {
        width: 24px;
        height: 24px;
    }

    /* HP-Mobile #4 — special-offers section 100px top & bottom padding (Figma 2849:11822). */
    body .offers {
        padding: clamp(64px, 25.6vw, 100px) 0;
    }
    .offers .heading h2 {
        font-size: clamp(32px, 9vw, 40px);
    }
    /* HP-Mobile #5 — offer-card drop shadow removed on mobile (James); the desktop base already ships
       box-shadow:none, so the mobile card matches it (gold border, no shadow). */
    /* HP-Mobile #6 — zero the theme's .specWrap lift (position:relative; top:-24px) so its own 32px
       padding-top reads as the body->"Learn More" gap (Figma ~32px). */
    body .offers .box-offers .specWrap {
        top: 0;
    }
    .offers .box-offers.center .offers-info p {
        font-size: 14px;
    }
    .offers .splide__slide.is-active .box-holder {
        border-color: var(--darkGold);
    }
    .offers .splide__slide.is-active .specWrap a::after {
        background-color: var(--darkGold);
    }
    body .servBlock .servCard {
        border-radius: 0;
        border-bottom: 0;
    }

    .section-location::after {
        display: none;
    }
    /* HP-Mobile #7 — 100px above (map->text gap) and below (section pad) the text (Figma 5306:3818). */
    .section-location .map-block {
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        flex-direction: column-reverse;
        align-items: stretch;
        gap: clamp(64px, 25.6vw, 100px);
        padding: 0 0 clamp(64px, 25.6vw, 100px);
    }
    .section-location .map-block .address,
    .section-location .map-block .mapWrp {
        width: 100%;
    }
    .section-location .mapWrp #map {
        aspect-ratio: auto;
        height: 91.79vw;
    }
    .section-location .address .address-holder {
        padding: 0 min(32px, 8.2vw);
    }
    /* HP-Mobile map refinement (James) — zero the theme's .bottom-opener margin-bottom:56px !important
       so the gap from the Contact Us button to the section bottom is the intended 100px (#7). */
    body .section-location .address-holder .bottom-opener {
        margin-bottom: 0 !important;
    }

    #sox-news2.half-content,
    #sox-news3.half-content {
        background-image: none;
        background-color: var(--altBg);
        min-height: 0;
    }
    #sox-news2 .container,
    #sox-news3 .container {
        align-items: stretch;
        gap: min(8.2vw, 32px);
    }
    #sox-news3 .container {
        flex-direction: column-reverse;
    }
    #sox-news2.half-content {
        padding: min(8.2vw, 32px) min(8.2vw, 32px) 0;
    }
    #sox-news3.half-content {
        padding: 0 min(8.2vw, 32px) min(8.2vw, 32px);
    }
    #sox-news2.half-content::before,
    #sox-news2.half-content::after,
    #sox-news3.half-content::before,
    #sox-news3.half-content::after {
        display: none;
    }
    #sox-news2 .image,
    #sox-news3 .image {
        width: 100%;
        box-shadow: var(--shadySm);
    }
    /* HP-Mobile #2 — continuous tan swoosh divider between News Blocks 2 & 3 (news-swoosh-mobile.svg).
       The two white cards are one continuous block, so CUT the swoosh OUT of each facing edge
       (mask-composite: exclude) and let the cream section bg show through. news2 = upper half (bottom
       edge), news3 = lower half (top edge), both keyed to the same seam so they join into one ribbon.
       The SVG carries preserveAspectRatio="none" so it stretches full-width at every breakpoint. */
    #sox-news2 .text,
    #sox-news3 .text {
        width: 100%;
        background: var(--white);
        padding: clamp(56px, 12.82vw, 80px) min(8.2vw, 32px);
        -webkit-mask-image: linear-gradient(#000, #000), url('images/news-swoosh-mobile.svg');
        mask-image: linear-gradient(#000, #000), url('images/news-swoosh-mobile.svg');
        -webkit-mask-repeat: no-repeat, no-repeat;
        mask-repeat: no-repeat, no-repeat;
        -webkit-mask-size: 100% 100%, 100% 111px;
        mask-size: 100% 100%, 100% 111px;
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
    }
    #sox-news2 .text {
        position: relative;
        border-radius: 20px 20px 0 0;
        -webkit-mask-position: center, center calc(100% + 55.5px);
        mask-position: center, center calc(100% + 55.5px);
    }
    #sox-news3 .text {
        border-radius: 0 0 20px 20px;
        -webkit-mask-position: center, center -55.5px;
        mask-position: center, center -55.5px;
    }
    #sox-news2 .text h2,
    #sox-news3 .text h2 {
        font-size: clamp(28px, 8.74vw, 36px);
        margin-bottom: min(6.15vw, 24px);
    }
    #sox-news2 .text p,
    #sox-news3 .text p {
        font-size: 16px;
    }

    /* HP-Mobile footer (James) — 80px total from the top of the footer to the logo (was ~50). */
    #footer .footer-holder {
        padding-top: min(80px, 20.51vw);
    }
    #footer .footer-holder .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    #footer .footer-holder .infoNav {
        display: none;
    }
    #footer .footer-holder .foot {
        order: 1;
    }
    /* HP-Mobile #8 — 48px between the footer logo and the links below (match the parent kindling's
       .foot:first-of-type specificity to win). */
    #footer .footer-holder .foot:first-of-type {
        margin-bottom: min(48px, 12.31vw);
    }
    /* HP-Mobile footer (James) — centre the logo <=1024 (the #25 inline-block otherwise sits left in
       the full-width block); make it a centred fit-content block. */
    #footer .footer-holder .foot .footer-logo a {
        display: block;
        width: -moz-fit-content;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    #footer .footer-holder .loc {
        order: 2;
        width: 100%;
        justify-items: center;
    }
    #footer .footer-holder .servNav {
        order: 3;
        width: 100%;
    }
    #footer .footer-holder .servNav .panel {
        display: block;
    }
    #footer .footer-holder .accordion {
        pointer-events: none;
        justify-content: center;
    }
    #footer .footer-holder .mod-btn.accordion::after {
        display: none;
    }
    #footer .serv-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: min(16px, 4.1vw);
        padding: 0;
    }
    #footer .serv-nav li {
        display: flex;
        align-items: center;
        list-style: none;
    }
    #footer .serv-nav li:not(:last-child)::after {
        content: '|';
        margin-left: min(16px, 4.1vw);
        color: rgba(255, 255, 255, 0.5);
    }
    #footer .social {
        justify-content: center;
    }
    #footer #btm .container {
        flex-direction: column-reverse;
        text-align: center;
        gap: min(8px, 2vw);
    }
    #footer #btm .bottom-nav {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ===== BOOK NOW POPUP (#formPop) — HP-Mobile #10-12 ===== */
    /* #10 — move the close "X" to the top-right (parent pins left:14px; zero the left so right wins). */
    #formPop .formPop-close {
        left: auto;
        right: 14px;
    }
    /* #11 — "New Patient?" 16px to match the Yes/No options (desktop #19 sets it 18px). */
    #formPop .top legend {
        font-size: 16px;
    }
    /* #12 — form fields: solid (not the theme's inset) 2px #767676 border, matching the placeholder floor. */
    #formPop .wpcf7-form input:not([type="radio"]):not([type="submit"]),
    #formPop .wpcf7-form textarea {
        border: 2px solid #767676;
    }
    /* #13 — "funky" scroll: parent gives BOTH #formPop and its child .formPop-grid their own scroll
       container (nested scrollers that fight on touch). Make #formPop the sole scroller + contain overscroll. */
    #formPop .formPop-grid {
        max-height: none;
        overflow-y: visible;
    }
    #formPop.wrap-form-question-fixed {
        overscroll-behavior: contain;
    }

    .formPop-custom {
        padding-left: min(6vw, 24px);
        padding-right: min(6vw, 24px);
    }

    /* Int-Mobile (James) — stack the Contact form single-column at <=1024 (parent leaves .row.flex as
       row/nowrap, so the right column overflows off-screen). */
    .conForm .row.flex {
        flex-direction: column;
    }
}