/* =========================================================
   NOKO — Design System
   Small Camper. Big Adventure.
   A Safari Junctions Adventures brand.
   ========================================================= */

:root {
  /* Brand palette — deep forest green, warm ivory, savannah gold */
  --noko-green-dark: #0F3D2E;   /* deep forest green — primary */
  --noko-green-dark-2: #0A2C21;
  --noko-green-olive: #4E6B4A;
  --noko-amber: #F4A62A;        /* savannah gold — accent */
  --noko-amber-dark: #D98D14;
  --noko-cream: #F7F5ED;        /* warm ivory — secondary */
  --noko-white: #FFFFFF;

  /* Secondary accent + neutrals */
  --noko-terracotta: #C1602D;
  --noko-terracotta-dark: #9E4B22;
  --noko-terracotta-tint: #F3DFCF;
  --noko-charcoal: #2B2A27;
  --noko-sand: #EDE1CC;
  --noko-sand-dark: #DBC9A8;

  /* Text */
  --noko-ink: #221F1B;
  --noko-ink-muted: #4B5A52;
  --noko-ink-soft: #7C887F;

  /* Surfaces */
  --noko-border: #E4E0D3;
  --noko-card: #FFFFFF;
  --noko-bg: var(--noko-cream);

  /* Feedback */
  --noko-success: #2E7D53;
  --noko-danger: #C24C3D;

  /* Radii / shadow — soft, rounded, landscape-inspired rather than boxy */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  /* Two-layer shadows — a tight contact shadow plus a soft ambient
     one — read as more deliberately designed than a single flat
     blur, the way a physical card actually sits on a surface. */
  --shadow-card: 0 1px 2px rgba(43, 42, 39, 0.04), 0 10px 26px rgba(43, 42, 39, 0.08);
  --shadow-pop: 0 4px 10px rgba(15, 61, 46, 0.10), 0 26px 48px rgba(15, 61, 46, 0.20);

  --font-display: 'Plus Jakarta Sans', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  /* Editorial display serif — h1/h2 only (see the rules below). Every
     other UI element (buttons, nav, data, logo) stays on --font-display
     for legibility; this is the one deliberate departure, reserved for
     the handful of places a page actually wants to read as a headline
     rather than an interface. */
  --font-heading: 'Fraunces', 'Plus Jakarta Sans', Georgia, serif;

  /* Premium/cinematic accents — additive to the palette above, not a
     replacement. Reserved for large dark hero/editorial sections that
     want more visual weight than the everyday green-and-amber chrome:
     a near-black ground, a muted metallic gold (distinct from the
     brighter --noko-amber used on CTAs), and a quiet neutral for
     secondary text on dark grounds. */
  --noko-obsidian: #0D1410;
  --noko-gold-muted: #C9A860;
  --noko-stone: #9CA79B;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--noko-ink);
  background: var(--noko-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

::selection { background: var(--noko-amber); color: var(--noko-green-dark-2); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--noko-bg); }
::-webkit-scrollbar-thumb { background: var(--noko-sand-dark); border-radius: var(--radius-pill); border: 3px solid var(--noko-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--noko-green-olive); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--noko-green-dark);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 { font-family: var(--font-heading); font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.005em; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; color: var(--noko-ink-muted); }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 64px 0; }
.section-tight { padding: 32px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--noko-amber-dark);
  margin-bottom: 10px;
}
.eyebrow::before { content: ''; width: 16px; height: 2px; border-radius: 1px; background: currentColor; opacity: 0.55; flex-shrink: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color .15s ease, filter .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* A slight brightness lift + shadow bloom + upward nudge on hover,
   consistently across every button variant — the small extra
   dimension that separates a flat CSS button from a "designed" one. */
.btn-primary {
  background: linear-gradient(180deg, #F8BC55 0%, var(--noko-amber) 55%, var(--noko-amber-dark) 100%);
  color: var(--noko-green-dark-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 8px 20px rgba(244, 166, 42, 0.32);
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset, 0 12px 26px rgba(244, 166, 42, 0.4); }

.btn-dark {
  background: linear-gradient(180deg, #144A38 0%, var(--noko-green-dark) 60%, var(--noko-green-dark-2) 100%);
  color: var(--noko-cream);
  box-shadow: 0 8px 18px rgba(10, 20, 16, 0.22);
}
.btn-dark:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 12px 24px rgba(10, 20, 16, 0.28); }

.btn-outline {
  background: transparent;
  border-color: var(--noko-green-dark);
  color: var(--noko-green-dark);
}
.btn-outline:hover { background: var(--noko-green-dark); color: var(--noko-cream); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(15, 61, 46, 0.16); }

.btn-outline-light {
  background: transparent;
  border-color: rgba(247,245,237,0.55);
  color: var(--noko-cream);
}
.btn-outline-light:hover { background: rgba(247,245,237,0.12); border-color: var(--noko-cream); transform: translateY(-1px); }

.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--noko-cream);
  letter-spacing: 0.02em;
}
.logo .logo-mark { width: 40px; height: 40px; flex-shrink: 0; }
.logo-dark { color: var(--noko-green-dark); }
.logo small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: -2px;
}

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 61, 46, 0.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(201, 168, 96, 0.18);
  box-shadow: 0 2px 16px rgba(0,0,0,0.14);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 24px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: rgba(247,245,237,0.82);
  font-weight: 500;
  font-size: 0.94rem;
  transition: color .15s ease;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 1px;
  background: var(--noko-amber);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--noko-amber); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-drawer .nav-links a::after { display: none; }
.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--noko-cream);
  padding: 6px;
  margin: -6px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle svg { width: 26px; height: 26px; display: block; }

/* Mobile/tablet nav drawer — initNavToggle() (main.js) relocates the
   SAME .nav-links/.nav-actions elements in here below the collapse
   breakpoint, and back to their normal header position above it, so
   there's exactly one copy of each link in the DOM at any time. */
.nav-backdrop {
  position: fixed; inset: 76px 0 0 0; z-index: 90;
  background: rgba(10,20,16,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }
.nav-drawer {
  position: fixed; top: 76px; left: 0; right: 0; z-index: 95;
  background: var(--noko-green-dark);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 18px 36px rgba(0,0,0,0.28);
  padding: 8px 20px 24px;
  max-height: calc(100vh - 76px);
  overflow-y: auto;
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-drawer.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-drawer .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.nav-drawer .nav-actions { display: flex; }
.nav-drawer .nav-links a {
  display: block;
  padding: 15px 4px;
  font-size: 1.02rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-drawer .nav-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; }
.nav-drawer .nav-actions .btn { width: 100%; text-align: center; }
@media (min-width: 901px) {
  .nav-drawer, .nav-backdrop { display: none !important; }
}

.role-pill {
  display: inline-flex;
  gap: 4px;
  background: rgba(247,245,237,0.08);
  border: 1px solid rgba(247,245,237,0.18);
  border-radius: var(--radius-pill);
  padding: 4px;
}
.role-pill a {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(247,245,237,0.65);
}
.role-pill a.active { background: var(--noko-amber); color: var(--noko-green-dark-2); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: radial-gradient(120% 140% at 15% 0%, #163f30 0%, var(--noko-green-dark) 55%, var(--noko-green-dark-2) 100%);
  color: var(--noko-cream);
  overflow: hidden;
  padding: 76px 0 90px;
}
.hero .quill-bg {
  position: absolute;
  inset: 0;
  opacity: 0.10;
  pointer-events: none;
  background-image: repeating-linear-gradient(115deg, transparent 0 60px, rgba(247,245,237,0.5) 60px 62px);
  mask-image: radial-gradient(circle at 75% 30%, black, transparent 70%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
.hero h1 { color: var(--noko-cream); }
.hero .lede { color: rgba(247,245,237,0.82); font-size: 1.08rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.trust-row {
  display: flex;
  gap: 32px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.trust-item { display: flex; align-items: center; gap: 10px; color: rgba(247,245,237,0.85); font-size: 0.9rem; font-weight: 500; }
.trust-item svg { width: 26px; height: 26px; color: var(--noko-amber); flex-shrink: 0; }

.hero-art {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  aspect-ratio: 4/3;
  background:
    linear-gradient(180deg, rgba(15,61,46,0) 40%, rgba(10,20,16,0.55) 100%),
    linear-gradient(200deg, #f6c98a 0%, #e08a4b 32%, #7a5a52 55%, #35443c 78%, #16241d 100%);
}
.hero-art .mountain {
  position: absolute;
  left: 8%;
  bottom: 18%;
  width: 55%;
  opacity: 0.9;
}
.hero-art .van {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: 62%;
}
.hero-art .caption {
  position: absolute;
  left: 20px;
  bottom: 16px;
  color: var(--noko-cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ---------- Cards ---------- */
.card {
  background: var(--noko-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--noko-border);
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card-pad { padding: 22px; }

.listing-card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.listing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.listing-card .thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(200deg, #f6c98a 0%, #e0954f 30%, #7d6157 55%, #37453d 78%, #16241d 100%);
}
/* Placeholder "photo" gradients cycled by index for JS-rendered cards —
   swap for real photography via the Media Library once available.
   Specificity must match/exceed ".listing-card .thumb" (0,2,0) or the
   base gradient silently wins — hence the compound selectors here. */
.listing-card .thumb.thumb-grad-1, .thumb.thumb-grad-1 { background: linear-gradient(200deg, #f6c98a 0%, #e0954f 30%, #7d6157 55%, #37453d 78%, #16241d 100%); }
.listing-card .thumb.thumb-grad-2, .thumb.thumb-grad-2 { background: linear-gradient(200deg, #e7d9b0 0%, #c98a53 30%, #6f5a4d 55%, #2f3b34 78%, #12201a 100%); }
.listing-card .thumb.thumb-grad-3, .thumb.thumb-grad-3 { background: linear-gradient(200deg, #f0d8a0 0%, #d9975a 30%, #5f7566 55%, #243a2d 78%, #0f2018 100%); }
.listing-card .thumb.thumb-grad-4, .thumb.thumb-grad-4 { background: linear-gradient(200deg, #f6c98a 0%, #b97a63 30%, #4a5c4f 55%, #1c3226 78%, #0c1c14 100%); }
.listing-card .thumb.thumb-grad-5, .thumb.thumb-grad-5 { background: linear-gradient(200deg, #efc27f 0%, #c77c4d 30%, #6a6353 55%, #233626 78%, #0e1f16 100%); }
.listing-card .thumb.thumb-grad-6, .thumb.thumb-grad-6 { background: linear-gradient(200deg, #f7d59b 0%, #d6874e 30%, #57685a 55%, #1e3a29 78%, #0b1f15 100%); }
.badge-fav {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(15,61,46,0.55);
  display: flex; align-items: center; justify-content: center;
  color: var(--noko-cream);
  border: none; z-index: 2; cursor: pointer; font-size: 16px; line-height: 1;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.badge-fav:hover { transform: scale(1.1); }
.badge-fav.is-fav { background: var(--noko-amber); color: var(--noko-green-dark-2); }
.listing-card .thumb .badge-fav { position: absolute; top: 12px; right: 12px; }
.badge-fav-standalone { background: var(--noko-cream); color: var(--noko-green-dark); border: 1px solid rgba(15,61,46,0.15); width: 42px; height: 42px; font-size: 18px; }
.badge-fav-standalone.is-fav { background: var(--noko-amber); color: var(--noko-green-dark-2); border-color: transparent; }
.listing-card .body { padding: 16px 18px 20px; }
.listing-card .tag-row { display: flex; gap: 8px; margin-bottom: 8px; }
.tag {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: rgba(78,107,74,0.12); color: var(--noko-green-olive);
}
.rating { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--noko-ink-muted); }
.rating .stars { color: var(--noko-amber); letter-spacing: 1px; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }
.price { font-family: var(--font-display); font-weight: 700; color: var(--noko-green-dark); font-size: 1.15rem; }
.price span { font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; color: var(--noko-ink-soft); }

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Icon badge — base style, reused standalone (tool cards, state blocks) and inside .feature-tile */
.icon-badge {
  width: 56px; height: 56px; margin: 0 0 14px;
  border-radius: 16px; flex-shrink: 0;
  background: var(--noko-green-dark);
  display: flex; align-items: center; justify-content: center;
  color: var(--noko-amber);
}
.icon-badge svg { width: 28px; height: 28px; }

.feature-tile { text-align: center; }
.feature-tile .icon-badge { margin: 0 auto 14px; }
.feature-tile h3 { font-size: 1.02rem; margin-bottom: 6px; }
.feature-tile p { font-size: 0.9rem; margin: 0; }

/* ---------- Quill divider / icon ---------- */
.quill-divider { display: flex; align-items: center; gap: 10px; color: var(--noko-green-olive); opacity: 0.5; margin: 8px 0 24px; }
.quill-divider svg { width: 18px; height: 18px; }
.quill-divider .line { flex: 1; height: 1px; background: currentColor; opacity: 0.3; }

/* ---------- Footer ---------- */
.footer {
  background: var(--noko-green-dark-2);
  color: rgba(247,245,237,0.7);
  padding: 64px 0 28px;
  border-top: 3px solid var(--noko-amber);
}
.footer h4 {
  color: var(--noko-cream);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px 28px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer a { font-size: 0.88rem; color: rgba(247,245,237,0.65); transition: color .15s ease; }
.footer a:hover { color: var(--noko-amber); }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(247,245,237,0.12);
  display: flex; justify-content: space-between; font-size: 0.8rem; flex-wrap: wrap; gap: 10px;
}
.swatch-row { display: flex; gap: 10px; margin-top: 14px; }
.swatch { width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(247,245,237,0.25); }

/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--noko-green-dark); margin-bottom: 6px; }
.field .hint { font-size: 0.78rem; color: var(--noko-ink-soft); margin-top: 4px; }
input, select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--noko-border);
  background: var(--noko-white);
  color: var(--noko-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--noko-green-olive); box-shadow: 0 0 0 3.5px rgba(78, 107, 74, 0.14); }
.input-row { display: flex; gap: 14px; }
.input-row > * { flex: 1; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; color: var(--noko-ink-muted); }
.checkbox-row input { width: auto; margin-top: 3px; }

/* ---------- Real, live (pannable) map container ---------- */
.live-map-container { min-height: 260px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--noko-border); background: var(--noko-bg); }
.live-map-container .mapboxgl-canvas-container, .live-map-container .mapboxgl-map { border-radius: var(--radius-md); }
.live-map-toggle-row { display: flex; justify-content: flex-end; margin-top: 10px; }

/* ---------- Auth form alerts ---------- */
.form-alert { padding: 11px 14px; border-radius: var(--radius-sm); background: rgba(194,76,61,0.1); color: var(--noko-danger); font-size: 0.85rem; margin-bottom: 16px; }
.form-alert.form-alert-success { background: rgba(46,125,83,0.1); color: var(--noko-success); }

/* ---------- Search bar ---------- */
.search-bar {
  background: var(--noko-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.search-bar .field-inline { flex: 1; min-width: 140px; padding: 8px 14px; }
.search-bar .field-inline label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--noko-ink-soft); font-weight: 700; margin-bottom: 2px; }
.search-bar input, .search-bar select { border: none; padding: 2px 0; font-weight: 600; color: var(--noko-green-dark); }
.search-bar input:focus, .search-bar select:focus { outline: none; }
.search-bar .divider { width: 1px; height: 34px; background: var(--noko-border); }

/* ---------- Quill quantity stepper (guests selector) ---------- */
.quill-stepper { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px 0; }
.quill-stepper .quill-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--noko-green-olive);
  background: var(--noko-white); color: var(--noko-green-dark);
  font-size: 1.1rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.quill-stepper .quill-btn:hover { background: var(--noko-green-dark); color: var(--noko-cream); }
.quill-trail { display: flex; align-items: center; gap: 2px; }
.quill-trail svg { width: 14px; height: 22px; color: var(--noko-border); transition: color .2s ease; }
.quill-trail svg.lit { color: var(--noko-amber); }
.quill-count {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--noko-amber); color: var(--noko-green-dark-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--noko-border); margin-bottom: 24px; flex-wrap: wrap; }
.tab-btn {
  padding: 12px 18px; font-weight: 600; font-size: 0.9rem; color: var(--noko-ink-soft);
  background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-btn.active { color: var(--noko-green-dark); border-bottom-color: var(--noko-amber); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Dashboard layout ---------- */
/* min-width:0 on both grid items: without it, a Grid item defaults to
   min-width:auto, so its column track is sized to the item's own
   min-content — meaning one long, unwrappable value anywhere in the
   main content column (a wide table, a long KPI number) silently
   forces the WHOLE track wider than the viewport, and the sidebar
   next to it inherits that same oversized column. This is what was
   pushing .dash-side off the right edge of the screen on phones. */
.dash-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
.dash-layout > * { min-width: 0; }
.dash-side { position: sticky; top: 96px; }
.dash-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--noko-green-olive); color: var(--noko-cream); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); }
.dash-nav { display: flex; flex-direction: column; gap: 4px; }
.dash-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); font-weight: 500; font-size: 0.92rem; color: var(--noko-ink-muted); }
.dash-nav a svg { width: 18px; height: 18px; color: var(--noko-green-olive); flex-shrink: 0; }
.dash-nav a:hover { background: rgba(78,107,74,0.08); }
.dash-nav a.active { background: var(--noko-green-dark); color: var(--noko-cream); }
.dash-nav a.active svg { color: var(--noko-amber); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.kpi-card { padding: 18px 20px; }
.kpi-label { font-size: 0.78rem; color: var(--noko-ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--noko-green-dark); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.kpi-delta { font-size: 0.8rem; font-weight: 600; }
.kpi-delta.up { color: var(--noko-success); }
.kpi-delta.down { color: var(--noko-danger); }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
@media (max-width: 700px) {
  /* A data table's min-content (guest names, dates, status pills
     across 5-6 columns) is routinely wider than a phone screen. Once
     .dash-layout can no longer be forced wide by it (see above), the
     table itself needs somewhere to overflow to — this lets a table
     scroll horizontally in place instead of clipping or widening the
     page around it. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}
th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--noko-ink-soft); padding: 10px 14px; border-bottom: 1.5px solid var(--noko-border); }
td { padding: 14px; border-bottom: 1px solid var(--noko-border); color: var(--noko-ink); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }

.status-pill { padding: 4px 11px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; }
.status-pill.green { background: rgba(46,125,83,0.12); color: var(--noko-success); }
.status-pill.amber { background: rgba(244,166,42,0.15); color: var(--noko-amber-dark); }
.status-pill.red { background: rgba(194,76,61,0.12); color: var(--noko-danger); }
.status-pill.gray { background: rgba(76,90,82,0.1); color: var(--noko-ink-muted); }

.mini-chart { display: flex; align-items: flex-end; gap: 4px; height: 60px; }
.mini-chart .bar { flex: 1; background: var(--noko-amber); border-radius: 3px 3px 0 0; opacity: 0.85; }

.progress-track { height: 8px; border-radius: var(--radius-pill); background: var(--noko-border); overflow: hidden; }
.progress-fill { height: 100%; background: var(--noko-amber); border-radius: var(--radius-pill); }

/* ---------- Steps (checkout) ---------- */
.steps { display: flex; align-items: center; margin-bottom: 36px; flex-wrap: wrap; gap: 8px; }
.step { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; font-weight: 600; color: var(--noko-ink-soft); }
.step .num { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--noko-border); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); }
.step.active { color: var(--noko-green-dark); }
.step.active .num, .step.done .num { background: var(--noko-green-dark); border-color: var(--noko-green-dark); color: var(--noko-cream); }
.step.done .num { background: var(--noko-amber); border-color: var(--noko-amber); color: var(--noko-green-dark-2); }
.step-connector { flex: 1; min-width: 24px; height: 2px; background: var(--noko-border); }

.summary-row { display: flex; justify-content: space-between; font-size: 0.92rem; padding: 8px 0; color: var(--noko-ink-muted); font-variant-numeric: tabular-nums; }
.summary-row.total { border-top: 1.5px solid var(--noko-border); margin-top: 8px; padding-top: 14px; font-weight: 700; color: var(--noko-green-dark); font-size: 1.05rem; }

.pay-option { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--noko-border); border-radius: var(--radius-sm); cursor: pointer; margin-bottom: 10px; }
.pay-option input { width: auto; }
.pay-option.selected { border-color: var(--noko-green-olive); background: rgba(78,107,74,0.05); }

.upload-box {
  border: 2px dashed var(--noko-border); border-radius: var(--radius-md);
  padding: 28px; text-align: center; color: var(--noko-ink-soft); font-size: 0.9rem;
  background: rgba(78,107,74,0.03);
  cursor: pointer; display: block;
}
.upload-box:hover { border-color: var(--noko-amber); }
.upload-box.has-file { border-style: solid; border-color: var(--noko-success, #2E7D32); color: var(--noko-ink); }
.upload-box input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.upload-box.is-disabled { opacity: 0.5; cursor: not-allowed; }

.badge-soft { display: inline-flex; align-items: center; gap: 6px; background: rgba(78,107,74,0.1); color: var(--noko-green-olive); padding: 5px 12px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 600; }

.spin-thumb { position: relative; width: 72px; height: 54px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
.spin-thumb .spin-thumb-index { position: absolute; bottom: 2px; left: 4px; color: #fff; font-size: 0.65rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.spin-thumb .spin-thumb-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--noko-green-dark); color: #fff; border: none; font-size: 0.75rem; line-height: 1; cursor: pointer; }
.spin-thumb .spin-thumb-move { position: absolute; bottom: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--noko-cream); border: 1px solid var(--noko-border); font-size: 0.65rem; line-height: 1; cursor: pointer; }
.spin-thumb .spin-thumb-move-left { left: -6px; }
.spin-thumb .spin-thumb-move-right { right: -6px; }

.spin-viewer { user-select: none; }
.spin-viewer .spin-stage { position: relative; border-radius: var(--radius-md); overflow: hidden; background: rgba(78,107,74,0.05); aspect-ratio: 4/3; cursor: ew-resize; }
.spin-viewer .spin-frame { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.spin-viewer .spin-hint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(15,35,25,0.55); color: #fff; font-size: 0.78rem; padding: 5px 12px; border-radius: var(--radius-pill); pointer-events: none; }

.cta-band {
  background: var(--noko-green-dark);
  color: var(--noko-cream);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: var(--noko-cream); margin-bottom: 6px; }
.cta-band p { color: rgba(247,245,237,0.75); margin: 0; }

.auth-shell {
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-art {
  background: radial-gradient(120% 140% at 20% 10%, #163f30 0%, var(--noko-green-dark) 55%, var(--noko-green-dark-2) 100%);
  color: var(--noko-cream);
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.auth-form-wrap { display: flex; align-items: center; justify-content: center; padding: 60px 40px; }
.auth-form { width: 100%; max-width: 400px; }

.list-check { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.list-check li { display: flex; gap: 10px; align-items: flex-start; color: rgba(247,245,237,0.85); font-size: 0.92rem; }
.list-check svg { width: 20px; height: 20px; color: var(--noko-amber); flex-shrink: 0; margin-top: 1px; }

/* Responsive */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid > div:first-child { grid-column: 1 / -1; margin-bottom: 4px; }
  .dash-layout { grid-template-columns: 1fr; }
  .dash-side { position: static; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art { display: none; }
}
/* Nav collapses to the drawer earlier than the rest of the layout —
   this is the range (tablets, small laptops) where the full desktop
   nav-links row has nowhere near enough width and wraps onto two
   lines per item; the drawer reads cleanly at any width below this. */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .navbar:has(.nav-toggle) .nav-actions { display: none; }
}
@media (max-width: 480px) {
  .logo small { display: none; }
}
@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:first-child { grid-column: auto; margin-bottom: 0; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .search-bar { flex-direction: column; align-items: stretch; }
  .search-bar .divider { display: none; }
  .cta-band { padding: 32px 24px; text-align: center; justify-content: center; }
  .input-row { flex-direction: column; }
}

/* =========================================================
   Owner Control Center — no-code hub, fleet, pricing,
   calendar, finance, compliance, maintenance
   ========================================================= */

/* Sub-nav breadcrumb used on owner tool pages */
.tool-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px; margin-bottom:24px; }
.tool-crumb { font-size:0.82rem; color:var(--noko-ink-soft); margin-bottom:6px; }
.tool-crumb a { color:var(--noko-green-olive); font-weight:600; }

/* Owner tool grid on the hub landing */
.tool-card { display:flex; flex-direction:column; gap:10px; padding:22px; height:100%; }
.tool-card .icon-badge { margin:0; }
.tool-card h3 { margin-bottom:0; }
.tool-card p { font-size:0.88rem; margin-bottom:auto; }
.tool-card .tool-link { font-size:0.85rem; font-weight:700; color:var(--noko-green-olive); }

/* Toggle switch */
.toggle { position:relative; display:inline-block; width:46px; height:26px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle .slider { position:absolute; inset:0; background:var(--noko-border); border-radius:var(--radius-pill); cursor:pointer; transition:background .15s ease; }
.toggle .slider::before { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s ease; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
.toggle input:checked + .slider { background:var(--noko-green-olive); }
.toggle input:checked + .slider::before { transform:translateX(20px); }
.toggle input:disabled + .slider { cursor:not-allowed; opacity:0.45; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--noko-border); }
.toggle-row:last-child { border-bottom:none; }
.toggle-row strong { display:block; font-size:0.92rem; color:var(--noko-green-dark); }
.toggle-row span.hint { display:block; margin-top:2px; }

/* Range slider */
input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:var(--radius-pill); background:var(--noko-border); padding:0; border:none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--noko-amber); border:3px solid var(--noko-white); box-shadow:0 1px 4px rgba(0,0,0,0.25); cursor:pointer; }
input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--noko-amber); border:3px solid var(--noko-white); box-shadow:0 1px 4px rgba(0,0,0,0.25); cursor:pointer; }
.slider-row { margin-bottom:22px; }
.slider-row .slider-label { display:flex; justify-content:space-between; font-size:0.88rem; font-weight:600; color:var(--noko-green-dark); margin-bottom:8px; }
.slider-row .slider-label output { color:var(--noko-amber-dark); font-family:var(--font-display); }

/* ---------- Webhook / automation builder ---------- */
.flow-row { display:flex; align-items:center; gap:14px; overflow-x:auto; padding:6px 2px 16px; }
.flow-node { flex-shrink:0; min-width:190px; border:1.5px solid var(--noko-border); border-radius:var(--radius-md); padding:14px 16px; background:var(--noko-white); }
.flow-node .flow-kind { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--noko-ink-soft); }
.flow-node .flow-name { font-family:var(--font-display); font-weight:600; color:var(--noko-green-dark); margin-top:2px; }
.flow-node.trigger { border-color:var(--noko-amber); background:rgba(244,166,42,0.06); }
.flow-node.action { border-color:var(--noko-green-olive); background:rgba(78,107,74,0.06); }
.flow-arrow { flex-shrink:0; color:var(--noko-border); font-size:1.4rem; }
.flow-add { flex-shrink:0; width:44px; height:44px; border-radius:50%; border:2px dashed var(--noko-border); background:none; color:var(--noko-ink-soft); font-size:1.3rem; cursor:pointer; }
.automation-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--noko-border); flex-wrap:wrap; }
.automation-row:last-child { border-bottom:none; }

/* ---------- Connector marketplace ---------- */
.connector-tile { display:flex; align-items:center; gap:12px; padding:16px; border:1.5px solid var(--noko-border); border-radius:var(--radius-md); background:var(--noko-white); }
.connector-tile .conn-mark { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:var(--noko-cream); flex-shrink:0; font-size:1.1rem; }
.connector-tile .conn-body { flex:1; min-width:0; }
.connector-tile .conn-body strong { display:block; font-size:0.92rem; color:var(--noko-green-dark); }
.connector-tile .conn-body span { font-size:0.78rem; color:var(--noko-ink-soft); }

/* ---------- API key vault ---------- */
.key-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:0.85rem; background:rgba(78,107,74,0.07); padding:4px 9px; border-radius:6px; color:var(--noko-green-dark); }

/* ---------- Custom field / schema builder ---------- */
.field-def-row { display:grid; grid-template-columns: 1.3fr 1fr 1fr 0.7fr auto; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--noko-border); font-size:0.88rem; }
.field-def-row:last-child { border-bottom:none; }
.field-def-row.head { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--noko-ink-soft); padding-bottom:8px; }

/* ---------- Mini calendar grid ---------- */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-grid .cal-dow { text-align:center; font-size:0.72rem; font-weight:700; color:var(--noko-ink-soft); text-transform:uppercase; padding-bottom:4px; }
.cal-day { aspect-ratio:1; border-radius:9px; border:1.5px solid var(--noko-border); display:flex; align-items:flex-start; justify-content:flex-start; padding:6px; font-size:0.78rem; font-weight:600; color:var(--noko-ink-muted); cursor:pointer; background:var(--noko-white); }
.cal-day.muted { opacity:0.3; cursor:default; }
.cal-day.booked { background:rgba(46,125,83,0.1); border-color:var(--noko-success); color:var(--noko-success); }
.cal-day.blocked { background:rgba(194,76,61,0.08); border-color:var(--noko-danger); color:var(--noko-danger); }
.cal-day.pending { background:rgba(244,166,42,0.12); border-color:var(--noko-amber); color:var(--noko-amber-dark); }
.cal-day.today { box-shadow:0 0 0 2px var(--noko-green-dark) inset; }
.cal-legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font-size:0.82rem; color:var(--noko-ink-muted); }
.cal-legend .dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:middle; }

/* ---------- Condition checklist (handover) ---------- */
.checklist-zone { display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--noko-border); }
.checklist-zone:last-child { border-bottom:none; }
.checklist-zone .zone-shot { width:96px; height:72px; border-radius:10px; flex-shrink:0; background:linear-gradient(200deg,#e7d9b0 0%,#c98a53 30%,#6f5a4d 55%,#2f3b34 78%,#12201a 100%); }
.checklist-zone .zone-body { flex:1; }
.checklist-zone .zone-body h4 { margin:0 0 4px; font-size:0.95rem; color:var(--noko-green-dark); font-family:var(--font-display); font-weight:600; }

/* ---------- Currency toggle ---------- */
.currency-toggle { display:inline-flex; gap:4px; background:var(--noko-border); border-radius:var(--radius-pill); padding:4px; }
.currency-toggle button { padding:6px 16px; border-radius:var(--radius-pill); border:none; background:none; font-weight:700; font-size:0.8rem; color:var(--noko-ink-muted); cursor:pointer; font-family:var(--font-display); }
.currency-toggle button.active { background:var(--noko-green-dark); color:var(--noko-cream); }

/* ---------- In-app messaging ---------- */
.chat-shell { display:grid; grid-template-columns:300px 1fr; height:640px; border:1px solid var(--noko-border); border-radius:var(--radius-lg); overflow:hidden; background:var(--noko-white); box-shadow:var(--shadow-card); }
.chat-list { border-right:1px solid var(--noko-border); overflow-y:auto; }
.chat-list-search { padding:14px; border-bottom:1px solid var(--noko-border); }
.chat-list-item { display:flex; gap:12px; padding:14px 16px; cursor:pointer; border-bottom:1px solid var(--noko-border); align-items:flex-start; }
.chat-list-item:hover { background:rgba(78,107,74,0.04); }
.chat-list-item.active { background:rgba(78,107,74,0.09); }
.chat-list-item .meta { flex:1; min-width:0; }
.chat-list-item .row1 { display:flex; justify-content:space-between; gap:8px; }
.chat-list-item .name { font-weight:600; color:var(--noko-green-dark); font-size:0.92rem; }
.chat-list-item .time { font-size:0.72rem; color:var(--noko-ink-soft); flex-shrink:0; }
.chat-list-item .preview { font-size:0.82rem; color:var(--noko-ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.chat-list-item .unread-dot { width:9px; height:9px; border-radius:50%; background:var(--noko-amber); flex-shrink:0; margin-top:5px; }

.chat-thread { display:flex; flex-direction:column; min-height:0; }
.chat-thread-header { padding:14px 20px; border-bottom:1px solid var(--noko-border); display:flex; align-items:center; gap:12px; flex-shrink:0; }
.chat-thread-header .meta strong { display:block; color:var(--noko-green-dark); font-size:0.95rem; }
.chat-thread-header .meta span { font-size:0.78rem; color:var(--noko-ink-soft); }
.chat-messages { flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:12px; }
.chat-day-sep { text-align:center; font-size:0.72rem; color:var(--noko-ink-soft); margin:6px 0; text-transform:uppercase; letter-spacing:0.04em; }
.chat-bubble { max-width:68%; padding:10px 15px; border-radius:16px; font-size:0.9rem; line-height:1.45; }
.chat-bubble.in { background:var(--noko-bg); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-bubble.out { background:var(--noko-green-dark); color:var(--noko-cream); align-self:flex-end; border-bottom-right-radius:4px; }
.chat-bubble .stamp { display:block; font-size:0.68rem; opacity:0.6; margin-top:5px; }
.chat-bubble.attachment { display:flex; align-items:center; gap:10px; }
.chat-input-row { display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--noko-border); flex-shrink:0; }
.chat-input-row input { flex:1; }
.chat-icon-btn { width:44px; height:44px; border-radius:50%; border:1.5px solid var(--noko-border); background:none; color:var(--noko-ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.chat-icon-btn svg { width:19px; height:19px; }

@media (max-width: 780px) {
  .chat-shell { grid-template-columns:1fr; height:auto; }
  .chat-list { max-height:220px; }
  .chat-thread { height:460px; }
}

/* ---------- Review / rating ---------- */
.star-picker { display:flex; gap:6px; }
.star-picker button { background:none; border:none; cursor:pointer; padding:0; color:var(--noko-border); }
.star-picker button svg { width:34px; height:34px; }
.star-picker button.lit { color:var(--noko-amber); }
.chip-select { display:flex; flex-wrap:wrap; gap:8px; }
.chip-select .chip-option { padding:8px 15px; border-radius:var(--radius-pill); border:1.5px solid var(--noko-border); font-size:0.85rem; font-weight:600; color:var(--noko-ink-muted); cursor:pointer; background:var(--noko-white); }
.chip-select .chip-option.selected { background:var(--noko-green-dark); border-color:var(--noko-green-dark); color:var(--noko-cream); }

/* ---------- SOS ---------- */
.sos-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:20px; border-radius:var(--radius-lg); background:var(--noko-danger); color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.1rem; border:none; cursor:pointer; box-shadow:0 10px 24px rgba(194,76,61,0.35); }
.contact-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:16px 0; border-bottom:1px solid var(--noko-border); }

/* ---------- Listing detail layout ---------- */
.listing-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }

/* ---------- Listings browse layout (filters sidebar + results) ---------- */
.listings-layout { grid-template-columns: 260px 1fr; align-items: start; }

@media (max-width: 900px) {
  .listing-layout, .listings-layout { grid-template-columns: 1fr; }
}
.contact-row:last-child { border-bottom:none; }
.contact-row .icon-badge { width:44px; height:44px; margin:0; }
.contact-row .icon-badge svg { width:22px; height:22px; }

@media (max-width: 640px) {
  .field-def-row { grid-template-columns: 1fr 1fr; }
  .field-def-row span:nth-child(3), .field-def-row span:nth-child(4) { display:none; }
  .checklist-zone { flex-direction:column; }
  .checklist-zone .zone-shot { width:100%; height:120px; }
}

/* =========================================================
   NOKO mascot + animation system
   ========================================================= */
.mascot { display:block; }
.mascot-sm { width:64px; height:64px; }
.mascot-md { width:120px; height:120px; }
.mascot-lg { width:220px; height:220px; }

/* Idle welcoming — gentle sway, waving arm */
@keyframes noko-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes noko-wave { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(-55deg); } }
.mascot-welcome { animation: noko-sway 3.5s ease-in-out infinite; transform-origin: 100px 165px; }
.mascot-welcome .arm-wave { animation: noko-wave 1.4s ease-in-out infinite; transform-origin: 25px 86px; }

/* Driving — loops across its container, wheels spin, motion lines pulse */
@keyframes noko-drive-loop { 0% { transform: translateX(-10%); } 50% { transform: translateX(10%); } 100% { transform: translateX(-10%); } }
@keyframes noko-wheel-spin { to { transform: rotate(360deg); } }
@keyframes noko-motion-fade { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.5; } }
.mascot-driving { animation: noko-drive-loop 2.4s ease-in-out infinite; }
.mascot-driving .wheel-spoke { animation: noko-wheel-spin 0.5s linear infinite; transform-origin: center; }
.mascot-driving .motion-line { animation: noko-motion-fade 1s ease-in-out infinite; }
.mascot-driving .motion-line:nth-child(2) { animation-delay: 0.15s; }
.mascot-driving .motion-line:nth-child(3) { animation-delay: 0.3s; }

/* Celebrating — bounce + confetti drift, plays once then settles */
@keyframes noko-bounce { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-14px) scale(1.03); } 50% { transform: translateY(0) scale(1); } 65% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes noko-confetti { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(26px) rotate(200deg); opacity: 0; } }
.mascot-celebrate { animation: noko-bounce 1.1s cubic-bezier(.34,1.56,.64,1) 1; }
.mascot-celebrate .confetti { animation: noko-confetti 1.6s ease-in infinite; }
.mascot-celebrate .confetti:nth-child(2) { animation-delay: 0.2s; }
.mascot-celebrate .confetti:nth-child(3) { animation-delay: 0.4s; }
.mascot-celebrate .confetti:nth-child(4) { animation-delay: 0.1s; }
.mascot-celebrate .confetti:nth-child(5) { animation-delay: 0.3s; }

/* Sleeping — slow breathing rise/fall for empty states */
@keyframes noko-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.mascot-sleep { animation: noko-breathe 3s ease-in-out infinite; }

/* Error — quick shake on appear */
@keyframes noko-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.mascot-error { animation: noko-shake 0.6s ease-in-out 1; }

/* Compact inline loading spinner built from the mascot wheels */
.noko-spinner { display:inline-flex; align-items:center; gap:10px; }
.noko-spinner .mascot-driving { width:56px; height:56px; }

/* Generic state block used for empty/error/success screens */
.state-block { text-align:center; padding:48px 24px; }
.state-block .mascot { margin:0 auto 20px; }
.state-block h3 { margin-bottom:6px; }
.state-block p { max-width:36ch; margin-left:auto; margin-right:auto; }

/* Signature transition — a small camper drives across the viewport
   between navigations. Triggered via data-noko-transition on a link
   and wired up by assets/js/main.js. */
.noko-transition-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--noko-green-dark);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
}
.noko-transition-overlay.active { opacity: 1; pointer-events: all; transition: opacity 0.15s ease; }
.noko-transition-overlay .mascot-drive-across { width: 140px; height: 140px; transform: translateX(-160vw); }
.noko-transition-overlay.active .mascot-drive-across { animation: noko-drive-across 0.7s cubic-bezier(.45,0,.55,1) forwards; }
@keyframes noko-drive-across { to { transform: translateX(160vw); } }

@media (max-width: 640px) {
  .mascot-lg { width:160px; height:160px; }
}

/* =========================================================
   Admin control-center components
   ========================================================= */
.admin-search { display:flex; align-items:center; gap:8px; background:rgba(247,245,237,0.1); border:1px solid rgba(247,245,237,0.18); border-radius:var(--radius-pill); padding:9px 16px; min-width:260px; }
.admin-search svg { width:16px; height:16px; color:rgba(247,245,237,0.6); flex-shrink:0; }
.admin-search input { border:none; background:none; padding:0; color:var(--noko-cream); font-size:0.85rem; }
.admin-search input::placeholder { color:rgba(247,245,237,0.5); }
.admin-search input:focus { outline:none; }
@media (max-width: 980px) {
  .admin-search { min-width: 0; flex: 1 1 140px; }
}
@media (max-width: 640px) {
  .admin-search { display: none; }
}

/* Drag-reorder block list (website builder) */
.block-list { display:flex; flex-direction:column; gap:10px; }
.block-item { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--noko-white); border:1.5px solid var(--noko-border); border-radius:var(--radius-md); cursor:grab; }
.block-item:active { cursor:grabbing; }
.block-item.dragging { opacity:0.5; }
.block-item .drag-handle { color:var(--noko-ink-soft); flex-shrink:0; }
.block-item .drag-handle svg { width:18px; height:18px; }
.block-item .block-icon { width:36px; height:36px; border-radius:10px; background:rgba(78,107,74,0.1); color:var(--noko-green-olive); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.block-item .block-icon svg { width:18px; height:18px; }
.block-item .block-body { flex:1; min-width:0; }
.block-item .block-body strong { display:block; font-size:0.92rem; color:var(--noko-green-dark); }
.block-item .block-body span { font-size:0.78rem; color:var(--noko-ink-soft); }
.block-item .block-actions { display:flex; gap:4px; flex-shrink:0; }
.block-item .block-actions button { width:32px; height:32px; border-radius:8px; border:1px solid var(--noko-border); background:var(--noko-white); color:var(--noko-ink-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.block-item .block-actions button:hover { background:var(--noko-bg); }
.block-item .block-actions button svg { width:15px; height:15px; }
.block-item.hidden-block { opacity:0.5; }
.block-add-row { display:flex; justify-content:center; padding:8px; border:2px dashed var(--noko-border); border-radius:var(--radius-md); color:var(--noko-ink-soft); font-size:0.85rem; font-weight:600; cursor:pointer; }
.block-add-row:hover { border-color:var(--noko-green-olive); color:var(--noko-green-olive); }

/* Media library grid */
.media-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }
.media-tile { border-radius:var(--radius-md); overflow:hidden; border:1.5px solid var(--noko-border); background:var(--noko-white); cursor:pointer; }
.media-tile .thumb { aspect-ratio:1; background:linear-gradient(200deg,#f6c98a 0%, #e08a4b 32%, #7a5a52 55%, #35443c 78%, #16241d 100%); position:relative; }
.media-tile .thumb.doc { background:var(--noko-sand); display:flex; align-items:center; justify-content:center; color:var(--noko-green-olive); }
.media-tile .thumb.doc svg { width:32px; height:32px; }
.media-tile .meta { padding:8px 10px; }
.media-tile .meta .name { font-size:0.78rem; font-weight:600; color:var(--noko-green-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.media-tile .meta .size { font-size:0.7rem; color:var(--noko-ink-soft); }
.upload-drop { border:2px dashed var(--noko-green-olive); border-radius:var(--radius-lg); padding:36px; text-align:center; background:rgba(78,107,74,0.04); }
.upload-drop svg { width:30px; height:30px; color:var(--noko-green-olive); margin:0 auto 10px; }

/* Color swatch picker */
.color-field { display:flex; align-items:center; gap:10px; }
.color-field input[type="color"] { width:44px; height:44px; border-radius:10px; border:1.5px solid var(--noko-border); padding:2px; cursor:pointer; background:none; }
.color-field input[type="text"] { max-width:120px; font-family:ui-monospace,monospace; }

/* Logo upload control */
.logo-upload { display:flex; align-items:center; gap:16px; padding:16px; border:1.5px solid var(--noko-border); border-radius:var(--radius-md); }
.logo-upload .preview { width:64px; height:64px; border-radius:14px; background:var(--noko-green-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-upload .preview svg { width:34px; height:34px; }
.logo-upload .info { flex:1; }
.logo-upload .info strong { display:block; font-size:0.9rem; color:var(--noko-green-dark); }
.logo-upload .actions { display:flex; gap:8px; flex-wrap:wrap; }

.media-slot-card { display:flex; align-items:center; gap:16px; padding:16px; border:1.5px solid var(--noko-border); border-radius:var(--radius-md); margin-bottom:12px; }
.media-slot-card .preview { width:104px; height:70px; border-radius:10px; background:var(--noko-sand); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.media-slot-card .preview img, .media-slot-card .preview video { width:100%; height:100%; object-fit:cover; }
.media-slot-card .preview .hint { font-size:0.68rem; text-align:center; padding:0 6px; }
.media-slot-card .info { flex:1; min-width:0; }
.media-slot-card .info strong { display:block; font-size:0.9rem; color:var(--noko-green-dark); }
.media-slot-card .actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Token/variable picker chips (email templates) */
.token-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.token-chip { font-family:ui-monospace,monospace; font-size:0.76rem; padding:5px 10px; border-radius:var(--radius-pill); background:rgba(78,107,74,0.1); color:var(--noko-green-olive); font-weight:700; cursor:pointer; border:none; }
.token-chip:hover { background:rgba(78,107,74,0.18); }

/* Permission matrix */
.perm-table th, .perm-table td { text-align:center; }
.perm-table td:first-child, .perm-table th:first-child { text-align:left; }
.perm-check { width:18px; height:18px; accent-color:var(--noko-green-olive); }

/* Confirmation modal (safety protection) */
.modal-backdrop { position:fixed; inset:0; background:rgba(15,61,46,0.55); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-backdrop[hidden] { display:none; }
.modal-box { background:var(--noko-white); border-radius:var(--radius-lg); padding:28px; max-width:420px; width:100%; text-align:center; }
.modal-box .icon-badge { background:rgba(194,76,61,0.12); color:var(--noko-danger); margin:0 auto 14px; }
.modal-box .actions { display:flex; gap:10px; justify-content:center; margin-top:18px; }

/* =========================================================
   Premium homepage — cinematic hero, showroom, adventure
   builder, illustrated map, spots, stories, journal
   ========================================================= */

/* ---------- Cinematic hero ---------- */
.hero-cinematic {
  position: relative;
  overflow: hidden;
  padding: 128px 0 48px;
  color: var(--noko-cream);
  background: radial-gradient(130% 130% at 18% -10%, #17432f 0%, var(--noko-green-dark) 42%, var(--noko-green-dark-2) 78%, var(--noko-obsidian) 100%);
}
.hero-cinematic .quill-bg {
  position: absolute; inset: 0; opacity: 0.08; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, transparent 0 60px, rgba(247,245,237,0.5) 60px 62px);
  mask-image: radial-gradient(circle at 78% 25%, black, transparent 68%);
}
.hero-cinematic .horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(180deg, transparent 0%, rgba(10,20,16,0.5) 100%);
  pointer-events: none;
}
.hero-cinematic-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: center; }
.hero-cinematic .eyebrow { color: var(--noko-amber); }
.hero-cinematic h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); color: var(--noko-cream); margin-bottom: 0.18em; }
.hero-cinematic h1 .accent { color: var(--noko-amber); }
/* Oversized editorial statement — the one line on the page allowed to
   dominate a full viewport width; every other heading stays on the
   normal h1/h2 scale defined near the top of this file. */
.hero-statement {
  font-family: var(--font-heading);
  font-size: clamp(3.4rem, 9vw, 7.2rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--noko-cream);
  margin: 0 0 0.22em;
  text-wrap: balance;
}
.hero-cinematic .lede { font-size: 1.14rem; max-width: 46ch; color: rgba(247,245,237,0.82); }
.hero-cinematic .hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.btn-hero { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.86rem; padding: 15px 28px; }
.hero-float-panel {
  position: relative; z-index: 2; margin-top: -46px;
  background: var(--noko-white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); padding: 10px;
}
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(247,245,237,0.55); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  animation: noko-breathe 2.6s ease-in-out infinite;
}
.hero-scroll-cue svg { width: 16px; height: 16px; }

/* ---------- Brand statement (full-bleed obsidian editorial band) ----------
   The one deliberate use of --noko-obsidian/--noko-gold-muted reserved
   in the Phase 2 design-foundation pass — a single dark, quiet beat
   between the cinematic hero and the everyday forest-green/amber
   chrome the rest of the site runs on. */
.brand-statement {
  background: var(--noko-obsidian);
  padding: 96px 0;
  text-align: center;
  border-bottom: 1px solid rgba(201,168,96,0.18);
}
.brand-statement-text {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--noko-cream);
  margin: 0 auto 24px;
}
.brand-statement-sub {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--noko-gold-muted);
  font-size: 1.05rem;
}

/* ---------- Cinematic showcase (full-bleed video/photo moment) ----------
   Honest-degradation placeholder: the [data-media-slot] child stays
   hidden and this section shows a layered gradient + quill-mark
   texture on its own until an admin uploads real footage/photography
   to the homepage_showcase_media slot in Media Library. */
.cinematic-showcase {
  position: relative;
  overflow: hidden;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--noko-cream);
  background: radial-gradient(120% 120% at 50% 0%, #1c4a35 0%, var(--noko-green-dark-2) 46%, var(--noko-obsidian) 100%);
}
.cinematic-showcase .quill-bg { position: absolute; inset: 0; opacity: 0.07; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, transparent 0 60px, rgba(247,245,237,0.5) 60px 62px); }
.cinematic-showcase::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,20,16,0.35) 0%, rgba(10,20,16,0.15) 40%, rgba(10,20,16,0.6) 100%);
}
.cinematic-showcase-content { position: relative; z-index: 2; max-width: 720px; padding: 64px 24px; }
.cinematic-showcase-content .eyebrow { justify-content: center; color: var(--noko-amber); }
.cinematic-showcase-content .stmt-main {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.04; margin: 0.2em 0 0.35em; text-wrap: balance;
  color: var(--noko-cream);
}
.cinematic-showcase-content .stmt-sub { color: rgba(247,245,237,0.82); font-size: 1.08rem; max-width: 52ch; margin: 0 auto; }

/* ---------- Horizontal scrolling gallery ---------- */
.gallery-scroll {
  display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 22px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.gallery-scroll::-webkit-scrollbar { height: 8px; }
.gallery-scroll::-webkit-scrollbar-thumb { background: var(--noko-border); border-radius: var(--radius-pill); }
.gallery-card {
  position: relative; flex: 0 0 clamp(220px, 32vw, 340px); aspect-ratio: 4/5;
  border-radius: var(--radius-lg); overflow: hidden; scroll-snap-align: start;
  display: flex; align-items: flex-end;
  background: var(--noko-sand);
}
.gallery-card-fallback { position: absolute; inset: 0; }
.gallery-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(0deg, rgba(10,20,16,0.78) 0%, rgba(10,20,16,0.08) 55%);
}
.gallery-card-label { position: relative; z-index: 1; padding: 18px; color: var(--noko-cream); }
.gallery-card-label strong { display: block; font-size: 1rem; }
.gallery-card-label span { font-size: 0.82rem; color: rgba(247,245,237,0.75); }

/* ---------- Editorial page-header band (secondary public pages) ----------
   Every non-homepage public page opens with a .section-tight dark
   band + eyebrow + h1 + lede. .page-statement upgrades that h1 to
   the same oversized-editorial register as the homepage hero and
   Brand Statement, sized for a page header rather than a full
   viewport hero. */
.page-statement {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  color: var(--noko-cream);
  margin: 0.16em 0 0.3em;
  text-wrap: balance;
}

/* ---------- Dark editorial section utility ----------
   Opt-in wrapper for a section that should read as one of the
   brief's "premium industrial dark surfaces" beats rather than the
   everyday cream/white chrome — reuses existing components
   (.feature-tile, .icon-badge, .section-kicker) rather than a
   parallel dark-mode component set, just overriding their text color
   for this one background. */
.section-obsidian { background: var(--noko-obsidian); }
.section-obsidian h2, .section-obsidian h3 { color: var(--noko-cream); }
.section-obsidian p, .section-obsidian .lede { color: var(--noko-stone); }
.section-obsidian .eyebrow { color: var(--noko-gold-muted); }
/* A .card keeps its own light surface even on an obsidian section
   background (unlike a bare .feature-tile, which has none), so its
   text needs to stay on the card's normal light-mode colors rather
   than inherit the section-wide cream/stone recolor above. */
.section-obsidian .card h3 { color: var(--noko-green-dark); }
.section-obsidian .card p, .section-obsidian .card .hint { color: var(--noko-ink-muted); }

/* ---------- Section heading helper ---------- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.section-head .lede { max-width: 52ch; margin: 6px 0 0; }
.section-kicker { text-align: center; max-width: 60ch; margin: 0 auto 40px; }
.section-kicker .eyebrow { justify-content: center; width: 100%; }

/* ---------- Meet NOKO (brand intro band) ---------- */
.meet-noko { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 52px; align-items: center; }
.meet-noko .mascot-frame {
  background: var(--noko-sand); border-radius: var(--radius-lg); padding: 40px;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Admin-uploaded hero/character media slots ----------
   [data-media-slot] elements are empty (data-media-fit="bg") or hold
   the default SVG artwork (data-media-fit="cover"/"contain") until
   initSiteMedia() in main.js finds a real admin upload for that slot
   — nothing shows here, and every page keeps its built-in art, until
   an admin actually uploads something in Media Library. */
[data-media-slot][data-media-fit="bg"] {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
[data-media-slot][data-media-fit="bg"]::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,61,46,0.35) 0%, rgba(10,20,16,0.8) 100%);
}
.media-slot-fill { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-media-slot][data-media-fit="contain"] .media-slot-fill { width: auto; height: auto; max-width: 200px; max-height: 200px; object-fit: contain; }

/* ---------- Camper showroom cards ---------- */
.showroom-card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.showroom-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.showroom-card .thumb { position: relative; aspect-ratio: 5/4; }
.showroom-card .thumb .badge-fav { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(15,61,46,0.55); display:flex; align-items:center; justify-content:center; color:var(--noko-cream); }
.showroom-card .thumb .badge-360 {
  position: absolute; left: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(10,20,16,0.6); color: var(--noko-cream);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 5px 10px; border-radius: var(--radius-pill);
}
.showroom-card .thumb .badge-360 svg { width: 13px; height: 13px; }
.showroom-card .spec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.showroom-card .spec-chip { display: flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--noko-ink-muted); background: var(--noko-bg); border: 1px solid var(--noko-border); padding: 4px 9px; border-radius: var(--radius-pill); }
.showroom-card .spec-chip svg { width: 13px; height: 13px; color: var(--noko-green-olive); }

/* ---------- Adventure builder (preference picker) ---------- */
.adventure-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.adventure-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 12px; border-radius: var(--radius-md); border: 1.5px solid var(--noko-border);
  background: var(--noko-white); cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.adventure-tile:hover { transform: translateY(-2px); border-color: var(--noko-green-olive); }
.adventure-tile.selected { border-color: var(--noko-amber); background: rgba(244,166,42,0.08); }
.adventure-tile .icon-badge { margin: 0; width: 48px; height: 48px; border-radius: 14px; }
.adventure-tile .icon-badge svg { width: 24px; height: 24px; }
.adventure-tile span { font-size: 0.86rem; font-weight: 600; color: var(--noko-green-dark); }
.adventure-cta { display: flex; justify-content: center; margin-top: 26px; }

/* ---------- Interactive Tanzania (illustrated map) ---------- */
.map-section {
  background: var(--noko-green-dark); border-radius: var(--radius-lg);
  padding: 48px; color: var(--noko-cream); position: relative; overflow: hidden;
}
.map-section .eyebrow { color: var(--noko-amber); }
.map-section h2 { color: var(--noko-cream); }
.map-section .lede { color: rgba(247,245,237,0.78); max-width: 52ch; }
.map-canvas { position: relative; margin-top: 32px; border-radius: var(--radius-md); overflow: hidden; background: rgba(247,245,237,0.04); border: 1px solid rgba(247,245,237,0.12); }
.map-canvas svg { display: block; width: 100%; height: auto; }
.map-route { fill: none; stroke: var(--noko-amber); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: 0.7; }
.map-pin-group { cursor: pointer; }
.map-pin { fill: var(--noko-amber); stroke: var(--noko-green-dark-2); stroke-width: 1.5; }
.map-pin-label { font-family: var(--font-display); font-size: 5.5px; font-weight: 700; fill: var(--noko-cream); }
.map-camper { animation: noko-drive-loop 6s ease-in-out infinite; }
.map-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; font-size: 0.82rem; color: rgba(247,245,237,0.7); }
.map-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--noko-amber); margin-right: 7px; vertical-align: middle; }

/* ---------- Build My Trip teaser ---------- */
.trip-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.trip-teaser .copy { padding: 44px; display: flex; flex-direction: column; justify-content: center; background: var(--noko-white); }
.trip-teaser .visual {
  padding: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--noko-sand);
}
.trip-teaser .steps-mini { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 4px; }
.trip-teaser .steps-mini li { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--noko-ink-muted); list-style: none; }
.trip-teaser .steps-mini .num { width: 26px; height: 26px; border-radius: 50%; background: var(--noko-green-dark); color: var(--noko-cream); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; font-family: var(--font-display); flex-shrink: 0; }

/* ---------- NOKO Spots ---------- */
.spot-card { overflow: hidden; }
.spot-card .thumb { position: relative; aspect-ratio: 4/3; }
.spot-card .thumb .spot-category {
  position: absolute; top: 12px; left: 12px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--noko-amber); color: var(--noko-green-dark-2);
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.spot-card .body { padding: 14px 16px 18px; }
.spot-card .body h3 { font-size: 1rem; margin-bottom: 4px; }
.spot-card .body p { font-size: 0.86rem; margin: 0; }
.spot-card .body .spot-meta { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--noko-ink-soft); margin-top: 8px; }
.spot-card .body .spot-meta svg { width: 13px; height: 13px; color: var(--noko-terracotta); }

/* ---------- Traveler stories ---------- */
.story-card { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.story-card .stars { color: var(--noko-amber); letter-spacing: 2px; }
.story-card p.quote { color: var(--noko-ink); font-size: 0.96rem; margin: 0; }
.story-card .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.story-card .who .avatar-photo { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(160deg, var(--noko-green-olive), var(--noko-green-dark)); flex-shrink: 0; }
.story-card .who strong { display: block; font-size: 0.88rem; color: var(--noko-green-dark); }
.story-card .who span { font-size: 0.78rem; color: var(--noko-ink-soft); }

/* ---------- NOKO Journal ---------- */
.journal-card { overflow: hidden; }
.journal-card .thumb { aspect-ratio: 16/10; }
.journal-card .body { padding: 16px 18px 20px; }
.journal-card .eyebrow { margin-bottom: 8px; }
.journal-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.journal-card .read-meta { font-size: 0.78rem; color: var(--noko-ink-soft); }

/* ---------- Map mode tabs (dark, sits inside .map-section) ---------- */
.map-section .tabs { border-bottom-color: rgba(247,245,237,0.18); margin-top: 24px; margin-bottom: 0; }
.map-section .tab-btn { color: rgba(247,245,237,0.55); }
.map-section .tab-btn.active { color: var(--noko-cream); border-bottom-color: var(--noko-amber); }
.map-scale-note { font-size: 0.78rem; color: rgba(247,245,237,0.55); margin-top: 14px; }

/* World/Africa mode illustration shapes */
.map-landmass { fill: rgba(247,245,237,0.06); stroke: rgba(247,245,237,0.2); stroke-width: 1; }
.map-landmass.africa { fill: rgba(244,166,42,0.16); stroke: var(--noko-amber); stroke-width: 1.4; }
.map-region-label { font-family: var(--font-display); font-size: 8px; font-weight: 700; fill: rgba(247,245,237,0.85); letter-spacing: 0.03em; }
.map-region-label.africa-label { font-size: 13px; fill: var(--noko-amber); }
.map-region-dot { fill: var(--noko-terracotta); stroke: var(--noko-green-dark-2); stroke-width: 1; }
.map-region-highlight { fill: none; stroke: var(--noko-cream); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0.7; }

/* NOKO branded map marker (porcupine-camper).
   transform-box:fill-box anchors transform-origin to the marker's own
   geometry instead of the SVG viewport — without it, scale() in the
   translate()+scale() attribute renders the marker tens of units away
   from its intended pin position. */
.map-noko-marker { transform-box: fill-box; transform-origin: center; }
.map-camper { transform-box: fill-box; }
.map-noko-marker .marker-pin-tail { fill: var(--noko-amber); }
.map-noko-marker .marker-body { fill: var(--noko-cream); stroke: var(--noko-green-dark-2); stroke-width: 1; }
.map-noko-marker .marker-quills { fill: var(--noko-green-dark); }

/* ---------- Africa Explorer ---------- */
.region-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.region-card { padding: 22px 14px; border-radius: var(--radius-md); border: 1.5px solid var(--noko-border); background: var(--noko-white); text-align: center; }
.region-card .icon-badge { margin: 0 auto 12px; width: 46px; height: 46px; border-radius: 13px; background: var(--noko-sand); color: var(--noko-green-olive); }
.region-card .icon-badge svg { width: 22px; height: 22px; }
.region-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 0.94rem; color: var(--noko-green-dark); margin: 0 0 6px; }
.region-card .region-status { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: var(--radius-pill); }
.region-card.active { border-color: var(--noko-amber); background: rgba(244,166,42,0.06); }
.region-card.active .icon-badge { background: var(--noko-green-dark); color: var(--noko-amber); }
.region-card.active .region-status { background: rgba(46,125,83,0.12); color: var(--noko-success); }
.region-card.soon { opacity: 0.62; }
.region-card.soon .region-status { background: rgba(76,90,82,0.1); color: var(--noko-ink-muted); }

/* ---------- Inline statement band (small in-section tagline, NOT the
   full-bleed obsidian .brand-statement defined earlier in this file —
   kept as a separate class after the two collided on the same name
   and the padding here was silently overriding the full-bleed band's) ---------- */
.inline-statement { text-align: center; padding: 12px 20px 4px; }
.inline-statement .stmt-main { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2.3rem); color: var(--noko-green-dark); margin-bottom: 8px; }
.inline-statement .stmt-sub { color: var(--noko-ink-muted); font-size: 1rem; margin: 0; }

/* ---------- Route story (Build My Trip visual) ---------- */
.route-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.route-steps li { position: relative; padding: 8px 0 8px 26px; font-size: 0.92rem; color: rgba(247,245,237,0.88); }
.route-steps li .dot { position: absolute; left: 0; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--noko-amber); }
.route-steps li:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 25px; bottom: -8px; width: 2px; background: rgba(247,245,237,0.22); }
.route-story-map { position: relative; }
.route-story-map svg { display: block; width: 100%; height: auto; }
.route-story-map .route-loop { fill: none; stroke: var(--noko-terracotta); stroke-width: 1.6; stroke-dasharray: 4 4; opacity: 0.8; }
.route-story-map .route-pin { fill: var(--noko-cream); stroke: var(--noko-green-dark-2); stroke-width: 1.2; }
.route-story-map .route-pin-label { font-family: var(--font-display); font-size: 6px; font-weight: 700; fill: var(--noko-green-dark); }

@media (max-width: 980px) {
  .hero-cinematic-grid { grid-template-columns: 1fr; }
  .hero-cinematic { min-height: auto; padding-top: 108px; }
  .meet-noko { grid-template-columns: 1fr; }
  .adventure-grid { grid-template-columns: repeat(2, 1fr); }
  .trip-teaser { grid-template-columns: 1fr; }
  .map-section { padding: 32px 20px; }
  .region-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .adventure-grid { grid-template-columns: repeat(2, 1fr); }
  .region-grid { grid-template-columns: repeat(2, 1fr); }
}