/* Riverside Rentals — home page. Lifted unchanged from riverside-hero/index.html by sync-theme.py. */
:root{
  color-scheme: dark;
  --ink:#06181D;
  --ink-2:#0A2830;
  --paper:#F4F1E9;
  --mist:rgba(244,241,233,.75);
  --mist-2:rgba(244,241,233,.75);
  --sail:#005A92;
  --sail-hi:#004E7F;
  --gold:#E2BE72;      /* the discount mark: warm, but quieter than a highlighter */
  --on-accent:#FFFFFF;
  --line:rgba(244,241,233,.16);
  --ustrip-h:44px;   /* 44px, so the strip's links are full-size tap targets (Danny, 5 Nov 2026) */
  --glass:rgba(6,24,29,.42);
  --sky:#DCE9F1;      /* light tint of the brand blue: the content sections' ground */
  --sky-2:#C9DDE9;
  --display:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus,var(--sail));outline-offset:3px;border-radius:4px}

/* ---------- stage ---------- */
.stage{position:relative;height:100vh;width:100%}
.pin{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:var(--ink)}
.layer{position:absolute;inset:0;overflow:hidden;will-change:clip-path}
.shot{
  position:absolute;inset:0;background-position:center 52%;background-size:cover;
  will-change:transform;transform-origin:center;
}
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 88% at 50% 42%,rgba(6,24,29,0) 22%,rgba(6,24,29,.62) 100%),
    linear-gradient(180deg,rgba(6,24,29,.42) 0%,rgba(6,24,29,0) 26%,rgba(6,24,29,0) 52%,rgba(6,24,29,.72) 100%);
}
.tint{position:absolute;inset:0;pointer-events:none;background:rgba(6,24,29,.30)}

/* ---------- glow behind the heading ---------- */
.glow{
  position:absolute;left:50%;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;
}
.glow--book{
  top:46%;width:min(1240px,100vw);height:min(660px,68vh);
  /* behind the heading, so it reads at 4.5:1 or better over the brightest sky and boats (AAA large text,
     18 Oct 2026). Centred on the heading since 20 Oct 2026, so the photo itself stays at full brightness */
  background:radial-gradient(closest-side,rgba(6,24,29,.8),rgba(6,24,29,.6) 60%,rgba(6,24,29,0) 100%);
  opacity:0;
}



/* ---------- booking ---------- */
.book{
  position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);
  width:min(1120px,94vw);display:flex;flex-direction:column;align-items:center;gap:22px;pointer-events:none;
}
.book__head{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;will-change:transform,opacity}
/* a search panel is open: the heading steps aside (see `lift`) */
.book__head{transition:opacity .3s ease}
.book.is-searching .book__head{opacity:0!important;pointer-events:none!important}   /* beats the inline opacity frame() sets, as .deals.is-away does */
.book.is-searching .deals{opacity:0!important;pointer-events:none!important}   /* the deals button steps aside with the heading, and returns when the panel closes (Danny, 20 Oct 2026) */
.book__title{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.75rem,4vw,3.4rem);line-height:1.08;letter-spacing:-.022em;
  text-wrap:balance;max-width:34ch;
  text-shadow:0 2px 10px rgba(6,24,29,.42),0 6px 44px rgba(6,24,29,.55);
}
.book__title em{font-style:italic;font-weight:300}
.brk{display:none}
/* the search bar is built by assets/js/search.js into this box; the hero
   animation moves the box, so the transform lives here and not on the form */
.barmount{width:100%;will-change:transform,opacity}
.note{
  min-height:18px;font-size:12.5px;color:var(--mist);letter-spacing:.01em;text-align:center;
  opacity:0;transition:opacity .3s ease;
}
.note.is-on{opacity:1}

/* ---------- last-minute deals ----------
   A pill above the heading (Danny, 20 Oct 2026). It opens the rail, a full-bleed drawer across the foot of the
   hero, so the rail is never cropped and never squeezes the heading. */
/* the deals pill's row, above the heading */
.book__mid{display:flex;align-items:center;justify-content:center;width:100%;min-height:0}
/* the hero is left aligned (Danny, 20 Oct 2026, chosen over a centred
   version): heading, deals pill and search bar stacked in the bottom-left
   corner. layoutBook() places the block */
.book.book--left{width:min(1120px,calc(100vw - 2 * clamp(16px,3vw,48px)));align-items:flex-start}
.book--left .book__head{align-items:flex-start;text-align:left}
.book--left .book__mid,.book--left .deals{justify-content:flex-start}
.book--left .note{text-align:left;margin-top:-14px}   /* 8px under the bar, so it stays on screen (Danny, 20 Oct 2026) */
/* On a phone (Danny, 28–29 Oct 2026): the heading large in the middle of
   the photograph, then a slim deals pill just above the search bar along
   the bottom. The hero is the visible screen (svh), so Safari's bars never
   cover the bar; home.js leaves the block to this. */
@media (max-width:719px){
  .stage,.pin{height:100vh;height:100svh}
  /* the phone's own hero photo when one is set (Home page "Phone hero
     photograph"), framed on the blue boat with the houses behind it
     (Danny, 29 Oct 2026) */
  #shotBoats[style*="--hero-phone"]{background-image:var(--hero-phone)!important;background-position:65% center}
  /* the glow behind the heading reaches well past the screen's sides, so
     the white moored boats behind "Broads." stay dark enough: heading
     worst 3.65 → 7.59 at 393×852 and 2.83 → 6.95 at 393×660, text shadow
     not counted (AAA large text is 4.5; Danny, 29 Oct 2026) */
  .glow--book{width:180vw;height:min(600px,62svh)}
  .book.book--left{
    top:calc(var(--chrome-h) + 14px)!important;bottom:calc(14px + env(safe-area-inset-bottom));
    left:12px!important;right:12px;width:auto;transform:none!important;
    align-items:stretch;justify-content:space-between;gap:12px;
  }
  .book--left .book__mid,.book--left .deals{justify-content:center}
  .book--left .book__head{order:1;flex:1 1 auto;justify-content:center;align-items:center;text-align:center}
  .book--left .book__title{font-size:clamp(2.5rem,12.2vw,3.6rem);line-height:1.02;max-width:none;text-wrap:balance}
  .book--left .book__mid{order:2}
  .book--left .note{order:3;margin:0;text-align:center}
  .book--left .barmount{order:4}
  /* the deals pill slim and in sentence case, so it sits under the
     heading without outweighing the bar below it (.book: the main rule
     for the pill comes later in this file) */
  .book .deals__btn{gap:7px;padding:8px 15px;font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none;white-space:nowrap;box-shadow:0 12px 30px -18px rgba(0,0,0,.8)}
  .book .deals__chev{width:10px;height:10px}
}
@media (max-width:339px){
  .book .deals__btn{white-space:normal;text-align:center}
}
.deals{display:flex;justify-content:center;width:100%;transition:opacity .3s ease;will-change:opacity}
/* the reveal sequence writes an inline opacity onto this block, so hiding
   the button while its own drawer is up has to beat that */
.deals.is-away{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease}
/* the search bar steps out of the way while the rail is up, and comes back
   when it closes; the heading stays, and settles into the space above the
   rail (the script works out how far) */
.book.is-away{pointer-events:none!important}
/* with the deals open, the heading, the bar and the glow behind the heading
   all step aside; the rail brings its own heading (Danny, 20 Oct 2026) */
.book.is-away .book__head,.book.is-away .barmount,.book.is-away .note,.glow.is-away{
  opacity:0!important;pointer-events:none!important;transition:opacity .3s ease;
}
/* the site's gold with the ink: softer than white beside the heading, and
   10.2:1 (AAA). No pulsing dot (Danny, 20 Oct 2026) */
.deals__btn{
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  padding:13px 26px;border-radius:999px;
  border:1px solid var(--gold);background:var(--gold);color:#06181D;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.8);
  font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.deals__btn:hover{background:var(--sail);border-color:var(--sail);color:var(--on-accent);transform:translateY(-1px)}
.deals__chev{width:11px;height:11px;transition:transform .3s ease}

.dealsbar{
  position:absolute;z-index:6;left:0;right:0;bottom:0;
  /* the same left gutter as the hero block, cards in the bottom-left corner
     (Danny, 20 Oct 2026) */
  padding:clamp(48px,9vh,96px) clamp(16px,3vw,48px) clamp(16px,3vw,48px);
  /* dark enough by 48px that the heading (8:1) and the small line (7.8:1) under it pass AAA over the
     bright houses, while the photo still shows through (20 Oct 2026) */
  background:linear-gradient(180deg,rgba(6,24,29,0) 0,rgba(6,24,29,.72) 48px,rgba(6,24,29,.94) 100%);
  transform:translateY(103%);opacity:0;pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease;
}
.dealsbar.is-open{transform:none;opacity:1;pointer-events:auto}
.dealsbar__head{
  display:flex;align-items:flex-end;gap:12px 18px;
  margin:0 0 clamp(16px,2.4vh,24px);
}
.dealsbar__titles{display:flex;flex-direction:column;gap:12px;min-width:0}
/* the hero heading's style (.book__title) */
.dealsbar__title{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.75rem,4vw,3.4rem);line-height:1.08;letter-spacing:-.022em;color:var(--paper);
  text-wrap:balance;text-shadow:0 2px 10px rgba(6,24,29,.42),0 6px 44px rgba(6,24,29,.55);
}
.dealsbar__title em{font-style:italic;font-weight:300}
.dealsbar__sub{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0}
.dealsbar__flag{
  padding:5px 11px;border-radius:999px;background:var(--gold);color:#06181D;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.dealsbar__note{font-size:12.5px;color:rgba(244,241,233,.9);letter-spacing:.01em}
.dealsbar__nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.dnav{
  display:grid;place-items:center;width:52px;height:52px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(244,241,233,.34);background:rgba(244,241,233,.12);color:var(--paper);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.dnav svg{width:19px;height:19px}
.dnav:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);transform:translateY(-2px)}
.dnav--close{margin-left:8px}
/* previous/next only when the cards don't all fit across (20 Oct 2026) */
.dnav[hidden]{display:none}
.dnav:disabled{opacity:.35;cursor:default;transform:none;background:rgba(244,241,233,.12);border-color:rgba(244,241,233,.34);color:var(--paper)}
.dnav--close:hover{background:var(--sail);border-color:var(--sail);color:var(--on-accent)}
.dnav--close svg{width:16px;height:16px}
/* three cards with room between them */
.dealsbar{--deal-gap:clamp(22px,2.6vw,38px)}
.dealsbar__view{max-width:100%}
.dealsbar__view{overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.dealsbar__view{scroll-behavior:auto}}
.dealsbar__view::-webkit-scrollbar{display:none}
.deals__rail{display:flex;justify-content:flex-start;gap:var(--deal-gap);width:max-content}
/* the card keeps its 4:5 shape as a minimum and grows when the text needs
   it; the top padding keeps the two pills clear of the name when they stack
   on a narrow card (10 Nov 2026: at 1024px "11 Nov · 3 nts" sat on top of
   "The Sheriff House") */
.deal{
  position:relative;flex:0 0 clamp(196px,19vw,238px);min-height:clamp(245px,23.75vw,297.5px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:88px 16px 16px;border-radius:20px;overflow:hidden;isolation:isolate;
  background:var(--ink-2);color:var(--paper);user-select:none;
}
.deal img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.deal:hover img{transform:scale(1.06)}
.deal::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,24,29,.46) 0%,rgba(6,24,29,.10) 26%,rgba(6,24,29,.68) 52%,rgba(6,24,29,.97) 100%);
}
.deal__flag{
  position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:999px;
  background:var(--gold);color:#06181D;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.deal__flag svg{width:12px;height:12px;flex:0 0 auto}
/* a card too narrow for both top pills side by side puts the dates under
   the discount instead of across it (Danny, 29 Oct 2026) */
.deal{container-type:inline-size}
@container (max-width:259px){
  .deal__flag + .deal__when{top:50px;right:auto;left:12px}
}
.deal__when{
  position:absolute;top:12px;right:12px;padding:6px 10px;border-radius:999px;
  background:rgba(6,24,29,.5);border:1px solid rgba(244,241,233,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:11.5px;font-weight:500;white-space:nowrap;
}
.deal__name{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.05;letter-spacing:-.02em;
  text-shadow:0 2px 8px rgba(6,24,29,.6);
}
.deal__where{margin:4px 0 0;font-size:12.5px;color:rgba(244,241,233,.86);text-shadow:0 1px 8px rgba(6,24,29,.8)}
.deal__price{display:flex;align-items:baseline;gap:8px;margin-top:9px;flex-wrap:wrap}
.deal__was{font-size:13px;color:rgba(244,241,233,.75);text-decoration:line-through}
.deal__now{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.deal__unit{font-size:11.5px;color:rgba(244,241,233,.75)}
.deal__btn{
  margin-top:12px;display:inline-flex;align-self:flex-start;align-items:center;
  padding:10px 19px;border-radius:999px;background:var(--paper);color:var(--ink);
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .25s ease,color .25s ease;
}
.deal:hover .deal__btn{background:var(--sail);color:var(--on-accent)}
/* the star line, the same one the results page uses */
.deal__stars{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:12px;color:rgba(244,241,233,.86)}
.deal__stars svg{width:12px;height:12px;color:var(--gold);flex:0 0 auto}
.deal__stars b{font-weight:600}
.deal__stars span{color:rgba(244,241,233,.75)}
.deals__empty{
  flex:1 1 auto;padding:26px;text-align:center;color:var(--mist);font-size:14.5px;
  border:1px dashed rgba(244,241,233,.2);border-radius:20px;
}

/* ---------- after ---------- */
.after{
  position:relative;z-index:2;background:var(--ink);
  border-top:1px solid var(--line);
  padding:clamp(34px,5vw,56px) clamp(18px,3.4vw,44px);
  display:flex;flex-wrap:wrap;gap:28px 48px;align-items:baseline;
}
.after__lead{font-family:var(--display);font-weight:300;font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:-.015em;max-width:22ch;line-height:1.25}
.after__meta{display:flex;flex-wrap:wrap;gap:8px 34px;margin-left:auto;font-size:13.5px;color:var(--mist)}
.after__meta b{font-weight:500;color:var(--paper);font-variant-numeric:tabular-nums}


.sec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 28px}
.sec__title{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.06;letter-spacing:-.022em;
}
.cats .sec__title,.boats__head .sec__title{font-size:clamp(2.2rem,4.6vw,3.8rem)}
.sec__eyebrow{
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);
}
.feat .sec__eyebrow{color:var(--fg-2)}

/* ---------- popular categories (light band) ---------- */
.cats{
  position:relative;z-index:2;background:#fff;color:var(--ink);
  padding:clamp(60px,8vw,110px) clamp(12px,2.6vw,26px);
}
.cats .sec__title{color:var(--ink)}
.alllink{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:999px;
  border:1px solid rgba(6,24,29,.18);
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.alllink svg{width:16px;height:16px}
.alllink:hover{background:var(--sail);border-color:var(--sail);color:var(--on-accent)}
.cats .wrap{position:relative;z-index:1}
/* The rail runs the full width of the window and never ends: the script
   clones the set until the strip is wider than the screen, so there is always
   a card hanging off the left edge and another off the right, and stepping
   either way just brings the next one round. */
.cats__view{
  --cw:calc(min(1240px,100vw - 2 * clamp(12px,2.6vw,26px)) - 46px);
  --gap:clamp(14px,1.8vw,24px);
  --w:calc(var(--cw) * .82);
  --off:calc((100vw - var(--cw)) / 2);
  margin-top:clamp(28px,4vw,46px);
  margin-inline:calc(-1 * var(--off));
  overflow:hidden;cursor:grab;touch-action:pan-y;overscroll-behavior-x:contain;
}
.cats__view.is-drag{cursor:grabbing}
.cats__track{display:flex;gap:var(--gap);width:max-content;will-change:transform}
.stay{
  position:relative;flex:0 0 var(--w);aspect-ratio:4/5;user-select:none;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;
  padding:clamp(18px,2vw,28px);border-radius:24px;overflow:hidden;isolation:isolate;
  background:var(--ink-2);color:var(--paper);
}
.stay img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.stay:hover img{transform:scale(1.05)}
.stay::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,24,29,.32) 0%,rgba(6,24,29,.04) 30%,rgba(6,24,29,.40) 54%,rgba(6,24,29,.86) 100%);
}
.stay__tags{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;gap:8px}
.tag{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;white-space:nowrap;
  font-size:13.5px;font-weight:500;letter-spacing:.01em;color:var(--paper);
  background:rgba(244,241,233,.16);border:1px solid rgba(244,241,233,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.tag svg{width:15px;height:15px;flex:0 0 auto}
.tag b{font-weight:600}
.stay__title{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.06;letter-spacing:-.02em;
  text-shadow:0 2px 6px rgba(6,24,29,.55),0 6px 28px rgba(6,24,29,.7);
}
.stay__copy{margin:10px 0 0;max-width:28ch;font-size:15px;line-height:1.5;color:rgba(244,241,233,.9);text-shadow:0 1px 10px rgba(6,24,29,.6)}
.stay__btn{
  margin-top:18px;display:inline-flex;align-items:center;padding:13px 26px;border-radius:999px;
  background:var(--paper);color:var(--ink);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .25s ease,color .25s ease;
}
.stay:hover .stay__btn{background:var(--sail);color:var(--on-accent)}
.cats__nav{display:flex;justify-content:center;gap:10px;margin-top:clamp(20px,3vw,30px)}
.cats__nav .fnav{width:46px;height:46px}


/* ---------- why choose us ---------- */
.why{position:relative;z-index:2;background:var(--sky);color:var(--ink)}
.why__runway{position:relative;width:100%;height:230vh}
.why__pin{
  position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;
  padding:112px clamp(12px,2.6vw,26px) 40px;
}
.why__wrap{position:relative;display:flex;flex-direction:column;gap:clamp(28px,4vw,52px)}
/* the river mark from the logo, filling with brand blue as the words light up */
.why__mark{
  /* height leads now, width follows the mark's own proportions */
  /* 72% of the section, unless the column is too narrow to hold that width */
  --mh:min(72vh,calc(min(1194px,88vw) * 418 / 560));
  --mw:calc(var(--mh) * 560 / 418);
  --mark:url("../images/river-mark-mask.png");
  display:none;position:absolute;right:0;top:50%;transform:translateY(-50%);
  z-index:0;pointer-events:none;width:var(--mw);height:var(--mh);
}
.why__mark span{position:absolute;top:0;left:0;display:block}
.why__mark-base,.why__mark-fill{
  width:var(--mw);height:var(--mh);
  -webkit-mask:var(--mark) center/100% 100% no-repeat;
  mask:var(--mark) center/100% 100% no-repeat;
}
.why__mark-base{background:rgba(6,24,29,.07)}
/* fills top to bottom */
.why__mark-clip{width:var(--mw);height:0;overflow:hidden}
.why__mark-fill{background:rgba(0,90,146,.55)}
.why__wrap > *:not(.why__mark){position:relative;z-index:1}
.why__list{
  --line-fs:clamp(1.1rem,2vw,1.65rem);
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:clamp(22px,3vw,38px);max-width:min(980px,100%);
}
.why__item{display:grid;grid-template-columns:1fr;gap:2px}
.why__num{
  font-family:var(--display);font-weight:300;color:var(--sail);
  font-size:calc(var(--line-fs)*3.1);
  /* line box is the height of two lines of the reason it labels */
  line-height:calc(var(--line-fs)*2.9);
  font-variant-numeric:lining-nums;letter-spacing:-.03em;
}
.why__line{
  margin:0;font-family:var(--display);font-weight:300;color:var(--ink);
  font-size:var(--line-fs);line-height:1.45;letter-spacing:-.01em;
}
.why__line .word{display:inline-block}

/* ---------- featured cottages ---------- */
.feat{
  position:relative;z-index:2;background:#fff;color:var(--ink);
  --fg:#06181D;--fg-2:rgba(6,24,29,.75);--rule:rgba(6,24,29,.14);
}
.feat__runway{position:relative;width:100%}
.feat__pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:grid;grid-template-columns:1fr;grid-template-rows:38vh 1fr;
}
/* the photograph is a rounded tile filling the left half, like every other
   card on the site; the copy sits in the right */
.feat__grid{display:contents}
.feat__right{order:-1;position:relative;min-height:0}
.feat__left{
  position:relative;z-index:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(22px,3vw,40px) clamp(20px,5vw,84px) clamp(48px,6vw,72px);
}
.feat__left > *{max-width:600px}
.feat__top{display:flex;align-items:center;gap:22px;margin-bottom:clamp(20px,2.6vw,34px)}
.feat .sec__eyebrow{font-size:12px}
/* the progress bars: a vertical strip down the far left of the section on
   every screen, one bar per cottage, the current one longer and blue
   (Danny, 29 Oct 2026) */
.feat__bars{position:absolute;z-index:3;left:clamp(6px,.9vw,14px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:7px}
.fbar{
  width:22px;height:3px;border:0;padding:0;border-radius:999px;cursor:pointer;
  background:rgba(6,24,29,.18);transition:width .5s ease,background-color .5s ease;
}
.fbar.is-on{width:46px;background:var(--sail)}
.feat__bars .fbar{position:relative;width:3px;height:22px;transition:height .5s ease,background-color .5s ease}
.feat__bars .fbar.is-on{width:3px;height:46px}
.feat__bars .fbar::before{content:"";position:absolute;inset:-4px -12px}   /* a finger-sized target round a 3px bar */
.feat__stack{position:relative;display:grid;min-height:300px}
/* every slide in the same cell, so the stack is as tall as the tallest one
   and the arrows underneath can never land on its buttons */
.fslide{
  grid-area:1/1;opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);
}
.fslide.is-on{opacity:1;transform:none;pointer-events:auto}
.fslide__where{
  margin:0 0 12px;font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mist);
}
.fslide__name{
  margin:0;font-family:var(--display);font-weight:300;color:var(--fg);
  font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.02;letter-spacing:-.026em;
}
.fslide__copy{
  margin:18px 0 0;max-width:40ch;color:var(--fg-2);
  font-size:clamp(15.5px,1.3vw,18px);line-height:1.6;
}
.fslide__specs{
  display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none;
}
.fslide__specs li{
  padding:8px 15px;border-radius:999px;border:1px solid var(--rule);
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);
}
.fslide__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:30px}
.feat__arrows{display:flex;gap:8px;margin-top:clamp(22px,3vw,34px)}
.fnav{
  display:grid;place-items:center;width:46px;height:46px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(6,24,29,.18);background:transparent;color:var(--fg);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,opacity .25s ease;
}
.fnav svg{width:16px;height:16px}
.fnav:hover:not(:disabled){background:var(--sail);border-color:var(--sail);color:var(--on-accent)}
.fnav:disabled{opacity:.32;cursor:default}
.feat__cue{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:1;
  display:flex;align-items:center;gap:10px;pointer-events:none;
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-2);
  transition:opacity .5s ease;
}
.alllink--view{padding:14px 22px;font-size:12.5px}
.btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
}
.btn--go{
  padding:16px 30px;background:var(--sail);color:var(--on-accent);
  transition:background-color .25s ease;
}
.btn--go:hover{background:var(--sail-hi)}
.btn--ghost{padding:14px 4px;color:var(--fg-2);transition:color .25s ease}
.btn--ghost svg{width:14px;height:14px}
.btn--ghost:hover{color:var(--fg)}
.feat__frame{
  position:absolute;overflow:hidden;background:#EDEAE3;
  inset:calc(var(--ustrip-h) + 94px) 14px 4px;
  border-radius:24px;isolation:isolate;
  box-shadow:0 30px 60px -38px rgba(6,24,29,.55);
}
.feat__reel{
  position:absolute;inset:0;
  transition:transform .8s cubic-bezier(.22,.8,.2,1);
}
.fshot{position:absolute;left:0;right:0;height:100%}
.fshot img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- second search (over the boathouse) ---------- */
.find2{
  position:relative;z-index:2;isolation:isolate;overflow:hidden;
  display:flex;justify-content:center;background:var(--ink);
  padding:clamp(72px,10vw,132px) clamp(12px,2.6vw,26px);
}
.find2__shot{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 42%}
.find2::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,24,29,.74) 0%,rgba(6,24,29,.42) 48%,rgba(6,24,29,.80) 100%);
}
.find2__inner{position:relative;z-index:1;width:min(1120px,100%);display:flex;flex-direction:column;align-items:center;gap:26px}
.find2__eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--mist)}
.find2 .book__head{gap:14px}
.find2 .book__title{font-size:clamp(1.6rem,3.1vw,2.55rem)}
.find2 .note{margin:0}

/* ---------- social feed ---------- */
.insta{
  /* the same ground as the accreditations below it, so the two read as one
     band rather than two sections that happen to touch */
  position:relative;z-index:2;background:var(--sky);color:var(--ink);
  padding:clamp(48px,6vw,78px) clamp(12px,2.6vw,26px) clamp(30px,4vw,46px);
}
.insta__head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;
  margin-bottom:clamp(22px,3vw,34px);
}
.insta__heading{display:flex;flex-direction:column;gap:6px}
.insta__eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(6,24,29,.75)}
.insta__handle{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--display);font-weight:300;letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.05;color:var(--ink);
}
.insta__handle svg{width:clamp(24px,2.6vw,32px);height:clamp(24px,2.6vw,32px);flex:0 0 auto;color:var(--sail)}
.insta__follow{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:13px 24px;border-radius:999px;border:1px solid rgba(6,24,29,.22);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.insta__follow svg{width:16px;height:16px}
.insta__follow:hover{background:var(--sail);border-color:var(--sail);color:var(--on-accent)}
.insta__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(8px,1.2vw,14px);
  margin:0;padding:0;list-style:none;
}
.ipost{
  /* 4:5 — the shape Instagram actually serves a feed post in */
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:18px;
  background:var(--sky-2);isolation:isolate;
  box-shadow:0 18px 40px -28px rgba(6,24,29,.6);
}
.ipost img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ipost:hover img{transform:scale(1.07)}
.ipost__veil{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;
  background:linear-gradient(180deg,rgba(6,24,29,0) 42%,rgba(6,24,29,.82) 100%);
  opacity:0;transition:opacity .35s ease;
}
.ipost:hover .ipost__veil,.ipost:focus-visible .ipost__veil{opacity:1}
.ipost__cap{
  font-size:13px;line-height:1.4;color:var(--paper);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ipost__ico{
  position:absolute;top:12px;right:12px;width:17px;height:17px;color:var(--paper);
  opacity:0;transition:opacity .35s ease;
}
.ipost__ico svg{width:100%;height:100%;display:block}
.ipost:hover .ipost__ico{opacity:.9}
.insta__note{
  margin:clamp(18px,2.4vw,26px) 0 0;text-align:center;
  font-size:13px;color:rgba(6,24,29,.75);letter-spacing:.01em;
}
.insta__note b{color:var(--ink);font-weight:600}
@media (min-width:640px){.insta__grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.insta__grid{grid-template-columns:repeat(6,1fr)}}

/* ---------- seasonal offer ---------- */
.seas{
  position:fixed;z-index:80;right:clamp(14px,2.6vw,26px);bottom:clamp(14px,2.6vw,26px);
  width:min(380px,calc(100vw - 28px));
  border-radius:26px;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);background:rgba(6,24,29,.90);color:var(--paper);
  backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:0 44px 100px -34px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(22px) scale(.97);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;
}
.seas.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s 0s}
.seas__shot{position:relative;height:190px;overflow:hidden;background:var(--ink-2)}
/* a portrait photograph: hold the crop on the swans, a third of the way down */
.seas__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 27%;display:block}
.seas__shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,24,29,0) 45%,rgba(6,24,29,.8) 100%);
}
.seas__badge{
  position:absolute;z-index:1;left:18px;bottom:14px;
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--gold);color:#06181D;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.seas__close{
  position:absolute;z-index:2;top:12px;right:12px;
  display:grid;place-items:center;width:34px;height:34px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(244,241,233,.3);background:rgba(6,24,29,.55);color:var(--paper);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background-color .25s ease,border-color .25s ease,transform .25s ease;
}
.seas__close svg{width:13px;height:13px}
.seas__close:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);transform:rotate(90deg)}
.seas__body{padding:18px 20px 20px}
.seas__title{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.45rem,2.4vw,1.85rem);line-height:1.08;letter-spacing:-.02em;
}
.seas__copy{margin:9px 0 0;font-size:14px;line-height:1.5;color:var(--mist)}
.seas__acts{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.seas__go{
  flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 22px;border-radius:999px;border:0;cursor:pointer;
  background:var(--sail);color:var(--on-accent);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .25s ease;
}
.seas__go:hover{background:var(--sail-hi)}
.seas__no{
  border:0;background:none;cursor:pointer;padding:12px 4px;
  font-size:12px;color:var(--mist);letter-spacing:.02em;
  transition:color .2s ease;
}
.seas__no:hover{color:var(--paper)}
@media (max-width:520px){
  .seas{left:14px;right:14px;width:auto;bottom:14px}
  .seas__shot{height:108px}
}

/* ---------- trust bar ---------- */
.trust{
  position:relative;z-index:2;overflow:hidden;background:var(--sky);color:var(--ink);
  padding:clamp(26px,3.2vw,40px) clamp(12px,2.6vw,26px) clamp(40px,5vw,64px);
}
.trust__list{
  position:relative;z-index:1;list-style:none;margin:0 auto;padding:0;width:min(1194px,100%);
  display:grid;grid-template-columns:1fr;gap:12px;
}
/* the accreditations as the site draws them: a monoline roundel and two lines
   of type, on the same glass as everything else */
.badge{
  display:flex;align-items:center;gap:16px;height:100%;
  padding:16px 22px 16px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.62);
  color:rgba(6,24,29,.8);box-shadow:0 18px 40px -30px rgba(6,24,29,.35);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.badge:hover,.badge:focus-visible{background:#fff;border-color:#fff;color:var(--ink)}
.badge__ico{flex:0 0 auto;width:46px;height:46px;color:var(--sail)}
.badge__ico svg{display:block;width:100%;height:100%}
.badge__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.badge__txt b{
  font-family:var(--display);font-weight:300;font-size:21px;line-height:1.05;letter-spacing:-.015em;color:var(--ink);white-space:nowrap;
}
.badge__txt span{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(6,24,29,.75)}

/* ---------- things to do (stacking cards) ---------- */
.boats{
  position:relative;z-index:2;background:var(--sky);color:var(--ink);
  padding:clamp(40px,6vw,80px) clamp(12px,2.6vw,26px) clamp(60px,8vw,110px);
  --boats-top:calc(var(--ustrip-h) + 92px);
  --boats-head:132px;
  --boats-gap:30px;
  --boats-item:min(86vh,660px);
  /* the heading's ground reaches 40px past the column on each side: keep it
     inside the section, or a phone widens the whole page to fit it and every
     fixed layer (menu, cookie banner, offers) is sized too big (MOBILE-AUDIT
     H1, 28 Oct 2026) */
  overflow-x:clip;
}
/* under the phone header, which is shorter than the floating pill was */
@media (max-width:959px){
  .boats{--boats-top:calc(var(--chrome-h) + 12px)}
}
/* flow-root: the first item's negative margin must not collapse through the stack's top */
.boats__stack{position:relative;display:flow-root}
/* The heading is sticky in its own box, sized so it lets go at the same
   moment as the last card: a sticky element releases when its container's
   bottom reaches it, and a 660px card meets that point 400px before a 132px
   heading would. Out of the flow, so it cannot take clicks from the cards. */
.boats__headwrap{
  position:absolute;top:0;left:0;right:0;z-index:20;pointer-events:none;
  height:calc(100% - (var(--boats-item) - var(--boats-top) - var(--boats-head)));
}
.boats__head{
  position:sticky;top:var(--boats-top);height:var(--boats-head);isolation:isolate;pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;
}
/* the cards release from sticky before the heading does, so give the heading
   a ground for them to pass behind rather than through */
.boats__head::before{
  content:"";position:absolute;inset:-26px -40px -16px;z-index:-1;pointer-events:none;
  background:var(--sky);
}
.boats__heading{display:flex;flex-direction:column;gap:7px}
.boats__head .sec__title{color:var(--ink)}
.boats__sub{
  font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(6,24,29,.75);
}
.boats__all{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:12px 22px;border-radius:999px;border:1px solid rgba(6,24,29,.24);
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.boats__all svg{width:16px;height:16px}
.boats__all:hover{background:var(--sail);border-color:var(--sail);color:var(--on-accent)}
.boats__item{
  position:sticky;top:0;height:var(--boats-item);
  z-index:calc(var(--i) + 1);
}
/* the card sits its sticky offset below the item's top; pull the first item
   up so the card shows straight under the heading */
.boats__headwrap + .boats__item{margin-top:calc(-1 * var(--boats-top))}
.bcard{
  position:relative;top:calc(var(--boats-top) + var(--boats-head) + var(--boats-gap) + var(--i) * 12px);
  transform-origin:top center;will-change:transform;
  display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,30px);
  height:min(54vh,440px);padding:clamp(20px,2.2vw,32px);
  /* white glass on the sky ground; the stack behind shows through faintly */
  border-radius:28px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.84);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 30px 70px -36px rgba(6,24,29,.42),0 1px 0 rgba(6,24,29,.04);
  overflow:hidden;
}
.bcard__body{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
.bcard__kind{
  font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(6,24,29,.75);
}
.bcard__title{
  margin:0;font-family:var(--display);font-weight:300;color:var(--ink);
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.022em;
}
.bcard__copy{
  margin:0;max-width:40ch;color:rgba(6,24,29,.78);
  font-size:clamp(15px,1.2vw,17px);line-height:1.6;
}
.bcard__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:6px}
.bcard__link{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:999px;border:1px solid rgba(6,24,29,.3);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.bcard__link svg{width:15px;height:15px}
.bcard__link:hover{background:var(--sail);border-color:var(--sail);color:var(--on-accent)}
.bcard__shot{position:relative;overflow:hidden;border-radius:18px;background:var(--sky-2);min-height:0}
.bcard__shot img{width:100%;height:100%;object-fit:cover;display:block}
/* a ground for the tags over bright skies */
.bcard__shot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,24,29,.42) 0%,rgba(6,24,29,0) 38%)}
.bcard__tags{z-index:2}
/* capacity and bathrooms, the same glass tags as the category cards */
.bcard__tags{position:absolute;top:14px;left:14px;right:14px;display:flex;flex-wrap:wrap;gap:8px}
.boats__tail{height:22vh}

@media (min-width:760px){
  .brk{display:inline}
  .book__title{text-wrap:normal;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

@media (min-width:640px){
  .cats__view{--w:calc((var(--cw) - var(--gap)) / 2)}
}
@media (min-width:1000px){
  .cats__view{--w:calc((var(--cw) - 2 * var(--gap)) / 3)}
}
@media (min-width:760px){
  .why__item{grid-template-columns:calc(var(--line-fs)*2.6) 1fr;gap:0 clamp(14px,1.6vw,26px);align-items:start}
}
@media (min-width:1200px){
  .why__list{max-width:min(820px,100%)}
  .why__mark{display:block}
}
@media (min-width:900px){
  .feat__pin{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .feat__left{padding-top:calc(var(--ustrip-h) + 80px)}
  /* clear of the header pill at the top, the same gutter on the other three */
  .feat__frame{inset:calc(var(--ustrip-h) + 104px) 0 clamp(20px,2.6vw,32px) clamp(20px,2.6vw,32px)}
  .feat__cue{left:75%}
}
@media (max-width:899px){
  .feat__left > *{max-width:none}
  .fslide__copy{max-width:none}
}

@media (min-width:820px){
  .bcard{grid-template-columns:1.15fr .85fr}
}
@media (min-width:520px){
  .trust__list{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .trust__list{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:820px){
  .boats{--boats-head:96px}
}
@media (max-width:819px){
  .bcard{grid-template-rows:1fr auto;height:min(58vh,460px)}
  .bcard__shot{order:-1;min-height:120px}
  .bcard__copy{max-width:none}
}

/* Phones: nothing smaller than 12px (MOBILE-AUDIT L1) and every control
   at least 44px to tap (M3), 28 Oct 2026 */
@media (max-width:719px){
  .dealsbar__flag,.deal__flag,.deal__when,.deal__unit,.deal__btn,.sec__eyebrow,
  .fslide__where,.feat__cue,.insta__eyebrow,.seas__badge,.badge__txt span,.bcard__kind{font-size:12px}
  .seas__close{width:44px;height:44px}
  .seas__no,.insta__handle{min-height:44px}
}

/* ==========================================================================
   Phones, 28 Oct 2026 (Danny's mobile list)
   ========================================================================== */
@media (max-width:719px){
  /* Popular categories: one whole card at a time, nothing hanging off the
     edges; the arrows underneath bring the next one round. No swipe on a
     phone (Danny, 29 Oct 2026: it felt sticky), so the page scrolls freely
     over the cards. */
  .cats__view{--w:var(--cw);margin-inline:0;border-radius:24px;cursor:auto;touch-action:auto}

  /* Last minute deals drawer: big cards, the next one just showing at the
     edge to say there are more (Danny, 29 Oct 2026) */
  .dealsbar{padding:20px 16px calc(16px + env(safe-area-inset-bottom))}
  .dealsbar__head{margin-bottom:14px}
  .dealsbar__title{font-size:clamp(1.6rem,7vw,2rem)}
  .dealsbar__view{scroll-snap-type:x mandatory;scroll-padding-left:0}
  .deals__rail{--deal-gap:12px}
  .deal{flex-basis:calc(100vw - 32px - 52px);aspect-ratio:auto;min-height:0;height:min(400px,calc(100svh - var(--chrome-h) - 265px));scroll-snap-align:start;padding:18px}
  .deal__name{font-size:clamp(1.6rem,7vw,2rem)}
  .deal__where,.deal__stars{font-size:13.5px}
  .deal__now{font-size:21px}
  .deal__btn{padding:12px 22px;font-size:12px}

  /* the seasonal offer floats over the page, nine tenths of the screen,
     with a deep shadow under it (Danny, 29 Oct 2026; full screen the day
     before) */
  .seas{inset:5svh 5vw;width:auto;border:1px solid var(--line);border-radius:26px;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;background:#06181D;
    box-shadow:0 40px 90px -20px rgba(0,0,0,.95),0 0 0 100vmax rgba(6,24,29,.35)}
  .seas__shot{flex:1 1 auto;height:auto;min-height:38vh}
  .seas__shot::after{background:linear-gradient(180deg,rgba(6,24,29,0) 50%,#06181D 100%)}
  .seas__close{top:12px;right:12px}
  .seas__body{flex:0 0 auto;padding:20px 20px 22px}
  .seas__title{font-size:clamp(1.7rem,7.4vw,2.1rem)}
  .seas__copy{font-size:15.5px}
  .seas__acts{flex-direction:column;align-items:stretch;margin-top:22px}
  .seas__go{min-height:52px}

  /* Three reasons: all three on the screen while the words light up. The
     numbers sit beside the words, as on a wide screen, and the pinned
     screen is the visible one (svh), not the one behind Safari's bars. */
  .why__pin{height:100vh;height:100svh;padding:calc(var(--chrome-h) + 18px) 20px 22px}
  .why__wrap{gap:22px}
  .why .sec__title{font-size:clamp(1.75rem,7.6vw,2.2rem)}
  .why__list{--line-fs:clamp(1rem,4.7vw,1.22rem);gap:18px}
  .why__item{grid-template-columns:2.1em 1fr;gap:0 10px;align-items:start}
  .why__num{font-size:calc(var(--line-fs)*2.2);line-height:1}

  /* Featured cottages: pinned while the page scrolls through them, as on a
     wide screen (Danny, 29 Oct 2026), and one fixed size: the visible
     screen under the header, the words at their own height and the photo
     taking what is left, so nothing is cut off. A swipe or the bars change
     the cottage too; the arrows are not needed. */
  .feat__pin{height:100vh;height:100svh;display:flex;flex-direction:column;
    padding:calc(var(--chrome-h) + 14px) 0 18px;touch-action:pan-y}
  .feat__right{order:-1;flex:1 1 auto;min-height:150px;display:flex}
  .feat__frame{position:relative;inset:auto;flex:1 1 auto;margin:0 16px 0 22px;box-shadow:0 22px 44px -30px rgba(6,24,29,.55)}
  .feat__reel{transform:none!important}
  .fshot{top:0!important;opacity:0;transition:opacity .5s ease}
  .fshot.is-on{opacity:1}
  .feat__left{flex:0 0 auto;padding:16px 16px 0 22px;justify-content:flex-start}
  .feat__top{margin-bottom:10px}
  .feat__stack{min-height:0}
  .fslide{transform:none}
  .fslide__name{font-size:clamp(1.9rem,8.4vw,2.4rem)}
  .fslide__copy{margin-top:8px;font-size:15px;line-height:1.5}
  .fslide__specs{margin-top:10px}
  .fslide__specs li{padding:6px 12px}
  .fslide__cta{margin-top:14px;flex-wrap:nowrap;gap:10px}
  .fslide__cta .btn--go{padding:14px 22px}
  .fslide__cta .alllink--view{padding:13px 16px;white-space:nowrap}
  .feat__arrows,.feat__cue{display:none}

  /* Boat cards: wider, and short enough to sit wholly on the visible
     screen under the heading, the fifth one included */
  .boats{padding-inline:0;--boats-head:104px;--boats-gap:14px}
  .boats .wrap{padding-inline:12px}
  /* the heading's box is placed against the column's edge, not inside its
     padding: give it the same 12px; title and View all on one line, the
     line about the boats under both */
  .boats__headwrap{left:12px;right:12px}
  .boats__head{display:grid;grid-template-columns:1fr auto;align-items:center;align-content:center;gap:6px 12px}
  .boats__heading{display:contents}
  .boats__head .sec__title{grid-column:1;grid-row:1;font-size:clamp(1.9rem,8.4vw,2.4rem)}
  .boats__sub{grid-column:1 / -1;grid-row:2;letter-spacing:.14em;line-height:1.45}
  .boats__all{grid-column:2;grid-row:1;padding:10px 16px;font-size:12px;min-height:44px}
  .bcard{height:min(460px,calc(100svh - var(--boats-top) - var(--boats-head) - var(--boats-gap) - 4 * 12px - 14px));
    padding:16px;gap:14px;border-radius:24px}
  .bcard__body{gap:8px;justify-content:flex-start}
  .bcard__title{font-size:clamp(1.6rem,7vw,2rem)}
  .bcard__copy{font-size:14.5px;line-height:1.5}
  .bcard__cta{margin-top:2px}
}