/*
Theme Name: DMA Charter
Theme URI: https://dmayachting.com
Author: DMA Yachting
Author URI: https://dmayachting.com
Description: New theme for DMA Yachting redesign. Built from scratch.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietary
Text Domain: dma-charter
*/

/* Theme styles will go here */

/* Test workflow change at 2026-05-02_16:20:59 */

/* =============================================================================
   DESIGN TOKENS & BASE STYLES (tokens.css)
   ============================================================================= */

/* DMA Yachting concept — visual system
   References: Fraser Yachts (structure, broker cards, utility nav)
              Benetti B.Now (chapter brackets, refined editorial, dark hero) */

:root {
  /* Palette — warm ivory / deep navy / muted gold (Benetti-leaning) */
  --navy:      #0E1B2A;       /* hero/footer */
  --navy-2:    #142333;
  --ink:       #1A2433;
  --ivory:     #F4F6F8;       /* primary surface — sea mist (cool pearl) */
  --ivory-2:   #E7ECEF;       /* dim cool-neutral — sea mist deeper */
  --stone:     #CFCCC5;       /* dim cool-neutral (no yellow undertone) */
  --rule:      #C2BEB6;
  --gold:      #B89766;       /* muted bronze/gold — for borders, fills, and text on DARK */
  --gold-deep: #9A7B4D;
  /* Gold used as TEXT. Default is an AA-compliant darker bronze (≥4.5:1 on the
     ivory surface); on dark sections it is overridden back to bright --gold below.
     Use var(--gold-text) for any gold text; keep var(--gold)/var(--gold-deep) for
     borders/fills. */
  --gold-text: #846A3A;
  --teal:      #4A7C7E;       /* Mediterranean accent (rare) */

  --txt:       #14202E;
  --txt-2:     #4A5566;
  --txt-3:     #646E7C;       /* muted text — darkened from #7C8493 for AA (≥4.5:1 on light) */
  --on-navy:   #EFE7D6;
  --on-navy-2: rgba(239,231,214,0.62);

  /* Type */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --display: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* marketing display headlines — matches the front page; now loaded as a webfont */
  --mono:  "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Spacing — rem-based so it scales with the fluid root font-size below */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem;    --s7: 3rem;   --s8: 4rem;    --s9: 6rem; --s10: 8rem; --s11: 12rem;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body,h1,h2,h3,h4,h5,p,ul,ol,figure{ margin:0; padding:0; }
html {
  font-size: clamp(15px, 0.78vw, 19px);
}
body {
  background: var(--ivory);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }

/* Accessibility — skip link + banner landmark (2.4.1 / 1.3.1).
   .dma-banner uses display:contents so wrapping the nav adds the landmark
   without changing layout. */
.dma-skip-link{
  position:absolute; left:8px; top:-60px; z-index:100000;
  background:var(--navy); color:var(--ivory);
  padding:12px 20px; border-radius:4px;
  font-family:var(--sans); font-size:14px; line-height:1; text-decoration:none;
  transition:top 160ms ease;
}
.dma-skip-link:focus{ top:8px; outline:2px solid var(--gold); outline-offset:2px; }
.dma-banner{ display:contents; }
#main:focus{ outline:none; }
#main:focus-visible{ outline:none; }

/* Type */
.eyebrow{
  font-family: var(--mono);
  font-size: clamp(11px, 0.6vw, 17px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--txt-2);
  font-weight: 400;
}
.eyebrow--gold{ color: var(--gold-text); }
.eyebrow--ivory{ color: rgba(239,231,214,0.7); }

.chapter{
  font-family: var(--mono);
  font-size: clamp(10px, 0.55vw, 16px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.chapter--ivory{
  color: rgba(244,239,230,0.85);
  text-shadow: 0 1px 24px rgba(14,27,42,0.7);
  font-weight: 500;
}

.serif{
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.display{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 4.4vw, 140px);
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.h1{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 4.4vw, 140px);
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.h2{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 3.15vw, 90px);
  line-height: 1.06;
  letter-spacing: -0.014em;
}
.h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 1.7vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.008em;
}
.lede{
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(19px, 1.25vw, 32px);
  line-height: 1.42;
  color: var(--txt);
}
.body{
  font-size: clamp(15px, 0.78vw, 22px);
  line-height: 1.7;
  color: var(--txt-2);
  max-width: 60ch;
}
.body--lg{ font-size: clamp(17px, 0.9vw, 24px); line-height: 1.7; }
.caption{
  font-family: var(--mono);
  font-size: clamp(10px, 0.55vw, 16px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--txt-2);
}

/* Surfaces */
.surface-navy{ background: var(--navy); color: var(--on-navy); }
.surface-ivory{ background: var(--ivory); }
.surface-warm{ background: var(--ivory-2); }
.surface-stone{ background: var(--stone); }

.surface-navy .body{ color: var(--on-navy-2); }
.surface-navy .eyebrow{ color: rgba(239,231,214,0.6); }
.surface-navy .caption{ color: rgba(239,231,214,0.55); }

/* Gold text on DARK surfaces stays bright (the failing-contrast darker bronze
   --gold-text is only for light backgrounds). Cascades to all descendants via
   the custom property, so any gold text inside these wrappers renders bright. */
.surface-navy,
.dma-hero,
.dma-area-hero,
.dma-recent--navy,
.ph--navy,
.dma-nav,
.dma-drawer,
.dma-footer,
.modal-content,
[class*="--navy"] { --gold-text: var(--gold); }

/* Rules */
.rule{ height:1px; background: var(--rule); border:0; }
.rule--ivory{ background: rgba(239,231,214,0.18); }

/* Buttons (Fraser/Benetti — minimal, arrow-led) */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 0.95vw, 22px) clamp(22px, 1.4vw, 32px);
  font-family: var(--sans);
  font-size: clamp(11px, 0.6vw, 17px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 0;
  transition: background 420ms ease, color 420ms ease, padding 420ms ease;
}
.btn--filled{ background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.btn--filled:hover{ background: transparent; color: var(--navy); }
.btn--ghost-ink{ color: var(--navy); border-color: var(--navy); }
.btn--ghost-ink:hover{ background: var(--navy); color: var(--ivory); }
.btn--ghost-ivory{ color: var(--ivory); border-color: rgba(239,231,214,0.5); }
.btn--ghost-ivory:hover{ background: var(--ivory); color: var(--navy); border-color: var(--ivory); }
.btn--gold{ background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn--gold:hover{ background: var(--gold-deep); border-color: var(--gold-deep); color: var(--ivory); }
.btn .arr{
  width: 22px; height: 1px; background: currentColor; position: relative;
  transition: width 360ms ease;
}
.btn .arr::after{
  content:''; position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-right:1px solid currentColor;
  border-top:1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arr{ width: 30px; }

/* Text link with underline (Fraser-style) */
.tlink{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}

/* Image placeholders — striped tonal, captioned with intent */
.ph{
  position: relative;
  overflow: hidden;
  background: var(--stone);
}
.ph::before{
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient( 8deg,
      rgba(14,27,42,0.04) 0 2px,
      transparent 2px 9px),
    radial-gradient(120% 70% at 30% 20%, rgba(244,239,230,0.45), transparent 60%),
    radial-gradient(90% 60% at 80% 90%, rgba(14,27,42,0.22), transparent 70%);
}
.ph--warm{ background:#C9B493; }
.ph--warm::before{
  background-image:
    repeating-linear-gradient( 8deg,
      rgba(14,27,42,0.045) 0 2px, transparent 2px 9px),
    radial-gradient(120% 70% at 30% 20%, rgba(255,247,232,0.55), transparent 60%),
    radial-gradient(90% 60% at 80% 90%, rgba(110,75,38,0.28), transparent 70%);
}
.ph--teal{ background:#5B8385; }
.ph--teal::before{
  background-image:
    repeating-linear-gradient( 12deg,
      rgba(14,27,42,0.06) 0 2px, transparent 2px 10px),
    radial-gradient(120% 80% at 20% 30%, rgba(244,239,230,0.42), transparent 60%),
    radial-gradient(90% 60% at 90% 90%, rgba(14,27,42,0.36), transparent 70%);
}
.ph--navy{ background:#1A2A3D; }
.ph--navy::before{
  background-image:
    repeating-linear-gradient( 6deg,
      rgba(244,239,230,0.05) 0 2px, transparent 2px 11px),
    radial-gradient(120% 80% at 70% 20%, rgba(184,151,102,0.18), transparent 60%),
    radial-gradient(90% 60% at 20% 100%, rgba(14,27,42,0.65), transparent 70%);
}
.ph--gold{ background: var(--gold); }
.ph--gold::before{
  background-image:
    repeating-linear-gradient( 8deg,
      rgba(14,27,42,0.07) 0 2px, transparent 2px 9px),
    radial-gradient(120% 70% at 30% 20%, rgba(255,247,232,0.48), transparent 60%);
}
.ph .ph-label{
  position: absolute;
  left: 14px; bottom: 14px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.82);
  background: rgba(14,27,42,0.5);
  padding: 5px 8px;
  backdrop-filter: blur(4px);
  z-index: 2;
  max-width: 70%;
}
.ph--warm .ph-label,
.ph--gold .ph-label{
  color: rgba(14,27,42,0.85);
  background: rgba(244,239,230,0.6);
}

/* Scrollbar */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background: rgba(14,27,42,0.18); border-radius: 0; }
*::-webkit-scrollbar-track{ background: transparent; }

/* Utility */
.container        { width: min(100% - 64px, clamp(1440px, 75vw, 2880px));   margin-inline: auto; padding: 0 56px; box-sizing: border-box; }
.container--narrow{ width: min(100% - 64px, clamp(1200px, 62.5vw, 2400px)); margin-inline: auto; padding: 0 56px; box-sizing: border-box; }

/* =============================================================================
   BUTTON ARROW ELEMENT
   ============================================================================= */

.btn .arr {
  width: 22px; height: 1px; background: currentColor; position: relative;
  transition: width 360ms ease; flex-shrink: 0;
}
.btn .arr::after {
  content:''; position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-right:1px solid currentColor;
  border-top:1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arr { width: 30px; }

/* =============================================================================
   GLOBAL LAYOUT RESETS FOR WORDPRESS
   ============================================================================= */

/* No flex / no overflow constraints on root containers — those break position:sticky */
html { overflow-x: clip; }
body { overflow: visible; }
.body-wrapper { min-height: 100vh; overflow: visible; }
img { max-width: 100%; height: auto; }

/* =============================================================================
   NAVIGATION
   ============================================================================= */

.dma-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 56px;
  transition: background 400ms ease, padding 300ms ease;
}
.dma-nav--solid {
  position: relative;
  background: #FFFFFF;
  border-bottom: 1px solid var(--rule);
  padding: 20px 56px;
  box-shadow: 0 1px 0 rgba(20,32,46,0.04);
}
.dma-nav__logo { display: flex; align-items: center; }
.dma-nav__logo a { display: flex; align-items: center; }
.dma-nav__logo-img {
  height: 46px;
  width: auto;
  display: block;
  /* On dark/hero pages, invert the dark-blue logo to ivory */
  filter: brightness(0) invert(1) opacity(0.95);
  transition: filter 300ms ease;
}
.dma-nav--solid .dma-nav__logo-img,
body:not(.has-hero) .dma-nav__logo-img {
  /* The remote photon-CDN logo PNG renders as light-on-transparent in some
     environments, making it invisible on ivory. brightness(0) forces every
     non-transparent pixel to pure black — universally visible silhouette. */
  filter: brightness(0) !important;
}
.dma-nav__logo-text {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--ivory);
}
.dma-nav--solid .dma-nav__logo-text { color: var(--navy); }
.dma-nav__menu {
  display: flex; align-items: center; gap: 28px;
  list-style: none; margin: 0; padding: 0;
  flex: 1; justify-content: center;
}
.dma-nav__menu > li { position: relative; }
.dma-nav__menu li { list-style: none; }
.dma-nav__menu a {
  font-family: var(--mono);
  font-size: clamp(10px, 0.78vw, 16px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239,231,214,0.85);
  transition: color 250ms ease;
  display: inline-block;
  padding: 8px 0;
  white-space: nowrap;
}
.dma-nav--solid .dma-nav__menu a { color: var(--txt-2); }
.dma-nav__menu a:hover { color: var(--gold-text); }
.dma-nav--solid .dma-nav__menu a:hover { color: var(--navy); }

/* Submenus (sub-menu / children-of) */
.dma-nav__menu .sub-menu,
.dma-nav__menu ul {
  position: absolute;
  top: 100%; left: 0;
  background: var(--ivory);
  list-style: none;
  margin: 0;
  padding: 12px 0;
  min-width: 240px;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(14,27,42,0.12);
}
.dma-nav__menu li:hover > .sub-menu,
.dma-nav__menu li:hover > ul,
.dma-nav__menu li:focus-within > .sub-menu,
.dma-nav__menu li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dma-nav__menu .sub-menu a,
.dma-nav__menu ul a {
  display: block;
  padding: 10px 22px;
  color: var(--txt) !important;
  font-size: 10px;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.dma-nav__menu .sub-menu a:hover,
.dma-nav__menu ul a:hover {
  background: var(--ivory-2);
  color: var(--gold-text) !important;
}
/* Nested (3rd level) submenus open to the side */
.dma-nav__menu .sub-menu .sub-menu,
.dma-nav__menu ul ul {
  top: -12px;
  left: 100%;
}

/* Dropdown affordance: caret on parent items. Hide any icon baked into a menu
   label so the caret is consistent across sites. (:has — graceful if absent.) */
.dma-nav__menu > li > a > i,
.dma-nav__menu > li > a > .fa,
.dma-drawer__menu a > i,
.dma-drawer__menu a > .fa { display: none !important; }
.dma-nav__menu > li:has(> ul) > a::after {
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin-left: 8px; vertical-align: middle;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms ease;
}
.dma-nav__menu > li:hover > a::after,
.dma-nav__menu > li:focus-within > a::after { transform: translateY(0) rotate(225deg); }

.dma-nav__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dma-nav__actions .btn { padding: clamp(11px, 0.85vw, 18px) clamp(16px, 1.2vw, 28px); font-size: clamp(10px, 0.78vw, 15px); letter-spacing: 0.2em; }
.btn--sm { padding: clamp(9px, 0.7vw, 14px) clamp(16px, 1.1vw, 24px); font-size: clamp(10px, 0.72vw, 14px); letter-spacing: 0.2em; gap: 10px; }
.btn--sm .arr { width: 18px; }

/* =============================================================================
   HERO SECTION
   ============================================================================= */

.dma-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
.dma-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.dma-hero__video-wrap {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--navy);
}
/* Scale 16:9 iframe to cover the viewport without bars.
   Hidden until iframe fires its load event (no flash of empty / no poster). */
.dma-hero__bg--video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;          /* 16:9 derived from width */
  min-height: 100vh;
  min-width: 177.78vh;                    /* 16:9 derived from height */
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease;
}
.dma-hero__bg--video.is-loaded { opacity: 1; }

/* Transparent shield blocks hover events from reaching the iframe.
   Prevents Chrome's media-session play/pause/skip overlay from appearing. */
.dma-hero__video-shield {
  position: absolute; inset: 0;
  z-index: 2;
  background: transparent;
  pointer-events: auto;
  cursor: default;
}
.dma-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,27,42,0.55) 0%, rgba(14,27,42,0) 30%, rgba(14,27,42,0) 55%, rgba(14,27,42,0.85) 100%);
}
.dma-hero__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(40px, 4vw, 96px);
  padding-inline: max(clamp(1rem, 2vw, 4rem), calc((100% - 2880px) / 2));
  padding-bottom: clamp(48px, 5vw, 120px);
}
.dma-hero__content > div:first-child { max-width: clamp(720px, 50vw, 1100px); }
.dma-hero__content .display { font-size: clamp(36px, 5vw, 150px); max-width: 16ch; }
.dma-hero__content .lede { font-size: clamp(16px, 1.3vw, 26px); line-height: 1.55; max-width: 52ch; }
.dma-hero__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.dma-hero__rating {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(239,231,214,0.6);
  text-align: right;
}
.dma-hero__eyebrow {
  position: absolute; left: 56px; top: 50%; transform: rotate(-90deg) translateX(50%);
  transform-origin: left top;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(239,231,214,0.55);
  z-index: 2;
  white-space: nowrap;
}
.dma-hero__scroll {
  position: absolute; left: 50%; bottom: 32px;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(239,231,214,0.5);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.dma-hero__scroll::after {
  content: ''; width: 1px; height: 32px;
  background: linear-gradient(180deg, rgba(239,231,214,0.5), transparent);
  animation: dmaScrollPulse 2s ease infinite;
}
@keyframes dmaScrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* =============================================================================
   PRESS STRIP
   ============================================================================= */

.dma-press {
  padding: 56px 0;
  border-bottom: 1px solid var(--rule);
}
.dma-press__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
}
.dma-press__logos {
  display: flex; gap: 56px; align-items: center;
  flex-wrap: wrap; justify-content: space-between;
}
.dma-press__name {
  font-family: var(--serif);
  font-size: 18px; font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--txt-2);
}

/* =============================================================================
   SECTION SPACING HELPERS
   ============================================================================= */

.dma-section    { padding: clamp(72px, 5vw, 140px) 0; }
.dma-section--sm{ padding: clamp(48px, 3.3vw, 96px) 0; }
.dma-section--md{ padding: clamp(60px, 4.2vw, 120px) 0; }
.dma-section-header {
  display: flex; justify-content: space-between;
  align-items: flex-end; margin-bottom: clamp(40px, 3.3vw, 80px);
}

/* =============================================================================
   CRUISING GROUNDS (homepage destinations grid)
   ============================================================================= */

.dma-grounds__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 360px;
  gap: 20px;
}
.dma-grounds__card--wide { grid-column: span 2; }

.dma-grounds__card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--navy);
  color: var(--ivory);
  text-decoration: none;
  isolation: isolate;
}
.dma-grounds__photo {
  position: absolute; inset: 0;
  z-index: 0;
}
.dma-grounds__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(.2,.6,.2,1);
  filter: saturate(0.92) contrast(1.02);
}
.dma-grounds__photo-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,28,46,0) 35%, rgba(15,28,46,0.78) 100%);
}
.dma-grounds__card:hover .dma-grounds__photo img { transform: scale(1.06); }

.dma-grounds__meta {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 28px 26px;
  gap: 6px;
}
.dma-grounds__num {
  font-family: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239,231,214,0.55);
}
.dma-grounds__name {
  font-family: var(--serif, "Canela", "Tiempos Headline", Georgia, serif);
  font-size: 28px;
  line-height: 1.1;
  color: var(--ivory);
  letter-spacing: -0.01em;
}
.dma-grounds__count {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}

@media (max-width: 1024px) {
  .dma-grounds__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 320px; }
  .dma-grounds__card--wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .dma-grounds__grid { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .dma-grounds__card--wide { grid-column: span 1; }
}

/* =============================================================================
   YACHT CARD GRID
   ============================================================================= */

/* Wrap the shortcode output */
.dma-yacht-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
/* Override property_unit.php Bootstrap card styles */
.listing_wrapper { padding: 0 !important; }
.property_listing {
  display: flex; flex-direction: column; gap: 14px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.property_listing .mo_badges { margin-bottom: 0; }
.single_yacht_title {
  font-family: var(--serif) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--txt) !important;
  margin: 8px 0 4px !important;
}
.single_yacht_price, .mo_green {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  color: var(--txt) !important;
}
.row.fourths {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--txt-3);
  border-top: 1px solid rgba(20,32,46,0.08);
  padding-top: 12px;
  margin-top: 8px;
}
.conversion_buttons .btn-blue,
.conversion_buttons .btn.mo_moinfo {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--navy);
  background: transparent; color: var(--navy);
  border-radius: 0;
  transition: background 350ms ease, color 350ms ease;
}
.conversion_buttons .btn-blue:hover,
.conversion_buttons .btn.mo_moinfo:hover {
  background: var(--navy); color: var(--ivory);
}
.conversion_buttons .trigger_yachtmodal {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 14px 22px;
  background: var(--navy); color: var(--ivory);
  border: 1px solid var(--navy); border-radius: 0;
  transition: background 350ms ease;
}
.conversion_buttons .trigger_yachtmodal:hover {
  background: var(--ink);
}

/* =============================================================================
   DESTINATIONS GRID
   ============================================================================= */

.dma-destinations__grid-top {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.dma-destinations__grid-bottom {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 16px;
}
.dma-dest-card {
  position: relative; overflow: hidden; cursor: pointer;
}
.dma-dest-card--lg { height: 480px; }
.dma-dest-card--sm { height: 360px; }
.dma-dest-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease;
}
.dma-dest-card:hover img { transform: scale(1.04); }
.dma-dest-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,27,42,0) 40%, rgba(14,27,42,0.85) 100%);
}
.dma-dest-card__info {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  color: var(--ivory); z-index: 2;
}

/* =============================================================================
   TRUST STATS ROW
   ============================================================================= */

.dma-trust__stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px;
  align-items: end;                  /* bottom-align so the captions share a baseline regardless of number font-size */
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.dma-trust__stat-number {
  font-family: var(--serif);
  font-weight: 300; line-height: 1;
  letter-spacing: -0.02em;
}
.dma-trust__stat-number--lg { font-size: clamp(40px, 2.9vw, 84px); }
.dma-trust__stat-number--sm { font-size: clamp(18px, 1.15vw, 28px); }

/* =============================================================================
   BROKER GRID
   ============================================================================= */

.dma-brokers__grid {
  border-top: 1px solid var(--rule);
}
/* The shortcode outputs a Bootstrap .row containing .col-md-4 cards.
   Convert that .row into a true 4-col CSS grid. */
.dma-brokers__grid > .row,
.dma-brokers__grid .row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  margin: 0 !important;
  gap: 0 !important;
}
.dma-brokers__grid .col-md-4,
.dma-brokers__grid .digislide {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  border-right: 1px solid var(--rule) !important;
}
/* Drop the trailing right border so the grid edge matches the (border-less) left edge.
   :nth-child(4n) handles the desktop 4-col grid; :last-child handles tail. */
.dma-brokers__grid .col-md-4:nth-child(4n),
.dma-brokers__grid .digislide:nth-child(4n),
.dma-brokers__grid .col-md-4:last-child,
.dma-brokers__grid .digislide:last-child {
  border-right: 0 !important;
}
@media (max-width: 991px) {
  /* 2-col on tablet — drop right border on every 2nd card */
  .dma-brokers__grid .col-md-4,
  .dma-brokers__grid .digislide { border-right: 1px solid var(--rule) !important; }
  .dma-brokers__grid .col-md-4:nth-child(2n),
  .dma-brokers__grid .digislide:nth-child(2n) { border-right: 0 !important; }
}
@media (max-width: 520px) {
  /* 1-col on phone — no right border at all */
  .dma-brokers__grid .col-md-4,
  .dma-brokers__grid .digislide { border-right: 0 !important; }
}
/* Kill the inner Bootstrap .container that constrains card width */
.dma-brokers__grid .col-md-4 > .container,
.dma-brokers__grid .digislide > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 28px 24px 24px !important;
  margin: 0 !important;
}
.dma-brokers__grid .card,
.dma-brokers__grid .digislide .card {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.dma-brokers__grid .card img,
.dma-brokers__grid .digislide img {
  border-radius: 0 !important;
  filter: none;
  aspect-ratio: 1/1;
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}
.dma-brokers__grid hr { display: none !important; }
.dma-brokers__grid .card-title {
  font-family: var(--serif) !important;
  font-size: 22px !important; font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: var(--txt) !important;
}
.dma-brokers__grid .text-muted {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--txt-3) !important;
}
.dma-brokers__grid .card-text {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
  color: var(--txt-2, var(--txt)) !important;
  line-height: 2.2 !important;
  text-transform: none !important;
}
.dma-brokers__grid .card-text a { color: inherit !important; }
.dma-brokers__grid .card-text br {
  display: block;
  content: "";
  margin-top: 10px;
}
.dma-brokers__grid .card-text img {
  width: 14px !important;
  height: 14px !important;
  aspect-ratio: auto !important;
  vertical-align: middle;
  margin-right: 4px;
}
.dma-brokers__grid .btn-primary {
  font-family: var(--sans) !important;
  font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.22em !important; text-transform: uppercase !important;
  padding: 12px 20px !important;
  margin-top: 18px !important;
  background: transparent !important; color: var(--navy) !important;
  border: 1px solid var(--navy) !important; border-radius: 0 !important;
  transition: background 300ms ease, color 300ms ease !important;
}
.dma-brokers__grid .btn-primary:hover,
.dma-brokers__grid .btn-primary:focus,
.dma-brokers__grid .btn-primary:active,
.dma-brokers__grid a.btn-primary:hover {
  background: var(--navy) !important;
  color: var(--ivory) !important;
  border-color: var(--navy) !important;
}

/* =============================================================================
   FILTER SIDEBAR
   ============================================================================= */

.dma-filter-sidebar {
  position: sticky; top: 24px; align-self: start;
}
.mo_filters .filtersContainer,
.mo_filters .filtersInnerContainer { /* remove default styles */ }
.filterCheckboxes h3.panel-title,
.filterSlider h3.panel-title {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--txt-3) !important;
  font-weight: 400 !important;
  margin-bottom: 12px !important;
}
.filterCheckboxes .btn-group.flat .btn-clean,
.filterCheckboxes .btn-group.flat label {
  font-family: var(--mono) !important;
  font-size: 10px !important; letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important; background: transparent !important;
  color: var(--txt) !important; padding: 7px 14px !important;
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.filterCheckboxes .btn-group.flat label.active,
.filterCheckboxes .btn-group.flat .btn.active {
  background: var(--txt) !important; color: var(--ivory) !important;
  border-color: var(--txt) !important;
}
.location_menu { border-radius: 0 !important; border: 1px solid var(--rule) !important; }

/* -----------------------------------------------------------------------------
   Theme-aligned filter sidebar (used on destination/listing pages)
   Targets the raw mo_filter plugin markup so the filter looks coherent
   wherever it's rendered, not only on .dma-landing pages.
   ----------------------------------------------------------------------------- */

/* Panel wrapper / section spacing */
.mo_filters .filterCheckboxes,
.mo_filters .filterSlider {
  border: 0 !important;
  background: transparent !important;
  padding: 18px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  box-shadow: none !important;
}
.mo_filters .filterCheckboxes:last-child,
.mo_filters .filterSlider:last-child { border-bottom: 0 !important; }
.mo_filters .panel-heading {
  background: transparent !important;
  border: 0 !important;
  padding: 0 0 12px !important;
}
.mo_filters .panel-body {
  padding: 0 !important;
  background: transparent !important;
}
.mo_filters h3.panel-title {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--txt-2, #4a5566) !important;
  margin: 0 0 10px !important;
}
.mo_filters .panel-title .withdate { color: inherit !important; }

/* Dropdowns (Locations, Builders) */
.mo_filters .location_menu,
.mo_filters .dropdown > .btn,
.mo_filters select {
  width: 100% !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  color: var(--txt) !important;
  padding: 12px 16px !important;
  text-align: left !important;
  transition: border-color 200ms ease, background 200ms ease;
}
.mo_filters .location_menu:hover,
.mo_filters .dropdown > .btn:hover {
  border-color: var(--navy) !important;
  background: rgba(14,27,42,0.02) !important;
}
.mo_filters .dropdown-menu {
  border-radius: 0 !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 8px 24px rgba(14,27,42,0.08) !important;
  font-family: var(--sans) !important;
}
.mo_filters .dropdown-menu .dropdown-item:hover {
  background: var(--ivory-2) !important;
  color: var(--navy) !important;
}

/* Date input */
.mo_filters .mo_daterange,
.mo_filters input[name="datefilter"] {
  width: 100% !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  color: var(--txt) !important;
}

/* Boat-type / Hull toggle buttons (sail/power, catamaran/monohull) */
.mo_filters .btn-group.flat {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100% !important;
}
.mo_filters .btn-group.flat label,
.mo_filters .btn-group.flat .btn-clean {
  width: auto !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px !important;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  color: var(--txt) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.mo_filters .btn-group.flat label:hover {
  border-color: var(--navy) !important;
  background: rgba(14,27,42,0.03) !important;
}
.mo_filters .btn-group.flat .selecticon {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
  opacity: 0.85;
  transition: filter 200ms ease, opacity 200ms ease;
}
.mo_filters .btn-group.flat .type_caption {
  font: inherit !important;
  color: inherit !important;
  margin: 0 !important;
}
.mo_filters .btn-group.flat label > input[type="checkbox"] { display: none !important; }
/* Selected state — dark fill, ivory text, invert dark icons to read on navy */
.mo_filters .btn-group.flat label.active,
.mo_filters .btn-group.flat label.btn.active,
.mo_filters .btn-group.flat .btn.active {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: var(--ivory) !important;
}
.mo_filters .btn-group.flat label.active .type_caption,
.mo_filters .btn-group.flat .btn.active .type_caption {
  color: var(--ivory) !important;
}
.mo_filters .btn-group.flat label.active .selecticon,
.mo_filters .btn-group.flat .btn.active .selecticon {
  filter: invert(1) brightness(2);
  opacity: 1;
}

/* Numeric stepper (Guests Minimum, Max Price) */
.mo_filters .input-group {
  display: flex !important;
  align-items: stretch;
  width: 100% !important;
}
.mo_filters .input-group .btn-number {
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  color: var(--txt) !important;
  padding: 0 14px !important;
  font-family: var(--serif) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  min-width: 44px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.mo_filters .input-group .btn-number:hover {
  background: var(--navy) !important;
  color: var(--ivory) !important;
  border-color: var(--navy) !important;
}
.mo_filters .input-group .btn-number .moplusminus {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  font-weight: 300 !important;
}
.mo_filters .input-group .form-control,
.mo_filters .input-group input[type="text"],
.mo_filters .input-group input[type="number"] {
  flex: 1 !important;
  text-align: center !important;
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  color: var(--txt) !important;
  padding: 8px !important;
  box-shadow: none !important;
}
.mo_filters .input-group .form-control:focus {
  outline: 0 !important;
  border-color: var(--navy) !important;
}

/* Chip-style amenity checkboxes (Jetski, Jacuzzi, etc.) */
.mo_filters .checkbox.devmodex {
  display: inline-flex !important;
  margin: 0 8px 8px 0 !important;
  padding: 0 !important;
}
.mo_filters .checkbox.devmodex label {
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;
  padding: 8px 14px !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--txt) !important;
  background: transparent !important;
  border: 1px solid var(--rule) !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  margin: 0 !important;
}
.mo_filters .checkbox.devmodex label:hover {
  border-color: var(--navy) !important;
}
.mo_filters .checkbox.devmodex input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
.mo_filters .checkbox.devmodex:has(input:checked) label {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: var(--ivory) !important;
}

/* "REFINE SEARCH" eyebrow + helper text */
.mo_filters .filtersContainer > .panel-title:first-child,
.mo_filters .refine-search-title,
.dma-filter-sidebar > h3,
.dma-filter-sidebar > .filter-title {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--txt-2, #4a5566) !important;
  font-weight: 400 !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--rule) !important;
  margin: 0 0 8px !important;
}
.mo_filters .alert,
.mo_filters .help-block,
.mo_filters small {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--txt-3) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 6px 0 !important;
  line-height: 1.5;
}

/* =============================================================================
   LISTINGS PAGE LAYOUT
   ============================================================================= */

.dma-listings {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  align-items: start;
}
.dma-listings__header {
  display: flex; justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px; padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.dma-listings__count {
  font-family: var(--serif); font-size: 32px; font-weight: 300;
}
.dma-listings__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
}

/* =============================================================================
   YACHT DETAIL HERO
   ============================================================================= */

.dma-detail-hero {
  position: relative; min-height: 92vh;
  overflow: hidden; display: flex; align-items: flex-end;
}
.dma-detail-hero {
  /* Subtle gradient fallback when hero image fails to load */
  background:
    radial-gradient(80% 60% at 70% 30%, rgba(184,151,102,0.14), transparent 70%),
    linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
}
.dma-detail-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.dma-detail-hero__overlay {
  position: absolute; inset: 0;
  /* Stronger bottom band so title/specs stay readable on bright (sky/foam) photos. */
  background: linear-gradient(180deg,
      rgba(14,27,42,0.55) 0%,
      rgba(14,27,42,0)    25%,
      rgba(14,27,42,0)    45%,
      rgba(14,27,42,0.75) 75%,
      rgba(14,27,42,0.95) 100%);
  z-index: 1;
}
.dma-detail-hero__content {
  position: relative; z-index: 2;
  padding-inline: max(clamp(1rem, 2vw, 4rem), calc((100% - 2880px) / 2));
  padding-bottom: clamp(56px, 4vw, 100px);
  color: var(--ivory); width: 100%;
  /* Safety-net text shadow for the rare bright-photo edge case. Subtle so it
     reads as depth rather than a hard outline. */
  text-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 2px 18px rgba(0,0,0,0.25);
}
.dma-detail-hero__specs {
  display: grid; grid-template-columns: repeat(6, max-content);
  gap: clamp(40px, 4vw, 96px); padding-top: clamp(20px, 2vw, 48px);
  border-top: 1px solid rgba(239,231,214,0.35);
  max-width: min(1280px, 70vw); margin-top: clamp(24px, 2.5vw, 56px);
}
.dma-detail-hero__spec-label {
  color: rgba(239,231,214,0.75);
  margin-bottom: 8px;
}
.dma-detail-hero__spec-value {
  font-size: clamp(18px, 1.15vw, 28px);
  color: var(--ivory);
}
/* Restyle cya_slider output inside hero */
.dma-detail-hero .royalSlider,
.dma-detail-hero [class*="cya_slider"],
.dma-detail-hero .rsOverflow,
.dma-detail-hero .rsSlide {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
}
.dma-detail-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* =============================================================================
   IN-PAGE SECTION NAV (sits below hero, sticks to top on scroll)
   ============================================================================= */
.dma-section-nav {
  --gold-text: var(--gold);      /* dark navy surface — use the bright gold, not the light-bg variant */
  position: -webkit-sticky;
  position: sticky !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 30;
  width: 100%;
  background: var(--navy);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 2vw, 56px);
  padding-block: clamp(14px, 1vw, 22px);
  padding-inline: max(clamp(1rem, 2vw, 4rem), calc((100% - 2880px) / 2));
  border-bottom: 1px solid rgba(239,231,214,0.15);
  box-shadow: 0 4px 32px rgba(14,27,42,0.25);
}
/* If logged in, push below the WP admin bar */
.admin-bar .dma-section-nav { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar .dma-section-nav { top: 46px !important; }
}
.dma-section-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(20px, 1.8vw, 48px);
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;            /* belt-and-braces: spec implicitly sets y=auto when x is auto, force-hide */
  scrollbar-width: none;
  /* Tell mobile browsers this container only listens to horizontal pans —
     vertical drag gestures pass through to the page instead of lifting the
     nav text out of view on overscroll. */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.dma-section-nav__list::-webkit-scrollbar { display: none; }
.dma-section-nav__list a {
  font-family: var(--mono);
  font-size: clamp(12px, 0.8vw, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  white-space: nowrap;
  padding: 8px 0 16px;           /* extra bottom space so the active underline fits inside the box */
  transition: color 220ms ease;
  position: relative;
}
.dma-section-nav__list a:hover { color: var(--gold-text); }
.dma-section-nav__list a.is-active {
  color: var(--gold-text);
}
.dma-section-nav__list a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 6px;                   /* sits inside the padding zone now, no longer clipped by overflow-y */
  height: 1px;
  background: var(--gold);
}
.dma-section-nav__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}
.dma-section-nav__actions .btn {
  padding: clamp(9px, 0.6vw, 12px) clamp(18px, 1vw, 24px);
  font-size: clamp(11px, 0.7vw, 14px);
  letter-spacing: 0.18em;
}
.dma-section-nav__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  white-space: nowrap;
}
.dma-section-nav__price-label {
  font-family: var(--mono);
  font-size: clamp(11px, 0.7vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239,231,214,0.7);
  margin-bottom: 6px;
}
.dma-section-nav__price-value {
  font-family: var(--serif);
  font-size: clamp(20px, 1.1vw, 24px);
  font-weight: 400;                 /* was 300 — thin serif looked fuzzy on dark navy */
  color: var(--ivory);
  letter-spacing: 0;                /* drop the negative — was killing kerning on dark bg */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (max-width: 720px) {
  .dma-section-nav__price { display: none; }
}

/* Anchor offset so the section heading isn't hidden by the sticky nav.
   72px = approx nav height (18px*2 padding + content). */
.dma-section--md[id], .dma-section[id] { scroll-margin-top: 72px; }

@media (max-width: 880px) {
  .dma-section-nav { padding: 14px 24px; gap: 16px; }
  .dma-section-nav__list { gap: 18px; }
}

/* =============================================================================
   SPEC TABLE
   ============================================================================= */

.dma-specs__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 48px 96px;
}
.dma-specs__group-title {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--txt-3); margin-bottom: 24px;
}
.dma-specs__row {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}

/* =============================================================================
   TWO-COLUMN CONTENT LAYOUT
   ============================================================================= */

.dma-two-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(48px, 5vw, 128px); }
/* Grid items default to min-width:auto, which lets wide content (an AI cabin
   table with a min-width) blow the column out instead of letting an inner
   overflow-x:auto wrapper scroll. min-width:0 lets the column shrink to track. */
.dma-two-col > *, .dma-two-col--narrow > * { min-width: 0; }
.dma-two-col--narrow { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 4vw, 112px); align-items: center; }
.dma-chapter-label { margin-bottom: 16px; }

/* =============================================================================
   FOOTER
   ============================================================================= */

.dma-footer {
  background: var(--navy); color: var(--on-navy);
  padding: 96px 0 40px;
}

/* Top: brand statement + Trustpilot */
.dma-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 96px;
  align-items: start;
}
.dma-footer__brand { max-width: 56ch; }
.dma-footer__logo-link { display: inline-block; margin-bottom: 28px; }
.dma-footer__logo-img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1) opacity(0.95);
}
.dma-footer__statement {
  font-family: var(--serif);
  font-size: clamp(28px, 2.4vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.014em;
  color: var(--ivory);
  margin-bottom: 24px;
}
.dma-footer__about {
  color: rgba(239,231,214,0.7) !important;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.7;
}
.dma-footer__rating {
  border-left: 1px solid rgba(239,231,214,0.2);
  padding-left: 40px;
}

/* Middle: 4-col link grid */
.dma-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 64px;
  padding-bottom: 56px;
}
.dma-footer__col-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 20px;
}
.dma-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dma-footer__col-list a {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(239,231,214,0.7);
  transition: color 250ms ease;
}
.dma-footer__col-list a:hover { color: var(--gold-text); }
.dma-footer__contact {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(239,231,214,0.12);
}

/* Bottom: copyright + legal */
.dma-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(239,231,214,0.12);
}
.dma-footer__copyright {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239,231,214,0.5);
}
.dma-footer__bottom-links {
  display: flex;
  gap: 32px;
}
.dma-footer__bottom-links a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239,231,214,0.5);
  transition: color 250ms ease;
}
.dma-footer__bottom-links a:hover { color: var(--gold-text); }

@media (max-width: 1024px) {
  .dma-footer__top { grid-template-columns: 1fr; gap: 48px; }
  .dma-footer__rating { border-left: 0; padding-left: 0; border-top: 1px solid rgba(239,231,214,0.2); padding-top: 32px; }
  .dma-footer__columns { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 640px) {
  .dma-footer { padding: 64px 0 32px; }
  .dma-footer__columns { grid-template-columns: 1fr; gap: 32px; }
  .dma-footer__bottom { flex-direction: column; gap: 16px; align-items: flex-start; }
  .dma-footer__bottom-links { flex-wrap: wrap; gap: 16px 24px; }
}

/* =============================================================================
   YACHT DETAIL — description-section helpers
   ============================================================================= */
.dma-glance-list {
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.dma-glance-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(20,32,46,0.10);
}
.dma-glance-row dt {
  margin: 0;
  color: var(--txt-3);
  letter-spacing: 0.18em;
  font-size: clamp(10px, 0.55vw, 14px);
  text-transform: uppercase;
}
.dma-glance-row dd {
  margin: 0;
  font-size: clamp(18px, 1.15vw, 28px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--txt);
}

.dma-area-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 24px 0;
  margin-top: 8px;
  border-top: 1px solid rgba(20,32,46,0.10);
  border-bottom: 1px solid rgba(20,32,46,0.10);
}
@media (max-width: 768px) {
  .dma-area-grid { grid-template-columns: 1fr; gap: 16px; }
}

.dma-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* =============================================================================
   ONBOARD GROUP CARDS — Entertainment / Diving / Fishing / Sustainability
   ============================================================================= */
.dma-onboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
  align-items: start;
}
.dma-onboard-card {
  display: block;
}
h3.dma-onboard-card__title,
.dma-onboard-card__title {
  display: block !important;
  font-family: var(--mono) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--gold-text) !important;
  margin: 0 0 28px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(20,32,46,0.12) !important;
}
@media (max-width: 768px) {
  .dma-onboard-grid { grid-template-columns: 1fr; gap: 32px; }
}
.dma-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(154, 123, 77, 0.45);
  border-radius: 999px;
  background: rgba(154, 123, 77, 0.06);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  transition: background 250ms ease, color 250ms ease, border-color 250ms ease;
}
.dma-tag:hover {
  background: var(--gold-deep, #9A7B4D);
  color: var(--ivory);
  border-color: var(--gold-deep, #9A7B4D);
}

/* =============================================================================
   YACHT DETAIL — amenities grid (4-bucket chip layout)
   ============================================================================= */
.dma-amenity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 32px;
}
.dma-amenity-bucket {
  display: flex;
  flex-direction: column;
}
.dma-amenity-bucket .dma-tag-list {
  align-content: flex-start;
}

/* Gold-fill tag variant — used for deal badge */
.dma-tag--gold {
  background: var(--gold) !important;
  color: var(--navy) !important;
  border-color: var(--gold) !important;
  font-weight: 500;
}
.dma-tag--gold:hover {
  background: var(--gold-deep) !important;
  border-color: var(--gold-deep) !important;
  color: var(--ivory) !important;
}

/* Deal banner — slim warm-surface strip below hero */
.dma-deal-banner {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
.dma-deal-banner__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 22px 0;
  border-left: 4px solid var(--gold);
  padding-left: 24px;
}
.dma-deal-banner__inner .caption {
  letter-spacing: 0.22em;
}
.dma-deal-banner__inner h3 {
  flex: 1;
  color: var(--txt);
}

/* Mobile breakpoints for new sections */
@media (max-width: 1024px) {
  .dma-amenity-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
}
@media (max-width: 640px) {
  .dma-amenity-grid { grid-template-columns: 1fr; gap: 32px; }
  .dma-deal-banner__inner { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 0 16px 16px; }
}

/* Tighten section padding on mobile so sections don't feel sparse */
@media (max-width: 880px) {
  .dma-section { padding: 96px 0; }
  .dma-section--md { padding: 80px 0; }
  .dma-section--sm { padding: 64px 0; }
}

/* =============================================================================
   SECTION HEADING — yacht detail sub-sections
   ============================================================================= */
h2.dma-section-heading,
h3.dma-section-heading,
.dma-section-heading {
  display: block !important;
  font-family: var(--mono) !important;
  font-size: clamp(22px, 1.15vw, 32px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  color: var(--gold-text) !important;
  margin: 0 0 64px !important;
  padding-bottom: 22px !important;
  border-bottom: 1px solid var(--rule) !important;
  max-width: none !important;
  width: 100% !important;
}

/* =============================================================================
   FLAT LIST — 2-column key/value rows for Specs / Amenities / Water Toys
   ============================================================================= */
/* AI-generated field content (water toys, cabins, etc.) — may contain tables/lists */
.dma-ai-content { max-width: 760px; color: var(--txt-2, #4a5763); font-size: 15px; line-height: 1.65; }
.dma-ai-content p { margin: 0 0 14px; }
.dma-ai-content ul, .dma-ai-content ol { margin: 0 0 16px; padding-left: 20px; }
.dma-ai-content li { margin-bottom: 6px; }
/* AI inline images (e.g. crew photos) ship with width="150" + Bootstrap
   float-end, but the width attr is stripped on sanitise so they'd render at full
   natural size. Constrain to a small, rounded, right-floated thumbnail with the
   bio text wrapping around it. flow-root contains the float per accordion item. */
.dma-ai-content img { max-width: 100%; height: auto; border-radius: 8px; }
.dma-ai-content .accordion-body { display: flow-root; }
.dma-ai-content .accordion-body img,
.dma-ai-content img.float-end {
	float: right; width: 150px; max-width: 38%; height: auto;
	margin: 4px 0 14px 26px; border-radius: 10px;
	box-shadow: 0 3px 14px rgba(20,32,46,0.12);
}
@media (max-width: 560px) {
	.dma-ai-content .accordion-body img, .dma-ai-content img.float-end { width: 110px; margin-left: 16px; }
}
/* AI data tables (cabin arrangement, water toys) — styled to read like the rest
   of the page's spec / flat lists: transparent, hairline-ruled rows, mono-caps
   column labels and a serif value column. NO card / border / shadow / zebra —
   those made the table look foreign to the airy section layout. */
.dma-ai-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0 24px; }
.dma-ai-content table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 15px; }
.dma-ai-tablewrap > table { margin: 0; }
/* On phones let the wrapper scroll horizontally rather than crushing columns. */
@media (max-width: 640px) { .dma-ai-tablewrap table { min-width: 500px; } }
/* Neutralise Bootstrap's .table / .table-bordered / .table-striped chrome baked
   into the stored AI markup (vertical borders + zebra) — we only want our own
   horizontal hairlines on a transparent surface. */
.dma-ai-content table, .dma-ai-content thead, .dma-ai-content tbody, .dma-ai-content tr, .dma-ai-content th, .dma-ai-content td { background: transparent !important; border: 0 !important; box-shadow: none; }
.dma-ai-content caption { text-align: left; color: var(--txt-2, #4A5566); font-size: 14px; line-height: 1.6; padding: 0 0 18px; max-width: 68ch; }
.dma-ai-content thead th { font-family: var(--mono, monospace); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-2, #4A5566); text-align: left; vertical-align: bottom; padding: 0 36px 14px 0; border-bottom: 1px solid var(--rule, #C2BEB6) !important; }
.dma-ai-content tbody td { text-align: left; vertical-align: top; padding: 20px 36px 20px 0; border-bottom: 1px solid var(--rule, #C2BEB6) !important; color: var(--txt-2, #4A5566); line-height: 1.6; }
.dma-ai-content thead th:first-child { min-width: 9em; }
.dma-ai-content tbody td:first-child { font-family: var(--serif, Georgia, serif); font-size: 19px; font-weight: 500; color: var(--txt, #14202E); letter-spacing: -0.01em; line-height: 1.3; padding-right: 44px; min-width: 9em; }
.dma-ai-content thead th:last-child, .dma-ai-content tbody td:last-child { padding-right: 0; }
.dma-ai-content tbody tr:last-child td { border-bottom: 0; }
/* The cabin table sits in the wide accommodation column — let it use the full
   width (prose stays capped elsewhere) so columns don't wrap into tall towers. */
#accommodation .dma-ai-content { max-width: none; }
/* The AI crew accordion fills the full crew-section width so its names, dividers
   and photos line up with the stats row (crew size / captain / nationality /
   languages) above it instead of stopping at 760px. */
#crew .dma-ai-content.dma-ai-accordion { max-width: none; }
/* Same for the DINING menu — fill the section width so the meal rows, dividers
   and chevrons line up with the section heading instead of stopping at 760px. */
#dining .dma-ai-content.dma-ai-accordion { max-width: none; }
/* The AI cabins schema is always 4 cols (Cabin · Bed · Bathroom details · AC).
   Column 3 is long prose; give it the room and keep the rest compact so rows
   stay tight and even (like the airy water-toys table) instead of towering. */
#accommodation .dma-ai-content table { table-layout: fixed; }
#accommodation .dma-ai-content th:nth-child(1), #accommodation .dma-ai-content td:nth-child(1) { width: 22%; }
#accommodation .dma-ai-content th:nth-child(2), #accommodation .dma-ai-content td:nth-child(2) { width: 19%; }
#accommodation .dma-ai-content th:nth-child(3), #accommodation .dma-ai-content td:nth-child(3) { width: 47%; }
#accommodation .dma-ai-content th:nth-child(4), #accommodation .dma-ai-content td:nth-child(4) { width: 12%; }
/* Embedded headings inside AI HTML (food-menu sub-categories, special-feature
   titles) — keep them on-brand (serif) and clearly subordinate to the section
   heading so the hierarchy never inverts. Without this they inherit the theme's
   large global heading sizes and overpower the accordion section labels. */
/* !important beats mo_filter's global `h1..h6{font-family:Montserrat!important;font-weight:normal!important}` */
.dma-ai-content h2, .dma-ai-content h3 { font-family: var(--serif, Georgia, serif) !important; font-weight: 600 !important; color: var(--navy, #0e1b2a); font-size: 18px !important; line-height: 1.3 !important; margin: 22px 0 10px; letter-spacing: 0 !important; }
.dma-ai-content h4, .dma-ai-content h5, .dma-ai-content h6 { font-family: var(--serif, Georgia, serif) !important; font-weight: 600 !important; color: var(--navy, #0e1b2a); font-size: 15px !important; line-height: 1.3 !important; margin: 18px 0 8px; letter-spacing: 0 !important; }
.dma-ai-content h2:first-child, .dma-ai-content h3:first-child, .dma-ai-content h4:first-child, .dma-ai-content h5:first-child { margin-top: 0; }
.dma-ai-content strong, .dma-ai-content b { font-weight: 600; color: var(--navy, #0e1b2a); }
/* AI yacht description sits in the Description column — render it at the section's
   reading size (like body--lg), not the compact 15px used for data fields. */
.dma-ai-content.dma-ai-prose { max-width: none; font-size: 17px; line-height: 1.75; color: var(--txt-2, #4A5566); }
.dma-ai-content.dma-ai-prose p { margin: 0 0 20px; }
.dma-ai-content.dma-ai-prose p:last-child { margin-bottom: 0; }
/* AI description (no two-column lede) — single column, capped for a comfortable
   reading measure (not split into two columns). */
.dma-desc-full { max-width: 60rem; }
.dma-ai-content.dma-ai-prose.dma-desc-full { max-width: 60rem; }

/* AI crew/food content arrives as a Bootstrap accordion; the new theme has no
   Bootstrap JS wired for it, so style it into a clean, always-expanded list with
   the section label (meal / crew name) as the dominant heading of its block. */
/* Strip Bootstrap's default white card chrome so the menu/crew accordion blends
   into the section surface instead of sitting in a stark white box. */
.dma-ai-content .accordion, .dma-ai-content .accordion-item, .dma-ai-content .accordion-body, .dma-ai-content .accordion-collapse, .dma-ai-content .accordion-header { background: transparent !important; border: 0; box-shadow: none !important; }
.dma-ai-content .accordion-item { border-bottom: 1px solid rgba(20,32,46,0.12); padding: 18px 0; }
.dma-ai-content .accordion-item:first-child { padding-top: 0; }
.dma-ai-content .accordion-button { all: unset; display: block; font-family: var(--serif, Georgia, serif); font-size: 21px; font-weight: 600; color: var(--navy, #0e1b2a); margin-bottom: 10px; cursor: default; }
.dma-ai-content .accordion-button::after { display: none; }
.dma-ai-content .accordion-collapse { display: block !important; }
.dma-ai-content .accordion-body { padding: 0; }

/* REAL collapsible accordions (JS-toggled) for the dining menu AND the AI crew:
   click a meal / crew member to open/close it. Panels stay hidden until their
   item gets .is-open, and a gold chevron rotates to show state. The combined
   `.dma-ai-content.dma-ai-accordion` selector (0,3,x) beats the always-open
   rules above (0,2,x). Crew/food share this; other AI content stays expanded. */
.dma-ai-content.dma-ai-accordion .accordion-button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; margin-bottom: 0; padding: 4px 0; }
.dma-ai-content.dma-ai-accordion .accordion-item { padding: 0; border-bottom: 1px solid var(--rule, #C2BEB6); }
.dma-ai-content.dma-ai-accordion .accordion-item.is-open { padding-bottom: 22px; }
.dma-ai-content.dma-ai-accordion .accordion-button::after { content: ""; display: inline-block; width: 9px; height: 9px; border-right: 1.5px solid var(--gold-text, #846A3A); border-bottom: 1.5px solid var(--gold-text, #846A3A); transform: rotate(45deg); transition: transform .25s ease; flex: 0 0 auto; position: relative; top: -3px; }
.dma-ai-content.dma-ai-accordion .accordion-item.is-open .accordion-button::after { transform: rotate(-135deg); top: 2px; }
.dma-ai-content.dma-ai-accordion .accordion-collapse { display: none !important; }
.dma-ai-content.dma-ai-accordion .accordion-item.is-open .accordion-collapse { display: block !important; }
.dma-ai-content.dma-ai-accordion .accordion-button:hover { color: var(--gold-text, #846A3A); }
.dma-ai-content.dma-ai-accordion .accordion-button:focus-visible { outline: 2px solid var(--gold-text, #846A3A); outline-offset: 4px; }

.dma-flat-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  row-gap: 0;
  margin: 0;
  padding: 0;
}
.dma-flat-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.dma-flat-list__row dt {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--txt-2);
  letter-spacing: 0.01em;
}
.dma-flat-list__row dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--txt);
  letter-spacing: -0.01em;
  text-align: right;
}
@media (max-width: 880px) {
  .dma-flat-list { grid-template-columns: 1fr; column-gap: 0; }
  .dma-section-heading { font-size: 18px; margin-bottom: 48px !important; }
}

/* =============================================================================
   RELATED YACHT CARDS (single-estate_property)
   ============================================================================= */
.dma-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dma-related-card { display: block; }
.dma-related-card__link { display: block; color: inherit; }
.dma-related-card__img {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3; background: var(--stone);
}
.dma-related-card__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease;
}
.dma-related-card:hover .dma-related-card__img img { transform: scale(1.04); }
.dma-related-card__meta { padding-top: 4px; }

/* Mobile — swipeable horizontal carousel: one yacht per viewport, peek next */
@media (max-width: 768px) {
  .dma-related-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 16px;
    /* Allow cards to bleed past container edges for a more immersive feel */
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: none;
  }
  .dma-related-grid::-webkit-scrollbar { display: none; }
  .dma-related-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

/* =============================================================================
   CABIN GRID (accommodation section)
   ============================================================================= */
.dma-cabin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.dma-cabin-card {
  padding: 24px 0;
  border-top: 1px solid rgba(20,32,46,0.12);
}
.dma-cabin-card__num {
  font-family: var(--serif);
  font-size: clamp(36px, 2.5vw, 64px);
  font-weight: 300;
  line-height: 1;
  color: var(--gold-text);
}
.dma-spec-list { margin: 0; }
.dma-spec-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 14px 0;
  border-bottom: 1px solid rgba(20,32,46,0.12);
  align-items: baseline;
}
.dma-spec-list__row dt { margin: 0; }
.dma-spec-list__row dd { margin: 0; }
.dma-spec-list__val { font-size: clamp(15px, 0.84vw, 22px); font-weight: 300; }

/* =============================================================================
   GLOBAL — hide hidden Bootstrap modals before Bootstrap CSS loads,
   and ensure our overrides never let them flash inline.
   ============================================================================= */
.modal { display: none; }
.modal.show { display: block; }
body.modal-open { overflow: hidden; }

/* =============================================================================
   MODAL RESKIN
   ============================================================================= */

#yacht_modal .modal-content,
#yachtsale_modal .modal-content {
  border-radius: 0 !important;
  border: 0 !important;
  background: var(--ivory) !important;
}
#yacht_modal .modal-header,
#yachtsale_modal .modal-header {
  border-bottom: 1px solid var(--rule) !important;
  padding: 24px 32px !important;
}
#yacht_modal .modal-title,
#yachtsale_modal .modal-title {
  font-family: var(--serif) !important;
  font-size: 28px !important; font-weight: 300 !important;
}
.mo_single_yacht_form_head { font-family: var(--serif) !important; }
.conv_header {
  background-size: cover !important; background-position: center !important;
  padding: 40px 32px !important; border-radius: 0 !important;
}
.conv_header h3 {
  font-family: var(--serif) !important;
  font-size: 28px !important; font-weight: 300 !important;
  color: var(--txt) !important;
}

/* =============================================================================
   RESPONSIVE — MOBILE BREAKPOINTS
   ============================================================================= */

@media (max-width: 1024px) {
  .dma-nav { padding: 20px 32px; }
  .dma-hero__content { padding: 0 32px 64px; grid-template-columns: 1fr; }
  .dma-hero__actions { align-items: flex-start; }
  .dma-yacht-grid { grid-template-columns: repeat(2, 1fr); }
  .dma-listings { grid-template-columns: 1fr; }
  .dma-listings__grid { grid-template-columns: repeat(2, 1fr); }
  .dma-two-col { grid-template-columns: 1fr; gap: 48px; }
  .dma-detail-hero__specs { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .dma-sticky-bar { grid-template-columns: 1fr 1fr; }
  .dma-specs__grid { grid-template-columns: 1fr; }
  .dma-trust__stats { grid-template-columns: repeat(3, 1fr); }
  .container, .container--narrow { padding: 0 32px; }
}
@media (max-width: 768px) {
  .dma-nav__menu, .dma-nav__actions { display: none; }
  .dma-destinations__grid-top { grid-template-columns: repeat(2, 1fr); }
  .dma-destinations__grid-bottom { grid-template-columns: 1fr; }
  .dma-brokers__grid { grid-template-columns: repeat(2, 1fr); }
  .dma-yacht-grid { grid-template-columns: 1fr; }
  .dma-listings__grid { grid-template-columns: 1fr; }
  .dma-sticky-bar { grid-template-columns: 1fr; gap: 16px; padding: 16px 24px; }
  .container, .container--narrow { padding: 0 20px; }
}

/* Cabins is a mobile-only convenience spec — Guests already covers cabins on
   desktop ("12 / 6 cabins"), so we hide Cabins everywhere except the mobile
   breakpoint where it fills the middle slot between Length and Price. */
.dma-detail-hero__spec--cabins { display: none; }

/* Mobile hero — collapse to title + Length / Cabins / Price, anchored at the
   bottom of the image. */
@media (max-width: 640px) {
  .dma-detail-hero { min-height: 72vh; }
  .dma-detail-hero__content { padding: 0 20px 32px; }
  .dma-detail-hero__eyebrow { display: none; }
  .dma-detail-hero__title { font-size: 40px; line-height: 1.05; margin-bottom: 0; }
  .dma-detail-hero__specs {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    padding-top: 18px;
    margin-top: 20px;
    max-width: none;
  }
  .dma-detail-hero__spec--builder,
  .dma-detail-hero__spec--guests,
  .dma-detail-hero__spec--built,
  .dma-detail-hero__spec--type {
    display: none;
  }
  .dma-detail-hero__spec--cabins { display: block; }   /* re-enable on mobile */
  .dma-detail-hero__spec-value { font-size: 16px; }
}

/* =============================================================================
   GALLERY (single-estate_property)
   ============================================================================= */
.dma-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    aspect-ratio: 16 / 9;
    max-height: 720px;
}
.dma-gallery__item {
    position: relative;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: var(--stone);
    cursor: pointer;
}
.dma-gallery__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.dma-gallery__item--lg {
    grid-row: span 2;
}
.dma-gallery__item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 600ms ease;
}
.dma-gallery__item:hover img { transform: scale(1.04); }
.dma-gallery__item--more::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(14,27,42,0.6);
    transition: background 250ms ease;
}
.dma-gallery__item--more:hover::after { background: rgba(14,27,42,0.75); }
.dma-gallery__more-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: var(--ivory);
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 0.02em;
}
@media (max-width: 768px) {
    .dma-gallery { grid-template-columns: 1fr 1fr; aspect-ratio: 4/5; }
    .dma-gallery__item--lg { grid-column: span 2; grid-row: span 1; }
}

/* Lightbox */
.dma-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(14,27,42,0.96);
    display: none;
    align-items: center; justify-content: center;
}
.dma-lightbox.is-open { display: flex; }
.dma-lightbox__img {
    max-width: 92vw; max-height: 86vh;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.dma-lightbox__btn {
    position: absolute;
    background: transparent;
    border: 1px solid rgba(244,239,230,0.4);
    color: var(--ivory);
    width: 56px; height: 56px;
    cursor: pointer;
    font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    transition: background 250ms ease, border-color 250ms ease;
}
.dma-lightbox__btn:hover { background: rgba(244,239,230,0.1); border-color: var(--gold); }
.dma-lightbox__close { top: 32px; right: 32px; }
.dma-lightbox__prev { left: 32px; top: 50%; transform: translateY(-50%); }
.dma-lightbox__next { right: 32px; top: 50%; transform: translateY(-50%); }
.dma-lightbox__counter {
    position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
    color: rgba(244,239,230,0.7);
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
}
@media (max-width: 768px) {
    .dma-lightbox__close { top: 16px; right: 16px; width: 44px; height: 44px; }
    .dma-lightbox__prev, .dma-lightbox__next { width: 44px; height: 44px; }
    .dma-lightbox__prev { left: 8px; }
    .dma-lightbox__next { right: 8px; }
}

/* =============================================================================
   VIDEOS GRID
   ============================================================================= */
.dma-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 32px;
}
.dma-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--navy);
    overflow: hidden;
}
.dma-video-frame iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%; border: 0;
}
@media (max-width: 768px) {
    .dma-video-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* =============================================================================
   PRICE TABLE
   ============================================================================= */
.dma-price-table {
    background: var(--ivory);
    border: 1px solid var(--rule);
    margin-top: 48px;
}
.dma-price-table__head,
.dma-price-table__row {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 2fr 2fr;
    gap: 24px;
    padding: 20px 32px;
    align-items: center;
}
.dma-price-table__head {
    border-bottom: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--txt-3);
}
.dma-price-table__row {
    border-bottom: 1px solid var(--rule);
}
.dma-price-table__row:last-child { border-bottom: 0; }
@media (max-width: 880px) {
    .dma-price-table__head { display: none; }
    .dma-price-table__row { grid-template-columns: 1fr; gap: 4px; padding: 16px 20px; }
}

/* =============================================================================
   REVIEWS
   ============================================================================= */
.dma-reviews {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;   /* an expanded card must not stretch its row neighbor into an empty slab */
    gap: 24px;
    /* Collapsed state — show roughly the first two rows */
    max-height: 720px;
    overflow: hidden;
    position: relative;
    transition: max-height 600ms ease;
}
.dma-reviews.is-expanded { max-height: none; }
/* Bottom fade only when content actually overflows the collapsed box.
   The JS controller (single-estate_property.php) adds `is-overflowing`
   when scrollHeight > clientHeight; otherwise the fade never paints. */
.dma-reviews.is-overflowing:not(.is-expanded)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 200px;
    background: linear-gradient(180deg, rgba(234,227,213,0) 0%, var(--ivory-2) 100%);
    pointer-events: none;
}
/* Each plugin-rendered review card */
.dma-reviews > * ,
.dma-reviews blockquote,
.dma-reviews .review,
.dma-reviews .testimonial {
    background: var(--ivory);
    border: 1px solid var(--rule);
    padding: 28px 32px;
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--txt);
    border-radius: 0;
}
/* Strip plugin's own background/borders that cause stacked-card look */
.dma-reviews > div { background: var(--ivory); }
.dma-reviews cite,
.dma-reviews .review-attribution {
    display: block;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-style: normal;
}
.dma-reviews-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    padding: 14px 24px;
    border: 1px solid var(--navy);
    background: transparent;
    color: var(--navy);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 250ms ease, color 250ms ease;
}
.dma-reviews-toggle:hover {
    background: var(--navy);
    color: var(--ivory);
}

/* Per-review line clamp — each review's text body shows ~5 lines, with a
   "Read more" button injected by JS when the body actually overflows. */
.dma-reviews .yacht_rev > div:not(.clr):not(:first-of-type) {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dma-reviews .bs-example.is-expanded .yacht_rev > div:not(.clr):not(:first-of-type) {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}
.dma-review-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gold-deep);
    color: var(--gold-text);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    font-style: normal;
    transition: color 200ms ease, border-color 200ms ease;
}
.dma-review-readmore:hover {
    color: var(--navy);
    border-color: var(--navy);
}
/* Crew bios share the per-card clamp + "Read more" pattern with reviews.
   Note: -webkit-box overrides white-space:pre-line rendering of blank lines,
   so the clamped state looks denser — expanded restores the pre-line flow. */
.dma-crew-card__bio--clamped {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 880px) {
    .dma-reviews { grid-template-columns: 1fr; max-height: 580px; }
}

.dma-resource-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    max-width: 880px;
}
.dma-resource-link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px;
    border: 1px solid var(--rule);
    background: var(--ivory);
    color: var(--txt);
    transition: border-color 250ms ease, transform 250ms ease;
}
.dma-resource-link:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}



/* =============================================================================
   EXPLORE / LISTING PAGE  (template-landing.php)
   Contemporary crisp — pure white page, cards with subtle elevation, image-led.
   Defensive !important throughout (plugin CSS contests width / padding /
   background / button styling on these classes).
   ============================================================================= */

.dma-landing,
body.page-template-template-landing {
    --xp-bg:        #FAFAF8;
    --xp-card:      #FFFFFF;
    --xp-ink:       #0E1B2A;
    --xp-ink-2:     #3F4D5E;
    --xp-mute:      #6F7A89;
    --xp-faint:     #9AA2AE;
    --xp-accent:    #1B3A57;
    --xp-accent-2:  #2D5279;
    --xp-gold:      #B89766;
    --xp-rule:      rgba(14, 27, 42, 0.08);
    --xp-rule-2:    rgba(14, 27, 42, 0.04);
    --xp-shadow-sm: 0 1px 2px rgba(14,27,42,0.04);
    --xp-shadow-md: 0 8px 24px rgba(14,27,42,0.06), 0 2px 6px rgba(14,27,42,0.04);
    --xp-shadow-lg: 0 24px 60px rgba(14,27,42,0.10), 0 6px 16px rgba(14,27,42,0.06);
    --xp-easing:    cubic-bezier(.16,.84,.32,1);
}

/* ---------- Page canvas: pure clean white-ish, no grain, no warm tone */
.dma-landing {
    padding: 56px 0 120px !important;
    min-height: 60vh;
    background: var(--xp-bg) !important;
    position: relative;
}
.dma-landing__inner {
    max-width: min(1920px, 100% - clamp(2rem, 4vw, 5rem)) !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative;
}

/* Plugin .container-* would otherwise inject default Bootstrap maxes/paddings */
.dma-landing .container-xxl,
.dma-landing .container-fluid,
.dma-landing .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0 !important;
    background: transparent !important;
}
.dma-landing .nopadding { padding: 0 !important; }

/* ---------- Empty intro (Explore page is empty content) */
.dma-landing .mo_expand.expand-50 { max-height: none !important; overflow: visible !important; }
.dma-landing .expand-overlay { display: none !important; }
.dma-landing > .dma-landing__inner > .container-xxl > .mo_spacer { display: none; }
.dma-landing .mo_header { margin-bottom: 0; }
.dma-landing .mo_header:not(:has(h1)):not(:has(p:not(:empty))) { display: none; }
.dma-landing .mo_header h1 {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(44px, 5vw, 80px);
    line-height: 1;
    letter-spacing: -0.022em;
    color: var(--xp-ink);
    margin: 0 0 28px;
    text-align: left;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--xp-rule);
}
.dma-landing .mo_header p {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--xp-ink-2);
    margin: 0 0 16px;
}

/* ---------- Layout: filter rail + results column */
.dma-landing .mt-3 {
    display: grid !important;
    grid-template-columns: clamp(320px, 21vw, 400px) 1fr !important;
    gap: clamp(32px, 2.5vw, 64px) !important;
    margin-top: 40px !important;
    align-items: start !important;
    position: relative !important;
    background: transparent !important;
}
@media (max-width: 991px) {
    .dma-landing .mt-3 { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ---------- FILTER SIDEBAR — its own white card, not cut off */
.dma-landing .mo_filters {
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-rule) !important;
    border-radius: 4px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: clamp(320px, 21vw, 400px) !important;
    box-shadow: var(--xp-shadow-sm) !important;
}
/* Disable the JS sticky/fixed positioning so the sidebar can grow tall without
   cutting off — it just scrolls with the page. Keeps all data-* attrs intact. */
.dma-landing #filtersContainer {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    padding: 24px 22px !important;
}
.dma-landing #filters.mo_filters { position: static !important; max-height: none !important; overflow: visible !important; }
.dma-landing .mo_filters .filtersInnerContainer { display: block !important; }

/* Filter section labels */
.dma-landing .mo_filters .panel-heading,
.dma-landing .mo_filters .tightHeadings {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: var(--xp-mute) !important;
    padding: 0 0 10px !important;
    margin: 22px 0 12px !important;
    border-bottom: 1px solid var(--xp-rule-2) !important;
    background: transparent !important;
    font-weight: 500 !important;
}
.dma-landing .mo_filters .panel-heading:first-of-type,
.dma-landing .mo_filters .tightHeadings:first-of-type { margin-top: 0 !important; }
.dma-landing .mo_filters .panel-body { padding: 0 !important; background: transparent !important; }
.dma-landing .mo_filters .filterCheckboxes,
.dma-landing .mo_filters .filterSlider { margin-bottom: 18px; }

/* Sail/Power/Catamaran/Monohull toggles */
.dma-landing .mo_filters .btn-group.flat {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    background: transparent !important;
}
.dma-landing .mo_filters .btn-group.flat label.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 12px !important;
    border: 1px solid var(--xp-rule) !important;
    background: var(--xp-card) !important;
    color: var(--xp-ink-2) !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    border-radius: 3px !important;
    margin: 0 !important;
    transition: all 200ms var(--xp-easing) !important;
    box-shadow: none !important;
    background-image: none !important;
}
.dma-landing .mo_filters .btn-group.flat label.btn:hover {
    border-color: var(--xp-ink) !important;
    color: var(--xp-ink) !important;
}
.dma-landing .mo_filters .btn-group.flat label.btn.active,
.dma-landing .mo_filters .btn-group.flat label.btn.btn-primary {
    background: var(--xp-ink) !important;
    color: var(--xp-card) !important;
    border-color: var(--xp-ink) !important;
}
.dma-landing .mo_filters .btn-group.flat label.btn img,
.dma-landing .mo_filters .filtersContainer label img,
.dma-landing .mo_filters .filtersContainer .checkbox img { display: none !important; }

/* Number input +/- */
.dma-landing .mo_filters .input-group {
    display: grid !important;
    grid-template-columns: 36px 1fr 36px !important;
    border: 1px solid var(--xp-rule) !important;
    overflow: hidden !important;
    background: var(--xp-card) !important;
    border-radius: 3px !important;
    transition: border-color 200ms var(--xp-easing), box-shadow 200ms var(--xp-easing);
}
.dma-landing .mo_filters .input-group:focus-within {
    border-color: var(--xp-accent) !important;
    box-shadow: 0 0 0 3px rgba(27,58,87,0.10) !important;
}
.dma-landing .mo_filters .input-group .btn-number {
    border: 0 !important;
    background: transparent !important;
    color: var(--xp-ink) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background 150ms var(--xp-easing) !important;
}
.dma-landing .mo_filters .input-group .btn-number:hover { background: rgba(14,27,42,0.04) !important; }
.dma-landing .mo_filters .input-group .input-number,
.dma-landing .mo_filters .input-group .plusminus {
    border: 0 !important;
    border-left: 1px solid var(--xp-rule-2) !important;
    border-right: 1px solid var(--xp-rule-2) !important;
    text-align: center !important;
    font-family: var(--mono) !important;
    font-size: 13px !important;
    color: var(--xp-ink) !important;
    background: transparent !important;
    padding: 10px 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    font-feature-settings: "tnum" 1;
}
.dma-landing .mo_filters .input-group .input-number:focus { outline: none !important; }

/* Date / name / dropdown text inputs */
.dma-landing .mo_filters input.mo_daterange,
.dma-landing .mo_filters input[name="datefilter"],
.dma-landing .mo_filters input#byname,
.dma-landing .mo_filters input[name="byname"] {
    width: 100% !important;
    border: 1px solid var(--xp-rule) !important;
    background: var(--xp-card) !important;
    border-radius: 3px !important;
    padding: 10px 12px !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    color: var(--xp-ink) !important;
    transition: border-color 200ms var(--xp-easing), box-shadow 200ms var(--xp-easing) !important;
    box-shadow: none !important;
}
.dma-landing .mo_filters input.mo_daterange:focus,
.dma-landing .mo_filters input#byname:focus,
.dma-landing .mo_filters input[name="byname"]:focus {
    border-color: var(--xp-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(27,58,87,0.10) !important;
}

/* Dropdown trigger (locations / builders) */
.dma-landing .mo_filters .dropdown { width: 100% !important; margin-bottom: 14px !important; }
.dma-landing .mo_filters .dropdown > .btn,
.dma-landing .mo_filters .dropdown-toggle {
    width: 100% !important;
    text-align: left !important;
    border: 1px solid var(--xp-rule) !important;
    background: var(--xp-card) !important;
    color: var(--xp-ink) !important;
    padding: 10px 12px !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    border-radius: 3px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: border-color 200ms var(--xp-easing) !important;
    box-shadow: none !important;
}
.dma-landing .mo_filters .dropdown-toggle:hover { border-color: var(--xp-ink) !important; }
.dma-landing .mo_filters .dropdown-menu.mo {
    width: 100% !important;
    border: 1px solid var(--xp-rule) !important;
    background: var(--xp-card) !important;
    border-radius: 3px !important;
    box-shadow: var(--xp-shadow-md) !important;
    padding: 6px 0 !important;
    max-height: 320px !important;
    overflow-y: auto !important;
}
.dma-landing .mo_filters .dropdown-menu.mo a,
.dma-landing .mo_filters .dropdown-menu.mo li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 14px !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    color: var(--xp-ink-2) !important;
    cursor: pointer !important;
}
.dma-landing .mo_filters .dropdown-menu.mo a:hover {
    background: rgba(27,58,87,0.06) !important;
    color: var(--xp-ink) !important;
}
.dma-landing .mo_filters .dropdown-menu.mo .checked,
.dma-landing .mo_filters .dropdown-menu.mo .selected,
.dma-landing .mo_filters .dropdown-menu.mo a.active {
    color: var(--xp-accent) !important;
    font-weight: 500 !important;
    background: rgba(27,58,87,0.06) !important;
}

/* Checkboxes */
.dma-landing .mo_filters .checkbox.devmodex,
.dma-landing .mo_filters .checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    color: var(--xp-ink-2) !important;
    cursor: pointer !important;
    background: transparent !important;
}
.dma-landing .mo_filters .checkbox input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--xp-accent) !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* Apply / Go button */
.dma-landing .mo_filters .go_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 14px !important;
    padding: 13px 18px !important;
    background: var(--xp-ink) !important;
    color: var(--xp-card) !important;
    border: 0 !important;
    border-radius: 3px !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 220ms var(--xp-easing) !important;
    background-image: none !important;
    box-shadow: none !important;
}
.dma-landing .mo_filters .go_button:hover { background: var(--xp-accent) !important; }

/* ---------- RESULTS COLUMN — open canvas (no card wrapping the whole column) */
.dma-landing .mo_results {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    min-width: 0;
}
.dma-landing .mo_results > div,
.dma-landing .mo_results > .col-md-12,
.dma-landing #mo_ajax_container { width: 100% !important; background: transparent !important; }
.dma-landing .mo_results .col-md-12 { padding: 0 !important; background: transparent !important; }
.dma-landing .mo_results > .col-md-12 > .col { padding: 0 !important; background: transparent !important; }

/* Results header / chip row — sits on the open canvas, separated by a hairline */
.dma-landing .mo_quick_pricerange {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 28px !important;
    padding: 0 0 24px !important;
    border-bottom: 1px solid var(--xp-rule) !important;
    background: transparent !important;
}
.dma-landing .mo_quick_pricerange h3 {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: var(--xp-mute) !important;
    font-weight: 500 !important;
    margin: 0 0 12px !important;
    flex: 0 0 100% !important;
    background: transparent !important;
}

/* Outlined ink pill chips, fill on hover/active */
.dma-landing .mo_quick_pricerange .mo_pricerange_btn,
.dma-landing .mo_quick_pricerange .btn,
.dma-landing .mo_quick_pricerange .btn-blue,
.dma-landing .mo_quick_pricerange .btn-large {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 13px !important;
    margin: 0 !important;
    border: 1px solid var(--xp-rule) !important;
    background: var(--xp-card) !important;
    background-image: none !important;
    color: var(--xp-ink) !important;
    font-family: var(--mono) !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 220ms var(--xp-easing) !important;
    text-decoration: none !important;
    box-shadow: var(--xp-shadow-sm) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
.dma-landing .mo_quick_pricerange .mo_pricerange_btn:hover,
.dma-landing .mo_quick_pricerange .btn:hover {
    border-color: var(--xp-ink) !important;
    color: var(--xp-card) !important;
    background: var(--xp-ink) !important;
}
.dma-landing .mo_quick_pricerange .mo_pricerange_btn.active,
.dma-landing .mo_quick_pricerange .btn-blue.active {
    background: var(--xp-ink) !important;
    color: var(--xp-card) !important;
    border-color: var(--xp-ink) !important;
}

/* Dock pagination */
.dma-landing #mo_ajax_container > .col.text-center {
    margin: 0 0 28px !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
    background: transparent !important;
}
.dma-landing .previousdock,
.dma-landing .nextdock {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 12px 28px !important;
    border: 1px solid var(--xp-ink) !important;
    background: var(--xp-card) !important;
    background-image: none !important;
    color: var(--xp-ink) !important;
    border-radius: 3px !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 220ms var(--xp-easing) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    box-shadow: var(--xp-shadow-sm) !important;
}
.dma-landing .previousdock:hover,
.dma-landing .nextdock:hover {
    background: var(--xp-ink) !important;
    color: var(--xp-card) !important;
}

/* ---------- CARD GRID — proper gap, full bleed */
.dma-landing .listitempage {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 48px 36px !important;
    margin: 0 !important;
    width: 100% !important;
    --bs-gutter-x: 0 !important;
    background: transparent !important;
}
/* Match the row gap between successive AJAX-loaded grid batches.
   Each "more" page is a sibling .listitempage; add the same 48px above it. */
.dma-landing .listitempage + .listitempage,
.dma-landing .morex.listitempage,
.dma-landing #mo_ajax_loadmore .listitempage {
    margin-top: 48px !important;
}
.dma-landing .listing_wrapper {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex: 1 1 calc(33.333% - 24px) !important;
    max-width: calc(33.333% - 24px) !important;
    width: auto !important;
    --bs-gutter-x: 0 !important;
    background: transparent !important;
    opacity: 0;
    transform: translateY(20px);
    animation: dmaXpEntrance 600ms var(--xp-easing) forwards;
}
.dma-landing .firstx .listing_wrapper:nth-child(1)  { animation-delay:  40ms; }
.dma-landing .firstx .listing_wrapper:nth-child(2)  { animation-delay:  90ms; }
.dma-landing .firstx .listing_wrapper:nth-child(3)  { animation-delay: 140ms; }
.dma-landing .firstx .listing_wrapper:nth-child(4)  { animation-delay: 190ms; }
.dma-landing .firstx .listing_wrapper:nth-child(5)  { animation-delay: 240ms; }
.dma-landing .firstx .listing_wrapper:nth-child(6)  { animation-delay: 290ms; }
.dma-landing .firstx .listing_wrapper:nth-child(7)  { animation-delay: 340ms; }
.dma-landing .firstx .listing_wrapper:nth-child(8)  { animation-delay: 390ms; }
.dma-landing .firstx .listing_wrapper:nth-child(9)  { animation-delay: 440ms; }
.dma-landing .firstx .listing_wrapper:nth-child(n+10) { animation-delay: 490ms; }
@keyframes dmaXpEntrance {
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .dma-landing .listing_wrapper { opacity: 1 !important; transform: none !important; animation: none !important; }
    /* Honour reduced-motion site-wide: near-instant transitions, no looping
       animations, no smooth scroll. (The muted, looping hero background video
       is intentionally left playing per product decision — it carries no
       essential or attention-seeking motion content.) */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .dma-hero__scroll::after { animation: none !important; }
}
@media (max-width: 1199px) {
    .dma-landing .listing_wrapper {
        flex: 1 1 calc(50% - 18px) !important;
        max-width: calc(50% - 18px) !important;
    }
}
@media (max-width: 600px) {
    .dma-landing .listing_wrapper {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ---------- YACHT CARD — white surface, subtle elevation, lifts on hover */
.dma-landing .property_listing {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    background: var(--xp-card) !important;
    border: 1px solid var(--xp-rule) !important;
    border-radius: 4px !important;
    box-shadow: var(--xp-shadow-sm) !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 0 !important;
    transition: transform 320ms var(--xp-easing), box-shadow 320ms var(--xp-easing), border-color 320ms var(--xp-easing) !important;
}
/* Move price to the top-right of the card body (next to the title).
   Body stays a normal flex column; price is absolute-positioned within it. */
.dma-landing .dma-card__body {
    position: relative !important;
}
.dma-landing .dma-card__body > .single_yacht_title.dma-card__title {
    padding-right: 200px !important;
}
.dma-landing .dma-card__body > .single_yacht_price.dma-card__price {
    position: absolute !important;
    top: 22px !important;        /* matches body padding-top so it baselines with title */
    right: 22px !important;      /* matches body padding-right so it doesn't bleed off-card */
    left: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    line-height: 29.4px !important;  /* matches title line-height for baseline alignment */
}
.dma-landing .property_listing:hover {
    transform: translateY(-3px);
    box-shadow: var(--xp-shadow-lg) !important;
    border-color: rgba(14,27,42,0.14) !important;
}

/* IMAGE */
.dma-landing .dma-card__media {
    position: relative !important;
    aspect-ratio: 4 / 3 !important;
    background: rgba(14,27,42,0.04) !important;
    overflow: hidden !important;
    margin: 0 !important;
}
.dma-landing .dma-card__media .swiper,
.dma-landing .dma-card__media .swiper-container { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
.dma-landing .dma-card__media .swiper-slide { width: 100% !important; height: 100% !important; }
.dma-landing .dma-card__media img,
.dma-landing .dma-card__media .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 800ms var(--xp-easing) !important;
}
.dma-landing .property_listing:hover .dma-card__media img,
.dma-landing .property_listing:hover .dma-card__media .swiper-slide img { transform: scale(1.04); }
.dma-landing .mo_singlespinner {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--xp-mute) !important;
    z-index: 1 !important;
}

/* Swiper UI */
.dma-landing .swiper-button-next,
.dma-landing .swiper-button-prev {
    color: var(--xp-card) !important;
    --swiper-navigation-size: 18px !important;
    z-index: 6 !important;
}
.dma-landing .swiper-pagination-bullet { background: var(--xp-card) !important; opacity: 0.55 !important; }
.dma-landing .swiper-pagination-bullet-active { background: var(--xp-card) !important; opacity: 1 !important; }

/* Badges */
.dma-landing .mo_badges {
    position: absolute !important;
    top: 12px; left: 12px;
    z-index: 4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;     /* prevent stretch to tallest badge */
    gap: 5px;
    background: transparent !important;
}
.dma-landing .mo_badges > * {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;       /* center text horizontally */
    gap: 4px !important;
    padding: 4px 12px !important;
    height: 22px !important;                  /* uniform height across all badges */
    width: auto !important;                   /* override plugin's fixed 81px width */
    min-width: 0 !important;
    max-width: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;           /* never wrap text to a 2nd line */
    text-align: center !important;
    background: rgba(14,27,42,0.82) !important;
    color: var(--xp-card) !important;
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(6px) !important;
    border-radius: 2px !important;
}
.dma-landing .mo_badges > * br { display: none !important; }
.dma-landing .mo_badges > * .fa,
.dma-landing .mo_badges > * i { font-size: 9px !important; }

/* CARD BODY — left-aligned, generous internal padding, type takes the lead */
.dma-landing .dma-card__body {
    padding: 22px 22px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    flex: 1 !important;
    text-align: left !important;
    align-items: stretch !important;
    background: transparent !important;
}

.dma-landing .single_yacht_title.dma-card__title,
.dma-landing .single_yacht_title.dma-card__title.overflow-hidden {
    font-family: var(--serif) !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.018em !important;
    color: var(--xp-ink) !important;
    margin: 0 !important;
    text-align: left !important;
    width: 100% !important;
    min-height: 2.1em;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    transition: color 220ms var(--xp-easing) !important;
}
.dma-landing .dma-card__title a { color: inherit !important; transition: color 220ms var(--xp-easing) !important; }
.dma-landing .property_listing:hover .dma-card__title { color: var(--xp-accent) !important; }

/* Optional facts (captain / flag) — tiny eyebrow */
.dma-landing .yachtfacts.dma-card__fact {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--xp-mute) !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Price — gold serif, the only colored moment on the card */
.dma-landing .single_yacht_price.dma-card__price {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-family: var(--serif) !important;
    color: var(--xp-ink) !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    background: transparent !important;
}
.dma-landing .dma-card__price-prefix {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: var(--xp-mute) !important;
    font-weight: 500 !important;
}
.dma-landing .dma-card__price-value {
    font-size: 26px !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
    color: var(--xp-gold) !important;
    font-family: var(--serif) !important;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.dma-landing .dma-card__price-suffix {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: var(--xp-mute) !important;
}

/* Specs: aligned 3-column grid so every card has the same vertical rhythm
   regardless of how many specs the yacht reports (4–6 in practice). */
.dma-landing .dma-card__specs.row.fourths {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px 16px !important;
    margin: 0 !important;
    padding: 14px 0 4px !important;
    width: 100% !important;
    border: 0 !important;
    border-top: 1px solid var(--xp-rule) !important;
    align-items: baseline !important;
    background: transparent !important;
}
.dma-landing .dma-card__specs .dma-card__spec.overflow-hidden,
.dma-landing .dma-card__specs .dma-card__spec {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: left !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    color: var(--xp-ink-2) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em !important;
    font-feature-settings: "tnum" 1, "lnum" 1;
    background: transparent !important;
}
/* No bullet separators — cells are visually separated by the grid gap. */
.dma-landing .dma-card__specs .dma-card__spec + .dma-card__spec::before {
    content: none !important;
}
@media (max-width: 600px) {
    .dma-landing .dma-card__specs.row.fourths {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* CTAs — clean row at the bottom of the card, View ghost + Inquire filled */
.dma-landing .conversion_buttons.dma-card__cta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
    background: transparent !important;
}
.dma-landing .dma-card__cta .dma-btn--ghost-ink.btn,
.dma-landing .dma-card__cta a.dma-btn--ghost-ink {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--xp-ink) !important;
    border: 1px solid var(--xp-rule) !important;
    padding: 12px 16px !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    border-radius: 3px !important;
    transition: all 220ms var(--xp-easing) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
}
.dma-landing .dma-card__cta .dma-btn--ghost-ink.btn:hover,
.dma-landing .dma-card__cta a.dma-btn--ghost-ink:hover {
    border-color: var(--xp-ink) !important;
    background: var(--xp-card) !important;
    color: var(--xp-ink) !important;
}
.dma-landing .dma-card__cta .dma-btn--gold.btn,
.dma-landing .dma-card__cta button.dma-btn--gold {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--xp-ink) !important;
    background-image: none !important;
    color: var(--xp-card) !important;
    border: 1px solid var(--xp-ink) !important;
    padding: 12px 16px !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    border-radius: 3px !important;
    transition: all 220ms var(--xp-easing) !important;
    cursor: pointer !important;
    box-shadow: var(--xp-shadow-sm) !important;
    line-height: 1 !important;
}
.dma-landing .dma-card__cta .dma-btn--gold.btn:hover,
.dma-landing .dma-card__cta button.dma-btn--gold:hover {
    background: var(--xp-accent) !important;
    border-color: var(--xp-accent) !important;
    color: var(--xp-card) !important;
}

/* Skeleton loader */
.dma-landing #mo_ajax_loadmore { width: 100%; background: transparent !important; }
.dma-landing #mo_ajax_loadmore .listing_wrapper.uninitialized .property_listing {
    background: linear-gradient(90deg, var(--xp-card) 0%, rgba(14,27,42,0.04) 50%, var(--xp-card) 100%) !important;
    background-size: 200% 100% !important;
    animation: dmaXpSkeleton 1.6s ease-in-out infinite !important;
}
@keyframes dmaXpSkeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsive tightening */
@media (max-width: 1199px) {
    .dma-landing__inner { padding: 0 28px !important; }
    .dma-landing .mt-3 { grid-template-columns: 220px 1fr !important; gap: 32px !important; }
    .dma-landing .mo_filters { max-width: 220px !important; }
}
@media (max-width: 991px) {
    .dma-landing .mo_filters { max-width: 100% !important; }
}
@media (max-width: 767px) {
    .dma-landing { padding-bottom: 80px !important; }
    .dma-landing__inner { padding: 0 20px !important; }
    .dma-landing .mo_header h1 { font-size: clamp(36px, 9vw, 56px) !important; }
    .dma-landing .single_yacht_title.dma-card__title { font-size: 24px !important; }
    .dma-landing .conversion_buttons.dma-card__cta { grid-template-columns: 1fr !important; gap: 8px !important; }
    .dma-landing .dma-card__body { padding: 18px !important; }
}

/* =============================================================================
   EXPLORE / LISTING — additional visual structure (hero, chip strip, depth)
   ============================================================================= */

/* HERO: navy band directly under nav, gives the page a clear opening section */
.dma-landing { padding: 0 0 120px !important; }

.dma-landing__hero {
    background: linear-gradient(135deg, #0E1B2A 0%, #142333 100%);
    color: #F4EFE6;
    padding: 140px 40px 64px;
    position: relative;
    overflow: hidden;
}
.admin-bar .dma-landing__hero { padding-top: 172px; }
.dma-landing__hero::before {
    content: "";
    position: absolute;
    top: -40%; right: -10%;
    width: 60%; height: 180%;
    background: radial-gradient(ellipse at center, rgba(184,151,102,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.dma-landing__hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(184,151,102,0.5) 30%, rgba(184,151,102,0.5) 70%, transparent 100%);
}
.dma-landing__hero-inner {
    max-width: none;
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: end;
    position: relative;
    z-index: 1;
}
.dma-landing__hero-text { display: flex; flex-direction: column; gap: 16px; }
.dma-landing__eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #B89766;
    font-weight: 500;
}
.dma-landing__title {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(48px, 6vw, 92px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    color: #F4EFE6;
    margin: 0;
}
.dma-landing__hero-meta {
    display: flex;
    gap: 36px;
    align-items: flex-end;
    padding-bottom: 6px;
}
.dma-landing__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 1px solid rgba(244,239,230,0.18);
    padding-left: 18px;
    min-width: 110px;
}
.dma-landing__stat-value {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 38px;
    line-height: 1;
    color: #B89766;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.dma-landing__stat-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(244,239,230,0.6);
    font-weight: 500;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .dma-landing__hero { padding: 120px 28px 48px; }
    .dma-landing__hero-inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
    .dma-landing__hero-meta { gap: 24px; flex-wrap: wrap; }
    .dma-landing__stat { min-width: 90px; }
    .dma-landing__stat-value { font-size: 30px; }
}
@media (max-width: 600px) {
    .dma-landing__hero { padding: 100px 20px 40px; }
    .dma-landing__hero-meta { gap: 16px; }
    .dma-landing__stat { padding-left: 14px; min-width: 0; flex: 1; }
    .dma-landing__stat-value { font-size: 24px; }
}

/* Pull the page content up flush against the hero */
.dma-landing > .dma-landing__inner { padding-top: 0 !important; }

/* The mo_filter plugin wraps the chip strip in a Bootstrap `.col.mt-0.pb-3.ps-3`
   which adds ~16px of left padding — that pushes the chips right of the yacht
   grid edge. Strip it so chips and cards share the same left boundary. */
.dma-landing .mo_results .col.mt-0.pb-3.ps-3,
.dma-landing .mo_results > .col-md-12 > .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* The yacht grid sits inside an inner Bootstrap .row that carries the
   default negative gutter margin (~-11.25px). That pulls the cards 11px
   to the LEFT of the chip strip above. Zero it so they share an edge. */
.dma-landing .container-fluid.nopadding > .row,
.dma-landing .listitempage > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* CHIP STRIP: flush-aligned with yacht grid (no card wrapper, no horizontal padding) */
.dma-landing .mo_quick_pricerange {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 24px !important;
    margin: 0 0 32px !important;
    border-bottom: 1px solid var(--xp-rule) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
}
.dma-landing .mo_quick_pricerange > .col-md-12 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    background: transparent !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.dma-landing .mo_quick_pricerange h3 {
    flex: 0 0 auto !important;
    margin: 0 14px 0 0 !important;
    padding-right: 16px !important;
    border-right: 1px solid var(--xp-rule) !important;
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: var(--xp-mute) !important;
    font-weight: 500 !important;
    background: transparent !important;
}

/* CARD DEPTH: stronger shadow, accent underline that grows on hover */
.dma-landing .property_listing {
    border-radius: 6px !important;
    transition: transform 360ms var(--xp-easing), box-shadow 360ms var(--xp-easing) !important;
    box-shadow: 0 1px 2px rgba(14,27,42,0.05), 0 4px 16px rgba(14,27,42,0.04) !important;
}
.dma-landing .property_listing::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(to right, #B89766 0%, #1B3A57 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms var(--xp-easing);
    z-index: 5;
}
.dma-landing .property_listing:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 60px rgba(14,27,42,0.14), 0 8px 20px rgba(14,27,42,0.08) !important;
    border-color: rgba(14,27,42,0.10) !important;
}
.dma-landing .property_listing:hover::after { transform: scaleX(1); }

/* Section dividers between major regions */
.dma-landing #mo_ajax_container > .col.text-center {
    padding: 24px 0 !important;
    margin: 0 0 32px !important;
    border-top: 1px solid var(--xp-rule) !important;
    border-bottom: 1px solid var(--xp-rule) !important;
}

/* Filter sidebar — add a kicker label at top */
.dma-landing .mo_filters #filtersContainer { padding: 22px 22px 24px !important; position: relative; }
.dma-landing .mo_filters #filtersContainer::before {
    content: "Refine search";
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--xp-ink);
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--xp-ink);
    width: 32px;
    position: relative;
}
.dma-landing .mo_filters #filtersContainer::after {
    content: "";
    display: block;
    position: absolute;
    top: 36px;
    left: 22px; right: 22px;
    height: 1px;
    background: var(--xp-rule);
    z-index: -1;
}

@media (max-width: 991px) {
    .dma-landing > .dma-landing__inner { padding-top: 0 !important; }
}

/* =============================================================================
   FILTER SIDEBAR — input polish
   Plugin CSS sometimes injects font-family on labels + form-validation styles
   leak orange borders. Cover all the bases.
   ============================================================================= */

/* All text inside the filter rail uses Inter sans by default */
.dma-landing .mo_filters,
.dma-landing .mo_filters * {
    font-family: var(--sans) !important;
}
/* But preserve mono on small kicker labels */
.dma-landing .mo_filters .panel-heading,
.dma-landing .mo_filters .tightHeadings,
.dma-landing .mo_filters .input-group .input-number,
.dma-landing .mo_filters .input-group .plusminus,
.dma-landing .mo_filters .go_button,
.dma-landing .mo_filters #filtersContainer::before {
    font-family: var(--mono) !important;
}

/* Kill any orange/red form-validation rings + outlines */
.dma-landing .mo_filters input,
.dma-landing .mo_filters input:focus,
.dma-landing .mo_filters input:invalid,
.dma-landing .mo_filters input:required,
.dma-landing .mo_filters select,
.dma-landing .mo_filters select:focus {
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.dma-landing .mo_filters input:invalid {
    box-shadow: none !important;
    border-color: var(--xp-rule) !important;
}

/* Number input — cleaner: no inner divider lines, larger numerals */
.dma-landing .mo_filters .input-group {
    display: grid !important;
    grid-template-columns: 40px 1fr 40px !important;
    border: 1px solid var(--xp-rule) !important;
    overflow: hidden !important;
    background: var(--xp-card) !important;
    border-radius: 3px !important;
    transition: border-color 200ms var(--xp-easing), box-shadow 200ms var(--xp-easing);
    height: 44px !important;
}
.dma-landing .mo_filters .input-group:focus-within {
    border-color: var(--xp-accent) !important;
    box-shadow: 0 0 0 3px rgba(27,58,87,0.10) !important;
}
.dma-landing .mo_filters .input-group .btn-number {
    border: 0 !important;
    background: transparent !important;
    color: var(--xp-ink) !important;
    font-family: var(--sans) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    height: 100% !important;
    transition: background 150ms var(--xp-easing), color 150ms var(--xp-easing) !important;
}
.dma-landing .mo_filters .input-group .btn-number:hover {
    background: rgba(14,27,42,0.04) !important;
    color: var(--xp-accent) !important;
}
.dma-landing .mo_filters .input-group .input-number,
.dma-landing .mo_filters .input-group .plusminus {
    border: 0 !important;
    text-align: center !important;
    font-family: var(--mono) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--xp-ink) !important;
    background: transparent !important;
    padding: 0 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.dma-landing .mo_filters .input-group .input-number::-webkit-outer-spin-button,
.dma-landing .mo_filters .input-group .input-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dma-landing .mo_filters .input-group .input-number { -moz-appearance: textfield; }

/* Date / name text inputs — taller, cleaner */
.dma-landing .mo_filters input.mo_daterange,
.dma-landing .mo_filters input[name="datefilter"],
.dma-landing .mo_filters input#byname,
.dma-landing .mo_filters input[name="byname"] {
    width: 100% !important;
    height: 44px !important;
    border: 1px solid var(--xp-rule) !important;
    background: var(--xp-card) !important;
    border-radius: 3px !important;
    padding: 0 14px !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    color: var(--xp-ink) !important;
    transition: border-color 200ms var(--xp-easing), box-shadow 200ms var(--xp-easing) !important;
    box-shadow: none !important;
}
.dma-landing .mo_filters input.mo_daterange::placeholder,
.dma-landing .mo_filters input#byname::placeholder { color: var(--xp-faint); }
.dma-landing .mo_filters input.mo_daterange:focus,
.dma-landing .mo_filters input#byname:focus {
    border-color: var(--xp-accent) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(27,58,87,0.10) !important;
}

/* Dropdown trigger — same height as inputs for rhythm */
.dma-landing .mo_filters .dropdown > .btn,
.dma-landing .mo_filters .dropdown-toggle {
    height: 44px !important;
    padding: 0 14px !important;
}

/* Sail/Power/Catamaran/Monohull toggles — match input height */
.dma-landing .mo_filters .btn-group.flat label.btn { height: 44px !important; padding: 0 12px !important; }

/* CHECKBOXES — clean alignment, sans label */
.dma-landing .mo_filters .checkbox.devmodex,
.dma-landing .mo_filters .checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
}
.dma-landing .mo_filters .checkbox label,
.dma-landing .mo_filters .checkbox.devmodex label,
.dma-landing .mo_filters .checkbox span,
.dma-landing .mo_filters .checkbox.devmodex span {
    font-family: var(--sans) !important;
    font-size: 13px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--xp-ink-2) !important;
    cursor: pointer !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
.dma-landing .mo_filters .checkbox input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
    accent-color: var(--xp-accent) !important;
    flex: 0 0 16px !important;
}

/* Field group spacing — give each filter section breathing room */
.dma-landing .mo_filters .filterCheckboxes,
.dma-landing .mo_filters .filterSlider {
    margin-bottom: 22px !important;
}

/* MAX PRICE / GUESTS MINIMUM labels — small, cleaner above the input */
.dma-landing .mo_filters #filtersContainer label[for],
.dma-landing .mo_filters .filterSlider > label {
    display: block !important;
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    color: var(--xp-mute) !important;
    font-weight: 500 !important;
    margin: 0 0 8px !important;
}


/* =============================================================================
   FILTER RAIL — "NAVIGATION CONSOLE" REDESIGN
   Deep navy panel, ivory text, gold section labels, cobalt + gold accents.
   Pure CSS over plugin-emitted markup. Defensive !important throughout.
   ============================================================================= */

.dma-landing .mo_filters {
    --rail-bg-1:     #0E1B2A;
    --rail-bg-2:     #142333;
    --rail-bg-3:     #1A2A3D;
    --rail-ivory:    #EFE7D6;
    --rail-ivory-2:  rgba(239,231,214,0.78);
    --rail-mute:     rgba(239,231,214,0.55);
    --rail-faint:    rgba(239,231,214,0.32);
    --rail-rule:     rgba(239,231,214,0.10);
    --rail-rule-2:   rgba(239,231,214,0.18);
    --rail-gold:     #B89766;
    --rail-gold-2:   #C9A878;
    --rail-cobalt:   #4A7BAF;

    background: linear-gradient(180deg, var(--rail-bg-1) 0%, var(--rail-bg-2) 100%) !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: clamp(320px, 21vw, 400px) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 24px 60px rgba(14,27,42,0.18),
        0 4px 12px rgba(14,27,42,0.10) !important;
    overflow: hidden !important;
    position: relative !important;
    color: var(--rail-ivory) !important;
}
/* Faint gold hairline at the very top — like a console power-rail */
.dma-landing .mo_filters::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 24px; right: 24px;
    height: 1px !important;
    background: linear-gradient(to right, transparent 0%, var(--rail-gold) 30%, var(--rail-gold) 70%, transparent 100%) !important;
    opacity: 0.6 !important;
    z-index: 2 !important;
}

/* Inner container */
.dma-landing .mo_filters #filtersContainer {
    padding: 28px 24px 28px !important;
    background: transparent !important;
    position: relative !important;
}
.dma-landing .mo_filters #filtersContainer::before {
    content: "Refine search" !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.34em !important;
    text-transform: uppercase !important;
    color: var(--rail-gold) !important;
    margin: 0 0 24px !important;
    padding: 0 0 16px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rail-rule) !important;
    width: auto !important;
    background: transparent !important;
}
.dma-landing .mo_filters #filtersContainer::after { display: none !important; }
.dma-landing .mo_filters .filtersInnerContainer { display: block !important; background: transparent !important; }

/* Section eyebrows */
.dma-landing .mo_filters .panel-heading,
.dma-landing .mo_filters .tightHeadings,
.dma-landing .mo_filters #filtersContainer label[for],
.dma-landing .mo_filters .filterSlider > label {
    display: block !important;
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.34em !important;
    text-transform: uppercase !important;
    color: var(--rail-gold) !important;
    padding: 0 !important;
    margin: 24px 0 12px !important;
    border: 0 !important;
    background: transparent !important;
}
.dma-landing .mo_filters .panel-heading:first-of-type,
.dma-landing .mo_filters .tightHeadings:first-of-type { margin-top: 0 !important; }
.dma-landing .mo_filters .panel-body { padding: 0 !important; background: transparent !important; }
.dma-landing .mo_filters .filterCheckboxes,
.dma-landing .mo_filters .filterSlider { margin-bottom: 22px !important; background: transparent !important; }

/* Sans by default; mono only for numerals/labels/eyebrows */
.dma-landing .mo_filters,
.dma-landing .mo_filters * { font-family: var(--sans) !important; }
.dma-landing .mo_filters .panel-heading,
.dma-landing .mo_filters .tightHeadings,
.dma-landing .mo_filters #filtersContainer::before,
.dma-landing .mo_filters #filtersContainer label[for],
.dma-landing .mo_filters .input-group .input-number,
.dma-landing .mo_filters .input-group .plusminus,
.dma-landing .mo_filters .go_button { font-family: var(--mono) !important; }

/* ---------- DROPDOWNS ------------------------------------------------- */
.dma-landing .mo_filters .dropdown {
    width: 100% !important;
    margin-bottom: 14px !important;
    background: transparent !important;
}
.dma-landing .mo_filters .dropdown > .btn,
.dma-landing .mo_filters .dropdown-toggle {
    width: 100% !important;
    height: 46px !important;
    text-align: left !important;
    border: 1px solid var(--rail-rule-2) !important;
    background: rgba(239,231,214,0.04) !important;
    color: var(--rail-ivory) !important;
    padding: 0 16px 0 14px !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    border-radius: 4px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: border-color 220ms var(--xp-easing), background 220ms var(--xp-easing) !important;
    box-shadow: none !important;
    background-image: none !important;
    cursor: pointer !important;
    position: relative !important;
}
.dma-landing .mo_filters .dropdown-toggle::after {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border: 0 !important;
    border-right: 1.5px solid var(--rail-gold) !important;
    border-bottom: 1.5px solid var(--rail-gold) !important;
    transform: rotate(45deg) translateY(-2px) !important;
    transition: transform 280ms var(--xp-easing), border-color 220ms var(--xp-easing) !important;
    margin: 0 0 0 8px !important;
}
.dma-landing .mo_filters .dropdown.show .dropdown-toggle::after,
.dma-landing .mo_filters .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg) translateY(2px) !important;
}
.dma-landing .mo_filters .dropdown-toggle:hover {
    border-color: var(--rail-rule-2) !important;
    background: rgba(239,231,214,0.07) !important;
}
.dma-landing .mo_filters .dropdown-toggle:focus,
.dma-landing .mo_filters .dropdown-toggle:focus-visible {
    border-color: var(--rail-rule-2) !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.dma-landing .mo_filters .dropdown-menu.mo {
    width: 100% !important;
    border: 1px solid var(--rail-rule-2) !important;
    background: var(--rail-bg-3) !important;
    border-radius: 4px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4) !important;
    padding: 6px 0 !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    margin-top: 4px !important;
}
.dma-landing .mo_filters .dropdown-menu.mo a,
.dma-landing .mo_filters .dropdown-menu.mo li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 14px !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    color: var(--rail-ivory-2) !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 0 !important;
    transition: background 160ms var(--xp-easing), color 160ms var(--xp-easing) !important;
}
.dma-landing .mo_filters .dropdown-menu.mo a:hover {
    background: rgba(184,151,102,0.10) !important;
    color: var(--rail-ivory) !important;
}
.dma-landing .mo_filters .dropdown-menu.mo .checked,
.dma-landing .mo_filters .dropdown-menu.mo .selected,
.dma-landing .mo_filters .dropdown-menu.mo a.active {
    color: var(--rail-gold) !important;
    background: rgba(184,151,102,0.12) !important;
    font-weight: 600 !important;
}
.dma-landing .mo_filters .dropdown-menu.mo::-webkit-scrollbar { width: 6px; }
.dma-landing .mo_filters .dropdown-menu.mo::-webkit-scrollbar-thumb { background: var(--rail-rule-2); border-radius: 3px; }

/* ---------- DATE RANGE — calendar icon embedded ----------------------- */
.dma-landing .mo_filters input.mo_daterange,
.dma-landing .mo_filters input[name="datefilter"] {
    width: 100% !important;
    height: 46px !important;
    border: 1px solid var(--rail-rule-2) !important;
    background-color: rgba(239,231,214,0.04) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B89766' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M16 3v4M8 3v4M3 10h18'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 16px 16px !important;
    border-radius: 4px !important;
    padding: 0 14px 0 40px !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    color: var(--rail-ivory) !important;
    transition: border-color 220ms var(--xp-easing), background-color 220ms var(--xp-easing), box-shadow 220ms var(--xp-easing) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.dma-landing .mo_filters input.mo_daterange::placeholder,
.dma-landing .mo_filters input[name="datefilter"]::placeholder { color: var(--rail-mute); }
.dma-landing .mo_filters input.mo_daterange:hover { border-color: var(--rail-rule-2) !important; }
.dma-landing .mo_filters input.mo_daterange:focus,
.dma-landing .mo_filters input[name="datefilter"]:focus {
    border-color: var(--rail-rule-2) !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-color: rgba(239,231,214,0.07) !important;
}

/* ---------- SEGMENTED TOGGLES (Sail/Power, Catamaran/Monohull) ------- */
.dma-landing .mo_filters .btn-group.flat {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    background: rgba(239,231,214,0.04) !important;
    border: 1px solid var(--rail-rule-2) !important;
    border-radius: 4px !important;
    padding: 4px !important;
    position: relative !important;
}
.dma-landing .mo_filters .btn-group.flat label.btn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 12px !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--rail-ivory-2) !important;
    font-family: var(--sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    cursor: pointer !important;
    border-radius: 3px !important;
    margin: 0 !important;
    transition: color 240ms var(--xp-easing), background 360ms var(--xp-easing) !important;
    box-shadow: none !important;
    z-index: 1 !important;
}
.dma-landing .mo_filters .btn-group.flat label.btn:hover {
    color: var(--rail-ivory) !important;
}
.dma-landing .mo_filters .btn-group.flat label.btn.active,
.dma-landing .mo_filters .btn-group.flat label.btn.btn-primary {
    background: var(--rail-gold) !important;
    color: var(--rail-bg-1) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.05) inset !important;
}
.dma-landing .mo_filters .btn-group.flat label.btn img,
.dma-landing .mo_filters .filtersContainer label img,
.dma-landing .mo_filters .filtersContainer .checkbox img { display: none !important; }
.dma-landing .mo_filters .btn-group.flat input[type="radio"],
.dma-landing .mo_filters .btn-group.flat input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- NUMBER INPUTS — large mono numerals + framed +/- --------- */
.dma-landing .mo_filters .input-group {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    border: 1px solid var(--rail-rule-2) !important;
    overflow: hidden !important;
    background: rgba(239,231,214,0.04) !important;
    border-radius: 4px !important;
    transition: border-color 220ms var(--xp-easing), background 220ms var(--xp-easing), box-shadow 220ms var(--xp-easing) !important;
    height: 52px !important;
    margin-bottom: 14px !important;
}
.dma-landing .mo_filters .input-group:hover { border-color: var(--rail-rule-2) !important; }
.dma-landing .mo_filters .input-group:focus-within {
    border-color: var(--rail-rule-2) !important;
    background: rgba(239,231,214,0.07) !important;
    box-shadow: none !important;
}
.dma-landing .mo_filters .input-group .btn-number {
    border: 0 !important;
    background: transparent !important;
    color: var(--rail-ivory-2) !important;
    font-family: var(--sans) !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    height: 100% !important;
    transition: background 180ms var(--xp-easing), color 180ms var(--xp-easing), transform 200ms var(--xp-easing) !important;
    user-select: none !important;
}
.dma-landing .mo_filters .input-group .btn-number:hover {
    background: var(--rail-gold) !important;
    color: var(--rail-bg-1) !important;
}
.dma-landing .mo_filters .input-group .btn-number:active {
    transform: scale(0.92) !important;
}
.dma-landing .mo_filters .input-group .input-number,
.dma-landing .mo_filters .input-group .plusminus {
    border: 0 !important;
    text-align: center !important;
    font-family: var(--mono) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--rail-ivory) !important;
    background: transparent !important;
    padding: 0 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: 0.02em !important;
}
.dma-landing .mo_filters .input-group .input-number:focus { outline: 0 !important; box-shadow: none !important; }
.dma-landing .mo_filters .input-group .input-number::-webkit-outer-spin-button,
.dma-landing .mo_filters .input-group .input-number::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.dma-landing .mo_filters .input-group .input-number { -moz-appearance: textfield !important; }

/* ---------- SEARCH BY NAME — magnifying-glass icon -------------------- */
.dma-landing .mo_filters input#byname,
.dma-landing .mo_filters input[name="byname"] {
    width: 100% !important;
    height: 46px !important;
    border: 1px solid var(--rail-rule-2) !important;
    background-color: rgba(239,231,214,0.04) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B89766' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 16px 16px !important;
    border-radius: 4px !important;
    padding: 0 14px 0 40px !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    color: var(--rail-ivory) !important;
    transition: border-color 220ms var(--xp-easing), background-color 220ms var(--xp-easing), box-shadow 220ms var(--xp-easing) !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.dma-landing .mo_filters input#byname::placeholder { color: var(--rail-mute); }
.dma-landing .mo_filters input#byname:hover { border-color: var(--rail-rule-2) !important; }
.dma-landing .mo_filters input#byname:focus {
    border-color: var(--rail-rule-2) !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-color: rgba(239,231,214,0.07) !important;
}

/* ---------- TAG-PILL CHECKBOXES (Jetski / Jacuzzi / Scuba) ---------- */
.dma-landing .mo_filters .checkbox.devmodex,
.dma-landing .mo_filters .checkbox {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 14px !important;
    margin: 0 6px 6px 0 !important;
    background: rgba(239,231,214,0.04) !important;
    border: 1px solid var(--rail-rule-2) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 220ms var(--xp-easing) !important;
    position: relative !important;
}
.dma-landing .mo_filters .checkbox:hover,
.dma-landing .mo_filters .checkbox.devmodex:hover {
    border-color: var(--rail-rule-2) !important;
    background: rgba(239,231,214,0.07) !important;
}
.dma-landing .mo_filters .checkbox label,
.dma-landing .mo_filters .checkbox.devmodex label,
.dma-landing .mo_filters .checkbox span,
.dma-landing .mo_filters .checkbox.devmodex span {
    font-family: var(--sans) !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--rail-ivory-2) !important;
    cursor: pointer !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.dma-landing .mo_filters .checkbox input[type="checkbox"],
.dma-landing .mo_filters .checkbox.devmodex input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}
.dma-landing .mo_filters .checkbox:has(input:checked),
.dma-landing .mo_filters .checkbox.devmodex:has(input:checked) {
    background: var(--rail-gold) !important;
    border-color: var(--rail-gold) !important;
}
.dma-landing .mo_filters .checkbox:has(input:checked) label,
.dma-landing .mo_filters .checkbox:has(input:checked) span,
.dma-landing .mo_filters .checkbox.devmodex:has(input:checked) label,
.dma-landing .mo_filters .checkbox.devmodex:has(input:checked) span {
    color: var(--rail-bg-1) !important;
    font-weight: 600 !important;
}
.dma-landing .mo_filters .filterCheckboxes:has(.checkbox),
.dma-landing .mo_filters .panel-body:has(> .checkbox) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}

/* ---------- APPLY / GO BUTTON ---------------------------------------- */
.dma-landing .mo_filters .go_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 18px !important;
    padding: 14px 18px !important;
    background: var(--rail-gold) !important;
    color: var(--rail-bg-1) !important;
    border: 0 !important;
    border-radius: 4px !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background 220ms var(--xp-easing), transform 200ms var(--xp-easing) !important;
    background-image: none !important;
    box-shadow: 0 4px 12px rgba(184,151,102,0.28) !important;
}
.dma-landing .mo_filters .go_button:hover {
    background: var(--rail-gold-2) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px rgba(184,151,102,0.36) !important;
}
.dma-landing .mo_filters .go_button:active { transform: translateY(0) !important; }

/* ---------- DEFEND TEXT COLORS --------------------------------------- */
.dma-landing .mo_filters,
.dma-landing .mo_filters p,
.dma-landing .mo_filters span,
.dma-landing .mo_filters label,
.dma-landing .mo_filters div,
.dma-landing .mo_filters a {
    color: inherit !important;
}
.dma-landing .mo_filters input,
.dma-landing .mo_filters select {
    color: var(--rail-ivory) !important;
    -webkit-text-fill-color: var(--rail-ivory) !important;
}

/* Outer grid widened a bit for the new rail */
.dma-landing .mt-3 { grid-template-columns: 290px 1fr !important; gap: 40px !important; }
@media (max-width: 1199px) {
    .dma-landing .mt-3 { grid-template-columns: 240px 1fr !important; gap: 28px !important; }
    .dma-landing .mo_filters { max-width: 240px !important; }
    .dma-landing .mo_filters #filtersContainer { padding: 24px 18px !important; }
}
@media (max-width: 991px) {
    .dma-landing .mo_filters { max-width: 100% !important; }
    .dma-landing .mt-3 { grid-template-columns: 1fr !important; }
}

/* =============================================================================
   FILTER RAIL — REVERT TO LIGHT CARD, KEEP MODERN INPUT DESIGNS
   This block wins over the "Navigation Console" navy treatment above. We keep
   all the input modernizations (icons, segmented control, pill checkboxes,
   big mono numerals, focus glows) but recolor everything back to the light
   palette and fix the disjointed +/- input.
   ============================================================================= */

/* ---------- LIGHT CARD SHELL ---------------------------------------- */
.dma-landing .mo_filters {
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid rgba(14,27,42,0.08) !important;
    border-radius: 6px !important;
    color: #0E1B2A !important;
    box-shadow: 0 1px 2px rgba(14,27,42,0.04), 0 8px 24px rgba(14,27,42,0.05) !important;
}
.dma-landing .mo_filters::before { display: none !important; }

.dma-landing .mo_filters #filtersContainer {
    background: transparent !important;
    color: #0E1B2A !important;
}
.dma-landing .mo_filters #filtersContainer::before {
    color: #0E1B2A !important;
    border-bottom-color: rgba(14,27,42,0.10) !important;
}

/* ---------- TEXT / SECTION LABELS (light) -------------------------- */
.dma-landing .mo_filters,
.dma-landing .mo_filters p,
.dma-landing .mo_filters span,
.dma-landing .mo_filters label,
.dma-landing .mo_filters div {
    color: #0E1B2A !important;
}
.dma-landing .mo_filters .panel-heading,
.dma-landing .mo_filters .tightHeadings,
.dma-landing .mo_filters #filtersContainer label[for],
.dma-landing .mo_filters .filterSlider > label {
    color: #6F7A89 !important;
}

/* ---------- DROPDOWNS — light surface, ink text -------------------- */
.dma-landing .mo_filters .dropdown > .btn,
.dma-landing .mo_filters .dropdown-toggle {
    background: #FFFFFF !important;
    border-color: rgba(14,27,42,0.10) !important;
    color: #0E1B2A !important;
}
.dma-landing .mo_filters .dropdown-toggle::after {
    border-right-color: #0E1B2A !important;
    border-bottom-color: #0E1B2A !important;
}
.dma-landing .mo_filters .dropdown-toggle:hover {
    border-color: #0E1B2A !important;
    background: #FAFAF8 !important;
}
.dma-landing .mo_filters .dropdown-toggle:focus,
.dma-landing .mo_filters .dropdown-toggle:focus-visible {
    border-color: #1B3A57 !important;
    box-shadow: 0 0 0 3px rgba(27,58,87,0.10) !important;
}
.dma-landing .mo_filters .dropdown-menu.mo {
    background: #FFFFFF !important;
    border-color: rgba(14,27,42,0.10) !important;
    box-shadow: 0 12px 40px rgba(14,27,42,0.12) !important;
}
.dma-landing .mo_filters .dropdown-menu.mo a,
.dma-landing .mo_filters .dropdown-menu.mo li > a {
    color: #3F4D5E !important;
}
.dma-landing .mo_filters .dropdown-menu.mo a:hover {
    background: rgba(27,58,87,0.06) !important;
    color: #0E1B2A !important;
}
.dma-landing .mo_filters .dropdown-menu.mo .checked,
.dma-landing .mo_filters .dropdown-menu.mo .selected,
.dma-landing .mo_filters .dropdown-menu.mo a.active {
    color: #1B3A57 !important;
    background: rgba(27,58,87,0.08) !important;
}

/* ---------- DATE INPUT — light surface, dark icon ------------------- */
.dma-landing .mo_filters input.mo_daterange,
.dma-landing .mo_filters input[name="datefilter"] {
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E1B2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M16 3v4M8 3v4M3 10h18'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 16px 16px !important;
    border-color: rgba(14,27,42,0.10) !important;
    color: #0E1B2A !important;
}
.dma-landing .mo_filters input.mo_daterange::placeholder { color: #9AA2AE !important; }
.dma-landing .mo_filters input.mo_daterange:hover { border-color: #0E1B2A !important; }
.dma-landing .mo_filters input.mo_daterange:focus,
.dma-landing .mo_filters input[name="datefilter"]:focus {
    border-color: #1B3A57 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(27,58,87,0.10) !important;
}

/* ---------- SEARCH INPUT — light surface, dark icon ----------------- */
.dma-landing .mo_filters input#byname,
.dma-landing .mo_filters input[name="byname"] {
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E1B2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 16px 16px !important;
    border-color: rgba(14,27,42,0.10) !important;
    color: #0E1B2A !important;
}
.dma-landing .mo_filters input#byname::placeholder { color: #9AA2AE !important; }
.dma-landing .mo_filters input#byname:hover { border-color: #0E1B2A !important; }
.dma-landing .mo_filters input#byname:focus {
    border-color: #1B3A57 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(27,58,87,0.10) !important;
}

/* ---------- SEGMENTED TOGGLES — light frame, ink fill on active ----- */
.dma-landing .mo_filters .btn-group.flat {
    background: #F4F4F1 !important;
    border-color: rgba(14,27,42,0.08) !important;
}
.dma-landing .mo_filters .btn-group.flat label.btn {
    color: #6F7A89 !important;
    background: transparent !important;
}
.dma-landing .mo_filters .btn-group.flat label.btn:hover { color: #0E1B2A !important; }
.dma-landing .mo_filters .btn-group.flat label.btn.active,
.dma-landing .mo_filters .btn-group.flat label.btn.btn-primary {
    background: #0E1B2A !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(14,27,42,0.20) !important;
}

/* ---------- NUMBER INPUTS — UNIFIED PILL, +/- merged inside --------- */
.dma-landing .mo_filters .input-group {
    display: grid !important;
    grid-template-columns: 44px 1fr 44px !important;
    border: 1px solid rgba(14,27,42,0.10) !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
    border-radius: 4px !important;
    height: 48px !important;
    margin-bottom: 14px !important;
    transition: border-color 220ms cubic-bezier(.16,.84,.32,1), box-shadow 220ms cubic-bezier(.16,.84,.32,1) !important;
}
.dma-landing .mo_filters .input-group:hover { border-color: #0E1B2A !important; }
.dma-landing .mo_filters .input-group:focus-within {
    border-color: #1B3A57 !important;
    box-shadow: 0 0 0 3px rgba(27,58,87,0.10) !important;
    background: #FFFFFF !important;
}
.dma-landing .mo_filters .input-group .btn-number {
    border: 0 !important;
    background: #F4F4F1 !important;
    color: #0E1B2A !important;
    font-family: var(--sans) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    height: 100% !important;
    box-shadow: none !important;
    transition: background 180ms cubic-bezier(.16,.84,.32,1), color 180ms cubic-bezier(.16,.84,.32,1) !important;
}
.dma-landing .mo_filters .input-group .btn-number:hover {
    background: #0E1B2A !important;
    color: #FFFFFF !important;
}
.dma-landing .mo_filters .input-group .btn-number:active {
    transform: scale(0.94) !important;
}
/* CRITICAL FIX: kill any inner border on the input that would visually split
   the pill into 3 disconnected segments. */
.dma-landing .mo_filters .input-group .input-number,
.dma-landing .mo_filters .input-group .plusminus {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    text-align: center !important;
    font-family: var(--mono) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #0E1B2A !important;
    background: #FFFFFF !important;
    padding: 0 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.dma-landing .mo_filters .input-group .input-number:focus { outline: 0 !important; box-shadow: none !important; }

/* ---------- TAG-PILL CHECKBOXES — light, ink fill on active --------- */
.dma-landing .mo_filters .checkbox.devmodex,
.dma-landing .mo_filters .checkbox {
    background: #FFFFFF !important;
    border-color: rgba(14,27,42,0.10) !important;
}
.dma-landing .mo_filters .checkbox label,
.dma-landing .mo_filters .checkbox.devmodex label,
.dma-landing .mo_filters .checkbox span,
.dma-landing .mo_filters .checkbox.devmodex span {
    color: #3F4D5E !important;
}
.dma-landing .mo_filters .checkbox:hover,
.dma-landing .mo_filters .checkbox.devmodex:hover {
    border-color: #0E1B2A !important;
    background: #FAFAF8 !important;
}
.dma-landing .mo_filters .checkbox:has(input:checked),
.dma-landing .mo_filters .checkbox.devmodex:has(input:checked) {
    background: #0E1B2A !important;
    border-color: #0E1B2A !important;
}
.dma-landing .mo_filters .checkbox:has(input:checked) label,
.dma-landing .mo_filters .checkbox:has(input:checked) span,
.dma-landing .mo_filters .checkbox.devmodex:has(input:checked) label,
.dma-landing .mo_filters .checkbox.devmodex:has(input:checked) span {
    color: #FFFFFF !important;
}

/* ---------- APPLY / GO BUTTON — ink filled, no gold ---------------- */
.dma-landing .mo_filters .go_button {
    background: #0E1B2A !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(14,27,42,0.16) !important;
}
.dma-landing .mo_filters .go_button:hover {
    background: #1B3A57 !important;
    box-shadow: 0 8px 18px rgba(14,27,42,0.20) !important;
}

/* Force input text color to dark on light bg (override any leftover ivory) */
.dma-landing .mo_filters input,
.dma-landing .mo_filters select {
    color: #0E1B2A !important;
    -webkit-text-fill-color: #0E1B2A !important;
}

/* Card grid: bigger spacing between yachts on the same row AND between rows */
.dma-landing .listitempage {
    gap: 40px 36px !important;   /* row-gap | column-gap */
}
.dma-landing .listing_wrapper {
    flex: 1 1 calc(33.333% - 24px) !important;
    max-width: calc(33.333% - 24px) !important;
}
@media (max-width: 1199px) {
    .dma-landing .listitempage { gap: 32px 28px !important; }
    .dma-landing .listing_wrapper {
        flex: 1 1 calc(50% - 14px) !important;
        max-width: calc(50% - 14px) !important;
    }
}
@media (max-width: 600px) {
    .dma-landing .listitempage { gap: 24px !important; }
    .dma-landing .listing_wrapper {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* =============================================================================
   FINAL OVERRIDES — +/- button hover fill + card grid spacing (last word)
   ============================================================================= */

/* Force +/- buttons to fully fill their grid cell so the hover bg paints correctly */
.dma-landing .mo_filters .input-group {
    display: grid !important;
    grid-template-columns: 48px 1fr 48px !important;
    align-items: stretch !important;
    height: 48px !important;
    overflow: hidden !important;
    border: 1px solid rgba(14,27,42,0.10) !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
}
.dma-landing .mo_filters .input-group .btn,
.dma-landing .mo_filters .input-group .btn-number,
.dma-landing .mo_filters .input-group button {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #F4F4F1 !important;
    background-image: none !important;
    color: #0E1B2A !important;
    font-family: var(--sans) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: 0 !important;
    transition: background 180ms cubic-bezier(.16,.84,.32,1), color 180ms cubic-bezier(.16,.84,.32,1) !important;
}
.dma-landing .mo_filters .input-group .btn-number:hover,
.dma-landing .mo_filters .input-group button:hover {
    background: #0E1B2A !important;
    color: #FFFFFF !important;
}
.dma-landing .mo_filters .input-group .btn-number:active {
    background: #1B3A57 !important;
    color: #FFFFFF !important;
}
.dma-landing .mo_filters .input-group .input-number,
.dma-landing .mo_filters .input-group .plusminus,
.dma-landing .mo_filters .input-group input[type="text"],
.dma-landing .mo_filters .input-group input[type="number"] {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: #FFFFFF !important;
    background-image: none !important;
    color: #0E1B2A !important;
    -webkit-text-fill-color: #0E1B2A !important;
    text-align: center !important;
    font-family: var(--mono) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.dma-landing .mo_filters .input-group:hover { border-color: #0E1B2A !important; }
.dma-landing .mo_filters .input-group:focus-within {
    border-color: #1B3A57 !important;
    box-shadow: 0 0 0 3px rgba(27,58,87,0.10) !important;
}

/* ---------- CARD GRID SPACING — last-word version ------------------- */
.dma-landing #mo_ajax_container > .firstx,
.dma-landing #mo_ajax_container > .morex,
.dma-landing .listitempage,
.dma-landing .firstx.listitempage,
.dma-landing .morex.listitempage {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 48px !important;
    column-gap: 36px !important;
    margin: 0 !important;
    width: 100% !important;
}
.dma-landing .listing_wrapper {
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 1 calc((100% - 72px) / 3) !important;
    max-width: calc((100% - 72px) / 3) !important;
    width: calc((100% - 72px) / 3) !important;
}
@media (max-width: 1199px) {
    .dma-landing #mo_ajax_container > .firstx,
    .dma-landing .listitempage { row-gap: 36px !important; column-gap: 28px !important; }
    .dma-landing .listing_wrapper {
        flex: 0 1 calc((100% - 28px) / 2) !important;
        max-width: calc((100% - 28px) / 2) !important;
        width: calc((100% - 28px) / 2) !important;
    }
}
@media (max-width: 600px) {
    .dma-landing .listitempage { row-gap: 28px !important; column-gap: 0 !important; }
    .dma-landing .listing_wrapper {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =============================================================================
   FILTER FINAL: navy borders only (no gold), keep +/- glyphs visible on hover
   ============================================================================= */

/* Force ALL borders inside the rail to navy/ink — kill any leftover gold tints */
.dma-landing .mo_filters .dropdown > .btn,
.dma-landing .mo_filters .dropdown-toggle,
.dma-landing .mo_filters input.mo_daterange,
.dma-landing .mo_filters input[name="datefilter"],
.dma-landing .mo_filters input#byname,
.dma-landing .mo_filters input[name="byname"],
.dma-landing .mo_filters .input-group,
.dma-landing .mo_filters .checkbox,
.dma-landing .mo_filters .checkbox.devmodex,
.dma-landing .mo_filters .btn-group.flat {
    border-color: rgba(14,27,42,0.10) !important;
}
.dma-landing .mo_filters .dropdown-toggle:hover,
.dma-landing .mo_filters input.mo_daterange:hover,
.dma-landing .mo_filters input#byname:hover,
.dma-landing .mo_filters .input-group:hover,
.dma-landing .mo_filters .checkbox:hover,
.dma-landing .mo_filters .checkbox.devmodex:hover {
    border-color: #0E1B2A !important;
}
.dma-landing .mo_filters .dropdown-toggle:focus,
.dma-landing .mo_filters .dropdown-toggle:focus-visible,
.dma-landing .mo_filters input.mo_daterange:focus,
.dma-landing .mo_filters input[name="datefilter"]:focus,
.dma-landing .mo_filters input#byname:focus,
.dma-landing .mo_filters input[name="byname"]:focus,
.dma-landing .mo_filters .input-group:focus-within {
    border-color: #1B3A57 !important;
    box-shadow: 0 0 0 3px rgba(27,58,87,0.10) !important;
}
/* Custom dropdown chevron — navy, not gold */
.dma-landing .mo_filters .dropdown-toggle::after {
    border-right-color: #0E1B2A !important;
    border-bottom-color: #0E1B2A !important;
}
/* Date / search SVG icons — navy stroke (re-emit the SVGs in ink) */
.dma-landing .mo_filters input.mo_daterange,
.dma-landing .mo_filters input[name="datefilter"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E1B2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M16 3v4M8 3v4M3 10h18'/></svg>") !important;
}
.dma-landing .mo_filters input#byname,
.dma-landing .mo_filters input[name="byname"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E1B2A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") !important;
}
/* Active checkbox: navy fill (no gold) */
.dma-landing .mo_filters .checkbox:has(input:checked),
.dma-landing .mo_filters .checkbox.devmodex:has(input:checked) {
    background: #0E1B2A !important;
    border-color: #0E1B2A !important;
}
/* Active segmented toggle: navy fill */
.dma-landing .mo_filters .btn-group.flat label.btn.active,
.dma-landing .mo_filters .btn-group.flat label.btn.btn-primary {
    background: #0E1B2A !important;
    color: #FFFFFF !important;
    border-color: #0E1B2A !important;
}

/* ---------- KEEP +/- GLYPHS VISIBLE ON HOVER ------------------------- */
/* The plugin sometimes wraps the symbol in a span/i; cascade color to all
   descendants and kill text-shadow/filter that may hide the glyph. */
.dma-landing .mo_filters .input-group .btn-number,
.dma-landing .mo_filters .input-group .btn-number *,
.dma-landing .mo_filters .input-group button,
.dma-landing .mo_filters .input-group button * {
    color: #0E1B2A !important;
    -webkit-text-fill-color: #0E1B2A !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.dma-landing .mo_filters .input-group .btn-number:hover,
.dma-landing .mo_filters .input-group .btn-number:hover *,
.dma-landing .mo_filters .input-group button:hover,
.dma-landing .mo_filters .input-group button:hover * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
.dma-landing .mo_filters .input-group .btn-number:active,
.dma-landing .mo_filters .input-group .btn-number:active * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* =============================================================================
   MOBILE + DRAWER LAYER
   - Bootstrap 5 offcanvas drawers for filter (left) and nav (right)
   - Card spacing definitive fix using simpler flex math
   - Mobile breakpoints raised so phones+small tablets get 1 col
   - Hides desktop filter rail at <992px (delegating to drawer)
   ============================================================================= */

/* ---------- DESKTOP CARD SPACING — DEFINITIVE FIX ----------------------- */
/* Switch from calc-based widths to simpler flex-basis with gap doing the
   spacing math. flex: 0 0 cap so cards don't grow to fill row when fewer than 3. */
.dma-landing #mo_ajax_container > .firstx,
.dma-landing #mo_ajax_container > .morex,
.dma-landing .listitempage,
.dma-landing .firstx.listitempage,
.dma-landing .morex.listitempage {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 48px !important;
    column-gap: 36px !important;
    margin: 0 !important;
    width: 100% !important;
    --bs-gutter-x: 0 !important;
    background: transparent !important;
}
/* Add a gap above any AJAX-loaded grid that follows another grid */
.dma-landing #mo_ajax_container > .listitempage + .listitempage,
.dma-landing #mo_ajax_container > .firstx + .morex,
.dma-landing #mo_ajax_container > .morex + .morex,
.dma-landing #mo_ajax_container > .morex {
    margin-top: 48px !important;
}
.dma-landing #mo_ajax_container > .firstx {
    margin-top: 0 !important;
}
.dma-landing .listing_wrapper {
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 calc(33.3333% - 24px) !important;   /* 24px = 2 gaps × 36px / 3 cards */
    max-width: calc(33.3333% - 24px) !important;
    width: calc(33.3333% - 24px) !important;
    --bs-gutter-x: 0 !important;
    background: transparent !important;
}

/* ---------- Island/area single: "Yachts available in <area>" section ----- *
 * single-island.php reuses the .dma-landing card grid (so cards look identical
 * to /explore/), but it's a content section, not the full landing page — trim
 * the landing base (no 60vh min-height) and style the section heading. */
.dma-island-yachts.dma-landing {
    min-height: 0 !important;
    padding: 8px 0 96px !important;
    background: transparent !important;
}
.dma-island-yachts.dma-landing .dma-landing__inner {
    max-width: 1440px !important;
    padding: 0 56px !important;
}
@media (max-width: 991px) {
    .dma-island-yachts.dma-landing .dma-landing__inner { padding: 0 32px !important; }
}
@media (max-width: 768px) {
    .dma-island-yachts.dma-landing .dma-landing__inner { padding: 0 20px !important; }
}
.dma-island-yachts__title {
    font-family: var(--display, "Montserrat", Arial, sans-serif);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--navy, #0E1B2A);
    margin: 0 0 36px;
}

/* ===================================================================
   AREA-CPT HERO — integrates the featured image into the hero so we
   don't stack a tall navy band on top of a separate big image.
   One markup (.dma-area-hero__inner + .dma-area-hero__media); the
   variant class picks the layout (see dma_area_hero_html()).
   =================================================================== */
.dma-area-hero { position: relative; overflow: hidden; background: var(--navy, #0E1B2A); }
.dma-area-hero__inner {
    position: relative; z-index: 3; width: 100%;
    max-width: 1480px; margin: 0 auto;
    padding-left: clamp(20px, 5vw, 80px); padding-right: clamp(20px, 5vw, 80px);
}
.dma-area-hero__eyebrow {
    display: block; font-family: var(--mono, "JetBrains Mono", monospace);
    font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold-text); margin: 0 0 14px;
}
.dma-area-hero__eyebrow a { color: inherit; text-decoration: none; }
.dma-area-hero__eyebrow a:hover { text-decoration: underline; }
.dma-area-hero__title {
    font-family: var(--display, "Montserrat", Arial, sans-serif);
    font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; margin: 0; color: #fff;
    font-size: clamp(40px, 5.6vw, 86px);
}
.dma-area-hero__media { background: var(--hero-img) var(--hero-img-pos, center) / cover no-repeat; background-color: #0b1622; }

/* A) IMMERSIVE — full-bleed image, gradient wash, title sits at the bottom */
.dma-area-hero--immersive { display: flex; align-items: flex-end;
    min-height: clamp(440px, 62vh, 660px);
    padding: clamp(110px, 16vh, 180px) 0 clamp(44px, 6vh, 76px); }
.dma-area-hero--immersive .dma-area-hero__media { position: absolute; inset: 0; z-index: 1; }
.dma-area-hero--immersive::after { content: ""; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(11,22,34,.66) 0%, rgba(11,22,34,.10) 30%, rgba(11,22,34,.42) 68%, rgba(11,22,34,.90) 100%); }

/* B) SPLIT — title on the navy (left), image panel (right) */
.dma-area-hero--split { display: flex; align-items: center;
    min-height: clamp(340px, 42vh, 480px);
    padding: clamp(96px, 13vh, 140px) 0 clamp(44px, 6vh, 72px); }
.dma-area-hero--split .dma-area-hero__media {
    position: absolute; top: 0; right: 0; bottom: 0; left: 30%; z-index: 1; /* starts where the navy gradient clears; narrows the cover container so less zoom is needed */
    /* top scrim keeps the overlaid nav / INQUIRE button legible across the top */
    background-image: linear-gradient(180deg, rgba(11,22,34,.5) 0%, rgba(11,22,34,0) 22%), var(--hero-img);
    background-size: cover; background-position: var(--hero-img-pos, center); background-repeat: no-repeat;
    filter: saturate(.85); /* tone the photo down so it integrates with the navy section */
}
/* ONE long, smooth horizontal ramp: 100% navy on the left (the text panel), then
   gradually clearing all the way across so the photo slowly emerges from the navy —
   no hard panel edge, a continuous navy→image transfer. */
.dma-area-hero--split::after { content: ""; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(90deg,
        var(--navy, #0E1B2A) 0%,
        var(--navy, #0E1B2A) 30%,
        rgba(14,27,42,.82) 42%,
        rgba(14,27,42,.52) 56%,
        rgba(14,27,42,.28) 72%,
        rgba(14,27,42,.14) 88%,
        rgba(14,27,42,.08) 100%); }
.dma-area-hero--split .dma-area-hero__title { font-size: clamp(32px, 3.6vw, 58px); max-width: 44%; }
/* Blog post titles are long — keep them readable without blowing up */
body.single-post .dma-area-hero__title { font-size: clamp(22px, 2.4vw, 38px); }
@media (max-width: 820px) {
    .dma-area-hero--split .dma-area-hero__media { top: 0; right: 0; bottom: 0; left: 0; }
    .dma-area-hero--split::after { background: linear-gradient(180deg, var(--navy,#0E1B2A) 30%, rgba(14,27,42,.5) 100%); }
    .dma-area-hero--split .dma-area-hero__title { max-width: 100%; font-size: clamp(32px, 7vw, 48px); }
    body.single-post .dma-area-hero__title { font-size: clamp(20px, 5vw, 32px); }
}

/* C) BANNER — short navy title band, then a wide image banner directly below */
.dma-area-hero--banner { padding: clamp(90px, 13vh, 130px) 0 0; }
.dma-area-hero--banner .dma-area-hero__inner { padding-bottom: clamp(26px, 4vh, 40px); }
.dma-area-hero--banner .dma-area-hero__title { font-size: clamp(40px, 5.5vw, 84px); }
.dma-area-hero--banner .dma-area-hero__media { position: relative; z-index: 1; width: 100%; height: clamp(220px, 34vh, 360px); }

/* No featured image → plain compact navy band */
.dma-area-hero--noimg { display: flex; align-items: flex-end; min-height: 0;
    padding: clamp(96px, 14vh, 150px) 0 clamp(28px, 4vh, 44px); }

/* ---------- Yacht detail: tame the per-section "feature statements" ---------- *
 * The .h2 lead statements ("5 staterooms for 10 guests.", "From $X per week,
 * plus APA.", "Yachts in this league") were clamp(32px,3.15vw,90px) — far bigger
 * than the rest of the page. Scope them to the yacht templates only (so the home's
 * .h2 is untouched) and bring them to a refined section-lead scale. */
body.single-estate_property .h2,
body.single-yacht .h2,
body.single-estate_property .dma-section .h2,
body.single-yacht .dma-section .h2 {
    font-size: clamp(24px, 2.1vw, 40px) !important;
    line-height: 1.14;
}

/* ---------- TABLET (992 - 1199px) — 2 cards per row -------------------- */
@media (max-width: 1199px) {
    .dma-landing #mo_ajax_container > .firstx,
    .dma-landing #mo_ajax_container > .morex,
    .dma-landing .listitempage {
        row-gap: 36px !important;
        column-gap: 28px !important;
    }
    .dma-landing .listing_wrapper {
        flex: 0 0 calc(50% - 14px) !important;
        max-width: calc(50% - 14px) !important;
        width: calc(50% - 14px) !important;
    }
}

/* ---------- PHONE / SMALL TABLET (≤768px) — 1 card per row ------------ */
@media (max-width: 768px) {
    .dma-landing #mo_ajax_container > .firstx,
    .dma-landing #mo_ajax_container > .morex,
    .dma-landing .listitempage {
        row-gap: 32px !important;
        column-gap: 0 !important;
    }
    .dma-landing .listing_wrapper {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ---------- HIDE DESKTOP FILTER RAIL at <992px ------------------------- */
/* Plugin already does display:none on .mo_filters at ≤991px in
   mo_main-v8.css:1727-1730. Ensure our earlier theme rule that forced it
   visible doesn't override that, AND let the .mt-3 grid become single-column. */
@media (max-width: 991px) {
    .dma-landing .mt-3 {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .dma-landing .mo_filters,
    .dma-landing #filters.mo_filters {
        /* When the filter is in the drawer, this rule wins. When on desktop
           layout (and mq removed it from drawer), nothing applies because
           min-width: 992px on the desktop block. */
    }
    /* Make sure .mo_filters inside drawer is fully visible & full width */
    #dma-filter-target #filters.mo_filters,
    #dma-filter-target .mo_filters {
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-shadow: none !important;
        position: static !important;
    }
    #dma-filter-target #filtersContainer {
        padding: 0 !important;
        position: static !important;
    }
}

/* ---------- MOBILE TOOLBAR (visible only at <992px) ------------------- */
.dma-landing__mobile-toolbar { display: none; }
@media (max-width: 991px) {
    .dma-landing__mobile-toolbar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        margin: 0 0 20px;
        padding: 0;
    }
}
.dma-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--xp-card, #FFFFFF);
    border: 1px solid var(--xp-ink, #0E1B2A);
    color: var(--xp-ink, #0E1B2A);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 220ms cubic-bezier(.16,.84,.32,1), color 220ms cubic-bezier(.16,.84,.32,1);
    box-shadow: 0 1px 2px rgba(14,27,42,0.06);
}
.dma-filter-trigger:hover {
    background: var(--xp-ink, #0E1B2A);
    color: var(--xp-card, #FFFFFF);
}
.dma-filter-trigger svg { display: block; }
.dma-filter-trigger__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-left: 4px;
    background: var(--xp-gold, #B89766);
    color: var(--xp-ink, #0E1B2A);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
}

/* ---------- HAMBURGER BUTTON (nav) ------------------------------------ */
.dma-nav__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    margin-left: 16px;
}
.dma-nav__hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ivory);
    transition: background 220ms ease;
    margin: 0 auto;
}
.dma-nav--solid .dma-nav__hamburger span,
body:not(.has-hero) .dma-nav__hamburger span {
    background: var(--navy);
}
@media (max-width: 991px) {
    .dma-nav__hamburger { display: inline-flex; }
    .dma-nav__menu, .dma-nav__actions { display: none !important; }
}
@media (min-width: 992px) {
    .dma-nav__hamburger { display: none; }
}

/* ---------- DRAWER COMMON STYLES ------------------------------------- */
.dma-drawer { z-index: 1080 !important; }
.dma-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px !important;
    border-bottom: 1px solid rgba(14,27,42,0.10);
    background: transparent;
}
.dma-drawer__eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--txt-2);
}
.dma-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--txt);
    border-radius: 999px;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.16,.84,.32,1), color 200ms cubic-bezier(.16,.84,.32,1), border-color 200ms cubic-bezier(.16,.84,.32,1);
}
.dma-drawer__close:hover {
    background: var(--navy);
    color: var(--ivory);
    border-color: var(--navy);
}
.dma-drawer__close svg { display: block; }
.dma-drawer__body {
    padding: 24px !important;
    overflow-y: auto;
    flex: 1 1 auto;
}
.dma-drawer__footer {
    padding: 18px 24px;
    border-top: 1px solid rgba(14,27,42,0.10);
    background: #FFFFFF;
    flex-shrink: 0;
}
.dma-drawer__done {
    display: block;
    width: 100%;
    padding: 14px 18px;
    background: var(--navy);
    color: var(--ivory);
    border: 0;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 220ms cubic-bezier(.16,.84,.32,1);
}
.dma-drawer__done:hover { background: var(--gold-deep, #9A7B4D); color: #FFFFFF; }

/* ---------- FILTER DRAWER ------------------------------------------- */
.dma-drawer--filter {
    width: 340px !important;
    max-width: 92vw !important;
    background: var(--ivory-2) !important;
    color: var(--txt);
}
/* Mariner has its own eyebrow + title + close-equivalent already; drop the
   drawer header so the mobile drawer matches the desktop sidebar exactly.
   The X close button is re-projected as a floating control in the corner. */
.dma-drawer--filter .dma-drawer__header {
    padding: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;                /* must beat the body's scrolling content */
}
.dma-drawer--filter .dma-drawer__header .dma-drawer__eyebrow { display: none !important; }
/* Give the X its own opaque pill so scrolling content can't bleed through it and
   so it visually separates from the CLEAR (n) button next to it. */
.dma-drawer--filter .dma-drawer__close {
    width: 36px !important;
    height: 36px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(14, 27, 42, 0.10) !important;
    box-shadow: 0 2px 6px rgba(14, 27, 42, 0.08) !important;
    color: var(--navy, #0E1B2A) !important;
}
.dma-drawer--filter .dma-drawer__close:hover {
    background: var(--navy, #0E1B2A) !important;
    border-color: var(--navy, #0E1B2A) !important;
    color: var(--ivory, #F4EFE6) !important;
}
/* Push the first content row inside the drawer body down so it doesn't collide
   with the floating X. CLEAR(n) lives in that first row. */
.dma-drawer--filter .dma-drawer__body { padding: 0 !important; padding-top: 56px !important; }
.dma-drawer--filter .dma-drawer__filter-mount {
    /* The plugin's #filters element gets moved in here at <992px */
    width: 100%;
}
/* Inside the drawer, let Mariner fill the full width — desktop sticky/max-width
   doesn't apply here. */
#dma-filter-target .mariner-filter {
    max-width: 100% !important;
    position: static !important;
    top: auto !important;
}

/* When mounted in drawer, override any leftover desktop styles on #filters */
.dma-drawer--filter #filters,
.dma-drawer--filter #filtersContainer {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
}
.dma-drawer--filter #filtersContainer::before {
    /* The "Refine search" pseudo eyebrow already exists on the desktop filter
       — hide it inside the drawer because the drawer header already has its
       own "REFINE SEARCH" eyebrow. */
    display: none !important;
}

/* ---------- NAV DRAWER ---------------------------------------------- */
.dma-drawer--nav {
    width: 320px !important;
    max-width: 88vw !important;
    background: linear-gradient(180deg, #0E1B2A 0%, #142333 100%) !important;
    color: var(--ivory) !important;
}
.dma-drawer--nav .dma-drawer__header {
    border-bottom-color: rgba(244,239,230,0.12);
}
.dma-drawer--nav .dma-drawer__eyebrow {
    color: rgba(244,239,230,0.6);
}
.dma-drawer--nav .dma-drawer__close {
    color: var(--ivory);
}
.dma-drawer--nav .dma-drawer__close:hover {
    background: var(--ivory);
    color: var(--navy);
    border-color: var(--ivory);
}
.dma-drawer__menu {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dma-drawer__menu li { margin: 0; padding: 0; }
.dma-drawer__menu a {
    display: block;
    padding: 14px 0;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--ivory);
    text-decoration: none;
    border-bottom: 1px solid rgba(244,239,230,0.08);
    transition: color 220ms cubic-bezier(.16,.84,.32,1), padding-left 280ms cubic-bezier(.16,.84,.32,1);
}
.dma-drawer__menu a:hover {
    color: var(--gold-text);
    padding-left: 8px;
}
.dma-drawer__menu .sub-menu {
    list-style: none;
    margin: 8px 0 12px 0;
    padding: 0 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid rgba(244,239,230,0.10);
}
.dma-drawer__menu .sub-menu a {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(244,239,230,0.7);
    padding: 8px 12px;
    border-bottom: 0;
}
.dma-drawer__menu .sub-menu a:hover {
    color: var(--gold-text);
    padding-left: 16px;
}
/* Drawer accordion — active only when dma-nav.js adds .js-nav, so submenus
   stay visible if JS is unavailable (graceful degradation). */
.dma-drawer__menu.js-nav .sub-menu { display: none; }
.dma-drawer__menu.js-nav li.is-open > .sub-menu { display: flex; }
.dma-drawer__has-sub { display: flex; flex-wrap: wrap; align-items: center; }
.dma-drawer__has-sub > a { flex: 1 1 auto; }
.dma-drawer__has-sub > .sub-menu { flex-basis: 100%; }
.dma-drawer__subtoggle {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ivory); background: none; border: 0; cursor: pointer;
  transition: transform 220ms ease;
}
.dma-drawer__menu li.is-open > .dma-drawer__subtoggle { transform: rotate(180deg); }

.dma-drawer__cta { margin-top: auto; padding-top: 24px; }
.dma-drawer__inquire {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 22px;
    background: var(--gold, #B89766);
    color: var(--navy, #0E1B2A);
    text-decoration: none;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: background 220ms cubic-bezier(.16,.84,.32,1), transform 200ms cubic-bezier(.16,.84,.32,1);
}
.dma-drawer__inquire:hover {
    background: var(--gold-deep, #9A7B4D);
    color: var(--ivory);
    transform: translateY(-1px);
}

/* ---------- HERO ON MOBILE ----------------------------------------- */
@media (max-width: 768px) {
    .dma-landing__hero {
        padding: 100px 22px 40px !important;
    }
    .dma-landing__hero-inner {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        align-items: start !important;
    }
    .dma-landing__title {
        font-size: clamp(36px, 9vw, 56px) !important;
    }
    .dma-landing__hero-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        padding-bottom: 0 !important;
    }
    .dma-landing__stat {
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 12px !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(244,239,230,0.18) !important;
        padding: 12px 0 0 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .dma-landing__stat-value {
        font-size: 28px !important;
        flex: 0 0 auto !important;
    }
    .dma-landing__stat-label {
        line-height: 1.3 !important;
        flex: 1 1 auto !important;
    }
    .dma-landing__stat-label br { display: none; }

    /* --- mobile: hide the hero stats block (2,231 / 33 / 22) — wastes vertical space --- */
    .dma-landing__hero-meta { display: none !important; }

    /* --- mobile: turn the FILTERS pill into a sticky bottom-left floating button --- */
    /* The wrapper toolbar collapses to height:0 because the button is taken out of flow. */
    .dma-landing__mobile-toolbar {
        margin: 0 !important;
        padding: 0 !important;
    }
    .dma-filter-trigger {
        position: fixed !important;
        left: 16px !important;
        bottom: 16px !important;
        z-index: 1100;                          /* above page content, below WP admin bar (32600) */
        padding: 12px 18px !important;
        background: var(--xp-ink, #0E1B2A) !important;
        border: 1px solid var(--xp-ink, #0E1B2A) !important;
        color: #ffffff !important;
        border-radius: 999px !important;
        box-shadow: 0 6px 16px rgba(14, 27, 42, 0.22), 0 2px 4px rgba(14, 27, 42, 0.12) !important;
        font-size: 12px !important;
    }
    .dma-filter-trigger:hover,
    .dma-filter-trigger:focus {
        background: var(--xp-gold, #B89766) !important;
        border-color: var(--xp-gold, #B89766) !important;
        color: var(--xp-ink, #0E1B2A) !important;
    }
    .dma-filter-trigger svg { stroke: currentColor !important; }
    /* Keep the active-filter count chip readable against the dark pill */
    .dma-filter-trigger__count {
        background: var(--xp-gold, #B89766) !important;
        color: var(--xp-ink, #0E1B2A) !important;
    }
    /* Hide the floating FILTERS pill while the filter drawer (or any modal) is open
       so it doesn't cover the drawer's Show Results action bar. Fades back in on close. */
    body:has(.offcanvas.show) .dma-filter-trigger,
    body:has(.modal.show)     .dma-filter-trigger {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .dma-filter-trigger {
        transition: opacity 160ms ease,
                    visibility 0s linear 160ms,
                    background 220ms cubic-bezier(.16,.84,.32,1),
                    color 220ms cubic-bezier(.16,.84,.32,1) !important;
    }
}

@media (max-width: 480px) {
    .dma-landing__hero { padding: 90px 18px 32px !important; }
    .dma-landing__title { font-size: clamp(32px, 10vw, 44px) !important; }
}

/* ========================================================================
 *  THANK YOU PAGE  (template-thank-you.php)
 * ======================================================================== */
.dma-thanks {
    --tk-ink:      rgb(14, 27, 42);
    --tk-ink-2:    rgb(20, 32, 46);
    --tk-muted:    rgb(110, 116, 124);
    --tk-card:     #FFFFFF;
    --tk-surface:  rgb(250, 250, 248);
    --tk-border:   rgb(216, 213, 205);
    --tk-rule:     rgba(14, 27, 42, 0.08);
    --tk-gold:     #c8a96a;
    --tk-radius:   8px;

    background: var(--tk-surface);
    color: var(--tk-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.dma-thanks__hero {
    background: rgb(14, 27, 42);
    color: rgb(244, 239, 230);
    padding: 110px 0 64px;
}
.dma-thanks__hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
.dma-thanks__eyebrow {
    display: inline-block;
    font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--tk-gold);
    margin-bottom: 18px;
}
.dma-thanks__title {
    margin: 0 0 20px;
    font-family: var(--serif, Georgia, serif);
    font-weight: 300;
    font-size: clamp(48px, 6vw, 88px);
    line-height: 1.05;
    letter-spacing: -0.022em;
    color: rgb(244, 239, 230);
}
.dma-thanks__lede {
    max-width: 640px;
    margin: 0 0 22px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(244, 239, 230, 0.78);
}
.dma-thanks__ref {
    display: inline-block;
    padding: 8px 14px;
    background: rgba(244, 239, 230, 0.08);
    border: 1px solid rgba(244, 239, 230, 0.16);
    border-radius: 999px;
    font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(244, 239, 230, 0.85);
}
.dma-thanks__ref strong { color: var(--tk-gold); font-weight: 700; }

.dma-thanks__body {
    max-width: 960px;        /* readable single column, comfortably wide */
    margin: 0 auto;
    padding: 48px 40px 96px;
}
.dma-thanks__main { display: flex; flex-direction: column; gap: 28px; }

.dma-thanks__card {
    background: var(--tk-card);
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    padding: 32px 32px;
    box-shadow: 0 2px 4px rgba(14, 27, 42, 0.03);
}
.dma-thanks__card-title {
    margin: 0 0 22px;
    font-family: var(--serif, Georgia, serif);
    font-weight: 400;
    font-size: 22px;
    color: var(--tk-ink-2);
}

.dma-thanks__summary { margin: 0; }
.dma-thanks__row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--tk-rule);
    align-items: baseline;
}
.dma-thanks__row:last-child { border-bottom: 0; }
.dma-thanks__row dt {
    font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tk-muted);
    margin: 0;
}
.dma-thanks__row dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--tk-ink);
}
.dma-thanks__row dd a {
    color: var(--tk-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--tk-gold);
    transition: color 160ms ease;
}
.dma-thanks__row dd a:hover { color: var(--tk-gold); }
.dma-thanks__row-unit { color: var(--tk-muted); font-size: 13px; margin-left: 4px; }
.dma-thanks__row--note dd { white-space: normal; }

.dma-thanks__steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dma-thanks__steps > li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--tk-rule);
}
.dma-thanks__steps > li:last-child { border-bottom: 0; padding-bottom: 0; }
.dma-thanks__steps > li:first-child { padding-top: 0; }
.dma-thanks__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--tk-ink);
    color: var(--tk-card);
    font-family: var(--serif, Georgia, serif);
    font-size: 18px;
    line-height: 1;
}
.dma-thanks__step-body h3 {
    margin: 0 0 4px;
    font-family: var(--serif, Georgia, serif);
    font-weight: 400;
    font-size: 18px;
    color: var(--tk-ink-2);
}
.dma-thanks__step-body p {
    margin: 0;
    color: var(--tk-muted);
    font-size: 15px;
    line-height: 1.55;
}

.dma-thanks__contact-lede {
    margin: -8px 0 22px;
    color: var(--tk-muted);
    font-size: 15px;
    line-height: 1.5;
}
.dma-thanks__contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.dma-thanks__contact-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--tk-surface);
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    color: var(--tk-ink) !important;
    text-decoration: none !important;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.dma-thanks__contact-card:hover {
    border-color: var(--tk-ink);
    background: #FFFFFF;
    transform: translateY(-1px);
}
.dma-thanks__contact-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--tk-ink);
    color: var(--tk-gold);
}
.dma-thanks__contact-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dma-thanks__contact-label {
    font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--tk-muted);
}
.dma-thanks__contact-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--tk-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dma-thanks__cta-row { display: flex; justify-content: center; padding: 8px 0; }
.dma-thanks__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--tk-ink);
    color: var(--tk-card) !important;
    border-radius: 999px;
    font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 160ms ease, transform 160ms ease;
    box-shadow: 0 4px 12px rgba(14, 27, 42, 0.10);
}
.dma-thanks__cta:hover {
    background: var(--tk-gold);
    color: var(--tk-ink) !important;
    transform: translateY(-1px);
}

.dma-thanks__stat-card {
    background: var(--tk-ink);
    color: rgb(244, 239, 230);
    border-radius: var(--tk-radius);
    padding: 28px 28px;
}
.dma-thanks__stat-eyebrow {
    display: block;
    margin-bottom: 22px;
    font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tk-gold);
}
.dma-thanks__stat-row { display: flex; flex-direction: column; gap: 20px; }
.dma-thanks__stat {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(244, 239, 230, 0.14);
}
.dma-thanks__stat:first-of-type { padding-top: 0; border-top: 0; }
.dma-thanks__stat-value {
    font-family: var(--serif, Georgia, serif);
    font-weight: 300;
    font-size: 34px;
    line-height: 1;
    color: var(--tk-gold);
    flex: 0 0 auto;
}
.dma-thanks__stat-label {
    font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(244, 239, 230, 0.85);
    line-height: 1.4;
}

@media (max-width: 992px) {
    .dma-thanks__hero { padding: 90px 0 48px; }
    .dma-thanks__hero-inner { padding: 0 24px; }
    .dma-thanks__body { padding: 36px 24px 64px; }
}
@media (max-width: 600px) {
    .dma-thanks__hero { padding: 80px 0 48px; }
    .dma-thanks__card { padding: 24px 20px; }
    .dma-thanks__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
    .dma-thanks__contact-grid { grid-template-columns: 1fr; }
    .dma-thanks__steps > li { grid-template-columns: 40px 1fr; gap: 14px; }
    .dma-thanks__step-num { width: 32px; height: 32px; font-size: 15px; }
}

/* ---------- CHIP STRIP ON MOBILE — horizontal scroll --------------- */
@media (max-width: 768px) {
    .dma-landing .mo_quick_pricerange {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 16px 18px !important;
        gap: 8px !important;
        position: relative !important;
        margin: 0 0 24px !important;
    }
    .dma-landing .mo_quick_pricerange::-webkit-scrollbar { display: none; }
    .dma-landing .mo_quick_pricerange h3 {
        flex: 0 0 auto !important;
        margin: 0 12px 0 0 !important;
        padding-right: 12px !important;
    }
    .dma-landing .mo_quick_pricerange .mo_pricerange_btn,
    .dma-landing .mo_quick_pricerange .btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* ---------- LANDING INNER PADDING ON MOBILE ------------------------ */
@media (max-width: 991px) {
    .dma-landing__inner { padding: 0 22px !important; }
    .dma-landing > .dma-landing__inner { padding-top: 28px !important; }
}
@media (max-width: 600px) {
    .dma-landing__inner { padding: 0 16px !important; }
}

/* ---------- DROPDOWNS INSIDE DRAWER — full width ----------------- */
@media (max-width: 991px) {
    .dma-drawer--filter .mo_filters .dropdown-menu.mo {
        max-height: 220px !important;
    }
}

/* ---------- WHEN FILTER IS IN DRAWER, override sidebar-only styles -- */
.dma-drawer--filter .mo_filters .filtersContainer {
    padding: 0 !important;
}
.dma-drawer--filter .mo_filters #filtersContainer::before { display: none !important; }

/* Mobile drawer — mirror the theme-aligned filter styling (boosted specificity
   so it wins regardless of any plugin CSS loading after style.css). */
.dma-drawer--filter .mo_filters .filterCheckboxes,
.dma-drawer--filter .mo_filters .filterSlider {
    border: 0 !important;
    background: transparent !important;
    padding: 18px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    box-shadow: none !important;
}
.dma-drawer--filter .mo_filters .filterCheckboxes:last-child,
.dma-drawer--filter .mo_filters .filterSlider:last-child { border-bottom: 0 !important; }
.dma-drawer--filter .mo_filters .panel-heading {
    background: transparent !important;
    border: 0 !important;
    padding: 0 0 12px !important;
}
.dma-drawer--filter .mo_filters .panel-body {
    padding: 0 !important;
    background: transparent !important;
}
.dma-drawer--filter .mo_filters h3.panel-title {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--txt-2, #4a5566) !important;
    margin: 0 0 10px !important;
}
.dma-drawer--filter .mo_filters .location_menu,
.dma-drawer--filter .mo_filters .dropdown > .btn,
.dma-drawer--filter .mo_filters select,
.dma-drawer--filter .mo_filters .mo_daterange,
.dma-drawer--filter .mo_filters input[name="datefilter"] {
    width: 100% !important;
    font-family: var(--sans) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    color: var(--txt) !important;
    padding: 12px 16px !important;
    text-align: left !important;
    box-shadow: none !important;
}
.dma-drawer--filter .mo_filters .location_menu:hover,
.dma-drawer--filter .mo_filters .dropdown > .btn:hover {
    border-color: var(--navy) !important;
}
.dma-drawer--filter .mo_filters .btn-group.flat {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
}
.dma-drawer--filter .mo_filters .btn-group.flat label,
.dma-drawer--filter .mo_filters .btn-group.flat .btn-clean {
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 14px 10px !important;
    background: transparent !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    color: var(--txt) !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}
.dma-drawer--filter .mo_filters .btn-group.flat .selecticon {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    opacity: 0.85 !important;
}
.dma-drawer--filter .mo_filters .btn-group.flat .type_caption {
    font: inherit !important;
    color: inherit !important;
    margin: 0 !important;
}
.dma-drawer--filter .mo_filters .btn-group.flat label > input[type="checkbox"] { display: none !important; }
.dma-drawer--filter .mo_filters .btn-group.flat label.active,
.dma-drawer--filter .mo_filters .btn-group.flat label.btn.active,
.dma-drawer--filter .mo_filters .btn-group.flat .btn.active {
    background: var(--navy) !important;
    border-color: var(--navy) !important;
    color: var(--ivory) !important;
}
.dma-drawer--filter .mo_filters .btn-group.flat label.active .type_caption,
.dma-drawer--filter .mo_filters .btn-group.flat .btn.active .type_caption {
    color: var(--ivory) !important;
}
.dma-drawer--filter .mo_filters .btn-group.flat label.active .selecticon,
.dma-drawer--filter .mo_filters .btn-group.flat .btn.active .selecticon {
    filter: invert(1) brightness(2) !important;
    opacity: 1 !important;
}
.dma-drawer--filter .mo_filters .input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
}
.dma-drawer--filter .mo_filters .input-group .btn-number {
    background: transparent !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    color: var(--txt) !important;
    padding: 0 14px !important;
    font-family: var(--serif) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    min-width: 44px !important;
    box-shadow: none !important;
}
.dma-drawer--filter .mo_filters .input-group .btn-number:hover {
    background: var(--navy) !important;
    color: var(--ivory) !important;
    border-color: var(--navy) !important;
}
.dma-drawer--filter .mo_filters .input-group .form-control,
.dma-drawer--filter .mo_filters .input-group input[type="text"],
.dma-drawer--filter .mo_filters .input-group input[type="number"] {
    flex: 1 !important;
    text-align: center !important;
    font-family: var(--serif) !important;
    font-size: 16px !important;
    background: transparent !important;
    border: 1px solid var(--rule) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    color: var(--txt) !important;
    padding: 8px !important;
    box-shadow: none !important;
}
.dma-drawer--filter .mo_filters .input-group .form-control:focus {
    outline: 0 !important;
    border-color: var(--navy) !important;
    box-shadow: none !important;
}
.dma-drawer--filter .mo_filters .checkbox.devmodex {
    display: inline-flex !important;
    margin: 0 8px 8px 0 !important;
    padding: 0 !important;
}
.dma-drawer--filter .mo_filters .checkbox.devmodex label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 8px 14px !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--txt) !important;
    background: transparent !important;
    border: 1px solid var(--rule) !important;
    border-radius: 999px !important;
    margin: 0 !important;
}
.dma-drawer--filter .mo_filters .checkbox.devmodex input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}
.dma-drawer--filter .mo_filters .checkbox.devmodex:has(input:checked) label {
    background: var(--navy) !important;
    border-color: var(--navy) !important;
    color: var(--ivory) !important;
}

/* ---------- BACKDROP TINT ----------------------------------------- */
.offcanvas-backdrop.show { opacity: 0.55; }

/* ---------- DOCK BUTTON ON MOBILE — full width, smaller -------- */
@media (max-width: 600px) {
    .dma-landing .previousdock,
    .dma-landing .nextdock {
        width: 100% !important;
        padding: 14px 18px !important;
        font-size: 9px !important;
    }
    .dma-landing #mo_ajax_container > .col.text-center {
        margin-bottom: 24px !important;
    }
}

/* =============================================================================
   HOMEPAGE — MOBILE RESPONSIVE
   The homepage uses inline grid styles (e.g. grid-template-columns:repeat(3,1fr))
   which beat regular CSS. We use scoped !important here to override inline styles
   only at small viewports — desktop layout untouched.
   ============================================================================= */

/* Hero — at narrow widths, tighten content */
@media (max-width: 991px) {
    .dma-hero__content {
        padding: 0 24px !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    .dma-hero__content .display { font-size: clamp(38px, 8vw, 60px) !important; }
    .dma-hero__content .lede { font-size: 15px !important; }
    .dma-hero__actions { width: 100%; align-items: stretch !important; }
    .dma-hero__actions .btn { width: 100%; justify-content: space-between; }
}
@media (max-width: 600px) {
    .dma-hero__content .display { font-size: clamp(34px, 9vw, 48px) !important; }
    .dma-hero__scroll { display: none; }
}

/* Press strip — wrap logos on mobile */
@media (max-width: 768px) {
    .dma-press__inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px;
    }
    .dma-press__logos {
        flex-wrap: wrap !important;
        gap: 14px 22px !important;
    }
}

/* Services section (Section 4) — 3-col inline grid → 1 col on mobile */
@media (max-width: 991px) {
    .dma-section.surface-ivory > .container > div[style*="repeat(3,1fr)"],
    .dma-section.surface-ivory > .container > div[style*="repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 56px !important;
    }
}

/* Section header (eyebrow + link) — common pattern, mobile stack */
@media (max-width: 768px) {
    .dma-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 24px;
    }
    /* Section 5: destinations title row */
    .dma-section.surface-navy > .container > div[style*="justify-content:space-between"],
    .dma-section.surface-navy > .container > div[style*="space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 24px !important;
        margin-bottom: 48px !important;
    }
    /* Section 6: trust stats header */
    .dma-section--sm > .container > div[style*="grid-template-columns:1fr auto"],
    .dma-section--sm > .container > div[style*="1fr auto"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 40px !important;
    }
    /* Section 7: brokers intro row */
    .dma-section.surface-ivory > .container > div[style*="grid-template-columns:1fr 1.4fr"],
    .dma-section.surface-ivory > .container > div[style*="1fr 1.4fr"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        margin-bottom: 48px !important;
    }
}

/* Section padding — reduce on mobile */
@media (max-width: 768px) {
    .dma-section { padding: 80px 0 !important; }
    .dma-section--sm { padding: 64px 0 !important; }
    .dma-section--md { padding: 72px 0 !important; }
}
@media (max-width: 600px) {
    .dma-section { padding: 64px 0 !important; }
    .dma-section--sm { padding: 56px 0 !important; }
    .container, .container--narrow { padding: 0 18px !important; }
}

/* Trust stats grid — auto-fit at mobile */
@media (max-width: 768px) {
    .dma-trust__stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px 24px !important;
    }
    .dma-trust__stat-number { font-size: 36px !important; }
}
@media (max-width: 480px) {
    .dma-trust__stats { grid-template-columns: 1fr !important; }
}

/* Brokers grid — already 1fr at <768 via existing rule, but tighten gaps */
@media (max-width: 768px) {
    .dma-brokers__grid { gap: 24px !important; }
}

/* Section 8: inquiry/typeform two-col → stack on mobile */
@media (max-width: 768px) {
    .dma-two-col,
    .dma-two-col--narrow {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    /* Image aspect on mobile — square instead of portrait */
    .dma-two-col--narrow > div:first-child[style*="aspect-ratio:4/5"],
    .dma-two-col--narrow > div:first-child[style*="aspect-ratio: 4/5"] {
        aspect-ratio: 4 / 3 !important;
    }
}

/* Headlines — scale down inline-styled h1/h2/h3 on mobile */
@media (max-width: 768px) {
    .dma-section .h1 { font-size: clamp(36px, 7vw, 56px) !important; }
    .dma-section .h2 { font-size: clamp(28px, 5.5vw, 44px) !important; }
    .dma-section .h3 { font-size: clamp(22px, 4.5vw, 32px) !important; }
    .dma-section p.body, .dma-section p.lede {
        font-size: 15px !important;
        max-width: 56ch !important;
    }
}

/* =============================================================================
   GLOBAL HORIZONTAL-OVERFLOW DEFENSE + BROKERS GRID MOBILE FIX
   ============================================================================= */

/* Stop ANY mobile horizontal scroll — defensive.
   Uses overflow-x:clip instead of hidden so descendants with
   `position: sticky` (.dma-section-nav) keep working. */
html, body { max-width: 100% !important; overflow-x: clip !important; }
.body-wrapper { max-width: 100%; overflow-x: clip; }

/* Brokers grid — force 1 column at small mobile, kill any inline widths
   on the plugin output. */
@media (max-width: 768px) {
    .dma-brokers__grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .dma-brokers__grid > .row,
    .dma-brokers__grid .row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        --bs-gutter-x: 0 !important;
    }
    .dma-brokers__grid .col-md-4,
    .dma-brokers__grid .digislide,
    .dma-brokers__grid .col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .dma-brokers__grid .card,
    .dma-brokers__grid .digislide .card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .dma-brokers__grid img,
    .dma-brokers__grid .card img,
    .dma-brokers__grid .digislide img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    .dma-brokers__grid .container,
    .dma-brokers__grid .col-md-4 > .container,
    .dma-brokers__grid .digislide > .container {
        max-width: 100% !important;
        padding: 0 !important;
        width: 100% !important;
    }
}

/* Phone-narrow: 1 broker per row */
@media (max-width: 520px) {
    .dma-brokers__grid,
    .dma-brokers__grid > .row,
    .dma-brokers__grid .row {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* Press logos — same defensive sizing on very narrow */
@media (max-width: 480px) {
    .dma-press__logos {
        gap: 10px 18px !important;
    }
    .dma-press__name { font-size: 11px !important; }
}

/* Hero rating — smaller on tiny screens */
@media (max-width: 480px) {
    .dma-hero__rating { font-size: 12px !important; }
}


/* =============================================================================
   RECENTLY CHARTERED — cover-flow / stage layout
   One large center card, smaller tilted cards on each side, single caption
   below. Click a side card to bring it center; prev/next rotate the deck.
   ============================================================================= */
.dma-recent { position: relative; overflow: hidden; }
.dma-recent .container { position: relative; z-index: 2; }

.dma-recent__stage {
    position: relative;
    width: 100%;
    height: clamp(360px, 42vw, 560px);
    margin: 56px 0 0;
    overflow: hidden;
    user-select: none;
    perspective: 1600px;
}
.dma-recent__deck {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dma-recent__card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(440px, 44vw, 660px);
    aspect-ratio: 16 / 11;
    text-decoration: none;
    color: inherit;
    display: block;
    transform-origin: center center;
    transform: translate(-50%, -50%) translateX(var(--x, 0px)) rotate(var(--rot, 0deg)) scale(var(--scale, 1));
    transition:
        transform 600ms cubic-bezier(.2,.8,.2,1),
        opacity 500ms cubic-bezier(.2,.8,.2,1),
        filter 500ms cubic-bezier(.2,.8,.2,1);
    z-index: var(--z, 1);
    opacity: var(--op, 1);
    filter: brightness(var(--brt, 1)) saturate(var(--sat, 1));
    cursor: pointer;
    will-change: transform, opacity;
}
.dma-recent__card[data-pos="0"] { cursor: default; }
.dma-recent__photo {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(14,27,42,0.10);
    box-shadow:
        0 24px 60px rgba(14,27,42,0.30),
        0 8px 18px rgba(14,27,42,0.18);
    border-radius: 2px;
}
.dma-recent__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Caption — single label below the active card */
.dma-recent__label {
    margin: 32px auto 0;
    display: flex;
    justify-content: center;
    padding: 0 24px;
}
.dma-recent__label a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: #FFFFFF;
    border: 1px solid rgba(14,27,42,0.10);
    border-radius: 4px;
    color: var(--txt);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 14px;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(14,27,42,0.08);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms cubic-bezier(.2,.8,.2,1);
    max-width: 92vw;
}
.dma-recent__label a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(14,27,42,0.14);
}
.dma-recent__label-icon {
    display: inline-flex;
    color: var(--gold-text);
    flex-shrink: 0;
}
.dma-recent__label-text {
    color: var(--txt);
    font-weight: 500;
}
.dma-recent__label-text strong { color: var(--navy); }

/* Nav buttons */
.dma-recent__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    background: #FFFFFF;
    border: 1px solid rgba(14,27,42,0.10);
    color: var(--navy);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(14,27,42,0.12), 0 2px 6px rgba(14,27,42,0.06);
    transition: background 220ms cubic-bezier(.2,.8,.2,1), color 220ms cubic-bezier(.2,.8,.2,1), transform 220ms cubic-bezier(.2,.8,.2,1);
    z-index: 50;
}
.dma-recent__nav--prev { left: max(20px, 4vw); }
.dma-recent__nav--next { right: max(20px, 4vw); }
.dma-recent__nav:hover {
    background: var(--navy);
    color: var(--ivory);
    transform: translateY(-50%) scale(1.06);
}
.dma-recent__nav:active { transform: translateY(-50%) scale(0.96); }

/* Mobile — narrower cards, smaller stage */
@media (max-width: 768px) {
    .dma-recent__stage {
        height: clamp(280px, 70vw, 380px);
        margin-top: 32px;
    }
    .dma-recent__card { width: clamp(280px, 78vw, 420px); }
    .dma-recent__nav { width: 42px; height: 42px; }
    .dma-recent__nav--prev { left: 12px; }
    .dma-recent__nav--next { right: 12px; }
    .dma-recent__label { margin-top: 20px; }
    .dma-recent__label a { font-size: 12px; padding: 12px 20px; }
}

/* =============================================================================
   COVER-FLOW NAVY VARIANT (Section 5)
   ============================================================================= */
.dma-recent--navy {
    background: linear-gradient(180deg, #0E1B2A 0%, #142333 100%) !important;
    color: var(--ivory);
    overflow: hidden;
    position: relative;
    padding-bottom: 96px !important;
}
.dma-recent--navy::before {
    content: "";
    position: absolute;
    top: -20%; right: -10%;
    width: 60%; height: 140%;
    background: radial-gradient(ellipse at center, rgba(184,151,102,0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.dma-recent--navy > * { position: relative; z-index: 1; }

.dma-recent--navy .dma-recent__photo {
    box-shadow:
        0 28px 70px rgba(0,0,0,0.50),
        0 10px 22px rgba(0,0,0,0.30);
}
.dma-recent--navy .dma-recent__nav {
    background: rgba(244,239,230,0.08);
    border: 1px solid rgba(244,239,230,0.30);
    color: var(--ivory);
    backdrop-filter: blur(6px);
}
.dma-recent--navy .dma-recent__nav:hover {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
}
.dma-recent--navy .dma-recent__label a {
    background: #FFFFFF;
    border-color: rgba(255,255,255,0);
    box-shadow: 0 6px 20px rgba(0,0,0,0.30);
    color: var(--txt);
}
.dma-recent--navy .dma-recent__label a:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.40);
}
.dma-recent--navy .dma-recent__label-text strong { color: var(--navy); }
.dma-recent--navy .dma-recent__label-icon { color: var(--gold-text); }

/* =============================================================================
   PAGE / SINGLE / ARCHIVE TEMPLATES
   Used by page.php, single.php, archive.php, index.php
   ============================================================================= */
.dma-page {
    min-height: 60vh;
    background: var(--ivory);
    padding: 0 0 120px;
}

/* Hero strip — navy band matching landing pages */
.dma-page__hero {
    background: linear-gradient(135deg, #0E1B2A 0%, #142333 100%);
    color: var(--ivory);
    padding: 140px 40px 64px;
    position: relative;
    overflow: hidden;
}
.admin-bar .dma-page__hero { padding-top: 172px; }
.dma-page__hero::before {
    content: "";
    position: absolute;
    top: -40%; right: -10%;
    width: 60%; height: 180%;
    background: radial-gradient(ellipse at center, rgba(184,151,102,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.dma-page__hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, rgba(184,151,102,0.5) 30%, rgba(184,151,102,0.5) 70%, transparent 100%);
}
.dma-page__hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.dma-page__eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-weight: 500;
}
.dma-page__title {
    font-family: var(--display, "Montserrat", Arial, sans-serif);
    font-weight: 500;
    font-size: clamp(36px, 4.6vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.018em;
    color: var(--ivory);
    margin: 0;
}
.dma-page__meta {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(244,239,230,0.7);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.dma-page__sep { opacity: 0.4; }

/* Article body */
.dma-page__article {
    padding: 64px 56px 0;
}
.dma-page__inner {
    max-width: 1440px;
    margin: 0 auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    color: var(--txt);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
}

/* Body content typography */
.dma-page__inner h1,
.dma-page__inner h2,
.dma-page__inner h3,
.dma-page__inner h4 {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--navy);
    letter-spacing: -0.01em;
    margin: 1.6em 0 0.6em;
    line-height: 1.15;
}
.dma-page__inner h1:first-child,
.dma-page__inner h2:first-child,
.dma-page__inner h3:first-child { margin-top: 0; }
.dma-page__inner h2 { font-size: clamp(28px, 3vw, 44px); }
.dma-page__inner h3 { font-size: clamp(22px, 2.4vw, 32px); }
.dma-page__inner h4 { font-size: 20px; }
.dma-page__inner p {
    margin: 0 0 1.2em;
    color: var(--txt);
}
.dma-page__inner p:last-child { margin-bottom: 0; }
.dma-page__inner a {
    color: var(--gold-text);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 200ms ease;
}
.dma-page__inner a:hover { color: var(--navy); }
.dma-page__inner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 24px 0;
}
.dma-page__inner ul, .dma-page__inner ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.dma-page__inner li { margin: 0.4em 0; }
.dma-page__inner blockquote {
    margin: 32px 0;
    padding: 24px 32px;
    border-left: 3px solid var(--gold, #B89766);
    background: rgba(184,151,102,0.06);
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1.4;
    color: var(--navy);
    font-style: italic;
}
.dma-page__inner hr {
    border: 0;
    border-top: 1px solid rgba(14,27,42,0.08);
    margin: 48px 0;
}

/* WPBakery shortcode containers */
.dma-page__inner .vc_row { margin: 0 0 24px; }
.dma-page__inner .vc_column-inner > .wpb_wrapper { display: block; }

/* =============================================================================
   mo_filter broker card (mo_single_broker_shortcode) — on-brand restyle.
   The plugin outputs Bootstrap card HTML; we override it from the theme since
   we cannot edit the plugin. Scoped to .wpb_wrapper so it only fires inside
   WPBakery article content, not everywhere a .card class exists.
   ============================================================================= */
.dma-page__inner .wpb_wrapper .card {
    border: 1px solid rgba(20,32,46,0.10);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(14,27,42,0.06), 0 8px 24px rgba(14,27,42,0.05);
    overflow: hidden;
    background: var(--ivory, #FBF8F2);
    margin: 0 auto;
    max-width: 380px;
}
/* Photo — override the plugin's inline height + border-radius */
.dma-page__inner .wpb_wrapper .card .img-fluid.w-100 {
    height: 280px !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: 0 !important;
    display: block;
    width: 100%;
    margin: 0;
}
/* Card body padding */
.dma-page__inner .wpb_wrapper .card .card-body {
    padding: 20px 24px 24px !important;
    text-align: center;
}
/* Broker name */
.dma-page__inner .wpb_wrapper .card h4.card-title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--navy);
    letter-spacing: 0.01em;
    margin: 0 0 8px !important;
}
/* Credentials */
.dma-page__inner .wpb_wrapper .card h6.text-muted {
    font-family: var(--mono);
    font-size: 10px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--txt-3) !important;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 16px !important;
}
/* Divider */
.dma-page__inner .wpb_wrapper .card hr {
    border-color: rgba(20,32,46,0.10);
    margin: 0 auto 16px !important;
    width: 40% !important;
}
/* Contact block */
.dma-page__inner .wpb_wrapper .card .card-text,
.dma-page__inner .wpb_wrapper .card .card-text p {
    font-size: 13px;
    font-family: var(--sans);
    color: var(--txt);
    line-height: 1.7;
    margin: 0 !important;
}
.dma-page__inner .wpb_wrapper .card .card-text strong { font-weight: 400; }
.dma-page__inner .wpb_wrapper .card .card-text a {
    color: var(--navy);
    text-decoration: none;
}
.dma-page__inner .wpb_wrapper .card .card-text a:hover { text-decoration: underline; }
/* Hide the broken iMessage / WhatsApp icon images (404 on local) */
.dma-page__inner .wpb_wrapper .card img[src*="/img/imessage"],
.dma-page__inner .wpb_wrapper .card img[src*="/img/whatsapp"] {
    display: none !important;
}
/* See Bio → gold outlined pill */
.dma-page__inner .wpb_wrapper .card .btn.btn-primary {
    background: transparent !important;
    color: var(--gold-deep, #9A7B4D) !important;
    border: 1px solid var(--gold-deep, #9A7B4D) !important;
    border-radius: 999px !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    padding: 9px 22px !important;
    box-shadow: none !important;
    transition: background 200ms ease, color 200ms ease !important;
    display: inline-block !important;
    margin-top: 4px !important;
}
.dma-page__inner .wpb_wrapper .card .btn.btn-primary:hover {
    background: var(--gold-deep, #9A7B4D) !important;
    color: var(--ivory, #FBF8F2) !important;
}

/* Destination/landing pages often use a 2/8/2 column layout with the side
   columns left empty as visual gutters. That pinches the middle column to a
   narrow band. When the side columns have no content, collapse them and let
   the middle column take the full row width. */
.dma-page__inner .vc_row:has(> .vc_col-sm-2 > .vc_column-inner > .wpb_wrapper:empty) > .vc_col-sm-2:has(> .vc_column-inner > .wpb_wrapper:empty) {
    display: none;
}
.dma-page__inner .vc_row:has(> .vc_col-sm-2 > .vc_column-inner > .wpb_wrapper:empty) > .vc_col-sm-8 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* Featured image (single post) */
.dma-single__featured {
    max-width: 1280px;
    margin: -40px auto 0;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}
.dma-single__featured img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(14,27,42,0.18), 0 6px 14px rgba(14,27,42,0.08);
}
.dma-single__inner { max-width: 1100px; }

/* Single nav (prev/next) */
.dma-single__nav {
    max-width: 1100px;
    margin: 64px auto 0;
    padding: 0 40px;
}
.dma-single__nav-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.dma-single__nav-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 28px;
    background: #FFFFFF;
    border: 1px solid rgba(14,27,42,0.08);
    border-radius: 6px;
    text-decoration: none;
    color: var(--txt);
    transition: transform 220ms cubic-bezier(.16,.84,.32,1), box-shadow 220ms cubic-bezier(.16,.84,.32,1);
}
.dma-single__nav-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(14,27,42,0.10);
}
.dma-single__nav-link--next { text-align: right; }
.dma-single__nav-label {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-weight: 500;
}
.dma-single__nav-title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--navy);
    line-height: 1.2;
}

/* Archive grid */
.dma-archive__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 36px;
    margin: 0;
}
.dma-archive__card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid rgba(14,27,42,0.08);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(14,27,42,0.04);
    overflow: hidden;
    text-decoration: none;
    color: var(--txt);
    transition: transform 320ms cubic-bezier(.16,.84,.32,1), box-shadow 320ms cubic-bezier(.16,.84,.32,1);
}
.dma-archive__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(14,27,42,0.10), 0 4px 12px rgba(14,27,42,0.06);
}
.dma-archive__media {
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--ivory-2, #EAE3D5);
}
.dma-archive__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.16,.84,.32,1);
}
.dma-archive__card:hover .dma-archive__media img { transform: scale(1.04); }
.dma-archive__body {
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.dma-archive__date {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-weight: 500;
}
.dma-archive__title {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--navy);
    margin: 0;
}
.dma-archive__excerpt {
    font-size: 14px;
    color: var(--txt-2);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.dma-archive__readmore {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--navy);
    font-weight: 500;
    margin-top: 6px;
}
.dma-archive__pagination {
    margin: 56px 0 0;
    text-align: center;
}
.dma-archive__pagination .page-numbers {
    display: inline-block;
    padding: 10px 16px;
    margin: 0 4px;
    background: #FFFFFF;
    border: 1px solid rgba(14,27,42,0.08);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
    transition: all 200ms ease;
}
.dma-archive__pagination .page-numbers:hover { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.dma-archive__pagination .page-numbers.current { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.dma-archive__empty {
    text-align: center;
    color: var(--txt-2);
    font-size: 16px;
    padding: 80px 0;
}

/* Mobile */
@media (max-width: 991px) {
    .dma-page__hero { padding: 120px 28px 48px; }
    .dma-page__article { padding: 48px 32px 0; }
    .dma-page__inner { padding: 0; }
    .dma-single__featured { padding: 0 24px; margin-top: -32px; }
    .dma-single__nav { padding: 0 24px; }
}
@media (max-width: 768px) {
    .dma-page__hero { padding: 100px 20px 40px; }
    .dma-page__title { font-size: clamp(32px, 8vw, 48px) !important; }
    .dma-page__article { padding: 36px 20px 0; }
    .dma-page__inner { padding: 0; }
    .dma-page__inner blockquote { padding: 18px 22px; font-size: 18px; }
    .dma-archive__grid { grid-template-columns: 1fr; gap: 24px; }
    .dma-single__nav-inner { grid-template-columns: 1fr; gap: 12px; }
    .dma-single__featured img { aspect-ratio: 4 / 3; }
}

/* =============================================================================
   BROKERS GRID — recolor gold-tinted links + render contact-row icons inline
   The plugin (dma_mo) emits <img src="/img/imessage18.png"> + <img src="/img/whatsapp18.png">
   alongside the labels "iMessage" / "WhatsApp" — same markup as prod. The global
   `img { display: block }` rule in this stylesheet (line ~67) would push them to
   their own line, so we explicitly force inline-block here and constrain to 18px.
   ============================================================================= */

/* Broker contact-row icons (iMessage/WhatsApp PNGs) — render inline at 18×18.
   IMPORTANT: target by src= attribute instead of `.card-text` ancestor, because
   the plugin emits invalid `<p class="card-text"><strong><p>…img…</p></strong></p>`
   and the browser auto-corrects by closing the outer <p>, which strips the img
   out of .card-text in the parsed DOM. The mobile rule at line ~5708 (also
   `.dma-brokers__grid img`) would otherwise stretch these to 100% width on
   phones — these attribute selectors beat it on specificity (0,3,1 vs 0,2,1). */
/* =============================================================================
   LEDE ROW — repeated heading/intro pattern: H1 on left, descriptive body on right.
   Used by page-about.php (Our story + Your team) and front-page.php (Your team).
   Stacks vertically at <900px so neither column gets squeezed by the 96px gap.
   ============================================================================= */
.dma-lede-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 96px;
    margin-bottom: 72px;
    align-items: end;
}
.dma-lede-row--tight { margin-bottom: 0; }
.dma-lede-row__body { align-self: flex-end; }

@media (max-width: 900px) {
    .dma-lede-row {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 48px;
    }
    .dma-lede-row--tight { margin-bottom: 0; }
}

/* =============================================================================
   BROKERS GRID — capped at 4 cols max, steps down explicitly to keep cards from
   feeling cramped. Replaces the previous fixed 3/2/1-breakpoint layout AND the
   prior `auto-fill` attempt (which let it grow to 5 on wide desktop — too tight).
   ============================================================================= */
.dma-brokers__grid > .row,
.dma-brokers__grid .row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    --bs-gutter-x: 0 !important;
}
.dma-brokers__grid .col-md-4,
.dma-brokers__grid .digislide,
.dma-brokers__grid .col {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Standard desktop / laptop / tablet-landscape: 3 cols (1000–1399px).
   4 cols at this width gives ~267px per card after gaps — too tight for the email line. */
@media (max-width: 1399px) {
    .dma-brokers__grid > .row,
    .dma-brokers__grid .row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
/* Tablet landscape only: 2 cols (768–999px).
   At md (viewport ≥768) Bootstrap's .container is 720px wide → 2 cols = ~350px each. Comfortable.
   Below md the container drops to 540px → 2 cols would be ~260px which is too tight for the
   email line, so we step straight to 1 col there. */
@media (max-width: 999px) {
    .dma-brokers__grid > .row,
    .dma-brokers__grid .row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}
/* Tablet portrait + phone (anything below Bootstrap md): 1 col so cards fill the full
   sm/xs container width (no more 260px-cramped cards). */
@media (max-width: 767px) {
    .dma-brokers__grid > .row,
    .dma-brokers__grid .row {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Word-break for long emails / contact strings so they don't poke out of the card. */
.dma-brokers__grid .card-text,
.dma-brokers__grid .card-text a,
.dma-brokers__grid .card-text strong,
.dma-brokers__grid .card-text p,
.dma-brokers__grid .card-title,
.dma-brokers__grid .text-muted,
.dma-brokers__grid .digislide a {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.dma-brokers__grid img[src*="imessage18"],
.dma-brokers__grid img[src*="whatsapp18"],
.dma-brokers__grid .card img[src*="imessage18"],
.dma-brokers__grid .card img[src*="whatsapp18"],
.dma-brokers__grid .digislide img[src*="imessage18"],
.dma-brokers__grid .digislide img[src*="whatsapp18"] {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    vertical-align: middle !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;     /* defeat line 830's 4/5 portrait ratio */
    border-radius: 0 !important;
    filter: none !important;
    transition: none !important;
}

/* Recolor every link in the broker card text to navy (was gold) */
.dma-brokers__grid .card-text a,
.dma-brokers__grid .card-text strong a,
.dma-brokers__grid .personnel-content a,
.dma-brokers__grid .digislide .card-text a,
.dma-brokers__grid .digislide a {
    color: var(--navy) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(14,27,42,0.15);
    transition: color 200ms ease, border-color 200ms ease;
}
.dma-brokers__grid .card-text a:hover,
.dma-brokers__grid .digislide .card-text a:hover {
    color: var(--gold-text) !important;
    border-bottom-color: var(--gold-deep);
}

/* Static text (phone after the fa icon, etc.) — also navy */
.dma-brokers__grid .card-text,
.dma-brokers__grid .card-text strong,
.dma-brokers__grid .card-text p,
.dma-brokers__grid .digislide .card-text,
.dma-brokers__grid .digislide .card-text strong {
    color: var(--navy) !important;
    font-weight: 400 !important;
}

/* The <strong> wrapping the entire block — kill bold so type stays editorial */
.dma-brokers__grid .card-text > strong { font-weight: 400 !important; }

/* (Removed previous ::before SVG-mask icon replacements — the real PNG icons
   are now rendered inline via the rule above, matching prod exactly.) */

/* Phone fa icon + the text node next to it — force to match the rest of the card body */
.dma-brokers__grid .card-text .fa-phone,
.dma-brokers__grid .card-text .fa,
.dma-brokers__grid .digislide .card-text .fa-phone {
    color: var(--navy) !important;
    margin-right: 6px;
}
/* The plugin emits invalid <p><strong><p>…</p></strong></p>; the browser
   auto-corrects by closing the outer <p>, leaving phone-number text orphaned
   *outside* .card-text in the parsed DOM. Target the .card wrapper instead
   so we catch the orphaned text nodes regardless of where they end up. */
.dma-brokers__grid .card p,
.dma-brokers__grid .card strong,
.dma-brokers__grid .card .fa,
.dma-brokers__grid .card .fas,
.dma-brokers__grid .digislide p,
.dma-brokers__grid .digislide strong,
.dma-brokers__grid .digislide .fa {
    color: var(--navy) !important;
}

/* =============================================================================
   INQUIRY SECTION (Section 8) — full-width single column
   ============================================================================= */
.dma-inquiry .container--narrow {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
}
.dma-inquiry__head {
    margin: 0 0 48px;
}
.dma-inquiry__form {
    background: #FFFFFF;
    border: 1px solid rgba(14,27,42,0.08);
    border-radius: 6px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(14,27,42,0.06);
    overflow: hidden;
}
/* The Typeform shortcode renders an iframe — let it fill the wrapper */
.dma-inquiry__form iframe,
.dma-inquiry__form .lazy-typeform {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 540px;
    border: 0 !important;
    display: block !important;
}
/* In-house mo_inquiry form: dark/full-bleed, so drop the white card padding and
   let it fill a clean rounded frame. (Scoped so the inline schema <script> isn't
   forced to 540px like the old `> *` rule did.) */
.dma-inquiry__form--moiq {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(14,27,42,0.18);
}
.dma-inquiry__form--moiq .mo-inquiry {
    width: 100%;
    min-height: 560px;
    display: block;
}
@media (max-width: 768px) {
    .dma-inquiry .container--narrow { padding: 0 18px; }
    .dma-inquiry__head { margin-bottom: 32px; }
    .dma-inquiry__form { padding: 12px; }
    .dma-inquiry__form--moiq { padding: 0; }
    .dma-inquiry__form iframe { min-height: 480px; }
}

/* Lightest surface — near-white, used for brokers section to lift it
   above the surface-ivory section above. */
.surface-light { background: #FAFAF8; }

/* =============================================================================
   PRESS STRIP — "AS SEEN ON" with laurel branches + real CBS/FOX/NBC logos
   (Logos and laurel are flat PNG/SVG files extracted from the BrandPush trust
   badge on dmayachting.com — see parts/press-strip.php.)
   ============================================================================= */
.dma-press {
    padding: 28px 0;
}
.dma-press__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center !important;
}
.dma-press__title {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--navy);
    font-weight: 600;
    margin: 0;
}
.dma-press__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 0;
    width: 100%;
    max-width: 720px;
}
.dma-press__laurel {
    height: 110px;
    width: auto;
    opacity: 0.25;
    flex: 0 0 auto;
}
.dma-press__laurel--right {
    transform: scaleX(-1);
}
.dma-press__logos {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto;
    max-width: 460px;
}
.dma-press__logo {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 70px;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}
.dma-press__logo--fox {
    /* FOX wordmark sits visually higher than CBS/NBC stacks; nudge down. */
    margin-top: 8px;
}
.dma-press__suffix {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--txt-3, #7C8493);
    margin: 0;
}

/* Mobile press strip */
@media (max-width: 768px) {
    .dma-press { padding: 40px 0; }
    .dma-press__row { gap: 18px; }
    .dma-press__laurel { height: 90px; }
    .dma-press__logo { max-width: 70px; max-height: 50px; }
}
@media (max-width: 480px) {
    .dma-press__laurel { display: none; }
    .dma-press__logos { max-width: 320px; }
    .dma-press__logo { max-width: 60px; }
}

/* =============================================================================
   OVERRIDES — defeat dma_mo/dma.css ID-specificity gold borders, and fix
   yacht-grid spacing (cards live inside an intermediate .row, so gap must be
   applied there, not on .listitempage).
   ============================================================================= */

/* Kill the gold ring on every filter input — beats #filters input (1,0,1)
   with #filters.mo_filters ... (1,1,1+). */
.dma-landing #filters.mo_filters input,
.dma-landing #filters.mo_filters input:hover,
.dma-landing #filters.mo_filters input:focus,
.dma-landing #filters.mo_filters input:focus-visible,
.dma-landing #filters.mo_filters input:invalid,
.dma-landing #filters.mo_filters input:required,
.dma-landing #filters.mo_filters select,
.dma-landing #filters.mo_filters .input-group,
.dma-landing #filters.mo_filters .input-group:hover,
.dma-landing #filters.mo_filters .input-group:focus-within,
.dma-landing #filters.mo_filters .dropdown-toggle,
.dma-landing #filters.mo_filters .dropdown-toggle:hover,
.dma-landing #filters.mo_filters .dropdown-toggle:focus,
.dma-landing #filters.mo_filters .dropdown-toggle:focus-visible {
    border-color: var(--rail-rule-2, rgba(239,231,214,0.18)) !important;
    outline: 0 !important;
    box-shadow: none !important;
}
/* The .input-number children get borders from the cascade as well; flatten. */
.dma-landing #filters.mo_filters .input-group .input-number,
.dma-landing #filters.mo_filters .input-group .plusminus,
.dma-landing #filters.mo_filters .input-group .input-number:hover,
.dma-landing #filters.mo_filters .input-group .input-number:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
/* Pill checkboxes (Jetski/Jacuzzi/etc.) — kill gold hover ring */
.dma-landing #filters.mo_filters .checkbox,
.dma-landing #filters.mo_filters .checkbox:hover,
.dma-landing #filters.mo_filters .checkbox.devmodex,
.dma-landing #filters.mo_filters .checkbox.devmodex:hover {
    border-color: var(--rail-rule-2, rgba(239,231,214,0.18)) !important;
    box-shadow: none !important;
}

/* Yacht grid lives inside .listitempage > .row > .listing_wrapper. The .row
   is what actually holds the cards as flex children — so gap goes here. */
.dma-landing .listitempage > .row,
.dma-landing .firstx > .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 36px !important;
    margin: 0 !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
    width: 100% !important;
}
.dma-landing .listitempage > .row > .listing_wrapper,
.dma-landing .firstx > .row > .listing_wrapper {
    flex: 1 1 calc(33.333% - 24px) !important;
    max-width: calc(33.333% - 24px) !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
@media (max-width: 1199px) {
    .dma-landing .listitempage > .row > .listing_wrapper,
    .dma-landing .firstx > .row > .listing_wrapper {
        flex: 1 1 calc(50% - 18px) !important;
        max-width: calc(50% - 18px) !important;
    }
}
@media (max-width: 600px) {
    .dma-landing .listitempage > .row > .listing_wrapper,
    .dma-landing .firstx > .row > .listing_wrapper {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* =============================================================================
   CHIP STRIP — tighten the gap above the "Unlock more" button, and make sure
   the strip renders on tablet/phone.
   ============================================================================= */

/* Kill the bottom margin/padding on the chip strip and trim the divider band
   below so the chips sit close to the next region. */
.dma-landing .mo_quick_pricerange {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 0 !important;
}
.dma-landing .mo_results > .col-md-12 > .col {
    padding: 0 !important;
    margin: 0 !important;
}
.dma-landing #mo_ajax_container > .col.text-center {
    padding: 12px 0 !important;
    margin: 14px 0 18px !important;
    border-top: 1px solid var(--xp-rule) !important;
    border-bottom: 1px solid var(--xp-rule) !important;
}

/* Mobile/tablet: ensure the chip strip is visible (the desktop filter rail is
   moved into the offcanvas drawer by JS, so .mo_results becomes the first
   thing in the column). Make the strip wrap and breathe. */
@media (max-width: 991px) {
    .dma-landing .mo_quick_pricerange,
    .dma-landing .mo_results,
    .dma-landing .mo_results > .col-md-12,
    .dma-landing .mo_results > .col-md-12 > .col {
        display: block !important;
    }
    .dma-landing .mo_quick_pricerange {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 0 12px !important;
        overflow: visible !important;
    }
    .dma-landing .mo_quick_pricerange > .col-md-12 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .dma-landing .mo_quick_pricerange .mo_pricerange_btn,
    .dma-landing .mo_quick_pricerange .btn {
        flex: 0 0 auto !important;
    }
}

/* Hide price-chip strip + "Unlock more" dock pagination on tablet/phone */
@media (max-width: 991px) {
    .dma-landing .mo_quick_pricerange,
    .dma-landing .mo_results > .col-md-12:has(.mo_quick_pricerange),
    .dma-landing #mo_ajax_container > .col.text-center,
    .dma-landing .previousdock,
    .dma-landing .nextdock {
        display: none !important;
    }
}

/* =============================================================================
   CREW SECTION — horizontal main-info stat strip + per-member cards
   ============================================================================= */

/* Main info: horizontal row of label/value cells */
.dma-crew-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    margin: 0 0 56px;
    padding: 0;
    border-top: 1px solid rgba(20,32,46,0.12);
    border-bottom: 1px solid rgba(20,32,46,0.12);
}
.dma-crew-stats__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    border-right: 1px solid rgba(20,32,46,0.08);
}
.dma-crew-stats__item:last-child { border-right: 0; }
.dma-crew-stats__item dt {
    margin: 0;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-text);
}
.dma-crew-stats__item dd {
    margin: 0;
    font-family: var(--serif);
    font-size: 18px;
    line-height: 1.3;
    color: var(--txt);
}

/* Per-member crew cards — full-width grid */
.dma-crew-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 0;
}
@media (max-width: 1100px) {
    .dma-crew-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .dma-crew-grid { grid-template-columns: 1fr; gap: 20px; }
    .dma-crew-stats { grid-template-columns: repeat(2, 1fr); }
    .dma-crew-stats__item { padding: 16px 18px; }
    .dma-crew-stats__item:nth-child(2n) { border-right: 0; }
}

.dma-crew-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 26px;
    background: var(--ivory, #FBF8F2);
    border: 1px solid rgba(20,32,46,0.10);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(14,27,42,0.04), 0 8px 24px rgba(14,27,42,0.04);
}
/* Per-member photo as a compact avatar inside the header — keeps cards with
   and without photos visually consistent (header height matches the avatar
   either way, since name + position naturally fill the same space). */
.dma-crew-card__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(20,32,46,0.10);
}
.dma-crew-card__avatar {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    overflow: hidden;
    cursor: zoom-in;
}
.dma-crew-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dma-crew-card__head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.dma-crew-card__name {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
    color: var(--txt);
}
.dma-crew-card__position {
    margin: 0;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-text);
}
.dma-crew-card__meta {
    margin: 0;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--txt-2);
    letter-spacing: 0.02em;
}
.dma-crew-card__bio {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--txt);
}
.dma-crew-card__previous {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 4px 0 0;
    padding-top: 12px;
    border-top: 1px dashed rgba(20,32,46,0.12);
    font-family: var(--sans);
    font-size: 12px;
    color: var(--txt-2);
    line-height: 1.5;
}
.dma-crew-card__previous .caption {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-text);
}

/* Single-bio fallback uses the full container width */
.dma-crew-bio {
    max-width: 78ch;
    margin: 0;
}

/* Crew grid: hide extras when collapsed; toggle button */
.dma-crew-grid--collapsed .dma-crew-card--extra { display: none !important; }

/* Leftover thumbnail strip (extras that didn't bind to any card) sits as a
   sibling AFTER the cards grid + toggle button. When the grid is collapsed
   the toggle reads "Show all N crew members"; the strip belongs to the
   expanded view, so hide it whenever the preceding grid is collapsed. The
   general sibling combinator (~) matches any subsequent sibling. */
.dma-crew-grid--collapsed ~ .dma-crew-photos--strip-only { display: none; }

.dma-crew-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 32px auto 0;
    padding: 14px 28px;
    background: transparent;
    color: var(--txt);
    border: 1px solid rgba(20,32,46,0.20);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.dma-crew-toggle:hover {
    background: var(--txt);
    color: var(--ivory, #FBF8F2);
    border-color: var(--txt);
}
.dma-crew-toggle__icon {
    display: inline-block;
    transition: transform 220ms ease;
}
.dma-crew-toggle--open .dma-crew-toggle__icon { transform: rotate(180deg); }

/* Center the toggle below the grid */
#crew .container { text-align: left; }
#crew .dma-crew-toggle { display: flex; margin-left: auto; margin-right: auto; width: max-content; }

/* =============================================================================
   Crew photos (group hero + thumbnail strip) — shared across both display modes
   ============================================================================= */
.dma-crew-photos {
    margin: 32px 0;
}
.dma-crew-photos__hero {
    display: block;
    padding: 0;
    background: none;
    border: 0;
    cursor: zoom-in;
    width: 100%;
}
.dma-crew-photos__hero img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(14,27,42,0.06), 0 12px 32px rgba(14,27,42,0.06);
}
.dma-crew-photos--stacked .dma-crew-photos__hero {
    margin: 0 auto;
    max-width: 720px;
}
.dma-crew-photos__hero--side img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.dma-crew-photos__strip {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.dma-crew-photos__thumb {
    margin: 0;
    width: 180px;
    flex: 0 0 auto;
}
.dma-crew-photos__thumb-btn {
    display: block;
    padding: 0;
    background: none;
    border: 0;
    cursor: zoom-in;
    width: 100%;
}
.dma-crew-photos__thumb-btn img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}
.dma-crew-photos__caption {
    margin: 8px 0 0;
    text-align: center;
    color: var(--txt-2);
    font-size: 11px;
}
@media (max-width: 640px) {
    .dma-crew-photos__thumb { width: calc(50% - 8px); }
}

/* =============================================================================
   Crew bio-only fallback — reading column, side-by-side w/ photo, read-more
   (Overrides the legacy .dma-crew-bio rule above which capped width at 78ch.)
   ============================================================================= */
.dma-crew-bio {
    max-width: none;
    margin-top: 32px;
}
.dma-crew-bio__main { display: block; }
.dma-crew-bio__text-col {
    /* No max-width cap — the bio fills its container (matches the accommodation
       description treatment). Side-by-side mode still constrains it via the
       grid track below. */
}
.dma-crew-bio__text {
    /* Override .body's 60ch cap so the paragraph isn't visibly clamped. */
    max-width: none;
}

@media (min-width: 900px) {
    .dma-crew-bio--with-photo .dma-crew-bio__main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 40px;
        align-items: start;
    }
}

.dma-crew-bio__content { position: relative; }
.dma-crew-bio__content--clamped {
    max-height: var(--dma-crew-bio-clamp, 7.5em);
    overflow: hidden;
}
@media (min-width: 900px) {
    .dma-crew-bio--with-photo .dma-crew-bio__content--clamped {
        --dma-crew-bio-clamp: 14em;
    }
}
.dma-crew-bio__content--clamped::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3em;
    /* Matches surface-ivory (--ivory: #F4F6F8 = rgb(244, 246, 248)) */
    background: linear-gradient(to bottom,
        rgba(244, 246, 248, 0) 0%,
        rgba(244, 246, 248, 1) 100%);
    pointer-events: none;
}
.dma-crew-bio__text {
    margin: 0;
    line-height: 1.7;
    white-space: pre-line;
}
.dma-crew-bio__toggle {
    margin-top: 16px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid rgba(20,32,46,0.20);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dma-crew-bio__toggle:hover {
    border-color: var(--gold-deep, #9A7B4D);
}
.dma-crew-bio__toggle-icon { transition: transform 0.2s ease; }
.dma-crew-bio__toggle--open .dma-crew-bio__toggle-icon { transform: rotate(180deg); }

.dma-crew-bio__photo-col { margin-top: 24px; }
@media (min-width: 900px) {
    .dma-crew-bio__photo-col { margin-top: 0; }
}

/* =============================================================================
   CHARTER PRICE — full-width inline table layout (no modal)
   ============================================================================= */

/* Section header: title left, summary right */
.dma-price-header {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 64px;
    align-items: end;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(20,32,46,0.10);
}
.dma-price-header__summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dma-price-header__lead {
    margin: 0;
    max-width: 28ch;
    line-height: 1.15;
}
.dma-price-header__terms {
    margin: 0;
    color: var(--txt-2);
    line-height: 1.6;
    letter-spacing: 0.18em;
}

/* Full-width price table */
.dma-price-table--full {
    margin-top: 0;
    width: 100%;
}
.dma-price-table__footnote {
    margin: 18px 0 0;
    color: var(--txt-3);
    font-size: 10px;
    line-height: 1.6;
}

/* Explanatory notes block (was the right column in the old two-col layout) */
.dma-price-notes {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 40px 0 0;
    max-width: 78ch;
}

/* Buttons row */
.dma-price-actions {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 880px) {
    .dma-price-header {
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: flex-start;
    }
}

/* =============================================================================
   CRUISING AREAS — image-card grid (Summer / Winter), inspired by old theme
   ============================================================================= */
/* Two-column layout: Summer left, Winter right */
.dma-cruising-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}
.dma-cruising-grid > .dma-season + .dma-season { margin-top: 0; }
@media (max-width: 768px) {
    .dma-cruising-grid { grid-template-columns: 1fr; gap: 40px; }
}

.dma-season + .dma-season { margin-top: 56px; }
h3.dma-season__title,
.dma-season__title {
    display: block !important;
    margin: 0 0 28px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(20,32,46,0.12) !important;
    font-family: var(--mono) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: var(--gold-text) !important;
}
.dma-season__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 480px) { .dma-season__grid { grid-template-columns: repeat(2, 1fr); } }

.dma-season__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: var(--txt);
    transition: transform 320ms ease;
}
a.dma-season__card:hover { transform: translateY(-4px); }
a.dma-season__card:hover .dma-season__media img { transform: scale(1.04); }
a.dma-season__card:hover .dma-season__label { color: var(--gold-text); }

.dma-season__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(14,27,42,0.05);
    box-shadow: 0 1px 2px rgba(14,27,42,0.06), 0 6px 18px rgba(14,27,42,0.06);
}
.dma-season__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms ease;
}
.dma-season__label {
    text-align: center;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.3;
    color: var(--txt);
    transition: color 200ms ease;
}

/* =============================================================================
   MOBILE FILTER DRAWER — wrapper reset only
   When #filters is relocated into #dma-filter-target, ensure the .mo_filters
   wrapper itself has no padding/border/background. The inner plugin UI is
   hidden by mariner-filter.css; Mariner provides all visual styling.
   ============================================================================= */
#dma-filter-target .mo_filters {
    background: transparent !important;
    color: var(--txt) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
    position: static !important;
}
#dma-filter-target .mo_filters::before,
#dma-filter-target .mo_filters::after {
    display: none !important;
    content: none !important;
}

/* =============================================================================
   THEMED MODAL — replaces Bootstrap's white modal with the page palette
   ============================================================================= */
.dma-modal .modal-content {
    background: var(--ivory) !important;
    color: var(--txt) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 60px rgba(14,27,42,0.25) !important;
}
.dma-modal .modal-header {
    background: var(--ivory-2) !important;
    color: var(--txt) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    padding: 22px 28px !important;
    align-items: center !important;
}
.dma-modal .modal-title {
    font-family: var(--serif) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    color: var(--navy) !important;
    margin: 0 !important;
}
.dma-modal .modal-body {
    background: var(--ivory) !important;
    color: var(--txt-2) !important;
    padding: 28px 28px 32px !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}
.dma-modal .modal-body p { color: var(--txt-2) !important; }
.dma-modal .btn-close {
    opacity: 0.7;
    transition: opacity 200ms ease;
    /* Bootstrap btn-close uses a black SVG mask; keep default but tone down */
    filter: none;
}
.dma-modal .btn-close:hover { opacity: 1; }
/* Backdrop tint */
.modal-backdrop.show { background: var(--navy); opacity: 0.65 !important; }


/* =============================================================================
   YACHT-SINGLE STICKY INQUIRY SIDEBAR — desktop ≥1280px only

   Layout: .dma-yacht-flow is a relative wrapper that contains the form
   (first child) AND every content section between the section nav and the
   footer. The form uses `position: sticky` so it tracks the viewport while
   scrolling within the wrap, then naturally stops when the wrap's bottom
   passes the viewport (i.e. when the footer is reached). No JS needed.
   ============================================================================= */
.dma-yacht-flow {
    position: relative;
}
.dma-yacht-sticky {
    position: sticky;
    top: 90px;                            /* below the sticky section nav (~60px) + breathing room */
    float: right;                         /* anchor to the right of the wrap */
    width: clamp(300px, 17vw, 400px);
    margin-right: 20px;                   /* near viewport right edge */
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: 48px;                    /* gap from content column */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    z-index: 25;                          /* below modal/lightbox (≥1000), below chat widget */
    display: none;                        /* hidden by default; enabled via media query */
    scrollbar-width: thin;
}
.dma-yacht-sticky__inner {
    background: var(--ivory, #FBF8F2);
    border: 1px solid rgba(20,32,46,0.10);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(14,27,42,0.06), 0 16px 40px rgba(14,27,42,0.10);
    overflow: hidden;
}
.dma-yacht-sticky__head {
    background: var(--navy);
    color: var(--ivory);
    padding: 16px 16px 14px;
    border-bottom: 1px solid rgba(239,231,214,0.15);
}
.dma-yacht-sticky__title {
    margin: 0 0 10px;
    font-size: clamp(20px, 1.15vw, 28px);
    line-height: 1.15;
    color: var(--ivory);
    font-weight: 300;
    letter-spacing: 0.02em;
}
.dma-yacht-sticky__terms {
    margin: 0 0 14px;
    color: rgba(239,231,214,0.7);
    font-size: clamp(10px, 0.7vw, 13px);
}
.dma-yacht-sticky__price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 4px 0;
    gap: 12px;
}
.dma-yacht-sticky__price .caption {
    color: rgba(239,231,214,0.7);
    font-size: clamp(10px, 0.7vw, 13px);
}
.dma-yacht-sticky__price .serif {
    font-size: clamp(17px, 0.95vw, 22px);
    color: var(--ivory);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
.dma-yacht-sticky__price--high .serif {
    font-size: clamp(14px, 0.9vw, 17px);
    color: rgba(239,231,214,0.85);
}
.dma-yacht-sticky__form {
    padding: 14px 16px 16px;
}
/* DMA Forms / Gravity Forms styling tweaks inside the sticky sidebar so the
   embedded form inherits the new theme's restrained look rather than the
   default GF chrome. */
.dma-yacht-sticky__form .gform_wrapper,
.dma-yacht-sticky__form .dma_form_wrapper {
    margin: 0;
}
.dma-yacht-sticky__form .gform_wrapper .gform_fields,
.dma-yacht-sticky__form .dma_form .dma_form_page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dma-yacht-sticky__form .gform_wrapper input[type="text"],
.dma-yacht-sticky__form .gform_wrapper input[type="email"],
.dma-yacht-sticky__form .gform_wrapper input[type="tel"],
.dma-yacht-sticky__form .gform_wrapper input[type="number"],
.dma-yacht-sticky__form .gform_wrapper input[type="date"],
.dma-yacht-sticky__form .gform_wrapper textarea,
.dma-yacht-sticky__form .dma_form input[type="text"],
.dma-yacht-sticky__form .dma_form input[type="email"],
.dma-yacht-sticky__form .dma_form input[type="tel"],
.dma-yacht-sticky__form .dma_form input[type="number"],
.dma-yacht-sticky__form .dma_form input[type="date"],
.dma-yacht-sticky__form .dma_form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(20,32,46,0.20);
    border-radius: 4px;
    font-size: 14px;
    font-family: var(--sans);
    background: #fff;
}
.dma-yacht-sticky__form label,
.dma-yacht-sticky__form .gfield_label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--txt-2);
    margin-bottom: 4px;
    display: block;
}
.dma-yacht-sticky__form .gform_footer,
.dma-yacht-sticky__form .dma_form_submit-row {
    margin-top: 14px;
    padding: 0;
}
.dma-yacht-sticky__form button[type="submit"],
.dma-yacht-sticky__form input[type="submit"] {
    width: 100%;
    padding: 12px 20px;
    background: var(--gold-deep, #9A7B4D);
    color: var(--ivory);
    border: 0;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 200ms ease;
}
.dma-yacht-sticky__form button[type="submit"]:hover,
.dma-yacht-sticky__form input[type="submit"]:hover {
    background: var(--navy);
}
/* Hide form's leftover GF chrome — anti-spam, ginput_container labels we don't
   need, etc. Conservative — only the visually noisy bits. */
.dma-yacht-sticky__form .gform_validation_container,
.dma-yacht-sticky__form .gform_anti_honeypot { display: none !important; }

/* Show on desktops wide enough to fit a 340px sidebar + content beside it.
   Logged-in users with admin bar: nudge top so we sit below the bar. */
@media (min-width: 1280px) {
    .dma-yacht-sticky { display: block; }

    /* Carve out room on the right of every CONTENT section so the form sits in
       its own column instead of overlapping yacht text. Hero, sticky section
       nav, and footer keep their full bleed — only content sections shrink. */
    body.single-estate_property .dma-section .container,
    body.single-estate_property .dma-section--md .container,
    body.single-estate_property .dma-section--sm .container,
    body.single-estate_property .dma-section--lg .container,
    body.single-estate_property #charter-price .container,
    body.single-estate_property #reviews .container,
    body.single-yacht .dma-section .container,
    body.single-yacht .dma-section--md .container,
    body.single-yacht .dma-section--sm .container,
    body.single-yacht .dma-section--lg .container,
    body.single-yacht #charter-price .container,
    body.single-yacht #reviews .container {
        /* Asymmetric layout for yacht-single pages: container goes full-bleed
           and uses padding to carve the layout. LEFT edge mirrors a centered
           1440px container (at 1920 → 296px gutter — same as the rest of the
           site's content alignment), capped at 600px on ultrawide. RIGHT edge
           reserves space for the sticky inquiry form column. */
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: max(56px, min(calc((100vw - 1440px) / 2 + 56px), 600px));
        padding-right: clamp(360px, 22vw, 420px);
    }
}
.admin-bar .dma-yacht-sticky { top: 122px; }   /* 90 + 32 admin bar */
@media (max-width: 782px) {
    .admin-bar .dma-yacht-sticky { top: 136px; }   /* admin bar is 46px on small WP screens */
}

/* =============================================================================
   BROKER GRID — "EDITORIAL CREW ROSTER"
   Final cascade override. Replaces accumulated patchwork above by sheer
   specificity (body-prefix) + position (last in file).
   ============================================================================= */

/* Reset the counter on the grid so we can number each card N°01 / 22 */
body .dma-brokers__grid { counter-reset: roster; border-top: 0 !important; }

body .dma-brokers__grid > .row,
body .dma-brokers__grid .row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 64px 48px !important;
  margin: 0 !important;
  padding: 24px 0 0 !important;
}

@media (max-width: 1100px) {
  body .dma-brokers__grid > .row,
  body .dma-brokers__grid .row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 56px 36px !important;
  }
}
@media (max-width: 820px) {
  body .dma-brokers__grid > .row,
  body .dma-brokers__grid .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 48px 28px !important;
  }
}
@media (max-width: 520px) {
  body .dma-brokers__grid > .row,
  body .dma-brokers__grid .row {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }
}

/* Wipe all the old card chrome and column borders. Each card is now naked. */
body .dma-brokers__grid .col-md-4,
body .dma-brokers__grid .digislide,
body .dma-brokers__grid .col {
  counter-increment: roster;
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transition: transform 500ms cubic-bezier(.2,.7,.2,1) !important;
}
body .dma-brokers__grid .digislide:hover { transform: translateY(-4px) !important; }

/* The inner .container Bootstrap wrap — strip every default to zero */
body .dma-brokers__grid .col-md-4 > .container,
body .dma-brokers__grid .digislide > .container,
body .dma-brokers__grid .col > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body .dma-brokers__grid .card,
body .dma-brokers__grid .digislide .card {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  position: relative;
}

/* Editorial number tag: N°01 — counters generate 01..22 */
body .dma-brokers__grid .digislide .card::before {
  content: "N° " counter(roster, decimal-leading-zero) " / 22";
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ivory, #F6F1E7);
  background: rgba(14,27,42,0.55);
  backdrop-filter: blur(4px);
  padding: 6px 10px;
  pointer-events: none;
}

/* Square portrait, framed, full-bleed inside its column. Reset any inline px height. */
body .dma-brokers__grid .card img,
body .dma-brokers__grid .digislide img,
body .dma-brokers__grid .digislide .card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  border-radius: 0 !important;
  filter: none !important;
  transform: scale(1);
  transition: transform 800ms cubic-bezier(.2,.7,.2,1) !important;
}
body .dma-brokers__grid .digislide:hover img { transform: scale(1.035) !important; }

/* The card-body sits below the photo. Drop Bootstrap padding, add our rhythm. */
body .dma-brokers__grid .card-body {
  padding: 20px 0 0 !important;
  text-align: left !important;
  background: transparent !important;
}

/* Editorial divider line above the name */
body .dma-brokers__grid .card-body::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold, #B89968);
  margin-bottom: 14px;
  transition: width 500ms cubic-bezier(.2,.7,.2,1);
}
body .dma-brokers__grid .digislide:hover .card-body::before { width: 64px; }

/* Name — serif, generous size */
body .dma-brokers__grid .card-title {
  font-family: var(--serif, "Cormorant Garamond", "Playfair Display", Georgia, serif) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em !important;
  color: var(--navy, #0E1B2A) !important;
  margin: 0 0 6px !important;
  text-align: left !important;
  text-transform: none !important;
}

/* Role line — mono caps eyebrow */
body .dma-brokers__grid .text-muted,
body .dma-brokers__grid .card-body h6 {
  font-family: var(--mono, ui-monospace, Menlo, monospace) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(14,27,42,0.55) !important;
  margin: 0 0 18px !important;
  text-align: left !important;
}

/* Kill the bootstrap <hr class="w-50"> entirely */
body .dma-brokers__grid hr { display: none !important; }

/* Center-flex wrapper that mo_render_broker_card injects — left align it */
body .dma-brokers__grid .d-flex {
  align-items: stretch !important;
  text-align: left !important;
}

/* IMPORTANT: the plugin emits <p class="card-text"><strong><p>…</p><p>…</p></strong></p>.
   The browser cannot nest <p> inside <p>, so it auto-closes the outer .card-text,
   leaving the email + WhatsApp + iMessage + phone <p> tags as ORPHAN SIBLINGS of
   .card-text under .card-body > .d-flex > div. All our text styling must target
   that flat structure, not .card-text. */
body .dma-brokers__grid .card-body .d-flex,
body .dma-brokers__grid .card-body .d-flex *,
body .dma-brokers__grid .card-body .d-flex > div > p,
body .dma-brokers__grid .card-body .d-flex > div > p *,
body .dma-brokers__grid .card-text,
body .dma-brokers__grid .card-text * {
  font-family: var(--sans, "Inter", system-ui, -apple-system, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
  color: var(--navy, #0E1B2A) !important;
  text-transform: none !important;   /* kill any inherited uppercase */
  text-align: left !important;
}
body .dma-brokers__grid .card-body .d-flex {
  display: block !important;     /* no flex centering — left-aligned column */
  margin: 0 0 16px !important;
  padding: 0 !important;
  gap: 0 !important;
}
body .dma-brokers__grid .card-body .d-flex > div {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body .dma-brokers__grid .card-body .d-flex > div > p {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
body .dma-brokers__grid .card-body .d-flex > div > p:last-child { margin-bottom: 0 !important; }
body .dma-brokers__grid .card-body .d-flex > div > p:empty { display: none !important; }
body .dma-brokers__grid .card-text { display: none !important; }   /* empty wrapper, nuke it */
body .dma-brokers__grid .card-body .d-flex br { display: none !important; }

/* Links: each contact on its own row. Anchor is a block-level flex container
   sized to its content (so the underline tracks the text, not the whole row).
   inline-flex would collapse siblings onto one line — we want a vertical stack. */
body .dma-brokers__grid .card-body .d-flex a,
body .dma-brokers__grid .card-body .d-flex > div > p a {
  color: var(--navy, #0E1B2A) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(14,27,42,0.18) !important;
  padding-bottom: 1px;
  transition: border-color 250ms ease, color 250ms ease !important;
  display: flex !important;            /* block-level → each anchor on its own line */
  width: fit-content !important;       /* underline only spans the link text + icon */
  max-width: 100% !important;
  align-items: center !important;
  text-transform: none !important;
  margin: 0 0 10px 0 !important;       /* vertical rhythm between rows */
}
body .dma-brokers__grid .card-body .d-flex a:last-child { margin-bottom: 0 !important; }
body .dma-brokers__grid .card-body .d-flex a:hover {
  color: var(--gold-text) !important;
  border-bottom-color: var(--gold-deep, #8C6E3F) !important;
}

/* The phone line is a text node (no anchor) inside the same <p> as the
   WhatsApp/iMessage anchors. After the block anchors render, the phone <i>
   + number sit on a new anonymous line — force a visible row gap above. */
body .dma-brokers__grid .card-body .d-flex > div > p > .fa-phone,
body .dma-brokers__grid .card-body .d-flex > div > p > .fa {
  margin-top: 10px !important;        /* breathing room above the phone row */
}

/* Hide the broken /img/whatsapp18.png and /img/imessage18.png — they end up
   inside .card-body (or inside an orphan <a> sibling of .card-text). Hide all
   imgs in .card-body; the portrait is a direct child of .card, not .card-body. */
body .dma-brokers__grid .card-body img,
body .dma-brokers__grid .card-body .d-flex img,
body .dma-brokers__grid img[src*="imessage18"],
body .dma-brokers__grid img[src*="whatsapp18"] {
  display: none !important;
}

/* Replacement SVG icons via ::before on each link, by href pattern.
   Selectors now scoped to .card-body to catch the orphan anchors.
   --- WhatsApp --- */
body .dma-brokers__grid .card-body a[href*="whatsapp"]::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.05 4.91A9.93 9.93 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.74.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01zM12 20.15h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.16 8.16 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24 2.2 0 4.27.86 5.83 2.41 1.56 1.55 2.41 3.63 2.41 5.83 0 4.54-3.7 8.24-8.24 8.24zm4.52-6.16c-.25-.12-1.47-.72-1.7-.8-.23-.08-.4-.12-.56.12-.16.25-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.38-1.72-.14-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01-.16 0-.43.06-.66.31-.23.25-.86.84-.86 2.05 0 1.21.88 2.38 1 2.55.12.16 1.74 2.66 4.22 3.73.59.25 1.05.41 1.41.52.59.19 1.13.16 1.55.1.47-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.14-1.18-.06-.1-.23-.16-.48-.28z'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.05 4.91A9.93 9.93 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.74.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01zM12 20.15h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.16 8.16 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24 2.2 0 4.27.86 5.83 2.41 1.56 1.55 2.41 3.63 2.41 5.83 0 4.54-3.7 8.24-8.24 8.24zm4.52-6.16c-.25-.12-1.47-.72-1.7-.8-.23-.08-.4-.12-.56.12-.16.25-.64.8-.78.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.38-1.72-.14-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01-.16 0-.43.06-.66.31-.23.25-.86.84-.86 2.05 0 1.21.88 2.38 1 2.55.12.16 1.74 2.66 4.22 3.73.59.25 1.05.41 1.41.52.59.19 1.13.16 1.55.1.47-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.14-1.18-.06-.1-.23-.16-.48-.28z'/></svg>") no-repeat center/contain;
}

/* --- iMessage --- */
body .dma-brokers__grid .card-body a[href^="imessage"]::before,
body .dma-brokers__grid .card-body a[href^="sms"]::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3C6.48 3 2 6.86 2 11.6c0 2.4 1.15 4.55 3 6.08V22l3.55-1.95c1.07.32 2.22.5 3.45.5 5.52 0 10-3.86 10-8.6S17.52 3 12 3z'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3C6.48 3 2 6.86 2 11.6c0 2.4 1.15 4.55 3 6.08V22l3.55-1.95c1.07.32 2.22.5 3.45.5 5.52 0 10-3.86 10-8.6S17.52 3 12 3z'/></svg>") no-repeat center/contain;
}

/* --- Email --- */
body .dma-brokers__grid .card-body a[href^="mailto:"]::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><rect x='3' y='5' width='18' height='14' rx='1'/><polyline points='3,7 12,13 21,7'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><rect x='3' y='5' width='18' height='14' rx='1'/><polyline points='3,7 12,13 21,7'/></svg>") no-repeat center/contain;
}

/* Phone icon: replace the broken .fa-phone with an inline SVG mask. The .fa
   element ends up inside the orphan <p> under .card-body, not .card-text. */
body .dma-brokers__grid .card-body .fa,
body .dma-brokers__grid .card-body .fas,
body .dma-brokers__grid .card-body .fa-phone,
body .dma-brokers__grid .card .fa-phone {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  margin-right: 8px !important;
  vertical-align: -2px !important;
  background-color: currentColor !important;
  color: var(--navy, #0E1B2A) !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2c.28-.28.69-.36 1.05-.24 1.16.39 2.41.6 3.7.6.55 0 1 .45 1 1V20c0 .55-.45 1-1 1A17 17 0 0 1 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.29.21 2.54.6 3.7.12.36.04.77-.24 1.05l-2.24 2.04z'/></svg>") no-repeat center/contain !important;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2c.28-.28.69-.36 1.05-.24 1.16.39 2.41.6 3.7.6.55 0 1 .45 1 1V20c0 .55-.45 1-1 1A17 17 0 0 1 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.29.21 2.54.6 3.7.12.36.04.77-.24 1.05l-2.24 2.04z'/></svg>") no-repeat center/contain !important;
  font: 0/0 a !important;        /* hide any glyph that FA might still render */
}

/* The phone <p> contains "<i class='fa fa-phone'></i> +1 ..." — the text node
   after the icon should sit on the baseline cleanly. */
body .dma-brokers__grid .card-body p:has(.fa-phone) {
  display: block;
}

/* "See Bio" — convert the .btn-primary block into a refined underline arrow link */
body .dma-brokers__grid .btn-primary,
body .dma-brokers__grid a.btn-primary {
  display: inline-block !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  font-family: var(--mono, ui-monospace, Menlo, monospace) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--navy, #0E1B2A) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--navy, #0E1B2A) !important;
  border-radius: 0 !important;
  padding-bottom: 3px !important;
  transition: color 250ms ease, border-color 250ms ease, padding-right 350ms cubic-bezier(.2,.7,.2,1) !important;
  position: relative;
}
body .dma-brokers__grid .btn-primary::after,
body .dma-brokers__grid a.btn-primary::after {
  content: " →";
  display: inline-block;
  margin-left: 6px;
  transition: transform 350ms cubic-bezier(.2,.7,.2,1);
}
body .dma-brokers__grid .digislide:hover .btn-primary,
body .dma-brokers__grid .btn-primary:hover,
body .dma-brokers__grid a.btn-primary:hover {
  background: transparent !important;
  color: var(--gold-text) !important;
  border-bottom-color: var(--gold-deep, #8C6E3F) !important;
}
body .dma-brokers__grid .digislide:hover .btn-primary::after,
body .dma-brokers__grid .btn-primary:hover::after {
  transform: translateX(4px);
}

/* When the broker card has no contact info at all (e.g. Klara — no email/phone scraped),
   center the See Bio button so it doesn't sit awkwardly alone at the left edge. */
body .dma-brokers__grid .card-body:not(:has(.card-text)) {
  text-align: left;
}

/* =============================================================================
   RECENT PLACEMENTS — Sub-title polish ("Recently Chartered Yachts")
   ============================================================================= */
.dma-recent .dma-recent__subtitle {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: 11px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--gold-text) !important;
  opacity: 1 !important;
  margin-top: 18px !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.dma-recent .dma-recent__subtitle::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--gold, #B89968);
}

/* =============================================================================
   mo_inquiry Global Popup  (#mo-inquiry-popup)
   Triggered by the "Get Started" nav item; JS in dma-megamenu.js adds .is-open.
   ============================================================================= */
.mo-inquiry-popup {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .3s;
}
.mo-inquiry-popup.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Backdrop */
.mo-inquiry-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,18,30,.76);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease;
}
.mo-inquiry-popup.is-open .mo-inquiry-popup__backdrop {
  opacity: 1;
}

/* Inner container — slides up and fades in */
.mo-inquiry-popup__inner {
  position: relative;
  z-index: 1;
  width: min(96vw, 1160px);
  max-height: 94vh;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(10,18,30,.55);
  transform: translateY(28px) scale(.97);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.mo-inquiry-popup.is-open .mo-inquiry-popup__inner {
  transform: none;
  opacity: 1;
}

/* Close button — top-right corner */
.mo-inquiry-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(239,231,214,.8);
  transition: background .2s, color .2s, border-color .2s;
  padding: 0;
}
.mo-inquiry-popup__close:hover {
  background: rgba(200,169,106,.25);
  border-color: rgba(200,169,106,.4);
  color: var(--gold, #c8a96a);
}
.mo-inquiry-popup__close svg {
  display: block;
  flex-shrink: 0;
}

/* The mo-inquiry form fills the popup rounded container naturally */
.mo-inquiry-popup .mo-inquiry {
  border-radius: 16px;
  border: none;
  min-height: 600px;
}

/* =============================================================================
   BROKER CARDS — theme-native (dma_broker_cards), site-wide.
   The homepage carries a copy of these in dma-home.css; this block makes the
   cards work on pages that don't load dma-home.css (e.g. /about-us/).
   ============================================================================= */
.dma-brokers__grid--cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
  border-top: 0;
}
@media (max-width: 900px) {
  .dma-brokers__grid--cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dma-brokers__grid--cards { grid-template-columns: 1fr; }
}
.dma-broker-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 6px 20px rgba(0,0,0,0.05);
}
.dma-broker-card__photo { aspect-ratio: 1; overflow: hidden; }
.dma-broker-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.dma-broker-card__photo-placeholder { aspect-ratio: 1; background: var(--surface-stone, #e0ddd7); }
.dma-broker-card__body { padding: 20px 22px 24px; }
.dma-broker-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--navy, #0e1b2a);
}
.dma-broker-card__role {
  font-size: 0.8rem;
  color: var(--txt-3, #646e7c);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.dma-broker-card__bio {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--txt-2, #3d4554);
  margin-bottom: 14px;
}
.dma-broker-card__link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold-deep, #846a3a);
  text-decoration: none;
  letter-spacing: 0.03em;
}
.dma-broker-card__link:hover { text-decoration: underline; }

/* =============================================================================
   FOCUS-VISIBLE — site-wide keyboard focus indicator.
   Scoped to :focus-visible so mouse clicks don't paint outlines. Components
   with their own focus treatment (filters, gallery) keep theirs — this is the
   baseline for everything else (area pages, footer, nav, cards, buttons).
   ============================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--gold-deep, #846a3a);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Dark surfaces need the bright gold for contrast. */
.surface-navy a:focus-visible,
.surface-navy button:focus-visible,
.dma-footer a:focus-visible,
.dma-footer button:focus-visible,
.corsica-reviews a:focus-visible,
.dma-yachtslider a:focus-visible,
.dma-yachtslider button:focus-visible {
  outline-color: var(--gold, #c9a96a);
}

/* =============================================================================
   TYPOGRAPHY DEFENSE — mo_filter's mo_main css forces
   `h1..h6, .h1...h6 { font-family: Montserrat !important; font-weight: normal
   !important }` which bulldozes the theme's serif headings (and Montserrat
   ships only weight 400 with no italic, so <em> accents become synthesized
   obliques). Higher-specificity !important rules restore the design.
   The hero (.display) and subpage titles (.dma-page__title) intentionally
   stay Montserrat. ============================================================ */
body .h1,
body .h2 {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  letter-spacing: -0.018em !important;
}
body .v2-search__heading {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
}
/* Archive/page hero title: mo_filter's `h1 span { color:#000 !important }`
   blacked out the_archive_title()'s inner span on the navy band. */
body .dma-page__title,
body .dma-page__title span {
  color: var(--ivory) !important;
}
/* Archive cards: restore the serif card title mo_filter overrides, and kill
   the foreign h3/img margins that opened gaps inside the cards. */
body .dma-archive__title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}
body .dma-archive__media img { margin: 0 !important; }
body .dma-archive__date { margin: 0 !important; }

/* =============================================================================
   BROKER CARD — structured contacts (rendered by dma_broker_cards() from the
   parsed team_read content blob; replaces the raw <p>/<br> link soup whose
   icon images 404 outside production).
   ============================================================= */
.dma-broker-card__email {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--gold-deep, #846a3a);
  text-decoration: none;
  margin-bottom: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dma-broker-card__email:hover { text-decoration: underline; }
.dma-broker-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.dma-broker-card__chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--txt-2, #3d4554);
  text-decoration: none;
  border: 1px solid rgba(20, 32, 46, 0.18);
  border-radius: 999px;
  padding: 6px 14px;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.dma-broker-card__chip:hover {
  border-color: var(--gold-deep, #846a3a);
  color: var(--gold-deep, #846a3a);
  background: rgba(132, 106, 58, 0.06);
}

/* =============================================================================
   GLOBAL FORM SKIN — Gravity Forms (.gform_wrapper) + DMA Forms (.dma_form)
   Applies the new theme's restrained form look (the same design as the yacht
   sticky-sidebar form) to EVERY form instance site-wide: the yacht inquiry /
   sale modals (forms 7/14, dma-forms engine), the "What's your budget" page
   (form 6, GF), contact, posts, etc. Scoped strictly to the form wrappers so
   no other UI is affected. !important is used on contested props to win over
   Gravity Forms' bundled theme CSS. The narrower .dma-yacht-sticky__form rules
   above still layer sidebar-specific spacing on top.
   ============================================================================= */
.gform_wrapper,
.dma_form_wrapper { margin: 0; }

/* Field rows + spacing */
.gform_wrapper .gform_fields { display: flex; flex-direction: column; gap: 14px; }
.gform_wrapper .gfield { margin: 0; }
.dma_form .dma_form_page { display: flex; flex-direction: column; gap: 14px; }
.dma_form .dma_field { margin: 0; }

/* Labels — match dma-forms (.dma_form labels): Inter, uppercase, tracked, navy.
   Scoped to Gravity Forms only; dma-forms styles its own labels identically. */
.gform_wrapper .gfield_label {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.4px !important;
  text-transform: uppercase !important;
  color: rgb(14,27,42) !important;
  margin: 0 0 0.45rem !important;
  line-height: 1.2 !important;
  display: block;
}
.gform_wrapper .gfield_required { color: #c8a96a; }

/* Text inputs / select — match dma-forms tokens (44px, 6px, Inter 15px, warm
   hairline). Scoped to Gravity Forms only; dma-forms styles its own fields. */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper select {
  width: 100% !important;
  box-sizing: border-box !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid rgb(194,190,182) !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-family: var(--sans) !important;
  color: rgb(14,27,42) !important;
  background: #fff !important;
  background-image: none !important;
  line-height: 1.4;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.gform_wrapper textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 110px;
  padding: 10px 14px !important;
  border: 1px solid rgb(194,190,182) !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-family: var(--sans) !important;
  color: rgb(14,27,42) !important;
  background: #fff !important;
  resize: vertical;
  box-shadow: none !important;
}

/* Focus state — gold ring */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none;
  border-color: #c8a96a !important;
  box-shadow: 0 0 0 2px rgba(200,169,106,0.20) !important;
}

/* Radio / checkbox choices */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox { display: flex; flex-direction: column; gap: 8px; }
.gform_wrapper .gchoice { display: flex; align-items: center; gap: 8px; }
.gform_wrapper .gchoice label {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--navy);
  margin: 0 !important;
}

/* Buttons — submit + multi-page Next: gold-deep, mono caps, → navy on hover */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer,
.dma_form .dma_form_submit,
.dma_form .dma_form_pagination { margin-top: 16px; padding: 0; }
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_page_footer .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper button.gform_button,
.dma_form .dma_form_submit button,
.dma_form .dma_form_submit input[type="submit"],
.dma_form .dma_form_pagination button[data-dma-next],
.dma_form .dma_form_pagination .dma_form_next {
  display: inline-block;
  width: auto;
  padding: 12px 28px !important;
  background: var(--gold-deep, #9A7B4D) !important;
  color: var(--ivory, #f7f3ec) !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper button.gform_button:hover,
.dma_form .dma_form_submit button:hover,
.dma_form .dma_form_submit input[type="submit"]:hover,
.dma_form .dma_form_pagination .dma_form_next:hover {
  background: var(--navy) !important;
}
/* Previous / Back button — ghost variant */
.gform_wrapper .gform_previous_button,
.dma_form .dma_form_pagination .dma_form_prev {
  display: inline-block;
  width: auto;
  padding: 12px 24px !important;
  background: transparent !important;
  color: var(--navy) !important;
  border: 1px solid rgba(20,32,46,0.25) !important;
  border-radius: 4px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: 8px;
}

/* Multi-page progress bar — gold fill on a faint track */
.gform_wrapper .gf_progressbar_wrapper { margin-bottom: 18px; }
.gform_wrapper .gf_progressbar_title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-2);
}
.gform_wrapper .gf_progressbar {
  background: rgba(20,32,46,0.10) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.gform_wrapper .gf_progressbar_percentage,
.gform_wrapper .gf_progressbar_percentage.percentbar_blue,
.gform_wrapper .gf_progressbar_percentage span {
  background: var(--gold-deep, #9A7B4D) !important;
  color: var(--ivory, #f7f3ec) !important;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

/* Validation + messages */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message,
.dma_form .dma_form_messages {
  font-family: var(--sans);
  font-size: 12px;
  color: #b3261e;
  margin-top: 6px;
}
.gform_wrapper .gform_validation_errors {
  border: 1px solid rgba(179,38,30,0.40);
  background: rgba(179,38,30,0.05);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

/* Hide form chrome / hidden helper fields (honeypot, validation container,
   and dma-forms/GF hidden price fields — must stay hidden, not render blank) */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gform_anti_honeypot,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gfield.hide,
.gform_wrapper .gform_hidden,
.dma_form .dma_field.hide,
.dma_form .dma_field.hidden,
.dma_form .dma_field--hidden { display: none !important; }