/* Dipped & Twisted — v10 (Oct 1): Caribbean golden hour.
   The page runs from midday sun (hero) through sunset (the vibe) to dusk (booking). */
:root{
  --sun:#F7CF16;        /* matches the hero video's own yellow: change both together */
  --mango:#FFB23E; --coral:#EF5B3A; --hibiscus:#D93A6A;
  --lagoon:#0A7B83; --ocean:#008AD2; --foam:#BFE9F4;
  --navy:#0A2350; --ink:#0A2350; --ink-soft:#33487A;
  --sand:#FFF6E3; --shell:#FFEBC8;
  --display:'Fraunces','Georgia',serif;
  --body:'Figtree','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(20px,5vw,64px);
  --gap-s:clamp(14px,1.8vw,22px);
  --gap-m:clamp(26px,3.4vw,44px);
  --gap-l:clamp(34px,4.2vw,60px);
  --r:clamp(18px,2.2vw,28px);
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 30px 60px -30px rgba(10,35,80,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--body);
  font-weight:500;font-size:clamp(16px,1.05vw,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:800;
  line-height:1;letter-spacing:-.02em;margin:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{list-style:none;margin:0;padding:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--coral);outline-offset:4px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:var(--pad);position:relative}
section{padding-block:clamp(52px,6vw,88px);position:relative}
h2{font-size:clamp(2.2rem,4.6vw,3.6rem);text-wrap:balance}
h1,h3,.big,.promise>p{text-wrap:balance}

.kicker{font-weight:800;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--coral);margin:0 0 1rem}

.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);
  transform-origin:0 50%;background:var(--coral);z-index:60}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  text-decoration:none;font-family:var(--body);font-weight:800;font-size:1rem;white-space:nowrap;
  padding:.95em 1.7em;border-radius:999px;background:var(--coral);color:#fff;
  box-shadow:0 10px 24px -12px rgba(239,91,58,.9);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s ease,color .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 28px -12px rgba(239,91,58,.9)}
.btn:active{transform:translateY(0)}
.btn.navy{background:var(--navy);color:#fff;box-shadow:0 10px 24px -14px rgba(10,35,80,.9)}
.btn.sun{background:var(--sun);color:var(--navy);box-shadow:none}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.line{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn.line:hover{background:#fff;color:var(--navy)}
.btn.sm{font-size:.88rem;padding:.7em 1.25em}

/* ---------- header ---------- */
header{background:var(--sun);position:sticky;top:0;z-index:40;transition:box-shadow .4s var(--ease)}
header.stuck{box-shadow:0 12px 30px -18px rgba(10,35,80,.55)}
.bar{display:flex;align-items:center;gap:1rem;padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;
  font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:800;font-size:1.2rem;letter-spacing:-.01em}
.brand img{width:46px;height:46px;border-radius:50%}
header nav{margin-left:auto;display:flex;gap:clamp(.9rem,2vw,1.8rem);align-items:center}
nav a.lnk{text-decoration:none;font-weight:700;font-size:.95rem}
nav a.lnk:hover{color:var(--coral)}
@media(max-width:760px){nav a.lnk{display:none}}
@media(max-width:380px){.brand span{font-size:1.02rem}.brand img{width:40px;height:40px}}

/* ---------- hero ---------- */
/* The monkey is the hero. The video is a 4:3 export with the whole logo inside
   the frame; .hero-stage feathers its edges into --sun, so nothing is cropped. */
.hero{background:radial-gradient(90% 46% at 50% 100%,var(--mango) 0,rgba(255,178,62,0) 75%) var(--sun);
  position:relative;overflow:hidden;text-align:center}
.hero-inner{padding:0 var(--pad) clamp(40px,5vw,72px)}
.hero-stage{aspect-ratio:4/3;width:min(100%,860px,calc(47vh * 1.333));margin:0 auto;opacity:0;
  transition:opacity 1s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
  mask-composite:intersect}
.hero-stage.on{opacity:1}
.hero video{display:block;width:100%;height:100%;object-fit:cover}
.hero h1{font-size:clamp(1.55rem,3.5vw,2.7rem);font-weight:800;line-height:1.1;margin:clamp(2px,.6vw,10px) auto 0}
.hero h1 em{display:block;font-style:italic;font-weight:700;color:var(--coral)}
.tagline{font-weight:800;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  margin:1.1rem 0 0}
.hero .sub{max-width:56ch;margin:.7rem auto 0;font-size:1.05rem;font-weight:600;line-height:1.5;color:var(--ink-soft)}
.hero .sub strong{color:var(--navy);font-weight:800}
.hero-cta{display:flex;gap:.9rem 1.6rem;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:clamp(18px,2.2vw,28px)}
.more{font-weight:800;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--navy);padding-bottom:2px}
.more::after{content:" \2193"}
.more:hover{color:var(--coral);border-color:var(--coral)}
.stagger{opacity:0;transform:translateY(16px)}
.stagger.on{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media(max-width:700px){
  .hero-inner{padding-inline:0}
  .hero-copy{padding-inline:var(--pad)}
  .hero-stage{aspect-ratio:1.18/1;width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%)}
}

/* ---------- moving line of her taglines ---------- */
.marquee{background:var(--coral);color:#fff;overflow:hidden;padding:clamp(.7rem,1.4vw,1.1rem) 0}
.mq{display:flex;width:max-content;animation:roll 38s linear infinite}
.mq span{font-family:var(--display);font-variation-settings:"SOFT" 100;font-style:italic;font-weight:700;
  font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1;white-space:nowrap;padding-right:clamp(1.6rem,3vw,3rem);
  display:flex;align-items:center;gap:clamp(1.6rem,3vw,3rem)}
.mq span::after{content:"";width:.42em;height:.42em;border-radius:50%;background:var(--sun)}
@keyframes roll{to{transform:translateX(-50%)}}

/* ---------- not just a vendor ---------- */
.statement{background:var(--navy);color:#fff;padding-block:clamp(48px,5.6vw,84px)}
.statement p{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:600;
  font-size:clamp(1.6rem,3.3vw,2.7rem);line-height:1.16;letter-spacing:-.02em;max-width:22ch;margin:0}
.statement strong{font-weight:800;font-style:italic;color:var(--sun)}
@media(min-width:900px){.statement p{max-width:none;width:88%}}

/* ---------- dip into your happiness ---------- */
.story{background:var(--sand)}
.story-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,4vw,64px);align-items:start}
.story-body .big{margin-top:0}
@media(max-width:900px){.story-head{grid-template-columns:1fr;gap:0}.story-body .big{margin-top:var(--gap-m)}}
.big{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:600;
  font-size:clamp(1.45rem,2.4vw,2.05rem);line-height:1.24;letter-spacing:-.01em;margin:var(--gap-m) 0 0}
.big em{font-style:italic;font-weight:700;color:var(--coral)}
.big em:nth-of-type(2){color:var(--ocean)}
.big em:nth-of-type(3){color:var(--lagoon)}
.mid{font-size:clamp(1.08rem,1.5vw,1.28rem);max-width:60ch;margin-top:var(--gap-s);color:var(--ink-soft)}

.treats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,36px);margin-top:var(--gap-l)}
.treat{margin:0}
.treat img{width:100%;aspect-ratio:6/5;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow);
  transition:transform .6s var(--ease)}
.treat:hover img{transform:translateY(-6px)}
.treat figcaption{padding:1.2rem .2rem 0}
.treat h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}
.treat p{margin:.4rem 0 0;color:var(--ink-soft)}
@media(max-width:820px){.treats{grid-template-columns:1fr;max-width:520px;gap:36px}}

.promise{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(22px,4vw,64px);align-items:center;
  margin-top:var(--gap-l)}
.promise>p{font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:600;
  font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.3;letter-spacing:-.01em;margin:0}
.serve{border-left:3px solid var(--mango);padding-left:clamp(18px,2.4vw,32px)}
.serve .kicker{margin:0 0 .7rem}
.trio li{font-weight:800;font-size:1.1rem;padding:.28rem 0}
@media(max-width:820px){.promise{grid-template-columns:1fr}}

.menu{display:grid;grid-template-columns:1fr 1.1fr 1.25fr;gap:clamp(22px,3.4vw,52px);margin-top:var(--gap-l);
  background:var(--navy);color:#fff;border-radius:var(--r);padding:clamp(24px,3vw,42px);box-shadow:var(--shadow)}
.menu h3{color:var(--sun)}
.menu h3{font-size:clamp(1.35rem,2.1vw,1.7rem);padding-bottom:.8rem;margin-bottom:.4rem;border-bottom:2px solid var(--mango)}
.menu li{display:flex;align-items:center;gap:.75rem;padding:.48rem 0;font-weight:600;line-height:1.35;
  border-bottom:1px solid rgba(255,255,255,.16)}
.menu li:last-child{border-bottom:0}
.menu li i{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
@media(max-width:820px){.menu{grid-template-columns:1fr}}
.packages{margin:clamp(20px,2.4vw,30px) 0 0;text-align:center;font-weight:700;font-size:1.1rem}
.packages a,.textlink{color:var(--coral);font-weight:800;text-decoration:none;border-bottom:2px solid currentColor}
.packages a:hover,.textlink:hover{color:var(--navy)}

/* ---------- the vibe: sunset ---------- */
.vibe{background:linear-gradient(172deg,#FFD15C 0%,var(--mango) 38%,#FF8F4A 78%,#F4744B 100%);
  border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0}
.vibe .kicker{color:var(--navy)}
.vibe-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:900px){.vibe-grid{grid-template-columns:1fr}}
.vibe-photo img{width:100%;object-fit:cover;border-radius:var(--r);box-shadow:0 34px 60px -30px rgba(120,40,0,.6)}
.vibe-photo img{aspect-ratio:4/3}
.vibe .lede{font-size:1.18rem;font-weight:600;margin-top:var(--gap-s)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--gap-m)}
.tags li{background:rgba(255,255,255,.55);color:var(--navy);font-weight:700;font-size:.92rem;
  padding:.5em 1.05em;border-radius:999px;backdrop-filter:blur(6px)}
.carousel{margin-top:var(--gap-l)}
.track{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 max(var(--pad),calc((100vw - 1160px)/2 + var(--pad))) 34px;scroll-padding-inline:max(var(--pad),calc((100vw - 1160px)/2 + var(--pad)))}
.track::-webkit-scrollbar{display:none}
.track figure{margin:0;flex:0 0 clamp(250px,32vw,414px);scroll-snap-align:start}
.track figure.tall{flex-basis:clamp(150px,18vw,232px)}
.track img{width:100%;height:clamp(188px,24vw,310px);object-fit:cover;border-radius:var(--r);
  box-shadow:0 26px 40px -26px rgba(120,40,0,.6)}
.track figure.tall img{object-position:50% 30%}
.car-nav{display:flex;gap:.6rem;justify-content:flex-end;max-width:1160px;margin:0 auto;padding-inline:var(--pad)}
.car-nav button{width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;background:var(--navy);color:#fff;
  font-size:1.25rem;transition:transform .25s var(--ease),background .25s ease}
.car-nav button:hover{background:var(--coral);transform:scale(1.06)}
@media(max-width:700px){.car-nav{display:none}}

/* ---------- who books us ---------- */
.who{background:linear-gradient(160deg,#0D8E97,var(--lagoon) 60%,#07636A);color:#fff}
.who .kicker{color:var(--sun)}
.who h2{color:var(--sun)}
.who .textlink{color:#fff}
.who .textlink:hover{color:var(--sun)}
.who-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.who h2{margin-bottom:var(--gap-m)}
.wholist{columns:2;column-gap:clamp(20px,3vw,44px)}
.wholist li{break-inside:avoid;font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:600;
  font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.25;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.28)}
@media(max-width:820px){.who-grid{grid-template-columns:1fr}}
@media(max-width:520px){.wholist{columns:1}}

/* ---------- book: dusk ---------- */
.book{background:radial-gradient(60% 50% at 88% 0%,rgba(255,178,62,.42) 0,rgba(255,178,62,0) 70%),
  linear-gradient(180deg,#143B7C 0%,var(--navy) 62%);color:#fff;
  border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0}
.book .kicker{color:var(--mango)}
.book h2{color:var(--sun)}
.book .intro{max-width:46ch;margin-top:var(--gap-s);font-size:1.15rem;color:var(--foam)}
.book-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:start;margin-top:var(--gap-l)}
@media(max-width:900px){.book-grid{grid-template-columns:1fr}}
.btn.big{font-size:1.1rem;padding:1em 2.1em;margin-bottom:clamp(18px,2.2vw,28px)}
.person{padding:.8rem 0 .9rem;border-top:1px solid rgba(255,255,255,.22)}
.who-name{font-weight:800;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--foam);margin:0 0 .3rem}
.num{display:inline-block;font-family:var(--display);font-variation-settings:"SOFT" 100;font-weight:800;
  font-size:clamp(2rem,4.2vw,3rem);line-height:1.05;letter-spacing:-.02em;color:#fff;text-decoration:none;
  transition:color .25s ease,transform .4s var(--ease)}
.num:hover{color:var(--sun);transform:translateX(6px)}
.emails{margin-top:1.4rem;color:var(--foam);font-size:.98rem}
.emails a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.emails a:hover{color:var(--sun);border-color:var(--sun)}
.form{background:var(--sand);color:var(--ink);border-radius:var(--r);padding:clamp(22px,3vw,38px);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.6)}
.form h3{font-size:1.6rem;margin:0 0 1.2rem}
.field{margin-bottom:.7rem}
.field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:.3rem;color:var(--ink-soft)}
.field input,.field textarea{width:100%;padding:.8rem 1rem;border-radius:14px;
  border:1.5px solid rgba(10,35,80,.18);font-family:var(--body);font-weight:500;font-size:1rem;
  background:#fff;color:var(--ink);transition:border-color .25s ease,box-shadow .25s ease}
.field input:focus,.field textarea:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(239,91,58,.16);outline:none}
.field textarea{min-height:64px;resize:vertical}
.form .btn{width:100%;margin-top:.4rem}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#fff;padding-block:clamp(30px,4vw,52px) 24px}
.foot{display:grid;grid-template-columns:auto 1fr auto;gap:var(--gap-m);align-items:center;
  padding-top:clamp(26px,3vw,40px);border-top:1px solid rgba(255,255,255,.18)}
@media(max-width:720px){.foot{grid-template-columns:1fr;justify-items:start;gap:1.2rem}}
.foot img{width:84px;height:84px;border-radius:50%}
.foot .tag{font-family:var(--display);font-variation-settings:"SOFT" 100;font-style:italic;font-weight:700;
  font-size:1.5rem;color:var(--sun);margin:0 0 .3rem}
.foot .blurb{opacity:.75;margin:0;max-width:36ch}
.foot-links a{text-decoration:none;font-weight:700;display:block;padding:.2rem 0;opacity:.85}
.foot-links a:hover{opacity:1;color:var(--sun)}
.colophon{margin-top:1.6rem;font-size:.78rem;opacity:.5}

/* ---------- motion ---------- */
header{transition:transform .45s var(--ease),box-shadow .4s var(--ease)}
header.away{transform:translateY(-105%)}
.wipe{overflow:hidden;border-radius:var(--r);clip-path:inset(0 0 100% 0 round var(--r));transition:clip-path 1.2s var(--ease)}
.wipe.on{clip-path:inset(0 0 0 0 round var(--r))}
.wipe img{scale:1.16;will-change:transform}
.treat img{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.treat:hover img{transform:translateY(-8px) rotate(-1deg)}

.treats.rv .treat,.wholist.rv li{opacity:0;transform:translateY(18px)}
.treats.rv.on .treat,.wholist.rv.on li{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.treats.rv.on .treat:nth-child(2),.wholist.rv.on li:nth-child(2){transition-delay:.1s}
.treats.rv.on .treat:nth-child(3),.wholist.rv.on li:nth-child(3){transition-delay:.2s}
.wholist.rv.on li:nth-child(4){transition-delay:.3s}
.wholist.rv.on li:nth-child(n+5){transition-delay:.4s}

/* ---------- reveals + mobile call bar ---------- */
.rv{opacity:0;transform:translateY(22px)}
.rv.on{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:.5rem;padding:.55rem .6rem;
  background:var(--navy)}
.callbar a{flex:1}
@media(max-width:700px){.callbar{display:flex}footer{padding-bottom:96px}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv,.stagger,.hero-stage,.treats.rv .treat,.wholist.rv li{opacity:1;transform:none}
  .wipe{clip-path:none}
  .wipe img{scale:1}
  .progress{display:none}
}

/* both owners, Jules first: per-person text/call buttons + two-button mobile bar */
.person .acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.btn.sm{font-size:.92rem;padding:.6em 1.25em}
.person .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.person .btn.ghost:hover{background:#fff;color:var(--navy)}
.callbar a small{font-weight:600;opacity:.85;margin-right:.25em}

/* ---------- NEW: the Pretzel Bar (mid-page feature) ----------
   Night-market panel between the treats and the sunset. A slow line of big
   italic type rolls across the top, with a hand-drawn pretzel between words. */
.nav-new{font-style:normal;font-weight:800;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--coral);color:#fff;padding:.2em .55em;border-radius:999px;margin-left:.3em;vertical-align:2px}
.pz{background:radial-gradient(55% 70% at 82% 70%,rgba(255,178,62,.30) 0,rgba(255,178,62,0) 70%),
  radial-gradient(40% 50% at 8% 100%,rgba(239,91,58,.22) 0,rgba(239,91,58,0) 70%),
  linear-gradient(180deg,#123677 0%,var(--navy) 70%);color:#fff;overflow:hidden;
  border-radius:clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0;
  padding-top:clamp(26px,3.4vw,44px);padding-bottom:calc(clamp(52px,6vw,88px) + clamp(28px,4vw,56px))}
.pz + .vibe{margin-top:calc(-1 * clamp(28px,4vw,56px))}
.pz-roll{overflow:hidden;padding-block:clamp(10px,1.6vw,20px);border-bottom:1px solid rgba(255,255,255,.14);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pz-track{display:flex;width:max-content;animation:roll 52s linear infinite}
.pz-run{display:flex;align-items:center;flex:0 0 auto}
.pz-track .w{font-family:var(--display);font-variation-settings:"SOFT" 100;font-style:italic;font-weight:800;
  font-size:clamp(2.5rem,7.2vw,6.4rem);line-height:1.08;letter-spacing:-.025em;white-space:nowrap;
  padding:0 clamp(.7rem,1.6vw,1.5rem)}
.pz-track .fill{color:var(--sun)}
.pz-track .line{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.7)}
.pzi{width:clamp(42px,5.6vw,78px);height:auto;flex:0 0 auto;stroke:var(--mango);
  animation:pzwob 4.8s ease-in-out infinite}
.pz-run .pzi:nth-of-type(2n){stroke:var(--coral);animation-delay:-2.4s}
@keyframes pzwob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) translateY(-4px)}}

.pz-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:center;
  margin-top:clamp(36px,4.6vw,64px)}
.pz-kick{display:flex;align-items:center;gap:.75rem;font-weight:800;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mango);margin:0 0 1.1rem}
.pz-new{position:relative;background:var(--coral);color:#fff;padding:.42em .9em;border-radius:999px;letter-spacing:.16em}
.pz-new::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(239,91,58,.7);
  animation:pzping 2.2s var(--ease) infinite}
@keyframes pzping{0%{box-shadow:0 0 0 0 rgba(239,91,58,.6)}80%,100%{box-shadow:0 0 0 14px rgba(239,91,58,0)}}
.pz h2{color:#fff;font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.02}
.pz-pre{display:block;font-size:.5em;font-weight:700;letter-spacing:-.01em;margin-bottom:.12em;white-space:nowrap}
.pz h2 em{display:block;font-style:italic;color:var(--sun);font-size:1.18em;line-height:.98}
.pz-lede{font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--foam);max-width:34ch;margin-top:var(--gap-s)}
.pz-cta{margin-top:var(--gap-m)}
.pz-art{position:relative;justify-self:center;width:min(100%,400px)}
.pz-art::before{content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle,rgba(247,207,22,.55) 0,rgba(255,178,62,.18) 45%,rgba(255,178,62,0) 70%);filter:blur(6px)}
.pz-art img{position:relative;width:100%;height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.35));
  animation:pzfloat 6s ease-in-out infinite}
@keyframes pzfloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@media(max-width:820px){
  .pz-grid{grid-template-columns:1fr;text-align:center;justify-items:center}
  .pz-kick{justify-content:center}
  .pz-lede{margin-inline:auto}
  .pz-art{width:min(70%,280px);order:-1}
}
@media (prefers-reduced-motion:reduce){
  .pz-track{transform:none}
  .pz-run+.pz-run{display:none}
}
.form-err{margin:.9rem 0 0;font-weight:700;color:var(--coral)}
.form-err a{color:var(--navy)}
/* rounded section tops overlap the section above, so no cream shows in the corners */
.who{padding-bottom:calc(clamp(52px,6vw,88px) + clamp(28px,4vw,56px))}
.who + .book{margin-top:calc(-1 * clamp(28px,4vw,56px))}

/* ================= v14 motion (Oct 7): quicker, livelier, still light =================
   Everything here is disabled for visitors who ask their device for reduced motion. */
.rv.on{transition-duration:.7s}

/* headings rise in word by word (script.js wraps each word in .wd) */
h2.split.rv{opacity:1;transform:none}
h2.split .wd{display:inline-block;opacity:0;transform:translateY(.55em) rotate(3deg);transform-origin:0 100%}
h2.split.on .wd{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .65s var(--ease);
  transition-delay:calc(var(--i) * 55ms)}

/* menu items, vibe tags: quick cascade */
.menu.rv li{opacity:0;transform:translateX(-12px)}
.menu.rv.on li{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease);
  transition-delay:calc(var(--i) * 40ms + .15s)}
.menu li i{transition:transform .5s var(--ease)}
.menu li:hover i{transform:scale(1.5)}
.tags.rv li{opacity:0;transform:translateY(10px) scale(.92)}
.tags.rv.on li{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .5s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--i) * 60ms + .1s)}
.tags li{transition:transform .3s var(--ease),background .3s ease}
.tags li:hover{transform:translateY(-3px);background:#fff}

/* buttons: a light shine passes across on hover */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover::after{transform:translateX(120%)}
/* the hero's main button breathes gently so the eye finds it */
.hero-cta .btn{animation:breathe 3.2s ease-in-out 2s infinite}
@keyframes breathe{0%,100%{box-shadow:0 10px 24px -12px rgba(239,91,58,.9)}50%{box-shadow:0 14px 34px -10px rgba(239,91,58,1),0 0 0 6px rgba(239,91,58,.12)}}

/* photos: slight lift on hover */
.track img{transition:transform .5s var(--ease)}
.track figure:hover img{transform:translateY(-6px) scale(1.015)}
.vibe-photo:hover img{scale:1.04;transition:scale .8s var(--ease)}

/* who-books-us rows slide a touch on hover */
.wholist li{transition:padding-left .35s var(--ease),color .35s ease}
.wholist li:hover{padding-left:.5rem;color:var(--sun)}

/* rolling lines: a bit livelier by default (script.js also speeds them up while scrolling) */
.mq{animation-duration:60s}
.pz-track{animation-duration:80s}

@media (prefers-reduced-motion:reduce){
  h2.split .wd,.menu.rv li,.tags.rv li{opacity:1;transform:none}
  .btn::after{display:none}
}

/* ---------- v15 hero (Oct 7): side by side on desktop ----------
   The monkey fills the left side at a large size, the words sit on the right.
   Phones keep the stacked layout. */
@media(min-width:960px){
  .hero{text-align:left}
  .hero-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;
    gap:clamp(0px,1.4vw,28px);max-width:1360px;margin:0 auto;
    padding:clamp(6px,1.2vw,20px) var(--pad) clamp(40px,4.6vw,68px)}
  .hero-stage{width:100%;max-width:none;aspect-ratio:4/3;margin:0 0 0 -2%;
    max-height:calc(100vh - 130px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-composite:intersect}
  .hero video{object-fit:contain}
  .hero h1{font-size:clamp(2rem,2.75vw,2.9rem);margin:0;max-width:none}
  .hero h1 .nb{white-space:nowrap}
  .tagline{margin-top:1.2rem}
  .hero .sub{margin:.8rem 0 0;max-width:40ch}
  .hero-cta{justify-content:flex-start;margin-top:clamp(22px,2.4vw,32px)}
}

/* hero monkey fallback (animated image) + never show iOS's big play button */
.hero-anim{display:block;width:100%;height:100%;object-fit:contain}
.hero video::-webkit-media-controls,.hero video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}

/* Oct 14: booking form removed (client chose contact by phone, text and email only) */
.book-grid.solo{grid-template-columns:1fr;max-width:640px}

/* Oct 14 accessibility: small coral text a shade deeper so it's easy to read on cream (WCAG AA) */
.kicker,.teaser .soon,.packages a,.textlink{color:#C8401F}
.pz-new,.nav-new{background:#C8401F}
.menu .textlink{color:var(--mango)}
.menu .textlink:hover{color:#fff}