/* Boracay Visitors coming-soon page. Same tokens as the main site (site.css BV-370 to 373). */
:root{
  --palm:#14382f; --sea:#0b2a3a; --deep:#061a25; --seaglass:#1f7a74; --coral:#ff7b54; --sun:#ff795e; --sand:#ffd9a8;
  --surface:#fffaf1; --wash:#d9e6df; --ink:#14382f; --ink-2:#46645b;
  --bd-card:1px solid rgba(20,56,47,.08); --sh-1:0 1px 2px rgba(20,56,47,.05),0 4px 12px rgba(20,56,47,.05); --sh-3:0 12px 32px rgba(20,56,47,.10);
  --r-card:18px; --r-pill:999px; --ease-out:cubic-bezier(.2,.7,.2,1);
  --font-d:"Young Serif",Georgia,serif; --font:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1120px; color-scheme:light only;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wash);color:var(--ink);font:400 1rem/1.65 var(--font)}
a{color:inherit}
:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--palm);border-radius:6px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.nb{white-space:nowrap}

/* header: the logo on deep green, over the photo */
.top{position:absolute;top:0;left:0;right:0;z-index:3;height:68px;display:flex;align-items:center;padding:0 20px;padding-top:env(safe-area-inset-top,0px);
  background:var(--palm);box-shadow:0 1px 0 rgba(255,250,241,.08)}
.brand{display:inline-flex;align-items:center;gap:10px;color:#f5f2e9}
.brand .bm{height:32px;width:auto}
.brand .bt{display:inline-flex}
.brand .bw{height:18px;width:auto}
@media (min-width:768px){.brand .bm{height:38px}.brand .bw{height:22px}}

/* hero: full screen photo; the words sit on a dark shade over the sea */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--deep)}
.hero picture,.hero .photo{position:absolute;inset:0;width:100%;height:100%}
.hero .photo{object-fit:cover;object-position:50% 58%}
/* phones and tablets: the photo fills the top of the screen so the sailboat shows above the words */
@media (max-width:1023px){.hero picture{bottom:auto;height:min(64%,620px);-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}.hero .photo{position:static;display:block;object-position:50% 50%}}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,26,37,0) 30%,rgba(6,26,37,.55) 55%,rgba(6,26,37,.88) 80%,rgba(6,26,37,.94) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:112px}
/* the shade behind the words (as on the main site): the words always sit on deep sea, whatever the photo does behind them */
.hero .wrap::before{content:"";position:absolute;z-index:-1;left:calc(50% - 50vw);right:calc(50% - 50vw);top:24px;bottom:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,26,37,0) 0,rgba(6,26,37,.84) 96px,rgba(6,26,37,.9) 100%)}
.hero .wrap>*{max-width:640px}
.pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:6px 14px 6px 10px;border-radius:var(--r-pill);background:rgba(6,26,37,.72);border:1px solid rgba(255,217,168,.45);
  color:var(--sand);font:800 .875rem/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase}
.pill .dot{width:10px;height:10px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 3px rgba(255,121,94,.3)}
h1{margin:0 0 14px;font:400 clamp(2.5rem,1.6rem + 4.4vw,4.75rem)/1.02 var(--font-d);letter-spacing:-.02em;text-shadow:0 2px 18px rgba(6,26,37,.55)}
.lede{margin:0 0 20px;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.55;color:#f3f7f5;text-shadow:0 1px 10px rgba(6,26,37,.6)}
.sunline{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 14px;border-radius:var(--r-pill);background:rgba(6,26,37,.72);font:700 .9375rem/1.35 var(--font);color:#fff}
.sunline svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--sand);stroke-width:2;stroke-linecap:round}
.sunline[hidden]{display:none}
.credit{position:absolute;right:12px;bottom:66px;z-index:2;margin:0;max-width:calc(100% - 24px);padding:6px 10px;border-radius:12px;background:rgba(11,42,58,.78);font-size:.75rem;line-height:1.4;color:#fff}
.credit a{color:#fff}
/* the wave edge into the page */
.hero .wave{position:absolute;left:0;right:0;bottom:-1px;z-index:2;width:100%;height:56px;display:block}


/* desktop: the photo sits to the right so the sailboat stays in full colour; the words are on a deep-sea band on the left */
@media (min-width:1024px){
  .hero{align-items:center}
  .hero picture{left:34%}
  .hero::after{background:linear-gradient(90deg,var(--deep) 0,var(--deep) 40%,rgba(6,26,37,.9) 47%,rgba(6,26,37,.35) 56%,rgba(6,26,37,0) 63%),linear-gradient(180deg,rgba(6,26,37,0) 72%,rgba(6,26,37,.55) 100%)}
  .hero .wrap::before{display:none}
  .hero .wrap{padding-top:110px;padding-bottom:120px}
  .hero .wrap>*{max-width:520px}
}
/* what's coming */
.what{padding:40px 0 48px}
@media (min-width:1024px){.what{padding:56px 0 64px}}
h2{margin:0 0 20px;font:400 clamp(1.75rem,1.2rem + 2vw,2.5rem)/1.15 var(--font-d);letter-spacing:-.015em;color:var(--palm)}
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--surface);border:var(--bd-card);box-shadow:var(--sh-1);border-radius:var(--r-card);padding:20px}
@media (min-width:1024px){.tile{padding:24px}}
.tile h3{margin:14px 0 6px;font:800 1.125rem/1.3 var(--font);color:var(--palm)}
.tile p{margin:0;color:var(--ink-2)}
.ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff1dc 0%,#ffd7a6 48%,#ffb98a 100%);color:var(--palm)}
.ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ask{margin:28px 0 0;font-size:1.0625rem}
.ask a{color:var(--palm);font-weight:700;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
/* official accounts: the same cards as sureplace.com.ph (brand-colour icon, name, handle) */
.accounts{margin-top:36px}
.acc-h{margin:0 0 6px;font:800 1.25rem/1.3 var(--font);letter-spacing:0;color:var(--palm)}
.acc-note{margin:0 0 18px;max-width:56ch;color:var(--ink-2)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.socials{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:880px}
.socials li{display:flex}
.socials a{flex:1 1 0%;display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px 12px;align-items:center;align-content:center;min-height:var(--tap,44px);padding:14px 16px;background:#fff;border:1px solid rgba(20,56,47,.16);border-radius:10px;text-decoration:none;color:var(--ink);font-weight:700}
.socials a:hover{border-color:var(--palm)}
.socials .h{grid-column:2;font-weight:400;font-size:.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.socials .si{grid-row:span 2;width:24px;height:24px}
.ic-facebook{fill:#0866ff}.ic-instagram{fill:url(#ig-grad)}.ic-tiktok,.ic-x{fill:#000}.ic-youtube{fill:#f00}
@media (max-width:640px){.socials{grid-template-columns:1fr 1fr}.socials li:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:409px){.socials{grid-template-columns:1fr}}
@media (min-width:1024px){.socials{grid-template-columns:repeat(5,1fr);max-width:none}}
/* no one-word last lines (Safari 17.5+ and Chrome support balance) */
h1,.lede,.tile h3,.tile p,.acc-note,.ask,.foot p{text-wrap:balance}
.foot{background:var(--palm);color:#e8f1ec;padding:24px 0 calc(24px + env(safe-area-inset-bottom,0px));font-size:.875rem;line-height:1.5}
.foot p{margin:0;max-width:720px}

/* motion: transform only, once; text is never hidden; all of it off for reduced motion */
@media (prefers-reduced-motion:no-preference){
  .hero .photo{animation:settle 2.6s var(--ease-out) both}
  .brand .sun{transform-box:fill-box;transform-origin:50% 100%;animation:sunrise 1.6s var(--ease-out) .2s both}
  .hero .wrap>*{animation:rise .9s var(--ease-out) both}
  .hero .wrap>:nth-child(2){animation-delay:.12s}.hero .wrap>:nth-child(3){animation-delay:.24s}.hero .wrap>:nth-child(4){animation-delay:.36s}
  .js .tile{transform:translateY(22px);transition:transform .7s var(--ease-out)}
  .js .tile.in{transform:none}
  .js .tile:nth-child(2){transition-delay:.08s}.js .tile:nth-child(3){transition-delay:.16s}.js .tile:nth-child(4){transition-delay:.24s}
}
@keyframes settle{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes sunrise{from{transform:translateY(55%) scale(.85)}to{transform:none}}
@keyframes rise{from{transform:translateY(18px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}