/* EazyBlue homepage v2. MYC design system (Cormorant Garamond + Inter, light header bar,
   centred hero panel, alternating dark and light grounds) in EazyBlue's colours. */

:root {
  --night: #0f1a2b;        /* dark sections, buttons */
  --night-deep: #0a121f;   /* footer, sky edge */
  --night-2: #1a2c47;      /* boxes and panels on dark */
  --night-3: #22385a;      /* hover on dark boxes */
  --blue: #5889bd;         /* EazyBlue blue, in place of MYC's gold */
  --blue-light: #7d9cca;   /* the blue on dark grounds */
  --blue-ink: #3b6898;     /* the blue as small text on light grounds */
  --white: #ffffff;
  --mist: #f6f6f6;
  --mist-2: #ebeaea;
  --ink: #1d2633;
  --ink-2: #4a5566;
  --on-dark: #ffffff;
  --on-dark-2: #c3cede;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gutter: 80px;
  --content: 1280px;
  --hh: 80px;              /* header height */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --section: 120px;
}

@media (max-width: 1199px) { :root { --gutter: 40px; --section: 96px; } }
@media (max-width: 899px)  { :root { --hh: 68px; --section: 80px; } }
@media (max-width: 599px)  { :root { --gutter: 20px; --hh: 64px; --section: 64px; } }

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.55 var(--sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.dark :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .cleanups :focus-visible { outline-color: #fff; }
::selection { background: var(--blue); color: var(--night); }

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--night); color: #fff; padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

h2 { font: 600 48px/1.15 var(--serif); letter-spacing: -.005em; color: inherit; text-wrap: balance; }
h3 { font: 600 24px/1.2 var(--serif); }

@media (max-width: 599px) { h2 { font-size: 34px; } }

.serif-body { font: 500 20px/1.55 var(--serif); color: var(--ink); max-width: 34em; }
.serif-body + .serif-body { margin-top: 16px; }
.lead { font-size: 18px; line-height: 1.6; max-width: 36em; }
.sec-head { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.sec-sub { margin-top: 12px; font-size: 18px; color: var(--ink-2); }
.dark .sec-sub { color: var(--on-dark-2); }
.sec-sub-left { text-align: left; }
.media-cap { font-size: 14px; color: var(--ink-2); margin-top: 12px; }

.dark { background: var(--night); color: var(--on-dark); }
.mist { background: var(--mist); }

/* ---------- buttons (rectangular, square corners, flat) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 30px; border: 0; border-radius: 0; font: 500 16px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-dark { background: var(--night); color: #fff; }
.btn-dark:hover { background: #24406a; }
.btn-accent { background: var(--blue); color: var(--night); }
.btn-accent:hover { background: var(--blue-light); }
.cleanups .btn-dark:hover { background: var(--night-deep); }
/* MYC's outlined variant, for dark grounds */
.btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .8); } /* taste-skill-ignore: MYC's outlined button on dark grounds (owner brief) */
.btn-outline:hover { background: #fff; color: var(--night); border-color: #fff; }

/* ---------- header: light bar, logo left, links centre-right, one dark button */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--white); transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(15, 26, 43, .1), 0 8px 24px rgba(15, 26, 43, .06); } /* taste-skill-ignore: sticky bar, a real overlay */
.header-in { display: flex; align-items: center; gap: 28px; height: var(--hh); }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--night); text-decoration: none; }
.brand-sphere { width: 38px; height: 38px; flex: none; transition: transform .5s var(--ease); }
.brand:hover .brand-sphere { transform: rotate(-12deg) scale(1.06); }
.brand-word { font: 600 30px/1 var(--serif); letter-spacing: .005em; }
.site-nav ul { display: flex; gap: 22px; }
.site-nav a { position: relative; display: block; padding: 10px 0; font: 500 16px/1.2 var(--sans); color: var(--ink); white-space: nowrap; text-decoration: none; transition: color .2s ease; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } /* taste-skill-ignore: MYC's thin underline on the active link (owner brief) */
.site-nav a:hover { color: var(--blue-ink); }
.site-nav a:hover::after, .site-nav a[aria-current="true"]::after { transform: scaleX(1); }
.header-cta { min-height: 44px; padding: 0 22px; }
.nav-toggle { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 10px; border: 0; background: none; color: var(--night); cursor: pointer; }
.nav-toggle .i-shut { display: none; }
.nav-open .nav-toggle .i-open { display: none; }
.nav-open .nav-toggle .i-shut { display: block; }

/* the full row of links needs about 1300px; below that the links fold into the menu */
@media (max-width: 1299px) {
  .js .nav-toggle { display: block; }
  .js .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); box-shadow: 0 16px 32px rgba(15, 26, 43, .12); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s var(--ease), visibility 0s .25s; } /* taste-skill-ignore: the phone menu, a real overlay */
  .js.nav-open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .25s var(--ease); }
  .js .site-nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; max-width: calc(var(--content) + 2 * var(--gutter)); margin: 0 auto; }
  .js .site-nav a { padding: 14px 0; font-size: 17px; }
  .js .site-nav a::after { bottom: 8px; }
  .site-header .wrap { position: static; }
  html:not(.js) .header-in { flex-wrap: wrap; height: auto; padding-block: 12px; }
  html:not(.js) .site-nav { order: 3; width: 100%; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; gap: 4px 18px; }
}
@media (max-width: 599px) {
  .brand-word { font-size: 26px; }
  .brand-sphere { width: 32px; height: 32px; }
  .header-in { gap: 12px; }
  .header-cta { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .brand-word { font-size: 24px; }
}
@media (max-width: 359px) { .header-cta { display: none; } }

/* ---------- intro: "Sea the World with Us" (script only, once per session) */
/* The layer is flat night blue (no picture), so it paints whole on the first frame. The words
   stay hidden until Cormorant Garamond has loaded (main.js), so they never show in a fallback
   face. On the way out the words fade first, then the layer; nothing grows across the h1. */
.intro { display: none; }
.intro-on .intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--night); cursor: pointer; transition: opacity .45s ease .15s; animation: intro-failsafe .3s ease 2.8s forwards; }
.intro-inner { display: grid; justify-items: center; gap: 22px; padding: 24px; text-align: center; }
.intro-mark { display: block; transition: transform .6s var(--ease), opacity .4s ease; }
.intro-sphere { width: 76px; height: 76px; animation: intro-sphere .8s var(--ease) both; }
.intro-words { font: 600 clamp(36px, 5.4vw, 68px)/1.08 var(--serif); letter-spacing: .015em; color: #fff; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.intro-ready .intro-words { opacity: 1; transform: none; }
.intro-out .intro-words { opacity: 0; transform: none; transition: opacity .25s ease; }
.intro-out .intro-mark { opacity: 0; transform: scale(1.12); }
.intro-out .intro { opacity: 0; }
.intro-fast .intro { transition: opacity .22s ease; }
.intro-fast .intro-words, .intro-fast .intro-mark { transition-duration: .15s; }
@keyframes intro-sphere { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .intro-sphere { animation: none; }
  .intro-words, .intro-mark { transition: none; transform: none; }
  .intro-out .intro-words, .intro-out .intro-mark { transform: none; transition: none; }
  .intro-on .intro, .intro-fast .intro { transition: opacity .08s linear; }
}

/* ---------- hero: the global map */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: calc(100vh - var(--hh)); min-height: calc(100svh - var(--hh)); overflow: hidden; background: #0b1424; color: var(--on-dark); }
.hero-sky { position: absolute; inset: -4%; z-index: -2; background: #0b1424 url(../img/sky-night-2400.jpg) center 42% / cover no-repeat; }
@media (max-width: 800px) { .hero-sky { background-image: url(../img/sky-night-1280.jpg); } }
@media (prefers-reduced-motion: no-preference) { .hero-sky { animation: sky-drift 70s ease-in-out infinite alternate; } }
@keyframes sky-drift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.07) translate3d(-1.2%, .8%, 0); } }

.hero-top { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-top: 28px; pointer-events: none; }
.hero-top > * { pointer-events: auto; }
.chip { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 16px; background: rgba(13, 23, 39, .9); color: #e9eef6; }
.chip-stat { max-width: 452px; }
.chip-dot { flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--blue-light); border: 4px solid #2c4467; }
.chip-num { flex: none; font: 600 30px/1 var(--serif); font-variant-numeric: lining-nums; color: var(--blue-light); white-space: nowrap; }
.chip-text { font-size: 14px; line-height: 1.4; }
.chip-bases { max-width: 452px; padding-left: 18px; }
.bases-line { font-size: 14px; line-height: 1.55; }
.bases-line .chip-num { margin-right: 6px; font-size: 30px; vertical-align: -4px; }
/* the legend lives in the line: a filled dot before "live", a ring before "opening" */
.bases-line .lg { display: inline-block; margin: 0 6px 0 2px; vertical-align: 0; }
.lg-word { white-space: nowrap; }
.city { display: inline; padding: 2px 0; border: 0; background: none; font: 500 14px/1.3 var(--sans); color: #fff; text-decoration: underline; text-decoration-color: rgba(125, 156, 202, .7); text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; transition: color .2s ease, text-decoration-color .2s ease; }
.city:hover, .city.is-active { color: var(--blue-light); text-decoration-color: var(--blue-light); text-decoration-thickness: 2px; }
.lg { width: 10px; height: 10px; border-radius: 50%; }
.lg-live { background: var(--blue-light); }
.lg-open { border: 2px solid var(--blue-light); }

/* the map: equirectangular, lon -180..180, lat 84..-58 (aspect 2.535).
   It is sized from the room above the hero panel (--panel-h) and lets at most a fifth of
   its height sit under the panel: width = room * 2.535 / 0.8 = room * 3.17. */
.hero { --panel-h: 340px; --map-top: 24px; }
.map-window { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.map { --map-w: min(1400px, 86vw, (100vh - var(--hh) - var(--panel-h) - var(--map-top)) * 3.17); position: absolute; left: 50%; top: var(--map-top); width: max(var(--map-w), 720px); aspect-ratio: 1440 / 568; transform: translateX(-50%); }
.edge-tag { display: none; }
.map-land { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .36; }

.pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; pointer-events: auto; }
.pin.is-core { z-index: 2; }
.pin:hover, .pin:focus-within, .pin.is-active { z-index: 3; }
.pin-btn { position: absolute; top: 0; left: -14px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; transform: translateY(-50%); border: 0; background: none; color: #fff; cursor: pointer; white-space: nowrap; }
.pin[data-side="left"] .pin-btn { left: auto; right: -14px; flex-direction: row-reverse; }
.pin[data-side="above"] .pin-btn { top: auto; bottom: -11px; left: 0; flex-direction: column-reverse; gap: 6px; transform: translateX(-50%); }
.pin-dot { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-light); pointer-events: none; transition: transform .25s var(--ease), background-color .2s ease; }
.is-soon .pin-dot { background: transparent; border: 2px solid var(--blue-light); }
.is-core .pin-dot { background: #fff; border: 3px solid var(--blue-light); width: 14px; height: 14px; }
.pin[data-base="athens"] .pin-dot { width: 10px; height: 10px; }
/* Mykonos' button starts at its own dot, so the Athens dot just west of it stays reachable */
.pin[data-base="mykonos"] .pin-btn { left: -7px; padding-left: 0; }
.pin-label { padding: 4px 9px; background: rgba(10, 18, 31, .78); font: 500 14px/1.2 var(--sans); letter-spacing: .01em; transition: background-color .2s ease, color .2s ease; }
.pin-btn:hover .pin-label, .pin.is-active .pin-label { background: var(--blue); color: var(--night); }
.pin-btn:hover .pin-dot, .pin.is-active .pin-dot { transform: scale(1.25); }
.pin-btn:focus-visible { outline-offset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .is-live .pin-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(125, 156, 202, .5); transform: scale(.3); opacity: 0; pointer-events: none; animation: pulse 2.8s ease-out infinite; }
  .pin[data-base="athens"] .pin-dot::after { animation-delay: 1.4s; }
  .js .pin { opacity: 0; animation: pin-failsafe 0s 3.2s forwards; }
  .hero-live .pin { animation: pin-in .7s var(--ease) both; }
  .hero-live .pin[data-base="mykonos"] { animation-delay: .15s; }
  .hero-live .pin[data-base="athens"] { animation-delay: .3s; }
  .hero-live .pin[data-base="dubai"] { animation-delay: .45s; }
  .hero-live .pin[data-base="ibiza"] { animation-delay: .6s; }
  .hero-live .pin[data-base="miami"] { animation-delay: .75s; }
  .hero-live .map-land { animation: land-in 1.2s ease-out both; }
}
@keyframes pulse { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes pin-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes pin-failsafe { to { opacity: 1; } }
@keyframes land-in { from { opacity: 0; transform: scale(1.025); } to { opacity: .36; transform: none; } }

.base-card { position: absolute; z-index: 5; width: 290px; padding: 16px 18px 18px; background: var(--night-2); color: #fff; pointer-events: none; }
.base-card[hidden] { display: none; }
.bc-city { font: 600 24px/1.1 var(--serif); }
.bc-status { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--blue-light); }
.bc-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--blue-light); }
.base-card.is-live .bc-dot { background: var(--blue-light); }
.bc-line { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #e3e9f2; }
@media (prefers-reduced-motion: no-preference) { .base-card:not([hidden]) { animation: card-in .25s var(--ease); } }
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the five bases as plain text under the hero: read by every visitor and by search engines */
.bases-band { background: var(--night); color: var(--on-dark-2); }
.bases-list { display: grid; grid-template-columns: 1.45fr 1.25fr 1fr .75fr .75fr; gap: 20px 36px; padding-block: 36px 40px; }
.bases-list li { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 6px; }
.bl-city { font: 600 24px/1.2 var(--serif); color: #fff; }
.bl-status { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--blue-light); }
.bl-status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--blue-light); }
.bases-list .is-live .bl-status::before { background: var(--blue-light); }
.bl-line { font-size: 14px; line-height: 1.5; color: var(--on-dark-2); }
@media (max-width: 999px) { .bases-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; } }
@media (max-width: 599px) {
  .bases-list { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 28px 32px; }
  .bases-list li { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .bl-line { grid-column: 1 / -1; }
}

/* the MYC hero panel */
.hero-panel { position: relative; z-index: 2; width: min(1080px, 100% - 2 * var(--gutter)); margin: auto auto 0; padding: 30px 56px 32px; background: rgba(12, 22, 38, .86); text-align: center; }
.hero h1 { font-weight: 600; }
.h1-a { display: block; font: 600 clamp(30px, 4.6vw, 56px)/1.1 var(--serif); letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.h1-b { display: block; margin-top: 10px; font: 500 clamp(18px, 1.7vw, 24px)/1.3 var(--serif); letter-spacing: .3em; text-transform: uppercase; color: var(--blue-light); }
.h1-c { display: block; margin-top: 12px; font: 500 14px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.hero-lead { max-width: 780px; margin: 12px auto 20px; font-size: 18px; line-height: 1.6; color: #e6ecf4; text-wrap: balance; }

@media (min-width: 900px) and (max-width: 1199px) {
  .hero { --map-top: 76px; }
  .chip-stat, .chip-bases { max-width: 420px; }
}

/* hero below 900px: one column with the map first, in a window cropped to Miami - Dubai */
@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero-top { display: contents; }
  .chip { margin-inline: var(--gutter); }
  .map-window { order: 1; position: relative; inset: auto; --deg: calc(100vw / 170); height: calc(var(--deg) * 74); margin-top: 4px; overflow: hidden; }
  .map { --map-w: calc(var(--deg) * 360); left: calc(var(--deg) * -80); top: calc(var(--deg) * -10); width: var(--map-w); transform: none; }
  .chip-stat { order: 2; max-width: none; margin-top: 2px; }
  .chip-bases { order: 3; max-width: none; margin-top: 8px; }
  .hero-panel { order: 5; width: auto; margin: 20px 0 0; padding: 36px var(--gutter) 40px; }
  .map-window { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); } /* taste-skill-ignore: a mask that softens the cropped map edge, not a fill */
  .pin[data-base="miami"] .pin-btn { left: -14px; right: auto; flex-direction: row; }
  .pin[data-base="dubai"] .pin-btn { left: auto; right: -14px; top: 0; flex-direction: column; align-items: flex-end; gap: 6px; transform: translateY(-12px); }
}
/* phones: the window frames the Mediterranean to the Gulf (lon -10..60, lat 52..18),
   so Athens and Mykonos stand apart; Miami, off to the west, is a tag on the left edge */
@media (max-width: 599px) {
  .chip-stat { margin-top: 0; }
  .hero-panel { padding: 28px var(--gutter) 32px; }
  .h1-c { margin-top: 12px; }
  .hero-lead { margin: 12px auto 20px; }
  .map-window { --deg: calc(100vw / 70); height: calc(var(--deg) * 34); -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); } /* taste-skill-ignore: a mask that softens the cropped map edge, not a fill */
  .map { left: calc(var(--deg) * -170); top: calc(var(--deg) * -32); }
  .pin[data-base="miami"] { display: none; }
  .edge-tag { position: absolute; z-index: 2; left: 8px; top: calc(var(--deg) * 26.24); display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 6px; transform: translateY(-50%); border: 0; background: rgba(10, 18, 31, .78); color: #fff; font: 500 13px/1.2 var(--sans); white-space: nowrap; cursor: pointer; pointer-events: auto; transition: background-color .2s ease, color .2s ease; }
  .edge-tag svg { flex: none; color: var(--blue-light); }
  .edge-note { color: var(--on-dark-2); }
  .edge-tag:hover, .edge-tag.is-active { background: var(--blue); color: var(--night); }
  .edge-tag:hover svg, .edge-tag.is-active svg, .edge-tag:hover .edge-note, .edge-tag.is-active .edge-note { color: var(--night); }
  .pin-label { padding: 3px 7px; font-size: 13px; }
  .pin-btn { left: -10px; padding: 4px; gap: 6px; }
  .pin[data-side="left"] .pin-btn { right: -10px; }
  .pin[data-base="ibiza"] .pin-btn { left: -10px; right: auto; flex-direction: row; }
  .pin[data-base="dubai"] .pin-btn { left: auto; right: -10px; top: 0; flex-direction: row-reverse; align-items: center; gap: 6px; transform: translateY(-50%); }
  .pin[data-base="athens"] .pin-btn { left: 0; bottom: -9px; }
  .chip { padding: 12px 14px; }
  .chip-num { font-size: 24px; }
  .bases-line .chip-num { font-size: 24px; }
  .h1-a { font-size: 30px; }
  .h1-b { font-size: 18px; letter-spacing: .22em; }
  .h1-c .sep { display: none; }
  .h1-c { line-height: 1.6; }
  .h1-c .ln { display: block; }
  .hero-lead { font-size: 16px; line-height: 1.55; }
  .hero-panel .btn { width: 100%; }
}

/* ---------- ecosystem: MYC "Our mission" split */
.mission { display: grid; grid-template-columns: 1fr 1fr; background: var(--mist); }
.mission-media { position: relative; min-height: 620px; background: var(--night); }
.mission-video, .mission-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mission-media .media-cap { position: absolute; left: 24px; bottom: 24px; margin: 0; padding: 8px 12px; background: rgba(10, 18, 31, .78); color: #e6ecf4; font-size: 14px; }
/* the film control is MYC's outlined button, on a dark fill so it reads over any frame */
.video-toggle { position: absolute; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; background: rgba(10, 18, 31, .7); color: #fff; font: 500 14px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.video-toggle:hover { background: #fff; color: var(--night); }
.video-toggle[hidden] { display: none; }
.video-toggle .i-play { display: none; }
.video-toggle.is-paused .i-play { display: block; }
.video-toggle.is-paused .i-pause { display: none; }
.mission-text { align-self: center; padding: 112px var(--gutter) 112px 72px; max-width: 700px; }
.mission-text h2 { margin-bottom: 24px; }
.four-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; margin-top: 36px; }
.four-ways a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; font-weight: 500; font-size: 16px; color: var(--ink); text-decoration: none; }
.four-ways a svg { color: var(--blue); transition: transform .3s var(--ease); }
.four-ways a:hover { color: var(--blue-ink); }
.four-ways a:hover svg { transform: translateX(5px); }

@media (max-width: 999px) {
  .mission { grid-template-columns: 1fr; }
  .mission-media { min-height: 0; aspect-ratio: 16 / 10; }
  .mission-text { padding: var(--section) var(--gutter); max-width: none; }
}
@media (max-width: 599px) {
  .mission-media .media-cap { left: 12px; bottom: 12px; right: auto; max-width: calc(100% - 160px); }
  .video-toggle { right: 12px; bottom: 12px; }
  .four-ways { grid-template-columns: 1fr; }
}

/* ---------- tourism technology */
.tech { padding-block: var(--section); }
.tech-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.tech-intro h2 { margin-bottom: 20px; }
.tech .lead { color: var(--on-dark); }
.big-stat { display: flex; align-items: center; gap: 20px; margin-top: 36px; padding: 22px 26px; background: var(--night-2); max-width: 560px; }
.big-stat-num { flex: none; font: 600 56px/1 var(--serif); font-variant-numeric: lining-nums; color: var(--blue-light); }
.big-stat-text { font-size: 16px; line-height: 1.5; color: var(--on-dark); }
.quiet-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 16px; color: var(--blue-light); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.quiet-link svg { transition: transform .3s var(--ease); }
.quiet-link:hover { color: #fff; }
.quiet-link:hover svg { transform: translateX(4px); }

/* the booking chat: an interface fragment (data-ui) */
.chat { justify-self: end; width: 100%; max-width: 460px; padding: 0 0 14px; background: #101f33; font-size: 14px; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #182a44; }
.chat-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: var(--night); font: 600 14px/1 var(--serif); letter-spacing: .02em; }
.chat-title { font-weight: 600; font-size: 16px; color: #fff; }
.chat-sub { font-size: 12px; color: var(--on-dark-2); }
.chat-log { display: grid; gap: 12px; padding: 18px 18px 6px; }
.msg { position: relative; max-width: 84%; padding: 10px 14px 12px; background: #1d3352; color: #eef2f8; }
.msg-ops { justify-self: end; background: var(--blue); color: var(--night); }
.msg-role { font-size: 12px; font-weight: 600; color: var(--blue-light); margin-bottom: 2px; }
.msg-ops .msg-role { color: #060d18; }
.msg-text { font-size: 16px; line-height: 1.45; }
.chat-cap { padding: 6px 18px 0; font-size: 12px; color: var(--on-dark-2); }

.checks { display: grid; gap: 20px; }
.checks-3 { grid-template-columns: repeat(3, 1fr); margin-top: 72px; }
.check-box { --check-ink: var(--night-2); display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; row-gap: 8px; align-content: start; padding: 28px 28px 30px; background: var(--night-2); transition: background-color .25s ease, transform .35s var(--ease); }
.check-box:hover { background: var(--night-3); transform: translateY(-3px); }
.check-ico { grid-row: 1; color: var(--blue-light); margin-top: 3px; }
.check-box h3 { grid-column: 2; color: #fff; }
.check-box p { grid-column: 2; font-size: 16px; line-height: 1.55; color: var(--on-dark-2); }

@media (max-width: 999px) {
  .tech-top { grid-template-columns: 1fr; gap: 48px; }
  .chat { justify-self: start; }
  .checks-3 { grid-template-columns: 1fr; margin-top: 48px; }
}
@media (max-width: 599px) {
  .big-stat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; }
  .big-stat-num { font-size: 48px; }
  .check-box { padding: 22px 20px 24px; }
}

/* ---------- charter management: MYC card grid, light cards on the dark ground */
.charter { padding-block: var(--section); }
.charter.dark { background: var(--night-2); } /* a tone step from the tech section above */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 32px 44px; background: var(--mist); color: var(--ink); text-align: center; transition: transform .35s var(--ease), background-color .25s ease; }
.card:not(.card-photo):hover { background: #fff; }
.card:hover { transform: translateY(-4px); }
.card-ico { width: 36px; height: 36px; color: var(--blue); margin-bottom: 18px; transition: transform .4s var(--ease); }
.card:hover .card-ico { transform: translateY(-3px); }
.card h3 { margin-bottom: 10px; color: var(--night); }
.card p { font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 30em; }
.card-photo { padding: 0; overflow: hidden; min-height: 280px; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card-photo:hover { transform: none; }
.card-photo:hover img { transform: scale(1.04); }
@media (max-width: 999px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) {
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 32px 24px 36px; }
  .card-photo { min-height: 0; padding: 0; aspect-ratio: 16 / 10; }
}

/* ---------- yacht management: light split, the blue-hour photograph on the right */
.ym { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); background: var(--white); color: var(--ink); }
.ym-text { padding: var(--section) 64px var(--section) max(var(--gutter), calc((100vw - var(--content)) / 2)); }
.ym-head { margin-bottom: 40px; }
.ym-head h2 { color: var(--night); }
.checks-2 { grid-template-columns: 1fr 1fr; gap: 16px; }
.checks-2 .check-box { padding: 24px 22px 26px; }
.ym .check-box { --check-ink: #fff; background: var(--mist-2); }
.ym .check-box:hover { background: #e1e3e6; }
.ym .check-ico { color: var(--blue-ink); }
.ym .check-box h3 { color: var(--night); }
.ym .check-box p { color: var(--ink); }
.ym-media { position: relative; min-height: 560px; overflow: hidden; }
.ym-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
@media (max-width: 999px) {
  .ym { grid-template-columns: 1fr; }
  .ym-text { padding: var(--section) var(--gutter); }
  .ym-media { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
}
@media (max-width: 599px) {
  .checks-2 { grid-template-columns: 1fr; }
  .ym-media { aspect-ratio: 4 / 5; }
}

/* ---------- seaside experiences */
.seaside { padding-block: var(--section); }
.sea-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.sea-text h2 { margin-bottom: 0; }
.sea-text .sec-sub { margin-bottom: 24px; }
.sea-hero { overflow: hidden; }
.sea-hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.4s var(--ease); }
.sea-hero:hover img { transform: scale(1.03); }
.sea-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 64px; }
.sea-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 18px; transition: transform .6s var(--ease); }
.sea-item:hover img { transform: translateY(-4px); }
.sea-item h3 { margin-bottom: 8px; color: var(--night); }
.sea-item p { font-size: 16px; line-height: 1.6; }
@media (max-width: 999px) {
  .sea-top { grid-template-columns: 1fr; gap: 40px; }
  .sea-items { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 599px) { .sea-items { grid-template-columns: 1fr; } }

/* ---------- the fleet on MYC */
.fleet { padding-block: var(--section); }
.fleet-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.fleet-text h2 { margin-bottom: 16px; }
.fleet-note { margin-top: 14px; font-size: 16px; color: var(--on-dark-2); max-width: 30em; }
.fleet-media { margin-top: 36px; overflow: hidden; }
.fleet-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fleet-table-wrap { background: var(--night-2); padding: 8px 32px 12px; }
.fleet-table { width: 100%; border-collapse: collapse; }
.fleet-table th, .fleet-table td { padding: 17px 0; text-align: left; border-bottom: 1px solid rgba(195, 206, 222, .16); }
.fleet-table tbody tr:last-child th, .fleet-table tbody tr:last-child td { border-bottom: 0; }
.fleet-table thead th { padding-block: 18px 12px; font: 500 14px/1.2 var(--sans); color: var(--blue-light); }
.fleet-table tbody th { font: 600 24px/1.2 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: #fff; }
.fleet-table td { font-size: 16px; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.fleet-table td:nth-child(2) { width: 22%; }
.fleet-table td:nth-child(3) { width: 24%; }
.fleet-table tbody tr { transition: background-color .2s ease; }
.fleet-table tbody tr:hover th { color: var(--blue-light); }
@media (max-width: 999px) { .fleet-in { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 599px) {
  .fleet-table-wrap { padding: 4px 18px 8px; }
  .fleet-table tbody th { font-size: 20px; }
}

/* ---------- beach clean-ups: the EazyBlue blue band */
.cleanups { padding-block: var(--section); background: var(--blue); color: #fff; }
.cleanups .sec-head { margin-bottom: 48px; }
.clean-body { margin-top: 18px; font: 500 24px/1.45 var(--serif); color: #fff; }
.islands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.islands figure { overflow: hidden; }
.islands img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--ease); }
.islands figure:hover img { transform: scale(1.05); }
.islands figcaption { margin-top: 12px; font: 600 24px/1.2 var(--serif); text-align: center; color: #fff; }
.clean-cta { margin-top: 48px; text-align: center; }
@media (max-width: 999px) { .islands { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .islands { gap: 16px 12px; } }

/* ---------- our platform and partners: one slim band */
.partners { padding-block: 56px; background: var(--white); }
.partners-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 48px; align-items: center; }
.partners h2 { color: var(--night); }
.partner-list { display: grid; grid-template-columns: 1fr 1fr; }
.partner { display: flex; align-items: center; gap: 22px; padding: 6px 0 6px 36px; }
.partner + .partner { border-left: 1px solid var(--mist-2); } /* taste-skill-ignore: the thin rule between the two names (design review) */
.partner-logo { flex: none; width: 56px; height: 56px; border-radius: 12px; }
.partner-logo-myc { width: 84px; height: auto; border-radius: 0; }
.partner-name { font: 600 24px/1.2 var(--serif); color: var(--night); }
.partner-what { margin-top: 4px; font-size: 16px; color: var(--ink-2); }
@media (max-width: 999px) {
  .partners-in { grid-template-columns: 1fr; gap: 28px; }
  .partner:first-child { padding-left: 0; }
}
@media (max-width: 599px) {
  .partners { padding-block: 48px; }
  .partner-list { grid-template-columns: 1fr; }
  .partner, .partner:first-child { padding: 20px 0; }
  .partner + .partner { border-left: 0; border-top: 1px solid var(--mist-2); } /* taste-skill-ignore: the thin rule between the two names (design review) */
  .partner-logo-myc { width: 80px; }
}

/* ---------- closing statement on the night sky */
.purpose { position: relative; isolation: isolate; padding-block: 150px; background: #0b1424; color: #fff; text-align: center; overflow: hidden; }
.purpose-sky { position: absolute; inset: 0; z-index: -1; background: #0b1424 url(../img/sky-night-2400.jpg) center 70% / cover no-repeat; }
@media (max-width: 800px) { .purpose-sky { background-image: url(../img/sky-night-1280.jpg); } }
.purpose-in { display: grid; justify-items: center; gap: 28px; }
.accent-rule { width: 56px; height: 2px; background: var(--blue-light); }
.purpose-line { max-width: 900px; font: 600 48px/1.2 var(--serif); }
@media (max-width: 899px) { .purpose { padding-block: 110px; } }
@media (max-width: 599px) { .purpose { padding-block: 88px; } .purpose-line { font-size: 30px; } }

/* ---------- contact: MYC "Your margin." panel beside a photograph */
.contact { padding-block: var(--section); background: var(--white); }
.contact-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: stretch; }
.contact-panel { padding: 56px 56px 60px; background: var(--mist); }
.contact-body { margin-top: 16px; font-size: 18px; max-width: 32em; }
.contact-lines { display: grid; gap: 12px; margin: 28px 0 32px; font-size: 16px; }
.contact-lines li { display: flex; align-items: center; gap: 12px; }
.contact-lines svg { flex: none; color: var(--blue); }
.contact-lines a { color: var(--night); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(88, 137, 189, .5); text-underline-offset: 4px; }
.contact-lines a:hover { color: var(--blue-ink); text-decoration-color: var(--blue); }
.contact-media { overflow: hidden; min-height: 360px; }
.contact-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) {
  .contact-in { grid-template-columns: 1fr; }
  .contact-media { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 599px) { .contact-panel { padding: 36px 24px 40px; } }

/* ---------- footer */
.site-footer { padding: 80px 0 36px; background: var(--night-deep); color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.5fr 1fr; gap: 48px; }
.foot-logo { display: flex; align-items: center; gap: 10px; }
.foot-logo .brand-word { font-size: 30px; }
.foot-line { margin-top: 16px; max-width: 24em; font-size: 16px; line-height: 1.6; color: var(--on-dark-2); }
.foot-title { margin-bottom: 18px; font: 600 14px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light); }
.foot-col ul { display: grid; gap: 12px; font-size: 16px; }
.foot-col a { color: #fff; text-decoration: none; transition: color .2s ease; }
.foot-col a:hover { color: var(--blue-light); }
.foot-contact li { display: flex; gap: 12px; align-items: flex-start; color: var(--on-dark-2); line-height: 1.5; }
.foot-contact b { color: #fff; font-weight: 600; }
.foot-contact svg { flex: none; margin-top: 3px; color: var(--blue-light); }
.social { display: inline-flex; align-items: center; gap: 12px; }
.social svg, .social-myc { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 7px; background: var(--night-2); color: #fff; transition: background-color .2s ease; }
.social-myc { padding: 0; }
.social-myc img { width: 22px; height: auto; }
.social:hover svg, .social:hover .social-myc { background: var(--blue); color: var(--night); }
.foot-legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(195, 206, 222, .18); font-size: 14px; line-height: 1.6; color: #aab6c8; } /* taste-skill-ignore: MYC footer rule above the legal line (owner brief) */
.foot-legal a { color: #dce4ef; }
.foot-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 48px; margin-top: 10px; }
@media (max-width: 699px) { .foot-credits { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 999px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .foot-grid { grid-template-columns: 1fr; gap: 36px; } .site-footer { padding-top: 64px; } }

/* ---------- section entrances (script and motion only; content is visible without them) */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on [data-reveal] { transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
  .reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(26px); }
  /* full-bleed media only fade in, so no strip of ground opens along their edge */
  .reveal-on .mission-media[data-reveal]:not(.is-in), .reveal-on .ym-media[data-reveal]:not(.is-in) { transform: none; }
  .reveal-on .check-box[data-reveal].is-in:hover, .reveal-on .card[data-reveal].is-in:hover { transition-delay: 0ms; }
  .hero-live .hero-panel { animation: rise .9s var(--ease) .1s both; }
  .hero-live .chip { animation: rise .8s var(--ease) both; }
  .hero-live .chip-bases { animation-delay: .12s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- fleet grouped by base (real MYC data) */
.fleet-base { border-bottom: 1px solid rgba(195, 206, 222, .16); }
.fleet-base:last-child { border-bottom: 0; }
.fleet-base summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
.fleet-base summary::-webkit-details-marker { display: none; }
.fleet-base summary::after { content: "+"; font: 400 22px/1 var(--sans); color: var(--blue-light); margin-left: 12px; }
.fleet-base[open] summary::after { content: "–"; }
.fleet-base summary:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 4px; }
.fb-name { font: 600 26px/1.2 var(--serif); color: #fff; flex: 1; }
.fb-count { font-size: 15px; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.fleet-base .fleet-table { margin-bottom: 14px; }
.fleet-base .fleet-table tbody th { font-size: 20px; }
.fleet-cap { margin-top: 10px; font-size: 14px; color: var(--on-dark-2); }