/** Shopify CDN: Minification failed

Line 396:0 Unexpected "<"
Line 438:0 Unexpected "<"

**/
/* Cabinet Screws - PDP rich content styles.
   GENERATED by _gql/golive/build_rich.py from
   mockups/pdp-v2/index.html lines 1488-1920 - the mockup's own
   dedicated <style> block. Every custom property is declared on
   #rc-global, so this cannot repaint Expanse's chrome and needs
   no scoping pass. */
/* ==========================================================================
   CABINET SCREWS - PDP RICH CONTENT
   Geometry ported 1:1 from the LIVE Century Made Shop section
   (reference/section-inline.css). Palette and type are Cabinet Screws' own,
   out of _shared/cs2.py. See build.py's docstring for every deviation.
   ========================================================================== */
#rc-global{
  /* the store's own palette. Nothing here is invented. */
  --rc-red:#ED2024;        /* border / icon / rule. FILL only under >=18.66px bold */
  --rc-ink:#292929;        /* the dark surface, and headings on light */
  --rc-body:#6B6F81;       /* 4.98:1 on white, 4.56:1 on --rc-band */
  --rc-rule:#D6D6D6;
  --rc-band:#F4F5FA;
  --rc-paper:#FFFFFF;
  /* on the dark ground red is 3.40:1, so it is never text there. This is. */
  --rc-mute:#B9BCC7;       /* 7.70:1 on --rc-ink */
  --rc-onink:#EFEFEF;      /* 12.8:1 on --rc-ink */
  --rc-ease:cubic-bezier(.2,.7,.3,1);

  max-width:1200px;margin:0 auto;padding:26px 0 30px;   /* CMS exact */
  font-family:Montserrat,system-ui,-apple-system,sans-serif;
  color:var(--rc-body);-webkit-font-smoothing:antialiased;
}
.rc *{box-sizing:border-box}
/* Any flex or grid child holding text needs min-width:0. Standing rule for
   this codebase - min-width:auto has now caused two overflows that showed up
   at ONE viewport width only. */
.rc-track>*,.rc-hero-content,.rc-split-content,.rc-card-body,.rc-faq-q{min-width:0}
.rc-nowrap{white-space:nowrap}

/* the drafting register the drawings are drawn in */
.rc-dark{--art-ink:var(--rc-onink);--art-key:var(--rc-red);
  --art-dim:var(--rc-mute);--art-ground:var(--rc-ink);--art-hatch:#6B6F81}
.rc-light{--art-ink:var(--rc-ink);--art-key:var(--rc-red);
  --art-dim:var(--rc-body);--art-ground:var(--rc-paper);--art-hatch:#B9BCC7}

/* ---- shared type ------------------------------------------------------- */
/* CMS: .32em tracking, 14px, uppercase, centred. Exact. */
.rc-eyebrow{letter-spacing:.32em;text-transform:uppercase;font-size:14px;
  font-weight:600;color:var(--rc-body);text-align:center;margin:0 0 12px}
.rc-eyebrow--on{color:var(--rc-mute)}
.rc-eyebrow--left{text-align:left}
/* CMS's .cms-rc__serif is Playfair 400. CS has no serif, so the display face
   is Montserrat 800 and the sizes come down ~15% - Montserrat carries a much
   larger x-height, so it reads the same optical size smaller. */
.rc-display{font-weight:800;color:var(--rc-ink);line-height:1.14;margin:0;
  letter-spacing:-.015em}
.rc-rule{width:0;height:2px;background:var(--rc-red);margin:26px 0;
  transition:width 1s var(--rc-ease) .3s}          /* CMS: 1px, 62px, 1s, .3s */
.rc-reveal.is-in .rc-rule{width:62px}

/* ---- M1: brand-story carousel ---------------------------------------- */
.rc-car-wrap{position:relative;background:var(--rc-ink);margin-bottom:16px;
  overflow:hidden}
/* CMS parallaxes a PHOTOGRAPH here at opacity .22. CS has no photography for
   it, so the ground carries the same 45-degree section hatching the M5 drawing
   uses - the motif echoing, at 4% so it never competes with the cards. */
.rc-car-bg{position:absolute;inset:-40px 0;opacity:.5;will-change:transform;
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.05) 0 1px,transparent 1px 14px)}
.rc-car-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(41,41,41,.55),rgba(41,41,41,.86))}
.rc-car-inner{position:relative;padding:44px 0 36px}        /* CMS exact */
.rc-car-header{text-align:center;margin:0 0 26px}
.rc-car-header .rc-eyebrow{margin-bottom:16px}              /* CMS exact */
.rc-logo{display:block;width:230px;height:auto;margin:0 auto}
.rc-car-shell{position:relative}
/* CMS: gap 20, padding 6/4/18, x mandatory snap, grab cursor, no scrollbar */
.rc-track{display:flex;gap:20px;overflow-x:auto;padding:6px 4px 18px;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  cursor:grab}
.rc-track::-webkit-scrollbar{display:none}
.rc-track.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rc-track:focus-visible{outline:2px solid var(--rc-mute);outline-offset:3px}
.rc-card{flex:0 0 305px;scroll-snap-align:start;display:flex;
  flex-direction:column;text-decoration:none;color:var(--rc-ink);opacity:0;
  transform:translateY(18px);animation:rc-cardIn .7s var(--rc-ease) forwards}
.rc-card:nth-child(1){animation-delay:.05s}
.rc-card:nth-child(2){animation-delay:.15s}
.rc-card:nth-child(3){animation-delay:.25s}
.rc-card:nth-child(4){animation-delay:.35s}
.rc-card:nth-child(5){animation-delay:.45s}
.rc-card:nth-child(6){animation-delay:.55s}
@keyframes rc-cardIn{to{opacity:1;transform:none}}
/* intro card: logo, then ONE paragraph. No eyebrow, no heading - Brandon
   corrected this twice on the B&B build. */
.rc-card--intro{background:rgba(41,41,41,.72);backdrop-filter:blur(3px);
  border:1px solid rgba(185,188,199,.4);padding:30px 26px;color:var(--rc-onink)}
.rc-card--intro .rc-logo{width:180px;margin:0 0 4px}
.rc-card--intro p{font-size:14px;line-height:1.72;font-weight:400;
  margin:18px 0 0;color:var(--rc-onink)}
.rc-card--quote{background:transparent;justify-content:center;padding:30px 22px;
  flex-basis:350px;position:relative}                        /* CMS exact */
.rc-qmark{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  font-size:120px;line-height:1;font-weight:800;
  color:rgba(255,255,255,.10);pointer-events:none}
.rc-q-eyebrow{letter-spacing:.32em;font-size:14px;color:var(--rc-mute);
  text-transform:uppercase;text-align:center;margin:0 0 16px;font-weight:600}
.rc-q-rule{width:36px;height:2px;background:var(--rc-red);margin:0 auto 18px}
.rc-quote{position:relative;color:var(--rc-onink);font-size:17px;
  line-height:1.62;font-weight:500;text-align:center;margin:0}
.rc-card--col{background:var(--rc-paper);
  transition:transform .4s var(--rc-ease),box-shadow .4s}
.rc-card--col:hover{transform:translateY(-8px);
  box-shadow:0 22px 44px rgba(0,0,0,.5)}
.rc-card--col:focus-visible{outline:2px solid var(--rc-mute);outline-offset:3px}
.rc-card-img{height:215px;overflow:hidden;position:relative;
  background:var(--rc-paper)}                                /* CMS: 215px */
/* CONTAIN, not CMS's `cover`. CMS's tiles are lifestyle photographs, which
   crop happily. These are vendor product shots of one screw on white, framed
   to FILL - `cover` on a square source in a 305x215 box cropped the head and
   the point off and the screws rendered as lollipops. Found on the render, not
   in the diff. `contain` on a white ground shows the whole part. */
.rc-card-img-inner{width:100%;height:100%;background-size:contain;
  background-repeat:no-repeat;
  background-position:center;transition:transform .8s var(--rc-ease)}
.rc-card--col:hover .rc-card-img-inner{transform:scale(1.07)}
.rc-sheen{position:absolute;top:0;bottom:0;left:-80%;width:55%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),
  transparent);transform:skewX(-18deg);transition:left .8s var(--rc-ease);
  pointer-events:none}
.rc-card--col:hover .rc-sheen{left:130%}
.rc-card-body{background:var(--rc-ink);color:var(--rc-onink);
  padding:22px 20px 24px;flex:1;position:relative}
/* CMS runs a brass-to-transparent hairline here. Red as a RULE is exactly what
   the one-red law permits. */
.rc-card-body::before{content:'';position:absolute;top:0;left:20px;right:20px;
  height:2px;background:linear-gradient(90deg,var(--rc-red),transparent)}
.rc-card-title{letter-spacing:.1em;text-transform:uppercase;font-size:15px;
  font-weight:800;margin:0 0 9px;color:#fff}
.rc-card-copy{font-size:14px;line-height:1.65;color:var(--rc-mute);
  margin:0 0 14px}
.rc-card-link{font-size:14px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rc-onink);font-weight:600}
.rc-lnk{background:linear-gradient(var(--rc-red),var(--rc-red)) 0 100%/0 2px
  no-repeat;transition:background-size .4s var(--rc-ease),color .3s;
  padding-bottom:2px}
.rc-card--col:hover .rc-lnk{background-size:100% 2px}
.rc-arr{font-size:14px;display:inline-block;transition:transform .3s}
.rc-card--col:hover .rc-arr{transform:translateX(5px)}
/* CMS: 46px circle, 10px in, [disabled] opacity .2 */
/* Ground is .7, matching the CMS reference exactly. It was .82, which is a
   divergence from a section whose rule is "match CMS literally" - and the
   arrow sits over the quote card's body copy at some scroll positions, so
   the extra opacity was obscuring characters the reference does not. */
.rc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--rc-mute);
  background:rgba(41,41,41,.7);color:var(--rc-onink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .25s;
  padding:0}
.rc-arrow:hover{background:var(--rc-red);border-color:var(--rc-red);color:#fff;
  transform:translateY(-50%) scale(1.07)}
/* CMS leaves a disabled arrow at opacity .2. Ported as-is, that put a faint
   46px disc on top of the intro card's body copy at scroll 0 - the first thing
   a reader meets. The arrow is hidden while disabled instead: the dots and the
   next arrow still advertise that the row scrolls, and once it IS enabled it
   only ever overlays a tile photograph. Deliberate improvement on the
   reference, not a porting slip. */
.rc-arrow[disabled]{opacity:0;visibility:hidden;pointer-events:none}
.rc-arrow--prev{left:10px}.rc-arrow--next{right:10px}
.rc-edge{position:absolute;top:0;bottom:0;width:58px;z-index:2;
  pointer-events:none}                                       /* CMS exact */
.rc-edge--l{left:0;background:linear-gradient(90deg,var(--rc-ink),transparent)}
.rc-edge--r{right:0;background:linear-gradient(270deg,var(--rc-ink),transparent)}
.rc-dots{display:flex;gap:9px;justify-content:center;margin-top:22px}
.rc-dot{width:8px;height:8px;border-radius:50%;background:rgba(185,188,199,.34);
  border:none;padding:0;cursor:pointer;transition:all .3s}
.rc-dot--on{background:var(--rc-mute);width:26px;border-radius:4px}

/* ---- M2: finish swatches --------------------------------------------- */
.rc-fin{padding:64px 24px 56px;background:var(--rc-band);margin-bottom:16px;
  text-align:center}                                         /* CMS exact */
.rc-fin-h{font-size:34px}
.rc-fin-sub{color:var(--rc-body);font-size:15px;font-weight:400;
  margin:14px auto 44px;max-width:620px;line-height:1.6}
.rc-fin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  max-width:940px;margin:0 auto}                             /* CMS exact */
/* CMS's swatch is a fixed 128px circle. Fixed is right until it isn't: on the
   PDP the section sits inside a 22px page gutter, and at 320px
   2x128 + 24 gap + 48 module padding + 44 gutter = 372, which overflowed the
   page by 23px and dragged the sticky buy button out with it. The standalone
   page never showed it because it has no gutter. So the circle is FLUID with a
   128px ceiling: it is exactly CMS's 128px wherever there is room, and it can
   no longer overflow at any width. A second magic number would just move the
   breakpoint the bug hides behind. */
.rc-swatch{width:100%;max-width:128px;aspect-ratio:1/1;height:auto;
  border-radius:50%;margin:0 auto 18px;
  position:relative;overflow:hidden;background-size:cover;
  background-position:center;
  box-shadow:0 12px 28px rgba(41,41,41,.22),
    inset 0 0 0 1px rgba(255,255,255,.35);
  transition:transform .45s var(--rc-ease),box-shadow .45s} /* CMS exact */
.rc-fin-item:hover .rc-swatch{transform:scale(1.09) rotate(2deg);
  box-shadow:0 18px 36px rgba(41,41,41,.3),
    inset 0 0 0 1px rgba(255,255,255,.35)}
.rc-swatch-sheen{position:absolute;top:0;bottom:0;left:-90%;width:50%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),
  transparent);transform:skewX(-18deg);transition:left .7s var(--rc-ease)}
.rc-fin-item:hover .rc-swatch-sheen{left:140%}
.rc-fin-name{font-size:16px;font-weight:700;color:var(--rc-ink);margin:0 0 5px}
.rc-fin-note{font-size:14px;letter-spacing:.1em;color:var(--rc-body);margin:0;
  text-transform:uppercase}
.rc-fin-foot{margin:44px auto 0;max-width:640px;font-size:14px;line-height:1.6;
  color:var(--rc-body)}

/* ---- M3: dark hero --------------------------------------------------- */
.rc-hero{display:flex;background:var(--rc-ink);margin-bottom:16px;
  min-height:540px;overflow:hidden}                          /* CMS exact */
.rc-hero-art{flex:1 1 52%;position:relative;overflow:hidden;
  display:grid;place-items:center;padding:28px}
/* CMS's 90deg blend from transparent at 62% to the dark surface. Exact. */
.rc-hero-art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 62%,var(--rc-ink) 100%)}
.rc-hero-content{flex:1 1 48%;padding:64px 56px;display:flex;
  flex-direction:column;justify-content:center}              /* CMS exact */
.rc-hero-content .rc-eyebrow{margin:0}
.rc-hero-h{font-size:32px;color:#fff;margin:14px 0 0}
.rc-hero-p{color:var(--rc-onink);font-size:16px;line-height:1.8;margin:0}

/* ---- M4: split craft ------------------------------------------------- */
.rc-split{display:flex;margin-bottom:16px;min-height:500px;
  background:var(--rc-paper);overflow:hidden}                /* CMS exact */
.rc-split-artwrap{flex:1 1 50%;position:relative;
  padding:34px 0 34px 34px}                                  /* CMS exact */
.rc-split-art{position:relative;z-index:1;width:100%;height:100%;
  display:grid;place-items:center;background:var(--rc-band);
  border:1px solid var(--rc-rule)}
.rc-split-content{flex:1 1 50%;padding:64px 58px;display:flex;
  flex-direction:column;justify-content:center}              /* CMS exact */
.rc-split-h{font-size:40px}
.rc-split-p{color:var(--rc-body);font-size:16px;line-height:1.85;margin:0}

/* ---- M5: full-bleed section + hotspots ------------------------------- */
.rc-bleed{position:relative;margin-bottom:30px;background:var(--rc-ink);
  padding:44px 0 0}
.rc-bleed-head{text-align:center;padding:0 20px 30px}
.rc-bleed-h{color:#fff;font-size:28px}
/* THE mechanism: the wrapper is locked to the drawing's own aspect and the SVG
   renders `meet`, so a percentage anchor means the same point on the drawing at
   every viewport - in CSS, with nothing to fall out of sync. This is what
   replaces CMS's jisHotspotAlign(). */
/* Set at a readable MEASURE, not edge to edge. CMS's bleed is a full-width
   photograph and crops freely; a technical drawing has to be READ, and at
   1200px wide the panel was so wide that the screw - which is correctly ~14%
   of the panel thickness - rendered too small to see what it was doing. The
   full-width dark band stays; the drawing sits at 880px inside it. */
.rc-bleed-stage{position:relative;width:100%;max-width:880px;margin:0 auto;
  aspect-ratio:1000 / 660}
.rc-bleed-stage>.rc-art{position:absolute;inset:0}
.rc-hs{position:absolute;z-index:2}
.rc-hs-dot{width:30px;height:30px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.95);background:rgba(237,32,36,.72);
  color:#fff;cursor:pointer;position:relative;display:flex;
  align-items:center;justify-content:center;padding:0;
  transition:background .3s,transform .3s;
  margin:-15px 0 0 -15px}                                    /* CMS: 30px */
.rc-hs-dot::after{content:'';position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  animation:rc-pulse 2.4s ease-out infinite}                 /* CMS exact */
@keyframes rc-pulse{0%{transform:scale(.7);opacity:1}
  100%{transform:scale(1.5);opacity:0}}
/* CMS's dot carries a "+" that rotates to an x. CS's carries the callout
   NUMBER instead: it is a drafting callout, which is this store's register, and
   it is what lets the mobile list tie back to the drawing. */
.rc-hs-n{font-size:14px;font-weight:700;line-height:1}
.rc-hs:hover .rc-hs-dot,.rc-hs:focus-within .rc-hs-dot{background:var(--rc-red);
  transform:scale(1.1)}
.rc-hs-card{position:absolute;left:40px;top:50%;
  transform:translateY(-50%) translateX(-8px);min-width:215px;max-width:250px;
  background:rgba(41,41,41,.94);backdrop-filter:blur(4px);
  border:1px solid var(--rc-red);padding:15px 17px;text-decoration:none;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--rc-ease),transform .3s var(--rc-ease)}
.rc-hs:hover .rc-hs-card,.rc-hs:focus-within .rc-hs-card{opacity:1;
  pointer-events:auto;transform:translateY(-50%) translateX(0)}
.rc-hs--flip .rc-hs-card{left:auto;right:40px}              /* CMS exact */
.rc-hs-name{color:#fff;font-size:15px;font-weight:700;margin:0 0 4px}
.rc-hs-sub{color:var(--rc-mute);font-size:14px;margin:0 0 9px;line-height:1.5}
.rc-hs-link{color:var(--rc-onink);font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600}
/* the same table, reflowed. Desktop draws callouts on the drawing; below 900px
   they would overlap each other and the drawing is too short to hold them, so
   the numbered list takes over - exactly what the approved home centerpiece
   does. ONE source table, both layouts. */
.rc-hs-list{display:none;margin:0;padding:0 20px 36px;list-style:none}
.rc-hs-list li{display:flex;gap:14px;padding:16px 0;
  border-top:1px solid rgba(185,188,199,.28)}
.rc-hs-list b{flex:0 0 26px;height:26px;border-radius:50%;
  border:1px solid var(--rc-red);color:var(--rc-onink);font-size:14px;
  display:flex;align-items:center;justify-content:center}
.rc-hs-list .rc-hs-name{margin:0 0 3px}
.rc-hs-list a{color:var(--rc-onink);text-decoration:underline}

/* ---- M6: FAQ --------------------------------------------------------- */
.rc-faq{max-width:900px;margin:0 auto;padding:0 20px 30px}   /* CMS exact */
.rc-faq-item{border:1px solid var(--rc-rule);margin-bottom:15px;
  background:var(--rc-paper);transition:border-color .3s,box-shadow .3s}
.rc-faq-item:hover{border-color:var(--rc-body)}
.rc-faq-item[open]{border-color:var(--rc-red);
  box-shadow:0 8px 24px rgba(41,41,41,.07)}
.rc-faq-item>summary{display:flex;align-items:center;gap:18px;padding:18px 22px;
  cursor:pointer;list-style:none}                            /* CMS exact */
.rc-faq-item>summary::-webkit-details-marker{display:none}
.rc-faq-item>summary:focus-visible{outline:2px solid var(--rc-red);
  outline-offset:2px}
/* the Q badge is a red FILL under 15px type, which the one-red law forbids -
   so it is an OUTLINED badge: white ground, red border, ink label. Same
   treatment every small red control on this store already gets. */
.rc-faq-badge{background:var(--rc-paper);border:1px solid var(--rc-red);
  color:var(--rc-ink);font-weight:700;padding:6px 14px;font-size:14px;
  transition:background .3s}
.rc-faq-item[open] .rc-faq-badge{background:var(--rc-band)}
.rc-faq-q{flex:1;font-size:16px;font-weight:600;color:var(--rc-ink)}
.rc-chev{color:var(--rc-red);transition:transform .3s;flex:0 0 auto}
.rc-faq-item[open] .rc-chev{transform:rotate(180deg)}
.rc-faq-a{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--rc-ease)}          /* CMS exact */
.rc-faq-item[open] .rc-faq-a{grid-template-rows:1fr}
.rc-faq-a-in{overflow:hidden;padding:0 22px 0 76px;color:var(--rc-body);
  font-size:15px;line-height:1.75}
.rc-faq-item[open] .rc-faq-a-in{padding-bottom:20px}

/* ---- reveals + perf -------------------------------------------------- */
.rc-reveal{opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--rc-ease),transform .8s var(--rc-ease)}
.rc-reveal.is-in{opacity:1;transform:none}
.rc-stag>*{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--rc-ease),transform .7s var(--rc-ease)}
.rc-reveal.is-in .rc-stag>*{opacity:1;transform:none}
.rc-reveal.is-in .rc-stag>*:nth-child(1){transition-delay:.05s}
.rc-reveal.is-in .rc-stag>*:nth-child(2){transition-delay:.15s}
.rc-reveal.is-in .rc-stag>*:nth-child(3){transition-delay:.25s}
.rc-reveal.is-in .rc-stag>*:nth-child(4){transition-delay:.35s}
.rc-reveal.is-in .rc-stag>*:nth-child(5){transition-delay:.45s}
.rc-fin{content-visibility:auto;contain-intrinsic-size:auto 520px}
.rc-hero{content-visibility:auto;contain-intrinsic-size:auto 540px}
.rc-split{content-visibility:auto;contain-intrinsic-size:auto 500px}
.rc-faq{content-visibility:auto;contain-intrinsic-size:auto 420px}

@media(prefers-reduced-motion:reduce){
  .rc-reveal,.rc-stag>*,.rc-card{opacity:1;transform:none;animation:none;
    transition:none}
  .rc-reveal.is-in .rc-rule,.rc-rule{width:62px;transition:none}
  .rc-hs-dot::after{animation:none}
}
/* The STORE'S OWN motion switch, which is not the same thing as the OS one.
   The accessibility panel sets html[data-motion="off"] and 01-head.html answers
   it with `html[data-motion="off"] * { animation:none !important }`. The
   carousel cards start at opacity:0 and are brought in BY an animation - so
   with that switch on, the animation never runs and ALL SIX CARDS STAY
   INVISIBLE. The media query above cannot cover it: that is an OS preference,
   this is a button on the page. home-v2 hit the same trap and parked its
   centrepiece invisible. !important is required because the rule being
   overridden has it. */
html[data-motion="off"] #rc-global .rc-card,
html[data-motion="off"] #rc-global .rc-reveal,
html[data-motion="off"] #rc-global .rc-stag>*{
  opacity:1!important;transform:none!important}
html[data-motion="off"] #rc-global .rc-rule{width:62px!important}

/* ---- responsive: CMS's own breakpoint, plus the callout reflow ------- */
@media(max-width:900px){
  .rc-hs{display:none}
  .rc-hs-list{display:block}
}
@media(max-width:749px){
  .rc-hero,.rc-split{flex-direction:column}
  .rc-hero-art{min-height:280px}
  /* CMS's blank-band fix: in a column flex the wrap has no definite height, so
     a child's height:100% resolves to 0. grid stretches it instead. */
  .rc-split-artwrap{min-height:280px;padding:20px 0 20px 20px;display:grid}
  .rc-hero-content,.rc-split-content{padding:38px 24px}
  .rc-fin-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .rc-split-h{font-size:30px}.rc-fin-h{font-size:26px}
  .rc-hero-h{font-size:26px}.rc-bleed-h{font-size:24px}
  .rc-card{flex-basis:270px}
  .rc-card--quote{flex-basis:290px}
  .rc-quote{font-size:16px}
  .rc-faq-a-in{padding-left:22px}
  /* CMS kills the carousel parallax on mobile for the same reason it killed the
     bleed parallax: the effect is only ever aligned at one scroll position. */
  .rc-car-bg{transform:none !important;inset:0}
}
</style>
<style>

/* ---- the drawn register, shared by all three drawings ------------------ */
.rc-art{display:block;width:100%;height:100%}
.rc-art-line{fill:none;stroke:var(--art-ink);stroke-width:2.4;
  stroke-linejoin:round;stroke-linecap:round}
.rc-art-screw path,.rc-art-screw line{fill:none;stroke:var(--art-ink);
  stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.rc-art-plate{fill:none;stroke:var(--art-ink);stroke-width:1.4}
.rc-art-void{fill:var(--art-ground);stroke:var(--art-ink);stroke-width:2.4}
.rc-art-hatch{stroke:var(--art-hatch);stroke-width:1.2}
.rc-art-centre{fill:none;stroke:var(--art-ink);stroke-width:1.2;
  stroke-dasharray:22 7 4 7;opacity:.62}
.rc-art-dim{fill:none;stroke:var(--art-key);stroke-width:1.6}
.rc-art-ext{fill:none;stroke:var(--art-key);stroke-width:1.2;opacity:.9}
.rc-art text{font-family:Montserrat,system-ui,sans-serif;
  text-anchor:middle;fill:var(--art-ink)}
/* ---- label sizing ------------------------------------------------------
   These sizes are in USER UNITS, not pixels. The drawings sit in a 1000-unit
   viewBox on a stage that is 220px wide at 320 and 560px at 1280, so the same
   34-unit caption renders at 7.5px and at 19px. Measured, the floor was breached
   at 320, 375, 768 AND 1024 - worst 7.48px against a 14px sitewide minimum.

   Media queries cannot fix it: the stage scales CONTINUOUSLY inside each layout
   band (at 320 and at 749 - one band - the caption renders 7.5px and ~20px), so
   holding a constant rendered size needs font-size proportional to 1/stage,
   which CSS has no way to express. FIT_JS measures the stage and sets these
   multipliers; the defaults below are what an unscripted page gets.

   The letter-spacing is divided by the same multiplier so it stays put in
   absolute terms as the type grows - without that, the 15-character caption
   scales to 83% of the artboard at 320 instead of 75%. */
.rc-art-count{font-size:calc(46px * var(--art-fs-count,1));font-weight:800;
  letter-spacing:calc(.01em / var(--art-fs-count,1))}
.rc-art-cap{font-size:calc(34px * var(--art-fs-cap,1));font-weight:700;
  letter-spacing:calc(.18em / var(--art-fs-cap,1));
  fill:var(--art-dim)}
.rc-art text.rc-art-name{font-size:calc(30px * var(--art-fs-name,1));
  font-weight:800;letter-spacing:calc(.2em / var(--art-fs-name,1));
  text-anchor:start;fill:var(--art-ink)}

</style>

<style>
/* the section sits outside .wrap, so it needs the page's own
   gutter or it runs wider than the product block above
   it. 22px under 760px matches .cms-wrap/.wrap. */
.rc-host{padding:0 48px}
@media(max-width:760px){.rc-host{padding:0 22px}}