/* Surfing Boba (portfolio sample, a fictional business).
   The brand's geometry, from its logo: the triple speed-line "wings" with
   angled ends, the surfboard's pointed oval, and the wave curl inside it.
   Colors are the logo's own: navy outline, two blues, sky, cream. */

@font-face{font-family:"Ultra";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ultra-latin.woff2) format("woff2")}
@font-face{font-family:"Rethink Sans";font-weight:400 800;font-style:normal;font-display:swap;src:url(fonts/rethink-sans-latin.woff2) format("woff2")}

:root{
  --navy:#0B3352;     /* the logo's outline */
  --deep:#0E5A8A;     /* the board's dark blue */
  --blue:#2B8FC6;     /* the board's mid blue */
  --sky:#A6DCF1;      /* the letters' light blue */
  --mist:#DDF2FB;     /* pale sky */
  --cream:#FBF6E8;    /* the letters' cream */
  --sand:#F1DFB8;
  --sunset:#F47E5C;   /* one loud accent, for things that are live or chosen */
  --pearl:#3A2417;
  --ink:#0B2A42;
  --ink-soft:#3D5770;
  --display:"Ultra","Rockwell Extra Bold","Rockwell",Georgia,serif;
  --text:"Rethink Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(18px,4vw,44px);
  --max:1180px;
  --hdr:132px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:110px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
a{color:var(--deep);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--sunset);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.04;margin:0;color:var(--navy);letter-spacing:.005em}
h2{font-size:clamp(34px,4.6vw,58px)}
h3{font-size:clamp(22px,2.2vw,28px)}
p{margin:0}

/* ── The wings: three stripes with angled ends, from the logo ───────────── */
.wings{display:grid;gap:5px;flex:1;min-width:24px}
.wings i{display:block;height:6px;background:var(--sky);border:2px solid var(--navy);border-radius:2px}
.wings i:nth-child(2){background:var(--cream)}
.wings i:nth-child(3){background:var(--blue)}
.wings--l i{clip-path:polygon(14px 0,100% 0,100% 100%,0 100%);margin-right:0}
.wings--l i:nth-child(1){margin-left:0}
.wings--l i:nth-child(2){margin-left:8px}
.wings--l i:nth-child(3){margin-left:16px}
.wings--r i{clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.wings--r i:nth-child(2){margin-right:8px}
.wings--r i:nth-child(3){margin-right:16px}

/* ── Header: the sign stacked over the nav, centered ────────────────────── */
.hdr{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:3px solid var(--navy)}
.hdr__sign{position:relative;display:flex;justify-content:center;max-width:1280px;margin:0 auto;padding:14px var(--gut) 8px;transition:padding .25s ease}
.hdr__logo{display:block;line-height:0}
.hdr__logo img{height:62px;width:auto;transition:height .25s ease}
.hdr__row{display:flex;align-items:center;gap:18px;max-width:1280px;margin:0 auto;padding:0 var(--gut) 12px}
.nav{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:8px 14px;font-weight:800;font-size:15px;letter-spacing:.01em;color:var(--navy);text-decoration:none;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--mist)}
.nav a[aria-current="page"]{background:var(--navy);color:var(--cream)}
/* the phone sits in the logo row, on the right, so the nav row stays centered under the logo */
.hdr__call{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 2px;font-weight:800;font-size:15px;color:var(--navy);text-decoration:none;white-space:nowrap}
.hdr__call:hover{text-decoration:underline;text-decoration-color:var(--blue)}
.hdr__call svg{width:18px;height:18px}
.hdr__menu{display:none}
.hdr.is-tight .hdr__sign{padding:6px var(--gut) 2px}
.hdr.is-tight .hdr__logo img{height:40px}
.hdr.is-tight .hdr__row{padding-bottom:7px}
@media (max-width:860px){
  .hdr__sign{justify-content:center;max-width:none;padding:10px 64px 10px}
  .hdr__logo img{height:44px}
  .hdr.is-tight .hdr__logo img{height:36px}
  .hdr.is-tight .hdr__sign{padding:8px 64px}
  .hdr__row{position:absolute;inset:0 0 auto;height:0;padding:0;gap:0}
  .hdr__row .wings{display:none}
  .hdr__menu{display:grid;place-items:center;position:absolute;left:10px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:2px solid var(--navy);border-radius:12px;background:var(--cream);color:var(--navy);cursor:pointer}
  .hdr__menu svg{width:22px;height:22px}
  .hdr__call{display:grid;place-items:center;right:10px;width:44px;height:44px;padding:0;border:2px solid var(--navy);border-radius:12px;background:var(--sky)}
  .hdr__call svg{width:20px;height:20px}
  .hdr__call span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hdr__sign{position:relative}
  .hdr__row{display:block}
  .nav{display:none;position:fixed;left:0;right:0;top:var(--hdr-now,68px);flex-direction:column;align-items:stretch;gap:0;background:var(--cream);border-bottom:3px solid var(--navy);padding:8px var(--gut) 16px;box-shadow:0 20px 40px -24px rgba(11,51,82,.45)}
  .nav.is-open{display:flex}
  .nav a{padding:13px 12px;font-size:17px;border-radius:10px}
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px 14px;background:var(--sunset);color:var(--navy);border:3px solid var(--navy);border-radius:999px;font:800 17px/1 var(--text);text-decoration:none;cursor:pointer;box-shadow:0 5px 0 var(--navy);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{color:var(--navy);transform:translateY(-2px);box-shadow:0 7px 0 var(--navy)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--navy)}
.btn svg{width:18px;height:18px}
.link{font-weight:800;color:var(--navy);text-decoration:underline;text-decoration-color:var(--blue)}

/* ── Home hero: the truck photo, whole, the headline in its sky ─────────── */
/* The photo is a band cut from the generated picture (1536 wide), shown at its
   own shape, never cropped by the box. Past 1700px it stops growing; the sides
   are filled with the photo's own edge colors and its edges feather into them. */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(#5597DD 0.0%,#5697DF 1.4%,#5799E0 2.8%,#589BE1 4.2%,#589CE2 5.6%,#599BE1 7.0%,#5A9DE1 8.4%,#5C9FE3 9.8%,#5DA0E4 11.2%,#5EA2E5 12.6%,#60A3E6 14.0%,#61A4E7 15.4%,#62A5E6 16.8%,#64A7E7 18.2%,#65A8E8 19.6%,#65A9E9 21.0%,#66AAEA 22.4%,#68ABEA 23.8%,#68ACE9 25.2%,#6BADE9 26.6%,#6EAFEA 28.0%,#6FB1EB 29.4%,#70B1EB 30.8%,#71B1EB 32.2%,#73B3EA 33.6%,#76B4EA 35.0%,#78B6EA 36.4%,#7AB8EB 37.8%,#7CB9EA 39.2%,#7FB9E9 40.6%,#83BBE9 42.0%,#87BCE7 43.4%,#8BBDE7 44.8%,#94BDE3 46.2%,#9CAEC9 47.6%,#90AFD1 49.0%,#8BA0BF 50.4%,#97B3CF 51.8%,#98BAD5 53.2%,#9ABAD4 54.6%,#B7BCC8 56.0%,#B0AFBD 57.4%,#9FA8BD 58.8%,#A6B3C5 60.2%,#A5AFC1 61.6%,#ACB1C0 63.0%,#A5ACC0 64.4%,#A6ADC3 65.8%,#A1ACC3 67.2%,#4A7194 68.6%,#105B83 70.0%,#2A6E97 71.4%,#18688B 72.8%,#227DA0 74.2%,#397E95 75.6%,#467F90 77.0%,#689BB7 78.4%,#93A3B3 79.8%,#DBD5D6 81.2%,#DDCCC5 82.6%,#ACA7BA 84.0%,#A2A6B7 85.4%,#A69BA1 86.8%,#C99A75 88.2%,#D4A37B 89.6%,#D8A379 91.0%,#CA986F 92.4%,#C79A77 93.8%,#BD8D6A 95.2%,#715A4F 96.6%,#776A6E 98.0%,#796862 99.4%,#7D6A65 100.0%) left/50.5% 100% no-repeat,
             linear-gradient(#A4CBF3 0.0%,#A6CBF3 1.4%,#A8CCF1 2.8%,#ACCDF1 4.2%,#AFD0F2 5.6%,#B4D1F1 7.0%,#B8D3F1 8.4%,#BDD5F1 9.8%,#C0D6EF 11.2%,#C4D7EF 12.6%,#C9DAED 14.0%,#CCDBED 15.4%,#CEDBEA 16.8%,#F0F1E9 18.2%,#F1EDE6 19.6%,#F3EADB 21.0%,#F5E4CE 22.4%,#F1DBC1 23.8%,#F4DDC0 25.2%,#FDFAE0 26.6%,#F9F5E8 28.0%,#EBE9E5 29.4%,#E6E6E6 30.8%,#E6E5E5 32.2%,#E9E5E2 33.6%,#ECE6E2 35.0%,#F0E7E0 36.4%,#F4E8DD 37.8%,#F6E8DA 39.2%,#FAEBD8 40.6%,#FDEFD7 42.0%,#FDEFD6 43.4%,#FDF7DF 44.8%,#FCF9DC 46.2%,#FDF8DA 47.6%,#FCE5B0 49.0%,#FDF2C4 50.4%,#FCECBD 51.8%,#FDEBB8 53.2%,#FDEEBD 54.6%,#FDE9B8 56.0%,#FEE9B6 57.4%,#FEE9B3 58.8%,#FDEEB7 60.2%,#FDEBB3 61.6%,#FDE6AB 63.0%,#F1AF59 64.4%,#ECA956 65.8%,#ECAA5C 67.2%,#F0BC74 68.6%,#F1CA9C 70.0%,#F2CA9E 71.4%,#F4E1C1 72.8%,#F1D7B6 74.2%,#FDF7DA 75.6%,#F8C37C 77.0%,#F4C27E 78.4%,#D49960 79.8%,#C28A60 81.2%,#DCA26C 82.6%,#B87F53 84.0%,#C08B63 85.4%,#E5AA73 86.8%,#E3A96E 88.2%,#E9B87D 89.6%,#F3C284 91.0%,#C0834F 92.4%,#CF9160 93.8%,#C69266 95.2%,#BB8863 96.6%,#BF8A63 98.0%,#9D745D 99.4%,#B58668 100.0%) right/50.5% 100% no-repeat}
.hero__pic{display:block;position:relative;max-width:1700px;margin:0 auto}
.hero__pic img{width:100%;height:auto;user-select:none;-webkit-user-drag:none}
@media (min-width:1701px){.hero__pic img{-webkit-mask:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);mask:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}}
.hero__copy{position:absolute;left:0;right:0;top:0;max-width:1700px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:min(2.6vw,44px) var(--gut) 0;pointer-events:none}
.hero__copy > *{pointer-events:auto}
.hero h1{font-size:min(3.6vw,61px);max-width:24ch;color:var(--navy);text-shadow:0 1px 0 rgba(251,246,232,.45)}
.hero__line{margin-top:min(.8vw,13px);font-size:min(1.25vw,19px);font-weight:700;color:var(--navy)}
@media (max-width:1099px){.hero__line{display:none}}
.hero__acts{margin-top:min(1.1vw,18px);display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}
.hero__acts .link{background:rgba(251,246,232,.88);padding:6px 12px;border-radius:10px}
@media (max-width:859px){
  .hero{background:var(--mist)}
  .hero__copy{position:relative;padding:24px var(--gut) 30px;background:var(--mist)}
  .hero h1{font-size:clamp(30px,5.4vw,52px)}
  .hero__line{display:block;margin-top:12px;font-size:clamp(16px,2vw,19px);font-weight:600;max-width:52ch}
  .hero__acts{margin-top:20px}
  .hero__acts .link{background:none;padding:0}
}

/* ── Where's the truck: a boardwalk marquee + the next stop ─────────────── */
.where{background:var(--navy);color:var(--cream);position:relative}
.where::before,.where::after{content:"";position:absolute;left:0;right:0;height:14px;background:
  linear-gradient(var(--sky) 0 4px,transparent 4px 5px,var(--cream) 5px 9px,transparent 9px 10px,var(--blue) 10px 14px)}
.where::before{top:0}
.where::after{bottom:0}
.ticker{display:flex;align-items:center;gap:12px;padding:24px 0 10px;overflow:hidden}
.ticker__track{display:flex;flex-wrap:wrap;gap:12px 44px;margin:0;font:400 clamp(18px,1.8vw,24px)/1.2 var(--display);letter-spacing:.02em;padding:0 var(--gut)}
.ticker.is-on .ticker__track{flex-wrap:nowrap;white-space:nowrap;width:max-content;padding:0 0 0 44px;animation:tick 48s linear infinite}
.ticker__track span{display:inline-flex;align-items:center;gap:44px}
.ticker__track span::after{content:"";width:12px;height:30px;background:var(--sky);border:2px solid var(--cream);border-radius:50%/50%}
.ticker.is-paused .ticker__track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker__btn{display:none;flex:none;margin-left:var(--gut);margin-right:var(--gut);width:38px;height:38px;border-radius:50%;border:2px solid var(--cream);background:transparent;color:var(--cream);place-items:center;cursor:pointer}
.ticker.is-on .ticker__btn{display:grid}
.ticker__btn svg{width:14px;height:14px}
.ticker__win{overflow:hidden;flex:1}
.ticker.is-on .ticker__win{-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.next{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,22rem);gap:18px 30px;align-items:center;padding:18px 0 38px}
.next__status{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--sky);color:var(--navy);font-weight:800;font-size:14px;white-space:nowrap}
.next__status::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--deep)}
.next__status.is-live{background:var(--sunset)}
.next__status.is-live::before{background:var(--navy);animation:blink 1.6s ease-in-out 3}
@keyframes blink{50%{opacity:.25}}
.next__where{font:400 clamp(26px,3vw,40px)/1.05 var(--display);color:var(--cream)}
.next__when{margin-top:6px;color:var(--sky);font-weight:600}
.next__count{font:800 clamp(18px,1.7vw,22px)/1.2 var(--text);color:var(--cream);text-align:right}
.next__count small{display:block;font-weight:600;font-size:14px;color:var(--sky)}
@media (max-width:760px){.next{grid-template-columns:1fr}.next__count{text-align:left}}

/* ── The board rack: drinks as surfboards standing in a row ─────────────── */
.rack{padding:clamp(70px,9vw,120px) 0 0;background:linear-gradient(var(--cream) 0 72%,var(--sand) 72%)}
.rack__head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.rack__head p{max-width:44ch;color:var(--ink-soft);font-size:18px}
.boards{list-style:none;max-width:1100px;margin:44px auto 0;padding:0;display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,2vw,26px);position:relative}
.boards::after{content:"";position:absolute;left:4%;right:4%;bottom:30px;height:16px;background:var(--pearl);border-radius:8px;z-index:0}
.board{position:relative;z-index:1;width:clamp(116px,13vw,164px);text-align:center;padding-bottom:58px}
.board__shape{display:block;position:relative;aspect-ratio:1/2.5;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.board:nth-child(2) .board__shape{aspect-ratio:1/2.8}
.board:nth-child(3) .board__shape{aspect-ratio:1/2.35}
.board:nth-child(4) .board__shape{aspect-ratio:1/2.95}
.board:nth-child(5) .board__shape{aspect-ratio:1/2.6}
.board__shape img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask:url("img/lens.svg") center/100% 100% no-repeat;mask:url("img/lens.svg") center/100% 100% no-repeat}
.board__shape::after{content:"";position:absolute;inset:0;background:url("img/lens-rim.svg") center/100% 100% no-repeat;pointer-events:none}
@media (hover:hover){.board:hover .board__shape{transform:translateY(-14px) rotate(-1.5deg)}}
.board__name{display:block;margin-top:14px;font:400 clamp(15px,1.45vw,19px)/1.1 var(--display);color:var(--navy);white-space:nowrap}
.board__what{display:block;margin-top:4px;font-size:14px;color:var(--ink-soft);line-height:1.35;min-height:2.7em}
.rack__more{display:flex;justify-content:center;padding:0 0 clamp(50px,6vw,70px);background:var(--sand)}
@media (max-width:760px){
  .boards{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding:20px var(--gut) 0;max-width:none;margin:44px 0 0}
  .boards::after{display:none}
  .board{flex:none;width:44vw;scroll-snap-align:center}
}

/* ── The name, huge, with the boardwalk playing inside the letters ──────── */
.marquee{padding:clamp(60px,8vw,110px) 0;background:var(--cream);position:relative}
.marquee__row{display:flex;align-items:center;gap:clamp(10px,2vw,26px);max-width:1500px;margin:0 auto;padding:0 var(--gut)}
.marquee__row .wings{gap:clamp(6px,.8vw,10px)}
.marquee__row .wings i{height:clamp(8px,1.2vw,16px);border-width:3px}
.letters{position:relative;flex:0 1 1100px;aspect-ratio:3.4007;background:var(--navy);-webkit-mask:url("img/wordmask.svg") center/100% 100% no-repeat;mask:url("img/wordmask.svg") center/100% 100% no-repeat}
.letters video,.letters img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.marquee__cap{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap;text-align:center;color:var(--ink-soft);font-weight:600}
.vbtn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:2px solid var(--navy);border-radius:999px;background:transparent;color:var(--navy);font:700 14px/1 var(--text);cursor:pointer}
.vbtn svg{width:12px;height:12px}

/* ── The ticket: what booking the truck gets you ────────────────────────── */
.bookit{position:relative;background:var(--sky);padding:clamp(90px,10vw,140px) 0 clamp(70px,8vw,110px)}
.bookit::before{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(40px,5vw,70px);background:var(--cream);-webkit-mask:url("img/wave-edge.svg") center top/100% 100% no-repeat;mask:url("img/wave-edge.svg") center top/100% 100% no-repeat}
.bookit__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center}
.bookit__photo{border:4px solid var(--navy);border-radius:28px;overflow:hidden;background:var(--mist);box-shadow:10px 10px 0 var(--navy)}
.bookit__photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ticket{position:relative;display:grid;grid-template-columns:1fr auto;background:var(--cream);border:3px solid var(--navy);border-radius:18px;
  -webkit-mask:radial-gradient(circle 16px at calc(100% - 132px) 0,transparent 15px,#000 16px) top/100% 51% no-repeat,radial-gradient(circle 16px at calc(100% - 132px) 100%,transparent 15px,#000 16px) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 16px at calc(100% - 132px) 0,transparent 15px,#000 16px) top/100% 51% no-repeat,radial-gradient(circle 16px at calc(100% - 132px) 100%,transparent 15px,#000 16px) bottom/100% 51% no-repeat}
.ticket__main{padding:28px 26px 26px 30px}
.ticket__main h2{font-size:clamp(30px,3.4vw,44px)}
.ticket__main p{margin-top:10px;color:var(--ink-soft)}
.ticket ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.ticket li{display:flex;gap:10px;align-items:baseline;font-weight:600}
.ticket li::before{content:"";flex:none;width:8px;height:22px;transform:translateY(5px);background:var(--blue);border:2px solid var(--navy);border-radius:50%}
.ticket__stub{width:132px;border-left:3px dashed var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 10px;text-align:center;background:var(--sunset)}
.ticket__stub a{font:400 19px/1.1 var(--display);color:var(--navy);text-decoration:none}
.ticket__stub a::after{content:"";position:absolute;inset:0}
.ticket__stub span{font-size:13px;font-weight:700;color:var(--navy)}
@media (max-width:900px){.bookit__grid{grid-template-columns:1fr}}
@media (max-width:520px){
  .ticket{grid-template-columns:1fr;-webkit-mask:none;mask:none}
  .ticket__stub{width:auto;border-left:0;border-top:3px dashed var(--navy);flex-direction:row;justify-content:space-between;padding:16px 22px;border-radius:0 0 15px 15px}
}

/* ── Postcards from the boardwalk ───────────────────────────────────────── */
.cards{padding:clamp(70px,9vw,120px) 0;background:var(--cream)}
.cards__row{list-style:none;margin:40px 0 0;padding:10px var(--gut) 30px;display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);max-width:1500px;margin-left:auto;margin-right:auto}
.card{flex:none;width:clamp(240px,26vw,320px);scroll-snap-align:start;background:#fff;padding:12px 12px 16px;border:2px solid var(--navy);border-radius:6px;box-shadow:0 10px 24px -14px rgba(11,51,82,.5);transform:translateY(calc(var(--y,0)*1px)) rotate(calc(var(--r,0)*1deg))}
.card:nth-child(odd){--y:18;--r:-1.2}
.card:nth-child(even){--y:-6;--r:1}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.card p{margin-top:10px;font-weight:700;color:var(--navy);font-size:15px}
@media (min-width:900px){.cards__row{overflow:visible;justify-content:center}.card{width:min(320px,calc((min(100vw,1500px) - 2*var(--gut) - 78px)/4))}}
.card p span{display:block;font-weight:500;color:var(--ink-soft);font-size:14px}

/* ── Footer: the shoreline ──────────────────────────────────────────────── */
.ftr{position:relative;background:var(--navy);color:var(--cream);padding:clamp(80px,9vw,120px) 0 30px;margin-top:0}
.ftr::before{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(40px,5vw,70px);background:var(--cream);-webkit-mask:url("img/wave-edge.svg") center top/100% 100% no-repeat;mask:url("img/wave-edge.svg") center top/100% 100% no-repeat}
.ftr--sand::before{background:var(--sand)}
.ftr--sky::before{background:var(--sky)}
.ftr__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px}
.ftr__logo img{width:min(320px,100%);height:auto}
.ftr h2{font-size:18px;font-family:var(--text);font-weight:800;color:var(--sky);letter-spacing:.02em;margin-bottom:10px}
.ftr a{color:var(--cream)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ftr__note{margin-top:46px;padding-top:20px;border-top:2px solid rgba(166,220,241,.35);font-size:14px;color:var(--sky)}
.ftr__note a{color:var(--cream)}
@media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr__grid{grid-template-columns:1fr}}

/* ── Inner pages ────────────────────────────────────────────────────────── */
.page-head{padding:clamp(48px,7vw,90px) 0 clamp(28px,4vw,40px);background:var(--mist);border-bottom:3px solid var(--navy)}
.page-head h1{font-size:clamp(40px,6vw,80px)}
.page-head p{margin-top:12px;max-width:52ch;font-size:19px;color:var(--ink-soft)}
.section{padding:clamp(56px,7vw,96px) 0}
.section--sand{background:var(--sand)}
.page-head__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.page-head__pic{margin:0;border:4px solid var(--navy);border-radius:28px;overflow:hidden;background:var(--sky);box-shadow:10px 10px 0 var(--navy)}
.page-head__pic img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:820px){.page-head__grid{grid-template-columns:1fr}}
.cta{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap}
.cta h2{font-size:clamp(28px,3.4vw,44px);max-width:20ch}

/* Menu: sizes as surfboards of growing length */
#sizes-h{text-align:center}
.sizes{display:flex;justify-content:center;align-items:flex-end;gap:clamp(24px,5vw,70px);list-style:none;margin:36px 0 0;padding:0}
.size{text-align:center}
.size__board{display:block;margin:0 auto;width:clamp(54px,6vw,72px);background:url("img/lens-board.svg") center/100% 100% no-repeat}
.size:nth-child(1) .size__board{aspect-ratio:1/2.4}
.size:nth-child(2) .size__board{aspect-ratio:1/3.2}
.size:nth-child(3) .size__board{aspect-ratio:1/4}
.size b{display:block;margin-top:14px;font:400 clamp(17px,4.6vw,22px)/1 var(--display);color:var(--navy);white-space:nowrap}
.size span{display:block;margin-top:6px;font-weight:700;color:var(--ink-soft)}
.size strong{display:block;margin-top:2px;font-size:22px;font-weight:800;color:var(--navy)}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px)}
.menu h2{font-size:clamp(28px,3vw,40px);display:flex;align-items:center;gap:14px}
.menu h2 .wings{max-width:120px}
.menu ul{list-style:none;margin:20px 0 0;padding:0}
.menu li{display:grid;grid-template-columns:14px 1fr auto;gap:4px 14px;align-items:baseline;padding:14px 0;border-bottom:2px dotted rgba(11,51,82,.35)}
.menu li::before{content:"";width:10px;height:26px;transform:translateY(6px);border-radius:50%;background:var(--c,var(--blue));border:2px solid var(--navy)}
.menu li b{font-weight:800;font-size:18px;color:var(--navy)}
.menu li span{grid-column:2/4;color:var(--ink-soft);font-size:15px}
.menu li em{font-style:normal;font-weight:700;color:var(--deep);font-size:14px}
@media (max-width:820px){.menu{grid-template-columns:1fr}}
.extras{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);margin-top:clamp(40px,5vw,60px)}
.extras ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.extras li{display:flex;justify-content:space-between;gap:12px;border-bottom:2px dotted rgba(11,51,82,.3);padding:6px 0;font-weight:600}
@media (max-width:820px){.extras{grid-template-columns:1fr}}

/* What is boba: a cup's worth of pearls that settle and roll */
.pearls{position:relative;background:var(--navy);color:var(--cream);overflow:hidden;padding:clamp(56px,7vw,90px) 0 clamp(150px,16vw,200px)}
.pearls h2{color:var(--cream)}
.pearls p{margin-top:14px;max-width:56ch;color:var(--mist);font-size:18px}
.pearls__pit{position:absolute;left:0;right:0;bottom:0;height:clamp(140px,15vw,190px);pointer-events:none}
.pearls__pit canvas{width:100%;height:100%;pointer-events:auto}
.pearls__still{position:absolute;left:0;right:0;bottom:0;height:100%;background:url("img/pearls-still.svg") bottom center/auto 100% repeat-x}
.js .pearls__pit.is-live .pearls__still{display:none}

/* Book: packages and the quote form */
.report{width:100%;margin-top:30px;border-collapse:separate;border-spacing:0;border:3px solid var(--navy);border-radius:22px;overflow:hidden;background:#fff}
.report th,.report td{padding:16px 18px;text-align:left;vertical-align:middle;border-bottom:2px dotted rgba(11,51,82,.3)}
.report thead th{background:var(--navy);color:var(--sky);font:800 13px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;border-bottom:0}
.report tbody tr:last-child th,.report tbody tr:last-child td{border-bottom:0}
.report tbody th{font:400 24px/1.1 var(--display);color:var(--navy);white-space:nowrap}
.report td{font-weight:600}
.report td b{font-size:19px;color:var(--deep)}
.swell{display:flex;gap:3px;margin-top:6px;color:var(--blue)}
.swell svg{width:26px;height:14px}
.report tbody tr:nth-child(2){background:var(--mist)}
.report tbody tr:nth-child(3){background:var(--sky)}
.report__notes{margin-top:18px;display:grid;gap:8px;max-width:70ch;color:var(--ink-soft)}
@media (max-width:760px){
  .report thead{display:none}
  .report,.report tbody,.report tr,.report th,.report td{display:block;width:100%}
  .report tr{padding:14px 18px;border-bottom:2px solid var(--navy)}
  .report tbody tr:last-child{border-bottom:0}
  .report th,.report td{padding:3px 0;border:0}
  .report td::before{content:attr(data-label)": ";font-weight:800;color:var(--ink-soft)}
}
.kinds{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;list-style:none;padding:0}
.kinds li{padding:10px 18px;border:2px solid var(--navy);border-radius:999px;font-weight:800;background:var(--cream)}
.quote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:start}
.quote__photo{border:4px solid var(--navy);border-radius:26px;overflow:hidden;box-shadow:10px 10px 0 var(--navy);background:var(--mist)}
.quote__photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (min-width:901px){.quote__photo{position:sticky;top:150px}}
@media (max-width:900px){.quote{grid-template-columns:1fr}.quote__photo{order:2}.quote__photo img{aspect-ratio:4/3;object-position:50% 52%}}
.form{background:#fff;border:3px solid var(--navy);border-radius:24px;padding:clamp(22px,3vw,34px)}
.form__steps{display:flex;gap:10px;margin-bottom:18px;font-weight:800;font-size:14px;color:var(--ink-soft)}
.form__steps span{padding:6px 12px;border-radius:999px;border:2px solid var(--navy)}
.form__steps span[aria-current="step"]{background:var(--navy);color:var(--cream)}
.form fieldset{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.form fieldset[hidden]{display:none}
.field{display:grid;gap:6px;align-content:start}
.field--full{grid-column:1/-1}
.field label,.field legend{font-weight:800;font-size:15px;color:var(--navy)}
.field input,.field select,.field textarea{width:100%;font:500 16px/1.4 var(--text);color:var(--ink);background:var(--cream);border:2px solid var(--navy);border-radius:12px;padding:11px 13px}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--sunset);outline-offset:1px}
.field small{color:var(--ink-soft);font-size:13px}
.field .err{color:#A3260A;font-size:13.5px;font-weight:700}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--navy)}
.form__acts{grid-column:1/-1;display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.form__back{background:none;border:0;font:800 16px var(--text);color:var(--navy);text-decoration:underline;cursor:pointer}
.form__note{margin-top:16px;font-size:14px;color:var(--ink-soft)}
.form__done{text-align:center;padding:30px 10px}
.form__done h2{font-size:clamp(28px,3vw,38px)}
.form__done p{margin-top:10px;color:var(--ink-soft)}
@media (max-width:560px){.form fieldset{grid-template-columns:1fr}}
.faq{max-width:820px}
.faq details{border-bottom:2px solid var(--navy);padding:16px 0}
.faq summary{cursor:pointer;font-weight:800;font-size:19px;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--display);color:var(--deep)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin-top:10px;color:var(--ink-soft)}

/* Merch: the summer drop */
.drop-hero{border:4px solid var(--navy);border-radius:28px;overflow:hidden;background:var(--sand);box-shadow:10px 10px 0 var(--navy)}
.drop-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.goods{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.good{display:flex;flex-direction:column;background:#fff;border:3px solid var(--navy);border-radius:22px;overflow:hidden}
.good__pic{background:#F4F4F2;aspect-ratio:1/1;border-bottom:3px solid var(--navy);overflow:hidden}
.good__pic img{width:100%;height:100%;object-fit:cover}
.good__body{padding:16px 18px 20px;display:grid;gap:6px}
.good__body h3{font-size:22px}
.good__price{font-weight:800;font-size:18px;color:var(--deep)}
.good__opts{color:var(--ink-soft);font-size:14.5px}
.swatches{display:flex;gap:6px}
.swatches i{width:18px;height:18px;border-radius:50%;border:2px solid var(--navy)}
@media (max-width:900px){.goods{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.goods{grid-template-columns:1fr}}
.notify{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:22px}
.notify .field{flex:1 1 260px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.good{position:relative}
.good__pic{position:relative}
.good__tag{position:absolute;left:12px;top:12px;padding:6px 11px;border-radius:999px;background:var(--navy);color:var(--cream);font-weight:800;font-size:13px}
.good__tag.is-in{background:var(--sunset);color:var(--navy);border:2px solid var(--navy)}
.notify{align-items:flex-start}
.notify .btn{margin-top:30px}
.faq{margin-top:26px}
.notify{max-width:680px}
@media (max-width:760px){.next__status{justify-self:start}}
@media (max-width:1340px){.marquee__row .wings{display:none}}
.page-head__pic--wide img{aspect-ratio:3/2}
.page-head__pic--square img{aspect-ratio:1/1}