/* ---- trekpad (Trekpad — Guided wilderness expeditions 162) -----------------
   THE STRUCTURAL MOVE: no two photographic bands ever touch. After the full-
   viewport three-slide stage the page drops into one contained column on a
   single mist-white ground and stays there — glyph tiles, captioned route
   cards, film, quotes, form — and the only thing that ever breaks it is the
   full-bleed basalt counters band: photograph-free, four oversized numerals,
   dropped between the route cards and the film so a picture row is always
   followed by a text or numeral row. Cederberg sandstone is rationed to four
   jobs and no others: the two buttons, the four glyphs, the hairline under
   every heading, and the labels under the numerals on the dark. */
body.t-trekpad.ws-body {
  --bg: #f4f5f3; --fg: #4c545a; --heading: #22262a; --text: #4c545a; --muted: #7d868c;
  --tk-sand: #b4632c; --tk-basalt: #1b1f22; --tk-line: #dcdfda;
  --tk-on: #f2f3f0; --tk-avatar: #ccd1ca;
  --hero-a: rgba(20, 24, 27, .28); --hero-b: rgba(20, 24, 27, .58);
}
body.t-trekpad { background: var(--bg); }
/* the single ground — kills the shared zebra tint so the counters band is the
   page's one and only break */
body.t-trekpad.ws-body .ws-section:not(.ws-columns) { background: var(--bg); color: var(--text); padding: 96px 0; }

/* the nav gets its OWN opaque bar — wordmark left, links right, no glass and no
   overlap with the photograph beneath it */
body.t-trekpad .ws-nav { background: var(--bg); backdrop-filter: none; border-bottom: 1px solid var(--tk-line); }
body.t-trekpad .ws-hero { min-height: calc(100vh - 62px); }

/* SANDSTONE, JOB 1 — the hero button and the form button, the only two */
body.t-trekpad.ws-body .ws-hero-cta.btn.brand,
body.t-trekpad .ws-contact .btn.brand { background: var(--tk-sand); border-color: var(--tk-sand); color: #fff; border-radius: 2px; box-shadow: none; padding: 15px 34px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* SANDSTONE, JOB 2 — the hairline under every section heading */
body.t-trekpad .ws-h2, body.t-trekpad .ws-title-h { color: var(--heading); font-weight: 700; letter-spacing: -.03em; }
body.t-trekpad .ws-h2::after, body.t-trekpad .ws-title-h::after { content: ''; display: block; width: 40px; height: 2px; background: var(--tk-sand); margin: 16px auto 0; }

/* four gapped glyph tiles, no photograph, every body ranged left inside its tile */
body.t-trekpad .ws-features-grid { grid-template-columns: repeat(4, 1fr); gap: 36px 30px; }
body.t-trekpad .ws-feature { text-align: left; padding: 0; }
/* SANDSTONE, JOB 3 */
body.t-trekpad .ws-feature-icon { color: var(--tk-sand); }
body.t-trekpad .ws-feature h3 { color: var(--heading); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; }

/* route cards — photograph on top, caption ruled off underneath it, never over it */
body.t-trekpad .ws-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 34px 26px; }
body.t-trekpad .ws-gallery-item img { aspect-ratio: 4 / 3; border-radius: 2px; }
body.t-trekpad .ws-gallery-cap { margin-top: 14px; padding: 14px 0 0; border-top: 1px solid var(--tk-line); }
body.t-trekpad .ws-gallery-cap strong { color: var(--heading); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

/* THE ONE BREAK — full bleed, basalt, four numerals, no imagery at all */
body.t-trekpad.ws-body .ws-section.ws-columns { background: var(--tk-basalt); color: var(--tk-on); padding: 86px 0; text-align: center; }
body.t-trekpad .ws-col-h { color: var(--tk-on); font-size: clamp(46px, 7vw, 92px); font-weight: 800; line-height: .92; letter-spacing: -.05em; margin: 0 0 12px; }
/* SANDSTONE, JOB 4 — the small labels beneath the numerals */
body.t-trekpad .ws-columns .ws-col p { color: var(--tk-sand); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; line-height: 1.7; text-transform: uppercase; margin: 0; }

/* film and quotes — square frame, no card under a quote, one small round avatar */
body.t-trekpad .ws-video-frame { border-radius: 2px; box-shadow: none; }
body.t-trekpad .ws-testimonials-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
body.t-trekpad .ws-quote { background: none; border: 0; border-top: 2px solid var(--tk-line); border-radius: 0; box-shadow: none; padding: 22px 0 0; }
body.t-trekpad .ws-quote blockquote::before { content: none; }
body.t-trekpad .ws-quote figcaption { display: flex; align-items: center; gap: 12px; }
body.t-trekpad .ws-quote figcaption::before { content: ''; width: 34px; height: 34px; border-radius: 50%; background: var(--tk-avatar); flex: none; }

/* the close — four fields, two to a row, straight off the back of the quotes */
body.t-trekpad .ws-contact .ws-form { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
body.t-trekpad .ws-contact .ws-form > .btn.brand { grid-column: 1 / -1; justify-self: center; margin-top: 8px; }

/* the only other dark element on the page */
body.t-trekpad .ws-footer { background: var(--tk-basalt); border-top: 0; color: #9aa3a8; padding: 40px 0; }

@media (max-width: 1000px) {
  body.t-trekpad .ws-features-grid, body.t-trekpad .ws-gallery-grid, body.t-trekpad .ws-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  body.t-trekpad .ws-features-grid, body.t-trekpad .ws-gallery-grid, body.t-trekpad .ws-testimonials-grid { grid-template-columns: 1fr; }
  body.t-trekpad .ws-contact .ws-form { grid-template-columns: 1fr; }
}

/* night — the same two dark elements over a cold pre-dawn ground, sandstone lifted */
html[data-theme="dark"] body.t-trekpad.ws-body {
  --bg: #14181a; --fg: #98a1a7; --heading: #eef1ef; --text: #98a1a7; --muted: #7b858b;
  --tk-sand: #d07b3e; --tk-basalt: #0b0e10; --tk-line: #262b2e;
  --tk-on: #eef1ef; --tk-avatar: #333a3e;
  --hero-a: rgba(6, 9, 11, .38); --hero-b: rgba(6, 9, 11, .66);
}
html[data-theme="dark"] body.t-trekpad .ws-feature p,
html[data-theme="dark"] body.t-trekpad .ws-sub,
html[data-theme="dark"] body.t-trekpad .ws-title-sub,
html[data-theme="dark"] body.t-trekpad .ws-quote blockquote { color: var(--text); }