/* Coverage regions — the three racing nations.
 *
 * EVERY CLASS PREFIXED rg-. site.css already defines .wrap, .flag, .tag and
 * .band among others; an unprefixed section here would inherit all of them and
 * break in ways that take an hour to trace.
 *
 * @keyframes are NOT scoped — they are not selectors, and scoping the name
 * destroys the animation. They carry the rg- prefix instead.
 */

.rg{position:relative;overflow:hidden;background:#07281D;color:#fff;
  padding:78px 0 84px;margin:0}
.rg-w{position:relative;z-index:2;max-width:1300px;margin:0 auto;padding:0 28px}

/* drifting dot field, the same texture as the hero */
.rg::before{content:"";position:absolute;inset:-30% -10%;opacity:.045;
  background-image:radial-gradient(circle,#fff 1.2px,transparent 1.3px);
  background-size:28px 28px;animation:rg-drift 40s linear infinite}
@keyframes rg-drift{to{transform:translate(28px,28px)}}
@keyframes rg-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes rg-wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── heading ─────────────────────────────────────────────────────── */
.rg-hd{max-width:780px;margin:0 0 54px}
.rg-kick{font:600 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#54D19B;margin:0 0 14px;animation:rg-up .6s backwards}
.rg h2{margin:0 0 16px;font:800 46px/1.04 var(--body,inherit);letter-spacing:-.03em;color:#fff}
.rg h2 i{font-style:normal;display:block;animation:rg-up .75s backwards}
.rg h2 i:nth-of-type(1){animation-delay:.1s}
.rg h2 i:nth-of-type(2){animation-delay:.18s;color:#54D19B}
.rg-sub{margin:0;font-size:16.5px;line-height:1.62;color:#A9C4B8;
  animation:rg-up .75s .3s backwards}

/* ── the three bands ─────────────────────────────────────────────── */
.rg-band{position:relative;display:grid;grid-template-columns:230px 1fr 300px;
  align-items:stretch;border-top:1px solid rgba(255,255,255,.12);
  animation:rg-up .8s backwards}
.rg-band:nth-of-type(1){animation-delay:.42s}
.rg-band:nth-of-type(2){animation-delay:.54s}
.rg-band:nth-of-type(3){animation-delay:.66s}
.rg-band:last-of-type{border-bottom:1px solid rgba(255,255,255,.12)}

/* a mint rule wipes along the base of each band as it lands */
.rg-band::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,#54D19B,transparent);transform-origin:left;
  animation:rg-wipe 1.1s cubic-bezier(.2,1,.3,1) backwards}
.rg-band:nth-of-type(1)::after{animation-delay:.7s}
.rg-band:nth-of-type(2)::after{animation-delay:.82s}
.rg-band:nth-of-type(3)::after{animation-delay:.94s}

/* THE FLAG IS A FRAMED THUMBNAIL, NOT A BACKDROP.
 *
 * It was a full-bleed image with the country name laid over it at left:0 — no
 * padding, and no gradient dark enough to hold white text over a union jack.
 * "Great Britain" was unreadable.
 *
 * The flag is now a small crisp panel and the name sits beneath it on the dark
 * background, where it has full contrast and nothing competes with it. */
.rg-flag{display:flex;flex-direction:column;justify-content:center;
  gap:12px;padding:26px 28px 26px 0}
.rg-flag img{width:58px;height:39px;object-fit:cover;border-radius:10px;
  display:block;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.35)}
.rg-flag b{font:800 25px/1.05 var(--body,inherit);letter-spacing:-.02em;color:#fff}
.rg-flag em{font-style:normal;font:600 10.5px var(--mono);letter-spacing:.12em;
  color:#54D19B;display:block;margin-top:-6px}

.rg-mid{padding:26px 34px 26px 0;display:flex;flex-direction:column;justify-content:center}
.rg-mid p{margin:0;font-size:14.5px;line-height:1.66;color:#B5CEC3;max-width:62ch}
.rg-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.rg-tag{font:500 10.5px var(--mono);padding:4px 10px;border-radius:10px;
  background:rgba(84,209,155,.14);color:#54D19B}
.rg-tag.no{background:rgba(255,255,255,.06);color:#6E8A7D;text-decoration:line-through}

.rg-nums{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;align-content:center;
  padding:26px 0 26px 26px;border-left:1px solid rgba(255,255,255,.1)}
.rg-nums div b{display:block;font:800 26px/1 var(--mono);letter-spacing:-.02em;color:#fff}
.rg-nums div span{font:500 10px var(--mono);letter-spacing:.07em;color:#7FA394}

.rg-sum{margin-top:44px;display:flex;align-items:center;gap:44px;
  animation:rg-up .8s .8s backwards}
.rg-sum div b{display:block;font:800 40px/1 var(--mono);letter-spacing:-.03em;color:#54D19B}
.rg-sum div span{font:500 11px var(--mono);letter-spacing:.07em;color:#7FA394}
.rg-sum p{margin-left:auto;max-width:34ch;text-align:right;font-size:13.5px;
  line-height:1.55;color:#8FB3A4}

@media(max-width:1000px){
  .rg{padding:52px 0 56px}
  .rg-band{grid-template-columns:1fr}
  .rg-flag{min-height:118px}
  .rg-mid{padding:20px 0}
  .rg-nums{padding:0 0 22px;border-left:0}
  .rg h2{font-size:32px}
  .rg-sum{flex-wrap:wrap;gap:24px}
  .rg-sum p{margin-left:0;text-align:left}
}

/* Motion is decoration here: anyone who asked for less gets the finished state. */
@media(prefers-reduced-motion:reduce){
  .rg-kick,.rg h2 i,.rg-sub,.rg-band,.rg-sum{animation:none;opacity:1;transform:none}
  .rg-band::after,.rg::before{animation:none}
  .rg-band::after{transform:scaleX(1)}
}