/* 52' Exploration homepage, V8 content (fixer G, buyer review 2026-09-25): the page speaks to buyers.
   Hero promise and next step, story words over the 3D, readable garage and film, the buyer's spec sheet,
   the 7 layouts in buyer language with icons, a labelled plan and an obvious "your choice" cabin, the 3D tour
   over the page, a closing next step, and phone fixes (menu flash, pinch, to-top, header over the footer).
   Only the live site's tokens: Oxanium 300/400(/500), navy #163254 -> #0f2238, pale blue #afcbe4, red #ff3b2e for
   the one main call to action per view, 2 px corners, hairlines. Nothing under 14 px; body 16 px or more; no tiny
   letter-spaced capitals. */
:root{--g-navy:#163254;--g-ink:#0f2238;--g-pale:#afcbe4;--g-red:#ff3b2e;--g-sand:#e9dcc4;--g-line:rgba(175,203,228,.28)}

/* ---- shared small pieces ---- */
:where(.x52-content) .g-line-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid rgba(175,203,228,.6);border-radius:2px;color:#fff;text-decoration:none;font-weight:400;font-size:16px;letter-spacing:normal;background:rgba(15,34,56,.35);transition:background .25s,border-color .25s,color .25s;cursor:pointer}
:where(.x52-content) .g-line-btn:hover{background:rgba(175,203,228,.14);border-color:var(--g-pale)}
:where(.x52-content) .g-line-btn::before,:where(.x52-content) .g-line-btn::after,:where(.x52-content) .hero-cta::before,:where(.x52-content) .hero-cta::after,:where(.x52-content) .g-text-link::before,:where(.x52-content) .g-text-link::after{content:none!important;display:none!important}
:where(.x52-content) .g-line-btn .ext{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
/* the site theme colours links on hover and after a visit; the page's buttons keep their own colours */
:where(.x52-content) a.cta,:where(.x52-content) a.cta:hover,:where(.x52-content) a.cta:focus,:where(.x52-content) a.cta:visited,
:where(.x52-content) a.g-line-btn,:where(.x52-content) a.g-line-btn:hover,:where(.x52-content) a.g-line-btn:focus,:where(.x52-content) a.g-line-btn:visited,
:where(.x52-content) a.hero-cta,:where(.x52-content) a.hero-cta:hover,:where(.x52-content) a.hero-cta:visited{color:#fff}
/* the site's own call to action keeps its words as written ("Contact - Pricing & Production Schedule"), in our red token:
   the page's one red button, wherever it appears (hero, layout sheet, closing band; round 2) */
:where(.x52-content) .cta.cta-site{text-transform:none;letter-spacing:normal;font-size:16px;font-weight:400;gap:10px}
:where(.x52-content) .cta.cta-site .ext{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
:where(.x52-content) a.g-text-link,:where(.x52-content) a.g-text-link:visited{color:var(--g-pale)}
:where(.x52-content) a.g-text-link:hover,:where(.x52-content) a.g-text-link:focus{color:#fff}
/* every button on the page reads in words: normal case, no letter-spacing, 16 px, like the site's pricing button
   (was 14 px letter-spaced capitals; round 2) */
:where(.x52-content) .cta{font-size:16px;font-weight:400;letter-spacing:normal;text-transform:none;gap:10px}
/* red belongs to the pricing contact only: the 3D and email buttons wear the page's hairline, like "Ask for the
   brochure and layouts" (round 2) */
:where(.x52-content) .cta:not(.cta-site){background:rgba(15,34,56,.45);border:1px solid rgba(175,203,228,.6);color:#fff;transition:background .25s,border-color .25s}
:where(.x52-content) .cta:not(.cta-site):hover{filter:none;background:rgba(175,203,228,.16);border-color:var(--g-pale)}
:where(.x52-content) .g-text-link{color:var(--g-pale);text-decoration:none;border-bottom:1px solid rgba(175,203,228,.4);padding-bottom:2px;transition:color .25s,border-color .25s}
:where(.x52-content) .g-text-link:hover{color:#fff;border-bottom-color:#fff}

/* ---- hero: the promise and the page's next step, the site's own "Contact - Pricing & Production Schedule", in red (FI07, HP15; round 2) ---- */
:where(.x52-content) .title .promise{margin-top:14px;font-weight:300;font-size:clamp(18px,1.7vw,24px);line-height:1.35;letter-spacing:.01em;text-transform:none;opacity:1;text-shadow:0 1px 14px rgba(7,22,31,.45)}
:where(.x52-content) .title .hero-cta{pointer-events:auto;margin-top:22px;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;border:1px solid var(--g-red);border-radius:2px;background:var(--g-red);color:#fff;text-decoration:none;font-size:16px;font-weight:400;letter-spacing:normal;transition:filter .2s,opacity .4s linear}
:where(.x52-content) .title .hero-cta:hover{filter:brightness(1.08)}
:where(.x52-content) .title .hero-cta svg{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
@media (max-width:420px){:where(.x52-content) .title .hero-cta{font-size:15px;padding:0 16px;gap:8px}}
:where(.x52-content) .story.is-moving .title .hero-cta{pointer-events:none;visibility:hidden;transition:opacity .4s linear,visibility 0s .4s}
/* the name reads where it crosses the white hull (round 2): a soft navy fade behind the words alone, at the bottom left,
   no veil over the rest of the yacht; it leaves with the words. Phones keep the name on the water below the yacht. */
@media (min-width:700px){
  :where(.x52-content) .title::before{content:"";position:absolute;z-index:-1;left:-12%;right:-22%;top:-38%;bottom:-30%;background:radial-gradient(closest-side at 45% 40%,rgba(9,26,44,.64),rgba(9,26,44,.46) 45%,rgba(9,26,44,.18) 76%,rgba(9,26,44,0));pointer-events:none}
  :where(.x52-content) .title h1{text-shadow:0 1px 3px rgba(7,22,31,.4),0 2px 24px rgba(7,22,31,.45)}
}

/* ---- the story's words (FI02, HP13, PH11): one headline and one line per stop, over calm water ---- */
:where(.x52-content) .story-words{position:absolute;z-index:1;left:var(--gutter);bottom:clamp(44px,8vh,84px);width:min(520px,44vw);pointer-events:none}
:where(.x52-content) .story-words::before{content:"";position:absolute;left:calc(-1 * var(--gutter));right:-140px;bottom:calc(-1 * clamp(44px,8vh,84px));height:calc(100% + 200px);background:radial-gradient(115% 100% at 0% 100%,rgba(10,26,44,.8) 0%,rgba(10,26,44,.6) 38%,rgba(10,26,44,0) 74%);opacity:var(--sw-any,0);pointer-events:none}
:where(.x52-content) .story-words .sw{position:absolute;left:0;right:0;bottom:0;opacity:0;visibility:hidden;color:#fff;text-shadow:0 1px 14px rgba(7,22,31,.55)}
:where(.x52-content) .story-words .sw.is-on{visibility:visible}
:where(.x52-content) .story-words h2{font-weight:300;font-size:clamp(30px,2.9vw,44px);line-height:1.1;letter-spacing:.005em}
:where(.x52-content) .story-words p{margin-top:12px;font-weight:300;font-size:18px;line-height:1.5;color:rgba(255,255,255,.92);max-width:34ch}
:where(.x52-content) .story-words .sw-n{display:block;margin-bottom:10px;font-weight:400;font-size:15px;letter-spacing:.04em;color:var(--g-pale)}
@media (max-width:700px),(orientation:portrait) and (max-width:1100px){
  :where(.x52-content) .story-words{left:var(--gutter);right:var(--gutter);width:auto;bottom:calc(28px + env(safe-area-inset-bottom))}
  :where(.x52-content) .story-words::before{left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));bottom:calc(-28px - env(safe-area-inset-bottom));height:calc(100% + 160px);background:linear-gradient(180deg,rgba(10,26,44,0) 0%,rgba(10,26,44,.7) 40%,rgba(10,26,44,.88) 100%)}
  :where(.x52-content) .story-words h2{font-size:28px}
  :where(.x52-content) .story-words p{font-size:16px;max-width:none}
}

/* ---- water-toy garage (FI08, HP11) ---- */
:where(.x52-content) .garage-copy p{font-size:17px}

/* ---- film label (FI14) ---- */
:where(.x52-content) .cover .film-label{position:absolute;left:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,30px);display:flex;flex-direction:column;gap:4px;text-align:left;color:#fff;text-shadow:0 1px 10px rgba(7,22,31,.6);pointer-events:none}
:where(.x52-content) .cover .film-label b{font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.15}
:where(.x52-content) .cover .film-label span{font-size:16px;color:rgba(255,255,255,.88)}
:where(.x52-content) .cover::after{content:"";position:absolute;left:0;bottom:0;width:min(560px,70%);height:34%;background:radial-gradient(120% 100% at 0% 100%,rgba(7,22,31,.42),rgba(7,22,31,0) 72%);pointer-events:none}
/* the film covers the whole screen: no site menu shows through, and the close button reads */
:where(.x52-content) .modal{--film-band:64px;--film-h:min(56.25vw,calc(100vh - 2 * var(--film-band)));--film-w:calc(var(--film-h) * 16 / 9);background:#03101a;z-index:2600}
/* "Close" sits in the navy band above the frame, never on the player's own controls, in sentence case (round 2) */
:where(.x52-content) .modal iframe{width:var(--film-w);height:var(--film-h)}
:where(.x52-content) .modal .close{top:max(10px,calc((100% - var(--film-h)) / 2 - 54px));right:max(16px,calc((100vw - var(--film-w)) / 2));min-height:44px;padding:0 18px;border-radius:2px;border-color:rgba(175,203,228,.6);font-size:16px;font-weight:400;letter-spacing:normal;text-transform:none;z-index:2}
/* a phone on its side: the film takes the height and "Close" waits in the band beside it */
@media (orientation:landscape) and (max-height:520px){
  :where(.x52-content) .modal{--film-band:8px}
  :where(.x52-content) .modal .close{top:8px;right:8px;padding:0 12px;max-width:calc((100vw - var(--film-w)) / 2 - 16px)}
}
:where(.x52-content) .modal .turn{display:none;position:absolute;left:0;right:0;bottom:calc(24px + env(safe-area-inset-bottom));text-align:center;font-size:15px;color:rgba(255,255,255,.72)}
@media (orientation:portrait) and (max-width:700px){:where(.x52-content) .modal .turn{display:block}}

/* ---- life on board (HP04): five renders of the styled V8 in the merged light, one line each, no call to action.
   Wide screens: one large picture and four smaller ones, sized from the screen so the band is one rest (1280 x 800 fits).
   Phones and narrow screens: one row to swipe sideways (the page's flick stays vertical). The band's ground is the
   film's last colour, so the lower page keeps its one descent from the film's sky to the footer. ---- */
:where(.x52-content) .life{--life-gap:10px;--life-top:calc(var(--head-h) + 20px);display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,22px);padding:var(--life-top) var(--gutter) clamp(20px,3.6vh,36px);background:#12294a;color:#fff}
:where(.x52-content) .life-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 40px;width:var(--life-w,auto);max-width:100%;margin:0 auto}
:where(.x52-content) .life-head h2{margin:0;font-weight:300;font-size:clamp(30px,2.8vw,40px);line-height:1.1;letter-spacing:.005em;color:#fff}
:where(.x52-content) .life-head p{margin:0;max-width:640px;font-size:17px;line-height:1.45;color:rgba(175,203,228,.92)}
:where(.x52-content) .life-shot{position:relative;margin:0;overflow:hidden;border-radius:2px;background:#0f2238}
:where(.x52-content) .life-shot picture,:where(.x52-content) .life-shot img{display:block;width:100%;height:100%}
:where(.x52-content) .life-shot img{object-fit:cover;transition:transform 1.6s var(--ease)}
:where(.x52-content) .life-shot figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;padding:56px 18px 16px;background:linear-gradient(180deg,rgba(9,26,44,0) 0%,rgba(9,26,44,.5) 45%,rgba(9,26,44,.78) 100%);pointer-events:none}
:where(.x52-content) .life-shot figcaption b{font-weight:400;font-size:19px;line-height:1.2;color:#fff}
:where(.x52-content) .life-shot figcaption span{font-size:16px;line-height:1.35;color:rgba(255,255,255,.9)}
:where(.x52-content) .life-shot.big figcaption{padding:96px 26px 22px}
:where(.x52-content) .life-shot.big figcaption b{font-size:clamp(22px,2vw,28px)}
:where(.x52-content) .life-shot.big figcaption span{font-size:17px}
/* the sunset keeps its table in the frame when a tile is not quite square */
:where(.x52-content) .life-shot.big img{object-position:62% 50%}
@media (hover:hover){:where(.x52-content) .life-shot:hover img{transform:scale(1.035)}}
/* designed motion: the pictures rise in turn the first time the band comes into view (v8-home.js arms it) */
:where(.x52-content) .life.life-armed .life-shot{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
:where(.x52-content) .life.life-armed.life-in .life-shot{opacity:1;transform:none}
:where(.x52-content) .life .life-shot:nth-child(2){transition-delay:110ms}
:where(.x52-content) .life .life-shot:nth-child(3){transition-delay:220ms}
:where(.x52-content) .life .life-shot:nth-child(4){transition-delay:330ms}
:where(.x52-content) .life .life-shot:nth-child(5){transition-delay:440ms}
@media (min-width:901px){
  /* --life-h: the large picture's side, from the height left under the header and the title, or half the width */
  :where(.x52-content) .life{--life-h:min(calc(100svh - var(--life-top) - 112px),calc((100vw - 2 * var(--gutter) - var(--life-gap)) / 2));--life-s:calc((var(--life-h) - var(--life-gap)) / 2);--life-w:calc(2 * var(--life-h) + var(--life-gap))}
  :where(.x52-content) .life-grid{display:grid;grid-template-columns:var(--life-h) var(--life-s) var(--life-s);grid-template-rows:var(--life-s) var(--life-s);gap:var(--life-gap);width:var(--life-w);margin:0 auto}
  :where(.x52-content) .life-shot.big{grid-row:1 / span 2}
}
@media (min-width:901px) and (max-width:1180px){
  :where(.x52-content) .life{--life-h:min(calc(100svh - var(--life-top) - 150px),calc((100vw - 2 * var(--gutter) - var(--life-gap)) / 2))}
  /* small tiles near 200 px: a tighter caption so the picture still shows */
  :where(.x52-content) .life-shot:not(.big) figcaption{padding:40px 12px 12px}
  :where(.x52-content) .life-shot:not(.big) figcaption b{font-size:17px}
}
@media (max-width:900px){
  /* one row to swipe: a 4:5 card is most of the width (its own portrait render), the next one peeks in */
  :where(.x52-content) .life{--life-card-h:max(300px,min(105vw,calc(100svh - var(--head-h) - 230px)));--life-card:calc(var(--life-card-h) * .8);padding-left:0;padding-right:0}
  :where(.x52-content) .life-head{display:block;width:auto;margin:0;padding:0 var(--gutter)}
  :where(.x52-content) .life-head h2{font-size:30px}
  :where(.x52-content) .life-head p{margin-top:10px;font-size:16px}
  :where(.x52-content) .life-grid{display:flex;gap:var(--life-gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);padding:0 var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  :where(.x52-content) .life-grid::-webkit-scrollbar{display:none}
  /* a narrow window with a mouse gets a thin bar to pull (touch screens swipe) */
  @media (pointer:fine){:where(.x52-content) .life-grid{scrollbar-width:thin;scrollbar-color:rgba(175,203,228,.45) transparent;padding-bottom:10px}}
  :where(.x52-content) .life-grid::after{content:"";flex:0 0 calc(var(--gutter) - var(--life-gap))}
  :where(.x52-content) .life-shot{flex:0 0 var(--life-card);width:var(--life-card);height:var(--life-card-h);scroll-snap-align:start}
  :where(.x52-content) .life-shot.big figcaption{padding:72px 18px 16px}
  :where(.x52-content) .life-shot.big figcaption b{font-size:21px}
  :where(.x52-content) .life-shot.big figcaption span{font-size:16px}
  :where(.x52-content) .life-shot.big img{object-position:50% 50%}
}

/* ---- spec sheet: the buyer's numbers first (HP12), the full list behind "Full specifications" ---- */
:where(.x52-content) .sheet{justify-content:center}
:where(.x52-content) .sheet .sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vh,44px)}
:where(.x52-content) .sheet .sheet-head h2{font-weight:200;font-size:clamp(30px,2.7vw,42px);line-height:1.12}
:where(.x52-content) .sheet .buyer{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,4vh,48px) clamp(24px,3vw,48px)}
:where(.x52-content) .sheet .buyer li{display:flex;gap:16px;align-items:flex-start;min-width:0}
:where(.x52-content) .sheet .buyer b{display:block;font-weight:300;font-size:clamp(22px,1.9vw,28px);line-height:1.15;color:#fff}
:where(.x52-content) .sheet .buyer span{display:block;margin-top:6px;font-size:15px;line-height:1.45;color:rgba(175,203,228,.9)}
:where(.x52-content) .sheet .buyer .ic{color:var(--g-pale)}
:where(.x52-content) .sheet .buyer a.spec-link{display:flex;gap:16px;align-items:flex-start;min-width:0;text-decoration:none;color:inherit}
:where(.x52-content) .sheet .buyer .go{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding-bottom:4px;font-size:15px;color:var(--g-pale);border-bottom:1px solid rgba(175,203,228,.35)}
:where(.x52-content) .sheet .buyer .go::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg)}
:where(.x52-content) .sheet .buyer a.spec-link:hover .go{color:#fff;border-bottom-color:var(--g-pale)}
:where(.x52-content) .sheet .ic.ic-line{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1180px){:where(.x52-content) .sheet .buyer{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){:where(.x52-content) .sheet .buyer{gap:26px 16px}:where(.x52-content) .sheet .buyer b{font-size:21px}}
:where(.x52-content) .sheet details.full{margin-top:clamp(30px,4.5vh,52px);border-top:1px solid rgba(175,203,228,.22)}
:where(.x52-content) .sheet details.full > summary{list-style:none;display:inline-flex;align-items:center;gap:12px;min-height:48px;margin-top:14px;cursor:pointer;font-size:16px;color:var(--g-pale)}
:where(.x52-content) .sheet details.full > summary::-webkit-details-marker{display:none}
:where(.x52-content) .sheet details.full > summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
:where(.x52-content) .sheet details.full[open] > summary::after{transform:rotate(225deg) translateY(-2px)}
:where(.x52-content) .sheet details.full > summary:hover{color:#fff}
:where(.x52-content) .sheet details.full .specs{margin-top:22px}
:where(.x52-content) .sheet .specs .u,:where(.x52-content) .sheet .option .u{font-size:14px}
:where(.x52-content) .sheet .specs .note{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:rgba(175,203,228,.7)}

/* ---- 7 layouts in buyer language (HP00, HP01, HP02, HP07, HP10) ---- */
:where(.x52-content) .lay-cap{font-size:15px;font-weight:400;letter-spacing:.02em;text-transform:none}
:where(.x52-content) .lay-anchors{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;pointer-events:none}
:where(.x52-content) .lay-anchors i{position:absolute;left:0;top:0}
:where(.x52-content) .layouts{position:relative}
:where(.x52-content) .lay-head .lede{max-width:34ch}
/* the plan: room names, the bow, and the chosen cabin glowing */
:where(.x52-content) .lay-plan .cabin polygon{fill:rgba(233,220,196,.16);stroke:var(--g-sand);stroke-width:2;filter:drop-shadow(0 0 7px rgba(233,220,196,.75))}
:where(.x52-content) .lay-plan.is-swap .cabin polygon{animation:g-cabin 1.2s var(--ease)}
@keyframes g-cabin{0%{fill:rgba(233,220,196,.16)}35%{fill:rgba(233,220,196,.42);stroke-width:3.5}100%{fill:rgba(233,220,196,.16)}}
:where(.x52-content) .plan-labels{position:absolute;inset:0;pointer-events:none}
:where(.x52-content) .plan-labels .pl{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:5px 10px 4px;border-radius:2px;background:rgba(15,34,56,.84);border:1px solid rgba(175,203,228,.32);color:#fff;font-size:14px;line-height:1.15;white-space:nowrap;box-shadow:0 2px 10px rgba(7,22,31,.3)}
:where(.x52-content) .plan-labels .pl-choice{background:var(--g-sand);border-color:var(--g-sand);color:var(--g-ink);font-weight:400}
:where(.x52-content) .plan-labels .pl-bow{display:flex;align-items:center;gap:7px;padding-left:9px;color:var(--g-pale)}
:where(.x52-content) .plan-labels .pl-bow::before{content:"";width:7px;height:7px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
:where(.x52-content) .lay-plan .plan-zoom{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:2px;background:rgba(15,34,56,.84);border:1px solid rgba(175,203,228,.35);color:#fff;font-size:14px;cursor:zoom-in}
:where(.x52-content) .lay-plan .plan-zoom svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
:where(.x52-content) .lay-plan{touch-action:pan-x pan-y;cursor:zoom-in}
/* the chosen layout, spelled out */
:where(.x52-content) .lay-now .lay-line{margin-top:12px;font-size:17px;line-height:1.45;color:rgba(255,255,255,.9);max-width:34ch}
:where(.x52-content) .lay-now .lay-has{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
:where(.x52-content) .lay-now .lay-has li{display:inline-flex;align-items:center;gap:7px;font-size:15px;color:#fff}
:where(.x52-content) .lay-now .lay-has li.chip{min-height:30px;padding:0 10px;border-radius:2px;border:1px solid rgba(175,203,228,.35);font-size:14px;color:var(--g-pale)}
:where(.x52-content) .lay-now .lay-has li.chip.sleeps{background:rgba(175,203,228,.12);color:#fff}
:where(.x52-content) .lay-now .lay-has svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--g-pale);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:where(.x52-content) .lay-now .lay-acts{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
:where(.x52-content) .lay-now .lay-acts .lay-ask{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;padding:0;font-size:16px;text-decoration:underline;text-decoration-color:rgba(175,203,228,.45);text-underline-offset:5px}
:where(.x52-content) .lay-now .lay-acts .lay-ask:hover{text-decoration-color:#fff}
:where(.x52-content) .lay-now .lay-acts .cta{margin:0}
:where(.x52-content) .lay-near{margin:12px 0 0;font-size:15px;line-height:1.5;color:rgba(175,203,228,.9)}
:where(.x52-content) .lay-near[hidden]{display:none}
:where(.x52-content) .lay-near .g-text-link{white-space:nowrap}
/* the tiles: picture (phones) or icon plate (wide screens), name, warm line, who it suits */
:where(.x52-content) .lay-picks .pic{position:relative;display:block;margin-bottom:10px}
:where(.x52-content) .lay-picks .pic .th{margin-bottom:0}
:where(.x52-content) .lay-picks .plate{display:flex;align-items:center;justify-content:center;gap:10px;height:62px;border-radius:2px;background:linear-gradient(180deg,#163254,#0f2238);outline:1px solid rgba(175,203,228,.22);transition:outline-color .3s,outline-offset .3s,background .3s}
:where(.x52-content) .lay-picks .plate svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--g-pale);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:where(.x52-content) .lay-picks button[aria-checked="true"] .plate{outline:1.5px solid var(--g-sand);outline-offset:3px;background:linear-gradient(180deg,#1d3d63,#132b48)}
:where(.x52-content) .lay-picks button[aria-checked="true"] .plate svg{stroke:#fff}
:where(.x52-content) .lay-picks button:focus-visible .plate{outline:2px solid #fff;outline-offset:3px}
:where(.x52-content) .lay-picks .line{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.72)}
:where(.x52-content) .lay-picks .who{display:block;margin-top:6px;font-size:14px;line-height:1.35;color:var(--g-pale)}
:where(.x52-content) .lay-picks button[aria-checked="true"] .line{color:rgba(255,255,255,.95)}
:where(.x52-content) .lay-picks .pic .tag{top:6px;right:6px}
@media (min-width:901px){
  :where(.x52-content) .layouts{padding-top:calc(var(--head-h) + 8px);padding-bottom:16px}
  :where(.x52-content) .lay-cap{display:none}
  :where(.x52-content) .lay-head .lede{font-size:16px;line-height:1.45}
  :where(.x52-content) .lay-picks .plate{height:46px}
  :where(.x52-content) .lay-picks .plate svg{width:28px;height:28px}
  :where(.x52-content) .lay-now .lay-line{font-size:16px;margin-top:8px}
  :where(.x52-content) .lay{grid-template-columns:minmax(360px,460px) minmax(0,1fr);grid-template-areas:"head plan" "now plan" "picks picks"}
  /* round 2: "Closest in 3D" sits under its button, in the caption column, and its place is kept for every layout, so
     switching between 3D and non-3D layouts moves nothing */
  :where(.x52-content) .lay-near{margin-top:10px;min-height:calc(2 * 1.5em)}
  :where(.x52-content) .lay-near[hidden]{display:block!important;visibility:hidden}
  :where(.x52-content) .lay-head h2{font-size:clamp(30px,2.5vw,38px)}
  :where(.x52-content) .lay-head .lede{margin-top:10px}
  :where(.x52-content) .lay-now{align-self:start;margin-top:8px;padding-bottom:0;min-height:18em}   /* the tallest layout's caption: the column keeps one height for all seven (round 2) */
  :where(.x52-content) .lay-now .n{font-size:34px}
  :where(.x52-content) .lay-now .t{font-size:19px}
  :where(.x52-content) .lay-plan{width:min(100%,max(460px,calc((100svh - 372px) * 1.652)))}
  :where(.x52-content) .lay-picks{margin-top:14px;padding-top:12px;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px}
  :where(.x52-content) .lay-picks .pic .th{display:none}
  :where(.x52-content) .lay-picks .t{font-size:15px}
  /* laptops under 800 px tall (1366 x 768): a little tighter, so the section stays one screen with every layout */
  @media (max-height:790px){
    :where(.x52-content) .lay-head h2{font-size:32px}
    :where(.x52-content) .lay-picks{margin-top:8px;padding-top:8px}
    :where(.x52-content) .lay-picks .plate{height:38px}
    :where(.x52-content) .lay-now{margin-top:4px}
  }
}
@media (max-width:900px){
  /* phones and tablets: choose right under the plan (the tiles), then read the choice and act on it */
  :where(.x52-content) .lay{grid-template-areas:"head" "plan" "picks" "now"}
  :where(.x52-content) .lay-picks{margin-top:6px}
  :where(.x52-content) .lay-near{margin-top:10px}
  :where(.x52-content) .lay-picks .plate{position:absolute;left:6px;bottom:6px;height:auto;padding:5px 7px;gap:6px;background:rgba(15,34,56,.86);outline:0}
  :where(.x52-content) .lay-picks .plate svg{width:22px;height:22px}
  :where(.x52-content) .lay-picks button[aria-checked="true"] .plate{outline:0;background:rgba(15,34,56,.92)}
  :where(.x52-content) .lay-picks button[aria-checked="true"] .th{outline-color:var(--g-sand)}
  :where(.x52-content) .lay-picks button{flex:0 0 164px}
  :where(.x52-content) .lay-now{display:block;margin-top:10px;padding-top:14px;border-top:1px solid rgba(175,203,228,.22);min-height:0}
  :where(.x52-content) .lay-now p.lay-name{display:flex;gap:10px;align-items:baseline}
  :where(.x52-content) .lay-now .lay-acts .cta{padding:0 18px}
}
@media (max-width:600px){
  /* the idea of the section, on phones too (HP01) */
  :where(.x52-content) .lay-head .lede{display:block;font-size:15px;line-height:1.45;margin-top:8px}
  :where(.x52-content) .lay-cap{display:none}
  :where(.x52-content) .plan-labels .pl{left:var(--xp,var(--x));top:var(--yp,var(--y))}
  :where(.x52-content) .plan-labels .pl[data-phone="no"]{display:none}
  :where(.x52-content) .plan-labels .pl-bow::before{transform:rotate(135deg);margin-top:4px}
  :where(.x52-content) .lay-now .lay-line{font-size:16px;margin-top:8px}
  :where(.x52-content) .lay-now .lay-acts{margin-top:14px}
  :where(.x52-content) .lay-now .lay-acts > *{flex:1 1 100%}
  :where(.x52-content) .lay-plan .plan-zoom{right:6px;bottom:6px}
  /* round 2 (phone re-review): the first rest ends below the tiles' words, not through them: the plan gives up a little
     height so the whole tile row fits under it on a 390 x 844 phone */
  :where(.x52-content) .lay-plan{width:min(100%,max(58vw,calc((100svh - 500px) * .677)))}
}

/* ---- the 3D tour over the page (HP03): the page stays where it was ---- */
:where(.x52-content) .tour-layer{position:fixed;inset:0;z-index:2500;display:flex;flex-direction:column;background:#07161f}
:where(.x52-content) .tour-layer[hidden]{display:none}
:where(.x52-content) .tour-bar{flex:none;display:flex;align-items:center;gap:14px;min-height:56px;padding:6px max(12px,env(safe-area-inset-left)) 6px max(12px,env(safe-area-inset-left));background:linear-gradient(180deg,#163254,#0f2238);border-bottom:1px solid rgba(175,203,228,.22);color:#fff}
:where(.x52-content) .tour-bar .tour-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border:1px solid rgba(175,203,228,.45);border-radius:2px;font-size:16px;color:#fff}
:where(.x52-content) .tour-bar .tour-back:hover{background:rgba(175,203,228,.14)}
:where(.x52-content) .tour-bar .tour-back::before{content:"";width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:4px}
:where(.x52-content) .tour-bar .tour-title{flex:1;min-width:0;font-size:16px;line-height:1.3;color:var(--g-pale);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(.x52-content) .tour-bar .tour-back .short{display:none}
:where(.x52-content) .tour-frame{position:relative;flex:1;min-height:0}
:where(.x52-content) .tour-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#1c6fbe}
@media (max-width:600px){
  /* phones: "Back" and the layout's name; the bar never carries a sales call to action while the tour is on screen */
  :where(.x52-content) .tour-bar{gap:12px}
  :where(.x52-content) .tour-bar .tour-title{font-size:15px}
  :where(.x52-content) .tour-bar .tour-back .long{display:none}
  :where(.x52-content) .tour-bar .tour-back .short{display:inline}
}

/* ---- "Ask about this layout": one sheet, in the thumb zone on phones (HP05, PH05) ---- */
:where(.x52-content) .ask-layer{position:fixed;inset:0;z-index:2700;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(3,12,20,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
:where(.x52-content) .ask-layer[hidden]{display:none}
:where(.x52-content) .ask-card{position:relative;width:min(520px,100%);padding:30px 30px 26px;border-radius:2px;background:linear-gradient(180deg,#163254,#0f2238);border:1px solid rgba(175,203,228,.3);color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.45);animation:g-rise .45s var(--ease)}
@keyframes g-rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
:where(.x52-content) .ask-card h2{font-weight:300;font-size:30px;line-height:1.15;padding-right:40px}
:where(.x52-content) .ask-card p{margin-top:12px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.88)}
/* Joseph ("remove senseless words"): the sheet's title already names the layout, so its "Your layout: …" line is not shown */
:where(.x52-content) .ask-card .ask-choice{display:none!important}
:where(.x52-content) .ask-card .ask-choice b{font-weight:400;color:#fff}
:where(.x52-content) .ask-card .ask-acts{margin-top:22px;display:flex;flex-direction:column;gap:10px}
:where(.x52-content) .ask-card .ask-acts .cta,:where(.x52-content) .ask-card .ask-acts .g-line-btn{width:100%}
:where(.x52-content) .ask-card .ask-acts .cta-site{font-size:15px;padding:0 14px}
:where(.x52-content) .ask-card .ask-addr{margin-top:18px;font-size:15px;color:rgba(175,203,228,.9)}
:where(.x52-content) .ask-card .ask-addr a{color:#fff}
:where(.x52-content) .ask-card .ask-close{position:absolute;top:10px;right:10px;width:44px;height:44px;display:grid;place-items:center;border-radius:2px;color:#fff}
:where(.x52-content) .ask-card .ask-close::before,:where(.x52-content) .ask-card .ask-close::after{content:"";position:absolute;width:18px;height:1.5px;background:currentColor;transform:rotate(45deg)}
:where(.x52-content) .ask-card .ask-close::after{transform:rotate(-45deg)}
:where(.x52-content) .ask-card .ask-close:hover{background:rgba(175,203,228,.14)}
@media (max-width:600px){
  :where(.x52-content) .ask-layer{align-items:flex-end;padding:0}
  :where(.x52-content) .ask-card{width:100%;padding:26px 20px calc(20px + env(safe-area-inset-bottom));border-left:0;border-right:0;border-bottom:0}
  :where(.x52-content) .ask-card h2{font-size:26px}
}

/* ---- the closing band, in the spirit of the site's "Ready to get started?" (HP05, PH05), where the lone "Inquiries" line was ---- */
:where(.x52-content) .contact.next{padding-top:calc(var(--head-h) + clamp(28px,6vh,72px));padding-bottom:clamp(40px,7vh,88px)}
:where(.x52-content) .next-in{max-width:980px}
:where(.x52-content) .next-cap{font-size:15px;letter-spacing:.04em;color:var(--g-pale);margin-bottom:12px}
:where(.x52-content) .next h2{font-weight:200;font-size:clamp(34px,3.4vw,52px);line-height:1.08}
:where(.x52-content) .next .next-lede{margin-top:16px;font-size:18px;line-height:1.5;color:rgba(255,255,255,.88);max-width:44ch}
:where(.x52-content) .next .next-choice{margin-top:18px;font-size:16px;color:var(--g-pale)}
:where(.x52-content) .next .next-choice b{font-weight:400;color:#fff}
/* round 2 (phone re-review): the small links get 44 px tall tap areas and keep their look; their underline is drawn as
   text decoration, so the padding that makes the tap area does not move it */
:where(.x52-content) .next-choice a.g-text-link,:where(.x52-content) .ask-card .ask-addr a{display:inline-block;padding:12px 2px;margin:-12px -2px;border-bottom:0;text-decoration:underline;text-decoration-color:rgba(175,203,228,.45);text-decoration-thickness:1px;text-underline-offset:5px}
:where(.x52-content) .next-choice a.g-text-link:hover,:where(.x52-content) .ask-card .ask-addr a:hover{text-decoration-color:#fff}
:where(.x52-content) .contact .addr{padding-top:9px;margin-top:-9px}
/* round 2: nothing chosen yet, the line invites the choice ("Choose a layout"); chosen, it names it with "Change" */
:where(.x52-content) .next-choice:not(.is-picked) .nc-on,:where(.x52-content) .next-choice.is-picked .nc-off,:where(.x52-content) .ask-choice:not(.is-picked){display:none}
:where(.x52-content) .next .next-acts{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
:where(.x52-content) .next .next-acts .cta{min-height:52px;padding:0 28px}
:where(.x52-content) .next .next-acts .g-line-btn{min-height:52px}
:where(.x52-content) .next .inq{margin-top:34px;padding-top:22px;border-top:1px solid rgba(175,203,228,.2)}
:where(.x52-content) .contact .cap{font-size:15px;letter-spacing:.02em;font-weight:400;text-transform:none}
@media (max-width:600px){
  :where(.x52-content) .contact.next{padding-top:calc(var(--head-h) + 13vh)}
  :where(.x52-content) .next .next-acts{flex-direction:column}
  :where(.x52-content) .next .next-acts > *{width:100%}
  :where(.x52-content) .next .next-lede{font-size:17px}
}

/* ---- plan, enlarged (PH10): pinch and drag inside, one tap to close ---- */
:where(.x52-content) .plan-zoom-layer{position:fixed;inset:0;z-index:2600;background:#0c2038;touch-action:none;overflow:hidden}
:where(.x52-content) .plan-zoom-layer[hidden]{display:none}
:where(.x52-content) .plan-zoom-layer .pz-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
:where(.x52-content) .plan-zoom-layer .pz-fig{position:relative;margin:0;transform-origin:0 0;will-change:transform}
:where(.x52-content) .plan-zoom-layer .pz-fig .lay-plan{width:100%!important;margin:0;cursor:grab}
:where(.x52-content) .plan-zoom-layer .pz-close{position:absolute;z-index:2;top:max(12px,env(safe-area-inset-top));right:12px;min-height:44px;padding:0 16px;border-radius:2px;background:rgba(15,34,56,.9);border:1px solid rgba(175,203,228,.4);color:#fff;font-size:16px}
:where(.x52-content) .plan-zoom-layer .pz-hint{position:absolute;z-index:2;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));text-align:center;font-size:15px;color:rgba(175,203,228,.9);pointer-events:none}

/* ---- phone and small-print fixes ---- */
/* PH10: two fingers on the 3D hero do not zoom the whole page (the story owns the gestures there) */
:where(.x52-content) .stage,:where(.x52-content) .stage iframe{touch-action:pan-y}
/* PH18: readable small print */
:where(.x52-content) .to3d{font-size:14px;letter-spacing:normal}
:where(.x52-content) .load span{font-size:15px;letter-spacing:.12em}
:where(.x52-content) .load small{font-size:14px;letter-spacing:.04em;text-transform:none}
/* HP17, PH22: the round "to top" arrow only where nothing else is: never on touch screens (a swipe does it),
   and on wide screens only over the page's end */
body.x52-homepage #sticky-to-top.x52-totop-visible{display:none!important}
html.x52-at-end body.x52-homepage #sticky-to-top.x52-totop-visible{display:block!important}
@media (hover:none),(pointer:coarse),(max-width:900px){html.x52-at-end body.x52-homepage #sticky-to-top.x52-totop-visible{display:none!important}}
/* PH22: past the story the site header gets its own ground, so it never sits on the footer's words */
body.x52-homepage :is(.tm-header,.tm-header-mobile) .uk-navbar-container{transition:background-color .35s linear,box-shadow .35s linear}
html.x52-head-solid body.x52-homepage :is(.tm-header,.tm-header-mobile) .uk-navbar-container{background:#0f2238!important;box-shadow:0 1px 0 rgba(175,203,228,.18)}
/* HP18 (round 2): over the 3D the header is clear, without the theme's frosted blur, which smeared the paddleboard at
   "Step inside", the hardtop at the bow and stern and the island at the flybridge; a soft shadow keeps its words legible */
body.x52-homepage :is(.tm-header,.tm-header-mobile) .uk-navbar-container{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:not(.x52-head-solid) body.x52-homepage .tm-header .uk-navbar-container :is(.uk-navbar-nav>li>a,.uk-navbar-toggle){text-shadow:0 1px 10px rgba(7,22,31,.55)}
/* FI11, HP16: the shared event strip keeps its height from the first frame, so the menu never jumps */
body.x52-homepage #x52-strip-space{position:absolute;inset:0 0 auto;height:var(--x52-strip-reserve,0px);z-index:998;background:#101315;transition:height .45s var(--ease,ease)}
body.x52-homepage :is(.tm-header,.tm-header-mobile) > [uk-sticky]{transition:top .45s cubic-bezier(.22,.61,.36,1)}


/* Joseph ("lot of texts - the user never knows where its at"): the layout tiles show number and name only;
   the chosen layout's line and berths are shown once, beside the plan. Empty text elements take no space. */
:where(.x52-content) .lay [role=radio] .line,:where(.x52-content) .lay [role=radio] .who{display:none}
:where(.x52-content) .sw p:empty,:where(.x52-content) .garage-copy p:empty,:where(.x52-content) .life-head p:empty,:where(.x52-content) .buyer span:empty,
:where(.x52-content) .life-shot figcaption span:empty,:where(.x52-content) .lay-cap:empty,:where(.x52-content) .lede:empty,
:where(.x52-content) .next-cap:empty,:where(.x52-content) .next-lede:empty,:where(.x52-content) .title .promise:empty{display:none}
/* Joseph ("EMAIL ALSO DOESNT - HAVE YOU EVEN CHECKED THE PRICING"): the pricing page is the one way on; no email asks on the page */
:where(.x52-content) .lay-ask{display:none!important}
/* Joseph ("WHAT THE FUCK IS THREE DECKS ... and the rest"): no words over the story; the labels on the yacht name the places */
:where(.x52-content) .sw h2:empty,:where(.x52-content) .sw p:empty{display:none}

/* ==== One look below the story (Joseph: "random design", "the design inconsistent", "even the order is senless").
   Order: story, garage, life on board, the 7 layouts, the sheet, the film, pricing. Every section starts in the colour the
   one above it ends in (his matching pairs), shares one heading, one top line, one button and one fact style. ==== */
:where(.x52-content){--sec-top:calc(var(--head-h) + clamp(40px,7vh,72px))}
/* one heading */
:where(.x52-content) .garage h2,:where(.x52-content) .life h2,:where(.x52-content) .sheet h2,:where(.x52-content) .layouts h2,:where(.x52-content) .contact h2{
  font-size:clamp(30px,2.8vw,42px)!important;font-weight:200!important;letter-spacing:.005em!important;line-height:1.15!important;margin-top:0!important}
/* one top line: every heading starts the same distance under the header */
:where(.x52-content) .life,:where(.x52-content) .sheet,:where(.x52-content) .layouts{justify-content:flex-start!important;padding-top:var(--sec-top)!important}
:where(.x52-content) .contact{padding-top:var(--sec-top)!important}
@media (min-width:701px){:where(.x52-content) .garage-copy{top:var(--sec-top)!important}}
/* one button: hairline for the 3D, red only for pricing, one height */
:where(.x52-content) .garage-copy .cta,:where(.x52-content) .lay-acts .cta{height:48px!important;padding:0 26px!important;font-size:16px!important}
:where(.x52-content) .hero-cta,:where(.x52-content) .next-acts .cta-site{height:48px!important;min-height:48px!important;padding:0 26px!important;font-size:16px!important;border:0!important}
/* one fact style: no boxed chip */
:where(.x52-content) .lay-now .lay-has li.chip.sleeps{background:none!important;border:0!important;padding:0!important;height:auto!important;color:#afcbe4!important}
/* one plan label style: "Your choice" and "Bow" like the other names on the plan */
:where(.x52-content) .lay-plan .pl{background:rgba(15,34,56,.84)!important;color:#fff!important}
:where(.x52-content) .lay-plan .pl-choice{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
/* matching pairs down the page: garage water -> life -> layouts -> sheet -> film (his cover band) -> pricing -> footer */
:where(.x52-content) .life{background:linear-gradient(180deg,#12879c 0,#12294a var(--sec-top),#12294a 100%)!important}
:where(.x52-content) .layouts{background:linear-gradient(180deg,#12294a 0%,#0c2038 100%)!important}
:where(.x52-content) .sheet{background:linear-gradient(180deg,#0c2038 0%,#0a1b30 100%)!important}
:where(.x52-content) .film{background:linear-gradient(180deg,#0a1b30 0,var(--frame-top) var(--band),var(--frame-bottom) calc(var(--band) + var(--cover-h)),#0f2238 100%)!important}
:where(.x52-content) .contact{background:linear-gradient(180deg,#0f2238 0%,#1e2225 100%)!important}

/* ==== One layout for every section (Joseph: "why everything is different", "every thing ... has to earn its place").
   Each section: its name at the same top line, then one block in the page gutters; pictures are framed alike (2 px);
   no decorative rules. Garage and film pictures are framed like Life on board. ==== */
:where(.x52-content) .garage,:where(.x52-content) .film{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-items:initial!important;
  box-sizing:border-box!important;height:100svh!important;min-height:0!important;padding:var(--sec-top) var(--gutter) clamp(24px,5vh,48px)!important}
:where(.x52-content) .garage{background:linear-gradient(180deg,var(--sea3d,#08b29f) 0,#12294a var(--sec-top),#12294a 100%)!important}
:where(.x52-content) .film{background:linear-gradient(180deg,#0a1b30 0%,#0f2238 100%)!important}
:where(.x52-content) .garage::before{display:none!important}
:where(.x52-content) .garage-copy{position:static!important;order:1;display:flex!important;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
  width:auto!important;max-width:none!important;margin:0 0 clamp(18px,2.6vh,28px)!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important}
:where(.x52-content) .garage .shot{position:relative!important;inset:auto!important;order:2;flex:1 1 auto;min-height:0;width:100%!important;height:auto!important;border-radius:2px;overflow:hidden}
:where(.x52-content) .garage .shot img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
:where(.x52-content) .film-title{margin:0 0 clamp(18px,2.6vh,28px);color:#fff}
:where(.x52-content) .film .cover{flex:1 1 auto;min-height:0;width:100%!important;max-width:none!important;height:auto!important;margin:0!important;border-radius:2px;overflow:hidden;position:relative}
:where(.x52-content) .film .cover img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
:where(.x52-content) .film h2{font-size:clamp(30px,2.8vw,42px)!important;font-weight:200!important;letter-spacing:.005em!important;line-height:1.15!important}
/* Life on board: every picture opens its place in the 3D tour */
:where(.x52-content) .life-go{display:block;width:100%;height:100%;position:relative;color:inherit;text-decoration:none;cursor:pointer}
:where(.x52-content) .life-go:focus-visible{outline:2px solid #afcbe4;outline-offset:-2px}
/* the sheet: one list, every line visible, no click */
:where(.x52-content) .sheet .buyer.all{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:clamp(18px,2.6vh,30px) 32px!important}
@media (max-width:700px){:where(.x52-content) .sheet .buyer.all{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 16px!important}
  :where(.x52-content) .sheet{height:auto!important;min-height:100svh}}
/* no decorative rules */
:where(.x52-content) .lay-picks,:where(.x52-content) .lay-now{border-top:0!important}
/* the garage now ends in the navy, so Life on board starts in it (matching pair) */
:where(.x52-content) .life{background:linear-gradient(180deg,#12294a 0%,#12294a 100%)!important}
/* phones: the sheet reads as one list, each line whole */
@media (max-width:700px){:where(.x52-content) .sheet .buyer.all{grid-template-columns:1fr!important;gap:14px!important}}

/* Joseph 2026-09-26: "IF YOU ARE OPENNING SOMETHING IN 3D SAY IT ON HOVER". Everything that opens the 3D tour
   (the Life on board pictures, "Open the garage", "Walk through it") says so on hover and on keyboard focus:
   the pictures in their caption's second line, the buttons in a label above them, in the page's own button colours. */
:where(.x52-content) .life-go figcaption::after{content:'Opens in 3D';font-size:16px;line-height:1.35;color:rgba(255,255,255,.9);opacity:0;transition:opacity .25s}
:where(.x52-content) .life-go:hover figcaption::after,:where(.x52-content) .life-go:focus-visible figcaption::after{opacity:1}
:where(.x52-content) a.cta[data-tour]{position:relative}
:where(.x52-content) a.cta[data-tour]::after{content:'Opens in 3D'!important;display:block!important;position:absolute!important;left:50%!important;right:auto!important;top:auto!important;bottom:calc(100% + 8px)!important;width:auto!important;height:auto!important;transform:translateX(-50%)!important;margin:0!important;padding:4px 10px!important;white-space:nowrap!important;font-family:inherit!important;font-size:14px!important;font-weight:400!important;line-height:1.3!important;letter-spacing:normal!important;text-transform:none!important;color:#fff!important;background:rgba(15,34,56,.85)!important;border:1px solid rgba(175,203,228,.6)!important;border-radius:2px!important;box-shadow:none!important;opacity:0!important;pointer-events:none!important;transition:opacity .25s!important;z-index:2!important}
:where(.x52-content) a.cta[data-tour]:hover::after,:where(.x52-content) a.cta[data-tour]:focus-visible::after{opacity:1!important}
/* "Walk through it" has the layout's line right above it: its label stands beside the button instead */
:where(.x52-content) .lay-acts a.cta[data-tour]::after{left:calc(100% + 10px)!important;bottom:auto!important;top:50%!important;transform:translateY(-50%)!important}