/* ============================================================================
   STARHUB MALTA — shared design system  ·  Solomon Studio spec demo
   Extracted from the single-page build 2026-08-14 when the site went multi-page
   (Phase A of site-architecture-plan-2026-08-14.md).

   Deliberate deviation from the house stack: the studio's demos are normally ONE
   self-contained index.html with an inline <style>. A four-page site cannot
   duplicate 330 lines of CSS four times and stay honest about drift, so the
   system lives here and every page links it RELATIVELY (assets/site.css from the
   root page, ../assets/site.css from a sub-page). Still zero build step, still
   static, still works from file://.

   Design vocabulary: style-library pack `split-boat-tours` (captured 2026-08-10).
   ============================================================================ */

:root{
  /* split-boat-tours pack — light */
  --paper:#FFFFFF;            /* white page ground — founder instruction 2026-08-20.
                                 Was #F3E3D9 blush sand from the split-boat-tours pack. */
  --card:#FFFFFF;
  --cream:#FAF8D1;            /* warm band */
  --ink:#1B2A3C;              /* deep navy */
  --muted:#4A5A6C;
  --brand:#8C5230;            /* AA-corrected terracotta (source #BB774F fails) */
  --brand-deep:#6E3F24;
  --wash:rgba(187,119,79,.12);
  --sea:#568681;              /* sea-green — GRAPHIC ONLY, never body text */
  --veil:#FFBC7D;             /* apricot accent. This WAS the page-transition
                                 layer, removed 2026-08-21; the colour is still
                                 used by the footer kicker and the quote button */
  --line:rgba(0,0,0,.125);
  /* ---- ONE FAMILY EVERYWHERE, the way Fraser does it -------------------------
     Fraser sets `Futura, Verdana, sans-serif` on <html> and lets every element
     inherit it — no second body face, no monospace. Measured on their site
     2026-08-20: they self-host Futura PT Book / Medium / Light as .woff2 from
     fraseryachts.com/fonts/. Futura PT is ParaType's commercial release; those
     files are licensed to them and cannot be copied here. It is also NOT
     installed on this machine, so a bare `Futura` would fall through to Verdana.

     So the stack is written licence-ready: the moment Futura PT is added (Adobe
     Fonts web project, or a purchased self-hosted kit) it takes over with no
     further edit. Until then Jost renders — the closest free geometric, and
     measured ~7-10% wider than Futura PT at identical size and tracking
     (h1 743px vs 678px, nav 145px vs 136px). Sizes below are Fraser's exactly. */
  --futura:"Futura PT","FuturaPT",Futura,"Jost","Century Gothic",Verdana,sans-serif;
  --display:var(--futura);
  --sans:var(--futura);
  --mono:var(--futura);       /* Fraser has no mono; its small labels are the same face, tracked */
  --bar:var(--futura);
  /* The FRASER logotype is OUTLINED VECTOR in their SVG — 20 paths, zero <text>
     elements — and their site loads no serif at all (only Futura PT Book/Medium/
     Light). So the face cannot be read off the page; it was matched against the
     outlines by pixel IoU at equal cap height on 2026-08-20. Best free match:
     Libre Baskerville (IoU .703, letter-width error .027 — best combined score).
     Every Didone tested (Playfair, Bodoni Moda, Libre Bodoni, Prata, Antic
     Didone, Italiana) scored WORSE, so this is a transitional serif of the
     Baskerville/Times class, not a Bodoni. It is a stand-in, not an identification. */
  --serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --script:"Sacramento",cursive;   /* kept: a decorative signature on the trip cards, not typography */
  --maxw:1140px; --radius:10px;
  --shadow:0 16px 38px -22px rgba(27,42,60,.4);
}
/* RETIRED 2026-08-20 — this automatic dark-scheme flip is what was painting the
   page navy on a dark-mode OS; it was never a design choice made for this site.
   The founder asked for a white background, so the page no longer follows the
   system scheme. The explicit ?theme=dark opt-in used by the /web demo frame
   still works through :root[data-theme="dark"] below.

@media (prefers-color-scheme:dark){
  :root{
    --paper:#1B2A3C; --card:#24354A; --cream:#2A3C53; --ink:#F3E3D9; --muted:#A9B6C6;
    --brand:#D89A72; --brand-deep:#BB774F; --wash:rgba(216,154,114,.16);
    --sea:#7FB3AD; --line:rgba(255,255,255,.125);
    --shadow:0 16px 38px -22px rgba(0,0,0,.65);
  }
}
*/
:root[data-theme="light"]{ --paper:#FFFFFF; --card:#FFFFFF; --cream:#FAF8D1; --ink:#1B2A3C; --muted:#4A5A6C; --brand:#8C5230; --brand-deep:#6E3F24; --wash:rgba(187,119,79,.12); --sea:#568681; --line:rgba(0,0,0,.125); --shadow:0 16px 38px -22px rgba(27,42,60,.4); }
:root[data-theme="dark"]{ --paper:#1B2A3C; --card:#24354A; --cream:#2A3C53; --ink:#F3E3D9; --muted:#A9B6C6; --brand:#D89A72; --brand-deep:#BB774F; --wash:rgba(216,154,114,.16); --sea:#7FB3AD; --line:rgba(255,255,255,.125); --shadow:0 16px 38px -22px rgba(0,0,0,.65); }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
/* Fraser body, measured identical at 1600/1280/768/390: 16px · w400 · ls 1.37px · lh 24px.
   The size does NOT scale with viewport on their site — 16px at every breakpoint. */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;font-weight:400;line-height:24px;letter-spacing:1.37px;-webkit-font-smoothing:antialiased}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:inherit}
img{max-width:100%;display:block}
/* ---- Fraser heading scale, measured at four widths on 2026-08-20 --------------
             1600px      1280px      768px       390px
     h1      60 / 75     56 / 70     48 / 60     28 / 35      w500 · ls .1em · lh 1.25
     h2      40 / 50     36 / 45     36 / 45     22 / 27.5    w500 · ls .1em · lh 1.25
     h3      34 / 30.6   28 / 25.2   28 / 25.2   20 / 18      w500 · ls normal · lh .9
   Two invariants hold at every width: h1/h2 track at exactly .1em with a 1.25
   leading, and h3 has NO tracking with a .9 leading. Nothing on Fraser is bolder
   than 500 — they ship only Light 300, Book 400 and Medium 500.
   The clamps below reproduce those four measured points as a linear ramp. */
h1,h2{font-family:var(--display);font-weight:500;text-transform:uppercase;
  line-height:1.25;margin:0;letter-spacing:.1em;text-wrap:balance}
h1{font-size:clamp(28px,17.7px + 2.645vw,60px)}
h2{font-size:clamp(22px,16.2px + 1.488vw,40px)}
h3{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:normal;
  font-size:clamp(20px,15.5px + 1.157vw,34px);line-height:.9;margin:0}
.eyebrow{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);margin:0 0 14px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.btn{display:inline-flex;align-items:center;gap:.6ch;font-family:var(--mono);font-size:14px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:14px 26px;border-radius:999px;
  border:1.5px solid var(--brand);cursor:pointer;background:var(--brand);color:#fff;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px) skewX(-1.5deg);box-shadow:var(--shadow);background:var(--brand-deep)}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--wash)}

/* The apricot page-transition layer was REMOVED on 2026-08-21 at the founder's
   instruction. It was a full-viewport overlay at z-99 that wiped up over every
   page load; --veil survives below purely as a colour token, still used by the
   footer kicker and the quote button. */

/* ============================================================================
   TOP BAR — Fraser Yachts geometry, measured over CDP 2026-08-20, not eyeballed.
   Source: fraseryachts.com/en/yachts-for-charter/ at a 1600px viewport.

   Every number below was read off the live site's computed styles:
     band        #040F29 (their --color-blue)      rule  #EB1923 (--color-coral)
     height      140px desktop / 76px mobile       top pad 24px
     control row 44px    gutter 16px    nav row 44px    side pad 24px
     rules       6px WHITE stacked above 6px CORAL (4px each below 1024px)
     nav link    15px · w400 · ls .1em · line-height .9em · #DADADA · pad 0 12px
     hover       22x1px coral bar, left:12px top:22px, width .3s cubic(.4,0,.2,1)
     pill/CTA    h44 · 1px #6F7481 · 15px · ls .1em · uppercase · radius 0
     pill hover  border -> #DADADA        icon colour #C0C3C9

   TYPE NOTE: Fraser declares `Futura, Verdana, sans-serif` and loads no webfont
   for it, so most of their visitors are served Verdana. Jost is already loaded
   here and is a geometric grotesque in the Futura line, so it leads the stack —
   this renders closer to Fraser's intent than Fraser's own delivery does.

   NOT COPIED, deliberately: their crest + wordmark (studio rule — no copied
   logos), their SEARCH control (Starhub has no search; shipping a dead one
   would be an invented capability) and their wishlist heart.
   ============================================================================ */
header.site{position:relative;z-index:10;color:#fff;background:#040F29}
.hm{padding-top:24px;border-bottom:6px solid #EB1923}
.hm-inner{display:flex;flex-direction:column;justify-content:center;border-bottom:6px solid #fff}
.hm-sec{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:0 24px}

/* row 1 — 44px control row, logo absolutely centred so the flanks stay balanced */
.hm-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;height:44px}

/* row 2 — nav links, centred.
   .hm-nav / .nav-item stay position:static ON PURPOSE so the dropdown's containing
   block is header.site and the panel can span the full 100% width. The caret and the
   coral stub live on .nav-link, which is the only positioned element in the chain. */
.hm-nav{display:flex;align-items:stretch;justify-content:center;height:44px}
.nav-item{display:flex;align-items:stretch;height:100%}

/* ============================================================================
   MEGA-MENU — measured on fraseryachts.com/en/yacht-charter/ 2026-08-20 by firing
   real pointerenter/mouseenter on the CHARTER item over CDP (synthetic mouseMoved
   does not open it — their Vue handler ignores it).

     panel      position:absolute · full width · background #FFF · z-index 205
                border-block 1px #D1D2D3 · min-height 270px (measured 320px)
                top:128px — and that is the POINT, not an accident. The panel is a
                descendant of the elements drawing the white and coral rules, so at
                128px it paints straight over both: while a menu is open there is no
                red line, exactly as on Fraser. Closed, the panel does not paint at
                all (visibility:hidden) and the rules return. No :has() needed.
     wrap       max-width 1224px · margin 16px auto · padding 0 52px
                display:flex · justify-content:space-between
     column     240px (lg) / 256px (xl), no gutter — they butt at exactly 256px
     col head   16px · w500 · uppercase · #040F29 · padding 8px 0 16px · min-height 48px
     item       14px · w400 · uppercase · #040F29 · height 32px · line-height 14px
                tracking normal (they explicitly reset it) · transition colors .2s ease-out
     hover      colour -> #B30000 (--color-coral-white)
     bullet     inline 3x3 SVG circle, r=1.5, fill #B30000, margin-right 8px
   ============================================================================ */
.dd{position:absolute;left:0;right:0;top:128px;z-index:205;
  background:#fff;border-bottom:1px solid #D1D2D3;
  /* Fraser's floor, restored 2026-08-20 when the brief became "copy their spacing":
     lg:min-h-[270px] / xl:min-h-72 (288px). Their measured panel runs 320px because
     the cards push past the floor. NOTE the consequence, which is Fraser's too: the
     three menus here that carry no cards now sit in a 270px box with white space
     under them. That is the faithful result, not a bug. */
  min-height:270px;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility 0s linear .18s}
.nav-item.has-dd:hover .dd,.nav-item.has-dd:focus-within .dd{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1)}

/* The white caret, centred on the open item: base flush on the panel's top edge
   (y128), apex 10px up at y118, solid #FFF against the navy. Nothing else — no
   outline, no border, no shadow. The panel now covers the two rules, so the caret
   never sits on the coral and never picks up a red edge. */
.nav-item.has-dd:hover .nav-link::before,.nav-item.has-dd:focus-within .nav-link::before{
  content:"";position:absolute;left:50%;top:34px;transform:translateX(-50%);z-index:206;
  border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff}

/* 27px top, not 16px. Measured at a 1900px viewport: Fraser's panel top is y128 and
   the first column heading's box top is y155 — a 27px gap. A plain my-4 (16px) put the
   whole menu 11px high. Bottom stays 16px. */
.dd-wrap{max-width:1224px;margin:27px auto 16px;padding:0 52px;display:flex;justify-content:space-between;gap:32px}
.dd-cols{display:flex;flex:1;margin-left:10px}
.dd-col{width:256px;display:flex;flex-direction:column}
.dd-head{min-height:48px;padding:8px 0 16px;font-family:var(--bar);font-size:16px;font-weight:500;
  line-height:24px;letter-spacing:normal;text-transform:uppercase;color:#040F29;text-decoration:none}
a.dd-head:hover{color:#B30000}
.dd-link{display:flex;align-items:center;height:32px;padding:0;font-family:var(--bar);font-size:14px;
  font-weight:400;line-height:14px;letter-spacing:normal;text-transform:uppercase;color:#040F29;
  text-decoration:none;transition:color .2s cubic-bezier(0,0,.2,1)}
a.dd-link:hover{color:#B30000}
.dd-dot{flex:none;width:3px;height:3px;margin-right:8px;fill:#B30000}
/* planned = scoped in the site plan, NOT built. Rendered as a non-clickable span so
   the menu never contains a link to a page that does not exist. */
.dd-link.is-planned{color:#6F7481;cursor:default}
.dd-link.is-planned .dd-dot{fill:#C0C3C9}
.dd-soon{margin-left:8px;font-family:var(--bar);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:#A9ADB4;font-style:normal;font-weight:400}

/* featured cards — Fraser shows two yachts with price; these show capacity instead.
   No new euro figure is introduced on a client-facing surface (STATE.md:69), and the
   hull art is the correct TYPE, not a photo of the named vessel (index.html:35). */
.dd-cards{display:flex;gap:30px;flex:none}
/* PRE-EXISTING BUG, found 2026-08-21 while sweeping the fleet grid and fixed here:
   three 276px cards plus two 30px gaps make this row 888px wide and flex:none stops
   it shrinking, so the whole panel measured a fixed 1188px. Between 1024px (where
   the mobile flyout hands over to this desktop menu) and 1187px that is wider than
   the window, and every one of the four pages carried a horizontal scrollbar
   through that band — the common 13-inch laptop widths. Below 1280 the cards now
   share the space instead of holding a fixed width. Fraser's measured 276px is
   untouched at 1280 and above. */
@media(max-width:1279px){
  /* flex:0 1 auto is the load-bearing line. The base rule's flex:none pins this row
     at its content width, so setting min-width alone shrank the CARDS and left the
     ROW overflowing its own .dd-wrap by 76px — the scrollbar barely moved, 1188 to
     1176. It has to be allowed to shrink as a flex item, not just internally. */
  .dd-cards{flex:0 1 auto;gap:18px;min-width:0}
  .dd-card{width:auto;flex:1 1 0;min-width:0}
  .dd-wrap{padding-left:32px;padding-right:32px}
}
/* Fraser's card measured 276 x 173 (image) at y155, gap 24. Matched. */
.dd-card{display:flex;flex-direction:column;width:276px;text-decoration:none;color:#040F29}
.dd-art{display:block;background:#ECEEF1;overflow:hidden;margin-bottom:12px}
.dd-art img{width:100%;height:173px;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.dd-card:hover .dd-art img{transform:scale(1.04)}
.dd-name{font-family:var(--bar);font-size:16px;font-weight:500;letter-spacing:normal;text-transform:uppercase;line-height:24px}
.dd-meta,.dd-cap{font-family:var(--bar);font-size:14px;font-weight:400;letter-spacing:1px;line-height:20px;color:#6F7481}
.dd-card:hover .dd-name{color:#B30000}

/* Below the lg breakpoint Fraser hides the mega-menu entirely and uses its drawer.
   Same here — the burger + .mobile-nav already cover it. */
@media(max-width:1023px){.dd{display:none}}
.nav-link{position:relative;display:block;height:100%;padding:0 12px;
  font-family:var(--bar);font-size:15px;font-weight:400;
  line-height:.9em;letter-spacing:.1em;text-transform:uppercase;color:#DADADA;
  text-decoration:none;white-space:nowrap;transition:color .2s cubic-bezier(0,0,.2,1)}
.nav-link::after{content:"";position:absolute;left:12px;top:22px;width:0;height:1px;
  background:#EB1923;transition:width .3s cubic-bezier(.4,0,.2,1)}
.nav-link:hover{color:#fff}
.nav-link:hover::after,.nav-link:focus-visible::after,.nav-link.is-current::after{width:22px}
.nav-link.is-current{color:#fff}

/* right slot — the Enquire control, Fraser's INQUIRE box to the pixel */
.hm-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:144px;
  padding:0 16px;border:1px solid #6F7481;border-radius:0;background:#040F29;color:#fff;
  font-family:var(--bar);font-size:15px;font-weight:400;line-height:15px;
  letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;
  transition:color .2s cubic-bezier(0,0,.2,1),background-color .2s cubic-bezier(0,0,.2,1),border-color .2s cubic-bezier(0,0,.2,1)}
.hm-cta:hover{background:#EB1923;border-color:#EB1923;color:#fff}

/* centre — Fraser's lockup is a single 190x27 SVG at gap:12px: small crest, then the
   wordmark as OUTLINED PATHS. There is no font in it to match, so the name here is set
   as real text in the site's Futura stack — selectable, searchable, and it scales.
   The badge is now mark-only (34px): the "STARHUB"/"malta"/coordinate/"YOUR NEXT
   DIRECTION" text baked inside the circle was stripped, because at this size it read
   as mush. It sits inside the 44px control row now instead of overflowing it. */
.logo{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;
  justify-content:center;gap:12px;text-decoration:none;color:#fff;z-index:2;white-space:nowrap}
/* The crest is portrait (1024 x 1329, aspect .7705) and is line art with hairline
   strokes, so it is driven by HEIGHT and given every pixel the Fraser-matched bar
   allows: the desktop logo row measures 44px, the mobile bar 68px. Below about
   40px this artwork stops resolving — it is drawn for large format, and the
   footer is where it is shown at its real size. */
.logo img.badge{height:44px;width:auto;flex:none;display:block;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .25s ease}
.logo:hover img.badge{transform:scale(1.06)}
/* WORDMARK TYPE — the brand already decided this, so I did not.
   The badge SVG carried its own text before it was stripped, and it specified:
       font-family="Jost,'Century Gothic',sans-serif"
       STARHUB  size 30 · weight 500 · letter-spacing 2.6  ->  0.087em, UPPERCASE
       malta    size 10.5 ·            letter-spacing 3.4  ->  0.324em, lowercase
       stacked, malta beneath, 0.35x the size
   Jost is therefore the client's own face, not a choice of mine — and it is the same
   geometric the rest of the site runs on, which is exactly how Fraser works too (their
   Didone lives ONLY in the logo artwork; their nav, headings and body are all Futura).
   A serif here would borrow superyacht-brokerage signalling for an operator selling
   day trips, which is overselling by typography. Rejected on that basis, not taste.

   What was wrong was my SETTING, not the face: I had shipped both words in caps, side
   by side, at .2em — 2.3x the brand's tracking on STARHUB and the wrong case on malta.
   Restored below: caps over lowercase, stacked, with malta tracked to justify to the
   width of STARHUB so the lockup squares off. */
.wordmark{display:flex;flex-direction:column;justify-content:center;font-family:var(--bar);line-height:1}
/* Fraser's wordmark measures 283.46 units of ink over a 40.63-unit cap height —
   a width/cap ratio of 6.9766. In Libre Baskerville that rhythm is reproduced by
   letter-spacing .1966em (binary-searched to a ratio of 6.9767). */
.wordmark b{font-family:var(--serif);font-size:14px;font-weight:400;letter-spacing:.1966em;text-transform:uppercase}
.wordmark i{font-family:var(--serif);font-size:8px;font-weight:400;font-style:normal;text-transform:lowercase;
  color:rgba(255,255,255,.78);margin-top:5px;
  /* the tracking adds a trailing gap after the final a, which widened the lockup
     and pushed this line right of STARHUB; the negative right margin cancels it */
  letter-spacing:2.279em;margin-right:-2.279em;  /* justifies "malta" to the STARHUB width: both measure 96.02px */
  text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:1180px){.nav-link{padding:0 9px;font-size:14px}
  .nav-link::after{left:9px}}
@media(max-width:900px){
  .hm{padding-top:0;border-bottom-width:4px}
  .hm-inner{border-bottom-width:4px}
  /* 68 + 4 white rule + 4 red rule = 76px, Fraser's measured mobile bar height */
  .hm-sec{gap:0;padding:0 20px;height:68px;justify-content:center}
  .hm-top{height:68px}
  .hm-nav{display:none}
  .hm-cta{display:none}
  .logo img.badge{height:40px}
  /* the wordmark is one size everywhere now — the mobile 14px/.16em override
     was overwriting both the Fraser tracking and the malta justification */
}

/* ---- skip link (audit fix 2026-08-14): hidden until keyboard focus ---- */
.skip{position:absolute;left:12px;top:-56px;z-index:120;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;padding:10px 18px;
  border-radius:0 0 8px 8px;text-decoration:none;transition:top .18s ease}
.skip:focus{top:0}

/* ---- mobile hamburger + overlay nav (audit fix 2026-08-14) ---- */
/* burger + mobile-nav rules replaced 2026-08-20 — see the MOBILE MENU block at the end */
.mobile-nav .mn-sep{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin:14px 0 2px}
.mobile-nav .close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:22px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.mobile-nav,.burger span{transition:none}}

/* kicker rendered as a real h2 (audit fix): identical look, correct document outline */
h2.kicker{font-size:12px;font-weight:400;line-height:1.5;letter-spacing:.18em}

section{padding:72px 0}
section.tight{padding:48px 0}
.center-kicker{text-align:center;letter-spacing:.3em}
/* was clamp(30px,4.6vw,46px) — 46px overshot Fraser's 40px h2 ceiling, so the size
   override is dropped and the global Fraser h2 scale applies. Centring only. */
.center-title{text-align:center;margin:0 0 44px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 32px}
.sec-head h2{margin:0}
.sec-head .kicker{margin:0 0 8px}
.morelink{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent;transition:border-color .18s ease}
.morelink:hover{border-color:var(--brand)}

/* ---- hero: looping video bed, centered display title, two pill buttons (home only) ---- */
/* ============================================================================
   HONESTY CHROME — restored 2026-08-21 at the deploy gate
   Both of these were removed on 2026-08-13 for aesthetics. That was defensible
   while the build only ever opened from file://. It stops being defensible the
   moment the page has a URL, because both are obligations rather than styling:
   the banner by DEC-080 §2, the chip by EU AI Act Art. 50(4).
   ========================================================================== */
.spec-banner{background:var(--ink);color:#fff;font-family:var(--bar);font-size:12px;
  font-weight:400;letter-spacing:.055em;line-height:1.55;padding:10px 18px;text-align:center}
.spec-banner b{color:var(--veil);letter-spacing:.09em;text-transform:uppercase}
@media(max-width:700px){ .spec-banner{font-size:11px;padding:9px 14px;letter-spacing:.04em} }

/* Sits on the hero, never inside <video> — see the markup comment.
   BOTTOM-LEFT, not bottom-right: the floating stack (WhatsApp + the assistant
   launcher) owns the bottom-right corner at z-120/130, and the first render of this
   chip put a legally-required disclosure underneath the "Chat with Assistant" pill,
   where roughly half of it was unreadable. max-width keeps it off them entirely. */
.ai-chip{position:absolute;left:18px;bottom:18px;max-width:min(62%,620px);z-index:2;margin:0;padding:6px 10px;
  background:rgba(4,15,41,.58);font-family:var(--bar);font-size:10px;font-weight:400;
  letter-spacing:.08em;line-height:1.1;text-transform:uppercase;color:rgba(255,255,255,.92)}
@media(max-width:700px){ .ai-chip{left:14px;right:14px;max-width:none;bottom:12px;text-align:center;font-size:9px;letter-spacing:.05em} }

.hero{position:relative;padding:0;overflow:hidden;color:#fff;min-height:min(calc(94vh - 140px),760px);display:flex;flex-direction:column}
.hero .scene{position:absolute;inset:0;z-index:0;background:#1F5A66}
.hero .scene video,.hero .scene img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .scene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,30,44,.62) 0%,rgba(12,30,44,.28) 26%,rgba(12,30,44,.2) 55%,rgba(12,30,44,.46) 100%)}
/* Reduced motion: the poster image replaces the loop entirely (JS also pauses it). */
@media (prefers-reduced-motion:reduce){.hero .scene video{display:none}}

/* padding-top was 140px to clear the old OVERLAY header; the Fraser bar is a solid
   band that now takes its own 140px above the hero, so the hero reclaims that space. */
.hero > .wrap{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  text-align:left;padding-top:64px;padding-bottom:88px}
.hero .tag{font-family:var(--display);font-weight:400;font-size:clamp(15px,2vw,22px);letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 18px;color:#fff;text-shadow:0 1px 14px rgba(20,38,54,.4)}
/* ⚠️ THIS REVERSES A LOGGED FOUNDER CALL. The previous rule was
   `font-size:clamp(46px,9.4vw,116px); font-weight:700; letter-spacing:.008em; line-height:.97`
   under the note "founder call 2026-08-13 — the H1 goes bold, heavier and larger."
   Fraser's h1 is w500 at 60px with .1em tracking and 1.25 leading, and NOTHING on their
   site is bolder than 500. "Use the exact same font and size" cannot be satisfied while
   keeping w700/116px, so Fraser's values win here. Say the word and the bold call is
   restored — it is one line, and the old values are recorded above. */
.hero h1{color:#fff;text-shadow:0 3px 28px rgba(20,38,54,.45)}
.hero h1 .to{display:block;font-size:clamp(15px,2.2vw,27px);font-weight:400;letter-spacing:.3em;margin-top:22px;
  text-shadow:0 2px 18px rgba(20,38,54,.4)}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;justify-content:flex-start}
/* hero pair only, made much smaller and thinner on request 2026-08-20.
   was: padding 14px 26px · 14px · w500 · 1.5px border   (the global .btn)
   now: padding 8px 18px  · 11.5px · w400 · 1px border
   The .pagehead pair (SEE THE TRIPS / THE EIGHT BOATS) is untouched and still
   uses the global .btn size. */
.hero .cta-row .btn{padding:8px 18px;font-size:11.5px;font-weight:400;border-width:1px;letter-spacing:.1em}

/* hero pill buttons — Split idiom: cream primary (dark text), deep-navy secondary */
.btn-cream{font-family:var(--sans);font-weight:600;letter-spacing:.05em;background:#F6EBDF;border-color:#F6EBDF;color:#1B2A3C}
.btn-cream:hover{background:#FFFFFF;border-color:#FFFFFF;color:#1B2A3C}
.btn-navy{font-family:var(--sans);font-weight:600;letter-spacing:.05em;background:#22303F;border-color:#22303F;color:#fff}
.btn-navy:hover{background:#16202C;border-color:#16202C}

/* ---- page head: the sub-page equivalent of the hero. No video — a sub-page that
       re-downloads a 1 MB loop to say "Charter" is a page that loses the visitor.
       The navy is HARD-CODED, not var(--ink): in dark mode --ink flips to the light
       sand and this band would have gone white behind white nav links and white
       display type. The hero is always dark in both themes; so is this. ---- */
/* 158px top pad was clearance for the old overlay header — the solid bar owns that space now. */
.pagehead{position:relative;background:#16232F;color:#fff;padding:72px 0 66px;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 8%,rgba(86,134,129,.34) 0%,rgba(27,42,60,0) 62%)}
.pagehead::after{content:"";position:absolute;right:-96px;bottom:-96px;width:330px;height:330px;border-radius:50%;
  border:1.5px solid rgba(255,188,125,.26)}
.pagehead > .wrap{position:relative;z-index:1}
/* size/weight/tracking now inherit the global Fraser h1 rule — only colour is local */
.pagehead h1{color:#fff}
.pagehead .crumb{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--veil);margin:0 0 18px}
.pagehead .crumb a{color:inherit;text-decoration:none}
.pagehead .crumb a:hover{text-decoration:underline}
.pagehead .lead{max-width:62ch;margin:18px 0 0;color:rgba(243,227,217,.82);font-size:16.5px}
.pagehead .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---- language switcher — now occupies Fraser's LEFT slot, wearing their search-pill
   chrome exactly: h44, 1px #6F7481, min-width 8.438rem (135px), 14px left pad, square
   corners, 15px/.1em uppercase white, border -> #DADADA on hover. It is a switcher and
   not a search box on purpose: Starhub has no search, and a dead one would be an
   invented capability. Opens on :focus-within too — a hover-only menu is unreachable
   by keyboard and touch. SVG flags, not emoji: Windows renders flag emoji as letters. */
.lang{position:relative;z-index:12;font-family:var(--bar);font-size:15px;flex:none}
.lang .panel{position:relative;height:44px;min-width:135px;display:flex;align-items:center;
  border:1px solid #6F7481;border-radius:0;background:transparent;
  transition:border-color .15s cubic-bezier(.4,0,.2,1)}
.lang:hover .panel,.lang:focus-within .panel{border-color:#DADADA}
.lang > .panel > a[aria-current]{height:100%;padding:0 14px;gap:10px;color:#fff;
  letter-spacing:.1em;text-transform:uppercase}
.lang a{display:flex;align-items:center;gap:10px;padding:11px 14px;color:#fff;text-decoration:none;
  white-space:nowrap;transition:background .16s ease,color .16s ease}
.lang a:hover{background:rgba(255,255,255,.08)}
.lang svg.fl{width:22px;height:15px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.lang .opts{position:absolute;top:calc(100% + 1px);left:-1px;right:-1px;z-index:20;
  background:#040F29;border:1px solid #6F7481;border-top:0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .22s ease}
.lang:hover .opts,.lang:focus-within .opts{max-height:280px;opacity:1}
.lang .soon{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:#C0C3C9}
.lang .cap{display:block;padding:9px 14px 11px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:#C0C3C9;border-top:1px solid rgba(255,255,255,.18);line-height:1.45;text-transform:none}
@media (prefers-reduced-motion:reduce){.lang .opts{transition:none}}
@media(max-width:900px){.lang .panel{min-width:0}.lang .panel > a[aria-current] span:not(.soon){display:none}
  .lang > .panel > a[aria-current]{padding:0 12px}}

/* floating stack: social buttons above the WhatsApp bubble — all inert in the demo.
   No live Starhub social profiles were found on starhubmalta.com (audit 2026-08-13),
   so these are structural placeholders until real profile URLs exist. */
/* z-index 120: this sat at z-40 and was overrun by the old page-transition
   overlay at z-99. That layer is gone, but 120 stays -- it also clears the
   mobile flyout, and dropping it would only re-open an old bug. */
.float-stack{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;flex-direction:column;align-items:center;gap:12px}
.soc-mini{width:44px;height:44px;border-radius:50%;background:var(--card);color:var(--ink);
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .18s ease}
.soc-mini:hover{transform:scale(1.08)}
.soc-mini svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wa-float{width:58px;height:58px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .18s ease;cursor:pointer}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:32px;height:32px;fill:#fff}

/* ---- THE FOUR DOORS — the whole architectural point of the homepage.
       Verb-first, one click per intention (the pattern Camper & Nicholsons, Fraser
       and Northrop & Johnson all share; see site-architecture-plan-2026-08-14.md §1). ---- */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.doors{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.doors{grid-template-columns:1fr}}
.door{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px 22px;display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.door:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand)}
.door .di{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--sea);color:var(--sea);
  display:grid;place-items:center;margin-bottom:4px}
.door .di svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.door .dv{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.13em;text-transform:uppercase}
.door .dd{font-size:14px;color:var(--muted);margin:0}
.door .dgo{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand)}
.door:hover .dgo{text-decoration:underline}

/* ---- mood-chip tour cards (Split mechanic: one-word chip over descriptive title)
       + the hover expansion (founder request 2026-08-14): the artwork grows and a
       detail panel drops below the card.

       The panel is ABSOLUTELY positioned. That is the whole trick — hovering never
       moves a sibling card and never reflows the page; the row simply reserves the
       room underneath for the panel to fall into. Growing the card in normal flow
       would push everything below it down on every mouse-over.

       Three states, not one:
         · fine pointer  — closed by default, opens on :hover
         · keyboard      — opens on :focus-within (the card is a link; tabbing to it
                           must reveal the same content a mouse gets)
         · coarse pointer— always open, in normal flow. A hover-only disclosure is
                           unreachable with a finger, so touch never gets the closed
                           state at all. Gate on pointer, not width (a small laptop
                           has a mouse; a large tablet does not).
       Under prefers-reduced-motion the global rule kills the transitions and the
       panel simply appears — state change without motion, which is correct. ---- */
.tours{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
@media(max-width:980px){.tours{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tours{grid-template-columns:1fr}}
.tour{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease,border-radius .3s ease}
.tour:hover,.tour:focus-within{transform:translateY(-4px);box-shadow:var(--shadow);z-index:6;
  border-bottom-left-radius:0;border-bottom-right-radius:0}
.tour .art{height:196px;flex:none;position:relative;overflow:hidden;background:var(--wash);
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  transition:height .42s cubic-bezier(.22,.68,.35,1)}
.tour:hover .art,.tour:focus-within .art{height:268px}
.tour .art .scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
/* corner scrim so the script chip stays legible whatever the artwork does behind it */
.tour .art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(148deg,rgba(12,30,44,.44) 0%,rgba(12,30,44,.14) 30%,rgba(12,30,44,0) 56%)}
.tour:hover .art .scene,.tour:focus-within .art .scene{transform:scale(1.05)}
.tour .chip{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--script);font-size:26px;line-height:1;color:#fff;
  text-shadow:0 1px 8px rgba(27,42,60,.5)}
.tour .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.tour .body h3{font-size:16px}
.tour .body p{margin:0;font-size:14px;color:var(--muted)}
.tour .meta{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.04em;color:var(--muted);margin-top:auto}
.tour .meta .price{color:var(--brand);font-weight:500}

/* the drop-down detail panel */
.tour .more{position:absolute;left:-1px;right:-1px;top:calc(100% - 1px);
  background:var(--card);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);
  max-height:0;opacity:0;overflow:hidden;padding:0 18px;
  transition:max-height .42s cubic-bezier(.22,.68,.35,1),opacity .26s ease,padding .42s ease}
.tour:hover .more,.tour:focus-within .more{max-height:190px;opacity:1;padding:0 18px 18px}
.tour .more .spec{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px}
.tour .more .spec li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.38}
.tour .more .spec svg{width:14px;height:14px;flex:none;margin-top:2px;stroke:var(--sea);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Room for the panel to drop into — reserved only where a hover state exists.
   Must exceed the panel's real height (~126px with four single-line rows), or an
   open panel covers the pricing disclosure underneath it. Keep spec rows short
   enough not to wrap, or re-measure this. */
@media (hover:hover) and (pointer:fine){ .tours{margin-bottom:136px} }
/* coarse pointer: always open, in flow, no panel chrome */
@media (hover:none),(pointer:coarse){
  .tour .more,.tour:hover .more,.tour:focus-within .more{position:static;max-height:none;opacity:1;
    padding:0 18px 18px;box-shadow:none;border:0;border-radius:0}
}

/* ---- inclusions strip: the spine (4 tiles on the warm cream band) ---- */
.band-cream{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{text-align:center;padding:10px 8px}
.tile .ic{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:var(--card);
  border:1.5px solid var(--sea);color:var(--sea);display:grid;place-items:center}
.tile .ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6}
.tile h3{font-size:15px;letter-spacing:.12em}
.tile p{margin:8px 0 0;font-size:14px;color:var(--muted)}

/* ---- script flourish thesis ---- */
.thesis{text-align:center;padding:64px 24px}
.thesis .script{font-family:var(--script);font-size:clamp(38px,7vw,72px);line-height:1.1;color:var(--sea);margin:0}
.thesis p{max-width:58ch;margin:18px auto 0;color:var(--muted)}

/* ---- fleet: spec cards with a TYPE illustration band, real rates ----
   The band shows the correct hull type — catamaran or monohull — and nothing more.
   Why not a photograph: verified against the live site 2026-08-14, starhubmalta.com
   carries NO image of any of these eight boats. Its own charter fleet is six
   DIFFERENT vessels, and the words "Lagoon" and "Bavaria" appear on it zero times,
   so a photograph pulled from there would necessarily be a photograph of a different
   boat sitting under a real boat's name. See STATE.md 2026-08-14.
   The <img> slot is exactly where the operator's own photography drops in. ---- */
.fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.fleet{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fleet{grid-template-columns:1fr}}
.boat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease}
.boat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.boat .art{height:172px;flex:none;position:relative;overflow:hidden;
  background:linear-gradient(168deg,var(--w1,#54B7B0),var(--w2,#1E6B78))}
/* was a floating hull drawing sized by height so the mast survived the 2-column
   breakpoint; a photograph covers the frame instead and the gradient behind it
   only shows while the file loads. */
.boat .art .hull{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.boat:hover .art .hull{transform:scale(1.05)}
.boat.w2{--w1:#46A6AC;--w2:#1B5C72}
.boat.w3{--w1:#5CACC2;--w2:#1F5170}
.boat.w4{--w1:#3F97A9;--w2:#174A60}
.boat .txt{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1}
.boat .bname{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.14em;text-transform:uppercase}
.boat .bmodel{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--muted)}
.boat .bcap{font-size:13.5px;color:var(--muted)}
.boat .brate{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--brand);font-weight:500}
.fleet-note{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--muted);margin-top:18px}

/* ---- brokerage (second business line, discovered on the live site 2026-08-13) ---- */
.brok{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.brok{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.brok{grid-template-columns:1fr}}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;
  display:flex;flex-direction:column;gap:5px;transition:transform .22s ease,box-shadow .22s ease}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.bcard .bt{font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.1em;text-transform:uppercase}
.bcard .bp{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--brand);font-weight:500;margin-top:6px}
.bcard .bs{font-size:13.5px;color:var(--muted)}
/* .group — the same card used for a service grouping rather than a boat listing */
.bcard.group{gap:9px}
.bcard.group p{margin:6px 0 0;font-size:14px;color:var(--muted)}
.bcard.group .ph-chip{margin-top:10px}

/* ---- services (trust: full-service marine portfolio, from starhubmalta.com) ---- */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:980px){.svc{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.svc{grid-template-columns:1fr}}
.svc .s{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:13.5px;letter-spacing:.08em;text-transform:uppercase}
.svc .s svg{width:16px;height:16px;flex:none;stroke:var(--sea);fill:none;stroke-width:1.8;stroke-linecap:round}

/* ---- flywheel (growth plan Aug 2026: charter → buy → own → sell, one roof) ---- */
.fly{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.fly{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fly{grid-template-columns:1fr}}
.fly .f{position:relative;background:var(--ink);color:var(--paper);border-radius:var(--radius);
  padding:20px 18px;display:flex;flex-direction:column;gap:7px}
.fly .fn{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--veil)}
.fly .ft{font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.1em;text-transform:uppercase}
.fly .fd{font-size:13.5px;color:color-mix(in srgb,var(--paper) 78%,transparent)}
.fly .f::after{content:"\2192";position:absolute;right:-15px;top:50%;transform:translateY(-50%);
  color:var(--sea);font-size:19px;z-index:2}
.fly .f:last-child::after{content:"\21ba"}
@media(max-width:900px){.fly .f::after{display:none}}
.fly-close{text-align:center;max-width:62ch;margin:26px auto 0;color:var(--muted);font-size:15px}

/* ---- authority strip ---- */
.auth{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(max-width:820px){.auth{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.auth{grid-template-columns:1fr}}
.auth .cell{background:var(--card);padding:22px 20px}
.auth .k{font-family:var(--display);font-weight:300;font-size:30px;color:var(--sea)}
.auth .v{font-size:13.5px;color:var(--muted);margin-top:2px}

/* ---- escape hatch ---- */
.hatch{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.hatch h3{font-size:17px}
.hatch p{margin:6px 0 0;color:var(--muted);font-size:14.5px}

/* ---- notes (sample-marked rows) ---- */
.notes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.notes{grid-template-columns:1fr}}
.note{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px}
.ph-chip{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);background:var(--wash);border-radius:4px;padding:4px 8px}
.note p{margin:0;color:var(--muted);font-size:14.5px}
.note .btn{align-self:flex-start}

/* ---- FAQ ---- */
.faqs{max-width:760px}
details.faq{border-bottom:1px solid var(--line);padding:4px 0}
details.faq summary{cursor:pointer;font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.07em;font-size:15px;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::after{content:"+";font-family:var(--mono);color:var(--sea);font-size:18px}
details[open].faq summary::after{content:"\2013"}
details.faq p{margin:0 0 16px;color:var(--muted);font-size:15px;max-width:64ch}

/* ---- credentials placeholders ---- */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:820px){.creds{grid-template-columns:1fr 1fr}}
.cred{border:1.5px dashed var(--line);border-radius:var(--radius);padding:18px;text-align:center}
.cred .cl{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cred .cm{font-family:var(--mono);font-size:12px;color:var(--brand);margin-top:10px}

/* ---- reviews placeholder ---- */
.rev-ph{border:1.5px dashed var(--line);border-radius:var(--radius);padding:28px;text-align:center;color:var(--muted);font-size:14.5px;max-width:680px;margin:0 auto}

/* ---- quote form (inert) ---- */
.quote{background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:clamp(28px,4vw,52px);position:relative;overflow:hidden}
:root[data-theme="dark"] .quote, .quote{border:1px solid var(--line)}
.quote::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;
  border:1.5px solid rgba(255,188,125,.35)}
.quote h2{color:inherit;max-width:22ch}
.quote p{color:color-mix(in srgb,var(--paper) 75%,transparent);max-width:52ch;margin:14px 0 26px}
.quote form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px}
.quote label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) 70%,transparent)}
.quote label.full{grid-column:1/-1}
.quote input,.quote textarea{font:inherit;font-size:15px;padding:12px 14px;border-radius:6px;border:1px solid color-mix(in srgb,var(--paper) 30%,transparent);
  background:color-mix(in srgb,var(--paper) 8%,transparent);color:inherit}
.quote textarea{min-height:96px;resize:vertical}
.quote .submit-row{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.quote .btn{background:var(--veil);border-color:var(--veil);color:#1B2A3C}
.quote .demolabel{font-family:var(--mono);font-size:11.5px;color:color-mix(in srgb,var(--paper) 62%,transparent)}
.quote .direct{position:relative;z-index:1;display:flex;gap:26px;flex-wrap:wrap;margin:0 0 28px;
  font-family:var(--mono);font-size:13.5px;letter-spacing:.04em}
/* inherit, don't tint: .quote flips with the theme (navy panel in light mode, sand
   panel in dark), so an apricot literal here fails contrast in one of the two. */
.quote .direct span{color:inherit;font-weight:600}
.quote .direct em{display:block;font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 55%,transparent)}
@media(max-width:600px){.quote form{grid-template-columns:1fr}}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:44px 0 60px;color:var(--muted);font-size:14px}
.foot-grid{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.foot-grid .col b{color:var(--ink);font-family:var(--display);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:14px}
.foot-grid .col a{color:inherit;text-decoration:none}
.foot-grid .col a:hover{color:var(--brand)}
.foot-grid .fill{color:var(--brand);font-family:var(--mono);font-size:12.5px}
.foot-note{font-size:12px;margin-top:6px}
.disclosure{margin-top:34px;border-left:2px solid var(--brand);padding:8px 0 8px 16px;max-width:80ch;font-size:13.5px;line-height:1.6}
.disclosure b{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ============================================================================
   SPLIT PANELS — the Fraser "Professional crew / Special occasions / Corporate
   events" component. Every value measured over CDP on 2026-08-20 from
   fraseryachts.com/en/yacht-charter/, including the rules on their own
   .splitSegment class:

     .splitSegment            { width: var(--segment-width) }
     .splitSegment--idle      { background-color: rgba(0,0,0,.45) }
     .splitSegment--active    { background-color: rgba(0,0,0,0) }
     .splitSegment+.splitSegment { border-left: 1px solid #fff }
     .splitSegment--animated  { transition: background-color .7s cubic-bezier(.4,0,.2,1) }
     .splitSegment--static:not(--active) .splitSegment__cta { display: none }
     container: aspect-2/1 · overflow-hidden · bg-black/20 · flex · hidden below lg

   TWO DEVIATIONS, both deliberate:
   1. Fraser drives the width from JS via --segment-width. This is flex-grow, so it
      also responds to :focus-within — their version is hover-only and unreachable
      by keyboard. Same motion, one more way in.
   2. The reveal-on-scroll respects prefers-reduced-motion via the existing .reveal
      hook; the panel transitions are additionally disabled under that query below.
   ============================================================================ */
.split{display:none}
@media(min-width:1024px){
  .split{display:flex;position:relative;aspect-ratio:2/1;overflow:hidden;
    background:rgba(0,0,0,.2);
    /* full-bleed out of .wrap — Fraser's is w-full edge to edge */
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:8px}
  .seg{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    height:100%;overflow:hidden;text-decoration:none;color:#fff;
    flex:1 1 0;min-width:0;
    transition:flex-grow .7s cubic-bezier(.4,0,.2,1)}
  .seg + .seg{border-left:1px solid #fff}
  /* active ~65% / idle ~17.5% each — the ratio measured off the reference frames */
  .split:hover .seg:hover,.split:focus-within .seg:focus-within{flex-grow:3.7}
  /* the artwork crops rather than squashes as the panel narrows */
  .seg-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .7s cubic-bezier(.4,0,.2,1)}
  .seg:hover .seg-art,.seg:focus-within .seg-art{transform:scale(1.03)}
  /* the scrim: .45 black at rest, clearing to 0 on the open panel */
  .seg-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);
    transition:background-color .7s cubic-bezier(.4,0,.2,1)}
  .seg:hover .seg-scrim,.seg:focus-within .seg-scrim{background:rgba(0,0,0,0)}
  /* LEGIBILITY ADDITION, not in Fraser. Their active panel clears to rgba(0,0,0,0)
     because their images are dark photographs. Starhub's artwork is bright turquoise
     and amber, so white text on the cleared panel drops below readable contrast.
     A permanent bottom-up gradient holds the type legible without re-darkening the
     whole panel — the scrim behaviour above is still theirs, exactly. */
  .split::after{content:none}
  .seg-grad{position:absolute;left:0;right:0;bottom:0;height:58%;pointer-events:none;z-index:1;
    background:linear-gradient(to top,rgba(6,18,34,.82) 0%,rgba(6,18,34,.45) 38%,rgba(6,18,34,0) 100%)}
  .seg-body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
    width:100%;padding:0 18px 40px}
  .seg-title{font-family:var(--bar);font-size:28px;font-weight:500;letter-spacing:2.8px;
    line-height:28px;text-transform:uppercase;color:#fff;text-align:center;text-wrap:balance;
    padding:0 0 24px;transition:padding .7s cubic-bezier(.4,0,.2,1)}
  /* Fraser: the CTA does not exist until the panel is open. Height/opacity rather
     than display:none so it can transition instead of popping. */
  .seg-cta{display:inline-flex;align-items:center;justify-content:center;
    height:0;min-width:254px;padding:0 16px;overflow:hidden;
    border:1px solid #D1D2D3;border-width:0;border-radius:0;background:rgba(0,0,0,.15);
    font-family:var(--bar);font-size:15px;font-weight:400;letter-spacing:1.5px;
    text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;
    transition:height .5s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(0,0,.2,1),
      background-color .2s cubic-bezier(0,0,.2,1),border-color .2s cubic-bezier(0,0,.2,1)}
  .seg:hover .seg-cta,.seg:focus-within .seg-cta{height:44px;border-width:1px;opacity:1}
  .seg:hover .seg-cta:hover{background:rgba(255,255,255,.16);border-color:#fff}
  /* the idle panels keep their titles but lose the CTA gap, exactly as Fraser does */
  .seg:not(:hover):not(:focus-within) .seg-title{padding-bottom:0}
  /* the fixed social/WhatsApp stack (right:22px, ~58px wide) overlaps the last panel's
     title; reserve the gutter rather than move a global UI element */
  .seg:last-child .seg-body{padding-right:74px}
  .seg:last-child:hover .seg-body,.seg:last-child:focus-within .seg-body{padding-right:18px}
  /* the card grid is the sub-1024 view, same split Fraser makes */
  .doors{display:none}
}
@media (prefers-reduced-motion:reduce){
  .seg,.seg-art,.seg-scrim,.seg-title,.seg-cta{transition:none}
}
/* ============================================================================
   SITE FOOTER — a component-for-component copy of the Fraser Yachts footer,
   measured over CDP at a 1600px viewport on 2026-08-20. Their values verbatim:

     container   bg #040F29 (their .bg-blue) - color #F2F2F4 -
                 max-width 1600px - padding 0 80px - Futura 16/400/ls1.37/lh24
     labels      15px w400 ls1.5px lh22.5 uppercase #F2F2F4, margin-bottom 16px
     office box  368x44 - bg #fff - border 1px #E8E8E8 - radius 0 -
                 text 14px ls1.5px #35495E - pad-left 16px -
                 chevron svg 8x5 at 24px from the right edge, fill #35495E
     phone row   width 368 - justify-between - 16px under the box
       phone     20px w500 ls1px lh25 - #EB1923
       time      16px w400 ls normal lh25 - #9B9B9B
     ghost btn   208x44 - border 1px #D1D2D3 - radius 0 - transparent -
                 15px ls1.5 lh15 uppercase #fff - centred -
                 transition color/background/border .2s cubic-bezier(0,0,.2,1)
     col heads   same 15px label, then <hr> w20px border-top 1px #EB1923,
                 margin 10px 0 16px  (their class: border-coral mb-4 mt-2.5 w-5)
     col links   16px w400 ls normal lh16 - #D1D2D3 - margin-bottom 12px
                 (28px stride) - hover #fff - columns 182px apart
     right blk   mark 56x91 - head - tagline 14px w300 ls1.37 lh21 #DADADA mb 8px -
                 coral link 15px ls1.5 uppercase #EB1923 + 6x8 chevron
     follow      label 14px ls1.4 lh21 - icons 24x21 on a 40px stride (16px gap) -
                 whole row right-aligned, 28px between label and first icon
     legal       border-top 1px rgba(155,155,155,.4) - links 14px ls0.7 lh20
                 uppercase #D1D2D3 hover #fff, 28px apart -
                 copyright 14px ls1.4 uppercase #E5E6E7 opacity .95, right-aligned
     rhythm      56 top - row1 - 84 gap - row2 - 76 gap - follow - 20 - rule - 34
   ========================================================================== */
footer.sfoot{border-top:0;padding:0;color:#F2F2F4;font-size:16px;
  background:#040F29;font-family:var(--bar);letter-spacing:1.37px;line-height:24px}
.sfoot-in{max-width:1600px;margin:0 auto;padding:56px 80px 40px}
.sf-lab{font-size:15px;font-weight:400;letter-spacing:1.5px;line-height:22.5px;
  text-transform:uppercase;color:#F2F2F4;margin:0 0 16px}
.sf-row{display:grid;grid-template-columns:60% 40%;align-items:start}
.sf-r1{margin-bottom:39px}

/* -- berth selector ------------------------------------------------------- */
.sf-sel{position:relative;width:368px;max-width:100%}
.sf-sel select{appearance:none;-webkit-appearance:none;display:block;width:100%;height:44px;
  padding:0 48px 0 16px;background:#fff;border:1px solid #E8E8E8;border-radius:0;
  font-family:inherit;font-size:14px;font-weight:400;letter-spacing:1.5px;color:#35495E;
  cursor:pointer;transition:border-color .15s ease-in}
.sf-sel select:hover{border-color:#B9BBBE}
.sf-sel select:focus-visible{outline:2px solid #EB1923;outline-offset:2px}
.sf-chev{position:absolute;right:24px;top:50%;margin-top:-2px;width:8px;height:5px;pointer-events:none}
.sf-meta{display:flex;justify-content:space-between;align-items:baseline;
  width:368px;max-width:100%;margin-top:16px}
.sf-tel{font-size:20px;font-weight:500;letter-spacing:1px;line-height:25px;
  color:#EB1923;text-decoration:none;transition:opacity .2s}
.sf-tel:hover{opacity:.78}
.sf-time{font-size:16px;font-weight:400;letter-spacing:normal;line-height:25px;color:#9B9B9B}
.sf-berth{margin:10px 0 0;width:368px;max-width:100%;font-size:13px;letter-spacing:normal;
  line-height:19px;color:#9B9B9B}

/* -- ghost button --------------------------------------------------------- */
.sf-btn{display:flex;align-items:center;justify-content:center;width:208px;height:44px;
  border:1px solid #D1D2D3;border-radius:0;background:transparent;
  font-size:15px;font-weight:400;letter-spacing:1.5px;line-height:15px;
  text-transform:uppercase;color:#fff;text-decoration:none;
  transition:color .2s cubic-bezier(0,0,.2,1),background-color .2s cubic-bezier(0,0,.2,1),border-color .2s cubic-bezier(0,0,.2,1)}
.sf-btn:hover,.sf-btn:focus-visible{background:#fff;border-color:#fff;color:#040F29}

/* -- mark + link columns -------------------------------------------------- */
/* the crest at the size it was drawn for */
.sf-mark{display:block;width:auto;height:132px;margin:0 0 30px}
.sf-cols{display:flex;gap:0}
.sf-col{width:182px;flex:none}
.sf-col .sf-lab{margin:0}
.sf-col hr{width:20px;height:0;border:0;border-top:1px solid #EB1923;margin:10px 0 16px}
.sf-col a,.sf-col .sf-plan{display:flex;align-items:center;width:max-content;
  margin:0 0 12px;font-size:16px;font-weight:400;letter-spacing:normal;line-height:16px;
  color:#D1D2D3;text-decoration:none;transition:color .2s cubic-bezier(0,0,.2,1)}
.sf-col a:hover,.sf-col a:focus-visible{color:#fff}
.sf-plan{color:#6F7481;cursor:default}

/* -- right-hand block ----------------------------------------------------- */
.sf-fmark{width:130px;margin-bottom:12px;color:#fff;text-align:center}
/* the stroked sailboat glyph was replaced by the founder’s gold yacht mark on
   2026-08-21. It is raster with its own gradient, so it is NOT recoloured by
   currentColor the way the old line glyph was — gold on the navy footer is the
   point. Sized by width; 110px is where the hull detail starts resolving. */
.sf-fmark img{display:block;width:110px;height:auto;margin:0 auto}
.sf-fmark b{display:block;margin-top:8px;white-space:nowrap;font-size:11px;font-weight:500;
  letter-spacing:.12em;line-height:14px;text-transform:uppercase;color:#fff}
.sf-ftag{margin:0 0 8px;font-size:14px;font-weight:300;letter-spacing:1.37px;
  line-height:21px;color:#DADADA}
.sf-flink{display:inline-flex;align-items:center;gap:9px;padding:4px 0;
  font-size:15px;font-weight:400;letter-spacing:1.5px;line-height:15px;
  text-transform:uppercase;color:#EB1923;text-decoration:none;transition:opacity .2s}
.sf-flink:hover{opacity:.78}
.sf-flink svg{width:6px;height:8px;flex:none}

/* -- follow row ----------------------------------------------------------- */
.sf-follow{display:flex;align-items:center;justify-content:flex-end;gap:28px;margin-top:64px;min-height:31px}
.sf-fl{font-size:14px;letter-spacing:1.4px;line-height:21px;margin:0}
.sf-socs{display:flex;align-items:center;gap:16px}
.sf-socs a{display:flex;align-items:center;justify-content:center;width:24px;height:21px;
  color:#F2F2F4;transition:opacity .2s}
.sf-socs a:hover{opacity:.7}
.sf-socs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* -- legal row ------------------------------------------------------------ */
.sf-legal{display:flex;justify-content:space-between;align-items:baseline;gap:48px;
  margin-top:20px;border-top:1px solid rgba(155,155,155,.4);padding-top:34px}
.sf-legal nav{display:flex;flex-wrap:wrap;gap:28px}
.sf-legal a,.sf-legal .sf-plan{display:inline;margin:0;font-size:14px;font-weight:400;
  letter-spacing:.7px;line-height:20px;text-transform:uppercase;text-decoration:none}
.sf-legal a{color:#D1D2D3}
.sf-legal a:hover{color:#fff}
.sf-legal .sf-plan{color:#6F7481;cursor:default}
.sf-copy{font-size:14px;font-weight:400;letter-spacing:1.4px;line-height:20px;
  text-transform:uppercase;color:#E5E6E7;opacity:.95;text-align:right;white-space:nowrap}

/* -- the binding disclosure, recoloured for the navy ground --------------- */
.sfoot .disclosure{margin-top:44px;border-left:2px solid #EB1923;color:#B9BEC7;
  font-size:13.5px;letter-spacing:normal;line-height:1.65}
.sfoot .disclosure b{color:#fff}

@media(max-width:1180px){ .sfoot-in{padding:48px 40px 36px} .sf-row{grid-template-columns:58% 42%} }
@media(max-width:900px){
  .sfoot-in{padding:44px 24px 32px}
  .sf-row{grid-template-columns:1fr;gap:44px}
  .sf-r1{margin-bottom:52px}
  .sf-follow{margin-top:48px;justify-content:flex-start}
  .sf-legal{flex-direction:column;gap:20px;align-items:flex-start}
  .sf-copy{text-align:left;white-space:normal}
}
@media(max-width:520px){ .sf-cols{flex-wrap:wrap;gap:0 24px} .sf-col{width:auto;min-width:150px} }

/* ============================================================================
   MOBILE MENU — rebuilt as a copy of the Fraser Yachts mobile flyout, measured
   over CDP at 390x844 (dsf 2) on 2026-08-20. Their values verbatim:

     panel     .flyout-window — fixed left:0 top:0 · z-index 1000 · h-dvh ·
               width 11/12 (91.667%) · max-width 400px · bg #fff ·
               shadow-md = 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06)
               overflow-y auto · NO scrim behind it (the page shows through)
               at >=640px: width AND max-width both 415px
     image     aspect-ratio 16/9 · object-fit cover · max-height 240px
               (358x201 at a 390 viewport)
     close     32x32 · absolute right/top 8px (m-2) · border-radius 9999 ·
               background rgba(0,0,0,.35) · padding 10px · icon 12px white,
               viewBox 0 0 14 14, stroke currentColor width 1.5, fill none
     body      margin 6px 24px 22px  (mt-1.5 mx-6 mb-5.5)
     row       <li> display flex · padding 18px 0 · border-bottom 1px #DADADA ·
               last row no border · height 57 (52 without the border)
       label   flex 1 1 0 · 15px · w400 · ls 1px · lh 16px · uppercase · #040F29
       chevron a literal ">" character, 14px · ls 1px · #8C8E92 · 8px wide
     rhythm    image 0-201 · list top 207 · row stride 57
     level 2   same image, section name overlaid in large white caps ·
               full-width grey BACK band under it · group headings at the 24px
               inset · links indented a further 16px (x=40), 16px/#040F29,
               53px stride, hairline between links only

     Fraser's own second level is what the chevron opens, so the chevron here
     opens one too rather than being decoration. Every link in it is a link
     that already exists in the desktop mega-menu, and the 12 unbuilt pages
     stay non-clickable "planned" text — no dead ends.
   ========================================================================== */
.burger{display:none;position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:15;
  width:32px;height:32px;border:0;border-radius:0;background:transparent;cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:4px auto;
  transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){.burger{display:block}}

/* #mnav sits inside header.site (position:relative; z-index:10), which traps the
   panel below the fixed social stack. Lift the whole header while it is open. */
body.mnav-open header.site{z-index:1000}
.mobile-nav{position:fixed;left:0;top:0;right:auto;bottom:auto;z-index:1000;
  width:91.6667%;max-width:400px;height:100vh;height:100dvh;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
  background:#fff;color:#040F29;overflow-y:auto;overflow-x:hidden;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  opacity:1;visibility:hidden;transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s}
.mobile-nav.open{visibility:visible;transform:none;
  transition:transform .3s cubic-bezier(.4,0,.2,1)}
@media(min-width:640px){ .mobile-nav{width:415px;max-width:415px} }

.mn-art{position:relative;width:100%;aspect-ratio:16/9;max-height:240px;flex:none;overflow:hidden;background:#0B2430}
.mn-art img{width:100%;height:100%;object-fit:cover;display:block}
/* Fraser's flyout image is a dark photograph, so white type sits on it unaided.
   This illustration is pale turquoise, so the section name gets the same bottom-up
   gradient the split panels use. Level 0 has no type over the image and no gradient. */
.mn-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;opacity:0;z-index:1;
  background:linear-gradient(to top,rgba(6,18,34,.86) 0%,rgba(6,18,34,.45) 44%,rgba(6,18,34,0) 100%);
  transition:opacity .25s ease;pointer-events:none}
.mobile-nav[data-level="1"] .mn-art::after{opacity:1}
.mn-title{position:absolute;left:0;right:0;bottom:24px;padding:0 20px;z-index:2;
  font-family:var(--bar);font-size:30px;font-weight:400;letter-spacing:3px;line-height:34px;
  text-transform:uppercase;color:#fff;text-align:center;
  text-shadow:0 2px 18px rgba(0,0,0,.45);display:none}
.mobile-nav[data-level="1"] .mn-title{display:block}

.mobile-nav .close{position:absolute;right:8px;top:8px;z-index:3;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  padding:10px;border:0;border-radius:9999px;background:rgba(0,0,0,.35);color:#fff;
  font-size:0;line-height:0;cursor:pointer}
.mobile-nav .close svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.5;fill:none}

.mn-back{display:none;width:100%;height:54px;flex:none;padding:0 24px;align-items:center;gap:16px;
  border:0;background:#F2F2F2;cursor:pointer;
  font-family:var(--bar);font-size:15px;font-weight:400;letter-spacing:1px;line-height:16px;
  text-transform:uppercase;color:#040F29;text-align:left}
.mobile-nav[data-level="1"] .mn-back{display:flex}
.mn-back i{font-style:normal;font-size:14px;color:#8C8E92}

.mn-body{display:flex;flex-direction:column;flex:1 1 auto;margin:6px 24px 22px}

.mn-list{list-style:none;margin:0;padding:0;flex:1 1 auto}
.mn-list li{display:block}
.mn-row{display:flex;align-items:center;width:100%;padding:18px 0;
  border:0;border-bottom:1px solid #DADADA;background:transparent;cursor:pointer;
  font-family:var(--bar);text-align:left;text-decoration:none}
.mn-list li:last-child .mn-row{border-bottom:0}
.mn-lab{flex:1 1 0;font-size:15px;font-weight:400;letter-spacing:1px;line-height:16px;
  text-transform:uppercase;color:#040F29}
.mn-chev{flex:none;font-size:14px;font-weight:400;letter-spacing:1px;line-height:20px;color:#8C8E92}

.mn-sub{display:none;flex:1 1 auto}
.mn-sub.is-open{display:block}
.mn-gh{margin:0 0 8px;font-family:var(--bar);font-size:15px;font-weight:500;letter-spacing:1px;
  line-height:21px;text-transform:uppercase;color:#040F29}
.mn-grp + .mn-grp{margin-top:34px}
.mn-grp ul{list-style:none;margin:0;padding:0 0 0 16px}
.mn-grp li{border-bottom:1px solid #DADADA}
.mn-grp li:last-child{border-bottom:0}
.mn-grp a,.mn-grp .mn-plan{display:block;padding:16px 0;font-family:var(--bar);font-size:16px;
  font-weight:400;letter-spacing:1px;line-height:21px;text-transform:uppercase;
  color:#040F29;text-decoration:none}
.mn-grp .mn-plan{color:#8C8E92}

.mn-socs{display:flex;align-items:center;gap:20px;margin-top:26px}
.mn-socs a{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  color:#040F29;text-decoration:none;transition:opacity .2s}
.mn-socs a:hover{opacity:.6}
.mn-socs svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.mn-socs a.wa svg{fill:currentColor;stroke:none}
.mobile-nav[data-level="1"] .mn-socs{display:none}
.mn-foot{display:flex;align-items:center;gap:10px;margin-top:32px;padding:0;
  font-family:var(--bar);font-size:16px;font-weight:400;letter-spacing:1px;line-height:25px;
  text-transform:uppercase;color:#040F29;text-decoration:none}
.mobile-nav[data-level="1"] .mn-foot{display:none}

@media (prefers-reduced-motion:reduce){
  .mobile-nav{transition:visibility 0s}
  .burger span{transition:none}
}

/* ============================================================================
   MOBILE HERO — Fraser's opening block, 1:1. Measured on their charter page at
   390x844 (dsf 2) on 2026-08-20. Their values verbatim:

     header      76px tall; the hero starts immediately beneath it
     hero        .dimmer — aspect-ratio 1 / 1, i.e. a perfect square: 390x390
                 at a 390 viewport · position relative · display flex ·
                 align-items center · justify-content center · overflow hidden
     scrim       .dimmer::after — linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.4))
                 inset 0 · z-index 2
     title       wrapper .absolute.z-3 — flex, items-center, justify-center,
                 size-full, max-width 85vw
                 type 28px · w500 · ls 2.8px · lh 35px · uppercase · #fff · centred
     after it    a 72px spacer (their h-[4.5rem]) before the next heading —
                 already what section{padding:72px 0} gives here

   Two deliberate departures, both content rather than geometry:
     · Fraser's hero holds a title and nothing else. This one keeps the subhead
       and the two CTAs, so the block is centred as a stack rather than a single
       line. Everything still fits inside the square with room to spare.
     · min-height:100vw rather than aspect-ratio:1/1 — identical at every mobile
       width, but if a reader's text scaling ever needs more room the block grows
       instead of clipping the CTAs behind overflow:hidden.
   The desktop hero keeps its left alignment (founder instruction 2026-08-20);
   only <=900px is centred, which is where Fraser centres it too.
   ========================================================================== */
@media(max-width:900px){
  /* header to Fraser's 76px: 12 pad + 56 bar + 4 white rule + 4 red rule.
     The language control loses its 1px #6F7481 box (founder instruction
     2026-08-20) — mobile only; on desktop that border pairs with the
     ENQUIRE button's and is untouched. With the box gone the flag also
     loses the 14px inset so it sits 20px in, where Fraser's burger sits. */
  .lang .panel{height:36px;min-width:0;border:0}
  .lang:hover .panel,.lang:focus-within .panel{border-color:transparent}
  .lang > .panel > a[aria-current]{padding:0}
  .lang .opts{left:0;right:auto;width:196px;border:1px solid #6F7481;border-top:1px solid #6F7481}
  .hero{min-height:100vw}                                  /* the 1:1 square */
  .hero .scene::after{background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.4))}
  .hero > .wrap{align-items:center;justify-content:center;text-align:center;padding:32px 24px}
  .hero h1{max-width:85vw}
  .hero h1 .to{margin-top:14px}
  .hero .cta-row{justify-content:center;margin-top:20px;gap:8px}
  .hero .cta-row .btn{padding:5px 13px;font-size:10px;letter-spacing:.09em}

  /* the three fixed buttons stay bottom-right and clear of the shorter hero */
  .float-stack{right:16px;bottom:16px;gap:10px}
  .soc-mini{width:38px;height:38px}
  .soc-mini svg{width:17px;height:17px}
  .wa-float{width:50px;height:50px}
  .wa-float svg{width:27px;height:27px}
}

/* ============================================================================
   LISTING CARD — Fraser's "A few of our recent sales", measured 1:1
   Source: fraseryachts.com homepage at a 1440px viewport, 2026-08-20, over CDP.
   Every dimension below is read off their computed styles, not eyeballed:

     eyebrow   15px / 400 / ls 1.5px / lh 21.43px / uppercase / centred
     rule      two bars 65x4px, margin 12px top / 40px bottom
     h2        34px / 500 / ls normal / lh 30.6px / uppercase / centred
     head      max-width 800px
     grid      flex-wrap, gap 48px row / 16px column,
               25% - 1rem >=1280 · 33.333% - 1rem >=1024 · 50% - 1rem >=640
     card      316 x 331 at that viewport
     image     aspect-ratio 16/10 (measured 1.600), object-fit cover, radius 0
     body      padding-top 12px
     name      20px / 500 / ls 1px / lh 25px / uppercase / centred
     builder   14px / 400 / ls 0.7px / lh 17.5px / margin-top 8px / uppercase
     strip     margin-top 12px, centred, cells padded 8px, 1px #DADADA divider
     value     14px / 500 / ls 0.7px / lh 20px / min-height 20px / lowercase
     label     14px / 400 / ls 0.7px / lh 20px / uppercase

   TWO deliberate departures, both colour, neither dimensional. Fraser's rule is
   navy #040F29 + coral #EB1923 and their type is grey #5A5A5A; on this white
   page that coral fights the copper the rest of the site is built from. So the
   rule is --ink + --brand and the grey is --muted. Shape is theirs, palette is
   Starhub's — which is what "match the colour scheme" has to mean here.
   ========================================================================== */
/* Fraser closes the heading section with pb-10 before the grid starts */
.rs-head{max-width:800px;margin:0 auto 40px;text-align:center}
.rs-eyebrow{font-family:var(--bar);font-size:15px;font-weight:400;letter-spacing:1.5px;
  line-height:21.43px;text-transform:uppercase;color:var(--muted);margin:0}
.rs-rule{display:flex;justify-content:center;margin:12px 0 40px}
.rs-rule span{display:block;width:65px;height:4px}
.rs-rule span:first-child{background:var(--ink)}
.rs-rule span:last-child{background:var(--brand)}
.rs-head h2{font-family:var(--display);font-size:34px;font-weight:500;letter-spacing:normal;
  line-height:30.6px;text-transform:uppercase;color:var(--ink);margin:0}

.rs-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:48px 16px;margin:0}
.rs-card{width:100%;display:flex;flex-direction:column;text-decoration:none;color:inherit}
@media(min-width:640px){ .rs-card{width:calc(50% - 1rem)} }
@media(min-width:1024px){ .rs-card{width:calc(33.333% - 1rem)} }
@media(min-width:1280px){ .rs-card{width:calc(25% - 1rem)} }
/* the homepage teaser shows three, so it stays three-up rather than dropping to
   a quarter-width row with a hole in it */
@media(min-width:1280px){ .rs-grid.is-three .rs-card{width:calc(33.333% - 1rem)} }

.rs-shot{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:#E8EAEC;border-radius:0}
.rs-shot img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
a.rs-card:hover .rs-shot img{transform:scale(1.04)}
/* the provenance chip that used to sit on each image was removed 2026-08-21 */

/* ---- FRASER'S CHARTER CARD: what was copied, and the four things that were not
   Fraser layers five elements on the photograph. One is built. Four are refused,
   and none of the refusals is aesthetic.

   1. WISHLIST HEART, top right — NOT BUILT. Starhub has no accounts and no saved
      state, so the control promises persistence the business cannot deliver. This
      was already settled: the top-bar comment at charter/index.html:58-61 records
      Fraser's search and "their wishlist heart" as deliberately not copied, five
      days before this rebuild. Re-adding it would have quietly reversed a written
      decision in the same file.
   2. CAMERA BADGE, bottom right — NOT BUILT. It means "a gallery is behind this".
      There is one photograph per boat and no gallery.
   3. VIDEO BADGE — NOT BUILT. No footage of any vessel exists. The only motion in
      this repo is the AI hero loop, which is disclosed as synthetic; a play badge
      on a named hull would set the opposite expectation.
   4. "STARHUB" WATERMARK, bottom left — NOT BUILT, and this was the one to kill
      first. A watermark is the standard convention for "this photograph is ours",
      and here it would assert both that the photograph is Starhub's and that the
      boat is. Neither is true: the images are third-party stand-ins, and it was
      confirmed on 2026-08-18 that the eight charter hulls are not Matthew's — he
      places charters on other owners' boats on commission.
   5. TOP-LEFT TAG — rule written below, nothing renders it. It invents nothing;
      it simply has no fact to carry yet. The rate card holds no acquisition dates,
      and under a commission model "new to the fleet" is a new hull agreement,
      which is Matthew's to assert. One attribute turns it on when he says so.

   The price band IS Fraser's, denominated correctly: their card reads P/WEEK,
   Starhub's rate card is per day, and copying the unit across would have multiplied
   every price on the page by seven. */
.rs-tag{position:absolute;top:12px;left:0;z-index:2;display:flex;align-items:center;height:24px;
  padding:0 14px;background:var(--ink);color:#fff;font-family:var(--bar);font-size:11px;
  font-weight:400;letter-spacing:.1em;line-height:1;text-transform:uppercase}
.rs-tag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}

/* THE FLEET GRID NEEDS A WIDER CONTAINER THAN THE REST OF THE PAGE, and that is
   faithful rather than a deviation. Fraser's charter listing runs a ~1405px
   container at 1920 and their card lands at 340px wide. This site's --maxw is
   1140px, which at four-up gives a 257px card — and Fraser's own stat row, which
   needs 309px for LENGTH / GUESTS / CABINS / CREW, then overflowed the card by
   52px and printed "1 CREW" on top of the next card's length. Scaling their
   measured type down to fit would have been the wrong repair; the card was simply
   too narrow. 1400px puts the card at ~322px, within 20px of Fraser's own.
   Their homepage sections are narrower than their listing pages too. */
#fleet .wrap{max-width:1400px}
/* Fraser's own lengths are whole metres ("97m (318ft)", 11 characters); Starhub's
   carry a decimal ("11.93m (39ft)", 13), so the same row needs more width on a
   slightly narrower card. These three trims buy back ~56px and are the smallest
   departure from the measured type that clears it at every four-up width. */
@media(min-width:1024px){
  #fleet .rs-stats > div{padding:0 6px}
  #fleet .rs-l{font-size:13px}
  #fleet .rs-v span{margin-right:0}
}

/* the fleet cards are <article>, not <a> — no per-boat page exists in this build —
   so the image hover the a.rs-card selector provides is restated for them */
.rs-static .rs-shot img{transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.rs-static:hover .rs-shot img{transform:scale(1.04)}

.rs-body{display:flex;flex-direction:column;padding-top:12px}
.rs-name{font-family:var(--display);font-size:20px;font-weight:500;letter-spacing:1px;
  line-height:25px;text-transform:uppercase;color:var(--ink);text-align:center;margin:0}
.rs-builder{font-family:var(--bar);font-size:14px;font-weight:400;letter-spacing:.7px;
  line-height:17.5px;text-transform:uppercase;color:var(--muted);text-align:center;margin:8px 0 0}

.rs-stats{display:flex;justify-content:center;margin-top:12px;white-space:nowrap;text-align:center}
.rs-stats > div{padding:0 8px}
.rs-stats > div + div{border-left:1px solid #DADADA}
@media(min-width:1024px){ .rs-stats > div{padding:0 14px} }
.rs-v{font-family:var(--bar);font-size:14px;font-weight:500;letter-spacing:.7px;line-height:20px;
  min-height:20px;text-transform:lowercase;color:var(--muted)}
.rs-v span{font-weight:400;margin-right:8px}
.rs-l{font-family:var(--bar);font-size:14px;font-weight:400;letter-spacing:.7px;line-height:20px;
  text-transform:uppercase;color:var(--muted)}
.rs-price{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.04em;
  color:var(--brand);text-align:center;margin:10px 0 0}

@media(max-width:900px){
  .rs-head h2{font-size:24px;line-height:1.1}
  .rs-eyebrow{font-size:13px}
  .rs-rule{margin:12px 0 24px}
  .rs-grid{gap:36px 16px}
}

/* ============================================================================
   BOATS FOR CHARTER — Fraser's homepage charter carousel, measured 1:1
   fraseryachts.com at a 1990px viewport, 2026-08-21, over CDP:
     card 712 x 634 · image 712 x 445 (aspect 1.600 — the same 16:10 as the
     recent-sales tile, simply bigger) · six tiles on ONE row, i.e. a rail
     "MORE YACHTS FOR CHARTER" 320 x 44, 1px #040F29 border, radius 0,
                               15px / 400 / ls 1.5px / uppercase / centred
     round controls            32 x 32, fully rounded, 1px border
   The head block reuses .rs-head, measured off the same site.
   Colours are Starhub's, as in every other Fraser-derived block here.
   ========================================================================== */
.cf-rail{position:relative}
.cf-track{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.cf-track::-webkit-scrollbar{display:none}
.cf-card{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column}
@media(min-width:900px){
  .cf-card{flex:0 0 calc(50% - 16px)}
  /* the tile is twice the width of the recent-sales one, so the name takes the
     step up Fraser's own 2xl:text-xxl makes at their wider breakpoint */
  .cf-card .rs-name{font-size:24px;line-height:30px}
  .cf-card .rs-builder{font-size:15px}
  .cf-card .rs-stats > div{padding:0 20px}
}
.cf-price{display:flex;align-items:center;justify-content:center;height:44px;margin-top:16px;
  background:#F2F2F2;font-family:var(--bar);font-size:15px;font-weight:400;letter-spacing:1.5px;
  line-height:15px;text-transform:uppercase;color:var(--muted)}
.cf-price b{font-weight:500;color:var(--ink);margin:0 .35em}
.cf-ctl{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:40px}
.cf-arrow{width:32px;height:32px;flex:none;border-radius:9999px;border:1px solid var(--brand);
  background:transparent;color:var(--brand);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:13px;line-height:1;padding:0;transition:background .2s ease,color .2s ease}
.cf-arrow:hover:not(:disabled){background:var(--brand);color:#fff}
.cf-arrow:disabled{opacity:.28;cursor:default}
.cf-more{display:flex;align-items:center;justify-content:center;width:320px;max-width:calc(100vw - 120px);
  height:44px;flex:none;border:1px solid var(--ink);border-radius:0;background:transparent;
  font-family:var(--bar);font-size:15px;font-weight:400;letter-spacing:1.5px;line-height:15px;
  text-transform:uppercase;color:var(--ink);text-decoration:none;transition:background .2s ease,color .2s ease}
.cf-more:hover{background:var(--ink);color:#fff}
@media(max-width:900px){ .cf-ctl{gap:16px} .cf-more{width:auto;padding:0 18px;font-size:13px} }

/* ============================================================================
   LIVE ASSISTANT — Fraser's chat panel, matched to the founder's screenshot.
   Their widget refuses to render for a headless browser, so unlike the rest of
   this file these values are measured off the picture, not off their DOM:

     panel ground   #F6F6F7  (sampled)
     bubble / pill  #FFFFFF  (sampled)
     online dot     #268750  (sampled — and NOT reproduced, see below)
     panel          675 captured px wide; the identity pill 217 x 110 and the
                    corner buttons 52 within it, i.e. the pill is ~32% of the
                    panel width and the buttons ~7.7%. Those RATIOS are what is
                    reproduced here at the 370px panel width already in use.

   The structure is the real change: Fraser has NO header bar. The panel is one
   continuous light ground with two round buttons floating in the corners and a
   white identity pill centred under them. Typography is a neutral UI sans, not
   the site face — their widget is third-party and does the same.

   What is deliberately not copied: the named agent and the green online dot.
   Starhub has no staffed chat and nobody called Suzanne, so a green dot here
   would be a claim of availability that is simply untrue.
   ========================================================================== */
.la-btn{position:fixed;right:22px;bottom:22px;z-index:130;display:flex;align-items:center;gap:10px;
  height:48px;padding:0 18px 0 14px;border:0;border-radius:9999px;cursor:pointer;
  background:var(--ink);color:#fff;font-family:var(--bar);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;box-shadow:0 10px 24px rgba(4,15,41,.28);
  transition:transform .2s ease,opacity .2s ease}
.la-btn:hover{transform:translateY(-2px)}
.la-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
body.la-open .la-btn{opacity:0;pointer-events:none}
.float-stack{bottom:86px}
@media(max-width:900px){ .float-stack{bottom:78px} .la-btn{right:16px;bottom:16px;height:44px;font-size:12px} }

/* the panel itself — chat UI, so a chat UI face */
.la-panel{--la-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  position:fixed;right:22px;bottom:22px;z-index:131;width:370px;max-width:calc(100vw - 32px);
  height:560px;max-height:calc(100dvh - 44px);display:flex;flex-direction:column;overflow:hidden;
  background:#F6F6F7;border-radius:18px;box-shadow:0 24px 60px rgba(4,15,41,.34);
  font-family:var(--la-ui);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,.61,.36,1),visibility 0s linear .22s}
.la-panel.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media(max-width:900px){ .la-panel{right:16px;bottom:16px} }

/* corner controls — 52/675 of the panel, so 28px at 370 */
.la-bar{position:relative;flex:none;height:16px}
.la-round{position:absolute;top:14px;width:28px;height:28px;border:0;border-radius:9999px;
  background:#EDEDEE;color:#111;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;padding:0;transition:background .18s ease}
.la-round:hover{background:#E2E2E4}
.la-round.l{left:14px} .la-round.r{right:14px}

/* identity pill — Fraser floats it centred over the ground, 217/675 wide */
.la-id{align-self:center;display:flex;align-items:center;gap:10px;margin:14px 0 4px;
  background:#fff;border-radius:9999px;padding:5px 16px 5px 5px;box-shadow:0 2px 6px rgba(17,17,17,.10)}
.la-id img{width:34px;height:34px;flex:none;border-radius:9999px;background:var(--ink);
  object-fit:contain;padding:3px}
.la-id b{display:block;font-size:13.5px;font-weight:600;line-height:1.25;color:#111}
.la-id span{display:block;font-size:12px;line-height:1.25;color:#6B6B70}

.la-body{flex:1 1 auto;overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px}
.la-chip{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);background:var(--wash);border-radius:999px;padding:5px 10px}
.la-msg{align-self:flex-start;max-width:82%;background:#fff;border-radius:14px;padding:13px 16px;
  font-size:14.5px;line-height:1.45;color:#111;box-shadow:0 1px 2px rgba(17,17,17,.07)}
.la-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.la-quick a{font-size:13px;color:#111;text-decoration:none;background:#fff;border:1px solid #E4E4E6;
  border-radius:999px;padding:9px 14px;transition:border-color .18s ease,color .18s ease}
.la-quick a:hover{border-color:var(--brand);color:var(--brand)}

.la-foot{flex:none;padding:0 12px 12px}
.la-form{display:flex;align-items:center;gap:8px;background:#fff;border-radius:9999px;padding:6px;
  border:1px solid #E4E4E6;box-shadow:0 1px 2px rgba(17,17,17,.06);transition:border-color .18s ease}
.la-form:focus-within{border-color:#B9C4D4}
.la-ico{width:34px;height:34px;flex:none;border:0;border-radius:9999px;background:#EFEFF1;color:#111;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .18s ease}
.la-ico:hover{background:#E4E4E6}
.la-form input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:var(--la-ui);
  font-size:14.5px;color:#111}
.la-form input::placeholder{color:#8A8A90}
.la-send{width:34px;height:34px;flex:none;border:0;border-radius:9999px;background:var(--ink);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.la-ico svg,.la-send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.la-note{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#8A8A90;text-align:center;margin:9px 0 0}

/* ============================================================================
   FEATURED YACHTS — Fraser's grey featured block, applied to the brokerage
   sections. This one section could NOT be reached live: it is not on the
   homepage, /yachts-for-sale/, /yachts-for-charter/ or a yacht detail page, so
   the CONTAINER values below are measured off the founder's screenshot rather
   than off their DOM, and that is a weaker source than everything else here.

   What the screenshot gives directly:
     ground        rgb(242,242,244)  — sampled, unambiguous
     CTA           FILLED navy rgb(4,16,42), centred, white uppercase text
     CTA size      399 x 54 captured px. Fraser's outlined button measures
                   320 x 44 live, and 399/54 resolves to 325 x 44 at the same
                   scale — so it is the same button, filled instead of outlined.
     price bar     WHITE band across the card, inverting the grey-on-white bar
                   used in the charter rail
     grid          four across
   Everything inside the tile (.rs-shot / .rs-name / .rs-builder / .rs-stats)
   is the component already measured twice on their live site, unchanged.
   ========================================================================== */
.fy-sec{background:#F2F2F4}
/* Fraser's own tile rule, measured live: 25% - 1rem at xl, 48px row / 16px
   column gap. Four across is that rule, not a guess from the picture. */
.fy-head{display:block;margin:0 0 22px;font-family:var(--bar);font-size:15px;font-weight:400;
  letter-spacing:1.5px;line-height:21.43px;text-transform:uppercase;color:var(--ink);text-align:left}
.fy-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:48px 16px;margin:0}
.fy-grid .rs-card{width:100%}
@media(min-width:640px){ .fy-grid .rs-card{width:calc(50% - 8px)} }
@media(min-width:1024px){ .fy-grid .rs-card{width:calc(33.333% - 11px)} }
@media(min-width:1280px){ .fy-grid .rs-card{width:calc(25% - 12px)} }
/* the tile body sits straight on the grey; only the price band is white */
.fy-price{display:flex;align-items:center;justify-content:center;height:44px;margin-top:16px;
  background:#FFFFFF;font-family:var(--bar);font-size:15px;font-weight:400;letter-spacing:1.5px;
  line-height:15px;text-transform:uppercase;color:var(--muted)}
.fy-price b{font-weight:500;color:var(--ink);margin:0 0 0 .35em}
.fy-more{display:flex;align-items:center;justify-content:center;width:320px;max-width:calc(100vw - 80px);
  height:44px;margin:40px auto 0;border:1px solid var(--ink);border-radius:0;background:var(--ink);
  font-family:var(--bar);font-size:15px;font-weight:400;letter-spacing:1.5px;line-height:15px;
  text-transform:uppercase;color:#fff;text-decoration:none;transition:background .2s ease,color .2s ease}
.fy-more:hover{background:transparent;color:var(--ink)}
/* the disclosure keeps its own scale but sits on the grey now */
.fy-sec .fleet-note{color:var(--muted)}
@media(max-width:900px){
  .fy-head{font-size:13px;margin-bottom:16px}
  .fy-grid{gap:36px 16px}
}


/* ============================================================================
   CHARTER DESTINATIONS + THE PORT MAP          added 2026-08-21
   ========================================================================== */

/* --- destinations: measured from the founder's capture of Fraser's block ----
   container 1237, card 403, gap 14, image 403x300 (ratio 1.343 -> 4:3), title
   uppercase navy, body ~22px leading, coral uppercase link, arrows centred below. */
/* Fraser's destinations container measured 1237px against 1405 for their yacht
   listing — the two bands are not the same width on their site either. Ours was
   inheriting the page's 1140px --maxw while #fleet directly below had been widened
   to 1400, and a 260px step between two adjacent bands reads as a mistake. 1290
   puts the card at ~411px, within 8px of Fraser's 403. */
#destinations .wrap{max-width:1290px}
.dz-rail{position:relative}
.dz-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.dz-track::-webkit-scrollbar{display:none}
.dz-card{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column}
@media(min-width:760px){ .dz-card{flex:0 0 calc(50% - 7px)} }
@media(min-width:1100px){ .dz-card{flex:0 0 calc(33.333% - 10px)} }
.dz-shot{width:100%;aspect-ratio:4/3;overflow:hidden;background:#E8EAEC}
.dz-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.dz-card:hover .dz-shot img{transform:scale(1.04)}
.dz-t{font-family:var(--bar);font-size:17px;font-weight:500;letter-spacing:1px;line-height:24px;
  text-transform:uppercase;color:var(--ink);margin:18px 0 0}
.dz-p{font-size:15px;line-height:22px;color:var(--muted);margin:10px 0 0}
.dz-link{display:inline-block;margin-top:14px;font-family:var(--bar);font-size:13px;font-weight:500;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--brand);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .18s ease}
.dz-link:hover{border-color:var(--brand)}
.dz-link span{margin-left:5px}
.dz-arrows{display:flex;justify-content:center;gap:24px;margin-top:34px}
.dz-arrow{width:30px;height:30px;border-radius:9999px;border:1px solid var(--brand);background:transparent;
  color:var(--brand);font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .2s ease,color .2s ease,opacity .2s ease}
.dz-arrow:hover:not(:disabled){background:var(--brand);color:#fff}
.dz-arrow:disabled{opacity:.28;cursor:default}

/* --- the port map ----------------------------------------------------------
   Real geography, no tile server: see the section comment in charter/index.html.
   The sea rect is deliberately far larger than the viewBox so that panning and
   zooming never expose the page behind it. */
.mm-frame{position:relative;width:100%;height:min(78vh,720px);margin-top:8px;overflow:hidden;
  background:#C9D2D6;touch-action:none}
.mm-svg{display:block;width:100%;height:100%;cursor:grab}
.mm-svg.is-drag{cursor:grabbing}
.mm-sea{fill:#C9D2D6}
.mm-land{fill:#F4F3F0;stroke:#DCDAD5;stroke-width:1.1;stroke-linejoin:round}
.mm-town circle{fill:#A9B4BA}
/* Cartographic halo. Malta's three marinas sit within about 4km of each other, so
   at the default zoom the berth labels pass close to Valletta and to two or three
   town labels. Painting a sea-coloured stroke under every glyph means a crossing
   label still reads instead of turning into mud — the standard map-label trick,
   and cheaper than hand-placing every string at every zoom level. */
.mm-svg text{paint-order:stroke fill;stroke:#C9D2D6;stroke-width:3.2px;stroke-linejoin:round}
.mm-town text{font-family:var(--bar);font-size:11px;letter-spacing:.4px;fill:#6E7A82}
.mm-capital circle{fill:#7C8A93}
.mm-capital text{font-family:var(--bar);font-size:14px;letter-spacing:.6px;fill:var(--ink)}
.mm-berth{cursor:pointer}
.mm-halo{fill:var(--brand);opacity:.16;transition:opacity .25s ease,r .25s ease}
.mm-dot{fill:var(--brand);stroke:#fff;stroke-width:2}
.mm-berth:hover .mm-halo,.mm-berth:focus-visible .mm-halo{opacity:.3;r:19}
.mm-blab{font-family:var(--bar);font-size:14px;font-weight:500;letter-spacing:.8px;
  text-transform:uppercase;fill:var(--ink)}
.mm-bsub{font-family:var(--bar);font-size:11.5px;letter-spacing:.4px;fill:var(--brand)}
.mm-ctl{position:absolute;top:14px;right:14px;z-index:3;display:flex;flex-direction:column;gap:1px}
.mm-ctl button{width:30px;height:30px;border:0;background:#fff;color:var(--ink);font-size:15px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.mm-ctl button:hover{background:#F2F2F2}
.mm-ctl button:disabled{color:#B9C0C8;cursor:default}
.mm-full{position:absolute;left:14px;bottom:14px;z-index:3;width:30px;height:30px;border:0;
  background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.mm-full:hover{background:#F2F2F2}
.mm-full svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mm-note{max-width:820px;margin:22px auto 0;text-align:center;font-size:14px;line-height:21px;color:var(--muted)}
.mm-cred{display:block;margin-top:8px;font-size:12px;color:#8A939B}
.mm-cred a{color:inherit;text-decoration:underline}
@media(max-width:700px){
  .mm-frame{height:62vh}
  .mm-blab{font-size:16px} .mm-bsub{font-size:13px}
  .mm-town text{font-size:13px} .mm-capital text{font-size:16px}
}
