html {
  height: auto;
}

/* Disable all font ligatures site-wide (common, discretionary, historical, contextual) */
*, *::before, *::after {
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "hlig" 0, "calt" 0;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "hlig" 0, "calt" 0;
}

.nav-link.w--current {
  color: white !important;
}




  <style>
  .full-screen-carousel--swiper { position: absolute; inset: 0; z-index: 1; height: 100%; }
  .full-screen-carousel--swiper .swiper-wrapper { height: 100%; }
  .full-screen-carousel--swiper .swiper-slide { position: relative; height: 100%; }
  .full-screen-carousel--image--text { z-index: 3; }
  .full-screen-carousel--image .overlay--wrapper { z-index: 2; }
  .image-text--links .link { cursor: pointer; opacity: .6; transition: opacity .3s ease; }
  .image-text--links .link.active,
  .image-text--links .link:hover { opacity: 1; }

  .full-screen-mob--swiper.swiper { display: block; width: 100%; overflow: hidden; }
  .full-screen-mob--swiper .swiper-wrapper { align-items: center; }
  .full-screen-mob--swiper .swiper-slide {
    height: auto;
    filter: blur(5px);
    transform: scale(.9);
    transform-origin: center center;
    transition: filter .4s ease, transform .4s ease;
  }
  .full-screen-mob--swiper .swiper-slide-active {
    filter: none;
    transform: scale(1);
  }
  .mob-nav { cursor: pointer; transition: opacity .3s ease; }
  .mob-nav.mob-nav--disabled { opacity: .35; pointer-events: none; }
  .mob-pagination { cursor: pointer; }
  .mob-pagination--num { opacity: .4; transition: opacity .3s ease; }
  .mob-pagination--num.active { opacity: 1; }



/* --------------------------------------------------------------------------
   Nav: desktop containing-block guard for the mega-menu panels.

   The .dropdown-list panels are position:absolute with inset 0 auto, so they
   must resolve against the transformed .navbar (translateZ pin below), giving
   top:0/left:0 across the full viewport width. Two things can silently become
   a NEARER containing block and drag every panel to the menu row's own box
   (~60px down, ~280px right — the "dropdowns way off" bug):

   1. position — the ≤991px burger styles set .nav-menu absolute; and
   2. transform — webflow.js's burger open/close animation leaves an inline
      identity transform (translateY(0) translateX(0)) on .nav-menu, which
      persists when the viewport crosses the 991px collapse back up to
      desktop. An identity transform still creates a containing block, and
      webflow.js never clears it without a reload. (This is what the old
      reload-on-resize hack in layout.antlers.html papered over — removed,
      because the reload also fired when entering video fullscreen and
      cancelled it.)

   !important beats the inline residue. Scoped to ≥992px so burger mode keeps
   its transforms (the slide animation needs them); the accordion panels down
   there are static, so nothing to guard.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .nav-menu {
    position: static !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Nav mega-menu: cross-fade panels to kill the open/close flash (desktop).

   Each nav item is an independent Webflow w-dropdown that toggles its panel
   with display:none <-> flex (instant) on .w--open. The dark overlay you see
   is the per-panel navy bg (.dropdown--whole--wrapper). Sweeping from one item
   to the next leaves a 1-frame gap where the old panel is already gone and the
   new one hasn't opened — so the navy tint vanishes and the bright page flashes
   through.

   Fix without JS or markup: keep every panel rendered and drive visibility with
   opacity + a transition instead of display. The outgoing panel is still mostly
   opaque when the incoming one fades in, so the navy never fully clears — no
   flash. Positional props (margin-top/position) live on the base rule, not just
   .w--open, so losing .w--open mid-fade-out doesn't shift the panel upward.

   Scoped to >=992px so the <=991px burger accordion (which legitimately uses
   display:none) is untouched — this must stay one pixel above the burger
   block's max-width:991px, or display:flex !important leaks into the burger
   range and breaks the accordion.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .dropdown-list {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }

  /* Export (24) split the nav vars: --nav--nav-height shrank to 60px (condensed
     nav) and the visible navbar now uses --nav--nav-height-full (120px). The
     exported .dropdown-list.w--open still offsets by the 60px var, so panels
     open on top of the menu row. Offset by the full nav height instead; both
     selectors so the open state (same specificity, earlier file) is beaten. */
  .dropdown-list,
  .dropdown-list.w--open {
    margin-top: var(--nav--nav-height-full);
  }

  .dropdown-list.w--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease;
  }
}

/* --------------------------------------------------------------------------
   Header load: kill the 1-frame full-white flash mid-animation.

   On page load the IX3 header animation scales/translates the cover image
   (._100vh--header-bg--image / .cover-image.parallax-*). The blurred layers
   sitting OVER the header — .navbar, .nav-bg--blur (both backdrop-filter:
   blur(20px)) and the side .sticky--icon — re-snapshot their backdrop every
   frame as that image moves. Chrome has a known bug where a backdrop-filter
   layer composites against an empty (white) buffer for one frame while the
   element behind it is being transformed — so the whole header blinks white.

   Fix: pin each backdrop-filtered layer onto its own persistent GPU layer
   (translateZ(0) + hidden backface) so its backdrop snapshot stays valid and
   never tears to white. Promoting the animating cover image too keeps the two
   on stable, independent layers. No markup/JS change; purely compositing hints.

   Note: translateZ on .navbar makes it the containing block for any
   position:fixed descendants — there are none here (dropdown panels are
   absolute), so nav/dropdown positioning is unaffected.
   -------------------------------------------------------------------------- */
.navbar,
.nav-bg--blur,
.sticky--icon {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

._100vh--header-bg--image,
.cover-image.header {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   Active nav dropdown — highlights the parent dropdown when the current page
   is that parent or one of its child_pages (see partials/_navigation).
   -------------------------------------------------------------------------- */
.nav-dropdown.current .nav-link {
  border-bottom-color: white;
}

/* Current sub page inside the mega-menu panel. The nav partial stamps
   w--current server-side (Webflow only bakes it into static exports): the
   .dropdown--item wrapper gets it, where Webflow's own
   .dropdown--item.w--current rule turns the hover border (card-bottom line)
   solid white. Sub-links (small caption links) have no exported current style,
   so brighten them to their hover white + underline here. */
.dropdown--sub--link.w--current {
  color: var(--colours--white);
}
.dropdown--sub--link.w--current .caption-text {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Burger menu (≤991px): the export disables both underline borders there —
   .nav-link's bottom border loses its style keyword (border-bottom: 1px
   #ffffff4d) and .dropdown--item gets border-bottom-style:none + zero
   padding — so colouring them does nothing. Re-draw the white line inside the
   accordion on the current SUB PAGE item only — the parent section title stays
   plain (Jamie's call), except Link-type items (News), which have no sub pages
   so the top-level row is itself the current page. */
@media screen and (max-width: 991px) {
  .nav-dropdown.current:not(.w-dropdown) .nav-link {
    border-bottom: 2px solid var(--colours--white);
  }
  .dropdown--item.w--current {
    border-bottom-style: solid;
    padding-bottom: var(--spacers--tiny);
  }
}

/* Keep the parent's hover underline while its dropdown panel is open.
   Webflow holds w--open on the toggle for as long as the pointer is inside
   the panel, so keying the hover colour off w--open tells the user which
   dropdown they're browsing. Desktop only — the ≤991px burger menu styles
   its open state differently (no underline). */
@media screen and (min-width: 992px) {
  .nav-link.w--open {
    border-bottom-color: #ffffff4d;
  }
}

/* --------------------------------------------------------------------------
   Language switcher (.dropdown). Absolutely positioned at the navbar's
   top-right, where it overlaps the right-most nav dropdown. Webflow's
   .w-dropdown defaults to z-index:900, so without a lift the neighbouring nav
   dropdowns paint over it and swallow its clicks. Bump it above them.

   The partial renders twice — inside .prenav--wrapper.desk and inside
   .prenav--wrapper.mob at the bottom of the collapsed nav menu (export 43);
   show/hide of each copy is owned by the Webflow CSS on those wrappers.
   -------------------------------------------------------------------------- */
.dropdown {
  z-index: 901;
}

/* Mobile language switcher. Inside the open mobile nav, webflow.js treats this
   .w-dropdown as a nav dropdown: closed it hides the list, and on tap it expands
   the list as a static accordion (position:static; display:block) rather than
   the desktop absolute overlay. The export's `.dropdown-list-2.w--open` overlay
   inset then no longer applies, and because .dropdown lays the toggle + list out
   inline, the "ES" link crams to the right of "EN" and overlaps the chevron
   (same bug in the raw export). Fix: stack the dropdown as a column so the
   expanded list drops cleanly BELOW the "EN" toggle. It stays a real tap-to-open
   dropdown — the list is still hidden until tapped. */
@media screen and (max-width: 991px) {
  .prenav--wrapper.mob .dropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .prenav--wrapper.mob .dropdown-list-2 {
    position: static;
    inset: auto;
    min-width: 0;
    padding-top: 6px;
  }
}

/* --------------------------------------------------------------------------
   Interactive map: pins/hotspots + info-panel transition.

   Pins are appended into #panzoom-element (see _map.antlers.html script) so
   they pan/zoom with the map. The layer mirrors .map--image's scale(1.15) and
   centre origin so pin %-coords align with the artwork. The .map--pin--marker
   is counter-scaled in JS (transform: scale(1/zoom)) to stay a constant
   on-screen size — so its transform is owned by JS; styling lives on the pin.
   -------------------------------------------------------------------------- */
.map--pin--layer {
  position: absolute;
  inset: 0%;
  z-index: 4;
  transform: scale(1.15);
  transform-origin: center;
  pointer-events: none; /* layer is inert; only the pins capture clicks */
}

.map--pin {
  position: absolute;
  transform: translate(-50%, -50%); /* left/top = marker centre */
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}

.map--pin--marker {
  display: block;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px; /* centre the dot on the pin's anchor point */
  border-radius: 50%;
  background-color: var(--colours--highlight);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--colours--highlight) 35%, transparent),
              0 2px 6px rgba(0, 0, 0, .35);
  transition: box-shadow .2s ease;
}

.map--pin:hover .map--pin--marker,
.map--pin:focus-visible .map--pin--marker {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--colours--highlight) 30%, transparent),
              0 2px 8px rgba(0, 0, 0, .4);
}

/* Pulsing halo to draw the eye to clickable points. */
.map--pin--marker::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--colours--highlight) 55%, transparent);
  animation: map-pin-pulse 2.2s ease-out infinite;
}

@keyframes map-pin-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--colours--highlight) 55%, transparent); }
  70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--colours--highlight) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--colours--highlight) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .map--pin--marker::after { animation: none; }
}

/* Info panel is opened/closed by setting its inline transform in JS; give it a
   smooth slide. (We drive the info panel ourselves rather than via Webflow IX3
   so per-pin content can be populated on open.) */
.map--information--panel {
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   Sticky icons — remember closed state across page loads.

   Webflow's IX runs an open-on-load animation (link wrappers slide in from
   translateX(150%) → 0%) and a close toggle on the arrow (link wrappers slide
   back to 150%, arrow flips 180deg). That toggle state is in-memory only, so
   the icons re-open on every load. We persist a closed flag in localStorage
   and, when set, force the closed transforms here. !important overrides
   Webflow's inline IX transforms (including the load-in) so there's no
   open→close flash. The .close arrow itself is unaffected (not a .link) so it
   stays in place for re-opening. The toggle is driven in JS (layout) which
   intercepts the click so Webflow's own handler doesn't fight it.
   -------------------------------------------------------------------------- */
html.sticky-closed .sticky--icons .sticky-icon--wrapper.link {
  transform: translateX(150%) !important;
}
html.sticky-closed .sticky--icons .cta-arrow--container {
  transform: rotate(180deg) !important;
}
html.sticky-closed .sticky--icons--wrapper .sticky--icons--bg {
  transform: translateX(100%) !important;
}

/* On phones the tray docks below the nav (top-right) instead of bottom-right,
   so the open/close arrow reads better first in the column, not last. */
@media screen and (max-width: 479px) {
  .sticky--icons .sticky-icon--wrapper.close {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   Body text (Bard) renders raw <p> tags, each with a bottom margin. Drop the
   trailing margin so a body block never adds extra space before the CTAs /
   below the text. Applies to every .text-block--body widget; harmless on the
   ones that still strip <p> (no <p> = nothing to match).
   -------------------------------------------------------------------------- */
.text-block--body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Berth enquiry — 3-step form (01 yacht specs / 02 contact / 03 dates).

   Webflow only built step 01; steps 02/03 are hand-built in _berth.antlers.html
   and toggled by its inline JS. Each step is its own .berth-form grid. The
   original step-01 fields keep their w-node ids for grid placement; the new
   fields have none, so spanning is done with these classes instead.
   -------------------------------------------------------------------------- */
.berth-form--full {
  grid-column: 1 / -1;
}

/* Back + next/submit each sit in their own .form-field--wrapper.button grid cell
   (auto-placed side by side), so .form--submit spreads label/chevron across the
   cell exactly like the original Webflow submit. As real <button>s they must lose
   the UA chrome (webflow.css already zeroes the border) and keep site typography. */
.berth-form .form--submit {
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  width: 100%;
}

/* Completed breadcrumb items are click-targets to step back. */
.form--breadcrumb .breadcrumb--item {
  cursor: pointer;
}

/* Native date inputs: keep the webflow text-field look. */
.berth-form input[type="date"].form--field {
  -webkit-appearance: none;
  appearance: none;
}

/* Enquiry-type <select> (contact / enquiry forms): a native <select> keeps its
   OS chrome (rounded box, inner padding, native arrow) even though .form--field
   zeroes border/padding/background — because `appearance` isn't reset. That's
   why it looks boxed while the sibling text inputs are clean underlines. Strip
   the native chrome and add a matching navy chevron so it lines up with the
   other fields but still reads as a dropdown. */
select.form--field.w-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23123d64' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px 8px;
  padding-right: 20px;
  cursor: pointer;
}

/* Field text is h6-styled to match its placeholder (the enquiry/berth/newsletter
   underline look). Export ≥52 re-styled .form--field to 1rem/400 in the synced
   Webflow CSS, which made typed text a different font-size/weight from the h6
   placeholders — this lives here so CSS re-syncs can't wipe it again.
   The h6 size (11px) applies on mobile too: iOS Safari's zoom-to-field on
   focus (fires under 16px) is suppressed by the iOS-only maximum-scale=1
   viewport guard in layout.antlers.html — do NOT re-add a 16px mobile bump. */
.form--field,
select.form--field.w-select,
textarea.form--field {
  font-size: var(--font-sizes--h6);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Step cross-fade — the JS fades the outgoing step to 0, swaps display, then fades the
   incoming one back in (250ms each way; keep in sync with FADE in _berth.antlers.html). */
.berth-form-steps .berth-form {
  transition: opacity .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .berth-form-steps .berth-form {
    transition: none;
  }
}



/* --------------------------------------------------------------------------
   Full Screen widget — quote_position dropdown (Top / Bottom). Webflow only
   built the bottom-aligned quote; .top mirrors .text-over-fs-image--text.top
   (nav-height padding so a top quote clears the fixed nav). .bottom is the
   base .full-screen--text behaviour, no rule needed. The shadow gradient
   flips to fall from the top edge — it's display:none in the Webflow CSS
   today, but stays correct if a re-export enables it.
   -------------------------------------------------------------------------- */
.full-screen--text.top {
  align-items: flex-start;
  padding-top: var(--nav--nav-height-padding);
}

.full-screen--text.top .full-screen--text--shadow {
  background-image: linear-gradient(175deg, #000, #0000 44%);
}

/* --------------------------------------------------------------------------
   Bard body copy — body_text renders its real <p> tags (strip_tags('p')
   removed from the templates), so multi-paragraph content keeps its breaks.
   The wrapper's own spacing handles the gap below the block, so the final
   paragraph's 10px margin-bottom (webflow.css `p`) must not double up.
   :last-child also covers a single-paragraph render.
   -------------------------------------------------------------------------- */
.body-text > p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Sticky icons overlay — icons are CMS-driven (sticky_icons global). Internal
   links load in the overlay iframe; the Contact Us icon reveals the inline
   contact form panel instead (see partials/_sticky_icons.antlers.html). The
   Webflow design ships the overlay shell empty, so the body layout, iframe
   sizing and light content background are ours. Icon wrappers became <div>s
   (the export dropped the <a>), so they need their pointer cursor back.
   -------------------------------------------------------------------------- */
.sticky--icons .sticky-icon--wrapper.link {
  cursor: pointer;
}

.sticky-icons--overlay--header h5 {
  color: var(--colours--white);
  text-transform: uppercase;
}

.sticky-icons--overlay--body {
  min-height: 0;
  flex-flow: column;
  display: flex;
}

.sticky-icons--overlay--frame {
  flex: 1;
  width: 100%;
  border: 0;
  background-color: var(--colours--white);
}

.sticky-icons--overlay--form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background-color: var(--colours--white);
}

/* Belt-and-braces scroll lock while the overlay is open (Lenis is also
   stopped by the overlay script — this covers pages where it never booted). */
html.sticky-overlay-open,
html.sticky-overlay-open body {
  overflow: hidden;
}

/* Page rendered INSIDE the overlay iframe (html.in-overlay is stamped
   pre-paint in layout.antlers.html when window.self !== window.top):
   hide the site chrome so only the page content shows in the panel. */
html.in-overlay .navbar,
html.in-overlay .footer,
html.in-overlay .sticky--icons--wrapper,
html.in-overlay .sticky-icons--overlay {
  display: none !important;
}

/* The form widgets' reveal is an IX3 scroll-into-view animation (elements are
   stamped opacity:0 / translated at boot). Inside the overlay panel that
   trigger never fires — the panel is display:none at IX3 boot and scrolls in
   its own container, not the page — so neutralise the initial states there. */
.sticky-icons--overlay--form .form--header,
.sticky-icons--overlay--form .form--sub-header,
.sticky-icons--overlay--form .form--breadcrumb,
.sticky-icons--overlay--form .form--body,
.sticky-icons--overlay--form .form-field--wrapper,
.sticky-icons--overlay--form .form--checkbox {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  visibility: visible !important;
}

/* Stretch the embedded form section over the full panel height so its
   decorative .overlay--wrapper art (absolute, inset 0) reaches the bottom
   edge, and centre the form vertically. Auto margins rather than
   justify-content: center so a form taller than the panel still scrolls
   from its top edge instead of clipping. */
.sticky-icons--overlay--form > section {
  min-height: 100%;
  margin-bottom: 0;
  display: flex;
  flex-flow: column;
}

.sticky-icons--overlay--form .form--wrapper {
  margin-top: auto;
  margin-bottom: auto;
}

/* Diagonal decorative line used by the text_image_story widgets. The rules
   originally lived in an inline <style> inside story 1's embed, so story 2
   (which only carries the bare <svg>) rendered an invisible, stroke-less
   line on pages without a story 1 widget. */
.diagonal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.diagonal line {
  stroke: #004B9F;
  stroke-opacity: 0.3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Old-content articles (imported HTML): the wrapper is a flex column with a
   32px gap; the negative margin pulls each following block up, netting the
   paragraph spacing down to 16px. */
.article--old-content p {
  margin-bottom: -16px;
}

/* Images sit as bare <img> siblings after paragraphs in the Bard output;
   offset the paragraph's negative margin so images keep breathing room. */
.article--old-content p + img {
  margin-top: 2rem;
}

/* SEO: headings demoted from <h1> to <h2> in shared widgets (contact, event,
   newsletter, berth forms + full-screen-accordion stats) so each page has a
   single <h1>. This class restores the original <h1> sizing so the demotion is
   purely semantic with no visual change. */
.as-h1 {
  font-size: var(--font-sizes--h1-small);
  letter-spacing: -.2px;
  text-transform: none;
}

/* The fs-accordion stat was a plain div sized by its own class; keep the
   stat-text size (custom.css loads last, so .as-h1 would otherwise win). */
.fs-accordion--stat--text.as-h1 {
  font-size: var(--font-sizes--stat-text);
  letter-spacing: normal;
}

/* Accessible visually-hidden utility (used for the homepage's semantic <h1>,
   whose visible hero is a text-free image/video). Off-screen but readable by
   search engines and screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* SEO: the article detail title is now the page <h1> (promoted from <h3>);
   keep the original h3 sizing so it's a semantic-only change. */
.as-h3 {
  font-size: var(--font-sizes--h3);
  letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   Pattern-margin pages (tier-3 header with show_pattern_image, e.g. the
   event-space pages): the fixed .pattern--margin strip occupies one
   page-padding of the left edge, so the header text gets doubled horizontal
   padding via .t3-header--text--wrapper.lrg--padding. Mirror that on every
   widget below the header — default.antlers.html adds .lrg--padding to
   .page--wrapper on these pages. Uses the same page-padding var, so it
   tracks the 64px -> 32px responsive step automatically. Full-bleed imagery
   (full_screen, header image) intentionally stays edge-to-edge, matching
   the header's own treatment. The video widget (.video--wrapper, which has no
   .page-max-width container) IS included — Jamie wants it inset like the rest.
   -------------------------------------------------------------------------- */
.page--wrapper.lrg--padding .page-max-width,
.page--wrapper.lrg--padding .article--max-width,
.page--wrapper.lrg--padding .fs-accordion--text,
.page--wrapper.lrg--padding .config-accordion--text,
.page--wrapper.lrg--padding .video--wrapper {
  padding-left: calc(var(--page-sizes--page-padding) + var(--page-sizes--page-padding));
  padding-right: calc(var(--page-sizes--page-padding) + var(--page-sizes--page-padding));
}
/* The video wrapper caps its content at 1200px (webflow.css) and the site is
   border-box, so the gutter padding above would eat INTO that cap and
   over-shrink the video on desktop. content-box makes the padding additive:
   below ~1456px viewports the video's edges align to the same gutters as every
   other widget, and on very large screens the 1200px centred cap behaves
   exactly as it did before. */
.page--wrapper.lrg--padding .video--wrapper {
  box-sizing: content-box;
}
/* Stacked config accordion (≤991px): the diagram wrapper carries its own single
   page-padding insets, which the pattern strip swallows entirely on the left —
   the plan sat flush against the strip while the text below was inset double.
   Desktop is left alone: there the image column is flush-right by design. */
@media screen and (max-width: 991px) {
  .page--wrapper.lrg--padding .config--image--wrapper {
    padding-left: calc(var(--page-sizes--page-padding) + var(--page-sizes--page-padding));
    padding-right: calc(var(--page-sizes--page-padding) + var(--page-sizes--page-padding));
  }
}
/* Mobile: the doubled gutters (2 × 32px = 64px per side) ate too much width on
   phones. Tighten to 16px of VISIBLE breathing room instead — the fixed
   .pattern--margin strip (one page-padding wide, full height) still runs down
   the left edge on mobile, so the left inset must clear it: content sits 16px
   from the strip's inner edge and 16px from the right viewport edge. The tier-3
   header wrapper is included so header and widget text stay left-aligned. */
@media screen and (max-width: 767px) {
  .page--wrapper.lrg--padding .page-max-width,
  .page--wrapper.lrg--padding .article--max-width,
  .page--wrapper.lrg--padding .fs-accordion--text,
  .page--wrapper.lrg--padding .config-accordion--text,
  .page--wrapper.lrg--padding .config--image--wrapper,
  .page--wrapper.lrg--padding .video--wrapper,
  .t3-header--text--wrapper.lrg--padding {
    padding-left: calc(var(--page-sizes--page-padding) + 16px);
    padding-right: 32px;
  }
}

/* --------------------------------------------------------------------------
   Footer newsletter form (Statamic "newsletter" + HubSpot mirror). The form
   sits on the navy footer, so:
   - the consent checkbox border (default navy) is invisible -> make it white;
   - the base .newsletter--grid is a rigid 1fr 1fr, which crams the added
     consent rows + button 2-per-row. Keep the name fields sharing the top
     row and span everything else full width.
   -------------------------------------------------------------------------- */
.newsletter--grid .newsletter--full {
  grid-column: 1 / -1;
}
.newsletter--grid .checkbox {
  border-color: var(--colours--white);
}
/* In-page Newsletter widget (page_builder/_newsletter) uses the .enquiry--form
   grid (also a rigid 1fr 1fr). Keep first/last name sharing the top row, then
   stack email, both consent checkboxes and the submit button full width. */
.enquiry--form .newsletter--full {
  grid-column: 1 / -1;
}
/* Field text is navy by default (for light forms); on the navy footer the typed
   value is invisible, so make it white. Placeholder stays its muted grey. */
.newsletter--grid .form--field {
  color: var(--colours--white);
}
/* Submit/next/back are real <button> elements, but .form--submit never reset the
   browser default background/border/padding — so every button carried a grey box
   with inset padding (subtle on the light enquiry forms, glaring on the navy
   footer). Reset globally so all form buttons read as clean text CTAs aligned to
   the field underline, matching the <a>/<div> variants used elsewhere. */
.form--submit {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* Webflow's .w-form-done/.w-form-fail default to grey/pink boxes — illegible on
   the navy footer. Drop the box and use legible text colours. */
.newsletter--form .w-form-done {
  background: transparent;
  padding: 0;
  text-align: left;
  color: var(--colours--white);
}
.newsletter--form .w-form-fail {
  background: transparent;
  padding: 0;
  color: #ffb3b3;
}

/* Tier-2 header, phones (<=479px): the Webflow stylesheet gives the hero text
   wrapper page-padding on the RIGHT only (marina-port-vell.webflow.css ~L6036),
   squeezing the title/copy against the left edge — flagged on the Event Spaces
   page but shared by every tier-2 sub-page. Override it to 32px (custom.css
   loads after the Webflow CSS, same specificity, so this wins; survives CSS
   re-exports — adjust the padding in Webflow too to fix it at source). */
@media screen and (max-width: 479px) {
  .t2-header--text--wrapper {
    padding-right: 32px;
  }
}

/* Feature panel, light scheme: .feature-image--mask--vert is hard-coded dark
   navy in the Webflow CSS (no light variant exists there, unlike the white
   base + .blue modifier pattern of image--mask--vert / card-image--mask--vert).
   The Webflow export uses the navy mask in BOTH variants, so the light widget
   revealed its image from behind a blue block. Give the light branch a white
   mask to match the other light-scheme reveal masks. */
.feature-image--mask--vert.light {
  background-color: var(--colours--white);
}

/* Articles & itineraries: kill the remaining Webflow IX3 entrance animations
   (the body-image reveal masks were already removed from the templates).
   IX3 drives these with GSAP inline styles, which lose to !important here:
   - .news--header--image: hero load anim grows height 0%->100% (its base
     style is height:100%, so pinning that is a no-op once IX3 is out).
   - .article--text: page-intro/text blocks fade opacity 0->100% on scroll.
   Both classes are used only in article.antlers.html / itinerary.antlers.html,
   so no scoping is needed. */
.news--header--image {
  height: 100% !important;
}
.article--text {
  opacity: 1 !important;
  transform: none !important;
}