/*
Theme Name: Unit One
Template: hello-elementor
Version: 1.0.0
*/

/* ============================================================
   Night Ops - Red
   Palette is set here and only here. Everything below inherits
   from these five variables.
   ============================================================ */

/* Foundry Gridnik mis-draws two codepoints, and both surfaced as
   visible junk on the page.

   U+00A0 non-breaking space. Elementor's mini cart hardcodes an  
   between the product name and the price, so with prices hidden it
   rendered a phantom dagger on the end of every cart line.

   U+00B7 middle dot. Added 2026-08-27. Gridnik draws it as "ij". It is
   used as a separator in the configurator readouts and in every
   specification group heading, so this was visible on several pages.

   Both codepoints route to a system font. Nothing else changes, and a
   middle dot in Arial is indistinguishable at this size. */
@font-face{
  font-family:'RC Space';
  /* local() only resolves if the font is installed on the DEVICE, not
     on the server. The original list was Arial, Helvetica and
     Liberation Sans, which covers macOS, Windows and most Linux and
     covered every machine this was tested on.

     Android ships none of them. On Android this @font-face had no
     usable source at all, so the browser fell through to the next
     family in the stack, which is Foundry Gridnik, and both glyphs
     came back. The bug was never fixed on mobile; it was invisible
     from every desktop.

     The list below adds Android, iOS and the common Linux faces.
     Order is widest coverage first. */
  src:local('Roboto'),
      local('Noto Sans'),
      local('Droid Sans'),
      local('Arial'),
      local('Helvetica'),
      local('Helvetica Neue'),
      local('Segoe UI'),
      local('DejaVu Sans'),
      local('Liberation Sans'),
      local('sans-serif');
  unicode-range:U+00A0, U+00B7;
}

:root{
  /* Blue Ops palette. Ground and surfaces carry the agency build's navy so the
     site reads as Blue Ops rather than as a recolour of the Red Cat storefront.
     #1f2937 is the President's stated colour and it sits here as --rc-line,
     which is the role it plays in the agency codebase. */
  --rc-bg:#0A0E14; --rc-ink:#0F1620; --rc-panel:#141B25;
  --rc-line:#1F2937; --rc-line2:#2B3A4D;
  --rc-text:#E8EDF3; --rc-body:#AAB4C2; --rc-muted:#9AA6B6; --rc-dim:#838EA1;
  /* --rc-dim was #616C73 in night-ops-red, which measures 3.81:1 on the page
     background and fails WCAG AA for the 10 to 11px labels it is used on.
     #838EA1 clears AA on all three grounds: 5.85 on bg, 5.49 on ink, 5.23 on
     panel. The same fix is owed to the storefront. */
  --rc-accent:#3D7DFF;
  --rc-accent-hi:#6499FF;
  --rc-accent-soft:rgba(61,125,255,.10);
  --rc-accent-line:rgba(61,125,255,.045);
  --rc-on-accent:#FFFFFF;
  --rc-mono:'RC Space','IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --rc-display:'RC Space','Foundry Gridnik','FoundryGridnik','Chakra Petch','Saira Condensed',sans-serif;
  --rc-display-weight:700;
}

/* Local overrides. Put .rc-alt on any section to flip it to the other
   family palette without touching the theme. */
.rc-alt{
  --rc-accent:#00B9CF;
  --rc-accent-hi:#2ADAEF;
  --rc-accent-soft:rgba(0,185,207,.10);
  --rc-accent-line:rgba(0,185,207,.045);
  --rc-on-accent:#00171C;
}
/* Back-compat with the prototype class names. */
.rc-crimson{--rc-accent:#3D7DFF;--rc-accent-hi:#6499FF;--rc-accent-soft:rgba(61,125,255,.10);
  --rc-accent-line:rgba(61,125,255,.045);--rc-on-accent:#FFFFFF}
.rc-teal{--rc-accent:#00B9CF;--rc-accent-hi:#2ADAEF;--rc-accent-soft:rgba(0,185,207,.10);
  --rc-accent-line:rgba(0,185,207,.045);--rc-on-accent:#00171C}

/* ---------- baseline theme layer ---------- */
html{scroll-behavior:smooth}
body{margin:0;background:var(--rc-bg);color:var(--rc-text);
  font-family:var(--rc-mono);font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--rc-accent)}
.rc-skip{position:absolute;left:-9999px}
.rc-skip:focus{left:8px;top:8px;z-index:9999;background:var(--rc-accent);
  color:var(--rc-on-accent);padding:10px 16px}
.rc-quote-btn{display:inline-block;border:1px solid var(--rc-accent);background:var(--rc-accent);
  color:var(--rc-on-accent);padding:16px 28px;font-family:var(--rc-mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;text-decoration:none}
.rc-quote-btn:hover{background:var(--rc-accent-hi);border-color:var(--rc-accent-hi);color:var(--rc-on-accent)}
.rc-fallback{max-width:900px;margin:0 auto;padding:120px 24px}

/* The wrapper above exists for plain WordPress pages with no Elementor
   layout. If a page built in Elementor is left on the Default page
   layout instead of Elementor Full Width, its sections land inside it
   and get squeezed into a 900px column.

   That is not a subtle failure. Full-bleed sections such as
   .rc-psec--alt and the statement bands paint their background only
   across the column, so the page background shows down both sides as a
   stack of rectangles, and every section is indented twice.

   The correct fix is the page setting. This makes the theme survive
   someone forgetting, which is worth having because the symptom looks
   like a CSS bug and sends you hunting in the wrong place. */
.rc-fallback:has(.rc-psec, .rc-phero, .rc-phero--split, .rc-pband, .rc-syspage){
  max-width:none;
  padding:0;
}

/* ---------- page shell ---------- */
body.rc-storefront{background:var(--rc-bg);color:var(--rc-text);
  font-family:var(--rc-mono);font-size:15px;line-height:1.75;overflow-x:hidden}
body.rc-storefront h1,body.rc-storefront h2,body.rc-storefront h3,
body.rc-storefront h4,body.rc-storefront h5{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.015em;color:var(--rc-text)}

/* ---------- persistent HUD chrome ---------- */
.rc-chrome{position:relative;z-index:1}
.rc-hud{position:fixed;inset:0;pointer-events:none;z-index:5}
.rc-hud__grid{position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--rc-accent-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--rc-accent-line) 1px,transparent 1px);
  background-size:72px 72px}
.rc-hud__scan{position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.02) 0 1px,transparent 1px 3px)}
.rc-hud__vig{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(0,0,0,.55) 100%)}
.rc-brk{position:fixed;width:28px;height:28px;border:1px solid var(--rc-accent);opacity:.45;z-index:6;pointer-events:none}
.rc-brk--tl{top:90px;left:20px;border-right:0;border-bottom:0}
.rc-brk--tr{top:90px;right:20px;border-left:0;border-bottom:0}
.rc-brk--bl{bottom:20px;left:20px;border-right:0;border-top:0}
.rc-brk--br{bottom:20px;right:20px;border-left:0;border-top:0}
.rc-edge{position:fixed;z-index:6;pointer-events:none;font-size:10px;letter-spacing:.3em;color:var(--rc-dim)}
.rc-edge--l{left:6px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl}
.rc-edge--r{right:6px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl}

/* ---------- shared type ---------- */
.rc-eyebrow{font-size:12px;letter-spacing:.32em;color:var(--rc-accent);margin-bottom:22px;
  display:flex;align-items:center;gap:14px}
.rc-eyebrow:before{content:"";width:40px;height:1px;background:var(--rc-accent)}
.rc-h1 .elementor-heading-title{font-size:88px;line-height:.9;margin:0 0 26px}
.rc-h2 .elementor-heading-title{font-size:clamp(40px,5.8vw,80px);line-height:.94;margin:0 0 22px}
.rc-h2-mega .elementor-heading-title{font-size:clamp(42px,9.4vw,148px);line-height:.86;margin:0}
.rc-lede{color:var(--rc-body);font-size:16.5px;line-height:1.85;max-width:790px}
.rc-sub{max-width:720px;margin:36px auto 0;color:var(--rc-body);font-size:16px;line-height:1.85}

/* ---------- buttons ---------- */
.rc-btn .elementor-button{border:1px solid var(--rc-accent);background:var(--rc-accent);
  color:var(--rc-on-accent);padding:16px 28px;font-family:var(--rc-mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;border-radius:0;transition:.15s}
.rc-btn .elementor-button:hover{background:var(--rc-accent-hi);border-color:var(--rc-accent-hi);
  color:var(--rc-on-accent)}
.rc-btn--ghost .elementor-button{background:transparent;color:var(--rc-text);border-color:var(--rc-line2)}
.rc-btn--ghost .elementor-button:hover{background:transparent;border-color:var(--rc-accent);color:var(--rc-accent)}

/* ---------- hero ---------- */
.rc-hero{position:relative;min-height:90vh;display:flex;align-items:flex-end;
  padding:0 56px 78px;background-size:cover;background-position:center 32%;overflow:hidden}
.rc-hero:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,14,20,.96) 0%,rgba(10,14,20,.5) 52%,rgba(10,14,20,.86) 100%),
             linear-gradient(to top,var(--rc-bg) 2%,transparent 52%)}
.rc-hero > .elementor-container{position:relative;z-index:3;max-width:1100px}
.rc-hero .rc-lede{max-width:680px}

.rc-telem{position:absolute;right:56px;bottom:78px;border:1px solid var(--rc-line2);
  background:rgba(4,6,7,.88);padding:18px 20px;font-size:11.5px;letter-spacing:.12em;
  color:var(--rc-muted);min-width:260px;z-index:4}
.rc-telem__r{display:flex;justify-content:space-between;gap:16px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.05)}
.rc-telem__r:last-child{border:0}
.rc-telem__r b{color:var(--rc-accent);font-weight:500}

/* ---------- 4-column product rail ---------- */
.rc-railsec{padding:0}
.rc-rail-wrap{border-top:1px solid var(--rc-line);border-bottom:1px solid var(--rc-line);
  background:var(--rc-ink)}
.rc-rail-head{display:flex;justify-content:space-between;align-items:center;
  padding:22px 34px;border-bottom:1px solid var(--rc-line)}
.rc-rail-head__t{font-family:var(--rc-display);font-size:13px;letter-spacing:.26em;color:var(--rc-muted)}
.rc-rail-head__h{font-size:11px;letter-spacing:.2em;color:var(--rc-dim)}
.rc-rail{display:grid;grid-auto-flow:column;grid-auto-columns:25%;overflow-x:auto;
  scroll-snap-type:x mandatory;cursor:grab}
.rc-rail.is-drag{cursor:grabbing}
.rc-rail::-webkit-scrollbar{height:3px}
.rc-rail::-webkit-scrollbar-thumb{background:var(--rc-accent)}
.rc-rcard{scroll-snap-align:start;border-right:1px solid var(--rc-line);display:flex;
  flex-direction:column;min-height:430px;background:var(--rc-ink);transition:.22s;
  overflow:hidden;text-decoration:none}
.rc-rcard:hover{background:#0F1418}
.rc-rcard__thumb{display:block;height:160px;background-size:cover;background-position:center;
  opacity:.62;transition:.35s}
.rc-rcard:hover .rc-rcard__thumb{opacity:.95}
.rc-rcard__bd{display:flex;flex-direction:column;flex:1;padding:26px 26px 28px}
.rc-rcard__idx{font-size:11px;letter-spacing:.2em;color:var(--rc-accent)}
.rc-rcard__h{font-family:var(--rc-display);font-weight:var(--rc-display-weight);text-transform:uppercase;
  font-size:32px;line-height:1.05;margin:14px 0 6px;color:var(--rc-text)}
.rc-rcard__role{font-size:11px;letter-spacing:.18em;color:var(--rc-dim);margin-bottom:16px}
.rc-rcard__p{font-size:14px;color:var(--rc-body);line-height:1.7}
.rc-rcard__go{margin-top:auto;padding-top:24px;font-size:11.5px;letter-spacing:.2em;
  color:var(--rc-muted);display:flex;align-items:center;gap:10px}
.rc-rcard__go:after{content:"";flex:1;height:1px;background:var(--rc-line2)}
.rc-rcard:hover .rc-rcard__go{color:var(--rc-accent)}

/* ---------- story title ---------- */
.rc-story{padding:140px 34px 100px;text-align:center;position:relative}
.rc-story__k{font-size:12px;letter-spacing:.4em;color:var(--rc-accent);margin-bottom:30px}
.rc-reticle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(620px,78vw);aspect-ratio:1;border:1px solid var(--rc-accent);opacity:.14;
  border-radius:50%;pointer-events:none}
.rc-reticle:before,.rc-reticle:after{content:"";position:absolute;background:var(--rc-accent)}
.rc-reticle:before{left:50%;top:-40px;bottom:-40px;width:1px}
.rc-reticle:after{top:50%;left:-40px;right:-40px;height:1px}

/* ---------- story modules ---------- */
.rc-module{position:relative;min-height:100vh;display:flex;align-items:center;
  padding:120px 56px;overflow:hidden;border-top:1px solid var(--rc-line);
  background-size:cover;background-position:center}
.rc-module:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,14,20,.96) 0%,rgba(10,14,20,.62) 58%,rgba(10,14,20,.9) 100%),
             linear-gradient(to bottom,var(--rc-bg),transparent 20%,transparent 80%,var(--rc-bg))}
.rc-module > .elementor-container{position:relative;z-index:3;max-width:1460px}
.rc-modno{font-size:12px;letter-spacing:.3em;color:var(--rc-accent);margin-bottom:20px}
.rc-modr{position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-size:11px;letter-spacing:.22em;color:var(--rc-dim);line-height:2.5;text-align:right}

.rc-strip{display:flex;flex-wrap:wrap;margin-top:30px;border:1px solid var(--rc-line2);width:fit-content}
.rc-strip div{padding:14px 24px;border-right:1px solid var(--rc-line2);
  font-size:11.5px;letter-spacing:.16em;color:var(--rc-muted)}
.rc-strip div:last-child{border-right:0}
.rc-strip b{display:block;font-family:var(--rc-display);color:var(--rc-accent);
  font-size:17px;letter-spacing:.04em;margin-bottom:4px;font-weight:500}

.rc-sys{border:1px solid var(--rc-line2);background:rgba(12,17,24,.88);backdrop-filter:blur(8px);
  padding:34px;max-width:520px}
.rc-sys__r{display:grid;grid-template-columns:150px 1fr;gap:18px;font-size:13px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.055);color:var(--rc-muted)}
.rc-sys__r:last-child{border:0}
.rc-sys__r span{font-size:11px;letter-spacing:.18em;color:var(--rc-dim);padding-top:2px}
.rc-sys__r b{color:var(--rc-text);font-weight:500}

/* ---------- configurator (WooCommerce variable product) ---------- */

/* Woo variation form restyled as the two-step selector */
/* the select stays as the accessible control; style it like the HUD */


/* ---------- bundles ---------- */
.rc-bh{font-size:12px;letter-spacing:.26em;color:var(--rc-muted);display:flex;gap:14px;align-items:center}
.rc-bh:after{content:"";flex:1;height:1px;background:var(--rc-line)}
.rc-bcard{border:1px solid var(--rc-line2);background:rgba(6,9,11,.9);padding:26px;
  transition:.18s;height:100%}
.rc-bcard:hover{border-color:var(--rc-accent);background:var(--rc-accent-soft)}
.rc-bcard__tag{font-size:11px;letter-spacing:.2em;color:var(--rc-accent);margin-bottom:12px}
.rc-bcard h5{font-family:var(--rc-display);font-size:21px;margin:0 0 10px}
.rc-bcard p{font-size:14px;color:var(--rc-body);line-height:1.7;margin:0 0 18px}
.rc-bcard__act{font-size:11.5px;letter-spacing:.2em;color:var(--rc-muted);text-decoration:none}
.rc-bcard:hover .rc-bcard__act{color:var(--rc-accent)}

/* ============================================================
   WHOLE-CARD CLICK  (v1.70.0)
   The package cards already lit up on hover but only the small
   PACKAGE OPTIONS link was clickable, which is not what the hover
   promised and does not match the system cards, where the card is
   itself an anchor.

   Done with a stretched pseudo-element on the existing link rather
   than by wrapping the card in an anchor. The markup is authored in
   Elementor HTML widgets that get edited by hand, so a fix that
   needs no markup change cannot be undone by the next content edit.
   The real link keeps the focus ring and the status-bar URL, so
   keyboard and screen reader behaviour is unchanged.
   ============================================================ */

.rc-bcard{position:relative}
.rc-bcard__act:after{content:"";position:absolute;inset:0;z-index:1}
.rc-bcard:hover{cursor:pointer}

/* The overlay has to sit ABOVE the text, not below it. Raising the
   siblings instead was the obvious-looking move and it is wrong: the
   click then lands on a heading or a paragraph, which are not links,
   and nothing happens. The cost is that card text is no longer
   selectable, which is exactly how the system cards already behave
   because those are anchors end to end. */
.rc-bcard__act{position:static}

/* A card whose link has not been pointed anywhere yet should not
   pretend to be clickable. */
.rc-bcard__act[href="#"]:after,
.rc-bcard__act:not([href]):after{content:none}
.rc-bcard:has(.rc-bcard__act[href="#"]):hover{cursor:default}

/* ---------- disclaimer ---------- */
.rc-disc{padding:52px 56px;border-top:1px solid var(--rc-line);background:var(--rc-ink)}
.rc-disc p{font-size:13.5px;color:var(--rc-muted);line-height:1.85;max-width:1150px;margin:0}
.rc-disc b{color:var(--rc-text)}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .rc-brk,.rc-edge,.rc-telem,.rc-modr{display:none}
  .rc-hero,.rc-module{padding-left:22px;padding-right:22px}
  .rc-rail{grid-auto-columns:80%}
  .rc-sys__r{grid-template-columns:1fr;gap:4px}
}

/* ---------- per-module hooks (empty by design, override per platform) ---------- */
.rc-module--fang{}
.rc-module--widow{}
.rc-module--hellcat{}
.rc-module--teal2{}


/* ============================================================
   BACKGROUND IMAGERY

   Deliberately set here, not in Elementor. Elementor only emits a
   section background-image when the setting carries a real media
   attachment ID, so an imported template pointing at a file path
   renders no image at all.

   These paths are relative to this stylesheet, so they resolve on
   any domain and in any subdirectory install, with no media library
   step. To swap an image, drop a replacement into /assets/img/ under
   the same filename.
   ============================================================ */

.rc-hero{background-image:url('assets/img/scene-hero.jpg')}
.rc-module--fang{background-image:url('assets/img/scene-fang.jpg')}
.rc-module--widow{background-image:url('assets/img/scene-blackwidow.jpg')}
.rc-module--hellcat{background-image:url('assets/img/scene-hellcat.jpg')}
.rc-module--teal2{background-image:url('assets/img/scene-teal2.jpg')}

/* Rail thumbnails. Product cutouts rather than scene plates. */
.rc-rcard__thumb--fang{background-image:url('assets/img/thumb-fang.jpg')}
.rc-rcard__thumb--widow{background-image:url('assets/img/thumb-blackwidow.jpg')}
.rc-rcard__thumb--hellcat{background-image:url('assets/img/thumb-hellcat.jpg')}
.rc-rcard__thumb--teal2{background-image:url('assets/img/thumb-teal2.jpg')}
.rc-rcard__thumb--edge130{background-image:url('assets/img/thumb-edge130.jpg')}
/* Renamed 2026-08-30. Images inside the stylesheet do not get the
   NIGHT_OPS_VERSION query string that busts style.css itself, so
   replacing a thumbnail in place leaves browsers and the SiteGround
   cache serving the old bytes indefinitely. Changing the filename
   changes the URL, which is the only reliable way to force it.
   Do the same for any future image swap that has to land immediately. */
.rc-rcard__thumb--usv{background-image:url('assets/img/thumb-usv-v2.jpg')}

/* Solutions cards. Scene photography rather than product cutouts. */
.rc-rcard__thumb--apium{background-image:url('assets/img/thumb-apium.jpg')}
.rc-rcard__thumb--quaze{background-image:url('assets/img/thumb-quaze.jpg')}
.rc-rcard__thumb--trichon{background-image:url('assets/img/thumb-trichon.jpg')}


/* ============================================================
   LAYOUT SAFETY NET

   Zero-specificity fallback via :where(), so if a section ever
   loses its custom class the page still has gutters instead of
   running text to the viewport edge. Every real .rc-* rule above
   outranks this, including .rc-railsec's full-bleed padding:0.
   ============================================================ */

:where(body.rc-storefront .elementor-top-section){
  padding-left:clamp(22px,4vw,56px);
  padding-right:clamp(22px,4vw,56px);
}
:where(body.rc-storefront .elementor-top-section) > .elementor-container{
  max-width:1460px;margin-inline:auto;width:100%;
}


/* ============================================================
   V4 ATOMIC LAYER  (v1.4)

   WHY EVERY SELECTOR HERE IS PREFIXED WITH body.rc-storefront

   WordPress enqueues elementor-frontend.min.css AFTER the theme
   stylesheet. Elementor's .e-con sets flex-direction:column. A bare
body.rc-storefront .rc-module{display:flex;flex-direction:column;justify-content:center;
  align-items:stretch;min-height:100vh}
body.rc-storefront .rc-story,
body.rc-storefront .rc-disc,
body.rc-storefront .rc-railsec{display:block}

/* Inner wrapper, the atomic stand-in for .elementor-container */
body.rc-storefront .rc-inner{position:relative;z-index:4;width:100%;max-width:1460px;
  margin-inline:auto;display:flex;flex-direction:column;align-items:flex-start;
  box-sizing:border-box}
body.rc-storefront .rc-hero > .rc-inner{max-width:1100px}
body.rc-storefront .rc-story > .rc-inner{max-width:none;align-items:center;text-align:center}
body.rc-storefront .rc-disc > .rc-inner{max-width:1150px}
body.rc-storefront .rc-railsec > .rc-inner{max-width:none}

/* Vertical rhythm */
body.rc-storefront .rc-inner > * + *{margin-top:26px}

/* Rows. flex-direction is stated explicitly, never inherited. */
body.rc-storefront .rc-ctarow{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;
  margin-top:36px;align-items:center}


/* Atomic widgets carry the class on the tag itself; classic widgets on a wrapper */
body.rc-storefront .rc-h1,body.rc-storefront .rc-h1 .elementor-heading-title{
  font-size:88px;line-height:.9;margin:0 0 26px}
body.rc-storefront .rc-h2,body.rc-storefront .rc-h2 .elementor-heading-title{
  font-size:clamp(40px,5.8vw,80px);line-height:.94;margin:0 0 22px}
body.rc-storefront .rc-h2-mega,body.rc-storefront .rc-h2-mega .elementor-heading-title{
  font-size:clamp(42px,9.4vw,148px);line-height:.86;margin:0}
body.rc-storefront p.rc-lede{margin:0;color:var(--rc-body)}
body.rc-storefront p.rc-sub{margin:36px auto 0;color:var(--rc-body)}

/* Atomic button is a bare <a class="rc-btn e-button-base"> */
body.rc-storefront a.rc-btn{display:inline-block;border:1px solid var(--rc-accent);
  background:var(--rc-accent);color:var(--rc-on-accent);padding:16px 28px;
  font-family:var(--rc-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;border-radius:0;text-decoration:none;transition:.15s;align-self:flex-start}
body.rc-storefront a.rc-btn:hover{background:var(--rc-accent-hi);border-color:var(--rc-accent-hi);
  color:var(--rc-on-accent)}
body.rc-storefront a.rc-btn--ghost{background:transparent;color:var(--rc-text);
  border-color:var(--rc-line2)}
body.rc-storefront a.rc-btn--ghost:hover{background:transparent;border-color:var(--rc-accent);
  color:var(--rc-accent)}

/* The module scrim was tuned for the classic 1100px content column. With the
   wider atomic inner it was swallowing the copy, so it is pulled back and the
   content sits decisively above it. */
body.rc-storefront .rc-module:after{
  background:linear-gradient(90deg,rgba(10,14,20,.90) 0%,rgba(10,14,20,.50) 62%,rgba(10,14,20,.86) 100%),
             linear-gradient(to bottom,var(--rc-bg),transparent 22%,transparent 78%,var(--rc-bg));
  z-index:1}
body.rc-storefront .rc-hero:after{z-index:1}
body.rc-storefront .rc-telem{z-index:4}

/* Layer label anchors to the section, not the inner column */
body.rc-storefront .rc-modr{right:clamp(22px,4vw,56px)}

@media(max-width:1024px){
  body.rc-storefront .rc-hero,
  body.rc-storefront .rc-module{min-height:auto}
}


/* ============================================================
   v1.9 FIXES
   ============================================================ */

/* 1. Variation description: one live copy on the left, Woo's own hidden.
      The mirror is refilled on every variation change, so it never
      goes stale and never duplicates. */

/* 2. Hero copy sits at the section gutter, not centred in the viewport.
      A 1100px column inside a full-width section was being centred by
      margin-inline:auto, which pushed it toward the middle on wide screens. */
body.rc-storefront .rc-hero > .rc-inner{margin-inline:0}

/* 3. Corner brackets: equal inset top and bottom. The 90px top offset
      assumed a sticky header that is not built yet. */
.rc-brk--tl{top:20px}
.rc-brk--tr{top:20px}


/* ============================================================
   v1.11 FIXES
   ============================================================ */

/* Price: equal breathing room above and below */

/* Header allowance for the corner brackets.
   One variable so the brackets track the header height once the
   Theme Builder header exists. Set it to the header's height. */
:root{--rc-header-h:90px}
.rc-brk--tl{top:var(--rc-header-h)}
.rc-brk--tr{top:var(--rc-header-h)}


/* ============================================================
   HEADER  (v1.12)

   Every rule is prefixed with body.rc-storefront so it outranks
   Elementor's own nav-menu and menu-cart CSS, which is enqueued
   after the theme. Same reason as the v1.4 layout fix.

   Height is driven by --rc-header-h, the same variable the corner
   brackets use, so the two can never drift apart.
   ============================================================ */

body.rc-storefront .rc-hdr{
  position:sticky;top:0;z-index:60;width:100%;
  min-height:var(--rc-header-h);
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,40px);
  padding:0 clamp(22px,4vw,56px);
  /* Opaque, and exactly the page ground. It was rgba(10,14,20,.92) under a
     16px backdrop blur, which let the hero video tint the bar and read as
     part of the hero rather than as chrome. At full opacity the blur costs
     GPU for nothing, so it goes too. */
  background:var(--rc-bg);
  border-bottom:1px solid var(--rc-line)}

body.rc-storefront .rc-hdr__brand{flex:0 0 auto;width:auto;padding:0}
body.rc-storefront .rc-hdr__nav{flex:1 1 auto;width:auto;padding:0;
  flex-direction:row;justify-content:flex-end}
body.rc-storefront .rc-hdr__tools{flex:0 0 auto;width:auto;padding:0;
  flex-direction:row;align-items:center;gap:12px}

/* logo */
body.rc-storefront .rc-logo img{max-height:24px;width:auto;display:block}

/* ---- nav items ---- */
body.rc-storefront .rc-nav .elementor-nav-menu{gap:0}
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item{
  font-family:var(--rc-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rc-muted);fill:currentColor;position:relative;transition:.15s}
/* No padding claim here on purpose. The nav widget sets its own horizontal
   padding at a specificity this theme cannot beat, and v1.3.0 measures the
   content box rather than assuming a value. */
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item:hover,
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item.highlighted,
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item:focus{
  /* background-color, NOT the background shorthand. The shorthand resets
     background-image to none, and since this rule carries a pseudo-class it
     outranks the base rule that paints the hover rule's gradient. The result
     was the line being wiped at exactly the moment it should appear. */
  color:var(--rc-text);background-color:transparent}
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item.elementor-item-active{
  color:var(--rc-accent)}

/* ---- nav hover rule: measured, not guessed  (v1.3.0) ----

   Three rounds of this failed because the rule was drawn as an absolutely
   positioned bar inset by a hard-coded 16px, on the assumption that 16px
   was the item's padding. It is not. The nav widget sets its own:

     .elementor-35 .elementor-element.elementor-element-XXXX
       .elementor-nav-menu--main .elementor-item{padding-left:20px;padding-right:20px}

   which is five classes, (0,5,0), against this theme's (0,4,1). Elementor
   wins, the padding is 20px, and a rule inset by 16px can never line up
   with the content. Worse, that number lives in the Elementor UI, so any
   edit to Horizontal Padding silently breaks the rule again.

   The widget was also set to Pointer: Underline, so Elementor was drawing
   a second line of its own across the full item box. That is killed below.

   The fix stops guessing. The rule is a background image sized against the
   CONTENT box via background-origin, so it is exactly as wide as the label
   plus the caret whatever the padding happens to be, and it stays correct
   if someone changes the padding in Elementor. background-size animates,
   so the left-to-right wipe survives. */

/* Elementor's own pointer, whichever one is selected. */
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item:before,
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item:after{
  content:none !important}

body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item{
  display:inline-flex;align-items:center;gap:6px;
  background-image:linear-gradient(var(--rc-accent),var(--rc-accent));
  background-repeat:no-repeat;
  background-origin:content-box;      /* the whole point: measure the content */
  background-position:left calc(100% + 6px);
  background-size:0 1px;
  transition:background-size .18s ease,color .15s}

body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item:hover,
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item:focus-visible{
  background-size:100% 1px}

/* No caret, matching storefront.redcat.red. The storefront carries dropdowns
   of its own and shows no arrow on any of them, so this is the house pattern
   rather than a compromise. With the arrow gone the content box is the label
   alone, which is what the rule then measures. */
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item .sub-arrow,
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item > i,
body.rc-storefront .rc-nav .elementor-nav-menu--main .elementor-item > svg{
  display:none}

/* ---- submenus ---- */
body.rc-storefront .rc-nav .elementor-nav-menu--dropdown{
  background:var(--rc-ink);border:1px solid var(--rc-line2);border-radius:0;
  box-shadow:0 24px 48px rgba(0,0,0,.6)}
body.rc-storefront .rc-nav .elementor-nav-menu--dropdown a{
  font-family:var(--rc-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rc-body);padding:14px 20px;border-bottom:1px solid var(--rc-line)}
body.rc-storefront .rc-nav .elementor-nav-menu--dropdown a:hover,
body.rc-storefront .rc-nav .elementor-nav-menu--dropdown a.elementor-item-active{
  background:var(--rc-accent-soft);color:var(--rc-accent)}

/* ---- hamburger ---- */
body.rc-storefront .rc-nav .elementor-menu-toggle{
  color:var(--rc-text);background:transparent;border:1px solid var(--rc-line2);
  border-radius:0;padding:11px;transition:.15s}
body.rc-storefront .rc-nav .elementor-menu-toggle:hover,
body.rc-storefront .rc-nav .elementor-menu-toggle.elementor-active{
  border-color:var(--rc-accent);color:var(--rc-accent)}
body.rc-storefront .rc-nav .elementor-menu-toggle svg{width:22px;height:22px;fill:currentColor}

/* mobile panel */
body.rc-storefront .rc-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown{
  margin-top:0;background:rgba(12,17,24,.98);backdrop-filter:blur(18px);
  border-left:0;border-right:0;max-height:calc(100vh - var(--rc-header-h));overflow-y:auto}
body.rc-storefront .rc-nav .elementor-nav-menu--dropdown .elementor-item{padding:18px 24px}

/* ---- cart ---- */
body.rc-storefront .rc-cart .elementor-menu-cart__toggle .elementor-button{
  background:transparent;border:1px solid var(--rc-line2);border-radius:0;
  color:var(--rc-muted);padding:11px 14px;font-family:var(--rc-mono);
  font-size:11px;letter-spacing:.14em;transition:.15s}
body.rc-storefront .rc-cart .elementor-menu-cart__toggle .elementor-button:hover{
  border-color:var(--rc-accent);color:var(--rc-accent)}
body.rc-storefront .rc-cart .elementor-button-icon-qty[data-counter]{
  background:var(--rc-accent);color:var(--rc-on-accent);font-family:var(--rc-mono);font-size:10px}
body.rc-storefront .rc-cart .elementor-menu-cart__container{background:rgba(12,17,24,.98)}
body.rc-storefront .rc-cart .elementor-menu-cart__main{
  background:var(--rc-ink);border-left:1px solid var(--rc-line2);color:var(--rc-body)}
body.rc-storefront .rc-cart .elementor-menu-cart__footer-buttons .elementor-button{
  border-radius:0;font-family:var(--rc-mono);letter-spacing:.16em;text-transform:uppercase}

/* compact header button */
body.rc-storefront a.rc-btn--sm,body.rc-storefront .rc-btn--sm .elementor-button{
  padding:12px 18px;font-size:11px;letter-spacing:.16em}

@media(max-width:1024px){
  body.rc-storefront .rc-hdr{gap:12px}
  body.rc-storefront .rc-hdr__tools .rc-btn--sm{display:none}
}
@media(max-width:767px){
  body.rc-storefront .rc-logo img{max-height:20px}
  body.rc-storefront .rc-hdr{padding:0 18px}
}


/* ============================================================
   STICKY HEADER  (v1.13)

   Two things were quietly defeating position:sticky.

   1. overflow-x:hidden on the body makes it a scroll container,
      and sticky descendants of a scroll container stop sticking to
      the viewport. overflow-x:clip prevents the same horizontal
      overflow without creating one. The hidden declaration stays
      first as a fallback for anything that does not know clip.

   2. sticky is bounded by its parent. Elementor wraps a Theme
      Builder header in .elementor-location-header, which is only as
      tall as the header itself, so the inner container had no room
      to travel. The wrapper is what has to be sticky.
   ============================================================ */

body.rc-storefront{overflow-x:hidden;overflow-x:clip}

body.rc-storefront .elementor-location-header{
  position:sticky;top:0;z-index:60;width:100%;
  /* Same ground as the bar itself, so a rubber-band overscroll shows the
     header colour rather than a strip of whatever is behind it. */
  background:var(--rc-bg)}

/* Belt and braces. If a future Elementor changes the wrapper class, or the
   header is output by header.php instead of the Theme Builder, the bar is
   still sticky on its own. Harmless when both apply. */
body.rc-storefront header.elementor-location-header,
body.rc-storefront > header{position:sticky;top:0;z-index:60}

/* keep the scroll-margin in step so in-page anchors are not hidden
   behind the header */
body.rc-storefront [id]{scroll-margin-top:calc(var(--rc-header-h) + 12px)}


/* ============================================================
   ELEMENTOR CONTAINER DEFAULTS  (v1.17)

   Every section in these templates is one Elementor container wrapping
   one HTML widget. The container is structural only: the design system
   lives in the theme and each section paints its own padding through
   .rc-psec, .rc-vhero, .rc-ft and friends.

   Elementor still applies its kit default container padding, 10px on
   every side, to each of those wrappers. On a page whose first section
   is a full-bleed video hero, that 10px reads as a strip of page ground
   between the header and the footage, which is what it was doing on
   USV Solutions. It also inset every full-bleed section by 10px.

   Override the DEFAULT custom properties rather than the padding
   itself. Elementor resolves padding as
     var(--padding-block-start, var(--container-default-padding-block-start))
   so zeroing only the fallback leaves any container where someone has
   deliberately set padding in the editor still working.
   ============================================================ */

body.rc-storefront{
  --container-default-padding-block-start:0px;
  --container-default-padding-block-end:0px;
  --container-default-padding-inline-start:0px;
  --container-default-padding-inline-end:0px}


/* ============================================================
   HEADER TRIM  (v1.14)
   ============================================================ */

/* Corner brackets clear the header rule by the same 20px they sit
   in from the bottom and sides, so all four read as one inset. */
.rc-brk--tl{top:calc(var(--rc-header-h) + 20px)}
.rc-brk--tr{top:calc(var(--rc-header-h) + 20px)}
.rc-edge{top:calc(50% + var(--rc-header-h) / 2)}

/* Brand lockup, matching the original mockup: wordmark with the
   DIRECT PROCUREMENT line beneath it. */
body.rc-storefront .rc-hdr__brand{flex-direction:column;align-items:flex-start;gap:4px}
body.rc-storefront .rc-hdr__tag{
  font-family:var(--rc-mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rc-accent);line-height:1}

/* ACCOUNT pill, same treatment as the original header */
body.rc-storefront a.rc-pill{
  display:inline-block;border:1px solid var(--rc-line2);background:transparent;
  padding:11px 15px;font-family:var(--rc-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rc-muted);text-decoration:none;transition:.15s;white-space:nowrap}
body.rc-storefront a.rc-pill:hover{border-color:var(--rc-accent);color:var(--rc-accent)}

@media(max-width:1024px){
  body.rc-storefront a.rc-pill{display:none}
}
@media(max-width:600px){
  body.rc-storefront .rc-hdr__tag{display:none}
}


/* ============================================================
   HERO HEADLINE  (v1.15)

   Matches the original mockup: three hard line breaks with the last
   line in crimson. The gradient is a light polish on top of that,
   with a flat colour declared first so anything without
   background-clip:text still gets readable type.
   ============================================================ */

body.rc-storefront .rc-h1 .elementor-heading-title{
  color:var(--rc-text);
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 42%,#AEB8BE 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

body.rc-storefront .rc-h1 em{
  font-style:normal;display:block;
  color:var(--rc-accent);
  background:linear-gradient(180deg,var(--rc-accent-hi) 0%,var(--rc-accent) 62%,#8E1419 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

@supports not (background-clip:text){
  body.rc-storefront .rc-h1 .elementor-heading-title{
    -webkit-text-fill-color:currentColor;background:none}
  body.rc-storefront .rc-h1 em{-webkit-text-fill-color:currentColor;background:none}
}


/* ============================================================
   LOGO SIZING  (v1.16)

   Cap the logo by height, not width, so any lockup keeps its
   proportions. The two brands need different caps: the Red Cat
   wordmark is roughly 8:1, the Teal lockup 2.91:1, so an identical
   cap renders the Teal mark less than half the visual size.

   Tune with one value. The header grows to fit if the logo exceeds
   the header height, so raise --rc-header-h too if you go large.
   ============================================================ */

:root{--rc-logo-h:24px;--rc-logo-h-mobile:20px}

body.rc-storefront .rc-logo img{
  max-height:var(--rc-logo-h);width:auto;height:auto;display:block}

@media(max-width:767px){
  body.rc-storefront .rc-logo img{max-height:var(--rc-logo-h-mobile)}
}

/* ============================================================
   HEADER RESPONSIVE  (v1.19)

   The break was Elementor's own .e-con.e-flex{flex-wrap:wrap}. At
   tablet width the brand, nav and tools each wrapped onto their own
   row, so the header became three stacked rows tall and the
   hamburger ended up floating above the logo.

   Fix is nowrap on the header row plus real breakpoints. All three
   groups stay on one line at every width; only their sizes change.
   ============================================================ */

body.rc-storefront .rc-hdr{
  flex-wrap:nowrap;align-items:center}
body.rc-storefront .rc-hdr__brand,
body.rc-storefront .rc-hdr__nav,
body.rc-storefront .rc-hdr__tools{
  flex-wrap:nowrap;align-items:center;align-self:center}
body.rc-storefront .rc-hdr__brand{flex:0 1 auto;min-width:0}
body.rc-storefront .rc-hdr__nav{flex:1 1 auto;min-width:0;justify-content:flex-end}
body.rc-storefront .rc-hdr__tools{flex:0 0 auto}
body.rc-storefront .rc-logo{width:auto;max-width:100%}
body.rc-storefront .rc-logo img{max-width:100%}

/* the toggle should sit on the line, not above it */
body.rc-storefront .rc-nav .elementor-menu-toggle{
  align-self:center;margin:0}
body.rc-storefront .rc-nav .elementor-nav-menu--main{align-items:center}

/* ---- tablet and down: hamburger takes over ---- */
@media(max-width:1024px){
  :root{--rc-logo-h:56px;--rc-header-h:88px}
  body.rc-storefront .rc-hdr{gap:14px;padding:0 24px}
  body.rc-storefront .rc-hdr__nav{flex:0 0 auto;order:3}
  body.rc-storefront .rc-hdr__tools{flex:1 1 auto;justify-content:flex-end;order:2;gap:10px}

  /* full-bleed dropdown pinned under the header.
     Elementor positions this panel relative to the widget, which here is
     a narrow right-hand container, so it would otherwise open as a thin
     strip. !important is used deliberately: Elementor writes inline
     width and offset values on this element. */
  body.rc-storefront .rc-nav .elementor-nav-menu__container.elementor-nav-menu--dropdown{
    position:fixed !important;
    top:var(--rc-header-h) !important;
    left:0 !important;right:0 !important;
    width:100vw !important;max-width:100vw !important;
    margin:0 !important;
    border-left:0;border-right:0;
    border-top:1px solid var(--rc-line2);
    max-height:calc(100vh - var(--rc-header-h));
    overflow-y:auto;
    background:rgba(12,17,24,.98);backdrop-filter:blur(18px)}
  body.rc-storefront .rc-nav .elementor-nav-menu--dropdown .elementor-item{
    padding:20px 24px;font-size:13px;letter-spacing:.2em}
  body.rc-storefront .rc-nav .elementor-nav-menu--dropdown li:not(:last-child) a{
    border-bottom:1px solid var(--rc-line)}
}

/* ---- phone ---- */
@media(max-width:767px){
  :root{--rc-logo-h:40px;--rc-logo-h-mobile:40px;--rc-header-h:72px}
  body.rc-storefront .rc-hdr{gap:10px;padding:0 16px}
  body.rc-storefront .rc-hdr__tag{display:none}
  body.rc-storefront a.rc-pill{display:none}
  body.rc-storefront .rc-hdr__tools .rc-btn--sm{display:none}
  body.rc-storefront .rc-cart .elementor-menu-cart__toggle .elementor-button{
    padding:9px 11px;font-size:10px}
  body.rc-storefront .rc-nav .elementor-menu-toggle{padding:9px}
  body.rc-storefront .rc-nav .elementor-menu-toggle svg{width:20px;height:20px}
}

/* ---- very narrow: protect the logo ---- */
@media(max-width:400px){
  :root{--rc-logo-h:32px;--rc-header-h:64px}
  body.rc-storefront .rc-cart .elementor-menu-cart__toggle .elementor-button span{display:none}
}

/* ---- below the hamburger breakpoint the cart panel is not used ----
   Elementor anchors both the mini cart and the side cart to the widget,
   which on mobile is a narrow box in the header. It ran off the right
   edge as a mini cart and off the left as a side cart, and there is no
   setting that fixes it.

   So on mobile the toggle simply navigates to /cart/ instead, handled
   in night-ops.js. The panel is hidden here as well so it cannot flash
   open before the navigation happens. Desktop is untouched. */
@media(max-width:1024px){
  body.rc-storefront .elementor-menu-cart__container{
    display:none !important;
  }
  body.rc-storefront .rc-cart .elementor-menu-cart__toggle .elementor-button{
    cursor:pointer;
  }
}

/* ============================================================
   LEGAL / LONG-FORM PAGES  (v1.21)

   Terms, privacy, shipping and returns. Same shell as the
   storefront, but typeset for reading rather than impact:
   narrower measure, taller line height, real hierarchy.
   ============================================================ */

body.rc-storefront .rc-legalhero{
  position:relative;width:100%;
  padding:clamp(56px,7vw,96px) clamp(22px,4vw,56px) clamp(36px,4vw,56px);
  border-bottom:1px solid var(--rc-line);
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent)}
body.rc-storefront .rc-legalhero .rc-inner{max-width:1000px;margin-inline:auto}
body.rc-storefront .rc-legalhero .elementor-heading-title{
  font-size:clamp(34px,5vw,66px);line-height:.98;margin:0 0 18px}
body.rc-storefront .rc-legalmeta{
  font-family:var(--rc-mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-dim);
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--rc-line)}
body.rc-storefront .rc-legalmeta b{color:var(--rc-muted);font-weight:400}

body.rc-storefront .rc-legal{
  width:100%;padding:clamp(48px,6vw,84px) clamp(22px,4vw,56px) clamp(80px,9vw,130px)}
body.rc-storefront .rc-legal .rc-inner{
  max-width:860px;margin-inline:auto;display:flex;flex-direction:column;
  align-items:stretch;gap:0}

body.rc-storefront .rc-legal .elementor-widget-heading{margin-top:52px}
body.rc-storefront .rc-legal .elementor-widget-heading:first-child{margin-top:0}
body.rc-storefront .rc-legal h2.elementor-heading-title{
  font-size:clamp(19px,2.1vw,25px);line-height:1.2;margin:0 0 16px;
  padding-bottom:14px;border-bottom:1px solid var(--rc-line);
  display:flex;align-items:baseline;gap:14px}
body.rc-storefront .rc-legal h2.elementor-heading-title:before{
  content:counter(rclegal,decimal-leading-zero);counter-increment:rclegal;
  font-family:var(--rc-mono);font-size:12px;letter-spacing:.14em;
  color:var(--rc-accent);flex:0 0 auto}
body.rc-storefront .rc-legal .rc-inner{counter-reset:rclegal}

body.rc-storefront .rc-legal .elementor-widget-text-editor{
  color:var(--rc-body);font-size:14.5px;line-height:1.9}
body.rc-storefront .rc-legal p{margin:0 0 16px}
body.rc-storefront .rc-legal p:last-child{margin-bottom:0}
body.rc-storefront .rc-legal ul,
body.rc-storefront .rc-legal ol{margin:0 0 16px;padding-left:20px}
body.rc-storefront .rc-legal li{margin-bottom:9px}
body.rc-storefront .rc-legal li::marker{color:var(--rc-accent)}
body.rc-storefront .rc-legal strong{color:var(--rc-text);font-weight:500}
body.rc-storefront .rc-legal a{color:var(--rc-accent);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.14)}
body.rc-storefront .rc-legal a:hover{border-bottom-color:var(--rc-accent)}

/* placeholder / attention block */
body.rc-storefront .rc-note{
  border:1px solid var(--rc-accent);background:var(--rc-accent-soft);
  padding:22px 24px;margin:0 0 44px}
body.rc-storefront .rc-note__lab{
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rc-accent);margin-bottom:10px}
body.rc-storefront .rc-note p{
  font-size:13.5px;line-height:1.8;color:var(--rc-body);margin:0}

/* definition-style rows, used for the contact block */
body.rc-storefront .rc-deflist{
  border-top:1px solid var(--rc-line2);margin-top:8px}
body.rc-storefront .rc-deflist__r{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--rc-line);
  font-family:var(--rc-mono);font-size:12.5px;letter-spacing:.06em}
body.rc-storefront .rc-deflist__r span{color:var(--rc-muted);
  text-transform:uppercase;letter-spacing:.16em;font-size:11px}
body.rc-storefront .rc-deflist__r b{color:var(--rc-text);font-weight:400;text-align:right}

@media(max-width:767px){
  body.rc-storefront .rc-legal h2.elementor-heading-title{
    flex-direction:column;gap:6px}
}

/* ============================================================
   FOOTER  (v1.24)

   Five columns on desktop collapsing to two then one. Same HUD
   language as the rest of the build: hairline rules, mono
   letterspaced labels, Gridnik for the mark.
   ============================================================ */

body.rc-storefront .rc-ft{
  position:relative;width:100%;
  border-top:1px solid var(--rc-line);
  background:
    linear-gradient(180deg,rgba(0,0,0,.45),transparent 40%),
    var(--rc-ink);
  padding:clamp(56px,6vw,88px) clamp(22px,4vw,56px) clamp(28px,3vw,40px);
  z-index:7}
body.rc-storefront .rc-ft:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--rc-accent-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--rc-accent-line) 1px,transparent 1px);
  background-size:72px 72px}
body.rc-storefront .rc-ft .rc-inner{
  position:relative;z-index:2;max-width:1460px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:stretch;gap:0}

/* ---- top row ---- */
body.rc-storefront .rc-ft__top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1.4fr;
  gap:clamp(24px,3vw,48px);
  width:100%;padding:0;align-items:start}
body.rc-storefront .rc-ft__brand,
body.rc-storefront .rc-ft__col,
body.rc-storefront .rc-ft__cta{padding:0;width:auto;align-items:stretch}

/* brand block */
body.rc-storefront .rc-ft__mark{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  font-size:34px;line-height:1;letter-spacing:.06em;color:var(--rc-text)}
body.rc-storefront .rc-ft__mark span{
  font-size:14px;vertical-align:super;color:var(--rc-accent);margin-left:2px}
body.rc-storefront .rc-ft__sub{
  font-family:var(--rc-mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rc-accent);margin-top:8px}
body.rc-storefront .rc-ft__blurb{
  font-size:13px;line-height:1.85;color:var(--rc-muted);
  max-width:340px;margin:20px 0 0}
body.rc-storefront .rc-ft__stamp{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
body.rc-storefront .rc-ft__stamp span{
  border:1px solid var(--rc-line2);padding:7px 11px;
  font-family:var(--rc-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rc-dim)}

/* link columns */
body.rc-storefront .rc-ft__h{
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rc-muted);
  padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid var(--rc-line2)}
body.rc-storefront .rc-ft__list{list-style:none;margin:0;padding:0}
body.rc-storefront .rc-ft__list li{margin-bottom:11px}
body.rc-storefront .rc-ft__list a{
  font-family:var(--rc-mono);font-size:12.5px;letter-spacing:.06em;
  color:var(--rc-body);text-decoration:none;transition:.15s;
  display:inline-flex;align-items:center;gap:8px}
body.rc-storefront .rc-ft__list a:before{
  content:"";width:0;height:1px;background:var(--rc-accent);transition:width .18s}
body.rc-storefront .rc-ft__list a:hover{color:var(--rc-accent)}
body.rc-storefront .rc-ft__list a:hover:before{width:12px}

/* cta column */
body.rc-storefront .rc-ft__cta .rc-ft__blurb{margin:0 0 18px;max-width:none}
body.rc-storefront a.rc-btn--wide{width:100%;text-align:center}
body.rc-storefront .rc-ft__contact{margin-top:20px;border-top:1px solid var(--rc-line2)}
body.rc-storefront .rc-ft__contact div{
  display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-family:var(--rc-mono);font-size:11.5px}
body.rc-storefront .rc-ft__contact div:last-child{border-bottom:0}
body.rc-storefront .rc-ft__contact span{color:var(--rc-dim);letter-spacing:.18em;font-size:10px}
body.rc-storefront .rc-ft__contact b{color:var(--rc-text);font-weight:400}

/* ---- bottom bar ---- */
body.rc-storefront .rc-ft__bottom{
  width:100%;padding:0;margin-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--rc-line);padding-top:26px}
body.rc-storefront .rc-ft__legal{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px 28px}
body.rc-storefront .rc-ft__copy{
  font-family:var(--rc-mono);font-size:11.5px;letter-spacing:.1em;color:var(--rc-dim)}
body.rc-storefront .rc-ft__links{display:flex;flex-wrap:wrap;gap:22px}
body.rc-storefront .rc-ft__links a{
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rc-muted);text-decoration:none}
body.rc-storefront .rc-ft__links a:hover{color:var(--rc-accent)}
body.rc-storefront .rc-ft__note{
  margin:22px 0 0;max-width:900px;
  font-family:var(--rc-mono);font-size:10.5px;line-height:1.9;
  letter-spacing:.04em;color:var(--rc-dim)}

@media(max-width:1100px){
  body.rc-storefront .rc-ft__top{grid-template-columns:1fr 1fr 1fr}
  body.rc-storefront .rc-ft__brand{grid-column:1 / -1}
  body.rc-storefront .rc-ft__cta{grid-column:1 / -1;max-width:420px}
}
@media(max-width:640px){
  body.rc-storefront .rc-ft__top{grid-template-columns:1fr 1fr}
  body.rc-storefront .rc-ft__cta{grid-column:1 / -1}
  body.rc-storefront .rc-ft__legal{flex-direction:column;align-items:flex-start}
}
@media(max-width:420px){
  body.rc-storefront .rc-ft__top{grid-template-columns:1fr}
}


/* ============================================================
   PRODUCT PAGES  (v1.29)

   Components for the single-product templates. Same language as the
   storefront: hairline rules, mono letterspaced labels, Gridnik for
   figures. Every block is layout-agnostic so the three Hellcat
   layouts can share them.
   ============================================================ */

/* ---------- images ---------- */
body.rc-storefront .rc-figure{margin:0;display:block;overflow:hidden;position:relative}
body.rc-storefront .rc-figure img{display:block;width:100%;height:100%;object-fit:cover}
body.rc-storefront .rc-figure--frame{border:1px solid var(--rc-line2)}
body.rc-storefront .rc-figure--tall{aspect-ratio:3/4}
body.rc-storefront .rc-figure--wide{aspect-ratio:16/9}
body.rc-storefront .rc-figure--square{aspect-ratio:1/1}
body.rc-storefront .rc-figure__cap{
  position:absolute;left:0;bottom:0;right:0;padding:14px 16px;
  background:linear-gradient(to top,rgba(10,14,20,.92),transparent);
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-muted)}

/* ---------- product hero ---------- */
body.rc-storefront .rc-phero{
  position:relative;width:100%;min-height:78vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 clamp(22px,4vw,56px) clamp(46px,5vw,72px);
  background-size:cover;background-position:center 42%;overflow:hidden}
body.rc-storefront .rc-phero:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,14,20,.92) 0%,rgba(10,14,20,.35) 62%,rgba(10,14,20,.75) 100%),
             linear-gradient(to top,var(--rc-bg) 1%,transparent 55%)}
body.rc-storefront .rc-phero > *{position:relative;z-index:3}
body.rc-storefront .rc-phero .rc-inner{max-width:1460px;margin-inline:auto;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:0}
body.rc-storefront .rc-phero--split{min-height:auto;padding:0}

body.rc-storefront .rc-ptitle .elementor-heading-title{
  font-size:clamp(46px,8vw,116px);line-height:.88;margin:0}
body.rc-storefront .rc-pkicker{
  font-family:var(--rc-mono);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--rc-accent);display:flex;align-items:center;gap:14px;margin-bottom:20px}
body.rc-storefront .rc-pkicker:before{content:"";width:38px;height:1px;background:var(--rc-accent)}
body.rc-storefront .rc-psub{
  font-family:var(--rc-mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rc-muted);margin-top:18px}

/* ---------- key figures ---------- */
body.rc-storefront .rc-figs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  width:100%;border-top:1px solid var(--rc-line2);border-bottom:1px solid var(--rc-line2)}
body.rc-storefront .rc-fig{padding:26px 22px;border-right:1px solid var(--rc-line)}
body.rc-storefront .rc-fig:last-child{border-right:0}
body.rc-storefront .rc-fig b{
  display:block;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  font-size:clamp(30px,3.6vw,50px);line-height:1;color:var(--rc-text);letter-spacing:.01em}
body.rc-storefront .rc-fig b em{font-style:normal;font-size:.44em;color:var(--rc-muted);margin-left:6px}
body.rc-storefront .rc-fig span{
  display:block;margin-top:12px;font-family:var(--rc-mono);font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--rc-dim)}

/* stacked variant, for a sidebar */
body.rc-storefront .rc-figs--stack{grid-template-columns:1fr;border:1px solid var(--rc-line2)}
body.rc-storefront .rc-figs--stack .rc-fig{border-right:0;border-bottom:1px solid var(--rc-line)}
body.rc-storefront .rc-figs--stack .rc-fig:last-child{border-bottom:0}

/* ---------- section furniture ---------- */
body.rc-storefront .rc-psec{width:100%;padding:clamp(56px,7vw,110px) clamp(22px,4vw,56px)}
body.rc-storefront .rc-psec .rc-inner{max-width:1460px;margin-inline:auto;width:100%;
  align-items:stretch;gap:0}
body.rc-storefront .rc-psec--tight{padding-top:clamp(30px,3vw,48px)}
body.rc-storefront .rc-psec--alt{background:var(--rc-ink);border-top:1px solid var(--rc-line);
  border-bottom:1px solid var(--rc-line)}
body.rc-storefront .rc-plabel{
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--rc-accent);margin-bottom:18px;display:flex;align-items:center;gap:14px}
body.rc-storefront .rc-plabel:after{content:"";flex:1;height:1px;background:var(--rc-line2)}
body.rc-storefront .rc-ph2 .elementor-heading-title{
  /* 2026-08-26: cap lowered from 62px to 42px on your call. Floor and
     the vw term unchanged, so headings still scale between breakpoints. */
  font-size:clamp(30px,4.4vw,42px);line-height:.98;margin:0 0 22px}
body.rc-storefront .rc-pbody{font-size:15px;line-height:1.9;color:var(--rc-body);max-width:70ch}

/* ---------- capability list ---------- */
body.rc-storefront .rc-caps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;width:100%;border-top:1px solid var(--rc-line2)}
body.rc-storefront .rc-cap{
  padding:24px 26px 26px 0;border-bottom:1px solid var(--rc-line);
  display:flex;gap:14px;align-items:flex-start}
body.rc-storefront .rc-cap:before{
  content:"";flex:0 0 auto;width:7px;height:7px;margin-top:7px;
  background:var(--rc-accent);transform:rotate(45deg)}
body.rc-storefront .rc-cap p{margin:0;font-size:14px;line-height:1.75;color:var(--rc-body)}
body.rc-storefront .rc-cap p b{display:block;color:var(--rc-text);font-weight:500;
  font-family:var(--rc-mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:7px}

/* ---------- specification table ---------- */
body.rc-storefront .rc-spec{width:100%;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:0 clamp(28px,4vw,64px)}
body.rc-storefront .rc-spec__grp{border-top:1px solid var(--rc-accent);padding-top:18px;margin-bottom:34px}
body.rc-storefront .rc-spec__grp h4{
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--rc-accent);margin:0 0 8px;font-weight:400}
body.rc-storefront .rc-spec__r{
  display:flex;justify-content:space-between;gap:20px;padding:11px 0;
  border-bottom:1px solid var(--rc-line);
  font-family:var(--rc-mono);font-size:12.5px;line-height:1.6}
body.rc-storefront .rc-spec__r span{color:var(--rc-muted);letter-spacing:.06em;flex:0 0 auto;max-width:46%}
body.rc-storefront .rc-spec__r b{color:var(--rc-text);font-weight:400;text-align:right}
body.rc-storefront .rc-spec__note{
  margin-top:14px;font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.1em;color:var(--rc-dim)}

/* ---------- payload callout ---------- */
body.rc-storefront .rc-payload{
  width:100%;border:1px solid var(--rc-line2);background:var(--rc-panel);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0}
body.rc-storefront .rc-payload__c{padding:28px 26px;border-right:1px solid var(--rc-line)}
body.rc-storefront .rc-payload__c:last-child{border-right:0}
body.rc-storefront .rc-payload__c h5{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);text-transform:uppercase;
  font-size:19px;margin:0 0 10px;color:var(--rc-text)}
body.rc-storefront .rc-payload__c p{margin:0;font-size:13px;line-height:1.75;color:var(--rc-body)}
body.rc-storefront .rc-payload__k{
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rc-accent);margin-bottom:14px}

/* ---------- gallery rows ---------- */
body.rc-storefront .rc-gal{display:grid;gap:12px;width:100%}
body.rc-storefront .rc-gal--3{grid-template-columns:repeat(3,1fr)}
body.rc-storefront .rc-gal--4{grid-template-columns:repeat(4,1fr)}
body.rc-storefront .rc-gal--2{grid-template-columns:repeat(2,1fr)}

/* ---------- procurement bar ---------- */
body.rc-storefront .rc-pcta{
  width:100%;border:1px solid var(--rc-line2);background:var(--rc-accent-soft);
  padding:clamp(28px,3.4vw,44px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
body.rc-storefront .rc-pcta__t{flex:1 1 420px}
body.rc-storefront .rc-pcta__t h4{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);text-transform:uppercase;
  font-size:clamp(22px,2.6vw,34px);margin:0 0 10px;color:var(--rc-text)}
body.rc-storefront .rc-pcta__t p{margin:0;font-size:13.5px;line-height:1.8;color:var(--rc-body);max-width:60ch}
body.rc-storefront .rc-pcta__a{display:flex;flex-wrap:wrap;gap:10px}

/* gated brochure, styled now and wired later */
body.rc-storefront a.rc-doc{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--rc-line2);background:transparent;padding:16px 22px;
  font-family:var(--rc-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rc-text);text-decoration:none;transition:.15s}
body.rc-storefront a.rc-doc:hover{border-color:var(--rc-accent);color:var(--rc-accent)}
body.rc-storefront a.rc-doc:before{content:"[ PDF ]";color:var(--rc-accent);font-size:10px}
body.rc-storefront a.rc-doc small{
  display:block;margin-top:4px;font-size:9.5px;letter-spacing:.16em;color:var(--rc-dim)}

/* ---------- compliance strip ---------- */
body.rc-storefront .rc-pnote{
  width:100%;border-top:1px solid var(--rc-line);padding-top:22px;
  font-family:var(--rc-mono);font-size:10.5px;line-height:1.9;letter-spacing:.04em;
  color:var(--rc-dim);max-width:1000px}

@media(max-width:900px){
  body.rc-storefront .rc-gal--3,
  body.rc-storefront .rc-gal--4{grid-template-columns:repeat(2,1fr)}
  body.rc-storefront .rc-fig{border-right:0;border-bottom:1px solid var(--rc-line)}
}
@media(max-width:560px){
  body.rc-storefront .rc-gal--2,
  body.rc-storefront .rc-gal--3,
  body.rc-storefront .rc-gal--4{grid-template-columns:1fr}
  body.rc-storefront .rc-payload__c{border-right:0;border-bottom:1px solid var(--rc-line)}
}

/* ============================================================
   PRODUCT PAGE LAYOUTS  (v1.30)
   Layout-specific classes for the three Hellcat directions.
   ============================================================ */

/* per-product hero and band imagery, theme-owned like every other background */
body.rc-storefront .rc-phero--hellcat{background-image:url('assets/img/hellcat/hero.jpg')}
body.rc-storefront .rc-pband--hellcat{background-image:url('assets/img/hellcat/band.jpg')}
body.rc-storefront .rc-pband--widow{background-image:url('assets/img/black-widow/band.jpg')}
body.rc-storefront .rc-pband--edge130{background-image:url('assets/img/edge-130/band.jpg')}
body.rc-storefront .rc-pband--teal2{background-image:url('assets/img/teal-2/band.jpg')}
body.rc-storefront .rc-pband--usv{background-image:url('assets/img/blue-ops/band.jpg')}
body.rc-storefront .rc-pband--quaze{background-image:url('assets/img/quaze/band.jpg')}
body.rc-storefront .rc-pband--s2s{background-image:url('assets/img/s2s/band.jpg')}
body.rc-storefront .rc-pband--fang{background-image:url('assets/img/fang/band.jpg')}
body.rc-storefront .rc-pband--swarm{background-image:url('assets/img/swarm/band.jpg')}
body.rc-storefront .rc-pband--trichon{background-image:url('assets/img/trichon/band.jpg')}

/* ---------- B: split hero ---------- */
body.rc-storefront .rc-pgsplit{
  display:grid;grid-template-columns:1.05fr .95fr;width:100%;
  border-bottom:1px solid var(--rc-line);align-items:stretch;padding:0}
body.rc-storefront .rc-pgsplit__media{padding:0;position:relative;min-height:520px}
body.rc-storefront .rc-pgsplit__media .rc-figure,
body.rc-storefront .rc-pgsplit__media .elementor-widget-shortcode,
body.rc-storefront .rc-pgsplit__media .elementor-shortcode{height:100%}
body.rc-storefront .rc-pgsplit__media .rc-figure{border:0;border-right:1px solid var(--rc-line2)}
/* Split heroes crop with object-fit, so a 16:9 source loses a lot of
   its width in a roughly 5:4 column. Source images for this slot are
   cut to about 4:3 with the subject centred, and object-position is
   pinned to centre so the remaining crop is even on both sides. */
body.rc-storefront .rc-pgsplit__media img{
  height:100%;min-height:520px;object-fit:cover;object-position:center center;
}
body.rc-storefront .rc-pgsplit__data{
  padding:clamp(34px,4vw,64px) clamp(22px,3.4vw,56px);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
body.rc-storefront .rc-ptitle--sm .elementor-heading-title{font-size:clamp(38px,5.2vw,76px)}
body.rc-storefront .rc-pgsplit__data .rc-pbody{margin:18px 0 26px}
body.rc-storefront .rc-pgsplit__data .rc-figs--stack{max-width:460px}

/* full-bleed statement band */
body.rc-storefront .rc-pband{
  position:relative;width:100%;min-height:56vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,7vw,110px) clamp(22px,4vw,56px);
  background-size:cover;background-position:center 45%;overflow:hidden}
body.rc-storefront .rc-pband:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,14,20,.90) 0%,rgba(10,14,20,.45) 68%,rgba(10,14,20,.80) 100%),
             linear-gradient(to bottom,var(--rc-bg),transparent 22%,transparent 78%,var(--rc-bg))}
body.rc-storefront .rc-pband .rc-inner{
  position:relative;z-index:3;max-width:1460px;margin-inline:auto;width:100%;
  align-items:flex-start;gap:0}

/* ---------- C: editorial ---------- */
body.rc-storefront .rc-pedit__top{padding-top:clamp(48px,6vw,90px)}
body.rc-storefront .rc-pedit__head{
  display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;
  width:100%;padding:0;gap:24px;flex-wrap:wrap}
body.rc-storefront .rc-pedit__idx{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  font-size:clamp(28px,3.6vw,54px);color:var(--rc-dim);line-height:1;letter-spacing:.02em}
body.rc-storefront .rc-pedit__rule{width:100%;height:1px;background:var(--rc-line2);margin:26px 0 16px}
body.rc-storefront .rc-pedit__meta{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;width:100%;
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rc-dim)}
body.rc-storefront .rc-pedit__meta a{color:var(--rc-accent);text-decoration:none}

body.rc-storefront .rc-pedit__three{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,52px);width:100%;padding:0}
body.rc-storefront .rc-pedit__col{border-top:1px solid var(--rc-line2);padding-top:18px}
body.rc-storefront .rc-pedit__col h4{
  font-size:17px;margin:0 0 12px;color:var(--rc-text);
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);text-transform:none;
  letter-spacing:0}
body.rc-storefront .rc-pedit__col p{margin:0;font-size:12.5px;line-height:1.85;color:var(--rc-muted)}

body.rc-storefront .rc-pedit__split{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,90px);
  width:100%;padding:0;align-items:start}
body.rc-storefront .rc-pedit__l,body.rc-storefront .rc-pedit__r{padding:0;align-items:stretch}
body.rc-storefront .rc-pedit__h .elementor-heading-title em{
  font-style:normal;color:var(--rc-muted);display:block}
body.rc-storefront .rc-pedit__figs{border-top:1px solid var(--rc-line2)}
body.rc-storefront .rc-pedit__fig{
  display:flex;align-items:baseline;justify-content:space-between;gap:28px;
  padding:20px 0;border-bottom:1px solid var(--rc-line)}
body.rc-storefront .rc-pedit__fig b{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  font-size:clamp(44px,6vw,92px);line-height:.9;color:var(--rc-text)}
body.rc-storefront .rc-pedit__fig span{
  font-family:var(--rc-mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--rc-muted);text-align:right;max-width:160px}

body.rc-storefront .rc-pedit__lead{
  font-size:clamp(19px,2.3vw,30px);line-height:1.55;color:var(--rc-muted);max-width:70ch}
body.rc-storefront .rc-pedit__lead strong{color:var(--rc-text);font-weight:400}

@media(max-width:1000px){
  body.rc-storefront .rc-pgsplit{grid-template-columns:1fr}
  body.rc-storefront .rc-pgsplit__media{min-height:340px}
  body.rc-storefront .rc-pgsplit__media img{min-height:340px}
  body.rc-storefront .rc-pgsplit__media .rc-figure{border-right:0;border-bottom:1px solid var(--rc-line2)}
  body.rc-storefront .rc-pedit__three{grid-template-columns:1fr}
  body.rc-storefront .rc-pedit__split{grid-template-columns:1fr}
}

/* ============================================================
   COMMAND DECK HERO SCALE  (v1.31)

   Layout B's hero at roughly two thirds. Everything is scoped to
   .rc-pgsplit so the shared components keep their sizes for the
   other layouts and for the rest of the page.
   ============================================================ */

body.rc-storefront .rc-pgsplit__media{min-height:350px}
body.rc-storefront .rc-pgsplit__media img{min-height:350px}

body.rc-storefront .rc-pgsplit__data{padding:clamp(26px,3vw,44px) clamp(20px,2.6vw,40px)}

body.rc-storefront .rc-pgsplit .rc-ptitle--sm .elementor-heading-title{
  font-size:clamp(25px,3.4vw,50px)}

body.rc-storefront .rc-pgsplit .rc-pkicker{font-size:10px;letter-spacing:.26em;margin-bottom:14px}
body.rc-storefront .rc-pgsplit .rc-pkicker:before{width:26px}

body.rc-storefront .rc-pgsplit .rc-psub{font-size:11.5px;letter-spacing:.2em;margin-top:12px}

body.rc-storefront .rc-pgsplit__data .rc-pbody{font-size:13px;line-height:1.85;margin:14px 0 20px}

body.rc-storefront .rc-pgsplit .rc-figs--stack{max-width:400px}
body.rc-storefront .rc-pgsplit .rc-fig{padding:18px}
body.rc-storefront .rc-pgsplit .rc-fig b{font-size:clamp(21px,2.4vw,33px)}
body.rc-storefront .rc-pgsplit .rc-fig b em{font-size:.42em;margin-left:5px}
body.rc-storefront .rc-pgsplit .rc-fig span{font-size:9.5px;letter-spacing:.2em;margin-top:8px}

body.rc-storefront .rc-pgsplit a.rc-btn{padding:13px 20px;font-size:11px;letter-spacing:.16em}
body.rc-storefront .rc-pgsplit a.rc-doc{padding:13px 18px;font-size:10.5px;letter-spacing:.16em}

@media(max-width:1000px){
  body.rc-storefront .rc-pgsplit__media,
  body.rc-storefront .rc-pgsplit__media img{min-height:260px}
}


/* ============================================================
   BROCHURE BUTTON  (v1.32)
   Single-line label now that the sub-caption is removed.
   ============================================================ */
body.rc-storefront a.rc-doc{align-items:center}
body.rc-storefront a.rc-doc small{display:none}

/* ============================================================
   FIGURE GRID  (v1.34)

   Six figures as three columns by two rows in the split hero.
   Hairlines come from a 1px gap over a line-coloured background,
   so the internal rules land correctly for any cell count without
   per-cell border rules that break when the count changes.
   ============================================================ */

body.rc-storefront .rc-figs--grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--rc-line);
  border:1px solid var(--rc-line2);
  width:100%;max-width:none}
body.rc-storefront .rc-figs--grid .rc-fig{
  border:0;background:var(--rc-bg);
  display:flex;flex-direction:column;justify-content:center}

/* the hero shortens because six figures now occupy two rows, not five rows */
body.rc-storefront .rc-pgsplit .rc-figs--grid{max-width:none}
body.rc-storefront .rc-pgsplit .rc-figs--grid .rc-fig{padding:20px 16px}
body.rc-storefront .rc-pgsplit .rc-figs--grid .rc-fig b{font-size:clamp(20px,2.1vw,30px)}
body.rc-storefront .rc-pgsplit .rc-figs--grid .rc-fig b em{font-size:.40em;margin-left:5px}
body.rc-storefront .rc-pgsplit .rc-figs--grid .rc-fig span{
  font-size:9px;letter-spacing:.18em;margin-top:8px;line-height:1.5}

/* trimmed, but the data column keeps its air */
body.rc-storefront .rc-pgsplit__media,
body.rc-storefront .rc-pgsplit__media img{min-height:300px}
body.rc-storefront .rc-pgsplit__data{padding:clamp(30px,3.2vw,52px) clamp(22px,2.8vw,44px)}
body.rc-storefront .rc-pgsplit__data .rc-pbody{margin:14px 0 24px;max-width:62ch}
body.rc-storefront .rc-pgsplit .rc-figs--grid + .rc-pcta__a,
body.rc-storefront .rc-pgsplit .elementor-widget-html + .elementor-widget-html{margin-top:0}

@media(max-width:1000px){
  body.rc-storefront .rc-pgsplit__media,
  body.rc-storefront .rc-pgsplit__media img{min-height:260px}
}
@media(max-width:620px){
  body.rc-storefront .rc-figs--grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:380px){
  body.rc-storefront .rc-figs--grid{grid-template-columns:1fr}
}


/* ============================================================
   HERO COPY WIDTH  (v1.35)

   The hero copy column at half the available width. Capped at the
   inner max-width so it does not keep growing on very wide screens,
   and released back to full width on tablet and below where half a
   column is unreadable.
   ============================================================ */

body.rc-storefront .rc-hero > .rc-inner--half{
  width:50%;
  max-width:min(50%,730px);
  margin-inline:0}
body.rc-storefront .rc-hero > .rc-inner--half .rc-lede{max-width:none}

@media(max-width:1100px){
  body.rc-storefront .rc-hero > .rc-inner--half{width:72%;max-width:none}
}
@media(max-width:820px){
  body.rc-storefront .rc-hero > .rc-inner--half{width:100%}
}

/* ============================================================
   FANG MODULE RENDER ROW  (v1.38)

   The stat strip and configurator heading sit left, three render
   cards fill the empty right half. Below the tablet breakpoint the
   two stack and the cards go to a three-across strip so they do not
   become postage stamps.
   ============================================================ */

body.rc-storefront .rc-fangtop{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(24px,3.4vw,56px);
  width:100%;padding:0;align-items:start}

body.rc-storefront .rc-fangtop__l,
body.rc-storefront .rc-fangtop__r{padding:0;width:auto;align-items:stretch}

body.rc-storefront .rc-fangtop__l .rc-strip{margin-top:0}

body.rc-storefront .rc-fangtop__r{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start}
body.rc-storefront .rc-fangtop__r .rc-figure{aspect-ratio:4/3}
body.rc-storefront .rc-fangtop__r .elementor-widget-shortcode,
body.rc-storefront .rc-fangtop__r .elementor-shortcode{height:100%}

@media(max-width:1024px){
  body.rc-storefront .rc-fangtop{grid-template-columns:1fr;gap:30px}
  body.rc-storefront .rc-fangtop__r{order:2}
}
@media(max-width:520px){
  body.rc-storefront .rc-fangtop__r{grid-template-columns:1fr 1fr}
  body.rc-storefront .rc-fangtop__r .elementor-widget-shortcode:last-child{grid-column:1 / -1}
}

/* ============================================================
   FANG STAT STRIP  (v1.39)

   Three cells, no SKU count. Each cell takes the same 4:3 ratio as
   a render card, so with equal column widths the strip and the
   render row come out the same height without either being pinned
   to a fixed pixel value that breaks at another viewport.
   ============================================================ */

body.rc-storefront .rc-fangtop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

body.rc-storefront .rc-strip--tall{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--rc-line);
  border:1px solid var(--rc-line2);width:100%;margin:0}
body.rc-storefront .rc-strip--tall > div{
  aspect-ratio:4/3;
  background:var(--rc-bg);
  border:0;padding:14px 12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;
  font-family:var(--rc-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rc-dim);line-height:1.5}
body.rc-storefront .rc-strip--tall > div b{
  display:block;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  font-size:clamp(24px,2.6vw,40px);line-height:1;color:var(--rc-accent);letter-spacing:.01em}

@media(max-width:1024px){
  body.rc-storefront .rc-strip--tall > div{aspect-ratio:auto;min-height:110px}
}


/* ============================================================
   PLATFORM PICKER  (v1.49.0)

   A line page carries more than one product, so the CTA has to
   ask which. One select, one button. The button's href is
   rewritten on change and reaches /?rc-add=<ids>, handled by the
   mu-plugin, which accepts a comma-separated list and adds each.
   ============================================================ */

body.rc-storefront .rc-pick__f{
  display:flex;flex-direction:column;gap:8px;flex:1 1 240px;min-width:0}
body.rc-storefront .rc-pick__l{
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rc-dim)}
body.rc-storefront .rc-pick__go{display:flex;align-items:flex-end}
body.rc-storefront .rc-pick__go a.rc-btn{align-self:auto;white-space:nowrap}
@media(max-width:600px){

  /* flex-basis follows the main axis, so the 240px on .rc-pick__f
     stopped being a minimum WIDTH and became a minimum HEIGHT the
     moment the container turned into a column. A label and a select
     were being stretched inside a 240px box, which is where the gap
     above the button came from. */
  body.rc-storefront .rc-pick__f{flex:0 0 auto}

  body.rc-storefront .rc-pick__go{align-items:stretch}
  body.rc-storefront .rc-pick__go a.rc-btn{width:100%;text-align:center}
}


/* ============================================================
   COMPARISON TABLE  (v1.49.0)

   Built for a line where one platform is documented and another
   is not yet. Unknown cells are marked rather than left blank,
   so an empty cell reads as "not published" instead of "zero".
   ============================================================ */

body.rc-storefront .rc-cmp{width:100%;overflow-x:auto}
body.rc-storefront .rc-cmp table{
  width:100%;border-collapse:collapse;min-width:560px}
body.rc-storefront .rc-cmp th,
body.rc-storefront .rc-cmp td{
  text-align:left;padding:15px 18px;border-bottom:1px solid var(--rc-line);
  vertical-align:top}
body.rc-storefront .rc-cmp thead th{
  border-bottom:1px solid var(--rc-accent);
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--rc-text)}
body.rc-storefront .rc-cmp thead th:first-child{
  font-family:var(--rc-mono);font-weight:400;font-size:10.5px;
  letter-spacing:.22em;color:var(--rc-dim)}
body.rc-storefront .rc-cmp tbody th{
  font-family:var(--rc-mono);font-weight:400;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rc-muted);
  width:34%}
body.rc-storefront .rc-cmp tbody td{
  font-size:14.5px;line-height:1.6;color:var(--rc-body)}
body.rc-storefront .rc-cmp tbody tr:last-child th,
body.rc-storefront .rc-cmp tbody tr:last-child td{border-bottom:0}
body.rc-storefront .rc-cmp__tbd{
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rc-dim)}
body.rc-storefront .rc-cmp__note{
  margin-top:16px;font-family:var(--rc-mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rc-dim);line-height:2}


/* ============================================================
   DIAGRAM FRAME  (v1.51.0)
   A wrapper for inline SVG schematics. The SVG itself carries
   no colour: it paints with currentColor and CSS variables, so
   a palette change in :root reaches the diagram too.
   ============================================================ */

body.rc-storefront .rc-diag{
  border:1px solid var(--rc-line2);
  background:var(--rc-ink);
  padding:clamp(20px,3vw,38px);
}
body.rc-storefront .rc-diag svg{display:block;width:100%;height:auto;color:var(--rc-muted)}

/* SVG presentation attributes do not resolve var(), so every colour and
   font in a diagram is set here by class rather than inline. */
body.rc-storefront .rc-diag .rc-d-ln{stroke:var(--rc-muted);fill:none}
body.rc-storefront .rc-diag .rc-d-ln--soft{stroke:var(--rc-muted);fill:none;opacity:.45}
body.rc-storefront .rc-diag .rc-d-ln--faint{stroke:var(--rc-muted);fill:none;opacity:.28}
body.rc-storefront .rc-diag .rc-d-acc{stroke:var(--rc-accent);fill:none;opacity:.85}
body.rc-storefront .rc-diag .rc-d-pad{fill:var(--rc-accent);opacity:.16;stroke:none}
body.rc-storefront .rc-diag .rc-d-head{fill:var(--rc-accent);stroke:none}
body.rc-storefront .rc-diag text{
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.16em;
  fill:var(--rc-muted);text-transform:uppercase;
}
body.rc-storefront .rc-diag .rc-d-t--sm{font-size:10px;opacity:.7}
body.rc-storefront .rc-diag .rc-d-t--acc{fill:var(--rc-accent);font-size:10px}
body.rc-storefront .rc-diag__cap{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rc-line);
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rc-dim);line-height:2;
}

/* ============================================================
   PARTNER / SUBSIDIARY LOCKUP  (v1.51.0)
   Used where a page carries a brand that is not Red Cat itself.
   ============================================================ */

body.rc-storefront .rc-brandbar{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);
  flex-wrap:wrap;
  padding:18px 0 0;margin-top:22px;border-top:1px solid var(--rc-line);
}
body.rc-storefront .rc-brandbar img{height:34px;width:auto;display:block;opacity:.92}
body.rc-storefront .rc-brandbar span{
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-dim);line-height:1.9;
}
@media(max-width:600px){
  body.rc-storefront .rc-brandbar img{height:26px}
}


/* ============================================================
   KILL CHAIN STEPS  (v1.56.0)
   Numbered stages with a rule running between them. Used on the
   package pages, where the argument is a sequence rather than a
   list of features.
   ============================================================ */

body.rc-storefront .rc-chain{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rc-line);border:1px solid var(--rc-line2);width:100%;
}
body.rc-storefront .rc-chain__s{
  background:var(--rc-bg);padding:30px 30px 34px;position:relative;
  display:flex;flex-direction:column;
}
body.rc-storefront .rc-chain__n{
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rc-accent);margin-bottom:16px;
  display:flex;align-items:center;gap:12px;
}
body.rc-storefront .rc-chain__n:after{content:"";flex:1;height:1px;background:var(--rc-line2)}
body.rc-storefront .rc-chain__h{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;font-size:26px;line-height:1.05;
  color:var(--rc-text);margin:0 0 6px;
}
body.rc-storefront .rc-chain__r{
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rc-dim);margin-bottom:16px;
}
body.rc-storefront .rc-chain__p{font-size:14px;line-height:1.75;color:var(--rc-body);margin:0 0 16px}
body.rc-storefront .rc-chain__l{list-style:none;margin:auto 0 0;padding:0}
body.rc-storefront .rc-chain__l li{
  font-size:13px;line-height:1.6;color:var(--rc-muted);
  padding:9px 0 9px 18px;border-top:1px solid var(--rc-line);position:relative;
}
body.rc-storefront .rc-chain__l li:before{
  content:"";position:absolute;left:0;top:15px;width:6px;height:6px;
  background:var(--rc-accent);transform:rotate(45deg);
}
@media(max-width:900px){
  body.rc-storefront .rc-chain{grid-template-columns:1fr}
}

/* ============================================================
   VALUE CALLOUT  (v1.56.0)
   Deliberately one self-contained block so it can be deleted in a
   single move if the commercial position changes.
   ============================================================ */

body.rc-storefront .rc-value{
  border:1px solid var(--rc-line2);border-left:2px solid var(--rc-accent);
  background:var(--rc-ink);padding:22px 26px;margin-top:26px;
}
body.rc-storefront .rc-value__l{
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rc-accent);margin-bottom:10px;
}
body.rc-storefront .rc-value p{margin:0;font-size:14px;line-height:1.8;color:var(--rc-body)}

/* ============================================================
   PRODUCT BLOCK  (v1.61.0)
   A bordered panel for one purchasable thing inside a page that
   sells several. Contents list on the left, action underneath.
   ============================================================ */


/* ---- image left, content right ----
   The image is a full-bleed column rather than a padded figure, so the
   photograph meets the panel border on three sides. That is why the
@media(max-width:900px){
}
body.rc-storefront .rc-pb__k{
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rc-accent);margin-bottom:12px;
}
body.rc-storefront .rc-pb__h{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);line-height:1.08;
  color:var(--rc-text);margin:0 0 14px;
}
body.rc-storefront .rc-pb__p{font-size:14.5px;line-height:1.8;color:var(--rc-body);margin:0 0 22px;max-width:70ch}
body.rc-storefront .rc-pb__l{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 34px;border-top:1px solid var(--rc-line);
}
body.rc-storefront .rc-pb__l li{
  font-size:13.5px;line-height:1.6;color:var(--rc-muted);
  padding:11px 0 11px 18px;border-bottom:1px solid var(--rc-line);position:relative;
}
body.rc-storefront .rc-pb__l li:before{
  content:"";position:absolute;left:0;top:17px;width:6px;height:6px;
  background:var(--rc-accent);transform:rotate(45deg);
}
body.rc-storefront .rc-pb__l li em{font-style:normal;color:var(--rc-dim)}


/* ============================================================
   BLUE OPS COMPONENTS  (v1.0.0)

   Everything below is new for Blue Ops. The sections above are
   inherited from the Red Cat storefront and unchanged apart from
   the palette, which is the whole point of the system: the same
   components, a different accent block.
   ============================================================ */

/* ---------- reveal on scroll ----------
   Paired with [data-rc-reveal] in night-ops.js. Content is hidden
   here and shown by the observer. The no-JS safety net below matters:
   if the script fails to load the page must still be readable, so
   .no-js and the print sheet force everything visible. */
body.rc-storefront [data-rc-reveal]{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
body.rc-storefront [data-rc-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  body.rc-storefront [data-rc-reveal]{opacity:1;transform:none;transition:none}
}
@media print{ body.rc-storefront [data-rc-reveal]{opacity:1;transform:none} }

/* ---------- video layers ----------
   --bg is a decorative cover layer behind copy. --inline sits in flow. */
body.rc-storefront .rc-vid{position:relative;overflow:hidden}
body.rc-storefront .rc-vid--bg{position:absolute;inset:0;z-index:0}
body.rc-storefront .rc-vid--bg video,
body.rc-storefront .rc-vid--bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
body.rc-storefront .rc-vid--inline{width:100%;aspect-ratio:16/9;border:1px solid var(--rc-line2)}
body.rc-storefront .rc-vid--inline video,
body.rc-storefront .rc-vid--inline img{width:100%;height:100%;object-fit:cover;display:block}

/* Scrim over any video or plate. Two passes, same construction as the
   storefront module: horizontal protects the copy column, vertical
   fades the plate into the page so there is never a hard seam. */
body.rc-storefront .rc-scrim:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,14,20,.92) 0%,rgba(10,14,20,.55) 58%,rgba(10,14,20,.85) 100%),
             linear-gradient(to bottom,var(--rc-bg),transparent 22%,transparent 74%,var(--rc-bg))}
body.rc-storefront .rc-scrim--soft:after{
  background:linear-gradient(to top,var(--rc-bg) 4%,rgba(10,14,20,.35) 46%,transparent 78%)}

/* ---------- video hero ---------- */
body.rc-storefront .rc-vhero{
  position:relative;min-height:clamp(520px,84vh,860px);
  display:flex;align-items:flex-end;overflow:hidden;
  padding:clamp(56px,7vw,110px) clamp(22px,4vw,56px) clamp(48px,6vw,84px);
  border-bottom:1px solid var(--rc-line)}
body.rc-storefront .rc-vhero > .rc-inner{position:relative;z-index:4;max-width:1460px}
body.rc-storefront .rc-vhero__k{
  font-family:var(--rc-mono);font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--rc-accent);margin:0 0 20px;display:flex;align-items:center;gap:14px}
body.rc-storefront .rc-vhero__k:before{content:"";width:40px;height:1px;background:var(--rc-accent)}
body.rc-storefront .rc-vhero__h{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);text-transform:uppercase;
  font-size:88px;line-height:.92;letter-spacing:-.012em;
  color:var(--rc-text);margin:0 0 20px;max-width:16ch}
body.rc-storefront .rc-vhero__p{
  font-size:clamp(15.5px,1.5vw,19px);line-height:1.7;color:var(--rc-text);
  max-width:58ch;margin:0 0 30px}
body.rc-storefront .rc-vhero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- quick specs strip ---------- */
body.rc-storefront .rc-qs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1px solid var(--rc-line2);border-bottom:1px solid var(--rc-line2);
  max-width:1460px;margin-inline:auto;width:100%}
body.rc-storefront .rc-qs__i{padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,32px);
  border-right:1px solid var(--rc-line)}
body.rc-storefront .rc-qs__i:last-child{border-right:0}
body.rc-storefront .rc-qs__l{
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rc-dim);margin:0 0 14px}
body.rc-storefront .rc-qs__v{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  font-size:clamp(34px,4vw,56px);line-height:1;color:var(--rc-text);letter-spacing:.01em}
body.rc-storefront .rc-qs__u{font-size:.42em;color:var(--rc-accent);margin-left:.24em;letter-spacing:.08em}
body.rc-storefront .rc-qs__n{
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rc-dim);margin:12px 0 0;line-height:1.7}
@media(max-width:900px){
  body.rc-storefront .rc-qs__i{border-right:0;border-bottom:1px solid var(--rc-line)}
  body.rc-storefront .rc-qs__i:last-child{border-bottom:0}
}

/* ---------- partner / integration logo bar ----------
   Version B only. Logos are supplied as images; until they arrive the
   wordmark fallback below keeps the row legible rather than empty. */
body.rc-storefront .rc-logobar{
  border-top:1px solid var(--rc-line);border-bottom:1px solid var(--rc-line);
  background:var(--rc-ink);padding:clamp(26px,3vw,40px) clamp(22px,4vw,56px)}
body.rc-storefront .rc-logobar__l{
  font-family:var(--rc-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--rc-dim);text-align:center;margin:0 0 22px}
body.rc-storefront .rc-logobar__row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(28px,5vw,72px);max-width:1460px;margin-inline:auto}
body.rc-storefront .rc-logobar__i{
  font-family:var(--rc-display);font-weight:500;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rc-muted);display:flex;align-items:center;gap:10px;
  opacity:.82;transition:.2s}
body.rc-storefront .rc-logobar__i:hover{opacity:1;color:var(--rc-text)}
body.rc-storefront .rc-logobar__i img{max-height:26px;width:auto;display:block}

/* ---------- field demo cards ----------
   Matched to the agency build rather than to the storefront card, at
   Kendrick's direction. Three differences from the rest of this system,
   all deliberate and all theirs:

     1. A small corner radius. Everything else in Night Ops is radius 0.
     2. Sentence-case titles in the display face at a lighter weight,
        rather than the uppercase Gridnik used elsewhere.
     3. The play control sits in the text bar on the right, not centred
        over the image.

   The media is a muted loop that plays on hover and pauses on leave, so
   nothing downloads until the pointer arrives (preload="none"). On touch
   there is no hover, so the poster stands and the card still works.
   ---------------------------------------------------------------- */
body.rc-storefront .rc-demos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(16px,2vw,24px);width:100%;margin-top:clamp(28px,3.4vw,40px)}

body.rc-storefront .rc-demo{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--rc-line);border-radius:6px;background:transparent;
  text-align:left;padding:0;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .2s}
body.rc-storefront .rc-demo:hover{border-color:var(--rc-line2)}
body.rc-storefront .rc-demo:focus-visible{
  outline:2px solid var(--rc-accent);outline-offset:2px}

body.rc-storefront .rc-demo__m{
  position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:var(--rc-ink)}
body.rc-storefront .rc-demo__m video,
body.rc-storefront .rc-demo__m img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease-out}
body.rc-storefront .rc-demo:hover .rc-demo__m video,
body.rc-storefront .rc-demo:hover .rc-demo__m img{transform:scale(1.03)}

body.rc-storefront .rc-demo__b{
  display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;
  gap:16px;background:var(--rc-panel);padding:clamp(18px,2vw,24px)}
body.rc-storefront .rc-demo__t{
  /* display:block because this is a <span> in a <span>: inline, the line
     under the title ran onto the same line and these margins did nothing. */
  display:block;
  font-family:var(--rc-display);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(19px,1.7vw,23px);line-height:1.2;color:var(--rc-text);margin:0}
body.rc-storefront .rc-demo__p{
  display:block;font-size:14.5px;line-height:1.6;color:var(--rc-body);margin:5px 0 0}
body.rc-storefront .rc-demo__go{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:var(--rc-accent);color:var(--rc-bg);
  display:flex;align-items:center;justify-content:center;transition:background-color .2s}
body.rc-storefront .rc-demo:hover .rc-demo__go{background:#E8F1FF}
body.rc-storefront .rc-demo__go svg{display:block;fill:currentColor}

@media(prefers-reduced-motion:reduce){
  body.rc-storefront .rc-demo__m video,
  body.rc-storefront .rc-demo__m img{transition:none}
  body.rc-storefront .rc-demo:hover .rc-demo__m video,
  body.rc-storefront .rc-demo:hover .rc-demo__m img{transform:none}
}

/* ---------- video lightbox ----------
   The YouTube iframe is only created when a card is opened, so no third
   party is contacted on page load. Uses youtube-nocookie. */
body.rc-storefront .rc-lb{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);
  background:rgba(6,9,13,.88);backdrop-filter:blur(6px)}
body.rc-storefront .rc-lb.is-open{display:flex}
body.rc-storefront .rc-lb__in{
  position:relative;width:100%;max-width:1180px;aspect-ratio:16/9;
  border:1px solid var(--rc-line2);background:#000;overflow:hidden}
body.rc-storefront .rc-lb__in iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
body.rc-storefront .rc-lb__x{
  position:absolute;top:-1px;right:-1px;transform:translateY(-100%);
  display:inline-flex;align-items:center;gap:9px;
  background:transparent;border:0;cursor:pointer;padding:12px 2px;
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rc-body);transition:color .15s}
body.rc-storefront .rc-lb__x:hover{color:var(--rc-accent)}
body.rc-storefront .rc-lb__x:focus-visible{outline:2px solid var(--rc-accent);outline-offset:3px}
body.rc-storefront .rc-lb__cap{
  position:absolute;left:0;bottom:-1px;transform:translateY(100%);
  padding:12px 2px;font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rc-dim)}
body.rc-storefront.rc-lb-open{overflow:hidden}
@media(max-width:640px){
  body.rc-storefront .rc-lb__x{transform:none;top:auto;bottom:-1px;right:0}
}

/* ---------- capability grid ---------- */
body.rc-storefront .rc-caps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px;background:var(--rc-line);border:1px solid var(--rc-line);width:100%}
body.rc-storefront .rc-cap{background:var(--rc-panel);padding:clamp(26px,3vw,38px)}
body.rc-storefront .rc-cap__i{
  width:34px;height:34px;border:1px solid var(--rc-accent);display:flex;
  align-items:center;justify-content:center;margin-bottom:20px;color:var(--rc-accent)}
body.rc-storefront .rc-cap__i svg{width:17px;height:17px;display:block}
body.rc-storefront .rc-cap__t{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);text-transform:uppercase;
  font-size:17px;line-height:1.15;color:var(--rc-text);margin:0 0 10px}
body.rc-storefront .rc-cap__p{font-size:14px;line-height:1.75;color:var(--rc-body);margin:0}

/* ---------- fleet cards ----------
   The status treatment does real work here. Only the Variant 7 has
   photography, and inventing plates for the other two would read as
   missing art. Instead the plate gets progressively more abstract as
   the programme gets earlier, so the visual state carries the
   programme state. An operational hull is photographed; one in
   development is a technical plate; one in design is a grid. */
/* ============================================================
   FAMILY OF SYSTEMS  -  stacking carousel  (v1.2)

   Matched to the agency build at Kendrick's direction. Cards are
   absolutely positioned and parked by transform: the active card and
   everything before it sit in a left stack, everything after it waits
   as a sliver on the right. Advancing slides the next card across to
   cover, which is the motion their scroll-pinned version had before
   they converted it to prev/next.

   Widths and offsets are computed in JS because they depend on the
   viewport, but every transition lives here so reduced-motion can
   switch it off in one place.

   Headlines stay house style (uppercase Gridnik). Only the carousel
   structure and the card overlay come from the agency.
   ============================================================ */

body.rc-storefront .rc-fleet__top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}

body.rc-storefront .rc-fleet__nav{
  display:flex;align-items:center;gap:12px;flex:0 0 auto}

body.rc-storefront .rc-fleet__btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rc-line);background:transparent;color:var(--rc-text);
  border-radius:6px;cursor:pointer;transition:border-color .15s,color .15s,opacity .15s}
body.rc-storefront .rc-fleet__btn:hover:not(:disabled){border-color:var(--rc-accent);color:var(--rc-accent)}
body.rc-storefront .rc-fleet__btn:disabled{opacity:.3;cursor:default}
body.rc-storefront .rc-fleet__btn svg{display:block}

body.rc-storefront .rc-fleet__count{
  font-family:var(--rc-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;color:var(--rc-text)}
body.rc-storefront .rc-fleet__count i{font-style:normal;color:var(--rc-dim)}

/* viewport */
body.rc-storefront .rc-fleet{
  position:relative;margin-top:40px;height:60vh;min-height:26rem;overflow:hidden}

body.rc-storefront .rc-fc{
  position:absolute;top:50%;left:0;overflow:hidden;
  border:1px solid var(--rc-line);background:var(--rc-panel);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform}
body.rc-storefront .rc-fc[aria-hidden="true"]{cursor:pointer}

/* Pre-JS and no-JS fallback: without inline styles the cards would all
   stack on top of each other at the same spot. Show the first, hide the
   rest, so a scripting failure degrades to a single hero card. */
body.rc-storefront .rc-fleet:not(.is-ready) .rc-fc{
  position:relative;top:auto;transform:none;width:100%;height:auto;aspect-ratio:4/3;margin-bottom:16px}
body.rc-storefront .rc-fleet:not(.is-ready) .rc-fc:not(:first-child){display:none}

body.rc-storefront .rc-fc__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Bottom-up scrim so the overlay copy holds contrast over any frame. */
body.rc-storefront .rc-fc__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--rc-bg) 4%,rgba(10,14,20,.6) 44%,transparent 74%)}

/* Dim a card while it is covered by the stack. Above the copy on purpose,
   so the whole panel including text fades rather than the photo alone. */
body.rc-storefront .rc-fc__dim{
  position:absolute;inset:0;z-index:20;background:var(--rc-bg);opacity:0;
  pointer-events:none;transition:opacity .5s ease}
body.rc-storefront .rc-fc[aria-hidden="true"] .rc-fc__dim{opacity:.6}

body.rc-storefront .rc-fc__n{
  position:absolute;top:24px;right:24px;z-index:10;
  font-family:var(--rc-mono);font-size:12px;letter-spacing:.2em;
  font-variant-numeric:tabular-nums;color:var(--rc-dim)}

body.rc-storefront .rc-fc__b{
  position:absolute;left:0;right:0;bottom:0;z-index:10;padding:clamp(22px,3vw,36px)}

body.rc-storefront .rc-fc__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.rc-storefront .rc-fc__st{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--rc-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
body.rc-storefront .rc-fc__st:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
body.rc-storefront .rc-fc__st--op{color:#2BD4A1}
body.rc-storefront .rc-fc__st--dev{color:#F5A524}
body.rc-storefront .rc-fc__st--des{color:var(--rc-dim)}
body.rc-storefront .rc-fc__d{
  margin:0 0 0 8px;font-family:var(--rc-mono);font-size:10px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--rc-dim)}

body.rc-storefront .rc-fc__t{
  margin:12px 0 0;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.05;
  font-size:clamp(26px,3.4vw,40px);color:var(--rc-text)}
body.rc-storefront .rc-fc__p{
  margin:10px 0 0;max-width:34ch;font-size:15px;line-height:1.6;color:var(--rc-body)}

/* Mono accent text link, the agency's treatment in place of a button. */
body.rc-storefront .rc-tlink{
  display:inline-block;margin-top:24px;
  font-family:var(--rc-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rc-accent);text-decoration:none;transition:color .15s}
body.rc-storefront .rc-tlink:hover{color:var(--rc-text)}

/* The viewport keeps an explicit height at every width. The cards are
   absolutely positioned, so they contribute nothing to it: an `auto` height
   here collapses the section to zero and the carousel disappears. It also
   feeds the JS, which reads clientHeight to size the cards. */
@media (max-width:767px){
  body.rc-storefront .rc-fleet{height:58vh;min-height:22rem}
  body.rc-storefront .rc-fc__p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  body.rc-storefront .rc-fc{transition:none}
  body.rc-storefront .rc-fc__dim{transition:none}
}

/* ============================================================
   VESSEL CARD GRID  (v1.2)

   The original 3-up spec-table cards. Homepage A moved to the agency's
   stacking carousel and no longer uses these, but Homepage B (the VP's
   Figma structure) still does, so they keep their own namespace rather
   than fighting the carousel for the .rc-fc name.
   ============================================================ */

body.rc-storefront .rc-vgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(18px,2.2vw,26px);width:100%}
body.rc-storefront .rc-vc{
  display:flex;flex-direction:column;border:1px solid var(--rc-line);
  background:var(--rc-panel);overflow:hidden}
body.rc-storefront .rc-vc__m{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--rc-ink)}
body.rc-storefront .rc-vc__m img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}

/* Pending plate, for hulls with no photography yet. */
body.rc-storefront .rc-vc__m--pending{
  background:
    repeating-linear-gradient(135deg,transparent 0 9px,rgba(61,125,255,.05) 9px 10px),
    radial-gradient(ellipse at 50% 120%,rgba(61,125,255,.13),transparent 62%),
    var(--rc-ink);
  display:flex;align-items:center;justify-content:center}
body.rc-storefront .rc-vc__m--pending:before{
  content:attr(data-label);font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--rc-dim);text-align:center;padding:0 20px;line-height:2}
body.rc-storefront .rc-vc__m--grid{
  background:
    linear-gradient(rgba(61,125,255,.07) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,rgba(61,125,255,.07) 1px,transparent 1px) 0 0/26px 26px,
    var(--rc-ink)}

body.rc-storefront .rc-vc__st{
  position:absolute;left:16px;top:16px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(10,14,20,.8);border:1px solid var(--rc-line2);padding:6px 11px;
  font-family:var(--rc-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rc-body)}
body.rc-storefront .rc-vc__st:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rc-dim)}
body.rc-storefront .rc-vc__st--op:before{background:#2BD4A1}
body.rc-storefront .rc-vc__st--dev:before{background:#F5A524}
body.rc-storefront .rc-vc__st--des:before{background:var(--rc-dim)}
body.rc-storefront .rc-vc__cap{
  position:absolute;right:14px;bottom:12px;z-index:2;
  font-family:var(--rc-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rc-dim);background:rgba(10,14,20,.7);padding:4px 8px}
body.rc-storefront .rc-vc__b{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
body.rc-storefront .rc-vc__d{
  font-family:var(--rc-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rc-accent);margin:0 0 10px}
body.rc-storefront .rc-vc__t{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);text-transform:uppercase;
  font-size:26px;line-height:1.05;color:var(--rc-text);margin:0 0 10px}
body.rc-storefront .rc-vc__p{font-size:14px;line-height:1.75;color:var(--rc-body);margin:0 0 20px}
body.rc-storefront .rc-vc__specs{margin:auto 0 0;border-top:1px solid var(--rc-line);padding-top:14px}
body.rc-storefront .rc-vc__r{
  display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.06em}
body.rc-storefront .rc-vc__r span{color:var(--rc-dim);text-transform:uppercase;letter-spacing:.14em;font-size:10px}
body.rc-storefront .rc-vc__r b{color:var(--rc-text);font-weight:500;text-align:right}
body.rc-storefront .rc-vc__r b.is-tbd{color:var(--rc-dim);font-weight:400}

/* ---------- pull quote ---------- */
body.rc-storefront .rc-pq{
  position:relative;overflow:hidden;
  padding:clamp(80px,10vw,160px) clamp(22px,4vw,56px);
  border-top:1px solid var(--rc-line);border-bottom:1px solid var(--rc-line)}
body.rc-storefront .rc-pq > .rc-inner{position:relative;z-index:4;max-width:1100px;text-align:center;align-items:center}
body.rc-storefront .rc-pq__q{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);text-transform:uppercase;
  font-size:clamp(28px,4.4vw,62px);line-height:1.02;letter-spacing:-.01em;
  color:var(--rc-text);margin:0 0 24px}
body.rc-storefront .rc-pq__a{
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--rc-accent);margin:0}

/* ============================================================
   PRESS  -  news list + From the field  (v1.2)

   Agency treatment: hairline-separated rows rather than a card grid,
   headline left, outlet and year right, and a 2px rule on the left edge
   that lights accent on hover. The section head carries the "All news"
   link on the right instead of a button underneath.
   ============================================================ */

body.rc-storefront .rc-sechead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px}

/* Mono link used in section heads. Hidden on small screens the way the
   agency hides it, because the list itself is the affordance there. */
body.rc-storefront .rc-mlink{
  font-family:var(--rc-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rc-body);text-decoration:none;white-space:nowrap;transition:color .15s}
body.rc-storefront .rc-mlink:hover{color:var(--rc-accent)}
@media (max-width:639px){body.rc-storefront .rc-mlink--head{display:none}}

body.rc-storefront .rc-press{margin-top:48px;display:block;width:100%;
  background:none;border:0;gap:0}

body.rc-storefront .rc-pr{
  display:flex;flex-direction:column;gap:8px;
  padding:24px 0 24px 16px;text-decoration:none;
  border-top:1px solid var(--rc-line);
  border-left:2px solid transparent;
  transition:border-color .2s,background .2s}
body.rc-storefront .rc-pr:last-child{border-bottom:1px solid var(--rc-line)}
body.rc-storefront a.rc-pr:hover{border-left-color:var(--rc-accent);background:var(--rc-accent-line)}
body.rc-storefront .rc-pr__t{
  margin:0;max-width:62ch;font-size:18px;line-height:1.4;font-weight:500;
  color:var(--rc-text);transition:color .2s}
body.rc-storefront a.rc-pr:hover .rc-pr__t{color:var(--rc-accent)}
body.rc-storefront .rc-pr__m{
  font-family:var(--rc-mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-dim)}
@media (min-width:640px){
  body.rc-storefront .rc-pr{flex-direction:row;align-items:baseline;justify-content:space-between;gap:32px}
}

/* ---------- From the field ---------- */
body.rc-storefront .rc-field{margin-top:64px}
body.rc-storefront .rc-field__grid{
  margin-top:24px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
body.rc-storefront .rc-fp{
  border:1px solid var(--rc-line);background:var(--rc-panel);
  border-radius:2px;padding:24px;display:flex;flex-direction:column}
body.rc-storefront .rc-fp__p{margin:0;font-size:14px;line-height:1.6;color:var(--rc-body)}
body.rc-storefront .rc-fp__f{
  margin-top:20px;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--rc-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-dim)}
body.rc-storefront .rc-fp__f a{color:inherit;text-decoration:none;transition:color .15s}
body.rc-storefront .rc-fp__f a:hover{color:var(--rc-accent)}

/* ============================================================
   CAPABILITY READOUT  (v1.2)

   Agency treatment: label above value, value in accent mono, the whole
   group hung off a single accent rule on the left. Replaces the bordered
   figure grid, which read as a table rather than as data laid over film.
   ============================================================ */
body.rc-storefront .rc-read{
  margin-top:40px;display:flex;flex-wrap:wrap;
  column-gap:clamp(28px,4.5vw,48px);row-gap:24px;
  border-left:1px solid rgba(61,125,255,.4);padding-left:20px}
body.rc-storefront .rc-read__k{
  margin:0;font-family:var(--rc-mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rc-dim)}
body.rc-storefront .rc-read__v{
  margin:4px 0 0;font-family:var(--rc-mono);font-weight:500;
  font-size:clamp(19px,2.2vw,24px);letter-spacing:-.01em;color:var(--rc-accent)}

/* ---------- poster-framed player ---------- */
body.rc-storefront .rc-play{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--rc-line2);background:var(--rc-ink);cursor:pointer;display:block}
body.rc-storefront .rc-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88;transition:.35s}
body.rc-storefront .rc-play:hover img{opacity:1}
body.rc-storefront .rc-play__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
body.rc-storefront .rc-play__btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:74px;height:74px;border:1px solid var(--rc-accent);border-radius:50%;
  background:rgba(10,14,20,.55);display:flex;align-items:center;justify-content:center;transition:.2s}
body.rc-storefront .rc-play:hover .rc-play__btn{background:var(--rc-accent);transform:translate(-50%,-50%) scale(1.06)}
body.rc-storefront .rc-play__btn:after{
  content:"";width:0;height:0;margin-left:4px;
  border-left:17px solid var(--rc-text);border-top:11px solid transparent;border-bottom:11px solid transparent}
body.rc-storefront .rc-play.is-playing .rc-play__btn{display:none}
body.rc-storefront .rc-play__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 16px;background:linear-gradient(to top,rgba(10,14,20,.92),transparent);
  font-family:var(--rc-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--rc-dim)}
body.rc-storefront .rc-play.is-playing .rc-play__bar{display:none}
body.rc-storefront .rc-play:focus-visible{outline:2px solid var(--rc-accent);outline-offset:3px}

/* ---------- MOSA open-core diagram ----------
   Ported from the agency build, geometry and timings unchanged: same
   920x540 viewBox, same node coordinates, same 1.1s dash cycle with a
   120ms stagger, same 4.5s breathe on the core glow.

   Two things are done differently and both are deliberate.

   1. Colour is driven from these classes rather than from inline
      fill="var(--accent)" presentation attributes. Presentation
      attributes do resolve var() in current browsers, but they are the
      lowest-priority source in the cascade and they put the palette in
      the template instead of the theme, which is the one rule this
      system does not bend. Recolouring the diagram for the next
      subsidiary is then a palette change like everything else.

   2. The animation stops for prefers-reduced-motion. The original ran
      regardless. Six dashed lines cycling under a pulsing glow is
      exactly the kind of persistent motion that rule exists for.
   ---------------------------------------------------------------- */
body.rc-storefront .rc-mosa{
  position:relative;margin-top:clamp(38px,5vw,56px);overflow:hidden;
  border:1px solid var(--rc-line);background:rgba(20,27,37,.4);width:100%}
body.rc-storefront .rc-mosa svg{width:100%;height:auto;display:block}

body.rc-storefront .rc-mosa__glowstop--in{stop-color:var(--rc-accent);stop-opacity:.55}
body.rc-storefront .rc-mosa__glowstop--out{stop-color:var(--rc-accent);stop-opacity:0}
body.rc-storefront .rc-mosa__glow{
  transform-origin:460px 270px;
  animation:rc-signal-breathe 4.5s ease-in-out infinite}

/* the static under-line, and the travelling dashes over it */
body.rc-storefront .rc-mosa__line{stroke:var(--rc-accent);stroke-opacity:.25;stroke-width:1.5}
body.rc-storefront .rc-mosa__dash{
  stroke:var(--rc-accent);stroke-width:1.5;stroke-dasharray:3 13;
  animation:rc-signal-dash 1.1s linear infinite}

body.rc-storefront .rc-mosa__ring{fill:var(--rc-bg);stroke:var(--rc-accent);stroke-width:1.5}
body.rc-storefront .rc-mosa__dot{fill:var(--rc-accent)}
body.rc-storefront .rc-mosa__lab{
  fill:var(--rc-body);font-family:var(--rc-mono);font-size:13px;letter-spacing:2px;
  text-transform:uppercase}
body.rc-storefront .rc-mosa__core{
  fill:var(--rc-panel);stroke:var(--rc-accent);stroke-width:1.5}
body.rc-storefront .rc-mosa__ct{
  fill:var(--rc-text);font-family:var(--rc-mono);font-size:14px;letter-spacing:2px;
  text-transform:uppercase}
body.rc-storefront .rc-mosa__cs{
  fill:var(--rc-dim);font-family:var(--rc-mono);font-size:10px;letter-spacing:3px;
  text-transform:uppercase}

@keyframes rc-signal-dash{
  /* one full pattern length, 3 + 13, so the loop is seamless */
  to{stroke-dashoffset:-16}
}
@keyframes rc-signal-breathe{
  0%,100%{transform:scale(.92);opacity:.55}
  50%    {transform:scale(1.06);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  body.rc-storefront .rc-mosa__dash,
  body.rc-storefront .rc-mosa__glow{animation:none}
  body.rc-storefront .rc-mosa__glow{opacity:.8}
}

/* ---------- payload interface schematic ----------
   Version B only. A separate, simpler diagram from the VP's design: a
   central interface layer with four software-defined packages around it.
   Kept apart from .rc-mosa so the two can diverge without collision. */
body.rc-storefront .rc-diag{width:100%}
body.rc-storefront .rc-diag svg{width:100%;height:auto;display:block;overflow:visible}
body.rc-storefront .rc-diag__spoke{stroke:var(--rc-accent);stroke-opacity:.3;stroke-width:1.5}
body.rc-storefront .rc-diag__node{fill:var(--rc-panel);stroke:var(--rc-line2);stroke-width:1}
body.rc-storefront .rc-diag__core{fill:var(--rc-accent-soft);stroke:var(--rc-accent);stroke-width:1.5}
body.rc-storefront .rc-diag__lab{
  fill:var(--rc-dim);font-family:var(--rc-mono);font-size:9px;letter-spacing:1.4px;
  text-transform:uppercase}
body.rc-storefront .rc-diag__clab{
  fill:var(--rc-accent);font-family:var(--rc-mono);font-size:11px;letter-spacing:2px;
  text-transform:uppercase}

/* ---------- missing asset notice (editors only) ---------- */
body.rc-storefront .rc-missing{
  border:1px dashed var(--rc-accent);background:var(--rc-accent-soft);
  padding:14px 16px;font-family:var(--rc-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--rc-accent)}

/* ---------- version B additions ----------
   Three small pieces the VP's layout uses that the storefront had no
   equivalent for. */

/* "Made in the USA" mark in the hero, bottom right of the copy block */
body.rc-storefront .rc-madein{
  display:inline-flex;align-items:center;gap:9px;margin:26px 0 0;
  border:1px solid var(--rc-line2);padding:8px 13px;
  font-family:var(--rc-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rc-body)}
body.rc-storefront .rc-madein:before{
  content:"";width:18px;height:12px;flex:0 0 auto;
  background:linear-gradient(to bottom,#B22234 0 2px,#fff 2px 4px,#B22234 4px 6px,
             #fff 6px 8px,#B22234 8px 10px,#fff 10px 12px);
  box-shadow:inset 7px 6px 0 0 #3C3B6E}

/* Ownership badge under the strategic-intent heading */
body.rc-storefront .rc-badge{
  display:inline-flex;align-items:center;gap:9px;margin:20px 0 0;
  font-family:var(--rc-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rc-dim)}
body.rc-storefront .rc-badge:before{
  content:"";width:9px;height:9px;border:1px solid var(--rc-accent);border-radius:50%}

/* Closing call to action, a panel rather than a full-bleed band */
body.rc-storefront .rc-note--cta{
  text-align:center;padding:clamp(44px,6vw,80px) clamp(24px,4vw,64px);
  background:var(--rc-panel);border-color:var(--rc-line2);margin:0}
body.rc-storefront .rc-note--cta .rc-eyebrow{justify-content:center}
body.rc-storefront .rc-note--cta .rc-lede{margin-inline:auto;max-width:56ch}
body.rc-storefront .rc-note--cta .rc-ctarow{justify-content:center}

/* Diagram caption, sits under the inline SVG schematic */
body.rc-storefront .rc-diag__cap{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rc-line);
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.08em;line-height:1.9;
  color:var(--rc-dim)}


/* ============================================================
   USV SOLUTIONS  (v1.3)

   Agency structure ported section for section. Headlines stay house
   style (uppercase Gridnik) per the homepage decision; what is adopted
   is layout, data treatment and interaction.

   One deliberate substitution: the agency runs two of these sections on
   an animated canvas "nautical map" (marching squares over value noise,
   with scroll parallax). That is not ported. .rc-gridbg stands in with
   the Night Ops grid texture, which is the house equivalent and costs
   no JS.
   ============================================================ */

/* ---------- section backdrop: topo contours ----------
   A still contour map rather than the agency's animated canvas. Generated
   as a seamless 1024px tile from the same construction they use (contours
   banded out of fBm value noise) on a periodic lattice, so it repeats with
   no visible seam. Near-white at 16% alpha, which is legible as texture and
   never competes with the copy over it. */
body.rc-storefront .rc-gridbg{position:relative;isolation:isolate;overflow:hidden}
body.rc-storefront .rc-gridbg:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('assets/img/topo-tile.png');
  background-repeat:repeat;background-size:1024px 1024px}
body.rc-storefront .rc-gridbg:after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 45%,transparent 45%,var(--rc-bg) 100%)}
body.rc-storefront .rc-gridbg > .rc-inner{position:relative;z-index:2}

/* ---------- hero eyelash with the flag glyph ---------- */
body.rc-storefront .rc-vhero__k--flag{color:var(--rc-text);gap:11px}
body.rc-storefront .rc-vhero__k--flag:before{display:none}
body.rc-storefront .rc-vhero__k--flag svg{flex:0 0 auto;display:block}

/* Glyph shadows do the legibility work over native-colour footage, the
   way the agency seats type on the hero. */
body.rc-storefront .rc-tshadow{text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 24px rgba(0,0,0,.4)}

/* ---------- 2. statement fold ---------- */
body.rc-storefront .rc-state{
  display:grid;gap:32px 64px;align-items:end;width:100%}
@media (min-width:768px){
  body.rc-storefront .rc-state{grid-template-columns:1.5fr 1fr}
}
body.rc-storefront .rc-state__lead{
  margin:0;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:-.012em;line-height:1.04;
  font-size:clamp(28px,4.4vw,54px);color:var(--rc-text);text-wrap:balance}
body.rc-storefront .rc-state__lead b{font-weight:inherit;color:var(--rc-muted)}
body.rc-storefront .rc-state__sub{
  margin:0;max-width:46ch;font-size:clamp(15px,1.4vw,17.5px);
  line-height:1.75;color:var(--rc-body)}

/* ---------- 3. capability grid ----------
   Namespaced rc-ucap, not rc-cap: the theme already defines .rc-cap twice,
   for the storefront's diamond-bullet list and for its icon cards. Reusing
   the name inherited a bullet, a panel background and a flex row. */
body.rc-storefront .rc-ucaps{
  margin-top:48px;display:grid;gap:40px 48px;width:100%}
@media (min-width:640px){
  body.rc-storefront .rc-ucaps{grid-template-columns:1fr 1fr}
}
body.rc-storefront .rc-ucap{border-top:1px solid var(--rc-line);padding-top:20px}
body.rc-storefront .rc-ucap__k{
  margin:0;font-family:var(--rc-mono);font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rc-accent)}
body.rc-storefront .rc-ucap__p{
  margin:12px 0 0;font-size:15.5px;line-height:1.7;color:var(--rc-body)}

/* ---------- 4. cutaway slideshow ---------- */
body.rc-storefront .rc-cut{margin-top:40px;width:100%}
body.rc-storefront .rc-cut__stage{
  position:relative;overflow:hidden;border:1px solid var(--rc-line);
  border-radius:6px;background:var(--rc-ink);aspect-ratio:1/1}
@media (min-width:768px){
  body.rc-storefront .rc-cut__stage{aspect-ratio:21/9}
}
body.rc-storefront .rc-cut__track{
  display:flex;height:100%;width:100%;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform}
body.rc-storefront .rc-cut__slide{position:relative;height:100%;width:100%;flex:0 0 100%}
body.rc-storefront .rc-cut__slide video{width:100%;height:100%;object-fit:cover;display:block}

body.rc-storefront .rc-cut__segs{margin-top:32px;display:grid;gap:32px}
@media (min-width:768px){
  body.rc-storefront .rc-cut__segs{grid-template-columns:repeat(3,1fr)}
}
body.rc-storefront .rc-seg{
  display:flex;flex-direction:column;text-align:left;cursor:pointer;
  background:none;border:0;padding:0;font:inherit;color:inherit}
body.rc-storefront .rc-seg__bar{
  position:relative;height:2px;width:100%;overflow:hidden;border-radius:999px;
  background:var(--rc-line)}
body.rc-storefront .rc-seg__fill{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:var(--rc-accent)}
body.rc-storefront .rc-seg.is-on .rc-seg__fill{
  animation:rc-seg-timer 5000ms linear forwards}
body.rc-storefront .rc-cut.is-paused .rc-seg.is-on .rc-seg__fill{animation-play-state:paused}
body.rc-storefront .rc-seg__k{
  margin:16px 0 0;font-family:var(--rc-mono);font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rc-dim);transition:color .18s}
body.rc-storefront .rc-seg.is-on .rc-seg__k{color:var(--rc-accent)}
body.rc-storefront .rc-seg:hover .rc-seg__k{color:var(--rc-body)}
body.rc-storefront .rc-seg__p{
  margin:8px 0 0;font-size:14.5px;line-height:1.65;color:var(--rc-body)}
@keyframes rc-seg-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Reduced motion: no slide, no timer. The fill sits full on the active
   segment so the reader still sees which one they are on, and advancing
   is click-only. */
@media (prefers-reduced-motion:reduce){
  body.rc-storefront .rc-cut__track{transition:none}
  body.rc-storefront .rc-seg.is-on .rc-seg__fill{animation:none;transform:scaleX(1)}
}

/* ---------- 5. specifications ---------- */
body.rc-storefront .rc-glance{
  margin-top:48px;display:grid;gap:40px 32px;width:100%;
  grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){
  body.rc-storefront .rc-glance{grid-template-columns:repeat(5,1fr)}
}
body.rc-storefront .rc-gl__k{
  margin:0;font-family:var(--rc-mono);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rc-dim)}
body.rc-storefront .rc-gl__v{
  margin:12px 0 0;display:flex;align-items:baseline;gap:6px;
  font-family:var(--rc-mono);font-weight:500;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  font-size:clamp(34px,4.2vw,50px);line-height:1;color:var(--rc-accent)}
body.rc-storefront .rc-gl__u{
  font-size:15px;letter-spacing:0;font-weight:500;color:var(--rc-body)}
body.rc-storefront .rc-gl__n{
  display:block;margin-top:10px;font-size:13.5px;color:var(--rc-dim)}

body.rc-storefront .rc-spectoggle{margin-top:48px}
body.rc-storefront button.rc-btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  border:1px solid var(--rc-line2);background:transparent;color:var(--rc-text);
  padding:16px 28px;font-family:var(--rc-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;border-radius:0;transition:.15s}
body.rc-storefront button.rc-btn:hover{border-color:var(--rc-accent);color:var(--rc-accent)}
body.rc-storefront button.rc-btn svg{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
body.rc-storefront button.rc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

/* The full sheet stays in the DOM when closed, so print and find-in-page
   always get the whole specification. Animating grid-template-rows gives
   a smooth height without animating height itself. */
body.rc-storefront .rc-sheet{
  display:grid;grid-template-rows:0fr;width:100%;
  transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1)}
body.rc-storefront .rc-sheet.is-open{grid-template-rows:1fr;transition-duration:.56s}
body.rc-storefront .rc-sheet__in{
  overflow:hidden;opacity:0;transform:translateY(8px);
  transition:opacity .26s ease,transform .26s ease}
body.rc-storefront .rc-sheet.is-open .rc-sheet__in{
  opacity:1;transform:none;transition-delay:.12s;transition-duration:.48s}

body.rc-storefront .rc-sheet__box{margin-top:48px;border-bottom:1px solid var(--rc-line)}
body.rc-storefront .rc-sg{
  display:grid;gap:16px 48px;border-top:1px solid var(--rc-line);padding:32px 0}
@media (min-width:768px){
  body.rc-storefront .rc-sg{grid-template-columns:minmax(150px,210px) 1fr;padding:36px 0}
}
body.rc-storefront .rc-sg__h{
  margin:0;font-family:var(--rc-mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rc-text);font-weight:500}
body.rc-storefront .rc-sr{
  display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--rc-line)}
body.rc-storefront .rc-sr:first-child{border-top:0;padding-top:0}
@media (min-width:768px){
  body.rc-storefront .rc-sr{grid-template-columns:1fr 1.5fr;gap:40px;padding:16px 0}
}
body.rc-storefront .rc-sr__k{
  margin:0;font-family:var(--rc-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rc-dim)}
body.rc-storefront .rc-sr__v{
  margin:0;font-family:var(--rc-mono);font-size:14.5px;line-height:1.6;color:var(--rc-text)}

@media print{
  body.rc-storefront .rc-sheet{grid-template-rows:1fr}
  body.rc-storefront .rc-sheet__in{opacity:1;transform:none}
  body.rc-storefront .rc-spectoggle{display:none}
}
@media (prefers-reduced-motion:reduce){
  body.rc-storefront .rc-sheet,
  body.rc-storefront .rc-sheet__in{transition:none}
}

/* ---------- 6. the family ---------- */
body.rc-storefront .rc-fam{
  margin-top:48px;display:grid;width:100%;overflow:hidden;
  border:1px solid var(--rc-line);border-radius:6px}
@media (min-width:768px){
  body.rc-storefront .rc-fam{grid-template-columns:repeat(3,1fr)}
}
body.rc-storefront .rc-fam__i{
  display:flex;flex-direction:column;gap:16px;
  padding:clamp(24px,2.6vw,32px);background:var(--rc-bg);
  border-top:1px solid var(--rc-line)}
body.rc-storefront .rc-fam__i:first-child{border-top:0}
body.rc-storefront .rc-fam__i--lead{background:var(--rc-panel)}
@media (min-width:768px){
  body.rc-storefront .rc-fam__i{border-top:0;border-left:1px solid var(--rc-line)}
  body.rc-storefront .rc-fam__i:first-child{border-left:0}
}
body.rc-storefront .rc-fam__t{
  margin:0;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.05;
  font-size:clamp(22px,2.4vw,30px);color:var(--rc-text)}
body.rc-storefront .rc-fam__p{
  margin:0;font-size:14.5px;line-height:1.65;color:var(--rc-body)}

/* ---------- 7. muted-tone background video ---------- */
/* The agency's "muted" treatment: grayscale footage under one flat wash,
   so a background clip never competes with the copy over it. */
/* Was grayscale(1) under an 86% wash, which buried the operator footage.
   Lifted to match the agency: most of the colour still comes out, the
   footage is brightened slightly, and the wash carries about half the
   weight it did. The copy sits in the left third, so the gradient keeps
   its contrast there and lets the right side stay open. */
body.rc-storefront .rc-vid--tone video,
body.rc-storefront .rc-vid--tone img{
  filter:grayscale(.72) brightness(1.24) contrast(1.02)}
body.rc-storefront .rc-vid--tone:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,14,20,.80) 0%,rgba(10,14,20,.58) 52%,rgba(10,14,20,.42) 100%)}


/* ============================================================
   TECH STACK  (v1.4)

   Agency structure, section for section. Headlines stay house style.

   One substitution at Kendrick's direction: the agency runs this hero
   on the animated nautical map in its "royal" palette. Here it is a
   photograph of the Variant 7, BlueOps_DemoDay-11, cut from the 95MP
   TIFF to 2560x1200 and graded down slightly to sit in the palette.
   ============================================================ */

body.rc-storefront .rc-ihero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(440px,68vh,760px);
  display:flex;align-items:flex-end;
  padding:clamp(56px,7vw,110px) clamp(22px,4vw,56px) clamp(44px,5vw,72px);
  border-bottom:1px solid var(--rc-line)}

/* v1.44.0: the two seats that used to sit over this image are gone, at
   Blue Ops' direction. The hero image runs at full brightness. */
body.rc-storefront .rc-ihero > .rc-inner{position:relative;z-index:4;max-width:1460px}

@media (max-width:767px){
  body.rc-storefront .rc-ihero{min-height:clamp(420px,62vh,620px)}
}

/* ---------- three pillars ---------- */
body.rc-storefront .rc-pil3{
  display:grid;gap:48px;width:100%}
@media (min-width:768px){
  body.rc-storefront .rc-pil3{grid-template-columns:repeat(3,1fr);gap:48px}
}
body.rc-storefront .rc-pil{border-top:2px solid rgba(61,125,255,.4);padding-top:24px}
body.rc-storefront .rc-pil__t{
  margin:0;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.1;
  font-size:clamp(18px,1.9vw,23px);color:var(--rc-text)}
body.rc-storefront .rc-pil__p{
  margin:16px 0 0;font-size:15.5px;line-height:1.7;color:var(--rc-body)}

/* ---------- MOSA thesis: full-bleed circle, copy left ----------
   v1.53.0. The plate is Kendrick's own composition, supplied finished:
   spiral at 76% of the frame, graded down hard so the left two thirds are
   near black. It replaces the one this theme was building from the library
   original, and it reads far better: 10.89:1 against 6.43:1 at 1440.

   Supplied at 889x498 and upscaled to 2400x1344 here. That is a 2.7x
   enlargement, so it will be soft on a 2560-wide display. Rebuilding the
   same composition from the 1920x1080 library original would fix that
   without changing the look.

   Measured under the copy, 95th-percentile lightest pixel vs --rc-text.
   The bar is 4.5:1, not 3.0: the paragraphs run 15.5-17.5px, normal text
   under WCAG. Only the headline takes the 3.0 bar.
     1600x660 10.58:1   1440x660 10.89:1   1280x640 11.21:1
     1024x720 10.27:1    900x780  8.95:1    phones  13.68:1
   No scrim, no gradient, nothing over the image. */
body.rc-storefront .rc-thesis{
  position:relative;isolation:isolate;overflow:hidden;width:100%;
  border-top:1px solid var(--rc-line);
  padding:clamp(64px,8vw,128px) clamp(22px,4vw,56px);
  background-image:url('assets/img/tech-thesis-circle-wide.jpg');
  background-size:cover;background-position:center center;background-repeat:no-repeat}
@media (max-width:767px){
  /* Portrait cannot hold the spiral and the copy at once. The frame slides
     to open water so the copy reads; the circle is not visible on phones. */
  body.rc-storefront .rc-thesis{background-position:15% center}
}
body.rc-storefront .rc-thesis > .rc-inner{position:relative;z-index:4}
body.rc-storefront .rc-thesis__grid{
  display:grid;gap:32px;width:100%}
@media (min-width:768px){
  /* Copy held to the left half so it never crosses the wake. */
  body.rc-storefront .rc-thesis__grid{grid-template-columns:minmax(0,50%)}
}
body.rc-storefront .rc-thesis__copy{display:flex;flex-direction:column;gap:24px}
body.rc-storefront .rc-thesis__body{display:flex;flex-direction:column;gap:22px;max-width:54ch}
body.rc-storefront .rc-thesis__body p{
  margin:0;font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.75;color:var(--rc-text)}

/* v1.45.0: the thesis band no longer carries footage. Blue Ops asked for
   the hero photograph here and the hero loop up top, so the two swapped
   places. The .rc-vid--tone overrides that used to sit here went with the
   video; nothing replaced them, and no wash was added to either section. */

/* ---------- architecture head: headline left, lede right ---------- */
body.rc-storefront .rc-archhead{
  display:grid;gap:32px;width:100%;align-items:end}
@media (min-width:768px){
  body.rc-storefront .rc-archhead{grid-template-columns:1fr auto;gap:32px 64px}
  body.rc-storefront .rc-archhead > div:last-child{max-width:26rem}
}


/* ============================================================
   ABOUT  (v1.5)

   Agency structure, six sections, copy verbatim. Headlines stay house
   style. Where the agency runs its animated nautical map, this page
   uses .rc-gridbg, the still white contour tile, at Kendrick's direction.
   ============================================================ */

/* Statement opener. Its own H1 rule rather than .rc-vhero__h, which caps at
   16ch for a short video-hero line; this headline runs to three clauses. */
body.rc-storefront .rc-ahero__h{
  margin:0 0 32px;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;font-size:88px;line-height:1.02;letter-spacing:-.014em;
  color:var(--rc-text);max-width:24ch;text-wrap:balance}
/* The agency emphasises the last clause of these headlines by weight, on an
   otherwise light H1. House Gridnik is uniformly bold, so weight cannot carry
   that distinction here. The theme's existing pattern for an emphasised final
   clause is the accent, as on the storefront hero, so <em> takes the accent.
   This was previously rendered muted grey, which inverted the emphasis. */
body.rc-storefront .rc-ahero__h em{font-style:normal;color:var(--rc-accent)}
body.rc-storefront .rc-ahero__p{
  margin:0;max-width:62ch;font-size:clamp(16px,1.6vw,19px);line-height:1.75;color:var(--rc-body)}

/* ---- About hero, on the 8K wake frame (v1.48.0) ----
   The band that used to carry heritage-loop.mp4 lost its video in v1.42.0
   when the scrim came off, and the page has had no media above the fold
   since. This puts a still back without a wash: the vessel sits top right,
   the wake runs out to the lower left, and the whole upper left quarter is
   open water, so the copy goes there and reads on its own.

   Measured, 95th-percentile lightest pixel under the copy vs --rc-text:
     1440x620  6.66:1     1280x580  6.29:1     900x700  4.32:1
     430x760   5.52:1                          AA needs 3.0 at this size.

   heritage-loop.mp4 was tested for this slot first and cannot be used
   without a scrim. It is a four-shot montage and only about 1.75s of its
   5s clears 3.0; the opening aerial reads 1.22:1 because the wake spiral
   lands exactly where the copy sits. Left in assets/video, unreferenced. */
body.rc-storefront .rc-ahero{
  position:relative;isolation:isolate;overflow:hidden;
  background-image:url('assets/img/about-hero-wake.jpg');
  background-size:cover;background-position:10% 20%;background-repeat:no-repeat}
body.rc-storefront .rc-ahero > .rc-inner{position:relative;z-index:4}
@media (min-width:768px){
  /* Copy held to the left so it never crosses the wake. */
  body.rc-storefront .rc-ahero__h{max-width:16ch}
  body.rc-storefront .rc-ahero .rc-ahero__p{max-width:46ch}
}
@media (max-width:767px){
  /* Portrait has horizontal slack; 0% keeps the copy over open water. */
  body.rc-storefront .rc-ahero{background-position:0% 20%}
}

/* Two-column folds. Three ratios across this page and the last two, so they
   share one class with modifiers rather than three near-identical blocks. */
body.rc-storefront .rc-duo{display:grid;gap:32px;width:100%}
@media (min-width:768px){
  body.rc-storefront .rc-duo{gap:32px 64px}
  body.rc-storefront .rc-duo--13{grid-template-columns:1.3fr 1fr;align-items:end}
  body.rc-storefront .rc-duo--14{grid-template-columns:1fr 1.4fr;align-items:baseline}
  body.rc-storefront .rc-duo--50{grid-template-columns:1fr 1fr;align-items:center}
}
body.rc-storefront .rc-duo p{margin:0;max-width:62ch;
  font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.75;color:var(--rc-body)}

/* Heritage band: muted footage, copy across both columns, so it takes the
   agency's flat treatment rather than the left-weighted gradient. */
body.rc-storefront .rc-hband{
  position:relative;isolation:isolate;overflow:hidden;width:100%;
  border-top:1px solid var(--rc-line);
  padding:clamp(64px,8vw,128px) clamp(22px,4vw,56px)}
body.rc-storefront .rc-hband > .rc-inner{position:relative;z-index:4}
body.rc-storefront .rc-hband .rc-vid--tone video,
body.rc-storefront .rc-hband .rc-vid--tone img{filter:grayscale(1)}
body.rc-storefront .rc-hband .rc-vid--tone:after{background:rgba(12,22,44,.82)}

/* Flag eyebrow, accent rather than the dash. */
body.rc-storefront .rc-eyebrow--flag{gap:11px}
body.rc-storefront .rc-eyebrow--flag:before{display:none}
body.rc-storefront .rc-eyebrow--flag svg{flex:0 0 auto;display:block}

/* ---------- lessons film tile ---------- */
body.rc-storefront .rc-film{
  position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--rc-line);border-radius:6px;background:var(--rc-ink);
  padding:0;cursor:pointer;text-align:left}
body.rc-storefront .rc-film img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
body.rc-storefront .rc-film:hover img{transform:scale(1.03)}
body.rc-storefront .rc-film__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,14,20,.65) 4%,transparent 45%)}
/* Bare glyph, no shape behind it. The agency dropped the chip here. */
body.rc-storefront .rc-film__go{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
body.rc-storefront .rc-film__go svg{
  fill:var(--rc-text);filter:drop-shadow(0 2px 10px rgba(0,0,0,.7));transition:fill .15s}
body.rc-storefront .rc-film:hover .rc-film__go svg{fill:var(--rc-accent)}
body.rc-storefront .rc-film__k{
  position:absolute;left:20px;bottom:16px;
  font-family:var(--rc-mono);font-size:10px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--rc-body)}
@media (prefers-reduced-motion:reduce){
  body.rc-storefront .rc-film img{transition:none}
  body.rc-storefront .rc-film:hover img{transform:none}
}

/* ---------- three-box band ---------- */
body.rc-storefront .rc-tri{display:grid;gap:24px;width:100%}
@media (min-width:768px){
  body.rc-storefront .rc-tri{grid-template-columns:repeat(3,1fr)}
}
body.rc-storefront .rc-tri__i{
  display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
  border:1px solid var(--rc-line);border-radius:6px;transition:border-color .2s}
body.rc-storefront a.rc-tri__i:hover{border-color:var(--rc-accent)}
body.rc-storefront .rc-tri__m{aspect-ratio:16/10;overflow:hidden;display:block}
body.rc-storefront .rc-tri__m img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
body.rc-storefront a.rc-tri__i:hover .rc-tri__m img{transform:scale(1.03)}
/* v1.49.0: the Red Cat card carries a photograph now, like the two beside
   it, so the lockup-on-a-plate treatment is gone. The modifier is kept and
   unreferenced in case a logo card is wanted again; nothing uses it today. */
body.rc-storefront .rc-tri__m--logo{
  display:flex;align-items:center;justify-content:center;padding:0 40px;
  background:var(--rc-panel);border-bottom:1px solid var(--rc-line)}
body.rc-storefront .rc-tri__m--logo img{
  width:100%;max-width:280px;height:auto;object-fit:contain;opacity:.9;transition:opacity .2s}
body.rc-storefront a.rc-tri__i:hover .rc-tri__m--logo img{opacity:1;transform:none}
body.rc-storefront .rc-tri__b{display:flex;flex-direction:column;flex:1 1 auto;padding:28px}
body.rc-storefront .rc-tri__t{
  margin:0;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.15;
  font-size:clamp(18px,1.9vw,23px);color:var(--rc-text)}
body.rc-storefront .rc-tri__p{
  margin:10px 0 0;font-size:14.5px;line-height:1.65;color:var(--rc-body)}
body.rc-storefront .rc-tri__go{
  margin-top:24px;font-family:var(--rc-mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-accent);transition:color .15s}
body.rc-storefront a.rc-tri__i:hover .rc-tri__go{color:var(--rc-text)}
@media (prefers-reduced-motion:reduce){
  body.rc-storefront .rc-tri__m img{transition:none}
  body.rc-storefront a.rc-tri__i:hover .rc-tri__m img{transform:none}
}


/* ============================================================
   LEADERSHIP  (v1.6)
   Agency structure, copy verbatim. Headlines stay house style.
   ============================================================ */

body.rc-storefront .rc-bios{display:flex;flex-direction:column;width:100%}
body.rc-storefront .rc-bio{display:grid;gap:32px;width:100%}
@media (min-width:768px){
  body.rc-storefront .rc-bio{grid-template-columns:260px 1fr;gap:64px}
}
/* Second bio onward carries the divider and the top space. */
body.rc-storefront .rc-bio--next{
  border-top:1px solid var(--rc-line);padding-top:clamp(48px,6vw,80px);
  margin-top:clamp(48px,6vw,80px)}
body.rc-storefront .rc-bio__m{
  width:100%;max-width:260px;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--rc-line);border-radius:6px;background:var(--rc-panel)}
body.rc-storefront .rc-bio__m img{width:100%;height:100%;object-fit:cover;display:block}
body.rc-storefront .rc-bio__t{
  margin:0;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.08;
  font-size:clamp(26px,3.2vw,38px);color:var(--rc-text)}
body.rc-storefront .rc-bio__r{
  margin:14px 0 0;font-family:var(--rc-mono);font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--rc-accent)}
body.rc-storefront .rc-bio__p{
  margin:24px 0 0;max-width:64ch;font-size:clamp(15.5px,1.5vw,17.5px);
  line-height:1.75;color:var(--rc-body)}

/* Reserved portrait slot. Still used by the wider-team roster, whose people
   are not confirmed. */
body.rc-storefront .rc-ph{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:4/5;border:1px solid var(--rc-line);
  border-radius:6px;background:var(--rc-panel)}
body.rc-storefront .rc-ph span{
  font-family:var(--rc-mono);font-size:10px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--rc-dim)}

/* rc-subnote, not rc-note: the legal pages already own .rc-note as a bordered
   attention block. Reusing the name gave this caption an accent border and a
   tinted background it was never meant to have. */
body.rc-storefront .rc-subnote{
  margin:16px 0 0;font-family:var(--rc-mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-dim)}

body.rc-storefront .rc-roster{
  margin-top:48px;display:grid;gap:32px;width:100%;list-style:none;padding:0}
@media (min-width:640px){body.rc-storefront .rc-roster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:768px){body.rc-storefront .rc-roster{grid-template-columns:repeat(4,1fr);gap:24px}}
body.rc-storefront .rc-ros__n{
  margin:20px 0 0;font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--rc-text)}
body.rc-storefront .rc-ros__r{
  margin:8px 0 0;font-family:var(--rc-mono);font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--rc-accent)}


/* ============================================================
   NEWS  (v1.7)
   Agency structure, copy verbatim. The events band runs on .rc-gridbg,
   the white contour tile, in place of the agency's "royal" map.
   ============================================================ */

/* ---------- curated feed ---------- */
body.rc-storefront .rc-news{
  margin-top:0;list-style:none;padding:0;width:100%;
  border-top:1px solid var(--rc-line)}
body.rc-storefront .rc-nw{
  display:flex;flex-direction:column;gap:12px;
  padding:32px 0;text-decoration:none;
  border-bottom:1px solid var(--rc-line);transition:background .2s}
@media (min-width:768px){
  body.rc-storefront .rc-nw{flex-direction:row;align-items:baseline;
    justify-content:space-between;gap:48px}
}
body.rc-storefront a.rc-nw:hover{background:var(--rc-accent-line)}
/* The row spans the column, so the headline should too. A 62ch cap here
   resolved against this element's own 16px font, not the 24px headline,
   which wrapped titles at roughly 595px and left half the row empty.
   The year stays hard right; the text takes everything else. */
body.rc-storefront .rc-nw__c{flex:1 1 auto;min-width:0;max-width:none}
body.rc-storefront .rc-nw__t{
  /* display:block because this is a <span> in a <span>: inline, the line
     under the title ran onto the same line and these margins did nothing. */
  display:block;margin:0;font-size:clamp(19px,2vw,24px);line-height:1.35;font-weight:500;
  letter-spacing:-.01em;color:var(--rc-text);transition:color .2s}
body.rc-storefront a.rc-nw:hover .rc-nw__t{color:var(--rc-accent)}
body.rc-storefront .rc-nw__s{
  display:block;margin:12px 0 0;font-size:15.5px;line-height:1.7;color:var(--rc-body)}
body.rc-storefront .rc-nw__m{
  flex:0 0 auto;font-family:var(--rc-mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-dim);transition:color .2s}
body.rc-storefront a.rc-nw:hover .rc-nw__m{color:var(--rc-accent)}

/* The From the field block is the homepage one. On News it is its own
   section rather than a tail on Press, so it drops the top margin. */
body.rc-storefront .rc-field--solo{margin-top:0}

/* ---------- events toggle ---------- */
body.rc-storefront .rc-tabs{margin-top:40px;display:flex;align-items:center;gap:8px}
body.rc-storefront .rc-tab{
  padding:10px 18px;border-radius:6px;cursor:pointer;
  border:1px solid var(--rc-line);background:var(--rc-bg);color:var(--rc-body);
  font-family:var(--rc-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  transition:color .15s,background .15s,border-color .15s}
body.rc-storefront .rc-tab:hover{color:var(--rc-text)}
body.rc-storefront .rc-tab[aria-pressed="true"]{
  background:var(--rc-accent);border-color:var(--rc-accent);color:var(--rc-bg)}

body.rc-storefront .rc-evs{
  margin-top:40px;list-style:none;padding:0;width:100%;
  border-top:1px solid var(--rc-line)}
body.rc-storefront .rc-ev{
  display:flex;flex-direction:column;gap:8px;padding:24px 0;
  border-bottom:1px solid var(--rc-line)}
@media (min-width:640px){
  body.rc-storefront .rc-ev{flex-direction:row;align-items:baseline;justify-content:space-between}
}
body.rc-storefront .rc-ev__n{margin:0;font-size:18px;font-weight:500;color:var(--rc-text)}
body.rc-storefront .rc-ev__note{margin:4px 0 0;font-size:14px;color:var(--rc-body)}
body.rc-storefront .rc-ev__w{
  font-family:var(--rc-mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-dim)}

/* Solid ground, not translucent: this panel sits on the contour texture and
   the house rule is that the map never shows through content. */
body.rc-storefront .rc-empty{
  margin-top:40px;padding:40px;text-align:center;
  border:1px solid var(--rc-line);border-radius:6px;background:var(--rc-bg)}
body.rc-storefront .rc-empty__t{margin:0;font-size:18px;color:var(--rc-text)}
body.rc-storefront .rc-empty__p{margin:8px 0 0;font-size:14px;color:var(--rc-body)}

body.rc-storefront [data-rc-panel][hidden]{display:none}

/* ---------- press kit ---------- */
body.rc-storefront .rc-kit{
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;width:100%;
  border:1px solid var(--rc-line);border-radius:6px;background:var(--rc-panel);
  padding:clamp(28px,3.4vw,40px)}
@media (min-width:768px){
  body.rc-storefront .rc-kit{flex-direction:row;align-items:center;justify-content:space-between}
}
body.rc-storefront .rc-kit__t{
  margin:0;max-width:40ch;font-size:clamp(17px,1.7vw,20px);line-height:1.6;color:var(--rc-text)}


/* ============================================================
   WIREFRAME PRIMITIVES  (v1.8)

   /integrations/ is a wireframe in the agency build, deliberately:
   the structure is locked and the copy lands later. These are the
   placeholder primitives their WireframeSection draws with, ported so
   the page reads as an intentional wireframe rather than a broken page.

   Reusable: any other route that needs blocking out before copy exists
   can use the same set.
   ============================================================ */

body.rc-storefront .rc-wfnote{
  margin:24px 0 0;font-family:var(--rc-mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-dim)}

body.rc-storefront .rc-wfs{
  width:100%;border-top:1px solid var(--rc-line);
  padding:clamp(44px,5.5vw,80px) clamp(22px,4vw,56px)}
body.rc-storefront .rc-wfs > .rc-inner{max-width:1460px;margin-inline:auto}

body.rc-storefront .rc-wfs__h{display:flex;align-items:baseline;gap:16px}
body.rc-storefront .rc-wfs__n{
  flex:0 0 auto;font-family:var(--rc-mono);font-size:14px;letter-spacing:.2em;
  font-variant-numeric:tabular-nums;color:var(--rc-accent)}
body.rc-storefront .rc-wfs__ttl{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
body.rc-storefront .rc-wfs__t{
  margin:0;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.12;
  font-size:clamp(20px,2.4vw,28px);color:var(--rc-text)}
body.rc-storefront .rc-tag{
  border:1px solid var(--rc-line);border-radius:2px;padding:3px 8px;
  font-family:var(--rc-mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-dim)}
body.rc-storefront .rc-wfs__d{
  margin:12px 0 0;max-width:62ch;font-size:15.5px;line-height:1.7;color:var(--rc-body)}
body.rc-storefront .rc-wfs__b{margin-top:32px}
@media (min-width:768px){
  body.rc-storefront .rc-wfs__d,
  body.rc-storefront .rc-wfs__b{padding-left:40px}
}

/* The "content goes here" slot. */
body.rc-storefront .rc-wf{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--rc-line2);border-radius:6px;
  min-height:8rem;color:var(--rc-dim)}
body.rc-storefront .rc-wf span{
  font-family:var(--rc-mono);font-size:10px;letter-spacing:.25em;text-transform:uppercase}
body.rc-storefront .rc-wf--hero{min-height:45vh}
body.rc-storefront .rc-wf--43{aspect-ratio:4/3;min-height:0}

body.rc-storefront .rc-wfcards{display:grid;gap:16px}
@media (min-width:640px){body.rc-storefront .rc-wfcards{grid-template-columns:repeat(3,1fr)}}

body.rc-storefront .rc-wfsplit{display:grid;gap:24px}
@media (min-width:768px){
  body.rc-storefront .rc-wfsplit{grid-template-columns:1fr 1fr;align-items:center}
}

/* Text column stand-in: bars at the agency's four widths, cycled. */
body.rc-storefront .rc-wflines{display:flex;flex-direction:column;gap:12px}
body.rc-storefront .rc-wfline{height:12px;border-radius:999px;background:var(--rc-line)}
body.rc-storefront .rc-wfline:nth-child(4n+1){width:92%}
body.rc-storefront .rc-wfline:nth-child(4n+2){width:78%}
body.rc-storefront .rc-wfline:nth-child(4n+3){width:85%}
body.rc-storefront .rc-wfline:nth-child(4n+4){width:60%}

/* CTA stand-in: a headline bar and a button block, no live link. */
body.rc-storefront .rc-wfcta{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  border:1px solid var(--rc-line);border-radius:6px;background:var(--rc-panel);
  padding:48px 24px;text-align:center}
body.rc-storefront .rc-wfcta__bar{
  height:16px;width:256px;max-width:80%;border-radius:999px;background:var(--rc-line)}
body.rc-storefront .rc-wfcta__btn{
  height:36px;width:160px;border-radius:6px;background:var(--rc-accent);opacity:.8}


/* ============================================================
   CONTACT  (v1.9)

   Structure follows the reference Kendrick supplied, rebuilt dark in
   the Night Ops palette: page-header band, a two-column get-in-touch
   fold, and a full-bleed map.

   NO FORM SHIPS IN THIS TEMPLATE. The right-hand panel is a container
   with a labelled empty slot so a WPForms widget can be dropped inside
   it in Elementor. The WPForms styling below means the form picks up
   the design the moment it lands, with nothing to restyle by hand.
   ============================================================ */

/* ---------- page header band ---------- */
body.rc-storefront .rc-cthero{
  position:relative;isolation:isolate;overflow:hidden;width:100%;
  min-height:clamp(280px,34vh,400px);display:flex;align-items:flex-end;
  padding:clamp(48px,6vw,80px) clamp(22px,4vw,56px) clamp(32px,4vw,48px);
  border-bottom:1px solid var(--rc-line);
  background-image:url('assets/img/contact-hero.jpg');
  background-size:cover;background-position:center 55%}
body.rc-storefront .rc-cthero:before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right,rgba(10,14,20,.88) 0%,rgba(10,14,20,.55) 42%,rgba(10,14,20,.25) 100%),
    linear-gradient(to bottom,rgba(10,14,20,.7) 0%,rgba(10,14,20,.1) 35%,rgba(10,14,20,.85) 100%)}
body.rc-storefront .rc-cthero > .rc-inner{position:relative;z-index:4;max-width:1460px}
body.rc-storefront .rc-cthero__h{
  margin:0;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;font-size:88px;line-height:1;letter-spacing:-.014em;
  color:var(--rc-text)}

/* Rotated wordmark down the right edge, the reference's detail. Decorative,
   so it is hidden from assistive tech and dropped on narrow screens where
   it would collide with the title. */
body.rc-storefront .rc-cthero__v{
  position:absolute;right:clamp(14px,2vw,26px);top:0;bottom:0;z-index:3;
  display:flex;align-items:center;
  writing-mode:vertical-rl;
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(34px,5vw,64px);color:var(--rc-text);opacity:.13;
  pointer-events:none;user-select:none}
body.rc-storefront .rc-cthero__crumb{
  position:absolute;right:clamp(52px,6vw,90px);bottom:clamp(18px,2.4vw,28px);z-index:4;
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rc-dim)}
body.rc-storefront .rc-cthero__crumb a{color:var(--rc-dim);text-decoration:none;transition:color .15s}
body.rc-storefront .rc-cthero__crumb a:hover{color:var(--rc-accent)}
@media (max-width:767px){
  body.rc-storefront .rc-cthero__v{display:none}
  body.rc-storefront .rc-cthero__crumb{right:auto;left:clamp(22px,4vw,56px)}
}

/* ---------- get in touch fold ---------- */
/* This fold is built from nested Elementor containers rather than one HTML
   widget, so the right column can host a real WPForms widget. That means there
   is no .rc-inner to centre it, and .rc-ct carries the measure itself. */
body.rc-storefront .rc-psec > .rc-ct{max-width:1460px;margin-inline:auto}
body.rc-storefront .rc-ct{display:grid;gap:48px;width:100%;align-items:start}
@media (min-width:900px){
  body.rc-storefront .rc-ct{grid-template-columns:1.05fr 1fr;gap:64px}
}
body.rc-storefront .rc-ct__h{
  margin:0;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:-.012em;line-height:1.06;
  font-size:clamp(30px,4vw,50px);color:var(--rc-text);max-width:18ch}
body.rc-storefront .rc-ct__p{
  margin:24px 0 0;max-width:52ch;font-size:15.5px;line-height:1.75;color:var(--rc-body)}

/* Two by two, as in the reference. */
body.rc-storefront .rc-info{margin-top:48px;display:grid;gap:36px 48px}
@media (min-width:520px){body.rc-storefront .rc-info{grid-template-columns:1fr 1fr}}
body.rc-storefront .rc-info__k{
  margin:0 0 14px;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.02em;font-size:15px;color:var(--rc-text)}
body.rc-storefront .rc-info__v{margin:0;font-size:14.5px;line-height:1.7;color:var(--rc-body)}
body.rc-storefront .rc-info__v a{color:var(--rc-body);text-decoration:none;transition:color .15s}
body.rc-storefront .rc-info__v a:hover{color:var(--rc-accent)}

body.rc-storefront .rc-soc{display:flex;gap:14px;align-items:center}
body.rc-storefront .rc-soc a{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rc-line);border-radius:4px;color:var(--rc-body);
  transition:border-color .15s,color .15s}
body.rc-storefront .rc-soc a:hover{border-color:var(--rc-accent);color:var(--rc-accent)}
body.rc-storefront .rc-soc svg{width:15px;height:15px;fill:currentColor;display:block}

/* ---------- form panel ---------- */
body.rc-storefront .rc-cform{
  width:100%;border:1px solid var(--rc-line);border-radius:8px;
  background:var(--rc-panel);padding:clamp(28px,3.2vw,44px)}
body.rc-storefront .rc-cform__t{
  margin:0;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.15;
  font-size:clamp(20px,2.2vw,26px);color:var(--rc-text)}
body.rc-storefront .rc-cform__p{
  margin:14px 0 0;max-width:44ch;font-size:14.5px;line-height:1.7;color:var(--rc-body)}

/* The slot. Replace with a WPForms widget in Elementor; the rules below
   dress it automatically. */
body.rc-storefront .rc-formslot{
  margin-top:28px;min-height:300px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px dashed var(--rc-line2);border-radius:6px;padding:24px}
body.rc-storefront .rc-formslot span{
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-dim);line-height:2}

/* WPForms styling intentionally not in this theme.
   Kendrick maintains the form styles himself, so the theme leaves WPForms
   alone. Anything added here will fight his rules, not help them.

   Two things were removed with them and are worth knowing:
     - the variable overrides that themed fields, labels and the submit
     - the override that forced --wpforms-background-url to none, which was
       hiding Elementor's placeholder.png behind the Contact form. The fix
       at source is to clear the Background setting on the WPForms widget
       in Elementor, which is where that image comes from.
   ============================================================ */

/* ---------- map ---------- */
body.rc-storefront .rc-map{
  position:relative;width:100%;overflow:hidden;
  border-top:1px solid var(--rc-line);border-bottom:1px solid var(--rc-line);
  background:var(--rc-ink)}
body.rc-storefront .rc-map iframe{
  display:block;width:100%;height:clamp(320px,46vh,520px);border:0;
  /* Google serves a light map and gives no dark style without a keyed
     Static/JS API. Inverting and rotating the hue back lands it in the
     palette; saturation is pulled down so roads do not read as accent. */
  filter:invert(.92) hue-rotate(180deg) saturate(.55) brightness(.95) contrast(1.08)}
body.rc-storefront .rc-map__card{
  position:absolute;left:clamp(16px,2.4vw,32px);top:clamp(16px,2.4vw,32px);z-index:2;
  max-width:300px;background:var(--rc-bg);border:1px solid var(--rc-line);
  border-radius:6px;padding:20px}
body.rc-storefront .rc-map__k{
  margin:0 0 8px;font-family:var(--rc-mono);font-size:10px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--rc-accent)}
body.rc-storefront .rc-map__a{
  margin:0;font-size:14.5px;line-height:1.6;color:var(--rc-text);font-style:normal}
body.rc-storefront .rc-map__go{
  display:inline-block;margin-top:16px;
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rc-accent);text-decoration:none;transition:color .15s}
body.rc-storefront .rc-map__go:hover{color:var(--rc-text)}


/* ============================================================
   ELEMENTOR SOCIAL ICONS  (v1.10)

   So the footer's social-icons widget can be dropped on any page and
   match the .rc-soc treatment without per-instance styling.

   !important is deliberate here. Elementor writes per-element CSS at
   `.elementor-NN .elementor-element.elementor-element-XXXX .elementor-social-icon`,
   four classes, which outranks any theme selector. Any colour set in the
   widget's Style tab would otherwise win. Clearing those settings in the
   widget is the tidier fix; this makes the theme win either way.
   ============================================================ */

/* Spacing only. Do NOT set display or justify-content here.
   Elementor's own rule is `justify-content: var(--justify-content, center)`
   on .elementor-grid, and the widget's alignment control is what sets that
   variable (e-grid-align-left and friends). Overriding the wrapper to
   display:flex left that declaration applying with no variable set, so it
   fell back to `center` and the footer icons centred themselves. Leaving the
   grid alone means the widget's own Align control keeps working. */
body.rc-storefront .elementor-widget-social-icons .elementor-social-icons-wrapper{
  --grid-column-gap:14px;--grid-row-gap:14px}
body.rc-storefront .elementor-social-icon{
  width:34px !important;height:34px !important;padding:0 !important;
  display:flex;align-items:center;justify-content:center;
  background-color:transparent !important;
  border:1px solid var(--rc-line) !important;border-radius:4px !important;
  color:var(--rc-body) !important;
  transition:border-color .15s,color .15s}
body.rc-storefront .elementor-social-icon:hover{
  background-color:transparent !important;
  border-color:var(--rc-accent) !important;color:var(--rc-accent) !important}
body.rc-storefront .elementor-social-icon svg{
  width:15px;height:15px;fill:currentColor;display:block}


/* ============================================================
   STACKED SECTIONS + INLINE-SPAN FIX  (v1.11)
   ============================================================ */

/* Breathing room between a section head and the list under it, now that the
   press header and the news list can live in separate widgets. */
body.rc-storefront .rc-news{margin-top:40px}

/* Sections that belong to one editorial block should not each pay full
   section padding where they meet. .rc-psec--tight already trims the top;
   this trims the bottom, so a pair reads as one group.

     first  -> rc-psec rc-psec--tight-b
     second -> rc-psec rc-psec--tight

   which lands about 64px between them instead of about 220px. */
body.rc-storefront .rc-psec--tight-b{padding-bottom:clamp(20px,2.2vw,34px)}


/* ============================================================
   HOMEPAGE B MODULES  (v1.13)
   ============================================================ */

/* ---------- partner logo row ----------
   Five marks with wildly different proportions: a 9.6:1 wordmark next to a
   1.5:1 stacked lockup. Sizing them all to one height would make Hodgdon a
   postage stamp and Kymeta a banner, so each gets a height tuned for equal
   OPTICAL weight, and the row aligns on the centre line.

   brightness(0) invert(1) flattens every mark to white, so a navy-and-red
   lockup and a blue wordmark sit together on the dark ground without
   competing. Opacity lifts on hover. */
body.rc-storefront .rc-logobar__i img{
  display:block;width:auto;
  filter:brightness(0) invert(1);
  opacity:.55;transition:opacity .2s}
body.rc-storefront .rc-logobar__i:hover img{opacity:1}
body.rc-storefront .rc-pl--kymeta img{height:18px}
body.rc-storefront .rc-pl--redcat img{height:21px}
body.rc-storefront .rc-pl--hodgdon img{height:28px}
body.rc-storefront .rc-pl--volvo img{height:30px}
body.rc-storefront .rc-pl--havoc img{height:26px}

/* Hodgdon and Red Cat were supplied as white, dark-ground versions, so they
   need no normalising and the filter is skipped for both.

   28px on Hodgdon is measured, not guessed. Matching logos by bounding-box
   height makes them look wrong, because a two-line lockup spends half its
   height on the second line. Rasterising all five and measuring the densest
   ink band, the primary wordmark, gives cap heights of 18, 15.5, 13.5 and
   13.2px for Kymeta, Red Cat, Volvo Penta and Havoc. Hodgdon's cap band is
   53% of its height, so 28px puts it at 14.8px, inside that spread.

   Kymeta measures noticeably larger than the rest at 18px. Left as is,
   since it was not part of the request, but 15px would even the row. */
body.rc-storefront .rc-pl--hodgdon img,
body.rc-storefront .rc-pl--redcat img{filter:none}
@media (max-width:600px){
  body.rc-storefront .rc-logobar__i img{height:auto;max-height:26px;max-width:120px}
  body.rc-storefront .rc-pl--hodgdon img{max-height:26px}
}

/* ---------- system capabilities ----------
   rc-syscap, NOT rc-cap. The theme already defines .rc-cap twice, for the
   storefront's diamond-bullet list and its icon cards, and the bullet rule
   is display:flex with a pseudo-element bullet. That is what was pulling the
   title and body onto one line with a diamond in front. */
body.rc-storefront .rc-syscaps{
  margin-top:48px;display:grid;gap:1px;width:100%;
  background:var(--rc-line);border:1px solid var(--rc-line)}
@media (min-width:640px){body.rc-storefront .rc-syscaps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){body.rc-storefront .rc-syscaps{grid-template-columns:repeat(3,1fr)}}

/* Stacked, not side by side, so every card has the same internal rhythm and
   the row heights even out. */
body.rc-storefront .rc-syscap{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--rc-panel);padding:clamp(26px,2.8vw,36px)}
body.rc-storefront .rc-syscap__i{
  width:40px;height:40px;flex:0 0 auto;margin-bottom:22px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rc-accent);color:var(--rc-accent)}
body.rc-storefront .rc-syscap__i svg{width:21px;height:21px;display:block}
body.rc-storefront .rc-syscap__t{
  margin:0 0 12px;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.2;
  font-size:clamp(15px,1.5vw,17px);color:var(--rc-text)}
body.rc-storefront .rc-syscap__p{
  margin:0;font-size:14.5px;line-height:1.7;color:var(--rc-body)}

/* ---------- architecture: two columns, not three ----------
   .rc-chain is repeat(3,1fr) and this module has two children, so the third
   track rendered as an empty lit cell. */
body.rc-storefront .rc-chain--2{margin-top:40px}
@media (min-width:768px){
  body.rc-storefront .rc-chain--2{grid-template-columns:repeat(2,1fr)}
}

/* ---------- CTA panel with a vessel behind it ---------- */
body.rc-storefront .rc-note--cta.rc-cta--img{
  position:relative;isolation:isolate;overflow:hidden;
  background-image:url('assets/img/cta-variant-7.jpg');
  background-size:cover;background-position:center 58%}
/* The panel ground, kept as a wash over the photograph so the copy holds its
   contrast and the image reads as texture rather than as a picture. */
body.rc-storefront .rc-note--cta.rc-cta--img:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,27,37,.90),rgba(20,27,37,.82))}


/* ============================================================
   HOMEPAGE B REVISIONS  (v1.15)
   ============================================================ */

/* Wider hero measure, scoped with a modifier. .rc-vhero__h is shared with
   the Variant 7 and Tech Stack heroes, where the 16ch measure is deliberate,
   so widening the base rule would drag those with it. */
body.rc-storefront .rc-vhero--wide .rc-vhero__h{max-width:70%}
body.rc-storefront .rc-vhero--wide .rc-vhero__p{max-width:56%}
@media (max-width:1024px){
  body.rc-storefront .rc-vhero--wide .rc-vhero__h,
  body.rc-storefront .rc-vhero--wide .rc-vhero__p{max-width:100%}
}

/* Made in the USA lockup, sitting in the CTA row in place of a second button.
   Height is set so its cap height reads with the button label beside it. */
body.rc-storefront .rc-madein__img{
  display:flex;align-items:center;align-self:center}
body.rc-storefront .rc-madein__img img{display:block;height:22px;width:auto}
@media (max-width:600px){
  body.rc-storefront .rc-madein__img img{height:18px}
}

/* Logo row: label larger and white, marks white by default and dimming on
   hover, which is the reverse of the previous behaviour. */
body.rc-storefront .rc-logobar__l{font-size:12px;color:var(--rc-text)}

/* Two older rules had to be undone here, and both were silently defeating the
   per-logo sizing above.

   1. The original row set max-height:26px on every mark, which clamped
      Hodgdon at 28px and Volvo Penta at 30px. max-height beats height, so the
      measured cap-height matching was being thrown away for the two tallest.
   2. The wrapper span carries opacity .82, which multiplies with the image's
      own opacity, so "white" was really 82%. Dimming now lives on the image
      alone and the span stays fully opaque. */
body.rc-storefront .rc-logobar__i{opacity:1}
body.rc-storefront .rc-logobar__i img{max-height:none;opacity:1}
body.rc-storefront .rc-logobar__i:hover img{opacity:.5}

/* Centred action row, for the buttons under the spec table and the diagram. */
body.rc-storefront .rc-ctarow--center{justify-content:center}


/* ============================================================
   VARIANT 7 HERO SUB-BAR  (v1.16)

   A menu and a Data Sheet button overlaid on the hero video: solid to
   the left edge of the screen, ending after the button, with the rest
   of the width left uncovered so the footage shows through.

   Built as a real overlay rather than the way it was first attempted,
   which was a legacy section pulled up by margin-top:-69px with four
   columns at fractional widths (2.008%, 52.997%, 15.216%, 29.779%).
   That breaks on every save for two reasons, and both are removed here:

     1. Elementor recalculates legacy column widths when a section is
        saved, so fractional inline sizes drift.
     2. The -69px assumed an exact rendered bar height. Menu length,
        font loading and any padding change move it, and the page CSS
        is regenerated on save, so the result only looks right until
        something re-renders. Hence the cache clearing.

   Here the bar is absolutely positioned against the hero, so its height
   is whatever it is, and its width is its content. Nothing to drift.
   ============================================================ */

/* ---------------------------------------------------------------
   Variant 7 sub-bar.

   This site does not render CSS Classes on containers, sections or
   columns. It renders them on widgets only, and it renders CSS IDs
   everywhere. Verified on the live page: no rc- class appears on any
   section, column or container, while rc-nav on the header's menu
   widget is present. So the two structural hooks here are IDs, and
   the two widget hooks are classes.

     #rc-v7hero        container wrapping hero + bar   (CSS ID)
     #rc-subbar        the bar section                 (CSS ID)
     .rc-subbar__nav   the menu widget                 (CSS class)
     .rc-subbar__cta   the button widget               (CSS class)

   Nothing below depends on a number Elementor writes at save time.
   Widths are forced so a column renormalisation cannot move the bar.
   --------------------------------------------------------------- */

body.rc-storefront #rc-v7hero{position:relative}
body.rc-storefront #rc-v7hero .rc-vhero{padding-bottom:clamp(120px,12vw,190px)}
body.rc-storefront #rc-v7hero .rc-vhero__p{margin-bottom:0}

body.rc-storefront #rc-subbar{
  position:absolute;left:0;right:0;bottom:clamp(26px,2.6vw,44px);
  z-index:6;margin:0;
  /* The theme gives top sections a page gutter; this matches the hero's. */
  padding:0 clamp(22px,4vw,56px)}
body.rc-storefront #rc-subbar > .elementor-container{
  /* Mirrors .rc-inner, so the menu lines up under the headline. */
  width:100%;max-width:1460px;margin:0 auto;
  display:flex;align-items:center;flex-wrap:nowrap}
body.rc-storefront #rc-subbar .elementor-column{
  display:flex;align-items:center;flex:0 0 auto}
body.rc-storefront #rc-subbar .elementor-widget-wrap{
  padding:0;align-items:center;align-content:center;flex-wrap:nowrap}
body.rc-storefront #rc-subbar .elementor-widget{width:100%}

/* Columns are addressed by position because they cannot carry a class. */
body.rc-storefront #rc-subbar .elementor-column:nth-child(1){
  width:52% !important;flex:0 0 52% !important}
body.rc-storefront #rc-subbar .elementor-column:nth-child(2){
  width:clamp(158px,11vw,192px) !important;flex:0 0 auto !important}

body.rc-storefront .rc-subbar__nav .elementor-nav-menu{
  gap:clamp(26px,2.4vw,42px);flex-wrap:nowrap;align-items:center}
/* Zero horizontal padding puts the first item flush with the headline;
   the gap does the spacing. Colour and type stay on the widget. */
body.rc-storefront .rc-subbar__nav .elementor-item{
  padding:10px 0;white-space:nowrap;
  /* The widget asks Elementor for a family called "Gridnik". The theme
     registers the face as 'RC Space', so that name matches nothing and the
     menu falls back to a system sans.

     !important is not decoration here. Elementor writes the widget's
     typography into the generated per-post sheet as

       .elementor-90 .elementor-element.elementor-element-53067abf
       .elementor-nav-menu .elementor-item

     which is five classes against this rule's two, and it loads after the
     theme. Without the flag the theme rule never applies, whatever it says.
     The template also drops the setting, so on a clean import no such rule
     is emitted at all; this covers the case where someone picks a font in
     the editor again. */
  font-family:var(--rc-display) !important}

body.rc-storefront .rc-subbar__cta .elementor-button-wrapper,
body.rc-storefront .rc-subbar__cta .elementor-widget-container{width:100%}
body.rc-storefront .rc-subbar__cta .elementor-button{
  width:100%;text-align:center;
  /* Same fallback, same fix, and the same generated rule outranks it. */
  font-family:var(--rc-display) !important}

/* The section is set hidden on tablet and mobile in the template. If it is
   switched back on, it drops under the hero rather than overflowing. */
@media (max-width:1024px){
  body.rc-storefront #rc-v7hero .rc-vhero{padding-bottom:clamp(48px,6vw,84px)}
  body.rc-storefront #rc-subbar{position:static;padding:0}
  body.rc-storefront #rc-subbar > .elementor-container{flex-wrap:wrap}
  body.rc-storefront #rc-subbar .elementor-column:nth-child(1),
  body.rc-storefront #rc-subbar .elementor-column:nth-child(2){
    flex:0 0 100% !important;width:100% !important}
  body.rc-storefront .rc-subbar__nav{padding:6px clamp(14px,4vw,24px)}
  body.rc-storefront .rc-subbar__nav .elementor-nav-menu{flex-wrap:wrap;gap:4px 20px}
  body.rc-storefront .rc-subbar__cta .elementor-button{height:auto}
}


/* ============================================================
   DISPLAY H1 SIZING, SMALL SCREENS

   The five display headings were each a flat 88px with no
   responsive rule, so a phone rendered them at full desktop size
   and the hero overflowed its own viewport. Every other heading
   in the sheet already scales with clamp(); these were the gap.

   Declared once, in one block, because the five share a size and
   splitting them across the sheet is how a rule gets changed in
   one place and quietly left behind in four others. This block
   sits last, so it wins on source order without !important.
   ============================================================ */

@media (max-width:1024px){
  body.rc-storefront .rc-h1,
  body.rc-storefront .rc-h1 .elementor-heading-title,
  body.rc-storefront .rc-vhero__h,
  body.rc-storefront .rc-ahero__h,
  body.rc-storefront .rc-cthero__h{font-size:64px}
}
@media (max-width:767px){
  body.rc-storefront .rc-h1,
  body.rc-storefront .rc-h1 .elementor-heading-title,
  body.rc-storefront .rc-vhero__h,
  body.rc-storefront .rc-ahero__h,
  body.rc-storefront .rc-cthero__h{font-size:45px}
  /* A 16ch measure set for 88px leaves a single word on its own line
     at 45px. The container is the constraint at this width. */
  body.rc-storefront .rc-vhero__h{max-width:none}
}


/* ============================================================
   MOBILE AUDIT FIXES  (v1.20.0)

   Measured on the live site at 390px and 768px, every route.
   Four faults, all small, none of which change the desktop
   rendering. The largest, the comparison table, is fixed above
   by closing an unterminated comment rather than here.
   ============================================================ */

@media (max-width:767px){

  /* 1. Smallest mono labels. 9px and 10px hold up on a desktop
        monitor and do not on a phone, so the floor is 11px.
        Tracking is unchanged, so the look is the same. */
  body.rc-storefront .rc-tag{font-size:11px}
  body.rc-storefront .rc-badge,
  body.rc-storefront .rc-fc__st,
  body.rc-storefront .rc-fc__d,
  body.rc-storefront .rc-read__k,
  body.rc-storefront .rc-film__k,
  body.rc-storefront .rc-map__k{font-size:11px}
  /* The table scrolls in its own box now, so larger cells cost nothing. */
  body.rc-storefront .rc-cmp thead th:first-child,
  body.rc-storefront .rc-cmp tbody th{font-size:11.5px}
  body.rc-storefront .rc-qs__l,
  body.rc-storefront .rc-qs__n{font-size:11.5px}

  /* 2. Social icons measured 34px. Padding takes the tap target to
        44px without changing the icon, so the row looks identical. */
  body.rc-storefront .elementor-social-icon{
    min-width:44px;min-height:44px}

  /* 3. The header logo renders 226px wide on a 375px screen, which is
        60% of the viewport against a 74px header. Capping the width
        leaves the lockup legible and gives the toggle room. */
  body.rc-storefront [data-elementor-type="header"] .elementor-widget-image img{
    max-width:170px;height:auto}

  /* 4. The comparison table scrolls sideways inside its own box.
        Momentum scrolling is declared so the gesture feels native. */
  body.rc-storefront .rc-cmp{-webkit-overflow-scrolling:touch}
}

/* The DATA SHEET popup fills the screen at phone widths, so there is
   no backdrop left to tap and the close control is set to display:none
   in the popup's own settings. That leaves no way out of it but a
   reload. Restored here, at a 44px target, rather than in Elementor,
   so it travels with the theme. */
@media (max-width:767px){
  body .elementor-popup-modal .dialog-close-button{
    display:flex !important;align-items:center;justify-content:center;
    width:44px;height:44px;top:6px;right:6px;
    color:var(--rc-text);opacity:.85;z-index:5}
  body .elementor-popup-modal .dialog-close-button:hover{opacity:1}
}


/* ============================================================
   FLEET CARD SPECS  (v1.21.0)

   Casie asked whether the fleet lineup and the specs comparison
   could be one thing, so every number now sits on its own hull's
   card and the separate comparison table is gone. That removes a
   full section from the homepage.

   The card is an image with the copy overlaid, so eight spec rows
   had to earn their space: two columns of four, mono, tight, on a
   rule that reads as instrumentation rather than a table. The
   viewport grows to carry them and the scrim is extended so the
   values hold contrast over any frame.
   ============================================================ */

body.rc-storefront .rc-fc__specs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(18px,2.4vw,40px);
  /* Capped, or each pair spreads across 600px of card and the value
     loses its label. Two columns of roughly 390px keeps them paired. */
  max-width:min(100%,820px);
  margin:clamp(16px,2vw,22px) 0 0;padding-top:14px;
  border-top:1px solid var(--rc-line2)}
body.rc-storefront .rc-fc__spec{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
body.rc-storefront .rc-fc__spec:nth-last-child(-n+2){border-bottom:0}
body.rc-storefront .rc-fc__spec dt{
  margin:0;font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-dim);white-space:nowrap}
body.rc-storefront .rc-fc__spec dd{
  margin:0;font-family:var(--rc-mono);font-size:12.5px;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;color:var(--rc-text);text-align:right}

/* Room for the specs, and a scrim that reaches them.

   v1.54.0: min-height raised from 34rem, and the JS now floors the card
   height at what its parts actually need.

   The bug: the card is a flex column whose photograph has a fixed height
   (clamp(336px,44vh,436px), item 4 below) and whose panel takes the
   remainder. Card height comes from JS as min(availH*0.94, w*0.75). On a
   short window the first term wins, the photograph still takes its full
   fixed height, and the panel is left with less than it needs. It has
   overflow:hidden, so the last spec rows simply vanish. Measured on the
   shipped 1.53 build: 8 of 16 rows gone at 1366x768 and 1024x768, 4 at
   1440x900, 12 at 1024x600, all 16 at 900x1200. Only very tall windows
   escaped it, which is why it read as a small-screen problem.

   Note it was never the copy overflowing the card. That was checked first
   and the copy always fit; the loss was inside the flex split. */
body.rc-storefront .rc-fleet{height:min(78vh,760px);min-height:44rem}
body.rc-storefront [data-rc-fleet] .rc-fc__scrim{
  background:linear-gradient(to top,var(--rc-bg) 18%,rgba(10,14,20,.78) 58%,transparent 88%)}
/* The description competes with the specs for the same space; the
   specs are the reason the section exists, so the prose gives way. */
body.rc-storefront .rc-fc__specs ~ *{margin-top:0}
body.rc-storefront [data-rc-fleet] .rc-fc__p{max-width:44ch}

/* Tablet and small laptop: the two spec columns stay, but the row rhythm
   tightens so the overlay needs less height before the JS floor kicks in. */
@media (min-width:768px) and (max-width:1200px){
  body.rc-storefront .rc-fc__specs{margin-top:14px;padding-top:11px}
  body.rc-storefront .rc-fc__spec{padding:4px 0}
  body.rc-storefront .rc-fc__p{margin-top:8px}
}

@media (max-width:767px){
  body.rc-storefront .rc-fleet{height:auto;min-height:0}
  body.rc-storefront .rc-fc__specs{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;padding-top:12px}
  body.rc-storefront .rc-fc__spec{padding:5px 0}
  body.rc-storefront .rc-fc__spec dt{font-size:11px;letter-spacing:.12em}
  body.rc-storefront .rc-fc__spec dd{font-size:12px}
  /* Eight rows plus a headline will not sit over a photo on a phone,
     so the card stops being an overlay and becomes a stacked panel. */
  body.rc-storefront [data-rc-fleet] .rc-fc{
    position:relative;top:auto;left:auto;transform:none !important;
    width:100% !important;height:auto !important;margin:0 0 16px}
  body.rc-storefront [data-rc-fleet] .rc-fc__img{
    position:relative;height:56vw;max-height:260px}
  body.rc-storefront [data-rc-fleet] .rc-fc__b{position:relative;padding:20px}
  body.rc-storefront [data-rc-fleet] .rc-fc__scrim,
  body.rc-storefront [data-rc-fleet] .rc-fc__dim{display:none}
  body.rc-storefront [data-rc-fleet] .rc-fc[aria-hidden="true"]{display:block;cursor:auto}
  body.rc-storefront [data-rc-fleet] .rc-fleet__nav{display:none}
}


/* ============================================================
   NEWS PAGE VISUALS  (v1.23.0)

   The VP asked for a video header and for the contour tile to
   give way to real on-water imagery. Two new pieces, both
   general rather than News-specific, so other pages can use
   them without a second implementation.
   ============================================================ */

/* A page header on the video hero, at title height rather than
   full-screen: it introduces a page, it is not the page. */
body.rc-storefront .rc-vhero--page{
  min-height:clamp(340px,46vh,520px);
  padding-top:clamp(64px,8vw,120px);
  padding-bottom:clamp(36px,4.5vw,64px)}
body.rc-storefront .rc-vhero--page .rc-vhero__h{margin-bottom:16px}
body.rc-storefront .rc-vhero--page .rc-vhero__p{margin-bottom:0}
/* The page scrim is lighter than the homepage one. The point of this header
   is the footage, and the full hero scrim buries the hulls. Kept dark under
   the copy on the left, opened up on the right where the boat runs. */
body.rc-storefront .rc-vhero--page.rc-scrim:after{
  background:linear-gradient(90deg,rgba(10,14,20,.95) 0%,rgba(10,14,20,.6) 46%,rgba(10,14,20,.3) 100%),
             linear-gradient(to bottom,var(--rc-bg),transparent 24%,transparent 60%,var(--rc-bg))}
@media (max-width:767px){
  body.rc-storefront .rc-vhero--page{min-height:clamp(260px,40vh,360px)}
}

/* Photographic section ground, the replacement for .rc-gridbg.
   The scrim is part of the pattern rather than the caller's job,
   because the copy has to stay readable over any frame. */
body.rc-storefront .rc-photobg{
  position:relative;isolation:isolate;overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat}
body.rc-storefront .rc-photobg:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--rc-bg) 0%,rgba(10,14,20,.86) 26%,rgba(10,14,20,.9) 100%)}
body.rc-storefront .rc-photobg > .rc-inner{position:relative;z-index:2}
body.rc-storefront .rc-photobg--water{background-image:url('assets/img/ops-water.jpg')}

/* The Press block is identical markup on the homepage and on News. On the
   page the link points at, it hides itself rather than being edited out.

   Matched on the href, not on .rc-mlink--head: that class is also worn by
   the LinkedIn link in From the field, and a class-only rule would take
   both down. The selector says what it means, which is that a link to this
   page does not appear on this page. */
body.rc-page-news a.rc-mlink--head[href$="/news/"]{display:none}


/* ============================================================
   INTERNAL PAGE HEADLINES  (v1.24.0)

   Every page below the homepage carried the homepage's 88px
   headline over a measure of 16ch to 24ch, so the type was both
   too large for a section opener and boxed into a third of the
   hero. One scale for all of them, and the measure removed so
   the line runs the width of the header.

   Three different h1 classes reach the same place:
     .rc-vhero__h   Variant 7, Tech Stack, News
     .rc-ahero__h   About, Leadership, Integrations
     .rc-cthero__h  Contact

   The homepage is the exception and keeps its own treatment.
   It wears .rc-vhero--wide, and the existing rule for that is
   more specific than this one, so it survives untouched. That
   is asserted in the proof rather than assumed.
   ============================================================ */

body.rc-storefront .rc-vhero__h,
body.rc-storefront .rc-ahero__h,
body.rc-storefront .rc-cthero__h{
  font-size:clamp(45px,7vw,61px);
  max-width:none}

/* The lede follows the headline out to a full-width measure, but
   stops short of the full line: 82ch is long enough to fill the
   header and short enough to stay readable. */
body.rc-storefront .rc-vhero__p,
body.rc-storefront .rc-ahero__p{max-width:82ch}


/* ============================================================
   LEADERSHIP  (v1.27.0)

   Two principals side by side under a video header, four VPs in
   a row beneath. Every profile is a link to that person's
   LinkedIn, so the whole card is the anchor rather than a small
   link inside it: the target is the card, not a word.

   Spans, not block elements, inside the anchors. An <a> may not
   contain a heading or a paragraph, and the page has to stay
   valid for the reveal script and for anything reading the DOM.
   ============================================================ */

body.rc-storefront .rc-ldr{
  display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);width:100%}
@media (min-width:900px){
  body.rc-storefront .rc-ldr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
body.rc-storefront .rc-ldr__card{
  display:grid;grid-template-columns:1fr;gap:24px;
  text-decoration:none;color:inherit;text-align:center;
  border:1px solid var(--rc-line);border-radius:6px;
  background:var(--rc-panel);padding:clamp(20px,2.4vw,30px);
  transition:border-color .2s,background .2s,transform .2s}
body.rc-storefront a.rc-ldr__card:hover{
  border-color:var(--rc-accent);background:var(--rc-accent-line);transform:translateY(-2px)}
body.rc-storefront .rc-ldr__m{
  /* centred with the rest of the card; text-align does not move a block */
  display:block;width:100%;max-width:260px;margin-inline:auto;aspect-ratio:4/5;overflow:hidden;
  border:1px solid var(--rc-line);border-radius:4px;background:var(--rc-bg)}
body.rc-storefront .rc-ldr__m img{width:100%;height:100%;object-fit:cover;display:block}
body.rc-storefront .rc-ldr__b{display:block}
body.rc-storefront .rc-ldr__t{
  display:block;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.08;
  font-size:clamp(24px,2.6vw,32px);color:var(--rc-text);transition:color .2s}
body.rc-storefront a.rc-ldr__card:hover .rc-ldr__t{color:var(--rc-accent)}
body.rc-storefront .rc-ldr__r{
  display:block;margin-top:12px;font-family:var(--rc-mono);font-size:11.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--rc-accent)}
body.rc-storefront .rc-ldr__p{
  /* A centred paragraph needs a tighter measure or the ragged edges read as
     noise. Capped and centred rather than filling the card. */
  display:block;margin:18px auto 0;max-width:46ch;
  font-size:15.5px;line-height:1.75;color:var(--rc-body)}

/* Shared link affordance for both card types. */
body.rc-storefront .rc-ldr__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rc-dim);transition:color .2s}
body.rc-storefront a:hover .rc-ldr__go{color:var(--rc-accent)}

/* ---------- the four VPs ---------- */
body.rc-storefront .rc-vps{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px);list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0}
/* v1.56.0: back to four across, with the leftover two centred underneath.
   Three columns made each card wider, which made the portrait inside it
   wider still, and the wider team ended up with bigger faces than the
   President and Senior VP above them. Four columns keeps the cards narrow;
   the nth-child pair below pulls the final row into the middle two tracks
   so it reads as centred rather than left-aligned.

   The guards are deliberate: :nth-child(5):nth-last-child(2) only matches
   when there are exactly six cards, so adding a seventh person restores a
   normal flow row instead of leaving one card stranded in column 2. */
@media (min-width:900px){
  body.rc-storefront .rc-vps{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.rc-storefront .rc-vps > li:nth-child(5):nth-last-child(2){grid-column:2}
  body.rc-storefront .rc-vps > li:nth-child(6):nth-last-child(1){grid-column:3}
}

/* The portrait was width:100% of whatever the column happened to be, about
   340px at desktop, against the 260px cap on Barry and Sandy's cards. It now
   sits a little under theirs, so seniority still reads top to bottom. */
body.rc-storefront .rc-vp__m{max-width:230px;margin-inline:auto}
/* The list item stretches to the row, but the anchor inside it did not, so a
   two-line role made its card taller than its neighbours and the LinkedIn
   lines stopped aligning. The anchor now fills the row and the link is pushed
   to the bottom of whatever height the row settles at. */
body.rc-storefront .rc-vps > li{display:flex}
body.rc-storefront .rc-vp{
  display:flex;flex-direction:column;width:100%;
  text-decoration:none;color:inherit;text-align:center;
  border:1px solid var(--rc-line);border-radius:6px;background:var(--rc-panel);
  padding:clamp(14px,1.6vw,20px);
  transition:border-color .2s,background .2s,transform .2s}
body.rc-storefront a.rc-vp:hover{
  border-color:var(--rc-accent);background:var(--rc-accent-line);transform:translateY(-2px)}
/* Portrait slot: the same reserved treatment as the old roster, since
   these four have no photography yet. */
body.rc-storefront .rc-vp__m{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:4/5;border:1px solid var(--rc-line);
  border-radius:4px;background:var(--rc-bg)}
body.rc-storefront .rc-vp__m span{
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rc-dim)}
/* Real portraits have arrived, so the slot carries a photograph rather than
   the reserved label. overflow:hidden because the image fills a rounded box. */
body.rc-storefront .rc-vp__m{overflow:hidden}
body.rc-storefront .rc-vp__m img{width:100%;height:100%;object-fit:cover;display:block}
body.rc-storefront .rc-vp__n{
  display:block;margin-top:16px;font-family:var(--rc-display);
  font-weight:var(--rc-display-weight);text-transform:uppercase;
  font-size:clamp(19px,2vw,23px);line-height:1.1;color:var(--rc-text);transition:color .2s}
body.rc-storefront a.rc-vp:hover .rc-vp__n{color:var(--rc-accent)}
body.rc-storefront .rc-vp__r{
  display:block;margin-top:8px;font-family:var(--rc-mono);font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--rc-accent)}
body.rc-storefront .rc-vp .rc-ldr__go{margin-top:auto;padding-top:14px;align-self:center}

@media (max-width:767px){
  body.rc-storefront .rc-vp__r,
  body.rc-storefront .rc-ldr__r{letter-spacing:.18em;font-size:11.5px}
}


/* ============================================================
   MEDIA UNFILTERED  (v1.31.0)

   Blue Ops, 18 Sep: every image and video is to run at the
   brightness it was shot at. "Anything that bastardizes the
   image is a non-starter." The dark casing stays, the filters
   over the media go.

   This block is last in the sheet on purpose. It overrides the
   scrims declared with the components rather than deleting
   them, so the pattern is still there if a section ever needs
   it again, and so this decision reads as one decision in one
   place instead of a dozen quiet edits.
   ============================================================ */

/* 1. Full-bleed video and image sections: no wash at all. */
body.rc-storefront .rc-scrim:after,
body.rc-storefront .rc-scrim--soft:after{background:none}

/* 2. The hero still has to carry a headline over moving water. A short
      fade under the copy block only, stopping well before the middle of
      the frame, rather than a wash across the whole video. */
body.rc-storefront .rc-vhero.rc-scrim:after{
  background:linear-gradient(to top,
    rgba(10,14,20,.92) 0%,
    rgba(10,14,20,.78) 14%,
    rgba(10,14,20,.34) 32%,
    transparent 52%)}
/* The page header variant carries less copy and needs less cover. */
body.rc-storefront .rc-vhero--page.rc-scrim:after{
  background:linear-gradient(to top,
    rgba(10,14,20,.9) 0%,
    rgba(10,14,20,.6) 22%,
    transparent 46%)}

/* 3. Fleet cards: the photograph is the point. The stacking dim that
      greyed out covered cards goes, and the card scrim is replaced by
      the copy moving off the image entirely, below. */
body.rc-storefront .rc-fc__scrim{background:none}
body.rc-storefront .rc-fc[aria-hidden="true"] .rc-fc__dim{opacity:0}

/* 4. Video tiles played under a lifted opacity; they run clean now. */
body.rc-storefront .rc-demo__m video,
body.rc-storefront .rc-demo__m img{opacity:1;filter:none}


/* ============================================================
   FLEET CARD, COPY BELOW THE IMAGE  (v1.31.0)

   Their words: clean visual on top, filled box beneath. The
   card stops being a photograph with text laid over it and
   becomes a photograph with a panel under it, which is what
   lets the scrim come off without losing the copy.

   The carousel still positions cards absolutely and reads
   clientHeight to size them, so the card keeps its outer box
   and splits inside: image takes the space that is left, panel
   takes what it needs.
   ============================================================ */

body.rc-storefront [data-rc-fleet] .rc-fc{
  display:flex;flex-direction:column;background:var(--rc-panel)}
body.rc-storefront [data-rc-fleet] .rc-fc__img{
  position:relative;flex:1 1 auto;width:100%;height:auto;min-height:0;object-fit:cover}
body.rc-storefront [data-rc-fleet] .rc-fc__b{
  position:relative;left:auto;right:auto;bottom:auto;flex:0 0 auto;
  background:var(--rc-panel);border-top:1px solid var(--rc-line);
  padding:clamp(18px,2.2vw,28px)}
/* The number badge sat on the photo; it belongs with the copy now. */
body.rc-storefront [data-rc-fleet] .rc-fc__n{
  top:auto;bottom:clamp(18px,2.2vw,28px);right:clamp(18px,2.2vw,28px)}
body.rc-storefront [data-rc-fleet] .rc-fc__p{max-width:60ch}
/* Specs sit in the panel, so they no longer need a rule of their own
   to separate them from a photograph. */
body.rc-storefront [data-rc-fleet] .rc-fc__specs{
  margin-top:clamp(14px,1.6vw,18px);padding-top:12px}

/* The viewport has to grow: the panel is real height now, not an overlay. */
body.rc-storefront .rc-fleet{height:min(84vh,860px);min-height:38rem}
@media (max-width:767px){
  body.rc-storefront .rc-fleet{height:auto;min-height:0}
  /* Same inch on a phone, within reason: 260 to 340 rather than to 356,
     which would take most of the screen on its own. */
  body.rc-storefront [data-rc-fleet] .rc-fc__img{flex:0 0 auto;height:74vw;max-height:340px}
}


/* ============================================================
   VIDEO PANEL, MIXED ASPECT  (v1.31.0)

   Two of the three clips are new. One is 16:9, the other is a
   9:16 vertical master and Blue Ops would rather show it as
   shot than lose the top and bottom of frame to a crop, so the
   row carries one portrait tile among two landscape ones.

   The tiles align on their tops and the row takes the height of
   the tallest; the landscape ones keep their own aspect and sit
   under their captions rather than stretching to match.
   ============================================================ */

body.rc-storefront .rc-demos{align-items:start}
body.rc-storefront .rc-demo--tall .rc-demo__m{aspect-ratio:9/16}
body.rc-storefront .rc-demo--tall .rc-demo__m video,
body.rc-storefront .rc-demo--tall .rc-demo__m img{object-fit:cover}
@media (max-width:767px){
  /* Stacked on a phone, a 9:16 tile would fill the screen on its own. */
  body.rc-storefront .rc-demo--tall .rc-demo__m{aspect-ratio:4/5}
}


/* ============================================================
   PARTNER ROW, FIFTEEN MARKS  (v1.31.0)

   Each file is padded to one canvas, with the mark inside it at
   a size worked out on equal ink area rather than equal height.
   That is why a single CSS height is correct here: the relative
   weighting is baked into the artwork, so the row scales as one
   set instead of fifteen separate decisions.

   Declared after the older .rc-logobar rules, which capped the
   marks at 26px for a five-logo row and would crush this one.
   ============================================================ */

body.rc-storefront .rc-logobar__row{gap:clamp(10px,1.4vw,26px) clamp(14px,1.8vw,30px)}
body.rc-storefront .rc-logobar__i img,
body.rc-storefront .rc-logobar__i:hover img{
  height:clamp(38px,4.2vw,56px);width:auto;max-height:none;max-width:none;
  opacity:.78;transition:opacity .2s}
body.rc-storefront .rc-logobar__i:hover img{opacity:1}
/* ---- mobile: two columns, one width ----
   Wrapping a flex row left ragged pairs and orphans. A grid gives every mark
   the same cell, and because each file is the same 460x130 canvas, sizing on
   WIDTH rather than height keeps the relative weighting the area pass worked
   out. Height would flatten it again.

   Fifteen is odd, so the last cell spans both columns and centres rather than
   sitting alone on the left. */
@media (max-width:767px){
  body.rc-storefront .rc-logobar__row{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(14px,3vw,24px);align-items:center;justify-items:center}
  body.rc-storefront .rc-logobar__i{width:100%;justify-content:center}
  body.rc-storefront .rc-logobar__i img,
  body.rc-storefront .rc-logobar__i:hover img{
    height:auto;width:100%;max-width:150px;max-height:none}
  body.rc-storefront .rc-logobar__i:last-child{grid-column:1 / -1}
}

/* ---- fleet card scrim, properly overridden ----
   .rc-fc__scrim{background:none} lost to the later, more specific
   [data-rc-fleet] .rc-fc__scrim rule. Matched here instead of
   outranked, which is the only reason this selector is this long. */
body.rc-storefront [data-rc-fleet] .rc-fc__scrim{background:none}

/* ---- portrait tile, kept in proportion ----
   True 9:16 in a 425px column is 755px tall against 265px neighbours.
   The tile stays portrait and taller than the others, but capped, so
   the row still reads as a row. */
body.rc-storefront .rc-demo--tall .rc-demo__m{
  aspect-ratio:auto;height:clamp(300px,34vw,470px)}
@media (max-width:767px){
  body.rc-storefront .rc-demo--tall .rc-demo__m{height:auto;aspect-ratio:4/5}
}


/* ============================================================
   HOMEPAGE REVISIONS, ROUND TWO  (v1.32.0)
   ============================================================ */

/* 1. Hero: no gradient at all, and the lede takes the headline's colour.
      The fade under the copy is gone at their direction. Measured after:
      the headline reads 3.1:1 against the lightest pixel behind it, which
      clears AA for large text but not the 4.5 small text wants, and the
      lede now sits at the same value. Recorded, not silently accepted. */
body.rc-storefront .rc-vhero.rc-scrim:after{background:none}

/* 2. Strategic Intent: the rule above the split was the section's own
      bottom border showing through as a line across the top of the page
      fold. Removed. */
body.rc-storefront .rc-pgsplit{border-bottom:0}

/* 3. Video tiles are all landscape again; the portrait master is what the
      lightbox opens, so nothing is lost, and the row is even. */
body.rc-storefront .rc-demo--tall .rc-demo__m{aspect-ratio:16/9;height:auto}

/* 4. Fleet card images all take one height, so the card that has no spec
      list ends with empty panel rather than a taller photograph. */
body.rc-storefront [data-rc-fleet] .rc-fc__img{
  /* Raised roughly an inch, 96 CSS px, at every stop in the clamp. */
  flex:0 0 auto;height:clamp(336px,44vh,436px)}
body.rc-storefront [data-rc-fleet] .rc-fc__b{flex:1 1 auto}

/* 5a. The attribution under the quote was 11px accent mono and unreadable
       over footage. White, bold, and at a size that reads as a signature. */
body.rc-storefront .rc-pq__a{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  font-size:clamp(16px,1.8vw,22px);letter-spacing:.14em;
  color:var(--rc-text);margin-top:6px}

/* 5b. CTA: the photograph stops being a background with a wash over it and
       becomes an image in its own right, centred, with the copy beneath. */
body.rc-storefront .rc-cta{display:block;width:100%}
body.rc-storefront .rc-cta__m{
  display:block;width:100%;overflow:hidden;
  border:1px solid var(--rc-line);background:var(--rc-bg)}
/* The file is cropped so the vessel sits dead centre, so the frame takes the
   image as it is. object-position stays centre: any offset would undo the
   crop. Height is capped so a wide viewport cannot stretch the band, and the
   aspect is close enough to the file's own that cover barely trims. */
body.rc-storefront .rc-cta__m img{
  display:block;width:100%;height:auto;max-height:clamp(240px,42vh,470px);
  object-fit:cover;object-position:center center}
body.rc-storefront .rc-note--cta.rc-cta__b{
  background:var(--rc-panel);border:1px solid var(--rc-line);border-top:0;
  background-image:none}
body.rc-storefront .rc-note--cta.rc-cta__b:before{content:none}


/* ============================================================
   HERO LOCKUP ON MOBILE  (v1.35.0)

   Kendrick's fix, moved out of the Customizer and into the sheet
   so it survives a template re-import.

   The Made in USA lockup carries an inline margin-left of 20px,
   which spaces it from the button while the two sit on one line.
   When the row wraps on a phone the lockup keeps that 20px and
   sits indented from the button it is supposed to align with.

   !important is load-bearing: the 20px is an inline style on the
   span, and nothing in a stylesheet outranks that without it.

   Declared on .rc-madein__img rather than the .usa-img hook, so
   it holds whether or not that class is on the element.
   ============================================================ */

@media (max-width:767px){
  body.rc-storefront .rc-madein__img,
  body.rc-storefront .usa-img{margin-left:0 !important}
}


/* ============================================================
   CONTACT HERO, UNFILTERED  (v1.36.0)

   Same decision as the homepage: the photograph runs at the
   brightness it was shot at. The rotated wordmark and the
   breadcrumb come out of the markup rather than being hidden
   here, since both are content, not styling.

   The .rc-cthero__v and .rc-cthero__crumb rules stay in the
   sheet. They cost nothing unused and the pattern is still
   wanted on the storefront, which shares this stylesheet.
   ============================================================ */

/* A short fade under the copy only. The photograph runs clean above it:
   the gradient is transparent by 56% of the frame, so the vessel and the
   water are untouched and only the band the title sits in is darkened.
   Without it the title measured 1.58:1 against white spray. */
body.rc-storefront .rc-cthero:before{
  background:linear-gradient(to top,
    rgba(10,14,20,.97) 0%,
    rgba(10,14,20,.88) 20%,
    rgba(10,14,20,.42) 40%,
    transparent 56%)}


/* ============================================================
   LEADERSHIP, MEDIA UNFILTERED  (v1.38.0)
   ============================================================ */

/* The page header scrim comes off here only, via a modifier on the
   section. .rc-vhero--page is shared with News, whose footage is bright
   daylight and whose headline measured 5.1:1 leaning on that fade. This
   page runs the operator loop, which is dark enough to carry the copy
   without help. Scoping is the difference between the two, not taste. */
/* Measured before shipping: with no cover at all the headline read 1.16:1
   over this footage. The operator loop is a bright daylight scene, white
   shirt and lit tent behind exactly where the copy sits, so the full wash
   came off but a short fade under the copy stays. Transparent by 60% of the
   frame, so the top two thirds of the shot are untouched. */
body.rc-storefront .rc-vhero--clean.rc-scrim:after{
  background:linear-gradient(to top,
    rgba(10,14,20,.95) 0%,
    rgba(10,14,20,.86) 22%,
    rgba(10,14,20,.5) 42%,
    transparent 60%)}
/* The header gets shorter as the screen narrows while the copy does not
   shrink with it, so the same stops leave the headline uncovered: it
   measured 1.76:1 at 768 and 1.13 at 390 on the 60% version. The fade
   reaches further up here, and only here. */
@media (max-width:1024px){
  body.rc-storefront .rc-vhero--clean.rc-scrim:after{
    background:linear-gradient(to top,
      rgba(10,14,20,.96) 0%,
      rgba(10,14,20,.9) 34%,
      rgba(10,14,20,.66) 62%,
      transparent 88%)}
}
/* On a phone the headline wraps to two lines and reaches most of the way up
   a short header, so the fade runs the full height. Still a gradient, still
   lighter at the top than the 82% wash this replaced. */
@media (max-width:767px){
  body.rc-storefront .rc-vhero--clean.rc-scrim:after{
    background:linear-gradient(to top,
      rgba(10,14,20,.96) 0%,
      rgba(10,14,20,.92) 45%,
      rgba(10,14,20,.8) 80%,
      rgba(10,14,20,.62) 100%)}
}
body.rc-storefront .rc-vhero--clean .rc-vhero__p{color:var(--rc-text)}

/* The closing band was running the video through grayscale(1) under an
   82% navy wash. Both go: the footage plays in colour at its own
   brightness, like every other clip on the site now.

   This reaches the About page too, which carries the same band. That is
   the same decision, not a side effect, but it is worth a look there. */
body.rc-storefront .rc-hband .rc-vid--tone video,
body.rc-storefront .rc-hband .rc-vid--tone img{filter:none}
/* The band's copy sits centrally, between 33% and 79% of the frame, so a
   bottom-up fade would have to cover most of it and would be a wash in all
   but name. An even wash it is, but a much lighter one and in colour: the
   grayscale is gone and 82% becomes 58%. */
body.rc-storefront .rc-hband .rc-vid--tone:after{background:rgba(10,14,20,.58)}

/* Copy in the band takes the heading colour, as in the header above. */
body.rc-storefront .rc-hband .rc-lede{color:var(--rc-text)}





/* ============================================================
   ABOUT  (v1.40.0)
   ============================================================ */

/* The heritage band's copy sat at --rc-body, a muted grey meant for text on
   a panel, not over footage. White, like the headline beside it.

   The band itself needed no scrim removal: the template already dropped
   .rc-vid--tone, so the greyscale and the 82% wash were never applying to
   this page. Checked before writing a rule that would have done nothing. */
body.rc-storefront .rc-hband .rc-duo p,
body.rc-storefront .rc-hband > .rc-inner p{color:var(--rc-text)}

/* v1.42.0: the cover that used to sit here is gone, and so is the video it
   covered. The band is copy on the page ground now, so there is nothing to
   read text against and nothing to darken. The rule is kept, dormant, for
   any .rc-hband that still carries footage. */
body.rc-storefront .rc-hband .rc-vid--bg:not(.rc-vid--tone):after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,14,20,0) 0%,
    rgba(10,14,20,.46) 24%,
    rgba(10,14,20,.78) 40%,
    rgba(10,14,20,.78) 66%,
    rgba(10,14,20,.46) 82%,
    rgba(10,14,20,0) 100%)}

/* ---- Built in America, centred ----
   The flag moves under the headline and the section reads as one centred
   column rather than a two-column split. Its own class, so .rc-duo stays
   left-aligned everywhere else it is used. */
body.rc-storefront .rc-built > .rc-inner{
  display:flex;flex-direction:column;align-items:center;text-align:center}
body.rc-storefront .rc-built .rc-ph2{margin:0}
/* The eyebrow is a flex row, so centring it needs the main axis, not
   text-align. */
body.rc-storefront .rc-built .rc-eyebrow{
  justify-content:center;margin:18px 0 0}
body.rc-storefront .rc-built__p{
  margin:clamp(20px,2.4vw,30px) auto 0;max-width:68ch;
  font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.75;color:var(--rc-body)}


/* ============================================================
   VARIANT 7, MEDIA UNFILTERED  (v1.41.0)

   Same treatment as the rest of the site, applied to the one
   page. Scoped to .rc-pband, which in this build is only the
   Variant 7 closing band and the retired Homepage A.
   ============================================================ */

/* The band carried two overlays stacked: its own 90deg gradient and the
   tone wash on the video, plus a grayscale and brightness filter. All
   three go, so the operator footage plays as shot. */
body.rc-storefront .rc-pband:after{background:none}
body.rc-storefront .rc-pband .rc-vid--tone video,
body.rc-storefront .rc-pband .rc-vid--tone img{filter:none}
body.rc-storefront .rc-pband .rc-vid--tone:after{background:none}

/* Copy over the footage goes white. The hero lede is matched to its own
   headline; .rc-scrim--soft pins this to the Variant 7 hero rather than
   every hero sharing .rc-vhero__p. */
body.rc-storefront .rc-pband .rc-lede{color:var(--rc-text)}

/* ---- cover, sized to where the copy actually sits ----

   Both measured unreadable with nothing over the footage: the hero
   headline 1.21:1, the band 1.17:1. capability-loop and operator-loop are
   both bright daylight.

   Hero copy occupies the bottom 60% to 87% of the frame, so the fade runs
   up from the bottom and is gone by 52%. Everything above the waterline of
   the shot is untouched.

   Scoped to .rc-scrim--soft, which is this hero only. The homepage hero
   wears .rc-vhero--wide and keeps its fully clean frame. */
body.rc-storefront .rc-vhero.rc-scrim--soft:after{
  background:linear-gradient(to top,
    rgba(10,14,20,.95) 0%,
    rgba(10,14,20,.9) 24%,
    rgba(10,14,20,.78) 38%,
    rgba(10,14,20,.44) 50%,
    transparent 62%)}
/* The hero shortens as the screen narrows while the copy does not, so the
   same stops leave the kicker, the topmost line, out in the open. */
@media (max-width:1024px){
  body.rc-storefront .rc-vhero.rc-scrim--soft:after{
    background:linear-gradient(to top,
      rgba(10,14,20,.96) 0%,
      rgba(10,14,20,.92) 34%,
      rgba(10,14,20,.74) 58%,
      rgba(10,14,20,.4) 76%,
      transparent 92%)}
}

/* A left-weighted gradient was the obvious shape, since the copy sits left
   at 1440. It fails as soon as the screen narrows: the copy spans to 59% of
   the band at 1440 but 81% at 1024, 96% at 768 and 94% at 390, so a cover
   that fades out by 86% leaves most of it bare. Measured at 1.0 to 1.1.

   Vertical instead. The copy occupies 21% to 83% of the band's height at
   every width, so the gradient is transparent at the top and bottom edges
   and solid across the middle. The sky and the water at the edges of the
   frame stay at full brightness. Same shape as the About band. */
/* v1.42.0: the video is out of this band, and .rc-pband:after paints over
   the section rather than over the footage, so with nothing behind it the
   gradient would only tint the page ground. Off. */
body.rc-storefront .rc-pband:after{background:none}
/* Without a full-bleed video the band no longer needs to fill half the
   viewport; it sizes to its copy like any other section. */
body.rc-storefront .rc-pband{min-height:0}

/* The kicker is accent blue at 11.5px, which needs 4.5:1 and cannot reach
   it over daylight footage at the accent's own luminance. White, with the
   rest of the copy over media. */
body.rc-storefront .rc-vhero.rc-scrim--soft .rc-vhero__k{color:var(--rc-text)}
body.rc-storefront .rc-vhero.rc-scrim--soft .rc-vhero__k:before{background:var(--rc-text)}


/* ============================================================
   REQUEST A DEMONSTRATION  (v1.59.0)

   Built from the agency mockup supplied 2026-09-25, with more air
   than the comp: Kendrick asked for extra whitespace, so section
   padding, the gap between the mission rail and the form, and the
   rhythm inside the form all run looser than the reference.

   Most of this page is existing components. .rc-caps/.rc-cap__i,
   .rc-chain and .rc-ev already existed and are reused as-is; only
   the hero, the split band, the spec strip and the event cards are
   new, plus the form styling further down.
   ============================================================ */

/* ---------- hero ---------- */
body.rc-storefront .rc-dhero{
  position:relative;isolation:isolate;overflow:hidden;width:100%;
  min-height:clamp(380px,52vh,560px);
  display:flex;align-items:center;
  padding:clamp(64px,8vw,120px) clamp(22px,4vw,56px);
  border-bottom:1px solid var(--rc-line);
  background-image:url('assets/img/demo-hero.jpg');
  background-size:cover;background-position:center center;background-repeat:no-repeat}
@media (max-width:767px){
  /* Portrait crops toward the vessel; slide back to open water so the
     headline and the line under it keep their contrast. */
  body.rc-storefront .rc-dhero{background-position:22% center}
}
body.rc-storefront .rc-dhero > .rc-inner{max-width:1460px}
/* The eyebrow is accent blue everywhere else, which works on the page
   ground. Over this photograph it measured 1.56 to 1.78:1 at 12px against
   a 4.5 requirement, so on this hero only it goes white. The rule beside
   it stays accent: it is decoration, not text. */
body.rc-storefront .rc-dhero .rc-eyebrow{color:var(--rc-text)}
body.rc-storefront .rc-dhero .rc-eyebrow:before{background:var(--rc-accent)}
body.rc-storefront .rc-dhero__h{
  margin:0 0 18px;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;
  font-size:clamp(40px,6.4vw,76px);color:var(--rc-text);max-width:16ch}
body.rc-storefront .rc-dhero__p{
  margin:0;max-width:52ch;color:var(--rc-text);
  font-size:clamp(15.5px,1.6vw,18px);line-height:1.7}

/* ---------- mission rail + form, side by side ---------- */
body.rc-storefront .rc-dsplit{
  display:grid;gap:clamp(36px,4.4vw,72px);width:100%;align-items:start}
@media (min-width:1000px){
  /* The comp runs these closer together. The wider gutter is the main
     place the extra whitespace Kendrick asked for actually lands. */
  body.rc-storefront .rc-dsplit{grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr)}
}
body.rc-storefront .rc-dmiss__h{
  margin:0 0 14px;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;line-height:1.08;
  font-size:clamp(26px,3vw,38px);color:var(--rc-text)}
body.rc-storefront .rc-dmiss__p{
  margin:0 0 clamp(24px,2.6vw,34px);color:var(--rc-body);
  font-size:15px;line-height:1.75;max-width:34ch}
body.rc-storefront .rc-dmiss__l{list-style:none;margin:0;padding:0;display:grid;gap:14px}
body.rc-storefront .rc-dmiss__i{
  display:flex;align-items:center;gap:20px;
  border:1px solid var(--rc-line);border-radius:6px;background:var(--rc-panel);
  padding:20px 26px;transition:border-color .18s,background .18s}
/* The comp puts these icons on their own, not in the bordered square the
   rest of the site uses for .rc-cap__i. They are also much larger: the box
   treatment shrinks the glyph to fit, which is why the first pass read as a
   smudge. Unboxed and at 46px they carry the row. The event cards further
   down keep the boxed treatment, which is what the comp shows there. */
body.rc-storefront .rc-dmiss__ic{
  flex:0 0 auto;width:50px;height:50px;
  display:flex;align-items:center;justify-content:center;
  color:var(--rc-accent)}
/* Explicit px, not 100%. As a flex item the svg was resolving to 25x46
   instead of filling the box, so the glyph came out half the size it
   should have been. flex:none keeps it from being shrunk again. */
body.rc-storefront .rc-dmiss__ic svg{
  flex:none;width:50px;height:50px;display:block}
body.rc-storefront .rc-dev .rc-cap__i{
  width:46px;height:46px;margin-bottom:0;flex:0 0 auto;border-radius:3px}
body.rc-storefront .rc-dev .rc-cap__i svg{width:23px;height:23px}
/* :not() matters here. The icon is also a span inside .rc-dmiss__i, so the
   bare descendant selector was painting it --rc-text instead of accent and
   giving it the label's left divider, which put a stray rule at the card's
   leading edge. */
body.rc-storefront .rc-dmiss__i span:not(.rc-dmiss__ic){
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.2;
  font-size:14.5px;color:var(--rc-text);
  padding-left:20px;border-left:1px solid var(--rc-line2);align-self:stretch;
  display:flex;align-items:center}

/* ---------- specifications strip ---------- */
body.rc-storefront .rc-dspecs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rc-line);
  border:1px solid var(--rc-line2);width:100%}
@media (min-width:860px){
  body.rc-storefront .rc-dspecs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
body.rc-storefront .rc-dspec{
  background:var(--rc-bg);padding:clamp(22px,2.6vw,34px) clamp(18px,2vw,26px);
  text-align:center;display:flex;flex-direction:column;gap:6px}
body.rc-storefront .rc-dspec b{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;line-height:1;letter-spacing:.01em;
  font-size:clamp(24px,2.8vw,34px);color:var(--rc-text)}
body.rc-storefront .rc-dspec span{
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rc-dim)}
body.rc-storefront .rc-dspecs__note{
  margin:14px 0 0;width:100%;text-align:right;
  font-family:var(--rc-mono);font-size:11px;letter-spacing:.04em;color:var(--rc-dim)}

/* ---------- upcoming demonstrations ---------- */
body.rc-storefront .rc-devs{
  display:grid;gap:clamp(16px,2vw,24px);width:100%;margin-top:clamp(28px,3vw,40px)}
@media (min-width:860px){
  body.rc-storefront .rc-devs{grid-template-columns:1.6fr 1fr}
}
body.rc-storefront .rc-dev{
  display:flex;align-items:center;gap:20px;text-decoration:none;
  border:1px solid var(--rc-line);border-radius:6px;background:var(--rc-panel);
  padding:clamp(20px,2.2vw,28px);transition:border-color .18s}
body.rc-storefront a.rc-dev:hover{border-color:var(--rc-accent)}
body.rc-storefront .rc-dev__b{display:flex;flex-direction:column;gap:5px;min-width:0}
body.rc-storefront .rc-dev__n{
  font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.2;
  font-size:clamp(14px,1.5vw,17px);color:var(--rc-text)}
body.rc-storefront .rc-dev__p{font-size:13.5px;line-height:1.6;color:var(--rc-body)}
body.rc-storefront .rc-dev__go{
  margin-left:auto;flex:0 0 auto;color:var(--rc-accent);display:flex;align-items:center}
body.rc-storefront a.rc-dev:hover .rc-dev__go{color:var(--rc-accent-hi)}

/* ---------- the WPForms form, scoped ----------

   Every rule below is behind .rc-demform on purpose.

   The theme carries no global WPForms styling: it was all removed in
   v1.43 because Kendrick maintains the Contact form's look himself,
   and anything global here would fight his rules. This page needed the
   comp's treatment, so the styling exists but cannot leak. /contact/
   renders exactly as it did before.

   Nothing here sets a background-image or --wpforms-background-url.
   That variable is what put Elementor's placeholder.png behind the
   Contact form once already. */

body.rc-storefront .rc-demform{
  width:100%;border:1px solid var(--rc-line2);border-radius:8px;
  background:var(--rc-panel);padding:clamp(28px,3.4vw,52px)}
body.rc-storefront .rc-demform__h{
  margin:0 0 10px;font-family:var(--rc-display);font-weight:var(--rc-display-weight);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.12;
  font-size:clamp(22px,2.6vw,32px);color:var(--rc-text)}
body.rc-storefront .rc-demform__p{
  margin:0 0 clamp(26px,3vw,38px);font-size:14.5px;line-height:1.75;
  color:var(--rc-body);max-width:62ch}
body.rc-storefront .rc-demform__note{
  margin:18px 0 0;font-family:var(--rc-mono);font-size:11.5px;
  letter-spacing:.04em;line-height:1.6;color:var(--rc-dim)}

/* The form renders with wpforms-render-modern, which is driven by these
   custom properties. Setting them is steadier than fighting the plugin's
   own selectors rule by rule. */
body.rc-storefront .rc-demform .wpforms-container-full{
  --wpforms-field-border-radius:4px;
  --wpforms-field-background-color:var(--rc-bg);
  --wpforms-field-border-color:var(--rc-line2);
  --wpforms-field-text-color:var(--rc-text);
  --wpforms-label-color:var(--rc-dim);
  --wpforms-label-sublabel-color:var(--rc-dim);
  --wpforms-label-error-color:#FF6B6B;
  --wpforms-button-background-color:var(--rc-accent);
  --wpforms-button-border-color:var(--rc-accent);
  --wpforms-button-text-color:var(--rc-on-accent);
  --wpforms-button-border-radius:4px;
  margin:0;padding:0;background:none}

body.rc-storefront .rc-demform div.wpforms-container-full .wpforms-field{
  padding:0;margin:0 0 clamp(18px,2vw,24px)}

body.rc-storefront .rc-demform div.wpforms-container-full .wpforms-field-label{
  display:block;margin:0 0 9px;
  font-family:var(--rc-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:400;color:var(--rc-dim)}
body.rc-storefront .rc-demform div.wpforms-container-full .wpforms-required-label{
  color:var(--rc-accent);border:0}

body.rc-storefront .rc-demform div.wpforms-container-full input[type=text],
body.rc-storefront .rc-demform div.wpforms-container-full input[type=email],
body.rc-storefront .rc-demform div.wpforms-container-full input[type=tel],
body.rc-storefront .rc-demform div.wpforms-container-full input[type=url],
body.rc-storefront .rc-demform div.wpforms-container-full select,
body.rc-storefront .rc-demform div.wpforms-container-full textarea{
  width:100%;max-width:100%;box-sizing:border-box;
  background:var(--rc-bg);border:1px solid var(--rc-line2);border-radius:4px;
  color:var(--rc-text);font-family:var(--rc-mono);font-size:14px;line-height:1.5;
  padding:13px 15px;height:auto;box-shadow:none;
  transition:border-color .15s,box-shadow .15s}
body.rc-storefront .rc-demform div.wpforms-container-full textarea{
  min-height:150px;resize:vertical;padding-top:14px}

body.rc-storefront .rc-demform div.wpforms-container-full input::placeholder,
body.rc-storefront .rc-demform div.wpforms-container-full textarea::placeholder{
  color:var(--rc-dim);opacity:1}

body.rc-storefront .rc-demform div.wpforms-container-full input:focus,
body.rc-storefront .rc-demform div.wpforms-container-full select:focus,
body.rc-storefront .rc-demform div.wpforms-container-full textarea:focus{
  outline:none;border-color:var(--rc-accent);
  box-shadow:0 0 0 3px var(--rc-accent-soft)}

/* Keyboard users get the same ring the mouse path gets. */
body.rc-storefront .rc-demform div.wpforms-container-full :focus-visible{
  outline:2px solid var(--rc-accent);outline-offset:2px}

/* The select keeps the plugin's arrow; it just needs to stop being black
   on a dark field, and needs room so the text never runs under it. */
body.rc-storefront .rc-demform div.wpforms-container-full select{
  padding-right:42px;color:var(--rc-text);
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--rc-dim) 50%),
                   linear-gradient(135deg,var(--rc-dim) 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
body.rc-storefront .rc-demform div.wpforms-container-full select option{
  background:var(--rc-bg);color:var(--rc-text)}

/* Two-up rows come from the form's own Layout field. The plugin's gutter
   is tighter than the comp; this opens it up and stacks on narrow. */
body.rc-storefront .rc-demform div.wpforms-container-full .wpforms-layout-row{
  display:grid;grid-template-columns:1fr;gap:0 clamp(18px,2.2vw,28px)}
@media (min-width:600px){
  body.rc-storefront .rc-demform div.wpforms-container-full .wpforms-layout-row{
    grid-template-columns:repeat(2,minmax(0,1fr))}
}
body.rc-storefront .rc-demform div.wpforms-container-full .wpforms-layout-column{
  width:auto;float:none;padding:0;margin:0}

body.rc-storefront .rc-demform div.wpforms-container-full .wpforms-submit-container{
  padding:0;margin:clamp(6px,1vw,10px) 0 0}
body.rc-storefront .rc-demform div.wpforms-container-full button.wpforms-submit{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--rc-accent);border:1px solid var(--rc-accent);border-radius:4px;
  color:var(--rc-on-accent);font-family:var(--rc-mono);font-size:12.5px;
  letter-spacing:.22em;text-transform:uppercase;font-weight:400;
  padding:17px 26px;cursor:pointer;box-shadow:none;
  transition:background .15s,border-color .15s}
body.rc-storefront .rc-demform div.wpforms-container-full button.wpforms-submit:hover{
  background:var(--rc-accent-hi);border-color:var(--rc-accent-hi)}
body.rc-storefront .rc-demform div.wpforms-container-full button.wpforms-submit:after{
  content:"";width:16px;height:9px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h14M10 1l4 3.5L10 8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4.5h14M10 1l4 3.5L10 8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/contain}

/* Validation and confirmation, kept in the page's own palette. */
body.rc-storefront .rc-demform div.wpforms-container-full label.wpforms-error{
  margin-top:7px;font-family:var(--rc-mono);font-size:11.5px;letter-spacing:.04em;
  text-transform:none;color:#FF8080}
body.rc-storefront .rc-demform div.wpforms-container-full input.wpforms-error,
body.rc-storefront .rc-demform div.wpforms-container-full select.wpforms-error,
body.rc-storefront .rc-demform div.wpforms-container-full textarea.wpforms-error{
  border-color:#FF6B6B}
body.rc-storefront .rc-demform .wpforms-confirmation-container-full{
  background:var(--rc-ink);border:1px solid var(--rc-accent);border-radius:6px;
  color:var(--rc-text);padding:22px 24px;margin:0}
  
  /* Optional texture for individual containers */
.rc-texture {
  position: relative;
  isolation: isolate;
}

.rc-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;

  background-image:
    radial-gradient(
      ellipse at 50% 45%,
      transparent 52%,
      rgba(0, 0, 0, 0.55) 100%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.02) 0px 1px,
      transparent 1px 3px
    ),
    linear-gradient(
      rgba(61, 125, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(61, 125, 255, 0.025) 1px,
      transparent 1px
    );

  background-size:
    100% 100%,
    100% 3px,
    72px 72px,
    72px 72px;
}