/* =========================================================
   Aino Yachts — components for UX Builder (Flatsome child theme)
   Ported from the approved prototype (website/assets/css/style.css + nav-drop.css), direction A, light.
   Colours and fonts come only from brand.css tokens. Each block names the UX Builder element and the
   "Class" value set on it (Advanced > Class). Flatsome theme options do the rest (see BUILD-NOTES.md).
   ========================================================= */

:root {
  --gutter: clamp(20px, 5vw, 96px);
  --section: clamp(88px, 12vw, 176px);
  --max: 1440px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base (whole site) ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  font-family: var(--sans); font-weight: 350; font-size: 17px; line-height: 1.7;
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .heading-font { font-family: var(--serif); font-weight: 400; color: var(--ink); text-rendering: optimizeLegibility; }
a { color: inherit; }
p { text-wrap: pretty; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
@media (max-width: 760px) { body { font-size: 16px; } }

/* ---------- Type helpers (used inside Text elements: <p class="aino-eyebrow">, <h2 class="aino-display aino-h2">) ---------- */
.aino-eyebrow {
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; line-height: 1.7;
  letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin: 0 0 24px;
}
.aino-display {
  font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: -.005em;
  color: var(--ink); text-wrap: balance; margin: 0;
}
.aino-h1 { font-size: clamp(47px, 7.17vw, 108px); line-height: 1.06; }
.aino-h2 { font-size: clamp(38px, 4.48vw, 65px); }
.aino-h3 { font-size: clamp(29px, 2.58vw, 38px); }
.aino-display em { font-style: italic; }
.aino-lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--muted); max-width: 620px; }
p.aino-lead:last-child { margin-bottom: 0; }
.aino-display + .aino-lead { margin-top: 20px; }
.dark .aino-display { color: var(--on-photo); }
.dark .aino-eyebrow { color: rgba(255, 255, 255, .85); }

/* Text link with arrow — <a class="aino-link"> inside a Text element */
.aino-link {
  display: inline-flex; gap: 12px; align-items: center;
  font-size: 11.5px; font-weight: 500; line-height: 1.7; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid currentColor;
}
.aino-link::after { content: "\2192"; transition: transform .4s var(--ease); letter-spacing: 0; }
.aino-link:hover { color: var(--ink); }
.aino-link:hover::after { transform: translateX(6px); }

/* ---------- Buttons — UX Builder: Button, Class "aino-btn" + one of aino-btn--light / --solid / --ghost
   (square, hairline, no shadow). Add "aino-film" to a button whose link is an .mp4 to open it in the film modal. */
.button.aino-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: 54px; min-height: 0; padding: 0 30px; margin: 0 12px 12px 0; border-radius: 0;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; line-height: 1; letter-spacing: .26em; text-transform: uppercase;
  border: 1px solid currentColor; box-shadow: none; text-shadow: none;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.button.aino-btn span { line-height: 1; }
.button.aino-btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.button.aino-btn--solid:hover { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; }
.button.aino-btn--ghost, .button.aino-btn--ghost.is-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button.aino-btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: none; }
.button.aino-btn--light, .button.aino-btn--light.is-outline { background: transparent; color: var(--on-photo); border-color: rgba(255, 255, 255, .7); }
.button.aino-btn--light:hover { background: var(--on-photo); color: var(--aino-black); border-color: var(--on-photo); box-shadow: none; }
/* play dot on film buttons (circle + triangle in the text colour) */
.button.aino-film::before {
  content: ""; flex: none; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10.5' fill='none' stroke='black'/%3E%3Cpath d='M9 6.5v9l7-4.5z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10.5' fill='none' stroke='black'/%3E%3Cpath d='M9 6.5v9l7-4.5z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

/* ---------- Layout: rows inside sections follow the prototype's .wrap (max 1440px, fluid side gutter) ----------
   Flatsome columns carry 15px side padding, so normal rows get (gutter - 15px). Rows with class "aino-grid"
   are laid out as CSS grids (columns lose Flatsome's padding and widths; the grid sets them). */
.section-content > .row:not(.row-full-width) { max-width: var(--max); padding-left: calc(var(--gutter) - 15px); padding-right: calc(var(--gutter) - 15px); }
.section-content > .row.aino-grid { padding-left: var(--gutter); padding-right: var(--gutter); }
.row.aino-grid, .row.aino-base { display: grid; }
/* Flatsome clearfix pseudo-elements would become empty grid items */
.row.aino-grid::before, .row.aino-grid::after, .row.aino-base::before, .row.aino-base::after { display: none; }
.row.aino-grid > .col { max-width: none; flex-basis: auto; width: auto; padding: 0; min-width: 0; }
.row.row-full-width { max-width: none; }
.aino-section .col { padding-bottom: 0; }
.aino-section .col-inner > :last-child { margin-bottom: 0; }
/* two plain white sections in a row: no double gap (as in the prototype) */
.section.aino-section:not(.aino-paper):not(.aino-deep) + .section.aino-section:not(.aino-paper):not(.aino-deep) { padding-top: 0 !important; }

/* ---------- Header (Flatsome Header Builder; theme options set the logo, heights, colours) ---------- */
/* Transparent over the hero on the homepage (page template "Full Width – Transparent Header – Light Text"),
   solid glass header on scroll and on all other pages. */
.header-main .header-inner.container { max-width: var(--max); padding-left: var(--gutter); padding-right: var(--gutter); }
.header-wrapper { border-bottom: 1px solid transparent; transition: background .5s var(--ease), border-color .5s var(--ease); }
.header:not(.transparent) .header-wrapper,
.header .header-wrapper.stuck { border-bottom-color: var(--line); }
.header-wrapper.stuck, .header-shadow .header-wrapper { box-shadow: none; }
.header-bg-color { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.header.transparent .header-wrapper:not(.stuck) .header-bg-color { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 761px) { .stuck .header-main { height: 92px; } }
@media (max-width: 760px) { #header .header-main, #header .stuck .header-main { height: 72px !important; } }

/* Logo: AY mark (92px) + the "AINO YACHTS" wordmark set in Jost (owner's request; no wordmark file in the brand kit) */
#header #logo { width: auto; }
#logo a { display: flex; align-items: center; gap: 16px; text-decoration: none; }
#logo img { width: 92px; height: auto; max-height: none; flex: none; }
#logo a::after {
  content: "Aino Yachts"; white-space: nowrap;
  font: 400 12.5px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase;
  color: #999999; transition: color .5s ease;
}
.nav-dark #logo a::after { color: var(--on-photo); }

/* Main menu (Header element "Nav", centred between logo and the right-hand group) */
.header-main .flex-left.flex-grow { justify-content: center; }
.header-nav-main.nav-left { justify-content: center; }
.header-nav-main > li { margin: 0 18px; }
.header-nav-main > li > a {
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink); opacity: .9; padding: 10px 0;
}
.header-nav-main > li > a:hover, .header-nav-main > li.active > a { color: var(--ink); opacity: 1; }
.nav-dark .header-nav-main > li > a, .nav-dark .header-nav-main > li > a:hover { color: var(--on-photo); }
/* dropdown chevron as in the prototype */
.header-nav-main .icon-angle-down { display: none; }
.header-nav-main > li.has-dropdown > a::after {
  content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 9px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); opacity: .7;
}
/* dropdown panel */
.header-nav-main .nav-dropdown {
  min-width: 250px; padding: 12px 0; border: 1px solid var(--line); border-radius: 0;
  background: var(--bg); box-shadow: 0 18px 44px rgba(0, 0, 0, .08); text-align: left;
}
.header-nav-main .nav-dropdown > li > a,
.nav-dropdown.nav-dropdown-default > li > a {
  display: block; margin: 0; padding: 9px 24px; border: 0;
  font: 400 15px/1.35 var(--sans); letter-spacing: .01em; text-transform: none; white-space: nowrap; color: var(--ink);
}
.header-nav-main .nav-dropdown > li > a:hover { background: var(--bg-alt); color: var(--ink); }
.header-nav-main .nav-dropdown > li.nav-drop__all { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.header-nav-main .nav-dropdown > li.nav-drop__all > a { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* Language switcher — Header element "HTML 1" (placeholder until WPML: replace with the "Languages" element) */
.aino-lang { display: flex; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .18em; line-height: 1; }
.aino-lang a { opacity: .55; color: inherit; }
.aino-lang a.is-active, .aino-lang a:hover { opacity: 1; }
.header-main .html_topbar_left { color: var(--ink); margin-right: 14px; }
.nav-dark .html_topbar_left { color: var(--on-photo); }

/* "Enquire" — Header element "Button 1" */
#header .header-button .button {
  display: inline-flex; align-items: center; height: 44px; min-height: 0; padding: 0 22px; margin: 0; border-radius: 0;
  font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .26em;
  color: var(--ink); border: 1px solid var(--line-strong); background: transparent;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
#header .header-button .button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); box-shadow: none; }
#header .nav-dark .header-button .button { color: var(--on-photo); border-color: rgba(255, 255, 255, .7); }
#header .nav-dark .header-button .button:hover { background: var(--on-photo); color: var(--aino-black); border-color: var(--on-photo); }

/* Burger (Header element "Menu icon", mobile right) */
.header-main .mobile-nav > li > a { color: var(--ink); width: 44px; height: 44px; justify-content: center; padding: 0; }
.nav-dark .mobile-nav > li > a { color: var(--on-photo); }
.header-main .mobile-nav .icon-menu { display: block; width: 24px; height: 9px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; font-size: 0; }
.header-main .mobile-nav .icon-menu::before { content: none; }

/* Prototype switches to the burger at 1100px; Flatsome at 850px. Between the two, show the mobile header. */
@media (min-width: 850px) and (max-width: 1100px) {
  .header-main .hide-for-medium { display: none !important; }
  .header-main .show-for-medium { display: flex !important; }
  .header-main .flex-col.show-for-medium.flex-left { flex: 1; }
  #logo img { width: 76px; }
}
@media (max-width: 1100px) { #logo img { width: 76px; } }
@media (max-width: 760px) {
  #logo a { gap: 12px; }
  #logo img { width: 58px; }
  #logo a::after { font-size: 11px; letter-spacing: .26em; }
  .header-main .header-inner.container { padding-left: var(--gutter); padding-right: calc(var(--gutter) - 10px); }
}
@media (max-width: 360px) { #logo a::after { letter-spacing: .18em; font-size: 10px; } }

/* ---------- Mobile menu — Flatsome off-canvas (Header > Mobile Menu: overlay right, elements "Nav" + "HTML 2") ---------- */
.off-canvas-right.mfp-bg.off-canvas, .off-canvas .mfp-bg { background: var(--bg); }
.off-canvas-right .mfp-content { --drawer-width: 100%; width: 100%; background: var(--bg); box-shadow: none; }
.off-canvas .sidebar-menu { padding: 100px var(--gutter) 40px; }
.off-canvas .nav-sidebar.nav-vertical > li { border: 0; border-bottom: 1px solid var(--line); }
.off-canvas .nav-sidebar.nav-vertical > li + li { border-top: 0; }
.off-canvas .nav-sidebar.nav-vertical > li.menu-item:hover, .off-canvas .nav-sidebar.nav-vertical > li.menu-item.active { background: none; }
.off-canvas .nav-sidebar.nav-vertical > li > a {
  font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.2; letter-spacing: 0; text-transform: none;
  padding: 14px 0; color: var(--ink);
}
.off-canvas .nav-sidebar.nav-vertical > li > ul.sub-menu { padding: 6px 0 16px; }
.off-canvas .nav-sidebar.nav-vertical > li > ul.sub-menu > li > a,
.off-canvas .nav-sidebar.nav-vertical li li > a {
  font: 400 17px/1.4 var(--sans); letter-spacing: 0; text-transform: none; padding: 9px 0; color: var(--text);
}
.off-canvas .nav-sidebar .toggle { color: var(--ink); opacity: 1; margin-right: -8px; }
.off-canvas .nav-sidebar .toggle i { font-size: 18px; }
.off-canvas .nav-sidebar li.html { padding: 40px 0 0; border: 0 !important; }
.aino-mobile-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.aino-mobile-foot .aino-lang { gap: 14px; color: var(--ink); }
.aino-mobile-foot .button.aino-btn { margin: 0; }
.off-canvas .mfp-close { top: 16px; right: calc(var(--gutter) - 10px); color: var(--ink); opacity: 1; mix-blend-mode: normal; }
.off-canvas .nav-sidebar li li { margin-left: 0; padding-left: 0; }

/* ---------- Hero — Section "aino-hero" (bg = poster image, height 100vh, padding 0)
   > HTML element "aino-hero__media" (<video data-hero-video ...>), Row "aino-hero__content", HTML "aino-scroll-cue" ---------- */
.section.aino-hero { min-height: max(640px, 100vh) !important; min-height: max(640px, 100svh) !important; align-items: flex-end; padding: 0; overflow: hidden; color: var(--on-photo); }
.aino-hero .section-content { position: relative; width: 100%; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.aino-hero__media { position: absolute; inset: 0; z-index: 0; }
.aino-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aino-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--shade), .7) 0%, rgba(var(--shade), .16) 46%, rgba(var(--shade), .3) 100%);
}
.aino-hero__content { position: relative; z-index: 2; padding-bottom: clamp(56px, 9vh, 120px); }
.aino-hero__content .col { padding-bottom: 0; }
.aino-hero .aino-h1 { max-width: 1000px; }
.aino-hero .button.aino-btn { margin-top: 44px; }
.aino-hero .button.aino-btn { margin-right: 12px; }
.aino-scroll-cue {
  position: absolute; right: var(--gutter); bottom: clamp(56px, 9vh, 120px); z-index: 2;
  writing-mode: vertical-rl; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .26em; text-transform: uppercase; opacity: .75;
}
@media (min-width: 761px) { .aino-hero .button.aino-btn { min-width: 240px; } }
@media (min-width: 761px) and (max-width: 1100px) {
  .aino-hero .aino-h1 { font-size: 54px; }
  .aino-hero .button.aino-btn { margin-top: 28px; }
  .aino-hero__content { padding-bottom: 44px; }
}
@media (max-width: 760px) {
  .aino-scroll-cue { display: none; }
  /* phone: headline in the sky above the yacht, equal-width buttons on the dark water below */
  .section.aino-hero { align-items: stretch; }
  .aino-hero__content { flex: 1; padding-bottom: 0; }
  .aino-hero__content .col, .aino-hero__content .col-inner { height: 100%; }
  .aino-hero__content .col-inner { display: flex; flex-direction: column; padding: 112px 0 48px; }
  .aino-hero .aino-h1 { font-size: min(47px, 11.6vw); }
  .aino-hero .button.aino-btn { width: 100%; margin: 0 0 12px; }
  .aino-hero .aino-h1 + .button.aino-btn { margin-top: auto; }
  .aino-hero .button.aino-btn:last-of-type { margin-bottom: 0; }
  .aino-hero__media::after {
    background: linear-gradient(to bottom, rgba(var(--shade), .5) 0%, rgba(var(--shade), .12) 34%, rgba(var(--shade), 0) 50%, rgba(var(--shade), .55) 80%, rgba(var(--shade), .75) 100%);
  }
}

/* ---------- Intro — Section "aino-section" > Row "aino-grid aino-intro" (2 columns) ---------- */
.aino-intro { grid-template-columns: 1fr 1fr; gap: clamp(48px, 8vw, 140px); align-items: start; }
.aino-intro p { margin: 0 0 24px; color: var(--text); }
.aino-intro .aino-eyebrow { color: var(--muted); }
/* stats: <ul class="aino-stats"><li><strong>4</strong> In the fleet</li>… */
ul.aino-stats { display: flex; gap: 56px; margin: 48px 0 0; padding: 36px 0 0; border-top: 1px solid var(--line); list-style: none; }
.col-inner ul.aino-stats li {
  margin: 0; list-style: none;
  font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
}
.aino-stats strong {
  display: block; font-family: var(--serif); font-size: 52px; font-weight: 400; line-height: 1.05;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}

/* ---------- Section head — Row "aino-section-head": left column eyebrow + h2, right column link or lead ---------- */
.aino-section-head { margin-bottom: clamp(48px, 6vw, 88px); align-items: flex-end; }
.aino-section-head > .col + .col:last-child .col-inner { display: flex; justify-content: flex-end; }
.aino-section-head .aino-head-link { margin: 0; white-space: nowrap; }
.aino-section-head .aino-lead { margin: 0; }

/* ---------- Fleet — Row "aino-grid aino-fleet", one column per boat, each an Image Box "aino-card"
   (image height 133.33% = 3:4; tag: <span class="aino-card__tag">; title link covers the whole card) ---------- */
.aino-fleet { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.aino-card.box { position: relative; }
.aino-card .box-image { background: var(--bg-deep); overflow: hidden; }
.aino-card .box-image img { transition: transform 1.2s var(--ease); }
.aino-card:hover .box-image img { transform: scale(1.05); }
.aino-card .box-text { padding: 24px 0 0; font-size: 1em; position: static; }
.aino-card .box-text p { margin: 0; }
.aino-card__tag {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--bg); color: var(--ink);
  font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; padding: 8px 12px;
}
.aino-card__name { font-family: var(--serif); font-size: 29px; font-weight: 400; line-height: 1.15; margin: 0 0 8px; color: var(--ink); text-wrap: balance; }
.aino-card__name a { color: inherit; }
.aino-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.box-text p.aino-card__meta { font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.box-text p.aino-card__price { margin-top: 14px; font-size: 15px; color: var(--text); }
/* guest count icon (a person) before "12 guests" */
.aino-guests { white-space: nowrap; }
.aino-guests::before {
  content: ""; display: inline-block; width: .95em; height: .95em; margin-right: .3em; vertical-align: -.1em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.5' r='3.6'/%3E%3Cpath d='M4.5 20.5c.9-4.3 3.8-6.7 7.5-6.7s6.6 2.4 7.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7.5' r='3.6'/%3E%3Cpath d='M4.5 20.5c.9-4.3 3.8-6.7 7.5-6.7s6.6 2.4 7.5 6.7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Destinations — Row "aino-dest-head" (centred), then one full-width collapsed Row per base:
   "aino-base" (image column 7 + text column 5) and "aino-base aino-base--reverse" (text 5 + image 7).
   Column classes: "aino-base__img" (Image element) and "aino-base__content" (Text). ---------- */
.aino-dest-head { margin-bottom: clamp(56px, 8vw, 120px); text-align: center; }
.row.aino-base {
  display: grid; grid-template-columns: 7fr 5fr; align-items: center; position: relative;
  gap: clamp(40px, 7vw, 128px); margin-bottom: clamp(72px, 10vw, 160px); max-width: none; padding: 0;
}
.row.aino-base:last-child { margin-bottom: 0; }
.row.aino-base--reverse { grid-template-columns: 5fr 7fr; }
.row.aino-base > .col { max-width: none; flex-basis: auto; width: auto; padding: 0; position: static; min-width: 0; }
.aino-base .col-inner { position: static; }
.aino-base__img .col-inner > .img, .aino-base__img .img-inner { width: 100% !important; margin: 0; }
.aino-base__img .img-inner { height: min(82vh, 820px); overflow: hidden; background: var(--bg-deep); }
.aino-base__img .img-inner img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.aino-base:hover .aino-base__img img { transform: scale(1.04); }
.aino-base__content .col-inner { max-width: 480px; padding-right: var(--gutter); }
.aino-base--reverse .aino-base__content { justify-self: end; }
.aino-base--reverse .aino-base__content .col-inner { padding-right: 0; padding-left: var(--gutter); }
.aino-base__content p { margin: 0; }
.aino-base__coords { font-size: 11px; font-weight: 500; letter-spacing: .26em; color: var(--muted); margin: 0 0 28px !important; }
.aino-base__title { font-family: var(--serif); font-weight: 400; font-size: clamp(43px, 4.7vw, 74px); line-height: 1.08; margin: 0 0 28px; color: var(--ink); text-wrap: balance; }
.aino-base__title em { font-style: italic; }
.aino-base__lead { color: var(--text); margin: 0 0 28px !important; }
.aino-base__places {
  margin: 0 0 36px !important; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); line-height: 2;
}
/* the "Discover" link covers the whole row, as in the prototype */
.aino-stretch::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---------- Experiences — Row "aino-section-head" (h2 + lead), Row "aino-grid aino-experiences":
   Image "aino-experiences__img" + Text with <ul class="aino-exp-list"> (h3 link + p per line) ---------- */
.aino-experiences { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: start; }
.col-inner > .aino-experiences__img, .aino-experiences__img .img-inner { width: 100% !important; margin: 0; }
.aino-experiences__img .img-inner { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-deep); }
.aino-experiences__img img { width: 100%; height: 100%; object-fit: cover; }
ul.aino-exp-list { list-style: none; margin: 0; padding: 0; }
.col-inner ul.aino-exp-list li {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center;
  margin: 0; padding: 30px 0; border-top: 1px solid var(--line); list-style: none;
}
.aino-exp-list li:last-child { border-bottom: 1px solid var(--line); }
.aino-exp-list h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.18vw, 34px); line-height: 1.15; margin: 0; color: var(--ink); }
.aino-exp-list h3 a { color: inherit; }
.aino-exp-list h3 a::after { content: ""; position: absolute; inset: 0; }
.aino-exp-list p { grid-column: 1; margin: 0; color: var(--muted); font-size: 15px; }
.aino-exp-list li::after { content: "\2192"; grid-row: 1 / span 2; grid-column: 2; font-size: 20px; color: var(--ink); transition: transform .4s var(--ease); }
.aino-exp-list li:hover::after { transform: translateX(6px); }

/* ---------- Film band — Section "aino-film-band" (bg image + background video mp4, overlay rgba(0,0,0,.42),
   height 80vh, dark) > Row "aino-film-band__content" (centred column) ---------- */
.section.aino-film-band { min-height: max(520px, 80vh) !important; padding: 0; text-align: center; overflow: hidden; }
.aino-film-band .video-bg { object-fit: cover; width: 100%; height: 100%; }
.aino-film-band .section-content { width: 100%; }
.aino-film-band__content .col { padding-bottom: 0; }
.aino-film-band .button.aino-btn { margin: 40px 0 0; }

/* ---------- Partners — Section "aino-section aino-paper" > Row "aino-grid aino-partners-wrap":
   Text column + column "aino-partners" holding one Image element per logo (grey PNGs) ---------- */
.aino-partners-wrap { grid-template-columns: 1fr 2.4fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.aino-partners-wrap .aino-lead { margin-top: 20px; }
.aino-partners > .col-inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.aino-partners > .col-inner > .img {
  position: relative; overflow: hidden; margin: 0; width: auto !important; min-width: 0; aspect-ratio: 2 / 1;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg);
}
.aino-partners .img-inner { position: static; width: auto !important; height: 100%; }
.aino-partners .img img {
  position: absolute; inset: 0; margin: auto; max-width: none; width: 58%; height: 38%; object-fit: contain;
  filter: grayscale(1) brightness(.4); opacity: .8; transition: opacity .4s var(--ease);
}
.aino-partners .img:hover img { opacity: 1; }
.aino-partners .img img[src*="Mercury_Towers"] { transform: scale(1.35); }

/* ---------- Plan your charter — Section "aino-section aino-deep" (bg #ECECEC) > Row "aino-grid aino-cta":
   Text + Buttons (aino-btn--solid / aino-btn--ghost) | Text with <ul class="aino-steps"> (li class sets the icon) ---------- */
.aino-cta { grid-template-columns: 1.1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: center; }
.aino-cta .aino-lead { margin-bottom: 44px; }
.aino-cta .button.aino-btn { margin: 0 12px 0 0; }
ul.aino-steps { list-style: none; margin: 0; padding: 0; }
.col-inner ul.aino-steps li {
  position: relative; margin: 0; padding: 20px 0 20px 52px; list-style: none;
  border-top: 1px solid var(--line-strong); font-size: 15px; line-height: 1.6; color: var(--muted);
}
.aino-steps li:last-child { border-bottom: 1px solid var(--line-strong); }
.aino-steps strong { display: block; margin-bottom: 4px; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; color: var(--ink); }
.aino-steps li::before {
  content: ""; position: absolute; left: 0; top: 22px; width: 28px; height: 28px; background: var(--ink);
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.aino-step--waters { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }
.aino-step--guests { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h5l-.5 5a2 2 0 0 1-4 0L5 3zM7.5 10v9M5 20h5'/%3E%3Cpath d='M14 3h5l-.5 5a2 2 0 0 1-4 0L14 3zM16.5 10v9M14 20h5'/%3E%3Cpath d='M5.3 6h4.4M14.3 6h4.4'/%3E%3C/svg%3E"); }
.aino-step--boat { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v14M8 11h8M4 14c0 4 4 7 8 7s8-3 8-7'/%3E%3Cpath d='M2.5 15.5 4 14l1.5 1.5M18.5 15.5 20 14l1.5 1.5'/%3E%3C/svg%3E"); }
.aino-step--rest { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1'/%3E%3Cpath d='M3.5 6l8.5 7 8.5-7'/%3E%3C/svg%3E"); }

/* ---------- Footer — Flatsome Block "Footer" (Theme Options > Footer > Footer block):
   Section "aino-footer" > Row "aino-grid aino-footer__grid" (4 columns) + Row "aino-footer__legal" ---------- */
.section.aino-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; padding-bottom: 40px !important; }
.aino-footer .col { padding-bottom: 0; }
.aino-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.aino-footer__brand .col-inner > .img { width: 96px !important; margin: 0 0 28px; }
.aino-footer p { margin: 0; }
.aino-footer h4 { font-family: var(--sans); color: var(--ink); font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .26em; text-transform: uppercase; margin: 0 0 20px; }
.aino-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aino-footer .col-inner ul li { margin: 0; list-style: none; line-height: 1.7; }
.aino-footer a { color: var(--text); }
.aino-footer a:hover { color: var(--ink); }
.aino-footer__legal { margin-top: 80px; }
.aino-footer__legal p { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); font-size: 13px; }
.aino-footer__legal a { color: var(--muted); }
/* Flatsome's own bottom bar is not used (the legal line lives in the Footer block) */
.absolute-footer { display: none; }

/* ---------- Sticky contact (printed by functions.php on every page) ---------- */
.contact-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.contact-fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s; }
.contact-fab__toggle {
  height: 48px; margin: 0; padding: 0 24px; border-radius: 0; min-height: 0;
  background: var(--bg-glass); color: var(--ink); border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .26em; text-transform: uppercase;
  transition: border-color .4s var(--ease);
}
.contact-fab__toggle:hover { border-color: var(--ink); }
.contact-fab__icon { width: 18px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1; overflow: visible; }
.contact-fab__menu {
  display: grid; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.contact-fab.is-open .contact-fab__menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.contact-fab__menu a {
  background: var(--bg-glass); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 0;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: 16px 24px; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .24em; text-transform: uppercase; text-align: right;
}
.contact-fab__menu a:hover { background: var(--bg-alt); color: var(--ink); }
.mfp-ready ~ .contact-fab, html.aino-modal-open .contact-fab { opacity: 0; pointer-events: none; }

/* ---------- Film modal (aino.js, opened by any Button with class "aino-film") ---------- */
.aino-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(var(--shade), .94); display: none; place-items: center; padding: 4vw; }
.aino-modal.is-open { display: grid; }
.aino-modal video { width: min(1400px, 100%); aspect-ratio: 16 / 9; max-height: 86vh; background: #000; }
.aino-modal__close {
  position: absolute; top: 24px; right: 28px; margin: 0; padding: 8px 0; min-height: 0; color: var(--on-photo);
  font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .26em; text-transform: uppercase;
}
html.aino-modal-open { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .aino-fleet { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
  .aino-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .aino-section-head { margin-bottom: clamp(48px, 6vw, 88px); }
  .aino-section-head > .col + .col { margin-top: 20px; }
  .aino-section-head > .col + .col:last-child .col-inner { justify-content: flex-start; }
  .aino-intro, .aino-cta, .aino-experiences, .aino-partners-wrap { grid-template-columns: 1fr; }
  .aino-experiences { gap: 40px; }
  ul.aino-stats { gap: 32px; }
  .aino-stats strong { font-size: 40px; }
  .aino-fleet { grid-template-columns: 1fr; gap: 48px; }
  .aino-card .box-image .image-cover { padding-top: 75% !important; }   /* phone: 4:3 like the prototype (the cover div sits inside the link) */
  .aino-card__name { font-size: 28px; }
  .row.aino-base, .row.aino-base--reverse { grid-template-columns: 1fr; gap: 32px; }
  .aino-base--reverse .aino-base__img { order: -1; }
  .aino-base__img .img-inner { height: auto; aspect-ratio: 4 / 5; }   /* phone: a little lower than before (was 64vh) */
  .aino-base__content .col-inner, .aino-base--reverse .aino-base__content .col-inner { padding: 0 var(--gutter); }
  .aino-base--reverse .aino-base__content { justify-self: start; }
  .aino-experiences__img .img-inner { aspect-ratio: 4 / 3; }
  .aino-partners > .col-inner > .img { aspect-ratio: 4 / 3; }   /* phone: taller cells like the prototype (selector must match the desktop one) */
  .aino-footer__grid { grid-template-columns: 1fr; }
  .contact-fab { right: 16px; bottom: 16px; }
  .aino-cta .button.aino-btn { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aino-card .box-image img, .aino-base__img img { transition: none; }
}

/* =========================================================
   YACHT PAGE TEMPLATE (Ocean 90 first; Manhattan 73 / Axopar 37 / Donzi 28 = duplicate the page, swap content)
   Ported from website/assets/css/yacht.css. Page template "Full Width – Transparent Header – Light Text".
   Every Section on a yacht page carries "y-sec" (rows then follow the yacht grid: max 1280px, gutter 20–72px).
   ========================================================= */
:root {
  --y-gutter: clamp(20px, 5vw, 72px);
  --y-gap: clamp(16px, 2vw, 28px);
  --y-wrap: 1280px;
  --y-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 9'%3E%3Cpath d='M0 4.5h29M25 .8l3.8 3.7L25 8.2' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}
.y-sec .section-content > .row:not(.row-full-width) { max-width: calc(var(--y-wrap) + 2 * var(--y-gutter)); padding-left: calc(var(--y-gutter) - 15px); padding-right: calc(var(--y-gutter) - 15px); }
.y-sec .section-content > .row.aino-grid { padding-left: var(--y-gutter); padding-right: var(--y-gutter); }
.y-sec .col { padding-bottom: 0; }
.y-sec, .y-hero { line-height: 1.75; }
.y-sec p { margin: 0 0 1em; }
.y-sec .col-inner > :last-child, .y-sec p:last-child { margin-bottom: 0; }
.section.y-alt { background: var(--bg-alt); }
.section.y-deep { background: var(--bg-deep); }
.y-deep .y-label { color: var(--text); }

/* Type — inside Text elements */
.y-label {
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; line-height: 1.7;
  letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px !important;
}
.y-label--light, .dark .y-label--light { color: rgba(255, 255, 255, .92); }
.y-label--gap { margin-top: 44px !important; }
.y-h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4vw, 60px); line-height: 1.1; letter-spacing: -.005em; max-width: 18ch; margin: 0; color: var(--ink); text-wrap: balance; }
.y-h2--sm { font-size: clamp(31px, 3vw, 45px); }
.y-sec p.y-lead { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.75; color: var(--text); margin-top: 32px; }

/* Text link with a long arrow — <a class="y-link"> in a Text element, or a Button with class "y-link" */
.y-link, .button.y-link {
  display: inline-flex; align-items: center; gap: 16px; vertical-align: middle;
  height: auto; min-height: 0; margin: 0; padding: 0 0 9px; background: none; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; box-shadow: none;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; line-height: 1.4;
  color: var(--ink); transition: border-color .4s var(--ease), gap .4s var(--ease);
}
.y-link::after, .button.y-link::after {
  content: ""; width: 30px; height: 9px; flex: none; background: currentColor;
  -webkit-mask: var(--y-arrow) center / contain no-repeat; mask: var(--y-arrow) center / contain no-repeat;
}
.y-link:hover, .button.y-link:hover { color: var(--ink); background: none; border-color: currentColor; gap: 22px; box-shadow: none; }
.button.y-link span { line-height: 1.4; }
.y-link span { letter-spacing: .08em; text-transform: none; color: var(--muted); font-weight: 400; }
.button.y-link > span { letter-spacing: inherit; text-transform: inherit; color: inherit; font-weight: inherit; }
.button.y-link--light, .button.y-link--light:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.button.y-link--light:hover { border-color: #fff; }
.button.aino-film.y-link::before { content: none; }

/* Buttons on yacht pages are a little larger than on the homepage */
.y-sec .button.aino-btn, .y-hero .button.aino-btn { height: auto; min-height: 56px; padding: 0 36px; }
.button.aino-btn--white { background: #fff; color: var(--aino-black); border-color: #fff; }
.button.aino-btn--white:hover { background: transparent; color: #fff; border-color: #fff; box-shadow: none; }

/* Line icons: <li class="y-i y-i--NAME"> — the icon is drawn before the text in the text colour (ink) */
.y-i::before { content: ""; flex: none; display: block; width: 22px; height: 22px; background: var(--ink); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
/* Line icons (prototype SVGs, stroke 1.1) — add class "y-i y-i--NAME" to a list item: glass, sun, case, star, fuel, bottle, wheel, calendar, jacuzzi, seabob, paddle, snorkel, tender, jetski, chase, boat, flag, pin, guests, bed, crew */
.y-i--glass { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 3h6l-.6 6.2a2.4 2.4 0 0 1-4.8 0z%27/%3E%3Cpath d=%27M12 11.6v8.9M9 20.5h6%27/%3E%3Cpath d=%27M18.5 3.5v3M17 5h3%27/%3E%3C/svg%3E"); }
.y-i--sun { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%273.8%27/%3E%3Cpath d=%27M12 2.5V5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8%27/%3E%3C/svg%3E"); }
.y-i--case { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273.5%27 y=%277.5%27 width=%2717%27 height=%2712%27 rx=%271%27/%3E%3Cpath d=%27M9 7.5v-2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3.5 12.5h17%27/%3E%3C/svg%3E"); }
.y-i--star { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z%27/%3E%3C/svg%3E"); }
.y-i--fuel { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 20.5V5a1.5 1.5 0 0 1 1.5-1.5h6A1.5 1.5 0 0 1 14 5v15.5M3.5 20.5h12M5 10h9%27/%3E%3Cpath d=%27M14 8.5l3 2.5v6.5a1.5 1.5 0 0 0 3 0V8l-2.5-2.5%27/%3E%3C/svg%3E"); }
.y-i--bottle { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M9 3h6M10 3v3.5L7.5 9.5V20a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V9.5L14 6.5V3%27/%3E%3Cpath d=%27M7.5 13h9%27/%3E%3C/svg%3E"); }
.y-i--wheel { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%276%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%271.6%27/%3E%3Cpath d=%27M12 3v4.4M12 16.6V21M3 12h4.4M16.6 12H21M5.6 5.6l3.1 3.1M15.3 15.3l3.1 3.1M5.6 18.4l3.1-3.1M15.3 8.7l3.1-3.1%27/%3E%3C/svg%3E"); }
.y-i--calendar { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273.5%27 y=%275%27 width=%2717%27 height=%2715.5%27 rx=%271%27/%3E%3Cpath d=%27M3.5 10h17M8 3v4M16 3v4%27/%3E%3C/svg%3E"); }
.y-i--jacuzzi { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 13h18v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z%27/%3E%3Cpath d=%27M8 10c0-1.2 1.2-1.2 1.2-2.4S8 6.4 8 5.2M12 10c0-1.2 1.2-1.2 1.2-2.4S12 6.4 12 5.2M16 10c0-1.2 1.2-1.2 1.2-2.4S16 6.4 16 5.2%27/%3E%3C/svg%3E"); }
.y-i--seabob { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 13c0-2.6 4-4.5 9.5-4.5s9.5 1.9 9.5 4.5-4 3.5-9.5 3.5-9.5-.9-9.5-3.5z%27/%3E%3Ccircle cx=%277%27 cy=%2712.6%27 r=%271.3%27/%3E%3Cpath d=%27M10 8.7V6.5M15 8.7V6.5M3 19.5c2 0 2-1 4.5-1s2.5 1 4.5 1 2-1 4.5-1 2.5 1 4.5 1%27/%3E%3C/svg%3E"); }
.y-i--paddle { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cellipse cx=%2712%27 cy=%2713%27 rx=%2710%27 ry=%272.8%27 transform=%27rotate(-30 12 13)%27/%3E%3Cpath d=%27M7 3.5l8.5 13M15 16l1.6 3%27/%3E%3C/svg%3E"); }
.y-i--snorkel { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3.5 8.5h15v4.5a3 3 0 0 1-3 3h-1.8L12 14h-2.2l-1.7 2H6.5a3 3 0 0 1-3-3z%27/%3E%3Cpath d=%27M21 12.5V4.5M21 4.5h-2%27/%3E%3C/svg%3E"); }
.y-i--tender { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 15h19l-2.4 4H5z%27/%3E%3Cpath d=%27M7.5 15v-3h7.5l2.5 3%27/%3E%3Cpath d=%27M10.5 12V9.5%27/%3E%3C/svg%3E"); }
.y-i--jetski { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 15.5h14l3.5-3.5H15l-2-3H9.5L7.5 12H4z%27/%3E%3Cpath d=%27M2.5 19.5c2 0 2-1 4.5-1s2.5 1 4.5 1 2-1 4.5-1 2.5 1 4.5 1%27/%3E%3C/svg%3E"); }
.y-i--chase { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 13.5h15l-2 4H5z%27/%3E%3Cpath d=%27M7 13.5V11h6l2 2.5%27/%3E%3Cpath d=%27M19 15.5h2.5M19.5 18h2%27/%3E%3C/svg%3E"); }
.y-i--boat { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 15h19l-2.6 4H5.1z%27/%3E%3Cpath d=%27M5.5 15l2-4h9l3 4%27/%3E%3Cpath d=%27M9.5 11l1.4-3h4.1%27/%3E%3C/svg%3E"); }
.y-i--flag { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5.5 21V3%27/%3E%3Cpath d=%27M5.5 4h12l-2.6 4 2.6 4h-12%27/%3E%3C/svg%3E"); }
.y-i--pin { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z%27/%3E%3Ccircle cx=%2712%27 cy=%2710%27 r=%272.3%27/%3E%3C/svg%3E"); }
.y-i--guests { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%279%27 cy=%278%27 r=%273%27/%3E%3Cpath d=%27M3.5 19c.8-3.4 2.9-5 5.5-5s4.7 1.6 5.5 5%27/%3E%3Ccircle cx=%2716.5%27 cy=%279%27 r=%272.4%27/%3E%3Cpath d=%27M15.6 13.9c2.6-.4 4.4 1.1 5 4.1%27/%3E%3C/svg%3E"); }
.y-i--bed { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 18V7M3 13h18v5M21 13v-1.5A2.5 2.5 0 0 0 18.5 9H11v4%27/%3E%3Ccircle cx=%277%27 cy=%2710.5%27 r=%271.8%27/%3E%3C/svg%3E"); }
.y-i--crew { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 17h16M3 20h18%27/%3E%3Cpath d=%27M5 17a7 7 0 0 1 14 0%27/%3E%3Cpath d=%27M12 10V7.5M10.5 7.5h3%27/%3E%3C/svg%3E"); }

/* ---------- 1. Hero — Banner "y-hero" (bg = landscape photo, focal point 50/55, height calc(100vh - 104px), container full width)
   > Image "y-hero__phone" (portrait photo, phones only) > Text box "y-hero__content" (label, H1, sub, Button + film link) ---------- */
.banner.y-hero { min-height: 560px; overflow: hidden; background-color: var(--aino-black); color: #fff; }
.y-hero .banner-layers { position: absolute; inset: 0; max-width: none; padding: 0; }
.y-hero .banner-layers::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .55) 100%);
}
.y-hero .y-hero__phone { display: none; }
.y-hero .text-box.y-hero__content {
  position: absolute; z-index: 2; top: auto !important; bottom: clamp(48px, 8vh, 96px);
  left: max(var(--y-gutter), calc((100% - var(--y-wrap)) / 2)) !important; right: max(var(--y-gutter), calc((100% - var(--y-wrap)) / 2));
  width: auto !important; max-width: none; margin: 0; padding: 0; transform: none !important; text-align: left;
}
.y-hero .text-box .text-box-content, .y-hero .text-box .text-inner { padding: 0; }
.y-hero .y-label { margin-bottom: 22px !important; }
.y-hero__title { color: #fff !important; font-family: var(--serif); font-weight: 400; font-size: clamp(50px, 7vw, 108px) !important; line-height: 1; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.y-hero__sub { margin: 18px 0 0 !important; font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .88); line-height: 1.7; }
.y-hero .button.aino-btn { margin: 40px 36px 0 0; }
.y-hero .button.y-link { margin-top: 40px; }

/* ---------- 2. Key facts — Section "y-sec y-facts" (bg Light Grey, padding 0) > Row "aino-grid y-facts__list" (6 columns:
   <p class="y-facts__label">, <p class="y-facts__value"> with <small>) ---------- */
.section.y-facts { border-bottom: 1px solid var(--line); }
.y-facts__list { grid-template-columns: repeat(6, 1fr); }
.row.aino-grid.y-facts__list > .col { padding: 30px 0 30px clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); }
.row.aino-grid.y-facts__list > .col:first-child { border-left: 0; padding-left: 0; }
.y-sec p.y-facts__label { margin: 0; font-size: 10.5px; font-weight: 500; line-height: 1.75; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.y-sec p.y-facts__value { margin: 8px 0 0; font-family: var(--serif); font-size: clamp(26px, 2.3vw, 34px); line-height: 1.1; color: var(--ink); white-space: nowrap; }
.y-facts__value small { font-family: var(--sans); font-size: 12px; color: var(--muted); letter-spacing: .04em; }

/* ---------- 3. Story + rate card — Row "aino-grid y-story": column "y-story__text" (7) + column "y-rate" (4, sticky) ---------- */
.y-story { grid-template-columns: repeat(12, 1fr); column-gap: var(--y-gap); align-items: start; }
.y-story > .y-story__text { grid-column: 1 / 8; }
.y-story__text p:not(.y-label):not(.y-lead) { max-width: 60ch; }
.y-ideal { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.y-ideal .y-label { margin-bottom: 14px !important; }
.col-inner ul.y-ideal__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.col-inner ul.y-ideal__list li { display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--ink); list-style: none; }
.row.aino-grid > .col.y-rate { grid-column: 9 / 13; position: sticky; top: 104px; }
.y-rate > .col-inner { padding: 36px 32px; border: 1px solid var(--line-strong); }
.y-sec p.y-rate__price { margin: 0; font-family: var(--serif); font-size: clamp(36px, 3vw, 46px); line-height: 1.1; color: var(--ink); }
.y-rate__price span { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.y-sec p.y-rate__price--sm { margin-top: 8px; font-size: clamp(26px, 2vw, 30px); }
.y-sec p.y-rate__note { margin: 20px 0 12px; font-size: 14px; color: var(--muted); }
.col-inner ul.y-rate__list { margin: 0 0 28px; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.col-inner ul.y-rate__list li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; list-style: none; }
.y-rate__list .y-i::before { width: 18px; height: 18px; margin-top: 2px; }
.y-sec p.y-rate__more { margin: -14px 0 24px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.y-rate .button.aino-btn { width: 100%; margin: 0; }
.y-rate .y-link { margin-top: 22px; }

/* ---------- Section head with tabs — Column "y-head-tabs": Text (div "y-head-tabs__title": label + H2) + Tabs "y-tabs"
   (style Line, align right). The tab titles sit to the right of the heading, the panels run full width below. ---------- */
.y-head-tabs > .col-inner { display: grid; grid-template-columns: 1fr auto; column-gap: 48px; align-items: end; }
.y-head-tabs > .col-inner > * { grid-column: 1 / -1; }
.y-head-tabs .y-head-tabs__title { grid-column: 1; grid-row: 1; }
.y-head-tabs .tabbed-content.y-tabs { display: contents; }
.y-head-tabs .y-tabs > .nav { grid-column: 2; grid-row: 1; margin: 0; justify-content: flex-end; flex-wrap: wrap; gap: 4px 28px; }
.y-head-tabs .y-tabs > .tab-panels { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 64px); padding: 0; }
.y-tabs .tab-panels .panel { padding: 0; }
.y-tabs > .nav > li { margin: 0; padding: 0; }
.y-tabs > .nav > li > a {
  padding: 8px 0; border-bottom: 1px solid transparent;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  transition: color .3s, border-color .3s;
}
.y-tabs > .nav > li > a::before, .y-tabs > .nav-line > li > a::before { display: none; }
.y-tabs > .nav > li > a:hover { color: var(--ink); }
.y-tabs > .nav > li.active > a { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- 4. Gallery — Section "y-sec y-alt" > column "y-head-tabs" > Tabs "y-tabs y-tabs--gallery":
   tab "All" = Gallery "y-gallery y-gallery--mosaic" (19 photos, mosaic, first 12 shown); one Gallery "y-gallery" per filter tab
   (columns 2 or 3; with an odd number of photos in 2 columns the first one runs wide). Lightbox: Flatsome's.
   Button "y-link y-gallery-all" ("View all 19 photos") opens the lightbox at the first photo (aino.js). ---------- */
.row.y-gallery { display: grid; gap: var(--y-gap); margin: 0 !important; max-width: none; width: 100%; }
.row.y-gallery::before, .row.y-gallery::after { display: none; }
.row.y-gallery > .col { max-width: none; flex-basis: auto; width: auto; padding: 0; min-width: 0; overflow: hidden; background: var(--bg-deep); aspect-ratio: 4 / 3; }
.row.y-gallery.large-columns-2 { grid-template-columns: repeat(2, 1fr); }
.row.y-gallery.large-columns-3 { grid-template-columns: repeat(3, 1fr); }
.row.y-gallery.large-columns-2 > .col:first-child:nth-last-child(odd) { grid-column: span 2; aspect-ratio: 8 / 3; }
.row.y-gallery--mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 15vw, 230px); grid-auto-flow: dense; }
.row.y-gallery--mosaic > .col { aspect-ratio: auto; }
.row.y-gallery--mosaic > .col:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.row.y-gallery--mosaic > .col:nth-child(6n + 4) { grid-row: span 2; }
.row.y-gallery--mosaic > .col:nth-child(n + 13) { display: none; }
.y-gallery .col-inner, .y-gallery .col-inner > a, .y-gallery .box, .y-gallery .box-image { display: block; height: 100%; }
.y-gallery .box-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.y-gallery .col:hover .box-image img { transform: scale(1.04); }
.y-gallery .box-text, .y-gallery .overlay { display: none; }
.y-head-tabs .button.y-gallery-all { justify-self: center; grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 64px); }

/* ---------- 5. On board — Row "aino-grid y-split": column "y-split__media" (Image, sticky) + column "y-split__text"
   (label, H2, <ul class="y-list"> with "y-i y-i--NAME" items, text + <span> description) ---------- */
.y-split { grid-template-columns: repeat(12, 1fr); column-gap: var(--y-gap); align-items: start; }
.row.aino-grid > .col.y-split__media { grid-column: 1 / 7; position: sticky; top: 108px; }
.y-split__media .col-inner > .img, .y-split__media .img-inner { width: 100% !important; margin: 0; height: min(calc(100vh - 140px), 820px); overflow: hidden; }
.y-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.y-split > .y-split__text { grid-column: 8 / 13; }
.y-split__text .y-h2 { margin-bottom: 40px; }
.col-inner ul.y-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.col-inner ul.y-list li {
  display: grid; grid-template-columns: 40px 1fr; align-items: start; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); list-style: none;
  font-family: var(--serif); font-size: clamp(21px, 1.7vw, 25px); line-height: 1.3; color: var(--ink);
}
.y-list li::before { grid-row: 1 / span 2; width: 24px; height: 24px; margin-top: 3px; }
.y-list li span { display: block; margin-top: 4px; font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ---------- 6. Specification + prices — Section "y-sec y-alt": Text with <ul class="y-spec"> (items "y-i y-i--NAME",
   <span class="y-spec__label">) > Row "aino-grid y-prices" (3 columns) > note <p class="y-prices__note"> ---------- */
.col-inner ul.y-spec { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; border-top: 1px solid var(--line-strong); list-style: none; }
.col-inner ul.y-spec li {
  display: block; margin: 0; padding: 24px 24px 26px 0; border-bottom: 1px solid var(--line); list-style: none;
  font-family: var(--serif); font-size: clamp(20px, 1.6vw, 23px); line-height: 1.3; color: var(--ink);
}
.col-inner ul.y-spec li:not(:nth-child(4n + 1)) { padding-left: 24px; border-left: 1px solid var(--line); }
.y-spec li::before { width: 24px; height: 24px; margin-bottom: 16px; }
.y-spec__label { display: block; margin-bottom: 8px; font-family: var(--sans); font-size: 10.5px; font-weight: 500; line-height: 1.75; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.y-spec small { display: block; margin-top: 2px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.y-prices { grid-template-columns: repeat(3, 1fr); column-gap: var(--y-gap); margin-top: clamp(56px, 6vw, 88px); }
.y-prices > .col > .col-inner { padding-top: 26px; border-top: 1px solid var(--ink); }
.y-prices .y-label { margin-bottom: 10px !important; }
.y-sec p.y-prices__value { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(36px, 3.2vw, 48px); line-height: 1.05; color: var(--ink); }
.y-prices p:not(.y-label):not(.y-prices__value) { font-size: 15.5px; max-width: 34ch; }
.y-sec p.y-prices__note { margin: 28px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- 7. Deck plans — column "y-head-tabs" > Tabs "y-tabs y-tabs--plans" (one Image "y-plan" per deck, no link)
   + Text <div class="y-plans__foot"> (note + brochure link) ---------- */
.y-tabs--plans > .tab-panels { background: #fff; border: 1px solid var(--line); padding: clamp(16px, 3vw, 48px) !important; }
.y-plan, .y-plan .img-inner { width: 100% !important; margin: 0; }
.y-plan img { width: 100%; height: auto; }
.y-tabs--plans .panel.active { animation: y-fade .6s var(--ease); }
@keyframes y-fade { from { opacity: 0; } to { opacity: 1; } }
.y-plans__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px 40px; margin-top: 28px; }
.y-plans__foot p { margin: 0 !important; font-size: 14px; color: var(--muted); }
.y-plans__swipe { display: none; }

/* ---------- 8. Film — Section "y-film" (bg photo, height 60vh, dark, padding 0) > centred column:
   label, <h2 class="y-film__title">, Button "aino-film y-play" (square play button; its link is the film .mp4) ---------- */
.section.y-film { min-height: clamp(420px, 60vh, 640px) !important; padding: 0; text-align: center; }
.y-film .section-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0, 0, 0, .66), rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .32) 85%, rgba(0, 0, 0, .3)); }
.y-film .section-content { width: 100%; }
.y-film__content .col { padding-bottom: 0; }
.y-film__content .col-inner { text-shadow: 0 2px 28px rgba(0, 0, 0, .45); }
.y-film .y-label { margin-bottom: 22px !important; }
.y-film__title { color: #fff !important; font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 5vw, 76px); line-height: 1.05; margin: 0; }
.button.y-play {
  display: inline-grid; place-items: center; width: 84px; height: 84px; min-height: 0; margin: 40px 0 0; padding: 0; border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; font-size: 0; text-shadow: none;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.button.y-play span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.button.y-play.aino-film::before {
  width: 34px; height: 34px; margin-left: 3px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.5v9l7-4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.5v9l7-4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.button.y-play:hover { background: #fff; color: var(--aino-black); box-shadow: none; }

/* ---------- 9. Enquire — Section "y-sec y-deep" > Row "y-enquire" (centred column: label, H2, lead, two Buttons) ---------- */
.y-sec .section-content > .row.y-enquire { max-width: calc(760px + 2 * var(--y-gutter)); }
.y-enquire .y-h2 { margin-inline: auto; }
.y-enquire p.y-lead { max-width: 56ch; margin-inline: auto; }
.y-enquire p.y-lead { margin-bottom: 0; }
.y-enquire .button.aino-btn { margin: 44px 6px 0; }

/* ---------- 10. The rest of the fleet — Row "y-head" (label + H2 | column "y-head__end" with a link)
   + Row "aino-grid y-others" (3 columns, each an Image Box "y-others__card", image height 66.67% = 3:2) ---------- */
.row.y-head { margin-bottom: clamp(40px, 5vw, 64px); align-items: flex-end; }
.y-head__end > .col-inner { display: flex; justify-content: flex-end; }
.y-others { grid-template-columns: repeat(3, 1fr); gap: var(--y-gap); }
.y-others__card.box { position: relative; }
.y-others__card .box-image { background: var(--bg-deep); overflow: hidden; margin-bottom: 22px; }
.y-others__card .box-image img { transition: transform 1.2s var(--ease); }
.y-others__card:hover .box-image img { transform: scale(1.04); }
.y-others__card .box-text { position: static; padding: 0; font-size: 1em; }
.y-others__card .y-label { margin-bottom: 8px !important; }
.y-others__card .box-text h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2vw, 30px); line-height: 1.15; margin: 0; color: var(--ink); }
.y-others__card h3 a { color: inherit; }
.y-others__card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.y-sec p.y-others__meta { margin: 6px 0 0; font-size: 15px; color: var(--muted); }

/* ---------- Yacht page: responsive ---------- */
@media (max-width: 1100px) {
  .y-facts__list { grid-template-columns: repeat(3, 1fr); }
  .row.aino-grid.y-facts__list > .col:nth-child(4) { border-left: 0; padding-left: 0; }
  .row.aino-grid.y-facts__list > .col:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .y-story > .y-story__text { grid-column: 1 / 13; }
  .row.aino-grid > .col.y-rate { grid-column: 1 / 13; position: static; margin-top: 56px; }
  .col-inner ul.y-rate__list { columns: 2; column-gap: 32px; }
  .col-inner ul.y-rate__list li { break-inside: avoid; }
  .row.y-gallery--mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
  .row.y-gallery--mosaic > .col { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3; }
  .row.aino-grid > .col.y-split__media { grid-column: 1 / 13; position: static; margin-bottom: 48px; }
  .y-split__media .col-inner > .img, .y-split__media .img-inner { height: auto; aspect-ratio: 16 / 10; }
  .y-split > .y-split__text { grid-column: 1 / 13; }
  .col-inner ul.y-spec { grid-template-columns: repeat(2, 1fr); }
  .col-inner ul.y-spec li:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; }
  .col-inner ul.y-spec li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
  .y-prices { grid-template-columns: 1fr; row-gap: 40px; }
}
@media (max-width: 760px) {
  .y-sec, .y-hero { font-size: 16.5px; }
  /* phone hero: portrait photo shifted up, text on the dark water, deeper shade behind the text */
  .banner.y-hero { padding-top: max(560px, calc(100svh - 120px)) !important; }
  .y-hero .banner-bg { display: none; }
  .y-hero .y-hero__phone { display: block; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; top: auto; height: 128%; width: 100% !important; margin: 0; }
  .y-hero__phone .img-inner { height: 100%; }
  .y-hero__phone img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .y-hero .banner-layers::before { background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, .55) 64%, rgba(0, 0, 0, .82) 100%); }
  .y-hero .text-box.y-hero__content { bottom: 36px; }
  .y-hero .y-label { margin-bottom: 12px !important; }
  .y-hero__title { font-size: clamp(44px, 12.5vw, 54px) !important; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
  .y-hero__sub { margin-top: 12px !important; }
  .y-hero .button.aino-btn { display: flex; width: 100%; margin: 26px 0 0; }
  .y-hero .button.y-link { margin-top: 18px; }
  .y-facts__list { grid-template-columns: repeat(2, 1fr); }
  .row.aino-grid.y-facts__list > .col { padding: 22px 0 22px 18px; border-top: 0; }
  .row.aino-grid.y-facts__list > .col:nth-child(odd) { border-left: 0; padding-left: 0; }
  .row.aino-grid.y-facts__list > .col:nth-child(4) { border-left: 1px solid var(--line); padding-left: 18px; }
  .row.aino-grid.y-facts__list > .col:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .y-rate > .col-inner { padding: 28px 22px; }
  .col-inner ul.y-rate__list { columns: 1; }
  .col-inner ul.y-ideal__list { grid-template-columns: 1fr; }
  .col-inner ul.y-ideal__list li { padding: 10px 0; font-size: 21px; }
  .y-ideal__list .y-i::before { width: 20px; height: 20px; }
  /* section head with tabs: heading, then the tab titles in one scrolling line */
  .y-head-tabs > .col-inner { grid-template-columns: minmax(0, 1fr); }
  .y-head-tabs .y-tabs > .nav {
    grid-column: 1; grid-row: 2; margin: 24px calc(-1 * var(--y-gutter)) 0 0; padding-right: var(--y-gutter);
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 4px 22px;
  }
  .y-head-tabs .y-tabs > .nav::-webkit-scrollbar { display: none; }
  .y-tabs > .nav > li > a { white-space: nowrap; }
  .row.y-gallery--mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; }
  .row.y-gallery--mosaic > .col { aspect-ratio: auto; }
  .row.y-gallery--mosaic > .col:nth-child(6n + 1) { grid-column: span 2 !important; grid-row: span 2 !important; }
  .row.y-gallery--mosaic > .col:nth-child(6n + 4) { grid-row: span 1 !important; }
  .row.y-gallery.large-columns-3 { grid-template-columns: repeat(2, 1fr); }
  .y-tabs--plans > .tab-panels { padding: 12px !important; overflow-x: auto; }
  .y-plan, .y-plan .img-inner { width: 760px !important; max-width: none; }
  .y-plans__swipe { display: inline; }
  .y-plans__foot .y-link span { display: none; }
  .section.y-film { min-height: 380px !important; aspect-ratio: 4 / 5; max-height: 72svh; }
  .button.y-play { margin-top: 28px; width: 72px; height: 72px; }
  .button.y-play.aino-film::before { width: 28px; height: 28px; }
  .y-head__end > .col-inner { justify-content: flex-start; margin-top: 24px; }
  .y-others { grid-template-columns: 1fr; gap: 48px; }
  .y-enquire .button.aino-btn { margin: 16px 4px 0; }
  .y-enquire .button.aino-btn:first-of-type { margin-top: 44px; }
}

/* Flatsome photo lightbox (yacht gallery): near-black backdrop like the prototype; the off-canvas menu keeps its white one */
.mfp-bg.mfp-ready:not(.off-canvas) { background: #000; opacity: .94; }

/* =========================================================
   YACHT PAGE VARIATIONS (Manhattan 73, Axopar 37, Donzi 28) — ported from website/assets/css/yacht-extra.css.
   Modifier classes set in the "Class" field of the element named in each comment.
   ========================================================= */
/* More line icons (Manhattan 73, Axopar 37, Donzi 28): family, gift, compass, couple, route, clock, towel, waves, cutlery, gauge, anchor, tag, person, design, diamond, engine, layers, steering, award, drop, length, dial */
.y-i--family { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%279%27 cy=%277%27 r=%273%27/%3E%3Cpath d=%27M3.5 19.5c.7-3.7 2.9-5.7 5.5-5.7s4.8 2 5.5 5.7%27/%3E%3Ccircle cx=%2717%27 cy=%2710%27 r=%272.2%27/%3E%3Cpath d=%27M15.2 14.3c.6-.3 1.2-.4 1.8-.4 2 0 3.4 1.5 3.9 4.6%27/%3E%3C/svg%3E"); }
.y-i--gift { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%274%27 y=%279.5%27 width=%2716%27 height=%2711%27 rx=%27.5%27/%3E%3Cpath d=%27M3 9.5h18M12 9.5v11%27/%3E%3Cpath d=%27M12 9.5c-1.5-3.5-5.5-4-5.5-1.8S10 9.5 12 9.5zM12 9.5c1.5-3.5 5.5-4 5.5-1.8S14 9.5 12 9.5z%27/%3E%3C/svg%3E"); }
.y-i--compass { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%278.5%27/%3E%3Cpath d=%27M15.5 8.5l-2 5-5 2 2-5z%27/%3E%3C/svg%3E"); }
.y-i--couple { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%278.5%27 cy=%278%27 r=%272.8%27/%3E%3Ccircle cx=%2715.5%27 cy=%278%27 r=%272.8%27/%3E%3Cpath d=%27M3 19.5c.6-3.4 2.8-5.3 5.5-5.3 1.4 0 2.6.5 3.5 1.4M21 19.5c-.6-3.4-2.8-5.3-5.5-5.3-1.4 0-2.6.5-3.5 1.4%27/%3E%3C/svg%3E"); }
.y-i--route { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%276%27 cy=%2718%27 r=%272%27/%3E%3Cpath d=%27M8 18h7.5a3 3 0 0 0 0-6h-7a3 3 0 0 1 0-6H14%27/%3E%3Cpath d=%27M18 9.5c-1.6-1.7-2.4-3-2.4-4a2.4 2.4 0 0 1 4.8 0c0 1-.8 2.3-2.4 4z%27/%3E%3C/svg%3E"); }
.y-i--clock { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%278.5%27/%3E%3Cpath d=%27M12 7v5l3.2 2%27/%3E%3C/svg%3E"); }
.y-i--towel { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 7.5a3.5 3.5 0 0 1 7 0V20H4z%27/%3E%3Cpath d=%27M11 7.5h6.5a2.5 2.5 0 0 1 2.5 2.5v10h-9%27/%3E%3C/svg%3E"); }
.y-i--waves { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 9c3 0 3-2 6-2s3 2 6 2 3-2 6-2M3 15c3 0 3-2 6-2s3 2 6 2 3-2 6-2%27/%3E%3C/svg%3E"); }
.y-i--cutlery { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 3v6a2 2 0 0 0 2 2v10M11 3v6a2 2 0 0 1-2 2M9 3v5%27/%3E%3Cpath d=%27M17 21V3c-2 1.5-3 4-3 7.5h3%27/%3E%3C/svg%3E"); }
.y-i--gauge { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 17a8 8 0 1 1 16 0%27/%3E%3Cpath d=%27M12 17l4.2-5%27/%3E%3Ccircle cx=%2712%27 cy=%2717%27 r=%271.3%27/%3E%3Cpath d=%27M6.4 11.4l1.2.8M12 7v1.4M17.6 11.4l-1.2.8%27/%3E%3C/svg%3E"); }
.y-i--anchor { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%275%27 r=%271.8%27/%3E%3Cpath d=%27M12 6.8V20M8.5 10h7M5 13.5c.4 3.9 3.3 6.5 7 6.5s6.6-2.6 7-6.5M3.3 15.2 5 13.5l1.7 1.7M17.3 15.2l1.7-1.7 1.7 1.7%27/%3E%3C/svg%3E"); }
.y-i--tag { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3.5 12.5v-8a1 1 0 0 1 1-1h8l8 8-9 9z%27/%3E%3Ccircle cx=%278%27 cy=%278%27 r=%271.4%27/%3E%3C/svg%3E"); }
.y-i--person { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%277.5%27 r=%273.6%27/%3E%3Cpath d=%27M4.5 20.5c.9-4.3 3.8-6.7 7.5-6.7s6.6 2.4 7.5 6.7%27/%3E%3C/svg%3E"); }
.y-i--design { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%275%27 r=%271.8%27/%3E%3Cpath d=%27M11 6.6L6 20.5M13 6.6l5 13.9M7.6 16h8.8%27/%3E%3C/svg%3E"); }
.y-i--diamond { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3.5l7.5 8.5-7.5 8.5L4.5 12z%27/%3E%3Cpath d=%27M4.5 12h15%27/%3E%3C/svg%3E"); }
.y-i--engine { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%275%27 y=%278%27 width=%2712%27 height=%279%27 rx=%271%27/%3E%3Cpath d=%27M8 8V5.5h6V8M17 11h2.5v3H17M5 12.5H2.5M9 17v2.5h4V17%27/%3E%3C/svg%3E"); }
.y-i--layers { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 3.5l8.5 4.5-8.5 4.5L3.5 8z%27/%3E%3Cpath d=%27M3.5 12l8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5%27/%3E%3C/svg%3E"); }
.y-i--steering { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%278.5%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%272.2%27/%3E%3Cpath d=%27M3.8 10.5l6 1M14.2 11.5l6-1M12 14.2v6.3%27/%3E%3C/svg%3E"); }
.y-i--award { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%279%27 r=%275.5%27/%3E%3Cpath d=%27M8.7 13.4L7.5 21l4.5-2.5 4.5 2.5-1.2-7.6%27/%3E%3C/svg%3E"); }
.y-i--drop { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 21c-4-4.4-6-7.6-6-10.2a6 6 0 0 1 12 0c0 2.6-2 5.8-6 10.2z%27/%3E%3Ccircle cx=%2712%27 cy=%2710.5%27 r=%272.2%27/%3E%3C/svg%3E"); }
.y-i--length { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 12h18M3 12l3-3M3 12l3 3M21 12l-3-3M21 12l-3 3%27/%3E%3C/svg%3E"); }
.y-i--dial { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%278.5%27/%3E%3Cpath d=%27M12 12l4.5-3.5%27/%3E%3Cpath d=%27M5.5 15.5h2M16.5 15.5h2M12 5v1.5%27/%3E%3C/svg%3E"); }

/* Key facts: a word instead of a number — <p class="y-facts__value y-facts__text"> (e.g. "Porsche Design", "Returning soon") */
.y-sec p.y-facts__value.y-facts__text { font-size: clamp(22px, 1.8vw, 27px); white-space: normal; line-height: 1.2; }

/* Two price columns instead of three — Row "aino-grid y-prices y-prices--two" */
.y-prices.y-prices--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .y-prices.y-prices--two { grid-template-columns: 1fr; } }

/* Status badge on the rate card (Donzi) — <p class="y-rate__status"> */
.y-sec p.y-rate__status { display: inline-block; margin: 0 0 18px; font-size: 11px; font-weight: 500; line-height: 1.75; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); padding: 6px 12px; border: 1px solid var(--line-strong); }

/* Intro paragraph under a section title, and the foot line with links — <p class="y-lead y-intro">, <div class="y-foot"> */
.y-sec p.y-intro { max-width: 62ch; }
.y-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px 40px; margin-top: clamp(40px, 5vw, 56px); }
.y-sec .y-foot p { margin: 0; font-size: 14px; color: var(--muted); }

/* Columns with a hairline on top — Row "aino-grid y-cols" (3 columns) or "aino-grid y-cols y-cols--two";
   "y-cols--places": each column is a label + <ul> of places with a small photo (<img class="y-place__img"> + <span class="y-place__txt">) */
.y-cols { grid-template-columns: repeat(3, 1fr); column-gap: var(--y-gap); row-gap: 40px; margin-top: clamp(40px, 5vw, 64px); }
.y-cols.y-cols--two { grid-template-columns: repeat(2, 1fr); }
.y-cols > .col > .col-inner { padding-top: 26px; border-top: 1px solid var(--ink); }
.y-cols .y-label { margin-bottom: 14px !important; }
.y-cols h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2vw, 30px); line-height: 1.2; margin: 0 0 12px; color: var(--ink); }
.y-cols p:not(.y-label) { font-size: 15.5px; max-width: 42ch; }
.col-inner .y-cols__list, .y-cols .col-inner ul { margin: 0; padding: 0; list-style: none; }
.y-cols .col-inner ul li { margin: 0; list-style: none; font-family: var(--serif); font-size: clamp(21px, 1.6vw, 24px); line-height: 1.3; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--line); }
.y-cols--places .col-inner ul li { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; padding: 12px 0; }
.y-cols--places img.y-place__img { display: block; width: 84px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; background: var(--bg-deep); }
.y-place__txt { display: block; min-width: 0; }
.y-place__txt span { display: block; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--muted); margin-top: 2px; }
@media (max-width: 900px) { .y-cols, .y-cols.y-cols--two { grid-template-columns: 1fr; } }

/* Film band photo per yacht — Section "y-film y-film--manhattan73" (bg photo + focal point set here) */
.y-film--manhattan73 .section-bg img { object-position: 50% 78%; }
@media (max-width: 760px) { .y-film--manhattan73 .section-bg img { object-position: 66% 50%; } }

/* Vertical reel (Manhattan reels are 9:16) — add "aino-film--reel" to the film Button */
.aino-modal.is-reel video { width: auto; height: min(calc(100vh - 128px), 1024px); max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain; }

/* Hero variants — on the Banner "y-hero":
   "y-hero--right": photo anchored right (Axopar; Banner focal point 100/50; on tablets enlarged and anchored to the bottom)
   "y-hero--shade-top": deeper shade at the top so the white logo and menu stay on calm ground (Donzi)
   "y-hero--band" + one per-boat class: on phones the landscape photo fills the upper ~58% and fades into the Banner
   background colour (set the Banner bg colour to the tone: Manhattan #18293f, Axopar #05284a, Donzi #151515) */
@media (min-width: 761px) and (max-width: 1100px) {
  .y-hero--right .banner-bg img { top: auto; bottom: 0; height: 150%; object-position: 100% 50% !important; }
}
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
  .y-hero--right .banner-bg img { height: 135%; }
}
.y-hero.y-hero--shade-top .banner-layers::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .34) 16%, rgba(0, 0, 0, .08) 34%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .6) 100%);
}
@media (max-width: 760px) {
  .y-hero.y-hero--shade-top .banner-layers::before { background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .2) 20%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55) 64%, rgba(0, 0, 0, .82) 100%); }
  .y-hero.y-hero--band .y-hero__phone {
    top: 0; bottom: auto; height: var(--hero-img-h, 58%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
  }
  .y-hero.y-hero--band .y-hero__phone img { object-position: var(--hero-pos, 50% 50%); }
  .y-hero.y-hero--band .banner-layers::before { background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .28) 62%, rgba(0, 0, 0, .3) 100%); }
  .y-hero.y-hero--band .y-hero__title { text-shadow: none; }
  .y-hero--manhattan73 { --hero-pos: 62% 50%; }
  .y-hero--axopar37 { --hero-pos: 92% 50%; }
  .y-hero--donzi28 { --hero-pos: 60% 40%; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .y-hero.y-hero--band .y-hero__phone { height: var(--hero-img-h, 52%); }
}

/* =========================================================
   FLEET + DESTINATIONS PAGES — ported from website/assets/css/fleet.css (fl-) and destinations.css (ds-).
   These pages use the homepage grid (rows max 1440px, gutter 20–96px) and the homepage text classes
   (aino-eyebrow, aino-display, aino-h2, aino-lead, aino-link, aino-btn).
   ========================================================= */
/* Line icons for the fleet and destination pages: doc, waters (stroke 1.1); needle, harbour, beach, swim, cove, village, dining, hotel, cloche, casino, car (stroke 1.2, as in destinations.css) */
.y-i--doc { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%274%27 y=%273.5%27 width=%2716%27 height=%2717%27 rx=%271%27/%3E%3Cpath d=%27M8 8.5h8M8 12h8M8 15.5h5%27/%3E%3C/svg%3E"); }
.y-i--waters { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpath d=%27M15.5 8.5l-2 5-5 2 2-5z%27/%3E%3C/svg%3E"); }
.y-i--needle { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279%27/%3E%3Cpath d=%27M16.2 7.8l-2.7 5.7-5.7 2.7 2.7-5.7z%27/%3E%3C/svg%3E"); }
.y-i--harbour { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%274.8%27 r=%271.8%27/%3E%3Cpath d=%27M12 6.6v14M8.5 10h7M4.5 13.5c.4 4.1 3.5 7 7.5 7s7.1-2.9 7.5-7M2.8 15.2l1.7-1.7 1.7 1.7M17.8 15.2l1.7-1.7 1.7 1.7%27/%3E%3C/svg%3E"); }
.y-i--beach { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3.5 11a8.5 8.5 0 0 1 17 0z%27/%3E%3Cpath d=%27M12 2.5c-2 2.3-3 5.1-3 8.5M12 2.5c2 2.3 3 5.1 3 8.5M12 11v9.5M5 20.5h14%27/%3E%3C/svg%3E"); }
.y-i--swim { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 7.5c1.5 0 1.5-1.2 3-1.2s1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2M3 12.5c1.5 0 1.5-1.2 3-1.2s1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2M3 17.5c1.5 0 1.5-1.2 3-1.2s1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2%27/%3E%3C/svg%3E"); }
.y-i--cove { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 20h19M4 20v-8.5a8 7.5 0 0 1 16 0V20%27/%3E%3Cpath d=%27M9 20v-4a3 3 0 0 1 6 0v4%27/%3E%3C/svg%3E"); }
.y-i--village { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 20.5V11l5-4 5 4v9.5M14 20.5V6.5l3-3 3 3v14M2.5 20.5h19M7.5 20.5v-4h3v4M17 9.5v.5%27/%3E%3C/svg%3E"); }
.y-i--dining { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 3v6.5a2 2 0 0 0 4 0V3M9 11.5V21M16.5 21V3c-2 1.5-3 4-3 7.5V13h3%27/%3E%3C/svg%3E"); }
.y-i--hotel { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 5.5v14M21 19.5V15H3M10.5 15v-4.5h7.5a3 3 0 0 1 3 3V15%27/%3E%3Ccircle cx=%276.8%27 cy=%2712.3%27 r=%271.8%27/%3E%3C/svg%3E"); }
.y-i--cloche { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 17.5h19M4.5 17.5a7.5 7.5 0 0 1 15 0M12 10V8M10.5 8h3M4 20.5h16%27/%3E%3C/svg%3E"); }
.y-i--casino { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%275.5%27 y=%273%27 width=%2713%27 height=%2718%27 rx=%271%27/%3E%3Cpath d=%27M12 8l3 4-3 4-3-4z%27/%3E%3C/svg%3E"); }
.y-i--car { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5.3 16.5H2.5v-4L4.8 8h14.4l2.3 4.5v4h-2.8M8.7 16.5h6.6M2.5 12.5h19%27/%3E%3Ccircle cx=%277%27 cy=%2716.8%27 r=%271.7%27/%3E%3Ccircle cx=%2717%27 cy=%2716.8%27 r=%271.7%27/%3E%3C/svg%3E"); }
:root { --fl-gap: clamp(20px, 2.6vw, 40px); }
.aino-twelve { grid-template-columns: repeat(12, 1fr); column-gap: var(--fl-gap); }

/* ---------- Page head (fleet + destinations overview) — Section "fl-head" (padding set here: top clamp(48–96px), bottom 0)
   > Row "aino-grid aino-twelve fl-head__grid": column "fl-head__titlecol" (eyebrow + <h1 class="aino-display fl-head__title">)
   + column "fl-head__lead" (lead text, bottom aligned) ---------- */
.section.fl-head { padding: clamp(48px, 6vw, 96px) 0 0 !important; }
.fl-head .col { padding-bottom: 0; }
.fl-head__grid { align-items: end; }
.fl-head__grid > .fl-head__titlecol { grid-column: 1 / 8; }
.fl-head__grid > .fl-head__lead { grid-column: 8 / 13; }
.fl-head__lead .col-inner { padding-left: clamp(0px, 3vw, 56px); }
.fl-head__lead p { margin: 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; color: var(--text); }
.aino-display.fl-head__title { font-size: clamp(46px, 5.6vw, 86px); line-height: 1.04; max-width: 13ch; }
.aino-display.fl-head__title--wide { max-width: 16ch; }

/* ---------- Fleet: filter bar — HTML element "fl-bar" (three buttons data-filter="all|riviera|malta" + count). aino.js filters the
   rows by their classes "fl-base-riviera" / "fl-base-malta" and reads ?base= from the address. ---------- */
.fl-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 40px;
  margin-top: clamp(40px, 4.5vw, 64px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.fl-filter { display: flex; gap: 0 clamp(24px, 3vw, 44px); }
.fl-filter button {
  position: relative; margin: 0; padding: 22px 0; min-height: 0; background: none; border: 0; white-space: nowrap; line-height: 1.7;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
  transition: color .3s var(--ease);
}
.fl-filter button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.fl-filter button:hover, .fl-filter button[aria-pressed="true"] { color: var(--ink); background: none; }
.fl-filter button[aria-pressed="true"]::after { transform: scaleX(1); }
.fl-count { margin: 0 !important; font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* ---------- Fleet: boat rows — Section "fl-list" > one Row "aino-grid aino-twelve fl-yacht fl-base-…" per boat:
   column "fl-yacht__media" (optional Text <span class="fl-tag">, Image with link) + column "fl-yacht__body" with an inner Row
   "fl-yacht__inner": column "fl-yacht__intro" (eyebrow, name, tagline, text) and column "fl-yacht__detail"
   (<ul class="fl-facts"> items "y-i y-i--NAME" with <b> + <span>, price, Button "aino-btn aino-btn--ghost", <p class="fl-enquire"> link).
   The image sits left on odd rows, right on even rows (aino.js recomputes this when the list is filtered). ---------- */
.section.fl-list { padding: clamp(56px, 6vw, 96px) 0 var(--section) !important; }
.fl-yacht { align-items: center; }
.row.fl-yacht + .row.fl-yacht { margin-top: clamp(96px, 10vw, 168px); }
.row.fl-yacht[hidden] { display: none; }
.fl-yacht.is-entering { animation: fl-in .7s var(--ease) both; }
@keyframes fl-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fl-yacht > .fl-yacht__media { grid-column: 1 / 8; grid-row: 1; }
.fl-yacht > .fl-yacht__body { grid-column: 8 / 13; grid-row: 1; }
.fl-yacht__body > .col-inner { padding-left: clamp(0px, 3vw, 56px); }
.fl-yacht--reverse > .fl-yacht__media { grid-column: 6 / 13; }
.fl-yacht--reverse > .fl-yacht__body { grid-column: 1 / 6; }
.fl-yacht--reverse > .fl-yacht__body > .col-inner { padding-left: 0; padding-right: clamp(0px, 3vw, 56px); }
.fl-yacht__media > .col-inner { position: relative; }
.fl-yacht__media .img, .fl-yacht__media .img-inner { width: 100% !important; margin: 0; }
.fl-yacht__media .img-inner { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-deep); }
.fl-yacht__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.fl-yacht__media:hover img { transform: scale(1.04); }
.fl-yacht__media img[src*="ocean90-underway"] { object-position: 42% 50%; }
.fl-yacht__media img[src*="manhattan73-hero"] { object-position: 64% 50%; }
.fl-yacht__media img[src*="axopar37-hero"] { object-position: 40% 50%; }
.fl-yacht__media img[src*="donzi28-hero"] { object-position: 92% 50%; }
.fl-tag, .ds-tag {
  position: absolute; top: 20px; left: 20px; z-index: 2; margin: 0 !important;
  background: var(--bg); color: var(--ink);
  font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; padding: 8px 12px;
}
.fl-yacht__media .col-inner > p:first-child { margin: 0; }
.row.fl-yacht__inner { display: block; margin: 0 !important; max-width: none; width: auto; }
.row.fl-yacht__inner::before, .row.fl-yacht__inner::after { display: none; }
.fl-yacht__inner > .col { max-width: none; flex-basis: auto; width: auto; padding: 0; }
.fl-yacht__intro .aino-eyebrow { margin-bottom: 18px; }
.aino-display.fl-yacht__name { font-size: clamp(36px, 3.5vw, 54px); line-height: 1.06; }
.fl-yacht__name a { color: inherit; }
p.fl-yacht__tagline { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; color: var(--muted); }
p.fl-yacht__text { margin: 24px 0 0; font-size: 16px; line-height: 1.7; color: var(--text); max-width: 48ch; }
.col-inner ul.fl-facts {
  list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.col-inner ul.fl-facts li { margin: 0; padding: 18px 12px 18px 18px; border-left: 1px solid var(--line); min-width: 0; list-style: none; line-height: 1.7; }
.col-inner ul.fl-facts li:first-child { padding-left: 0; border-left: 0; }
.fl-facts li::before { margin: 0 0 12px; }
.fl-facts b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.2; color: var(--ink); }
.fl-facts span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); }
p.fl-price { margin: 24px 0 0; font-family: var(--serif); font-size: clamp(26px, 2.2vw, 32px); line-height: 1.2; color: var(--ink); }
.fl-price span { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.fl-price i { font-style: normal; color: var(--faint); margin: 0 14px; }
p.fl-price--soon { font-style: italic; }
.fl-price--soon span { font-style: normal; }
p.fl-price__note { margin: 8px 0 0; max-width: 40ch; font-size: 13px; line-height: 1.5; color: var(--muted); }
.fl-yacht__detail .button.aino-btn { margin: 28px 31px 0 0; }
.fl-yacht__detail p.fl-enquire { display: inline-block; margin: 28px 0 0; vertical-align: middle; }
.fl-yacht__detail .col-inner > p:last-child { margin-bottom: 0; }

/* ---------- Fleet: compare — Section "aino-section aino-paper" (Scroll To "compare") > Row "aino-section-head fl-compare-head"
   > Text with <div class="fl-compare-frame"><div class="fl-compare-wrap"><table class="fl-compare">…</table></div></div>.
   ≤860px: aino.js builds a boat switcher (tabs) from the same table and hides the table. ---------- */
.fl-compare-head .aino-lead { margin: 0; max-width: 440px; }
.fl-compare-frame, .fl-compare-wrap { position: relative; }
table.fl-compare { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; line-height: 1.55; border: 0; }
.fl-compare__corner { width: 17%; }
.fl-compare th, .fl-compare td { text-align: left; vertical-align: top; font-weight: 400; border: 0; }
.fl-compare thead th, .fl-compare thead td { padding: 0 clamp(14px, 1.6vw, 24px) 28px 0; border: 0; }
.fl-compare thead a { display: block; color: inherit; }
.fl-compare__thumb { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: var(--bg-deep); margin-bottom: 18px; }
.fl-compare__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.fl-compare thead a:hover img { transform: scale(1.05); }
.fl-compare thead th:nth-child(2) img { object-position: 66% 60%; }
.fl-compare thead th:nth-child(3) img { object-position: 55% 62%; }
.fl-compare thead th:nth-child(4) img { object-position: 50% 62%; }
.fl-compare thead th:nth-child(5) img { object-position: 38% 70%; }
.fl-compare__name { display: block; font-family: var(--serif); font-size: clamp(21px, 1.7vw, 25px); line-height: 1.2; color: var(--ink); text-transform: none; letter-spacing: 0; }
.fl-compare tbody th, .fl-compare tbody td { padding: 18px clamp(14px, 1.6vw, 24px) 18px 0; border-top: 1px solid var(--line); border-bottom: 0; }
.fl-compare tbody tr:first-child > * { border-top-color: var(--line-strong); }
.fl-compare tbody th { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); line-height: 1.6; padding-top: 21px; }
.fl-compare td { color: var(--text); }
.fl-compare td small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.fl-compare td.is-muted { color: var(--muted); }
.fl-compare__rate td { font-family: var(--serif); font-size: clamp(20px, 1.6vw, 23px); line-height: 1.35; color: var(--ink); }
.fl-compare__rate td span { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.fl-compare__rate td small { font-family: var(--sans); margin-top: 6px; }
.fl-compare__rate td.is-soon { font-style: italic; }
.fl-compare__rate td.is-soon small { font-style: normal; }
.fl-compare__actions th, .fl-compare__actions td { padding-top: 26px; border-top: 1px solid var(--line-strong) !important; }
.fl-compare__actions .aino-link { white-space: nowrap; }
.fl-compare__corner { vertical-align: bottom; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fl-mcmp { display: none; }

/* ---------- Fleet: what's included — Row "aino-grid fl-included" (4 columns: <h3 class="y-i y-i--NAME"> + <p>) ---------- */
.fl-included { grid-template-columns: repeat(4, 1fr); gap: var(--fl-gap); }
.fl-included > .col > .col-inner { padding-top: 28px; border-top: 1px solid var(--ink); }
.fl-included h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 1.9vw, 28px); line-height: 1.2; color: var(--ink); }
.fl-included h3.y-i::before { width: 26px; height: 26px; margin-bottom: 22px; }
.fl-included p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 34ch; }

/* ---------- Centred CTA (fleet, destinations, regions) — Section "aino-section aino-deep" > Row "fl-cta" (centred column) ---------- */
.aino-section .section-content > .row.fl-cta { max-width: calc(860px + 2 * var(--gutter)); }
.fl-cta .aino-display { margin-inline: auto; }
.fl-cta p.aino-lead { margin: 24px auto 0; color: var(--text); }
.fl-cta .button.aino-btn { min-width: 240px; margin: 44px 6px 0; }
.aino-deep .aino-eyebrow { color: var(--text); }

/* ---------- Destinations overview: regions — Section "ds-regions" (hairline on top) > Row "aino-grid aino-twelve ds-region"
   (+ "ds-region--reverse"): column "ds-region__media" (Image with link) + column "ds-region__body"
   (<p class="aino-eyebrow ds-coords y-i y-i--needle"> coordinates, name, tagline, text, places, Button ghost) ---------- */
.section.ds-regions { padding: clamp(64px, 7vw, 112px) 0 var(--section) !important; }
.ds-regions .section-content::before {
  content: ""; display: block; width: min(calc(100% - 2 * var(--gutter)), calc(var(--max) - 2 * var(--gutter)));
  margin: 0 auto clamp(64px, 7vw, 112px); border-top: 1px solid var(--line);
}
.ds-region { align-items: center; }
.row.ds-region + .row.ds-region { margin-top: clamp(96px, 10vw, 168px); }
.ds-region > .ds-region__media { grid-column: 1 / 8; grid-row: 1; }
.ds-region > .ds-region__body { grid-column: 8 / 13; grid-row: 1; }
.ds-region__body > .col-inner { padding-left: clamp(0px, 3vw, 56px); }
.ds-region--reverse > .ds-region__media { grid-column: 6 / 13; }
.ds-region--reverse > .ds-region__body { grid-column: 1 / 6; }
.ds-region--reverse > .ds-region__body > .col-inner { padding-left: 0; padding-right: clamp(0px, 3vw, 56px); }
.ds-region__media .img, .ds-region__media .img-inner { width: 100% !important; margin: 0; }
.ds-region__media .img-inner { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-deep); }
.ds-region__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.ds-region__media:hover img { transform: scale(1.04); }
.ds-region__media img[src*="aerial-wake"] { object-position: 30% 50%; }
.ds-region__media img[src*="manhattan73-cliffs"] { object-position: 50% 88%; }
.aino-eyebrow.ds-coords { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ds-coords.y-i::before { width: 17px; height: 17px; margin-top: -1px; }
.aino-display.ds-region__name { font-size: clamp(38px, 3.7vw, 56px); line-height: 1.06; }
.ds-region__name a { color: inherit; }
p.ds-region__tagline { margin: 12px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3; color: var(--muted); }
p.ds-region__text { margin: 24px 0 0; font-size: 16px; line-height: 1.7; color: var(--text); max-width: 46ch; }
p.ds-region__places {
  margin: 28px 0 36px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); line-height: 2;
}
.ds-region__body .button.aino-btn { margin: 0; }

/* ---------- Destinations overview: the wider Mediterranean — Row "aino-grid aino-twelve ds-wider":
   column (eyebrow + H2) + column "ds-wider__body" (lead, <ul class="ds-notes"> items "y-i y-i--NAME" with <p><b>…</b>…</p>, link) ---------- */
.ds-wider { align-items: start; }
.ds-wider > .col:first-child { grid-column: 1 / 7; }
.ds-wider .aino-h2 { max-width: 12ch; }
.ds-wider > .ds-wider__body { grid-column: 8 / 13; }
.ds-wider__body > .col-inner { padding-left: clamp(0px, 3vw, 56px); }
p.ds-wider__lead { margin: 0; font-size: clamp(17px, 1.3vw, 19px); color: var(--text); }
.col-inner ul.ds-notes { list-style: none; margin: 36px 0 40px; padding: 0; border-top: 1px solid var(--line-strong); }
.col-inner ul.ds-notes li { display: flex; gap: 20px; align-items: flex-start; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--line); list-style: none; }
.ds-notes li::before { width: 26px; height: 26px; margin-top: 2px; }
.ds-notes p { margin: 0 !important; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ds-notes b { display: block; margin-bottom: 2px; font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.7vw, 24px); line-height: 1.25; color: var(--ink); }

/* ---------- Region pages: hero — Banner "y-hero ds-hero" (+ "ds-hero--malta"): same mechanics as the yacht hero (Image "y-hero__phone"
   for phones, Text box "y-hero__content"), aligned to the homepage grid; eyebrow links back to Destinations;
   the lead <p class="ds-hero__lead ds-hide-phone"> moves below the banner on phones (Section "ds-intro ds-show-phone") ---------- */
.ds-hero .banner-bg img { top: auto; bottom: 0; height: 125%; }
.ds-hero.y-hero .banner-layers::before {
  background: linear-gradient(to top, rgba(var(--shade), .66) 0%, rgba(var(--shade), .34) 34%, rgba(var(--shade), 0) 62%, rgba(var(--shade), .26) 100%);
}
.ds-hero .text-box.y-hero__content {
  left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) !important;
  right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}
.ds-hero .aino-eyebrow { margin-bottom: 20px; color: rgba(255, 255, 255, .85); }
.ds-hero .aino-eyebrow a { color: inherit; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .45); transition: border-color .4s var(--ease); }
.ds-hero .aino-eyebrow a:hover { border-color: #fff; }
p.ds-hero__lead { margin: 28px 0 0; max-width: 580px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 18px rgba(0, 0, 0, .3); }
.ds-show-phone { display: none !important; }
.section.ds-intro { padding: 40px 0 0 !important; }
.ds-intro .col { padding-bottom: 0; }
.ds-intro p.aino-lead { margin: 0; color: var(--text); }

/* ---------- Region pages: boats based here — Section "aino-section ds-yachts-section" > Row "aino-grid ds-yachts ds-yachts--2|--3":
   column "ds-yachts__intro" + one column per boat with an Image Box "ds-yacht" (image height 75% = 4:3;
   Text: <span class="ds-tag">, meta, name, <p class="ds-yacht__facts"> two spans, link) ---------- */
.section.ds-yachts-section { padding-top: clamp(72px, 8vw, 128px) !important; }
.ds-yachts { grid-template-columns: repeat(3, 1fr); column-gap: var(--fl-gap); row-gap: 48px; align-items: start; }
.ds-yachts.ds-yachts--3 { grid-template-columns: repeat(4, 1fr); }
.ds-yachts__intro > .col-inner { padding-right: clamp(0px, 2vw, 32px); }
.ds-yachts__intro .aino-eyebrow { margin-bottom: 18px; }
.aino-display.ds-yachts__title { font-size: clamp(34px, 3vw, 46px); line-height: 1.08; }
.ds-yachts__intro p:not(.aino-eyebrow):not(:last-child) { margin: 20px 0 28px; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 30ch; }
.ds-yacht.box { position: relative; }
.ds-yacht .box-image { background: var(--bg-deep); overflow: hidden; margin-bottom: 22px; }
.ds-yacht .box-image img { transition: transform 1.2s var(--ease); }
.ds-yacht:hover .box-image img { transform: scale(1.05); }
.ds-yacht .box-image img[src*="donzi28"] { object-position: 62% 50%; }
.ds-yacht .box-text { position: static; padding: 0; font-size: 1em; }
.ds-yacht .box-text p { margin: 0; }
.ds-tag { top: 16px; left: 16px; }
.ds-yacht p.ds-yacht__meta { margin: 0 0 8px; font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.ds-yacht .box-text h3.ds-yacht__name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2vw, 29px); line-height: 1.15; color: var(--ink); }
.ds-yacht__name a { color: inherit; }
.ds-yacht__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ds-yacht p.ds-yacht__facts {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap;
  margin: 16px 0 22px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.7; color: var(--text);
}
.ds-yacht__facts > span:last-child { font-family: var(--serif); font-size: 20px; line-height: 1.2; color: var(--ink); }
.ds-yacht__facts small { font-family: var(--sans); font-size: 13px; color: var(--muted); }
.ds-yacht__facts .is-soon { font-style: italic; }
.ds-yacht .aino-link { position: relative; z-index: 2; }

/* ---------- Region pages: where we go — Section "aino-section aino-paper" > Row "aino-section-head" > Text <ul class="ds-legend">
   (items "y-i y-i--harbour|beach|swim|cove|village|dining") > Row "aino-grid ds-index" (2 columns of
   <div class="ds-group"><h3 class="ds-group__title">…<span>7 places</span></h3><ul class="ds-places"><li class="ds-place has-img">
   <img class="ds-place__img"> <h4 class="ds-place__name"> <span class="ds-place__area y-i y-i--KIND"> <p class="ds-place__why">) ---------- */
.col-inner ul.ds-legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px 32px;
  margin: calc(-1 * clamp(16px, 2vw, 32px)) 0 clamp(40px, 4vw, 56px); padding: 0;
  font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.col-inner ul.ds-legend li { display: inline-flex; align-items: center; gap: 10px; margin: 0; list-style: none; }
.ds-legend li::before { width: 20px; height: 20px; }
@media (min-width: 1101px) {
  .col-inner ul.ds-legend { flex-wrap: nowrap; gap: 0 40px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .ds-legend li::before { width: 18px; height: 18px; }
}
.ds-legend-row .col { padding-bottom: 0; }
.ds-index { grid-template-columns: 1fr 1fr; gap: 64px clamp(40px, 6vw, 112px); align-items: start; }
.ds-group + .ds-group { margin-top: clamp(40px, 3.4vw, 52px); }
.ds-group h3.ds-group__title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin: 0; padding-bottom: 18px; border-bottom: 1px solid var(--ink);
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); line-height: 1.5;
}
.ds-group__title span { flex: none; color: var(--muted); letter-spacing: .2em; font-size: 11px; }
.col-inner ul.ds-places { list-style: none; margin: 0; padding: 0; }
.col-inner ul.ds-places li.ds-place {
  display: grid; grid-template-columns: 136px 1fr; grid-template-rows: auto auto 1fr; column-gap: 28px; align-items: start;
  margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line); list-style: none;
}
.ds-place img.ds-place__img { grid-row: 1 / span 3; grid-column: 1; width: 136px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin: 0; background: var(--bg-deep); }
.ds-place h4.ds-place__name { grid-column: 2; margin: -4px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 1.8vw, 27px); line-height: 1.2; color: var(--ink); }
.ds-place .ds-place__area {
  grid-column: 2; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 10.5px; font-weight: 500; line-height: 1.7; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.ds-place__area.y-i::before { width: 16px; height: 16px; }
.ds-place p.ds-place__why { grid-column: 2; margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.ds-place__img[src*="cap-dail"] { object-position: 50% 70%; }
.ds-place__img[src*="cap-ferrat"] { object-position: 50% 45%; }
.ds-place__img[src*="esterel"] { object-position: 50% 40%; }
.ds-place__img[src*="anchor-bay"] { object-position: 50% 42%; }
.ds-place__img[src*="paloma-beach"] { object-position: 40% 70%; }
.ds-place__img[src*="larvotto"] { object-position: 30% 60%; }
/* photo credit line for the CC BY-SA placeholder photos (Wikimedia Commons) */
p.ds-credits { margin: 40px 0 0 !important; font-size: 12px; line-height: 1.6; color: var(--muted); }
p.ds-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Region pages: feature row (season highlights / guest privileges) — Row "aino-grid aino-twelve ds-feature"
   (+ "ds-feature--top"): column "ds-feature__media" (Image, 4:5 portrait) + column "ds-feature__body"
   (eyebrow, H2, lead, <ul class="ds-events"> or <ul class="ds-perks"> items "y-i y-i--NAME", link) ---------- */
.ds-feature { align-items: center; }
.ds-feature.ds-feature--top { align-items: start; }
.ds-feature > .ds-feature__media { grid-column: 1 / 6; }
.ds-feature > .ds-feature__body { grid-column: 7 / 13; }
.ds-feature__media .img, .ds-feature__media .img-inner { width: 100% !important; margin: 0; }
.ds-feature__media .img-inner { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-deep); }
.ds-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.ds-feature__media img[src*="guests-cliffs"] { object-position: 30% 50%; }
.ds-feature__body .aino-h2 { max-width: 18ch; }
p.ds-feature__lead { margin: 24px 0 0; font-size: clamp(17px, 1.3vw, 19px); color: var(--text); max-width: 52ch; }
.col-inner ul.ds-events { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.col-inner ul.ds-events li {
  display: grid; grid-template-columns: 64px 1fr auto; column-gap: 24px; align-items: center;
  margin: 0; padding: 22px 0; border-bottom: 1px solid var(--line); list-style: none;
}
.ds-events__month { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1; color: var(--muted); }
.ds-events h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2; color: var(--ink); }
.ds-events div span { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ds-events .aino-link { white-space: nowrap; font-size: 11px; letter-spacing: .22em; }
.col-inner ul.ds-perks { list-style: none; margin: 36px 0 40px; padding: 0; border-top: 1px solid var(--line-strong); }
.col-inner ul.ds-perks li { display: flex; align-items: center; gap: 18px; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); list-style: none; font-family: var(--serif); font-size: clamp(21px, 1.7vw, 24px); line-height: 1.3; color: var(--ink); }
.ds-perks li::before { width: 24px; height: 24px; }

/* ---------- Fleet + destinations: tablet ---------- */
@media (max-width: 1100px) {
  .fl-head__grid > .fl-head__titlecol, .fl-head__grid > .fl-head__lead { grid-column: 1 / 13; }
  .fl-head__lead .col-inner { padding-left: 0; margin-top: 28px; max-width: 640px; }
  .row.fl-yacht, .row.ds-region { display: block; }
  .fl-yacht__media .img-inner { aspect-ratio: 16 / 9; }
  .fl-yacht > .fl-yacht__media, .ds-region > .ds-region__media { margin-bottom: 40px; }
  .fl-yacht__body > .col-inner, .fl-yacht--reverse > .fl-yacht__body > .col-inner { padding: 0; }
  .row.fl-yacht__inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 64px); align-items: start; }
  .fl-yacht__detail .col-inner ul.fl-facts { margin-top: 6px; }
  .col-inner ul.fl-facts li { padding-left: 14px; }
  .fl-yacht__media img[src*="donzi28-hero"] { }
  .fl-included { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .ds-region__media .img-inner { aspect-ratio: 16 / 9; }
  .ds-region__body > .col-inner, .ds-region--reverse > .ds-region__body > .col-inner { padding: 0; max-width: 680px; }
  .row.ds-region + .row.ds-region { margin-top: 96px; }
  .ds-wider > .col:first-child, .ds-wider > .ds-wider__body { grid-column: 1 / 13; }
  .ds-wider__body > .col-inner { padding-left: 0; margin-top: 32px; max-width: 680px; }
  .ds-yachts, .ds-yachts.ds-yachts--3 { grid-template-columns: repeat(2, 1fr); }
  .ds-yachts.ds-yachts--3 { grid-template-columns: repeat(3, 1fr); }
  .ds-yachts > .ds-yachts__intro { grid-column: 1 / -1; }
  .ds-yachts__intro > .col-inner { padding-right: 0; max-width: 640px; }
  .ds-feature > .ds-feature__media { grid-column: 1 / 9; margin-bottom: 48px; }
  .ds-feature > .ds-feature__body { grid-column: 1 / 13; max-width: 760px; }
}
@media (max-width: 860px) {
  .row.fl-yacht__inner { display: block; }
  .fl-yacht__detail .col-inner ul.fl-facts { margin-top: 28px; }
  .fl-compare-frame.has-switcher { display: none; }
  .fl-mcmp { display: block; }
  .fl-mcmp__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 28px; }
  .fl-mcmp__tab { min-width: 0; margin: 0; padding: 12px 10px; min-height: 0; border: 1px solid var(--line-strong); background: none; color: var(--text); font: 500 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
  .fl-mcmp__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .fl-mcmp__photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-deep); margin-bottom: 18px; }
  .fl-mcmp__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .fl-mcmp__name { display: block; font-family: var(--serif); font-size: 30px; line-height: 1.15; color: var(--ink); margin-bottom: 18px; }
  .fl-mcmp__list { margin: 0; }
  .fl-mcmp__row { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
  .fl-mcmp__row dt { font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: 3px; line-height: 1.7; }
  .fl-mcmp__row dd { margin: 0; min-width: 0; color: var(--text); font-size: 15px; line-height: 1.55; }
  .fl-mcmp__row dd small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
  .fl-mcmp__row dd.is-muted { color: var(--muted); }
  .fl-mcmp__row--rate dd { font-family: var(--serif); font-size: 21px; line-height: 1.35; color: var(--ink); }
  .fl-mcmp__row--rate dd span { font-family: var(--sans); font-size: 13px; color: var(--muted); }
  .fl-mcmp__row--rate dd small { font-family: var(--sans); }
  .fl-mcmp__row--rate dd.is-soon { font-style: italic; }
  .fl-mcmp__row--rate dd.is-soon small { font-style: normal; }
  .fl-mcmp__act { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line-strong); }
  .ds-index { grid-template-columns: 1fr; }
  .ds-yachts.ds-yachts--3 { grid-template-columns: repeat(2, 1fr); }
  .ds-yachts--3 > .col:last-child { grid-column: 1 / -1; }
  .ds-yachts--3 > .col:last-child .box-image .image-cover { padding-top: 56.25% !important; }
}

/* ---------- Fleet + destinations: phone ---------- */
@media (max-width: 760px) {
  .aino-display.fl-head__title { font-size: clamp(42px, 11.5vw, 52px); }
  .aino-display.fl-head__title--wide { font-size: clamp(40px, 11vw, 50px); }
  .fl-head__lead .col-inner { margin-top: 24px; }
  .fl-bar { margin-top: 40px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .fl-filter { gap: 0 22px; overflow-x: auto; scrollbar-width: none; }
  .fl-filter::-webkit-scrollbar { display: none; }
  .fl-filter button { padding: 18px 0; font-size: 11px; letter-spacing: .2em; }
  .fl-count { display: none; }
  .section.fl-list { padding-top: 48px !important; }
  .row.fl-yacht + .row.fl-yacht { margin-top: 88px; }
  .fl-yacht__media .img-inner { aspect-ratio: 3 / 2; }
  .fl-yacht > .fl-yacht__media { margin-bottom: 28px; }
  .aino-display.fl-yacht__name { font-size: 38px; }
  .fl-tag { top: 14px; left: 14px; }
  .col-inner ul.fl-facts { grid-template-columns: 1fr; }
  .col-inner ul.fl-facts li, .col-inner ul.fl-facts li:first-child {
    display: grid; grid-template-columns: 22px auto 1fr; column-gap: 14px; align-items: center;
    padding: 14px 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .col-inner ul.fl-facts li:first-child { border-top: 0; }
  .fl-facts li::before { width: 20px; height: 20px; margin: 0; }
  .fl-facts b { font-size: 20px; white-space: nowrap; }
  .fl-facts span { margin: 0; font-size: 13px; text-align: right; }
  p.fl-price { font-size: 26px; }
  .fl-price i { margin: 0 10px; }
  .fl-yacht__detail .button.aino-btn { display: flex; width: 100%; margin: 28px 0 0; }
  .fl-yacht__detail p.fl-enquire { display: flex; margin-top: 22px; }
  .fl-compare-head .aino-lead { max-width: none; }
  .fl-included { grid-template-columns: 1fr; row-gap: 40px; }
  .fl-cta .button.aino-btn { display: flex; width: 100%; min-width: 0; margin: 16px 0 0; }
  .fl-cta .button.aino-btn:first-of-type { margin-top: 44px; }

  .section.ds-regions { padding-top: 48px !important; }
  .ds-regions .section-content::before { margin-bottom: 48px; }
  .ds-region__media .img-inner { aspect-ratio: 4 / 3; }
  .ds-region > .ds-region__media { margin-bottom: 28px; }
  .row.ds-region + .row.ds-region { margin-top: 80px; }
  .aino-display.ds-region__name { font-size: 38px; }
  .ds-region__body .button.aino-btn { display: flex; width: 100%; }

  .ds-show-phone { display: block !important; }
  .ds-hide-phone { display: none !important; }
  .banner.ds-hero { padding-top: max(520px, calc(100svh - 160px)) !important; }
  .ds-hero .text-box.y-hero__content { bottom: 36px; }
  .ds-hero.y-hero .banner-layers::before { background: linear-gradient(180deg, rgba(var(--shade), .38) 0%, rgba(var(--shade), 0) 20%, rgba(var(--shade), 0) 50%, rgba(var(--shade), .5) 74%, rgba(var(--shade), .75) 100%); }
  .ds-hero .aino-eyebrow { margin-bottom: 14px; }
  .ds-hero .y-hero__title { font-size: clamp(42px, 12vw, 52px) !important; }
  .ds-hero.y-hero .y-hero__phone { top: 0; height: 100%; }
  .ds-hero--malta .y-hero__phone img { object-position: 66% 50%; }
  .section.ds-yachts-section { padding-top: 64px !important; }
  .ds-yachts, .ds-yachts.ds-yachts--3 { grid-template-columns: 1fr; row-gap: 48px; }
  .ds-yachts--3 > .col:last-child { grid-column: auto; }
  .ds-yacht .box-image .image-cover, .ds-yachts--3 > .col:last-child .box-image .image-cover { padding-top: 66.67% !important; }
  .ds-index { row-gap: 56px; }
  .ds-group__title span { display: none; }
  .col-inner ul.ds-legend { gap: 10px 22px; margin-top: -8px; font-size: 10px; letter-spacing: .16em; }
  .ds-legend li::before { width: 18px; height: 18px; }
  .col-inner ul.ds-places li.ds-place { grid-template-columns: 96px 1fr; column-gap: 16px; padding: 18px 0; }
  .ds-place img.ds-place__img { width: 96px; }
  .ds-place h4.ds-place__name { margin-top: -3px; font-size: 23px; }
  .ds-place .ds-place__area { margin-top: 6px; font-size: 10px; letter-spacing: .16em; }
  .ds-place__area.y-i::before { width: 14px; height: 14px; }
  .ds-place p.ds-place__why { margin-top: 6px; font-size: 14.5px; }
  .ds-feature > .ds-feature__media { grid-column: 1 / 13; margin-bottom: 40px; }
  .col-inner ul.ds-events li { grid-template-columns: 52px 1fr; row-gap: 14px; padding: 20px 0; align-items: start; }
  .ds-events__month { font-size: 21px; padding-top: 3px; }
  .ds-events .aino-link { grid-column: 2; justify-self: start; }
  .ds-perks li::before { width: 22px; height: 22px; }
  .col-inner ul.ds-perks li { gap: 14px; }
}
.fl-compare tbody td { font-size: 15px; line-height: 1.55; }
.fl-compare tbody .fl-compare__rate td { font-size: clamp(20px, 1.6vw, 23px); line-height: 1.35; }
.fl-compare tbody .fl-compare__rate td span, .fl-compare tbody .fl-compare__rate td small { font-size: 13px; }
.fl-compare tbody td small { font-size: 13px; }

/* Current section in the main menu (Flatsome adds current-menu-item / current-menu-ancestor): a hairline under the label */
.header-nav-main > li.current-menu-item > a, .header-nav-main > li.current-menu-ancestor > a,
.header-nav-main > li.current-page-ancestor > a { opacity: 1; box-shadow: inset 0 -1px 0 currentColor; padding-bottom: 6px; }
/* WordPress adds a <br> after the photo in each place row (the editor's auto-paragraphs); the grid ignores it */
.ds-place > br, .y-cols--places li > br { display: none; }
.ds-place p.ds-place__area { margin-bottom: 0; }
.row.ds-legend-row { margin-bottom: clamp(40px, 4vw, 56px); }
.ds-yacht .box-text a.aino-link, .fl-yacht__detail a.aino-link { display: inline-flex; gap: 12px; }
/* events list: block-level parts (month, place, link) so the editor's auto-paragraphs leave the row intact */
.ds-events p.ds-events__month { margin: 0; }
.ds-events p.ds-events__place { display: block; margin: 4px 0 0; font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ds-events p.ds-events__link { margin: 0; }
.fl-cta p.aino-lead { margin-bottom: 0; }
/* Row "aino-section-head aino-section-head--flex": heading block and lead pushed apart as in the prototype region pages (flex, the lead shrinks first) */
@media (min-width: 761px) {
  .row.aino-section-head--flex { display: flex; flex-wrap: nowrap; justify-content: space-between; column-gap: 18px; }
  .row.aino-section-head--flex::before, .row.aino-section-head--flex::after { display: none; }
  .row.aino-section-head--flex > .col { flex: 0 1 auto; max-width: none; width: auto; }
  .row.aino-section-head--flex > .col + .col .aino-lead { max-width: 620px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .row.aino-section-head--flex > .col:first-child:not(:only-child) { flex: 1 1 55%; }
  .row.aino-section-head--flex > .col + .col { flex: 0 1 40%; }
}
@media (max-width: 760px) {
  .col-inner ul.ds-events li { grid-template-columns: 52px 1fr; }
  .ds-events p.ds-events__link { grid-column: 2; justify-self: start; }
}

/* Homepage bases: compass before the coordinates (same icon as the destinations page). Drawn in CSS so it survives
   editing the text in UX Builder. */
.aino-base__coords { display: flex; align-items: center; gap: 10px; }
.aino-base__coords::before { content: ""; flex: none; width: 17px; height: 17px; margin-top: -1px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M16.2 7.8l-2.7 5.7-5.7 2.7 2.7-5.7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M16.2 7.8l-2.7 5.7-5.7 2.7 2.7-5.7z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Fleet: Donzi row "fl-yacht--wide" — her wide listing photo is shown nearly whole on tablets and phones (21:9) */
@media (max-width: 1100px) { .fl-yacht--wide .fl-yacht__media .img-inner { aspect-ratio: 21 / 9; } }
.fl-mcmp small, .fl-compare small { text-transform: none; letter-spacing: 0; }

/* Deck plans: every drawing sits in the same frame (the tallest plan, 2400 × 652), centred, never cropped,
   so the height doesn't jump when switching tabs. Works on phones too (fixed 760px-wide scroller). */
.y-plan img { aspect-ratio: 2400 / 652; height: auto; object-fit: contain; }

/* ---------- Phone audit fixes (Oct 2026): Flatsome's ".box-text h3" (line-height 1.3, margins) beat the card name classes ---------- */
.aino-card .box-text h3.aino-card__name { line-height: 1.15; margin: 0 0 8px; }
.ds-yacht .box-text h3.ds-yacht__name { line-height: 1.15; margin: 0; }
.ds-yacht .box-text a.aino-link, .y-others__card .box-text a { line-height: 1.7; }
/* Feature row photo: 4:5 portrait on desktop; Riviera (default) goes 16:9 full width on tablets and 4:3 on phones,
   Malta's row has "ds-feature--portrait" and keeps a portrait photo (8 of 12 columns on tablets, full width 4:5 on phones) */
@media (max-width: 1100px) {
  .ds-feature:not(.ds-feature--portrait) > .ds-feature__media { grid-column: 1 / 13; }
  .ds-feature:not(.ds-feature--portrait) .ds-feature__media .img-inner { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  .ds-feature:not(.ds-feature--portrait) .ds-feature__media .img-inner { aspect-ratio: 4 / 3; }
}
/* Flatsome makes links in box text inline-block with line-height 1.3; the name links keep the heading's line height */
.box-text h3.aino-card__name a, .box-text h3.ds-yacht__name a, .y-others__card .box-text h3 a { display: inline; line-height: inherit; }
/* stats label: the prototype's label sits on a body-size line (17px / 16px × 1.7) */
.col-inner ul.aino-stats li { line-height: 28.9px; }
@media (max-width: 760px) { .col-inner ul.aino-stats li { line-height: 27.2px; } }
/* partners lead keeps its paragraph margin, as in the prototype */
.aino-section .aino-partners-wrap .col-inner > p.aino-lead { margin-bottom: 1em; }
@media (min-width: 761px) { .aino-hero .button.aino-btn { margin-bottom: 0; } }

/* Contact menu: one panel with hairlines between the items, left-aligned (the yacht-page style, used site-wide) */
.contact-fab__menu { gap: 0; min-width: 220px; background: var(--bg-glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid var(--line-strong); }
.contact-fab__menu a { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 15px 22px; letter-spacing: .22em; text-align: left; }
.contact-fab__menu a + a { border-top: 1px solid var(--line); }
.contact-fab__menu a:hover { background: var(--bg-alt); }
.fl-mcmp__row dd, .fl-mcmp__row dd span, .fl-mcmp__row dd small { text-transform: none; letter-spacing: normal; }
.fl-compare thead th { font-size: 15px; text-transform: none; letter-spacing: 0; }

/* =========================================================
   CONTENT PAGES — Experiences (ex-), About, Partners, Contact, Questions (pg-).
   Ported from website/assets/css/experiences.css and pages.css. Same homepage grid and text classes;
   page heads reuse "fl-head" (+ "fl-head__grid--rule" for the hairline under the head).
   ========================================================= */
/* Line icons for the content pages: clear, whatsapp, phone, mail, instagram, wine, dietary, toys */
.y-i--clear { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%278.5%27/%3E%3Cpath d=%27M3.5 12h17%27/%3E%3C/svg%3E"); }
.y-i--whatsapp { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4.5 19.5l1.2-3.6A8 8 0 1 1 8.6 18.6z%27/%3E%3Cpath d=%27M9.3 8.4c.2 3 2.4 5.4 5.4 5.9l1-1.4-1.8-.9-.8.8c-1-.4-1.9-1.3-2.3-2.3l.8-.8-.9-1.8z%27/%3E%3C/svg%3E"); }
.y-i--phone { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6.5 3.5h3l1.5 4-2 1.5a10 10 0 0 0 5 5l1.5-2 4 1.5v3a2 2 0 0 1-2 2A15 15 0 0 1 4.5 5.5a2 2 0 0 1 2-2z%27/%3E%3C/svg%3E"); }
.y-i--mail { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%275.5%27 width=%2718%27 height=%2713%27/%3E%3Cpath d=%27M3.5 6l8.5 7 8.5-7%27/%3E%3C/svg%3E"); }
.y-i--instagram { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273.5%27 y=%273.5%27 width=%2717%27 height=%2717%27 rx=%274.5%27/%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%274%27/%3E%3Ccircle cx=%2717%27 cy=%277%27 r=%27.6%27/%3E%3C/svg%3E"); }
.y-i--wine { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M8 3h8l-.6 6.2A3.4 3.4 0 0 1 12 12.3a3.4 3.4 0 0 1-3.4-3.1z%27/%3E%3Cpath d=%27M12 12.3V20M8.5 20.5h7%27/%3E%3C/svg%3E"); }
.y-i--dietary { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 3v6.5a2 2 0 0 0 2 2h0a2 2 0 0 0 2-2V3M9 3v18%27/%3E%3Cpath d=%27M17 21V3c-2 1.2-3 3.6-3 6.5V13h3%27/%3E%3C/svg%3E"); }
.y-i--toys { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%271.1%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M2.5 17.5c1.5 0 1.5 1 3 1s1.5-1 3-1 1.5 1 3 1 1.5-1 3-1 1.5 1 3 1 1.5-1 3-1%27/%3E%3Cpath d=%27M5 14.5h12.5l2-3.5H14l-2.5-3H8%27/%3E%3Cpath d=%27M8 8l-1.5 6.5%27/%3E%3C/svg%3E"); }

/* ---------- Page head with a hairline under it (About, Partners, Contact, Questions) — Row "… fl-head__grid fl-head__grid--rule" ---------- */
.row.fl-head__grid--rule {
  padding-bottom: clamp(48px, 5vw, 72px);
  background: linear-gradient(var(--line), var(--line)) bottom center / min(calc(100% - 2 * var(--gutter)), calc(var(--max) - 2 * var(--gutter))) 1px no-repeat;
}
/* Section that follows a page head directly — Section "pg-body" (top clamp(64–112px), bottom = section spacing) */
.section.pg-body { padding: clamp(64px, 7vw, 112px) 0 var(--section) !important; }
.pg-body .col { padding-bottom: 0; }

/* ---------- Experiences: occasions — Section "ex-occasions-section" (hairline on top) > Row "aino-section-head aino-section-head--flex ex-section-head"
   > Row "aino-grid ex-occasions": one column per tile with a Banner (link /plan/). Column classes: "ex-tile--big" (2×2), "ex-tile--wide" (2×1),
   "ex-tile--type" (no photo: Light Grey with a hairline). Banner text: <p class="ex-tile__title">, <p class="ex-tile__line">, <p class="ex-tile__more"> ---------- */
.section.ex-occasions-section { padding: clamp(64px, 7vw, 112px) 0 var(--section) !important; }
.ex-occasions-section .section-content::before {
  content: ""; display: block; width: min(calc(100% - 2 * var(--gutter)), calc(var(--max) - 2 * var(--gutter)));
  margin: 0 auto clamp(56px, 6vw, 96px); border-top: 1px solid var(--line);
}
.row.ex-section-head { margin-bottom: clamp(40px, 4.5vw, 64px); }
.ex-occasions { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(220px, 21vw, 310px); gap: clamp(12px, 1.4vw, 20px); }
.ex-occasions > .col.ex-tile--big { grid-column: span 2; grid-row: span 2; }
.ex-occasions > .col.ex-tile--wide { grid-column: span 2; }
.ex-occasions > .col > .col-inner, .ex-occasions .banner { height: 100%; }
.ex-occasions .banner { padding-top: 0 !important; overflow: hidden; background-color: var(--bg-deep); }
.ex-occasions .banner-bg img { transition: transform 1.6s var(--ease); }
.ex-occasions .banner:hover .banner-bg img { transform: scale(1.04); }
.ex-occasions .col:not(.ex-tile--type) .banner .banner-layers::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--shade), .8) 0%, rgba(var(--shade), .56) 26%, rgba(var(--shade), .2) 50%, rgba(var(--shade), 0) 68%);
}
.ex-occasions .banner-layers { position: absolute; inset: 0; max-width: none; padding: 0; }
.ex-occasions .text-box {
  position: absolute; left: 0 !important; right: 0; top: auto !important; bottom: 0; z-index: 1;
  width: auto !important; max-width: none; margin: 0; transform: none !important; text-align: left;
}
.ex-occasions .text-box .text-box-content { padding: clamp(20px, 2vw, 30px); }
.ex-occasions p { margin: 0 !important; }
p.ex-tile__title { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2vw, 31px); line-height: 1.15; text-wrap: balance; color: var(--on-photo); }
.ex-tile--big p.ex-tile__title { font-size: clamp(34px, 3.3vw, 50px); line-height: 1.06; }
.ex-tile--wide:not(.ex-tile--type) p.ex-tile__title { max-width: 13ch; }
.ex-occasions .col:not(.ex-tile--type) p.ex-tile__title { text-shadow: 0 1px 16px rgba(0, 0, 0, .35); }
p.ex-tile__more {
  display: inline-flex; gap: 10px; margin-top: 12px !important;
  font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .24em; text-transform: uppercase; color: var(--on-photo); opacity: .9;
}
p.ex-tile__more::after { content: "\2192"; letter-spacing: 0; transition: transform .4s var(--ease); }
.ex-occasions .banner:hover p.ex-tile__more::after { transform: translateX(6px); }
.ex-tile--type .banner { background-color: var(--bg-alt) !important; border: 1px solid var(--line); transition: border-color .4s var(--ease); }
.ex-tile--type .banner:hover { border-color: var(--line-strong); }
.ex-tile--type .text-box { top: 0 !important; }
.ex-tile--type .text-box-content, .ex-tile--type .text-box .text-inner { height: 100%; }
.ex-tile--type .text-box .text-inner { display: flex; flex-direction: column; }
.ex-tile--type p.ex-tile__title { color: var(--ink); text-shadow: none; }
.ex-tile--type p.ex-tile__line { margin-top: 12px !important; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 34ch; }
.ex-tile--type p.ex-tile__more { margin-top: auto !important; padding-top: 20px; color: var(--ink); opacity: 1; }
.ex-occasions .banner img[src*="guests-jetski"] { object-position: 50% 42%; }
.ex-occasions .banner img[src*="guests-crew"] { object-position: 30% 50%; }
.ex-occasions .banner img[src*="flybridge-bar"] { object-position: 12% 50%; }

/* ---------- Experiences: dining — Row "aino-grid ex-dining" (3 columns: Image "ex-dining__img" 4:5 + <p class="ex-num">, H3, line) ---------- */
.ex-dining { grid-template-columns: repeat(3, 1fr); gap: var(--fl-gap); }
.ex-dining .col-inner > .img, .ex-dining .img-inner { width: 100% !important; margin: 0; }
.ex-dining .img-inner { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-deep); margin-bottom: 28px; }
.ex-dining .img-inner img { width: 100%; height: 100%; object-fit: cover; }
p.ex-num { margin: 0 0 12px !important; padding-top: 18px; border-top: 1px solid var(--ink); font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .26em; color: var(--muted); }
.ex-dining h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.15; color: var(--ink); }
.ex-dining h3 + p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 36ch; }

/* ---------- Experiences: personal details — Row "aino-grid aino-twelve ex-split": column "ex-split__head" + column "ex-split__list"
   (<ul class="ex-details"> items "y-i y-i--NAME" with <h3> + <p>) ---------- */
.ex-split { align-items: start; }
.ex-split > .ex-split__head { grid-column: 1 / 6; }
.ex-split > .ex-split__list { grid-column: 7 / 13; }
.ex-split__head .aino-h2 { max-width: 12ch; }
p.ex-split__lead { margin: 24px 0 0; font-size: clamp(17px, 1.3vw, 19px); color: var(--text); max-width: 34ch; }
.col-inner ul.ex-details { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.col-inner ul.ex-details li { display: grid; grid-template-columns: 28px 1fr; column-gap: 24px; margin: 0; padding: 28px 0; border-bottom: 1px solid var(--line); list-style: none; }
.ex-details li::before { grid-row: 1 / span 2; width: 28px; height: 28px; margin-top: 2px; }
.ex-details h3 { margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.25; color: var(--ink); }
.ex-details p { grid-column: 2; margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- Experiences: transfers — Row "aino-grid ex-transfers" (2 columns: Text <span class="fl-tag"> (Donzi), Image 3:2 with link,
   eyebrow, <h3 class="aino-display ex-transfer__name">, text, Button ghost + <p class="fl-enquire"> link) ---------- */
.ex-transfers { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.ex-transfers > .col > .col-inner { position: relative; }
.ex-transfers .col-inner > .img, .ex-transfers .img-inner { width: 100% !important; margin: 0; }
.ex-transfers .img-inner { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-deep); margin-bottom: 32px; }
.ex-transfers .img-inner img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.ex-transfers .img:hover img { transform: scale(1.04); }
.ex-transfers img[src*="donzi28"] { object-position: 62% 50%; }
.ex-transfers .fl-tag { top: 18px; left: 18px; }
.ex-transfers .col-inner > p:first-child { margin: 0; }
.ex-transfers .aino-eyebrow { margin-bottom: 14px; }
.aino-display.ex-transfer__name { font-size: clamp(34px, 3vw, 46px); line-height: 1.06; }
.ex-transfer__name a { color: inherit; }
p.ex-transfer__text { margin: 16px 0 0; font-size: 16px; line-height: 1.7; color: var(--text); max-width: 44ch; }
.ex-transfers .button.aino-btn { margin: 28px 31px 0 0; }
.ex-transfers p.fl-enquire, .ex-actions p { display: inline-block; margin: 28px 0 0; vertical-align: middle; }
.ex-transfers a.aino-link, .ex-actions a.aino-link { display: inline-flex; gap: 12px; }

/* ---------- Experiences: feature rows (Riviera events / Malta privileges) — Row "aino-grid aino-twelve ds-feature"
   (+ "ds-feature--reverse": text left, 4:3 photo right). Events reuse <ul class="ds-events">; perks <ul class="ex-perks">;
   links: <p class="ex-actions"> with two links ---------- */
.ds-feature--reverse > .ds-feature__media { grid-column: 7 / 13; grid-row: 1; }
.ds-feature--reverse > .ds-feature__body { grid-column: 1 / 6; grid-row: 1; }
.ds-feature--reverse .ds-feature__media .img-inner { aspect-ratio: 4 / 3; }
.ds-feature--reverse .ds-feature__media img { object-position: 72% 50%; }
.col-inner ul.ex-perks { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.col-inner ul.ex-perks li { margin: 0; padding: 15px 0; border-bottom: 1px solid var(--line); list-style: none; font-family: var(--serif); font-size: clamp(21px, 1.7vw, 24px); line-height: 1.3; color: var(--ink); }
.ex-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin: 32px 0 0 !important; }

/* ---------- About: wide photo — Section "pg-band" > Image "pg-band__img" (21:9) + <p class="pg-band__caption"> ---------- */
.section.pg-band { padding: clamp(48px, 5vw, 72px) 0 0 !important; }
.pg-band .col { padding-bottom: 0; }
.pg-band__img, .pg-band__img .img-inner { width: 100% !important; margin: 0; }
.pg-band__img .img-inner { aspect-ratio: 21 / 9; overflow: hidden; background: var(--bg-deep); }
.pg-band__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
p.pg-band__caption { margin: 14px 0 0 !important; font-size: 13px; color: var(--muted); }

/* ---------- About: who we are — Row "aino-grid aino-twelve pg-split" (column 1–5: eyebrow + H2; column "pg-split__body" 7–12:
   lead, text, <ul class="aino-stats pg-stats">, <p class="pg-company">) ---------- */
.pg-split { align-items: start; }
.pg-split > .col:first-child { grid-column: 1 / 6; }
.pg-split > .pg-split__body { grid-column: 7 / 13; }
.pg-split .aino-h2 { max-width: 12ch; }
.pg-split__body p.pg-split__lead { margin: 0; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.7; color: var(--text); }
.pg-split__body p + p { margin: 24px 0 0; color: var(--text); }
.col-inner ul.pg-stats { gap: clamp(32px, 5vw, 72px); margin-top: 44px; padding-top: 32px; }
.pg-stats strong { font-size: clamp(40px, 3.6vw, 52px); }
.pg-split__body p.pg-company { margin: 32px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- About: values — Row "aino-grid pg-values" (4 columns: <h3 class="y-i y-i--NAME"> + <p>) ---------- */
.pg-values { grid-template-columns: repeat(4, 1fr); gap: var(--fl-gap); }
.pg-values > .col > .col-inner { padding-top: 28px; border-top: 1px solid var(--ink); }
.pg-values h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2.1vw, 31px); line-height: 1.2; color: var(--ink); }
.pg-values h3.y-i::before { width: 26px; height: 26px; margin-bottom: 22px; }
.pg-values p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 30ch; }

/* ---------- About: crew — Row "aino-grid pg-crew" (4 columns: <div class="pg-crew__portrait"> placeholder with
   <span class="pg-crew__soon">; swap for an Image when photos arrive) + meta, H3, note; foot <p class="pg-crew-foot"> ---------- */
.pg-crew { grid-template-columns: repeat(4, 1fr); gap: var(--fl-gap); }
.pg-crew__portrait {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 22px;
  background: var(--bg-alt); border: 1px solid var(--line);
}
.pg-crew__portrait::before {
  content: ""; position: absolute; left: 33%; right: 33%; top: 0; bottom: 0; margin: auto; aspect-ratio: 1; height: auto; background: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='black' stroke-width='.6' stroke-linecap='round'%3E%3Ccircle cx='30' cy='22' r='10'/%3E%3Cpath d='M10 56c2-12 10-19 20-19s18 7 20 19'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='black' stroke-width='.6' stroke-linecap='round'%3E%3Ccircle cx='30' cy='22' r='10'/%3E%3Cpath d='M10 56c2-12 10-19 20-19s18 7 20 19'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pg-crew__portrait p, .pg-crew__soon { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 !important; }
.pg-crew__soon {
  display: block; padding: 14px 16px; border-top: 1px solid var(--line);
  font-size: 10.5px; font-weight: 500; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.pg-crew p.pg-crew__meta { margin: 0 0 6px; font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.pg-crew h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 1.9vw, 28px); line-height: 1.2; color: var(--ink); }
.pg-crew p.pg-crew__note { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
p.pg-crew-foot { margin: clamp(40px, 4vw, 56px) 0 0 !important; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); max-width: 70ch; }

/* ---------- About: the fleet in short — Text <ul class="pg-fleet">: <li> = <img class="pg-fleet__img">, <h3> with link (covers the row),
   <p class="pg-fleet__tag">, <p class="pg-fleet__base">; arrow drawn in CSS ---------- */
.col-inner ul.pg-fleet { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.col-inner ul.pg-fleet li {
  position: relative; display: grid; grid-template-columns: 160px 1fr auto auto; grid-template-rows: auto auto; column-gap: clamp(20px, 3vw, 48px); align-items: center;
  margin: 0; padding: 20px 0; border-bottom: 1px solid var(--line); list-style: none;
}
.pg-fleet li > br { display: none; }
.pg-fleet img.pg-fleet__img { grid-row: 1 / span 2; grid-column: 1; width: 160px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; background: var(--bg-deep); transition: transform 1.2s var(--ease); }
.pg-fleet img.pg-fleet__img[src*="donzi28"] { object-position: 62% 50%; }
.pg-fleet h3 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.15; color: var(--ink); }
.pg-fleet h3 a { color: inherit; }
.pg-fleet h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pg-fleet p.pg-fleet__tag { grid-column: 2; grid-row: 2; align-self: start; margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.4; color: var(--muted); }
.pg-fleet p.pg-fleet__base { grid-column: 3; grid-row: 1 / span 2; margin: 0; font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-align: right; }
.col-inner ul.pg-fleet li::after { content: "\2192"; grid-column: 4; grid-row: 1 / span 2; font-size: 20px; color: var(--ink); transition: transform .4s var(--ease); }
.col-inner ul.pg-fleet li:hover::after { transform: translateX(6px); }

/* ---------- Partners — Row "aino-grid pg-partners" (9 columns, class "pg-partner": Image "pg-partner__logo" + Text: where, H2, line);
   every logo frame keeps the same ratio, the logo is centred inside, optical sizes per logo below.
   Riviera note: Row "aino-grid aino-twelve pg-note" (eyebrow | text | link) ---------- */
.pg-partners { grid-template-columns: repeat(3, 1fr); gap: 48px var(--fl-gap); }
.pg-partner__logo, .pg-partner__logo .img-inner { width: 100% !important; margin: 0; }
.col-inner > .pg-partner__logo { margin-bottom: 20px; }
.pg-partner__logo .img-inner { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg); border: 1px solid var(--line); }
@media (min-width: 1101px) { .pg-partner__logo .img-inner { aspect-ratio: 5 / 2; } }
.pg-partner__logo img {
  position: absolute; inset: 0; margin: auto; max-width: none; width: 58%; height: 42%; object-fit: contain;
  filter: grayscale(1) brightness(.4); opacity: .8; transition: opacity .4s var(--ease);
}
.pg-partner:hover .pg-partner__logo img { opacity: 1; }
.pg-partner__logo img[src*="One80"] { width: 44%; }
.pg-partner__logo img[src*="Rush_Ltd_logo_grey_line"] { width: 40%; height: 30%; opacity: .7; }
.pg-partner__logo img[src*="Mercury_Towers"] { transform: scale(1.45); }
.pg-partner p.pg-partner__where { margin: 0 0 6px; font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.pg-partner h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 1.8vw, 27px); line-height: 1.2; color: var(--ink); }
.pg-partner p.pg-partner__text { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.row.pg-note {
  align-items: center; margin-top: clamp(64px, 7vw, 104px); padding-top: 28px; padding-bottom: 28px;
  background: linear-gradient(var(--line-strong), var(--line-strong)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat,
              linear-gradient(var(--line), var(--line)) bottom center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.pg-note > .col:nth-child(1) { grid-column: 1 / 4; }
.pg-note > .col:nth-child(2) { grid-column: 4 / 10; }
.pg-note > .col:nth-child(3) { grid-column: 10 / 13; justify-self: end; }
.pg-note .aino-eyebrow { margin: 0; }
.pg-note p.pg-note__text { margin: 0; font-family: var(--serif); font-size: clamp(23px, 1.9vw, 28px); line-height: 1.3; color: var(--ink); }
.pg-note .aino-link { white-space: nowrap; }

/* ---------- Contact — Row "aino-grid aino-twelve pg-contact": column "pg-ways-col" (<ul class="pg-ways">: <li class="pg-way y-i y-i--NAME">
   with <p class="pg-way__label">, <p class="pg-way__value"><a> (link covers the row), <p class="pg-way__note">; last <li class="pg-company-row">)
   + column "pg-cards" (two Text cards: <div class="pg-card pg-card--solid"> and <div class="pg-card">, H2 link covers the card) ---------- */
.pg-contact { align-items: start; }
.pg-contact > .pg-ways-col { grid-column: 1 / 8; }
.pg-contact > .pg-cards { grid-column: 9 / 13; }
.col-inner ul.pg-ways { list-style: none; margin: 0; padding: 0; }
.col-inner ul.pg-ways li.pg-way {
  position: relative; display: grid; grid-template-columns: 26px 1fr auto; column-gap: clamp(20px, 2.4vw, 36px); align-items: center;
  margin: 0; padding: clamp(26px, 2.6vw, 36px) 0; border-bottom: 1px solid var(--line); list-style: none;
}
.col-inner ul.pg-ways li.pg-way:first-child { padding-top: 0; }
.pg-way::before { grid-column: 1; grid-row: 1 / span 3; width: 26px; height: 26px; }
.pg-way p { grid-column: 2; margin: 0 !important; }
.pg-way p.pg-way__label { margin-bottom: 6px !important; font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.pg-way p.pg-way__value { font-family: var(--serif); font-size: clamp(26px, 2.5vw, 38px); line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.pg-way__value a { color: inherit; }
.pg-way__value a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pg-way p.pg-way__note { margin-top: 6px !important; font-size: 14px; line-height: 1.5; color: var(--muted); }
.col-inner ul.pg-ways li.pg-way::after { content: "\2192"; grid-column: 3; grid-row: 1 / span 3; font-size: 20px; color: var(--ink); transition: transform .4s var(--ease); }
.col-inner ul.pg-ways li.pg-way:hover::after { transform: translateX(6px); }
.col-inner ul.pg-ways li.pg-company-row { display: flex; gap: 24px; align-items: baseline; margin: 0; padding: 24px 0; border-bottom: 1px solid var(--line); list-style: none; }
.pg-company-row .aino-eyebrow { margin: 0 !important; flex: none; }
.pg-company-row p:not(.aino-eyebrow) { margin: 0; font-size: 15px; color: var(--text); }
.pg-cards > .col-inner { display: grid; gap: var(--fl-gap); }
.pg-card { position: relative; padding: clamp(32px, 3vw, 48px); border: 1px solid var(--line-strong); color: var(--text); transition: border-color .4s var(--ease); }
.pg-card:hover { border-color: var(--ink); }
.pg-card .aino-eyebrow { margin-bottom: 18px; }
.pg-card h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.6vw, 40px); line-height: 1.1; color: var(--ink); }
.pg-card h2 a { color: inherit; }
.pg-card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pg-card p:not(.aino-eyebrow):not(.pg-card__btn):not(.pg-card__link) { margin: 14px 0 28px; font-size: 15px; line-height: 1.6; }
.pg-card p.pg-card__link { margin: 0; }
.pg-card p.pg-card__link span { display: inline-flex; gap: 12px; font-size: 11.5px; font-weight: 500; line-height: 1.7; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid currentColor; }
.pg-card p.pg-card__link span::after { content: "\2192"; letter-spacing: 0; }
.pg-card--solid { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pg-card--solid h2 { color: var(--bg); }
.pg-card--solid .aino-eyebrow, .pg-card--solid p:not(.aino-eyebrow):not(.pg-card__btn) { color: var(--bg); opacity: .78; }
.pg-card--solid p.pg-card__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 54px; margin: 0; padding: 0 30px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--bg);
  font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; transition: background .4s var(--ease), color .4s var(--ease);
}
.pg-card--solid p.pg-card__btn::after { content: "\2192"; letter-spacing: 0; }
.pg-card--solid:hover p.pg-card__btn { background: transparent; color: var(--bg); }
/* Contact: bases — Row "aino-grid pg-bases" (2 Image Boxes "pg-base", image height 66.67% = 3:2) */
.pg-bases { grid-template-columns: 1fr 1fr; gap: var(--fl-gap); }
.pg-base.box { position: relative; }
.pg-base .box-image { overflow: hidden; background: var(--bg-deep); margin-bottom: 24px; }
.pg-base .box-image img { transition: transform 1.4s var(--ease); }
.pg-base:hover .box-image img { transform: scale(1.04); }
.pg-base .box-text { position: static; padding: 0; font-size: 1em; }
.pg-base .aino-eyebrow { margin-bottom: 10px !important; }
.pg-base .box-text h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.6vw, 40px); line-height: 1.1; color: var(--ink); }
.pg-base .box-text h3 a { display: inline; line-height: inherit; color: inherit; }
.pg-base .box-text h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pg-base p.pg-base__text { margin: 12px 0 22px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.pg-base .box-text a.aino-link { display: inline-flex; gap: 12px; line-height: 1.7; }

/* ---------- Questions — Row "aino-grid aino-twelve pg-faq": column "pg-faq__aside" (sticky: <ul class="pg-faq__toc"> anchor links, help text, links)
   + column "pg-faq__groups": per topic a Scroll To anchor, Text <h2 class="pg-faq__title">…<span>01</span></h2> and an Accordion "pg-q"
   (one Accordion item per question; Flatsome writes the FAQ schema when "FAQ schema" is on) ---------- */
.pg-faq { align-items: start; }
.row.aino-grid > .col.pg-faq__aside { grid-column: 1 / 4; position: sticky; top: 132px; }
.pg-faq > .pg-faq__groups { grid-column: 5 / 13; }
.col-inner ul.pg-faq__toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.col-inner ul.pg-faq__toc li { margin: 0; list-style: none; }
.pg-faq__toc a {
  display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: color .3s var(--ease);
}
.pg-faq__toc a:hover { color: var(--ink); }
.pg-faq__toc span { color: var(--muted); letter-spacing: .1em; }
.pg-faq__help { margin-top: 40px; }
.pg-faq__help p:not(.aino-eyebrow) { margin: 0 0 20px; font-family: var(--serif); font-size: 24px; line-height: 1.3; color: var(--ink); }
.pg-faq__help .aino-link + .aino-link { margin-left: 24px; }
.pg-faq__groups .scroll-to { display: block; height: 0; scroll-margin-top: 120px; }
.pg-faq__groups .scroll-to + p:empty { display: none; }
h2.pg-faq__title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin: clamp(64px, 6vw, 96px) 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--ink);
  font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.6vw, 40px); line-height: 1.15; color: var(--ink);
}
.pg-faq__groups .col-inner > :first-child h2.pg-faq__title, .pg-faq__groups h2.pg-faq__title.is-first { margin-top: 0; }
h2.pg-faq__title span { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .2em; color: var(--muted); }
.accordion.pg-q { margin: 0; }
.pg-q .accordion-item { border-bottom: 1px solid var(--line); }
.pg-q .accordion-title {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-direction: row-reverse;
  padding: 24px 0; border: 0; background: none; font-weight: 400;
  font-family: var(--serif); font-size: clamp(21px, 1.7vw, 25px); line-height: 1.3; color: var(--ink);
}
.pg-q .accordion-title.active { background: none; color: var(--ink); font-weight: 400; }
.pg-q .accordion-title:hover { color: var(--muted); }
.pg-q .accordion-title .toggle {
  position: relative; flex: none; width: 14px; height: 14px; margin: 0; padding: 0; opacity: 1; color: var(--ink); left: auto; top: auto; transform: none;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: transform .4s var(--ease);
}
.pg-q .accordion-title .toggle i { display: none; }
.pg-q .accordion-title.active .toggle { transform: rotate(45deg); }
.pg-q .accordion-inner { padding: 0 48px 28px 0; color: var(--text); font-size: 16px; line-height: 1.7; }
.pg-q .accordion-inner p { margin: 0; max-width: 62ch; }
.pg-q .accordion-inner p + p, .pg-q .accordion-inner ul + p, .pg-q .accordion-inner p + ul { margin-top: 14px; }
.pg-q .accordion-inner ul { margin: 0; padding: 0; list-style: none; max-width: 62ch; }
.pg-q .accordion-inner li { position: relative; margin: 0; padding: 6px 0 6px 22px; list-style: none; }
.pg-q .accordion-inner li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px; height: 1px; background: var(--muted); }
.pg-q .accordion-inner b, .pg-q .accordion-inner strong { font-weight: 500; color: var(--ink); }
.pg-q .accordion-inner a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.pg-q .accordion-inner a:hover { border-color: var(--ink); }

/* ---------- Content pages: tablet ---------- */
@media (max-width: 1100px) {
  .ex-occasions { grid-auto-rows: clamp(200px, 26vw, 280px); }
  .ex-split > .ex-split__head { grid-column: 1 / 6; }
  .ex-split > .ex-split__list { grid-column: 6 / 13; }
  .ds-feature--reverse > .ds-feature__media { grid-column: 1 / 13; grid-row: 1; margin-bottom: 48px; }
  .ds-feature--reverse .ds-feature__media .img-inner { aspect-ratio: 16 / 9; }
  .ds-feature--reverse > .ds-feature__body { grid-column: 1 / 13; grid-row: 2; max-width: 760px; }
  .ds-feature img[src*="aerial-sunset-v"] { object-position: 50% 62%; }
  .pg-split > .col:first-child, .pg-split > .pg-split__body { grid-column: 1 / 13; }
  .pg-split__body > .col-inner { margin-top: 32px; max-width: 720px; }
  .pg-split .aino-h2 { max-width: 18ch; }
  .pg-values, .pg-crew { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .pg-partners { grid-template-columns: 1fr 1fr; gap: 0 var(--fl-gap); }
  .pg-partners > .col > .col-inner { display: grid; grid-template-columns: 180px 1fr; column-gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .pg-partners > .col:nth-child(-n+2) > .col-inner { padding-top: 0; }
  .col-inner > .pg-partner__logo { margin: 0; }
  .pg-note > .col:nth-child(1) { grid-column: 1 / 13; margin-bottom: 10px; }
  .pg-note > .col:nth-child(2) { grid-column: 1 / 9; }
  .pg-note > .col:nth-child(3) { grid-column: 9 / 13; }
  .pg-contact > .pg-ways-col, .pg-contact > .pg-cards { grid-column: 1 / 13; }
  .pg-cards > .col-inner { grid-template-columns: 1fr 1fr; margin-top: 56px; }
  .row.aino-grid > .col.pg-faq__aside { grid-column: 1 / 13; position: static; margin-bottom: 64px; }
  .pg-faq__aside > .col-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--fl-gap); align-items: start; }
  .pg-faq__help { margin-top: 0; }
  .pg-faq > .pg-faq__groups { grid-column: 1 / 13; }
}
@media (max-width: 860px) {
  .ex-occasions { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(200px, 40vw, 300px); }
  .ex-dining { grid-template-columns: 1fr 1fr; row-gap: 56px; }
  .ex-dining > .col:last-child { grid-column: 1 / -1; }
  .ex-dining > .col:last-child .img-inner { aspect-ratio: 16 / 9; }
  .ex-transfers { grid-template-columns: 1fr; gap: 72px; }
  .ex-split > .ex-split__head, .ex-split > .ex-split__list { grid-column: 1 / 13; }
  .ex-split__head .aino-h2 { max-width: 20ch; }
  .ex-split > .ex-split__list { margin-top: 48px; }
}

/* ---------- Content pages: phone ---------- */
@media (max-width: 760px) {
  .section.ex-occasions-section { padding-top: 48px !important; }
  .ex-occasions-section .section-content::before { margin-bottom: 48px; }
  .ex-occasions { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; }
  .ex-occasions > .col.ex-tile--big, .ex-occasions > .col.ex-tile--wide { grid-column: auto; grid-row: auto; }
  .ex-occasions > .col:not(.ex-tile--type) { aspect-ratio: 3 / 2; }
  .ex-occasions > .col.ex-tile--big:not(.ex-tile--type) { aspect-ratio: 4 / 5; }
  .ex-occasions > .col.ex-tile--type .banner { height: auto; }
  .ex-tile--type .text-box { position: relative; }
  .ex-occasions > .col.ex-tile--type .banner-layers { position: relative; }
  p.ex-tile__title { font-size: 28px; }
  .ex-tile--big p.ex-tile__title { font-size: 38px; }
  .ex-dining { grid-template-columns: 1fr; row-gap: 48px; }
  .ex-dining > .col:last-child { grid-column: auto; }
  .ex-dining .img-inner, .ex-dining > .col:last-child .img-inner { aspect-ratio: 4 / 3; margin-bottom: 24px; }
  .ex-split > .ex-split__list { margin-top: 40px; }
  .col-inner ul.ex-details li { column-gap: 18px; padding: 24px 0; }
  .ex-transfers { gap: 64px; }
  .ex-transfers .img-inner { margin-bottom: 26px; }
  .aino-display.ex-transfer__name { font-size: 36px; }
  .ex-transfers .button.aino-btn { display: flex; width: 100%; margin: 28px 0 0; }
  .ex-transfers p.fl-enquire { display: flex; margin-top: 22px; }
  .ex-actions { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ds-feature--reverse .ds-feature__media .img-inner { aspect-ratio: 4 / 3; }
  .ds-feature--reverse > .ds-feature__media { margin-bottom: 40px; }

  .pg-band__img { margin-inline: calc(-1 * var(--gutter)) !important; width: auto !important; }
  .pg-band__img .img-inner { aspect-ratio: 4 / 3; }
  p.pg-band__caption { font-size: 12.5px; }
  .col-inner ul.pg-stats { gap: 28px; }
  .pg-values { grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 40px; }
  .pg-values > .col > .col-inner { padding-top: 22px; }
  .pg-values h3 { font-size: 24px; }
  .pg-values p { font-size: 14px; }
  .pg-crew { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 36px; }
  .pg-crew__portrait { margin-bottom: 16px; }
  .pg-crew__soon { padding: 10px 12px; font-size: 9.5px; letter-spacing: .16em; }
  .pg-crew h3 { font-size: 22px; }
  .pg-crew p.pg-crew__meta { font-size: 10px; letter-spacing: .18em; }
  .pg-crew p.pg-crew__note { font-size: 14px; }
  .col-inner ul.pg-fleet li { grid-template-columns: 104px 1fr auto; column-gap: 18px; padding: 16px 0; grid-template-rows: auto auto auto; }
  .pg-fleet img.pg-fleet__img { width: 104px; grid-row: 1 / span 3; }
  .pg-fleet h3 { font-size: 24px; }
  .pg-fleet p.pg-fleet__tag { font-size: 16px; }
  .pg-fleet p.pg-fleet__base { grid-column: 2; grid-row: 3; text-align: left; margin-top: 6px; font-size: 10px; letter-spacing: .18em; }
  .col-inner ul.pg-fleet li::after { grid-column: 3; grid-row: 1 / span 3; }

  .pg-partners { grid-template-columns: 1fr; }
  .pg-partners > .col > .col-inner { grid-template-columns: 120px 1fr; column-gap: 18px; padding: 18px 0; }
  .pg-partners > .col:nth-child(2) > .col-inner { padding-top: 18px; }
  .pg-partner h2 { font-size: 22px; }
  .pg-partner p.pg-partner__text { font-size: 14px; margin-top: 4px; }
  .pg-partner p.pg-partner__where { font-size: 10px; margin-bottom: 4px; }
  .row.pg-note { row-gap: 16px; }
  .pg-note > .col:nth-child(2), .pg-note > .col:nth-child(3) { grid-column: 1 / 13; justify-self: start; }

  .col-inner ul.pg-ways li.pg-way { grid-template-columns: 24px 1fr auto; column-gap: 16px; padding: 22px 0; }
  .pg-way::before { width: 24px; height: 24px; }
  .pg-way p.pg-way__value { font-size: 25px; }
  .pg-way--email p.pg-way__value { font-size: 19px; }
  .col-inner ul.pg-ways li.pg-company-row { flex-direction: column; gap: 8px; }
  .pg-cards > .col-inner { grid-template-columns: 1fr; margin-top: 48px; }
  .pg-card--solid p.pg-card__btn { display: flex; width: 100%; }
  .pg-bases { grid-template-columns: 1fr; row-gap: 56px; }

  .pg-faq__aside > .col-inner { display: block; }
  .row.aino-grid > .col.pg-faq__aside { margin-bottom: 56px; }
  .pg-faq__help { margin-top: 40px; }
  .pg-q .accordion-title { padding: 20px 0; font-size: 21px; gap: 16px; }
  .pg-q .accordion-inner { padding-right: 0; font-size: 15.5px; }
}
/* Accordion toggle is a <button>: drop Flatsome's button minimum height and margins */
.pg-q .accordion-title .toggle { min-height: 0; max-height: 14px; margin: 0 !important; line-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.pg-q .accordion-title span { line-height: 1.3; }
/* page titles that break after 14 characters, as on the prototype's Experiences / About / Partners / Contact / Questions heads */
.aino-display.fl-head__title--14 { max-width: 14ch; }
.pg-faq__help p.pg-faq__links { margin: 0; font-family: var(--sans); font-size: inherit; }
.ex-occasions-section .col { padding-bottom: 0; }
/* CTA: the prototype limits the whole wrap (gutters included) to 860px */
.aino-section .section-content > .row.fl-cta { max-width: 860px; }
/* Phone audit (content pages) */
@media (max-width: 760px) {
  /* typographic occasion tiles size to their text */
  .ex-occasions > .col.ex-tile--type .banner-inner, .ex-occasions > .col.ex-tile--type .banner-layers, .ex-occasions > .col.ex-tile--type .text-box { position: relative !important; inset: auto; }
  .aino-display.fl-head__title--14 { font-size: clamp(40px, 11vw, 50px); }
  .row.fl-head__grid--rule { padding-bottom: 40px; }
  .section.pg-body { padding-top: 48px !important; }
}
.pg-partner__body { min-width: 0; }
@media (max-width: 760px) { .aino-display.fl-head__title--14.fl-head__title--ex { font-size: clamp(42px, 11.5vw, 52px); } }
.row.aino-section-head--flex { justify-content: space-between !important; align-items: flex-end !important; }
.pg-partner__body > p { margin-bottom: 0; }
.pg-body .col-inner > :last-child { margin-bottom: 0; }

/* "What makes her special" (Donzi): the source photos are landscape and only 844px tall, so this split uses a
   landscape 4:3 frame (sticky as usual) instead of a tall one — add class "y-split--landscape" to the Row. */
.y-split--landscape .y-split__media .col-inner > .img, .y-split--landscape .y-split__media .img-inner { height: auto; aspect-ratio: 4 / 3; }
.y-split--landscape .y-split__media img { object-position: 50% 50%; }

/* Current page inside a dropdown (as in the prototype): light grey background on desktop; darker text in the phone menu */
.header-nav-main .nav-dropdown > li.current-menu-item:not(.nav-drop__all) > a { background: var(--bg-alt); color: var(--ink); }
.mobile-sidebar .sub-menu > li.current-menu-item:not(.nav-drop__all) > a,
.off-canvas .sub-menu > li.current-menu-item:not(.nav-drop__all) > a { color: var(--ink); font-weight: 500; }

/* Partners, tablets/phones: the list rows already end with a hairline, so the Riviera note drops its own top line
   (two lines close together looked messy) and keeps only the bottom one */
@media (max-width: 1100px) {
  .row.pg-note { margin-top: 48px; padding-top: 0; background: linear-gradient(var(--line), var(--line)) bottom center / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
}

/* =========================================================
   JOURNAL, LEGAL PAGES, 404 — ported from website/assets/css/journal.css (jn- classes).
   Journal page (UX Builder) + stories (child theme single.php, posts) + privacy / terms (UX Builder) + 404 (Flatsome Block).
   ========================================================= */
:root { --jn-measure: 700px; --jn-wide: 1080px; }
/* page-width wrapper used by the PHP templates (same as a homepage row) */
.aino-wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* small uppercase meta line */
.jn-meta { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; margin: 0; font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
p.jn-meta { margin: 0; }
.jn-meta i { font-style: normal; margin: 0 .7em; color: var(--muted); }
.jn-meta span { white-space: nowrap; }

/* ---------- Journal page — Section "fl-head" (head row + [aino_journal part="bar"]) > Section "jn-list" ([aino_journal part="list"]) ---------- */
.jn-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 40px;
  margin-top: clamp(40px, 4.5vw, 64px); padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.jn-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.jn-chips button {
  display: inline-flex; align-items: center; height: 40px; min-height: 0; margin: 0; padding: 0 18px; white-space: nowrap; background: none; border-radius: 0;
  border: 1px solid var(--line-strong); color: var(--muted); line-height: 1;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.jn-chips button:hover { color: var(--ink); border-color: var(--ink); background: none; }
.jn-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
p.jn-count { margin: 0; font-size: 11.5px; font-weight: 500; line-height: 1.7; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.section.jn-list { padding: clamp(56px, 6vw, 96px) 0 var(--section) !important; }
.jn-list .col, .fl-head .col { padding-bottom: 0; }

.jn-feature { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--fl-gap); align-items: center; }
.jn-feature[hidden] { display: none; }
.jn-feature__media { grid-column: 1 / 8; grid-row: 1; position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-deep); }
.jn-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.jn-feature__media:hover img { transform: scale(1.04); }
.jn-feature__body { grid-column: 8 / 13; grid-row: 1; padding-left: clamp(0px, 3vw, 56px); }
.jn-feature__body .aino-eyebrow { margin-bottom: 18px; }
.aino-display.jn-feature__title { font-size: clamp(38px, 3.7vw, 56px); line-height: 1.06; }
.jn-feature__title a, .jn-card__title a { color: inherit; }
p.jn-feature__text { margin: 24px 0 0; font-size: 16px; line-height: 1.7; color: var(--text); max-width: 46ch; }
.jn-feature__body p.jn-meta { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
p.jn-feature__more { margin: 32px 0 0; }
.jn-tag { position: absolute; top: 20px; left: 20px; z-index: 1; background: var(--bg); color: var(--ink); font-size: 11px; font-weight: 500; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase; padding: 8px 12px; }

.jn-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(64px, 6vw, 96px) var(--fl-gap);
  margin-top: clamp(64px, 7vw, 112px); padding-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--line);
}
.jn-feature[hidden] + .jn-grid { margin-top: 0; padding-top: 0; border-top: 0; }
.jn-card { display: block; min-width: 0; }
.jn-card[hidden] { display: none; }
.jn-card.is-entering, .jn-feature.is-entering { animation: jn-in .7s var(--ease) both; }
@keyframes jn-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.jn-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-deep); margin-bottom: 26px; }
.jn-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.jn-card__media:hover img { transform: scale(1.04); }
.jn-card .aino-eyebrow { margin-bottom: 14px; }
.jn-card h3.jn-card__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.12; color: var(--ink); text-wrap: balance; }
.jn-card__title a:hover { opacity: .75; }
.jn-card p.jn-card__text { margin: 16px 0 0; font-size: 16px; line-height: 1.7; color: var(--text); max-width: 52ch; }
.jn-card p.jn-meta { margin-top: 22px; }
p.jn-empty { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--muted); }

/* ---------- Story (single.php) ---------- */
.jn-article-head { padding: clamp(48px, 6vw, 96px) 0 clamp(40px, 4.5vw, 64px); }
.jn-article-head__inner { max-width: var(--jn-measure); margin: 0 auto; }
.jn-article-head .aino-eyebrow a { color: inherit; padding-bottom: 3px; border-bottom: 1px solid var(--line-strong); transition: border-color .3s var(--ease), color .3s var(--ease); }
.jn-article-head .aino-eyebrow a:hover { color: var(--ink); border-color: var(--ink); }
.jn-article-head .aino-eyebrow i { font-style: normal; margin: 0 .6em; color: var(--faint); }
.aino-display.jn-article__title { font-size: clamp(44px, 5vw, 76px); line-height: 1.04; }
.jn-article__standfirst { margin: 28px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.jn-byline { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 36px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.jn-byline .jn-meta:first-child { color: var(--ink); }
.jn-hero { margin: 0; }
.jn-hero__img { overflow: hidden; aspect-ratio: 21 / 9; background: var(--bg-deep); }
.jn-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.jn-caption, .jn-body figcaption, .jn-body .wp-element-caption { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--muted); text-align: left; }
.jn-hero .jn-caption { max-width: var(--jn-measure); margin-inline: auto; }

/* story content: the editor's paragraphs, headings, images (Image block or <figure class="jn-figure">), quotes, lists, tables */
.jn-body { padding: clamp(56px, 6vw, 96px) 0 0; }
.jn-body > * { max-width: var(--jn-measure); margin-left: auto; margin-right: auto; }
.jn-body p { margin-top: 0; margin-bottom: 1.5em; font-size: 18px; line-height: 1.8; color: var(--text); }
.jn-body > p:first-child::first-letter { float: left; margin: .1em .12em 0 0; font-family: var(--serif); font-size: 4.6em; line-height: .78; color: var(--ink); }
.jn-body h2 { margin-top: 2.4em; margin-bottom: .7em; font-family: var(--serif); font-weight: 400; font-size: clamp(29px, 2.4vw, 36px); line-height: 1.15; color: var(--ink); text-wrap: balance; }
.jn-body h3 { margin-top: 2em; margin-bottom: .55em; font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 1.8vw, 26px); line-height: 1.22; color: var(--ink); text-wrap: balance; }
.jn-body h2 + h3 { margin-top: 1.2em; }
.jn-body a:not(.aino-link):not(.button) { color: var(--ink); border-bottom: 1px solid var(--line-strong); transition: border-color .3s var(--ease); }
.jn-body a:not(.aino-link):not(.button):hover { border-color: var(--ink); }
.jn-body .jn-figure, .jn-body > .wp-block-image { max-width: var(--jn-wide); margin: clamp(48px, 5vw, 80px) auto; }
.jn-figure__img { overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-deep); }
.jn-figure__img img { width: 100%; height: 100%; object-fit: cover; }
.jn-body > .wp-block-image img { width: 100%; height: auto; }
.jn-figure .jn-caption, .jn-body > .wp-block-image figcaption { max-width: var(--jn-measure); margin-inline: auto; }
.jn-body .jn-figure--narrow { max-width: var(--jn-measure); }
.jn-figure--narrow .jn-figure__img { aspect-ratio: 4 / 3; }
.jn-body .jn-quote, .jn-body > blockquote, .jn-body > .wp-block-quote, .jn-body > .wp-block-pullquote {
  max-width: 880px; margin: clamp(48px, 5vw, 80px) auto; padding: clamp(32px, 3.5vw, 48px) 0; border: 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); font-size: inherit;
}
.jn-body .jn-quote p, .jn-body > blockquote p, .jn-body > .wp-block-quote p, .jn-body > .wp-block-pullquote p {
  margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 3vw, 44px); line-height: 1.22; color: var(--ink); text-wrap: balance;
}
.jn-body > ul:not([class]) { list-style: none; padding: 0; margin-top: 0; margin-bottom: 1.8em; border-top: 1px solid var(--line); }
.jn-body > ul:not([class]) li { position: relative; margin: 0; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.7; color: var(--text); list-style: none; }
.jn-body > ul:not([class]) li::before { content: ""; position: absolute; left: 4px; top: calc(14px + .85em); width: 12px; height: 1px; background: var(--ink); }
.jn-body li b, .jn-body li strong { font-weight: 500; color: var(--ink); }
.jn-takeaways { margin-top: 2.4em; margin-bottom: 1em; padding: 26px 0 8px; border-top: 1px solid var(--ink); }
.jn-body .jn-takeaways__title { margin: 0 0 14px; font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; line-height: 1.5; color: var(--ink); }
.jn-takeaways ul { list-style: none; margin: 0; padding: 0; counter-reset: tk; }
.jn-takeaways li { counter-increment: tk; display: grid; grid-template-columns: 40px 1fr; align-items: baseline; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(21px, 1.7vw, 24px); line-height: 1.3; color: var(--ink); list-style: none; }
.jn-takeaways li::before { content: counter(tk, decimal-leading-zero); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--muted); }
.jn-table { width: 100%; border-collapse: collapse; margin-top: 0; margin-bottom: 2em; font-size: 16px; line-height: 1.5; }
.jn-table caption { caption-side: top; text-align: left; padding-bottom: 12px; font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.jn-table th { text-align: left; padding: 12px 16px 12px 0; border: 0; line-height: 1.7; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line-strong); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.jn-table td { padding: 14px 16px 14px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: top; font-size: 16px; }
.jn-table td:first-child { width: 38%; font-family: var(--serif); font-size: 20px; line-height: 1.3; color: var(--ink); }
.jn-faq { margin-top: clamp(56px, 6vw, 88px); padding-top: 8px; border-top: 1px solid var(--ink); }
.jn-faq > h2 { margin-top: 1em; }
.jn-faq__item { padding: 22px 0 6px; border-top: 1px solid var(--line); }
.jn-faq__item h3 { margin-top: 0; font-size: clamp(21px, 1.6vw, 23px); }
.jn-faq__item p { margin-bottom: 1em; }
.jn-dates { list-style: none; padding: 0; margin-top: 8px; margin-bottom: 2em; border-top: 1px solid var(--line-strong); }
.jn-dates li { display: grid; grid-template-columns: 120px 1fr; column-gap: 24px; align-items: baseline; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); list-style: none; }
.jn-dates b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--muted); }
.jn-dates span { font-family: var(--serif); font-size: clamp(22px, 1.8vw, 25px); line-height: 1.25; color: var(--ink); }
.jn-dates small { display: block; margin-top: 2px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.jn-places { max-width: var(--jn-measure); margin: clamp(64px, 7vw, 104px) auto 0; }
.jn-places h2.jn-places__title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding-bottom: 18px; border-bottom: 1px solid var(--ink); font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); line-height: 1.5; }
.jn-places__title a { flex: none; padding: 8px 0; margin: -8px 0; font-size: 11px; letter-spacing: .2em; color: var(--muted); transition: color .3s var(--ease); }
.jn-places__title a:hover { color: var(--ink); }
.jn-places ul { list-style: none; margin: 0; padding: 0; }
.jn-places li { margin: 0; list-style: none; }
.jn-places li a { display: grid; grid-template-columns: 1fr auto 20px; column-gap: 20px; align-items: baseline; padding: 18px 0 19px; border-bottom: 1px solid var(--line); color: inherit; }
.jn-places b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.8vw, 25px); line-height: 1.2; color: var(--ink); }
.jn-places span { font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; }
.jn-places i { font-style: normal; color: var(--ink); text-align: right; transition: transform .4s var(--ease); }
.jn-places li a:hover i { transform: translateX(6px); }
p.jn-back { max-width: var(--jn-measure); margin: 48px auto 0; }
.aino-link--back::after { content: none; }
.aino-link--back::before { content: "\2190"; letter-spacing: 0; }
.jn-article { padding-bottom: var(--section); }
.section.jn-more { padding: var(--section) 0; }
.jn-more__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: clamp(48px, 6vw, 88px); }
.jn-more__head .aino-link { flex: none; white-space: nowrap; }
.jn-more .jn-grid { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Legal pages (Privacy, Charter terms) — Section "jn-legal-head" (eyebrow, H1, meta, <div class="jn-notice">)
   > Section "jn-legal": Row "aino-grid aino-twelve jn-legal__grid" (column "jn-toc" with <ol>, column "jn-legal__body" with
   <div class="jn-legal__section" id="…"> per heading) ---------- */
.section.jn-legal-head { padding: clamp(48px, 6vw, 96px) 0 0 !important; }
.jn-legal-head .col, .jn-legal .col { padding-bottom: 0; }
.aino-display.jn-legal-head__title { font-size: clamp(46px, 5.6vw, 86px); line-height: 1.04; }
.jn-legal-head p.jn-meta { margin-top: 28px; }
.jn-notice { display: flex; gap: 18px; align-items: flex-start; margin-top: clamp(40px, 4.5vw, 56px); padding: 22px 26px; border: 1px solid var(--line-strong); background: var(--bg-alt); }
.jn-notice::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v6M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v6M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jn-notice p { margin: 0 !important; font-size: 15px; line-height: 1.6; color: var(--text); }
.jn-notice b, .jn-notice strong { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.section.jn-legal { padding: clamp(56px, 6vw, 96px) 0 var(--section) !important; }
.jn-legal__grid { align-items: start; }
.row.aino-grid > .col.jn-toc { grid-column: 1 / 4; position: sticky; top: 124px; }
.row.aino-grid > .col.jn-legal__body { grid-column: 5 / 12; max-width: var(--jn-measure); padding: 0; }
.jn-toc .aino-eyebrow { margin-bottom: 14px; }
.col-inner ol.jn-toc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: toc; }
.col-inner ol.jn-toc__list li { counter-increment: toc; margin: 0; border-bottom: 1px solid var(--line); list-style: none; }
.jn-toc__list a { display: flex; gap: 14px; padding: 12px 0; font-size: 14.5px; line-height: 1.45; color: var(--text); transition: color .3s var(--ease); }
.jn-toc__list a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 22px; font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--muted); padding-top: 2px; }
.jn-toc__list a:hover { color: var(--ink); }
.jn-legal__body p.aino-lead { margin: 0 0 48px; color: var(--text); }
.jn-legal__section { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.jn-legal__section:last-child { border-bottom: 0; margin-bottom: 0; }
.jn-legal__body h2 { display: flex; gap: 18px; align-items: baseline; margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.2vw, 33px); line-height: 1.2; color: var(--ink); }
.jn-legal__body h2 span { flex: none; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.jn-legal__body p, .jn-legal__body li { font-size: 16.5px; line-height: 1.75; color: var(--text); }
.jn-legal__body p { margin: 0 0 1em; }
.jn-legal__body ul { margin: 0 0 1em; padding-left: 1.2em; }
.jn-legal__body .col-inner li { margin-bottom: .35em; margin-left: 0; }
.jn-legal__body li::marker { color: var(--faint); }
.jn-legal__body a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.jn-ph { color: var(--muted); font-style: italic; }
.jn-legal__body p.jn-statement { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 21px; line-height: 1.4; color: var(--ink); }

/* ---------- 404 — Flatsome Block "Page not found" (Theme Options > Pages > 404 block): Section "jn-404" > Row "aino-grid aino-twelve jn-404__grid":
   column "jn-404__body" (eyebrow, H1, lead, Buttons + link) + column "jn-404__media" (Image 4:5) ---------- */
.section.jn-404 { min-height: calc(100vh - 92px) !important; padding: 48px 0 var(--section) !important; }
.jn-404 .section-content { width: 100%; }
.jn-404 .col { padding-bottom: 0; }
.jn-404__grid { align-items: center; }
.jn-404__grid > .jn-404__body { grid-column: 1 / 7; }
.jn-404__grid > .jn-404__media { grid-column: 8 / 13; }
.aino-display.jn-404__title { font-size: clamp(46px, 5.6vw, 86px); line-height: 1.04; max-width: 11ch; }
.jn-404__body p.aino-lead { margin: 28px 0 0; color: var(--text); max-width: 46ch; }
.jn-404__body .button.aino-btn { margin: 44px 27px 0 0; }
.jn-404__body p.jn-404__link { display: inline-block; margin: 44px 0 0; vertical-align: middle; position: relative; top: -4px; }
.jn-404__media .img, .jn-404__media .img-inner { width: 100% !important; margin: 0; }
.jn-404__media .img-inner { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-deep); }
.jn-404__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

/* ---------- Journal / legal / 404: tablet ---------- */
@media (max-width: 1100px) {
  .jn-feature { display: block; }
  .jn-feature__media { aspect-ratio: 16 / 9; margin-bottom: 40px; }
  .jn-feature__body { padding: 0; max-width: 680px; }
  .row.aino-grid > .col.jn-toc { grid-column: 1 / 13; position: static; margin-bottom: 56px; max-width: 560px; }
  .row.aino-grid > .col.jn-legal__body { grid-column: 1 / 13; }
  .jn-404__grid > .jn-404__body { grid-column: 1 / 8; }
  .jn-404__grid > .jn-404__media { grid-column: 8 / 13; }
  .jn-404__media .img-inner { aspect-ratio: 3 / 4; }
}
/* ---------- Journal / legal / 404: phone ---------- */
@media (max-width: 760px) {
  .jn-bar { margin-top: 40px; padding: 16px 0; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .jn-chips { flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .jn-chips::-webkit-scrollbar { display: none; }
  .jn-chips button { flex: none; height: 38px; padding: 0 14px; letter-spacing: .18em; }
  p.jn-count { display: none; }
  .section.jn-list { padding-top: 48px !important; }
  .jn-feature__media { aspect-ratio: 4 / 3; margin-bottom: 28px; }
  .aino-display.jn-feature__title { font-size: 38px; }
  .jn-tag { top: 14px; left: 14px; }
  .jn-grid { grid-template-columns: 1fr; row-gap: 64px; margin-top: 72px; padding-top: 56px; }
  .jn-card__media { margin-bottom: 22px; }
  .jn-card h3.jn-card__title { font-size: 30px; }
  .jn-article-head { padding-top: 48px; }
  .aino-display.jn-article__title { font-size: clamp(40px, 11vw, 50px); }
  .jn-article__standfirst { font-size: 22px; margin-top: 22px; }
  .jn-byline { margin-top: 28px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .jn-hero__img { aspect-ratio: 4 / 3; }
  .jn-hero .aino-wrap { padding: 0; }
  .jn-hero .jn-caption { padding: 0 var(--gutter); }
  .jn-body p { font-size: 17px; line-height: 1.75; }
  .jn-body > p:first-child::first-letter { font-size: 4.2em; }
  .jn-body .jn-figure, .jn-body > .wp-block-image { margin: 48px calc(-1 * var(--gutter)); max-width: none; }
  .jn-figure .jn-caption, .jn-body > .wp-block-image figcaption { padding: 0 var(--gutter); }
  .jn-body .jn-figure--narrow { margin-inline: 0; }
  .jn-figure--narrow .jn-caption { padding: 0; }
  .jn-body .jn-quote p, .jn-body > blockquote p, .jn-body > .wp-block-quote p, .jn-body > .wp-block-pullquote p { font-size: 29px; line-height: 1.75; } /* as in the prototype on phones */
  .jn-body h3 { font-size: 23px; }
  .jn-body > ul:not([class]) li { font-size: 16px; }
  .jn-takeaways li { grid-template-columns: 32px 1fr; font-size: 20px; }
  .jn-table, .jn-table td { font-size: 15px; }
  .jn-table td:first-child { font-size: 18px; width: 42%; }
  .jn-dates li { grid-template-columns: 1fr; row-gap: 2px; }
  .jn-dates b { font-size: 19px; }
  .jn-places li a { grid-template-columns: 1fr 20px; row-gap: 4px; }
  .jn-places span { grid-column: 1; grid-row: 2; text-align: left; letter-spacing: .16em; }
  .jn-places i { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .jn-places h2.jn-places__title { flex-direction: column; gap: 8px; }
  .jn-places__title a { padding: 14px 0; margin: -6px 0 -14px; }
  .jn-more__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .section.jn-legal-head { padding-top: 48px !important; }
  .aino-display.jn-legal-head__title { font-size: clamp(42px, 11.5vw, 52px); }
  .jn-notice { padding: 18px; gap: 14px; }
  .jn-legal__body h2 { flex-direction: column; gap: 6px; }
  .section.jn-404 { min-height: 0 !important; padding-top: 48px !important; }
  .jn-404__grid > .jn-404__body, .jn-404__grid > .jn-404__media { grid-column: 1 / 13; }
  .jn-404__grid > .jn-404__media { grid-row: 2; margin-top: 48px; }
  .jn-404__media .img-inner { aspect-ratio: 4 / 3; }
  .aino-display.jn-404__title { font-size: clamp(42px, 11.5vw, 52px); }
  .jn-404__body .button.aino-btn { display: flex; width: 100%; margin: 12px 0 0; }
  .jn-404__body .button.aino-btn:first-of-type { margin-top: 44px; }
  .jn-404__body p.jn-404__link { display: block; margin: 24px 0 0; top: 0; }
}

/* Header: a clear gap between the last menu item and the EN / FR / FI switch (they touched at 1150–1366px) */
@media (min-width: 850px) { #masthead .header-nav-main { margin-right: clamp(20px, 2.4vw, 40px); } }