/* ==========================================================
   RIDGE — homepage & shared refinements (loads after site.css)
   Motif: the indicator tape itself — pale stripes that turn black.
   ========================================================== */
:root {
  --rg-ink: #0B2A45;        /* deep clinical navy */
  --rg-blue: #0068A8;       /* RIDGE blue */
  --rg-steam: #F2F6F9;      /* page background */
  --rg-cream: #F3E8AE;      /* indicator tape paper */
  --rg-pale: #D9C77E;       /* stripes before the cycle */
  --rg-black: #17191B;      /* stripes after steam */
  --rg-line: #DCE3EA;
  --rg-muted: #4A5866;
}

body.rs { background: var(--rg-steam); }
body.rs h1, body.rs h2, body.rs h3 { color: var(--rg-ink); }

/* ── Header refinements ── */
.rs-top { background: var(--rg-ink); }
.rs-nav { background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); }
.rs-links a.active { color: var(--rg-blue); box-shadow: inset 0 -2px 0 var(--rg-blue); border-radius: 0; }

/* ── Shared ── */
.rg-sec { padding: 104px 0; }
.rg-kicker { color: var(--rg-blue); font-weight: 600; font-size: 1rem; margin: 0; }
.rg-lead { font-size: 1.15rem; color: var(--rg-muted); line-height: 1.75; max-width: 62ch; }
.rg-head { max-width: 760px; margin-bottom: 52px; }
.rg-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.2; margin: 0 0 14px; }
[dir="rtl"] .rg-head h2 { line-height: 1.4; }
.rg-head p { color: var(--rg-muted); font-size: 1.1rem; margin: 0; }
.rg-head-row { max-width: none; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }

/* ── Hero ── */
.rg-hero { background: #fff; padding: 72px 0 0; overflow: hidden; }
.rg-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.rg-hero-text { display: flex; flex-direction: column; gap: 22px; }
.rg-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.08; letter-spacing: -1px; margin: 0; max-width: 15ch;
}
[dir="rtl"] .rg-hero h1 { letter-spacing: 0; line-height: 1.3; max-width: 16ch; }
.rg-hero-photo { margin: 0; position: relative; border-radius: 22px; overflow: hidden; background: var(--rg-cream); aspect-ratio: 4/3.4; }
.rg-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-hero-photo figcaption {
  position: absolute; inset-block-end: 14px; inset-inline-start: 14px;
  background: var(--rg-ink); color: #fff; font-size: .85rem; font-weight: 600;
  padding: 6px 14px; border-radius: 999px;
}

/* The tape band */
.rg-tape { margin-top: 72px; padding-bottom: 26px; }
.rg-tape-strip {
  position: relative; height: 58px; width: 104%; margin-inline-start: -2%;
  transform: rotate(-1.2deg);
  background-color: var(--rg-cream);
  background-image: repeating-linear-gradient(115deg, transparent 0 34px, var(--rg-pale) 34px 46px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 24px -14px rgba(11,42,69,.35);
}
.rg-tape-done {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, transparent 0 34px, var(--rg-black) 34px 46px);
  clip-path: inset(0 0 0 48%);
  animation: rg-steam 2.6s cubic-bezier(.5,0,.2,1) .5s both;
}
[dir="rtl"] .rg-tape-done { clip-path: inset(0 48% 0 0); animation-name: rg-steam-rtl; }
@keyframes rg-steam     { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 48%); } }
@keyframes rg-steam-rtl { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 48% 0 0); } }
@media (prefers-reduced-motion: reduce) { .rg-tape-done { animation: none; } }
.rg-tape-labels { display: flex; justify-content: space-between; margin-top: 18px; font-size: .9rem; font-weight: 600; color: var(--rg-muted); }

/* ── Credentials ── */
.rg-creds { background: #fff; border-top: 1px solid var(--rg-line); border-bottom: 1px solid var(--rg-line); }
.rg-creds-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.rg-cred { padding: 30px 26px; display: flex; flex-direction: column; gap: 6px; border-inline-start: 1px solid var(--rg-line); }
.rg-cred:first-child { border-inline-start: 0; padding-inline-start: 0; }
.rg-cred strong { font-size: 1.15rem; color: var(--rg-ink); }
.rg-cred span { font-size: .95rem; color: var(--rg-muted); line-height: 1.5; }

/* ── Product spotlight ── */
.rg-spot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.rg-spot-media { position: relative; padding-block-end: 70px; }
.rg-spot-a { width: 78%; aspect-ratio: 4/5; object-fit: cover; border-radius: 20px; display: block; }
.rg-spot-b {
  position: absolute; inset-block-end: 0; inset-inline-end: 0; width: 62%;
  aspect-ratio: 770/410; object-fit: cover; border-radius: 16px;
  border: 6px solid var(--rg-steam); box-shadow: 0 18px 40px -20px rgba(11,42,69,.45);
}
.rg-spot-text { display: flex; flex-direction: column; gap: 20px; }
.rg-spot-text h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 0; line-height: 1.2; }
.rg-facts { margin: 6px 0 8px; display: flex; flex-direction: column; }
.rg-facts > div { padding: 18px 0; border-top: 1px solid var(--rg-line); display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.rg-facts > div:last-child { border-bottom: 1px solid var(--rg-line); }
.rg-facts dt { font-weight: 700; color: var(--rg-ink); }
.rg-facts dd { margin: 0; color: var(--rg-muted); line-height: 1.65; }

/* ── Steps ── */
.rg-steps-sec { background: #fff; }
.rg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: rg; }
.rg-steps li { counter-increment: rg; display: flex; flex-direction: column; gap: 12px; }
.rg-steps img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 18px; display: block; margin-bottom: 8px; }
.rg-steps h3 { font-size: 1.3rem; margin: 0; display: flex; align-items: center; gap: 12px; }
.rg-steps h3::before {
  content: counter(rg); flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rg-ink); color: #fff; font-size: 1rem; font-family: 'IBM Plex Sans', sans-serif;
}
.rg-steps p { margin: 0; color: var(--rg-muted); line-height: 1.7; }

/* ── Who we serve ── */
.rg-serve-list { border-top: 2px solid var(--rg-ink); }
.rg-serve-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 32px; align-items: center;
  padding: 28px 4px; border-bottom: 1px solid var(--rg-line); color: inherit; text-decoration: none;
  transition: background .2s;
}
.rg-serve-row:hover { background: #fff; }
.rg-serve-row h3 { font-size: 1.3rem; margin: 0; }
.rg-serve-row p { margin: 0; color: var(--rg-muted); line-height: 1.65; }
.rg-go { color: var(--rg-blue); font-weight: 600; white-space: nowrap; }
.rg-serve-row:hover .rg-go { text-decoration: underline; }

/* ── Supplier file ── */
.rg-file { background: var(--rg-ink); color: #fff; padding: 96px 0; position: relative; }
.rg-file::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 10px;
  background-color: var(--rg-cream);
  background-image: repeating-linear-gradient(115deg, transparent 0 20px, var(--rg-black) 20px 27px);
}
.rg-file-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.rg-file h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin: 0 0 16px; line-height: 1.25; }
.rg-file .rg-lead { color: #C9D6E2; margin: 0 0 28px; }
.rg-docs { list-style: none; margin: 0; padding: 0; }
.rg-docs li { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 1.05rem; display: flex; gap: 14px; align-items: center; }
.rg-docs li::before {
  content: ""; flex: none; width: 18px; height: 22px; border: 2px solid #7CC4F0; border-radius: 3px;
  background: linear-gradient(#7CC4F0,#7CC4F0) 3px 6px/8px 2px no-repeat, linear-gradient(#7CC4F0,#7CC4F0) 3px 11px/8px 2px no-repeat;
}

/* ── Contact ── */
.rg-contact { background: #fff; }
.rg-contact h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.3; margin: 0 0 14px; }
.rg-contact .rg-lead { margin-bottom: 24px; }

/* ── Footer ── */
.rs-footer { background: var(--rg-ink); }
.rs-foot-col h4 { color: #9FB3C6; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .rg-sec { padding: 72px 0; }
  .rg-hero { padding-top: 40px; }
  .rg-hero-grid, .rg-spot-grid, .rg-file-grid { grid-template-columns: 1fr; gap: 40px; }
  .rg-hero h1 { max-width: none; }
  .rg-tape { margin-top: 48px; }
  .rg-tape-strip { height: 44px; }
  .rg-creds-row { grid-template-columns: 1fr 1fr; }
  .rg-cred { padding: 22px 18px; border-top: 1px solid var(--rg-line); }
  .rg-cred:nth-child(-n+2) { border-top: 0; }
  .rg-cred:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .rg-steps { grid-template-columns: 1fr; gap: 44px; }
  .rg-steps img { aspect-ratio: 4/3; }
  .rg-serve-row { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .rg-facts > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 560px) {
  .rg-creds-row { grid-template-columns: 1fr; }
  .rg-cred, .rg-cred:nth-child(odd) { border-inline-start: 0; padding-inline: 0; border-top: 1px solid var(--rg-line); }
  .rg-cred:first-child { border-top: 0; }
  .rg-spot-a { width: 85%; }
  .rg-head-row { flex-direction: column; }
}

/* ── Packing video ── */
.rg-pack { background: var(--rg-steam); }
.rg-pack-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.rg-pack-media { position: relative; border-radius: 22px; overflow: hidden; background: var(--rg-ink); aspect-ratio: 16/9; box-shadow: 0 30px 60px -36px rgba(11,42,69,.6); }
.rg-pack-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-pack-toggle {
  position: absolute; inset-block-end: 14px; inset-inline-end: 14px;
  background: rgba(11,42,69,.82); color: #fff; border: 0; border-radius: 999px;
  padding: 8px 16px; font: 600 .85rem/1.2 inherit; cursor: pointer;
}
.rg-pack-toggle:hover { background: var(--rg-ink); }
.rg-pack-steps { list-style: none; margin: 0; padding: 0; counter-reset: pk; }
.rg-pack-steps li {
  counter-increment: pk; position: relative; cursor: pointer;
  padding: 16px 0; padding-inline-start: 52px; border-bottom: 1px solid var(--rg-line);
  display: flex; flex-direction: column; gap: 4px; color: var(--rg-muted); transition: color .3s;
}
.rg-pack-steps li::before {
  content: counter(pk); position: absolute; inset-inline-start: 0; top: 16px;
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--rg-line); font-weight: 700; font-family: 'IBM Plex Sans', sans-serif; color: var(--rg-muted);
  transition: background .3s, border-color .3s, color .3s;
}
.rg-pack-steps li strong { color: var(--rg-ink); font-size: 1.08rem; opacity: .55; transition: opacity .3s; }
.rg-pack-steps li span { font-size: .95rem; line-height: 1.6; }
.rg-pack-steps li.on strong { opacity: 1; }
.rg-pack-steps li.on::before { background: var(--rg-ink); border-color: var(--rg-ink); color: #fff; }
@media (max-width: 960px) {
  .rg-pack-grid { grid-template-columns: 1fr; gap: 28px; }
}
body.rs .rs-foot-col h4 { color: #9FB3C6; }

/* ── Company-level homepage (v2) ── */
.rg-hero { padding-bottom: 80px; }
.rg-head-row > div { max-width: 720px; }
.rg-head-row p { color: var(--rg-muted); font-size: 1.1rem; margin: 0; }

.rg-range { background: var(--rg-steam); }
.rg-range-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.rg-item {
  display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none;
  background: #fff; border: 1px solid var(--rg-line); border-radius: 18px; padding: 14px 14px 22px;
  transition: border-color .2s;
}
.rg-item:hover { border-color: var(--rg-ink); }
.rg-item-img { display: block; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: var(--rg-cream); margin-bottom: 8px; }
.rg-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-item-cat { font-size: .88rem; font-weight: 600; color: var(--rg-blue); padding-inline: 6px; }
.rg-item strong { font-size: 1.25rem; color: var(--rg-ink); padding-inline: 6px; }
.rg-item-desc { color: var(--rg-muted); font-size: .97rem; line-height: 1.6; padding-inline: 6px; }
.rg-item-more { justify-content: center; background: transparent; border: 2px dashed #B8C6D3; padding: 32px 26px; gap: 12px; }
.rg-item-more strong, .rg-item-more .rg-item-desc, .rg-item-more .rg-go { padding-inline: 0; }

.rg-feature { background: #fff; padding-top: 56px; overflow: hidden; }
.rg-feature .rg-tape { margin-top: 0; }
.rg-feature .rg-spot { padding-top: 64px; }

.rg-about { background: #fff; border-top: 1px solid var(--rg-line); }
.rg-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.rg-about h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.3; margin: 0; }
.rg-about .rg-lead { margin: 0 0 16px; }
.rg-news { background: var(--rg-steam); }

@media (max-width: 960px) {
  .rg-range-grid { grid-template-columns: 1fr 1fr; }
  .rg-about-grid { grid-template-columns: 1fr; gap: 20px; }
  .rg-hero { padding-bottom: 56px; }
}
@media (max-width: 560px) {
  .rg-range-grid { grid-template-columns: 1fr; }
}

/* Hero: two real product photos */
.rg-hero-duo { margin: 0; position: relative; padding-block-end: 56px; padding-inline-start: 0; }
.rg-duo-a { width: 84%; aspect-ratio: 1/1; object-fit: cover; border-radius: 22px; display: block; margin-inline-start: auto; }
.rg-duo-b {
  position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 46%; aspect-ratio: 1/1; object-fit: contain;
  background: #fff; border-radius: 18px; border: 6px solid #fff; box-shadow: 0 22px 44px -22px rgba(11,42,69,.5);
}
.rg-hero-duo figcaption {
  position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  background: var(--rg-ink); color: #fff; font-size: .85rem; font-weight: 600; padding: 6px 14px; border-radius: 999px;
}

/* ── v3: colour + motion ── */
:root { --rg-red: #D7263D; --rg-sky: #7CC4F0; }

/* Video hero */
.rg-vhero { position: relative; min-height: min(86vh, 760px); display: flex; align-items: flex-end; overflow: hidden; background: var(--rg-ink); color: #fff; }
.rg-vhero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rg-vhero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,42,69,.35) 0%, rgba(11,42,69,.55) 45%, rgba(11,42,69,.94) 100%),
    linear-gradient(90deg, rgba(0,104,168,.35), rgba(0,104,168,0) 60%);
}
.rg-vhero-inner { position: relative; padding-top: 120px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 20px; }
.rg-vhero h1 { color: #fff !important; font-size: clamp(2.2rem, 5.4vw, 4.3rem); line-height: 1.1; letter-spacing: -1px; max-width: 17ch; margin: 0; }
[dir="rtl"] .rg-vhero h1 { letter-spacing: 0; line-height: 1.3; }
.rg-vkicker { margin: 0; font-weight: 600; color: var(--rg-cream); }
.rg-vlead { margin: 0; font-size: 1.2rem; line-height: 1.75; color: #DCE7F1; max-width: 60ch; }
.rg-vnote { margin: 8px 0 0; font-size: .82rem; color: #9FB3C6; }
.rg-btn-light { background: #fff; color: var(--rg-ink); }
.rg-btn-light:hover { background: var(--rg-cream); color: var(--rg-ink); }
.rg-btn-ghost { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.rg-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
@media (prefers-reduced-motion: reduce) { .rg-vhero-bg { display: none; } .rg-vhero { background: var(--rg-ink) url(../video/ridge-packing-poster.jpg) center/cover; } }

/* Stats band */
.rg-stats { background: linear-gradient(90deg, var(--rg-blue), #0B4F86); color: #fff; }
.rg-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.rg-stat { padding: 34px 24px; display: flex; flex-direction: column; gap: 6px; border-inline-start: 1px solid rgba(255,255,255,.18); }
.rg-stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
.rg-stat b { font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; font-weight: 700; font-family: 'IBM Plex Sans', sans-serif; color: #fff; }
.rg-stat span { color: #D3E4F2; font-size: .95rem; line-height: 1.5; }

/* ECG feature + heartbeat trace */
.rg-ecg { background: #fff; padding-top: 48px; overflow: hidden; }
.rg-trace { height: 110px; }
.rg-trace svg { width: 100%; height: 100%; display: block; }
.rg-trace-grid { stroke: #F5D0D5; stroke-width: 1; fill: none; }
.rg-trace-line {
  fill: none; stroke: var(--rg-red); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: rg-beat 3.2s linear .3s infinite;
}
@keyframes rg-beat { 0% { stroke-dashoffset: 2600; } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: .0; } }
@media (prefers-reduced-motion: reduce) { .rg-trace-line { animation: none; stroke-dashoffset: 0; } }
[dir="rtl"] .rg-trace svg { transform: scaleX(-1); }
.rg-ecg-media { background: #fff; border: 1px solid var(--rg-line); border-radius: 22px; padding: 20px; box-shadow: 0 30px 60px -40px rgba(215,38,61,.45); }
.rg-ecg-media img { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block; }
.rg-kicker-red { color: var(--rg-red); }
.rg-spot-rev .rg-ecg-media { order: 2; }
.rg-ecg .rg-spot { padding-top: 40px; }
.rg-feature { background: var(--rg-steam); }

/* Product tiles get a colour cue per category */
.rg-item-cat { display: inline-block; align-self: flex-start; margin-inline-start: 6px; padding: 3px 10px; border-radius: 999px; background: #E6F0F8; }

@media (max-width: 960px) {
  .rg-vhero { min-height: 640px; }
  .rg-vhero-inner { padding-top: 96px; padding-bottom: 48px; }
  .rg-stats-row { grid-template-columns: 1fr 1fr; }
  .rg-stat { padding: 24px 16px; border-top: 1px solid rgba(255,255,255,.18); }
  .rg-stat:nth-child(-n+2) { border-top: 0; }
  .rg-stat:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .rg-spot-rev .rg-ecg-media { order: 0; }
  .rg-trace { height: 70px; }
}

/* Product-line band (replaces the stats band) */
.rg-lines { background: linear-gradient(90deg, var(--rg-ink), #0B4F86); }
.rg-lines-row { display: grid; grid-template-columns: 1fr 1fr; }
.rg-line { display: flex; align-items: center; gap: 22px; padding: 30px 28px; color: #fff; text-decoration: none; transition: background .25s; }
.rg-line:first-child { padding-inline-start: 0; }
.rg-line + .rg-line { border-inline-start: 1px solid rgba(255,255,255,.18); }
.rg-line:hover { background: rgba(255,255,255,.06); }
.rg-line-text { display: flex; flex-direction: column; gap: 2px; }
.rg-line-text strong { font-size: 1.25rem; color: #fff; }
.rg-line-text span { color: #C9D8E6; }
.rg-line-motif { flex: none; width: 120px; height: 40px; border-radius: 8px; overflow: hidden; position: relative; }
/* tape: stripes that keep sliding and darken, like rolling tape through a cycle */
.rg-line-tape .rg-line-motif { background-color: var(--rg-cream); }
.rg-line-tape .rg-line-motif span {
  position: absolute; inset: 0 -60px 0 0;
  background-image: repeating-linear-gradient(115deg, transparent 0 14px, var(--rg-pale) 14px 20px);
  animation: rg-roll 2.4s linear infinite, rg-cure 4.8s ease-in-out infinite alternate;
}
@keyframes rg-roll { to { transform: translateX(-40px); } }
@keyframes rg-cure { 0%, 30% { filter: none; } 70%, 100% { filter: brightness(.18) contrast(1.4); } }
/* ECG: trace keeps drawing */
.rg-line-ecg .rg-line-motif { background: rgba(215,38,61,.12); }
.rg-line-ecg svg { width: 100%; height: 100%; display: block; }
.rg-line-ecg path { fill: none; stroke: #FF5A6E; stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: rg-beat2 2s linear infinite; }
@keyframes rg-beat2 { 0% { stroke-dashoffset: 200; } 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
[dir="rtl"] .rg-line-ecg svg { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .rg-line-tape .rg-line-motif span, .rg-line-ecg path { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 700px) {
  .rg-lines-row { grid-template-columns: 1fr; }
  .rg-line, .rg-line:first-child { padding: 20px 0; }
  .rg-line + .rg-line { border-inline-start: 0; border-top: 1px solid rgba(255,255,255,.18); }
}
/* ECG motif on "ECG paper" */
.rg-line-ecg .rg-line-motif {
  background-color: #FFF5F6;
  background-image: linear-gradient(rgba(215,38,61,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(215,38,61,.14) 1px, transparent 1px);
  background-size: 8px 8px;
}
.rg-line-ecg path { stroke: var(--rg-red); }

/* Tape band plays when it scrolls into view (not on page load), and replays each time */
.rg-tape-done { animation: none; clip-path: inset(0 0 0 100%); }
[dir="rtl"] .rg-tape-done { animation: none; clip-path: inset(0 100% 0 0); }
.rg-tape.run .rg-tape-done { animation: rg-steam 2.6s cubic-bezier(.5,0,.2,1) .2s both; }
[dir="rtl"] .rg-tape.run .rg-tape-done { animation: rg-steam-rtl 2.6s cubic-bezier(.5,0,.2,1) .2s both; }
@media (prefers-reduced-motion: reduce) {
  .rg-tape-done, .rg-tape.run .rg-tape-done { animation: none; clip-path: inset(0 0 0 48%); }
  [dir="rtl"] .rg-tape-done, [dir="rtl"] .rg-tape.run .rg-tape-done { animation: none; clip-path: inset(0 48% 0 0); }
}
/* anchors land below the sticky header */
#tape, #ecg, #products { scroll-margin-top: 130px; }

/* ══ v4 hero: colour + floating real products + live ECG trace ══ */
.rg-mhero { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 600px at 85% 20%, #1C8BD6 0%, rgba(28,139,214,0) 60%),
              linear-gradient(135deg, #0068A8 0%, #0B4F86 45%, #0B2A45 100%); }
.rg-mhero-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px; }
.rg-mhero-ecg { position: absolute; left: 0; right: 0; top: 46%; width: 100%; height: 180px; }
.rg-mhero-ecg path { fill: none; stroke: rgba(124,196,240,.55); stroke-width: 2.5; stroke-linejoin: round;
  stroke-dasharray: 3400; stroke-dashoffset: 3400; animation: rg-sweep 5s linear infinite; }
@keyframes rg-sweep { 0% { stroke-dashoffset: 3400; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
[dir="rtl"] .rg-mhero-ecg { transform: scaleX(-1); }
.rg-bub { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .5; animation: rg-drift 14s ease-in-out infinite alternate; }
.rg-bub1 { width: 260px; height: 260px; background: radial-gradient(circle, rgba(243,232,174,.35), rgba(243,232,174,0) 70%); top: 8%; inset-inline-end: 6%; }
.rg-bub2 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(215,38,61,.25), rgba(215,38,61,0) 70%); bottom: -80px; inset-inline-start: 30%; animation-duration: 18s; }
.rg-bub3 { width: 180px; height: 180px; background: radial-gradient(circle, rgba(124,196,240,.35), rgba(124,196,240,0) 70%); top: 30%; inset-inline-start: 4%; animation-duration: 11s; }
@keyframes rg-drift { from { transform: translate(0,0); } to { transform: translate(40px,-30px); } }

.rg-mhero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-top: 72px; padding-bottom: 40px; }
.rg-mhero-text { display: flex; flex-direction: column; gap: 20px; }
.rg-mhero h1 { color: #fff !important; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.12; letter-spacing: -1px; margin: 0; max-width: 16ch; }
[dir="rtl"] .rg-mhero h1 { letter-spacing: 0; line-height: 1.3; }

/* stage of floating products */
.rg-stage { position: relative; height: 480px; }
.rg-fl { position: absolute; display: block; filter: drop-shadow(0 28px 34px rgba(4,20,38,.45)); animation: rg-float 6s ease-in-out infinite; }
.rg-fl-pouch { width: 40%; top: 0; inset-inline-start: 4%; transform: rotate(-6deg); animation-delay: -2s; }
.rg-fl-tape { margin: 0; width: 46%; top: 16%; inset-inline-end: 0; border-radius: 22px; overflow: hidden; border: 6px solid #fff; background: #fff; animation-delay: -4s; }
.rg-fl-tape img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.rg-fl-ecg { width: 52%; bottom: 0; inset-inline-start: 22%; }
@keyframes rg-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.rg-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--rg-ink);
  font-weight: 700; font-size: .9rem; padding: 8px 14px; border-radius: 999px; box-shadow: 0 12px 24px -12px rgba(0,0,0,.45);
  animation: rg-float 7s ease-in-out infinite; }
.rg-chip-a { top: 6%; inset-inline-end: 4%; animation-delay: -1s; }
.rg-chip-b { bottom: 10%; inset-inline-end: 2%; animation-delay: -3s; }
.rg-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.rg-dot-y { background: repeating-linear-gradient(115deg, var(--rg-cream) 0 3px, #17191B 3px 5px); }
.rg-dot-r { background: var(--rg-red); box-shadow: 0 0 0 0 rgba(215,38,61,.6); animation: rg-pulse 1.4s ease-out infinite; }
@keyframes rg-pulse { to { box-shadow: 0 0 0 10px rgba(215,38,61,0); } }

/* the colouring tape band sits on the hero's bottom edge */
.rg-tape-hero { margin: 10px 0 0; padding-bottom: 0; position: relative; }
.rg-tape-hero .rg-tape-strip { transform: rotate(-1.4deg) translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  .rg-fl, .rg-chip, .rg-bub, .rg-dot-r { animation: none; }
  .rg-mhero-ecg path { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 960px) {
  .rg-mhero-grid { grid-template-columns: 1fr; padding-top: 48px; }
  .rg-stage { height: 360px; }
}
@media (max-width: 560px) {
  .rg-stage { height: 300px; }
  .rg-chip { font-size: .8rem; padding: 6px 10px; }
}

/* ══ scroll reveal (added by JS only, so content is visible without JS) ══ */
.rg-rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rg-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rg-rv { opacity: 1; transform: none; transition: none; } }

/* product photos gently zoom on hover */
.rg-item-img img, .rg-ecg-media img, .rg-spot-a { transition: transform .5s ease; }
.rg-item:hover .rg-item-img img { transform: scale(1.06); }

/* ECG imagery on "ECG paper" */
.rg-ecg-media {
  background-color: #FFF6F7;
  background-image: linear-gradient(rgba(215,38,61,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(215,38,61,.10) 1px, transparent 1px);
  background-size: 22px 22px; padding: 36px;
}
.rg-ecg-media img { filter: drop-shadow(0 24px 26px rgba(120,20,35,.25)); animation: rg-float 6s ease-in-out infinite; }
.rg-item-img img[src$=".webp"] { object-fit: contain; padding: 18px; }
.rg-item-img:has(img[src$=".webp"]) { background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #FBE6E9 80%); }
@media (prefers-reduced-motion: reduce) { .rg-ecg-media img { animation: none; } }

/* ══════════ v6 — Yuechen-style slider hero ══════════ */
.rg-slider { position: relative; height: min(88vh, 760px); min-height: 560px; overflow: hidden; background: #0B2A45; color: #fff; }
.rg-slides, .rg-slide { position: absolute; inset: 0; }
.rg-slide { opacity: 0; transition: opacity 1.2s ease; overflow: hidden; }
.rg-slide.is-on { opacity: 1; z-index: 1; }
.rg-kb { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transform-origin: 30% 50%; }
.rg-slide.is-on .rg-kb { animation: rg-kenburns 7.5s ease-out both; }
@keyframes rg-kenburns { from { transform: scale(1.02); } to { transform: scale(1.14); } }
/* tech slide */
.rg-slide-tech { background: radial-gradient(900px 500px at 25% 55%, #1E9BE6 0%, rgba(30,155,230,0) 60%), linear-gradient(135deg, #0A5D99, #0B2A45 80%); }
.rg-tech-bg { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(124,196,240,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(124,196,240,.12) 1px, transparent 1px);
  background-size: 32px 32px; }
.rg-tech-ecg { position: absolute; left: 0; right: 0; top: 40%; width: 100%; height: 260px; }
.rg-tech-ecg path { fill: none; stroke: #7FE3FF; stroke-width: 3.5; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(127,227,255,.9));
  stroke-dasharray: 3600; stroke-dashoffset: 3600; }
.rg-slide-tech.is-on .rg-tech-ecg path { animation: rg-sweep2 3.6s linear infinite; }
@keyframes rg-sweep2 { 0% { stroke-dashoffset: 3600; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.rg-tech-heart { position: absolute; width: 150px; top: 24%; inset-inline-end: 54%; fill: rgba(127,227,255,.22); stroke: #7FE3FF; stroke-width: 2;
  filter: drop-shadow(0 0 18px rgba(127,227,255,.8)); animation: rg-heart 1.1s ease-in-out infinite; }
@keyframes rg-heart { 0%,100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
.rg-tech-prod { position: absolute; width: min(38vw, 520px); inset-inline-end: 58%; bottom: 13%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.rg-slide-tech.is-on .rg-tech-prod { animation: rg-float 6s ease-in-out infinite; }
[dir="rtl"] .rg-tech-ecg { transform: scaleX(-1); }
/* text side shade: dark on the text side, clear over the products */
.rg-slider-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,42,69,.05) 0%, rgba(11,42,69,.25) 40%, rgba(11,42,69,.86) 100%); }
[dir="ltr"] .rg-slider-shade { background: linear-gradient(270deg, rgba(11,42,69,.05) 0%, rgba(11,42,69,.25) 40%, rgba(11,42,69,.86) 100%); }
.rg-slider-text { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-bottom: 60px; }
.rg-slider-text > * { max-width: 560px; }
.rg-slider h1 { color: #fff !important; font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: 1.15; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
[dir="rtl"] .rg-slider h1 { line-height: 1.32; }
.rg-slider .rg-vkicker { letter-spacing: 2px; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; }
.rg-arrow { position: absolute; z-index: 4; top: 46%; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.18); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; }
.rg-arrow:hover { background: rgba(255,255,255,.35); }
.rg-arrow svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rg-prev { left: 18px; } .rg-next { right: 18px; }
.rg-bars { position: absolute; z-index: 4; left: 0; right: 0; bottom: 92px; display: flex; gap: 10px; }
.rg-bars span { flex: 0 0 72px; height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.rg-bars i { display: block; height: 100%; width: 0; background: #fff; }
.rg-bars span.is-on i { animation: rg-bar 6s linear forwards; }
@keyframes rg-bar { to { width: 100%; } }
.rg-slider .rg-tape-hero { position: absolute; z-index: 4; left: 0; right: 0; bottom: 6px; margin: 0; }
.rg-slider .rg-tape-hero .rg-tape-strip { transform: rotate(-1.4deg); }
@media (prefers-reduced-motion: reduce) {
  .rg-slide.is-on .rg-kb, .rg-slide-tech.is-on .rg-tech-ecg path, .rg-tech-heart, .rg-slide-tech.is-on .rg-tech-prod, .rg-bars span.is-on i { animation: none; }
  .rg-tech-ecg path { stroke-dashoffset: 0; }
}
@media (max-width: 760px) {
  .rg-slider { height: 640px; }
  .rg-slider-shade, [dir="ltr"] .rg-slider-shade { background: linear-gradient(0deg, rgba(11,42,69,.92) 0%, rgba(11,42,69,.55) 55%, rgba(11,42,69,.1) 100%); }
  .rg-slider-text { justify-content: flex-end; padding-bottom: 130px; }
  .rg-tech-prod { width: 62vw; top: 8%; bottom: auto; inset-inline-end: 6%; }
  .rg-tech-heart { width: 90px; top: 10%; inset-inline-end: auto; inset-inline-start: 8%; }
  .rg-tech-ecg { top: 18%; height: 160px; }
  .rg-arrow { top: 30%; width: 40px; height: 40px; }
  .rg-bars { bottom: 96px; }
  .rg-bars span { flex-basis: 44px; }
}

/* ══════════ Yuechen-style product tiles ══════════ */
.rg-item { background: linear-gradient(140deg, #FFFFFF 0%, #EAF2FA 100%); border: 1px solid #E1EAF3; padding: 22px 22px 24px; position: relative; overflow: hidden; }
.rg-item:hover { border-color: var(--rg-blue); box-shadow: 0 24px 40px -28px rgba(0,104,168,.6); transform: translateY(-4px); }
.rg-item { transition: border-color .25s, box-shadow .25s, transform .25s; }
.rg-item-img { background: transparent !important; border-radius: 14px; }
.rg-item-img img[src$=".webp"] { padding: 6px; }
.rg-item-cat { order: -1; margin: 0 0 6px; background: none; padding: 0; font-size: .8rem; letter-spacing: .5px; color: #4D6A85; text-transform: uppercase; }
.rg-item .rg-go { margin-top: 6px; padding-inline: 6px; }

/* ══════════ Why RIDGE cards (numbered like Yuechen, icon + hover colour) ══════════ */
.rg-why { background: #fff; }
.rg-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.rg-why-card { background: linear-gradient(140deg, #F7FAFD, #EDF3F9); border: 1px solid #E1EAF3; border-radius: 18px; padding: 28px; transition: background .3s, color .3s, transform .3s; }
.rg-why-card h3 { font-size: 1.15rem; margin: 14px 0 8px; }
.rg-why-card p { margin: 0; color: var(--rg-muted); line-height: 1.6; }
.rg-why-ico { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--rg-blue); box-shadow: 0 8px 18px -10px rgba(0,104,168,.5); }
.rg-why-ico svg { width: 26px; height: 26px; }
.rg-why-card:hover { background: linear-gradient(140deg, #0068A8, #0B4F86); transform: translateY(-4px); }
.rg-why-card:hover h3 { color: #fff; } .rg-why-card:hover p { color: #D3E4F2; }
@media (max-width: 960px) { .rg-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rg-why-grid { grid-template-columns: 1fr; } }

/* ══════════ Inner page banner (products) ══════════ */
.rg-phero { position: relative; overflow: hidden; color: #fff; padding: 84px 0 64px;
  background: linear-gradient(90deg, rgba(11,42,69,.92), rgba(11,42,69,.55)), url(../img/hero/s-ecg-light.jpg) center/cover; }
[dir="rtl"] .rg-phero { background: linear-gradient(270deg, rgba(11,42,69,.92), rgba(11,42,69,.55)), url(../img/hero/s-ecg-light.jpg) center/cover; }
.rg-phero-inner { position: relative; display: flex; flex-direction: column; gap: 12px; }
.rg-phero h1 { color: #fff !important; font-size: clamp(2rem, 4vw, 3rem); margin: 0; }
.rg-phero p { color: #DCE7F1; margin: 0; max-width: 60ch; font-size: 1.1rem; }
.rg-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rg-cats a { color: #fff; border: 1px solid rgba(255,255,255,.5); padding: 8px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.rg-cats a:hover { background: #fff; color: var(--rg-ink); }
.rg-cats span { opacity: .7; font-size: .85em; margin-inline-start: 4px; }
.rg-group { margin-bottom: 56px; scroll-margin-top: 130px; }
.rg-group-title { font-size: 1.6rem; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 2px solid var(--rg-ink); }
.rg-ask { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 32px; border-radius: 20px; background: linear-gradient(135deg, #0068A8, #0B2A45); color: #fff; }
.rg-ask h2 { color: #fff !important; margin: 0 0 6px; font-size: 1.5rem; }
.rg-ask p { margin: 0; color: #D3E4F2; }
/* slider fixes: keep products on the side away from the text */
[dir="rtl"] .rg-tech-prod { inset-inline-end: 6%; }
[dir="rtl"] .rg-tech-heart { inset-inline-end: 34%; top: 18%; }
[dir="ltr"] .rg-tech-prod { inset-inline-end: 6%; }
[dir="ltr"] .rg-tech-heart { inset-inline-end: 34%; top: 18%; }
[dir="ltr"] .rg-kb { transform-origin: 70% 50%; }
.rg-kb { object-position: 0% 50%; }
[dir="ltr"] .rg-slide .rg-kb { object-position: 0% 50%; }
@media (max-width: 760px) {
  [dir] .rg-tech-prod { width: 58vw; top: 6%; bottom: auto; inset-inline-end: 4%; }
  [dir] .rg-tech-heart { width: 70px; top: 6%; inset-inline-end: auto; inset-inline-start: 6%; }
  .rg-kb { object-position: 12% 30%; }
}
@media (min-width: 761px) { [dir] .rg-tech-prod { width: min(30vw, 430px); inset-inline-end: 9%; bottom: 18%; } }
/* company slide: both product lines side by side, no overlap */
.rg-tech-duo { position: absolute; inset-inline-end: 7%; top: 50%; translate: 0 -55%; display: flex; gap: 22px; align-items: flex-end; }
.rg-tech-card { margin: 0; width: min(19vw, 270px); background: #fff; border-radius: 22px; padding: 10px 10px 14px; box-shadow: 0 30px 50px -24px rgba(0,0,0,.55); animation: rg-float 6s ease-in-out infinite; }
.rg-tech-card + .rg-tech-card { animation-delay: -3s; margin-bottom: 48px; }
.rg-tech-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; display: block; }
.rg-tech-card-ecg img { object-fit: contain; background: radial-gradient(circle at 50% 40%, #fff, #FBE6E9 80%); padding: 10px; }
.rg-tech-card figcaption { color: var(--rg-ink); font-weight: 700; font-size: .95rem; text-align: center; margin-top: 10px; }
.rg-tech-prod { display: none; }
.rg-tech-heart { inset-inline-end: auto !important; inset-inline-start: 50%; top: 14% !important; }
.rg-slide-tag { position: absolute; z-index: 3; inset-inline-end: 6%; bottom: 120px; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--rg-ink); font-weight: 700; padding: 9px 16px; border-radius: 999px; box-shadow: 0 12px 24px -12px rgba(0,0,0,.4); }
@media (max-width: 760px) {
  .rg-tech-duo { inset-inline-end: 50%; translate: 50% 0; top: 5%; gap: 12px; }
  [dir="rtl"] .rg-tech-duo { translate: -50% 0; }
  .rg-tech-card { width: 36vw; padding: 6px 6px 8px; }
  .rg-tech-card + .rg-tech-card { margin-bottom: 24px; }
  .rg-tech-card figcaption { font-size: .78rem; }
  .rg-tech-heart { display: none; }
  .rg-slide-tag { top: 16px; bottom: auto; inset-inline-end: 16px; font-size: .8rem; padding: 6px 12px; }
}

/* ══════════ v7 — Products dropdown in the top bar ══════════ */
.rs-dd { position: relative; }
.rs-dd-btn { display: inline-flex !important; align-items: center; gap: 4px; }
.rs-dd-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: transform .2s; }
.rs-dd-menu {
  position: absolute; top: 100%; inset-inline-start: -12px; min-width: 300px; padding: 10px; margin-top: 6px;
  background: #fff; border: 1px solid var(--rg-line); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(11,42,69,.35);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 200;
}
.rs-dd:hover .rs-dd-menu, .rs-dd:focus-within .rs-dd-menu { opacity: 1; visibility: visible; transform: none; }
.rs-dd:hover .rs-dd-btn svg { transform: rotate(180deg); }
.rs-links .rs-dd-item { display: flex !important; align-items: center; gap: 12px; padding: 10px !important; border-radius: 12px !important; }
.rs-links .rs-dd-item:hover { background: #EEF4FA !important; }
.rs-dd-thumb { width: 52px; height: 52px; flex: none; border-radius: 10px; overflow: hidden; background: linear-gradient(140deg,#fff,#E3EEF8); display: flex; align-items: center; justify-content: center; }
.rs-dd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rs-dd-thumb img[src$=".webp"] { object-fit: contain; padding: 4px; }
.rs-dd-item strong { display: block; color: var(--rg-ink); font-size: .98rem; }
.rs-dd-item small { color: var(--rg-muted); font-size: .82rem; }
.rs-links .rs-dd-all { display: block !important; text-align: center; margin-top: 6px; padding: 10px !important; color: var(--rg-blue) !important; font-weight: 700; border-top: 1px solid var(--rg-line); border-radius: 0 !important; }
@media (max-width: 960px) {
  .rs-dd-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 0; margin: 0; min-width: 0; background: transparent; }
  .rs-dd-btn svg { display: none; }
  .rs-dd-thumb { width: 40px; height: 40px; }
}

/* ══════════ Product page banner + body ══════════ */
.rg-pbanner { position: relative; overflow: hidden; color: #fff; padding: 70px 0 84px; }
.rg-pb-tape { background: linear-gradient(270deg, rgba(11,42,69,.94) 0%, rgba(11,42,69,.7) 55%, rgba(11,42,69,.35) 100%), url(../img/hero/s-tape-light.jpg) center/cover; }
.rg-pb-ecg  { background: linear-gradient(270deg, rgba(11,42,69,.94) 0%, rgba(11,42,69,.7) 55%, rgba(11,42,69,.35) 100%), url(../img/hero/s-ecg-light.jpg) center/cover; }
.rg-pb-gen  { background: linear-gradient(135deg, #0068A8, #0B2A45); }
[dir="ltr"] .rg-pb-tape { background: linear-gradient(90deg, rgba(11,42,69,.94) 0%, rgba(11,42,69,.7) 55%, rgba(11,42,69,.35) 100%), url(../img/hero/s-tape-light.jpg) center/cover; }
[dir="ltr"] .rg-pb-ecg  { background: linear-gradient(90deg, rgba(11,42,69,.94) 0%, rgba(11,42,69,.7) 55%, rgba(11,42,69,.35) 100%), url(../img/hero/s-ecg-light.jpg) center/cover; }
.rg-pbanner-inner { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; }
.rg-pbanner h1 { color: #fff !important; font-size: clamp(2rem, 4.4vw, 3.2rem); margin: 0; }
.rg-crumbs { font-size: .9rem; color: #C9D8E6; }
.rg-crumbs a { color: #fff; text-decoration: none; opacity: .85; } .rg-crumbs a:hover { opacity: 1; text-decoration: underline; }
.rg-pb-chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rg-pb-chips li { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(4px); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .95rem; }
.rg-pb-ecg .rg-pb-chips li:first-child, .rg-pb-tape .rg-pb-chips li:first-child { background: #fff; color: var(--rg-ink); }
svg.rg-pb-trace { position: absolute; left: 0; right: 0; bottom: 18px; width: 100%; height: 120px; z-index: 1; }
svg.rg-pb-trace path { fill: none; stroke: #FF6B7D; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 3400; stroke-dashoffset: 3400; animation: rg-sweep 4s linear infinite; filter: drop-shadow(0 0 6px rgba(255,107,125,.8)); }
[dir="rtl"] svg.rg-pb-trace { transform: scaleX(-1); }
.rg-tape-pb { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; z-index: 1; }
.rg-tape-pb .rg-tape-strip { height: 34px; transform: rotate(-.8deg) translateY(10px); }
/* hide the old title block inside the info column (the banner carries it now) */
.rg-pbanner ~ .section .pd-breadcrumb, .rg-pbanner ~ .section .pd-badge, .rg-pbanner ~ .section .pd-title, .rg-pbanner ~ .section .pd-divider { display: none; }
.rg-pbanner ~ .section { background: linear-gradient(180deg, #EEF4FA 0%, var(--rg-steam) 60%); padding-top: 48px !important; }
.pd-main-img { border-radius: 22px !important; box-shadow: 0 30px 60px -36px rgba(11,42,69,.55); background: #fff; }
.pd-thumb { border-radius: 12px !important; }
.pd-lead { font-size: 1.3rem !important; color: var(--rg-ink) !important; font-weight: 700; }
.pd-specs { border-radius: 16px !important; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(11,42,69,.5); }
.pd-specs th { background: linear-gradient(90deg, #0068A8, #0B4F86) !important; color: #fff !important; }
.pd-specs tr:nth-child(even) td { background: #F4F8FC; }
.tp-feat { background: #fff; }
.tp-row { background: linear-gradient(140deg, #F7FAFD, #EAF2FA); border-radius: 24px; padding: 22px; }
.tp-row img { box-shadow: 0 20px 40px -28px rgba(11,42,69,.6); }
.tp-h2 { font-size: clamp(1.6rem, 3vw, 2.3rem) !important; }

/* ══════════ Inner page banners (contact, about, news) ══════════ */
[dir="rtl"] .rg-phero.rg-phero-tape { background: linear-gradient(270deg, rgba(11,42,69,.94), rgba(11,42,69,.45)), url(../img/hero/s3-carton.jpg) center/cover; }
[dir="rtl"] .rg-phero.rg-phero-carton { background: linear-gradient(270deg, rgba(11,42,69,.94), rgba(11,42,69,.45)), url(../img/hero/s-tape-light.jpg) center/cover; }
[dir="rtl"] .rg-phero.rg-phero-ecg { background: linear-gradient(270deg, rgba(11,42,69,.94), rgba(11,42,69,.45)), url(../img/hero/s-ecg-light.jpg) center/cover; }
[dir="ltr"] .rg-phero.rg-phero-tape { background: linear-gradient(90deg, rgba(11,42,69,.94), rgba(11,42,69,.45)), url(../img/hero/s3-carton.jpg) center/cover; }
[dir="ltr"] .rg-phero.rg-phero-carton { background: linear-gradient(90deg, rgba(11,42,69,.94), rgba(11,42,69,.45)), url(../img/hero/s-tape-light.jpg) center/cover; }
[dir="ltr"] .rg-phero.rg-phero-ecg { background: linear-gradient(90deg, rgba(11,42,69,.94), rgba(11,42,69,.45)), url(../img/hero/s-ecg-light.jpg) center/cover; }

/* about page */
body.rs .section { background: var(--rg-steam); }
body.rs .section-alt { background: #fff; }
.mission-visual { background: linear-gradient(140deg, #0068A8, #0B2A45) !important; border-radius: 24px !important; position: relative; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(11,42,69,.7); }
.mission-visual::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background-color: var(--rg-cream); background-image: repeating-linear-gradient(115deg, transparent 0 16px, var(--rg-black) 16px 22px); }
.section-label { color: var(--rg-blue) !important; }
.divider { background: linear-gradient(90deg, var(--rg-blue), var(--rg-red)) !important; height: 4px !important; border-radius: 4px; }

/* contact page */
.contact-item { background: #fff; border: 1px solid var(--rg-line); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; transition: transform .2s, box-shadow .2s; }
.contact-item:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -26px rgba(0,104,168,.6); }
.contact-item-icon { background: linear-gradient(140deg, #0068A8, #0B4F86) !important; color: #fff !important; border-radius: 12px !important; }
.contact-map { border-radius: 22px !important; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(11,42,69,.55); min-height: 360px; background: linear-gradient(140deg,#F7FAFD,#E3EEF8); }

/* news + posts */
.post-card { border-radius: 18px !important; overflow: hidden; border: 1px solid var(--rg-line); transition: transform .25s, box-shadow .25s; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(0,104,168,.6); }
.post-full { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }
.post-full h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.post-full .cover img { border-radius: 22px; }
.rg-btn-channel { border: 1.5px solid #1C7A43; color: #1C7A43; background: #fff; margin-inline-start: 8px; }
.rg-btn-channel:hover { background: #E8F5EE; color: #145C32; }
@media (max-width: 560px) { .rg-btn-channel { margin: 10px 0 0; } }

/* Short contact band at the end of the homepage */
.rg-cta { background: linear-gradient(135deg, #0068A8, #0B2A45); color: #fff; padding: 56px 0; }
.rg-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; }
.rg-cta h2 { color: #fff !important; margin: 0 0 8px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.35; }
.rg-cta p { margin: 0; color: #D3E4F2; }

/* ── News & article (identity pass) ── */
.rg-post .rg-item-img { position: relative; }
.rg-post-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(215,38,61,.9); display: flex; align-items: center; justify-content: center; }
.rg-article { max-width: 860px; display: flex; flex-direction: column; gap: 32px; }
.rg-article-media { border-radius: 18px; overflow: hidden; background: var(--rg-cream); border: 1px solid var(--rg-line); }
.rg-article-media img { width: 100%; display: block; max-height: 520px; object-fit: contain; background: #fff; }
.rg-article-yt { aspect-ratio: 16/9; } .rg-article-yt iframe { width: 100%; height: 100%; border: 0; display: block; }
.rg-article-body { background: linear-gradient(180deg,#fff,#EAF2FA); border: 1px solid var(--rg-line); border-radius: 18px; padding: 28px 30px; border-inline-start: 5px solid var(--rg-blue); }
.rg-article-body p { margin: 0 0 12px; line-height: 1.9; color: var(--rg-ink); font-size: 1.05rem; }
.rg-article-body p:first-child { font-weight: 700; font-size: 1.2rem; }
.rg-article-body p:last-child { margin-bottom: 0; }

/* footer identity: company name + tape stripe */
.rs-footer { position: relative; }
.rs-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--rg-cream) 0 18px, var(--rg-black) 18px 36px); }
.rs-foot-name { display: block; color: #fff; font-size: 1.1rem; margin-bottom: 6px; }

.rs-foot-slogan { display: block; color: var(--rg-cream); font-weight: 600; margin-bottom: 10px; }


/* ================================================================
   Identity v3 (Oct 2026) — matches the Facebook / LinkedIn covers:
   navy → brand-blue gradient, symbolic duotone team photo fading in
   at the end side, two thin curves (cream + sky), Kufi Arabic headings,
   Helvetica-style English headings, thin blue rule instead of hazard stripe.
   ================================================================ */
body.rs h1, body.rs h2, body.rs h3, body.rs h4 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
[dir="rtl"] body.rs h1, [dir="rtl"] body.rs h2, [dir="rtl"] body.rs h3, [dir="rtl"] body.rs h4,
[dir="rtl"] .rg-slider h1 { font-family: "Noto Kufi Arabic", "IBM Plex Sans Arabic", Tahoma, sans-serif; font-weight: 700; line-height: 1.45; }

.rg-phero, .rg-phero.rg-phero-tape, .rg-phero.rg-phero-carton, .rg-phero.rg-phero-ecg,
[dir] .rg-phero, [dir] .rg-phero.rg-phero-tape, [dir] .rg-phero.rg-phero-carton, [dir] .rg-phero.rg-phero-ecg,
.rg-pbanner.rg-pb-tape, .rg-pbanner.rg-pb-ecg, .rg-pbanner.rg-pb-gen,
[dir] .rg-pbanner.rg-pb-tape, [dir] .rg-pbanner.rg-pb-ecg, [dir] .rg-slide-brand {
  background: linear-gradient(100deg, #0B2A45 0%, #0B2A45 42%, #0068A8 100%);
}
[dir="rtl"] .rg-phero, [dir="rtl"] .rg-phero.rg-phero-tape, [dir="rtl"] .rg-phero.rg-phero-carton, [dir="rtl"] .rg-phero.rg-phero-ecg,
[dir="rtl"] .rg-pbanner.rg-pb-tape, [dir="rtl"] .rg-pbanner.rg-pb-ecg, [dir="rtl"] .rg-pbanner.rg-pb-gen, [dir="rtl"] .rg-slide-brand {
  background: linear-gradient(260deg, #0B2A45 0%, #0B2A45 42%, #0068A8 100%);
}
.rg-phero .rg-mhero-bg { display: none; }
.rg-phero::before, .rg-pbanner::before, .rg-slide-brand::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50%; z-index: 0; pointer-events: none;
  background: url(../img/brand/team-duo-l.webp) 0% 25% / cover no-repeat;
  mix-blend-mode: luminosity; opacity: .9;
}
[dir="ltr"] .rg-phero::before, [dir="ltr"] .rg-pbanner::before, [dir="ltr"] .rg-slide-brand::before,
.rg-phero::before, .rg-pbanner::before { right: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
[dir="rtl"] .rg-phero::before, [dir="rtl"] .rg-pbanner::before, [dir="rtl"] .rg-slide-brand::before {
  right: auto; left: 0; background-image: url(../img/brand/team-duo-r.webp); background-position: 100% 25%;
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 45%); mask-image: linear-gradient(270deg, transparent, #000 45%);
}
.rg-phero::after, .rg-pbanner::after, .rg-slide-brand::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url(../img/brand/curves.svg) center / 100% 100% no-repeat;
}
[dir="rtl"] .rg-phero::after, [dir="rtl"] .rg-pbanner::after, [dir="rtl"] .rg-slide-brand::after { transform: scaleX(-1); }
.rg-phero-inner, .rg-pbanner-inner { position: relative; z-index: 2; }
.rg-slide-brand::before { width: 58%; }
@media (max-width: 720px) {
  .rg-phero::before, .rg-pbanner::before { width: 70%; opacity: .45; }
}

/* footer: thin brand rule instead of the hazard stripe */
.rs-footer::before { height: 4px; background: linear-gradient(90deg, #0068A8, #3FA9F5 60%, #F3E8AE); }
[dir="rtl"] .rs-footer::before { background: linear-gradient(270deg, #0068A8, #3FA9F5 60%, #F3E8AE); }
.rg-slide-brand::before { width: 50%; opacity: .6; background-size: cover; }
.rg-phero::before, .rg-pbanner::before { opacity: .75; }

/* v3.1 — symbolic globe replaces the photo on every banner */
.rg-phero::before, .rg-pbanner::before, .rg-slide-brand::before,
[dir="rtl"] .rg-phero::before, [dir="rtl"] .rg-pbanner::before, [dir="rtl"] .rg-slide-brand::before {
  background: url(../img/brand/globe.png?v=3) center / contain no-repeat;
  mix-blend-mode: normal; opacity: 1; -webkit-mask-image: none; mask-image: none;
  width: min(42%, 520px); top: 6%; bottom: 6%;
}
[dir="ltr"] .rg-phero::before, [dir="ltr"] .rg-pbanner::before, [dir="ltr"] .rg-slide-brand::before { right: 4%; left: auto; }
[dir="rtl"] .rg-phero::before, [dir="rtl"] .rg-pbanner::before, [dir="rtl"] .rg-slide-brand::before { left: 4%; right: auto; }
@media (max-width: 720px) {
  .rg-phero::before, .rg-pbanner::before, .rg-slide-brand::before { width: 60%; opacity: .35; }
}

/* Arabic type: Almarai for all Arabic text (headings + body) */
[dir="rtl"] body.rs, [dir="rtl"] body.rs h1, [dir="rtl"] body.rs h2, [dir="rtl"] body.rs h3, [dir="rtl"] body.rs h4,
[dir="rtl"] .rg-slider h1, [dir="rtl"] body.rs button, [dir="rtl"] body.rs input, [dir="rtl"] body.rs textarea, [dir="rtl"] body.rs select {
  font-family: "Almarai", "IBM Plex Sans Arabic", Tahoma, sans-serif;
}
[dir="rtl"] body.rs h1, [dir="rtl"] body.rs h2, [dir="rtl"] body.rs h3 { font-weight: 800; line-height: 1.4; }
[dir="rtl"] body.rs { line-height: 1.8; }
.mission-visual::after { height: 4px; background: linear-gradient(90deg, #0068A8, #3FA9F5 60%, #F3E8AE); background-image: linear-gradient(90deg, #0068A8, #3FA9F5 60%, #F3E8AE); }
.divider { background: linear-gradient(90deg, #0068A8, #F3E8AE) !important; }

.rs-social a { display: inline-flex; align-items: center; gap: 6px; }
.rs-social svg { flex: none; }

/* footer logo: on-dark version, no white box */
footer .rs-foot-logo{background:none;padding:0;border-radius:0;margin-bottom:16px}
footer .rs-foot-logo img{height:52px;width:auto}

/* static brand hero (v18): mobile fits content, nothing cut */
@media (max-width: 760px) {
  .rg-slider { height: auto; min-height: 0; }
  .rg-slides { position: absolute; inset: 0; }
  .rg-slider-text { height: auto; justify-content: flex-start; padding-top: 56px; padding-bottom: 72px; }
}

/* animated globe on the homepage hero (v20) */
.rg-slide-brand::before { display: none; }
.rg-globe-anim { position: absolute; z-index: 0; top: 6%; height: 88%; width: min(42%, 520px); pointer-events: none; }
[dir="ltr"] .rg-globe-anim { right: 4%; }
[dir="rtl"] .rg-globe-anim { left: 4%; }
@media (max-width: 760px) { .rg-globe-anim { width: 60%; opacity: .35; } }
.rg-globe-anim .ga-rt { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ga-draw 1.1s cubic-bezier(.4,0,.2,1) forwards; animation-delay: calc(.4s + var(--i) * .22s); }
.rg-globe-anim .ga-dot { opacity: 0; animation: ga-fade .4s ease forwards; animation-delay: calc(.4s + var(--i) * .22s); }
.rg-globe-anim .ga-glint { stroke-dasharray: .07 1.2; stroke-dashoffset: .07; opacity: 0; animation: ga-glint 7s linear infinite; animation-delay: calc(3s + var(--i) * 1.1s); }
.rg-globe-anim .ga-eg-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ga-ping 2.8s ease-out 2s infinite; }
.rg-globe-anim .ga-beat { stroke-dasharray: .1 .9; stroke-dashoffset: 0; opacity: .75; animation: ga-beat 5s linear infinite; }
@keyframes ga-draw { to { stroke-dashoffset: 0; } }
@keyframes ga-fade { to { opacity: 1; } }
@keyframes ga-glint { 0% { stroke-dashoffset: .07; opacity: 0; } 3% { opacity: .95; } 24% { stroke-dashoffset: -1; opacity: .95; } 26%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes ga-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes ga-beat { to { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce) {
  .rg-globe-anim .ga-rt { animation: none; stroke-dashoffset: 0; }
  .rg-globe-anim .ga-dot { animation: none; opacity: 1; }
  .rg-globe-anim .ga-glint, .rg-globe-anim .ga-beat { display: none; }
  .rg-globe-anim .ga-eg-ring { animation: none; opacity: .9; }
}

/* v21: brighter globe on mobile + background curves draw once on load */
@media (max-width: 760px) { .rg-globe-anim { opacity: .5; } }
.rg-slide-brand::after { display: none; }
.rg-curves-anim { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
[dir="rtl"] .rg-curves-anim { transform: scaleX(-1); }
.rg-curves-anim path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ga-draw 2.4s cubic-bezier(.4,0,.2,1) forwards; }
.rg-curves-anim .cv1 { animation-delay: .15s; }
.rg-curves-anim .cv2 { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .rg-curves-anim path { animation: none; stroke-dashoffset: 0; } }

/* v22: calmer motion — one repeating glint, ping and heartbeat run once */
.rg-globe-anim .ga-glint { animation: ga-glint1 24s linear infinite; animation-delay: calc(3s + var(--i) * 4s); }
@keyframes ga-glint1 { 0% { stroke-dashoffset: .07; opacity: 0; } .6% { opacity: .95; } 4.5% { stroke-dashoffset: -1; opacity: .95; } 5%, 100% { stroke-dashoffset: -1; opacity: 0; } }
.rg-globe-anim .ga-eg-ring { opacity: .9; animation: ga-ping1 2.8s ease-out 2s 1 both; }
@keyframes ga-ping1 { 0% { transform: scale(1); opacity: 0; } 12% { opacity: .9; } 60% { transform: scale(2.4); opacity: 0; } 61% { transform: scale(1); opacity: 0; } 100% { transform: scale(1); opacity: .9; } }
.rg-globe-anim .ga-beat { opacity: 0; animation: ga-beat1 4s linear 1s 1 both; }
@keyframes ga-beat1 { 0% { stroke-dashoffset: 0; opacity: 0; } 8% { opacity: .75; } 85% { opacity: .75; } 100% { stroke-dashoffset: -1; opacity: 0; } }

/* v23: background curves drawn above the globe's halo, low enough to clear the sphere */
.rg-curves-anim { z-index: 1; }
.rg-curves-anim path { animation-duration: 2.8s; }

/* v24 docs note */
.pd-doc-note{margin-top:14px;font-size:.95em;line-height:1.7;opacity:.85}
.pd-doc-note a{font-weight:700;direction:ltr;unicode-bidi:isolate}

/* v25 TDS on request */
.tds-card{display:flex;align-items:center;gap:22px;margin:28px 0 8px;padding:22px 26px;border-radius:18px;background:linear-gradient(200deg,#0B2A45 0%,#0B2A45 45%,#0068A8 100%);color:#fff}
.tds-ic{flex:none;width:58px;height:58px;border-radius:16px;background:#F3E8AE;display:flex;align-items:center;justify-content:center}
.tds-ic svg{fill:none;stroke:#0B2A45;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tds-tx{flex:1}.tds-tx h2{margin:0 0 6px;font-size:1.25rem;color:#fff}.tds-tx p{margin:0;color:#DCE7F1;line-height:1.7;font-size:.95rem}
.tds-card .rs-btn{flex:none;background:#F3E8AE;color:#0B2A45;font-weight:700;border:0}
.tds-card .rs-btn:hover{background:#fff;color:#0B2A45}
.tds-dlg{border:0;border-radius:20px;padding:0;width:min(640px,94vw);max-height:92vh;box-shadow:0 30px 80px rgba(11,42,69,.45)}
.tds-dlg::backdrop{background:rgba(11,42,69,.6)}
.tds-form{position:relative;padding:28px 28px 22px}
.tds-form h3{margin:0 0 4px;color:#0B2A45;font-size:1.3rem}.tds-sub{margin:0 0 16px;color:#0068A8;font-weight:700}
.tds-form label b{color:#C0392B}
.tds-x{position:absolute;top:12px;inset-inline-end:14px;border:0;background:none;font-size:30px;line-height:1;color:#56677A;cursor:pointer}
.tds-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tds-msg{margin:12px 0 0;font-weight:700;min-height:1.2em}.tds-msg.ok{color:#1E7B45}.tds-msg.err{color:#C0392B}
@media (max-width:640px){.tds-card{flex-direction:column;align-items:flex-start}.tds-card .rs-btn{width:100%}}
.tds-form .rs-form-grid + .rs-field{margin-top:14px}
.tds-card .tds-tx h2{color:#fff !important;margin:0 0 6px !important;font-size:1.25rem !important}
.tds-end{padding:8px 0 48px}.tds-end .tds-card{margin-top:0}