*{box-sizing:border-box}
:root{color-scheme:light;--ink:#102e5c}
html,body{margin:0;min-height:100%;font-family:Inter,"Avenir Next",Avenir,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}
body{min-height:100svh;overflow-x:hidden;background:#54c9e8}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{z-index:-2;background:url("/portal-assets/hero-sea-phuket.jpg") center 52%/110% auto no-repeat;filter:saturate(1.23) contrast(1.02) brightness(1.23)}
body::after{z-index:-1;background:linear-gradient(180deg,#ffffff00 36%,#74dfeb16 60%,#65d9e936 100%),radial-gradient(ellipse 56% 35% at 50% 17%,#fff3 0%,#fff0 100%)}
.palm-frame{position:fixed;z-index:0;top:0;width:min(19vw,270px);height:min(34vh,300px);pointer-events:none;filter:drop-shadow(0 3px 3px #173e2928)}
.palm-frame svg{width:100%;height:100%;overflow:visible}
.palm-frame-left{left:0;transform:translate(-22%,-8%) rotate(-5deg)}
.palm-frame-right{right:0;transform:translate(22%,-8%) rotate(5deg)}
.portal{position:relative;z-index:1;width:min(1740px,100%);min-height:100svh;margin:0 auto;padding:clamp(12px,2vh,24px) clamp(18px,3vw,48px) 18px;display:flex;flex-direction:column;align-items:center}
.hero{flex:0 0 auto;width:100%;min-height:0;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0 clamp(15px,2vh,24px)}
.brand-mark{width:auto;height:clamp(62px,6.5vw,90px);display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,18px);margin:0 auto 0;color:#102e5c;text-decoration:none;filter:drop-shadow(0 2px 3px #fff9)}
.brand-mark img{width:clamp(76px,7vw,104px);height:100%;object-fit:contain;overflow:visible}
.brand-wordmark{position:relative;display:inline-block;padding:0 2px 7px;font:italic 600 clamp(29px,3.1vw,43px)/1 Georgia,"Times New Roman",serif;letter-spacing:-.045em;color:#102e5c;white-space:nowrap;text-shadow:0 1px 0 #fff,0 2px 8px #fff}
.brand-wordmark::after{content:"";position:absolute;left:12%;right:7%;bottom:0;height:3px;border-radius:50%;background:linear-gradient(90deg,#e5a62f00,#e5a62f 25%,#e5a62f 75%,#e5a62f00);transform:rotate(-2deg)}
.brand-gold{color:#c58b21}
h1{font-size:clamp(42px,3.9vw,57px);line-height:.98;letter-spacing:-.04em;margin:0;color:#102e5c;font-weight:850;text-shadow:0 1px 0 #fff,0 3px 10px #fff,0 8px 24px #ffffffd9}
.tagline{position:relative;font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-weight:700;color:#0068c3;font-size:clamp(30px,3.5vw,47px);line-height:1;margin:7px 0 0;text-shadow:0 1px 1px #fff,0 3px 12px #ffffff}
.tagline::after{content:"";display:block;width:58%;height:8px;margin:3px auto 0;border-top:4px solid #ff9900;border-radius:50%;transform:rotate(-3deg);filter:drop-shadow(0 1px 1px #fff8)}
.destinations{width:100%;flex:1 1 auto;display:flex;justify-content:center;gap:clamp(9px,1vw,12px);align-items:center;min-height:0}
.destination{display:block;flex:0 1 auto;width:min(calc((100% - 36px)/4),calc((100svh - 310px)*.57));aspect-ratio:257/452;min-width:0;overflow:hidden;border-radius:clamp(15px,1.6vw,22px);outline-offset:4px;box-shadow:0 16px 38px #07324a45,0 3px 10px #092a3d30;transition:transform .24s ease,box-shadow .24s ease}
.destination:hover{transform:translateY(-4px);box-shadow:0 24px 44px #07324a55,0 3px 10px #092a3d30}
.destination:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 6px #087fb5,0 16px 38px #07324a47}
.destination picture,.destination img{display:block;width:100%;height:100%}
.destination img{object-fit:fill}
.photo-credits{position:absolute;bottom:4px;right:12px;color:#fff;text-shadow:0 1px 3px #143b4d;font:500 10px/1.2 system-ui,sans-serif;text-decoration:underline;text-underline-offset:2px;opacity:.9}
.photo-credits:hover{opacity:1}
@media(max-width:1000px) and (min-width:681px){.portal{padding-inline:16px}.destination{width:min(calc((100% - 27px)/4),calc((100svh - 260px)*.57))}.destinations{gap:9px}.hero{padding-bottom:12px}h1{font-size:clamp(36px,4.5vw,50px)}.tagline{font-size:clamp(27px,3.6vw,38px)}}
@media(max-width:680px){
 body{background:#19bada}
 body::before{background-size:cover;background-position:53% 48%;filter:saturate(1.23) contrast(1.02) brightness(1.23)}
 body::after{background:linear-gradient(180deg,#ffffff00 32%,#74dfeb16 58%,#65d9e936 100%),radial-gradient(ellipse 80% 25% at 50% 10%,#fff4 0%,#fff0 100%)}
 .palm-frame{width:min(31vw,145px);height:min(20vh,145px);opacity:.92}
 .portal{height:100svh;min-height:0;padding: max(8px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom));justify-content:center}
 .hero{flex:0 0 auto;padding:0 0 clamp(8px,1.3vh,12px)}
 .brand-mark{height:50px;gap:5px;margin-bottom:0}
 .brand-mark img{width:55px}
 .brand-wordmark{font-size:clamp(22px,6vw,28px);padding-bottom:5px}
 .brand-wordmark::after{height:2px}
 h1{font-size:clamp(26px,7.2vw,31px);letter-spacing:-.04em;line-height:1}
 .tagline{font-size:clamp(18px,5vw,21px);margin-top:8px;white-space:nowrap;text-shadow:0 1px 1px #fff,0 2px 10px #fff}
 .tagline::after{width:57%;height:5px;border-top-width:3px;margin-top:0}
 .destinations{width:min(100%,330px,calc((100svh - 150px)*.49));flex:0 1 auto;display:flex;flex-direction:column;gap:clamp(5px,.8vh,8px);min-height:0;align-items:stretch;justify-content:center}
 .destination{width:100%;height:auto;flex:0 0 auto;min-height:0;aspect-ratio:289/129;border-radius:14px;border:1px solid #ffffffaa}
 .destination.huahin{aspect-ratio:289/149}
 .destination.pattaya,.destination.samui{aspect-ratio:289/145}
 .photo-credits{display:none}
}
@media(max-width:380px){.portal{padding-inline:8px}.destinations{gap:5px}.destination{border-radius:12px}}
@media(max-height:680px) and (max-width:680px){.brand-mark{height:34px}.brand-mark img{width:38px}.brand-wordmark{font-size:20px}.hero{padding-bottom:5px}.tagline{font-size:17px}.destinations{max-height:calc(100svh - 110px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}