/* 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}}