:root{
  --teal:#0E9BA4;--teal-logo:#10A9B2;--teal-footer:#0E5762;
  --teal-dk:#0A5F66;
  --teal-deep:#084B51;
  --teal-tint:#E8F5F6;
  --ink:#12262A;
  --body:#4C5C61;
  --line:#E1E8E9;
  --wash:#F7FAFA;
  --white:#FFFFFF;
  --alert:#B4482F;
  --good:#127A63;

  /* Product card photo shape. Square shows the most of a shot composed for
     a tall frame. 4/3 and 3/2 crop progressively more off the top and
     bottom if the cards start feeling too tall. */
  --card-photo: 1/1;

  /* Everything runs edge to edge. This is how wide the content inside
     each band is allowed to get before it starts adding side margin. */
  --inner: 1440px;

  /* Warm neutral for the gift shop band, so it separates from the teal
     footer and gives colourful photography somewhere quiet to sit. */
  --sand:      #F3EDE4;
  --sand-line: #E4D9C9;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--body);
  font:300 16px/1.7 Jost,system-ui,sans-serif}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:600;
  color:var(--ink);margin:0;letter-spacing:-.005em}
a{color:var(--teal)}

.wrap{width:100%;max-width:var(--inner);margin:0 auto;
  padding-inline:clamp(22px,3.4vw,60px)}

/* --- utility bar, mirroring magensbay.com --- */
/* --- site header: bright teal logo column, dark teal utility strip --- */
.sitehead{display:flex;align-items:stretch;background:var(--white);
  border-bottom:1px solid var(--line)}
.logoblock{background:var(--teal-logo);display:flex;align-items:center;
  justify-content:center;padding:18px 44px;text-decoration:none;flex:0 0 auto}
.logoblock img{display:block;height:74px;width:auto}
.logoblock .fallback{font:600 24px/1.1 "Playfair Display",Georgia,serif;color:#fff;
  text-align:center;display:block}
.logoblock .fallback span{display:block;font:400 10px/1 Jost,sans-serif;
  letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-top:7px}
.headright{flex:1;display:flex;flex-direction:column;min-width:0}
.utility{background:var(--teal-deep);color:rgba(255,255,255,.92);font-size:14px;
  display:flex;gap:30px;align-items:center;flex-wrap:wrap;padding:11px 30px}
.utility a{color:rgba(255,255,255,.92);text-decoration:none}
.utility a:hover{color:#fff}
.utility .spacer{margin-left:auto}
.navrow{flex:1;display:flex;align-items:center;justify-content:flex-end;
  gap:22px;padding:14px 30px}
.navcta{border:2px solid var(--teal);color:var(--teal);font:400 13px/1 Jost,sans-serif;
  letter-spacing:.17em;text-transform:uppercase;padding:14px 26px;text-decoration:none;
  transition:background .16s ease,color .16s ease}
.navcta:hover{background:var(--teal);color:#fff}

@media (max-width:860px){
  .sitehead{flex-direction:column}
  .logoblock{padding:16px 24px;justify-content:flex-start}
  .logoblock img{height:56px}
  .utility{padding:10px 24px;gap:18px;font-size:13px}
  .navrow{padding:12px 24px;justify-content:space-between}
}

/* --- shared display bits --- */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:12px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin-bottom:16px;
  max-width:100%}
.eyebrow::before,.eyebrow::after{flex:0 0 auto}
.eyebrow::before,.eyebrow::after{content:"";width:34px;height:1px;background:var(--teal)}
.sectionhead{margin-bottom:24px}
.sectionhead h2{font-size:27px;margin-bottom:5px}
.sectionhead span{font-size:14px;color:var(--body)}

/* --- date bar --- */
.datebar{background:var(--wash);border-block:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.datebar form{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;
  padding:20px 0}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:11px;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--teal-dk)}
.field input{font:300 15px/1 Jost,sans-serif;padding:12px 13px;border:1px solid var(--line);
  border-radius:0;background:var(--white);color:var(--ink);min-width:180px}
.field input:focus-visible{outline:2px solid var(--teal);outline-offset:0}
.nights{margin-left:auto;font-size:14px;color:var(--body);padding-bottom:13px;
  letter-spacing:.04em}
.nights strong{color:var(--ink);font-weight:500}

/* --- buttons: square, uppercase, letterspaced --- */
.btn{display:inline-block;border:1px solid var(--teal);background:var(--teal);
  color:var(--white);font:400 13px/1 Jost,sans-serif;letter-spacing:.17em;
  text-transform:uppercase;padding:15px 30px;cursor:pointer;text-decoration:none;
  border-radius:0;transition:background .16s ease,color .16s ease}
.btn:hover:not(:disabled){background:var(--white);color:var(--teal)}
.btn.dark{background:var(--teal-dk);border-color:var(--teal-dk)}
.btn.dark:hover{background:var(--white);color:var(--teal-dk)}
.btn:disabled{background:var(--line);border-color:var(--line);color:#9AA8AB;cursor:not-allowed}

/* --- gear cards --- */

.card{position:relative;background:var(--white);border:1px solid var(--line);display:flex;
  flex-direction:column;transition:border-color .16s ease,box-shadow .16s ease}
.card:hover{box-shadow:0 8px 28px rgba(18,38,42,.07)}
.card.chosen{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.card .photo{aspect-ratio:var(--card-photo);background:var(--teal-tint) center/cover no-repeat;
  width:100%;height:auto;object-fit:cover;object-position:center;display:block}
.card .body{padding:19px 20px 21px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:20px;line-height:1.25}
.card .desc{font-size:14px;margin:0;flex:1}
.price{font:500 15px/1 Jost,sans-serif;color:var(--ink);letter-spacing:.03em}
.price small{font-weight:300;font-size:13px;color:var(--body);letter-spacing:.06em}
.stock{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-dk)}
.stock.low{color:var(--alert)}
.soldout{font:400 12px/1 Jost,sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--alert);padding:12px 0}
.leadnote{font-size:13px;line-height:1.6;color:var(--body);background:var(--wash);
  border-left:3px solid var(--teal);padding:10px 12px}
.leadnote a{display:block;margin-top:4px}

.qty{display:flex;align-items:stretch;border:1px solid var(--line);width:fit-content}
.qty button{width:40px;border:0;background:var(--white);font:300 20px/1 Jost,sans-serif;
  color:var(--teal-dk);cursor:pointer}
.qty button:hover:not(:disabled){background:var(--teal-tint)}
.qty button:disabled{color:#C2CCCE;cursor:not-allowed}
.qty output{min-width:46px;text-align:center;font:500 15px/1 Jost,sans-serif;
  color:var(--ink);border-inline:1px solid var(--line);padding:12px 0}

/* --- summary --- */
.summary{background:var(--white);border:1px solid var(--line);position:sticky;top:92px}
.summary .cap{background:var(--teal-dk);color:var(--white);padding:18px 22px}
.summary .cap h2{font-size:19px;color:var(--white)}
.summary .cap p{margin:4px 0 0;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}
.summary .pad{padding:22px}
.lines{list-style:none;margin:0 0 14px;padding:0;font-size:14.5px}
.lines li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.lines .lbl{color:var(--ink)}
.lines .lbl em{font-style:normal;color:var(--body);font-size:12.5px;display:block;
  margin-top:2px}

.totals{font-size:14.5px;margin-top:14px}
.totals div{display:flex;justify-content:space-between;padding:6px 0}
.totals .grand{border-top:1px solid var(--ink);margin-top:10px;padding-top:13px;
  font:500 19px/1.2 Jost,sans-serif;color:var(--ink)}
.feenote{font-size:12px;color:var(--body);margin:4px 0 0}
.totals .off span{color:var(--good)}

/* --- promo code --- */
/* The line-item list already ends on a hairline, so no border needed here. */
.promo{margin-top:4px}
.promo[hidden]{display:none}
.promoToggle{background:none;border:0;padding:0;cursor:pointer;
  font:400 11px/1 Jost,sans-serif;letter-spacing:.21em;text-transform:uppercase;
  color:var(--teal-dk);border-bottom:1px solid var(--line);padding-bottom:3px}
.promoToggle:hover{color:var(--teal);border-bottom-color:var(--teal)}
.promoToggle:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.promoEntry{display:flex;gap:8px;margin-top:12px}
.promoEntry input{flex:1;min-width:0;font:400 15px/1.4 Jost,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;padding:12px 13px;
  border:1px solid var(--line);border-radius:0;background:var(--white);color:var(--ink)}
.promoEntry input::placeholder{letter-spacing:.04em;text-transform:none;
  color:#9AA8AB;font-weight:300}
.promoEntry input:focus-visible{outline:2px solid var(--teal)}
.promoEntry button{flex:0 0 auto;border:1px solid var(--teal-dk);background:var(--white);
  color:var(--teal-dk);font:400 12px/1 Jost,sans-serif;letter-spacing:.17em;
  text-transform:uppercase;padding:0 18px;cursor:pointer;border-radius:0;
  transition:background .16s ease,color .16s ease}
.promoEntry button:hover:not(:disabled){background:var(--teal-dk);color:#fff}
.promoEntry button:disabled{border-color:var(--line);color:#9AA8AB;cursor:not-allowed}
.promoMsg{font-size:13px;line-height:1.55;margin:9px 0 0;color:var(--alert)}
.promoMsg[hidden]{display:none}
.promoOn{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;background:var(--teal-tint);padding:11px 14px}
.promoOn[hidden]{display:none}
.promoOn .tag{font-size:13.5px;color:var(--ink);min-width:0}
.promoOn .tag strong{font-weight:500;letter-spacing:.1em}
.promoOn .tag em{font-style:normal;display:block;color:var(--teal-dk);font-size:12.5px;
  margin-top:2px}
.promoOn button{flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer;
  font:400 11px/1 Jost,sans-serif;letter-spacing:.17em;text-transform:uppercase;
  color:var(--teal-dk);text-decoration:underline;text-underline-offset:3px}
.promoOn button:hover{color:var(--alert)}

.guest{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  display:grid;gap:12px}
.guest h3{font:400 11px/1 Jost,sans-serif;letter-spacing:.21em;
  text-transform:uppercase;color:var(--teal-dk)}
.guest input,.guest textarea{font:300 15px/1.5 Jost,sans-serif;width:100%;
  padding:12px 13px;border:1px solid var(--line);border-radius:0;
  background:var(--white);color:var(--ink)}
.guest textarea{min-height:66px;resize:vertical}
.guest input:focus-visible,.guest textarea:focus-visible{outline:2px solid var(--teal)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.reserve{width:100%;margin-top:18px}
.paynote{font-size:12.5px;color:var(--body);text-align:center;margin:12px 0 0;line-height:1.6}

.reassure{list-style:none;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;
  margin:22px 0 0;padding:0;font-size:14px;color:var(--teal-dk)}
.reassure li{position:relative;padding-left:20px}
.reassure li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:5px;
  border-left:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);
  transform:rotate(-45deg)}
.shipnote{background:var(--teal-tint);border-left:3px solid var(--teal);
  padding:15px 19px;margin-bottom:22px;font-size:14.5px;line-height:1.65}
.shipnote strong{color:var(--ink);font-weight:500}
.notice{background:#FDF4EC;border-left:3px solid #D89A52;padding:16px 20px;margin-bottom:26px}
.notice p{margin:0 0 5px;font-size:14.5px}
.notice p:last-child{margin:0}

/* --- footer: deep teal with contour texture, matching magensbay.com --- */
/* --- supporting content --- */
/* The old supporting-content section is gone. Its .steps and .step rules
   lived here and collided with the booking steps further down. */

footer{background:var(--teal-footer);color:rgba(255,255,255,.86);
  font:300 15px/1.85 Jost,sans-serif;padding:0;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='560' height='420' viewBox='0 0 560 420'>\
<g fill='none' stroke='%23ffffff' stroke-opacity='0.055' stroke-width='1.1'>\
<path d='M-40 120 C 90 60, 190 190, 300 130 S 500 40, 610 110'/>\
<path d='M-40 150 C 95 92, 195 218, 300 160 S 500 74, 610 142'/>\
<path d='M-40 182 C 100 126, 200 248, 300 192 S 500 110, 610 176'/>\
<path d='M-40 250 C 70 300, 210 250, 300 306 S 470 380, 610 330'/>\
<path d='M-40 282 C 74 332, 212 282, 300 338 S 470 412, 610 362'/>\
<ellipse cx='150' cy='168' rx='58' ry='30'/>\
<ellipse cx='150' cy='168' rx='34' ry='17'/>\
<ellipse cx='438' cy='300' rx='66' ry='34'/>\
<ellipse cx='438' cy='300' rx='40' ry='19'/>\
<ellipse cx='438' cy='300' rx='18' ry='8'/>\
</g></svg>")}
.footinner{position:relative;width:100%;max-width:var(--inner);margin:0 auto;
  padding:52px clamp(22px,3.4vw,60px) 30px;
  display:grid;grid-template-columns:auto 1fr auto;gap:52px;align-items:center}
.footlogo img{display:block;height:78px;width:auto}
.footlogo .fallback{font:600 24px/1.15 "Playfair Display",Georgia,serif;color:#fff}
.footlogo .fallback span{display:block;font:400 10px/1 Jost,sans-serif;
  letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:7px}
.footblurb{max-width:56ch;margin:0}
.footsocial{display:flex;gap:12px}
.footsocial a{width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--teal);color:#fff;text-decoration:none;transition:background .16s ease}
.footsocial a.solid{background:var(--teal)}
.footsocial a:hover{background:var(--teal-logo);border-color:var(--teal-logo)}
.footsocial svg{width:19px;height:19px;fill:currentColor;display:block}
.footbase{position:relative;width:100%;max-width:var(--inner);margin:0 auto;
  padding:20px clamp(22px,3.4vw,60px) 34px;border-top:1px solid rgba(255,255,255,.16);
  font-size:14px;color:rgba(255,255,255,.66);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.footbase a{color:rgba(255,255,255,.88);text-decoration:none}
.footbase a:hover{color:#fff}
.footbase .spacer{margin-left:auto}

@media (max-width:860px){
  .footinner{grid-template-columns:1fr;gap:28px;padding:38px 24px 24px;text-align:left}
  .footbase{padding:18px 24px 30px}
}

@media (max-width:920px){
  .summary{position:static}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===================================================================
   Page shell: content column with the reservation rail alongside.
   The rail becomes a normal block on narrow screens and the sticky
   bottom bar takes over as the running total.
   =================================================================== */

.shell{display:block}
.shell > .main{min-width:0}

/* --- hero --- */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(460px,40vw,660px);padding:64px 0;
  background:var(--teal-tint) center/cover no-repeat;overflow:hidden}
.hero > .wrap{position:relative;z-index:2;width:100%}
/* The scrim only needs to cover the column the headline sits in, so it
   holds solid to about the width of the copy and then clears quickly,
   which leaves far more of the photograph visible. */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    var(--white) 0%, rgba(255,255,255,.96) 22%,
    rgba(255,255,255,.82) 34%, rgba(255,255,255,.34) 46%,
    rgba(255,255,255,.06) 56%, rgba(255,255,255,0) 64%)}
.hero .copy{max-width:30rem}
.hero h1{font-size:clamp(34px,4.4vw,54px);line-height:1.08;margin-bottom:16px}
.hero h1 em{display:block;font-style:italic;font-weight:500;color:var(--teal)}
.hero p{margin:0;font-size:17px;max-width:34ch}

.trustrow{display:flex;flex-wrap:wrap;gap:26px 34px;margin:30px 0 0;padding:0;
  list-style:none}
.trustrow li{display:flex;gap:11px;align-items:flex-start}
.trustrow svg{width:21px;height:21px;flex:0 0 auto;stroke:var(--teal);fill:none;
  stroke-width:1.4;margin-top:2px}
.trustrow .k{display:block;font:500 11.5px/1.2 Jost,sans-serif;letter-spacing:.17em;
  text-transform:uppercase;color:var(--teal-dk)}
.trustrow .v{display:block;font-size:13.5px;line-height:1.5;color:var(--body);margin-top:3px}

/* --- product groups --- */
.setup{padding:clamp(38px,4vw,54px) 0 72px}
.grouphead{text-align:center;margin:0 0 26px}
.grouphead .eyebrow{margin-bottom:12px}
.grouphead h2{font-size:clamp(24px,2.6vw,32px);line-height:1.15}
.grouphead p{margin:8px 0 0;font-size:14.5px}
.group + .group{margin-top:54px;padding-top:48px;border-top:1px solid var(--line)}

.gear{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* --- line item remove --- */
.lines li{align-items:flex-start}
.lines .amt{display:flex;align-items:center;gap:10px;white-space:nowrap}
.lines .drop{background:none;border:0;padding:2px;cursor:pointer;line-height:0;
  color:#9AA8AB;transition:color .16s ease}
.lines .drop:hover{color:var(--alert)}
.lines .drop svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}

/* --- payment panel, dormant until a gateway is configured --- */
.paybox{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.paybox h3{font:400 11px/1 Jost,sans-serif;letter-spacing:.21em;
  text-transform:uppercase;color:var(--teal-dk);margin-bottom:12px}
.payframe{min-height:96px}

/* Clover mounts an iframe into each of these. The border and padding are
   ours; the type inside is styled through the SDK's style object in
   index.php, so the two have to be kept in step. */
.payfield{border:1px solid var(--line);background:var(--white);
  padding:4px 13px;margin-bottom:12px;min-height:44px}
.payfield:focus-within{outline:2px solid var(--teal);outline-offset:-1px}
.payfield iframe{display:block;width:100%;height:36px;border:0}
.paytwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.paytwo .payfield{margin-bottom:12px}
.payerr{font-size:13px;line-height:1.55;color:var(--alert);margin:9px 0 0}
.payerr[hidden]{display:none}
.securenote{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12px;color:var(--body);margin:11px 0 0}
.securenote svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}

@media (max-width:1080px){
  .shell{grid-template-columns:1fr}
  .hero{min-height:0;padding:48px 0}
  .hero::after{background:linear-gradient(180deg,
    rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 55%, rgba(255,255,255,.72) 100%)}
  .hero .copy{max-width:none}
}
@media (max-width:640px){
  /* The product grid's own breakpoints live further down. */
  .trustrow{gap:18px}
  .setup{padding:30px 0 48px}
}

/* ===================================================================
   Main navigation
   =================================================================== */

.skiplink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--teal-dk);
  color:#fff;padding:12px 18px;font:400 13px/1 Jost,sans-serif;letter-spacing:.15em;
  text-transform:uppercase;text-decoration:none}
.skiplink:focus{left:0}

.mainnav{margin-right:auto;margin-left:14px}
/* Only the top level is a row. The nested dropdown list must not inherit
   the flex, or its items sit side by side. */
.mainnav ul{list-style:none;margin:0;padding:0}
.mainnav > ul{display:flex;align-items:center;gap:4px}
.mainnav > ul > li{position:relative;display:flex;align-items:center}
.mainnav > ul > li > a{font:500 13px/1 Jost,sans-serif;letter-spacing:.15em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);padding:14px 13px;
  white-space:nowrap;transition:color .16s ease}
.mainnav > ul > li > a:hover,.mainnav > ul > li > a.on{color:var(--teal)}

.dropbtn{background:none;border:0;padding:6px 2px 6px 0;cursor:pointer;line-height:0;
  color:var(--ink);margin-left:-8px}
.dropbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .18s ease}
.dropbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.hasdrop:hover .dropbtn,.dropbtn:hover{color:var(--teal)}

/* The nav row has padding below the menu item, so there is a gap between
   the item and the panel. Crossing it with the mouse would drop the hover
   and close the panel, so each panel carries an invisible bridge over it.
   The bridge is inside the list item, so hovering it counts as hovering
   the item. */
.drop::before,.mega::before{content:"";position:absolute;left:0;right:0;
  bottom:100%;height:24px}

.drop{position:absolute;top:100%;left:0;min-width:224px;background:var(--white);
  display:block;border:1px solid var(--line);box-shadow:0 14px 34px rgba(18,38,42,.11);
  padding:8px 0;margin:0;list-style:none;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.hasdrop:hover .drop,.hasdrop:focus-within .drop,.drop.open{
  opacity:1;visibility:visible;transform:translateY(0)}
.drop li{display:block}
.drop a{display:block;padding:12px 24px;font:400 12.5px/1 Jost,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;color:var(--body);
  white-space:nowrap;transition:background .14s ease,color .14s ease}
.drop a:hover{background:var(--teal-tint);color:var(--teal-dk)}
.drop a.on{background:var(--teal);color:var(--white)}

/* --- burger, hidden until the nav stops fitting --- */
.burger{display:none;background:none;border:1px solid var(--teal-deep);width:46px;height:46px;
  cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--teal-deep);
  transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobilenav{display:none;background:var(--white);border-bottom:1px solid var(--line);
  padding:8px 24px 26px}
.mobilenav ul{list-style:none;margin:0;padding:0}
.mobilenav > ul > li > a{display:block;padding:15px 0;font:500 14px/1 Jost,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line)}
.mobilenav > ul > li > a.on{color:var(--teal)}
.mobilenav ul ul{padding:4px 0 8px 16px}
.mobilenav ul ul a{display:block;padding:11px 0;font:400 13px/1 Jost,sans-serif;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;color:var(--body)}
.mobilenav ul ul a.on{color:var(--teal)}
.mobilenav .btn{width:100%;text-align:center;margin-top:20px}

@media (max-width:1180px){
  .mainnav{display:none}
  .burger{display:flex}
  .mobilenav:not([hidden]){display:block}
}
@media (max-width:560px){
  .navcta{display:none}
  .mobilenav{padding:8px 20px 24px}
}

/* ===================================================================
   Content pages: hero, news listing, article
   =================================================================== */

.pagehero{position:relative;isolation:isolate;padding:56px 0 44px;text-align:center;
  background:var(--wash);border-bottom:1px solid var(--line);margin-bottom:0}
.pagehero h1{font-size:clamp(30px,4vw,46px);line-height:1.12;margin-bottom:12px}
.pagehero p{max-width:56ch;margin:0 auto;font-size:17px}
.pagehero .btn{margin-top:24px}
.pagehero .wrap{position:relative;z-index:2}

/* --- with a photo behind it --- */
.pagehero.photo{background-size:cover;background-position:center;
  border-bottom:0;padding:clamp(70px,9vw,120px) 0 clamp(74px,9vw,124px)}
.pagehero.photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,32,36,.62) 0%, rgba(9,32,36,.46) 45%, rgba(9,32,36,.66) 100%)}
.pagehero.photo h1{color:var(--white);text-shadow:0 2px 22px rgba(9,32,36,.3)}
.pagehero.photo p{color:rgba(255,255,255,.93)}
.pagehero.photo .eyebrow{color:#fff}
.pagehero.photo .eyebrow::before,.pagehero.photo .eyebrow::after{background:rgba(255,255,255,.75)}
.pagehero.photo .btn.dark{background:var(--white);border-color:var(--white);color:var(--teal-dk)}
.pagehero.photo .btn.dark:hover{background:transparent;color:var(--white)}

/* --- listing --- */
.newsgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  padding:48px 0 76px}
.newscard{border:1px solid var(--line);background:var(--white);
  transition:box-shadow .16s ease,border-color .16s ease}
.newscard:hover{box-shadow:0 10px 30px rgba(18,38,42,.08);border-color:var(--teal)}
.newslink{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.newscard .photo{aspect-ratio:3/2;width:100%;height:auto;object-fit:cover;display:block;
  background:var(--teal-tint)}
.newsbody{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.newscard h2{font-size:21px;line-height:1.25}
.newscard .desc{margin:0;font-size:14.5px;flex:1}
.artdate{margin:0;font:400 11.5px/1 Jost,sans-serif;letter-spacing:.19em;
  text-transform:uppercase;color:var(--teal-dk)}
.readmore{font:400 11.5px/1 Jost,sans-serif;letter-spacing:.19em;text-transform:uppercase;
  color:var(--teal);border-bottom:1px solid currentColor;padding-bottom:3px;
  align-self:flex-start;margin-top:4px}

/* --- article --- */
.article{padding:44px 0 20px;max-width:100%}
.article .wrap{max-width:880px}
.backup{display:inline-block;font:400 11.5px/1 Jost,sans-serif;letter-spacing:.19em;
  text-transform:uppercase;text-decoration:none;color:var(--body);margin-bottom:26px}
.backup:hover{color:var(--teal)}
.article h1{font-size:clamp(30px,4.2vw,46px);line-height:1.14;margin:10px 0 0}
.artlede{font-size:19px;line-height:1.65;color:var(--body);margin:18px 0 0;max-width:60ch}
.artimg{width:100%;height:auto;display:block;margin:34px 0 0}
.artbody{margin-top:30px;font-size:17px;line-height:1.85}
.artbody > *:first-child{margin-top:0}
.artbody p{margin:0 0 22px;max-width:66ch}
.artbody h2{font-size:26px;line-height:1.25;margin:38px 0 14px}
.artbody h3{font-size:21px;line-height:1.3;margin:30px 0 12px}
.artbody ul,.artbody ol{margin:0 0 22px;padding-left:22px;max-width:64ch}
.artbody li{margin-bottom:9px}
.artbody img{max-width:100%;height:auto;display:block;margin:30px 0}
.artbody blockquote{margin:30px 0;padding:6px 0 6px 22px;border-left:3px solid var(--teal);
  font-size:19px;line-height:1.7;color:var(--ink)}
.artbody a{color:var(--teal-dk);text-decoration:underline;text-underline-offset:3px}
.notfound{padding:70px 0 90px;text-align:center}

/* --- prev and next --- */
.artnav{border-top:1px solid var(--line);margin-top:34px;padding:26px 0}
.artnav .wrap{max-width:880px;display:flex;justify-content:space-between;gap:30px}
.artnav a{text-decoration:none;color:inherit;max-width:20rem}
.artnav a.next{text-align:right;margin-left:auto}
.artnav span{display:block;font:400 11px/1 Jost,sans-serif;letter-spacing:.19em;
  text-transform:uppercase;color:var(--body);margin-bottom:7px}
.artnav strong{font:400 16px/1.4 "Playfair Display",Georgia,serif;color:var(--ink);
  font-weight:600}
.artnav a:hover strong{color:var(--teal)}

.newscta{background:var(--wash);border-top:1px solid var(--line);
  padding:52px 0;text-align:center}
.newscta h2{font-size:28px;margin-bottom:9px}
.newscta p{margin:0 0 22px}

@media (max-width:1000px){.newsgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .newsgrid{grid-template-columns:1fr;gap:20px;padding-bottom:52px}
  .pagehero{padding:38px 0 30px}
  .artnav .wrap{flex-direction:column;gap:22px}
  .artnav a.next{text-align:left;margin-left:0}
}

/* ===================================================================
   Rentals mega panel
   Full width under the header. The list item goes static so the panel
   measures against .sitehead rather than the menu item itself.
   =================================================================== */

.sitehead{position:relative;z-index:50}
.mainnav > ul > li.hasmega{position:static}

.mega{position:absolute;top:100%;left:0;right:0;background:var(--white);
  border-top:1px solid var(--line);box-shadow:0 18px 40px rgba(18,38,42,.13);
  z-index:60;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.hasmega:hover .mega,.hasmega:focus-within .mega,.mega.open{
  opacity:1;visibility:visible;transform:translateY(0)}

.megainner{width:100%;max-width:var(--inner);margin:0 auto;
  padding:30px clamp(22px,3.4vw,60px) 34px;
  display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:38px;align-items:start}

.megaproducts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:8px}
.megaitem{display:flex;flex-direction:column;gap:10px;padding:10px;text-decoration:none;
  color:inherit;border:1px solid transparent;transition:border-color .14s ease,background .14s ease}
.megaitem:hover{border-color:var(--teal);background:var(--wash)}
.megaitem img,.megaitem .noimg{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  display:block;background:var(--teal-tint)}
.megatext strong{display:block;font:400 15px/1.3 "Playfair Display",Georgia,serif;
  font-weight:600;color:var(--ink)}
.megatext em{display:block;font-style:normal;font:400 12px/1 Jost,sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--teal-dk);margin-top:6px}

.megaside{border-left:1px solid var(--line);padding-left:30px}
.megaside .eyebrow{margin-bottom:12px}
.megaside p{margin:0 0 18px;font-size:14.5px;line-height:1.7}
.megaside .btn{width:100%;text-align:center}
.megaall{display:inline-block;margin-top:14px;font:400 11.5px/1 Jost,sans-serif;
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;color:var(--teal-dk)}
/* Two of these now, so stack rather than letting them wrap mid-phrase. */
.megaside .megaall{display:block}
.megaall:hover{color:var(--teal)}

/* Rentals in the mobile drawer carry their price. */
.mobilenav .mrate{float:right;color:var(--teal-dk);letter-spacing:.1em}

@media (max-width:1180px){.mega{display:none}}
@media (max-width:900px){
  .megainner{grid-template-columns:1fr;gap:24px}
  .megaside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:22px}
}

/* ===================================================================
   Reservation rail
   Header, a body that scrolls, and a foot that stays put so the total
   and the button are reachable without hunting for them.
   =================================================================== */

.dockbody{padding:20px 24px 22px;overflow-y:auto}

.dockfoot{background:var(--wash);border-top:1px solid var(--line);
  padding:18px 24px 22px}

/* --- empty state --- */
.empty{text-align:center;padding:34px 12px 30px;margin:0;
  border:1px dashed var(--line);background:var(--wash)}
.empty[hidden]{display:none}
.empty svg{width:30px;height:30px;stroke:var(--teal);fill:none;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.empty p{margin:12px 0 4px;font:500 14.5px/1.3 Jost,sans-serif;color:var(--ink)}
.empty span{display:block;font-size:13px;line-height:1.6;color:var(--body);max-width:24ch;
  margin:0 auto}

/* --- line items --- */
.lines{list-style:none;margin:0;padding:0;font-size:14.5px}
.lines:empty{display:none}
.lines li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid var(--line)}
.lines li:first-child{padding-top:0}

/* --- totals breakdown --- */
.totals{font-size:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.totals[hidden]{display:none}
.totals div{display:flex;justify-content:space-between;padding:5px 0;color:var(--body)}
.totals .off span{color:var(--good)}

/* --- the pinned total --- */
.dockfoot .grand{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:14px}
.dockfoot .grand span:first-child{font:400 11.5px/1 Jost,sans-serif;letter-spacing:.21em;
  text-transform:uppercase;color:var(--teal-dk)}
.dockfoot .grand span:last-child{font:500 25px/1 Jost,sans-serif;color:var(--ink)}

.reserve{width:100%;margin:0}
.btn.reserve:disabled{background:var(--wash);border-color:var(--line);color:#9AA8AB}
.paynote,.securenote{font-size:12px;line-height:1.6;color:var(--body);
  text-align:center;margin:11px 0 0}

/* --- guest fields, tightened --- */
.guest{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:10px}
.guest h3{font:400 11px/1 Jost,sans-serif;letter-spacing:.21em;text-transform:uppercase;
  color:var(--teal-dk);margin-bottom:2px}
.guest input,.guest textarea{font:300 14.5px/1.5 Jost,sans-serif;width:100%;
  padding:11px 12px;border:1px solid var(--line);border-radius:0;
  background:var(--white);color:var(--ink)}
.guest textarea{min-height:58px;resize:vertical}
.two{gap:10px}

.promo{margin-top:16px}

/* ===================================================================
   Four across.
   The shell is capped and the rail is fixed, so these cards sit at
   roughly 264px on every screen. Type and padding are sized for that
   rather than scaled down from a wider card.
   =================================================================== */

.card .body{padding:15px 16px 17px;gap:8px}
.card h3{font-size:17.5px;line-height:1.22;letter-spacing:-.01em}
.card .desc{font-size:13.5px;line-height:1.55}
.price{font-size:14.5px}
.price small{font-size:12px}
.stock{font-size:11px;letter-spacing:.09em}
.soldout{font-size:11px;padding:9px 0}
.leadnote{font-size:12.5px;line-height:1.5;padding:9px 10px}

.qty button{width:34px;font-size:18px}
.qty output{min-width:38px;padding:10px 0;font-size:14.5px}

/* There are four beach rentals, so a three column grid always strands one
   on a row of its own. The grid never uses three: four while there is room,
   then two, which stays even, then one. */
@media (max-width:1400px){.gear{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (max-width:1080px){.gear{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@media (max-width:900px) {.gear{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (max-width:460px) {.gear{grid-template-columns:1fr}}

/* ===================================================================
   Transport: one wide card per row, photo beside the detail.
   It is a different decision from a beach chair and it carries more to
   explain, so it gets the width instead of a cramped column.
   =================================================================== */

.group.wide .gear{grid-template-columns:1fr;gap:18px}
.group.wide .card{flex-direction:row;align-items:stretch}
/* The photo stretches to whatever height the details need and crops to fit,
   so a portrait source cannot drive the card height. */
.group.wide .card .photo{flex:0 0 38%;max-width:430px;width:38%;
  aspect-ratio:auto;height:auto;min-height:100%;align-self:stretch;
  object-fit:cover;object-position:center}
.group.wide .card .body{padding:28px 32px;gap:12px;justify-content:center;
  min-height:290px}
.group.wide .card h3{font-size:26px;line-height:1.2}
.group.wide .card .desc{font-size:15.5px;line-height:1.7;max-width:54ch;flex:0 0 auto}
.group.wide .price{font-size:19px}
.group.wide .price small{font-size:13px}
.group.wide .stock{font-size:12px;letter-spacing:.13em}
.group.wide .leadnote{font-size:14px;line-height:1.65;padding:13px 16px;max-width:52ch}
.group.wide .qty button{width:42px;font-size:20px}
.group.wide .qty output{min-width:46px;padding:12px 0;font-size:15px}

@media (max-width:760px){
  .group.wide .card{flex-direction:column}
  .group.wide .card .photo{width:100%;max-width:none;flex:0 0 auto;aspect-ratio:4/3;
    height:auto;align-self:auto}
  .group.wide .card .body{min-height:0}
  .group.wide .card .body{padding:18px 20px 22px}
  .group.wide .card h3{font-size:21px}
  .group.wide .card .desc{font-size:14.5px}
}

/* ===================================================================
   Highlight ribbon
   A flat tag on the photo, square and letterspaced like the buttons,
   so it reads as part of the system rather than a sticker.
   =================================================================== */

.ribbon{position:absolute;top:14px;left:0;z-index:3;
  background:var(--teal);color:var(--white);
  font:500 10.5px/1 Jost,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 13px 7px;box-shadow:0 2px 10px rgba(18,38,42,.18);pointer-events:none}

.group.wide .ribbon{top:20px;font-size:11.5px;padding:10px 16px 9px;letter-spacing:.22em}

@media (max-width:440px){
  .ribbon{top:12px;font-size:10px;padding:7px 11px 6px}
}

/* ===================================================================
   Gift shop band
   Warm sand, a small category row on the left, and a collage on the
   right where the cut out towel and hat break past the bottom edge.
   =================================================================== */

.shopband{position:relative;z-index:1;background:var(--sand);
  color:var(--body);border-top:1px solid var(--sand-line)}
.shopband::before{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='560' height='420' viewBox='0 0 560 420'>\
<g fill='none' stroke='%238B7355' stroke-opacity='0.07' stroke-width='1.1'>\
<path d='M-40 120 C 90 60, 190 190, 300 130 S 500 40, 610 110'/>\
<path d='M-40 150 C 95 92, 195 218, 300 160 S 500 74, 610 142'/>\
<path d='M-40 182 C 100 126, 200 248, 300 192 S 500 110, 610 176'/>\
<path d='M-40 250 C 70 300, 210 250, 300 306 S 470 380, 610 330'/>\
<path d='M-40 282 C 74 332, 212 282, 300 338 S 470 412, 610 362'/>\
<ellipse cx='150' cy='168' rx='58' ry='30'/>\
<ellipse cx='150' cy='168' rx='34' ry='17'/>\
<ellipse cx='438' cy='300' rx='66' ry='34'/>\
<ellipse cx='438' cy='300' rx='40' ry='19'/>\
<ellipse cx='438' cy='300' rx='18' ry='8'/>\
</g></svg>")}

.shopinner{position:relative;z-index:1;width:100%;max-width:var(--inner);margin:0 auto;
  padding:60px clamp(22px,3.4vw,60px) 64px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:clamp(28px,3.4vw,56px);align-items:center}

/* The home page band carries a collage rather than an aside, so it gives
   the right hand column much more room. */
.collage .shopinner{grid-template-columns:minmax(0,1fr) minmax(0,52%);
  padding:64px clamp(22px,3.4vw,60px) 70px}
.collage.noart .shopinner{grid-template-columns:1fr;max-width:760px;text-align:center}

.shopcopy .eyebrow{margin-bottom:16px}
.collage .shopcopy h2{font-size:clamp(30px,3.6vw,46px);line-height:1.12}
.collage .shopcopy h2 em{display:block;font-style:italic;font-weight:500;color:var(--teal)}
.shopcopy p{margin:0;font-size:16.5px;line-height:1.75;max-width:44ch}
.collage.noart .shopcopy p{margin-inline:auto}
.collage .shopcopy .btn{display:inline-flex;align-items:center;gap:11px;margin-top:6px}
.shopcopy .btn:hover{background:var(--white);color:var(--teal-dk)}
.collage .shopcopy .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

/* --- the three little category tiles --- */
.shopcats{list-style:none;margin:30px 0 30px;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:34rem}
.collage.noart .shopcats{margin-inline:auto}
.shopcats li{display:grid;gap:9px;text-align:center}
.shopcats .sck{font:500 11px/1.2 Jost,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-dk)}
.shopcats a{display:block;overflow:hidden;background:var(--white);padding:5px;
  box-shadow:0 4px 14px rgba(74,58,38,.1);transition:transform .18s ease}
.shopcats a:hover{transform:translateY(-3px)}
.shopcats img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.shopcats .scv{font-size:13px;line-height:1.4;color:var(--body)}

/* --- the collage --- */
/* The collage is a fixed shape and every layer is a percentage of it, so
   nothing can grow past the band except the cut out, which is meant to. */
.shopart{position:relative;width:100%;aspect-ratio:4/3}

.shopart .artA,.shopart .artB{position:absolute;display:block;
  background:var(--white);padding:9px;object-fit:cover;
  box-shadow:0 16px 40px rgba(74,58,38,.18)}
.shopart .artA{width:54%;height:72%;top:0;left:2%;transform:rotate(-1.5deg)}
.shopart .artB{width:38%;height:54%;top:22%;right:0;transform:rotate(2.5deg)}

/* The cut out has no frame and no mat, and hangs past the bottom edge. */
.shopart .artSet{position:absolute;width:64%;height:auto;left:6%;bottom:-9%;
  background:none;padding:0;box-shadow:none;
  filter:drop-shadow(0 20px 24px rgba(74,58,38,.3));z-index:2}

@media (max-width:1080px){
  /* The collage grid is set with a two class selector, so it has to be
     unset with one too or it wins inside the media query. */
  .shopinner,.collage .shopinner{grid-template-columns:1fr;gap:34px;
    padding:48px clamp(22px,3.4vw,60px) 56px}
  .collage .shopart{max-width:600px;margin:0 auto;order:-1}
  .shopart .artSet{bottom:-6%}
}
@media (max-width:640px){
  .collage .shopinner{padding-bottom:46px}
  .collage .shopcopy h2{font-size:clamp(27px,7.4vw,34px)}
  .collage .shopcopy p{font-size:15.5px}
  .collage .shopcopy .btn{width:100%;justify-content:center;text-align:center;
    padding-inline:18px}

  /* Three tiles still fit, with the labels under the picture where a
     narrow column cannot make them collide. */
  .shopcats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0 26px}
  .shopcats li{gap:6px}
  .shopcats .sck{display:none}
  .shopcats .scv{font-size:11.5px;line-height:1.35}
  .shopcats a{padding:4px}

  .shopart .artA{width:56%;height:70%}
  .shopart .artB{width:42%;height:52%}
  .shopart .artSet{width:72%;bottom:-3%}
}

/* ===================================================================
   Split section: tall photo one side, copy the other.
   Reusable by any content page that needs to show a thing and describe it.
   =================================================================== */

.split{padding:clamp(44px,5vw,72px) 0 clamp(48px,5vw,74px)}
.splitinner{width:100%;max-width:var(--inner);margin:0 auto;
  padding-inline:clamp(22px,3.4vw,60px);
  display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);
  gap:clamp(34px,5vw,80px);align-items:center}
.split.flip .splitphoto{order:2}

.splitphoto img,.splitphoto .noimg{display:block;width:100%;height:auto;
  aspect-ratio:4/5;object-fit:cover;background:var(--teal-tint)}

.splitcopy h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;margin-bottom:18px}
.splitcopy > p{margin:0;font-size:17px;line-height:1.8;max-width:52ch}

/* Eyebrow with a single rule, so it reads as a label rather than a banner. */
.eyebrow.one::after{display:none}

/* Two columns of arrow-led categories. */
.arrows{list-style:none;margin:34px 0 32px;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 30px;
  max-width:34rem}
.arrows li{position:relative;padding-left:30px;
  font:500 16px/1.4 Jost,sans-serif;color:var(--ink);letter-spacing:.01em}
.arrows li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:9px;
  background:var(--teal);
  clip-path:polygon(0 38%,62% 38%,62% 0,100% 50%,62% 100%,62% 62%,0 62%)}

@media (max-width:900px){
  .split{padding:40px 0 44px}
  .splitinner{grid-template-columns:1fr;gap:30px}
  .split.flip .splitphoto{order:0}
  .splitphoto img,.splitphoto .noimg{aspect-ratio:4/3}
  .arrows{grid-template-columns:repeat(2,minmax(0,1fr));margin:26px 0 26px}
}
@media (max-width:520px){
  .arrows{grid-template-columns:1fr;gap:13px}
}

/* The sand band carries a second column on this page. */
.shopaside{background:var(--white);border:1px solid var(--sand-line);padding:30px 32px}
.shopaside h3{font-size:20px;margin-bottom:10px}
.shopaside p{margin:0 0 16px;font-size:15px;line-height:1.7}
.shopcontact{display:grid;gap:8px;margin:0}
.shopcontact a{color:var(--teal-dk);text-decoration:none;font:500 16px/1.4 Jost,sans-serif;
  letter-spacing:.02em}
.shopcontact a:hover{color:var(--teal)}
.shopnote{font-size:14px;line-height:1.7;color:var(--body);
  border-left:3px solid var(--sand-line);padding-left:16px;margin:0 0 24px}

/* ===================================================================
   Inquiry form, used inside a sand band
   =================================================================== */

/* The copy is short and the form is tall, so centre them against each
   other rather than letting the left column trail off into nothing. */
.formband{align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,520px)}
.formband .shopcopy .arrows{margin:26px 0 24px;max-width:26rem}

.eventform{background:var(--white);border:1px solid var(--sand-line);padding:30px 32px 32px}
.eventform form{display:grid;gap:17px}

/* Label and its optional marker share one line, so every field row starts
   at the same height and the two columns stay level. */
.eventform label{display:grid;gap:7px}
.eventform .lab{display:flex;align-items:baseline;gap:9px;
  font:500 11.5px/1.2 Jost,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-dk);white-space:nowrap}
.eventform .lab em{font-style:normal;font-weight:300;font-size:11px;letter-spacing:.04em;
  text-transform:lowercase;color:#9AA8AB}

.eventform input,.eventform textarea{font:300 15px/1.5 Jost,sans-serif;width:100%;
  padding:12px 13px;border:1px solid var(--line);border-radius:0;
  background:var(--white);color:var(--ink);letter-spacing:normal;text-transform:none;
  transition:border-color .16s ease}
.eventform input:hover,.eventform textarea:hover{border-color:#C7D4D6}
.eventform textarea{resize:vertical;min-height:120px}
.eventform input:focus-visible,.eventform textarea:focus-visible{outline:2px solid var(--teal);
  outline-offset:0;border-color:var(--teal)}
.eventform .two{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.eventform .btn{margin-top:8px;justify-self:stretch;text-align:center}
.eventform .notice{margin-bottom:18px}

/* Shown in place of the booking steps when BOOKINGS_OPEN is false. Deliberately
   calm rather than alarming: the club is open, the website just isn't selling. */
.closedband{max-width:620px;margin:0 auto;padding:64px 0 76px;text-align:center}
.closedband h2{font:400 30px/1.25 'Playfair Display',Georgia,serif;
  color:var(--ink);margin:14px 0 16px}
.closedband p{font-size:16px;line-height:1.75;color:var(--body);margin:0 auto;max-width:52ch}
.closedacts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:28px 0 0}
.closednote{margin-top:22px;font-size:14.5px}
@media (max-width:700px){
  .closedband{padding:40px 20px 52px}
  .closedband h2{font-size:25px}
  .closedacts .btn{flex:1 1 100%}
}

/* Honeypot: present in the DOM, never on the screen. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Reservation lookup. A narrow column: two fields and a button, with nothing
   else competing for attention. */
.findpage{max-width:540px;margin:0 auto;padding:56px 0 72px}
.findpage .eventform input{text-transform:uppercase}
.findpage .eventform input[name="last"]{text-transform:none}
.findnote{margin:20px 0 0;font-size:14.5px;line-height:1.75;color:var(--body)}
@media (max-width:700px){
  .findpage{padding:34px 0 52px}
}

.sentbox{border-left:3px solid var(--teal);background:var(--wash);padding:20px 22px}
.sentbox h3{font-size:21px;margin-bottom:9px}
.sentbox p{margin:0;font-size:15px;line-height:1.7}

@media (max-width:900px){
  .formband{grid-template-columns:1fr}
}
@media (max-width:560px){
  .eventform{padding:22px 20px 24px}
  .eventform .two{grid-template-columns:1fr}
}

/* ===================================================================
   Booking steps
   A label column on the left carrying the number and the question, and
   the options on the right. The steps are signposts on one page, not a
   wizard: nothing is hidden and nothing needs a click to reveal.
   =================================================================== */

.steps{padding:8px 0 64px}

.step{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);padding:38px 0;align-items:start}
.step + .step{border-top:1px solid var(--line)}

.stepbody{min-width:0}
.stepside{position:sticky;top:24px}
.stepno{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--teal);color:var(--white);
  font:500 15px/1 Jost,sans-serif;margin-bottom:14px}
.stepside h2{font-size:clamp(21px,2.1vw,26px);line-height:1.18}
.stepside h2 em{display:block;font:300 11.5px/1 Jost,sans-serif;font-style:normal;
  letter-spacing:.19em;text-transform:uppercase;color:#9AA8AB;margin-top:8px}
.stepside p{margin:10px 0 0;font-size:14.5px;line-height:1.65;max-width:26ch}

/* --- step one: the date --- */
.daypick{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
  background:var(--wash);border:1px solid var(--line);padding:22px 24px}
.daypick .field{gap:8px}
.daypick .field input{min-width:190px}
.daypick .daynote{width:100%;margin:2px 0 0;font-size:14.5px;color:var(--body);
  letter-spacing:.02em}
.daypick .daynote strong{color:var(--ink);font-weight:500}
.step .shipnote{margin:18px 0 0}

/* --- getting here: two tiles, pick one --- */
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  border:1px solid var(--line);background:var(--white);padding:22px 24px;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.choice:hover{border-color:var(--teal)}
.choice.on{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal);background:var(--wash)}
.choice.off{opacity:.72;cursor:default}
.choice.off:hover{border-color:var(--line)}

.cico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--teal-tint)}
.cico svg{width:23px;height:23px;stroke:var(--teal-dk);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.ctext h3{font-size:18px;line-height:1.25;margin-bottom:6px}
.ctext p{margin:0;font-size:14px;line-height:1.6}
.cprice{display:block;margin-top:10px;font:500 19px/1 Jost,sans-serif;color:var(--ink)}
.cprice small{font-weight:300;font-size:12.5px;color:var(--body);letter-spacing:.05em}
.cnote{display:block;margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--alert)}
.cnote a{color:var(--teal-dk)}
.choice .qty{grid-column:2;margin-top:14px}
.choice .qty[hidden]{display:none}

@media (max-width:1080px){
  .stepside{position:static}
}
@media (max-width:820px){
  .step{grid-template-columns:1fr;gap:18px;padding:30px 0}
  .stepside p{max-width:none}
  .stepno{margin-bottom:10px}
  .choices{grid-template-columns:1fr}
}

/* The date field is the control now, so give it room and show that
   something is happening between changing it and the page coming back. */
.daypick{position:relative}
.daypick .field{flex:1;min-width:0}
.daypick .field input{min-width:0;width:100%;max-width:290px;font-size:16px;
  padding:14px 15px}
.daypick.loading{opacity:.55;pointer-events:none}
.daypick.loading::after{content:"Checking availability…";position:absolute;
  right:24px;bottom:22px;font:400 13px/1 Jost,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal-dk)}

/* ===================================================================
   The dock
   A summary bar fixed to the foot of the page. Tapping it opens the
   whole reservation upward: line items, promo, guest details and the
   button. It is one form in both states, so nothing about the booking
   POST changes.
   =================================================================== */

body.docked{overflow:hidden}

.dockback{position:fixed;inset:0;z-index:70;background:rgba(9,32,36,.42);
  backdrop-filter:blur(2px)}
.dockback[hidden]{display:none}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:80}

/* --- the bar --- */
.dockbar{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:20px;background:var(--ink);color:var(--white);border:0;cursor:pointer;
  padding:14px clamp(18px,3.4vw,60px);text-align:left;
  box-shadow:0 -8px 30px rgba(9,32,36,.22)}
/* Icon, then the two lines of text beside it. The cart mark is what makes
   the bar read as a cart rather than a status strip a guest can ignore. */
.dbleft{min-width:0;display:flex;align-items:center;gap:14px}
.dbcart{flex:0 0 auto;width:26px;height:26px;stroke:var(--teal);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dbcart circle{fill:var(--teal);stroke:none}
.dbtext{min-width:0}
.dbk{display:block;font:400 11.5px/1 Jost,sans-serif;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:6px}
.dbv{display:block;font:300 16.5px/1.35 Jost,sans-serif;color:rgba(255,255,255,.94);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52vw}
.dbright{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.dbtotal{font:500 22px/1 Jost,sans-serif}
.dbgo{display:flex;align-items:center;gap:9px;background:var(--teal);
  padding:14px 22px;font:400 12.5px/1 Jost,sans-serif;letter-spacing:.15em;
  text-transform:uppercase}
.dbgo[hidden]{display:none}
.dbgo svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .2s ease}
.dockbar[aria-expanded="true"] .dbgo svg{transform:rotate(180deg)}
.dock:not(.has) .dockbar{cursor:default}

/* --- the panel --- */
.dockpanel{background:var(--white);border-top:1px solid var(--line);
  max-height:min(78vh,760px);overflow-y:auto;overscroll-behavior:contain}
.dockpanel[hidden]{display:none}
.dockinner{width:100%;max-width:var(--inner);margin:0 auto;
  padding-inline:clamp(22px,3.4vw,60px)}

.dockhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0 16px;border-bottom:1px solid var(--line)}
.dockhead h2{font-size:23px}
.dockhead p{margin:5px 0 0;font-size:12.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--body)}
.dockclose{background:none;border:1px solid var(--line);width:40px;height:40px;
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto;color:var(--body)}
.dockclose:hover{border-color:var(--teal);color:var(--teal-dk)}
.dockclose svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}

/* Two columns inside the panel: what you chose, and who you are. */
.dockpanel form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(24px,3.4vw,56px);align-items:start;padding-bottom:8px}
.dockbody{padding:22px 0 24px;overflow:visible}
.dockfoot{background:transparent;border-top:0;padding:22px 0 26px;
  position:sticky;top:0}

@media (max-width:900px){
  .dockpanel form{grid-template-columns:1fr;gap:0}
  .dockbody{padding:18px 0 8px}
  .dockfoot{padding:14px 0 22px;position:static}
  .dbtotal{font-size:19px}
  .dbgo{padding:12px 16px;font-size:11.5px}
  .dbgo span{display:none}
  .dbv{max-width:42vw;font-size:15px}
}
@media (max-width:560px){
  .dockbar{padding:12px 18px;gap:12px}
  .dbright{gap:12px}
  .dbgo svg{width:13px;height:13px}
  .dbleft{gap:10px}
  .dbcart{width:22px;height:22px}
  .dbk{font-size:10.5px;margin-bottom:4px}
  .dbv{font-size:14px}
}

/* Message under the date field: what changed when the day changed. */
.daymsg{width:100%;margin:4px 0 0;font-size:14px;line-height:1.6;color:var(--body)}
.daymsg[hidden]{display:none}
.daymsg.warn{color:var(--alert);background:#FDF4EC;border-left:3px solid #D89A52;
  padding:11px 14px}
.stock[hidden],.leadnote[hidden],.soldout[hidden],.cprice[hidden],.cnote[hidden]{display:none}

/* ===================================================================
   FAQ
   Native details elements, so it works before any script runs and
   the browser's own find-in-page can open them.
   =================================================================== */

.faqwrap{max-width:860px;margin:0 auto;padding:clamp(40px,4.4vw,64px) 0 clamp(48px,5vw,72px)}

.faqgroup + .faqgroup{margin-top:44px}
.faqgroup > h2{font-size:clamp(20px,2vw,25px);line-height:1.2;margin-bottom:6px;
  padding-bottom:14px;border-bottom:2px solid var(--teal)}

.faqwrap details{border-bottom:1px solid var(--line)}
.faqwrap summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;
  justify-content:space-between;gap:20px;padding:19px 0;
  font:400 17.5px/1.45 "Playfair Display",Georgia,serif;font-weight:600;color:var(--ink);
  transition:color .16s ease}
.faqwrap summary::-webkit-details-marker{display:none}
.faqwrap summary:hover{color:var(--teal-dk)}
.faqwrap summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* A plus that becomes a minus, drawn rather than typed so it stays put. */
.faqwrap summary::after{content:"";flex:0 0 auto;width:15px;height:15px;margin-top:6px;
  background:
    linear-gradient(var(--teal),var(--teal)) center/15px 1.6px no-repeat,
    linear-gradient(var(--teal),var(--teal)) center/1.6px 15px no-repeat;
  transition:transform .2s ease}
.faqwrap details[open] summary::after{transform:rotate(90deg);
  background:linear-gradient(var(--teal),var(--teal)) center/15px 1.6px no-repeat}

.faqa{padding:0 0 22px;max-width:68ch}
.faqa p{margin:0;font-size:16px;line-height:1.8}
.faqa a{color:var(--teal-dk);text-decoration:underline;text-underline-offset:3px}

@media (max-width:640px){
  .faqwrap summary{font-size:16px;padding:16px 0;gap:14px}
  .faqa p{font-size:15px}
  .faqgroup + .faqgroup{margin-top:34px}
}
@media (prefers-reduced-motion:reduce){
  .faqwrap summary::after{transition:none}
}

/* ===================================================================
   Policy page
   Each rule is its own block with a heading that states the outcome,
   so someone scanning for "can I get my money back" finds it without
   reading a paragraph.
   =================================================================== */

.policy{max-width:780px;margin:0 auto;padding:clamp(38px,4.4vw,60px) 0 clamp(46px,5vw,68px)}
.policy .lede{font-size:18px;line-height:1.8;color:var(--body);margin:0 0 40px;
  max-width:62ch}

.polgroup + .polgroup{margin-top:44px}
.polgroup > h2{font-size:clamp(20px,2vw,25px);line-height:1.2;margin-bottom:20px;
  padding-bottom:13px;border-bottom:2px solid var(--teal)}

.polrule{border-left:3px solid var(--line);padding:2px 0 2px 20px;margin-bottom:22px}
.polrule.good{border-left-color:var(--teal)}
.polrule h3{font-size:18px;line-height:1.3;margin-bottom:7px}
.polrule.good h3{color:var(--teal-dk)}
.polrule p{margin:0;font-size:16px;line-height:1.75;max-width:62ch}

.polhow{margin:26px 0 0;font-size:15px;line-height:1.7;background:var(--wash);
  border:1px solid var(--line);padding:15px 18px}
.polhow a{color:var(--teal-dk)}
.polend{margin:44px 0 0;padding-top:26px;border-top:1px solid var(--line);
  font-size:16px;line-height:1.75;color:var(--body)}

@media (max-width:640px){
  .policy .lede{font-size:16.5px;margin-bottom:30px}
  .polrule{padding-left:16px}
  .polrule p{font-size:15px}
}

/* ===================================================================
   Floating help button
   Sits bottom right on every page. On the home page the reservation
   dock owns the bottom of the screen, so this lifts above it.
   =================================================================== */

.helpdock{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);
  z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:14px}

/* The home page carries the booking dock, so clear its height. The class
   is set by the script; the :has rule covers the moment before it runs. */
body:has(.dock) .helpdock,
body.has-dock .helpdock{bottom:calc(clamp(16px,2.4vw,28px) + 78px)}
body.docked .helpdock{display:none}

.helpbtn{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:var(--teal);color:var(--white);display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(14,155,164,.42);
  transition:background .18s ease,transform .18s ease}
.helpbtn:hover{background:var(--teal-dk);transform:translateY(-2px)}
.helpbtn:focus-visible{outline:3px solid var(--teal-dk);outline-offset:3px}
.helpbtn svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
.helpbtn .hb-shut{display:none}
.helpbtn[aria-expanded="true"] .hb-open{display:none}
.helpbtn[aria-expanded="true"] .hb-shut{display:block}

/* --- the panel --- */
.helppanel{width:min(340px,calc(100vw - 32px));background:var(--white);
  border:1px solid var(--line);box-shadow:0 22px 54px rgba(18,38,42,.2);
  padding:22px 22px 18px}
.helppanel[hidden]{display:none}

.helphead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-bottom:16px}
.helphead .eyebrow{margin-bottom:8px}
.helphead h2{font-size:22px;line-height:1.2}
.helpclose{background:none;border:0;padding:4px;cursor:pointer;color:var(--body);
  line-height:0}
.helpclose:hover{color:var(--teal-dk)}
.helpclose svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}

.helplist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.helplist a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;
  align-items:center;padding:12px 13px;border:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:border-color .16s ease,background .16s ease}
.helplist a:hover{border-color:var(--teal);background:var(--wash)}
.helpico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--teal-tint)}
.helpico svg{width:19px;height:19px;stroke:var(--teal-dk);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.helptext strong{display:block;font:500 15px/1.3 Jost,sans-serif;color:var(--ink)}
.helptext em{display:block;font-style:normal;font-size:12.5px;line-height:1.4;
  color:var(--body);margin-top:2px}
.helpgo{width:15px;height:15px;stroke:#9AA8AB;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.helplist a:hover .helpgo{stroke:var(--teal)}

.helpfoot{margin:15px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--body)}

@media (max-width:560px){
  .helpbtn{width:52px;height:52px}
  .helpbtn svg{width:22px;height:22px}
  .helppanel{padding:18px 18px 16px}
  .helphead h2{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .helpbtn:hover{transform:none}
}

/* ===================================================================
   Contact page
   =================================================================== */

.contactgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,52%);
  gap:clamp(30px,4vw,64px);align-items:center;
  padding:clamp(40px,4.4vw,64px) 0 clamp(44px,4.4vw,66px)}

.cways h2{font-size:clamp(26px,3vw,36px);line-height:1.15;margin-bottom:28px}

.waylist{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.waylist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  align-items:start}
.wayico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--teal-tint)}
.wayico svg{width:22px;height:22px;stroke:var(--teal-dk);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.waylist h3{font:500 11.5px/1 Jost,sans-serif;letter-spacing:.19em;
  text-transform:uppercase;color:var(--teal-dk);margin-bottom:8px}
.waybig{display:block;font:500 20px/1.3 Jost,sans-serif;color:var(--ink);
  text-decoration:none;letter-spacing:.01em;word-break:break-word}
a.waybig:hover{color:var(--teal)}
.waylist p{margin:6px 0 0;font-size:14.5px;line-height:1.6}
.waylist p a{color:var(--teal-dk)}

/* --- map --- */
.cmap{border:1px solid var(--line);background:var(--teal-tint);line-height:0}
.cmap iframe{display:block;width:100%;aspect-ratio:4/3;border:0}

/* ===================================================================
   Review band
   The stars fill one after another when the band is hovered, which is
   the only piece of movement on the site and earns it by being the ask.
   =================================================================== */

.reviewband{background:var(--teal-dk);color:rgba(255,255,255,.9);
  padding:clamp(46px,5vw,68px) 0;text-align:center}
.reviewinner{max-width:640px;margin:0 auto}
.reviewband h2{color:var(--white);font-size:clamp(25px,3vw,34px);line-height:1.18;
  margin-bottom:12px}
.reviewband p{margin:0 auto 28px;font-size:16px;line-height:1.75;max-width:52ch}

.stars{display:flex;justify-content:center;gap:9px;margin-bottom:22px}
.stars svg{width:34px;height:34px;fill:none;stroke:rgba(255,255,255,.55);
  stroke-width:1.4;stroke-linejoin:round;
  transition:fill .3s ease,stroke .3s ease,transform .3s ease;
  transition-delay:var(--d)}
.reviewband:hover .stars svg{fill:#F7C948;stroke:#F7C948;transform:translateY(-4px) scale(1.08)}

.reviewband .btn{display:inline-flex;align-items:center;gap:11px;
  background:var(--white);border-color:var(--white);color:var(--teal-dk)}
.reviewband .btn:hover{background:transparent;color:var(--white);border-color:var(--white)}
.reviewband .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

@media (max-width:900px){
  .contactgrid{grid-template-columns:1fr;gap:32px}
  .cmap iframe{aspect-ratio:16/10}
}
@media (max-width:560px){
  .waybig{font-size:18px}
  .stars svg{width:28px;height:28px}
  .stars{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .stars svg{transition:none;transition-delay:0s}
  .reviewband:hover .stars svg{transform:none}
}

/* --- Google rating in the hero trust row --- */
.trustrow .rated{align-items:flex-start}
.ratestars{display:flex;gap:2px;flex:0 0 auto;margin-top:1px}
.ratestars svg{width:13px;height:13px;fill:#F7C948;stroke:none}
.trustrow .rated .v a{color:var(--body);text-decoration:none;
  border-bottom:1px solid rgba(76,92,97,.35);padding-bottom:1px;
  transition:color .16s ease,border-color .16s ease}
.trustrow .rated .v a:hover{color:var(--teal-dk);border-bottom-color:var(--teal)}