/* 3 · Quiet — after aman.com: warm paper, light serif, framed images, a lot of air */
:root{
  --loader-bg:#ebebe8;--loader-ink:#2f2d2a;--loader-bar:#2f2d2a;
  --bg:#ebebe8; --ink:#2f2d2a; --muted:#5e5a54; --line:#d8d0c4; --deep:#2f2d2a; --card:#e1e1db;
  --font-display:"Source Serif 4",Georgia,serif;
  --font-body:"Hanken Grotesk",system-ui,sans-serif;
  --hdr-h:76px; --max:1240px; --focus:#2f2d2a; --fs-body:16px;
}
.hdr{color:var(--ink)}
.hdr.solid{background:var(--bg);box-shadow:0 1px 0 var(--line)}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr}
.logo{grid-column:2;grid-row:1;align-items:center;text-align:center;font-family:var(--font-display)}
.logo-name{font-size:18px;font-weight:400;letter-spacing:.2em;text-transform:uppercase}
.logo-sub{font-family:var(--font-display);font-style:italic;font-size:16px;letter-spacing:.02em;color:var(--muted);margin-top:2px}
.nav{grid-column:1/-1;grid-row:1;justify-content:space-between;pointer-events:none}
.nav a{pointer-events:auto;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:inherit}
.nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:5px}
.nav a:nth-child(4){margin-right:auto}
.nav a:nth-child(5){margin-left:auto}
.nav{gap:20px}
.nav a:nth-child(1),.nav a:nth-child(2),.nav a:nth-child(3),.nav a:nth-child(4){order:0}
.btn{font-size:16px;letter-spacing:.08em;text-transform:uppercase;padding:0 20px;font-weight:500}
.btn-primary,.nav a.btn-primary{background:var(--deep);color:var(--bg)}
.btn-primary:hover{background:#000}
.menu{grid-column:3;grid-row:1;justify-self:end}
@media (max-width:1080px){.hdr-in{grid-template-columns:auto 1fr auto}.logo{grid-column:1;align-items:flex-start;text-align:left}}

.hero{color:#fff;--hero-scrim:rgb(30 28 25 / .82);--hero-scrim-hold:34%;--hero-scrim-top:rgb(30 28 25 / .66);--hero-scrim-top-h:160px;--hero-k:1.05}
.hero h1{font-weight:400;line-height:1.08;letter-spacing:-.01em}
.hero-lead{color:rgb(255 255 255 / .94)}
.btn-hero{background:var(--bg);color:var(--ink)}
.btn-hero:hover{background:#fff}
.link-hero{font-size:16px;letter-spacing:0.105em;text-transform:uppercase;text-underline-offset:6px;color:#fff}

section:not(.hero):not(.yacht):not(.story):not(.cta){padding:clamp(80px,10vw,140px) 0}
h2{font-weight:300;font-size:clamp(30px,3vw,44px);line-height:1.12}
.sec-head{text-align:center;max-width:640px;margin:0 auto 64px}
.sec-lead{color:var(--muted);margin-top:18px;font-size:17px}

.dest-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,64px);align-items:start}
.dest:nth-child(2){margin-top:120px}
.dest-media{aspect-ratio:4/5}
.dest-body{padding-top:24px}
.dest h3{font-weight:300;font-size:34px}
.dest-tag{font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--muted);margin:4px 0 14px}
.dest-places,.dest-meta{font-size:16px;color:var(--muted)}
.dest-meta{margin-top:8px}
.price{color:var(--ink);font-weight:500}

.yacht{min-height:82svh;display:flex;align-items:flex-end;color:#fff;padding-bottom:clamp(56px,8vw,110px)}
.yacht::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(30 28 25 / .7),rgb(30 28 25 / 0) 60%);z-index:1}
.yacht .btn-on-media{color:#fff;box-shadow:inset 0 0 0 1px #fff}
.yacht .btn-on-media:hover{background:#fff;color:var(--ink)}
.yacht-price{font-size:16px;margin-bottom:28px}
.btn-on-media{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-on-media:hover{background:var(--ink);color:var(--bg)}

.easy{background:var(--card)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.steps li{padding:8px 28px;border-left:1px solid var(--line);text-align:center}
.steps li:first-child{border-left:0}
.num{display:block;font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--muted);margin-bottom:18px}
.steps h3{font-weight:400;font-size:24px;margin-bottom:10px}
.steps p{color:var(--muted);font-size:16px}

.gallery-title{text-align:center;margin-bottom:48px}
.gallery-row{--g-gap:clamp(12px,2vw,28px);padding:0 var(--gutter);grid-auto-rows:clamp(220px,28vw,420px)}
.g2,.g4{transform:translateY(64px)}
.gallery{padding-bottom:calc(clamp(80px,10vw,140px) + 64px)!important}

.story{min-height:84svh;display:flex;align-items:flex-end;color:#fff;padding-bottom:clamp(56px,10vh,120px)}
.story::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(30 28 25 / .74),rgb(30 28 25 / .5) 55%,rgb(30 28 25 / .32));z-index:1}   /* 2 Nov: the bright lagoon clip needs more behind the copy, less over the water */
.story-copy{max-width:none}
.story-meta{font-size:16px;letter-spacing:0.12em;text-transform:uppercase;margin:16px 0 26px}
.story-quote{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(22px,2.4vw,32px);line-height:1.35;margin-bottom:34px;max-width:30ch}
.story .btn-on-media{color:#fff;box-shadow:inset 0 0 0 1px #fff}
.story .btn-on-media:hover{background:#fff;color:var(--ink)}

.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.rev{display:flex;flex-direction:column;gap:22px;text-align:center}
.rev blockquote{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:20px;line-height:1.45}
.rev figcaption{display:flex;flex-direction:column;font-size:16px;letter-spacing:0.09em;text-transform:uppercase;color:var(--muted)}
.rev b{font-weight:500;color:var(--ink)}

.trade{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trade-in{display:grid;grid-template-columns:1fr 1.3fr auto;align-items:center;gap:24px 56px}
.trade-text{font-family:var(--font-display);font-weight:300;font-size:22px;color:var(--muted)}

.cta{display:grid;grid-template-columns:1fr 1fr;min-height:auto;align-items:center}
.cta-media{position:relative;aspect-ratio:4/5;grid-column:1;grid-row:1}
.cta-in{grid-column:2;grid-row:1;width:auto;margin:0;padding:clamp(48px,7vw,120px)}
.cta-text{color:var(--muted);font-size:17px;max-width:40ch;margin:20px 0 32px}
.btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}

.ftr{border-top:1px solid var(--line);padding:72px 0 28px;font-size:16px}
.ftr .logo{align-items:flex-start;text-align:left}
.ftr h2{font-family:var(--font-body);font-size:16px;letter-spacing:0.105em;text-transform:uppercase;font-weight:500;margin-bottom:16px;color:var(--muted)}
.ftr-bottom{border-top:1px solid var(--line);margin-top:56px;padding-top:22px;font-size:16px;color:var(--muted)}

.mbar{background:var(--bg);box-shadow:0 -1px 0 var(--line)}
.mbar .btn-ghost{box-shadow:inset 0 0 0 1px var(--ink)}

@media (max-width:860px){
  .dest-grid,.rev-grid{grid-template-columns:1fr}
  .dest:nth-child(2){margin-top:0}
  .cta{grid-template-columns:1fr}
  .cta-media{grid-column:1;grid-row:1}
  .cta-in{grid-column:1;grid-row:2;padding:48px var(--gutter)}
  .steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .steps li:nth-child(3){border-left:0}
  .trade-in{grid-template-columns:1fr}
  .g2,.g4{transform:none}
  .gallery{padding-bottom:clamp(80px,10vw,140px)!important}
  .steps h3{font-size:20px}
  .steps li{padding:8px 14px}
}

.hero,.yacht,.story{background-color:#2a2925}
.yacht .price{color:#fff}

/* Header fit (1 Nov): below this width the links and both header buttons no longer fit at 16px, so the menu takes over */
@media (max-width:1519px){.nav{display:none}.menu{display:block}}

/* Header over the hero (2 Nov): transparent while the video is on screen, so the video fills the whole window;
   base.js adds .solid once the hero has scrolled away. */
.hdr:not(.solid){color:#fff}
.hdr:not(.solid) .logo-sub{color:rgb(255 255 255 / .85)}
.hdr:not(.solid) .nav .btn-primary{background:#fff;color:var(--ink)}
.hdr:not(.solid) .nav .btn-primary:hover{background:var(--bg)}

/* 2 Nov (user, after trying both): rounded buttons and menu panel, photos keep square corners and come alive under the
   pointer with a slow, slight zoom */
.btn{border-radius:999px}
.menu-panel{border-radius:16px}
.dest-media,.g,.cta-media{overflow:hidden}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .dest-media img,.g img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s}
  .dest:hover .dest-media img,.g:hover img{transform:scale(1.045);filter:saturate(1.08)}
}

/* Header wordmark (2 Nov): one line "1000 Islands Travel" in caps; "Remote Indonesia" lives in the headline and the footer, not twice on one screen */
.hdr .logo-name{font-size:18px;letter-spacing:.16em}

/* phones: price on the destination photo is white like the rest of the caption (2 Nov) */
@media (max-width:760px){.dest-body .price{color:#fff}}

/* Final pass (2 Nov): white focus ring over the video and on the transparent header */
.hero,.yacht,.story,.hdr:not(.solid){--focus:#fff}
.hdr:not(.solid) .nav .btn-trade:hover{background:#fff;color:var(--ink)}
.hdr.solid .nav .btn-trade:hover{background:var(--ink);color:var(--bg)}
/* final CTA sits on --bg, so the hero's light button vanished there */
.cta .btn-hero{background:var(--ink);color:var(--bg)}
.cta .btn-hero:hover{background:#000;color:#fff}
@media (max-width:760px){.story::after{background:linear-gradient(0deg,rgb(30 28 25 / .84),rgb(30 28 25 / .6) 55%,rgb(30 28 25 / .3))}}   /* phones: copy runs full width at the bottom */
/* 2 Nov: r3 opens on the cape, and the lead sat on its white sand; the corner scrim now holds full strength for the first third */
.ftr-brand p{color:var(--muted)}
/* 2 Nov: mockup meta lines with month and year are too long for caps; the guest name stays in caps */
.story-meta{text-transform:none;letter-spacing:.02em}
.rev figcaption span{text-transform:none;letter-spacing:0}

/* For travel agents (2 Nov, user: hairlines only, easy to scroll past; this block is the real business):
   a warm stone band in the page's own quiet palette, larger serif heading, ink copy */
.trade{background:#ddd5c7;border:0}
.trade h2{font-size:clamp(34px,3.6vw,52px)}
.trade-text{color:var(--ink)}