/* CMS additions on top of the Webflow export — do not edit the exported files. */

/* Widget margin overrides driven by the page builder's Margin select
   (fragment_widget_config). Default (Medium) is the stock .section margin. */
.section.widget-margin-small { margin-bottom: var(--page--section-spacing--section-margin-sm); }
.section.widget-margin-large { margin-bottom: var(--page--section-spacing--section-margin-lrg); }
.section.widget-margin-none { margin-bottom: 0; }

/* Features slider (Swiper) — keep the Webflow "peek" layout: the original
   .mask class sets overflow visible so neighbouring slides show beyond the
   carousel container; Swiper's own .swiper class would clip them. Scoped to
   the features slider only — the deck plans slider needs Swiper's default
   overflow:hidden (see below). */
[data-features-slider].slider.swiper { overflow: visible; }

/* Equal-height feature cards: slide height tracks the tallest card (the flex
   swiper-wrapper stretches them once the w-slide/swiper-slide height:100% is
   dropped), and the cream text panel — not the fixed-ratio image — absorbs
   the difference on cards with shorter copy. Export 17 ships its own
   equal-height CSS (.slide height:100% etc.), but that needs the Webflow
   slider's fixed-height mask — under Swiper's auto-height wrapper the
   percentage collapses and slides go unequal again (verified), so this
   height:auto override must stay. The export's inline .parent-of-slider
   style block is inert (no element carries the class) and is not ported. */
[data-features-slider] .swiper-slide { height: auto; }
[data-features-slider] .slide--wrapper { display: flex; flex-flow: column; height: 100%; }
[data-features-slider] .feature--panel { flex: 1; }

/* Deck plans slider: a flex item inside .slider--wrapper. Without Swiper's
   overflow:hidden the flex sizing tracks the slides' content and the element
   blows out to the browser's max layout width, breaking the cross-fade. */
[data-deck-plans-slider] { width: 100%; min-width: 0; }

/* The page-nav strips beside the features and deck plans sliders double as
   slide navigation; the active slide's item holds the hover black. */
[data-features-slider-nav] .page--nav--item,
[data-deck-plans-nav] .page--nav--item { cursor: pointer; }
[data-features-slider-nav] .page--nav--item.is-active,
[data-deck-plans-nav] .page--nav--item.is-active { color: var(--colours--black); }

/* Non-looping slider: fade the arrows out at either end. */
.slider.swiper .swiper-button-disabled { opacity: 0.3; cursor: default; }

/* Image grid tabs — each page-nav item holds its own set of up to 4 images;
   image-grid-tabs.js fades the whole grid out/in when switching. The active
   item mirrors the Webflow hover colour. */
[data-image-grid-nav] .page--nav--item { cursor: pointer; }
[data-image-grid-nav] .page--nav--item.is-active { color: var(--colours--black); }
[data-image-grid-panels] { transition: opacity 0.3s ease; }
[data-image-grid-panels].is-fading { opacity: 0; }
[data-image-grid-panel].is-hidden { display: none; }

/* Gallery lightbox (lightGallery) — the cover image is absolutely positioned,
   so the wrapping anchor would otherwise collapse to 0x0; stretch it over the
   ratio box so the whole tile is the click/focus target. */
.gallery--image > a { position: absolute; inset: 0; z-index: 2; display: block; }

/* Deck plan zoom (Panzoom, /js/vendor/panzoom.min.js) — Panzoom transforms
   the canvas; the frame is its padding-free parent (contain:'outside' treats
   parent padding as out of bounds, and the Webflow ratio wrapper is all
   padding) and clips the scaled-up plan. The button row anchors to the slider
   itself (.swiper is position:relative), after the arrows in the DOM and above
   their z-index:3, so nothing in the slider can sit on top of it. */
.plan-zoom--frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.plan-zoom--canvas { position: absolute; inset: 0; }
.plan-zoom--controls {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 999;
  display: flex;
  gap: 8px;
}
.plan-zoom--btn {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  background-color: #fff;
  color: var(--colours--black);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.plan-zoom--btn:hover:not(:disabled) { color: var(--colours--amber); }
.plan-zoom--btn:disabled { opacity: 0.35; cursor: default; }
.plan-zoom--btn svg { width: 26px; height: 26px; display: block; }

/* The export hides text-block eyebrows (display:none) — the Overview eyebrow
   now carries the US-waters sales disclaimer, so it must show. Gold to match
   the site's small-label language. Rendered after the CTAs (template order);
   the margin-top mirrors .text-block--ctas' so the button sits evenly between
   body text and disclaimer. */
.text-block--eyebrow { display: block; margin-top: var(--spacers--spacer-lrg); }
.text-block--eyebrow h6 { color: var(--colours--gold); line-height: 1.5; }

/* Brokers — the section is fully styled by the Webflow export (2026-08-14
   re-export). Only additions here: the amber hover the export lacks, and
   object-fit so uploaded headshots cover the 240px circle whatever the crop. */
.broker--image { object-fit: cover; }
.broker--link:hover { color: var(--colours--amber); }
/* The export never centres .broker--contact: it's a flex column whose links
   stretch to the widest one, so the shorter line (usually the phone) sits
   left-aligned. Invisible in Webflow only because its placeholder phone and
   email happen to be the same width. */
.broker--contact { align-items: center; }

/* Taller plan frame than the export's 27% ratio, so more of each deck shows
   before zooming. The arrows share the figure (it sets their vertical anchor)
   so they keep tracking the frame's centre. Scoped to desktop: below 768px
   the export hides this frame and shows the 175% portrait mobile one, whose
   rules custom.css would otherwise override, loading last. */
@media screen and (min-width: 768px) {
  .plans-slide--image--desk,
  .left-arrow,
  .right-arrow { padding-top: 32%; }
}

/* Gallery page category tabs — same fade/active treatment as the image grid
   tabs: one grid panel per category, gallery-tabs.js swaps them. */
[data-gallery-nav] .page--nav--item { cursor: pointer; }
[data-gallery-nav] .page--nav--item.is-active { color: var(--colours--black); }
[data-gallery-panels] { transition: opacity 0.3s ease; }
[data-gallery-panels].is-fading { opacity: 0; }
[data-gallery-panel].is-hidden { display: none; }

/* Legal page (/legal) — since export 16 the page uses the export's own markup
   (.sub--page--wrapper shell, .body--header headings, <br> paragraph breaks),
   all styled by the compiled export CSS. Only the link treatment is ours: the
   export ships no anchor styling inside the policy text. */
.legals--text--wrapper a {
  color: inherit;
  text-decoration: underline;
  overflow-wrap: break-word;
}
.legals--text--wrapper a:hover { color: var(--colours--amber); }

/* CMS body text (bard) renders as p elements, which carry Webflow's stock
   10px bottom margin; the last one would pad out the container, so zero it.
   (The features slider strips its p tags; the legal page renders none.) */
.text-block--body p:last-child,
.broker--bio p:last-child { margin-bottom: 0; }