/* 52' Exploration homepage below the 3D, redesigned 2026-09-26 (Joseph: "rethink the homepage", "SAME DESIGN LANGUAGE
   ... THROUGH", "clear differentiation between sections - yet same design language", "no color preference").
   One language for every section: the 3D story's callouts (square node, leader, a run under the label ending in the
   Xquisite X), tracked capitals for every label, one title, one picture frame, three tones of the same night sea that
   take turns so each section reads as its own. Round 2 (his review): wider and larger on big screens, readable labels on
   a dark ground, the whole deck plan with the cabin magnified beside it, the layouts play by themselves, a mosaic again. */
:root{--n-a:#0c1a29;--n-b:#15293f;--n-c:#060e17;--n-sand:#e9dcc4;--n-dim:rgba(255,255,255,.8);--n-cap:#fff;
  --n-pad:clamp(20px,5.2vw,120px);--n-max:1680px;--n-ease:cubic-bezier(.22,.61,.36,1);
  --n-label:clamp(12px,.8vw,16px);--n-text:clamp(16px,1.12vw,22px);--n-title:clamp(30px,2.5vw,58px)}

/* ---- sections: one frame, three tones ---- */
:where(.x52-content) .n-sec{position:relative;min-height:100svh;display:flex;flex-direction:column;color:#fff;
  padding:calc(var(--head-h,88px) + clamp(24px,5vh,56px)) 0 clamp(28px,6vh,64px);box-sizing:border-box}
:where(.x52-content) .n-a{background:var(--n-a)}
:where(.x52-content) .n-b{background:var(--n-b)}
:where(.x52-content) .n-c{background:var(--n-c)}
:where(.x52-content) .n-in{flex:1;display:flex;flex-direction:column;width:100%;max-width:calc(var(--n-max) + 2 * var(--n-pad));margin:0 auto;padding:0 var(--n-pad);box-sizing:border-box}
:where(.x52-content) .n-body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding-top:clamp(16px,3vh,36px)}
:where(.x52-content) .n-title{margin:0;font-family:Oxanium,system-ui,sans-serif;font-weight:300;font-size:var(--n-title);line-height:1.1;letter-spacing:.01em;color:#fff}
:where(.x52-content) .n-anchor{position:absolute;top:0;left:0}

/* ---- tracked capitals: every label on the page, as on the 3D, large enough to read ---- */
:where(.x52-content) .n-cap,:where(.x52-content) .n-k,:where(.x52-content) .n-3d,:where(.x52-content) .n-detail-3d,.n-hover .t,
:where(.x52-content) .n-callouts .tag,:where(.x52-content) #garage .callouts .tag{font-family:Oxanium,system-ui,sans-serif;font-weight:500;font-size:var(--n-label);line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--n-cap)}

/* ---- the callout drawing, shared by the garage, the cabin and the hover callout; the label on a dark ground ---- */
:where(.x52-content) #garage .callouts,:where(.x52-content) .n-callouts{position:absolute;inset:0;z-index:2;pointer-events:none}
:where(.x52-content) #garage .callouts svg,:where(.x52-content) .n-callouts svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
:where(.x52-content) #garage .callouts :is(polyline,path),:where(.x52-content) .n-callouts :is(polyline,path),.n-hover :is(polyline,path){fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(6,20,34,.8))}
:where(.x52-content) #garage .callouts rect,:where(.x52-content) .n-callouts rect,.n-hover rect{fill:none;stroke:#fff;stroke-width:1.8;filter:drop-shadow(0 0 2px rgba(6,20,34,.8))}
:where(.x52-content) #garage .callouts .tag,:where(.x52-content) .n-callouts .tag,.n-hover .t{position:absolute;left:0;top:0;white-space:nowrap;color:#fff;
  padding:.55em .7em .5em .8em;margin:0 0 0 -.8em;background:rgba(6,14,23,.78);border-radius:2px;text-shadow:none}

/* ---- the picture frame: garage and film alike, as large as the screen allows under the title ---- */
:where(.x52-content) #garage .garage-copy{order:0!important;display:block!important;margin:0!important}
:where(.x52-content) #garage .n-shot .shot{position:absolute;inset:0;display:block}
:where(.x52-content) .n-frame{position:relative;display:block;width:100%;height:min(calc(100svh - var(--head-h,88px) - 240px),calc((min(100vw,var(--n-max) + 2 * var(--n-pad)) - 2 * var(--n-pad)) * 9 / 16));margin:0;overflow:hidden;border-radius:2px;background:#050b12}
:where(.x52-content) .n-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--n-ease)}
:where(.x52-content) a.n-frame,:where(.x52-content) a.n-pic,:where(.x52-content) a.n-cabin-go{color:inherit;text-decoration:none;cursor:pointer}
@media (hover:hover){
  :where(.x52-content) a.n-frame:hover img,:where(.x52-content) button.n-frame:hover img,:where(.x52-content) a.n-pic:hover img{transform:scale(1.03)}
}

/* ---- Life on board: a mosaic, the saloon leading, four beside it; the name on each picture ---- */
:where(.x52-content) .n-mosaic{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1vw,18px);
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));
  height:min(calc(100svh - var(--head-h,88px) - 230px),calc((min(100vw,var(--n-max) + 2 * var(--n-pad)) - 2 * var(--n-pad)) * .5))}
:where(.x52-content) .n-mosaic li{position:relative;margin:0;min-height:0}
:where(.x52-content) .n-mosaic li.n-big{grid-row:1 / span 2}
:where(.x52-content) .n-pic{position:relative;display:block;height:100%;overflow:hidden;border-radius:2px;background:#07121d}
:where(.x52-content) .n-pic picture{display:block;width:100%;height:100%}
:where(.x52-content) .n-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--n-ease)}
:where(.x52-content) .n-pic::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(180deg,rgba(6,14,23,0),rgba(6,14,23,.72));pointer-events:none}
:where(.x52-content) .n-pic .n-cap{position:absolute;left:clamp(12px,1.2vw,22px);bottom:clamp(12px,1.2vw,22px);z-index:1}

/* ---- Layouts: the whole deck plan; it zooms into the third cabin and shows its seven fit-outs one after the other,
   chosen by their icons; the name of the one on show under them (Joseph: "full plan - zoom and icon") ---- */
:where(.x52-content) .n-zoom{display:flex;flex-direction:column;align-items:center}
/* the title row: the title on the left; the fit-out's name on top, centred, and its icons under it (Joseph: "foter text on
   top center, than the icons then the full width layout"; "never asked for right alignment"), in the band beside the title */
/* the title starts where every section title starts (Joseph: "left headers ... should start at the exact same vertical place");
   the name sits on the title's baseline, the icons under it */
:where(.x52-content) .n-lay-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:20px 40px}
:where(.x52-content) .n-lay-head > .n-title{grid-column:1;justify-self:start}
:where(.x52-content) .n-lay-pick{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:12px}
@media (max-width:1100px){
  :where(.x52-content) .n-lay-head{grid-template-columns:minmax(0,1fr)}
  :where(.x52-content) .n-lay-pick{grid-column:1}
}
/* the window is the page's full width, as tall as the screen leaves under the name and the icons; the plan sits in it
   whole, and when it zooms the cabin and the deck around it fill the whole window */
:where(.x52-content) .n-zoom-view{--cx:51.02%;--cy:70.55%;--zs:2.3;position:relative;overflow:hidden;border-radius:2px;cursor:zoom-in;
  width:100%;height:min(calc(100svh - var(--head-h,88px) - 270px),calc((min(100vw,var(--n-max) + 2 * var(--n-pad)) - 2 * var(--n-pad)) / 1.6514))}
:where(.x52-content) .n-zoom.is-zoomed .n-zoom-view{cursor:zoom-out}
:where(.x52-content) .n-zoom-plan{--tx:42.6683%;--ty:56.5189%;--tw:16.7067%;--th:28.0609%;position:absolute;left:50%;top:0;height:100%;aspect-ratio:1800/1090;translate:-50% 0;transform-origin:var(--cx) var(--cy);
  transition:transform 1.5s cubic-bezier(.65,0,.35,1);will-change:transform}
:where(.x52-content) .n-zoom.is-zoomed .n-zoom-plan{transform:translate(calc(50% - var(--cx)),calc(50% - var(--cy))) scale(var(--zs))}
:where(.x52-content) .n-plan-img,:where(.x52-content) .n-plan-img img{display:block;width:100%;height:100%}
:where(.x52-content) .n-plan-img{transition:opacity 1.5s}
:where(.x52-content) .n-zoom.is-zoomed .n-plan-img{opacity:.7}
:where(.x52-content) .n-deck-cabin{position:absolute;left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th);display:block;overflow:hidden;
  box-shadow:0 0 0 2px var(--n-sand),0 0 22px rgba(233,220,196,.5)}
:where(.x52-content) .n-zoom.is-zoomed .n-deck-cabin{box-shadow:0 0 0 1px var(--n-sand),0 0 16px rgba(233,220,196,.35)}
:where(.x52-content) .n-deck-cabin picture,:where(.x52-content) .n-deck-cabin img{position:absolute;inset:0;display:block;width:100%;height:100%}
:where(.x52-content) .n-deck-cabin img{opacity:0;transition:opacity .6s}
:where(.x52-content) .n-deck-cabin img.is-on{opacity:1}
:where(.x52-content) .n-deck-cabin:not([href]){cursor:inherit}
/* the seven by their icons */
:where(.x52-content) .n-choose{display:flex;justify-content:center;flex-wrap:nowrap;gap:clamp(6px,.7vw,12px)}
:where(.x52-content) .n-choose [role=radio]{position:relative;display:flex;align-items:center;justify-content:center;min-width:clamp(58px,4.6vw,88px);height:clamp(48px,3.8vw,66px);
  padding:0 clamp(8px,.8vw,14px);margin:0;border:1px solid rgba(233,220,196,.35);border-radius:2px;background:transparent;color:rgba(255,255,255,.82);cursor:pointer;
  transition:background-color .3s,border-color .3s,color .3s}
:where(.x52-content) .n-choose [role=radio]:hover{border-color:var(--n-sand);color:#fff;background:rgba(233,220,196,.1)}
:where(.x52-content) .n-choose [role=radio][aria-checked=true]{background:var(--n-sand);border-color:var(--n-sand);color:#0c1a29}
:where(.x52-content) .n-choose [role=radio]:focus-visible{outline:1px solid var(--n-sand);outline-offset:3px}
:where(.x52-content) .n-icons-in{display:flex;gap:4px}
:where(.x52-content) .n-choose .n-ic{width:clamp(20px,1.55vw,28px);height:clamp(20px,1.55vw,28px);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:where(.x52-content) .n-choose .n-3d{position:absolute;top:3px;right:4px;font-size:9px;letter-spacing:.12em;color:var(--n-sand)}
:where(.x52-content) .n-choose [aria-checked=true] .n-3d{color:#0c1a29}
/* the name of the fit-out on show, once */
:where(.x52-content) .n-lay-name{margin:0;display:flex;align-items:baseline;justify-content:center;gap:14px;min-height:1.3em;text-align:center;
  font-family:Oxanium,system-ui,sans-serif;font-weight:300;font-size:calc(var(--n-text) * 1.15);line-height:1.3;color:#fff;transition:opacity .3s}
:where(.x52-content) .n-lay-name.is-out{opacity:0}


/* ---- Specifications: every line of the yard's sheet, label over figure ---- */
:where(.x52-content) .n-specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,4.4vh,52px) clamp(20px,3vw,64px)}
:where(.x52-content) .n-specs li{display:grid;grid-template-columns:clamp(22px,1.6vw,30px) minmax(0,1fr);column-gap:16px;row-gap:8px;align-content:start;margin:0}
:where(.x52-content) .n-specs li.n-wide{grid-column:span 2}
:where(.x52-content) .n-specs .n-ic{grid-row:1 / span 3;width:100%;height:auto;aspect-ratio:1;margin-top:2px;color:var(--n-sand)}
:where(.x52-content) .n-specs .n-ic use,:where(.x52-content) .n-specs .n-ic path{fill:currentColor}
:where(.x52-content) .n-specs .n-k{color:rgba(255,255,255,.72)}
:where(.x52-content) .n-specs .n-v{font-family:Oxanium,system-ui,sans-serif;font-weight:300;font-size:clamp(20px,1.6vw,32px);line-height:1.2;color:#fff}
:where(.x52-content) .n-specs small{font-size:calc(var(--n-text) * .85);line-height:1.4;color:rgba(255,255,255,.72)}

/* ---- Film: the same frame, a play ring in the callouts' line ---- */
:where(.x52-content) button.n-film{padding:0;border:0;cursor:pointer;font:inherit}
:where(.x52-content) .n-play{position:absolute;left:50%;top:50%;width:clamp(64px,5.5vw,104px);height:clamp(64px,5.5vw,104px);transform:translate(-50%,-50%);pointer-events:none}
:where(.x52-content) .n-play svg{display:block;width:100%;height:100%;overflow:visible}
:where(.x52-content) .n-play circle{fill:rgba(6,14,23,.22);stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 0 3px rgba(6,20,34,.6));transition:fill .3s}
:where(.x52-content) .n-play path{fill:#fff}
@media (hover:hover){:where(.x52-content) button.n-film:hover .n-play circle{fill:rgba(6,14,23,.45)}}

/* ---- the closing band: the same title, the site's one red button ---- */
.x52-last .x52-content .contact.next{background:linear-gradient(180deg,var(--n-a) 0%,#1e2225 100%)!important;padding-left:0!important;padding-right:0!important;
  padding-top:calc(var(--head-h,88px) + clamp(24px,5vh,56px))!important}
.x52-last .x52-content .contact.next .next-in{max-width:calc(var(--n-max) + 2 * var(--n-pad));margin:0 auto;padding:0 var(--n-pad);box-sizing:border-box}
.x52-last .x52-content .contact.next h2,:where(.x52-content) #garage .garage-copy h2.n-title{font-family:Oxanium,system-ui,sans-serif!important;font-weight:300!important;font-size:var(--n-title)!important;line-height:1.1!important;letter-spacing:.01em!important;color:#fff;margin:0!important}
.x52-last .x52-content .contact.next .next-acts{margin-top:28px}
/* the page end as on the site's other pages (Joseph: "the footer of the page should be more like the rest of the footers on WP
   pages, still the current color change effect"): the title and its line on the left, the button on the right; the band keeps
   its fade from the page's navy into the footer's charcoal */
.x52-last .x52-content .contact.next .next-in{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title acts" "lede acts";column-gap:40px;align-items:center}
.x52-last .x52-content .contact.next .next-cap:empty{display:none}
.x52-last .x52-content .contact.next h2{grid-area:title}
.x52-last .x52-content .contact.next .next-lede{grid-area:lede;margin:12px 0 0!important;max-width:none;font-size:calc(var(--n-text) * 1.05);line-height:1.4}
.x52-last .x52-content .contact.next .next-lede a{color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s}
.x52-last .x52-content .contact.next .next-lede a:hover{color:#fff}
.x52-last .x52-content .contact.next .next-acts{grid-area:acts;margin-top:0;justify-self:end}
@media (max-width:760px){
  .x52-last .x52-content .contact.next .next-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "lede" "acts"}
  .x52-last .x52-content .contact.next .next-acts{margin-top:24px;justify-self:stretch;min-width:0}
}
/* the footer's Subscribe as on the live pages: an outlined pill */
.x52-shared-footer .acysubbuttons .subbutton{background:transparent!important;border:1.5px solid rgba(255,255,255,.85)!important;border-radius:500px!important;color:#fff!important;opacity:1!important}
.x52-last .x52-content .contact.next .cta.cta-site{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;border:1px solid var(--g-red,#ff3b2e);border-radius:2px;background:var(--g-red,#ff3b2e);color:#fff;font-size:calc(var(--n-text) * .9)}

/* ---- the header over the sections takes each section's own tone (no band of another colour under it) ---- */
html.x52-head-solid body.x52-homepage :is(.tm-header,.tm-header-mobile) .uk-navbar-container{background:var(--x52-head-bg,var(--n-a))!important;box-shadow:none!important;transition:background-color .35s}

/* ---- the hover callout: it appears where the mouse is ---- */
.n-hover{position:fixed;left:0;top:0;z-index:1500;pointer-events:none;opacity:0;transition:opacity .15s;will-change:transform}
.n-hover.is-on{opacity:1}
.n-hover svg{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible}
@media (hover:none){.n-hover{display:none}}

/* ---- tablets and phones ---- */
@media (max-width:1024px){
  :where(.x52-content) .n-specs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  :where(.x52-content) .n-sec{padding-top:calc(var(--head-h,64px) + 20px);padding-bottom:28px}
  :where(.x52-content) .n-title,.x52-last .x52-content .contact.next h2,:where(.x52-content) #garage .garage-copy h2.n-title{font-size:30px!important}
  .x52-last .x52-content .contact.next{padding-top:calc(var(--head-h,64px) + 20px)!important}
  :where(.x52-content) .n-body{justify-content:flex-start;padding-top:22px}
  :where(.x52-content) .n-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;height:auto}
  :where(.x52-content) .n-mosaic li{aspect-ratio:1}
  :where(.x52-content) .n-mosaic li.n-big{grid-column:1 / span 2;grid-row:auto;aspect-ratio:4/3}
  :where(.x52-content) .n-lay-pick{align-items:stretch;width:100%}
  :where(.x52-content) .n-lay-name{justify-content:center;text-align:center}
  :where(.x52-content) .n-zoom-view{--cx:23.48%;--cy:73.06%;--zs:2.35;height:min(calc(100svh - var(--head-h,64px) - 250px),calc((100vw - 2 * var(--n-pad)) * 1595 / 1080))}
  :where(.x52-content) .n-zoom-plan{--tx:5.5085%;--ty:61.1015%;--tw:35.9322%;--th:23.9243%;aspect-ratio:1080/1595}
  :where(.x52-content) .n-choose{gap:4px;width:100%}
  :where(.x52-content) .n-choose [role=radio]{flex:1;min-width:0;height:44px;padding:0 2px}
  :where(.x52-content) .n-icons-in{gap:1px}
  :where(.x52-content) .n-choose .n-ic{width:16px;height:16px}
  :where(.x52-content) .n-choose .n-3d{font-size:7px;top:2px;right:2px}
  :where(.x52-content) .n-lay-name{font-size:17px}
  :where(.x52-content) .n-specs{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  :where(.x52-content) .n-specs li{column-gap:10px}
  :where(.x52-content) .n-frame{height:calc((100vw - 2 * var(--n-pad)) * 9 / 16)}
}
@media (max-aspect-ratio:3/4){
  :where(.x52-content) .n-shot{height:auto;aspect-ratio:4/3;width:100%}
}

/* ---- the 3D tour over the page: no bar and no second title; one small "Back to Home" where the tour's logo would be
   (the tour hides its logo inside the page; Joseph: "the modal - WTF is on top left") ---- */
:where(.x52-content) .tour-layer .tour-bar{position:absolute;z-index:3;top:max(20px,env(safe-area-inset-top));left:max(clamp(16px,3.2vw,48px),env(safe-area-inset-left));min-height:0;padding:0;background:none;border:0;gap:0}
:where(.x52-content) .tour-layer .tour-bar .tour-title{position:fixed;left:50%;top:max(20px,env(safe-area-inset-top));transform:translateX(-50%);max-width:calc(100vw - 360px);margin:0;padding:.95em 1.2em .9em 1.4em;
  background:rgba(15,34,56,.72);border-radius:2px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:Oxanium,system-ui,sans-serif;font-weight:500;font-size:clamp(12px,.8vw,15px);line-height:1;letter-spacing:.24em;text-transform:uppercase;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
@media (max-width:760px){:where(.x52-content) .tour-layer .tour-bar .tour-title{left:auto;right:max(16px,env(safe-area-inset-right));transform:none;max-width:calc(100vw - 150px);font-size:11px}}
:where(.x52-content) .tour-layer .tour-bar .tour-back{min-height:42px;padding:0 16px 0 12px;background:rgba(15,34,56,.78);border:1px solid rgba(175,203,228,.5);border-radius:2px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:15px}
:where(.x52-content) .tour-layer .tour-bar .tour-back:hover{background:rgba(22,50,84,.92)}
/* phones: the page-end button on one line inside the margins (after the band's own button rule, so it wins) */
@media (max-width:760px){.x52-last .x52-content .contact.next .cta.cta-site{max-width:100%;box-sizing:border-box;padding:0 12px!important;gap:8px;font-size:14px!important}}