/* Rudra Equipment - industrial theme layer.
 *
 * Loaded last, after theme-ayur.css, which stays as the component layer for the pages not yet
 * redesigned. Like that file, most of the re-skin is a remap of the :root tokens every
 * component already reads; the rest restyles the header and footer (dark, because the logo's
 * "D" and "Equipment" are white) and adds the home page sections (.rd-*).
 *
 * Palette from the logo: bronze-gold #A88B4A on charcoal #16181B, with cool steel greys.
 */

:root {
  --navy: #1F2226;          /* primary: graphite */
  --navy-dark: #16181B;
  --ink: #16181B;           /* headings */
  --ink-deep: #0F1012;      /* dark grounds */
  --orange: #A88B4A;        /* accent: logo bronze-gold */
  --orange-dark: #8A7038;
  --amber: #C9A85E;
  --cyan: #8A7038;

  --body: #3E434A;
  --muted: #6B7178;
  --muted-strong: #555B62;
  --line: #E3E3DF;
  --line-strong: #CFCFC9;
  --tint: #EFEFEC;
  --paper: #F4F4F1;
  --white: #fff;

  --ivory: #FAFAF8;
  --leaf: #1F2226;
  --earth: #8A7038;
  --tan: #C9A85E;
  --haldi-soft: #F1EADA;
  --gold-text: #7A6430;     /* gold that reads as text: 5.6:1 on white */
  --steel: #2A2E33;
  --rd-dark: #16181B;
  --rd-dark-2: #1F2226;

  --radius: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(22, 24, 27, .06);
  --shadow: 0 1px 2px rgba(22, 24, 27, .05), 0 10px 26px rgba(22, 24, 27, .08);
  --shadow-lg: 0 2px 6px rgba(22, 24, 27, .06), 0 22px 48px rgba(22, 24, 27, .14);

  --sans: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
  --serif: Poppins, "Segoe UI", system-ui, sans-serif;   /* headings */
}

/* ---------- base ---------- */
body { background: var(--white); color: var(--body); }
a { color: var(--gold-text); }
a:hover { color: var(--ink); }
::selection { background: var(--haldi-soft); color: var(--ink); }

h1, h2, h3, h3.as-h2 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variation-settings: normal;
  color: var(--ink);
}

/* ---------- buttons: squared, industrial ---------- */
.btn { border-radius: var(--radius); letter-spacing: .03em; text-transform: none; }
.btn-primary { background: var(--rd-dark); color: #fff; box-shadow: none; }
.btn-accent { background: var(--orange); color: var(--ink); box-shadow: none; }
.btn-ghost { color: var(--ink); border-color: var(--line-strong); }

.rd-btn-gold { background: var(--orange); color: var(--ink); border: 1px solid var(--orange); }
.rd-btn-line { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.rd-btn-dark { background: var(--rd-dark); color: #fff; border: 1px solid var(--rd-dark); }
.rd-btn-line-dark { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.rd-btn-wa { background: #fff; color: #128C7E; border: 1px solid #BFE7D4; }

/* ---------- top strip: quiet, reference information only ---------- */
.topbar { background: var(--ink-deep); color: rgba(255, 255, 255, .68); border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 12.5px; }
.topbar-in { min-height: 34px; }
.topbar a { color: rgba(255, 255, 255, .72); }
.topbar a:hover { color: #fff; }
.topbar-links a + a::before { background: rgba(255, 255, 255, .16); }
.topbar-links i { color: var(--amber); opacity: 1; }
.topbar-links a:hover i { color: var(--amber); }
.topbar-social { gap: 2px; }
.topbar-social a { width: 28px; height: 28px; background: transparent; border: 0; color: rgba(255, 255, 255, .72); border-radius: 4px; }
.topbar-social a:hover { background: transparent; border: 0; color: var(--amber); }
.topbar-social i { font-size: 13px; }

/* ---------- main row: charcoal, because the logo's "D" and "Equipment" are white ---------- */
.head { border-bottom: 0; }
.head::before { background: var(--rd-dark); -webkit-backdrop-filter: none; backdrop-filter: none; }
.head.is-compact { box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
/* flex: none, or a narrow window squeezes the wide logo out of shape before the search gives way. */
.brand { flex: none; }
.brand-logo { height: 54px; width: auto; max-width: none; }
.head.is-compact .brand-logo { height: 40px; }

.hsearch { background: #fff; border: 1px solid #fff; border-radius: 4px; box-shadow: none; overflow: visible; }
.hsearch:focus-within { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.hsearch button { align-self: stretch; width: 48px; height: auto; margin: 0; border-radius: 0 3px 3px 0; background: var(--rd-dark-2); color: #fff; }
.hsearch button:hover { background: var(--orange); color: var(--ink); }

.head-actions { gap: 4px; }
.rd-call { display: flex; align-items: center; gap: 12px; margin-right: 16px; padding-right: 20px; border-right: 1px solid rgba(255, 255, 255, .14); }
.rd-call > i { color: var(--amber); font-size: 18px; }
.rd-call a { display: block; color: #fff; font: 700 14.5px/1.45 var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rd-call a:hover { color: var(--amber); }

.iconbtn { width: 42px; height: 42px; background: transparent; border: 0; border-radius: 4px; color: #fff; box-shadow: none; }
.iconbtn:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: none; box-shadow: none; }
.cart-n { background: var(--orange); color: var(--ink); }

/* ---------- nav bar: graphite, one plain row of links ---------- */
.catbar { background: var(--rd-dark-2); border-top: 1px solid rgba(255, 255, 255, .06); color: #fff; }
.catbar-in { min-height: 50px; justify-content: space-between; }
.head.is-compact .catbar-in { min-height: 44px; }

.navlink { color: rgba(255, 255, 255, .88); font-family: var(--sans); font-weight: 700; font-size: 14px; }
.navlink:hover, .navlink.is-on { color: #fff; background: transparent; }
.mainnav > a.navlink, .has-mega .navlink-btn { padding: 0 18px; }
.mainnav > a.navlink:first-of-type { padding-left: 0; }
.mainnav > a.navlink + a.navlink::before { display: none; }
.mainnav > a.navlink::after { left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 0; background: var(--orange); }
.mainnav > a.navlink:first-of-type::after { left: 0; }
.mainnav > a.navlink:hover::after { transform: scaleX(1); }

/* Products is a menu item like the others, not a second button. */
.has-mega .navlink-btn, .head.is-compact .has-mega .navlink-btn { margin: 0; background: transparent; color: rgba(255, 255, 255, .88); border-radius: 0; height: 100%; }
.has-mega .navlink-btn:hover, .has-mega.is-open .navlink-btn { background: transparent; color: var(--amber); }
.has-mega .grid-ic { display: none; }

/* The one bold thing in the header. */
.rd-quote-bar { display: flex; align-items: center; padding: 0 28px; background: var(--orange); color: var(--ink); font: 700 14px/1 var(--sans); white-space: nowrap; transition: background .15s var(--ease); }
.rd-quote-bar:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.rd-quote-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--orange); color: var(--ink); border: 0; border-radius: 4px; padding: 11px 18px; font-size: 14px; white-space: nowrap; }
.rd-quote-m { display: none; }

/* Mega: the range as a catalogue sheet, one photo tile per category. */
.mega { background: #fff; border-top: 3px solid var(--orange); }
/* !important only to beat the same in theme-ayur.css, which made these circles. */
.mega-thumb { background: var(--paper) !important; overflow: hidden; }
.mega-thumb img { object-fit: contain; mix-blend-mode: multiply; }
.mega-help { background: var(--rd-dark); color: rgba(255, 255, 255, .78); border-radius: var(--radius-lg); }
.mega-help::before { display: none; }
.mega-help strong { color: #fff; }

@media (min-width: 861px) {
  .mega { max-height: calc(100vh - 176px); overflow-y: auto; }
  .mega-in { grid-template-columns: minmax(0, 1fr) 264px; gap: 24px; padding-top: 22px; padding-bottom: 26px; }
  .mega-head { align-items: center; margin: 0 0 14px; padding: 0; border: 0; }
  .mega-label { margin: 0; font: 700 18px/1.3 var(--serif); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
  .mega-all { font: 700 13.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--gold-text); }
  .mega-all:hover { color: var(--ink); }

  .mega-cats ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .mega-cats ul a { display: flex; flex-direction: column; align-items: stretch; gap: 0; height: 100%; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .mega-cats ul a:hover { background: #fff; border-color: var(--orange); box-shadow: inset 0 -3px 0 var(--orange); transform: none; }
  .mega-cats ul a .mega-thumb, .mega-cats ul a:hover .mega-thumb { display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 1 / .8; padding: 10px; border: 0; }
  /* Absolute: a percentage height does nothing inside an aspect-ratio box, which cropped the machines. */
  .mega-cats ul a .mega-thumb { position: relative; }
  .mega-cats ul a .mega-thumb img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); transition: transform .25s var(--ease); }
  .mega-cats ul a:hover .mega-thumb img { transform: scale(1.07); }
  .mega-cat-txt { padding: 9px 10px 12px; }
  .mega-cat-txt b { font: 600 13px/1.3 var(--sans); color: var(--ink); }
  .mega-cats ul a:hover .mega-cat-txt b { color: var(--ink); }

  .mega-side { align-self: stretch; }
  .mega-help { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex: 1; padding: 0; overflow: hidden; }
  .mega-help-pic { display: grid; place-items: center; flex: 1; min-height: 150px; padding: 16px; background: var(--paper); }
  .mega-help-pic img { width: 100%; max-height: 210px; object-fit: contain; mix-blend-mode: multiply; }
  .mega-help-txt { padding: 18px 20px 20px; }
  .mega-help p { margin-bottom: 14px; }
  .mega-help .btn { display: flex; justify-content: center; width: 100%; margin: 8px 0 0; }
  .mega-help .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
}
/* Phone drawer: the same photo tile, two across. */
@media (max-width: 860px) {
  .mega-cats ul a { padding: 0; gap: 0; overflow: hidden; border-radius: 6px; }
  .mega-cats ul a .mega-thumb { position: relative; width: 100%; height: auto; aspect-ratio: 1 / .72; padding: 0; border: 0; }
  .mega-cats ul a .mega-thumb img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .mega-cat-txt { padding: 9px 8px 11px; }
}
@media (max-width: 1100px) and (min-width: 861px) {
  .mega-in { grid-template-columns: minmax(0, 1fr); }
  .mega-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mega-cats ul a .mega-thumb img { transition: none; }
  .mega-cats ul a:hover .mega-thumb img { transform: none; }
}
@media (min-width: 861px) {
  .head-in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 36px; min-height: 86px; }
  .head.is-compact .head-in { min-height: 60px; }
  .hsearch { width: 100%; max-width: 560px; justify-self: center; }
}
/* The phone is never out of sight: too narrow for the block, it moves to the top strip. */
.topbar a.rd-top-phone { display: none; }
.topbar a.topbar-mail { display: inline-flex; }
@media (min-width: 1241px) {
  .topbar-links a.rd-top-phone + a { padding-left: 0; }
  .topbar-links a.rd-top-phone + a::before { display: none; }
}
@media (max-width: 1240px) {
  .rd-call { display: none; }
  .topbar a.rd-top-phone { display: inline-flex; font-weight: 700; color: #fff; }
}
@media (max-width: 1040px) {
  .mainnav > a.navlink, .has-mega .navlink-btn { padding: 0 12px; }
  .mainnav > a.navlink::after { left: 12px; right: 12px; }
  .rd-quote-bar { padding: 0 18px; }
}

/* Phone: charcoal bar, white drawer (so its logo is the dark one); the bronze block moves up beside the burger. */
@media (max-width: 860px) {
  .brand-logo { height: 42px; }
  /* One row, whatever the shop icons add up to: logo left, actions and burger right. */
  .head-in { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .head-in > .hsearch { display: none; }
  .head-actions { margin-left: auto; flex: none; }
  .burger { order: 3; flex: none; width: 42px; height: 42px; }
  .catbar { background: transparent; }
  .catbar-in, .head.is-compact .catbar-in { min-height: 0; }
  .rd-quote-bar { display: none; }
  .rd-quote-m { display: inline-flex; width: 42px; height: 42px; padding: 0; }
  .burger { border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px; background: transparent; color: #fff; }
  .burger:hover, .burger[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: #fff; }
  .nav-m-logo { height: 40px; width: auto; }
  .nav-close { color: var(--ink); }
  .mainnav > a.navlink, .mainnav > a.navlink:first-of-type { padding: 14px 12px; }
  .mainnav > a.navlink:first-of-type { margin-top: 12px; }
  /* The tabs sit on the same edges as the search box and the links below them. */
  .nav-m-tabs { padding: 0 16px; background: #fff; }
  .nav-m-tabs button { padding-left: 2px; padding-right: 2px; letter-spacing: .04em; }
  .nav-m-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--orange); }
  .mainnav .navlink, .has-mega .navlink-btn { color: var(--ink); }
  .mainnav .navlink:hover, .mainnav .navlink.is-on { color: var(--gold-text); }
  .mainnav > a.navlink::after { display: none; }
  .nav-m-foot .rd-quote-btn { width: 100%; margin-bottom: 8px; }
  /* The logo file has blank space on its left; pull it back to the drawer's text edge. */
  .nav-m-logo { margin-left: -24px; }
  .mainnav > .nav-m-search { border: 1px solid var(--line-strong); background: #fff; }
  .nav-m-search input { padding-left: 12px; padding-right: 8px; text-overflow: ellipsis; }
  .nav-m-search input::placeholder { font-size: 14px; text-overflow: ellipsis; }
  .mainnav > a.navlink.is-on { color: var(--gold-text); box-shadow: inset 3px 0 0 var(--orange); }
  /* Products tab: two plain rows after the tiles, not a ruled strip of capitals. */
  .mega { border-top: 0; }
  .mega-cats { display: flex; flex-direction: column; }
  .mega-head { order: 2; display: block; margin: 10px 0 12px; padding: 0; border: 0; }
  .mega-links { display: grid; gap: 8px; width: 100%; }
  .mega-all { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); font: 700 14px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
}
.nav-scrim { background: rgba(22, 24, 27, .6); }
/* Small phones: sign in and wishlist stay in the drawer's foot, so the row keeps quote and cart. */
@media (max-width: 480px) {
  .head-actions .iconbtn:not(.iconbtn-cart), .head-actions .hacct { display: none; }
}
/* ---------- footer ---------- */
.foot { background: var(--ink-deep); border-image: linear-gradient(90deg, var(--orange), rgba(168, 139, 74, .15) 42%, transparent 72%) 1; }
.foot::before { background: radial-gradient(760px 460px at 90% 0%, rgba(168, 139, 74, .12), transparent 62%); }
.foot a:hover { color: var(--amber); }
.foot h4 { color: #fff; }
.foot h4::after { background: var(--orange); }
.foot-brand-logo { background: transparent; padding: 0; }
.foot-brand-logo img { height: 56px; }
.foot-ic { background: rgba(168, 139, 74, .14); color: var(--amber); }

/* =====================================================================
   Home page (.rd-*)
   ===================================================================== */
.rd-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 12px; font: 800 12px/1.2 var(--sans);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text);
}
.rd-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); }
.rd-lede { color: var(--muted-strong); font-size: 16px; line-height: 1.7; max-width: 62ch; margin: 10px 0 0; }

.rd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.rd-head h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; margin: 0; text-wrap: balance; }
.rd-head-center { justify-content: center; text-align: center; }
.rd-head-center .rd-eyebrow { justify-content: center; }
.rd-head-center .rd-lede { margin-inline: auto; }
.rd-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--ink); white-space: nowrap; border-bottom: 2px solid var(--orange); padding-bottom: 4px; }
.rd-more:hover { color: var(--gold-text); }
.rd-more i { transition: transform .2s var(--ease); }
.rd-more:hover i { transform: translateX(3px); }
@media (max-width: 720px) { .rd-head { flex-direction: column; align-items: flex-start; } .rd-head-center { align-items: center; } }

.section.rd-cats, .section.rd-products, .section.rd-services,
.section.rd-clients, .section.rd-blog, .section.rd-faq, .section.rd-enquire { padding: clamp(56px, 8vw, 96px) 0; }

/* Slider: banners on charcoal, so the letterbox around a narrower banner reads as frame. */
.rd-slider { background: var(--rd-dark); }
.rd-slide-copy { position: relative; z-index: 1; color: #fff; padding: 80px 0; }
.rd-slide-copy .rd-slide-h { color: #fff; font-size: clamp(30px, 4vw, 52px); max-width: 16ch; }
.rd-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }

/* Intro band: the H1, the two CTAs and the three promises. */
.rd-intro { background: #fff; color: var(--body); padding: clamp(40px, 5vw, 64px) 0; }
.rd-intro-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: 32px clamp(32px, 6vw, 88px); align-items: center; }
.rd-intro h1 { color: var(--ink); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.14; margin: 0; max-width: 21ch; text-wrap: balance; }
.rd-intro-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* A cut corner, like the angled strokes of the logo. */
.rd-intro-plate { position: relative; display: flex; flex-direction: column; background: #F4F4F1; color: var(--ink); clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%, 0 44px); }
.rd-intro-plate:hover { color: var(--ink); }
.rd-intro-plate h2 { margin: 0; padding: 14px 22px; background: var(--orange); color: var(--ink); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.3; }

.rd-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--line); }
.rd-feature-ic { display: block; margin-bottom: 14px; color: var(--gold-text); font-size: 26px; }
.rd-feature-h { color: var(--ink); font-size: 19px; margin: 0 0 8px; }
.rd-feature p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted-strong); }
@media (max-width: 900px) {
  .rd-intro-head { grid-template-columns: minmax(0, 1fr); }
  .rd-features { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rd-feature { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; }
  .rd-feature-ic { grid-row: span 2; margin: 2px 0 0; font-size: 24px; }
}
/* Category grid: two double tiles lead, sixteen single ones follow, on charcoal. */
.section.rd-cats { background: var(--rd-dark); }
.rd-cats .rd-head h2 { color: #fff; }
.rd-cats .rd-more { color: #fff; }
.rd-cats .rd-more:hover { color: var(--amber); }
.rd-cat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.rd-cat-grid .is-big { grid-column: span 2; grid-row: span 2; }
.rd-cat { display: flex; flex-direction: column; height: 100%; background: var(--paper); color: var(--ink); }
.rd-cat:hover { color: var(--ink); }
.rd-cat-img { position: relative; display: block; flex: 1; min-height: 0; aspect-ratio: 1 / .85; }
.is-big .rd-cat-img { aspect-ratio: auto; }
.rd-cat-img img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; mix-blend-mode: multiply; transition: transform .3s var(--ease); }
.rd-cat:hover .rd-cat-img img { transform: scale(1.06); }
.rd-cat-txt { display: flex; align-items: center; min-height: 58px; padding: 10px 14px; background: #E9E9E5; font: 600 14px/1.3 var(--serif); transition: background .15s var(--ease); }
.rd-cat:hover .rd-cat-txt { background: var(--orange); }
.is-big .rd-cat-txt { min-height: 66px; padding: 12px 22px; background: var(--orange); color: var(--ink); font-size: clamp(18px, 1.7vw, 23px); }
.is-big .rd-cat:hover .rd-cat-txt { background: var(--amber); color: var(--ink); }
.rd-cat:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
/* All Products: the category tiles on charcoal. Three across when narrower, so 18 tiles leave no gap. */
.section.cat-dir { background: var(--rd-dark); }
.cat-dir .section-head h2 { color: #fff; }
.cat-dir .rd-cat-img { flex: none; }
.cat-dir .rd-cat-txt { flex: 1 0 auto; margin: 0; color: var(--ink); letter-spacing: 0; }
.cat-dir-intro { margin: 0; padding: 10px 14px 14px; font-size: 13.5px; line-height: 1.55; color: var(--muted-strong); }
@media (max-width: 1180px) { .cat-dir .rd-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cat-dir .rd-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Narrower, the double tiles fill a whole row: nothing beside them gives them height, so they need their own. */
@media (max-width: 1180px) {
  .rd-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rd-cat-grid .is-big { grid-row: auto; }
  .is-big .rd-cat-img { aspect-ratio: 1 / .62; }
}
@media (max-width: 620px) {
  .rd-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rd-cat-txt { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-cat-img img { transition: none; }
  .rd-cat:hover .rd-cat-img img { transform: none; }
}
/* Product cards: white on light grey, so the dark About banner below stands apart. */
.rd-products { background: var(--paper); border-top: 1px solid var(--line); }

.rd-ptrack { gap: 14px; }
.rd-ptrack > li { display: flex; flex-basis: calc((100% - 42px) / 4); }
/* min-width: 0, or a long unbroken line in one card widens its slide and pushes the next one out. */
.rd-ptrack > li { min-width: 0; }
.rd-ptrack > li > .rd-pcard { flex: 1; min-width: 0; }
.rd-pcard { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 0 var(--orange); transition: box-shadow .15s var(--ease); }
.rd-pcard:hover { box-shadow: inset 0 -4px 0 0 var(--orange); }
.rd-pcard-img { position: relative; display: block; aspect-ratio: 1 / .78; background: #fff; }
.rd-pcard-img img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; transition: transform .3s var(--ease); }
.rd-pcard:hover .rd-pcard-img img { transform: scale(1.05); }
.rd-pcard-body { display: flex; flex-direction: column; flex: 1; padding: 4px 16px 18px; }
.rd-pcard-cat { margin: 0 0 5px; font: 700 12px/1.3 var(--sans); color: var(--gold-text); }
.rd-pcard h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-size: 15.5px; line-height: 1.35; }
.rd-pcard h3 a { color: var(--ink); }
.rd-pcard h3 a:hover { color: var(--gold-text); }
.rd-pcard-model { overflow: hidden; margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.rd-pcard-price { margin-top: auto; padding-top: 12px; color: var(--ink); }
.rd-pcard-price .price { font: 700 21px/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.rd-pcard-price .pcard-from, .rd-pcard-price .price-tax { font-size: 12px; font-weight: 600; color: var(--muted); }
.rd-pcard-act { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; padding-top: 12px; }
.rd-pcard-act form, .rd-pcard-act form .btn { width: 100%; }
.rd-pcard-act .btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 10px; border-radius: 4px; font-size: 13px; }
.rd-pcard-act .rd-btn-wa { padding: 0; font-size: 19px; }
.pdp-tax { font-size: 14px; font-weight: 600; color: var(--muted); }
@media (max-width: 1180px) { .rd-ptrack > li { flex-basis: calc((100% - 28px) / 3); } }
@media (max-width: 980px) { .rd-ptrack > li { flex-basis: calc((100% - 28px) / 2.4); } }
@media (max-width: 640px) { .rd-ptrack > li { flex-basis: 72%; } }
/* Category sections: dark with a slider, light with a grid, in turn. */
.rd-cs { padding: clamp(56px, 7vw, 88px) 0; background: #fff; }
.rd-cs.is-slider { background: var(--rd-dark); color: rgba(255, 255, 255, .74); }
.rd-cs h2 { margin: 0; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.18; text-wrap: balance; }
.rd-cs.is-slider h2 { color: #fff; }
.rd-cs-label { margin: 0 0 10px; font: 700 15px/1.3 var(--sans); color: var(--gold-text); }
.rd-cs.is-slider .rd-cs-label { color: var(--amber); }
.rd-cs-text { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; }
.rd-cs-copy .btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; }
.rd-cs-copy.is-wide { max-width: 760px; }
.rd-cs-split { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.rd-cs-split.is-rev { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.rd-cs .rd-ptrack > li { flex-basis: calc((100% - 28px) / 3); }
.rd-cs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.rd-cs-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rd-cs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.rd-cs-head > .btn { flex: none; display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 640px) { .rd-cs-head { flex-direction: column; align-items: flex-start; } }
@media (max-width: 1000px) {
  .rd-cs-split, .rd-cs-split.is-rev { grid-template-columns: minmax(0, 1fr); }
  .rd-cs-split.is-rev .rd-cs-copy { order: -1; }
  .rd-cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-cs .rd-ptrack > li { flex-basis: calc((100% - 14px) / 2.2); }
}
@media (max-width: 640px) { .rd-cs .rd-ptrack > li { flex-basis: 76%; } }
@media (max-width: 520px) {
  .rd-cs-grid .rd-pcard-act, .rd-cs-duo .rd-pcard-act { grid-template-columns: minmax(0, 1fr); }
  .rd-cs-grid .rd-pcard-price, .rd-cs-duo .rd-pcard-price { white-space: nowrap; }
  .rd-cs-grid .rd-pcard-price .price, .rd-cs-duo .rd-pcard-price .price { font-size: 17px; }
  .rd-cs-grid .rd-pcard-body, .rd-cs-duo .rd-pcard-body { padding-left: 12px; padding-right: 12px; }
}

/* Industries: heading beside eight tiles. */
.section.rd-ind { padding: clamp(56px, 7vw, 88px) 0; background: var(--paper); }
.rd-ind-in { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.rd-ind h2 { margin: 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.14; }
.rd-ind-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rd-ind-grid li { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 22px; min-height: 148px; padding: 20px 18px; background: #fff; border: 1px solid var(--line); border-radius: 6px; transition: background .15s var(--ease), border-color .15s var(--ease); }
.rd-ind-grid i { color: var(--gold-text); font-size: 28px; transition: color .15s var(--ease); }
.rd-ind-grid h3 { margin: 0; font: 700 15px/1.3 var(--sans); letter-spacing: 0; transition: color .15s var(--ease); }
.rd-ind-grid li:hover { background: var(--rd-dark); border-color: var(--rd-dark); }
.rd-ind-grid li:hover i { color: var(--amber); }
.rd-ind-grid li:hover h3 { color: #fff; }
@media (max-width: 1000px) {
  .rd-ind-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .rd-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rd-ind-grid li { min-height: 124px; padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .rd-ind-grid li, .rd-ind-grid i, .rd-ind-grid h3 { transition: none; } }
/* Long About copy: paragraphs need air between them. */
.rd-prose p + p { margin-top: 12px; }
.rd-prose strong { color: #fff; font-weight: 700; }

/* Footer: delivery cities */
/* Two rows of city names drifting in opposite directions; hover pauses a row. The time follows
   the number of names, so every row moves at the same speed. */
.rd-foot-cities { position: relative; z-index: 1; padding: 40px 0 34px; border-top: 1px solid rgba(255, 255, 255, .08); }
.rd-foot-cities h3 { margin: 0 0 22px; text-align: center; font-size: 26px; color: #fff; }
.fc-row { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.fc-track { display: flex; gap: 14px; width: max-content; animation: fcSlide calc(var(--n, 20) * 3s) linear infinite; }
.fc-reverse .fc-track { animation-direction: reverse; }
.fc-row:hover .fc-track { animation-play-state: paused; }
@keyframes fcSlide { to { transform: translateX(calc(-50% - 7px)); } }
.fc-track span { display: inline-flex; align-items: center; gap: 10px; padding: 11px 24px; white-space: nowrap; font-size: 17px; line-height: 1.2; color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.fc-track span i { color: var(--amber); font-size: 15px; transition: color .3s ease; }
.fc-track span:hover { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.fc-track span:hover i { color: var(--ink); }
@media (max-width: 767px) {
  .rd-foot-cities h3 { font-size: 20px; }
  .fc-track span { padding: 9px 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-row { -webkit-mask-image: none; mask-image: none; }
  .fc-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .fc-track span[aria-hidden] { display: none; }
}

/* About: charcoal band with the words beside the video and three facts beneath, then the mission beside the reasons to buy. */
.rd-about-band { background: var(--rd-dark); padding: clamp(52px, 6vw, 80px) 0 clamp(36px, 4vw, 48px); }
.rd-about-facts { list-style: none; margin: clamp(36px, 4vw, 52px) 0 0; padding: 26px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 32px; border-top: 1px solid rgba(255, 255, 255, .14); }
.rd-about-facts b { display: block; color: #fff; font: 700 clamp(21px, 2.2vw, 28px)/1.2 var(--serif); }
.rd-about-facts span { display: block; margin-top: 4px; color: var(--amber); font-size: 14px; font-weight: 600; }
.rd-about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.rd-about-copy { color: rgba(255, 255, 255, .8); }
.rd-video, .rd-video-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.rd-video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rd-video-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--orange); color: var(--ink); font-size: 24px; transition: transform .15s var(--ease), background .15s var(--ease); }
.rd-video-play i { margin-left: 4px; }
.rd-video:hover .rd-video-play { background: var(--amber); transform: scale(1.08); }
.rd-video:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.rd-about-label { margin: 0 0 12px; font: 700 15px/1.3 var(--sans); color: var(--amber); }
/* #about: store.css still carries the old home's "#about h2 { text-wrap: nowrap }". */
#about .rd-about-copy h2 { color: #fff; font-size: clamp(27px, 3.1vw, 42px); line-height: 1.16; margin: 0 0 20px; text-wrap: balance; }
.rd-prose p { font-size: 16.5px; line-height: 1.75; margin: 0; text-align: justify; }
.rd-about-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Mission on a charcoal panel beside the reasons, which are cards like the services below. */
.rd-about-sheet-bg { background: var(--paper); }
.rd-about-sheet { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); align-items: stretch; }
.rd-mission { display: flex; align-items: center; margin: 0; padding: clamp(28px, 3.6vw, 48px); background: var(--rd-dark); border-left: 4px solid var(--orange); color: #fff; font: 600 clamp(20px, 2vw, 27px)/1.42 var(--serif); letter-spacing: -.01em; }
.rd-whyus { display: flex; flex-direction: column; }
.rd-whyus .rd-why { flex: 1; grid-auto-rows: 1fr; }
.rd-whyus h3 { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 8px; }
.rd-whyus p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: var(--muted-strong); }
.rd-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
/* Two to a row; an odd list ends on a row of three, so no card is left on its own. */
.rd-why li { grid-column: span 3; display: flex; align-items: center; gap: 12px; padding: 12px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.rd-why li:first-child:nth-last-child(odd) ~ li:nth-last-child(-n+3) { grid-column: span 2; }
.rd-why i { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--rd-dark); color: var(--amber); font-size: 13px; }
@media (max-width: 900px) {
  .rd-about-sheet, .rd-about-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-about-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rd-why { grid-template-columns: minmax(0, 1fr); }
  .rd-why li, .rd-why li:first-child:nth-last-child(odd) ~ li:nth-last-child(-n+3) { grid-column: auto; }
}
/* Home services: four white cards on charcoal. The Services page keeps .rd-services below. */
.section.rd-hsvc { padding: clamp(56px, 7vw, 88px) 0; background: var(--rd-dark); color: rgba(255, 255, 255, .72); }
.rd-hsvc h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; margin: 0; color: #fff; }
.rd-hsvc .rd-lede { color: rgba(255, 255, 255, .72); }
.rd-hsvc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.rd-hsvc-card { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 24px; background: #fff; border-radius: 6px; box-shadow: 0 10px 26px rgba(22, 24, 27, .16); transition: transform .15s var(--ease); }
.rd-hsvc-card:hover { transform: translateY(-3px); }
.rd-hsvc-ic { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 50%; background: var(--rd-dark); color: var(--amber); font-size: 22px; }
.rd-hsvc-card h3 { margin: 0 0 10px; font-size: 18.5px; line-height: 1.25; }
.rd-hsvc-card p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--muted-strong); }
.rd-hsvc-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 800; font-size: 14px; color: var(--gold-text); }
.rd-hsvc-go:hover { color: var(--ink); }
.rd-hsvc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.rd-hsvc-head > .rd-more { flex: none; color: #fff; }
.rd-hsvc-head > .rd-more:hover { color: var(--amber); }
@media (max-width: 640px) {
  .rd-hsvc-head { flex-direction: column; align-items: flex-start; }
  .rd-hsvc-head > .rd-more { flex: none; max-width: 100%; white-space: normal; }
}
@media (max-width: 1100px) { .rd-hsvc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rd-hsvc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .rd-hsvc-card { transition: none; } .rd-hsvc-card:hover { transform: none; } }

/* Services: dark */
.rd-services { background: var(--rd-dark); color: rgba(255, 255, 255, .72); position: relative; overflow: hidden; }
.rd-services .wrap { position: relative; }
.rd-services h2 { color: #fff; }
.rd-services .rd-eyebrow { color: var(--amber); }
.rd-services .rd-lede { color: rgba(255, 255, 255, .66); }
/* One row a service: icon and name on the left, the full text on the right. */
.rd-services .rd-hsvc-head { align-items: center; margin-bottom: clamp(24px, 3vw, 36px); }
.rd-services .rd-hsvc-head h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; }
.rd-svc-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.rd-svc-rows > li { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px clamp(32px, 5vw, 72px); align-items: start; padding: clamp(24px, 3vw, 34px) 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.rd-svc-name { display: flex; align-items: center; gap: 16px; }
.rd-svc-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; background: var(--orange); color: var(--ink); font-size: 20px; }
.rd-svc-name h3 { margin: 0; color: #fff; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25; }
.rd-svc-rows p { margin: 0; max-width: 72ch; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .78); }
@media (max-width: 760px) { .rd-svc-rows > li { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .rd-services .rd-hsvc-head { align-items: flex-start; } }

/* Services page */
.rd-svc-intro-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.rd-svc-intro h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; margin: 0 0 14px; }
.rd-svc-intro h3 { font-size: 21px; margin: 28px 0 10px; }
.rd-svc-intro p { line-height: 1.75; margin: 0; }
.rd-svc-intro img { width: 100%; height: auto; display: block; }
.rd-svc-intro figure { margin: 0; }
@media (max-width: 860px) { .rd-svc-intro-in { grid-template-columns: 1fr; } }

/* Social profiles: dark band, one large card each; a card takes its network's colour on hover. */
.rd-social { background: var(--rd-dark); padding: clamp(44px, 5vw, 64px) 0; }
.rd-social h2 { margin: 0 0 22px; color: #fff; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }
.rd-social ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.rd-social-card { display: flex; align-items: center; gap: 18px; height: 100%; padding: 22px 24px; background: var(--rd-dark-2); border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; color: #fff; transition: background .15s var(--ease), border-color .15s var(--ease); }
.rd-social-card:hover, .rd-social-card:focus-visible { color: #fff; border-color: transparent; }
.rd-social-card > i { flex: none; width: 36px; color: var(--amber); font-size: 30px; text-align: center; transition: color .15s var(--ease); }
.rd-social-card:hover > i, .rd-social-card:focus-visible > i { color: #fff; }
.rd-social-card b { display: block; font: 700 18px/1.25 var(--serif); }
.rd-social-card small { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.rd-social-card:hover small, .rd-social-card:focus-visible small { color: #fff; }
.rd-social-card.is-facebook:hover, .rd-social-card.is-facebook:focus-visible { background: #1877F2; }
.rd-social-card.is-youtube:hover, .rd-social-card.is-youtube:focus-visible { background: #D00000; }
.rd-social-card.is-instagram:hover, .rd-social-card.is-instagram:focus-visible { background: linear-gradient(45deg, #C13584, #C2185B 50%, #B5451F); }
.rd-social-card.is-linkedin:hover, .rd-social-card.is-linkedin:focus-visible { background: #0A66C2; }
.rd-social-card:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rd-social:where(.rd-services ~ *, .rd-contact-map ~ *) { background: var(--paper); }
.rd-social:where(.rd-services ~ *, .rd-contact-map ~ *) h2 { color: var(--ink); }
:where(.rd-services ~ .rd-social, .rd-contact-map ~ .rd-social) .rd-social-card { background: #fff; border-color: var(--line); color: var(--ink); }
:where(.rd-services ~ .rd-social, .rd-contact-map ~ .rd-social) .rd-social-card > i { color: var(--gold-text); }
:where(.rd-services ~ .rd-social, .rd-contact-map ~ .rd-social) .rd-social-card small { color: var(--muted-strong); }
:where(.rd-services ~ .rd-social, .rd-contact-map ~ .rd-social) .rd-social-card:focus-visible { outline-color: var(--ink); }

/* Product page: the model line and the heading above the points */
.pdp-model { margin: 0 0 12px; font-size: 15px; color: var(--ink); }
.pdp-points-h { margin: 16px 0 8px; font: 700 15px/1.3 var(--sans); color: var(--ink); }

.mega-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.why-head .rd-why-band-p { color: rgba(255, 255, 255, .72); max-width: 70ch; line-height: 1.65; margin: 10px 0 0; }
.foot-reach-txt a { display: block; }

/* Category page: the band's button, then FAQ and links to the other ranges. */
/* Inner-page subheader: the main site's photo, darkened most behind the text on the left. */
.phero { background: var(--ink-deep) url(../img/rudra-subheader.jpg) center / cover no-repeat; }
.phero::before { background: linear-gradient(90deg, rgba(22, 24, 27, .66), rgba(22, 24, 27, .46) 48%, rgba(22, 24, 27, .16)); }
@media (max-width: 860px) { .phero::before { background: rgba(22, 24, 27, .58); } }
.phero-split .phero-aside { display: flex; justify-content: flex-end; align-self: end; }
.phero-aside .rd-btn-gold { display: inline-flex; align-items: center; gap: 8px; }
.section.rd-cat-faq { padding: clamp(48px, 6vw, 72px) 0; }
.rd-cat-faq h2 { margin: 0 0 20px; font-size: clamp(24px, 2.6vw, 32px); }
@media (max-width: 860px) { .phero-split .phero-aside { justify-content: flex-start; } }

/* Stats (only rendered once the owner supplies numbers) */
.rd-stats { background: var(--orange); color: var(--ink); padding: 34px 0; }
.rd-stats-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; text-align: center; }
.rd-stat b { display: block; font: 700 clamp(28px, 3.4vw, 40px)/1.1 var(--serif); }
.rd-stat span { font-weight: 700; font-size: 13.5px; letter-spacing: .04em; }

/* Clients marquee */
.rd-clients { overflow: hidden; }
.rd-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rd-marquee-track { display: flex; width: max-content; animation: rd-marquee 40s linear infinite; }
.rd-marquee:hover .rd-marquee-track { animation-play-state: paused; }
.rd-logos { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; padding-right: 18px; }
.rd-logos li { display: grid; place-items: center; width: 180px; height: 104px; padding: 16px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.rd-logos img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .25s var(--ease), opacity .25s var(--ease); }
.rd-logos li:hover img { filter: none; opacity: 1; }
@keyframes rd-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rd-marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .rd-logos[aria-hidden="true"] { display: none; }
  .rd-logos { flex-wrap: wrap; justify-content: center; }
}

/* Blog */
.rd-blog { background: var(--paper); }
.rd-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .rd-blog-grid { grid-template-columns: 1fr; } }
.rd-post { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.rd-post-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tint); }
.rd-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.rd-post:hover .rd-post-img img { transform: scale(1.04); }
.rd-post-body { padding: 20px; }
.rd-post time { font-size: 12.5px; font-weight: 700; color: var(--gold-text); letter-spacing: .04em; }
.rd-post h3 { font-size: 17px; line-height: 1.4; margin: 8px 0 8px; }
.rd-post h3 a { color: var(--ink); }
.rd-post h3 a:hover { color: var(--gold-text); }
.rd-post p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted-strong); }

/* FAQ */
.rd-faq-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; }
.rd-faq h2 { font-size: clamp(26px, 3vw, 36px); }
@media (max-width: 860px) { .rd-faq-in { grid-template-columns: 1fr; } }

/* Enquiry */
.rd-enquire { background: linear-gradient(180deg, var(--white) 0 50%, var(--paper) 50%); }
.rd-enquire-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); background: var(--rd-dark); border-radius: calc(var(--radius-lg) + 4px); overflow: hidden; box-shadow: var(--shadow-lg); }
.rd-enquire-info { padding: clamp(28px, 4vw, 52px); color: rgba(255, 255, 255, .72); }
.rd-enquire-info h2 { color: #fff; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; margin: 0; }
.rd-enquire-info .rd-eyebrow { color: var(--amber); }
.rd-enquire-info .rd-lede { color: rgba(255, 255, 255, .66); }
.rd-reach { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.rd-reach li { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; }
.rd-reach li > span { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius); background: rgba(168, 139, 74, .16); color: var(--amber); }
.rd-reach small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin-bottom: 2px; }
.rd-reach a { display: block; color: #fff; font-weight: 700; }
.rd-reach a:hover { color: var(--amber); }
.rd-enquire-form { background: #fff; padding: clamp(24px, 4vw, 48px); }
/* The shared form draws its own card; inside this white panel that is a box in a box. */
.rd-enquire-form .enq-form { border: 0; box-shadow: none; padding: 0; background: none; }
.rd-enquire-form .enq-form .btn-primary { background: var(--orange); color: var(--ink); width: 100%; justify-content: center; }
@media (max-width: 900px) { .rd-enquire-in { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .rd-pcard-img img, .rd-post-img img { transition: none; }
}

/* Footer: bronze call to action, then brand, products, company and contact. */
.foot { padding-top: 0; }
.rd-foot-cta { position: relative; z-index: 1; background: var(--orange); }
.rd-foot-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 26px; padding-bottom: 26px; }
.rd-foot-cta p { margin: 0; color: var(--ink); font: 700 clamp(22px, 2.4vw, 30px)/1.2 var(--serif); letter-spacing: -.01em; }
.rd-foot-cta-in > div { display: flex; flex-wrap: wrap; gap: 10px; }
.rd-foot-cta .btn { display: inline-flex; align-items: center; gap: 8px; }
.rd-foot-cta .rd-btn-dark { color: #fff; }
.rd-foot-cta .rd-btn-line-dark { border-color: var(--ink); color: var(--ink); }
.foot > .foot-grid { position: relative; z-index: 1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px 56px; padding-top: clamp(44px, 5vw, 64px); border-top: 0; }
.rd-foot-brand p { margin: 18px 0; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .68); }
.rd-foot-brand p a { color: var(--amber); font-weight: 700; }
/* The logo file has 16% blank space on its left; pull it back so the mark lines up with the text. */
.rd-foot-brand .foot-brand-logo img { display: block; height: 58px; width: auto; margin-left: -34px; }
.rd-foot-brand .foot-social { display: flex; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; }
.rd-foot-reach { position: relative; z-index: 1; background: var(--rd-dark-2); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.rd-foot-reach-in { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1.35fr); }
.rd-foot-reach-in > li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 26px 24px; border-left: 1px solid rgba(255, 255, 255, .08); }
.rd-foot-reach-in > li:first-child { padding-left: 0; border-left: 0; }
.rd-foot-reach-in > li:last-child { padding-right: 0; }
.rd-foot-reach-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--orange); color: var(--ink); font-size: 18px; }
.rd-foot-reach-in > li > div { min-width: 0; }
.rd-foot-reach-h { display: block; margin-bottom: 4px; font-size: 13px; color: rgba(255, 255, 255, .58); }
.rd-foot-reach-in a { display: block; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.rd-foot-reach-in address { font-style: normal; color: rgba(255, 255, 255, .82); font-size: 14px; line-height: 1.6; }
.rd-foot-base { position: relative; z-index: 1; display: block; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid rgba(255, 255, 255, .08); }
.rd-foot-links { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; }
.rd-foot-links a { color: rgba(255, 255, 255, .78); }
@media (max-width: 1100px) {
  .rd-foot-reach-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-foot-reach-in > li { padding: 20px 24px; }
  .rd-foot-reach-in > li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .rd-foot-reach-in > li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .08); }
}
@media (max-width: 1100px) and (min-width: 561px) {
  .foot > .foot-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .foot > .foot-grid > .rd-foot-brand { grid-column: 1 / -1; }
  .foot > .foot-grid > .foot-col-cats { grid-column: auto; }
}
@media (max-width: 560px) {
  .rd-foot-brand { margin-bottom: 18px; }
  .rd-foot-reach-in { grid-template-columns: minmax(0, 1fr); }
  .rd-foot-reach-in > li, .rd-foot-reach-in > li:nth-child(odd) { padding: 16px 0; border-left: 0; }
  .rd-foot-reach-in > li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
  .foot > .foot-grid, .foot > .foot-grid.is-acc { padding-top: 36px; }
  .rd-foot-cta-in > div, .rd-foot-cta .btn { width: 100%; justify-content: center; }
}


/* Responsive fixes. A spec table wider than a phone scrolls inside its own box instead of being
   cut off; a long email address wraps; the header row still fits a 320px phone. */
.pdp-panel table, .post-body table, .prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rd-reach li > div { min-width: 0; }
.rd-reach a { overflow-wrap: anywhere; }
@media (max-width: 359px) {
  .brand-logo, .head.is-compact .brand-logo { height: 32px; }
  .head-in { gap: 4px; }
  .head-actions { gap: 0; }
  .rd-quote-m, .burger { width: 38px; height: 38px; }
}
/* The banners carry their words in the picture; below this width the arrows sit on those words.
   Dots and swipe still work. */
@media (max-width: 1199px) { .rd-slider .sj-slider-btn { display: none; } }

/* ===== Motion. Everything below stops for visitors who ask for reduced motion (end of block). ===== */

/* Hand Pallet Truck: the handle pumps three times, the load rises in three steps, rests, lowers. */
.rd-truck { display: block; width: 100%; height: clamp(190px, 18vw, 250px); padding: 18px 22px 0; }
.t-floor { stroke: var(--line-strong); stroke-width: 3; }
.t-link { stroke: var(--steel); stroke-width: 7; fill: none; }
.t-wheel { fill: var(--steel); }
.t-hub { fill: #E4E2DA; }
.t-fork { fill: #E5AE1F; }
.t-pump { fill: #5B6068; }
.t-bar { stroke: var(--rd-dark); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.t-box { fill: #C49A63; }
.t-box2 { fill: #B58B55; }
.t-tape { fill: #E2CDA6; }
.t-pallet { fill: #7A5A36; }
.t-lift { animation: rd-lift 7s ease-in-out infinite; }
.t-handle { transform-origin: 156px 118px; animation: rd-pump 7s ease-in-out infinite; }
@keyframes rd-lift {
  0%, 6% { transform: translateY(0); }
  14%, 20% { transform: translateY(-6px); }
  28%, 34% { transform: translateY(-12px); }
  42%, 72% { transform: translateY(-18px); }
  88%, 100% { transform: translateY(0); }
}
@keyframes rd-pump {
  0%, 44%, 100% { transform: rotate(0); }
  8%, 22%, 36% { transform: rotate(-16deg); }
  15%, 29% { transform: rotate(0); }
}

/* Home intro, in turn. */
.rd-anim .rd-intro-copy h1, .rd-anim .rd-intro-cta, .rd-anim .rd-intro-plate, .rd-anim .rd-feature { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.rd-anim .rd-intro-plate { transform: translateX(26px); }
.rd-anim.is-in .rd-intro-copy h1, .rd-anim.is-in .rd-intro-cta, .rd-anim.is-in .rd-intro-plate, .rd-anim.is-in .rd-feature { opacity: 1; transform: none; }
.rd-anim .rd-intro-plate { transition-delay: .1s; }
.rd-anim .rd-intro-cta { transition-delay: .18s; }
.rd-anim .rd-feature:nth-child(1) { transition-delay: .28s; }
.rd-anim .rd-feature:nth-child(2) { transition-delay: .38s; }
.rd-anim .rd-feature:nth-child(3) { transition-delay: .48s; }

/* About page: story and video, facts, mission panel, reasons, clients. */
.rd-abt-story-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.rd-abt-facts { background: var(--rd-dark); padding: clamp(28px, 3.5vw, 40px) 0; }
.rd-abt-facts .rd-about-facts { margin: 0; padding: 0; border: 0; }
.rd-abt-sheet { align-items: center; }
.rd-abt-mission { align-self: stretch; padding: clamp(28px, 3.6vw, 48px); background: var(--rd-dark); border-left: 4px solid var(--orange); color: rgba(255, 255, 255, .78); }
.rd-abt-mission h2 { margin: 0 0 16px; color: var(--amber); font: 700 15px/1.3 var(--sans); letter-spacing: 0; }
.rd-abt-mission blockquote { margin: 0 0 16px; padding: 0; border: 0; background: none; }
.rd-abt-mission blockquote p { margin: 0; color: #fff; font: 600 clamp(20px, 2vw, 27px)/1.42 var(--serif); letter-spacing: -.01em; }
.rd-abt-mission > p { margin: 0; font-size: 15px; line-height: 1.65; }
.rd-abt-more p:last-child { margin-bottom: 0; }
/* The larger first paragraph is for the story above; here both paragraphs are equals. */
.rd-abt-more > p, .rd-abt-more > p:first-of-type { font-size: 16px; line-height: 1.75; color: var(--muted-strong); }
.section.rd-abt-why { background: var(--rd-dark); }
.rd-abt-why h2 { margin: 0; color: #fff; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; }
.rd-abt-why .why-head { align-items: flex-end; margin-bottom: 28px; }
@media (min-width: 1001px) {
  /* Four cards, then the last three wider, when the list is odd. */
  .rd-abt-why .rd-why { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .rd-abt-why .rd-why li { grid-column: span 3; }
  .rd-abt-why .rd-why li:first-child:nth-last-child(odd) ~ li:nth-last-child(-n+3) { grid-column: span 4; }
}
@media (max-width: 900px) {
  .rd-abt-story-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rd-abt-why .why-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Contact page: charcoal panel beside a white form, then the map across the page. */
.section.rd-contact { background: var(--paper); }
.rd-contact-box { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; }
.rd-contact-info { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(14px, 2vw, 22px) clamp(24px, 3vw, 40px); background: var(--rd-dark); border-left: 4px solid var(--orange); }
.rd-way { display: flex; align-items: flex-start; gap: 16px; padding: clamp(20px, 2.4vw, 28px) 0; }
.rd-way + .rd-way { border-top: 1px solid rgba(255, 255, 255, .14); }
.rd-way > div { min-width: 0; }
.rd-way-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: var(--orange); color: var(--ink); font-size: 18px; }
.rd-way-lbl { margin: 0 0 6px; color: var(--amber); font-size: 14px; font-weight: 700; }
.rd-way-val { display: block; margin: 0; color: #fff; font: 700 clamp(16px, 1.4vw, 18px)/1.5 var(--sans); overflow-wrap: anywhere; }
a.rd-way-val:hover { color: var(--amber); }
.rd-way-note { margin: 6px 0 14px; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.6; }
.rd-way .btn { box-shadow: none; }
.rd-way .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.rd-contact-form h2 { margin: 0 0 10px; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; }
.rd-contact-form .contact-intro { margin: 0 0 22px; }
.rd-contact-map { height: clamp(320px, 34vw, 460px); background: var(--line); }
.rd-contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .rd-contact-box { grid-template-columns: minmax(0, 1fr); } }

/* Policy pages: the text on a white card beside a dark sticky menu. */
.section.policy-section { background: var(--paper); }
.policy-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 3vw, 40px); }
.policy-body { max-width: none; padding: clamp(24px, 3.6vw, 48px); background: #fff; border: 1px solid var(--line); }
.policy-body h2, .policy-body h3 { position: relative; padding: 2px 0 2px 20px; color: var(--ink); line-height: 1.28; }
.policy-body h2 { margin: 0 0 18px; font-size: clamp(22px, 2.2vw, 28px); }
.policy-body h3 { margin: 32px 0 12px; font-size: clamp(19px, 1.7vw, 22px); }
.policy-body h2::before, .policy-body h3::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--orange); }
.policy-body h2::after, .policy-body h3::after { display: none; }
.policy-body p, .policy-body li { font-size: 16px; line-height: 1.75; }
.policy-body ul { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 12px; }
.policy-body > p:empty { display: none; }
/* Margin, not a list gap: the imported refund text has list items with no list around them. */
.policy-body li { position: relative; margin: 0 0 12px; padding-left: 34px; list-style: none; }
.policy-body li::before { content: "\f00c"; position: absolute; top: 3px; left: 0; display: grid; place-items: center; width: 22px; height: 22px; background: var(--rd-dark); color: #fff; font: 900 11px/1 "Font Awesome 6 Free"; }
.policy-body li::marker { content: ""; }
.policy-note { display: block; margin-top: 24px; padding: 18px 20px; background: linear-gradient(135deg, #FAF7EF, #F5F0E3); border: 1px solid #E8E0CC; border-top: 4px solid var(--orange); color: var(--ink); font-weight: 700; line-height: 1.65; }
.policy-stamp { margin-top: 32px; }
.policy-side { top: 120px; gap: 0; padding: 22px; background: var(--rd-dark); border-top: 4px solid var(--orange); }
.policy-side-h { margin: 0 0 12px; color: var(--amber); font-size: 13px; letter-spacing: .05em; }
.policy-nav { margin: 0; gap: 0; }
.policy-nav a { padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .82); font-size: 15px; background: none; }
.policy-nav a:hover { background: none; color: var(--amber); }
.policy-nav a.is-on { padding-left: 12px; background: none; border-left: 3px solid var(--orange); color: #fff; font-weight: 700; box-shadow: none; }
.policy-ask { margin-top: 20px; padding: 0; background: none; border: 0; }
.policy-ask-h { color: #fff; font: 700 18px/1.3 var(--serif); }
.policy-ask p { color: rgba(255, 255, 255, .72); }
.policy-ask-tel { color: #fff; }
.policy-ask-tel:hover { color: var(--amber); }
.policy-ask-tel i { color: var(--amber); }
.policy-ask-link { color: var(--amber); }
.policy-ask-link:hover { color: #fff; }
@media (max-width: 900px) {
  .policy-layout { grid-template-columns: minmax(0, 1fr); }
  .policy-side { position: static; padding-top: 22px; border-top: 4px solid var(--orange); }
}

/* Blog cards: the date as a badge on the picture. */
.bcard-img { position: relative; }
.bcard-img .bcard-meta { position: absolute; z-index: 1; top: 12px; left: 12px; display: block; padding: 5px 10px; background: var(--orange); color: var(--ink); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; line-height: 1.3; text-transform: uppercase; }

/* Article: contents and quote on the left, the article on the right, as on the main site. */
.section.post { background: #fff; }
.post-lay { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 4vw, 52px); align-items: start; }
.post-side { grid-column: 1; grid-row: 1; }
.post-main { grid-column: 2; grid-row: 1; padding: 0; border: 0; box-shadow: none; background: none; }
.post-toc-inline { display: none; }
.post-toc { padding: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 26px rgba(22, 24, 27, .07); }
.post-toc-h { margin: 0 0 8px; padding-bottom: 12px; border-bottom: 2px solid var(--orange); font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.post-toc ol { max-height: min(50vh, 440px); overflow-y: auto; scrollbar-width: thin; }
.post-toc li.lvl-3 { counter-increment: toc; }
.post-toc li.lvl-3 a { padding-left: 0; font-size: 14px; }
.post-toc li.lvl-3 a::before { content: counter(toc, decimal-leading-zero); width: auto; }
.post-toc a { font-size: 14px; line-height: 1.4; color: var(--muted-strong); }
.post-toc a::before { color: var(--gold-text); font-size: 12px; font-weight: 700; }
.post-toc a:hover, .post-toc a.is-on { color: var(--ink); }
.post-quote { margin-top: 16px; padding: 20px 18px; background: var(--rd-dark); border-top: 4px solid var(--orange); }
.post-quote-t { margin: 0 0 4px; color: #fff; font: 700 19px/1.3 var(--serif); }
.post-quote-p { margin: 0 0 14px; color: rgba(255, 255, 255, .72); font-size: 13.5px; line-height: 1.5; }
.post-quote .btn { width: 100%; justify-content: center; }
.post-quote .btn + .btn { margin-top: 8px; }
.post-cover { margin: 0 0 34px; box-shadow: 0 14px 40px rgba(22, 24, 27, .14); }
.post-key { margin: 0 0 36px; padding: clamp(22px, 2.6vw, 32px); background: linear-gradient(135deg, #FAF7EF, #F5F0E3); border: 1px solid #E8E0CC; border-top: 5px solid var(--orange); }
.post-key .post-key-h { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--ink); font: 700 clamp(20px, 2vw, 24px)/1.25 var(--serif); letter-spacing: 0; text-transform: none; }
.post-key-h i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; background: var(--orange); color: #fff; font-size: 14px; }
.post-key ul { gap: 12px; }
.post-key li { padding-left: 34px; color: var(--ink); font-size: 16px; line-height: 1.65; }
.post-key li::before { content: "\f00c"; top: 2px; display: grid; place-items: center; width: 22px; height: 22px; background: var(--rd-dark); color: #fff; font: 900 11px/1 "Font Awesome 6 Free"; }
.post-body h2, .post-body h3, .post-faq > h3 { position: relative; margin-top: 38px; margin-bottom: 14px; padding: 2px 0 2px 20px; color: var(--ink); font-size: clamp(21px, 2vw, 26px); line-height: 1.28; }
.post-body h2::before, .post-body h3::before, .post-faq > h3::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--orange); }
.post-body h2::after, .post-body h3::after { display: none; }
.post-body > div:first-child > p:first-child { margin-top: 0; }
.post-body a { color: var(--gold-text); font-weight: 600; text-decoration: underline; }
.post-faq { margin-top: 38px; padding: 0; border: 0; }
.post-faq .pdp-faqs { display: grid; gap: 14px; border: 0; overflow: visible; }
.post-faq .pdp-faq summary i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--orange); font-size: 11px; }
.post-faq .pdp-faq[open] summary i { transform: none; }
.post-faq .pdp-faq[open] summary i::before { content: "\f068"; }
.post-faq .pdp-faq { background: #fff; border: 1px solid var(--line); box-shadow: 0 3px 12px rgba(22, 24, 27, .04); }
.post-faq .pdp-faq summary { padding: 16px 20px; color: var(--ink); font-size: 16px; font-weight: 700; }
.post-faq .pdp-faq summary i { color: var(--gold-text); }
.post-faq .pdp-faq-a { padding: 0 20px 18px; font-size: 15.5px; line-height: 1.7; }
.section.rd-post-rel { background: var(--rd-dark); }
.rd-post-rel h2 { margin: 0 0 28px; color: #fff; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; text-align: center; }
.rd-post-rel .bcard { background: var(--rd-dark-2); border-color: rgba(255, 255, 255, .1); }
.rd-post-rel .bcard:hover { border-color: var(--orange); }
.rd-post-rel .bcard-body { background: none; }
.rd-post-rel .bcard-title { color: #fff; }
.rd-post-rel .bcard-go { border-color: rgba(255, 255, 255, .14); color: var(--amber); }
.rd-post-rel .bcard-go i { color: var(--amber); }
.rd-post-rel .bcard:hover .bcard-go, .rd-post-rel .bcard:hover .bcard-go i { color: #fff; }
@media (max-width: 1000px) {
  /* A phone reads the article first; the contents fold up above it and the quote box follows it. */
  .post-lay { grid-template-columns: minmax(0, 1fr); }
  .post-main, .post-side { grid-column: 1; grid-row: auto; }
  .post-side { display: block; position: static; }
  .post-side .post-toc { display: none; }
  .post-quote { margin-top: 0; }
  .post-toc-inline { display: block; }
}

/* Blog: category tabs beside a search box, then white cards on off-white. */
.blog-h2 { margin: 0 0 24px; font-size: clamp(26px, 3vw, 38px); line-height: 1.18; }
.blog-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); align-items: start; gap: 18px 32px; }
.blog-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tabs .btn { padding: 9px 14px; font-size: 13px; white-space: nowrap; }
.blog-search { display: flex; background: #fff; border: 1px solid var(--line-strong); }
.blog-search input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); }
.blog-search input::placeholder { font-size: 14px; }
.blog-search input:focus { outline: none; }
.blog-search:focus-within { border-color: var(--ink); }
.blog-search button { flex: none; width: 46px; border: 0; background: var(--rd-dark); color: #fff; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); }
.blog-search button:hover, .blog-search button:focus-visible { background: var(--amber); color: var(--ink); }
@media (max-width: 760px) {
  /* Search first; the tabs stay on one line and slide sideways rather than filling a phone. */
  .blog-bar { grid-template-columns: minmax(0, 1fr); }
  .blog-search { order: -1; }
  .blog-tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .blog-tabs::-webkit-scrollbar { display: none; }
  .blog-tabs .btn { flex: none; }
}
.section.blog-index { background: var(--paper); }
.bcard { background: #fff; border: 1px solid var(--line); box-shadow: none; }
.bcard:hover { border-color: var(--orange); box-shadow: none; }
.bcard-body { background: #fff; }
.bcard-body::before { display: none; }
.bcard-meta { color: var(--gold-text); }
.bcard-title { color: var(--ink); }
.bcard-ex { color: var(--muted-strong); }
.bcard-go { color: var(--ink); border-color: var(--line); }
.bcard-go i { color: var(--gold-text); }
.bcard:hover .bcard-go, .bcard:hover .bcard-go i { color: var(--gold-text); }

/* Product page, new layout (.pdp-pro): gallery beside name and buy box, a strip of main figures,
   then the words and the table in two columns. */
.pdp-title { margin: 0 0 12px; color: var(--ink); font: 700 clamp(24px, 2.5vw, 32px)/1.22 var(--serif); letter-spacing: -.02em; }
.pdp-pro .pdp-lay { max-width: var(--wrap); margin-inline: auto; padding-inline: 28px; }
@media (max-width: 640px) { .pdp-pro .pdp-lay { padding-inline: 16px; } }
@media (min-width: 981px) {
  .pdp-pro .pdp-lay { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px clamp(32px, 4vw, 56px); }
  .pdp-pro .pdp-gallery { grid-column: 1; grid-row: 1 / span 2; }
  .pdp-pro .pdp-info { grid-column: 2; grid-row: 1; }
  .pdp-pro .pdp-buy { position: static; grid-column: 2; grid-row: 2; }
}
.rd-pdp-keys { background: var(--rd-dark); padding: clamp(24px, 3vw, 36px) 0; }
.rd-pdp-keys ul { list-style: none; margin-top: 0; margin-bottom: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px 32px; }
.rd-pdp-keys b { display: block; color: #fff; font: 700 clamp(20px, 2.1vw, 28px)/1.2 var(--serif); }
.rd-pdp-keys span { display: block; margin-top: 4px; color: var(--amber); font-size: 14px; font-weight: 600; }
.section.rd-pdp-about { background: var(--paper); }
.rd-pdp-about h2 { margin: 0 0 16px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
.rd-pdp-copy { max-width: 80ch; }
.rd-pdp-copy.is-two { max-width: none; columns: 2; column-gap: clamp(32px, 4vw, 56px); }
.rd-pdp-copy p { break-inside: avoid; margin: 0 0 14px; font-size: 16px; line-height: 1.75; }
.rd-pdp-about .rd-pdp-spec-h { margin-top: clamp(28px, 3vw, 40px); }
.rd-pdp-spec-h3 { margin: 0 0 14px; font-size: 20px; line-height: 1.3; }
/* A further table in the description (a load chart): full width, with the same look. */
.rd-pdp-after { max-width: none; margin-top: clamp(24px, 3vw, 36px); }
.rd-pdp-wide { margin-top: 0; }
.rd-pdp-after > p:empty { display: none; }
@media (min-width: 761px) { .rd-pdp-after table { display: table; } }
.rd-pdp-after tr:first-child > th { background: var(--rd-dark); border-color: var(--rd-dark); color: #fff; font-weight: 700; }
.rd-pdp-after table { width: 100%; margin: 0; border-collapse: collapse; background: #fff; border: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.rd-pdp-after th, .rd-pdp-after td { padding: 11px 16px; border: 1px solid var(--line); background: none; color: var(--ink); text-align: left; }
.rd-pdp-after thead th { background: var(--rd-dark); border-color: var(--rd-dark); color: #fff; font-weight: 700; }
.rd-pdp-after tbody tr:nth-child(even) { background: var(--paper); }
.rd-pdp-after tbody td:first-child { font-weight: 700; }
/* A chart whose heading row is one long title has its column names in the first body row. */
.rd-pdp-after table:has(thead th[colspan]) tbody tr:first-child td { font-weight: 700; }
.rd-pdp-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 32px); align-items: start; }
.section.rd-pdp-video { padding: clamp(36px, 4vw, 56px) 0; background: var(--rd-dark); }
.rd-pdp-video h2 { margin: 0 0 18px; color: #fff; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; text-align: center; }
.rd-pdp-video-list { display: grid; gap: 18px; max-width: 620px; margin-inline: auto; }
.rd-spec { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.rd-spec th, .rd-spec td { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.rd-spec thead th { background: var(--rd-dark); border-bottom: 0; color: #fff; font-size: 14px; font-weight: 700; }
.rd-spec tbody th { width: 52%; font-weight: 500; color: var(--muted-strong); }
.rd-spec tbody td { font-weight: 700; color: var(--ink); }
.rd-spec tbody tr:nth-child(even) { background: var(--paper); }
.rd-spec tbody tr:last-child th, .rd-spec tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 900px) {
  .rd-pdp-copy.is-two { columns: 1; }
  .rd-pdp-specs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .rd-pdp-keys ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-spec th, .rd-spec td { padding: 10px 12px; }
}

/* One hover for every button: amber slides in from the left and the text turns ink, so the
   end state is the same whatever colour the button starts from. --rd-rest holds the resting
   colour, because the older stylesheets change background-color on hover and would flip the
   whole button before the slide could be seen. !important is for those same layers. */
.btn, .rd-quote-btn, .rd-quote-bar, .btn-ghost-sm {
  --rd-rest: transparent;
  background-image: linear-gradient(var(--amber), var(--amber)) !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  background-size: 0 100% !important;
  transition: background-size .28s var(--ease), color .18s var(--ease), border-color .18s var(--ease) !important;
}
.btn-primary, .rd-btn-dark { --rd-rest: var(--rd-dark); }
.btn-accent, .rd-btn-gold, .rd-quote-btn, .rd-quote-bar, .rd-enquire-form .enq-form .btn-primary { --rd-rest: var(--orange); }
.rd-btn-wa, .btn-ghost-sm, .sj-consult .btn-wa { --rd-rest: #fff; }
.btn-wa { --rd-rest: #0F8043; }
.btn:hover, .btn:focus-visible, .rd-quote-btn:hover, .rd-quote-btn:focus-visible, .rd-quote-bar:hover, .rd-quote-bar:focus-visible, .btn-ghost-sm:hover, .btn-ghost-sm:focus-visible {
  background-color: var(--rd-rest) !important;
  background-size: 100% 100% !important;
  border-color: var(--amber) !important;
  color: var(--ink) !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn:hover i, .btn:focus-visible i, .rd-quote-btn:hover i, .rd-quote-bar:hover i, .btn-ghost-sm:hover i { color: inherit !important; }
.btn:disabled, .btn[aria-disabled="true"] { background-image: none !important; }
.btn .fa-arrow-right, .rd-more .fa-arrow-right { display: inline-block; transition: transform .2s var(--ease); }
.btn:hover .fa-arrow-right, .rd-more:hover .fa-arrow-right { transform: translateX(4px); }

/* Cards lift a little under the mouse. */
@media (hover: hover) {
  .rd-pcard { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
  .rd-pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow), inset 0 -4px 0 0 var(--orange); }
  .rd-cat { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
  .rd-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
}

/* Product cards: second photo on hover. */
[data-alt-src] { position: relative; }
.pcard-img > a[data-alt-src] { display: block; height: 100%; }
.rd-alt { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px; object-fit: contain; background: #fff; opacity: 0; transition: opacity .25s var(--ease); }
.pcard-img img.rd-alt { max-width: none; }
.rd-pcard-img .rd-alt { inset: 0; width: 100%; height: 100%; }
.has-alt:hover .rd-alt, .has-alt.has-alt:hover .rd-alt { opacity: 1; }

/* Product cards: video. */
.rd-pcard, .pcard-img { position: relative; }
.rd-card-play { position: absolute; top: 10px; left: 10px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--rd-dark); color: var(--amber); font-size: 13px; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
.rd-card-play i { margin-left: 2px; }
.rd-card-play:hover { background: var(--orange); color: var(--ink); transform: scale(1.08); }
.rd-card-play:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rd-vmodal { width: min(960px, calc(100vw - 32px)); padding: 0; border: 0; background: #000; overflow: visible; }
.rd-vmodal::backdrop { background: rgba(15, 16, 18, .86); }
.rd-vmodal-box { aspect-ratio: 16 / 9; }
.rd-vmodal-box iframe { display: block; width: 100%; height: 100%; border: 0; }
.rd-vmodal-x { position: absolute; top: -46px; right: 0; display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: var(--orange); color: var(--ink); font-size: 17px; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .btn, .rd-quote-btn, .rd-quote-bar, .btn-ghost-sm { transition: none !important; }
  .t-lift, .t-handle { animation: none; }
  .rd-anim .rd-intro-copy h1, .rd-anim .rd-intro-cta, .rd-anim .rd-intro-plate, .rd-anim .rd-feature { opacity: 1; transform: none; transition: none; }
  .rd-btn-gold, .rd-btn-dark, .rd-btn-line, .rd-btn-line-dark, .rd-pcard, .rd-cat, .rd-alt, .rd-card-play { transition: none; }
  .rd-pcard:hover, .rd-cat:hover, .rd-card-play:hover, .btn:hover .fa-arrow-right, .rd-more:hover .fa-arrow-right { transform: none; }
}

/* No rounded corners anywhere on the storefront, the client's call. Last, and !important, because
   hundreds of rules across the older stylesheets, and inline styles in the widgets, set their own. */
html *, html *::before, html *::after, html ::backdrop { border-radius: 0 !important; }
/* The one exception, the client's call: the floating back-to-top, WhatsApp and call buttons stay round. */
.totop { border-radius: 50% !important; }
/* 999px, not 50%: on a phone these are wide pills, and 50% of a wide box draws an ellipse. */
.cn-cb-fab, .cn-cb-fab-pulse { border-radius: 999px !important; }
.cn-cb-fab[data-label]::before { border-radius: 8px !important; }
html input[type="range"]::-webkit-slider-thumb, html input[type="range"]::-webkit-slider-runnable-track, html input[type="range"]::-moz-range-thumb, html input[type="range"]::-moz-range-track { border-radius: 0 !important; }

/* Category page: the help band and the other ranges. */
.rd-cat-help { padding: clamp(30px, 4vw, 44px) 0; background: var(--rd-dark); color: rgba(255, 255, 255, .78); }
.rd-cat-help-in { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.rd-cat-help h2 { margin: 6px 0; color: #fff; font-size: clamp(22px, 2.4vw, 30px); }
.rd-cat-help p { margin: 0; }
.rd-cat-help .side-help-k { color: var(--amber); }

.section.rd-cat-others { background: #fff; }
.rd-cat-others .rd-head h2 { font-size: clamp(24px, 2.6vw, 32px); }
.rd-cat-others .rd-cat-img { flex: none; }
.rd-cat-others .rd-cat-txt { flex: 1 0 auto; margin: 0; color: var(--ink); letter-spacing: 0; }

@media (max-width: 860px) {
  .rd-cat-others .rd-head { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 22px; }
}

/* Every product card: its main button with the home page's WhatsApp button beside it. */
/* Side by side while the main button has room; on a narrow card WhatsApp drops below at full width, as on the home page. */
.pcard-act { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pcard-act > :not(.rd-btn-wa) { flex: 999 1 130px; min-width: 0; }
.pcard-act .pcard-add { margin-top: 0; }
.pcard-act .btn { min-height: 42px; }
.pcard-act .rd-btn-wa { display: flex; flex: 1 0 42px; align-items: center; justify-content: center; padding: 0; font-size: 19px; }
.pgrid-wl .pcard-act { align-items: flex-start; }
@media (max-width: 480px) { .pcard-act .btn-block { padding-inline: 6px; font-size: 12.5px; white-space: nowrap; } }
@media (max-width: 360px) { .pgrid-shop .pcard-body { padding-inline: 12px; } .pcard-act .btn-block { font-size: 12px; } .pcard-act .btn-block i { display: none; } }

/* Category band with the category's own animated machine on a light panel. */
.rd-chero { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(22, 24, 27, .66), rgba(22, 24, 27, .46)), var(--ink-deep) url(../img/rudra-subheader.jpg) left center / cover no-repeat; }
.rd-chero-photo { position: absolute; inset: 0 0 0 auto; display: flex; align-items: center; justify-content: center; width: 47%; padding: 18px 5% 18px 13%; background: #F3F2EC; clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%); }
.rd-chero::after { content: ""; position: absolute; inset: 0 0 0 auto; width: calc(47% + 10px); background: var(--orange); clip-path: polygon(calc(11% - 1px) 0, calc(11% + 10px) 0, 10px 100%, 0 100%); pointer-events: none; }
.rd-chero-photo svg { width: 100%; height: 100%; max-height: 290px; overflow: visible; }
.rd-chero-photo img { width: 100%; height: 100%; max-height: 290px; object-fit: contain; mix-blend-mode: multiply; }
.rd-chero-noart .rd-chero-copy { width: auto; }
.rd-chero-noart::after { display: none; }
.rd-chero-in { position: relative; z-index: 1; display: flex; align-items: center; min-height: 316px; padding-block: 36px; }
.rd-chero-copy { width: 50%; }
.rd-chero h1 { margin: 0; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.03em; color: #fff; }
.rd-chero-lede { margin: 16px 0 0; max-width: 52ch; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .72); }
@media (max-width: 760px) {
  .rd-chero-photo { width: 42%; padding: 12px 14px 12px 26px; }
  .rd-chero::after { width: calc(42% + 6px); clip-path: polygon(calc(11% - 1px) 0, calc(11% + 6px) 0, 6px 100%, 0 100%); }
  .rd-chero-in { min-height: 0; padding-block: 26px 28px; }
  .rd-chero-copy { width: 58%; padding-right: 16px; }
  .rd-chero .crumbs-bare { margin-bottom: 14px; font-size: 12px; }
}

.rd-cat-note { clear: both; margin: 30px 0 0; padding: 16px 22px; background: #FFF4D6; border: 1px solid #E3C77A; border-left: 6px solid var(--orange); text-align: center; color: #5C4A1F; font-size: 17px; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .5px; }
.rd-cat-note i { margin-right: 6px; }

/* Category with the filter rail: two cards a row on a phone, like the other category pages. */
@media (max-width: 860px) { .rd-cat-railed .pgrid.pgrid-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* The rail shows its help panel only above 900px; below that this band takes its place. */
@media (min-width: 901px) { .rd-cat-railed ~ .rd-cat-help { display: none; } }

/* The lighter band needs a stronger last crumb. */
.phero .crumbs-bare [aria-current], .rd-chero .crumbs-bare [aria-current] { color: rgba(255, 255, 255, .92); }
.phero .crumbs-bare a, .rd-chero .crumbs-bare a { color: rgba(255, 255, 255, .86); }
.phero-lede { color: rgba(255, 255, 255, .9); }

/* Heading above the grid, with Sort on the same line. */
.rd-grid-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.rd-grid-head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; }
.rd-grid-head .shop-bar { margin: 0; padding: 0; border: 0; }
.rd-grid-head .shop-count:empty { display: none; }

/* Product showcase: photo beside name, price and buttons on white, under the subheader. The brand gold
   is too pale for small text on white, hence the deeper gold. */
.pdp.rd-pshow { --rd-show-gold: #7F672D; padding: clamp(28px, 3vw, 40px) 0 clamp(36px, 4vw, 56px); background: #fff; color: var(--ink); }
.rd-pshow .pdp-stage { background: #fff; border: 1px solid var(--line); }
.rd-pshow .pdp-thumbs-wrap::before, .rd-pshow .pdp-thumbs-wrap::after { display: none; }
.rd-pshow .pdp-thumb { background: #fff; border-color: var(--line); }
.rd-pshow .pdp-thumb.is-on { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.rd-pshow .pdp-eyebrow { margin-bottom: 6px; }
.rd-pshow .pdp-eyebrow a { padding-block: 4px; color: var(--rd-show-gold); }
.rd-pshow .pdp-eyebrow a:hover { color: var(--ink); }
.rd-pshow .pdp-title { margin-bottom: 10px; color: var(--ink); font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; }
.rd-pshow .pdp-model, .rd-pshow .pdp-model strong { color: var(--rd-show-gold); }
.rd-pshow .pdp-lede, .rd-pshow .pdp-points li, .rd-pshow .pdp-points li span, .rd-pshow .pdp-points-h { color: var(--ink); }
.rd-pshow .pdp-lede { margin-bottom: 16px; }
.rd-pshow .pdp-points { margin-bottom: 14px; }
.rd-pshow .pdp-points i { color: var(--rd-show-gold); background: none; }
.rd-pshow .pdp-assure li { color: var(--ink); }
/* Buy box: price and stock, then one row for each pair of buttons. */
.rd-pshow .pdp-model { font-size: 16px; }
.rd-pshow .pdp-buy-in { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: clamp(18px, 2vw, 24px); background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--orange); box-shadow: none; }
.rd-pshow .pdp-buy-in > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
.rd-pshow .pdp-now { color: var(--ink); font-size: clamp(30px, 3vw, 38px); }
.rd-pshow .pdp-hsn { padding-top: 10px; border-top-color: var(--line); }
.rd-pshow .pdp-stock.is-in, .rd-pshow .pdp-stock.is-in i { color: #1B7F3B; }
.rd-pshow .pdp-stock.is-out, .rd-pshow .pdp-stock.is-out i { color: #B3261E; }
.rd-pshow .pdp-form { margin: 0; }
.rd-pshow .pdp-qty { background: #fff; border-color: var(--line); }
.rd-pshow .pdp-form .btn-primary { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.rd-pshow .pdp-form .btn-primary:hover { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.rd-pshow .pdp-buy-in > .pdp-quote { grid-column: 1; margin: 0; background: #fff; border-color: var(--ink); color: var(--ink); }
.rd-pshow .pdp-buy-in > .pdp-quote:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.rd-pshow .pdp-reach { display: contents; }
.rd-pshow .pdp-wa { order: 1; grid-column: 2; display: flex; justify-content: center; align-items: center; min-height: 51px; margin: 0; padding: 8px; background: #fff; border: 1px solid #128C4B; color: #0E7A41; }
.rd-pshow .pdp-wa:hover { background: #E9F7EF; color: #0E6E3B; }
.rd-pshow .pdp-buy-in > .pdp-pin, .rd-pshow .pdp-call { order: 2; }
.rd-pshow .pdp-call { grid-column: 1 / -1; padding-block: 2px; color: var(--ink); }
.rd-pshow .pdp-call:hover { color: var(--rd-show-gold); }
.rd-pshow .pdp-hsn { order: 3; }
.rd-pshow .pdp-buy-in > .pdp-quote { order: 1; }
.rd-pshow .pdp-pin { padding: 0; background: none; border: 0; }
.rd-pshow .pdp-pin-l, .rd-pshow .pdp-pin-l i, .rd-pshow .pdp-pin-out { color: var(--ink); }
.rd-pshow .pdp-pin-row .btn-ghost { background: #fff; border-color: var(--ink); color: var(--ink); }
.rd-pshow .pdp-pin-row .btn-ghost:hover { background: var(--ink); color: #fff; }
/* On a phone the box's own padding would leave the paired buttons too narrow for their words. */
@media (max-width: 640px) {
  .rd-pshow .pdp-buy-in { padding: 18px 0 0; background: none; border: 0; border-top: 3px solid var(--orange); }
}
@media (max-width: 480px) {
  .rd-pshow .pdp-form .btn { flex-basis: 150px; padding-inline: 10px; }
}
@media (max-width: 360px) {
  .rd-pshow .pdp-buy-in > .pdp-quote, .rd-pshow .pdp-wa { grid-column: 1 / -1; }
}
/* The table's main figures, set large. */
.rd-pshow-figs { background: var(--rd-dark); color: #fff; }
.rd-pshow-figs ul { list-style: none; margin-block: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rd-pshow-figs li { padding: clamp(20px, 2.6vw, 32px) clamp(16px, 2.4vw, 32px); border-left: 1px solid rgba(255, 255, 255, .16); }
.rd-pshow-figs li:first-child { border-left: 0; padding-left: 0; }
.rd-pshow-figs b { display: block; color: #fff; font: 700 clamp(32px, 4vw, 52px)/1.05 var(--serif); letter-spacing: -.02em; }
.rd-pshow-figs small { color: var(--amber); font-size: .46em; font-weight: 600; letter-spacing: 0; }
.rd-pshow-figs span { display: block; margin-top: 8px; color: rgba(255, 255, 255, .82); font-size: 14.5px; font-weight: 500; }
@media (max-width: 640px) {
  .rd-pshow-figs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-pshow-figs li { padding: 18px 0 18px 16px; }
  .rd-pshow-figs li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .rd-pshow-figs li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .16); }
}
/* The product's key points as cards. */
.rd-pshow-feats { padding: clamp(32px, 4vw, 52px) 0; background: #fff; }
.rd-pshow-feats h2 { margin: 0 0 18px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
.rd-pshow-feats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.rd-pshow-feats li { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; background: var(--paper); border-bottom: 3px solid var(--orange); color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.rd-pshow-feats i { display: grid; place-items: center; width: 36px; height: 36px; background: var(--rd-dark); color: var(--amber); font-size: 14px; }
/* Below the band: specifications beside the video; alone, they take the whole row. */
.rd-pshow-low { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px clamp(32px, 4vw, 56px); }
.rd-pshow-info { flex: 1 1 520px; min-width: 0; }
.rd-pshow-vid { flex: 1 1 420px; min-width: 0; }
.rd-pshow-vid h2 { margin: 0 0 16px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
.rd-pshow-vid .rd-pdp-video-list { max-width: none; margin: 0; }
.rd-pshow-low:has(.rd-pshow-vid) .rd-pdp-specs { grid-template-columns: minmax(0, 1fr); }
.rd-pshow-low:has(.rd-pshow-vid) .rd-pdp-specs .rd-spec + .rd-spec thead { display: none; }