/* ---- headgear (Headgear — Mine safety VR training 251) ---------------------
   THE STRUCTURAL MOVE: one full-viewport photograph that changes three times,
   and then the page CLAMPS to a single 880px column and never widens again.
   Six glyph tiles, one picture, four priced tiers, a run of bullets, the site
   strip and the form all sit inside that same measure on one unbroken concrete
   grey — nothing below the fold goes edge to edge except the closing slab. The
   site strip is the reference's touching logo carousel with photographs in it:
   six frames welded gapless across the column. Lime is spent on the controls,
   the six glyphs and the rule over each tier, and nowhere else — no blue on a
   VR page. nth-child appears only in the platform's own zebra selector, where
   every sibling is a section; nothing here uses :nth-of-type, and nothing here
   touches the header, the nav or anything inside them. */
body.t-headgear.ws-body {
  --bg: #e8e6e1; --fg: #33363a; --heading: #14161a; --text: #3a3e43; --muted: #7c8188;
  --hg-lime: #a9bd1f; --hg-line: #cbc8c0; --hg-card: #f1efeb; --hg-slab: #1b1d20;
  --hero-a: rgba(14, 15, 17, .40); --hero-b: rgba(14, 15, 17, .74);
}

/* one concrete ground the whole way down — the alternating wash is switched off */
body.t-headgear.ws-body .ws-section:nth-child(even):not(.ws-cta) { background: transparent; }

/* the shared sheet's hardcoded greys re-pointed at tokens, so night moves the page */
body.t-headgear .ws-sub, body.t-headgear .ws-feature p, body.t-headgear .ws-story-copy p, body.t-headgear .ws-plan li, body.t-headgear .ws-list li { color: var(--text); }

/* THE CLAMP — one measure from the hero down, wide bands included */
body.t-headgear .ws-section .ws-container, body.t-headgear .ws-section .ws-narrow { max-width: 880px; }

/* the one maximal thing on the page: a whole screen of photograph */
body.t-headgear .ws-hero { min-height: calc(100vh - 62px); }
body.t-headgear .ws-hero h1 { font-size: clamp(34px, 6.4vw, 68px); letter-spacing: -.035em; }

/* headings range left against the clamp, so the column reads as one document */
body.t-headgear .ws-h2, body.t-headgear .ws-sub { text-align: left; margin-left: 0; max-width: 66ch; }

/* lime on the controls, the glyphs and the tier rules — nothing else carries it */
body.t-headgear.ws-body .btn.brand, body.t-headgear.ws-body .ws-hero-cta.btn.brand, body.t-headgear.ws-body .ws-cta .btn.brand { background: var(--hg-lime); color: #14161a; border-radius: 0; box-shadow: none; text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; font-weight: 700; padding: 15px 30px; }
body.t-headgear .ws-feature-icon { color: var(--hg-lime); }

/* six glyph tiles, two clean rows of three, ranged left, not one photograph */
body.t-headgear .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 30px; }
body.t-headgear .ws-feature { text-align: left; padding: 0; }
body.t-headgear .ws-feature h3, body.t-headgear .ws-plan h3 { text-transform: uppercase; letter-spacing: .07em; font-size: 12.5px; margin: 0 0 9px; }

/* the only photograph between the stage and the site strip */
body.t-headgear .ws-story-media img { border-radius: 0; aspect-ratio: 4 / 3; }

/* four tiers, one row, each under a lime rule with no card behind it */
body.t-headgear .ws-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: none; margin: 0; }
body.t-headgear .ws-plan { display: flex; flex-direction: column; text-align: left; background: transparent; border: 0; border-top: 4px solid var(--hg-lime); border-radius: 0; padding: 18px 0 0; }
body.t-headgear .ws-plan-amt { font-size: 29px; letter-spacing: -.03em; }
body.t-headgear .ws-plan ul { margin: 0 0 auto; padding-bottom: 20px; }
body.t-headgear .ws-plan li { padding: 5px 0 5px 17px; font-size: 13.5px; line-height: 1.5; }

/* THE SITE STRIP — the reference's touching carousel, photographs welded into it */
body.t-headgear .ws-gallery-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.t-headgear .ws-gallery-item img { border-radius: 0; aspect-ratio: 3 / 4; }

/* the matrix flattened to rows: a ruled run, no second table on the page */
body.t-headgear .ws-list { list-style: none; padding: 0; border-top: 1px solid var(--hg-line); }
body.t-headgear .ws-list li { border-bottom: 1px solid var(--hg-line); padding: 15px 2px; font-size: 15px; line-height: 1.65; margin: 0; }

/* the closing slab — the one dark thing below the stage */
body.t-headgear.ws-body .ws-section.ws-cta { background: var(--hg-slab); }

/* fields squared off to match the slabs */
body.t-headgear .ws-field input, body.t-headgear .ws-field textarea, body.t-headgear .ws-field select, body.t-headgear .ws-select-trigger { background: var(--hg-card); border: 1px solid var(--hg-line); border-radius: 0; color: var(--heading); }

@media (max-width: 900px) {
  body.t-headgear .ws-features-grid, body.t-headgear .ws-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-headgear .ws-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.t-headgear .ws-hero { min-height: 84vh; }
}

/* night — the concrete drops to graphite, the closing slab drops below it so it
   is still the darkest thing on the page, and the hi-vis lime does not move */
html[data-theme="dark"] body.t-headgear.ws-body {
  --bg: #17181a; --fg: #b6bac0; --heading: #f0efeb; --text: #aab0b7; --muted: #7c8188;
  --hg-lime: #b8cd2a; --hg-line: #2e3134; --hg-card: #202224; --hg-slab: #0b0c0d;
  --hero-a: rgba(8, 9, 10, .42); --hero-b: rgba(8, 9, 10, .78);
}
html[data-theme="dark"] body.t-headgear { background: #17181a; }