/* Dink & Dine Events | brand system (DD Branding Guide, Jul 2026) */
/* Roca Bold (Roca One) for headlines, from the font files in the Dink & Dine Drive. One upright weight, mapped to 700-900 so no faux bold. */
@font-face{font-family:"Roca";src:url(/fonts/roca-700.woff2) format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Passion One";src:url(/fonts/passion-one-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Passion One";src:url(/fonts/passion-one-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Passion One";src:url(/fonts/passion-one-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --teal:#07414D; --teal-2:#0a5463; --teal-deep:#042d36;
  --yellow:#FFDE17; --cotton:#FFFCDE; --paprika:#AD2300; --clementine:#E05211; --sage:#394E6C; --amp:#ac2823;
  --white:#fff; --ink:#07414D; --muted:#3c5f66;
  --title:"Roca","Passion One",Impact,"Arial Narrow",sans-serif;
  --accent:"Passion One",Impact,"Arial Narrow",sans-serif;
  --body:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:18px; --r-sm:12px; --shadow:0 18px 50px -20px rgba(4,45,54,.45);
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:var(--body);font-size:clamp(16px,1.05vw + 11px,18px);line-height:1.65;color:var(--ink);background:var(--cotton);overflow-x:hidden}
img,svg,video{max-width:100%;display:block}
picture{display:block;height:100%}
.brand picture{height:auto}
picture img{width:100%;height:100%;object-fit:cover}
a{color:var(--paprika);text-underline-offset:3px}
a:hover{color:var(--teal)}
:focus-visible{outline:3px solid var(--clementine);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--title);font-weight:700;line-height:1.02;margin:0 0 .4em;letter-spacing:.005em}
h2{font-size:clamp(2.2rem,4.5vw + .6rem,4.2rem);text-transform:uppercase}
h3{font-size:clamp(1.5rem,1.6vw + .9rem,2.1rem)}
p{margin:0 0 1em}
ul{padding-left:1.2em}
.wrap{width:min(1240px,100% - 2*var(--gutter));margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--yellow);color:var(--teal);padding:10px 16px;border-radius:8px;font-weight:700}
.skip:focus{top:12px}
.kicker{font-family:var(--accent);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.95rem,.5vw + .8rem,1.15rem);color:var(--paprika);margin:0 0 .6em}
.lede{font-size:clamp(1.05rem,.6vw + .9rem,1.3rem);max-width:60ch;color:var(--muted)}
.em{font-family:var(--accent);font-weight:900;color:var(--paprika)}

/* Buttons */
.btn{--bg:var(--yellow);--fg:var(--teal);display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:.75em 1.5em;border-radius:999px;border:2px solid transparent;background:var(--bg);color:var(--fg);font-family:var(--accent);font-weight:400;font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;line-height:1;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;position:relative;overflow:hidden;isolation:isolate}
.btn svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.btn--ghost svg{fill:currentColor;stroke:none}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);z-index:-1}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(0,0,0,.45);color:var(--fg)}
.btn:hover::after{animation:shine .9s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{--bg:var(--yellow);--fg:var(--teal)}
.btn--ghost{--bg:transparent;--fg:currentColor;border-color:currentColor}
.btn--dark{--bg:var(--teal);--fg:var(--white)}
.btn--small{min-height:44px;font-size:1.05rem;padding:.6em 1.15em}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.2em}
.btn-row--center{justify-content:center}
@keyframes shine{to{transform:translateX(120%)}}

/* Header */
.site-head{position:fixed;inset:0 0 auto;z-index:50;color:var(--white);transition:background .35s,box-shadow .35s,color .35s;padding-top:env(safe-area-inset-top)}
.site-head__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:block;width:clamp(150px,18vw,210px);position:relative}
.brand picture+picture{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.site-head.is-solid,.site-head--solid{background:rgba(255,252,222,.96);backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 6px 24px -14px rgba(4,45,54,.5);color:var(--teal)}
.site-head.is-solid .brand picture:first-child,.site-head--solid .brand picture:first-child{opacity:0}
.site-head.is-solid .brand picture+picture,.site-head--solid .brand picture+picture{opacity:1}
.nav__list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__link{display:block;padding:.6em .85em;color:inherit;text-decoration:none;font-weight:600;font-size:.98rem;border-radius:999px}
.nav__link:hover,.nav__link.is-active{color:inherit;background:rgba(255,222,23,.22)}
.nav__toggle{display:none}
.nav__sub{position:absolute;top:100%;left:0;min-width:240px;list-style:none;margin:0;padding:10px;background:var(--white);border-radius:var(--r-sm);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s var(--ease)}
.nav__item--has:hover .nav__sub,.nav__item--has:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{display:block;padding:.6em .8em;border-radius:8px;color:var(--teal);text-decoration:none;font-weight:500}
.nav__sub a:hover,.nav__sub a[aria-current]{background:var(--cotton)}
.nav__item--cta{margin-left:8px}
.nav__burger{display:none}
.site-head__lp{display:flex;gap:10px;align-items:center}
.btn--ghost-head{color:inherit}
@media (max-width:980px){
  .nav__burger{display:grid;place-items:center;gap:5px;width:48px;height:48px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:inherit;cursor:pointer;padding:12px}
  .site-head.is-solid .nav__burger{background:rgba(7,65,77,.08)}
  .nav__burger i{display:block;width:22px;height:2.5px;background:currentColor;border-radius:2px;transition:.3s var(--ease)}
  .nav__burger[aria-expanded=true] i:nth-child(2){transform:translateY(7.5px) rotate(45deg)}
  .nav__burger[aria-expanded=true] i:nth-child(3){opacity:0}
  .nav__burger[aria-expanded=true] i:nth-child(4){transform:translateY(-7.5px) rotate(-45deg)}
  .nav__list{position:fixed;inset:76px 0 auto;height:calc(100dvh - 76px);flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gutter) 120px;background:var(--teal);color:var(--white);overflow:auto;transform:translateX(100%);visibility:hidden;transition:transform .4s var(--ease),visibility .4s}
  .nav__list.is-open{transform:none;visibility:visible}
  .nav__item{border-bottom:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;align-items:center}
  .nav__link{flex:1;font-family:var(--accent);font-weight:400;font-size:1.9rem;text-transform:uppercase;padding:.45em 0;background:none!important}
  .nav__toggle{display:grid;place-items:center;width:48px;height:48px;border:0;background:none;color:inherit;cursor:pointer}
  .nav__toggle svg{width:26px;fill:none;stroke:currentColor;stroke-width:2.5;transition:transform .3s}
  .nav__toggle[aria-expanded=true] svg{transform:rotate(180deg)}
  .nav__sub{position:static;flex-basis:100%;opacity:1;visibility:visible;transform:none;background:none;box-shadow:none;padding:0 0 12px;display:none}
  .nav__sub.is-open{display:block}
  .nav__sub a{color:var(--white);font-size:1.1rem}
  .nav__sub a:hover,.nav__sub a[aria-current]{background:rgba(255,255,255,.1)}
  .nav__item--cta{border:0;margin:20px 0 0}
  .nav__item--cta .btn{width:100%;min-height:56px;font-size:1.3rem}
  .site-head__lp .btn--ghost-head span{display:none}
}

/* Hero */
.hero{position:relative;min-height:min(100svh,920px);display:grid;align-items:end;color:var(--white);overflow:hidden;background:var(--teal-deep);isolation:isolate}
.hero__media,.hero__shade{position:absolute;inset:0;z-index:-2}
.hero__img img{transform:scale(1.08);animation:heroZoom 14s var(--ease) forwards}
.hero__shade{z-index:1;background:linear-gradient(180deg,rgba(4,45,54,.6) 0%,rgba(4,45,54,.35) 30%,rgba(4,45,54,.8) 70%,rgba(4,45,54,.96) 100%),linear-gradient(90deg,rgba(4,45,54,.9) 0%,rgba(4,45,54,.72) 42%,rgba(4,45,54,0) 78%)}
.hero__inner{padding:140px 0 clamp(90px,10vw,130px);max-width:min(1240px,100% - 2*var(--gutter))}
.hero__title{font-weight:900;font-size:clamp(3rem,7.6vw + .5rem,7.4rem);text-transform:uppercase;max-width:14ch;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.hero__title .em{color:var(--yellow)}
.hero__sub{font-size:clamp(1.1rem,.8vw + .9rem,1.45rem);max-width:48ch;margin-top:.6em;color:#f4f1d8}
.hero .kicker{color:var(--yellow)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.6em}
.hero__ctas .btn--ghost{color:var(--white);background:rgba(4,45,54,.55);backdrop-filter:blur(6px)}
.hero .pairs,.hero__sub{text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hero__amp{position:absolute;right:-4vw;top:14%;width:clamp(240px,40vw,640px);z-index:-1;opacity:.88;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}
.hero--short{min-height:min(78svh,760px)}
@media (max-width:699px){.hero__amp{top:72px;right:-6vw;width:50vw;opacity:.8}.hero__shade{background:linear-gradient(180deg,rgba(4,45,54,.3) 0%,rgba(4,45,54,.55) 30%,rgba(4,45,54,.8) 58%,rgba(4,45,54,.93) 100%)}}
@keyframes heroZoom{to{transform:scale(1)}}

/* The ampersand: our hero character */
.amp path{fill:var(--amp);stroke:var(--amp);stroke-width:.6}
.amp--draw path{stroke:var(--yellow);fill:transparent;stroke-dasharray:1;stroke-dashoffset:1}
.is-ready .amp--draw.is-in path{animation:ampDraw 2.2s var(--ease) forwards,ampFill .9s 1.5s var(--ease) forwards}
.hero__amp.is-in{animation:ampFloat 7s 2.6s ease-in-out infinite}
@keyframes ampDraw{to{stroke-dashoffset:0}}
@keyframes ampFill{to{fill:var(--amp);stroke:var(--amp)}}
@keyframes ampFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-3deg)}}

/* Pair rotator  "Play & Watch" */
.pairs{display:flex;align-items:center;align-content:flex-start;flex-wrap:wrap;gap:.18em;margin:.2em 0 .1em;font-family:var(--accent);font-weight:900;text-transform:uppercase;font-size:clamp(1.9rem,3.6vw + .5rem,3.6rem);line-height:1;color:var(--yellow);min-height:1.2em}
.pairs__l,.pairs__r{display:inline-block;transition:transform .55s var(--ease),opacity .45s}
.pairs__amp{width:1.05em;height:1.05em;transition:transform .6s var(--ease)}
.pairs__amp path{fill:var(--cotton);stroke:var(--cotton)}
.pairs.is-out .pairs__l{transform:translateX(-40px);opacity:0}
.pairs.is-out .pairs__r{transform:translateX(40px);opacity:0}
.pairs.is-out .pairs__amp{transform:rotate(-200deg) scale(.7)}
.pairs--dark{color:var(--teal)}
.pairs--dark .pairs__amp path{fill:var(--amp);stroke:var(--amp)}

/* Sections */
.sec{padding:clamp(70px,9vw,140px) 0;position:relative}
.sec--white{background:var(--white)}
.sec--teal{background:var(--teal);color:var(--white)}
.sec--teal .lede{color:#d8e8ea}
.sec--teal .kicker{color:var(--yellow)}
.sec--teal .em,.band .em,.lp-hero .em{color:var(--yellow)}
.sec--teal a:not(.btn){color:var(--yellow)}
.sec--tight{padding:clamp(40px,6vw,80px) 0}
.sec__head{max-width:860px;margin-bottom:clamp(30px,5vw,60px)}
.sec__head--center{text-align:center;margin-inline:auto}
.sec__head--center .lede{margin-inline:auto}

/* Split feature */
.split{display:grid;gap:clamp(28px,5vw,80px);align-items:center;grid-template-columns:1fr}
.split+.split{margin-top:clamp(60px,8vw,120px)}
.split__media{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow)}
.split__copy h3{font-size:clamp(2rem,2.8vw + .8rem,3.2rem);text-transform:uppercase}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}.split--flip .split__media{order:2}.split__media{aspect-ratio:5/6}}
.badge{position:absolute;left:18px;bottom:18px;background:var(--yellow);color:var(--teal);font-family:var(--accent);font-weight:400;text-transform:uppercase;font-size:1.1rem;padding:.45em .9em;border-radius:999px;box-shadow:var(--shadow)}

/* Cards */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.card{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--teal);box-shadow:0 10px 30px -18px rgba(4,45,54,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);color:var(--teal)}
.card__media{aspect-ratio:4/3;overflow:hidden}
.card__media img{transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.card__body h3{text-transform:uppercase}
.card__body p{color:var(--muted);flex:1}
.card__go{font-family:var(--accent);font-weight:400;text-transform:uppercase;color:var(--paprika);letter-spacing:.05em;font-size:1.15rem}

/* Packages */
.pkgs{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.pkg{background:var(--white);color:var(--teal);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;border-top:8px solid var(--yellow);box-shadow:0 10px 30px -18px rgba(4,45,54,.4)}
.pkg:nth-child(3n+2){border-top-color:var(--clementine)}
.pkg:nth-child(3n+3){border-top-color:var(--paprika)}
.pkg h3{text-transform:uppercase}
.pkg__tag{font-family:var(--accent);font-weight:400;text-transform:uppercase;letter-spacing:.12em;color:var(--paprika);margin:0 0 .3em;font-size:1rem}
.pkg .ticks{flex:1}
.pkg .btn{align-self:flex-start;margin-top:10px}
.pkg__note{font-size:.9rem;color:var(--muted)}
.ticks{list-style:none;padding:0;margin:0 0 1em}
.ticks li{position:relative;padding-left:1.8em;margin:.45em 0}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:1.05em;height:1.05em;border-radius:50%;background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2307414D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}

/* Stats */
.stats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (min-width:800px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:22px 18px;text-align:center}
.sec:not(.sec--teal) .stat{background:var(--white);border-color:rgba(7,65,77,.1)}
.stat__num{display:block;font-family:var(--accent);font-weight:900;font-size:clamp(3rem,5vw,4.6rem);line-height:1;color:var(--yellow)}
.sec:not(.sec--teal) .stat__num{color:var(--paprika)}
.stat__label{display:block;margin-top:.4em;font-weight:600}

/* Ticker */
.ticker{overflow:hidden;background:var(--yellow);color:var(--teal);padding:14px 0;border-block:3px solid var(--teal)}
.ticker__track{display:flex;align-items:center;gap:.5em;width:max-content;animation:tick 38s linear infinite;font-family:var(--accent);font-weight:900;text-transform:uppercase;font-size:clamp(1.5rem,2.4vw,2.2rem);white-space:nowrap}
.ticker__amp{width:1.1em;height:1.1em}
.ticker i{font-style:normal;margin:0 .6em;color:var(--clementine)}
@keyframes tick{to{transform:translateX(-50%)}}

/* Mosaic */
.mosaic{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,22vw,280px)}
.mosaic__item{border-radius:var(--r-sm);overflow:hidden}
.mosaic__item--1{grid-row:span 2}
.mosaic__item--4,.mosaic__item--5{grid-column:span 2}
@media (min-width:900px){.mosaic{grid-template-columns:repeat(4,1fr)}.mosaic__item--1{grid-column:span 2;grid-row:span 2}.mosaic__item--4,.mosaic__item--5{grid-column:span 1}}

/* Video */
.video{margin:0}
.video__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.video--vertical .video__frame{aspect-ratio:9/16;max-width:420px;margin-inline:auto}
.video__play{all:unset;position:absolute;inset:0;cursor:pointer;display:block}
.video__play img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .4s}
.video__play:hover img{transform:scale(1.04);filter:brightness(.85)}
.video__play:focus-visible{outline:4px solid var(--yellow);outline-offset:-4px}
.video__btn{position:absolute;left:50%;top:50%;width:clamp(68px,8vw,96px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--yellow);display:grid;place-items:center;box-shadow:0 0 0 0 rgba(255,222,23,.7);animation:pulse 2.4s infinite}
.video__btn svg{width:42%;fill:var(--teal);margin-left:6%}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{margin-top:.8em;font-size:.95rem;color:var(--muted)}
.sec--teal .video figcaption{color:#cfe1e3}
@keyframes pulse{70%{box-shadow:0 0 0 22px rgba(255,222,23,0)}100%{box-shadow:0 0 0 0 rgba(255,222,23,0)}}
.video-feature{display:grid;gap:clamp(24px,4vw,60px);align-items:center}
@media (min-width:900px){.video-feature{grid-template-columns:1.25fr 1fr}.video-feature--vertical{grid-template-columns:.8fr 1.2fr}}
.video-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start}

/* FAQ */
.faq{max-width:900px}
.faq__item{border-bottom:2px solid rgba(7,65,77,.14)}
.faq__item summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;cursor:pointer;padding:20px 0}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{margin:0;font-family:var(--body);font-weight:600;font-size:clamp(1.05rem,.6vw + .9rem,1.25rem);line-height:1.4;text-transform:none}
.faq__icon{flex:0 0 34px;height:34px;border-radius:50%;background:var(--yellow);position:relative;transition:transform .3s var(--ease)}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:3px;background:var(--teal);border-radius:2px;transform:translate(-50%,-50%)}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.faq__item[open] .faq__icon::after{transform:translate(-50%,-50%) rotate(0)}
.faq__a{padding:0 0 22px;max-width:70ch}

/* Menu */
.menu{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.menu__group{background:var(--white);border-radius:var(--r);padding:26px}
.menu__group h3{text-transform:uppercase;color:var(--paprika);border-bottom:3px dotted var(--yellow);padding-bottom:.3em}
.menu__group ul{list-style:none;padding:0;margin:0}
.menu__group li{padding:.5em 0;border-bottom:1px solid rgba(7,65,77,.08)}
.menu__group li strong{display:block}
.menu__group li span{display:block;font-size:.93rem;color:var(--muted)}
.menu__note{font-size:.92rem;color:var(--muted)}

/* Quotes */
.quotes{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.quote{margin:0;background:var(--white);color:var(--teal);border-radius:var(--r);padding:28px;position:relative}
.quote blockquote{margin:0;font-size:1.08rem}
.quote figcaption{font-weight:600;color:var(--paprika);margin-top:.6em}

/* CTA band */
.band{position:relative;color:var(--white);background:var(--teal);padding:clamp(80px,10vw,150px) 0;overflow:hidden;isolation:isolate;text-align:center}
.band__media{position:absolute;inset:0;z-index:-2}
.band__media::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(4,45,54,.72),rgba(4,45,54,.94))}
.band__inner{max-width:880px}
.band h2{font-size:clamp(2.4rem,5vw + .5rem,4.8rem)}
.band p{font-size:1.15rem;color:#e6efe9;max-width:56ch;margin-inline:auto}
.band .btn--ghost{color:var(--white)}
.band__mark{width:clamp(84px,9vw,120px);margin:0 auto 18px;animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}

/* Ball & fork */
.ballfork .ballfork__mark{transform-origin:55% 35%}
.ballfork.is-in .ballfork__mark{animation:serve 1.4s var(--ease)}
@keyframes serve{0%{transform:rotate(-30deg) scale(.6);opacity:0}60%{transform:rotate(8deg) scale(1.05);opacity:1}100%{transform:none}}
.mark-row{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap}
.mark-big{width:clamp(140px,18vw,240px)}

/* Lead form */
.leadform{background:var(--white);color:var(--teal);border-radius:var(--r);padding:clamp(22px,4vw,44px);box-shadow:var(--shadow);border-top:8px solid var(--yellow)}
.leadform__title{font-size:clamp(1.8rem,2.6vw + .6rem,2.8rem);text-transform:uppercase}
.leadform__note{color:var(--muted)}
.leadform__privacy{font-size:.88rem;color:var(--muted);margin:1em 0 0}
.leadform__frame{min-height:420px}
#tripleseat_embed_form input,#tripleseat_embed_form select,#tripleseat_embed_form textarea{width:100%;font:inherit;font-size:16px;padding:.7em .8em;border:2px solid #b9cbcf;border-radius:10px;background:#fff;color:var(--teal);margin:.25em 0 .8em}
#tripleseat_embed_form input:focus,#tripleseat_embed_form select:focus,#tripleseat_embed_form textarea:focus{border-color:var(--teal);outline:3px solid rgba(224,82,17,.45);outline-offset:1px}
#tripleseat_embed_form input[type=checkbox],#tripleseat_embed_form input[type=radio]{width:auto;margin-right:.5em}
#tripleseat_embed_form label{font-weight:600;font-size:.95rem}
#tripleseat_embed_form input[type=submit],#tripleseat_embed_form button{width:100%;min-height:56px;background:var(--yellow);color:var(--teal);border:0;border-radius:999px;font-family:var(--accent);font-weight:400;font-size:1.35rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;margin-top:.6em}
#tripleseat_embed_form input[type=submit]:hover,#tripleseat_embed_form button:hover{background:#ffe84f}

/* Landing page layout */
.lp-hero{position:relative;color:var(--white);background:var(--teal-deep);padding:110px 0 60px;overflow:hidden;isolation:isolate}
.lp-hero__media{position:absolute;inset:0;z-index:-1}
.lp-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,45,54,.95) 0%,rgba(4,45,54,.8) 55%,rgba(4,45,54,.55))}
.lp-grid{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media (min-width:980px){.lp-grid{grid-template-columns:1.05fr 1fr}.lp-grid .leadform{position:sticky;top:96px}}
.lp-hero h1{font-size:clamp(2.6rem,5.5vw + .4rem,5.4rem);text-transform:uppercase}
.lp-hero .kicker{color:var(--yellow)}
.lp-hero .ticks li::before{background-color:var(--yellow)}
.lp-hero__sub{font-size:1.2rem;color:#e6efe9}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:1.2em 0;padding:0;list-style:none;font-weight:600}
.trust li{display:flex;align-items:center;gap:.45em}
.trust li::before{content:"\2605";color:var(--yellow)}

/* Breadcrumbs */
.crumbs{padding:18px 0 0;font-size:.9rem}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4em}
.crumbs li+li::before{content:"/";margin-right:.4em;color:var(--muted)}
.crumbs a{color:var(--teal)}

/* Footer */
.site-foot{background:var(--teal-deep);color:#dbe8ea;padding:clamp(60px,7vw,100px) 0 120px}
.site-foot a{color:#fff}
.site-foot a:hover{color:var(--yellow)}
.site-foot__grid{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.site-foot__mark{width:90px;margin-bottom:14px}
.site-foot__tag{font-family:var(--accent);font-weight:900;font-size:2rem;text-transform:uppercase;color:var(--yellow);margin:0 0 .4em;line-height:1}
.site-foot__h{font-family:var(--accent);font-weight:400;font-size:1.35rem;text-transform:uppercase;letter-spacing:.06em;color:var(--white)}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:.4em 0}
.site-foot address{font-style:normal;margin-bottom:1em}
.social{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px!important}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1)}
.social svg{width:20px;fill:currentColor}
.site-foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:50px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:.9rem}
.site-foot__legal a{margin-right:16px}
.site-foot--lp{padding:40px 0 110px;font-size:.92rem}

/* Sticky mobile CTA */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(4,45,54,.96);backdrop-filter:blur(8px);color:var(--white);transform:translateY(110%);transition:transform .4s var(--ease)}
.mobile-cta.is-on{transform:none}
.mobile-cta .btn{flex:1;min-height:50px}
.mobile-cta .btn--ghost{flex:0 0 auto;color:var(--white)}
@media (min-width:981px){.mobile-cta{display:none}}

/* Reveal on scroll */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal=zoom]{transform:scale(.94)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* Misc */
.pill-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:1em 0}
.pill-list li{background:var(--white);border:2px solid rgba(7,65,77,.12);border-radius:999px;padding:.4em 1em;font-weight:600;font-size:.95rem}
.sec--teal .pill-list li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.two-col{display:grid;gap:clamp(24px,4vw,60px)}
@media (min-width:900px){.two-col{grid-template-columns:1fr 1fr}}
.note{font-size:.92rem;color:var(--muted)}
.center{text-align:center}
.prose{max-width:72ch}
.prose h2{font-size:clamp(1.8rem,3vw,2.6rem)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .amp--draw path{stroke-dashoffset:0;fill:var(--amp);stroke:var(--amp)}
  .ticker__track{animation:none}
  .hero__img img{transform:none}
}
@media print{.site-head,.mobile-cta,.ticker,.video{display:none}}

/* Numbered steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));counter-reset:s}
.step{position:relative;background:var(--white);border-radius:22px;padding:28px 24px 24px;box-shadow:0 10px 30px rgba(7,65,77,.08)}
.sec--white .step{background:var(--cotton)}
.step__n{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--yellow);color:var(--teal);font-family:var(--accent);font-weight:400;font-size:1.6rem;margin-bottom:12px}
.step h3{font-size:1.35rem;margin:.1em 0 .35em}
.step p{margin:0}
.sec--teal .step{background:rgba(255,255,255,.07);box-shadow:none}

/* Pages without a photo hero (solid header) */
.page-top{padding-top:clamp(112px,13vw,150px)}
.page-top h1{font-size:clamp(2.4rem,4.6vw + .6rem,4.6rem);text-transform:uppercase;margin:.1em 0 .3em}
.plan-grid{display:grid;gap:clamp(28px,4vw,60px);align-items:start}
@media (min-width:980px){.plan-grid{grid-template-columns:1.1fr .9fr}.plan-grid aside{position:sticky;top:96px}}
.contact-list{list-style:none;padding:0;margin:1em 0;display:grid;gap:10px}
.contact-list a{font-weight:600}
.big-404{font-family:var(--accent);font-weight:900;font-size:clamp(6rem,20vw,12rem);line-height:.9;color:var(--amp);margin:0}
.big-404 .amp{display:inline-block;height:.78em;width:auto;vertical-align:-.02em;margin:0 .04em}
.big-404 .amp path{fill:var(--amp);stroke:var(--amp)}

/* ---------- Tripleseat Direct Book (self-booking) ---------- */
.btn--book svg{stroke-width:2.2}
.pkg__alt{margin:.7em 0 0;font-size:.92rem;display:flex;flex-wrap:wrap;gap:.35em .8em;align-items:center}
.pkg__alt a{color:var(--teal);font-weight:600;text-underline-offset:3px}
.pkg__live{display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--sage)}
.pkg__live::before{content:"";width:.55em;height:.55em;border-radius:50%;background:#1f8a4c;box-shadow:0 0 0 3px rgba(31,138,76,.18)}
.bookstrip{background:var(--teal);color:var(--white);border-radius:var(--r);padding:clamp(24px,4vw,40px);margin:0 0 8px}
.bookstrip .kicker{color:var(--yellow)}
.bookstrip h2{color:var(--white);margin:0 0 .25em}
.bookstrip__head p{margin:0;color:#e6efe9}
.bookstrip__list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.bookstrip__list a{display:flex;flex-direction:column;gap:.2em;height:100%;background:var(--white);color:var(--teal);border-radius:14px;padding:16px 18px;text-decoration:none;border-top:6px solid var(--yellow);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.bookstrip__list li:nth-child(2) a{border-top-color:var(--clementine)}
.bookstrip__list li:nth-child(3) a{border-top-color:var(--paprika)}
.bookstrip__list li:nth-child(4) a{border-top-color:var(--sage)}
.bookstrip__list a:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.bookstrip__list a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.bookstrip__list strong{font-family:var(--accent);font-weight:400;text-transform:uppercase;font-size:1.2rem;line-height:1.05}
.bookstrip__list span{font-size:.9rem;color:var(--muted)}
.bookstrip__list em{font-style:normal;font-weight:600;margin-top:auto;padding-top:.5em}
.bookstrip__note{margin:16px 0 0;font-size:.92rem;color:#e6efe9}
.bookstrip__note a{color:var(--yellow);font-weight:600}
@media (prefers-reduced-motion:reduce){.bookstrip__list a{transition:none}.bookstrip__list a:hover{transform:none}}
.plan-book{background:var(--white);border-left:6px solid var(--yellow);border-radius:10px;padding:12px 16px;font-size:.95rem}
.plan-book a{color:var(--teal);font-weight:600}
.bookstrip h2 .em{color:var(--yellow)}
#book-online{scroll-margin-top:90px}

/* Passion One Black is reserved for: each page headline (h1), the rotating & pairings, and the closing band headline. Everything else uses Bold. */
h1,h1 .em,.band h2,.band h2 .em{font-weight:900}

/* ---------- Readability over photos (WCAG AA) ----------
   Scrim math: white text needs the teal overlay at 65%+ over a pure-white photo pixel for 4.5:1,
   yellow large text needs 60%+ for 3:1. Every text zone below sits on 80%+ teal, plus a shadow. */
.hero__shade{background:
  linear-gradient(180deg,rgba(4,45,54,.55) 0%,rgba(4,45,54,.4) 28%,rgba(4,45,54,.82) 58%,rgba(4,45,54,.96) 100%),
  linear-gradient(90deg,rgba(4,45,54,.92) 0%,rgba(4,45,54,.8) 45%,rgba(4,45,54,.15) 80%)}
.hero__inner{position:relative}
.hero__inner::before{content:"";position:absolute;z-index:-1;left:calc(-1*var(--gutter));right:-6%;top:22%;bottom:-8%;
  background:radial-gradient(ellipse 70% 60% at 30% 60%,rgba(4,45,54,.7),rgba(4,45,54,0) 75%);pointer-events:none}
.hero .kicker,.lp-hero .kicker{text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.5)}
.hero__title,.lp-hero h1,.band h2{text-shadow:0 2px 4px rgba(0,0,0,.45),0 6px 30px rgba(0,0,0,.45)}
.hero .pairs,.hero__sub,.lp-hero__sub,.lp-hero .ticks,.band p{text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 16px rgba(0,0,0,.45)}
.hero__sub{color:#fff}
.pairs__amp{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.hero__amp{opacity:.7}
@media (max-width:699px){
  .hero__shade{background:linear-gradient(180deg,rgba(4,45,54,.35) 0%,rgba(4,45,54,.6) 26%,rgba(4,45,54,.86) 46%,rgba(4,45,54,.95) 100%)}
  .hero__amp{opacity:.5;top:64px}
  .hero__inner::before{left:-16px;right:-16px;top:12%;bottom:-6%;background:rgba(4,45,54,.35)}
  .lp-hero__media::after{background:linear-gradient(180deg,rgba(4,45,54,.82),rgba(4,45,54,.94))}
}
.lp-hero__media::after{background:linear-gradient(90deg,rgba(4,45,54,.95) 0%,rgba(4,45,54,.86) 55%,rgba(4,45,54,.7))}
.band__media::after{background:radial-gradient(ellipse at center,rgba(4,45,54,.8),rgba(4,45,54,.95))}
.hero__ctas .btn--ghost{background:rgba(4,45,54,.75);border-color:rgba(255,255,255,.85)}

/* ---------- Social: follow buttons, reels, live feeds ---------- */
.follows{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:28px 0 0}
.follows--center{justify-content:center}
.follow{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 16px 8px 10px;border-radius:999px;background:#fff;border:1.5px solid rgba(7,65,77,.18);color:var(--teal);text-decoration:none;line-height:1.15;transition:border-color .2s,transform .2s}
.follow:hover{border-color:var(--teal);transform:translateY(-1px)}
.follow:focus-visible{outline:3px solid var(--clementine);outline-offset:3px}
.follow .sicon{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--teal);fill:#fff;flex:none}
.follow__txt{display:flex;flex-direction:column}
.follow__name{font-weight:700;font-size:.95rem}
.follow__handle{font-size:.8rem;color:var(--muted)}
.follow--solid{background:var(--teal);color:#fff;border-color:var(--teal)}
.follow--solid .sicon{background:var(--yellow);fill:var(--teal)}
.follow--solid .follow__handle{color:#d8e6e3}
.sec--teal .follow,.band .follow,.site-foot .follow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.sec--teal .follow .sicon,.site-foot .follow .sicon{background:var(--yellow);fill:var(--teal)}
.sec--teal .follow__handle,.site-foot .follow__handle{color:#d8e6e3}
.reels{margin-top:8px}
.reels__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;list-style:none;margin:0;scrollbar-width:thin}
.reels__item{scroll-snap-align:start;min-width:0}
.reels .video{margin:0}
.reels .video--vertical .video__frame{max-width:none;border-radius:18px}
@media (max-width:699px){.reels__track{grid-auto-columns:68%;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}}
.feed{margin-top:8px;border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(7,65,77,.12);min-height:320px}
.feed--youtube{aspect-ratio:16/9;min-height:0;background:#021f25}
.feed--youtube iframe{width:100%;height:100%;border:0;display:block}
.feed--facebook{max-width:500px;margin-inline:auto}
.feed--facebook iframe{display:block;width:100%;border:0}
.feed--tiktok{background:transparent;border:0;display:flex;justify-content:center}
.feed--tiktok .tiktok-embed{margin:0!important;width:100%}
.feed__ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:40px 20px;min-height:320px;height:100%;color:var(--muted)}
.feed--youtube .feed__ph{color:#d8e6e3}
.feed__ph .sicon{width:44px;height:44px;fill:currentColor;opacity:.75}
.feed__ph p{margin:0}
.feed.is-loaded .feed__ph{display:none}
.feed__foot{display:flex;justify-content:center;margin:18px 0 0}
.feedcard{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:36px 22px;border-radius:18px;background:#fff;border:1px solid rgba(7,65,77,.12);max-width:640px;margin:8px auto 0}
.feedcard>.sicon{width:48px;height:48px;fill:var(--teal)}
.feedcard__txt{margin:0;max-width:42ch}
.sec--teal .feedcard,.sec--teal .feed:not(.feed--tiktok){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.sec--teal .feedcard>.sicon{fill:var(--yellow)}
/* Footer follow band (every page) */
.site-foot__follow{border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:28px;margin-bottom:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.site-foot__follow h2{margin:0;font-family:var(--accent);font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2rem);color:#fff}
.site-foot__follow h2 .em{color:var(--yellow)}
.site-foot__follow .follows{margin:0}
.site-foot--lp .site-foot__follow{justify-content:center;text-align:center}
/* Mobile menu social icons */
.nav__social{display:none}
@media (max-width:1023px){.nav__social{display:flex;gap:10px;list-style:none;padding:18px 0 0;margin:0}.nav__social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(7,65,77,.08)}.nav__social svg{width:20px;fill:var(--teal)}}

/* ---------- Headings: one or two clean lines, no dangling words ---------- */
h1,h2,h3,.hero__title,.pairs,.kicker,.lede{text-wrap:balance}
p,li,dd,figcaption,.faq__a{text-wrap:pretty}
.sec__head h2{max-width:22ch;margin-inline:auto}
.sec__head .lede{max-width:60ch;margin-inline:auto}
.split__copy h2,.split__copy h3{max-width:18ch}
.video-feature h2{max-width:20ch}
.h2--long{font-size:clamp(1.9rem,2.6vw + .7rem,3.3rem)}
@media (max-width:480px){h2{font-size:clamp(2rem,8.2vw,2.6rem)}.split__copy h3{font-size:clamp(1.8rem,7.6vw,2.4rem)}}

/* ---------- Brand motion (CSS/SVG only; all of it stops under reduced motion) ---------- */
/* Faint ampersand drifting behind teal sections */
.sec--teal{position:relative;overflow:hidden;isolation:isolate}
.sec--teal>.wrap{position:relative;z-index:1}
.sec__amp{position:absolute;z-index:0;right:-4%;top:6%;width:clamp(220px,30vw,500px);height:auto;pointer-events:none;opacity:.07;animation:ampFloat 16s ease-in-out infinite}
.sec__amp path{fill:var(--yellow);stroke:none}
/* Rally divider: a ball served across an arc to the ampersand */
.rally{position:relative;max-width:620px;margin:clamp(28px,5vw,56px) auto clamp(-6px,-1vw,0px);padding-inline:var(--gutter)}
.rally svg:not(.rally__amp){display:block;width:100%;height:auto;overflow:visible}
.rally__arc{fill:none;stroke:var(--clementine);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.rally__ball{fill:var(--yellow);stroke:var(--teal);stroke-width:2.5;offset-path:path("M20 78 Q300 -40 580 78");offset-rotate:0deg;offset-distance:0%;opacity:0}
.rally__hole{fill:var(--teal);stroke:none}
.rally__amp{position:absolute;right:calc(var(--gutter) - 6px);bottom:-6px;width:34px;height:auto;opacity:0;transform:scale(.4)}
.rally__amp path{fill:var(--amp);stroke:none}
.rally.is-in .rally__arc{animation:ampDraw 1.3s var(--ease) forwards}
.rally.is-in .rally__ball{animation:rallyBall 1.3s var(--ease) forwards}
.rally.is-in .rally__amp{animation:rallyPop .6s 1.15s var(--ease) forwards}
@keyframes rallyBall{0%{offset-distance:0%;opacity:1}90%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes rallyPop{60%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
/* Highlight swoosh under the accent words in section headings */
.sec h2 .em:not(.em--amp),.split__copy h3 .em:not(.em--amp){background-repeat:no-repeat;background-image:linear-gradient(var(--yellow),var(--yellow));background-size:0% .12em;background-position:0 96%;transition:background-size 1s .35s var(--ease);padding-bottom:.04em}
.sec--teal h2 .em:not(.em--amp){background-image:linear-gradient(var(--clementine),var(--clementine))}
.is-in h2 .em:not(.em--amp),.is-in h3 .em:not(.em--amp),.is-in.sec__head .em:not(.em--amp){background-size:100% .12em}
/* Package and catering cards: lift and a brand-colored edge on hover */
.pkg{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pkg:hover,.pkg:focus-within{transform:translateY(-6px);box-shadow:var(--shadow)}
/* Ball & fork mark pops in on split photos */
.split__media{position:relative}
.split__mark{position:absolute;right:16px;bottom:16px;width:clamp(64px,7vw,92px);filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.stat__num{transition:transform .5s var(--ease)}
.stat:hover .stat__num{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .sec__amp{animation:none}
  .rally__arc{stroke-dashoffset:0}
  .rally__ball{offset-distance:100%;opacity:0}
  .rally__amp{opacity:1;transform:none}
  .sec h2 .em:not(.em--amp),.split__copy h3 .em:not(.em--amp){background-size:100% .12em}
  .pkg:hover,.pkg:focus-within{transform:none}
}

/* ---------- Catering page ---------- */
.hero__ctas--four .btn{font-size:1.1rem}
.stats--words{margin-top:clamp(28px,4vw,48px)}
.stats--words .stat__num{font-size:clamp(2rem,3vw,2.8rem)}
.pcards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.pcard{background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:0 10px 30px -18px rgba(4,45,54,.4);border-bottom:6px solid var(--yellow);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard:nth-child(2){border-bottom-color:var(--clementine)}.pcard:nth-child(3){border-bottom-color:var(--paprika)}.pcard:nth-child(4){border-bottom-color:var(--teal)}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pcard__media{aspect-ratio:4/3;overflow:hidden}
.pcard__media img{transition:transform .8s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.06)}
.pcard__body{padding:20px 20px 24px}
.pcard__body h3{text-transform:uppercase;font-size:clamp(1.5rem,1.4vw + .9rem,2rem)}
.pcard__body p{margin:0;color:var(--muted)}
.center-note{text-align:center;max-width:64ch;margin:28px auto 0}
.callout{display:flex;gap:18px;align-items:flex-start;max-width:760px;margin:clamp(28px,4vw,44px) auto 0;padding:22px 24px;border-radius:var(--r);background:var(--cotton);border-left:6px solid var(--clementine)}
.callout h3{margin:0 0 .2em;text-transform:uppercase}
.callout p{margin:0}
.callout__amp{flex:none;width:44px;height:auto}
.explore{text-align:center;margin:32px auto 0;max-width:70ch}
.explore span{margin-inline:.4em;color:var(--muted)}
.band__foot{margin-top:22px}
.band__foot a{color:var(--yellow)}
#inquire{scroll-margin-top:120px}
@media (prefers-reduced-motion:reduce){.pcard:hover{transform:none}.pcard:hover .pcard__media img{transform:none}}
.nav__social ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.site-foot>.wrap:first-child{padding-top:0}
/* Tagline ribbon */
.tagband{background:var(--teal);color:var(--yellow);overflow:hidden;padding-block:clamp(18px,3.4vw,30px)}
.tagband__inner{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.4vw,22px)}
.tagband__text{margin:0;font-family:var(--accent);font-weight:900;text-transform:uppercase;letter-spacing:.03em;line-height:1;font-size:clamp(1.45rem,4.6vw,2.6rem);text-align:center;text-wrap:balance}
.tagband__amp{flex:0 0 auto;width:clamp(26px,4.4vw,44px);height:auto}
.tagband__amp--r{transform:scaleX(-1)}
.is-ready .tagband:not(.is-in) .tagband__text{opacity:0;transform:translateY(14px)}
.tagband .tagband__text{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){.is-ready .tagband:not(.is-in) .tagband__text{opacity:1;transform:none}.tagband .tagband__text{transition:none}}
.site-foot__tag2{font-family:var(--accent);font-weight:400;font-size:1.15rem;text-transform:uppercase;color:#fff;margin:-.1em 0 .8em;line-height:1.1;letter-spacing:.02em}
/* Video call to action: a real button under the player, never inside the frame */
.video__cta{display:flex;justify-content:flex-start;margin-top:18px}
.btn--lg{font-size:1.08rem;padding:1em 1.8em;min-height:52px}
.video__cta .btn svg{width:1.1em;height:1.1em;fill:currentColor;stroke:none}
@media (max-width:640px){.video__cta .btn{width:100%;justify-content:center}}
/* Section photo banner (every section carries a photo or video) */
.sec__banner{margin:0 0 clamp(26px,4vw,44px);border-radius:22px;overflow:hidden;aspect-ratio:21/8;box-shadow:0 18px 40px -24px rgba(7,65,77,.45)}
.sec__banner picture,.sec__banner img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.sec__banner{aspect-ratio:16/10;border-radius:16px}}
/* FAQ with a photo beside it */
.faq-split{display:grid;gap:clamp(22px,4vw,48px);align-items:start}
.faq-split .faq{max-width:none}
.faq-split__media{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 18px 40px -24px rgba(7,65,77,.45)}
.faq-split__media picture,.faq-split__media img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.faq-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.faq-split__media{position:sticky;top:110px}}
@media (max-width:899px){.faq-split__media{aspect-ratio:16/10;border-radius:16px}}
/* Closing band: let the photo show through while keeping white text readable */
.band__media::after{background:linear-gradient(180deg,rgba(4,45,54,.7),rgba(4,45,54,.84))}

/* Menu cards with a dish photo on top, and captioned dish grid */
.menu__group--photo{padding-top:0;overflow:hidden}
.menu__photo{margin:0 -26px 18px;aspect-ratio:16/10;overflow:hidden}
.menu__photo img,.menu__photo picture{width:100%;height:100%;object-fit:cover;display:block}
.dishes{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-top:30px}
@media (min-width:900px){.dishes{grid-template-columns:repeat(4,1fr);gap:18px}}
.dish{position:relative;margin:0;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/5;background:var(--teal)}
.dish img,.dish picture{width:100%;height:100%;object-fit:cover;display:block}
.dish figcaption{position:absolute;inset:auto 0 0 0;padding:28px 12px 10px;background:linear-gradient(180deg,rgba(4,45,54,0),rgba(4,45,54,.88));color:#fff;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1rem,2.6vw,1.2rem);line-height:1.05}

/* Section lead row: heading beside a photo */
.sec__lead{display:grid;gap:clamp(20px,3vw,40px);margin-bottom:clamp(28px,4vw,50px);align-items:center}
.sec__lead .sec__head,.sec__lead .bookstrip__head{margin:0}
.sec__leadfig{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 18px 40px -24px rgba(7,65,77,.45)}
.sec__leadfig picture,.sec__leadfig img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.sec__lead{grid-template-columns:1fr 1fr}.sec__lead .sec__head{text-align:left}.sec__lead .sec__head h2,.sec__lead .sec__head .lede{margin-inline:0}.sec__leadfig{aspect-ratio:4/3}}

.page-top__photo{max-width:760px;margin:28px auto 8px;aspect-ratio:16/10}
@media (min-width:900px){.page-top__photo{aspect-ratio:16/9}}

.video--native .video__frame{background:#042d36}
.video--native video{display:block;width:100%;height:100%;object-fit:cover;background:#042d36}

/* ---------- Paddle contours + drifting pickleballs (decor, Oct 31 2026). Behind content, aria-hidden, paused off screen, still for reduced motion ---------- */
:root{
--pb-ball:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='%23FFDE17' stroke='%23d9bd00' stroke-width='2'/%3E%3Cg fill='%23c7a900'%3E%3Ccircle cx='50' cy='50' r='5.2'/%3E%3Ccircle cx='69.1' cy='61.0' r='4.6'/%3E%3Ccircle cx='50.0' cy='72.0' r='4.6'/%3E%3Ccircle cx='30.9' cy='61.0' r='4.6'/%3E%3Ccircle cx='30.9' cy='39.0' r='4.6'/%3E%3Ccircle cx='50.0' cy='28.0' r='4.6'/%3E%3Ccircle cx='69.1' cy='39.0' r='4.6'/%3E%3Cellipse cx='88.0' cy='50.0' rx='2.6' ry='3.8' transform='rotate%280 88.0 50.0%29'/%3E%3Cellipse cx='80.7' cy='72.3' rx='2.6' ry='3.8' transform='rotate%2836 80.7 72.3%29'/%3E%3Cellipse cx='61.7' cy='86.1' rx='2.6' ry='3.8' transform='rotate%2872 61.7 86.1%29'/%3E%3Cellipse cx='38.3' cy='86.1' rx='2.6' ry='3.8' transform='rotate%28108 38.3 86.1%29'/%3E%3Cellipse cx='19.3' cy='72.3' rx='2.6' ry='3.8' transform='rotate%28144 19.3 72.3%29'/%3E%3Cellipse cx='12.0' cy='50.0' rx='2.6' ry='3.8' transform='rotate%28180 12.0 50.0%29'/%3E%3Cellipse cx='19.3' cy='27.7' rx='2.6' ry='3.8' transform='rotate%28216 19.3 27.7%29'/%3E%3Cellipse cx='38.3' cy='13.9' rx='2.6' ry='3.8' transform='rotate%28252 38.3 13.9%29'/%3E%3Cellipse cx='61.7' cy='13.9' rx='2.6' ry='3.8' transform='rotate%28288 61.7 13.9%29'/%3E%3Cellipse cx='80.7' cy='27.7' rx='2.6' ry='3.8' transform='rotate%28324 80.7 27.7%29'/%3E%3C/g%3E%3Cpath d='M22 30a36 36 0 0 1 22-16' fill='none' stroke='%23fff6a8' stroke-width='5' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
--pb-paddle-teal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200' fill='none' stroke='%2307414D' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M22 4h76q18 0 18 18v88q0 30-30 36H34Q4 140 4 110V22Q4 4 22 4z'/%3E%3Cpath d='M24 14h72q10 0 10 10v84q0 22-22 28H36q-22-6-22-28V24q0-10 10-10z' stroke-dasharray='2 7' opacity='.7'/%3E%3Cpath d='M48 146v44q0 6 6 6h12q6 0 6-6v-44M48 160h24M48 172h24M48 184h24'/%3E%3C/svg%3E");
--pb-paddle-yellow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200' fill='none' stroke='%23FFDE17' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M22 4h76q18 0 18 18v88q0 30-30 36H34Q4 140 4 110V22Q4 4 22 4z'/%3E%3Cpath d='M24 14h72q10 0 10 10v84q0 22-22 28H36q-22-6-22-28V24q0-10 10-10z' stroke-dasharray='2 7' opacity='.7'/%3E%3Cpath d='M48 146v44q0 6 6 6h12q6 0 6-6v-44M48 160h24M48 172h24M48 184h24'/%3E%3C/svg%3E");}
.sec,.band{isolation:isolate}
.decor{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.band .decor{z-index:-1}
.decor__paddle{position:absolute;width:clamp(120px,15vw,240px);aspect-ratio:120/200;background:var(--pb-paddle-teal) center/contain no-repeat;opacity:.08}
.sec--teal .decor__paddle,.band .decor__paddle{background-image:var(--pb-paddle-yellow);opacity:.13}
.decor__paddle--tr{top:clamp(-40px,-3vw,-20px);right:clamp(-50px,-2vw,-10px);transform:rotate(24deg)}
.decor__paddle--bl{bottom:clamp(-60px,-4vw,-30px);left:clamp(-50px,-2vw,-10px);transform:rotate(-152deg)}
.decor__paddle--br{bottom:clamp(-60px,-4vw,-30px);right:clamp(-40px,-2vw,-8px);transform:rotate(200deg)}
.decor__ball{position:absolute;width:var(--s,30px);height:var(--s,30px);opacity:var(--o,.55);animation:pbArc var(--t,22s) ease-in-out var(--dl,0s) infinite alternate;animation-play-state:paused}
.decor__ball::before{content:"";position:absolute;inset:0;background:var(--pb-ball) center/contain no-repeat;border-radius:50%;animation:pbSpin var(--sp,14s) linear infinite;animation-play-state:inherit}
.decor__ball--rev{animation-name:pbArcRev}
.decor__ball--rev::before{animation-direction:reverse}
.decor.is-on .decor__ball{animation-play-state:running}
.sec--teal .decor__ball,.band .decor__ball{--o:.4}
@keyframes pbSpin{to{transform:rotate(360deg)}}
@keyframes pbArc{0%{translate:0 0}25%{translate:calc(var(--dx,140px)*.25) calc(var(--dy,-90px)*.75)}50%{translate:calc(var(--dx,140px)*.5) var(--dy,-90px)}75%{translate:calc(var(--dx,140px)*.75) calc(var(--dy,-90px)*.75)}100%{translate:var(--dx,140px) 0}}
@keyframes pbArcRev{0%{translate:0 0}25%{translate:calc(var(--dx,140px)*-.25) calc(var(--dy,-90px)*.75)}50%{translate:calc(var(--dx,140px)*-.5) var(--dy,-90px)}75%{translate:calc(var(--dx,140px)*-.75) calc(var(--dy,-90px)*.75)}100%{translate:calc(var(--dx,140px)*-1) 0}}
@media (max-width:699px){.decor__ball:nth-of-type(n+3){display:none}.decor__paddle{width:110px;opacity:.06}.sec--teal .decor__paddle,.band .decor__paddle{opacity:.1}.decor__ball{--dx:60px;--dy:-50px;width:calc(var(--s,30px)*.7);height:calc(var(--s,30px)*.7)}}
@media (prefers-reduced-motion:reduce){.decor__ball,.decor__ball::before{animation:none}}
/* paddle-face contour on feature photos: a rounded paddle head up top, tighter corners toward the throat, with a thin edge-guard ring */
.split__media,.faq-split__media,.sec__leadfig{border-radius:44% 44% 22px 22px / 15% 15% 22px 22px;outline:2px solid rgba(7,65,77,.22);outline-offset:7px}
.sec--teal .split__media,.sec--teal .faq-split__media,.sec--teal .sec__leadfig{outline-color:rgba(255,222,23,.45)}
@media (max-width:699px){.split__media,.faq-split__media,.sec__leadfig{border-radius:30% 30% 18px 18px / 12% 12% 18px 18px;outline-offset:5px}}

@media (min-width:900px){.dishes--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dishes+.note,.dishes+.center-note{margin-top:18px}

.dishes--wide .dish{aspect-ratio:3/2}
@media (min-width:900px){.dishes--wide{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){.dishes--wide{grid-template-columns:1fr}}

/* Home hero: the Clubhouse lounge photo is dark, so lift it and keep the scrim on the text side only */
.hero--plush .hero__media>picture img,.hero--plush [data-slide="0"] .hero__img img{filter:brightness(1.28) saturate(1.12)}
.hero--plush .hero__media>.hero__shade,.hero--plush [data-slide="0"] .hero__shade{background:
  linear-gradient(180deg,rgba(4,45,54,.45) 0%,rgba(4,45,54,0) 22%,rgba(4,45,54,0) 62%,rgba(4,45,54,.85) 100%),
  linear-gradient(90deg,rgba(4,45,54,.92) 0%,rgba(4,45,54,.78) 40%,rgba(4,45,54,.1) 70%,rgba(4,45,54,0) 100%)}
@media (max-width:699px){.hero--plush .hero__media>.hero__shade,.hero--plush [data-slide="0"] .hero__shade{background:linear-gradient(180deg,rgba(4,45,54,.25) 0%,rgba(4,45,54,.45) 26%,rgba(4,45,54,.84) 50%,rgba(4,45,54,.95) 100%)}}
@media (max-width:699px){.hero--plush .hero__media>picture img,.hero--plush [data-slide="0"] .hero__img img{object-position:34% 100%!important;filter:brightness(1.4) saturate(1.15)}
  .hero--plush .hero__media>.hero__shade,.hero--plush [data-slide="0"] .hero__shade{background:linear-gradient(180deg,rgba(4,45,54,.15) 0%,rgba(4,45,54,.35) 30%,rgba(4,45,54,.78) 52%,rgba(4,45,54,.92) 100%)}}

/* Headlines are all Roca, including the highlighted words */
h1 .em,h2 .em,h3 .em,h4 .em{font-family:inherit;font-weight:inherit}
/* Typography rule (Jonathan, Oct 31): headings Roca, subheadings Passion One Regular, Passion One Black for emphasis like the & pairings */
h1 .em--amp,h2 .em--amp,h3 .em--amp,h4 .em--amp{font-family:var(--accent);font-weight:900}

/* ---------- Brand motion, round 2 (Oct 31 2026): & light trace, ball & fork shine and badge, scroll rally rail, scroll-driven photo reveals, page transitions.
   All decorative, aria-hidden, GPU-friendly (transform, opacity, stroke offset) and switched off under reduced motion. ---------- */
.decor__paddle--tl{top:clamp(-40px,-3vw,-20px);left:clamp(-50px,-2vw,-10px);transform:rotate(-24deg)}

/* & light trace: a spark of light runs the outline of the ampersand */
.amp path.amp__trace{fill:none!important;stroke:var(--yellow)!important;stroke-width:1.1!important;stroke-linecap:round;stroke-dasharray:.07 .93!important;stroke-dashoffset:1;opacity:0;animation:none!important;filter:drop-shadow(0 0 1.5px rgba(255,222,23,.9))}
.pairs__amp path.amp__trace,.hero__amp path.amp__trace{stroke:#fff!important}

/* Heading & pairings in Passion One Black, with a warm shimmer */
h1 .em--amp,h2 .em--amp,h3 .em--amp{display:inline-block;padding:0 .04em;background:linear-gradient(110deg,var(--paprika) 0%,var(--clementine) 30%,var(--yellow) 48%,var(--clementine) 66%,var(--paprika) 100%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.sec--teal h2 .em--amp,.band h2 .em--amp,.hero h1 .em--amp{background-image:linear-gradient(110deg,var(--yellow) 0%,#fff6a8 30%,var(--clementine) 50%,#fff6a8 70%,var(--yellow) 100%)}

/* Monogram badge: ball & fork inside a ring of taglines */
.bfbadge{position:relative;display:block;width:clamp(132px,15vw,176px);aspect-ratio:1;margin:0 auto 18px}
.bfbadge__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bfbadge__ring text{font-family:var(--accent);font-weight:900;font-size:17px;letter-spacing:.06em;fill:var(--yellow)}
.bfbadge__mark{position:absolute;left:22%;top:20%;width:56%;height:auto}
.band__mark.bfbadge{animation:none}

/* Scroll rally rail: a pickleball rolls along the bottom edge of the header as you read */
.scrollrail{position:absolute;left:0;right:0;bottom:0;height:12px;pointer-events:none;display:none}
.scrollrail__fill{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--yellow),var(--clementine),var(--paprika));transform-origin:0 50%;transform:scaleX(0)}
.scrollrail__ball{position:absolute;left:0;bottom:-2px;width:12px;height:12px;background:var(--pb-ball) center/contain no-repeat;border-radius:50%}

@media (prefers-reduced-motion:no-preference){
  .is-ready .amp path.amp__trace{animation:ampTrace 4.2s 2.4s linear infinite!important}
  .tagband__amp path.amp__trace,.callout__amp path.amp__trace{animation-duration:3.4s!important}
  @keyframes ampTrace{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
  .is-in h1 .em--amp,.is-in h2 .em--amp,h1 .em--amp,.is-in.sec__head .em--amp{animation:ampShimmer 6s ease-in-out infinite}
  @keyframes ampShimmer{0%,100%{background-position:0 0}50%{background-position:100% 0}}
  .ticker__amp{animation:ampFlip 5s ease-in-out infinite}
  .ticker__amp:nth-of-type(3n){animation-delay:-1.6s}.ticker__amp:nth-of-type(3n+1){animation-delay:-3.2s}
  @keyframes ampFlip{0%,70%{transform:rotateY(0)}85%{transform:rotateY(180deg) scale(1.15)}100%{transform:rotateY(360deg)}}
  .tagband__amp{animation:ampSway 5s ease-in-out infinite}.tagband__amp--r{animation-name:ampSwayR}
  @keyframes ampSway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) scale(1.06)}}
  @keyframes ampSwayR{0%,100%{transform:scaleX(-1) rotate(-8deg)}50%{transform:scaleX(-1) rotate(8deg) scale(1.06)}}
  /* ball & fork: ball drops in with a squash, fork serves, light sweeps, hot spot orbits */
  .ballfork__ball{transform-box:fill-box;transform-origin:50% 100%}
  .ballfork.is-in .ballfork__ball{animation:ballDrop 1s var(--ease) both}
  .ballfork.is-in .ballfork__mark{animation:serve 1.4s .35s var(--ease) both}
  @keyframes ballDrop{0%{transform:translateY(-60%) scale(.7);opacity:0}55%{transform:translateY(0) scale(1.08,.88);opacity:1}75%{transform:translateY(-6%) scale(.97,1.03)}100%{transform:none}}
  .ballfork__shine{animation:bfShine 5.5s 1.4s ease-in-out infinite}
  @keyframes bfShine{0%{transform:skewX(-18deg) translateX(0)}35%,100%{transform:skewX(-18deg) translateX(760px)}}
  .ballfork:hover .ballfork__mark,.bfbadge:hover .ballfork__mark{animation:forkWiggle .7s var(--ease)}
  @keyframes forkWiggle{25%{transform:rotate(-10deg)}60%{transform:rotate(7deg)}100%{transform:none}}
  .bfbadge__ring{animation:ringTurn 26s linear infinite}
  @keyframes ringTurn{to{transform:rotate(360deg)}}
  .bfbadge__mark{animation:bob 4s ease-in-out infinite}
  /* cutting-edge, CSS-only: scroll-driven animations where the browser supports them */
  @supports (animation-timeline:scroll()){
    .scrollrail{display:block}
    .scrollrail__fill{animation:railFill linear both;animation-timeline:scroll(root block)}
    .scrollrail__ball{animation:railBall linear both;animation-timeline:scroll(root block)}
    @keyframes railFill{to{transform:scaleX(1)}}
    @keyframes railBall{from{transform:translateX(0) rotate(0)}to{transform:translateX(calc(100vw - 12px)) rotate(1440deg)}}
  }
  @supports (animation-timeline:view()){
    .split__media img,.faq-split__media img,.sec__leadfig img{animation:photoReveal linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes photoReveal{from{transform:scale(1.16);filter:saturate(.6) brightness(.92)}to{transform:scale(1);filter:none}}
    .bfbadge,.bfbadge.band__mark{animation:badgeIn linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
    @keyframes badgeIn{from{transform:scale(.55) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
  }
}
/* page-to-page cross-fade, with the logo held in place (Chrome, Edge, Safari 18.2+; others just load normally) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .site-head .brand{view-transition-name:dd-logo}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
}

/* SEO keyword subtitles (Oct 31): Passion One Regular under each major heading.
   Sentence case so they read as a subheading, not a kicker. Sage on light, cotton on teal, white on photos. */
.subhead{font-family:var(--accent);font-weight:400;font-size:clamp(1.2rem,.9vw + .95rem,1.6rem);line-height:1.18;letter-spacing:.01em;color:var(--sage);margin:-.15em 0 .85em;max-width:60ch;text-wrap:balance;text-transform:none}
.sec__head--center .subhead,.band .subhead,.center .subhead,.sec__head .subhead{margin-inline:auto}
.sec__head:not(.sec__head--center) .subhead{margin-inline:0}
.sec--teal .subhead,.band .subhead,.bookstrip .subhead,.site-foot .subhead{color:var(--cotton)}
.hero .subhead,.lp-hero .subhead,.subhead--hero{color:var(--white);text-shadow:0 2px 4px rgba(0,0,0,.45),0 6px 24px rgba(0,0,0,.45);font-size:clamp(1.3rem,1.2vw + 1rem,1.85rem);margin-top:-.05em}
.band .subhead{text-shadow:0 2px 4px rgba(0,0,0,.4)}
.leadform .subhead,.hero .leadform .subhead,.lp-hero .leadform .subhead{color:var(--sage);text-shadow:none;font-size:clamp(1.15rem,.6vw + .95rem,1.4rem)}

/* ---------- Hero headline carousel (Oct 31) ----------
   3 headlines, each with its own photo. Headlines stack in one grid cell so the hero never changes height.
   Headlines stay in Roca One; slide 2 and 3 are <p>, so they get the heading font here. */
.hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s var(--ease)}
.hslide.is-on{opacity:1}
.hslide picture{height:100%}
.hslide:not(.is-on) img{animation:none}
.lp-hero__media .hslide img{transform:scale(1.06);animation:heroZoom 14s var(--ease) forwards}
.lp-hero__media .hslide:not(.is-on) img{animation:none}
.htitles{display:grid;align-items:end}
.htitles>.htitle{grid-area:1/1;margin:0 0 .4em}
.htitle{font-family:var(--title);font-weight:900;line-height:1.02;letter-spacing:.005em;text-wrap:balance}
p.htitle.hero__title{text-transform:uppercase}
.htitle .em{font-family:inherit;font-weight:inherit}
.lp-hero .htitle{font-size:clamp(2.6rem,5.5vw + .4rem,5.4rem);text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.45),0 6px 30px rgba(0,0,0,.45)}
.htitle:not(.is-on){opacity:0;visibility:hidden;transform:translateY(.3em);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.htitle.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .7s .25s var(--ease),transform .8s .25s var(--ease)}
.htitle.is-out{transform:translateY(-.3em)}
/* controls: pause + 3 progress dots, bottom right, clear of the copy */
.hctl{position:absolute;z-index:3;right:max(var(--gutter),16px);bottom:clamp(18px,3vw,34px);display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:999px;background:rgba(4,45,54,.72);backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.hctl__pause{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:transparent;color:#fff;cursor:pointer;padding:0}
.hctl__pause:hover{background:rgba(255,255,255,.14)}
.hctl__ico{width:18px;height:18px;fill:currentColor}
.hctl__ico--play,.is-paused .hctl__ico--pause{display:none}
.is-paused .hctl__ico--play{display:block}
.hctl__dots{display:flex;gap:4px}
.hctl__dot{position:relative;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0}
.hctl__dot::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:6px;margin-top:-3px;border-radius:6px;background:rgba(255,255,255,.4)}
.hctl__bar{position:absolute;left:6px;top:50%;height:6px;margin-top:-3px;width:0;border-radius:6px;background:var(--yellow)}
.hctl__dot.is-on .hctl__bar{width:calc(100% - 12px)}
.hctl__dot:hover::before{background:rgba(255,255,255,.65)}
.hctl button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.lp-hero .hctl{position:static;display:inline-flex;margin:.1em 0 1.1em;box-shadow:none;background:rgba(255,255,255,.08)}
@media (max-width:699px){.hctl{bottom:14px;padding:4px 6px;gap:6px}.hctl__dot{width:38px}}
@media (prefers-reduced-motion:no-preference){
  [data-carousel]:not(.is-paused):not(.is-held) .hctl__dot.is-on .hctl__bar{width:0;animation:hctlFill 7s linear forwards}
  [data-carousel].is-held .hctl__dot.is-on .hctl__bar{width:0;animation:hctlFill 7s linear forwards;animation-play-state:paused}
}
@keyframes hctlFill{to{width:calc(100% - 12px)}}
@media (prefers-reduced-motion:reduce){.hslide,.htitle,.htitle:not(.is-on),.htitle.is-on{transition:none}}

/* Heading & fix (Oct 31): the underline-draw rule on ".sec h2 .em" was replacing the &'s gradient with a
   thin 0 to .12em strip, and with the text fill transparent the & vanished. The & now opts out of the
   underline (:not(.em--amp) above), always has a solid fallback color, and only goes gradient where
   background-clip:text is supported. No yellow in the light-background gradient so the & never fades out. */
h1 .em.em--amp,h2 .em.em--amp,h3 .em.em--amp,h4 .em.em--amp{display:inline-block;padding:0 .04em;color:var(--paprika);-webkit-text-fill-color:currentColor;background:none}
.sec--teal h2 .em.em--amp,.band h2 .em.em--amp,.hero .em.em--amp,.lp-hero .em.em--amp,.bookstrip h2 .em.em--amp{color:var(--yellow)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1 .em.em--amp,h2 .em.em--amp,h3 .em.em--amp,h4 .em.em--amp{background:linear-gradient(110deg,var(--paprika) 0%,var(--clementine) 50%,var(--paprika) 100%) 0 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .sec--teal h2 .em.em--amp,.band h2 .em.em--amp,.hero .em.em--amp,.lp-hero .em.em--amp,.bookstrip h2 .em.em--amp{background-image:linear-gradient(110deg,var(--yellow) 0%,#fff6a8 30%,var(--clementine) 50%,#fff6a8 70%,var(--yellow) 100%)}
}
@media (prefers-reduced-motion:no-preference){h1 .em.em--amp,h2 .em.em--amp,h3 .em.em--amp{animation:ampShimmer 6s ease-in-out infinite}}
@media (max-width:699px){.hero[data-carousel] .hero__inner{padding-bottom:118px}}
/* Focus ring stays above 3:1 on the dark teal sections (WCAG 1.4.11) */
:is(.hero,.lp-hero,.sec--teal,.band,.bookstrip,.tagband,.site-foot,.dish,.site-head:not(.is-solid):not(.site-head--solid)) :focus-visible{outline-color:var(--yellow)}

/* Homepage swing hero (Nov 2): player sits right of the headline, lighter shade so the swing reads, & moved off the player */
.hero--swing [data-slide="0"] .hero__img img{filter:brightness(1.04) saturate(1.06)}
.hero--swing [data-slide="0"] .hero__shade{background:linear-gradient(90deg,rgba(4,45,54,.93) 0%,rgba(4,45,54,.8) 36%,rgba(4,45,54,.3) 60%,rgba(4,45,54,0) 78%),linear-gradient(180deg,rgba(4,45,54,.45) 0%,rgba(4,45,54,0) 22%,rgba(4,45,54,0) 68%,rgba(4,45,54,.75) 100%)}
.hero--swing .hero__amp{top:88px;right:1vw;width:clamp(130px,11vw,190px)}
/* Phones (Nov 2): art-directed portrait crop of the swing sits in a photo band on top; the copy starts below it on teal, so the player never sits behind the headline */
@media (max-width:699px){
  .hero--swing{align-items:start}
  .hero--swing .hero__media{bottom:auto;height:min(111.7vw,60svh)}
  .hero--swing [data-slide="0"] .hero__img img{object-position:50% 30%!important;transform:none;animation:none}
  .hero--swing .hero__shade,.hero--swing [data-slide="0"] .hero__shade{background:linear-gradient(180deg,rgba(4,45,54,.55) 0%,rgba(4,45,54,0) 20%,rgba(4,45,54,0) 86%,rgba(4,45,54,1) 100%)}
  .hero--swing .hero__inner{padding-top:calc(min(111.7vw,60svh) + 10px)}
  .hero--swing .hero__inner::before{display:none}
  .hero--swing .hero__amp{top:84px;right:1vw;width:22vw;opacity:.85}}