/*
 * Brand pages, 2026 (template-parts/brand-2026.php, inc/brand-page-2026.php).
 *
 * Running order: hero → head (facts, hook, one pill) → the range (cream) →
 * about (one essay, the photo strip inside it) → stories → the custom close
 * (bikes) → related brands.
 *
 * The range is the shop category page's own block (.rg-shop: bar, cards, grid,
 * filter sheet, css/shop-category.css). This file only says where a brand page
 * differs: bikes two across, the row heads, the comparison table.
 *
 * Excluded from the LiteSpeed CSS optimizer and versioned by filemtime, so it
 * can land BEFORE the bundle that carries style.css: every rule is scoped
 * under .rg-br and wins on specificity, never source order.
 */

.rg-br {
	--ink: #1c1c1c;
	--ink-2: #262624;
	--ink-line: #3b3b3a;
	--cream: #f8f5f0;
	--cream-2: #ebe6dd;
	--rule: #d9d3c8;
	--muted: #7a7977;
	--muted-d: #a19c93;
	--tan: #a88a6d;

	--display: 'Graphik Condensed Web', 'Arial Narrow', sans-serif;
	--body: 'MatterRegular', sans-serif;
	--semi: 'MatterSemiBold', sans-serif;
	--mono: 'MatterMonoRegular', monospace;
	--mono-med: 'MatterMonoMedium', monospace;

	--gutter: 48px;

	background: var(--ink);
	color: var(--cream);
}

.rg-br *,
.rg-br *::before,
.rg-br *::after { box-sizing: border-box; }
/* The theme sets a system font and ink colour on every <a>. Neutralise it once. */
.rg-br a { color: inherit; font-family: inherit; line-height: inherit; text-decoration: none; }
.rg-br img { display: block; max-width: 100%; height: auto; }
.rg-br :focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }
/* Full width on the site's own gutter (48 / 32 / 24): the page's left edge is the logo's. No centred cap. */
.rg-br .rg-wrap { padding-inline: var(--gutter); }
.rg-br #range,
.rg-br #rg-shop,
.rg-br #stories { scroll-margin-top: var(--rg-header-h, 96px); }

.rg-br .rg-ms { font-family: 'Material Symbols Outlined'; font-weight: 300; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; flex: none; }

/* ---- House roles ---- */
.rg-br .rg-br-label { display: block; margin: 0; font: 500 15px/1.5 var(--mono-med); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d); }
body .rg-br .rg-br-h2 { margin: 0; font-family: var(--display); font-size: 76px !important; line-height: .9 !important; font-weight: 700; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; color: inherit; }
body .rg-br .rg-br-h2.is-big { font-size: 96px !important; }
body .rg-br .rg-br-h2.is-small { font-size: 56px !important; }
.rg-br a.rg-br-btn,
.rg-br a.rg-br-more { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin: 0; padding: 0 28px; border: 0; border-radius: 100px; font: 500 18px/1 var(--mono-med); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; transition: background .2s, color .2s; }
.rg-br a.rg-br-btn { background: var(--cream); color: var(--ink); }
.rg-br a.rg-br-btn:hover { background: #fff; color: var(--ink); }
.rg-br a.rg-br-more { box-shadow: inset 0 0 0 1px currentColor; color: var(--cream); }
.rg-br a.rg-br-more:hover { background: var(--cream); color: var(--ink); }
.rg-br .rg-br-arr { width: 18px; height: 18px; flex: none; }
.rg-br .rg-br-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.rg-br .rg-br-ride { display: inline-flex; align-items: center; gap: 6px; }
.rg-br .rg-br-ride .rg-ms { font-size: 18px; }

/* ---- 1. Hero ---- */
/* The site header rides over the photo, clear until the page scrolls (Pete 2026-10-08): the header
   took 150px off the top of a laptop screen and the photo lost its wheels. Fixed, not sticky, so the
   hero starts at the very top; once scrolled it takes the site's usual shade (body.scroll). */
body.rg-br26-page header#masthead { position: fixed; }
body.admin-bar.rg-br26-page header#masthead { top: 32px; }
body.rg-br26-page:not(.scroll) header#masthead div.mainmenu,
body.rg-br26-page:not(.scroll) header#masthead div.breadcrumbs { background: transparent; }
body.rg-br26-page header#masthead div.mainmenu,
body.rg-br26-page header#masthead div.breadcrumbs { transition: background .25s; }
.rg-br .rg-br-hero { position: relative; display: grid; align-items: end; min-height: 640px; height: 72vh; max-height: 820px; overflow: hidden; }
/* A tall photo in a wide box loses some height. Lose it from the bottom, where the name and the
   shade already sit, not from the top of the bike (Pete 2026-10-08: Sarto's saddle was cut off). */
.rg-br .rg-br-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 10%; }
.rg-br .rg-br-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(28 28 28 / .4) 0%, rgb(28 28 28 / .16) 14%, rgb(28 28 28 / 0) 28%, rgb(28 28 28 / .55) 75%, rgb(28 28 28 / .85) 100%); }
.rg-br .rg-br-hero-copy { position: relative; z-index: 1; width: 100%; min-width: 0; padding-bottom: 56px; display: grid; gap: 14px; }
.rg-br .rg-br-hero .rg-br-label { color: var(--cream); }
/* The name shrinks only when a single word can't fit (js/brand-2026.js). */
body .rg-br h1.rg-br-name { margin: 0; min-width: 0; font-family: var(--display); font-size: clamp(56px, 10.6vw, 152px) !important; line-height: .9 !important; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--cream); }
.rg-br .rg-br-sub { margin: 0; font: 500 22px/1.3 var(--mono-med); color: var(--cream); }

/* ---- 2. Head: one line of facts, the hook, one pill ---- */
.rg-br .rg-br-head { border-bottom: 1px solid var(--ink-line); }
.rg-br .rg-br-head .rg-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; padding-block: 44px 48px; }
.rg-br .rg-br-facts { margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font: 500 15px/1.5 var(--mono-med); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d); }
.rg-br .rg-br-facts > span { display: inline-flex; align-items: center; white-space: nowrap; }
.rg-br .rg-br-facts > span + span::before { content: '·'; margin: 0 12px; color: var(--muted-d); }
.rg-br .rg-br-facts .rg-br-ride { color: var(--cream); }
.rg-br .rg-br-hook { margin: 0; max-width: 62ch; font: 400 20px/1.5 var(--body); color: var(--cream); }
/* One line: the pill and the quiet link never stack. */
.rg-br .rg-br-head-cta { display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; justify-content: flex-end; padding-top: 36px; }

/* ---- 3. The range (cream) ---- */
.rg-br .rg-br-range { padding-block: 72px 104px; }
.rg-br .rg-br-range.has-bar { padding-block: 0; }
.rg-br .rg-br-rhead { display: grid; gap: 10px; margin-bottom: 36px; color: var(--ink); }
.rg-br .rg-br-range.has-bar .rg-br-rhead { margin-top: 28px; }
.rg-br .rg-br-range .rg-br-label { color: var(--muted); }

/* Bikes: wide cards, two across at every count. A very wide window gets a third. */
.rg-br .rg-shop .rg-grid.is-wide,
.rg-br .rg-shop.rg-br-range .rg-grid.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
.rg-br .rg-shop.rg-br-range a.rg-card[hidden],
.rg-br .rg-br-row[hidden] { display: none; }
.rg-br .rg-shop.rg-br-range .rg-card > span.rg-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; min-height: 20px; }
.rg-br .rg-shop.rg-br-range .rg-card > span.rg-brand:empty { display: none; }
.rg-br .rg-shop.rg-br-range .rg-card > span.rg-brand:empty + .rg-name { margin-top: 14px; }

/* Ride tabs: the shop bar's own tabs, as buttons. They show and hide; nothing reloads. */
.rg-br .rg-br-tabs { display: flex; gap: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--ink); overflow-x: auto; scrollbar-width: none; }
.rg-br .rg-br-tabs::-webkit-scrollbar { display: none; }
.rg-br .rg-br-tabs button.rg-br-tab,
.rg-br .rg-br-tabs button.rg-br-tab:hover,
.rg-br .rg-br-tabs button.rg-br-tab:focus { flex: none; position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 14px 0 16px; border: 0; border-radius: 0; background: none; box-shadow: none; white-space: nowrap; cursor: pointer; color: var(--muted); font: 500 14px/1 var(--mono-med); letter-spacing: .08em; text-transform: uppercase; transition: color .15s; }
.rg-br .rg-br-tabs button.rg-br-tab:hover,
.rg-br .rg-br-tabs button.rg-br-tab[aria-pressed="true"] { color: var(--ink); }
.rg-br .rg-br-tabs button.rg-br-tab[aria-pressed="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink); }

/* Rows: Ready to ride, then Made for you. */
.rg-br .rg-br-row + .rg-br-row { margin-top: 72px; }
/* The line's first row sits on the name's baseline; a second row hangs below it. (Aligned to the bottom, a two-row line rode up above the name.) */
.rg-br .rg-br-rowhead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: baseline; padding: 18px 0 20px; margin-bottom: 28px; border-top: 1px solid var(--ink); color: var(--ink); }
/* The tabs already drew the rule: never two lines stacked. */
.rg-br .rg-br-tabs + .rg-br-row .rg-br-rowhead { border-top: 0; padding-top: 0; }
.rg-br .rg-br-rowname { font: 700 32px/1 var(--display); text-transform: uppercase; }
.rg-br .rg-br-rowhead p { margin: 0; font: 500 18px/1.3 var(--mono-med); color: var(--muted); }
.rg-br a.rg-br-rowlink { display: inline-flex; align-items: center; gap: 8px; margin-top: 40px; font: 500 14px/1.4 var(--mono-med); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.rg-br .rg-br-pause { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 32px 0; border-block: 1px solid var(--ink); }
.rg-br .rg-br-pause p { margin: 0; font: 400 18px/1.5 var(--body); color: var(--ink); }
.rg-br .rg-br-pause a.rg-pill:hover { background: var(--ink); color: var(--cream); }

/* ---- The comparison table (in the brand's long-form copy as
 * <table class="rg-brand-compare">, see docs/brand-pages.md). The first one
 * sits with the range, on cream; a second, smaller one stays in the essay. ---- */
.rg-br table.rg-brand-compare { --t-fg: var(--cream); --t-muted: var(--muted); --t-line: var(--ink-line); width: 100%; margin: 0; border-collapse: collapse; border-spacing: 0; border: 0; color: var(--t-fg); text-align: left; }
.rg-br .rg-br-compare table.rg-brand-compare { --t-fg: var(--ink); --t-muted: var(--muted); --t-line: var(--rule); }
.rg-br .rg-br-compare { margin: 0 0 56px; }
.rg-br table.rg-brand-compare th,
.rg-br table.rg-brand-compare td { border: 0; background: none; text-align: left; }
.rg-br table.rg-brand-compare thead th { padding: 0 24px 14px 0; border-bottom: 1px solid var(--t-fg); font: 400 13px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); vertical-align: bottom; }
.rg-br table.rg-brand-compare tbody th,
.rg-br table.rg-brand-compare tbody td { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--t-line); vertical-align: baseline; }
.rg-br table.rg-brand-compare tbody th { width: 20%; }
.rg-br table.rg-brand-compare tbody th,
.rg-br table.rg-brand-compare tbody th a { font: 700 32px/1 var(--display); text-transform: uppercase; color: var(--t-fg); }
.rg-br table.rg-brand-compare.is-small tbody th,
.rg-br table.rg-brand-compare.is-small tbody th a { font-size: 24px; }
.rg-br table.rg-brand-compare tbody th a:hover,
.rg-br table.rg-brand-compare tbody th a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rg-br table.rg-brand-compare tbody td { font: 400 16px/1.5 var(--body); color: var(--t-fg); }
.rg-br table.rg-brand-compare td.rg-num { white-space: nowrap; }
.rg-br table.rg-brand-compare tr > :last-child { padding-right: 0; }

/* ---- 4. About ---- */
.rg-br .rg-br-essay { padding-block: 112px 120px; }
.rg-br .rg-br-essay .rg-br-h2 { margin-top: 10px; color: var(--cream); }
.rg-br .rg-br-stand { margin: 36px 0 0; max-width: 980px; font: 600 28px/1.35 var(--semi); color: var(--cream); }
.rg-br .rg-br-label + .rg-br-stand { margin-top: 18px; }
/* The reel: the brand's photos and its paragraphs in one strip, a frame at a time. The words are all
   there, but you move through them (Pete 2026-10-08: two columns were "a wall of copy like a damn
   essay"; it has to feel like discovering). Swipes on a phone, arrows and drag-scroll on a desktop. */
.rg-br .rg-br-reel-wrap { margin-top: 64px; }
.rg-br .rg-br-reel { display: flex; align-items: stretch; padding-left: var(--gutter); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; outline-offset: -2px; }
.rg-br .rg-br-reel::-webkit-scrollbar { display: none; }
/* The strip takes sideways drags only, and never passes a sideways overscroll on to the page (back-swipe). */
.rg-br .rg-br-reel,
.rg-br .rg-br-cards { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.rg-br .rg-br-fr { flex: none; scroll-snap-align: start; min-height: 520px; margin-right: 40px; }
.rg-br .rg-br-fr:last-child { margin-right: 0; }
.rg-br .rg-br-fr.is-photo { position: relative; width: 416px; border-radius: 4px; overflow: hidden; background: var(--ink-2); }
.rg-br .rg-br-fr.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rg-br .rg-br-fr.is-text { width: 360px; padding-top: 4px; }
.rg-br .rg-br-fr.is-text.is-wide { width: 720px; }
/* Two paragraphs side by side get a rule between them: never a raised panel. */
.rg-br .rg-br-fr.is-text + .rg-br-fr.is-text { padding-left: 40px; width: 400px; border-left: 1px solid var(--ink-line); }
.rg-br .rg-br-fr.is-text + .rg-br-fr.is-text.is-wide { width: 760px; }
.rg-br .rg-br-fr-n { display: block; margin: 0 0 22px; font: 400 14px/1.4 var(--mono); letter-spacing: .14em; color: var(--muted-d); }
.rg-br .rg-br-fr-n b { font: 500 14px/1.4 var(--mono-med); color: var(--tan); }
.rg-br .rg-br-fr-h { display: block; margin: 0 0 14px; font: 700 32px/1 var(--display); text-transform: uppercase; color: var(--cream); }
.rg-br .rg-br-fr p { margin: 0; font: 400 17px/1.6 var(--body); color: rgb(248 245 240 / .88); }
.rg-br .rg-br-fr.is-wide p { columns: 2; column-gap: 40px; }
.rg-br .rg-br-fr a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rg-br .rg-br-fr b,
.rg-br .rg-br-fr strong { font-family: var(--semi); font-weight: 600; }
.rg-br .rg-br-reel-nav { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.rg-br .rg-br-reel-nav[hidden] { display: none; }
.rg-br .rg-br-reel-nav button.rg-br-rnd,
.rg-br .rg-br-reel-nav button.rg-br-rnd:hover,
.rg-br .rg-br-reel-nav button.rg-br-rnd:focus { flex: none; width: 44px; height: 44px; margin: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--cream); border-radius: 50%; background: none; box-shadow: none; color: var(--cream); cursor: pointer; transition: background .15s, color .15s, opacity .15s; }
.rg-br .rg-br-reel-nav button.rg-br-rnd:hover { background: var(--cream); color: var(--ink); }
.rg-br .rg-br-reel-nav button.rg-br-rnd:disabled { opacity: .3; cursor: default; background: none; color: var(--cream); }
/* The line runs to the screen's right edge, where the last photo ends: full means the end of the reel. */
.rg-br .rg-br-reel-nav { padding-right: 0; }
.rg-br .rg-br-meter { position: relative; flex: 1 1 auto; height: 1px; margin-left: 14px; background: var(--ink-line); }
.rg-br .rg-br-meter i { position: absolute; left: 0; top: -.5px; height: 2px; width: 0; background: var(--cream); }
.rg-br .rg-br-rest { margin-top: 56px; }
.rg-br .rg-br-rest table.rg-brand-compare { margin: 0; }

/* ---- 5. Stories ---- */
.rg-br .rg-br-stories { padding-block: 96px 112px; border-top: 1px solid var(--ink-line); }
.rg-br .rg-br-shead { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.rg-br .rg-br-shead .rg-br-h2 { margin-top: 10px; color: var(--cream); }
.rg-br .rg-br-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rg-br a.rg-br-story { position: relative; display: block; overflow: hidden; border-radius: 4px; color: var(--cream); }
.rg-br .rg-br-story-im { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink-2); }
.rg-br .rg-br-story-im::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 38%, rgb(0 0 0 / .8) 100%); }
.rg-br .rg-br-story-im img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.rg-br a.rg-br-story:hover .rg-br-story-im img { transform: scale(1.04); }
.rg-br .rg-br-story-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; display: grid; gap: 8px; }
.rg-br .rg-br-story-tag { font: 400 16px/1.3 var(--body); text-transform: uppercase; }
.rg-br .rg-br-story-h { font: 600 28px/1.1 var(--semi); text-wrap: balance; }
.rg-br .rg-br-story-date { padding-right: 48px; font: 500 15px/1.5 var(--mono-med); letter-spacing: .14em; }
.rg-br .rg-br-eye { position: absolute; right: 20px; bottom: 20px; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .12); display: grid; place-items: center; font-size: 18px; }

/* ---- 6. The custom close ---- */
.rg-br .rg-br-build { position: relative; min-height: 560px; display: grid; align-items: center; isolation: isolate; overflow: hidden; }
.rg-br .rg-br-build > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1); opacity: .55; }
.rg-br .rg-br-build::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(28 28 28 / .9) 0%, rgb(28 28 28 / .55) 55%, rgb(28 28 28 / .2) 100%); }
.rg-br .rg-br-build .rg-wrap { width: 100%; padding-block: 96px; }
.rg-br .rg-br-build-txt { max-width: 640px; display: grid; gap: 18px; justify-items: start; }
.rg-br .rg-br-build .rg-br-label { color: var(--tan); }
.rg-br .rg-br-build .rg-br-h2 { color: var(--cream); }
.rg-br .rg-br-build-line { margin: 6px 0 10px; font: 400 19px/1.5 var(--body); color: var(--cream); }

/* ---- 7. Related brands: a ruled list ---- */
.rg-br .rg-br-related { padding-block: 72px 96px; border-top: 1px solid var(--ink-line); }
.rg-br .rg-br-related .rg-br-label { margin-bottom: 18px; }
.rg-br .rg-br-rlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 48px; }
.rg-br .rg-br-rlist li { margin: 0; border-top: 1px solid var(--ink-line); }
.rg-br .rg-br-rlist a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 14px 0; color: var(--cream); }
.rg-br .rg-br-rlist img,
.rg-br .rg-br-rph { grid-row: 1 / 3; grid-column: 1; width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--ink-2); }
.rg-br .rg-br-rn { grid-column: 2; align-self: end; font: 500 15px/1.35 var(--mono-med); letter-spacing: 1.8px; text-transform: uppercase; }
.rg-br .rg-br-rt { grid-column: 2; align-self: start; font: 400 15px/1.4 var(--body); color: var(--muted-d); }
.rg-br .rg-br-rn:nth-last-child(2) { grid-row: 1 / 3; align-self: center; }
.rg-br .rg-br-rlist .rg-br-arr { grid-row: 1 / 3; grid-column: 3; transition: transform .2s; }
.rg-br .rg-br-rlist a:hover .rg-br-arr { transform: translateX(4px); }

/* ---- The brand index pages: Makers and Brands (template-parts/brands-index-2026.php) ----
 * The shop category page's head and bar, then maker cards. One attribute on the page,
 * data-mk-show, picks the tab: a card shows the photo and the line that belong to it. */
.rg-mk .rg-mk-over { display: block; margin: 0 0 12px; font: 400 14px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-d); }
.rg-mk .rg-shop-head .rg-wrap { grid-template-columns: minmax(0, 1fr); }
.rg-mk .rg-shop-body { padding-top: 40px; }
.rg-mk .rg-mk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; }
.rg-mk .rg-mk-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.rg-mk .rg-mk-card[hidden] { display: none; }
.rg-mk a.rg-mk-ph { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; margin-bottom: 16px; border-radius: 4px; overflow: hidden; background: var(--cream-2); }
.rg-mk .rg-mk-ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.rg-mk .rg-mk-card:hover .rg-mk-ph img { transform: scale(1.03); }
.rg-mk .rg-mk-where { font: 400 14px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rg-mk a.rg-mk-name { margin: 6px 0 0; font: 700 44px/.95 var(--display); text-transform: uppercase; color: var(--ink); }
.rg-mk a.rg-mk-name:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rg-mk .rg-mk-tag { margin: 8px 0 0; font: 500 18px/1.3 var(--mono-med); color: var(--ink); }
.rg-mk .rg-mk-facts { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 14px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rg-mk .rg-mk-facts .rg-br-ride { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.rg-mk .rg-mk-facts * { font-family: inherit; font-size: inherit; color: inherit; }
.rg-mk .rg-mk-facts .rg-ms { font-family: 'Material Symbols Outlined'; font-size: 18px; }
/* The bikes of the chosen kind, by name: each a way straight to the bike. */
.rg-mk ul.rg-mk-models { width: 100%; margin: 14px 0 0; border-top: 1px solid var(--ink); }
.rg-mk .rg-mk-models li { margin: 0; border-bottom: 1px solid var(--rule); }
/* Name over price on every row: side by side when a short name happened to fit made the list ragged. */
.rg-mk .rg-mk-models a { display: grid; gap: 2px; padding: 10px 0; font: 500 14px/1.4 var(--mono-med); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); }
.rg-mk .rg-mk-models a:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.rg-mk .rg-mk-pr,
.rg-mk .rg-mk-pr * { font: 400 14px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); }
/* Which photo and which line: the "all" ones at rest, a ride's own under its tab. */
.rg-mk [data-mk-for]:not([data-mk-for=""]) { display: none; }
.rg-mk[data-mk-show="road"] [data-mk-for="road"],
.rg-mk[data-mk-show="gravel"] [data-mk-for="gravel"],
.rg-mk[data-mk-show="mountain"] [data-mk-for="mountain"],
.rg-mk[data-mk-show="triathlon"] [data-mk-for="triathlon"] { display: block; }
.rg-mk[data-mk-show="road"] .rg-mk-card:has([data-mk-for="road"]) [data-mk-for=""],
.rg-mk[data-mk-show="gravel"] .rg-mk-card:has([data-mk-for="gravel"]) [data-mk-for=""],
.rg-mk[data-mk-show="mountain"] .rg-mk-card:has([data-mk-for="mountain"]) [data-mk-for=""],
.rg-mk[data-mk-show="triathlon"] .rg-mk-card:has([data-mk-for="triathlon"]) [data-mk-for=""] { display: none; }
.rg-mk-foot .rg-br-stories { border-top: 0; }

@media (min-width: 1800px) {
	.rg-mk .rg-mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
	.rg-mk .rg-mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rg-mk a.rg-mk-name { font-size: 38px; }
}

@media (max-width: 760px) {
	.rg-mk .rg-shop-body { padding-top: 28px; }
	.rg-mk .rg-mk-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.rg-mk .rg-mk-tag { font-size: 16px; }
}

/* ---- Regroup Custom (template-parts/custom-2026.php): the editorial page ---- */
.rg-cu .rg-cu-hero { min-height: 700px; height: 88vh; max-height: 940px; }
.rg-cu .rg-cu-hero .rg-br-hero-copy { gap: 22px; padding-bottom: 64px; }
/* One heading, two voices: the page's name is a hairline label, the statement is the headline. */
body .rg-cu h1.rg-cu-h1 { margin: 0; display: grid; gap: 22px; font-size: 16px !important; line-height: 1 !important; font-weight: 400; color: var(--cream); }
.rg-cu .rg-cu-hair { display: flex; align-items: center; gap: 16px; font: 500 15px/1.4 var(--mono-med); letter-spacing: .14em; text-transform: uppercase; }
.rg-cu .rg-cu-hair i { flex: 1 1 auto; height: 1px; background: rgb(248 245 240 / .7); }
.rg-cu .rg-cu-statement { display: block; max-width: 14ch; font: 700 clamp(64px, 11.6vw, 184px)/.84 var(--display); text-transform: uppercase; letter-spacing: -.005em; }
.rg-cu .rg-cu-open { border-bottom: 1px solid var(--ink-line); }
.rg-cu .rg-cu-open .rg-wrap { padding-block: 96px 120px; }
/* The intro in beats, staggered with photos of the work: left, then right and riding up, then a
   line on its own, then left again. Twelve columns; nothing sits square under the thing above it. */
.rg-cu .rg-cu-beat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.rg-cu .rg-cu-shot { display: block; border-radius: 4px; overflow: hidden; background: var(--ink-2); }
.rg-cu .rg-cu-shot img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rg-cu .rg-cu-txt .rg-br-stand { margin: 0 0 18px; max-width: none; font-size: 30px; line-height: 1.25; }
.rg-cu .rg-cu-p { margin: 0; font: 400 17px/1.6 var(--body); color: rgb(248 245 240 / .88); }
.rg-cu .rg-cu-p.is-big { font-size: 20px; line-height: 1.5; color: var(--cream); }
.rg-cu .rg-cu-txt .rg-br-ctas { margin-top: 28px; }
.rg-cu .rg-cu-beat.is-1 { align-items: center; }
.rg-cu .rg-cu-beat.is-1 .rg-cu-fig { grid-column: 1 / 8; }
.rg-cu .rg-cu-beat.is-1 .rg-cu-shot { aspect-ratio: 3 / 2; }
.rg-cu .rg-cu-beat.is-1 .rg-cu-txt { grid-column: 9 / 13; }
.rg-cu .rg-cu-beat.is-2 { margin-top: 96px; align-items: start; }
.rg-cu .rg-cu-beat.is-2 .rg-cu-txt { grid-column: 2 / 7; grid-row: 1; padding-top: 40px; }
/* The beat's title speaks in the standfirst's voice (Matter Semibold, sentence case), not the display face:
   the display face is kept for the one big line below it (Pete 2026-10-08). */
.rg-cu .rg-cu-beat-h { margin: 0 0 14px; font: 600 30px/1.25 var(--semi); color: var(--cream); }
.rg-cu .rg-cu-beat.is-2 .rg-cu-fig { grid-column: 8 / 13; grid-row: 1; }
.rg-cu .rg-cu-beat.is-2 .rg-cu-shot { aspect-ratio: 3 / 2; }
/* The fit: supporting meta under its photo, a caption's voice with no title of its own. */
.rg-cu .rg-cu-note { margin: 14px 0 0; display: grid; gap: 8px; justify-items: start; }
.rg-cu .rg-cu-note p { margin: 0; font: 400 15px/1.5 var(--body); color: var(--muted-d); }
.rg-cu .rg-cu-note a { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.4 var(--mono-med); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.rg-cu .rg-cu-pull { margin: 96px 0 56px; font: 700 clamp(56px, 8.4vw, 132px)/.88 var(--display); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; color: var(--cream); }
/* The finished bike gets the room: wide, the whole bike in frame. */
.rg-cu .rg-cu-beat.is-3 .rg-cu-shot { grid-column: 1 / 9; aspect-ratio: 3 / 2; }
.rg-cu .rg-cu-beat.is-3 .rg-cu-txt { grid-column: 9 / 13; padding-bottom: 8px; }
/* Each beat arrives as you reach it (js/brand-2026.js adds .is-reveal; without it everything simply shows). */
.rg-br.is-reveal [data-rg-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.rg-br.is-reveal [data-rg-reveal].is-in { opacity: 1; transform: none; }
/* The fit photo comes in from the side it sits on, further and a touch slower than the rest. */
.rg-cu .rg-cu-open { overflow-x: clip; }
.rg-br.is-reveal .rg-cu-beat.is-2 .rg-cu-shot[data-rg-reveal] { transform: translateX(72px); transition-duration: .8s, 1.1s; }
.rg-br.is-reveal .rg-cu-beat.is-2 .rg-cu-note[data-rg-reveal] { transition-delay: .25s; }
.rg-br.is-reveal .rg-cu-beat.is-2 .rg-cu-shot[data-rg-reveal].is-in { transform: none; }
/* "And that's when the fun begins." arrives with a flush of colour running through the letters, left
   to right, once, and settles back to cream (Pete 2026-10-08). The colour is the house tan warming to
   amber; the text is painted with a wide gradient that slides across. Without the script, or with
   reduced motion, it is simply cream. */
@keyframes rg-cu-flush {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}
.rg-br.is-reveal .rg-cu-pull[data-rg-reveal] {
	background-image: linear-gradient(100deg, var(--cream) 0%, var(--cream) 38%, var(--tan) 46%, #d6a258 50%, var(--tan) 54%, var(--cream) 62%, var(--cream) 100%);
	background-size: 320% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.rg-br.is-reveal .rg-cu-pull[data-rg-reveal].is-in { animation: rg-cu-flush 1.7s cubic-bezier(.3, .6, .2, 1) .25s both; }
@media (prefers-reduced-motion: reduce) {
	.rg-br.is-reveal .rg-cu-pull[data-rg-reveal] { background: none; -webkit-text-fill-color: currentColor; color: var(--cream); animation: none; }
	.rg-br.is-reveal [data-rg-reveal],
	.rg-br.is-reveal .rg-cu-beat.is-2 .rg-cu-shot[data-rg-reveal] { opacity: 1; transform: none; }
}
.rg-cu .rg-cu-builds { padding-block: 104px 112px; }
.rg-cu a.rg-cu-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; color: var(--cream); }
.rg-cu .rg-cu-feature-im { display: block; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; background: var(--ink-2); }
.rg-cu .rg-cu-feature-im img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.rg-cu a.rg-cu-feature:hover .rg-cu-feature-im img { transform: scale(1.03); }
.rg-cu .rg-cu-feature-txt { display: grid; gap: 16px; justify-items: start; padding-bottom: 8px; }
.rg-cu .rg-cu-feature-h { font: 700 56px/.95 var(--display); text-transform: uppercase; text-wrap: balance; }
.rg-cu .rg-cu-feature-ex { font: 400 18px/1.5 var(--body); color: rgb(248 245 240 / .88); }
.rg-cu span.rg-br-more { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 28px; border-radius: 100px; box-shadow: inset 0 0 0 1px currentColor; font: 500 18px/1 var(--mono-med); letter-spacing: .05em; text-transform: uppercase; }
.rg-cu a.rg-cu-feature:hover span.rg-br-more { background: var(--cream); color: var(--ink); }
/* The other builds ride the reel, as story cards. */
.rg-cu .rg-br-reel-wrap { margin-top: 40px; }
.rg-cu .rg-br-reel a.rg-br-story { width: 380px; min-height: 0; margin-right: 24px; }
.rg-cu .rg-br-reel a.rg-br-story .rg-br-story-h { font-size: 24px; }
/* The makers, by name: the house index. */
.rg-cu .rg-cu-makers { padding-block: 96px 104px; border-top: 1px solid var(--ink-line); }
.rg-cu .rg-cu-index { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 64px; }
.rg-cu .rg-cu-index li { margin: 0; break-inside: avoid; border-top: 1px solid var(--ink-line); }
.rg-cu .rg-cu-index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; padding: 16px 0 14px; color: var(--cream); }
.rg-cu .rg-cu-index-n { font: 700 64px/.9 var(--display); text-transform: uppercase; transition: color .15s; }
.rg-cu .rg-cu-index a:hover .rg-cu-index-n { color: var(--tan); }
/* Where it's from and its price stay together as one block, centred on the name however many lines the name takes. */
.rg-cu .rg-cu-index-m { display: grid; gap: 6px; justify-items: end; text-align: right; }
.rg-cu .rg-cu-index-w,
.rg-cu .rg-cu-index-p,
.rg-cu .rg-cu-index-p * { font: 400 14px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-d); }
.rg-cu .rg-cu-index .rg-br-arr { display: none; }

@media (max-width: 1100px) {
	.rg-cu .rg-cu-beat.is-1 .rg-cu-fig { grid-column: 1 / 13; }
	.rg-cu .rg-cu-beat.is-1 .rg-cu-txt { grid-column: 1 / 11; margin-top: 36px; }
	.rg-cu .rg-cu-beat.is-2 { margin-top: 64px; }
	.rg-cu .rg-cu-beat.is-2 .rg-cu-txt { grid-column: 1 / 11; grid-row: auto; padding-top: 0; }
	.rg-cu .rg-cu-beat.is-2 .rg-cu-fig { grid-column: 4 / 13; grid-row: auto; margin-top: 36px; }
	.rg-cu a.rg-cu-feature { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.rg-cu .rg-cu-feature-h { font-size: 44px; }
	.rg-cu .rg-cu-index { columns: 1; }
}

@media (max-width: 760px) {
	.rg-cu .rg-cu-hero { height: auto; min-height: 0; max-height: none; aspect-ratio: 3 / 4; }
	.rg-cu .rg-cu-hero .rg-br-hero-copy { gap: 14px; padding-bottom: 28px; }
	body .rg-cu h1.rg-cu-h1 { gap: 14px; }
	.rg-cu .rg-cu-hair { font-size: 13px; gap: 10px; }
	.rg-cu .rg-cu-open .rg-wrap { padding-block: 56px 72px; }
	.rg-cu .rg-cu-txt .rg-br-stand,
	.rg-cu .rg-cu-beat-h { font-size: 24px; }
	.rg-cu .rg-cu-p.is-big { font-size: 18px; }
	.rg-cu .rg-cu-beat.is-1 .rg-cu-txt,
	.rg-cu .rg-cu-beat.is-2 .rg-cu-txt,
	.rg-cu .rg-cu-beat.is-3 .rg-cu-txt { grid-column: 1 / 13; grid-row: auto; }
	/* On a phone the stagger is in the photos: full, then a narrow one set right, then one set left. */
	/* On a phone the fit photo goes BETWEEN the two blocks of words, not after them: two headings and
	   two paragraphs in a row read dry (Pete 2026-10-08). It keeps clear air above it. */
	.rg-cu .rg-cu-beat.is-2 { margin-top: 72px; }
	.rg-cu .rg-cu-beat.is-2 .rg-cu-fig { grid-column: 3 / 13; order: -1; margin: 0 0 72px; }
	.rg-cu .rg-cu-beat.is-3 .rg-cu-shot { grid-column: 1 / 13; }
	/* Full width, like every other block of words on the phone page (it was stopping two columns short). */
	.rg-cu .rg-cu-beat.is-3 .rg-cu-txt { grid-column: 1 / 13; margin-top: 32px; }
	.rg-cu .rg-cu-pull { margin: 64px 0 36px; }
	.rg-cu .rg-cu-beat.is-3 .rg-cu-shot { grid-column: 1 / 13; }
	.rg-cu .rg-cu-beat.is-3 .rg-cu-txt { margin-top: 24px; }
	.rg-cu .rg-cu-builds { padding-block: 64px 72px; }
	.rg-cu .rg-cu-feature-h { font-size: 36px; }
	.rg-cu span.rg-br-more { min-height: 44px; padding: 0 20px; font-size: 15px; }
	.rg-cu .rg-br-reel a.rg-br-story { width: 78vw; margin-right: 12px; }
	.rg-cu .rg-cu-makers { padding-block: 64px 72px; }
	.rg-cu .rg-cu-index-n { font-size: 44px; }
	.rg-cu .rg-cu-index-p { display: none; }
	/* A long place (Melbourne, Australia; Beverly, Massachusetts) breaks onto two lines, set right,
	   so it keeps its distance from the name instead of running into it. */
	.rg-cu .rg-cu-index a { column-gap: 28px; }
	.rg-cu .rg-cu-index-m { max-width: 132px; }
	.rg-cu .rg-cu-index-w { font-size: 12px; line-height: 1.5; }
}

/* ---- Widths ---- */
@media (min-width: 1800px) {
	.rg-br .rg-shop .rg-grid.is-wide,
	.rg-br .rg-shop.rg-br-range .rg-grid.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1200px) {
	.rg-br { --gutter: 32px; }
	.rg-br .rg-br-head .rg-wrap { gap: 40px; }
}

@media (max-width: 1100px) {
	body .rg-br .rg-br-h2.is-big { font-size: 76px !important; }
	.rg-br .rg-br-cards { gap: 16px; }
	.rg-br .rg-br-story-h { font-size: 22px; }
}

@media (max-width: 800px) {
	.rg-br { --gutter: 24px; }
}

@media (max-width: 782px) {
	body.admin-bar.rg-br26-page header#masthead { top: 46px; }
}

@media (max-width: 760px) {
	.rg-br a.rg-br-btn,
	.rg-br a.rg-br-more { min-height: 44px; padding: 0 20px; font-size: 15px; }

	/* Phone: the photo is the hero, 4:5, with the name on it. */
	.rg-br .rg-br-hero { height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 5; }
	.rg-br .rg-br-hero-copy { padding-bottom: 24px; gap: 8px; }
	.rg-br .rg-br-hero .rg-br-label { font-size: 13px; }
	.rg-br .rg-br-sub { font-size: 18px; }

	.rg-br .rg-br-head .rg-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 28px 32px; }
	.rg-br .rg-br-facts { font-size: 14px; }
	/* Wrapped onto two lines, a separator would start one: spacing does the job instead. */
	.rg-br .rg-br-facts { gap: 4px 18px; }
	.rg-br .rg-br-facts > span + span::before { content: none; }
	.rg-br .rg-br-hook { font-size: 17px; }
	.rg-br .rg-br-head-cta { justify-content: flex-start; padding-top: 0; }

	.rg-br .rg-br-range { padding-block: 48px 72px; }
	body .rg-br .rg-br-h2 { font-size: 48px !important; }
	body .rg-br .rg-br-h2.is-big { font-size: 48px !important; }
	body .rg-br .rg-br-h2.is-small { font-size: 40px !important; }
	.rg-br .rg-br-rhead { margin-bottom: 24px; }
	.rg-br .rg-br-tabs { gap: 22px; margin-bottom: 28px; }
	.rg-br .rg-shop .rg-grid.is-wide,
	.rg-br .rg-shop.rg-br-range .rg-grid.is-wide { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.rg-br .rg-br-row + .rg-br-row { margin-top: 56px; }
	.rg-br .rg-br-rowhead { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0 16px; margin-bottom: 20px; }
	.rg-br .rg-br-rowname { font-size: 28px; }
	.rg-br .rg-br-rowhead p { font-size: 16px; }
	.rg-br .rg-br-compare { margin-bottom: 40px; }

	/* The table becomes one block per product, each cell labelled from data-label. */
	.rg-br table.rg-brand-compare,
	.rg-br table.rg-brand-compare tbody,
	.rg-br table.rg-brand-compare tr,
	.rg-br table.rg-brand-compare tbody th,
	.rg-br table.rg-brand-compare tbody td { display: block; width: 100%; }
	.rg-br table.rg-brand-compare { border-top: 1px solid var(--t-fg); }
	/* Headings stay for screen readers; the labels below do the visual job. */
	.rg-br table.rg-brand-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.rg-br table.rg-brand-compare tbody tr { padding: 20px 0; border-bottom: 1px solid var(--t-line); }
	.rg-br table.rg-brand-compare tbody th,
	.rg-br table.rg-brand-compare tbody td { padding: 0; border: 0; }
	.rg-br table.rg-brand-compare tbody th { margin-bottom: 12px; }
	.rg-br table.rg-brand-compare tbody td { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; padding: 4px 0; }
	.rg-br table.rg-brand-compare tbody td::before { content: attr(data-label); padding-top: 4px; font: 400 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }

	.rg-br .rg-br-essay { padding-block: 72px 80px; }
	.rg-br .rg-br-stand { margin-top: 24px; font-size: 20px; }
	.rg-br .rg-br-reel-wrap { margin-top: 40px; }
	.rg-br .rg-br-fr { min-height: 0; margin-right: 24px; }
	.rg-br .rg-br-fr.is-photo { width: 78vw; min-height: 420px; }
	.rg-br .rg-br-fr.is-text,
	.rg-br .rg-br-fr.is-text.is-wide { width: 78vw; }
	.rg-br .rg-br-fr.is-text + .rg-br-fr.is-text,
	.rg-br .rg-br-fr.is-text + .rg-br-fr.is-text.is-wide { width: calc(78vw + 24px); padding-left: 24px; }
	.rg-br .rg-br-fr p { font-size: 16px; }
	.rg-br .rg-br-fr.is-wide p { columns: auto; }
	.rg-br .rg-br-fr-h { font-size: 28px; }
	.rg-br .rg-br-rest { margin-top: 40px; }

	.rg-br .rg-br-stories { padding-block: 64px 72px; }
	.rg-br .rg-br-shead { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; }
	.rg-br .rg-br-cards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
	.rg-br .rg-br-cards::-webkit-scrollbar { display: none; }
	.rg-br a.rg-br-story { scroll-snap-align: start; }
	.rg-br .rg-br-story-h { font-size: 24px; }

	.rg-br .rg-br-build { min-height: 0; }
	.rg-br .rg-br-build .rg-wrap { padding-block: 64px; }
	.rg-br .rg-br-build-line { font-size: 17px; }

	.rg-br .rg-br-related { padding-block: 48px 64px; }
	.rg-br .rg-br-rlist { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.rg-br *,
	.rg-br *::before,
	.rg-br *::after { transition: none !important; }
}