/* =================================================================
   Site-Specific CSS — per-client layer: Black Dog Luxury Travel
   Brand tokens, @font-face, header/footer layout, page styles.
   Uses --dm-* variables from global-settings.css (never override
   tokenized properties directly — change token values).
   Three palette sync points: this file, theme.json (palette
   fallbacks) and blocks/dm-block-controls.js (swatch previews).
   ================================================================= */

/* ── Fonts (self-hosted in /fonts, Google Fonts OFL) ─────────────
   Marcellus            — headings, nav (same as the original site)
   Jost 300/400/500     — body / labels (replaces Arboria Light/Medium)
   Cormorant Garamond   — italic serif for small / long accent lines
   Priestacy            — script for short display accent lines (Paula's
                          own licensed font, supplied 2026-09-24; replaces
                          the original Milkshake). Parisienne stays as the
                          fallback and as the alternative Kevin proposed. */
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/marcellus-regular.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/jost-300.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jost-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-garamond-500italic.woff2') format('woff2'); }
@font-face { font-family: 'Priestacy'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/priestacy.woff2') format('woff2'), url('../fonts/priestacy.woff') format('woff'); }
@font-face { font-family: 'Parisienne'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/parisienne-regular.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cormorant-garamond-500.woff2') format('woff2'); }

:root {
    /* ── Brand palette (from blackdogluxurytravel.com) ──
       1 navy #052851 · 2 teal #66BFBF (CTA) · 3 blue #175EA5 (accent text)
       4 light teal #C7E7E7 (CTA hover) · 5 slate blue #375374 (manifesto band)
       6 light grey section BG (#f7f7f7) · 7 border · 8 grey panel (#eaeaea) · 9 muted text */
    --dm-bc-1-hs: 212, 88%;  --dm-bc-1-l: 17%;
    --dm-bc-2-hs: 180, 41%;  --dm-bc-2-l: 57%;
    --dm-bc-3-hs: 210, 76%;  --dm-bc-3-l: 37%;
    --dm-bc-4-hs: 180, 40%;  --dm-bc-4-l: 84%;
    --dm-bc-5-hs: 211, 36%;  --dm-bc-5-l: 34%;
    --dm-bc-6-hs: 0, 0%;     --dm-bc-6-l: 97%;
    --dm-bc-7-hs: 0, 0%;     --dm-bc-7-l: 85%;
    --dm-bc-8-hs: 0, 0%;     --dm-bc-8-l: 92%;
    --dm-bc-9-hs: 0, 0%;     --dm-bc-9-l: 40%;
    --dm-body-color: hsl(0, 0%, 0%);

    /* ── Type ── */
    --dm-font-family-body: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
    --dm-font-family-heading: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
    --dm-font-family-accent: 'Cormorant Garamond', 'Marcellus', Georgia, serif;
    --dm-font-family-script: 'Priestacy', 'Parisienne', 'Cormorant Garamond', Georgia, cursive;

    /* ── Sizes: the original is a 1280px design scaled with the viewport
       (see the html rule below: 1rem = 10px at 1280, 11.25px at 1440,
       15px at 1920). Values below are the original's px at 1280. ── */
    --dm-h1: 3rem;        /* hero title 30px */
    --dm-h2: 3.2rem;      /* section titles 32px */
    --dm-h3: 2.5rem;      /* panel titles 25px */
    --dm-h4: 2.4rem;
    --dm-h5: 1.8rem;
    --dm-h6: 1.5rem;
    --dm-body: 1.5rem;    /* 15px, line-height 1.85 */
    --dm-body-s: 1.2rem;
    --dm-body-m: 1.8rem;
    --dm-body-l: 2.4rem;
    --dm-ch: 62ch;

    /* Accent (italic serif) sizes — replaces the 40px / 30px / 20px script lines */
    --bd-accent-l: 4rem;
    --bd-accent-m: 3rem;
    --bd-accent-s: 2.4rem;   /* script lines need a little more size to stay readable */

    /* Eyebrow / label: 12px, uppercase, wide tracking */
    --bd-label-size: 1.2rem;
    --bd-label-tracking: 0.17em;

    /* ── Buttons: square corners, 12px uppercase tracked label ── */
    --dm-button-border-radius: 0;
    --dm-button-padding: 1.3rem 2.8rem;

    /* ── Header logo (crest): slimmer than the original's 285px bar ── */
    --dm-logo-h: 7rem;
    --dm-logo-h-sticky: 4.8rem;

    /* ── Layout (original at 1280: ~1130px content, 45px sides, ~90px section padding).
       Both values scale down on small screens — a fixed 4.4rem gutter is 44px at
       390px wide, and section + container each apply it, which squeezes content. ── */
    --dm-container-width: 120rem;
    --dm-sec-pad-block: clamp(4rem, calc(4rem + ((1vw - 0.32rem) * 5.104)), 8.9rem);
    --dm-sec-pad-inline: clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 2.5)), 4.4rem);
}

/* Proportional scaling above 1280px, like the original theme. Capped at
   1920px (1rem = 15px) so very wide screens don't keep growing. */
@media (min-width: 1280px) { html { font-size: calc(100vw / 128); } }
@media (min-width: 1920px) { html { font-size: 15px; } }

/* ── Global type treatments ───────────────────────────────────── */
body { font-weight: 300; line-height: 1.85; }
strong, b { font-weight: 500; }

h1, h2, h3, h4, h5, h6 {
    --dm-font-weight: 400;
    --dm-line-height: 1.2;
    letter-spacing: 0.02em;
}
h3 { letter-spacing: -0.04em; }

/* Text styles — dm-text "Text style" attribute (dm_text_style) renders .dm-text--<style> */
/* Accent lines. "accent" = Parisienne script for short display lines (tagline,
   quotes, band lines); "accent-serif" = Cormorant italic for small or long
   lines (Services "Perfect for", long sentences) where a script reads poorly. */
.dm-text--accent,
.dm-text--accent-serif {
    --dm-font-family: var(--dm-font-family-accent);
    --dm-font-size: var(--bd-accent-m);
    --dm-font-weight: 400;
    --dm-text-color: var(--dm-brand-color-3);
    --dm-line-height: 1.25;
    font-family: var(--dm-font-family);
    font-size: var(--dm-font-size);
    font-weight: var(--dm-font-weight);
    font-style: italic;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: var(--dm-line-height);
    color: var(--dm-text-color);
}
.dm-text--accent {
    --dm-font-family: var(--dm-font-family-script);
    --dm-line-height: 1.45;   /* Priestacy has tall loops; 1.25 collides when it wraps */
    font-style: normal;
    letter-spacing: 0;
}

/* Subtitle — the teal uppercase line under headings (Arboria Medium 27px on the original) */
.dm-text--subtitle {
    --dm-font-family: var(--dm-font-family-body);
    --dm-font-weight: 500;
    --dm-text-color: var(--dm-brand-color-2);
    --dm-font-size: 2.4rem;
    --dm-line-height: 1.3;
    font-family: var(--dm-font-family);
    font-weight: var(--dm-font-weight);
    font-size: var(--dm-font-size);
    line-height: var(--dm-line-height);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--dm-text-color);
}

/* Label / eyebrow — small uppercase tracked line */
.dm-text--label {
    --dm-font-family: var(--dm-font-family-body);
    --dm-font-weight: 500;
    --dm-font-size: var(--bd-label-size);
    font-family: var(--dm-font-family);
    font-weight: var(--dm-font-weight);
    font-size: var(--dm-font-size);
    letter-spacing: var(--bd-label-tracking);
    text-transform: uppercase;
}

/* Welcome-audio label in the script font (Paula, 2026-09-25) */
.dm-audio { --dm-audio-label-font: var(--dm-font-family-script); --dm-audio-label-style: normal; }

/* Buttons — uppercase tracked label like the original */
.btn {
    font-family: var(--dm-font-family-body);
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.btn:hover {
    --dm-button-color: var(--dm-brand-color-4);
    --dm-button-text-color: var(--dm-black);
    opacity: 1;
}

/* ── Header: fixed, with a clean compact bar once scrolled (global.js adds
      .sticky past 100px). Centred crest with four items split either side;
      Home and Purpose and Paws are hamburger-only on desktop, as on the
      original. Never put transform / filter / backdrop-filter on the header:
      any of them would trap the full-screen mobile menu panel inside it. ── */
.dm-header { position: fixed; transition: background-color 0.35s ease, box-shadow 0.35s ease; }
.dm-header.sticky {
    background-color: var(--dm-white);
    box-shadow: 0 1px 0 hsla(var(--dm-bc-1-hs), var(--dm-bc-1-l), 0.1);
}
.dm-header__topbar { display: none; }
.dm-header__main-inner { height: auto; padding-block: 1.4rem; transition: padding 0.35s ease; }
.dm-header.sticky .dm-header__main-inner { padding-block: 0.8rem; }
.main-nav > ul > li > a {
    font-family: var(--dm-font-family-heading);
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
@media (min-width: 992px) {
    .dm-header__main-inner { justify-content: center; gap: clamp(2rem, 4.5vw, 7rem); padding-block: 1.6rem; }
    .dm-header.sticky .dm-header__main-inner { padding-block: 0.8rem; }
    .nav-search-wrapper,
    .nav-search-wrapper > .main-nav,
    .nav-search-wrapper > .main-nav > ul { display: contents; }
    .dm-header-logo { order: 3; margin-inline: clamp(2rem, 4vw, 6rem); }
    .main-nav > ul > li { order: 5; }
    .main-nav > ul > li:nth-child(1),
    .main-nav > ul > li:nth-child(6) { display: none; }
    .main-nav > ul > li:nth-child(2) { order: 1; }
    .main-nav > ul > li:nth-child(3) { order: 2; }
    .dm-header__cta, .mobile-menu { order: 9; }
}

/* Homepage, before scrolling: no bar — only a "MENU" trigger top right over
   the hero. Once scrolled it becomes the same compact bar as inner pages. */
body.home { padding-top: 0 !important; }
.home .dm-header:not(.sticky) { background: transparent; }
.home .dm-header:not(.sticky) .dm-header-logo,
.home .dm-header:not(.sticky) .main-nav { display: none; }
.home .dm-header:not(.sticky) .dm-header__main-inner { justify-content: flex-end; padding: 3.8rem 9rem 0 0; }
@media (max-width: 767px) { .home .dm-header:not(.sticky) .dm-header__main-inner { padding: 2.2rem 2.6rem 0 0; } }
.home .dm-header:not(.sticky) .mobile-menu { display: flex; }
/* Touch target: the bare trigger is ~30x19, below the 44px guideline */
.mobile-menu__trigger { min-width: 4.4rem; min-height: 4.4rem; align-items: center; justify-content: center; }
.home .dm-header:not(.sticky) .mobile-menu__trigger { background: transparent; flex-direction: row; align-items: center; justify-content: flex-end; gap: 1.2rem; }
.home .dm-header:not(.sticky) .mobile-menu__trigger::before {
    content: "MENU";
    font-family: var(--dm-font-family-heading);
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    color: var(--dm-white);
}
.home .dm-header:not(.sticky) .mobile-menu__trigger-lines { display: none; }

/* ── Section variants (dm-section "variant" attribute → .dm-section--<name>) ── */
/* Home hero: full-viewport fading slideshow. Original (measured at 1892px,
   converted to the 1280 base): crest ~28rem wide, ~9rem above the title;
   full-width 1px line between title and tagline (10rem in from the edges);
   "n / total" counter at the right end of the title row; thin 5.4rem
   line-arrows flanking the tagline, 8.8rem from the edges. */
.dm-section--hero { min-height: 100vh; padding-block: 0; justify-content: flex-end; }
.dm-section--hero > .dm-container { flex-grow: 0; padding-bottom: 3.1rem; }
.dm-section--hero > .dm-container > .dm-flex { align-self: stretch; }
.dm-section--hero > .dm-container > .dm-flex:last-child { border-top: 1px solid rgba(255, 255, 255, 0.85); margin-inline: 5.8rem; }
.dm-section--hero .wp-block-moose-dm-slider { position: absolute; inset: 0; overflow: hidden; }
.dm-section--hero .wp-block-moose-dm-slider,
.dm-section--hero .splide,
.dm-section--hero .splide__track,
.dm-section--hero .splide__list,
.dm-section--hero .splide__slide,
.dm-section--hero .splide__slide > div { height: 100%; }
.dm-section--hero .splide { gap: 0; }
.dm-section--hero .splide__slide > div { display: flex; }
.dm-section--hero .splide__slide .dm-image { width: 100%; height: 100%; object-fit: cover; }
/* Arrows and counter sit above the content layer (z-index 2) so they stay clickable */
.dm-section--hero {
    --bd-hero-rule-inset: calc(var(--dm-sec-pad-inline) + 5.8rem);   /* where the rule under the title ends */
}
.dm-section--hero .splide__arrows { position: absolute; left: 0; right: 0; bottom: calc(3.1rem + 2.125rem - 1.2rem); top: auto; height: 2.4rem; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--bd-hero-rule-inset); pointer-events: none; }
.dm-section--hero .splide__arrow { pointer-events: auto; cursor: pointer; background: transparent; border: 0; box-shadow: none; width: 5.4rem; height: 2.4rem; padding: 0; opacity: 1; aspect-ratio: auto; }
.dm-section--hero .splide__arrow svg { display: none; }
/* Long hairline with a small open head, like the original */
.dm-section--hero .splide__arrow::before { content: ""; display: block; width: 5.4rem; height: 1.2rem; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M79 6H1.5M6.5 1.5 1.5 6l5 4.5'/%3E%3C/svg%3E"); }
.dm-section--hero .splide__arrow--next::before { transform: scaleX(-1); }
.dm-section--hero .splide__counter { display: block; position: absolute; right: var(--bd-hero-rule-inset); bottom: 14.6rem; z-index: 3; font-family: var(--dm-font-family-heading); font-size: 1.1rem; letter-spacing: 0.1em; color: var(--dm-white); }
.dm-section--hero .overlay { pointer-events: none; }

.dm-section--hero .dm-container { text-align: center; }

/* A section that pads itself already provides the page gutter, so the container
   inside it must not add a second one — nested panels otherwise compound it
   (4 levels x 2 x 4.4rem left almost no room at 390px). */
.dm-section-padding > .dm-container { padding-inline: 0; }

/* Inset grey panels (intro, quote) sit inside a page-width section; the
   outer section's padding comes from its block attributes. */
.dm-section--panel > .dm-container > .dm-section { padding-inline: var(--dm-sec-pad-inline); }

/* Intro: 1px navy rule between the portrait column and the copy (original: full panel height) */
@media (min-width: 768px) {
    .dm-section--intro .dm-grid > :last-child { border-left: 1px solid var(--dm-brand-color-1); padding-left: 7.7rem; }
}
/* Panel headings/subtitles: tight tracking like the original (Marcellus 28px at -0.04em) */
.dm-section--intro h2, .dm-section--cta-band h2 { letter-spacing: -0.04em; }
.dm-section--intro .dm-text--subtitle { letter-spacing: 0; }

/* CTA band: small white monogram watermark centred behind the heading */
.dm-section--cta-band .dm-bg-img { object-fit: contain; height: 13rem !important; top: 50%; transform: translateY(-50%); }
.dm-section--cta-band .dm-container .dm-text { position: relative; z-index: 1; }

/* Destination cards on light grey panels; text centred */
.dm-section--destinations .dm-text,
.dm-section--reviews .dm-text,
.dm-section--manifesto .dm-text,
.dm-section--quote .dm-text { text-align: center; }

/* Accolades: 1px navy rule on the right content column (starts below the
   headings, like the original) and a short vertical divider between the
   two press groups in the Features column. */
@media (min-width: 992px) {
    .dm-section--accolades .dm-container > .dm-grid:last-child > :last-child { border-left: 1px solid var(--dm-brand-color-1); }
    .dm-section--accolades .dm-container > .dm-grid:last-child > :first-child > .dm-flex + .dm-flex::before { content: ""; display: block; width: 1px; height: 4rem; background: var(--dm-brand-color-1); margin: 0 auto 0.5rem; }
    /* Recognized badges: equal boxes, three per row, artwork contained */
    .dm-section--accolades .dm-container > .dm-grid:last-child > :last-child > .dm-image {
        flex: 0 0 calc((100% - 5rem) / 2);   /* four badges → 2 x 2 */
        height: 14rem;
        object-fit: contain;
    }
}

/* Inner-page hero (image ~36% of the width tall, like the original) with the
   grey title panel just overlapping its bottom edge */
.dm-section--page-hero { min-height: 36.5vw; }
/* Title panel: vertically centred on the hero's bottom edge (translate up by
   half its height, pull the following content up by the same amount — the
   panel is ~13.4rem tall at every width because all sizes are rem-based). */
.dm-section--title-panel { margin-top: 0; transform: translateY(-50%); margin-bottom: -6.7rem; }
.dm-section--title-panel > .dm-container > .dm-section { text-align: center; background-color: var(--dm-white); box-shadow: 0 1.2rem 3.2rem rgba(5, 40, 81, 0.14); }
@media (max-width: 767px) { .dm-section--title-panel { margin-bottom: -5rem; } }

/* Team member block: photo collage (left) + bio (right). The collage keeps
   the original's overlapping layout, positioned in percentages over a spacer
   whose percentage padding sets the height. No `aspect-ratio` and no grid
   sizing: on Safari (Paula, 26.6.2, reported 2026-09-25) the `1fr` rows did
   not resolve from the aspect-ratio height, so the photos took their natural
   size and spilled over the next section. Percentage padding plus absolute
   positioning avoids both mechanisms. */
.dm-section--team-4 .dm-grid > :first-child,
.dm-section--team-2 .dm-grid > :first-child,
.dm-section--team-1 .dm-grid > :first-child { display: block; position: relative; width: 100%; align-self: center; }
.dm-section--team-4 .dm-grid > :first-child::before,
.dm-section--team-2 .dm-grid > :first-child::before,
.dm-section--team-1 .dm-grid > :first-child::before { content: ""; display: block; width: 100%; }
.dm-section--team-4 .dm-grid > :first-child::before { padding-top: 125.6%; }   /* taller so the puppy photo can run to the bottom */
.dm-section--team-2 .dm-grid > :first-child::before { padding-top: 108.889%; }   /*  980 / 900 */
.dm-section--team-1 .dm-grid > :first-child::before { padding-top: 68.889%; }    /*  620 / 900 */
.dm-section--team-4 .dm-grid > :first-child > .dm-image,
.dm-section--team-2 .dm-grid > :first-child > .dm-image,
.dm-section--team-1 .dm-grid > :first-child > .dm-image { position: absolute; object-fit: cover; }
/* Percentages below are the old 12-column / 12-row grid areas. */
/* Paula's four photos, re-staggered to the client's reference (2026-09-29):
   portrait large and in front, the standing dog tucked behind its lower right,
   then the sitting dog and the puppy stepping down to the bottom edge. */
.dm-section--team-4 .dm-grid > :first-child > .dm-image:nth-child(1) { left: 2.3%; top: 1.8%; width: 55.5%; height: 54.8%; object-position: 62% 35%; z-index: 2; }
.dm-section--team-4 .dm-grid > :first-child > .dm-image:nth-child(2) { left: 48.8%; top: 42.4%; width: 48.8%; height: 35.5%; object-position: 50% 38%; }   /* taller frame shows ~61% of this tall portrait: head down to the front legs, tail in shot */
.dm-section--team-4 .dm-grid > :first-child > .dm-image:nth-child(3) { left: 13.6%; top: 65.5%; width: 48.3%; height: 28%; z-index: 1; }
.dm-section--team-4 .dm-grid > :first-child > .dm-image:nth-child(4) { left: 57.9%; top: 72.7%; width: 29.3%; height: 27.3%; z-index: 1; }   /* taller than wide */
.dm-section--team-2 .dm-grid > :first-child > .dm-image:nth-child(1) { left: 0; top: 0; width: 66.667%; height: 75%; }
.dm-section--team-2 .dm-grid > :first-child > .dm-image:nth-child(2) { left: 50%; top: 50%; width: 41.667%; height: 50%; }
.dm-section--team-1 .dm-grid > :first-child > .dm-image:nth-child(1) { left: 0; top: 0; width: 75%; height: 100%; }
.dm-section--team-4 .dm-text, .dm-section--team-2 .dm-text, .dm-section--team-1 .dm-text { text-align: left; }

/* Kind Words: testimonial rows (image left, quote right) separated by a
   full-bleed 1px blue rule, as on the original. */
.dm-section--testimonials .dm-text { text-align: left; }
.dm-section--testimonials .dm-container > .dm-grid + .dm-grid { position: relative; }
.dm-section--testimonials .dm-container > .dm-grid + .dm-grid::before {
    content: "";
    position: absolute;
    top: calc(var(--dm-gap-value, 4rem) / -2);
    left: 50%;
    width: 100vw;
    height: 1px;
    transform: translateX(-50vw);
    background-color: var(--dm-brand-color-3);
}
@media (max-width: 991px) {
    /* one column on mobile: the 9rem column gutter would be far too tall as a row gap */
    .dm-section--testimonials .dm-container > .dm-grid { --dm-gap-value: 3rem; }
}
/* Quote attribution — small uppercase line under a testimonial headline */
.dm-text--quote-author {
    --dm-font-family: var(--dm-font-family-body);
    --dm-font-size: 1.1rem;
    font-family: var(--dm-font-family);
    font-size: var(--dm-font-size);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* Below 1280px the root stays 10px (the viewport scaling starts there), so
   rem-based small sizes bottom out around 10-12px. Hold a readable floor. */
@media (max-width: 1279px) {
    .dm-text--label { --dm-font-size: 1.3rem; font-size: 1.3rem; }
    .dm-text--quote-author { --dm-font-size: 1.3rem; }
}

/* Services intro: two-photo collage (variant collage-2b) + centred copy with a
   left rule; the three collections (alternating image side); inspired photo
   band with the overlapping sustainable-travel box. */
.dm-section--collage-2b .dm-grid > :first-child,
.dm-section--collage-contact .dm-grid > :first-child { display: block; position: relative; width: 100%; align-self: center; }
.dm-section--collage-2b .dm-grid > :first-child::before,
.dm-section--collage-contact .dm-grid > :first-child::before { content: ""; display: block; width: 100%; }
.dm-section--collage-2b .dm-grid > :first-child::before { padding-top: 100%; }
.dm-section--collage-contact .dm-grid > :first-child::before { padding-top: 116.373%; }   /* 661 / 568 */
.dm-section--collage-2b .dm-grid > :first-child > .dm-image,
.dm-section--collage-contact .dm-grid > :first-child > .dm-image { position: absolute; object-fit: cover; }
.dm-section--collage-2b .dm-grid > :first-child > .dm-image:nth-child(1) { left: 0; top: 0; width: 50%; height: 58.333%; z-index: 1; }   /* in front (Paula, 2026-09-29) */
.dm-section--collage-2b .dm-grid > :first-child > .dm-image:nth-child(2) { left: 33.333%; top: 33.333%; width: 50%; height: 58.333%; }
/* Contact: two overlapping photos, the second offset down and right */
.dm-section--collage-contact .dm-grid > :first-child > .dm-image:nth-child(1) { left: 0; top: 0; width: 58.333%; height: 58.333%; }
.dm-section--collage-contact .dm-grid > :first-child > .dm-image:nth-child(2) { left: 41.667%; top: 41.667%; width: 58.333%; height: 58.333%; }
@media (min-width: 992px) {
    .dm-section--collage-contact .dm-grid > :last-child { border-left: 1px solid var(--dm-brand-color-1); padding-left: 5rem; }
    .dm-section--collage-2b .dm-grid > :last-child { border-left: 1px solid var(--dm-brand-color-1); padding-left: 5rem; }
}
/* Services collections: image (capped) beside a vertically centred text column;
   the -reverse variant puts the image on the right on desktop only. */
.dm-section--collection .dm-text,
.dm-section--collection-reverse .dm-text { text-align: left; }
@media (min-width: 992px) {
    .dm-section--collection .dm-grid { grid-template-columns: minmax(0, 44rem) minmax(0, 54rem); justify-content: center; column-gap: 9rem; }
    .dm-section--collection-reverse .dm-grid { grid-template-columns: minmax(0, 54rem) minmax(0, 44rem); justify-content: center; column-gap: 9rem; }
    .dm-section--collection-reverse .dm-grid > :first-child { order: 2; }
    .dm-section--collection .dm-grid > .dm-flex,
    .dm-section--collection-reverse .dm-grid > .dm-flex { align-self: stretch; }
}

/* "Inspired by how you live." photo band; the next section's box overlaps
   its lower edge (the original Pinnacle Experience layout). */
.dm-section--inspired {
    min-height: clamp(42rem, 50vw, 80rem);
    overflow: hidden;
    justify-content: center;
    padding-top: 0;
    padding-bottom: var(--bd-overlap);
    --bd-overlap: 14rem;
}
/* Text centred between the photo's top edge and the top of the overlapping box */
.dm-section--inspired > .dm-container { flex: 1 1 auto; justify-content: center; }
/* Soft, feathered navy glow behind the two lines for legibility (no hard edges) */
.dm-section--inspired > .dm-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100%, 76rem);
    height: 28rem;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(5, 40, 81, 0.6), rgba(5, 40, 81, 0.32) 55%, rgba(5, 40, 81, 0) 100%);
    filter: blur(1.2rem);
    z-index: -1;
    pointer-events: none;
}
.dm-section--inspired .dm-text { text-align: center; text-shadow: 0 1px 1.2rem rgba(5, 40, 81, 0.35); }
.dm-section--inspired .dm-text:not(.dm-text--accent) { font-family: var(--dm-font-family-heading); font-size: 2.2rem; letter-spacing: 0.02em; }
.dm-section--overlap-panel { margin-top: -14rem; }
.dm-section--overlap-panel > .dm-container > .dm-section {
    align-items: center;
    text-align: center;
    background-color: var(--dm-white);
    box-shadow: 0 1.2rem 3.2rem rgba(5, 40, 81, 0.14);
}
.dm-section--overlap-panel .dm-text { text-align: center; }
@media (max-width: 767px) {
    .dm-section--inspired { --bd-overlap: 8rem; min-height: 42rem; }
    .dm-section--inspired > .dm-container::before { width: 100%; height: 24rem; }
    .dm-section--overlap-panel { margin-top: -8rem; }
    .dm-section--inspired .dm-text:not(.dm-text--accent) { font-size: 1.9rem; }
}

/* "Behind the scenes" band: left column (icon, title, name, arrows) with a
   1px white rule, facts carousel (3 per view) on the right */
.dm-section--facts .dm-container { position: relative; }
@media (min-width: 992px) {
    .dm-section--facts .dm-grid > :last-child { border-left: 1px solid var(--dm-white); padding-left: 3rem; }
}
.dm-section--facts .dm-text { text-align: center; }
.dm-section--facts .splide { position: static; gap: 0; }
.dm-section--facts .splide__arrows { position: absolute; left: 0; bottom: 0; width: 31%; display: flex; justify-content: center; gap: 1.2rem; pointer-events: none; }
.dm-section--facts .splide__arrow { pointer-events: auto; cursor: pointer; background: transparent; border: 0; box-shadow: none; width: 3.4rem; height: 1.2rem; padding: 0; opacity: 1; aspect-ratio: auto; }
.dm-section--facts .splide__arrow svg { display: none; }
.dm-section--facts .splide__arrow::before { content: ""; display: block; width: 3.4rem; height: 1.2rem; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M79 6H1.5M6.5 1.5 1.5 6l5 4.5'/%3E%3C/svg%3E"); }
.dm-section--facts .splide__arrow--next::before { transform: scaleX(-1); }
.dm-section--facts .splide__arrow:disabled { opacity: 0.35; }
.dm-section--facts .splide__slide > div { display: flex; flex-direction: column; align-items: center; padding: 0 1.5rem; }

/* Follow band + Instagram feed strip: tight label bar, edge-to-edge tiles */
.dm-section--follow { text-align: center; }
.dm-section--follow a { color: inherit; text-decoration: none; }
.dm-section--follow .dm-text { font-size: 1.35rem; }
.dm-section--instagram #sb_instagram { padding: 0 !important; }
.dm-section--instagram #sb_instagram .sbi_photo_wrap, .dm-section--instagram #sb_instagram .sbi_photo { border-radius: 0; }

/* ── Footer: black, four columns like the original (measured at 1892px) ──
   name + affiliate | monogram + socials | menu | phone / email / address + button */
.dm-footer { background-color: var(--dm-black); }
.dm-footer__col--services:not(:has(ul)),
.dm-footer__col--conditions:not(:has(ul)) { display: none; }
.dm-footer__site-name { font-family: var(--dm-font-family-heading); font-size: 2.7rem; line-height: 1.2; color: var(--dm-white); max-width: 12ch; margin: 0 0 var(--dm-space-lg); }
.dm-footer__desc { font-family: var(--dm-font-family-body); font-weight: 500; font-size: 1rem; line-height: 1.7; letter-spacing: 0.15em; text-transform: uppercase; max-width: 34ch; color: var(--dm-white); }
.dm-footer__heading { display: none; }
.dm-footer__link-list { display: flex; flex-direction: column; gap: 2.4rem; text-align: center; }
.dm-footer__link-list li a { font-family: var(--dm-font-family-heading); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--dm-white); }
.dm-footer__logo img { height: 11.5rem; }
.dm-footer__socials .dm-socials { display: flex; gap: 1.2rem; justify-content: center; }
.dm-footer__socials .dm-socials a { color: var(--dm-white); width: 2.9rem; height: 2.9rem; border: 1px solid var(--dm-white); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.dm-footer__socials .dm-socials a[aria-label^="Instagram"] { order: 1; }
.dm-footer__socials .dm-socials a[aria-label^="Facebook"] { order: 2; }
.dm-footer__socials .dm-socials a[aria-label^="Linkedin"] { order: 3; }
.dm-footer__socials .dm-socials svg { width: 1.4rem; height: 1.4rem; }
.dm-footer__location-name, .dm-footer__location-map { display: none; }
.dm-footer__location-details, .dm-footer__email, .dm-footer__location-phone, .dm-footer__location-address { font-weight: 500; font-size: 1rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dm-white); }
.dm-footer__email svg, .dm-footer__location-phone svg, .dm-footer__location-address svg { display: none; }
.dm-footer a.dm-footer__email, .dm-footer .dm-footer__location-phone a { color: var(--dm-white); text-decoration: none; }
.dm-footer__cta { margin-top: var(--dm-space-xl); padding: 1.6rem 4rem; }
/* a.-prefixed: the blueprint's `.dm-footer a` (0,1,1) dims links to 70% white */
.dm-footer a.dm-footer__cta, .dm-footer a.dm-footer__cta:hover { color: var(--dm-button-text-color); }
.dm-footer__bottom { border-top: 0; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.dm-footer__bottom-link { display: none; }
@media (min-width: 992px) {
    .dm-footer > .dm-container {
        display: grid;
        grid-template-columns: 1.4fr 0.9fr 1fr 1.4fr;
        grid-template-areas: "name logo links phone" "name logo links email" "desc logo links address" "desc socials links cta" "news news news news" "bottom bottom bottom bottom";
        column-gap: var(--dm-space-2xl);
        row-gap: 1rem;
        align-items: start;
        padding-top: 4.5rem;
        padding-bottom: 2rem;
    }
    .dm-footer__columns, .dm-footer__col--info, .dm-footer__locations, .dm-footer__location-card, .dm-footer__location-details { display: contents; }
    .dm-footer__site-name { grid-area: name; align-self: end; margin: 0; }
    .dm-footer__desc { grid-area: desc; margin-top: 1rem; }
    .dm-footer__logo { grid-area: logo; justify-self: center; margin-bottom: 0; }
    .dm-footer__socials { grid-area: socials; justify-self: center; margin: 0.5rem 0 0; }
    .dm-footer__quick-links { grid-area: links; justify-self: center; }
    .dm-footer__location-phone { grid-area: phone; margin-top: 1.5rem; }
    .dm-footer__email { grid-area: email; }
    .dm-footer__location-address { grid-area: address; }
    .dm-footer__cta { grid-area: cta; justify-self: start; }
    .dm-footer__newsletter { grid-area: news; }
    .dm-footer__bottom { grid-area: bottom; margin-top: 5rem; padding-top: 0; }
    .dm-footer__pride, .dm-footer__land-ack { display: none; }
}

/* ── Slide-out menu: teal side panel like the original (MENU / CLOSE
      header with a rule, centred Marcellus items, no page dimming).
      z-index sits above the hero slideshow arrows on purpose. ─────── */
.mobile-menu__background { top: 0; background-color: transparent; }
.mobile-menu__panel {
    top: 0;
    width: min(100%, 31rem);
    padding: 3.4rem 3.4rem 3rem;
    background-color: var(--dm-brand-color-2);
    z-index: var(--dm-z-control);
    box-shadow: none;
}
.mobile-menu__panel::before {
    content: "MENU";
    display: block;
    font-family: var(--dm-font-family-heading);
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    color: var(--dm-white);
    padding-bottom: 2.4rem;
    border-bottom: 1px solid var(--dm-white);
    margin-bottom: 4.4rem;
}
.mobile-menu__close {
    display: block;
    top: 3.4rem;
    right: 3.4rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--dm-white);
    font-family: var(--dm-font-family-heading);
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    line-height: 1;
}
.mobile-menu__close svg { display: none; }
.mobile-menu__close::before { content: "CLOSE"; }
.main-nav-mobile ul.menu { gap: 1.6rem; align-items: center; }
.main-nav-mobile li { font-size: 1.4rem; align-items: center; }
.main-nav-mobile li a,
.main-nav-mobile li.current-menu-item > a,
.main-nav-mobile li.current-menu-ancestor > a {
    justify-content: center;
    width: auto;
    padding: 0.4rem 0.8rem;
    color: var(--dm-white);
    font-family: var(--dm-font-family-heading);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: none;
    border-radius: 0;
}
.main-nav-mobile li a:hover { color: var(--dm-white); background: none; opacity: 0.75; }
.mobile-menu__footer, .dm-header__cta--mobile { display: none; }


/* ══ Mobile (<=767px): hero and slide-out menu matched to the live site ══
   Measured on blackdogluxurytravel.com at 390x844: crest 255px wide spanning
   y224-451, title 28px from y513, script tagline 28px from y589, hairline rule
   at y757, arrows and slide counter at y787-791, full-width teal menu panel
   with sentence-case items. Font sizes are set directly, not through
   --dm-font-size, because the blocks write that custom property inline. */
@media (max-width: 767px) {
    .dm-section--hero > .dm-container {
        gap: 0;
        justify-content: flex-end;
        padding-top: 11rem;      /* keeps the crest clear of the MENU label */
        padding-bottom: 8.6rem;  /* foot for the rule, arrows and counter */
    }
    .dm-section--hero > .dm-container > .dm-flex:first-child { padding-bottom: 12.5rem; }  /* block writes --dm-pad-b-calc inline, so set the longhand */
    .dm-section--hero > .dm-container > .dm-flex:first-child .dm-image { width: 73.5%; }
    .dm-section--hero h1.dm-text { font-size: 2.8rem; line-height: 1.2; }

    /* Tagline: plain centred text, hairline moves below it as on the original */
    .dm-section--hero .dm-text--accent { font-size: 2.8rem; --dm-line-height: 1.6; line-height: 1.6; }
    .dm-section--hero > .dm-container > .dm-flex:last-child {
        border-top: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.85);
        margin-inline: 0;
        padding-top: 0.6rem;
        padding-bottom: 5.2rem;   /* live leaves ~67px between the tagline and the rule */
    }
    .dm-section--hero .splide__arrows { padding-inline: 2.4rem; bottom: 2.2rem; }
    .dm-section--hero .splide__arrow { width: 3.6rem; }
    .dm-section--hero .splide__counter { right: auto; left: 50%; transform: translateX(-50%); bottom: 2.6rem; }

    /* Inner-page hero: the live site runs the image ~406px tall at 390px wide
       (ours was 36.5vw = 142px) with a larger title panel. */
    .dm-section--page-hero { min-height: clamp(28rem, 104vw, 42rem); }
    .dm-section--title-panel h1.dm-text { font-size: 3.7rem; }
    .dm-section--title-panel .dm-text--subtitle { font-size: 2.3rem; }

    /* "Behind the scenes" band: the live dog mark is ~145px wide on mobile */
    /* The dog mark is tall (roughly 1:1.9), so 14.5rem made the navy band
       768px on a phone — Paula: "the blue banner is oddly large". */
    .dm-section--facts .dm-grid > :first-child .dm-image { width: 9rem; }
    .dm-section--facts .dm-grid > :first-child { padding-bottom: 2rem; }
    .dm-section--facts { --dm-pad-t-calc: 3.5rem; --dm-pad-b-calc: 3.5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }

    /* Menu: full-screen teal panel, larger sentence-case items */
    .mobile-menu__panel { width: 100%; padding: 2.6rem 2.4rem 3rem; }
    .mobile-menu__panel::before { padding-bottom: 1.8rem; margin-bottom: 4.4rem; }
    .mobile-menu__close { top: 2.6rem; right: 2.4rem; }
    .main-nav-mobile ul.menu { gap: 0.4rem; }
    .main-nav-mobile li { font-size: 2.8rem; }
    .main-nav-mobile li a,
    .main-nav-mobile li.current-menu-item > a,
    .main-nav-mobile li.current-menu-ancestor > a {
        font-family: var(--dm-font-family-body);
        font-size: 2.8rem;
        font-weight: 300;
        letter-spacing: 0;
        text-transform: none;
        line-height: 1.25;
        padding: 0.2rem 0.8rem;
    }
}

/* ══ Mobile intro spacing ══ */
@media (max-width: 767px) {
    /* Halve the run-out below the "Begin your journey" button (was ~168px) */
    .dm-section--panel > .dm-container > .dm-section--intro { padding-bottom: 3rem; }
    .dm-section--panel:has(.dm-section--intro) { padding-bottom: 3.4rem; }
}

/* ══ Footer below 992px: single centred column, ordered as the live site ══
   Live at 390px: monogram 151px wide, site name 28px, affiliate line 11.4px,
   menu 15.6px, then phone / email / address at 10.4px, the button, then the
   credit — everything centre-aligned. */
@media (max-width: 991px) {
    .dm-footer > .dm-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 4rem;
    }
    .dm-footer__columns,
    .dm-footer__col--info,
    .dm-footer__locations,
    .dm-footer__location-card,
    .dm-footer__location-details { display: contents; }

    .dm-footer__logo { order: 1; margin-bottom: 2.4rem; }
    .dm-footer__logo img { width: 15.1rem; height: auto; }
    /* .dm-footer prefix: the blueprint zeroes margins on footer <p> at (0,1,1) */
    .dm-footer .dm-footer__site-name { order: 2; font-size: 2.8rem; max-width: none; margin-bottom: 1.6rem; }
    .dm-footer .dm-footer__desc { order: 3; font-size: 1.15rem; max-width: 30ch; margin-bottom: 3.6rem; }
    .dm-footer__socials { order: 4; margin: 0 0 2.8rem; }
    .dm-footer__quick-links { order: 5; margin-bottom: 2.4rem; }
    .dm-footer__link-list { gap: 1.7rem; }
    .dm-footer__link-list li a { font-size: 1.56rem; }
    .dm-footer__location-phone { order: 6; }
    .dm-footer__email { order: 7; justify-content: center; }
    .dm-footer__location-address { order: 8; }
    .dm-footer__location-phone,
    .dm-footer__email,
    .dm-footer__location-address { font-size: 1.04rem; margin-bottom: 0.6rem; text-align: center; }
    .dm-footer__location-address span { display: inline; }
    .dm-footer__cta { order: 9; margin-top: 2.2rem; font-size: 1.25rem; }
    .dm-footer__newsletter { order: 9; }
    .dm-footer__bottom { order: 10; margin-top: 4rem; align-items: center; text-align: center; }
    /* keep the copyright clear of the floating back-to-top button */
    .dm-footer__copyright { max-width: 26ch; margin-inline: auto; }
    .dm-footer__pride, .dm-footer__land-ack, .dm-footer__locations-hint { display: none; }
}

/* Accolades below desktop: the heading row and content row stack, so each
   heading would sit above both columns. Flatten both grids into the
   container and order heading, column, heading, column. */
@media (max-width: 991px) {
    /* Each heading above its own column: flatten both grids into the container */
    .dm-section--accolades .dm-container > .dm-grid { display: contents; }
    .dm-section--accolades .dm-container > .dm-grid:first-child > :first-child { order: 1; }
    .dm-section--accolades .dm-container > .dm-grid:last-child > :first-child { order: 2; }
    .dm-section--accolades .dm-container > .dm-grid:first-child > :last-child { order: 3; margin-top: 3rem; }
    .dm-section--accolades .dm-container > .dm-grid:last-child > :last-child { order: 4; }
}

/* ══ Mobile: Accolades grid, Follow-along band and Instagram tiles ══ */
@media (max-width: 767px) {
    /* Uniform two-column badge grid — the logos are wildly different shapes,
       so give every cell the same box and contain the artwork inside it. */
    .dm-section--accolades .dm-grid .dm-image {
        width: 15rem;
        height: 10rem;
        object-fit: contain;
        object-position: center;
    }
    .dm-section--accolades .dm-grid { gap: 4rem 2rem; }  /* set directly: gap:calc(var()) rejects two values */
    .dm-section--accolades .dm-container > .dm-grid:last-child > :last-child { gap: 4rem 2rem; padding-left: 0; padding-right: 0; }
    /* Press logos above sit near full width, as on the live site */
    .dm-section--accolades .dm-container > .dm-grid:last-child > :first-child .dm-image {
        width: min(100%, 30rem);
        height: auto;
    }
    /* Press links: one consistent width so the column reads as a list */
    .dm-section--accolades .btn { width: 100%; text-align: center; }

    /* Breathing room above the Instagram handle */
    .dm-section--follow { --dm-pad-t-calc: 4.2rem; padding-top: 4.2rem; }
    /* Feed is a 2x2 grid via the plugin's own mobile columns (colsmobile=2);
       just cap it at four tiles so it stays 2x2. */
    .dm-section--instagram #sb_instagram #sbi_images .sbi_item:nth-child(n+5) { display: none; }
}

/* ══ Back to top: square navy tile with a hairline arrow, matching the
      site's square buttons and the hero's line-arrows ══ */
.back-to-top {
    right: 2rem;
    bottom: 2rem;
    z-index: 90;
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background-color: var(--dm-brand-color-1);
    border: 1px solid hsla(0, 0%, 100%, 0.3);
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.25s ease;
}
.back-to-top:hover { background-color: var(--dm-brand-color-2); }
.back-to-top__icon { display: none; }
.back-to-top::before {
    content: "";
    width: 1.2rem;
    height: 2rem;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 19V1.5M1.5 6 6 1.5 10.5 6'/%3E%3C/svg%3E");
}

/* ══ Home manifesto: static parallax — the photo stays put behind an 80%
      navy overlay while the band scrolls over it (the original's
      "static-parallax"). clip-path confines the fixed image to the band. ══ */
.dm-section--manifesto { clip-path: inset(0); }
.dm-section--manifesto > .dm-bg-img {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh !important;
    object-fit: cover;
    z-index: 0;
}

/* ══ "Behind the scenes" arrows below 992px: the carousel stacks under the
      title there, so the absolutely-placed arrows ended up underneath the
      slides and every tap hit a slide. Put them in flow, below the track. ══ */
@media (max-width: 991px) {
    .dm-section--facts .splide { display: flex; flex-direction: column; position: relative; }
    .dm-section--facts .splide__track { order: 1; }
    .dm-section--facts .splide__arrows {
        order: 2;
        position: static;
        width: auto;
        justify-content: center;
        gap: 2.4rem;
        margin-top: 2.4rem;
        pointer-events: auto;
    }
    .dm-section--facts .splide__arrow { width: 4.4rem; height: 4.4rem; display: flex; align-items: center; justify-content: center; }
}

/* ══ Phone: match the original's facts band — bigger fact copy, a short rule
   under "with <name>", and the arrows either side of the text rather than
   underneath it (Paula's comparison, 2026-09-30). Live site at 390px:
   fact copy 18.2px/33.7px, arrows at the outer edges. ══ */
@media (max-width: 767px) {
    .dm-section--facts .splide__slide p.dm-text:last-child {
        font-size: 1.82rem;      /* the block sets --dm-font-size inline, so set the property */
        line-height: 1.85;
        max-width: 24rem;
    }
    .dm-section--facts .dm-grid > :first-child > .dm-text:last-child::after {
        content: "";
        display: block;
        width: 1px;
        height: 4rem;
        margin: 1.8rem auto 0;
        background: var(--dm-brand-color-2);
    }
    .dm-section--facts .splide__arrows {
        order: 0;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        justify-content: space-between;
        margin-top: 0;
        z-index: 2;
    }
}