/* ==========================================================================
   Laslo & Co. — design system modelled on camperandnicholsons.com
   Black / white, one geometric sans (Figtree, in place of Cera Pro),
   fluid type scale, 12-column grid with 10px gutters, underline buttons.
   ========================================================================== */

:root {
  --black: #000;
  --white: #fff;
  --light-grey: #DEDEDE;
  --off-white: #F4F2F0;
  --grey: #9CA3AF;
  --mid-grey: #606060;
  --dark-grey: #323232;
  --gold: #B9A477;
  --sans: "Red Hat Display", "Cera Pro", "Figtree", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --header-height: 56px;
  --pad: 20px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  /* type scale (C&N values) */
  --h80: clamp(4.445rem, 5rem + 0.4vw, 6rem);
  --h40: clamp(2rem, 2rem + 0.2vw, 4rem);
  --h28: clamp(1.75rem, 1.5rem + 0.25vw, 3rem);
  --h22: clamp(1.6rem, 1.35rem + 0.2vw, 2.25rem);
  --h20: clamp(1.4rem, 1.1rem + 0.5vw, 2rem);
  --h18: clamp(1rem, 1.05rem + 0.25vw, 1.875rem);
  --h10: clamp(0.625rem, 0.75rem + 0.164vw, 1rem);
  --body-16: clamp(1rem, 0.5rem + 0.35vw, 1.5rem);
  --body-14: clamp(0.9rem, 0.75rem + 0.5vw, 1.375rem);
  --body-13: clamp(0.85rem, 0.65rem + 0.35vw, 1.35rem);
  --body-12: clamp(0.8rem, 0.5rem + 0.25vw, 1.35rem);
}
@media (min-width: 641px) {
  :root { --header-height: 76px; --h40: clamp(2rem, 2rem + 0.2vw, 4rem); --h28: clamp(1.65rem, 1.25rem + 0.2vw, 2.5rem); --h22: clamp(1.5rem, 1.15rem + 0.2vw, 2.25rem); --h20: clamp(1.15rem, 1.1rem + 0.2vw, 2rem); --h18: clamp(1rem, 1.05rem + 0.01vw, 1.75rem); --body-16: 1rem; --body-14: 0.875rem; --body-13: clamp(0.8125rem, 0.65rem + 0.15vw, 1.15rem); --body-12: clamp(0.75rem, 0.55rem + 0.15vw, 1.35rem); }
}
@media (min-width: 1281px) {
  :root { --h40: clamp(2.25rem, 2rem + 0.4vw, 4.147rem); --h28: clamp(1.65rem, 1.5rem + 0.4vw, 3rem); --h22: clamp(1.5rem, 1.175rem + 0.3vw, 2.25rem); --h20: clamp(1.25rem, 1.15rem + 0.15vw, 1.875rem); --h18: clamp(1rem, 1rem + 0.125vw, 1.875rem); --body-16: clamp(1rem, 0.875rem + 0.25vw, 1.03rem); --body-14: clamp(0.875rem, 0.75rem + 0.175vw, 1.48rem); --body-13: clamp(0.8125rem, 0.625rem + 0.23vw, 1.275rem); --body-12: clamp(0.75rem, 0.65rem + 0.175vw, 1.25rem); }
}
@media (min-width: 1440px) { :root { --pad: 40px; } }
@media (min-width: 1920px) {
  :root { --h40: clamp(2.15rem, 2.15rem + 0.65vw, 4rem); --h28: clamp(1.65rem, 1.55rem + 0.65vw, 3rem); --h22: clamp(1.45rem, 1.35rem + 0.5vw, 2.29rem); --h20: clamp(1.35rem, 1.15rem + 0.35vw, 1.85rem); --h18: clamp(1rem, 1rem + 0.25vw, 1.5rem); --body-16: clamp(1rem, 1rem + 0.15vw, 1.75rem); --body-14: clamp(0.875rem, 0.7rem + 0.275vw, 1.58rem); --body-13: clamp(0.8125rem, 0.8125rem + 0.2vw, 1.375rem); --body-12: clamp(0.75rem, 0.75rem + 0.175vw, 1.35rem); }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--black); color: var(--white); font-family: var(--sans); font-size: var(--body-14); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; }
main { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--white); color: var(--black); }
.bg-white ::selection { background: var(--black); color: var(--white); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 1000; background: var(--white); color: var(--black); padding: 10px 16px; }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.body-12 { font-size: var(--body-12); line-height: 1.6; }
.body-13 { font-size: var(--body-13); line-height: 1.6; }
.body-14 { font-size: var(--body-14); line-height: 1.6; }
.body-16 { font-size: var(--body-16); line-height: 1.6; letter-spacing: -0.01em; }
.h10 { font-size: var(--h10); line-height: 1.4; }
.h18 { font-size: var(--h18); line-height: 1.5; letter-spacing: -0.02em; }
.h20 { font-size: var(--h20); line-height: 1.4; letter-spacing: 0.02em; }
.h22 { font-size: var(--h22); line-height: 1.3; }
.h28 { font-size: var(--h28); line-height: 1.25; }
.h40 { font-size: var(--h40); line-height: 1.2; }
.h80 { font-size: var(--h80); line-height: 1; }
.all-caps { text-transform: uppercase; font-weight: 500; }
.body-12.all-caps, .h10.all-caps { letter-spacing: 0.06em; }
.body-13.all-caps, .body-14.all-caps { letter-spacing: 0.04em; }
.body-16.all-caps { letter-spacing: 0.03em; line-height: 1.4; }
.h18.all-caps, .h20.all-caps, .h22.all-caps, .h28.all-caps { letter-spacing: 0.02em; line-height: 1.25; }
.h40.all-caps, .h80.all-caps { letter-spacing: 0; line-height: 1.15; }
.font-medium { font-weight: 500; }
.font-light { font-weight: 300; }
.text-grey { color: var(--grey); }
.text-mid { color: var(--mid-grey); }
.text-light { color: rgba(255,255,255,.7); }
.measure { max-width: 48ch; }
.eyebrow { display: block; margin-bottom: 20px; }
.rich p + p { margin-top: 1em; }

/* ---------- layout ---------- */
.container { width: 100%; padding-left: var(--pad); padding-right: var(--pad); }
.site-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 641px) { .site-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.col-2 { grid-column: span 2; }
@media (min-width: 641px) { .s-col-3 { grid-column: span 3; } .s-col-4 { grid-column: span 4; } .s-col-5 { grid-column: span 5; } .s-col-6 { grid-column: span 6; } .s-col-8 { grid-column: span 8; } .s-start-5 { grid-column-start: 5; } }
@media (min-width: 1024px) { .r-col-3 { grid-column: span 3; } .r-col-4 { grid-column: span 4; } .r-col-5 { grid-column: span 5; } .r-col-6 { grid-column: span 6; } .r-col-7 { grid-column: span 7; } .r-col-8 { grid-column: span 8; } .r-col-9 { grid-column: span 9; } .r-col-12 { grid-column: span 12; } .r-start-5 { grid-column-start: 5; } .r-start-7 { grid-column-start: 7; } .r-start-8 { grid-column-start: 8; } .r-start-9 { grid-column-start: 9; } .r-start-10 { grid-column-start: 10; } }
.section { padding: 96px 0; }
@media (min-width: 641px) { .section { padding: 120px 0; } }
@media (min-width: 1024px) { .section--xl { padding: 160px 0; } .section--xxl { padding: 240px 0; } }
.section--tight { padding: 64px 0; }
.bg-white { background: var(--white); color: var(--black); }
.bg-off { background: var(--off-white); color: var(--black); }
.bg-black { background: var(--black); color: var(--white); }
.pt-header { padding-top: calc(var(--header-height) + 60px); }
@media (min-width: 1024px) { .pt-header { padding-top: calc(var(--header-height) + 96px); } }
.rounded { border-radius: 2px; overflow: hidden; }
.mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-64 { margin-top: 64px; } .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; }
.flex { display: flex; } .items-center { align-items: center; } .items-end { align-items: end; } .justify-between { justify-content: space-between; } .gap-10 { gap: 10px; } .gap-20 { gap: 20px; } .gap-40 { gap: 40px; } .wrap { flex-wrap: wrap; }

/* ---------- buttons (C&N btn-main: underline that grows on hover) ---------- */
.btn { position: relative; display: inline-flex; height: 48px; align-items: center; justify-content: space-between; gap: 40px; font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.btn::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transition: width .45s var(--ease-io); }
.btn:hover::after { width: calc(100% + 20px); }
.btn__label { transition: transform .45s var(--ease-io); }
.btn__arrow { display: inline-flex; width: 14px; height: 10px; transition: transform .45s var(--ease-io); }
.btn__arrow svg { width: 100%; height: 100%; }
.btn:hover .btn__label { transform: translateX(10px); }
.btn:hover .btn__arrow { transform: translateX(20px); }
.btn-simple { display: inline-flex; align-items: center; gap: 10px; border-radius: 2px; background: var(--white); color: var(--black); padding: 16px 20px; font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; transition: background .3s, color .3s; }
.btn-simple:hover { background: var(--off-white); }
.btn-simple--dark { background: var(--black); color: var(--white); }
.btn-simple--dark:hover { background: var(--dark-grey); }
.btn-simple--outline { background: transparent; color: var(--black); border: 1px solid rgba(0,0,0,.2); }
.btn-simple--outline:hover { background: var(--black); color: var(--white); }
.btn-simple svg { width: 16px; height: 16px; }
.glass-fx { background-color: rgba(222,222,222,.5); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); }
.glass-dark { background-color: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }

/* ---------- header ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 250; height: var(--header-height); display: flex; align-items: center; padding: 0 var(--pad); color: var(--white); transition: background .5s, color .5s; }
.header.is-light { color: var(--black); }
.header.is-solid { background: rgba(0,0,0,.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.header.is-light.is-solid { background: rgba(255,255,255,.85); }
.header__inner { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.header__left, .header__right { display: flex; align-items: center; gap: 10px; height: 40px; }
.header__right { justify-content: flex-end; }
.header__quick { display: none; height: 100%; }
.header__quick ul { display: flex; align-items: center; gap: 10px; height: 100%; }
.header__quick a, .header__right a, .menu-btn { display: inline-flex; align-items: center; height: 40px; padding: 2px 10px 0; font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; position: relative; white-space: nowrap; }
.header__quick a::before, .header__right a.header__contact::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-io); }
.header__quick a:hover::before, .header__right a.header__contact:hover::before { transform: scaleX(1); }
.header__divider { width: 1px; height: 16px; background: currentColor; opacity: .2; display: none; margin: 0 10px; }
@media (min-width: 1024px) { .header__quick, .header__divider { display: block; } }
.menu-btn { gap: 10px; padding-left: 0; }
.menu-btn__lines { position: relative; width: 16px; height: 7px; }
.menu-btn__lines span { position: absolute; left: 0; width: 16px; height: 1px; background: currentColor; transition: transform .35s var(--ease-io), top .35s var(--ease-io); }
.menu-btn__lines span:first-child { top: 0; } .menu-btn__lines span:last-child { bottom: 0; }
.logo { display: inline-flex; align-items: center; justify-content: center; height: 40px; }
.logo img, .logo svg { height: 34px; width: auto; }
@media (min-width: 1024px) { .logo img, .logo svg { height: 40px; } }
.header.is-light .logo img { filter: invert(1) brightness(0.1); }
.header__icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; }
.header__icon svg { width: 18px; height: 18px; }
.header__contact { display: none; }
@media (min-width: 641px) { .header__contact { display: inline-flex; } }

/* ---------- mega menu (slides in, light glass, black text) ---------- */
.menu { position: fixed; inset: 0; z-index: 300; display: flex; visibility: hidden; pointer-events: none; }
.menu.is-open { visibility: visible; pointer-events: auto; }
.menu__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.2); opacity: 0; transition: opacity .5s; }
.menu.is-open .menu__overlay { opacity: 1; }
.menu__panel { position: relative; width: 100%; height: 100%; max-width: 980px; background: rgba(244,242,240,.92); -webkit-backdrop-filter: blur(45px); backdrop-filter: blur(45px); color: var(--black); transform: translateX(-100%); transition: transform .6s var(--ease-io); display: flex; flex-direction: column; overflow-y: auto; }
.menu.is-open .menu__panel { transform: none; }
.menu__bar { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); flex: none; }
.menu__close { display: inline-flex; align-items: center; gap: 10px; font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; height: 40px; }
.menu__close .menu-btn__lines span:first-child { top: 3px; transform: rotate(45deg); } .menu__close .menu-btn__lines span:last-child { bottom: 3px; transform: rotate(-45deg); }
.menu__body { flex: 1; display: grid; grid-template-columns: 1fr; gap: 20px; padding: 20px 0 40px; }
@media (min-width: 641px) { .menu__body { grid-template-columns: 1fr 1fr; } }
.menu__nav li { margin-bottom: 2px; }
.menu__nav a { width: 100%; display: inline-flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 var(--pad); font-size: var(--body-14); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; transition: background .3s; }
@media (min-width: 641px) { .menu__nav a { height: 58px; } }
@media (min-width: 1024px) { .menu__nav a { height: 68px; font-size: var(--h20); letter-spacing: 0.02em; } }
.menu__nav a:hover, .menu__nav a.is-active { background: rgba(0,0,0,.05); }
.menu__nav a svg { width: 14px; height: 10px; opacity: 0; transform: translateX(-8px); transition: all .3s; }
.menu__nav a:hover svg { opacity: 1; transform: none; }
.menu__sub { padding: 10px var(--pad); }
.menu__sub h4 { font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--mid-grey); margin: 20px 0 10px; }
.menu__sub a { position: relative; display: flex; align-items: center; height: 40px; font-size: var(--body-16); letter-spacing: -0.01em; }
.menu__sub a::before { content: ""; width: 0; height: 1px; background: var(--black); margin-right: 0; transition: width .25s, margin .25s; }
.menu__sub a:hover::before { width: 20px; margin-right: 8px; }
.menu__founder { margin: 30px var(--pad) 0; padding-top: 30px; border-top: 1px solid rgba(0,0,0,.1); }
body.menu-open { overflow: hidden; }

/* ---------- media ---------- */
.media { position: relative; overflow: hidden; background: var(--dark-grey); border-radius: 2px; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--fill { position: absolute; inset: 0; border-radius: 0; }
.aspect-3-4 { aspect-ratio: 3 / 4; } .aspect-4-5 { aspect-ratio: 4 / 5; } .aspect-3-2 { aspect-ratio: 3 / 2; } .aspect-16-9 { aspect-ratio: 16 / 9; } .aspect-service { aspect-ratio: 335 / 251; } .aspect-feature { aspect-ratio: 335 / 394; }
@media (min-width: 641px) { .aspect-service { aspect-ratio: 359 / 239; } .aspect-feature { aspect-ratio: 728 / 394; } }
@media (min-width: 1024px) { .aspect-service { aspect-ratio: 695 / 463; } .aspect-feature { aspect-ratio: 1045 / 565; } }
.zoom img { transition: transform .65s ease-in-out; }
.zoom:hover img, a:hover .zoom img { transform: scale(1.08); }

/* ---------- hero (full screen, text top-left under header) ---------- */
.hero { position: relative; background: var(--black); overflow: clip; height: 130vh; min-height: 640px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(170deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.4) 38%, rgba(0,0,0,.08) 70%), linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 55%); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__pin { position: sticky; top: 0; z-index: 5; height: 100svh; min-height: 560px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.hero__pin > * { pointer-events: auto; }
.hero__content { position: relative; z-index: 5; left: 0; width: 100%; padding-top: calc(var(--header-height) + 20px); }
@media (min-width: 641px) { .hero__content { padding-top: calc(var(--header-height) + 30px); } }
@media (min-width: 1024px) { .hero__content { padding-top: calc(var(--header-height) + 60px); } }
.hero__content .site-grid > div { grid-column: span 2; padding-right: 10%; }
@media (min-width: 641px) { .hero__content .site-grid > div { grid-column: span 4; padding-right: 0; } }
@media (min-width: 1024px) { .hero__content .site-grid > div { grid-column: span 4; } }
@media (min-width: 1440px) { .hero__content .site-grid > div { grid-column: span 3; } }
.hero__crumbs { display: flex; align-items: center; gap: 5px; font-size: var(--h10); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; margin-bottom: 20px; }
.hero__crumbs i { width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,.4); display: inline-block; }
.hero__bottom { position: relative; z-index: 5; padding: 24px 100px 24px var(--pad); background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.hero { display: flex; flex-direction: column; }
.hero--page { height: auto; min-height: 0; padding-top: calc(var(--header-height) + 60px); padding-bottom: 60px; }
@media (min-width: 1024px) { .hero--page { padding-top: calc(var(--header-height) + 96px); padding-bottom: 96px; } }
.hero--page .hero__content { position: static; padding-top: 0; }
.hero--page .hero__pin { position: static; height: auto; min-height: 0; display: block; }
.hero--page .hero__bottom { padding-top: 40px; background: none; }
.hero--page .hero__media { opacity: .55; }
.hero--page::before { background: linear-gradient(170deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.6) 100%); }

/* ---------- feature panels (120vh / 160vh, sticky copy, parallax image) ---------- */
.panel { position: relative; display: flex; align-items: center; overflow: clip; height: 120vh; color: var(--white); }
@media (min-width: 1024px) { .panel { height: 160vh; } }
.panel--short { height: 100vh; }
.panel__media { position: absolute; inset: 0; }
.panel__media img { width: 100%; height: 110%; object-fit: cover; }
.panel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 38%, rgba(0,0,0,.12) 70%), linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 40%); }
.panel .container { position: relative; z-index: 2; height: 100%; }
.panel .site-grid { height: 100%; }
.panel__copy { grid-column: span 2; display: flex; flex-direction: column; justify-content: flex-start; padding: 62px 0; }
@media (min-width: 641px) { .panel__copy { grid-column: span 5; padding: 80px 0; } }
@media (min-width: 1024px) { .panel__copy { grid-column: span 3; padding: 120px 0; } }
.panel__sticky { position: sticky; top: 62px; max-width: 260px; }
@media (min-width: 641px) { .panel__sticky { top: 80px; max-width: none; } }
@media (min-width: 1024px) { .panel__sticky { top: 120px; } }
.panel__copy .eyebrow { margin-bottom: 20px; }
.panel__copy .btn { margin-top: 40px; }
.panel__stat { font-weight: 500; color: var(--white); }

/* ---------- row head (white sections) ---------- */
.row-head { display: grid; gap: 20px; }
@media (min-width: 1024px) { .row-head { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; } .row-head__title { grid-column: span 5; } .row-head__aside { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; } }
.row-head__aside .btn { margin-top: 10px; }
@media (min-width: 1024px) { .row-head__title h3 { font-size: var(--h28); line-height: 1.25; } }

/* ---------- yacht cards ---------- */
.card { position: relative; display: block; aspect-ratio: 360 / 540; border-radius: 2px; overflow: hidden; background: var(--dark-grey); color: var(--white); }
@media (min-width: 1024px) { .card { aspect-ratio: 460 / 615; } }
.card__media { position: absolute; inset: 0; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-io); }
@media (hover: hover) { .card:hover .card__media img { transform: scale(1.06); } }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,.48) 100%); pointer-events: none; }
.card__body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; pointer-events: none; }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; font-size: var(--body-13); }
.card__badge { display: inline-flex; align-items: center; gap: 6px; }
.card__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--white); display: inline-block; }
.card__bottom { display: flex; align-items: flex-end; justify-content: space-between; }
.card-title { display: inline-block; font-size: var(--h18); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; line-height: 1.25; }
.card-content { margin-top: 4px; }
.card__price { font-size: var(--body-12); margin: 4px 0 10px; }
.card__price strong { font-size: var(--body-14); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.card__meta i { width: 2px; height: 2px; border-radius: 50%; background: var(--white); display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .card .card-title { transform: translateY(var(--card-shift, 0)); }
  .card .card-content { opacity: 0; transform: translateY(15px); }
}
.card--demo .card__top { color: var(--gold); }

/* ---------- Splide rows (C&N: slides 90% / 45% / 30%, overflow visible) ---------- */
.row { margin-top: 56px; }
@media (min-width: 641px) { .row { margin-top: 64px; } }
@media (min-width: 1024px) { .row { margin-top: 80px; } }
.splide { position: relative; visibility: visible; }
.splide__track { overflow: visible !important; }
.splide__list { display: flex; margin: 0; padding: 0; list-style: none; }
.splide:not(.is-active) .splide__list { gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.splide:not(.is-active) .splide__list::-webkit-scrollbar { display: none; }
.splide__slide { flex: 0 0 90%; scroll-snap-align: start; }
@media (min-width: 641px) { .splide__slide { flex-basis: 45%; } }
@media (min-width: 1024px) { .splide__slide { flex-basis: 30%; } }
.row__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.row__progress { display: flex; align-items: center; gap: 4px; }
.row__progress i { display: block; height: 1px; width: 10px; background: currentColor; opacity: .3; transition: width .3s, opacity .3s; }
.row__progress i.is-active { width: 30px; opacity: 1; }
.row__arrows { display: flex; gap: 20px; }
.splide__arrow { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; opacity: 1; transition: opacity .3s; background: none; }
.splide__arrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.splide__arrow:disabled { opacity: .25; cursor: default; }
.splide__arrow--prev svg { transform: scaleX(-1); }
.splide__pagination { display: none; }

/* ---------- services grid ---------- */
.services { display: grid; grid-template-columns: 1fr; gap: 48px 10px; margin-top: 48px; }
@media (min-width: 641px) { .services { grid-template-columns: 1fr 1fr; gap: 64px 10px; margin-top: 64px; } }
@media (min-width: 1024px) { .services { gap: 80px 10px; margin-top: 80px; } }
.service__media { margin-bottom: 20px; }
@media (min-width: 1024px) { .service__media { margin-bottom: 30px; } }
.service__text { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1024px) { .service__text { flex-direction: row; gap: 10px; } .service__text > * { width: 50%; } .service__text p { padding-right: 5%; } }
.service__title { display: block; font-size: var(--body-16); letter-spacing: 0.03em; text-transform: uppercase; font-weight: 500; }
@media (min-width: 1024px) { .service__title { font-size: var(--h18); letter-spacing: 0.02em; } }
.service__num { display: inline-block; width: 28px; color: var(--mid-grey); }

/* ---------- steps list (numbered) ---------- */
.steps { border-top: 1px solid rgba(0,0,0,.1); margin-top: 48px; }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 24px 0; border-bottom: 1px solid rgba(0,0,0,.1); }
.step p { grid-column: 2; }
@media (min-width: 1024px) { .step p { grid-column: auto; } }
@media (min-width: 1024px) { .step { grid-template-columns: 120px 1fr 1fr; gap: 10px; padding: 30px 0; } }
.step__title { font-size: var(--h18); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; }
.step p { color: var(--mid-grey); font-size: var(--body-13); }
.bg-black .steps, .bg-black .step { border-color: rgba(255,255,255,.15); }
.bg-black .step p { color: rgba(255,255,255,.65); }

/* ---------- finder ---------- */
.finder { position: relative; overflow: hidden; }
.finder__media { position: absolute; inset: 0; }
.finder__media img { width: 100%; height: 100%; object-fit: cover; }
.finder__media::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.finder .container { position: relative; z-index: 2; }
.finder__form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 40px; }
@media (min-width: 1024px) { .finder__form { grid-template-columns: repeat(5, 1fr) auto; align-items: end; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.6); }
.field select, .field input, .field textarea { width: 100%; height: 48px; padding: 0 12px; border-radius: 2px; border: 1px solid rgba(255,255,255,.2); background-color: rgba(255,255,255,.06); color: var(--white); font: inherit; font-size: var(--body-14); appearance: none; -webkit-appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.field select option { background: #111; color: #fff; }
.field textarea { height: auto; min-height: 120px; padding: 12px; resize: vertical; }
.field select:focus, .field input:focus, .field textarea:focus { outline: none; border-color: rgba(255,255,255,.7); }
.bg-white .field label, .bg-off .field label { color: var(--mid-grey); }
.bg-white .field select, .bg-white .field input, .bg-white .field textarea, .bg-off .field select, .bg-off .field input, .bg-off .field textarea { border-color: rgba(0,0,0,.18); background-color: var(--white); color: var(--black); }
.bg-white .field select, .bg-off .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000000'/%3E%3C/svg%3E"); }
.bg-white .field select option, .bg-off .field select option { background: #fff; color: #000; }
.bg-white .field select:focus, .bg-white .field input:focus, .bg-white .field textarea:focus, .bg-off .field select:focus, .bg-off .field input:focus, .bg-off .field textarea:focus { border-color: var(--black); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.chip { display: inline-flex; align-items: center; height: 36px; padding: 2px 14px 0; border-radius: 2px; border: 1px solid rgba(255,255,255,.25); font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; transition: background .3s, color .3s; }
.chip:hover, .chip.is-active { background: var(--white); color: var(--black); border-color: var(--white); }
.finder__brands { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-top: 40px; }
.finder__brands a { height: 32px; display: inline-flex; align-items: center; opacity: .8; transition: opacity .3s; }
.finder__brands a:hover { opacity: 1; }
.finder__brands img, .finder__brands svg { height: 100%; width: auto; }

/* ---------- list page ---------- */
.list-head { display: grid; gap: 20px; padding-top: calc(var(--header-height) + 40px); }
@media (min-width: 1024px) { .list-head { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; padding-top: calc(var(--header-height) + 60px); } .list-head__title { grid-column: span 5; } .list-head__intro { grid-column: 9 / span 4; } }
.list-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 64px 0 10px; font-size: var(--body-12); color: rgba(255,255,255,.6); }
.list-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 641px) { .list-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .list-grid { grid-template-columns: repeat(3, 1fr); } }
.filter-bar { position: sticky; bottom: 0; z-index: 60; margin: 40px calc(-1 * var(--pad)) 0; padding: 10px var(--pad); color: var(--black); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.filter-bar__toggle { display: inline-flex; align-items: center; gap: 8px; height: 40px; font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.filter-bar__toggle svg { width: 14px; height: 14px; }
@media (max-width: 1023px) {
  .filter-bar { gap: 10px; }
  .filter-bar .field { display: none; width: calc(50% - 5px); flex-direction: column; align-items: stretch; gap: 2px; }
  .filter-bar .field select { height: 36px; padding-left: 0; }
  .filter-bar.is-open .field { display: flex; }
  .filter-bar__toggle { order: -1; }
  .filter-bar__reset { margin-left: auto; order: -1; }
}
@media (min-width: 1024px) { .filter-bar__toggle { display: none; } }
.filter-bar .field { flex-direction: row; align-items: center; gap: 8px; }
.filter-bar .field label { color: var(--black); font-size: var(--body-12); white-space: nowrap; }
.filter-bar .field select { height: 40px; border: 0; background-color: transparent; color: var(--black); font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding-left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000000'/%3E%3C/svg%3E"); }
.filter-bar .field select option { background: #fff; color: #000; }
.filter-bar__reset { margin-left: auto; font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.filter-bar__reset svg { width: 14px; height: 14px; }
.empty { padding: 64px 0; color: rgba(255,255,255,.6); }

/* ---------- yacht detail ---------- */
.yhero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--black); }
.yhero__media { position: absolute; inset: 0; }
.yhero__media img { width: 100%; height: 100%; object-fit: cover; }
.yhero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 38%), linear-gradient(294deg, rgba(222,222,222,.15) 15%, rgba(0,0,0,.6) 85%); }
.yhero__title { position: absolute; z-index: 3; left: 0; right: 0; bottom: 96px; padding: 0 var(--pad); }
@media (min-width: 641px) { .yhero__title { bottom: 24px; } }
.yhero__highlights { display: none; }
@media (min-width: 1024px) { .yhero__highlights { position: absolute; z-index: 3; left: 0; right: 0; bottom: 120px; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; } .yhero__highlights > div { grid-column: span 3; } .yhero__highlights h2 { font-size: var(--h22); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; margin-bottom: 6px; } .yhero__highlights p { font-size: var(--body-14); color: rgba(255,255,255,.8); } }
.ybar { position: sticky; bottom: 0; z-index: 70; transform: translateY(100%); transition: transform .5s var(--ease-io); }
.ybar.is-visible { transform: none; }
.ybar--static { position: sticky; bottom: 0; z-index: 70; background: var(--white); color: var(--black); padding: 14px var(--pad); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; border-top: 1px solid rgba(0,0,0,.08); }
.ybar__name { font-size: var(--h22); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; }
.ybar__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.ybar__meta i { width: 2px; height: 2px; border-radius: 50%; background: var(--black); display: inline-block; }
.ybar__tabs { display: none; gap: 20px; background: var(--off-white); border-radius: 2px; padding: 12px 16px; font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.ybar__tabs a { opacity: .5; } .ybar__tabs a:first-child, .ybar__tabs a:hover { opacity: 1; }
@media (min-width: 1024px) { .ybar__tabs { display: flex; } }
.ybar__right { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: var(--body-13); }
.yintro { display: grid; gap: 30px; }
@media (min-width: 1024px) { .yintro { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; } .yintro__title { grid-column: 2 / span 4; } .yintro__text { grid-column: 7 / span 5; } }
.spec-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 1024px) { .spec-tiles { grid-template-columns: repeat(4, 1fr); } }
.spec-tile { border-radius: 2px; background: var(--off-white); padding: 24px 20px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; }
.spec-tile dt { font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--mid-grey); }
.spec-tile dd { font-size: var(--h22); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; line-height: 1.2; }
.spec-list { display: grid; grid-template-columns: 1fr; }
@media (min-width: 641px) { .spec-list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.spec-list div { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.1); font-size: var(--body-13); }
.spec-list dt { color: var(--mid-grey); font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding-top: 3px; }
.feature-block { display: grid; gap: 20px; }
@media (min-width: 1024px) { .feature-block { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; } .feature-block__aside { grid-column: span 3; } .feature-block__aside > div { position: sticky; top: 120px; padding-right: 10%; } .feature-block__main { grid-column: span 9; } }
.feature-list { display: grid; gap: 10px; }
.feature-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid rgba(0,0,0,.1); font-size: var(--body-14); }
.feature-list li span:first-child { color: var(--mid-grey); font-size: var(--body-12); font-weight: 500; padding-top: 2px; }
.gallery { display: grid; gap: 10px; }
.gallery__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gallery__row--full { grid-template-columns: 1fr; }
.gallery .media { aspect-ratio: 16 / 9; cursor: zoom-in; }

.lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.96); display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; }
.lightbox button { position: absolute; font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding: 10px; }
.lightbox__close { top: 16px; right: 16px; } .lightbox__prev { left: 10px; top: 50%; } .lightbox__next { right: 10px; top: 50%; }

/* ---------- founder card ---------- */
.founder-card { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; border-radius: 2px; padding: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.bg-white .founder-card, .menu .founder-card { background: var(--off-white); border-color: transparent; }
.founder-card .media { aspect-ratio: 1 / 1; }
.founder-card .media img { object-position: center top; }
.founder-card__kicker { font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--grey); margin-bottom: 6px; display: block; }
.founder-card__name { font-size: var(--h18); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; line-height: 1.2; }
.founder-card__role { font-size: var(--body-12); color: var(--grey); margin-top: 4px; }
.founder-card__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: var(--body-13); }
.founder-card__links a { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.founder-card__links svg { width: 14px; height: 14px; }
.founder-card--lg { grid-template-columns: 140px 1fr; padding: 30px; }
@media (max-width: 480px) { .founder-card, .founder-card--lg { grid-template-columns: 1fr; } .founder-card .media { width: 120px; } }

/* ---------- forms ---------- */
.form { display: grid; gap: 20px; }
.form__row { display: grid; gap: 20px; }
@media (min-width: 641px) { .form__row--2 { grid-template-columns: 1fr 1fr; gap: 10px; } }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--body-12); color: var(--mid-grey); }
.form__consent input { margin-top: 3px; accent-color: #000; }
.bg-black .form__consent { color: rgba(255,255,255,.6); }
.field input::placeholder, .field textarea::placeholder { color: rgba(0,0,0,.35); }
.form__status { display: none; border-radius: 2px; padding: 14px 16px; font-size: var(--body-13); }
.form__status.is-success { display: block; background: var(--off-white); color: var(--black); }
.form__status.is-error { display: block; background: #fbe9e9; color: #8a1f1f; }
.bg-black .form__status.is-success { background: rgba(255,255,255,.1); color: #fff; }

/* ---------- footer ---------- */
.footer { position: relative; overflow: hidden; color: var(--white); padding: 96px 0 24px; }
.footer__media { position: absolute; inset: 0; }
.footer__media img { width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: saturate(.3); }
.footer__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.85)); }
.footer .container { position: relative; z-index: 2; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 10px; }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .footer__col { grid-column: span 2; } .footer__col--wide { grid-column: 9 / span 4; } }
.footer h4 { font-size: var(--body-12); color: rgba(255,255,255,.6); font-weight: 400; margin-bottom: 20px; }
.footer li { margin-bottom: 10px; }
.footer li a { font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.footer li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__bottom { margin-top: 96px; padding-right: 70px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: var(--body-12); color: rgba(255,255,255,.6); }
.footer__social { display: flex; gap: 6px; margin-top: 30px; }
.footer__social a { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); border-radius: 2px; }
.footer__social svg { width: 14px; height: 14px; }

/* ---------- cookies ---------- */
.cookie { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: flex-end; padding: 10px; background: rgba(0,0,0,.3); }
@media (min-width: 641px) { .cookie { padding: 20px; } }
@media (min-width: 1024px) { .cookie { justify-content: center; } }
.cookie.is-visible { display: flex; }
.cookie__box { width: 100%; max-width: 460px; background: var(--white); color: var(--black); border-radius: 2px; padding: 20px; }
@media (min-width: 641px) { .cookie__box { padding: 40px; } }
.cookie__box h2 { font-size: var(--body-14); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; margin-bottom: 20px; }
.cookie__box p { font-size: var(--body-12); line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 30px; }
.cookie__box p a { text-decoration: underline; }
.cookie__actions { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 641px) { .cookie__actions { flex-direction: row; } .cookie__actions > * { flex: 1; justify-content: center; } }
.cookie__actions .btn-simple { background: rgba(222,222,222,.5); justify-content: center; }
.cookie__actions .btn-simple--dark { background: var(--black); }

/* ---------- misc ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 120; width: 48px; height: 48px; border-radius: 2px; display: flex; align-items: center; justify-content: center; background: var(--white); color: var(--black); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .3s; }
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 22px; height: 22px; }
.page--detail .wa-float { bottom: 90px; }
.video-block { position: relative; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; background: var(--dark-grey); }
.video-block iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.notice { border-radius: 2px; padding: 16px 20px; background: var(--off-white); color: var(--mid-grey); font-size: var(--body-12); display: flex; gap: 14px; }
.notice strong { color: var(--black); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.bg-black .notice { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); } .bg-black .notice strong { color: var(--white); }
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--h20); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; margin: 40px 0 16px; }
.prose p, .prose li { font-size: var(--body-14); color: var(--mid-grey); margin-bottom: 1em; }
.prose ul { list-style: disc; padding-left: 20px; }
.prose a { text-decoration: underline; }
.list-links li { border-top: 1px solid rgba(0,0,0,.1); padding: 20px 0; }
.list-links li:last-child { border-bottom: 1px solid rgba(0,0,0,.1); }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; height: 32px; padding: 2px 12px 0; border-radius: 2px; border: 1px solid rgba(255,255,255,.2); font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.bg-white .pill { border-color: rgba(0,0,0,.15); }
.pill:hover { background: var(--white); color: var(--black); }
.bg-white .pill:hover { background: var(--black); color: var(--white); }
.portrait-block { position: relative; }
.portrait-block .media { aspect-ratio: 4 / 5; }
.js-anim-fade-in { opacity: 0; }
.no-js .js-anim-fade-in, .js-anim-fade-in.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js-anim-fade-in { opacity: 1 !important; transform: none !important; } .card .card-title, .card .card-content { transform: none !important; opacity: 1 !important; } }
@media print { .header, .menu, .cookie, .wa-float, .ybar, .filter-bar { display: none !important; } }

/* ---------- finder (white, C&N filter-bar vocabulary) ---------- */
.finder-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px; margin-top: 40px; padding: 10px 20px; border-radius: 2px; background: rgba(222,222,222,.5); color: var(--black); }
@media (min-width: 1024px) { .finder-bar { grid-template-columns: repeat(5, 1fr) auto; align-items: center; } }
.finder-bar .field { flex-direction: row; align-items: center; gap: 8px; }
.finder-bar .field label { color: var(--black); font-size: var(--body-12); white-space: nowrap; }
.finder-bar .field select { height: 40px; border: 0; background-color: transparent; color: var(--black); font-size: var(--body-12); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; padding-left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000000'/%3E%3C/svg%3E"); }
.finder-bar .field select option { background: #fff; color: #000; }
.finder-bar .btn-simple { justify-content: center; }
.bg-white .chip { border-color: rgba(0,0,0,.15); color: var(--black); }
.bg-white .chip:hover, .bg-white .chip.is-active { background: var(--black); color: var(--white); border-color: var(--black); }
.finder__brands--light a { opacity: 1; }
.finder__brands--light img, .finder__brands--light svg { filter: invert(1) brightness(0.1); }
.finder__brands--light svg path { fill: #000; }

/* ---------- about block (C&N closing section) ---------- */
.about { display: grid; gap: 40px; }
@media (min-width: 641px) { .about { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; } .about__media { grid-column: span 4; } .about__text { grid-column: 5 / span 4; } }
@media (min-width: 1024px) { .about { grid-template-columns: repeat(12, minmax(0, 1fr)); } .about__media { grid-column: span 6; } .about__text { grid-column: 8 / span 5; } }
.about__media .media { aspect-ratio: 375 / 564; }
.about__text { padding-top: 0; }
@media (min-width: 1024px) { .about__text { padding-top: 120px; } }
.about__text h3 { margin-bottom: 40px; }
@media (min-width: 1024px) { .about__text h3 { margin-bottom: 72px; } .about__text p { margin-bottom: 72px; } }
.about__text p { margin-bottom: 40px; }
.about__second { margin-top: 64px; aspect-ratio: 375 / 359; }
@media (min-width: 641px) { .about__second { margin-top: 96px; aspect-ratio: 287 / 359; max-width: 60%; } }
@media (min-width: 1024px) { .about__second { margin-top: 144px; } }

/* ---------- split panel (two half-width 160vh panels) ---------- */
.split-panel { display: flex; flex-direction: column; color: var(--white); overflow: clip; }
@media (min-width: 1024px) { .split-panel { flex-direction: row; height: 160vh; } }
.split-panel__half { position: relative; height: 120vh; width: 100%; overflow: clip; display: block; }
@media (min-width: 1024px) { .split-panel__half { height: 100%; width: 50%; } }
.split-panel__half::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%); }
.split-panel__half .media { position: absolute; inset: 0; border-radius: 0; }
.split-panel__half .media img { transition: transform 1s var(--ease-io); }
.split-panel__half:hover .media img { transform: scale(1.05); }
.split-panel__copy { position: relative; z-index: 2; height: 100%; padding: 62px var(--pad); }
@media (min-width: 641px) { .split-panel__copy { padding: 80px var(--pad); } }
@media (min-width: 1024px) { .split-panel__copy { padding: 120px var(--pad); } }
.split-panel__sticky { position: sticky; top: 62px; max-width: 260px; }
@media (min-width: 641px) { .split-panel__sticky { top: 80px; max-width: 50%; } }
@media (min-width: 1024px) { .split-panel__sticky { top: 120px; } }
.split-panel__half--right .split-panel__sticky { margin-left: auto; text-align: right; }
.split-panel__half--right .btn { justify-content: flex-end; }

/* ---------- brand emphasis ---------- */
.row-head__logo { height: 30px; width: auto; display: inline-flex; align-items: center; margin-bottom: 24px; }
.row-head__logo img, .row-head__logo svg { height: 100%; width: auto; }
.bg-white .row-head__logo img { filter: invert(1) brightness(0.1); }
.bg-white .row-head__logo svg path { fill: #000; }
.brand-panel { display: flex; flex-direction: column; color: var(--white); overflow: clip; }
@media (min-width: 1024px) { .brand-panel { flex-direction: row; height: 120vh; min-height: 700px; } }
.brand-panel__half { position: relative; display: block; height: 100vh; min-height: 560px; width: 100%; overflow: clip; text-align: center; }
@media (min-width: 1024px) { .brand-panel__half { height: 100%; width: 50%; } }
.brand-panel__half::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.65) 100%); transition: background .6s; }
.brand-panel__half:hover::before { background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.42) 50%, rgba(0,0,0,.6) 100%); }
.brand-panel__half .media { position: absolute; inset: 0; border-radius: 0; }
.brand-panel__half .media img { transition: transform 1.2s var(--ease-io); }
.brand-panel__half:hover .media img { transform: scale(1.05); }
.brand-panel__copy { position: sticky; top: calc(50vh - 140px); margin-top: calc(50vh - 140px); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 0 var(--pad); }
@media (max-width: 1023px) { .brand-panel__half { height: 120vh; } .brand-panel__copy { gap: 20px; top: calc(50vh - 120px); margin-top: calc(50vh - 120px); } .brand-panel__copy p { font-size: var(--body-14); } }
.brand-panel__logo { height: clamp(56px, 7vw, 110px); width: auto; display: inline-flex; filter: drop-shadow(0 6px 30px rgba(0,0,0,.5)); }
.brand-panel__logo img, .brand-panel__logo svg { height: 100%; width: auto; }
.brand-panel__half .btn { justify-content: center; gap: 20px; }
.brand-panel--stacked { flex-direction: column; }
.brand-panel--stacked .brand-panel__half { width: 100%; height: 120vh; min-height: 640px; }
@media (min-width: 1024px) { .brand-panel--stacked { height: auto; } }
.hero__logo { height: clamp(48px, 6vw, 84px); width: auto; display: inline-flex; margin-bottom: 30px; filter: drop-shadow(0 4px 20px rgba(0,0,0,.5)); }
.hero__logo img, .hero__logo svg { height: 100%; width: auto; }
.hero__brands { display: flex; align-items: center; gap: 40px; }
@media (max-width: 640px) { .hero__bottom { flex-direction: column; align-items: flex-start; gap: 18px; padding-right: var(--pad); padding-bottom: 90px; } .hero__bottom .body-12 { white-space: nowrap; } .hero__brands { gap: 24px; } .hero__brands a { height: 26px; } }
.hero__brands a { height: 36px; display: inline-flex; opacity: .9; }
.hero__brands img, .hero__brands svg { height: 100%; width: auto; }

/* ---------- pinned yacht hero (3 slides crossfade on scroll) ---------- */
.yhero--pinned { height: 300vh; min-height: 0; overflow: visible; }
.yhero__pin { position: sticky; top: 0; height: 100svh; min-height: 600px; overflow: hidden; }
.yhero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease-io); }
.yhero__slide.is-active { opacity: 1; }
.yhero__slide img { width: 100%; height: 100%; object-fit: cover; }
.yhero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.3) 100%); }
.yhero__hl { position: absolute; z-index: 3; left: 0; right: 0; bottom: 140px; padding: 0 var(--pad); opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-io), transform .7s var(--ease-io); pointer-events: none; }
.yhero__hl.is-active { opacity: 1; transform: none; }
.yhero__hl h2 { font-size: var(--h22); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; margin-bottom: 8px; }
@media (min-width: 641px) { .yhero__hl h2 { font-size: var(--h28); } }
.yhero__hl p { font-size: var(--body-14); color: rgba(255,255,255,.85); }
@media (min-width: 641px) { .yhero__hl p { font-size: var(--body-16); } }
.yhero__pin .yhero__title { bottom: 40px; transition: opacity .6s; }
.yhero__pin .yhero__title.is-hidden { opacity: 0; }
.yhero__pin .yhero__title .site-grid { align-items: end; }
.yhero__priceline { grid-column: span 2; display: flex; align-items: center; gap: 20px; font-size: var(--body-13); }
@media (min-width: 641px) { .yhero__priceline { grid-column: span 2; justify-content: flex-end; } }
@media (min-width: 1024px) { .yhero__priceline { grid-column: 10 / span 3; } }
.yhero__progress { position: absolute; z-index: 3; right: var(--pad); bottom: 28px; display: none; gap: 8px; }
@media (min-width: 1024px) { .yhero__progress { display: flex; } }
.yhero__progress i { width: 10px; height: 1px; background: rgba(255,255,255,.35); transition: background .3s, width .3s; }
.yhero__progress i.is-active { background: #fff; width: 30px; }

/* ---------- yacht intro (C&N tall image + text column) ---------- */
.yintro2 { display: grid; gap: 40px; }
@media (min-width: 641px) { .yintro2 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; } .yintro2__media { grid-column: span 4; } .yintro2__text { grid-column: 5 / span 4; } }
@media (min-width: 1024px) { .yintro2 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .yintro2__media { grid-column: span 6; } .yintro2__text { grid-column: 8 / span 5; } }
.yintro2__media .media { aspect-ratio: 2 / 3; }
.yintro2__pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px 0 0; }
.yintro2__pairs h4 { font-size: var(--body-14); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; margin-bottom: 12px; }
.yintro2__pairs p { font-size: var(--body-13); color: var(--mid-grey); }
.yintro2__text { padding-top: 0; }
@media (min-width: 1024px) { .yintro2__text { padding-top: 96px; } }
.yintro2__text h2 { margin-bottom: 30px; }
@media (min-width: 1024px) { .yintro2__text h2 { margin-bottom: 56px; } }
.yintro2__second { margin-top: 64px; aspect-ratio: 375 / 564; }
@media (min-width: 641px) { .yintro2__second { margin-top: 96px; max-width: 75%; margin-left: auto; } }
.detail-media { aspect-ratio: 335 / 394; margin-bottom: 40px; }
@media (min-width: 641px) { .detail-media { aspect-ratio: 728 / 394; } }
@media (min-width: 1024px) { .detail-media { aspect-ratio: 1045 / 565; } }

/* ---------- "call me" block ---------- */
.callme { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .callme { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; } .callme__text { grid-column: span 6; } .callme__card { grid-column: 8 / span 5; } }
.callme__text p { max-width: 54ch; }
.callme__phone { display: inline-flex; align-items: center; gap: 12px; font-size: var(--h22); letter-spacing: 0.02em; font-weight: 500; margin-top: 30px; }
.callme__phone svg { width: 20px; height: 20px; }

/* ---------- brands intro (big title + call-me line) ---------- */
.brands-intro-section { padding: 72px 0 40px; }
@media (min-width: 641px) { .brands-intro-section { padding: 120px 0 64px; } }
.brands-intro { display: grid; gap: 24px; }
@media (min-width: 1024px) { .brands-intro { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: end; } .brands-intro__title { grid-column: span 6; } .brands-intro__text { grid-column: 8 / span 5; } }
.brands-intro__text p { max-width: 46ch; }
.brands-intro__phone { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: var(--h20); font-weight: 500; letter-spacing: 0.02em; }
.brands-intro__phone svg { width: 18px; height: 18px; }
.brand-row { padding: 64px 0 96px; }
@media (min-width: 1024px) { .brand-row { padding: 80px 0 120px; } }
.brand-row .row { margin-top: 0; }
.brand-row__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.brand-row__head .row-head__logo { margin: 0; height: 26px; }

/* ---------- yacht hero: desktop crossfade / mobile swipe ---------- */
.yhero__splide, .yhero__splide .splide__track { position: absolute; inset: 0; }
.yhero__splide .splide__track { overflow: hidden !important; }
.yhero__splide .splide__list { display: block; height: 100%; }
.yhero__splide .splide__slide { position: absolute; inset: 0; flex: none; }
.yhero__progress i { cursor: pointer; }
@media (max-width: 1023px) {
  .yhero--pinned.yhero--swipe { height: 100svh; min-height: 560px; }
  .yhero--swipe .yhero__pin { position: relative; height: 100%; min-height: 0; }
  .yhero--swipe .yhero__splide .splide__list { display: flex; height: 100%; }
  .yhero--swipe .yhero__splide .splide__slide { position: relative; inset: auto; flex: 0 0 100%; width: 100%; opacity: 1; height: 100%; }
  .yhero--swipe .yhero__progress { display: flex; top: calc(var(--header-height) + 18px); bottom: auto; right: var(--pad); }
  .yhero--swipe .yhero__hl { bottom: auto; top: calc(var(--header-height) + 48px); }
  .yhero--swipe .yhero__title.is-hidden { opacity: 1; }
  .yhero--swipe .yhero__title { bottom: 28px; }
  .yhero--swipe .yhero__hl h2 { font-size: var(--h20); }
}
/* ---------- mobile rhythm ---------- */
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .yintro2 { gap: 32px; }
  .yintro2__text { order: -1; }
  .yintro2__pairs { grid-template-columns: 1fr; gap: 0; padding-top: 24px; }
  .yintro2__pairs > div { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(0,0,0,.12); }
  .yintro2__pairs > div:last-child { border-bottom: 1px solid rgba(0,0,0,.12); }
  .yintro2__pairs h4 { margin: 0; font-size: var(--body-12); }
  .yintro2__pairs p { font-size: var(--body-14); color: var(--black); }
  .yintro2__second { display: none; }
  .yintro2__text h2 { margin-bottom: 20px; }
  .yintro2__text .mt-40 { margin-top: 28px; }
  .spec-list div { grid-template-columns: 1fr; gap: 4px; }
  .feature-block__aside { margin-bottom: 10px; }
  .ybar { padding: 12px var(--pad); gap: 8px 16px; }
  .ybar__name { font-size: var(--h20); }
  .ybar__right { width: 100%; justify-content: space-between; margin-left: 0; }
  .row-head__aside .btn { margin-top: 4px; }
  .about__text h3, .about__text p { margin-bottom: 24px; }
  .footer { padding-top: 64px; }
  .footer__bottom { margin-top: 56px; }
}