/*
Theme Name: EquinoxeV2
Author: code-lion.com
Version: 1.0
Requires at least: 6.0
Text Domain: equinoxev2
*/

/* The Contact section's 100vw full-bleed breakout (see .eq-contact-wrap) is 1px or so
   wider than the visible viewport whenever a vertical scrollbar is present, since `vw`
   ignores scrollbar width while the page's own layout doesn't — without this, that
   mismatch shows up as a permanent horizontal scrollbar on the whole page. */
html { overflow-x: clip; }

body {
    background-color: var(--wp--preset--color--cream, #FDFCFA);
}

/* safe-area: viewport-fit=cover (see inc/setup.php) lets page content extend into the
   notch/Dynamic Island area on iOS instead of the browser reserving that space itself —
   reserve it back by default so every ordinary page keeps rendering exactly like it did
   before, then cancel it specifically for the homepage's fixed header + full-bleed video
   (see the @media (max-width:900px) hero block) where bleeding under the notch is the
   actual point. Other pages with .eq-hero (e.g. /plus/) keep a normal in-flow header on
   mobile, not this fixed-transparent-over-video treatment — the full-bleed ambient b-roll
   look is homepage-only by design, so this stays scoped to its two page IDs (EN/FR) rather
   than to ".eq-hero" generically. */
body { padding-top: env(safe-area-inset-top); }
body:is(.page-id-10322, .page-id-11172) { padding-top: 0; }

/*
    POLYLANG LANGUAGE SWITCHER 
*/
.widget_polylang {
    order: 0;
    background-color: #26b7fe;
    padding: 0.667em;
    border-radius: 10px;
}
.widget_polylang ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.widget_polylang a {
    color: #ffffff;
    font-weight: bold;
}


/* 
    NAVIGATION 
*/
.wp-block-navigation-item__content {
    white-space: nowrap;
}
.wp-block-navigation__responsive-dialog {
    margin-left: 1rem;
}
.assessment-button {
    white-space: nowrap;
}

/* 
   Responsive menu
   - menu order
   - override navigation default breakpoint
   - hide assessment button on smaller devices
*/
.header-navigation {
    order: 1;
}
@media (min-width: 1360px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
    }
    .header-navigation {
        order: 0;
    }
    .widget_polylang {
        order: 1;
    }
}
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}
@media (max-width: 600px) {
    /* The open mobile menu scrolls internally (overflow-y: auto), but its last item
       (Family Caregiver Guide, after Reach Us) still landed right at the container's own
       bottom edge — which sits under the sticky .footer-mobile Contact/Call Us bar
       (~80px measured, but the true last item still clipped ~7px short of clearing it at
       max scroll — rounding/line-height slop, not worth chasing exactly, so the padding
       carries a real margin past the bar's measured height instead of matching it exactly).
       Padding the scrollable area itself, not the dialog, so the last item can scroll
       clear of the bar instead of stopping flush against it.
       Specificity note: core's own style.min.css sets the shorthand `padding` (which also
       covers the bottom edge) via
       .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
       — 3 classes' worth of specificity. .header-navigation.wp-block-navigation (both
       already on the same nav element) + the container + is-menu-open brings this to 4,
       so it wins outright instead of depending on stylesheet load order. */
    .header-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
        padding-bottom: calc(110px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }
}
/* ---- Mega menu ----
   WP core's Navigation block already opens submenus on hover/click (the
   .open-on-hover-click class it adds) and renders each wp:navigation-link's `label`
   attribute as raw inner HTML inside .wp-block-navigation-item__label — so the icon +
   title + description markup for every mega-menu item lives directly in that label
   string in post content (single source of truth), not in separate theme markup. This
   also means mobile's accordion automatically gets the same icons/descriptions for free.
   The one thing core has no slot for is the right-hand feature photo, so that's added as
   an extra wp:html block inside each wp:navigation-submenu and placed via grid-column. */
.header-navigation .wp-block-navigation-item__content {
    /* Variant 2: 600 still read as bold sitting alone in a plain white bar with
       nothing heavier around it to justify the weight (unlike a headline, which
       earns boldness by contrast with body copy next to it) — closer to Hermès'
       own top nav (FEMME, HOMME, MAROQUINERIE...), which is plain regular weight,
       not semi-bold. Nested dropdown items are unaffected (their own, more specific
       400-weight rule further down already matches this exactly). */
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}
.header-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content {
    padding-block: 0.4rem;
    position: relative;
}
.header-navigation > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--wp--preset--color--terracotta);
    transition: right 0.2s ease;
}
.header-navigation > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.header-navigation > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after {
    right: 0;
}
/* The weight now lives on hover/current instead of sitting there permanently — same
   600 the dropdown's own item titles use, so resting state stays quiet (regular) and
   only picks up emphasis on the item the visitor is actually pointing at or already
   on. */
.header-navigation > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.header-navigation > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
    font-weight: 600;
}
@media (min-width: 1360px) {
    .header-navigation .wp-block-navigation__submenu-icon {
        transition: transform 0.2s ease;
    }
    .header-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
        transform: rotate(180deg);
    }
    /* Specificity note: core's block-library CSS sets this element's display/width via
       .wp-block-navigation .has-child .wp-block-navigation__submenu-container — 3 classes.
       .header-navigation alone (2 classes with the container) loses that fight silently
       (no error, it just never applies). Matching the .header-navigation.wp-block-navigation
       compound (both classes already live on the same nav element) + .has-child brings this
       to 4 classes, which wins outright instead of leaving it to load-order luck. */
    /* top sits flush at 100% (no gap) on purpose: hover-open here is driven by the LI
       staying :hover'd (or JS mouseenter/leave mirroring it) across trigger + panel, and
       an actual gap between them is dead space that belongs to neither element — crossing
       it (anything less than a perfectly fast, perfectly straight cursor path) drops
       :hover and the panel closes before the cursor arrives. The same visual breathing
       room is recreated as padding-top instead, which is still inside the panel's own
       hoverable box. */
    .header-navigation.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        display: grid;
        /* Feature column widened from 220px (was a thumbnail, easy to miss) to 300px —
           the photo is now the panel's main visual anchor since icons are gone on desktop
           (see .mega-item__icon below); text columns shrink from 230px to 200px to make
           room without forcing the panel wider than the max-width bump can absorb. */
        grid-template-columns: repeat(2, minmax(200px, 1fr)) 300px;
        grid-auto-rows: min-content;
        align-items: stretch;
        gap: 0.15rem 2rem;
        width: max-content;
        max-width: min(90vw, 800px);
        padding: 2.25rem 1.5rem 1.5rem;
        border: none;
        border-radius: 18px;
        box-shadow: 0 24px 60px -20px rgba(30, 33, 38, 0.28);
        background: #fff;
        top: 100%;
        left: 0;
        right: auto;
    }
    /* "Reach Us" sits near the right edge of the nav bar — a ~700px-wide panel anchored
       to its left edge (the default) overflows past the viewport. :last-of-type doesn't
       help here (it counts by tag among ALL top-level <li> siblings, and "Family
       Caregiver Guide" — a plain link, not a submenu — is the actual last <li>), so this
       is opted in explicitly via a class on the submenu block instead of a structural
       selector. */
    .header-navigation.wp-block-navigation .mega-panel--align-right .wp-block-navigation__submenu-container {
        left: auto;
        right: 0;
    }
    /* .mega-panel__feature's `grid-row: 1 / -1` only spans the row(s) that exist at
       the moment the grid engine places EXPLICITLY-positioned items — which happens
       before the auto-placed nav-link items below it get to add their own implicit
       rows. With only `grid-auto-rows` (no row count fixed), that leaves `-1` resolving
       to "row 2" the instant the container has just one row, so the photo silently
       stops after row 1 and a later item (whichever nav-link overflows the two text
       columns) drifts into the empty column-3 cells beside it instead of behind it.
       Naming the real row count per submenu via `grid-template-rows` fixes it outright:
       an EXPLICIT grid gives `-1` a stable last line no auto-placed item can move.
       (5 links -> 3 rows, 7 links -> 4 rows, 2 links -> 1 row; update the count here
       if a submenu's link list grows or shrinks.) */
    .header-navigation.wp-block-navigation .mega-panel--rows-3 .wp-block-navigation__submenu-container {
        grid-template-rows: repeat(3, min-content);
    }
    .header-navigation.wp-block-navigation .mega-panel--rows-4 .wp-block-navigation__submenu-container {
        grid-template-rows: repeat(4, min-content);
    }
    .header-navigation.wp-block-navigation .mega-panel--rows-1 .wp-block-navigation__submenu-container {
        grid-template-rows: repeat(1, min-content);
    }
    .header-navigation.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding: 0.65rem 0.75rem;
        border-radius: 10px;
        font-weight: 400;
        letter-spacing: normal;
        white-space: normal;
        text-transform: none;
    }
    .header-navigation.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
        display: none;
    }
    .header-navigation.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
        background: var(--wp--preset--color--sky-tint);
    }
    .header-navigation.wp-block-navigation .wp-block-navigation-item__label {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .mega-item__body {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }
    .mega-item__title {
        font-weight: 600;
        color: var(--wp--preset--color--ink);
        font-size: 0.95rem;
    }
    .mega-item__desc {
        font-size: 0.8rem;
        color: #77746F;
        line-height: 1.35;
    }
    /* Home Care Services' feature photo is wrapped in <a class="mega-panel__feature-link">
       (site's most important menu — the image now doubles as a CTA into Our Services);
       Who We Are and Reach Us keep the bare, non-linked .mega-panel__feature div. Both
       need the same grid placement since either one can be the container's direct child.
       (Shared, breakpoint-independent look — radius, image, caption — lives below this
       media query so mobile's accordion renders the exact same card, just stacked instead
       of gridded; only the grid placement and the "stretch to the row" sizing stay here.) */
    .mega-panel__feature-link,
    .mega-panel__feature {
        grid-column: 3;
        grid-row: 1 / -1;
    }
    .mega-panel__feature {
        min-height: 100%;
    }
}
@media (max-width: 1359px) {
    /* Mobile/tablet accordion now mirrors desktop: same photo card, same no-icon text
       list — only the layout changes, from a 3-column grid to a plain stacked column. */
    .assessment-button { display: none; }
    /* The Gutenberg plugin's own navigation/style.min.css (loaded on this site instead
       of — or alongside — wp-includes' copy) sets
       `.wp-block-navigation__responsive-container.is-menu-open:where(...)
       .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
       ...__container, ...page-list { align-items: var(--navigation-layout-justification-
       setting, initial) }`, which resolves to `flex-start` here — a real rule, not the
       "normal" default, and a `:where()`-free selector already worth 4 classes (0,4,0)
       of specificity, since `:where()` itself scores zero. `flex-start` means every
       level of the open mobile accordion (the shared container, each has-child <li>)
       SHRINKS to the width of its own widest line of text instead of filling the
       drawer, so the photo's `width: 100%` two rules below resolved against a different
       number per submenu (~355px for Home Care Services' shorter link labels vs ~412px
       for Who We Are's longer ones) — the photo was never shrinking on its own, it was
       100% of an accidentally-narrower box. Each selector below adds one more real,
       stable class already present on that exact element (see the DOM, not invented)
       to clear that specificity outright rather than tie it. */
    .header-navigation.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        align-items: stretch;
    }
    .header-navigation.wp-block-navigation.wp-block-navigation__container.is-responsive.no-wrap {
        align-items: stretch;
    }
    .header-navigation.wp-block-navigation .has-child.wp-block-navigation-submenu.open-on-hover-click,
    .header-navigation.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        align-items: stretch;
    }
    .wp-block-navigation-item__label {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
    }
    /* Desktop already lightens a dropdown item's title away from the 700 weight meant
       for the section header above it ("Who We Are" 700 vs "Our Mission" 600) — see
       the desktop-only `.wp-block-navigation-item__content { font-weight: 400 }` +
       `.mega-item__title { font-weight: 600 }` pair in the 1360px+ media query. Mobile
       never got the same pair, so every link title fell back to the global 700 meant
       only for the top-level label — flattening the hierarchy into one uniform bold
       block, and DESIGN.md never uses 700 outside the all-caps Label role anyway. */
    .header-navigation.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        font-weight: 400;
    }
    .mega-item__title {
        font-weight: 600;
    }
    .mega-item__desc {
        display: block;
        font-size: 0.8rem;
        font-weight: 400;
        color: #77746F;
        margin-top: 0.1rem;
    }
    /* The feature card is the submenu-container's last child either way (bare div, or
       the <a> wrapping it for Home Care Services) — this margin is what used to be the
       grid's own row gap on desktop; stacked layout needs it added explicitly instead. */
    .header-navigation.wp-block-navigation .has-child .wp-block-navigation__submenu-container > *:last-child {
        margin-top: 1rem;
    }
    /* No grid row to stretch to here, so the photo needs its own ratio instead of
       min-height: 100% (desktop's version, see the 1360px+ media query above). */
    .mega-panel__feature-link,
    .mega-panel__feature {
        aspect-ratio: 16 / 10;
    }
}
/* Icons are hidden everywhere (desktop AND mobile) — a bare stroke glyph next to text
   reads as generic dashboard chrome, not "quiet luxury health care" (see DESIGN.md's
   Icon Circles component, which this menu never adopted). The .mega-icon--* mask-image
   rules below are consequently unused; left in place rather than deleted with the
   markup that still references them, in case icons come back for a future revision. */
.mega-item__icon {
    display: none;
}
/* Feature card look, shared by both breakpoints (grid placement/sizing is the only
   part that differs — see the two media queries above). */
.mega-panel__feature-link {
    display: flex;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
.mega-panel__feature {
    position: relative;
    /* One Broken Corner (DESIGN.md Shapes): three corners quietly rounded, one
       exaggerated — ties this photo back to the hero/testimonial photo frames instead
       of the plain uniform radius every other UI rectangle uses. */
    border-radius: 14px 14px 34px 14px;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: flex-end;
}
.mega-panel__feature img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.16, 0.8, 0.24, 1);
}
.mega-panel__feature-link:hover .mega-panel__feature img {
    transform: scale(1.045);
}
@media (prefers-reduced-motion: reduce) {
    .mega-panel__feature-link:hover .mega-panel__feature img {
        transform: none;
    }
}
.mega-panel__feature-caption {
    position: relative;
    z-index: 1;
    padding: 0.9rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(30,33,38,0) 0%, rgba(30,33,38,0.75) 100%);
    width: 100%;
}
.mega-panel__feature-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
}
.mega-panel__feature-title {
    display: block;
    font-family: var(--wp--preset--font-family--fraunces);
    font-size: 1.05rem;
    line-height: 1.3;
    margin-top: 0.2rem;
}

/* mega-menu icons: mask-image data-URIs (SVG in inline HTML content gets stripped
   by wp_kses when WordPress core renders navigation-link labels, so the icons live here
   as CSS-only mask icons on an empty span instead, keyed by a per-item class). */
.mega-icon--mission {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%220.6%22%20fill%3D%22black%22%20stroke%3D%22none%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%220.6%22%20fill%3D%22black%22%20stroke%3D%22none%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--advantage {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5l2.9%206.3%206.9.6-5.2%204.6%201.6%206.8L12%2017.3l-6.2%203.5%201.6-6.8-5.2-4.6%206.9-.6z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5l2.9%206.3%206.9.6-5.2%204.6%201.6%206.8L12%2017.3l-6.2%203.5%201.6-6.8-5.2-4.6%206.9-.6z%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--team {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.2%22/%3E%3Cpath%20d%3D%22M2.5%2020.5c0-3.4%202.9-6%206.5-6s6.5%202.6%206.5%206%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%229%22%20r%3D%222.4%22/%3E%3Cpath%20d%3D%22M15.7%2014.3c2.7.5%204.8%202.6%204.8%206.2%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.2%22/%3E%3Cpath%20d%3D%22M2.5%2020.5c0-3.4%202.9-6%206.5-6s6.5%202.6%206.5%206%22/%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%229%22%20r%3D%222.4%22/%3E%3Cpath%20d%3D%22M15.7%2014.3c2.7.5%204.8%202.6%204.8%206.2%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--partners {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%2212%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%2212%22%20r%3D%225%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%2212%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%2212%22%20r%3D%225%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--media {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M7%208.5h10M7%2012h10M7%2015.5h6%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M7%208.5h10M7%2012h10M7%2015.5h6%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--postop {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%208.6a4%204%200%200%200-6.8-3l-1%201-1-1a4%204%200%200%200-6.8%203c0%205.4%207.8%209.4%207.8%209.4s7.8-4%207.8-9.4z%22/%3E%3Cpath%20d%3D%22M7.5%2012h2l1.2-2.2%202%204%201.2-1.8h2.6%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%208.6a4%204%200%200%200-6.8-3l-1%201-1-1a4%204%200%200%200-6.8%203c0%205.4%207.8%209.4%207.8%209.4s7.8-4%207.8-9.4z%22/%3E%3Cpath%20d%3D%22M7.5%2012h2l1.2-2.2%202%204%201.2-1.8h2.6%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--chronic {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h4l2-7%204%2014%202-7h6%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012h4l2-7%204%2014%202-7h6%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--safety {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204.5-3%208-7%209-4-1-7-4.5-7-9V6z%22/%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204.5-3%208-7%209-4-1-7-4.5-7-9V6z%22/%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--comfort {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%208.6a4%204%200%200%200-6.8-3l-1%201-1-1a4%204%200%200%200-6.8%203c0%205.4%207.8%209.4%207.8%209.4s7.8-4%207.8-9.4z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%208.6a4%204%200%200%200-6.8-3l-1%201-1-1a4%204%200%200%200-6.8%203c0%205.4%207.8%209.4%207.8%209.4s7.8-4%207.8-9.4z%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--senior {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M2%2021c0-4%203.1-7%207-7%22/%3E%3Cpath%20d%3D%22M15.5%2011.5l2%202%204-4%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M2%2021c0-4%203.1-7%207-7%22/%3E%3Cpath%20d%3D%22M15.5%2011.5l2%202%204-4%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--additional {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%208v8M8%2012h8%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M12%208v8M8%2012h8%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--contact {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%207l9%206%209-6%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M3%207l9%206%209-6%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--careers {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%207V5a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22/%3E%3Cpath%20d%3D%22M3%2013h18%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M8%207V5a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22/%3E%3Cpath%20d%3D%22M3%2013h18%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--allservices {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}

.mega-icon--process {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.6%2017.6l3.8-5.6M13.6%2010.6l3.8-4.6%22/%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2219%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%225%22%20r%3D%222%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.6%2017.6l3.8-5.6M13.6%2010.6l3.8-4.6%22/%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2219%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22/%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%225%22%20r%3D%222%22/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    display: inline-block;
}


/* EMBED YOUTUBE VIDEOS */
.wp-embed-responsive iframe {
    border-radius: 10px;
}

/*
    CONTACT PATTERN
*/
.contact-div {
    justify-content: space-around;
}

/* IMG RESPONSIVE */
.img-responsive-50 {
    width: 50%;
}


/*
    CIRCLE ICONS - LIFECAREPLUS
*/
.circle-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: grid;
    place-items: center;	
}

/*
    BREADCRUMBS
*/
.yoast-breadcrumbs a {
    color: var(--wp--preset--color--terracotta);
}
.yoast-breadcrumbs a:hover {
    color: var(--wp--preset--color--ink);
}


/*
    HEADER/FOOTER TRANSLATION
*/
body.lang-fr .template-en { 
    display: none;
}
body.lang-fr .template-fr { 
    margin-top: 0;
}
body.lang-en .template-fr {
    display: none;
}

/* 
    HOMEPAGE
*/
.phone-button a{
    background: transparent;
    border: none;
    border-bottom: 2px solid #26b7fe;
}
.contact-btn a:hover{
    background: transparent !important;
    color: #26b7fe !important;
    border: 2px solid #26b7fe;
    border-radius: 10px;
}

.homepage-grid {
    max-width: calc(3 * 25rem + 2 * var(--wp--preset--spacing--50));
    margin-inline: auto;
}

.google-review {
    display: flex;
    align-items: center;
}
.google-review img {
    margin: 0 0.5em 0 0.5em;
}

.picture-video {
    cursor:pointer;
}
.picture-video img{
    width: 100%;
}
.video-container {
    position:relative;
    width:100%;
    padding-bottom:56.25%;
    height:0;
    display:none;
}

/* Homepage title dynamic scrolling */
h1.title-homepage {
    font-size: var(--wp--preset--font-size--xx-large) ;
    line-height: 1.2em;
    overflow:hidden;
    animation: 2.5s linear infinite;
}
.scrolling-texts {
    display: inline-block;
    position: relative;
    height: 1.2em;
    overflow: hidden;
    vertical-align: top;
    color: #26b7fe;
}
.scrolling-texts span {
    line-height: 1.2em;
    height: 1.2em;
}
.scrolling-texts > div {
    display: flex;
    flex-direction: column;
    animation: textscroll 12.5s infinite;
}
@-webkit-keyframes textscroll {
    0%, 20%   { -webkit-transform: translateY(0); transform: translateY(0); }
    25%, 45%  { -webkit-transform: translateY(-1.2em); transform: translateY(-1.2em); }
    50%, 70%  { -webkit-transform: translateY(-2.4em); transform: translateY(-2.4em); }
    75%, 95%  { -webkit-transform: translateY(-3.6em); transform: translateY(-3.6em); }
    100%      { -webkit-transform: translateY(-4.8em); transform: translateY(-4.8em); }
}
@keyframes textscroll {
    0%, 20%   { -webkit-transform: translateY(0); transform: translateY(0); }
    25%, 45%  { -webkit-transform: translateY(-1.2em); transform: translateY(-1.2em); }
    50%, 70%  { -webkit-transform: translateY(-2.4em); transform: translateY(-2.4em); }
    75%, 95%  { -webkit-transform: translateY(-3.6em); transform: translateY(-3.6em); }
    100%      { -webkit-transform: translateY(-4.8em); transform: translateY(-4.8em); }
}

/* Homepage partners logos scroll */
@-webkit-keyframes logoscroll {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(-290px * 19));
                transform: translateX(calc(-290px * 19));
    }
}

@keyframes logoscroll {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(calc(-290px * 19));
                transform: translateX(calc(-290px * 19));
    }
}
.slider {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

.slider .slide-track {
    -webkit-animation: none;
            animation: none;
    display: flex;
    width: max-content;
}
/* Was a fixed 250px slot (leftover from the old animated marquee below, disabled via
   animation:none) — with every logo now capped to the same max-width/max-height box (see
   .eq-partners-wrap .slide img), that fixed slot just added a lot of dead air around
   narrower logos. width:auto lets each slide hug its own logo, same as .slide--tight
   already did, so the two are now equivalent — kept both classes so the markup didn't
   need touching. */
.slider .slide {
    width: auto;
    padding: 0 20px;
}
.slider .slide--tight {
    width: auto;
}

/* ---- Partners: quiet heading, neutral logos, edge fade ---- */
.eq-partners-wrap .wp-block-heading {
    font-family: var(--wp--preset--font-family--fraunces) !important;
    font-weight: 380 !important;
    font-optical-sizing: none;
    font-variation-settings: "opsz" 18;
    letter-spacing: -0.01em;
    line-height: 1.08;
    text-transform: none;
    font-size: clamp(2rem, 1.7rem + 1.4vw, 2.85rem) !important;
    color: var(--wp--preset--color--ink) !important;
    margin-bottom: 2.5rem;
}
.eq-partners-wrap .slider {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.eq-partners-wrap .slider::-webkit-scrollbar {
    display: none;
}
/* A shared cap for every logo instead of trusting each upload's own width/height attrs:
   partner logos come in wildly different intrinsic aspect ratios (the ISO badge is a tight
   412x412 square, McGill's crest+wordmark is a wide 1280x318 lockup), so the old per-image
   height:100px;width:auto sizing let McGill blow out to ~400px wide next to ISO's ~90px —
   nothing was actually distorted, they just had no common box to agree on.
   max-width/max-height (not a fixed width/height) on purpose: a fixed box forces every logo
   to the same width, so a narrow/square logo like ISO ends up with dead transparent padding
   baked inside its own box, which read as uneven gaps between logos once every slide was
   also tightened to width:auto above. Capping instead of fixing lets each logo shrink to
   whichever of the two limits it actually hits and keep its own tight natural footprint —
   object-fit:contain is just the safety net for the one upload (UQAM) with an inline
   object-fit:cover already set. A new logo dropped into the slider gets the same treatment
   automatically, no per-image rule needed. */
.eq-partners-wrap .slide img {
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 70px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: grayscale(1) opacity(0.5);
    transition: filter 0.3s ease;
}
.eq-partners-wrap .slide:hover img { filter: grayscale(0) opacity(1); }

/* ---- Partners page: static full-color logo wall ----
   Same max-width/max-height + object-fit:contain cap as the homepage's scrolling teaser
   strip (.eq-partners-wrap .slide img — see that rule's own comment for why a fixed box
   beats letting each upload's own width/height attrs decide), but wrapping instead of
   scrolling, and kept full color rather than grayscale: this is the dedicated page making
   the case for each partnership, not a quiet background flourish. */
.eq-partners-section__card { background: #fff; border: 1px solid var(--wp--preset--color--hairline); border-radius: 22px; padding: clamp(2rem, 4vw, 3rem); }
.eq-partner-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.25rem 3rem; }
.eq-partner-grid img { width: auto !important; height: auto !important; max-width: 160px; max-height: 72px; object-fit: contain; }

/* Partners slider nav arrows (injected by partners-slider.js, shown only when scrollable) */
.eq-slider-nav-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}
.eq-slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--wp--preset--color--hairline);
    border-radius: 50%;
    background: var(--wp--preset--color--background-secondary);
    color: var(--wp--preset--color--ink);
    box-shadow: 0 4px 14px rgba(30, 33, 38, 0.1);
    cursor: pointer;
    transform: translateY(-50%);
    opacity: 1;
    transition: opacity 0.25s ease, transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.eq-slider-arrow svg {
    width: 18px;
    height: 18px;
}
.eq-slider-arrow:hover {
    background: var(--wp--preset--color--ink);
    color: #fff;
    box-shadow: 0 6px 18px rgba(30, 33, 38, 0.18);
}
.eq-slider-arrow:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}
.eq-slider-arrow.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.9);
}
.eq-slider-arrow--prev { left: -8px; }
.eq-slider-arrow--next { right: -8px; }
@media (max-width: 600px) {
    .eq-slider-arrow { width: 36px; height: 36px; }
    .eq-slider-arrow--prev { left: -4px; }
    .eq-slider-arrow--next { right: -4px; }
}

/* MOBILE FOOTER */
.footer-mobile{
    display: none;
}

@media (max-width: 600px) {
    .footer-mobile{
        display: block;
        position: sticky;
        bottom: 0;
        width: 100%;
        /* No z-index here meant this sticky bar had only the default stacking level (auto),
           while in-page content like .eq-standard__frame sets z-index:1 — enough to paint
           the photo's rectangle over the bar wherever they overlapped on scroll, leaving only
           slivers of blue visible past the photo's rounded corners. Match the fixed header's
           z-index so both persistent chrome layers reliably stay above page content. */
        z-index: 100;
        /* viewport-fit=cover (inc/setup.php) makes the bottom safe area available to page
           content on every page, not just where it's wanted — without this, an iPhone's home
           indicator gesture bar would sit right on top of (or under) Contact/Call Us on any
           page, not just the hero. Padding rather than shifting the sticky "bottom: 0" box
           itself, so its own background still reaches the true screen edge with no gap. */
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
    }
    .phone-button, .contact-btn{
        display: none !important;
    }
    .mobile-contact-btn a{
        padding-right: 30px !important;
    }
    /* Call Us / Contact ship blue from the "Pages" wp_template's own block markup (a
       shared FSE template, not this page's content — editing it in place would mean
       hand-patching serialized block JSON across every language variant). Overriding here
       instead: same fix, applies everywhere the template is used, no template surgery.
       Both buttons already carry flex-basis:100%/flex-shrink:1 in a nowrap row, which does
       shrink them to fit one line — flex: 1 1 0 replaces that shrink-to-fit behavior with a
       direct, deliberate 50/50 split so the one-line layout doesn't depend on the shrink
       math still resolving the same way if the row's available width or padding changes. */
    .footer-mobile .wp-block-button__link { background-color: var(--wp--preset--color--ink); }
    .footer-mobile .wp-block-buttons .wp-block-button { flex: 1 1 0; width: auto; }
    /* Visual-only swap (CSS order, not a template edit — same "shared FSE template" reason
       as the color override above): Call Us moves to the right, the natural thumb-rest zone
       for a one-handed right-hand grip; Contact (.mobile-contact-btn) takes the left slot. */
    .footer-mobile .wp-block-buttons .wp-block-button:not(.mobile-contact-btn) { order: 2; }
    .footer-mobile .wp-block-buttons .wp-block-button.mobile-contact-btn { order: 1; }
}

/*
    SINGLE POST
*/
:root :where(.wp-block-group) {
    color: #3E3E3E;
}
.wp-block-post-title {
    color: #3E3E3E;
}
.post-info-meta {
    font-size: var(--wp--preset--font-size--small);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
/* Desktop: tout sur une ligne */
@media (max-width: 600px) {
    .post-info-meta {
        flex-direction: column;
        align-items:start;
        gap: 1rem;
    }
    .meta-line {
        flex-direction: row;
    }
}
.post-author {
    display: flex;
    flex-direction: column;   
}
.author-title{
    font-size: var(--wp--preset--font-size--medium);
    color: #4e4e4e;
}
.meta-line {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.single-post .entry-content a {
  color: black;
  text-decoration: underline;
}
.single-post .post-categories a {
    background-color: #F8F8F8;
    padding: 0.5em 1em;
    margin: 0 0.2em 1em 0;
    border-radius: 10px;
    display: inline-block;
}
/* Comment section */
.comment-form textarea,input {
    border-radius: 10px;
}
.comment-reply-link {
    color: #4e4e4e;
}
/* Submit: match the site's eq-btn--dark primary-CTA color instead of the
   Comments block's default accent blue, so it reads as consistent with
   every other button on the page. */
#commentform input[type="submit"],
.wp-block-comments input[type="submit"] {
    background: var(--wp--preset--color--ink) !important;
    color: #fff !important;
    border: none;
    border-radius: 10px;
    padding: 0.95rem 1.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#commentform input[type="submit"]:hover,
.wp-block-comments input[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px rgba(30,33,38,0.45);
}


/*
    CATEGORY POSTS LIST
*/
.category-title {
    margin-top: 2em 0;
}
.subcategory-title a{
   color: black;
}

/* Blog index layout: sticky left "chapters" nav + main content column. Only used on the
   /blog/ and /fr/blogue/ index pages (render_subcategories_posts) — single-category archives
   (render_category_posts) have no subcategories to list, so they never render this wrapper. */
.blog-index-layout {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: flex-start;
}
@media screen and (min-width: 900px) {
    .blog-index-layout {
        flex-direction: row;
        gap: 3rem;
    }
}
.blog-index-nav {
    flex: 0 0 200px;
    width: 100%;
}
@media screen and (min-width: 900px) {
    .blog-index-nav {
        position: sticky;
        top: 2rem;
    }
}
.blog-index-nav__label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8A8681;
    margin: 0 0 0.75rem;
}
.blog-index-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.blog-index-nav a {
    display: block;
    color: #1E2126;
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.blog-index-nav a:hover {
    background-color: #F8F8F8;
    border-left-color: var(--wp--preset--color--primary);
}
.blog-index-content {
    flex: 1 1 auto;
    min-width: 0;
}
.subcategory-section {
    scroll-margin-top: 1.5rem;
}
.subcategory-view-all {
    display: inline-block;
    margin: 0.5rem 0 2rem;
    color: var(--wp--preset--color--secondary);
    font-weight: 600;
    text-decoration: none;
}
.subcategory-view-all:hover {
    text-decoration: underline;
}

/* Pagination on single-category archives (render_category_posts / EQ_BLOG_POSTS_PER_PAGE). */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 3rem 0 2rem;
    padding-top: 2rem;
    border-top: 1px solid #E7DFDB;
}
.blog-pagination__prev,
.blog-pagination__next {
    color: black;
    font-weight: 600;
    text-decoration: none;
    padding: 0.6rem 1.1rem;
    border: 1px solid #E7DFDB;
    border-radius: 999px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.blog-pagination__prev:hover,
.blog-pagination__next:hover {
    border-color: var(--wp--preset--color--primary);
    background-color: #F8F8F8;
}
.blog-pagination__status {
    color: #8A8681;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Category search */
.category-search {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    align-items: baseline;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 2rem 0;
}
@media screen and (min-width: 1200px) {
    .category-search {
        flex-direction: row;
    }
}
.category-search h1 {
    white-space: nowrap;
    margin: 0;
}
.searchbar {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    background: #F8F8F8;
    border: 2px solid;
    border-radius: 10px;
    padding: 0.5rem;
    box-sizing: border-box;
}
.searchbar input {
    flex: 1;
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: bold;
    background-color: transparent;
    border: none;
    min-width: 0;
}
.searchbar input:focus{
    outline: none;
}
.searchbar button {
    font-size: var(--wp--preset--font-size--x-large);
    font-weight: bold;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

/* Category search autocomplete*/
.ui-autocomplete {
    position: absolute;
    display: inline-block;
    margin-top: 0.5rem;
    list-style: none;
    padding-left: 0;
    background: #fff;
    border: 1px solid #ddd;
        z-index: 9999;
}
.ui-menu-item {
    padding: 10px;
    cursor: pointer;
}
.ui-helper-hidden-accessible {
    display: none 
}

/* Category */
.posts-count {
    white-space: nowrap;
    font-size: 1.2rem;
    font-weight: bold;
}
.posts-found-line {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1rem;
}
.line-separator {
    flex-grow: 1;
    height: 1px;
    background-color: #ccc;
}

/* Post Item */
.post-item{
    margin-bottom: 5rem;
}

.post-item.two-columns {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 2.5rem;
    margin-bottom: 4rem;
}
@media screen and (min-width: 820px) {
    .post-item.two-columns {
        flex-direction: row;
    }
}

.post-thumbnail-column,
.post-content-column {
    width: 100%;
}
@media screen and (min-width: 820px) {
    .post-thumbnail-column {
        width: 35%;
    }
    .post-content-column {
        width: 65%;
    }
}
.post-thumbnail-column img.post-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.post-title-div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.post-header {
    display: flex;
    flex-direction: column;
    align-items: baseline;
}
@media screen and (min-width: 720px) {
    .post-header {
        flex-direction: row;
        align-items:center;
        gap: 1rem;
    }
}
.author-avatar {
    border-radius: 50%;
}
.post-title {
    margin: 0.2rem 0;
}
.post-title a{
    color: black;
}
.author-name{
    font-size: var(--wp--preset--font-size--medium);
}
.post-description{
    color: #4e4e4e;
    padding: 0 3.5rem;
}
@media screen and (max-width: 820px) {
    .post-description {
        padding: 0;
    }
}
.post-meta {
    font-size: small;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.post-excerpt a {
    color: #4e4e4e;
    text-decoration: underline;
}
.post-excerpt .read-more {
    white-space: nowrap;
}


/*
    SEARCH PAGE
*/
div.search-results {
    margin-top: 2rem;
}


/*
    GRAVITY FORMS
*/
.gform_required_legend {
    display: none;
}

/*
    OUR SERVICES
*/
.services-grid {
    max-width: calc(3 * 35rem + 2 * var(--wp--preset--spacing--50));
    margin-inline: auto;
}

/* 
    OUR MISSION Team
*/
.team-grid {
    max-width: calc(4 * 25rem + 3 * var(--wp--preset--spacing--60));
    margin-inline: auto;
}

/* 
    CAREERS
*/
.positions-grid {
    max-width: calc(2 * 45rem + var(--wp--preset--spacing--50));
    margin-inline: auto;
}

/*
    OUR PARTNERS
*/
.logo-partner img{
    width:150px !important;
    height:auto !important;
}

/* ==========================================================================
   HOME PAGE REDESIGN — Sept 2026
   Editorial world: Fraunces serif display, accent blue (#2E6DA4), ink (#1E2126),
   blush (#FBEFEC) and sky-tint (#E9F3FB) surfaces. Shared primitives first,
   then one block per section.
   ========================================================================== */

/* box-sizing: border-box is explicit here, not assumed — most .eq-section wrappers are real
   wp-block-group blocks and inherit WP core's border-box reset for free, but .eq-credentials
   is raw wp:html with no such block class, so it defaulted to the browser's content-box and
   rendered 2×--eq-pad (64px) wider than every sibling section, off-center by --eq-pad on each
   side (the hero video/text misalignment this was found from). */
.eq-section { --eq-pad: clamp(1.25rem, 4vw, 2rem); box-sizing: border-box; max-width: 1200px; margin-inline: auto; padding-inline: var(--eq-pad); }
.eq-section + .eq-section:not(.eq-credentials) { margin-top: clamp(4.5rem, 9vw, 8rem); }

/* Every eq-* wrapper below that's a real core/group block (Gutenberg conversion work) was
   written without an explicit "layout" attribute, on purpose — that's what keeps Gutenberg
   from appending an unpredictable hashed wp-container-* class (see the block-conversion
   notes). The tradeoff: WP's global styles still emit a default-flow spacing rule —
   `:root :where(.is-layout-flow) > * { margin-block-start: 24px }`, a hardcoded pixel value
   from theme.json at render time, not the --wp--style--block-gap custom property, so setting
   that variable here does nothing — that puts a real margin between every pair of sibling
   blocks. Invisible until two children were meant to sit flush (stacked video/image/badge in
   the hero) or a container relies on its own CSS gap/margin (grids, flex rows), where it
   shows up as extra drift nothing else in this stylesheet accounts for. None of these
   wrappers want WordPress's auto-spacing; they all carry their own bespoke layout already.
   :root :where(...) is deliberately near-zero specificity so themes can override it easily —
   this selector's plain class + attribute + child combinator already outranks it.

   margin-block-start only, deliberately: an earlier version of this rule also forced
   margin-block-end: 0, which was wrong — it silently beat every child's own authored bottom
   margin at (0,2,0) vs their (0,1,0)/(0,1,1), stripping real spacing WordPress never touched
   (e.g. .eq-contact__copy's eyebrow/title/lede/steps gaps, .eq-spotlight__intro's own bottom
   margin above the testimonial card). Those elements already set their own margin-top: 0 in
   their own rules, so margin-block-start here is the only cancellation actually needed. */
.wp-block-group[class*="eq-"] > * { margin-block-start: 0; }

/* Second WordPress default, same family of problem: theme.json also styles every bare
   .wp-block-group with its own padding (var(--wp--preset--spacing--40) top/bottom,
   --spacing--50 left/right — ~16px/~24px here) plus font-family/line-height/text-decoration,
   via the same low-specificity :root :where(.wp-block-group) pattern. That's what put the
   16px gap under the hero video that the badge's bottom:-1.25rem was then measuring from —
   not the block-gap margin (already handled above), a completely separate default. Listed
   explicitly (not a blanket [class*="eq-"] reset) because a couple of these — the testimonial
   content panel, most notably — set their own real padding lower in this file at the same
   (0,1,0) specificity as this selector; a blanket attribute-selector reset would silently win
   over them regardless of source order and strip padding they actually want. */
.eq-hero__media,
.eq-standard__media,
.eq-standard__frame,
.eq-support__grid,
.eq-support__card,
.eq-contact__copy,
.eq-spotlight,
.eq-spotlight__slide,
.eq-spotlight__visual,
.eq-spotlight__intro { padding: 0; }

.eq-eyebrow {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin: 0 0 0.9rem;
}
/* Hero only: sidesteps the logo's brighter cyan-blue clashing with the site's darker
   accent blue by using the palette's warm terracotta instead of another shade of blue. */
.eq-hero__heading .eq-eyebrow { color: var(--wp--preset--color--terracotta); }
.eq-hero__heading .eq-eyebrow,
.eq-hero__eyebrow-mobile { text-wrap: balance; }

.eq-serif { font-family: var(--wp--preset--font-family--fraunces); font-weight: 400; }

h1.eq-hero__title,
h2.eq-standard__title,
h2.eq-support__title,
h2.eq-faq__title,
h2.eq-contact__title {
    font-family: var(--wp--preset--font-family--fraunces);
    font-weight: 380;
    font-optical-sizing: none;
    font-variation-settings: "opsz" 18;
    letter-spacing: -0.01em;
    line-height: 1.08;
    color: var(--wp--preset--color--ink);
    margin: 0 0 1.1rem;
}
h1.eq-hero__title { font-size: clamp(2.5rem, 2rem + 2.2vw, 3.9rem); font-weight: 500; }
h2.eq-standard__title,
h2.eq-support__title,
h2.eq-faq__title,
h2.eq-contact__title { font-size: clamp(2rem, 1.7rem + 1.4vw, 2.85rem); }

.eq-standard__title em,
.eq-hero__title em { font-style: italic; color: var(--wp--preset--color--accent); }

p.eq-hero__lede, p.eq-standard__lede, p.eq-support__lede, p.eq-faq__lede, p.eq-contact__lede {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #55524E;
    max-width: 46ch;
    margin: 0 0 1.75rem;
}

.eq-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1.85rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    line-height: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.eq-btn--dark { background: var(--wp--preset--color--ink); color: #fff; }
.eq-btn--dark:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(30,33,38,0.45); color:#fff; }
.eq-btn--dark:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

.eq-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--wp--preset--color--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--wp--preset--color--ink);
    padding-bottom: 0.2rem;
}
.eq-link-arrow:hover { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.eq-link-arrow--blue { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.eq-standard__body > .eq-link-arrow { margin-top: 2.5rem; }
.eq-link-arrow:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

.eq-icon { width: 1em; height: 1em; }

/* ---- Hero ---- */
.eq-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-top: clamp(0.75rem, 1.5vw, 1.5rem);
}
.eq-hero__ctas { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
/* Text-only hero: a couple of lighter support pages (Partners) have no photo/video worth
   pairing with the intro copy — rather than leaving the media column's grid track empty
   (copy stuck at half width), collapse the grid to one column and cap the copy's own width
   so short lede paragraphs don't stretch edge-to-edge on wide screens. */
.eq-hero--solo { grid-template-columns: 1fr; }
.eq-hero--solo .eq-hero__copy { max-width: 640px; }
.eq-hero__media { position: relative; }
.eq-hero__img { width: 100%; height: clamp(340px, 32vw, 460px); object-fit: cover; border-radius: 22px; display: block; margin: 0; }
/* object-fit/object-position only affect a replaced element, so once a className lives on a
   core/image block it lands on the wrapping <figure> — this companion selector reaches the
   real <img> one level in. Applies across every converted image below, not just the hero. */
.eq-hero__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 22px; display: block; }
/* Hero media toggle: switch which asset renders by changing "eq-hero__media--video" to "eq-hero__media--static" in the markup (see final_homepage.html). */
.eq-hero__media-asset { display: none; }
.eq-hero__media--video .eq-hero__media-asset--video,
.eq-hero__media--static .eq-hero__media-asset--static { display: block; }
/* Third hero media variant: an embedded YouTube video (e.g. the LifeCare Plus product demo)
   instead of a native <video>/<img>. Deliberately its own modifier, not a third state of the
   --video/--static toggle above: the fullbleed-100dvh mobile treatment those two get is built
   for an ambient autoplay b-roll clip, not a click-to-play testimonial/demo video, so it's
   simplest to just round the embed's own corners at every width and leave WP's native
   responsive-embed sizing (wp-embed-aspect-16-9) alone rather than fighting it to match
   .eq-hero__img's fixed clamp() height. */
/* width:100% is explicit, not left to flex's default cross-axis stretch — in the mobile
   column-flex hero (.eq-hero { flex-direction: column }) this item's default stretch wasn't
   resolving (measured 0×0 without it, some interaction with the oEmbed figure's own intrinsic
   sizing short-circuiting stretch before the aspect-ratio ::before trick gets a real width to
   size its padding-top percentage against). Being explicit sidesteps that entirely. */
.eq-hero__media--embed { width: 100%; border-radius: 22px; overflow: hidden; }
.eq-hero__media--embed .wp-block-embed__wrapper { margin: 0; }

/* Desktop: widen the media column and dissolve its left edge into the copy column instead of a hard boundary */
@media (min-width: 901px) {
    /* Flex instead of grid here: grid's stretch algorithm clamps a percentage-based
       breakout width, flex resolves it correctly (same reason the mobile banner uses flex). */
    /* .eq-hero__media already bleeds out to the section's true right edge below (its own
       width/margin-right trick); cancelling the section's left inset here does the same job
       for .eq-hero__copy on the left, so the hero's text and video line up with where
       .eq-credentials' pink band actually starts — not with that band's own inset text. */
    .eq-hero { display: flex; align-items: center; gap: clamp(0.5rem, 1vw, 0.75rem); padding-left: 0; }
    /* 360px floor let the column get narrower than the two CTAs actually need together —
       right at the low end of this range (viewport just past the 901px breakpoint) that
       forced "Explore Our Services" onto its own line even though there's no real
       narrow-screen reason to wrap on desktop. A first pass raised this to 410px off a
       rough ~402px estimate, but the real rendered width measures ~410.5px — a sub-pixel
       margin that was wrapping intermittently depending on font rendering. 420px gives an
       actual safety margin instead of a coin flip. */
    .eq-hero__copy { flex: 0 0 clamp(420px, 36%, 460px); align-self: stretch; display: flex; flex-direction: column; }
    /* French CTA labels ("Réserver une consultation" + "Découvrir nos services →") measure
       ~469px together (vs. ~402px for the English pair the 410px floor above was tuned for),
       so the same floor wrapped the second link onto its own line on every French page.
       Scoped via the lang-fr body class (inc/setup.php) rather than raising the shared
       floor, so English's already-tuned 410px column stays untouched.
       Floor raised again, 480→510: at the title's font-size cap (3.9rem, reached from
       ~1382px viewport up) "Des soins qui ont" — the longer of the two <br>-split halves of
       the French H1 — measures ~491px, so it was wrapping into a 3rd line instead of the
       intended 2. 510px gives it ~20px of breathing room, same margin philosophy as the
       420px floor above. Narrows .eq-hero__media by the same amount, since it's the only
       flex-grow item absorbing whatever the fixed-basis copy column doesn't take. */
    body.lang-fr .eq-hero__copy { flex-basis: clamp(510px, 36%, 550px); }
    /* LifeCare Plus (/plus/) page-specific floor: its H1 ("Early Detection Means Early
       Intervention" / FR equivalent) is real client copy the user chose to keep verbatim
       rather than shorten, and needs ~645px for "Early detection means" (the longer of its
       two <br>-split halves) to fit on one line at the title's font-size cap — far past what
       any other hero on the site needs. Scoped to this page's body class (page-id-4799 EN,
       page-id-5526 FR) rather than raising the shared 420px floor, same reasoning as the
       lang-fr rule above. Narrows .eq-hero__media accordingly — deliberate per the user, not
       a side effect to fix. */
    body.page-id-4799 .eq-hero__copy,
    body.page-id-5526 .eq-hero__copy { flex-basis: clamp(670px, 46%, 700px); }
    .eq-hero__ctas { margin-top: auto; padding-top: 1.5rem; }
    .eq-hero__media {
        flex: 1 1 auto;
        min-width: 0;
        width: calc(100% + var(--eq-pad));
        margin-right: calc(-1 * var(--eq-pad));
    }
    .eq-hero__img {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%);
        mask-image: linear-gradient(to right, transparent 0%, black 22%);
    }
    /* Desktop keeps the blush panel from the old design; mobile now gets the same blush
       card (see the mobile media query below) instead of plain white, so the section reads
       as a reassurance beat at every width. The editorial hairline layout inside is what
       changed from the pre-redesign version, not this background. */
    .eq-credentials { background: var(--wp--preset--color--blush); border-top: none; border-bottom: none; border-radius: 18px; padding-block: clamp(1.75rem, 2.75vw, 2.5rem); padding-inline: var(--eq-pad); }
}
.eq-hero__badge {
    position: absolute;
    right: 1.5rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    bottom: -1.25rem;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 999px;
    padding: 0.65rem 1.15rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 200;
    color: var(--wp--preset--color--ink);
    box-shadow: 0 14px 32px -12px rgba(30,33,38,0.28);
}
.eq-hero__badge-slot--mobile { display: none; }
.eq-hero__eyebrow-mobile { display: none; }
.eq-hero__badge .eq-stars { display: inline-flex; gap: 1px; color: #F2A63D; }
.eq-hero__badge .eq-stars svg { width: 13px; height: 13px; }
.eq-hero__badge:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(30,33,38,0.35); }
.eq-hero__badge:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* Credentials strip: a quiet editorial list of proof points, not a stat-tile carousel.
   Every fact sits in the page's normal flow — nothing hidden behind a swipe — bounded by
   hairlines rather than a colored card, so it reads as a credential line, not a dashboard.
   The eyebrow gives the strip a real heading landmark (every sibling section has one) and
   the facts live in a <ul> for list semantics; .eq-credentials__list carries the flex row
   that used to sit directly on .eq-credentials. */
/* ---- Tinted prose panel: a single-column text block (heading + paragraphs + checklist +
   CTA) in a rounded tinted box, for content with no natural photo counterpart and no grid
   below it — vs. .eq-standard (paired with a media column) or .eq-support (paired with a
   card grid). */
.eq-panel { background: var(--wp--preset--color--sky-tint); border-radius: 24px; padding: clamp(2rem, 5vw, 3.5rem); max-width: 860px; margin-inline: auto; text-align: center; }
.eq-panel p { max-width: 65ch; margin-inline: auto; }
.eq-panel .eq-checklist { text-align: left; max-width: 520px; margin-inline: auto; }
.eq-panel .eq-btn { margin-top: 0.5rem; }
.eq-standard__body .eq-btn { margin-top: 1rem; }
/* Closing-statement-only variant: once a .eq-panel's checklist moves elsewhere (e.g. into
   .eq-standard__list-card next to the intro text instead of duplicating it here), what's
   left is just a single closing line + CTA — a smaller max-width/padding keeps that from
   reading as an oversized, mostly-empty card. */
.eq-panel--tight { padding: clamp(1.5rem, 3vw, 2.25rem); max-width: 640px; }
.eq-panel--tight p { margin: 0 0 1.25rem; }
/* Blush variant: same card, warmer tint — for a reassurance/permission-giving beat rather
   than the neutral sky-tint used for a plain CTA panel. */
.eq-panel--blush { background: var(--wp--preset--color--blush); }

/* ---- Press / media timeline ----
   A chronological list of outbound press mentions (news coverage, press releases, PDFs) —
   each item's own outlet logo, headline and excerpt, grouped under a date. Built as raw
   HTML (not per-image Gutenberg blocks) because most items wrap their own logo in a custom
   outbound link, which Gutenberg's image-block link attribute doesn't map cleanly onto a
   styled wrapper class — same tradeoff already made elsewhere on this page for reviewer/
   checklist markup. Editing an entry means editing this HTML directly. */
.eq-press__group { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--wp--preset--color--hairline); }
.eq-press__group:first-child { border-top: none; padding-top: 0; }
.eq-press__date { font-family: var(--wp--preset--font-family--fraunces); font-weight: 500; font-size: 1.25rem; color: var(--wp--preset--color--ink); margin: 0 0 1.75rem; }
.eq-press__list { display: flex; flex-direction: column; gap: 2.25rem; }
.eq-press__item { display: flex; gap: 1.75rem; align-items: flex-start; }
.eq-press__logo { width: 96px; height: 96px; flex-shrink: 0; border-radius: 14px; border: 1px solid var(--wp--preset--color--hairline); background: #fff; display: flex; align-items: center; justify-content: center; padding: 0.85rem; overflow: hidden; }
.eq-press__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.eq-press__title { margin: 0 0 0.5rem; font-family: var(--wp--preset--font-family--fraunces); font-weight: 500; font-size: 1.1rem; line-height: 1.4; }
.eq-press__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.eq-press__title a:hover { color: var(--wp--preset--color--accent); }
.eq-press__desc { margin: 0; color: #55524E; line-height: 1.65; font-size: 0.95rem; }
.eq-press__desc + .eq-link-arrow { margin-top: 0.85rem; font-size: 0.875rem; }
@media (max-width: 640px) {
    .eq-press__item { flex-direction: column; gap: 1rem; }
    .eq-press__logo { width: 76px; height: 76px; }
}

/* ---- Leadership team grid ----
   Was plain text + a circular photo floating directly on the page background — no card
   shell at all, so the grid read as a loose list rather than a designed component next to
   every other card pattern on the site (.eq-support__card, .eq-pricing__card). Same white-
   card-with-hover-lift shell as those, and the role gets the same pill-badge treatment as
   .eq-pricing__badge instead of plain uppercase text, so photo/name/role read as one
   grouped unit before the bio starts. */
.eq-team__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(2rem, 4vw, 3rem) 1.75rem; }
.eq-team__card {
    text-align: center;
    background: #fff;
    border: 1px solid var(--wp--preset--color--hairline);
    border-radius: 18px;
    padding: 2.25rem 1.75rem 2rem;
    transition: transform 0.25s cubic-bezier(0.16, 0.8, 0.24, 1), box-shadow 0.25s cubic-bezier(0.16, 0.8, 0.24, 1);
}
.eq-team__card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -26px rgba(30,33,38,0.28); }
@media (prefers-reduced-motion: reduce) {
    .eq-team__card { transition: none; }
    .eq-team__card:hover { transform: none; }
}
.eq-team__photo { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; margin: 0 auto 1.1rem; background: var(--wp--preset--color--lavender-tint); }
.eq-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eq-team__name { font-family: var(--wp--preset--font-family--fraunces); font-weight: 500; font-size: 1.2rem; color: var(--wp--preset--color--ink); margin: 0 0 0.5rem; }
.eq-team__role {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--terracotta);
    background: var(--wp--preset--color--blush);
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    margin: 0 0 1.25rem;
}
.eq-team__bio { font-size: 0.9rem; color: #55524E; line-height: 1.6; text-align: left; }
@media (max-width: 900px) {
    .eq-team__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
    .eq-team__grid { grid-template-columns: 1fr; }
}

.eq-credentials {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding-block: clamp(1.5rem, 2.5vw, 2rem);
    border-top: 1px solid var(--wp--preset--color--hairline);
    border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.eq-credentials__heading { margin-bottom: 1.1rem; }
.eq-credentials__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.eq-credential {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-inline: clamp(1rem, 2vw, 1.75rem);
    border-left: 1px solid var(--wp--preset--color--hairline);
}
.eq-credential:first-child { border-left: none; padding-left: 0; }
.eq-credential:last-child { padding-right: 0; }
.eq-credential__mark {
    font-family: var(--wp--preset--font-family--fraunces);
    font-weight: 300;
    font-size: clamp(1.5rem, 1.9vw, 1.875rem);
    line-height: 1.1;
    color: var(--wp--preset--color--ink);
}
.eq-credential__label {
    font-size: 0.8125rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: #625F5A;
}
/* The one sourced claim (business ranking) links out to its citation; display:contents keeps
   the anchor out of the flex layout so mark+label still lay out exactly like the other,
   unlinked credentials. */
.eq-credential__link {
    display: contents;
    color: inherit;
    text-decoration: none;
}
.eq-credential__link .eq-credential__label {
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--hairline);
    text-underline-offset: 3px;
}
.eq-credential__link:hover .eq-credential__label,
.eq-credential__link:focus-visible .eq-credential__label {
    text-decoration-color: currentColor;
}
.eq-credential__link:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* Reviewer byline: names the accredited professionals behind the specific claim it sits
   under ("a Registered Nurse writes and supervises every care plan"). Lives inside that
   checklist item, not the credentials strip above: attached to the exact sentence it backs
   up, not to whichever credential happens to be last in the row (previously #16, the
   business ranking — wrong claim entirely). The .eq-checklist .eq-reviewer-team selector
   (2 classes) is there on purpose, to outrank the plainer ".eq-checklist li p" color/size
   rule above it. */
.eq-checklist .eq-reviewer-team {
    margin: 0.5rem 0 0;
}
.eq-reviewer-team__label {
    margin: 0;
    font-size: 0.75rem;
    color: #8A8681;
}
.eq-reviewer-team__list {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.eq-reviewer-team__member {
    margin: 0;
    font-size: 0.75rem;
    color: #8A8681;
}
.eq-reviewer-team__name { font-weight: 600; color: #625F5A; }
/* Each member's line can carry up to two independent links: the name to their LinkedIn
   (Christopher only, for now) and the registration number to their public CNO registry
   entry (both). The underline lives on the anchor itself, not on .eq-reviewer-team__name,
   since the registry link wraps plain "Reg. No." text with no name span inside it. */
.eq-reviewer-team__link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--hairline);
    text-underline-offset: 3px;
}
.eq-reviewer-team__link:hover,
.eq-reviewer-team__link:focus-visible {
    text-decoration-color: currentColor;
}
.eq-reviewer-team__link:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

/* ---- Standard / editorial trust section ----
   Three siblings (intro / media / body) instead of a copy+media pair, so the photo can sit
   between the heading and the supporting text on mobile while desktop still shows the text
   as one column beside a full-height photo — grid-template-areas reorders per breakpoint
   without duplicating markup. */
.eq-standard {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "media" "body";
    row-gap: clamp(1.75rem, 3vw, 2.25rem);
}
.eq-standard__intro { grid-area: intro; }
.eq-standard__media { grid-area: media; }
.eq-standard__body { grid-area: body; }
@media (min-width: 901px) {
    .eq-standard {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "intro media" "body media";
        column-gap: clamp(2.5rem, 6vw, 5.5rem);
        row-gap: 0;
        align-items: center;
    }
    .eq-standard__intro { align-self: end; }
    .eq-standard__body { align-self: start; }
}
/* Article variant: no media column — a centered title over a full-width, left-aligned text
   block, for a .eq-standard section that's pure editorial copy (no photo/illustration
   pairing). Splitting the body into a half-width grid column left the other half blank,
   which read as an accidental gap rather than a deliberate layout — so the body spans the
   full row and its own paragraphs use the section's whole width instead of a capped column. */
.eq-standard--article .eq-standard__intro { text-align: center; max-width: 640px; margin-inline: auto; }
.eq-standard--article .eq-standard__body p { max-width: none; }
@media (min-width: 901px) {
    .eq-standard--article {
        grid-template-columns: minmax(0,1fr);
        grid-template-areas: "intro" "body";
        align-items: start;
        row-gap: clamp(1.75rem, 3vw, 2.5rem);
    }
    .eq-standard--article .eq-standard__intro { align-self: auto; }
    .eq-standard--article .eq-standard__body { align-self: auto; }
}
.eq-checklist { list-style: none; margin: 2.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; }
/* Direct-child combinator (`>`) on purpose: a reviewer byline's own nested <ul><li> (see
   .eq-reviewer-team__list below) lives several levels inside a checklist item's body copy.
   The old plain descendant selector reached straight through that nesting and flexified /
   gapped / recolored the reviewer <li>s and their <p> too — since ANY li/p with a
   .eq-checklist ancestor matched, not just this list's own direct items — which is what
   produced the stray gaps and wrong text color around the reviewer names/links. */
.eq-checklist > li { display: flex; align-items: flex-start; gap: 0.9rem; }
.eq-check { width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--wp--preset--color--lavender-tint); color: var(--wp--preset--color--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.2rem; }
.eq-check svg { width: 17px; height: 17px; stroke-width: 2; }
.eq-checklist > li p { margin: 0; color: #4B4844; line-height: 1.55; }
.eq-checklist > li strong { color: var(--wp--preset--color--ink); }

/* ---- Pricing cards ---- */
.eq-pricing__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; margin: 2.5rem 0 3rem; }
.eq-pricing__card { display: flex; flex-direction: column; gap: 1.1rem; padding: 2.25rem 2rem; border: 1px solid var(--wp--preset--color--hairline); border-radius: 20px; background: #fff; }
.eq-pricing__card--included { background: var(--wp--preset--color--lavender-tint); border-color: transparent; }
.eq-pricing__badge { align-self: flex-start; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--wp--preset--color--navy); color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; }
.eq-pricing__name { margin: 0; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #77746F; }
.eq-pricing__price { display: flex; align-items: baseline; gap: 0.4rem; }
.eq-pricing__amount { font-size: clamp(2.25rem, 4vw, 2.6rem); font-weight: 700; color: var(--wp--preset--color--ink); line-height: 1; }
.eq-pricing__period { font-size: 1rem; color: #77746F; }
.eq-pricing__desc { margin: 0; color: #55524E; line-height: 1.55; }
.eq-pricing__card .eq-pricing__list { margin-top: 0.25rem; gap: 0.85rem; }
.eq-pricing__cta { margin-top: auto; padding-top: 0.5rem; }
.eq-pricing__cta .eq-btn { width: 100%; justify-content: center; box-sizing: border-box; }
.eq-pricing__links { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 0.5rem; }
@media (max-width: 780px) {
    .eq-pricing__grid { grid-template-columns: 1fr; }
}

.eq-standard__media { position: relative; }
.eq-standard__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wp--preset--color--blush);
    border-radius: 22px;
    border-bottom-right-radius: 64px;
    transform: translate(-56px, 56px);
    z-index: 0;
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(0.16, 0.8, 0.24, 1) 0.2s;
}
.eq-standard__media.is-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .eq-standard__media::before { opacity: 1; transition: none; }
}
.eq-standard__frame { position: relative; z-index: 1; border-radius: 22px; border-bottom-right-radius: 64px; overflow: hidden; }
/* Non-photo media slot: a checklist card instead of a photo, filling the same media column
   with the same offset-shape-behind-a-frame motif (same corner radii, same z-index:1 to
   sit above .eq-standard__media's ::before backdrop) rather than inventing a new visual
   language — used on Our Mission where the "what you can count on" list is more useful
   here, next to the intro text, than a generic stock photo would be. */
.eq-standard__list-card { position: relative; z-index: 1; background: #fff; border: 1px solid var(--wp--preset--color--hairline); border-radius: 22px; border-bottom-right-radius: 64px; padding: clamp(1.75rem, 3vw, 2.5rem); }
/* Blush variant: same card shape, warmer tint for a reassurance beat, no border needed since
   the tint itself separates the card from the page background. */
.eq-standard__list-card--blush { background: var(--wp--preset--color--blush); border-color: transparent; }
.eq-standard__list-card .eq-checklist { margin-top: 0; }
.eq-standard__img { width: 100%; height: clamp(320px, 38vw, 520px); object-fit: cover; display: block; margin: 0; }
.eq-standard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* For a designed graphic with text baked in (e.g. a compliance badge) rather than a photo —
   cover-cropping a wide landscape asset into this frame's tall aspect cuts its text off at
   both edges. contain + the badge's own solid background letterboxes it cleanly instead. */
.eq-standard__img--contain, .eq-standard__img--contain img { object-fit: contain; background: var(--wp--preset--color--sky-tint); }
/* Letterbox background matched to the PIPEDA badge's own solid blue so the contain-fit
   padding reads as part of the badge itself instead of a visible gap around it. */
.eq-standard__img--pipeda, .eq-standard__img--pipeda img { background: #0152A3; }

/* Reversed variant: media on the left / intro+body on the right instead of the default
   right-hand photo — used to alternate rhythm between consecutive .eq-standard sections on
   the same page (e.g. LifeCare Plus's device photo, then this reversed one right after) so
   they don't all read as identical left-text/right-photo blocks in a row. Only the desktop
   grid areas swap; mobile stacking (intro/media/body, media in the middle) is unaffected. */
@media (min-width: 901px) {
    .eq-standard--reverse { grid-template-areas: "media intro" "media body"; }
}
/* Icon-panel media: for a .eq-standard section illustrating an abstract idea (data security)
   rather than a real place/object worth photographing — same frame footprint and signature
   corner as a photo, a tinted panel with a single large centered icon instead. */
.eq-standard__img--icon { display: flex; align-items: center; justify-content: center; background: var(--wp--preset--color--sky-tint); }
.eq-standard__img--icon svg { width: 34%; max-width: 200px; height: auto; color: var(--wp--preset--color--navy); }
/* Small proof-point badge (e.g. an ISO certification mark) sitting in the body copy next to
   the claim it backs up — deliberately modest (not the section's main visual) so it reads as
   a supporting credential, not a logo wall. */
.eq-standard__badge { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.5rem; }
.eq-standard__badge img { width: 56px; height: 56px; flex-shrink: 0; }
.eq-standard__badge span { font-size: 0.8125rem; color: #8A8681; max-width: 20ch; }

/* ---- Everyday support grid ---- */
.eq-support__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
/* Homepage/Accueil's own intro paragraph grew from one punchy line to six sentences,
   so the shared 46ch lede cap below wrapped it into a narrow, tall column that no
   longer matched its H2's width. Widened to the head's own 62ch cap — same alignment,
   just using the room already given to the heading above it. Scoped by page ID rather
   than a class since .eq-support__lede is shared with Our Partners' shorter intro,
   which should keep the tighter 46ch measure. */
body:is(.page-id-10322, .page-id-11172) .eq-support__lede {
    max-width: 62ch;
}
/* Centered variant — used for the "Getting Started" section specifically, not the shared
   default (Detect/Predict/Prevent stays left-aligned). */
.eq-support__head--center { text-align: center; margin-inline: auto; }
.eq-support__head--center .eq-standard__lede { margin-inline: auto; }
/* Our Process's intro paragraph sits below the centered head, not inside it (see Our Process
   page), so it can run wider than the shared 46ch lede cap without also stretching the H2 —
   otherwise it wraps into short, choppy lines above the 3-phase cards. Scoped to .eq-support
   (two classes) so it beats the shared "p.eq-standard__lede" rule's specificity outright,
   rather than relying on this file's rule order. */
.eq-support .eq-process__lede { max-width: 60ch; margin: -1.25rem auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.eq-support__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.75rem; }
.eq-support__grid--2col { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* display:flex column + the card-body's margin-top:auto below keep a trailing CTA (e.g. Our
   Services' "Learn more" links) flush with the card's bottom edge even when sibling cards'
   descriptions run to different line counts — otherwise short-description cards leave the CTA
   floating high while long-description ones push it down, and same-row cards visibly disagree. */
.eq-support__card { display: flex; flex-direction: column; border: 1px solid var(--wp--preset--color--hairline); border-radius: 18px; overflow: hidden; background: #fff; transition: transform 0.25s cubic-bezier(0.16, 0.8, 0.24, 1), box-shadow 0.25s cubic-bezier(0.16, 0.8, 0.24, 1); }
/* Hover lift/shadow, cursor and photo zoom are opt-in via --linked (not the shared
   .eq-support__card) — most cards on the site (homepage services, Careers, pricing, Senior
   Care, Post-Operative Care...) aren't links at all, and a hover affordance on a non-clickable
   card is misleading. Reserve it for cards that actually navigate somewhere on click: LifeCare
   Plus "Who it's for" and Our Services, both wired up via card-link.js. */
.eq-support__card--linked { cursor: pointer; }
.eq-support__card--linked:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -26px rgba(30,33,38,0.28); }
/* Same asymmetric-corner identity as the "Warmth like family" photo frame elsewhere on
   this page (22px / 64px bottom-right), scaled down for this card's shorter header photo. */
.eq-support__photo { width: 100%; height: 140px; display: block; position: relative; z-index: 0; margin: 0; transition: transform 0.5s cubic-bezier(0.16, 0.8, 0.24, 1); }
.eq-support__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: 18px 18px 40px 18px; }
.eq-support__photo--low img { object-position: center 75%; }
.eq-support__card--linked:hover .eq-support__photo { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
    .eq-support__photo { transition: none; }
    .eq-support__card--linked:hover .eq-support__photo { transform: none; }
}
.eq-support__card-head { position: relative; padding: 0 1.5rem 0; text-align: center; }
.eq-support__card h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    position: relative;
    z-index: 1;
    font-family: var(--wp--preset--font-family--fraunces);
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--wp--preset--color--navy);
    background: #fff;
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    margin: -1.5rem 0 0.65rem;
    box-shadow: 0 2px 18px rgba(30,33,38,0.22);
    transition: color 0.25s ease;
}
.eq-support__card h3 svg { width: 19px; height: 19px; flex-shrink: 0; }
.eq-support__card--linked:hover h3 { color: var(--wp--preset--color--terracotta); }
.eq-support__desc { margin: 0; color: #625F5A; font-size: 0.9rem; padding: 0 0.5rem; }
.eq-support__desc a,
.eq-hero__lede a:not(.eq-link-arrow),
.eq-panel a:not(.eq-link-arrow):not(.eq-btn),
.eq-checklist li p a,
.eq-standard__body a:not(.eq-link-arrow):not(.eq-btn) { color: var(--wp--preset--color--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.eq-support__desc a:hover,
.eq-hero__lede a:not(.eq-link-arrow):hover,
.eq-panel a:not(.eq-link-arrow):not(.eq-btn):hover,
.eq-checklist li p a:hover,
.eq-standard__body a:not(.eq-link-arrow):not(.eq-btn):hover { color: var(--wp--preset--color--terracotta); }
.eq-support__card ul { list-style: none; margin: 0; padding: 1.25rem 1.5rem 1.5rem; }
.eq-support__card li { padding: 0.55rem 0; border-top: 1px solid var(--wp--preset--color--hairline); color: #4B4844; font-size: 0.925rem; display: flex; align-items: center; gap: 0.7rem; }
.eq-support__card li:first-child { border-top: none; }
/* Same lavender-circle language as .eq-check, sized down for this denser list — lets each
   line be scanned by its icon instead of read word by word, without a new visual system. */
.eq-support__item-icon { width: 20px; height: 20px; border-radius: 50%; background: var(--wp--preset--color--lavender-tint); color: var(--wp--preset--color--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.eq-support__item-icon svg { width: 14px; height: 14px; }

/* Career page: a card-head-style card (icon, centered title/blurb) followed by a left-
   aligned detail section for the longer PAB listing (position summary, qualifications). */
.eq-support__card-body { padding: 0 1.5rem 1.75rem; margin-top: auto; }
.eq-support__card-label { margin: 1.5rem 0 0.75rem; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--ink); }
.eq-support__card-body > .eq-support__desc { margin-top: 1.25rem; text-align: left; }
.eq-support__card-cta { text-align: center; margin-top: 1.5rem; }
.eq-support__card-head .eq-career-apply { margin-top: 1rem; }
/* .eq-checklist reused here for its checkmark-bullet look, but .eq-support__card's own
   generic ul/li rules above (hairline-separated feature list) would otherwise also match
   and fight it — .eq-support__card-body's extra class is enough specificity to win
   regardless of source order. */
.eq-support__card-body .eq-checklist { margin: 0; gap: 0.65rem; }
.eq-support__card-body .eq-checklist > li { border-top: none; padding: 0; align-items: flex-start; }

/* Icon-only card variant: for content with no natural photo (LifeCare Plus's
   Detect/Predict/Prevent and 3-step "how it works" rows) — same card shell, but the photo
   slot becomes a big centered color-badge icon instead, and the title drops the white pill
   that's designed to overlap a photo's bottom edge (nothing to overlap here, so it'd just
   float oddly) back to a plain centered heading. Three palette colors already in the site's
   own theme.json (accent/navy/terracotta) stand in for the original three PNG icon colors
   rather than introducing an off-palette purple. */
.eq-support__card--icon .eq-support__card-head { padding-top: 2rem; padding-bottom: 2rem; }
.eq-support__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
    color: #fff;
}
.eq-support__icon svg { width: 28px; height: 28px; }
.eq-support__icon--accent { background: var(--wp--preset--color--accent); }
.eq-support__icon--navy { background: var(--wp--preset--color--navy); }
.eq-support__icon--terracotta { background: var(--wp--preset--color--terracotta); }
.eq-support__card--icon h3 {
    display: block;
    background: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0 0 0.65rem;
    padding: 0;
}
/* .eq-support__closing.eq-reveal (2 classes, not 1) is deliberate — outranks the
   near-global ".wp-block-group[class*='eq-'] > * { margin-block-start: 0 }" WP-spacing
   reset (also 2-class-equivalent specificity) that was otherwise zeroing this margin-top
   and jamming the closing line straight against the card grid above it. Same fix pattern as
   .eq-standard__body > .eq-link-arrow elsewhere in this file. */
.eq-support__closing.eq-reveal { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 62ch; margin-inline: auto; }
.eq-support__closing p { margin: 0 0 1.5rem; font-size: 1.0625rem; color: #4B4844; line-height: 1.6; }
.eq-support__foot.eq-reveal { text-align: center; margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ---- Feature list (horizontal rows) ----
   An alternative to .eq-support__grid's card layout, for pages with too many items for a 3x3
   card grid to stay legible (e.g. Chronic Disease Management's 9 services) — back-to-back
   sub-service pages all using the same card grid started to feel repetitive. Rows read icon,
   then title/description, then an optional supporting checklist, left to right on desktop,
   stacking to a single column on mobile. */
.eq-feature-list { max-width: 980px; margin-inline: auto; }
.eq-feature-row { display: grid; grid-template-columns: 64px minmax(0,1fr) minmax(0,1fr); gap: 0.4rem 2.5rem; align-items: start; padding: 2.25rem 0; border-top: 1px solid var(--wp--preset--color--hairline); }
.eq-feature-row:first-child { border-top: none; padding-top: 0; }
/* Rows with no third-column checklist let the body text use that width too, instead of
   sitting narrow in just the middle column with an empty track beside it. */
.eq-feature-row--wide .eq-feature-row__body { grid-column: 2 / span 2; }
.eq-feature-row__icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.eq-feature-row__icon svg { width: 26px; height: 26px; }
.eq-feature-row__icon--accent { background: var(--wp--preset--color--accent); }
.eq-feature-row__icon--navy { background: var(--wp--preset--color--navy); }
.eq-feature-row__icon--terracotta { background: var(--wp--preset--color--terracotta); }
.eq-feature-row__body h3 { font-family: var(--wp--preset--font-family--fraunces); font-weight: 500; font-size: 1.2rem; color: var(--wp--preset--color--ink); margin: 0 0 0.5rem; }
.eq-feature-row__desc { margin: 0; color: #55524E; line-height: 1.6; }
.eq-feature-row__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.eq-feature-row__list li { display: flex; align-items: flex-start; gap: 0.6rem; }
.eq-feature-row__list li p { margin: 0; color: #4B4844; font-size: 0.925rem; line-height: 1.5; }
@media (max-width: 780px) {
    .eq-feature-row { grid-template-columns: 48px 1fr; row-gap: 0.75rem; }
    .eq-feature-row__icon { width: 48px; height: 48px; }
    .eq-feature-row__list { grid-column: 1 / -1; padding-left: calc(48px + 1.25rem); }
    .eq-feature-row--wide .eq-feature-row__body { grid-column: 2; }
}

/* A single centered statement band, bordered top/bottom by a hairline rule — for a short
   standalone claim that doesn't need a full section (e.g. LifeCare Plus's "operates 24/7"
   line) rather than another full eq-section with an eyebrow/title/lede head it doesn't need. */
.eq-statement { text-align: center; padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--wp--preset--color--hairline); border-bottom: 1px solid var(--wp--preset--color--hairline); }
.eq-statement__text { margin: 0; font-family: var(--wp--preset--font-family--fraunces); font-weight: 380; font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); color: var(--wp--preset--color--ink); }
.eq-statement__text strong { color: var(--wp--preset--color--accent); font-weight: 500; }

/* Two-column text/text comparison (e.g. "what can be detected" / "how this helps") — same
   tinted-panel language as .eq-credentials, but a plain 2-col grid instead of a flex row of
   facts, since each side here is a heading + lede + full checklist, not a single stat. */
.eq-compare-head { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.eq-compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(2rem, 5vw, 3.5rem); background: var(--wp--preset--color--sky-tint); border-radius: 18px; padding: clamp(2rem, 4vw, 3rem); }
.eq-compare__col h3 { margin: 0 0 0.75rem; font-family: var(--wp--preset--font-family--fraunces); font-weight: 500; font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.75rem); color: var(--wp--preset--color--accent); }
.eq-compare__col .eq-standard__lede { margin: 0 0 1rem; }
.eq-compare__col .eq-checklist { margin: 1.25rem 0; }
/* Scoped up from the base 20px/14px .eq-support__item-icon size — legible enough in the
   homepage's denser 6-card lists, but felt small against this panel's larger body text.
   Scoped to .eq-compare specifically so the homepage's own card lists stay untouched. */
.eq-compare__col .eq-support__item-icon { width: 30px; height: 30px; }
.eq-compare__col .eq-support__item-icon svg { width: 18px; height: 18px; }
@media (max-width: 720px) {
    .eq-compare { grid-template-columns: 1fr; }
}

/* ---- Testimonials: spotlight (one story at a time, like a guestbook) ---- */
.eq-spotlight__intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto clamp(2.25rem, 5vw, 3rem);
}
.eq-spotlight__heading {
    font-family: var(--wp--preset--font-family--fraunces);
    font-weight: 380;
    font-optical-sizing: none;
    font-variation-settings: "opsz" 18;
    letter-spacing: -0.01em;
    line-height: 1.08;
    color: var(--wp--preset--color--ink);
    font-size: clamp(2rem, 1.7rem + 1.4vw, 2.85rem);
    margin: 0.5rem 0 0;
}

.eq-spotlight {
    position: relative;
    display: grid;
    border: 1px solid var(--wp--preset--color--hairline);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 40px 70px -46px rgba(30,33,38,0.3), 0 4px 14px -6px rgba(30,33,38,0.08);
    overflow: hidden;
}
.eq-spotlight__slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0,0.42fr) minmax(0,0.58fr);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.eq-spotlight__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

/* ---- visual panel: photo (with monogram fallback) or video ---- */
.eq-spotlight__visual {
    position: relative;
    min-height: 380px;
    background: linear-gradient(155deg, #F4E7E0, #EFD9CE);
}
.eq-spotlight__monogram {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wp--preset--font-family--fraunces);
    font-style: italic;
    font-weight: 400;
    font-size: 7rem;
    color: var(--wp--preset--color--terracotta);
    opacity: 0.4;
    transition: opacity 0.2s ease;
}
.eq-spotlight__photo { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.2s ease; }
/* Slide 1's photo is a converted core/image block (className on the <figure>), so this
   companion reaches the real <img>. Slide 3's photo stays raw HTML inside the interactive
   video-frame (no native block fits a click-to-play overlay), where .eq-spotlight__photo
   sits directly on the <img> and the rule above already covers it — object-fit just needs
   adding there too since that plain rule no longer carries it. */
.eq-spotlight__photo,
.eq-spotlight__photo img { object-fit: cover; }
.eq-spotlight__photo img { width: 100%; height: 100%; display: block; }

.eq-spotlight__video-frame { position: absolute; inset: 0; cursor: pointer; }
.eq-spotlight__video-frame iframe {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border: 0; display: block;
    transition: opacity 0.2s ease;
}
.eq-spotlight__video-play {
    position: absolute; inset: 0; margin: auto;
    width: 58px; height: 58px; padding: 0;
    border: none; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: transform 0.2s ease;
}
.eq-spotlight__video-play:hover { transform: scale(1.06); }
.eq-spotlight__video-play svg { width: 18px; height: 18px; margin-left: 2px; }
.eq-spotlight__video-frame.is-playing .eq-spotlight__video-play,
.eq-spotlight__video-frame.is-playing .eq-spotlight__monogram,
.eq-spotlight__video-frame.is-playing .eq-spotlight__photo { opacity: 0; pointer-events: none; }

/* ---- content panel: pull-quote, full quote, meta, handwritten sign-off ---- */
.eq-spotlight__content {
    padding: clamp(1.9rem, 2vw + 1rem, 3.4rem);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
}
.eq-spotlight__mark {
    font-family: var(--wp--preset--font-family--fraunces);
    font-style: italic;
    font-size: 4.2rem;
    line-height: 0.6;
    color: var(--wp--preset--color--terracotta);
    opacity: 0.32;
}
.eq-spotlight__pull {
    font-family: var(--wp--preset--font-family--fraunces);
    font-style: italic;
    font-weight: 420;
    letter-spacing: -0.01em;
    line-height: 1.24;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
    color: var(--wp--preset--color--ink);
    margin: -1.5rem 0 0;
}
.eq-spotlight__full {
    font-size: 0.98rem;
    line-height: 1.68;
    color: #625F5A;
    max-width: 52ch;
    margin: 0;
}
.eq-spotlight__meta {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #948F89;
    margin: 0.3rem 0 0;
}
.eq-spotlight__signoff {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
}
/* The hairline rule is generated rather than a real element: now that this section is
   native Gutenberg blocks (editable/translatable from wp-admin), .eq-spotlight__signoff
   holds one real text node (the signature) — no markup slot for a second, purely
   decorative span. */
.eq-spotlight__signoff::after { content: ""; width: 130px; height: 1px; background: var(--wp--preset--color--hairline); }
.eq-spotlight__signature {
    font-family: var(--wp--preset--font-family--mrs-saint-delafield);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--wp--preset--color--ink);
}

/* ---- nav: prev/next arrows flanking the dots ---- */
/* .eq-section > * is a direct match for WordPress core's own
   `:root :where(.is-layout-constrained) > *{margin-block-start: 24px}` block-gap rule
   (global-styles-inline-css) — both are specificity (0,1,0) and margin-top/margin-block-start
   compete for the same physical edge, so at equal specificity source order decides, and
   core's rule was winning, silently capping this at 24px regardless of what was written
   here. Scoping to the real parent (.eq-section > .eq-spotlight__nav, specificity 0,2,0)
   settles the tie for good instead of depending on stylesheet load order. */
.eq-section > .eq-spotlight__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.6rem; }
/* Desktop only: on mobile the arrows leave flow (position: absolute, see
   .is-mobile-floating below) and their placement is computed live in JS from this
   row's own bounding rect — bumping margin-top here would shift that calculation too
   and misplace the floating arrows, so the extra breathing room is scoped to the
   breakpoint above where the row stays in normal flow under the card. */
@media (min-width: 721px) {
    .eq-section > .eq-spotlight__nav { margin-top: 2.5rem; }
}
.eq-spotlight__navbtn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    padding: 0;
    border: 1px solid var(--wp--preset--color--hairline);
    border-radius: 50%;
    background: var(--wp--preset--color--background-secondary);
    color: var(--wp--preset--color--ink);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.eq-spotlight__navbtn svg { width: 17px; height: 17px; }
.eq-spotlight__navbtn:hover { background: var(--wp--preset--color--ink); color: #fff; }
.eq-spotlight__navbtn:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.eq-spotlight__navbtn.is-hidden { opacity: 0; pointer-events: none; }

.eq-spotlight__dots { display: flex; justify-content: center; gap: 0.5rem; }
.eq-spotlight__dot {
    width: 9px; height: 9px;
    border-radius: 100px;
    border: none; padding: 0;
    background: var(--wp--preset--color--hairline);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}
.eq-spotlight__dot[aria-current="true"] { width: 26px; background: var(--wp--preset--color--terracotta); }
.eq-spotlight__dot:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .eq-spotlight__slide { transition: none; }
}

@media (max-width: 720px) {
    .eq-spotlight__slide { grid-template-columns: 1fr; }
    .eq-spotlight__visual { min-height: 260px; }

    /* Prev/next float over the card itself instead of sitting in a row below it. The
       buttons stay physically inside .eq-spotlight__nav (a sibling of .eq-spotlight, not
       a descendant) — no post_content markup change needed — so they can't be positioned
       with plain CSS relative to the card's box. testimonial-spotlight.js gives .eq-spotlight__nav
       position: relative and, on this breakpoint only, measures the card's live
       getBoundingClientRect() (height varies per slide/content) to set each button's top/
       left/right as inline px offsets, recomputed on resize and after every slide change.
       Only the buttons leave flow (position: absolute); the dots stay put in .eq-spotlight__nav's
       normal flex row below the card. */
    .eq-spotlight__nav { position: relative; }
    .eq-spotlight__navbtn.is-mobile-floating {
        position: absolute;
        transform: translateY(-50%);
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(2px);
        box-shadow: 0 6px 18px -8px rgba(30,33,38,0.35);
    }
}

/* ---- FAQ ---- */
.eq-faq { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.eq-faq__item { border-bottom: 1px solid var(--wp--preset--color--hairline); padding: 1.85rem 0; }
.eq-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-family: var(--wp--preset--font-family--fraunces); font-size: 1.15rem; color: var(--wp--preset--color--ink); line-height: 1.5; }
.eq-faq__item summary::-webkit-details-marker { display: none; }
.eq-faq__item summary:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }
.eq-faq__item .eq-chevron { color: var(--wp--preset--color--accent); flex-shrink: 0; transition: transform 0.2s ease; }
.eq-faq__item .eq-chevron svg { width: 18px; height: 18px; }
.eq-faq__item[open] .eq-chevron { transform: rotate(180deg); }
.eq-faq__item p { margin: 1.25rem 0 0; color: #55524E; line-height: 1.75; max-width: 62ch; }
.eq-faq__item ul { margin: 0.9rem 0 0; padding-left: 1.15rem; max-width: 62ch; }
.eq-faq__item ul li { color: #55524E; line-height: 1.6; margin: 0.5rem 0; }
.eq-faq__item p a { color: var(--wp--preset--color--accent); }

/* Section divider inside the full FAQ page's .eq-faq__list (the homepage's curated
   subset has no groupings, so this only ever appears there). Reuses .eq-eyebrow's
   voice rather than inventing a new label style. */
.eq-faq__category {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin: 2.75rem 0 0.25rem;
}
.eq-faq__list > .eq-faq__category:first-child { margin-top: 0; }

/* Homepage shows a curated first batch; more of the full FAQ page's question set fade in
   at the end of the list as the visitor opens what's already there (see faq-progressive.js). */
.eq-faq__item[hidden] { display: none; }
/* Escape hatch for a visitor who never opens a question — since opening one is what
   progressively reveals the rest, without this they'd assume the visible handful is
   everything. Sits after the last question in DOM, so it visually lands right after
   whichever ones are currently shown regardless of how many that is. Reuses .eq-link-arrow
   as-is (same weight/underline as "Ask us directly") rather than a one-off style; only
   margin-top is added here, and no border — the last item's own divider is enough, a
   second rule right under it just to hang the link off of reads as an accidental doubled line. */
.eq-faq__see-all { margin-top: 1.75rem; }
.eq-faq__item--revealed { opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease; }
.eq-faq__item--revealed.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .eq-faq__item--revealed { transition: none; }
}

/* ---- Contact ---- */
/* This full-bleed block deliberately isn't `.eq-section` (that class's max-width/padding-inline
   would clip its edge-to-edge background), so it misses the generic section-to-section rhythm
   rule below and needs its own top margin instead. */
/* Full-bleed breakout: this block's WP "constrained" layout caps it at the theme's
   content width like everything else on the page, so without this it never actually
   reaches the viewport edges despite looking like it should. */
.eq-contact-wrap {
    background: var(--wp--preset--color--blush);
    padding-block: clamp(3rem, 6vw, 5rem);
    margin-top: clamp(4.5rem, 9vw, 8rem);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Same asymmetric-corner identity as the photo frames elsewhere on the page (22px
       base, 64px on the accent corner) — mirrored onto opposite corners here since this
       block is a full-width band rather than a single framed photo. */
    border-radius: 22px;
    border-top-left-radius: 64px;
    border-bottom-right-radius: 64px;
}
.eq-contact-wrap + .eq-blog-wrap { margin-top: clamp(4.5rem, 9vw, 8rem); }
.eq-contact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
.eq-contact__img { width: 100%; height: 220px; display: block; margin-bottom: 1.75rem; }
.eq-contact__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
/* A connected vertical timeline instead of plain floating numbers — this is the
   reassurance moment right next to the form, so the process should read as a single
   continuous, already-mapped-out path rather than three disconnected facts. */
.eq-steps { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; }
.eq-steps li { display: flex; align-items: flex-start; gap: 1rem; position: relative; padding-bottom: 1.75rem; }
.eq-steps li:last-child { padding-bottom: 0; }
.eq-steps li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 34px;
    bottom: 2px;
    width: 2px;
    background: var(--wp--preset--color--hairline);
}
.eq-steps__num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--wp--preset--color--navy);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 16px -8px rgba(44,64,122,0.5);
}
.eq-steps li > div strong { display: block; color: var(--wp--preset--color--ink); }
.eq-steps li > div span { display: block; font-size: 0.9rem; color: #625F5A; margin-top: 0.15rem; line-height: 1.45; }
.eq-contact__phone { color: #4B4844; }
.eq-contact__phone a { color: var(--wp--preset--color--ink); font-weight: 700; text-decoration-color: var(--wp--preset--color--accent); }

/* Nudges the card right, closing part of the gap to the pink background's edge (which is
   wider than the column gap on its left, since the section's own 1200px cap centers with
   room to spare inside the full-bleed wrap) so the space on each side of the card reads
   as closer to even, without widening the section itself. */
.eq-contact__form-card { background: #fff; border-radius: 20px; padding: clamp(1.75rem, 3vw, 2.5rem); margin-left: clamp(0px, 3.5vw, 75px); box-shadow: 0 32px 56px -24px rgba(30,33,38,0.28), 0 6px 16px -6px rgba(30,33,38,0.12); }
/* Standalone variant: no left column beside it (e.g. a plain application-form section), so
   center it instead of offsetting right the way the two-column contact layout needs. */
.eq-contact__form-card--solo { margin-left: auto; margin-right: auto; max-width: 640px; }
.eq-contact__form-card .gform_wrapper { margin: 0; }
.eq-contact__form-card .gfield { margin-bottom: 0.85rem !important; }
/* First/Last name read as one "Your name" section: field 6's label carries the caption.
   Field 7 keeps its own real "Your last name" label — same styling as every other
   field's label, so it doesn't read as smaller or lower-priority — rather than relying
   on the placeholder alone, which disappears the moment someone starts typing. Both
   fields keep their original IDs, so the {First Name:6}/{Last Name:7} merge tags used
   in the notification emails and the AlayaCare webhook URL are unaffected. */
/* margin-block-start needs !important: this note is a direct child of .eq-contact__form-card,
   which matches the .wp-block-group[class*="eq-"] > * block-gap reset above (specificity
   (0,2,0)) — a plain margin-top here (0,1,0) loses to it and silently collapses back to 0,
   which is why the note used to sit flush under the submit button. */
.eq-contact__form-note { margin: 1rem 0 0; margin-block-start: 1rem !important; font-size: 0.8rem; color: #8B857E; text-align: center; }
/* Eyebrow-style labels echo the small-caps kicker used everywhere else on the page
   (TRUSTED BY FAMILIES, etc.) instead of generic bold form-label text. */
.eq-contact__form-card .gfield_label,
.eq-contact__form-card .gform-field-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #83807B;
    margin-bottom: 0.6rem;
}

/* Inputs: taller and roomier, soft tinted fill at rest, crisp accent-blue focus ring —
   feels considered rather than the bare, cramped default. */
.eq-contact__form-card input[type="text"],
.eq-contact__form-card input[type="email"],
.eq-contact__form-card input[type="tel"],
.eq-contact__form-card input[type="number"],
.eq-contact__form-card textarea {
    height: 54px !important;
    padding: 0 1.1rem !important;
    font-size: 0.975rem !important;
    border-radius: 12px !important;
    background: #FBFAF8;
    box-shadow: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.eq-contact__form-card textarea {
    height: 90px !important;
    padding: 0.9rem 1.1rem !important;
    line-height: 1.55;
}
.eq-contact__form-card ::placeholder { color: #A9A39C; }
.eq-contact__form-card input[type="text"]:hover,
.eq-contact__form-card input[type="email"]:hover,
.eq-contact__form-card input[type="tel"]:hover,
.eq-contact__form-card input[type="number"]:hover,
.eq-contact__form-card textarea:hover {
    border-color: #D8CFC8 !important;
}
.eq-contact__form-card input[type="text"]:focus,
.eq-contact__form-card input[type="email"]:focus,
.eq-contact__form-card input[type="tel"]:focus,
.eq-contact__form-card input[type="number"]:focus,
.eq-contact__form-card textarea:focus {
    background: #fff;
    border-color: var(--wp--preset--color--accent) !important;
    box-shadow: 0 0 0 4px rgba(46,109,164,0.14) !important;
    outline: none;
}

/* Radio choices as selectable pills (native circle hidden but still the real click
   target) instead of tiny default radio dots — easier to tap, reads as more considered. */
.eq-contact__form-card .ginput_container_radio .gfield_radio { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.eq-contact__form-card .gchoice { position: relative; margin: 0 !important; }
.eq-contact__form-card .gfield-choice-input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer;
}
.eq-contact__form-card .gform-field-label--type-inline {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--wp--preset--color--hairline);
    border-radius: 999px;
    background: transparent;
    color: #625F5A;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.eq-contact__form-card .gfield-choice-input:checked + .gform-field-label--type-inline {
    border-color: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--ink);
    font-weight: 600;
}
.eq-contact__form-card .gfield-choice-input:focus-visible + .gform-field-label--type-inline {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

/* Submit: matches the site's actual primary-CTA color (the hero's "Book a Consultation"
   button, .eq-btn--dark) rather than the block's default accent blue, so this reads as
   THE main action of the page, not just another blue element among the form's own
   accents. Sized up so it can't be missed at the one moment that most needs confidence. */
.eq-contact__form-card .gform_footer { margin-top: 0.75rem; text-align: center; justify-content: center; }
.eq-contact__form-card .gform_button {
    width: auto;
    min-width: 260px;
    padding: 1.25rem 2.25rem !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.01em;
    border: none;
    background: var(--wp--preset--color--ink) !important;
    color: #fff !important;
    box-shadow: 0 18px 36px -14px rgba(30,33,38,0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.eq-contact__form-card .gform_button:hover {
    background: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 22px 40px -14px rgba(30,33,38,0.6);
}
@media (prefers-reduced-motion: reduce) {
    .eq-contact__form-card .gform_button:hover { transform: none; }
}

/* ---- Kept sections restyle: Partners, Testimonials, Blog ---- */
.eq-partners-wrap h2 { font-family: var(--wp--preset--font-family--fraunces) !important; font-weight: 500 !important; text-transform: none !important; }
.eq-testimonials-wrap { background: var(--wp--preset--color--blush) !important; }
.eq-testimonials-wrap h2 { font-family: var(--wp--preset--font-family--fraunces) !important; font-weight: 500 !important; }
.eq-testimonials-wrap h2 mark { color: var(--wp--preset--color--accent) !important; font-style: italic; }
.eq-testimonials-wrap .wp-block-column { border-radius: 16px !important; }
.eq-blog-wrap h2 { font-family: var(--wp--preset--font-family--fraunces) !important; font-weight: 500 !important; }
.eq-blog-wrap h2 mark { font-style: italic; }

.eq-blog-wrap .wp-block-post-template { row-gap: clamp(2rem, 4vw, 2.75rem); }
.eq-blog-wrap .wp-block-post {
    background: #fff;
    border: 1px solid var(--wp--preset--color--hairline);
    border-radius: 20px 20px 40px 20px;
    padding: 1.1rem 1.1rem 1.75rem;
    box-shadow: 0 24px 44px -30px rgba(30,33,38,0.26);
    transition: transform 0.32s cubic-bezier(0.16, 0.8, 0.24, 1), box-shadow 0.32s ease;
}
.eq-blog-wrap .wp-block-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 50px -26px rgba(30,33,38,0.32);
}
.eq-blog-wrap .wp-block-post-featured-image {
    margin: 0 0 1.1rem;
    overflow: hidden;
    border-radius: 18px 18px 40px 18px;
}
.eq-blog-wrap .wp-block-post-featured-image img {
    border-radius: 18px 18px 40px 18px !important;
    transition: transform 0.5s cubic-bezier(0.16, 0.8, 0.24, 1);
}
.eq-blog-wrap .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.045); }
.eq-blog-wrap .wp-block-post-date { color: #948F89; font-size: 0.8rem; letter-spacing: 0.02em; }
.eq-blog-wrap .wp-block-post-title { margin: 0.6rem 0 !important; }
.eq-blog-wrap .wp-block-separator { opacity: 0.6; }
.eq-blog-wrap .wp-block-post-template .wp-block-post:not(.has-post-thumbnail) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
}

/* ---- Selection & focus, themed not default ---- */
.eq-section ::selection { background: var(--wp--preset--color--accent); color: #fff; }

/* ---- Scroll reveal: progress is driven per-frame by JS (scroll-scrubbed, not time-based),
   so the CSS only supplies the pre-JS fallback state — no transition here, JS writes every frame. ---- */
.eq-reveal { opacity: 0; }

/* Scroll-linked zoom: image breathes from a soft zoom-in, settles to true size near viewport center,
   eases into a slight zoom again as it leaves — the quiet "Ken Burns" luxury sites use. JS drives the scale. */
.eq-parallax-img { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
    .eq-reveal, .eq-reveal--img { opacity: 1; transform: none; transition: none; }
    .eq-parallax-img { transform: none !important; }
}

/* ---- Editor canvas ---- */
/* reveal.js/parallax.js never run inside the wp-admin block editor (front-end scripts
   only), so every .eq-reveal/.eq-reveal-shape/.eq-parallax-img element — the scroll-scrubbed
   fade/translate content across nearly every section — sits stuck at its pre-JS opacity:0
   (or equivalent hidden) state there, even though add_editor_style now loads this whole
   stylesheet correctly. WP wraps editor canvas content in .editor-styles-wrapper, so scope
   the fix to that instead of touching the front-end rules above. */
.editor-styles-wrapper .eq-reveal,
.editor-styles-wrapper .eq-reveal--img { opacity: 1 !important; transform: none !important; }
.editor-styles-wrapper .eq-reveal-shape::before,
.editor-styles-wrapper .eq-standard__media::before { opacity: 1 !important; }
.editor-styles-wrapper .eq-parallax-img { transform: none !important; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    /* Hermès-style overlay header: on pages that open on a full-bleed hero, the header
       floats transparent over the video (logo/burger forced light) instead of sitting in
       its own white bar, then turns solid white once .is-header-scrolled lands on <body>
       (toggled by assets/js/header-scroll.js) so nav stays legible over regular content. */
    body:is(.page-id-10322, .page-id-11172) header.wp-block-template-part {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        /* The video behind this header is allowed to bleed under the notch/Dynamic Island
           (body:is(.page-id-10322, .page-id-11172) cancels the global safe-area reservation above) — but the
           header's own logo/nav content still needs to clear it, so it gets that space
           back just for itself, as padding rather than a position offset so its own
           background (once .is-header-scrolled makes it opaque) still covers the notch
           area too instead of leaving a gap. */
        padding-top: env(safe-area-inset-top);
        box-sizing: border-box;
    }
    /* background-color is deliberately NOT in this transition: header-scroll.js toggles
       .is-header-scrolled on every scroll event (not just once), so a fast scroll near the
       40px threshold can cross it several times in a row; a 0.3s fade on the one property
       that makes this fixed bar opaque left a real window where page content scrolling
       underneath showed through a half-transparent logo bar. Opacity/filter/color still
       ease for the logo-color swap, which doesn't gate legibility the way the backdrop does. */
    body:is(.page-id-10322, .page-id-11172) header.wp-block-template-part .has-cream-background-color,
    body:is(.page-id-10322, .page-id-11172) header.wp-block-template-part .wp-block-separator,
    body:is(.page-id-10322, .page-id-11172) header.wp-block-template-part .custom-logo,
    body:is(.page-id-10322, .page-id-11172) header.wp-block-template-part .wp-block-navigation__responsive-container-open {
        transition: opacity 0.3s ease, filter 0.3s ease, color 0.3s ease;
    }
    body:is(.page-id-10322, .page-id-11172):not(.is-header-scrolled) header.wp-block-template-part .has-cream-background-color {
        background-color: transparent !important;
    }
    body:is(.page-id-10322, .page-id-11172):not(.is-header-scrolled) header.wp-block-template-part .wp-block-separator {
        opacity: 0;
    }
    body:is(.page-id-10322, .page-id-11172):not(.is-header-scrolled) header.wp-block-template-part .custom-logo {
        filter: brightness(0) invert(1);
    }
    body:is(.page-id-10322, .page-id-11172):not(.is-header-scrolled) header.wp-block-template-part .wp-block-navigation__responsive-container-open {
        color: #fff;
    }
    /* Header is now fixed (out of flow) on hero pages, so the hero can butt right up
       against the viewport's top edge and show through behind it — the content wrapper's
       own top padding (normally just a gap under the in-flow white header) would otherwise
       leave a sliver of bare background above the video. */
    body:is(.page-id-10322, .page-id-11172) .eq-hero { margin-top: 0; }
    body:is(.page-id-10322, .page-id-11172) .wp-site-blocks > .wp-block-group.is-layout-flow { padding-top: 0; }

    /* Generic mobile hero stacking — media first, then copy — applies to every .eq-hero,
       homepage or not: a sane "traditional" default even without the full-bleed treatment
       below. */
    .eq-hero { display: flex; flex-direction: column; gap: 1.75rem; position: relative; padding-top: 0; }
    .eq-hero__media { order: -1; }

    /* Full-bleed banner: image (and its text overlay) spans the true viewport edge to edge.
       Cancels both this section's own gutter (--eq-pad) and the theme's fixed 24px content-wrapper padding.
       Homepage-only (see the safe-area comment near the top of this file for why): every other
       .eq-hero page (e.g. /plus/) keeps its media as a normal, contained, rounded-corner box
       inside the section's usual gutters instead — a compact demo/testimonial video doesn't
       want the ambient-b-roll full-bleed treatment this was built for. */
    body:is(.page-id-10322, .page-id-11172) .eq-hero__media {
        width: calc(100% + 2 * (var(--eq-pad) + 24px));
        margin-inline: calc(-1 * (var(--eq-pad) + 24px));
    }
    /* Portrait, near-full-screen format (Hermès-style) instead of a short banner strip;
       same signature asymmetric corner used on .eq-standard__frame elsewhere on the site.
       Homepage-only, same reasoning as the full-bleed banner rule above. */
    body:is(.page-id-10322, .page-id-11172) .eq-hero__img { border-radius: 0; border-bottom-right-radius: 64px; height: 100vh; height: 100dvh; }
    body:is(.page-id-10322, .page-id-11172) .eq-hero__img img { border-radius: 0; border-bottom-right-radius: 64px; height: 100%; object-position: 65% center; }

    /* The hero video is landscape (960x540) cropped into a near-full-screen portrait frame
       on mobile — a fixed object-position only ever shows one narrow vertical slice of it,
       so anyone standing outside that slice is permanently cropped out. Panning the crop
       across the frame over the video's own real duration (20.433s, hardcoded to this
       specific file — retime this if hero-video.mp4 is ever replaced) instead reveals the
       whole scene once per loop, timed to restart together with the video's own "loop"
       attribute since both run on real elapsed time from the same page-load moment.
       A there-and-back pan (left head → right head → back to left head) rather than a
       one-way sweep, so the loop restarts from the same crop it ends on instead of jump-
       cutting back to the start — 12%/88% land roughly on each person's head at this frame's
       composition, checked against the source video, not just guessed. */
    .eq-hero__media-asset--video.eq-hero__img {
        animation: eq-hero-video-pan 20.433s ease-in-out infinite;
    }
    @keyframes eq-hero-video-pan {
        0% { object-position: 12% center; }
        50% { object-position: 88% center; }
        100% { object-position: 12% center; }
    }
    @media (prefers-reduced-motion: reduce) {
        .eq-hero__media-asset--video.eq-hero__img { animation: none; object-position: 50% center; }
    }

    /* Left-side scrim, spanning the full banner height for a clean duotone panel effect.
       Homepage-only — every other .eq-hero page keeps this in normal document flow (no
       absolute positioning, no scrim, no forced white text), directly under its now-compact
       media box instead of overlaid on top of it. */
    body:is(.page-id-10322, .page-id-11172) .eq-hero__heading {
        position: absolute;
        top: 0;
        left: -24px;
        right: -24px;
        height: 100vh;
        height: 100dvh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 2;
        padding: 1.5rem 1.75rem;
        background: linear-gradient(100deg, rgba(18,20,24,0.62) 0%, rgba(18,20,24,0.42) 42%, rgba(18,20,24,0) 68%);
    }
    /* The eyebrow reads better as part of the copy below than squeezed into the video's
       scrim — .eq-hero__eyebrow-mobile (right before the lede) takes over on mobile.
       Homepage-only, same reasoning as the scrim rule above. */
    body:is(.page-id-10322, .page-id-11172) .eq-hero__heading .eq-eyebrow { display: none; }
    body:is(.page-id-10322, .page-id-11172) .eq-hero__heading .eq-hero__title { color: #fff; max-width: 12ch; }
    body:is(.page-id-10322, .page-id-11172) .eq-hero__eyebrow-mobile { display: block; }

    /* Third placement: anchored top-left under the logo (the one corner not contested by
       the chevron, the sticky bar, or the fixed Brevo chat bubble — see the earlier attempts
       this replaced). Plain white underlined text tested there read as a stray link, not a
       trust badge — restored the same liquid-glass pill language as the desktop badge
       (rgba white + backdrop-blur + soft shadow) so it reads as chrome, not copy, plus an
       actual Google "G" mark so the source of the rating is legible at a glance without
       relying on the word "Google" in 11px text. */
    .eq-hero__badge-slot--desktop { display: none; }
    .eq-hero__badge-slot--mobile {
        display: block;
        position: absolute;
        left: 0;
        /* top is set in hero-scroll-hint.js, measured live from the logo's real bottom
           edge — a static rem value here was tuned once against a logged-in admin-bar
           viewport and landed right on top of the tagline for a real (logged-out) visitor,
           since the admin bar shifts the whole page (and this element's positioning
           context) down by a fixed amount that isn't present for real visitors. */
        top: 6rem;
    }
    .eq-hero__badge-slot--mobile .eq-hero__badge {
        position: static;
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        font-weight: 600;
        gap: 0.4rem;
        color: var(--wp--preset--color--ink);
        background: #fff;
        border: none;
        border-radius: 999px;
        /* Two layers: the original tight drop shadow for lift, plus a soft, wide, low-opacity
           halo around the whole silhouette so the pill's edge feathers into the video instead
           of reading as a hard-cut sticker — a blur on the edge itself, not just the glass. */
        box-shadow: 0 8px 20px -8px rgba(20,20,20,0.35), 0 0 24px 6px rgba(255,255,255,0.12);
    }
    /* Google's own four-color "G" mark (official brand SVG), inline before the stars —
       identifies the source of the rating at a glance instead of relying only on the
       "Google Reviews" text at 11px. */
    .eq-hero__badge-slot--mobile .eq-hero__badge::before {
        content: "";
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8c-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C12.955 4 4 12.955 4 24s8.955 20 20 20s20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z'/%3E%3Cpath fill='%23FF3D00' d='M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4C16.318 4 9.656 8.337 6.306 14.691z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.611 20.083H42V20H24v8h11.303c-.792 2.237-2.231 4.166-4.087 5.571l6.19 5.238C40.971 35.205 44 30 44 24c0-1.341-.138-2.65-.389-3.917z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
    .eq-hero__badge-slot--mobile .eq-hero__badge:hover { transform: none; }
    .eq-hero__badge-slot--mobile .eq-hero__badge .eq-stars svg { width: 11px; height: 11px; }
    /* Five stars read as a decorative repeated icon at this size — one yellow star plus the
       numeric score already carries the rating; the other four are still in the DOM (shared
       markup with desktop, see inc/shortcodes/google-badge.php) so screen readers/the
       aria-label still get the full "X out of 5" context, just visually trimmed here. */
    .eq-hero__badge-slot--mobile .eq-stars svg:not(:first-child) { display: none; }
    /* "Google" is redundant text once the G mark above already carries that identity —
       drop it here, keep it on desktop (untouched). The aria-label on the link still reads
       the full "4.9 out of 5, 126 Google Reviews" either way. */
    .eq-hero__badge-slot--mobile .eq-hero__badge-brand { display: none; }

    /* The 100dvh full-bleed video fills the entire first screen on mobile with nothing
       hinting there's more below it — added by assets/js/hero-scroll-hint.js, not
       post_content, so it needs no per-language markup. Same glass-pill language as the
       review badge above (blurred translucent white) for visual consistency with the rest
       of the hero's overlay chrome. Faded out permanently the first time the page scrolls;
       see the JS for that and the reduced-motion handling. */
    .eq-hero__scroll-hint {
        position: absolute;
        left: 50%;
        bottom: clamp(20px, 5vh, 40px);
        transform: translateX(-50%);
        z-index: 3;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,0.55);
        backdrop-filter: blur(14px) saturate(180%);
        -webkit-backdrop-filter: blur(14px) saturate(180%);
        border: 1px solid rgba(255,255,255,0.65);
        box-shadow: 0 8px 20px -8px rgba(20,20,20,0.35);
        color: #fff;
        cursor: pointer;
        opacity: 1;
        transition: opacity 0.4s ease;
    }
    .eq-hero__scroll-hint.is-dismissed { opacity: 0; pointer-events: none; }
    .eq-hero__scroll-hint svg { width: 18px; height: 18px; animation: eq-scroll-hint-bounce 1.6s ease-in-out infinite; }
    @keyframes eq-scroll-hint-bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(5px); }
    }
    @media (prefers-reduced-motion: reduce) {
        .eq-hero__scroll-hint svg { animation: none; }
    }

    /* Stacked list instead of a horizontal row: every credential sits in the page's own
       vertical scroll, so nothing is hidden behind a swipe gesture. Below 901px the strip
       also picks up the desktop's blush card (was plain white between two hairlines here —
       same color/weight as the sections on either side, so it read as pass-through
       whitespace instead of a reassurance beat). */
    .eq-credentials { background: var(--wp--preset--color--blush); border-top: none; border-bottom: none; border-radius: 18px; padding-inline: var(--eq-pad); padding-block: clamp(1.5rem, 5vw, 2rem); }
    .eq-credentials__list { flex-direction: column; }
    .eq-credential {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 1.25rem;
        padding-inline: 0;
        padding-block: 1.15rem;
        border-left: none;
        border-top: 1px solid var(--wp--preset--color--hairline);
    }
    .eq-credential:first-child { border-top: none; padding-top: 0; }
    .eq-credential:last-child { padding-bottom: 0; }
    .eq-credential__label { text-align: right; max-width: 58%; }
    /* Fixed 56px offset was tuned for the desktop column's width; at mobile width it
       overshot the photo enough to look detached instead of a subtle echo behind it. */
    .eq-standard__media::before { transform: translate(-20px, 20px); }
    .eq-support__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .eq-faq { grid-template-columns: 1fr; }
    .eq-contact { grid-template-columns: 1fr; }
    /* Fluid type (theme.json's "medium" preset) shrinks body copy well below 16px at
       these widths, which left this trust-building list reading noticeably small. */
    .eq-checklist > li p { font-size: 1rem; }
    /* The card's own margin-left nudge (see .eq-contact__form-card) exists to close the
       gap toward the pink background on the two-column desktop layout — once .eq-contact
       collapses to a single column above, that same nudge just eats into the card's width
       and pushes it off-center for no reason, which is what read as "cramped" on mobile. */
    .eq-contact__form-card { margin-left: 0; }
}
@media (max-width: 640px) {
    .eq-support__grid { grid-template-columns: 1fr; }
    body:is(.page-id-10322, .page-id-11172) .eq-hero__heading .eq-hero__title { font-size: clamp(2rem, 8vw, 2.6rem); max-width: 12ch; }
}

@media (max-width: 600px) {
    /* The sticky footer-mobile bar (Call Us / Contact) already covers "Book a Consultation"
       below this width, so that button is redundant — but the services link isn't
       duplicated anywhere else, so it stays. Placed last in the cascade so it wins over
       the earlier same-specificity .eq-hero__ctas rule. */
    .eq-hero__ctas .eq-btn--dark { display: none; }

    /* Brevo's own stylesheet sets this widget's resting position with no inline bottom/right
       to override, so it needs !important — otherwise it sits under the sticky Call/Contact
       bar (~79px tall), overlapping it and, since both use the same blue, reading as one
       confused button. */
    #brevo-conversations.brevo-conversations { bottom: 92px !important; }
}