/* ==========================================================================
   Riverside Rentals — the chrome every page wears
   The utility strip, the masthead and its menus, the footer and the back to
   top button. Lifted out of the home page so the results page cannot drift
   away from it. Expects the site's tokens (--ink, --paper, --sail, --glass,
   --line, --display, --sans, --ustrip-h) on :root.
   ========================================================================== */

/* the column every section sits in */
.wrap{width:min(1240px,100%);margin-inline:auto;padding-inline:23px}

/* ---------- sitewide utility strip ---------- */
.ustrip{
  position:fixed;inset:0 0 auto 0;z-index:45;height:var(--ustrip-h);
  display:flex;align-items:center;
  padding-inline:calc(clamp(12px,2.6vw,26px) + 23px);
  background:var(--ink-2);border-bottom:1px solid var(--line);
}
.ustrip__inner{
  width:min(1194px,100%);margin-inline:auto;padding-left:23px;padding-right:9px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.ustrip__grp{display:flex;align-items:center;gap:22px}
.ustrip a,.acct__btn{
  position:relative;white-space:nowrap;
  font-family:var(--sans);font-size:13.5px;letter-spacing:.005em;
  color:rgba(244,241,233,.75);transition:color .25s ease;
}
.ustrip a:hover,.acct__btn:hover{color:var(--paper)}
.ustrip__grp > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--sail-glow);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.ustrip__grp > a:hover::after{transform:scaleX(1)}
.ustrip__tel{font-variant-numeric:tabular-nums}

/* account menu */
.acct{position:relative}
.acct__btn{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:6px 2px;cursor:pointer;
}
.acct__btn svg{display:block;flex:0 0 auto;stroke:currentColor;fill:none}
.acct__person{width:15px;height:15px}
.acct__chev{width:9px;height:9px;transition:transform .25s ease}
.acct__btn[aria-expanded="true"] .acct__chev{transform:rotate(180deg)}
.acct__btn[aria-expanded="true"]{color:var(--paper)}
.acct__menu{
  position:absolute;top:calc(100% + 9px);right:0;z-index:1;
  display:flex;flex-direction:column;min-width:190px;padding:6px;
  border-radius:14px;border:1px solid var(--line);background:var(--ink-2);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.9);
}
.acct__menu a{
  display:block;padding:10px 13px;border-radius:9px;font-size:13.5px;
  color:rgba(244,241,233,.75);transition:background-color .2s ease,color .2s ease;
}
.acct__menu a:hover,.acct__menu a:focus-visible{background:rgba(244,241,233,.08);color:var(--paper)}

/* ---------- masthead ---------- */
.mast{
  position:fixed;top:var(--ustrip-h);left:0;right:0;z-index:40;
  padding:14px calc(clamp(12px,2.6vw,26px) + 23px);
  pointer-events:none;
}
.mast::before{
  content:"";position:absolute;inset:-14px 0 auto 0;height:150px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,24,29,.58),rgba(6,24,29,0));
  opacity:1;transition:opacity .45s ease;
}
.mast.is-set::before{opacity:0}
.mast__inner{
  position:relative;pointer-events:auto;overflow:visible;
  width:min(1194px,100%);margin-inline:auto;
  display:flex;align-items:center;gap:24px;
  padding:8px;border-radius:999px;
  border:1px solid transparent;background:transparent;
  transition:background-color .45s ease,border-color .45s ease,box-shadow .45s ease,padding .45s ease;
}
.mast.is-set .mast__inner{
  background:var(--glass);
  border-color:var(--line);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 26px 70px -30px rgba(0,0,0,.8);
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand__logo{display:block;height:50px;width:auto;margin-left:14px}
.nav{display:none;gap:12px}
.nav > a,.nav__btn{
  font-size:14px;font-weight:450;letter-spacing:.005em;color:rgba(244,241,233,.86);
  position:relative;padding-block:4px;transition:color .25s ease;
}
.nav > a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--sail-glow);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.nav > a:hover,.nav__btn:hover,.nav__item.is-open .nav__btn{color:var(--paper)}
.nav > a:hover::after{transform:scaleX(1)}
/* the section you are in: full white with a fixed blue underline, in place
   of the eyebrow pages used to carry above their heading (Danny, 22 Oct 2026) */
.nav > a.is-current,.nav__btn.is-current{color:var(--paper);font-weight:600}
.nav > a.is-current::after{height:2px;transform:scaleX(1)}
a.nav__btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--sail-glow);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
a.nav__btn:hover::after{transform:scaleX(1)}
.nav__btn.is-current::after{height:2px;transform:none}
.sheet a.is-current{color:var(--sail-glow)}

/* ---------- mega menus ---------- */
.nav__item{display:flex;align-items:center;gap:2px}
/* Cottages and Things to Do: the word is a link to the page (Danny,
   22 Oct 2026); the arrow beside it opens the menu, as does hovering */
.nav__btn{display:inline-flex;align-items:center}
.nav__toggle{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:28px;padding:0;border:0;background:none;cursor:pointer;color:rgba(244,241,233,.86);
}
.nav__toggle::before{content:"";position:absolute;left:-4px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
.nav__toggle svg{width:10px;height:10px;opacity:.7;transition:transform .25s ease}
.nav__toggle:hover,.nav__toggle[aria-expanded="true"]{color:var(--paper)}
.nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{
  /* the same glass as the header pill and the search bar, one column wide */
  position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:5;pointer-events:auto;
  display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(18px,3vw,40px);
  /* on a wide screen the content lines up with the header pill above it,
     rather than hugging the left edge of the window */
  padding:22px max(calc(clamp(12px,2.6vw,26px) + 23px),calc((100% - 1194px)/2 + 8px)) 26px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(6,24,29,.84);
  backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s ease,transform .28s ease,visibility 0s .28s;
}
/* keeps the pointer inside while it crosses the gap under the pill */
.mega::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.mega.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .28s ease,transform .28s ease,visibility 0s 0s}
.mega__list{display:flex;flex-direction:column;padding:8px 0 0;min-width:0}
/* the words sit on a white card, the same as the results cards; the
   photograph beside it stays as it is */
.mega .mega__list{
  padding:18px 12px 12px;border-radius:24px;background:#fff;color:var(--ink);
  border:1px solid rgba(6,24,29,.08);box-shadow:0 24px 50px -30px rgba(0,0,0,.7);
}
/* the photograph fills its column and matches the card's height, so the
   two line up and it never spills past the edge */
.mega .mega__shot{align-self:stretch;aspect-ratio:auto;max-height:none;min-height:0}
.mega__eyebrow{
  margin:0 0 10px 14px;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(6,24,29,.75);
}
.mega__link{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 14px;border-radius:16px;
  transition:background-color .2s ease;
}
.mega__title{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.1;letter-spacing:-.018em;color:var(--ink);
}
.mega__copy{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:rgba(6,24,29,.75)}
.mega__title,.mega__copy{transition:color .2s ease}
.mega__link svg{
  width:16px;height:16px;flex:0 0 auto;color:var(--sail);
  opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .2s ease,color .2s ease;
}
/* the item you are on: brand blue, white words, like the View cottages buttons */
.mega__link:hover,.mega__link:focus-visible,.mega__link.is-on{background:var(--sail)}
.mega__link:hover .mega__title,.mega__link:focus-visible .mega__title,.mega__link.is-on .mega__title,
.mega__link:hover .mega__copy,.mega__link:focus-visible .mega__copy,.mega__link.is-on .mega__copy,
.mega__link:hover svg,.mega__link:focus-visible svg,.mega__link.is-on svg{color:var(--on-accent)}
.mega__link:hover svg,.mega__link:focus-visible svg,.mega__link.is-on svg{opacity:1;transform:none}
.mega__all{
  margin-top:auto;padding-top:10px;border-top:1px solid rgba(6,24,29,.10);border-radius:0 0 16px 16px;
}
.mega__all .mega__title{color:var(--sail)}
.mega__all .mega__title{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
/* Cottages: the villages take the photograph's place, on the same white
   card, with All cottages as a button at the foot (Danny, 22 Oct 2026) */
.mega__places{
  display:flex;flex-direction:column;gap:14px;min-width:0;
  padding:22px 22px 20px;border-radius:24px;background:#fff;color:var(--ink);
  border:1px solid rgba(6,24,29,.08);box-shadow:0 24px 50px -30px rgba(0,0,0,.7);
  --focus:var(--sail);
}
.mega__h{
  margin:0 0 2px;font-family:var(--display);font-weight:300;
  font-size:clamp(1.15rem,1.5vw,1.45rem);line-height:1.1;letter-spacing:-.018em;color:rgba(6,24,29,.75);
}
.mega__towns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.mega__town{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:104px;
  padding:14px 16px;border-radius:16px;background:var(--sky,#DCE9F1);
  transition:background-color .2s ease;
}
.mega__town svg{position:absolute;top:14px;right:14px;width:16px;height:16px;color:var(--sail);transition:color .2s ease}
.mega__town:hover,.mega__town:focus-visible{background:var(--sail)}
.mega__town:hover .mega__title,.mega__town:focus-visible .mega__title,
.mega__town:hover .mega__copy,.mega__town:focus-visible .mega__copy,
.mega__town:hover svg,.mega__town:focus-visible svg{color:var(--on-accent)}
.mega__villages{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.mega__villages a{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(6,24,29,.16);font-size:14px;color:var(--ink);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.mega__n{font-size:12px;color:rgba(6,24,29,.75);transition:color .2s ease}
.mega__villages a:hover,.mega__villages a:focus-visible{background:var(--sail);border-color:var(--sail);color:var(--on-accent)}
.mega__villages a:hover .mega__n,.mega__villages a:focus-visible .mega__n{color:var(--on-accent)}
.mega__btn{
  align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:0 26px;border-radius:999px;background:var(--sail);color:var(--on-accent);
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .2s ease;
}
.mega__btn svg{width:16px;height:16px}
/* Things to Do: a smaller photograph on the same white card, with its
   button underneath, like Cottages (Danny, 22 Oct 2026) */
.mega__side .mega__shot{flex:1 1 auto;min-height:220px;max-height:340px;aspect-ratio:auto;border-radius:16px}
.mega__btn:hover,.mega__btn:focus-visible{background:var(--sail-hi)}
.mega__shot{
  position:relative;overflow:hidden;border-radius:22px;background:var(--ink-2);min-height:400px;aspect-ratio:1200/620;max-height:min(52vh,560px);
}
.mega__layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .4s ease;
}
.mega__layer.is-on{opacity:1}
.mega__shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,24,29,0) 50%,rgba(6,24,29,.7) 100%);
}
.mega__cap{
  position:absolute;left:22px;right:22px;bottom:18px;z-index:1;
  font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,1.8vw,1.8rem);
  line-height:1.1;letter-spacing:-.02em;color:var(--paper);text-shadow:0 2px 16px rgba(6,24,29,.6);
}
.mast__right{display:flex;align-items:center;gap:10px;margin-left:auto}
.pill{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:10px 18px;border-radius:999px;
  border:1px solid rgba(244,241,233,.34);
  font-size:13px;font-weight:500;letter-spacing:.01em;
  background:rgba(244,241,233,.06);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
  cursor:pointer;
}
.pill:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.pill--solid{
  background:var(--sail);color:var(--on-accent);border-color:var(--sail);
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 28px;
}
.pill--solid:hover{background:var(--sail-hi);border-color:var(--sail-hi);color:var(--on-accent)}
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:42px;height:42px;padding:0 11px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(244,241,233,.34);background:rgba(244,241,233,.06);
}
/* three lines the same length (Danny, 29 Oct 2026) */
.burger span{display:block;height:1.5px;background:var(--paper);border-radius:2px;transition:transform .32s cubic-bezier(.65,0,.35,1),opacity .2s ease}
/* the lines fold into a cross as the menu slides over them, and unfold as it
   slides away (Kevin, 30 Oct 2026); a touch on hover */
.burger:hover span:nth-child(2){transform:scaleX(.6)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:scaleX(0);opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.burger:active{transform:scale(.94)}

/* ---------- mobile menu ----------
   It slides in from the right, the side its button is on, and slides back
   out the same way at the same speed (Kevin, 30 Oct 2026). Hidden, it is
   off screen and out of the tab order (visibility), so nothing in it can be
   reached until it opens. */
.sheet{
  position:fixed;inset:0;z-index:50;
  display:flex;flex-direction:column;gap:6px;
  background:rgba(6,24,29,.94);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:calc(var(--ustrip-h) + 84px) clamp(20px,6vw,40px) 40px;
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s cubic-bezier(.65,0,.35,1),visibility 0s linear .42s;
}
.sheet.is-open{
  transform:none;visibility:visible;
  transition:transform .42s cubic-bezier(.65,0,.35,1),visibility 0s linear 0s;
}
/* the links follow the panel in, one after another */
.sheet > a,.sheet__foot{opacity:0;transform:translateX(28px);transition:opacity .25s ease,transform .25s ease}
.sheet.is-open > a,.sheet.is-open .sheet__foot{opacity:1;transform:none;transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.sheet.is-open > a:nth-of-type(1){transition-delay:.14s}
.sheet.is-open > a:nth-of-type(2){transition-delay:.18s}
.sheet.is-open > a:nth-of-type(3){transition-delay:.22s}
.sheet.is-open > a:nth-of-type(4){transition-delay:.26s}
.sheet.is-open > a:nth-of-type(5){transition-delay:.30s}
.sheet.is-open > a:nth-of-type(6){transition-delay:.34s}
.sheet.is-open .sheet__foot{transition-delay:.38s}
.sheet a{
  font-family:var(--display);font-weight:300;font-size:clamp(28px,7.6vw,40px);
  letter-spacing:-.02em;padding:7px 0;border-bottom:1px solid rgba(244,241,233,.09);
}
.sheet__foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;color:var(--mist);font-size:14px}
.sheet__foot a{font-family:var(--sans);font-size:14px;border:0;padding:0;letter-spacing:.01em}
.sheet__close{
  position:absolute;top:calc(var(--ustrip-h) + 16px);right:clamp(18px,3.4vw,44px);
  width:42px;height:42px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(244,241,233,.34);background:rgba(244,241,233,.06);
  font-size:18px;line-height:1;
  /* the cross turns into place once the panel is in, and back out as it
     leaves; it turns a quarter on hover */
  opacity:0;transform:rotate(-90deg) scale(.6);
  transition:opacity .2s ease,transform .25s ease,background-color .2s ease;
}
.sheet.is-open .sheet__close{
  opacity:1;transform:none;
  transition:opacity .3s ease .2s,transform .45s cubic-bezier(.34,1.56,.64,1) .2s,background-color .2s ease;
}
.sheet.is-open .sheet__close:hover{transform:rotate(90deg);background:rgba(244,241,233,.14);transition-delay:0s}
.sheet.is-open .sheet__close:active{transform:rotate(90deg) scale(.92)}

/* ---------- footer ---------- */
.foot{
  position:relative;z-index:2;overflow:hidden;
  background:var(--ink-2);border-top:1px solid var(--line);color:var(--mist);
  padding:clamp(40px,5vw,58px) clamp(12px,2.6vw,26px) 0;
  font-size:14.5px;line-height:1.55;
}
.foot .wrap{position:relative;z-index:1}
.foot__grid{display:grid;grid-template-columns:1fr;gap:30px 40px}
.foot__logo{display:block;height:60px;width:auto;margin-bottom:16px}
.foot__blurb{margin:0 0 16px;max-width:30ch;line-height:1.5}
.foot__contact{display:flex;flex-direction:column;gap:4px}
.foot__contact a{display:inline-flex;align-items:center;gap:9px;color:var(--paper);font-variant-numeric:tabular-nums}
.foot__contact svg{width:15px;height:15px;flex:0 0 auto;opacity:.65}
.foot__social{display:flex;gap:8px;margin-top:16px}
.foot__social a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:999px;
  border:1px solid var(--line);color:var(--paper);
  transition:background-color .25s ease,border-color .25s ease;
}
.foot__social a:hover{background:var(--sail);border-color:var(--sail)}
.foot__social svg{width:15px;height:15px}
.foot__h{
  margin:0 0 12px;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--mist-2);
}
.foot__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.foot__list a{position:relative;color:rgba(244,241,233,.78);transition:color .25s ease}
.foot__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:11px;height:1px;
  background:var(--sail-glow);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.foot__list a:hover{color:var(--paper)}
.foot__list a:hover::after{transform:scaleX(1)}
.foot__list--2{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.foot__co{margin:0;font-size:14px;line-height:1.65}
.foot__co b{display:block;font-weight:500;color:var(--paper)}
.foot__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 26px;
  margin-top:clamp(26px,3.4vw,40px);padding:18px 0 0;border-top:1px solid var(--line);
  font-size:13.5px;
}
.foot__policies{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot__policies a:hover{color:var(--paper)}
/* the copyright and the build credit (Kevin, 29 Oct 2026) */
.foot__credits{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px}
.foot__by{display:inline-flex;align-items:center;min-height:44px}
.foot__by:hover{color:var(--paper)}
/* the wordmark runs the full width of the viewport, as it does at the end of
   the hero, below the legal row */
.foot__markwrap{position:absolute;left:0;right:0;bottom:0;overflow:hidden;height:0;pointer-events:none;z-index:0}
.foot__mark{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  margin:0;font-family:var(--display);font-weight:300;letter-spacing:-.028em;line-height:1;white-space:nowrap;
  color:rgba(244,241,233,.05);user-select:none;
}

/* ---------- back to top ---------- */
.totop{
  position:fixed;right:clamp(14px,2.6vw,26px);bottom:clamp(14px,2.6vw,26px);z-index:44;
  width:48px;height:48px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--glass);color:var(--paper);
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s ease,transform .35s ease,visibility 0s .35s,background-color .25s ease,border-color .25s ease;
}
.totop.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease,visibility 0s 0s,background-color .25s ease,border-color .25s ease}
.totop:hover{background:var(--sail);border-color:var(--sail)}
.totop svg{width:16px;height:16px}

.wrap{width:min(1240px,100%);margin-inline:auto;padding-inline:23px}

@media (max-width:719px){
  .ustrip__brochure{display:none}
}
@media (max-width:559px){
  .ustrip__email{display:none}
}
@media (max-width:899px){
  .ustrip__let{display:none}
  .acct__label{display:none}
  .acct__person{width:17px;height:17px}
  .acct__btn{padding:6px}
}
/* Phones and tablets: one solid bar across the top in place of the strip
   and the floating pill, on the same dark glass as the property page's
   price bar (Danny, 28 Oct 2026). The logo on the left, Book now in the
   middle, the menu button on the right. The strip's links (phone, email,
   brochure, search, Let Your Property, logins) move into the menu. It sits
   there from the start, on the home page too, and keeps the menu button on
   the screen at 320px (WCAG reflow). */
@media (max-width:959px){
  html:root{--ustrip-h:0px;--mast-h:64px;--chrome-h:var(--mast-h)}
  .ustrip{display:none}
  .mast{padding:0}
  .mast::before{display:none}
  .mast__inner,.mast.is-set .mast__inner{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
    width:100%;height:var(--mast-h);padding:0 clamp(12px,4vw,22px);
    border:0;border-bottom:1px solid var(--line);border-radius:0;
    background:rgba(6,24,29,.86);box-shadow:none;
    backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  }
  .brand{grid-column:1;grid-row:1;justify-self:start}
  .brand__logo{height:44px;margin-left:0}
  .mast__right{display:contents}
  .mast__right .pill--solid{grid-column:2;grid-row:1;justify-self:center;padding:13px 18px;letter-spacing:.1em}
  .burger{grid-column:3;grid-row:1;justify-self:end;width:44px;height:44px;padding:0 12px}
  /* the menu's close button takes the menu button's place */
  .sheet__close{top:calc((var(--mast-h) - 44px) / 2);right:clamp(12px,4vw,22px);width:44px;height:44px}
  .sheet{padding-top:calc(var(--mast-h) + 14px)}
  /* the main pages large; the strip's links small and quiet underneath */
  .sheet > a{font-size:clamp(34px,9.6vw,44px);padding:8px 0}
  /* no rule under Contact or over the small links, and the small links
     in two columns, so the whole menu fits on one screen (Danny, 29 Oct
     2026); the email address is too long for a column and takes the top row */
  .sheet > a:last-of-type{border-bottom:0}
  .sheet__foot{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:22px;padding-top:0;border-top:0}
  .sheet__foot a{font-size:13px;color:var(--mist);min-height:40px;min-width:0}
  .sheet__foot a[href^="mailto:"]{grid-column:1 / -1;order:-1}
  .sheet{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
}
@media (max-width:959px) and (max-height:700px){
  .sheet__foot{margin-top:12px}
  .sheet .sheet__foot a{min-height:38px}
}
/* the phone menu scrolls when it is taller than the screen: a short phone,
   or any phone on its side, kept losing the last links */
.sheet{overflow-y:auto;overscroll-behavior:contain}
/* nothing may make the page wider than the screen (MOBILE-AUDIT H1) */
html{overflow-x:clip}
.sheet__foot a{display:flex;align-items:center;min-height:44px}
@media (max-height:700px){
  .sheet > a{font-size:clamp(28px,7.6vw,34px);padding-block:5px}
  .sheet__foot{gap:0}
}
@media (min-width:960px){
  .burger{display:none}
  .nav{display:flex;gap:10px}
  .nav > a,.nav__btn{font-size:14px}
  .brand{flex:1 1 0}
  .mast__right{flex:1 1 0;justify-content:flex-end;margin-left:0}
}
@media (min-width:1180px){
  .nav{gap:18px}
  .nav > a,.nav__btn{font-size:16px}
}
@media (min-width:520px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__col--brand,.foot__col--co{grid-column:1 / -1}
}
@media (min-width:760px){
  .foot__grid{grid-template-columns:1.1fr 1fr 1fr}
  .foot__col--brand{grid-column:auto}
}
@media (min-width:1000px){
  .foot__grid{grid-template-columns:1.25fr .9fr 1fr 1.05fr}
  .foot__col--co{grid-column:auto;text-align:right}
}


/* ==========================================================================
   Accessibility (WCAG 2.2, AAA where it applies; Danny, 18 Oct 2026).
   See wordpress-build/ACCESSIBILITY-AUDIT.md.
   ========================================================================== */
/* the lighter blue for decoration on dark backgrounds (hover underlines):
   the brand blue itself is now dark enough for text on white, too dark to
   show on the ink */
:root{--sail-glow:#3B9AD9}

/* The focus ring follows what it sits on: white on the dark pages, header
   and footer, the brand blue inside light sections, cards and menus. */
body{--focus:#fff}
/* (a results card is one big link, so its ring sits outside it, on the page:
   it keeps the page's colour) */
.mega__list,.psec,.cats,.feat,.insta,.trust,.boats,.bcard,.bcard2,.rmap,
.pp__main,.bk,.bk__pop,.scal--light,.gcard,.enq,.enqpop{--focus:var(--sail)}

/* skip link: first thing a keyboard user reaches, hidden until focused */
.skip{
  position:fixed;left:12px;top:-80px;z-index:300;
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;
  background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6);transition:top .2s ease;
}
.skip:focus{top:12px}
main:focus{outline:0}   /* focused by the skip link only */

/* 44px tap targets (2.5.5). Where the look is fine as it is, an invisible
   hit area grows round the link; in the footer lists the links are spaced
   out instead, as neighbouring hit areas may not overlap. */
.ustrip a::before,.acct__btn::before,.nav > a::before,.nav__btn::before{
  content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%);
}
.nav__btn{position:relative}
.acct__menu a{display:flex;align-items:center;min-height:44px;padding-block:0}
.foot__social a{width:44px;height:44px}
.foot__contact{gap:0}
.foot__contact a{min-height:44px}
.foot__list{gap:0}
.foot__list a{display:inline-flex;align-items:center;min-height:44px}
.foot__list--2{gap:0 20px}
.foot__policies{gap:0 22px}
.foot__policies a{display:inline-flex;align-items:center;min-height:44px}

/* ==========================================================================
   Site search (inc/site-search.php; 27 Oct 2026): the magnifier in the top
   strip opens an overlay with one big box, as on the live site.
   ========================================================================== */
.usearch-btn{
  position:relative;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px 0 9px;
  border:0;border-radius:999px;background:none;color:rgba(244,241,233,.75);cursor:pointer;
  font-family:var(--sans);font-size:13.5px;letter-spacing:.005em;white-space:nowrap;
  transition:color .25s ease,background-color .25s ease;
}
.usearch-btn::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.usearch-btn svg{width:15px;height:15px;flex:0 0 auto}
.usearch-btn:hover,.usearch-btn[aria-expanded="true"]{color:var(--paper);background:rgba(244,241,233,.1)}

/* the big search box: in the overlay and on the results page */
.ssearch{
  display:flex;align-items:center;gap:4px;width:min(640px,100%);height:58px;
  padding:6px;border-radius:999px;background:#fff;color:var(--ink);
  box-shadow:0 22px 50px -28px rgba(0,0,0,.8);
}
/* no ring round the box or the text field (Danny, 28 Oct 2026): the white
   box on the dark panel and the cursor in it show where you are typing */
.ssearch__in:focus,.ssearch__in:focus-visible{outline:0}
.ssearch__icon{display:grid;place-items:center;flex:0 0 auto;width:42px;height:100%;color:rgba(6,24,29,.75);cursor:text}
.ssearch__icon svg{width:19px;height:19px}
.ssearch__lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ssearch__in{
  flex:1 1 auto;min-width:0;height:100%;padding:0 8px 0 0;border:0;background:none;
  font-family:var(--sans);font-size:17px;color:var(--ink);
}
.ssearch__in::placeholder{color:rgba(6,24,29,.75);opacity:1}
.ssearch__go{
  flex:0 0 auto;height:100%;padding:0 clamp(18px,2.4vw,28px);border:0;border-radius:999px;cursor:pointer;
  background:var(--sail);color:var(--on-accent);
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:background-color .25s ease;
}
.ssearch__go:hover{background:var(--sail-hi)}

/* the overlay */
html.spop-open{overflow:hidden}
.spop{
  position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;
  padding:calc(var(--ustrip-h) + clamp(32px,11vh,120px)) 16px 24px;
  opacity:0;transition:opacity .2s ease;
}
.spop[hidden]{display:none}
.spop.is-open{opacity:1}
.spop__bg{position:absolute;inset:0;background:rgba(6,24,29,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.spop__panel{
  position:relative;width:min(720px,100%);padding:clamp(26px,4vw,40px);
  border-radius:24px;border:1px solid var(--line);background:var(--ink-2);color:var(--paper);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  transform:translateY(-10px);transition:transform .25s ease;
}
.spop.is-open .spop__panel{transform:none}
.spop__h{margin:0 0 18px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--paper)}
.spop__close{
  position:absolute;top:14px;right:14px;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--line);border-radius:999px;background:none;color:var(--paper);
  font-size:24px;line-height:1;cursor:pointer;transition:background-color .25s ease,color .25s ease;
}
.spop__close:hover{background:var(--paper);color:var(--ink)}
.spop .ssearch{width:100%}
.spop__try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 0;font-family:var(--sans);font-size:14px;color:rgba(244,241,233,.75)}
.spop__try span{margin-right:4px}
.spop__try a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line);color:rgba(244,241,233,.9);transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.spop__try a:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

@media (max-width:559px){
  .ssearch{height:56px}   /* 44px field and button inside the 6px padding (5 Nov 2026; was 52px, 40px targets) */
  .ssearch__icon{width:36px}
  .ssearch__go{padding:0 16px;letter-spacing:.08em}
  .spop{padding-top:calc(var(--ustrip-h) + 20px)}
}
@media (prefers-reduced-motion:reduce){
  .spop,.spop__panel{transition:none}
  /* the phone menu just appears, as it used to */
  .sheet,.sheet.is-open,.sheet > a,.sheet__foot,.sheet__close,.burger span{transition:none!important}
}

/* Phones: nothing smaller than 12px (MOBILE-AUDIT L1) and every control
   at least 44px to tap (M3), 28 Oct 2026 */
@media (max-width:719px){
  .mega__eyebrow,.foot__h{font-size:12px}
  .ckb__btn{min-height:44px}
}

/* Phones: the Explore links in two columns, as the phone menu's small links,
   reading down the first column then the second (Danny, 29 Oct 2026). The
   locations stay in one: "Holiday Cottages Potter Heigham" is too long for
   half the width. */
@media (max-width:519px){
  .foot__list--split{display:block;columns:2;column-gap:20px}
  .foot__list--split li{break-inside:avoid}
}

/* Below 960px the phone menu takes over and the drop-down menus never open,
   so they leave the page: hidden only by visibility, their six photos
   (540 KB) still loaded on every phone (Google tidy-ups, 29 Oct 2026). */
@media (max-width:959px){
  .mega{display:none}
}

/* ==========================================================================
   Accessibility options (inc/a11y.php, assets/js/a11y.js; Kevin, 1 Nov 2026)
   A button in the top strip and the phone menu opens a panel like the search
   overlay. Chosen options are classes on <html>, set before the page draws.
   ========================================================================== */
.ua11y-btn svg{width:17px;height:17px}
@media (max-width:1179px){
  .ua11y-btn__txt{display:none}
  .ua11y-btn{padding:0 7px;min-width:44px;justify-content:center}   /* icon only: still a 44px target */
}

html.apop-open{overflow:hidden}
.apop{
  position:fixed;inset:0;z-index:210;display:flex;align-items:flex-start;justify-content:center;
  padding:calc(var(--ustrip-h) + clamp(24px,8vh,90px)) 16px 24px;overflow-y:auto;
  opacity:0;transition:opacity .2s ease;
}
.apop[hidden]{display:none}
.apop.is-open{opacity:1}
.apop__bg{position:fixed;inset:0;background:rgba(6,24,29,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.apop__panel{
  position:relative;width:min(520px,100%);padding:clamp(24px,4vw,36px);
  border-radius:24px;border:1px solid var(--line);background:var(--ink-2);color:var(--paper);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  font-family:var(--sans);--focus:#fff;
  transform:translateY(-10px);transition:transform .25s ease;
}
.apop.is-open .apop__panel{transform:none}
.apop__h{margin:0 56px 8px 0;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--paper)}
.apop__lead{margin:0 56px 22px 0;font-size:15px;line-height:1.55;color:rgba(244,241,233,.75)}
.apop__close{
  position:absolute;top:14px;right:14px;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--line);border-radius:999px;background:none;color:var(--paper);
  font-size:24px;line-height:1;cursor:pointer;transition:background-color .25s ease,color .25s ease;
}
.apop__close:hover{background:var(--paper);color:var(--ink)}
.apop__row{margin:0 0 18px}
.apop__lbl{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--paper)}
.apop__seg{display:flex;flex-wrap:wrap;gap:6px}
.apop__seg button{
  flex:1 1 0;min-width:max-content;min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(244,241,233,.4);background:none;color:var(--paper);
  font-family:inherit;font-size:15px;transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.apop__seg button:hover{background:rgba(244,241,233,.1)}
/* the chosen one is filled in light: about 15:1 against the panel, so the
   state reads without colour (1.4.11) */
.apop__seg button[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink);font-weight:600}
.apop__switches{display:flex;flex-direction:column;margin:4px 0 18px;border-top:1px solid var(--line)}
.apop__sw{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;padding:0;
  border:0;border-bottom:1px solid var(--line);background:none;color:var(--paper);cursor:pointer;
  font-family:inherit;font-size:15px;text-align:left;
}
.apop__knob{
  position:relative;flex:0 0 auto;width:46px;height:26px;border-radius:999px;
  border:1.5px solid rgba(244,241,233,.75);transition:background-color .2s ease,border-color .2s ease;
}
.apop__knob::after{
  content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:rgba(244,241,233,.75);transition:transform .2s ease,background-color .2s ease;
}
.apop__sw[aria-pressed="true"] .apop__knob{background:var(--paper);border-color:var(--paper)}
.apop__sw[aria-pressed="true"] .apop__knob::after{transform:translateX(20px);background:var(--ink)}
.apop__sw:hover .apop__knob{border-color:var(--paper)}
.apop__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.apop__reset{
  min-height:44px;padding:0 20px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(244,241,233,.4);background:none;color:var(--paper);
  font-family:inherit;font-size:14px;font-weight:600;transition:background-color .2s ease,color .2s ease;
}
.apop__reset:hover{background:var(--paper);color:var(--ink)}
.apop__more{
  display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--paper);
  text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;
}
.apop__more:hover{text-decoration-thickness:2px}
.apop__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* in the phone menu, with the small links */
.sheet__a11y{
  display:flex;align-items:center;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:14px;letter-spacing:.01em;color:inherit;text-align:left;
}
@media (max-width:959px){
  .sheet__a11y{font-size:13px;color:var(--mist);min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .apop,.apop__panel,.apop__knob,.apop__knob::after{transition:none}
}

/* --- the options themselves --- */

/* Text size: the page below the header grows like the browser's own zoom,
   so every size grows together and the layout reflows to fit (the theme sets
   sizes in px, which a root font size would not reach) */
html.a11y-text-1 main,html.a11y-text-1 .foot{zoom:1.15}
html.a11y-text-2 main,html.a11y-text-2 .foot{zoom:1.3}
/* what a zoom alone pushed off the side (browser check, 1 Nov 2026): the
   home page's search box, pinned to the photograph and sized to the screen,
   stays at its standard size (the Availability page's box still grows); the
   one-line buttons may wrap; the four trust badges go two by two when they
   no longer fit across */
html.a11y-text-1 .book{zoom:.8696}
html.a11y-text-2 .book{zoom:.7692}
html:is(.a11y-text-1,.a11y-text-2) :is(.fslide__cta .alllink--view,.gcard__act .btn,.badge__txt b){white-space:normal}
html:is(.a11y-text-1,.a11y-text-2) .gcard{overflow-wrap:anywhere}
@media (min-width:1000px) and (max-width:1149px){html.a11y-text-1 .trust__list{grid-template-columns:1fr 1fr}}
@media (min-width:1000px) and (max-width:1299px){html.a11y-text-2 .trust__list{grid-template-columns:1fr 1fr}}

/* Line spacing: WCAG 1.4.12's spacing, on the reading text */
html.a11y-space :is(main,.foot) :is(p,li,dd,dt,blockquote,figcaption,td,th,label){
  line-height:1.9!important;letter-spacing:.04em!important;word-spacing:.14em!important;
}
html.a11y-space .prose :is(p,ul,ol){margin-bottom:2em!important}

/* Underline all links */
html.a11y-links a{text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:.2em!important}

/* Easy-read font: Atkinson Hyperlegible, made for low-vision readers */
html.a11y-font{
  --sans:"Atkinson Hyperlegible",Verdana,Tahoma,sans-serif;
  --display:"Atkinson Hyperlegible",Verdana,Tahoma,sans-serif;
}
html.a11y-font body,html.a11y-font body :not(svg):not(svg *){font-family:"Atkinson Hyperlegible",Verdana,Tahoma,sans-serif!important}

/* Stop animations: nothing moves, slides or fades, whatever the system says */
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;
  transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important;
}