/* GENERATED from style.css (mtime 1783339131) by inc/css-split.php — DO NOT EDIT. Edit style.css. */
/*
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: #7A6135;  /* darkened 2026-07-04: #846A3A was 4.3:1 on the warm surfaces (AA needs 4.5) */
  --teal:      #4A7C7E;       /* Mediterranean accent (rare) */
  /* Bright CTA accent — owner feedback #2/#14: clickable actions (Start now,
     Inquire, Find your yacht match) must be "bright, almost neon" teal so they
     stand out. Use --cta for fills, --cta-deep for hover, --cta-ink for text on
     the bright fill (navy reads AA on this teal; white does not). */
  --cta:       #0FC2B2;
  --cta-deep:  #0A9E91;
  --cta-ink:   #062A27;

  --txt:       #14202E;
  --txt-2:     #4A5566;
  --txt-3:     #596270;       /* muted text — darkened again 2026-07-03 (#646E7C was borderline at small sizes) */
  --on-navy:   #EFE7D6;
  --on-navy-2: rgba(239,231,214,0.62);

  /* Type */
  --serif: "Cormorant Garamond", "Cormorant Fallback", "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); }
.chapter{
  font-family: var(--mono);
  font-size: clamp(10px, 0.55vw, 16px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  /* gold-text (#846A3A) is 4.3:1 on the #E7ECEF surface-warm background —
     just under AA for this tiny type; darkened a step (a11y 2026-07-03) */
  color: #786034;
}
.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); }
/* Bright teal CTA (#2/#14) — primary clickable action, stands out on navy + ivory. */
.btn--cta{ background: var(--cta); color: var(--cta-ink); border-color: var(--cta); }
.btn--cta:hover{ background: var(--cta-deep); border-color: var(--cta-deep); color: #fff; }
.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;

  color: #3F6B6D; /* was inheriting mo_filter's a{#8AD9DD} (a11y 2026-07-03) */
}
/* 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: 18px 56px;
  transition: background 400ms ease, padding 300ms ease;
}
.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__logo-text{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--ivory);
}
.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__menu a:hover{ color: var(--gold-text); }
/* 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; }
@keyframes dmaScrollPulse{
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.2); }
}
/* =============================================================================
   SECTION SPACING HELPERS
   ============================================================================= */

.dma-section{ padding: clamp(72px, 5vw, 140px) 0; }
.dma-section--sm{ padding: clamp(48px, 3.3vw, 96px) 0; }
/* =============================================================================
   YACHT CARD GRID
   ============================================================================= */

/* Wrap the shortcode output */
.dma-yacht-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
/* =============================================================================
   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 .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 .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;
}
.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.72); /* 0.5 was ~2.4:1 on navy (a11y 2026-07-03) */
}
.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.72);
  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; }
/* 2 columns on phones (was 1) — halves the footer height. Tighter column gap
     so each column stays wide enough for the link labels. */
  .dma-footer__columns{ grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
.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-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-amenity-bucket{
  display: flex;
  flex-direction: column;
}
/* 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);
}
@media (max-width: 640px){
.dma-deal-banner__inner{ flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 0 16px 16px; }
}
@media (max-width: 880px){
.dma-section{ padding: 96px 0; }
.dma-section--sm{ padding: 64px 0; }
}
/* 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-tablewrap > table{ margin: 0; }
@media (max-width: 640px){
.dma-ai-tablewrap table{ min-width: 500px; }
}
/* =============================================================================
   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;
}
@media (max-width: 1024px){
.dma-nav{ padding: 20px 32px; }
.dma-yacht-grid{ grid-template-columns: repeat(2, 1fr); }
/* Once the sidebar stacks above the listings, drop sticky so it doesn't
     cling to the top as you scroll the results. */
  .dma-filter-sidebar{ position: static; }
.dma-sticky-bar{ grid-template-columns: 1fr 1fr; }
.container, .container--narrow{ padding: 0 32px; }
}
@media (max-width: 768px){
.dma-nav__menu, .dma-nav__actions{ display: none; }
.dma-brokers__grid{ grid-template-columns: repeat(2, 1fr); }
.dma-yacht-grid{ grid-template-columns: 1fr; }
.dma-sticky-bar{ grid-template-columns: 1fr; gap: 16px; padding: 16px 24px; }
/* Mobile: drop the desktop 32px auto-margin (width:100%-64px) so a single
     padding controls the side gutter — otherwise margin+padding double-inset. */
  .container, .container--narrow{ width: 100%; padding: 0 20px; }
}
/* =============================================================================
   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; }
}
.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);
}
@keyframes dmaXpEntrance{
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
/* 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;
    }
}
@keyframes dmaXpSkeleton{
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.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;
}
/* ---------- 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;
}
@media (max-width: 1199px){
.dma-nav__hamburger{ display: inline-flex; }
.dma-nav__menu, .dma-nav__actions{ display: none !important; }
/* plugin nav (.menu-container) is cloned into the drawer by dma-nav.js — hide the original */
    .menu-container{ display: none !important; }
}
@media (min-width: 1200px){
.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;
}
/* ---------- 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);
    /* #7 — tighten the empty band at the top of the mobile menu. */
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.dma-drawer--nav .dma-drawer__body{
    padding-top: 12px !important; /* #7 — pull the first menu item up under the header */
}
.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);
}
/* ---------- BACKDROP TINT ----------------------------------------- */
.offcanvas-backdrop.show{ opacity: 0.55; }
@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;
    }
}
@media (max-width: 768px){
/* 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;
    }
}
@media (max-width: 768px){
.dma-section{ padding: 80px 0 !important; }
.dma-section--sm{ padding: 64px 0 !important; }
}
@media (max-width: 600px){
.dma-section{ padding: 64px 0 !important; }
.dma-section--sm{ padding: 56px 0 !important; }
.container, .container--narrow{ width: 100%; padding: 0 16px !important; }
}
@media (max-width: 768px){
.dma-brokers__grid{ gap: 24px !important; }
}
@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; }
@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 .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;
    }
}
@media (max-width: 520px){
.dma-brokers__grid,
    .dma-brokers__grid > .row,
    .dma-brokers__grid .row{
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}
@media (max-width: 767px){
.dma-wpb-col--empty{ display: none; }
}
/* =============================================================================
   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;
}
@media (max-width: 1399px){
.dma-brokers__grid > .row,
    .dma-brokers__grid .row{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 999px){
.dma-brokers__grid > .row,
    .dma-brokers__grid .row{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}
@media (max-width: 767px){
.dma-brokers__grid > .row,
    .dma-brokers__grid .row{
        grid-template-columns: 1fr !important;
        gap: 20px !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;
}
/* 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; }
@media (min-width: 1280px) and (max-width: 1480px){
#v2-accord-crew-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* Backdrop tint */
.modal-backdrop.show{ background: var(--navy); opacity: 0.65 !important; }
/* =============================================================================
   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;
  }
}
body .dma-brokers__grid .digislide:hover{ transform: translateY(-4px) !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;
}
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; }
/* 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;
}
/* =============================================================================
   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;
}
.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;
}
/* =============================================================================
   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;
}
/* =============================================================================
   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;
}
/* =============================================================================
   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-text, #846a3a); /* gold-deep fails AA on white (a11y 2026-07-03) */
  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; }
/* Hide Google Maps API error overlay (key restricted to prod only) */
.gm-err-container,
.gm-err-content,
.gm-err-autocomplete{ display: none !important; }
/* =============================================================================
   "REQUEST PRICE" INQUIRY MODAL (#yacht_modal / #yachtsale_modal)
   Elevated to match the mo_inquiry typeform: full-bleed hero photo, large soft
   inputs with a teal focus ring, side-by-side dates, and a full-width teal CTA.
   CSS-only restyle — the form markup is owned by the dma-forms plugin.
   ============================================================================= */
#yacht_modal .modal-dialog,
#yachtsale_modal .modal-dialog{ max-width: 560px; }
#yacht_modal .modal-content,
#yachtsale_modal .modal-content{
    border-radius: 14px !important;
    border: 0 !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: 0 32px 90px rgba(14,27,42,0.38) !important;
}
/* Header — eyebrow-clean, no hard rule */
#yacht_modal .modal-header,
#yachtsale_modal .modal-header{
    border-bottom: 0 !important;
    padding: 24px 30px 8px !important;
    align-items: flex-start;
}
#yacht_modal .modal-title,
#yachtsale_modal .modal-title{
    font-family: var(--serif) !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    color: var(--navy) !important;
}
#yacht_modal .modal-header .btn-close,
#yachtsale_modal .modal-header .btn-close{
    opacity: 0.55; transition: opacity .2s; margin-top: 4px;
}
#yacht_modal .modal-header .btn-close:hover,
#yachtsale_modal .modal-header .btn-close:hover{ opacity: 1; }
/* Body padding off so the photo bleeds full width */
#yacht_modal .modal-body,
#yachtsale_modal .modal-body{ padding: 16px 0 0 !important; }
/* Full-bleed hero photo (kills Bootstrap .img-thumbnail border/padding + a
   legacy max-width:50% that was capping the image div at half width) */
#yacht_modal_image,
#yachtsale_modal_image{
    margin: 0 !important;
    line-height: 0;
    width: 100% !important;
    max-width: none !important;
}
#yacht_modal_image img,
#yachtsale_modal_image img{
    width: 100% !important;
    height: 210px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
}
/* Form panel under the photo */
#yacht_modal .dma_form_wrapper,
#yachtsale_modal .dma_form_wrapper{ padding: 26px 30px 32px !important; }
/* Two-up date fields; everything else spans full width.
   :not([hidden]) so the inactive multi-step page stays display:none. */
#yacht_modal .dma_form_page[hidden]{ display: none !important; }
#yacht_modal .dma_form_page:not([hidden]){
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px !important;
}
#yacht_modal .dma_form_page > .dma_field{ grid-column: 1 / -1; }
#yacht_modal .dma_form_page > .dma_field--date{ grid-column: auto; }
#yacht_modal .dma_form_page > .dma_form_pagination,
#yacht_modal .dma_form_page > .dma_form_submit{ grid-column: 1 / -1; }
/* Labels — mono eyebrow */
#yacht_modal .dma_field > label,
#yachtsale_modal .dma_field > label{
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--txt-2, #4A5566) !important;
    margin: 0 0 8px !important;
    display: block;
}
#yacht_modal .dma_required, #yachtsale_modal .dma_required{ color: var(--cta-deep, #0A9E91); }
/* Inputs — larger, softer, ivory fill */
#yacht_modal .dma_field input[type="text"],
#yacht_modal .dma_field input[type="email"],
#yacht_modal .dma_field input[type="tel"],
#yacht_modal .dma_field input[type="number"],
#yacht_modal .dma_field input[type="date"],
#yachtsale_modal .dma_field input[type="text"],
#yachtsale_modal .dma_field input[type="email"],
#yachtsale_modal .dma_field input[type="tel"],
#yachtsale_modal .dma_field input[type="number"]{
    height: 52px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(14,27,42,0.16) !important;
    border-radius: 9px !important;
    background: var(--ivory, #F4F6F8) !important;
    font-size: 16px !important;
    color: var(--navy) !important;
    transition: border-color .2s, box-shadow .2s, background .2s !important;
}
#yacht_modal .dma_field textarea,
#yachtsale_modal .dma_field textarea{
    min-height: 100px !important;
    padding: 13px 16px !important;
    border: 1px solid rgba(14,27,42,0.16) !important;
    border-radius: 9px !important;
    background: var(--ivory, #F4F6F8) !important;
    font-size: 16px !important;
    color: var(--navy) !important;
    transition: border-color .2s, box-shadow .2s, background .2s !important;
}
#yacht_modal .dma_field input:focus,
#yacht_modal .dma_field textarea:focus,
#yachtsale_modal .dma_field input:focus,
#yachtsale_modal .dma_field textarea:focus{
    border-color: var(--cta, #0FC2B2) !important;
    box-shadow: 0 0 0 3px rgba(15,194,178,0.18) !important;
    background: #fff !important;
    outline: none !important;
}
/* Action row + buttons — full-width teal CTA, ghost Back */
#yacht_modal .dma_form_pagination,
#yacht_modal .dma_form_submit,
#yachtsale_modal .dma_form_pagination,
#yachtsale_modal .dma_form_submit{
    display: flex !important;
    gap: 12px;
    align-items: stretch;
    margin-top: 8px !important;
}
#yacht_modal .dma_btn--next,
#yacht_modal .dma_btn--submit,
#yachtsale_modal .dma_btn--next,
#yachtsale_modal .dma_btn--submit{
    flex: 1 1 auto !important;
    width: auto !important;
    background: var(--cta, #0FC2B2) !important;
    color: var(--cta-ink, #062A27) !important;
    border: 0 !important;
    border-radius: 9px !important;
    padding: 16px 26px !important;
    font-family: var(--mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background .2s, transform .08s !important;
}
#yacht_modal .dma_btn--next:hover,
#yacht_modal .dma_btn--submit:hover,
#yachtsale_modal .dma_btn--next:hover,
#yachtsale_modal .dma_btn--submit:hover{ background: var(--cta-deep, #0A9E91) !important; color: #fff !important; }
#yacht_modal .dma_btn--next:active,
#yacht_modal .dma_btn--submit:active{ transform: translateY(1px); }
#yacht_modal .dma_btn--prev,
#yachtsale_modal .dma_btn--prev{
    flex: 0 0 auto !important;
    width: auto !important;
    background: transparent !important;
    color: var(--navy) !important;
    border: 1px solid rgba(14,27,42,0.2) !important;
    border-radius: 9px !important;
    padding: 16px 22px !important;
    font-family: var(--mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}
#yacht_modal .dma_btn--prev:hover,
#yachtsale_modal .dma_btn--prev:hover{ border-color: var(--navy) !important; }
@media (max-width: 480px){
#yacht_modal .dma_form_page:not([hidden]){ grid-template-columns: 1fr; }
#yacht_modal_image img,
    #yachtsale_modal_image img{ height: 160px !important; }
#yacht_modal .dma_form_wrapper,
    #yachtsale_modal .dma_form_wrapper{ padding: 22px 20px 26px !important; }
#yacht_modal .modal-header,
    #yachtsale_modal .modal-header{ padding: 20px 22px 6px !important; }
}
/* ============================================================
   PERSISTENT HEADER — pin the nav AFTER the hero (all pages).
   header.php JS adds body.is-scrolled once the hero has scrolled past
   the top, and publishes the compact header height as --dma-header-h.
   - Hero pages (.has-hero, ~every page): nav floats transparent over
     the hero; once PAST the hero it drops in as a COMPACT NAVY bar
     (matching the navy section-nav height). Logo/menu/hamburger stay
     ivory — no inversion needed on navy.
   - Solid interior pages (rare, no hero): nav is sticky in flow.
   - Yacht singles (v2/original): the section-nav is NO LONGER sticky —
     the persistent header replaces it.
   ============================================================ */
:root{ --dma-header-h: 80px; }
/* Hero pages → fixed COMPACT NAVY bar once past the hero */
body.has-hero.is-scrolled .dma-nav{
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--navy);
  border-bottom: 1px solid rgba(239,231,214,0.14);
  box-shadow: 0 6px 24px rgba(14,27,42,0.28);
  padding-top: 18px; padding-bottom: 18px;
}
@media (prefers-reduced-motion: no-preference){
body.has-hero.is-scrolled .dma-nav{ animation: dmaNavDrop 280ms cubic-bezier(.16,.84,.32,1); }
@keyframes dmaNavDrop{ from { transform: translateY(-100%); } to { transform: translateY(0); } }
}
/* Collapse the tall mega-menu top-level links (the plugin gives them 35px
   vertical padding). Applied ALWAYS — not just when scrolled — so the header is
   the same compact height over the hero as it is pinned, and the mega-menu
   dropdown (top:100% of the nav) opens at the same point in both states. */
.dma-nav .main-menu > li > a,
.dma-nav .main-menu #menu_tf a{
  padding-top: 8px !important; padding-bottom: 8px !important;
}
/* Admin-bar offset (logged-in) */
.admin-bar.has-hero.is-scrolled .dma-nav{ top: 32px; }
@media screen and (max-width: 782px){
.admin-bar.has-hero.is-scrolled .dma-nav{ top: 46px; }
}
/* Hash-landing anchor offset so #section targets aren't hidden under the fixed header */
body.is-scrolled :target{ scroll-margin-top: calc(var(--dma-header-h) + 12px); }
@media (max-width: 1199px){
/* Keep the last listing cards clear of the fixed bar. */
  body:has(.dma-explore-bottombar) .body-wrapper{ padding-bottom: 76px; }
/* Lift the Smartsupp chat above the bar (same as the single-yacht page). */
  body:has(.dma-explore-bottombar) #smartsupp-widget-container > div[style*="9999"]{
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }
}
@media (max-width: 1279px){
/* Lift the Smartsupp chat bubble to sit just ABOVE the bottom bar (was
     bottom:24px, right:12px — inline, so the override needs !important). Only on
     pages that have the bar. The chat window (no 9999 radius) is left alone. */
  body:has(.dma-yacht-bottombar) #smartsupp-widget-container > div[style*="9999"]{
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }
/* Keep the last page content clear of the fixed bar. */
  body:has(.dma-yacht-bottombar) .body-wrapper{ padding-bottom: 72px; }
}
/* Hide the chat bubble while the nav sheet is open. */
body.dma-navsheet-open #smartsupp-widget-container{ display: none !important; }
/* ============================================================================
   CONTENT LINK CONTRAST (a11y audit 2026-07-03)
   mo_filter's mo_main-v8.css sets a{color:#8ad9dd} — light teal intended for
   the plugin's dark-navy DMA sites. On this theme's light surfaces that is
   ~1.5:1 contrast (near-invisible). Re-anchor links inside prose/content
   wrappers to the accessible teal + underline. Scoped to text containers so
   card/nav/button links keep their component styles.
   ========================================================================= */
.body a,
.lede a,
.corsica-intro__copy a,
.dma-landing__intro a{
  color: #3F6B6D; /* --teal is 4.45:1 on the light surfaces — one step darker for AA */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.body a:hover,
.lede a:hover,
.corsica-intro__copy a:hover,
.dma-landing__intro a:hover{
  color: var(--gold-text);
}
.surface-navy .body a,
.surface-navy .lede a{
  color: #8AD9DD; /* on navy the plugin teal IS accessible — keep it there */
}
/* ============================================================================
   ELEMENT LIBRARY — cross-page WPBakery elements (inc/library-elements.php).
   Built 2026-07-04 from the content writer's /element-library/ references.
   ========================================================================== */

/* --- shared button ---------------------------------------------------- */
.dma-el-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--ivory) !important;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dma-el-btn:hover{ background: var(--gold-deep); border-color: var(--gold-deep); }
.dma-el-btn--gold{ background: var(--gold-deep); border-color: var(--gold-deep); }
.dma-el-btn--gold:hover{ background: var(--navy); border-color: var(--navy); }
/* --- 2. Broker Quote ---------------------------------------------------- */
.dma-bquote{
  position: relative;
  margin: 34px 0;
  background: #fff;
  border: 1px solid rgba(14, 27, 42, 0.14);
  border-top: 4px solid var(--gold);
  box-shadow: 0 14px 34px rgba(14, 27, 42, 0.07);
  padding: 32px 34px 28px;
}
.dma-bquote__mark{
  position: absolute;
  top: 10px;
  right: 24px;
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 96px;
  line-height: 1;
  color: rgba(184, 151, 102, 0.18);
  pointer-events: none;
}
.dma-bquote__label{ margin: 0 0 14px; color: var(--gold-text); }
.dma-bquote__text{
  position: relative;
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--txt-2, #3d4554);
  font-size: 17px;
  line-height: 1.68;
  font-style: italic;
}
.dma-bquote__broker{
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(14, 27, 42, 0.12);
}
.dma-bquote__photo{
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(184, 151, 102, 0.58);
}
.dma-bquote__name{
  display: block;
  margin: 0 0 3px;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none;
}
a.dma-bquote__name:hover{ text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.dma-bquote__title{ display: block; color: var(--txt-3, #646e7c); font-size: 14px; line-height: 1.45; }
@media (max-width: 760px){
.dma-bquote{ padding: 26px 20px 24px; }
.dma-bquote__mark{ font-size: 74px; right: 14px; }
.dma-bquote__text{ font-size: 16px; }
.dma-bquote__photo{ width: 58px; height: 58px; flex-basis: 58px; }
}
/* --- 5. Cost Calculator ----------------------------------------------------------- */
.dma-costcalc__wrap{
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1.12fr);
  gap: 40px;
  align-items: center;
}
.dma-costcalc__panel{
  background: #fff;
  border-top: 4px solid var(--gold);
  padding: 26px;
  box-shadow: 0 18px 38px rgba(14, 27, 42, 0.1);
}
.dma-costcalc__label{ display: block; margin: 0 0 10px; color: var(--navy); }
.dma-costcalc__input{
  display: flex;
  align-items: center;
  background: var(--ivory);
  border: 1px solid rgba(14, 27, 42, 0.18);
}
.dma-costcalc__currency{ padding: 0 14px; color: var(--gold-text); font-size: 22px; font-weight: 700; }
.dma-costcalc__input input{
  width: 100%;
  min-height: 54px;
  border: 0;
  outline: 0;
  padding: 0 14px 0 0;
  color: var(--navy);
  background: transparent;
  font-size: 24px;
  font-weight: 700;
}
.dma-costcalc__input input::-webkit-outer-spin-button,
.dma-costcalc__input input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.dma-costcalc__input input[type="number"]{ -moz-appearance: textfield; appearance: textfield; }
.dma-costcalc__presets{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dma-costcalc__chip{
  border: 1px solid rgba(14, 27, 42, 0.22);
  background: #fff;
  color: var(--navy);
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dma-costcalc__chip:hover{ background: var(--navy); color: var(--ivory); }
.dma-costcalc__lines{ display: grid; gap: 1px; margin-top: 20px; background: rgba(14, 27, 42, 0.13); }
.dma-costcalc__line{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  background: #fff;
  padding: 14px 15px;
}
.dma-costcalc__line strong{ display: block; color: var(--navy); font-size: 17px; line-height: 1.2; }
.dma-costcalc__desc{ display: block; margin-top: 5px; color: var(--txt-3, #646e7c); font-size: 12px; line-height: 1.4; }
.dma-costcalc__line em{ font-style: normal; color: var(--txt-3, #646e7c); font-size: 13px; line-height: 1.3; text-align: right; white-space: nowrap; }
.dma-costcalc__total{
  margin-top: 14px;
  background: var(--navy);
  padding: 18px;
  color: var(--ivory);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}
.dma-costcalc__total small{ display: block; margin-bottom: 6px; color: rgba(239, 231, 214, 0.72); }
.dma-costcalc__total strong{ display: block; color: var(--ivory); font-size: 20px; line-height: 1.15; font-weight: 400; }
.dma-costcalc__total span{ color: var(--ivory); font-size: 23px; line-height: 1; font-weight: 700; text-align: right; white-space: nowrap; }
.dma-costcalc__note{ margin: 16px 0 0; color: var(--txt-3, #646e7c); font-size: 12px; line-height: 1.5; }
@media (max-width: 900px){
.dma-costcalc__wrap{ grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px){
.dma-costcalc__panel{ padding: 18px; }
.dma-costcalc__line,
  .dma-costcalc__total{ grid-template-columns: 1fr; }
.dma-costcalc__line em,
  .dma-costcalc__total span{ text-align: left; }
}
/* --- Broker Review on yacht singles (inc/ys-broker-reviews.php) -------- */
.dma-bquote--yacht{ margin: 0 0 22px; }
.dma-bquote--yacht:last-child{ margin-bottom: 0; }
.dma-bquote__pics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.dma-bquote__pics a{ display: block; line-height: 0; }
.dma-bquote__pics img{
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.dma-bquote__contact{
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.dma-bquote__contact:hover{ background: var(--navy); color: var(--ivory); }
@media (max-width: 640px){
.dma-bquote__pics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dma-bquote__broker{ flex-wrap: wrap; }
.dma-bquote__contact{ margin-left: 0; width: 100%; justify-content: center; margin-top: 6px; }
}
/* Broker Review — collapse for long reviews / big photo sets */
.dma-bquote__body.is-clamped{
  max-height: 520px;
  overflow: hidden;
  position: relative;
}
.dma-bquote__body.is-clamped::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
.dma-bquote__more{
  display: block;
  margin: 14px auto 0;
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--ivory);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dma-bquote__more:hover{ background: var(--gold-deep); border-color: var(--gold-deep); }