/* Northport Fishing Charters — the white harbour.
   One ink, three water tints, editorial serif over a humanist sans. The page is a white
   gallery wall; the photographs are the objects hung on it. Nothing bold, nothing bounces,
   nothing glows. Contrast comes from family and size, never from weight. */
:root{
  --ink:#283849; --ink-2:#3e5772; --body:#222; --muted:#565f6b; --muted-2:#6b7480;
  --white:#fff; --frame:#fafafa; --flat:#f4f4f4; --warm:#fdf9f7;
  --powder:#e0ebf4; --powder-ink:#3c5a75;
  --sea:#cfdedb;    --sea-ink:#3e6259;
  --tan:#ddc5b9;    --tan-ink:#6c5a51;
  --coral:#f2ced0;  --coral-ink:#8a4a4f;
  --amber:#f3dfb8;  --amber-ink:#8a5c12;
  --line:#e4e4e4; --line-2:#eeeeee; --star:#c9a54a;
  --serif:"Source Serif 4","Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Figtree","Manrope","DM Sans",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  /* the scripts label things with the old "mono" variable; the new type system has no mono,
     so the request resolves to tracked small caps in the sans and every label updates for free */
  --font-m:var(--sans); --font-d:var(--serif); --font-b:var(--sans); --font-n:var(--sans);
  --gold:var(--ink); --gold-2:#9fb4c8; --navy:var(--ink); --navy-2:var(--ink-2);
  --r-btn:12px; --r-card:16px; --r-panel:22px; --r-media:24px;
  --sh-frame:0 2px 8px rgba(0,0,0,.12),0 0 1px rgba(0,0,0,.08);
  --sh-lift:0 0 .5px rgba(0,0,0,.08),0 16px 32px rgba(0,0,0,.12);
  --sh-panel:0 12px 40px rgba(40,56,73,.06);
  --shadow:var(--sh-frame); --shadow-l:var(--sh-lift);
  --ease:cubic-bezier(.25,.75,0,1);
  --gutter:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-weight:400;color:var(--body);background:var(--white);
  font-size:18px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0 0 .5em;letter-spacing:-.4px;line-height:1.2}
h1{font-size:48px;max-width:572px}
h2{font-size:48px}
h3{font-size:28px;letter-spacing:-.2px}
h1 em,h2 em,h3 em{font-style:italic;color:var(--ink)}
p{margin:0 0 1em}
.lead{font-size:21px;line-height:1.6;max-width:720px;color:var(--body)}
.muted{color:var(--muted)}
.small{font-size:16px;line-height:1.8}
.mono,.kicker{font-family:var(--sans);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.kicker{display:block;margin-bottom:14px}
.kicker.on-dark{color:rgba(255,255,255,.72)}
.wrap{width:min(1370px,100% - 2*var(--gutter));margin-inline:auto}
.wrap-m{width:min(943px,100% - 2*var(--gutter));margin-inline:auto}
.wrap-s{width:min(720px,100% - 2*var(--gutter));margin-inline:auto}
.center{text-align:center}
.center h1,.center h2,.center .lead{margin-inline:auto}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:12px;left:12px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;z-index:200}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--powder)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 32px;
  border-radius:var(--r-btn);font-family:var(--sans);font-size:16px;font-weight:500;line-height:1.2;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:all .15s ease-in;white-space:nowrap}
.btn-gold,.btn-navy{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-gold:hover,.btn-navy:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-ghost,.btn-glass{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover,.btn-glass:hover{opacity:.8}
.btn-sm{padding:12px 24px}
.btn:disabled{opacity:.4;cursor:default}
.tlink{font-size:16px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;
  text-underline-offset:4px;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.tlink:hover{opacity:.75}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}

/* ---------------------------------------------------------------- header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;transition:background .25s ease-in-out}
.site-header.scrolled{background:#fff}
.site-header .wrap{display:flex;align-items:center;min-height:80px;gap:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand-boat{width:auto;height:52px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(40,56,73,.18))}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:"Yellowtail","Brush Script MT",cursive;font-size:30px;color:#B3282D;letter-spacing:0}
.brand-sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px;font-weight:500}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px}
.site-nav a{font-size:16px;font-weight:400;color:var(--ink);text-decoration:none;padding:6px 2px;transition:opacity .15s}
.site-nav a:hover{opacity:.65}
.site-nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.nav-cta a{background:var(--ink);color:#fff!important;padding:12px 24px;border-radius:var(--r-btn);
  font-weight:500;opacity:1!important;text-decoration:none!important;transition:background .15s ease-in}
.nav-cta a:hover{background:var(--ink-2)}
.nav-book{display:none}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;margin-right:-9px}
.nav-toggle span:not(.sr){display:block;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(3){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(4){transform:translateY(-6.5px) rotate(-45deg)}
@media (max-width:1199px){  /* full nav needs ~1175px since Memorials joined it */
  .site-header .wrap{min-height:55px}
  .brand-boat{height:36px}
  .brand-name{font-size:23px}
  .brand-sub{display:none}
  .nav-toggle{display:flex}
  .nav-book{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;margin-right:8px;border-radius:10px;
    background:var(--ink);color:#fff;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
  .bk-page .nav-book{display:none}
  .site-nav ul{position:fixed;inset:55px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--gutter) 24px;transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .25s,transform .25s var(--ease);box-shadow:var(--sh-panel);border-radius:0 0 22px 22px}
  .site-nav ul.open{transform:none;opacity:1;pointer-events:auto}
  .site-nav li a{display:block;padding:14px 4px;font-size:18px}
  .nav-cta{margin-top:10px}
  .nav-cta a{display:block;text-align:center}
}

/* ---------------------------------------------------------------- hero (white) */
.hero{padding:200px 0 0;text-align:center}
.hero h1{margin:0 auto 20px}
.hero .lead{margin:0 auto 32px}
.hero-note{font-size:13.5px;color:var(--muted);margin:16px 0 0}
.hero-note b{color:var(--body);font-weight:500}
/* The signature element: the cinematic clip stays, but as an object on the page — a framed
   print with a caption — rather than a dark backdrop the type has to fight. */
.hero-frame{width:min(1370px,100% - 2*35px);margin:64px auto 0;position:relative;border-radius:var(--r-media);
  overflow:hidden;background:var(--flat);box-shadow:var(--sh-frame);aspect-ratio:16/8.4}
.hero-frame video,.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-frame .hero-poster{position:absolute;inset:0;background:url(hero-poster.jpg?v=e0f72c51) center/cover;transition:opacity 1s var(--ease)}
.hero.playing .hero-frame .hero-poster{opacity:0}
.hero-cap{display:flex;justify-content:space-between;gap:16px;width:min(1370px,100% - 2*35px);margin:14px auto 0;
  font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
@media (max-width:744px){
  .hero{padding-top:120px}
  h1,.hero h1{font-size:36px}
  .hero-frame{width:calc(100% - 2*var(--gutter));aspect-ratio:4/5;margin-top:40px}
  .hero-cap{width:calc(100% - 2*var(--gutter));flex-direction:column;gap:4px}
}

/* ---------------------------------------------------------------- sections */
.section{padding:100px 0}
.section.tight{padding-top:0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 56px}
.sec-head h2{margin-bottom:16px}
.sec-head .lead{margin-inline:auto;color:var(--muted)}
@media (max-width:744px){.section{padding:64px 0}.sec-head{margin-bottom:36px}h2{font-size:36px}}

/* Inset colour panels: colour moments sit inside the page with margins, never edge to edge */
.panel{width:min(1370px,100% - 2*35px);margin-inline:auto;border-radius:var(--r-panel);padding:64px;box-shadow:var(--sh-panel)}
.panel.powder{background:var(--powder);color:var(--powder-ink)}
.panel.sea{background:var(--sea);color:var(--sea-ink)}
.panel.tan{background:var(--tan);color:var(--tan-ink)}
.panel.ink{background:var(--ink);color:#fff}
.panel.ink h2,.panel.ink h3{color:#fff}
.panel.ink .lead,.panel.ink p{color:rgba(255,255,255,.82)}
.panel.ink .btn-ghost{color:#fff;border-color:#fff}
.panel h2{color:inherit}
@media (max-width:744px){.panel{width:calc(100% - 2*var(--gutter));padding:36px 24px;border-radius:18px}}

/* frosted tiles that live inside tinted panels */

/* ---------------------------------------------------------------- carousel (centre-active) */
.carousel{position:relative;overflow:hidden;padding:24px 0 8px}
.car-track{display:flex;align-items:center;gap:24px;will-change:transform;transition:transform .6s var(--ease)}
/* side slides sit slightly smaller but in full colour: faded to 55% they read as greyed-out photos */
/* each slide gets its own compositor layer, so growing into the centre scales the picture that is
   already drawn; without it the browser redrew the photo at the new size and it flashed grey */
.car-item{flex:0 0 min(760px,84vw);transform:scale(.85);transition:transform .6s var(--ease);
  will-change:transform;backface-visibility:hidden}
.car-item.is-active{transform:none}
.frame{border-radius:var(--r-media);overflow:hidden;background:var(--frame);box-shadow:var(--sh-frame);aspect-ratio:16/10}
.frame img{width:100%;height:100%;object-fit:cover}
.car-cap{margin:18px 4px 0;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.car-cap b{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--ink)}
.car-cap span{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.car-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.car-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:#d5d5d5;cursor:pointer;transition:background .25s,transform .25s}
.car-dots button[aria-current]{background:var(--ink);transform:scale(1.25)}
@media (max-width:744px){.car-item{flex-basis:88vw}.car-cap{flex-direction:column;gap:2px}}

/* ---------------------------------------------------------------- offer cards (image left) */
.offers{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;width:min(943px,100%);margin-inline:auto}
.offer{display:flex;gap:20px;align-items:center;background:var(--warm);border-radius:var(--r-card);padding:20px;
  box-shadow:var(--sh-lift);text-decoration:none;color:var(--body);transition:transform .25s var(--ease)}
.offer:hover{transform:translateY(-2px)}
.offer.hot{box-shadow:inset 0 0 0 2px var(--accent),var(--sh-lift)}
.offer img{width:173px;height:130px;object-fit:cover;border-radius:var(--r-card);flex:none}
.offer b{display:block;font-size:18px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:4px;margin-bottom:6px}
.offer span{display:block;font-size:16px;line-height:1.8;color:var(--muted)}
.offer i{display:block;font-style:normal;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:500;margin-top:8px}
@media (max-width:1024px){.offers{grid-template-columns:1fr}}
@media (max-width:520px){.offer{flex-direction:column;align-items:stretch}.offer img{width:100%;height:170px}}

/* ---------------------------------------------------------------- bento (flat feature cards) */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:min(1180px,100%);margin-inline:auto}
.bento .full{grid-column:1/-1}
.feat{background:var(--flat);border-radius:var(--r-panel);padding:40px;display:grid;gap:24px;align-items:center}
.feat.has-media{grid-template-columns:1.1fr 1fr}
.feat.full.has-media{grid-template-columns:1fr 1.15fr}
.feat h3{margin-bottom:12px}
.feat p{font-size:16px;line-height:1.8;color:var(--muted);margin-bottom:18px;max-width:52ch}
.feat .stat{font-family:var(--serif);font-size:76px;line-height:1;color:var(--ink);letter-spacing:-1px;margin:0 0 8px}
.feat .stat small{display:block;font-family:var(--sans);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px;font-weight:500}
.feat figure{margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh-frame)}
.feat figure img{width:100%;height:100%;object-fit:cover}
@media (min-width:1280px){.feat{padding:64px}}
.feat.kids{background:var(--powder)}
.feat.kids p{color:var(--powder-ink)}
.feat.kids .tlink{color:var(--ink)}
@media (min-width:901px){.feat.full.flip{grid-template-columns:1.15fr 1fr}.feat.flip figure{order:-1}}
@media (max-width:900px){.bento{grid-template-columns:1fr}.feat.has-media,.feat.full.has-media{grid-template-columns:1fr}.feat figure{order:-1}}

/* ---------------------------------------------------------------- testimonials */
.testi .car-item{flex-basis:min(560px,84vw)}
.tcard{border-radius:var(--r-panel);padding:40px;min-height:380px;display:flex;flex-direction:column;gap:20px;color:var(--body)}
.tcard.purple{background:#d6d0ed;color:#574f8a}.tcard.tan{background:var(--tan);color:var(--tan-ink)}
.tcard.green{background:var(--sea);color:var(--sea-ink)}.tcard.blue{background:#c8d3dd;color:#3c5a75}
.tcard.coral{background:var(--coral);color:var(--coral-ink)}.tcard.powder{background:var(--powder);color:var(--powder-ink)}
.tcard.sea{background:var(--sea);color:var(--sea-ink)}
.t-who b{display:block;font-family:var(--sans);font-size:19px;font-weight:600;line-height:1.3}
.t-who span{display:block;font-size:15px;margin-top:4px;opacity:.9}
.tcard blockquote{margin:0;font-family:var(--serif);font-size:22px;line-height:1.45;font-weight:500;flex:1}
.t-mark{font-family:var(--serif);font-size:88px;line-height:.6;height:36px;display:block;opacity:.45}
@media (max-width:744px){.tcard{padding:28px;min-height:0}}

/* ---------------------------------------------------------------- stacked sheets ending */
.sheet-blue{background:var(--powder);border-radius:22px 22px 0 0;padding:200px 0 260px;text-align:center;color:var(--powder-ink);margin-top:100px}
.sheet-blue h2{color:var(--ink);margin-bottom:16px}
.sheet-blue .lead{color:var(--powder-ink);margin:0 auto 32px}
.sheet-blue .btn-gold{padding:18px 40px;font-size:17px}
.sheet-blue .friction{font-size:13.5px;margin-top:16px;color:var(--powder-ink)}
.sheet-blue .friction a{color:inherit;font-weight:500}
.site-footer{background:#fff;border-radius:64px 64px 0 0;margin-top:-64px;position:relative;padding:80px 0 40px;color:var(--body)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.site-footer h3{font-family:var(--sans);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:18px}
.foot-links,.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-links a,.contact-list a{color:var(--ink);text-decoration:none;font-size:16px}
.foot-links a:hover,.contact-list a:hover{text-decoration:underline;text-underline-offset:4px}
.contact-list li{display:flex;gap:12px;font-size:16px}
.contact-list span{color:var(--muted);min-width:44px}
.site-footer address{font-style:normal;font-size:16px;line-height:1.8;margin-top:18px}
.site-footer address a{color:var(--ink);text-decoration:none}
.site-footer .tag{font-family:var(--serif);font-size:22px;line-height:30px;color:var(--ink);margin:18px 0 12px;max-width:34ch}
.site-footer .logo-mark{width:220px;height:auto}
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:36px;height:36px;display:block;border-radius:10px;overflow:hidden;transition:transform .15s}
.social a:hover{transform:translateY(-2px)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:64px;font-size:13.5px;color:var(--muted)}
.foot-bottom a{color:var(--muted);text-decoration:none}
@media (max-width:1024px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:744px){.sheet-blue{padding:96px 0 150px;margin-top:64px}.site-footer{border-radius:40px 40px 0 0;margin-top:-40px;padding-top:56px}
  .foot-grid{grid-template-columns:1fr;gap:32px}.foot-bottom{flex-direction:column}}

/* ---------------------------------------------------------------- quick rail (live dates) */
.qr-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.qr-scroll::-webkit-scrollbar{display:none}
.qr-day{flex:0 0 auto;scroll-snap-align:start;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.8);
  border-radius:var(--r-btn);padding:12px 16px;min-width:72px;text-align:center;line-height:1.15;transition:all .15s ease-in;border:1px solid transparent}
.qr-day:hover{background:#fff;border-color:var(--ink)}
.qr-dow{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.qr-num{display:block;font-family:var(--serif);font-size:30px;font-weight:500;margin:4px 0 2px}
.qr-mon{display:block;font-size:13.5px;color:var(--muted)}
.qr-label b{display:block;font-family:var(--serif);font-size:28px;font-weight:500;color:var(--ink)}
.qr-label span{font-size:16px;color:var(--muted)}
.qr-more{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;color:var(--ink);font-weight:500;white-space:nowrap}

/* the "day aboard" panel */
.aboard{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.aboard > *{min-width:0}
.qr-scroll{min-width:0}
.aboard .lead{color:inherit}
.aboard-model{padding:16px 0 0;text-align:center}
.aboard-model img{width:100%;max-width:400px;margin:0 auto;filter:drop-shadow(0 18px 24px rgba(40,56,73,.18))}
.aboard-model dl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0 0;text-align:center}
.aboard-model dt{font-family:var(--serif);font-size:28px;font-weight:500;color:var(--ink)}
.aboard-model dd{margin:0;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.aboard .qr-block{margin-top:36px}
@media (max-width:1024px){.aboard{grid-template-columns:1fr;gap:32px}}

/* ---------------------------------------------------------------- season chart (kept) */
.sc{margin-top:28px}
.sc-head{display:grid;grid-template-columns:var(--tl,120px) 1fr var(--tr,88px);gap:12px;align-items:end;margin-bottom:10px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sc-h-r{text-align:right}
.sc-months{display:grid;grid-template-columns:repeat(12,1fr);text-align:center}
.sc-months span.is-now i{color:var(--ink);font-weight:500}
.sc-months i{font-style:normal}
.sc-body{position:relative}
.sc-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sc-row{display:grid;grid-template-columns:var(--tl,120px) 1fr var(--tr,88px);gap:12px;align-items:center;font-size:16px}
.sc-name{color:var(--body)}
.sc-track{display:grid;grid-template-columns:repeat(12,1fr);height:10px;background:rgba(40,56,73,.07);border-radius:999px;overflow:hidden}
.sc-bar{background:var(--ink);opacity:.35;border-radius:999px}
.sc-row.now .sc-bar{opacity:1}
.sc-span{text-align:right;font-size:13.5px;letter-spacing:.06em;color:var(--muted)}
.sc-now{position:absolute;top:-4px;bottom:-4px;width:1.5px;background:var(--ink);
  left:calc(var(--tl,120px) + 12px + (var(--m) - .5) * (100% - var(--tl,120px) - var(--tr,88px) - 24px) / 12)}
.sc-legend{display:flex;gap:18px;margin-top:14px;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sc-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:-1px}
.lg-now{background:var(--ink)}.lg-season{background:var(--ink);opacity:.35}
@media (max-width:600px){.sc-head,.sc-row{--tl:88px;--tr:0px;grid-template-columns:88px 1fr}.sc-span,.sc-h-r{display:none}}

/* ---------------------------------------------------------------- inner page header (white) */
.page-hero{padding:180px 0 0;text-align:center}
.page-hero .crumb{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 20px}
.page-hero .crumb a{color:var(--muted);text-decoration:none}
.page-hero h1{margin:0 auto 20px}
.page-hero .lead{margin:0 auto;color:var(--muted)}
.ph-media{width:min(1370px,100% - 2*35px);margin:56px auto 0;border-radius:var(--r-media);overflow:hidden;aspect-ratio:16/7;box-shadow:var(--sh-frame);background:var(--flat)}
.ph-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:744px){.page-hero{padding-top:110px}.ph-media{width:calc(100% - 2*var(--gutter));aspect-ratio:4/3;margin-top:36px}}

/* ---------------------------------------------------------------- generic content blocks */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.split.rev > :first-child{order:2}
.split-media{display:grid;gap:20px}
.split-media figure{margin:0;border-radius:var(--r-media);overflow:hidden;box-shadow:var(--sh-frame);aspect-ratio:4/3;background:var(--flat)}
.split-media figure:nth-child(2){aspect-ratio:16/10}
.split-media figure img{width:100%;height:100%;object-fit:cover}
.split .cta-actions{justify-content:flex-start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px}.split.rev > :first-child{order:0}}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:16px;padding:8px 14px;border-radius:999px;background:var(--flat);color:var(--ink)}
.stats{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stats li strong{display:block;font-family:var(--serif);font-size:48px;font-weight:500;color:var(--ink);line-height:1;letter-spacing:-.4px}
.stats li span{display:block;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:10px;font-weight:500;line-height:1.5}
.stats.on-dark li strong{color:#fff}.stats.on-dark li span{color:rgba(255,255,255,.7)}
@media (max-width:744px){.stats{grid-template-columns:1fr 1fr}}
.hours-list{display:grid;gap:14px;margin:24px 0 32px}
.hours-list div{display:grid;grid-template-columns:120px 1fr;gap:16px;font-size:16px;line-height:1.7}
.hours-list dt{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-top:2px}
.hours-list dd{margin:0}
.hours-list a{color:var(--ink)}
.map-wrap{border-radius:var(--r-media);overflow:hidden;box-shadow:var(--sh-frame);aspect-ratio:4/3;background:var(--flat)}
.map-wrap.tall{aspect-ratio:3/4}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:900px){.visit-grid{grid-template-columns:1fr;gap:32px}}
.notice{font-size:16px;line-height:1.8;color:var(--muted);background:var(--flat);border-radius:var(--r-card);padding:16px 20px}
.notice:empty{display:none}

/* the dark section on inner pages becomes the inset ink panel */
.dark{width:min(1370px,100% - 2*35px);margin:0 auto;border-radius:var(--r-panel);background:var(--ink);color:#fff;padding:64px}
.dark h2,.dark h3{color:#fff}.dark .lead,.dark p,.dark .muted{color:rgba(255,255,255,.8)}
.dark .btn-ghost{color:#fff;border-color:#fff}
.dark .chips li{background:rgba(255,255,255,.12);color:#fff}
.dark .split-media figure{box-shadow:none}
@media (max-width:744px){.dark{width:calc(100% - 2*var(--gutter));padding:36px 24px;border-radius:18px}}
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.tile{margin:0;border-radius:var(--r-card);overflow:hidden;background:rgba(255,255,255,.08)}
.tile img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tile figcaption{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;padding:12px 14px;font-weight:500;color:rgba(255,255,255,.8)}
.section .tile{background:var(--flat)}
.section .tile figcaption{color:var(--muted)}
@media (max-width:900px){.tile-grid{grid-template-columns:1fr 1fr}}
.boat-model{margin:40px auto 0;max-width:720px}
.boat-model img{filter:drop-shadow(0 24px 30px rgba(0,0,0,.35))}
.teaser-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.teaser-strip figure{margin:0;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sh-frame)}
.teaser-strip img{width:100%;height:100%;object-fit:cover}
@media (max-width:744px){.teaser-strip{grid-template-columns:1fr 1fr}}
.trophy{padding:100px 0}
.trophy-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.trophy-photo{margin:0;border-radius:var(--r-media);overflow:hidden;box-shadow:var(--sh-lift);aspect-ratio:4/5}
.trophy-photo img{width:100%;height:100%;object-fit:cover}
.trophy-num{font-family:var(--serif);font-size:100px;line-height:1;color:var(--ink);letter-spacing:-2px;margin:0}
.trophy-num small{display:block;font-family:var(--sans);font-size:13.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:12px;font-weight:500}
@media (max-width:900px){.trophy-grid{grid-template-columns:1fr;gap:32px}.trophy-num{font-size:68px}}
.press{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:center;background:var(--warm);border-radius:var(--r-panel);padding:40px;box-shadow:var(--sh-lift);margin-top:64px}
.press figure{margin:0;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-frame)}
@media (max-width:744px){.press{grid-template-columns:1fr;padding:28px}.press figure{max-width:200px}}
.rating-row{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;color:var(--muted)}
.rating-row b{font-family:var(--serif);font-size:28px;color:var(--ink);font-weight:500}
.stars{color:var(--star);letter-spacing:2px}

/* prices */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.price-card{border:1px solid var(--line);border-radius:var(--r-panel);padding:40px;background:#fff;position:relative}
.price-card.hi{background:var(--warm);border-color:transparent;box-shadow:var(--sh-lift)}
.pc-tag{display:inline-block;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--ink);background:var(--powder);padding:4px 12px;border-radius:999px;margin-bottom:18px}
.price-card h3{margin-bottom:20px}
.prices{width:100%;border-collapse:collapse;margin-bottom:20px}
.prices td{padding:10px 0;font-size:16px;vertical-align:baseline}
.prices td:last-child{text-align:right;font-family:var(--serif);font-size:28px;color:var(--ink);font-weight:500}
.price-note{font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 20px}
@media (max-width:1024px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.price-grid{grid-template-columns:1fr}.price-card{padding:28px}}

/* gallery */
.g-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:20px}
.g-item{display:block;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-frame);background:var(--flat)}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.g-item:hover img{transform:scale(1.03)}
.g-item.two{grid-column:span 2}.g-item.tall{grid-row:span 2}
@media (max-width:900px){.g-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}.g-item.two{grid-column:span 2}}
.lightbox{position:fixed;inset:0;background:rgba(40,56,73,.92);z-index:100;display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:82vh;max-width:min(1100px,92vw);border-radius:var(--r-card);box-shadow:var(--sh-lift)}
.lightbox figcaption{color:#fff;font-size:16px;margin-top:14px;text-align:center}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.92);border:0;width:44px;height:44px;border-radius:50%;cursor:pointer;color:var(--ink);font-size:22px;display:grid;place-items:center}
.lb-close{top:20px;right:20px}.lb-prev{left:20px;top:50%;transform:translateY(-50%)}.lb-next{right:20px;top:50%;transform:translateY(-50%)}

/* contact */
.dir-card{background:var(--flat);border-radius:var(--r-panel);padding:40px}
.dir-card h3{margin-bottom:12px}
.dir-card ol{padding-left:20px;font-size:16px;line-height:1.8;color:var(--body)}
.dirs{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media (max-width:744px){.dirs{grid-template-columns:1fr}.dir-card{padding:28px}}
.contact-big{list-style:none;margin:32px 0;padding:0;display:flex;flex-direction:column;gap:22px}.contact-big li{display:flex;flex-direction:column;gap:6px}.contact-big li > span{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}.contact-big a{font-family:var(--serif);font-size:32px;line-height:1.25;color:var(--ink);text-decoration:none;font-weight:500}.contact-big a:hover{text-decoration:underline;text-underline-offset:4px}@media(max-width:640px){.contact-big a{font-size:24px}}
/* the email address is one unbreakable word; on a 375px phone it was 18px wider than the column */
.contact-big a{overflow-wrap:anywhere}
@media(max-width:400px){.contact-big a{font-size:22px}}

/* video page */
.video-frame{border-radius:var(--r-media);overflow:hidden;box-shadow:var(--sh-frame);aspect-ratio:16/9;background:var(--flat)}
.video-frame iframe{width:100%;height:100%;border:0;display:block}

/* ---------------------------------------------------------------- booking */
.bk-page main{padding-top:80px}
.bk-page #booking{padding-top:56px}
@media (max-width:1199px){.bk-page main{padding-top:55px}.bk-page #booking{padding-top:32px}}
@media (max-width:1199px){.vid-page main{padding-top:55px}#video-top{padding-top:32px}}
#booking .crumb{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 20px;text-align:center}
#booking .crumb a{color:var(--muted);text-decoration:none}
.bk-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px}
.bk-h h2{margin:0}
#bkTitle:focus,#bkTitle:focus-visible{outline:none}
.booking{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
.bk-panel{display:none}
.bk-panel.on{display:block}
@media (max-width:1040px){.booking{grid-template-columns:1fr}}

/* calendar */
.cal{background:#fff;border:1px solid var(--line);border-radius:var(--r-panel);padding:28px}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cal-title{font-family:var(--serif);font-size:28px;font-weight:500;margin:0;color:var(--ink)}
.cal-title span{font-family:var(--sans);font-size:13.5px;letter-spacing:.1em;color:var(--muted);margin-left:8px;font-weight:500}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:all .15s ease-in}
.cal-nav button:hover:not(:disabled){border-color:var(--ink)}
.cal-nav button:disabled{opacity:.3;cursor:default}
.cal-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px;text-align:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{position:relative;aspect-ratio:1/.92;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
  font-family:var(--sans);font-size:17px;font-weight:500;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;
  transition:border-color .15s,background .15s,color .15s,transform .25s var(--ease),box-shadow .25s}
.day:hover:not(:disabled){border-color:var(--ink);transform:translateY(-1px)}
.day .dot{width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.5}
.day.today{box-shadow:inset 0 0 0 1.5px var(--ink)}
.day.sel{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:var(--sh-lift)}
.day.sel .dot{background:#fff;opacity:1}
.day.blank{border:0;background:none;cursor:default;pointer-events:none}
.day:disabled{cursor:default}
/* Half-sold days are amber and say which half is left. Amber not red on purpose — a
   calendar full of red reads as "closed", when a busy month is good news. */
.day.limited{background:var(--amber);border-color:transparent}
.day .half{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--amber-ink);line-height:1;white-space:nowrap}
.day.sel .half{color:#fff}
.day.booked{background:var(--flat);border-color:transparent;color:var(--muted-2);font-weight:400}
.day.booked .dot,.day.booked .half{display:none}
.day.off{border-color:transparent;color:#cfcfcf;background:transparent}
.day.off .dot,.day.past .dot{display:none}
.day.past{color:#cfcfcf;border-color:transparent;background:transparent}
.cal-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.cal-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin-right:8px}
.lg-open{background:var(--ink);opacity:.5}.lg-lim{background:var(--amber);box-shadow:inset 0 0 0 1.5px var(--amber-ink)}
.lg-book{background:#ddd}.lg-off{box-shadow:inset 0 0 0 1px #ddd}
.cal-biting{margin-top:20px;font-size:16px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cal-biting strong{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.cal-biting .chips{display:contents}
@media (max-width:560px){.cal{padding:18px}.day{font-size:16px}.cal-grid,.cal-dow{gap:4px}}

/* trips */
.trip-group{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:24px 0 10px}
.trip-group:first-child{margin-top:0}
.trip{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:center;width:100%;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:14px;cursor:pointer;margin-bottom:10px;
  transition:border-color .15s,box-shadow .25s;font-family:var(--sans);color:var(--body)}
.trip:hover{border-color:var(--ink)}
.trip.sel{border-color:var(--ink);box-shadow:var(--sh-lift)}
.trip img{width:120px;height:90px;object-fit:cover;border-radius:12px}
.t-txt b{display:block;font-size:18px;font-weight:500;color:var(--ink);margin-bottom:4px}
.t-desc{display:block;font-size:16px;line-height:1.7;color:var(--muted)}
.tp{font-family:var(--serif);font-size:28px;font-weight:500;color:var(--ink);text-align:right;white-space:nowrap}
.tp small{display:block;font-family:var(--sans);font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-top:4px}
@media (max-width:620px){.trip{grid-template-columns:84px 1fr;gap:14px}.trip img{width:84px;height:66px}.trip .tp{grid-column:2;text-align:left;font-size:22px}}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--flat);border-radius:var(--r-card);padding:16px;margin:-2px 0 18px}
.slot-lead{grid-column:1/-1;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 4px}
.slot-note{grid-column:1/-1;font-size:16px;color:var(--muted);margin:0}
.slot{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-align:left;cursor:pointer;font-family:var(--sans);color:var(--ink);transition:all .15s ease-in}
.slot:hover:not(:disabled){border-color:var(--ink)}
.slot.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.slot b{display:block;font-size:17px;font-weight:500}
.slot span{display:block;font-size:13.5px;color:inherit;opacity:.7;margin-top:2px}
.slot:disabled{opacity:.4;cursor:default;text-decoration:line-through}
@media (max-width:640px){.slots{grid-template-columns:1fr}}

/* party */
.pax{display:flex;align-items:center;gap:16px;background:var(--flat);border-radius:var(--r-panel);padding:24px}
.pax-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:#fff;font-size:24px;cursor:pointer;color:var(--ink);transition:all .15s ease-in}
.pax-btn:hover{background:var(--ink);color:#fff}
.pax-val{font-family:var(--serif);font-size:54px;font-weight:500;color:var(--ink);min-width:70px;text-align:center}
.pax-meta b{display:block;font-size:18px;font-weight:500;color:var(--ink)}
.pax-meta span{font-size:16px;color:var(--muted)}
#paxNote{margin-top:16px}

/* details */
.bk-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bk-form label{display:grid;gap:8px;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.bk-form .full{grid-column:1/-1}
.bk-form input,.bk-form textarea{font:400 16px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--body);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;transition:border-color .15s}
.bk-form input:focus,.bk-form textarea:focus{outline:none;border-color:var(--ink)}
.bk-form textarea{min-height:120px;resize:vertical}
.bk-err{display:none;background:var(--coral);color:var(--coral-ink);border-radius:12px;padding:14px 16px;font-size:16px;margin-top:16px}
.bk-err.on{display:block}
@media (max-width:640px){.bk-form{grid-template-columns:1fr}}

/* summary card */
.summary{position:sticky;top:104px;background:var(--warm);border-radius:var(--r-panel);padding:28px;box-shadow:var(--sh-lift)}
.summary h3{font-family:var(--sans);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:18px}
.sum-boat{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.sum-boat img{width:84px;height:auto;object-fit:contain;flex:none}
.sum-boat b.script{display:block;font-family:"Yellowtail","Brush Script MT",cursive;font-size:30px;line-height:1.1;color:#B3282D;font-weight:400}
.sum-boat span span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sum-rows{list-style:none;margin:0;padding:0}
.sum-rows li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:16px;align-items:baseline}
.sum-rows .k{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;flex:none}
.sum-rows .v{text-align:right;font-weight:500;color:var(--ink)}
.sum-rows .v.empty{color:var(--muted-2);font-weight:400}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px;padding-top:16px}
.sum-total .k{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.sum-total .v{font-family:var(--serif);font-size:36px;font-weight:500;color:var(--ink);text-align:right;line-height:1}
.sum-total small{display:block;font-family:var(--sans);font-size:13.5px;color:var(--muted);letter-spacing:0;margin-top:6px;font-weight:400}
.sum-actions{display:flex;gap:10px;margin-top:22px}
.sum-actions .btn{flex:1;padding:14px 18px}
.sum-back{flex:0 0 auto!important}
.summary.blocked .sum-total .v{color:var(--muted-2)}
.sum-hint{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin:14px 0 0;font-weight:500;min-height:1em}
.sum-help{font-size:13.5px;line-height:1.8;color:var(--muted);margin:18px 0 0}
.sum-help a{color:var(--ink)}
.pay-marks{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
.pay-marks span{font-size:11px;letter-spacing:.1em;font-weight:500;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 8px}

/* mobile: the summary becomes floating pills above the thumb, not a bordered dock */
@media (max-width:1040px){
  .summary{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;background:transparent;box-shadow:none;padding:0 var(--gutter) 14px;border-radius:0;pointer-events:none;display:flex;flex-direction:column;align-items:center}
  .summary .sum-hint{order:-1}
  .summary > *{display:none}
  .summary .sum-actions{display:flex;margin:0;pointer-events:auto;gap:10px;justify-content:center}
  .summary .sum-actions .btn{flex:0 1 auto;box-shadow:var(--sh-lift);border-radius:999px;padding:16px 28px;background:var(--ink);color:#fff;border-color:var(--ink)}
  .summary .sum-actions .sum-back{background:#fff;color:var(--ink);border-color:#fff}
  .summary .sum-actions .btn:disabled{opacity:.45}
  .summary .sum-hint{display:block;margin:0 0 10px;pointer-events:none;background:rgba(255,255,255,.9);width:max-content;max-width:100%;margin-inline:auto;padding:6px 12px;border-radius:999px;box-shadow:var(--sh-frame)}
  .summary .sum-hint:empty{display:none}
  body.bk-page{padding-bottom:110px}
}

/* quote card + done card */
.qcard{background:var(--warm);border-radius:var(--r-panel);padding:40px;box-shadow:var(--sh-lift);max-width:560px;margin-inline:auto;text-align:center}
.qk{display:block;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:12px}
.qdate{font-size:16px;color:var(--muted);margin:-8px 0 20px}
.qnote{font-size:16px;line-height:1.8;color:var(--muted)}
.qrows{list-style:none;margin:24px 0;padding:0;display:grid;gap:10px;text-align:left}
.qrows li{display:flex;justify-content:space-between;gap:16px;font-size:16px;align-items:baseline}
.qrows li span{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.qrows li a{color:var(--ink);text-decoration:none;text-align:right;font-weight:500}
.qact{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.qback{background:none;border:0;font-family:var(--sans);font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;margin-top:24px;padding:8px;font-weight:500}
.qback:hover{color:var(--ink)}
.bk-done{text-align:center;max-width:620px;margin-inline:auto}
.tick{width:64px;height:64px;border-radius:50%;background:var(--sea);color:var(--sea-ink);display:grid;place-items:center;margin:0 auto 24px}
.tick svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bk-recap{list-style:none;margin:28px auto 0;padding:24px 28px;background:var(--flat);border-radius:var(--r-card);text-align:left;display:grid;gap:10px;max-width:480px}
.bk-recap li{display:flex;justify-content:space-between;gap:16px;font-size:16px}
.bk-recap .k{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.bk-recap .v{font-weight:500;color:var(--ink);text-align:right}

/* ---------------------------------------------------------------- booked (bare page) */
.bare .site-header,.bare .site-header.scrolled{background:#fff}
.ok-wrap{padding:calc(80px + 48px) var(--gutter) 96px}
.ok{max-width:28rem;width:100%;margin:0 auto}
.ok-head{text-align:center;margin-bottom:32px}
.ok-ill{width:176px;height:auto;display:block;margin:0 auto 18px;filter:drop-shadow(0 16px 18px rgba(40,56,73,.17))}
.ok h1{font-size:36px;margin:0 auto 10px}
.ok-head p{font-size:18px;line-height:1.6;color:var(--muted);margin:0 auto;max-width:34ch}
.ok-card{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;padding:24px}
.ok-item{display:flex;align-items:center;gap:16px;margin-bottom:24px;border:0;background:none;padding:0 24px}
.ok-thumb{width:64px;height:64px;flex:none;border-radius:12px;background:var(--flat);object-fit:cover}
.ok-item-t{flex:1;min-width:0}
.ok-name{font-size:18px;font-weight:500;line-height:1.35;color:var(--ink);margin:0}
.ok-det{font-size:16px;color:var(--muted);margin:2px 0 0}
.ok-price{font-family:var(--serif);font-size:28px;font-weight:500;color:var(--ink);margin:0}
.ok-sum{margin-bottom:24px}
.ok-sum > * + *{margin-top:16px}
.ok-card h2{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:-.2px;color:var(--ink);margin:0}
.ok-sum .ok-h2b{margin-top:28px}
.ok-row{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:16px}
.ok-row + .ok-row{margin-top:14px}
.ok-row p{margin:0}
.ok-row .k{color:var(--muted);flex:none}
.ok-row .v{color:var(--ink);font-weight:500;text-align:right}
.ok-row .v a{color:var(--ink)}
.ok-note-card{margin-bottom:32px}
.ok-note{display:grid;grid-template-columns:5.6rem 1fr;gap:14px 16px;margin:16px 0 0}
.ok-note dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px;font-weight:500}
.ok-note dd{margin:0;font-size:16px;line-height:1.7;color:var(--muted)}
.ok-act{text-align:center}
.ok-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.ok-status{font-size:13.5px;font-weight:500;color:var(--sea-ink);margin:20px 0 0}
.ok-status:empty{display:none}
.ok-links{display:flex;justify-content:center;gap:22px;margin:22px 0 0}
.ok-links a{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;cursor:pointer;font-weight:500}
.ok-links a:hover{color:var(--ink)}
.ok-dyn{transition:opacity .3s var(--ease)}
.ok.is-loading .ok-dyn{opacity:0}
@media (max-width:420px){.ok-note{grid-template-columns:1fr;gap:4px}.ok-note dd{margin-bottom:10px}}

/* ---------------------------------------------------------------- motion discipline */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}
.cal-biting .chips li:nth-child(5n+1),.chips.tint li:nth-child(5n+1){background:var(--powder)}
.cal-biting .chips li:nth-child(5n+2),.chips.tint li:nth-child(5n+2){background:var(--sea)}
.cal-biting .chips li:nth-child(5n+3),.chips.tint li:nth-child(5n+3){background:var(--amber)}
.cal-biting .chips li:nth-child(5n+4),.chips.tint li:nth-child(5n+4){background:var(--tan)}
.cal-biting .chips li:nth-child(5n+5),.chips.tint li:nth-child(5n+5){background:var(--coral)}

/* ---------------------------------------------------------------- hero (full-bleed, home) */
.hero.full{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px 0 190px;color:#fff;overflow:hidden}
.hero.full .wrap-s{position:relative;z-index:2}
.hero.full .hero-frame{position:absolute;inset:0;width:100%;margin:0;border-radius:0;box-shadow:none;aspect-ratio:auto;z-index:0}
.hero.full .hero-frame::after{content:"";position:absolute;inset:0;background:rgba(18,28,38,.42);z-index:1}
.hero.full .hero-poster{z-index:0}
.hero.full .kicker{color:rgba(255,255,255,.72)}
.hero.full h1{color:#fff}
.hero.full .lead{color:rgba(255,255,255,.88)}
.hero.full .btn-ghost{color:#fff;border-color:#fff}
.hero.full .hero-note{color:rgba(255,255,255,.72)}
.hero.full .hero-note b{color:#fff}
.hero.full .hero-cap{position:absolute;left:0;right:0;bottom:28px;z-index:2;margin:0 auto;color:rgba(255,255,255,.72)}
@media (max-width:744px){.hero.full{padding:104px 0 206px}.hero.full .hero-frame{width:100%;aspect-ratio:auto;margin:0}
  .hero.full .hero-cap{bottom:20px;width:calc(100% - 2*var(--gutter))}}
/* nav rides light over the full-bleed hero until the page scrolls */
.hero-full .site-header:not(.scrolled) .site-nav a,.hero-full .site-header:not(.scrolled) .brand-sub{color:#fff}
.hero-full .site-header:not(.scrolled) .nav-toggle span:not(.sr){background:#fff}
.hero-full .site-header:not(.scrolled) .nav-cta a{background:#fff;color:var(--ink)!important}
.hero-full .site-header:not(.scrolled) .nav-book{background:#fff;color:var(--ink)}
.hero-full .site-header:not(.scrolled) .nav-cta a:hover{background:rgba(255,255,255,.88)}
/* ------------------------------------------------- "biting now" band (home hero)
   Sits on the bottom edge of the full-bleed hero so a visitor learns what Stu fishes for
   before they scroll. The plates are drawn facing left, so the row reads as one shoal. */
.biting{position:absolute;left:0;right:0;bottom:26px;z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:12px;padding:0 var(--gutter)}
.biting[hidden]{display:none}
.biting-k{font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.74)}
.biting-fish{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;justify-content:center;
  gap:34px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.biting-fish::-webkit-scrollbar{display:none}
.biting-fish li{flex:none;display:flex;flex-direction:column;align-items:center;gap:7px}
.biting-fish li[hidden]{display:none}
.biting-fish img{height:58px;width:auto;display:block;filter:drop-shadow(0 5px 12px rgba(0,0,0,.42))}
.biting-fish span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.9);white-space:nowrap}
/* out of season the row is empty, so the label carries the message on its own */
.biting.off .biting-fish{display:none}
@media (max-width:1024px){.biting-fish{gap:24px}.biting-fish img{height:46px}}
/* On a phone five species will not sit in one line without the last one hanging off the edge,
   which reads as broken rather than scrollable. Wrap to two rows instead. */
@media (max-width:744px){
  .biting{bottom:20px;gap:10px}
  .biting-fish{gap:14px 20px;flex-wrap:wrap;overflow-x:visible}
  .biting-fish img{height:34px}
  .biting-fish span{font-size:11px;letter-spacing:.06em}
}

/* ------------------------------------------------- hero copy (home), centred
   Centred over the boat again after Stu saw it on the left. It now explains the business on
   its own: what it is, what he fishes for, who it is for, everything on offer, why trust him. */
.hero.full{text-align:center}
.hero.full .wrap-s{width:min(940px,100% - 2*var(--gutter));margin-inline:auto}
.hero.full h1{font-size:62px;line-height:1.08;margin:0 auto 22px;max-width:900px}
.hero.full .lead{font-size:22px;line-height:1.55;margin:0 auto 26px;max-width:780px;color:#fff}
.hero.full .kicker{color:rgba(255,255,255,.9);font-size:14px}
.hero.full .hero-note{color:rgba(255,255,255,.9);font-size:15px;margin-top:0}
.hero.full .hero-note b{color:#fff}
/* one even scrim — a darker block behind the words alone would draw a hard seam across the
   video, and there is no soft edge without a colour ramp */
.hero.full .hero-frame::after{background:rgba(18,28,38,.48)}
.hero-offers{list-style:none;margin:0 auto 30px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hero-offers a{display:inline-block;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;font-size:15px;font-weight:500;
  transition:background .2s,border-color .2s}
.hero-offers a:hover{background:rgba(122,184,255,.24);border-color:var(--blue-hi)}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:var(--blue);border-color:var(--blue);color:#fff}
@media (max-width:1024px){.hero.full h1{font-size:50px}}
@media (max-width:744px){
  .hero.full h1{font-size:38px}
  .hero.full .lead{font-size:18.5px}
  .hero-offers{gap:7px;margin-bottom:24px}
  .hero-offers a{font-size:13.5px;padding:7px 12px}
}

/* ================================================================ Stu's revisions
   Colour for what matters. The palette stays calm. Highlighted words and callouts are blue
   (see "highlighted words" below); the red of the Sashimi script is kept for the one outline
   that must be seen, the Bottom Fishing card. */
:root{--accent:#b3282d}

/* ---------------------------------------------------------------- press: two cards */
.press-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:64px}
.press-pair.one{grid-template-columns:1fr;max-width:860px;margin:0 auto}
.press-card{display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:center;background:var(--warm);
  border-radius:var(--r-panel);padding:32px;box-shadow:var(--sh-lift)}
.press-card figure,.press-play{margin:0;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-frame);display:block}
.press-card img{width:100%;height:auto;display:block}
.press-card h2,.press-card h3{font-size:28px;margin:0 0 10px}
.press-card p{font-size:17px;line-height:1.6;color:var(--body);margin:0 0 18px}
.press-card p:last-child{margin-bottom:0}
.press-play{position:relative;aspect-ratio:16/10}
.press-play img{width:100%;height:100%;object-fit:cover}
.press-play .play{position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--accent);display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.press-play:hover .play{transform:scale(1.08)}
.press-card .btn{white-space:normal;text-align:center}
@media (max-width:1180px){.press-pair{grid-template-columns:1fr}}
@media (max-width:744px){
  .press-card{grid-template-columns:1fr;padding:24px}
  .press-card figure{max-width:220px}
}

/* ---------------------------------------------------------------- video page, no header */
.vid-page main{padding-top:80px}
#video-top{padding-top:56px}
#video-top .crumb{font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:500;margin:0 0 20px;text-align:center}
#video-top .crumb a{color:var(--muted);text-decoration:none}
#video-top .sec-head{margin-bottom:40px}
#video-top h1{max-width:none;font-size:52px}
@media (max-width:744px){#video-top h1{font-size:36px}}

/* ---------------------------------------------------------------- heads stay in frame
   Charter photos are shot at chest height with the heads in the top third. A centred crop
   into a wide box took the heads off; every crop now favours the top, and the handful that
   still need it are set per photo in build.py (FOCUS). */
.frame img,.offer img,.feat figure img,.ph-media img,.split-media figure img,.tile img,
.teaser-strip img,.trophy-photo img,.g-item img,.trip img,.ok-thumb{object-position:50% 25%}
/* the cover holds its shape before it loads, so the card does not jump when it arrives */
.press-card figure{aspect-ratio:1146/1200}
.press-card figure img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------- highlighted words
   Stu: "highlighted colours for important things, make them pop". Blue, from the accent blue
   in the logo artwork (#1e6fe8); it was gold, then briefly red. On light backgrounds a shade
   deeper than the logo blue so it passes AA (5.7:1 on white, 4.7:1 on powder); on the video,
   the ink panel and dark sections a light sky blue (5.8:1 on ink) with a soft blue glow. */
:root{--blue:#1a62d0; --blue-hi:#7ab8ff}
mark.hi{background:none;color:var(--blue);font-style:inherit;text-decoration:none}
.hero.full mark.hi,.panel.ink mark.hi,section.dark mark.hi{text-decoration:none;color:var(--blue-hi);
  text-shadow:0 1px 3px rgba(0,0,0,.3),0 0 18px rgba(122,184,255,.45)}

/* ---------------------------------------------------------------- biting now, bright and glowing */
.biting-k{color:var(--blue-hi);font-size:15px;letter-spacing:.16em;
  text-shadow:0 1px 3px rgba(0,0,0,.35),0 0 16px rgba(122,184,255,.55)}
.biting-fish span{color:#fff;font-size:12.5px}
.biting-fish li{transition:transform .6s var(--ease)}
.biting-fish li span{transition:color .6s,text-shadow .6s}
/* one species at a time lifts and lights, so the row reads as "changing" without swapping */
.biting-fish li.on{transform:translateY(-6px) scale(1.14)}
.biting-fish li.on span{color:var(--blue-hi);text-shadow:0 1px 3px rgba(0,0,0,.35),0 0 12px rgba(122,184,255,.7)}
@media (prefers-reduced-motion:reduce){.biting-fish li{transition:none}.biting-fish li.on{transform:none}}
@media (max-width:744px){.biting-k{font-size:13px}}

/* ---------------------------------------------------------------- gallery by subject */
.g-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 48px}
.g-jump a{padding:10px 18px;border-radius:999px;background:var(--flat);color:var(--ink);text-decoration:none;
  font-size:16px;font-weight:500;transition:background .15s}
.g-jump a:hover{background:var(--powder)}
.g-jump a span{color:var(--muted);font-weight:400;margin-left:4px}
.g-jump a:first-child{background:var(--powder);color:var(--blue)}
.g-sec{margin:0 0 64px;scroll-margin-top:100px}
.g-sec h3{font-size:30px;margin:0 0 22px}
.g-sec h3 span{font-family:var(--sans);font-size:15px;color:var(--muted);letter-spacing:.04em;margin-left:10px}
.g-grid{grid-auto-flow:dense}
/* headings break into even lines instead of leaving one word stranded (or splitting
   "Long / Island") — browsers without support simply wrap as before */
h1,h2,h3,.lead{text-wrap:balance}
/* short laptop screens (1366x768 and the like): pull the copy together so the biting band
   still lands above the fold */
@media (min-width:745px) and (max-height:820px){
  .hero.full{padding-top:96px;padding-bottom:176px}
  .hero.full h1{font-size:54px;margin-bottom:16px}
  .hero.full .lead{font-size:20px;margin-bottom:20px}
  .hero-offers{margin-bottom:22px}
}
/* phones: the copy is taller than the screen, so a band pinned to the bottom edge would sit
   on top of it. In the flow it follows the copy and can never overlap. */
@media (max-width:744px){
  .hero.full{padding-bottom:36px;justify-content:flex-start}
  .biting{position:static;margin-top:34px;padding:0}
}

/* ---------------------------------------------------------------- phones: one round Call button
   Floats bottom right with no bar behind it and fades up on load; the hero has no Call button of
   its own any more. Not on the booking page, which has its own. */
.mbar{display:none}
@media (max-width:744px){
  .mbar{display:block;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
    opacity:0;transform:translateY(12px) scale(.9);visibility:hidden;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .mbar.show{opacity:1;transform:none;visibility:visible;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .mbar-call{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;
    box-shadow:0 10px 26px rgba(18,28,38,.34),0 2px 6px rgba(18,28,38,.2);text-decoration:none}
  .mbar-call:active{transform:scale(.94)}
  .mbar-call svg{width:24px;height:24px}
  .bk-page .mbar{display:none}
}
@media (prefers-reduced-motion:reduce){.mbar,.mbar.show{transition:none}}

/* ---------------------------------------------------------------- questions, answered */
.faq .sec-head{margin-bottom:30px}
.faq-q{border-radius:var(--r-card);background:var(--frame);margin:0 0 10px;padding:0 24px}
.faq-q summary{cursor:pointer;list-style:none;padding:20px 36px 20px 0;font-family:var(--serif);font-size:22px;
  line-height:1.3;color:var(--ink);position:relative}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:28px;font-weight:400;color:var(--muted)}
.faq-q[open] summary::after{content:"\2013"}
.faq-q p{margin:0;padding:0 0 22px;font-size:18px;line-height:1.65;color:var(--body);max-width:none}
.faq-q p a{color:var(--ink);text-underline-offset:3px}
@media (max-width:744px){.faq-q{padding:0 18px}.faq-q summary{font-size:19px}.faq-q p{font-size:17px}}

/* ---------------------------------------------------------------- reviews open Google */
.rev-link{font-size:16px;color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:4px}
.rev-link:hover{color:var(--blue)}
/* the name column was sized for 14px type; at the new size "Black Seabass" wrapped on phones */
@media (max-width:600px){.sc-head,.sc-row{--tl:112px;grid-template-columns:112px 1fr}.sc-name{font-size:15px;white-space:nowrap}}

/* ---------------------------------------------------------------- next open dates, hanging off the hero
   A small white card that overlaps the hero's bottom edge, so the page reads as layers rather
   than stacked bands. The "biting now" row is lifted to clear it. One week shows on desktop;
   phones scroll through all twelve days. */
.qr-top{position:relative;z-index:3;margin-top:-58px}
.qr-top .qr-block{width:min(900px,100%);margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:22px;background:#fff;border-radius:20px;padding:14px 14px 14px 24px;
  box-shadow:0 22px 48px rgba(18,28,38,.20),0 3px 10px rgba(18,28,38,.10)}
.qr-top .qr-label b{display:flex;align-items:center;gap:8px;font-size:19px;line-height:1.2;white-space:nowrap}
.qr-top .qr-label span{display:block;font-size:13.5px;line-height:1.4;margin-top:4px;max-width:150px}
.qr-live{width:8px;height:8px;border-radius:50%;background:#2e9e6a;flex:none;box-shadow:0 0 0 0 rgba(46,158,106,.45);
  animation:qrLive 2.4s ease-out infinite}
@keyframes qrLive{0%{box-shadow:0 0 0 0 rgba(46,158,106,.45)}70%{box-shadow:0 0 0 7px rgba(46,158,106,0)}100%{box-shadow:0 0 0 0 rgba(46,158,106,0)}}
.qr-top .qr-scroll{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:0;overflow:visible}
.qr-top .qr-day:nth-child(n+8){display:none}
.qr-top .qr-day{min-width:0;padding:8px 4px 7px;border-radius:12px;background:var(--powder)}
.qr-top .qr-day:hover{background:#fff;border-color:var(--ink)}
.qr-top .qr-dow{font-size:10.5px}
.qr-top .qr-num{font-size:22px;margin:2px 0 1px}
.qr-top .qr-mon{font-size:12px}
.qr-top .qr-more{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:12px;background:var(--ink);
  color:#fff;text-decoration:none;font-size:12.5px;letter-spacing:.08em}
.qr-top .qr-more:hover{background:var(--ink-2)}
/* the hero's bottom edge now carries the card, so the fish row sits higher */
.hero.full{padding-bottom:236px}
.biting{bottom:80px}
@media (min-width:745px) and (max-height:820px){.hero.full{padding-bottom:222px}.qr-top{margin-top:-50px}
  .biting{bottom:70px;gap:8px}.biting-fish img{height:44px}}
@media (max-width:900px){
  .qr-top .qr-block{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label more" "days days";
    gap:12px 14px;padding:16px 16px 14px}
  .qr-top .qr-label{grid-area:label}.qr-top .qr-more{grid-area:more;min-height:40px;padding:0 12px;font-size:11.5px}
  .qr-top .qr-label span{max-width:none}
  .qr-top .qr-scroll{grid-area:days;display:flex;overflow-x:auto;margin:0 -16px;padding:0 16px;scroll-padding-inline:16px}
  .qr-top .qr-day,.qr-top .qr-day:nth-child(n+8){display:block;flex:0 0 60px}
}
@media (max-width:744px){.qr-top{margin-top:-40px}.hero.full{padding-bottom:76px}}
@media (prefers-reduced-motion:reduce){.qr-live{animation:none}}

/* ---------------------------------------------------------------- credentials inside Meet Capt. Stu */
.meet-creds{list-style:none;margin:28px 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.meet-creds li{background:rgba(255,255,255,.08);border-radius:var(--r-card);padding:16px 18px}
.meet-creds b{display:block;font-family:var(--serif);font-size:22px;font-weight:500;color:#fff;line-height:1.2}
.meet-creds span{display:block;font-size:15px;line-height:1.45;color:rgba(255,255,255,.78);margin-top:4px}
@media (max-width:480px){.meet-creds{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- groups & parties (rates) */
.pull{margin:28px 0;padding:22px 26px;border-radius:var(--r-card);background:var(--powder);color:var(--blue);
  font-family:var(--serif);font-size:22px;line-height:1.45}
.pull cite{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;font-size:15px;opacity:.9}

/* ---------------------------------------------------------------- contact: the enquiry form */
.enq{background:var(--frame);border-radius:var(--r-panel);padding:48px}
.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.enq label{display:grid;gap:8px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.enq .full{grid-column:1/-1}
.enq input,.enq select,.enq textarea{font:400 17px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--body);
  border:1px solid #cfd4da;border-radius:12px;padding:14px 16px;background:#fff;width:100%;box-sizing:border-box;min-height:52px}
.enq select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23283849' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center}
.enq input:focus,.enq select:focus,.enq textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--powder)}
.enq textarea{min-height:130px;resize:vertical}
.enq [aria-invalid="true"]{border-color:var(--accent)}
.enq .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enq-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px}
.enq-foot .btn[disabled]{opacity:.6;cursor:wait}
.enq-status{margin:0;font-size:17px;line-height:1.5;color:var(--body);flex:1;min-width:240px}
.enq-status a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.enq-status.ok{background:var(--sea);color:var(--sea-ink);border-radius:12px;padding:14px 16px}
.enq-status.err{background:var(--coral);color:var(--coral-ink);border-radius:12px;padding:14px 16px}
@media (max-width:640px){.enq{padding:28px 20px}.enq-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- contact: directions as steps */
.dir-card .dir-steps{list-style:none;counter-reset:st;margin:8px 0 0;padding:0;display:grid;gap:14px}
.dir-steps li{counter-increment:st;position:relative;padding-left:46px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.86)}
.dir-steps li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  background:var(--blue-hi);color:var(--ink);font-weight:700;font-size:15px;display:grid;place-items:center}
.dir-steps li:last-child{color:#fff;font-weight:500}
.nw{white-space:nowrap}
.dir-card.dir-dark{background:rgba(255,255,255,.07)}
.dir-dark h3{color:#fff;margin-bottom:20px}

/* phones see about a quarter of the wide hero clip; aim that slice at the aft deck, where the
   family is, rather than the middle of the wheelhouse */
@media (max-width:744px){
  .hero.full .hero-frame video{object-position:64% 50%}
  .hero.full .hero-frame .hero-poster{background-position:64% 50%}
}

/* ---------------------------------------------------------------- About: three photos beside the name
   Stu's three picks: the group across the top, the two below side by side. */
.split-media.three{grid-template-columns:1fr 1fr}
.split-media.three figure:first-child{grid-column:1/-1;aspect-ratio:16/10}
.split-media.three figure:nth-child(2),.split-media.three figure:nth-child(3){aspect-ratio:1/1}
/* the camp record card sits on its own, not in a pair */
.camp-record{margin-top:8px}
/* the camp record photo carries Stu's own caption underneath */
.rec-media figure{margin:0}
.feat .rec-cap{margin:12px 2px 0;font-family:var(--serif);font-size:18px;line-height:1.4;color:var(--ink);text-align:center;max-width:none}
@media (max-width:900px){.feat .rec-media{order:-1}}