/* 1 · Expedition — after explora.com: black and white, wide geometric sans, documentary video */
:root{
  --loader-bg:#0d0d0d;--loader-ink:#fff;--loader-bar:#fff;
  --bg:#fff; --ink:#0d0d0d; --muted:#4a4a4a; --line:#d9d9d9; --soft:#f3f3f1;
  --font-display:"Red Hat Display",system-ui,sans-serif;
  --font-body:"Red Hat Text",system-ui,sans-serif;
  --hdr-h:72px; --max:1320px; --focus:#0d0d0d;
}
.hdr{background:#0d0d0d;color:#fff}
.logo{font-family:var(--font-display);font-weight:700;letter-spacing:0.24em;font-size:16px;text-transform:uppercase}
.logo-name{display:block}
.logo-sub{display:block;font-weight:400;letter-spacing:0.165em;font-size:16px;opacity:.8;margin-top:4px}
.nav a{font-size:16px;font-weight:500}
.nav a:not(.btn):hover{opacity:.7}
.btn{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.01em;padding:0 22px;border:1px solid currentColor}
.hdr .btn-primary{background:#fff;color:#0d0d0d;border-color:#fff}
.menu-panel .btn-primary{background:#0d0d0d;color:#fff}

.hero{--hero-scrim:rgb(0 0 0 / .84);--hero-scrim-top:rgb(0 0 0 / .25)}
.hero h1{font-weight:500;line-height:1.06;letter-spacing:-.005em}
.btn-hero{background:#fff;color:#0d0d0d;border-color:#fff}
.btn-hero:hover{background:transparent;color:#fff}
.link-hero{font-size:16px;font-weight:600;text-underline-offset:6px}

section:not(.hero):not(.yacht):not(.story):not(.cta){padding:clamp(80px,11vw,150px) 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:24px 64px;align-items:end;margin-bottom:56px}
h2{font-weight:500;font-size:clamp(30px,3.1vw,44px);line-height:1.1;letter-spacing:-.005em}
.sec-lead{color:var(--muted);font-size:18px;max-width:44ch;padding-bottom:6px}

.dest-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
.dest-media{aspect-ratio:4/5;background:#111}
.dest-body{border-top:1px solid var(--ink);margin-top:20px;padding-top:18px;display:grid;grid-template-columns:1fr auto;gap:4px 24px}
.dest h3{font-size:30px;font-weight:600;letter-spacing:-.005em}
.dest-tag{grid-column:1;color:var(--muted)}
.dest-places{grid-column:1;font-size:16px;letter-spacing:.04em}
.dest-meta{grid-column:2;grid-row:1/4;flex-direction:column;align-items:flex-end;text-align:right;font-size:16px;color:var(--muted)}
.price{font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:.04em}

.yacht{min-height:86svh;display:flex;align-items:flex-end;color:#fff;padding:0 0 clamp(48px,8vw,96px)}
.yacht::after,.story::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(0 0 0 / .62),rgb(0 0 0 / 0) 70%);z-index:1}
.yacht-copy{max-width:var(--max)}
.yacht-price{color:#fff;margin-bottom:28px}
.btn-on-media{color:#fff}
.btn-on-media:hover{background:#fff;color:#0d0d0d}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.steps li{border-top:1px solid var(--ink);padding-top:22px}
.num{display:block;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:0.163em;margin-bottom:40px}
.steps h3{font-size:20px;font-weight:700;letter-spacing:.04em;margin-bottom:8px}
.steps p{color:var(--muted)}

.gallery{padding-top:0!important;background:#fff}
.gallery-title{margin-bottom:40px}
.gallery-row{--g-gap:4px;padding:0 4px}

.story{min-height:80svh;display:flex;align-items:flex-end;color:#fff;padding-bottom:clamp(56px,10vh,120px)}
.story-copy{max-width:var(--max)}
.story-meta{font-size:16px;font-weight:600;margin:14px 0 22px}
.story-quote{font-family:var(--font-display);font-size:clamp(22px,2.2vw,30px);line-height:1.36;max-width:28ch;margin-bottom:32px}

.reviews{background:var(--soft)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.rev{border-top:1px solid var(--ink);padding-top:24px;display:flex;flex-direction:column;gap:24px;justify-content:space-between}
.rev blockquote{font-size:18px;line-height:1.5}
.rev figcaption{display:flex;flex-direction:column;font-size:16px;color:var(--muted)}
.rev b{color:var(--ink);font-family:var(--font-display);font-size:16px}

.trade{background:#0d0d0d;color:#fff}
.trade-in{display:grid;grid-template-columns:1fr 1.2fr auto;gap:24px 56px;align-items:center}
.trade-text{font-size:19px;color:#d4d4d4;max-width:40ch}
.trade .btn-primary{background:#fff;color:#0d0d0d;border-color:#fff}

.cta{min-height:84svh;display:flex;align-items:flex-end;color:#fff;padding-bottom:clamp(56px,10vh,120px)}
.cta::after{content:"";position:absolute;inset:0;background:rgb(0 0 0 / .5);z-index:1}
.cta-in{max-width:var(--max)}
.cta h2{font-size:clamp(34px,3.9vw,56px)}
.cta-text{max-width:44ch;font-size:19px;margin:20px 0 34px}
.btn-ghost{color:#fff}
.btn-ghost:hover{background:#fff;color:#0d0d0d}

.ftr{background:#0d0d0d;color:#fff;padding:72px 0 32px;font-size:16px}
.ftr h2{font-size:16px;font-weight:600;margin-bottom:16px;color:#bdbdbd}
.ftr-bottom{border-top:1px solid #333;margin-top:56px;padding-top:24px;font-size:16px;color:#bdbdbd}

.mbar{background:#0d0d0d}
.mbar .btn-primary{background:#fff;color:#0d0d0d}
.mbar .btn-ghost{color:#fff}

@media (max-width:860px){
  .sec-head,.trade-in{grid-template-columns:1fr}
  .dest-grid,.steps,.rev-grid{grid-template-columns:1fr}
  .steps{gap:28px}.num{margin-bottom:16px}
  .dest-body{grid-template-columns:1fr}
  .dest-meta{grid-column:1;grid-row:auto;flex-direction:row;align-items:baseline;text-align:left;margin-top:8px}
  .hero h1{letter-spacing:.02em}
}

/* dark fallback under media so white type stays readable before video loads */
.hero,.yacht,.story,.cta{background-color:#16181a}

/* Caps kept only in the logo (1 Nov: caps in nav, buttons and labels read as shouting) */
/* Header fit (1 Nov): below this width the links and both header buttons no longer fit, so the menu takes over */
.nav-drop-btn{font-weight:500}

/* 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:17px;letter-spacing:.2em}

/* 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}}

/* Rounded buttons (2 Nov, user: the square ones jar next to the other directions). A soft 10px corner, not the pill of
   v2/v3/v5, so 1 Expedition keeps its own, more architectural shape. */
.btn{border-radius:10px}
.menu-panel{border-radius:16px}

/* Frosted-glass hero button (2 Nov, user: glass on "Plan your trip" only, not a panel behind the whole copy).
   A light frost over the darkened corner of the video, a bright hairline on the upper edge; fills white on hover. */
.btn-hero{background:linear-gradient(135deg,rgb(255 255 255 / .26),rgb(255 255 255 / .12));color:#fff;border-color:rgb(255 255 255 / .38);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .45);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.btn-hero:hover{background:#fff;color:#0d0d0d;border-color:#fff}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.btn-hero{background:rgb(255 255 255 / .2)}}
/* An ancestor below full opacity cuts the blur off from the video, so the reveal fades the copy's parts, not their parent */
.is-loading body.v1 .hero-copy,.is-loaded body.v1 .hero-copy{opacity:1;translate:none;transition:none}
.is-loading body.v1 :is(.hero h1,.hero-lead,.hero-actions>*){opacity:0;translate:0 18px}
.is-loaded body.v1 :is(.hero h1,.hero-lead,.hero-actions>*){opacity:1;translate:0 0;transition:opacity .9s .2s ease,translate .9s .2s cubic-bezier(.2,.7,.2,1)}

/* Final pass (2 Nov): hover on the white header and trade buttons (they were the only ones that did not answer),
   white focus ring on the black and video sections */
.hdr .btn-primary:hover,.trade .btn-primary:hover{background:transparent;color:#fff}
.menu-panel .btn-primary:hover{background:#3a3a3a;border-color:#3a3a3a}
.hdr,.hero,.yacht,.story,.cta,.trade,.ftr,.mbar{--focus:#fff}
.nav .btn-trade:hover{background:#fff;color:#0d0d0d}
.nav-drop-panel{border-radius:12px}
.ftr-brand p{color:#bdbdbd}

/* For travel agents (2 Nov, user: the black band before the sunset CTA felt grim, and this block is the real business):
   warm sand that leads into the sunset photo, full section, larger heading, black button */
.trade{background:#ebe2d3;color:var(--ink);--focus:#0d0d0d}
.trade h2{font-size:clamp(34px,3.6vw,52px)}
.trade-text{color:#3f3a33}
.trade .btn-primary{background:#0d0d0d;color:#fff;border-color:#0d0d0d}
.trade .btn-primary:hover{background:transparent;color:#0d0d0d}