/* ---- switchback (Switchback — Trail & road kit 45) --------------------------
   STRUCTURAL MOVE: strip → banner → strip is welded into ONE continuous
   wordless merchandising wall. Both category strips break out of the container
   to full bleed, their labels are burned into the photographs rather than set
   underneath them, and the banner is butted flush between the two rows instead
   of floating in white space. Cold quarry grey keeps eighteen photographs loud;
   the ultramarine is spent only on the buttons and on the contact band, which
   is the first non-photographic surface the visitor meets. */
body.t-switchback { background: #edeeef; color: #15171a; --surface: #ffffff; --surface-2: #e3e5e8; --line: #d7dade; --line-strong: #bfc4c9; --heading: #15171a; --text: #2b3036; --muted: #5d646b; }
body.t-switchback .sf-header, body.t-switchback .sf-footer { background: #edeeef; border-color: #d7dade; }
body.t-switchback .btn.brand { background: #2440d6; color: #ffffff; border-radius: 0; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 11px; padding: 15px 30px; box-shadow: none; }
body.t-switchback .btn.brand:hover { background: #1a30a8; }
/* the opener runs the full screen and the wall begins immediately under it */
body.t-switchback .sc-hero { min-height: 100vh; }
body.t-switchback .sc-hero h1, body.t-switchback .sc-banner h2 { text-transform: uppercase; letter-spacing: 0.02em; font-weight: 800; line-height: 1.05; }
body.t-switchback .sc-h2 { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 800; font-size: clamp(12px, 1.5vw, 15px); }
/* the wall — full bleed, four up, tight to the hero above and the banner below */
body.t-switchback .sc-strip { max-width: none; padding: 6px 6px 0; }
body.t-switchback .sc-strip-card, body.t-switchback .sc-strip-img { position: relative; }
body.t-switchback .sc-strip-img { aspect-ratio: 3 / 4; border: 0; }
body.t-switchback .sc-strip-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.58)); }
/* the category label sits ON the tile, so the wall carries no prose at all */
body.t-switchback .sc-strip-label { position: absolute; left: 18px; bottom: 15px; margin: 0; color: #ffffff; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; font-weight: 700; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
/* driven through the middle of the wall rather than floated in white space */
body.t-switchback .sc-banner { margin: 6px calc(50% - 50vw); min-height: 46vh; display: flex; align-items: center; justify-content: center; }
body.t-switchback .sc-strip-img, body.t-switchback .product-card, body.t-switchback .product-card .ph { border-radius: 0; }
/* six products, three across, two rows that fill — the one contained block */
body.t-switchback .product-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 24px; padding-top: 4px; }
/* the first non-photographic surface on the page, straight under the grid */
body.t-switchback .sc-contact-band { background: #2440d6; color: #ffffff; }
body.t-switchback .sc-contact-band .sc-h2 { font-size: clamp(22px, 3.4vw, 34px); letter-spacing: 0.03em; }
body.t-switchback .sc-contact-band .sc-contact-sub { color: rgba(255, 255, 255, 0.88); }
body.t-switchback .sc-contact-band .sc-field input, body.t-switchback .sc-contact-band .sc-field textarea { background: #ffffff; border-color: #ffffff; border-radius: 0; color: #15171a; }
body.t-switchback .sc-contact-band .btn.brand { background: #15171a; }
body.t-switchback .sc-contact-band .btn.brand:hover { background: #ffffff; color: #2440d6; }
/* the only writing on the page, and the only air anywhere on it */
body.t-switchback .sc-richtext { max-width: 620px; padding: 100px 20px 116px; }
body.t-switchback .sc-richtext .sc-h2 { font-size: 11px; letter-spacing: 0.28em; color: #5d646b; margin-bottom: 26px; }
body.t-switchback .sc-richtext p { font-size: 16.5px; line-height: 1.85; color: #2b3036; }
@media (max-width: 760px) { body.t-switchback .product-grid { grid-template-columns: repeat(2, 1fr); } }

/* NIGHT — quarry grey inverts to wet slate; the band keeps its ultramarine, one
   step deeper so it does not glare, and the ink goes to a legible cornflower. */
html[data-theme="dark"] body.t-switchback { background: #15171a; color: #c3c8cd; --surface: #1c1f23; --surface-2: #23262b; --line: #2c3036; --line-strong: rgba(255, 255, 255, 0.16); --heading: #edeeef; --text: #c3c8cd; --muted: #868d94; }
html[data-theme="dark"] body.t-switchback .sf-header, html[data-theme="dark"] body.t-switchback .sf-footer { background: #15171a; border-color: #2c3036; }
html[data-theme="dark"] body.t-switchback .btn.brand { background: #7d92ff; color: #0f1114; }
html[data-theme="dark"] body.t-switchback .btn.brand:hover { background: #9fadff; }
html[data-theme="dark"] body.t-switchback .sc-contact-band { background: #1c2c96; }
html[data-theme="dark"] body.t-switchback .sc-contact-band .btn.brand { background: #edeeef; color: #15171a; }
html[data-theme="dark"] body.t-switchback .sc-contact-band .btn.brand:hover { background: #ffffff; color: #1c2c96; }
html[data-theme="dark"] body.t-switchback .sc-richtext .sc-h2 { color: #868d94; }
html[data-theme="dark"] body.t-switchback .sc-richtext p { color: #c3c8cd; }