/* RAQMANA — homepage layouts. Components come from raqmana.css. */

/* The header floats over the dark hero, so the hero starts under it */
.page-home .site-header { margin-bottom: calc(-1 * var(--header-h)); }

/* ---------------------------------------------------------------- Hero */
.hero {
  --grid-x: 78%;
  --grid-y: 38%;
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(56px, 7vw, 112px));
  background-color: var(--rq-night);
}
/* Structural lines — the container edges drawn as hairlines */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - min(50%, (var(--max) / 2))), rgba(var(--rq-mist-rgb), .07) 0 calc(50% - min(50%, (var(--max) / 2)) + 1px), transparent 0),
    linear-gradient(270deg, transparent calc(50% - min(50%, (var(--max) / 2))), rgba(var(--rq-mist-rgb), .07) 0 calc(50% - min(50%, (var(--max) / 2)) + 1px), transparent 0);
}
/* Slanted-bar field from the logo geometry: of everything out there, a few pass */
.hero-field {
  position: absolute;
  z-index: -1;
  top: 0;
  right: -4%;
  width: 58%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(70deg, transparent 0 34px, rgba(var(--rq-purple-rgb), .22) 34px 40px);
  -webkit-mask-image: radial-gradient(60% 55% at 62% 40%, #000, transparent 75%);
  mask-image: radial-gradient(60% 55% at 62% 40%, #000, transparent 75%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
}
.hero-copy .eyebrow { color: var(--rq-mist); letter-spacing: .16em; }
.hero-copy .eyebrow .x { color: var(--rq-cyan); padding-inline: .25em; }
.hero-title { margin-top: var(--s-6); display: grid; gap: var(--s-5); font-weight: 300; }
.hero-title .display { color: var(--rq-white); }
.hero-claim {
  display: block;
  max-width: 18em;
  padding-top: var(--s-5);
  border-top: 1px solid rgba(var(--rq-mist-rgb), .2);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--rq-frost);
  text-wrap: balance;
}
.hero .lede { margin-top: var(--s-5); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* Load choreography — one pass, 80ms steps */
@media (prefers-reduced-motion: no-preference) {
  .hero-in { animation: rq-rise 900ms var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 90ms); }
  .ledger-list li { animation: rq-rise 700ms var(--ease) both; animation-delay: calc(520ms + var(--row, 0) * 55ms); }
}
@keyframes rq-rise { from { opacity: 0; transform: translateY(14px); } }

/* Ledger — the Next-Gen Strategy pillars as an index into strategy.html */
.ledger {
  --cut: var(--cut-l);
  --frame: rgba(var(--rq-mist-rgb), .2);
  background: linear-gradient(180deg, rgba(var(--rq-steel-rgb), .92), rgba(var(--rq-night2-rgb), .92));
}
.ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
}
.ledger-title { font-size: .9375rem; font-weight: 500; color: var(--rq-frost); }
.ledger-list li:nth-child(1) { --row: 0; } .ledger-list li:nth-child(2) { --row: 1; }
.ledger-list li:nth-child(3) { --row: 2; } .ledger-list li:nth-child(4) { --row: 3; }
.ledger-list li:nth-child(5) { --row: 4; } .ledger-list li:nth-child(6) { --row: 5; }
.ledger-list li:nth-child(7) { --row: 6; }
.ledger-list a {
  display: grid;
  grid-template-columns: 58px 1fr 16px;
  align-items: center;
  gap: var(--s-4);
  min-height: 48px;
  padding: 11px 28px;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--rq-mist);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ledger-list .num { font-size: .75rem; letter-spacing: .04em; color: var(--rq-cyan); transition: color var(--t-fast) var(--ease); }
.ledger-list .icon-arrow { opacity: 0; transform: translateX(-4px); color: var(--rq-cyan); transition: opacity var(--t-fast) var(--ease), transform var(--t-med) var(--ease); }
.ledger-list a:hover, .ledger-list a:focus-visible { background: rgba(var(--rq-cyan-rgb), .06); color: var(--rq-frost); }
.ledger-list a:hover .num, .ledger-list a:focus-visible .num { color: var(--rq-cyan); }
.ledger-list a:hover .icon-arrow, .ledger-list a:focus-visible .icon-arrow { opacity: 1; transform: none; }
.ledger-list a:focus-visible { outline-offset: -2px; }
.ledger-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px 22px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--rq-cyan);
}

/* Domains — the three practice areas */
.domains {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(72px, 9vw, 128px);
  border-top: 1px solid var(--line);
}
.domain { padding: var(--s-6) var(--s-6) var(--s-6) 0; }
.domain + .domain { padding-inline-start: var(--s-6); border-inline-start: 1px solid var(--line); }
.domain-title { margin-top: var(--s-3); font-size: 1.25rem; font-weight: 400; letter-spacing: -.01em; color: var(--rq-frost); }
.domain p:last-child { margin-top: var(--s-2); max-width: 34ch; font-size: .9375rem; color: var(--rq-mist); }

.sectors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-7);
  padding-block: 22px 28px;
  border-top: 1px solid var(--line);
}
.sectors ul { display: flex; flex-wrap: wrap; gap: 10px 40px; font-size: .9375rem; color: var(--rq-frost); }
.sectors li { display: flex; align-items: center; gap: 10px; }

/* ---------------------------------------------------------------- What we bring */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  margin-top: var(--s-8);
}
.tile {
  position: relative;
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--plate);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
  transition: box-shadow var(--t-med) var(--ease);
}
/* Border illumination: the top edge lights on hover */
.tile::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rq-cyan-text);   /* text-safe cyan: pure cyan is 2:1 on white */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow) var(--ease);
}
.tile:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.tile:hover::after { transform: scaleX(1); }
.tile .link { margin-top: auto; padding-top: var(--s-2); align-self: flex-start; }

.tile--feature {
  grid-column: span 7;
  grid-row: span 2;
  --cut: var(--cut-xl);
  --frame: rgba(var(--rq-mist-rgb), .16);
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: space-between;
  gap: var(--s-6);
  box-shadow: none;
  border-radius: 0;
  background-color: var(--rq-night);
  overflow: hidden;
}
.tile--feature::after { display: none; }
.tile-feature-copy { display: grid; gap: var(--s-4); max-width: 30em; }
.tile-feature-title { font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.25rem); font-weight: 300; line-height: 1.12; letter-spacing: -.02em; }
.tile-feature-copy .link { margin-top: var(--s-2); }
.tile-feature-note { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }

/* Mini framework: the same hexagon as strategy.html, and the tile's anchor */
.tile-hex { justify-self: center; width: min(100%, 480px); margin: 0 0 -12px; overflow: visible; }
.th-scope { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1; stroke-dasharray: 3 5; }
.th-ring { fill: rgba(var(--rq-purple-rgb), .22); stroke: var(--rq-cyan); stroke-width: 1.25; }
.th-spokes line { stroke: rgba(var(--rq-cyan-rgb), .35); stroke-width: 1; stroke-dasharray: 2 4; }
.th-shield { fill: var(--rq-night); stroke: var(--rq-cyan); stroke-width: 1.25; }
.th-node { fill: var(--rq-purple); stroke: var(--rq-cyan); stroke-width: 1.25; transition: fill var(--t-slow) var(--ease); }
.th-code { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; fill: var(--rq-white); }
.th-core { font-family: var(--font-mono); font-size: 6px; letter-spacing: .05em; text-transform: uppercase; fill: var(--rq-silver); }
.tile--feature:hover .th-node { fill: var(--rq-cyan); }
.tile--feature:hover .th-nodes :nth-child(2) { transition-delay: 50ms; }
.tile--feature:hover .th-nodes :nth-child(3) { transition-delay: 100ms; }
.tile--feature:hover .th-nodes :nth-child(4) { transition-delay: 150ms; }
.tile--feature:hover .th-nodes :nth-child(5) { transition-delay: 200ms; }
.tile--feature:hover .th-nodes :nth-child(6) { transition-delay: 250ms; }

.track-list { display: grid; gap: var(--s-3); color: var(--fg-2); }
.track-list li { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-2); line-height: 1.45; }
.track-list .num { font-size: .75rem; color: var(--accent-text); padding-top: 3px; }

.tile--wide {
  grid-column: span 12;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-6) var(--s-8);
  align-items: start;
}
.tile--wide .h3 { margin-top: var(--s-4); }
.tile-wide-body { display: grid; gap: var(--s-4); }
.thread-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.thread-list a {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 16px 18px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--fg);
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.thread-list .meta { color: var(--accent-text); }
.thread-list a:hover { box-shadow: inset 0 0 0 1px var(--rq-cyan-text); background: var(--rq-cyan-wash); }

/* ---------------------------------------------------------------- Grid spotlights per band (see .bg-grid) */
.tile--feature { --grid-x: 62%; --grid-y: 72%; }
.partners { --grid-x: 20%; --grid-y: 30%; }
.standard { --grid-x: 50%; --grid-y: 55%; }
.cta-panel { --grid-x: 85%; --grid-y: 50%; --atmos-x: 90%; --atmos-y: 10%; }

/* ---------------------------------------------------------------- Strategic partners
   A dark band (theme-dark + bg-grid, like every dark surface). Cards use the dark
   plate tokens; each logo sits on the same white plate. */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: var(--s-5);
}
.partner-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  padding: 18px 20px 20px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
  transition: box-shadow var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.partner-card:hover { background: var(--plate); box-shadow: inset 0 0 0 1px var(--line-strong); }
.partner-card:focus-within { background: var(--plate); box-shadow: inset 0 0 0 1px var(--rq-cyan-line); }
.partner-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; min-height: 56px; }
.partner-name { font-size: .9375rem; font-weight: 500; color: var(--fg); }
.partner-does { margin-top: 2px; font-size: .875rem; line-height: 1.45; color: var(--fg-2); }
.domain-tags { display: flex; flex-wrap: wrap; align-content: flex-end; gap: 6px; }
.domain-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(var(--rq-cyan-rgb), .55);
  border-radius: var(--radius);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.domain-tag:hover, .domain-tag:focus-visible { background: var(--rq-cyan); color: var(--rq-night); }
.partners-foot { margin-top: var(--s-6); }
/* Two dark bands in a row: a full-width cyan hairline keeps them two sections */
.partners + .standard { border-top: 1px solid var(--rq-cyan-edge); }

/* ---------------------------------------------------------------- The standard */
.standard-rule { margin-top: var(--s-8); }
.tests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); margin-top: var(--s-5); }
/* Subgrid keeps label, title, text and example aligned across the three columns */
.test { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: var(--s-3); align-content: start; padding: var(--s-6) var(--s-6) var(--s-4) 0; }
.test + .test { padding-inline-start: var(--s-6); border-inline-start: 1px solid var(--line); }
.test-title { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; color: var(--rq-white); }
.test-example {
  align-self: start;
  padding: var(--s-4);
  background: rgba(var(--rq-steel-rgb), .55);
  box-shadow: inset 2px 0 0 var(--rq-cyan-line);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--rq-frost);
}
.test-example .meta { margin-bottom: 6px; }
.test > .muted { padding-bottom: var(--s-3); }
.standard-foot { margin-top: var(--s-7); }

/* ---------------------------------------------------------------- Engagement */
.engagement-process { margin-top: var(--s-8); }
.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-7);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.trust-badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-5) var(--s-7); }
.trust-badges > li { display: grid; justify-items: center; gap: 6px; }
.badge { height: 56px; width: auto; }

/* ---------------------------------------------------------------- Success Partners
   Default (no JS, reduced motion, or "View all"): a static grouped grid.
   .is-marquee (added by success.js): one slow row per group, alternating direction.
   Only transform is animated; the track runs only while .is-running. */
.success-partners { overflow: clip; padding-top: calc(var(--section-y) * .6); box-shadow: inset 0 1px 0 var(--line); }
.success-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-5) var(--s-7); }
.success-count { color: var(--fg-3); }
.marquee-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--rq-ink);
  background: var(--rq-white);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.ctl:hover { box-shadow: inset 0 0 0 1px var(--rq-ink); }
.ctl[aria-pressed="true"] { background: var(--rq-cyan-wash); box-shadow: inset 0 0 0 1px var(--rq-cyan-text); }
.ctl svg { width: 14px; height: 14px; flex: none; }
.ctl .i-play { display: none; }
.ctl[aria-pressed="true"] .i-pause { display: none; }
.ctl[aria-pressed="true"] .i-play { display: block; }

.logo-rows { margin-top: var(--s-7); border-top: 1px solid var(--line); }
.logo-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4) var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.logo-row-label { color: var(--accent-text); }
/* Size comes from the img width/height attributes (optical weight, set by the generator) */
.logo-item img { display: block; height: auto; max-width: 100%; zoom: var(--logo-k, 1); mix-blend-mode: multiply; }

/* Static grouped grid */
.logo-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.logo-item {
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: 12px 14px;
  background: var(--rq-white);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
}
.logo-set[aria-hidden="true"] { display: none; }

/* Marquee */
.is-marquee .logo-viewport {
  overflow: hidden;
  contain: paint;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.is-marquee .logo-track {
  display: flex;
  width: max-content;
  animation: rq-marquee var(--marquee-duration, 60s) linear infinite;
  animation-play-state: paused;
}
.is-marquee .logo-set { display: flex; flex-wrap: nowrap; gap: 0; }   /* no gap: spacing lives in each item, so the seam is exact */
.is-marquee .logo-set[aria-hidden="true"] { display: flex; }
.is-marquee .logo-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 36px;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
/* Separator: the 4px diamond node from the site's maps, on each item's trailing edge */
.is-marquee .logo-item::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: -2px;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  background: var(--rq-cyan-text);
  transform: rotate(45deg);
}
.is-marquee .logo-row[data-dir="reverse"] .logo-track { animation-direction: reverse; }
[dir="rtl"] .is-marquee .logo-row[data-dir="normal"] .logo-track { animation-direction: reverse; }
[dir="rtl"] .is-marquee .logo-row[data-dir="reverse"] .logo-track { animation-direction: normal; }
.is-marquee.is-running .logo-track { animation-play-state: running; will-change: transform; }
/* Hover a row, or move focus into the section: that row / every row holds still */
.is-marquee.is-running .logo-row:hover .logo-track,
.is-marquee.is-running:focus-within .logo-track { animation-play-state: paused; }
@keyframes rq-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Review switch (#logos-before): every logo at one height, to compare with optical sizing */
.logos-equal .logo-item img { width: auto; height: 28px; }

/* ---------------------------------------------------------------- CTA */
.cta-section { padding-top: 0; }
.cta-panel {
  --cut: var(--cut-xl);
  --frame: rgba(var(--rq-mist-rgb), .16);
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--s-7) var(--s-8);
  align-items: end;
  padding: clamp(32px, 5vw, 72px);
  background-color: var(--rq-night);
}
.cta-copy { display: grid; gap: var(--s-5); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.cta-direct { font-style: normal; display: grid; gap: var(--s-3); padding-inline-start: var(--s-6); border-inline-start: 1px solid var(--line); color: var(--rq-mist); }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .ledger { max-width: 640px; }
  .hero-field { width: 100%; right: -20%; }
  .tile { grid-column: span 6; }
  .tile--feature { grid-column: span 12; grid-row: auto; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 390px); align-items: center; }
  .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--wide { grid-column: span 12; }
}
@media (max-width: 900px) {
  .domains { grid-template-columns: 1fr; }
  .domain, .domain + .domain { padding: var(--s-5) 0; border-inline-start: 0; }
  .domain + .domain { border-top: 1px solid var(--line); }
  .tests { grid-template-columns: 1fr; grid-template-rows: none; }
  .test { grid-row: auto; grid-template-rows: none; }
  .test, .test + .test { padding: var(--s-6) 0; border-inline-start: 0; }
  .test + .test { border-top: 1px solid var(--line); }
  .tile--wide { grid-template-columns: 1fr; }
  .thread-list { grid-template-columns: 1fr; }
  .cta-panel { grid-template-columns: 1fr; }
  .cta-direct { padding: var(--s-5) 0 0; border-inline-start: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .tile, .tile--feature { grid-column: span 12; }
  .tile--feature { grid-template-columns: 1fr; }
  .tile-hex { width: 100%; margin: 0; }
  .th-code { font-size: 15px; }   /* keeps pillar labels at 12px+ once the hexagon scales down */
  .partner-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero { padding-top: calc(var(--header-h) + 44px); }
  .hero-title { margin-top: var(--s-5); }
  .hero-ctas .btn { flex: 1 1 100%; }
  .ledger-head, .ledger-list a, .ledger-foot { padding-inline: 18px; }
  .ledger-list a { gap: var(--s-3); }
  .sectors ul { gap: 8px 24px; }
  .trust-badges { gap: var(--s-5); }
  .badge { height: 48px; }
  .logo-row { grid-template-columns: minmax(0, 1fr); padding-block: var(--s-4); }
  .logo-set { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .logo-item { min-height: 72px; padding: 10px; --logo-k: .82; }
  .is-marquee .logo-item { padding: 0 24px; }
  .cta-actions .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- Arabic / right-to-left */
[dir="rtl"] .hero-field { right: auto; left: -4%; }
[dir="rtl"] .tile::after { transform-origin: right center; }
/* The hexagon shield keeps its geometry: labels anchor exactly as in English */
[dir="rtl"] .tile-hex { direction: ltr; }
/* Marquee: the track is laid out left-to-right so the -50% loop stays seamless;
   the rows still read right-to-left from their labels */
[dir="rtl"] .is-marquee .logo-viewport { direction: ltr; }
@media (max-width: 1100px) {
  [dir="rtl"] .hero-field { left: -20%; }
}

/* ---------------------------------------------------------------- Round 2 (Oct 2026): the original homepage */
.hero-services { max-width: 44em; }

/* About: lead on one side, the two cards on the other */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7) var(--s-8); align-items: start; }
.about-lead { display: grid; gap: var(--s-4); }
.about-cards { display: grid; gap: 20px; }
.about-card { --cut: var(--cut-l); display: grid; gap: var(--s-4); padding: clamp(24px, 3vw, 40px); background: var(--surface); }
.about-card p { line-height: 1.65; color: var(--fg-2); }
.about-foot { margin-top: var(--s-7); }

/* Partners & clients: one marquee row, then the link to the Partners page */
.logo-rows--strip { margin-top: var(--s-6); }
.logo-row--solo { grid-template-columns: minmax(0, 1fr); }
.strip-foot { margin-top: var(--s-5); }

/* What we do: text beside the title, then four service cards */
.wwd-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6) var(--s-8); align-items: start; }
.wwd-text { display: grid; gap: var(--s-4); justify-items: start; }
.wwd-text .btn { margin-top: var(--s-2); }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: var(--s-8); }
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 230px;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.service-card::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--rq-cyan-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-slow) var(--ease);
}
[dir="rtl"] .service-card::after { transform-origin: right center; }
.service-card:hover { box-shadow: inset 0 0 0 1px var(--line-strong); transform: translateY(-2px); }
.service-card:hover::after { transform: scaleX(1); }
.service-num { font-family: var(--font-mono); font-size: .8125rem; color: var(--accent-text); }
.service-title { font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: var(--fg); text-wrap: balance; }
.service-card .link { margin-top: auto; align-self: flex-start; }

/* The hexagon shield as its own section: copy beside the graphic */
.tile--feature-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; min-height: 0; }

/* Training */
.training-text { display: grid; gap: var(--s-4); }
.locations { display: flex; align-items: flex-start; gap: 10px; font-size: .9375rem; line-height: 1.6; color: var(--fg-2); white-space: pre-line; }
.locations svg { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--accent-text); }
.train-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: var(--s-7); }
.train-card { --cut: var(--cut-l); display: flex; flex-direction: column; gap: var(--s-5); padding: clamp(24px, 3vw, 40px); background: var(--plate); }
.train-card .btn { margin-top: auto; align-self: flex-start; }

/* Project management (dark band) */
.pm-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-6) var(--s-8); align-items: end; }
.pm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pm-list li {
  position: relative;
  padding: 18px 20px;
  padding-inline-start: 44px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg);
  background: rgba(var(--rq-night2-rgb), .7);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
}
.pm-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 20px;
  top: calc(18px + .55em);
  width: 7px;
  height: 7px;
  background: var(--rq-cyan);
  transform: translateY(-50%) rotate(45deg);
}
.pm-plan { display: grid; gap: var(--s-3); max-width: 48em; margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.pm-steps { margin-top: var(--s-7); }
.process-name { margin-top: var(--s-3); font-size: 1.0625rem; font-weight: 500; line-height: 1.4; color: var(--fg); }

/* Kept bento, now without the feature tile */
.tile--half { grid-column: span 6; }

/* Events gallery */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: var(--s-7); }
.gallery-link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--surface);
  border-radius: var(--radius);
}
.gallery-link img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease), filter var(--t-med) var(--ease); }
.gallery-link::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--rq-mist-rgb), .16);
  background: linear-gradient(180deg, transparent 55%, rgba(var(--rq-night-rgb), .45));
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.gallery-link:hover img, .gallery-link:focus-visible img { transform: scale(1.045); }
.gallery-link:hover::after, .gallery-link:focus-visible::after { opacity: 1; }
.gallery-link:focus-visible { outline-offset: 2px; }
.gallery-foot { display: flex; justify-content: center; margin-top: var(--s-6); }

/* Videos: three LTF Elites 2026 embeds in a grid (stacked below 1024px); the card clips the 16:9 player */
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: var(--s-7); }
.video-card { display: grid; align-content: start; min-width: 0; overflow: hidden; background: var(--plate); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--radius); }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--rq-night); }
.video-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.video-title { font-size: 1rem; font-weight: 500; line-height: 1.45; color: var(--fg); }
.video-card .video-title { padding: 16px 20px 20px; }
.video-more { margin-top: var(--s-6); }
@media (max-width: 1023px) {
  .video-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Podcasts: two episodes side by side (stacked on small screens); the YouTube player fills a 16:9 box and the card clips it */
.podcast-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: var(--s-7); }
.podcast-card { overflow: hidden; background: var(--plate); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--radius); }
.podcast-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--rq-night); }
.podcast-player iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.podcast-body { display: grid; gap: 6px; padding: 18px 20px 22px; }
.podcast-ep { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }

/* Partners page: the hero band (the Cyber Crucible box sits in it) */
.partners-hero { padding-bottom: clamp(80px, 9vw, 136px); overflow-x: clip; }   /* the glow must not widen small screens */
@keyframes rq-glow { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.05); } }

/* Partners page: framed exclusivity certificates */
.cert-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: var(--s-7); }
.cert-frame { display: grid; gap: var(--s-4); justify-items: center; }
.cert-frame-link {
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(14px, 1.6vw, 22px);
  background: linear-gradient(160deg, var(--rq-white), #ECEEF6);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 26px 52px -32px rgba(var(--rq-night-rgb), .55);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.cert-frame-mat { display: block; padding: 10px; background: var(--rq-white); box-shadow: inset 0 0 0 1px rgba(var(--rq-night-rgb), .08); }
.cert-frame-mat img { display: block; width: 100%; height: auto; }
.cert-frame-link:hover, .cert-frame-link:focus-visible {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--rq-cyan-text), 0 34px 60px -30px rgba(var(--rq-night-rgb), .6);
}
.cert-frame-zoom {
  position: absolute;
  top: 22px;
  inset-inline-end: 22px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--rq-cyan);
  background: var(--rq-night);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.cert-frame-zoom svg { width: 20px; height: 20px; }
.cert-frame-link:hover .cert-frame-zoom, .cert-frame-link:focus-visible .cert-frame-zoom { opacity: 1; }
.cert-frame-name { font-weight: 500; color: var(--fg); }

/* Round 2 responsive */
@media (max-width: 1100px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wwd-head, .about-grid, .pm-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .train-cards, .cert-frames, .podcast-grid { grid-template-columns: minmax(0, 1fr); }
  .cert-frames { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 700px) {
  .tile--feature-wide { grid-template-columns: minmax(0, 1fr); }
  .tile--half { grid-column: span 12; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pm-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .service-card:hover, .cert-frame-link:hover { transform: none; }
}
/* Photos in About and on the training cards (event photos, see tools/media/media.json) */
.about-photo { --cut: var(--cut-l); position: relative; margin-top: var(--s-5); aspect-ratio: 4 / 3; overflow: hidden; }
.about-photo img, .train-photo img { width: 100%; height: 100%; object-fit: cover; }
.train-photo { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); }
/* All three certificates share one frame size, whatever the scan's proportions */
.cert-frame-mat img { aspect-ratio: 1236 / 1600; object-fit: contain; background: var(--rq-white); }

/* ---------------------------------------------------------------- Round 3 (Oct 2026) */
/* Hero tagline: directly under the headline, regular text */
.hero-tagline {
  margin-top: var(--s-5);
  max-width: 44em;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--rq-cyan-line);
  font-size: clamp(.9375rem, .88rem + .25vw, 1.0625rem);
  line-height: 1.75;
  color: var(--rq-frost);
  text-wrap: pretty;
}
.hero-tagline + .lede { margin-top: var(--s-4); }

/* Strategic partners: the Cyber Crucible card's FortressAI line */
.partner-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--fg-2);
  background: rgba(var(--rq-cyan-rgb), .05);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
  transition: box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.partner-product-logo { flex: none; display: grid; place-items: center; padding: 4px 6px; background: var(--rq-white); border-radius: 2px; }
.partner-product-logo img { display: block; width: 82px; height: auto; }
.partner-product-text { flex: 1; }
.partner-product .icon-arrow { color: var(--rq-cyan); }
.partner-product:hover, .partner-product:focus-visible { color: var(--fg); box-shadow: inset 0 0 0 1px var(--rq-cyan-line); }

/* About: gallery category tabs, then the full grid (every photo, lazy-loaded; tiles of one shape so it closes up) */
.gallery-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-7); }
.gallery-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--rq-mist);
  background: rgba(var(--rq-night2-rgb), .6);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.gallery-tab:hover { color: var(--rq-frost); box-shadow: inset 0 0 0 1px var(--rq-cyan-line); }
.gallery-tab[aria-pressed="true"] {
  color: var(--rq-night);
  background: var(--rq-cyan);
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
}
.gallery-tab:focus-visible { outline: 2px solid var(--rq-cyan); outline-offset: 2px; }
.gallery-tab-count { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; opacity: .75; }
.gallery-tabs:not([hidden]) + .gallery { margin-top: var(--s-5); }
.gallery-item { will-change: auto; }
.gallery-item .gallery-link { aspect-ratio: 4 / 3; }

@media (max-width: 560px) {
  .btn--lg { --btn-h: 54px; padding: 0 24px; }
}

/* ---------------------------------------------------------------- Round 4 (Oct 2026): the Cyber Crucible feature box (Partners)
   Compact: headline, then two rows (a small logo beside each product's text), then the two buttons. */
.cc-hero { padding-bottom: clamp(64px, 7vw, 104px); }
.cc-box {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  max-width: 1040px;
  margin: var(--s-6) auto 0;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 52px);
  /* a hairline that runs from cyan to brand purple, over a deep glass panel */
  border: 1px solid transparent;
  border-radius: 4px;
  background:
    linear-gradient(165deg, rgba(var(--rq-night2-rgb), .94), rgba(var(--rq-night-rgb), .97)) padding-box,
    linear-gradient(135deg, rgba(var(--rq-cyan-rgb), .7), rgba(var(--rq-purple-rgb), .65) 42%, rgba(var(--rq-cyan-rgb), .12) 75%, rgba(var(--rq-cyan-rgb), .45)) border-box;
  box-shadow: 0 50px 110px -70px rgba(var(--rq-cyan-rgb), .55), 0 30px 70px -50px rgba(0, 0, 0, .65);
}
.cc-box-glow {
  position: absolute;
  z-index: -1;
  inset: -1px -1px auto;
  height: 320px;
  background: radial-gradient(55% 70% at 50% 0%, rgba(var(--rq-cyan-rgb), .14), rgba(var(--rq-purple-rgb), .12) 45%, transparent 75%);
  pointer-events: none;
  animation: rq-glow 7s ease-in-out infinite alternate;
}
.cc-head { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.cc-title { max-width: 22em; font-size: clamp(1.625rem, 1.1rem + 1.8vw, 2.5rem); text-wrap: balance; }

/* The two rows: logo column, then the product's text. The logo column comes first, so in Arabic it is on the right. */
.cc-rows { display: grid; }
.cc-row {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 18px clamp(24px, 3vw, 40px);
  align-items: start;
  padding-block: clamp(20px, 2.6vw, 28px);
}
.cc-row + .cc-row { border-top: 1px solid var(--line); }
.cc-row:first-child { padding-top: 0; }
.cc-row:last-child { padding-bottom: 0; }
/* Small logos on white plates of one size, so the two marks carry the same weight */
.cc-logo {
  display: grid;
  place-items: center;
  width: 176px;
  height: 68px;
  padding: 12px 16px;
  background: var(--rq-white);
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
  box-shadow: 0 0 0 1px rgba(var(--rq-cyan-rgb), .2);
}
.cc-logo img { display: block; width: auto; max-width: 100%; }
.cc-logo-cc { height: 40px; }
.cc-logo-fa { height: 44px; }   /* the FortressAI mark carries a small tagline: a little taller to match */
.cc-body { display: grid; gap: 10px; justify-items: start; }
.cc-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .8125rem; color: var(--rq-mist); }
.cc-kicker .code {
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: var(--rq-night);
  background: var(--rq-cyan);
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));
}
.cc-row-title { font-size: clamp(1.375rem, 1.15rem + .7vw, 1.75rem); font-weight: 300; line-height: 1.2; color: var(--rq-white); }
.cc-lede { font-size: 1rem; line-height: 1.55; color: var(--rq-frost); max-width: 46em; text-wrap: pretty; }
.cc-text { font-size: .9375rem; line-height: 1.65; color: var(--rq-mist); max-width: 52em; text-wrap: pretty; }
/* Cyber Crucible's capabilities: short chips */
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cc-chips li {
  padding: 6px 12px;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--rq-frost);
  background: rgba(var(--rq-cyan-rgb), .07);
  box-shadow: inset 0 0 0 1px var(--rq-cyan-line);
  border-radius: 2px;
}
/* FortressAI's capabilities: a tight two-column list */
.cc-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; width: 100%; margin-top: 4px; }
.cc-cap { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .875rem; line-height: 1.5; color: var(--rq-mist); }
.cc-cap-icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--rq-cyan); background: rgba(var(--rq-cyan-rgb), .1); box-shadow: inset 0 0 0 1px var(--rq-cyan-line); border-radius: 2px; }
.cc-cap-icon svg { width: 16px; height: 16px; }
.cc-cap-title { font-weight: 500; color: var(--rq-white); }
/* Arriving on #fortressai: the row is outlined for a moment */
.cc-row:target { animation: rq-cc-target 2.4s var(--ease) 1; }
@keyframes rq-cc-target { 0%, 60% { box-shadow: inset 0 0 0 1px var(--rq-cyan-line); background: rgba(var(--rq-cyan-rgb), .04); } 100% { box-shadow: none; background: none; } }

/* The pair: Become a Partner (primary, filled) then Request a Demo (secondary, outlined) */
.cc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: clamp(4px, 1vw, 8px); }
.cc-demo { color: var(--rq-frost); box-shadow: inset 0 0 0 1px rgba(var(--rq-mist-rgb), .45); }
.cc-demo:hover { color: var(--rq-white); box-shadow: inset 0 0 0 1px var(--rq-cyan); background: rgba(var(--rq-cyan-rgb), .06); }

@media (max-width: 760px) {
  .cc-row { grid-template-columns: minmax(0, 1fr); }
  .cc-logo { width: 148px; height: 56px; padding: 10px 14px; }
  .cc-logo-cc { height: 32px; }
  .cc-logo-fa { height: 36px; }
  .cc-caps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cc-actions { flex-direction: column; align-items: stretch; }
  .cc-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-box-glow, .cc-row:target { animation: none; }
}

/* Round 4: the gallery loads in batches — the count, then "Load More" */
.gallery-foot { flex-direction: column; align-items: center; gap: 14px; }
.gallery-count { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .06em; color: var(--rq-mist); font-variant-numeric: tabular-nums; }
.gallery--rest { margin-top: 10px; }   /* without JavaScript: the photos after the first batch */
html[lang="ar"] .gallery-count { font-family: var(--font-sans); font-size: .875rem; }   /* Arabic words are not set in the mono face */

/* ---------------------------------------------------------------- Motion update (Oct 2026)
   Homepage hero: the background loop (Higgsfield). The poster is always there; assets/js/motion.js attaches the
   video on larger screens without reduced motion or data saver, and it fades in once playing. */
.hero-media { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-media-poster, .hero-media-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.hero-media-video { opacity: 0; transition: opacity 1.4s var(--ease); }
.hero-media.is-playing .hero-media-video { opacity: .62; }
/* The dark overlay where the text sits: strongest behind the headline, lighter behind the strategy panel */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--rq-night-rgb), .9) 0%, rgba(var(--rq-night-rgb), .72) 45%, rgba(var(--rq-night-rgb), .4) 100%),
    linear-gradient(180deg, rgba(var(--rq-night-rgb), .55) 0%, transparent 30%, transparent 70%, rgba(var(--rq-night-rgb), .9) 100%);
}
[dir="rtl"] .hero-media::after {
  background:
    linear-gradient(270deg, rgba(var(--rq-night-rgb), .9) 0%, rgba(var(--rq-night-rgb), .72) 45%, rgba(var(--rq-night-rgb), .4) 100%),
    linear-gradient(180deg, rgba(var(--rq-night-rgb), .55) 0%, transparent 30%, transparent 70%, rgba(var(--rq-night-rgb), .9) 100%);
}
@media (max-width: 900px) {
  .hero-media::after { background: rgba(var(--rq-night-rgb), .78); }   /* text spans the full width */
}

/* Partners: the Cyber Crucible box gets the approved texture (Higgsfield) and a slow light sweep along it */
.cc-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: url("../img/motion/partners-texture.webp") center / cover no-repeat;
  opacity: .85;
  pointer-events: none;
}
.cc-box { overflow: hidden; }
.cc-box::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(var(--rq-cyan-rgb), .07) 48%, rgba(var(--rq-cyan-rgb), .13) 50%, rgba(var(--rq-cyan-rgb), .07) 52%, transparent 62%);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
.motion-ok .cc-box::after { animation: rq-sheen 11s var(--ease) 2.5s infinite; }
@keyframes rq-sheen {
  0% { transform: translateX(-100%); opacity: 0; }
  8% { opacity: 1; }
  32% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}
[dir="rtl"] .cc-box::after { scale: -1 1; }   /* the light travels in the reading direction */
@media (prefers-reduced-motion: reduce) { .cc-box::after { animation: none; } }