/* ==========================================================================
   Signature Catamarans — app design system
   White-first, green-accented, built mobile-up. Deliberately unlike the
   dark editorial language of the Aubé Corbeil base: this is a light product
   surface — rounded cards, soft depth, pill controls, thumb-reachable nav.
   ========================================================================== */

:root{
  /* --- GREEN -------------------------------------------------------------
     One green runs the whole site: #377B8A, the colour of the live site's
     header band. Buttons, links, rings and every accent are this green or a
     tint of it. --green-400 is the lighter cut used on dark grounds only. */
  --green-900:#1E4450;
  --green-800:#2B606D;   /* button hover / pressed on light                 */
  --green-700:#377B8A;   /* structural                                      */
  --green-600:#2E6875;
  --green-500:#377B8A;   /* THE accent — actions, links, rings              */
  --green-400:#6FB6C4;   /* accents on dark grounds                         */
  --green-200:#A8CBD4;
  --green-100:#DCEAEE;
  --green-050:#F1F7F9;

  /* --- WHITE / paper ----------------------------------------------------- */
  --paper:#FFFFFF;
  --paper-warm:#F7F7F2;  /* the card fill on the live site                   */
  --paper-cool:#F4F8FB;
  --line:#E4EAEA;
  --line-strong:#CBD9D9;

  /* --- Ink --------------------------------------------------------------- */
  --ink:#17282E;
  --ink-soft:#4E6068;
  --ink-faint:#84969C;

  --navy:#2C3E50;        /* brand navy, kept for footer + photo scrims only */
  --scrim:20,52,60;

  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-pill:999px;

  --sh-1:0 1px 2px rgba(23,40,46,.05), 0 4px 14px -6px rgba(23,40,46,.10);
  --sh-2:0 2px 6px rgba(23,40,46,.06), 0 18px 40px -18px rgba(23,40,46,.20);
  --sh-up:0 -2px 20px -6px rgba(23,40,46,.14);

  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1200px;

  --f-disp:'Caladea',Cambria,Georgia,serif;
  --f-body:'Carlito',Calibri,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* --bar-h must equal brandband (logo height + padding) + navband (48 + 2
     borders). The logo is sized by width at 2.788:1, so these track together. */
  --bar-h:148px;
  --tabs-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media(min-width:480px){:root{--bar-h:160px}}
@media(min-width:720px){:root{--bar-h:180px}}
@media(min-width:1100px){:root{--bar-h:195px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

h1,h2,h3{font-family:var(--f-disp);font-weight:700;line-height:1.14;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2rem,7vw,3.4rem)}
h2{font-size:clamp(1.5rem,5vw,2.3rem)}
h3{font-size:clamp(1.05rem,3.6vw,1.28rem)}
p{margin:0 0 1em}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 18px}
@media(min-width:720px){.wrap{padding:0 32px}}

.sec{padding:44px 0}
@media(min-width:720px){.sec{padding:76px 0}}
.sec-warm{background:var(--paper-warm)}
.sec-cool{background:var(--paper-cool)}
.sec-mint{background:var(--green-050)}
.sec-green{background:var(--green-700);color:#fff}
.sec-green p{color:rgba(255,255,255,.86)}

/* --- labels + rules ------------------------------------------------------ */
.label{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-700);margin:0 0 .8rem;
}
.sec-green .label{color:var(--green-200)}
.label-rule{display:flex;align-items:center;gap:.7rem}
.label-rule::before{content:'';width:34px;height:1px;background:currentColor;opacity:.6;flex:none}
.lede{font-size:clamp(1rem,3.3vw,1.12rem);color:var(--ink-soft);max-width:60ch}
.sec-green .lede{color:rgba(255,255,255,.86)}
.sec-head{margin-bottom:1.7rem}

/* --- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:0 1.5rem;border-radius:var(--r-pill);
  font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border:1.5px solid transparent;transition:.28s var(--ease);white-space:nowrap;
}
.btn-fill{background:var(--green-500);color:#fff}
.btn-fill:active,.btn-fill:hover{background:var(--green-800);border-color:var(--green-800)}
.btn-line{border-color:var(--green-700);color:var(--green-700);background:#fff}
.btn-line:hover{background:var(--green-050)}
.btn-white{background:#fff;color:var(--green-700)}
.btn-ghost-w{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost-w:hover{background:rgba(255,255,255,.12)}
.btn-block{width:100%}
.tlink{
  display:inline-flex;align-items:center;gap:.4em;color:var(--green-500);
  font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  min-height:44px;
}
.tlink i{font-style:normal;transition:transform .3s var(--ease)}
.tlink:hover i{transform:translateX(4px)}
.sec-green .tlink{color:#fff}

/* --- top app bar ---------------------------------------------------------- */
/* Two bands, exactly like the live site: a white band carrying the centred
   logo, then a white row with socials, navigation and the phone. */
.appbar{position:sticky;top:0;z-index:60;background:#fff}

.brandband{
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  padding:12px 16px;
}
.brandband .logo{display:block;line-height:0}
/* The official lockup is a wide 2.79:1 horizontal mark, so it is sized by
   WIDTH — that keeps the wordmark and the "exclusive to lagoon" line legible
   at every breakpoint instead of letting a fixed height shrink them. */
.brandband img{width:240px;height:auto;display:block}
@media(min-width:720px){.brandband{padding:16px}.brandband img{width:274px}}
@media(min-width:1100px){.brandband img{width:314px}}
@media(max-width:479px){.brandband{padding:10px 14px}.brandband img{width:216px}}

.navband{
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.navband-row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:10px;min-height:48px;
}
@media(max-width:899px){.navband-row{grid-template-columns:1fr auto}}

.socials-sm{display:flex;align-items:center;gap:2px}
.socials-sm a{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-pill);
  color:var(--green-700);transition:.25s var(--ease);
}
.socials-sm a:hover{background:var(--green-050);color:var(--green-500)}
.socials-sm svg{width:17px;height:17px;fill:currentColor}

.navband-call{justify-self:end}
@media(max-width:899px){.navband-call{grid-column:2}}

.icon-btn{
  width:42px;height:42px;border-radius:var(--r-pill);display:grid;place-items:center;
  color:var(--green-700);flex:none;
}
.icon-btn:hover{background:var(--green-050)}
.icon-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* nav — desktop only; phones use the bottom tab bar */
.topnav{display:none}
@media(min-width:900px){
  .topnav{display:flex;align-items:center;justify-content:center;gap:2px}
  .topnav > a,.navitem > a{
    display:inline-block;padding:.85em .9em;
    font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:var(--ink-soft);transition:.25s var(--ease);
    border-bottom:2px solid transparent;
  }
  .topnav > a:hover,.navitem > a:hover{color:var(--green-700)}
  .topnav a.on,.navitem.on > a{color:var(--green-800);border-bottom-color:var(--green-500)}
  .nav-contact{
    margin-left:10px;padding:.62em 1.15em!important;border-radius:var(--r-pill);
    background:var(--green-500);color:#fff!important;border-bottom:0!important;
  }
  .nav-contact:hover{background:var(--green-400);color:#fff!important}

  /* submenus */
  .navitem{position:relative}
  .submenu{
    position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
    min-width:230px;background:#fff;border:1px solid var(--line);
    box-shadow:var(--sh-2);border-radius:var(--r-sm);padding:6px;
    opacity:0;visibility:hidden;transition:.24s var(--ease);z-index:5;
  }
  .navitem:hover .submenu,.navitem:focus-within .submenu{
    opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  }
  .submenu a{
    display:block;padding:.62em .8em;border-radius:6px;
    font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--ink-soft);
    text-transform:none;border-bottom:0;
  }
  .submenu a:hover{background:var(--green-050);color:var(--green-700)}
  .submenu a.on{background:var(--green-100);color:var(--green-800)}
}

/* --- bottom tab bar (mobile) ---------------------------------------------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  height:calc(var(--tabs-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);box-shadow:var(--sh-up);
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);transition:color .2s var(--ease);
}
.tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar a.on{color:var(--green-500)}
.tabbar a.on svg{stroke-width:2.1}
@media(min-width:900px){.tabbar{display:none}}
body{padding-bottom:calc(var(--tabs-h) + var(--safe-b))}
@media(min-width:900px){body{padding-bottom:0}}

/* --- hero ----------------------------------------------------------------- */
.hero{position:relative;padding:0 0 26px}
.hero-card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  min-height:min(70vh,540px);display:flex;align-items:flex-end;
  color:#fff;box-shadow:var(--sh-2);
}
@media(min-width:900px){.hero-card{min-height:min(76vh,640px);border-radius:26px}}
.hero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:32% center}
.hero-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,38,44,.92) 0%,rgba(15,38,44,.55) 40%,rgba(15,38,44,.12) 72%,rgba(15,38,44,.30) 100%);
}
.hero-inner{position:relative;z-index:1;padding:26px 22px 26px}
@media(min-width:720px){.hero-inner{padding:44px 44px 46px;max-width:44rem}}
.hero-card .label{color:#fff;opacity:.96;text-shadow:0 1px 12px rgba(15,38,44,.7)}
.hero-card h1,.hero-card p{text-shadow:0 2px 18px rgba(15,38,44,.45)}
.hero-card h1{margin-bottom:.35em}
.hero-card h1 em{font-style:normal;color:var(--green-200)}
.hero-card p{color:rgba(255,255,255,.9);margin-bottom:1.4rem;max-width:38ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-actions .btn{flex:1 1 auto;min-width:0}
@media(min-width:560px){.hero-actions .btn{flex:0 0 auto}}
.hero-pad{padding-top:16px}

/* --- quick chips under the hero ------------------------------------------- */
.chiprow{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:14px 18px 2px;margin:0 -18px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.chiprow::-webkit-scrollbar{display:none}
.chip{
  flex:none;scroll-snap-align:start;
  display:inline-flex;align-items:center;gap:.45em;min-height:42px;padding:0 1.05rem;
  border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:#fff;color:var(--ink-soft);
  font-size:.76rem;font-weight:700;letter-spacing:.06em;
  transition:.24s var(--ease);
}
.chip svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chip:hover{border-color:var(--green-500);color:var(--green-700)}
.chip.on{background:var(--green-500);border-color:var(--green-500);color:#fff}

/* --- horizontal snap rail -------------------------------------------------- */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:78%;
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 18px 18px;margin:0 -18px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:center}
@media(min-width:560px){.rail{grid-auto-columns:46%}}
@media(min-width:900px){
  .rail{
    grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;
    overflow:visible;padding:0;margin:0;gap:22px;
  }
}

/* --- cards ----------------------------------------------------------------- */
.card{
  background:var(--paper-warm);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--green-200)}
.card-img{aspect-ratio:4/3;background:var(--green-050);overflow:hidden;position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.card:hover .card-img img{transform:scale(1.04)}
.card-tag{
  position:absolute;top:10px;left:10px;z-index:1;
  background:rgba(255,255,255,.94);color:var(--green-800);
  font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:.42em .8em;border-radius:var(--r-pill);
}
.card-tag.hot{background:var(--green-500);color:#fff}
.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.card-body h3{margin-bottom:.4rem}
.spec{
  display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:0 0 .9rem;padding:0;list-style:none;
  font-size:.82rem;color:var(--ink-soft);
}
.spec b{color:var(--green-800);font-weight:700}
.card .tlink{margin-top:auto}

/* --- feature tiles ---------------------------------------------------------- */
.tiles{display:grid;gap:12px}
@media(min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:20px 18px;
}
.sec-warm .tile{background:#fff}
.tile-ico{
  width:42px;height:42px;border-radius:var(--r-sm);background:var(--green-100);
  color:var(--green-700);display:grid;place-items:center;margin-bottom:14px;
}
.tile-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-size:1.05rem;margin-bottom:.3rem}
.tile p{font-size:.92rem;color:var(--ink-soft);margin:0}

/* --- numbered list ---------------------------------------------------------- */
.numlist{counter-reset:n;display:grid;gap:12px}
.numitem{
  counter-increment:n;position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:18px 18px 18px 62px;
}
.numitem::before{
  content:counter(n,decimal-leading-zero);
  position:absolute;left:18px;top:17px;
  font-family:var(--f-disp);font-size:1.25rem;font-weight:700;color:var(--green-500);
}
.numitem h3{font-size:1.02rem;margin-bottom:.25rem}
.numitem p{font-size:.92rem;color:var(--ink-soft);margin:0}

/* --- stats ------------------------------------------------------------------ */
.statrow{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:720px){.statrow{grid-template-columns:repeat(4,1fr)}}
.statbox{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:18px 14px;text-align:center;
}
.sec-green .statbox{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.statbox b{
  display:block;font-family:var(--f-disp);font-size:clamp(1.6rem,6vw,2.3rem);
  line-height:1;color:var(--green-700);
}
.sec-green .statbox b{color:#fff}
.statbox span{display:block;margin-top:.5rem;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.sec-green .statbox span{color:rgba(255,255,255,.7)}

/* --- media + text ------------------------------------------------------------ */
.duo{display:grid;gap:20px;align-items:center}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr;gap:48px}.duo.flip .duo-media{order:2}}
.duo-media{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1)}
.duo-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(min-width:900px){.duo-media img{aspect-ratio:5/4}}

/* --- page header (inner pages) ------------------------------------------------ */
.phead{padding:26px 0 6px}
.phead h1{margin-bottom:.25em}
.phead .lede{margin-bottom:0}
.phead-media{
  margin-top:20px;border-radius:var(--r-lg);overflow:hidden;position:relative;
  aspect-ratio:16/10;box-shadow:var(--sh-1);
}
@media(min-width:720px){.phead-media{aspect-ratio:21/8}}
.phead-media img{width:100%;height:100%;object-fit:cover}

/* --- spec strip ---------------------------------------------------------------- */
.specstrip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
@media(min-width:720px){.specstrip{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.specstrip{grid-template-columns:repeat(6,1fr)}}
.specstrip div{background:#fff;padding:16px 12px;text-align:center}
.specstrip b{display:block;font-family:var(--f-disp);font-size:1.05rem;color:var(--green-800)}
.specstrip span{display:block;margin-top:.35rem;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}

/* --- accordion (FAQ + configurator) --------------------------------------------- */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.acc + .acc{margin-top:10px}
.acc summary{
  list-style:none;cursor:pointer;padding:16px 46px 16px 18px;position:relative;
  font-family:var(--f-disp);font-weight:700;font-size:1.02rem;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:'';position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--green-500);border-bottom:2px solid var(--green-500);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.acc[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc .acc-body{padding:0 18px 18px;font-size:.94rem;color:var(--ink-soft)}
.acc .acc-body p:last-child{margin-bottom:0}

/* --- form -------------------------------------------------------------------- */
.form{display:grid;gap:14px}
@media(min-width:640px){.form{grid-template-columns:1fr 1fr}}
.f{display:flex;flex-direction:column;gap:.4rem}
.f.wide{grid-column:1/-1}
.f label{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.f input,.f select,.f textarea{
  font:inherit;font-size:1rem;min-height:48px;padding:.7rem .9rem;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);
  width:100%;
}
.f textarea{min-height:120px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--green-500);outline-offset:1px;border-color:var(--green-500)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.check input{width:20px;height:20px;min-height:0;margin-top:.15rem;accent-color:var(--green-500);flex:none}
.hp{position:absolute!important;left:-9999px!important}
.note{font-size:.78rem;color:var(--ink-faint)}
.status{
  display:none;margin-top:12px;padding:.85rem 1rem;border-radius:var(--r-sm);
  background:var(--green-050);border:1px solid var(--green-200);font-size:.92rem;
}
.status.show{display:block}
.status.err{background:#FDF0EF;border-color:#F0C3C0;color:#8C2F2A}

/* --- bottom sheet -------------------------------------------------------------- */
.sheet-scrim{
  position:fixed;inset:0;z-index:90;background:rgba(15,38,44,.5);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.sheet-scrim.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  max-height:86vh;overflow:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:10px 18px calc(24px + var(--safe-b));
  transform:translateY(102%);transition:transform .38s var(--ease);
  box-shadow:0 -10px 50px -12px rgba(23,40,46,.4);
}
.sheet.open{transform:translateY(0)}
@media(min-width:720px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(560px,92vw);
    border-radius:var(--r-lg);transform:translate(-50%,-42%) scale(.97);opacity:0;
    max-height:84vh;padding:22px 26px 26px}
  .sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1}
}
.sheet-grab{width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto 14px}
@media(min-width:720px){.sheet-grab{display:none}}
.sheet-close{position:absolute;top:14px;right:16px;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);box-shadow:var(--sh-1)}

/* --- footer -------------------------------------------------------------------- */
.foot{background:var(--green-900);color:rgba(255,255,255,.74);padding:40px 0 28px;font-size:.94rem}
.foot-grid{display:grid;gap:26px}
@media(min-width:640px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.foot h4{font-family:var(--f-body);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0 0 .9em}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.2em}
.foot ul a{display:inline-flex;align-items:center;min-height:40px}
.foot .off a{min-height:34px}
.foot a:hover{color:var(--green-200)}
.foot img{width:200px;height:auto;margin-bottom:14px}
.foot .off b{display:block;color:#fff;font-size:.85rem}
.socials{display:flex;gap:10px;margin-top:14px}
.socials a{
  width:40px;height:40px;border:1px solid rgba(255,255,255,.25);border-radius:var(--r-pill);
  display:grid;place-items:center;transition:.25s var(--ease);
}
.socials a svg{width:18px;height:18px;fill:currentColor}
.socials a:hover{background:var(--green-500);border-color:var(--green-500);color:#fff}
.foot-base{
  margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.76rem;color:rgba(255,255,255,.52);display:grid;gap:8px;
}
@media(min-width:900px){.foot-base{grid-template-columns:auto 1fr;gap:26px}}

/* --- misc ---------------------------------------------------------------------- */
.disc{font-size:.82rem;line-height:1.65;color:var(--ink-faint);background:var(--paper-warm);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.sec-green .disc{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.78)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:.7em 1.1em;border-radius:var(--r-sm)}
/* Content is visible by default and the reveal is an enhancement on top of it.
   Hiding first and un-hiding from JavaScript means one throttled observer — a
   backgrounded tab, a restored session, a script that fails to reach the
   observer — leaves the whole page blank. `js-reveal` is set on <html> by the
   inline bootstrap only when the browser can actually run the animation, so
   the hidden state never exists unless something is going to undo it. */
.rev{opacity:1;transform:none}
html.js-reveal .rev{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
html.js-reveal .rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rev,html.js-reveal .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation:none!important}
}
.install{
  position:fixed;left:12px;right:12px;bottom:calc(var(--tabs-h) + var(--safe-b) + 12px);
  z-index:80;background:#fff;border:1px solid var(--green-200);border-radius:var(--r);
  box-shadow:var(--sh-2);padding:14px 16px;display:none;align-items:center;gap:12px;
}
.install.show{display:flex}
.install p{margin:0;font-size:.88rem;flex:1}
@media(min-width:900px){.install{left:auto;right:20px;bottom:20px;max-width:380px}}

/* anchors must clear the taller sticky bar */
[id]{scroll-margin-top:calc(var(--bar-h) + 14px)}

/* --- greeter (js/chat.js) --------------------------------------------------
   A launcher, a one-time nudge and a panel. Sits above the tab bar on phones
   and in the corner from 900px up. Lifts out of the way if the install
   prompt is showing, since that banner owns the same corner. */
.sc-chat{
  position:fixed;right:12px;bottom:calc(var(--tabs-h) + var(--safe-b) + 12px);
  z-index:78;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
@media(min-width:900px){.sc-chat{right:20px;bottom:20px}}
.install.show ~ .sc-chat{bottom:calc(var(--tabs-h) + var(--safe-b) + 92px)}
@media(min-width:900px){.install.show ~ .sc-chat{bottom:20px;right:420px}}

/* launcher */
.sc-chat-fab{
  order:3;display:inline-flex;align-items:center;gap:.5rem;
  min-height:48px;padding:0 1.05rem 0 .95rem;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--green-500);color:#fff;
  font-family:var(--f-body);font-size:.78rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  box-shadow:var(--sh-2);transition:background .2s var(--ease),transform .2s var(--ease);
}
.sc-chat-fab:hover{background:var(--green-800)}
.sc-chat-fab:active{transform:scale(.97)}
.sc-chat-fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-chat.on .sc-chat-fab span{display:none}
.sc-chat.on .sc-chat-fab{padding:0;width:48px;justify-content:center}

/* the nudge bubble */
.sc-chat-nudge{
  order:2;position:relative;max-width:250px;text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--green-200);border-radius:var(--r);
  box-shadow:var(--sh-2);padding:14px 30px 12px 14px;
  animation:scChatIn .38s var(--ease) both;
}
.sc-chat-nudge p{margin:0 0 .35rem;font-size:.9rem;line-height:1.45;color:var(--ink)}
.sc-chat-nudge-cta{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-500)}
.sc-chat-nudge-x{
  position:absolute;top:4px;right:4px;width:28px;height:28px;line-height:1;
  border:0;background:none;cursor:pointer;color:var(--ink-faint);font-size:1.1rem;border-radius:50%;
}
.sc-chat-nudge-x:hover{color:var(--ink);background:var(--green-050)}
@keyframes scChatIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* the panel */
.sc-chat-panel{
  order:1;display:flex;flex-direction:column;overflow:hidden;
  width:min(360px,calc(100vw - 24px));
  max-height:min(560px,calc(100vh - var(--tabs-h) - var(--safe-b) - 96px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);animation:scChatIn .3s var(--ease) both;
}
@media(min-width:900px){.sc-chat-panel{max-height:min(600px,calc(100vh - 120px))}}
.sc-chat-panel[hidden]{display:none}

.sc-chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 12px 13px 16px;background:var(--green-500);color:#fff;
}
.sc-chat-head strong{display:block;font-family:var(--f-disp);font-size:1rem;font-weight:700}
.sc-chat-head span{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.sc-chat-close{
  width:32px;height:32px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.2rem;line-height:1;
}
.sc-chat-close:hover{background:rgba(255,255,255,.3)}

.sc-chat-log{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 14px 6px;display:flex;flex-direction:column;gap:9px;
  background:var(--green-050);
}
.sc-msg{
  max-width:88%;padding:10px 13px;border-radius:var(--r);
  font-size:.9rem;line-height:1.5;animation:scChatIn .26s var(--ease) both;
}
.sc-msg.them{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:6px}
.sc-msg.me{align-self:flex-end;background:var(--green-500);color:#fff;border-bottom-right-radius:6px}
.sc-msg a{color:var(--green-600);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.sc-chat-link{display:inline-block;margin-top:.25rem}

.sc-chat-foot{padding:12px 14px calc(14px + var(--safe-b));background:#fff;border-top:1px solid var(--line)}
.sc-chat-foot:empty{display:none}
.sc-chips{display:flex;flex-wrap:wrap;gap:7px}
.sc-chip,.sc-chat-skip{
  font-family:var(--f-body);font-size:.82rem;cursor:pointer;
  padding:.55rem .85rem;border-radius:var(--r-pill);
  border:1px solid var(--green-200);background:var(--green-050);color:var(--green-900);
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.sc-chip:hover,.sc-chat-skip:hover{background:var(--green-100);border-color:var(--green-500)}
.sc-chat-skip{display:block;margin-top:8px;border-style:dashed;background:none;color:var(--ink-soft)}

.sc-chat-form{display:flex;flex-direction:column;gap:8px}
.sc-chat-form input,.sc-chat-form textarea{
  font-family:var(--f-body);font-size:.92rem;width:100%;
  padding:.6rem .75rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);
}
.sc-chat-form input:focus,.sc-chat-form textarea:focus{
  outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px var(--green-100);
}
.sc-chat-form textarea{resize:vertical;min-height:52px}
.sc-chat-send{
  min-height:44px;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--green-500);color:#fff;font-family:var(--f-body);
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.sc-chat-send:hover{background:var(--green-800)}
.sc-chat-send:disabled{background:var(--green-200);cursor:default}
.sc-chat-note{margin:0;font-size:.72rem;line-height:1.45;color:var(--ink-faint)}
.sc-chat-err{margin:0;font-size:.8rem;color:#B3261E}
.sc-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.sc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){
  .sc-chat-nudge,.sc-chat-panel,.sc-msg{animation:none}
  .sc-chat-fab{transition:none}
}

/* --- articles -------------------------------------------------------------
   A reading column, not a marketing column. 66 characters at the widest,
   generous leading, and headings that break the scroll without shouting. */
.wrap-narrow{max-width:720px;margin-inline:auto}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pill{
  display:inline-flex;align-items:center;gap:.45em;min-height:40px;padding:0 .95rem;
  border-radius:var(--r-pill);border:1px solid var(--line-strong);cursor:pointer;
  background:#fff;color:var(--ink-soft);font-family:var(--f-body);
  font-size:.74rem;font-weight:700;letter-spacing:.05em;
  transition:.22s var(--ease);
}
.pill b{font-weight:700;opacity:.5;font-size:.7rem}
.pill:hover{border-color:var(--green-500);color:var(--green-700)}
.pill.on{background:var(--green-500);border-color:var(--green-500);color:#fff}
.pill.on b{opacity:.75}

.postgrid{display:grid;gap:18px}
@media(min-width:640px){.postgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.postgrid{grid-template-columns:repeat(3,1fr)}}

.postcard{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.postcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.postcard-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-warm)}
.postcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.postcard:hover .postcard-img img{transform:scale(1.04)}
.postcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:.5rem;flex:1}
.postcard-body time{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.postcard-body h3{font-size:1.05rem;line-height:1.3;margin:0}
.postcard-body h3 a{color:var(--ink)}
.postcard-body h3 a:hover{color:var(--green-600)}
.postcard-body p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.postcard-body .tlink{margin-top:auto;padding-top:.4rem}

.posthead{padding:26px 0 0}
.posthead .back{display:inline-block;margin-bottom:1.1rem;font-size:.78rem}
.posthead h1{font-size:clamp(1.7rem,5.6vw,2.6rem);line-height:1.14;margin:.4rem 0 .6rem}
.postmeta{font-size:.8rem;letter-spacing:.04em;color:var(--ink-faint);margin:0 0 22px}

.prose{padding:26px 0 8px;font-size:1.03rem;line-height:1.75;color:var(--ink)}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.15em}
.prose h2{
  font-family:var(--f-disp);font-size:clamp(1.25rem,3.6vw,1.6rem);line-height:1.25;
  margin:2.1em 0 .6em;color:var(--green-900);
}
.prose h3{font-size:1.08rem;margin:1.6em 0 .4em}
.prose ul{margin:0 0 1.15em;padding-left:1.15rem}
.prose li{margin:0 0 .45em}
.prose a{color:var(--green-600);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--green-900)}

.postnote{
  margin:8px 0 30px;padding:16px 18px;border-radius:var(--r);
  background:var(--paper-warm);border:1px solid var(--line);
}
.postnote p{margin:0;font-size:.8rem;line-height:1.65;color:var(--ink-faint)}
.postcta{padding:0 0 44px;text-align:center}
.postcta h2{font-size:1.35rem;margin:0 0 .4rem}
.postcta p{color:var(--ink-soft);margin:0 0 1.2rem}
.postcta .hero-actions{justify-content:center}

/* --- builder photography ---------------------------------------------------
   The stage is the big picture of whatever they last chose. It only appears
   when there is a real photograph to show — see build-config-images.js. */
.cfg-stage{
  position:relative;margin:0 0 18px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper-warm);border:1px solid var(--line);
  aspect-ratio:16/9;
}
@media(min-width:900px){.cfg-stage{aspect-ratio:21/9}}
.cfg-stage img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s var(--ease)}
.cfg-stage.swapping img{opacity:.45}
.cfg-stage figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(15,38,44,.78),rgba(15,38,44,0));
}
.opt-shot{
  flex:none;width:56px;height:56px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--paper-warm);border:1px solid var(--line);
}
.opt-shot img{width:100%;height:100%;object-fit:cover;display:block}
.opt.has-shot.on .opt-shot{border-color:var(--green-500)}
@media(prefers-reduced-motion:reduce){.cfg-stage img{transition:none}}

/* --- the line-up ----------------------------------------------------------
   Lagoon's own way of showing a range: every hull on one waterline, scaled
   against the others, feet above metres. Pale ground so the white hulls read. */
.lineup{
  padding:clamp(46px,8vw,88px) 0 clamp(30px,5vw,52px);
  background:linear-gradient(180deg,#FFFFFF 0%,#F2F7F9 62%,#E9F1F4 100%);
  overflow:hidden;
}
.lineup .sec-head{margin-bottom:clamp(18px,4vw,34px)}
/* the strip gets more room than the reading column — seven boats need it */
@media(min-width:1280px){.lineup .wrap{max-width:1440px}}
.lineup-strip{
  display:flex;align-items:flex-end;justify-content:flex-start;
  gap:clamp(4px,1.6vw,26px);
  overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:6px;
}
.lineup-strip::-webkit-scrollbar{display:none}
/* the strip scrolls when the hulls will not fit; no fade overlay, because the
   section's own vertical gradient means a flat horizontal one never matches */
.lineup-scroll{position:relative}
.lu{
  flex:0 0 auto;width:clamp(96px,10.5vw,164px);scroll-snap-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;
}
.lu-art{
  /* Scaled on BOTH axes by the model's real hull length, otherwise every
     boat is width-constrained into the same size and the lineup stops being
     a comparison. --s is length ÷ longest hull. */
  display:block;width:calc(var(--s) * 100%);
  transition:transform .4s var(--ease);
}
.lu:hover .lu-art{transform:translateY(-5px)}
.lu-art .prof-hull,
.lu-art .prof-art-img{display:block;width:100%;height:auto;overflow:visible}
.lu-ft{
  margin-top:12px;font-family:var(--f-disp);font-size:clamp(1rem,2.4vw,1.5rem);
  color:var(--ink);line-height:1;
}
.lu-ft i{font-style:normal;font-size:.7em;vertical-align:top;opacity:.7}
.lu:hover .lu-ft{color:var(--green-700)}
.lu-m{
  margin-top:5px;font-size:.62rem;letter-spacing:.12em;
  color:var(--green-600);white-space:nowrap;
}
.lineup-water{
  height:1px;margin-top:10px;
  background:linear-gradient(90deg,rgba(55,123,138,0),rgba(55,123,138,.5),rgba(55,123,138,0));
}
.lineup-foot{display:flex;justify-content:center;margin-top:clamp(22px,4vw,38px)}
@media(max-width:900px){.lu{width:clamp(88px,26vw,130px)}}

/* --- the range, as cards --------------------------------------------------- */
.range{
  padding:clamp(48px,8vw,90px) 0;
  background:var(--green-900);color:#fff;
}
.range-toggle{
  display:flex;gap:4px;margin:0 auto clamp(26px,5vw,44px);width:max-content;max-width:100%;
  padding:4px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
}
.range-toggle button{
  border:0;cursor:pointer;border-radius:var(--r-pill);
  padding:.7rem 1.15rem;background:none;color:rgba(255,255,255,.62);
  font-family:var(--f-body);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;transition:.24s var(--ease);
  white-space:nowrap;
}
.range-toggle button:hover{color:#fff}
.range-toggle button.on{background:var(--green-500);color:#fff}
@media(max-width:480px){.range-toggle button{padding:.6rem .8rem;font-size:.6rem;letter-spacing:.08em}}

.range-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:600px){.range-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.range-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.rcard{
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.rcard:hover{border-color:var(--green-400);transform:translateY(-3px);background:rgba(255,255,255,.07)}
.rcard-art{
  position:relative;display:block;aspect-ratio:4/3;
  padding:16px 10px 12px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 12%,#F6FAFB 0%,#E4EDF0 58%,#D3E0E5 100%);
}
.rcard-art .prof-hull,
.rcard-art .prof-art-img{
  width:100%;height:100%;display:block;overflow:visible;
  object-fit:contain;object-position:center bottom;
  transition:transform .5s var(--ease);
}
.rcard:hover .rcard-art .prof-hull,
.rcard:hover .rcard-art .prof-art-img{transform:translateY(-4px) scale(1.03)}
/* a waterline so the boat sits on something rather than floating */
.rcard-art::after{
  content:'';position:absolute;left:10%;right:10%;bottom:11px;height:1px;
  background:linear-gradient(90deg,rgba(55,123,138,0),rgba(55,123,138,.42),rgba(55,123,138,0));
}
.rcard-badge{
  position:absolute;top:10px;left:10px;
  padding:.3em .7em;border-radius:3px;background:var(--green-500);color:#fff;
  font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.rcard-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:.45rem;flex:1}
.rcard-kind{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-400)}
.rcard-body h3{font-size:1.3rem;margin:0;color:#fff;font-weight:400}
.rcard-specs{display:flex;gap:1.1rem;margin:.5rem 0 0;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.12)}
.rcard-specs div{display:flex;flex-direction:column-reverse;gap:2px}
.rcard-specs dd{margin:0;font-size:.9rem;color:#fff}
.rcard-specs dt{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.rcard-go{
  margin-top:auto;padding-top:.9rem;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-400);
}
.rcard:hover .rcard-go{color:#fff}

/* --- this autumn ----------------------------------------------------------- */
.autumn{background:var(--paper-warm)}
.autumn .sec-head .lede{margin-top:.6rem}
.autumn-next{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin:26px 0 22px;padding:16px 18px;border-radius:var(--r);
  background:var(--green-900);color:#fff;box-shadow:var(--sh-2);
}
.autumn-next[hidden]{display:none}
.autumn-lead{
  flex:0 0 100%;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green-200);
}
.autumn-title{font-family:var(--f-disp);font-size:1.2rem}
.autumn-when{font-size:.84rem;color:rgba(255,255,255,.72)}
.autumn-count{display:flex;gap:8px;margin-left:auto}
.autumn-count div{
  min-width:52px;padding:6px 9px;border-radius:var(--r-sm);text-align:center;
  background:rgba(255,255,255,.13);
}
.autumn-count b{display:block;font-family:var(--f-disp);font-size:1.15rem;line-height:1.1}
.autumn-count span{font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}
@media(max-width:520px){.autumn-count{margin-left:0}.autumn-count div{min-width:44px}}

.calendar{list-style:none;margin:0;padding:0;counter-reset:cal}
.cal-row{
  border-top:1px solid var(--line-strong);
  padding:16px 0;
}
.cal-row:last-child{border-bottom:1px solid var(--line-strong)}
.cal-row > a{display:inline-block}
.cal-when{display:block;margin-bottom:.35rem}
.cal-when b{
  display:block;font-family:var(--f-body);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-700);
}
.cal-when > span{font-size:.78rem;color:var(--ink-faint)}
.cal-what b{display:block;font-family:var(--f-disp);font-size:1.22rem;margin-bottom:.3rem;color:var(--ink)}
.cal-what > span{display:block;font-size:.93rem;line-height:1.6;color:var(--ink-soft);max-width:62ch}
.cal-go{
  display:inline-block;margin-top:.7rem;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-500);
}
.cal-go:hover{color:var(--green-800)}
.cal-row.is-next{position:relative;padding-left:16px}
.cal-row.is-next::before{
  content:'';position:absolute;left:0;top:16px;bottom:16px;width:3px;
  border-radius:2px;background:var(--green-500);
}
@media(min-width:820px){
  .cal-row{display:grid;grid-template-columns:210px 1fr auto;gap:24px;align-items:start}
  .cal-when{margin-bottom:0}
  .cal-go{margin-top:0;white-space:nowrap}
}
.autumn-foot{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* --- the quiet places line ------------------------------------------------- */
.places{background:var(--green-900);color:#fff}
.places p{
  margin:0;padding:14px 0;display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:center;text-align:center;
  gap:.5rem 1.5rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.places b{color:#fff;font-weight:700}
.places span{color:rgba(255,255,255,.6)}
@media(max-width:520px){.places p{gap:.4rem 1rem;font-size:.62rem;letter-spacing:.1em}}

/* --- life aboard: full bleed ----------------------------------------------- */
.lifeband{
  position:relative;min-height:min(82svh,720px);display:flex;align-items:flex-end;
  overflow:hidden;color:#fff;background:var(--green-900);
}
.lifeband-media{position:absolute;inset:0;overflow:hidden}
.lifeband-media img{
  width:100%;height:100%;object-fit:cover;object-position:64% 62%;transform:scale(1.06);
}
/* two scrims, not one: the vertical one seats the copy on the image, the
   horizontal one keeps the left column readable without dimming the people
   on the right, who are the reason the photograph is here at all. */
.lifeband-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to left,rgba(10,32,38,.62) 0%,rgba(10,32,38,.3) 36%,rgba(10,32,38,0) 66%),
    linear-gradient(to top,rgba(10,32,38,.88) 0%,rgba(10,32,38,.38) 46%,rgba(10,32,38,.05) 78%);
}
/* The copy sits over the open water to starboard rather than on top of the
   people in the forward cockpit — they are the photograph's subject. */
@media(min-width:900px){
  .lifeband-copy .wrap{display:flex;justify-content:flex-end}
  .lifeband-col{width:min(48ch,52%)}
}
@media(max-width:719px){
  .lifeband-media img{object-position:56% 60%}
  .lifeband-media::after{
    background:linear-gradient(to top,rgba(10,32,38,.94) 0%,rgba(10,32,38,.56) 52%,rgba(10,32,38,.18) 82%);
  }
}
.lifeband-copy{position:relative;z-index:2;width:100%;padding:0 0 clamp(34px,7vh,72px)}
.lifeband-copy h2{
  font-size:clamp(2rem,6.6vw,3.8rem);line-height:1.06;margin:.2em 0 .5em;
  text-shadow:0 4px 34px rgba(10,32,38,.45);
}
.lifeband-copy h2 em{font-style:normal;display:block;color:var(--green-200)}
.lifeband-copy p{max-width:46ch;color:rgba(255,255,255,.9);margin-bottom:1.5rem}
.lifeband-copy .label{color:#fff}

/* --- the mosaic ------------------------------------------------------------ */
.mosaic{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.mosaic{grid-template-columns:repeat(3,1fr);gap:16px}}
.mosaic figure{
  position:relative;margin:0;overflow:hidden;border-radius:var(--r);
  aspect-ratio:4/5;background:var(--paper-warm);
}
.mosaic figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform .7s var(--ease)}
.mosaic figure:hover img{transform:scale(1.12)}
.mosaic figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(10,32,38,.8),rgba(10,32,38,0));
}
@media(min-width:820px){
  /* 3 columns: the tall one holds column 1 across both rows, two squares sit
     beside it, and the wide one closes the block underneath. No empty cells. */
  .mosaic .m-tall{grid-row:span 2;aspect-ratio:auto}
  .mosaic .m-wide{grid-column:span 2;aspect-ratio:16/9}
}
@media(max-width:819px){
  .mosaic .m-wide{grid-column:span 2;aspect-ratio:16/9}
}

/* --- header sitting inside the film ----------------------------------------
   On a page that opens with video the bar is part of the picture rather than
   a white block above it: transparent, white lockup, hairline rules — and it
   turns solid the moment you scroll off the hero, so the nav never becomes
   unreadable over pale footage. */
/* On a film page the mark never leaves — it sits over the video in white and
   turns dark with the bar. Only the navigation row arrives on scroll, so the
   top of the page is the film, the logo, and one line of type. */
body.hero-page .appbar{
  position:fixed;left:0;right:0;top:0;
  background:transparent;box-shadow:none;
  transition:background .38s var(--ease),box-shadow .38s var(--ease);
}
body.hero-page .brandband{background:transparent}
body.hero-page .brandband img.logo-dark{display:none}
body.hero-page .brandband img.logo-light{display:block}

/* On a page that opens with film the navigation stays out of the picture: at
   rest the visitor sees the mark over the video and nothing else, and the bar
   drops in as soon as they start scrolling. It keeps its space rather than
   collapsing, so nothing below it jumps when it arrives.

   The one rule that must never break again: the moment the bar is visible it
   is also clickable, and it is visible on every page that is not film-led.
   `past-hero` is set from scroll with hysteresis (in at 80px, out below 20px)
   and re-evaluated on every route change, so it cannot get stuck hidden. */
body.hero-page .navband{
  background:linear-gradient(to bottom,rgba(10,32,38,.34),rgba(10,32,38,.14));
  border-color:transparent;
  transition:background .38s var(--ease),border-color .38s var(--ease),
             opacity .34s var(--ease),transform .34s var(--ease);
}
/* visibility, not just opacity — a bar you cannot see must not be reachable
   by tab either, or a keyboard visitor lands in an invisible menu */
body.hero-page:not(.past-hero) .navband{
  opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;
}
body.hero-page:not(.past-hero) .topnav > a,
body.hero-page:not(.past-hero) .navitem > a{color:#fff}
body.hero-page:not(.past-hero) .topnav > a:hover,
body.hero-page:not(.past-hero) .navitem > a:hover{color:var(--green-200)}
body.hero-page:not(.past-hero) .topnav a.on,
body.hero-page:not(.past-hero) .navitem.on > a{
  color:#fff;border-bottom-color:var(--green-200);
}
body.hero-page:not(.past-hero) .socials-sm a,
body.hero-page:not(.past-hero) .icon-btn{color:#fff}
body.hero-page:not(.past-hero) .socials-sm a:hover,
body.hero-page:not(.past-hero) .icon-btn:hover{background:rgba(255,255,255,.14);color:#fff}

body.hero-page.past-hero .appbar{background:#fff;box-shadow:var(--sh-1)}
body.hero-page.past-hero .brandband{background:#fff}
body.hero-page.past-hero .brandband img.logo-dark{display:block}
body.hero-page.past-hero .brandband img.logo-light{display:none}
body.hero-page.past-hero .navband{
  background:#fff;border-top-color:var(--line);border-bottom-color:var(--line);
}

/* the film starts at the very top and runs the full screen behind the bar */
/* nothing above it, so the film owns the full screen and the type is
   centred in it rather than hanging off the bottom-left */
body.hero-page .vhero{
  height:100svh;max-height:none;margin-top:calc(-1 * var(--bar-h));
  /* The film is pulled up behind the transparent header, so the copy has to be
     pushed back down past it before it is centred — otherwise on a short laptop
     window the headline rises underneath the brand lockup. The header's own
     height is the floor here, not a guess in vh, because vh collapses exactly
     where the two elements are closest. */
  padding-top:calc(var(--bar-h) + clamp(48px,7vh,112px));
  align-items:center;text-align:center;
}
body.hero-page .vhero-inner{padding-bottom:0}
body.hero-page .vhero h1{
  font-size:clamp(1.9rem,5.2vw,3.6rem);line-height:1.08;margin-bottom:.45em;
}
body.hero-page .vhero p{margin-inline:auto;max-width:40ch}
body.hero-page .vhero .label{justify-content:center}
body.hero-page .vhero .hero-actions{justify-content:center}
@media(prefers-reduced-motion:reduce){body.hero-page .appbar{transition:none}}

/* the mark, hidden by default off the film pages */
.brandband img.logo-light{display:none}
.cal-boats{
  display:block;margin:0 0 .4rem;font-style:normal;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-600);
}

/* ===========================================================================
   Model cards with real photography
   The card art was a white-background profile render for every boat, which
   made twelve very different catamarans look like twelve line drawings. Where
   Lagoon has photographed the boat we now show the boat. Where they have not,
   the render stays — on the tinted panel, labelled — because a render that
   admits to being a render beats a photograph of the wrong hull.
   ========================================================================= */
.rcard-art.has-photo{padding:0;background:#0E2A31}
.rcard-photo{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;
  transition:transform .6s var(--ease);
}
.rcard:hover .rcard-photo{transform:scale(1.045)}
.rcard-art.has-photo::after{
  content:'';position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(180deg,rgba(6,26,31,0),rgba(6,26,31,.34));
  left:0;right:0;bottom:0;
}
.rcard-note{
  position:absolute;left:10px;bottom:10px;z-index:2;
  padding:.28em .6em;border-radius:3px;background:rgba(11,42,49,.72);color:#fff;
  font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;
}

/* ---- model page: editorial run ---- */
.mstory{margin-top:34px;display:grid;gap:26px}
.mstory-block{max-width:66ch}
.mstory-block h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,2.4vw,1.7rem);
  margin:0 0 .5rem;color:var(--ink);
}
.mstory-block p{margin:0;color:var(--ink-soft);line-height:1.72}
.mnote{
  margin-top:26px;padding:14px 16px;border-radius:var(--r);max-width:70ch;
  background:rgba(55,123,138,.07);border:1px solid rgba(55,123,138,.2);
  font-size:.92rem;line-height:1.65;color:var(--ink-soft);
}
.mnote-warn{background:rgba(196,138,42,.08);border-color:rgba(196,138,42,.28)}
.mnote b{color:var(--ink)}

/* ---- model page: gallery ---- */
.mgal{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.mgal{grid-template-columns:repeat(4,1fr);gap:14px}}
.mgal-item{
  position:relative;margin:0;overflow:hidden;border-radius:var(--r);cursor:zoom-in;
  aspect-ratio:4/3;background:#0E2A31;
}
.mgal-item.is-lead{grid-column:span 2}
@media(min-width:760px){.mgal-item.is-lead{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}
.mgal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.mgal-item:hover img,.mgal-item:focus-visible img{transform:scale(1.05)}
.mgal-item figcaption{
  position:absolute;inset:auto 0 0 0;padding:26px 12px 10px;
  background:linear-gradient(180deg,rgba(6,26,31,0),rgba(6,26,31,.72));
  color:#fff;font-size:.72rem;letter-spacing:.02em;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
}
.mgal-item:hover figcaption,.mgal-item:focus-visible figcaption{opacity:1;transform:none}
@media(hover:none){.mgal-item figcaption{opacity:1;transform:none}}

/* ---- model page: accommodation plans ---- */
.mlay{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){.mlay{grid-template-columns:repeat(2,1fr)}}
.mlay-item{
  margin:0;padding:14px;border-radius:var(--r);cursor:zoom-in;
  background:#fff;border:1px solid var(--line);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.mlay-item:hover,.mlay-item:focus-visible{border-color:var(--green-400);box-shadow:var(--sh-1)}
.mlay-item img{width:100%;height:auto;display:block}
.mlay-item figcaption{
  margin-top:10px;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-600);
}

/* ---- model page: awards and press ---- */
.awards{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
@media(min-width:760px){.awards{grid-template-columns:repeat(2,1fr)}}
.awards li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .7rem;
  padding:12px 14px;border-radius:var(--r);background:#fff;border:1px solid var(--line);
}
.awards b{font-weight:600;color:var(--ink);font-size:.95rem}
.aw-res{
  flex:0 0 auto;padding:.25em .6em;border-radius:3px;
  font-size:.55rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.aw-winner{background:var(--green-600);color:#fff}
.aw-nominated{background:rgba(55,123,138,.13);color:var(--green-600)}
.aw-body{flex:1 1 100%;font-size:.78rem;color:var(--ink-faint)}
.quotes{display:grid;gap:16px}
@media(min-width:760px){.quotes{grid-template-columns:repeat(2,1fr)}}
.quote{
  margin:0;padding:20px;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:.8rem;
}
.q-tag{
  align-self:flex-start;padding:.25em .6em;border-radius:3px;
  font-size:.53rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(196,138,42,.14);color:#8A6117;
}
.q-tag.q-test{background:rgba(55,123,138,.13);color:var(--green-600)}
.quote blockquote{
  margin:0;font-family:var(--serif);font-size:1.12rem;line-height:1.5;color:var(--ink);
}
.quote figcaption{font-size:.8rem;color:var(--ink-faint);line-height:1.6}
.quote figcaption a{color:var(--green-600)}

/* ---- lightbox ---- */
.lbox{
  position:fixed;inset:0;z-index:9000;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(6,20,24,.93);backdrop-filter:blur(3px);
}
.lbox.open{display:flex}
.lbox figure{margin:0;max-width:min(1400px,96vw);max-height:92vh;display:flex;flex-direction:column;gap:10px}
.lbox img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:6px;background:#fff}
.lbox figcaption{color:rgba(255,255,255,.82);font-size:.8rem;text-align:center}
.lbox-x{
  position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;
}
.lbox-x:hover{background:rgba(255,255,255,.18)}


/* The lockup carries the whole brand on the home page, where it sits over the
   film with no bar behind it — so it runs a further step larger there, and
   drops back to the standard size the moment the solid header takes over. */
body.hero-page:not(.past-hero) .brandband img{width:268px}
@media(min-width:720px){body.hero-page:not(.past-hero) .brandband img{width:312px}}
@media(min-width:1100px){body.hero-page:not(.past-hero) .brandband img{width:358px}}
@media(max-width:479px){body.hero-page:not(.past-hero) .brandband img{width:238px}}
@media(prefers-reduced-motion:no-preference){
  .brandband img{transition:width .45s var(--ease)}
}

/* A builder's render is a wide, white-background side elevation. Cropped to
   fill a 4:3 card it becomes an abstract sliver of sail — which is exactly
   how the 47 and the EIGHTY 2 were reading. Contain it, sit it on the tinted
   panel, and label it, so the card is honest instead of broken. */
.card-img.is-render{
  background:radial-gradient(120% 90% at 50% 18%,#F6FAFB 0%,#E4EDF0 60%,#D3E0E5 100%);
}
.card-img.is-render img{
  object-fit:contain;object-position:center 58%;
  padding:14px 12px 20px;
}
.card:hover .card-img.is-render img{transform:scale(1.03)}
.card-render-note{
  position:absolute;left:10px;bottom:9px;z-index:1;
  font-size:.5rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green-600);opacity:.75;
}

/* Same rule as the cards: a wide side elevation cannot be cropped to a
   16:9 banner without becoming an abstract white shape. */
.phead-media.is-render{
  background:radial-gradient(120% 100% at 50% 20%,#F6FAFB 0%,#E4EDF0 62%,#D3E0E5 100%);
}
.phead-media.is-render img{object-fit:contain;padding:22px 24px 30px}

/* ===========================================================================
   Why Lagoon — the builder page
   ========================================================================= */
.brandmark{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:20px 24px;margin-bottom:26px;border-radius:var(--r);
  background:linear-gradient(120deg,#fff 0%,var(--green-050) 100%);
  border:1px solid var(--line);
}
.brandmark img{width:190px;height:auto;flex:0 0 auto}
.brandmark p{margin:0;flex:1 1 320px;color:var(--ink-soft);font-size:.95rem;line-height:1.65}
@media(max-width:560px){.brandmark{gap:16px;padding:16px}.brandmark img{width:150px}}

/* a quiet provenance line — smaller than body, never a footnote graveyard */
.src{
  margin-top:1rem;font-size:.78rem;line-height:1.6;color:var(--ink-faint);
  padding-left:12px;border-left:2px solid var(--line);
}
.src i{font-style:italic}

.tiles-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tile-tag{
  display:inline-block;margin-top:.7rem;padding:.24em .6em;border-radius:3px;
  font-size:.54rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(55,123,138,.12);color:var(--green-600);
}

/* the two yards */
.yards{display:grid;gap:20px}
@media(min-width:820px){.yards{grid-template-columns:1fr 1fr}}
.yard{
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.yard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--green-400)}
.yard-media{aspect-ratio:16/9;overflow:hidden;background:var(--green-050)}
.yard-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.yard:hover .yard-media img{transform:scale(1.05)}
.yard-body{padding:20px 22px 24px}
.yard-tag{
  font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-500);
}
.yard-body h3{margin:.5rem 0 .6rem;font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--ink)}
.yard-body p{margin:0;color:var(--ink-soft);font-size:.94rem;line-height:1.68}

/* the anniversary band */
.anniv{position:relative;isolation:isolate;overflow:hidden;padding:clamp(64px,10vw,120px) 0;color:#fff}
.anniv-media{position:absolute;inset:0;z-index:-2}
.anniv-media img{width:100%;height:100%;object-fit:cover}
.anniv::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(6,32,38,.88) 0%,rgba(6,32,38,.62) 55%,rgba(6,32,38,.34) 100%);
}
.anniv-copy{max-width:min(64ch,var(--maxw));margin-inline:auto;padding-inline:var(--gutter)}
.anniv-logo{width:132px;height:auto;margin-bottom:1.4rem}
.anniv h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.5rem);margin:0 0 1rem;color:#fff}
.anniv p{color:rgba(255,255,255,.86);line-height:1.75;margin:0 0 1rem;max-width:58ch}
.anniv b{color:#fff}
.anniv .btn-line{margin-top:.8rem;border-color:rgba(255,255,255,.45);color:#fff}
.anniv .btn-line:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* firsts / myth */
.facts{display:grid;gap:18px}
@media(min-width:900px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{
  padding:22px 22px 24px;border-radius:var(--r);background:#fff;border:1px solid var(--line);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.fact:hover{transform:translateY(-3px);box-shadow:var(--sh-1)}
.fact > b{
  display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--green-500);margin-bottom:.7rem;
}
.fact h3{margin:0 0 .6rem;font-family:var(--serif);font-weight:400;font-size:1.18rem;color:var(--ink);line-height:1.35}
.fact p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.7}
.fact-myth{background:rgba(196,138,42,.055);border-color:rgba(196,138,42,.26)}
.fact-myth > b{color:#8A6117}

.awards-wide{grid-template-columns:1fr}
@media(min-width:860px){.awards-wide{grid-template-columns:1fr 1fr}}
.awards li{transition:transform .3s var(--ease),border-color .3s var(--ease)}
.awards li:hover{transform:translateX(3px);border-color:var(--green-400)}
.duo-rev .duo-media{order:2}
@media(max-width:819px){.duo-rev .duo-media{order:0}}

/* ---------------------------------------------------------------------------
   Hover and motion, applied once rather than per-component
   ------------------------------------------------------------------------- */
.tile{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-1);border-color:var(--green-400)}
.tile-ico{transition:transform .45s var(--ease),color .45s var(--ease)}
.tile:hover .tile-ico{transform:translateY(-2px) scale(1.08)}
.statbox{transition:transform .4s var(--ease)}
.statbox:hover{transform:translateY(-3px)}
.tlink i{display:inline-block;transition:transform .35s var(--ease)}
.tlink:hover i{transform:translateX(5px)}
.btn{transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-fill:hover{box-shadow:0 8px 22px -10px rgba(11,58,68,.55)}
@media(prefers-reduced-motion:reduce){
  .yard,.fact,.tile,.statbox,.btn,.awards li,.tlink i,
  .yard-media img,.card-img img,.rcard-photo,.mgal-item img{transition:none!important}
  .yard:hover,.fact:hover,.tile:hover,.statbox:hover,.btn:hover,.awards li:hover{transform:none}
}

/* ---- service page: jump nav, tick lists, numbered steps ---- */
.svcnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.svcnav a{
  padding:.5em 1em;border-radius:var(--r-pill);font-size:.78rem;
  border:1px solid var(--line);color:var(--ink-soft);background:#fff;
  transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.svcnav a:hover{border-color:var(--green-400);color:var(--green-600);transform:translateY(-2px)}
.svc{scroll-margin-top:calc(var(--bar-h) + 16px)}
.ticks{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.75rem}
.ticks li{
  position:relative;padding-left:1.7rem;color:var(--ink-soft);font-size:.94rem;line-height:1.65;
}
.ticks li::before{
  content:'';position:absolute;left:0;top:.52em;width:10px;height:10px;border-radius:50%;
  border:2px solid var(--green-400);
}
.ticks b{color:var(--ink);font-weight:600}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:820px){.steps{grid-template-columns:1fr 1fr}}
.steps li{
  counter-increment:s;position:relative;padding:20px 22px 22px 62px;border-radius:var(--r);
  background:#fff;border:1px solid var(--line);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.steps li:hover{transform:translateY(-3px);box-shadow:var(--sh-1);border-color:var(--green-400)}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:20px;top:19px;
  font-family:var(--serif);font-size:1.4rem;color:var(--green-400);line-height:1;
}
.steps b{display:block;margin-bottom:.35rem;color:var(--ink);font-size:1.02rem;font-weight:600}
.steps p{margin:0;color:var(--ink-soft);font-size:.9rem;line-height:1.65}
@media(prefers-reduced-motion:reduce){.steps li,.svcnav a{transition:none}.steps li:hover,.svcnav a:hover{transform:none}}

/* ---- brokerage: launch notice ---- */
.notice{
  padding:18px 20px;border-radius:var(--r);margin-bottom:26px;
  background:linear-gradient(120deg,rgba(55,123,138,.09),rgba(55,123,138,.03));
  border:1px solid rgba(55,123,138,.26);
}
.notice-tag{
  display:inline-block;margin-bottom:.6rem;padding:.28em .7em;border-radius:3px;
  font-size:.55rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--green-600);color:#fff;
}
.notice p{margin:0;color:var(--ink-soft);line-height:1.7;font-size:.96rem}
.notice b{color:var(--ink)}

/* ===========================================================================
   SHORTLIST + COMPARE
   The heart is a control, not decoration: it has a real hit area, it says what
   it will do, and it never moves when its state changes.
   ========================================================================== */

.save-heart{
  position:absolute;top:10px;right:10px;z-index:3;
  width:38px;height:38px;display:grid;place-items:center;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);
  box-shadow:0 2px 12px rgba(10,32,38,.16);
  transition:transform .22s var(--ease),background .22s var(--ease);
}
.save-heart svg{width:19px;height:19px;fill:none;stroke:var(--green-800);stroke-width:1.7;
  transition:fill .28s var(--ease),stroke .28s var(--ease),transform .28s var(--ease)}
.save-heart:hover{transform:translateY(-2px);background:#fff}
.save-heart:hover svg{stroke:var(--green-500)}
.save-heart:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
.save-heart.on svg{fill:#C2453F;stroke:#C2453F;animation:heartPop .42s var(--ease)}
@keyframes heartPop{0%{transform:scale(1)}38%{transform:scale(1.28)}100%{transform:scale(1)}}

/* the wide variant on a model page sits in the flow, not over an image */
.save-wide{
  position:static;width:auto;height:auto;gap:9px;padding:11px 20px;
  grid-auto-flow:column;align-items:center;
  background:#fff;border:1px solid var(--line);box-shadow:none;
  font-family:var(--f-ui);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-800);
}
.save-wide:hover{background:var(--green-050);border-color:var(--green-200)}
.save-wide.on{border-color:#E6C6C4;background:#FDF6F5;color:#9B322D}
.save-sm{position:static;width:34px;height:34px;background:transparent;box-shadow:none}

.mkeep{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.qv-head{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* the compare tick — quieter than the heart, because it is a browsing gesture */
.cmp-tick{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  padding:7px 13px 7px 9px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:transparent;cursor:pointer;color:var(--ink-faint);
  font-family:var(--f-ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  transition:.24s var(--ease);
}
.cmp-tick svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.35;transition:opacity .24s var(--ease)}
.cmp-tick:hover{border-color:var(--green-200);color:var(--green-700)}
.cmp-tick.on{background:var(--green-800);border-color:var(--green-800);color:#fff}
.cmp-tick.on svg{opacity:1}
.cmp-tick:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
.rcard-body .cmp-tick,.card-body .cmp-tick{align-self:flex-start}

/* ---- the gate form -------------------------------------------------------- */
.sl-form .fld{display:block;margin-bottom:13px}
.sl-form .fld > span{
  display:block;margin-bottom:6px;
  font-family:var(--f-ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-700);
}
.sl-form .fld > span i{font-style:normal;color:var(--ink-faint);letter-spacing:.08em}
.sl-form input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  font:inherit;color:var(--ink);background:#fff;
}
.sl-form input:focus{outline:0;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(55,123,138,.14)}
.sl-err{margin:2px 0 12px;color:#B03A34;font-size:.86rem}
.sl-fine{margin-top:12px;font-size:.74rem;color:var(--ink-faint);line-height:1.5}

/* ---- the saved page ------------------------------------------------------- */
.sl-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:clamp(22px,4vw,34px)}
.sl-actions .is-off{opacity:.45;pointer-events:none}
.sl-empty{text-align:center;max-width:46ch;margin:0 auto;padding:clamp(30px,7vw,64px) 0}
.sl-empty-heart{width:54px;height:54px;fill:none;stroke:var(--green-200);stroke-width:1.4;margin-bottom:16px}
.sl-empty h2{font-size:1.5rem;margin-bottom:.5em}
.sl-empty p{color:var(--ink-soft);margin-bottom:1.6rem}
.sl-next{
  margin-top:clamp(30px,5vw,52px);padding:clamp(22px,4vw,34px);
  background:var(--paper-warm);border-radius:var(--r);
}
.sl-next h3{font-size:1.2rem;margin-bottom:.5em}
.sl-next p{color:var(--ink-soft);max-width:60ch;margin-bottom:1.2rem}

/* ---- the toast ------------------------------------------------------------ */
.sl-toast{
  /* sits above the compare bar, never on top of it — two fixed elements
     fighting for the same 60px of screen is how a toast eats a button */
  position:fixed;left:50%;bottom:calc(var(--tabs-h,0px) + 18px);z-index:70;
  transform:translate(-50%,14px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:14px;max-width:min(92vw,460px);
  padding:12px 18px;border-radius:var(--r-pill);
  background:var(--green-900);color:#fff;font-size:.88rem;
  box-shadow:0 10px 34px rgba(10,32,38,.32);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.sl-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.sl-toast a{color:var(--green-200);white-space:nowrap;font-weight:700}

/* ---- the compare bar ------------------------------------------------------ */
.cmp-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  transform:translateY(110%);transition:transform .34s var(--ease);
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(10,32,38,.12);
  padding-bottom:env(safe-area-inset-bottom);
}
.cmp-bar.on{transform:none}
@media(max-width:899px){.cmp-bar{bottom:var(--tabs-h,0px)}}
.cmp-bar-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0}
.cmp-bar-list{display:flex;gap:7px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.cmp-bar-acts{display:flex;align-items:center;gap:12px;margin-left:auto}
.cmp-bar-acts .is-off{opacity:.5;pointer-events:none}
.cmp-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 8px 6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--paper-warm);cursor:pointer;font-size:.78rem;color:var(--ink);
}
.cmp-chip svg{width:13px;height:13px;fill:none;stroke:var(--ink-faint);stroke-width:2.2;stroke-linecap:round}
.cmp-chip:hover{border-color:var(--green-200)}
.cmp-chip:hover svg{stroke:var(--green-700)}
body.has-cmp-bar{padding-bottom:70px}
body.has-cmp-bar .sl-toast{bottom:calc(var(--tabs-h,0px) + 86px)}

/* ---- the table ------------------------------------------------------------ */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.cmp{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp tbody th{
  width:150px;white-space:nowrap;color:var(--green-700);background:var(--paper-warm);
  font-family:var(--f-ui);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:400;
  position:sticky;left:0;z-index:2;
}
.cmp-corner{background:#fff;position:sticky;left:0;z-index:3;border-bottom:1px solid var(--line)}
.cmp-h{width:auto;min-width:170px;text-align:center;vertical-align:bottom;padding-bottom:18px}
.cmp-h-art{display:block;border-radius:var(--r-sm);overflow:hidden;background:var(--green-050);margin-bottom:10px}
.cmp-h-art img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.cmp-h-art.is-render img{object-fit:contain;padding:6px}
.cmp-h-name{display:block;font-family:var(--f-disp);font-size:1.06rem;color:var(--ink);line-height:1.2}
.cmp-h-name:hover{color:var(--green-700)}
.cmp-h .save-heart{margin:8px auto 0}
.cmp-drop{
  display:block;margin:6px auto 0;border:0;background:none;cursor:pointer;
  font-family:var(--f-ui);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);
}
.cmp-drop:hover{color:#B03A34}
.cmp-diff td{background:rgba(55,123,138,.05)}
.cmp-flag{
  display:block;margin-top:5px;font-style:normal;
  font-size:.56rem;letter-spacing:.12em;color:var(--green-500);
}
.cmp-na{color:var(--ink-faint);font-style:italic}
.cmp-blurb{font-size:.85rem;color:var(--ink-soft);line-height:1.55}
.cmp-foot td{white-space:normal}
.cmp-foot .btn{margin:3px 4px 0 0}
.btn-sm{padding:8px 14px;font-size:.66rem}

.cmp-pick{margin-top:clamp(24px,4vw,38px)}
.cmp-pick-lab{
  display:block;margin-bottom:10px;
  font-family:var(--f-ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-700);
}
.cmp-pick-row{display:flex;gap:7px;flex-wrap:wrap}
.cmp-chip-add{
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;cursor:pointer;font-size:.8rem;color:var(--ink-soft);
  transition:.22s var(--ease);
}
.cmp-chip-add:hover{border-color:var(--green-200);color:var(--green-800)}
.cmp-chip-add.on{background:var(--green-800);border-color:var(--green-800);color:#fff}
.cmp-hint{margin-top:18px;color:var(--ink-faint);font-size:.9rem}

/* ---- the counters --------------------------------------------------------- */
.navband-acts{display:flex;align-items:center;gap:2px;justify-self:end}
@media(max-width:899px){.navband-acts{grid-column:2}}
.navband-saved{position:relative}
.nav-count,.tab-count{
  position:absolute;top:3px;right:3px;min-width:16px;height:16px;padding:0 4px;
  display:none;place-items:center;border-radius:9px;
  background:#C2453F;color:#fff;font-size:.6rem;line-height:1;font-weight:700;
}
.nav-count.on,.tab-count.on{display:grid}
.tab-count{top:4px;right:calc(50% - 20px)}

@media(prefers-reduced-motion:reduce){
  .save-heart,.cmp-tick,.sl-toast,.cmp-bar{transition:none}
  .save-heart.on svg{animation:none}
}

/* ===========================================================================
   EVENTS
   One row per show: where it is, how long until it opens, and which boats you
   can actually walk. The countdown is the thing people came for, so it gets
   the weight — everything else stays quiet until the row is opened.
   ========================================================================== */
.ev-list{display:grid;gap:clamp(16px,2.4vw,22px)}
.ev{
  display:grid;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.ev:hover{border-color:var(--green-200);box-shadow:var(--sh-1)}
@media(min-width:820px){.ev{grid-template-columns:300px 1fr}}
@media(min-width:1180px){.ev{grid-template-columns:360px 1fr}}

.ev-media{position:relative;background:var(--green-900);min-height:170px;overflow:hidden;display:flex}
.ev-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.ev:hover .ev-media img{transform:scale(1.04)}
@media(max-width:819px){.ev-media{aspect-ratio:16/7}}
.ev-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,32,38,.72) 0%,rgba(10,32,38,.12) 52%,rgba(10,32,38,0) 100%);
}
/* until a location photograph exists, the panel still says where you are going */
.ev-media-fallback{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:18px;
  background:linear-gradient(150deg,var(--green-800) 0%,var(--green-900) 62%,#07191E 100%);
  color:rgba(255,255,255,.30);
  font-family:var(--f-disp);font-size:1.5rem;line-height:1.15;
}
.ev-city{
  position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;
  font-family:var(--f-ui);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  text-shadow:0 2px 12px rgba(10,32,38,.6);
}

.ev-body{padding:clamp(18px,2.6vw,26px);display:flex;flex-direction:column}
.ev-top{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.ev-when{
  display:block;margin-bottom:6px;
  font-family:var(--f-ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-600);
}
.ev-body h3{font-size:clamp(1.2rem,2.6vw,1.5rem);margin:0 0 4px;line-height:1.15}
.ev-where{margin:0;font-size:.86rem;color:var(--ink-faint)}
.ev-copy{margin:14px 0 0;color:var(--ink-soft);font-size:.94rem;max-width:64ch}

/* the countdown */
.ev-count{
  flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;
  padding:8px 14px;border-radius:var(--r-sm);background:var(--green-050);min-width:104px;
}
.ev-count b{font-family:var(--f-disp);font-size:1.7rem;line-height:1;color:var(--green-800)}
.ev-count i{
  font-style:normal;margin-top:4px;
  font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--green-600);
}
.ev-count.is-now{background:rgba(53,192,186,.16);border:1px solid rgba(53,192,186,.5)}
.ev-count.is-now b{font-size:1.05rem;letter-spacing:.02em}
.ev-count.is-soon b{font-size:1.05rem}
.ev-count.is-past{
  background:transparent;border:1px dashed var(--line);color:var(--ink-faint);
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;padding:10px 14px;
}
.ev.is-past{opacity:.62}
.ev.is-past:hover{opacity:1}
.ev.is-live{border-color:rgba(53,192,186,.55);box-shadow:0 0 0 3px rgba(53,192,186,.12)}

/* the expandable half */
.ev-more{margin-top:16px;border-top:1px solid var(--line);padding-top:4px}
.ev-more summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;color:var(--green-700);
  font-family:var(--f-ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
}
.ev-more summary::-webkit-details-marker{display:none}
.ev-more summary:hover{color:var(--green-500)}
.ev-more summary i{
  width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .3s var(--ease);margin-right:3px;
}
.ev-more[open] summary i{transform:rotate(-135deg)}
.ev-more-body{padding-bottom:6px;animation:evOpen .38s var(--ease)}
@keyframes evOpen{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.ev-boats h4,.ev-notes h4{
  margin:0 0 10px;font-family:var(--f-ui);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:400;
}
.ev-boat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.ev-boat{
  display:block;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--paper-warm);transition:.26s var(--ease);
}
.ev-boat:hover{border-color:var(--green-200);transform:translateY(-3px);box-shadow:var(--sh-1)}
.ev-boat-art{display:block;background:var(--green-050)}
.ev-boat-art img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ev-boat-art.is-render img{object-fit:contain;padding:4px}
.ev-boat-name{
  display:block;padding:9px 10px 2px;font-size:.82rem;color:var(--ink);line-height:1.2;
}
.ev-boat-go{
  display:block;padding:0 10px 9px;
  font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--green-600);
}
.ev-note{margin:10px 0 0;font-size:.78rem;color:var(--ink-faint);line-height:1.5}
.ev-notes{margin-top:20px}
.ev-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.ev-private .ev-body{padding:clamp(20px,3vw,30px)}
.ev-private{background:var(--paper-warm)}
@media(min-width:820px){.ev-private{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .ev-media img,.ev-boat,.ev-more summary i{transition:none}
  .ev-more-body{animation:none}
}

/* ===========================================================================
   SERVICE-AREA MAP
   A grid cartogram. Equal-sized tiles mean Rhode Island reads as loudly as
   Texas, which is the whole point when the territory is the Northeast.
   ========================================================================== */
.usmap-head{max-width:60ch;margin-bottom:clamp(22px,4vw,34px)}
.usmap-head h2{margin-bottom:.35em}
.usmap-fig{
  display:flex;flex-direction:column;gap:18px;align-items:center;
  padding:clamp(18px,3vw,32px);background:#fff;border:1px solid var(--line);
  border-radius:var(--r);
}
.usg{width:100%;max-width:660px;height:auto;display:block;overflow:visible}

.usg-t rect{
  fill:var(--green-050);stroke:#E3EBEE;stroke-width:1;
  transition:fill .3s var(--ease),stroke .3s var(--ease);
}
.usg-t text{
  font-family:var(--f-ui);font-size:13px;font-weight:700;letter-spacing:.04em;
  fill:#B4C4C9;transition:fill .3s var(--ease);pointer-events:none;
}
.usg-t.on rect{fill:var(--green-500);stroke:var(--green-500)}
.usg-t.on text{fill:#fff}
.usg-t.hq rect{fill:var(--green-800);stroke:var(--green-800)}
.usg-dot{fill:#7FE3DC}
.usg-t.on{cursor:pointer}
.usg-t.on:hover rect,.usg-t.on:focus-visible rect{fill:var(--green-700);stroke:var(--green-200);stroke-width:2}
.usg-t.on:focus-visible{outline:none}

/* the tiles arrive on a diagonal, so the eye finishes on the Northeast */
.usg-t{opacity:1;transform-box:fill-box;transform-origin:center}
html.js-reveal .usg-t{opacity:0;transform:scale(.72)}
html.js-reveal .rev.in .usg-t{animation:usgIn .5s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:var(--d)}
@keyframes usgIn{to{opacity:1;transform:scale(1)}}
/* the office states keep a slow pulse once everything has landed */
.rev.in .usg-t.hq .usg-dot,
.usg-t.hq .usg-dot{animation:usgPulse 2.6s ease-in-out 1.6s infinite}
@keyframes usgPulse{0%,100%{opacity:.55;r:3.4}50%{opacity:1;r:4.6}}

.usmap-key{
  display:flex;gap:20px;flex-wrap:wrap;justify-content:center;
  list-style:none;margin:0;padding:0;
}
.usmap-key li{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-soft)}
.usmap-key .k{width:14px;height:14px;border-radius:4px;flex:none}
.k-on{background:var(--green-500)}
.k-hq{background:var(--green-800);position:relative}
.k-hq::after{content:'';position:absolute;top:1px;right:1px;width:5px;height:5px;border-radius:50%;background:#7FE3DC}
.k-off{background:var(--green-050);border:1px solid #E3EBEE}

.usmap-offices{
  display:grid;gap:10px;margin-top:clamp(18px,3vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.usmap-office{
  display:block;padding:14px 16px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);transition:.26s var(--ease);
}
.usmap-office:hover{border-color:var(--green-200);transform:translateY(-3px);box-shadow:var(--sh-1)}
.usmap-office b{display:block;font-family:var(--f-disp);font-size:1.05rem;color:var(--ink)}
.usmap-office span{
  display:block;margin-top:1px;font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);
}
.usmap-office i{display:block;margin-top:7px;font-style:normal;font-size:.86rem;color:var(--green-600)}

@media(prefers-reduced-motion:reduce){
  .usg-t,html.js-reveal .usg-t{opacity:1;transform:none}
  html.js-reveal .rev.in .usg-t{animation:none}
  .rev.in .usg-t.hq .usg-dot{animation:none}
}

/* ---- the event locator ---------------------------------------------------
   OpenStreetMap's own embed. No key, no account, no third-party analytics —
   and it shows the harbour rather than implying it. The frame is inert so the
   page never loses a scroll inside it; the panel itself is the link out. */
.ev-map{
  position:relative;display:block;flex:1;min-height:190px;overflow:hidden;
  background:var(--green-900);
}
/* A branded panel sits under the map, so a blocked or slow tile server
   degrades to something deliberate rather than to a broken frame. */
.ev-map-base{
  position:absolute;inset:0;
  background:linear-gradient(150deg,var(--green-800) 0%,var(--green-900) 62%,#07191E 100%);
}
.ev-map-frame{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  pointer-events:none;                     /* the panel is the control, not the map */
  filter:saturate(.82) contrast(1.02);
  opacity:0;
  transition:opacity .5s var(--ease),transform .6s var(--ease),filter .4s var(--ease);
}
.ev-map-frame.is-on{opacity:1}
.ev:hover .ev-map-frame{transform:scale(1.03);filter:saturate(1) contrast(1.04)}
/* a scrim only where the caption sits, so the map itself stays legible */
.ev-map-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,32,38,.86) 0%,rgba(10,32,38,.35) 34%,rgba(10,32,38,0) 62%);
}
.ev-map-meta{
  position:absolute;left:16px;right:16px;bottom:14px;z-index:3;color:#fff;
  display:flex;flex-direction:column;gap:2px;
}
.ev-map-meta b{font-family:var(--f-disp);font-size:1.05rem;line-height:1.15}
.ev-map-meta span{
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.ev-map-meta em{
  margin-top:6px;font-style:normal;font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--green-200);
}
.ev-map:hover .ev-map-meta em{color:#fff}
@media(max-width:819px){.ev-map{min-height:0;aspect-ratio:16/9}}
@media(prefers-reduced-motion:reduce){
  .ev-map-frame,.ev:hover .ev-map-frame{transition:none;transform:none}
}


/* ==========================================================================
   MOBILE MENU
   Below 900px the top navigation is hidden, and the five-slot tab bar can
   never carry the whole site. The hamburger in the nav band opens this panel,
   which mirrors the full NAV tree, submenus included.
   ========================================================================== */
.navband-menu{display:none}
@media(max-width:899px){.navband-menu{display:inline-grid}}

.mobnav-scrim{
  position:fixed;inset:0;z-index:88;
  background:rgba(8,26,32,.5);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .28s var(--ease);
}
.mobnav-scrim.open{opacity:1}

.mobnav{
  position:fixed;top:0;right:0;bottom:0;z-index:89;
  width:min(390px,88vw);
  display:flex;flex-direction:column;
  background:#fff;box-shadow:-18px 0 48px rgba(8,26,32,.22);
  transform:translateX(100%);transition:transform .34s var(--ease);
  overscroll-behavior:contain;
}
.mobnav.open{transform:none}
@media(min-width:900px){.mobnav,.mobnav-scrim{display:none!important}}

.mobnav-top{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 14px 12px 20px;
  border-bottom:1px solid var(--line);
}
.mobnav-title{
  font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
}
.mobnav-close{color:var(--ink)}

.mobnav-body{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:6px 0 calc(var(--safe-b) + 20px);
}
.mobnav-group{border-bottom:1px solid var(--line)}
.mobnav-group:last-of-type{border-bottom:0}

.mobnav-lead{
  display:block;padding:15px 20px 13px;
  font-family:var(--f-disp);
  font-size:1.02rem;font-weight:600;letter-spacing:.005em;color:var(--ink);
}
.mobnav-lead.on{color:var(--green-600)}

.mobnav-kids{padding:0 0 12px}
.mobnav-kids a{
  display:block;padding:9px 20px 9px 34px;position:relative;
  font-size:.86rem;color:var(--ink-soft);
}
.mobnav-kids a::before{
  content:'';position:absolute;left:20px;top:50%;width:6px;height:1px;
  background:var(--line-strong);
}
.mobnav-kids a.on{color:var(--green-600);font-weight:600}
.mobnav-kids a.on::before{background:var(--green-500);width:10px}

.mobnav-foot{padding:20px;display:grid;gap:12px;justify-items:center}
.mobnav-foot .btn-block{width:100%}
.mobnav-call{
  font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--green-700);
}

/* the tab bar now carries two long labels, so the type gives a little */
.tabbar a{white-space:nowrap}
@media(max-width:420px){
  .tabbar a{font-size:.52rem;letter-spacing:.03em;gap:2px}
  .tabbar svg{width:21px;height:21px}
}

/* ==========================================================================
   BROKERAGE — filters and listing cards
   Built to carry real boats: a card fills in year, port and asking price the
   moment the data has them, and shows them as pending until it does.
   ========================================================================== */
.bkfilter{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
  padding:16px 18px;margin-bottom:20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
}
.bkfilter-row{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.bkfilter-lbl{
  font-size:.58rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-faint);flex:none;
}
.bkfilter-chips{display:flex;flex-wrap:wrap;gap:6px}
.bkchip{
  padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:#fff;color:var(--ink-soft);cursor:pointer;
  font-size:.74rem;font-weight:600;white-space:nowrap;
  transition:.2s var(--ease);
}
.bkchip:hover{border-color:var(--green-400);color:var(--green-700)}
.bkchip.on{background:var(--green-600);border-color:var(--green-600);color:#fff}
.bkchip:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
.bkfilter-count{
  margin:0 0 0 auto;font-size:.62rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-700);
}
@media(max-width:640px){
  .bkfilter{gap:12px}
  .bkfilter-row{width:100%}
  .bkfilter-count{margin-left:0}
}

.bkgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
.bkcard{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.bkcard[hidden]{display:none}
.bkcard:hover{border-color:var(--green-200);box-shadow:var(--sh-2);transform:translateY(-2px)}

.bkcard-img{position:relative;aspect-ratio:16/10;background:var(--green-050);overflow:hidden}
.bkcard-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* a boat that is not signed yet is not photographed yet — the model shot is
     held back visually so it never reads as this hull's own picture */
  filter:grayscale(.55) contrast(.95);opacity:.86;
  transition:filter .4s var(--ease),opacity .4s var(--ease);
}
.bkcard:hover .bkcard-img img{filter:grayscale(.25);opacity:1}
.bkcard-flag{
  position:absolute;left:12px;top:12px;z-index:2;
  padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(10,32,38,.82);color:#fff;
  font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.bkcard-flag.is-live{background:var(--green-500)}
.bkcard-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 12px 8px;
  background:linear-gradient(to top,rgba(10,32,38,.72),rgba(10,32,38,0));
  color:rgba(255,255,255,.9);font-size:.6rem;line-height:1.3;
}

.bkcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.bkcard-ref{
  font-size:.56rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);
}
.bkcard-body h3{margin:.25em 0 .7em;font-size:1.12rem}
.bkcard-spec{list-style:none;margin:0 0 14px;padding:0;font-size:.8rem}
.bkcard-spec li{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:5px 0;border-bottom:1px solid var(--line);
}
.bkcard-spec li:last-child{border-bottom:0}
.bkcard-spec span{color:var(--ink-faint);flex:none}
.bkcard-spec b{font-weight:700;text-align:right;overflow-wrap:anywhere}
.bkcard-spec b.tbc{font-weight:400;font-style:italic;color:var(--ink-faint)}
.bkcard-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.bkcard-acts .btn{flex:1 1 auto;justify-content:center}

.bkempty{
  margin:22px 0 0;padding:20px;text-align:center;
  background:#fff;border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  color:var(--ink-soft);
}
.bkempty[hidden]{display:none}
.bkempty a{color:var(--green-700);text-decoration:underline}

/* ==========================================================================
   INTEREST COUNTER
   Only ever drawn when a real number has come back from the lead store.
   ========================================================================== */
.watchers{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:8px 0 2px;padding:5px 11px 5px 9px;border-radius:var(--r-pill);
  background:var(--green-050);border:1px solid var(--green-200);
  font-size:.72rem;color:var(--green-800);
}
.watchers[hidden]{display:none}
.watchers b{font-weight:800}
.watchers small{color:var(--green-700);opacity:.8;font-size:.68rem}
.watchers i{
  width:7px;height:7px;border-radius:50%;background:var(--green-500);flex:none;
  box-shadow:0 0 0 0 rgba(27,169,163,.5);animation:watchpulse 2.6s var(--ease) infinite;
}
@keyframes watchpulse{
  0%{box-shadow:0 0 0 0 rgba(27,169,163,.45)}
  70%{box-shadow:0 0 0 7px rgba(27,169,163,0)}
  100%{box-shadow:0 0 0 0 rgba(27,169,163,0)}
}
@media(prefers-reduced-motion:reduce){.watchers i{animation:none}}

.bkcard-body h3 a{color:inherit}
.bkcard-body h3 a:hover{color:var(--green-700)}

/* ==========================================================================
   ONE BROKERAGE BOAT
   ========================================================================== */
.bkone-wrap{padding-top:clamp(14px,2.4vw,26px);padding-bottom:clamp(36px,5vw,64px)}
.crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
}
.crumb a{color:var(--green-700)}
.crumb a:hover{text-decoration:underline}

.bkone-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:clamp(18px,2.6vw,28px);border-bottom:1px solid var(--line);
}
.bkone-head h1{font-size:clamp(1.8rem,5vw,2.7rem);margin:.15em 0 .3em}
.bkone-head .lede{margin:0;max-width:56ch}
.bkone-flag{
  flex:none;padding:8px 15px;border-radius:var(--r-pill);
  background:rgba(10,32,38,.86);color:#fff;
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.bkone-flag.is-live{background:var(--green-500)}

.bkone-grid{display:grid;gap:24px;align-items:start}
@media(min-width:960px){.bkone-grid{grid-template-columns:1fr 320px;gap:34px}}
.bkone-main > section{margin-top:clamp(26px,3.4vw,40px)}
.bkone-main h2{font-size:clamp(1.2rem,3vw,1.5rem);margin-bottom:.5em}

.bkone-shot{margin:0;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--green-050)}
.bkone-shot img{
  width:100%;display:block;aspect-ratio:16/9;object-fit:cover;
  filter:grayscale(.5) contrast(.96);opacity:.9;
}
.bkone-shot figcaption{padding:10px 14px;font-size:.74rem;color:var(--ink-faint);background:#fff}

.bkone-spec{width:100%;border-collapse:collapse;font-size:.9rem}
.bkone-spec th,.bkone-spec td{padding:10px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.bkone-spec th{width:42%;font-weight:600;color:var(--ink-faint);font-size:.82rem}
.bkone-spec td i{font-style:italic;color:var(--ink-faint)}

.ywbox{
  padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
.ywbox-pending{background:var(--green-050);border-color:var(--green-200)}
.ywbox b{font-family:var(--f-disp);font-size:1.05rem}
.ywbox p{margin:0;font-size:.88rem;color:var(--ink-soft)}
.ywbox small{font-size:.7rem;color:var(--ink-faint)}

.bkone-side{display:grid;gap:16px}
@media(min-width:960px){.bkone-side{position:sticky;top:calc(var(--bar-h) + 16px)}}
.bkone-cta{
  padding:20px;border-radius:var(--r-sm);background:var(--green-800);color:#fff;display:grid;gap:10px;
}
.bkone-cta h3{margin:0;color:#fff;font-size:1.15rem}
.bkone-cta p{margin:0 0 4px;font-size:.86rem;color:rgba(255,255,255,.76)}
.bkone-cta .btn-line{border-color:rgba(255,255,255,.32);color:#fff;background:transparent}
.bkone-cta .btn-line:hover{background:rgba(255,255,255,.1)}

.bkone-more{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.bkone-more h4{
  margin:0 0 10px;font-family:var(--f-body);font-size:.62rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
}
.bkone-more ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bkone-more a{display:flex;align-items:center;gap:11px;color:var(--ink)}
.bkone-more img{width:56px;height:40px;object-fit:cover;border-radius:6px;flex:none;filter:grayscale(.4)}
.bkone-more span{display:flex;flex-direction:column;font-size:.88rem;font-weight:600;line-height:1.2}
.bkone-more small{font-size:.62rem;letter-spacing:.12em;color:var(--ink-faint);margin-top:2px}
.bkone-more a:hover{color:var(--green-700)}

/* the seller's form reuses the contact form's grid */
.sellform{margin-top:6px}