/* Frigate Yacht Partners — website styles. Every class is prefixed fyp- (brochure-component compatible). */

:root {
  --fyp-navy: #0A1A3F;
  --fyp-navy-2: #0F2350;
  --fyp-navy-3: #07122D;
  --fyp-gold: #D4AF37;
  --fyp-gold-soft: rgba(212, 175, 55, .42);
  --fyp-gold-deep: #85691C;
  --fyp-cream: #F7F3EB;
  --fyp-bg: #F0EFEC;
  --fyp-paper: #FBFAF6;
  --fyp-ink: #0B1530;
  --fyp-text: #3B4254;
  --fyp-muted: #6B7080;
  --fyp-line: rgba(10, 26, 63, .12);
  --fyp-line-light: rgba(247, 243, 235, .16);
  --fyp-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fyp-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fyp-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fyp-ease: cubic-bezier(.22, .61, .36, 1);
  --fyp-ease-out: cubic-bezier(.16, 1, .3, 1);
  --fyp-pad: clamp(20px, 5vw, 72px);
  --fyp-max: 1320px;
  --fyp-nav-h: 92px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.fyp-body { margin: 0; background: var(--fyp-bg); color: var(--fyp-text); font: 400 17px/1.7 var(--fyp-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--fyp-gold); color: var(--fyp-navy); }
:focus-visible { outline: 2px solid var(--fyp-gold); outline-offset: 3px; }
.fyp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.fyp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fyp-skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--fyp-gold); color: var(--fyp-navy); padding: 10px 16px; font: 500 13px var(--fyp-mono); text-decoration: none; transition: top .2s; }
.fyp-skip:focus { top: 16px; }
.fyp-wrap { width: 100%; max-width: var(--fyp-max); margin: 0 auto; padding-inline: var(--fyp-pad); }
.fyp-ico { width: 20px; height: 20px; flex: none; }
section[id] { scroll-margin-top: 64px; }

/* ---------- type ---------- */
.fyp-label { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font: 500 11.5px/1 var(--fyp-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--fyp-gold-deep); }
.fyp-label::after { content: ""; width: 56px; height: 1px; background: currentColor; opacity: .55; transform-origin: left; }
.fyp-label__no { color: var(--fyp-navy); opacity: .5; letter-spacing: .1em; }
.fyp-label--gold { color: var(--fyp-gold); }
.fyp-label--gold .fyp-label__no { color: var(--fyp-cream); }
.fyp-h2 { margin: 0; font: 400 clamp(2.3rem, 1.25rem + 3.3vw, 4.6rem)/1.04 var(--fyp-serif); letter-spacing: -.018em; color: var(--fyp-ink); text-wrap: balance; }
.fyp-h2 em, .fyp-hero__title em { font-style: italic; color: var(--fyp-gold-deep); }
.fyp-h2--sm { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.3rem); }
.fyp-h3 { margin: 0 0 10px; font: 400 clamp(1.35rem, 1.1rem + .7vw, 1.75rem)/1.2 var(--fyp-serif); color: var(--fyp-ink); }
.fyp-lead { margin: 0; max-width: 46ch; font: 300 clamp(1.1rem, 1rem + .35vw, 1.3rem)/1.65 var(--fyp-sans); color: var(--fyp-text); }
.fyp-lead--wide { max-width: 62ch; margin-top: 8px; }
.fyp-note { margin: 22px 0 0; max-width: 72ch; font: 400 12.5px/1.7 var(--fyp-mono); color: var(--fyp-muted); letter-spacing: .01em; }
.fyp-link { color: var(--fyp-navy); text-decoration: none; background: linear-gradient(var(--fyp-gold), var(--fyp-gold)) 0 100%/100% 1px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--fyp-ease); white-space: nowrap; }
.fyp-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- buttons ---------- */
.fyp-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 17px 26px; border-radius: 999px; font: 500 12px/1 var(--fyp-mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; background: transparent; border: 1px solid transparent; overflow: hidden; isolation: isolate; transition: color .35s var(--fyp-ease), border-color .35s, transform .35s var(--fyp-ease); }
/* 13 Sep 2026: every .fyp-btn on the page so far was an <a> (no UA default background), so this line was
   never missed. The new brochure buttons are real <button> elements, and .fyp-btn--ghost sets no
   background of its own — without this, Chrome's default grey button face showed through behind the
   ghost variant's near-white text, nearly unreadable. */
.fyp-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .45s var(--fyp-ease-out); }
.fyp-btn:hover::before { transform: translateY(0); }
.fyp-btn .fyp-ico { width: 18px; height: 18px; transition: transform .35s var(--fyp-ease); }
.fyp-btn:hover .fyp-ico { transform: translateX(2px); }
.fyp-btn--gold { background: var(--fyp-gold); color: var(--fyp-navy); }
.fyp-btn--gold::before { background: var(--fyp-cream); }
.fyp-btn--glass { background: rgba(247, 243, 235, .08); color: var(--fyp-cream); border-color: rgba(247, 243, 235, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fyp-btn--glass::before { background: var(--fyp-cream); }
.fyp-btn--glass:hover { color: var(--fyp-navy); border-color: var(--fyp-cream); }
.fyp-btn--ghost { color: var(--fyp-cream); border-color: var(--fyp-gold-soft); }
.fyp-btn--ghost::before { background: var(--fyp-gold); }
.fyp-btn--ghost:hover { color: var(--fyp-navy); }
.fyp-btn--navy { background: var(--fyp-navy); color: var(--fyp-cream); }
.fyp-btn--navy::before { background: var(--fyp-gold); }
.fyp-btn--navy:hover { color: var(--fyp-navy); }

/* ---------- seal ---------- */
.fyp-mark { display: inline-block; flex: none; line-height: 0; }
.fyp-mark > svg { width: 100%; height: 100%; overflow: visible; }
.fyp-mark .fyp-seal { --fyp-seal-size: 100%; width: 100%; height: 100%; }
.fyp-mark__ring { color: var(--fyp-gold); transform-box: view-box; transform-origin: 50% 50%; animation: fyp-spin 60s linear infinite; }
.fyp-mark__core { color: var(--fyp-cream); }
.fyp-mark--nav { width: 46px; height: 46px; transition: width .4s var(--fyp-ease), height .4s var(--fyp-ease); }
.fyp-mark--hero { width: clamp(88px, 8vw, 118px); height: clamp(88px, 8vw, 118px); }
.fyp-mark--hero .fyp-mark__ring { animation-duration: 40s; }
.fyp-mark--big { width: clamp(120px, 12vw, 168px); height: clamp(120px, 12vw, 168px); margin-bottom: 34px; }
.fyp-mark--footer { width: 64px; height: 64px; }
.fyp-brand:hover .fyp-mark__ring, .fyp-lockup:hover .fyp-mark__ring { animation-duration: 8s; }
@keyframes fyp-spin { to { transform: rotate(360deg); } }

/* ---------- nav ---------- */
.fyp-nav { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--fyp-cream); transition: background-color .5s var(--fyp-ease), box-shadow .5s; }
.fyp-nav::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 18, 45, .55), rgba(7, 18, 45, 0)); pointer-events: none; transition: opacity .5s; }
.fyp-nav__inner { position: relative; display: flex; align-items: center; gap: 28px; height: var(--fyp-nav-h); max-width: 1480px; margin: 0 auto; padding-inline: var(--fyp-pad); transition: height .45s var(--fyp-ease); }
.fyp-nav.is-scrolled { background: rgba(10, 26, 63, .74); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 rgba(212, 175, 55, .22); }
.fyp-nav.is-scrolled::before { opacity: 0; }
.fyp-nav.is-scrolled .fyp-nav__inner { height: 64px; }
.fyp-nav.is-scrolled .fyp-mark--nav { width: 36px; height: 36px; }
.fyp-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.fyp-nav .fyp-brand { transition: opacity .6s var(--fyp-ease), transform .6s var(--fyp-ease); }
.fyp-nav:not(.is-scrolled) .fyp-brand { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.fyp-brand__word { display: flex; flex-direction: column; line-height: 1; }
.fyp-brand__name { font: 400 22px/1 var(--fyp-serif); letter-spacing: .2em; text-transform: uppercase; }
.fyp-brand__sub { margin-top: 6px; font: 500 9.5px/1 var(--fyp-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--fyp-gold); }
.fyp-nav__links { display: flex; gap: clamp(16px, 1.8vw, 30px); }
.fyp-nav__links a { position: relative; padding: 6px 0; font: 400 13px/1 var(--fyp-sans); letter-spacing: .04em; text-decoration: none; color: rgba(247, 243, 235, .82); transition: color .3s; }
.fyp-nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fyp-gold); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--fyp-ease); }
.fyp-nav__links a:hover, .fyp-nav__links a.is-active { color: var(--fyp-cream); }
.fyp-nav__links a:hover::after, .fyp-nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.fyp-nav__cta { padding: 11px 20px; border: 1px solid var(--fyp-gold-soft); border-radius: 999px; font: 500 11px/1 var(--fyp-mono); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.fyp-nav__cta:hover { background: var(--fyp-gold); color: var(--fyp-navy); border-color: var(--fyp-gold); }
.fyp-nav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }
.fyp-nav__progress span { display: block; height: 100%; background: var(--fyp-gold); transform: scaleX(0); transform-origin: left; }
.fyp-burger { display: none; width: 46px; height: 46px; border: 1px solid var(--fyp-gold-soft); border-radius: 50%; background: transparent; cursor: pointer; position: relative; }
.fyp-burger__lines, .fyp-burger__lines::before { position: absolute; left: 14px; right: 14px; height: 1px; background: var(--fyp-cream); transition: transform .4s var(--fyp-ease), top .4s; }
.fyp-burger__lines { top: 19px; }
.fyp-burger__lines::before { content: ""; left: 0; right: 0; top: 7px; }
.fyp-burger[aria-expanded="true"] .fyp-burger__lines { top: 22px; transform: rotate(45deg); }
.fyp-burger[aria-expanded="true"] .fyp-burger__lines::before { top: 0; transform: rotate(-90deg); }

.fyp-menu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: space-between; padding: 110px var(--fyp-pad) 40px; background: var(--fyp-navy); color: var(--fyp-cream); overflow-y: auto; }
.fyp-menu__links { display: flex; flex-direction: column; }
.fyp-menu__links a { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--fyp-line-light); font: 400 clamp(1.6rem, 6vw, 2.2rem)/1.15 var(--fyp-serif); text-decoration: none; opacity: 0; transform: translateY(14px); animation: fyp-menu-in .6s var(--fyp-ease-out) forwards; }
.fyp-menu__links a small { font: 500 11px var(--fyp-mono); color: var(--fyp-gold); letter-spacing: .1em; }
.fyp-menu__links a:nth-child(2) { animation-delay: .04s; } .fyp-menu__links a:nth-child(3) { animation-delay: .08s; }
.fyp-menu__links a:nth-child(4) { animation-delay: .12s; } .fyp-menu__links a:nth-child(5) { animation-delay: .16s; }
.fyp-menu__links a:nth-child(6) { animation-delay: .2s; } .fyp-menu__links a:nth-child(7) { animation-delay: .24s; }
.fyp-menu__links a:nth-child(8) { animation-delay: .28s; } .fyp-menu__links a:nth-child(9) { animation-delay: .32s; }
.fyp-menu__contact { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@keyframes fyp-menu-in { to { opacity: 1; transform: none; } }
body.fyp-locked { overflow: hidden; }

/* ---------- hero ---------- */
.fyp-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 640px; height: 100vh; height: 100svh; max-height: 1080px; overflow: hidden; background: var(--fyp-navy); color: var(--fyp-cream); }
.fyp-hero__media { position: absolute; inset: 0; overflow: hidden; }
.fyp-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; transform-origin: 62% 50%; animation: fyp-zoom 34s ease-in-out infinite alternate; }
@keyframes fyp-zoom { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.fyp-hero__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(7, 18, 45, .86) 0%, rgba(7, 18, 45, .55) 34%, rgba(7, 18, 45, .08) 62%, rgba(7, 18, 45, 0) 100%),
  linear-gradient(0deg, rgba(7, 18, 45, .9) 0%, rgba(7, 18, 45, .25) 34%, rgba(7, 18, 45, 0) 55%),
  linear-gradient(180deg, rgba(7, 18, 45, .45) 0%, rgba(7, 18, 45, 0) 22%); }
@media (min-width: 1100px) {
  .fyp-hero__media { left: 27%; right: -4%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
  .fyp-hero__img { object-position: 18% 50%; transform-origin: 30% 55%; }
  .fyp-hero__shade { background: radial-gradient(55% 75% at 10% 62%, rgba(26, 52, 112, .5), rgba(10, 26, 63, 0) 72%), linear-gradient(0deg, rgba(7, 18, 45, .88) 0%, rgba(7, 18, 45, .18) 30%, rgba(7, 18, 45, 0) 52%), linear-gradient(180deg, rgba(7, 18, 45, .5) 0%, rgba(7, 18, 45, 0) 20%); }
}
.fyp-hero__content { position: relative; padding-top: 120px; padding-bottom: clamp(34px, 5vh, 56px); }
.fyp-hero__lockup { margin-bottom: clamp(24px, 4vh, 40px); }
.fyp-lockup { display: inline-flex; align-items: center; gap: 20px; }
.fyp-lockup__text { display: flex; flex-direction: column; gap: 8px; }
.fyp-lockup__name { font: 400 15px/1 var(--fyp-serif); letter-spacing: .28em; text-transform: uppercase; }
.fyp-lockup__est { font: 500 10.5px/1 var(--fyp-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--fyp-gold); }
.fyp-kicker { margin: 0 0 18px; font: 500 12px/1.4 var(--fyp-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--fyp-gold); }
.fyp-hero__title { margin: 0; font: 400 clamp(3rem, 1.3rem + 5.6vw, 7rem)/.98 var(--fyp-serif); letter-spacing: -.025em; color: var(--fyp-cream); }
.fyp-hero__title em { color: var(--fyp-gold); }
.fyp-hero__lead { margin: 26px 0 0; max-width: 44ch; font: 300 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1.6 var(--fyp-sans); color: rgba(247, 243, 235, .88); }
.fyp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.fyp-hero__facts { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto; padding-top: 0; padding-bottom: 28px; }
.fyp-hero__facts > div { padding: 20px 20px 0 0; border-top: 1px solid rgba(212, 175, 55, .38); }
.fyp-hero__facts > div + div { padding-left: 20px; border-left: 1px solid var(--fyp-line-light); }
.fyp-hero__facts dt { font: 500 10px/1 var(--fyp-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--fyp-gold); }
.fyp-hero__facts dd { margin: 10px 0 0; font: 400 clamp(.95rem, .85rem + .35vw, 1.2rem)/1.3 var(--fyp-serif); color: var(--fyp-cream); }
.fyp-js .fyp-hero__in { opacity: 0; transform: translateY(22px); animation: fyp-rise 1.3s var(--fyp-ease-out) forwards; animation-delay: calc(.25s + var(--fyp-d, 0) * .12s); }
@keyframes fyp-rise { to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.fyp-section { position: relative; padding-block: clamp(80px, 10vw, 144px); }
.fyp-dark { background: var(--fyp-navy); color: rgba(247, 243, 235, .8); }
.fyp-dark .fyp-h2, .fyp-dark .fyp-h3 { color: var(--fyp-cream); }
.fyp-dark .fyp-h2 em { color: var(--fyp-gold); }
.fyp-dark .fyp-lead { color: rgba(247, 243, 235, .78); }
.fyp-head--light .fyp-h2 { color: var(--fyp-cream); }
.fyp-head--light .fyp-h2 em { color: var(--fyp-gold); }
.fyp-note--light { color: rgba(247, 243, 235, .55); }
.fyp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); }
.fyp-split--head { align-items: end; margin-bottom: clamp(48px, 7vw, 96px); }
.fyp-split--head .fyp-lead { justify-self: end; }
.fyp-split--media { align-items: center; }

/* idea */
.fyp-idea { background: var(--fyp-cream); }
.fyp-idea .fyp-head { margin-bottom: clamp(40px, 6vw, 80px); }
.fyp-manifesto { margin: 0 0 clamp(64px, 9vw, 130px); max-width: 30ch; font: 400 clamp(1.7rem, 1rem + 2.5vw, 3.2rem)/1.25 var(--fyp-serif); letter-spacing: -.012em; color: var(--fyp-ink); }
.fyp-manifesto .fyp-w { transition: opacity .35s linear; }
.fyp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.fyp-step__no { display: block; font: 400 clamp(4.5rem, 3rem + 5vw, 8.5rem)/.9 var(--fyp-serif); color: var(--fyp-navy); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.fyp-step__rule { display: block; height: 1px; margin: 26px 0 26px; background: var(--fyp-gold); transform-origin: left; }
.fyp-js [data-reveal] .fyp-step__rule, .fyp-js .fyp-step[data-reveal] .fyp-step__rule { transform: scaleX(0); transition: transform 1.2s var(--fyp-ease-out) .25s; }
.fyp-js .fyp-step.is-in .fyp-step__rule { transform: scaleX(1); }
.fyp-step p { margin: 0; max-width: 34ch; }

/* boat + mosaic */
.fyp-boat { background: var(--fyp-bg); }
.fyp-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(120px, 14vw, 210px); gap: clamp(8px, 1vw, 14px); }
.fyp-mosaic__item { position: relative; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--fyp-navy); cursor: zoom-in; border-radius: 2px; }
.fyp-mosaic__item:nth-child(1) { grid-column: span 7; grid-row: span 3; }
.fyp-mosaic__item:nth-child(2) { grid-column: span 5; grid-row: span 2; }
.fyp-mosaic__item:nth-child(3) { grid-column: span 5; grid-row: span 1; }
.fyp-mosaic__item:nth-child(4) { grid-column: span 4; grid-row: span 2; }
.fyp-mosaic__item:nth-child(5) { grid-column: span 4; grid-row: span 2; }
.fyp-mosaic__item:nth-child(6) { grid-column: span 4; grid-row: span 2; }
.fyp-mosaic__item:nth-child(7) { grid-column: span 6; grid-row: span 2; }
.fyp-mosaic__item:nth-child(8) { grid-column: span 6; grid-row: span 2; }
.fyp-mosaic__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--fyp-ease-out), opacity .6s; }
.fyp-mosaic__item:hover .fyp-mosaic__img { transform: scale(1.06); }
.fyp-mosaic__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 18, 45, .6), rgba(7, 18, 45, 0) 45%); opacity: 0; transition: opacity .5s; }
.fyp-mosaic__item:hover::after, .fyp-mosaic__item:focus-visible::after { opacity: 1; }
.fyp-mosaic__cap { position: absolute; left: 18px; bottom: 16px; z-index: 1; font: 500 11px var(--fyp-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fyp-cream); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--fyp-ease); text-align: left; }
.fyp-mosaic__item:hover .fyp-mosaic__cap, .fyp-mosaic__item:focus-visible .fyp-mosaic__cap { opacity: 1; transform: none; }
.fyp-mosaic__all { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(10, 26, 63, .62); color: var(--fyp-cream); transition: background .5s; }
.fyp-mosaic__all span { font: 400 clamp(1.6rem, 1.1rem + 1.5vw, 2.6rem)/1 var(--fyp-serif); }
.fyp-mosaic__all small { font: 500 11px var(--fyp-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--fyp-gold); }
.fyp-mosaic__item:hover .fyp-mosaic__all { background: rgba(10, 26, 63, .45); }
.fyp-mosaic__item:last-child .fyp-mosaic__cap { display: none; }

/* speed band */
.fyp-speed { position: relative; overflow: hidden; background: var(--fyp-navy-3); color: var(--fyp-cream); padding-block: clamp(96px, 13vw, 180px); }
.fyp-speed__media { position: absolute; inset: -12% 0; }
.fyp-speed__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: .5; will-change: transform; }
.fyp-speed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 18, 45, .95) 0%, rgba(7, 18, 45, .7) 45%, rgba(7, 18, 45, .35) 100%), linear-gradient(0deg, rgba(7, 18, 45, .75), rgba(7, 18, 45, 0) 50%); }
.fyp-speed__inner { position: relative; z-index: 1; }
.fyp-speed .fyp-head { max-width: 860px; }
.fyp-stats { list-style: none; margin: clamp(56px, 8vw, 110px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
.fyp-stats__item { padding-top: 26px; border-top: 1px solid rgba(212, 175, 55, .45); }
.fyp-stats__no { display: flex; align-items: baseline; gap: 12px; }
.fyp-stats__no b { font: 400 clamp(4rem, 2.8rem + 4.5vw, 7.8rem)/.9 var(--fyp-serif); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.fyp-stats__no small { font: 500 12px var(--fyp-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--fyp-gold); }
.fyp-stats__what { display: block; margin-top: 16px; max-width: 26ch; color: rgba(247, 243, 235, .78); }

/* comfort */
.fyp-comfort { background: var(--fyp-paper); }
.fyp-frame { position: relative; margin: 0; }
.fyp-frame__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; box-shadow: 18px 18px 0 -1px var(--fyp-frame-bg, var(--fyp-paper)), 18px 18px 0 0 var(--fyp-gold-soft); }
.fyp-frame--tall .fyp-frame__img { aspect-ratio: 4 / 5; }
/* the offset gold outline is drawn by the image's own box-shadow, so it never wraps the caption */
.fyp-frame__cap { margin-top: 30px; font: 500 11px var(--fyp-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--fyp-muted); }
.fyp-ticks { list-style: none; margin: 30px 0 0; padding: 0; }
.fyp-ticks li { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--fyp-line); }
.fyp-ticks li:last-child { border-bottom: 1px solid var(--fyp-line); }
.fyp-ticks .fyp-ico { width: 18px; height: 18px; margin-top: 5px; color: var(--fyp-gold-deep); }
.fyp-ticks strong { color: var(--fyp-ink); font-weight: 600; }
.fyp-specs { display: grid; grid-template-columns: repeat(4, 1fr); margin: 36px 0 0; background: var(--fyp-navy); color: var(--fyp-cream); border-radius: 2px; }
.fyp-specs > div { padding: 18px 18px 16px; border-right: 1px solid var(--fyp-line-light); border-bottom: 1px solid var(--fyp-line-light); }
.fyp-specs > div:nth-child(4n) { border-right: 0; }
.fyp-specs > div:nth-child(n+5) { border-bottom: 0; }
.fyp-specs dt { font: 500 9.5px/1 var(--fyp-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--fyp-gold); }
.fyp-specs dd { margin: 9px 0 0; font: 400 1.05rem/1.2 var(--fyp-serif); }

/* voyages */
.fyp-voyages { overflow: hidden; padding-top: clamp(40px, 6vw, 80px); }
.fyp-marquee { overflow: hidden; margin-bottom: clamp(56px, 8vw, 110px); border-block: 1px solid var(--fyp-line-light); padding-block: 18px; }
.fyp-marquee__track { display: flex; width: max-content; animation: fyp-marquee 70s linear infinite; }
.fyp-marquee__track span { display: inline-flex; align-items: center; gap: 40px; padding-right: 40px; font: italic 400 clamp(1.8rem, 1.2rem + 2vw, 3.2rem)/1.1 var(--fyp-serif); color: transparent; -webkit-text-stroke: 1px rgba(212, 175, 55, .7); white-space: nowrap; }
.fyp-marquee__track span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fyp-gold); }
@keyframes fyp-marquee { to { transform: translateX(-50%); } }
.fyp-voyages__fallback { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.fyp-voyages__chart { position: sticky; top: 96px; border: 1px solid var(--fyp-line-light); padding: 10px; background: rgba(247, 243, 235, .02); }
.fyp-chart { display: block; width: 100%; height: auto; }
.fyp-board__group + .fyp-board__group { margin-top: 44px; }
.fyp-board { list-style: none; margin: 0; padding: 0; }
.fyp-board__row { display: grid; grid-template-columns: 132px 1fr auto; gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--fyp-line-light); transition: background .3s; }
.fyp-board__row:last-child { border-bottom: 1px solid var(--fyp-line-light); }
.fyp-board__row:hover { background: linear-gradient(90deg, rgba(212, 175, 55, .08), rgba(212, 175, 55, 0)); }
.fyp-board__time { display: flex; align-items: baseline; gap: 4px; color: var(--fyp-cream); white-space: nowrap; }
.fyp-board__time b { font: 400 1.9rem/1 var(--fyp-serif); font-variant-numeric: lining-nums tabular-nums; }
.fyp-board__time small { margin-right: 8px; font: 500 10px var(--fyp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fyp-gold); }
.fyp-board__place strong { display: block; font: 400 1.25rem/1.25 var(--fyp-serif); color: var(--fyp-cream); }
.fyp-board__place em { display: block; margin-top: 4px; font: 400 14px/1.5 var(--fyp-sans); font-style: normal; color: rgba(247, 243, 235, .62); }
.fyp-board__nm { font: 500 11px var(--fyp-mono); letter-spacing: .12em; color: rgba(247, 243, 235, .5); }

/* days */
.fyp-yourdays { background: var(--fyp-cream); }
.fyp-year { margin-bottom: clamp(48px, 7vw, 90px); }
.fyp-year__bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.fyp-year__m { position: relative; height: clamp(64px, 8vw, 104px); background: rgba(10, 26, 63, .07); border-radius: 2px; overflow: hidden; }
.fyp-year__m span { position: absolute; left: 10px; bottom: 10px; font: 500 10.5px var(--fyp-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fyp-navy); z-index: 1; }
.fyp-year__m span i { font-style: normal; }
.fyp-year__m--high { background: var(--fyp-navy); }
.fyp-year__m--high span { color: var(--fyp-cream); }
.fyp-year__m--dec { background: linear-gradient(90deg, rgba(10, 26, 63, .07) 62%, var(--fyp-navy) 62%); }
.fyp-year__m--yard { background: repeating-linear-gradient(45deg, rgba(10, 26, 63, .28) 0 2px, transparent 2px 7px); }
.fyp-js .fyp-year.is-in .fyp-year__m { animation: fyp-bar .9s var(--fyp-ease-out) both; }
.fyp-year__m:nth-child(2) { animation-delay: .04s !important; } .fyp-year__m:nth-child(3) { animation-delay: .08s !important; }
.fyp-year__m:nth-child(4) { animation-delay: .12s !important; } .fyp-year__m:nth-child(5) { animation-delay: .16s !important; }
.fyp-year__m:nth-child(6) { animation-delay: .2s !important; } .fyp-year__m:nth-child(7) { animation-delay: .24s !important; }
.fyp-year__m:nth-child(8) { animation-delay: .28s !important; } .fyp-year__m:nth-child(9) { animation-delay: .32s !important; }
.fyp-year__m:nth-child(10) { animation-delay: .36s !important; } .fyp-year__m:nth-child(11) { animation-delay: .4s !important; }
.fyp-year__m:nth-child(12) { animation-delay: .44s !important; }
@keyframes fyp-bar { from { transform: scaleY(.2); transform-origin: bottom; opacity: 0; } to { transform: none; opacity: 1; } }
.fyp-year__key { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0 0; padding: 0; font: 400 13px var(--fyp-mono); color: var(--fyp-muted); }
.fyp-year__key li { display: flex; align-items: center; gap: 10px; }
.fyp-key { width: 14px; height: 14px; border-radius: 2px; }
.fyp-key--high { background: var(--fyp-navy); }
.fyp-key--rest { background: rgba(10, 26, 63, .12); }
.fyp-key--yard { background: repeating-linear-gradient(45deg, rgba(10, 26, 63, .5) 0 2px, transparent 2px 5px); }
.fyp-yourdays__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 100px); }
.fyp-tally { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--fyp-navy); }
.fyp-tally > div { padding: 18px 0 0; }
.fyp-tally dt { font: 500 10px var(--fyp-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fyp-muted); }
.fyp-tally dd { margin: 8px 0 0; font: 400 clamp(2.6rem, 2rem + 2vw, 4rem)/1 var(--fyp-serif); color: var(--fyp-ink); }
.fyp-tally__total dd { color: var(--fyp-gold-deep); font-style: italic; }
.fyp-rot { width: 100%; border-collapse: collapse; font: 500 14px var(--fyp-mono); text-align: center; background: var(--fyp-paper); box-shadow: 0 30px 60px -40px rgba(10, 26, 63, .35); }
.fyp-rot th, .fyp-rot td { padding: 12px 6px; border-bottom: 1px solid var(--fyp-line); }
.fyp-rot thead th { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fyp-muted); font-weight: 500; border-bottom: 1px solid var(--fyp-navy); }
.fyp-rot tbody th { text-align: left; padding-left: 16px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fyp-muted); font-weight: 500; white-space: nowrap; }
.fyp-rot td { color: var(--fyp-ink); }
.fyp-rot__you { position: relative; color: var(--fyp-navy) !important; font-weight: 600; }
.fyp-rot__you::before { content: ""; position: absolute; inset: 6px 50%; width: 32px; margin-left: -16px; border-radius: 50%; background: var(--fyp-gold); z-index: 0; aspect-ratio: 1; inset-block: 50%; transform: translateY(-50%); height: 32px; }
.fyp-rot td { position: relative; z-index: 0; }
.fyp-rot__you { isolation: isolate; }
.fyp-rot__you::before { z-index: -1; }

/* cost */
.fyp-cost { background: var(--fyp-bg); }
.fyp-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 9px 16px; border: 1px solid rgba(133, 105, 28, .35); border-radius: 999px; font: 500 11px/1 var(--fyp-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fyp-gold-deep); background: rgba(212, 175, 55, .08); }
.fyp-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fyp-gold); box-shadow: 0 0 0 0 rgba(212, 175, 55, .6); animation: fyp-ping 2.4s ease-out infinite; }
@keyframes fyp-ping { 70%, 100% { box-shadow: 0 0 0 9px rgba(212, 175, 55, 0); } }
.fyp-prices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
.fyp-price { position: relative; margin: 0; padding: clamp(32px, 4vw, 56px); background: var(--fyp-paper); border: 1px solid var(--fyp-line); border-radius: 2px; overflow: hidden; }
.fyp-price--dark { background: var(--fyp-navy); color: rgba(247, 243, 235, .8); border-color: var(--fyp-navy); }
.fyp-price__fig { margin: 0; font: 400 clamp(2.6rem, 1.6rem + 3.2vw, 4.8rem)/1 var(--fyp-serif); letter-spacing: -.02em; color: var(--fyp-ink); font-variant-numeric: lining-nums; white-space: nowrap; }
.fyp-price--dark .fyp-price__fig { color: var(--fyp-cream); font-size: clamp(2.1rem, 1.3rem + 2.6vw, 4rem); }
.fyp-price__dash { margin: 0 .18em; color: var(--fyp-gold); }
.fyp-price__per { margin: 14px 0 0; font: 500 11px var(--fyp-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--fyp-muted); }
.fyp-price--dark .fyp-price__per { color: var(--fyp-gold); }
.fyp-price__rule { display: block; width: 56px; height: 1px; margin: 28px 0 22px; background: var(--fyp-gold); }
.fyp-price__text { margin: 0; max-width: 42ch; }
.fyp-lists { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); margin-top: clamp(56px, 7vw, 96px); }
.fyp-list ul { list-style: none; margin: 18px 0 0; padding: 0; }
.fyp-list li { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--fyp-line); font-size: 16px; }
.fyp-list li:last-child { border-bottom: 1px solid var(--fyp-line); }
.fyp-list .fyp-ico { width: 17px; height: 17px; margin-top: 5px; color: var(--fyp-gold-deep); }
.fyp-list strong { color: var(--fyp-ink); font-weight: 600; }
.fyp-reserve { display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); margin-top: clamp(48px, 6vw, 80px); padding: clamp(26px, 3vw, 40px) clamp(26px, 4vw, 56px); border: 1px solid var(--fyp-gold-soft); background: linear-gradient(90deg, rgba(212, 175, 55, .1), rgba(212, 175, 55, 0) 70%); }
.fyp-reserve__fig { margin: 0; font: italic 400 clamp(2.4rem, 1.8rem + 2vw, 3.8rem)/1 var(--fyp-serif); color: var(--fyp-gold-deep); white-space: nowrap; }
.fyp-reserve__text { margin: 0; max-width: 60ch; }
.fyp-reserve__text strong { color: var(--fyp-ink); }
.fyp-onrequest { max-width: 60ch; padding: clamp(32px, 4vw, 56px); background: var(--fyp-paper); border: 1px solid var(--fyp-line); }
.fyp-onrequest p { margin: 0 0 22px; }

/* who */
.fyp-who { background: var(--fyp-paper); }
.fyp-split--flip .fyp-frame { order: 2; }
.fyp-who .fyp-lead { margin-top: 28px; }
.fyp-cv { list-style: none; margin: 30px 0 0; padding: 0; }
.fyp-cv li { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 15px 0; border-top: 1px solid var(--fyp-line); }
.fyp-cv li:last-child { border-bottom: 1px solid var(--fyp-line); }
.fyp-cv__k { font: 500 11px/1.9 var(--fyp-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--fyp-gold-deep); }
.fyp-quote { margin: 38px 0 0; padding: 0 0 0 26px; border-left: 1px solid var(--fyp-gold); }
.fyp-quote p { margin: 0; font: italic 400 clamp(1.3rem, 1.05rem + .8vw, 1.8rem)/1.4 var(--fyp-serif); color: var(--fyp-ink); max-width: 30ch; }

/* protection */
.fyp-protect { overflow: hidden; background: radial-gradient(120% 90% at 90% 0%, var(--fyp-navy-2) 0%, var(--fyp-navy) 55%, var(--fyp-navy-3) 100%); }
.fyp-stamp-wrap { justify-self: end; }
.fyp-stamp { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 28px; border: 3px double var(--fyp-gold); color: var(--fyp-gold); transform: rotate(-7deg); font: 500 10px/1.3 var(--fyp-mono); letter-spacing: .22em; text-transform: uppercase; }
.fyp-stamp__big { font: 500 clamp(1.3rem, 1rem + 1vw, 1.8rem)/1.1 var(--fyp-serif); letter-spacing: .14em; }
.fyp-js .fyp-stamp-wrap[data-reveal] { opacity: 1; transform: none; }
.fyp-js .fyp-stamp-wrap .fyp-stamp { opacity: 0; transform: rotate(-7deg) scale(1.7); }
.fyp-js .fyp-stamp-wrap.is-in .fyp-stamp { animation: fyp-stamp .7s cubic-bezier(.3, 1.4, .5, 1) .35s forwards; }
@keyframes fyp-stamp { 60% { opacity: 1; transform: rotate(-7deg) scale(.94); } to { opacity: .95; transform: rotate(-7deg) scale(1); } }
.fyp-flow { list-style: none; margin: clamp(48px, 7vw, 90px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); position: relative; }
.fyp-flow__step { position: relative; padding: 34px 30px 36px; border: 1px solid var(--fyp-line-light); background: rgba(247, 243, 235, .03); }
.fyp-flow__step + .fyp-flow__step::before { content: ""; position: absolute; left: calc(-1 * clamp(16px, 2vw, 28px)); top: 56px; width: clamp(16px, 2vw, 28px); height: 1px; background: var(--fyp-gold); }
.fyp-flow__no { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 26px; border: 1px solid var(--fyp-gold); border-radius: 50%; font: 400 1.2rem/1 var(--fyp-serif); color: var(--fyp-gold); }
.fyp-flow__step p { margin: 0; color: rgba(247, 243, 235, .74); }
.fyp-promise { margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 3.5vw, 48px); border-top: 1px solid var(--fyp-gold-soft); border-bottom: 1px solid var(--fyp-gold-soft); }
.fyp-promise__text { margin: 0; }
.fyp-promise__text p { margin: 0; max-width: 70ch; font: italic 400 clamp(1.1rem, .95rem + .5vw, 1.4rem)/1.6 var(--fyp-serif); color: var(--fyp-cream); }

/* faq */
.fyp-faq { background: var(--fyp-cream); }
.fyp-split--faq { grid-template-columns: .8fr 1.2fr; align-items: start; }
.fyp-faq__head { position: sticky; top: 110px; }
.fyp-faq__head .fyp-lead { margin-top: 28px; }
.fyp-qa { border-top: 1px solid var(--fyp-line); }
.fyp-qa:last-child { border-bottom: 1px solid var(--fyp-line); }
.fyp-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; font: 400 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.3 var(--fyp-serif); color: var(--fyp-ink); transition: color .3s; }
.fyp-qa summary::-webkit-details-marker { display: none; }
.fyp-qa summary:hover { color: var(--fyp-gold-deep); }
.fyp-qa summary .fyp-ico { width: 22px; height: 22px; color: var(--fyp-gold-deep); transition: transform .45s var(--fyp-ease); }
.fyp-qa[open] summary .fyp-ico { transform: rotate(45deg); }
.fyp-qa__a { overflow: hidden; }
.fyp-qa__a p { margin: 0; padding: 0 48px 28px 0; max-width: 60ch; }

/* enquire */
.fyp-enquire { position: relative; overflow: hidden; padding-block: clamp(110px, 15vw, 210px); background: var(--fyp-navy); color: var(--fyp-cream); text-align: center; }
.fyp-enquire__media { position: absolute; inset: -12% 0; }
.fyp-enquire__img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.fyp-enquire__shade { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(10, 26, 63, .7), rgba(7, 18, 45, .92)); }
.fyp-enquire__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.fyp-enquire .fyp-label { justify-content: center; }
.fyp-enquire .fyp-label::before { content: ""; width: 56px; height: 1px; background: currentColor; opacity: .55; }
.fyp-enquire .fyp-h2 { color: var(--fyp-cream); max-width: 16ch; }
.fyp-enquire .fyp-h2 em { color: var(--fyp-gold); }
.fyp-enquire .fyp-lead { margin-top: 28px; max-width: 54ch; color: rgba(247, 243, 235, .82); }
.fyp-enquire__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; max-width: 1000px; margin-top: 52px; }
/* 11 Sep 2026: while the site offers WhatsApp only, the single contact card sits centred instead of leaving an empty column. */
.fyp-enquire__actions > .fyp-contact:only-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 492px); }
.fyp-contact { display: flex; align-items: center; gap: 18px; padding: 22px 26px; text-align: left; text-decoration: none; color: var(--fyp-cream); border: 1px solid rgba(212, 175, 55, .5); background: rgba(7, 18, 45, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .45s var(--fyp-ease), color .45s, border-color .45s, transform .45s var(--fyp-ease); }
.fyp-contact:hover { background: var(--fyp-gold); color: var(--fyp-navy); border-color: var(--fyp-gold); transform: translateY(-3px); }
.fyp-contact__ico { width: 28px; height: 28px; color: var(--fyp-gold); transition: color .45s; }
.fyp-contact:hover .fyp-contact__ico { color: var(--fyp-navy); }
.fyp-contact__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-right: auto; }
.fyp-contact__text small { font: 500 10.5px var(--fyp-mono); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.fyp-contact__text strong { font: 400 clamp(1rem, .85rem + .45vw, 1.25rem)/1.2 var(--fyp-serif); white-space: nowrap; }
.fyp-contact__go { transition: transform .45s var(--fyp-ease); }
.fyp-contact:hover .fyp-contact__go { transform: translateX(4px); }

/* send me the brochure (13 Sep 2026): a small name+email form, under the WhatsApp/email cards */
.fyp-brochure { width: 100%; max-width: 640px; margin: 40px auto 0; padding-top: 40px; border-top: 1px solid var(--fyp-line-light); }
.fyp-brochure__lead { margin: 0 0 18px; font: 500 11px var(--fyp-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--fyp-gold); }
.fyp-brochure__form { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.fyp-brochure__fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.fyp-brochure__input { flex: 1 1 220px; max-width: 320px; padding: 15px 18px; font: 400 17px var(--fyp-sans); color: var(--fyp-cream); background: rgba(247, 243, 235, .08); border: 1px solid rgba(212, 175, 55, .38); border-radius: 999px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fyp-brochure__input::placeholder { color: rgba(247, 243, 235, .5); }
.fyp-brochure__input:focus-visible { outline: 2px solid var(--fyp-gold); outline-offset: 2px; }
.fyp-brochure__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 700px) {
  .fyp-brochure__input { max-width: 100%; flex-basis: 100%; }
  .fyp-brochure__actions .fyp-btn { flex: 1 1 100%; justify-content: center; }
}

/* footer */
.fyp-footer { background: var(--fyp-navy-3); color: rgba(247, 243, 235, .62); padding-block: clamp(64px, 8vw, 110px) 34px; font-size: 14px; }
.fyp-footer__top { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--fyp-line-light); }
.fyp-brand--footer { color: var(--fyp-cream); align-self: start; }
.fyp-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; align-content: start; }
.fyp-footer a { text-decoration: none; transition: color .3s; }
.fyp-footer a:hover { color: var(--fyp-gold); }
.fyp-footer__contact { display: flex; flex-direction: column; gap: 10px; }
.fyp-footer__contact .fyp-label { margin-bottom: 8px; }
.fyp-footer__contact p { margin: 8px 0 0; }
.fyp-footer__legal { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-block: 40px; font-size: 12.5px; line-height: 1.75; color: rgba(247, 243, 235, .5); }
.fyp-footer__legal p { margin: 0; }
.fyp-footer__base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--fyp-line-light); font: 500 10.5px var(--fyp-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(247, 243, 235, .4); }

/* lightbox */
.fyp-lightbox { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto 1fr auto; background: #050C1E; color: var(--fyp-cream); opacity: 0; transition: opacity .45s var(--fyp-ease); touch-action: pan-y; }
.fyp-lightbox.is-open { opacity: 1; }
.fyp-lightbox__top { display: flex; align-items: center; gap: 20px; padding: 18px var(--fyp-pad); }
.fyp-lightbox__brand { font: italic 400 18px var(--fyp-serif); margin-right: auto; }
.fyp-lightbox__count { font: 500 12px var(--fyp-mono); letter-spacing: .2em; color: var(--fyp-gold); font-variant-numeric: tabular-nums; }
.fyp-lightbox__btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(247, 243, 235, .22); background: rgba(247, 243, 235, .04); cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
.fyp-lightbox__btn:hover { background: var(--fyp-gold); border-color: var(--fyp-gold); color: var(--fyp-navy); }
.fyp-lightbox__btn .fyp-ico { width: 22px; height: 22px; }
.fyp-lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 clamp(12px, 8vw, 120px); overflow: hidden; }
.fyp-lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity .45s var(--fyp-ease), transform .6s var(--fyp-ease-out); }
.fyp-lightbox__img.is-leaving { opacity: 0; transform: scale(.985) translateX(var(--fyp-dir, 0)); }
.fyp-lightbox__img.is-entering { opacity: 0; transform: scale(1.015); }
.fyp-lightbox__spin { position: absolute; width: 34px; height: 34px; border: 1px solid rgba(212, 175, 55, .25); border-top-color: var(--fyp-gold); border-radius: 50%; animation: fyp-spin 1s linear infinite; opacity: 0; transition: opacity .3s; pointer-events: none; }
.fyp-lightbox.is-loading .fyp-lightbox__spin { opacity: 1; }
.fyp-lightbox__nav { position: absolute; top: 50%; margin-top: -26px; }
.fyp-lightbox__nav--prev { left: clamp(10px, 2vw, 34px); }
.fyp-lightbox__nav--next { right: clamp(10px, 2vw, 34px); }
.fyp-lightbox__bottom { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; padding: 16px var(--fyp-pad) 22px; }
.fyp-lightbox__cap { margin: 0; font: 400 1.15rem/1.3 var(--fyp-serif); }
.fyp-lightbox__hint { margin: 0; font: 500 10px/1.8 var(--fyp-mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(247, 243, 235, .45); }
.fyp-lightbox__bar { grid-column: 1 / -1; height: 1px; background: rgba(247, 243, 235, .15); }
.fyp-lightbox__bar span { display: block; height: 100%; background: var(--fyp-gold); transform-origin: left; transition: transform .5s var(--fyp-ease); }

/* voyage-map component inside our section: our heading leads, so its duplicate heading is hidden */
.fyp-voyages .fyp-voy-head { display: none; }

/* ---------- reveal ---------- */
.fyp-js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--fyp-ease-out), transform 1.1s var(--fyp-ease-out); transition-delay: calc(var(--fyp-d, 0) * .12s); }
.fyp-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .fyp-nav__links { display: none; }
  .fyp-burger { display: block; }
}
@media (max-width: 960px) {
  .fyp-split, .fyp-split--faq, .fyp-yourdays__grid, .fyp-voyages__fallback, .fyp-lists, .fyp-prices { grid-template-columns: 1fr; }
  .fyp-split--head .fyp-lead { justify-self: start; }
  .fyp-split--flip .fyp-frame { order: 0; }
  .fyp-voyages__chart, .fyp-faq__head { position: static; }
  .fyp-steps, .fyp-stats, .fyp-flow { grid-template-columns: 1fr; }
  .fyp-flow__step + .fyp-flow__step::before { left: 56px; top: calc(-1 * clamp(16px, 2vw, 28px)); width: 1px; height: clamp(16px, 2vw, 28px); }
  .fyp-stamp-wrap { justify-self: start; }
  .fyp-enquire__actions { grid-template-columns: 1fr; max-width: 520px; }
  .fyp-footer__top, .fyp-footer__legal { grid-template-columns: 1fr; gap: 32px; }
  .fyp-specs { grid-template-columns: repeat(2, 1fr); }
  .fyp-specs > div:nth-child(4n) { border-right: 1px solid var(--fyp-line-light); }
  .fyp-specs > div:nth-child(2n) { border-right: 0; }
  .fyp-specs > div:nth-child(n+5) { border-bottom: 1px solid var(--fyp-line-light); }
  .fyp-specs > div:nth-child(n+7) { border-bottom: 0; }
  .fyp-frame__img { box-shadow: 10px 10px 0 -1px var(--fyp-frame-bg, var(--fyp-paper)), 10px 10px 0 0 var(--fyp-gold-soft); }
  .fyp-frame--tall .fyp-frame__img { aspect-ratio: 4 / 3; }
}
@media (max-width: 700px) {
  body.fyp-body { font-size: 16px; }
  .fyp-nav__cta { display: none; }
  .fyp-brand__name { font-size: 18px; }
  .fyp-hero { height: auto; min-height: min(100svh, 900px); max-height: none; }
  .fyp-hero__img { object-position: 36% 50%; }
  .fyp-hero__shade { background: linear-gradient(0deg, rgba(7, 18, 45, .95) 0%, rgba(7, 18, 45, .72) 42%, rgba(7, 18, 45, .15) 70%, rgba(7, 18, 45, .45) 100%); }
  .fyp-hero__content { padding-top: 116px; }
  .fyp-lockup { gap: 14px; }
  .fyp-lockup__name { font-size: 12px; letter-spacing: .2em; }
  .fyp-hero__actions .fyp-btn { flex: 1 1 100%; justify-content: center; }
  .fyp-hero__facts { grid-template-columns: 1fr 1fr; }
  .fyp-hero__facts > div { padding: 14px 12px 12px 0; }
  .fyp-hero__facts > div + div { padding-left: 0; border-left: 0; }
  .fyp-hero__facts > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--fyp-line-light); }
  .fyp-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .fyp-mosaic__item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .fyp-mosaic__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .fyp-mosaic__item:nth-child(8) { grid-column: span 2; }
  .fyp-mosaic__cap { display: none; }
  .fyp-board__row { grid-template-columns: 96px 1fr; }
  .fyp-board__nm { grid-column: 2; }
  .fyp-board__time b { font-size: 1.55rem; }
  .fyp-tally dd { font-size: 2.4rem; }
  .fyp-year__m span { left: 50%; transform: translateX(-50%); letter-spacing: 0; }
  .fyp-year__m span i { display: none; }
  .fyp-rot { font-size: 12.5px; }
  .fyp-rot th, .fyp-rot td { padding: 10px 2px; }
  .fyp-rot tbody th { padding-left: 8px; font-size: 9.5px; letter-spacing: .04em; }
  .fyp-rot__you::before { width: 26px; height: 26px; margin-left: -13px; }
  .fyp-reserve { flex-direction: column; align-items: flex-start; }
  .fyp-cv li { grid-template-columns: 1fr; gap: 4px; }
  .fyp-enquire__actions { grid-template-columns: 1fr; }
  .fyp-contact__text strong { font-size: 1rem; white-space: normal; overflow-wrap: anywhere; }
  .fyp-qa__a p { padding-right: 0; }
  .fyp-lightbox__nav { top: auto; bottom: 86px; margin-top: 0; }
  .fyp-lightbox__stage { padding: 0 0 70px; }
  .fyp-lightbox__hint { display: none; }
  .fyp-footer__nav { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .fyp-hero__img, .fyp-marquee__track { animation: none !important; }
  .fyp-mark__ring { animation: fyp-spin 120s linear infinite !important; }
  .fyp-js [data-reveal], .fyp-js .fyp-hero__in { opacity: 1 !important; transform: none !important; }
}

/* ---------- blend treatment (13 Sep 2026): the recipe from components/video-and-contact/component.css —
   16:9, rounded corners, a soft shadow, a navy-to-transparent shade, a slow 1.02→1.07 hover/focus zoom —
   reused as shared classes wherever a photo panel on the page wants the same premium, "it moves" feel. */
.fyp-blend { position: relative; display: block; overflow: hidden; border-radius: 8px; }
.fyp-blend--card { box-shadow: 0 10px 40px rgba(10, 26, 63, .18); }
.fyp-blend--16x9 { aspect-ratio: 16 / 9; }
.fyp-blend__img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }
.fyp-blend:hover .fyp-blend__img, .fyp-blend:focus-within .fyp-blend__img, .fyp-blend:focus-visible .fyp-blend__img { transform: scale(1.07); }
.fyp-blend__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 26, 63, 0) 40%, rgba(10, 26, 63, .68)); pointer-events: none; }

/* the walkthrough video, under the gallery (04-boat.html) */
.fyp-boat__video { max-width: 760px; margin: clamp(48px, 6vw, 88px) auto 0; }
.fyp-boat__video .fyp-h3 { margin-bottom: 18px; }

/* the gallery mosaic (04-boat.html) tuned to the same numbers/easing as the blend recipe above.
   Kept as its own rules rather than the .fyp-blend classes: the mosaic already carries data-lightbox
   triggers and its own hover caption/shade reveal, and re-classing the images risked two transform
   rules fighting on the same element. Radius 2px -> 8px; hover scale 1.06 -> 1.07 on the blend's easing. */
.fyp-mosaic__item { border-radius: 8px; }
.fyp-mosaic__img { transform: scale(1.02); transition: transform 1.2s cubic-bezier(.4, 0, .2, 1), opacity .6s; }
.fyp-mosaic__item:hover .fyp-mosaic__img, .fyp-mosaic__item:focus-visible .fyp-mosaic__img { transform: scale(1.07); }

/* the voyages chart panel (05-voyages.html): same rounded-and-shadowed language as a "card", and a
   little life on the board rows to match, since this section has no photographs of its own to blend. */
.fyp-voyages__chart { border-radius: 8px; box-shadow: 0 10px 40px rgba(10, 26, 63, .18); transition: box-shadow 1.2s cubic-bezier(.4, 0, .2, 1); }
.fyp-board__row { transition: background .3s, transform 1.2s cubic-bezier(.4, 0, .2, 1); }
.fyp-board__row:hover { transform: translateX(6px); }

/* the founder portrait (08-who.html): NOT a literal scale — .fyp-frame__img carries its own offset
   gold-and-cream box-shadow (the frame's signature look, shared with the comfort-section frame), and
   clipping it to crop a hover-zoom (via overflow:hidden) would cut that offset shadow off too. Scoped
   to .fyp-who only, it gets the same slow 1.2s cubic-bezier easing as the blend recipe, on brightness
   instead of scale, so the portrait still visibly "wakes up" on hover/focus without losing its frame. */
.fyp-who .fyp-frame__img { transition: filter 1.2s cubic-bezier(.4, 0, .2, 1); }
.fyp-who .fyp-frame:hover .fyp-frame__img, .fyp-who .fyp-frame:focus-within .fyp-frame__img { filter: brightness(1.06) saturate(1.1); }

/* the enquire background (11-enquire.html): the same slow zoom as the hero, so the last full-bleed
   photo on the page moves the same way as the first one. A hover zoom does not apply to a full-bleed
   background nobody points a cursor at, so this borrows the hero's continuous drift instead — applied
   to a wrapper, not the image itself, because site.js's parallax script writes its own inline
   translate3d transform onto .fyp-enquire__img every scroll frame, which would fight a transform
   animation placed on that same element and same property. */
.fyp-enquire__zoom { display: block; width: 100%; height: 100%; transform: scale(1.02); animation: fyp-blend-drift 26s ease-in-out infinite alternate; }
@keyframes fyp-blend-drift { from { transform: scale(1.02); } to { transform: scale(1.07); } }

/* how the six of you run her (06b, 13 Sep 2026) */
.fyp-run { background: var(--fyp-bg); }
.fyp-run__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 48px; }
.fyp-run__card { position: relative; padding: 30px 26px 28px; background: var(--fyp-paper); border: 1px solid var(--fyp-line); }
.fyp-run__card::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; background: linear-gradient(90deg, var(--fyp-gold), rgba(212, 175, 55, 0)); }
.fyp-run__card p { margin: 12px 0 0; font: 300 15px/1.6 var(--fyp-sans); color: var(--fyp-text); }
@media (max-width: 960px) { .fyp-run__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .fyp-run__grid { grid-template-columns: 1fr; } }

/* register interest: other boats, other shares, smaller craft (12 Sep 2026) */
.fyp-interest { background: var(--fyp-paper); }
.fyp-interest__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.fyp-interest__card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 28px; background: #fff; border: 1px solid rgba(10, 26, 63, .1); box-shadow: 0 10px 40px rgba(10, 26, 63, .06); }
.fyp-interest__card::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; background: linear-gradient(90deg, var(--fyp-gold), rgba(212, 175, 55, 0)); }
.fyp-interest__card .fyp-label { margin-bottom: 4px; }
.fyp-interest__text { margin: 0; flex: 1; font: 300 1rem/1.65 var(--fyp-sans); color: var(--fyp-text); }
.fyp-interest__card .fyp-btn { align-self: flex-start; }
.fyp-interest__note { margin: 30px 0 0; font: 500 12px/1.6 var(--fyp-mono); letter-spacing: .08em; color: var(--fyp-gold-deep); }
@media (max-width: 900px) { .fyp-interest__grid { grid-template-columns: minmax(0, 1fr); } }

/* 13 Sep 2026: the projected boat (boat-3d) as the hero's living backdrop. The component sizes itself 3:2; inside the
   hero it fills the media box instead, and its own shade/title stay off because the hero carries its own words. */
.fyp-hero__media .fyp-boat3d { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; background: transparent; }
.fyp-hero__media .fyp-boat3d-shade, .fyp-hero__media .fyp-boat3d-title { display: none !important; }
.fyp-hero__media .fyp-boat3d-scene { object-position: 58% 50%; }