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

/* MMFF fallbacks — kill font-swap CLS; overrides fonttools-computed from the Adobe kit woff2s. */
@font-face {
    font-family: 'the-seasons Fallback';
    src: local('Georgia');
    size-adjust: 101.29%;
    ascent-override: 99.61%;
    descent-override: 29.32%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'avenir-lt-pro Fallback';
    src: local('Arial');
    font-weight: 400 500;   /* cover Medium (500) body emphasis so <strong> gets the MMFF too */
    size-adjust: 102.14%;
    ascent-override: 93.89%;
    descent-override: 28.20%;
    line-gap-override: 0%;
}

:root {
    /* Colors (Figma design system 2222:80). UI primary = sage green; pinks are accents. */
    --primaryColor: #667A74;
    --primaryHover: #1A252D;   /* Primary CTA hovers to Black, not a darker green */
    --secondaryColor: #CCDBCF;
    --secondaryHover: #FFFFFF; /* Secondary CTA: light-green fill -> white on hover */
    --accentPink: #B88C87;
    --accentPinkLight: #EFD1CA;
    --altBg: #F3F1EE;          /* Tan */
    --black: #1A252D;
    --footerBg: #1A252D;       /* provisional — confirm vs homepage frame */

    /* Fonts: Adobe kit suh2auj (web_font_url in Theme Settings) — slugs are the kit's, not the display names.
       H4 intentionally uses the body family (parent binds --headingFont to h1-h3 only). */
    --headingFont: 'the-seasons', 'the-seasons Fallback', Georgia, serif;
    --bodyFont: 'avenir-lt-pro', 'avenir-lt-pro Fallback', Arial, sans-serif;
    --headingFontWeight: 400;

    /* Type scale — caps = Figma desktop, floors = Figma mobile (Homepage Mobile 2849:11816).
       disp + h4 floors still provisional (no Mobile/Display or Mobile/H4 var on that frame). */
    --dispFontSize: clamp(40px, 4.167vw, 80px);
    --h1FontSize:   clamp(38px, 2.813vw, 54px);
    --h2FontSize:   clamp(32px, 2.188vw, 42px);
    --h3FontSize:   clamp(28px, 1.667vw, 32px);
    --h4FontSize:   clamp(20px, 1.25vw, 24px);
    --bodyFontSize: clamp(16px, 0.938vw, 18px);

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

    /* Shadows: Figma has small/medium/large; --shadyMid = "medium" (desktop cards).
       small = 0 20px 30px .05, 0 5px 15px .10 · large = 0 50px 60px .05, 0 30px 40px .10 */
    --shadyMid: 0 40px 50px rgba(0,0,0,0.05), 0 20px 30px rgba(0,0,0,0.10);

    /* Buttons: rounded-10, Overline character style. */
    --btnBorderRadius: 10px;
}

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

/* Body + Caption text = Avenir Light (one step under the 400 default; kit suh2auj now ships 300).
   Headings use the Seasons kit (400-only) so they hold at 400; nav/overline/buttons keep their 500.
   The base handles all inherited copy; the section sheets pin 400 directly on a few caption
   elements (offers/reviews/map) — those get a matched override in their section blocks below. */
body {
    font-weight: 300;
}

/* Bold body emphasis = Avenir 500 (Medium). Avenir LT Pro has no 600 (John's call);
   500 is the kit's heaviest below Heavy. Avoids the browser's faux-bold 700. */
strong,
b {
    font-weight: 500;
}

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


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

/* 24px vertical rhythm: header padding + contact-row -> nav-row gap. */
#header {
    padding: clamp(14px, 1.25vw, 24px) 0;
}
/* Scrolled/hover border-pin state moved to no-rucss-child.css (RUCSS-vulnerable JS class). */
#header .locNavBtns {
    gap: clamp(16px, 1.25vw, 24px);
}

/* Logo — 400x53 at 1920, centered in its slot (safe: duoLogo anchor spans .sLogo). */
#header .logo-block .sLogo {
    height: 104px;
}
#header #logo img#mLogo,
#header #logo img#scLogo {
    width: clamp(210px, 20.8vw, 400px);
}

/* Nav links — Overline: 16 / 500 / 2.4px (uppercase + white via parent). */
#header #mainNav a,
#header #nav a {
    position: relative;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 2.4px;
}

/* Hover underline (Figma "Underline Fill") — reuse the parent's center-grow ::after, green + 2px.
   Kept inside the link box so the opening sub-nav can't cover it. */
#header #nav > li > a::after {
    height: 2px;
    bottom: 6px;
    background: var(--primaryColor);
}
/* Sub-nav dropdowns: no Overline tracking (parent #nav a sets 2.4px — top-level keeps it). */
#header #nav .sub-menu li a {
    letter-spacing: 0;
}
/* Current page's dropdown item: parent highlights it in --secondaryColor (light green) — pin black. */
#header #nav .sub-menu li.current-menu-item > a {
    color: var(--black);
}

/* Contact row: no vertical padding — the gap owns that space. */
#header .conBlock {
    padding-top: 0;
    padding-bottom: 0;
}
/* Contact icons = pink accent; links pinned to 16 (containers stay larger so icons keep size). */
#header .headAdd i,
#header .phoneBlock i,
#header .conBlock i {
    color: var(--accentPinkLight);
}
#header .headAdd a,
#header .phoneBlock a {
    font-size: 16px;
    font-weight: 300;
}

/* BOOK NOW default (solid header — interior + scrolled home) = Primary CTA: dark green / white.
   Over the homepage hero (transparent header) it's the secondary look: light green / navy;
   it flips back to primary once the header goes solid (scroll or hover). Hover -> black in all states. */
#header .booking-opener,
#header .booking-blank {
    background-color: var(--primaryColor);
    color: var(--white);
}
body.home #header .booking-opener,
body.home #header .booking-blank {
    background-color: var(--secondaryColor);
    color: var(--black);
}
/* Scrolled/hover flip + the mmenu drawer branding moved to no-rucss-child.css (JS-added classes). */

#header .booking-opener:hover,
#header .booking-blank:hover,
body.home #header .booking-opener:hover,
body.home #header .booking-blank:hover {
    background-color: var(--primaryHover);
    color: var(--white);
}


/* ===== FOOTER (Figma Desktop/Footer 2988:2237 + Footer Banner 2849:11873) ===== */

/* Footer banner: dark panel, H3 title, secondary CTA. */
.cta.cta-center {
    background-color: var(--footerBg);
    padding: 80px 0;
}
.cta.cta-center h2,
.cta.cta-center .h2,
.cta.cta-center .h3 {
    font-family: var(--headingFont);
    font-size: var(--h3FontSize);
    line-height: var(--h3LineHeight);
    font-weight: var(--headingFontWeight);   /* theme sets 500; Seasons kit is 400-only */
    color: var(--white);
    margin-top: 0;          /* theme adds a ~70px top margin to bare headings */
    margin-bottom: 32px;
}
/* Button: inline-block so the H2's margin-bottom renders as the copy->CTA gap (32px,
   HP-D24/M13); margin-top:0 kills the parent .bottom-opener 56px that inline ignores. */
.cta.cta-center .btn,
.cta.cta-center .booking-opener {
    display: inline-block;
    margin-top: 0;
    background-color: var(--secondaryColor);
    color: var(--black);
}
.cta.cta-center .btn:hover,
.cta.cta-center .booking-opener:hover {
    background-color: var(--secondaryHover);
    color: var(--black);
}

/* Footer proper: 15% white top border, 56px top padding; 40px bottom padding below the
   legal bar (HP-D28 — buffer under the fixed "Pay Over Time" estimator). */
#footer {
    border-top: 2px solid rgba(255,255,255,0.15);
    padding-bottom: 40px;
}
#footer .footer-holder {
    padding-top: clamp(32px, 2.92vw, 56px);
}

/* Column titles = Overline, left-aligned; body-prefixed to outrank the parent's
   higher-specificity per-column rules. */
body #footer .footer-holder .infoNav .h3,
body #footer .footer-holder .servNav .h3,
body #footer .footer-holder .fLocation h3,
body #footer .footer-holder .loc h3 {
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-align: left;
    color: var(--white);
    margin-bottom: 32px;
}
/* Footer links: 24px between each (HP-D27). Zero the parent's 10px vertical <a> padding
   so the visible gap is the 24px margin alone (review menu + address; social keeps its box). */
#footer .footer-holder ul li {
    margin-bottom: 24px;
}
#footer .footer-holder ul li a,
#footer .footer-holder .fAddress a {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 16px;
    font-weight: 400;
}
/* Footer phone (.tel-footer) sits outside .fAddress/ul, so the parent's no-underline
   reset never reached it — it was underlined at rest. Match the address: underline on hover only. */
#footer .tel-footer a {
    text-decoration: none;
}
#footer .tel-footer a:hover {
    text-decoration: underline;
}

/* Contact column: 24px between address/phone/social (HP-D27; parent handles <=1024). */
#footer .loc .fLocBox p {
    margin-bottom: 24px;
}

/* Footer logo — stacked alt, 120px tall per Figma (HP-D26). Match the parent's
   .footer-logo img selector so this beats its width-clamp (was rendering ~170px). */
#footer .footer-holder .footer-logo img {
    width: auto;
    height: 120px;
}

/* Social icons: 32x32 boxes, 24px gap (Figma footer social row). */
#footer .fLocBox .social {
    gap: 24px;
}
#footer .fLocBox .social li {
    margin-bottom: 0;
}
#footer .fLocBox .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 32px;
    text-decoration: none;
}
/* Icons must never underline — the parent's #footer .footer-holder ul a:hover (1,2,2)
   underlines them; the :hover selector here (1,3,1) outranks it. */
#footer .fLocBox .social a:hover {
    text-decoration: none;
}

/* Legal bar: 15% white rule (Figma), 24px pad, Minimum 14. */
body #footer .footer-holder .bottom {
    border-top: 2px solid rgba(255,255,255,0.15);
    padding: clamp(14px, 1.25vw, 24px) 0;
}


/* ===== HERO (Figma Hero Banner 2849:11908) =====
   .home-scoped: the per-section sheet loads after this one, so .promo alone ties and loses. */

/* 940 @ 1920 (48.96vw); parent's ::before overlay recolored to the spec 50% black. */
.home .promo {
    height: min(48.96vw, 940px);
}
.home .promo::before {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Headline is The Seasons sentence case — kill the parent's tracking/uppercase/stroke. */
.home .promo h2.banH {
    letter-spacing: 0;
    text-transform: none;
    -webkit-text-stroke: 0;
}

/* Copy anchors bottom-left, 100px off the bottom at 1920 (both flex levels). */
.home .promo .promo-holder {
    align-items: flex-end;
    padding-bottom: clamp(48px, 5.208vw, 100px);
}
.home .promo .promo-holder .container {
    display: flex;
    align-items: flex-end;
}


/* ===== DIFF BAR (Figma 2871:1586; content = Theme Settings diff_fields, shared with interior) ===== */

/* Tan wash — pure CSS, no image. Homepage renders `section.diff`; interior renders
   the same component as `.widget-diff` (heading is h2 there) — both styled together. */
.diff,
.widget-diff {
    background: linear-gradient(104deg, #F3F1EE 0%, rgba(243, 241, 238, 0.25) 99.5%);
    padding: clamp(80px, 5.21vw, 100px) 0;
}
/* widget theme rules (`.widget.widget-diff`) outrank `.widget-diff` — boost with #main. */
#main .widget-diff {
    padding: clamp(80px, 5.21vw, 100px) 0;
}
.diff .heading h1,
#main .widget-diff .heading h2 {
    font-size: var(--h3FontSize);
    line-height: var(--h3LineHeight);
    font-weight: 400;
    color: var(--black);
    text-align: center;
    text-transform: none;   /* parent uppercases it; Seasons title is sentence case */
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: 56px;
}
.diff .diffImg img,
.widget-diff .diffImg img {
    width: 80px;
    height: 80px;
}
.diff .diffImg,
.widget-diff .diffImg {
    margin-bottom: 32px;
}
/* Zero the theme's 10/14 row padding so the 24px margin is the whole gap between highlights
   (Figma "Practice Highlight" rows have no padding). */
.diff .diffList li,
.widget-diff .diffList li {
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 0;
    margin-bottom: 24px;
}
.diff .diffList li:last-child,
.widget-diff .diffList li:last-child {
    margin-bottom: 0;
}
.diff .diffList li,
.diff .diffList li a,
.widget-diff .diffList li,
.widget-diff .diffList li a {
    font-size: var(--bodyFontSize);
    color: var(--black);
    text-decoration: none;
}
/* a11y: items are links — underline on hover + keyboard focus (no resting underline, per Figma). */
.diff .diffList li a:hover,
.diff .diffList li a:focus-visible,
.widget-diff .diffList li a:hover,
.widget-diff .diffList li a:focus-visible {
    text-decoration: underline;
}
.diff .diffList li i,
.diff .diffList li .fa-check,
.widget-diff .diffList li i,
.widget-diff .diffList li .fa-check {
    color: var(--primaryColor);
}


/* ===== NEWS BLOCKS (Figma Desktop/News Block — H1 copy + square image w/ large shadow) ===== */

/* Padding comes from the parent's --secPadding clamp (80->140) — don't fight it.
   Demo-id trap: the parent sheet special-cases #news1 etc.; Lyon ids are lyon-*. */
body.home .half-content {
    position: relative;
}
.home .half-content h2,
.home .half-content .h2 {
    font-size: var(--h1FontSize);
    line-height: 115%;
    font-weight: 400;
    margin-bottom: 32px;
}
/* fgB-style image rule: image type fills its column (812 @ 1920) — the inner wrapper
   is for content sides; neutralize it on the image side. */
.home .half-content .image > [class*="col-lg-8"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

/* Image fills its column, square, sharp corners, large shadow. float:none: the parent's
   float collapses the picture (playbook trap). */
.home .half-content .image img,
.home .half-content [id*="nImg"] img {
    float: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-shadow: 0 50px 60px rgba(0,0,0,0.05), 0 30px 40px rgba(0,0,0,0.10);
}
/* Botanical flourish bleeding off the left edge behind news block 1 — trimmed slightly from the
   original 536 and anchored to the section bottom (was center-aligned, which left a gap below it). */
#lyon-news1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: min(24vw, 460px);
    height: 100%;
    background: url(images/news_block_graphic.svg) left bottom / contain no-repeat;
    pointer-events: none;
}

/* News 2/3 pastel panels behind; the square image straddles the panel edge.
   News 2 (pink) fades out and overruns into block 3 so the two panels meet with no white gap
   (Figma News Blocks 5213:861); News 3 (green) is a solid full-height panel. */
#lyon-news2::before,
#lyon-news3::before {
    content: '';
    position: absolute;
    top: 0;
    pointer-events: none;
}
#lyon-news2::before {
    right: 0;
    width: 66.4%;
    height: calc(100% + 140px);
    background: linear-gradient(180deg, rgba(239, 209, 202, 0.5) 0%, rgba(239, 209, 202, 0.5) 77%, rgba(239, 209, 202, 0) 100%);
}
#lyon-news3::before {
    left: 0;
    width: 66.6%;
    height: 100%;
    background: var(--secondaryColor);
}
#lyon-news2 .container,
#lyon-news3 .container {
    position: relative;
    z-index: 2;
}


/* ===== REVIEW SCROLLER (Figma 5260:922 — "You're in Good Hands") ===== */

/* Tiled botanical pattern over warm white, dropped to ~25% via a 75% wash of the base color. */
.home .reviews {
    background: linear-gradient(rgba(247, 245, 242, 0.75), rgba(247, 245, 242, 0.75)), url(images/pattern_tile.svg) repeat left top / 220px auto, #F7F5F2;
    padding: clamp(80px, 7.29vw, 140px) 0;
}
/* Heading -> review is 32 (h2 margin). Kill the theme's extra 32 on the .heading wrapper so it isn't doubled. */
.home .reviews .heading {
    margin-bottom: 0;
}
.home .reviews .heading h2 {
    font-size: var(--h1FontSize);
    line-height: 115%;
    font-weight: 400;
    color: var(--black);
    text-align: center;
    margin-bottom: 32px;
}
.home .reviews .rQuote p {
    font-size: var(--bodyFontSize);
    line-height: var(--bodyLineHeight);
    font-weight: 300;
    color: var(--black);
    text-align: center;
}
/* Reviewer: Overline name + 24px Google icon. */
body.home .reviews .attribWrap .tName.h3 {
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--black);
}
.home .reviews .tName img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
/* Scroller controls: sage circles with white arrows; toggle dots hidden at all breakpoints (arrows are enough). */
.home .reviews .splide__arrow {
    background-color: var(--primaryColor);
    opacity: 1;
}
.home .reviews .splide__arrow svg,
.home .reviews .splide__arrow svg path {
    fill: var(--white);
}
.home .reviews .splide__pagination {
    display: none;
}


/* ===== SPECIAL OFFERS (Figma card 2862:15203 — white cards on tan) ===== */

.home .offers {
    background-color: var(--altBg);
    padding: clamp(80px, 7.29vw, 140px) 0;
}
.home .offers .heading h2 {
    font-size: var(--h1FontSize);
    line-height: 115%;
    font-weight: 400;
    color: var(--black);
    text-align: center;
    margin-bottom: 48px;
}
/* Zero the theme's box-offers padding (10 L/R + 25/10 T/B) so the white card fills its slot at
   every breakpoint — otherwise it insets 10px each side, adding 20px to the visible gap. */
.home .offers .box-offers {
    padding: 0;
}
/* Card: white, 40 padding, softened shadow (lighter than the Figma medium per Ali), 10px corners.
   body.home lifts specificity over offers.min's box-holder radius rule so the rounding wins (Int-D3). */
body.home .offers .box-offers .box-holder {
    background-color: var(--white);
    padding: clamp(24px, 2.5vw, 40px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04), 0 6px 14px rgba(0, 0, 0, 0.05);
    border-radius: var(--btnBorderRadius);
}
/* Card shadow (--shadyMid ~80px below) is clipped by Splide's overflow:hidden track.
   Pad the track's clip box top/bottom, negative-margin back so section spacing is unchanged.
   Vertical only — horizontal padding would change Splide's slide-width math. */
.home .offers .splide__track {
    padding-top: 20px;
    padding-bottom: 80px;
    margin-top: -20px;
    margin-bottom: -80px;
}
.home .offers .spcImg img {
    width: 80px;
    height: 80px;
}
/* Title = H4 (Avenir 24), body = Caption 16. */
.home .offers .box-offers .description h4 {
    font-family: var(--bodyFont);
    font-size: var(--h4FontSize);
    line-height: var(--h4LineHeight);
    font-weight: 400;
    color: var(--black);
    letter-spacing: 0;
    text-transform: none;
}
.home .offers .offers-info,
.home .offers .offers-info p {
    font-size: 16px;
    font-weight: 300;
    color: var(--black);
}
/* LEARN MORE = tertiary CTA: Overline + green underline-fill hover (parent animates width).
   text-decoration:none kills the plain browser underline so only the drawn ::after bar shows. */
.home .offers .specWrap a {
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--black);
}
.home .offers .specWrap a::after {
    height: 2px;
    background: var(--primaryColor);
}
/* Offer cards — desktop. 3-up responsive columns capped at the Figma 442px: calc keeps 3 on one
   row at every desktop width (a fixed 442 wrapped the 3rd card below ~1900). !important beats the
   parent's state-dependent li width (.splide.is-initialized:not(.is-active) .offers-list li = 30%,
   specificity 0,5,1). Track un-clipped so the card side-shadows aren't cut off (safe: Splide is
   inactive at >=1025). Cards -> expiration tightened to 32 (theme's .expires margin-top:100 is mobile). */
@media (min-width: 1025px) {
    .home .offers .offers-list li {
        width: calc((100% - 32px) / 3) !important;
        max-width: 442px;
    }
    .home .offers .splide__track {
        overflow: visible;
    }
    .home .offers .expires {
        margin-top: 32px;
    }
}


/* ===== MAP / LOCATION (Figma Desktop/Map Block 2862:15238) ===== */

/* Homepage renders `.section-location`; interior renders the same Map Block as the
   `.loc-widget` widget — both styled together. */
.section-location,
.loc-widget {
    position: relative;
    padding: clamp(80px, 7.29vw, 140px) 0;
}
/* Botanical flourish off the left edge (same treatment as news1). */
.section-location::before,
.loc-widget::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: min(27.9vw, 536px);
    height: 100%;
    background: url(images/map_block_graphic.svg) center bottom / contain no-repeat;
    pointer-events: none;
}
.section-location .map-block,
.loc-widget .map-block {
    position: relative;
    z-index: 2;
    overflow: visible;   /* parent sets overflow:auto here, which clips the map's drop shadow */
}
/* Heading renders as p.h4 — style to H1 spec. */
body .section-location .row-place .h4,
body .loc-widget .row-place .h4 {
    font-family: var(--headingFont);
    font-size: var(--h1FontSize);
    line-height: 115%;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--black);
    margin-bottom: 32px;
}
.section-location .locInfo,
.section-location .locInfo a,
.section-location address,
.section-location address a,
.loc-widget .locInfo,
.loc-widget .locInfo a,
.loc-widget address,
.loc-widget address a {
    font-size: var(--bodyFontSize);
    font-weight: 300;
    color: var(--black);
    font-style: normal;
    text-decoration: none;
}
/* Hours: day/hours as a two-column grid so labels ("Mon-Wed:") never wrap
   (theme pins the dt to a narrow fixed width). Gap 8 per Figma. */
.section-location .shedule dl,
.loc-widget .shedule dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 8px;
}
.section-location .shedule dl dt,
.section-location .shedule dl dd,
.loc-widget .shedule dl dt,
.loc-widget .shedule dl dd {
    width: auto;
    white-space: nowrap;
    font-size: var(--bodyFontSize);
    font-weight: 300;
}
/* Street address renders in an inner .place span that kindling pins to 16px/400 — pull it back to
   the body token + light weight so it matches the phone/hours (the .address a rule only reaches the <a>). */
.section-location .row-location .place span,
.loc-widget .row-location .place span {
    font-size: var(--bodyFontSize);
    font-weight: 300;
}
/* Location icons = pink accent (were sage green). */
.section-location i,
.loc-widget i {
    color: var(--accentPinkLight);
}
/* Map: square, no drop shadow (Ali — removed the Round-1 Figma shadow). !important beats WP Rocket's
   stale cached inline "Used CSS" rule, which a plain none from the deferred sheet can't override. */
.section-location .map-show-canvas-w,
.section-location [class*="map-show"],
.loc-widget .map-show-canvas-w,
.loc-widget [class*="map-show"] {
    aspect-ratio: 1 / 1;
    box-shadow: none !important;
}
/* Map "Contact Us" CTA — hide it on both the homepage section and the interior widget (Ali: remove it). */
.section-location .address a.btn,
.loc-widget .address a.btn {
    display: none;
}


/* ===== MOBILE (Figma Mobile/Nav Bar 2849:11859, Mobile/Header 2912:1610, Mobile/Footer 2849:11817) ===== */

@media (max-width: 1024px) {
    /* Top bar: white with the small shadow from the start (not only once scrolled). */
    #header .header-holder {
        background-color: var(--white);
        box-shadow: 0 20px 30px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.10);
    }
    /* Hamburger: all three bars #1A252D (HP-M2). Middle bar = the span; the top/bottom bars are
       .menu-opener::before/::after, which kindling ships sage green — recolor those too. */
    #header .menu-opener span,
    #header .menu-opener::before,
    #header .menu-opener::after {
        background-color: var(--black);
    }
    /* Logo section: 80px rhythm, stacked color logo 261x88 centered, 40px to the CTA, 80 to the hero. */
    .mob-logo-section {
        padding: min(56px, 13.6vw) 0 0;
        text-align: center;
    }
    #mobLogo img {
        display: block;
        width: 261px;
        height: 88px;
        margin: 0 auto;
    }
    /* Footer: everything centered. */
    body #footer .footer-holder .infoNav .h3,
    body #footer .footer-holder .servNav .h3,
    body #footer .footer-holder .fLocation h3,
    body #footer .footer-holder .loc h3 {
        text-align: center;
    }
    #footer .foot img {
        height: 88px;
    }
    #footer .footer-holder {
        padding-top: min(80px, 19.4vw);
        text-align: center;
    }
    /* Reviews + Offers: 100px vertical rhythm on mobile (down from 140). */
    .home .reviews,
    .home .offers {
        padding: 100px 0;
    }
    /* Review quote stays 18px on mobile (Figma Review Scroller) — the body clamp floors at 16. */
    .home .reviews .rQuote p {
        font-size: 18px;
    }
    /* Arrows overlapped the quote on narrow screens — hide them on mobile. The slider is
       swipeable and auto-advancing and all reviews stay in the DOM, so content stays accessible. */
    .home .reviews .splide__arrows {
        display: none;
    }
    /* Footer banner: 32px title->CTA gap (HP-M13; matches desktop). */
    .cta.cta-center h2,
    .cta.cta-center .h2,
    .cta.cta-center .h3 {
        margin-bottom: 32px;
    }
    /* Center the banner content on mobile (Figma centers the title + CTA). */
    .cta.cta-center,
    .cta.cta-center .container {
        text-align: center;
    }
    /* 32px side gutters on mobile (Figma px-32). Container to 100% so the section
       padding takes effect — base .container is 90vw (viewport-relative). */
    .cta.cta-center {
        padding-left: min(32px, 8vw);
        padding-right: min(32px, 8vw);
    }
    .cta.cta-center .container {
        width: 100%;
    }
    /* Offers: full-bleed container so the slider peeks reach the screen edges
       (overrides the child's min(90vw,1640) cap for this section on mobile). */
    .offers > .container {
        width: 100%;
    }
    /* Cards -> expiration 100px (52 + the pagination row), 24px below the expiration. */
    .home .offers .expires {
        margin-top: 52px;
        margin-bottom: 0;
    }
    .home .offers {
        padding-bottom: 24px;
    }

    /* Location (Figma Mobile/Map Block): no flourish, 32px gutter, pt32/pb80,
       map stacked ABOVE copy with 48px gap, map = square inset (not full-bleed).
       Homepage `.section-location` + interior `.loc-widget`. */
    .section-location::before,
    .loc-widget::before {
        display: none;
    }
    .section-location,
    .loc-widget {
        padding: min(32px, 8vw) min(32px, 8vw) min(80px, 19.4vw);
    }
    /* widget theme rules (`.widget.loc-widget`) outrank `.loc-widget` — boost with #main. */
    #main .loc-widget {
        padding: min(32px, 8vw) min(32px, 8vw) min(80px, 19.4vw);
    }
    .section-location .map-block,
    .loc-widget .map-block {
        flex-direction: column-reverse;
        gap: 48px;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .section-location .address,
    .section-location .mapWrp,
    .loc-widget .address,
    .loc-widget .mapWrp {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* News blocks (Figma Mobile/News Block): 32px gutter, square image + small shadow,
       pt32/pb80, image->copy gap 48 (news1) / 56 (news2/3), copy stack gap 24. */
    #lyon-news1,
    #lyon-news2,
    #lyon-news3 {
        padding: min(32px, 8vw) min(32px, 8vw) min(80px, 19.4vw);
    }
    #lyon-news1 .container,
    #lyon-news2 .container,
    #lyon-news3 .container {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    /* Image + copy both align to the 32px gutter (kill bootstrap col padding/offset). */
    #lyon-news1 .image, #lyon-news2 .image, #lyon-news3 .image,
    #lyon-news1 .nTxt, #lyon-news2 .nTxt, #lyon-news3 .nTxt,
    #lyon-news1 .nTxt > [class*="col-"],
    #lyon-news2 .nTxt > [class*="col-"],
    #lyon-news3 .nTxt > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
    #lyon-news1 .image {
        margin-bottom: 48px;
    }
    #lyon-news2 .image,
    #lyon-news3 .image {
        margin-bottom: 56px;
    }
    .home .half-content h2,
    .home .half-content .h2 {
        margin-bottom: 24px;
    }
    .home .half-content .image img,
    .home .half-content [id*="nImg"] img {
        box-shadow: 0 20px 30px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.10);
    }
    /* news1 flourish stays hidden; news2/3 pastel panels become full-width bottom-anchored
       bands (news2 pink gradient fading down, news3 solid light green). */
    #lyon-news1::before {
        display: none;
    }
    #lyon-news2::before,
    #lyon-news3::before {
        display: block;
        left: 0;
        right: 0;
        width: 100%;
        top: auto;
        bottom: 0;
        height: 78%;
    }
    #lyon-news2::before {
        background: linear-gradient(180deg, rgba(239,209,202,0.5) 0%, rgba(239,209,202,0) 100%);
    }
    #lyon-news3::before {
        background: var(--secondaryColor);
    }

    /* Interactive Text (Figma Mobile/Interactive Text Block 5270:1135):
       the desktop side-gradient leaves the right half of the links unreadable —
       swap to a flat 65% overlay; links drop to 32px. id beats the section sheet. */
    #lyon-featured {
        min-height: 480px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Flat 65% overlay on mobile (desktop side-gradient leaves the right half of
       the links unreadable at this width) — intentional. */
    #lyon-featured .itxBg::after {
        background: rgba(0, 0, 0, 0.65);
    }
    #lyon-featured .itxList a,
    #lyon-featured .itxList span {
        font-size: 32px;
    }
    /* No hover on touch, so links show at full white (design resting = 65% is a
       hover-reveal state that never lifts on mobile). */
    #lyon-featured .itxList a,
    #lyon-featured .itxList li {
        opacity: 1;
    }

    /* Diff bar: Figma Mobile/Differentiator Bar rotates the tan wash to 157deg
       (desktop is 104deg — near-horizontal on this tall box; portrait needs the
       steeper top->bottom diagonal) and holds solid tan to 50% before fading. */
    .diff,
    .widget-diff {
        background: linear-gradient(170deg, #F3F1EE 50.05%, rgba(243, 241, 238, 0.25) 100%);
    }
    /* flex-col, uniform 48px gap between the three blocks (Figma). High specificity to
       beat the per-section sheet's row-gap 42 / col-gap 34. */
    body.home .diff .row.flex,
    body #main .widget-diff .row.flex {
        gap: 48px;
    }
    .diff .diffBox,
    .widget-diff .diffBox {
        margin-bottom: 0;
    }
    .diff .heading h1,
    .widget-diff .heading h2 {
        margin-bottom: 48px;
    }

    /* Hero: bare image band, 240 @ 390 (61.54vw); no copy on mobile. */
    .home .promo {
        height: 61.54vw;
        padding-top: 0;
    }
    .home .promo .slide_content {
        display: none;
    }

    /* Review links: accordion forced open; inline row with pipe separators, 16px (HP-M16). */
    #footer .servNav .panel,
    #footer .infoNav .panel {
        display: block;
        max-height: none;
    }
    #footer .servNav ul,
    #footer .infoNav ul {
        display: flex;
        justify-content: center;
        gap: 24px;
    }
    #footer .servNav ul li,
    #footer .infoNav ul li {
        display: inline-flex;
        align-items: center;
        margin-bottom: 0;
        width: auto;
    }
    /* No accordion chevron in the design. */
    body #footer .footer-holder .servNav button.mod-btn.accordion::after,
    body #footer .footer-holder .infoNav button.mod-btn.accordion::after {
        display: none;
    }
    #footer .servNav ul li a,
    #footer .infoNav ul li a {
        font-size: 16px;
    }
    #footer .servNav ul li:not(:last-child)::after,
    #footer .infoNav ul li:not(:last-child)::after {
        content: '|';
        color: var(--white);
        margin-left: 24px;
    }
    #footer .footer-holder .foot img {
        height: 88px;
        width: auto;
    }
    /* Footer column order = Figma Mobile/Footer: logo -> Contact (addr/phone/social)
       -> Review links. Flex the column container + uniform 48px gap (Main Footer
       gap-48); hide the empty/unassigned infoNav so it leaves no gap slot. */
    #footer .footer-holder .container {
        display: flex;
        flex-direction: column;
        gap: 48px;
    }
    #footer .footer-holder .infoNav {
        display: none;
    }
    #footer .footer-holder .foot { order: 0; }
    #footer .footer-holder .loc { order: 1; }
    #footer .footer-holder .servNav { order: 2; }
    /* Zero the theme's stubborn ~20px column margins so the 48px flex gap is the
       sole spacing (that margin is unlocatable in readable sheets → !important). */
    #footer .footer-holder .container > [class*="col-"] {
        margin-bottom: 0 !important;
    }
    /* Legal bar (Figma): centered, 32px gutters, copyright above the link row,
       24px between them. */
    body #footer .footer-holder .bottom {
        padding-left: min(32px, 8vw);
        padding-right: min(32px, 8vw);
    }
    #footer .bottom .container {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 24px;
        width: 100%;
    }
    #footer .bottom .copyright,
    #footer .bottom .bottom-nav {
        width: 100%;
        margin: 0;
        text-align: center;
    }
    /* Link row: wrap + center. Pipe spacing is handled by the ::after margin
       (not flex gap) so it's equal on both sides. */
    #footer .bottom .bottom-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        column-gap: 0;
        row-gap: 4px;
    }
    #footer .bottom .bottom-nav li::after {
        margin: 0 8px;
    }
    /* The 4 links wrap 2-per-line on mobile; the line-ending items are the evens,
       so hiding their pipe kills the dangling separator (-> "1 | 2" / "3 | 4").
       Content-dependent on the 4-item menu; revisit if the menu changes. */
    #footer .bottom .bottom-nav li:nth-child(even)::after {
        content: none !important;
    }

    /* ===== INTERIOR HERO (Figma Mobile/Interior Hero Banner 3798:1471) =====
       Base banner is col-6/col-6 with the row display:block and the image absolute.
       Restack into a flex column: full-width image band (240) on top, tan title panel
       below (pt80/pb32/px32, Seasons 38). #main + !important to beat the theme's
       interior-banner layout rules (row block, image absolute). */
    #main .promo.bar-title {
        height: auto;
    }
    #main .promo.bar-title .row.flex {
        display: flex !important;
        flex-direction: column !important;
    }
    #main .promo.bar-title .ban-image {
        position: static !important;
        order: -1;
        width: 100%;
        max-width: 100%;
        height: 240px !important;
    }
    #main .promo.bar-title .ban-image .pImg,
    #main .promo.bar-title .ban-image .pImg picture,
    #main .promo.bar-title .ban-image .pImg img {
        width: 100%;
        height: 240px;
        object-fit: cover;
    }
    #main .promo.bar-title .ban-content {
        width: 100%;
        max-width: 100%;
        min-height: 0 !important;
        background: var(--altBg) !important;
        padding: min(80px, 19.4vw) min(32px, 8vw) min(32px, 8vw) !important;
    }
    #main .promo.bar-title .ban-content .tWrap h1 {
        font-family: var(--headingFont);
        font-size: 38px;
        line-height: 1.15;
        font-weight: 400;
        color: var(--black);
        text-transform: none;
        letter-spacing: 0;
        padding-bottom: 0.15em;   /* Seasons descenders overflow the 1.15 line box — give them clearance */
    }
    /* Figma mobile interior hero shows the title only. */
    #main .promo.bar-title .breadcrumbs-block {
        display: none;
    }

    /* Interior content-loop images: clear the editor float (alignleft/alignright) on
       mobile so they stack instead of wrapping text (Figma stacks them full-width). */
    #main #content img {
        float: none;
    }

    /* Special Offer promo card (Figma 2849:11759): green, py56/px32, gap16, centered
       white text, Seasons 28 title + Avenir 16 body, small shadow, sharp corners. */
    #main #content .page-offer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: min(56px, 13.6vw) min(32px, 8vw);
        border-radius: 0;
        text-align: center;
        background: var(--primaryColor);
        box-shadow: 0 20px 30px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.10);
    }
    #main #content .page-offer h2 {
        font-family: var(--headingFont);
        font-size: 28px;
        line-height: 1.25;
        font-weight: 400;
        color: var(--white);
        margin: 0;
        text-transform: none;
    }
    #main #content .page-offer p {
        font-size: 16px;
        line-height: 1.5;
        color: var(--white);
        margin: 0;
    }
    /* stray broken sandbox image (sandra-1.jpg) — not in the Figma card. */
    #main #content .page-offer p:has(img) {
        display: none;
    }
}
#footer .bottom,
#footer .bottom a,
#footer .bottom .copyright {
    font-size: 14px;
    font-weight: 400;
}


/* ===== INTERIOR HERO — DESKTOP (Figma Desktop/Interior Hero Banner 3798:1451) =====
   Full-bleed split: LEFT half = solid tan panel (breadcrumbs top + title bottom,
   black text, pl140/pr146/pt32/pb56); RIGHT half = image. Base theme renders a
   full-bleed image with a dark 90deg gradient overlay + white text — override.
   #main + !important to beat the stubborn theme interior-banner rules. */
@media (min-width: 1025px) {
    #main .promo.bar-title {
        height: min(29.17vw, 560px);
        background: var(--altBg);
    }
    #main .promo.bar-title .container {
        width: 100%;
        max-width: none;
        padding: 0;
    }
    #main .promo.bar-title .row.flex {
        height: 100%;
    }
    #main .promo.bar-title .ban-content {
        position: relative;
        z-index: 2;
        width: 50%;
        height: 100%;
        background: var(--altBg) !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 32px min(7.6vw, 146px) 56px min(7.29vw, 140px);
    }
    #main .promo.bar-title .ban-image {
        position: absolute;
        left: 50%;
        top: 0;
        width: 50%;
        height: 100%;
    }
    #main .promo.bar-title .ban-image .pImg,
    #main .promo.bar-title .ban-image .pImg picture,
    #main .promo.bar-title .ban-image .pImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* breadcrumbs: black on tan, Avenir 14 (base is white for the dark overlay).
       order:-1 → breadcrumbs top, title bottom (DOM is title-first). */
    #main .promo.bar-title .breadcrumbs-block {
        order: -1;
    }
    #main .promo.bar-title .breadcrumbs-block,
    #main .promo.bar-title .breadcrumbs-block a,
    #main .promo.bar-title .breadcrumbs-block span {
        color: var(--black) !important;
        font-size: 14px;
    }
    /* title: Seasons 54, black, sentence case, bottom-aligned. */
    #main .promo.bar-title .tWrap h1 {
        font-family: var(--headingFont);
        font-size: var(--h1FontSize);
        line-height: 1.15;
        font-weight: 400;
        color: var(--black) !important;
        text-transform: none;
        letter-spacing: 0;
        padding-bottom: 0.15em;   /* Seasons descenders overflow the 1.15 line box (~3-4px) — clear the panel clip */
    }

    /* Special Offer promo card — DESKTOP (Figma 2849:11810, 1088×272): px56/py80,
       gap24, Seasons 32, medium shadow, text max-width 812. */
    #main #content .page-offer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: clamp(48px, 4.17vw, 80px) clamp(32px, 2.92vw, 56px);
        border-radius: 0;
        text-align: center;
        background: var(--primaryColor);
        box-shadow: 0 40px 50px rgba(0,0,0,0.05), 0 20px 30px rgba(0,0,0,0.10);
    }
    #main #content .page-offer h2 {
        font-family: var(--headingFont);
        font-size: 32px;
        line-height: 1.25;
        font-weight: 400;
        color: var(--white);
        margin: 0;
        text-transform: none;
    }
    #main #content .page-offer p {
        font-size: 16px;
        line-height: 1.5;
        color: var(--white);
        margin: 0;
        max-width: 812px;
    }
    #main #content .page-offer p:has(img) {
        display: none;
    }
}


/* ===== ESA POLICY PAGE (Figma ESA Policy Page 5276:2120) =====
   FWF flexible sections: fw_content_half + freeform Item Tags + card_block 2-up +
   content full-width copy. Hero/map/footer banner reuse the interior widgets above.
   No dedicated ESA mobile frame — mobile derived from interior conventions. */

/* Item Tags (novel): green pill chips, #CCDBCF check-circle + navy check + label (Int-D7; Figma Item Tag 5279:3251 / Check Mark 5279:3253). */
#esa-tags {
    background: var(--altBg);
    text-align: center;
}
/* freeform per-section sheet flexes the col into a row — stack it. */
#esa-tags .col-lg-12 {
    display: block;
}
#esa-tags .itemTags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
#esa-tags .itemTags li {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: min(16px, 4vw) min(32px, 8vw) min(16px, 4vw) min(16px, 4vw);
    background: var(--primaryColor);
    border-radius: 80px;
    color: var(--white);
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: 1.5;
    white-space: nowrap;
    text-align: left;
}
#esa-tags .itemTags li::before {
    content: '';
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%20fill='none'%3E%3Crect%20width='32'%20height='32'%20rx='16'%20fill='%23CCDBCF'/%3E%3Cpath%20d='M24.2895%209L26%2010.6289L13.1034%2023L11.3929%2021.3711L24.2895%209Z'%20fill='%231A252D'/%3E%3Cpath%20d='M6%2016.2353L7.70427%2014.6005L14.1762%2020.7635L12.4719%2022.3983L6%2016.2353Z'%20fill='%231A252D'/%3E%3C/svg%3E") no-repeat center / 32px 32px;
}

/* Full-width copy: navy band, centered white (Figma 5279:3460). */
#esa-copy {
    background: var(--black);
    color: var(--white);
    text-align: center;
}
#esa-copy h2,
#esa-copy p {
    color: var(--white);
}

/* 2-card row: card 1 light-green / card 2 light-pink, centered, flat (Figma 5279:3315). */
/* Section background is white behind the tinted cards (Int-D8; Figma 5279:3315). */
body.page-id-17559 .cardBlock {
    background-color: var(--white);
}
body.page-id-17559 .cardBlock .cbCard .cWrap {
    padding: clamp(24px, 3.5vw, 40px);
    min-height: 352px;
    border-radius: 0;
    border-bottom: 0;               /* theme ships a green demo accent border */
    box-shadow: none;
    text-align: left;
}
/* card body bullet list (Figma list-disc); theme reset strips list markers. */
body.page-id-17559 .cardBlock .beta-match ul {
    list-style: disc;
    margin: 0;
    padding-left: min(20px, 5vw);
}
body.page-id-17559 .cardBlock .beta-match li {
    margin-bottom: 0;
    text-align: left;
}
body.page-id-17559 .cardBlock .beta-match p {
    margin-bottom: 12px;
}
body.page-id-17559 .cardBlock .cbCard:nth-child(1) .cWrap {
    background: var(--secondaryColor);
}
body.page-id-17559 .cardBlock .cbCard:nth-child(2) .cWrap {
    background: var(--accentPinkLight);
}
body.page-id-17559 .cardBlock h3 {
    font-family: var(--headingFont);
    font-size: var(--h3FontSize);
    line-height: var(--h3LineHeight);
    font-weight: 400;
    color: var(--black);
    letter-spacing: 0;
    text-transform: none;
    margin-top: 0;          /* theme adds a ~70px top margin to bare headings */
    margin-bottom: 16px;
}
body.page-id-17559 .cardBlock .beta-match,
body.page-id-17559 .cardBlock .beta-match p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}
/* Placeholder cards carry no link — hide the empty CTA slot (remove if links added). */
body.page-id-17559 .cardBlock .cLnkWrp {
    display: none;
}

/* ESA DESKTOP (>=1025) */
@media (min-width: 1025px) {
    /* fw_content_half: image LEFT 398x560 + 154 gap + copy 536, content col 1088. */
    #esa-fwch {
        padding: clamp(80px, 7.29vw, 140px) 0;
    }
    #esa-fwch .container {
        max-width: 1088px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: 154px;
    }
    #esa-fwch .col-lg-5.image {
        flex: 0 0 398px;
        width: 398px;
        max-width: 398px;
        margin: 0;
        padding: 0;
    }
    #esa-fwch .image img {
        display: block;
        width: 398px;
        height: 560px;
        object-fit: cover;
        box-shadow: 0 50px 60px rgba(0,0,0,0.05), 0 30px 40px rgba(0,0,0,0.10);   /* Figma Drop shadow (large) */
    }
    #esa-fwch .col-lg-7.text {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
    }
    #esa-fwch .col-lg-7.text > [class*="col-lg-10"] {
        width: 100%;
        max-width: 536px;
        margin: 0;
        padding: 0;
    }
    #esa-fwch h2 {
        font-family: var(--headingFont);
        font-size: var(--h2FontSize);
        line-height: var(--headingLineHeight);
        font-weight: 400;
        color: var(--black);
        margin-bottom: 40px;
    }
    #esa-fwch .col-lg-7.text p {
        font-size: var(--bodyFontSize);
        line-height: var(--bodyLineHeight);
        color: var(--black);
    }

    /* Item Tags block + full-width copy: content col 1282, py 140. */
    #esa-tags,
    #esa-copy {
        padding: clamp(80px, 7.29vw, 140px) 0;
    }
    #esa-tags .col-lg-12,
    #esa-copy .col-lg-12 {
        max-width: 1282px;
        margin: 0 auto;
    }
    #esa-tags h2,
    #esa-copy h2 {
        font-family: var(--headingFont);
        font-size: var(--h2FontSize);
        line-height: var(--headingLineHeight);
        font-weight: 400;
        margin-bottom: 40px;
    }
    #esa-tags h2 {
        color: var(--black);
    }
    #esa-tags > .container > .col-lg-12 > p {
        font-size: var(--bodyFontSize);
        line-height: var(--bodyLineHeight);
        color: var(--black);
    }
    #esa-tags .itemTags {
        margin: 56px 0;
    }
    #esa-copy p {
        font-size: var(--bodyFontSize);
        line-height: var(--bodyLineHeight);
    }

    /* 2-card row: 2x536 + 16 gap, centered in 1088; py 140. */
    body.page-id-17559 .cardBlock {
        padding: clamp(80px, 7.29vw, 140px) 0;
    }
    body.page-id-17559 .cardBlock .flex-row {
        width: 100%;
        max-width: 1088px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
    body.page-id-17559 .cardBlock .cbCard {
        flex: 0 0 536px;
        width: 536px;
        max-width: 536px;
        margin: 0;
        padding: 0;
    }
}

/* ESA MOBILE (<=1024): stacked, 32px gutters, type floors. No ESA mobile frame — verify. */
@media (max-width: 1024px) {
    #esa-fwch,
    #esa-tags,
    #esa-copy,
    body.page-id-17559 .cardBlock {
        padding-top: min(80px, 19.4vw);
        padding-bottom: min(80px, 19.4vw);
    }
    #esa-fwch .container,
    #esa-tags .container,
    #esa-copy .container,
    body.page-id-17559 .cardBlock .container {
        width: 100%;
        padding-left: min(32px, 8vw);
        padding-right: min(32px, 8vw);
    }

    /* fwch: image stacks above copy, full width. */
    #esa-fwch .container {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
    #esa-fwch .col-lg-5.image,
    #esa-fwch .col-lg-7.text,
    #esa-fwch .col-lg-7.text > [class*="col-lg-10"] {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    #esa-fwch .image img {
        display: block;
        width: 100%;
        height: auto;
        box-shadow: 0 20px 30px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.10);   /* small shadow on mobile */
    }
    #esa-fwch h2 {
        font-family: var(--headingFont);
        font-size: 32px;
        line-height: var(--headingLineHeight);
        font-weight: 400;
        color: var(--black);
        margin-bottom: 24px;
    }
    #esa-fwch .col-lg-7.text p,
    #esa-tags .col-lg-12 > p,
    #esa-copy p {
        font-size: 16px;
        line-height: var(--bodyLineHeight);
    }

    /* tags + copy: centered headings, H2 floor 32. */
    #esa-tags h2,
    #esa-copy h2 {
        font-family: var(--headingFont);
        font-size: 32px;
        line-height: var(--headingLineHeight);
        font-weight: 400;
        margin-bottom: 24px;
    }
    #esa-tags h2 {
        color: var(--black);
    }
    #esa-tags .itemTags {
        margin: 32px 0;
    }
    /* long labels wrap inside the pill (nowrap overflows at ~390-412). */
    #esa-tags .itemTags li {
        white-space: normal;
        max-width: 100%;
    }

    /* cards stack full-width, H3 floor 28. */
    body.page-id-17559 .cardBlock .flex-row {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    body.page-id-17559 .cardBlock .cbCard {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    body.page-id-17559 .cardBlock h3 {
        font-size: 28px;
    }
}


/* ===== SPECIAL OFFERS PAGE (/new-patients/special-offers/, page-id-15656) — brand the offer cards =====
   Homepage offer treatment is `.home`-scoped; the offers-list here fell back to demo
   finish (#111 text, weight-500 title, plain Learn More). No Figma — mirror the brand.
   Cards match the homepage: 10px corners + softened shadow (Int-D3/D10). Section bg -> white (Int-D9).
   page-id scope lifts specificity over offers.min's box-holder radius/shadow rules. */
body.page-id-15656 .main-frame {
    background-color: var(--white);
}
body.page-id-15656 .offers-list .box-offers .box-holder {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.04), 0 6px 14px rgba(0, 0, 0, 0.05);
    border-radius: var(--btnBorderRadius);
}
/* Offer title is a <span class="h4"> (inline) — its margin-bottom was ignored, so the
   title->body gap collapsed on card 3 and on mobile. Make it block (mt:0 kills the theme's
   bare-heading top margin) so the 16px gap renders on every card + breakpoint, matching the
   homepage <h4> (Int-D10 spacing). */
body.page-id-15656 .offers-list .description .h4 {
    display: block;
    margin-top: 0;
    margin-bottom: 16px;
}
body .offers-list .box-holder,
body .offers-list .offers-info,
body .offers-list .offers-info p {
    color: var(--black);
}
/* Offer title = H4 Avenir 24 / 400 / sentence case (Lyon offer card). */
.offers-list .description .h4,
.offers-list .description .h4 a {
    font-family: var(--bodyFont);
    font-size: var(--h4FontSize);
    line-height: var(--h4LineHeight);
    font-weight: 400;
    color: var(--black);
    letter-spacing: 0;
    text-transform: none;
}
/* Learn More = tertiary CTA: Overline + green underline-fill hover (parent animates width). */
.offers-list .specWrap a {
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--black);
}
.offers-list .specWrap a::after {
    height: 2px;
    background: var(--primaryColor);
}
/* Match the homepage card WIDTH + spacing (Int-D10). interior_style caps #content at
   min(95%,1088px) — too narrow for 3x442 — so fill the container and mirror the homepage li
   width, zeroed box-offers padding, and 16px title->body gap. Desktop only; mobile stays stacked. */
@media (min-width: 1025px) {
    body.page-id-15656 .main-frame .container #content {
        width: 100%;
    }
    body.page-id-15656 .offers-list > li {
        width: calc((100% - 32px) / 3);
        max-width: 442px;
    }
    body.page-id-15656 .offers-list .box-offers {
        padding: 0;
    }
}


/* ===== OUR SERVICES PAGE (/our-services/) — service-category cards (Int-D5) =====
   Flat cards (no shadow); title = Avenir 24 (was the-seasons 32). span.h3 is inline so block it
   for the 24px title->list gap. :not(.home) + the extra class outrank the interior-headings rule
   (body:not(.home) .entry.entry-add .h3, 0,4,1) that otherwise pins content .h3 to the H3 token.
   Also kill interior_style's mobile-only (<=1024) `.servCard, :nth-of-type(4), (5), (6)` rule that
   adds a clamp(40px,4.17vw,80px) 0 asymmetric radius + a 2px bottom border: the :nth-of-type parts
   (0,3,0) beat a plain (0,2,1) child selector, so scope with body:not(.home) (0,3,1). Cards stay
   square + borderless at every breakpoint, matching desktop (James). */
body:not(.home) .servBlock .servCard {
    box-shadow: none;
    border-radius: 0;
    border-bottom: none;
}
body:not(.home) .servBlock .servCard span.h3 {
    display: block;
    font-family: var(--bodyFont);
    font-size: var(--h4FontSize);
    line-height: var(--h4LineHeight);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 24px;
}


/* ===== INTERIOR CONTENT HEADINGS =====
   interior_style ships a stray .entry.entry-add h3 at h2 scale (clamp 24/2.29vw/44) — it renders
   LARGER than the h2. Pin content h3 to the Figma H3 token (32 desktop / 28 floor, line-height 1.25)
   so it's smaller than the 42px h2. */
body:not(.home) .entry.entry-add h3,
body:not(.home) .entry.entry-add .h3 {
    font-size: var(--h3FontSize);
    line-height: var(--h3LineHeight);
}


/* ===== INTERIOR CONTENT IMAGES (Int-D2) =====
   interior_style defaults .entry img to clamp(40px,4.17vw,80px) = 80px (too extreme — e.g. the
   Meet-the-Doctor aligncenter photo); only .align* images picked up the 10px --cardBorderRad.
   Make every interior content image uniform at 10px. */
body:not(.home) .entry img {
    border-radius: var(--btnBorderRadius);
}


/* ===== MEET OUR DOCTOR PAGE (/about-us/meet-our-doctor/, page-id-17589) =====
   Doctor h2 should top-align with the photo (su-row: photo 1/3 | text 2/3). Two things
   pushed it down: a stray empty leading <p> (16px bottom-margin) and the theme's ~80px
   bare-heading top margin (the h2 isn't su-u-trim's first-child because of that empty <p>).
   Drop the empty <p> and zero the h2 margin. (The empty <p> is an editor artifact — safe to
   also delete it in the page content.) */
body.page-id-17589 #content .su-column-inner > p:empty {
    display: none;
}
body.page-id-17589 #content .su-column h2 {
    margin-top: 0;
}


/* ===== FAQ ACCORDION (section.faq — Cosmetic / Emergency / Implants / Root Canals) =====
   Matchbox ships this section's markup + toggle JS (general.js toggles .active on .accordion
   and .show on .answer.panel) but NO CSS, so it renders as raw browser buttons with every
   answer open. Ported from the FG standard (Park Ridge child), recolored to Lyon tokens.
   No section bg — it sits on the white content bg above; the card shadow separates the items. */
section.faq {
    padding: clamp(64px, 7.29vw, 120px) 0;
}
.faq .heading h2 {
    font-family: var(--headingFont);
    font-size: var(--h2FontSize);
    line-height: var(--headingLineHeight);
    font-weight: 400;
    color: var(--black);
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: clamp(32px, 3vw, 56px);
}
.faq .faq-item {
    margin: clamp(24px, 1.875vw, 36px) 0;
    background: var(--white);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.faq .faq-item .question.accordion {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 1.25vw, 22px) clamp(56px, 4.17vw, 80px);
    background: var(--white);
    color: var(--black);
    border: 0;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.faq .faq-item .question.accordion .h4 {
    margin: 0;
    font-family: var(--bodyFont);
    font-weight: 500;
    font-size: var(--h4FontSize);
    line-height: var(--h4LineHeight);
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    color: inherit;
    pointer-events: none;
}
.faq .faq-item .question.accordion::after {
    content: '\f067';
    position: absolute;
    right: clamp(16px, 1.25vw, 24px);
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Font Awesome 5 Free', fantasy;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    color: var(--primaryColor);
}
.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;
}
.faq .faq-item .answer.panel p:last-child {
    margin-bottom: 0;
}
.faq .faq-item .answer.panel li {
    margin-bottom: 10px;
}
/* Mobile: left-align the question + toggle (centered reads awkward on narrow screens). */
@media (max-width: 1024px) {
    .faq .faq-item .question.accordion {
        justify-content: flex-start;
        padding-right: 52px;
    }
    .faq .faq-item .question.accordion .h4 {
        text-align: left;
    }
}


/* ===== CONTACT PAGE (/contact-us/) ===== */
/* Heading: Seasons 400 (theme sets 500 on the 400-only kit); kill the ~70px bare-heading margin. */
.conForm .heading h2 {
    font-family: var(--headingFont);
    font-weight: var(--headingFontWeight);
    margin-top: 0;
}
/* CF7 submit = footer-banner CTA (secondary): light-green fill, black text, hover white. */
.conForm input[type="submit"],
.conForm .wpcf7-submit {
    background-color: var(--secondaryColor);
    color: var(--black);
    border: none;
    font-family: var(--bodyFont);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    padding: min(16px, 4vw) min(32px, 8vw);
    border-radius: var(--btnBorderRadius);
}
/* Int-D12: white on hover (not dark green). interior_style's
   `.formWrap input[type="submit"].btn-orange:hover` (0,4,1) forces --primaryColor;
   body + .wpcf7-submit (0,4,2) outranks it. */
body .conForm input[type="submit"].wpcf7-submit:hover {
    background-color: var(--secondaryHover);
    color: var(--black);
}
/* New Patient? row: the legend rendered ~293px wide (text is ~144px), shoving Yes/No far right,
   and the group sat at the top of its column instead of lining up with the Full Name input on
   the same row. Pack the legend to content-width with Yes/No 16px beside it, and vertically
   centre the group in its column so it aligns with the Full Name input (desktop; columns stack
   on mobile). */
.conForm .row.flex > .top.col-lg-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.conForm .flexWrap {
    gap: 16px;
    justify-content: flex-start;
}
.conForm .flexWrap legend {
    width: auto;
    flex: 0 0 auto;
    margin-bottom: 0;
}
/* CF7 validation box ("the yellow box"): the default dark text was unreadable on the navy
   section. White text (keep CF7's yellow error border), rounded to match the inputs. */
.conForm .wpcf7-response-output {
    color: var(--white);
    border-radius: var(--btnBorderRadius);
}

/* Book Now popup submit: white text — kindling's contrast-color(--primaryColor) picks
   black on the sage-green fill (marginally higher contrast, but off-brand). Match the
   kindling nested selector's specificity (#formPop .formPop-form form input[submit]). */
body #formPop .formPop-form form input[type="submit"],
body #formPop .formPop-form form .wpcf7-submit {
    color: var(--white);
}
/* HP-D32: keep the submit #667A74 on hover — kill kindling's :hover brightness(0.92). */
body #formPop .formPop-form form input[type="submit"]:hover,
body #formPop .formPop-form form .wpcf7-submit:hover {
    filter: none;
}

/* ===== BOOK NOW POPUP (#formPop) — HP-D30/D31/D33 (mobile sizes in the max-width:1024 block) ===== */
#formPop .contactHead {
    font-size: 32px;
}
/* "New Patient?" inline with Yes/No: a <legend> is a special fieldset-rendered box that
   ignores flex/float, so position it absolutely and reserve room on the radio <p>
   (fixed "New Patient?" label ~107px at 18px -> 123px reserve incl. gap). */
#formPop .top fieldset {
    position: relative;
}
#formPop .top fieldset legend {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 27px;
}
#formPop .top fieldset > p {
    margin: 0;
    padding-left: 123px;
}
#formPop .formPop-info .shedule dl dt,
#formPop .formPop-info .shedule dl dd {
    font-size: 16px;
}

/* ===== FORM FIELDS (sitewide CF7 — contact form + Book Now popup) =====
   Were raw browser defaults (2px inset). White fill reads on both the navy contact
   section and the white popup panel; subtle border, radius matches the CTAs. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 textarea {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--white);
    border: 1px solid #767676;
    border-radius: var(--btnBorderRadius);
    padding: min(14px, 3.7vw) min(16px, 4vw);
    font-family: var(--bodyFont);
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 textarea:focus {
    outline: none;
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 2px rgba(102, 122, 116, 0.25);
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #767676;
    opacity: 1;
}

/* Contact form stacks single-column at <=1024. The form grid uses Bootstrap col-lg-6
   (switches to 2-col at lg=992), but the site's breakpoint is 1024 — so 992-1024 was stuck
   in a cramped 2-col layout that overflowed. Stack the rows to match the phone layout. */
@media (max-width: 1024px) {
    .conForm .row.flex {
        flex-direction: column;
    }
    .conForm .row.flex > [class*="col-lg-"] {
        width: 100%;
        max-width: 100%;
    }
    /* Book Now popup mobile — HP-M17/M18/M19. */
    #formPop .contactHead {
        font-size: 28px;
    }
    #formPop .top fieldset legend {
        font-size: 16px;
        line-height: 24px;
    }
    #formPop .top fieldset > p {
        padding-left: 105px;
    }
    #formPop .formPop-close {
        left: auto;
        right: 14px;
    }
    #formPop .formPop-info {
        padding-bottom: 80px;
    }
}

/* Book Now popup — DESKTOP scroll (>=1025). Desktop had overflow:hidden + a viewport
   height cap (Lity) but no scroll, so a form taller than the viewport (validation
   errors) was clipped and unreachable. Scroll the grid within the capped frame; the
   close button stays pinned to #formPop (outside the grid). Mobile already scrolls via
   the max-width:1024 rule. */
@media (min-width: 1025px) {
    #formPop.wrap-form-question-fixed {
        max-height: 100vh;
    }
    #formPop .formPop-grid {
        max-height: 100vh;
        overflow-y: auto;
    }

    /* Nav flyouts: parent #nav ul is 240px — service names wrap to 2-3 lines. Widen so the
       longest Our Services item ("Periodontal Treatment", 253px) fits on one line. A couple of
       extra-long labels in other menus (Emotional Support Animal Policy) may still wrap. */
    #header #nav ul {
        width: 280px;
    }
}

/* Accordion: clicks on a trigger's inner label must reach the .accordion button —
   parent general.js delegation checks e.target (fixed in trunk 36e2e25; applies on
   Lyon's next build). Fallback so it works before then. */
.accordion > * { pointer-events: none; }