/* ---- berm (Berm — Mountain bike trail park 135) ----------------------------
   STRUCTURAL MOVE: one two-up row of gapped tiles — the caption ranged LEFT
   underneath the photograph, never over it — is run TWICE, once for the trail
   grades and once for the ride formats, so it brackets the video and the six
   glyphs trapped between them. The container is broken exactly twice, at the top
   and near the bottom: a full-viewport three-slide stage with the bar riding
   transparent on it, and a four-across gapless wall, which is the SAME gallery
   block widened by :has() on its own child count rather than by a second section
   type. Contained text narrows as the page falls (620px story, then captions),
   and the closing membership + join bands carry the heaviest padding on the
   page, so the whitespace pools at the BOTTOM. Trail-dust orange has three homes
   — the hero slab, the six glyphs and the send button — and never fills a band:
   the membership band is the same cold stone as everything above it. */
body.t-berm.ws-body {
  --bg: #e3e7e9; --fg: #3c454b; --heading: #0f1418; --text: #3c454b; --muted: #79848a;
  --bm-dust: #a84a1a; --bm-line: #c9d1d5; --bm-on-dust: #fdf3ea;
  --hero-a: rgba(11, 17, 21, .30); --hero-b: rgba(11, 17, 21, .64);
}
body.t-berm { background: var(--bg); }

/* the bar rides on the photograph, so the first slide is the whole screen */
body.t-berm .ws-nav { position: absolute; top: 0; left: 0; right: 0; padding: 16px 0; background: transparent; backdrop-filter: none; border-bottom: 0; }
body.t-berm .ws-brand, body.t-berm .ws-nav-links a { color: #f1f4f5; text-transform: uppercase; letter-spacing: .24em; font-size: 11px; font-weight: 800; opacity: .84; border-bottom: 0; }
/* orange 1 of 3 — links */
body.t-berm .ws-nav-links a:hover, body.t-berm .ws-nav-links a.on { color: var(--bm-dust); opacity: 1; }

/* bleed 1 of 2 — three slides, the whole viewport, type dead centre */
body.t-berm .ws-hero { min-height: 100vh; }
body.t-berm .ws-hero h1 { font-size: clamp(38px, 7.4vw, 88px); font-weight: 800; letter-spacing: -.032em; line-height: .96; max-width: 15ch; text-shadow: none; }
/* orange 2 of 3 — the only slab on the page that carries it */
body.t-berm.ws-body .ws-hero-cta.btn.brand { background: var(--bm-dust); color: var(--bm-on-dust); border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 800; padding: 17px 34px; }

/* one ground all the way down; the shared zebra wash off so nothing shifts */
body.t-berm.ws-body .ws-section:nth-child(even):not(.ws-cta) { background: transparent; }
body.t-berm .ws-section { padding: 86px 0; }
body.t-berm .ws-richtext .ws-narrow { max-width: 620px; }
body.t-berm .ws-richtext p, body.t-berm .ws-cta-inner p { color: var(--text); font-size: 16px; line-height: 1.85; }
body.t-berm .ws-h2, body.t-berm .ws-cta-inner h2 { color: var(--heading); text-transform: uppercase; font-size: clamp(20px, 2.7vw, 30px); font-weight: 800; letter-spacing: .01em; margin: 0 0 32px; }

/* THE MOVE — two up, gapped, the words ranged left BENEATH the tile */
body.t-berm .ws-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
body.t-berm .ws-gallery-item img { border-radius: 0; aspect-ratio: 16 / 10; }
body.t-berm .ws-gallery-cap strong, body.t-berm .ws-feature h3 { display: block; color: var(--heading); text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 800; margin: 4px 0 9px; }
body.t-berm .ws-gallery-cap span, body.t-berm .ws-feature p, body.t-berm .ws-sub, body.t-berm .ws-video-caption { color: var(--muted); font-size: 13.5px; line-height: 1.75; }

/* bleed 2 of 2 — the same gallery block, widened and welded by its own count */
body.t-berm .ws-gallery:has(.ws-gallery-grid > :nth-child(3)) .ws-container { max-width: none; padding: 0; }
body.t-berm .ws-gallery:has(.ws-gallery-grid > :nth-child(3)) .ws-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
body.t-berm .ws-gallery:has(.ws-gallery-grid > :nth-child(3)) .ws-gallery-cap { padding: 14px 22px 0; }

/* six small icon-led cards, three across, two full rows — orange 3 of 3 is the
   glyph, which inherits the card colour while h3 and p take their own */
body.t-berm .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 38px; }
body.t-berm .ws-feature { text-align: left; padding: 0; color: var(--bm-dust); }

/* the two closing bands pool the whitespace: stone, not a filled colour band */
body.t-berm.ws-body .ws-cta, body.t-berm .ws-contact { padding: 132px 0; }
body.t-berm.ws-body .ws-cta { background: transparent; color: var(--text); border-top: 1px solid var(--bm-line); padding-bottom: 44px; }
body.t-berm .ws-contact { padding-top: 44px; }
body.t-berm .ws-field input, body.t-berm .ws-field textarea, body.t-berm .ws-select-trigger { background: transparent; border: 0; border-bottom: 1px solid var(--bm-line); border-radius: 0; color: var(--heading); padding: 12px 2px; }
body.t-berm.ws-body .ws-cta .btn.brand, body.t-berm.ws-body .ws-contact .btn.brand { background: var(--heading); color: var(--bg); border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .2em; font-size: 10.5px; font-weight: 800; padding: 16px 32px; }
body.t-berm.ws-body .ws-contact .btn.brand { background: var(--bm-dust); color: var(--bm-on-dust); }

/* mobile: the two-up stacks, the wall halves, the menu drops onto stone */
@media (max-width: 760px) {
  body.t-berm .ws-nav-links a { color: var(--heading); opacity: 1; }
  body.t-berm .ws-gallery-grid { grid-template-columns: 1fr; }
  body.t-berm .ws-gallery:has(.ws-gallery-grid > :nth-child(3)) .ws-gallery-grid, body.t-berm .ws-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-berm.ws-body .ws-cta { padding: 84px 0 32px; }
  body.t-berm .ws-contact { padding: 32px 0 84px; }
}

/* night — wet slate after rain: the stone goes dark, the dust orange one stop hotter */
html[data-theme="dark"] body.t-berm.ws-body {
  --bg: #12181c; --fg: #a3adb3; --heading: #eef2f4; --text: #a3adb3; --muted: #7c878d;
  --bm-dust: #e0752f; --bm-line: #283238; --bm-on-dust: #16110c;
  --hero-a: rgba(6, 10, 13, .34); --hero-b: rgba(6, 10, 13, .70);
}
html[data-theme="dark"] body.t-berm { background: var(--bg); }
html[data-theme="dark"] body.t-berm .ws-gallery-item img { filter: brightness(.88) saturate(.92); }