/*
Theme Name:   RSU Supply
Theme URI:    https://rsusupply.com
Description:  Child theme for RSU Supply — design system, motion layer and section components for the contractor-supply build. All visual design is driven by the custom properties in :root, so a rebrand is a one-line change.
Author:       RSU Supply build
Template:     kadence
Version:      3.1.0
Text Domain:  rsu-supply
*/

/* ==========================================================================
   0. DESIGN TOKENS
   Change these six brand values and the entire site rebrands.
   ========================================================================== */

:root {
  --rsu-accent:        #00A0E0;
  --rsu-accent-dark:   #0080B3;
  --rsu-accent-ink:    #00364D;
  --rsu-ink:           #0B1622;
  --rsu-body:          #3D4A57;
  --rsu-surface:       #F4F7FA;

  --rsu-line:          #DEE6ED;
  --rsu-line-strong:   #C3D0DB;
  --rsu-muted:         #6B7A88;
  --rsu-accent-wash:   rgba(0, 160, 224, .08);
  --rsu-ink-2:         #12202F;

  --rsu-fs-micro:  0.75rem;
  --rsu-fs-sm:     0.875rem;
  --rsu-fs-base:   clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --rsu-fs-lead:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --rsu-fs-h3:     clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --rsu-fs-h2:     clamp(1.5rem, 1.28rem + 1.05vw, 2.125rem);
  --rsu-fs-h1:     clamp(2rem, 1.55rem + 2.15vw, 3.25rem);

  --rsu-s1: 0.5rem;
  --rsu-s2: 0.875rem;
  --rsu-s3: 1.25rem;
  --rsu-s4: 2rem;
  --rsu-s5: 3rem;
  --rsu-s6: clamp(2.75rem, 1.9rem + 3.1vw, 4.25rem);

  --rsu-radius-sm: 6px;
  --rsu-radius:    10px;
  --rsu-radius-lg: 16px;

  --rsu-shadow-xs: 0 1px 2px rgba(11,22,34,.05);
  --rsu-shadow:    0 1px 2px rgba(11,22,34,.04), 0 8px 24px rgba(11,22,34,.06);
  --rsu-shadow-lg: 0 2px 4px rgba(11,22,34,.05), 0 22px 50px rgba(11,22,34,.13);
  --rsu-shadow-accent: 0 8px 26px rgba(0,160,224,.30);

  --rsu-maxw: 1200px;
  --rsu-maxw-text: 68ch;

  --rsu-ease: cubic-bezier(.22, .61, .36, 1);
  --rsu-ease-out: cubic-bezier(.16, 1, .3, 1);

  --rsu-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
}

/* ==========================================================================
   1. MOTION LAYER
   Elements marked .rsu-reveal start hidden and animate in when scrolled to.
   rsu.js adds .is-in; if JS never runs, .no-js keeps everything visible, so
   content is never trapped behind a script.
   ========================================================================== */

html.no-js .rsu-reveal { opacity: 1 !important; transform: none !important; }

.rsu-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--rsu-ease-out), transform .7s var(--rsu-ease-out);
  transition-delay: var(--rsu-delay, 0ms);
  will-change: opacity, transform;
}
.rsu-reveal.is-in { opacity: 1; transform: none; }

/* Children of a revealed row stagger themselves. */
.rsu-reveal .wp-block-column:nth-child(1) { --rsu-delay: 0ms; }
.rsu-reveal .wp-block-column:nth-child(2) { --rsu-delay: 90ms; }
.rsu-reveal .wp-block-column:nth-child(3) { --rsu-delay: 180ms; }

@keyframes rsu-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rsu-sheen {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(320%)  skewX(-18deg); }
}

/* ==========================================================================
   2. FOUNDATION
   ========================================================================== */

.entry-content > * { color: var(--rsu-body); }
/* Bands butt together with no theme-injected block gap between them. */
.entry-content > .wp-block-group.alignfull { margin-block: 0 !important; }
.entry-content a { text-underline-offset: 3px; }

/* Centre the CONTENT BOX, not each element.
   Gutenberg's constrained layout puts margin-inline:auto on any child with a
   max-width, which centres paragraphs independently of their headings and
   strands the right half of the page. Blocks are emitted with the default
   (flow) layout instead, and the band is centred here with padding — so every
   child starts hard on the same left edge and only its measure varies. */
.rsu-section {
  padding-block: var(--rsu-s6);
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  position: relative;
}

/* THE container. A plain div centred by auto margins — no calc(), no theme
   layout supports, nothing a parent theme can interfere with. Every band
   (section, hero, CTA) nests its content in one of these. */
.rsu-wrap,
.entry-content .rsu-wrap {
  max-width: var(--rsu-maxw) !important;
  width: 100%;
  margin-inline: auto !important;
  position: relative;
}

/* DEFENSIVE ALIGNMENT — overrides the parent theme.
   On the live site Kadence/Gutenberg global styles centre any child that has
   a max-width (margin-inline:auto on entry-content children), which indented
   the H1 and lead while the eyebrow and buttons stayed left. These rules pin
   every element inside our sections to the shared left edge regardless of
   what the parent theme injects. The CTA band is the one deliberately
   centred exception and restores itself after this layer. */
.entry-content :is(.rsu-section, .rsu-hero)
  :is(h1, h2, h3, h4, p, ul, ol, figure, .wp-block-buttons, .wp-block-columns,
      .wp-block-group:not(.rsu-wrap)) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left;
}
.entry-content .rsu-cta :is(h2, p, .wp-block-buttons) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
.entry-content .rsu-cta .rsu-btns { justify-content: center !important; }

.rsu-section--specs,
.rsu-section--links,
.rsu-section--tint { background: var(--rsu-surface); }

.rsu-section--tint + .rsu-section--tint,
.rsu-section--specs + .rsu-section--links { padding-top: 0; }

.rsu-h2 {
  font-size: var(--rsu-fs-h2);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--rsu-ink);
  margin: 0 0 var(--rsu-s3);
  font-weight: 700;
  text-wrap: balance;
}
.rsu-h2--sm { font-size: var(--rsu-fs-h3); }
.rsu-h2::after {
  content: "";
  display: block;
  width: 44px; height: 3px;
  margin-top: var(--rsu-s2);
  background: var(--rsu-accent);
  border-radius: 2px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .6s var(--rsu-ease-out) .15s;
}
.rsu-reveal.is-in .rsu-h2::after,
.is-in > .rsu-h2::after { transform: scaleX(1); }
html.no-js .rsu-h2::after { transform: scaleX(1); }

.rsu-lead {
  margin-inline: 0;
  font-size: var(--rsu-fs-lead);
  line-height: 1.6;
  color: var(--rsu-body);
  max-width: var(--rsu-maxw-text);
  margin: 0 0 var(--rsu-s4);
}
.rsu-prose__p {
  font-size: var(--rsu-fs-base);
  line-height: 1.72;
  max-width: var(--rsu-maxw-text);
  margin: 0 0 var(--rsu-s3);
}
.rsu-microcopy { font-size: var(--rsu-fs-sm); color: var(--rsu-muted); margin-top: var(--rsu-s2); }

.rsu-eyebrow {
  font-size: var(--rsu-fs-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rsu-accent);
  margin: 0 0 var(--rsu-s2);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.rsu-eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--rsu-accent);
  flex: none;
}

/* --------------------------------------------------------- editorial split */

.rsu-split.wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 3.5vw, 4.5rem);
  align-items: start;
}
.rsu-split > .wp-block-column { flex-basis: auto !important; min-width: 0; }

@media (max-width: 899px) {
  .rsu-split.wp-block-columns { grid-template-columns: 1fr; gap: var(--rsu-s3); }
}
.rsu-split .rsu-prose__p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- stats band */

.rsu-section--stats {
  background: var(--rsu-ink);
  padding-block: var(--rsu-s4);
}
.rsu-stats.wp-block-columns { gap: var(--rsu-s3) !important; }
.rsu-stat {
  height: 100%;
  padding: var(--rsu-s3) var(--rsu-s3) var(--rsu-s3) calc(var(--rsu-s3) + 4px);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--rsu-radius);
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--rsu-ease-out), border-color .25s var(--rsu-ease);
}
.rsu-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--rsu-accent), var(--rsu-accent-dark));
}
.rsu-stat:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); }
.rsu-stat__v {
  margin: 0 0 .3rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.rsu-stat__v .rsu-count { color: #6FD2FF; }
.rsu-stat__l {
  margin: 0;
  font-size: var(--rsu-fs-sm);
  line-height: 1.5;
  color: #93A6B6;
}

/* ------------------------------------------------------------- quote band */

.rsu-section--quote { background: var(--rsu-surface); text-align: center; }
/* :is() with a class argument matches the defensive layer's specificity,
   and being later in the file, wins the tie. */
.entry-content .rsu-section--quote .rsu-wrap :is(p, .rsu-quote__t, .rsu-quote__a) {
  margin-left: auto !important; margin-right: auto !important;
  text-align: center !important;
}
.rsu-quote__t {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.75rem);
  line-height: 1.55;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--rsu-ink);
  max-width: 52ch;
  text-wrap: pretty;
  position: relative;
  padding-top: 2.4rem;
}
.rsu-quote__t::before {
  content: "\201C";
  position: absolute; top: -.6rem; left: 50%;
  transform: translateX(-50%);
  font-size: 4.5rem; line-height: 1;
  font-family: Georgia, serif;
  color: var(--rsu-accent);
  opacity: .85;
}
.rsu-quote__t::after {
  content: "";
  display: block;
  width: 44px; height: 3px;
  margin: var(--rsu-s3) auto 0;
  background: var(--rsu-accent);
  border-radius: 2px;
}

/* ==========================================================================
   3. HERO
   ========================================================================== */

.rsu-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--rsu-ink);
  color: #E8EEF4;
  padding-block: clamp(3.75rem, 2rem + 7vw, 7rem);
  padding-inline: clamp(1.5rem, 4vw, 3rem);
}

/* Photograph layer. Drop a file in assets/img/ and it appears; until then the
   gradient below carries the hero on its own, so nothing ever looks broken. */
.rsu-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -3;
  background-size: cover;
  background-position: center;
  opacity: .40;
  filter: grayscale(.35) contrast(1.06);
  transform: scale(1.06);
  animation: rsu-hero-drift 24s var(--rsu-ease) infinite alternate;
}
@keyframes rsu-hero-drift {
  from { transform: scale(1.06) translate3d(0,0,0); }
  to   { transform: scale(1.13) translate3d(-1.5%, -1.5%, 0); }
}

/* Readability + brand wash over any photograph. */
.rsu-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(0,160,224,.34), transparent 58%),
    linear-gradient(100deg, var(--rsu-ink) 32%, rgba(11,22,34,.72) 68%, rgba(11,22,34,.44) 100%);
}
.rsu-hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to bottom right, #000 6%, transparent 72%);
}

.rsu-hero--home::before    { background-image: url(assets/img/hero-home.jpg); }
/* client-uploaded hero photo takes precedence when present in the library */
.rsu-hero--home::before {
  background-image: url(/wp-content/uploads/2026/08/massive-construction-project-scaled.jpg);
}
.rsu-hero--strut::before   { background-image: url(assets/img/hero-strut.jpg); }
.rsu-hero--hangers::before { background-image: url(assets/img/hero-hangers.jpg); }
.rsu-hero--rod::before     { background-image: url(assets/img/hero-rod.jpg); }
.rsu-hero--about::before   { background-image: url(assets/img/hero-about.jpg); }
.rsu-hero--quote::before   { background-image: url(assets/img/hero-quote.jpg); }

.rsu-hero__title {
  font-size: var(--rsu-fs-h1);
  line-height: 1.05;
  letter-spacing: -0.033em;
  font-weight: 800;
  color: #fff;
  margin: 0 0 var(--rsu-s3);
  max-width: 21ch;
  text-wrap: balance;
}
.rsu-hero__lead {
  font-size: var(--rsu-fs-lead);
  line-height: 1.62;
  color: #B9C8D5;
  max-width: 58ch;
  margin: 0 0 var(--rsu-s4);
}
.rsu-hero .rsu-eyebrow { color: #6FD2FF; }
.rsu-hero .rsu-eyebrow::before { background: #6FD2FF; }
.rsu-hero--home .rsu-hero__title { max-width: 17ch; }
/* 2026-09-03 client change request: no page-load entrance animation. Hero
   content used to fade/slide in on every navigation (rsu-fade-up, staggered
   up to .3s+.9s), which delays the largest above-the-fold content from
   painting and shows up as worse LCP/INP on every click — the opposite of
   what a jobsite visitor on a phone needs. Content now paints immediately;
   only below-the-fold .rsu-reveal sections still animate, and only once
   scrolled to (see MOTION LAYER above), which never blocks first paint. */

/* Split hero: content left, spec panel right. */
.rsu-hero__cols.wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}
.rsu-hero__cols > .wp-block-column { flex-basis: auto !important; min-width: 0; }
@media (max-width: 920px) {
  .rsu-hero__cols.wp-block-columns { grid-template-columns: 1fr; }
  .rsu-hpanel { max-width: 30rem; }
}

.rsu-hpanel {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--rsu-radius-lg);
  padding: var(--rsu-s3);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.rsu-hpanel__fig,
.rsu-hpanel__fig img {
  margin: 0 !important;
  display: block; width: 100%;
  border-radius: var(--rsu-radius);
}
.rsu-hpanel__fig img {
  background: #fff;
  aspect-ratio: 400 / 260;
  object-fit: contain;
  padding: .75rem;
}
.rsu-hpanel__cap {
  margin: var(--rsu-s2) 0 0 !important;
  font-family: var(--rsu-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7FA2B8;
}
.rsu-hpanel--facts { padding: var(--rsu-s4); }
.rsu-hpanel__k {
  margin: 0 0 var(--rsu-s2) !important;
  font-size: var(--rsu-fs-micro);
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #6FD2FF;
}
.rsu-hpanel--facts ul {
  list-style: none; margin: 0 !important; padding: 0;
}
.rsu-hpanel--facts li {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: #D6E2EC;
  font-size: var(--rsu-fs-sm);
  line-height: 1.5;
}
.rsu-hpanel--facts li:last-child { border-bottom: 0; }
.rsu-check {
  flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,160,224,.22);
  color: #6FD2FF;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  margin-top: .1rem;
}
.rsu-hpanel__telrow { margin: var(--rsu-s3) 0 0 !important; }
.rsu-hpanel__tel {
  color: #fff; font-weight: 700; font-size: var(--rsu-fs-base);
  text-decoration: none;
  display: inline-flex; gap: .5rem; align-items: center;
}
.rsu-hpanel__tel:hover { color: #6FD2FF; }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.rsu-btns { gap: var(--rsu-s2) !important; }

.wp-block-button.rsu-btn .wp-block-button__link {
  position: relative;
  overflow: hidden;
  font-size: var(--rsu-fs-sm);
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1;
  padding: 1.05rem 1.7rem;
  border-radius: var(--rsu-radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  display: inline-block;
  transition: transform .2s var(--rsu-ease), background-color .2s var(--rsu-ease),
              border-color .2s var(--rsu-ease), color .2s var(--rsu-ease),
              box-shadow .25s var(--rsu-ease);
}
/* A single light sweep on hover — restrained, not decorative. */
.wp-block-button.rsu-btn .wp-block-button__link::after {
  content: "";
  position: absolute; top: 0; left: 0; width: 34%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.wp-block-button.rsu-btn .wp-block-button__link:hover::after {
  animation: rsu-sheen .75s var(--rsu-ease) 1;
}

.rsu-btn--primary .wp-block-button__link {
  background: var(--rsu-accent); color: #fff;
  box-shadow: var(--rsu-shadow-accent);
}
.rsu-btn--primary .wp-block-button__link:hover {
  background: var(--rsu-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,160,224,.36);
}
.rsu-btn--ghost .wp-block-button__link {
  background: #fff; color: var(--rsu-accent-ink);
  border-color: var(--rsu-accent);
  box-shadow: var(--rsu-shadow-xs);
}
.rsu-btn--ghost .wp-block-button__link:hover {
  background: var(--rsu-accent-wash);
  color: var(--rsu-accent-dark);
  transform: translateY(-2px);
}
.rsu-btn--light .wp-block-button__link { background: #fff; color: var(--rsu-accent-ink); }
.rsu-btn--light .wp-block-button__link:hover { background: #EAF6FD; transform: translateY(-2px); }

.rsu-hero .rsu-btn--ghost .wp-block-button__link {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: rgba(255,255,255,.40);
  backdrop-filter: blur(6px);
  box-shadow: none;
}
.rsu-hero .rsu-btn--ghost .wp-block-button__link:hover {
  background: rgba(255,255,255,.14); border-color: #fff;
}

.rsu-btn .wp-block-button__link:focus-visible,
.rsu-card:focus-within, .rsu-card__link:focus-visible, .rsu-tel:focus-visible,
.rsu-faq__item summary:focus-visible, .rsu-links__row a:focus-visible {
  outline: 3px solid var(--rsu-accent);
  outline-offset: 3px;
  border-radius: var(--rsu-radius-sm);
}
.rsu-hero .wp-block-button__link:focus-visible,
.rsu-cta .wp-block-button__link:focus-visible,
.rsu-cta .rsu-tel:focus-visible { outline-color: #fff; }

/* ==========================================================================
   5. CTA BAND
   ========================================================================== */

.rsu-cta {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(135deg, var(--rsu-accent-dark) 0%, var(--rsu-accent) 100%);
  color: #fff;
  padding-block: var(--rsu-s6);
  padding-inline: var(--rsu-s3);
  text-align: center;
}
.rsu-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(80% 100% at 50% 0%, #000, transparent 76%);
}
.rsu-cta > * { max-width: 48rem; margin-inline: auto; }
.rsu-cta__title {
  font-size: var(--rsu-fs-h2); font-weight: 800;
  letter-spacing: -0.024em; line-height: 1.14;
  color: #fff; margin: 0 auto var(--rsu-s2);
}
.rsu-cta__title::after { display: none; }
.rsu-cta__sub {
  font-size: var(--rsu-fs-lead); line-height: 1.6;
  color: rgba(255,255,255,.93); margin: 0 auto var(--rsu-s4);
}
.rsu-cta .rsu-btns { justify-content: center; }
.rsu-cta__tel { margin: var(--rsu-s3) auto 0; }
.rsu-tel {
  color: #fff; font-weight: 700; font-size: var(--rsu-fs-sm);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.45);
  padding-bottom: 2px;
  transition: border-color .2s var(--rsu-ease);
}
.rsu-tel:hover { border-bottom-color: #fff; }

/* ==========================================================================
   6. PRODUCT FIGURE (technical drawing)
   ========================================================================== */

.rsu-figure {
  margin: 0 0 var(--rsu-s4);
  background: linear-gradient(180deg, #fff, var(--rsu-surface));
  border: 1px solid var(--rsu-line);
  border-radius: var(--rsu-radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--rsu-shadow);
}
.rsu-figure::after {
  content: "TECHNICAL DRAWING";
  position: absolute; top: 12px; right: 14px;
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  color: var(--rsu-muted);
  font-family: var(--rsu-mono);
}
.rsu-figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 400 / 260;
  object-fit: contain;
  padding: var(--rsu-s3);
  transition: transform .5s var(--rsu-ease-out);
}
.rsu-figure:hover img { transform: scale(1.035); }

.rsu-figure--split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--rsu-s5);
  align-items: center;
  background: none; border: 0; box-shadow: none; border-radius: 0;
}
.rsu-figure--split::after { display: none; }
@media (max-width: 860px) { .rsu-figure--split { grid-template-columns: 1fr; } }

/* Mid-article reference drawing — sits INSIDE the prose column (same
   group as the paragraphs around it, same max-width), so it reads as
   part of the article's own flow instead of a separate floating card.
   No section band, no extra top/bottom padding beyond normal paragraph
   rhythm. */
.rsu-callout {
  max-width: var(--rsu-maxw-text);
  margin: 0 0 var(--rsu-s3);
}
.rsu-callout .rsu-figure { margin-bottom: var(--rsu-s2); }
.rsu-callout__k {
  margin: 0 0 var(--rsu-s1) !important;
  font-family: var(--rsu-mono);
  font-size: var(--rsu-fs-micro);
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--rsu-accent-dark);
}
.rsu-callout__cap {
  margin: 0 !important;
  font-size: var(--rsu-fs-sm);
  line-height: 1.6;
  color: var(--rsu-body);
}

/* Card thumbnails */
.rsu-card__fig {
  display: block;
  margin: calc(var(--rsu-s3) * -1) calc(var(--rsu-s3) * -1) var(--rsu-s3);
  background: var(--rsu-surface);
  border-bottom: 1px solid var(--rsu-line);
  overflow: hidden;
}
.rsu-card__fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 400 / 225;
  object-fit: contain;            /* never crop a technical drawing */
  padding: .5rem;
  transition: transform .55s var(--rsu-ease-out);
}
.rsu-card:hover .rsu-card__fig img { transform: scale(1.06); }

/* --------------------------------------------------------- datasheet card */

.rsu-ds {
  background: linear-gradient(120deg, var(--rsu-ink) 0%, var(--rsu-ink-2) 100%);
  border-radius: var(--rsu-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  position: relative;
  overflow: hidden;
  box-shadow: var(--rsu-shadow-lg);
}
.rsu-ds::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(0,160,224,.22), transparent 55%);
  pointer-events: none;
}
.rsu-ds__cols.wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--rsu-s4);
  align-items: center;
  position: relative;
}
.rsu-ds__cols > .wp-block-column { flex-basis: auto !important; min-width: 0; }
@media (max-width: 860px) { .rsu-ds__cols.wp-block-columns { grid-template-columns: 1fr; } }
.rsu-ds .rsu-h2 { color: #fff; margin-bottom: var(--rsu-s2); }
.rsu-ds .rsu-h2::after { display: none; }
.rsu-ds__text { margin: 0 !important; color: #A9BCCB; font-size: var(--rsu-fs-sm); line-height: 1.65; max-width: 52ch; }
.rsu-ds__iconrow { margin: 0 0 var(--rsu-s2) !important; }
.rsu-ds__icon {
  display: inline-grid; place-items: center;
  min-width: 46px; height: 30px; padding-inline: .5rem;
  border-radius: 6px;
  background: #E5484D;
  color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .08em;
}
.rsu-ds .rsu-microcopy { color: #7FA2B8; }
.rsu-ds .rsu-btn--primary .wp-block-button__link { white-space: nowrap; }

/* --------------------------------------------------------------- sizes card
   Replaces the spec table + data-sheet card sitewide (2026-09-03 client
   change: no published spec tables or PDFs until sourcing is settled).
   Light card, not the dark datasheet treatment — this is a reassurance +
   CTA block, not a placeholder apology, so it should read as confident. */

.rsu-sizes {
  background: #fff;
  border: 1px solid var(--rsu-line);
  border-radius: var(--rsu-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  box-shadow: var(--rsu-shadow);
}
.rsu-sizes__cols.wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.rsu-sizes__cols > .wp-block-column { flex-basis: auto !important; min-width: 0; }
@media (max-width: 860px) { .rsu-sizes__cols.wp-block-columns { grid-template-columns: 1fr; } }
.rsu-sizes__fig,
.rsu-sizes__fig img {
  margin: 0 !important; display: block; width: 100%;
  border-radius: var(--rsu-radius);
}
.rsu-sizes__fig img {
  background: var(--rsu-surface);
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 1rem;
  border: 1px solid var(--rsu-line);
}
.rsu-sizes .rsu-h2 { margin-bottom: var(--rsu-s2); }
.rsu-sizes__chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 var(--rsu-s3);
}
.rsu-sizes__chip {
  display: inline-block;
  background: var(--rsu-surface);
  border: 1px solid var(--rsu-line-strong);
  border-radius: 999px;
  padding: .4rem .95rem;
  font-size: var(--rsu-fs-sm); font-weight: 600;
  color: var(--rsu-ink);
  font-variant-numeric: tabular-nums;
}
.rsu-sizes__text {
  margin: 0 0 var(--rsu-s2) !important;
  color: var(--rsu-body); font-size: var(--rsu-fs-base); line-height: 1.68;
  max-width: 52ch;
}
.rsu-sizes__min {
  margin: 0 0 var(--rsu-s3) !important;
  color: var(--rsu-muted); font-size: var(--rsu-fs-sm); font-weight: 600;
}
.rsu-sizes .rsu-btns { margin: 0; }

/* Minimum-order line above the quote form (quote page only). */
.rsu-minorder__row { padding-block: 0 !important; }
.rsu-minorder {
  margin: 0 !important;
  text-align: center;
  font-weight: 700;
  font-size: var(--rsu-fs-base);
  color: var(--rsu-ink);
  background: var(--rsu-accent-wash);
  border: 1px solid rgba(0,160,224,.28);
  border-radius: var(--rsu-radius);
  padding: var(--rsu-s2) var(--rsu-s3);
}

/* Consent microcopy under a form's submit button. */
.rsu-formcard__consent {
  margin: var(--rsu-s2) 0 0 !important;
  font-size: var(--rsu-fs-micro);
  color: var(--rsu-muted);
  text-align: center;
}
.rsu-formcard--dark .rsu-formcard__consent { color: #7FA2B8; }
.rsu-formcard__consent a { color: inherit; text-decoration: underline; }
.rsu-formcard__consent a:hover { color: var(--rsu-accent); }

/* ==========================================================================
   7. SPEC TABLE
   ========================================================================== */

.rsu-table { margin: 0 0 var(--rsu-s4); }
.rsu-table table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: #fff;
  border: 1px solid var(--rsu-line);
  border-radius: var(--rsu-radius);
  overflow: hidden;
  font-size: var(--rsu-fs-sm);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--rsu-shadow);
}
.rsu-table thead th {
  background: var(--rsu-ink); color: #fff;
  text-align: left;
  font-size: var(--rsu-fs-micro); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 1rem; white-space: nowrap; border: 0;
}
.rsu-table tbody td {
  padding: .92rem 1rem; border: 0;
  border-top: 1px solid var(--rsu-line);
  color: var(--rsu-body); vertical-align: top;
  transition: background-color .18s var(--rsu-ease);
}
.rsu-table tbody tr:nth-child(odd) td { background: #FBFCFD; }
.rsu-table tbody tr:hover td { background: var(--rsu-accent-wash); }
.rsu-table tbody td:first-child {
  font-family: var(--rsu-mono); font-weight: 600;
  color: var(--rsu-ink); letter-spacing: -.01em; white-space: nowrap;
}
.rsu-table figcaption {
  font-size: var(--rsu-fs-sm); color: var(--rsu-muted);
  margin-top: var(--rsu-s2); text-align: left;
}
@media (max-width: 700px) {
  .rsu-table { overflow-x: auto; -webkit-overflow-scrolling: touch;
               mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
  .rsu-table table { min-width: 34rem; }
}

.rsu-note {
  border-left: 3px solid var(--rsu-accent);
  background: #fff;
  border-radius: 0 var(--rsu-radius) var(--rsu-radius) 0;
  padding: var(--rsu-s3) var(--rsu-s3) var(--rsu-s3) var(--rsu-s4);
  box-shadow: var(--rsu-shadow);
  position: relative;
}
.rsu-note::before {
  content: "!";
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--rsu-accent); color: #fff;
  font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}
.rsu-note__text {
  margin: 0; font-size: var(--rsu-fs-sm); font-weight: 600;
  color: var(--rsu-ink); line-height: 1.6; padding-left: 1.6rem;
}
.rsu-placeholder {
  border: 1px dashed var(--rsu-line-strong);
  border-radius: var(--rsu-radius); padding: var(--rsu-s4);
  background: #fff; margin-bottom: var(--rsu-s4);
}
.rsu-placeholder__text {
  margin: 0; color: var(--rsu-muted);
  font-size: var(--rsu-fs-sm); text-align: center;
}

/* ==========================================================================
   8. FAQ
   ========================================================================== */

.rsu-faq {
  border: 1px solid var(--rsu-line);
  border-radius: var(--rsu-radius);
  background: #fff; overflow: hidden;
  box-shadow: var(--rsu-shadow);
}
.rsu-faq__item { border-bottom: 1px solid var(--rsu-line); }
.rsu-faq__item:last-child { border-bottom: 0; }
.rsu-faq__item summary {
  cursor: pointer; list-style: none;
  padding: var(--rsu-s3) 3.25rem var(--rsu-s3) var(--rsu-s3);
  font-weight: 700; font-size: var(--rsu-fs-base);
  color: var(--rsu-ink); position: relative;
  transition: background-color .18s var(--rsu-ease), color .18s var(--rsu-ease);
}
.rsu-faq__item summary::-webkit-details-marker { display: none; }
.rsu-faq__item summary:hover { background: var(--rsu-surface); color: var(--rsu-accent-dark); }
.rsu-faq__item summary::before {
  content: ""; position: absolute;
  right: var(--rsu-s3); top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--rsu-accent-wash);
  transition: background-color .2s var(--rsu-ease);
}
.rsu-faq__item summary::after {
  content: ""; position: absolute;
  right: calc(var(--rsu-s3) + 8px); top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--rsu-accent);
  border-bottom: 2px solid var(--rsu-accent);
  transform: translateY(-68%) rotate(45deg);
  transition: transform .28s var(--rsu-ease);
}
.rsu-faq__item[open] summary::after { transform: translateY(-32%) rotate(225deg); }
.rsu-faq__item[open] summary { background: var(--rsu-surface); }
.rsu-faq__item[open] summary::before { background: rgba(0,160,224,.18); }
.rsu-faq__item > p {
  margin: 0; padding: 0 var(--rsu-s3) var(--rsu-s3);
  font-size: var(--rsu-fs-base); line-height: 1.72;
  color: var(--rsu-body); max-width: var(--rsu-maxw-text);
  animation: rsu-fade-up .3s var(--rsu-ease-out) both;
}

/* ==========================================================================
   9. CARDS
   ========================================================================== */

.rsu-cols { gap: var(--rsu-s3) !important; align-items: stretch; }
.rsu-cols > .wp-block-column { min-width: 0; }
@media (max-width: 1024px) and (min-width: 782px) {
  .rsu-cols.wp-block-columns { flex-wrap: wrap; }
  .rsu-cols > .wp-block-column { flex-basis: calc(50% - var(--rsu-s3)) !important; }
}

.rsu-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--rsu-line);
  border-radius: var(--rsu-radius-lg);
  padding: var(--rsu-s3) var(--rsu-s3) var(--rsu-s4);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: transform .3s var(--rsu-ease-out), box-shadow .3s var(--rsu-ease-out),
              border-color .3s var(--rsu-ease);
}
/* Accent edge that draws itself on hover. */
.rsu-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rsu-accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .34s var(--rsu-ease-out);
}
.rsu-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--rsu-shadow-lg);
  border-color: var(--rsu-line-strong);
}
.rsu-card:hover::before { transform: scaleY(1); }

.rsu-card__kicker {
  font-size: var(--rsu-fs-micro); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--rsu-accent); margin: 0 0 var(--rsu-s1);
}
.rsu-card__title {
  font-size: var(--rsu-fs-h3); font-weight: 700;
  letter-spacing: -0.014em; color: var(--rsu-ink);
  margin: 0 0 var(--rsu-s2); line-height: 1.25;
}
.rsu-card__text {
  font-size: var(--rsu-fs-sm); line-height: 1.65;
  color: var(--rsu-body); margin: 0 0 var(--rsu-s3); flex: 1 1 auto;
}
.rsu-card__note {
  font-size: var(--rsu-fs-sm); line-height: 1.55;
  color: var(--rsu-body); margin: 0 0 var(--rsu-s2) !important;
  flex: 1 1 auto;
}
.rsu-card__cta { margin: 0; }
.rsu-card__link {
  font-size: var(--rsu-fs-sm); font-weight: 700;
  color: var(--rsu-accent-dark); text-decoration: none;
}
.rsu-card__link:hover { text-decoration: underline; }
.rsu-card__link span { display: inline-block; transition: transform .25s var(--rsu-ease); }
.rsu-card:hover .rsu-card__link span { transform: translateX(4px); }

/* ==========================================================================
   10. STEPS
   ========================================================================== */

.rsu-step {
  height: 100%;
  background: #fff;
  border: 1px solid var(--rsu-line);
  border-radius: var(--rsu-radius-lg);
  padding: var(--rsu-s4) var(--rsu-s3) var(--rsu-s3);
  position: relative;
  box-shadow: var(--rsu-shadow);
  transition: transform .25s var(--rsu-ease-out), box-shadow .25s var(--rsu-ease-out);
}
.rsu-step:hover { transform: translateY(-4px); box-shadow: var(--rsu-shadow-lg); }
/* the roadmap rail running behind the number badges */
.rsu-section--steps .rsu-cols { position: relative; }
@media (min-width: 782px) {
  .rsu-section--steps .rsu-cols::before {
    content: ""; position: absolute; top: -8px; left: 4%; right: 4%;
    height: 2px;
    background: repeating-linear-gradient(90deg,
      var(--rsu-line-strong) 0 10px, transparent 10px 18px);
  }
}
.rsu-step__num {
  position: absolute; top: -24px; left: var(--rsu-s3);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  margin: 0;
  background: linear-gradient(135deg, var(--rsu-accent), var(--rsu-accent-dark));
  color: #fff;
  border-radius: 50%;
  font-family: var(--rsu-mono);
  font-size: 1rem; font-weight: 700;
  box-shadow: var(--rsu-shadow-accent);
  border: 3px solid #fff;
}
.rsu-step__text {
  margin: var(--rsu-s2) 0 0; font-size: var(--rsu-fs-base);
  line-height: 1.68; color: var(--rsu-body);
}
@media (max-width: 781px) { .rsu-step { margin-top: 28px; } }

/* ==========================================================================
   11. INTERNAL LINKS
   ========================================================================== */

.rsu-links__row {
  font-size: var(--rsu-fs-sm); line-height: 2;
  color: var(--rsu-muted); margin: 0 0 var(--rsu-s1);
}
.rsu-links__row strong { color: var(--rsu-ink); margin-right: .35rem; }
.rsu-links__row a {
  color: var(--rsu-accent-dark); text-decoration: none;
  border-bottom: 1px solid transparent; font-weight: 600;
  transition: border-color .2s var(--rsu-ease);
}
.rsu-links__row a:hover { border-bottom-color: currentColor; }

/* --------------------------------------------------------- form cards */

.rsu-formcard {
  border-radius: var(--rsu-radius-lg);
  padding: clamp(1.4rem, 2.5vw, 2.1rem);
  position: relative;
  overflow: hidden;
}
.rsu-formcard--dark {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(0,0,0,.38);
}
.rsu-formcard--light {
  background: #fff;
  border: 1px solid var(--rsu-line);
  box-shadow: var(--rsu-shadow-lg);
}
.rsu-formcard__k {
  margin: 0 0 var(--rsu-s1) !important;
  font-size: var(--rsu-fs-micro); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--rsu-accent);
}
.rsu-formcard--dark .rsu-formcard__k { color: #6FD2FF; }
.rsu-formcard__t {
  margin: 0 0 var(--rsu-s1) !important;
  font-size: var(--rsu-fs-h3); font-weight: 800;
  letter-spacing: -0.02em; color: var(--rsu-ink);
}
.rsu-formcard__t::after { display: none; }
.rsu-formcard--dark .rsu-formcard__t { color: #fff; }
.rsu-formcard__s {
  margin: 0 0 var(--rsu-s3) !important;
  font-size: var(--rsu-fs-sm); line-height: 1.6;
  color: var(--rsu-muted);
}
.rsu-formcard--dark .rsu-formcard__s { color: #B9C8D5; }

/* Fluent Forms inside the card — styled to the design system. */
.rsu-formcard .ff-el-group { margin-bottom: var(--rsu-s2); }
.rsu-formcard .ff-el-input--label label {
  font-size: var(--rsu-fs-micro); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--rsu-muted); margin-bottom: .3rem;
}
.rsu-formcard--dark .ff-el-input--label label { color: #93A6B6; }
.rsu-formcard input[type="text"],
.rsu-formcard input[type="email"],
.rsu-formcard input[type="tel"],
.rsu-formcard input[type="number"],
.rsu-formcard input[type="date"],
.rsu-formcard input[type="url"],
.rsu-formcard select,
.rsu-formcard textarea {
  width: 100% !important;
  font-size: var(--rsu-fs-sm);
  padding: .8rem .95rem;
  border-radius: var(--rsu-radius-sm) !important;
  border: 1px solid var(--rsu-line-strong) !important;
  background: #FBFCFD !important;
  color: var(--rsu-ink) !important;
  box-shadow: none;
  transition: border-color .18s var(--rsu-ease), box-shadow .18s var(--rsu-ease);
}
.rsu-formcard--dark input[type="text"],
.rsu-formcard--dark input[type="email"],
.rsu-formcard--dark input[type="tel"],
.rsu-formcard--dark input[type="number"],
.rsu-formcard--dark select,
.rsu-formcard--dark textarea {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.rsu-formcard--dark ::placeholder { color: #7FA2B8; }
.rsu-formcard input:focus, .rsu-formcard select:focus,
.rsu-formcard textarea:focus {
  outline: none;
  border-color: var(--rsu-accent) !important;
  box-shadow: 0 0 0 3px rgba(0,160,224,.22) !important;
  background: #fff !important;
}
/* ---- Fluent Forms multi-select (Choices.js): the dropdown panel was
   rendering white-on-white. Explicit ink-on-white with a highlighted hover,
   compact chips in the brand accent. Scoped to form cards. ---- */
.rsu-formcard .choices { margin-bottom: 0 !important; }
.rsu-formcard .choices__inner {
  min-height: 34px !important;
  padding: .2rem .5rem !important;
  background: #FBFCFD !important;
  border: 1px solid var(--rsu-line-strong) !important;
  border-radius: var(--rsu-radius-sm) !important;
  font-size: .8rem;
}
.rsu-formcard .is-focused .choices__inner,
.rsu-formcard .is-open .choices__inner {
  border-color: var(--rsu-accent) !important;
  box-shadow: 0 0 0 3px rgba(0,160,224,.22) !important;
  background: #fff !important;
}
.rsu-formcard .choices__list--multiple .choices__item {
  background: var(--rsu-accent) !important;
  border: 0 !important;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 600;
  padding: .18rem .45rem;
  margin: 2px 4px 2px 0;
}
.rsu-formcard .choices__button { border-left-color: rgba(255,255,255,.5) !important; }
.rsu-formcard .choices__input {
  background: transparent !important;
  font-size: .78rem !important;
  margin-bottom: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: .2rem 0 !important;
}
.rsu-formcard .choices__placeholder { color: var(--rsu-muted); opacity: 1; }
.rsu-formcard .choices__list--dropdown,
.rsu-formcard .choices[data-type*="select"] .choices__list[aria-expanded] {
  background: #fff !important;
  border: 1px solid var(--rsu-line-strong) !important;
  border-radius: var(--rsu-radius-sm);
  box-shadow: var(--rsu-shadow-lg);
  z-index: 60;
}
.rsu-formcard .choices__list--dropdown .choices__item,
.rsu-formcard .choices__list[aria-expanded] .choices__item {
  color: var(--rsu-ink) !important;
  font-size: .82rem;
  padding: .55rem .75rem !important;
  opacity: 1 !important;
}
.rsu-formcard .choices__list--dropdown .choices__item.is-highlighted,
.rsu-formcard .choices__list[aria-expanded] .choices__item.is-highlighted {
  background: var(--rsu-accent-wash) !important;
  color: var(--rsu-accent-dark) !important;
}
.rsu-formcard .choices__item--disabled { color: var(--rsu-muted) !important; }

/* native selects: dark text + custom caret, options readable everywhere */
.rsu-formcard select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230080B3' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .6rem center !important;
  padding-right: 1.6rem !important;
}
.rsu-formcard select option { color: var(--rsu-ink); background: #fff; }

/* FF composite rows (name fields, address pairs) keep a clean gap */
.rsu-formcard .ff-t-container { display: flex; gap: .75rem; }
.rsu-formcard .ff-t-container .ff-t-cell { flex: 1 1 0; min-width: 0; }
.rsu-formcard .ff-btn-submit,
.rsu-formcard button[type="submit"] {
  width: 100%;
  background: var(--rsu-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--rsu-radius-sm) !important;
  font-weight: 700 !important;
  font-size: var(--rsu-fs-sm) !important;
  letter-spacing: .02em;
  padding: 1rem 1.5rem !important;
  cursor: pointer;
  box-shadow: var(--rsu-shadow-accent);
  transition: background-color .2s var(--rsu-ease), transform .2s var(--rsu-ease);
}
.rsu-formcard .ff-btn-submit:hover,
.rsu-formcard button[type="submit"]:hover {
  background: var(--rsu-accent-dark) !important;
  transform: translateY(-1px);
}
.rsu-formcard .ff-el-is-error input,
.rsu-formcard .ff-el-is-error textarea { border-color: #E5484D; }
.rsu-formcard .ff-upload-region {
  border: 1px dashed var(--rsu-line-strong);
  border-radius: var(--rsu-radius-sm);
  background: var(--rsu-surface);
}
.rsu-formcard--dark .ff-upload-region {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.25);
  color: #B9C8D5;
}
/* raw shortcode text in the static preview */
.rsu-formcard__body > p:only-child { color: var(--rsu-muted); font-size: var(--rsu-fs-sm); }

/* ------------------------------------------------ compact hero form ------
   Scoped to .rsu-hero only; the quote page keeps its roomy layout.

   Two lessons from the live deploy are encoded here:
   1. Fluent Forms already lays out its own field columns (the form was built
      with paired fields). We do NOT impose a second grid on top — doing so
      halved the halves and shredded the layout. FF's flow is left alone;
      only density, borders and type are restyled.
   2. FF's stylesheet loads after the theme and strips input chrome, so the
      input treatment is asserted with !important. */

.rsu-hero .rsu-formcard {
  padding: 22px 24px 24px;
  max-width: 500px;
  margin-left: auto !important;
}

/* Fluent Forms' own wrapper adds chrome and a phantom top gap inside the
   card. Flatten it completely — the card supplies all the chrome. This
   replaces the inspect-element hacks (inner white panel + negative margin). */
.rsu-hero .rsu-formcard .fluentform,
.rsu-hero .rsu-formcard .fluentform > div,
.rsu-hero .rsu-formcard form.frm-fluent-form {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
}
.rsu-hero .rsu-formcard .ff-el-group:first-child { margin-top: 0 !important; }
.rsu-hero .rsu-formcard .ff-el-group:last-child { margin-bottom: 0 !important; }
.rsu-hero .rsu-formcard .ff-el-input--content { margin: 0; }
.rsu-hero .rsu-formcard--light { position: relative; }
.rsu-hero .rsu-formcard--light::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--rsu-accent), var(--rsu-accent-dark));
  border-radius: var(--rsu-radius-lg) var(--rsu-radius-lg) 0 0;
}
.rsu-hero .rsu-formcard__t {
  font-size: 1.35rem;
  margin-bottom: .15rem !important;
  text-transform: capitalize;
}
.rsu-hero .rsu-formcard__s { font-size: .78rem; margin-bottom: .75rem !important; }
.rsu-hero .rsu-formcard__k { margin-bottom: .3rem !important; }

/* density only — Fluent Forms keeps its own field flow and column pairs */
.rsu-hero .rsu-formcard .ff-el-group { margin-bottom: .6rem !important; }
.rsu-hero .rsu-formcard .ff-el-input--label label {
  font-size: 10px !important;
  letter-spacing: .05em;
  line-height: 1.3;
  margin-bottom: .2rem !important;
}
.rsu-hero .rsu-formcard input[type="text"],
.rsu-hero .rsu-formcard input[type="email"],
.rsu-hero .rsu-formcard input[type="tel"],
.rsu-hero .rsu-formcard input[type="number"],
.rsu-hero .rsu-formcard input[type="date"],
.rsu-hero .rsu-formcard select {
  padding: .45rem .6rem !important;
  font-size: .8rem !important;
  min-height: 32px !important;
  height: 32px !important;
}
.rsu-hero .rsu-formcard textarea {
  padding: .45rem .6rem !important;
  font-size: .8rem !important;
  min-height: 46px !important;
  max-height: 58px;
  resize: none;
}
.rsu-hero .rsu-formcard ::placeholder { font-size: .74rem; }
.rsu-hero .rsu-formcard .ff-el-help-message,
.rsu-hero .rsu-formcard .ff-el-tooltip { display: none !important; }
.rsu-hero .rsu-formcard .ff-btn-submit,
.rsu-hero .rsu-formcard button[type="submit"] {
  padding: .75rem 1.2rem !important;
  font-size: .82rem !important;
  margin-top: .2rem;
}
.rsu-hero .rsu-formcard .ff-upload-region { padding: .45rem !important; font-size: .72rem; }

/* home hero: tighter vertical padding so the form fits a 768px laptop */
.rsu-hero--home { padding-block: clamp(1.75rem, .9rem + 2.6vw, 2.75rem); }

/* balance the two hero columns for the form layout */
.rsu-hero--home .rsu-hero__cols.wp-block-columns {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5.4fr);
  align-items: center;
}
.rsu-hero__cols > .wp-block-column { align-self: center; }

/* --------------------------------------------------------- quote page form */

.entry-content .rsu-section--quoteform .rsu-wrap :is(.rsu-formcard) {
  max-width: 56rem;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --------------------------------------------------------- testimonials */

.rsu-tst {
  height: 100%;
  background: #fff;
  border: 1px solid var(--rsu-line);
  border-radius: var(--rsu-radius-lg);
  padding: var(--rsu-s4);
  box-shadow: var(--rsu-shadow);
  position: relative;
  transition: transform .25s var(--rsu-ease-out), box-shadow .25s var(--rsu-ease-out);
}
.rsu-tst:hover { transform: translateY(-4px); box-shadow: var(--rsu-shadow-lg); }
.rsu-tst__mark {
  margin: 0 !important;
  font-family: Georgia, serif;
  font-size: 3rem; line-height: .6;
  color: var(--rsu-accent);
}
.rsu-tst__q {
  margin: var(--rsu-s2) 0 var(--rsu-s3) !important;
  font-size: var(--rsu-fs-sm); line-height: 1.7;
  color: var(--rsu-body);
  font-style: italic;
}
.rsu-tst__who {
  margin: 0 !important;
  font-size: var(--rsu-fs-sm); line-height: 1.5;
  color: var(--rsu-muted);
  padding-top: var(--rsu-s2);
  border-top: 1px solid var(--rsu-line);
}
.rsu-tst__who strong { color: var(--rsu-ink); }

/* --------------------------------------------------------- media split */

.rsu-splitm.wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.rsu-splitm > .wp-block-column { flex-basis: auto !important; min-width: 0;
  align-self: center; }
@media (max-width: 899px) { .rsu-splitm.wp-block-columns { grid-template-columns: 1fr; } }
.rsu-media { position: relative; }
.rsu-media::before {
  content: ""; position: absolute;
  inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  border: 2px solid var(--rsu-accent);
  border-radius: var(--rsu-radius-lg);
  opacity: .35;
  pointer-events: none;
}
.rsu-media__img, .rsu-media__img img { margin: 0 !important; }
.rsu-media__img img {
  display: block; width: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rsu-radius-lg);
  box-shadow: var(--rsu-shadow-lg);
  background: linear-gradient(135deg, var(--rsu-ink), var(--rsu-ink-2));
}

/* --------------------------------------------------------- contact block */

.rsu-contact.wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.rsu-contact > .wp-block-column { flex-basis: auto !important; min-width: 0; }
@media (max-width: 899px) { .rsu-contact.wp-block-columns { grid-template-columns: 1fr; } }
.rsu-cl__list { margin-block: var(--rsu-s3) var(--rsu-s4) !important; }
.rsu-cl { margin: 0 0 var(--rsu-s2) !important; }
.rsu-cl__a {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: var(--rsu-fs-base); font-weight: 600;
  color: var(--rsu-ink); text-decoration: none;
}
a.rsu-cl__a:hover { color: var(--rsu-accent-dark); }
.rsu-cl__i {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--rsu-accent-wash);
  color: var(--rsu-accent-dark);
  border: 1px solid var(--rsu-line);
  border-radius: var(--rsu-radius-sm);
  font-size: 1.1rem;
}

/* --------------------------------------------------------- mini cards */

.rsu-card--mini { padding: var(--rsu-s2) var(--rsu-s2) var(--rsu-s3); }
.rsu-card--mini .rsu-card__fig {
  margin: calc(var(--rsu-s2) * -1) calc(var(--rsu-s2) * -1) var(--rsu-s2);
}
.rsu-card--mini .rsu-card__fig img { aspect-ratio: 400 / 190; }
.rsu-card--mini .rsu-card__title { font-size: var(--rsu-fs-base); margin-bottom: var(--rsu-s1); }
.rsu-cols--mini { gap: var(--rsu-s2) !important; }

/* ------------------------------------------------ centred section headers
   Standalone grid sections read better with a centred header; editorial
   splits keep their left rail. Specificity matches the defensive layer via
   .rsu-wrap, and being later in the file wins the tie. */
.entry-content :is(.rsu-section--cards, .rsu-section--steps, .rsu-section--tst,
                   .rsu-section--links)
  .rsu-wrap > :is(.rsu-h2, .rsu-lead, .rsu-eyebrow, .rsu-microcopy) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
.entry-content :is(.rsu-section--cards, .rsu-section--steps, .rsu-section--tst,
                   .rsu-section--links) .rsu-wrap > .rsu-h2::after {
  margin-left: auto; margin-right: auto;
}
.entry-content :is(.rsu-section--cards, .rsu-section--steps, .rsu-section--tst,
                   .rsu-section--links) .rsu-wrap > .rsu-eyebrow {
  justify-content: center;
}
.entry-content :is(.rsu-section--cards, .rsu-section--steps, .rsu-section--tst,
                   .rsu-section--links) .rsu-wrap > .rsu-lead { max-width: 62ch; }

/* ------------------------------------------------ stat card polish */
.rsu-stat__l { min-height: 2.6em; }
.rsu-stat__v { display: flex; align-items: baseline; gap: .1em; }

/* ==========================================================================
   12. HEADER + STICKY MOBILE BAR
   ========================================================================== */

/* Kadence builds the header; this adds the scroll behaviour and the accent
   underline on the current page. */
#masthead, .site-header { transition: box-shadow .3s var(--rsu-ease), background-color .3s var(--rsu-ease); }
body.rsu-scrolled #masthead,
body.rsu-scrolled .site-header { box-shadow: 0 6px 26px rgba(11,22,34,.10); }

.main-navigation .menu > li > a { position: relative; }
.main-navigation .menu > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 2px; background: var(--rsu-accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .28s var(--rsu-ease-out);
}
.main-navigation .menu > li > a:hover::after,
.main-navigation .menu > li.current-menu-item > a::after,
.main-navigation .menu > li.current-page-ancestor > a::after {
  transform: scaleX(1); transform-origin: left;
}

.rsu-stickybar { display: none; }
@media (max-width: 781px) {
  .rsu-stickybar {
    display: grid; grid-template-columns: 1fr 1.25fr;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 999;
    background: rgba(11,22,34,.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.10);
    padding: .55rem; gap: .5rem;
    box-shadow: 0 -6px 22px rgba(11,22,34,.24);
    padding-bottom: calc(.55rem + env(safe-area-inset-bottom));
    transform: translateY(110%);
    transition: transform .35s var(--rsu-ease-out);
  }
  body.rsu-scrolled .rsu-stickybar { transform: none; }
  .rsu-stickybar a {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 48px; border-radius: var(--rsu-radius-sm);
    font-size: var(--rsu-fs-sm); font-weight: 700; text-decoration: none;
    transition: transform .15s var(--rsu-ease);
  }
  .rsu-stickybar a:active { transform: scale(.97); }
  .rsu-stickybar a:first-child { background: rgba(255,255,255,.10); color: #fff; }
  .rsu-stickybar a:last-child  { background: var(--rsu-accent); color: #fff; }
  body { padding-bottom: 70px; }
}

/* Scroll progress bar — a small, genuinely useful cue on long product pages. */
.rsu-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--rsu-accent-dark), var(--rsu-accent));
  z-index: 1000; pointer-events: none;
  transition: width .1s linear;
}

/* ==========================================================================
   13. MOTION / PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rsu-reveal { opacity: 1 !important; transform: none !important; }
  .rsu-h2::after, .rsu-step::before { transform: scaleX(1); width: 100%; }
  .rsu-card:hover { transform: none; }
  .rsu-hero::before { animation: none; }
}

@media print {
  .rsu-hero, .rsu-cta, .rsu-stickybar, .rsu-progress,
  .rsu-section--datasheet, .rsu-section--links { display: none !important; }
  .rsu-reveal { opacity: 1 !important; transform: none !important; }
  .rsu-faq__item { border-bottom: 1px solid #999; }
  .rsu-faq__item > p { display: block !important; }
  .rsu-table table { border: 1px solid #333; font-size: 10pt; box-shadow: none; }
  .rsu-table thead th { background: #eee !important; color: #000 !important; }
  .rsu-figure { break-inside: avoid; box-shadow: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   14. KADENCE PAGE CHROME
   The pages ship their own <h1> inside the hero and every section is a
   full-width block, so Kadence's boxed wrapper and title area must stand
   down. The auto-setup plugin also sets the matching Kadence post meta —
   this is the safety net that guarantees the result if those meta keys ever
   change, so the layout can never silently regress.
   ========================================================================== */

.page .entry-hero,
.page .entry-hero-container-inner,
.page .page-title,
.page .entry-header .entry-title { display: none !important; }

.page .content-container,
.page .content-area,
.page .site-container,
.page .entry-content-wrap {
  max-width: 100% !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}
.page .entry-content-wrap { padding-block: 0 !important; }

.page .content-bg,
.page .entry.single-entry,
.page .content-area .entry {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.page .primary-sidebar { display: none; }

/* Full-bleed sections regardless of the wrapper's own constraints. */
.page .entry-content > .alignfull,
.page .entry-content .wp-block-group.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ==========================================================================
   15. MOBILE LAYER
   One consolidated pass, written to out-rank every desktop rule above it
   (the home-hero column split was beating the stack rule on specificity —
   that class of bug is closed here with !important on layout-critical
   properties). Breakpoints: 920 stack heroes, 781 grids, 600 density.
   ========================================================================== */

@media (max-width: 920px) {
  /* every split hero stacks: content first, panel/form second */
  .rsu-hero .rsu-hero__cols.wp-block-columns,
  .rsu-hero--home .rsu-hero__cols.wp-block-columns {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  .rsu-hero .rsu-formcard,
  .rsu-hero .rsu-hpanel {
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  .rsu-hero { padding-block: 2.25rem !important; }
  .rsu-hero__title {
    max-width: none;
    overflow-wrap: normal;
    hyphens: none;
  }
  .rsu-hero .rsu-formcard__t { font-size: 1.15rem; }
}

@media (max-width: 899px) {
  .rsu-splitm.wp-block-columns,
  .rsu-contact.wp-block-columns,
  .rsu-split.wp-block-columns {
    grid-template-columns: 1fr !important;
    gap: var(--rsu-s3) !important;
  }
  .rsu-media { margin-top: var(--rsu-s2); }
  .rsu-media::before { inset: .9rem -.9rem -.9rem .9rem; }
}

@media (max-width: 781px) {
  .rsu-section { padding-block: 2.5rem; }

  /* stats: 2x2 card grid instead of a single tall stack */
  .rsu-stats.wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .6rem !important;
  }
  .rsu-stats > .wp-block-column { flex-basis: auto !important; min-width: 0; }
  .rsu-stat { padding: .9rem .9rem .9rem calc(.9rem + 4px); }
  .rsu-stat__l { min-height: 0; font-size: .74rem; }

  /* related mini-cards: 2-up */
  .rsu-cols--mini.wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .6rem !important;
  }
  .rsu-cols--mini > .wp-block-column { flex-basis: auto !important; min-width: 0; }

  /* datasheet card stacks with the button full width */
  .rsu-ds__cols.wp-block-columns { grid-template-columns: 1fr !important; gap: var(--rsu-s3) !important; }
  .rsu-ds .rsu-btn--primary { width: 100%; }
  .rsu-ds .rsu-btn--primary .wp-block-button__link { width: 100%; text-align: center; }

  /* sizes card: same treatment, button full width */
  .rsu-sizes__cols.wp-block-columns { grid-template-columns: 1fr !important; gap: var(--rsu-s3) !important; }
  .rsu-sizes .rsu-btn--primary { width: 100%; }
  .rsu-sizes .rsu-btn--primary .wp-block-button__link { width: 100%; text-align: center; }

  /* roadmap cards: badge sits inline, no floating overlap when stacked */
  .rsu-section--steps .rsu-cols::before { display: none; }
  .rsu-step { margin-top: 30px; }

  /* quote band tightens */
  .rsu-quote__t { font-size: 1.15rem; padding-top: 2rem; }
  .rsu-quote__t::before { font-size: 3.2rem; }

  /* hub/product hero panel caption smaller */
  .rsu-hpanel__cap { font-size: 10px; }
}

@media (max-width: 600px) {
  /* CTAs become full-width tap targets */
  .rsu-btns .wp-block-button { flex: 1 1 100%; }
  .rsu-btns .wp-block-button__link { display: block; width: 100%; text-align: center; }
  .rsu-cta .rsu-btns .wp-block-button { flex: 1 1 100%; }

  .rsu-h2 { font-size: 1.35rem; }
  .rsu-lead { font-size: .95rem; }
  .rsu-card { padding: var(--rsu-s3); }
  .rsu-card__fig { margin: calc(var(--rsu-s3) * -1) calc(var(--rsu-s3) * -1) var(--rsu-s2); }
  .rsu-formcard { padding: 1.15rem !important; }
  .rsu-tst { padding: var(--rsu-s3); }

  /* centred section headers stay centred but eyebrow rule shrinks */
  .rsu-eyebrow::before { width: 18px; }

  /* spec table: slightly smaller type, scroll hint retained */
  .rsu-table table { font-size: .78rem; }
  .rsu-table thead th { padding: .7rem .6rem; }
  .rsu-table tbody td { padding: .65rem .6rem; }
}

/* ==========================================================================
   16. UNIVERSAL MOBILE GUTTER
   One token, every band, !important — no section on any page can sit flush
   against the screen edge on mobile, whatever other rules say.
   ========================================================================== */

@media (max-width: 900px) {
  :root { --rsu-gutter-m: clamp(1.35rem, 5vw, 2rem); }

  .entry-content .rsu-section,
  .entry-content .rsu-hero,
  .entry-content .rsu-cta,
  .rsu-section, .rsu-hero, .rsu-cta {
    padding-left: var(--rsu-gutter-m) !important;
    padding-right: var(--rsu-gutter-m) !important;
  }

  /* inner containers must never cancel the gutter with negative margins */
  .rsu-wrap { margin-left: auto !important; margin-right: auto !important; }
}

/* guard against any horizontal scroll from full-bleed tricks */
html, body { overflow-x: clip; }