/* RDTech site: draft-style.css scoped under #rd. Generated by build/m1/tools/scope-css.js; do not hand-edit. */
#rd#rd#rd,#rd#rd#rd :where(*:not(svg):not(svg *)),#rd#rd#rd :where(*)::before,#rd#rd#rd :where(*)::after{all:revert;box-sizing:border-box}
#rd#rd#rd svg{vertical-align:revert;overflow:revert;box-sizing:border-box}
html:has(#rd){background:#f3f3f1}body:has(#rd),body:has(#rd) #wrapwrap,#rd#rd#rd#rd{background:transparent}
html:has(#rd){-webkit-text-size-adjust:auto;text-size-adjust:auto}
#rd#rd#rd{display:block;font-size:16px;-webkit-tap-highlight-color:initial}
#rd#rd#rd ::selection,#rd#rd#rd *::selection{background-color:Highlight}
@supports (-moz-appearance:none){#rd#rd#rd ::selection,#rd#rd#rd *::selection{color:HighlightText}}
html.rd-hold #rd#rd#rd .fade{animation:none;opacity:.001}
html.rd-hold #rd#rd#rd .mtrack,html.rd-hold #rd#rd#rd .ftile img{animation-name:none}
html:has(#rd) .o_skip_to_content{display:none!important}
html.rd-swap{overflow-anchor:none}
@media (prefers-reduced-motion:reduce){html.rd-hold #rd#rd#rd .fade{opacity:1}}
html.rd-preview #rd#rd#rd .fade{animation:none}html.rd-preview #rd#rd#rd .reveal{opacity:1;transform:none}

  #rd#rd#rd,html:has(#rd){
    --bg:#f3f3f1; --card:#fff; --navy:#042c53; --blue:#1a5fa8; --gold:#b8960a;
    --ink:#0a2138; --slate:#5b6573; --muted:#9aa3af; --line:#e4e4e0;
    --dark:#06182e; --maxw:1208px; --rad:10px;
  }
  #rd#rd#rd *{box-sizing:border-box}
  html:has(#rd){scroll-behavior:smooth}
  #rd#rd#rd{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55}
  #rd#rd#rd a{color:inherit;text-decoration:none}
  #rd#rd#rd svg{display:block}
  #rd#rd#rd .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

  /* eyebrow */
  #rd#rd#rd .eb{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--slate)}
  #rd#rd#rd .eb .star{width:16px;height:16px;color:var(--gold)}
  #rd#rd#rd .eb.up{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--gold)}

  #rd#rd#rd h1,#rd#rd#rd h2,#rd#rd#rd h3,#rd#rd#rd h4{margin:0;color:var(--navy);letter-spacing:-.02em;font-weight:700;line-height:1.08}
  #rd#rd#rd .display{font-size:clamp(38px,5vw,62px);font-weight:800;letter-spacing:-.03em}
  #rd#rd#rd .h2{font-size:clamp(28px,3.3vw,42px);font-weight:700}
  #rd#rd#rd .h3{font-size:23px}
  #rd#rd#rd .lead{color:var(--slate);font-size:15.5px;line-height:1.65;max-width:52ch}
  #rd#rd#rd .small{font-size:14px;color:var(--slate)}

  #rd#rd#rd .btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:8px;font-weight:600;font-size:14.5px;cursor:pointer;border:1px solid transparent;transition:.16s}
  #rd#rd#rd .btn .ar{transition:.16s}#rd#rd#rd .btn:hover .ar{transform:translateX(3px)}
  #rd#rd#rd .btn-blue{background:var(--blue);color:#fff}#rd#rd#rd .btn-blue:hover{background:#15518f}
  #rd#rd#rd .btn-dark{background:var(--navy);color:#fff}#rd#rd#rd .btn-dark:hover{background:#063a6b}
  #rd#rd#rd .btn-out{background:transparent;border-color:#cfd4da;color:var(--navy)}#rd#rd#rd .btn-out:hover{border-color:var(--blue);color:var(--blue)}
  #rd#rd#rd .btn-gold{background:var(--gold);color:#fff}
/* 6 October: the top bar's links that look like buttons keep the browser's own button font, as the buttons they replace had */
#rd#rd#rd .nav a.btn{font:-webkit-small-control;font-size:14.5px;font-weight:600;line-height:normal;text-align:center}
@supports (-moz-osx-font-smoothing:auto){#rd#rd#rd .nav a.btn{font-family:-apple-system}}

  #rd#rd#rd .chip{display:inline-block;background:var(--gold);color:#fff;font-weight:700;font-size:12px;padding:5px 11px;border-radius:6px;letter-spacing:.01em}
  #rd#rd#rd .numchip{display:inline-flex;align-items:center;justify-content:center;background:var(--gold);color:#fff;font-weight:700;font-size:13px;width:34px;height:26px;border-radius:6px}

  /* nav */
  #rd#rd#rd .nav{position:sticky;top:0;z-index:60;background:rgba(243,243,241,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  #rd#rd#rd .nav-in{display:flex;align-items:center;height:74px;max-width:var(--maxw);margin:0 auto;padding:0 28px;gap:8px}
  #rd#rd#rd .logo{font-weight:800;font-size:23px;color:var(--navy);letter-spacing:-.02em}#rd#rd#rd .logo sup{color:var(--blue);font-size:11px}
  #rd#rd#rd .nlinks{display:flex;gap:4px;margin:0 auto}
  #rd#rd#rd .nlink{padding:8px 14px;border-radius:7px;font-size:15px;font-weight:500;color:var(--slate);cursor:pointer;transition:.15s}
  #rd#rd#rd .nlink:hover{color:var(--navy)}#rd#rd#rd .nlink.active{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--gold);text-decoration-thickness:2px}
  #rd#rd#rd .dd{position:relative}
  #rd#rd#rd .ddm{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(4,44,83,.12);padding:7px;min-width:260px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
  #rd#rd#rd .dd.open .ddm{opacity:1;visibility:visible;transform:none}
  #rd#rd#rd .ddi{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--slate)}
  #rd#rd#rd .ddi:hover{background:var(--bg);color:var(--navy)}#rd#rd#rd .ddi .ic{color:var(--gold)}

  #rd#rd#rd section{position:relative}
  #rd#rd#rd .pad{padding:78px 0}#rd#rd#rd .pad-sm{padding:52px 0}

  /* hero (home) */
  #rd#rd#rd .hero{background:linear-gradient(160deg,#063a6b,#042c53);color:#fff;border-radius:0 0 26px 26px;overflow:hidden;position:relative}
  #rd#rd#rd .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(4,44,83,.97) 0%,rgba(4,44,83,.9) 30%,rgba(4,44,83,.55) 58%,rgba(4,44,83,.15) 100%),radial-gradient(circle at 82% 8%,rgba(26,95,168,.35),transparent 55%)}
  #rd#rd#rd .hero-in{position:relative;z-index:2;padding:84px 28px 70px}
  #rd#rd#rd .hero h1{color:#fff}
  #rd#rd#rd .hero .lead{color:#c5d6ea;max-width:46ch}
  #rd#rd#rd .hero .tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:7px 14px;border-radius:30px;font-size:13px;color:#dceaf8;font-weight:500}
  #rd#rd#rd .hero .tag .d{width:7px;height:7px;border-radius:50%;background:#5fe08a}
  #rd#rd#rd .herocta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

  /* brand strip */
  #rd#rd#rd .brands{display:flex;align-items:center;gap:8px 38px;flex-wrap:wrap;padding:22px 0}
  #rd#rd#rd .brands .lab{font-size:13px;color:var(--muted);font-weight:600;max-width:90px;line-height:1.3}
  #rd#rd#rd .blogo{font-size:18px;font-weight:700;color:#aab3bf;letter-spacing:-.01em}

  /* logo marquee */
  #rd#rd#rd .msec{padding:22px 0;overflow:hidden}
  #rd#rd#rd .mrow{display:flex;align-items:center;gap:28px}
  #rd#rd#rd .mlab{font-size:13px;color:var(--muted);font-weight:600;line-height:1.3;flex:0 0 auto;max-width:96px}
  #rd#rd#rd .mmask{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
  #rd#rd#rd .mtrack{display:flex;align-items:center;gap:40px;width:max-content;animation:mqScroll 32s linear infinite}
  #rd#rd#rd .mtrack:hover{animation-play-state:paused}
  #rd#rd#rd .mtrack .lg{flex:0 0 auto;width:108px;height:32px;display:flex;align-items:center;justify-content:center}
  #rd#rd#rd .mtrack img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;object-fit:contain;opacity:.72;filter:grayscale(15%);transition:opacity .2s,filter .2s}
  #rd#rd#rd .mtrack img:hover{opacity:1;filter:grayscale(0)}
  @keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(max-width:700px){#rd#rd#rd .mlab{display:none}}

  /* intro 3col */
  #rd#rd#rd .intro{display:grid;grid-template-columns:.42fr 1.08fr 1fr;gap:44px;align-items:stretch}
  #rd#rd#rd .story-img{margin-top:20px;flex:1;border-radius:16px;overflow:hidden;background:#06335f;box-shadow:0 20px 44px rgba(4,44,83,.14);min-height:220px}
  #rd#rd#rd .story-img img{width:100%;height:100%;object-fit:cover;display:block}
  #rd#rd#rd .intro-img{border-radius:16px;overflow:hidden;background:#06335f;box-shadow:0 26px 54px rgba(4,44,83,.16);height:100%;min-height:420px}
  @media(max-width:980px){#rd#rd#rd .intro-img{height:auto;min-height:0;aspect-ratio:4/3}}
  #rd#rd#rd .intro-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  #rd#rd#rd .intro-img:hover img{transform:scale(1.03)}
  @media(max-width:560px){#rd#rd#rd .intro-img{aspect-ratio:4/3}}

  /* service mini cards */
  #rd#rd#rd .scards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:14px;align-items:stretch}
  #rd#rd#rd .midblock{display:grid;grid-template-columns:.92fr 1.08fr;gap:22px;margin-top:84px}
  #rd#rd#rd .collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px}
  #rd#rd#rd .cimg{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#0a4480,#06335f);min-height:186px}
  #rd#rd#rd .cimg.tall{grid-column:1;grid-row:1 / span 2}
  #rd#rd#rd .cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  #rd#rd#rd .midcards{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:20px}
  #rd#rd#rd .midcards .scard{display:flex;flex-direction:column;border-radius:12px}
  #rd#rd#rd .midcards .scard h4{margin-top:0;margin-bottom:14px;font-size:19px;line-height:1.3;min-height:2.6em;font-weight:600;color:var(--navy)}
  #rd#rd#rd .midcards .scard .h4{margin:0 0 14px;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--navy);min-height:2.6em}
  #rd#rd#rd .midcards .scard p{font-size:14.5px;line-height:1.6;flex:0}
  @media(max-width:980px){#rd#rd#rd .midblock{grid-template-columns:1fr;gap:26px}}
  @media(max-width:560px){#rd#rd#rd .midcards{grid-template-columns:1fr}#rd#rd#rd .collage{grid-template-columns:1fr;grid-template-rows:auto}#rd#rd#rd .cimg.tall{grid-column:auto;grid-row:auto}#rd#rd#rd .cimg{min-height:180px}}
  #rd#rd#rd .scard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;height:100%}
  #rd#rd#rd .scard:hover{box-shadow:0 14px 30px rgba(4,44,83,.08);transform:translateY(-3px)}
  #rd#rd#rd .sq{width:46px;height:46px;border-radius:11px;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  #rd#rd#rd .scard h4{font-size:17px;line-height:1.3;min-height:2.6em;margin:0 0 12px 0;font-weight:600;color:var(--navy)}
  #rd#rd#rd .scard .h4{margin:0 0 12px 0;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--navy);min-height:2.6em}#rd#rd#rd .scard p{margin:0;font-size:13.5px;color:var(--slate)}

  /* stats row */
  #rd#rd#rd .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);padding-top:30px}
  #rd#rd#rd .stat .n{font-size:clamp(36px,4vw,54px);font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1}
  #rd#rd#rd .stat .n span{color:var(--gold)}
  #rd#rd#rd .stat .l{font-weight:700;color:var(--navy);font-size:15px;line-height:1.3;min-height:2.6em;margin-top:10px}
  #rd#rd#rd .stat .s{font-size:13px;color:var(--slate);margin-top:3px}

  /* tailored solutions list */
  #rd#rd#rd .srow{display:grid;grid-template-columns:236px 1.5fr 1fr;gap:28px;padding:24px 0;border-top:1px solid var(--line);align-items:start;cursor:pointer;transition:.15s}
  #rd#rd#rd .srow:hover{background:rgba(255,255,255,.5)}
  #rd#rd#rd .sthumb{position:relative;width:236px;height:158px;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,#0a4480,#06335f)}
  #rd#rd#rd .sthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  #rd#rd#rd .smid .snum{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:18px}
  #rd#rd#rd .fc{background:#fff;padding:22px;display:flex;flex-direction:column;min-height:auto;border:1px solid var(--line);border-radius:12px}
  #rd#rd#rd .fc .numchip{font-size:13px;font-weight:700;color:#fff;background:var(--gold);border-radius:6px;padding:6px 10px;display:inline-block;margin-bottom:18px;width:fit-content}
  #rd#rd#rd .fc h4{margin:0 0 14px 0;font-size:16px;font-weight:600;color:var(--navy);line-height:1.3;min-height:2.6em}
  #rd#rd#rd .fc p{margin:0;font-size:14px;line-height:1.6;color:var(--slate)}
  #rd#rd#rd .srow h4{font-size:19px;color:var(--navy)}
  #rd#rd#rd .srow .h4{margin:0;font-size:19px;font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--navy)}
  #rd#rd#rd .srow .desc{color:var(--slate);font-size:14.5px;margin:9px 0 14px;max-width:46ch}
  #rd#rd#rd .srow .more{color:var(--navy);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:9px}
  #rd#rd#rd .srow .more .arr{width:24px;height:24px;border-radius:50%;background:var(--gold);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
  #rd#rd#rd .inc h6{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px;font-weight:600}
  #rd#rd#rd .inc .h6{margin:0 0 12px;font-size:12.5px;font-weight:600;line-height:1.55;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  #rd#rd#rd .inc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  #rd#rd#rd .inc li{font-size:14px;color:var(--slate);display:flex;align-items:center;gap:10px}
  #rd#rd#rd .inc li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}
  /* ---- capability accordion (service pages) ---- */
  #rd#rd#rd .acc{display:flex;flex-direction:column;gap:10px;margin-top:6px}
  #rd#rd#rd .acc-item{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:box-shadow .16s}
  #rd#rd#rd .acc-item.open{box-shadow:0 10px 26px rgba(4,44,83,.08);border-color:#d9d9d4}
  #rd#rd#rd .acc-head{display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;user-select:none}
  #rd#rd#rd .acc-head .adot{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--tint,#f4f7fb);color:var(--gold);display:flex;align-items:center;justify-content:center;background:#faf6ea}
  #rd#rd#rd .acc-head h5{margin:0;font-size:15.5px;font-weight:700;color:var(--navy);flex:1}
  #rd#rd#rd .acc-head .h5{margin:0;font-size:15.5px;font-weight:700;line-height:1.55;letter-spacing:normal;color:var(--navy);flex:1}
  #rd#rd#rd .acc-head .chev{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .2s}
  #rd#rd#rd .acc-item.open .chev{transform:rotate(180deg)}
  #rd#rd#rd .acc-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
  #rd#rd#rd .acc-item.open .acc-body{max-height:220px}
  #rd#rd#rd .acc-body p{margin:0;padding:0 18px 16px 64px;font-size:14px;line-height:1.6;color:var(--slate)}

  /* process steps */
  #rd#rd#rd .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
  #rd#rd#rd .step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;border-top:3px solid var(--gold)}
  #rd#rd#rd .step .chip{margin-bottom:30px}
  #rd#rd#rd .step h4{font-size:18px;line-height:1.3;min-height:2.6em}#rd#rd#rd .step .h4{margin:0;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--navy);min-height:2.6em}#rd#rd#rd .step p{margin:8px 0 0;font-size:13.5px;color:var(--slate)}

  /* dark cta band */
  #rd#rd#rd .darkcta{background:linear-gradient(160deg,#063a6b,#042c53);color:#fff;border-radius:22px;padding:60px;position:relative;overflow:hidden}
  #rd#rd#rd .darkcta::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 0,rgba(26,95,168,.4),transparent 55%)}
  #rd#rd#rd .darkcta>*{position:relative;z-index:2}
  #rd#rd#rd .darkcta h2{color:#fff;max-width:18ch}#rd#rd#rd .darkcta p{color:#c5d6ea;margin:16px 0 0;max-width:48ch}

  /* testimonials */
  #rd#rd#rd .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
  #rd#rd#rd .tcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:14px}
  #rd#rd#rd .tcard .q{color:var(--ink);font-size:15px;line-height:1.6}
  #rd#rd#rd .tcard .who{display:flex;align-items:center;gap:12px;margin-top:auto}
  #rd#rd#rd .av{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
  #rd#rd#rd .who .nm{font-weight:700;font-size:14px;color:var(--navy)}#rd#rd#rd .who .rl{font-size:12.5px;color:var(--muted)}

  /* client logo carousel */
  #rd#rd#rd .crsl-wrap{position:relative;margin-top:38px}
  #rd#rd#rd .crsl{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none}
  #rd#rd#rd .crsl::-webkit-scrollbar{display:none}
  #rd#rd#rd .ccard{scroll-snap-align:start;flex:0 0 auto;width:270px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:16px}
  #rd#rd#rd .ccard .q{color:var(--ink);font-size:14px;line-height:1.6;flex:1}
  #rd#rd#rd .clogo{width:76px;height:76px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto;box-shadow:0 6px 16px rgba(4,44,83,.07)}
  #rd#rd#rd .clogo img{max-width:70%;max-height:70%;object-fit:contain;display:block}
  #rd#rd#rd .ccard .cinfo{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
  #rd#rd#rd .crsl-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

  /* badge carousel (4-up) */
  #rd#rd#rd .bdg-crsl{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;margin-top:34px;padding-bottom:6px;-ms-overflow-style:none;scrollbar-width:none}
  #rd#rd#rd .bdg-crsl::-webkit-scrollbar{display:none}
  #rd#rd#rd .bslot{scroll-snap-align:start;flex:0 0 calc((100% - 36px)/3);aspect-ratio:2/1;background:#fff;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;padding:4px;overflow:hidden}
  #rd#rd#rd .bslot img{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px}
  #rd#rd#rd .bslot .bnm{font-weight:700;font-size:16px;color:#aab3bf;letter-spacing:-.01em;text-align:center}
  @media(max-width:520px){#rd#rd#rd .bslot{flex:0 0 100%;aspect-ratio:2/1}}
  #rd#rd#rd .cbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);transition:background .15s}
  #rd#rd#rd .cbtn:hover{background:var(--warm)}
  #rd#rd#rd .cbtn svg{width:16px;height:16px}
  @media(max-width:700px){#rd#rd#rd .ccard{width:230px}}
  #rd#rd#rd .tstat{background:var(--navy);color:#fff;border-radius:14px;padding:24px;display:flex;flex-direction:column;justify-content:center}
  #rd#rd#rd .tstat .n{font-size:40px;font-weight:800;letter-spacing:-.03em}#rd#rd#rd .tstat .n span{color:#ffd76b}
  #rd#rd#rd .tstat .l{color:#bcd2ec;font-size:13.5px;margin-top:6px}

  /* insights */
  #rd#rd#rd .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
  #rd#rd#rd .bcard{cursor:pointer}
  #rd#rd#rd .bimg{height:200px;border-radius:14px;background:linear-gradient(150deg,#0a4480,#06335f);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
  #rd#rd#rd .bimg svg{color:rgba(255,255,255,.18);width:72px;height:72px}
  #rd#rd#rd .bmeta{display:flex;align-items:center;gap:12px;margin:16px 0 8px}
  #rd#rd#rd .bmeta .date{font-size:13px;color:var(--muted)}
  #rd#rd#rd .bcard h4{font-size:18px;line-height:1.25;min-height:2.5em}
  #rd#rd#rd .bcard .h4{margin:0;font-size:18px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--navy);min-height:2.5em}#rd#rd#rd .bcard p{margin:8px 0 0;font-size:14px;color:var(--slate)}

  /* page header (inner pages) */
  #rd#rd#rd .phead{padding:64px 0 8px}
  #rd#rd#rd .phead .display{max-width:18ch}
  #rd#rd#rd .phead .lead{margin-top:18px}

  /* wide hero image */
  #rd#rd#rd .wimg{height:420px;border-radius:18px;background:linear-gradient(150deg,#0a4480,#06335f);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(4,44,83,.1)}
  #rd#rd#rd .wimg .big{color:rgba(255,255,255,.14)}
  #rd#rd#rd .spec{position:absolute;left:18px;bottom:16px;font-size:11px;color:rgba(255,255,255,.6);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:5px 10px;border-radius:7px;font-weight:500}

  /* overview block */
  #rd#rd#rd .ov{display:grid;grid-template-columns:.5fr 1.1fr 1fr;gap:40px;align-items:start}
  #rd#rd#rd .ov2{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
  #rd#rd#rd .ov2 .body{max-width:52ch}
  @media(max-width:980px){#rd#rd#rd .ov2{grid-template-columns:1fr;gap:28px}}
  #rd#rd#rd .ov .right p{margin:0 0 14px;color:var(--slate);font-size:14.5px}

  /* feature cards (numbered) */
  #rd#rd#rd .feat{display:grid;grid-template-columns:.95fr 1.05fr;gap:22px;margin-top:14px}
  #rd#rd#rd .fcollage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px}
  #rd#rd#rd .ftile{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,#0a4480,#06335f);min-height:150px;display:flex;align-items:center;justify-content:center}
  #rd#rd#rd .ftile.tall{grid-column:1;grid-row:1 / span 2}
  #rd#rd#rd .ftile svg{color:rgba(255,255,255,.16);width:64px;height:64px}
  #rd#rd#rd .ftile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  #rd#rd#rd .fcards{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0;background:transparent;border:none;border-radius:0;overflow:visible}

  /* form cta */
  #rd#rd#rd .formcta{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(4,44,83,.1)}
  #rd#rd#rd .formside{background:#fff;padding:42px}
  #rd#rd#rd .formside h2{font-size:30px}#rd#rd#rd .formside .lead{margin:14px 0 22px}
  #rd#rd#rd .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  #rd#rd#rd .ffield{margin-bottom:14px}
  #rd#rd#rd .ffield label{display:block;font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:6px}
  #rd#rd#rd .ffield input,#rd#rd#rd .ffield textarea{width:100%;border:1px solid var(--line);background:#fafafa;border-radius:8px;padding:11px 13px;font-family:inherit;font-size:14px;color:var(--ink)}
  #rd#rd#rd .ffield input:focus,#rd#rd#rd .ffield textarea:focus{outline:none;border-color:var(--blue);background:#fff}
  #rd#rd#rd .fimg{background:linear-gradient(150deg,#0a4480,#06335f);min-height:100%;display:flex;align-items:center;justify-content:center;position:relative}
  #rd#rd#rd .fimg svg{color:rgba(255,255,255,.16);width:110px;height:110px}

  /* mvv cards */
  #rd#rd#rd .mvv{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
  #rd#rd#rd .mc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
  #rd#rd#rd .mc .sq{margin-bottom:18px}
  #rd#rd#rd .mc h4{font-size:18px;line-height:1.3;min-height:2.6em}
  #rd#rd#rd .mc .h4{margin:0;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--navy);min-height:2.6em}#rd#rd#rd .mc p{margin:9px 0 0;font-size:13.5px;color:var(--slate)}

  /* team */
  #rd#rd#rd .team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
  #rd#rd#rd .tm{border-radius:14px;overflow:hidden;position:relative;min-height:300px;background:linear-gradient(160deg,#0a4480,#06335f);display:flex;align-items:flex-end}
  #rd#rd#rd .tm .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.18)}
  #rd#rd#rd .tm .card{position:relative;z-index:2;background:#fff;margin:14px;padding:14px;border-radius:10px;width:calc(100% - 28px)}
  #rd#rd#rd .tm .card .nm{font-weight:700;font-size:15px;color:var(--navy)}#rd#rd#rd .tm .card .rl{font-size:12.5px;color:var(--muted)}
  #rd#rd#rd .tm.dark{background:var(--navy);color:#fff;align-items:flex-start;padding:26px}
  #rd#rd#rd .tm.dark p{font-size:14px;color:#bcd2ec;line-height:1.55}

  /* footer */
  #rd#rd#rd .footer{background:var(--dark);color:#fff;margin-top:0}
  #rd#rd#rd .footer .wrap{padding-top:60px;padding-bottom:26px}
  #rd#rd#rd .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr 1.2fr;gap:30px}
  #rd#rd#rd .footer .logo{color:#fff}#rd#rd#rd .footer p{font-size:13.5px;line-height:1.7;margin:14px 0 0;max-width:30ch}
  #rd#rd#rd .footer h6{color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 15px;font-weight:600}
  #rd#rd#rd .footer .h6{margin:0 0 15px;font-size:12px;font-weight:600;line-height:1.55;letter-spacing:.08em;text-transform:uppercase;color:#fff}
  #rd#rd#rd .footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  #rd#rd#rd .footer li{font-size:13.5px;cursor:pointer}#rd#rd#rd .footer li:hover{color:#fff}
  #rd#rd#rd .fbar{border-top:1px solid #16314f;margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12.5px;color:#fff}

  #rd#rd#rd .fade{animation:f .5s cubic-bezier(.16,1,.3,1)}@keyframes f{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  @media(max-width:980px){
    #rd#rd#rd .intro,#rd#rd#rd .ov,#rd#rd#rd .feat,#rd#rd#rd .formcta{grid-template-columns:1fr;gap:26px}
    #rd#rd#rd .scards,#rd#rd#rd .stats,#rd#rd#rd .steps,#rd#rd#rd .tgrid,#rd#rd#rd .bgrid,#rd#rd#rd .mvv,#rd#rd#rd .team,#rd#rd#rd .fgrid{grid-template-columns:repeat(2,1fr)}
    #rd#rd#rd .srow{grid-template-columns:1fr;gap:14px}#rd#rd#rd .sthumb{width:100%;height:210px}
    #rd#rd#rd .fcards{grid-template-columns:1fr}#rd#rd#rd .formcta .fimg{min-height:220px}
    #rd#rd#rd .nlinks{display:none}
  }
  @media(max-width:560px){
    #rd#rd#rd .scards,#rd#rd#rd .stats,#rd#rd#rd .steps,#rd#rd#rd .tgrid,#rd#rd#rd .bgrid,#rd#rd#rd .mvv,#rd#rd#rd .team,#rd#rd#rd .fgrid{grid-template-columns:1fr}
    #rd#rd#rd .darkcta,#rd#rd#rd .formside{padding:30px}#rd#rd#rd .pad{padding:52px 0}
  }
  @media(prefers-reduced-motion:reduce){#rd#rd#rd *{animation:none!important;transition:none!important}}

  /* ---- production: real image slots (fall back to gradient+icon if missing) ---- */
  #rd#rd#rd .zoneimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
  #rd#rd#rd .wimg .big,#rd#rd#rd .ftile svg,#rd#rd#rd .fimg svg,#rd#rd#rd .bimg svg,#rd#rd#rd .tm .ph{z-index:0}
  #rd#rd#rd .herobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;z-index:0}
  @media(max-width:700px){#rd#rd#rd .hero::after{background:linear-gradient(180deg,rgba(4,44,83,.82),rgba(4,44,83,.9))}}
  #rd#rd#rd .tm .zoneimg{border-radius:14px}
  /* 6 Oct: phone crops keep each picture's subject */
  @media(max-width:980px){
    #rd#rd#rd .intro-img img[src*="about-our-story-photo"]{object-position:50% 15%}
    #rd#rd#rd .zoneimg[src*="service-thumbnail-Document-Management"]{object-position:62% 50%}
    #rd#rd#rd .zoneimg[src*="service-thumbnail-IT-Security-Operations"]{object-position:72% 50%}
    #rd#rd#rd .zoneimg[src*="service-thumbnail-Network-Security"]{object-position:78% 50%}
    #rd#rd#rd .zoneimg[src*="service-thumbnail-Managed-IT-Services"]{object-position:35% 50%}
    #rd#rd#rd .zoneimg[src*="service-thumbnail-Smart-Office-Solutions"]{object-position:58% 50%}
    #rd#rd#rd .zoneimg[src*="service-thumbnail-ERP-Odoo"]{object-position:78% 50%}
  }
  /* 6 Oct: phone pack (phone audit rows in brackets) */
  @media(max-width:980px){
    /* [3] the form card and its photo are one card, no grey strip between them */
    #rd#rd#rd .formcta{gap:0}
    /* [9] About top picture keeps the standing man and the team */
    #rd#rd#rd .wimg .zoneimg[src*="about-hero-banner"]{object-position:65% 50%}
  }
  @media(max-width:560px){
    /* [1] card titles no longer keep an empty second line */
    #rd#rd#rd .midcards .scard h4,#rd#rd#rd .scard h4,#rd#rd#rd .step h4,#rd#rd#rd .mc h4,#rd#rd#rd .fc h4,#rd#rd#rd .bcard h4,#rd#rd#rd .stat .l,#rd#rd#rd .midcards .scard .h4,#rd#rd#rd .scard .h4,#rd#rd#rd .step .h4.st-home,#rd#rd#rd .mc .h4,#rd#rd#rd .bcard .h4{min-height:0}
    /* [2][18] a pair of buttons stacks, each full width, so no label breaks; buttons are at least 44px tall */
    #rd#rd#rd div:has(> .btn ~ .btn){flex-wrap:wrap}
    #rd#rd#rd div:has(> .btn ~ .btn) > .btn{flex:1 1 100%;justify-content:center}
    #rd#rd#rd .darkcta div:has(> .btn),#rd#rd#rd .darkcta div:has(> div > .btn){width:100%}
    #rd#rd#rd .darkcta .btn{width:100%;justify-content:center}
    #rd#rd#rd .btn{min-height:44px}
    /* [4] even gaps between form fields; wider fields on Contact */
    #rd#rd#rd .frow{row-gap:0}
    #rd#rd#rd .formside{padding:28px 22px}
    #rd#rd#rd .contact-grid .formside{padding:28px 22px !important}
    /* [19] the form heading matches the other section headings */
    #rd#rd#rd .formside h2{font-size:28px}
    /* [5] the four numbers sit two by two */
    #rd#rd#rd .stats{grid-template-columns:1fr 1fr;gap:22px 16px}
    /* [6] one whole story card at a time, arrows easy to tap */
    #rd#rd#rd .crsl .ccard{width:100%;flex:0 0 100%}
    #rd#rd#rd .crsl .ccard:has(.cbadge){min-height:0}
    #rd#rd#rd .cbtn{width:44px;height:44px}
    /* [7] footer columns two by two, the logo and line across the top */
    #rd#rd#rd .footer .fgrid{grid-template-columns:1fr 1fr;gap:30px 16px}
    #rd#rd#rd .footer .fgrid > div:first-child{grid-column:1 / -1}
    /* [8] headings and short lines break evenly, no lone last word */
    #rd#rd#rd h1,#rd#rd#rd h2,#rd#rd#rd h3,#rd#rd#rd h4{text-wrap:balance}
    #rd#rd#rd p,#rd#rd#rd .tag,#rd#rd#rd .fbar span{text-wrap:pretty}
    /* [11] accordion titles get more of the card's width */
    #rd#rd#rd .acc-head{padding:14px 12px;gap:10px}
    /* [12] the story back link is the same readable grey as the articles' (D5) */
    #rd#rd#rd .story-side .backbtn{color:#6f7a89}
    /* [10] Home collage: the bottom picture keeps the face */
    #rd#rd#rd .collage .cimg img[src*="hero-collage-bottom-right"]{object-position:50% 20%}
  }
  /* 7 Oct: call and email links reach 44 px tall on phones; padding is taken back by the margin so the text stays put */
  @media(max-width:980px){
    #rd#rd#rd .darkcta a.rdl,#rd#rd#rd .contact-info .val a.rdl{display:inline-block;padding:14px 0;margin:-14px 0}
  }
  /* 7 Oct: on the narrowest phones the dark box button keeps one line */
  @media(max-width:374px){
    #rd#rd#rd .darkcta .btn{font-size:13.5px;padding:12px 14px;white-space:nowrap}
  }
  /* ---- form states ---- */
  #rd#rd#rd .rdtech-form .btn[disabled]{opacity:.7;cursor:default}
  #rd#rd#rd .form-ok{background:#0f5132;color:#d1fadf;border-radius:10px;padding:18px 20px;font-size:15px;line-height:1.55}
  #rd#rd#rd .form-ok b{color:#fff}
  #rd#rd#rd .form-err{color:#b42318;font-size:13.5px;margin-top:8px}
  /* 6 Oct: required marks (e); at 479px and narrower the form is one column and the fields are 16px so a phone does not zoom in (f) */
  #rd#rd#rd .req{color:#1a5fa8;margin-left:3px}
  #rd#rd#rd .reqnote{font-size:12px;color:#5b6b7f;margin-top:8px}
  @media (max-width:479px){
    #rd#rd#rd .frow{grid-template-columns:1fr}
    #rd#rd#rd .ffield input,#rd#rd#rd .ffield textarea{font-size:16px}
  }
  /* ---- contact page ---- */
  #rd#rd#rd .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(4,44,83,.1)}
  #rd#rd#rd .contact-info{background:linear-gradient(160deg,#063a6b,#042c53);color:#fff;padding:42px;display:flex;flex-direction:column;gap:22px}
  #rd#rd#rd .contact-info h3{color:#fff}
  #rd#rd#rd .contact-info .h3{color:#fff;font-size:18.72px}
  #rd#rd#rd .ci-item{display:flex;gap:13px;align-items:flex-start}
  #rd#rd#rd .ci-item .ic{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  #rd#rd#rd .ci-item .lab{font-size:12.5px;color:#9fc0e2;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
  #rd#rd#rd .ci-item .val{font-size:15px;color:#fff;margin-top:2px}
  @media(max-width:980px){#rd#rd#rd .contact-grid{grid-template-columns:1fr}}

  /* blog post pages */
  #rd#rd#rd .backbtn{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;margin-bottom:22px}
  #rd#rd#rd .story-side .backbtn{color:#6f7a89}
  #rd#rd#rd .backbtn:hover{color:var(--navy)}
  #rd#rd#rd .post-hero{width:100%;max-height:480px;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(4,44,83,.1)}
  #rd#rd#rd .post-hero img{width:100%;height:100%;max-height:480px;object-fit:cover;display:block}
  /* 29 September: space for the cover before its picture arrives; the picture's own ratio takes over once it is known */
  #rd#rd#rd .post-hero img{aspect-ratio:auto 900/474}
  #rd#rd#rd .article{max-width:720px;margin:0 auto}
  #rd#rd#rd .ah3{font-size:21px;font-weight:700;color:var(--navy);margin-top:36px;letter-spacing:-.01em}
  #rd#rd#rd .abody{margin-top:12px;font-size:15.5px;line-height:1.75;color:var(--ink)}
  #rd#rd#rd .pullq{border-left:4px solid var(--gold);padding:8px 0 8px 24px;margin:38px 0 38px 14px;font-size:21px;line-height:1.55;font-style:italic;font-weight:600;color:var(--navy)}
  #rd#rd#rd .alink{color:var(--blue);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  @media(max-width:700px){#rd#rd#rd .pullq{font-size:18px;margin-left:0}#rd#rd#rd .post-hero{border-radius:12px}}

  /* ---- motion system ---- */
  #rd#rd#rd .nav-in{transition:height .25s cubic-bezier(.4,0,.2,1)}
  #rd#rd#rd .nav.shrunk{background:rgba(243,243,241,.97);box-shadow:0 2px 14px rgba(4,44,83,.07)}
  #rd#rd#rd .nav.shrunk .nav-in{height:58px}
  #rd#rd#rd .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
  #rd#rd#rd .reveal.in{opacity:1;transform:translateY(0)}
  @keyframes kenburns{0%{transform:scale(1)}100%{transform:scale(1.07)}}
  #rd#rd#rd .ftile img{animation:kenburns 16s ease-in-out infinite alternate}
  #rd#rd#rd .bimg img{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  #rd#rd#rd .bcard:hover .bimg img{transform:scale(1.06)}
  #rd#rd#rd .srow .more .arr{transition:transform .25s cubic-bezier(.16,1,.3,1)}
  #rd#rd#rd .srow:hover .more .arr{transform:translateX(4px)}
  @media(prefers-reduced-motion:reduce){#rd#rd#rd .reveal{opacity:1;transform:none;transition:none}#rd#rd#rd .ftile img{animation:none}}
  /* 7 Oct: with less motion on, the badge row stands still (6 Oct), so it wraps into rows and every badge shows */
  @media(prefers-reduced-motion:reduce){#rd#rd#rd .bdg-crsl{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}#rd#rd#rd .bdg-crsl .bslot:last-child:has(img[alt="Ricoh authorized distributor"]){display:none}}
  @media(prefers-reduced-motion:reduce) and (max-width:520px){#rd#rd#rd .bslot{flex:0 0 calc((100% - 18px)/2)}}

/* RDTech client success stories: stories.src.css scoped under #rd. Generated by build/m4/stories/tools/scope-stories.js; do not hand-edit. Appended after rdtech.css in website.rdtech_assets. */
  /* ---- client success stories (26 September 2026) ----
     Written like docs/reference/draft-style.css (plain selectors, the draft's tokens); build/m4/stories/tools/scope-stories.js
     prefixes every rule with #rd#rd#rd the way build/m1/tools/scope-css.js does and writes stories.css, the file that ships.
     Where it goes: appended after rdtech.css inside the style element of the shared view website.rdtech_assets (view 4308), so every
     page gets it once. Nothing in rdtech.css changes. */

  /* the client badge: initials in the client's own colour (Gilbert's sample: 64 px round, white bold initials) */
  #rd#rd#rd .cbadge{width:64px;height:64px;border-radius:50%;color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1;display:flex;align-items:center;justify-content:center;flex:0 0 auto;user-select:none}
  #rd#rd#rd .cbadge.c-rwandair{background:#0d1b2a}
  #rd#rd#rd .cbadge.c-airtel-rwanda{background:#e4002b}
  #rd#rd#rd .cbadge.c-ab-rwanda-plc{background:#0e7c86}
  #rd#rd#rd .cbadge.c-prime-insurance{background:#7a1e2e}
  #rd#rd#rd .cbadge.c-gtbank-rwanda{background:#c8471a}
  #rd#rd#rd .cbadge.c-rra{background:#34418c}
  #rd#rd#rd .cbadge.c-brd{background:#1e7a4a}
  #rd#rd#rd .cbadge.c-urwego-finance{background:#5c2d91}

  /* Home carousel cards (scoped to cards with a badge: the Solutions page carries the draft's logo cards in the same .ccard markup, found 26 September): the draft's .ccard, .q, .cinfo stay; the name, the category line and the link are the sample's.
     .cinfo is a column of a fixed minimum height (two-line name, two-line category, the link pinned at the bottom) so the hairline,
     the name row and the link sit at the same height on every card, as in the sample, whatever the length of the statement above. */
  #rd#rd#rd .ccard .cbadge ~ .cinfo{display:flex;flex-direction:column;min-height:126px}
  #rd#rd#rd .ccard .cbadge ~ .cinfo .nm{font-weight:700;font-size:15px;line-height:1.3;color:var(--navy)}
  #rd#rd#rd .ccard .cbadge ~ .cinfo .rl{font-size:13px;line-height:1.4;color:var(--slate);margin:3px 0 14px;min-height:2.8em}
  /* the strip's height lands on the draft's sub-pixel phase (26 September): the draft's cards are 404.125 px tall (496.09375 under 701 px),
     so everything below the strip sits .125 (.09375) past a whole pixel. Ours would sit elsewhere and every edge below would be drawn
     half a pixel off. The min-height adds under one pixel to the tallest card and keeps the rest of Home on the draft's grid. */
  #rd#rd#rd .crsl .ccard:has(.cbadge){min-height:429.125px}
  @media(max-width:700px){#rd#rd#rd .crsl .ccard:has(.cbadge){min-height:474.09375px}}
  #rd#rd#rd .ccard .clink{display:inline-flex;align-items:center;gap:6px;margin-top:auto;align-self:flex-start;color:var(--blue);font-weight:700;font-size:14px;transition:color .16s}
  #rd#rd#rd .ccard .clink .ar{transition:transform .16s}
  #rd#rd#rd .ccard .clink:hover{color:#15518f}#rd#rd#rd .ccard .clink:hover .ar{transform:translateX(3px)}
  #rd#rd#rd .ccard .clink:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
  #rd#rd#rd .backbtn:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
#rd#rd#rd a.rdl{color:inherit;text-decoration:none;text-decoration-color:inherit;text-decoration-thickness:inherit;cursor:inherit}
#rd#rd#rd a.rdl:focus-visible,#rd#rd#rd #ddb:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
/* 6 October: a larger tap area for footer links and the Back link on a phone; the extra padding is taken back by the negative margin */
@media (max-width:479px){#rd#rd#rd .footer a{padding:8px 0;margin:-8px 0;display:inline-block}#rd#rd#rd .backbtn{padding:8px 0;margin-top:-8px;margin-bottom:14px}}

  /* story pages: the draft's two-column overview grid (.ov2 on the service pages). Left, the client: back link, badge, name, category,
     kept in view while the right column scrolls. Right, the four sections in the draft's article type (.ah3, .abody). One column under 980. */
  #rd#rd#rd .story{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
  #rd#rd#rd .story-side{position:sticky;top:96px}
  #rd#rd#rd .story-side .cbadge{width:96px;height:96px;font-size:22px;box-shadow:0 10px 24px rgba(4,44,83,.14);margin:6px 0 24px}
  #rd#rd#rd .story-side .display{max-width:14ch}
  #rd#rd#rd .story-cat{margin:14px 0 0;font-size:15.5px;line-height:1.5;font-weight:500;color:var(--slate)}
  #rd#rd#rd .story-body{max-width:720px}
  #rd#rd#rd .story-body .ah3{margin-top:36px}
  #rd#rd#rd .story-body .ah3:first-child{margin-top:0}
  #rd#rd#rd .story-body .abody{margin-bottom:0}
  #rd#rd#rd .story-impact{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
  #rd#rd#rd .story-impact li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.6;color:var(--ink)}
  #rd#rd#rd .story-impact li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
  @media(max-width:980px){
    #rd#rd#rd .story{grid-template-columns:1fr;gap:0}
    #rd#rd#rd .story-side{position:static}
    #rd#rd#rd .story-body{border-top:1px solid var(--line);margin-top:40px;padding-top:36px}
  }
  @media(max-width:560px){
    #rd#rd#rd .story-side .cbadge{width:76px;height:76px;font-size:18px}
    #rd#rd#rd .story-body{margin-top:32px;padding-top:28px}
  }

  /* ---- customer logos on the story cards and story pages (5 October 2026) ----
     The initials circle becomes a white rounded tile of the same height (card heights stay as they were); Prime Insurance's logo is on
     its own blue, so its tile is that blue. Same class cbadge, plus clogo-tile. Story page tile is 192 x 96 (152 x 76 under 561 px). */
  #rd#rd#rd .cbadge.clogo-tile{width:128px;height:64px;border-radius:12px;background:#fff;border:1px solid #e4e4e0;padding:8px 12px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
  #rd#rd#rd .cbadge.clogo-tile img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;margin:auto}
  #rd#rd#rd .cbadge.clogo-tile.c-prime-insurance{background:#00a4db;border-color:#00a4db}
  #rd#rd#rd .story-side .cbadge.clogo-tile{width:192px;height:96px;border-radius:16px;padding:12px 16px}
  @media(max-width:560px){#rd#rd#rd .story-side .cbadge.clogo-tile{width:152px;height:76px;border-radius:14px;padding:10px 12px}}


  /* ---- phone menu (below the draft's 980 px breakpoint, where the draft hides .nlinks and shows no menu; Patrick, 26 September:
     the missing bar is a bug). Above 980 px nothing here applies: the three new elements are display:none and the desktop bar is
     the draft's. Below it the panel IS the nav's own .nlinks, restyled, so the links, the active underline, the Solutions list with
     its ERP rule and the in-place page switch are the desktop's; only the "Book a consultation" button at the bottom is a second copy. ---- */
  #rd#rd#rd .rd-mtog,#rd#rd#rd .rd-mback,#rd#rd#rd .rd-mcta{display:none}
  html.rd-menu{overflow:hidden}   /* the root only: Odoo gives body height:100%, and a hidden body would scroll inside itself and reset the page to the top */
  @media(max-width:980px){
    #rd#rd#rd .nav .nav-in>.btn{margin-left:auto;transition:opacity .16s,visibility 0s .16s,background .16s}
    #rd#rd#rd .nav.rd-open .nav-in>.btn{opacity:0;visibility:hidden}
    #rd#rd#rd .rd-mtog{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;margin:0 -11px 0 0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--navy);cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;transition:background .16s}
    #rd#rd#rd .rd-mtog:active{background:rgba(4,44,83,.08)}
    #rd#rd#rd .rd-mtog:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
    #rd#rd#rd .rd-mtog svg{position:absolute;display:block;transition:opacity .2s,transform .2s cubic-bezier(.16,1,.3,1)}
    #rd#rd#rd .rd-mtog .i-close{opacity:0;transform:rotate(-90deg)}
    #rd#rd#rd .nav.rd-open .rd-mtog .i-open{opacity:0;transform:rotate(90deg)}
    #rd#rd#rd .nav.rd-open .rd-mtog .i-close{opacity:1;transform:none}
    /* the panel: drops from under the bar, warm grey, the bar's hairline stays as the seam */
    #rd#rd#rd .nlinks{display:flex;flex-direction:column;gap:0;margin:0;position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:2;box-sizing:border-box;max-height:calc(100vh - 100% - 1px);max-height:calc(100dvh - 100% - 1px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 28px 0;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 16px 40px rgba(4,44,83,.12);outline:none;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1),visibility 0s .22s}
    #rd#rd#rd .nav.rd-open .nlinks{opacity:1;visibility:visible;transform:none;transition-delay:0s}
    #rd#rd#rd .nlinks{pointer-events:none}   /* closed: nothing in the panel catches a tap */
    #rd#rd#rd .nav.rd-open .nlinks{pointer-events:auto}
    #rd#rd#rd .nlinks>.nlink,#rd#rd#rd .nlinks .dd>.nlink{padding:14px 0;border-radius:0;font-size:19px;line-height:1.3;border-top:1px solid var(--line)}
    #rd#rd#rd .nlinks>.nlink:first-child{border-top:0}
    #rd#rd#rd .nlinks .dd>.nlink{pointer-events:none}
    #rd#rd#rd .nlinks .ddm{position:static;min-width:0;padding:0 0 10px;background:transparent;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:inherit;transform:none;transition:none}   /* inherit: a closed panel's list must not catch taps (found 26 September, elementFromPoint on the bench) */
    #rd#rd#rd .nlinks .ddi{padding:10px 0;min-height:44px;box-sizing:border-box;border-radius:0;font-size:15px;gap:12px}
    #rd#rd#rd .nlinks .ddi:hover{background:transparent}
    #rd#rd#rd .nlinks .ddi:active{color:var(--navy)}
    #rd#rd#rd .rd-mcta{display:block;position:sticky;bottom:0;margin-top:auto;padding:16px 0 24px;background:var(--bg);border-top:1px solid var(--line)}
    #rd#rd#rd .rd-mcta .btn{width:100%;justify-content:center;padding:14px 20px}
    /* the page under the panel, dimmed; a tap on it closes the menu */
    #rd#rd#rd .rd-mback{display:block;position:absolute;top:100%;left:0;right:0;height:calc(100vh - 100%);height:calc(100dvh - 100%);z-index:1;background:rgba(4,44,83,.32);opacity:0;visibility:hidden;transition:opacity .22s,visibility 0s .22s}
    #rd#rd#rd .nav.rd-open .rd-mback{opacity:1;visibility:visible;transition-delay:0s}
  }
  @media(hover:hover) and (max-width:980px){#rd#rd#rd .rd-mtog:hover{background:rgba(4,44,83,.06)}}   /* a real pointer only: on a phone the hover tint would stay on the button after the tap */
  @media(min-width:561px) and (max-width:980px){#rd#rd#rd .nlinks .ddm{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}}
  @media(max-width:560px){#rd#rd#rd .nlinks{height:calc(100vh - 100% - 1px);height:calc(100dvh - 100% - 1px)}}
  @media(max-width:480px){#rd#rd#rd .nav-in{padding:0 20px}#rd#rd#rd .nlinks{padding-left:20px;padding-right:20px}}
  @media(max-width:400px){#rd#rd#rd .nav .nav-in>.btn{padding:11px 14px;font-size:14px}}

/* ---- AI picture flaws (SOW item 7; Patrick 26 September: "go 1, 2, 3, 5", picture 4 stays). Each picture is drawn a little larger
   in its own frame, pinned to one side, so the strip with the flaw falls outside; the files stay as delivered. scale and translate add
   to the tiles' slow zoom and the cards' hover zoom. A rule matches its picture by file name: a replaced picture drops its rule. ---- */
/* 1. Smart Office Solutions page, feature grid, top-right tile. Black bar down the right side, star bottom-right.
      1.12x pinned top-left: the right and bottom 11% of what shows today fall outside the tile. */
#rd#rd#rd img[src*="/Smart-Office-Solutions-feature-top-right."] {
  --s: 1.12;
  scale: var(--s);
  transform-origin: calc(50% / var(--s)) calc(50% / var(--s));
  translate: calc(50% - 50% / var(--s)) calc(50% - 50% / var(--s));
}
/* 2. Home page hero background. Half a star on the bottom edge near the right corner.
      1.04x pinned top-right: the left and bottom 4% fall outside the hero; the dark overlay covers the left anyway. */
#rd#rd#rd img[src*="/hero-background."] {
  --s: 1.04;
  scale: var(--s);
  transform-origin: calc(100% - 50% / var(--s)) calc(50% / var(--s));
  translate: calc(50% / var(--s) - 50%) calc(50% - 50% / var(--s));
}
/* 3. insight-article-4 (Insights card 4, article 4 top picture, related-article cards on articles 1, 2 and 3). Star bottom-right.
      1.07x pinned top-left: the right and bottom 6.5% fall outside the frame. */
#rd#rd#rd img[src*="/insight-article-4."] {
  --s: 1.07;
  scale: var(--s);
  transform-origin: calc(50% / var(--s)) calc(50% / var(--s));
  translate: calc(50% - 50% / var(--s)) calc(50% - 50% / var(--s));
}
/* 5. Managed Print Services page, feature grid, tall left tile. The lease contract on the desk (gibberish text, "VICROA").
      1.2x pinned top, centred left to right: the whole paper falls below the tile; each side loses 8% of what shows today. */
#rd#rd#rd img[src*="/Managed-Print-Services-feature-main-tall."] {
  --s: 1.2;
  scale: var(--s);
  transform-origin: 50% calc(50% / var(--s));
  translate: 0 calc(50% - 50% / var(--s));
}


  /* ---- 14 October 2026: post-launch polish (Patrick: find the small inconsistencies on phone and computer and fix them the way
     the client would want). Sweep and reasons: docs/plans/2026-10-14-sweep/G-desktop-polish.md, H-phone-polish.md, F-phone-picks.md.
     Appended after everything else in the shared view website.rdtech_assets (4308), so each rule here wins over the one it changes. ---- */

  /* the privacy page (/privacy, page 34): the article type of the blog post view, which site pages do not carry, so the page reads
     like an Insights article; its tables become small cards on phones */
  #rd#rd#rd .rd-legal h1{font-size:clamp(28px,3.3vw,42px)}
  #rd#rd#rd .rd-legal .bmeta{margin:14px 0 0}
  #rd#rd#rd .rd-legal .rd-post-body{margin-top:28px;border-top:1px solid var(--line);padding-top:4px}
  #rd#rd#rd .rd-legal .rd-post-body h2{font-size:21px;font-weight:700;color:var(--navy);margin:40px 0 0;letter-spacing:-.01em;line-height:1.25}
  #rd#rd#rd .rd-legal .rd-post-body h3{font-size:17px;font-weight:700;color:var(--navy);margin:28px 0 0;letter-spacing:-.01em;line-height:1.3}
  #rd#rd#rd .rd-legal .rd-post-body p{margin:12px 0 0;font-size:15.5px;line-height:1.75;color:var(--ink)}
  #rd#rd#rd .rd-legal .rd-post-body a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}
  #rd#rd#rd .rd-legal .rd-post-body ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
  #rd#rd#rd .rd-legal .rd-post-body li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.65;color:var(--ink)}
  #rd#rd#rd .rd-legal .rd-post-body li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--gold)}
  #rd#rd#rd .rd-legal .rd-addr{line-height:1.8}
  #rd#rd#rd .rd-legal .rd-tbl{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
  #rd#rd#rd .rd-legal table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.55;color:var(--ink)}
  #rd#rd#rd .rd-legal th{text-align:left;font-size:13px;font-weight:700;color:var(--navy);background:#faf9f6;padding:12px 16px}
  #rd#rd#rd .rd-legal td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:top}
  #rd#rd#rd .rd-legal td:first-child{font-weight:600;color:var(--navy)}
  @media(max-width:560px){
    #rd#rd#rd .rd-legal thead{display:none}
    #rd#rd#rd .rd-legal tr{display:block;padding:14px 16px;border-top:1px solid var(--line)}
    #rd#rd#rd .rd-legal tbody tr:first-child{border-top:0}
    #rd#rd#rd .rd-legal td{display:block;padding:0;border:0;font-size:14.5px}
    #rd#rd#rd .rd-legal td+td{margin-top:8px}
    #rd#rd#rd .rd-legal td:first-child{font-size:15px}
    #rd#rd#rd .rd-legal td+td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);margin-bottom:2px}
  }

  /* the footer's legal line: Privacy Policy and Cookie settings after the copyright (the policy promises the settings link) */
  #rd#rd#rd .fbar .rd-legal-links a{color:inherit;text-decoration:none;cursor:pointer}
  #rd#rd#rd .fbar .rd-legal-links a:hover,#rd#rd#rd .fbar .rd-legal-links a:focus-visible{text-decoration:underline;text-underline-offset:3px}
  @media(max-width:560px){#rd#rd#rd .fbar .rd-legal-links{display:block;margin-top:6px}#rd#rd#rd .fbar .rd-sep{display:none}}

  /* the logo is a link home, in the bar and in the footer; nothing moves */
  #rd#rd#rd a.rd-logo{display:block;line-height:0;border-radius:4px}
  #rd#rd#rd a.rd-logo:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

  /* headings no longer leave one word alone on their last line (computer; phones already balance their headings) */
  @media(min-width:561px){#rd#rd#rd h1,#rd#rd#rd h2,#rd#rd#rd h3,#rd#rd#rd .h2,#rd#rd#rd .h4{text-wrap:pretty}}

  /* small grey labels were 2.3:1 on the cream; now 4.5:1, same family of grey */
  #rd#rd#rd .brands .lab,#rd#rd#rd .mlab,#rd#rd#rd .inc h6,#rd#rd#rd .inc .h6,#rd#rd#rd .bmeta .date{color:#66707e}

  /* buttons use Inter like the rest of the page (the browser's own button font showed before) */
  #rd#rd#rd button,#rd#rd#rd .btn{font-family:inherit}

  /* hover and pressed feedback */
  #rd#rd#rd .herocta .btn-out:hover{border-color:#fff!important;background:rgba(255,255,255,.12)}
  #rd#rd#rd .scard.reveal.in:hover{transform:translateY(-3px)}
  #rd#rd#rd .intro-img:hover img{transform:none}
  #rd#rd#rd .btn:active{transform:translateY(1px)}
  #rd#rd#rd .cbtn:active{transform:scale(.94)}
  #rd#rd#rd .acc-head:hover{background:#faf8ef}
  #rd#rd#rd .acc-head:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:12px}
  #rd#rd#rd .footer li:not([data-go]){cursor:default}
  #rd#rd#rd .footer li a.rdl{cursor:pointer}
  #rd#rd#rd .footer li:hover a.rdl,#rd#rd#rd .footer a.rdl:focus-visible{text-decoration:underline;text-underline-offset:3px}
  #rd#rd#rd .darkcta a.rdl,#rd#rd#rd .contact-info .val a.rdl{cursor:pointer}
  #rd#rd#rd .darkcta a.rdl:hover,#rd#rd#rd .contact-info .val a.rdl:hover{text-decoration:underline;text-underline-offset:3px}
  #rd#rd#rd a,#rd#rd#rd button,#rd#rd#rd [data-go],#rd#rd#rd .acc-head{-webkit-tap-highlight-color:rgba(4,44,83,.08)}
  @media(hover:none){
    #rd#rd#rd .srow:active{background:rgba(255,255,255,.7)}
    #rd#rd#rd .scard:active,#rd#rd#rd .bcard:active,#rd#rd#rd .ccard:active{opacity:.85}
    #rd#rd#rd .acc-head:active{background:#faf6ea}
  }

  /* a whole success-story card opens its story, not only the "View Success Story" line */
  #rd#rd#rd .ccard:has(.clink){position:relative}
  #rd#rd#rd .ccard .clink::after{content:"";position:absolute;inset:0;border-radius:14px}

  /* a link to a place on a page (the stories' back link, the cookie bar's link) lands below the sticky bar, not under it */
  #rd#rd#rd #clientCrsl{scroll-margin-top:120px}
  #rd#rd#rd #clientCrsl:focus{outline:0}
  @media(max-width:560px){#rd#rd#rd #clientCrsl{scroll-margin-top:130px}}

  /* phones and tablets: the Solutions row of the menu opens and closes its list, as its arrow says */
  @media(max-width:980px){
    #rd#rd#rd .nlinks .dd>.nlink{pointer-events:auto;cursor:pointer;display:flex;align-items:center;justify-content:space-between;-webkit-tap-highlight-color:transparent}
    #rd#rd#rd .nlinks .dd>.nlink .rd-caret{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:18px;color:var(--slate);transition:transform .22s ease}
    #rd#rd#rd .nlinks .dd.open>.nlink .rd-caret{transform:rotate(180deg)}
    #rd#rd#rd .nlinks .dd:not(.open) .ddm{max-height:0;overflow:hidden;padding-bottom:0;visibility:hidden;transition:max-height .24s ease,padding-bottom .24s ease,visibility 0s linear .24s}
    #rd#rd#rd .nlinks .dd.open .ddm{max-height:640px;visibility:visible;transition:max-height .28s ease,padding-bottom .28s ease,visibility 0s}
    #rd#rd#rd .ffield input,#rd#rd#rd .ffield textarea{font-size:16px}
  }

  /* phones */
  @media(max-width:560px){
    #rd#rd#rd section.pad,#rd#rd#rd section.pad-sm{padding-top:28px;padding-bottom:28px}
    #rd#rd#rd section.phead{padding-top:40px}
    #rd#rd#rd section.pad-sm>.wrap>.h2+div>.srow .desc,#rd#rd#rd section.pad-sm>.wrap>.h2+div>.srow .inc{display:none}
    #rd#rd#rd section.pad-sm>.wrap>.h2+div>.srow .more{margin-top:12px}
  }
  @media(max-width:340px){#rd#rd#rd .nav .nav-in>.btn{display:none}#rd#rd#rd .rd-mtog{margin-left:auto}}

  html:has(#rd){scroll-padding-top:96px}
  html.rd-menu .o_cookies_discrete{visibility:hidden!important}
  @media(max-width:560px){#website_cookies_bar a.js_close_popup{min-height:44px}}

  /* ---- 26 October 2026: the phone layer (docs/plans/2026-10-26-phone-plan.md; findings in build/m4/phone-check/2026-10-26/).
     Phones only, 560 px and narrower: above that nothing here applies and the phone-only markup (.rd-ph, the sentence breaks .rd-pbr)
     is not shown, so computers and tablets keep today's page to the pixel. Appended last, so each rule wins over the one it changes. ---- */
  @media(min-width:561px){#rd#rd#rd .rd-ph{display:none!important}#rd#rd#rd .rd-pbr{display:none}}
  @media(max-width:560px){
    /* one page margin, the header's: 20 px */
    #rd#rd#rd .wrap,#rd#rd#rd .hero-in{padding-left:20px;padding-right:20px}
    #rd#rd#rd .nav-in{padding:0 20px}
    /* a sentence break inside a long paragraph: a new line and a 14 px gap, no word changed */
    #rd#rd#rd .rd-pbr{display:block;height:14px}
    /* text sizes as on a computer: text 16, card text 15, card titles 18, small labels 14, line height 1.6 */
    #rd#rd#rd .lead,#rd#rd#rd .ov2 p.body,#rd#rd#rd .ov .right p,#rd#rd#rd .abody,#rd#rd#rd .rd-post-body p,#rd#rd#rd .rd-post-body li,#rd#rd#rd .story-impact li,
    #rd#rd#rd .darkcta p,#rd#rd#rd .story-cat,#rd#rd#rd .rd-legal .rd-post-body p,#rd#rd#rd .rd-legal .rd-post-body li{font-size:16px;line-height:1.6}
    #rd#rd#rd .hero .lead{font-size:16px;line-height:1.6}
    /* articles: their own view sets 15.5 px and 1.75 inside the page (view 4323), so these rules name the article to win */
    #rd#rd#rd .article .rd-post-body p:not(.rd-x),#rd#rd#rd .article .rd-post-body li:not(.rd-x){font-size:16px;line-height:1.6}
    #rd#rd#rd .article .rd-post-body blockquote:not(.rd-x){text-wrap:balance}
    #rd#rd#rd .scard p,#rd#rd#rd .srow .desc,#rd#rd#rd .inc li,#rd#rd#rd .acc-body p,#rd#rd#rd .step p,#rd#rd#rd .fc p,#rd#rd#rd .mc p,#rd#rd#rd .bcard p,
    #rd#rd#rd .ccard .q,#rd#rd#rd .tcard .q,#rd#rd#rd .tm.dark p{font-size:15px;line-height:1.6}
    #rd#rd#rd .scard .h4,#rd#rd#rd .srow .h4,#rd#rd#rd .step .h4,#rd#rd#rd .fc h4,#rd#rd#rd .mc .h4,#rd#rd#rd .bcard .h4{font-size:18px;line-height:1.3;min-height:0}
    #rd#rd#rd .acc-head .h5{font-size:17px;line-height:1.3}
    #rd#rd#rd .stat .l{font-size:14px;line-height:1.35}#rd#rd#rd .stat .s{font-size:14px}
    #rd#rd#rd .ffield label{font-size:14px}
    #rd#rd#rd .ccard .cbadge ~ .cinfo .rl{font-size:14px}
    /* headings: 32 px titles (34 from 400 px), balanced, no word alone on the last line of a paragraph, a card line or a list item */
    #rd#rd#rd .display{font-size:32px;line-height:1.1}
    #rd#rd#rd .stat .l,#rd#rd#rd .stat .s,#rd#rd#rd .tstat .l,#rd#rd#rd .nm,#rd#rd#rd .rl,#rd#rd#rd blockquote,#rd#rd#rd .pullq{text-wrap:balance}
    #rd#rd#rd li,#rd#rd#rd td,#rd#rd#rd .desc,#rd#rd#rd .q,#rd#rd#rd .lead{text-wrap:pretty}
    #rd#rd#rd .rd-nw{white-space:nowrap}
    #rd#rd#rd .rd-bar{display:block;height:0;overflow:hidden}   /* "A | B" lines stack as two lines, never with the bar left hanging */
    /* the top bar: one height, 64 px, also once the page scrolls (it shrank to 59 px and the page jumped) */
    #rd#rd#rd .nav-in,#rd#rd#rd .nav.shrunk .nav-in{height:64px;transition:none}
    #rd#rd#rd .nav a.rd-logo{padding:7px 0;margin:-7px 0}   /* the logo's tap area is 44 px tall, the logo stays put */
    /* Home's first screen: less empty space above the chip */
    #rd#rd#rd .hero-in{padding-top:28px;padding-bottom:44px}
    /* the chip is plain text in a pill, so the script's no-break groups change where its line breaks, never its height (no jump) */
    #rd#rd#rd .hero .tag{display:block;width:fit-content;max-width:100%;line-height:1.5;border-radius:18px}
    #rd#rd#rd .hero .tag .d{display:inline-block;vertical-align:1px;margin-right:8px}
    /* footer: every link a 44 px row, 14 px text, the legal line breaks between its parts */
    #rd#rd#rd .footer ul{gap:0}
    #rd#rd#rd .footer li{font-size:14px;min-height:44px;display:flex;align-items:center;line-height:1.35}
    #rd#rd#rd .footer li>a,#rd#rd#rd .footer li>a.rdl{display:flex;align-items:center;min-height:44px;width:100%;padding:0;margin:0}
    #rd#rd#rd .footer p{font-size:14px;line-height:1.6}
    #rd#rd#rd .footer .h6{font-size:13px;margin-bottom:4px}
    #rd#rd#rd .fbar{font-size:13px;line-height:1.6}
    #rd#rd#rd .fbar .rd-legal-links a{display:inline-flex;align-items:center;min-height:44px}
    #rd#rd#rd .fbar .rd-legal-links{margin-top:0}
    /* links and buttons a thumb can hit: 44 px */
    #rd#rd#rd a.backbtn{min-height:44px;padding:0;margin:0 0 12px;color:#5b6573}
    #rd#rd#rd .ccard .clink{min-height:44px;margin-bottom:-12px}
    #rd#rd#rd .srow .more{min-height:44px}
    #rd#rd#rd .btn{min-height:48px}
    /* pressed: what was tapped dims at once while the next page loads (taps showed nothing for up to 2.4 s) */
    #rd#rd#rd a:active,#rd#rd#rd button:active,#rd#rd#rd [data-go]:active{opacity:.7}
    #rd#rd#rd .rd-going,#rd#rd#rd .reveal.in.rd-going{opacity:.6;transition:opacity .1s}
    #rd#rd#rd .mtrack:hover{animation-play-state:running}   /* a finger on the logo strip no longer stops it until the next tap elsewhere */
    #rd#rd#rd .rd-loadbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999;background:var(--gold);transform-origin:0 0;animation:rdLoad 2.4s cubic-bezier(.2,.7,.3,1) forwards;pointer-events:none}
    @keyframes rdLoad{from{transform:scaleX(.05)}to{transform:scaleX(.9)}}

    /* ---- call and write within one tap ---- */
    #rd#rd#rd .rd-mcall{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin-top:10px;border:1px solid #cfd4da;border-radius:8px;font-size:15px;font-weight:600;color:var(--navy)}
    #rd#rd#rd .rd-reach{display:flex;flex-direction:column;gap:12px;margin-top:22px}
    #rd#rd#rd .rd-reach .btn{width:100%;justify-content:center}
    #rd#rd#rd .rd-jump{display:flex;width:100%;justify-content:center;margin-top:22px}
    /* the closing card on stories, Insights and articles is About's dark box; "Next success story" and "View all insights" are plain links */
    #rd#rd#rd .rd-next,#rd#rd#rd .rd-all{display:block;padding:12px 0;margin-top:16px;font-size:15px;line-height:1.5;font-weight:700;color:var(--blue)}
    #rd#rd#rd .rd-all{display:flex;align-items:center;min-height:48px;padding:0;justify-content:center;border:1px solid #cfd4da;border-radius:8px;color:var(--navy);margin-top:28px}
    #rd#rd#rd .darkcta{padding:28px 22px}
    #rd#rd#rd .darkcta .rdl[href^="tel:"]{display:flex;align-items:center;justify-content:center;min-height:48px;margin:12px 0 0;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:8px;font-weight:600}

    /* ---- the order of things ---- */
    #rd#rd#rd #app>.fade{display:flex;flex-direction:column}
    #rd#rd#rd #app>.fade>section{width:100%}
    /* Home and Solutions end on the dark box (it sat before the articles and before the proof) */
    #rd#rd#rd #app>.fade>section:has(.darkcta){order:5}
    #rd#rd#rd #app>.fade:has(.bdg-crsl)>section:has(.darkcta){order:0}
    /* About: the numbers right under the team photo, the portrait between the two parts of the story */
    #rd#rd#rd #app>.fade:has(.bdg-crsl)>section{order:3}
    #rd#rd#rd #app>.fade:has(.bdg-crsl)>section.phead,#rd#rd#rd #app>.fade:has(.bdg-crsl)>section:has(.wimg){order:1}
    #rd#rd#rd #app>.fade:has(.bdg-crsl)>section:has(.stats){order:2}
    #rd#rd#rd #app>.fade:has(.bdg-crsl)>section:has(.darkcta){order:4}
    #rd#rd#rd .intro:has(.lead+.lead){display:flex;flex-direction:column;gap:0}
    #rd#rd#rd .intro:has(.lead+.lead)>div:nth-child(2){display:contents}
    #rd#rd#rd .intro:has(.lead+.lead) .h2{margin-top:14px}
    #rd#rd#rd .intro:has(.lead+.lead) .intro-img{order:1;margin:22px 0;height:auto;min-height:0}
    #rd#rd#rd .intro:has(.lead+.lead) .lead+.lead{order:2}
    #rd#rd#rd .intro .lead{margin:14px 0 0}
    /* Home: the three picture strips go (the six solutions below each carry a picture); the four cards become a 2 x 2 of tiles */
    #rd#rd#rd .midblock{margin-top:28px}
    #rd#rd#rd .midblock .collage{display:none}
    #rd#rd#rd .midcards{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:12px}
    #rd#rd#rd .midcards .scard{padding:16px;position:relative}
    #rd#rd#rd .midcards .scard .sq{width:40px;height:40px;margin-bottom:12px}
    #rd#rd#rd .midcards .scard .h4{font-size:16px;line-height:1.3;margin:0}
    #rd#rd#rd .midcards .scard p{display:none}
    #rd#rd#rd .midcards .scard .h4 a.rdl::after{content:"";position:absolute;inset:0;border-radius:12px}
    /* the numbers are not shown twice: the navy tiles go */
    #rd#rd#rd .tgrid:has(.tstat){display:none}
    /* a solution: picture, number, name, text, what's included, then "Learn more" last; the whole block is one link */
    #rd#rd#rd .srow{display:flex;flex-direction:column;gap:0;position:relative}
    #rd#rd#rd .srow .smid{display:contents}
    #rd#rd#rd .srow .sthumb{margin-bottom:16px}
    #rd#rd#rd .srow .snum{order:1;margin-bottom:8px}#rd#rd#rd .srow .h4{order:2}#rd#rd#rd .srow .desc{order:3;margin:8px 0 0}
    #rd#rd#rd .srow .inc{order:4;margin-top:16px}#rd#rd#rd .srow .more{order:5;margin-top:8px}
    #rd#rd#rd .srow .h4 a.rdl::after{content:"";position:absolute;inset:0}
    /* "Other solutions" on a solution page: five short rows, small picture, name, arrow; the whole row is the link */
    #rd#rd#rd section.pad-sm>.wrap>.h2+div>.srow{display:grid;grid-template-columns:72px 1fr 24px;align-items:center;column-gap:14px;min-height:80px;padding:14px 0}
    #rd#rd#rd section.pad-sm>.wrap>.h2+div>.srow .sthumb{width:72px;height:52px;margin:0;border-radius:8px;grid-column:1;grid-row:1}
    #rd#rd#rd section.pad-sm>.wrap>.h2+div>.srow .snum{display:none}
    #rd#rd#rd section.pad-sm>.wrap>.h2+div>.srow .h4{grid-column:2;grid-row:1;font-size:17px;line-height:1.3}
    #rd#rd#rd section.pad-sm>.wrap>.h2+div>.srow .more{grid-column:3;grid-row:1;margin:0;font-size:0;gap:0;min-height:0}
    #rd#rd#rd section.pad-sm>.wrap>.h2+div>.srow .more .arr{font-size:13px}
    #rd#rd#rd section.pad-sm>.wrap>.h2+div{margin-top:12px}
    /* how we work: a numbered list, not four tall cards */
    #rd#rd#rd .steps{gap:0;margin-top:20px;border-top:1px solid var(--line)}
    #rd#rd#rd .step{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;align-items:baseline;padding:16px 0;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
    #rd#rd#rd .step .chip{margin:0;grid-row:1 / span 2;align-self:start}
    #rd#rd#rd .step .h4{grid-column:2}#rd#rd#rd .step p{grid-column:2;margin:0}
    /* solution pages: the photo collage and the photo under the form go (no words in them; the faces were cut) */
    #rd#rd#rd .feat .fcollage{display:none}
    #rd#rd#rd .formcta .fimg{display:none}
    #rd#rd#rd .feat{margin-top:0}
    #rd#rd#rd .fc{padding:18px}#rd#rd#rd .fcards{gap:12px}
    /* cards with a chip or an icon: the chip or icon sits beside the title, not above it (each card was 75 px taller for it) */
    #rd#rd#rd .fc{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
    #rd#rd#rd .fc .numchip{margin:0}#rd#rd#rd .fc h4{margin:0}#rd#rd#rd .fc p{grid-column:1 / -1;margin-top:10px}
    #rd#rd#rd .mc{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:20px}
    #rd#rd#rd .mc .sq{width:40px;height:40px;margin:0}#rd#rd#rd .mc p{grid-column:1 / -1;margin-top:12px}
    #rd#rd#rd .mvv{gap:12px;margin-top:24px}
    /* an article's closing link to a solution sits on its own line, a full-width 48 px button */
    #rd#rd#rd .rd-post-body>p:last-child>a:last-child{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;margin-top:16px;padding:10px 16px;border:1px solid #cfd4da;border-radius:8px;text-decoration:none;line-height:1.4}
    /* articles: two related cards, then the closing card */
    #rd#rd#rd .article+div .bgrid>.bcard:nth-child(n+3){display:none}

    /* ---- moving parts ---- */
    /* the logo strip: its label shows, the strip runs the full screen width, logos large enough to read */
    #rd#rd#rd .msec .mrow{flex-direction:column;align-items:stretch;gap:12px;padding:0}
    #rd#rd#rd .msec .mlab{display:block;max-width:none;text-align:center;padding:0 20px}
    #rd#rd#rd .msec .mtrack{gap:32px}
    #rd#rd#rd .msec .mtrack .lg{width:112px;height:40px}
    /* the story cards: the next card peeks in, no empty band in a short card, dots show where you are */
    #rd#rd#rd .crsl{align-items:flex-start}
    #rd#rd#rd .crsl .ccard,#rd#rd#rd .crsl .ccard:has(.cbadge){flex:0 0 calc(100% - 40px);width:calc(100% - 40px);min-height:0}
    #rd#rd#rd .ccard .cbadge ~ .cinfo{min-height:0;margin-top:0}
    #rd#rd#rd .crsl-nav{align-items:center}
    #rd#rd#rd .rd-dots{display:flex;gap:8px;margin-right:auto;padding-left:2px}
    #rd#rd#rd .rd-dots i{width:8px;height:8px;border-radius:50%;background:#cfd4da;transition:background .2s,transform .2s}
    #rd#rd#rd .rd-dots i.on{background:var(--navy);transform:scale(1.25)}
    /* About's badges: a still grid of two columns, every badge in view, Ricoh once */
    #rd#rd#rd .bdg-crsl{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:visible;scroll-snap-type:none;margin-top:24px}
    #rd#rd#rd .bdg-crsl .bslot{flex:none;aspect-ratio:2/1;border-radius:10px}
    #rd#rd#rd .bdg-crsl .bslot:last-child:has(img[src*="partner-badge-ricoh"]){display:none}
    #rd#rd#rd .bdg-crsl .bslot:nth-child(11):nth-last-child(2):has(~ .bslot img[src*="partner-badge-ricoh"]){grid-column:1 / -1;justify-self:center;width:calc(50% - 6px)}

    /* ---- pictures ---- */
    /* solution page tops: a landscape crop that keeps each subject */
    #rd#rd#rd .wimg{height:220px;border-radius:14px}
    #rd#rd#rd .wimg .zoneimg[src*="service-thumbnail-Document-Management"]{object-position:45% 50%}
    #rd#rd#rd .wimg .zoneimg[src*="service-thumbnail-IT-Security-Operations"]{object-position:62% 30%}
    #rd#rd#rd .wimg .zoneimg[src*="service-thumbnail-Network-Security"]{object-position:62% 30%}
    #rd#rd#rd .wimg .zoneimg[src*="service-thumbnail-Managed-IT-Services"]{object-position:35% 40%}
    #rd#rd#rd .wimg .zoneimg[src*="service-thumbnail-Managed-Print-Services"]{object-position:38% 50%}
    #rd#rd#rd .wimg .zoneimg[src*="service-thumbnail-Smart-Office-Solutions"]{object-position:55% 50%}
    #rd#rd#rd .wimg .zoneimg[src*="service-thumbnail-ERP-Odoo"]{object-position:70% 50%}
    #rd#rd#rd .wimg:has(.zoneimg[src*="about-hero-banner"]){height:250px!important}   /* the view sets 380 px inline */
    #rd#rd#rd .wimg .zoneimg[src*="about-hero-banner"]{object-position:52% 50%}
    /* the solution thumbnails (Home, Solutions, "Other solutions"): each picture's people kept whole, none cut at an edge (photo sweep, 26 Oct) */
    #rd#rd#rd .sthumb img[src*="service-thumbnail-Document-Management"]{object-position:45% 50%}
    #rd#rd#rd .sthumb img[src*="service-thumbnail-Managed-Print-Services"]{object-position:42% 50%}
    #rd#rd#rd .sthumb img[src*="service-thumbnail-Managed-IT-Services"]{object-position:40% 50%}
    #rd#rd#rd .sthumb img[src*="service-thumbnail-IT-Security-Operations"]{object-position:60% 50%}
    #rd#rd#rd .sthumb img[src*="service-thumbnail-Network-Security"]{object-position:58% 50%}
    /* Insights cards: the picture's own shape (the sides were cut), clear space between cards, the whole card is the link */
    #rd#rd#rd .bgrid{gap:40px}
    #rd#rd#rd section.pad>.wrap>.bgrid:first-child{margin-top:0}
    #rd#rd#rd .bimg{height:auto;aspect-ratio:900/474}
    #rd#rd#rd .bmeta{margin:12px 0 8px}
    #rd#rd#rd .bcard{position:relative}
    #rd#rd#rd .bcard .h4 a.rdl::after{content:"";position:absolute;inset:0}

    /* ---- forms ---- */
    #rd#rd#rd .ffield input{min-height:48px}
    #rd#rd#rd .ffield textarea{min-height:120px;resize:none}
    #rd#rd#rd .ffield input:focus-visible,#rd#rd#rd .ffield textarea:focus-visible,#rd#rd#rd .ffield input:focus,#rd#rd#rd .ffield textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
    #rd#rd#rd .ffield .rd-bad{border-color:#b42318;background:#fff}
    #rd#rd#rd .rd-ferr{color:#b42318;font-size:13.5px;line-height:1.4;margin-top:6px}
    #rd#rd#rd .rdtech-form button[type=submit]{width:100%;justify-content:center}
    #rd#rd#rd .contact-info{padding:28px 22px}
    /* the accordion: the open text uses the card's full width; nothing slides under the finger */
    #rd#rd#rd .acc-body p{padding:0 16px 16px}
    #rd#rd#rd .acc-body{transition:none}
    #rd#rd#rd .acc-item.open .acc-body{max-height:none}
    /* the phone menu: the current page is marked in the Solutions list too, a call row under the button */
    #rd#rd#rd .nlinks .ddi.rd-here a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}
    #rd#rd#rd .nlinks>.nlink>a.rdl,#rd#rd#rd .nlinks .ddi>a.rdl{display:flex;align-items:center;min-height:24px;flex:1}
    #rd#rd#rd .nlinks>.nlink{display:flex}
    #rd#rd#rd .nlinks .dd>.nlink .rd-caret{font-size:0;text-decoration:none}
    #rd#rd#rd .nlinks .dd>.nlink .rd-caret::before{content:"";width:9px;height:9px;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate);transform:translateY(-3px) rotate(45deg)}
  }
  @media(min-width:400px) and (max-width:560px){#rd#rd#rd .display{font-size:34px}}
  /* a short phone: the menu's button follows the list instead of covering its last entry */
  @media(max-width:560px) and (max-height:700px){#rd#rd#rd .rd-mcta{position:static;margin-top:8px}}
  /* the cookie bar on phones: about 120 px, two equal buttons side by side, the link inside the sentence */
  @media(max-width:560px){
    html #website_cookies_bar .col-lg-8{padding-top:12px!important;padding-bottom:8px!important}
    html #website_cookies_bar .col-lg-4{padding-top:0!important;padding-bottom:12px!important;display:flex;gap:10px}
    html #website_cookies_bar p{font-size:13.5px;line-height:1.45}
    html #website_cookies_bar .o_cookies_bar_text_policy{font-size:13.5px;display:inline;padding:12px 0;margin:-12px 0}
    html #website_cookies_bar .js_close_popup{flex:1 1 0;min-width:0;padding:0 12px!important;margin:0!important;min-height:44px;display:flex;align-items:center;justify-content:center;background:#fff!important;color:#1a5fa8!important;border:1px solid #1a5fa8!important}
    body:has(.o_cookies_discrete.show) #rd#rd#rd .footer{padding-bottom:150px}   /* the open bar does not cover the footer's last lines */
  }
  /* page not found, in the site's look (all widths) */
  #rd#rd#rd .rd-404{padding-bottom:96px}
  #rd#rd#rd .rd-404 .rd-404-go{margin-top:28px}
  @media(max-width:560px){#rd#rd#rd .rd-404{padding-bottom:56px}#rd#rd#rd section.rd-404 div.rd-404-go>a.btn{flex:1 1 calc(50% - 6px)}#rd#rd#rd section.rd-404 div.rd-404-go>a.btn-blue{flex-basis:100%}}
  body:has(#rd .rd-404) #top,body:has(#rd .rd-404) #bottom{display:none!important}