:root{
  --em:#0f4c45; --em-d:#0b3b36; --em-dd:#082d29;
  --sand:#ece6da; --ivory:#f6f2ea; --ink:#1f2e2b; --muted:#5d6b67; --line:rgba(15,76,69,.2);
  --gold:#c9a54a;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(1.25rem,5vw,4.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font:300 16px/1.8 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2{font-family:var(--sans);font-weight:200;margin:0;line-height:1.15;color:var(--em);letter-spacing:.005em}
h2{font-size:clamp(2rem,3.8vw,3.1rem)}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.5rem 1rem}
.label{font:500 .74rem/1 var(--serif);letter-spacing:.36em;text-transform:uppercase;color:var(--em);margin-bottom:1.5rem;opacity:.85}
.dot{margin:0 .9em;opacity:.5}
.ph{overflow:hidden;background:#d9d2c3}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.8s cubic-bezier(.2,.6,.2,1)}
figure:hover .ph img{transform:scale(1.03)}

.btn{display:inline-block;padding:1.05em 2.8em;border:1px solid var(--em);color:var(--em);background:none;font:400 .7rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .4s,color .4s,border-color .4s}
.btn:hover{background:var(--em);color:var(--ivory)}
.btn.light{border-color:rgba(246,242,234,.75);color:var(--ivory)}
.btn.light:hover{background:var(--ivory);color:var(--em);border-color:var(--ivory)}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.5rem var(--pad);transition:background .5s,padding .5s}
.hdr.solid,.hdr.open{background:var(--em);padding-top:.9rem;padding-bottom:.9rem}
.brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;gap:.45rem}
.brand img{width:118px;height:auto}
.brand small{font:500 .58rem/1 var(--serif);letter-spacing:.42em;text-transform:uppercase;color:rgba(246,242,234,.85);padding-left:.42em}
.hdr.solid .brand small{display:none}
.menu-btn{justify-self:start;display:flex;align-items:center;gap:.8rem;background:none;border:0;padding:.4rem 0;cursor:pointer;color:var(--ivory);position:relative;width:auto;height:30px}
.menu-btn span{display:block;position:absolute;left:0;width:22px;height:1px;background:var(--ivory);transition:transform .35s,top .35s}
.menu-btn span:first-of-type{top:11px}.menu-btn span:nth-of-type(2){top:18px}
.menu-btn em{font:400 .66rem/1 var(--sans);font-style:normal;letter-spacing:.3em;text-transform:uppercase;margin-left:36px}
.hdr.open .menu-btn span:first-of-type{top:15px;transform:rotate(45deg)}
.hdr.open .menu-btn span:nth-of-type(2){top:15px;transform:rotate(-45deg)}
.hdr-enquire{justify-self:end;font:400 .66rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ivory);text-decoration:none;padding:.5em 0;border-bottom:1px solid rgba(201,165,74,.7)}
.menu{position:fixed;inset:0;z-index:40;background:var(--em);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;opacity:0;transition:opacity .45s}
.menu[hidden]{display:none}
.menu.show{opacity:1}
.menu a{font:200 clamp(1.7rem,4vw,2.4rem)/1.15 var(--sans);color:var(--ivory);text-decoration:none}
.menu a:hover{color:#fff}
.menu .menu-cta{margin-top:1.2rem;font:400 .7rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;border:1px solid rgba(246,242,234,.6);padding:1.1em 2.6em}

/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;display:flex;align-items:center;color:var(--ivory);overflow:hidden;background:var(--em-d)}
.hero-img{position:absolute;inset:0;background:url(../img/hero.jpg) center 40%/cover no-repeat;transform:scale(1.05);animation:settle 2.8s cubic-bezier(.2,.6,.2,1) forwards}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,45,41,.78) 0%,rgba(8,45,41,.45) 45%,rgba(8,45,41,.1) 100%),linear-gradient(180deg,rgba(8,45,41,.45),rgba(8,45,41,0) 30%)}
@keyframes settle{to{transform:scale(1)}}
.hero-txt{position:relative;padding:0 var(--pad);max-width:820px;animation:rise 1.6s .3s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero .label{color:var(--ivory);opacity:.9}
.hero h1{font-size:clamp(2.7rem,6.4vw,5.6rem);color:var(--ivory);margin-bottom:2.6rem;max-width:12ch}

/* intro */
.intro{background:var(--sand);text-align:center;padding:clamp(7rem,16vw,12rem) var(--pad)}
.statement{font:200 clamp(1.6rem,3vw,2.5rem)/1.45 var(--sans);color:var(--em);max-width:860px;margin:0 auto;text-wrap:balance}

/* sections */
.sec{padding:clamp(6rem,11vw,9rem) var(--pad)}
.sand{background:var(--sand)}
.sec-head{text-align:center;margin-bottom:clamp(3rem,6vw,5rem)}
.aside{text-align:center;max-width:620px;margin:clamp(3rem,5vw,4.5rem) auto 0;font:italic 400 1.15rem/1.6 var(--serif);color:var(--muted);text-wrap:balance}

.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.4rem);max-width:1440px;margin:0 auto}
.panel{margin:0;position:relative}
.panel .ph{aspect-ratio:3/4}
.panel figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.4rem 1.6rem;text-align:center;color:var(--ivory);background:linear-gradient(0deg,rgba(8,45,41,.7),rgba(8,45,41,0))}
.panel strong{display:block;font:200 1.9rem/1.1 var(--sans)}
.panel span{display:block;font:500 .66rem/1 var(--serif);letter-spacing:.36em;text-transform:uppercase;margin-top:.7rem;opacity:.9}

.exp{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.4vw,2.2rem) clamp(.8rem,1.6vw,1.4rem);max-width:1180px;margin:0 auto}
.exp figure{margin:0}
.exp .ph{aspect-ratio:1/1}
.exp figcaption{font:500 .7rem/1 var(--serif);letter-spacing:.32em;text-transform:uppercase;text-align:center;padding-top:1.2rem;color:var(--em)}

/* stay */
.stay{display:grid;grid-template-columns:1fr 1.25fr;background:var(--em);color:rgba(246,242,234,.85)}
.stay-panel{align-self:center;padding:clamp(4.5rem,9vw,8rem) clamp(1.5rem,6vw,6rem)}
.stay .label{color:var(--ivory)}
.stay h2{color:var(--ivory);margin-bottom:.5rem}
.place{font:italic 400 1.2rem var(--serif);color:rgba(246,242,234,.7);margin-bottom:2rem}
.stay-panel p:not(.label):not(.place){max-width:400px}
.small{font:500 .66rem/1 var(--serif)!important;letter-spacing:.32em;text-transform:uppercase;margin:1.8rem 0 2.6rem;color:var(--gold)}
.stay-img{margin:0;position:relative;min-height:520px}
.stay-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stay-img figcaption,.photo-cap{position:absolute;left:1.2rem;bottom:1rem;font:italic 400 .9rem var(--serif);color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.45)}

/* journeys */
.journeys{position:relative;padding:clamp(6rem,12vw,10rem) var(--pad);display:flex;justify-content:flex-end;overflow:hidden;background:var(--em-d)}
.j-bg{position:absolute;inset:0;background:url(../img/hondaafushi.jpg) center/cover no-repeat}
.j-card{position:relative;background:rgba(15,76,69,.94);color:rgba(246,242,234,.85);max-width:520px;padding:clamp(2.6rem,5vw,4rem);margin-right:clamp(0rem,6vw,6rem)}
.j-card .label{color:var(--ivory)}
.j-card h2{color:var(--ivory);margin-bottom:1.6rem}
.j-route{margin:2rem 0 2.4rem;padding:1.2rem 0;border-top:1px solid rgba(201,165,74,.45);border-bottom:1px solid rgba(201,165,74,.45);font:italic 400 1.1rem/1.6 var(--serif);color:var(--ivory)}
.j-trade{margin-top:2.4rem;font-size:.8rem;color:rgba(246,242,234,.6)}
.j-trade a{color:var(--ivory);text-decoration:none;border-bottom:1px solid rgba(201,165,74,.6)}

/* arrive */
.arrive{padding:clamp(5rem,9vw,7rem) var(--pad);text-align:center;background:var(--ivory)}
.arrive-line{list-style:none;margin:0 auto;padding:0;display:flex;align-items:center;justify-content:center;max-width:1100px;gap:1.4rem}
.arrive-line li{display:flex;flex-direction:column;align-items:center}
.arrive-line strong{font:200 1.45rem/1.2 var(--sans);color:var(--em)}
.arrive-line span{font:500 .62rem/1 var(--serif);letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}
.arrive-line .leg{flex:1;font:italic 400 1rem var(--serif);color:var(--muted);position:relative;padding-bottom:.7rem;min-width:120px}
.arrive-line .leg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}

/* enquire */
.enquire{background:var(--sand);padding:clamp(6rem,12vw,9.5rem) var(--pad)}
.enq-head{text-align:center;margin-bottom:clamp(3rem,6vw,4.5rem)}
.enq-head h2{margin-bottom:1.6rem}
.enq-links{font-size:.92rem}
.enq-links a{text-decoration:none;border-bottom:1px solid var(--line)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem 2.6rem;max-width:820px;margin:0 auto}
.form label span{display:block;font:500 .64rem/1 var(--serif);letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.form input,.form textarea{width:100%;border:0;border-bottom:1px solid rgba(15,76,69,.3);background:transparent;padding:.7rem 0;font:300 1.05rem var(--sans);color:var(--ink);border-radius:0;resize:vertical}
.form input:focus,.form textarea:focus{outline:0;border-bottom-color:var(--em)}
.full{grid-column:1/-1}
.form-foot{text-align:center;margin-top:.6rem}
.form-note{font-size:.78rem;color:var(--muted);margin-top:1.2rem}
.form-error{color:#8a3a22;font-size:.85rem;margin-top:.8rem}

/* footer */
.ftr{background:var(--em);color:rgba(246,242,234,.7);text-align:center;padding:5rem var(--pad) 3.5rem;font-size:.82rem}
.ftr img{width:132px;height:auto;margin:0 auto}
.ftr-sub{font:500 .58rem/1 var(--serif);letter-spacing:.42em;text-transform:uppercase;margin:.8rem 0 2.6rem;padding-left:.42em}
.ftr a{text-decoration:none;color:var(--ivory)}
.ftr-copy{margin-top:1.2rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,242,234,.45)}
.ftr-copy a{color:rgba(246,242,234,.6)}

/* discreet whatsapp */
.wa{position:fixed;right:1.2rem;bottom:1.2rem;z-index:45;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(15,76,69,.94);color:var(--ivory);border:1px solid rgba(246,242,234,.35);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .5s,transform .5s,background .3s}
.wa.show{opacity:1;transform:none;pointer-events:auto}
.wa:hover{background:var(--em-dd)}
.wa svg{width:19px;height:19px}

/* fade */
.fade{opacity:0;transform:translateY(20px);transition:opacity 1.1s ease,transform 1.1s ease}
.fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fade,.hero-img,.hero-txt{opacity:1;transform:none;transition:none;animation:none}}

/* responsive */
@media (max-width:900px){
  .stay{grid-template-columns:1fr}
  .stay-img{min-height:0;aspect-ratio:4/3;order:-1}
  .stay-panel{text-align:center}
  .stay-panel p:not(.label):not(.place){margin-left:auto;margin-right:auto}
  .journeys{justify-content:center;padding-top:18rem}
  .j-card{margin:0}
  .photo-cap{top:1rem;bottom:auto}
}
@media (max-width:720px){
  .hdr{padding:1.1rem var(--pad)}
  .menu-btn em,.hdr-enquire{display:none}
  .brand img{width:104px}
  .menu-btn{grid-column:3;justify-self:end;width:24px}
  .brand{grid-column:2;grid-row:1}
  .hero{align-items:flex-end}
  .hero-txt{padding-bottom:5.5rem}
  .hero-img{background-position:30% center}
  .hero-img::after{background:linear-gradient(180deg,rgba(8,45,41,.5) 0%,rgba(8,45,41,.15) 30%,rgba(8,45,41,.55) 65%,rgba(8,45,41,.85) 100%)}
  .panels{grid-template-columns:1fr;gap:1rem}
  .panel .ph{aspect-ratio:4/5}
  .exp{grid-template-columns:1fr 1fr;gap:1.6rem .8rem}
  .exp figcaption{font-size:.62rem;letter-spacing:.24em}
  .arrive-line{flex-direction:column;gap:0}
  .arrive-line .leg{flex:none;min-width:0;padding:0;margin:1.1rem 0;flex-direction:column}
  .arrive-line .leg::after{display:none}
  .arrive-line .leg::before{content:"";width:1px;height:26px;background:var(--line);margin-bottom:.8rem}
  .form{grid-template-columns:1fr;gap:1.8rem}
  .enq-links .dot,.ftr-links .dot{display:block;height:.35rem;visibility:hidden}
  .journeys{padding:16rem 1rem 1rem}
  .j-card{padding:2.4rem 1.6rem}
}

/* refinements */
.panel figcaption{padding:5rem 1.4rem 1.7rem;background:linear-gradient(0deg,rgba(8,45,41,.82) 0%,rgba(8,45,41,.45) 55%,rgba(8,45,41,0) 100%);text-shadow:0 1px 10px rgba(8,45,41,.35)}
.stay-img figcaption{left:0;right:0;bottom:0;padding:2.6rem 1.2rem .9rem;background:linear-gradient(0deg,rgba(8,45,41,.7),rgba(8,45,41,0))}
h1,h2,.statement,.panel strong,.arrive-line strong{font-variant-numeric:lining-nums}
@media (max-width:720px){.stay-img figcaption{font-size:.82rem}}