/* =================================================================
   TOC — Place cursor after item and press Ctrl+F to jump to section.
   =================================================================
   :root Variables
     - Colors
     - Buttons
     - Fonts
     - Headings / Text
     - Widths / Sections / Container
     - Gap
     - Design Tokens (Spacing, Radius, Shadow)
     - Z-Index Scale
     - Flex / Grid / Align
     - Images
   @font-face
   Global Reset
   Sections / Container
   Flex / Grid Layout
   Padding / Gap
   Background Colors
   Shadows
   Images / Icon / Background Image
   Text / Body / Headings
   GSAP Animations
   Overlay
   Header / Logo
   Desktop Nav + Sub Menu
   Mobile Nav + Sub Menu
   Mobile Trigger
   Search Component
   Links / Buttons
   Forms
   Back to Top
   Footer
   Screen Reader Utilities
   Socials / Social Share
   Search Results Grid
   404 Page
   Dev Page
   Media Queries
   Blueprint Block Styles (header/footer bars, team, FAQ, blog,
     locations, cards, CTA banner, process steps, feature items, etc.)
   ================================================================= */
/* Global Variables */
:root {
    /* Colors - Don't forget to add the hsl to the theme.json
       Blueprint ships a NEUTRAL slate placeholder palette. Replace the HSL
       values per client (keep the role of each slot):
         1 = primary (headings, nav, dark sections)   2 = CTA / accent
         3 = secondary accent                          4 = CTA hover
         5 = secondary accent hover                    6 = light background
         7 = border                                    8 = secondary background
         9 = muted text                                            */
    /* [placeholder] Primary — dark slate */
    --dm-bc-1: hsl(215, 15%, 25%);
    --dm-bc-1-hs: 215, 15%;
    --dm-bc-1-l: 25%;
    --dm-bc-1-a: 1;
    --dm-brand-color-1: hsl(var(--dm-bc-1-hs),var(--dm-bc-1-l),var(--dm-bc-1-a));
    /* [placeholder] CTA / accent — mid slate (buttons, links, active states) */
    --dm-bc-2: hsl(215, 15%, 45%);
    --dm-bc-2-hs: 215, 15%;
    --dm-bc-2-l: 45%;
    --dm-bc-2-a: 1;
    --dm-brand-color-2: hsl(var(--dm-bc-2-hs),var(--dm-bc-2-l),var(--dm-bc-2-a));
    /* [placeholder] Secondary accent — light slate */
    --dm-bc-3: hsl(215, 10%, 60%);
    --dm-bc-3-hs: 215, 10%;
    --dm-bc-3-l: 60%;
    --dm-bc-3-a: 1;
    --dm-brand-color-3: hsl(var(--dm-bc-3-hs),var(--dm-bc-3-l),var(--dm-bc-3-a));
    /* [placeholder] CTA hover — darker slate */
    --dm-bc-4: hsl(215, 15%, 35%);
    --dm-bc-4-hs: 215, 15%;
    --dm-bc-4-l: 35%;
    --dm-bc-4-a: 1;
    --dm-brand-color-4: hsl(var(--dm-bc-4-hs),var(--dm-bc-4-l),var(--dm-bc-4-a));
    /* [placeholder] Secondary accent hover — darker light slate */
    --dm-bc-5: hsl(215, 10%, 50%);
    --dm-bc-5-hs: 215, 10%;
    --dm-bc-5-l: 50%;
    --dm-bc-5-a: 1;
    --dm-brand-color-5: hsl(var(--dm-bc-5-hs),var(--dm-bc-5-l),var(--dm-bc-5-a));
    /* [placeholder] Light background — near-white */
    --dm-bc-6: hsl(0, 0%, 98%);
    --dm-bc-6-hs: 0, 0%;
    --dm-bc-6-l: 98%;
    --dm-bc-6-a: 1;
    --dm-brand-color-6: hsl(var(--dm-bc-6-hs),var(--dm-bc-6-l),var(--dm-bc-6-a));
    /* [placeholder] Border — light gray */
    --dm-bc-7: hsl(215, 15%, 90%);
    --dm-bc-7-hs: 215, 15%;
    --dm-bc-7-l: 90%;
    --dm-bc-7-a: 1;
    --dm-brand-color-7: hsl(var(--dm-bc-7-hs),var(--dm-bc-7-l),var(--dm-bc-7-a));
    /* [placeholder] Secondary background — near-white gray */
    --dm-bc-8: hsl(215, 15%, 96%);
    --dm-bc-8-hs: 215, 15%;
    --dm-bc-8-l: 96%;
    --dm-bc-8-a: 1;
    --dm-brand-color-8: hsl(var(--dm-bc-8-hs),var(--dm-bc-8-l),var(--dm-bc-8-a));
    /* [placeholder] Muted text — medium gray */
    --dm-bc-9: hsl(215, 10%, 45%);
    --dm-bc-9-hs: 215, 10%;
    --dm-bc-9-l: 45%;
    --dm-bc-9-a: 1;
    --dm-brand-color-9: hsl(var(--dm-bc-9-hs),var(--dm-bc-9-l),var(--dm-bc-9-a));
    /* [placeholder] Body text — near-black slate */
    --dm-body-color: hsl(215, 15%, 15%);
    --dm-white-base: 0, 0%, 100%;
    --dm-white: hsl(var(--dm-white-base));
    --dm-black-color: hsl(0, 0%, 0%);
    --dm-black-hs: 0, 0%;
    --dm-black-l: 0%;
    --dm-black: hsl(var(--dm-black-hs), var(--dm-black-l));

    /* Buttons */
    --dm-button-color: var(--dm-brand-color-2);
    --dm-button-text-color: hsl(0, 0%, 100%);
    --dm-button-padding: 10px 30px;
    --dm-button-border-radius: 0.8rem;

    /* Fonts — neutral system stacks; per-client fonts go in css/style.css
       (override these variables and add @font-face there) */
    --dm-font-family-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --dm-font-family-heading: Georgia, 'Times New Roman', serif;

    /* Headings — fluid clamp scale (320–1440px viewport range) */
    --dm-h1: clamp(4.2rem, calc(4.2rem + ((1vw - 0.32rem) * 1.6071)), 6rem);
    --dm-h2: clamp(3.6rem, calc(3.6rem + ((1vw - 0.32rem) * 1.25)), 5rem);
    --dm-h3: clamp(3rem, calc(3rem + ((1vw - 0.32rem) * 0.8929)), 4rem);
    --dm-h4: clamp(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 0.7143)), 3.2rem);
    --dm-h5: clamp(2.0rem, calc(2.0rem + ((1vw - 0.32rem) * 0.5357)), 2.6rem);
    --dm-h6: 1.8rem;

    /* Text — fluid body text scale (320–1440px viewport range) */
    --dm-body-s: clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.17857142857142858)), 1.6rem);
    --dm-body: clamp(1.6rem, calc(1.6rem + ((1vw - 0.32rem) * 0.1786)), 1.8rem);
    --dm-body-m: clamp(1.8rem, calc(1.8rem + ((1vw - 0.32rem) * 0.3571)), 2.2rem);
    --dm-body-l: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 0.5357)), 2.6rem);
    --dm-ch: 66ch;

    /* Fonts - Moose Text */
    --dm-font-family: inherit;
    --dm-text-color: inherit;
    --dm-font-size: inherit;
    --dm-text-align: inherit;
    --dm-text-align-responsive: var(--dm-text-align);
    --dm-font-weight: inherit;
    --dm-text-transform: inherit;
    --dm-line-height: inherit;

    /* Widths */
    --dm-width: inherit;
    --dm-height: inherit;
    --dm-max-width: inherit;

    /* Sections */
    --dm-sec-pad-inline: clamp(20px, calc(20px + ((1vw - 3.2px) * 2.6786)), 50px);
    --dm-sec-pad-block: clamp(50px, calc(50px + ((1vw - 3.2px) * 4.4643)), 100px);

    /* Container — blueprint default; override per client in css/style.css */
    --dm-container-width: 1440px;

    /* Header logo cap — height-based so wordmark/seal/crest logo shapes
       all fit the bar; sticky state shrinks it. Override per client in
       css/style.css. */
    --dm-logo-h: 4.8rem;
    --dm-logo-h-sticky: 4rem;

    /* Real rendered header height, kept live by js/global.js
       (ResizeObserver on .dm-header) through the sticky shrink
       transition. This value is only the no-JS fallback: approximate
       full header (topbar + main bar). */
    --dm-header-h: 10rem;

    /* Gap */
    --dm-section-gap: 4rem;
    --dm-container-gap: 3rem;
    --dm-content-gap: 2rem;
    --dm-grid-gap: 4rem;
    /* Base gap/padding units — referenced by theme.json spacing presets
       (Base Spacing / Base Padding and their x2–x5 multiples) */
    --dm-gap: 1.6rem;
    --dm-padding: 2rem;

    /* ── Design Tokens ── */

    /* Spacing scale (based on 0.4rem / 4px unit at 62.5% root font size) */
    --dm-space-0: 0;
    --dm-space-xs: 0.4rem;   /* 4px */
    --dm-space-sm: 0.8rem;   /* 8px */
    --dm-space-md: 1.6rem;   /* 16px */
    --dm-space-lg: 2.4rem;   /* 24px */
    --dm-space-xl: 3.2rem;   /* 32px */
    --dm-space-2xl: 4.8rem;  /* 48px */
    --dm-space-3xl: 6.4rem;  /* 64px */

    /* Border radius scale */
    --dm-radius-none: 0;
    --dm-radius-sm: 0.4rem;  /* 4px */
    --dm-radius-md: 1rem;    /* 10px */
    --dm-radius-lg: 2rem;    /* 20px */
    --dm-radius-xl: 3rem;    /* 30px */
    --dm-radius-full: 9999px;

    /* Shadow scale */
    --dm-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --dm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Z-index scale — centralised stacking order for fixed/overlay elements */
    --dm-z-fixed: 100;
    --dm-z-overlay: 200;
    --dm-z-control: 300;

    /* Flex Direction */
    --dm-flex-direction: column;
    --dm-flex-direction-tab-m: var(--dm-flex-direction);
    --dm-flex-direction-tab-l: var(--dm-flex-direction);
    --dm-flex-direction-desktop: var(--dm-flex-direction);

    /* Flex Wrap */
    --dm-flex-wrap: nowrap;
    --dm-flex-wrap-tab-m: var(--dm-flex-wrap);
    --dm-flex-wrap-tab-l: var(--dm-flex-wrap);
    --dm-flex-wrap-desktop: var(--dm-flex-wrap);

    /* Grids - Grid Template Columns */
    --dm-grid-columns: 1;
    --dm-grid-columns-tab-m: var(--dm-grid-columns);
    --dm-grid-columns-tab-l: var(--dm-grid-columns);
    --dm-grid-columns-desktop: var(--dm-grid-columns);
    --dm-grid-min: 0;
    --dm-grid-min-tab-m: var(--dm-grid-min);
    --dm-grid-min-tab-l: var(--dm-grid-min);
    --dm-grid-min-desktop: var(--dm-grid-min);

    /* Grids - Grid Item */
    --dm-grid-item-row: auto/auto;
    --dm-grid-item-row-tab-m: var(--dm-grid-item-row);
    --dm-grid-item-row-tab-l: var(--dm-grid-item-row);
    --dm-grid-item-row-desktop: var(--dm-grid-item-row);
    --dm-grid-item-column: auto/auto;
    --dm-grid-item-column-tab-m: var(--dm-grid-item-column);
    --dm-grid-item-column-tab-l: var(--dm-grid-item-column);
    --dm-grid-item-column-desktop: var(--dm-grid-item-column);

    /* Align Items — flex only (grid uses --dm-grid-align-items to avoid cascade bleed) */
    --dm-align-items: stretch;
    --dm-align-items-tab-m: var(--dm-align-items);
    --dm-align-items-tab-l: var(--dm-align-items);
    --dm-align-items-desktop: var(--dm-align-items);

    /* Grid alignment — isolated from flex to prevent inheritance cascade */
    --dm-grid-align-items: stretch;
    --dm-grid-align-items-tab-m: var(--dm-grid-align-items);
    --dm-grid-align-items-tab-l: var(--dm-grid-align-items);
    --dm-grid-align-items-desktop: var(--dm-grid-align-items);
    --dm-grid-justify-items: stretch;
    --dm-grid-justify-items-tab-m: var(--dm-grid-justify-items);
    --dm-grid-justify-items-tab-l: var(--dm-grid-justify-items);
    --dm-grid-justify-items-desktop: var(--dm-grid-justify-items);
    --dm-grid-justify-content: start;
    --dm-grid-justify-content-tab-m: var(--dm-grid-justify-content);
    --dm-grid-justify-content-tab-l: var(--dm-grid-justify-content);
    --dm-grid-justify-content-desktop: var(--dm-grid-justify-content);
    --dm-grid-align-content: stretch;
    --dm-grid-align-content-tab-m: var(--dm-grid-align-content);
    --dm-grid-align-content-tab-l: var(--dm-grid-align-content);
    --dm-grid-align-content-desktop: var(--dm-grid-align-content);

    /* Justify Content */
    --dm-justify-content: flex-start;
    --dm-justify-content-tab-m: var(--dm-justify-content);
    --dm-justify-content-tab-l: var(--dm-justify-content);
    --dm-justify-content-desktop: var(--dm-justify-content);

    /* Align Content */
    --dm-align-content: stretch;
    --dm-align-content-tab-m: var(--dm-align-content);
    --dm-align-content-tab-l: var(--dm-align-content);
    --dm-align-content-desktop: var(--dm-align-content);

    /* Images */
    --dm-object-fit: fill;
    --dm-aspect-ratio: inherit;
}

/* Fonts Face
   The blueprint uses system font stacks and ships no @font-face rules.
   Per-client webfonts: upload the .woff2 files to the Media Library, add
   @font-face rules in css/style.css, and override the --dm-font-family-*
   variables there. */

/* Global Reset */
*,
::after,
::before,
html {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

blockquote,
dd,
dl,
figure {
    margin: 0;
}

ol[role=list],
ul[role=list] {
    list-style: none;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

figure,
img,
picture {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
[role="button"] {
    cursor: pointer;
}

@media (prefers-reduced-motion:reduce){
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    ::after,
    ::before {
        animation-duration: 0s!important;
        animation-iteration-count: 1!important;
        transition-duration: 0s!important;
        scroll-behavior: auto!important;
    }
}

/* Sections — block (vertical) padding only; inline handled by .dm-container */
.dm-section {
    padding-block: var(--dm-sec-pad-block);
}

/* Container — inline (horizontal) padding ensures edge safety on all viewports.
   max-width compensates for padding so content area stays at --dm-container-width. */
.dm-container {
    width: 100%;
    max-width: calc(var(--dm-container-width) + 2 * var(--dm-sec-pad-inline));
    margin-inline: auto;
    padding-inline: var(--dm-sec-pad-inline);
    flex-grow: 1;
}

/* Flex Layout */
.dm-flex {
    display: flex;
    flex-direction: var(--dm-flex-direction);
    align-items: var(--dm-align-items);
    justify-content: var(--dm-justify-content);
    flex-wrap: var(--dm-flex-wrap);
    align-content: var(--dm-align-content);
}

/* Link Wrapper — resets anchor styling so child content controls its own appearance */
.dm-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.dm-link:hover,
.dm-link:focus-visible {
    text-decoration: none;
    color: inherit;
}

/* Editor indicator — dashed outline so editors can see the link wrapper boundary */
.dm-link--editor {
    outline: 2px dashed var(--dm-brand-color-1, #7b61ff);
    outline-offset: 2px;
}

/* Grids — uses --dm-grid-* variables (not shared --dm-*) to prevent cascade from flex parents */
.dm-grid {
    --dm-grid-template-columns: repeat(var(--dm-grid-columns), minmax(var(--dm-grid-min), 1fr));
    display: grid;
    grid-template-columns: var(--dm-grid-template-columns);
    align-items: var(--dm-grid-align-items);
    justify-items: var(--dm-grid-justify-items);
    justify-content: var(--dm-grid-justify-content);
    align-content: var(--dm-grid-align-content);
}

.dm-grid-reverse-tab-m > :first-child {
    order: 2;
}

.dm-grid-reverse-tab-l > :first-child {
    order: 2;
}

.dm-grid-reverse-desktop > :first-child {
    order: 2;
}

.dm-grid-item {
    grid-row: var(--dm-grid-item-row);
    grid-column: var(--dm-grid-item-column);
}

/* Padding */
.dm-padding {
    --dm-pad-t-calc: 2rem;
    --dm-pad-r-calc: 2rem;
    --dm-pad-b-calc: 2rem;
    --dm-pad-l-calc: 2rem;
    padding: calc(var(--dm-pad-t-calc)) calc(var(--dm-pad-r-calc)) calc(var(--dm-pad-b-calc)) calc(var(--dm-pad-l-calc));
}

.dm-section-padding {
    --dm-pad-t-calc: var(--dm-sec-pad-block);
    --dm-pad-r-calc: var(--dm-sec-pad-inline);
    --dm-pad-b-calc: var(--dm-sec-pad-block);
    --dm-pad-l-calc: var(--dm-sec-pad-inline);
    padding: calc(var(--dm-pad-t-calc)) calc(var(--dm-pad-r-calc)) calc(var(--dm-pad-b-calc)) calc(var(--dm-pad-l-calc));
}

/* Gap */
.dm-gap {
    --dm-gap-value: inherit;
    gap: calc(var(--dm-gap-value));
}

/* Background Colors — each class sets --dm-bc-l as an intermediary so the section
   lightness override (--dm-bc-l: 30%) works. Alpha via --dm-bc-*-a is also respected. */
.dm-background-color-1 {
    --dm-bc-l: var(--dm-bc-1-l);
    background-color: hsla(var(--dm-bc-1-hs), var(--dm-bc-l), var(--dm-bc-1-a, 1));
}

.dm-background-color-2 {
    --dm-bc-l: var(--dm-bc-2-l);
    background-color: hsla(var(--dm-bc-2-hs), var(--dm-bc-l), var(--dm-bc-2-a, 1));
}

.dm-background-color-3 {
    --dm-bc-l: var(--dm-bc-3-l);
    background-color: hsla(var(--dm-bc-3-hs), var(--dm-bc-l), var(--dm-bc-3-a, 1));
}

.dm-background-color-4 {
    --dm-bc-l: var(--dm-bc-4-l);
    background-color: hsla(var(--dm-bc-4-hs), var(--dm-bc-l), var(--dm-bc-4-a, 1));
}

.dm-background-color-5 {
    --dm-bc-l: var(--dm-bc-5-l);
    background-color: hsla(var(--dm-bc-5-hs), var(--dm-bc-l), var(--dm-bc-5-a, 1));
}

.dm-background-color-6 {
    --dm-bc-l: var(--dm-bc-6-l);
    background-color: hsla(var(--dm-bc-6-hs), var(--dm-bc-l), var(--dm-bc-6-a, 1));
}

.dm-background-color-7 {
    --dm-bc-l: var(--dm-bc-7-l);
    background-color: hsla(var(--dm-bc-7-hs), var(--dm-bc-l), var(--dm-bc-7-a, 1));
}

.dm-background-color-8 {
    --dm-bc-l: var(--dm-bc-8-l);
    background-color: hsla(var(--dm-bc-8-hs), var(--dm-bc-l), var(--dm-bc-8-a, 1));
}

.dm-background-color-9 {
    --dm-bc-l: var(--dm-bc-9-l);
    background-color: hsla(var(--dm-bc-9-hs), var(--dm-bc-l), var(--dm-bc-9-a, 1));
}

.dm-background-color-black {
    --dm-bc-l: var(--dm-black-l);
    background-color: hsla(var(--dm-black-hs), var(--dm-bc-l), 1);
}

/* Tint backgrounds — brand color at low opacity, inherits HS/L updates.
   Use for subtle section backgrounds (e.g. accent-tinted, secondary-tinted). */
.dm-background-color-1-tint {
    background-color: hsla(var(--dm-bc-1-hs), var(--dm-bc-1-l), 0.05);
}

.dm-background-color-2-tint {
    background-color: hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.05);
}

.dm-background-color-3-tint {
    background-color: hsla(var(--dm-bc-3-hs), var(--dm-bc-3-l), 0.05);
}

.dm-background-color-8-tint {
    background-color: hsla(var(--dm-bc-8-hs), var(--dm-bc-8-l), 0.3);
}

.dm-background-color-9-tint {
    background-color: hsla(var(--dm-bc-9-hs), var(--dm-bc-9-l), 0.05);
}

/* Shadows — utility classes reference the --dm-shadow-* token variables */
.dm-shadow-1 {
    box-shadow: var(--dm-shadow-sm);
}

.dm-shadow-2 {
    box-shadow: var(--dm-shadow-md);
}

.dm-shadow-3 {
    box-shadow: var(--dm-shadow-lg);
}

.dm-shadow-4 {
    box-shadow: var(--dm-shadow-xl);
}

/* Images */
.dm-image {
    width: var(--dm-width);
    height: var(--dm-height);
    object-fit: var(--dm-object-fit);
}

/* Only declare aspect-ratio when the block sets one. An unconditional
   `aspect-ratio: var(--dm-aspect-ratio)` resolves to `auto` and overrides
   the width/height attribute ratio; combined with WordPress' lazy-load
   `sizes="auto"` that makes ratio-less images render 1500px tall. */
.dm-image[style*="--dm-aspect-ratio"] {
    aspect-ratio: var(--dm-aspect-ratio);
}

/* Icon block — SVG/image icon with configurable size and color */
.dm-icon {
    --dm-icon-size: 4.8rem;
    --dm-icon-color: currentColor;

    display: inline-flex;
    line-height: 0;
}

.dm-icon__img,
.dm-icon__svg {
    width: var(--dm-icon-size);
    height: var(--dm-icon-size);
    object-fit: contain;
}

/* SVG color: fill inherits from --dm-icon-color */
.dm-icon__svg,
.dm-icon__svg path,
.dm-icon__svg circle,
.dm-icon__svg rect,
.dm-icon__svg polygon {
    fill: var(--dm-icon-color);
}

/* Empty state (editor placeholder) */
.dm-icon--empty {
    border: 2px dashed #ccc;
    border-radius: 4px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-bg-img {
    position: absolute!important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%!important;
    object-fit: cover;
    object-position: 50% 50%;
}

/* Text */
.dm-text {
    font-family: var(--dm-font-family);
    color: var(--dm-text-color);
    font-size: var(--dm-font-size);
    text-align: var(--dm-text-align);
    font-weight: var(--dm-font-weight);
    text-transform: var(--dm-text-transform);
    max-width: var(--dm-max-width);
    line-height: var(--dm-line-height);
    /* Set via block attribute "CSS order" (--dm-css-order); omitted when unset so source order applies. */
    order: var(--dm-css-order);
}

/* Body */
body {
    display: flex;
    flex-direction: column;
    font-family: var(--dm-font-family-body);
    font-size: var(--dm-body);
    font-weight: 400;
    line-height: 1.4;
    color: var(--dm-body-color);
    text-rendering: optimizeSpeed;
    min-height: 100vh;
}

/* Main */
main {
    margin-top: 0;
    flex-grow: 1;
}

/* Anchored content lands below the fixed header (and the sticky section
   nav when one is present) — covers native block HTML anchors, direct
   #hash URLs, section-nav clicks, and find-in-page. Scoped to IDs
   inside main so header/footer internals are unaffected; main itself
   (#skip-content) is excluded and already compensated by the body
   padding the header sets. */
main [id] {
    scroll-margin-top: calc(var(--dm-header-h, 10rem) + var(--dm-section-nav-h, 0px) + 1.6rem);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    --dm-font-family: var(--dm-font-family-heading);
    --dm-font-weight: 700;
    --dm-text-color: var(--dm-brand-color-1);
    --dm-line-height: 1.2;
    line-height: var(--dm-line-height);
    font-family: var(--dm-font-family);
    font-weight: var(--dm-font-weight);
    color: var(--dm-text-color);
}

h1 {
    --dm-font-size: var(--dm-h1);
    font-size: var(--dm-font-size);
}

h2 {
    --dm-font-size: var(--dm-h2);
    font-size: var(--dm-font-size);
}

h3 {
    --dm-font-size: var(--dm-h3);
    font-size: var(--dm-font-size);
}

h4 {
    --dm-font-size: var(--dm-h4);
    font-size: var(--dm-font-size);
}

h5 {
    --dm-font-size: var(--dm-h5);
    font-size: var(--dm-font-size);
}

h6 {
    --dm-font-size: var(--dm-h6);
    font-size: var(--dm-font-size);
}

:is(.dm-section, .dm-header, .dm-footer) :is(p, h1, h2, h3, h4, h5, h6) {
    margin: 0;
}

/* GSAP Animations — initial states animated by global.js */
.fade-up {
    opacity: 0;
    transform: translateY(50px);

    /* Starts 50px below its normal position; adjust as needed */
}

.blur-in {
    opacity: 0;
    transform: scale(1.4);
    filter: blur(10px);
}

/* Reduced motion: reveal GSAP-animated elements in their final state so they
   never stay stuck at opacity:0 when the entrance animation is skipped. */
@media (prefers-reduced-motion: reduce) {
    .fade-up,
    .blur-in {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* Overlay — gradient overlay positioned absolutely over parent */
.overlay {
    position: absolute!important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to var(--bi-angle), hsla(var(--bi-color-1), var(--bi-color-1-a)) 0%, hsla(var(--bi-color-2), var(--bi-color-2-a)) 100%);
}

/* Header — inline padding handled by .dm-container inside */
.dm-header {
    padding-block: 2rem;
    transition: background-color 0.6s ease, box-shadow 0.6s ease;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--dm-z-fixed);
}

.dm-header .dm-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.dm-header .dm-header__main-inner {
    min-height: 72px;
}

.dm-header.sticky {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    background-color: hsl(0, 0%, 100%);
}

/* Logo — HEIGHT-based sizing so all logo shapes work: a wide wordmark,
   a square seal, and a tall crest all scale to the header bar height
   instead of a forced container width (which made square/tall SVGs
   render container-width TALL). Tokens are per-client overridable in
   css/style.css. */
.dm-header-logo {
    display: flex;
    align-items: center;
}

.dm-header.sticky .dm-header-logo img {
    height: var(--dm-logo-h-sticky, 4rem);
}

/* Admin-only hint shown in the nav when no menu is assigned to the
   Primary location (regular visitors see an empty nav instead) */
.dm-header__menu-hint {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--dm-brand-color-9);
    padding: 0.4rem 0.8rem;
    border: 1px dashed var(--dm-brand-color-7);
    border-radius: 4px;
    white-space: nowrap;
}

/* The image renders at the bar height (explicit height, not max-height:
   an SVG with no intrinsic size collapses to 0 under pure max
   constraints, and rendered huge under a forced width). object-fit +
   the width cap keep extreme aspect ratios contained without
   distortion: square seals and tall crests fill the bar height, wide
   wordmarks letterbox inside the 24rem cap. The sticky shrink
   transitions the height. */
.dm-header-logo img {
    display: block;
    height: var(--dm-logo-h, 4.8rem);
    width: auto;
    max-width: min(100%, 24rem);
    object-fit: contain;
    transition: height 0.6s ease;
}

/* Main Menu */
nav.main-nav {
    display: none;
}

.main-nav li {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--dm-body-color);
    font-size: 1.8rem;
}

.main-nav .menu {
    display: flex;
    list-style-type: none;
    padding-left: 0px;
    margin: 0px;
}

.main-nav .menu :is(a, span) {
    padding: 10px 20px;
    text-decoration: none;
    color: var(--dm-body-color);
}

.main-nav .menu a:hover {
    color: var(--dm-body-color);
}

.main-nav .menu-item button {
    position: absolute;
    right: -10px;
    top: 12px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    transform: rotate(45deg);
}

.main-nav .menu-item button:after {
    display: block;
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--dm-body-color);
    border-bottom: 1px solid var(--dm-body-color);
    transition: 0.6s;
}

.main-nav .menu-item button.open:after {
    transform: rotate(180deg);
}

.main-nav .menu-item:hover > button:after {
    transform: rotate(180deg);
}

/* MAIN NAV SUB MENU */
.main-nav li .sub-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    width: max-content;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transform: translate(0px, 0px);
    opacity: 1;
    transition: all 0.6s;
}

.main-nav li .sub-menu button {
    right: 6px;
}

/* Ensure the hidden attribute wins over display:flex when the
   Interactivity API hides a submenu (UA display:none is too weak) */
.main-nav li .sub-menu[hidden],
.main-nav-mobile li .sub-menu[hidden] {
    display: none;
}

.main-nav li ul.open {
    transform: translate(0px, 50px);
    opacity: 0;
}

.main-nav li .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

/* MAIN NAV SUB MENU LI */
.main-nav li .sub-menu li {
    font-size: 1.8rem;
    color: var(--dm-body-color);
}

/* MAIN NAV SUB MENU LI A */
.main-nav li .sub-menu li a {
    color: var(--dm-body-color);
}

.main-nav li .sub-menu li a:hover {
    color: var(--dm-body-color);
}

/* MEGA PANEL — opt-in via the "dm-mega" class on a top-level menu item
   (see Moose_Menu_Walker). Intro column + link columns; the inner <ul>
   keeps .sub-menu for store/toggle behavior, so its absolute-dropdown
   defaults are overridden here. */
.main-nav li .dm-mega-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: minmax(22rem, 28rem) 1fr;
    gap: 3.2rem;
    width: min(72rem, calc(100vw - 2 * var(--dm-sec-pad-inline)));
    padding: 3.2rem;
    background-color: var(--dm-white);
    border: 1px solid var(--dm-brand-color-7);
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 32px;
}

.main-nav li .dm-mega-panel[hidden] {
    display: none;
}

.dm-mega-panel__title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--dm-brand-color-1);
    margin: 0 0 0.8rem;
}

.dm-mega-panel__desc {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--dm-brand-color-9);
    margin: 0 0 1.6rem;
}

.dm-mega-panel__cta {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--dm-brand-color-2);
    text-decoration: none;
}

.dm-mega-panel__cta:hover {
    color: var(--dm-brand-color-4);
}

/* Links area — static grid inside the panel, overriding the absolute
   dropdown defaults that .sub-menu carries */
.main-nav li .dm-mega-panel__links {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 2.4rem;
    width: auto;
    transform: none;
    transition: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Single column when the parent has 4 or fewer children */
.main-nav li .dm-mega-panel__links--single {
    grid-template-columns: 1fr;
}

/* MOBILE--------------------- */
.mobile-menu {
    display: flex;
}

/* MOBILE MAIN NAV MENU WRAPPER */
.mobile-menu__background {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: var(--dm-z-overlay);
    height: 100%;
    top: 111px;
    left: 0;
}

.mobile-menu__panel {
    background-color: var(--dm-white);
    position: fixed;
    top: 112px;
    bottom: 0;
    right: 0;
    width: 100%;
    padding:4rem 1.6rem 2rem;
    z-index: var(--dm-z-overlay);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-menu__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: none;
    padding: 0.5rem;
    border-radius: 4px;
    color: var(--dm-black);
    border: 1px solid var(--dm-black);
    background-color: rgba(0, 0, 0, 0);
    z-index: var(--dm-z-overlay);
}

/* Mobile nav container — flex-grow pushes footer + CTA to bottom */
.main-nav-mobile {
    flex: 1;
}

/* MOBILE MAIN NAV UL */
.main-nav-mobile ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* MOBILE MAIN NAV LI */
.main-nav-mobile li {
    font-size: var(--dm-body-m);
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Parent items: row layout so link + chevron toggle sit side by side */
.main-nav-mobile .menu-item-has-children {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

/* MOBILE MAIN NAV LI A */
.main-nav-mobile li a {
    display: flex;
    align-items: center;
    padding: 1.2rem 1.6rem;
    color: var(--dm-brand-color-1);
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.8rem;
    transition: color 0.2s, background-color 0.2s;
    width: 100%;
}

/* Parent links share row with toggle — round left side only */
.main-nav-mobile .menu-item-has-children > a {
    flex: 1;
    border-radius: 0.8rem 0 0 0.8rem;
}

.main-nav-mobile li a:hover {
    color: var(--dm-brand-color-2);
    background-color: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.05);
}

/* Active / current page highlight */
.main-nav-mobile li.current-menu-item > a,
.main-nav-mobile li.current-menu-ancestor > a {
    color: var(--dm-brand-color-2);
    background-color: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.05);
}

/* Hide desktop dropdown arrow pseudo-element on mobile */
.main-nav-mobile .menu-item-has-children > a::after {
    display: none;
}

/* Submenu toggle chevron — in-flow beside the parent link */
.main-nav-mobile .menu-item-has-children > .submenu-toggle {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 1.2rem 1.4rem;
    cursor: pointer;
    border-radius: 0 0.8rem 0.8rem 0;
    transition: color 0.2s, background-color 0.2s;
}

.main-nav-mobile .menu-item-has-children > .submenu-toggle:hover {
    background-color: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.05);
}

/* Chevron arrow via CSS borders — same visual as before, repositioned */
.main-nav-mobile .menu-item-has-children > .submenu-toggle::after {
    display: block;
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    border-right: 2px solid var(--dm-brand-color-1);
    border-bottom: 2px solid var(--dm-brand-color-1);
    transform: rotate(45deg);
    transition: transform 0.3s;
}

/* Flip chevron up when submenu is open */
.main-nav-mobile .menu-item-has-children > .submenu-toggle.open::after {
    transform: rotate(-135deg);
}

/* MOBILE MAIN NAV SUB MENU */
.main-nav-mobile li .sub-menu {
    list-style-type: none;
    padding: 0.2rem 0 0.4rem 1.2rem;
    margin: 0;
    width: 100%;
    flex-basis: 100%;
}

/* MOBILE MAIN NAV SUB MENU LI A */
.main-nav-mobile li .sub-menu li a {
    color: var(--dm-brand-color-1);
    font-weight: 400;
    font-size: 1.6rem;
    padding: 0.8rem 1.6rem;
}

.main-nav-mobile li .sub-menu li a:hover {
    color: var(--dm-brand-color-2);
    background-color: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.05);
}

/* Mobile menu footer — contact info links below nav */
.mobile-menu__footer {
    padding: 1.6rem 0.4rem;
    margin-top: 1.6rem;
    border-top: 1px solid var(--dm-brand-color-7);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.mobile-menu__footer-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--dm-brand-color-9);
    text-decoration: none;
    font-size: 1.5rem;
    transition: color 0.2s;
}

.mobile-menu__footer-link:hover {
    color: var(--dm-brand-color-2);
}

.mobile-menu__footer-link--bold {
    font-weight: 500;
}

.nav-search-wrapper {
    display: flex;
    align-items: center;
    gap: var(--dm-content-gap);
}

/* ============== DM-SEARCH COMPONENT ============== */
.dm-search {
    position: relative;
    z-index: var(--dm-z-control);
}

/* TRIGGER BUTTON */
.dm-search__trigger {
    display: flex;
    padding: 12px;
    border-radius: 9999px;
    color: #374151;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-search__trigger:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.dm-search__trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* ICON */
.dm-search__icon {
    width: 24px;
    height: 24px;
}

/* OVERLAY — hidden by default, toggled via .is-open class from Interactivity API */
.dm-search__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    padding-left: 16px;
    padding-right: 16px;
    z-index: var(--dm-z-control);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dm-search__overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Open/close fade snaps instantly under reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dm-search__overlay {
        transition: none;
    }
}

/* MODAL */
.dm-search__modal {
    background: #ffffff;
    width: 100%;
    max-width: 640px;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
    overflow: hidden;
}

/* HEADER */
.dm-search__header {
    padding: 24px 32px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dm-search__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

/* CLOSE BUTTON */
.dm-search__close {
    font-size: 32px;
    line-height: 1;
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 8px;
    transition: color 0.2s ease;
}

.dm-search__close:hover {
    color: #4b5563;
}

/* BODY */
.dm-search__body {
    padding: 32px;
}

/* FORM */
.dm-search__form {
    position: relative;
}

/* INPUT */
.dm-search__input {
    width: 100%;
    padding: 20px 24px;
    font-size: 1.125rem;
    border: 2px solid #d1d5db;
    border-radius: 16px;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-search__input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

/* SUBMIT BUTTON */
.dm-search__submit {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: #111827;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dm-search__submit:hover {
    background: #1f2937;
}

/* SCREEN-READER ONLY */
.dm-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* RESPONSIVE */
@media (max-width: 640px) {
    .dm-search__modal {
        margin-top: 20px;
    }

    .dm-search__body {
        padding: 24px;
    }

    .dm-search__header {
        padding: 20px 24px;
    }
}

/* MOBILE NAV MOBILE MENU ICON */
.mobile-menu__trigger {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    background-color: var(--dm-white);
    border-radius: 0;
    border: none;
    gap: 5px;
    z-index: var(--dm-z-control);
}

.mobile-menu__trigger:focus-visible {
    outline: 2px solid var(--dm-brand-color-1);
    outline-offset: 2px;
}

.mobile-menu__trigger-lines {
    --line-width: 3rem;
    display: block;
    width: var(--line-width);
    height: 0.3rem;
    background-color: var(--dm-black);
    transition: all 0.4s;
}

.mobile-menu__trigger-lines--line1 {
    transform: translate(0%, 270%) rotate(45deg);
    width: var(--line-width);
}

.mobile-menu__trigger-lines--line2 {
    opacity: 0;
    visibility: hidden;
}

.mobile-menu__trigger-lines--line3 {
    transform: translate(0%, -270%) rotate(-45deg);
    width: var(--line-width);
}

/* Set core address defaults */
address {
    font-style: normal;
    display: flex;
    flex-direction: column;
}

/* Set core link defaults — accent links, primary on hover */
a {
    color: var(--dm-brand-color-2);
    text-decoration: underline;
}

a:hover {
    color: var(--dm-brand-color-1);
    text-decoration: none;
}

/* Set core button defaults */
.btn {
    display: flex;
    align-items: center;
    color: var(--dm-button-text-color);
    background-color: var(--dm-button-color);
    padding: var(--dm-button-padding);
    border: 1px solid var(--dm-button-color);
    border-radius: var(--dm-button-border-radius);
    cursor: pointer;
    width: fit-content;
    text-decoration: none;
}

/* moose/dm-button — optional inline icon + label (icon color follows .btn via currentColor) */
.btn--has-icon {
    gap: 0.4rem;
}

.btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn__icon-svg {
    display: block;
    width: 1em;
    height: 1em;
}

.btn:hover {
    color: var(--dm-button-text-color);
    opacity: 0.8;
}

.btn:focus-visible {
    outline: 2px solid var(--dm-brand-color-1);
    outline-offset: 2px;
}

/* Button variants — each overrides --dm-button-color and --dm-button-text-color.
   Add new variants here and register in dm-button.js SelectControl options. */

/* Secondary — white outline for dark/image backgrounds */
.btn--second {
    --dm-button-color: transparent;
    --dm-button-text-color: var(--dm-white);
    border: 2px solid var(--dm-white);
}

.btn--second:hover {
    --dm-button-color: var(--dm-white);
    --dm-button-text-color: var(--dm-brand-color-1);
    opacity: 1;
}

/* Large button — taller with larger text (hero CTAs, page-level actions) */
.btn--lg {
    padding: 1.4rem 2.8rem;
    font-size: var(--dm-body-m);
}

/* Outline Primary — primary outline for light backgrounds */
.btn--outline-primary {
    --dm-button-color: transparent;
    --dm-button-text-color: var(--dm-brand-color-1);
    border: 2px solid var(--dm-brand-color-1);
}

.btn--outline-primary:hover {
    --dm-button-color: var(--dm-brand-color-1);
    --dm-button-text-color: var(--dm-white);
    opacity: 1;
}

/* Single Post */
.dm-post-container {
    max-width: 1000px;
}

/* Set core form defaults */
form {
    width: 100%;
}

.gform_wrapper.gravity-theme input[type=text],
.gform_wrapper.gravity-theme input[type=email],
.gform_wrapper.gravity-theme input[type=tel],
.gform_wrapper.gravity-theme textarea,
.gform_wrapper.gravity-theme select {
    font-size: 1.8rem;
    padding: 10px;
    color: var(--dm-body-color);
    background-color: hsl(0, 0%, 100%);
    border: 1px solid hsl(0, 0%, 83%);
    border-radius: 10px;
}

input[type=button],
input[type=submit],
input[type=reset],
::file-selector-button,
::-webkit-file-upload-button {
    color: var(--dm-button-text-color);
    background-color: var(--dm-button-color);
    padding: var(--dm-button-padding);
    border: 1px solid var(--dm-button-color);
    border-radius: var(--dm-button-border-radius);
    cursor: pointer;
    transition: opacity 0.3s ease;
}

input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover,
::file-selector-button:hover {
    opacity: 0.8;
}

/* Back to Top */
.back-to-top {
    padding: 0.5rem;
    background-color: lightgray;
    position: fixed;
    display: flex;
    right: 1rem;
    bottom: 2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border-radius: 50%;
}

.back-to-top:focus-visible {
    outline: 2px solid var(--dm-brand-color-1);
    outline-offset: 2px;
}

.back-to-top__icon {
    width: 3rem;
    height: 3rem;
    fill: currentColor;
}

/* Page-load preloader — rendered by dm_render_preloader() (inc/custom.php)
   when the "Preloader logo" theme option is set; js/global.js adds
   .dm-preloader--hidden once the page has loaded. The delayed auto-hide
   animation clears it even if JavaScript never runs. */
.dm-preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dm-preloader-bg, var(--dm-brand-color-2));
    transition: opacity 0.8s ease, visibility 0.8s ease;
    animation: dm-preloader-auto-hide 0.8s ease 4s forwards;
}

.dm-preloader__logo {
    width: var(--dm-preloader-logo-w, min(35vw, 50rem));
    height: auto;
    animation: dm-preloader-logo-in 0.7s ease both;
}

.dm-preloader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes dm-preloader-logo-in {
    from { opacity: 0; transform: translateY(0.8rem); }
    to   { opacity: 1; transform: none; }
}

@keyframes dm-preloader-auto-hide {
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (max-width: 767px) {
    .dm-preloader__logo { width: var(--dm-preloader-logo-w-mobile, 65vw); }
}

@media (prefers-reduced-motion: reduce) {
    .dm-preloader { transition: none; animation: dm-preloader-auto-hide 0s 4s forwards; }
    .dm-preloader__logo { animation: none; }
}

.btt-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Footer — inline padding handled by .dm-container inside */
.dm-footer {
    padding-block: 2rem;
}


/* Breadcrumbs (SEOPress) — base styles for .breadcrumb / .breadcrumb-item.
   SEOPress outputs: <nav><ol class="breadcrumb"><li class="breadcrumb-item">…</li></ol></nav> */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.4rem;
    color: var(--dm-brand-color-9);
}

/* Chevron separator between items (CSS mask for currentColor inheritance) */
.breadcrumb-item + .breadcrumb-item::before {
    content: "";
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.4rem;
    vertical-align: middle;
    background: currentColor;
    opacity: 0.4;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.breadcrumb-item a {
    color: var(--dm-brand-color-9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--dm-brand-color-2);
}

/* Active/current breadcrumb item */
.breadcrumb-item.active {
    color: var(--dm-brand-color-1);
    font-weight: 500;
}


.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* 404 Page */
.error404 main {
    display: grid;
    place-items: center;
}

/* Clamp Form */
#clampForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: start;
}

#clampForm label {
    display: block;
}

#clampForm input,
#clampForm select {
    width: 100%;
    padding: 8px;
}

#clampForm button {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

.clamp-size-wrapper {
    display: flex;
    gap: 2rem;
}

.clamp-size-wrapper div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#unitOptions {
    display: flex;
    gap: 1rem;
}

#unitOptions label {
    display: flex;
}

/* End Clamp Form */
/* Copy to Clipboard */
.copy {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

.copy-notify {
    color: #ababab;
    font-size: 1.4rem;
    position: absolute;
    bottom: 100%;
    right: 0;
}

.copy:hover {
    background-color: rgb(221, 221, 221);
}

/* End Copy to Clipboard */
/* Dev Page */
.dev-row {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.dev-row h3 {
    font-size: 2.4rem;
}

.dev-row__column {
    align-items: flex-start;
}

.dev-row ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    gap: 1rem;
    flex-wrap: wrap;
}

.dev-row__column ul li:first-child {
    font-weight: 600;
    font-size: 2rem;
}

.dev-row__color {
    display: inline-block;
    width: 2rem;
    height: 2rem;
}

.dev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.dev-grid ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.dev-grid__content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--dm-content-gap);
}

.copytext {
    display: none;
}

#clampResult .copytext {
    display: inline-block;
}

/* @media */
@media (min-width:480px) {
    .dm-grid-tab-m {
        --dm-grid-columns: var(--dm-grid-columns-tab-m)!important;
        --dm-grid-min: var(--dm-grid-min-tab-m)!important;
        --dm-grid-align-items: var(--dm-grid-align-items-tab-m)!important;
        --dm-grid-justify-items: var(--dm-grid-justify-items-tab-m)!important;
        --dm-grid-justify-content: var(--dm-grid-justify-content-tab-m)!important;
        --dm-grid-align-content: var(--dm-grid-align-content-tab-m)!important;
    }

    .dm-grid-item-tab-m {
        --dm-grid-item-row: var(--dm-grid-item-row-tab-m)!important;
        --dm-grid-item-column: var(--dm-grid-item-column-tab-m)!important;
    }

    .dm-grid-two-tab-m {
        --dm-grid-columns: 2!important;
    }

    .dm-grid-reverse-tab-m > :first-child {
        order: inherit;
    }

    .dm-flex-tab-m {
        --dm-flex-direction: var(--dm-flex-direction-tab-m)!important;
        --dm-align-items: var(--dm-align-items-tab-m)!important;
        --dm-justify-content: var(--dm-justify-content-tab-m)!important;
        --dm-flex-wrap: var(--dm-flex-wrap-tab-m)!important;
        --dm-align-content: var(--dm-align-content-tab-m)!important;
    }

    .dm-text-tab-m {
        --dm-text-align: var(--dm-text-align-responsive)!important;
    }
}

@media (min-width:768px) {
    .dm-grid-tab-l {
        --dm-grid-columns: var(--dm-grid-columns-tab-l)!important;
        --dm-grid-min: var(--dm-grid-min-tab-l)!important;
        --dm-grid-align-items: var(--dm-grid-align-items-tab-l)!important;
        --dm-grid-justify-items: var(--dm-grid-justify-items-tab-l)!important;
        --dm-grid-justify-content: var(--dm-grid-justify-content-tab-l)!important;
        --dm-grid-align-content: var(--dm-grid-align-content-tab-l)!important;
    }

    .dm-grid-item-tab-l {
        --dm-grid-item-row: var(--dm-grid-item-row-tab-l)!important;
        --dm-grid-item-column: var(--dm-grid-item-column-tab-l)!important;
    }

    .dm-grid-two-tab-l {
        --dm-grid-columns: 2!important;
    }

    .dm-grid-reverse-tab-l > :first-child {
        order: inherit;
    }

    .dm-flex-tab-l {
        --dm-flex-direction: var(--dm-flex-direction-tab-l)!important;
        --dm-align-items: var(--dm-align-items-tab-l)!important;
        --dm-justify-content: var(--dm-justify-content-tab-l)!important;
        --dm-flex-wrap: var(--dm-flex-wrap-tab-l)!important;
        --dm-align-content: var(--dm-align-content-tab-l)!important;
    }

    .dm-text-tab-l {
        --dm-text-align: var(--dm-text-align-responsive)!important;
    }
}

@media (min-width:992px) {
    nav.main-nav {
        display: flex;
    }

    .mobile-menu {
        display: none;
    }

    .dm-grid-desktop {
        --dm-grid-columns: var(--dm-grid-columns-desktop)!important;
        --dm-grid-min: var(--dm-grid-min-desktop)!important;
        --dm-grid-align-items: var(--dm-grid-align-items-desktop)!important;
        --dm-grid-justify-items: var(--dm-grid-justify-items-desktop)!important;
        --dm-grid-justify-content: var(--dm-grid-justify-content-desktop)!important;
        --dm-grid-align-content: var(--dm-grid-align-content-desktop)!important;
    }

    .dm-grid-item-desktop {
        --dm-grid-item-row: var(--dm-grid-item-row-desktop)!important;
        --dm-grid-item-column: var(--dm-grid-item-column-desktop)!important;
    }

    .dm-grid-two-desktop {
        --dm-grid-columns: 2!important;
    }

    .dm-grid-reverse-desktop > :first-child {
        order: inherit;
    }

    .dm-flex-desktop {
        --dm-flex-direction: var(--dm-flex-direction-desktop)!important;
        --dm-align-items: var(--dm-align-items-desktop)!important;
        --dm-justify-content: var(--dm-justify-content-desktop)!important;
        --dm-flex-wrap: var(--dm-flex-wrap-desktop)!important;
        --dm-align-content: var(--dm-align-content-desktop)!important;
    }

    .dm-text-desktop {
        --dm-text-align: var(--dm-text-align-responsive)!important;
    }
}

.dm-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.dm-socials a {
    display: flex;
    width: 3rem;
    height: 3rem;
    color: black;
}

.dm-socials a:hover {
    color: var(--dm-brand-color-1);
}

.dm-search-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dm-grid-gap);
}

.dm-search-grid__item {
    display: flex;
    flex-direction: column;
    gap: var(--dm-content-gap);
}

@media (max-width:767px) {
    .dm-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:479px) {
    .dm-search-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =============================================================================
   SOCIAL SHARE — moose/dm-social-share
   Sharing buttons using platform share APIs.
   Brand colors set via --dm-share-color per network for easy overrides.
============================================================================= */

.dm-social-share {
    --dm-share-icon-size: 2rem;
    --dm-share-gap: 0.8rem;
    --dm-share-padding: 0.8rem;
    --dm-share-radius: 0.4rem;
    --dm-share-color: currentColor;
}

.dm-social-share__heading {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dm-social-share__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm-share-gap);
    align-items: center;
}

/* Shared button base — used by both <a> and <button> elements */
.dm-social-share__button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: var(--dm-share-padding);
    border: none;
    border-radius: var(--dm-share-radius);
    background: transparent;
    color: var(--dm-share-color);
    text-decoration: none;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease, background-color 0.2s ease;
}

.dm-social-share__button:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

.dm-social-share__button:active {
    transform: translateY(0);
}

.dm-social-share__button:focus-visible {
    outline: 2px solid var(--dm-share-color);
    outline-offset: 2px;
}

/* Icon sizing */
.dm-social-share__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dm-share-icon-size);
    height: var(--dm-share-icon-size);
    flex-shrink: 0;
}

.dm-social-share__icon svg {
    width: 100%;
    height: 100%;
}

/* Label — hidden in icon-only mode via modifier class */
.dm-social-share__label {
    white-space: nowrap;
}

/* --- Style modifiers --- */

/* Icon-only: hide labels */
.dm-social-share--icon-only .dm-social-share__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Label-only: icons hidden via render template (not output in HTML) */

/* --- Network brand colors --- */
.dm-social-share__button--facebook  { --dm-share-color: #1877F2; }
.dm-social-share__button--x         { --dm-share-color: #000000; }
.dm-social-share__button--linkedin  { --dm-share-color: #0A66C2; }
.dm-social-share__button--pinterest { --dm-share-color: #E60023; }
.dm-social-share__button--email     { --dm-share-color: #555555; }
.dm-social-share__button--whatsapp  { --dm-share-color: #25D366; }
.dm-social-share__button--sms       { --dm-share-color: #555555; }
.dm-social-share__button--reddit    { --dm-share-color: #FF4500; }
.dm-social-share__button--telegram  { --dm-share-color: #26A5E4; }
.dm-social-share__button--copy-link { --dm-share-color: #555555; }

/* Copy-link feedback state */
.dm-social-share__button--copied {
    --dm-share-color: #16a34a;
}

/* End: Social Share */

/* =================================================================
   BLUEPRINT BLOCK STYLES
   Base styles for the custom blocks shipped with the theme (header,
   footer, team, FAQ, blog, cards, CTA banner, process steps, etc.).
   Promoted from the per-client layer so every new site starts with
   fully styled blocks. Per-client overrides go in css/style.css.
   ================================================================= */
/* =============================================================================
   HEADER — TOP BAR
   Dark primary-colour strip with phone, email, Facebook, Client Login
============================================================================= */

.dm-header__topbar {
    background-color: var(--dm-brand-color-1);
}

.dm-header__topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
    font-size: 1.4rem;
}

.dm-header__topbar-left {
    display: none;
}

.dm-header__topbar-right {
    display: flex;
    align-items: center;
    gap: var(--dm-space-md);
    margin-left: auto;
}

.dm-header__topbar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--dm-white);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.dm-header__topbar-link:hover {
    opacity: 0.8;
    color: var(--dm-white);
    text-decoration: none;
}

.dm-header__topbar-social {
    color: var(--dm-white);
    text-decoration: none;
    transition: opacity 0.2s ease;
    display: flex;
}

.dm-header__topbar-social:hover {
    opacity: 0.8;
    color: var(--dm-white);
}

.dm-header__topbar-divider {
    width: 1px;
    height: 1.6rem;
    background: rgba(255, 255, 255, 0.5);
}

.dm-header__topbar-login {
    color: var(--dm-white);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.dm-header__topbar-login:hover {
    opacity: 0.8;
    color: var(--dm-white);
    text-decoration: none;
}

/* Show contact links on tablet+ */
@media (min-width: 480px) {
    .dm-header__topbar-left {
        display: flex;
        align-items: center;
        gap: var(--dm-space-xl);
    }
}


/* =============================================================================
   HEADER — MAIN BAR
   Logo + nav + CTA button. Wrapped in .dm-header__main for layout control.
============================================================================= */

.dm-header__main {
    padding: 0;
}

.dm-header__main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 6rem;
}

/* CTA button in header — hidden on mobile, visible on desktop */
.dm-header__cta {
    display: none;
    white-space: nowrap;
    font-weight: 500;
    font-size: 1.6rem;
    text-decoration: none;
}

/* Mobile CTA inside the slide-out panel — full-width button */
.dm-header__cta--mobile {
    display: flex;
    justify-content: center;
    margin-top: 1.6rem;
    width: 100%;
}

/* Override default header padding — the top bar and main bar handle their own */
.dm-header {
    padding: 0;
}

/* Adjust sticky background to cover both bars */
.dm-header.sticky {
    background-color: var(--dm-white);
}

/* Logo sizing — height-based via --dm-logo-h / --dm-logo-h-sticky;
   override the tokens per client in css/style.css if the logo needs a
   different footprint */

@media (min-width: 768px) {
    .dm-header__main-inner {
        height: 7.2rem;
    }
}

@media (min-width: 992px) {
    .dm-header__cta {
        display: flex;
    }
}


/* =============================================================================
   HEADER — DESKTOP NAV OVERRIDES
   Matches reference: rounded dropdown panels, accent hover, chevron indicators
============================================================================= */

@media (min-width: 992px) {

    /* --- Top-level links --- */
    .main-nav .menu > li > a,
    .main-nav .menu > li > span {
        font-size: 1.6rem;
        font-weight: 500;
        padding: 1rem 1.6rem;
        transition: color 0.2s ease;
        position: relative;
    }

    .main-nav .menu > li > a:hover {
        color: var(--dm-brand-color-2);
    }

    /* Active page accent color */
    .main-nav .menu > .current-menu-item > a,
    .main-nav .menu > .current-menu-ancestor > a {
        color: var(--dm-brand-color-2);
    }

    /* Animated underline on hover (grows from left) */
    .main-nav .menu > li > a::before {
        content: '';
        position: absolute;
        bottom: 0.4rem;
        left: 1.6rem;
        right: 1.6rem;
        height: 2px;
        background: var(--dm-brand-color-2);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .main-nav .menu > li > a:hover::before {
        transform: scaleX(1);
    }

    /* --- Dropdown panel --- */
    .main-nav li .sub-menu {
        background: var(--dm-white);
        border: 1px solid var(--dm-brand-color-7);
        border-radius: 0.8rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        padding: 1.2rem 0;
        min-width: 26rem;
        /* top offset handled by ::before hover bridge below */
        margin-top: 0.8rem;
    }

    /* Invisible hover bridge — prevents dropdown from closing when mouse
       crosses the gap between the parent link and the dropdown panel */
    .main-nav > .menu > .menu-item-has-children > .sub-menu::before {
        content: '';
        position: absolute;
        top: -1.2rem;
        left: 0;
        right: 0;
        height: 1.2rem;
    }

    /* Sub-submenu (depth-2 flyout) — same panel style, narrower */
    .main-nav li .sub-menu .sub-menu {
        min-width: 24rem;
        margin-top: -1.2rem;
        padding-top: 1.2rem;
    }

    /* Hover bridge for sub-submenus — extends left to cover the gap */
    .main-nav .sub-menu .menu-item-has-children > .sub-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: -1rem;
        width: 1rem;
        height: 100%;
    }

    /* --- Dropdown items --- */
    .main-nav li .sub-menu li {
        font-size: 1.4rem;
    }

    .main-nav li .sub-menu li a {
        font-size: 1.4rem;
        padding: 1.2rem 2rem;
        line-height: 1.625;
        display: flex;
        width: 100%;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .main-nav li .sub-menu li a:hover {
        color: var(--dm-brand-color-2);
        background: hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.05);
    }

}


/* =============================================================================
   FOOTER — MAIN STRUCTURE
   Primary bg, white text, 3-column link grid
============================================================================= */

.dm-footer {
    background-color: var(--dm-brand-color-1);
    color: rgba(255, 255, 255, 0.8);
    padding: 0;
}

.dm-footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.2s ease;
}

.dm-footer a:hover {
    color: var(--dm-white);
    text-decoration: none;
}

.dm-footer .dm-container {
    padding-top: var(--dm-space-2xl);
    padding-bottom: var(--dm-space-2xl);
}


/* =============================================================================
   FOOTER — LINK COLUMNS
============================================================================= */

.dm-footer__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dm-space-xl);
}

@media (min-width: 768px) {
    .dm-footer__columns {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--dm-space-2xl);
    }
}

/* Footer column headings */
.dm-footer__heading {
    font-family: var(--dm-font-family-heading);
    font-size: 1.6rem;
    color: var(--dm-white);
    margin: 0 0 var(--dm-space-md);
}

/* Footer logo */
.dm-footer__logo {
    margin-bottom: var(--dm-space-md);
}

.dm-footer__logo img {
    /* Same height-based treatment as the header logo (see there for
       the SVG rationale): explicit height + object-fit so all logo
       shapes render predictably */
    display: block;
    height: 6.4rem;
    width: auto;
    max-width: min(100%, 24rem);
    object-fit: contain;
}

/* Footer description */
.dm-footer__desc {
    font-size: 1.4rem;
    line-height: 1.6;
    margin: 0 0 var(--dm-space-md);
}

/* Footer email link */
.dm-footer__email {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem;
    margin-bottom: var(--dm-space-md);
}

/* Pride flag */
.dm-footer__pride {
    margin-bottom: var(--dm-space-md);
}

.dm-footer__pride img {
    height: 2.4rem;
    width: auto;
    border-radius: 2px;
}

/* Land acknowledgement */
.dm-footer__land-ack {
    font-size: 1.1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--dm-space-lg);
}

.dm-footer__land-ack-title {
    display: block;
    font-family: var(--dm-font-family-heading);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--dm-space-xs);
}

.dm-footer__land-ack p {
    margin: 0;
}


/* =============================================================================
   FOOTER — LINK LISTS (from wp_nav_menu)
============================================================================= */

.dm-footer__link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dm-footer__link-list li {
    line-height: 1.2;
}

.dm-footer__link-list li a {
    font-size: 1.2rem;
    display: inline-block;
    padding: 0.2rem 0;
}

/* Parent items in services/conditions menus — bold heading style */
.dm-footer__link-list > .menu-item-has-children > a {
    font-weight: 600;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
}

/* Spacing between parent groups */
.dm-footer__link-list > .menu-item-has-children + .menu-item-has-children {
    margin-top: var(--dm-space-md);
}

/* Sub-menu items — no indent, flat list */
.dm-footer__link-list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Section headings in conditions/resources menu — matches reference <h4> heading style */
.dm-footer__link-list--conditions > .menu-item-has-children > a {
    font-family: var(--dm-font-family-heading);
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--dm-white);
    padding-bottom: var(--dm-space-xs);
}


/* =============================================================================
   FOOTER — LOCATION CARDS
============================================================================= */

.dm-footer__locations {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dm-space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: var(--dm-space-xl);
    padding-top: var(--dm-space-xl);
}

@media (min-width: 768px) {
    .dm-footer__locations {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Admin-only hint shown when no Location posts are published (regular
   visitors see no locations row at all) — mirrors .dm-header__menu-hint */
.dm-footer__locations--empty {
    display: block;
}

.dm-footer__locations-hint {
    font-size: 1.3rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.4rem 0.8rem;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.dm-footer__location-map {
    border-radius: var(--dm-radius-sm);
    overflow: hidden;
    aspect-ratio: 2 / 1;
    margin-bottom: var(--dm-space-sm);
}

.dm-footer__location-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.dm-footer__location-name {
    font-family: var(--dm-font-family-heading);
    font-size: 1.4rem;
    color: var(--dm-white);
    margin: 0 0 var(--dm-space-xs);
}

.dm-footer__location-note {
    font-size: 1.1rem;
    font-weight: 400;
    font-family: var(--dm-font-family-body);
    color: rgba(255, 255, 255, 0.6);
    margin-left: var(--dm-space-sm);
}

.dm-footer__location-details {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
}

.dm-footer__location-address,
.dm-footer__location-phone {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.2rem;
}

.dm-footer__location-address svg,
.dm-footer__location-phone svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
}


/* =============================================================================
   FOOTER — BOTTOM BAR
============================================================================= */

.dm-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: var(--dm-space-xl);
    padding-top: var(--dm-space-lg);
}

@media (min-width: 768px) {
    .dm-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.dm-footer__copyright {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.dm-footer__bottom-links {
    display: flex;
    gap: var(--dm-space-xl);
    align-items: center;
    font-size: 1.2rem;
}

.dm-footer__bottom-link {
    color: rgba(255, 255, 255, 0.6);
}

.dm-footer__bottom-link:hover {
    color: var(--dm-white);
}

.dm-footer__bottom-credit {
    color: rgba(255, 255, 255, 0.4);
}

.dm-footer__bottom-credit a {
    color: rgba(255, 255, 255, 0.6);
}

.dm-footer__bottom-credit a:hover {
    color: var(--dm-white);
}



/* =============================================================================
   TEAM PROFILE — moose/dm-team-profile (single-dm_team_member template)
============================================================================= */

/* Breadcrumb bar — light background strip (team profile + moose/dm-breadcrumbs) */
.dm-breadcrumb-bar {
    background: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.05);
    border-bottom: 1px solid var(--dm-brand-color-7);
    padding-block: var(--dm-space-sm);
}

/* Editor placeholder for dm-breadcrumbs SSR */
.dm-breadcrumb-bar__editor-note {
    margin: 0;
    font-size: 1.4rem;
    color: var(--dm-brand-color-9);
}

/* Back to team link */
.dm-team-profile__back-bar {
    padding: var(--dm-space-lg) 0 0;
}

.dm-team-profile__back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--dm-brand-color-2);
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.dm-team-profile__back-link:hover {
    color: hsl(var(--dm-bc-2-hs), calc(var(--dm-bc-2-l) - 10%));
}

/* Main profile section */
.dm-team-profile__section {
    padding: var(--dm-space-2xl) 0 var(--dm-space-3xl);
}

/* 1/3 + 2/3 grid on desktop, stacked on mobile */
.dm-team-profile__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--dm-space-2xl);
}

@media (min-width: 992px) {
    .dm-team-profile__grid {
        grid-template-columns: 1fr 2fr;
        gap: 6rem;
    }
}

/* Sidebar — sticky on desktop */
.dm-team-profile__sidebar-sticky {
    position: relative;
}

@media (min-width: 992px) {
    .dm-team-profile__sidebar-sticky {
        position: sticky;
        top: 10rem;
    }
}

/* Photo — 4:5 aspect ratio with rounded corners */
.dm-team-profile__photo {
    overflow: hidden;
    border-radius: var(--dm-radius-lg);
    margin-bottom: var(--dm-space-lg);
}

.dm-team-profile__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
}

/* Sidebar CTA box */
.dm-team-profile__cta-box {
    background: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.05);
    border-radius: var(--dm-radius-lg);
    padding: var(--dm-space-xl);
}

.dm-team-profile__cta-text {
    font-size: 1.4rem;
    color: var(--dm-brand-color-9);
    line-height: 1.6;
    margin: 0 0 var(--dm-space-md);
}

.dm-team-profile__cta-btn {
    width: 100%;
    justify-content: center;
    gap: 0.6rem;
}

/* Header — name, credentials, role, pronouns */
.dm-team-profile__header {
    margin-bottom: var(--dm-space-xl);
    padding-bottom: var(--dm-space-xl);
    border-bottom: 1px solid var(--dm-brand-color-7);
}

.dm-team-profile__name {
    margin: 0 0 0.4rem;
}

.dm-team-profile__credentials {
    font-size: 1.8rem;
    color: var(--dm-brand-color-9);
    margin: 0 0 0.6rem;
}

.dm-team-profile__role {
    font-size: 1.8rem;
    color: var(--dm-brand-color-2);
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 0.6rem;
}

.dm-team-profile__pronouns {
    font-size: 1.6rem;
    color: var(--dm-brand-color-9);
    margin: 0.6rem 0 0;
}

/* Bio content */
.dm-team-profile__bio {
    margin-bottom: var(--dm-space-2xl);
}

.dm-team-profile__bio p {
    color: var(--dm-brand-color-9);
    line-height: 1.7;
    margin: 0 0 var(--dm-space-lg);
}

.dm-team-profile__bio p:last-child {
    margin-bottom: 0;
}

/* Bottom action bar */
.dm-team-profile__actions {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-md);
    padding-top: var(--dm-space-xl);
    border-top: 1px solid var(--dm-brand-color-7);
}

@media (min-width: 480px) {
    .dm-team-profile__actions {
        flex-direction: row;
    }
}

/* Team profile action buttons — layout only, color via global .btn--outline-primary */
.dm-team-profile__btn-back,
.dm-team-profile__btn-book {
    gap: 0.6rem;
    justify-content: center;
}


/* =============================================================================
   DYNAMIC TEAM GRID — moose/dm-dynamic-team
============================================================================= */

.dm-dynamic-team__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
}

@media (min-width: 768px) {
    .dm-dynamic-team__grid {
        grid-template-columns: repeat(var(--dm-team-columns-tab-l, 2), 1fr);
    }
}

@media (min-width: 992px) {
    .dm-dynamic-team__grid {
        grid-template-columns: repeat(var(--dm-team-columns-desktop, 3), 1fr);
    }
}

@media (min-width: 1280px) {
    .dm-dynamic-team__grid {
        grid-template-columns: repeat(var(--dm-team-columns-xl, var(--dm-team-columns-desktop, 3)), 1fr);
    }
}

.dm-dynamic-team__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--dm-white);
    border: 1px solid hsla(var(--dm-bc-7-hs), var(--dm-bc-7-l), 0.5);
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: var(--dm-shadow-sm);
    transition: box-shadow 0.2s ease;
}

.dm-dynamic-team__card:hover {
    box-shadow: var(--dm-shadow-md);
}

.dm-dynamic-team__photo {
    overflow: hidden;
    background: hsla(var(--dm-bc-8-hs), var(--dm-bc-8-l), 0.3);
}

.dm-dynamic-team__photo img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
}

.dm-dynamic-team__info {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 2rem;
}

.dm-dynamic-team__meta {
    display: flex;
    flex-direction: column;
}

.dm-dynamic-team__name {
    font-family: var(--dm-font-family-heading);
    font-size: 1.8rem;
    line-height: 1.5;
    margin: 0;
}

.dm-dynamic-team__role {
    color: var(--dm-brand-color-2);
    font-weight: 500;
    font-size: var(--dm-body-s);
    line-height: 1.625;
    margin: 0.8rem 0 0;
}

.dm-dynamic-team__credentials {
    color: var(--dm-brand-color-9);
    font-size: 1.2rem;
    line-height: 1.625;
    margin: 0.4rem 0 0;
}

.dm-dynamic-team__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: auto;
    padding-top: 1.6rem;
    gap: 2rem;
}

.dm-dynamic-team__excerpt {
    font-size: 1.4rem;
    color: var(--dm-brand-color-9);
    line-height: 1.625;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dm-dynamic-team__read-more {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    gap: 0.8rem;
    min-height: 3.6rem;
    font-size: 1.4rem;
}

/* Card "Read More" button uses global .btn--outline-primary from global-settings.css */

.dm-dynamic-team__load-more {
    text-align: center;
    margin-top: 2.4rem;
}


/* =============================================================================
   DYNAMIC FAQ ACCORDION — moose/dm-dynamic-faq
   Inherits accordion styles from css/components/accordion.css.
   Only additions specific to the dynamic FAQ version go here.
============================================================================= */

.dm-dynamic-faq .dm-accordion__header {
    padding: 2rem 0;
    font-family: var(--dm-font-family-heading);
    font-size: var(--dm-body-m);
    font-weight: 500;
    color: var(--dm-brand-color-9);
}

.dm-dynamic-faq .dm-accordion__header:hover {
    background: none;
    color: var(--dm-brand-color-2);
}

.dm-dynamic-faq .dm-accordion__item:first-child {
    border-top: none;
}

.dm-dynamic-faq .dm-accordion__content {
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--dm-brand-color-9);
    padding: 0 0 2rem;
}

/* FAQ 2-column grid layout */
@media (min-width: 768px) {
    .dm-section--faq-columns .dm-accordion {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 3.2rem;
    }
}

@media (min-width: 992px) {
    .dm-section--faq-columns .dm-accordion {
        column-gap: 4.8rem;
    }
}


/* =============================================================================
   SINGLE BLOG POST — templates/single.html
============================================================================= */

/* 2-column layout: article + sidebar */
.dm-single-post {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

@media (min-width: 992px) {
    .dm-single-post {
        grid-template-columns: 1fr 34rem;
        gap: 5.6rem;
    }
}

/* Article column */
.dm-single-post__article {
    min-width: 0;
}

/* Category pill */
.dm-single-post__cat {
    margin-bottom: 2.4rem;
}

.dm-single-post__cat a {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.4rem 1.2rem;
    border-radius: 9999px;
    background: hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.15);
    color: var(--dm-brand-color-2);
    text-decoration: none;
}

/* Title */
.dm-single-post__title {
    margin-bottom: 1.6rem;
}

/* Meta row: date with calendar icon */
.dm-single-post__meta {
    margin-bottom: 3.2rem;
    gap: 1.6rem;
}

.dm-single-post__date {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    color: var(--dm-brand-color-9);
}

.dm-single-post__date::before {
    content: '';
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    background-color: var(--dm-brand-color-9);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    flex-shrink: 0;
}

/* Featured image */
.dm-single-post__image {
    border-radius: 1.2rem;
    overflow: hidden;
    margin-bottom: 3.2rem;
}

.dm-single-post__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Post content — prose styling */
.dm-single-post__content {
    margin-bottom: 4.8rem;
}

.dm-single-post__content p {
    font-size: 1.8rem;
    line-height: 1.75;
    color: var(--dm-brand-color-9);
    margin-bottom: 2rem;
}

.dm-single-post__content h2 {
    margin-top: 3.2rem;
    margin-bottom: 1.6rem;
}

.dm-single-post__content h3 {
    margin-top: 2.4rem;
    margin-bottom: 1.2rem;
}

.dm-single-post__content ul,
.dm-single-post__content ol {
    margin-bottom: 2rem;
    padding-left: 2.4rem;
}

.dm-single-post__content li {
    font-size: 1.8rem;
    line-height: 1.75;
    color: var(--dm-brand-color-9);
    margin-bottom: 0.8rem;
}

.dm-single-post__content blockquote {
    border-left: 4px solid var(--dm-brand-color-2);
    padding-left: 2rem;
    margin: 2.4rem 0;
    font-style: italic;
}

/* Back to Blog link */
.dm-single-post__back {
    border-top: 1px solid var(--dm-brand-color-7);
    padding-top: 3.2rem;
}

.dm-single-post__back a {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 500;
    font-size: 1.6rem;
    padding: 1.2rem 2rem;
    border: 2px solid var(--dm-brand-color-1);
    border-radius: 0.8rem;
    color: var(--dm-brand-color-1);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.dm-single-post__back a:hover {
    background: var(--dm-brand-color-1);
    color: var(--dm-white);
}

/* Sidebar — sticky, desktop only */
.dm-single-post__sidebar {
    display: none;
}

@media (min-width: 992px) {
    .dm-single-post__sidebar {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        position: sticky;
        top: 9.6rem;
        align-self: start;
    }
}

/* Shared card heading style (both CTA and Services cards) */
.dm-single-post__card-heading {
    font-size: var(--dm-body-m);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
}

/* CTA card in sidebar */
.dm-single-post__cta-card {
    border-radius: 0.8rem;
    border: 1px solid hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.2);
    background: hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.05);
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.dm-single-post__cta-text {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--dm-brand-color-9);
    margin: 0;
}

.dm-single-post__cta-btn {
    margin: 0;
}

.dm-single-post__cta-btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1.2rem 2rem;
    background: var(--dm-brand-color-1);
    color: var(--dm-white);
    border-radius: 0.8rem;
    font-weight: 500;
    font-size: 1.6rem;
    text-decoration: none;
    transition: background 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dm-single-post__cta-btn a:hover {
    opacity: 0.9;
}

.dm-single-post__cta-btn svg {
    flex-shrink: 0;
}

/* Services card in sidebar */
.dm-single-post__services-card {
    border-radius: 0.8rem;
    border: 1px solid var(--dm-brand-color-7);
    background: var(--dm-white);
    padding: 2.4rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dm-single-post__services-nav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.8rem;
}

.dm-single-post__services-nav a {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.2rem;
    border-radius: 0.8rem;
    font-size: 1.4rem;
    color: var(--dm-brand-color-9);
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}

.dm-single-post__services-nav a:hover {
    color: var(--dm-brand-color-2);
    background: hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.05);
}

.dm-single-post__services-nav svg {
    flex-shrink: 0;
}


/* =============================================================================
   CONTACT INFO CARDS — centered vertical variant of dm-service-card
============================================================================= */

/* Override dm-service-card layout to centered vertical when inside .dm-contact-info-cards */
.dm-contact-info-cards .dm-service-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.2rem;
}

.dm-contact-info-cards .dm-service-card__icon {
    border-radius: 50%;
    margin-bottom: 0.8rem;
}

.dm-contact-info-cards .dm-service-card__content {
    align-items: center;
}

.dm-contact-info-cards .dm-service-card__title {
    font-size: 2rem;
}

.dm-contact-info-cards .dm-service-card__desc {
    margin-bottom: 0.4rem;
}

/* Highlight text — accent-colored link or bold text below description */
.dm-service-card__highlight {
    font-weight: 500;
    color: var(--dm-brand-color-2);
    text-decoration: none;
    font-size: var(--dm-body);
}

a.dm-service-card__highlight:hover {
    text-decoration: underline;
}

/* For non-link highlights (e.g. Hours card), use primary color */
span.dm-service-card__highlight {
    color: var(--dm-brand-color-1);
}


/* =============================================================================
   DYNAMIC LOCATIONS — moose/dm-dynamic-locations
============================================================================= */

/* Locations grid wrapper */
.dm-dynamic-locations__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.2rem;
}

@media (min-width: 992px) {
    .dm-dynamic-locations__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Location card (dm-loc) — map top, body bottom */
.dm-loc {
    background: var(--dm-white);
    border-radius: 1.2rem;
    border: 1px solid var(--dm-brand-color-7);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.dm-loc__map {
    aspect-ratio: 16 / 10;
    background: var(--dm-brand-color-8);
}

.dm-loc__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.dm-loc__body {
    padding: 3.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dm-loc__name {
    font-family: var(--dm-font-family-heading);
    font-size: 1.6rem;
    margin: 0 0 0.8rem!important
}

.dm-loc__note {
    font-size: 1.2rem;
    color: var(--dm-brand-color-2);
    font-weight: 500;
    font-style: italic;
    margin: 0 0 1.2rem;
}

.dm-loc__address {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    font-size: 1.6rem;
    color: var(--dm-brand-color-9);
    line-height: 1.6;
    margin-bottom: 0.4rem;
}

.dm-loc__intersection {
    font-size: 1.3rem;
    color: var(--dm-brand-color-9);
    font-style: italic;
    margin: 0 0 2.4rem;
    padding-left: 2.3rem;
}

/* Office hours — separated from address block */
.dm-loc__hours {
    margin-bottom: 2.4rem;
    padding-top: 2rem;
}

.dm-loc__hours-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--dm-brand-color-1);
    margin: 0 0 0.8rem!important;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.dm-loc__hours-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.dm-loc__hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.6rem;
    color: var(--dm-brand-color-9);
}

.dm-loc__closed {
    opacity: 0.6;
    font-style: italic;
}

/* Contact details — bottom section with border-top */
.dm-loc__contact {
    margin-top: auto;
    border-top: 1px solid var(--dm-brand-color-7);
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.dm-loc__contact-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.6rem;
    color: var(--dm-brand-color-9);
}

.dm-loc__contact-row a {
    color: var(--dm-brand-color-9);
    text-decoration: none;
    transition: color 0.2s;
}

.dm-loc__contact-row a:hover {
    color: var(--dm-brand-color-2);
}

/* Accent color for all Lucide icons in location cards */
.dm-loc__icon-accent {
    flex-shrink: 0;
    color: var(--dm-brand-color-2);
}

.dm-loc__address .dm-loc__icon-accent {
    margin-top: 0.2rem;
}

/* Book button at bottom of each location card */
.dm-loc__book-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: 0.4rem;
    font-size: 1.6rem;
    padding: 1rem 1.6rem;
}


/* =============================================================================
   BLOG GRID — wp:query with .dm-blog-grid class
============================================================================= */

/* Force grid gap on the WP post template grid */
.dm-blog-grid .wp-block-post-template.is-layout-grid {
    gap: 3.2rem;
}

/* Card: white bg, rounded, border, shadow, hover lift */
.dm-blog-grid .wp-block-post {
    background: var(--dm-white);
    border-radius: 1.2rem;
    border: 1px solid var(--dm-brand-color-7);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.dm-blog-grid .wp-block-post:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Featured image: fills card top, 16/10 aspect, scale on hover */
.dm-blog-grid .wp-block-post-featured-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin: 0;
}

.dm-blog-grid .wp-block-post-featured-image a {
    display: block;
    height: 100%;
}

.dm-blog-grid .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.dm-blog-grid .wp-block-post:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

/* Content area below the image */
.dm-blog-grid__content {
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

/* Meta row: category pill + date inline */
.dm-blog-grid__meta {
    margin-bottom: 1.2rem;
    gap: 1.2rem;
    align-items: center;
}

/* Category pill badge */
.dm-blog-grid__cat {
    margin: 0;
}

.dm-blog-grid__cat a {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.4rem 1.2rem;
    border-radius: 9999px;
    background: hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.15);
    color: var(--dm-brand-color-2);
    text-decoration: none;
    white-space: nowrap;
}

/* Date with calendar icon */
.dm-blog-grid__date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.4rem;
    color: var(--dm-brand-color-9);
    margin: 0;
}

.dm-blog-grid__date::before {
    content: '';
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    background-color: var(--dm-brand-color-9);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    flex-shrink: 0;
}

/* Title: heading font, accent on hover */
.dm-blog-grid__title {
    font-family: var(--dm-font-family-heading);
    font-size: 1.8rem;
    line-height: 1.35;
    margin: 0 0 0.8rem!important;
}

.dm-blog-grid__title a {
    text-decoration: none;
    transition: color 0.2s;
    color: var(--dm-brand-color-1);
}

.dm-blog-grid .wp-block-post:hover .dm-blog-grid__title a {
    color: var(--dm-brand-color-2);
}

/* Excerpt: muted, 2-line clamp */
.dm-blog-grid__excerpt {
    margin: 0;
}

.dm-blog-grid__excerpt p {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--dm-brand-color-9);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pagination styling */
.dm-blog-grid__pagination {
    margin-top: var(--dm-space-xl);
}

/* Responsive: 2-col on tablet, 1-col on mobile */
@media (max-width: 767px) {
    .dm-blog-grid .wp-block-post-template.is-layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .dm-blog-grid .wp-block-post-template.is-layout-grid {
        grid-template-columns: 1fr;
    }
}


/* =============================================================================
   DYNAMIC BLOG GRID — moose/dm-dynamic-blog
============================================================================= */

/* Grid: responsive columns via --dm-blog-columns CSS var */
.dm-dynamic-blog__grid {
    display: grid;
    grid-template-columns: repeat(var(--dm-blog-columns, 3), 1fr);
    gap: 3.2rem;
}

/* Card: white bg, rounded, border, shadow, hover lift */
.dm-dynamic-blog__card {
    background: var(--dm-white);
    border-radius: 1.2rem;
    border: 1px solid var(--dm-brand-color-7);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.dm-dynamic-blog__card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Featured image: fills card top, 16/10 aspect, scale on hover */
.dm-dynamic-blog__image {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.dm-dynamic-blog__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.dm-dynamic-blog__card:hover .dm-dynamic-blog__image img {
    transform: scale(1.05);
}

/* Content area below the image */
.dm-dynamic-blog__content {
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Meta row: category pill + date inline */
.dm-dynamic-blog__meta {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

/* Category pill badge */
.dm-dynamic-blog__cat {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.4rem 1.2rem;
    border-radius: 9999px;
    background: hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.15);
    color: var(--dm-brand-color-2);
    text-decoration: none;
    white-space: nowrap;
}

/* Date with calendar icon */
.dm-dynamic-blog__date {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.4rem;
    color: var(--dm-brand-color-9);
}

.dm-dynamic-blog__date::before {
    content: '';
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    background-color: var(--dm-brand-color-9);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    flex-shrink: 0;
}

/* Title: heading font, accent on hover */
.dm-dynamic-blog__title {
    font-family: var(--dm-font-family-heading);
    font-size: 1.8rem;
    line-height: 1.35;
    margin: 0 0 0.8rem;
}

.dm-dynamic-blog__title a {
    text-decoration: none;
    transition: color 0.2s;
    color: var(--dm-brand-color-1);
}

.dm-dynamic-blog__card:hover .dm-dynamic-blog__title a {
    color: var(--dm-brand-color-2);
}

/* Excerpt: muted, 2-line clamp */
.dm-dynamic-blog__excerpt {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--dm-brand-color-9);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Load more button wrapper */
.dm-dynamic-blog__load-more {
    text-align: center;
    margin-top: var(--dm-space-xl);
}

/* Responsive: 2-col on tablet, 1-col on mobile */
@media (max-width: 767px) {
    .dm-dynamic-blog__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .dm-dynamic-blog__grid {
        grid-template-columns: 1fr;
    }
}


/* =============================================================================
   SHARED LOAD MORE BUTTON
============================================================================= */

.dm-load-more-btn {
    min-width: 16rem;
}

.dm-load-more-btn[disabled] {
    opacity: 0.6;
    cursor: wait;
}


/* =============================================================================
   BADGE PILL — moose/dm-badge-pill
============================================================================= */

.dm-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 500;
    font-size: var(--dm-body);
    padding: 0.8rem 1.6rem;
    border-radius: var(--dm-radius-full);
}

.dm-badge-pill__dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Light variant — for use on hero overlays / dark backgrounds */
.dm-badge-pill--light {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    color: var(--dm-white);
}

.dm-badge-pill--light .dm-badge-pill__dot {
    background: var(--dm-white);
}

/* Accent variant — teal on light backgrounds */
.dm-badge-pill--accent {
    background: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.1);
    color: var(--dm-brand-color-2);
}

.dm-badge-pill--accent .dm-badge-pill__dot {
    background: var(--dm-brand-color-2);
}

/* Primary variant — dark blue on light backgrounds */
.dm-badge-pill--primary {
    background: hsl(var(--dm-bc-1-hs), var(--dm-bc-1-l), 0.1);
    color: var(--dm-brand-color-1);
}

.dm-badge-pill--primary .dm-badge-pill__dot {
    background: var(--dm-brand-color-1);
}


/* =============================================================================
   SERVICE CARD — moose/dm-service-card
============================================================================= */

/* Reference: p-6 md:p-8 rounded-xl shadow-sm border-border/50 card-hover */
.dm-service-card {
    display: flex;
    align-items: flex-start;
    gap: var(--dm-space-md);
    padding: 2.4rem;
    background: var(--dm-white);
    border: 1px solid hsla(var(--dm-bc-7-hs), var(--dm-bc-7-l), 0.5);
    border-radius: 1.2rem;
    box-shadow: var(--dm-shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 768px) {
    .dm-service-card {
        padding: 3.2rem;
    }
}

a.dm-service-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dm-shadow-lg);
    text-decoration: none;
    color: inherit;
}

/* Reference: w-12 h-12 rounded-lg bg-accent/10, group-hover:bg-accent/20 */
.dm-service-card__icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 0.8rem;
    background: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--dm-brand-color-2);
    transition: background-color 0.2s ease;
}

a.dm-service-card:hover .dm-service-card__icon {
    background: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.2);
}

/* Reference: text-xl = 20px fixed, flex-1 content area uses gap for spacing */
.dm-service-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex: 1;
}

.dm-service-card__title {
    font-family: var(--dm-font-family-heading);
    font-size: var(--dm-h5);
    margin: 0;
    transition: color 0.2s ease;
}

a.dm-service-card:hover .dm-service-card__title {
    color: var(--dm-brand-color-2);
}

/* Reference: text-base = 16px, text-muted-foreground, leading-relaxed */
.dm-service-card__desc {
    color: var(--dm-brand-color-9);
    font-size: var(--dm-body);
    line-height: 1.625;
    margin: 0;
}


/* =============================================================================
   PROCESS STEPS — moose/dm-process-steps + moose/dm-process-step
============================================================================= */

.dm-process-steps {
    display: grid;
    grid-template-columns: repeat(var(--dm-process-columns, 3), 1fr);
    gap: var(--dm-grid-gap, 4rem);
    counter-reset: dm-step;
}

.dm-process-step {
    counter-increment: dm-step;
}

.dm-process-step__number::before {
    content: counter(dm-step, decimal-leading-zero);
    display: block;
    font-family: var(--dm-font-family-heading);
    font-size: var(--dm-h2);
    font-weight: 700;
    color: var(--dm-brand-color-2);
    opacity: 0.3;
    margin-bottom: var(--dm-space-sm);
    line-height: 1;
}

.dm-process-step__title {
    font-family: var(--dm-font-family-heading);
    font-size: var(--dm-h5);
    margin: 0 0 var(--dm-space-xs);
}

.dm-process-step__desc {
    color: var(--dm-brand-color-9);
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 767px) {
    .dm-process-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .dm-process-steps {
        grid-template-columns: 1fr;
    }
}

/* Process cards variant — horizontal step cards with numbered circles */
.dm-section--process-cards .dm-process-steps {
    gap: 2.4rem;
}

.dm-section--process-cards .dm-process-step {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 2.4rem;
    background: var(--dm-white);
    border: 1px solid var(--dm-brand-color-8);
    border-radius: 1.2rem;
    box-shadow: var(--dm-shadow-sm);
}

.dm-section--process-cards .dm-process-step__number {
    flex-shrink: 0;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background-color: hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-section--process-cards .dm-process-step__number::before {
    content: counter(dm-step);
    font-size: var(--dm-h5);
    color: var(--dm-brand-color-2);
    opacity: 1;
    margin-bottom: 0;
}

.dm-section--process-cards .dm-process-step__content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex: 1;
}

.dm-section--process-cards .dm-process-step__title {
    font-size: var(--dm-body-m);
}

.dm-section--process-cards .dm-process-step__desc {
    font-size: var(--dm-body);
    line-height: 1.625;
}


/* =============================================================================
   CTA BANNER — moose/dm-cta-banner
============================================================================= */

.dm-cta-banner {
    max-width: 82rem;
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-md);
}

/* Center alignment (default) */
.dm-cta-banner--center {
    text-align: center;
    margin-inline: auto;
}

.dm-cta-banner--center .dm-cta-banner__buttons {
    justify-content: center;
}

/* Left alignment */
.dm-cta-banner--left {
    text-align: left;
}

.dm-cta-banner--left .dm-cta-banner__buttons {
    justify-content: flex-start;
}

.dm-cta-banner__heading {
    font-family: var(--dm-font-family-heading);
    margin: 0 0 var(--dm-space-lg);
}

.dm-cta-banner__desc {
    font-size: var(--dm-body-m);
    line-height: 1.7;
    color: var(--dm-brand-color-9);
    margin: 0 0 var(--dm-space-sm);
}

.dm-cta-banner__secondary {
    font-size: var(--dm-body);
    color: var(--dm-brand-color-9);
    margin: 0 0 var(--dm-space-xl);
}

.dm-cta-banner__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm-space-md);
    margin-bottom: var(--dm-space-lg);
}

.dm-cta-banner__btn--secondary {
    --dm-button-color: transparent;
    --dm-button-text-color: var(--dm-brand-color-1);
    border-color: var(--dm-brand-color-1);
}

.dm-cta-banner__btn--secondary:hover {
    --dm-button-color: var(--dm-brand-color-1);
    --dm-button-text-color: var(--dm-white);
}

.dm-cta-banner__helper {
    font-size: 1.4rem;
    color: var(--dm-brand-color-9);
    margin: 0;
}

@media (max-width: 479px) {
    .dm-cta-banner__buttons {
        flex-direction: column;
        align-items: center;
    }
}


/* =============================================================================
   AUDIENCE CARD — moose/dm-audience-card
============================================================================= */

.dm-audience-card {
    text-align: center;
    padding: var(--dm-space-lg) var(--dm-space-xl);
    border-radius: var(--dm-radius-md);
    background: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.05);
    border: 1px solid hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.15);
    box-shadow: var(--dm-shadow-sm);
    /* Optional min-width / max-width from block attributes (see dm-audience-card.php). */
}

.dm-audience-card__icon {
    width: 5.6rem;
    height: 5.6rem;
    margin: 0 auto var(--dm-space-md);
    border-radius: var(--dm-radius-md);
    background: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dm-brand-color-2);
}

.dm-audience-card__title {
    font-family: var(--dm-font-family-heading);
    font-size: var(--dm-h5);
    margin: 0 0 var(--dm-space-xs);
}

.dm-audience-card__desc {
    font-size: var(--dm-body-s);
    color: var(--dm-brand-color-9);
    line-height: 1.6;
    margin: 0;
}

/* Lifespan variant — block attribute “Style variant” → Lifespan grid */
.dm-audience-card--lifespan {
    padding: 2.4rem;
    border-radius: 1.2rem;
}

@media (min-width: 768px) {
    .dm-audience-card--lifespan {
        padding: 3.2rem;
    }
}

.dm-audience-card--lifespan .dm-audience-card__icon {
    margin-bottom: 2rem;
    border-radius: 1.2rem;
}

.dm-audience-card--lifespan .dm-audience-card__title {
    font-size: 2rem;
}

.dm-audience-card--lifespan .dm-audience-card__desc {
    line-height: 1.625;
}

/* Info card variant — bordered, left-aligned card for assessment/service detail pages */
.dm-audience-card--info {
    text-align: left;
    padding: 2.4rem;
    border: 1px solid var(--dm-brand-color-8);
    border-radius: 1.2rem;
    box-shadow: var(--dm-shadow-sm);
    background: var(--dm-white);
}

@media (min-width: 768px) {
    .dm-audience-card--info {
        padding: 3.2rem;
    }
}

.dm-audience-card--info .dm-audience-card__icon {
    margin: 0 0 2rem;
    border-radius: 1.2rem;
    background-color: hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.1);
}

.dm-audience-card--info .dm-audience-card__title {
    font-size: var(--dm-h5);
    margin-bottom: 1.2rem;
}

.dm-audience-card--info .dm-audience-card__desc {
    font-size: var(--dm-body);
    line-height: 1.7;
}

/* Results card variant — left accent border, text-only cards on dark sections */
.dm-audience-card--results {
    text-align: left;
    padding: 2.4rem;
    background: var(--dm-white);
    border: 1px solid var(--dm-brand-color-8);
    border-left: 4px solid var(--dm-brand-color-2);
    border-radius: 1.2rem;
    box-shadow: var(--dm-shadow-sm);
}

.dm-audience-card--results .dm-audience-card__title {
    font-size: var(--dm-body-m);
    margin-bottom: 1.2rem;
    color: var(--dm-brand-color-1);
}

.dm-audience-card--results .dm-audience-card__desc {
    font-size: var(--dm-body);
    color: var(--dm-brand-color-9);
    line-height: 1.625;
}

/* Info callout — subtle bordered note block for inline callouts */
.dm-info-callout {
    padding: 2.4rem;
    background: var(--dm-white);
    border-radius: 1.2rem;
    border: 1px solid var(--dm-brand-color-8);
    box-shadow: var(--dm-shadow-sm);
}

@media (min-width: 768px) {
    .dm-info-callout {
        padding: 3.2rem;
    }
}

/* Trust split variant — block attribute “Style variant” → Trust split */
.dm-audience-card--trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.dm-audience-card--trust .dm-audience-card__icon {
    width: 6.4rem;
    height: 6.4rem;
    margin: 0 0 1.6rem;
    border-radius: var(--dm-radius-full);
    background: rgba(255, 255, 255, 0.15);
    color: var(--dm-white);
}

.dm-audience-card--trust .dm-audience-card__icon svg,
.dm-audience-card--trust .dm-audience-card__icon img {
    width: 2.8rem;
    height: 2.8rem;
}

.dm-audience-card--trust .dm-audience-card__title {
    font-size: 2.2rem;
    color: var(--dm-white);
    margin-bottom: 0.8rem;
}

.dm-audience-card--trust .dm-audience-card__desc {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.625;
}

@media (min-width: 480px) {
    .dm-audience-card--trust {
        align-items: flex-start;
        text-align: left;
    }
}



/* =============================================================================
   FEATURE ITEM — moose/dm-feature-item
============================================================================= */

.dm-feature-item {
    display: flex;
    gap: var(--dm-space-md);
    padding: var(--dm-space-lg);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--dm-radius-md);
    backdrop-filter: blur(4px);
}

.dm-feature-item__icon {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--dm-brand-color-2);
}

.dm-feature-item__title {
    font-family: var(--dm-font-family-heading);
    font-size: var(--dm-h5);
    margin: 0 0 var(--dm-space-xs);
}

.dm-feature-item__desc {
    font-size: 1.4rem;
    line-height: 1.6;
    opacity: 0.7;
    margin: 0;
}


/* =============================================================================
   FEATURE ITEM — DARK VARIANT
   Reusable dark-section card variant for philosophy/value checklists.
============================================================================= */

/* Match the reference card radius used in the homepage philosophy section. */
.dm-feature-item--dark {
    border-radius: 1.2rem;
}

/* Nudge the check icon down to align with the first text line. */
.dm-feature-item--dark .dm-feature-item__icon {
    margin-top: 0.4rem;
}

/* Keep feature titles bright and preserve the reference title/paragraph spacing. */
.dm-feature-item--dark .dm-feature-item__title {
    color: var(--dm-white);
    margin-bottom: var(--dm-space-sm);
}

/* Use the reference fluid small-text scale and white 70% contrast. */
.dm-feature-item--dark .dm-feature-item__desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.1786)), 1.6rem);
    line-height: 1.625;
    opacity: 1;
}

/* Checklist variant — compact feature items for report/benefit lists */
.dm-feature-item--checklist {
    padding: 0;
    background: transparent;
    gap: 1.2rem;
}

.dm-feature-item--checklist .dm-feature-item__icon {
    width: 2rem;
    height: 2rem;
    margin-top: 0.2rem;
}

.dm-feature-item--checklist .dm-feature-item__icon svg {
    width: 2rem;
    height: 2rem;
}

.dm-feature-item--checklist .dm-feature-item__title {
    font-family: inherit;
    font-size: var(--dm-body);
    font-weight: 400;
    color: var(--dm-brand-color-9);
    line-height: 1.6;
    margin: 0;
}


/* =============================================================================
   MEDIA CARD — moose/dm-media-card
   Reusable image-top linked card for assessments, services, and resources
============================================================================= */

/* Match the light bordered card treatment used in the reference assessment grids. */
.dm-media-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--dm-white);
    border: 1px solid var(--dm-brand-color-7);
    border-radius: 1.2rem;
    box-shadow: var(--dm-shadow-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease;
}

.dm-media-card:hover {
    box-shadow: var(--dm-shadow-md);
    text-decoration: none;
    color: inherit;
}

/* Keep the uploaded image locked to the 16:9 crop used by the reference cards. */
.dm-media-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.dm-media-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.dm-media-card:hover .dm-media-card__image img {
    transform: scale(1.05);
}

/* The card body uses a compact text stack so the CTA can sit at the bottom edge. */
.dm-media-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1.2rem;
    padding: 2.4rem;
}

.dm-media-card__title-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.dm-media-card__icon {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    background: hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.1);
    color: var(--dm-brand-color-2);
}

.dm-media-card__title {
    font-family: var(--dm-font-family-heading);
    font-size: var(--dm-body-m);
    line-height: 1.25;
    margin: 0;
    transition: color 0.2s ease;
}

.dm-media-card:hover .dm-media-card__title {
    color: var(--dm-brand-color-2);
}

.dm-media-card__desc {
    color: var(--dm-brand-color-9);
    font-size: var(--dm-body-s);
    line-height: 1.625;
    margin: 0;
}

/* The CTA row mirrors the inline accent link treatment from the reference. */
.dm-media-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    color: var(--dm-brand-color-2);
    font-size: var(--dm-body-s);
    font-weight: 500;
    line-height: 1.625;
}

.dm-media-card__cta svg {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.dm-media-card:hover .dm-media-card__cta svg {
    transform: translateX(0.4rem);
}

/* =============================================================================
   SERVICE CATEGORY CARD — moose/dm-service-category-card
   Large card with image, icon, title, description, pill links
============================================================================= */

/* Reference: rounded-xl = 12px, border-border, shadow-sm, card-hover */
.dm-scc {
    background: var(--dm-white);
    border: 1px solid var(--dm-brand-color-7);
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: var(--dm-shadow-sm);
    transition: box-shadow 0.3s ease;
}

.dm-scc:hover {
    box-shadow: var(--dm-shadow-md);
}

.dm-scc__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.dm-scc__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.dm-scc:hover .dm-scc__image img {
    transform: scale(1.05);
}

.dm-scc__body {
    padding: var(--dm-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-lg);
}

.dm-scc__header {
    display: flex;
    align-items: center;
    gap: var(--dm-space-md);
}

/* Reference: w-12 h-12 rounded-xl bg-primary/15, group-hover:bg-accent/20 */
.dm-scc__icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.2rem;
    background: hsl(var(--dm-bc-1-hs), var(--dm-bc-1-l), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--dm-brand-color-1);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover: icon container and SVG color change to accent */
.dm-scc:hover .dm-scc__icon {
    background: hsl(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.2);
    color: var(--dm-brand-color-2);
}

/* Reference: text-2xl = 24px fixed */
.dm-scc__title {
    font-family: var(--dm-font-family-heading);
    font-size: var(--dm-h4);
    margin: 0;
}

.dm-scc__desc {
    color: var(--dm-brand-color-9);
    font-size: var(--dm-body);
    line-height: 1.6;
    margin: 0;
}

/* Pill links — rounded-full tags linking to sub-services */
.dm-scc__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

/* Reference: px-4 py-2 rounded-full text-sm font-medium bg-primary/15 */
.dm-scc__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.6rem;
    border-radius: var(--dm-radius-full);
    font-size: var(--dm-body-s);
    font-weight: 500;
    background: hsl(var(--dm-bc-1-hs), var(--dm-bc-1-l), 0.15);
    color: var(--dm-body-color);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dm-scc__pill:hover {
    background: var(--dm-brand-color-2);
    color: var(--dm-white);
    text-decoration: none;
}

/* Services overview — category section icon box + heading row */
.dm-services-category {
    flex-direction: row;
    align-items: center;
    gap: 2.4rem;
}

.dm-services-category .dm-icon {
    width: 6.4rem;
    height: 6.4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.2rem;
    background: hsla(var(--dm-bc-2-hs), var(--dm-bc-2-l), 0.15);
}

.dm-services-category .dm-icon__svg,
.dm-services-category .dm-icon__svg path,
.dm-services-category .dm-icon__svg circle,
.dm-services-category .dm-icon__svg rect,
.dm-services-category .dm-icon__svg polygon,
.dm-services-category .dm-icon__svg polyline {
    fill: none;
    stroke: var(--dm-brand-color-2);
}

.dm-services-category .dm-icon__svg {
    width: 3rem;
    height: 3rem;
}


/* Team card — "Clients" custom field (dm_team_clients) */
.dm-dynamic-team__clients {
    font-size: 1.3rem;
    color: var(--dm-brand-color-9);
    line-height: 1.6;
    margin: 0.8rem 0 0!important;
}

.dm-dynamic-team__clients-label {
    font-weight: 600;
    color: var(--dm-brand-color-1);
}

/* Team profile — "Clients" custom field (dm_team_clients) */
.dm-team-profile__clients {
    font-size: 1.6rem;
    color: var(--dm-brand-color-9);
    line-height: 1.5;
    margin: 0 0 0.6rem;
}

.dm-team-profile__clients-label {
    font-weight: 600;
    color: var(--dm-brand-color-1);
}

/* Team card — "Languages" custom field (dm_team_languages), sits under Clients */
.dm-dynamic-team__languages {
    font-size: 1.3rem;
    color: var(--dm-brand-color-9);
    line-height: 1.6;
    /* Tighter than the Clients top margin so the two lines read as a pair */
    margin: 0.4rem 0 0!important;
}

.dm-dynamic-team__languages-label {
    font-weight: 600;
    color: var(--dm-brand-color-1);
}

/* Team profile — "Languages" custom field (dm_team_languages), sits under Clients */
.dm-team-profile__languages {
    font-size: 1.6rem;
    color: var(--dm-brand-color-9);
    line-height: 1.5;
    margin: 0 0 0.6rem;
}

.dm-team-profile__languages-label {
    font-weight: 600;
    color: var(--dm-brand-color-1);
}


/* Footer newsletter (Flodesk inline form). Flodesk styles the form itself in
   its own builder; the theme only gives it a centred, readable column and
   keeps it from touching the bottom bar. */
.dm-footer__newsletter {
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    padding-block: 4rem 1rem;
    text-align: center;
}
.dm-footer__newsletter-title {
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.dm-footer__newsletter input,
.dm-footer__newsletter button { max-width: 100%; }

/* Flodesk applies one title size to every screen, which is too large for this
   column: it wrapped to two lines on desktop and broke mid-word on a phone
   ("GOOGL / E"). Sized here in rem so it tracks the root scale and stays on
   one line from tablet up. The client can also change it in Flodesk. */
.dm-footer__newsletter [class*="__title"],
.dm-footer__newsletter [class*="__title"] * {
    font-size: 3rem !important;   /* measured: one line fits from 768px up */
    line-height: 1.2 !important;
}
@media (max-width: 767px) {
    .dm-footer__newsletter [class*="__title"],
    .dm-footer__newsletter [class*="__title"] * {
        font-size: 2.8rem !important;
        line-height: 1.2 !important;
    }
}