@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');
/*!
 * Yacht Charter — design-system bundle (ported from the CY production master CSS).
 * NOTE: the @import above must stay the FIRST line — it loads the UPRIGHT Bodoni Moda
 * faces. Without it only the italic faces were loading, so the header wordmark
 * (Bodoni Moda normal 600) fell back to sans-serif. 2026-07-01.
 * AVELIS v4 BRAND (applied 2026-06-19): the :root tokens are the single source
 * of truth. Nightfall Navy #031D3B (the one blue), Lantern Gold #C9A96A (the
 * scarce accent — muted, never metallic-yellow), Pearl #EDEFF1. Type: Bodoni
 * Moda (display) + Inter (body); the playful Grandstander face is dropped.
 */

/* ==========================================================
   Coconut Yachts — MASTER CSS (Stable / Production)
   Scope: Site-wide design system (EXCLUDES CF/Concierge/Popup forms)
   Priority: Stability + function over novelty
   Do not add any global input/select/textarea styling to the master file.
   ========================================================== */

/* --------------------------
   0) FOUNDATION & TOKENS
--------------------------- */
:root{
  /* Brand colors */
  --cy-navy: #031D3B;
  --cy-navy-2: #061d3a; /* deeper navy for overlays/popup shells */
  --cy-azure: #E1E8EB;  /* light azure surface */
  --cy-white: #ffffff;
  /* Avelis house palette (v4) */
  --cy-nightfall: #031D3B; /* Nightfall Navy — the one blue */
  --cy-slate: #4F647E;     /* Dusk Slate — dividers, supporting surfaces */
  --cy-mist: #949FB1;      /* Evening Mist — soft accents, captions */
  --cy-pearl: #EDEFF1;     /* Pearl — light backgrounds, text on navy */

  /* Text */
  --cy-text: #1f2937;         /* dark gray */
  --cy-text-muted: #6b7280;   /* muted gray */
  --cy-text-on-navy: rgba(255,255,255,.92);
  --cy-text-on-navy-muted: rgba(255,255,255,.72);

  /* Avelis Lantern Gold — the single, scarce accent (muted, never metallic-yellow) */
  --cy-gold: #C9A96A;
  --cy-gold-2: #D8BE86;
  --cy-gold-gradient: linear-gradient(135deg,
    #C9A96A 0%,
    #D8BE86 50%,
    #B89255 100%
  );

  /* Borders */
  --cy-border: rgba(15, 23, 42, 0.12);
  --cy-border-soft: rgba(15, 23, 42, 0.08);

  /* Radius (keep minimal + consistent) */
  --cy-radius-sm: 8px;
  --cy-radius: 12px;

  /* Shadows (lucid, restrained) */
  --cy-shadow-1: 0 6px 18px rgba(0,0,0,0.08);
  --cy-shadow-2: 0 14px 34px rgba(0,0,0,0.12);

  /* Motion (stable) */
  --cy-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cy-fast: 160ms;
  --cy-med: 260ms;

  /* Layout */
  --cy-container: 1280px;
  --cy-gutter: 24px;
  --font-display: "Bodoni Moda", Didot, Georgia, serif;
  --font-ui: Inter, system-ui, -apple-system, sans-serif;
  --font-body: Inter, system-ui, -apple-system, sans-serif;
  --cy-card-title-size: clamp(22px, 2.4vw, 30px);
}

/* --------------------------
   1) GLOBAL BASE (SAFE)
   No global form element styling here.
--------------------------- */
*{ box-sizing:border-box; }

html, body{ max-width:100%; }

body{
  margin:0;
  color:var(--cy-text);
  background:var(--e-global-color-026ed23, #021428);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

/* Media safety (prevents overflow / horizontal scroll) */
img, svg, video, canvas{
  max-width:100%;
  height:auto;
}

/* Safer long strings in content areas */
.cy-prose, .cy-prose p, .cy-prose a, .cy-prose li{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* --------------------------
   2) TYPOGRAPHY SYSTEM
--------------------------- */

/* Headings: Bodoni Moda (premium) */
h1,h2,h3,h4,h5,h6,
.cy-h1,.cy-h2,.cy-h3,.cy-h4,.cy-h5,.cy-h6{
  font-family: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  color: var(--cy-navy);
  margin: 0 0 0.6em;
  letter-spacing: .01em;
  line-height: 1.15;
}

h1, .cy-h1{
  font-size: clamp(28px, 4.8vw, 64px);
}

h1,h2,h3,h4,h5,h6{
  text-wrap: balance;
}

h1, .cy-h1{ font-size: clamp(26px, 5.2vw, 56px); }
h2, .cy-h2{ font-size: clamp(22px, 4.4vw, 44px); }
h3, .cy-h3{ font-size: clamp(18px, 3.2vw, 34px); }
h4, .cy-h4{ font-size: clamp(16px, 2.6vw, 28px); }
h5, .cy-h5{ font-size: clamp(14px, 2.2vw, 22px); }
h6, .cy-h6{ font-size: clamp(13px, 2.0vw, 18px); }

@media (max-width: 420px){
  h1,h2,h3,h4,h5,h6,
  .cy-h1,.cy-h2,.cy-h3,.cy-h4,.cy-h5,.cy-h6{
    letter-spacing: 0;
  }
}

/* Opt-out utility: allow wrapping if a specific heading must show fully */
.cy-heading-wrap{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Body text/labels: Inter (already on body) */
p, .cy-text, .cy-label, .cy-meta{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Brand accent / personalization: Grandstander */
.cy-accent,
.cy-tag,
.cy-btn,
.cy-toggle-label,
footer .cy-footer-accent{
  font-family: "Bodoni Moda", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Links */
a{
  color: inherit;
  text-decoration: none;
}
a:hover{ color: var(--cy-gold); }

/* --------------------------
   3) LAYOUT PRIMITIVES
--------------------------- */
.cy-container{
  max-width: var(--cy-container);
  margin: 0 auto;
  padding: 0 var(--cy-gutter);
}

.cy-section{
  padding: 64px 0;
}

/* --------------------------
   4) INTERACTION SYSTEM (LUCID)
--------------------------- */
.cy-hover-lift{
  transition: transform var(--cy-med) var(--cy-ease), box-shadow var(--cy-med) var(--cy-ease);
}
.cy-hover-lift:hover{
  transform: translateY(-6px);
  box-shadow: var(--cy-shadow-2);
}

/* Global hover card class you already use */
.cy-card-effect{
  border-radius: var(--cy-radius);
  transition: transform var(--cy-med) var(--cy-ease), box-shadow var(--cy-med) var(--cy-ease);
}
.cy-card-effect:hover{
  transform: translateY(-6px);
  box-shadow: var(--cy-shadow-2);
}

/* Focus ring for opt-in interactive elements only */
.cy-focus:focus,
.cy-focus:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.25);
}

/* --------------------------
   5) BUTTONS (OPT-IN CLASSES)
   Stable + Elementor-compatible
--------------------------- */

/* Base Button Utility (for custom HTML usage if needed) */
.cy-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  border:0;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform var(--cy-fast) var(--cy-ease),
              box-shadow var(--cy-fast) var(--cy-ease),
              opacity var(--cy-fast) var(--cy-ease);
}

/* Gold Utility */
.cy-btn--gold{
  background: var(--cy-gold-gradient);
  color: #111;
  box-shadow: var(--cy-shadow-1);
}
.cy-btn--gold:hover{
  transform: translateY(-2px);
  box-shadow: var(--cy-shadow-2);
}
.cy-btn--gold:active{
  transform: translateY(0);
  box-shadow: var(--cy-shadow-1);
}

/* Preserve Elementor Premium Hook */
.elementor-button.cy-btn-gold-premium{
  /* Reserved for legacy compatibility */
}

/* --------------------------
   HERO CTA SYSTEM
--------------------------- */

/* CTA Row Layout */
.cy-cta-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Elementor Wrapper → Button */
.cy-cta-btn .elementor-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height: 46px;
  padding: 14px 26px;
  border-radius: 6px;

  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  transition: transform .25s ease,
              box-shadow .25s ease,
              opacity .25s ease,
              background .25s ease;

  border: 0;
}

/* PRIMARY (Gold) */
.cy-cta-btn .elementor-button{
  background: var(--cy-gold-gradient);
  color: #111;
  box-shadow: var(--cy-shadow-1);
}

.cy-cta-btn .elementor-button:hover{
  transform: translateY(-2px);
  box-shadow: var(--cy-shadow-2);
}

/* SECONDARY (Glass / Navy) */
.cy-cta-btn--secondary .elementor-button{
  background: rgba(255,255,255,0.16);
  color: var(--cy-text-on-navy);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: none;
}

.cy-cta-btn--secondary .elementor-button:hover{
  background: rgba(255,255,255,0.22);
  transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 480px){
  .cy-cta-row{
    gap: 12px;
  }
  .cy-cta-btn,
  .cy-cta-btn--secondary{
    width:100%;
    max-width:320px;
  }
}

/* --------------------------
   6) CARD SYSTEM (UNIFIED)
--------------------------- */
.cy-card{
  background: var(--cy-white);
  border: 1px solid var(--cy-border);
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow-1);
  overflow: hidden;
}

.cy-card--surface{
  background: var(--cy-azure);
  border-color: var(--cy-border-soft);
}

.cy-card--navy{
  background: var(--cy-navy);
  color: var(--cy-text-on-navy);
  border-color: rgba(255,255,255,.12);
}

/* Apply unified behavior to your existing card implementations */
.cy-fleet-card,
.cy-post-card,
.cy-minimal-card{
  border-radius: var(--cy-radius-sm);
  transition: transform var(--cy-med) var(--cy-ease), box-shadow var(--cy-med) var(--cy-ease);
}
.cy-fleet-card:hover,
.cy-post-card:hover,
.cy-minimal-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--cy-shadow-2);
}

/* --------------------------
   7) BADGES / OVERLAYS (BASE + MODIFIERS)
--------------------------- */
.cy-length-overlay{
  /* Keep your fleet base behavior; ensure consistent look */
  border-radius: 6px;
  letter-spacing: .06em;
}

/* Gold & silver modifiers already exist in your snippets.
   Keep them; ensure they remain modifier-style only. */

/* --------------------------
   8) GRIDS (4/3/2/1 POLICY)
   Use density classes to pick 4-up or 3-up per section.
--------------------------- */
.cy-grid{
  display:grid;
  gap: 24px;
  align-items: stretch;
}

/* Default: 3-up desktop */
.cy-grid--cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Light cards: 4-up desktop */
.cy-grid--cards.cy-grid--dense{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Tablets */
@media (max-width: 1024px){
  .cy-grid--cards,
  .cy-grid--cards.cy-grid--dense{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 768px){
  .cy-grid--cards,
  .cy-grid--cards.cy-grid--dense{
    grid-template-columns: 1fr;
  }
  .cy-container{ padding: 0 16px; }
}

/* Ensure no accidental overflow inside cards */
.cy-card, .cy-fleet-card, .cy-post-card, .cy-minimal-card{
  min-width: 0;
}

/* --------------------------
   9) HEADER (ELEMENTOR LOCATION HEADER)
   Design rules:
   - Desktop/tablet: menu visible
   - Mobile: brand + button only (menu hidden)
   - Button always visible
--------------------------- */
header.elementor-location-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  background: linear-gradient(to bottom, rgba(18, 52, 78, 0.55), rgba(18, 52, 78, 0.35));
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  transition: background var(--cy-med) ease, backdrop-filter var(--cy-med) ease;

  padding: 25px 0;
}

/* Mobile: show ONLY brand + button, keep them on one row */
@media (max-width: 768px){
  header.elementor-location-header{
    padding: 12px 0;
  }

  /* Ensure predictable 2-item row layout */
  header.elementor-location-header .elementor-container,
  header.elementor-location-header .e-con{
    display:flex;
    flex-wrap: nowrap;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
  }

  /* Force-hide any menu/nav if Elementor setting is missed */
  header.elementor-location-header .elementor-widget-nav-menu,
  header.elementor-location-header .elementor-widget-wp-widget-nav_menu,
  header.elementor-location-header .elementor-nav-menu{
    display:none !important;
  }

  /* Brand heading must remain visible and not push the button off */
  header.elementor-location-header .elementor-heading-title{
    flex: 1 1 auto;
    min-width: 0;

    font-size: 16px;
    line-height: 1.1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;

    max-width: 62vw;
    text-align: left;
  }

  /* Button always visible and compact */
  header.elementor-location-header .elementor-widget-button,
  header.elementor-location-header .elementor-button-wrapper{
    flex: 0 0 auto;
    min-width: 0;
  }

  header.elementor-location-header .elementor-button{
    white-space: nowrap;
    padding: 9px 12px;
    font-size: 11px;
    letter-spacing: .08em;
    min-height: 38px;
  }
}

/* Extra small phones */
@media (max-width: 420px){
  header.elementor-location-header .elementor-heading-title{
    max-width: 56vw;
    font-size: 15px;
  }
  header.elementor-location-header .elementor-button{
    padding: 8px 10px;
    font-size: 10.5px;
    min-height: 36px;
  }
}

/* --------------------------
   10) FOOTER CONTACT (SCOPE IT)
   Avoid generic collisions: scope under .footer-contact
--------------------------- */
.footer-contact .contact-item{
  display:flex;
  align-items:flex-start;
  gap: 15px;
  margin-bottom: 25px;
}
.footer-contact .contact-item .icon-box{
  flex-shrink:0;
  width: 20px;
  text-align:center;
  padding-top: 4px;
}
.footer-contact .contact-item i{
  color: var(--cy-gold);
  font-size: 1.1rem;
}
.footer-contact .contact-item .text-box{
  display:flex;
  flex-direction:column;
}
.footer-contact .contact-item strong{
  color: var(--cy-white);
  font-weight: 600;
  letter-spacing: .02em;
}
.footer-contact .contact-item small{
  color: rgba(255,255,255,.72);
  margin-top: 4px;
}

.footer-contact .contact-item a{ color: var(--cy-white); }
.footer-contact .contact-item a:hover{ color: var(--cy-gold); }

@media (max-width: 768px){
  .footer-contact{ text-align:center; }
  .footer-contact .contact-item{
    flex-direction:column;
    align-items:center;
    gap: 8px;
  }
  .footer-contact .contact-item .icon-box{
    padding-top:0;
    margin-bottom:5px;
  }
}

/* Footer bottom bar */
.cy-footer-bottom{
  color: var(--cy-text-on-navy);
  font-size: 14px;
  text-align: center;
  padding: 18px 0;
}

/* Developer link */
.cy-footer-bottom .cy-dev-link{
  color: var(--cy-text-on-navy);
  font-size: 16px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.cy-footer-bottom .cy-dev-link:hover{
  opacity: 0.8;
}

/* --------------------------
   11) MEDIA RULES (OPT-IN PARTNERS ONLY)
--------------------------- */
.cy-partners img{
  filter: grayscale(100%) opacity(0.65);
  transition: filter var(--cy-med) ease, transform var(--cy-med) ease;
  mix-blend-mode: multiply;
}
.cy-partners img:hover{
  filter: grayscale(0%) opacity(1);
  transform: scale(1.03);
  mix-blend-mode: normal;
}

/* --------------------------
   12) BLOG TEMPLATE (SCOPE TO WRAPPER)
   Prevent bleeding into other pages.
--------------------------- */
.cy-blog-master{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--cy-text);
}

/* Allow blog to keep its “editorial” feel without redefining global body */
.cy-blog-master .cy-italic{
  font-family: "Bodoni Moda", serif;
  font-style: italic;
}
.cy-blog-master .gold{ color: var(--cy-gold) !important; }
.cy-blog-master .azure-bg{ background-color: var(--cy-azure) !important; }
.cy-blog-master .navy{ color: var(--cy-navy) !important; }

/* --------------------------
   13) EDITOR COMPATIBILITY HOOKS
   Replace Elementor 'selector {..}' with opt-in classes.
--------------------------- */

/* Home owner icon swap hook (your existing class is good) */
.cy-swap-icon:hover .elementor-button-icon i,
.cy-swap-icon:hover .elementor-button-icon svg{
  opacity: 0;
}
.cy-swap-icon:hover .elementor-button-icon{
  position: relative;
}
.cy-swap-icon:hover .elementor-button-icon::after{
  content: '\f05e';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  color: #d9534f;
}

/* Contact map glass panel: add class "cy-glass-panel" to the widget/section */
.cy-glass-panel{
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* --------------------------
   14) UTILITIES (MINIMAL)
--------------------------- */
.cy-bg-navy{ background: var(--cy-navy); color: var(--cy-text-on-navy); }
.cy-text-muted{ color: var(--cy-text-muted); }

/* Contact form submit → Primary Gold Button */
.wpcf7-submit,
form input[type="submit"],
form button[type="submit"]{
  background: var(--cy-gold-gradient);
  color: #111;
  border: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 28px;
  border-radius: 999px;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;

  min-height: 44px;

  box-shadow: var(--cy-shadow-1);
  transition: transform var(--cy-fast) var(--cy-ease),
              box-shadow var(--cy-fast) var(--cy-ease);
}

/* Hover */
.wpcf7-submit:hover,
form input[type="submit"]:hover,
form button[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: var(--cy-shadow-2);
}

/* ==========================================================
   FLEET GRID — re-derived from the LIVE snippet (2026-06-19).
   Scoped to .cy-grid-container.cy-grid--fleet.
   (#C9A96A here = current accent; Avelis rebrand -> #C9A96A.)
   ========================================================== */
.cy-grid-container.cy-grid--fleet{
  display:grid; grid-template-columns:1fr; gap:26px;
  max-width:var(--cy-container); margin:0 auto; padding:0 var(--cy-gutter); align-items:stretch;
}
@media (min-width:769px){ .cy-grid-container.cy-grid--fleet{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } }
@media (min-width:1025px){ .cy-grid-container.cy-grid--fleet{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; } }
/* Fleet stays 3-col on wide desktop (9 yachts → clean 3×3, matches live per_page-12 fix + Avelis rebrand goal) [2026-06-24]; was repeat(4) → orphan 9th card */
@media (min-width:1200px){ .cy-grid-container.cy-grid--fleet{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; } }
.cy-grid-container.cy-grid--fleet .cy-fleet-card{
  display:flex; flex-direction:column; height:100%; min-width:0; position:relative;
  background:#fff; border:1px solid rgba(7,24,48,0.10); border-radius:var(--cy-radius);
  overflow:hidden; box-shadow:var(--cy-shadow-1);
  transition:transform var(--cy-med) var(--cy-ease), box-shadow var(--cy-med) var(--cy-ease), border-color var(--cy-med) var(--cy-ease);
  text-decoration:none; color:inherit;
}
.cy-grid-container.cy-grid--fleet .cy-fleet-card:hover{ transform:translateY(-4px); box-shadow:var(--cy-shadow-2); border-color:rgba(7,24,48,0.16); }
.cy-grid-container.cy-grid--fleet .cy-card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; line-height:0; }
.cy-grid-container.cy-grid--fleet .cy-card-media img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; vertical-align:middle; }
.cy-grid-container.cy-grid--fleet .cy-card-body{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 22px 22px; }
@media (max-width:768px){ .cy-grid-container.cy-grid--fleet .cy-card-body{ padding:22px 18px 20px; } }
.cy-grid-container.cy-grid--fleet .cy-yacht-title{ font-family:var(--font-display); font-size:var(--cy-card-title-size); line-height:1.15; margin:0 0 12px; color:var(--cy-navy); font-weight:700; overflow-wrap:anywhere; }
.cy-grid-container.cy-grid--fleet .cy-location-pill{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; max-width:100%; box-sizing:border-box; margin:0 0 14px; padding:8px 16px; border-radius:18px; background:#F3EFEA; border:1px solid rgba(201, 169, 106,0.45); color:var(--cy-navy); font-family:var(--font-ui); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; line-height:1.15; text-align:center; white-space:normal; }
.cy-grid-container.cy-grid--fleet .cy-location-pill .cy-loc-line{ display:block; white-space:nowrap; }
.cy-grid-container.cy-grid--fleet .cy-location-pill--multi{ border-radius:14px; padding:7px 16px; }
.cy-grid-container.cy-grid--fleet .cy-capacity-row{ width:100%; display:flex; justify-content:center; align-items:center; gap:8px; margin:0 0 12px; flex-wrap:wrap; }
.cy-grid-container.cy-grid--fleet .cy-capacity-icon{ width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; color:#C9A96A; flex:0 0 16px; }
.cy-grid-container.cy-grid--fleet .cy-capacity-icon svg{ width:16px; height:16px; display:block; fill:currentColor; }
.cy-grid-container.cy-grid--fleet .cy-capacity-label{ font-family:var(--font-ui); font-size:11px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:rgba(7,24,48,0.56); }
.cy-grid-container.cy-grid--fleet .cy-capacity-value{ font-family:var(--font-ui); font-size:15px; font-weight:800; color:var(--cy-navy); }
.cy-grid-container.cy-grid--fleet .cy-price-row{ display:flex; align-items:baseline; justify-content:center; gap:6px; flex-wrap:wrap; margin:0 0 14px; font-family:var(--font-ui); }
.cy-grid-container.cy-grid--fleet .cy-price-label{ font-size:11px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:rgba(7,24,48,0.56); }
.cy-grid-container.cy-grid--fleet .cy-price-value{ font-size:18px; font-weight:900; color:#C9A96A; }
.cy-grid-container.cy-grid--fleet .cy-price-duration{ font-size:12px; font-weight:700; color:rgba(7,24,48,0.5); }
.cy-grid-container.cy-grid--fleet .cy-yacht-desc{ width:100%; margin:0 0 18px; color:rgba(7,24,48,0.72); font-family:var(--font-body); font-size:14px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cy-grid-container.cy-grid--fleet .cy-spacer{ flex:1 1 auto; min-height:14px; }
.cy-grid-container.cy-grid--fleet .cy-card-cta-row{ width:100%; display:flex; justify-content:center; margin-top:auto; padding-top:6px; }
.cy-grid-container.cy-grid--fleet .cy-text-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-ui); font-size:18px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:#C9A96A; padding-bottom:10px; border-bottom:2px solid rgba(201, 169, 106,0.45); }
.cy-grid-container.cy-grid--fleet .cy-arrow{ display:inline-block; }
@media (max-width:480px){
  .cy-grid-container.cy-grid--fleet .cy-yacht-title{ font-size:clamp(22px,7vw,30px); }
  .cy-grid-container.cy-grid--fleet .cy-text-btn{ font-size:16px; }
}
/* ==========================================================
   FLEET TIERS — Signature / Prestige / Flagship rows.
   One <section.cy-tier-section> per tier (heading + its own grid).
   Used on BOTH the home fleet grid and the experience related grid.
   Both grids sit on the navy site background (#021428).
   ========================================================== */
/* The home fleet shortcode lives in an Elementor flex column (.cy-fleet-balanced)
   that had NO width rule, so it shrank to its content (one card wide). Free it to
   fill the row so the tier grid can lay out up to 3 cards across. */
.elementor-element.cy-fleet-balanced{ width:100%; max-width:100%; }

.cy-tier-section{ max-width:var(--cy-container); margin:0 auto 52px; padding:0 var(--cy-gutter); }
.cy-tier-section:last-child{ margin-bottom:8px; }
.cy-tier-heading{ text-align:center; margin:0 auto 26px; }
/* Light heading — both grids are on navy. The (0,3,0) selector also overrides the
   related snippet's inline navy rule, so headings show on the experience page too. */
.cy-tier-section .cy-tier-heading .cy-tier-title{
  font-family:var(--font-display); color:#EAF1F8; font-weight:700;
  font-size:clamp(22px,3vw,32px); line-height:1.1; margin:0; letter-spacing:.02em;
}
.cy-tier-section .cy-tier-heading .cy-tier-title::after{
  content:""; display:block; width:54px; height:2px; margin:12px auto 0; background:#C9A96A;
}
.cy-tier-section .cy-tier-heading .cy-tier-desc{
  margin:12px 0 0; font-family:var(--font-ui); font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(234,241,248,0.62);
}
/* The section owns the container width/gutter; the inner grid spans it fully and
   lays cards out with flexbox (not auto-fit, which collapses in a shrink-wrapped
   column). Max 3 per row; rows of 1–2 stay centered via justify-content. */
.cy-tier-section > .cy-grid-container.cy-grid--fleet,
.cy-tier-section > .cy-grid-container.cy-grid--related-yachts{
  max-width:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:30px;
}
.cy-tier-section > .cy-grid-container.cy-grid--fleet > .cy-fleet-card{ flex:0 1 260px; max-width:290px; min-width:0; }
/* Uniform card HEIGHT across all tiers/rows (every flex row otherwise equalizes to
   its own tallest card → rows differ). All yacht cards site-wide become one size;
   the flex spacer absorbs slack so the CTA stays bottom-aligned. */
.cy-tier-section .cy-grid-container.cy-grid--fleet .cy-fleet-card{ min-height:440px; }
.cy-tier-section > .cy-grid-container.cy-grid--related-yachts > .cy-related-card{ flex:0 1 360px; max-width:420px; min-width:0; }
@media (max-width:480px){
  .cy-tier-section > .cy-grid-container.cy-grid--fleet > .cy-fleet-card,
  .cy-tier-section > .cy-grid-container.cy-grid--related-yachts > .cy-related-card{ flex-basis:100%; max-width:100%; }
}
/* Compact the tiered fleet card so a full 3-up row fits a 14"/16" laptop height
   (shorter image, tighter body, smaller title, 2-line description). (0,4,0) beats
   the base fleet card rules. */
.cy-tier-section .cy-grid-container.cy-grid--fleet .cy-card-media{ aspect-ratio:16 / 9; }
.cy-tier-section .cy-grid-container.cy-grid--fleet .cy-card-body{ padding:14px 16px 14px; }
.cy-tier-section .cy-grid-container.cy-grid--fleet .cy-yacht-title{ font-size:16px !important; line-height:1.2; margin:0 0 6px; min-height:0 !important; height:auto !important; }
.cy-tier-section .cy-grid-container.cy-grid--fleet .cy-location-pill{ margin:0 0 7px; padding:6px 12px; }
.cy-tier-section .cy-grid-container.cy-grid--fleet .cy-capacity-row{ margin:0 0 7px; }
.cy-tier-section .cy-grid-container.cy-grid--fleet .cy-price-row{ margin:0 0 7px; }
.cy-tier-section .cy-grid-container.cy-grid--fleet .cy-yacht-desc{ -webkit-line-clamp:2; font-size:13px; line-height:1.5; margin:0 0 10px; }
.cy-tier-section .cy-grid-container.cy-grid--fleet .cy-spacer{ min-height:4px; }
.cy-tier-section .cy-grid-container.cy-grid--fleet .cy-card-cta-row .cy-text-btn{ font-size:14px; padding-bottom:8px; }
/* ==========================================================
   EXPERIENCE GRID — re-derived from the LIVE snippet (2026-06-19).
   Scoped to .cy-grid-container.cy-grid--experience. (#C9A96A -> Avelis #C9A96A on rebrand.)
   ========================================================== */
.cy-grid-container.cy-grid--experience{ display:grid; grid-template-columns:1fr; gap:26px; max-width:var(--cy-container); margin:0 auto; padding:0 var(--cy-gutter); align-items:stretch; }
@media (min-width:769px){ .cy-grid-container.cy-grid--experience{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } }
@media (min-width:1025px){ .cy-grid-container.cy-grid--experience{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; } }
@media (min-width:1200px){ .cy-grid-container.cy-grid--experience{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; } }
.cy-grid-container.cy-grid--experience .cy-exp-card{ position:relative; display:flex; flex-direction:column; height:100%; min-width:0; width:100%; background:#fff; border:1px solid rgba(7,24,48,0.10); border-radius:var(--cy-radius); overflow:hidden; box-shadow:var(--cy-shadow-1); transition:transform var(--cy-med) var(--cy-ease), box-shadow var(--cy-med) var(--cy-ease), border-color var(--cy-med) var(--cy-ease); }
.cy-grid-container.cy-grid--experience .cy-exp-card:hover{ transform:translateY(-4px); box-shadow:var(--cy-shadow-2); border-color:rgba(7,24,48,0.16); }
.cy-grid-container.cy-grid--experience .cy-card-hit{ position:absolute; inset:0; z-index:1; display:block; }
.cy-grid-container.cy-grid--experience .cy-exp-media, .cy-grid-container.cy-grid--experience .cy-exp-body{ position:relative; z-index:2; }
.cy-grid-container.cy-grid--experience .cy-exp-media{ aspect-ratio:4/3; overflow:hidden; line-height:0; }
.cy-grid-container.cy-grid--experience .cy-exp-media img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; vertical-align:middle; }
.cy-grid-container.cy-grid--experience .cy-exp-body{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 22px 22px; }
@media (max-width:768px){ .cy-grid-container.cy-grid--experience .cy-exp-body{ padding:22px 18px 20px; } }
.cy-grid-container.cy-grid--experience .cy-exp-type{ display:block; margin:0 0 12px; font-family:var(--font-ui); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:rgba(7,24,48,0.48); }
.cy-grid-container.cy-grid--experience .cy-exp-title{ font-family:var(--font-display); font-size:clamp(18px,2vw,22px); line-height:1.15; margin:0 0 14px; color:var(--cy-navy); font-weight:700; overflow-wrap:anywhere; }
.cy-grid-container.cy-grid--experience .cy-exp-desc{ width:100%; margin:0 0 20px; color:rgba(7,24,48,0.72); font-family:var(--font-body); font-size:14px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.cy-grid-container.cy-grid--experience .cy-exp-spacer{ flex:1 1 auto; min-height:14px; }
.cy-grid-container.cy-grid--experience .cy-exp-cta-row{ width:100%; display:flex; justify-content:center; margin-top:auto; padding-top:6px; }
.cy-grid-container.cy-grid--experience .cy-text-btn{ position:relative; z-index:3; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-ui); font-size:18px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:#C9A96A; padding-bottom:10px; border-bottom:2px solid rgba(201, 169, 106,0.45); }
.cy-grid-container.cy-grid--experience .cy-arrow{ display:inline-block; }
@media (max-width:480px){ .cy-grid-container.cy-grid--experience .cy-exp-title{ font-size:clamp(24px,7vw,32px); } .cy-grid-container.cy-grid--experience .cy-exp-desc{ -webkit-line-clamp:5; } .cy-grid-container.cy-grid--experience .cy-text-btn{ font-size:16px; } }
/* ==========================================================
   RELATED YACHTS (Experience Template) — compact fleet variant
   ========================================================== */

.cy-grid-container.cy-grid--related-yachts{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

@media (min-width: 769px){
  .cy-grid-container.cy-grid--related-yachts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px){
  .cy-grid-container.cy-grid--related-yachts{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Compact card adjustments (without touching main fleet grid) */
.cy-grid-container.cy-grid--related-yachts .cy-card-media{
  height: 200px;
}

.cy-grid-container.cy-grid--related-yachts .cy-card-body{
  padding: 16px 16px 14px;
}

.cy-grid-container.cy-grid--related-yachts .cy-yacht-title{
  font-size: 20px;
}

.cy-grid-container.cy-grid--related-yachts .cy-tech-subtitle{
  font-size: 11px;
}

.cy-grid-container.cy-grid--related-yachts .cy-related-title-link{
  text-decoration:none;
  color: inherit;
}

/* ==========================================================
   RELATED YACHTS (Experience Template) — self-contained skin
   Fixes "broken" UI when Fleet CSS is disabled
   ========================================================== */

.cy-grid-container.cy-grid--related-yachts{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

@media (min-width: 769px){
  .cy-grid-container.cy-grid--related-yachts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1025px){
  .cy-grid-container.cy-grid--related-yachts{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Card shell */
.cy-grid-container.cy-grid--related-yachts .cy-related-card{
  background:#fff;
  border:1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 18px 46px rgba(15,23,42,0.08);
  display:flex;
  flex-direction:column;
  height:100%;
  transition: transform var(--cy-med) var(--cy-ease), box-shadow var(--cy-med) var(--cy-ease);
}
.cy-grid-container.cy-grid--related-yachts .cy-related-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 68px rgba(15,23,42,0.14);
}

/* Media MUST be defined here (fix) */
.cy-grid-container.cy-grid--related-yachts .cy-card-media{
  height: 210px;
  background-size: cover;        /* FIX */
  background-position: center;   /* FIX */
  background-repeat: no-repeat;  /* FIX */
  position: relative;
  background-color: #e9eef5;
}

/* Length badge */
.cy-grid-container.cy-grid--related-yachts .cy-length-overlay{
  position:absolute;
  top:12px; left:12px;
  background: rgba(0,0,0,0.55);
  color:#fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  backdrop-filter: blur(6px);
}

/* Body */
.cy-grid-container.cy-grid--related-yachts .cy-card-body{
  padding: 16px 16px 14px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.cy-grid-container.cy-grid--related-yachts .cy-titles{
  text-align:left;
  margin-bottom: 10px;
}

.cy-grid-container.cy-grid--related-yachts .cy-yacht-title{
  font-family:"Bodoni Moda","Didot","Bodoni 72",serif;
  font-size: 20px;
  line-height: 1.15;
  margin: 0 0 6px 0;
  color: var(--cy-navy);
}

.cy-grid-container.cy-grid--related-yachts .cy-tech-subtitle{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.55);
}

.cy-grid-container.cy-grid--related-yachts .cy-related-title-link{
  text-decoration:none;
  color: inherit;
}

/* CTA row */
.cy-grid-container.cy-grid--related-yachts .cy-card-cta-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
}

/* Primary text CTA */
.cy-grid-container.cy-grid--related-yachts .cy-text-btn{
  font-family:"Bodoni Moda",sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cy-navy);
  text-decoration:none;
  border-bottom: 2px solid var(--cy-gold-2);
  padding-bottom: 4px;
}

/* Secondary CTA button */
.cy-grid-container.cy-grid--related-yachts .cy-cta-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  white-space: nowrap;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;

  background: var(--cy-navy);
  color: #fff;
  text-decoration:none;
  transition: all .2s ease;
}
.cy-grid-container.cy-grid--related-yachts .cy-cta-mini:hover{
  background: var(--cy-gold-2);
  color:#111;
}

/* ==========================================================
   RELATED YACHTS — uses Fleet Card + Fleet Buttons
   Only adds layout + constraints (no new “skin”)
   ========================================================== */

.cy-grid-container.cy-grid--related-yachts{
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

@media (min-width: 769px){
  .cy-grid-container.cy-grid--related-yachts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1025px){
  .cy-grid-container.cy-grid--related-yachts{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Compact constraints for related-yachts only */
.cy-grid-container.cy-grid--related-yachts .cy-card-media{
  height: 210px; /* fixes giant/tiny image blocks */
}

.cy-grid-container.cy-grid--related-yachts .cy-card-body{
  padding: 16px 16px 14px;
}

.cy-grid-container.cy-grid--related-yachts .cy-yacht-title{
  font-size: 20px;
}

.cy-grid-container.cy-grid--related-yachts .cy-related-title-link{
  text-decoration:none;
  color: inherit;
}

/* RELATED YACHTS — add card surface so it doesn't "leak" on white */
.cy-grid-container.cy-grid--related-yachts .cy-fleet-card{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 18px;
  overflow: hidden; /* ensures media corners match */
  box-shadow: 0 16px 40px rgba(15,23,42,0.10);
}

.cy-grid-container.cy-grid--related-yachts .cy-fleet-card:hover{
  box-shadow: 0 26px 64px rgba(15,23,42,0.14);
}

/* Optional: give the body area a subtle separation */
.cy-grid-container.cy-grid--related-yachts .cy-card-body{
  background: #ffffff;
}

/* ==========================================================
   ADD-ON GRID — re-derived from the LIVE snippet (2026-06-19).
   Scoped to .cy-grid-container.cy-grid--addons. (#C9A96A -> Avelis #C9A96A on rebrand.)
   ========================================================== */
.cy-grid-container.cy-grid--addons{ display:grid; grid-template-columns:1fr; gap:26px; max-width:var(--cy-container); margin:0 auto; padding:0 var(--cy-gutter); align-items:stretch; }
@media (min-width:769px){ .cy-grid-container.cy-grid--addons{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; } }
@media (min-width:1025px){ .cy-grid-container.cy-grid--addons{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; } }
@media (min-width:1200px){ .cy-grid-container.cy-grid--addons{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; } }
.cy-grid-container.cy-grid--addons .cy-addon-card{ display:flex; flex-direction:column; height:100%; min-width:0; position:relative; background:#fff; border:1px solid rgba(7,24,48,0.10); border-radius:var(--cy-radius); overflow:hidden; box-shadow:var(--cy-shadow-1); transition:transform var(--cy-med) var(--cy-ease), box-shadow var(--cy-med) var(--cy-ease), border-color var(--cy-med) var(--cy-ease); }
.cy-grid-container.cy-grid--addons .cy-addon-card:hover{ transform:translateY(-4px); box-shadow:var(--cy-shadow-2); border-color:rgba(7,24,48,0.16); }
.cy-grid-container.cy-grid--addons .cy-addon-media{ position:relative; aspect-ratio:4/3; overflow:hidden; line-height:0; }
.cy-grid-container.cy-grid--addons .cy-addon-media img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; vertical-align:middle; }
.cy-grid-container.cy-grid--addons .cy-addon-body{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 22px 22px; flex:1; }
@media (max-width:768px){ .cy-grid-container.cy-grid--addons .cy-addon-body{ padding:22px 18px 20px; } }
.cy-grid-container.cy-grid--addons .cy-addon-name{ font-family:var(--font-display); font-size:clamp(18px,2vw,22px); line-height:1.15; margin:0 0 12px; color:var(--cy-navy); font-weight:700; overflow-wrap:anywhere; min-height:2.4em; display:flex; align-items:center; justify-content:center; }
.cy-grid-container.cy-grid--addons .cy-addon-approval{ display:inline-flex; align-items:center; justify-content:center; margin:0 0 14px; padding:8px 14px; border-radius:999px; background:#F3EFEA; border:1px solid rgba(201, 169, 106,0.45); color:var(--cy-navy); font-family:var(--font-ui); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; line-height:1; white-space:nowrap; }
.cy-grid-container.cy-grid--addons .cy-addon-desc{ width:100%; margin:0 0 20px; color:rgba(7,24,48,0.72); font-family:var(--font-body); font-size:14px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.cy-grid-container.cy-grid--addons .cy-spacer{ flex:1 1 auto; min-height:14px; }
.cy-grid-container.cy-grid--addons .cy-card-cta-row{ width:100%; display:flex; justify-content:center; margin-top:auto; padding-top:6px; }
.cy-grid-container.cy-grid--addons .cy-text-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-ui); font-size:18px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:#C9A96A; padding-bottom:10px; border-bottom:2px solid rgba(201, 169, 106,0.45); }
.cy-grid-container.cy-grid--addons .cy-arrow{ display:inline-block; }
@media (max-width:480px){ .cy-grid-container.cy-grid--addons .cy-addon-name{ font-size:clamp(24px,7vw,32px); } .cy-grid-container.cy-grid--addons .cy-addon-desc{ -webkit-line-clamp:5; } .cy-grid-container.cy-grid--addons .cy-text-btn{ font-size:16px; } }
/* ================================
   MAINTENANCE — PREMIUM STYLE
================================ */

.cy-grid-container.cy-grid--maintenance{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  max-width:1200px;
  margin:0 auto;
  padding:0 18px;
}

@media (min-width:768px){
  .cy-grid-container.cy-grid--maintenance{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:1100px){
  .cy-grid-container.cy-grid--maintenance{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

.cy-maint-card{
  background:linear-gradient(145deg,#0d2342,#081a33);
  border-radius:20px;
  padding:40px 32px;
  display:flex;
  flex-direction:column;
  min-height:360px;
  position:relative;
  overflow:hidden;
  transition:all .35s ease;
}

.cy-maint-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}

/* Gold icon */
.cy-maint-icon{
  width:60px;
  height:60px;
  margin-bottom:24px;
}

.cy-maint-icon svg{
  width:100%;
  height:100%;
  stroke:var(--cy-gold-2);
  stroke-width:1.5;
  fill:none;
}

/* Title */
.cy-maint-title{
  font-family:'Playfair Display',serif;
  font-size:22px;
  color:#fff;
  margin:0 0 18px 0;
  line-height:1.3;
}

/* Description */
.cy-maint-desc{
  color:rgba(255,255,255,.75);
  font-size:14px;
  line-height:1.7;
  margin-bottom:30px;

  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* CTA */
.cy-maint-footer{
  margin-top:auto;
}

.cy-maint-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 26px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:var(--cy-gold-2);
  color:#111;
  text-decoration:none;
  transition:all .25s ease;
}

.cy-maint-btn:hover{
  background:#f0c95b;
}

.cy-exp-addon-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

@media(min-width:768px){
  .cy-exp-addon-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(min-width:1100px){
  .cy-exp-addon-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

.cy-exp-addon-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:.3s ease;
}

.cy-exp-addon-card:hover{
  transform:translateY(-5px);
}

.cy-exp-addon-img{
  height:160px;
  background-size:cover;
  background-position:center;
}

.cy-exp-addon-body{
  padding:18px;
}

.cy-exp-addon-title{
  font-size:16px;
  font-weight:700;
  margin:0 0 8px 0;
  color:var(--cy-navy);
}

.cy-exp-addon-price{
  font-weight:800;
  font-size:14px;
}

.cy-exp-addon-unit{
  font-size:11px;
  text-transform:uppercase;
  opacity:.6;
}

/* ================================
   Experience - Related Yachts
================================ */

.cy-exp-addon-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  margin-top:30px;
}

@media(min-width:768px){
  .cy-exp-addon-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(min-width:1100px){
  .cy-exp-addon-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

.cy-exp-addon-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:.3s ease;
}

.cy-exp-addon-card:hover{
  transform:translateY(-5px);
}

.cy-exp-addon-img{
  height:170px;
  background-size:cover;
  background-position:center;
}

.cy-exp-addon-body{
  padding:18px;
}

.cy-exp-addon-title{
  font-size:16px;
  font-weight:700;
  margin:0 0 6px 0;
  color:var(--cy-navy);
}

.cy-exp-addon-subtitle{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.6;
  margin-bottom:8px;
}

.cy-exp-addon-price{
  font-weight:800;
  font-size:14px;
}

.cy-exp-addon-unit{
  font-size:11px;
  text-transform:uppercase;
  opacity:.6;
}

/* =========================================
   EXPERIENCE – SIMPLE ADDON LIST
   (Horizontal Premium Layout)
========================================= */

.cy-exp-addon-list{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:28px;
}

/* Card Row */
.cy-exp-addon-row{
  display:flex;
  align-items:center;
  gap:20px;
  padding:16px 18px;

  background:#ffffff;
  border:1px solid rgba(15,23,42,0.08);
  border-radius:16px;

  box-shadow:0 8px 26px rgba(15,23,42,0.06);
  transition:all var(--cy-med) var(--cy-ease);
}

.cy-exp-addon-row:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 38px rgba(15,23,42,0.12);
}

/* Thumbnail */
.cy-exp-addon-thumb{
  width:72px;
  height:72px;
  flex-shrink:0;

  border-radius:12px;
  background-size:cover;
  background-position:center;
  background-color:#f3f5f8;

  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.04);
}

/* Content Wrapper */
.cy-exp-addon-info{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Title */
.cy-exp-addon-title{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  font-size:15px;
  color:var(--cy-navy);
  line-height:1.2;
}

/* Subtitle (Parent Addon if variant) */
.cy-exp-addon-sub{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(15,23,42,0.5);
}

/* Price */
.cy-exp-addon-cost{
  font-family:"Bodoni Moda", sans-serif;
  font-size:14px;
  font-weight:800;
  color:#111;
}

/* Unit */
.cy-exp-addon-unit{
  font-family:Inter, system-ui;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(15,23,42,0.5);
  margin-left:6px;
}

/* Mobile Optimization */
@media (max-width: 480px){

  .cy-exp-addon-row{
    gap:14px;
    padding:14px;
  }

  .cy-exp-addon-thumb{
    width:60px;
    height:60px;
  }

  .cy-exp-addon-title{
    font-size:14px;
  }

  .cy-exp-addon-cost{
    font-size:13px;
  }
}

/* ==========================================================
   EXPERIENCE — AVAILABLE ADD-ONS (SMART DEDUPE + GRID)
   Scope: .cy-exp-addons-wrap
   ========================================================== */

.cy-exp-addons-wrap{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(15,23,42,0.10);
  padding: 26px 22px 22px;
}

.cy-exp-addons-title{
  margin: 0 0 16px 0;
  font-family: "Bodoni Moda", "Didot", serif;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--cy-navy);
  text-align: center;
}

/* Grid: auto space, fills available width */
.cy-exp-addons-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* Card */
.cy-exp-addon{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.08);
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: transform var(--cy-fast) var(--cy-ease), box-shadow var(--cy-fast) var(--cy-ease);
}
.cy-exp-addon:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(15,23,42,0.12);
}

/* Thumb */
.cy-exp-addon-thumb{
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #eef2f7;
}
.cy-exp-addon-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text */
.cy-exp-addon-main{
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cy-exp-addon-name{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--cy-navy);
}

.cy-exp-addon-sub{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.45);
}

/* Price line */
.cy-exp-addon-price{
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.cy-exp-addon-amount{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,0.88);
}

.cy-exp-addon-unit{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.35);
}

/* Mobile tighten */
@media (max-width: 480px){
  .cy-exp-addons-title{ font-size: 30px; }
  .cy-exp-addons-grid{ grid-template-columns: 1fr; }
}

/* Experience template - Available Add-ons (scoped) */
.cy-exp-addons-block{
  width: 100%;
}

.cy-exp-addons-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 768px){
  .cy-exp-addons-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px){
  .cy-exp-addons-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
}

.cy-exp-addon-tile{
  background: #fff;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15,23,42,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cy-exp-addon-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #e9eef5;
}

.cy-exp-addon-ribbon{
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  background: rgba(10,32,65,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cy-exp-addon-info{
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cy-exp-addon-title{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;
  color: var(--cy-navy);
}

.cy-exp-addon-price{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.cy-exp-addon-amount{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  font-size: 13px;
  color: #111;
}

.cy-exp-addon-meta{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(15,23,42,0.45);
}
/* Yacht Charter — Google Maps facade (Phase 5 perf: defer map load to click) */
.yc-map-facade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:300px;border:0;cursor:pointer;background:#0a2a4b linear-gradient(160deg,#0a2a4b,#031D3B);color:#EDEFF1;font-family:Inter,system-ui,sans-serif;border-radius:8px}
.yc-map-facade:hover{filter:brightness(1.08)}
.yc-map-facade__pin{font-size:34px;color:#C9A96A;line-height:1}
.yc-map-facade__label{font-size:14px;letter-spacing:.14em;text-transform:uppercase}

/* ============================================================
   Yacht Charter — GLOBAL HERO (secondary pages)  [2026-06-20]
   Branded + responsive; clears the fixed 119/85/83px header so
   the hero heading is never hidden behind it. Hook: .cy-hero-section
   ============================================================ */
.cy-hero-section{position:relative;min-height:clamp(360px,50vh,540px);padding-top:calc(119px + 4rem)!important;padding-bottom:4rem!important;background-size:cover!important;background-position:center!important;overflow:hidden}
.cy-hero-section::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,29,59,.5) 0%,rgba(3,29,59,.78) 100%);z-index:0;pointer-events:none}
.cy-hero-section > *{position:relative;z-index:1}
.cy-hero-section .elementor-heading-title,.cy-hero-section h1,.cy-hero-section h2{font-family:"Bodoni Moda",serif!important;color:#EDEFF1!important;text-align:center!important;font-size:clamp(34px,4.6vw,60px)!important;line-height:1.1}
.cy-hero-section .elementor-widget-text-editor,.cy-hero-section p{color:#CBD4E0!important;text-align:center!important}
@media(max-width:1024px){.cy-hero-section{padding-top:calc(85px + 3rem)!important;min-height:clamp(300px,42vh,440px)}}
@media(max-width:767px){.cy-hero-section{padding-top:calc(83px + 2rem)!important;padding-bottom:2.25rem!important;min-height:auto}.cy-hero-section .elementor-heading-title,.cy-hero-section h1,.cy-hero-section h2{font-size:clamp(28px,7.5vw,38px)!important}}

/* Fleet card alignment [2026-06-20] — equalize title block so location pill / capacity / price / CTA line up across cards regardless of title length */
.cy-grid--fleet .cy-yacht-title{min-height:138px}
@media(max-width:1200px){.cy-grid--fleet .cy-yacht-title{min-height:120px}}
@media(max-width:1024px){.cy-grid--fleet .cy-yacht-title{min-height:96px}}
@media(max-width:767px){.cy-grid--fleet .cy-yacht-title{min-height:0}}

/* Experience eyebrow [2026-06-20] — clean gold label instead of a white-ish highlight box */
.cy-exp-type{background:transparent!important;padding:0!important;color:#C9A96A!important;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}

/* Add-on cards [2026-06-20] — were stark white (clashed with the dark luxury theme); match the experience-card dark treatment */
.cy-grid--addons .cy-addon-card{background:linear-gradient(180deg,#0a2a4b 0%,#041f3c 100%)!important;border:1px solid rgba(201,169,106,.18)!important;border-radius:16px!important}
.cy-grid--addons .cy-addon-name{color:#EDEFF1!important}
.cy-grid--addons .cy-addon-desc{color:rgba(237,239,241,.78)!important}
.cy-grid--addons .cy-card-cta-row,.cy-grid--addons .cy-addon-body{color:#EDEFF1!important}

/* eyebrow: kill the residual border/box too */
.cy-exp-type{border:0!important;box-shadow:none!important;outline:0!important}

/* eyebrow box override [2026-06-20] — beats post-133.css (kit) which boxed .cy-exp-type like the location pill. Higher specificity so the eyebrow is a clean gold label; the location pill keeps its box. */
.cy-grid-container .cy-exp-type,.cy-grid--experience .cy-exp-type,.cy-exp-card .cy-exp-type{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;padding:0!important;color:#C9A96A!important}

/* Maps facade polish [2026-06-20] — fill the map container as a clean branded button; kill the off-brand pink label the kit injected */
.yc-map-facade{width:100%!important;height:100%!important;min-height:150px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(201,169,106,.30)!important;border-radius:10px;background:linear-gradient(160deg,#0a2a4b,#031D3B)!important;color:#EDEFF1!important;cursor:pointer}
.yc-map-facade .yc-map-facade__label{color:#EDEFF1!important;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.yc-map-facade .yc-map-facade__pin{color:#C9A96A!important;font-size:30px;line-height:1}

/* Single-yacht title clip [2026-06-20] — top section sat under the 119px fixed header, clipping the yacht title */
body.single-yacht .elementor-element-06f17b9{padding-top:72px!important}
@media(max-width:1024px){body.single-yacht .elementor-element-06f17b9{padding-top:48px!important}}
@media(max-width:767px){body.single-yacht .elementor-element-06f17b9{padding-top:36px!important}}

/* Single-experience title clip [2026-06-20] — same fixed-header overlap as single-yacht */
body.single-experience .elementor-element-02029ad{padding-top:72px!important}
@media(max-width:1024px){body.single-experience .elementor-element-02029ad{padding-top:48px!important}}
@media(max-width:767px){body.single-experience .elementor-element-02029ad{padding-top:36px!important}}

/* Brokerage page (id 75) [2026-06-20] — was left white/default; force the dark Avelis theme to match the rest of the site */
/* page-75 bg: now native via Elementor Kit global */
body.page-id-75 .elementor-heading-title,body.page-id-75 h1,body.page-id-75 h2,body.page-id-75 h3,body.page-id-75 h4{color:#EDEFF1!important}
body.page-id-75 p,body.page-id-75 li,body.page-id-75 .elementor-widget-text-editor,body.page-id-75 .elementor-icon-list-text,body.page-id-75 .elementor-icon-list-item{color:rgba(237,239,241,.85)!important}

/* Global page background [2026-06-20] — dark Avelis navy everywhere; fixes default/legal pages left white (light text was invisible on white). Dark pages already navy -> no change. */
/* global page bg: now native via Elementor Kit global (was #031D3B!important) */
/* legal/default pages: ensure headings are light on the now-navy bg (their body text was already light) */
body.page-template-default .elementor-heading-title,body.page-template-default h1,body.page-template-default h2,body.page-template-default h3,body.page-template-default h4{color:#EDEFF1!important}

/* legal/default pages: body text light on the navy bg (was dark/invisible) */
body.page-template-default p,body.page-template-default li,body.page-template-default .elementor-widget-text-editor,body.page-template-default .elementor-icon-list-text,body.page-template-default td,body.page-template-default span:not(.elementor-button-text):not(.elementor-button-content-wrapper):not([class*="elementor-button"]){color:rgba(237,239,241,.86)!important}

/* ════════════════════════════════════════════════════════════════════
   BUG-BATCH FIXES — 2026-06-20  (Avelis rebrand polish)
   ════════════════════════════════════════════════════════════════════ */

/* A) Header off-color band: the fixed header wrapper was transparent (119px,
   25px top/bottom padding) while the navy bar inside was only 69px — so the
   hero's lighter top edge bled through the padding as an off-color strip.
   Make the whole header solid brand navy so the band disappears. */
header.elementor-location-header{background-color:#031D3B!important}

/* I) Global button system — unify TYPE/SHAPE on every button (font aligned to
   the primary UI font, Inter) WITHOUT forcing color, so the existing
   primary(gold)/secondary(pearl) intent is preserved. */
.elementor-button,.elementor-button-link,.cy-btn1,.cy-btn2,.wpcf7-submit,
form.wpcf7 input[type="submit"]{
  font-family:'Inter',sans-serif!important;
  font-weight:500!important;
  text-transform:uppercase!important;
  letter-spacing:.02em!important;
  border-radius:99px!important;
}
/* btn1 = primary (gold fill, navy text) — reference: home-hero primary CTA.
   NOTE: Elementor's _css_classes puts the class on the widget WRAPPER, so we
   target the inner .elementor-button (plus the class-on-button case). */
.cy-btn1 .elementor-button,.elementor-button.cy-btn1,a.cy-btn1{background-color:#C9A96A!important;color:#031D3B!important;border:0!important}
.cy-btn1 .elementor-button .elementor-button-text{color:#031D3B!important}
.cy-btn1 .elementor-button:hover,.elementor-button.cy-btn1:hover,a.cy-btn1:hover{background-color:#d8bd86!important;color:#031D3B!important}
/* btn2 = secondary (translucent pearl, navy text) — reference: home-hero "Wander the Fleet" */
.cy-btn2 .elementor-button,.elementor-button.cy-btn2,a.cy-btn2{background-color:transparent!important;color:#EDEFF1!important;border:1.5px solid #C9A96A!important}
.cy-btn2 .elementor-button .elementor-button-text{color:#EDEFF1!important}
.cy-btn2 .elementor-button:hover,.elementor-button.cy-btn2:hover,a.cy-btn2:hover{background-color:rgba(201,169,106,.16)!important;color:#C9A96A!important;border-color:#D8BE8A!important}
/* home hero — remove the "OR" separator between the two CTAs (per request) */
.elementor-element-ororf45{display:none!important}

/* Yacht card titles — smaller + AVELIS serif (Times); box shrunk from the old
   138px (sized for 30px Bodoni) to 84px = 3 lines @22px, so every card's title
   occupies the same height and the badge/guests/price rows align. */
.cy-yacht-title{font-family:'Times New Roman',Georgia,serif!important;font-size:22px!important;line-height:1.22!important;letter-spacing:.01em!important;height:84px!important;min-height:84px!important;display:flex!important;align-items:center!important;justify-content:center!important}

/* Avelis sub-brand hero sections (Yachting/Motoring/Aviation/Gatherings) — their
   heroes aren't .cy-hero-section, so they sat right under the fixed header. Add
   top breathing room to the first section of each sub-brand page. */
.elementor-5606 > .e-con:first-child,
.elementor-5607 > .e-con:first-child,
.elementor-5608 > .e-con:first-child,
.elementor-5609 > .e-con:first-child{padding-top:96px!important}

/* Mobile header — hide "Book a Charter" (the bottom action bar already has BOOK) */
@media (max-width:768px){
  header.elementor-location-header .elementor-button{display:none!important}
}

/* J) Header "Book a Charter" — lock gold pill + navy text across ALL pages
   (some page kits were flipping the link color). */
header.elementor-location-header .elementor-button,
header.elementor-location-header .elementor-button:hover,
header.elementor-location-header .elementor-button:focus,
header.elementor-location-header a.elementor-button-link{
  background-color:#C9A96A!important;color:#031D3B!important;
}

/* B) Footer logo: was rendered tiny (29×7px) = invisible. Fix is SIZE only —
   show it wide in its ORIGINAL colours (gold seal + pearl wordmark + tagline). */
footer img[src*="avelis-logo"],[data-elementor-type="footer"] img[src*="avelis-logo"]{
  width:230px!important;max-width:80%!important;height:auto!important;
  display:block;margin:0 auto 14px;
}

/* L) Footer "Get In Touch" icons — strip the boxed backgrounds */
footer .icon-box,[data-elementor-type="footer"] .icon-box{
  background-color:transparent!important;border-radius:0!important;
}

/* F) Separator break between page content and the footer */
footer.elementor-location-footer,[data-elementor-type="footer"]{
  border-top:1px solid rgba(201,169,106,.22)!important;
}

/* ════════════════════════════════════════════════════════════════════
   LUXURY SYSTEM — "Ottanio Brass"  (2026-06-21)
   Header floats transparent over the hero, settles to navy glass on scroll.
   Buttons: brushed-brass primary / gold-outline pearl-text secondary, with
   architectural 2px corners (the 99px pill is retired). This block is the
   single source of the luxury look — swap it to change directions.
   ════════════════════════════════════════════════════════════════════ */

/* Header: transparent over hero (top scrim keeps pearl nav legible) */
header.elementor-location-header{
  background:linear-gradient(180deg,rgba(3,29,59,.55) 0%,rgba(3,29,59,0) 100%)!important;
  padding:30px 0!important;border-bottom:0!important;
  transition:background .4s ease,padding .4s cubic-bezier(.22,.61,.36,1),border-color .4s ease!important;
}
/* settled state once scrolled (JS toggles .is-scrolled) */
header.elementor-location-header.is-scrolled{
  background:rgba(3,29,59,.92)!important;
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  padding:18px 0!important;border-bottom:1px solid rgba(201,169,106,.28)!important;
}

/* Nav: uppercase Bodoni, wide tracking, gold hairline-grow underline */
header.elementor-location-header .elementor-nav-menu .elementor-item{
  font-family:'Bodoni Moda',serif!important;font-size:13px!important;letter-spacing:.05em!important;
  text-transform:uppercase!important;color:rgba(237,239,241,.88)!important;position:relative;white-space:nowrap;
}
/* keep the whole top-level nav on one line */
header.elementor-location-header .elementor-nav-menu--main ul.elementor-nav-menu{flex-wrap:nowrap!important}
header.elementor-location-header .elementor-nav-menu .elementor-item:hover,
header.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active{color:#C9A96A!important}
header.elementor-location-header .elementor-nav-menu .menu-item > .elementor-item::after{
  content:"";position:absolute;left:50%;bottom:2px;width:0;height:1px;background:#C9A96A;
  transform:translateX(-50%);transition:width .35s cubic-bezier(.22,.61,.36,1);
}
header.elementor-location-header .elementor-nav-menu .menu-item > .elementor-item:hover::after,
header.elementor-location-header .elementor-nav-menu .menu-item > .elementor-item.elementor-item-active::after{width:100%}

/* Header CTA "Book a Charter": refined gold OUTLINE, rounded, Bodoni */
header.elementor-location-header .elementor-button{
  background:transparent!important;border:1px solid #C9A96A!important;color:#EDEFF1!important;
  border-radius:999px!important;padding:11px 26px!important;font-family:'Times New Roman',Georgia,serif!important;
  font-size:13px!important;letter-spacing:.06em!important;text-transform:uppercase!important;
  font-weight:700!important;white-space:nowrap!important;transition:all .3s ease!important;
}
header.elementor-location-header .elementor-button:hover{
  background:#C9A96A!important;color:#031D3B!important;border-color:#C9A96A!important;
}

/* PRIMARY buttons (default): solid brand gold, architectural 2px corner.
   Flat gold (not a gradient) renders identically on every primary regardless of
   Elementor's per-button CSS — consistent and robust. */
.elementor-button{
  border-radius:999px!important;
  background-color:#C9A96A!important;background-image:none!important;
  color:#031D3B!important;border:1px solid #C9A96A!important;
  font-family:'Times New Roman',Georgia,serif!important;font-weight:700!important;text-transform:uppercase!important;
  letter-spacing:.06em!important;transition:all .3s cubic-bezier(.22,.61,.36,1)!important;
}
.elementor-button:hover{background-color:#D8BC85!important;color:#031D3B!important}
/* button label inherits the button colour: primaries stay navy, secondaries pearl
   (fixes the unreadable pearl-on-gold label). Cover the wrapper span too — that's
   where the stray pearl was landing. */
.elementor-button .elementor-button-content-wrapper,
.elementor-button .elementor-button-text,
.elementor-button:hover .elementor-button-content-wrapper,
.elementor-button:hover .elementor-button-text{color:inherit!important;font-family:'Times New Roman',Georgia,serif!important;font-weight:700!important}
/* Charter/Owners hero toggle — match the button font */
.cy-tt__label{font-family:'Times New Roman',Georgia,serif!important;font-weight:700!important;letter-spacing:.06em!important}

/* Booking calendar — match the brand font (was Inter) */
.cy-calendar-wrapper,.cy-calendar-wrapper *{font-family:'Bodoni Moda',serif!important}

/* Add-on cards — uniform height per row (grid was align-items:start) */
.cy-addongrid{align-items:stretch!important}
.cy-addongrid .cy-addoncard{height:100%!important}

/* "Our Partners" row — TikTok logo asset fixed 2026-06-22 (was a solid black
   tile that inverted to a white square under the pearl-wall brightness(0)
   invert(1) filter; now a white-glyph-on-transparent webp, so it inverts clean
   like its siblings — stopgap display:none removed).
   NB: the whole row is still placeholder mega-brand logos — flagged for review. */

/* Hero top breathing room — the 129px fixed header floats over every hero.
   Home is full-bleed (content centred) so it's excluded; all other heroes get
   generous top padding so the title/content clears the header comfortably. */
body.single-yacht .elementor-element-56bec19{padding-top:150px!important}
body.single-experience .elementor-element-3d16c5a6{padding-top:155px!important}
body:not(.home) .cy-hero-section{padding-top:160px!important}

/* Yacht-single spacing fix [2026-06-22] — fixed 106px header floated over the
   hero image (left col was tucking under the nav) and the calendar/pricing +
   FAQ sections had padding-top:0 so their content butted against the header on
   scroll. Bring hero to sibling parity (150) + give content sections breathing
   room that clears the fixed header. Scoped to single-yacht template (all 9). */
@media(max-width:1024px){body.single-yacht .elementor-element-56bec19{padding-top:120px!important}}
@media(max-width:767px){body.single-yacht .elementor-element-56bec19{padding-top:120px!important}}
body.single-yacht .elementor-element-4c2f9a4a,
body.single-yacht .elementor-element-a6b5ea2{padding-top:64px!important}
@media(max-width:767px){body.single-yacht .elementor-element-4c2f9a4a,
body.single-yacht .elementor-element-a6b5ea2{padding-top:40px!important}}
/* Experience-single content section had the same padding-top:0 (template 2735,
   all 9 experiences share id 14d1b4f1) — give it matching breathing room. */
body.single-experience .elementor-element-14d1b4f1{padding-top:64px!important}
@media(max-width:767px){body.single-experience .elementor-element-14d1b4f1{padding-top:40px!important}}

/* ============================================================
   AVELIS — MOBILE FIX BLOCK  (2026-06-21)
   Overrides desktop-first "Ottanio Brass" + "BUG-BATCH" rules that
   leaked onto small screens (ungated !important, no breakpoints).
   1024px = ONLY the hamburger (Elementor reveals the toggle <=1024px).
   768px / 767px = everything else.  Desktop (>=769 / >=1025) untouched.
   ============================================================ */

/* ---- HAMBURGER NAV (<=1024px) — CONFIRMED BREAK 1: toggle rendered 0x0 ---- */
@media (max-width:1024px){
  header.elementor-location-header .elementor-menu-toggle{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:44px!important;height:44px!important;padding:6px!important;color:#EDEFF1!important;cursor:pointer!important;
  }
  header.elementor-location-header .elementor-menu-toggle svg,
  header.elementor-location-header .elementor-menu-toggle i{
    width:28px!important;height:28px!important;font-size:28px!important;fill:#EDEFF1!important;color:#EDEFF1!important;
  }
  /* show only the state-correct icon (display:block was forcing both ☰ and ✕) */
  header.elementor-location-header .elementor-menu-toggle:not(.elementor-active) .elementor-menu-toggle__icon--close{display:none!important}
  header.elementor-location-header .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open{display:none!important}
  /* opened dropdown — full-screen OPAQUE overlay [fixed 2026-06-24]
     was rgba(...,.97) translucent card @ max-height:80vh → page (hero/footer/scroll-chevron)
     bled through behind the links + drawer only covered ~62% leaving page tappable below.
     Now: solid #031D3B, full-height to viewport, gold top hairline kept for brand. */
  header.elementor-location-header .elementor-nav-menu--dropdown{
    background:#031D3B!important;border:0!important;border-top:1px solid rgba(201,169,106,.28)!important;border-radius:0!important;max-height:none!important;min-height:calc(100dvh - 82px)!important;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  header.elementor-location-header .elementor-nav-menu--dropdown ul.elementor-nav-menu{flex-wrap:wrap!important;display:block!important}
  header.elementor-location-header .elementor-nav-menu--dropdown .elementor-item{
    display:block!important;white-space:normal!important;text-align:center;font-size:15px!important;letter-spacing:.04em!important;line-height:1.2!important;padding:14px 18px!important;min-height:48px!important;color:#EDEFF1!important;
  }
  /* submenu expand chevron (only "Ownership" has one on mobile) was a 354px flex row with the
     icon pinned far-LEFT (default justify-content:flex-start + 10px left pad) → center it under
     the label so it stops floating off to the side [2026-06-24]. */
  header.elementor-location-header .elementor-nav-menu--dropdown .sub-arrow{justify-content:center!important;padding-left:0!important;}
  /* lock page scroll while drawer open so the page can't slide/bleed behind it [2026-06-24].
     Scoped to the MOBILE widget b6d3723 — the desktop widget a572091 (display:none here) can
     carry a stale .elementor-active toggle, which an unscoped :has() would wrongly lock on. */
  body:has(header.elementor-location-header .elementor-element-b6d3723 .elementor-menu-toggle.elementor-active){overflow:hidden!important;}
}

/* ---- NAV WIDGET VISIBILITY — airtight split at 1024 (fixed 2026-06-22) ----
   Header has two nav widgets: a572091 (desktop links) and b6d3723 (mobile nav,
   18 items + hamburger toggle). Elementor hides a572091 <=1024px, but the
   earlier fix only forced b6d3723 ON at <=767px — so the 768–1024 band had
   BOTH display:none = NO nav at all (caught in device QA). Now an explicit
   either/or split: hamburger <=1024, desktop links >=1025. No gap either side. */
@media (max-width:1024px){
  header.elementor-location-header .elementor-widget-nav-menu.elementor-element-b6d3723{display:block!important}
  header.elementor-location-header .elementor-widget-nav-menu.elementor-element-a572091{display:none!important}
}
@media (min-width:1025px){
  header.elementor-location-header .elementor-widget-nav-menu.elementor-element-a572091{display:block!important}
  header.elementor-location-header .elementor-widget-nav-menu.elementor-element-b6d3723{display:none!important}
}

/* ---- HEADER ROW (<=768px) — compact so logo + burger + CTA fit ---- */
@media (max-width:768px){
  header.elementor-location-header{padding:12px 0!important}
  header.elementor-location-header img[src*="avelis-logo"]{width:140px!important}
  header.elementor-location-header .elementor-button{font-size:11px!important;letter-spacing:.04em!important;padding:9px 14px!important;min-height:38px!important}
}
@media (max-width:420px){
  header.elementor-location-header img[src*="avelis-logo"]{width:120px!important}
  header.elementor-location-header .elementor-button{font-size:10.5px!important;padding:8px 11px!important;min-height:36px!important}
}

/* ---- HOME HERO OVERLAP (<=768px) — CONFIRMED BREAK 2 ---- */
@media (max-width:768px){
  /* The Charter/Owners toggle sits in an ABSOLUTE overlay (f0a75df, top:150px,
     z-30) that floats over the hero; on mobile the wrapping heading collides
     with it. De-layer it into normal flow so heading -> toggle stack cleanly. */
  body.home .elementor-element-f0a75df{
    position:static!important;top:auto!important;left:auto!important;right:auto!important;
    transform:none!important;width:100%!important;margin:104px auto 0!important;z-index:auto!important;
    height:auto!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;
  }
  body.home .elementor-element-f0a75df > .e-con-inner{min-height:0!important;height:auto!important;padding-top:0!important;padding-bottom:0!important}
  /* the mode panels are min-height:688 + justify-content:flex-end (content bottom-
     aligned for the desktop layered design) — that leaves a big empty gap above the
     heading on mobile. Top-align + drop the min-height so content sits under the toggle. */
  body.home .cy-mode-charter,body.home .cy-mode-owner{min-height:0!important;justify-content:flex-start!important;padding-top:24px!important}
  /* cap the long home heading so it doesn't sprawl into 4 lines (both modes) */
  body.home h1.elementor-heading-title,
  body.home .elementor-element-3b42495 .elementor-heading-title,
  body.home .elementor-element-22e9946 .elementor-heading-title{
    font-size:clamp(26px,6.8vw,32px)!important;line-height:1.2!important;
  }
  /* hero subtext: Owner side (2ad693c) never got a mobile size like Charter's
     (46e6ee1=20px), so it stayed at the 32px desktop size. Match it. */
  body.home .elementor-element-46e6ee1 .elementor-heading-title,
  body.home .elementor-element-2ad693c .elementor-heading-title{
    font-size:20px!important;line-height:1.5!important;
  }
  .cy-tt{justify-content:center!important}
  .cy-tt__label{font-size:12px!important;letter-spacing:.03em!important;line-height:1.1!important}
}

/* ---- SECONDARY-PAGE HERO PADDING (<=767px) — restore intended mobile value ---- */
@media (max-width:767px){
  body:not(.home) .cy-hero-section{padding-top:calc(83px + 2rem)!important}
}

/* ---- BUTTON TYPE / OVERFLOW (<=768px) ---- */
@media (max-width:768px){
  .elementor-button{letter-spacing:.03em!important}
  .elementor-button .elementor-button-content-wrapper,
  .elementor-button .elementor-button-text{white-space:normal!important;overflow-wrap:anywhere!important}
  .wpcf7-submit,form input[type="submit"],form button[type="submit"]{padding:12px 20px!important;letter-spacing:.04em!important;font-size:13px!important}
}

/* ---- FOOTER (<=768px) — headings/mission/social/copyright are centred, but the
   nav lists + contact rows stayed left-aligned (desktop column layout leaked into
   the stacked mobile layout). Centre them so the whole footer reads as one column. */
@media (max-width:768px){
  .elementor-location-footer .elementor-widget-nav-menu ul.elementor-nav-menu{
    align-items:center!important;justify-content:center!important;
  }
  .elementor-location-footer .elementor-widget-nav-menu .elementor-item{
    text-align:center!important;justify-content:center!important;
  }
  /* Get In Touch contact block (custom HTML .footer-contact). On mobile each
     .contact-item is flex-direction:column, so horizontal centring needs
     align-items:center (not justify-content, which is the vertical axis here). */
  .elementor-location-footer .footer-contact{text-align:center!important}
  .elementor-location-footer .footer-contact .contact-item{
    align-items:center!important;justify-content:center!important;text-align:center!important;
  }
}

/* header logo enlarged so the (now bigger, pearl) tagline is legible */
header.elementor-location-header img[src*="avelis-logo"]{width:200px!important;height:auto!important}
/* status pills (Coming Soon / Under Audit) keep their own transparent look */
.cy-swap-icon .elementor-button,.elementor-button.cy-swap-icon{background:transparent!important;border-color:rgba(201,169,106,.45)!important;color:#EDEFF1!important}

/* ════════════════════════════════════════════════════════════════════
   YACHT HERO + SPECS — LUXURY REFACTOR   (2026-06-30 · aideus)
   Scope: body.single-yacht ONLY → shared Elementor template 2715 (all 9
   yachts). 100% CSS-LED — NO _elementor_data touched, so every dynamic
   binding (post-title, ACF spec_* fields, yacht_location / yacht_feature
   terms, gallery) is left exactly as authored. Styles target the stable
   element IDs + native Elementor classes; values stay generic (no yacht-
   specific text). Brand: Nightfall navy #021428 · Lantern Gold #C9A96A ·
   Pearl #EDEFF1 · Evening Mist #949FB1 · Bodoni Moda + Inter.

   ELEMENT MAP (rendered as .elementor-element-<id>):
     hero section ....... 56bec19   (navy overlay via ::before)
     content column ..... 06f17b9   (flex row / wrap)
     H1 yacht title ..... 77bfdef
     meta · Model ....... 8743a80      \
     meta · guests ...... e8f406f       } inline meta line (gold middots)
     meta · Brand/Build . 869e2a0      /
     meta · Anchored @ .. 6ae0363   (own line, gold rule accent)
     RESERVE A DATE ..... 2be1ac7   (.cy-open-concierge)
     Specifications panel 314c7b7
       "Specifications" .. f7522dc   (eyebrow heading)
       2-col spec body ... 638dbe8
         icon-list L ..... b7aadca   (Length/Beam/Draft/Year)
         icon-list R ..... b8c8af1   (Guests/Sleeps/Cabins/Crew)
     left featured img .. 5235b0b  (inside col 28a0b35)
   ════════════════════════════════════════════════════════════════════ */

/* ---- Hero scrim: swap the flat navy wash for a refined directional
   gradient (deeper toward the lower-right where the content sits) plus a
   soft bottom vignette — richer depth + better legibility. The overlay is
   the section's ::before pseudo (no child div), behind all content. ---- */
body.single-yacht .elementor-element-56bec19::before{
  background:
    linear-gradient(105deg, rgba(2,20,40,.58) 0%, rgba(2,20,40,.78) 52%, rgba(2,20,40,.90) 100%),
    linear-gradient(0deg, rgba(2,20,40,.55) 0%, rgba(2,20,40,0) 44%) !important;
  opacity:1 !important;
}

/* ---- Content column rhythm ---- */
body.single-yacht .elementor-element-06f17b9 > .e-con-inner{
  gap:13px 16px !important; align-content:center !important;
}

/* ---- H1 yacht title — more commanding Bodoni, gold, legibility shadow ---- */
body.single-yacht .elementor-element-77bfdef .elementor-heading-title{
  font-size:clamp(2.35rem, 1.35rem + 2.5vw, 3.4rem) !important;
  line-height:1.08 !important; letter-spacing:.012em !important;
  text-shadow:0 2px 22px rgba(0,0,0,.38) !important; margin:0 !important;
}

/* ---- Meta line: Model · guests · Brand/Build flow inline, separated by
   gold middots; Anchored drops to its own line with a gold rule accent.
   Tone: pearl/mist, Inter, gently tracked. ---- */
body.single-yacht .elementor-element-8743a80 .elementor-widget-container,
body.single-yacht .elementor-element-e8f406f .elementor-widget-container,
body.single-yacht .elementor-element-869e2a0 .elementor-widget-container{
  display:inline-flex !important; align-items:center !important;
}
body.single-yacht .elementor-element-8743a80 .elementor-widget-container,
body.single-yacht .elementor-element-8743a80 .elementor-widget-container *,
body.single-yacht .elementor-element-e8f406f .elementor-widget-container,
body.single-yacht .elementor-element-e8f406f .elementor-widget-container *,
body.single-yacht .elementor-element-869e2a0 .elementor-widget-container,
body.single-yacht .elementor-element-869e2a0 .elementor-widget-container *,
body.single-yacht .elementor-element-6ae0363 .elementor-widget-container,
body.single-yacht .elementor-element-6ae0363 .elementor-widget-container *{
  font-family:'Inter',sans-serif !important; font-size:15px !important;
  font-weight:400 !important; letter-spacing:.02em !important;
  color:#DCE3EA !important; line-height:1.5 !important; margin:0 !important;
}
/* gold middot before the 2nd + 3rd meta items */
body.single-yacht .elementor-element-e8f406f .elementor-widget-container::before,
body.single-yacht .elementor-element-869e2a0 .elementor-widget-container::before{
  content:"\00B7"; color:#C9A96A !important; font-weight:700;
  margin:0 .55em 0 .2em; display:inline-block; transform:translateY(-1px);
}
/* Anchored — own line, gold hairline rule accent on the left */
body.single-yacht .elementor-element-6ae0363{
  flex:0 0 100% !important; width:100% !important; max-width:100% !important;
  margin-top:3px !important;
}
body.single-yacht .elementor-element-6ae0363 .elementor-widget-container{
  border-left:2px solid rgba(201,169,106,.6) !important; padding-left:12px !important;
}
body.single-yacht .elementor-element-6ae0363 .elementor-widget-container,
body.single-yacht .elementor-element-6ae0363 .elementor-widget-container *{
  color:#C8D2DC !important; font-style:italic !important; letter-spacing:.03em !important;
}

/* ---- RESERVE A DATE — elevate the hero CTA presence ---- */
body.single-yacht .elementor-element-2be1ac7{ margin-top:8px !important; }
body.single-yacht .elementor-element-2be1ac7 .elementor-button{
  letter-spacing:.14em !important; font-size:14px !important;
  padding:16px 44px !important; box-shadow:0 10px 30px rgba(2,12,28,.34) !important;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background-color .3s ease !important;
}
body.single-yacht .elementor-element-2be1ac7 .elementor-button:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 0 0 1px rgba(201,169,106,.55), 0 16px 40px rgba(2,12,28,.5) !important;
}

/* ---- Specifications panel — gold-hairline glass frame ---- */
body.single-yacht .elementor-element-314c7b7{
  flex:1 1 100% !important; width:100% !important; margin-top:12px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 100%) !important;
  border:1px solid rgba(201,169,106,.35) !important; border-radius:14px !important;
  padding:22px 24px !important;
  box-shadow:0 18px 44px rgba(2,12,28,.40), inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter:blur(6px) saturate(115%); backdrop-filter:blur(6px) saturate(115%);
  transition:border-color .3s ease, box-shadow .3s ease !important;
}
/* specs panel hover effect removed per request (2026-06-30) */
/* "Specifications" — refined gold eyebrow + centered hairline underline */
body.single-yacht .elementor-element-f7522dc .elementor-heading-title{
  color:#C9A96A !important; text-transform:uppercase !important;
  letter-spacing:.24em !important; font-size:14px !important; font-weight:600 !important;
  margin:0 0 16px !important; padding-bottom:12px !important; position:relative;
}
body.single-yacht .elementor-element-f7522dc .elementor-heading-title::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:56px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,169,106,.85), transparent);
}
/* two-column spec body — equal columns, centered gold hairline divider */
body.single-yacht .elementor-element-638dbe8 > .e-con-inner{
  justify-content:center !important; gap:0 !important; align-items:stretch !important;
}
body.single-yacht .elementor-element-b7aadca{
  flex:1 1 0 !important; width:auto !important; max-width:none !important;
  padding-right:22px !important;
}
body.single-yacht .elementor-element-b8c8af1{
  flex:1 1 0 !important; width:auto !important; max-width:none !important;
  padding-left:22px !important; border-left:1px solid rgba(201,169,106,.18) !important;
}
/* icon rows — clean, hairline-divided, gold icon + pearl value, hover tint */
body.single-yacht .elementor-element-b7aadca .elementor-icon-list-item,
body.single-yacht .elementor-element-b8c8af1 .elementor-icon-list-item{
  padding:9px 6px !important; margin:0 !important;
  border-bottom:1px solid rgba(201,169,106,.12) !important; border-radius:6px;
  transition:background-color .25s ease !important;
}
body.single-yacht .elementor-element-b7aadca .elementor-icon-list-items > .elementor-icon-list-item:last-child,
body.single-yacht .elementor-element-b8c8af1 .elementor-icon-list-items > .elementor-icon-list-item:last-child{
  border-bottom:0 !important;
}
/* specs row hover tint removed per request (2026-06-30) */
body.single-yacht .elementor-element-b7aadca .elementor-icon-list-icon i,
body.single-yacht .elementor-element-b8c8af1 .elementor-icon-list-icon i{ color:#C9A96A !important; }
body.single-yacht .elementor-element-b7aadca .elementor-icon-list-icon svg,
body.single-yacht .elementor-element-b8c8af1 .elementor-icon-list-icon svg{ fill:#C9A96A !important; }
body.single-yacht .elementor-element-b7aadca .elementor-icon-list-text,
body.single-yacht .elementor-element-b8c8af1 .elementor-icon-list-text{
  color:#EDEFF1 !important; font-family:'Inter',sans-serif !important;
  font-size:14px !important; letter-spacing:.02em !important;
}

/* ---- Left featured-image card — gold ring + depth + subtle zoom ---- */
body.single-yacht .elementor-element-5235b0b img{
  border-radius:18px !important;
  border:1px solid rgba(201,169,106,.28) !important;
  box-shadow:0 26px 60px rgba(2,12,28,.55) !important;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease !important;
}
body.single-yacht .elementor-element-28a0b35:hover .elementor-element-5235b0b img{
  transform:scale(1.012);
  box-shadow:0 32px 70px rgba(2,12,28,.62) !important;
}

/* ---- Mobile (<=767px): stack the meta cleanly, centre, drop middots/rules ---- */
@media (max-width:767px){
  body.single-yacht .elementor-element-8743a80,
  body.single-yacht .elementor-element-e8f406f,
  body.single-yacht .elementor-element-869e2a0{
    flex:0 0 100% !important; width:100% !important; text-align:center;
  }
  body.single-yacht .elementor-element-8743a80 .elementor-widget-container,
  body.single-yacht .elementor-element-e8f406f .elementor-widget-container,
  body.single-yacht .elementor-element-869e2a0 .elementor-widget-container{
    justify-content:center !important;
  }
  body.single-yacht .elementor-element-e8f406f .elementor-widget-container::before,
  body.single-yacht .elementor-element-869e2a0 .elementor-widget-container::before{ display:none !important; }
  body.single-yacht .elementor-element-6ae0363{ text-align:center; }
  body.single-yacht .elementor-element-6ae0363 .elementor-widget-container{
    border-left:0 !important; padding-left:0 !important;
  }
  body.single-yacht .elementor-element-314c7b7{ padding:18px 16px !important; }
  body.single-yacht .elementor-element-b7aadca{ padding-right:12px !important; }
  body.single-yacht .elementor-element-b8c8af1{ padding-left:12px !important; }
}
/* ── END YACHT HERO + SPECS LUXURY REFACTOR ── */

/* SECONDARY buttons: transparent + full-strength gold hairline + pearl text.
   Targeted by element id so it holds regardless of element-cache state. */
.elementor-element-b800543 .elementor-button,
.elementor-element-c17570b .elementor-button,
.elementor-element-c8fdb44 .elementor-button,
.elementor-element-a7c3b00 .elementor-button,
.elementor-element-0493da5 .elementor-button,
.elementor-element-7f5d2e5 .elementor-button,
.elementor-element-6e94b941 .elementor-button,
.cy-btn2 .elementor-button{
  background:transparent!important;color:#EDEFF1!important;border:1.5px solid #C9A96A!important;
  text-shadow:0 1px 6px rgba(3,29,59,.45);
}
.elementor-element-b800543 .elementor-button:hover,
.elementor-element-c17570b .elementor-button:hover,
.elementor-element-c8fdb44 .elementor-button:hover,
.elementor-element-a7c3b00 .elementor-button:hover,
.elementor-element-0493da5 .elementor-button:hover,
.elementor-element-7f5d2e5 .elementor-button:hover,
.elementor-element-6e94b941 .elementor-button:hover,
.cy-btn2 .elementor-button:hover{
  background:rgba(201,169,106,.16)!important;color:#C9A96A!important;border-color:#D8BE8A!important;
}

/* ============================================================
   AVELIS — FOOTER SCALE-DOWN (2026-06-22)
   Footer rendered ~697px (near full-viewport): everything was 18px,
   footer-nav links had 13px top+bottom padding (46px/item × 12), the
   contact column ran 466px, and the section had 40px top/bottom pad.
   Scaled to footer-normal typography + spacing → ~581px. Scoped to
   .elementor-location-footer so site body type is untouched.
   ============================================================ */
.elementor-location-footer{font-size:15px}
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-widget-text-editor p,
.elementor-location-footer .elementor-widget-html,
.elementor-location-footer .elementor-element-665a0e3 *:not(i):not(svg){
  font-size:14px!important;line-height:1.5!important;
}
.elementor-location-footer .elementor-nav-menu a.elementor-item{
  font-size:14px!important;padding-top:4px!important;padding-bottom:4px!important;line-height:1.4!important;
}
.elementor-location-footer .elementor-widget-heading,
.elementor-location-footer .elementor-widget-heading *{
  font-size:15px!important;line-height:1.3!important;
}
.elementor-location-footer .elementor-element-6956f28{padding-top:24px!important;padding-bottom:24px!important}
.elementor-location-footer .contact-item{margin-bottom:14px!important;gap:12px!important}
.elementor-location-footer .icon-box{padding-top:2px!important}

/* Footer "Navigation" menu — the Ownership flyout sub-menu (Yacht Management /
   Partner With Us / Buy & Sell) is position:absolute + 18px, so at narrow
   widths it broke out of its column and overlapped "Compliance". "Ownership"
   itself is a no-link (#) parent, so hiding the children would leave a dead
   label. Instead FLATTEN the flyout into a static, indented, smaller inline
   sub-list — no overlap, links kept, reads as a proper footer sitemap. */
.elementor-location-footer .elementor-nav-menu .sub-menu{
  display:block!important;position:static!important;float:none!important;
  width:auto!important;min-width:0!important;max-height:none!important;
  background:transparent!important;box-shadow:none!important;border:0!important;
  padding:0!important;margin:0 0 2px!important;
  opacity:1!important;visibility:visible!important;transform:none!important;transition:none!important;
}
.elementor-location-footer .elementor-nav-menu .sub-menu a{
  font-size:13px!important;line-height:1.35!important;padding:3px 0 3px 12px!important;opacity:.82;
}
.elementor-location-footer .elementor-nav-menu .sub-arrow,
.elementor-location-footer .elementor-nav-menu .elementor-item-has-children>a>.sub-arrow{display:none!important}

/* ============================================================
   AVELIS — HERO AUDIENCE TOGGLE REPOSITION (2026-06-22)
   The Charter/Owners audience switcher (.cy-tt, in absolute band f0a75df,
   top:150px z-index:30) sat dead-centre OVER the H1 hero headline, blocking
   it. Moved up into the clear gap between the fixed header (bottom ~129px)
   and the headline (top ~233px) as a centred EYEBROW segmented control —
   pill ends up ~154–206px: 25px below the header, 27px above the headline,
   horizontally centred. Audience switch reads naturally above the title.
   Desktop verified by measurement; at narrower widths the headline wraps
   lower so the eyebrow clears it by more. (Alt placements on request:
   top-right corner, or below the hero CTAs.) */
.elementor-element-f0a75df{top:118px!important;bottom:auto!important;height:auto!important}
.cy-tt__wrap{text-align:center!important}

/* AVELIS — tap-target a11y: lift mobile nav rows + logo link to >=44px touch [2026-06-25] */
@media (max-width:1024px){
  .elementor-nav-menu a.elementor-item,
  .elementor-nav-menu a.elementor-sub-item{min-height:44px;display:flex;align-items:center}
  header.elementor-location-header .elementor-widget-image a{min-height:44px;display:inline-flex;align-items:center}
}

/* ============================================================
   AVELIS — BOOKING CALENDAR TYPOGRAPHY LEGIBILITY [2026-06-30]
   Make the availability calendar + "Available departure times" panel readable.
   Root cause: the global `h1..h6{font-family:var(--font-display)}` (Bodoni
   Moda) rule rendered the "Available departure times" <h4> in the hard-to-read
   display face. The other labels are divs/spans that inherit Inter, but are
   pinned here explicitly so they can never drift back to the display font.
   Helper/description text → 14px; day-number cells → a clean 16px default.
   Brand colours + layout untouched. All selectors are scoped under
   .cy-calendar-wrapper and outrank calendar.css on specificity (calendar.css
   loads later in the footer), so stylesheet load order is irrelevant.
   ============================================================ */

/* 1) Normal, readable UI font (Inter / --font-ui) on every calendar label —
      NOT the Bodoni display face. */
.cy-calendar-wrapper .cy-calendar-instructions,
.cy-calendar-wrapper .cy-weekdays span,
.cy-calendar-wrapper .cy-legend,
.cy-calendar-wrapper .cy-legend span,
.cy-calendar-wrapper .cy-times-inline-head h4,
.cy-calendar-wrapper .cy-times-inline-date,
.cy-calendar-wrapper .cy-timezone-caption,
.cy-calendar-wrapper .cy-timezone-caption strong,
.cy-calendar-wrapper .cy-timezone-label,
.cy-calendar-wrapper .cy-timeslot-footnote{
  font-family: var(--font-ui, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}

/* 2) Helper / description text → 14px (the "Times shown in … (PHT)" line and
      the concierge footnote / small print). */
.cy-calendar-wrapper .cy-timezone-caption,
.cy-calendar-wrapper .cy-timeslot-footnote{
  font-size: 14px;
}

/* 3) Numbered date cells (calendar day numbers 1–31) → clear, legible 16px
      default. Weekday header labels stay small/uppercase (font only fixed). */
.cy-calendar-wrapper .cy-day .num{
  font-size: 16px;
}

/* 4) HARD FONT OVERRIDE — force the WHOLE calendar to Inter. The earlier
      non-important font-family rules lost the cascade to the global
      h1..h6{font-family:var(--font-display)} (Bodoni Moda) + inherited Bodoni.
      This wins on specificity (universal descendant) + !important. SVG icons
      are unaffected. SIZES/COLORS/LAYOUT above are untouched — font-family only. */
.cy-calendar-wrapper, .cy-calendar-wrapper *{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important}

/* === YACHT HERO — UNIFIED GOLD CARD + L/R BALANCE [2026-06-30] ============
   Wrap the entire right-hand content column (title · meta · anchored · reserve ·
   specs) in ONE gold glass card instead of bordering only the spec panel, and
   balance it against the left featured-image column. CSS-led — every dynamic
   binding untouched. */
body.single-yacht .elementor-element-06f17b9 > .e-con-inner{
  border:1px solid rgba(201,169,106,.34);
  border-radius:18px;
  background:linear-gradient(155deg, rgba(237,239,241,.06) 0%, rgba(2,12,28,.34) 72%);
  -webkit-backdrop-filter:blur(7px) saturate(1.12);
  backdrop-filter:blur(7px) saturate(1.12);
  box-shadow:0 28px 64px rgba(2,12,28,.46), inset 0 1px 0 rgba(237,239,241,.05);
  padding:42px 46px 46px;
}
/* dissolve the old inner spec box; keep specs as an inset section split from the
   summary by a single gold hairline */
body.single-yacht .elementor-element-314c7b7,
body.single-yacht .elementor-element-314c7b7 > .e-con-inner{
  border:0 !important; border-radius:0 !important; background:transparent !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:none !important; padding:0 !important;
}
body.single-yacht .elementor-element-314c7b7{
  margin-top:28px !important; padding-top:28px !important;
  border-top:1px solid rgba(201,169,106,.22) !important;
}
/* balance left & right — vertically centre the image against the card */
body.single-yacht .elementor-element-a286fef > .e-con-inner{ align-items:center; }

/* Header brand on mobile (<=767px): shrink the emblem and keep the wordmark from
   being flex-clipped (was squeezed to ~12px). Added 2026-06-30.
   2026-07-01: the wordmark text became the longer "Yacht Avelis Lifestyle", which
   at 20px/nowrap jammed against the emblem and crowded the hamburger (read as a
   "broken" header on phones). Size it to fit + add a clear gap from the emblem. */
@media (max-width:767px){
  .elementor-element-9e66b0d img{ max-width:50px !important; height:auto !important; }
  .elementor-element-2b08d4d{ flex:0 0 auto !important; width:auto !important; max-width:none !important; margin-left:10px !important; }
  .elementor-element-2b08d4d .elementor-heading-title{
    white-space:nowrap !important; overflow:visible !important;
    font-size:clamp(13px,4vw,16px) !important; line-height:1.12 !important; letter-spacing:.004em !important;
  }
}

/* Logged-in mobile zoom-out fix (2026-07-01). WP core sets #wpadminbar{min-width:600px}
   and it is position:fixed, so on phones a logged-in admin sees the WHOLE site rendered
   at a ~607px layout viewport (tiny fonts, off spacing, "everything looks broken"). Real
   visitors never get the admin bar, so this only affects the logged-in QA view — clamp it
   so logged-in mobile matches what visitors actually see. */
@media screen and (max-width:782px){ #wpadminbar{ min-width:0 !important; } }

/* Header wordmark "Yacht Avelis Lifestyle" — was font-family "Bodoni Moda",sans-serif,
   so with the upright Bodoni face unloaded it rendered as a plain sans. Force the proper
   Bodoni serif stack (upright faces now load via the @import at the top). Text unchanged. 2026-07-01 */
header.elementor-location-header .elementor-element-2b08d4d .elementor-heading-title,
header.elementor-location-header .elementor-element-2b08d4d .elementor-heading-title *{
  font-family:'Bodoni Moda', Didot, 'Times New Roman', serif !important;
}

/* All header nav menus + submenus -> Bodoni Moda (2026-07-01). Scoped to the
   header location so footer/other menus are untouched. Covers top-level items,
   sub-menu items, and the mobile dropdown across all 4 header nav widgets.
   In CSS (not the Elementor widget) so an editor save can't revert it. */
.elementor-location-header .elementor-nav-menu a,
.elementor-location-header .elementor-nav-menu .elementor-item,
.elementor-location-header .elementor-nav-menu .elementor-sub-item,
.elementor-location-header .elementor-nav-menu--dropdown a,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item{
  font-family:"Bodoni Moda", serif !important;
}

/* /contact/ custom layout (.avelis-contact) relies on these brand tokens, but the
   inline <style> custom-property defs were stripped by post_content sanitization, so
   every var(--pearl/--gold/--slate) collapsed to the global navy → navy-on-navy
   invisible headings/eyebrows/cards. Re-declare the tokens here so var() resolves. 2026-07-01 */
.avelis-contact{
  --navy:#021428; --navy-2:#06203b; --gold:#C9A96A; --gold-soft:rgba(201,169,106,.28);
  --pearl:#EDEFF1; --slate:#949FB1; --slate-d:#4F647E;
}
/* eyebrows on /contact/ stayed navy (out-specified) — force the gold accent */
.avelis-contact .ac-eyebrow{ color:#C9A96A !important; }

/* MOBILE ZOOM-OUT FIX (2026-07-01, migration QA).
   On phones /contact/ rendered at a ~607px layout viewport (whole page zoomed
   out). Root cause: the single-column .ac-touch__grid / .ac-map__grid items keep
   the default min-width:auto, so the 1fr track floored at the children's content
   min-content (~607px) and forced the layout viewport wider than the device. That
   in turn tipped the (bistable) fixed header nav into desktop mode, locking 607.
   min-width:0 lets the track shrink to the device width → viewport falls to 390 →
   header collapses to its hamburger as on every other page. Verified logged-out at
   true 390 via CDP: innerWidth 607 → 390, 0 overflow elements. */
.avelis-contact .ac-touch__grid > *,
.avelis-contact .ac-map__grid > *{ min-width:0; }

/* iOS zoom-on-focus fix: the /contact/ CF7 fields were 13px, so iOS zooms the page
   when a field is tapped. Force >=16px on phones. Scoped to .avelis-contact (NOT a
   global input rule — master-CSS rule respected). 2026-07-01 UAT. */
@media (max-width:640px){
  .avelis-contact .wpcf7-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),
  .avelis-contact .wpcf7-form select,
  .avelis-contact .wpcf7-form textarea{ font-size:16px !important; }
}

/* Home hero CTAs — "BEGIN THE STORY AT SEA" (315px) + "WANDER THE FLEET" (266px) were
   content-sized, so the stacked pair looked lopsided on phones. Equal full-width on
   mobile so the two buttons line up. 2026-07-01 UAT (Responsive Viewer, mobile frames). */
@media (max-width:767px){
  /* widen the button WIDGETS (they're content-sized in the flex container) so both fill the column */
  .elementor-element-6ac5d81,
  .elementor-element-b800543{ width:100% !important; max-width:100% !important; align-self:stretch !important; }
  .elementor-element-6ac5d81 a.elementor-button,
  .elementor-element-b800543 a.elementor-button{
    display:flex !important; width:100% !important; justify-content:center;
  }
}

/* Hero heading clipped behind the ~100px fixed header on phones (too little section
   top-padding). Give the affected heroes header-clearance on mobile. 2026-07-01 UAT. */
@media (max-width:767px){
  /* home hero (af9a9db) uses Elementor's logical --padding-block-start var, so physical
     padding-top alone didn't win — override the logical property + var too. */
  html body .elementor-element.elementor-element-af9a9db{
    --padding-block-start:120px !important; --padding-top:120px !important;
    padding-block-start:120px !important; padding-top:120px !important;
  }
  .elementor-element-c91f185{ padding-top:120px !important; }   /* charter hero (was 80px) — physical worked */
}

/* Brokerage 'Quiet Register' — hide the 2 dev placeholder cards (COMING SOON /
   UNDER AUDIT) that the excluded TEMP hide-plugin used to cover; keep the real
   'Entrust Your Yacht' card and centre it so the row isn't left-heavy. 2026-07-01. */
.elementor-element-4aa58d0,
.elementor-element-cf27a75{ display:none !important; }
.elementor-element-ede307c{ justify-content:center !important; }

/* 'Our Partners' logos (section 9926de5) stacked 1-per-row on phones (each image
   widget full-width) — sparse + untidy. Lay them out as a compact 3-per-row grid,
   centred + uniform height. Headings stay full-width. 2026-07-01 UAT. */
@media (max-width:767px){
  .elementor-element-9926de5 .e-con-inner{
    flex-wrap:wrap !important; justify-content:center !important; align-items:center !important;
    row-gap:26px !important; column-gap:10px !important;
  }
  .elementor-element-9926de5 .e-con-inner > .elementor-widget-image{
    flex:0 0 29% !important; max-width:29% !important; margin:0 !important;
    display:flex !important; justify-content:center; align-items:center;
  }
  .elementor-element-9926de5 .e-con-inner > .elementor-widget-image img{
    max-width:100% !important; max-height:42px !important; width:auto !important; height:auto !important; object-fit:contain;
  }
}

/* ========================================================================
   PREMIUM DESIGN PASS — content pages (2026-07-01)
   Replace flat white-wash "glass" cards (rgba(255,255,255,.15) reads grey/
   cheap on Nightfall navy) with the house navy-glass + gold-hairline look
   used by the contact frame & yacht specs panel.
   ======================================================================== */
/* STRONG — CTA panels (were rgba(255,255,255,.15) grey slabs): /about/ c0f668f,
   /maintenance/ f2fe12d, /partnership/ cbc0d6f d1ac45f, /brokerage/ a112e93 */
.elementor-element-c0f668f,
.elementor-element-f2fe12d,
.elementor-element-cbc0d6f,
.elementor-element-d1ac45f,
.elementor-element-a112e93{
  background:linear-gradient(155deg, rgba(237,239,241,.05) 0%, rgba(2,12,28,.55) 75%) !important;
  border:1px solid rgba(201,169,106,.34) !important;
  border-radius:18px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter:blur(7px) saturate(1.1) !important;
  backdrop-filter:blur(7px) saturate(1.1) !important;
}
/* SUBTLE — feature / FAQ cards (were rgba(255,255,255,.043), edgeless on navy):
   give a gentle navy-glass + faint gold hairline so they read as real cards. */
.elementor-element-be50059,.elementor-element-d29f3a3,.elementor-element-2311c42,
.elementor-element-e8515b4,.elementor-element-c3995bf,.elementor-element-4d92e22,
.elementor-element-a1252fb,.elementor-element-2879da5,.elementor-element-ade4781,
.elementor-element-4d15877,.elementor-element-3c64600,.elementor-element-81ef70c,
.elementor-element-cab2870,.elementor-element-3076cfe,.elementor-element-046020c,
.elementor-element-1750c36,.elementor-element-3b50ba9,.elementor-element-157a97e,
.elementor-element-2905c55,.elementor-element-c4fc066,.elementor-element-1fa654d,
/* "The Hands Behind the Hull" cards (/maintenance/) — added 2026-07-01 per Jerome */
.elementor-element-b743b05,.elementor-element-cacd8d1,.elementor-element-ed03213{
  background:linear-gradient(160deg, rgba(237,239,241,.045) 0%, rgba(2,12,28,.32) 80%) !important;
  border:1px solid rgba(201,169,106,.20) !important;
  border-radius:14px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.elementor-element-be50059:hover,.elementor-element-d29f3a3:hover,.elementor-element-2311c42:hover,
.elementor-element-4d15877:hover,.elementor-element-3c64600:hover,.elementor-element-81ef70c:hover,
.elementor-element-cab2870:hover,.elementor-element-3076cfe:hover,.elementor-element-046020c:hover,
.elementor-element-1750c36:hover,.elementor-element-3b50ba9:hover,.elementor-element-157a97e:hover,
.elementor-element-2905c55:hover,.elementor-element-c4fc066:hover,.elementor-element-1fa654d:hover,
.elementor-element-b743b05:hover,.elementor-element-cacd8d1:hover,.elementor-element-ed03213:hover{
  border-color:rgba(201,169,106,.42) !important; transform:translateY(-3px) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.34) !important;
}
/* /about/ — photographic bands on the two flat text-only sections (real
   yacht/marina imagery under a navy gradient so pearl text stays legible).
   Breaks the all-text monotony + improves scroll pacing. 2026-07-01 */
.elementor-element-a66b261{
  background-image:linear-gradient(180deg, rgba(2,20,40,.72) 0%, rgba(2,20,40,.60) 48%, rgba(2,20,40,.84) 100%), url('http://yacht.avelislifestyle.local/wp-content/uploads/2026/02/avelis-Charter-Singapore-The-Leopard-51-Luxury-Power-Catamaran.webp') !important;
  background-size:cover !important; background-position:center 36% !important; background-repeat:no-repeat !important;
}
.elementor-element-275db14{
  background-image:linear-gradient(180deg, rgba(2,20,40,.82) 0%, rgba(2,20,40,.70) 48%, rgba(2,20,40,.88) 100%), url('http://yacht.avelislifestyle.local/wp-content/uploads/2026/05/post-10-marina.png') !important;
  background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
}
/* /brokerage/ FAQ question headings were 28px (cards ballooned to 521px) vs the
   rest of the site's FAQ cards at 22px / 411px — match them. 2026-07-01 */
.elementor-element-1750c36 .elementor-icon-box-title, .elementor-element-1750c36 .elementor-icon-box-title span,
.elementor-element-3b50ba9 .elementor-icon-box-title, .elementor-element-3b50ba9 .elementor-icon-box-title span,
.elementor-element-157a97e .elementor-icon-box-title, .elementor-element-157a97e .elementor-icon-box-title span,
.elementor-element-2905c55 .elementor-icon-box-title, .elementor-element-2905c55 .elementor-icon-box-title span,
.elementor-element-c4fc066 .elementor-icon-box-title, .elementor-element-c4fc066 .elementor-icon-box-title span,
.elementor-element-1fa654d .elementor-icon-box-title, .elementor-element-1fa654d .elementor-icon-box-title span{
  font-size:22px !important; line-height:1.2 !important;
}

/* ── Mobile legibility floor (2026-07-01 systematic mobile audit) ──
   Add-ons menu price micro-labels + pricing-tiers disclaimer measured
   10–10.5px at 390px — too small to read comfortably on a real phone.
   Scoped to the add-ons and pricing-tiers classes only, so no other type shifts. */
@media (max-width:640px){
  .avm-pricelbl, .avm-vlabel, .avm-vlabel .from{ font-size:11.5px !important; }
  .avm-flag{ font-size:11px !important; }
  .ptm-disclaimer{ font-size:11.5px !important; line-height:1.5 !important; }
}