/* Exam Routes — motion + section styling */

:root{
  --er-cream:#F7F5EF;
  --er-blue-soft:#E7EFFD;
  --er-mint:#DFF3EA;
  --er-amber-soft:#FDF0D6;
  --er-asphalt:#0A1626;
  --er-blue:#1063E2;
  --er-amber:#FFB300;
}

/* ---------- scroll reveal ---------- */
.er-reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.er-reveal.er-in{ opacity:1; transform:none; }

/* stagger direct children of a revealed group */
.er-stagger > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.er-stagger.er-in > *{ opacity:1; transform:none; }
.er-stagger.er-in > *:nth-child(1){ transition-delay:.05s }
.er-stagger.er-in > *:nth-child(2){ transition-delay:.14s }
.er-stagger.er-in > *:nth-child(3){ transition-delay:.23s }
.er-stagger.er-in > *:nth-child(4){ transition-delay:.32s }
.er-stagger.er-in > *:nth-child(5){ transition-delay:.41s }
.er-stagger.er-in > *:nth-child(6){ transition-delay:.50s }

/* phone artwork drifts up and settles, then breathes */
.er-phone img{
  transform:translateY(46px) scale(.965);
  opacity:0;
  transition:opacity .9s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.er-phone.er-in img{ opacity:1; transform:none; animation:er-bob 7s ease-in-out 1.2s infinite; }
@keyframes er-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* subtle parallax drift driven by scroll position */
.er-drift{ transition:transform .1s linear; }

/* ---------- section furniture ---------- */
.er-section{ border-radius:0; }
.er-round{ border-radius:32px; overflow:hidden; }

.er-eyebrow{
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem;
}

/* big Klarna-ish display heading */
.er-display h1, .er-display h2{
  letter-spacing:-.04em;
  line-height:1.02;
}

/* soft card */
.er-card{
  border-radius:26px;
  background:#fff;
  box-shadow:0 1px 2px rgba(10,22,38,.05), 0 12px 32px -12px rgba(10,22,38,.12);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
  height:100%;
}
.er-card:hover{ transform:translateY(-6px); box-shadow:0 1px 2px rgba(10,22,38,.06), 0 22px 48px -16px rgba(10,22,38,.22); }

/* pill buttons a touch larger on the hero */
.er-hero .wp-block-button__link{ font-size:1.05rem; }

/* keep long headlines from colliding with artwork */
@media (min-width:782px){
  .er-hero h1{ max-width:14ch; }
}

@media (prefers-reduced-motion:reduce){
  .er-reveal, .er-stagger > *, .er-phone img{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }
  .er-drift{ transform:none !important; }
}

/* ============ v2 home page ============ */

.er2{ background:#fff; }

/* announcement chip */
.er2-chip a, .er2-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#F1F4F9; border:1px solid #E2E8F2;
  padding:.45rem 1rem .45rem .55rem; border-radius:999px;
  font-size:.9rem; color:#0A1626; text-decoration:none;
}
.er2-chip strong{ background:#1063E2; color:#fff; border-radius:999px; padding:.15rem .6rem; font-size:.78rem; font-weight:700; }

/* centred hero */
.er2-hero h1{
  letter-spacing:-.045em; line-height:.98; font-weight:800;
  font-size:clamp(2.8rem, 7vw, 5.4rem);
  max-width:16ch; margin-inline:auto;
}
.er2-hero p.lede{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:#46536B; max-width:52ch; margin-inline:auto; }

/* product frame, Jitter style */
.er2-frame{
  background:#F2F4F7; border-radius:34px; padding:clamp(1.5rem,4vw,3.5rem);
  overflow:hidden;
}
.er2-frame img{ display:block; margin-inline:auto; filter:drop-shadow(0 30px 60px rgba(10,22,38,.18)); }

/* soft feature cards */
.er2-tile{
  background:#F2F4F7; border-radius:26px; padding:2rem 1.9rem; height:100%;
  transition:background .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.er2-tile:hover{ background:#EAEEF5; transform:translateY(-4px); }
.er2-tile h3{ font-size:1.15rem; letter-spacing:-.015em; margin:0 0 .4rem; }
.er2-tile p{ color:#46536B; margin:0; font-size:.98rem; }
.er2-num{
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#8593A8; display:block; margin-bottom:1.4rem;
}

/* progressive statement reveal */
.er2-statement{
  font-size:clamp(1.6rem, 3.4vw, 2.7rem);
  font-weight:700; letter-spacing:-.03em; line-height:1.25;
  max-width:22ch;
}
.er2-statement span{ color:#C6CEDA; transition:color .35s ease; }
.er2-statement span.lit{ color:#0A1626; }

/* quiet logo/stat strip */
.er2-strip{ border-top:1px solid #E7EBF2; border-bottom:1px solid #E7EBF2; }
.er2-stat b{ display:block; font-size:2rem; letter-spacing:-.03em; color:#0A1626; line-height:1.1; }
.er2-stat span{ color:#6B7A90; font-size:.95rem; }

@media (prefers-reduced-motion:reduce){
  .er2-statement span{ color:#0A1626 !important; }
}

/* ---------- footer links: white on the dark ground ---------- */
.site-footer a{ color:#FFFFFF; text-decoration:none; }
.site-footer a:hover,
.site-footer a:focus-visible{ color:#FFB300; text-decoration:underline; }
.site-footer h3, .site-footer h4{ color:#FFFFFF; }

/* forced hero line break, desktop only — mobile wraps naturally */
.er2-br{ display:none; }
@media (min-width:782px){
  .er2-br{ display:inline; }
  .er2-hero h1{ max-width:none; }
}

/* ---------- light header, compact ---------- */
.site-header{ background:#FFFFFF; }
.er-topbar{ border-bottom:1px solid #E7EBF2; }
.er-topbar .wp-block-site-logo img{ display:block; }
.site-header a:not(.wp-element-button){ color:#0A1626; text-decoration:none; }
.site-header a:not(.wp-element-button):hover,
.site-header a:not(.wp-element-button):focus-visible{ color:#1063E2; }
.er-nav{ gap:1.75rem; }
.er-nav p{ margin:0; }
@media (max-width:781px){
  .er-nav{ gap:1rem; }
  .er-nav p{ font-size:.9rem; }
}

/* =========================================================
   BLOG — archive, single post, search   (er3-*)
   ========================================================= */

.er3-masthead{ background:#F4F7FC; border-bottom:1px solid #E7EBF2; }
.er2-eyebrow{
  font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#1063E2; margin:0 0 .9rem;
}
.er3-h1{
  font-size:clamp(2.4rem,5.5vw,3.9rem); font-weight:800; letter-spacing:-.035em;
  line-height:1.03; color:#0A1626; margin:0 0 1.1rem; max-width:17ch; margin-inline:0;
}
.er3-lede{
  font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.6; color:#46536B;
  max-width:60ch; margin:0 0 1.9rem; margin-inline:0;
}

/* category chips */
.er3-cats ul,
ul.er3-cats{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.er3-cats li{ margin:0; }
.er3-cats a{
  display:inline-block; padding:.46rem 1rem; border-radius:999px;
  background:#FFFFFF; border:1px solid #DCE4F2; color:#0A1626;
  font-size:.88rem; font-weight:600; text-decoration:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.er3-cats a:hover{ background:#0A1626; border-color:#0A1626; color:#FFFFFF; }

/* post grid */
.er3-grid{ gap:2.4rem 2rem !important; }
.er3-card{ display:flex; flex-direction:column; }
.er3-thumb img{
  border-radius:18px; width:100%; height:100%; object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.er3-thumb{ overflow:hidden; border-radius:18px; margin:0 0 1.1rem; background:#F4F7FC; }
.er3-card:hover .er3-thumb img{ transform:scale(1.04); }

.er3-kicker{
  font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#1063E2; margin:0 0 .5rem;
}
.er3-kicker a{ color:inherit; text-decoration:none; }
.er3-kicker a:hover{ text-decoration:underline; }

.er3-cardtitle{
  font-size:1.14rem; font-weight:700; line-height:1.32; letter-spacing:-.015em;
  margin:0 0 .6rem;
}
.er3-cardtitle a{ color:#0A1626; text-decoration:none; }
.er3-cardtitle a:hover{ color:#1063E2; }

.er3-date{ font-size:.83rem; color:#76839B; margin:auto 0 0; }

/* pagination */
.er3-pager{ margin-top:4rem; gap:.4rem; }
.er3-pager a, .er3-pager .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.6rem; height:2.6rem; padding:0 .7rem; border-radius:12px;
  border:1px solid #DCE4F2; color:#0A1626; font-weight:600; font-size:.92rem;
  text-decoration:none;
}
.er3-pager .page-numbers.current{ background:#0A1626; border-color:#0A1626; color:#fff; }
.er3-pager a:hover{ background:#F4F7FC; }

/* ---------- single post ---------- */
.er3-postheadwrap{ text-align:center; }
.er3-postheadwrap .er3-kicker{ justify-content:center; display:block; }
.er3-posttitle{
  font-size:clamp(2rem,4.4vw,3.1rem); font-weight:800; letter-spacing:-.03em;
  line-height:1.08; color:#0A1626; margin:0 0 1.2rem;
}
.er3-meta{
  justify-content:center; gap:.55rem; font-size:.9rem; color:#76839B;
}
.er3-meta p, .er3-meta time, .er3-meta div{ margin:0; color:#76839B; }

.er3-hero-img img{ border-radius:24px; width:100%; object-fit:cover; }
.er3-hero-img{ background:#F4F7FC; border-radius:24px; overflow:hidden; }

/* article body */
.er3-prose{ font-size:1.075rem; line-height:1.78; color:#26334A; }
.er3-prose > *{ margin-block:1.35rem; }
.er3-prose h2{
  font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; letter-spacing:-.025em;
  line-height:1.2; color:#0A1626; margin-top:3rem; margin-bottom:1rem;
}
.er3-prose h3{
  font-size:1.24rem; font-weight:700; letter-spacing:-.015em; color:#0A1626;
  margin-top:2.2rem; margin-bottom:.7rem;
}
.er3-prose a{ color:#1063E2; text-decoration:underline; text-underline-offset:3px; }
.er3-prose ul, .er3-prose ol{ padding-left:1.3rem; }
.er3-prose li{ margin-block:.5rem; }
.er3-prose img{ border-radius:18px; }
.er3-prose blockquote{
  margin-inline:0; padding:1.3rem 1.6rem; border-left:4px solid #1063E2;
  background:#F4F7FC; border-radius:0 16px 16px 0; font-size:1.06rem;
}
.er3-prose blockquote p:last-child{ margin-bottom:0; }
.er3-prose table{ width:100%; border-collapse:collapse; font-size:.96rem; }
.er3-prose th, .er3-prose td{ border:1px solid #E7EBF2; padding:.7rem .85rem; text-align:left; }
.er3-prose th{ background:#F4F7FC; font-weight:700; }
.er3-prose figure{ margin-inline:0; }

.er3-tags{ margin-top:2.5rem; font-size:.85rem; color:#76839B; }
.er3-tags a{
  display:inline-block; margin:0 .4rem .4rem 0; padding:.32rem .8rem;
  border-radius:999px; background:#F4F7FC; color:#46536B; text-decoration:none;
}
.er3-tags a:hover{ background:#E7EFFD; color:#1063E2; }

/* in-article app CTA */
.er3-ctabox{
  background:#0A1626; border-radius:28px; padding:3rem 2rem;
  color:#FFFFFF;
}
.er3-ctatitle{
  font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; letter-spacing:-.03em;
  line-height:1.14; color:#FFFFFF; margin:0 0 .9rem;
}
.er3-ctatext{ color:#C3CEE2; font-size:1rem; line-height:1.6; margin:0 0 1.7rem; }

/* related */
.er3-related{ background:#F4F7FC; border-top:1px solid #E7EBF2; }
.er3-sectitle{
  font-size:clamp(1.4rem,2.6vw,1.9rem); font-weight:800; letter-spacing:-.028em;
  color:#0A1626; margin:0 0 2.2rem;
}
.er3-related .er3-thumb{ background:#FFFFFF; }

/* search box on the search template */
.er3-search .wp-block-search__input{
  border:1px solid #DCE4F2; border-radius:999px; padding:.9rem 1.3rem; font-size:1rem;
}
.er3-search .wp-block-search__button{
  border-radius:999px; background:#1063E2; color:#fff; border:0;
  padding:.9rem 1.6rem; font-weight:600; margin-left:.5rem;
}

@media (max-width:781px){
  .er3-grid{ gap:2rem !important; }
  .er3-ctabox{ padding:2.2rem 1.4rem; }
  .er3-prose{ font-size:1.02rem; }
}

/* ---------- brand lockup: icon + wordmark ---------- */
.er-brand{
  display:inline-flex; align-items:center; gap:.7rem;
  text-decoration:none !important; line-height:1;
}
.er-brand-mark{ width:38px; height:38px; display:block; }
.er-brand-name{
  font-weight:800; font-size:1.06rem; letter-spacing:.01em;
  color:#0A1626; white-space:nowrap;
}
.er-brand-name em{ font-style:normal; color:#1063E2; }
.er-brand:hover .er-brand-name{ color:#1063E2; }
@media (max-width:520px){
  .er-brand-mark{ width:32px; height:32px; }
  .er-brand-name{ font-size:.95rem; }
}

/* ---------- blog masthead: centred ---------- */
.er3-masthead{ text-align:center; }
.er3-masthead .er3-h1{ margin-inline:auto; }
.er3-masthead .er3-lede{ margin-inline:auto; }
.er3-masthead .er3-cats ul,
.er3-masthead ul.er3-cats{ justify-content:center; }

/* ---------- category chips: kill the theme's entrance animation ---------- */
.er3-cats,
.er3-cats li,
.er3-cats a{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}
.er3-cats ul, ul.er3-cats{ align-items:center; }
.er3-cats a{
  line-height:1.25; vertical-align:middle;
  transition:background .18s ease, border-color .18s ease, color .18s ease !important;
}
.er3-cats a:visited{ color:#0A1626; background:#FFFFFF; }
.er3-cats a:visited:hover{ color:#FFFFFF; background:#0A1626; }
.er3-cats .cat-item{ display:flex; }

/* ---------- rotating "what's new" chip ---------- */
.er2-chip{ overflow:hidden; }
.er2-chip-static{ white-space:nowrap; }
.er2-rot{
  position:relative; display:inline-block; vertical-align:bottom;
  overflow:hidden; height:1.35em; white-space:nowrap;
  transition:width .42s cubic-bezier(.2,.8,.3,1);
}
.er2-rot-item{
  display:block; line-height:1.35em;
  transition:transform .42s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.er2-rot-item.is-out{ transform:translateY(-1.35em); opacity:0; }
.er2-rot-item.is-in{ transform:translateY(1.35em); opacity:0; transition:none; }

@media (prefers-reduced-motion:reduce){
  .er2-rot, .er2-rot-item{ transition:none !important; }
  .er2-rot-item.is-out, .er2-rot-item.is-in{ transform:none; opacity:1; }
}
@media (max-width:560px){
  .er2-chip{ font-size:.82rem; }
}

/* =========================================================
   Blog category chips + smooth category switching
   ========================================================= */
.er3-chips{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.55rem; max-width:62rem; margin:0 auto;
}
.er3-chip{
  display:inline-flex; align-items:center; line-height:1.25;
  padding:.5rem 1.05rem; border-radius:999px;
  background:#FFFFFF; border:1px solid #DCE4F2; color:#0A1626;
  font-size:.88rem; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.er3-chip:hover{ background:#E7EFFD; border-color:#B9D0F5; color:#1063E2; }
.er3-chip.is-active{
  background:#0A1626; border-color:#0A1626; color:#FFFFFF;
}
.er3-chip.is-active:hover{ background:#0A1626; color:#FFFFFF; }
.er3-chip:active{ transform:scale(.97); }

/* the swap itself */
#er3-results{
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.8,.3,1);
}
#er3-results.is-leaving{ opacity:0; transform:translateY(8px); }
#er3-results.is-entering{ opacity:0; transform:translateY(-6px); }

/* cards ease in on every load, staggered */
.er3-grid > *{
  animation:er3Rise .5s cubic-bezier(.2,.8,.3,1) both;
}
.er3-grid > *:nth-child(1){ animation-delay:.02s }
.er3-grid > *:nth-child(2){ animation-delay:.06s }
.er3-grid > *:nth-child(3){ animation-delay:.10s }
.er3-grid > *:nth-child(4){ animation-delay:.14s }
.er3-grid > *:nth-child(5){ animation-delay:.18s }
.er3-grid > *:nth-child(6){ animation-delay:.22s }
.er3-grid > *:nth-child(n+7){ animation-delay:.26s }
@keyframes er3Rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

/* thin progress bar while the next set loads */
.er3-bar{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:#1063E2; z-index:9998; opacity:0;
  transition:width .3s ease, opacity .3s ease;
}
.er3-bar.is-on{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .er3-grid > *{ animation:none; }
  #er3-results{ transition:none; }
  .er3-bar{ display:none; }
}
@media (max-width:600px){
  .er3-chips{ gap:.4rem; }
  .er3-chip{ padding:.42rem .85rem; font-size:.82rem; }
}

/* chip: every part on one shared baseline box */
.er2-chip{ align-items:center; line-height:1.35; }
.er2-chip strong{ line-height:1.35; display:inline-flex; align-items:center; }
.er2-chip-static{ line-height:1.35; display:inline-block; white-space:nowrap; }
.er2-rot{
  align-self:center; height:1.35em; line-height:1.35em;
  display:inline-block; vertical-align:middle;
}
.er2-rot-item{ height:1.35em; line-height:1.35em; display:block; }

/* rotation driven by keyframes, so a stalled frame can never hide the text */
.er2-rot{ position:relative; }
.er2-rot-item{ position:absolute; inset:0; }
.er2-rot-item:only-child{ position:static; }
@keyframes er2RotIn{
  from{ opacity:0; transform:translateY(100%); }
  to{   opacity:1; transform:translateY(0); }
}
@keyframes er2RotOut{
  from{ opacity:1; transform:translateY(0); }
  to{   opacity:0; transform:translateY(-100%); }
}

/* =========================================================
   Brand amber, used sparingly — the logo yellow as an accent
   ========================================================= */

/* 01 / 02 / 03 — the clearest place for it */
.er2-num{
  color:#E09A00;                 /* amber, darkened just enough to read on light */
  font-weight:800; font-size:.82rem; letter-spacing:.16em;
  margin:0 0 1.6rem; position:relative; display:inline-block;
}
.er2-num::after{
  content:""; position:absolute; left:0; bottom:-.42rem;
  width:1.55rem; height:3px; border-radius:2px;
  background:#FFB300;
  transition:width .32s cubic-bezier(.2,.8,.3,1);
}
.er2-tile:hover .er2-num::after{ width:2.6rem; }

.er2-tile{
  position:relative; overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease;
}
.er2-tile::before{
  content:""; position:absolute; inset:0 auto auto 0;
  height:3px; width:100%; background:#FFB300;
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.8,.3,1);
}
.er2-tile:hover::before{ transform:scaleX(1); }
.er2-tile:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(10,22,38,.08); }

/* stat strip — a small amber tick above each figure */
.er2-stat{ position:relative; padding-top:1.1rem; }
.er2-stat::before{
  content:""; position:absolute; top:0; left:0;
  width:1.4rem; height:3px; border-radius:2px; background:#FFB300;
}

/* warm band behind the UK test-centre section, so the lower half
   is not one continuous grey */
.er2-warm{
  background:linear-gradient(180deg,#FFFDF7 0%,#FFF9EC 100%);
  border-top:1px solid #F4E9D2;
  border-bottom:1px solid #F4E9D2;
}
.er2-warm .er2-frame{
  background:#FFFFFF;
  box-shadow:0 18px 44px rgba(120,88,20,.07);
}
.er2-warm h2{ position:relative; }
.er2-warm h2::before{
  content:""; display:block; width:2.2rem; height:4px; border-radius:2px;
  background:#FFB300; margin-bottom:1.1rem;
}

/* the dark closing block gets one warm note too */
.er2-cta-dark h2::after,
#get h2::after{
  content:""; display:block; width:2.6rem; height:4px; border-radius:2px;
  background:#FFB300; margin:1.4rem auto 0;
}

@media (prefers-reduced-motion:reduce){
  .er2-tile, .er2-tile::before, .er2-num::after{ transition:none; }
}

/* =========================================================
   Test centres section — map as a background wash on the left,
   a real device on the right
   ========================================================= */
.er2-mapsec{ position:relative; overflow:hidden; }

/* the UK map, bled off the left edge, sitting behind the copy */
.er2-mapsec::before{
  content:""; position:absolute; z-index:0;
  left:-6%; top:50%; transform:translateY(-50%);
  width:min(620px,52%); aspect-ratio:2000/2151;
  background:url("/wp-content/uploads/2023/01/UK-map-with-dtc.png") left center / contain no-repeat;
  opacity:.38; pointer-events:none;
}
.er2-mapsec::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,253,247,.55) 0%, rgba(255,252,242,.9) 42%, rgba(255,249,236,1) 70%);
}

.er2-mapgrid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:4rem; align-items:center;
}

.er2-mapcopy h2{
  font-size:clamp(2rem,3.4vw,2.9rem); font-weight:800;
  letter-spacing:-.035em; line-height:1.08; color:#0A1626; margin:0 0 1rem;
}
.er2-mapcopy h2::before{
  content:""; display:block; width:2.2rem; height:4px; border-radius:2px;
  background:#FFB300; margin-bottom:1.1rem;
}
.er2-mapcopy p{ font-size:1.1rem; color:#46536B; margin:0 0 1.8rem; max-width:42ch; }

.er2-maplist{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.er2-maplist li{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.98rem; color:#26334A;
}
.er2-maplist li::before{
  content:""; flex:0 0 auto; margin-top:.42rem;
  width:.5rem; height:.5rem; border-radius:50%;
  background:#FFB300; box-shadow:0 0 0 4px rgba(255,179,0,.18);
}

/* ---- the device ---- */
.er2-mapdevice{ position:relative; display:flex; justify-content:center; }

.er2-device{
  position:relative; width:min(300px,72%);
  border-radius:44px; padding:11px;
  background:linear-gradient(160deg,#1B2740 0%,#0A1626 55%,#16223A 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.10) inset,
    0 34px 70px rgba(10,22,38,.28),
    0 8px 20px rgba(10,22,38,.14);
}
.er2-device-screen{
  position:relative; border-radius:34px; overflow:hidden;
  background:#EEF2F7; aspect-ratio:507/1016;
}
.er2-device-screen img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:top center;
}

/* floating map pins around the device */
.er2-pin{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:#1063E2; box-shadow:0 0 0 5px rgba(16,99,226,.16);
  animation:er2PinFloat 5.5s ease-in-out infinite;
}
.er2-pin-a{ top:14%;  left:6%;  animation-delay:0s; }
.er2-pin-b{ top:54%;  right:4%; animation-delay:-1.8s; background:#FFB300; box-shadow:0 0 0 5px rgba(255,179,0,.20); }
.er2-pin-c{ bottom:12%; left:14%; animation-delay:-3.4s; }
@keyframes er2PinFloat{
  0%,100%{ transform:translateY(0);   opacity:.75; }
  50%    { transform:translateY(-9px); opacity:1;  }
}

@media (max-width:900px){
  .er2-mapgrid{ grid-template-columns:1fr; gap:3rem; }
  .er2-mapsec::before{ left:-18%; width:min(520px,86%); opacity:.24; }
  .er2-mapsec::after{
    background:linear-gradient(180deg, rgba(255,253,247,.72) 0%, rgba(255,250,238,.96) 60%);
  }
  .er2-device{ width:min(260px,66%); }
  .er2-mapcopy p{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){
  .er2-pin{ animation:none; }
}

/* .er2-tile p (0,2,0) was beating .er2-num (0,1,0) on colour and margin */
.er2-tile p.er2-num{
  color:#D98F00;
  font-weight:800; font-size:.8rem; letter-spacing:.16em;
  display:inline-block; position:relative;
  margin:0 0 1.5rem; padding-bottom:.55rem;
}
.er2-tile p.er2-num::after{
  content:""; position:absolute; left:0; bottom:0;
  width:1.55rem; height:3px; border-radius:2px; background:#FFB300;
  transition:width .32s cubic-bezier(.2,.8,.3,1);
}
.er2-tile:hover p.er2-num::after{ width:2.6rem; }

/* store badge rows: don't rely on WordPress's generated layout CSS */
.er2-badges{
  display:flex !important; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:.85rem;
}
.er2-badges figure{ margin:0; }

/* =========================================================
   Hero scene — the device shot plus floating UI cards that
   drift independently as you scroll
   ========================================================= */
.er2-scene{ overflow:visible; }

.er2-stage{
  position:relative; width:100%; max-width:900px; margin-inline:auto;
}
.er2-stage-phones{
  display:block; width:100%; height:auto; position:relative; z-index:2;
  filter:drop-shadow(0 26px 50px rgba(10,22,38,.13));
}

/* shared card look */
.er2-float{
  position:absolute; z-index:3; margin:0;
  display:flex; align-items:center; gap:.7rem;
  padding:.72rem .95rem;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border:1px solid rgba(220,228,242,.9);
  border-radius:16px;
  box-shadow:0 14px 34px rgba(10,22,38,.13);
  white-space:nowrap;
  animation:er2FloatBob 7s ease-in-out infinite;
}
.er2-float-body{ display:flex; flex-direction:column; line-height:1.25; }
.er2-float-body b{ font-size:.86rem; font-weight:700; color:#0A1626; }
.er2-float-body em{ font-style:normal; font-size:.74rem; color:#76839B; margin-top:.12rem; }

.er2-float-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:#1063E2; color:#fff; font-size:.82rem; font-weight:700;
}
.er2-float-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:10px;
  background:#E7EFFD; color:#1063E2;
}
.er2-float-arrow svg{ width:17px; height:17px; }

/* speed limit roundel */
.er2-float--limit{ padding:.5rem; border-radius:50%; }
.er2-limit{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:4px solid #E1382D; background:#fff;
  font-weight:800; font-size:1.02rem; color:#0A1626;
}

/* placement */
.er2-float--route{ top:14%;  left:-2%;  animation-delay:0s; }
.er2-float--turn { top:38%;  right:-3%; animation-delay:-2.4s; }
.er2-float--limit{ bottom:16%; left:6%;  animation-delay:-4.6s; }

@keyframes er2FloatBob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}

/* the cards arrive slightly after the phones */
.er-reveal .er2-float{ opacity:0; transform:translateY(16px); }
.er-reveal.er-in .er2-float{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.er-reveal.er-in .er2-float--route{ transition-delay:.20s; }
.er-reveal.er-in .er2-float--turn { transition-delay:.34s; }
.er-reveal.er-in .er2-float--limit{ transition-delay:.48s; }

@media (max-width:900px){
  .er2-float--route{ top:8%;  left:-1%; }
  .er2-float--turn { top:34%; right:-1%; }
  .er2-float--limit{ bottom:12%; left:3%; }
  .er2-float{ padding:.55rem .75rem; gap:.55rem; border-radius:14px; }
  .er2-float-body b{ font-size:.78rem; }
  .er2-float-body em{ font-size:.68rem; }
  .er2-float-badge, .er2-float-arrow{ width:26px; height:26px; }
  .er2-limit{ width:36px; height:36px; font-size:.9rem; border-width:3px; }
}
@media (max-width:560px){
  .er2-float--limit{ display:none; }
  .er2-float--route{ top:4%; left:-2%; }
  .er2-float--turn{ top:30%; right:-2%; }
}
@media (prefers-reduced-motion:reduce){
  .er2-float{ animation:none; }
  .er-reveal .er2-float{ opacity:1; transform:none; }
}

/* =========================================================
   Hero scene v2 — three real app shots at three depths
   ========================================================= */
.er2-stage{
  position:relative; width:100%; max-width:1000px; margin-inline:auto;
  aspect-ratio:16/10;
}

.er2-dev{
  position:absolute; display:block; height:auto;
  will-change:transform;
}

/* back left — test centres across the UK */
.er2-dev--map{
  width:46%; left:0; top:14%; z-index:1;
  opacity:.94;
  filter:drop-shadow(0 22px 40px rgba(10,22,38,.13));
}

/* back right — turn-by-turn navigation */
.er2-dev--nav{
  width:46%; right:0; top:22%; z-index:1;
  opacity:.94;
  filter:drop-shadow(0 22px 40px rgba(10,22,38,.13));
}

/* front centre — the app opening */
.er2-dev--open{
  width:19%; left:50%; top:6%; transform:translateX(-50%);
  z-index:4;
  border-radius:26px;
  filter:drop-shadow(0 34px 60px rgba(10,22,38,.26));
}

/* the parallax script writes translateY, so keep the centring
   on a wrapper transform instead of fighting it */
.er2-dev--open{ margin-left:-9.5%; left:50%; transform:none; }

.er2-float{ z-index:5; }
.er2-float--route{ top:20%;  left:2%;   }
.er2-float--turn { top:44%;  right:1%;  }
.er2-float--limit{ bottom:14%; left:31%; }

@media (max-width:1000px){
  .er2-stage{ aspect-ratio:16/11; }
  .er2-dev--open{ width:22%; margin-left:-11%; }
  .er2-dev--map{ width:50%; }
  .er2-dev--nav{ width:50%; }
}
@media (max-width:760px){
  .er2-stage{ aspect-ratio:1/1; }
  .er2-dev--map{ width:60%; left:-6%; top:10%; }
  .er2-dev--nav{ width:60%; right:-6%; top:26%; }
  .er2-dev--open{ width:28%; margin-left:-14%; top:2%; }
  .er2-float--route{ top:10%; left:0; }
  .er2-float--turn{ top:40%; right:0; }
}
@media (max-width:560px){
  .er2-stage{ aspect-ratio:4/5; }
  .er2-dev--map{ width:66%; left:-10%; top:12%; }
  .er2-dev--nav{ width:66%; right:-10%; top:34%; }
  .er2-dev--open{ width:34%; margin-left:-17%; top:0; }
}

/* route pattern, faded, behind the hero scene */
.er2-frame.er2-scene{ position:relative; overflow:hidden; }
.er2-frame.er2-scene::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("/wp-content/uploads/2023/03/map-pattern-black-1-scaled.jpg") center / cover no-repeat;
  opacity:.055;
  mask-image:radial-gradient(ellipse 78% 72% at 50% 45%, #000 32%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 45%, #000 32%, transparent 78%);
}
.er2-frame.er2-scene > *{ position:relative; z-index:1; }

/* the flanking shots sit back a little further so the scene reads calmer */
.er2-dev--map, .er2-dev--nav{ opacity:.9; }

/* numbers in black, the rule stays amber; tile hover line moves to the bottom */
.er2-tile p.er2-num{ color:#0A1626; }

.er2-tile::before{ content:none; }
.er2-tile::after{
  content:""; position:absolute; left:0; bottom:0;
  height:3px; width:100%; background:#FFB300;
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.8,.3,1);
}
.er2-tile:hover::after{ transform:scaleX(1); }

/* map artwork now sits BEHIND THE TEXT, not off the left edge */
.er2-mapsec::before{ content:none; }
.er2-mapsec::after{ content:none; }

.er2-mapcopy{ position:relative; }
.er2-mapcopy::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(620px,116%); aspect-ratio:2000/2151;
  background:url("/wp-content/uploads/2023/01/UK-map-with-dtc.png") center / contain no-repeat;
  opacity:.30;
}
.er2-mapcopy > *{ position:relative; z-index:1; }

/* the phone artwork on the right is now the real app composite */
.er2-mapdevice{ position:relative; }
.er2-mapshot{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 26px 48px rgba(10,22,38,.16));
}
.er2-pin-a{ top:10%; left:2%; }
.er2-pin-b{ top:52%; right:0; }
.er2-pin-c{ bottom:10%; left:10%; }

@media (max-width:900px){
  .er2-mapcopy::before{ width:min(520px,120%); opacity:.2; }
}

/* drop the cream band — keep the section clean white */
.er2-warm{
  background:#FFFFFF;
  border-top:1px solid #EEF1F6;
  border-bottom:1px solid #EEF1F6;
}
.er2-warm .er2-frame{ background:#FFFFFF; box-shadow:none; }

/* keep the dark CTA on the same 1180px measure as the rest of the page */
#get > .wp-block-group{
  max-width:1180px; margin-inline:auto; width:100%;
}

/* soften the map behind the copy so the text stays easy to read */
.er2-mapcopy::before{ opacity:.16; }

/* opening-screen phone: bigger, and optically centred.
   The two flanking PNGs carry uneven transparent padding, so true 50%
   reads as slightly right — nudge it back. */
.er2-dev--open{
  width:25%;
  left:47.5%;
  margin-left:-12.5%;
  top:2%;
  z-index:6;
  filter:drop-shadow(0 40px 70px rgba(10,22,38,.30));
}

@media (max-width:1000px){
  .er2-dev--open{ width:27%; margin-left:-13.5%; }
}
@media (max-width:760px){
  .er2-dev--open{ width:32%; margin-left:-16%; top:0; }
}
@media (max-width:560px){
  .er2-dev--open{ width:38%; margin-left:-19%; }
}

/* bulletproof centring: left/right 0 with auto inline margins centres the
   element in the stage regardless of how percentages resolve */
.er2-dev--open{
  left:0; right:0; margin-inline:auto; width:25%;
}
@media (max-width:1000px){ .er2-dev--open{ width:27%; margin-inline:auto; } }
@media (max-width:760px){  .er2-dev--open{ width:32%; margin-inline:auto; } }
@media (max-width:560px){  .er2-dev--open{ width:38%; margin-inline:auto; } }

/* =========================================================
   Hero: four app screens in a row, floating over the frame,
   the outer two breaking past its edges
   ========================================================= */
.er2-frame.er2-scene{ overflow:visible; }
.er2-frame.er2-scene::before{ border-radius:inherit; overflow:hidden; }

.er2-stage.er2-row{
  position:relative; width:100%; max-width:none; margin:0;
  aspect-ratio:auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  align-items:center; gap:clamp(.6rem,2.4vw,2.4rem);
  padding-block:clamp(1rem,3vw,2rem);
}

.er2-p{
  position:relative; margin:0; z-index:2;
  animation:er2Bob 9s ease-in-out infinite;
}
.er2-p img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 26px 46px rgba(10,22,38,.20));
}

/* the arc: outer phones sit lower and break out of the frame */
.er2-p1{ margin-left:-18%; transform:translateY(26px) rotate(-3deg); animation-delay:0s; }
.er2-p2{ transform:translateY(-14px) rotate(-1deg);  animation-delay:-2.2s; z-index:3; }
.er2-p3{ transform:translateY(-14px) rotate(1deg);   animation-delay:-4.4s; z-index:3; }
.er2-p4{ margin-right:-18%; transform:translateY(26px) rotate(3deg); animation-delay:-6.6s; }

@keyframes er2Bob{
  0%,100%{ translate:0 0; }
  50%    { translate:0 -12px; }
}

/* ---- floating labels ---- */
.er2-tag{
  position:absolute; z-index:5;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border:1px solid rgba(220,228,242,.95);
  border-radius:14px;
  box-shadow:0 12px 28px rgba(10,22,38,.14);
  font-size:.8rem; font-weight:600; color:#0A1626;
  white-space:nowrap; line-height:1.25;
}
.er2-tag b{ display:block; font-size:.84rem; font-weight:700; }
.er2-tag em{ display:block; font-style:normal; font-size:.72rem; color:#76839B; }

.er2-tag-dot{
  width:9px; height:9px; border-radius:50%; background:#FFB300;
  box-shadow:0 0 0 4px rgba(255,179,0,.20);
}
.er2-tag-arrow, .er2-tag-tick{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:9px; flex:0 0 auto;
}
.er2-tag-arrow{ background:#E7EFFD; color:#1063E2; }
.er2-tag-tick { background:#E6F6EE; color:#0E9F6E; }
.er2-tag-arrow svg, .er2-tag-tick svg{ width:15px; height:15px; }

.er2-tag--a{ top:6%;  left:-10%; }
.er2-tag--b{ top:30%; right:-22%; }
.er2-tag--c{ bottom:16%; left:-20%; }
.er2-tag--d{ top:10%; right:-12%; }

@media (max-width:1100px){
  .er2-tag{ font-size:.72rem; padding:.42rem .62rem; }
  .er2-tag b{ font-size:.75rem; } .er2-tag em{ font-size:.66rem; }
  .er2-tag--b{ right:-14%; } .er2-tag--c{ left:-12%; }
}
@media (max-width:820px){
  .er2-stage.er2-row{ grid-template-columns:repeat(2,1fr); gap:1.6rem 1rem; }
  .er2-p1,.er2-p4{ margin:0; }
  .er2-p1{ transform:rotate(-2deg); }
  .er2-p2{ transform:rotate(1deg); }
  .er2-p3{ transform:rotate(-1deg); }
  .er2-p4{ transform:rotate(2deg); }
  .er2-tag--a{ left:-4%; } .er2-tag--b{ right:-6%; }
  .er2-tag--c{ left:-6%; } .er2-tag--d{ right:-4%; }
}
@media (max-width:520px){
  .er2-tag--c, .er2-tag--d{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .er2-p{ animation:none; }
}

/* ---- row v2: size by height so the phones sit inside the frame ---- */
.er2-stage.er2-row{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(.4rem,1.8vw,1.6rem);
  grid-template-columns:none;
  padding-block:clamp(1.5rem,3vw,2.5rem);
}
.er2-p img{
  height:clamp(280px,30vw,440px); width:auto;
}
.er2-p{ flex:0 0 auto; }

/* arc + the outer two breaking past the frame edges */
.er2-p1{ margin-left:clamp(-90px,-6vw,-40px); transform:translateY(30px) rotate(-3deg); }
.er2-p2{ transform:translateY(-10px) rotate(-1deg); }
.er2-p3{ transform:translateY(-10px) rotate(1deg); }
.er2-p4{ margin-right:clamp(-90px,-6vw,-40px); transform:translateY(30px) rotate(3deg); }

/* labels moved clear of the neighbouring phones */
.er2-tag--a{ top:4%;   left:auto; right:-18%; }
.er2-tag--b{ top:26%;  right:auto; left:-30%; }
.er2-tag--c{ bottom:12%; left:auto; right:-26%; }
.er2-tag--d{ top:8%;   right:-16%; }

@media (max-width:1100px){
  .er2-p img{ height:clamp(230px,26vw,340px); }
  .er2-tag--a{ right:-12%; } .er2-tag--b{ left:-20%; }
  .er2-tag--c{ right:-16%; } .er2-tag--d{ right:-10%; }
}
@media (max-width:820px){
  .er2-stage.er2-row{ flex-wrap:wrap; gap:1.4rem; }
  .er2-p img{ height:clamp(240px,44vw,320px); }
  .er2-p1,.er2-p4{ margin:0; }
  .er2-p1{ transform:rotate(-2deg); }
  .er2-p2{ transform:rotate(1deg); }
  .er2-p3{ transform:rotate(-1deg); }
  .er2-p4{ transform:rotate(2deg); }
  .er2-tag--a{ right:-6%; } .er2-tag--b{ left:-8%; }
  .er2-tag--c{ right:-8%; } .er2-tag--d{ right:-6%; }
}

/* ---- row v3: let the row run wider than the frame so the outer
   phones genuinely break past its edges, and trim the height a touch ---- */
.er2-stage.er2-row{
  width:calc(100% + 11vw);
  margin-inline:-5.5vw;
  padding-block:clamp(1.2rem,2.4vw,2rem);
}
.er2-p img{ height:clamp(250px,25vw,375px); }
.er2-p1{ margin-left:0; }
.er2-p4{ margin-right:0; }

@media (max-width:1100px){
  .er2-stage.er2-row{ width:calc(100% + 8vw); margin-inline:-4vw; }
  .er2-p img{ height:clamp(210px,22vw,300px); }
}
@media (max-width:820px){
  .er2-stage.er2-row{ width:100%; margin-inline:0; }
  .er2-p img{ height:clamp(230px,42vw,300px); }
}

/* ---- row v4: spread across a row wider than the frame, so the first and
   last phone genuinely overhang its left and right edges ---- */
.er2-stage.er2-row{
  justify-content:space-between;
  width:calc(100% + 13vw);
  margin-inline:-6.5vw;
  gap:0;
}
.er2-p img{ height:clamp(260px,27vw,400px); }

@media (max-width:1100px){
  .er2-stage.er2-row{ width:calc(100% + 9vw); margin-inline:-4.5vw; }
  .er2-p img{ height:clamp(215px,23vw,310px); }
}
@media (max-width:820px){
  .er2-stage.er2-row{ justify-content:center; gap:1.4rem; width:100%; margin-inline:0; }
  .er2-p img{ height:clamp(230px,42vw,300px); }
}

/* ---- row v5: keep the overhang but stop anything escaping the viewport ---- */
.er2{ overflow-x:clip; }
.er2-frame.er2-scene{ overflow-x:clip; overflow-y:visible; }

.er2-stage.er2-row{
  width:calc(100% + 9vw);
  margin-inline:-4.5vw;
}
.er2-p img{ height:clamp(255px,26vw,385px); }

/* tags tucked inward so none of them can reach the window edge */
.er2-tag--a{ top:3%;  right:-14%; left:auto; }
.er2-tag--b{ top:24%; left:-26%;  right:auto; }
.er2-tag--c{ bottom:14%; right:-20%; left:auto; }
.er2-tag--d{ top:6%;  right:auto; left:-30%; }

@media (max-width:1100px){
  .er2-stage.er2-row{ width:calc(100% + 6vw); margin-inline:-3vw; }
  .er2-tag--a{ right:-8%; } .er2-tag--b{ left:-16%; }
  .er2-tag--c{ right:-12%; } .er2-tag--d{ left:-18%; }
}

/* the clip was cutting the overhanging phone off — the row already fits
   inside the full-bleed section, so let it show */
.er2{ overflow-x:visible; }
.er2-frame.er2-scene{ overflow:visible; }
.er2-frame.er2-scene::before{ border-radius:inherit; }

/* =========================================================
   Small info tooltip (works on hover, keyboard focus and tap)
   ========================================================= */
.er2-info{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle; margin-left:.34rem;
  width:16px; height:16px; padding:0; border:0; background:none; cursor:pointer;
  color:#9AA7BC; transition:color .18s ease;
}
.er2-info:hover, .er2-info:focus-visible{ color:#1063E2; }
.er2-info:focus-visible{ outline:2px solid #1063E2; outline-offset:3px; border-radius:50%; }
.er2-info svg{ width:16px; height:16px; display:block; }

.er2-info-note{
  position:absolute; bottom:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(4px);
  width:min(280px,72vw); padding:.8rem .9rem;
  background:#0A1626; color:#E8EDF6;
  border-radius:12px; box-shadow:0 16px 34px rgba(10,22,38,.28);
  font-size:.78rem; font-weight:400; line-height:1.5; text-align:left;
  white-space:normal; letter-spacing:0;
  opacity:0; visibility:hidden; pointer-events:none; z-index:20;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.er2-info-note b{ color:#FFFFFF; font-weight:700; }
.er2-info-note::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#0A1626;
}
.er2-info:hover .er2-info-note,
.er2-info:focus .er2-info-note,
.er2-info:focus-visible .er2-info-note{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}

/* keep it on screen in the outer stat columns */
.er2-stat:first-child .er2-info-note{ left:0; transform:translateX(0) translateY(4px); }
.er2-stat:first-child .er2-info:hover .er2-info-note,
.er2-stat:first-child .er2-info:focus .er2-info-note{ transform:translateX(0) translateY(0); }
.er2-stat:first-child .er2-info-note::after{ left:22px; }

.er2-stat:last-child .er2-info-note{ left:auto; right:0; transform:translateX(0) translateY(4px); }
.er2-stat:last-child .er2-info:hover .er2-info-note,
.er2-stat:last-child .er2-info:focus .er2-info-note{ transform:translateX(0) translateY(0); }
.er2-stat:last-child .er2-info-note::after{ left:auto; right:22px; }

@media (prefers-reduced-motion:reduce){
  .er2-info-note{ transition:none; }
}

/* the tooltip sits inside .er2-stat, so reset the inherited stat typography */
.er2-stat .er2-info-note{
  font-size:.78rem; font-weight:400; line-height:1.5; letter-spacing:0;
  color:#E8EDF6; display:block;
}
.er2-stat .er2-info-note b{
  display:inline; font-size:inherit; line-height:inherit; letter-spacing:0;
  font-weight:700; color:#FFFFFF;
}

/* ---- row v6: bigger, tighter, and symmetric by construction.
   Centre the row and let the phones overflow the frame equally on
   both sides rather than pushing the outer ones out by hand. ---- */
.er2-stage.er2-row{
  justify-content:center;
  gap:clamp(.4rem,1.4vw,1.2rem);
  width:100%;
  margin-inline:0;
  padding-block:clamp(1.5rem,3vw,2.6rem);
}
.er2-p{ flex:0 0 auto; margin:0 !important; }
.er2-p img{ height:clamp(300px,33vw,540px); width:auto; }

@media (max-width:1100px){
  .er2-p img{ height:clamp(250px,30vw,400px); }
  .er2-stage.er2-row{ gap:.6rem; }
}
@media (max-width:820px){
  .er2-stage.er2-row{ flex-wrap:wrap; gap:1.2rem; }
  .er2-p img{ height:clamp(250px,44vw,330px); }
}

/* tag on the last phone was trapped under its neighbour's stacking context */
.er2-p4{ z-index:4; }
.er2-tag--d{ top:6%; left:auto; right:-13%; }
@media (max-width:1100px){ .er2-tag--d{ right:-8%; } }
@media (max-width:820px){  .er2-tag--d{ right:-5%; } }

/* ---- tags now sit on the stage, above every phone ---- */
.er2-stage.er2-row{ position:relative; }
.er2-stage.er2-row > .er2-tag{
  position:absolute; z-index:20; animation:er2Bob 9s ease-in-out infinite;
}
.er2-stage.er2-row > .er2-tag--a{ top:12%;  left:12%;  right:auto; bottom:auto; animation-delay:-.5s; }
.er2-stage.er2-row > .er2-tag--b{ top:24%;  left:27%;  right:auto; bottom:auto; animation-delay:-2.6s; }
.er2-stage.er2-row > .er2-tag--c{ bottom:22%; left:52%; right:auto; top:auto;   animation-delay:-4.8s; }
.er2-stage.er2-row > .er2-tag--d{ top:14%;  left:auto; right:2%;  bottom:auto; animation-delay:-7s; }

@media (max-width:1100px){
  .er2-stage.er2-row > .er2-tag--a{ top:10%; left:8%; }
  .er2-stage.er2-row > .er2-tag--b{ top:22%; left:25%; }
  .er2-stage.er2-row > .er2-tag--c{ bottom:20%; left:50%; }
  .er2-stage.er2-row > .er2-tag--d{ top:12%; right:0; }
}
@media (max-width:820px){
  .er2-stage.er2-row > .er2-tag{ display:none; }
}

/* info icon in the hero subtitle — tooltip opens downward, since the
   headline sits directly above it */
.er2-hero p.lede .er2-info{ color:#8E9BB0; }
.er2-hero p.lede .er2-info-note{
  font-size:.8rem; font-weight:400; line-height:1.55; letter-spacing:0;
  color:#E8EDF6; text-align:left;
}
.er2-hero p.lede .er2-info-note b{
  display:inline; font-size:inherit; line-height:inherit; font-weight:700; color:#fff;
}
.er2-info--below .er2-info-note{
  bottom:auto; top:calc(100% + 10px);
  transform:translateX(-50%) translateY(-4px);
}
.er2-info--below .er2-info-note::after{
  top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:#0A1626;
}
.er2-info--below:hover .er2-info-note,
.er2-info--below:focus .er2-info-note,
.er2-info--below:focus-visible .er2-info-note{
  transform:translateX(-50%) translateY(0);
}

/* ---- more air between the phones ---- */
.er2-stage.er2-row{ gap:clamp(1rem,2.6vw,2.4rem); }

/* ---- tags overhang the phone edges again, one per phone ---- */
.er2-stage.er2-row > .er2-tag--a{ top:15%;   left:0;    right:auto; bottom:auto; }
.er2-stage.er2-row > .er2-tag--b{ top:31%;   left:21.5%; right:auto; bottom:auto; }
.er2-stage.er2-row > .er2-tag--c{ bottom:24%; left:auto; right:21.5%; top:auto;  }
.er2-stage.er2-row > .er2-tag--d{ top:17%;   left:auto; right:0;   bottom:auto; }

@media (max-width:1240px){
  .er2-stage.er2-row{ gap:clamp(.7rem,2vw,1.6rem); }
  .er2-stage.er2-row > .er2-tag--b{ left:20%; }
  .er2-stage.er2-row > .er2-tag--c{ right:20%; }
}
@media (max-width:1100px){
  .er2-stage.er2-row > .er2-tag--a{ left:-2%; }
  .er2-stage.er2-row > .er2-tag--d{ right:-2%; }
}

/* last tag: lift it clear of the screen content and let it overhang right */
.er2-stage.er2-row > .er2-tag--d{ top:8%; right:-1.5%; }
@media (max-width:1100px){ .er2-stage.er2-row > .er2-tag--d{ top:7%; right:-3%; } }

/* =========================================================
   Hero scene: wider frame, bigger phones, more separation,
   labels that genuinely hang off the outer edges
   ========================================================= */
.er2-frame.er2-scene{
  max-width:none;
  width:calc(100% + 140px);
  margin-inline:-70px;
}

.er2-stage.er2-row{ gap:clamp(1.1rem,3vw,2.8rem); }
.er2-p img{ height:clamp(320px,34vw,545px); }

/* labels a step larger */
.er2-tag{
  padding:.6rem 1rem; gap:.6rem; font-size:.88rem; border-radius:15px;
}
.er2-tag b{ font-size:.95rem; }
.er2-tag em{ font-size:.78rem; }
.er2-tag-arrow, .er2-tag-tick{ width:30px; height:30px; border-radius:10px; }
.er2-tag-arrow svg, .er2-tag-tick svg{ width:17px; height:17px; }
.er2-tag-dot{ width:10px; height:10px; }

/* the amber plus, so the number reads at a glance */
.er2-plus{ color:#FFB300; font-weight:800; }

/* outer two hang off the phones; inner two sit in the gaps */
.er2-stage.er2-row > .er2-tag--a{ top:14%;   left:-7%;  right:auto; bottom:auto; }
.er2-stage.er2-row > .er2-tag--b{ top:32%;   left:22%;  right:auto; bottom:auto; }
.er2-stage.er2-row > .er2-tag--c{ bottom:24%; right:22%; left:auto; top:auto;   }
.er2-stage.er2-row > .er2-tag--d{ top:9%;    right:-7%; left:auto; bottom:auto; }

@media (max-width:1320px){
  .er2-frame.er2-scene{ width:100%; margin-inline:0; }
  .er2-stage.er2-row > .er2-tag--a{ left:-4%; }
  .er2-stage.er2-row > .er2-tag--d{ right:-4%; }
}
@media (max-width:1100px){
  .er2-p img{ height:clamp(260px,30vw,400px); }
  .er2-tag{ font-size:.78rem; padding:.45rem .7rem; }
  .er2-tag b{ font-size:.82rem; } .er2-tag em{ font-size:.7rem; }
  .er2-stage.er2-row > .er2-tag--a{ left:-2%; }
  .er2-stage.er2-row > .er2-tag--d{ right:-2%; }
  .er2-stage.er2-row > .er2-tag--b{ left:20%; }
  .er2-stage.er2-row > .er2-tag--c{ right:20%; }
}

/* the relative calc blew past the viewport - cap the scene frame explicitly */
.er2-frame.er2-scene{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
}

/* theory-questions tag: match the other labels — same size, black text */
.er2-tag--d{ display:inline-flex; align-items:baseline; gap:.45rem; }
.er2-tag--d b{ font-size:.95rem; font-weight:700; color:#0A1626; display:inline; }
.er2-tag--d em{ font-size:.95rem; font-weight:600; color:#0A1626; display:inline; margin:0; }
.er2-tag--d .er2-plus{ color:#0A1626; font-weight:700; }