/**
 * Nomé UI — boho beach-club design system for Bali Snorkeling Trip.
 *
 * Layout and visual language cloned from nomebeachclub.info: cream canvas,
 * Poppins only, 40px soft cards, 50px pills, oversized stacked display type,
 * terracotta + sage + slate accents. All wording/images come from the database.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Canvas — Nomé cream family */
  --nm-cream:      #faf5ed;
  --nm-cream-2:    #fdfaf6;
  --nm-sand:       #ede6d1;
  --nm-off:        #f5f5f5;

  /* Ink */
  --nm-ink:        #121212;
  --nm-ink-soft:   #474747;
  --nm-ink-faint:  #999999;

  /* Accents */
  --nm-terra:      #5c2c18;
  --nm-terra-2:    #a64f29;
  /* Darker terracotta for small accent text on cream/sand: #a64f29 only
     reaches 4.46:1 on #ede6d1, just under AA. */
  --nm-terra-ink:  #8f3f20;
  --nm-sage:       #9ea698;
  --nm-sage-2:     #6d7567;
  --nm-slate:      #465c69;

  /* Shape — Nomé uses 40px cards, 50px pills, 12/15px chips */
  --nm-r-card:     40px;
  --nm-r-pill:     50px;
  --nm-r-chip:     15px;
  --nm-r-sm:       12px;

  /* Rhythm */
  --nm-wrap:       1240px;
  --nm-gut:        clamp(16px, 4vw, 48px);
  --nm-sec:        clamp(64px, 9vw, 140px);

  --nm-font:       'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Display face. The reference uses Toledo-Light Regular (licensed, served
     from Framer's CDN); Jost Light is the closest free geometric stand-in and
     holds the same +.06em tracking at display sizes. */
  --nm-display:    'Jost', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --nm-shadow:     0 24px 60px rgba(0, 0, 0, .08);
  --nm-shadow-sm:  0 8px 24px rgba(0, 0, 0, .06);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.nm {
  margin: 0;
  background: var(--nm-cream);
  color: var(--nm-ink);
  font-family: var(--nm-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nm img { max-width: 100%; height: auto; display: block; }

/* Cover images need an explicit full-height box. These selectors are scoped
   with body.nm so they outrank the `body.nm img { height:auto }` rule above —
   without this, object-fit:cover only fills the image's own aspect box. */
body.nm .nm-hero-img,
body.nm .nm-split-media img,
body.nm .nm-gal-item img { height: 100%; }
body.nm .nm-brand-logo { height: 56px; }

/* Deliberately `inherit`: a blanket `body.nm a { color: … }` has specificity
   0-1-2 and would override every component's own link colour (buttons, footer,
   panels), which previously left dark buttons with 1.63:1 text. Running copy
   sets its own link colour below. */
/* Element-level (0-0-1) on purpose: any component rule such as `.nm-btn`
   (0-1-0) must be able to set its own link colour. A `body.nm a` selector
   here is 0-1-2 and would win instead, which is what previously left buttons
   with invisible (1:1) text. */
a { color: inherit; }
body.nm a { text-decoration: none; }

body.nm .nm-prose a,
body.nm .nm-answer a,
body.nm .nm-faq-a a,
body.nm .nm-bento-body a,
body.nm .nm-aside-box p a {
  color: var(--nm-terra);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.nm .nm-prose a:hover,
body.nm .nm-answer a:hover,
body.nm .nm-bento-body a:hover,
body.nm .nm-faq-a a:hover { color: var(--nm-terra-2); }

.nm-wrap {
  width: 100%;
  max-width: var(--nm-wrap);
  margin: 0 auto;
  padding: 0 var(--nm-gut);
}

.nm-sec { padding: var(--nm-sec) 0; }
.nm-sec--tight { padding: clamp(40px, 6vw, 80px) 0; }
.nm-sec--sand  { background: var(--nm-sand); }
.nm-sec--cream2 { background: var(--nm-cream-2); }
.nm-sec--ink   { background: var(--nm-ink); color: var(--nm-off); }

/* ------------------------------------------------------------ typography */
.nm-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nm-terra-ink);
  margin: 0 0 18px;
}
.nm-sec--ink .nm-eyebrow { color: var(--nm-sage); }

/* Oversized stacked display type — Nomé's hero signature (84px / -.03em) */
.nm-display {
  margin: 0;
  font-weight: 500;
  font-size: clamp(38px, 7.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.nm-display span { display: block; }
.nm-display em {
  font-style: italic;
  font-weight: 300;
  color: var(--nm-terra-2);
}

.nm-h2 {
  margin: 0 0 20px;
  font-family: var(--nm-display);
  font-weight: 300;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 120%;
  letter-spacing: -.03em;
}
.nm-h3 {
  margin: 0 0 12px;
  font-family: var(--nm-display);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 120%;
  letter-spacing: -.03em;
}
.nm-lede {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--nm-ink-soft);
  max-width: 62ch;
}
.nm-sec--ink .nm-lede { color: rgba(245, 245, 245, .7); }

.nm-sec-head { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 64px); }
.nm-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* --------------------------------------------------------------- buttons */
.nm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--nm-r-pill);
  background: var(--nm-ink);
  color: var(--nm-off);
  font-family: var(--nm-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
/* Inline icons ship with a viewBox but no width/height; without this they
   stretch to the flex line and crush the label into wrapped, unreadable text. */
.nm-btn svg { width: 19px; height: 19px; flex-shrink: 0; fill: currentColor; }
.nm-btn:hover { background: var(--nm-terra); color: #fff; transform: translateY(-2px); }

.nm-btn--terra { background: var(--nm-terra); color: #fff; }
.nm-btn--terra:hover { background: var(--nm-terra-2); }

.nm-btn--light { background: var(--nm-cream); color: var(--nm-ink); }
.nm-btn--light:hover { background: #fff; color: var(--nm-terra); }

.nm-btn--ghost {
  background: transparent;
  color: var(--nm-ink);
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .2);
}
.nm-btn--ghost:hover { background: var(--nm-ink); color: var(--nm-off); box-shadow: none; }

.nm-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.nm-btn-row--center { justify-content: center; }

/* ---------------------------------------------------------------- header */
.nm-head {
  position: sticky;
  top: 0;
  z-index: 500;
  padding: 0;
  background: var(--nm-cream);
  transition: box-shadow .3s ease;
}
body.nm-scrolled .nm-head { box-shadow: 0 1px 0 rgba(18, 18, 18, .08); }

/* The reference header bar: 1400px wide, 90px tall, padding 0 25px 0 60px. */
.nm-head-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 1400px;
  min-width: 0;
  height: 90px;
  margin: 0 auto;
  padding: 0 25px 0 60px;
}

.nm-brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; padding: 6px; }
/* The reference uses an 80px mark, but at that size it fills the 90px bar
   edge to edge and visibly bleeds past it. 56px leaves breathing room. */
.nm-brand-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.nm-brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--nm-ink);
  white-space: nowrap;
}

.nm-nav { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0 0 0 28px; }
.nm-menu { display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; list-style: none; }
.nm-menu > li { position: relative; }
/* The item fills the full 90px bar so the dropdown opens flush against it —
   any gap between the two would drop the hover on the way down. */
.nm-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 34px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: -.02em;
  color: var(--nm-ink);
  white-space: nowrap;
  transition: color .2s ease;
}
.nm-menu > li > a:hover { color: var(--nm-terra); }
.nm-menu > li.is-current > a { color: var(--nm-terra); }
.nm-caret { width: 9px; height: 9px; flex-shrink: 0; transition: transform .2s ease; }
.nm-menu > li:hover > a .nm-caret,
.nm-menu > li:focus-within > a .nm-caret { transform: rotate(180deg); }

.nm-sub {
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 10;
  min-width: 254px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-radius: var(--nm-r-chip);
  background: var(--nm-cream-2);
  box-shadow: var(--nm-shadow), inset 0 0 0 1px rgba(18, 18, 18, .07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.nm-menu > li:hover > .nm-sub,
.nm-menu > li:focus-within > .nm-sub { opacity: 1; visibility: visible; transform: none; }
.nm-sub a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--nm-r-sm);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--nm-ink);
  transition: background .2s ease, color .2s ease;
}
.nm-sub a:hover,
.nm-sub a[aria-current="page"] { background: rgba(92, 44, 24, .08); color: var(--nm-terra); }

/* The booking CTA inside the nav exists for the mobile panel only — on wide
   screens the header's own pill button carries it. */
.nm-nav > .nm-nav-cta { display: none; }

.nm-head-cta { flex-shrink: 0; }
.nm-head-cta .nm-btn { padding: 13px 22px; font-size: 14px; white-space: nowrap; }

.nm-burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--nm-ink);
  color: var(--nm-off);
  cursor: pointer;
  flex-shrink: 0;
}
.nm-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 4px auto;
  background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}
.nm-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nm-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nm-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero
 * Geometry taken 1:1 from the reference hero (nomebeachclub.info #hero):
 * shell inset 0 0 50px 50px · panel bottom-left radius 100px · panel padding
 * 200px 0 50px · content right-aligned, gap 32px, children margin 16px 0 ·
 * heading width 57% · H1 84px / +.06em / 115% / right · rule min-height 30px,
 * padding-top 18px · content2 padding 100px 0 0 90px · hours bar 1100x90,
 * left radius 60px, flush to the right edge.
 */
.nm-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

.nm-hero-shell {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 0 50px 50px;
  overflow: hidden;
}

.nm-hero-panel {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1 0 0;
  width: 1px;
  max-width: 100%;
  padding: 200px 0 50px;
  border-bottom-left-radius: 100px;
  background: var(--nm-slate);
  overflow: hidden;
}
.nm-hero-panel > * { margin: 0; }

.nm-hero-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Keeps the white type and the white hours bar legible over any photograph.
   Two layers: a vertical wash that no longer thins out behind the heading --
   the old single gradient dipped to .18 at 42%, which is exactly where the H1
   sits, so on a bright sky the thin 300-weight type dropped to 1.7:1 -- plus a
   right-weighted wash under the right-aligned type. Verified per glyph pixel
   against the brightest hero photograph; see .nm-hero-panel--flat below for
   the centred mobile layout. */
.nm-hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .28) 20%, rgba(0, 0, 0, .46) 54%, rgba(0, 0, 0, .60) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, .36) 100%);
}

.nm-hero-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 32px;
  width: 100%;
  padding: 0 50px 0 0;
}
.nm-hero-content > *,
.nm-hero-content2 > * { margin: 16px 0; }

.nm-hero-heading {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 57%;
}

.nm-hero .nm-display {
  flex: 1 0 0;
  width: 1px;
  margin: 0;
  font-family: var(--nm-display);
  font-size: 84px;
  font-weight: 300;
  font-style: normal;
  line-height: 115%;
  letter-spacing: .06em;
  text-align: right;
  color: #fff;
  /* No pre-wrap here: the display lines are block-level <span>s, so preserved
     whitespace would render the template's own indentation as blank lines. */
  white-space: normal;
  overflow-wrap: break-word;
}
.nm-hero .nm-display span { display: block; }

.nm-hero-rule {
  position: relative;
  z-index: 5;
  display: flex;
  flex-flow: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 30px;
  padding: 18px 0 0;
  overflow: hidden;
}

.nm-hero-content2 {
  position: relative;
  z-index: 5;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 32px;
  width: 100%;
  padding: 100px 0 0 90px;
}
/* The reference lets this column run to the panel edge; the stat line needs a
   gutter of its own so it does not touch (and clip at) the viewport edge. */
.nm-hero-stat { padding-right: 50px; }

/* Stat cluster — the reference puts a Google rating here; this site has no
   rating data, so it carries the leading price its own copy states. */
.nm-hero-stat {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: min-content;
  white-space: nowrap;
  color: var(--nm-off);
}
.nm-stat-src {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3em;
  letter-spacing: -.02em;
  color: rgba(245, 245, 245, .88);
}
.nm-stat-num {
  font-family: var(--nm-display);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .02em;
  color: #fff;
}
.nm-stat-label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3em;
  color: var(--nm-off);
}

/* Hours bar — white, rounded on its left end only, bleeding off the right. */
.nm-hero-hours {
  flex: none;
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 1100px;
  max-width: 100%;
  height: 90px;
  padding: 10px 80px 10px 10px;
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
  background: #fff;
  color: var(--nm-ink);
  overflow: hidden;
}
.nm-hero-hours span {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* Interior pages reuse the same composition at a shorter height. */
.nm-hero--page .nm-hero-panel { padding: 150px 0 50px; }
.nm-hero--page .nm-hero-content2 { padding: 50px 0 0 90px; }
.nm-hero--page .nm-hero-heading { width: 70%; }
.nm-hero--page .nm-display { font-size: 67px; }

/* Reference breakpoints: 84 → 67 → 54 → 43px, panel 200 → 175 → 40px,
   heading 57% → 70% → 100%, hours bar 1100 → 730px → 66%. */
@media (max-width: 1399px) {
  .nm-hero .nm-display { font-size: 67px; }
  .nm-hero-panel { padding: 175px 0 50px; }
  .nm-hero-heading { width: 70%; }
  .nm-hero-hours { width: 730px; padding: 10px 50px 10px 10px; }
  .nm-hero--page .nm-display { font-size: 54px; }
  .nm-hero--page .nm-hero-panel { padding: 130px 0 50px; }
}

@media (max-width: 1079px) {
  .nm-hero .nm-display { font-size: 54px; }
  .nm-hero-content2 { padding: 70px 0 0 50px; }
  .nm-hero--page .nm-display { font-size: 43px; }
}

@media (max-width: 809px) {
  .nm-hero-shell { padding: 0; }
  .nm-hero-panel {
    border-bottom-left-radius: 0;
    padding: 40px 0;
  }
  /* The type centres below 810px, so the right-weighted layer would darken the
     wrong side -- swap it for an even wash across the full width. */
  .nm-hero-panel::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .44) 0%, rgba(0, 0, 0, .34) 22%, rgba(0, 0, 0, .50) 58%, rgba(0, 0, 0, .62) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, .14) 0%, rgba(0, 0, 0, .14) 100%);
  }
  .nm-hero-content {
    order: 0;
    align-items: center;
    padding: 113px 0 0;
  }
  /* These two carry .nm-hero--page overrides outside this media query, and at
     (0,2,0) those beat a bare .nm-hero-heading / .nm-hero-content2 here --- so
     the page heroes kept a 70% heading and 90px of dead left padding on a
     390px screen, pushing the price cluster off centre and forcing the H1 to
     wrap three times. Repeat the selector at matching specificity. */
  .nm-hero-heading,
  .nm-hero--page .nm-hero-heading { width: 100%; padding: 0 20px; }
  .nm-hero .nm-display,
  .nm-hero--page .nm-display {
    font-size: 43px;
    line-height: 95%;
    text-align: center;
  }
  .nm-hero-rule { order: 1; flex-wrap: nowrap; }
  .nm-hero-content2,
  .nm-hero--page .nm-hero-content2 {
    order: 2;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
  /* padding-right:0 here left "per person" touching the viewport edge. */
  .nm-hero-stat { width: auto; padding: 0 20px; white-space: normal; justify-content: center; text-align: center; flex-wrap: wrap; }
  .nm-hero-hours {
    order: 1;
    align-self: flex-end;
    flex-direction: column;
    justify-content: center;
    width: 66%;
    min-width: 260px;
    height: min-content;
    padding: 14px 16px 14px 24px;
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    text-align: left;
  }
  .nm-hero-hours > * { margin: 5px 0; }
  .nm-hero-hours span { white-space: normal; }
}

@media (max-width: 480px) {
  .nm-hero .nm-display,
  .nm-hero--page .nm-display { font-size: 36px; line-height: 108%; }
  .nm-hero-hours { width: 86%; }
}

/* ------------------------------------------------- package / price cards */
.nm-grid { display: grid; gap: clamp(16px, 2vw, 28px); }
.nm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nm-grid--2 { grid-template-columns: repeat(2, 1fr); }

.nm-pkg {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 38px);
  border-radius: var(--nm-r-card);
  background: var(--nm-cream-2);
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .07);
  transition: transform .3s ease, box-shadow .3s ease;
}
.nm-pkg:hover { transform: translateY(-4px); box-shadow: var(--nm-shadow), inset 0 0 0 1px rgba(18, 18, 18, .07); }
.nm-pkg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.nm-pkg-tag {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--nm-r-chip);
  background: var(--nm-sand);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nm-terra);
}
.nm-pkg h3 {
  margin: 20px 0 10px;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.02em;
}
.nm-pkg p {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--nm-ink-soft);
}

/* Nomé's oversized price lockup: 450K + /pax */
.nm-price { display: flex; align-items: baseline; gap: 4px; margin: 26px 0 0; }
.nm-price b {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--nm-ink);
}
.nm-price i {
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
  color: var(--nm-ink-faint);
}
.nm-pkg-foot { margin-top: auto; padding-top: 26px; }
.nm-pkg-foot .nm-btn { width: 100%; justify-content: center; }

/* ------------------------------------------------------- editorial cards */
.nm-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: var(--nm-r-card);
  background: var(--nm-cream-2);
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .07);
  color: var(--nm-ink);
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
a.nm-card:hover {
  transform: translateY(-4px);
  background: #fff;
  box-shadow: var(--nm-shadow-sm), inset 0 0 0 1px rgba(18, 18, 18, .07);
  color: var(--nm-ink);
}
.nm-card-num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--nm-sage-2);
  margin-bottom: 14px;
}
.nm-card h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.nm-card p {
  margin: 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--nm-ink-soft);
}
.nm-card-more {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--nm-terra-2);
}

/* -------------------------------------------------------- split / about */
.nm-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.nm-split-media {
  position: relative;
  border-radius: var(--nm-r-card);
  overflow: hidden;
  min-height: 420px;
  background: var(--nm-sage);
  box-shadow: var(--nm-shadow-sm);
}
.nm-split-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* Typographic panel — stands in where the database has no photograph */
.nm-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  padding: clamp(26px, 3vw, 44px);
  border-radius: var(--nm-r-card);
  overflow: hidden;
  background: var(--nm-slate);
  color: var(--nm-off);
}
.nm-panel--terra { background: var(--nm-terra); }
/* Darker than --nm-sage-2 (#6d7567) so white body copy clears AA. */
.nm-panel--sage  { background: #5c6455; }
.nm-panel--sand  { background: var(--nm-sand); color: var(--nm-ink); }
.nm-panel-k {
  margin: 0;
  font-family: var(--nm-display);
  font-size: clamp(32px, 4.6vw, 60px);
  font-weight: 300;
  line-height: 120%;
  letter-spacing: -.03em;
}
.nm-panel-l {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  opacity: .94;
}
.nm-panel-rows { display: grid; gap: 18px; }
/* Content-hugging variant: the stats panel has few rows, so the default
   space-between/min-height left a large empty band under the label. */
.nm-panel--glance { justify-content: flex-start; min-height: 0; gap: 26px; }
.nm-panel--glance .nm-panel-rows { margin-top: 4px; }
.nm-panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-size: 14px;
}
.nm-panel--sand .nm-panel-row { border-bottom-color: rgba(18, 18, 18, .14); }
.nm-panel-row:last-child { border-bottom: 0; padding-bottom: 0; }
.nm-panel-row b { font-weight: 600; }
.nm-panel-row span { opacity: .92; text-align: right; }

/* --------------------------------------------------------------- gallery */
.nm-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.nm-gal-item {
  position: relative;
  border-radius: var(--nm-r-chip);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--nm-sand);
}
.nm-gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nm-gal-item:hover img { transform: scale(1.05); }
.nm-gal-item--wide { grid-column: span 2; aspect-ratio: 16 / 10; }
.nm-gal-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}

/* ------------------------------------------------------------------- CTA */
.nm-cta-band {
  position: relative;
  padding: clamp(40px, 6vw, 96px) clamp(24px, 4vw, 72px);
  border-radius: var(--nm-r-card);
  background: var(--nm-terra);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.nm-cta-band .nm-h2 { color: #fff; }
.nm-cta-band .nm-lede { color: rgba(255, 255, 255, .8); margin: 0 auto; }
.nm-cta-band .nm-eyebrow { color: var(--nm-sand); }

/* ------------------------------------------------------------------ prose */
.nm-prose { max-width: 74ch; font-size: 16.5px; font-weight: 300; line-height: 1.85; color: var(--nm-ink-soft); }
.nm-prose h2 {
  margin: 2.2em 0 .6em;
  font-family: var(--nm-display);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 300;
  line-height: 120%;
  letter-spacing: -.03em;
  color: var(--nm-ink);
}
.nm-prose h3 {
  margin: 1.8em 0 .5em;
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--nm-ink);
}
.nm-prose p { margin: 0 0 1.3em; }
.nm-prose ul, .nm-prose ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.nm-prose li { margin: 0 0 .5em; }
.nm-prose strong { font-weight: 600; color: var(--nm-ink); }
.nm-prose a { color: var(--nm-terra); text-decoration: underline; text-underline-offset: 3px; }
.nm-prose a:hover { color: var(--nm-terra-2); }
.nm-prose img { border-radius: var(--nm-r-chip); margin: 1.6em 0; }
.nm-prose figcaption { font-size: 13px; color: var(--nm-ink-soft); margin-top: .6em; }
.nm-prose blockquote {
  margin: 1.8em 0;
  padding: 24px 28px;
  border-radius: var(--nm-r-sm);
  background: var(--nm-sand);
  color: var(--nm-ink);
  font-size: 17px;
}

/* Answer-first block from the database (.bsnork-aeo) */
.nm-answer {
  padding: clamp(22px, 2.6vw, 36px);
  border-radius: var(--nm-r-card);
  background: var(--nm-sand);
  color: var(--nm-ink);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 400;
  line-height: 1.7;
}
.nm-answer-k {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nm-terra-ink);
}

/* Prose sidebar layout for interior pages */
.nm-article { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 4vw, 64px); align-items: start; }
.nm-aside { position: sticky; top: 96px; display: grid; gap: 20px; }
.nm-aside-box {
  padding: 26px;
  border-radius: var(--nm-r-card);
  background: var(--nm-cream-2);
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .07);
}
.nm-aside-box h4 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nm-ink-soft);
}
.nm-aside-box ul { margin: 0; padding: 0; list-style: none; }
.nm-aside-box li { margin: 0 0 2px; }
.nm-aside-box li a {
  display: block;
  padding: 10px 0;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--nm-ink);
  border-bottom: 1px solid rgba(18, 18, 18, .07);
}
.nm-aside-box li:last-child a { border-bottom: 0; }
.nm-aside-box li a:hover { color: var(--nm-terra); }

/* On-page contents nav */
.nm-toc ol { margin: 0; padding-left: 1.1em; }
.nm-toc li { margin: 0 0 .5em; font-size: 14px; }
.nm-toc a { color: var(--nm-ink); }
.nm-toc a:hover { color: var(--nm-terra); }

/* ----------------------------------------------------- bento (the guide) */
/* The front page's chapter copy, laid out as a bento grid instead of one
   long prose column. Tile widths come from each chapter's own length, so
   short chapters sit in narrow tiles and long ones get the full span;
   `dense` packing closes the holes that leaves. */
.nm-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: clamp(14px, 1.6vw, 22px);
}
.nm-bento-tile {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 38px);
  border-radius: var(--nm-r-card);
  background: var(--nm-cream-2);
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .08);
  scroll-margin-top: 110px;
}
.nm-bento-tile--w2 { grid-column: span 2; }
.nm-bento-tile--w3 { grid-column: span 3; }
.nm-bento-tile--w4 { grid-column: span 4; }
.nm-bento-tile--w6 { grid-column: span 6; }

.nm-bento-no {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--nm-terra-2);
  font-variant-numeric: tabular-nums;
}
.nm-bento-h {
  margin: 12px 0 14px;
  font-family: var(--nm-display);
  font-size: clamp(21px, 1.8vw, 28px);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: var(--nm-ink);
}
.nm-bento-body {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--nm-ink-soft);
}
.nm-bento-body p { margin: 0 0 1.1em; }
.nm-bento-body p:last-child { margin-bottom: 0; }
.nm-bento-body ul, .nm-bento-body ol { margin: 0 0 1.1em; padding-left: 1.2em; }
.nm-bento-body strong { font-weight: 600; color: var(--nm-ink); }

/* Accent tiles. Every pairing below clears 7:1, which the hover-only
   WhatsApp label and the faint panel copy did not. */
.nm-bento-tile--sand  { background: var(--nm-sand); box-shadow: none; }
/* terra-2 only reaches 4.46:1 on the sand fill at this size. */
.nm-bento-tile--sand .nm-bento-no { color: var(--nm-terra); }
.nm-bento-tile--terra { background: var(--nm-terra); box-shadow: none; }
.nm-bento-tile--ink   { background: var(--nm-ink); box-shadow: none; }

.nm-bento-tile--terra .nm-bento-h,
.nm-bento-tile--ink .nm-bento-h { color: #fff; }
.nm-bento-tile--terra .nm-bento-body,
.nm-bento-tile--ink .nm-bento-body { color: rgba(255, 255, 255, .9); }
.nm-bento-tile--terra .nm-bento-no,
.nm-bento-tile--ink .nm-bento-no { color: var(--nm-sage); }
.nm-bento-tile--terra .nm-bento-body strong,
.nm-bento-tile--ink .nm-bento-body strong { color: #fff; }
body.nm .nm-bento-tile--terra .nm-bento-body a,
body.nm .nm-bento-tile--ink .nm-bento-body a { color: #fff; }
body.nm .nm-bento-tile--terra .nm-bento-body a:hover,
body.nm .nm-bento-tile--ink .nm-bento-body a:hover { color: var(--nm-sand); }

/* Contents tile — the old sticky sidebar, folded into the grid. */
.nm-bento-tile--index { justify-content: flex-start; }
.nm-bento-toc { margin: 14px 0 0; padding: 0; list-style: none; }
.nm-bento-toc li { margin: 0; }
.nm-bento-toc a {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.nm-bento-toc li:last-child a { border-bottom: 0; }
.nm-bento-toc a:hover { color: #fff; }
.nm-bento-toc b {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--nm-sage);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) {
  .nm-bento-tile--w2, .nm-bento-tile--w4 { grid-column: span 3; }
  .nm-bento-tile--w6 { grid-column: span 6; }
}
@media (max-width: 720px) {
  .nm-bento { grid-template-columns: 1fr; }
  .nm-bento-tile--w2,
  .nm-bento-tile--w3,
  .nm-bento-tile--w4,
  .nm-bento-tile--w6 { grid-column: span 1; }
}

/* ------------------------------------------------------------------- FAQ */
.nm-faq { max-width: 900px; margin: 0 auto; }
.nm-faq-item {
  border-radius: var(--nm-r-sm);
  background: var(--nm-cream-2);
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .08);
  margin-bottom: 12px;
  overflow: hidden;
}
.nm-faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px clamp(20px, 2.4vw, 32px);
  font-size: clamp(15.5px, 1.4vw, 18px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--nm-ink);
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}
.nm-faq-item summary::-webkit-details-marker { display: none; }
.nm-faq-item summary:hover { color: var(--nm-terra); }
.nm-faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--nm-sand);
  color: var(--nm-terra);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: transform .3s ease;
}
.nm-faq-item[open] summary::after { content: "–"; transform: rotate(180deg); }
.nm-faq-a {
  padding: 0 clamp(20px, 2.4vw, 32px) 24px;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--nm-ink-soft);
}
.nm-faq-a p { margin: 0 0 1em; }
.nm-faq-a p:last-child { margin: 0; }

/* ---------------------------------------------------------------- footer */
.nm-foot { background: var(--nm-ink); color: var(--nm-off); padding: clamp(56px, 7vw, 104px) 0 32px; }
.nm-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.nm-foot-brand .nm-brand-name { color: var(--nm-off); max-width: none; }
.nm-foot-brand p {
  margin: 20px 0 0;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(245, 245, 245, .7);
  max-width: 42ch;
}
.nm-foot h4 {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nm-sage);
}
.nm-foot ul { margin: 0; padding: 0; list-style: none; }
.nm-foot li { margin: 0 0 10px; }
.nm-foot li a, .nm-foot-contact a {
  font-size: 14.5px;
  font-weight: 300;
  color: rgba(245, 245, 245, .78);
}
.nm-foot li a:hover, .nm-foot-contact a:hover { color: #fff; }
.nm-foot-contact { font-size: 14.5px; font-weight: 300; color: rgba(245, 245, 245, .78); line-height: 1.8; }
.nm-foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: 26px;
  border-top: 1px solid rgba(245, 245, 245, .14);
  font-size: 13px;
  font-weight: 300;
  color: rgba(245, 245, 245, .6);
}
.nm-foot-bottom a { color: rgba(245, 245, 245, .6); text-decoration: underline; text-underline-offset: 2px; }
.nm-foot-bottom a:hover { color: #fff; }

/* ------------------------------------------------------- floating widget */
/* The label used to be collapsed to zero width and zero opacity until hover.
   Touch devices never fire hover, so on phones the bubble was a blank dark
   circle with no readable call to action. It now always reads as a pill. */
.nm-wa {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 24px;
  border-radius: var(--nm-r-pill);
  background: var(--nm-terra);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease,
              opacity .3s ease, visibility .3s ease;
}
.nm-wa span { display: inline-block; }
.nm-wa:hover, .nm-wa:focus-visible {
  background: var(--nm-ink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
}
.nm-wa svg { width: 21px; height: 21px; flex-shrink: 0; fill: currentColor; }
/* Now that the pill carries its label it is wide enough to sit on top of the
   hero's hours bar, so it steps aside for as long as that bar is on screen.
   The class is added by script, which keeps the button visible without JS. */
body.nm-wa-off .nm-wa {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
}

.nm-skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border-radius: var(--nm-r-pill);
  background: var(--nm-ink);
  color: var(--nm-off);
  font-size: 14px;
}
.nm-skip:focus {
  width: auto;
  height: auto;
  margin: 12px;
  padding: 10px 18px;
  overflow: visible;
  clip: auto;
  clip-path: none;
}

body.nm :focus-visible { outline: 2px solid var(--nm-terra-2); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------- reveals */
/* Scoped to .nm-js (set by an inline script in the head) so that if the footer
   script never runs -- blocked, cached stale, or erroring earlier in the file
   -- the page still renders its content instead of a blank cream column. */
.nm-js .nm-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
.nm-js .nm-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nm-js .nm-reveal { opacity: 1; transform: none; transition: none; }
  .nm-gal-item img, .nm-btn, .nm-card, .nm-pkg { transition: none; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1240px) {
  .nm-nav { display: none; }
  .nm-burger { display: block; }
  .nm-head-cta { display: none; }
  .nm-article { grid-template-columns: 1fr; }
  .nm-aside { position: static; grid-template-columns: repeat(2, 1fr); }
  .nm-foot-grid { grid-template-columns: 1fr 1fr; }

  /* Slide-down mobile nav panel */
  .nm-head-inner { height: 72px; padding: 0 20px; }
  .nm-brand { padding: 0; }
  .nm-brand-logo { width: 48px; height: 48px; }
  .nm-nav.is-open {
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-top: 10px;
    padding: 16px;
    border-radius: var(--nm-r-chip);
    background: var(--nm-cream-2);
    box-shadow: var(--nm-shadow);
  }
  .nm-nav.is-open .nm-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
  }
  .nm-nav.is-open .nm-menu > li > a {
    display: flex;
    justify-content: space-between;
    padding: 13px 16px;
    border-radius: var(--nm-r-sm);
    font-size: 15px;
  }
  /* No hover on touch, so each branch simply stays open. */
  .nm-nav.is-open .nm-caret { display: none; }
  .nm-nav.is-open .nm-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 6px;
    padding: 0 0 0 16px;
    border-radius: 0;
    background: none;
    box-shadow: inset 1px 0 0 rgba(18, 18, 18, .1);
  }
  .nm-nav.is-open .nm-sub a { padding: 10px 14px; font-size: 14.5px; color: var(--nm-ink-soft); }
  .nm-nav.is-open .nm-nav-cta { padding: 13px 16px; border-radius: var(--nm-r-sm); font-size: 15px; }
  .nm-nav.is-open > .nm-nav-cta {
    display: block;
    margin-top: 8px;
    background: var(--nm-ink);
    color: var(--nm-off);
    text-align: center;
  }
  .nm-head-inner { position: relative; }
}

@media (max-width: 900px) {
  /* Comfortable touch targets for the sidebar link lists. */
  .nm-aside-box li a { padding: 14px 0; }
  .nm-toc li { margin: 0 0 .9em; }
  .nm-grid--3 { grid-template-columns: 1fr 1fr; }
  .nm-split { grid-template-columns: 1fr; }
  .nm-split-media, .nm-panel { min-height: 320px; }
  .nm-gal { grid-template-columns: repeat(2, 1fr); }
  .nm-gal-item--wide { grid-column: span 2; }
  .nm-hero-body { max-width: none; }
}

@media (max-width: 620px) {
  body.nm { font-size: 15.5px; }
  .nm-grid--3, .nm-grid--2 { grid-template-columns: 1fr; }
  .nm-aside { grid-template-columns: 1fr; }
  .nm-foot-grid { grid-template-columns: 1fr; }
  .nm-brand-name { display: none; }
  :root { --nm-r-card: 28px; }
  .nm-hero-card { min-height: 520px; }
  .nm-wa { height: 50px; padding: 0 18px; gap: 8px; font-size: 14px; }
  .nm-wa svg { width: 19px; height: 19px; }
  .nm-btn { padding: 15px 26px; }
  .nm-foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------- enquiry form (bsnork-form.php)
 * The mu-plugin prints its own gold/teal stylesheet in the footer, so these
 * rules are scoped to body.nm to win on specificity rather than order. The
 * .bsnork-hp honeypot rule is deliberately left to the mu-plugin.
 */
body.nm .bsnork-form {
  max-width: 720px;
  margin: 0;
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px);
  border: 0;
  border-radius: var(--nm-r-card);
  background: var(--nm-cream-2);
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .08);
}
body.nm .bsnork-form h3 {
  margin: 0;
  font-family: var(--nm-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--nm-ink);
}
body.nm .bsnork-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nm-sage-2);
}
body.nm .bsnork-form input,
body.nm .bsnork-form textarea {
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(18, 18, 18, .14);
  border-radius: var(--nm-r-sm);
  background: #fff;
  color: var(--nm-ink);
  font-family: var(--nm-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
body.nm .bsnork-form textarea { resize: vertical; min-height: 120px; }
body.nm .bsnork-form input:focus,
body.nm .bsnork-form textarea:focus {
  outline: none;
  border-color: var(--nm-terra-2);
  box-shadow: 0 0 0 3px rgba(166, 79, 41, .14);
}
body.nm .bsnork-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
body.nm .bsnork-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
body.nm .bsnork-form .bsnork-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--nm-r-pill);
  background: var(--nm-terra);
  color: #fff;
  font-family: var(--nm-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}
body.nm .bsnork-form .bsnork-cta:hover { background: var(--nm-terra-2); transform: translateY(-2px); }
body.nm .bsnork-form .bsnork-cta.ghost2 {
  background: transparent;
  color: var(--nm-ink);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .2);
}
body.nm .bsnork-form .bsnork-cta.ghost2:hover { background: var(--nm-ink); color: var(--nm-off); box-shadow: none; }
body.nm .bsnork-form .bsnork-cta[disabled] { opacity: .6; cursor: default; transform: none; }
body.nm .bsnork-msg { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--nm-terra); }
body.nm .bsnork-form p { font-size: 13.5px; font-weight: 300; line-height: 1.7; color: var(--nm-ink-soft); }

@media (max-width: 560px) {
  body.nm .bsnork-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------- FAQ tabs + dropdown (100 Q) */
.nm-faq-shell { max-width: 960px; margin: 0 auto; }
.nm-faq-toolbar { display: grid; gap: 14px; margin: 0 0 8px; }
.nm-faq-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 20px;
  border-radius: var(--nm-r-pill);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .12);
  color: var(--nm-ink-soft);
}
.nm-faq-search:focus-within { box-shadow: inset 0 0 0 1px rgba(18,18,18,.12), 0 0 0 3px rgba(166, 79, 41, .16); }
.nm-faq-search svg { width: 19px; height: 19px; flex-shrink: 0; }
.nm-faq-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font-family: var(--nm-font);
  font-size: 15px;
  font-weight: 400;
  color: var(--nm-ink);
}
.nm-faq-search input:focus { outline: none; }
.nm-faq-search input::-webkit-search-cancel-button { cursor: pointer; }
.nm-faq-count {
  flex-shrink: 0;
  padding: 9px 15px;
  border-radius: var(--nm-r-pill);
  background: var(--nm-sand);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--nm-ink);
  white-space: nowrap;
}
.nm-faq-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nm-faq-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(18, 18, 18, .14);
  border-radius: var(--nm-r-pill);
  background: transparent;
  font-family: var(--nm-font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--nm-ink-soft);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.nm-faq-tab b {
  min-width: 26px;
  padding: 3px 8px;
  border-radius: var(--nm-r-pill);
  background: rgba(18, 18, 18, .08);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nm-faq-tab:hover { border-color: var(--nm-terra-2); color: var(--nm-terra); transform: translateY(-1px); }
.nm-faq-tab.is-active { background: var(--nm-ink); border-color: var(--nm-ink); color: var(--nm-off); }
.nm-faq-tab.is-active b { background: rgba(245, 245, 245, .18); }
/* Mobile dropdown replaces the tab row (same control, native <select>). */
.nm-faq-select { display: none; }
.nm-faq-select-label {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nm-sage-2);
  text-align: center;
}
.nm-faq-select-wrap {
  position: relative;
  border-radius: var(--nm-r-pill);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .12);
}
.nm-faq-select-wrap select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 16px 48px 16px 22px;
  font-family: var(--nm-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--nm-ink);
  cursor: pointer;
}
.nm-faq-select-wrap select:focus { outline: none; }
.nm-faq-select-wrap:focus-within { box-shadow: inset 0 0 0 1px rgba(18,18,18,.12), 0 0 0 3px rgba(166, 79, 41, .16); }
.nm-faq-select-wrap svg {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--nm-ink-soft);
}
.nm-faq-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 14px;
  font-family: var(--nm-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--nm-ink);
}
.nm-faq-cat i {
  min-width: 28px;
  padding: 3px 10px;
  border-radius: var(--nm-r-pill);
  background: var(--nm-sand);
  font-family: var(--nm-font);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nm-faq-sec .nm-faq-item { background: #fff; }
.nm-faq-panel[hidden] { display: none; }
.nm-faq-panel:focus { outline: none; }
.nm-faq-empty {
  margin: 26px 0 0;
  padding: 30px;
  border-radius: var(--nm-r-card);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .08);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--nm-ink-soft);
  text-align: center;
}
.nm-faq-empty[hidden] { display: none; }
.nm-faq-empty button {
  display: inline-block;
  margin-left: 8px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--nm-r-pill);
  background: var(--nm-terra);
  font-family: var(--nm-font);
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}
.nm-faq-empty button:hover { background: var(--nm-terra-2); }
@media (max-width: 720px) {
  .nm-faq-tabs { display: none; }
  .nm-faq-select { display: block; }
  .nm-faq-count { padding: 8px 12px; font-size: 12px; }
  .nm-faq-cat { margin: 24px 0 12px; }
}

/* ========================================================== Z-pattern rows
 * Chapters alternate media left / media right so the eye travels in a Z.
 * The media column is sticky on wide screens: the picture holds while its
 * chapter scrolls, which keeps the pairing legible for long chapters.
 */
.nm-zz { display: grid; gap: clamp(48px, 7vw, 120px); }

.nm-zz-row {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
/* Every other row swaps the columns — this is what makes the Z. */
.nm-zz-row--flip .nm-zz-media { order: 2; }
.nm-zz-row--flip .nm-zz-body  { order: 1; }

.nm-zz-media {
  position: relative;
  border-radius: var(--nm-r-card);
  overflow: hidden;
  background: var(--nm-sand);
  aspect-ratio: 4 / 5;
  box-shadow: var(--nm-shadow-sm);
}
@media (min-width: 901px) {
  .nm-zz-media { position: sticky; top: 118px; }
}
body.nm .nm-zz-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.nm-zz-row:hover .nm-zz-media img { transform: scale(1.03); }

.nm-zz-fallback { position: absolute; inset: 0; display: block; }
.nm-zz-tone-a { background: linear-gradient(140deg, var(--nm-slate), #2f4049); }
.nm-zz-tone-b { background: linear-gradient(140deg, var(--nm-terra), #3c1b0e); }
.nm-zz-tone-c { background: linear-gradient(140deg, #5c6455, #39402f); }

.nm-zz-index {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--nm-r-pill);
  /* .72 keeps white on this badge above 4.5:1 even over a white photograph. */
  background: rgba(18, 18, 18, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}

.nm-zz-body { padding-top: clamp(0px, 1vw, 18px); }
.nm-zz-body .nm-h3 { margin: 0 0 18px; }
.nm-zz-prose { max-width: 62ch; }
.nm-zz-prose p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .nm-zz-row,
  .nm-zz-row--flip { grid-template-columns: 1fr; }
  /* On one column the media always leads its chapter. */
  .nm-zz-row--flip .nm-zz-media { order: 0; }
  .nm-zz-row--flip .nm-zz-body  { order: 1; }
  .nm-zz-media { aspect-ratio: 16 / 10; }
}

/* =============================================================== bento grid
 * A deliberately uneven tile wall: one large picture, a tall one, a wide one,
 * figures the copy states, and links to the site's own pages.
 */
.nm-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(168px, auto);
  gap: clamp(12px, 1.4vw, 20px);
}

.nm-bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: var(--nm-r-chip);
  overflow: hidden;
  background: var(--nm-cream-2);
  box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .07);
}

.nm-bento-tile--hero { grid-column: span 2; grid-row: span 2; padding: 0; }
.nm-bento-tile--tall { grid-column: span 1; grid-row: span 2; padding: 0; }
.nm-bento-tile--wide { grid-column: span 2; grid-row: span 1; padding: 0; }
.nm-bento-tile--stat { grid-column: span 1; grid-row: span 1; }
.nm-bento-tile--link { grid-column: span 1; grid-row: span 1; }

body.nm .nm-bento-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.nm-bento-tile:hover img { transform: scale(1.04); }

.nm-bento-tile figcaption {
  position: relative;
  z-index: 2;
  padding: 40px 18px 16px;
  margin-top: auto;
  background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

/* Figure tiles */
.nm-bento-tone-a { background: var(--nm-slate); color: var(--nm-off); box-shadow: none; }
.nm-bento-tone-b { background: var(--nm-sand); color: var(--nm-ink); box-shadow: none; }
.nm-bento-k {
  font-family: var(--nm-display);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.nm-bento-l {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  opacity: .78;
}

/* Link tiles */
.nm-bento-tile--link { transition: transform .3s ease, background .3s ease; }
.nm-bento-tile--link:hover { transform: translateY(-3px); background: #fff; }
.nm-bento-tag {
  position: absolute;
  top: clamp(18px, 1.8vw, 26px);
  left: clamp(18px, 1.8vw, 26px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nm-terra-ink);
}
.nm-bento-title {
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--nm-ink);
}
.nm-bento-more { margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--nm-terra-2); }

@media (max-width: 900px) {
  .nm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); }
  .nm-bento-tile--hero { grid-column: span 2; grid-row: span 2; }
  .nm-bento-tile--tall { grid-column: span 1; grid-row: span 2; }
  .nm-bento-tile--wide { grid-column: span 2; }
}

@media (max-width: 560px) {
  .nm-bento { grid-auto-rows: minmax(132px, auto); }
  .nm-bento-tile--hero { grid-row: span 2; }
  .nm-bento-tile--tall { grid-column: span 1; grid-row: span 1; }
}

/* Anchor targets (the on-page contents links to #sec-…) must clear the
   sticky header, otherwise the heading lands behind it. */
body.nm [id^="sec-"],
body.nm .nm-prose h2,
body.nm .nm-zz-body .nm-h3 { scroll-margin-top: 118px; }

/* Keep figures like "USD 60–120 /person" from breaking mid-value. */
.nm-bento-k { text-wrap: balance; overflow-wrap: break-word; }
.nm-bento-tile--stat { justify-content: center; }

/* ------------------------------------------- hero bar as the WhatsApp CTA
 * Keeps the reference bar's geometry (white, left-rounded, bleeding off the
 * right edge) while behaving as a button: it opens WhatsApp and carries the
 * trading hours as its second line.
 */
a.nm-hero-cta {
  gap: clamp(16px, 2vw, 28px);
  padding-right: clamp(20px, 4vw, 64px);
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
a.nm-hero-cta:hover,
a.nm-hero-cta:focus-visible {
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

.nm-hero-cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  text-align: right;
}
.nm-hero-cta-main {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--nm-ink);
  white-space: nowrap;
}
.nm-hero-cta-sub {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--nm-ink-soft);
  white-space: nowrap;
}

/* Wide screens keep the label and number on one line, separated by a middot;
   narrow screens drop the separator so it cannot dangle at a line break. */
.nm-hero-cta-text { flex-flow: row wrap; align-items: baseline; justify-content: flex-end; }
.nm-hero-cta-num {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--nm-ink);
  white-space: nowrap;
}
.nm-hero-cta-num::before { content: "·"; margin: 0 8px 0 2px; color: var(--nm-ink-faint); }
.nm-hero-cta-sub { flex-basis: 100%; }

/* Circular icon badge on the right end of the bar. */
.nm-hero-cta-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--nm-r-pill);
  background: var(--nm-ink);
  color: var(--nm-off);
  transition: background .25s ease, transform .25s ease;
}
a.nm-hero-cta:hover .nm-hero-cta-icon,
a.nm-hero-cta:focus-visible .nm-hero-cta-icon {
  background: var(--nm-terra);
  transform: scale(1.06);
}
body.nm .nm-hero-cta-icon svg { width: 24px; height: 24px; fill: currentColor; }

@media (max-width: 809px) {
  /* The bar stacks on small screens, so let the label wrap instead of
     forcing one long nowrap line off the edge. */
  a.nm-hero-cta {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 14px 18px 14px 26px;
    text-align: left;
  }
  .nm-hero-cta-text { flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; }
  .nm-hero-cta-main,
  .nm-hero-cta-sub { white-space: normal; }
  .nm-hero-cta-num::before { content: none; margin: 0; }
  .nm-hero-cta-icon { width: 46px; height: 46px; }
  body.nm .nm-hero-cta-icon svg { width: 21px; height: 21px; }
}