/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/* =============================================================================
   PROJECT LAYER — Crossroads Counseling
   =============================================================================
   Loads after assets/css/ab-base.css, which loads after Impreza's us-style.
   Order is set in functions.php; nothing here needs !important to beat the base.

   What used to sit here (tokens, narrow-*, flex-row-*, p-*, h*-style, the grid
   normalisation) now lives in ab-base.css. Only what differs from the base, or
   what the base does not carry, belongs in this file.
   -------------------------------------------------------------------------- */

:root {
	/* The one number that changes per project. Impreza emits
	   .g-cols.via_flex.type_default { margin: 0 -10px } on this build, so 20px.
	   --col-width and --col-step derive from it in ab-base; the old project
	   formula calc((W + 20px)/12 - 20px) is algebraically the same thing and is
	   therefore not restated here. */
	--grid-gutter: 20px;

	/* Radius: ab-base owns the scale, the project points the aliases at it. */
	--radius-img: var(--radius-sm);   /* was --img-border-radius: 8px  */
	--radius-box: var(--radius-sm);   /* was --box-border-radius: 8px  */
	--radius-row: 10px;               /* was --row-border-radius: 10px */

	/* ab-base ships a 4px blur; the design draws 2px everywhere it uses this
	   shadow (blog cards, CTA boxes, Locations cards). Same colour, same offset. */
	--shadow-md: 0 4px 2px 0 rgba(0, 0, 0, .07);

	/* Section height ladder: only `large` deviates from Impreza's 6rem. */
	--section-pad-large: 6.6rem;

	/* Small-text scale, pinned to this project's pixel values.
	   MEASURED: Global Text on this build is 15px, not 16 — so ab-base's own
	   steps resolve 1px short of what this project draws, and each one used here
	   is restated as a ratio against 15px. Rendering is unchanged AND the scale
	   still tracks Global Text if it is ever retuned.

	   Names follow ab-base 0.14.1, where the ladder was renumbered: it now runs
	   3xs 11 · 2xs 12 · xs 13 · sm 14 · md 15 · (body, owned by Global Text) · lg 17.
	   Every name below moved one step down from the 0.9.3 spelling, and --fs-xl
	   is gone — 16px here is one step ABOVE this build's 15px body copy, which is
	   exactly what --fs-lg means. Do not reintroduce --fs-xl.

	   Read it back before trusting this:
	     getComputedStyle(document.documentElement).fontSize */
	--fs-3xs: 0.7333rem;   /* 11px @ 15px root, was --fs-2xs */
	--fs-xs:  0.8667rem;   /* 13px @ 15px root, was --fs-sm  */
	--fs-sm:  0.9333rem;   /* 14px @ 15px root - pinned 2026-10-04 for the accordion */
	--fs-lg:  1.0667rem;   /* 16px @ 15px root, was --fs-xl  */
}

/* Lists keep the project's 1.5rem rather than ab-base's 2rem — this is a
   deliberate hold so the migration does not silently reflow every list on the
   site. Drop this rule to adopt the base value. */
ul,
ol {
	margin-left: 1.5rem;
}

/* Impreza emits the stacked gap as `margin-bottom` on EVERY child of a
   stack_on_mobiles hwrapper -- its own rule is `.w-hwrapper.stack_on_mobiles >
   :not(script)`, with no :last-child exclusion, unlike the vwrapper's. The
   wrapper has no padding and no border, so the last child's margin collapses
   out of it and lands under the wrapper, adding to whatever follows -- in
   practice the section's own bottom padding. */
.l-body .w-hwrapper.stack_on_mobiles > :not(script):last-child {
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   PROJECT EXTENSIONS TO ab-base UTILITIES
   ab-base ships .flex-row-1…6; these two modifiers are ours and have no
   equivalent in the base, so they must live here or they disappear with it.
   -------------------------------------------------------------------------- */

.flex-row-2.no-stretch > *,
.flex-row-3.no-stretch > *,
.flex-row-4.no-stretch > *,
.flex-row-5.no-stretch > *,
.flex-row-6.no-stretch > * {
	flex-grow: 0;
}

.flex-row-2.ratio-2-3 > *:nth-child(1) {
	flex-grow: 2;
}

.flex-row-2.ratio-2-3 > *:nth-child(2) {
	flex-grow: 3;
}

/* Per-instance gap overrides. These MUST set --gap, not just `gap`: ab-base
   computes each child's flex-basis from calc((100% - n * var(--gap)) / n), so a
   component that changes only the visual gap leaves the basis maths reading the
   default gutter. The children then measure too wide for the real gap and the
   row wraps to one item per line.

   Measured on Home: .w-hwrapper.methods-hwrapper sets column-gap: 6rem, but with
   --gap left at the 20px gutter the two method cards each claimed
   calc((100% - 20px) / 2) and could no longer sit side by side. */
.flex-row-2.methods-hwrapper {
	--gap: 6rem;
}

/* -----------------------------------------------------------------------------
   CARD BODY COPY
   Global Text is 600 on this site, so 500 has to be stated explicitly.

   One rule for what used to be five: .sm-font-size (Home method cards), plus
   three separate per-component rules that already said the same thing, plus the
   service cards which were wrong at the inherited 600. Reached by structure —
   the component classes are already on the wrappers, so no class per paragraph.
   -------------------------------------------------------------------------- */

.services-hwrapper .wpb_text_column,
.office-hours-vwrapper .wpb_text_column,
.methods-hwrapper .wpb_text_column,
.service-approaches-hwrapper .wpb_text_column,
.w-tabs.style_default .wpb_text_column {
	font-size: var(--fs-xs);
	line-height: 1.7;
	font-weight: 500;
}

/* Accordion answers one step up from the card copy: 14 instead of 13
   (agreed 2026-10-04). */
.w-tabs-section-content {
	font-size: var(--fs-sm);
	line-height: 1.7;
	font-weight: 500;
}

/* -----------------------------------------------------------------------------
   TEXT COLOUR UTILITY
   -----------------------------------------------------------------------------
   The design draws some body copy in #343232 rather than the content text
   colour (#445851) — MEASURED against Figma 1072:932 (Locations intro). It is
   NOT the whole body: 1072:967 on the same page is explicitly #445851, so the
   content token stays as it is and this is opt-in per block.

   #343232 was previously reachable only as --color-alt-content-text, which is
   the ALTERNATE row scheme's text colour: using it here would have silently
   tied this paragraph to the orange band's palette. It now has its own Custom
   Global Color, "Body Text Dark" (slug _body_text_dark), so the two can move
   independently.

   ab-base ships no colour utilities at all (only fs-* and text-balance /
   text-pretty), so this is the first one — same shape, project-owned.
   -------------------------------------------------------------------------- */

.text-dark,
.text-dark p {
	color: var(--color-body-text-dark);
}

/* -----------------------------------------------------------------------------
   LEGACY CLASS COMPAT — REMAINDER, goes with the responsive pass (wave 2)
   -----------------------------------------------------------------------------
   Wave 1 deleted 2026-09-25: the box family, .p-xs, .p-24, .pad-half-col*,
   .balance-wrap, .pretty-wrap, .sm-font-size — all renamed in the content.

   .p-60 -> p-2xl done 2026-10-03 on block 9537, its only user: the drop to
   --space-lg on phones (ab-base at 600px, restated up to 767px) that the
   rename brings was wanted there. One remains,
   and it changes behaviour when renamed:
     .col-extend-*    -> col-extend-*  (the block below keeps the original
                        min-width: 1280px; ab-base starts at 1025px, so a rename
                        would switch the extension on between 1025 and 1279 —
                        a real layout change)
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {

	.col-extend-right-md > .vc_column-inner {
		width: calc(100% + var(--col-bleed-md));
	}

	.col-extend-right-xl > .vc_column-inner {
		width: calc(100% + var(--col-bleed-xl));
	}

	.col-extend-both-sm > .vc_column-inner {
		width: calc(100% + var(--col-bleed-sm) * 2);
		margin-left: calc(var(--col-bleed-sm) * -1);
	}

	.col-extend-both-lg > .vc_column-inner {
		width: calc(100% + var(--col-bleed-lg) * 2);
		margin-left: calc(var(--col-bleed-lg) * -1);
	}

	/* Default Footer (9567), i.e. every page. HELD AT 60px ON PURPOSE: the old
	   project --col-bleed-xxl was a flat 60px, while ab-base derives
	   --col-bleed-2xl from the gutter (20px x 2.5 = 50px). Renaming these to
	   col-extend-{l,r}-2xl would quietly pull the footer in by 10px a side.
	   Decide that separately; do not fold it into the rename. */
	.col-extend-right-xxl > .vc_column-inner {
		width: calc(100% + 60px);
	}

	.col-extend-left-xxl > .vc_column-inner {
		width: calc(100% + 60px);
		margin-left: -60px;
	}
}

/* ============================================================================
   PROJECT COMPONENTS
   ========================================================================== */

/* Header */

.l-subheader.at_middle .l-subheader-h {
    box-shadow: 0 1px 0 rgba(99, 126, 114, 0.30);
}

/* Nav */

/* The pill's shape is not tied to .no-touch: on a touch device (or a browser
   emulating one) the active item kept its colour but lost padding and radius,
   and looked unlike the desktop one. Only the hover state below is no-touch. */
.ush_menu_1 .w-nav-item.level_1>a:not(.w-btn) .w-nav-title {
    padding: 4px 11px 6px 11px;
    border-radius: 3px;
}

.ush_menu_1.type_desktop .w-nav-item.level_1.current-menu-item>a:not(.w-btn) .w-nav-title,
.ush_menu_1.type_desktop .w-nav-item.level_1.current-menu-ancestor>a:not(.w-btn) .w-nav-title,
.ush_menu_1.type_desktop .w-nav-item.level_1.current-page-ancestor>a:not(.w-btn) .w-nav-title {
    background: var(--color-light-primary);
}

.no-touch .ush_menu_1 .w-nav-item.level_1.opened>a:not(.w-btn) .w-nav-title,
.no-touch .ush_menu_1 .w-nav-item.level_1:hover>a:not(.w-btn) .w-nav-title {
    background: var(--color-light-primary);
}

/* Dropdown caret on the items that open a panel (Marija, Ruttl 2026-10-02,
   "arrows on the items with a dropdown"; Figma 1217:330: Phosphor CaretDown
   12x12, 4 after the label, in the label's colour). The element comes from the
   header's own switch - menu:1 dropdown_arrow 1 - which prints a .w-nav-arrow
   after the title with Impreza's FontAwesome angle-down. The glyph is swapped
   for the Figma caret (assets/img/caret-down.svg) as a mask, so it is painted
   in currentColor and turns white with the label on the pill. It sits INSIDE
   the pill: the title gets 27 on the right (11 + 4 + 12) and the caret is
   pulled back over it by that 23 plus the anchor's own 7 gap. Each such item
   is 5 wider than before; 1440: the row is 1105 in the 1180 cell (was 1075). */
.ush_menu_1 .w-nav-item.level_1.menu-item-has-children>a:not(.w-btn) .w-nav-title {
    padding-right: 27px;
}

.l-body .ush_menu_1 .w-nav-list.level_1>.menu-item-has-children>a .w-nav-arrow {
    position: relative;
    z-index: 1;
    align-self: center;
    width: 12px;
    height: 12px;
    margin-left: -30px;
    background-color: currentColor;
    -webkit-mask: url('assets/img/caret-down.svg') center / 12px 12px no-repeat;
    mask: url('assets/img/caret-down.svg') center / 12px 12px no-repeat;
}

.l-body .ush_menu_1 .w-nav-list.level_1>.menu-item-has-children>a .w-nav-arrow::before {
    content: none;
}

/* Not on laptops. 1025-1279 the row already does not fit (open question in
   the handover: about 41 over at 1025); the carets would add 30 more - at
   1100 the row went 45..1043 in a cell ending at 1040. Until that row is
   decided, laptops keep the row they had. */
@media (min-width: 1025px) and (max-width: 1279px) {
    .ush_menu_1 .w-nav-item.level_1.menu-item-has-children>a:not(.w-btn) .w-nav-title {
        padding-right: 11px;
    }

    .l-body .ush_menu_1 .w-nav-list.level_1>.menu-item-has-children>a .w-nav-arrow {
        display: none;
    }
}

/* The same caret in the mobile panel (ush_menu_2, type_mobile below its own
   mobile_width of 1280). Impreza draws a FontAwesome angle-down there, 12.75
   by 20.4 at the panel's 17px; Figma mobile menu 372:286 has CaretDown 16x16,
   8 after the label - the anchor's own 8.5 column-gap already gives that, so
   only the glyph changes. The mask sits on the .w-nav-arrow element itself
   because that is what Impreza rotates (matrix -1) when the item opens, and it
   stays the click target for the submenu toggle (mobileBehavior 1).
   MEASURED 2026-10-05 at 390: 16x16, 8.5 after the label, 4..20 on the 24
   line, white on the active pill, flips when open, elementFromPoint hits the
   arrow at its centre and corners. */
.l-body .w-nav.ush_menu_2.type_mobile .w-nav-list.level_1 > .menu-item-has-children > a .w-nav-arrow {
    align-self: center;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url('assets/img/caret-down.svg') center / 16px 16px no-repeat;
    mask: url('assets/img/caret-down.svg') center / 16px 16px no-repeat;
}

.l-body .w-nav.ush_menu_2.type_mobile .w-nav-list.level_1 > .menu-item-has-children > a .w-nav-arrow::before {
    content: none;
}

/* Page Title */

.w-vwrapper.image-title-vwrapper {
    position: relative;
    aspect-ratio: 12/5;
    justify-content: flex-end;
    border-radius: var(--radius-lg);
    overflow: clip;
    padding-bottom: 4rem;
    align-items: flex-start;
}

/* The photo fills the card: width/height 100% so the card's ratio is the only
   one that counts. Without them the photo's own css= aspect-ratio (Design
   tab, per state, !important) set its height - 12/5 on tablets against a 4/5
   card at 601-767, which left 557px of empty card under the photo at 700
   (measured 2026-10-04). With two definite sizes the ratio does not apply. */
.w-vwrapper.image-title-vwrapper .post_image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

/* Photo scrim, rgba(0,0,0,.15): the overlay Figma lays over the Home hero
   photo (281:1884, layer 279:1630) and the value of Home's own row overlay.
   Ruttl 2026-10-02, "fali overlay preko slike" on 10 subpages. */
.w-vwrapper.image-title-vwrapper .post_image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.w-hwrapper.title-subtitle-hwrapper {
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 2;
    padding-left: max(calc((100vw - var(--site-content-width)) / 2 - var(--col-width)), 2.5rem);
}

.l-section.page-title-section {
    position: relative;
}

.l-section.page-title-section::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -200px;
    width: clamp(130px, 18vw, 260px);
    aspect-ratio: 260/445;
    z-index: 0;
    pointer-events: none;
    background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-blue-left.svg');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
}

.l-section.page-quote-section {
    position: relative;
    z-index: 1;
}

/* Quote band text in even lines (Marija, Ruttl 2026-10-02, EMDR and The
   Connected Man: "narrower, so the last line is not one word"). At 1440 the
   two quotes broke 1146 + 104 ("it.") and 1091 + 167; balanced they are
   660 + 590 and 606 + 653, still two lines, centred as before. */
.l-section.page-quote-section .w-text {
    text-wrap: balance;
}

/* Home */

/* Hero sits one layer ABOVE the section below it, and that is deliberate.
   The pale-blue shape rises 265px into the hero but belongs to
   .home-below-slide-section, which is z-index: 1 - a stacking context in the
   root's positive layer. Its z-index: -1 pseudo is therefore trapped inside
   that layer and still paints over everything with z-index: auto, the slider
   included, so the blob washed across the hero photo.
   Subpages never show this because there the shape and the image share ONE
   section: .page-title-section is z-index: auto, its ::after shape is
   z-index: 0, and the image own wrapper carries z-index: 1 (a css= blob on
   the post_image element), so the shape lands under the image. Lifting the
   hero to 2 reproduces that order across the section boundary.
   Measured 2026-10-02: the hero is overflow: hidden, so raising it cannot
   spill anything over the section below, and the header is position: fixed at
   z-index: 111, far above either. */
.l-section.home-slide-section {
    position: relative;
    z-index: 2;
}

/* Home hero: the card.
   An inset, rounded card at every width; only the inset changes. Desktop
   uses the row indent (--padding-inline); at 1024 and below the card sits
   16 from the screen edge on every side (phone Figma 368:174), set in the
   max-width: 1024px block. margin-top puts the card at the header's bottom
   edge. Impreza's own first-section offset (padding-top: var(--header-height)
   on .l-section-h) is switched off for this page in the builder: Page
   Settings > Header > Content Offset, all four states. us-core reads that
   switch only when the page has its own header picked, so page 57 carries
   us_header_id 9437, the same header Theme Options assigns (set 2026-10-04).
   The switch prints .l-section-h { padding-top: 0 !important } for every
   section on the page. The section's own side padding is dropped because
   the inner row is the content box. */
.l-body .l-section.home-slide-section {
    margin-inline: var(--padding-inline);
    margin-top: var(--header-height);
    padding-inline: 0;
    border-radius: var(--radius-lg);
}

/* The card's margin-top escapes .l-main, .l-canvas and body between 768 and
   1024 - measured 2026-10-03 at 900: body, canvas, header and card all at
   128 where the header belongs at 32. The fixed header has no top of its own,
   so it rides down with them and leaves an empty band above it (below 768
   Impreza's overflow: hidden on .l-canvas stops the collapse). A block
   formatting context on .l-main keeps the margin inside it. */
.l-main:has(> .l-section.home-slide-section:first-child) {
    display: flow-root;
}

/* The inner row (cols-flush, so no gutter) carries the card's proportion and
   its insets: 12/5 as the old image-title-vwrapper had, with content still
   free to grow it. The left inset is the Page Title hero's formula, moved
   here from the title wrapper so both heroes start their copy on one line. */
.g-cols.via_flex.type_default.home-hero-inner-row {
    aspect-ratio: 12 / 5;
    padding: 0 var(--space-md) var(--space-xl) max(calc((100vw - var(--site-content-width)) / 2 - var(--col-width)), 2.5rem);
}

.l-section.home-slide-section .w-hwrapper.title-subtitle-hwrapper {
    padding-left: 0;
}

/* Lede beside / under the H1. Figma: 16/24 SemiBold on desktop, 15/23 on
   phones (1.5 snaps that to 22.5). The colour is the page ground. */
.wpb_text_column.home-hero-lede {
    color: var(--color-content-bg);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: var(--space-lg);
}

/* ---- Video card ----
   Poster, title and a "Play Video" line; the whole card opens the video popup
   placed next to it (us_popup show_on="selector" with a selector unique to
   this card; the video-popup module in ab-custom.js arms the frame when the
   popup opens). Figma 281:1884 (desktop) and 372:163 (phone). The padding is
   the design's 6 / 26, which no token carries. */
.w-hwrapper.video-card {
    width: fit-content;
    max-width: 100%;
    padding: 6px 26px 6px 6px;
    background: var(--color-content-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

.w-hwrapper.video-card > .w-image {
    flex: none;
    width: 151px;
}

.w-hwrapper.video-card > .w-image img {
    display: block;
    width: 100%;
    aspect-ratio: 151 / 84;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.w-hwrapper.video-card > .w-vwrapper {
    min-width: 0;
}

/* One line, cut with an ellipsis when the card is narrower than the title,
   as Figma does on phones. */
.w-text.video-card-title {
    min-width: 0;
    max-width: 100%;
    color: var(--color-body-text-dark);
    font-size: var(--fs-xs); /* 13 - Figma 372:167 */
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.w-text.video-card-play {
    color: var(--color-body-text-dark);
    font-size: var(--fs-2xs);
    font-weight: 500;
    line-height: 26px;
}

/* The element's icon param (fab|youtube) keeps the <i> in the markup; the
   mask swaps the glyph for the design's outline logo in the accent colour. */
.w-text.video-card-play i {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    background-color: var(--color-light-primary);
    -webkit-mask: url('/wp-content/themes/Impreza-child/assets/img/youtube-logo.svg') center / contain no-repeat;
    mask: url('/wp-content/themes/Impreza-child/assets/img/youtube-logo.svg') center / contain no-repeat;
}

.w-text.video-card-play i::before {
    content: none;
}

.l-section.home-below-slide-section {
    position: relative;
    z-index: 1;
}

.l-section.home-below-slide-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: -265px;
    width: clamp(130px, 18vw, 260px);
    aspect-ratio: 260/445;
    z-index: -1;
    pointer-events: none;
    background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-blue-left.svg');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
}

/* "What we offer": the text on the right starts level with the heading on
   the left, not with the eyebrow above it (Marija, Ruttl 2026-10-02). Measured
   cap top to cap top, h3 "Compassionate Care..." against the paragraph: 18.5
   at 820, 19 at 1100, 19.4 at 1280, 20 at 1440 and 1920 - the eyebrow line
   plus the vwrapper gap, nearly flat because the h2-style is fluid. 1.3rem
   (19.5) leaves -1 to +0.4 across that range. From 768, where the two
   columns sit side by side; stacked there is nothing to level with. */
@media (min-width: 768px) {
    .l-section.home-below-slide-section .wpb_column + .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_text_column:first-child {
        margin-top: 1.3rem;
    }
}

/* Service card. Verified against BOTH frames in the Figma - Home 267:870 and
   the location page 1072:976 are byte-identical in treatment, so this belongs
   to the component and not to either page: a 2px rule along the bottom edge in
   secondary green (the file names it "Green", #637C72), and a title in body
   ink rather than the heading orange the h3 tag brings with it.
   The rule is now the card's HOVER (Marija, Ruttl 2026-10-02: "the green
   bottom line as the card's hover, together with the arrow of the text
   button moving"), and the therapist cards and the small blog cards take the
   same hover ("the line under both the photo and the white card"). The line
   is transparent at rest, so nothing moves by 2px on hover; the arrow uses
   `translate`, which Impreza's own .w-btn transform does not touch.
   Therapist cards are one link since 2026-10-05 (us_post_list
   overriding_link = post, Marija Ruttl KqayT): Impreza lays an anchor over
   the whole item at z-index 10, so the hwrapper never gets :hover itself -
   their hover is read from the grid item. */
.w-hwrapper.services-hwrapper > .w-vwrapper,
.w-grid.ab-therapist-grid .w-hwrapper.usg_hwrapper_1,
.w-grid.ab-small-blog-grid .w-hwrapper.usg_hwrapper_1 {
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

.no-touch .w-hwrapper.services-hwrapper > .w-vwrapper:hover,
.no-touch .w-grid.ab-therapist-grid .w-grid-item:hover .w-hwrapper.usg_hwrapper_1,
.no-touch .w-grid.ab-small-blog-grid .w-hwrapper.usg_hwrapper_1:hover {
    border-bottom-color: var(--color-content-secondary);
}

.w-hwrapper.services-hwrapper > .w-vwrapper .w-btn i,
.w-grid.ab-therapist-grid .w-btn i,
.w-grid.ab-small-blog-grid .w-btn i {
    transition: translate 0.3s;
}

.no-touch .w-hwrapper.services-hwrapper > .w-vwrapper:hover .w-btn i,
.no-touch .w-grid.ab-therapist-grid .w-grid-item:hover .w-hwrapper.usg_hwrapper_1 .w-btn i,
.no-touch .w-grid.ab-small-blog-grid .w-hwrapper.usg_hwrapper_1:hover .w-btn i {
    translate: 4px 0;
}

.w-hwrapper.services-hwrapper > .w-vwrapper > .w-text .w-text-value {
    color: var(--color-content-text);
}
.services-hwrapper .alt-bg-box .w-image {
    margin-bottom: 20px;
}
.services-hwrapper .alt-bg-box .w-image .w-image-h {
    width: 80px;
}

/* Misc */

.l-section.alt-content-bg-section,
.l-section.service-alt-content-bg-section {
    position: relative;
    color: var(--color-alt-content-text);
    background-color: var(--color-alt-content-bg);
    background-image: url('/wp-content/themes/Impreza-child/assets/img/shape-bottom-right-universal.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: clamp(220px, 41vw, 590px) auto;
}

/* Home "Our Goals" band (Figma 267:947 desktop, 377:161 phone): two blobs in
   #C18850 at 50%, exported from the file as one 810x661 drawing, in place of
   the universal shape the other service bands carry. Both frames draw it at
   that same size, anchored bottom right; on a phone only its right-hand 393px
   is on screen, which is exactly what the phone frame shows. The size is fixed
   on purpose - the design does not scale it. */
.l-section.service-alt-content-bg-section.home-goals-section {
    background-image: url('/wp-content/themes/Impreza-child/assets/img/brown-bottom-right.svg');
    background-position: right bottom;
    background-size: 810px 661px;
}

/* Home "Our Goals", videos column on desktop (Ruttl WklV, Figma Line 2
   267:864): a 1px rule down the column's left edge, under the YouTube icon,
   from 8 above the first video to 6 below the last, and the list stepped in
   60 so it starts under "Latest from YouTube" (icon 52 + 8, where the header
   text already starts). #DEBA99 is the line as the frame renders it; no
   token carries it. Only from 1025, where the two columns sit side by side. */
@media (min-width: 1025px) {

    .l-section.home-goals-section .wpb_column.home-videos-column .w-grid.ab-videos-grid {
        position: relative;
        padding-inline-start: 60px;
    }

    .l-section.home-goals-section .wpb_column.home-videos-column .w-grid.ab-videos-grid::before {
        content: "";
        position: absolute;
        top: -8px;
        bottom: -6px;
        left: 0;
        width: 1px;
        background: #DEBA99;
    }
}

.l-section.alt-content-bg-section h1,
.l-section.alt-content-bg-section h2,
.l-section.alt-content-bg-section h3,
.l-section.alt-content-bg-section h4,
.l-section.service-alt-content-bg-section h1,
.l-section.service-alt-content-bg-section h2,
.l-section.service-alt-content-bg-section h3,
.l-section.service-alt-content-bg-section h4 {
    color: var(--color-dark-headings);
}

/* Box family, ab-base convention: <name>-bg-box. The rename in the content
   was finished 2026-09-25 and the old names were deleted from here. */
.l-body .alt-bg-box {
    background: var(--color-content-bg-alt);
    border-radius: var(--radius-box);
    box-shadow: var(--shadow-md);
}
.alt-bg-box.p-sm {
    padding: var(--space-xs);
}
.l-body .alt-content-primary-bg-box {
    background: var(--color-alt-content-primary);
    color: #fff;
    border-radius: var(--radius-box);
    padding: 2rem;
}
.alt-content-primary-bg-box.p-sm {
    padding: var(--space-xs);
}/* The component rule is .l-body .alt-content-primary-bg-box (0-2-0); the bare
   .p-2xl utility is 0-1-0 and would lose to its 2rem. Figma asks for 60px on
   the two CTA bands. */

.alt-content-primary-bg-box.p-2xl {
    padding: var(--space-2xl);
}
.g-cols.via_flex.type_default.alt-bg-box {
    margin: 0 0;
}

.l-body .mailchimp-box {
    padding-right: 15%;
}
.alt-content-primary-bg-box.mailchimp-box {
    position: relative;
    background-image: url('/wp-content/themes/Impreza-child/assets/img/shape-bottom-right-universal.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: clamp(140px, 17vw, 250px) auto;
}
.alt-content-primary-bg-box .mc4wp-form-fields input[type="text"] {
    margin-bottom: 8px;
}
.alt-content-primary-bg-box .mc4wp-form-fields input[type="text"],
.alt-content-primary-bg-box .mc4wp-form-fields input[type="email"] {
    font-size: 11px;
    padding: 0 15px;
    min-height: 48px;
    color: #fff;
    box-shadow: 0 0 0 1px #fff inset;
}
.alt-content-primary-bg-box .mc4wp-form-fields input[type="text"]::placeholder,
.alt-content-primary-bg-box .mc4wp-form-fields input[type="email"]::placeholder {
    opacity: 1 !important;
}
.alt-content-primary-bg-box .mc4wp-form-fields [type=submit]:not(.w-btn):not(.button) {
    background: #fff;
    color: var(--color-alt-content-text) !important;
    margin-top: 32px;
}

/* Subscribe box on tablets: First Name and Email side by side (Marija, Ruttl
   2026-10-04, iPad, [SVE] [TIP: subscribe box]). Only where the form has the
   room - a container query on the form, 440 and up: on Home at 820 the form
   is 582 wide and the two fields go 287 + 8 + 287 (box 322 -> 266 tall);
   on the Blog page the box sits in a half column and the form is 269, so it
   stays stacked. The submit keeps its own row and its 32 above. */
@media (min-width: 768px) and (max-width: 1024px) {
    .alt-content-primary-bg-box .mc4wp-form {
        container-type: inline-size;
    }

    @container (min-width: 440px) {
        .alt-content-primary-bg-box .mc4wp-form-fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 8px;
        }

        .alt-content-primary-bg-box .mc4wp-form-fields input[type="text"] {
            margin-bottom: 0;
        }

        .alt-content-primary-bg-box .mc4wp-form-fields [type=submit] {
            grid-column: 1 / -1;
            justify-self: start;
        }
    }
}
.alt-content-primary-bg-box .w-text {
    color: #fff;
}/* Line-height 1.5 applies ONLY to text without a heading role. In Impreza a
   heading is `.w-text` too, so this rule used to flatten Heading L everywhere
   in the box: `h2-style` gave 36px with a 54px line-height instead of 44.
   MEASURED 2026-09-23 on Locations ("Ready to take the next step?", "Looking
   for Counseling in Phoenix / Anthem"). Role classes on this project are
   h1-style..h6-style, hence the shape of the selector.
   OPEN: 1.5 at 15px gives 22.5, while Body Large in the design is 15/25 - the
   question is whether this line-height is needed at all, or whether the text
   should inherit the body. Not touched. */

.alt-content-primary-bg-box .w-text:not([class*="-style"]) {
    line-height: 1.5;
}
.l-body .light-primary-bg-box {
    background: var(--color-light-primary);
    border-radius: var(--radius-box);
    padding: 2rem;
    color: #fff;
}
.light-primary-bg-box.p-sm {
    padding: var(--space-xs);
}
.light-primary-bg-box .w-video {
    border-radius: 8px;
    overflow: clip;
}
.light-primary-bg-box .w-text {
    color: #fff;
}
.l-body .secondary-bg-box {
    background: var(--color-content-secondary);
    border-radius: var(--radius-box);
    color: #fff;
    padding: 2rem;
}
.secondary-bg-box.p-sm {
    padding: var(--space-xs);
}
.secondary-bg-box .w-text {
    color: #fff !important;
}
.l-body .alt-content-bg-box {
    background: var(--color-alt-content-bg);
    border-radius: var(--radius-box);
    padding: 2rem;
    color: var(--color-alt-content-text);
}

/* Body links on our two alt-background surfaces. Both classes paint
   --color-alt-content-bg and set --color-alt-content-text themselves, WITHOUT
   switching the row's color_scheme - so links keep the CONTENT scheme value.
   Measured on the First Responders page: #C28041 link on a #DAA068 ground,
   1.50:1, effectively invisible. Switching the rows to color_scheme="alternate"
   color_alt_content_link / _link_hover are now set in Theme Options (#343232 /
   #637C72), so the colour is editable from the builder and this rule only has to
   carry it onto the two surfaces that paint the alt background WITHOUT switching
   the row's color_scheme - on those, the token exists but nothing applies it.

   Note: the pickers hold HEX. A "_slug" token written into a predefined picker is
   emitted as a literal string and breaks every rule reading the variable -
   measured 2026-09-28, --color-alt-content-link came back as the text
   "_alt_content_text".

   Scoped to text blocks on purpose - us_btn renders an <a>, and a bare
   descendant selector would repaint every button on these surfaces. */
.service-alt-content-bg-section .wpb_text_column a,
.service-alt-content-bg-section .w-text a,
.alt-content-bg-box .wpb_text_column a,
.alt-content-bg-box .w-text a {
    color: var(--color-alt-content-link);
}

.service-alt-content-bg-section .wpb_text_column a:hover,
.service-alt-content-bg-section .w-text a:hover,
.alt-content-bg-box .wpb_text_column a:hover,
.alt-content-bg-box .w-text a:hover {
    color: var(--color-alt-content-link-hover);
}
.alt-content-bg-box.p-sm {
    padding: var(--space-xs);
}
.alt-content-bg-box.p-2xl {
    padding: var(--space-2xl);
}
.alt-content-bg-box.g-cols.via_flex.type_default {
    margin: 0 0;
}
.alt-content-bg-box .w-text {
    color: var(--color-dark-headings)
}

.service-approaches-hwrapper > .w-vwrapper > .w-btn-wrapper {
    margin-top: auto;
}

.service-approaches-hwrapper .w-btn-wrapper .us-btn-style_5 {
    padding-bottom: 0;
}

.w-hwrapper.methods-hwrapper {
    counter-reset: method;
    position: relative;
    gap: 4rem;
    column-gap: 6rem;
}

.w-hwrapper.methods-hwrapper>.w-vwrapper {
    counter-increment: method;
    position: relative;
    padding-left: calc(var(--col-width) + 20px);
}

.w-hwrapper.methods-hwrapper>.w-vwrapper::before {
    content: counter(method, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 19px;
    line-height: 60px;
    color: var(--color-content-text);
    width: 60px;
    height: 46px;
    border-radius: 8px;
    border-left: 3px solid rgba(104, 127, 118, 0.50);
    background: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--h2-font-family);
}

.methods-hwrapper::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-0.5px);
    background: var(--color-content-border);
}

.methods-hwrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-0.5px);
    background: var(--color-content-border);
}

/* Insurance box on Home (Ruttl F4U7, Figma 267:1375): white card, 24 inside
   and 24 from the line to the logos; the three logos at the heights the frame
   draws them (UHC 26, BCBS 28, Aetna 16), centred 40 apart on a 75 row.
   Before, each logo was a 165 third and its SVG scaled to that width, so
   Aetna stood twice the height of BCBS. Impreza sizes an SVG without an
   ush_image_ / aspect / height class at (0,5,1); these sit one class above.
   Measured by injection 2026-10-05 at 1440: card 600x171 (Figma 607x172),
   logos 86x26, 134x28, 82x16. Block, so the 16-tall Aetna does not sit at
   the top of a 25 line box (measured live: 4.5 above the row's centre). */
.l-body .w-vwrapper.alt-bg-box:has(> .w-hwrapper.insurance-hwrapper) {
    --vwrapper-gap: 24px;
    padding: 24px;
}

.w-hwrapper.insurance-hwrapper.flex-row-3 {
    --gap: 40px;
    min-height: 75px;
    align-items: center;
}

.w-hwrapper.insurance-hwrapper.flex-row-3 > .w-image {
    flex: none;
}

.l-body .w-hwrapper.insurance-hwrapper.flex-row-3 .w-image img[src$=".svg"] {
    display: block;
    width: auto;
    max-width: none;
    height: 26px;
}

.l-body .w-hwrapper.insurance-hwrapper.flex-row-3 .w-image img[src$=".svg"][src*="blue-cross"] {
    height: 28px;
}

.l-body .w-hwrapper.insurance-hwrapper.flex-row-3 .w-image img[src$=".svg"][src*="Aetna"] {
    height: 16px;
}

.l-body .statement-wrapper {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.statement-wrapper .h1-style {
    color: var(--color-alt-content-heading);
    line-height: 1.15;
}

.w-text .w-text-value > span {
    color: var(--color-content-heading);
}

.clients-stats-col > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clients-stats-col .w-vwrapper {
    padding: 16px;
    border-radius: 8px;
    border-left: 3px solid var(--color-pale-secondary);
    background: #FFF;
    box-shadow: var(--shadow-md);
}

.clients-stats-col .w-vwrapper:nth-child(2) {
    border-left: 3px solid var(--color-alt-content-bg-alt);
}

.clients-stats-col .w-vwrapper:nth-child(3) {
    border-left: 3px solid var(--color-pale-alt-secondary);
}

.clients-stats-col .w-vwrapper .w-text {
    text-wrap: balance;
}

.clients-stats-col .w-vwrapper .clients-stats-number {
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    line-height: 60px;
    font-family: var(--h2-font-family);
}

.clients-collage-text-hwrapper {
    display: grid;
    grid-template-columns: 4fr 5fr 9fr;
    gap: 10px;
    grid-template-areas:
        "wide wide text"
        "left right text";
    margin-left: 20px;
}

.clients-collage-text-hwrapper>.img-wide {
    grid-area: wide;
    aspect-ratio: 21 / 8;
}

.clients-collage-text-hwrapper>.img-left {
    grid-area: left;
    aspect-ratio: 1 / 1;
}

.clients-collage-text-hwrapper>.img-right {
    grid-area: right;
    aspect-ratio: 5 / 4;
}

.clients-collage-text-hwrapper>.w-vwrapper {
    grid-area: text;
    padding: 32px 24px 24px;
    height: 100%;
    align-self: stretch;
}

.clients-collage-text-hwrapper>.w-image {
    overflow: hidden;
    border-radius: 0.5rem;
}

.clients-collage-text-hwrapper>.w-image .w-image-h,
.clients-collage-text-hwrapper>.w-image img {
    width: 100%;
    height: 100%;
    display: block;
}

.clients-collage-text-hwrapper>.w-image img {
    object-fit: cover;
}

.l-body .clients-collage-text-hwrapper .background_inside_text {
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    color: inherit !important;
    padding-left: 48px;
    background-size: 38px 38px !important;
}

.clients-collage-text-hwrapper .background_inside_text a {
    color: var(--color-content-text);
}

.clients-collage-text-hwrapper .background_inside_text .w-text-value::after {
    display: block;
    font-size: var(--fs-3xs);
    font-weight: 500;
    line-height: 2;
    color: var(--color-content-faded);
}

.clients-collage-text-hwrapper .background_inside_text.call-us .w-text-value::after {
    content: 'Call Us';
}

.clients-collage-text-hwrapper .background_inside_text.text-us .w-text-value::after {
    content: 'Text Us';
}

.clients-collage-text-hwrapper .background_inside_text.email-us .w-text-value::after {
    content: 'Email Us';
}

.latest-from-youtube.background_inside_text {
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    color: inherit !important;
    padding-left: 60px;
    background-size: 52px 52px !important;
    height: 52px;
}

.latest-from-youtube .w-text-value::after {
    display: block;
    font-size: var(--fs-3xs);
    font-weight: 500;
    line-height: 2;
    content: 'Recent Videos';
}

.clients-collage-bottom-hwrapper {
    display: grid;
    grid-template-columns: 7fr 6fr;
    gap: 10px;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: calc(var(--col-width) + 40px);
}

.clients-collage-bottom-hwrapper>.bottom-left {
    aspect-ratio: 340 / 198;
}

.clients-collage-bottom-hwrapper>.bottom-right {
    aspect-ratio: 289 / 198;
}

.clients-collage-bottom-hwrapper>.w-image {
    overflow: hidden;
    border-radius: 8px;
}

.clients-collage-bottom-hwrapper>.w-image .w-image-h,
.clients-collage-bottom-hwrapper>.w-image img {
    width: 100%;
    height: 100%;
    display: block;
}

.clients-collage-bottom-hwrapper>.w-image img {
    object-fit: cover;
}

.l-section.faq-section .col-extend-right-md .wpb_text_column {
    margin-bottom: 1.7rem;
}

/* FAQ band shapes, re-exported 2026-10-05 from Figma Home 267:806 after Marija
   redrew them (Ruttl nvD1, "the shape moves when an answer opens"): the left
   pair (mask group 267:959) is cut only by the band's BOTTOM edge, the right
   pair (267:955) only by its TOP. So each is anchored to the edge that cuts it -
   opening an answer grows the band, and each pair stays on its own edge with
   no new cut showing. The old pair was cut on both edges and both sat on the
   bottom, so an opened answer slid both cut tops down into view.
   Both SVGs are the mask groups with the page and frame rects removed and the
   viewBox trimmed to what shows in the band: left 0..751 x 47..789, right
   303..886 x 0..743 of the 886/883 x 789 group.
   Sized by HEIGHT, from the viewport only - never from the band, so opening or
   closing an answer moves a shape with its edge but never resizes it
   (Nemanja 2026-10-05; a 94%-of-band cap made them grow as answers opened).
   The height has to fit the SHORTEST closed band, or the uncut end gets cut
   after all. Closed bands measured 2026-10-05 on all 30 pages with a FAQ band:
   shortest 556 from 1280 up (Discernment), 592 at 1025, 711 at 820, 839 at
   390. So 520 at most, 40.6vw below 1280, 290 floor: 36 free on the shortest
   band at 1440, 176 at 1025. Home is 768 tall from 1280 up and gets the Figma
   size (742 of 789 in the frame): 722 at most, i.e. the frame's 6% left free
   (720 at 1440, 640 at 1280, 512 at 1025, 410 at 820).
   green-bottom-left / -right stay for the shape-green-* decorators and the
   therapist form box. */
.l-section.faq-section {
    position: relative;
    background-image: url('/wp-content/themes/Impreza-child/assets/img/green-band-left.svg'), url('/wp-content/themes/Impreza-child/assets/img/green-band-right.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, right top;
    background-size: auto clamp(290px, 40.6vw, 520px), auto clamp(290px, 40.6vw, 520px);
}

.home .l-section.faq-section {
    background-size: auto clamp(290px, 50vw, 722px), auto clamp(290px, 50vw, 722px);
}

.l-section.parent-service-main-section {
    position: relative;
    background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-orange-bottom-left.svg');
    background-repeat: no-repeat;
    background-position: left bottom -120px;
    background-size: clamp(140px, 19vw, 277px) auto;
}

.w-tabs.accordion.toggle_style_1>div>div>.w-tabs-section-content {
    padding-top: 0;
}

.w-tabs[style*="--sections-title-size"]>.w-tabs-list,
.w-tabs[style*="--sections-title-size"]>div>div>.w-tabs-section-header {
    font-size: var(--h4-font-size);
}

.w-tabs-section-header {
    padding: 1.2em 1.5em;
    line-height: 1.2;
}

.w-tabs-section.active:not(.has_text_color)>.w-tabs-section-header {
    color: #fff;
}

/* SCHEME BRANCHES AND NESTING. The two branches below are `.l-section.color_secondary`
   and `.l-section:not(.color_secondary)`, both matched as ANCESTORS. That is
   safe only while the accordion's section is the outermost `.l-section` on the
   page. Inside `us_post_content` it is not: the Page Template's own row is also
   an `.l-section` and carries no scheme, so the `:not()` branch matches through
   IT while the `.color_secondary` branch matches through the FAQ section. Equal
   specificity, and the `:not()` rules sit later in this file, so the light
   treatment won on every Groups and Intensives page - orange titles and a dark
   ring where the design asks for white on green.

   CSS cannot say "nearest ancestor", so the secondary branch is given one extra
   class (.l-body) to win outright. The two rules after it restate what plain
   inheritance used to supply, since the `:not()` branch now has to be beaten on
   those properties too. Measured against the Anxiety page 2026-09-25: title and
   control #fff, section border rgb(59,94,80). */
.l-body .l-section.color_secondary .w-tabs.accordion.toggle_style_1>div>.w-tabs-section {
    border-bottom: 1px solid var(--color-alt-content-border);
    border-top: unset !important;
}

.l-body .l-section.color_secondary .w-tabs.accordion.toggle_style_1>div>.w-tabs-section:last-of-type {
    border-bottom: 1px solid var(--color-alt-content-border);
}

.l-body .l-section.color_secondary .w-tabs.accordion.toggle_style_1>div>.w-tabs-section.active:not(.has_text_color)>.w-tabs-section-header {
    color: var(--color-content-bg);
}

.l-section:not(.color_secondary) .w-tabs.accordion.toggle_style_1>div>.w-tabs-section {
    border-bottom: 1px solid var(--color-pale-secondary);
    border-top: unset !important;
}

.l-section:not(.color_secondary) .w-tabs.accordion.toggle_style_1>div>.w-tabs-section:last-of-type {
    border-bottom: 1px solid var(--color-pale-secondary);
}

.l-section:not(.color_secondary) .w-tabs.accordion.toggle_style_1>div>.w-tabs-section.active:not(.has_text_color)>.w-tabs-section-header {
    color: var(--color-content-heading);
}

.l-section:not(.color_secondary) .w-tabs.accordion.toggle_style_1>div>.w-tabs-section:not(.has_text_color)>.w-tabs-section-header {
    color: var(--color-content-heading);
}

.l-body .l-section.color_secondary .w-tabs-section {
    border-color: var(--color-alt-content-border);
}

.l-body .l-section.color_secondary .w-tabs.accordion.toggle_style_1>div>.w-tabs-section:not(.has_text_color)>.w-tabs-section-header {
    color: inherit;
}

.l-body .l-section.color_secondary .w-tabs-section-control {
    color: inherit;
    box-shadow: 0 0 0 1px #FFF inset;
}

.w-tabs-section-control {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #FFF inset;
}

.l-section:not(.color_secondary) .w-tabs-section-control {
    color: var(--color-alt-content-text);
    box-shadow: 0 0 0 1px var(--color-alt-content-text) inset;
}

/* us-style makes the control 1em square, so the plate follows font-size; the
   rule above overrides it to 30px. Impreza draws the plus edge to edge, which
   is wrong once the control is a circle, so the bars are inset and re-centred.
   Percentages rather than px: at 30px this is byte-identical to the previous
   hardcoded version (measured -- inset 8, length 14, both bars centred on
   15/15, in the closed state and in the 135deg-rotated open state alike), and
   it also survives the plate being resized. At 44px the old px version held
   the inset at 8 and left the vertical bar 7px off centre. */
.w-tabs-sections.icon_plus>div>.w-tabs-section-header .w-tabs-section-control:after {
    top: 50%;
    left: 26.6667%;
    width: 46.6667%;
    height: 1px;
    border-radius: 2px;
    transform: translateY(-50%);
}

.w-tabs-sections.icon_plus>div>.w-tabs-section-header .w-tabs-section-control:before {
    top: 26.6667%;
    left: 50%;
    width: 1px;
    height: 46.6667%;
    border-radius: 2px;
    transform: translateX(-50%);
}

.w-tabs.numbered-accordion>.w-tabs-sections {
    counter-reset: accordion-item;
}

.w-tabs.numbered-accordion>.w-tabs-sections>.w-tabs-section {
    counter-increment: accordion-item;
}

.w-tabs.numbered-accordion .w-tabs-section-title::before {
    content: counter(accordion-item, decimal-leading-zero);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 46px;
    margin-right: 1rem;
    font-size: 19px;
    font-weight: 600;
    font-family: var(--h2-font-family);
    line-height: 46px;
    color: var(--color-content-secondary);
    background: #FFF;
    border-radius: 8px;
    border-left: 3px solid rgba(104, 127, 118, 0.50);
    flex-shrink: 0;
    vertical-align: middle;
}

/* Numbered accordion on phones (Marija, Ruttl 2026-10-04, iPhone, every
   such section): the 60x46 number box sat inline at the start of the title,
   so the title's second and third lines wrapped back under it, starting at
   the box's left edge (24 at 390) while the first line started at 102. Here the
   box is a block of its own above the title and a size smaller (46x34,
   16px), and every line of the title starts at the same x. */
@media (max-width: 767px) {
    .l-body .w-tabs.numbered-accordion .w-tabs-section-title::before {
        display: flex;
        width: 46px;
        height: 34px;
        margin: 0 0 10px;
        font-size: 16px;
        line-height: 34px;
    }
}

/* Circle bullets instead of default markers (12×12px).
   The .circle-bullets class goes on .wpb_text_column; the list is nested inside. */
.circle-bullets ul {
    list-style: none;
    margin-left: 0;
}

.circle-bullets li {
    position: relative;
    padding-left: 1.6rem;
    /* room for the circle + gap */
}

.circle-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(0.5lh - 6px);
    /* vertically centered on the first line */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(99, 126, 114, 0.30);
    /* default: all the same */
}

/* .multicolor — circles cycle through 4 colors */
.circle-bullets.multicolor li:nth-child(4n+1)::before {
    background: rgba(99, 126, 114, 0.30);
}

/* sage */
.circle-bullets.multicolor li:nth-child(4n+2)::before {
    background: #F0E0D5;
}

/* cream */
.circle-bullets.multicolor li:nth-child(4n+3)::before {
    background: rgba(124, 153, 175, 0.30);
}

/* blue-grey */
.circle-bullets.multicolor li:nth-child(4n)::before {
    background: #F0E0D5;
}
.alt-content-bg-box .circle-bullets li::before {
    background: var(--color-content-primary);
}

/* Boxes that flip the body text to white need the bullet to follow. The base
   colour above is a fixed translucent green, which all but disappears on a
   filled box - measured rgba(99,126,114,.30) sitting on #C28041. Keyed on the
   three classes that set color:#fff rather than on currentColor, so lists on
   light backgrounds keep the muted green they have today.

   0.40 rather than solid white: at alpha 1 the bullet measures 3.25:1 against
   the box, identical to the body text on it, while on a light box the bullet sits
   at 1.45:1 and stays well under the text. 0.40 brings it to 1.67:1, which keeps the
   marker subordinate to the words the way it is everywhere else. */
.light-primary-bg-box .circle-bullets li::before,
.secondary-bg-box .circle-bullets li::before,
.alt-content-primary-bg-box .circle-bullets li::before {
    background: rgba(255, 255, 255, 0.40);
}

.quiz-box.w-hwrapper {
    gap: var(--space-sm);
    align-items: center;
}

.quiz-box.w-hwrapper .w-image {
    border-radius: 8px;
    flex: 0 0 44%;
    min-width: 0;
    aspect-ratio: 17/22;
}

.quiz-box.w-hwrapper .wpb_text_column {
    margin-bottom: 2rem;
}

.free-report-box.w-hwrapper {
    gap: var(--space-sm);
    align-items: center;
    padding: 18px;
}
.light-primary-bg-box.free-report-box {
    background-image: url('/wp-content/themes/Impreza-child/assets/img/shape-bottom-right-universal.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: clamp(160px, 20vw, 295px) auto;
}

.free-report-box.w-hwrapper .w-image {
    border-radius: 8px;
    flex: 0 0 44%;
    min-width: 0;
    aspect-ratio: 17/22;
}

.free-report-box.w-hwrapper.narrow-el-10 .w-image {
    flex: 0 0 clamp(140px, 20%, 190px);
}

.free-report-box.w-hwrapper > .w-vwrapper {
    flex-grow: 1;
    padding-right: 3%;
}

.free-report-box.w-hwrapper .w-text {
    margin-bottom: 1.5rem;
}

.free-report-box.w-hwrapper .wpb_text_column {
    margin-bottom: 2rem;
}

/* Service Pages */

.service-recent-posts-section .h6-style {
    margin-bottom: 0.5rem;
}

.w-vwrapper.row-direction-hwrapper {
    flex-direction: row;
    flex-wrap: wrap;
}

.w-vwrapper.row-direction-hwrapper > .w-text {
    flex: 0 0 100%;
    min-width: auto;
    margin-bottom: 2.5rem;
}

/* Parent service box (23, 35, 45): heading + Call/Text left, bullets right.
   Both sides were content-sized (flex 0 1 auto), so the heading's length
   decided the split - Individual 670 | 352 with a hole right of the buttons
   (Marija, Ruttl 2026-10-02: "move the bullets further left"), Couples
   454 | 568. Figma 486:1397 (Couples) sizes the left column to its button
   pair (368) with 100 to the bullets. Here the left column takes the pair's
   width (the heading opts out of the width calculation with contain:
   inline-size) and the bullets take the rest. 1440: 379 | 100 | 561 on all
   three. Desktop and laptops only; tablets were not flagged. */
@media (min-width: 1025px) {

    .l-section.parent-service-main-section .alt-content-bg-box .w-hwrapper.stack_on_mobiles > .w-vwrapper.row-direction-hwrapper {
        flex: 0 0 auto;
        margin-inline-end: 100px;
    }

    .l-section.parent-service-main-section .alt-content-bg-box .w-hwrapper.stack_on_mobiles > .w-vwrapper.row-direction-hwrapper > .w-text {
        contain: inline-size;
    }

    .l-section.parent-service-main-section .alt-content-bg-box .w-hwrapper.stack_on_mobiles > .circle-bullets {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Desktop spacing from the Ruttl round (Marija, 2026-10-02), each against
   the Figma frame of its page:
   - therapist intro (template 9839): location, name and licence sat with no
     space between them ("the three lines need space"); Figma 495:2864 puts
     16 above and below the name. All widths - the phone order rules keep it.
   - Benefits row on the specialty pages (heading 4/12, bullets 8/12): the
     heading ran the whole 4/12, 20 from the bullets ("more space between
     the bulleted text and the heading", Premarital); Figma 458:161: heading
     303 of the 400 column, 97 clear of the bullets -> 76%.
   - quiz / video band -> orange band on the specialty pages: 60 ("more
     space here", Child); Figma 458:161 has 84 from the last element to the
     band, snapped to large (99).
   - Our Team grid -> the photo band: 60 ("more space"); Figma 492:2073 has
     125 from the last card row to the band -> huge (120). */
.g-cols.therapist-intro-inner-row .w-post-elm.post_title {
    margin-top: 16px;
    margin-bottom: 16px;
}

@media (min-width: 1025px) {

    .l-section.service-benefits-approaches-section .wpb_wrapper > .g-cols:first-child > .wpb_column:first-child h2 {
        max-width: 76%;
    }

    .l-body .l-section.service-quiz-video-section:has(+ .l-section.service-alt-content-bg-section) {
        padding-bottom: var(--section-pad-large);
    }

    .l-body .l-section.page-title-section + .l-section.therapists-grid-main-section {
        padding-bottom: var(--section-pad-huge);
    }
}

/* Therapist Grid */

/* Card: image left, content right.
   The shadow is the card's own (Figma 267:1433), not --shadow-md. */
.w-grid.ab-therapist-grid .w-grid-item-h .w-hwrapper {
    align-items: stretch;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 2px 4px 3.5px rgba(49, 46, 46, .07);
    background: #fff;
}

.w-grid.ab-therapist-grid .w-post-elm.post_image {
    flex: 0 0 47.08%;
    overflow: hidden;
}

.w-grid.ab-therapist-grid .w-post-elm.post_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.w-grid.ab-therapist-grid .w-vwrapper {
    flex: 1;
    justify-content: flex-start;
    padding: 20px 22px 16px 16px !important;
}

/* The name is Heading XS (17/24), not 16px secondary green. Layout 9636
   forces both with !important, so they are set back the same way. */
.w-grid.ab-therapist-grid .post_title {
    font-size: var(--h5-font-size) !important;
    color: var(--color-content-text) !important;
    letter-spacing: normal !important;
}

.w-grid.ab-therapist-grid .w-vwrapper .w-btn {
    margin-top: auto !important;
}

/* Testimonials Grid */

/* The card sits on a photo band, so its ground is the PAGE colour, not white —
   that is what makes it read as a raised plate. Layout 9653 forces
   `background: var(--color-content-bg-alt) !important`, hence the !important. */
.w-grid.ab-testimonials-grid .w-vwrapper.usg_vwrapper_1 {
    padding: 40px 36px;
    background: var(--color-content-bg) !important;
    /* Figma 267:1559: 8 (Marija, Ruttl, [SVE]). */
    border-radius: var(--radius-sm);
}

.w-grid.ab-testimonials-grid .w-vwrapper.usg_vwrapper_2 {
    margin-top: auto;
    gap: 8px;
}

.w-grid.ab-testimonials-grid .post_content {
    color: var(--color-content-text);
    line-height: 1.66;
    margin-bottom: 1.2rem !important;
}

/* The name is Body Large, not 1.2rem in the heading colour — layout 9653
   forces size, colour and line-height alike, so all three go back with
   !important. */
.w-grid.ab-testimonials-grid .us_testimonial_author {
    color: var(--color-content-primary) !important;
    font-size: var(--font-size) !important;
    line-height: 1.66 !important;
}

.w-grid.ab-testimonials-grid .us_testimonial_role {
    color: var(--color-content-primary);
    font-size: var(--fs-xs) !important;
    font-weight: 500;
}

/* Blog Grid */

.w-grid.ab-large-blog-grid .w-hwrapper.usg_hwrapper_1 {
    /* Figma draws 36px; the scale has no such step. Decision: --space-md (30).
       The image stays at 44.7% of the CONTENT box. */
    padding: var(--space-md);
    gap: 70px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: #fff;
}

.w-grid.ab-large-blog-grid .has_aspect_ratio {
    aspect-ratio: 3/2;
    border-radius: var(--radius-img);
    flex: 0 0 44.1%;
    min-width: 0;
}

.w-grid.ab-large-blog-grid .usg_post_date_1 {
    font-size: var(--fs-3xs);
    color: var(--color-content-faded);
    font-weight: 500;
}

.w-grid.ab-large-blog-grid .usg_btn_1 {
    margin-top: 6px;
}

/* Groups & Intensives programme cards, grid layout 10580. Same card shape as
   the large blog grid above - white plate, image left at a fixed share, content
   right - so the two read as one system.

   The share on the image is the load-bearing part. The layout gives the image
   aspect-ratio 3/2, and in a stretched flex row that made its WIDTH follow the
   card HEIGHT: measured across the five cards at 603px, 654px and up, so the
   text stepped further right on every card carrying more meta rows. Fixing
   flex-basis breaks the circle - width comes from the row, height from the
   ratio. Same reason the blog grid above pins 44.7%; this one is narrower
   because these cards carry four meta rows plus the excerpt. */
.w-grid.ab-gi-grid .w-hwrapper.usg_hwrapper_1 {
    padding: var(--space-md);
    gap: 70px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: #fff;
}

/* align-self: stretch lets the image follow the card once the text column is
   taller than the 3/2 ratio. With the padding below, the tallest of the five
   cards measured 353px against a 299px image, which would have left a white
   strip under it. The ratio still sets the floor - it is what sizes the flex
   line when the text is shorter. */
.w-grid.ab-gi-grid .has_aspect_ratio {
    aspect-ratio: 3/2;
    align-self: stretch;
    border-radius: var(--radius-img);
    flex: 0 0 44.1%;
    min-width: 0;
}

/* Dates / Time / Location / Cost. One class rather than four usg_ indexes,
   which are positional and shift the moment the layout is reordered.

   An earlier version spaced the block with :first-of-type / :last-of-type. That
   was wrong and only half of it showed: those pseudo-classes count ELEMENT
   TYPE, not class. The title is an h3 and the rest are divs, so :first-of-type
   landed on the first meta row by accident, while :last-of-type matched the
   post_content div and the bottom margin was never applied at all - measured
   2026-09-28, 1 match and 0 matches respectively.

   The rows carry no margin of their own. The excerpt above and the button
   below supply the spacing, so when hide_empty removes all four - record 303
   has none of the fields - nothing is left behind. */
.w-grid.ab-gi-grid .gi-meta {
    font-size: var(--fs-xs);
    line-height: 1.6;
}

/* Padding now sits on the CARD, same as the large blog grid, so the image is
   inset on all four sides instead of bleeding to the edges. The text column
   therefore carries none of its own - the card's 30px survives the stack on
   narrow screens, which is what the old column padding was protecting. */
.l-body .w-grid.ab-gi-grid .w-vwrapper.usg_vwrapper_1 {
    padding: 0;
}

/* The layout's own spacing between elements is 4px, too tight under the
   excerpt. .l-body is needed to outrank .w-grid .w-vwrapper > :not(:last-child),
   which carries --vwrapper-gap at equal specificity. */
.l-body .w-grid.ab-gi-grid .post_content {
    margin-bottom: 1rem;
}

.w-grid.ab-gi-grid .usg_btn_1 {
    margin-top: 12px;
}

.w-grid.ab-small-blog-grid .w-grid-item > .w-grid-item-h {
    display: flex;
}

.w-grid.ab-small-blog-grid .w-hwrapper.usg_hwrapper_1 {
    gap: 24px;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    background: #fff;
}

.w-grid.ab-small-blog-grid .has_aspect_ratio {
    aspect-ratio: 3/2;
    border-radius:var(--radius-img);
    flex: 0 0 25%;
}

.w-grid.ab-small-blog-grid .usg_post_date_1 {
    font-size: var(--fs-3xs);
    color: var(--color-content-faded);
    font-weight: 500;
}

.w-grid.ab-small-blog-grid .usg_btn_1 {
    margin-top: 6px;
}

/* Therapists */

/* Our Team filter (us_list_filter, field style 3) after Figma Our Team
   492:2773 (Marija, Ruttl O15B / WUwk 2026-10-02/04): "Filter by:" 16 / 600
   in secondary green, 16 to the pills (10 here + the list's 6 gap); every
   pill hugs its label - 24 | text | 10 | CaretDown 16 | 24 - instead of
   taking the width of its longest option. field-sizing sizes the select to
   the chosen option (Chrome and Edge, measured 2026-10-05: 121 / 134 / 129 /
   135 against Figma 122 / 137 / 130); a browser without it keeps the old
   width and the same caret. Narrower pills also keep all four in one row on
   the iPad (820), so Insurance no longer wraps under "Filter by:". The caret
   is the menu's caret-down.svg (Figma CaretDown, filled). Impreza draws its
   arrow as a border triangle with a margin of the field padding on both
   sides, so the margin is reset in full. */
.w-filter.state_desktop .w-filter-list-title {
    display: block;
    font-size: var(--fs-lg);
    padding-inline-end: 10px;
    margin-bottom: 0;
    color: var(--color-content-secondary);
}

.l-body .w-filter.for_list .w-filter-item-value-select {
    field-sizing: content;
    padding-inline: 24px calc(24px + 16px + 10px);
}

.l-body .w-filter.for_list .w-filter-item-values::after {
    top: 50%;
    inset-inline-end: 24px;
    width: 16px;
    height: 16px;
    margin: -8px 0 0;
    border: 0;
    background-color: currentColor;
    -webkit-mask: url('assets/img/caret-down.svg') center / 16px 16px no-repeat;
    mask: url('assets/img/caret-down.svg') center / 16px 16px no-repeat;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   SHAPE DECORATORS — decorative shapes along the edges
   -----------------------------------------------------------------------------
   A shape is a COMPONENT, not a property of the section. The class carries the
   drawing, the edge and the natural size; the section only says how far the
   shape hangs below it, through `--shape-hang` (0 = flush with the bottom,
   1 = entirely below).

   MECHANISM: `::after` with `position: absolute`, NOT `background-image` on the
   section. A background is clipped by the section box, so the part that
   crosses into the next section in the design cannot be drawn at all. The same
   pattern is already used by `page-title-section::after` and
   `therapist-main-section::before`.

   ASSETS ARE EXPORTED FROM FIGMA (`download_assets`, svg format), NEVER CUT BY
   HAND. Learned the hard way: the shape on the right edge was assumed to be a
   mirror of the one on the left, and mirror files were made. It is not.
   Checked by comparing coordinates: all three orange shapes on Locations are
   the SAME drawing in different WINDOWS (our existing one +0, Group 38 +229,
   Group 47 +436 on x), and Group 34 is `pale-green-left` shifted by +175 —
   none of them is a mirror. Group 28 matches nothing in the library; it really
   is a new drawing. MEASURED 2026-09-24.

   Hence the `-lg` suffix means a separate CROP of the same drawing, not a
   different blob.

   `--shape-w` / `--shape-h` live ON THE PSEUDO-ELEMENT, not on the section. A
   section can carry TWO shape classes (e.g. blue left + orange right); with the
   vars on the section, the second class would overwrite the first. MEASURED
   2026-09-24: that way the blue one got the orange one's width, 410x905
   instead of 284x627, and covered two white boxes. `--shape-hang` and
   `--shape-rise` may stay on the section because they are different names and
   each is read by one pseudo only.

   Colour and transparency live INSIDE the SVG — do not add `opacity` here.
   Size: max = natural width, vw = that width / 1440, min = half the maximum.

   LIMITATION: if the next section has its own background colour, it paints
   over the overflowing part (it comes later in the DOM). Works only over
   transparent sections. ----- */

.shape-orange-bl,
.shape-orange-l-lg,
.shape-orange-r,
.shape-brown-bl,
.shape-green-bl,
.shape-green-br,
.shape-pale-green-l,
.shape-pale-green-r,
.shape-blue-l,
.shape-blue-l-lg,
.shape-blue-br,
.shape-universal-br {
	position: relative;
	isolation: isolate;
}

.shape-orange-bl::after,
.shape-orange-l-lg::after,
.shape-orange-r::after,
.shape-brown-bl::after,
.shape-green-bl::after,
.shape-green-br::after,
.shape-pale-green-l::after,
.shape-pale-green-r::after,
.shape-blue-l::after,
.shape-blue-l-lg::after,
.shape-blue-br::after,
.shape-universal-br::after {
	content: '';
	position: absolute;
	/* Below EVERYTHING in the section. With `z-index: 0` the pseudo is a positioned
	   element and paints ABOVE content that has no layer of its own — it would
	   cover text and images. `-1` drops it below the content, and
	   `isolation: isolate` on the section keeps that layer INSIDE it: without it
	   a negative z-index drifts to the root context and the shape disappears
	   behind the page background. */
	z-index: -1;
	width: var(--shape-w);
	bottom: calc(var(--shape-h) * -1 * var(--shape-hang, 0));
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.shape-orange-bl::after {
	--shape-w: clamp(140px, 19vw, 277px);
	--shape-h: calc(var(--shape-w) * 423 / 277);
	left: 0;
	aspect-ratio: 277 / 423;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-orange-bottom-left.svg');
	background-position: left bottom;
}

.shape-orange-l-lg::after {
	--shape-w: clamp(253px, 35vw, 506px);
	--shape-h: calc(var(--shape-w) * 423 / 506);
	left: 0;
	aspect-ratio: 506 / 423;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-orange-left-lg.svg');
	background-position: left bottom;
}

.shape-orange-r::after {
	--shape-w: clamp(205px, 28vw, 410px);
	--shape-h: calc(var(--shape-w) * 549 / 410);
	right: 0;
	aspect-ratio: 410 / 549;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-orange-right.svg');
	background-position: right bottom;
}

.shape-brown-bl::after {
	--shape-w: clamp(130px, 18vw, 261px);
	--shape-h: calc(var(--shape-w) * 308 / 261);
	left: 0;
	aspect-ratio: 261 / 308;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/brown-bottom-left.svg');
	background-position: left bottom;
}

.shape-green-bl::after {
	--shape-w: clamp(280px, 52vw, 748px);
	--shape-h: calc(var(--shape-w) * 789 / 748);
	left: 0;
	aspect-ratio: 748 / 789;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/green-bottom-left.svg');
	background-position: left bottom;
}

.shape-green-br::after {
	--shape-w: clamp(240px, 44vw, 628px);
	--shape-h: calc(var(--shape-w) * 789 / 628);
	right: 0;
	aspect-ratio: 628 / 789;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/green-bottom-right.svg');
	background-position: right bottom;
}

.shape-pale-green-l::after {
	--shape-w: clamp(165px, 23vw, 331px);
	--shape-h: calc(var(--shape-w) * 645 / 331);
	left: 0;
	aspect-ratio: 331 / 645;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-green-left.svg');
	background-position: left bottom;
}

.shape-pale-green-r::after {
	--shape-w: clamp(178px, 25vw, 355px);
	--shape-h: calc(var(--shape-w) * 645 / 355);
	right: 0;
	aspect-ratio: 355 / 645;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-green-right.svg');
	background-position: right bottom;
}

.shape-blue-l::after {
	--shape-w: clamp(130px, 18vw, 260px);
	--shape-h: calc(var(--shape-w) * 445 / 260);
	left: 0;
	aspect-ratio: 260 / 445;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-blue-left.svg');
	background-position: left bottom;
}

.shape-blue-l-lg::after {
	--shape-w: clamp(142px, 20vw, 284px);
	--shape-h: calc(var(--shape-w) * 627 / 284);
	left: 0;
	aspect-ratio: 284 / 627;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-blue-left-lg.svg');
	background-position: left bottom;
}

.shape-blue-br::after {
	--shape-w: clamp(250px, 35vw, 507px);
	--shape-h: calc(var(--shape-w) * 824 / 507);
	right: 0;
	aspect-ratio: 507 / 824;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-blue-bottom-right.svg');
	background-position: right bottom;
}

.shape-universal-br::after {
	--shape-w: clamp(220px, 41vw, 590px);
	--shape-h: calc(var(--shape-w) * 661 / 590);
	right: 0;
	aspect-ratio: 590 / 661;
	background-image: url('/wp-content/themes/Impreza-child/assets/img/shape-bottom-right-universal.svg');
	background-position: right bottom;
}

/* TOP-ANCHORED VARIANT. A shape that sits ON THE BOUNDARY of two sections in
   the design is attached not to the upper section but to the LOWER one, and
   rises upward through `::before`. The reason is stacking: the upper section
   here has to carry `z-index: 2` because of the Office Hours card, so
   everything in it — the shape included — would sit above the white service
   cards. Attached to the lower section, the shape naturally stays below
   everything that comes after.
   `--shape-rise` is how far it rises ABOVE its own section, relative to its
   own height.

   Figma Group 47: y1229-1777 (548), the services section starts at 1693
   -> 464px of it sits above = 0.85. */

.shape-orange-r-up {
	position: relative;
	isolation: isolate;
}

.shape-orange-r-up::before {
	--shape-w: clamp(205px, 28vw, 410px);
	--shape-h: calc(var(--shape-w) * 549 / 410);
	content: '';
	position: absolute;
	z-index: -1;
	right: 0;
	top: calc(var(--shape-h) * -1 * var(--shape-rise, 0));
	width: var(--shape-w);
	aspect-ratio: 410 / 549;
	background: url('/wp-content/themes/Impreza-child/assets/img/pale-orange-right.svg') no-repeat right bottom / contain;
	pointer-events: none;
}

.location-services-section.shape-orange-r-up { --shape-rise: 0.85; }

/* How far each shape hangs below its own section — from Figma 1072:766, as
   (group bottom edge - section bottom edge) / group height:
     Group 47  y1229-1777 (548) vs hero       823-1346  -> 0.79
     Group 28  y2152-2779 (627) vs services  1693-2385  -> 0.63
     Group 34  y3036-3681 (645) vs therapists 2799-3723 -> ends ABOVE the
               section bottom, hence 0
     Group 38  y4259-4682 (423) vs start     3854-4377  -> 0.72 */

.location-services-section.shape-blue-l-lg       { --shape-hang: 0.63; }
.therapists-grid-main-section.shape-pale-green-r { --shape-hang: 0; }

/* An exception to the calculation above. Below it is `faq-section` with a
   solid colour; it comes later in the DOM and paints OVER the overflow, so
   everything below the section disappears. Figma is the same (the band is
   above the group), but there 130px of white space sits between the section
   and the band, which does not exist live. So the hang follows what is
   ACTUALLY visible in Figma: group 4259-4682, band starts at 4507 -> 248px =
   59% -> 0.41. At 0.72 only 28% showed and the shape just peeked out. */

.location-start-section.shape-orange-l-lg        { --shape-hang: 0.41; }

/* Location band rhythm (Ruttl 2026-10-02, "manji razmak" x5 on the two
   location pages). Figma 1072:766 keeps about 120 between the middle bands:
   services CTA bottom 2678 -> therapists title 2799 (121), therapists text
   3723 -> start band 3854 (131). Live both joints were 180 (huge 120 +
   medium 60). The services row went to `medium` in the builder (60 + 60);
   the start band keeps `huge` for its bottom (130 to the FAQ band in Figma)
   and takes medium at the top only, which no row param can express.
   Phones: see the phone block. */
.l-body .l-section.location-start-section {
    padding-top: var(--section-pad-medium);
}

/* SERVICE PAGE SHAPES - Figma 486:1397 (Couples, the parent service layout)
   and 458:161 (Anxiety, the specialty layout); Nemanja 2026-10-04. Desktop
   and laptops only: Figma has no tablet or phone drawing for them.

   Keyed on the page pattern, not on a shape class in el_class. The pattern
   is byte-identical on all 24 pages (21 specialty pages: `service-top-section`
   with the `alt-bg-box` card, `service-benefits-approaches-section`; 3 parent
   pages: `parent-service-main-section` with the `alt-content-bg-box` box), so
   no page edits - only `healing-journey-cta` on the shared CTA block 9537. Home also has `service-benefits-approaches-section`, but
   a different layout and no such shapes, hence `body:not(.home)`.

   Three shapes hang from a coloured BOX, not from the section: in Figma they
   sit behind a corner of the card, the box or the CTA band, and those run
   different heights from page to page - anchored to the section, a shape
   landed 1000px below the card on EMDR and behind the CTA at 1100 (both
   measured). The box gets `position: relative` and reaches the
   viewport edge with `right: calc(50% - 50vw)` (the box is centred; the
   scrollbar's share is clipped by `.l-canvas`). The box must NOT become a
   stacking context, so the `z-index: -1` pseudo paints below the box
   background, inside the section's isolated context.

   Assets from Figma (`download_assets` svg, cleaned to paths):
     pale-orange-bottom-right.svg 454x423 Group 37 - same drawing as
       pale-orange-bottom-left, another window (Group 38 is the same, 420)
     sage-right.svg 425x607 Group 41 · sage-left.svg 389x593 Group 36
   Offsets, as a share of the shape's own height (Figma px):
     card bottom 1755 -> shape bottom 1926      0.40 below (Anxiety)
     box bottom 1922 -> shape bottom 2097       0.29 below (Couples)
     shape top 22 above the Benefits heading, which sits at the section's
       120 top padding -> 98                    0.165 from the top
     CTA band top 4736 -> shape top 4535        0.48 above the CTA top
       (Anxiety; the CTA row carries `healing-journey-cta`)
   Couples' orange shape above the FAQ band (Group 42) is NOT here: it is the
   older background on `.l-section.parent-service-main-section` (all widths).
   A pseudo copy of it drew a second blob over the first (Nemanja 2026-10-04). */
@media (min-width: 1025px) {

	.parent-service-main-section,
	.service-top-section,
	body:not(.home) .service-benefits-approaches-section {
		isolation: isolate;
	}

	.parent-service-main-section .alt-content-bg-box,
	.service-top-section .alt-bg-box,
	body:not(.home) .service-benefits-approaches-section .healing-journey-cta {
		position: relative;
	}

	.parent-service-main-section .alt-content-bg-box::after,
	.service-top-section .alt-bg-box::after,
	body:not(.home) .service-benefits-approaches-section::before,
	body:not(.home) .service-benefits-approaches-section .healing-journey-cta::after {
		content: '';
		position: absolute;
		z-index: -1;
		width: var(--shape-w);
		aspect-ratio: var(--shape-ratio);
		background-repeat: no-repeat;
		background-size: contain;
		pointer-events: none;
	}

	.service-top-section .alt-bg-box::after {
		--shape-w: clamp(227px, 31.5vw, 454px);
		--shape-h: calc(var(--shape-w) * 423 / 454);
		--shape-ratio: 454 / 423;
		right: calc(50% - 50vw);
		bottom: calc(var(--shape-h) * -0.4);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-orange-bottom-right.svg');
		background-position: right bottom;
	}

	.parent-service-main-section .alt-content-bg-box::after {
		--shape-w: clamp(213px, 29.5vw, 425px);
		--shape-h: calc(var(--shape-w) * 607 / 425);
		--shape-ratio: 425 / 607;
		right: calc(50% - 50vw);
		bottom: calc(var(--shape-h) * -0.29);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/sage-right.svg');
		background-position: right bottom;
	}

	body:not(.home) .service-benefits-approaches-section::before {
		--shape-w: clamp(195px, 27vw, 389px);
		--shape-h: calc(var(--shape-w) * 593 / 389);
		--shape-ratio: 389 / 593;
		left: 0;
		top: calc(var(--shape-h) * 0.165);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/sage-left.svg');
		background-position: left top;
	}

	body:not(.home) .service-benefits-approaches-section .healing-journey-cta::after {
		--shape-w: clamp(227px, 31.5vw, 454px);
		--shape-h: calc(var(--shape-w) * 423 / 454);
		--shape-ratio: 454 / 423;
		right: calc(50% - 50vw);
		top: calc(var(--shape-h) * -0.48);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-orange-bottom-right.svg');
		background-position: right bottom;
	}
}

/* GROUPS & INTENSIVES SHAPES - no Figma drawing for these, placed by Claude
   on Nemanja's request (2026-10-04) with the same assets and the same rules as the service pages:
   shapes at the viewport edges, alternating sides down the page, peeking from
   behind a box corner or sitting in an empty column, never under body text.
   Desktop and laptops only.

     Blog post: tried the same day (orange under the featured image, sage at
       the end of the left column) and removed - Nemanja: none on posts.
     G&I page (51, layout 10580 cards): sage behind card 1's lower right
       corner (0.29 h below, like the parent service box), orange behind card
       3's lower left (0.4 h below).
     G&I singles: sage in the empty left column under the sticky info box
       (top 0.5 h into the section), orange behind the CTA band's top right -
       the same shape and offset as on the specialty pages.

   The edge offset is `min(590px - 50vw, -5vmin)`: the distance from a box
   flush with the 1180 container to the viewport edge (the container's own
   rule, as in --margin-inline-stretch). That variable itself is NOT used
   here: inside the nested G&I sections it resolves with 0 instead of 5vmin
   and the shape stopped at the container edge at 1100 (measured). The
   sections are found with :has(), the template rows carry no class. */
@media (min-width: 1025px) {

	.gi-programs-section,
	.single-ab_group_intensive .l-main > .l-section:has(.gi-info-vwrapper) {
		isolation: isolate;
	}

	.gi-programs-section .w-grid-item,
	.single-ab_group_intensive .healing-journey-cta {
		position: relative;
	}

	.gi-programs-section .w-grid-item:nth-child(1)::after,
	.gi-programs-section .w-grid-item:nth-child(3)::after,
	.single-ab_group_intensive .l-main > .l-section:has(.gi-info-vwrapper)::after,
	.single-ab_group_intensive .healing-journey-cta::after {
		content: '';
		position: absolute;
		z-index: -1;
		width: var(--shape-w);
		aspect-ratio: var(--shape-ratio);
		background-repeat: no-repeat;
		background-size: contain;
		pointer-events: none;
	}

	.gi-programs-section .w-grid-item:nth-child(1)::after {
		--shape-w: clamp(213px, 29.5vw, 425px);
		--shape-h: calc(var(--shape-w) * 607 / 425);
		--shape-ratio: 425 / 607;
		right: min(590px - 50vw, -5vmin);
		bottom: calc(var(--shape-h) * -0.29);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/sage-right.svg');
		background-position: right bottom;
	}

	.gi-programs-section .w-grid-item:nth-child(3)::after {
		--shape-w: clamp(140px, 19vw, 277px);
		--shape-h: calc(var(--shape-w) * 423 / 277);
		--shape-ratio: 277 / 423;
		left: min(590px - 50vw, -5vmin);
		bottom: calc(var(--shape-h) * -0.4);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-orange-bottom-left.svg');
		background-position: left bottom;
	}

	.single-ab_group_intensive .l-main > .l-section:has(.gi-info-vwrapper)::after {
		--shape-w: clamp(195px, 27vw, 389px);
		--shape-h: calc(var(--shape-w) * 593 / 389);
		--shape-ratio: 389 / 593;
		left: 0;
		top: calc(var(--shape-h) * 0.5);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/sage-left.svg');
		background-position: left top;
	}

	.single-ab_group_intensive .healing-journey-cta::after {
		--shape-w: clamp(227px, 31.5vw, 454px);
		--shape-h: calc(var(--shape-w) * 423 / 454);
		--shape-ratio: 454 / 423;
		right: min(590px - 50vw, -5vmin);
		top: calc(var(--shape-h) * -0.48);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-orange-bottom-right.svg');
		background-position: right bottom;
	}
}

/* HOME SHAPES - Figma Mockup 3 (267:806); Marija, Ruttl 2026-10-02 (jEsx,
   vVMJ, lwyb, jsIG); Nemanja 2026-10-05. Desktop and laptops only: the phone
   Home frame (368:174) stops before these sections and has no shapes there.
   Same mechanism as the service pages above: a pseudo-element at z-index -1
   inside an isolated section, so it paints under the section's content and
   over the page ground.

   Assets from Figma (download_assets svg, cleaned to paths). Each file is the
   group's window inside the 1440 frame, so its width is the natural width:
     Group 28  pale-blue-left-lg.svg       284x627  existing file, same paths
     Group 29  sage-left-lg.svg            440x593  sage-left's drawing, a
                                                    window 51 wider
     Group 30  pale-orange-right-lg.svg    523x576  the pale orange drawing at
                                                    1.363x, a new file
     Group 33  pale-blue-bottom-right.svg  507x824  existing file, same paths
     Group 34  pale-green-left-lg.svg      469x645  pale-green-left's drawing,
                                                    a window 138 wider
   Size: max = natural width, vw = that width / 1440, min = half the maximum.

   Placement, as a share of the shape's own height (Figma px):
     Group 28 top 3219, the CTA band's top 3130 -> 0.142 below the band top.
       Anchored to the band, like the specialty pages, so it follows the band
       when the methods grid above it changes height.
     Group 29 bottom 4868, the FAQ band's top 4857 -> 0.019 below the section
     Group 30 bottom 4942                         -> 0.148 below
     Group 34 bottom 6866, the testimonials band's top 6808 -> 0.090 below
     Group 33 bottom 7181                                   -> 0.453 below
   The FAQ and testimonials bands are opaque and come later in the DOM, so
   they cover what hangs past the section - in Figma as well.
   MEASURED 2026-10-05 at 1440: 284x627 at 3165 (CTA top 3076 + 89), 440x593
   and 523x576 ending 11 and 85 below the clients section, 469x645 and
   507x824 ending 58 and 373 below the team section - the Figma offsets. */
@media (min-width: 1025px) {

	.home .l-section.service-benefits-approaches-section,
	.l-section.home-clients-section,
	.l-section.home-team-section {
		isolation: isolate;
	}

	.home .l-section.service-benefits-approaches-section .healing-journey-cta {
		position: relative;
	}

	.home .l-section.service-benefits-approaches-section .healing-journey-cta::after,
	.l-section.home-clients-section::before,
	.l-section.home-clients-section::after,
	.l-section.home-team-section::before,
	.l-section.home-team-section::after {
		content: '';
		position: absolute;
		z-index: -1;
		width: var(--shape-w);
		aspect-ratio: var(--shape-ratio);
		background-repeat: no-repeat;
		background-size: contain;
		pointer-events: none;
	}

	.home .l-section.service-benefits-approaches-section .healing-journey-cta::after {
		--shape-w: clamp(142px, 19.72vw, 284px);
		--shape-h: calc(var(--shape-w) * 627 / 284);
		--shape-ratio: 284 / 627;
		left: calc(50% - 50vw);
		top: calc(var(--shape-h) * 0.142);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-blue-left-lg.svg');
		background-position: left top;
	}

	.l-section.home-clients-section::before {
		--shape-w: clamp(220px, 30.56vw, 440px);
		--shape-h: calc(var(--shape-w) * 593 / 440);
		--shape-ratio: 440 / 593;
		left: 0;
		bottom: calc(var(--shape-h) * -0.019);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/sage-left-lg.svg');
		background-position: left bottom;
	}

	.l-section.home-clients-section::after {
		--shape-w: clamp(262px, 36.32vw, 523px);
		--shape-h: calc(var(--shape-w) * 576 / 523);
		--shape-ratio: 523 / 576;
		right: 0;
		bottom: calc(var(--shape-h) * -0.148);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-orange-right-lg.svg');
		background-position: right bottom;
	}

	.l-section.home-team-section::before {
		--shape-w: clamp(235px, 32.57vw, 469px);
		--shape-h: calc(var(--shape-w) * 645 / 469);
		--shape-ratio: 469 / 645;
		left: 0;
		bottom: calc(var(--shape-h) * -0.09);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-green-left-lg.svg');
		background-position: left bottom;
	}

	.l-section.home-team-section::after {
		--shape-w: clamp(254px, 35.21vw, 507px);
		--shape-h: calc(var(--shape-w) * 824 / 507);
		--shape-ratio: 507 / 824;
		right: 0;
		bottom: calc(var(--shape-h) * -0.453);
		background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-blue-bottom-right.svg');
		background-position: right bottom;
	}
}

.l-section.therapist-main-section {
    position: relative;
}

.l-section.therapist-main-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    width: clamp(160px, 22vw, 331px);
    aspect-ratio: 331/645;
    z-index: 0;
    pointer-events: none;
    background-image: url('/wp-content/themes/Impreza-child/assets/img/pale-green-left.svg');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
}

.l-section.therapist-main-section>.l-section-h {
    position: relative;
    z-index: 1;
}
.therapist-form-inner-row.alt-bg-box {
    padding: 36px 40px 36px 36px;
    border-radius: var(--radius-lg);
    background-image: url('/wp-content/themes/Impreza-child/assets/img/brown-bottom-left.svg'), url('/wp-content/themes/Impreza-child/assets/img/green-bottom-right.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: bottom left, bottom right;
    background-size: clamp(130px, 18vw, 261px) auto, clamp(100px, 14vw, 206px) auto;
}
.therapist-form-inner-row.alt-bg-box a {
    color: var(--color-content-heading);
}

.single-therapist-img-vwrapper {
    position: relative;
}

.single-therapist-img-vwrapper .psy-today-logo {
    position: absolute;
    left: 9px;
    bottom: 12px;
}

.single-therapist-specialties-vwrapper {
    padding: 2rem 1.5rem;
    border-radius: var(--radius-lg);
}

.single-therapist-specialties-vwrapper .w-post-elm.post_taxonomy {
    list-style-position: inside;
    font-size: var(--fs-xs);
    line-height: 1.7;
}

.single-therapist-specialties-vwrapper .w-post-elm.post_taxonomy a {
    display: list-item;
    color: var(--color-alt-content-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.single-therapist-specialties-vwrapper .w-post-elm.post_taxonomy a:hover {

    color: var(--color-content-link-hover);
}

/* Hold Me Tight seminar photo (Ruttl Cz1p): the couple is at the far left of
   the 2.4:1 frame, so every narrower crop of it - the G&I hero on tablets and
   phones, where cover keeps the middle - cut them out. Anchored left, the
   crop keeps both faces. Keyed on the file, so it holds wherever it is used. */
.l-body img[src*="Hold_Me_Tight_Couples_Seminar"] {
    object-position: 0% 50%;
}

/* Videos */

/* Single video (ab_video, its own Page Template; the row carries
   el_class video-template-main-section): the player gets the image radius,
   like the videos in the grids (Nemanja 2026-10-05). overflow: clip so the
   iframe is cut to the corners. */
.l-body .l-section.video-template-main-section .w-video {
    border-radius: var(--radius-img);
    overflow: clip;
}

.w-grid.ab-videos-grid .w-video {
    flex: 0 0 44%;
    border-radius: 8px;
}

/* Gravity Forms */

#gform_1 input::placeholder,
#gform_1 textarea::placeholder {
    opacity: 1;
}

/* Gravity Forms fields, every form on the site (Marija, Ruttl: Emily "inputs
   taller" and "textarea too tall" on desktop, Scottsdale and Contact "same as
   the other form", location pages on phones "less space between the
   fields"). Figma 1072:895 (Location page form): fields 48 tall, 8 apart,
   message 144. Live they were 38.5 (the Field Style's 3.5em at its 11px),
   16 apart (GF's own grid gap) and 288 (GF's textarea.large).
   --inputs-height is redeclared on the GF wrapper only, so every Impreza rule
   that reads it follows and no other input on the site moves. */
.l-body .gform_wrapper.gravity-theme {
    --inputs-height: 48px;
}

.l-body .gform_wrapper.gravity-theme .gform_fields {
    row-gap: 8px;
}

.l-body .gform_wrapper.gravity-theme .gfield textarea.large {
    height: 144px;
}

/* Google Maps embed. The <iframe> draws square corners of its own, so the
   radius has to go on the wrapper that clips it. MEASURED 2026-09-24: the
   wrapper already carried `overflow: hidden`, only the radius was missing.
   16px, not the 8px the cards use — the map is a large media block and the
   design gives it the bigger step. */
.w-html.map-embed-container {
    border-radius: var(--radius-lg);
}

/* Mailchimp Embeded Forms */

#mc_embed_signup input.email {
    font-size: 11px;
    padding: 0 15px;
    min-height: 48px;
    width: 100%;
    color: #fff;
    box-shadow: 0 0 0 1px #fff inset;
    margin-bottom: 32px;
}

#mc_embed_signup input.fname {
    font-size: 11px;
    padding: 0 15px;
    min-height: 48px;
    width: 100%;
    color: #fff;
    box-shadow: 0 0 0 1px #fff inset;
    margin-bottom: 8px;
}

#mc_embed_signup input::placeholder {
opacity: 1;
}

#mc_embed_signup input.button {
    color: var(--color-content-faded);
    background: #fff;
    font-size: 13px;
    line-height: 1.4 !important;
    font-weight: 600;
    letter-spacing: 0em;
    padding: 1.1em 2.1em;
    transition-duration: 0.3s;
    border-radius: 999px;
}

#mc_embed_signup input.button:hover {
    background: var(--color-content-primary);
    color: #fff;
}

/* Location pages - Office Hours card. Figma 1072:908. Rides on alt-bg-box for
   the radius and the shadow, then takes back the ground and the inset: the
   design uses the PAGE colour rather than white, so the card reads as a raised
   block on the same ground, and the inset is 16/26/24/16 rather than even. */
.l-body .w-vwrapper.office-hours-vwrapper {
    background: var(--color-content-bg);
    padding: 16px 26px 24px 16px;
    /* Below the stacking width the card sits in the office column, above the
       Call/Text buttons (Nemanja 2026-10-04). In the builder the office
       details vwrapper is split in two around it: a vwrapper nested in a
       vwrapper breaks - WordPress closes the outer one at the inner's
       [/us_vwrapper], and the buttons and the map fell out of it (measured,
       reverted). */
}

/* The two halves and the card keep the details' own 1.4rem rhythm. 0-2-0 on
   purpose: on desktop the overlay's margin: 0 (0-3-0) must win for the card. */
.office-hours-vwrapper + .location-details-vwrapper,
.location-details-vwrapper + .office-hours-vwrapper {
    margin-top: 1.4rem;
}

/* Gallery thumbnails (us_gallery: Scottsdale, Employment), 8px corners
   (Nemanja 2026-10-04). The item clips both the image and the hover link. */
.w-gallery .w-gallery-item {
    border-radius: 8px;
    overflow: hidden;
}

/* Contact */

.l-body .contact-box {
    border-radius: var(--radius-lg);
}

.contact-box .w-text:not(.icon_atleft) {
    margin-bottom: 12px;
}

.contact-box .w-text.icon_atleft .w-text-h {
    display: flex;
    gap: 1rem;
}

/* The two office cards side by side are one height, and the address takes the
   difference, so both Call buttons and both maps sit on one line (Marija,
   Ruttl 2026-10-04, iPad). At 820 the Anthem address takes one line more
   than Scottsdale's: cards were 476 and 451, buttons 25 apart. The
   column is already stretched; .wpb_wrapper is not (it is a flex child of
   .vc_column-inner, which only stretches it across), so it grows, the card
   fills it and the address absorbs the rest. Stacked on phones nothing
   changes. Only a card that is alone in its column: the location pages
   (3979, 3987) carry contact-box on the two location-details halves around
   the Office Hours card, and at 100% each half took the whole column height,
   which pushed the hours and the map ~1000px down (Nemanja 2026-10-05). */
.l-body .wpb_column > .vc_column-inner > .wpb_wrapper:has(> .w-vwrapper.contact-box:only-child) {
    flex: 1 1 auto;
}

.l-body .w-vwrapper.contact-box:only-child {
    height: 100%;
}

.l-body .w-vwrapper.contact-box:only-child > .w-text.icon_atleft {
    flex-grow: 1;
}

.map-embed-container {
    position: relative;
    padding-bottom: 62.5%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.map-embed-container iframe,
.map-embed-container object,
.map-embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text-message-consent {
    font-size: var(--fs-xs);
    font-weight: 500;
}

/* Quizzes */

.quizzes-grid .quiz-box-hwrapper {
    gap: var(--space-sm);
    position: relative;
    background-image: url('/wp-content/themes/Impreza-child/assets/img/shape-bottom-right-universal.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: clamp(160px, 20vw, 295px) auto;
}

.quizzes-grid .w-grid-item:nth-child(3n+1) .quiz-box-hwrapper {
    background-color: var(--color-light-primary);
}

.quizzes-grid .w-grid-item:nth-child(3n+2) .quiz-box-hwrapper {
    background-color: var(--color-content-secondary);
}

.quizzes-grid .w-grid-item:nth-child(3n) .quiz-box-hwrapper {
    background-color: var(--color-alt-content-primary);
}

.l-section.service-quiz-video-section .quizzes-grid .w-grid-item .quiz-box-hwrapper {
    background-color: var(--color-content-secondary);
}

.quizzes-grid .quiz-box-hwrapper .post_image {
    border-radius: 8px;
    flex: 0 0 44%;
    min-width: 0;
    aspect-ratio: 17/22;
}

.quizzes-grid .quiz-box-hwrapper .post_image img {
    height: 100%;
    width: auto;
    object-fit: cover;
}

/* Grid Layout 10137 carries these three spacings in its own `css` field
   (post_title 8px, post_content 2rem, btn margin-top:auto), but Impreza does
   NOT emit the generated block for that layout — measured 2026-09-25:
   `.layout_10137` appears neither inline nor in any enqueued file, while
   `.layout_9828` emits its two rules as expected. The same holds for 9662 and
   9920. Until that is fixed in the theme, the spacings live here.

   An earlier attempt targeted `.wpb_text_column`, which does not exist in this
   grid — the element is `.post_content`, so the rule hit nothing. */
/* The title is an h3, so Impreza's `h1..h6 { color: var(--color-content-heading) }`
   (#C28041) catches it and breaks inheritance from the box. The text below is
   a div and inherits #fff from .secondary-bg-box as it should. `inherit`, not
   #fff: that way the title follows the box colour if it ever changes. */
.quizzes-grid .quiz-box-hwrapper .post_title,
.quizzes-grid .quiz-box-hwrapper .post_title a {
    margin-bottom: 8px;
    color: inherit;
}

.quizzes-grid .quiz-box-hwrapper .post_content {
    margin-bottom: 2rem;
}

.quizzes-grid .quiz-box-hwrapper .w-btn {
    margin-top: auto;
}

.mlw_qmn_message_before {
    color: var(--color-content-text);
    font-size: var(--font-size);
}

.qmn_btn,
.qsm-quiz-container.qmn_quiz_container .qmn_btn,
.qsm-quiz-container.qmn_quiz_container .btn,
.qmn_quiz_container .qmn_btn,
.qmn_quiz_container .btn {
    font-family: var(--font-family);
    font-style: normal;
    text-transform: none;
    line-height: 1.4 !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0em;
    padding: 1.1em 2.1em;
    transition-duration: 0.3s;
    border-radius: 999px;
    background: var(--color-content-heading) !important;
    border: none;
    box-shadow: none;
}

.qmn_btn:hover,
.qsm-quiz-container.qmn_quiz_container .qmn_btn:hover,
.qsm-quiz-container.qmn_quiz_container .btn:hover,
.qmn_quiz_container .qmn_btn:hover,
.qmn_quiz_container .btn:hover {
    background: var(--color-content-primary) !important;
}

.quiz_section label,
.quiz_section .mlw_qmn_question {
    font-weight: var(--bold-font-weight);
    margin-bottom: .7rem;
}

/* Quiz questions on phones, one size (Marija, Ruttl 2026-10-04, iPhone,
   parenting quiz: "some questions are bigger, make them all the bigger one").
   QSM writes a question two ways: text in the description renders as
   .mlw_qmn_question, which QSM's qmn_primary.css raises to 18px at
   max-width 768; text in the question title renders as .mlw_qmn_new_question
   and stays at body 15. Same 18 for the second kind, on QSM's own 768 edge so
   the two never differ at exactly 768. Desktop is 15 for both already. */
@media (max-width: 768px) {
    .quiz_section .mlw_qmn_new_question {
        font-size: 18px;
    }
}

.quiz_section .qmn_radio_answers.qmn_radio_horizontal_answers label,
.quiz_section .qmn_check_answers.qmn_radio_horizontal_answers label,
.quiz_section .qmn_accept_answers.qmn_radio_horizontal_answers label {
    max-width: none;
    font-size: 1rem;
}

.quiz_section input[type=radio]:before {
    color: var(--color-content-primary);
}

/* Groups & Intensives info box (template 10345). The box is four
   us_post_custom_field elements with hide_empty="1", so on a record with no
   dates, time, location or cost every child drops out and the wrapper renders
   as an empty coloured card 280x60.

   Impreza's Display Logic is the right mechanism for this and the CSS is a
   stand-in. The custom_field condition could not be reproduced from here:
   measured 2026-09-25, both conditions_operator="and" with one has_value
   condition and "or" with four evaluated FALSE on a record whose field is
   populated, hiding the box everywhere. The working shape is in the builder UI
   - capture it once, move the rule there, and delete this. */
/* The row directly above the FAQ band. Inside us_post_content that row is
   height_auto - 0 padding top and bottom - so the last line of body copy sits
   flush against the green edge. The service pages do not need this: there the
   preceding row is height_huge with pb-0 and its own component supplies the
   space, while here the row is raw prose.

   Padding rather than margin, and a ladder token rather than a number, so it
   retunes with --section-pad-medium like every other section step. :has(+ ...)
   targets whichever row happens to be last before the band, which differs per
   record - that is the one thing the builder cannot express, since the row is
   in the post content and not in the template. */
/* The sticky info column travels the whole row, so it reaches the FAQ band.
   Impreza drives that sticky from JS - the element stays position: relative and
   JS moves it - so its travel cannot be bounded by CSS; the band is
   position: relative and later in the DOM, and with both at z-index auto the
   band simply painted over the box. Measured 2026-09-25 with elementFromPoint
   at the box's centre: the FAQ section came back, i.e. the box was covered.

   Lifting the box is only safe because the band's content now starts at 708
   while the box ends at 643. Aligning that content is what makes this rule
   possible - do not raise this z-index without checking that clearance. */
.single-ab_group_intensive .vc_column-inner.type_sticky {
    z-index: 2;
}

.single-ab_group_intensive .w-post-elm.post_content > .l-section:has(+ .faq-section) {
    padding-bottom: var(--section-pad-medium);
}

.l-body .w-vwrapper.gi-info-vwrapper:not(:has(*)) {
    display: none;
}

/* Groups & Intensives template (10345): the 3rem between the sticky info
   column and the body copy. Moved out of the element's css= blob on
   2026-10-03 so the phone value can follow the stacking width (767) - a
   blob's mobiles key is tied to Theme Options' 600. Zeroed in the phone
   block. */
.w-post-elm.post_content.gi-post-content {
    padding-left: 3rem;
}

/* Media Queries*/

@media (min-width: 1280px) {

    .w-grid.ab-videos-grid .usg_vwrapper_1 {
        padding-right: 3rem;
    }

    .therapist-main-section .post_image,
    .therapist-main-section .psy-today-logo {
        transform: translateY(-3rem);
    }

    .single-therapist-img-vwrapper {
        margin-bottom: -3rem;
    }

    .w-vwrapper.row-direction-hwrapper>.w-text .w-text-value {
        max-width: 70%;
        display: block;
        text-wrap: balance;
    }

    /* Page title (hero, block 9484). Unconstrained, a long title stretches
       across the whole photo. The cap sits on the title wrapper, at half the
       card - the measure the Home hero gives its H1 (title column 628 wide at
       1440, this one 618). Short titles stay on one line (Ruttl 2026-10-02,
       "naslov u jednom redu" on 9 pages; the longest flagged, Grief & Loss
       Counseling, is 474 at 1440 and 448 at 1280).
       The old cap was max-width: 80% on the h1. It resolved against this
       shrink-to-fit wrapper, i.e. against the title's own width, so every
       title wrapped (Individual Counseling 442 -> 354, two lines).
       `pretty`, not `balance`: a long title runs 2-3 lines, where `balance`
       can leave a lone word on the last line. */
    .w-vwrapper.image-title-vwrapper > .w-hwrapper.title-subtitle-hwrapper {
        max-width: 50%;
    }

    .page-title-section .post_title {
        text-wrap: pretty;
    }

    /* Home hero lede: Figma 281:1884 draws it 70px narrower than the video
       card under it (523 against 593), left edges aligned. The aside column
       sizes its track to the card, so the margin is what takes the 70 off.
       From 1280 up only; below that the lede keeps the card's width. */
    .wpb_column.home-hero-aside-column .wpb_text_column.home-hero-lede {
        margin-inline-end: 70px;
    }
}

@media (min-width: 1025px) {

    /* Separator `huge` on desktop tracks the section ladder (`large`, 6.6rem)
       instead of Impreza's 6rem. Desktop only since 2026-10-03: below 1025
       Impreza's own fluid ladder takes over (1rem + 7.5vw, 44.5 at 393), which
       is what the phone frame draws (40) and what the sep-step-* classes in the
       max-width: 1024px block step along. */
    .w-separator.size_huge:empty {
        height: var(--section-pad-large);
    }

    /* Office Hours rides on the hero, bottom right, opposite the H1 - Figma
       1072:908 sits 36px inside the hero's right edge and 34px above its
       bottom. The hero is NOT in page content: it comes from the global Page
       Title Block via the page template, so the card is lifted out of the flow
       from the section below instead, which is flush with the hero's bottom.

       Impreza positions .l-section-h, .wpb_column AND .vc_column-inner, so
       without neutralising all three the card anchors to the content column
       and its right edge tracks the content width rather than the hero's.
       Scoped to this section: nothing else here is absolutely positioned.

       translateY(-100%) rather than a negative top in px, so the lift is the
       card's own height and stays correct whatever the opening hours say.

       Below the stacking width none of this applies and the card stays in
       the flow of the office column, above the Call/Text buttons (moved there
       in the builder, Nemanja 2026-10-04). That puts it inside the inner row,
       whose column and column inner Impreza positions as well - neutralised
       below with the outer ones. */
    /* `z-index: 2` is REQUIRED — do not touch it. The hero image in the section
       above is `position: absolute; z-index: 1` in the root context; without
       this the Office Hours card ends up BELOW it. MEASURED 2026-09-24: moving
       the layer from the section to the card was tried — it does not work,
       because `isolation: isolate` (which comes with the shape classes) traps
       the card's z-index inside the section.
       Consequence worth knowing: everything in this section sits above the
       sections BELOW it. That is why a decorative shape must NOT hang from here
       — see `shape-orange-r-up` on the services section. */
    .l-section.location-intro-section {
        position: relative;
        z-index: 2;
    }

    .l-section.location-intro-section > .l-section-h,
    .location-intro-section > .l-section-h > .g-cols > .wpb_column,
    .location-intro-section > .l-section-h > .g-cols > .wpb_column > .vc_column-inner,
    .location-intro-section .g-cols.wpb_row > .wpb_column,
    .location-intro-section .g-cols.wpb_row > .wpb_column > .vc_column-inner {
        position: static;
    }

    .l-body .w-vwrapper.office-hours-vwrapper {
        position: absolute;
        right: calc(var(--padding-inline) + 36px);
        top: -34px;
        transform: translateY(-100%);
        width: 285px;
        margin: 0;
    }

    /* Home hero, two columns (Figma 281:1884). Both columns sit on the row's
       bottom edge (content_placement="bottom"), and the design lines the
       button's top up with the video card's top, so the title column is
       lifted by card height minus button height minus the button wrapper's
       own bottom margin: 96 - 47 - 4.5, measured 2026-10-03. */
    .g-cols.via_flex.type_default.home-hero-inner-row > .wpb_column.home-hero-title-column > .vc_column-inner {
        padding-bottom: 44px;
    }

    /* Right column: lede and card flush right, the lede wrapping to the
       card's width. contain: inline-size takes the lede out of the track
       sizing, so the card alone sets the column. */
    .wpb_column.home-hero-aside-column > .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: minmax(0, max-content);
        justify-content: end;
    }

    .wpb_column.home-hero-aside-column .wpb_text_column.home-hero-lede {
        contain: inline-size;
    }

    .ab-large-blog-grid .post_title {
        font-size: 28px;
        line-height: 1.42;
    }

    .qmn_radio_answers.qmn_radio_horizontal_answers {
        display: flex;
        gap: 2rem;
    }
}

/* Groups & Intensives: the record's content renders inside the 3/4 column of
   template 10345, so no row inside it can reach the page edges. Impreza has a
   parameter for exactly this - us_post_content force_fullwidth_rows="1" - and it
   is already set on the element, but it is INERT on this site: measured
   2026-09-25, it emits no class and no inline style, not even with the post
   content moved into a full-width column of its own.

   Left edge of a section = (100vw - container) / 2 + a quarter of the container
   + 10px (.vc_column-inner padding) + 45px (post content padding-left).
   Expressed through the section's own width the container cancels out, which is
   why this holds at every width without naming one.

   Bound at 768px because that is this site's Columns Stacking Width (768
   since 2026-10-03): below it
   .g-cols.stacking_default.via_flex > div goes to 100% and there is no sidebar
   left to offset against. Impreza's own sm ladder starts at 601px - that is a
   different number and the wrong one to bind to here.

   TIED TO THE TEMPLATE: the quarter-three-quarters split and both paddings are
   baked into the figures. If template 10345 is ever rebuilt as a single
   full-width column, this becomes margin-left: calc(50% - 50vw) and stops
   depending on the grid at all.

   ONLY faq-section BREAKS OUT, because it is the only one of the seven with a
   background: measured 2026-09-25, the two service-quiz-video-section rows and
   service-recent-posts-section are all rgba(0,0,0,0). Bleeding a transparent
   section gains nothing and costs alignment - their content moved to 363..1543
   while the body copy stayed at 708..1543, so they read as wider than the text.
   In the column they line up with it for free.

   faq-section keeps the bleed because it carries the colour AND two decorative
   SVGs, green-band-left at 751px (bottom left) and green-band-right at 583px
   (top right). That is 1334px of artwork: in the 835px column the two overlap
   and clip. Its inner content stays capped at
   --site-content-width and centred on the page, which is the same treatment the
   service pages give this row.

   A new banded section has to be added to this selector by hand - that is the
   reminder that bleeding one is a layout decision, not a default. */
@media (min-width: 768px) {

    .single-ab_group_intensive .w-post-elm.post_content > .l-section.faq-section {
        width: 100vw;
        margin-left: calc((100% + 65px) / 3 - 50vw - 55px);
        margin-right: 0;
    }

    /* Impreza adds .width_full to rows rendered inside us_post_content and drops
       the content cap with it, at !important - so restoring the cap needs one
       too. Without this the band spans the page but its heading starts at x 0.

       The band's content is aligned to the TEXT COLUMN rather than centred on
       the page. Centred, it started at 363 while the body copy started at 708
       and it read as wider than the page - and it ran under the sticky info
       box, which lives at 363..643.

       --gi-cg models the grid container: capped at --site-content-width plus the
       20px the row's negative gutter margins add back, and viewport-width below
       that. These rows carry no Row Horizontal Indent (measured 0), so the model
       is exact at every width and needs no breakpoint of its own. From it:
         left  = 50vw - a quarter of the container + 10px gutter + 45px padding
         width = three quarters of the container - those same 55px - 10px
       Checked at 1920 (inner 708..1543) and computed at 1000 (305..990); both
       land on the text column exactly. */
    .single-ab_group_intensive .w-post-elm.post_content > .l-section.faq-section > .l-section-h {
        --gi-cg: min(calc(var(--site-content-width, 1180px) + 20px), 100vw);
        max-width: calc(var(--gi-cg) * 0.75 - 65px) !important;
        margin-left: calc(50vw - var(--gi-cg) / 4 + 55px);
        margin-right: 0;
    }

}

/* The same band on phones (Marija, Ruttl 2026-10-04, iPhone, Marriage
   Intensives "and the next G&I page: the section does not reach the edge").
   Below 768 there is no sidebar to offset against, so the band simply bleeds
   from its 342 column to the viewport (50% of the column minus 50vw, -24 at
   390), and takes back the 24 phone indent as its own padding - Impreza's
   .l-section.width_full sets --padding-inline to 0 on it, so the variable
   cannot carry it. The accordion stays on the body copy's 24..366. */
@media (max-width: 767px) {
    .single-ab_group_intensive .w-post-elm.post_content > .l-section.faq-section {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: 0;
        padding-inline: 24px;
    }
}

/* Header shadow on laptops, tablets and phones only while the header is
   sticky (tablets and phones agreed 2026-10-03, laptops 2026-10-04; the
   desktop state, 1280 and up, has shadow none in the header itself). Those
   three states keep shadow "thin" -
   the builder has no sticky-only option - and this takes it off while the
   header sits at the top of the page. Impreza's rule is
   .l-header.shadow_thin .l-subheader.at_middle (0-4-0); :not(.sticky)
   makes this 0-5-0. The subheader's own box-shadow transition fades it in.
   1279 is Theme Options' laptops edge, the header's own tier. */
@media (max-width: 1279px) {
    .l-header.shadow_thin:not(.sticky) .l-subheader.at_middle,
    .l-header.shadow_thin:not(.sticky) .l-subheader.at_bottom {
        box-shadow: none;
    }
}

@media (max-width: 1024px) {

    /* Location Office Hours card below 1025 (Marija, Ruttl 2026-10-04,
       [SVE] on phone and tablet): white, alt-bg-box's own ground, instead of
       the page colour. Off the photo the cream card on the cream page did not
       read as a card; on desktop it sits on the hero photo and keeps the
       Figma ground (see the base rule). */
    .l-body .w-vwrapper.office-hours-vwrapper {
        background: var(--color-content-bg-alt);
    }

    /* Home "Recent Blog Posts" cards below 1025 (Marija, Ruttl 2026-10-04,
       iPad, [SVE] [TIP: blog posts spacing], "half"): 24 -> 12. Home's list
       is the only blog list with items_gap 12px; every other one (Blog page,
       posts, service pages) has 6px, i.e. 12 apart, so half here is the same
       12 as everywhere else. The gap is 2 x the inline --gap, hence
       var(--gap). Phones too, where Home had the same 24. */
    .l-section.home-recent-posts-section .w-grid.ab-small-blog-grid .w-grid-list {
        row-gap: var(--gap);
    }

    /* Large blog card title below 1025 (Marija, Ruttl 2026-10-04, iPhone,
       [SVE] [TIP: blog post with text], "needs a bigger title"): it fell back
       to h3 (18, then 20 after the h3 change) while the small cards' h4 is
       20, so the card with the excerpt had the smaller title. 1.6rem (24) is
       h3's desktop cap; desktop keeps its 28 (rule in the 1025 block). */
    .l-body .w-grid.ab-large-blog-grid .post_title {
        font-size: 1.6rem;
        line-height: var(--h2-line-height);
    }

    /* Separator step modifiers, tablets and phones only. Put `sep-step-up` or
       `sep-step-down` in a separator's Extra class to move it ONE step along
       Impreza's own ladder below 1025 (us-core 9.3.1, style.min.css):
         small 1rem · medium 1rem + 2.5vw · large 1rem + 5vw · huge 1rem + 7.5vw
       plus one step past each end (0.5rem, 1rem + 10vw). Relative to the size
       set in the builder, so "up" and "down" always mean the same thing; the
       desktop size is untouched. Spacers only - :empty leaves out separators
       with a visible line, and `custom` has its own responsive heights in the
       builder. Restate these values if Impreza's ladder ever changes. */
    .w-separator.size_small.sep-step-down:empty {
        height: 0.5rem;
    }

    .w-separator.size_medium.sep-step-down:empty {
        height: 1rem;
    }

    .w-separator.size_small.sep-step-up:empty,
    .w-separator.size_large.sep-step-down:empty {
        height: calc(1rem + 2.5vw);
    }

    .w-separator.size_medium.sep-step-up:empty,
    .w-separator.size_huge.sep-step-down:empty {
        height: calc(1rem + 5vw);
    }

    .w-separator.size_large.sep-step-up:empty {
        height: calc(1rem + 7.5vw);
    }

    .w-separator.size_huge.sep-step-up:empty {
        height: calc(1rem + 10vw);
    }

    /* Home hero, stacked: both columns pack at the bottom of the card, with
       30 between the button and the lede (Figma 368:174). The button
       wrapper's own 4.5px bottom margin would add to that, so it goes. */
    .g-cols.via_flex.type_default.home-hero-inner-row {
        align-content: flex-end;
    }

    .g-cols.via_flex.type_default.home-hero-inner-row > .wpb_column.home-hero-title-column {
        margin-bottom: var(--space-md);
    }

    .l-section.home-slide-section .title-subtitle-hwrapper > .w-btn-wrapper {
        margin-bottom: 0;
    }

    /* Both heroes at 1024 and below: 16 from the screen edge on every side,
       the header's bottom edge counting as the top edge. Agreed 2026-10-03.
       Home: the card is the section itself, so margins - the base rule's
       margin-top: var(--header-height) is what clears the fixed header.
       Subpage (Page Title Block 9484): the card is the vwrapper inside the
       section, so the section indent becomes 16 and the card steps 16 down
       from the header offset Impreza puts on .l-section-h. The indent rule
       is 0-3-0 so the 601-767 row-indent restatement below cannot take it
       back. */
    .l-body .l-section.home-slide-section {
        margin-inline: 16px;
        margin-top: calc(var(--header-height) + 16px);
    }

    .l-body .l-section.page-title-section {
        --padding-inline: 16px;
    }

    .l-section.page-title-section .w-vwrapper.image-title-vwrapper {
        margin-top: 16px;
    }

    /* No hairline under the header content on tablets and phones, at rest
       or sticky - the sticky header has Impreza's thin shadow instead.
       1024 is the header's own tablet edge, not the 767 phone edge.
       Agreed 2026-10-03. */
    .l-subheader.at_middle .l-subheader-h {
        box-shadow: none;
    }

    /* h1-style on tablets and phones takes the h2 size (28/36) instead of
       h1's 38. Every h1-style in the content is either a long statement
       (.statement-wrapper, up to 301 characters - 743 tall at 393 in h1),
       the page quote (.page-quote-section) or a section title ("What Our
       Clients Say", "Recent Blog Posts"); inventoried over 61 pages
       2026-10-03. The page's own H1 is an h1 tag, not this class, and keeps
       38. .l-main makes this 0-2-0 so it also beats the statement's own
       line-height rule. Agreed 2026-10-03. */
    .l-main .h1-style {
        font-size: var(--h2-font-size);
        line-height: var(--h2-line-height);
        letter-spacing: var(--h2-letter-spacing);
    }

    /* Tablets only: section titles ("What Our Clients Say", "Recent Blog
       Posts") step up to 32 so they read as titles next to 28 statements.
       Statements and the page quote keep the 28 above. Ruttl ayeA, agreed
       2026-10-05. MEASURED at 820: 28/36 -> 32/37, one line. */
    @media (min-width: 768px) {
        .l-main .h1-style:not(.statement-wrapper .h1-style):not(.page-quote-section .h1-style) {
            font-size: 32px;
            line-height: var(--h1-line-height);
        }
    }

    /* FAQ band, tablets and phones: the call / appointment pair goes BELOW the
       accordion (agreed 2026-10-03). Every FAQ band on the site (28 pages + the
       Groups & Intensives template) is the same inner row - left column a
       vwrapper with heading, text and .btn-pair-hwrapper, right column the
       accordion - and stacks below 1025, which put the buttons first.
       The left column, its inner, its wrapper and the vwrapper become
       display: contents, so heading, text and buttons are flex items of the
       inner row next to the accordion column, and order does the rest:
       heading, text, accordion, buttons. The vwrapper's gap margins still
       apply (selectors match the DOM); the column's half-gutter padding is
       restated on the items. Accordion column margins are zeroed so the
       spacing is set here: text to accordion stays the text's own 26, the
       buttons sit 30 under the accordion. No content change - if a FAQ band
       is ever built differently, :has() simply stops matching it.
       The service pages' alt band (.service-alt-content-bg-section, 21 pages)
       is the same inner row - left vwrapper with heading, text and the
       Call / Text pair (block 9513), right column of copy - so it takes the
       same move: heading, text, right column, buttons 30 under it (Nemanja
       2026-10-04). Home's alt band (.home-goals-section) is left out: it
       stacks at 767, not 1024, and its phone frame keeps the buttons under
       the text. */
    .l-section.faq-section .g-cols .g-cols > .wpb_column:has(.btn-pair-hwrapper),
    .l-section.faq-section .g-cols .g-cols > .wpb_column:has(.btn-pair-hwrapper) > .vc_column-inner,
    .l-section.faq-section .g-cols .g-cols > .wpb_column:has(.btn-pair-hwrapper) > .vc_column-inner > .wpb_wrapper,
    .l-section.faq-section .g-cols .g-cols > .wpb_column:has(.btn-pair-hwrapper) > .vc_column-inner > .wpb_wrapper > .w-vwrapper,
    .l-section.service-alt-content-bg-section:not(.home-goals-section) .g-cols .g-cols > .wpb_column:has(.btn-pair-hwrapper),
    .l-section.service-alt-content-bg-section:not(.home-goals-section) .g-cols .g-cols > .wpb_column:has(.btn-pair-hwrapper) > .vc_column-inner,
    .l-section.service-alt-content-bg-section:not(.home-goals-section) .g-cols .g-cols > .wpb_column:has(.btn-pair-hwrapper) > .vc_column-inner > .wpb_wrapper,
    .l-section.service-alt-content-bg-section:not(.home-goals-section) .g-cols .g-cols > .wpb_column:has(.btn-pair-hwrapper) > .vc_column-inner > .wpb_wrapper > .w-vwrapper {
        display: contents;
    }

    .l-section.faq-section .g-cols .g-cols > .wpb_column:has(.btn-pair-hwrapper) > .vc_column-inner > .wpb_wrapper > .w-vwrapper > *,
    .l-section.service-alt-content-bg-section:not(.home-goals-section) .g-cols .g-cols > .wpb_column:has(.btn-pair-hwrapper) > .vc_column-inner > .wpb_wrapper > .w-vwrapper > * {
        flex: 0 0 100%;
        box-sizing: border-box;
        padding-inline: calc(var(--grid-gutter) / 2);
    }

    .l-section.faq-section .g-cols .g-cols > .wpb_column:has(.w-tabs),
    .l-section.service-alt-content-bg-section:not(.home-goals-section) .g-cols .g-cols > .wpb_column:not(:has(.btn-pair-hwrapper)) {
        order: 1;
        margin-block: 0;
    }

    .l-section.faq-section .g-cols .g-cols .w-hwrapper.btn-pair-hwrapper,
    .l-section.service-alt-content-bg-section:not(.home-goals-section) .g-cols .g-cols .w-hwrapper.btn-pair-hwrapper {
        order: 2;
        margin-top: 30px;
    }

    /* Home "Recent Blog Posts" row, tablets and phones: the Subscribe box goes
       LAST, under the post list - same technique as the FAQ band above
       (agreed 2026-10-03). The left column (eyebrow + title, a large
       separator, the Subscribe box) dissolves into the inner row, the post
       list column takes order 1 and the box order 2, 30 under the list. The
       box has a background, so its half-gutter inset is a margin, not
       padding. */
    .l-section.home-recent-posts-section .g-cols .g-cols > .wpb_column:has(.mailchimp-box),
    .l-section.home-recent-posts-section .g-cols .g-cols > .wpb_column:has(.mailchimp-box) > .vc_column-inner,
    .l-section.home-recent-posts-section .g-cols .g-cols > .wpb_column:has(.mailchimp-box) > .vc_column-inner > .wpb_wrapper {
        display: contents;
    }

    .l-section.home-recent-posts-section .g-cols .g-cols > .wpb_column:has(.mailchimp-box) > .vc_column-inner > .wpb_wrapper > * {
        flex: 0 0 calc(100% - var(--grid-gutter));
        box-sizing: border-box;
        margin-inline: calc(var(--grid-gutter) / 2);
    }

    .l-section.home-recent-posts-section .g-cols .g-cols > .wpb_column:has(.w-grid) {
        order: 1;
        margin-block: 0;
    }

    .l-section.home-recent-posts-section .w-vwrapper.mailchimp-box {
        order: 2;
        margin-top: 30px;
    }

    /* Home "Our Goals" band, videos column: See All Videos goes under the
       three videos on tablets and phones (Nemanja 2026-10-04). The YouTube
       header and the button share one us_hwrapper; display: contents lifts
       both into the column wrapper, which becomes a flex column, so order
       can put the button last. The header's own margins (the stack gap on
       phones, the row gap on tablets) are dropped so the builder's 2rem
       separator alone sets header to videos; the button sits 30 under the
       last video, as the FAQ and Subscribe moves do. */
    .l-section.home-goals-section .wpb_column.home-videos-column > .vc_column-inner > .wpb_wrapper {
        display: flex;
        flex-direction: column;
    }

    .l-section.home-goals-section .wpb_column.home-videos-column > .vc_column-inner > .wpb_wrapper > .w-hwrapper {
        display: contents;
    }

    .l-section.home-goals-section .wpb_column.home-videos-column .w-text.latest-from-youtube {
        margin: 0;
    }

    .l-section.home-goals-section .wpb_column.home-videos-column .w-btn-wrapper {
        order: 1;
        margin-top: 30px;
    }
}

/* Tablets with columns side by side (768-1024): these card rows run two up,
   whatever the count - Home "Compassionate Care for Every Chapter" and the
   service pages' "Our Therapeutic Approaches". ab-base's flex-row-3 basis
   reads --gap, so the two-up basis does too. Agreed 2026-10-03. */
@media (min-width: 768px) and (max-width: 1024px) {

    .w-hwrapper.services-hwrapper > *,
    .w-hwrapper.service-approaches-hwrapper > * {
        flex-basis: calc((100% - var(--gap)) / 2);
    }

    /* Call / Text pair one under the other on tablets as well, full column
       width and 12 apart, as on phones:
       - Home "Our Goals" band (Nemanja 2026-10-04): the column still sits
         beside the videos;
       - location details (Marija, Ruttl 2026-10-04, iPad: "text in one line"):
         the office column is 372 wide at 820, the two buttons got 172 and 167
         and both labels broke onto 2 lines (65 tall).
       Phones get it from stack_on_mobiles; here it is restated for these two
       places only. Impreza makes a .w-btn-wrapper inside an hwrapper
       inline-block, hence the display. */
    .l-section.home-goals-section .w-hwrapper.btn-pair-hwrapper,
    .w-vwrapper.location-details-vwrapper .w-hwrapper.btn-pair-hwrapper {
        display: block;
    }

    .l-section.home-goals-section .w-hwrapper.btn-pair-hwrapper > .w-btn-wrapper,
    .w-vwrapper.location-details-vwrapper .w-hwrapper.btn-pair-hwrapper > .w-btn-wrapper {
        display: block;
        margin: 0 0 var(--hwrapper-gap, 12px);
    }

    .l-section.home-goals-section .w-hwrapper.btn-pair-hwrapper > .w-btn-wrapper:last-child,
    .w-vwrapper.location-details-vwrapper .w-hwrapper.btn-pair-hwrapper > .w-btn-wrapper:last-child {
        margin-bottom: 0;
    }

    .l-section.home-goals-section .w-hwrapper.btn-pair-hwrapper .w-btn,
    .w-vwrapper.location-details-vwrapper .w-hwrapper.btn-pair-hwrapper .w-btn {
        width: 100%;
    }

    /* Employment on tablets (Marija, Ruttl 2026-10-04, iPad): every stacked
       joint takes the section's inline padding (41 at 820), the gap she
       compared each one with:
       - intro text -> white card, "like left and right of the white card":
         92 -> 41;
       - gallery -> orange box, "like left and right of the orange box":
         135 -> 41;
       - orange box -> application text, "like left and right of the image":
         107 -> 41;
       - orange box -> orange box: half, 30 -> 15;
       - last text -> "Our Mission" box: half, 135 -> 60.
       Columns stacked at this width get Impreza's 1rem top and bottom
       margins (.g-cols.via_flex.type_default > div[class*="vc_col-md-"],
       0-3-1), zeroed here at 0-3-1 + body. The empty separators between the
       rows take the inline padding instead of their own (1rem + 7.5vw). */
    .l-body .l-section.employment-intro-section .g-cols > .wpb_column,
    .l-body .l-section.employment-role-section .g-cols > .wpb_column {
        margin-top: 0;
        margin-bottom: 0;
    }

    .l-section.employment-intro-section .wpb_wrapper > .g-cols + .w-separator:empty,
    .l-section.employment-role-section .wpb_wrapper > .g-cols + .w-separator:empty {
        height: var(--padding-inline);
    }

    .l-body .l-section.employment-intro-section {
        padding-bottom: 0;
    }

    .l-body .l-section.employment-role-section {
        padding-top: var(--padding-inline);
        padding-bottom: 0;
    }

    .l-section.employment-role-section .wpb_wrapper > .g-cols:first-child {
        row-gap: 1rem;
    }

    /* Home "Recent Blog Posts" heading -> cards on tablets (Marija, Ruttl
       2026-10-04, iPad, "half"): the large separator, 56 at 820, halved. */
    .l-section.home-recent-posts-section .w-separator.size_large:empty {
        height: calc((1rem + 5vw) / 2);
    }
}

/* Phones, 601-767: Impreza's and ab-base's own phone rules, restated.
   This site's phone range ends at 767, agreed 2026-10-03, and Theme Options
   -> Columns Stacking Width is 768 so Impreza's columns stack at the same
   767. Theme Options -> Mobiles stays
   600 because the header's mobiles state has to keep switching there, and
   everything Impreza and ab-base do "on mobiles" is keyed to that 600; left
   alone, 601-767 would get the TABLET treatment under our phone block.

   Copied from us-core 9.3.1 and ab-base with values unchanged, and only
   what the site uses (inventoried over 62 pages, 2026-10-03):
     Theme Options, inline: Row Horizontal Indent mobiles 24, stack_on_mobiles
     style.min.css: paragraph spacing, toplink, aligncenter, stretched
       column, popups and the lightbox, grid and metro_3 galleries
     ab-base.css: flex-row-N to one column, p-2xl / p-3xl / py-2xl / py-3xl
   Deliberately NOT copied: Impreza's phone heading padding (ab-base zeroes
   heading padding at every width, so at 600 and below it is dead too), the
   section height_small / height_medium padding (ab-base's ladder wins), and
   every header rule. Element params with their own width were moved to the 767 edge
   in the builder instead: us_post_list / us_grid breakpoint_3_width,
   us_list_filter mobile_width.

   Placed before the phone block so the project's phone rules win, as they do
   over Impreza at 600 and below. .l-section:not(.width_full) is 0-2-0 so it
   beats Theme Options' inline .l-section (0-1-0, printed after this file)
   without overriding Impreza's .l-section.width_full { --padding-inline: 0 }. */
@media (min-width: 601px) and (max-width: 767px) {

    .l-section:not(.width_full) {
        --padding-inline: 24px;
    }

    .w-hwrapper.stack_on_mobiles {
        display: block;
    }

    .w-hwrapper.stack_on_mobiles > :not(script) {
        display: block;
        margin: 0 0 var(--hwrapper-gap, 1.2rem);
    }

    .w-hwrapper.stack_on_mobiles > :last-child {
        margin-bottom: 0;
    }

    p {
        margin-bottom: 1rem;
    }

    .w-toplink {
        margin: 10px !important;
    }

    .l-main .aligncenter {
        max-width: 100% !important;
    }

    .g-cols.via_flex.type_default > .wpb_column.stretched {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .w-popup-wrap.layout_default {
        padding: 0;
    }

    .w-popup-wrap[style*="--popup-padding"] .w-popup-box-content {
        padding: 50px 1.5rem;
    }

    .w-popup-box-title {
        padding-right: 50px !important;
    }

    button.w-popup-closer {
        line-height: 50px;
        height: 50px;
        width: 50px;
    }

    .l-popup-box {
        padding: 1.5rem;
    }

    .l-popup-closer {
        background: rgba(0, 0, 0, 0.5);
        opacity: 1;
    }

    .l-popup-box-content {
        max-width: none !important;
    }

    .l-popup-arrow {
        display: none !important;
    }

    .w-gallery.type_grid:not([style*="--columns:1;"]) .w-gallery-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .w-gallery.type_grid.quantity_layout_based .w-gallery-item:nth-child(n+3) {
        display: none;
    }

    .w-gallery.type_metro_3 .w-gallery-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .w-gallery.type_metro_3 .w-gallery-item:nth-child(5n+1) {
        grid-area: span 2 / span 2;
    }

    .flex-row-2 > *,
    .flex-row-3 > *,
    .flex-row-4 > *,
    .flex-row-5 > *,
    .flex-row-6 > * {
        flex-basis: 100%;
    }

    .p-2xl {
        padding: var(--space-lg);
    }

    .p-3xl {
        padding: var(--space-xl);
    }

    .py-2xl {
        padding-block: var(--space-lg);
    }

    .py-3xl {
        padding-block: var(--space-xl);
    }
}

/* Phones: 767 and below - the Columns Stacking Width, not Theme Options' 600
   (see the block above). Header rules never go in here: the header keeps
   600 / 601-1024. */
@media (max-width: 767px) {

    /* Section ladder on phones: `huge` takes the `large` value (6.6rem, 99px
       at the 15px root). TEMPORARY, agreed 2026-10-03 - revisit when the
       designer's Ruttl revisions are worked. The phone frame draws 81-99. */
    :root {
        --section-pad-huge: var(--section-pad-large);
    }

    /* Services family on phones (Marija, Ruttl 2026-10-04, [SVE] [TIP:
       services pages], specialty and methods pages included). Her numbers
       are relative and all land near 66:
       - quote band above and below, and the gap above Benefits: one third
         less, 99 -> 66;
       - end of the top text -> quiz/video band: one third less, 120 -> 80
         (40 + 40), only where the two bands meet (the specialty pages; on
         the three parent pages another band sits above the quizzes);
       - Benefits -> the next block (the separator right after the Benefits
         row): half more, 44 -> 66 at 390 (huge is 1rem + 7.5vw here).
       Home shares the Benefits band but was not flagged, so it is left out. */
    .l-body .l-section.page-quote-section {
        padding-top: calc(var(--section-pad-large) * 2 / 3);
        padding-bottom: calc(var(--section-pad-large) * 2 / 3);
    }

    .l-body:not(.home) .l-section.service-benefits-approaches-section {
        padding-top: calc(var(--section-pad-huge) * 2 / 3);
    }

    .l-body .l-section.service-top-section:has(+ .l-section.service-quiz-video-section) {
        padding-bottom: calc(var(--section-pad-medium) * 2 / 3);
    }

    .l-body .l-section.service-top-section + .l-section.service-quiz-video-section {
        padding-top: calc(var(--section-pad-medium) * 2 / 3);
    }

    .l-body .l-section.service-benefits-approaches-section .wpb_wrapper > .g-cols:first-child + .w-separator:empty {
        height: calc((1rem + 7.5vw) * 1.5);
    }

    /* Location pages on phones (Marija, Ruttl 2026-10-04, [SVE] [TIP:
       location pages]). The joints were 99 + 99, 99 + 60 and 60 + 99 (large,
       since huge = large here); her ratios are applied to both sides of each
       joint, so they no longer depend on the row heights:
       - intro text -> "what we offer": half, 196 -> 97;
       - blue CTA box -> therapists: half, 159 -> 80;
       - therapists button -> the white card below: one third less, 159 -> 106;
       - above and below the contact form: the same as its sides, i.e. the
         section's own inline padding (24). */
    .l-body .l-section.location-intro-section {
        padding-bottom: calc(var(--section-pad-large) / 2);
    }

    .l-body .l-section.location-services-section {
        padding-top: calc(var(--section-pad-large) / 2);
        padding-bottom: calc(var(--section-pad-large) / 2);
    }

    .l-body .l-section.location-services-section + .l-section.therapists-grid-main-section {
        padding-top: calc(var(--section-pad-medium) / 2);
        padding-bottom: calc(var(--section-pad-medium) * 2 / 3);
    }

    .l-body .l-section.location-start-section {
        padding-top: calc(var(--section-pad-large) * 2 / 3);
    }

    .l-body .l-section.location-form-section {
        padding-top: var(--padding-inline);
        padding-bottom: var(--padding-inline);
    }

    /* Employment on phones (Marija, Ruttl 2026-10-04, iPhone): gallery ->
       orange box half, 120 -> 60, split over both sides of the joint. */
    .l-body .l-section.employment-intro-section {
        padding-bottom: calc(var(--section-pad-medium) / 2);
    }

    .l-body .l-section.employment-role-section {
        padding-top: calc(var(--section-pad-medium) / 2);
    }

    /* Subpage hero (Page Title Block 9484) on phones: 4/5 instead of 12/5.
       At 12/5 the card was 345x144 while a long title needed 222, so the
       photo stopped short and the last lines sat on the page background.
       The photo follows the card (width/height 100% in the base rule - its
       own css= ratio is NOT inert, see there). 601-1024 takes 16/9 in a
       block after this one. Insets 24 like the Home hero. Agreed
       2026-10-03. */
    .w-vwrapper.image-title-vwrapper {
        aspect-ratio: 4 / 5;
        padding-bottom: 24px;
    }

    .w-vwrapper.image-title-vwrapper > .w-hwrapper.title-subtitle-hwrapper {
        padding-inline: 24px;
    }

    /* Home hero on phones (Figma 368:174): 361/853 portrait, every inset 24;
       the 16 from the screen edge is in the max-width: 1024px block. The
       button keeps its own width - the Figma frame draws it full width, but
       not on phones or tablets (Nemanja 2026-10-04) - and sits 40 under the
       H1 (wrapper gap 10 + H1 margin + this). 361/853 is a 393-wide phone: from 601 to 767
       the card would be 1500+ tall, so that range takes 4/5 - see the block
       after this one. */
    .g-cols.via_flex.type_default.home-hero-inner-row {
        aspect-ratio: 361 / 853;
        padding: 24px;
    }

    .l-section.home-slide-section .title-subtitle-hwrapper > .w-btn-wrapper {
        margin-top: calc(40px - 10px - var(--h1-margin-bottom));
    }

    .wpb_text_column.home-hero-lede {
        font-size: var(--font-size);
        margin-bottom: var(--space-md);
    }

    .w-hwrapper.video-card {
        width: 100%;
    }

    .w-hwrapper.video-card > .w-image {
        width: 103px;
    }

    /* The pale-blue shape at the hero's lower left, Home and subpages, as the
       phone frame draws it (Figma 368:174, Vectors 22 and 6 - the same two
       blobs pale-blue-left.svg carries, so the same asset). At 1:1 rather
       than the 130 the base clamp gives here, 11 further left than on
       desktop, and the lower blob ending 72 under the hero card: that blob
       ends at 414.9 of the asset's 445, so the box starts 343 above the
       card's bottom edge. The card's bottom edge is the Home section's top
       and the Page Title section's bottom (no bottom padding there,
       measured 2026-10-04 at 393 and 700). Agreed 2026-10-04. */
    .l-section.home-below-slide-section::before,
    .l-section.page-title-section::after {
        left: -11px;
        width: 260px;
    }

    .l-section.home-below-slide-section::before {
        top: -343px;
    }

    .l-section.page-title-section::after {
        bottom: -102px;
    }

    /* Service cards on phones (Figma 368:174): 12 between cards, 60px icon.
       flex-row-3 reads --gap, not gap, so the variable is what moves. */
    .w-hwrapper.services-hwrapper {
        --gap: 12px;
    }

    .w-hwrapper.services-hwrapper .w-vwrapper.alt-bg-box .w-image .w-image-h {
        width: 60px;
    }

    /* Two buttons side by side - btn-pair-hwrapper: blocks 9513 and 9537 and
       the FAQ band on every page that has one, stack_on_mobiles in the
       builder. Both full width, 12 apart. The stacked gap is the wrapper's own
       margin-bottom; the 4.8px top margin every .w-btn-wrapper carries would
       add to it. align-self on the pair itself stretches it where the column
       centres its children (block 9537). */
    .w-hwrapper.btn-pair-hwrapper {
        align-self: stretch;
    }

    .w-hwrapper.btn-pair-hwrapper > .w-btn-wrapper {
        align-self: stretch;
        margin-top: 0;
    }

    .w-hwrapper.btn-pair-hwrapper .w-btn {
        width: 100%;
    }

    /* Intro box on the parent service pages (23, 35, 45, 4573). The box row is
       stack_on_mobiles in the builder; its Call / Text pair sits straight in
       the row-direction vwrapper, so the pair treatment is restated here: one
       per line, full width, 12 apart. */
    .w-vwrapper.row-direction-hwrapper > .w-btn-wrapper {
        flex: none;
        width: 100%;
        align-self: stretch;
        margin-block: 0;
    }

    .w-vwrapper.row-direction-hwrapper > .w-btn-wrapper + .w-btn-wrapper {
        margin-top: 12px;
    }

    .w-vwrapper.row-direction-hwrapper .w-btn {
        width: 100%;
    }

    /* ab-base already drops .p-2xl to --space-lg here. These two component
       rules restate 60 at 0-2-0 and would undo it - in the intro boxes that
       left a 225 column for the text. */
    .alt-content-bg-box.p-2xl,
    .alt-content-primary-bg-box.p-2xl {
        padding: var(--space-lg);
    }

    /* Home "Our Goals" band on phones: 28 in from the edge where the other
       sections take 24 (Theme Options), as the phone frame draws it. */
    .l-section.home-goals-section {
        --padding-inline: 28px;
    }

    /* The videos column, once stacked under the text: a 1px rule 40 below the
       Call / Text buttons and 29 above the YouTube header. The column above
       already ends with Impreza's 1.5rem stacking margin, hence the calc. */
    .l-section.home-goals-section .wpb_column.home-videos-column > .vc_column-inner > .wpb_wrapper {
        margin-top: calc(40px - 1.5rem);
        padding-top: 28px;
        border-top: 1px solid var(--color-light-primary);
    }

    /* Video list (Grid Layout 9818) on phones: picture on top at full width,
       title under it, 12 apart. The layout is read-only from here, so this is
       CSS; the builder's inline rules only set ratio, radius and type, none of
       which this touches. */
    .w-grid.ab-videos-grid .w-grid-item-h > .w-hwrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .w-grid.ab-videos-grid .w-grid-item-h > .w-hwrapper > .w-video {
        flex: none;
        width: 100%;
        margin-inline-end: 0;
        margin-bottom: 12px;
    }

    /* Title -> next video as far as the last title -> "See All Videos"
       (Marija, Ruttl 2026-10-04, iPhone, [SVE]): 12 -> 30. The grid gap is
       2 x the inline --gap (items_gap 6px), so row-gap, no !important. */
    .l-body .w-grid.ab-videos-grid .w-grid-list {
        row-gap: 30px;
    }

    /* Blog post on phones (Marija, Ruttl 2026-10-04, iPhone, [SVE] [TIP: blog
       single], "half more above a new heading"): 15 -> 22.5. The 15 is the
       paragraph's margin-bottom; the heading's margin-top collapses with it,
       so it carries the whole 22.5. */
    .l-body.single-post .w-post-elm.post_content > :is(h2, h3, h4):not(:first-child) {
        margin-top: 1.5rem;
    }

    /* Image-left cards on phones: Groups & Intensives (layout 10580) and the
       large blog grid. Side by side the image was squeezed to 126x604 and the
       text ran off the screen; stacked, the image takes the card width at its
       own 3/2 and the text follows 20 under it. */
    .w-grid.ab-large-blog-grid .w-hwrapper.usg_hwrapper_1,
    .w-grid.ab-gi-grid .w-hwrapper.usg_hwrapper_1 {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .w-grid.ab-large-blog-grid .has_aspect_ratio,
    .w-grid.ab-gi-grid .has_aspect_ratio {
        flex: none;
        width: 100%;
    }

    /* Quiz cards (layout 10137), on every service page and on /quizzes/: the
       text column was 135-160 wide. Image on top, keeping the desktop's portrait
       17/22 (agreed 2026-10-03; 321x415 at 393). */
    .quizzes-grid .quiz-box-hwrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .quizzes-grid .quiz-box-hwrapper .post_image {
        flex: none;
        width: 100%;
    }

    .quizzes-grid .quiz-box-hwrapper .post_image img {
        width: 100%;
    }

    /* The same card built by hand in the page (.quiz-box on 9984, 9989 and
       9991), and the free report box (.free-report-box in blocks 10244,
       10252, 10285 and 10310: report cover beside a Mailchimp form). Both are
       stack_on_mobiles in the builder, so they stack below 768 - Impreza up
       to 600, the 601-767 restatement above for the rest. Stacked, Impreza
       makes the box display: block, so the flex gap is gone and the image
       carries the 20. */
    .quiz-box.w-hwrapper .w-image,
    .free-report-box.w-hwrapper .w-image {
        flex: none;
        width: 100%;
        margin-bottom: var(--space-sm);
    }

    .quiz-box.w-hwrapper .w-image .w-image-h,
    .quiz-box.w-hwrapper .w-image img,
    .free-report-box.w-hwrapper .w-image .w-image-h,
    .free-report-box.w-hwrapper .w-image img {
        width: 100%;
    }

    /* Stacked, the form takes the box's full inner width: the 3% right
       padding only kept it off the image in the row. */
    .free-report-box.w-hwrapper > .w-vwrapper {
        padding-right: 0;
    }

    /* Staff member page (Therapist Page Template 9839), phone order:
       location, name, license or credentials, photo, specialties, bio, then
       the video and anything added later (Nemanja 2026-10-04). The two
       columns and their inner wrappers become display: contents, so every
       element is a flex item of the inner row and order can interleave the
       columns. With the column padding gone the row's negative gutter margin
       is zeroed, or the items would sit 10px outside the section indent.
       Rhythm: 30 under the license (the template's 2rem separator), 14
       between photo and specialties (its 14px separator), 30 above the bio -
       14 below the specialties box plus 16 on the bio, so the 4 staff pages
       without specialties (separator straight into the bio) get 30 too. */
    .g-cols.via_flex.type_default.therapist-intro-inner-row {
        margin-inline: 0;
    }

    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column,
    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column > .vc_column-inner,
    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column > .vc_column-inner > .wpb_wrapper {
        display: contents;
    }

    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column > .vc_column-inner > .wpb_wrapper > * {
        flex: 0 0 100%;
        max-width: 100%;
        order: 9;
    }

    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column > .vc_column-inner > .wpb_wrapper > .w-post-elm.post_taxonomy {
        order: 1;
    }

    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column > .vc_column-inner > .wpb_wrapper > .w-post-elm.post_title {
        order: 2;
    }

    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column > .vc_column-inner > .wpb_wrapper > .w-post-elm.post_custom_field {
        order: 3;
    }

    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column > .vc_column-inner > .wpb_wrapper > .w-post-elm.post_title ~ .w-separator {
        order: 4;
    }

    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column > .vc_column-inner > .wpb_wrapper > .w-vwrapper.single-therapist-img-vwrapper {
        order: 5;
    }

    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column > .vc_column-inner > .wpb_wrapper > .w-vwrapper.single-therapist-img-vwrapper + .w-separator {
        order: 6;
    }

    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column > .vc_column-inner > .wpb_wrapper > .w-vwrapper.single-therapist-specialties-vwrapper {
        order: 7;
        margin-bottom: 14px;
    }

    .g-cols.via_flex.type_default.therapist-intro-inner-row > .wpb_column > .vc_column-inner > .wpb_wrapper > .w-post-elm.post_content {
        order: 8;
        margin-top: calc(2rem - 14px);
    }

    /* Floated images and captions full width on phones (Nemanja 2026-10-04).
       They already stop floating here (float none, block, 0 0 22.5px measured
       at 393 and 700) but kept their natural width - 300 or 169 in a 345
       column. A caption carries its width INLINE (style="width: 300px", set by
       WordPress), hence the !important on the figure, and the img inside it
       has no align class of its own, so it is named separately. height: auto
       keeps the ratio against the width/height attrs. */
    img.alignleft,
    img.alignright,
    .wp-caption.alignleft,
    .wp-caption.alignright {
        display: block;
        width: 100% !important;
        height: auto;
    }

    .wp-caption.alignleft img,
    .wp-caption.alignright img {
        width: 100%;
        height: auto;
    }

    /* Home "Our Approach": the cross of rules between the four methods is a
       2x2 drawing. Stacked to one column its vertical half ran through the
       text, so it goes. */
    .w-hwrapper.methods-hwrapper::before,
    .w-hwrapper.methods-hwrapper::after {
        content: none;
    }

    /* Home collage: the 20px desktop inset and the reserve on the right of the
       bottom row go, so both rows run the full column. */
    .clients-collage-text-hwrapper,
    .clients-collage-bottom-hwrapper {
        margin-left: 0;
    }

    .clients-collage-bottom-hwrapper {
        margin-right: 0;
    }

    .clients-collage-text-hwrapper {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "wide wide"
            "left right"
            "text text";
    }

    .clients-collage-text-hwrapper>.img-wide {
        aspect-ratio: 16 / 9;
    }

    /* Both small photos square on phones, so the pair is one height.
       Agreed 2026-10-03. */
    .clients-collage-text-hwrapper>.img-right {
        aspect-ratio: 1 / 1;
    }

    /* Groups & Intensives single: the info column is stacked above, so the
       3rem beside it has nothing left to separate. */
    .w-post-elm.post_content.gi-post-content {
        padding-left: 0;
    }

    /* Footer videos three across on phones instead of three stacked (agreed
       2026-10-03). The list's own breakpoint_3_cols cannot do it - measured
       2026-10-03: with columns="1" a breakpoint value of 3 is not emitted at
       all, Impreza only ever lowers the count. The count is the inline
       --columns on the grid, so overriding it needs !important. Phones only:
       from 768 the videos sit in a 3/12 footer column ~200 wide. */
    .l-footer .w-grid.ab-videos-grid-wo-title {
        --columns: 3 !important;
    }

    /* Footer menus stacked on phones (Marija, Ruttl 2026-10-04, iPhone):
       Services list -> "About" was the wrapper's 20, closer than "About" ->
       its own list (26); now 40, so each heading reads with its list. */
    .l-footer .w-hwrapper.flex-row-2 {
        row-gap: calc(var(--section-pad-medium) * 2 / 3);
    }
}

/* p-2xl and p-md boxes up to 600 (Nemanja 2026-10-04): 1.5rem left and right
   (22.5 - the root size is 15) instead of 40 (p-2xl, --space-lg here) and 30
   (p-md, --space-md); top and bottom keep theirs. p-md is the alt-bg-box
   vwrapper: service cards on Home, specialty and location cards, the G&I info
   box, the Contact boxes.
   Every p-2xl box: the specialty cards (alt-bg-box), the parent service box
   (alt-content-bg-box), the CTA band (block 9537), the location CTAs and the
   Employment boxes. After the phone block and at 0-2-0, so it also beats the
   two component rules there that restate 40 (.alt-content-bg-box.p-2xl,
   .alt-content-primary-bg-box.p-2xl). In a vc_row_inner box the column adds
   its own 10, so the text sits 33 in; in a vwrapper box 22.5.
   The contact-form box (therapist-form-inner-row: location and therapist
   pages) joins them (Marija, Ruttl 2026-10-04, [TIP: location pages], "the
   form content can be wider"): 36 / 40 before, fields 246 wide at 390. */
@media (max-width: 600px) {

    .l-body .p-2xl,
    .l-body .p-md,
    .l-body .g-cols.therapist-form-inner-row.alt-bg-box {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Insurance logos on phones (Ruttl Awib): one under another at their
       desktop heights, 24 apart, centred in the card - three in a row need
       388 and the card has 310. The 75 row height is a desktop measure. */
    .w-hwrapper.insurance-hwrapper.flex-row-3 {
        --gap: 24px;
        flex-direction: column;
        min-height: 0;
    }
}

/* Home hero between a phone and the stacking width (601-767): the phone
   frame's 361/853 would make the card 1578 tall at 700, so this range takes
   4/5 - 668x835 at 700 with the copy in the bottom 360. Measured by
   injection 2026-10-03. */
@media (min-width: 601px) and (max-width: 767px) {

    .g-cols.via_flex.type_default.home-hero-inner-row {
        aspect-ratio: 4 / 5;
    }
}

/* Footer top line (Marija, Ruttl, "the line from the design is missing"):
   Figma has two lines in every footer, "Line 9" at the top and "Line 8"
   above the copyright. Line 8 is the builder's separator; Line 9 is
   the footer's top edge, in the same colour and width (the page ground and
   the footer ground are the same cream, so without it the footer has no
   start). The logo sits 37.5 under it (Figma 44). */
.l-footer > .l-section:first-child {
    border-top: 1px solid var(--color-footer-border);
}

/* Footer on tablets, 768-1024 (Nemanja 2026-10-04): three columns - Services,
   About (the halves of the links column) and Our Offices - and Latest from
   YouTube on its own row underneath, heading on the left, the three videos
   side by side on the right. Block 9567 carries the classes (footer-main-row,
   footer-links-column, footer-offices-column, footer-videos-column,
   footer-office-anthem). The
   videos row is a 1fr / 2fr grid with a 10 gap, so the videos start exactly
   under About (317 at 900, 270 at 768, 356 at 1024 - measured) and end with
   Our Offices. The list's inline --columns: 1 needs !important, as on phones. */
@media (min-width: 768px) and (max-width: 1024px) {

    .g-cols.via_flex.type_default.footer-main-row > .wpb_column.footer-links-column {
        width: 66.6667%;
    }

    .g-cols.via_flex.type_default.footer-main-row > .wpb_column.footer-offices-column {
        width: 33.3333%;
    }

    .g-cols.via_flex.type_default.footer-main-row > .wpb_column.footer-videos-column {
        width: 100%;
        margin-top: var(--space-lg);
    }

    .wpb_column.footer-videos-column > .vc_column-inner > .wpb_wrapper {
        display: grid;
        grid-template-columns: 1fr 2fr;
        column-gap: 10px;
        align-items: start;
    }

    .wpb_column.footer-videos-column > .vc_column-inner > .wpb_wrapper > .w-separator {
        display: none;
    }

    .l-footer .footer-videos-column .w-grid.ab-videos-grid-wo-title {
        --columns: 3 !important;
    }

    /* One Call/Text pair instead of two, the same numbers twice (Nemanja):
       the Phoenix / Anthem pair goes (footer-office-anthem), Scottsdale's
       stays. The address above it loses its css= blob's 20 bottom margin -
       printed with !important - which would otherwise hang before the
       separator. */
    .w-vwrapper.footer-office-anthem > .w-btn-wrapper {
        display: none;
    }

    .w-vwrapper.footer-office-anthem > .w-text:nth-child(2) {
        margin-bottom: 0 !important;
    }
}

/* Home hero on tablets, 768-1024 (Nemanja 2026-10-04): the desktop 12/5 with
   the desktop insets - 0 on top - packed the stacked copy against the
   card's top edge (title 15 below it at 768 and 1024, which is only the
   column's own 1rem). 40 inside on every side: the padding is 25 top and
   bottom because Impreza gives each vc_col-md column 1rem (15) above and
   below in 601-1024.
   4/3 since Marija's iPad pass (Ruttl NtBE, "pack it better, title lower"):
   at 16/9 the copy filled the card from edge to edge; at 4/3 the photo has
   the top and the copy packs at the foot. Button -> lede and lede -> video
   card are both 30 (the stacked title column's 30 less the column's own 15;
   the lede's 40 -> 30). On a landscape iPad 4/3 of 992 would be 744 against
   663 of screen under the header, so the card stops at the screen. The
   ratio would carry that cap over to the width (measured 2026-10-05: the row
   875 of the card's 977 at 1024x768), so the row keeps the full width.
   Measured 2026-10-05: 773x580 at 820, eyebrow 146 down; 977x656 at 1024x768. */
@media (min-width: 768px) and (max-width: 1024px) {

    .g-cols.via_flex.type_default.home-hero-inner-row {
        aspect-ratio: 4 / 3;
        min-width: 100%;
        max-height: calc(100svh - var(--header-height) - 32px);
        padding: 25px 40px;
    }

    .g-cols.via_flex.type_default.home-hero-inner-row > .wpb_column.home-hero-title-column {
        margin-bottom: calc(var(--space-md) - 15px);
    }

    .l-section.home-slide-section .wpb_text_column.home-hero-lede {
        margin-bottom: var(--space-md);
    }
}

/* Subpage hero from 601 to 1024: 16/9 (Nemanja 2026-10-04), between the
   phone's 4/5 (835 tall at 700) and the desktop's 12/5 (278 at 700, 300 at
   768). Placed after the phone block so it wins 601-767 at equal weight.
   The photo follows the card (base rule), and a title longer than the card
   grows it rather than spilling out. */
@media (min-width: 601px) and (max-width: 1024px) {

    .w-vwrapper.image-title-vwrapper {
        aspect-ratio: 16 / 9;
    }

    /* Its pale-blue shape as on phones over the whole range (Nemanja
       2026-10-04): 1:1, 11 left of the edge, lower blob ending 72 under the
       card (box top 343 above the card's bottom edge). 601-767 already had
       it from the phone block; 768-1024 had the desktop bottom: -200 with the
       clamp's 138-184 width, which put the box top only 77 above the card at
       900 and most of the shape in the quote band below. */
    .l-section.page-title-section::after {
        left: -11px;
        width: 260px;
        bottom: -102px;
    }
}

/* ==========================================================================
   The Events Calendar - palette
   ==========================================================================
   The plugin ships a full token layer on :root; two source colours drive
   everything visible. Measured 2026-09-28 on /events/:

     #334aff  brand blue   - 13 tokens (accent, buttons, focus rings, icons)
     #141827  cold near-black - 12 tokens (body text, titles, active borders)

   Remapped to the site palette: accent -> --color-light-primary (#C28041),
   text -> --color-alt-content-text (#343232). Light Primary rather than
   --color-content-primary: the plugin fills large areas with the accent (week
   events, multiday bars), where the darker #A2672F reads heavier than anything
   else on the site.

   Declared on .l-body, not :root. Custom properties resolve from the NEAREST
   ancestor that sets them, so a body-level declaration beats the plugin's
   :root regardless of stylesheet load order - which the theme does not control
   for a plugin asset.

   The alpha steps are the plugin's own (cc = .8, e6 = .9, 3d = .24,
   1a = .10, 12 = .07, 0a = .04, 24 = .14, 33 = .20, 57 = .34, 9e = .62),
   restated as rgba because an 8-digit hex cannot be built from a var(). */
.l-body {
    /* accent - was #334aff */
    --tec-color-accent-primary: var(--color-light-primary);
    --tec-color-accent-primary-hover: rgba(194, 128, 65, 0.80);
    --tec-color-accent-primary-active: rgba(194, 128, 65, 0.90);
    --tec-color-accent-primary-background: rgba(194, 128, 65, 0.07);
    --tec-color-accent-primary-week-event: rgba(194, 128, 65, 0.10);
    --tec-color-accent-primary-week-event-hover: rgba(194, 128, 65, 0.20);
    --tec-color-accent-primary-week-event-featured: rgba(194, 128, 65, 0.04);
    --tec-color-accent-primary-week-event-featured-hover: rgba(194, 128, 65, 0.14);
    --tec-color-background-primary-multiday: rgba(194, 128, 65, 0.24);
    --tec-color-background-primary-multiday-hover: rgba(194, 128, 65, 0.34);
    --tec-color-event-icon-hover: var(--color-light-primary);
    --tec-color-icon-focus: var(--color-light-primary);
    --tec-color-link-accent: var(--color-light-primary);
    --tec-color-link-accent-hover: rgba(194, 128, 65, 0.80);

    /* text and chrome - was #141827 */
    --tec-color-text-primary: var(--color-alt-content-text);
    --tec-color-text-primary-light: rgba(52, 50, 50, 0.62);
    --tec-color-link-primary: var(--color-alt-content-text);
    --tec-color-accent-secondary: var(--color-alt-content-text);
    --tec-color-accent-secondary-hover: rgba(52, 50, 50, 0.80);
    --tec-color-accent-secondary-active: rgba(52, 50, 50, 0.90);
    --tec-color-accent-secondary-background: rgba(52, 50, 50, 0.07);
    --tec-color-background-secondary-multiday: rgba(52, 50, 50, 0.24);
    --tec-color-background-secondary-multiday-hover: rgba(52, 50, 50, 0.34);
    --tec-color-background-messages: rgba(52, 50, 50, 0.07);
    --tec-color-border-active: var(--color-alt-content-text);
    --tec-color-event-icon: var(--color-alt-content-text);
    --tec-color-icon-active: var(--color-alt-content-text);
}

/* Featured image on the "Latest Past Events" card - the plugin ships it square. */
.tribe-events-calendar-latest-past__event-featured-image,
.tribe-events-calendar-latest-past__event-featured-image img {
    border-radius: var(--radius-img);
}

.tribe-events-calendar-latest-past__event-featured-image {
    overflow: hidden;
}

/* Find Events / Tribe buttons — keep our pill radius in all states */
.l-body .tribe-common .tribe-common-c-btn,
.l-body .tribe-common .tribe-common-c-btn:hover,
.l-body .tribe-common .tribe-common-c-btn:focus,
.l-body .tribe-common .tribe-common-c-btn:active,
.l-body .tribe-events .tribe-events-c-search__button,
.l-body .tribe-events .tribe-events-c-search__button:hover,
.l-body .tribe-events .tribe-events-c-search__button:focus,
.l-body .tribe-events .tribe-events-c-search__button:active {
    border-radius: var(--radius-pill);
}

/* Events page (The Events Calendar, /events/), Ruttl 2026-10-02 (Marija,
   desktop): headings and titles in the site's own type, every past event on a
   white card, the featured line on the card's left edge.
   The plugin scopes its type to .tribe-common-h*; one .l-body class and the
   .tribe-events root are enough to take over (verified 2026-10-05). */

/* lJoG: the search bar gets the box radius, like the fields. */
.l-body .tribe-events .tribe-events-c-events-bar {
    border-radius: var(--radius-box);
}

/* PkPK: the "Upcoming" date picker label reads as a heading - h3 tokens. */
.l-body .tribe-events .tribe-events-c-top-bar__datepicker-desktop,
.l-body .tribe-events .tribe-events-c-top-bar__datepicker-mobile {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    color: var(--color-content-heading);
}

/* aRW0: "Latest Past Events" is the page's h2 - h2 tokens. */
.l-body .tribe-events .tribe-events-calendar-latest-past__heading {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size);
    font-weight: var(--h2-font-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    color: var(--color-content-heading);
}

/* vikj: event titles - h3 tokens, as the plugin's own h3 tag says. */
.l-body .tribe-events .tribe-events-calendar-latest-past__event-title,
.l-body .tribe-events .tribe-events-calendar-latest-past__event-title-link {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    color: var(--color-content-heading);
}

/* v4mU: every past event on a white card, the p-md box of the site: 2rem
   top and bottom, 1.5rem a side on phones. From the plugin's medium
   breakpoint (container >= 768, a JS class) each column carries 24px a side
   and the row pulls -24 back out; the row keeps its edges here, so its own
   inline padding is what is left of 2rem. */
.l-body .tribe-events .tribe-events-calendar-latest-past__event-row {
    margin-inline: 0;
    padding: 2rem 1.5rem;
    background: var(--color-content-bg-alt);
    border-radius: var(--radius-box);
}

.l-body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-latest-past__event-row {
    padding: 2rem calc(2rem - 24px);
}

/* fCQG: the featured line moves from between the date and the details to the
   card's left edge, as on the Home approaches badges (border-left on a
   rounded box). The plugin draws it as ::after on the date. */
.l-body .tribe-events .tribe-events-calendar-latest-past__event-row--featured {
    border-left: 3px solid var(--tec-color-accent-primary);
}

.l-body .tribe-events .tribe-events-calendar-latest-past__event-row--featured .tribe-events-calendar-latest-past__event-date-tag-datetime::after {
    content: none;
}

/* ==========================================================================
   SERVICES MEGA MENU
   Reusable Block 10913, menu item 10919 (menu "main-menu-desktop").
   Figma node 1160:303, measured 2026-10-01:
     panel 1042 x 359, left pad 72, vertical pad 45
     three menu columns of 168 at 80 gaps, then a 262 aside strip, flush right
     72 + 168 + 80 + 168 + 80 + 168 + 44 + 262 = 1042
   Ruttl 2026-10-02 (Marija): the gap before the aside equals the panel's
   left padding, 72, so the two column gaps give up the difference:
     72 + 168 + 66 + 168 + 66 + 168 + 72 + 262 = 1042
   ========================================================================== */

/* Panel. The aside strip runs to the right edge, so the corners are clipped
   here rather than rounded on the strip itself. The radius itself now comes from
   the shared dropdown rule at the foot of this file - every panel carries the
   same 0 0 6px 6px - so only the clipping and the shadow live here. */
.l-body .w-nav-list.level_2:has(> .menu-item-10920) {
    overflow: hidden;
    box-shadow: var(--shadow-md);

    /* No panel padding here. The plain dropdowns get theirs from the header's
       Dropdown Padding param (30px 0), but this panel already carries 45px top
       and bottom on .services-mega-menu inside it - and the aside strip is meant
       to run the full height of the panel. Measured 2026-10-02: with the param's
       30px applied the panel grew 354 -> 414 and the strip was inset top and
       bottom, showing the panel's own ground as two pale bands. */
    padding-block: 0;
}

/* valign_top leaves the aside strip the height of its text; the strip has to
   run the full height of the panel. */
.l-body .w-hwrapper.services-mega-inner {
    align-items: stretch;
    gap: 0;
}

.l-body .w-hwrapper.services-mega-inner > .w-menu {
    flex: 0 0 168px;
    margin-left: 66px;
    padding: 45px 0;
}
.l-body .w-hwrapper.services-mega-inner > .w-menu:first-child {
    margin-left: 72px;
}

/* margin-left:auto keeps the strip flush right whatever the columns do. */
.l-body .w-hwrapper.services-mega-inner > .services-mega-aside {
    flex: 0 0 262px;
    margin-left: auto;
    padding: 35px 30px;
    /* Figma fill rgba(191,135,80,.5); the palette token measures
       rgba(194,128,65,.5) - the same wash over _content_bg. */
    background: color-mix(in srgb, var(--color-light-primary) 50%, transparent);

    /* The panel's own overflow:hidden rounds this strip's bottom-RIGHT corner
       along with the panel. The bottom-left one sits inside the panel, where
       nothing clips it, so it is stated here - same 6px as the panel. */
    border-bottom-left-radius: 6px;
}

/* --- group labels --------------------------------------------------------
   Top level of every column. In columns 1 and 2 these head a sub-list; in
   column 3 they are the whole menu.
   Vertical rhythm comes from main_gap on the element (56px / 32px) and the
   COLOURS come from the element too - main_color_text / main_color_text_hover,
   under "Main Items". Only the type is here, because the element has no param
   for size, case or tracking. The Sub Items group has no colour params at all,
   which is why the sub-link colour below legitimately lives in CSS. */
.l-body .w-menu.services-mega-menu .menu > .menu-item > a {
    display: block;
    font-size: var(--fs-3xs);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- sub-links ----------------------------------------------------------- */
.l-body .w-menu.services-mega-menu .sub-menu {
    margin: 12px 0 0;
    padding: 0;
}
/* Sub-links are spaced like the plain dropdowns (Marija, Ruttl 2026-10-02,
   "the mega menu items are closer together than in the dropdown - make them
   all like the dropdown"): there each link is 14/21 with 0.6em (8.4) above and
   below, a 38 pitch; here 21 lines and 17 between them give the same 38 (was
   18 + 12 = 30). The element's own sub_gap param would also set the label ->
   first link gap (it is padding-top on .sub-menu as well), which stays 12, so
   the spacing stays here. Panel 354 -> 373 at 1440. */
.l-body .w-menu.services-mega-menu .sub-menu > .menu-item {
    margin-bottom: 17px;
}
.l-body .w-menu.services-mega-menu .sub-menu > .menu-item:last-child {
    margin-bottom: 0;
}
/* Verified against Figma 2026-10-01 with get_design_context on 1160:1113:
   font-semibold sits on the column frame and inherits, so the sub-items are 600
   like the labels, at 14px with normal leading - not the 15px/400 first guessed
   from a pixel read of the render. */
.l-body .w-menu.services-mega-menu .sub-menu > .menu-item > a {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-content-secondary);
    transition: color 0.2s ease;
}
.l-body .w-menu.services-mega-menu .sub-menu > .menu-item > a:hover,
.l-body .w-menu.services-mega-menu .sub-menu > .menu-item > a:focus {
    color: var(--color-light-primary);
}

/* The page you are on is orange in the panel too (Marija, Ruttl 2026-10-02,
   on Women's Counseling: "Services and that item active"; Services itself is
   active from functions.php since 10-04). Group labels: green, orange on
   hover and when active - main_color_text / _hover / _active on the element
   (block 10913). The element's active colour only reaches a label that is
   itself the current page (.current-menu-item, column 3); a group label whose
   child is current (Adults on Women's) is .current-menu-ancestor, added here
   on the same variable. 0-6-2 against the element's 0-5-2 colour rule. */
.l-body .w-menu.services-mega-menu .sub-menu > .current-menu-item > a {
    color: var(--color-light-primary);
}

.l-body .w-menu.for_simple_menu.services-mega-menu .menu > li.current-menu-ancestor > a {
    color: var(--main-active-color, var(--color-light-primary));
}

/* --- aside ---------------------------------------------------------------
   inner_items_gap is 0rem on the wrapper, and the three children need
   different gaps (21 then 36), so the spacing sits on the children. */
.l-body .w-vwrapper.services-mega-aside > .w-text {
    margin-bottom: 21px;
}
.l-body .w-vwrapper.services-mega-aside > .w-popup {
    margin-bottom: 36px;
}
.l-body .w-vwrapper.services-mega-aside > .w-btn-wrapper {
    margin-bottom: 0;
}
.l-body .w-vwrapper.services-mega-aside .w-btn {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* ==========================================================================
   G&I CARD CONTENT — aligned to the workshops card, Figma node 1033:466
   Measured 2026-10-01 on the 1180 x 402 card:
     padding 36, gap 70, image 494 x 330 (3:2), content 544
     title -> body 16, body -> meta 24, meta -> Read More 24
     meta lines pitch 28; label #C28041, value #343232
   Card padding stays --space-md (30), per the earlier decision that 36 is not
   a step on the scale; the image share is recomputed for 30, so the
   image-to-text proportion still matches the drawing.
   ========================================================================== */

.l-body .w-grid.ab-gi-grid .usg_post_title_1 {
    /* Grid layout 10580 emits font-size/line-height as !important from its own
       inline style, and that layout is not reachable from the MCP, so this has
       to answer in kind. If 10580 is ever edited by hand, move these two there
       and delete them here. */
    font-size: 30px !important;
    line-height: 1.33 !important;
    margin-bottom: 16px;
}

.l-body .w-grid.ab-gi-grid .usg_post_content_1 {
    margin-bottom: 24px;
}

.l-body .w-grid.ab-gi-grid .post_custom_field {
    font-size: 14px;
    line-height: 28px;
    margin-bottom: 0;
}
/* The same two fields also render in the sticky info box on a single
   group/intensive (.gi-info-vwrapper), so the treatment is shared. That box keeps
   its own 15px / 25px rhythm - its values wrap at 280px, where the card's 28px
   line-height would read as four separate blocks. */
.l-body .w-grid.ab-gi-grid .post_custom_field .w-post-elm-before,
.l-body .gi-info-vwrapper .post_custom_field .w-post-elm-before {
    color: var(--color-light-primary);
    font-weight: 600;
}
.l-body .w-grid.ab-gi-grid .post_custom_field .w-post-elm-value,
.l-body .gi-info-vwrapper .post_custom_field .w-post-elm-value {
    color: var(--color-body-text-dark);
}

/* The button carries 14.3px of its own top padding from button style 5, so 10
   here lands the gap on the 24 the drawing shows. */
.l-body .w-grid.ab-gi-grid .usg_btn_1 {
    margin-top: 10px;
}

/* ==========================================================================
   MEGA MENU - the aside video opens in a popup
   The slot used to be a us_post_list rendering Impreza's own
   .w-video.with_overlay, which played the video INSIDE a 262px dropdown that
   closes as soon as the pointer leaves it. It is now a us_popup whose trigger
   is the poster image, dressed here to read exactly as that .w-video did:
   same rounded poster, same hover tint, a play badge in the middle.
   JS is the house module (references/video-popup.js), copied verbatim into
   assets/js/ab-custom.js on 2026-10-01 with a boot block appended; the
   el_class "ab-video-popup" is the scope it looks for, and Impreza puts that
   class on both .w-popup and .w-popup-wrap.
   No preloader rule here on purpose: that one is for a popup inside a Grid
   Layout, which fetches over admin-ajax. This popup ships with the page.
   ========================================================================== */

.l-body .services-mega-aside > .w-popup .w-popup-trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.l-body .services-mega-aside > .w-popup .w-popup-trigger img {
    display: block;
    width: 100%;
    border-radius: var(--radius-img);
}

/* Play icon, same as the videos grid.
   Impreza draws .w-video-play-icon as a 3em circle with the Font Awesome play
   glyph inside; the geometry below is lifted from its own stylesheet so the
   popup trigger and the grid cannot drift apart. Weight 300 is Font Awesome
   Light; the videos grid now matches it - see .w-video-play-icon below.
   Since 2026-10-05 both are solid, 32 round, 8 in from the top-left corner
   (Ruttl JboF); here this ::after is the circle itself. */
.l-body .services-mega-aside > .w-popup .w-popup-trigger::after {
    content: "\f04b";
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px;
    margin: 0;
    width: 30px;
    padding-left: 2px;
    line-height: 32px;
    box-sizing: content-box;
    text-align: center;
    border-radius: 50%;
    pointer-events: none;
    font-family: fontawesome;
    font-weight: 300;
    font-size: 12px;
    color: #fff;
    background: var(--color-content-primary);
    transition: transform 0.3s ease;
}
.l-body .services-mega-aside > .w-popup .w-popup-trigger:hover::after,
.l-body .services-mega-aside > .w-popup .w-popup-trigger:focus-visible::after {
    transform: scale(1.2);
}

/* The popup box holds a 16:9 player and nothing else. */
.l-body .w-popup-wrap.ab-video-popup .w-popup-box-content > .w-video {
    margin-bottom: 0;
}

/* Video play icon, site-wide - the overlay icon on every vc_video, which is
   what the videos grids render.
   Impreza declares font-weight 900 on this glyph, but no solid face is loaded
   on this site. Measured 2026-10-01: only two fontawesome faces are
   registered, 400 and 300, and the glyph renders at the same 87.5px width for
   300 / 400 / 900, while a genuine fallback measures 77.8px. So the theme's
   "900" has silently been the regular face all along. 300 picks the Light face
   that IS loaded, and matches the mega menu's popup trigger above. */
.l-body .w-video-play-icon::after {
    font-weight: 300;
}

/* Play icon on the video lists - Home "Our Goals" and the footer (Ruttl JboF,
   XCNm): solid instead of the 75% wash, 32 round, 8 in from the top-left
   corner, so it no longer sits on the speaker's face. Grid Layouts 9818 and
   9828 write the font-size and the 75% colour inline on the span, hence px
   sizes and the one !important; the glyph is sized on ::after, which the
   inline style does not reach. The 2px nudge centres the triangle. */
.l-body .w-grid .w-video-play-icon {
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    line-height: 32px;
    background: var(--color-content-primary) !important;
}

.l-body .w-grid .w-video-play-icon::after {
    font-size: 12px;
    padding-left: 2px;
}

/* ==========================================================================
   QSM QUIZZES - fields on the site's default field style
   Quiz And Survey Master ships qmn_primary.css, which paints its inputs with a
   1px #3498DB border, 3px radius, #555 text and its own padding. None of it is
   !important and none of it is deliberate: those rules sit at (0,2,1) and
   simply outrank the theme's own `input:not([type="submit"]), textarea,
   select`. Scoping on the two classes the container carries together gives
   (0,3,x), which is enough - no !important needed.

   Everything below is written in the --inputs-* custom properties Impreza
   emits from Theme Options -> Field Styles (Default Style, id 1), never in
   literal values, so changing that style still moves the quizzes with it.
   Verified 2026-10-01 that those properties do resolve on a quiz page.

   The radios are left alone on purpose - measured the same day, they already
   render on the theme's styling (appearance:none, 1.5em square, 50% radius).
   ========================================================================== */

.l-body .qsm-quiz-container.qmn_quiz_container input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.l-body .qsm-quiz-container.qmn_quiz_container select,
.l-body .qsm-quiz-container.qmn_quiz_container textarea {
    font-family: var(--inputs-font-family, inherit);
    font-size: var(--inputs-font-size, inherit);
    font-weight: var(--inputs-font-weight, inherit);
    letter-spacing: var(--inputs-letter-spacing, inherit);
    text-transform: var(--inputs-text-transform, none);
    color: var(--inputs-text-color, inherit);
    background-color: var(--inputs-bg-color, transparent);
    border: var(--inputs-border-width, 0) solid var(--inputs-border-color, currentColor);
    border-radius: var(--inputs-border-radius, 0);
    box-shadow: var(--inputs-box-shadow, none);
    transition: box-shadow 0.2s ease, color 0.2s ease;
}

/* Single-line fields take their height from the style. A textarea must not, or
   its rows would sit 3.5em apart. */
.l-body .qsm-quiz-container.qmn_quiz_container input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.l-body .qsm-quiz-container.qmn_quiz_container select {
    min-height: var(--inputs-height, 2em);
    line-height: var(--inputs-height, 2em);
    padding: 0 var(--inputs-padding, 0.6em);
}
.l-body .qsm-quiz-container.qmn_quiz_container textarea {
    padding: calc(var(--inputs-padding, 0.6em) * 0.6) var(--inputs-padding, 0.6em);
    line-height: 1.6;
}

.l-body .qsm-quiz-container.qmn_quiz_container input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
.l-body .qsm-quiz-container.qmn_quiz_container select:focus,
.l-body .qsm-quiz-container.qmn_quiz_container textarea:focus {
    color: var(--inputs-focus-text-color, inherit);
    box-shadow: var(--inputs-focus-box-shadow, none);
    outline: none;
}

/* QSM popup "Cancel" - the house secondary (Outline) button.
   qsm-quiz-style.css paints it #808080 with !important at (0,2,2), so this
   answers in kind at (0,3,2). Values follow Theme Options -> Buttons ->
   "Outline Button" (id 2): transparent, _alt_content_text label, 1px inset
   ring in _content_primary, and on hover a filled _content_primary with white
   text. Size, radius and weight already come from the .qmn_btn rules. */
.l-body footer.qsm-popup__footer button.qsm-popup-secondary-button {
    background-color: transparent !important;
    color: var(--color-alt-content-text) !important;
    box-shadow: 0 0 0 1px var(--color-content-primary) inset;
    opacity: 1;
}
.l-body footer.qsm-popup__footer button.qsm-popup-secondary-button:hover,
.l-body footer.qsm-popup__footer button.qsm-popup-secondary-button:focus-visible {
    background-color: var(--color-content-primary) !important;
    color: #fff !important;
    opacity: 1;
}

/* ==========================================================================
   POST TEMPLATE - "Recent posts" follows the article on desktop
   Template 9901, element el_class="sidebar-recent-posts-vwrapper".

   Why CSS and not the builder: Impreza's sticky is a param on the COLUMN and
   renders .vc_column-inner.type_sticky, which would carry the category, the H1
   and the date along with it. Only this block should travel.

   THE PART THAT IS EASY TO GET WRONG. A sticky element is bounded by its
   PARENT, and WPBakery puts a plain div.wpb_wrapper between .vc_column-inner
   and the content. Measured 2026-10-01 on a live post: .vc_column-inner does
   stretch to the full row height (2537px), but that inner .wpb_wrapper is only
   as tall as its content - 840px, ending at exactly the same pixel as the
   block itself. Zero travel, so position:sticky computed correctly and never
   pinned once. Growing that wrapper is what makes the sticky real; measuring
   .vc_column-inner and declaring the room sufficient is the wrong measurement.

   Rest of the conditions, also measured: nothing clips it (no ancestor with a
   non-visible overflow up to <body>).

   The offset is --header-sticky-height, not --header-height. Header 9437 has
   sticky:1 with scroll_breakpoint 100px, middle_sticky_height 0 and
   bottom_sticky_height 50px, so past 100px the logo row collapses and only the
   50px nav row stays. Our block pins at scroll ~269, well after that, so the
   header is always in its 50px state by the time it matters.
   WARNING ON HOW TO TEST THIS: window.scrollTo() does NOT trigger Impreza's
   header JS - the header kept its full 140px and its boot-time .notransition
   class through every programmatic scroll, which reads exactly like "this
   header does not shrink". A real wheel scroll flips it to .sticky at 50px.
   Drive scroll-reactive theme JS with a genuine gesture, or read the header
   config and believe it over the measurement.

   Breakpoint: the column emits ONLY vc_col-md-4, so two columns start at
   1025px. Theme Options -> Columns Stacking Width reads 768px, which is the
   figure for a width= column and the wrong tier here.
   ========================================================================== */

@media (min-width: 1025px) {

    /* Give the sticky block somewhere to travel. :has() keeps this to the one
       wrapper that holds it, with no dependence on a template id.
       Safe only because the sticky wrapper is the LAST thing in that wrapper:
       a sticky element travels to the bottom of its parent and paints over
       whatever sits below it, so a sibling after it gets covered. The subscribe
       box therefore lives INSIDE the sticky wrapper, not after it. */
    .l-body .vc_column-inner > .wpb_wrapper:has(> .sidebar-recent-posts-vwrapper) {
        flex: 1 1 auto;
    }


    .l-body .sidebar-recent-posts-vwrapper {
        position: sticky;
        top: calc(var(--header-sticky-height, 50px) + var(--space-md, 30px));
    }

}

/* "Read More" in the sidebar Recent posts list. Button style 5 is the text-link
   style, whose vertical padding buys a tap target that the small cards do not
   need - it just adds a gap under the last line of each card. */
.l-body .w-grid.ab-small-blog-grid .us-btn-style_5 {
    padding-bottom: 0;
}

/* The subscribe box inside the sidebar is one vc_column_text, not a nested
   us_vwrapper - us_vwrapper inside us_vwrapper is the WordPress same-tag
   nesting trap. Collapsing it costs only this gap, which the original carried
   as a css= margin on its own element. */
.l-body .mailchimp-box .mailchimp-form-slot {
    margin-top: 24px;
}

/* Category label above a post title (Post Template 9901, el_class
   post-category-label) links to the category archive (Nemanja 2026-10-04).
   It keeps the label colour on hover and underlines instead. Impreza already
   holds the colour through .color_link_inherit.has_text_color > a:hover, but
   only while the element's Design-tab text colour is set (that is what adds
   has_text_color); restated so .no-touch a:hover cannot take it if it goes. */
.l-body .w-post-elm.post-category-label a:hover {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================================================
   POST TEMPLATE - column measures (Figma "Blog Single", node 532:3855)
   Measured in the design 2026-10-01, against the live 1180px container:
     sidebar block 343  |  gap 95  |  article text 742     (343 + 95 + 742 = 1180)

   The sidebar COLUMN stays 380 and is deliberately NOT narrowed: in the design
   the post title above it is 380 wide, and only the Recent-posts + Subscribe
   block is inset to 343. Insetting that block is what opens the 95px gap - the
   article column's left edge is already right, from its own margin-left: 2.5rem
   (37.5px), which lands the text on x=568 at a 1440 frame, exactly as drawn.

   Both values were first set as Design-tab css= blobs and moved here: a blob
   compiles to .us_custom_<hash> with !important on every declaration, so it can
   never be overridden from this file - and the sticky rule for this very same
   element already lives in the block below.

   The sidebar cap is not breakpoint-guarded: below 1025 the columns stack, and
   on a phone the container is already narrower than 343, so it does not bind.
   The article is not capped by a width but inset by the stretch (Nemanja
   2026-10-04): the column is stretch="1", so the post image bleeds to the
   viewport edge, and the text gets back exactly what the stretch took -
   padding-right = -var(--margin-inline-stretch), which Impreza defines as
   min(container/2 - 50vw, -5vmin). So the text ends on the container edge at
   every width (1100: 40, 1280: 50, 1440: 130) and the 742 of the design
   falls out by itself at 1440 and up. A fixed 742 did not hold below 1440:
   at 1280 it stopped 47px short of the image, at 1025-1279 it did not bind
   and the text ran to 10px from the screen edge.
   ========================================================================== */

.l-body .sidebar-recent-posts-vwrapper {
    max-width: 343px;
}

@media (min-width: 1025px) {
    .l-body .post-content-vwrapper {
        padding-right: calc(-1 * var(--margin-inline-stretch, 0px));
    }
}

/* Below 1025 the article column is not stretched at all (Nemanja 2026-10-04).
   The two columns are stacked there, and the stretch only pushed the post
   image and the text past the row indent on the right: at 900 both ran
   45..885 against a 45..840 container. Impreza and ab-base set the bleed on
   :last-of-type at 0-5-0; the template's el_class buys the sixth class.
   Phones (767 and down) already zero it. */
@media (min-width: 768px) and (max-width: 1024px) {
    .g-cols.via_flex.type_default > .wpb_column.stretched.post-article-column {
        margin-inline-end: 0;
    }
}

/* Images floated left or right in content get the site's small radius, bare or
   inside a caption (Nemanja 2026-10-04). On a captioned one the radius goes on
   the img: the figure has no background or overflow, so a radius there would
   not show. Nothing else sets one - measured 0, no competing rule, on "What
   Are the Hardest Emotions to Control?" and "Relationship Coaching for Men".
   Only posts carry such images (18 with captions); no page does. */
img.alignleft,
img.alignright,
.wp-caption.alignleft img,
.wp-caption.alignright img {
    border-radius: 8px;
}

/* Mirrored sidebar - Quiz Template 10951 puts the same block on the RIGHT.
   It is capped at 343px inside a 380px column, so left-aligned it would sit 37px
   short of the container edge; this pushes it to its column's right edge instead.
   Same declaration ab-base gives .narrow-el-*.align-r - restated here because
   that utility's selector only matches COMPOUNDED with .narrow-el-*, so the bare
   class applies to nothing on its own. Read in ab-base.css 2026-10-02, not
   assumed. Geometry it produces at 1440, mirroring the post page exactly:
   content text 742 from the container's left edge, 95 gap, block 343 flush right. */
@media (min-width: 1280px) {
    .l-body .sidebar-recent-posts-vwrapper.align-r {
        margin-inline: auto 0;
    }
}

/* Below its own split point the two columns are STACKED, so the block must stop
   pinning as well - the sticky rule above is bound to 1025, which is the post
   template's tier, not this one. Measured 2026-10-02 in a 1200px iframe before
   this rule existed: the 343px block sat sticky with margin-left 758px and 768px
   of empty column beside it.

   WHERE 1280 COMES FROM. The quiz columns are vc_col-lg-*, and us-core derives
   the lg tier from Theme Options -> Laptops Screen Width PLUS ONE. With Laptops
   at 1279 that is min-width 1280, so this pair is the same single boundary as
   the grid's, written from both sides. Change Laptops and BOTH numbers here move
   with it. (The xl tier this started on is the one tier no setting drives - it
   is hardcoded at 1400 in us-core, which is why the split used to land there.) */
@media (max-width: 1279px) {
    .l-body .sidebar-recent-posts-vwrapper.align-r {
        position: static;
    }
}

/* Laptops (1025-1279), agreed 2026-10-04. Placed after the mega menu and
   Page Title base rules so it wins at equal specificity.
   Services mega menu: the panel is held to the menu's own width - the bottom
   subheader's content box, which is the panel's containing block - instead
   of the 1042 the menu item's dropdown settings give it, and centred like
   the menu. Those settings print left, right and margin-left with
   !important at 0-4-0 (us-theme-options-css), hence !important at 0-5-0
   here. Inside, the first column steps in 40 instead of 72 and the column
   gaps share what is left, at most the desktop 80 (806 = 3 x 168 + 262 +
   40); the aside stays flush right.
   Subpage hero shape: placed off the card's bottom edge the way Home's is,
   box top 265 above it. The Page Title section ends at the card here, so
   its bottom is 265 minus the shape's own height. */
@media (min-width: 1025px) and (max-width: 1279px) {
    .l-body .w-nav.type_desktop .menu-item-10919 .w-nav-list.level_2 {
        width: min(100%, 1042px);
        left: 0 !important;
        right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .l-body .w-hwrapper.services-mega-inner > .w-menu {
        /* Gap before the aside = the 40 left padding here as well. */
        margin-left: calc((100% - 846px) / 2);
    }

    .l-body .w-hwrapper.services-mega-inner > .w-menu:first-child {
        margin-left: 40px;
    }

    .l-section.page-title-section::after {
        bottom: calc(265px - clamp(130px, 18vw, 260px) * 445 / 260);
    }
}

/* QSM pagination row - buttons aligned left with a fixed gap instead of the
   plugin's own spread. Dictated 2026-10-02; two typos in the source were
   silently fatal and are corrected here: "justify-contet" (no such property,
   the declaration is dropped) and "gap 1.2rem" (missing colon, same fate).
   500px is QSM's own threshold, not one of the site's breakpoints. */
@media screen and (min-width: 500px) {
    .l-body .qmn_pagination,
    .l-body .qsm_auto_pagination_enabled .qmn_pagination {
        justify-content: flex-start;
        gap: 1.2rem;
    }
}

/* Mobile menu control - the pill from the Figma (46x32, #A2672F, fully rounded).
   Two things have to be undone before the pill can sit right.
   1. Impreza gives the control a negative inline-start margin so a bare icon
      lines up optically with the text below it. Harmless with no background,
      but once the pill lands it hangs 12px outside the header own gutter.
      Rivers Edge cancels the same margin with the same selector shape, which is
      why this one is that long: it has to out-specify Impreza own
      body.header_hor .l-subheader-cell.at_left .w-nav:first-child rule.
   2. Scoped by the cell, not by .type_mobile. That class is written from JS in
      usNav.resize() off the window width, so it is there on a real phone, but it
      arrives late wherever no genuine resize event fires. The control own
      visibility is pure CSS and never waits for it, so neither should this.
   Geometry: icon 24 + 2x11 = 46 wide, 24 + 2x4 = 32 tall. Measured at 393px:
   pill 46x32 at x=16 y=21, icon at 27,25 - Figma says 46x32 at 17,20 with the
   icon at 28,24, so one pixel out, which is the design own rounding. The 16px
   gutter is Theme Options -> Header Horizontal Indents, mobiles state, not here. */
.l-body.header_hor .l-subheader-cell.at_left .w-nav:first-child .w-nav-control {
    margin-inline-start: 0;
    padding: 4px 11px;
    border-radius: 999px;
    background-color: var(--color-content-primary);
}

/* The two icon files are Phosphor List / X exported from the Figma and carry
   fill="currentColor". Impreza renders them through <img>, and an image
   document cannot inherit color from the page, so currentColor resolves to its
   own initial value - black - and the glyph came out black on the brown pill.
   brightness(0) drives every opaque pixel to black, invert(1) flips it to white,
   and alpha is untouched, which is exact for a one-colour glyph. Delete this
   rule the day the two attachments are replaced with white files. */
.l-body .l-header .w-nav .w-nav-control img {
    filter: brightness(0) invert(1);
}

/* Mobile menu items - Figma "Heading XS" 17/24 and the active pill.
   Size and colours are menu element params (mobile_font_size, mobile_colors,
   color_mobile_*); only what has no param is here.
   In the design the list is a flex column with gap 32 and ONLY the active item
   is padded (4 top / 6 bottom), so its pill is 34 tall and the rest are the bare
   24px line. Impreza pads EVERY anchor 10.5px, which both sets the rhythm and
   would make every pill 34 tall - so the padding moves to the active item and
   the rhythm moves to row-gap. inline-flex makes the pill hug the label:
   measured 2026-10-02 at 440px the anchor was 401 wide inside a 380 li. */
/* Mobile panel open - freeze the page behind it. Without this the document
   under the panel keeps scrolling and its content shows through as you drag.
   Same fix as the GPS project, which writes it as
   html:has(.w-nav-control.active) body { overflow: hidden }; here Impreza sets
   html.w-nav-open itself (measured 2026-10-02: <html class="touch w-nav-open">
   while the panel is open), so no :has() is needed. */
html:has(.w-nav-control.active) body.l-body,
html:has(.w-nav-control.active) body.l-body,
html.w-nav-open body.l-body,
html:has(.w-nav-control.active) body.l-body {
    overflow: hidden;
}

.l-body .w-nav.type_mobile .w-nav-list.level_1 { row-gap: 32px; }

/* The li must carry the text line-height too. It inherits 73px from the header
   (--header-height), which was invisible while the anchor was a full-width flex
   box but not once it is inline: measured 2026-10-02, items sat 109px apart
   instead of 56 because each li was a 73px line box. */
.l-body .w-nav.type_mobile .w-nav-list.level_1 > .menu-item {
    line-height: 24px;
}

/* The li must carry the text line-height too. It inherits 73px from the header
   (--header-height), which was invisible while the anchor was a full-width flex
   box but not once it is inline: measured 2026-10-02, items sat 109px apart
   instead of 56 because each li was a 73px line box. */
.l-body .w-nav.type_mobile .w-nav-list.level_1 > .menu-item {
    line-height: 24px;
}

.l-body .w-nav.type_mobile .w-nav-anchor.level_1:not(.w-btn) {
    display: inline-flex;
    margin-inline: 0;
    padding: 0 11px;
    line-height: 24px;
    border-radius: 3px;
}

.l-body .w-nav.type_mobile .current-menu-item > .w-nav-anchor.level_1:not(.w-btn) {
    padding-top: 4px;
    padding-bottom: 6px;
}

/* Mobile menu items - Figma style "Heading XS": 17/24, #445851, and the active
   item as a 3px pill in #C28041 with white text. Size and colours come from the
   menu element params (mobile_font_size, mobile_colors, color_mobile_*); what
   has no param is here.
   The gap is the point: in the design the list is a flex column with gap 32 and
   ONLY the active item is padded (4 top / 6 bottom), so its pill is 34 tall and
   the others are the bare 24px line. Impreza instead pads every anchor 10.5px,
   which both sets the rhythm and would make every pill 34 tall. So the padding
   moves to the active item alone and the rhythm moves to row-gap.
   inline-flex is what makes the pill hug the label - Impreza renders the anchor
   as a full-width flex box (measured 2026-10-02 at 440px: anchor 401 wide in a
   380 li, i.e. negative inline margins), so the pill spanned the whole row. */
.l-body .w-nav.type_mobile .w-nav-list.level_1 {
    row-gap: 32px;
}

.l-body .w-nav.type_mobile .w-nav-anchor.level_1:not(.w-btn) {
    display: inline-flex;
    margin-inline: 0;
    padding: 0 11px;
    line-height: 24px;
    border-radius: 3px;
}

.l-body .w-nav.type_mobile .current-menu-item > .w-nav-anchor.level_1:not(.w-btn) {
    padding-top: 4px;
    padding-bottom: 6px;
}

/* Mobile menu items - Figma style "Heading XS": 17/24, #445851, and the active
   item as a 3px pill in #C28041 with white text. Size and all four colours come
   from the menu element params (mobile_font_size, mobile_colors and the
   color_mobile_* group); what has no param is here.
   The gap is the point: in the design the list is a flex column with gap 32 and
   ONLY the active item is padded (4 top / 6 bottom), so its pill is 34 tall
   while the others are the bare 24px line. Impreza instead pads every anchor
   10.5px, which both sets the rhythm and would make every pill 34 tall. So the
   padding moves to the active item alone and the rhythm moves to row-gap.
   inline-flex is what makes the pill hug the label - Impreza renders the anchor
   as a full-width flex box (measured 2026-10-02 at 440px: anchor 401 wide
   inside a 380 li, i.e. with negative inline margins), so the pill spanned the
   whole row. */
.l-body .w-nav.type_mobile .w-nav-list.level_1 {
    row-gap: 32px;
}

.l-body .w-nav.type_mobile .w-nav-anchor.level_1:not(.w-btn) {
    display: inline-flex;
    margin-inline: 0;
    padding: 0 11px;
    line-height: 24px;
    border-radius: 3px;
}

.l-body .w-nav.type_mobile .current-menu-item > .w-nav-anchor.level_1:not(.w-btn) {
    padding-top: 4px;
    padding-bottom: 6px;
}

/* Mobile menu intro - reusable block 11030 at the head of the panel (Ruttl
   NtkQ, Figma 368:133): the eyebrow, a 15/21 lede and the Travis video card,
   then the menu. The card is the hero's .video-card re-dressed to the frame:
   white instead of the page ground, 10 inside on every side, as wide as the
   lede column. The li's 48 plus the list's 32 row-gap put the first item 80
   under the card, as drawn. Measured by injection 2026-10-05 at 390:
   eyebrow -> lede 8, lede -> card 40, card 330x77. */
.l-body .mobile-nav-block .wpb_wrapper > .w-text:first-child {
    margin-bottom: var(--space-2xs);
}

.l-body .mobile-nav-block .wpb_text_column.mobile-nav-lede {
    max-width: 350px;
    margin: 0 auto var(--space-lg);
    font-size: 1rem;
    line-height: 1.4;
}

.l-body .mobile-nav-block .w-hwrapper.video-card {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
    padding: 10px;
    background: var(--color-content-bg-alt);
    text-align: start;
}

.l-body .w-nav.type_mobile .w-nav-list.level_1 > .mobile-nav-reusable-block:has(.mobile-nav-block) {
    margin-bottom: 48px;
}

/* ==========================================================================
   DROPDOWN PANELS - shared shape
   Square where the panel meets the header, rounded at the bottom.
   Measured 2026-10-02: Impreza's own rule is
   border-radius: var(--dropdown-border-radius, 0px) and resolves to 0, because
   no Dropdown Border Radius is set on header 9437 - so there is nothing to
   out-specify here, and the mega panel's former 16px is replaced by this.
   The background already computed to #FBF5F1; pinning it to the palette token
   keeps the panel from drifting away from the content ground.
   ========================================================================== */
.l-body .w-nav.type_desktop .w-nav-list.level_2 {
    border-radius: 0 0 6px 6px;
    background: var(--color-content-bg);
}

/* 2px of air between the bottom subheader and the panel, ONLY while the header
   is at its full height; once it collapses to .sticky the panel sits flush
   against the bar. The panels are position: absolute with top: 50px - the
   level_1 anchor's own min-height - so a margin moves them without restating
   that number and without fighting the theme for it. */
.l-body .l-header:not(.sticky) .w-nav.type_desktop .w-nav-list.level_2 {
    margin-top: 2px;
}

/* The 2px gap is a hover trap, so the panel has to reach back across it.
   Measured 2026-10-02: elementFromPoint one pixel below a level_1 item returned
   page content, not the item, so the pointer leaves both the item and the panel
   on its way down and the dropdown closes under the cursor.
   The bridge belongs on the PANEL, not on the item: it only has to work while
   the panel is already open, which is exactly when it is not collapsed, and
   sitting inside the panel keeps it in the panel's own stacking context. An
   earlier attempt put it on the item instead and hit-tested as absent - the
   strip never reached past the header's box.
   Bound to the same :not(.sticky) as the gap: once the header collapses the
   panel is flush against the bar and there is nothing to bridge.
   Pattern lifted from the Rivers Edge header, where the same strip is 25px. */
.l-body .l-header:not(.sticky) .w-nav.type_desktop .w-nav-list.level_2::before {
    content: "";
    position: absolute;
    top: -8px;          /* 2px of gap + 6px back up into the item, so a fast
                           pointer cannot skip the strip between frames */
    left: 0;
    right: 0;
    height: 8px;
    pointer-events: auto;
}

/* Service pages, the checklist panel - Figma "Anxiety" 458:161, Frame 21.
   Measured in the design 2026-10-02, inside the panel's own 60px inset:
     heading 273 | gap 100 | body 687        (273 + 100 + 687 = 1060)

   The grid gives md-4 / md-8 boxes of 353.33 / 706.67, each carrying 10px of
   gutter padding, which renders 333 | 20 | 687 - the body column already exact,
   the gap 80px short. Both numbers land by MOVING that gutter padding rather
   than cancelling it: the heading gives up its left pad and takes the missing
   80 on the right, the body takes the whole gap on its left and gives up its
   right pad, so it ends flush with the panel's 60px inset.

   Scoped to this row, because the section holds a second md-4 / md-8 pair below
   the panel that must keep the normal gutter. At (0,6,0) it clears Impreza's
   own gutter rule, which is (0,4,1) - class count is compared first. */
@media (min-width: 1280px) {

    .l-body .service-top-section .g-cols.alt-bg-box > .vc_col-md-4 > .vc_column-inner {
        padding-left: 0;
        padding-right: 80px;
    }

    .l-body .service-top-section .g-cols.alt-bg-box > .vc_col-md-8 > .vc_column-inner {
        padding-left: 20px;
        padding-right: 0;
    }
}