/* ======================================================================
   RECILENS — enterprise.css
   The systems the platform needs beyond the page templates: scrolling,
   the mobile menu, floating actions, the currency strip, the world map,
   team cards, and the page-transition curtain.

   Depends on tokens.css and brand.css. Defines no colour of its own, and
   keeps the rule that the four rays are strokes and rules only.
   ====================================================================== */

/* ----------------------------------------------------------------------
   SCROLLING
   The default bar is a platform artefact on a page like this. It is
   replaced with a thin one that uses the ink colour, rather than hidden:
   a scrollbar you cannot see is a page whose length you cannot judge, and
   on Windows the track is the only cue that a panel scrolls at all.
   ---------------------------------------------------------------------- */
html{ scroll-behavior:smooth; scrollbar-width:thin;
      scrollbar-color:color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius:999px; border:3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--ink) 34%, transparent); }

/* Anything with its own scroll keeps a hairline bar. */
.rc-modal::-webkit-scrollbar,.rc-tablewrap::-webkit-scrollbar{ width:6px; height:6px; }
.rc-modal::-webkit-scrollbar-thumb,.rc-tablewrap::-webkit-scrollbar-thumb{
  border:0; background:var(--hairline);
}

/* Anchor targets clear the sticky header. */
:target,[id]{ scroll-margin-top:96px; }

/* ----------------------------------------------------------------------
   MOBILE MENU — a full sheet, not a squeezed dropdown
   ---------------------------------------------------------------------- */
.rc-burger{
  display:none; width:44px; height:44px; padding:0; border:0; cursor:pointer;
  background:transparent; position:relative; border-radius:var(--r-sm);
}
.rc-burger:focus-visible{ outline:2px solid var(--ray-sec); outline-offset:2px; }
.rc-burger span{
  position:absolute; left:11px; width:22px; height:2px; background:var(--ink);
  border-radius:2px; transition:transform var(--t-md) var(--ease),
    opacity var(--t-xs) linear, top var(--t-md) var(--ease);
}
.rc-burger span:nth-child(1){ top:15px; }
.rc-burger span:nth-child(2){ top:21px; }
.rc-burger span:nth-child(3){ top:27px; }
.rc-burger[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.rc-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.rc-burger[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

.rc-sheet{
  position:fixed; inset:0; z-index:var(--z-modal);
  width:100dvw; height:100dvh;
  background:var(--paper); color:var(--ink);
  padding:calc(16px + env(safe-area-inset-top)) var(--gutter)
          calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateY(-8px); opacity:0; visibility:hidden;
  transition:opacity var(--t-md) var(--ease), transform var(--t-md) var(--ease),
             visibility 0s linear var(--t-md);
}
.rc-sheet[data-open="1"]{
  opacity:1; transform:none; visibility:visible; transition-delay:0s;
}
.rc-sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; border-bottom:1px solid var(--hairline);
}
.rc-sheet nav{ display:grid; gap:0; margin-top:8px; }
.rc-sheet nav a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 0; min-height:52px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--hairline-2);
  font-size:var(--fs-20);
  /* Each row enters on its own beat once the sheet opens. */
  opacity:0; transform:translateY(8px);
}
.rc-sheet[data-open="1"] nav a{
  opacity:1; transform:none;
  transition:opacity var(--t-md) var(--ease), transform var(--t-md) var(--ease);
}
.rc-sheet[data-open="1"] nav a:nth-child(1){ transition-delay:40ms; }
.rc-sheet[data-open="1"] nav a:nth-child(2){ transition-delay:80ms; }
.rc-sheet[data-open="1"] nav a:nth-child(3){ transition-delay:120ms; }
.rc-sheet[data-open="1"] nav a:nth-child(4){ transition-delay:160ms; }
.rc-sheet[data-open="1"] nav a:nth-child(5){ transition-delay:200ms; }
.rc-sheet[data-open="1"] nav a:nth-child(6){ transition-delay:240ms; }
.rc-sheet[data-open="1"] nav a:nth-child(7){ transition-delay:280ms; }
.rc-sheet[data-open="1"] nav a:nth-child(8){ transition-delay:320ms; }
.rc-sheet nav a span{ color:var(--ink-3); font-size:var(--fs-12); }
.rc-sheet nav a:hover,.rc-sheet nav a:focus-visible{ color:var(--ray-sec); }
.rc-sheet-cta{ margin-top:24px; display:grid; gap:10px; }
.rc-sheet-meta{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--hairline);
  color:var(--ink-2); font-size:var(--fs-14); display:grid; gap:6px;
}
@media (max-width:1023px){
  .rc-burger{ display:block; }
}
@media (min-width:1024px){
  .rc-sheet{ display:none; }
}
html.rc-locked{ overflow:hidden; }

/* ----------------------------------------------------------------------
   FLOATING ACTIONS — one stack, fixed, never in flow
   ---------------------------------------------------------------------- */
.rc-float{
  position:fixed; z-index:var(--z-float);
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + var(--rc-banner-h,0px) + env(safe-area-inset-bottom));
  display:grid; gap:10px; justify-items:end;
}
html[data-modal="open"] .rc-float,
html[data-sheet="open"] .rc-float{ visibility:hidden; }

.rc-fab{
  width:56px; height:56px; border-radius:50%; cursor:pointer;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink);
  display:grid; place-items:center;
  transition:transform var(--t-sm) var(--ease-spring),
             background var(--t-sm) var(--ease);
}
.rc-fab:hover{ transform:translateY(-3px) scale(1.04); }
.rc-fab:focus-visible{ outline:2px solid var(--ray-sec); outline-offset:3px; }
.rc-fab svg{ width:22px; height:22px; }
@media (max-width:400px){ .rc-fab{ width:52px; height:52px; } }

.rc-float-panel{
  width:min(292px,calc(100dvw - 32px));
  background:var(--paper); color:var(--ink);
  border:1px solid var(--hairline); border-radius:var(--r-md);
  box-shadow:0 24px 64px rgba(10,10,10,.14);
  padding:16px; display:grid; gap:8px;
  transform-origin:100% 100%;
  transform:scale(.94) translateY(8px); opacity:0; visibility:hidden;
  transition:opacity var(--t-sm) var(--ease), transform var(--t-sm) var(--ease-spring),
             visibility 0s linear var(--t-sm);
}
.rc-float[data-open="1"] .rc-float-panel{
  opacity:1; transform:none; visibility:visible; transition-delay:0s;
}
.rc-float-panel h2{
  font-family:var(--font-body); font-size:var(--fs-14); font-weight:700; margin:0 0 4px;
}
.rc-float-opt{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px; min-height:52px; text-align:left; cursor:pointer;
  background:transparent; color:var(--ink); font:inherit;
  border:1px solid var(--hairline); border-radius:var(--r-sm);
  transition:border-color var(--t-xs) var(--ease), transform var(--t-xs) var(--ease);
  text-decoration:none;
}
.rc-float-opt:hover{ border-color:var(--ray-sec); transform:translateX(2px); }
.rc-float-opt svg{ width:20px; height:20px; flex:0 0 auto; color:var(--ink-2); }
.rc-float-opt b{ display:block; font-size:var(--fs-14); }
.rc-float-opt small{ color:var(--ink-3); font-size:var(--fs-12); }
.rc-float-note{
  font-size:var(--fs-12); color:var(--ink-3);
  border-top:1px solid var(--hairline); padding-top:8px; margin:4px 0 0;
}

/* ----------------------------------------------------------------------
   CURRENCY STRIP
   ---------------------------------------------------------------------- */
.rc-currency{
  margin-top:32px; padding:20px 22px; border-radius:var(--r-md);
  background:var(--paper); border:1px solid var(--hairline);
  border-left:3px solid var(--ray-sec); max-width:none;
  display:grid; gap:12px;
}
.rc-currency-row{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline; }
.rc-currency-label{
  font-size:var(--fs-12); font-weight:700; color:var(--ink);
  min-width:88px; letter-spacing:.02em;
}
.rc-currency-list{
  display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0;
}
.rc-currency-list li{
  font-size:var(--fs-12); font-variant-numeric:tabular-nums;
  padding:3px 9px; border:1px solid var(--hairline); border-radius:999px;
  color:var(--ink-2); transition:border-color var(--t-xs) var(--ease),
    color var(--t-xs) var(--ease);
}
.rc-currency-list li:hover{ border-color:var(--ray-sec); color:var(--ink); }
.rc-currency-rails li{ border-style:dashed; }
.rc-currency-terms{
  margin:0; font-size:var(--fs-12); color:var(--ink-2);
  padding-top:10px; border-top:1px solid var(--hairline-2);
}

/* ----------------------------------------------------------------------
   WORLD MAP — drawn, not rendered
   ---------------------------------------------------------------------- */
.rc-map{ width:100%; margin-top:8px; }
.rc-map svg{ display:block; width:100%; height:auto; }
.rc-map-land path{ fill:color-mix(in srgb, var(--ink) 3%, transparent); }
.rc-hub-label{
  font-family:var(--font-body); font-size:13px; font-weight:600; fill:var(--ink);
}
.rc-hub-sub{ font-family:var(--font-body); font-size:11px; fill:var(--ink-3); }
.rc-hub-ring{ transform-origin:center; transform-box:fill-box; }
[data-motion="a"] .rc-hub-ring,[data-motion="b"] .rc-hub-ring{
  animation:rc-ping 2.8s var(--ease) infinite;
}
.rc-hub:nth-child(2) .rc-hub-ring{ animation-delay:.5s; }
.rc-hub:nth-child(3) .rc-hub-ring{ animation-delay:1s; }
.rc-hub:nth-child(4) .rc-hub-ring{ animation-delay:1.5s; }
@keyframes rc-ping{
  0%,70%,100%{ transform:scale(1); opacity:.85; }
  35%{ transform:scale(1.35); opacity:.25; }
}
/* The arcs travel rather than merely existing. */
[data-motion="a"] .rc-arc,[data-motion="b"] .rc-arc{
  stroke-dasharray:10 320; animation:rc-travel 4.5s linear infinite;
}
.rc-arc:nth-child(2){ animation-delay:1.2s; }
.rc-arc:nth-child(3){ animation-delay:2.4s; }
@keyframes rc-travel{ to{ stroke-dashoffset:-330; } }
[data-motion="c"] .rc-arc{ stroke-dasharray:none; opacity:.5; }

/* ----------------------------------------------------------------------
   TEAM AND LEADERSHIP
   ---------------------------------------------------------------------- */
.rc-team{ display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.rc-team > *{ min-width:0; }
.rc-person{
  border:1px solid var(--hairline); border-radius:var(--r-md);
  background:var(--paper); overflow:hidden; position:relative;
  transition:transform var(--t-sm) var(--ease), border-color var(--t-sm) var(--ease);
}
.rc-person:hover{ transform:translateY(-4px); border-color:var(--ink); }
.rc-person-photo{
  aspect-ratio:4/5; overflow:hidden; background:var(--paper-3); position:relative;
}
.rc-person-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05);
  transition:filter var(--t-md) var(--ease), transform var(--t-md) var(--ease);
}
.rc-person:hover .rc-person-photo img{ filter:none; transform:scale(1.04); }
/* Where there is no photograph yet, a drawn monogram rather than a grey box. */
.rc-person-mono{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); font-size:var(--fs-49); color:var(--ink-3);
}
.rc-person-mono::after{
  content:""; position:absolute; inset:16px;
  border:1.5px solid var(--ray-sec); border-radius:50%;
  opacity:.5;
}
.rc-person-body{ padding:16px; display:grid; gap:4px; }
.rc-person-name{ font-size:var(--fs-16); font-weight:600; margin:0; }
.rc-person-role{ font-size:var(--fs-12); color:var(--ink-2); margin:0; }
.rc-person-line{ font-size:var(--fs-14); color:var(--ink-2); margin:8px 0 0; }

.rc-achievements{ display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.rc-achievements > *{ min-width:0; }
.rc-ach{
  padding:20px; border:1px solid var(--hairline); border-radius:var(--r-md);
  border-top:3px solid var(--ray-sec); background:var(--paper);
}
.rc-ach b{ display:block; font-size:var(--fs-14); margin-bottom:4px; }
.rc-ach span{ color:var(--ink-2); font-size:var(--fs-14); }

/* ----------------------------------------------------------------------
   PAGE TRANSITION — a hairline curtain, not a spinner
   ---------------------------------------------------------------------- */
.rc-curtain{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:var(--z-toast);
  background:linear-gradient(90deg,
    var(--ray-b) 0 25%, var(--ray-g) 25% 50%,
    var(--ray-y) 50% 75%, var(--ray-r) 75% 100%);
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none;
  opacity:0;
}
.rc-curtain.is-loading{
  opacity:1; transform:scaleX(.7);
  transition:transform 900ms cubic-bezier(.2,.8,.2,1), opacity 120ms linear;
}
.rc-curtain.is-done{
  opacity:0; transform:scaleX(1);
  transition:transform 220ms var(--ease), opacity 260ms linear 160ms;
}
@media (prefers-reduced-motion:reduce){ .rc-curtain{ display:none; } }

@view-transition{ navigation:auto; }

/* ----------------------------------------------------------------------
   MODAL — shorter, with the actions always reachable
   ---------------------------------------------------------------------- */
.rc-modal{
  max-height:min(86dvh,620px);
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:grid; grid-template-rows:auto 1fr auto; gap:0;
  padding:0;
}
.rc-modal-head{
  position:sticky; top:0; z-index:2; background:var(--paper);
  padding:22px 24px 14px; border-bottom:1px solid var(--hairline);
}
.rc-modal-body{ padding:18px 24px; overflow-y:auto; overscroll-behavior:contain; }
.rc-modal-foot{
  position:sticky; bottom:0; z-index:2; background:var(--paper);
  padding:14px 24px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hairline);
  display:grid; gap:8px;
}
.rc-modal-title{ font-size:var(--fs-25); padding-top:12px; }
.rc-modal-sub{ margin-top:4px; }
.rc-lead-form{ gap:14px; margin-top:0; }

/* ----------------------------------------------------------------------
   MICRO-INTERACTIONS
   ---------------------------------------------------------------------- */
.rc-chip,.rc-badge,.rc-btn,.rc-link,.rc-person,.rc-card,.rc-ach,
.rc-currency-list li,.rc-float-opt{ will-change:auto; }

.rc-badge{ transition:border-color var(--t-xs) var(--ease); }
.rc-badge:hover{ border-color:var(--ray-sec); }

/* A control that can be pressed says so before it is pressed. */
.rc-btn:active,.rc-float-opt:active,.rc-fab:active{ transform:translateY(1px); }

/* Focus is never invisible, anywhere. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ray-sec); outline-offset:2px; border-radius:2px;
}

/* The opener floats at the top-right on mobile, clear of the legacy nav's
   own toggle, which is hidden because it drives markup we no longer use. */
.rc-burger{
  position:fixed; top:calc(8px + env(safe-area-inset-top));
  right:calc(8px + env(safe-area-inset-right));
  z-index:var(--z-nav); background:var(--paper);
  border:1px solid var(--hairline); border-radius:var(--r-sm);
}
@media (max-width:1023px){
  .rc-navbar-menu-toggle,.rc-navbar-hamburger,.rc-navbar-toggle{ display:none !important; }
}
.rc-sheet-x{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--hairline);
  border-radius:var(--r-sm); color:var(--ink);
}
.rc-sheet-x:hover{ border-color:var(--ray-sec); }
.rc-sheet-x svg{ width:20px; height:20px; }

/* ----------------------------------------------------------------------
   BACK TO TOP — appears after one screen, never before
   ---------------------------------------------------------------------- */
.rc-totop{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--hairline);
  display:grid; place-items:center;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--t-sm) var(--ease), transform var(--t-sm) var(--ease),
             border-color var(--t-sm) var(--ease);
}
.rc-totop.is-on{ opacity:1; transform:none; pointer-events:auto; }
.rc-totop:hover{ border-color:var(--ray-sec); transform:translateY(-2px); }
.rc-totop svg{ width:18px; height:18px; }

/* ----------------------------------------------------------------------
   BLOG — magazine layout, with the things a post needs
   ---------------------------------------------------------------------- */
.rc-post-hero{ display:grid; gap:32px; align-items:start; }
@media (min-width:1024px){
  .rc-post-hero{ grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:48px; }
}
.rc-post-hero > *{ min-width:0; }
.rc-post-h1{
  font-family:var(--font-display); font-weight:400; line-height:1.02;
  font-size:var(--fs-49); margin:12px 0 0; text-wrap:balance; max-width:20ch;
}
@media (min-width:1024px){ .rc-post-h1{ font-size:var(--fs-61); } }
.rc-post-meta{
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--hairline);
  font-size:var(--fs-12); color:var(--ink-2);
}
.rc-post-meta b{ color:var(--ink); font-weight:600; }
.rc-post-tags{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:16px 0 0; padding:0; }
.rc-post-tags li a{
  display:inline-block; font-size:var(--fs-12); padding:4px 10px;
  border:1px solid var(--hairline); border-radius:999px;
  color:var(--ink-2); text-decoration:none;
  transition:border-color var(--t-xs) var(--ease), color var(--t-xs) var(--ease);
}
.rc-post-tags li a:hover{ border-color:var(--ray-sec); color:var(--ink); }
.rc-post-cover{
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--hairline);
  aspect-ratio:16/10; background:var(--paper-3);
}
.rc-post-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
/* No cover image yet: a drawn plate rather than a grey rectangle. */
.rc-post-plate{
  width:100%; height:100%; display:grid; place-items:center;
  background:
    linear-gradient(to right, var(--hairline-2) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(to bottom, var(--hairline-2) 1px, transparent 1px) 0 0/48px 48px;
}
.rc-post-plate svg{ width:52%; height:auto; }

/* The article column and its sidebar. */
.rc-article{ display:grid; gap:40px; }
@media (min-width:1024px){
  .rc-article{ grid-template-columns:minmax(0,1fr) 260px; gap:56px; }
}
.rc-article > *{ min-width:0; }
.rc-aside{ position:sticky; top:96px; align-self:start; display:grid; gap:20px; }
.rc-aside h2{
  font-family:var(--font-body); font-size:var(--fs-12); font-weight:700;
  letter-spacing:.06em; margin:0 0 10px;
}
.rc-aside ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.rc-aside a{ color:var(--ink-2); text-decoration:none; font-size:var(--fs-14); }
.rc-aside a:hover{ color:var(--ink); }
.rc-aside-block{
  border:1px solid var(--hairline); border-left:3px solid var(--ray-sec);
  border-radius:var(--r-md); padding:16px;
}

/* A video post keeps the player beside the text at desktop width. */
.rc-post-video{ display:grid; gap:24px; }
@media (min-width:1024px){
  .rc-post-video{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); align-items:start; }
}
.rc-post-video > *{ min-width:0; }
.rc-post-video .rc-video{ position:sticky; top:96px; }


/* ----------------------------------------------------------------------
   TEAM - the real photographs, given room
   ---------------------------------------------------------------------- */
.rc-team-lead{ margin:0; }
.rc-team-lead img{
  width:100%; height:auto; display:block; border-radius:var(--r-md);
  border:1px solid var(--hairline);
}
.rc-team-lead figcaption{
  margin-top:10px; font-size:var(--fs-12); color:var(--ink-2);
  padding-left:12px; border-left:2px solid var(--ray-sec);
}
.rc-team-2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.rc-person-lg .rc-person-photo{ aspect-ratio:3/4; }
.rc-person-lg .rc-person-name{ font-size:var(--fs-20); }

/* Registration marks: greyscale at rest so they do not shout. */
.rc-marks{
  display:flex; flex-wrap:wrap; gap:28px; align-items:center;
  list-style:none; margin:32px 0 0; padding:0;
}
.rc-marks img{
  height:52px; width:auto; filter:grayscale(1); opacity:.6;
  transition:filter var(--t-sm) var(--ease), opacity var(--t-sm) var(--ease);
}
.rc-marks img:hover{ filter:none; opacity:1; }

/* ----------------------------------------------------------------------
   CLIENT LOGOS
   ---------------------------------------------------------------------- */
.rc-clients{
  display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center;
  list-style:none; margin:24px 0 0; padding:0;
}
.rc-clients li{ display:flex; align-items:center; gap:12px; }
.rc-clients img{
  height:44px; width:auto; filter:grayscale(1); opacity:.65;
  transition:filter var(--t-sm) var(--ease), opacity var(--t-sm) var(--ease),
             transform var(--t-sm) var(--ease);
}
.rc-clients li:hover img{ filter:none; opacity:1; transform:translateY(-2px); }
.rc-clients span{ font-size:var(--fs-12); color:var(--ink-3); }

/* ----------------------------------------------------------------------
   LANGUAGE SWITCHER
   ---------------------------------------------------------------------- */
.rc-lang{ position:fixed; top:calc(10px + env(safe-area-inset-top));
  right:calc(72px + env(safe-area-inset-right)); z-index:var(--z-nav); }
@media (min-width:1024px){ .rc-lang{ right:calc(16px + env(safe-area-inset-right)); } }
.rc-lang-btn{
  display:inline-flex; align-items:center; gap:7px;
  min-height:40px; padding:6px 12px; cursor:pointer;
  background:var(--paper); color:var(--ink); font:inherit;
  font-size:var(--fs-14);
  border:1px solid var(--hairline); border-radius:999px;
  transition:border-color var(--t-xs) var(--ease);
}
.rc-lang-btn:hover{ border-color:var(--ray-sec); }
.rc-lang-btn svg{ width:16px; height:16px; }
.rc-lang-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:200px; padding:6px;
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--r-md); box-shadow:0 20px 48px rgba(10,10,10,.12);
  display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t-sm) var(--ease), transform var(--t-sm) var(--ease),
             visibility 0s linear var(--t-sm);
}
.rc-lang[data-open="1"] .rc-lang-menu{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
.rc-lang-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-height:40px; padding:8px 10px; cursor:pointer;
  background:transparent; border:0; border-radius:var(--r-sm);
  color:var(--ink); font:inherit; font-size:var(--fs-14); text-align:left;
}
.rc-lang-menu button:hover{ background:var(--paper-2); }
.rc-lang-menu button[aria-current="true"]{ font-weight:600; }
.rc-lang-menu button span{ color:var(--ink-3); font-size:var(--fs-12); }
.rc-lang-note{
  margin:4px 6px 2px; padding-top:8px;
  border-top:1px solid var(--hairline);
  font-size:var(--fs-12); color:var(--ink-3);
}


/* ----------------------------------------------------------------------
   LEAD MODAL - shorter again
   The panel was 620px tall with 24px padding all round and a 3-row
   textarea. On a 900px screen that is most of the viewport for four
   fields. Tighter padding, a 2-row textarea and a 540px cap put the
   submit button on screen without scrolling at any common height.
   ---------------------------------------------------------------------- */
.rc-modal{ max-height:min(82dvh,540px); width:min(440px,100%); }
.rc-modal-head{ padding:18px 20px 12px; }
.rc-modal-body{ padding:14px 20px; }
.rc-modal-foot{ padding:12px 20px calc(14px + env(safe-area-inset-bottom)); }
.rc-modal-title{ font-size:var(--fs-20); padding-top:10px; }
.rc-modal-title::before{ width:32px; }
.rc-modal-sub{ font-size:var(--fs-12); }
.rc-lead-form{ gap:11px; }
.rc-lead-form .rc-field label{ font-size:var(--fs-12); }
.rc-lead-form textarea{ min-height:66px; }
.rc-modal-alt{ font-size:var(--fs-12); margin:0; }
.rc-modal-actions .rc-btn{ padding-block:10px; min-height:44px; }

/* ----------------------------------------------------------------------
   PER-PAGE HERO SIGNATURES
   Every family gets a different hero composition, so a visitor knows the
   page changed without reading it. Same system, different arrangement.
   ---------------------------------------------------------------------- */

/* Services: the assembly art sits behind, quieter, text full width. */
body[data-accent="blue"] .rc-hero{ background:
  linear-gradient(to bottom, var(--paper-2), var(--paper) 70%); }

/* Packages: a drawn comparison axis behind the headline. */
body[data-accent="green"] .rc-hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:120px; z-index:0;
  background:
    repeating-linear-gradient(to right,
      var(--hairline) 0 1px, transparent 1px 25%),
    linear-gradient(to top, var(--paper-2), transparent);
  pointer-events:none;
}

/* Products: a device frame outline to the right of the text. */
body[data-accent="yellow"] .rc-hero::after{
  content:""; position:absolute; right:-40px; top:50%; z-index:0;
  width:min(38vw,440px); aspect-ratio:4/3;
  transform:translateY(-50%);
  border:2px solid var(--hairline); border-radius:18px;
  box-shadow:-28px 28px 0 -2px var(--paper-2), -28px 28px 0 0 var(--hairline);
  pointer-events:none;
}
@media (max-width:900px){ body[data-accent="yellow"] .rc-hero::after{ display:none; } }

/* Partnerships and careers: a flow of three joined nodes. */
body[data-accent="red"] .rc-hero::after{
  content:""; position:absolute; right:6%; top:50%; z-index:0;
  width:min(34vw,360px); height:2px; transform:translateY(-50%);
  background:
    radial-gradient(circle 9px at 0 50%, transparent 7px, var(--ray-r) 7px 9px, transparent 9px),
    radial-gradient(circle 9px at 50% 50%, transparent 7px, var(--ray-r) 7px 9px, transparent 9px),
    radial-gradient(circle 9px at 100% 50%, transparent 7px, var(--ray-r) 7px 9px, transparent 9px),
    linear-gradient(to right, var(--hairline), var(--hairline));
  background-repeat:no-repeat;
  background-size:100% 20px, 100% 20px, 100% 20px, 100% 2px;
  background-position:0 50%, 0 50%, 0 50%, 0 50%;
  pointer-events:none;
}
@media (max-width:900px){ body[data-accent="red"] .rc-hero::after{ display:none; } }

.rc-hero > .rc-wrap{ position:relative; z-index:1; }


/* ----------------------------------------------------------------------
   CLIENT MARQUEE
   A moving track rather than a static row: three logos in a row read as
   three stray images, a track reads as a roster. The animation moves the
   track by exactly half its width, and the content is duplicated, so the
   loop has no visible seam.
   ---------------------------------------------------------------------- */
.rc-marquee{
  position:relative; overflow:hidden; margin-top:14px;
  /* A white plate, for two reasons: mix-blend-mode:multiply only erases a
     logo's own white box against white, and a defined band reads as a
     roster rather than as images floating on the section. */
  background:var(--paper);
  border-block:1px solid var(--hairline);
  border-radius:var(--r-md);
  padding-block:0;
  /* Fade both ends so logos enter and leave rather than being clipped. */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.rc-marquee-track{
  display:flex; align-items:center; gap:0;
  width:max-content;
  animation:rc-marquee 38s linear infinite;
}
.rc-marquee:hover .rc-marquee-track,
.rc-marquee:focus-within .rc-marquee-track{ animation-play-state:paused; }
@keyframes rc-marquee{ to{ transform:translateX(-50%); } }

/* No motion: the track sits still and simply scrolls if it has to. */
@media (prefers-reduced-motion:reduce){
  .rc-marquee-track{ animation:none; }
  .rc-marquee{ overflow-x:auto; }
}
[data-motion="c"] .rc-marquee-track{ animation:none; }

.rc-marquee-item{
  flex:0 0 auto; display:grid; place-items:center;
  padding:20px 44px; position:relative;
}
/* One hairline between marks, not a box around each. */
.rc-marquee-item + .rc-marquee-item::before{
  content:""; position:absolute; left:0; top:24%; bottom:24%;
  width:1px; background:var(--hairline);
}
.rc-marquee-item img{
  height:58px; width:auto; max-width:190px; object-fit:contain;
  mix-blend-mode:multiply;          /* a logo with its own white box blends in */
  /* Pale marks disappear under a brightness cut, so contrast does the work
     and brightness is left alone. */
  filter:grayscale(1) contrast(1.6);
  opacity:.9;
  transition:filter var(--t-md) var(--ease), opacity var(--t-md) var(--ease),
             transform var(--t-md) var(--ease);
}
[data-theme="dark"] .rc-marquee{ background:var(--paper-2); }
[data-theme="dark"] .rc-marquee-item img{
  mix-blend-mode:screen; filter:grayscale(1) invert(1) brightness(1.4) contrast(1.2);
}
.rc-marquee-item:hover img{
  filter:none; opacity:1; transform:translateY(-4px);
}

/* The name is held back until the logo is hovered, so the track reads as
   marks rather than as a list of captions. */
.rc-marquee-name{
  position:absolute; left:50%; bottom:-2px; transform:translate(-50%,6px);
  font-size:var(--fs-12); color:var(--ink-2); white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-sm) var(--ease), transform var(--t-sm) var(--ease);
}
.rc-marquee-item:hover .rc-marquee-name{ opacity:1; transform:translate(-50%,0); }

/* The band the marquee sits in. */
.rc-proof{ padding-block:40px 36px; }
.rc-proof-head{ margin-bottom:4px; }
.rc-proof-head{
  display:grid; gap:6px; max-width:64ch;
}
.rc-proof-label{
  font-size:var(--fs-12); font-weight:700; letter-spacing:.04em;
  color:var(--ink); margin:0; padding-left:14px; position:relative;
}
.rc-proof-label::before{
  content:""; position:absolute; left:0; top:.45em;
  width:6px; height:6px; border-radius:50%; background:var(--ray-sec);
}
.rc-proof-note{ margin:0; font-size:var(--fs-14); color:var(--ink-2); }


/* ----------------------------------------------------------------------
   TECHNOLOGY ROWS - real marks, two tracks, opposite directions
   The counter-motion is what makes it read as a system rather than a
   conveyor belt. Self-hosted SVG, so nothing third-party is on the render
   path and no CDN can move a file out from under it.
   ---------------------------------------------------------------------- */
.rc-techrows{ display:grid; gap:12px; margin-top:20px; }
.rc-techrow{
  position:relative; overflow:hidden;
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--r-md);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.rc-techrow-track{
  display:flex; align-items:center; width:max-content;
  animation:rc-tech-l 46s linear infinite;
}
.rc-techrow[data-dir="right"] .rc-techrow-track{ animation-name:rc-tech-r; }
.rc-techrow:hover .rc-techrow-track,
.rc-techrow:focus-within .rc-techrow-track{ animation-play-state:paused; }
@keyframes rc-tech-l{ from{ transform:translateX(0); }    to{ transform:translateX(-50%); } }
@keyframes rc-tech-r{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){
  .rc-techrow-track{ animation:none; }
  .rc-techrow{ overflow-x:auto; }
}
[data-motion="c"] .rc-techrow-track{ animation:none; }

.rc-tech{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; position:relative; white-space:nowrap;
}
.rc-tech + .rc-tech::before{
  content:""; position:absolute; left:0; top:28%; bottom:28%;
  width:1px; background:var(--hairline);
}
.rc-tech img{
  width:30px; height:30px; object-fit:contain; display:block;
  /* Grey at rest so twenty brand palettes do not fight; true colour on
     hover, which is also the reward for pointing at one. */
  filter:grayscale(1); opacity:.62;
  transition:filter var(--t-sm) var(--ease), opacity var(--t-sm) var(--ease),
             transform var(--t-sm) var(--ease);
}
.rc-tech b{
  font-weight:500; font-size:var(--fs-14); color:var(--ink-2);
  transition:color var(--t-sm) var(--ease);
}
.rc-tech:hover img{ filter:none; opacity:1; transform:translateY(-2px) scale(1.08); }
.rc-tech:hover b{ color:var(--ink); }
[data-theme="dark"] .rc-tech img{ opacity:.75; }

/* ----------------------------------------------------------------------
   WORLD MAP
   ---------------------------------------------------------------------- */
.rc-map{ margin:0; width:100%; }
.rc-map-land path{ fill:color-mix(in srgb, var(--ink) 4%, transparent); }
.rc-map-dots circle{
  fill:var(--ink-3); opacity:.45;
}
[data-motion="a"] .rc-map-dots circle,
[data-motion="b"] .rc-map-dots circle{
  animation:rc-dot 5s ease-in-out infinite;
  animation-delay:calc(var(--i) * 90ms);
}
@keyframes rc-dot{
  0%,100%{ opacity:.28; } 50%{ opacity:.7; }
}
.rc-map-note{
  margin-top:14px; font-size:var(--fs-14); color:var(--ink-2);
  max-width:74ch; padding-left:14px; border-left:2px solid var(--ray-sec);
}

/* ----------------------------------------------------------------------
   CURRENCY
   ---------------------------------------------------------------------- */
.rc-currency-row{ align-items:flex-start; }
.rc-currency-label{ padding-top:3px; }
.rc-currency-text{
  margin:0; font-size:var(--fs-14); color:var(--ink-2); max-width:70ch;
}
.rc-currency-text strong{ color:var(--ink); font-weight:600; }

/* ----------------------------------------------------------------------
   TAWK OVERLAP
   The tawk bubble plants itself bottom-right with its own z-index and its
   own offsets, landing on top of our launcher. Once it is present ours
   steps aside: the stack shifts left of it and the chat entry is dropped,
   because tawk is now the chat entry.
   ---------------------------------------------------------------------- */
html[data-tawk="on"] .rc-float{
  right:calc(16px + env(safe-area-inset-right));
  /* The clearance is measured in enterprise.js and published as
     --rc-tawk-h; see pass 10. Two hard-coded numbers lived here and both
     were wrong, because tawk's greeting card is twice the height of its
     bubble and it switches between them on its own. */
}
html[data-tawk="on"] [data-rc-chat]{ display:none; }

/* Their container must sit under our modal, not over it. */
#tawkchat-container,#tawkchat-minified-wrapper,
iframe[title*="chat" i],div[class*="tawk-"]{
  z-index:var(--z-float) !important;
}
html[data-modal="open"] #tawkchat-container,
html[data-modal="open"] iframe[title*="chat" i],
html[data-sheet="open"] #tawkchat-container,
html[data-sheet="open"] iframe[title*="chat" i]{ visibility:hidden !important; }


/* ======================================================================
   FIX PASS
   ====================================================================== */

/* logo.png carries a lot of internal whitespace, so a 52px box was about
   34px of visible mark. Larger, and never recoloured by a theme. */
.rc-navbar-logo img,.rc-navbar-brand img,.recilens-logo img,
.rc-navbar-logo-container img,header img[src*="logo"]{
  height:68px !important; max-height:68px !important; width:auto !important;
  filter:none !important; mix-blend-mode:normal !important; opacity:1 !important;
}
@media (max-width:600px){
  .rc-navbar-logo img,.rc-navbar-brand img,.recilens-logo img,
  .rc-navbar-logo-container img,header img[src*="logo"]{
    height:48px !important; max-height:48px !important;
  }
}
.rc-navbar-logo-container{ gap:10px; }

/* The dropdown painted a solid blue block on hover - the old dark theme's
   highlight, which on white reads as a selection artefact rather than a
   hover state. A tint and a drawn tick instead. */
.rc-navbar-dropdown-panel a,
.rc-navbar-dropdown-panel li > a,
.rc-navbar-product-item{
  background:transparent !important;
  border-radius:var(--r-sm);
  padding:10px 12px !important;
  position:relative;
  transition:background var(--t-xs) var(--ease), color var(--t-xs) var(--ease),
             padding-left var(--t-xs) var(--ease) !important;
}
.rc-navbar-dropdown-panel a:hover,
.rc-navbar-dropdown-panel a:focus-visible,
.rc-navbar-product-item:hover{
  background:var(--paper-2) !important;
  color:var(--ink) !important;
  padding-left:18px !important;
}
.rc-navbar-dropdown-panel a::before{
  content:""; position:absolute; left:6px; top:50%; width:0; height:2px;
  background:var(--ray-sec); transform:translateY(-50%);
  transition:width var(--t-xs) var(--ease);
}
.rc-navbar-dropdown-panel a:hover::before{ width:6px; }
.rc-navbar-dropdown-panel{ padding:10px !important; }

/* The language button sat on top of "FOR BUSINESS ENQUIRIES". */
.rc-lang{ top:calc(6px + env(safe-area-inset-top)); }
/* On a phone the top bar already fills the width with the enquiries line,
   so the button goes to the opposite corner from the burger rather than
   sitting on top of the text. */
@media (max-width:1023px){
  .rc-lang{ right:auto; left:calc(8px + env(safe-area-inset-left)); }
  .rc-lang-btn{ min-height:36px; padding:4px 10px; font-size:var(--fs-12); }
  .rc-lang-menu{ right:auto; left:0; }
}
@media (max-width:420px){
  .rc-lang-btn span{ display:none; }
  .rc-lang-btn{ padding:6px; }
}

/* The floating stack was covering content at the bottom of a phone. */
@media (max-width:1023px){
  .rc-float{ gap:8px;
    bottom:calc(12px + var(--rc-banner-h,0px) + env(safe-area-inset-bottom)); }
  .rc-fab{ width:48px; height:48px; }
  .rc-totop{ width:38px; height:38px; }
}

/* Mobile footer: centred, which is what one column wants. */
@media (max-width:767px){
  .rc-footer-grid{ text-align:center; justify-items:center; }
  .rc-footer-col ul{ justify-items:center; }
  .rc-footer-social{ justify-content:center; }
  .rc-footer-note{ border-left:0; border-top:2px solid var(--ray-sec);
                   padding:10px 0 0; text-align:center; }
  .rc-footer-base{ justify-content:center; text-align:center; }
  .rc-footer-base ul{ justify-content:center; }
  .rc-footer-talk .rc-btn{ max-width:320px; margin-inline:auto; }
}

/* The footer wordmark gets the real logo beside it. */
.rc-footer-mark{ display:flex; align-items:center; gap:12px; }
.rc-footer-mark img{ height:44px; width:auto; }
@media (max-width:767px){ .rc-footer-mark{ justify-content:center; } }

/* FAQ: they were flush together, so an open one had no edge. */
.rc-acc{ margin-bottom:10px; border-radius:var(--r-md); }
.rc-acc:last-of-type{ margin-bottom:0; }
.rc-acc button{ padding:18px; gap:16px; }
.rc-acc[data-open="1"]{ border-color:var(--ink); }
.rc-acc .rc-panel p{ padding:0 18px 18px; }

/* Registrations: four equal blocks of text had no hierarchy. */
.rc-achievements{ gap:20px; counter-reset:ach; }
.rc-ach{
  position:relative; padding:24px 20px 20px; border-top-width:2px;
  transition:transform var(--t-sm) var(--ease), border-color var(--t-sm) var(--ease);
}
.rc-ach::before{
  counter-increment:ach; content:counter(ach,decimal-leading-zero);
  position:absolute; top:14px; right:16px;
  font-family:var(--font-display); font-size:var(--fs-25);
  color:var(--hairline); line-height:1;
}
.rc-ach:hover{ transform:translateY(-3px); border-color:var(--ink); }
.rc-ach b{ font-size:var(--fs-16); margin-bottom:6px; padding-right:36px; }
.rc-ach span{ font-size:var(--fs-14); line-height:1.6; }
.rc-marks{ gap:36px; margin-top:36px; padding-top:28px;
           border-top:1px solid var(--hairline); }
.rc-marks img{ height:64px; }

/* ----------------------------------------------------------------------
   CONTACT PAGE
   ---------------------------------------------------------------------- */
.rc-contact-grid{ display:grid; gap:40px; }
@media (min-width:1024px){
  .rc-contact-grid{ grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:56px; }
}
.rc-contact-grid > *{ min-width:0; }
.rc-contact-form{
  display:grid; gap:16px; align-content:start;
  background:var(--paper); border:1px solid var(--hairline);
  border-left:3px solid var(--ray-sec);
  border-radius:var(--r-md); padding:28px;
}
.rc-contact-form .rc-h2{ margin:0 0 4px; font-size:var(--fs-25); padding-top:0; }
.rc-contact-form .rc-h2::before{ display:none; }
.rc-field-row{ display:grid; gap:16px; }
@media (min-width:600px){ .rc-field-row{ grid-template-columns:1fr 1fr; } }
.rc-field-row > *{ min-width:0; }
.rc-contact-side{ display:grid; gap:20px; align-content:start; }
.rc-contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rc-contact-list li{ display:grid; grid-template-columns:76px 1fr; gap:10px;
                     align-items:baseline; }
.rc-contact-list span{ font-size:var(--fs-12); color:var(--ink-3); }
.rc-contact-list a{ color:var(--ink); text-decoration:none; font-size:var(--fs-14); }
.rc-contact-list a:hover{ color:var(--ray-sec); }
.rc-office{ margin:0 0 12px; font-size:var(--fs-14); color:var(--ink-2); line-height:1.6; }
.rc-office b{ display:block; color:var(--ink); font-size:var(--fs-12); font-weight:700; }
.rc-next{ margin:0; padding-left:18px; display:grid; gap:8px;
          font-size:var(--fs-14); color:var(--ink-2); }

/* Map facade: nothing reaches Google until someone asks for the map. */
.rc-mapframe{
  position:relative; aspect-ratio:16/7; border-radius:var(--r-md);
  border:1px solid var(--hairline); overflow:hidden;
  background:
    linear-gradient(to right, var(--hairline-2) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(to bottom, var(--hairline-2) 1px, transparent 1px) 0 0/40px 40px,
    var(--paper-2);
  display:grid; place-items:center; gap:12px; align-content:center;
}
.rc-mapframe iframe{ width:100%; height:100%; border:0; display:block; }
.rc-map-open{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  border-radius:999px; padding:12px 20px; min-height:46px;
  font:inherit; font-size:var(--fs-14); font-weight:600;
}
.rc-map-open:hover{ background:var(--ray-sec); border-color:var(--ray-sec); }
.rc-map-open svg{ width:18px; height:18px; }
.rc-map-addr{ font-size:var(--fs-12); color:var(--ink-2); text-align:center;
              padding-inline:16px; }


/* ----------------------------------------------------------------------
   WORLD MAP - real geometry
   ---------------------------------------------------------------------- */
.rc-map-land path{
  fill:color-mix(in srgb, var(--ink) 6%, transparent);
  stroke:var(--paper); stroke-width:.5;
  transition:fill var(--t-sm) var(--ease);
}
.rc-map-land path.is-active{
  fill:color-mix(in srgb, var(--ink) 17%, transparent);
}
.rc-map-land path:hover{ fill:color-mix(in srgb, var(--ray-sec) 34%, transparent); }
[data-theme="dark"] .rc-map-land path{ stroke:var(--paper-2); }

.rc-pin-label{
  font-family:var(--font-body); font-size:12px; font-weight:600; fill:var(--ink);
  paint-order:stroke; stroke:var(--paper); stroke-width:3px; stroke-linejoin:round;
}
.rc-pin-sub{
  font-family:var(--font-body); font-size:10px; fill:var(--ink-3);
  paint-order:stroke; stroke:var(--paper); stroke-width:3px; stroke-linejoin:round;
}
.rc-pin-ring{ transform-origin:center; transform-box:fill-box; }
[data-motion="a"] .rc-pin.is-band .rc-pin-ring,
[data-motion="b"] .rc-pin.is-band .rc-pin-ring{
  animation:rc-ping 3s var(--ease) infinite;
  animation-delay:calc(var(--i) * 420ms);
}
@keyframes rc-ping{
  0%,72%,100%{ transform:scale(1); opacity:.9; }
  36%{ transform:scale(1.5); opacity:.2; }
}
.rc-pin:not(.is-band) .rc-pin-dot{ opacity:.55; }
[data-motion="a"] .rc-pin:not(.is-band) .rc-pin-dot,
[data-motion="b"] .rc-pin:not(.is-band) .rc-pin-dot{
  animation:rc-dot 4.5s ease-in-out infinite;
  animation-delay:calc(var(--i) * 160ms);
}
@keyframes rc-dot{ 0%,100%{ opacity:.35; } 50%{ opacity:.9; } }

[data-motion="a"] .rc-arc,[data-motion="b"] .rc-arc{
  stroke-dasharray:8 260; animation:rc-travel 5s linear infinite;
}
.rc-map-arcs .rc-arc:nth-child(2){ animation-delay:1.2s; }
.rc-map-arcs .rc-arc:nth-child(3){ animation-delay:2.4s; }
.rc-map-arcs .rc-arc:nth-child(4){ animation-delay:3.6s; }
@keyframes rc-travel{ to{ stroke-dashoffset:-268; } }
[data-motion="c"] .rc-arc{ stroke-dasharray:none; opacity:.45; }

/* ----------------------------------------------------------------------
   STACK ON A SERVICE PAGE - marks, not chips
   ---------------------------------------------------------------------- */
.rc-stackgrid{
  display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0;
}
.rc-stackgrid > li{ min-width:0; }
.rc-stackitem{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border:1px solid var(--hairline);
  border-radius:999px; background:var(--paper);
  font-size:var(--fs-14); color:var(--ink-2);
  transition:border-color var(--t-sm) var(--ease), color var(--t-sm) var(--ease),
             transform var(--t-sm) var(--ease);
}
.rc-stackitem:hover{
  border-color:var(--ray-sec); color:var(--ink); transform:translateY(-2px);
}
.rc-stackitem img{
  width:22px; height:22px; object-fit:contain; display:block;
  filter:grayscale(1); opacity:.7;
  transition:filter var(--t-sm) var(--ease), opacity var(--t-sm) var(--ease);
}
.rc-stackitem:hover img{ filter:none; opacity:1; }
[data-theme="dark"] .rc-stackitem img{ opacity:.85; }


/* A technology with no published mark gets a drawn monogram, so a row is
   never half logos and half bare text. */
.rc-stackmono{
  width:22px; height:22px; flex:0 0 auto;
  display:grid; place-items:center;
  border:1.5px solid var(--hairline); border-radius:5px;
  font-size:9px; font-weight:700; letter-spacing:.02em;
  color:var(--ink-3); font-family:var(--font-body);
  transition:border-color var(--t-sm) var(--ease), color var(--t-sm) var(--ease);
}
.rc-stackitem:hover .rc-stackmono{ border-color:var(--ray-sec); color:var(--ink); }


/* ======================================================================
   PASS 8
   ====================================================================== */

/* The product titles in the mega-menu were white - the old dark theme's
   colour, applied to <strong> and <p> inside the item, so on a white panel
   they were invisible. */
.rc-navbar-product-item strong,
.rc-navbar-product-item b,
.rc-navbar-dropdown-panel strong,
.rc-navbar-dropdown-panel h4{
  color:var(--ink) !important;
  font-weight:600 !important;
}
.rc-navbar-product-item p,
.rc-navbar-dropdown-panel p{
  color:var(--ink-2) !important;
  font-size:var(--fs-12) !important;
  margin:2px 0 0 !important;
}
.rc-navbar-product-item span[style]{ color:var(--ink) !important; }
.rc-navbar-product-item{ align-items:flex-start; gap:12px; }

/* The promo card in the Company menu was a brown block with orange text -
   the one filled colour on the whole site, in a colour that is not in the
   palette. It is a bordered panel like everything else. */
.rc-navbar-dropdown-panel .rc-navbar-promo,
.rc-navbar-dropdown-panel [class*="promo"],
.rc-navbar-dropdown-panel [class*="highlight"],
.rc-navbar-dropdown-panel [class*="feature-card"]{
  background:var(--paper-2) !important;
  background-image:none !important;
  color:var(--ink) !important;
  border:1px solid var(--hairline) !important;
  border-left:3px solid var(--ray-sec) !important;
  border-radius:var(--r-md) !important;
}
.rc-navbar-dropdown-panel [class*="promo"] *,
.rc-navbar-dropdown-panel [class*="highlight"] *{ color:var(--ink-2) !important; }
.rc-navbar-dropdown-panel [class*="promo"] h3,
.rc-navbar-dropdown-panel [class*="promo"] h4,
.rc-navbar-dropdown-panel [class*="promo"] strong{ color:var(--ink) !important; }
.rc-navbar-badge,.rc-navbar-dropdown-panel [class*="badge"]{
  background:var(--ink) !important; color:var(--paper) !important;
  border-radius:999px !important; font-size:10px !important;
  padding:3px 9px !important; letter-spacing:.02em;
}

/* ----------------------------------------------------------------------
   THE FLOAT STACK
   Three separate controls, always in the same order, always clear of each
   other: back to top, WhatsApp, and the assistant. WhatsApp is its own
   button rather than a row inside a panel, because someone who wants
   WhatsApp wants it in one tap.
   ---------------------------------------------------------------------- */
.rc-float{ gap:12px; }
.rc-wa{
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--hairline);
  transition:transform var(--t-sm) var(--ease-spring),
             border-color var(--t-sm) var(--ease), color var(--t-sm) var(--ease);
}
.rc-wa:hover{ transform:translateY(-3px) scale(1.04); border-color:var(--ray-g); color:var(--ray-g); }
.rc-wa:focus-visible{ outline:2px solid var(--ray-sec); outline-offset:3px; }
.rc-wa svg{ width:24px; height:24px; }
@media (max-width:400px){ .rc-wa{ width:48px; height:48px; } }

/* When tawk is up it owns the bottom-right corner. Everything of ours
   lifts clear of it rather than sitting underneath, and the assistant
   button goes away because tawk has become the assistant. */
html[data-tawk="on"] .rc-fab{ display:none; }
/* The lift itself is measured - see the pass 10 block at the end of this
   file and the matching measurement in enterprise.js. */

/* ----------------------------------------------------------------------
   BLOG INDEX - a card grid, with the cover
   One post in an editorial row reads as an empty page. Cards with the
   cover image carry their weight at any count.
   ---------------------------------------------------------------------- */
.rc-postgrid{
  display:grid; gap:24px; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
}
.rc-postgrid > li{ min-width:0; }
/* The newest post takes two columns where there is room. */
@media (min-width:900px){
  .rc-postgrid > li:first-child{ grid-column:span 2; }
  .rc-postgrid > li:first-child .rc-pcard{ grid-template-columns:1.1fr 1fr; }
  .rc-postgrid > li:first-child .rc-pcard-cover{ aspect-ratio:auto; height:100%; }
  .rc-postgrid > li:first-child .rc-pcard-title{ font-size:var(--fs-31); }
}
.rc-pcard{
  display:grid; grid-template-columns:1fr; height:100%;
  text-decoration:none; color:inherit; overflow:hidden;
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--r-md); position:relative;
  transition:transform var(--t-sm) var(--ease), border-color var(--t-sm) var(--ease);
}
.rc-pcard::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:1;
  background:var(--ray-sec); transform:scaleY(0); transform-origin:50% 0;
  transition:transform var(--t-sm) var(--ease);
}
.rc-pcard:hover{ transform:translateY(-4px); border-color:var(--ink); }
.rc-pcard:hover::before{ transform:scaleY(1); }
.rc-pcard-cover{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-3); }
.rc-pcard-cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--t-md) var(--ease);
}
.rc-pcard:hover .rc-pcard-cover img{ transform:scale(1.04); }
.rc-pcard-body{ padding:20px; display:grid; gap:10px; align-content:start; }
.rc-pcard-meta{
  display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
  font-size:var(--fs-12); color:var(--ink-3);
}
.rc-pcard-title{
  font-family:var(--font-display); font-weight:400; line-height:1.1;
  font-size:var(--fs-25); margin:0; text-wrap:balance;
}
.rc-pcard:hover .rc-pcard-title{ color:var(--ray-sec); }
.rc-pcard-sum{ color:var(--ink-2); font-size:var(--fs-14); margin:0; }
.rc-pcard-more{ font-size:var(--fs-14); color:var(--ink); font-weight:600; }


/* Map legend. The four labelled points kept reading as "the only places
   they work", so the key states the three levels explicitly and the note
   says it in words. */
.rc-map-foot{ margin-top:18px; display:grid; gap:14px; }
.rc-map-legend{
  display:flex; flex-wrap:wrap; gap:10px 28px; list-style:none; margin:0; padding:0;
}
.rc-map-legend li{
  display:flex; align-items:center; gap:9px;
  font-size:var(--fs-12); color:var(--ink-2);
}
.rc-map-legend b{ color:var(--ink); font-weight:600; margin-right:2px; }
.rc-key{ width:16px; height:16px; border-radius:4px; flex:0 0 auto; }
.rc-key-any{ background:color-mix(in srgb, var(--ink) 6%, transparent);
             border:1px solid var(--hairline); }
.rc-key-done{ background:color-mix(in srgb, var(--ink) 17%, transparent);
              border:1px solid var(--hairline); }
.rc-key-band{ border-radius:50%; border:2px solid var(--ray-sec);
              background:transparent; }
.rc-map-note{
  margin:0; font-size:var(--fs-14); color:var(--ink-2); max-width:76ch;
  padding-left:14px; border-left:2px solid var(--ray-sec);
}


/* ======================================================================
   PASS 9 — the logo at a real size, section artwork, Google reviews
   ====================================================================== */

/* THE LOGO
   logo.png is a 500x500 square whose ink occupies rows 177-335: the mark
   is 32% of the height of the file and the rest is transparent margin. A
   68px box was therefore rendering about 22px of visible logo next to
   17px type, which is why it read as tiny beside the wordmark.
   logo-mark.png is the same artwork cropped to its ink, so the height
   below is the height you actually see - 46px of mark against 17px of
   type. The filter/blend resets stay: they are what keeps a section
   accent from tinting the brand colours. */
.rc-navbar-logo img,.rc-navbar-brand img,.recilens-logo img,
.rc-navbar-logo-container img,header img[src*="logo-mark"]{
  height:58px !important; max-height:58px !important;
  width:auto !important; max-width:none !important;
  filter:none !important; mix-blend-mode:normal !important; opacity:1 !important;
  object-fit:contain !important;
}
@media (max-width:900px){
  .rc-navbar-logo img,.rc-navbar-brand img,.recilens-logo img,
  .rc-navbar-logo-container img,header img[src*="logo-mark"]{
    height:46px !important; max-height:46px !important;
  }
}
@media (max-width:480px){
  .rc-navbar-logo img,.rc-navbar-brand img,.recilens-logo img,
  .rc-navbar-logo-container img,header img[src*="logo-mark"]{
    height:38px !important; max-height:38px !important;
  }
}
/* The nav row has to be tall enough to hold it without clipping. */
.rc-navbar-main-header,.rc-navbar-main-nav,.rc-navbar,.rc-navbar-inner{ min-height:80px; }
.rc-navbar-logo-container{
  display:inline-flex; align-items:center; gap:10px;
  /* The wordmark ended where the first nav link began. */
  margin-right:clamp(20px,3vw,52px);
}

/* The nav carried the brand name twice: once as artwork inside logo.png
   and once as a text node beside it. That is why the logo looked small -
   it could never be bigger than the duplicate of itself sitting next to
   it. The image is the wordmark now. The text node is collapsed with
   font-size:0 (it is a bare text node, so there is nothing to select),
   and only the "Corp Pvt. Ltd." line survives, as a caption to the mark
   rather than a second copy of it. */
.rc-navbar-logo{ font-size:0 !important; line-height:0 !important; }
.rc-navbar-logo-subtitle,.rc-navbar-logo h6{
  font-size:11px !important; line-height:1.25 !important; margin:0 !important;
  font-weight:500 !important; letter-spacing:.03em;
  color:var(--ink-2) !important; white-space:nowrap;
}
@media (max-width:560px){
  /* Below this the mark alone is the whole brand: there is not room for
     a caption beside it and a burger on the other side. */
  .rc-navbar-logo{ display:none !important; }
}
.rc-footer-mark img{ height:34px; width:auto; }

/* ----------------------------------------------------------------------
   SECTION ARTWORK
   Drawings rather than photographs. They carry the same line language as
   the hero, weigh one to two kilobytes, need no licence and no watermark,
   and can say the specific thing the section says. See includes/v2/art.php.
   ---------------------------------------------------------------------- */
.rc-figure-split{ display:grid; gap:28px; align-items:center; }
.rc-figure-split > *{ min-width:0; }
@media (min-width:900px){
  .rc-figure-split{ grid-template-columns:1fr minmax(0,.82fr); gap:56px; }
  /* Alternating sides down the page, so a run of sections does not read
     as one long left column. */
  .rc-figure-split.is-flipped > .rc-figure-body{ order:2; }
}

.rc-art{
  border:1px solid var(--hairline); border-radius:var(--r-md);
  background:var(--paper-2); overflow:hidden; padding:14px;
  position:relative;
}
/* A faint field behind the drawing: it stops the panel reading as an
   empty box on a page that is otherwise all type. */
.rc-art::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 15%, transparent 72%);
          mask-image:radial-gradient(ellipse at 50% 50%, #000 15%, transparent 72%);
}
.rc-art svg{ display:block; width:100%; height:auto; position:relative; z-index:1; }
.rc-art svg [stroke]{ vector-effect:non-scaling-stroke; }
.rc-art-fig{ margin:0; }
.rc-art-cap{
  margin:12px 0 0; font-size:var(--fs-12); line-height:1.5; color:var(--ink-3);
  padding-left:12px; border-left:2px solid var(--ray-sec);
}

/* The panel lifts a little on hover, the way the cards do, so it reads as
   part of the same surface family rather than a pasted-in picture. */
.rc-art{ transition:border-color var(--t-sm) var(--ease), transform var(--t-sm) var(--ease); }
.rc-art-fig:hover .rc-art{ border-color:var(--ink-3); transform:translateY(-2px); }

/* Every stroke draws itself once, on entry, at motion tiers a and b.
   Tier c and reduced-motion get the finished drawing with no animation,
   which is the whole point of having tiers. */
/* The drawings run continuously rather than drawing once and stopping.
   The stroke enters from one end, holds while it is readable, and leaves
   from the other - so a panel a reader comes back to is alive rather
   than a static picture they have already seen.

   It only runs while the panel is on screen: enterprise.js adds is-live
   on intersection and takes it off again, and the animation is paused
   otherwise. A page of permanently animating SVG is a page that keeps a
   phone's GPU awake for nothing. */
[data-motion="a"] .rc-art .d,
[data-motion="b"] .rc-art .d{
  stroke-dasharray:var(--len,600);
  stroke-dashoffset:var(--len,600);
  animation:rc-draw-loop 9s linear infinite;
  animation-play-state:paused;
}
[data-motion="a"] .rc-art-fig.rc-in .rc-art .d,
[data-motion="b"] .rc-art-fig.rc-in .rc-art .d{ stroke-dashoffset:0; }
.rc-art-fig.is-live .rc-art .d,
.rc-hero-art-motif.is-live .d{ animation-play-state:running; }

/* The hero backdrop runs on the same loop, a little slower, because it
   is behind type and must never compete with it. */
[data-motion="a"] .rc-hero-art-motif .d,
[data-motion="b"] .rc-hero-art-motif .d{
  stroke-dasharray:var(--len,600);
  stroke-dashoffset:var(--len,600);
  animation:rc-draw-loop 14s linear infinite;
  animation-play-state:paused;
}
.rc-art .d2,.rc-hero-art-motif .d2{ animation-delay:-1.1s !important; }
.rc-art .d3,.rc-hero-art-motif .d3{ animation-delay:-2.2s !important; }
.rc-art .d4,.rc-hero-art-motif .d4{ animation-delay:-3.3s !important; }

@keyframes rc-draw-loop{
  /* Most of the cycle is the finished drawing. The first timing held it
     for 42% and a visitor landing at a random moment was as likely to
     see a half-drawn picture as a picture - which reads as broken, not
     as animated. */
  0%   { stroke-dashoffset:var(--len,600); }
  17%  { stroke-dashoffset:0; }
  82%  { stroke-dashoffset:0; }
  100% { stroke-dashoffset:calc(var(--len,600) * -1); }
}
@media (prefers-reduced-motion:reduce){
  .rc-art .d,.rc-hero-art-motif .d{
    stroke-dashoffset:0 !important; animation:none !important;
  }
}

/* A drawing sitting on its own, full width, between two runs of copy. */
.rc-art-band{ max-width:640px; margin-inline:auto; }

/* ----------------------------------------------------------------------
   GOOGLE REVIEWS
   The SociableKit embed renders into its own container. It gets a plate so
   it belongs to the page, a stated minimum height so nothing below it
   jumps when the widget arrives, and a real fallback so a blocked script
   never leaves an empty rectangle.
   ---------------------------------------------------------------------- */
.rc-reviews{
  position:relative; min-height:260px;
  border:1px solid var(--hairline); border-radius:var(--r-md);
  background:var(--paper); padding:18px;
}
.rc-reviews-head{
  display:flex; flex-wrap:wrap; gap:10px 16px; align-items:baseline;
  padding:0 4px 14px; border-bottom:1px solid var(--hairline); margin-bottom:16px;
}
.rc-reviews-head h3{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-25); line-height:1.1;
}
.rc-reviews-head p{ margin:0; font-size:var(--fs-12); color:var(--ink-3); }
.rc-reviews-g{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-12); color:var(--ink-2); margin-left:auto;
}
.rc-reviews-g svg{ width:16px; height:16px; }
.rc-reviews-stars{ display:inline-flex; gap:2px; }
.rc-reviews-stars svg{ width:13px; height:13px; }
.rc-reviews-body{ position:relative; min-height:180px; }
.rc-reviews .sk-ww-google-reviews{ position:relative; z-index:1; }
.rc-reviews-fallback{
  position:absolute; inset:0; display:grid; place-items:center; gap:10px;
  text-align:center; color:var(--ink-3); font-size:var(--fs-14); padding:16px;
}
.rc-reviews.is-loaded .rc-reviews-fallback{ display:none; }
.rc-reviews-fallback .rc-skel{
  display:grid; gap:10px; width:min(100%,520px);
}
.rc-reviews-fallback .rc-skel i{
  display:block; height:10px; border-radius:5px; background:var(--paper-3);
}
.rc-reviews-fallback .rc-skel i:nth-child(2){ width:78%; }
.rc-reviews-fallback .rc-skel i:nth-child(3){ width:54%; }
@media (prefers-reduced-motion:no-preference){
  .rc-reviews-fallback .rc-skel i{ animation:rc-skel 1.4s var(--ease) infinite; }
  .rc-reviews-fallback .rc-skel i:nth-child(2){ animation-delay:.12s; }
  .rc-reviews-fallback .rc-skel i:nth-child(3){ animation-delay:.24s; }
}
@keyframes rc-skel{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }


/* ======================================================================
   PASS 10
   ====================================================================== */

/* ----------------------------------------------------------------------
   THE FLOAT STACK vs TAWK - measured, not guessed
   Three passes at this failed because each one hard-coded a clearance
   (68px, then 104px) against a widget whose height we do not control.
   Tawk's greeting card is about twice the height of its collapsed bubble,
   so any fixed number is wrong half the time. enterprise.js now measures
   the thing and publishes --rc-tawk-h; the stack sits above whatever that
   turns out to be.
   ---------------------------------------------------------------------- */
:root{ --rc-tawk-h:0px; }
.rc-float{
  bottom:calc(20px + var(--rc-tawk-h) + var(--rc-banner-h,0px)
              + env(safe-area-inset-bottom));
  transition:bottom 220ms var(--ease);
}
/* Tawk has become the assistant, so our own assistant button steps aside.
   WhatsApp and back-to-top stay: they do different jobs. */
html[data-tawk="on"] .rc-fab{ display:none !important; }

/* ----------------------------------------------------------------------
   WHATSAPP - always there, one tap, and unmistakably WhatsApp
   ---------------------------------------------------------------------- */
.rc-wa{
  position:relative; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--paper); color:#25D366;
  border:1px solid var(--hairline);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:transform var(--t-sm) var(--ease-spring),
             border-color var(--t-sm) var(--ease),
             box-shadow var(--t-sm) var(--ease);
}
.rc-wa svg{ width:27px; height:27px; }
.rc-wa:hover{
  transform:translateY(-3px) scale(1.05);
  border-color:#25D366; box-shadow:0 6px 18px rgba(37,211,102,.28);
}
.rc-wa:focus-visible{ outline:2px solid #25D366; outline-offset:3px; }

/* A quiet pulse so the eye finds it once, then it stops. Three rings and
   done - a permanently pulsing button is a permanently ignored button. */
.rc-wa::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid #25D366; opacity:0; pointer-events:none;
  /* Bounded to the button. A ring that leaves the button is a ring
     somewhere on the page, which is what the last one was. */
  width:auto; height:auto; max-width:none;
}
@media (prefers-reduced-motion:no-preference){
  .rc-wa::after{ animation:rc-wa-ping 2.2s var(--ease) 1.4s 2; }
}
@keyframes rc-wa-ping{
  0%{ transform:scale(1); opacity:.55; }
  70%,100%{ transform:scale(1.28); opacity:0; }
}

/* The label rolls out of the button on hover rather than sitting there
   taking up the corner of the screen. */
.rc-wa-label{
  position:absolute; right:calc(100% + 10px); white-space:nowrap;
  background:var(--ink); color:var(--paper);
  font-size:var(--fs-12); font-weight:500; padding:6px 11px; border-radius:6px;
  opacity:0; transform:translateX(6px); pointer-events:none;
  transition:opacity var(--t-sm) var(--ease), transform var(--t-sm) var(--ease);
}
.rc-wa:hover .rc-wa-label,.rc-wa:focus-visible .rc-wa-label{
  opacity:1; transform:none;
}
@media (max-width:600px){ .rc-wa-label{ display:none; } }

/* ----------------------------------------------------------------------
   THE MEGA-MENU FEATURED CARD
   It was a brown block with orange text - the only filled colour panel on
   the site, in a colour that is not in the palette. The real class is
   .rc-navbar-featured-card; the previous pass guessed "feature-card" and
   matched nothing, which is why it came back.
   ---------------------------------------------------------------------- */
.rc-navbar-featured-card{
  position:relative; overflow:hidden;
  background:var(--paper-2) !important; background-image:none !important;
  color:var(--ink) !important;
  border:1px solid var(--hairline) !important;
  border-radius:14px !important;
  padding:22px !important;
  display:flex !important; flex-direction:column; gap:10px;
  isolation:isolate;
}
/* The four rays as a single hairline down the left edge: the one piece of
   brand colour the card gets, and it is a rule rather than a fill. */
.rc-navbar-featured-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,
    var(--ray-r) 0 25%, var(--ray-b) 25% 50%,
    var(--ray-g) 50% 75%, var(--ray-y) 75% 100%);
}
/* A very faint field so the card has depth without a fill. */
.rc-navbar-featured-card::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--paper-3) 0%, transparent 60%);
}
.rc-navbar-featured-card h4{
  margin:0 !important; color:var(--ink) !important;
  font-family:var(--font-display); font-weight:400 !important;
  font-size:var(--fs-25) !important; line-height:1.1 !important;
  letter-spacing:0 !important;
}
.rc-navbar-featured-card p{
  margin:0 !important; color:var(--ink-2) !important;
  font-size:var(--fs-14) !important; line-height:1.55 !important;
}
.rc-navbar-badge-orange,.rc-navbar-featured-card .rc-navbar-badge{
  align-self:flex-start;
  background:var(--ink) !important; color:var(--paper) !important;
  background-image:none !important;
  border:0 !important; border-radius:999px !important;
  font-size:10px !important; font-weight:600 !important;
  letter-spacing:.09em !important; text-transform:uppercase;
  padding:4px 10px !important; line-height:1.4 !important;
}
.rc-navbar-featured-footer{
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--hairline);
  color:var(--ink-3) !important; background:none !important;
  font-size:11px !important; font-weight:500 !important;
  letter-spacing:.1em !important; text-transform:uppercase;
}
.rc-navbar-featured-card:hover{ border-color:var(--ink-3) !important; }

/* ----------------------------------------------------------------------
   PRODUCT CARDS - "what we are working on ourselves"
   Two products stated as two bare links under a paragraph read as a
   footnote. They are the only things on the site we built for ourselves,
   so they get a card each.
   ---------------------------------------------------------------------- */
.rc-products{
  display:grid; gap:20px; list-style:none; margin:28px 0 0; padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.rc-products > li{ min-width:0; }
.rc-prod{
  position:relative; display:grid; gap:12px; align-content:start;
  height:100%; padding:24px; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--r-md); overflow:hidden;
  transition:transform var(--t-sm) var(--ease), border-color var(--t-sm) var(--ease);
}
.rc-prod::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--ray-sec); transform:scaleY(0); transform-origin:50% 0;
  transition:transform var(--t-md) var(--ease);
}
.rc-prod:hover{ transform:translateY(-4px); border-color:var(--ink); }
.rc-prod:hover::before{ transform:scaleY(1); }
.rc-prod-top{ display:flex; align-items:center; gap:12px; }
.rc-prod-ico{
  flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--hairline); border-radius:10px; background:var(--paper-2);
}
.rc-prod-ico svg{ width:22px; height:22px; }
.rc-prod h3{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-25); line-height:1.1;
}
.rc-prod-tag{
  font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--hairline);
  border-radius:999px; padding:3px 9px; margin-left:auto; white-space:nowrap;
}
.rc-prod p{ margin:0; color:var(--ink-2); font-size:var(--fs-14); }
.rc-prod-meta{
  display:flex; flex-wrap:wrap; gap:6px 14px; font-size:var(--fs-12);
  color:var(--ink-3); padding-top:12px; border-top:1px solid var(--hairline);
}
.rc-prod-go{ font-size:var(--fs-14); font-weight:600; color:var(--ink); }
.rc-prod:hover .rc-prod-go{ color:var(--ray-sec); }
.rc-prod-go::after{
  content:"\2192"; display:inline-block; margin-left:6px;
  transition:transform var(--t-sm) var(--ease);
}
.rc-prod:hover .rc-prod-go::after{ transform:translateX(4px); }

/* ----------------------------------------------------------------------
   THE FOUNDER NOTE - set as a quotation, because it is one
   ---------------------------------------------------------------------- */
.rc-note-block{
  display:grid; gap:24px;
  padding:34px 0 0; border-top:1px solid var(--hairline);
}
@media (min-width:860px){
  .rc-note-block{ grid-template-columns:minmax(0,1fr) 220px; gap:48px; }
}
.rc-note-block > *{ min-width:0; }
.rc-pull{
  margin:0; position:relative; padding-left:28px;
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-31); line-height:1.25; text-wrap:balance;
  color:var(--ink);
}
.rc-pull::before{
  content:""; position:absolute; left:0; top:.2em; bottom:.1em; width:3px;
  background:linear-gradient(180deg,
    var(--ray-r) 0 25%, var(--ray-b) 25% 50%,
    var(--ray-g) 50% 75%, var(--ray-y) 75% 100%);
}
.rc-pull-after{ margin:20px 0 0 28px; color:var(--ink-2); font-size:var(--fs-16); }
.rc-note-by{
  display:grid; gap:6px; align-content:start;
  font-size:var(--fs-12); color:var(--ink-3);
}
.rc-note-by b{ color:var(--ink); font-size:var(--fs-14); font-weight:600; }
.rc-note-by .rc-link{ margin-top:6px; }

/* ----------------------------------------------------------------------
   REGISTRATIONS AND RECOGNITION
   Four bordered boxes and three grey PNGs floating underneath read as an
   afterthought. This is the page's proof of existence, so it gets a
   proper shape: the numeral becomes part of the card, each card carries
   its own accent, and the government marks sit on plates with their names
   under them instead of hovering unlabelled.
   ---------------------------------------------------------------------- */
.rc-achievements{ gap:20px; counter-reset:ach; }
.rc-ach{
  position:relative; overflow:hidden;
  padding:26px 22px 22px; border-radius:var(--r-md);
  border:1px solid var(--hairline); border-top-width:1px;
  background:var(--paper);
  transition:transform var(--t-sm) var(--ease),
             border-color var(--t-sm) var(--ease),
             box-shadow var(--t-sm) var(--ease);
}
/* One accent per card, cycling the four rays, drawn as a rule along the
   top edge that fills in on hover. */
.rc-ach::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--ray-sec); transform:scaleX(.18); transform-origin:0 50%;
  transition:transform var(--t-md) var(--ease);
}
.rc-achievements > .rc-ach:nth-child(4n+1){ --ray-sec:var(--ray-b); }
.rc-achievements > .rc-ach:nth-child(4n+2){ --ray-sec:var(--ray-g); }
.rc-achievements > .rc-ach:nth-child(4n+3){ --ray-sec:var(--ray-y); }
.rc-achievements > .rc-ach:nth-child(4n+4){ --ray-sec:var(--ray-r); }
.rc-ach:hover{
  transform:translateY(-4px); border-color:var(--ink-3);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.rc-ach:hover::after{ transform:scaleX(1); }
.rc-ach::before{
  counter-increment:ach; content:counter(ach,decimal-leading-zero);
  position:absolute; top:12px; right:16px;
  font-family:var(--font-display); font-size:var(--fs-31);
  color:var(--hairline); line-height:1; pointer-events:none;
  transition:color var(--t-sm) var(--ease);
}
.rc-ach:hover::before{ color:var(--paper-3); }
.rc-ach b{
  display:block; font-size:var(--fs-16); font-weight:600;
  margin:0 46px 6px 0; line-height:1.25;
}
.rc-ach span{ color:var(--ink-2); font-size:var(--fs-14); line-height:1.55; }

/* The three government marks, on plates, named. */
.rc-marks{
  display:grid; gap:16px; list-style:none; padding:0;
  margin:32px 0 0; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}
.rc-marks > li{
  min-width:0; display:grid; justify-items:center; gap:12px; text-align:center;
  padding:22px 16px; border:1px solid var(--hairline);
  border-radius:var(--r-md); background:var(--paper-2);
  transition:border-color var(--t-sm) var(--ease), transform var(--t-sm) var(--ease);
}
.rc-marks > li:hover{ border-color:var(--ink-3); transform:translateY(-3px); }
.rc-marks img{
  /* These crests carry a lot of their own whitespace, the same way the
     logo did, so 60px of box was about 30px of visible emblem. */
  height:74px; width:auto; max-width:100%; object-fit:contain;
  filter:grayscale(1); opacity:.8;
  transition:filter var(--t-sm) var(--ease), opacity var(--t-sm) var(--ease),
             transform var(--t-sm) var(--ease);
}
.rc-marks > li:hover img{ transform:scale(1.04); }
.rc-marks > li:hover img{ filter:none; opacity:1; }
.rc-marks small{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.4;
}
/* Dark mode: these are black-line government emblems on transparent, so
   they vanish. Invert them back to visible. */
[data-theme="dark"] .rc-marks img{ filter:grayscale(1) invert(1); opacity:.7; }
[data-theme="dark"] .rc-marks > li:hover img{ filter:invert(1); opacity:1; }

/* An opening paragraph that carries a section: wider measure, larger than
   body copy, but not a heading. */
.rc-lede{ max-width:70ch; font-size:var(--fs-16); line-height:1.6; }


/* ======================================================================
   PASS 11
   ====================================================================== */

/* ----------------------------------------------------------------------
   THE MOTIF HERO
   The motif sits behind the headline, so it has to be quiet enough for
   type to sit on it and still be visible on its own on the right.
   ---------------------------------------------------------------------- */
.rc-hero-art-motif{ opacity:.92 !important; }
.rc-hero-art-motif .rc-hero-motif text{ font-size:13px; }
.rc-hero-art-motif .rc-hero-motif{ opacity:.72; }
@media (max-width:900px){
  /* On a phone the headline fills the hero, so the motif steps back to
     being texture rather than a picture nobody can read behind words -
     but not so far back that the hero looks empty. */
  .rc-hero-art-motif{ opacity:.55 !important; }
  .rc-hero-art-motif .rc-hero-motif{ opacity:.6; }
  .rc-hero-art-motif .rc-hero-motif text{ display:none; }
}

/* ----------------------------------------------------------------------
   A CALL-TO-ACTION IN THE NAV
   The same offer as the hero, reachable from every page without
   scrolling. Filled, because it is the one thing on the bar that is a
   button rather than a link.
   ---------------------------------------------------------------------- */
.rc-nav-cta{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  margin-left:18px; padding:11px 20px; border-radius:999px;
  background:var(--ink); color:var(--paper) !important;
  border:1px solid var(--ink); cursor:pointer;
  font-family:var(--font-body); font-size:var(--fs-14); font-weight:600;
  line-height:1; text-decoration:none;
  transition:transform var(--t-sm) var(--ease-spring),
             background var(--t-sm) var(--ease), box-shadow var(--t-sm) var(--ease);
}
.rc-nav-cta svg{ width:15px; height:15px; }
.rc-nav-cta:hover{
  transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.16);
  background:var(--ink);
}
.rc-nav-cta:focus-visible{ outline:2px solid var(--ray-sec); outline-offset:3px; }
/* Under 1200px the nav is already tight; the sheet carries the same
   button, so this one steps out rather than wrapping the bar. */
/* The breakpoint for both buttons is set once, at the end of this
   file. Three passes each picked their own and the ranges did not
   line up. */

/* ----------------------------------------------------------------------
   THE PACKAGES DROPDOWN
   It is a <ul> used as the panel itself, so it kept the list marker and
   the list padding: four bullets floating outside a white card.
   ---------------------------------------------------------------------- */
ul.rc-navbar-dropdown-panel{
  list-style:none !important; margin:0 !important;
  padding:10px !important; min-width:268px;
}
ul.rc-navbar-dropdown-panel > li{
  list-style:none !important; display:block; margin:0;
}
ul.rc-navbar-dropdown-panel > li::marker{ content:none; }
ul.rc-navbar-dropdown-panel > li > a{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:9px;
  color:var(--ink) !important; text-decoration:none;
  font-size:var(--fs-14); line-height:1.35;
  border-left:2px solid transparent;
  transition:background var(--t-sm) var(--ease),
             border-color var(--t-sm) var(--ease), padding-left var(--t-sm) var(--ease);
}
ul.rc-navbar-dropdown-panel > li > a:hover,
ul.rc-navbar-dropdown-panel > li > a:focus-visible{
  background:var(--paper-2); border-left-color:var(--ray-sec); padding-left:18px;
}
ul.rc-navbar-dropdown-panel > li > a .rc-navbar-badge{ margin-left:auto; }
ul.rc-navbar-dropdown-panel > li + li{ margin-top:2px; }

/* Green and red were literal fills in two accents that are not ours. The
   badge is one shape in two weights: the default, and the one that is
   actually the recommendation. */
.rc-navbar-badge-green,.rc-navbar-badge-red{
  background:var(--paper) !important; background-image:none !important;
  color:var(--ink-2) !important; border:1px solid var(--hairline) !important;
  border-radius:999px !important; padding:3px 9px !important;
  font-size:10px !important; font-weight:600 !important;
  letter-spacing:.07em; text-transform:uppercase; line-height:1.4 !important;
}
.rc-navbar-badge-green{ border-color:var(--ray-g) !important; color:var(--ray-g) !important; }
.rc-navbar-badge-red{ border-color:var(--ray-y) !important; color:var(--ray-y) !important; }

/* ----------------------------------------------------------------------
   THE FOOTER BRAND
   Same bug the nav had: the wordmark is inside the image and the word
   "Recilens" was set again in type beside it. One of them goes, and the
   mark matches the nav's treatment.
   ---------------------------------------------------------------------- */
.rc-footer-mark{ display:flex; align-items:center; gap:0; }
.rc-footer-mark img{ height:52px !important; width:auto; }
.rc-footer-word{ display:none !important; }
@media (max-width:767px){
  .rc-footer-mark{ justify-content:center; }
  .rc-footer-mark img{ height:46px !important; }
}

/* ----------------------------------------------------------------------
   THE MOBILE NAV
   At 320px the bar has a logo on one side and a burger on the other, and
   the logo was the item that gave way. It should not: it is the only
   thing on that bar that says whose site this is.
   ---------------------------------------------------------------------- */
@media (max-width:560px){
  .rc-navbar-logo{ display:none !important; }
  .rc-navbar-logo-container img,header img[src*="logo-mark"]{
    height:42px !important; max-height:42px !important;
  }
  .rc-navbar-main-header,.rc-navbar-main-nav{ min-height:66px; }
}
@media (max-width:380px){
  .rc-navbar-logo-container img,header img[src*="logo-mark"]{
    height:36px !important; max-height:36px !important;
  }
}

/* ----------------------------------------------------------------------
   TAWK: ALL THREE STAY
   The assistant button was hidden when tawk came up, on the reasoning
   that tawk had become the assistant. It has not - our panel carries the
   callback form, the brief and the direct numbers, which tawk does not.
   All three stay, and the stack lifts clear of tawk instead.
   ---------------------------------------------------------------------- */
html[data-tawk="on"] .rc-fab{ display:grid !important; }

/* ----------------------------------------------------------------------
   THE MAP, WITH EVERY ROUTE DRAWN
   Eighteen arcs instead of four. The four with a written overlap band
   stay heavier and opaque; the rest are thin and faint, so the picture
   reads as "everywhere comes here" rather than as a tangle.
   ---------------------------------------------------------------------- */
.rc-arc{ opacity:.26; stroke-width:.9; }
.rc-arc.is-band{ opacity:.85; stroke-width:1.5; }
[data-motion="a"] .rc-arc,[data-motion="b"] .rc-arc{
  animation:rc-arc-flow 9s linear infinite;
  animation-delay:calc(var(--i,0) * -260ms);
  animation-play-state:paused;
}
[data-map].is-live .rc-arc{ animation-play-state:running; }
/* One dash period is 9.5 units, so 95 lands the pattern exactly where it
   started and the loop has no seam. Negative, because the path is drawn
   from the city to the hub and the dots should travel that way. */
@keyframes rc-arc-flow{ to{ stroke-dashoffset:-90; } }   /* 10 periods of 9 */
@media (prefers-reduced-motion:reduce){
  .rc-arc{ stroke-dashoffset:0 !important; animation:none !important; }
}

/* ======================================================================
   PASS 11 — fix pass off the live render
   ====================================================================== */

/* "Contact Us" was wrapping to two lines: the call-to-action took the
   width it needed and the last link gave way. Nav links do not wrap, and
   the button steps out earlier instead. */
.rc-navbar-nav-link{ white-space:nowrap; }
.rc-nav-cta{ margin-left:14px; padding:10px 18px; }


/* The mobile brand row carried the logo and nothing else - a whole bar of
   empty space under the enquiries strip. It gets the same offer as the
   desktop bar, at a size that fits beside the mark. */
.rc-nav-cta-m{
  display:none; align-items:center; gap:7px; white-space:nowrap;
  margin-left:auto; padding:10px 16px; border-radius:999px;
  background:var(--ink); color:var(--paper) !important;
  border:1px solid var(--ink); cursor:pointer; text-decoration:none;
  font-family:var(--font-body); font-size:13px; font-weight:600; line-height:1;
}
.rc-nav-cta-m svg{ width:14px; height:14px; }
.rc-nav-cta-m:active{ transform:translateY(1px); }
.rc-nav-cta-m:focus-visible{ outline:2px solid var(--ray-sec); outline-offset:3px; }

@media (max-width:359px){ .rc-nav-cta-m{ padding:9px 12px; font-size:12px; } }

/* And the mark itself can be bigger on a phone now that it is not
   competing with a duplicate of its own wordmark. */
@media (max-width:560px){
  .rc-navbar-logo-container img,header img[src*="logo-mark"]{
    height:44px !important; max-height:44px !important;
  }
}
@media (max-width:380px){
  .rc-navbar-logo-container img,header img[src*="logo-mark"]{
    height:38px !important; max-height:38px !important;
  }
}


/* ======================================================================
   PASS 12
   ====================================================================== */

/* The nav button was taking a quarter of the bar. Same offer, fewer
   words - the hero says "30 minutes" two lines further down.

   And exactly one of the two buttons shows at any width: the bar's own
   from 1280 up, the compact one on the brand row below it. */
.rc-nav-cta{ padding:10px 16px; font-size:13px; margin-left:12px; }
@media (max-width:1279px){
  .rc-nav-cta{ display:none !important; }
  .rc-nav-cta-m{ display:inline-flex !important; }
}
@media (min-width:1280px){
  .rc-nav-cta{ display:inline-flex !important; }
  .rc-nav-cta-m{ display:none !important; }
}

/* ----------------------------------------------------------------------
   THE MAP, AS TRAFFIC
   Eighteen names on a world map is a packing problem, so every label
   gets a plate (paint-order stroke) and the minor ones step back until
   the section is hovered. The arcs carry a packet each: a line says
   there is a route, a thing moving along it says the route is used.
   ---------------------------------------------------------------------- */
.rc-pin-label{ font-size:11px; }
.rc-pin.is-band .rc-pin-label{ font-size:13px; }
.rc-pin:not(.is-band) .rc-pin-label{
  fill:var(--ink-2); font-weight:500; opacity:.82;
  transition:opacity var(--t-sm) var(--ease), fill var(--t-sm) var(--ease);
}
.rc-map:hover .rc-pin:not(.is-band) .rc-pin-label{ opacity:1; fill:var(--ink); }
.rc-pin{ transition:transform var(--t-sm) var(--ease); }
.rc-pin:hover{ transform-box:fill-box; }

/* Twenty-seven solid curves over one another is a tangle whatever the
   opacity. They are dotted tracks now, and the dots march slowly toward
   India - the line itself shows the direction of travel, so the picture
   reads as traffic rather than as string. */
.rc-arc{
  opacity:.6; stroke-width:1.5; stroke-linecap:round;
  stroke-dasharray:2.5 6.5;
}
.rc-arc.is-band{ opacity:.95; stroke-width:2; stroke-dasharray:3 6; }
.rc-map:hover .rc-arc{ opacity:.7; }
.rc-map:hover .rc-arc.is-band{ opacity:1; }

.rc-packet{ offset-path:var(--path); offset-rotate:0deg; opacity:0; }
[data-motion="a"] .rc-packet,[data-motion="b"] .rc-packet{
  animation:rc-packet 5.5s linear infinite;
  animation-delay:calc(var(--i,0) * -420ms);
  animation-play-state:paused;
}
[data-map].is-live .rc-packet{ animation-play-state:running; }
.rc-packet.is-band{ animation-duration:4.2s; }
@keyframes rc-packet{
  0%       { offset-distance:0%;   opacity:0; }
  8%       { opacity:.95; }
  90%      { opacity:.95; }
  100%     { offset-distance:100%; opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .rc-packet{ display:none; } }

/* ----------------------------------------------------------------------
   CARDS INSIDE THE DRAWINGS
   Rectangles in a stack read as empty cards waiting for content. Marking
   them `cyc` puts them on a rota: one is lit at a time, top to bottom, so
   the drawing has a thing happening in it rather than a list of boxes.
   ---------------------------------------------------------------------- */
.rc-art .cyc,.rc-hero-art-motif .cyc{ transition:none; }
[data-motion="a"] .rc-art-fig.is-live .cyc,
[data-motion="b"] .rc-art-fig.is-live .cyc,
[data-motion="a"] .rc-hero-art-motif.is-live .cyc,
[data-motion="b"] .rc-hero-art-motif.is-live .cyc{
  animation:rc-draw-loop 9s linear infinite, rc-cyc 6s var(--ease) infinite;
}
.cyc.c1{ animation-delay:0s, 0s !important; }
.cyc.c2{ animation-delay:-1.1s, 1.5s !important; }
.cyc.c3{ animation-delay:-2.2s, 3s !important; }
.cyc.c4{ animation-delay:-3.3s, 4.5s !important; }
@keyframes rc-cyc{
  0%,100% { stroke-opacity:.45; }
  8%,22%  { stroke-opacity:1; }
  34%     { stroke-opacity:.45; }
}
@media (prefers-reduced-motion:reduce){
  .rc-art .cyc,.rc-hero-art-motif .cyc{ stroke-opacity:1 !important; animation:none !important; }
}

/* ----------------------------------------------------------------------
   ONE HOVER BEHAVIOUR FOR EVERY CARD
   They had four different ones - some lifted, some changed border, some
   did nothing. A card is a card.
   ---------------------------------------------------------------------- */
.rc-card,.rc-ach,.rc-prod,.rc-pcard,.rc-marks > li,.rc-empty,
.rc-navbar-featured-card,.rc-reviews{
  transition:transform var(--t-sm) var(--ease),
             border-color var(--t-sm) var(--ease),
             box-shadow var(--t-sm) var(--ease);
}
.rc-card:hover,.rc-ach:hover,.rc-prod:hover,.rc-pcard:hover,.rc-marks > li:hover{
  transform:translateY(-4px);
  border-color:var(--ink-3);
  box-shadow:0 12px 30px rgba(0,0,0,.07);
}
[data-theme="dark"] .rc-card:hover,[data-theme="dark"] .rc-ach:hover,
[data-theme="dark"] .rc-prod:hover,[data-theme="dark"] .rc-pcard:hover{
  box-shadow:0 12px 30px rgba(0,0,0,.5);
}
/* brand.css already gives .rc-card::after a corner bracket at the
   bottom right, sized 14px and grown to 22px on hover. A second rule
   here claimed the same pseudo-element for a 2px rule along the top -
   and the two merged into one object: brand's `width:22px` and borders
   with this file's `top:0; left:0; background`. The result was a filled
   22px square in the top-left corner of every card on hover, which is
   the red block in the screenshot.

   One pseudo-element, one job. The corner bracket stays; the lift and
   the shadow below are what this pass adds. */
.rc-card{ position:relative; }
.rc-card::after{ pointer-events:none; }

/* ----------------------------------------------------------------------
   WHERE AM I
   The bar gave no indication of the current section. The active item
   carries a rule that stays drawn; if you are inside a service, it is
   "Services" that carries it, and the rule breathes rather than sits.
   ---------------------------------------------------------------------- */
.rc-navbar-nav-link{ position:relative; }
.rc-navbar-nav-link::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-6px; height:2px;
  background:var(--ray-sec); transform:scaleX(0); transform-origin:50% 50%;
  transition:transform var(--t-sm) var(--ease); pointer-events:none;
}
.rc-navbar-nav-link:hover::after{ transform:scaleX(.55); }
.rc-navbar-nav-link.is-here{ color:var(--ink) !important; font-weight:600; }
.rc-navbar-nav-link.is-here::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:no-preference){
  .rc-navbar-nav-link.is-here::after{ animation:rc-here 2.6s var(--ease) infinite; }
}
@keyframes rc-here{
  0%,100%{ opacity:1; transform:scaleX(1); }
  50%    { opacity:.55; transform:scaleX(.7); }
}
/* And the exact page, inside an open dropdown. */
.rc-navbar-dropdown-panel a.is-here,
ul.rc-navbar-dropdown-panel > li > a.is-here{
  background:var(--paper-2); border-left-color:var(--ray-sec);
  font-weight:600; color:var(--ink) !important;
}

/* ----------------------------------------------------------------------
   THE MOBILE MENU

   The legacy panel has never worked. Its own stylesheet parks it at
   `top:100%; left:-90%` and opens it with `transform:translateX(100%)` -
   which slides it 300px right of a position that is 90% of the viewport
   to the LEFT and a full viewport height DOWN. At 390px that lands it at
   x:-51px, y:800px: off the bottom of the screen, every time. No amount
   of fixing the fold behaviour matters while the panel itself is parked
   outside the window, so it is rebuilt here as a real slide-in.

   The folds themselves are the legacy script's: it already toggles
   `is-open` on each `.rc-navbar-dropdown-item`. Two handlers fighting
   over one menu is worse than one that works, so this only styles it.
   ---------------------------------------------------------------------- */
@media (max-width:1279px){
  .rc-navbar-links-container{
    position:fixed !important;
    inset:0 auto 0 0 !important;
    width:min(340px,86vw) !important;
    height:100dvh !important; max-height:100dvh !important;
    margin:0 !important; padding:0 0 28px !important;
    background:var(--paper) !important; color:var(--ink) !important;
    border-right:1px solid var(--hairline);
    flex-direction:column !important; align-items:stretch !important; gap:0 !important;
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(-102%) !important;
    transition:transform 340ms cubic-bezier(.4,0,.2,1) !important;
    z-index:1100;
  }
  .rc-navbar-links-container.is-open{ transform:translateX(0) !important; }
  /* The dim behind it, drawn by the panel so there is no extra element
     and nothing to clean up if the legacy script changes. */
  .rc-navbar-links-container.is-open{ box-shadow:0 0 0 100vmax rgba(0,0,0,.45); }
  html:has(.rc-navbar-links-container.is-open){ overflow:hidden; }

  /* A close that rides with the panel. The burger is at the top of the
     page; once the menu was scrolled the only way out was to find it
     again. */
  .rc-m-close{
    position:sticky; top:0; z-index:5;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; margin:0;
    background:var(--paper); border-bottom:1px solid var(--hairline);
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-3);
  }
  .rc-m-close button{
    width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
    background:var(--paper); color:var(--ink); border:1px solid var(--hairline);
    cursor:pointer;
  }
  .rc-m-close button svg{ width:19px; height:19px; }

  .rc-navbar-links-container .rc-navbar-nav-link{
    color:var(--ink) !important; padding:15px 18px !important;
    border-bottom:1px solid var(--hairline) !important;
    font-size:var(--fs-16) !important;
  }
  .rc-navbar-links-container .rc-navbar-nav-link::after{ display:none !important; }
  .rc-navbar-links-container .rc-navbar-nav-link.is-here{
    border-left:3px solid var(--ray-sec); padding-left:15px !important;
    background:var(--paper-2);
  }

  /* Each group folds. The chevron is drawn on the row, and it turns. */
  .rc-navbar-dropdown-item > .rc-navbar-nav-link{
    display:flex !important; align-items:center; justify-content:space-between; width:100%;
  }
  .rc-navbar-dropdown-item > .rc-navbar-nav-link::before{
    content:""; width:10px; height:10px; margin-left:auto; flex:0 0 auto;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px); opacity:.5;
    transition:transform var(--t-sm) var(--ease), opacity var(--t-sm) var(--ease);
  }
  .rc-navbar-dropdown-item.is-open > .rc-navbar-nav-link::before{
    transform:rotate(-135deg) translate(-4px,-4px); opacity:1;
  }

  .rc-navbar-dropdown-panel{
    display:block !important; position:static !important;
    opacity:1 !important; visibility:visible !important; transform:none !important;
    box-shadow:none !important; border:0 !important; background:var(--paper-2) !important;
    width:auto !important; min-width:0 !important; margin:0 !important;
    max-height:0; overflow:hidden; padding:0 !important;
    transition:max-height 300ms var(--ease);
  }
  .rc-navbar-dropdown-item.is-open > .rc-navbar-dropdown-panel{
    max-height:1600px; padding:6px 0 10px !important;
  }
  .rc-navbar-dropdown-arrow,.rc-navbar-featured-card{ display:none !important; }
  .rc-navbar-company-grid,.rc-navbar-products-grid{ display:block !important; }
  .rc-navbar-company-col ul{ list-style:none; margin:0; padding:0; }
  .rc-navbar-company-col strong{
    display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-3); margin:12px 18px 2px;
  }
  .rc-navbar-dropdown-panel a{
    display:block; padding:11px 18px; color:var(--ink-2) !important;
    font-size:var(--fs-14); border-left:3px solid transparent; text-decoration:none;
  }
  .rc-navbar-dropdown-panel a:active{ background:var(--paper-3); }
  .rc-navbar-dropdown-panel a.is-here{
    color:var(--ink) !important; font-weight:600;
    border-left-color:var(--ray-sec); background:var(--paper);
  }
  .rc-navbar-product-item{ padding:11px 18px; }
}

/* ----------------------------------------------------------------------
   THE BLOG INDEX
   It can hold a hundred posts, so it needs a way in: a search box and a
   row of category chips, both of which the page already accepted as
   query parameters and neither of which it offered a control for.
   ---------------------------------------------------------------------- */
.rc-blogbar{
  display:grid; gap:16px; margin:0 0 28px;
  padding:18px; border:1px solid var(--hairline); border-radius:var(--r-md);
  background:var(--paper-2);
}
@media (min-width:760px){
  .rc-blogbar{ grid-template-columns:minmax(0,1fr) auto; align-items:center; }
}
.rc-blogbar > *{ min-width:0; }
.rc-blogsearch{ display:flex; gap:10px; min-width:0; }
.rc-blogsearch input{
  flex:1 1 auto; min-width:0; width:100%;
  padding:12px 14px; border-radius:9px;
  border:1px solid var(--hairline); background:var(--paper);
  color:var(--ink); font-family:var(--font-body); font-size:var(--fs-14);
}
.rc-blogsearch input:focus{ outline:2px solid var(--ray-sec); outline-offset:1px; }
.rc-blogsearch button{
  flex:0 0 auto; padding:12px 18px; border-radius:9px; cursor:pointer;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  font-family:var(--font-body); font-size:var(--fs-14); font-weight:600;
}
.rc-chips{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;
}
.rc-chips a{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:8px 13px; border-radius:999px; text-decoration:none;
  border:1px solid var(--hairline); background:var(--paper);
  color:var(--ink-2); font-size:var(--fs-12); font-weight:500;
  transition:border-color var(--t-sm) var(--ease), color var(--t-sm) var(--ease),
             transform var(--t-sm) var(--ease);
}
.rc-chips a:hover{ border-color:var(--ink-3); color:var(--ink); transform:translateY(-2px); }
.rc-chips a.is-here{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}
.rc-chips b{ font-weight:600; opacity:.55; font-variant-numeric:tabular-nums; }
.rc-blog-empty{
  padding:48px 24px; text-align:center; border:1px dashed var(--hairline);
  border-radius:var(--r-md); color:var(--ink-2);
}

/* A filtered grid loses the two-column feature card: the post that had it
   may no longer be the first one visible. */
.rc-postgrid.is-filtered > li:first-child{ grid-column:auto; }
.rc-postgrid.is-filtered > li:first-child .rc-pcard{ grid-template-columns:1fr; }
.rc-postgrid.is-filtered > li:first-child .rc-pcard-cover{ aspect-ratio:16/10; height:auto; }
.rc-postgrid.is-filtered > li:first-child .rc-pcard-title{ font-size:var(--fs-25); }

/* A label that exists for a screen reader and not for the eye. */
.rc-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}


/* ----------------------------------------------------------------------
   THE HERO TICKER
   A headline, two buttons and a lot of white was the shape of every hero.
   This is the page's own list of deliverables, one at a time, rising. It
   is a real card with real content, not a placeholder.

   Pure CSS: one window a line tall, a list translated by one slot at a
   time, and the first item cloned at the end so the loop closes without
   a jump. No JavaScript, so it costs nothing on the LCP path.
   ---------------------------------------------------------------------- */
.rc-hero-tick{
  display:inline-flex; align-items:center; gap:14px; max-width:100%;
  margin:0 0 22px; padding:12px 18px 12px 14px;
  border:1px solid var(--hairline); border-radius:999px;
  background:var(--paper); position:relative; overflow:hidden;
}
.rc-hero-tick::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,
    var(--ray-r) 0 25%, var(--ray-b) 25% 50%,
    var(--ray-g) 50% 75%, var(--ray-y) 75% 100%);
}
.rc-hero-tick-k{
  flex:0 0 auto; font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); padding-left:6px;
}
.rc-hero-tick-win{
  position:relative; overflow:hidden; min-width:0;
  /* Fixed pixels, not em: the window was 22px and the rows 19px, so the
     list drifted a little further out of register on every step until
     two half-lines showed at once. */
  height:24px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.rc-hero-tick-win ul{
  list-style:none; margin:0; padding:0;
  animation:rc-tick-4 16s cubic-bezier(.65,0,.35,1) infinite;
}
.rc-hero-tick-win li{
  height:24px; line-height:24px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  font-size:var(--fs-14); color:var(--ink);
}
/* Five slots: four items and the clone. Each holds, then steps. */
@keyframes rc-tick-4{
  0%,17%   { transform:translateY(0); }
  20%,37%  { transform:translateY(-20%); }
  40%,57%  { transform:translateY(-40%); }
  60%,77%  { transform:translateY(-60%); }
  80%,97%  { transform:translateY(-80%); }
  100%     { transform:translateY(-80%); }
}
@media (prefers-reduced-motion:reduce){
  .rc-hero-tick-win ul{ animation:none; }
}
@media (max-width:600px){
  .rc-hero-tick{ display:flex; border-radius:var(--r-md); padding:12px 14px; }
  .rc-hero-tick-k{ display:none; }
}

/* ======================================================================
   PASS 12 — fix pass off the live phone render
   ====================================================================== */

/* THE FLOAT STACK WAS EATING CLICKS
   `.rc-float` is a fixed grid whose expandable panel is 274x355, so its
   box covers a tall strip of the right-hand side even when the panel is
   closed and nothing is drawn there. Anything underneath that strip was
   unclickable — on a phone that is most of the open menu. The container
   passes pointer events through now; only the buttons themselves take
   them. Found by asking the browser what was actually on top of a menu
   row, not by looking at it. */
.rc-float{ pointer-events:none; }
.rc-float > *{ pointer-events:auto; }

/* And nothing of ours floats over an open menu. */
html:has(.rc-navbar-links-container.is-open) .rc-float,
html:has(.rc-navbar-links-container.is-open) .rc-lang,
html:has(.rc-navbar-links-container.is-open) .rc-sheet{ display:none !important; }

/* The chevron is a ::before, so `margin-left:auto` pushed the *text* to
   the right instead of the arrow. Flex order puts it last where it
   belongs; the text stays on the left. */
@media (max-width:1279px){
  .rc-navbar-dropdown-item > .rc-navbar-nav-link{ justify-content:flex-start !important; }
  .rc-navbar-dropdown-item > .rc-navbar-nav-link::before{ order:2; }
  .rc-navbar-dropdown-item > .rc-navbar-nav-link .rc-navbar-badge{ order:1; }

  /* The language switcher is fixed to the corner and is not a sibling
     of the panel, so a `~` selector never reached it. It is hidden from
     the root while the menu is open, like everything else of ours. */
  .rc-m-close{ padding-left:20px; }

  /* ul.rc-navbar-dropdown-panel carries `padding:10px !important` from
     the desktop rules, and `ul.x` outranks `.x` even with both
     important - so the Packages and Partners folds kept 20px of height
     while collapsed and showed as a grey band under the row. */
  ul.rc-navbar-dropdown-panel{ padding:0 !important; }
  .rc-navbar-dropdown-item.is-open > ul.rc-navbar-dropdown-panel{
    padding:6px 0 10px !important;
  }
}


/* ======================================================================
   PASS 13
   ====================================================================== */

/* ----------------------------------------------------------------------
   THE MEGA-MENU CLOSED BEFORE YOU COULD REACH IT

   The panel is `position:absolute; top:100%; margin-top:15px`, so there
   are fifteen pixels of nothing between the bottom of the word you are
   hovering and the top of the card. The nav script closes on the item's
   `mouseleave` after 150ms, and crossing that gap IS a mouseleave - the
   pointer is over the page, not over the item or the panel.

   A pseudo-element on the panel fills the gap. It belongs to the panel,
   so hovering it keeps the pointer inside the item and the timer never
   starts. Nothing is drawn; it is fifteen pixels of hit area.
   ---------------------------------------------------------------------- */
@media (min-width:1280px){
  .rc-navbar-dropdown-panel::before{
    content:""; position:absolute; left:0; right:0;
    top:-20px; height:20px; background:transparent;
  }
  /* And a little longer on the way out, so a diagonal flick across the
     corner of the card does not shut it. */
  .rc-navbar-dropdown-panel{ transition-duration:.22s !important; }
}

/* The close bar is for the phone panel. It was being inserted into the
   same container on every viewport, so on a desktop it rendered as the
   word "Menu" and an empty button between the logo and Home. */
.rc-m-close{ display:none; }
@media (max-width:1279px){ .rc-m-close{ display:flex; } }

/* ----------------------------------------------------------------------
   THE HOME HERO — a line and three words
   ---------------------------------------------------------------------- */
.rc-hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 18px; padding:7px 14px 7px 12px;
  border:1px solid var(--hairline); border-radius:999px;
  background:var(--paper); color:var(--ink-2);
  font-size:var(--fs-12); font-weight:500; letter-spacing:.01em;
}
.rc-hero-eyebrow b{ color:var(--ink); font-weight:600; }
.rc-hero-eyebrow svg{ width:14px; height:14px; flex:0 0 auto; }
.rc-hero-eyebrow .rc-eyebrow-rail{
  width:3px; height:15px; border-radius:2px; flex:0 0 auto;
  background:linear-gradient(180deg,
    var(--ray-r) 0 25%, var(--ray-b) 25% 50%,
    var(--ray-g) 50% 75%, var(--ray-y) 75% 100%);
}

/* Three words, set as words. The pill version put the keyword and its
   qualifier on one line, which made both of them small and neither of
   them the point. The word leads at display size; the qualifier is a
   caption under it. */
.rc-hero-tags{
  display:grid; gap:0; list-style:none; margin:26px 0 0; padding:0;
  grid-template-columns:repeat(3,minmax(0,max-content));
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.rc-hero-tags li{ min-width:0; position:relative; }
.rc-hero-tags li + li{ border-left:1px solid var(--hairline); }
.rc-hero-tags span{
  display:block; padding:16px 26px 15px;
  transition:background var(--t-sm) var(--ease);
}
.rc-hero-tags li:first-child span{ padding-left:0; }
.rc-hero-tags b{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-25); line-height:1.05; letter-spacing:-.01em;
  color:var(--ink);
}
.rc-hero-tags i{
  display:block; margin-top:5px; font-style:normal;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3);
}
/* The rule under each word is its own colour, and it draws on hover. */
.rc-hero-tags span::after{
  content:""; position:absolute; left:26px; right:26px; bottom:-1px; height:2px;
  background:var(--k); transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-md) var(--ease);
}
.rc-hero-tags li:first-child span::after{ left:0; }
.rc-hero-tags li:nth-child(1){ --k:var(--ray-b); }
.rc-hero-tags li:nth-child(2){ --k:var(--ray-g); }
.rc-hero-tags li:nth-child(3){ --k:var(--ray-y); }
.rc-hero-tags li:hover span::after{ transform:scaleX(1); }
.rc-hero-tags li:hover i{ color:var(--ink-2); }
/* One of the three is underlined at a time, so the row is alive before
   anybody touches it. */
@media (prefers-reduced-motion:no-preference){
  .rc-hero-tags li span::after{ animation:rc-keyword 9s var(--ease) infinite; }
  .rc-hero-tags li:nth-child(2) span::after{ animation-delay:3s; }
  .rc-hero-tags li:nth-child(3) span::after{ animation-delay:6s; }
  .rc-hero-tags li:hover span::after{ animation:none; transform:scaleX(1); }
}
@keyframes rc-keyword{
  0%,2%    { transform:scaleX(0); }
  8%,28%   { transform:scaleX(1); }
  34%,100% { transform:scaleX(0); }
}
@media (max-width:560px){
  .rc-hero-tags{ grid-template-columns:1fr; }
  .rc-hero-tags li + li{ border-left:0; border-top:1px solid var(--hairline); }
  .rc-hero-tags span{ padding:13px 0 12px; }
  .rc-hero-tags span::after{ left:0; right:0; }
  .rc-hero-tags b{ font-size:var(--fs-18); }
}

/* ----------------------------------------------------------------------
   THE MOBILE SHEET — groups that open, rather than eight guesses
   Tapping "Services" used to load one arbitrary service page. It opens
   the list of them now, and only a leaf navigates.
   ---------------------------------------------------------------------- */
.rc-sheet-group{ border-bottom:1px solid var(--hairline); }
.rc-sheet-top{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:16px 0; background:none; border:0; cursor:pointer;
  font-family:var(--font-body); font-size:var(--fs-18); font-weight:500;
  color:var(--ink); text-align:left;
}
.rc-sheet-top small{
  margin-left:auto; font-size:var(--fs-12); color:var(--ink-3); font-weight:400;
}
.rc-sheet-top .rc-sheet-chev{
  flex:0 0 auto; width:11px; height:11px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t-sm) var(--ease), border-color var(--t-sm) var(--ease);
}
.rc-sheet-group[data-open="1"] .rc-sheet-chev{
  transform:rotate(-135deg) translate(-4px,-4px);
  border-color:var(--ink);
}
.rc-sheet-sub{
  max-height:0; overflow:hidden; list-style:none; margin:0; padding:0;
  transition:max-height 300ms var(--ease);
}
.rc-sheet-group[data-open="1"] .rc-sheet-sub{ max-height:1200px; }
.rc-sheet-sub li{ margin:0; }
.rc-sheet-sub a{
  display:block; padding:12px 14px; margin:0 0 2px;
  border-left:2px solid var(--hairline); border-radius:0 8px 8px 0;
  color:var(--ink-2); text-decoration:none; font-size:var(--fs-14);
}
.rc-sheet-sub a:active{ background:var(--paper-2); }
.rc-sheet-sub a.is-here{
  color:var(--ink); font-weight:600; border-left-color:var(--ray-sec);
  background:var(--paper-2);
}
.rc-sheet-sub .rc-sheet-all{
  color:var(--ink); font-weight:600; border-left-color:var(--ink-3);
}
.rc-sheet nav > a.is-here{ color:var(--ink); font-weight:600; }

/* ----------------------------------------------------------------------
   THE MODAL AFTER IT HAS BEEN SENT

   The old success state replaced only the <form>, which left the modal's
   own heading and sub-heading sitting above it — so the panel said "we
   reply within one working day, with a name and a next step" twice, and
   the confirmation itself was an unstyled h3 in the browser's default
   face. The whole panel is replaced now, and it says what happens next
   rather than thanking the reader for their time.
   ---------------------------------------------------------------------- */
.rc-sent{ padding:34px 30px 28px; text-align:left; }
.rc-sent-mark{ display:block; width:52px; height:52px; margin:0 0 18px; }
.rc-sent-mark svg{ width:100%; height:100%; display:block; }
.rc-sent-ring{ transform-origin:center; }
@media (prefers-reduced-motion:no-preference){
  .rc-sent-ring{
    stroke-dasharray:132; stroke-dashoffset:132;
    animation:rc-sent-ring 560ms var(--ease) forwards;
  }
  .rc-sent-tick{
    stroke-dasharray:34; stroke-dashoffset:34;
    animation:rc-sent-tick 340ms var(--ease) 420ms forwards;
  }
}
@keyframes rc-sent-ring{ to{ stroke-dashoffset:0; } }
@keyframes rc-sent-tick{ to{ stroke-dashoffset:0; } }

.rc-sent-h{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-31); line-height:1.08; color:var(--ink);
}
.rc-sent-h:focus{ outline:none; }
.rc-sent-sub{ margin:8px 0 0; color:var(--ink-2); font-size:var(--fs-14); }

.rc-sent-next{
  list-style:none; counter-reset:sent; margin:24px 0 0; padding:0;
  border-top:1px solid var(--hairline);
}
.rc-sent-next li{
  position:relative; padding:14px 0 14px 34px;
  border-bottom:1px solid var(--hairline);
}
.rc-sent-next li::before{
  counter-increment:sent; content:counter(sent);
  position:absolute; left:0; top:15px;
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--hairline); background:var(--paper);
  font-size:10px; font-weight:600; color:var(--ink-3);
}
.rc-sent-next li:first-child::before{
  border-color:var(--ray-g); color:var(--ray-g);
}
.rc-sent-next b{ display:block; font-size:var(--fs-14); font-weight:600; color:var(--ink); }
.rc-sent-next span{ display:block; margin-top:2px; font-size:var(--fs-14); color:var(--ink-2); }

.rc-sent-foot{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
@media (max-width:480px){
  .rc-sent{ padding:26px 20px 22px; }
  .rc-sent-foot .rc-btn{ flex:1 1 100%; justify-content:center; }
}

/* ----------------------------------------------------------------------
   PARTNERS
   From the `partners` table, managed at Partner Management in the admin.
   A card per partner: the logo (or its initials until there is one), what
   kind of partnership it is, where, and one line about the work.
   ---------------------------------------------------------------------- */
.rc-partners{
  display:grid; gap:20px; list-style:none; margin:26px 0 0; padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
}
.rc-partners > li{ min-width:0; }
.rc-partners > li[hidden]{ display:none; }

.rc-partner{
  position:relative; height:100%; display:grid; gap:14px; align-content:start;
  padding:22px; overflow:hidden;
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--r-md);
  transition:transform var(--t-sm) var(--ease),
             border-color var(--t-sm) var(--ease),
             box-shadow var(--t-sm) var(--ease);
}
.rc-partner::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--ray-sec); transform:scaleY(0); transform-origin:50% 0;
  transition:transform var(--t-md) var(--ease);
}
.rc-partner:hover{
  transform:translateY(-4px); border-color:var(--ink-3);
  box-shadow:0 12px 30px rgba(0,0,0,.07);
}
.rc-partner:hover::before{ transform:scaleY(1); }
[data-theme="dark"] .rc-partner:hover{ box-shadow:0 12px 30px rgba(0,0,0,.5); }

.rc-partner-top{ display:flex; align-items:center; gap:14px; min-width:0; }
.rc-partner-logo{
  flex:0 0 auto; width:54px; height:54px; display:grid; place-items:center;
  border:1px solid var(--hairline); border-radius:12px; background:var(--paper-2);
  overflow:hidden;
}
.rc-partner-logo img{
  max-width:40px; max-height:34px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.85;
  transition:filter var(--t-sm) var(--ease), opacity var(--t-sm) var(--ease);
}
.rc-partner:hover .rc-partner-logo img{ filter:none; opacity:1; }
.rc-partner-logo b{
  font-family:var(--font-display); font-weight:400; font-size:var(--fs-18);
  color:var(--ink-3); letter-spacing:.02em;
}
.rc-partner-id{ min-width:0; }
.rc-partner-id h3{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-18); line-height:1.15; color:var(--ink);
  overflow-wrap:anywhere;
}
.rc-partner-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin-top:5px; font-size:var(--fs-12); color:var(--ink-3);
}
.rc-partner-type{
  border:1px solid var(--hairline); border-radius:999px; padding:2px 9px;
  font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-2);
}
.rc-partner p{ margin:0; color:var(--ink-2); font-size:var(--fs-14); }
.rc-partner-go{
  justify-self:start; font-size:var(--fs-12); color:var(--ink-2);
  text-decoration:none; border-bottom:1px solid var(--hairline);
  padding-bottom:2px; overflow-wrap:anywhere;
}
.rc-partner-go:hover{ color:var(--ray-sec); border-bottom-color:var(--ray-sec); }
.rc-partner-go::after{ content:" \2197"; }

.rc-partner-filter{ margin-top:22px; }
.rc-partner-note{
  margin:22px 0 0; font-size:var(--fs-12); padding-left:12px;
  border-left:2px solid var(--hairline);
}