/* Playfair Display is linked from each page head (a <link> beats an @import: it starts
   downloading with the HTML instead of after the stylesheet parses). */
/* Aqua Loca — a tropical retint of the Organic tokens plus this site's page layout.
   Token names stay the system's, so .btn/.tag/.card/.input/.nav re-skin with the
   palette below. Depth comes from three things only: a deep-sea ground for the
   hero and bands, layered palm silhouettes at different scales and opacities,
   and soft warm shadows — no flat pastel blobs. */
:root{
--color-bg:#f6ecd8;--color-surface:#efe1c3;--color-text:#12292b;
--color-accent:#0b7f82;--color-accent-2:#d9553a;
--color-divider:color-mix(in srgb,#12292b 16%,transparent);
--color-accent-100:#e7f6f3;--color-accent-200:#c5eae6;--color-accent-300:#95dad4;--color-accent-400:#4ec2be;--color-accent-500:#12989a;--color-accent-600:#0b7f82;--color-accent-700:#096568;--color-accent-800:#074a4d;--color-accent-900:#053134;
--color-accent-2-100:#fff0ea;--color-accent-2-200:#ffdccf;--color-accent-2-300:#ffbca6;--color-accent-2-400:#f79172;--color-accent-2-500:#e0664a;--color-accent-2-600:#bd4a2c;--color-accent-2-700:#96371f;--color-accent-2-800:#6c2716;--color-accent-2-900:#461a0f;
--color-neutral-100:#faf4e9;--color-neutral-200:#efe7d7;--color-neutral-300:#dcd2bd;--color-neutral-400:#bfb49c;--color-neutral-500:#9e9480;--color-neutral-600:#7d7566;--color-neutral-700:#5d574c;--color-neutral-800:#413d35;--color-neutral-900:#2a2722;
--sun:#f2ae35;--palm:#12403a;--sea-deep:#053339;--sea:#0a6a70;--cream:#f6ecd8;
--shadow-sm:0 1px 2px color-mix(in srgb,#053339 14%,transparent);
--shadow-md:0 6px 18px color-mix(in srgb,#053339 18%,transparent);
--shadow-lg:0 22px 48px color-mix(in srgb,#053339 26%,transparent);
--leading:28px;--half:14px;--edge:clamp(20px,5vw,72px);--measure:56ch;
--font-heading:"Playfair Display",Georgia,serif;--font-heading-weight:500
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;text-wrap:pretty;overflow-x:clip;font-size:16px;line-height:var(--leading);background:var(--color-bg)}
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-2-700)}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--edge);position:relative}
.btn{font-size:12.5px;padding:13px 26px;font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.btn-primary{box-shadow:var(--shadow-sm)}

/* — nav: deep-sea glass, cream ink, on every page — */
.nav{position:sticky;top:0;z-index:30;gap:clamp(20px,3.4vw,52px);color:var(--cream);background:color-mix(in srgb,var(--sea-deep) 86%,transparent);backdrop-filter:blur(14px) saturate(1.2);padding-block:var(--space-3);padding-inline:clamp(20px,3vw,44px)}
.nav-brand{font-size:24px;letter-spacing:.02em;margin-right:0}
.nav a:nth-of-type(1){margin-left:auto}
.nav a:nth-last-of-type(2){margin-right:auto}
.nav-brand em{font-style:normal;color:var(--sun)}
.nav a{white-space:nowrap;color:color-mix(in srgb,var(--cream) 82%,transparent)}
.nav a:hover,.nav a[aria-current=page]{color:var(--sun)}
.nav .btn-primary{background:var(--color-accent-2-600);color:#fff}
.nav .btn-primary:hover{background:var(--color-accent-2-700)}
/* small screens: the bar wraps to two rows instead of dropping a nav item —
   a hidden link is an unreachable page on a phone */
@media (max-width:640px){
.nav{flex-wrap:wrap;justify-content:center;row-gap:10px;padding-inline:16px}
.nav .hide-s{display:inline-flex}
.nav-brand{flex:1 0 100%;text-align:center}
.nav a:nth-of-type(1){margin-left:0}
.nav a:nth-last-of-type(2){margin-right:0}
.nav .btn{padding-block:15px}
}

/* — deep-sea grounds — */
.dark{position:relative;color:var(--cream);background:radial-gradient(130% 100% at 72% 108%,color-mix(in srgb,var(--sun) 34%,transparent) 0%,transparent 58%),linear-gradient(179deg,var(--sea-deep) 0%,#074a52 62%,#0a6067 100%);overflow:hidden;isolation:isolate}
.dark::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.dark h1,.dark h2,.dark h3{color:var(--cream)}
.dark .kicker{color:var(--color-accent-300)}
.dark .body,.dark .lead{color:color-mix(in srgb,var(--cream) 84%,transparent)}
.dark a:not(.btn){color:var(--sun)}
.dark .btn-primary{color:var(--color-bg)}
.dark .btn-secondary{border-color:color-mix(in srgb,var(--cream) 40%,transparent);color:var(--cream)}
.dark .btn-secondary:hover{background:color-mix(in srgb,var(--cream) 12%,transparent)}
.dark .btn-ghost{color:var(--sun)}
.dark .btn-ghost:hover{background:color-mix(in srgb,var(--sun) 14%,transparent)}
.sun{position:absolute;right:14%;bottom:-170px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sun) 78%,transparent) 0%,color-mix(in srgb,var(--sun) 42%,transparent) 62%,transparent 74%);filter:blur(14px);z-index:0;pointer-events:none}

/* — palms — */
.palms{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.palms .p{position:absolute;bottom:0;display:block}
.palm-svg{width:100%;height:100%;display:block;fill:currentColor}
.palm-tree{transform-origin:107px 400px;animation:palm-sway 9s ease-in-out infinite alternate}
.palm-frond{transform-origin:0 0;transform:translate(113px,120px) rotate(var(--a)) scale(var(--sx),var(--sy));animation:palm-frond 7s ease-in-out infinite alternate}
@keyframes palm-sway{from{transform:rotate(-1.1deg)}to{transform:rotate(1.5deg)}}
@keyframes palm-frond{from{transform:translate(113px,120px) rotate(var(--a)) scale(var(--sx),var(--sy)) skewY(-1.4deg)}to{transform:translate(113px,120px) rotate(calc(var(--a) + 2.4deg)) scale(var(--sx),var(--sy)) skewY(1.2deg)}}
@media (prefers-reduced-motion:reduce){.palm-tree,.palm-frond{animation:none}}
/* the grove: three depths — far, mid, near — so the silhouettes read as space */
.p-far{left:-30px;width:170px;height:46%;color:color-mix(in srgb,var(--palm) 50%,transparent);filter:blur(2.5px)}
.p-mid{right:-20px;width:230px;height:62%;color:color-mix(in srgb,var(--palm) 72%,transparent);filter:blur(1px)}
.p-near{left:58%;width:300px;height:86%;color:color-mix(in srgb,#03252a 88%,transparent)}
.sand .p-far,.sand .p-mid,.sand .p-near{color:color-mix(in srgb,var(--palm) 14%,transparent);filter:none}
@media (max-width:900px){.p-near{left:52%;width:210px;height:64%}.p-far{display:none}}

/* — silhouette decor: a boat crossing the horizon, boards planted in the sand,
     a glass tilting beside the sunset panel — */
.decor{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.decor .d{position:absolute;display:block}
.decor-svg{width:100%;height:100%;display:block;fill:currentColor}
.d-boat{bottom:10px;left:-14%;width:96px;height:58px;color:color-mix(in srgb,var(--cream) 24%,transparent);animation:boat-sail 78s linear infinite}
.d-boat .decor-inner{transform-origin:66px 70px;animation:boat-bob 5.4s ease-in-out infinite alternate}
@keyframes boat-sail{from{transform:translateX(0)}to{transform:translateX(128vw)}}
@keyframes boat-bob{from{transform:rotate(-2.2deg) translateY(0)}to{transform:rotate(2.2deg) translateY(-5px)}}
.d-boards{position:absolute;bottom:0;left:2%;width:150px;height:210px;color:color-mix(in srgb,var(--palm) 20%,transparent)}
.d-boards .d{position:absolute;bottom:0;width:44px;height:100%}
.d-board-1{left:0;transform:rotate(-11deg);transform-origin:bottom center;animation:board-lean 7.5s ease-in-out infinite alternate}
.d-board-2{left:38px;height:86%;transform:rotate(6deg);transform-origin:bottom center;animation:board-lean 8.6s ease-in-out infinite alternate-reverse}
.d-board-3{left:82px;height:74%;transform:rotate(15deg);transform-origin:bottom center;animation:board-lean 9.8s ease-in-out infinite alternate}
@keyframes board-lean{from{rotate:-1.6deg}to{rotate:1.6deg}}
.d-drink{right:4%;bottom:12%;width:84px;height:118px;color:color-mix(in srgb,var(--sun) 42%,transparent);transform-origin:bottom center;animation:drink-tilt 6.2s ease-in-out infinite alternate}
@keyframes drink-tilt{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.d-boat,.d-boat .decor-inner,.d-drink,.d-boards .d{animation:none}}
@media (max-width:760px){.d-boards,.d-drink{display:none}}

/* — display type — */
.display{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(42px,6.6vw,88px);line-height:1.06;letter-spacing:-.015em;margin:0 0 0 -.028em;text-shadow:0 2px 24px color-mix(in srgb,#03252a 35%,transparent)}
.display .line:nth-child(2){font-style:italic}
.display .line{display:block}
.display .aqua{color:var(--color-accent-300)}
.display .gold{color:var(--sun)}
h2.sec{font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin:0;letter-spacing:-.01em}
.kicker{display:block;font-size:13px;line-height:var(--half);letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--color-accent-700);margin:0 0 var(--leading)}
.lead{font-size:18px;line-height:calc(var(--leading) + 4px);max-width:var(--measure);margin:calc(1.1 * var(--leading)) 0 0}
.body{font-size:16px;max-width:52ch;color:color-mix(in srgb,var(--color-text) 82%,transparent)}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:calc(1.1 * var(--leading))}

/* — hero (dark, with the grove) — */
.hero{padding:calc(3 * var(--leading)) 0 calc(3 * var(--leading))}
.hero .inner{position:relative;z-index:2}
.hero-sub{padding:calc(1.6 * var(--leading)) 0 0}

/* — animated bullets: each line rises in on load, its dot breathing after — */
.bullets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,auto));justify-content:start;gap:10px clamp(28px,4vw,64px);list-style:none;margin:0;padding:calc(1.5 * var(--leading)) 0 0;position:relative;z-index:2}
.bullets li{display:flex;align-items:baseline;gap:12px;font-size:16.5px;color:color-mix(in srgb,var(--cream) 90%,transparent);opacity:0;transform:translateY(14px);animation:bullet-in .8s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:calc(var(--i) * .13s + .25s)}
.bullets li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--sun);transform:translateY(-2px);animation:bullet-pulse 4.2s ease-in-out infinite;animation-delay:calc(var(--i) * .35s + 1s)}
.sand .bullets li{color:var(--color-text)}
.sand .bullets li::before{background:var(--color-accent-2-500)}
@keyframes bullet-in{to{opacity:1;transform:translateY(0)}}
@keyframes bullet-pulse{0%,100%{transform:translateY(-2px) scale(1);opacity:.9}50%{transform:translateY(-2px) scale(1.45);opacity:1}}
@media (prefers-reduced-motion:reduce){.bullets li{opacity:1;transform:none;animation:none}.bullets li::before{animation:none}}

/* — sections — */
.sec-pad{padding:calc(2.6 * var(--leading)) 0}
.sand{position:relative;background:var(--color-bg);overflow:hidden}
.sec-head{display:grid;gap:var(--half);max-width:46ch;margin-bottom:calc(1.8 * var(--leading));position:relative;z-index:2}

/* — reason / moment cards: hairline + numeral, elevation instead of pastel — */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:calc(1.3 * var(--leading)) clamp(24px,3vw,44px);position:relative;z-index:2}
.moment{display:grid;gap:10px;align-content:start;padding-top:var(--leading);border-top:1px solid var(--color-divider)}
.dark .moment{border-top-color:color-mix(in srgb,var(--cream) 24%,transparent)}
.num{font-family:var(--font-heading);font-size:34px;line-height:1;color:var(--color-accent-2-500);font-feature-settings:"tnum" 1}
.dark .num{color:var(--sun)}
.moment h3{font-size:23px;margin:0}
.moment p{margin:0;font-size:15.5px;color:color-mix(in srgb,var(--color-text) 80%,transparent)}
.dark .moment p{color:color-mix(in srgb,var(--cream) 78%,transparent)}

/* — split with a photograph — */
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--leading) clamp(24px,5vw,88px);align-items:center;padding-block:calc(2.4 * var(--leading));position:relative;z-index:2}
.split-figure{margin:0;width:100%;border-radius:calc(2 * var(--radius-lg));overflow:hidden;box-shadow:var(--shadow-lg)}
.split-figure image-slot{width:100%;aspect-ratio:4/5;display:block}
.split-figure.wide image-slot{aspect-ratio:16/10}
.split-figure.video{position:relative;background:var(--color-surface);display:block}
.split-figure.video video{width:100%;height:auto;display:block}
.split-figure.reel{max-width:min(100%,520px);margin-inline:auto}
.split-figure.crop-top{overflow:hidden}
.split-figure.crop-top image-slot{transform:scale(1.22) translateY(-9%);transform-origin:center}
.split-figure.video .video-hint{grid-area:1/1;align-self:center;justify-self:center;margin:0;padding:0 var(--leading);text-align:center;font-size:14px;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.split-figure.video code{font-size:13px;background:color-mix(in srgb,var(--color-text) 8%,transparent);padding:2px 7px;border-radius:999px}
/* the clip plays once; this is how you get it back */
.video-replay{position:absolute;left:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;font-family:var(--font-body);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--cream);background:color-mix(in srgb,var(--sea-deep) 88%,transparent);box-shadow:var(--shadow-md);backdrop-filter:blur(6px)}
.video-replay:hover{background:var(--color-accent-600)}
.video-replay:active{background:var(--color-accent-700)}
.video-replay:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.video-replay[hidden]{display:none}
.video-replay-icon{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--sun)}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* — panels — */
.panel{position:relative;z-index:2;background:var(--color-surface);border-radius:calc(2 * var(--radius-lg));padding:calc(1.8 * var(--leading)) clamp(24px,4vw,64px);box-shadow:var(--shadow-sm)}
.panel.coral{background:var(--color-accent-2-100)}
.panel.deep{background:linear-gradient(170deg,var(--sea-deep),#0a5b62);color:var(--cream);box-shadow:var(--shadow-lg)}
.panel.deep h3{color:var(--cream)}
.panel.deep p{color:color-mix(in srgb,var(--cream) 82%,transparent)}
.panel h3{font-size:28px;margin:0}
.panel p{margin:var(--half) 0 0;max-width:var(--measure);font-size:16px}

/* — quote / review cards — */
.quote blockquote{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:clamp(23px,2.6vw,34px);line-height:1.3;max-width:34ch;margin:0;color:var(--color-accent-800)}
.quote figcaption{font-size:15px;margin-top:var(--leading);color:color-mix(in srgb,var(--color-text) 68%,transparent)}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--leading) clamp(20px,2.4vw,32px);position:relative;z-index:2}
.review{background:var(--color-neutral-100);border-radius:var(--radius-lg);padding:var(--leading);box-shadow:var(--shadow-sm);display:grid;gap:10px;align-content:start}
.review.empty{background:transparent;border:1.5px dashed color-mix(in srgb,var(--color-text) 28%,transparent);box-shadow:none;min-height:170px;align-content:center;text-align:center;color:color-mix(in srgb,var(--color-text) 58%,transparent);font-size:14px}
.stars{color:var(--sun);letter-spacing:.14em;font-size:15px}
.review p{margin:0;font-size:15.5px}
.review footer{font-size:13px;color:color-mix(in srgb,var(--color-text) 60%,transparent)}

/* — facts — */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--leading) clamp(24px,3vw,48px);margin:0;position:relative;z-index:2}
.facts dt{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--color-accent-700);margin-bottom:6px}
.dark .facts dt{color:var(--color-accent-300)}
.facts dd{margin:0;font-size:16px}
.hours{list-style:none;margin:0;padding:0;font-size:16px}
.hours li{display:flex;justify-content:space-between;gap:var(--space-4);padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--color-text) 10%,transparent);max-width:420px}
.dark .hours li{border-bottom-color:color-mix(in srgb,var(--cream) 20%,transparent)}
.hours li span:last-child{font-variant-numeric:tabular-nums;opacity:.85}

/* — skip link & screen-reader text — */
.skip-link{position:absolute;left:-9999px;top:0;z-index:60;background:var(--sun);color:var(--sea-deep);font-weight:700;font-size:14px;padding:12px 20px;border-radius:0 0 999px 0}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* — long-form pages: privacy, terms, faq — */
.prose{position:relative;z-index:2;max-width:68ch}
.prose h2{font-size:clamp(24px,2.6vw,32px);line-height:1.14;margin:calc(2 * var(--leading)) 0 var(--half)}
.prose h3{font-size:20px;margin:calc(1.4 * var(--leading)) 0 6px}
.prose p,.prose li{font-size:16.5px;color:color-mix(in srgb,var(--color-text) 84%,transparent)}
.prose p{margin:0 0 var(--half)}
.prose ul{margin:0 0 var(--half);padding-left:1.15em}
.prose li{margin-bottom:6px}
.prose .updated{font-size:14px;color:color-mix(in srgb,var(--color-text) 62%,transparent)}
.prose a{text-decoration:underline;text-underline-offset:2px}

.faq{display:grid;gap:12px;max-width:70ch;position:relative;z-index:2}
.faq details{background:var(--color-neutral-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:19px;line-height:1.25;padding:18px clamp(18px,2.4vw,26px);display:flex;gap:16px;align-items:baseline;justify-content:space-between;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font:inherit;color:inherit;letter-spacing:inherit}
.faq summary::after{content:"+";flex:none;font-family:var(--font-body);font-size:22px;line-height:1;color:var(--color-accent-600)}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{background:var(--color-accent-100)}
.faq summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
.faq details p{margin:0 0 var(--half);padding:0 clamp(18px,2.4vw,26px);font-size:16px;color:color-mix(in srgb,var(--color-text) 84%,transparent);max-width:60ch}
.faq details p:last-child{padding-bottom:18px}

/* — cookie notice: only shown by site.js when a measurement tool is actually configured — */
.cookie-bar{position:fixed;z-index:50;left:var(--half);right:var(--half);bottom:var(--half);max-width:560px;background:var(--sea-deep);color:var(--cream);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--leading);display:grid;gap:var(--half)}
.cookie-bar p{margin:0;font-size:15px;color:color-mix(in srgb,var(--cream) 88%,transparent)}
.cookie-bar a{color:var(--sun)}
.cookie-bar .row{margin-top:2px}
.cookie-bar[hidden]{display:none}

/* — footer — */
.foot{padding-block:calc(2 * var(--leading));font-size:14px;color:color-mix(in srgb,var(--cream) 66%,transparent);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:baseline;justify-content:space-between;position:relative;z-index:2}
.foot nav{display:flex;gap:var(--space-4);flex-wrap:wrap}
.foot-legal{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:var(--space-4);font-size:13px;padding-top:var(--leading);border-top:1px solid color-mix(in srgb,var(--cream) 18%,transparent);color:color-mix(in srgb,var(--cream) 80%,transparent)}
.dark .foot a{color:color-mix(in srgb,var(--cream) 84%,transparent);text-decoration:none}
.dark .foot a:hover{color:var(--sun);text-decoration:underline}