@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
/* Section backdrops: a real photo behind each section.
   <div class="bd r|l|full|blur" style="--img:url(...);--pos:center;--o:.3"></div> as first child of a <section>.
   r = photo on the right, fading out towards the text · l = on the left · full = whole section, dimmed · blur = soft-focus */
.bd{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
          mask:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
.bd::before{content:"";position:absolute;inset:-10% 0;background:var(--img) var(--pos,center)/cover no-repeat;
  opacity:var(--o,.5);filter:saturate(.95) brightness(.85);transform:translate3d(0,var(--py,0px),0);will-change:transform}
.bd.r::before{-webkit-mask:linear-gradient(90deg,transparent 12%,#000 58%);mask:linear-gradient(90deg,transparent 12%,#000 58%)}
.bd.l::before{-webkit-mask:linear-gradient(270deg,transparent 12%,#000 58%);mask:linear-gradient(270deg,transparent 12%,#000 58%)}
.bd.full::before{opacity:var(--o,.34)}
.bd.blur::before{filter:blur(6px) saturate(.9) brightness(.7);opacity:var(--o,.55);inset:-12%}
section>.wrap,section>.narrow,section>.vr-rail{position:relative;z-index:1}
@media(max-width:700px){.bd.r::before,.bd.l::before{-webkit-mask:none;mask:none;opacity:calc(var(--o,.5)*.55)}}
/* a plain colour instead of a photo (the website editor's Backgrounds, Richard 2026-10-22): <div class="bd color" style="--bg:#141845"> */
.bd.color{background:var(--bg);-webkit-mask:none;mask:none}
.bd.color::before{content:none}
/* in the top part of a page (its <header>: isolated, the page's own layers at negative z-index) a backdrop sits just
   under the text, over the page's own background or photo */
header>.bd{z-index:-1}

/* TheStart logo used as a stamp inside a heading (replaces the old emoji) */
.stamp-logo{display:inline-block;height:.82em;width:auto;vertical-align:-.06em;margin-left:.12em;rotate:-12deg}
@media(prefers-reduced-motion:reduce){.bd::before{transform:none}.stamp-logo{animation:none}}

/* image icons (replace emoji) */
.ico{display:inline-block;width:1.6em;height:1.6em;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 5px 10px rgba(0,0,0,.55))}
.ico.ph{width:2.5em;height:2.5em;object-fit:cover;border-radius:8px;filter:none;box-shadow:0 6px 16px -6px rgba(0,0,0,.7)}

/* ---------- TheStart buttons ----------
   One look for every call-to-action: TheStart red with heavy condensed white capitals and a pressable bottom edge.
   Secondary buttons: white outline, white with red text on hover.
   The html body … :not() prefix out-ranks the per-page button rules (e.g. ".team-r .btn") without !important. */
html body .btn:not(.btn-ghost),html body .mobile-book{
  --bred:#d7141a;--bdeep:#8e0b10;
  font-family:'Anton','Big Shoulders Display',Impact,'Arial Narrow Bold',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.05em;font-size:17px;line-height:1;text-align:center;
  background:var(--bred);color:#fff;border:0;border-radius:999px;
  padding:15px 28px 14px;gap:10px;
  box-shadow:none;
  transition:transform .15s ease,box-shadow .15s ease,background .2s ease}
html body .btn::before,html body .mobile-book::before{content:none;display:none}
html body .btn:not(.btn-ghost):hover{background:#ff2d34;box-shadow:none}
html body .btn:not(.btn-ghost):active{transform:translateY(1px);box-shadow:none}
html body .btn.btn-ghost{
  font-family:'Anton','Big Shoulders Display',Impact,'Arial Narrow Bold',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.05em;font-size:16px;line-height:1;
  background:transparent;color:#fff;border:2px solid #fff;border-radius:999px;
  padding:13px 26px 12px;gap:10px;box-shadow:none;
  transition:background .2s ease,color .2s ease,transform .15s ease}
html body .btn.btn-ghost:hover{background:#fff;color:#d7141a}
html body .btn:focus-visible,html body .mobile-book:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* smaller in the navigation bar */
html body .nav-right .btn:not(.btn-ghost){font-size:14px;padding:10px 18px 9px}
/* the mobile booking bar keeps its full width */
html body .mobile-book{justify-content:center;align-items:center}
@media(prefers-reduced-motion:reduce){html body .btn{transition:none}}