/* Punta Base landing. Tokens from brand/Punta Base.pdf p.7-9. Light only: the scene is direct sun. */
@font-face{font-family:Montserrat;src:url(assets/fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/barlow-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --navy:#0B384F; --navy-deep:#082A3B; --cream:#F5F0E4; --sand:#E4DAC8;
  --clay:#B8593A; --clay-lt:#D9A48A; --white:#fff; --ink-2:#2C5266;
  --r:2px; --tap:48px; --shadow:0 1px 2px rgba(8,42,59,.10);
  --f-d:Montserrat,system-ui,sans-serif; --f-b:Barlow,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:max(clamp(16px,4vw,40px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --wave-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath d='M0 20q60-24 120 0t120 0' fill='none' stroke='%230B384F' stroke-width='2'/%3E%3C/svg%3E");
  --wave-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' viewBox='0 0 240 24'%3E%3Cpath d='M0 12q60-24 120 0t120 0V24H0z' fill='%230B384F'/%3E%3C/svg%3E");
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%;scrollbar-color:var(--navy) var(--cream)}
body{margin:0;background:var(--cream);color:var(--navy);font:400 1.125rem/1.6 var(--f-b);caret-color:var(--clay);accent-color:var(--navy);-webkit-tap-highlight-color:transparent}
::selection{background:var(--navy);color:var(--cream)}
img{display:block;max-width:100%;height:auto}
a,button,label,input,textarea,summary{touch-action:manipulation}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
h1,h2,h3{font-family:var(--f-d);margin:0;text-wrap:balance}
p{margin:0;max-width:68ch}
.wrap{width:min(1160px,100% - 2*var(--gut));margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:var(--cream);padding:12px 16px;z-index:50}
.skip:focus{left:8px}

/* icons: one 2.5px line weight, echoing the engraving */
[data-icon] svg,.ico svg{width:100%;height:100%;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
[data-icon]{display:inline-block;flex:none}

/* buttons: radius 2, 48px min, clay only for the single primary action */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border:2px solid var(--navy);border-radius:var(--r);font:600 .9375rem/1 var(--f-d);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;background:transparent;color:var(--navy);transition:background .2s,color .2s,border-color .2s}
.btn [data-icon]{width:22px;height:22px}
.btn-primary{background:var(--clay);border-color:var(--clay);color:var(--white)}
.btn:active{transform:translateY(1px)}
.btn-primary:active{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.btn-ghost:active{background:var(--navy);color:var(--cream)}
.btn-sm{min-height:48px;padding:0 16px}
.btn-block{width:100%}
.summary .btn-primary:active{background:var(--cream);border-color:var(--cream);color:var(--navy)}
@media(hover:hover){ /* a touch tap must not leave a stuck hover state */
  .btn-primary:hover{background:var(--navy);border-color:var(--navy);color:var(--cream)}
  .btn-ghost:hover{background:var(--navy);color:var(--cream)}
  .summary .btn-primary:hover{background:var(--cream);border-color:var(--cream);color:var(--navy)}
}

/* header */
.top{transition:transform .25s var(--ease);position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px max(var(--gut),(100% - 1160px)/2);background:var(--cream);border-bottom:2px solid var(--navy)}
.brand img{height:34px;width:auto}
@media(min-width:640px){.brand img{height:48px}.top{padding-block:8px}}
.top-r{display:flex;align-items:center;gap:8px}
.lang{min-width:48px;padding:0 12px}
.top .lbl{display:none}
.top .btn-sm{padding:0 12px}
@media(min-width:375px){.top .lbl{display:inline}}
@media(min-width:640px){.top .btn-sm{padding:0 16px}}
html:not(.ready) .top .lbl{display:inline}

/* hero */
.hero{padding-top:clamp(32px,6vw,72px);overflow:hidden}
.hero-in{display:grid;gap:24px;align-items:center}
.hero h1{font-weight:700;font-size:clamp(2.125rem,1.4rem + 3vw,3.25rem);line-height:1.12;letter-spacing:0}
.lede{margin-top:20px;font-size:1.25rem}
.lede b{font:700 1.25rem var(--f-d)}
.cta{display:grid;gap:12px;margin-top:28px}
.hours{display:inline-flex;align-items:center;gap:10px;margin-top:24px;font:600 .9375rem/1.3 var(--f-d)}
.sun{width:28px;height:28px}
.hero-badge{width:min(50vw,190px);justify-self:center}
@media(min-width:640px){.cta{display:flex;flex-wrap:wrap}}
@media(min-width:900px){
  .hero-in{grid-template-columns:1.15fr .85fr;gap:64px}
  .hero-badge{width:min(100%,360px);justify-self:end}
}

/* the sea: engraved wave lines drift; the page's one authored motion moment */
.sea{position:relative;height:72px;margin-top:0}
@media(min-width:640px){.sea{height:96px}}
.sea i,.tide::before{position:absolute;left:0;width:calc(100% + 240px);background-repeat:repeat-x}
.sea i{animation:drift var(--t,20s) linear infinite}
.sea i{top:var(--y);height:40px;background-image:var(--wave-line);opacity:var(--o)}
.sea i:nth-child(1){--y:0;--o:1;--t:18s}
.sea i:nth-child(2){--y:20px;--o:.6;--t:26s;animation-direction:reverse}
.sea i:nth-child(3){--y:40px;--o:.35;--t:36s}
@media(min-width:640px){.sea i:nth-child(2){--y:26px}.sea i:nth-child(3){--y:52px}}
@keyframes drift{to{transform:translateX(-240px)}}

/* sections */
.sec{padding-top:clamp(48px,9vw,120px)}
.sec>h2,.loc h2{font-weight:700;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.25rem);line-height:1.25}
.sub{margin-top:12px;font-size:1.125rem;color:var(--ink-2)}

/* static WhatsApp fallback: shown until app.js has booted, so the page still books if the script fails */
.fallback{display:grid;gap:16px;justify-items:start;margin-top:32px;padding:20px;background:var(--white);border:2px solid var(--navy);border-radius:var(--r)}
.ready .fallback,html:not(.ready) .builder{display:none}

/* builder */
.builder{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;margin-top:40px;align-items:start}
@media(min-width:1000px){.builder{grid-template-columns:minmax(0,1fr) 360px;gap:56px}.builder .summary{position:sticky;top:96px}}
.flow{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.step summary{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;min-height:48px;cursor:pointer;list-style:none}
.step summary::-webkit-details-marker{display:none}
.step[open] summary{margin-bottom:16px}
.step h3{grid-column:1;grid-row:1;display:flex;align-items:center;gap:12px;font-weight:600;font-size:1.5rem;line-height:1.25;margin:0}
.step .recap{grid-column:1;grid-row:2;font:500 .9375rem var(--f-b);color:var(--ink-2)}
.step .recap:empty,.step[open] .recap{display:none}
.step summary::after{grid-column:2;grid-row:1/-1;content:"";width:10px;height:10px;flex:none;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease)}
.step[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.n{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--navy);color:var(--cream);font:600 .9375rem var(--f-d);font-variant-numeric:tabular-nums}
.n.done::after{content:"";width:8px;height:14px;border:solid var(--cream);border-width:0 2.5px 2.5px 0;transform:rotate(40deg) translate(-1px,-2px)}
.hint{margin-top:12px;font-size:1rem;font-weight:500;color:var(--navy)}
.hint.bad{color:var(--navy);font-weight:600}

.tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-bottom:16px;background:var(--navy);border:2px solid var(--navy);border-radius:var(--r);overflow:hidden}
.tabs button{min-height:var(--tap);padding:8px 6px;border:0;background:var(--white);color:var(--navy);font:600 .8125rem/1.2 var(--f-d);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.tabs button[aria-pressed=true]{background:var(--navy);color:var(--cream)}
.tabs button:focus-visible{outline-offset:-4px}
.grid{display:grid;gap:12px}
.grid[hidden],[data-panel][hidden]{display:none}
@media(min-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.opt{position:relative;display:block}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.opt-body{--ico-bg:var(--white);display:grid;grid-template-columns:56px 1fr auto;grid-template-areas:"i n p" "i t p" "x x x";gap:2px 16px;align-items:center;min-height:96px;padding:16px;background:var(--white);border:2px solid var(--navy);border-radius:var(--r);box-shadow:var(--shadow);transition:background .25s,color .25s,transform .25s var(--ease)}
.opt:active .opt-body{transform:scale(.99)}
.opt input:checked+.opt-body{--ico-bg:var(--navy);background:var(--navy);color:var(--cream)}
.opt input:focus-visible+.opt-body{outline:2px solid var(--clay);outline-offset:2px}
.opt .ico{grid-area:i;width:56px;height:56px}
.opt .nm{grid-area:n;font:600 1.0625rem/1.25 var(--f-d);min-height:2.5em}
.opt .nt{grid-area:t;font-size:1rem;font-weight:500;line-height:1.35;color:var(--navy);min-height:2.7em}
.opt input:checked+.opt-body .nt{color:var(--cream)}
.opt .pr{grid-area:p;text-align:right;font:700 1.375rem/1 var(--f-d);font-variant-numeric:tabular-nums}
.opt .pr small{display:block;margin-top:4px;font:600 .75rem/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.opt input:checked+.opt-body .pr small{color:var(--clay-lt)}
.opt .inc{grid-area:x;margin-top:10px;padding-top:10px;border-top:2px solid var(--sand);font-size:1rem;font-weight:500;line-height:1.4;min-height:2.8em}
.opt .inc:empty{visibility:hidden}
.opt input:checked+.opt-body .inc{border-color:var(--ink-2)}

/* icon motion: locker door opens, board drops into the rack */
.door{transform-box:fill-box;transform-origin:0 50%;transition:transform .55s var(--ease)}
.door.r{transform-origin:100% 50%}
.door *{vector-effect:non-scaling-stroke}
.opt input:checked+.opt-body .door{transform:scaleX(.18)}
.opt input:checked+.opt-body .board{animation:slide .7s var(--ease)}
@media(hover:hover){
  .opt:hover .opt-body{transform:translateY(-2px)}
  .opt:hover .door{transform:scaleX(.18)}
  .opt:hover .board{animation:slide .7s var(--ease)}
}
@keyframes slide{from{transform:translateY(-14px)}}

.durs[hidden]{display:none}
.durs{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.durs-more{grid-column:1/-1}
.durs-more summary{cursor:pointer;list-style:none;font:600 .8125rem/1.2 var(--f-d);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.durs-more summary::-webkit-details-marker{display:none}
.durs-more[open] summary{margin-bottom:8px}
.durs-more-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.dur{position:relative;display:block}
.dur input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.dur[hidden]{display:none}
.dur span{display:grid;gap:4px;place-items:center;min-height:64px;padding:8px;text-align:center;background:var(--white);border:2px solid var(--navy);border-radius:var(--r);transition:background .2s,color .2s}
.dur b{font:600 .8125rem/1 var(--f-d);letter-spacing:.08em;text-transform:uppercase}
.dur i{font:600 1.125rem/1 var(--f-b);font-style:normal;font-variant-numeric:tabular-nums}
.dur input:checked+span{background:var(--navy);color:var(--cream)}
.dur input:checked+span i{color:var(--clay-lt)}
.dur input:focus-visible+span{outline:2px solid var(--clay);outline-offset:2px}
.dur input:disabled{cursor:not-allowed}
.dur input:disabled+span{background:var(--sand);border-style:dashed;color:var(--ink-2)}
.dur input:disabled:checked+span{background:var(--navy);border-style:solid;color:var(--cream)}

.fld{display:grid;gap:6px;font:600 .8125rem/1.2 var(--f-d);letter-spacing:.1em;text-transform:uppercase}
.fld+.fld,.hint+.fld{margin-top:16px}
.fld input{height:56px}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
.fld input,.fld textarea{min-width:0;max-width:100%;scroll-margin-bottom:104px;width:100%;min-height:56px;padding:12px 16px;border:2px solid var(--navy);border-radius:var(--r);background:var(--white);color:var(--navy);font:500 1.125rem/1.4 var(--f-b);letter-spacing:0;text-transform:none}
.fld textarea{resize:vertical;min-height:88px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-2);opacity:1}
.fld.bad input{border-color:var(--clay);border-width:3px}

.ex{display:grid;grid-template-columns:36px 1fr auto;grid-template-areas:"i t t" "p p q";gap:8px 12px;align-items:center;padding:12px 16px;background:var(--white);border:2px solid var(--sand);border-radius:var(--r)}
.ex .ico{grid-area:i}.ex-t{grid-area:t}.ex-p{grid-area:p}.step-q{grid-area:q}
@media(min-width:560px){.ex{grid-template-columns:36px 1fr auto auto;grid-template-areas:"i t p q";gap:16px}}
.ex+.ex{margin-top:8px}
.ex .ico{width:36px;height:36px;flex:none}
.ex-t{flex:1;min-width:0}
.ex-t b{display:block;font:600 1rem/1.3 var(--f-d)}
.ex-t small{display:block;font-size:1rem;font-weight:500;line-height:1.35;color:var(--navy)}
.ex-p{font:600 1rem var(--f-d);white-space:nowrap;font-variant-numeric:tabular-nums}
.step-q{display:flex;align-items:center;gap:4px;flex:none}
.step-q button{width:var(--tap);height:var(--tap);border:2px solid var(--navy);border-radius:var(--r);background:var(--white);color:var(--navy);font:600 1.5rem/1 var(--f-d);cursor:pointer}
.step-q button:active:not(:disabled){background:var(--navy);color:var(--cream)}
@media(hover:hover){.step-q button:hover:not(:disabled){background:var(--navy);color:var(--cream)}}
.step-q button:disabled{border-color:var(--sand);color:var(--ink-2);cursor:not-allowed}
.step-q output{min-width:28px;text-align:center;font:600 1.125rem var(--f-d);font-variant-numeric:tabular-nums}
.ex.off{background:var(--sand)}
.reco{margin-top:16px;padding:16px;background:var(--white);border:2px solid var(--navy);border-radius:var(--r);display:grid;gap:12px;justify-items:start}
.reco[hidden]{display:none}
#skip-extras{margin-top:16px}
.reco span{font-weight:500}

/* summary: the tide fills as the request is completed */
.summary{position:relative;overflow:hidden;background:var(--navy-deep);color:var(--cream);border-radius:var(--r);box-shadow:var(--shadow)}
.tide{position:absolute;inset:0;background:var(--navy);transform:translateY(calc((1 - (.1 + var(--tide,0)*.9))*100%));transition:transform 1s var(--ease)}
.tide::before{content:"";top:-23px;height:24px;background-image:var(--wave-fill)}
.sum-in{position:relative;padding:24px}
.summary h3{font-weight:600;font-size:1.25rem}
.lines{display:grid;gap:10px;margin:16px 0 0;padding:0}
.lines div{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid rgba(245,240,228,.3)}
.lines dt{font:600 .8125rem/1.5 var(--f-d);letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
.lines dd{margin:0;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.lines .prompt{border-bottom:0}
.lines .prompt dd{text-align:left;color:var(--cream)}
.total{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-top:20px}
.total>span:first-child{white-space:nowrap;font:600 .8125rem var(--f-d);letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
.total output{font:700 2rem/1 var(--f-d);font-variant-numeric:tabular-nums}
.dep{margin-top:8px;font-size:.9375rem}
.err{margin-top:16px;padding:12px;background:var(--cream);color:var(--navy);font-weight:600;font-size:1rem;line-height:1.4;border-radius:var(--r)}
.err[hidden],.dep[hidden]{display:none}
.summary .btn{margin-top:20px}
.fine{margin-top:12px;font-size:1rem;font-weight:500;line-height:1.4;color:var(--cream)}

.dock{position:fixed;inset:auto 0 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--navy-deep);color:var(--cream)}
.dock[hidden]{display:none}
.dock-sum small{white-space:nowrap}
.dock .btn{flex:1;max-width:260px;padding:0 12px;font-size:.8125rem;letter-spacing:.05em;line-height:1.15}
.dock-sum{display:grid;min-height:var(--tap);align-content:center;text-decoration:none}
.dock-sum small{font:600 .8125rem var(--f-d);letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
.dock-sum b{font:700 1.5rem/1.1 var(--f-d);font-variant-numeric:tabular-nums}
@media(min-width:1000px){.dock{display:none}}

/* price tables: phones get one block per row; wider screens get a real table */
#tables{margin-top:32px;border-bottom:2px solid var(--navy)}
.tg{border-top:2px solid var(--navy);padding-bottom:16px}
.tg summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;cursor:pointer;list-style:none}
.tg summary::-webkit-details-marker{display:none}
.tg summary h3{margin:0;font-weight:600;font-size:1.25rem}
.tg summary::after{content:"";width:10px;height:10px;flex:none;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease)}
.tg[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.tg[open] summary{margin-bottom:8px}
.scroll{background:var(--white);border:2px solid var(--navy);border-radius:var(--r);font-variant-numeric:tabular-nums}
.scroll table,.scroll tbody{display:block;width:100%}
.scroll thead{position:absolute;left:-9999px}
.scroll tbody tr{display:grid;grid-template-columns:repeat(3,1fr);gap:0 8px;padding:12px 14px;border-bottom:1px solid var(--sand)}
.scroll tbody tr:last-child{border-bottom:0}
.scroll tbody th{grid-column:1/-1;padding:0 0 6px;font-weight:600;font-size:1.0625rem;text-align:left}
.scroll tbody td{display:grid;gap:2px;padding:4px 0;text-align:left}
.scroll tbody td::before{content:attr(data-l);font:600 .75rem var(--f-d);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.scroll td.wrapc{grid-column:1/-1}
.scroll td .btn{justify-self:start;margin-top:4px}

/* starting-price list: category + one price, no duration grid (brand book p.9: one price, not a matrix) */
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px;border-bottom:1px solid var(--sand)}
.plist li:last-child{border-bottom:0}
.plist span{font:500 1.0625rem/1.3 var(--f-b)}
.plist b{font:700 1.125rem var(--f-d);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(min-width:640px){
  .scroll{overflow-x:auto}
  .scroll table{display:table;border-collapse:collapse;font-size:1rem}
  .scroll tbody{display:table-row-group}
  .scroll thead{position:static}
  .scroll tbody tr{display:table-row;padding:0;border:0}
  .scroll th,.scroll td{padding:12px 14px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--sand)}
  .scroll tbody th{grid-column:auto;font-size:1rem}
  .scroll tbody td{display:table-cell}
  .scroll tbody td::before{content:none}
  .scroll th:first-child,.scroll td:first-child{text-align:left;position:sticky;left:0;background:var(--white)}
  .scroll thead th{font:600 .75rem var(--f-d);letter-spacing:.1em;text-transform:uppercase;border-bottom:2px solid var(--navy)}
  .scroll tr:last-child>*{border-bottom:0}
  .scroll th.wrapc,.scroll td.wrapc{white-space:normal;min-width:220px;text-align:left}
}

/* amenities: rows, not cards */
.am-list{display:grid;margin-top:32px}
@media(min-width:800px){.am-list{grid-template-columns:1fr 1fr;column-gap:64px}}
.am{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:24px 0;border-top:2px solid var(--navy)}
.am h3{font-weight:600;font-size:1.25rem;margin-bottom:4px}
.am-ico{width:64px;height:64px}
.in .drop{animation:fall 2.6s ease-in-out var(--d,0s) infinite}
@keyframes fall{0%,100%{transform:translateY(-6px);opacity:0}30%{opacity:1}65%{transform:translateY(8px);opacity:0}}
.in .towel{transform-box:fill-box;transform-origin:50% 0%;animation:sway 3.6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.in .bolt{animation:zap 2.4s ease-in-out infinite}
@keyframes zap{0%,100%{opacity:1}50%{opacity:.55}}
.in .arc{animation:ping 2.8s ease-in-out var(--d,0s) infinite}
@keyframes ping{0%,100%{opacity:.4}50%{opacity:1}}
.in .level{transform-box:fill-box;animation:ripple 3.2s ease-in-out infinite}
@keyframes ripple{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}

/* location */
.loc{display:grid;gap:40px}
.loc .btn{margin-top:24px}
.loc .map{display:block;margin-top:24px;width:100%;max-width:480px;aspect-ratio:4/3;border:2px solid var(--navy);border-radius:var(--r)}
@media(min-width:800px){.loc{grid-template-columns:1fr 1fr;gap:64px}}
.contact{list-style:none;margin:0;padding:0;display:grid}
.contact li{display:grid;grid-template-columns:32px 1fr;gap:16px;padding:16px 0;border-top:2px solid var(--navy)}
.contact li:last-child{border-bottom:2px solid var(--navy)}
.contact [data-icon]{width:32px;height:32px}
.contact b{display:block;font:600 1rem var(--f-d)}
.contact span,.contact a{font-size:1.0625rem}

.footprints{margin-top:clamp(32px,6vw,64px)}
.footprints svg{display:block;width:100%;height:auto;fill:var(--navy);opacity:.45}
.banner{margin-top:clamp(64px,9vw,120px);overflow:hidden}
.banner img{width:min(1700px,100%);margin-inline:auto}

/* footer */
.foot{background:var(--navy-deep);color:var(--cream);padding:48px 0 calc(48px + env(safe-area-inset-bottom))}
.foot-in{display:grid;gap:32px;justify-items:start;align-items:center;max-width:640px}
.foot img{width:200px}
.foot a{text-decoration-color:var(--clay-lt)}
.foot p+p{margin-top:8px}
.foot .small{margin-top:24px;font-size:.875rem;color:var(--clay-lt)}
@media(min-width:700px){.foot-in{grid-template-columns:auto 1fr;gap:64px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* tap targets: inline links and the logo reach 44px */
.brand{display:flex;align-items:center;min-height:44px}
.contact a,.foot a{display:inline-flex;align-items:center;min-height:44px}
.foot p+p{margin-top:0}

/* package switch: shown when a package exists for the chosen item + duration */
.up{position:relative;display:block;margin-top:16px}
.up[hidden]{display:none}
.up input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.up-body{display:grid;grid-template-columns:40px 1fr 52px;gap:12px;align-items:center;padding:16px;background:var(--white);border:2px solid var(--navy);border-radius:var(--r);box-shadow:var(--shadow);transition:background .25s,color .25s}
.up-ico{width:40px;height:40px}
.up-t b{display:block;font:600 1.0625rem/1.25 var(--f-d)}
.up-t small{display:block;margin-top:2px;font-size:1rem;font-weight:500;line-height:1.35}
.sw{position:relative;width:52px;height:28px;border:2px solid currentColor;border-radius:var(--r)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:currentColor;transition:transform .25s var(--ease)}
.up input:checked+.up-body{background:var(--navy);color:var(--cream)}
.up input:checked+.up-body .sw::after{transform:translateX(24px)}
.up input:focus-visible+.up-body{outline:2px solid var(--clay);outline-offset:2px}
.up:active .up-body{transform:scale(.99)}
.cur-hint{margin:-4px 0 12px}
/* the shower icon is the switch's state: closed (no water) when off, open (water running) when on */
.up .drop{opacity:0}
.up input:checked+.up-body .drop{opacity:1;animation:run 1.2s linear var(--d,0s) infinite}
@keyframes run{0%{transform:translateY(-4px);opacity:0}25%{opacity:1}100%{transform:translateY(9px);opacity:0}}

/* currency, always next to the total */
.amt{display:flex;align-items:baseline;gap:8px;margin-left:auto}
.cur{font:600 .875rem var(--f-d);letter-spacing:.1em;color:var(--cream)}

/* after tapping send: the request is not made until the guest presses send inside WhatsApp */
.sent{margin-top:16px;padding:16px;display:grid;gap:8px;background:var(--cream);color:var(--navy);border-radius:var(--r)}
.sent[hidden]{display:none}
.sent b{font:600 1.0625rem/1.3 var(--f-d)}
.sent p{font-weight:500;font-size:1rem;line-height:1.45}
.sent-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.sent .btn{margin-top:0;font-size:.875rem;letter-spacing:.06em;line-height:1.2}
.sent-a .btn{flex:1 1 auto}
.summary .btn-ghost{border-color:var(--cream);color:var(--cream)}
.summary .sent .btn-ghost{border-color:var(--navy);color:var(--navy)}
.summary .btn-ghost:active{background:var(--cream);color:var(--navy)}
.summary .sent .btn-ghost:active{background:var(--navy);color:var(--cream)}
@media(hover:hover){
  .summary .btn-ghost:hover{background:var(--cream);color:var(--navy)}
  .summary .sent .btn-ghost:hover{background:var(--navy);color:var(--cream)}
}
.preview{margin-top:12px}
.preview summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font:600 .875rem var(--f-d);letter-spacing:.1em;text-transform:uppercase;color:var(--cream);text-decoration:underline;text-underline-offset:.3em}
.preview pre{margin:4px 0 12px;white-space:pre-wrap;word-break:break-word;font:500 1rem/1.5 var(--f-b);color:var(--cream)}
.preview .btn{margin-top:0}

/* header slides away while scrolling down on a phone */
.top.hide{transform:translateY(-100%)}

/* arrival by tapping: a strip of days and one chip per opening hour */
.fset{display:grid;gap:8px;margin-top:20px}
.fset:first-of-type{margin-top:0}
.fset>span{font:600 .8125rem/1.2 var(--f-d);letter-spacing:.1em;text-transform:uppercase}
.chips{display:grid;gap:8px}
.chip{position:relative;display:block}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.chip span{display:grid;gap:2px;place-items:center;min-height:48px;padding:8px 4px;text-align:center;background:var(--white);border:2px solid var(--navy);border-radius:var(--r);transition:background .2s,color .2s}
.chip b{font:600 .9375rem/1 var(--f-d);letter-spacing:.06em;text-transform:uppercase}
.chip i{font:500 .9375rem/1 var(--f-b);font-style:normal;font-variant-numeric:tabular-nums}
.chip:active span{transform:scale(.98)}
.chip input:checked+span{background:var(--navy);color:var(--cream)}
.chip input:checked+span i{color:var(--clay-lt)}
.chip input:focus-visible+span{outline:2px solid var(--clay);outline-offset:2px}
.chip input:disabled{cursor:not-allowed}
.chip input:disabled+span{background:var(--sand);border-style:dashed;color:var(--ink-2)}
.fset.bad .chip span{border-color:var(--clay);border-width:3px}
.hrs{grid-template-columns:repeat(4,1fr)}
.days{grid-template-columns:repeat(3,1fr)}
.chip[hidden]{display:none}
.chip.on span{background:var(--navy);color:var(--cream)}
.chip.other i svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chip.other input:focus-visible+span{outline:2px solid var(--clay);outline-offset:2px}
.days .chip b{font-size:.8125rem;letter-spacing:.04em}
.days .chip span{min-height:64px}
@media(min-width:640px){
  .hrs{grid-template-columns:repeat(7,1fr)}
}

/* quantity */
.units{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:12px 16px;background:var(--white);border:2px solid var(--sand);border-radius:var(--r)}
.units-t b{display:block;font:600 1rem/1.3 var(--f-d)}
.units-t small{display:block;font-size:1rem;font-weight:500;line-height:1.35}

/* extras are optional: folded until asked for */
.xs{background:var(--white);border:2px solid var(--navy);border-radius:var(--r)}
.xs summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;cursor:pointer;list-style:none;font:600 1rem/1.3 var(--f-d)}
.xs summary::-webkit-details-marker{display:none}
.xs summary span{flex:1}
.xs summary b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;background:var(--navy);color:var(--cream);font:600 .875rem var(--f-d)}
.xs summary b[hidden]{display:none}
.xs summary::after{content:"";width:10px;height:10px;flex:none;border:solid currentColor;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease)}
.xs[open] summary{border-bottom:2px solid var(--navy)}
.xs[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.xs #extras{padding:12px}
.xs>.hint{margin:0;padding:0 16px 16px}

/* how it works, in the hero */
.how{list-style:none;counter-reset:h;margin:24px 0 0;padding:0;display:grid;gap:8px}
.how li{counter-increment:h;display:flex;align-items:center;gap:12px;font-weight:500;font-size:1rem;line-height:1.35}
.how li::before{content:counter(h) ".";flex:none;min-width:1.4ch;font:700 1rem var(--f-d);color:var(--navy)}
@media(min-width:900px){.how{grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 24px}}