/* 2 · Field kit — after bndcarhire.com: signal yellow on charcoal, heavy condensed type, contour lines */
:root{
  --loader-bg:#202327;--loader-ink:#fff;--loader-bar:#f2b630;
  --bg:#efefec; --ink:#202327; --muted:#4b4f55; --sun:#f2b630; --char:#202327; --paper:#fbfaf6;
  --font-display:"Saira Condensed",system-ui,sans-serif;
  --font-body:"Saira",system-ui,sans-serif;
  --hdr-h:72px; --max:1280px; --focus:#202327; --fs-body:16.5px;
}
body{background:var(--bg)}   /* contour-line backdrop removed 2 Nov: it fought the photos */
.hdr{color:#fff;background:transparent}   /* over the video until the hero scrolls away (2 Nov): one of the two full-screen-video directions, with v3 */
.hdr.solid{background:var(--char);box-shadow:0 2px 0 var(--sun)}
.logo{font-family:var(--font-display);text-transform:uppercase;line-height:1}
.logo-name{font-weight:700;font-size:20px;letter-spacing:.04em}
.logo-sub{font-weight:600;font-size:16px;letter-spacing:0.22em;color:var(--sun);margin-top:4px}
.nav a{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.09em;text-transform:uppercase}
.nav a:not(.btn):hover{color:var(--sun)}
.btn{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.1em;text-transform:uppercase;padding:0 22px;border:0}
.btn-primary,.btn-hero{background:var(--sun);color:var(--char)}
.btn-primary:hover,.btn-hero:hover{background:#fff}

.hero{--hero-scrim:rgb(20 22 25 / .86);--hero-scrim-top:rgb(20 22 25 / .6);--hero-k:1.12}
.hero h1{font-weight:700;line-height:.96;text-transform:uppercase;letter-spacing:.02em}
.hero-lead{color:#ececec}
.link-hero{font-family:var(--font-display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration-color:var(--sun);text-underline-offset:6px;text-decoration-thickness:2px}

section:not(.hero):not(.yacht):not(.story):not(.cta){padding:clamp(72px,10vw,130px) 0}
h2{font-weight:700;font-size:clamp(36px,3.6vw,52px);line-height:.98;text-transform:uppercase;letter-spacing:.02em}
.sec-head{max-width:760px;margin-bottom:52px}
.sec-lead{font-size:18px;color:var(--muted);margin-top:18px;max-width:46ch}

.dest-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.dest{background:var(--paper);box-shadow:0 1px 0 rgb(0 0 0 / .06)}
.dest-media{aspect-ratio:3/2;position:relative}
.dest-body{padding:26px 28px 30px;position:relative}
.dest h3{font-weight:800;font-size:40px;line-height:1;text-transform:uppercase}
.dest-tag{font-weight:500;margin:8px 0 4px}
.dest-places{color:var(--muted);font-size:16px}
.dest-meta{margin-top:18px;align-items:center;font-size:16px;color:var(--muted)}
.price{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:.04em;background:var(--sun);color:var(--char);padding:8px 12px}

.yacht{min-height:82svh;display:flex;align-items:flex-end;color:#fff;padding-bottom:clamp(48px,7vw,96px)}
.yacht::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(20 22 25 / .85),rgb(20 22 25 / .3) 50%,rgb(20 22 25 / 0) 75%);z-index:1}
.yacht h2{font-size:clamp(40px,4.2vw,60px)}
.yacht-price{display:block;width:max-content;margin-bottom:30px}

.easy{background:var(--char);color:#fff}
.easy .sec-lead{color:#c9cbcf}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.steps li{background:#2a2e33;padding:32px 26px 36px}
.num{display:block;font-family:var(--font-display);font-weight:800;font-size:64px;line-height:1;color:var(--sun);margin-bottom:22px}
.steps h3{font-weight:800;font-size:26px;text-transform:uppercase;margin-bottom:8px}
.steps p{color:#c9cbcf}

.gallery-title{margin-bottom:36px}
.gallery-row{--g-gap:10px;padding:0 10px}

.story{min-height:78svh;display:flex;align-items:flex-end;color:#fff;padding-bottom:clamp(40px,6vw,80px)}
.story::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgb(20 22 25 / .88),rgb(20 22 25 / .35) 55%,rgb(20 22 25 / 0) 80%);z-index:1}
.story-meta{font-family:var(--font-display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sun);margin:12px 0 16px}
.story-quote{font-size:21px;max-width:36ch;margin-bottom:28px}
.btn-on-media{background:var(--sun);color:var(--char)}

.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{background:var(--paper);padding:30px;border:2px solid var(--char);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.rev blockquote{font-size:17px}
.rev figcaption{display:flex;flex-direction:column;font-size:16px;color:var(--muted)}
.rev b{font-family:var(--font-display);font-size:18px;text-transform:uppercase;color:var(--ink)}

.trade{background:var(--sun)}
.trade-in{display:grid;grid-template-columns:auto 1fr auto;gap:24px 48px;align-items:center}
.trade h2{font-size:clamp(32px,3.2vw,46px)}
.trade-text{font-size:19px;font-weight:500;max-width:40ch}
.trade .btn-primary{background:var(--char);color:#fff}

.cta{min-height:80svh;display:flex;align-items:flex-end;color:#fff;padding-bottom:clamp(56px,10vh,120px)}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(20 22 25 / .8),rgb(20 22 25 / .5) 60%,rgb(20 22 25 / .3));z-index:1}
.cta h2{font-size:clamp(40px,4.4vw,64px)}
.cta-text{font-size:19px;max-width:44ch;margin:22px 0 32px}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn-ghost:hover{background:#fff;color:var(--char)}

.ftr{background:var(--char);color:#fff;padding:72px 0 28px}
.ftr h2{font-size:20px;color:var(--sun);margin-bottom:14px}
.ftr-bottom{border-top:1px solid #3a3e44;margin-top:52px;padding-top:22px;font-size:16px;color:#c9cbcf}

.mbar{background:var(--char)}
.mbar .btn-ghost{box-shadow:inset 0 0 0 2px #fff;color:#fff}

@media (max-width:860px){
  .dest-grid,.rev-grid,.steps{grid-template-columns:1fr}
  .trade-in{grid-template-columns:1fr}
}

.hero,.story,.cta,.yacht{background-color:#202327}

@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}.steps li{padding:22px 18px 24px}.num{font-size:44px;margin-bottom:14px}.steps h3{font-size:21px}}

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

.gallery-row[data-accordion] .g:focus-visible{outline:3px solid var(--sun);outline-offset:-3px}
/* Rounded field kit (2 Nov, user: corners belong in v2, not in v3/v5): cards, photos and buttons soften; signal yellow,
   condensed caps and the charcoal stay */
.btn,.price{border-radius:999px}
.dest,.dest-media,.g,.rev,.steps li,.menu-panel{border-radius:16px;overflow:hidden}

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

/* Final pass (2 Nov): hover on the yellow buttons over video and on the dark trade button; white focus ring on dark and video */
.btn-on-media:hover{background:#fff}
.trade .btn-primary:hover{background:#fff;color:var(--char)}
.hdr,.hero,.yacht,.story,.cta,.ftr,.mbar{--focus:#fff}
.nav .btn-trade:hover{background:#fff;color:var(--char)}
/* the yacht price read as a second yellow button right above "Plan a charter": plain type instead */
.yacht-price{background:none;padding:0;color:#fff;font-size:20px}
.ftr-brand p{color:#c9cbcf}
/* 2 Nov: the mockup meta line with date is too long for caps (detector all-caps-body) */
.story-meta{text-transform:none;letter-spacing:.02em}