/* ============================================================
   DESTINATIONS / NETHERLANDS — "NACHT EDITION"
   Deep-indigo gallery editorial. Full-bleed hero with an
   overlapping offset card, gold hairlines, a lookbook rail of
   tall portrait cards, alternating full-bleed zig-zag rows,
   a mixed-span service mosaic and a full-bleed UK feature.

   Self-contained: this page deliberately uses none of the
   shared theme components (.hero, .passage, .related-grid …).
   Brand colours + Plus Jakarta Sans only, both inherited from
   /css/theme.css tokens.

   Static: no JS, no transitions, no hover changes, no details.
   Every rule is `.nl-b .nlb-x` (0,2,0) so single-class rules
   always beat theme's element-qualified resets.
   ============================================================ */

.nl-b{
  --night:#06042E;
  --night-2:#0B0947;
  --night-3:#120F64;
  --panel:#100D52;
  --gold:#CEA800;
  --gold-2:#E8BE0B;
  --yellow:#FFE100;
  --paper:#F7F5EC;
  --chalk:#F2F0FF;
  --dim:#B4AFD8;
  --dimmer:#8B85B8;
  --line:rgba(206,168,0,.30);
  --line-2:rgba(255,255,255,.14);

  --gut:clamp(20px,5vw,72px);
  --edge:calc(max((100vw - 1440px)/2, 0px) + var(--gut));

  --d1:clamp(44px,8.4vw,116px);
  --d2:clamp(31px,4.4vw,60px);
  --d3:clamp(24px,2.9vw,38px);
  --h3:clamp(19px,1.55vw,24px);

  display:block;
  background:var(--night);
  color:var(--dim);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.64;
  overflow-x:clip;
}

/* ── local resets (element-qualified: 0,1,1) ── */
.nl-b p{margin:0}
.nl-b h1,.nl-b h2,.nl-b h3,.nl-b h4{margin:0;font-weight:800;color:var(--chalk);letter-spacing:-.028em;line-height:1.04}
.nl-b ul,.nl-b ol{margin:0;padding:0;list-style:none}
.nl-b a{color:inherit;text-decoration:none}
.nl-b img{display:block;max-width:100%}

/* ── layout primitives ── */
.nl-b .nlb-wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gut)}
.nl-b .nlb-sec{padding:clamp(76px,9vw,148px) 0}

/* ── type utilities ── */
.nl-b .nlb-kick{
  display:block;font-size:11px;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-2);
}
.nl-b .nlb-kick--dim{color:rgba(255,255,255,.86)}
.nl-b .nlb-d1{font-size:var(--d1);line-height:.88;letter-spacing:-.046em;font-weight:800;color:var(--chalk)}
.nl-b .nlb-d2{font-size:var(--d2);line-height:1.0;letter-spacing:-.036em}
.nl-b .nlb-d3{font-size:var(--d3);line-height:1.08;letter-spacing:-.03em}
.nl-b .nlb-h3{font-size:var(--h3);line-height:1.16;letter-spacing:-.022em}
.nl-b .nlb-lede{font-size:clamp(17px,1.5vw,21px);line-height:1.56;color:var(--chalk)}
.nl-b .nlb-body{font-size:16.5px;line-height:1.7;color:var(--dim)}
.nl-b .nlb-hair{height:1px;background:var(--line);width:100%}

/* ── buttons ── */
.nl-b .nlb-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.nl-b .nlb-btn--gold{background:var(--yellow);color:var(--night);border-color:var(--yellow)}
.nl-b .nlb-btn--line{background:transparent;color:var(--chalk);border-color:rgba(255,255,255,.34)}
.nl-b .nlb-btn--dark{background:var(--night);color:var(--chalk);border-color:var(--night)}
.nl-b .nlb-link{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-2);
}

/* ============================================================
   1 · HERO — full-bleed photo + overlapping offset card
   ============================================================ */
.nl-b .nlb-hero{position:relative;width:100%}
.nl-b .nlb-hero-fig{position:relative;width:100%;height:min(78vh,760px);overflow:hidden}
.nl-b .nlb-hero-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 56%}
.nl-b .nlb-hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom, rgba(6,4,46,.62) 0%, rgba(6,4,46,.12) 28%, rgba(6,4,46,.18) 60%, rgba(6,4,46,.86) 100%);
}
.nl-b .nlb-hero-top{
  position:absolute;top:0;left:0;right:0;z-index:2;
  padding:clamp(22px,3vw,40px) 0;
}
.nl-b .nlb-hero-top-in{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.26);
}
.nl-b .nlb-hero-card-wrap{
  position:relative;z-index:3;
  margin-top:clamp(-180px,-13vw,-90px);
  padding-bottom:clamp(56px,7vw,104px);
}
.nl-b .nlb-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(0px,3vw,48px);align-items:end}
.nl-b .nlb-hero-card{
  background:var(--panel);
  border-top:4px solid var(--yellow);
  padding:clamp(30px,3.6vw,54px) clamp(26px,3.2vw,50px) clamp(32px,3.6vw,52px);
}
.nl-b .nlb-hero-card h1{font-size:var(--d1);line-height:.88;letter-spacing:-.048em;margin:18px 0 0}
.nl-b .nlb-hero-side{padding:0 0 clamp(6px,1vw,16px) 0}
.nl-b .nlb-hero-lede{font-size:clamp(16px,1.32vw,19.5px);line-height:1.58;color:var(--chalk);max-width:42ch}
.nl-b .nlb-hero-cta{margin-top:26px}
.nl-b .nlb-hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px);
  margin-top:clamp(34px,4vw,56px);padding-top:22px;border-top:1px solid var(--line);
}
.nl-b .nlb-hero-stats strong{display:block;font-size:clamp(26px,2.6vw,38px);font-weight:800;color:var(--yellow);letter-spacing:-.03em;line-height:1.1}
.nl-b .nlb-hero-stats span{display:block;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dimmer);margin-top:8px}

/* ============================================================
   2 · ZIG-ZAG ROWS — full-bleed alternating compositions
   ============================================================ */
.nl-b .nlb-zig{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;width:100%}
.nl-b .nlb-zig--flip{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.nl-b .nlb-zig-copy{padding:clamp(52px,6vw,96px) clamp(28px,4vw,72px) clamp(52px,6vw,96px) var(--edge)}
.nl-b .nlb-zig--flip .nlb-zig-copy{padding-left:clamp(28px,4vw,72px);padding-right:var(--edge);order:2}
.nl-b .nlb-zig-fig{position:relative;min-height:clamp(360px,44vw,620px);align-self:stretch;overflow:hidden}
.nl-b .nlb-zig--flip .nlb-zig-fig{order:1}
.nl-b .nlb-zig-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nl-b .nlb-zig-n{
  position:relative;z-index:1;display:inline-block;
  font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--night);
  background:var(--yellow);padding:8px 14px;
}
.nl-b .nlb-zig-copy .nlb-d2{margin:20px 0 20px}
.nl-b .nlb-zig-copy .nlb-body{max-width:46ch;margin-bottom:14px}
.nl-b .nlb-zig-copy .nlb-link{margin-top:12px}
.nl-b .nlb-zig--alt{background:var(--night-2)}
.nl-b .nlb-zig-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.nl-b .nlb-tag{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-2);border:1px solid var(--line);padding:7px 13px;border-radius:999px;
}

/* ============================================================
   3 · LOOKBOOK RAIL — five tall portrait cards
   ============================================================ */
.nl-b .nlb-rail-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  align-items:end;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:clamp(28px,3.4vw,46px);
}
.nl-b .nlb-rail-head .nlb-d2{margin-top:16px}
.nl-b .nlb-rail-head .nlb-body{max-width:44ch}
.nl-b .nlb-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,18px)}
.nl-b .nlb-look{position:relative;aspect-ratio:3/4.4;overflow:hidden;background:var(--night-2)}
.nl-b .nlb-look img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nl-b .nlb-look-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom, rgba(6,4,46,.66) 0%, rgba(6,4,46,.10) 34%, rgba(6,4,46,0) 48%),
    linear-gradient(to top, rgba(6,4,46,.94) 0%, rgba(6,4,46,.52) 40%, rgba(6,4,46,0) 74%);
}
.nl-b .nlb-look-in{
  position:relative;z-index:2;height:100%;padding:clamp(16px,1.5vw,22px);
  display:flex;flex-direction:column;justify-content:space-between;
}
.nl-b .nlb-look-n{font-size:11.5px;font-weight:800;letter-spacing:.2em;color:var(--yellow)}
.nl-b .nlb-look-t{font-size:clamp(17px,1.35vw,21px);font-weight:800;color:#fff;letter-spacing:-.024em;line-height:1.12}
.nl-b .nlb-look-d{font-size:13.5px;line-height:1.48;color:rgba(255,255,255,.78);margin-top:8px}

/* ============================================================
   4 · UK FEATURE — full-bleed primary destination band
   ============================================================ */
.nl-b .nlb-feat{position:relative;width:100%;min-height:clamp(520px,60vw,720px);display:flex;align-items:center;overflow:hidden}
.nl-b .nlb-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.nl-b .nlb-feat-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(85deg, rgba(6,4,46,.95) 0%, rgba(6,4,46,.86) 34%, rgba(6,4,46,.34) 70%, rgba(6,4,46,.16) 100%);
}
.nl-b .nlb-feat-in{position:relative;z-index:2;width:100%;padding:clamp(52px,6vw,88px) 0}
.nl-b .nlb-feat-copy{max-width:56ch}
.nl-b .nlb-feat-badge{
  display:inline-block;background:var(--yellow);color:var(--night);
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:8px 15px;margin-bottom:22px;
}
.nl-b .nlb-feat-copy h2{font-size:clamp(38px,5.6vw,78px);line-height:.94;letter-spacing:-.042em;margin-bottom:20px}
.nl-b .nlb-feat-p{font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:rgba(255,255,255,.84);margin-bottom:28px}
.nl-b .nlb-feat-facts{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,48px);margin-bottom:30px;padding-top:20px;border-top:1px solid var(--line)}
.nl-b .nlb-feat-facts div{min-width:110px}
.nl-b .nlb-feat-facts strong{display:block;font-size:19px;font-weight:800;color:var(--yellow);letter-spacing:-.02em}
.nl-b .nlb-feat-facts span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);margin-top:5px}

/* ============================================================
   5 · DESTINATION LIST — editorial rows with thumbnails
   ============================================================ */
.nl-b .nlb-dlist{border-top:1px solid var(--line)}
.nl-b .nlb-drow{
  display:grid;grid-template-columns:56px 132px minmax(0,1fr) minmax(0,1.25fr) auto;
  gap:clamp(16px,2.4vw,40px);align-items:center;
  padding:clamp(16px,1.9vw,26px) 0;border-bottom:1px solid var(--line-2);
}
.nl-b .nlb-drow-n{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--gold)}
.nl-b .nlb-drow-fig{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--night-2)}
.nl-b .nlb-drow-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nl-b .nlb-drow-t{font-size:clamp(20px,1.8vw,27px);font-weight:800;color:var(--chalk);letter-spacing:-.026em;line-height:1.1}
.nl-b .nlb-drow-d{font-size:15.5px;line-height:1.55;color:var(--dim)}
.nl-b .nlb-drow-go{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);white-space:nowrap}

/* ============================================================
   6 · SERVICE MOSAIC — 4-col, one 2×2 feature
   ============================================================ */
.nl-b .nlb-mos-sec{background:var(--night-2);padding:clamp(76px,9vw,140px) 0}
.nl-b .nlb-mos-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);
  align-items:end;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:clamp(26px,3.2vw,42px);
}
.nl-b .nlb-mos-head .nlb-d2{margin-top:16px}
.nl-b .nlb-mos-head .nlb-body{max-width:46ch}
.nl-b .nlb-mos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px)}
.nl-b .nlb-mtile{position:relative;aspect-ratio:1/1;overflow:hidden;display:block;background:var(--night-3)}
.nl-b .nlb-mtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nl-b .nlb-mtile-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom, rgba(6,4,46,.58) 0%, rgba(6,4,46,.08) 38%, rgba(6,4,46,0) 52%),
    linear-gradient(to top, rgba(6,4,46,.93) 0%, rgba(6,4,46,.46) 44%, rgba(6,4,46,0) 76%);
}
.nl-b .nlb-mtile-in{
  position:relative;z-index:2;height:100%;padding:clamp(16px,1.7vw,26px);
  display:flex;flex-direction:column;justify-content:space-between;
}
.nl-b .nlb-mtile-n{font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--yellow)}
.nl-b .nlb-mtile-t{font-size:clamp(18px,1.45vw,22px);font-weight:800;color:#fff;letter-spacing:-.024em;line-height:1.12}
.nl-b .nlb-mtile-d{font-size:13.5px;line-height:1.48;color:rgba(255,255,255,.78);margin-top:8px;max-width:30ch}
.nl-b .nlb-mtile--feat{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.nl-b .nlb-mtile--feat .nlb-mtile-t{font-size:clamp(28px,3vw,44px);letter-spacing:-.036em}
.nl-b .nlb-mtile--feat .nlb-mtile-d{font-size:16px;max-width:36ch;margin-top:12px}
.nl-b .nlb-mtile-go{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-top:14px;display:block}
.nl-b .nlb-mtile--cta{background:var(--yellow)}
.nl-b .nlb-mtile--cta .nlb-mtile-in{justify-content:flex-end}
.nl-b .nlb-mtile--cta .nlb-mtile-t{color:var(--night)}
.nl-b .nlb-mtile--cta .nlb-mtile-d{color:rgba(6,4,46,.76)}
.nl-b .nlb-mtile--cta .nlb-mtile-n{color:var(--night)}
.nl-b .nlb-mtile--cta .nlb-mtile-go{color:var(--night)}

/* ============================================================
   7 · ROUTE — ruled horizontal timeline
   ============================================================ */
.nl-b .nlb-route{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,32px);margin-top:clamp(52px,6.5vw,96px)}
.nl-b .nlb-rstep{padding-top:22px;border-top:1px solid var(--line)}
.nl-b .nlb-rstep-n{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--gold)}
.nl-b .nlb-rstep .nlb-h3{margin:14px 0 10px;font-size:20px}
.nl-b .nlb-rstep .nlb-body{font-size:15.5px}

/* ============================================================
   8 · CLOSING — paper inversion
   ============================================================ */
.nl-b .nlb-close{background:var(--paper);color:#4C4869;padding:clamp(76px,9vw,132px) 0}
.nl-b .nlb-close h2{color:#120F64;font-size:var(--d2);margin:18px 0 20px}
.nl-b .nlb-close .nlb-kick{color:#8A6E04}
.nl-b .nlb-close-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
.nl-b .nlb-close-p{font-size:clamp(16px,1.3vw,19px);line-height:1.62;color:#4C4869;max-width:48ch}
.nl-b .nlb-close-cta{margin-top:30px}
.nl-b .nlb-close .nlb-btn--dark{background:#120F64;color:#fff;border-color:#120F64}
.nl-b .nlb-close .nlb-btn--line{color:#120F64;border-color:rgba(18,15,100,.34)}
.nl-b .nlb-qs{display:grid;gap:0}
.nl-b .nlb-q{
  display:flex;gap:14px;align-items:flex-start;
  padding:15px 0;border-top:1px solid #DDD8C8;
}
.nl-b .nlb-q:last-child{border-bottom:1px solid #DDD8C8}
.nl-b .nlb-q-n{font-size:11px;font-weight:800;letter-spacing:.14em;color:#8A6E04;padding-top:3px;flex:none}
.nl-b .nlb-q-t{font-size:15.5px;line-height:1.5;color:#14113A;font-weight:600}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .nl-b .nlb-hero-grid{grid-template-columns:1fr;gap:26px;align-items:start}
  .nl-b .nlb-hero-side{padding:0 clamp(26px,3.2vw,50px)}
  .nl-b .nlb-zig,.nl-b .nlb-zig--flip{grid-template-columns:1fr}
  .nl-b .nlb-zig-copy,.nl-b .nlb-zig--flip .nlb-zig-copy{order:2;padding:clamp(38px,5vw,64px) var(--gut)}
  .nl-b .nlb-zig-fig,.nl-b .nlb-zig--flip .nlb-zig-fig{order:1;min-height:clamp(300px,52vw,440px)}
  .nl-b .nlb-rail{grid-template-columns:repeat(3,1fr)}
  .nl-b .nlb-rail-head,.nl-b .nlb-mos-head{grid-template-columns:1fr;gap:18px}
  .nl-b .nlb-drow{grid-template-columns:44px 110px minmax(0,1fr);gap:14px 20px}
  .nl-b .nlb-drow-d{grid-column:3}
  .nl-b .nlb-drow-go{grid-column:3}
  .nl-b .nlb-close-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:760px){
  .nl-b .nlb-hero-fig{height:64vh;min-height:420px}
  .nl-b .nlb-hero-card-wrap{margin-top:-70px}
  .nl-b .nlb-hero-stats{grid-template-columns:1fr;gap:16px}
  .nl-b .nlb-rail{grid-template-columns:repeat(2,1fr)}
  .nl-b .nlb-look{aspect-ratio:3/4}
  .nl-b .nlb-mos{grid-template-columns:repeat(2,1fr)}
  .nl-b .nlb-mtile--feat{grid-column:span 2;grid-row:span 1;aspect-ratio:4/3}
  .nl-b .nlb-route{grid-template-columns:1fr}
  .nl-b .nlb-drow{grid-template-columns:40px 1fr;gap:10px 14px}
  .nl-b .nlb-drow-fig{grid-column:2;aspect-ratio:16/9}
  .nl-b .nlb-drow-t,.nl-b .nlb-drow-d,.nl-b .nlb-drow-go{grid-column:2}
}
@media (max-width:560px){
  .nl-b .nlb-hero-top-in .nlb-kick--dim{display:none}
}
@media (max-width:440px){
  .nl-b .nlb-rail{grid-template-columns:1fr}
  .nl-b .nlb-mos{grid-template-columns:1fr}
  .nl-b .nlb-mtile--feat{grid-column:span 1}
}
