/* ---------------------------------------------------------------- tokens ---
   Light is the base. Dark is a token swap only, so no component rule ever
   needs to know which theme it is in. Contrast of every text pair here is
   measured at 4.5:1 or better against the surface behind it.                */
:root{
  --bg:#F7F3EC; --surface:#FFFFFF; --sunk:#EFF3F6; --raised:#FFFFFF;
  --ink:#12222F; --ink-2:#4A5C6E; --ink-3:#5A6C7C;
  --line:#DDE3E8; --line-2:#C6CFD7;
  --navy:#0B1F3A; --band:#0B1F3A; --on-navy:#FFFFFF; --on-band-gold:#E3B45C; --on-navy-2:#C9DAE8; --on-navy-3:#8FBEE3;
  --accent:#175A8C; --accent-2:#0B1F3A; --accent-wash:#E8F0F6;
  --gold:#8A6413;
  --pos:#0E5C3A; --pos-bg:#E3F3EA;
  --warn:#7A5D10; --warn-bg:#FBF1D9;
  --neg:#9B2C2C; --neg-bg:#FBECEC;
  --idle:#4A5C6E; --idle-bg:#F1F4F7;
  --banner-bg:#FBF1D9; --banner-ink:#5A4308; --banner-line:#EAD9A6;
  --shadow-hover:0 6px 20px rgba(11,31,58,.10);
  --r-card:12px; --r-table:10px; --r-badge:4px; --r-pill:999px;
  --step:4px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1720; --surface:#17242F; --sunk:#121D26; --raised:#1D2C39;
    --ink:#E9EEF2; --ink-2:#AFC0CD; --ink-3:#98AAB8;
    --line:#24333F; --line-2:#33475A;
    --navy:#22384B; --band:#080F17; --on-navy:#F2F6F9; --on-band-gold:#E3B45C; --on-band-gold:#E3B45C; --on-navy-2:#C3D5E4; --on-navy-3:#8FBEE3;
    --accent:#7CB8E4; --accent-2:#A8D0EE; --accent-wash:#16303F;
    --gold:#D6A544;
    --pos:#63CE9B; --pos-bg:#123024;
    --warn:#E2B84C; --warn-bg:#31280F;
    --neg:#EE8B8B; --neg-bg:#3A1D1D;
    --idle:#AFC0CD; --idle-bg:#1B2833;
    --banner-bg:#241E0C; --banner-ink:#E7CF92; --banner-line:#3A3115;
    --shadow-hover:0 6px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1720; --surface:#17242F; --sunk:#121D26; --raised:#1D2C39;
  --ink:#E9EEF2; --ink-2:#AFC0CD; --ink-3:#98AAB8;
  --line:#24333F; --line-2:#33475A;
  --navy:#22384B; --band:#080F17; --on-navy:#F2F6F9; --on-navy-2:#C3D5E4; --on-navy-3:#8FBEE3;
  --accent:#7CB8E4; --accent-2:#A8D0EE; --accent-wash:#16303F;
  --gold:#D6A544;
  --pos:#63CE9B; --pos-bg:#123024;
  --warn:#E2B84C; --warn-bg:#31280F;
  --neg:#EE8B8B; --neg-bg:#3A1D1D;
  --idle:#AFC0CD; --idle-bg:#1B2833;
  --banner-bg:#241E0C; --banner-ink:#E7CF92; --banner-line:#3A3115;
  --shadow-hover:0 6px 20px rgba(0,0,0,.35);
}

/* Cross-document view transitions: supporting browsers cross-fade between
   pages, everyone else navigates exactly as before. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* The chrome is common to every page, so let it stay put rather than
   cross-fading against itself. */
header.site{view-transition-name:site-header}
footer.site{view-transition-name:site-footer}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty;
}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:-.2px;line-height:1.14;margin:0;text-wrap:balance}
img{max-width:100%;height:auto}

/* Motion is used only to answer a pointer, and never at all for people who
   have asked the system to reduce it.                                       */
a,button,.card,.chip,table.rank tbody tr{transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .14s ease,box-shadow .14s ease}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* One focus treatment for every interactive element, visible in both themes. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-badge)}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
.prose a,p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.prose a:hover,p a:hover{text-decoration-color:currentColor}

.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.narrow{max-width:min(760px,100%)}
.prose{max-width:68ch}

/* ------------------------------------------------------------------ chrome */
header.site{
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
header.site .wrap{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;min-height:64px;padding-top:8px;padding-bottom:8px;position:relative}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);flex-shrink:0;min-height:44px}
.brand:hover{text-decoration:none}
.mark{width:34px;height:34px;border-radius:9px;background:var(--navy);display:grid;place-items:center;flex-shrink:0}
.brand b{font-family:'DM Serif Display',Georgia,serif;font-size:22px;font-weight:400}
.powered-top{position:absolute;left:65px;bottom:3px;font-size:10px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.powered-top strong{color:var(--accent);letter-spacing:.02em}
nav.main{display:flex;gap:2px;margin-left:auto;align-items:center;flex-wrap:wrap;justify-content:flex-end}
nav.main a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  border-radius:9px;font-weight:600;font-size:14.5px;color:var(--ink-2);
}
nav.main a:hover{background:var(--sunk);color:var(--ink);text-decoration:none}
nav.main a[aria-current=page]{background:var(--accent-wash);color:var(--accent)}
.nav-toggle{display:none;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;margin-left:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:700 14px/1 'Manrope',system-ui,sans-serif;cursor:pointer}
.nav-toggle svg{width:18px;height:18px;stroke:currentColor}
.nav-toggle:hover{border-color:var(--accent);color:var(--accent)}

.banner{background:var(--banner-bg);color:var(--banner-ink);font-size:13px;text-align:center;padding:9px 16px;border-bottom:1px solid var(--banner-line)}
.banner-more{}
.crumbs{font-size:13px;color:var(--ink-3);padding:18px 0 0}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--accent)}
main{min-height:60vh}


/* -------------------------------------------------------------------- hero
   The hero is the ranking itself, not a headline about the ranking: the
   product demonstrates itself in the first frame. The band is dark in both
   themes, so everything inside it is light-on-dark in both.               */
.hero{background:var(--band) url('/assets/images/sailing-hero.jpg') center/cover no-repeat;color:var(--on-navy);padding:78px 0 62px;position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,16,28,.97) 0%,rgba(5,16,28,.88) 45%,rgba(5,16,28,.60) 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:40%;z-index:-1;background:linear-gradient(0deg,rgba(5,16,28,.72),transparent);pointer-events:none}
.herogrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;position:relative}
.herogrid>div:first-child{padding-bottom:4px}
@media(max-width:980px){.herogrid{grid-template-columns:minmax(0,1fr);gap:40px}}
.hero h1{
  font-size:clamp(34px,5.4vw,60px);color:var(--on-navy);max-width:15ch;
  letter-spacing:-.028em;line-height:1.04;
}
.hero p.lede{color:var(--on-navy-2);font-size:clamp(16.5px,1.9vw,19px);max-width:46ch;margin:22px 0 0}
.hero-kicker{margin:0 0 16px;color:var(--on-navy-3);font-size:12px;font-weight:800;letter-spacing:1.35px;text-transform:uppercase}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-actions .cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 19px;border-radius:10px;background:var(--on-navy);border:1px solid var(--on-navy);color:var(--band);font-size:14.5px;font-weight:800}
.hero-actions .cta:hover{background:var(--on-navy-3);border-color:var(--on-navy-3);text-decoration:none}
.hero-actions .chip{margin:0;min-height:46px}

.hero-categories{border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:24px;background:rgba(8,27,44,.78)}
.hero-categories h2{color:var(--on-navy);font-size:26px;margin-bottom:18px}
.hero-category-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hero-category-grid a{display:block;padding:16px;border:1px solid rgba(255,255,255,.22);border-radius:12px;color:var(--on-navy);background:rgba(255,255,255,.05)}
.hero-category-grid a:hover{background:rgba(255,255,255,.14);text-decoration:none}
.hero-category-grid strong{display:block;font-size:15px}
.hero-category-grid span{display:block;color:var(--on-navy-2);font-size:12px;line-height:1.5;margin-top:7px}
.hero-all{display:inline-block;color:var(--on-navy);margin-top:18px;font-weight:700}
@media(max-width:480px){.hero-categories{padding:16px}.hero-category-grid{grid-template-columns:1fr}.hero{padding:40px 0}}

/* Live leaderboard — the proof, sitting where a stock photo usually goes. */
.board{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 24px 60px rgba(0,0,0,.30);
}
.board-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 14px 14px;border-bottom:1px solid rgba(255,255,255,.10);
}
.board-head b{font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--on-navy-3)}
.board-head span{font-size:12px;color:var(--on-navy-2);font-variant-numeric:tabular-nums}
.board a{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 14px;border-radius:11px;color:var(--on-navy);text-decoration:none;
}
.board a+a{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.board a:hover{background:rgba(255,255,255,.09);text-decoration:none}
.board a:focus-visible{outline:2px solid var(--on-navy);outline-offset:-2px}
.board .bn{
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:13px;font-weight:600;
  color:var(--on-navy-3);font-variant-numeric:tabular-nums;text-align:right;
}
.board a:first-of-type .bn{color:var(--on-band-gold)}
.board .bnm{min-width:0;font-weight:700;font-size:15.5px;letter-spacing:-.012em;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .bnm em{display:block;font-style:normal;font-weight:500;font-size:12.5px;
               color:var(--on-navy-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.board .bs{
  font-family:'DM Serif Display',Georgia,serif;font-size:23px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.board-foot{padding:12px 14px 10px}
.board-foot a{display:inline;padding:0;font-size:13.5px;font-weight:700;color:var(--on-navy-3)}
.board-foot a:hover{color:var(--on-navy);background:none;text-decoration:underline}

/* Proof strip — a rule of figures, not four boxes. */
.proof{display:flex;flex-wrap:wrap;gap:26px 44px;margin-top:34px;padding-top:26px;
       border-top:1px solid rgba(255,255,255,.14);position:relative}
.proof div{min-width:0}
.proof b{display:block;font-family:'DM Serif Display',Georgia,serif;font-size:30px;line-height:1;
         color:var(--on-navy);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.proof span{display:block;margin-top:6px;font-size:13px;color:var(--on-navy-2);font-weight:600}

/* ---------------------------------------------------------------- sections */
.sec{padding:52px 0}
.sec h2{font-size:clamp(24px,3.2vw,31px)}
.sub{color:var(--ink-2);font-size:15.5px;margin:10px 0 0;max-width:74ch}
.label{font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}

/* ------------------------------------------------------------------- grids */
.grid{display:grid;gap:16px}
.stats{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:30px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;color:var(--ink)}
.stat b{display:block;font-family:'DM Serif Display',Georgia,serif;font-size:32px;line-height:1.05;font-variant-numeric:tabular-nums}
.stat span{color:var(--ink-2);font-size:13.5px;font-weight:600}
.hero .stat{border-color:transparent}

.cards{grid-template-columns:repeat(auto-fill,minmax(264px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;display:block;color:inherit}
a.card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-hover)}
a.card:hover h3{color:var(--accent)}
.card h3{font-size:19px;margin-bottom:6px}
.card p{color:var(--ink-2);font-size:14px;margin:0}
.featured-home{background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.featured-grid{margin-top:24px;grid-template-columns:repeat(3,minmax(0,1fr))}
.featured-card{display:flex;flex-direction:column;gap:10px;min-height:100%}
.featured-card-media{display:block;margin:-22px -22px 6px;overflow:hidden;border-radius:13px 13px 0 0;aspect-ratio:16/8;background:var(--sunk)}
.featured-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}.featured-card-media:hover img{transform:scale(1.02)}
.featured-card h3{font-size:clamp(22px,3vw,29px);margin:0}
.featured-card .fact-chips{margin-top:auto;padding-top:4px}
.featured-card .featured-card-links{margin-top:4px;color:var(--ink-3);font-size:13px}
.interview-wrap{max-width:900px}
.interview-highlights{margin:22px 0}.interview-highlights span{font-size:12px;padding:6px 9px}
.interview-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 28px}
.featured-pending{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:10px;color:var(--ink-2);font-size:13px;font-weight:750}
.interview-note{margin:26px 0;padding:20px 22px;border-left:3px solid var(--gold);border-radius:0 12px 12px 0;background:var(--accent-wash)}
.interview-note>strong{display:block;margin-bottom:7px;font-size:14px;text-transform:uppercase;letter-spacing:.05em}.interview-note p{margin:6px 0;color:var(--ink-2)}
.featured-explainer,.featured-topics,.featured-region{max-width:900px;margin:54px 0 0}.featured-explainer p,.featured-region p{max-width:78ch;color:var(--ink-2);line-height:1.75}
.featured-topics>.grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}.featured-topics .card{padding:20px}.featured-topics .card h3{font-size:19px}
.featured-method{max-width:900px;margin-top:42px}.featured-method ol{padding-left:22px}.featured-method li{margin:9px 0;color:var(--ink-2)}
.interview-facts{margin:38px 0;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--sunk)}
.interview-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}.interview-section-heading h2{margin:2px 0 0}.verified-date{margin:0;color:var(--ink-3);font-size:13px;white-space:nowrap}
.interview-facts dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--line)}
.interview-facts dl>div{min-height:96px;padding:17px;background:var(--surface)}.interview-facts dt{color:var(--ink-3);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.interview-facts dd{margin:7px 0 0;color:var(--ink);font-size:16px;font-weight:750;line-height:1.35}
.verified-services{margin-top:24px}.verified-services h3{font-size:17px}.fact-source{margin:22px 0 0;color:var(--ink-2);font-size:13px}
.interview-guide{margin:44px 0}.interview-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:20px}.interview-guide-grid>div{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.interview-guide-grid h3{font-size:20px}.interview-guide-grid p,.source-boundary{color:var(--ink-2);line-height:1.7}.source-boundary{font-size:13px}
.confirm-panel{margin:38px 0}.confirm-panel .asklist{margin-bottom:0}.interview-transcript-heading{margin-top:52px;margin-bottom:0;padding-top:10px}
.interview-qa{margin-top:36px}.interview-qa>section{padding:34px 0;border-top:1px solid var(--line)}.interview-qa h2{font-size:clamp(21px,3vw,28px);max-width:none}.interview-qa .prose{margin-top:14px;max-width:none}.interview-qa .prose p{margin:0 0 14px;line-height:1.78;color:var(--ink-2)}
.interview-faq{margin:54px 0}.interview-faq>h2{margin-bottom:18px}.interview-faq .faq-answer{border-top:1px solid var(--line);padding:0}.interview-faq .faq-answer:last-child{border-bottom:1px solid var(--line)}.interview-faq summary{padding:18px 2px;font-weight:800;cursor:pointer}.interview-faq details>div{padding:0 2px 18px;color:var(--ink-2)}
.interview-footer{margin-top:22px}.interview-footer h2{font-size:21px}
@media(max-width:800px){.featured-topics>.grid{grid-template-columns:1fr}.interview-facts dl{grid-template-columns:repeat(2,minmax(0,1fr))}.interview-guide-grid{grid-template-columns:1fr}}
@media(max-width:700px){.featured-grid{grid-template-columns:1fr}.interview-note{padding:17px 18px}.interview-qa>section{padding:28px 0}.interview-facts{padding:20px}.interview-facts dl{grid-template-columns:1fr}.interview-facts dl>div{min-height:auto}.interview-section-heading{display:block}.verified-date{margin-top:8px}.featured-card-media{margin:-22px -22px 6px}}
.award-wall{display:flex;flex-wrap:wrap;gap:18px;margin:22px 0 6px}
.award-badge{width:154px;min-height:154px;flex:0 0 154px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px 14px;border:2px solid var(--gold);border-radius:50%;background:radial-gradient(circle at 50% 32%,var(--surface),var(--sunk));color:var(--ink);box-shadow:inset 0 0 0 5px var(--surface),inset 0 0 0 6px color-mix(in srgb,var(--gold) 45%,transparent)}
.award-badge:hover{text-decoration:none;transform:translateY(-2px);box-shadow:inset 0 0 0 5px var(--surface),inset 0 0 0 6px var(--gold),var(--shadow-hover)}
.award-badge .award-brand{font:800 9px/1.2 'Manrope',sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3)}
.award-badge strong{display:block;margin:8px 0 5px;font-family:'DM Serif Display',Georgia,serif;font-size:18px;font-weight:400;line-height:1.05;color:var(--ink)}
.award-badge .award-place{font:800 12px/1.2 'IBM Plex Mono',monospace;color:var(--accent)}
.award-badge .award-marina{display:-webkit-box;margin-top:6px;max-width:118px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:var(--ink-2);font-size:9.5px;font-weight:700;line-height:1.2}
.award-badge.first{background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--gold) 22%,var(--surface)),var(--surface));border-color:var(--gold)}
.mini-awards{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mini-award{display:inline-flex;align-items:center;min-height:22px;padding:2px 7px;border:1px solid color-mix(in srgb,var(--gold) 55%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--gold) 10%,var(--surface));color:var(--ink-2);font-size:10px;font-weight:800;line-height:1.2;letter-spacing:.02em}
.mini-award:hover{text-decoration:none;border-color:var(--gold);color:var(--ink)}
.award-method{margin-top:24px;border-left:3px solid var(--gold)}
.editorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}
.editorial-card{position:relative;min-height:390px;border-radius:18px;overflow:hidden;display:flex;align-items:flex-end;border:1px solid rgba(255,255,255,.22);color:#fff;background:#0B1F3A;isolation:isolate}
.editorial-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .35s ease}
.editorial-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(4,15,27,.92) 0%,rgba(4,15,27,.12) 72%)}
.editorial-card>span{display:block;padding:26px;width:100%}
.editorial-card small{display:block;color:#B9D8EF;font-size:11px;font-weight:800;letter-spacing:1.25px;text-transform:uppercase;margin-bottom:7px}
.editorial-card strong{display:block;font-family:'DM Serif Display',Georgia,serif;font-size:clamp(24px,3vw,32px);font-weight:400;line-height:1.12}
.editorial-card em{display:block;max-width:46ch;margin-top:8px;color:#D8E5EE;font-size:14px;font-style:normal}
.editorial-card:hover{text-decoration:none;color:#fff}
.editorial-card:hover img{transform:scale(1.025)}
.editorial-card:focus-visible{outline-color:var(--accent)}
.image-note{color:var(--ink-3);font-size:12px;margin:12px 0 0}
.feature-media{margin:26px 0 30px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--sunk)}
.feature-media img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}
.feature-media figcaption{padding:10px 14px;color:var(--ink-3);font-size:12.5px;border-top:1px solid var(--line)}
.profile-media{position:relative;margin:26px 0 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--sunk)}
.profile-media img{display:block;width:100%;height:clamp(260px,46vw,520px);object-fit:cover}
.profile-media figcaption{padding:10px 14px;color:var(--ink-3);font-size:12.5px;border-top:1px solid var(--line);background:var(--surface)}
.verified-media::before{content:'Verified image';position:absolute;top:14px;left:14px;z-index:1;padding:6px 9px;border-radius:999px;background:rgba(6,30,48,.88);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.profile-title{display:flex;align-items:center;gap:18px}.profile-title>div{min-width:0}.profile-title .label{margin-bottom:6px}
.marina-logo{width:96px;height:72px;object-fit:contain;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff;flex:0 0 auto}
.profile-summary{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(190px,.4fr);gap:28px;align-items:center}
.profile-status{padding:18px;border-radius:13px;background:var(--accent-wash);color:var(--accent)}
.profile-status strong,.profile-status span{display:block}.profile-status strong{font-size:15px}.profile-status span{margin-top:5px;font-size:12.5px;line-height:1.45}
.action-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.cta-small{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:10px;background:var(--navy);border:1px solid var(--navy);color:var(--on-navy);font-size:14px;font-weight:800}
.cta-small:hover{background:var(--accent);border-color:var(--accent);color:#fff;text-decoration:none}
.card-kicker{display:block;margin-bottom:8px;color:var(--accent);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.distribution{display:grid;gap:12px;margin-top:24px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.distribution-row{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(120px,1.6fr) 40px;align-items:center;gap:14px;font-size:13.5px}
.distribution-row>a{font-weight:750;color:var(--ink)}
.distribution-row>b{text-align:right;font-variant-numeric:tabular-nums}
.distribution-track{height:10px;border-radius:999px;background:var(--sunk);overflow:hidden}
.distribution-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#5eaad7);min-width:5px}
.decision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.decision-card{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--ink)}
.decision-card:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-1px);box-shadow:0 9px 26px rgba(11,31,58,.08)}
.decision-card .decision-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--accent-wash);color:var(--accent);font:800 18px/1 'IBM Plex Mono',monospace}
.decision-card strong{display:block;font-size:16px}.decision-card span:last-child{display:block;margin-top:4px;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.score-story{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:38px;align-items:center}
.weight-chart{display:grid;gap:11px;margin:0;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.weight-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(130px,1.35fr) 40px;gap:12px;align-items:center;font-size:13px}
.weight-row span:first-child{font-weight:700;color:var(--ink-2)}
.weight-track{height:10px;border-radius:999px;background:var(--sunk);overflow:hidden}
.weight-track i{display:block;height:100%;border-radius:inherit;background:var(--accent)}
.weight-row:first-child .weight-track i{background:var(--gold)}
.weight-row b{text-align:right;font-variant-numeric:tabular-nums}

.resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:22px}
.resource-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;color:inherit}
.resource-card:hover{border-color:var(--accent);text-decoration:none;box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.resource-card small{display:block;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:7px}
.resource-card strong{display:block;font-size:16px;color:var(--ink)}
.resource-card span{display:block;color:var(--ink-2);font-size:13.5px;margin-top:6px}
.outbound::after{content:' ↗';font-weight:700}

.contact-form{display:grid;gap:16px;margin-top:22px}
.contact-form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.contact-form label{display:grid;gap:6px;color:var(--ink-2);font-size:13px;font-weight:700}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;padding:11px 13px}
.contact-form input,.contact-form select{min-height:48px}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form button{justify-self:start;min-height:48px;padding:0 20px;border:0;border-radius:10px;background:var(--navy);color:var(--on-navy);font:700 15px/1 'Manrope',sans-serif;cursor:pointer}
.contact-form button:hover{background:var(--accent)}

/* ------------------------------------------------------------------ tables
   The ranking is the product, so the table is treated as a data grid rather
   than a document table: tabular numerals, hairline separators, a sticky
   header on long lists, and state on every row.                          */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.scrollx table{min-width:760px}
table.rank{
  width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15px;
}
table.rank th,table.rank td{text-align:left;padding:0 16px;border-bottom:1px solid var(--line);vertical-align:middle}
table.rank thead th{
  background:var(--sunk);font-size:11px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;height:40px;white-space:nowrap;
}
/* No sticky header here: the horizontal-scroll wrapper and the table's own
   overflow:hidden (which clips the rounded corners) both become the sticky
   containing block, so the top offset pushes the header INSIDE the table and
   it lands on row 2. Correctness beats the convenience. */
table.rank tbody td{height:62px}
table.rank tbody tr:last-child td{border-bottom:0}
table.rank tbody tr{position:relative}
table.rank tbody tr:hover{background:var(--accent-wash)}
table.rank tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
table.rank td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.rank td small{color:var(--ink-3)}

.r-name{display:block;font-weight:700;font-size:15.5px;letter-spacing:-.012em;color:var(--ink)}
tr:hover .r-name{color:var(--accent)}
.r-sub{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.r-score{font-family:'DM Serif Display',Georgia,serif;font-size:21px;line-height:1;
         font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
.r-goog{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:13.5px;color:var(--ink-2)}
.r-state{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:12.5px;
         letter-spacing:.4px;color:var(--ink-2)}
.rankno{
  display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 7px;border-radius:7px;
  background:var(--sunk);color:var(--ink-2);font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;border:1px solid var(--line);
}
.rankno.top{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
.rankno.lead{background:var(--gold);color:var(--bg);border-color:var(--gold)}

/* ------------------------------------------------------- pills, bars, facts */
.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;border:1px solid var(--line);background:var(--idle-bg);color:var(--idle)}
.bar{height:8px;border-radius:var(--r-pill);background:var(--sunk);overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;border-radius:var(--r-pill)}
.catrow{padding:15px 0;border-bottom:1px solid var(--line)}
.catrow:last-child{border-bottom:0}
.catrow .top{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.catrow b{font-size:15px}
.catrow em{font-style:normal;color:var(--ink-2);font-size:13.5px;font-variant-numeric:tabular-nums}
.catrow small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:5px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.panel+.panel{margin-top:16px}
.marina-feature{max-width:1180px;margin:0 auto}
.profile-wrap{max-width:1240px}
.profile-title h1{margin:0}
.profile-nav{display:flex;flex-wrap:wrap;gap:24px;border-bottom:1px solid var(--line);padding:4px 0 18px;margin-bottom:26px;font-size:14px;font-weight:700}
.photo-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:205px 205px;gap:8px;overflow:hidden;border-radius:18px;background:var(--surface)}
.photo-tile{position:relative;display:block;padding:0;border:0;cursor:zoom-in;background:var(--surface);overflow:hidden}
.photo-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.photo-tile:hover img{transform:scale(1.025)}
.photo-tile-0{grid-row:span 2}
.photo-tile:only-child{grid-column:1/-1}
.photo-tile-1:last-child{grid-row:span 2}
.photo-count{position:absolute;bottom:16px;left:16px;border-radius:8px;background:#fff;color:#112b3c;padding:10px 14px;font-size:13px;font-weight:700}
.photo-credit{font-size:12px;color:var(--ink-3);margin:8px 0 24px}
.profile-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);background:var(--line);border-radius:14px;overflow:hidden;margin:24px 0 36px}
.profile-highlights>div{background:var(--surface);padding:18px 20px}
.profile-highlights dt,.facility-grid dt{color:var(--ink-2);font-size:13px;margin-bottom:5px}
.profile-highlights dd,.facility-grid dd{margin:0;font-weight:650}
.profile-columns{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:56px;align-items:start}
.profile-main{min-width:0}.profile-main .profile-copy{margin:0 0 36px;max-width:none}
.profile-facilities,.profile-services{border-top:1px solid var(--line);padding:28px 0;scroll-margin-top:100px}
.facility-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.facility-grid>div{border:1px solid var(--line);border-radius:10px;padding:14px}
.profile-services ul{columns:2;padding-left:20px}.profile-services li{margin-bottom:8px;break-inside:avoid}
.visit-card{position:sticky;top:96px;padding:24px;border:1px solid var(--line);background:var(--surface);border-radius:16px;scroll-margin-top:100px}
.visit-card h2{font-size:23px;line-height:1.3;margin:8px 0 20px}.visit-card address{font-style:normal;line-height:1.7;font-size:14px}
.visit-card .muted{font-size:13px;line-height:1.6}.visit-actions{display:grid;gap:10px;margin:20px 0}.visit-actions .chip{justify-content:center;text-align:center;overflow-wrap:anywhere}
#overview,#category-places{scroll-margin-top:100px}
.gallery-open{overflow:hidden}.photo-dialog{width:min(1100px,96vw);max-height:96vh;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink)}
.photo-dialog::backdrop{background:rgba(0,0,0,.88)}.photo-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.photo-dialog-head form{display:flex}.photo-dialog figure{margin:12px 0}.photo-dialog figure>img{display:block;width:100%;height:min(62vh,680px);object-fit:contain;background:#07131b;border-radius:10px}.photo-dialog figcaption{font-size:13px;min-height:1.4em;margin-top:10px}.photo-controls{display:flex;align-items:center;justify-content:space-between;gap:8px}.photo-controls button{cursor:pointer}.photo-thumbs{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain;padding:12px 2px 4px;scrollbar-width:thin}.photo-thumbs button{flex:0 0 92px;height:64px;padding:2px;border:2px solid transparent;border-radius:9px;background:transparent;cursor:pointer}.photo-thumbs button[aria-current]{border-color:var(--accent)}.photo-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:5px}.photo-help{text-align:center;font-size:12px;color:var(--ink-3);margin:8px 0 0}
@media(max-width:800px){.profile-columns{grid-template-columns:1fr;gap:28px}.visit-card{position:static}.photo-grid{grid-template-rows:130px 130px}.profile-highlights>div{padding:14px}.profile-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-nav{gap:18px}}
@media(max-width:480px){.photo-grid{grid-template-columns:1fr 1fr;grid-template-rows:240px 90px}.photo-tile-0{grid-column:1/-1;grid-row:1}.photo-tile:only-child{grid-row:1/-1}.photo-tile-1:last-child{grid-row:2;grid-column:1/-1}.facility-grid{grid-template-columns:1fr}.profile-services ul{columns:1}.profile-nav{gap:14px;font-size:13px}.photo-dialog{padding:10px}.photo-dialog figure>img{height:54vh}.photo-thumbs button{flex-basis:72px;height:52px}.photo-help{display:none}}
.profile-standfirst{font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.5;color:var(--ink-2);max-width:48ch;margin:12px 0 28px}
.profile-copy{max-width:72ch;margin:32px auto;line-height:1.85}
.profile-copy h2{font-size:clamp(1.4rem,2.5vw,1.85rem);margin:32px 0 12px}
.profile-copy p{max-width:72ch}.profile-copy p+p{margin-top:1.15rem}
.profile-copy section+section{border-top:1px solid var(--line);margin-top:34px;padding-top:2px}
.profile-copy ul{display:grid;gap:9px;margin:14px 0 0;padding-left:22px}.profile-copy li{padding-left:4px}
.profile-contact{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.profile-disclosure{border-top:1px solid var(--line);padding:18px 0}
.profile-disclosure summary{cursor:pointer;font-weight:700;font-size:1.05rem}
.profile-disclosure summary span{color:var(--ink-2);font-weight:400}
.profile-disclosure li{margin:10px 0}
.profile-disclosure tr:target{background:var(--accent-wash);scroll-margin-top:90px}
.ranking-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);gap:28px;align-items:start;margin-top:24px}
.ranking-intro details{margin:0;background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.ranking-intro summary{font-weight:800;color:var(--accent);cursor:pointer}
.ranking-intro details p:last-child{margin-bottom:0}
.editorial-ranking{list-style:none;padding:0;margin:28px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.editorial-ranking>li{min-width:0}
.editorial-ranking>li:first-child{grid-column:1/-1}
.ranking-card{height:100%;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 0 rgba(11,31,58,.04);display:grid;grid-template-rows:220px 1fr}
.editorial-ranking>li:first-child .ranking-card{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);grid-template-rows:minmax(330px,auto)}
.ranking-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.ranking-card-media{display:block;position:relative;overflow:hidden;background:var(--sunk);min-width:0}
.ranking-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.ranking-card:hover .ranking-card-media img{transform:scale(1.025)}
.ranking-card-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-3);font-size:13px;font-weight:700;background:linear-gradient(145deg,var(--sunk),var(--accent-wash))}
.ranking-placeholder-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);font-size:24px;color:var(--accent)}
.ranking-card-body{display:flex;flex-direction:column;align-items:flex-start;padding:22px;min-width:0}
.ranking-card-head{display:flex;align-items:flex-start;justify-content:space-between;width:100%;gap:14px;min-height:42px}
.ranking-place{display:inline-flex;align-items:center;justify-content:center;min-width:45px;height:36px;padding:0 11px;border-radius:999px;background:var(--navy);color:var(--on-navy);font:800 14px/1 'IBM Plex Mono',ui-monospace,monospace}
.ranking-logo{width:86px;height:52px;object-fit:contain;padding:5px;border:1px solid var(--line);border-radius:9px;background:#fff}
.ranking-location{margin:14px 0 5px;color:var(--ink-3);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ranking-card h3{font-size:clamp(23px,2.5vw,30px);overflow-wrap:anywhere}
.ranking-card h3 a{color:var(--ink)}
.ranking-card h3 a:hover{color:var(--accent)}
.ranking-rationale{margin:13px 0 16px;color:var(--ink-2);line-height:1.55}
.ranking-facts{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:7px}
.ranking-facts li{padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:var(--sunk);color:var(--ink-2);font-size:12px;font-weight:700}
.ranking-profile-link{margin-top:auto;font-weight:800}
.ranking-note{max-width:76ch;color:var(--ink-2);font-size:14px}

/* ------------------------------------------------------------------ search */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.searchbox{display:flex;gap:10px;margin-top:22px}
.searchbox input{
  flex:1 1 auto;min-width:0;height:52px;padding:0 18px;border-radius:12px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:16.5px;
}
.searchbox input::placeholder{color:var(--ink-3)}
.searchbox input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.searchbox button{
  flex:0 0 auto;height:52px;padding:0 22px;border-radius:12px;border:1px solid var(--navy);
  background:var(--navy);color:var(--on-navy);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
}
.searchbox button:hover{background:var(--accent);border-color:var(--accent)}
ol.results{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}
ol.results a{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:baseline;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:14px 16px;
  color:inherit;text-decoration:none;
}
ol.results a:hover{border-color:var(--accent);text-decoration:none}
ol.results a:hover b{color:var(--accent)}
ol.results .rk{
  grid-row:span 2;align-self:center;font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--ink-3);background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:4px 8px;white-space:nowrap;
}
ol.results b{font-size:16px;font-weight:700;letter-spacing:-.012em}
ol.results em{font-style:normal;font-size:13.5px;color:var(--ink-2)}
ul.azlist{list-style:none;margin:16px 0 0;padding:0;columns:2;column-gap:36px;font-size:15px}
ul.azlist li{break-inside:avoid;margin:7px 0}
ul.azlist span{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:13px}
@media(max-width:620px){ul.azlist{columns:1}.searchbox{flex-wrap:wrap}.searchbox button{width:100%}}

/* ------------------------------------------------------------- directory */
.directory-map-shell{margin-top:28px;background:linear-gradient(145deg,var(--surface),var(--sunk));border:1px solid var(--line);border-radius:18px;padding:18px 22px}
.directory-map{margin:0;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:26px;align-items:center}
.directory-map svg{display:block;width:100%;height:min(48vw,470px)}
.directory-map figcaption{color:var(--ink-2);font-size:14px}.directory-map figcaption strong{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}
.dm-pin{cursor:pointer}.dm-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2.5}.dm-pin.is-ranked .dm-dot{fill:var(--gold)}.dm-halo{fill:var(--accent);opacity:0;transition:opacity .14s ease}.dm-pin:hover .dm-halo,.dm-pin:focus-visible .dm-halo{opacity:.18}.dm-pin:focus-visible{outline:none}.dm-pin:focus-visible .dm-dot{stroke:var(--ink);stroke-width:4}
.directory-filters{display:grid;grid-template-columns:minmax(240px,1.4fr) minmax(180px,.6fr);gap:16px 20px;margin-top:24px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.directory-filters label,.compare-picker label{display:grid;gap:6px;color:var(--ink-2);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.directory-filters input[type=search],.directory-filters select,.compare-picker select{width:100%;height:48px;border:1px solid var(--line-2);border-radius:10px;padding:0 13px;background:var(--bg);color:var(--ink);font:500 16px/1.2 'Manrope',sans-serif;text-transform:none;letter-spacing:0}
.directory-filters fieldset{grid-column:1/-1;border:0;padding:0;margin:2px 0}.directory-filters legend{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.filter-checks{display:flex;flex-wrap:wrap;gap:8px}.filter-checks label{display:flex;flex-direction:row;align-items:center;gap:8px;min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:13px;letter-spacing:0;text-transform:none;cursor:pointer}.filter-checks input{width:18px;height:18px;accent-color:var(--accent)}
.filter-actions{grid-column:1/-1;display:flex;gap:10px}.filter-actions button,.load-more{min-height:46px;padding:0 18px;border:1px solid var(--navy);border-radius:10px;background:var(--navy);color:var(--on-navy);font:800 14px/1 'Manrope',sans-serif;cursor:pointer}.filter-actions .secondary{background:transparent;color:var(--ink);border-color:var(--line-2)}
.directory-results-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:40px}.directory-results-head h2{font-size:27px}.directory-results-head p{margin:0;color:var(--ink-2);font-size:14px}
.directory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.directory-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 1px 0 rgba(11,31,58,.03);transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}.directory-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-hover)}
.directory-card-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sunk)}.directory-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}.directory-card:hover .directory-card-media img{transform:scale(1.025)}
.directory-card-body{padding:15px}.directory-card-meta{display:flex;justify-content:space-between;gap:12px;color:var(--accent);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.directory-card h3{font-family:'Manrope',sans-serif;font-size:17px;font-weight:800;line-height:1.25;margin-top:8px}.directory-card h3 a{color:var(--ink)}.directory-card p{margin:5px 0 0;color:var(--ink-2);font-size:13.5px}.fact-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.fact-chips span{padding:3px 7px;border-radius:5px;background:var(--sunk);color:var(--ink-2);font-size:10.5px;font-weight:700}
.load-more{display:block;margin:24px auto 0}.load-more[hidden]{display:none}.directory-help{margin-top:36px}.directory-help h2{font-size:22px}

/* --------------------------------------------------- ranking + comparison */
.ranking-overview{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(360px,1.3fr);gap:32px;align-items:center}.ranking-overview h2{font-size:24px}
.score-chart{display:grid;gap:7px}.score-chart-row a{display:flex;justify-content:space-between;gap:12px;color:var(--ink-2);font-size:12px;font-weight:700}.score-chart-row a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-chart-row a b{color:var(--ink);font-variant-numeric:tabular-nums}.score-chart-row>div{height:5px;margin-top:2px;border-radius:99px;background:var(--sunk);overflow:hidden}.score-chart-row i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.compare-picker{display:grid;grid-template-columns:minmax(200px,.8fr) repeat(2,minmax(190px,.6fr));gap:18px 22px;align-items:end;margin-top:24px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}.compare-picker h2{font-size:23px}.compare-output{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px}.compare-names{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;text-align:center}.compare-names a{font-size:16px;font-weight:800}.compare-names span{color:var(--ink-3);font-size:12px;text-transform:uppercase}.compare-facts{display:grid;gap:1px;margin-top:12px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}.compare-facts>div{display:grid;grid-template-columns:minmax(140px,1fr) repeat(2,minmax(100px,.7fr));gap:12px;padding:9px 12px;background:var(--bg);font-size:13px}.compare-facts span{color:var(--ink-2)}.compare-facts b{text-align:center;font-variant-numeric:tabular-nums}
.mobile-actions{display:none}

/* The extractable answer: first thing on the page after the question, so an
   answer engine lifting one block lifts the right one. */
.answer{background:var(--accent-wash);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
        padding:18px 22px;margin:22px 0 0}
.answer p:last-child{margin:0;font-size:17px;color:var(--ink);line-height:1.6}
.answer .label{margin-bottom:8px;color:var(--accent)}
ol.steps{counter-reset:s;list-style:none;margin:16px 0 0;padding:0;display:grid;gap:2px}
/* Exactly two grid children: the ::before counter and one wrapper. With the
   <b> and <span> as separate children the text fell into the 34px counter
   column and wrapped one word per line. */
ol.steps li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;
            padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
ol.steps li:last-child{border-bottom:0}
ol.steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;
  border-radius:8px;background:var(--sunk);border:1px solid var(--line);color:var(--ink-2);
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:13px;font-weight:600}
ol.steps li b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px}
ol.steps li span{color:var(--ink-2);font-size:15px}
ul.asklist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
ul.asklist li{background:var(--surface);border:1px solid var(--line);border-radius:9px;
              padding:12px 15px;font-size:15px;color:var(--ink)}
ul.asklist li::before{content:"“";color:var(--ink-3);font-weight:700;margin-right:2px}
ul.asklist li::after{content:"”";color:var(--ink-3);font-weight:700;margin-left:2px}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 26px;margin:14px 0 0}
.contact>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.contact dt{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3)}
.contact dd{margin:0;font-size:16px;font-weight:700;overflow-wrap:anywhere}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:8px;margin-top:8px}
.fact{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:var(--r-badge);font-size:13.5px}
.fact span:first-child{opacity:.85;font-weight:600}
.fact span:last-child{font-weight:800}

ul.plain{margin:12px 0 0;padding-left:18px;color:var(--ink-2);font-size:14.5px}
ul.plain li{margin:6px 0}
.prose p{color:var(--ink-2);font-size:16px}
.prose h2{margin-top:36px;font-size:clamp(21px,2.6vw,26px)}
.prose h3{font-size:19px;margin-top:26px}
.prose strong{color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);font-size:14px;font-weight:600;color:var(--ink)}
a.chip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
a.chip[aria-current=page]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.hero .chip{background:transparent;border-color:rgba(255,255,255,.32);color:var(--on-navy)}
.hero a.chip:hover{background:rgba(255,255,255,.12);border-color:var(--on-navy);color:var(--on-navy)}

/* ------------------------------------------------------------------ footer */
footer.site{background:var(--band);color:var(--on-navy-2);padding:48px 0 36px;margin-top:64px;font-size:14.5px}
footer.site a{color:var(--on-navy-2)}
footer.site a:hover{color:var(--on-navy)}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px}
footer.site h4{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--on-navy-3);margin:0 0 12px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:8px 0}
footer.site p{margin:0;max-width:34ch}
.legal{border-top:1px solid rgba(255,255,255,.14);margin-top:32px;padding-top:20px;color:var(--on-navy-2);font-size:13px}
.footer-powered{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--on-navy)}
.footer-powered img{width:28px;height:28px;background:#fff;border-radius:8px;padding:3px}
.yousail-corner{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:18;display:flex;align-items:center;gap:8px;padding:7px 11px 7px 7px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 8px 28px rgba(11,31,58,.18);color:var(--ink-2);font-size:10px;font-weight:700;line-height:1.15;pointer-events:none;backdrop-filter:blur(12px)}
.yousail-corner img{width:30px;height:30px}.yousail-corner strong{display:block;color:var(--ink);font-size:12px;letter-spacing:.05em}

/* ------------------------------------------------------------ evidence ---
   The verified / not-verified split is the site's whole proposition, so it
   gets a component rather than a sentence.                                */
.evidence{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:6px}
.ev-track{display:flex;gap:3px;flex:1 1 240px;min-width:200px}
.ev-seg{height:12px;flex:1;border-radius:2px;background:var(--idle-bg);border:1px solid var(--line)}
.ev-seg.is-on{background:var(--pos);border-color:var(--pos)}
.ev-read{font-size:13.5px;color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ev-read b{color:var(--ink);font-weight:800}

/* ---------------------------------------------------------------- map ---
   Inline SVG, no client JS. Pins are links, so they are keyboard reachable
   and get the same focus treatment as everything else.                    */
.regionmap{margin:28px 0 0;padding:0}
.regionmap svg{width:100%;height:auto;display:block;overflow:visible}
.rm-land{fill:var(--sunk);stroke:var(--line-2);stroke-width:1.1;stroke-linejoin:round}
.rm-leader{stroke:var(--line-2);stroke-width:1.2;transition:stroke .16s ease}
.rm-halo{fill:var(--accent);opacity:0;transition:opacity .16s ease}
.rm-dot{fill:var(--accent);stroke:var(--bg);stroke-width:2;transition:fill .16s ease,r .16s ease}
.rm-count{fill:var(--ink-3);font-size:12.5px;font-weight:800}
.rm-name{fill:var(--ink);font-size:14.5px;font-weight:700;font-family:'Manrope',sans-serif;paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.rm-pin{cursor:pointer}
.rm-pin:hover .rm-halo,.rm-pin:focus-visible .rm-halo{opacity:.18}
.rm-pin:hover .rm-dot,.rm-pin:focus-visible .rm-dot{fill:var(--accent-2);r:9}
.rm-pin:hover .rm-name,.rm-pin:focus-visible .rm-name{fill:var(--accent)}
.rm-pin:hover .rm-count,.rm-pin:focus-visible .rm-count{fill:var(--accent)}
.rm-pin:hover .rm-leader,.rm-pin:focus-visible .rm-leader{stroke:var(--accent)}
.rm-pin:focus-visible{outline:none}
.rm-pin:focus-visible .rm-dot{stroke:var(--accent);stroke-width:3.5}
.locator{margin:0;padding:0}
.locator svg{width:100%;height:auto;display:block}
.locator .rm-land{stroke-width:3}
.loc-ring{fill:none;stroke:var(--accent);stroke-width:4;opacity:.4}
.loc-dot{fill:var(--accent);stroke:var(--bg);stroke-width:4}
.locator figcaption{color:var(--ink-2);font-size:13.5px;font-weight:700;margin-top:8px;text-align:center}
.profilehead{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start}
@media(max-width:820px){.profilehead{grid-template-columns:minmax(0,1fr)}.profilehead .locator{max-width:320px;margin:0 auto}}
.regionmap figcaption{color:var(--ink-3);font-size:13.5px;margin-top:14px;max-width:70ch}
.regionmap figcaption strong{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.rm-halo,.rm-dot{transition:none}}
@media(max-width:620px){.rm-name{font-size:18px}.rm-count{font-size:16px}.rm-dot{r:8}}

/* Visible only when focused, so keyboard users can jump the nav on every page. */
.skip{
  position:absolute;left:12px;top:-60px;z-index:60;
  background:var(--surface);color:var(--accent);border:1px solid var(--accent);
  padding:11px 16px;border-radius:9px;font-weight:700;font-size:14.5px;
}
.skip:focus{top:12px;text-decoration:none}
main:focus{outline:none}

@media(max-width:760px){
  /* Apple's mobile default target is 44x44; desktop guidance is 28. Chips sit
     at 40 on pointer devices and lift to 44 where fingers are the input.     */
  .chip{min-height:44px;padding:0 17px}

  /* Collapse the full navigation on phones so content begins promptly while
     every destination remains available through a familiar 44px menu.      */
  header.site .wrap{flex-wrap:wrap;gap:0;min-height:60px;padding-top:8px;padding-bottom:8px;align-items:center}
  .brand{min-height:44px}
  .nav-toggle{display:inline-flex}
  nav.main{
    width:100%;margin:8px 0 2px;padding:8px;background:var(--surface);border:1px solid var(--line);
    border-radius:12px;box-shadow:0 14px 34px rgba(11,31,58,.15);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
  }
  .js nav.main{display:none}
  .js nav.main.is-open{display:grid}
  nav.main a{min-height:44px;padding:0 12px}

  /* The full disclaimer wrapped to three lines on a phone. Keep the claim
     that matters and drop the explanation, which lives on /methodology/. */
  .banner-more{display:none}
  .banner{font-size:12.5px;padding:8px 16px}

  /* Let a long marina name use two lines rather than clipping mid-word. */
  .board .bnm{white-space:normal;line-height:1.25}
  .board a{grid-template-columns:26px minmax(0,1fr) auto;gap:10px;padding:12px 12px}
  .board .bs{font-size:20px}
  .hero{padding:52px 0 46px;background-position:61% center}
  .hero::before{background:linear-gradient(90deg,rgba(5,16,28,.96),rgba(5,16,28,.78))}
  .hero-actions .cta,.hero-actions .chip{flex:1 1 auto}
  .ranking-intro{grid-template-columns:1fr;gap:18px}
  .editorial-ranking{grid-template-columns:1fr;gap:16px}
  .editorial-ranking>li:first-child{grid-column:auto}
  .editorial-ranking>li:first-child .ranking-card,.ranking-card{grid-template-columns:1fr;grid-template-rows:210px 1fr}
  .ranking-card-body{padding:19px}
  .ranking-card h3{font-size:24px}
  .editorial-grid{grid-template-columns:1fr}
  .editorial-card{min-height:330px}
  .score-story{grid-template-columns:1fr;gap:22px}
  .decision-grid{grid-template-columns:1fr}
  .award-wall{gap:12px}.award-badge{width:132px;min-height:132px;flex-basis:132px;padding:14px 10px}.award-badge strong{font-size:16px}
  .distribution-row{grid-template-columns:minmax(112px,.9fr) minmax(80px,1.2fr) 34px;gap:9px}
  .contact-form .two{grid-template-columns:1fr}
  .profile-title{align-items:flex-start}.marina-logo{width:76px;height:62px}
  .profile-summary{grid-template-columns:1fr;gap:18px}
  .profile-media img{height:250px}
  .action-row>*{flex:1 1 100%;text-align:center;justify-content:center}
  .yousail-corner{display:none}
  .directory-map{grid-template-columns:1fr}.directory-map svg{height:auto}.directory-filters{grid-template-columns:1fr;padding:16px}.directory-filters>*{grid-column:1}.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.directory-results-head{align-items:flex-start;flex-direction:column;gap:4px}.ranking-overview{grid-template-columns:1fr}.compare-picker{grid-template-columns:1fr}.compare-picker>*{grid-column:1}.compare-facts>div{grid-template-columns:minmax(110px,1fr) repeat(2,minmax(72px,.7fr));gap:7px}
  .mobile-actions{position:fixed;display:flex;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:30;padding:6px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 8px 30px rgba(0,0,0,.22);backdrop-filter:blur(14px)}.mobile-actions a{display:flex;align-items:center;justify-content:center;flex:1;min-height:44px;padding:0 10px;border-radius:9px;color:var(--ink);font-size:13px;font-weight:800}.mobile-actions a:first-child{background:var(--navy);color:var(--on-navy)}body:has(.mobile-actions){padding-bottom:72px}
  .sec{padding:36px 0}
  footer.site{margin-top:44px}
  table.rank th,table.rank td{padding:11px 12px}
}
@media(max-width:540px){.directory-grid{grid-template-columns:1fr}.directory-map-shell{padding:12px}.filter-actions{flex-direction:column}.filter-actions button{width:100%}.compare-names{grid-template-columns:1fr}.compare-names span{font-size:10px}}
@media(max-width:420px){.brand b{font-size:20px}.powered-top{display:none}.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}.weight-row{grid-template-columns:minmax(105px,1fr) minmax(80px,1fr) 34px}}

.ranking-overview>*{min-width:0}
.score-chart{grid-template-columns:minmax(0,1fr)}
.compare-picker>*{min-width:0}
.compare-picker select{min-width:0;max-width:100%;width:100%}
@media(max-width:540px){.compare-picker{grid-template-columns:minmax(0,1fr)}}
.score-chart-row a span{min-width:0}
.byline{color:var(--ink-3);font-size:14px;margin:16px 0}
.faq-answer{border-bottom:1px solid var(--line);padding:12px 0}
.faq-answer summary{min-height:44px;padding:10px 28px 10px 0;cursor:pointer;font-weight:700;font-size:18px}
.faq-answer>div{max-width:75ch;padding:0 0 16px}
.related-rail{display:flex;gap:16px;overflow-x:auto;padding:8px 2px 20px;scroll-snap-type:x proximity}
.related-rail>.card{flex:0 0 min(85vw,360px);scroll-snap-align:start}
.related-rail:empty{display:none}
.help-note summary{cursor:pointer;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
.help-note p{max-width:65ch;font-size:14px;font-weight:400;white-space:normal}
@media(max-width:420px){.powered-top{display:block;left:64px;font-size:9px}.brand b{font-size:19px}}

/* Marina profiles get printed and taken to the boat. Drop the chrome, keep the
   facts, and print link targets so a paper copy stays useful.               */
@media print{
  :root{--bg:#fff;--surface:#fff;--sunk:#fff;--ink:#000;--ink-2:#333;--ink-3:#444;--line:#bbb;--accent:#000;--band:#fff;--on-navy:#000;--on-navy-2:#333}
  header.site,footer.site,.banner,.chips,.crumbs,.skip{display:none!important}
  body{font-size:11pt}
  a{color:#000;text-decoration:underline}
  .prose a[href^="/"]::after,.sub a[href^="/"]::after{content:" (topmarinas.com.au" attr(href) ")";font-size:9pt;color:#555}
  .panel,.card,.stat,table.rank{border:1px solid #bbb!important;box-shadow:none!important;break-inside:avoid}
  .sec{padding:12pt 0}
  h1,h2,h3{break-after:avoid}
  .scrollx{overflow:visible}
  .scrollx table{min-width:0}
}
nav.main a.nav-featured,nav.main a.nav-featured[aria-current=page]{color:#FFE083;background:#12222F;font-weight:800}
nav.main a.nav-featured:hover{color:#FFF2C5;background:#253E50}
.home-hero{padding:38px 0 36px}
.home-hero h1{font-size:clamp(32px,4vw,48px);max-width:850px}
.home-hero p.lede{max-width:70ch;margin-top:14px;font-size:17px}
.home-hero .hero-kicker{margin-bottom:10px}
.home-hero .hero-actions{margin-top:20px}
.hero-actions .featured-cta{background:#FFE083;border-color:#FFE083;color:#12222F}
.hero-actions .featured-cta:hover{background:#FFF2C5;border-color:#FFF2C5}
.featured-home{padding:36px 0 40px}
.featured-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.featured-heading h2{margin:0}
.featured-home .sub{margin-top:12px;max-width:76ch}
.marina-logo-strip{padding:36px 0;background:var(--surface);border-bottom:1px solid var(--line)}
.marina-logo-strip h2{font-size:26px;margin-bottom:6px}
.marina-logo-strip p{color:var(--ink-2);margin:0 0 12px}
.logo-pause{accent-color:var(--accent);width:18px;height:18px;vertical-align:middle}
.logo-pause-label{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.marina-logo-viewport{overflow:hidden;margin:10px 0 18px}
.marina-logo-track{display:flex;width:max-content;animation:marina-logos 65s linear infinite}
.marina-logo-group{display:flex;gap:18px;padding:4px 18px 4px 0}
.marina-logo-tile{display:flex;align-items:center;justify-content:center;width:180px;height:96px;padding:12px;background:white;border:1px solid #DDE3E8;border-radius:12px;flex:none}
.marina-logo-tile img{max-width:100%;height:70px;object-fit:contain}
.marina-logo-tile:hover{border-color:var(--accent)}
.logo-pause:checked~.marina-logo-viewport .marina-logo-track,.marina-logo-viewport:hover .marina-logo-track,.marina-logo-viewport:focus-within .marina-logo-track{animation-play-state:paused}
.marina-logo-viewport:focus-within{overflow-x:auto}
.logo-directory-link{font-size:14px;font-weight:700}
@keyframes marina-logos{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marina-logo-viewport{overflow-x:auto}.marina-logo-group[aria-hidden]{display:none}.logo-pause,.logo-pause-label{display:none}}
@media(max-width:900px) and (min-width:701px){.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.category-image-card{overflow:hidden;padding:22px}
.interview-editorial-image{margin:28px 0}.interview-editorial-image img{display:block;width:100%;max-width:720px;height:auto;border-radius:12px}.interview-editorial-image figcaption{font-size:12px;color:var(--ink-3);margin-top:8px}
.category-card-image{display:block;width:calc(100% + 44px);max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover;margin:-22px -22px 18px}