/* All In House home, draft 10: the first screen, after astonmartin.com (read 24 Sep 2026).
   The intro: the logo alone on black for 3s, on the reference's timeline (Logan, 24 Sep: no map, "we're global").
   Then the old home arrival (after the Claude Opus 5.5 announcement): the first slide opens from a sliver on the
   helicopter photo's horizon into a window, and the black sides slide open like double doors; the title rises from
   behind its line. Then a full-screen carousel. One slide per service; slides move sideways 800ms `ease`, loop
   both ways, arrows sit either side of the title and re-enter with a bounce, and each slide's words rise in
   (eyebrow .5s, title .8s, buttons bounce .8s, all after .2s). Identity is the house's: black, full white,
   Perandory, square outlined buttons, our own strokes. The menu is the faena.com mechanism, as on the wellness draft.
   The intro plays once per tab and never under reduced motion. Nothing here is scroll-driven. */

/* ---------- Intro ---------- */
.x-intro { display: none; }
html.x-intro-on .x-intro { display: block; position: fixed; inset: 0; z-index: 10000; background: #0a0a0a; }
html.x-intro-on body { overflow: hidden; }
.x-intro.is-leaving { opacity: 0; transition: opacity 1s ease-in-out; }
.x-intro__stage { position: absolute; inset: 0; opacity: 0; }
.x-intro.is-playing .x-intro__stage { animation: x-stage-in 1s ease-in forwards; }
@keyframes x-stage-in { to { opacity: 1; } }

.x-intro__logo { position: absolute; left: 50%; top: 50%; width: clamp(150px, 15vw, 230px); transform: translate(-50%, -50%); opacity: 0; }
.x-intro__logo img { width: 100%; height: auto; display: block; }
@media (max-width: 767px) { .x-intro__logo { width: 42vw; } }
/* The reference's 3s film: the logo is in by .5s and gone by 3s. */
.x-intro.is-playing .x-intro__logo { animation: x-logo 3s linear forwards; }
@keyframes x-logo { 0% { opacity: 0; } 8% { opacity: 0; } 17% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- The doors (the old home arrival, moved onto the first slide) ----------
   --hz is the sea line on screen; --hz-t / --hz-b are the insets of a 2px sliver on it (set by intro.js from the crop).
   Keyframes use plain percentages only: WebKit misreads calc() inside clip-path keyframes and opens from the top. */
:root { --x-out: cubic-bezier(0.165, 0.84, 0.44, 1); --x-inout: cubic-bezier(0.76, 0, 0.24, 1); }
.x-slide.is-door { --hz: 45.6%; --hz-t: 45.45%; --hz-b: 54.25%; --side: 34%; }
@media (max-width: 700px) { .x-slide.is-door { --side: 19%; } }
html.x-intro-on .x-slide.is-door picture { clip-path: inset(var(--hz-t) var(--side) var(--hz-b) var(--side)); }
html.x-intro-on .x-head, html.x-intro-on .x-arrow { opacity: 0; }
html.x-door .x-slide.is-door picture { animation: x-window 2000ms linear both; }
.x-slide.is-door.is-active img { transform-origin: 50% var(--hz); animation: x-push 2900ms var(--x-out) both; }
.x-slide.is-door.is-active .x-slide__shade { animation: x-fade 1000ms ease 1000ms both; }
.x-slide.is-door.is-active .x-slide__title {
  opacity: 1; clip-path: inset(-1em -1em -0.08em -1em);
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  animation: x-sweep 1500ms cubic-bezier(0.45, 0, 0.2, 1) 1450ms both;
}
.x-slide__title .x-t { display: inline-block; }
.x-slide.is-door.is-active .x-slide__title .x-t { animation: x-lift 1250ms var(--x-out) 1450ms both; }
.x-slide.is-door.is-active .x-slide__eyebrow { animation: x-fade 900ms ease 1900ms both; }
.x-slide.is-door.is-active .x-slide__ctas { animation: x-drop 900ms var(--x-out) 2150ms both; }
html.x-door .x-head { animation: x-drop 900ms var(--x-out) 2350ms both; }
html.x-door .x-arrow { animation: x-fade 700ms ease 2350ms both; }
@keyframes x-window {
  0% { clip-path: inset(var(--hz-t) var(--side) var(--hz-b) var(--side)); animation-timing-function: var(--x-inout); }
  42% { clip-path: inset(0 var(--side) 0 var(--side)); }
  50% { clip-path: inset(0 var(--side) 0 var(--side)); animation-timing-function: var(--x-inout); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes x-push { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes x-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes x-sweep { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes x-lift { from { transform: translate3d(0, 112%, 0); filter: blur(10px); } to { transform: translate3d(0, 0, 0); filter: blur(0); } }
@keyframes x-drop { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* ---------- Header (reference: hamburger left, mark centre, two buttons right) ---------- */
.x-head { position: absolute; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 48px; background: linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,0) 100%); }
@media (max-width: 767px) { .x-head { padding: 0 22px; } }
.x-burger { justify-self: start; display: grid; gap: 6px; width: 20px; padding: 10px 0; background: none; border: 0; cursor: pointer; }
.x-burger span { display: block; height: 1.5px; width: 20px; background: #fff; }
.x-head__mark { display: block; }
.x-head__mark img { height: 46px; width: auto; display: block; }
.x-head__ctas { justify-self: end; display: flex; align-items: center; gap: 12px; }
/* The old header's Yachts and Destinations links, in their old style (Logan, 24 Sep: "restore the old yachts and destination buttons"). */
.x-head__nav { display: flex; gap: 30px; margin-right: 18px; }
.x-head__nav a { color: #fff; font-family: Figtree, system-ui, sans-serif; font-weight: 700; font-size: .9375rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.x-head__nav a:hover, .x-head__nav a:focus-visible { opacity: .6; }
@media (max-width: 1199px) { .x-head__nav { display: none; } }   /* three links need 1200px beside the centred mark; narrower screens use the menu */
@media (max-width: 767px) { .x-head__ctas { display: none; } }

.x-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border: 1px solid #fff; background: none; color: #fff; font-family: Figtree, system-ui, sans-serif; font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.x-btn:hover, .x-btn:focus-visible { background: #fff; color: #0a0a0a; }
.x-btn--lg { height: 56px; min-width: 150px; padding: 0 28px; }
:where(.x-head, .x-hero, .xm) :focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------- Services carousel ---------- */
.x-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #0a0a0a; touch-action: pan-y; }
.x-hero__track { display: flex; height: 100%; will-change: transform; }
.x-hero__track.is-moving { transition: transform .8s ease; }
.x-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; color: #fff; }
.x-slide picture, .x-slide img { display: block; width: 100%; height: 100%; }
.x-slide img { object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
/* A slow settle on the photograph while its slide is shown, standing in for the reference's film. */
.x-slide.is-active img { animation: x-settle 9s ease-out both; }
@keyframes x-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.x-slide__shade { position: absolute; left: 0; width: 100%; top: 52%; height: 48%; background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%); pointer-events: none; }
@media (max-width: 767px) { .x-slide__shade { top: 47%; height: 53%; } }
.x-slide__ph { position: absolute; inset: 0; background: linear-gradient(160deg, #57504a 0%, #332f2b 55%, #1c1a17 100%); }
.x-slide__ph span { position: absolute; right: 18px; top: 84px; font-family: Figtree, system-ui, sans-serif; font-weight: 700; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }

.x-slide__body { position: absolute; bottom: 48px; left: 0; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; }
@media (min-width: 1440px) { .x-slide__body { bottom: 60px; } }
.x-slide__eyebrow { margin: 0 0 6px; font-family: Figtree, system-ui, sans-serif; font-weight: 700; font-size: .9375rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; }
.x-slide__title { margin: 0; font-family: Perandory, Georgia, serif; font-weight: 400; font-size: clamp(3rem, 5.6vw, 4.75rem); line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; opacity: 0; }
/* Phones: the reference's 36px, and long names break onto two lines between the arrows. */
@media (max-width: 767px) { .x-slide__title { font-size: 2.25rem; max-width: calc(100vw - 170px); } }
.x-slide__ctas { display: flex; gap: 16px; margin-top: 32px; opacity: 0; }
@media (max-width: 767px) { .x-slide__ctas { width: 100%; max-width: 316px; } .x-slide__ctas .x-btn { flex: 1; min-width: 0; padding: 0 12px; } }

.x-slide.is-active .x-slide__eyebrow { animation: x-rise .5s .2s both; }
.x-slide.is-active .x-slide__title { animation: x-rise .8s .2s both; }
.x-slide.is-active .x-slide__ctas { animation: x-bounce .8s .2s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes x-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes x-bounce { 0% { opacity: .1; transform: translateY(60px); } 50% { opacity: 1; transform: translateY(-15px); } 100% { opacity: 1; transform: translateY(0); } }

/* Arrows: either side of the title, 86x43 (58 wide on phones); re-enter with a bounce on every change. */
.x-arrow { position: absolute; z-index: 5; top: var(--arrow-top, 70%); width: 86px; height: 43px; padding: 0; border: 0; cursor: pointer; background: center / 100% auto no-repeat; }
.x-arrow--prev { left: calc(50% - var(--arrow-gap, 274px)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='43' viewBox='0 0 86 43' fill='none'%3E%3Cpath d='M79 21.5H7.5M18 11 7.5 21.5 18 32' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); }
.x-arrow--next { right: calc(50% - var(--arrow-gap, 274px)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='43' viewBox='0 0 86 43' fill='none'%3E%3Cpath d='M7 21.5h71.5M68 11l10.5 10.5L68 32' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); }
@media (max-width: 767px) { .x-arrow { width: 58px; } .x-arrow--prev { left: calc(50% - var(--arrow-gap, 174px)); } .x-arrow--next { right: calc(50% - var(--arrow-gap, 174px)); } }
.x-arrow--next.is-bouncing { animation: x-bounce-next 1s ease-in-out forwards; }
.x-arrow--prev.is-bouncing { animation: x-bounce-prev 1s ease-in-out forwards; }
@keyframes x-bounce-next { 0% { opacity: 0; transform: translateX(10px); } 20% { opacity: 0; transform: translateX(0); } 40% { opacity: .1; transform: translateX(-10px); } 60% { opacity: .5; transform: translateX(0); } 80% { opacity: 1; transform: translateX(-5px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes x-bounce-prev { 0% { opacity: 0; transform: translateX(-10px); } 20% { opacity: 0; transform: translateX(0); } 40% { opacity: .1; transform: translateX(10px); } 60% { opacity: .5; transform: translateX(0); } 80% { opacity: 1; transform: translateX(5px); } 100% { opacity: 1; transform: translateX(0); } }

/* ---------- Menu (faena.com mechanism, house identity) ---------- */
.xm { position: fixed; top: 0; height: 100%; width: calc(100% + 1px); left: -100%; transform: translateX(-100%); transition: all .75s ease; z-index: 200; }
@media (min-width: 1025px) { .xm { left: -520px; transform: translateX(-520px); width: 520px; } }
.xm.open { left: 0; transform: translateX(0); }
.xm__wrap { display: flex; height: 100%; background: #0a0a0a; color: #fff; border-right: 1px solid #fff; }
.xm__wrap > nav { position: relative; flex: 1; display: flex; flex-direction: column; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.xm__menu { position: relative; display: flex; flex-direction: column; width: 100%; margin: 60px 0 0; padding: 50px 32px 0; list-style: none; }
@media (min-width: 1025px) { .xm__menu { margin-top: 100px; padding: 50px; } }
.xm__menu > li { line-height: 1; margin-bottom: 30px; }
@media (min-width: 1025px) { .xm__menu > li { margin-bottom: 44px; } }
.xm-caps { font-family: Figtree, system-ui, sans-serif; font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1; }
.xm-close { position: absolute; top: -40px; right: 22px; padding: 0 0 0 24px; margin-left: 16px; background: none; border: 0; cursor: pointer; color: #fff; line-height: 2.625rem; }
@media (min-width: 768px) and (max-width: 1024px) { .xm-close { right: 32px; } }
@media (min-width: 1025px) { .xm-close { right: auto; left: 50px; } }
.xm-close::after { content: ""; position: absolute; left: -15px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); transition: all .2s ease-in-out; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M1 1l16 16M17 1 1 17' fill='none' stroke='%23fff'/%3E%3C/svg%3E") center / 15px 15px no-repeat; }
.xm-close:hover, .xm-close:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.xm__item, .xm__trigger { font-family: Perandory, Georgia, serif; font-size: 2rem; line-height: 1; color: #fff; text-decoration: none; text-transform: uppercase; }
@media (max-width: 1024px) { .xm__item, .xm__trigger { font-size: 1.75rem; } }
.xm__trigger { position: relative; display: block; width: 100%; padding: 0; text-align: left; background: none; border: 0; cursor: pointer; }
.xm__trigger::after { content: ""; position: absolute; right: 0; top: 50%; height: 8px; width: 30px; transform: translateY(-50%); transition: all .2s ease-in-out; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='8' viewBox='0 0 62 8'%3E%3Cpath d='M0 4h61M57.5.5 61 4l-3.5 3.5' fill='none' stroke='%23fff'/%3E%3C/svg%3E") right center / 62px 8px no-repeat; }
.xm__trigger:hover::after, .xm__trigger:focus-visible::after, .xm__trigger[aria-expanded="true"]::after { right: -15px; width: 62px; }
.xm__item:hover, .xm__item:focus-visible, .xm__trigger[aria-expanded="true"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.xm__small { display: grid; gap: 16px; margin: auto 0 0; padding: 36px 50px 40px; list-style: none; }
@media (max-width: 1024px) { .xm__small { padding: 32px 32px 40px; } }
.xm__small a { color: #fff; text-decoration: none; }
.xm__small a:hover, .xm__small a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.xm-sub { position: fixed; top: 0; left: -200%; display: flex; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: #0a0a0a; color: #fff; border-right: 1px solid #fff; transform: translateX(100%); transition: all .5s ease; z-index: 1; }
@media (min-width: 1025px) { .xm-sub { transform: translateX(-100%); width: 420px; z-index: -1; } }
.xm-sub.open { left: 0; transform: translateX(0); }
@media (min-width: 1025px) { .xm-sub.open { left: 520px; } }
.xm-sub__inner { position: relative; display: flex; flex-direction: column; flex: 1; width: 100%; margin-top: 60px; padding: 50px 32px 40px; }
@media (min-width: 1025px) { .xm-sub__inner { margin-top: 100px; padding: 50px 50px 40px; } }
.xm-back { position: absolute; top: -40px; left: 32px; margin: 0 0 0 40px; padding: 0; background: none; border: 0; cursor: pointer; color: #fff; line-height: 2.625rem; }
@media (min-width: 1025px) { .xm-back { left: 50px; } }
.xm-back::after { content: ""; position: absolute; left: -40px; top: 50%; height: 8px; width: 30px; transform: translateY(-50%); transition: all .2s ease-in-out; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='8' viewBox='0 0 62 8'%3E%3Cpath d='M62 4H1M4.5.5 1 4l3.5 3.5' fill='none' stroke='%23fff'/%3E%3C/svg%3E") left center / 62px 8px no-repeat; }
.xm-back:hover::after, .xm-back:focus-visible::after { left: -50px; width: 42px; }
.xm-back:hover, .xm-back:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.xm-sub__title { margin: 0 0 30px; font-family: Perandory, Georgia, serif; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.xm-sub__title a { color: #fff; text-decoration: none; }
.xm-sub ul { margin: 0; padding: 0; list-style: none; }
.xm-sub li { margin-bottom: 20px; }
.xm-sub li a { font-family: Figtree, system-ui, sans-serif; font-size: 1.0625rem; color: #fff; text-decoration: none; }
.xm-sub li a:hover, .xm-sub li a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.xm-sub__all { margin-top: auto; padding-top: 44px; color: #fff; text-decoration: none; }
@media (max-width: 1024px) { body.xm-open { overflow: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .x-hero__track.is-moving, .xm, .xm-sub { transition-duration: .01ms !important; }
  .x-slide.is-active img, .x-slide.is-active .x-slide__eyebrow, .x-slide.is-active .x-slide__title, .x-slide.is-active .x-slide__ctas, .x-arrow.is-bouncing { animation: none !important; opacity: 1; transform: none; }
}