/* GENERATED from style.css (mtime 1783339131) by inc/css-split.php — DO NOT EDIT. Edit style.css. */
.dma-section--md{ padding: clamp(60px, 4.2vw, 120px) 0; }
/* =============================================================================
   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; }
}
/* #23 — persistent brand logo inside the sticky section nav */
.dma-section-nav__logo{ flex-shrink: 0; display: flex; align-items: center; }
.dma-section-nav__logo img{ height: 35px; width: auto; display: block; }
/* #21/#23 — collapse-to-dropdown toggle (hidden on desktop) */
.dma-section-nav__toggle{ display: none; }
.dma-section-nav__chev{
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 220ms ease;
  flex-shrink: 0;
}
.dma-section-nav.is-open .dma-section-nav__chev{ transform: rotate(-135deg); }
@media (max-width: 980px){
.dma-section-nav{ gap: 12px; }
.dma-section-nav__price{ display: none; }
/* No dropdown — scroll the pill list horizontally */
  .dma-section-nav__list{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
.dma-section-nav__list::-webkit-scrollbar{ display: none; }
}
@media (max-width: 640px){
.dma-section-nav__list{ display: none; }
}
/* =============================================================================
   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-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-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 .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;
}
@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; }
}
@media (max-width: 880px){
.dma-section--md{ padding: 80px 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; }
}
.dma-ai-content table{ width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 15px; }
/* 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; }
@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; }
@media (max-width: 1024px){
.dma-two-col{ grid-template-columns: 1fr; gap: 48px; }
.dma-detail-hero__specs{ grid-template-columns: repeat(3, 1fr); gap: 32px; }
.dma-specs__grid{ grid-template-columns: 1fr; }
}
/* 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; }
@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; }
}
/* =============================================================================
   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; }
}
@media (min-width: 1280px) and (max-width: 1480px){
.dma-price-table__head,
    .dma-price-table__row{ gap: 10px; padding: 16px 18px; }
}
/* =============================================================================
   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; }
}
/* ---------- 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;
}
@media (max-width: 768px){
.dma-section--md{ padding: 72px 0 !important; }
}
@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;
    }
}
/* =============================================================================
   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);
    overflow-wrap: anywhere;
}
.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: 1024px){
.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: 1024px){
.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;
}
/* =============================================================================
   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; }
/* =============================================================================
   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; }
@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-estate_property .dma-deal-banner .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,
    body.single-yacht .dma-deal-banner .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);
    }
/* The bottom inquiry section (v2) renders AFTER the sticky-sidebar flow ends,
       so it must NOT keep the right gutter — restore symmetric, centered padding. */
    body.single-estate_property #corsica-inquire-yacht .container,
    body.single-yacht #corsica-inquire-yacht .container{
        padding-right: max(56px, min(calc((100vw - 1440px) / 2 + 56px), 600px));
    }
/* Fine Points accordion + Onboard + Registry — same asymmetric padding as charter price. */
    body.single-yacht #v2-details .container,
    body.single-yacht #v2-onboard .container,
    body.single-yacht #v2-registry .container,
    body.single-yacht #v2-specs .container,
    body.single-estate_property #v2-details .container,
    body.single-estate_property #v2-onboard .container,
    body.single-estate_property #v2-registry .container,
    body.single-estate_property #v2-specs .container{
        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; }
@media (max-width: 782px){
.admin-bar .dma-yacht-sticky{ top: 136px; }
}
/* Yacht singles (v2/original): the section-nav is NO LONGER sticky — the
   persistent header is. Scoped via :has(.dma-yacht-bottombar) so v3 (no bottom
   bar) keeps its own nav untouched. Hide the duplicate logo, and (now the logo
   is gone) CENTER the section links with the price/Inquire pinned to the right. */
/* Section-nav is non-sticky wherever the bottom bar exists (the persistent header
   is the sticky bar now). `top:0` also cancels the sticky-era `.admin-bar … {top:32px}`
   offset that would push this now-relative bar down 32px (gap under the gallery) for
   logged-in users. Applies at ALL widths so mobile keeps the section-nav (logo + Inquire,
   under the gallery — owner wants it) alongside the bottom bar. */
body:has(.dma-yacht-bottombar) .dma-section-nav{
  position: relative !important;
  top: 0 !important;
}
@media (min-width: 1280px){
body:has(.dma-yacht-bottombar) .dma-section-nav{
    justify-content: center;
    min-height: var(--dma-header-h, 80px);
  }
body:has(.dma-yacht-bottombar) .dma-section-nav__logo{ display: none; }
body:has(.dma-yacht-bottombar) .dma-section-nav__actions{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: max(clamp(1rem, 2vw, 4rem), calc((100% - 2880px) / 2));
  }
}
/* ============================================================
   SINGLE-YACHT FIXED BOTTOM ACTION BAR (mobile/tablet).
   Left: teal "Inquire about <name>" → #yacht_modal (form 7).
   Right: "Search yachts" → /explore.
   Shown <=1279px (desktop >=1280 has the sticky sidebar inquiry form).
   Rendered only on v2/original (not v3) — so :has(.dma-yacht-bottombar)
   scopes the section-nav hide + body spacer to those pages, leaving v3's
   own nav/badge intact. z-index 900: above content, below modals (~1055),
   drawers (1080) and the lightbox.
   ============================================================ */
.dma-yacht-bottombar{ display: none; }
@media (max-width: 1279px){
.dma-yacht-bottombar{
    display: flex; gap: 10px; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(244,246,248,0.96);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -4px 24px rgba(14,27,42,0.14);
  }
/* Compact buttons — the base .btn padding/letter-spacing is too wide for a bar. */
  .dma-yacht-bottombar .btn{
    min-height: 46px; padding: 0 12px; gap: 7px;
    font-size: 12px; letter-spacing: 0.08em;
  }
/* Equal 50/50 buttons that fill the whole row (chat is lifted above the bar). */
  .dma-yacht-bottombar__inquire{ flex: 1 1 0; min-width: 0; justify-content: center; }
.dma-yacht-bottombar__inquire .dma-yacht-bottombar__label-full{
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
.dma-yacht-bottombar__search{
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  }
.dma-yacht-bottombar__label-short{ display: none; }
}
@media (max-width: 430px){
.dma-yacht-bottombar__label-full{ display: none; }
.dma-yacht-bottombar__label-short{ display: inline; }
}
/* Yacht section jump-links must clear the fixed header (the section-nav is no
   longer sticky). Overrides the base .dma-section[id]{scroll-margin-top:72px}. */
.single-estate_property .dma-section[id],
.single-estate_property .dma-section--md[id],
.single-estate_property #v2-details{
  scroll-margin-top: calc(var(--dma-header-h, 70px) + 16px);
}
/* ============================================================
   YACHT BOTTOM-BAR "NAV" BUTTON + "Jump to section" bottom-sheet.
   NAV is a compact button (left of Inquire/Search). It opens a sheet
   listing the page's sections + accordion items (built at runtime in
   footer.php JS); tapping one closes the sheet, opens the accordion if
   needed, and smooth-scrolls there.
   ============================================================ */
.dma-yacht-bottombar__nav{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
}
.dma-navsheet[hidden]{ display: none; }
.dma-navsheet{ position: fixed; inset: 0; z-index: 1100; }
.dma-navsheet__backdrop{
  position: absolute; inset: 0; background: rgba(14,27,42,0.5);
  opacity: 0; transition: opacity .25s ease;
}
.dma-navsheet.is-open .dma-navsheet__backdrop{ opacity: 1; }
.dma-navsheet__panel{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--ivory);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-shadow: 0 -8px 40px rgba(14,27,42,0.28);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.16,.84,.32,1);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.dma-navsheet.is-open .dma-navsheet__panel{ transform: translateY(0); }
.dma-navsheet__head{
  position: sticky; top: 0; background: var(--ivory);
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 10px;
}
.dma-navsheet__title{
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--txt-2);
}
.dma-navsheet__close{ background: none; border: 0; padding: 4px; cursor: pointer; color: var(--navy); line-height: 0; }
.dma-navsheet__list{ list-style: none; margin: 0; padding: 4px 0 8px; }
.dma-navsheet__item{
  display: flex; align-items: center; gap: 12px;
  padding: 15px 24px; color: var(--navy); text-decoration: none;
  font-family: var(--sans); font-size: 16px; font-weight: 500;
  border-bottom: 1px solid rgba(14,27,42,0.06);
}
.dma-navsheet__item:hover, .dma-navsheet__item:focus-visible{ background: rgba(14,27,42,0.04); }
.dma-navsheet__item.is-sub{ padding-left: 40px; font-size: 15px; color: var(--txt-2); font-weight: 400; }
.dma-navsheet__item.is-sub::before{
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cta); flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce){
.dma-navsheet__panel, .dma-navsheet__backdrop{ transition: none; }
}