/* ======================================================================
   RECILENS — brand.css
   The visual identity: white ground, black type, and four brand colours
   that appear only as drawn line work.

   The rule that holds the whole thing together: colour is a LINE, never a
   fill. A red panel and a blue panel would fight; a red stroke and a blue
   stroke read as one instrument. That is what keeps a four-colour palette
   on a white page looking deliberate rather than like a toy.
   ====================================================================== */

:root{
  /* Paper and ink. The four rays below are the whole palette, and the rule
     that makes it work is that they are NEVER a fill: no coloured
     background, no coloured button, no coloured badge. Strokes, underlines
     and 1-3px rules only. Everything filled is black or white. */
  --paper:#FFFFFF; --paper-2:#F7F7F5; --paper-3:#EFEFEC;
  --ink:#0A0A0A; --ink-2:#5C5C5C; --ink-3:#8E8E8E;
  --hairline-2:rgba(10,10,10,.05);
  --ray-r:#E5484D; --ray-b:#0B6BCB; --ray-g:#12A150; --ray-y:#F5A524;
  --ray-sec:var(--ray-b);
  --stroke-hair:1px; --stroke:2px; --stroke-bold:3px;
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F4F6F9;
  --text:#0A0A0A;
  --text-2:#55606E;
  --hairline:rgba(10,10,10,.10);

  /* The four. Used as strokes, underlines, rules and numerals — never as a
     background and never as a button. */
  --brand-red:var(--ray-r);
  --brand-blue:var(--ray-b);
  --brand-green:var(--ray-g);
  --brand-yellow:var(--ray-y);

  /* Per-section accent. Every page sets this once and the section rules,
     numerals, underlines and hero strokes all follow it, so two pages read
     as the same system without looking like the same page. */
  --accent-line:var(--brand-blue);
}

[data-theme="dark"]{
  --paper:#0A0A0A; --paper-2:#141414; --paper-3:#1C1C1C;
  --ink:#FAFAFA; --ink-2:#A1A1A1; --ink-3:#6E6E6E;
  --hairline-2:rgba(250,250,250,.06);
  --ray-r:#FF6369; --ray-b:#3E9BFF; --ray-g:#30C46A; --ray-y:#FFB84D;
  --bg:#07090E;
  --surface:#0E1218;
  --surface-2:#131922;
  --text:#F7F9FC;
  --text-2:#9AA6B6;
  --hairline:rgba(247,249,252,.12);
  --brand-red:var(--ray-r);
  --brand-blue:var(--ray-b);
  --brand-green:var(--ray-g);
  --brand-yellow:var(--ray-y);
}

/* Per-family accent. Set on <body> so a service page, a package page and a
   partnership page are recognisably different at a glance while sharing
   every other token. */
body[data-accent="blue"]  { --accent-line:var(--brand-blue); }
body[data-accent="red"]   { --accent-line:var(--brand-red); }
body[data-accent="green"] { --accent-line:var(--brand-green); }
body[data-accent="yellow"]{ --accent-line:var(--brand-yellow); }

/* ----------------------------------------------------------------------
   THE SPECTRUM RULE
   A 2px bar of all four, used once at the top of the document and as the
   divider between major bands. It is the signature and it is cheap: one
   gradient, no image, no request.
   ---------------------------------------------------------------------- */
.rc-spectrum{
  height:3px; width:100%; border:0; margin:0; display:block;
  background:linear-gradient(90deg,
    var(--brand-blue)   0%,   var(--brand-blue)   25%,
    var(--brand-green)  25%,  var(--brand-green)  50%,
    var(--brand-yellow) 50%,  var(--brand-yellow) 75%,
    var(--brand-red)    75%,  var(--brand-red)    100%);
}
.rc-spectrum-top{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-sticky);
  pointer-events:none;
}

/* Section divider: a hairline that carries a short coloured lead-in. */
.rc-section + .rc-section{ border-top:1px solid var(--hairline); }
.rc-section{ position:relative; }
.rc-section > .rc-wrap > .rc-h2{ position:relative; padding-top:24px; }
.rc-section > .rc-wrap > .rc-h2::before{
  content:""; position:absolute; top:0; left:0;
  width:48px; height:3px; background:var(--accent-line);
  transform-origin:0 50%;
}
/* The rule draws itself when the heading arrives. */
[data-motion="a"] .rc-h2::before,
[data-motion="b"] .rc-h2::before{ transform:scaleX(0); }
[data-motion="a"] .rc-in .rc-h2::before,
[data-motion="b"] .rc-in .rc-h2::before,
[data-motion="a"] .rc-h2.rc-in::before,
[data-motion="b"] .rc-h2.rc-in::before{
  transform:scaleX(1); transition:transform var(--t-lg) var(--ease) 120ms;
}

/* ----------------------------------------------------------------------
   HERO — the lens. Four strokes refracting through a line, drawn on load.
   Different accent per family means the same construction reads as a
   different page.
   ---------------------------------------------------------------------- */
.rc-hero{ position:relative; overflow:hidden; }
.rc-hero-art{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.9;
}
.rc-hero > .rc-wrap{ position:relative; z-index:1; }

.rc-hero-art path,.rc-hero-art line,.rc-hero-art circle{
  fill:none; stroke-linecap:round; vector-effect:non-scaling-stroke;
}
/* The draw-on. stroke-dasharray is set per path in the markup so each line
   has its own length; here they simply run. */
.rc-hero-art .draw{
  stroke-dashoffset:var(--len,600);
  animation:rc-draw 1400ms var(--ease) forwards;
}
.rc-hero-art .draw.d2{ animation-delay:120ms; }
.rc-hero-art .draw.d3{ animation-delay:240ms; }
.rc-hero-art .draw.d4{ animation-delay:360ms; }
@keyframes rc-draw{ to{ stroke-dashoffset:0; } }

[data-motion="c"] .rc-hero-art .draw{ stroke-dashoffset:0; animation:none; }

/* ----------------------------------------------------------------------
   TYPE AND CONTROLS
   ---------------------------------------------------------------------- */
.rc-hero-h{ letter-spacing:-.015em; }
.rc-hero-h em{
  font-style:normal; position:relative; white-space:nowrap;
}
/* The one place a headline carries colour: a drawn underline, not coloured
   text. Colouring a word is the tic the brief bans; underlining it is not. */
.rc-hero-h em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.08em;
  background:var(--accent-line); transform:scaleX(0); transform-origin:0 50%;
  animation:rc-underline 700ms var(--ease) 700ms forwards;
}
[data-motion="c"] .rc-hero-h em::after{ transform:scaleX(1); animation:none; }
@keyframes rc-underline{ to{ transform:scaleX(1); } }

/* Buttons never carry an underline. The legacy sheets underline every <a>,
   and "See our work" is an <a> styled as a button. */
a.rc-btn,a.rc-btn:hover,a.rc-btn:focus,
.rc-btn,.rc-cta-row a,.rc-cta-row a:hover{ text-decoration:none; }

.rc-btn{
  border-radius:999px;
  background:var(--text); color:var(--bg);
  border:1px solid var(--text);
  font-weight:600; letter-spacing:-.005em;
  padding:13px 22px; min-height:46px;
}
.rc-btn:hover{ background:var(--accent-line); border-color:var(--accent-line); color:#fff; }
.rc-btn.rc-sec{
  background:transparent; color:var(--text); border-color:var(--hairline);
}
.rc-btn.rc-sec:hover{
  background:transparent; color:var(--text);
  border-color:var(--accent-line); box-shadow:inset 0 0 0 1px var(--accent-line);
}
.rc-btn:focus-visible{ outline:2px solid var(--accent-line); outline-offset:3px; }

/* Text links get the drawn brass-free underline in the accent. */
.rc-link{
  color:var(--text); text-decoration:none;
  background-image:linear-gradient(var(--accent-line),var(--accent-line));
  background-repeat:no-repeat; background-position:0 100%;
  background-size:0% 2px; transition:background-size var(--t-sm) var(--ease);
  padding-bottom:2px;
}
.rc-link:hover,.rc-link:focus-visible{ background-size:100% 2px; }

/* ----------------------------------------------------------------------
   CARDS AND LISTS — hairline objects on white, lifted by a colour edge on
   hover rather than by a shadow.
   ---------------------------------------------------------------------- */
.rc-card{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-md); box-shadow:none; position:relative;
  overflow:hidden; transition:border-color var(--t-sm) var(--ease),
    transform var(--t-sm) var(--ease);
}
.rc-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent-line); transform:scaleY(0); transform-origin:50% 0;
  transition:transform var(--t-sm) var(--ease);
}
.rc-card:hover{ transform:translateY(-3px); border-color:var(--text); }
.rc-card:hover::before{ transform:scaleY(1); }

/* Each card in a grid takes the next brand colour, so a row of six reads as
   the spectrum rather than six of the same. */
.rc-grid > .rc-card:nth-child(4n+1)::before{ background:var(--brand-blue); }
.rc-grid > .rc-card:nth-child(4n+2)::before{ background:var(--brand-green); }
.rc-grid > .rc-card:nth-child(4n+3)::before{ background:var(--brand-yellow); }
.rc-grid > .rc-card:nth-child(4n+4)::before{ background:var(--brand-red); }

.rc-deliver li{ border-color:var(--hairline); background:var(--surface); }
.rc-tick{ border-color:var(--accent-line); }
.rc-tick::after{ border-color:var(--accent-line); }

.rc-chip{
  border-color:var(--hairline); background:var(--surface); color:var(--text-2);
  transition:border-color var(--t-sm) var(--ease), color var(--t-sm) var(--ease);
}
.rc-chip:hover{ border-color:var(--accent-line); color:var(--text); }

.rc-step-n{ color:var(--accent-line); }
.rc-steps > li,.rc-lens-steps > li{ background:var(--surface); border-color:var(--hairline); }
.rc-alt{ background:var(--surface-2); }
.rc-currency{
  background:var(--surface); border-color:var(--hairline);
  border-left:3px solid var(--accent-line);
}
.rc-notfor{ border-left-color:var(--brand-red); }

/* Accordion: the open one carries the accent on its edge. */
.rc-acc{ background:var(--surface); border-color:var(--hairline); }
.rc-acc[data-open="1"]{ border-left:3px solid var(--accent-line); }

/* ----------------------------------------------------------------------
   THE SCROLL-DRAWN THREAD
   One continuous line down the page that draws as you scroll, changing
   colour band by band. It is the "lively drawing" the identity is built
   around, and it costs one SVG and no JavaScript beyond a scroll listener.
   ---------------------------------------------------------------------- */
.rc-thread{
  position:fixed; left:0; top:0; width:3px; height:100dvh;
  z-index:var(--z-sticky); pointer-events:none;
  background:linear-gradient(180deg,
    var(--brand-blue), var(--brand-green), var(--brand-yellow), var(--brand-red));
  transform:scaleY(var(--rc-progress,0)); transform-origin:50% 0;
}
@media (max-width:768px){ .rc-thread{ width:2px; } }
[data-motion="c"] .rc-thread{ display:none; }

/* ----------------------------------------------------------------------
   MODAL — no visible scrollbar track, and it fits the viewport.
   ---------------------------------------------------------------------- */
.rc-modal{
  scrollbar-width:thin; scrollbar-color:var(--hairline) transparent;
  border:1px solid var(--hairline); box-shadow:0 32px 80px rgba(10,10,10,.18);
}
.rc-modal::-webkit-scrollbar{ width:6px; }
.rc-modal::-webkit-scrollbar-track{ background:transparent; }
.rc-modal::-webkit-scrollbar-thumb{
  background:var(--hairline); border-radius:999px;
}
.rc-modal-title{ padding-top:16px; position:relative; }
.rc-modal-title::before{
  content:""; position:absolute; top:0; left:0; width:40px; height:3px;
  background:var(--accent-line);
}

/* ----------------------------------------------------------------------
   FOOTER — social marks as inline SVG, sized and spaced properly.
   The old markup used Font Awesome <i> elements, and Font Awesome is no
   longer loaded, so every icon was an empty circle.
   ---------------------------------------------------------------------- */
.recilens-social-icon{
  display:inline-grid; place-items:center; width:40px; height:40px;
  border:1px solid var(--hairline); border-radius:50%;
  color:var(--text-2);
  transition:color var(--t-sm) var(--ease), border-color var(--t-sm) var(--ease),
             transform var(--t-sm) var(--ease);
}
.recilens-social-icon:hover{
  color:var(--text); border-color:var(--accent-line); transform:translateY(-2px);
}
.recilens-social-icon svg{ width:18px; height:18px; }
.recilens-social-icon:nth-child(4n+1):hover{ border-color:var(--brand-blue); }
.recilens-social-icon:nth-child(4n+2):hover{ border-color:var(--brand-green); }
.recilens-social-icon:nth-child(4n+3):hover{ border-color:var(--brand-yellow); }
.recilens-social-icon:nth-child(4n+4):hover{ border-color:var(--brand-red); }

/* ----------------------------------------------------------------------
   EMPTY STATES — a dashed box on white reads as unfinished. A coloured
   left edge and a solid hairline reads as deliberate.
   ---------------------------------------------------------------------- */
.rc-empty{
  border:1px solid var(--hairline); border-left:3px solid var(--accent-line);
  background:var(--surface-2);
}

/* ----------------------------------------------------------------------
   BLOG — an editorial list, not a card grid of grey rectangles.
   ---------------------------------------------------------------------- */
.rc-posts{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.rc-posts > li{ border-top:1px solid var(--hairline); }
.rc-posts > li:last-child{ border-bottom:1px solid var(--hairline); }
.rc-post{
  display:grid; gap:8px 32px; padding:32px 0; align-items:start;
  grid-template-columns:1fr; text-decoration:none; color:inherit;
  position:relative;
}
@media (min-width:768px){
  .rc-post{ grid-template-columns:140px 1fr auto; }
}
.rc-post::before{
  content:""; position:absolute; left:-16px; top:32px; bottom:32px; width:3px;
  background:var(--accent-line); transform:scaleY(0); transform-origin:50% 0;
  transition:transform var(--t-sm) var(--ease);
}
.rc-post:hover::before{ transform:scaleY(1); }
.rc-post-date{
  font-size:var(--fs-12); color:var(--text-2);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.rc-post-title{
  font-family:var(--font-display); font-size:var(--fs-31); font-weight:400;
  line-height:1.1; margin:0; max-width:24ch;
}
.rc-post:hover .rc-post-title{ color:var(--accent-line); }
.rc-post-more{ font-size:var(--fs-14); color:var(--text-2); white-space:nowrap; }

/* ----------------------------------------------------------------------
   PROSE — legal and blog bodies on a white page.
   ---------------------------------------------------------------------- */
.rc-prose a{ text-decoration-color:var(--accent-line); }
.rc-prose h2{ padding-top:16px; border-top:1px solid var(--hairline); }

/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .rc-hero-art .draw{ stroke-dashoffset:0; animation:none; }
  .rc-hero-h em::after{ transform:scaleX(1); animation:none; }
  .rc-thread{ display:none; }
}

/* ======================================================================
   CORRECTIONS AFTER LOOKING AT IT
   ====================================================================== */

/* 1. The header. The legacy sheet paints it from --rc-bg-dark, which the
      mapping pointed at --bg; between the two it landed mid-grey. On a white
      page the header is white, separated by a hairline and the spectrum. */
.rc-navbar-sticky-wrapper,.rc-navbar,.recilens-nav,
.rc-navbar-container,.rc-navbar-inner{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--hairline);
  box-shadow:none;
}
.rc-navbar-top-bar,.rc-navbar-topbar,.recilens-topbar{
  background:var(--surface-2) !important;
  color:var(--text-2) !important;
  border-bottom:1px solid var(--hairline);
  background-image:none !important;   /* the old gradient */
}
.rc-navbar-top-bar a,.rc-navbar-topbar a{ color:var(--text) !important; }
.rc-navbar-nav-link,.rc-navbar a{ color:var(--text) !important; }
.rc-navbar-nav-link:hover{ color:var(--accent-line) !important; }
.rc-navbar-dropdown-panel{
  background:var(--surface) !important; color:var(--text) !important;
  border:1px solid var(--hairline); box-shadow:0 24px 64px rgba(10,10,10,.10);
}
.rc-navbar-dropdown-panel a{ color:var(--text) !important; }
.rc-navbar-dropdown-panel a:hover{ color:var(--accent-line) !important; }
.rc-navbar-product-icon{ color:var(--accent-line); }

/* 2. The hero strokes were running straight through the headline. They now
      live in the right-hand half only, behind the text column, and they are
      quiet enough to read as paper texture rather than as lines competing
      with the words. */
.rc-hero-art{ opacity:.55; left:auto; right:0; width:min(62%,900px); }
@media (max-width:900px){
  .rc-hero-art{ width:100%; opacity:.28; }
}
.rc-hero > .rc-wrap{ isolation:isolate; }
.rc-hero-h,.rc-hero-sub{ position:relative; }
/* A soft white bleed behind the text so a stroke never crosses a letter. */
.rc-hero-h::before,.rc-hero-sub::before{
  content:""; position:absolute; inset:-8px -24px -8px -16px; z-index:-1;
  background:radial-gradient(120% 140% at 0% 50%,
    var(--bg) 62%, color-mix(in srgb, var(--bg) 0%, transparent) 100%);
}

/* 3. The consent banner is part of the page, so it follows the page. */
.rc-cookie-banner{
  background:var(--surface) !important;
  color:var(--text) !important;
  border:1px solid var(--hairline) !important;
  border-top:3px solid var(--accent-line) !important;
  box-shadow:0 -12px 40px rgba(10,10,10,.08) !important;
  border-radius:var(--r-md);
}
.rc-cookie-title{ color:var(--text) !important; }
.rc-cookie-text{ color:var(--text-2) !important; }
.rc-cookie-banner button{
  border-radius:999px !important; min-height:44px; font-weight:600;
  border:1px solid var(--hairline) !important;
  background:transparent !important; color:var(--text) !important;
}
.rc-cookie-banner button:first-of-type{
  background:var(--text) !important; color:var(--bg) !important;
  border-color:var(--text) !important;
}
.rc-cookie-modal{ background:rgba(10,10,10,.45) !important; }

/* 4. The optical grid was reading as graph paper. It is a texture, not a
      feature: one tenth the contrast and a wider pitch. */
[data-wm="grid"]::before{
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(80% 60% at 50% 40%, #000 30%, transparent 100%);
}
[data-wm="dispersion"]::before{ opacity:.02; }

/* 5. The hero needs air on a wide screen, and the right half needs a reason
      to exist. The lens sits there; the text column is capped so the two do
      not collide. */
.rc-hero-h{ max-width:15ch; }
.rc-hero-sub{ max-width:46ch; }
@media (min-width:1024px){
  .rc-hero{ padding-block:120px 104px; }
}

/* The grey band was .rc-navbar-main-header at rgba(15,15,30,.5) - a
   half-opaque dark layer sitting on the white wrapper, which composites to
   mid-grey. It is the glass treatment from the old dark theme. On white the
   header is white, with the hairline doing the separating. */
.rc-navbar-main-header{
  background:var(--surface) !important;
  backdrop-filter:none !important;
  border-bottom:1px solid var(--hairline) !important;
}
.rc-navbar-main-header.is-scrolled,.rc-navbar-main-header.scrolled{
  background:color-mix(in srgb, var(--surface) 88%, transparent) !important;
  backdrop-filter:blur(8px) !important;
}
@supports not (backdrop-filter:blur(8px)){
  .rc-navbar-main-header.is-scrolled,.rc-navbar-main-header.scrolled{
    background:var(--surface) !important;
  }
}
/* The wordmark was white-on-dark. */
.rc-navbar-logo-text,.rc-navbar-brand,.rc-navbar-logo,
.rc-navbar-main-header .rc-navbar-logo-text *{ color:var(--text) !important; }
.rc-navbar-menu-toggle span,.rc-navbar-hamburger span{ background:var(--text) !important; }

/* The mobile drawer is the same dark panel. */
.rc-navbar-links-container{
  background:var(--surface) !important;
  border-right:1px solid var(--hairline);
}

/* ======================================================================
   FOOTER — its own component now, on the page's own grid.
   ====================================================================== */
.rc-footer{ background:var(--surface-2); color:var(--text); margin-top:0; }
.rc-footer .rc-spectrum{ margin-bottom:56px; }

.rc-footer-grid{
  display:grid; gap:40px 32px; padding-bottom:48px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
}
.rc-footer-grid > *{ min-width:0; }
@media (min-width:1024px){
  .rc-footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr; }
}

.rc-footer-word{
  font-family:var(--font-display); font-size:var(--fs-31); line-height:1; margin:0;
}
.rc-footer-word span{ color:var(--accent-line); }
.rc-footer-line{ margin:8px 0 20px; color:var(--text-2); font-size:var(--fs-14); }
.rc-footer-addr{ color:var(--text-2); font-size:var(--fs-14); line-height:1.7; margin:0 0 20px; }

.rc-footer-social{ display:flex; gap:8px; list-style:none; margin:0; padding:0; }

.rc-footer-col h2{
  font-family:var(--font-body); font-size:var(--fs-12); font-weight:700;
  letter-spacing:.06em; margin:0 0 14px; color:var(--text);
}
.rc-footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rc-footer-col a{
  color:var(--text-2); text-decoration:none; font-size:var(--fs-14);
  transition:color var(--t-xs) var(--ease);
}
.rc-footer-col a:hover{ color:var(--text); }
.rc-footer-col li span{ color:var(--text-2); font-size:var(--fs-12); opacity:.7; }

.rc-footer-talk .rc-btn{ margin-top:18px; width:100%; justify-content:center; }
.rc-footer-note{
  margin-top:14px; font-size:var(--fs-12); color:var(--text-2); line-height:1.6;
  padding-left:12px; border-left:2px solid var(--accent-line);
}

.rc-footer-base{
  display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--hairline); padding-block:20px 28px;
  font-size:var(--fs-12); color:var(--text-2);
}
.rc-footer-base p{ margin:0; }
.rc-footer-base ul{
  display:flex; flex-wrap:wrap; gap:8px 18px; list-style:none; margin:0; padding:0;
}
.rc-footer-base a,.rc-linkish{
  color:var(--text-2); text-decoration:none; font:inherit;
  background:none; border:0; padding:0; cursor:pointer;
}
.rc-footer-base a:hover,.rc-linkish:hover{ color:var(--text); }


/* ======================================================================
   THE ASSEMBLY HERO
   ====================================================================== */
.rc-hero-split{
  display:grid; gap:32px; align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:1024px){
  .rc-hero-split{ grid-template-columns:1fr minmax(0,.72fr); gap:56px; }
}
.rc-hero-split > *{ min-width:0; }

.rc-assembly{ position:relative; width:100%; }
.rc-assembly svg{
  display:block; width:100%; height:auto;
  transform:translate3d(var(--px,0),var(--py,0),0);
  will-change:transform;
}
.rc-assembly .as-part{ opacity:.9; }
@media (max-width:1023px){
  .rc-hero-split .rc-assembly{ order:-1; max-height:300px; overflow:hidden; }
}
@media (max-width:420px){
  .rc-hero-split .rc-assembly{ max-height:240px; }
}

/* The logo is the one place the brand colours are allowed to be filled,
   because they are the logo. Nothing here may recolour it, and it needs to
   be legible - it was rendering at 40px. */
.rc-navbar-logo img,.rc-navbar-brand img,.recilens-logo img,header img[src*="logo"]{
  width:auto !important; height:52px !important; max-height:52px !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,header img[src*="logo"]{
    height:40px !important; max-height:40px !important;
  }
}

/* ======================================================================
   HOVER, EVERYWHERE. Every interactive thing answers the pointer.
   ====================================================================== */
.rc-navbar-nav-link{ position:relative; }
.rc-navbar-nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--ray-sec); transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-sm) var(--ease);
}
.rc-navbar-nav-link:hover::after,.rc-navbar-nav-link:focus-visible::after{ transform:scaleX(1); }

.rc-footer-col a,.rc-footer-base a{ position:relative; }
.rc-footer-col a::after,.rc-footer-base a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-xs) var(--ease);
}
.rc-footer-col a:hover::after,.rc-footer-base a:hover::after{ transform:scaleX(1); }

.rc-deliver li{ transition:border-color var(--t-sm) var(--ease), transform var(--t-sm) var(--ease); }
.rc-deliver li:hover{ border-color:var(--ray-sec); transform:translateX(3px); }
.rc-steps > li,.rc-lens-steps > li{ transition:border-color var(--t-sm) var(--ease); }
.rc-steps > li:hover,.rc-lens-steps > li:hover{ border-color:var(--ray-sec); }
.rc-acc button:hover{ color:var(--ray-sec); }
.rc-post:hover .rc-post-more{ color:var(--ray-sec); }
.rc-related a:hover{ color:var(--ray-sec); }

/* Corner brackets on every card, drawn on entry, extending on hover. */
.rc-card{ position:relative; }
.rc-card::after{
  content:""; position:absolute; right:10px; bottom:10px;
  width:14px; height:14px;
  border-right:2px solid var(--ray-sec); border-bottom:2px solid var(--ray-sec);
  opacity:0; transition:opacity var(--t-sm) var(--ease),
    width var(--t-sm) var(--ease), height var(--t-sm) var(--ease);
}
.rc-card:hover::after{ opacity:1; width:22px; height:22px; }

/* Section ray rotation: adjacent sections never share a colour. */
.rc-section:nth-of-type(4n+1){ --ray-sec:var(--ray-b); }
.rc-section:nth-of-type(4n+2){ --ray-sec:var(--ray-g); }
.rc-section:nth-of-type(4n+3){ --ray-sec:var(--ray-y); }
.rc-section:nth-of-type(4n+4){ --ray-sec:var(--ray-r); }
.rc-section > .rc-wrap > .rc-h2::before{ background:var(--ray-sec); }
.rc-card::before{ background:var(--ray-sec); }

/* Print: the whole site as a clean blueprint. Procurement prints things. */
@media print{
  .rc-spectrum-top,.rc-thread,.rc-chat,.rc-modal-root,.rc-cookie-banner,
  .rc-navbar-sticky-wrapper,.rc-assembly,.rc-hero-art{ display:none !important; }
  body{ background:#fff !important; color:#000 !important; }
  .rc-section{ padding-block:18pt !important; break-inside:avoid; }
  .rc-card,.rc-steps > li,.rc-deliver li{ border:1pt solid #999 !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
  .rc-footer{ border-top:1pt solid #999; }
}