/* Discover Curaçao — Brand Design Book, Edition One
   Original site structure and wording; brand-book palette, rail, type. */
:root{
--sand:#F8E2C4;--offwhite:#FCFBF1;--cream:#FDF6EA;--ink:#132A3B;--orange:#F0912A;
--orange-hover:#D97F1E;--mint:#77AEA0;
--orange-ink:#8F4A08;--teal-deep:#2E6B5E;
--b1:#EE3200;--b2:#FF8400;--b3:#FFBB7B;--b4:#81BCA8;--b5:#125574;
--serif:"Source Serif 4",Georgia,serif;--script:"Yellowtail",cursive;
--max:1280px;--pad:120px;--gut:80px;
--line:rgba(19,42,59,.16);--line-soft:rgba(19,42,59,.1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--offwhite);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;text-wrap:pretty;-webkit-tap-highlight-color:rgba(19,42,59,.1);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--orange-ink);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-weight:400;margin:0;letter-spacing:-.015em;line-height:1.14}
p{margin:0}

/* script: one word per headline, 1.08×, never caps */
.s{font-family:var(--script);font-size:1.08em;font-weight:400;letter-spacing:0;line-height:1;display:inline-block;transform:translateY(.05em);color:var(--teal-deep);padding:0 .08em}
.s-dark,.on-dark .s{color:var(--orange)}
.s-beige{color:#A17A46}
.s-red{color:var(--b1)}
.hl-orange{color:var(--orange)}
.s-blue{color:var(--b5)}
.s-sand{color:#F7B87C}

/* the rail: five equal bands, full bleed */
.rail{display:flex;height:7px}
/* overlap the section above by 1px so no hairline shows between a photo and the rail at scaled / fractional sizes */
.rail{position:relative;z-index:3;height:8px;margin-top:-1px}
.rail>i{flex:1}
.rail>i:nth-child(1){background:var(--b1)}
.rail>i:nth-child(2){background:var(--b2)}
.rail>i:nth-child(3){background:var(--b3)}
.rail>i:nth-child(4){background:var(--b4)}
.rail>i:nth-child(5){background:var(--b5)}

/* kicker: three 8px bars + orange caps, .18em */
.kicker{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-ink);margin-bottom:24px}
.kicker>span{display:flex;gap:3px;flex:none}
.kicker>span>i{width:8px;height:3px}
.kicker>span>i:nth-child(1){background:var(--b1)}
.kicker>span>i:nth-child(2){background:var(--b2)}
.kicker>span>i:nth-child(3){background:var(--b3)}
.on-dark .kicker{color:var(--orange)}
.cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.on-dark .cap{color:var(--mint)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:15px 30px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:background .18s,color .18s,border-color .18s;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.btn svg{width:13px;height:13px;flex:none}
.btn-primary{background:var(--orange);color:var(--ink)}
.btn-primary:hover{background:var(--orange-hover);color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--cream)}
.on-photo .btn-outline{color:var(--cream);border-color:rgba(253,246,234,.8)}
.on-photo .btn-outline:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-sm{padding:11px 20px;font-size:11px;letter-spacing:.14em}
.ghost{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink);white-space:nowrap}
.ghost:hover{color:var(--ink)}
.ghost::after{content:"→";letter-spacing:0}
.ghost[aria-disabled="true"]{color:rgba(19,42,59,.38);pointer-events:none}

/* header — off-white, never navy */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,rgba(0,0,0,.55) 84%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0,#000 62%,rgba(0,0,0,.55) 84%,rgba(0,0,0,0) 100%);padding-bottom:22px;transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .3s}
.hdr[data-hidden="true"]{transform:translateY(-100%);opacity:0;pointer-events:none}
.hdr-in{max-width:var(--max);margin:0 auto;padding:15px 40px;display:flex;align-items:center;gap:48px}
.lockup{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none}
.lockup img.mk{height:32px;width:auto}
.lockup .sc{width:112px;height:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:38px}
.nav a{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.nav a:hover{color:var(--orange-ink)}
.nav .btn{margin-left:6px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--serif);font-weight:600}

/* hero — crossfading photographs, full bleed */
.hero{position:relative;min-height:min(92vh,860px);min-height:min(92dvh,860px);display:flex;align-items:flex-end;background:var(--ink);overflow:hidden}
.hero-img{position:absolute;left:0;right:0;top:-13%;width:100%;height:126%;object-fit:cover;opacity:0;transition:opacity 1.4s ease-in-out;will-change:translate}
.hero-img.is-active{opacity:1}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,42,59,.16) 0%,rgba(19,42,59,.04) 30%,rgba(19,42,59,.28) 66%,rgba(19,42,59,.58) 100%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 40px 96px;text-align:left;color:var(--cream)}
.hero-in>*{position:relative}
.hero .cap{color:var(--cream);opacity:.92}
.hero h1{font-size:clamp(34px,3.9vw,54px);line-height:1.12;margin:0;max-width:11em;text-shadow:0 2px 18px rgba(19,42,59,.55),0 1px 3px rgba(19,42,59,.4)}
.hero h1 .hs{display:inline-block;height:1.2em;width:auto;vertical-align:-.28em;margin-right:.12em}
.hero-w{display:inline-block;transition:opacity .4s ease,transform .4s ease}
.hero-w.out{opacity:0;transform:translateY(6px)}
.hero-sub{margin:26px auto 0;max-width:31em;font-size:19px;line-height:1.65;color:rgba(253,246,234,.9)}
.hero-sub{margin:20px 0 0;max-width:23em;font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:rgba(253,246,234,.94);text-shadow:0 2px 14px rgba(19,42,59,.5)}
.hero-btns{display:flex;gap:16px;justify-content:flex-start;margin-top:36px}
.hero-dots{display:flex;gap:4px;margin-top:34px;margin-left:-14px}
.hero-dot{position:relative;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-dot::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:1px solid rgba(253,246,234,.85);background:transparent;transition:background .25s,transform .25s,border-color .25s}
.hero-dot:hover::before{background:rgba(253,246,234,.5)}
.hero-dot.is-active::before{background:var(--orange);border-color:var(--orange);transform:scale(1.25)}
.hero-dot:focus-visible{outline:2px solid var(--orange);outline-offset:-8px}

/* sections & grounds */
.sec{padding:var(--pad) 0;scroll-margin-top:84px}.sec-sand{background:var(--sand)}
.sec-cream{background:var(--cream)}
.sec-off{background:var(--offwhite)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
.head{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gut);align-items:end;margin-bottom:64px}
.head h2{font-size:clamp(34px,4.2vw,58px);max-width:16em}
.head>p{font-size:17px;line-height:1.75;color:rgba(19,42,59,.82)}

/* intro statement */
.intro{background:var(--offwhite);padding:148px 40px 140px;text-align:center}
.intro .kicker{justify-content:center;margin-bottom:32px}
.intro p{max-width:21em;margin:0 auto;font-size:clamp(30px,3.7vw,52px);line-height:1.26;letter-spacing:-.014em}
.intro .intro-sub{max-width:36em;margin:30px auto 0;font-size:17px;line-height:1.72;letter-spacing:0;color:rgba(19,42,59,.82)}

/* experience banner — one photograph, two words */
.band{position:relative;min-height:min(82vh,720px);min-height:min(82dvh,720px);display:grid;place-items:center;background:var(--ink);overflow:hidden}
.band>img{position:absolute;left:0;right:0;top:-13%;width:100%;height:126%;object-fit:cover;object-position:center 52%;will-change:translate}
.band::after{content:"";position:absolute;inset:0;background:rgba(19,42,59,.5)}
.band-row{position:relative;z-index:2;display:flex;align-items:baseline;gap:clamp(48px,16vw,300px);color:var(--cream);font-size:clamp(34px,6vw,86px);line-height:1;padding:0 40px}
.band-row em{font-style:italic}

/* cards — cream on sand, square, no shadow, 3px colour cap */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.card{background:var(--cream);border-top:3px solid var(--b1);display:flex;flex-direction:column}
.card.c2{border-top-color:var(--b2)}.card.c3{border-top-color:var(--b3)}
.card.c4{border-top-color:var(--b4)}.card.c5{border-top-color:var(--b5)}
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,42,59,.5) 0%,rgba(19,42,59,.1) 42%,rgba(19,42,59,0) 100%)}
.card-word{position:absolute;z-index:2;left:22px;top:14px;font-family:var(--script);font-size:34px;line-height:1;color:var(--orange)}
.card-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1;gap:8px}
.card-body h3{font-size:27px}
.card-body .cap{margin-bottom:4px}
.card-price{font-size:20px;margin-top:6px}
.card-ctas{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid rgba(19,42,59,.1)}

.grid-2{grid-template-columns:repeat(2,1fr);gap:40px}

/* services carousel */
.cx{position:relative;overflow:hidden;background:var(--sand);padding:var(--pad) 0 72px;scroll-margin-top:84px}
.cx-bgs{position:absolute;inset:-30px}
.cx-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(13px);transform:scale(1.06);transition:opacity 1s ease-in-out}
.cx-bg.is-active{opacity:1}
.cx-bgs::after{content:"";position:absolute;inset:0;background:rgba(248,226,196,.3)}
.cx-in{position:relative;z-index:2}
.cx-stage{margin-top:8px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.cx-track{display:flex;align-items:stretch;gap:26px;padding:26px 0 46px;transition:transform .62s cubic-bezier(.4,0,.2,1);will-change:transform}
.cx-item{position:relative;flex:none;width:min(380px,86vw);display:flex;flex-direction:column;padding:28px 30px 32px;background:var(--cream);border-top:3px solid var(--b1);text-align:center;filter:blur(2.6px) saturate(.92);opacity:.6;transform:scale(.955);transition:filter .55s ease,opacity .55s ease,transform .55s ease}
.cx-item.c2{border-top-color:var(--b2)}.cx-item.c3{border-top-color:var(--b3)}.cx-item.c4{border-top-color:var(--b4)}.cx-item.c5{border-top-color:var(--b5)}
.cx-item.is-active{filter:none;opacity:1;transform:scale(1);box-shadow:0 2px 4px rgba(19,42,59,.05),0 8px 18px rgba(19,42,59,.07),0 20px 44px rgba(19,42,59,.08),0 40px 88px rgba(19,42,59,.09)}
.cx-item:not(.is-active) .cx-panel{pointer-events:none}
.cx-pick{position:absolute;inset:0;z-index:3;background:none;border:0;cursor:pointer;font:inherit;color:transparent}
.cx-item.is-active .cx-pick{pointer-events:none}
.cx-pick:focus-visible{outline:2px solid var(--orange);outline-offset:-4px}
.cx-item h3{font-size:19px;letter-spacing:.16em;text-transform:uppercase;line-height:1.35}
.cx-panel{display:flex;flex-direction:column;gap:14px;width:100%;flex:1;margin-top:22px}
.cx-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.cx-img img{width:100%;height:100%;object-fit:cover}
.cx-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,42,59,.5) 0%,rgba(19,42,59,.08) 44%,rgba(19,42,59,0) 100%)}
.cx-panel p{font-size:16px;line-height:1.65;color:rgba(19,42,59,.84)}
.cx-foot{margin-top:auto;padding-top:18px;display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:nowrap;border-top:1px solid rgba(19,42,59,.12)}
.cx-price{font-size:19px;white-space:nowrap}
.cx-panel .btn{align-self:center;margin-top:16px}
.cx-nav{position:relative;z-index:2;width:-moz-fit-content;width:fit-content;margin:14px auto 0;display:flex;align-items:center;gap:6px;padding:5px;border-radius:999px;background:var(--orange);border:2px solid transparent;transition:background .18s}
.cx-nav:hover{background:var(--orange-hover)}
.cx-arrow{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .18s}
.cx-arrow:hover{background:rgba(19,42,59,.14);color:var(--ink)}
.cx-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.cx-count{min-width:66px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--ink);white-space:nowrap}
.cx-count b{font-weight:600}

/* scroll-coupled drift: the offset is set per frame from scroll position, so it
   must not be eased — translate stays untransitioned while transform animates */
.cx-track,.fq-track{transition-property:transform}

/* the galley */
.gal{padding-top:66px}
.gal-head{max-width:34em}
.gal-head h2{font-size:clamp(32px,3.8vw,52px)}
.gal-head p{margin-top:20px;font-size:18px;line-height:1.68;color:rgba(19,42,59,.84)}
.gal-strip{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px;margin-top:48px;height:min(42vh,380px)}
.gal-strip figure{margin:0;height:100%;overflow:hidden}
.gal-strip img{width:100%;height:100%;object-fit:cover}
.gal-b img{object-position:center 62%}
.gal-c img{object-position:center 46%}

/* the boat */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:center}
.split>img{aspect-ratio:1/1;object-fit:cover;object-position:center 56%;width:100%}
#boat .split{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:56px}
#boat .split>img{aspect-ratio:16/9;object-fit:cover;object-position:center center}
.boat-sub{margin-top:18px;font-size:clamp(22px,2.4vw,30px);line-height:1.3}
.boat-copy>p{margin-top:22px;max-width:32em;color:rgba(19,42,59,.82)}
.specs{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;border-top:1px solid rgba(19,42,59,.14)}
.spec{padding:18px 32px 18px 0;border-bottom:1px solid rgba(19,42,59,.14);display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.spec:nth-child(even){padding-right:0;padding-left:32px}
.spec .cap{white-space:nowrap}
.spec strong{font-weight:400;font-size:21px;white-space:nowrap;text-align:right}

/* seakeeper */
.sk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);align-items:center}
.sk-lede{margin-top:20px;font-size:21px;line-height:1.55;font-style:italic;max-width:26em}
.sk-copy>p{margin-top:18px;max-width:32em;color:rgba(19,42,59,.82)}
.sk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:34px 0 34px;padding:22px 0;border-top:1px solid rgba(19,42,59,.14);border-bottom:1px solid rgba(19,42,59,.14)}
.sk-stat strong{display:block;margin-top:8px;font-weight:400;font-size:24px}
.sk-toggle-wrap{display:flex;align-items:center;gap:20px}
.sk-toggle{position:relative;width:86px;height:42px;border-radius:999px;background:rgba(19,42,59,.14);border:1px solid rgba(19,42,59,.28);cursor:pointer;padding:0;flex:none;transition:background .3s,border-color .3s}
.sk-toggle::after{content:"";position:absolute;top:4px;left:4px;width:32px;height:32px;border-radius:50%;background:var(--offwhite);transition:transform .35s cubic-bezier(.5,1.5,.5,1),background .3s}
.sk-toggle[data-on="true"]{background:var(--orange);border-color:var(--orange-hover)}
.sk-toggle[data-on="true"]::after{transform:translateX(44px);background:var(--ink)}
.sk-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.sk-toggle-label strong{display:block;margin-top:4px;font-weight:400;font-size:21px}
.sk-stage{position:relative;aspect-ratio:5/4;overflow:hidden;background:linear-gradient(180deg,var(--sand) 0%,var(--cream) 26%,#9dc4bd 44%,#3f7f96 62%,var(--b5) 78%,var(--ink) 100%)}
.sk-sun{position:absolute;top:19%;right:20%;width:58px;height:58px;border-radius:50%;background:var(--orange);opacity:.92}
.sk-waves{position:absolute;left:-10%;right:-10%;bottom:0;height:58%;overflow:hidden}
.sk-wave{position:absolute;left:0;right:0;height:100%;background-repeat:repeat-x}
.sk-wave1{top:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60'%3E%3Cpath d='M0 30 Q 30 8 60 30 T 120 30 T 180 30 T 240 30 V60 H0 Z' fill='%23125574'/%3E%3C/svg%3E");background-size:240px 60px;animation:sk-shift 8s linear infinite;opacity:.9}
.sk-wave2{top:22%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 60'%3E%3Cpath d='M0 30 Q 40 6 80 30 T 160 30 T 240 30 T 320 30 V60 H0 Z' fill='%230e3d55'/%3E%3C/svg%3E");background-size:320px 70px;animation:sk-shift-r 11s linear infinite}
.sk-wave3{top:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 60'%3E%3Cpath d='M0 30 Q 45 4 90 30 T 180 30 T 270 30 T 360 30 V60 H0 Z' fill='%23132A3B'/%3E%3C/svg%3E");background-size:360px 80px;animation:sk-shift 14s linear infinite}
@keyframes sk-shift{from{background-position-x:0}to{background-position-x:-240px}}
@keyframes sk-shift-r{from{background-position-x:0}to{background-position-x:320px}}
.sk-boat{position:absolute;left:50%;bottom:22%;width:56%;max-width:360px;aspect-ratio:1/1;transform-origin:50% 70%;transform:translateX(-50%)}
@keyframes sk-roll{0%{transform:translateX(-50%) rotate(-9deg)}25%{transform:translateX(-50%) rotate(2deg) translateY(-4%)}50%{transform:translateX(-50%) rotate(10deg)}75%{transform:translateX(-50%) rotate(-3deg) translateY(-3%)}100%{transform:translateX(-50%) rotate(-9deg)}}
@keyframes sk-calm{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-1.4%)}}
.sk-stage[data-on="false"] .sk-boat{animation:sk-roll 3.6s ease-in-out infinite}
.sk-stage[data-on="true"] .sk-boat{animation:sk-calm 4s ease-in-out infinite}
.sk-boat svg{width:100%;height:100%;display:block;overflow:visible}
.sk-meter{position:absolute;top:20px;left:20px;width:166px;background:rgba(19,42,59,.72);border:1px solid rgba(253,246,234,.22);padding:13px 14px 11px;color:var(--cream);z-index:4}
.sk-meter-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(253,246,234,.82);margin-bottom:9px}
.sk-dot{width:7px;height:7px;border-radius:50%;background:var(--b1);animation:sk-blink 1.2s ease-in-out infinite}
.sk-stage[data-on="true"] .sk-dot{background:var(--b4);animation:none}
@keyframes sk-blink{0%,100%{opacity:1}50%{opacity:.35}}
.sk-bar{position:relative;height:16px;background:rgba(253,246,234,.12);border:1px solid rgba(253,246,234,.2);border-radius:999px}
.sk-bar::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:rgba(253,246,234,.45)}
.sk-bubble{position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;background:var(--orange);transform:translate(-50%,-50%)}
.sk-stage[data-on="false"] .sk-bubble{animation:sk-swing 3.6s ease-in-out infinite}
@keyframes sk-swing{0%{transform:translate(calc(-50% - 54px),-50%)}25%{transform:translate(calc(-50% + 14px),-50%)}50%{transform:translate(calc(-50% + 58px),-50%)}75%{transform:translate(calc(-50% - 18px),-50%)}100%{transform:translate(calc(-50% - 54px),-50%)}}
.sk-read{display:flex;justify-content:space-between;align-items:baseline;margin-top:9px;font-size:11px;letter-spacing:.06em;color:rgba(253,246,234,.85)}
.sk-read strong{font-weight:400;font-size:16px;color:var(--cream)}
.sk-gyro{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:10px;padding:9px 15px;background:rgba(19,42,59,.72);border:1px solid rgba(129,188,168,.55);border-radius:999px;color:var(--cream);font-size:10px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s;z-index:4}
.sk-stage[data-on="true"] .sk-gyro{opacity:1;transform:translateY(0)}
.sk-ring{width:20px;height:20px;border-radius:50%;border:2px solid rgba(129,188,168,.55);border-top-color:var(--b4);animation:sk-spin 1.4s linear infinite}
@keyframes sk-spin{to{transform:rotate(360deg)}}
.sk-foot{position:absolute;bottom:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-end;z-index:4;pointer-events:none;color:var(--cream)}
.sk-foot .lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(253,246,234,.85)}
.sk-foot .word{font-family:var(--script);font-size:28px;line-height:1;opacity:0;transition:opacity .35s}
.sk-stage[data-on="true"] .sk-foot .word{opacity:1}

/* FAQ */
.faq{max-width:920px;border-top:1px solid rgba(19,42,59,.16)}
.faq details{border-bottom:1px solid rgba(19,42,59,.16)}
.faq summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;font-size:22px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:24px;font-size:24px;color:currentColor;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq summary{transition:color .2s}
.faq details{--q:var(--orange-ink)}
.faq details:nth-child(6n+1){--q:#C22800}
.faq details:nth-child(6n+2){--q:#8F4A08}
.faq details:nth-child(6n+3){--q:#8F5313}
.faq details:nth-child(6n+4){--q:#2E6B5E}
.faq details:nth-child(6n+5){--q:#125574}
.faq details:nth-child(6n+6){--q:#C22800}
.faq summary:hover,.faq details[open] summary{color:var(--q)}
.faq summary:focus-visible{outline:2px solid var(--q);outline-offset:4px}
.faq p{padding:0 80px 30px 0;max-width:44em;color:rgba(19,42,59,.82);font-size:16px}

/* custom intake */
.custom-split{align-items:center}
.custom-img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:center 58%}
.custom-copy h2{font-size:clamp(32px,3.8vw,52px)}
.custom-copy p{margin-top:22px;max-width:30em;color:rgba(19,42,59,.84)}
.custom-copy .btn{margin-top:32px}
.custom-note{display:block;margin-top:18px}

/* FAQ vertical carousel */
.faq-sec{padding:64px 0 58px}
.faq-split{align-items:center}
.faq-lede{margin-top:22px;max-width:30em;color:rgba(19,42,59,.82)}
.faq-split .btn{margin-top:32px}
.fq{--rh:64px;--ah:214px}
.fq-stage{position:relative;height:calc(var(--ah) + 4 * var(--rh));transition:height .58s cubic-bezier(.4,0,.2,1);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.fq-track{transition:transform .58s cubic-bezier(.4,0,.2,1);will-change:transform}
.fq-row{position:relative;height:var(--rh);overflow:hidden;border-bottom:1px solid rgba(19,42,59,.16);padding-right:46px;opacity:.5;filter:blur(1.5px);transition:height .58s cubic-bezier(.4,0,.2,1),opacity .45s,filter .45s;--q:var(--orange-ink)}
.fq-row:nth-child(6n+1){--q:#C22800}
.fq-row:nth-child(6n+2){--q:#8F4A08}
.fq-row:nth-child(6n+3){--q:#8F5313}
.fq-row:nth-child(6n+4){--q:#2E6B5E}
.fq-row:nth-child(6n+5){--q:#125574}
.fq-row:nth-child(6n+6){--q:#C22800}
.fq-row.is-active{height:var(--ah);opacity:1;filter:none}
.fq-row h3{display:flex;align-items:center;height:var(--rh);margin:0;font-size:21px;line-height:1.3;transition:color .25s}
.fq-row.is-active h3{color:var(--q)}
.fq-row p{margin:0;font-size:15.5px;line-height:1.62;color:rgba(19,42,59,.84);opacity:0;transition:opacity .4s}
.fq-row.is-active p{opacity:1}
.fq-row::after{content:"+";position:absolute;right:12px;top:19px;font-size:23px;line-height:1;color:var(--q)}
.fq-row.is-active::after{content:"–"}
.fq-pick{position:absolute;inset:0;z-index:3;background:none;border:0;cursor:pointer;color:transparent}
.fq-row.is-active .fq-pick{pointer-events:none}
.fq-pick:focus-visible{outline:2px solid var(--q);outline-offset:-4px}
.fq-nav{display:flex;align-items:center;gap:22px;margin-top:28px}
.fq-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(19,42,59,.45);background:transparent;color:var(--ink);font-size:16px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.fq-arrow:hover{background:var(--ink);color:var(--cream)}
.fq-arrow:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.fq-count{font-size:13px;letter-spacing:.2em;white-space:nowrap}
.fq-count b{font-weight:400}

/* upgrades — same carousel as the charters, one notch quieter */
.cx-up{padding-top:66px}
.cx-up .cx-item h3{font-size:20px}
.cx-up .cx-panel p{font-size:14px}
.cx-up .cx-price{font-size:16px}
.cx-up .cx-foot{padding-bottom:4px;justify-content:flex-end}
.cx-up .cx-panel{gap:12px;justify-content:flex-start}
.cx-up .cx-img{aspect-ratio:1/1;flex:none;min-height:0}
.cx-up .cx-panel p{margin-bottom:2px}
.cx-up .cx-item{cursor:default}

/* closer */
.closer{position:relative;min-height:min(88vh,780px);min-height:min(88dvh,780px);display:grid;place-items:center;background:var(--ink);overflow:hidden;text-align:center}
.closer>img{position:absolute;left:0;right:0;top:-13%;width:100%;height:126%;object-fit:cover;object-position:center 54%;will-change:translate}
.closer::after{content:"";position:absolute;inset:0;background:radial-gradient(78% 62% at 50% 52%,rgba(19,42,59,.56) 0%,rgba(19,42,59,.4) 46%,rgba(19,42,59,.14) 78%,rgba(19,42,59,0) 100%),linear-gradient(180deg,rgba(19,42,59,.28) 0%,rgba(19,42,59,.14) 44%,rgba(19,42,59,.46) 100%)}
.closer-in{position:relative;z-index:2;padding:0 40px;color:var(--cream)}
.closer-in h2{font-size:clamp(34px,4.6vw,64px);max-width:20em;margin:0 auto;text-shadow:0 2px 18px rgba(19,42,59,.45)}

/* about page */
.page-about .hdr{position:sticky;transform:none;opacity:1;pointer-events:auto}
.ab-head{padding-bottom:88px}
.ab-head h1{font-size:clamp(32px,4.2vw,56px);max-width:20em}
.ab-head p{margin-top:22px;max-width:36em;font-size:17px;line-height:1.7;color:rgba(19,42,59,.82)}
.ab-h2{font-size:clamp(30px,3.4vw,46px);max-width:17em}
.ab-story{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--gut);align-items:start}
.ab-p{max-width:32em;font-size:16.5px;line-height:1.74;color:rgba(19,42,59,.84)}
.ab-p + .ab-p{margin-top:20px}
.ab-tall{margin:0;overflow:hidden}
.ab-tall img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 56%}
.ab-wide{margin:36px 0 0;overflow:hidden}
.ab-wide img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:66% 50%}
.ab-lede{margin-top:32px;max-width:40em;font-size:16.5px;line-height:1.72;color:rgba(19,42,59,.84)}
.creds{margin-top:36px;border-top:1px solid var(--line)}
.cred{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.cred .cap{padding-top:3px}
.cred strong{font-weight:400;font-size:17.5px;line-height:1.48}
.crew-fine{margin-top:22px;max-width:42em;font-size:13.5px;line-height:1.62;color:rgba(19,42,59,.58)}
.ab-creds{margin-top:36px}
.prins{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gut);margin-top:44px;border-top:1px solid var(--line)}
.prin{padding:22px 0 24px;border-bottom:1px solid var(--line)}
.prin p{margin-top:9px;max-width:30em;font-size:15.5px;line-height:1.62;color:rgba(19,42,59,.82)}

/* email signup — inside the footer's first column */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ftr-sign{margin-top:30px;max-width:25em}
.cap-row{display:flex;gap:10px;align-items:stretch;margin-top:12px}
.cap-field{flex:1;min-width:0;display:flex}
.cap-field input{width:100%;min-width:0;background:var(--cream);border:1px solid rgba(253,246,234,.5);border-radius:999px;padding:11px 18px;font-family:var(--serif);font-size:15px;color:var(--ink)}
.cap-field input::placeholder{color:rgba(19,42,59,.46)}
.cap-field input:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,145,42,.4)}
.cap-done{margin-top:12px;font-size:16px;line-height:1.45;color:var(--cream)}
.cap-err{margin-top:9px;font-size:13.5px;color:var(--orange)}
.cap-fine{display:block;margin-top:11px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(119,174,160,.9)}

/* footer — the one navy area */
.ftr{background:var(--ink);color:var(--cream);padding:96px 0 40px}
.ftr-in{max-width:var(--max);margin:0 auto;padding:0 40px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,.85fr);gap:var(--gut)}
.ftr img.lock{width:226px}
.ftr>.ftr-in>div>p{margin-top:28px;font-size:15px;line-height:1.72;color:rgba(253,246,234,.75);max-width:24em}
.ftr h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:22px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15px;color:rgba(253,246,234,.82)}
.ftr a{color:rgba(253,246,234,.82);font-size:15px}
.ftr a:hover{color:var(--orange)}
.ftr-base{max-width:var(--max);margin:64px auto 0;padding:26px 40px 0;border-top:1px solid rgba(253,246,234,.16);display:flex;justify-content:space-between;gap:24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(119,174,160,.95)}

/* WhatsApp — bottom-left, brand green, never restyled */
.wa{position:fixed;left:28px;bottom:28px;z-index:70;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 4px 14px rgba(19,42,59,.28)}
.wa svg{width:30px;height:30px;fill:#fff}

@media(max-width:1024px){
.split,.sk,.ftr-in,.head{grid-template-columns:1fr;gap:44px}

.head{margin-bottom:48px}
.grid,.grid-2{grid-template-columns:repeat(2,1fr);gap:32px}
.gal-strip{grid-template-columns:1fr 1fr;gap:16px;height:min(38vh,320px)}
.gal-c{display:none}
.nav{display:none}.burger{display:block}
.nav.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--offwhite);flex-direction:column;align-items:flex-start;gap:22px;padding:28px 40px 34px;border-bottom:1px solid rgba(19,42,59,.14)}
.sk-copy{order:2}
}
@media(max-width:680px){
.gal-strip{grid-template-columns:1fr 1fr;gap:12px;height:min(32vh,240px)}
.cap-in{grid-template-columns:1fr;gap:30px}
.ab-story,.prins{grid-template-columns:1fr;gap:40px}
.prins{gap:0}
.ab-tall img{aspect-ratio:16/9}
.cap-row{flex-direction:column}
.cap-row .btn{justify-content:center}
.cap-form{min-height:0}
.cred{grid-template-columns:1fr;gap:5px}
.fq{--rh:76px;--ah:290px}
.fq-row h3{font-size:19px}
.cx-item{filter:none;opacity:.4}
:root{--pad:64px;--gut:32px}
.wrap,.hdr-in,.ftr-in,.ftr-base,.hero-in,.intro,.closer-in{padding-left:22px;padding-right:22px}
.grid,.grid-2{grid-template-columns:1fr;gap:24px}
.menu li{grid-template-columns:1fr;gap:4px}
.specs{grid-template-columns:1fr}
.spec,.spec:nth-child(even){padding-left:0;padding-right:0}
.hero-btns{flex-direction:column}
.hero-btns .btn{justify-content:center}
.band-row{flex-direction:column;align-items:flex-start;gap:8px}
.sk-stats{grid-template-columns:1fr 1fr}
.faq-sec{padding:48px 0 44px}
.fq{--rh:74px;--ah:270px}
.fq-row h3{font-size:19px}
.faq summary{font-size:19px}.faq p{padding-right:0}
.ftr-base{flex-direction:column;gap:12px}
.card-ctas{flex-direction:column;align-items:flex-start;gap:16px}
/* touch: nothing tappable under 44px */
.nav.open{padding:20px 22px 26px;gap:2px}
.nav.open a:not(.btn){display:flex;align-items:center;width:100%;min-height:44px}
.nav.open .btn{margin:10px 0 0;width:100%;justify-content:center}
.burger{padding:12px 6px;min-height:44px}
.ghost{min-height:44px}
.ftr ul{gap:2px}
.ftr ul a{display:inline-flex;align-items:center;min-height:44px}
.fq-arrow,.up-arrow{width:44px;height:44px}
/* iOS zooms the page when a focused field is under 16px */
input,select,textarea{font-size:16px}
.cap-field input{font-size:16px}
/* the stage fade eats the active card's edges at phone width */
.cx-stage{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.cx-track{padding-bottom:38px}
.cx{padding-bottom:56px}
.cx-up,.gal{padding-top:44px}
.hero-in{padding-bottom:72px}
.hero-btns{gap:12px}
.gal-strip{height:min(32vh,240px);height:min(32dvh,240px)}
}
/* small phones: FAQ questions wrap to three lines */
@media(max-width:480px){
.fq{--rh:92px;--ah:352px}
.fq-row h3{font-size:17.5px;line-height:1.28}
.fq-row p{font-size:14.5px}
.intro p{font-size:24px}
.intro .intro-sub{font-size:15.5px;margin-top:22px}
.hero-sub{font-size:16px;margin-top:16px}
.cred{grid-template-columns:1fr;gap:5px}
}
/* phone held sideways: vh bands collapse to nothing */
@media(max-width:900px) and (max-height:520px){
.hero,.band,.closer{min-height:520px}
}

/* rail variants — the same five bands, reordered per section */
.rail.rv2>i:nth-child(1){background:var(--b5)}.rail.rv2>i:nth-child(2){background:var(--b3)}.rail.rv2>i:nth-child(3){background:var(--b1)}.rail.rv2>i:nth-child(4){background:var(--b4)}.rail.rv2>i:nth-child(5){background:var(--b2)}
.rail.rv3>i:nth-child(1){background:var(--b2)}.rail.rv3>i:nth-child(2){background:var(--b4)}.rail.rv3>i:nth-child(3){background:var(--b5)}.rail.rv3>i:nth-child(4){background:var(--b1)}.rail.rv3>i:nth-child(5){background:var(--b3)}
.rail.rv4>i:nth-child(1){background:var(--b3)}.rail.rv4>i:nth-child(2){background:var(--b1)}.rail.rv4>i:nth-child(3){background:var(--b4)}.rail.rv4>i:nth-child(4){background:var(--b2)}.rail.rv4>i:nth-child(5){background:var(--b5)}
.rail.rv5>i:nth-child(1){background:var(--b4)}.rail.rv5>i:nth-child(2){background:var(--b5)}.rail.rv5>i:nth-child(3){background:var(--b2)}.rail.rv5>i:nth-child(4){background:var(--b3)}.rail.rv5>i:nth-child(5){background:var(--b1)}
.rail.rv6>i:nth-child(1){background:var(--b1)}.rail.rv6>i:nth-child(2){background:var(--b5)}.rail.rv6>i:nth-child(3){background:var(--b3)}.rail.rv6>i:nth-child(4){background:var(--b2)}.rail.rv6>i:nth-child(5){background:var(--b4)}
.rail.rv7>i:nth-child(1){background:var(--b5)}.rail.rv7>i:nth-child(2){background:var(--b2)}.rail.rv7>i:nth-child(3){background:var(--b4)}.rail.rv7>i:nth-child(4){background:var(--b1)}.rail.rv7>i:nth-child(5){background:var(--b3)}
.rail.rv8>i:nth-child(1){background:var(--b2)}.rail.rv8>i:nth-child(2){background:var(--b1)}.rail.rv8>i:nth-child(3){background:var(--b5)}.rail.rv8>i:nth-child(4){background:var(--b4)}.rail.rv8>i:nth-child(5){background:var(--b3)}

/* active card shadow: give it room to fade out fully before the stage clips it */
.cx-track{padding-bottom:124px}
.cx-stage{margin-bottom:-84px}
.cx-stage+*{position:relative;z-index:3}
/* open phone menu: the header's soft bottom fade (mask) would also hide the menu panel below it, so drop it while open */
.hdr.menu-open,.hdr:has(.nav.open){-webkit-mask-image:none;mask-image:none;background:var(--offwhite)}

/* Language switch, EN · NL · ES (added by scripts/i18n.js to the menu and the footer of the translated pages) */
.lang-sw{display:inline-flex;align-items:center;gap:12px}
.lang-sw a{opacity:.62;text-decoration:none}
.lang-sw a:hover{opacity:1}
.lang-sw a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.nav .lang-sw{margin-left:-14px}
.ftr2-legal .lang-sw{gap:14px}
