/* 52' Exploration V7 additions: the water-toy garage stop, the 7-layout section and the spec sheet's link to it.
   Built only from the live page's tokens: Oxanium 200-500, navy fades, pale blue #afcbe4 lines, 2 px corners,
   red #ff3b2e call to action, hairlines. Nothing smaller than 14 px. */
:root{--x7-pale:#afcbe4;--x7-red:#ff3b2e;--x7-navy:#0f2238;--x7-lay:#0c2038}
:where(.x52-content) .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the red call to action (the tour's feature-panel button) */
:where(.x52-content) .cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:2px;background:var(--x7-red);color:#fff;text-decoration:none;font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:filter .2s}
:where(.x52-content) .cta:hover{filter:brightness(1.08)}
:where(.x52-content) .cta[hidden]{display:none}

/* the shared theme puts an empty block ::before on links; in these flex links it would take a gap */
:where(.x52-content) a.spec-link::before,:where(.x52-content) a.spec-link::after,:where(.x52-content) a.cta::before,:where(.x52-content) a.cta::after{content:none!important;display:none!important}
/* spec sheet: "Layouts 7 configurations" leads to the section */
:where(.x52-content) .specs a.spec-link{display:flex;gap:18px;align-items:flex-start;min-width:0;text-decoration:none;color:inherit}
:where(.x52-content) .specs .go{display:inline-flex;align-items:center;gap:10px;margin-top:10px;padding-bottom:4px;font-size:14px;font-weight:400;letter-spacing:.04em;color:var(--x7-pale);border-bottom:1px solid rgba(175,203,228,.35);transition:color .3s,border-color .3s}
:where(.x52-content) .specs .go::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);transition:transform .3s var(--ease)}
:where(.x52-content) .specs a.spec-link:hover .go{color:#fff;border-bottom-color:var(--x7-pale)}
:where(.x52-content) .specs a.spec-link:hover .go::after{transform:translateX(3px) rotate(-45deg)}

/* ---- water-toy garage: the stern as a still from the tour, film callouts, one way into the 3D garage ---- */
:where(.x52-content) .garage{position:relative;height:100svh;min-height:560px;overflow:hidden;background:linear-gradient(180deg,#1972bd 0,#2c86c8 48%,#1a9aae 62%,#12879c 100%)}
:where(.x52-content) .garage .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
:where(.x52-content) .garage::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,34,56,.76) 0,rgba(15,34,56,.46) clamp(300px,30vw,520px),rgba(15,34,56,0) clamp(480px,50vw,860px)),linear-gradient(180deg,rgba(15,34,56,.38) 0,rgba(15,34,56,0) 24%)}
:where(.x52-content) .garage-copy{position:absolute;z-index:3;left:var(--gutter);top:calc(var(--head-h) + clamp(40px,11vh,130px));width:min(380px,32vw);color:#fff}
:where(.x52-content) .garage-copy h2{font-weight:300;font-size:clamp(32px,3vw,46px);line-height:1.1;letter-spacing:.01em}
:where(.x52-content) .garage-copy p{margin-top:16px;font-size:17px;line-height:1.55;color:rgba(255,255,255,.88)}
:where(.x52-content) .garage-copy .rule{height:1px;background:rgba(255,255,255,.22);margin:28px 0}
:where(.x52-content) .garage-copy > *{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
:where(.x52-content) .garage.is-here .garage-copy > *{opacity:1;transform:none}
:where(.x52-content) .garage.is-here .garage-copy > :nth-child(2){transition-delay:.09s}
:where(.x52-content) .garage.is-here .garage-copy > :nth-child(3),:where(.x52-content) .garage.is-here .garage-copy > :nth-child(4){transition-delay:.18s}
/* the film's callouts: square node, angled leader, a run under the label ending in the Xquisite logo X (tour callouts.js) */
:where(.x52-content) .garage .callouts{position:absolute;inset:0;z-index:2;pointer-events:none}
:where(.x52-content) .garage .callouts svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
:where(.x52-content) .garage .callouts polyline,:where(.x52-content) .garage .callouts path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(6,20,34,.7))}
:where(.x52-content) .garage .callouts rect{fill:none;stroke:#fff;stroke-width:1.8;filter:drop-shadow(0 0 2px rgba(6,20,34,.7))}
:where(.x52-content) .garage .callouts .tag{position:absolute;left:0;top:0;font-size:15px;font-weight:500;letter-spacing:2px;text-transform:uppercase;line-height:1;white-space:nowrap;color:#fff;text-shadow:0 1px 6px rgba(6,20,34,.85),0 0 2px rgba(6,20,34,.6)}
/* the section below takes the photo's water, not the 3D story's */
:where(.x52-content) .garage + .film{--sea3d:#12879c}
@media (max-aspect-ratio:3/4){
  :where(.x52-content) .garage::before{background:linear-gradient(180deg,rgba(15,34,56,.36) 0,rgba(15,34,56,0) 16%,rgba(15,34,56,0) 50%,rgba(15,34,56,.8) 70%,rgba(15,34,56,.95) 100%)}
  :where(.x52-content) .garage-copy{top:auto;bottom:clamp(28px,5.5vh,56px);right:var(--gutter);width:auto;max-width:520px}
  :where(.x52-content) .garage-copy h2{font-size:clamp(28px,7.6vw,38px)}
  :where(.x52-content) .garage-copy p{font-size:16px;margin-top:12px}
  :where(.x52-content) .garage-copy .rule{margin:20px 0}
  :where(.x52-content) .garage-copy .cta{width:100%}
  :where(.x52-content) .garage + .film{--sea3d:var(--x7-navy)}
  :where(.x52-content) .garage .callouts .tag{font-size:14px;letter-spacing:1.6px}
}

/* ---- 7 layouts: the lower deck from the film, the port cabin swapped by the 2024 study's top views ---- */
:where(.x52-content) .layouts{background:var(--x7-lay);padding:calc(var(--head-h) + 24px) var(--gutter) clamp(28px,4vh,48px);display:flex;flex-direction:column;justify-content:center}
:where(.x52-content) .lay{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);grid-template-areas:"head plan" "now plan" "picks picks";column-gap:clamp(32px,4vw,72px);align-items:start}
:where(.x52-content) .lay-head{grid-area:head}
:where(.x52-content) .lay-cap{font-weight:500;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--x7-pale);margin-bottom:14px}
:where(.x52-content) .lay-head h2{font-weight:200;font-size:clamp(30px,2.7vw,42px);line-height:1.12;letter-spacing:.005em}
:where(.x52-content) .lay-head .lede{margin-top:16px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.82);max-width:30ch}
:where(.x52-content) .lay-now{grid-area:now;align-self:end;padding-bottom:6px}
:where(.x52-content) .lay-now p{display:flex;gap:14px;align-items:baseline}
:where(.x52-content) .lay-now .n{flex:none;font-weight:200;font-size:44px;line-height:1;color:var(--x7-pale);font-variant-numeric:tabular-nums}
:where(.x52-content) .lay-now .t{font-size:20px;font-weight:300;line-height:1.3}
:where(.x52-content) .lay-now .cta{margin-top:22px}
:where(.x52-content) .lay-plan{grid-area:plan;position:relative;margin:0;justify-self:end;width:min(100%,max(460px,calc((100svh - 292px - min(12vw,190px) * .75) * 1.652)));aspect-ratio:2496/1511}
:where(.x52-content) .lay-plan .base img{position:absolute;inset:0;width:100%;height:100%}
:where(.x52-content) .lay-plan .tiles{position:absolute;left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th)}
:where(.x52-content) .lay-plan .tiles img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s var(--ease)}
:where(.x52-content) .lay-plan .tiles img.is-on{opacity:1}
:where(.x52-content) .lay-plan .cabin{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
:where(.x52-content) .lay-plan .cabin polygon{fill:none;stroke:var(--x7-pale);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
:where(.x52-content) .lay-plan .cabin .phone{display:none}
:where(.x52-content) .lay-plan.is-swap .cabin polygon{animation:x7-cabin 1.1s var(--ease)}
@keyframes x7-cabin{0%{stroke-width:1.5}35%{stroke-width:3.5;stroke:#fff}100%{stroke-width:1.5}}
:where(.x52-content) .lay-picks{grid-area:picks;margin-top:clamp(18px,3vh,30px);padding-top:18px;border-top:1px solid rgba(175,203,228,.22);display:grid;grid-template-columns:repeat(7,minmax(0,190px));justify-content:space-between;align-items:start;gap:16px}
:where(.x52-content) .lay-picks button{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;text-align:left;color:rgba(255,255,255,.76);transition:color .3s}
:where(.x52-content) .lay-picks .lab{display:block}
:where(.x52-content) .lay-picks .th{display:block;margin-bottom:10px;aspect-ratio:4/3;overflow:hidden;border-radius:2px;outline:1px solid rgba(175,203,228,.2);outline-offset:0;transition:outline-color .3s,outline-offset .3s}
:where(.x52-content) .lay-picks .th img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform .6s var(--ease)}
:where(.x52-content) .lay-picks .n{display:inline;margin-right:8px;font-weight:200;font-size:21px;line-height:1;color:var(--x7-pale);font-variant-numeric:tabular-nums}
:where(.x52-content) .lay-picks .t{display:inline;font-size:15px;line-height:1.35}
:where(.x52-content) .lay-picks .tag{position:absolute;top:8px;right:8px;padding:3px 7px 2px;border-radius:2px;background:rgba(15,34,56,.78);color:#fff;font-weight:500;font-size:14px;line-height:1.2;letter-spacing:.1em}
:where(.x52-content) .lay-picks button:hover{color:#fff}
:where(.x52-content) .lay-picks button:hover .th img{transform:scale(1.04)}
:where(.x52-content) .lay-picks button[aria-checked="true"]{color:#fff}
:where(.x52-content) .lay-picks button[aria-checked="true"] .th{outline:1.5px solid var(--x7-pale);outline-offset:3px}
:where(.x52-content) .lay-picks button:focus-visible{outline:none}
:where(.x52-content) .lay-picks button:focus-visible .th{outline:2px solid #fff;outline-offset:3px}
@media (min-width:901px) and (max-width:1180px){
  :where(.x52-content) .lay{grid-template-columns:minmax(230px,280px) minmax(0,1fr)}
  :where(.x52-content) .lay-picks{gap:12px}
}
@media (max-width:900px){
  :where(.x52-content) .layouts{padding-top:calc(var(--head-h) + 14px);padding-bottom:20px}
  :where(.x52-content) .lay{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "plan" "now" "picks"}
  :where(.x52-content) .lay-cap{margin-bottom:8px}
  :where(.x52-content) .lay-head h2{font-size:clamp(26px,6.6vw,34px)}
  :where(.x52-content) .lay-head .lede{max-width:none;font-size:15px;margin-top:8px}
  :where(.x52-content) .lay-plan{justify-self:center;margin-top:12px;width:min(100%,max(70vw,calc((100svh - 470px) * 1.652)))}
  :where(.x52-content) .lay-now{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:0;min-height:48px}
  :where(.x52-content) .lay-now p{gap:10px;min-width:0}
  :where(.x52-content) .lay-now .n{font-size:30px}
  :where(.x52-content) .lay-now .t{font-size:16px}
  :where(.x52-content) .lay-now .cta{margin:0;min-height:44px;padding:0 16px;flex:none}
  :where(.x52-content) .lay-picks{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);touch-action:pan-x;scrollbar-width:none;margin:10px calc(-1 * var(--gutter)) 0;padding:14px var(--gutter) 4px;border-top:0}
  :where(.x52-content) .lay-picks::-webkit-scrollbar{display:none}
  :where(.x52-content) .lay-picks button{flex:0 0 146px;scroll-snap-align:start}
  :where(.x52-content) .lay-picks .th{margin-bottom:8px}
  :where(.x52-content) .lay-picks .t{font-size:14px}
  :where(.x52-content) .lay-picks .n{font-size:19px;margin-right:6px}
}
@media (max-width:600px){
  :where(.x52-content) .lay-head .lede,:where(.x52-content) .lay-cap{display:none}
  :where(.x52-content) .lay-plan{aspect-ratio:1180/1743;width:min(100%,max(62vw,calc((100svh - 430px) * .677)))}
  :where(.x52-content) .lay-picks{padding-top:10px}
  :where(.x52-content) .lay-picks .th{aspect-ratio:16/10}
  :where(.x52-content) .lay-plan .tiles{left:var(--px);top:var(--py);width:var(--pw);height:var(--ph)}
  :where(.x52-content) .lay-plan .cabin .desk{display:none}
  :where(.x52-content) .lay-plan .cabin .phone{display:inline}
  :where(.x52-content) .lay-picks .th img{object-position:78% 50%}
}