/* =========================================================
   Technoknowledge: pages/techno-camps.css
   Styles used only on the Techno Camps page.
   ========================================================= */

/* ---------- hero ---------- */
.camps-hero { position: relative; overflow: hidden; background: var(--navy); color: #C9D3E3; padding-block: clamp(28px, 4vw, 56px) clamp(56px, 6vw, 96px); }
.camps-hero::before {
  content: ""; position: absolute; right: -180px; top: -200px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 212, 0, 0.10), transparent); pointer-events: none;
}
.camps-hero__inner { position: relative; display: grid; gap: 48px; align-items: center; }
@media (min-width: 1100px) { .camps-hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: 64px; } }
.camps-hero .breadcrumb { color: #9FB0C8; }
.camps-hero__pill {
  display: inline-flex; margin-top: 22px; padding: 8px 18px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow);
}
.camps-hero h1 { margin-top: 20px; color: #fff; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.06; letter-spacing: -0.035em; }
.camps-hero h1 span { display: block; color: var(--yellow); }
/* the two buttons sit right under the headline so they are visible as soon as the page opens */
.camps-hero .lead { margin-top: 24px; max-width: 560px; color: #C9D3E3; }
.camps-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.camps-hero__ctas .btn--light { --btn-bd: rgba(255, 255, 255, 0.85); }
@media (max-width: 639px) { .camps-hero__ctas .btn { flex: 1 1 100%; } }
.camps-hero__prices { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; list-style: none; padding: 0; }
.camps-hero__prices li { display: grid; padding-left: 14px; border-left: 3px solid var(--yellow); }
.camps-hero__prices strong { font-family: var(--font-heading); font-size: 1.25rem; color: #fff; }
.camps-hero__prices span { font-size: var(--fs-xs); color: #9FB0C8; }

.camps-hero__media { position: relative; padding: 0 0 18% 0; }
.camps-slider { position: relative; z-index: 0; isolation: isolate; width: 86%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy-dark); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.camps-slider .slider__slide { position: absolute; inset: 0; margin: 0; }
.camps-slider .slider__slide img { width: 100%; height: 100%; object-fit: cover; }
.js .camps-slider .slider__slide { opacity: 0; transition: opacity 900ms var(--ease); }
.js .camps-slider .slider__slide img { transform: scale(1.06); transition: transform 5s linear; }
.js .camps-slider .slider__slide.is-active { opacity: 1; z-index: 1; }
.js .camps-slider .slider__slide.is-active img { transform: scale(1); }
.no-js .camps-slider .slider__slide:not(:first-child) { display: none; }
.camps-slider__dots { position: absolute; left: 16px; bottom: 14px; z-index: 2; display: flex; gap: 6px; padding: 7px 9px; border-radius: var(--radius-pill); background: rgba(14, 30, 56, 0.55); }
.camps-slider__dot { position: relative; width: 22px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.45); overflow: hidden; transition: width var(--t-med) var(--ease); }
.camps-slider__dot[aria-selected="true"] { width: 40px; background: rgba(255, 255, 255, 0.35); }
.camps-slider__dot i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--yellow); }
.camps-slider__dot[aria-selected="true"] i { width: 100%; }
.camps-slider__dot.is-running i { width: 0; animation: camps-progress var(--slide-ms, 4500ms) linear forwards; }
.camps-slider.is-paused .camps-slider__dot.is-running i { animation-play-state: paused; }
@keyframes camps-progress { from { width: 0; } to { width: 100%; } }
.no-js .camps-slider__dots { display: none; }
.camps-hero__shot {
  position: absolute; right: 0; bottom: 0; z-index: 4; width: 56%; margin: 0;
  background: #fff; padding: 8px 8px 10px; border-radius: var(--radius-md); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
  transform: rotate(2deg);
}
.camps-hero__shot img { width: 100%; aspect-ratio: 800 / 520; object-fit: cover; border-radius: 8px; }
.camps-hero__shot figcaption { margin-top: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--navy); text-align: center; }
.camps-hero__live {
  position: absolute; left: 16px; top: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-pill); background: #fff; color: var(--navy); font-size: var(--fs-xs); font-weight: 800;
}
.camps-hero__live i { width: 8px; height: 8px; border-radius: 50%; background: #E53935; animation: camps-pulse 1.8s infinite; }
@keyframes camps-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(229, 57, 53, 0); } }

/* ---------- features ---------- */
.camps-features { background: #fff; border-bottom: 1px solid var(--border); }
.camps-features__list { display: grid; gap: 4px; padding-block: 22px; }
@media (min-width: 640px) { .camps-features__list { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .camps-features__list { grid-template-columns: repeat(4, 1fr); } }
.camps-features__list li {
  --i: 0; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid transparent;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.camps-features__list li:nth-child(2) { --i: 1; }
.camps-features__list li:nth-child(3) { --i: 2; }
.camps-features__list li:nth-child(4) { --i: 3; }
.camps-features__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--yellow-soft); color: #7A5E00; transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.camps-features__icon svg { width: 22px; height: 22px; }
/* room above/below so the lifted, highlighted card is not cut off */
.camps-features .camps-features__list { padding-block: 18px; }
/* progress line under the highlighted card */
.camps-features__list li::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; }

/* Animation: the four cards slide in one after another; then the highlight
   (.is-hi, set by js/pages/techno-camps.js) moves from card to card every 2.4 s.
   Hovering or focusing a card highlights it and pauses the rotation. */
@media (prefers-reduced-motion: no-preference) {
  .js .camps-features__list li { animation: cf-in 600ms var(--ease) backwards; animation-delay: calc(var(--i) * 120ms); }
  .camps-features__list li.is-hi::after { animation: cf-line var(--cf-ms, 2400ms) linear forwards; }
  .camps-features__list.is-paused li.is-hi::after { animation: none; transform: scaleX(1); }
  .camps-features__list li.is-hi .camps-features__icon { animation: cf-pop 600ms var(--ease); }
}
.camps-features__list li.is-hi { background: #FFFBEA; border-color: rgba(255, 212, 0, 0.6); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.camps-features__list li.is-hi .camps-features__icon { background: var(--yellow); color: var(--navy); transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .camps-features__list li.is-hi::after { transform: scaleX(1); } }
@keyframes cf-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cf-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-8deg); } 70% { transform: scale(1.04) rotate(3deg); } 100% { transform: scale(1.08); } }
@keyframes cf-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.camps-features__list strong { display: block; font-family: var(--font-heading); color: var(--navy); font-size: var(--fs-sm); }
.camps-features__list span { font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------- age tabs + courses ---------- */
.ages__tabs { display: grid; gap: 10px; }
@media (min-width: 640px) { .ages__tabs { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.ages__tab {
  --c: var(--navy);
  display: grid; gap: 2px; text-align: left; padding: 16px 20px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border); background: #fff; transition: all var(--t-fast);
}
.ages__tab--sky { --c: var(--sky); }
.ages__tab--yellow { --c: #E0B400; }
.ages__tab--green { --c: var(--green); }
.ages__tab strong { font-family: var(--font-heading); font-size: 1.25rem; color: var(--navy); }
.ages__tab span { font-size: var(--fs-sm); color: var(--text-muted); }
.ages__tab:hover { border-color: var(--c); }
.ages__tab[aria-selected="true"] { border-color: var(--c); box-shadow: inset 0 -4px 0 var(--c), var(--shadow-md); }
.no-js .ages__tabs { display: none; }
.ages__panel { margin-top: 28px; }
.js .ages__panel:not([hidden]) { animation: camps-up 400ms var(--ease); }
.no-js .ages__panel + .ages__panel { margin-top: 40px; }
@keyframes camps-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.courses { display: grid; gap: 14px; }
@media (min-width: 640px) { .courses { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .courses { grid-template-columns: repeat(4, 1fr); } }
.course {
  --c: var(--navy); --c-soft: var(--navy-soft);
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.course--sky { --c: #00709F; --c-soft: var(--sky-soft); }
.course--yellow { --c: #7A5E00; --c-soft: var(--yellow-soft); }
.course--green { --c: var(--green); --c-soft: var(--green-soft); }
.course:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.course:has(.course__add[aria-pressed="true"]) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.course__mono {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--c-soft); color: var(--c); font-family: var(--font-heading); font-weight: 800; font-size: 0.9375rem;
}
.course h3 { font-size: 1.0625rem; }
.course__pop { position: absolute; top: 16px; right: 16px; }
.course p { font-size: var(--fs-sm); color: var(--text-muted); flex: 1; }
.course__add {
  min-height: 42px; border-radius: var(--radius-btn); border: 1.5px dashed var(--border-strong);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); color: var(--navy); transition: all var(--t-fast);
}
.course__add:hover { border-style: solid; border-color: var(--navy); }
.course__add-on { display: none; }
.course__add[aria-pressed="true"] { background: var(--navy); border: 1.5px solid var(--navy); color: #fff; }
.course__add[aria-pressed="true"] .course__add-off { display: none; }
.course__add[aria-pressed="true"] .course__add-on { display: inline-flex; align-items: center; gap: 6px; }
.course__add[aria-pressed="true"] .course__add-on::before { content: "✓"; color: var(--yellow); }
.no-js .course__add { display: none; }
.courses__note { margin-top: 24px; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- formats ---------- */
.formats { display: grid; gap: 18px; max-width: 1180px; margin-inline: auto; }
@media (min-width: 640px) { .formats { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 640px) and (max-width: 1099px) { .format--school { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .formats { grid-template-columns: repeat(3, 1fr); } }
.format { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 18px; }
.format--featured { border: 2px solid var(--navy); box-shadow: var(--shadow-lg); }
.format__tag { align-self: flex-start; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--yellow); color: var(--navy); font-size: var(--fs-xs); font-weight: 800; }
.format__tag--soft { background: var(--navy-soft); }
/* "Techno Camp at your school" card: for school owners and principals */
.format--school { border: 1.5px dashed var(--border-strong); }
.format__tag--school { background: var(--green-soft); color: var(--green); }
.format--school .format__price strong { font-size: 1.625rem; }
.format h3 { font-size: var(--fs-h3); }
.format__price { margin-top: auto; color: var(--text-muted); font-size: var(--fs-sm); }
.format__price strong { font-family: var(--font-heading); font-size: 2rem; color: var(--navy); letter-spacing: -0.02em; margin-right: 6px; }

/* ---------- steps ---------- */
.steps { display: grid; gap: 14px; counter-reset: s; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.step { position: relative; padding: 24px; border-radius: var(--radius-md); background: var(--bg-soft); }
.step__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: var(--navy); font-family: var(--font-heading); font-weight: 800; }
.step h3 { margin-top: 14px; font-size: var(--fs-h4); }
.step p { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- needs + FAQ ---------- */
.needs-faq { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1100px) { .needs-faq { grid-template-columns: 0.85fr 1.15fr; gap: 64px; } }
.needs { background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.needs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.needs__body { padding: 24px 26px 28px; }
.needs__title { font-size: var(--fs-h3); margin-bottom: 16px; }
.needs-faq .section-head { margin-bottom: 24px; }

/* ---------- register ---------- */
.register { background: var(--navy); }
.register__inner { display: grid; gap: 36px; align-items: start; }
@media (min-width: 1100px) { .register__inner { grid-template-columns: 0.8fr 1.2fr; gap: 64px; } }
.register__aside { color: #C9D3E3; }
@media (min-width: 1100px) { .register__aside { position: sticky; top: calc(var(--header-h) + 32px); } }
.register__aside .eyebrow { color: var(--yellow); }
.register__aside h2 { color: #fff; margin-top: 12px; }
.register__aside > p { margin-top: 14px; max-width: 420px; }
.register__aside .btn { margin-top: 24px; }
.register__contact { margin-top: 28px; display: grid; gap: 10px; list-style: none; padding: 0; font-size: var(--fs-sm); }
.register__contact li { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.register__contact span { color: #9FB0C8; }
.register__contact a { color: #fff; text-decoration: none; font-weight: 700; word-break: break-word; }
.register__contact a:hover { color: var(--yellow); }
.register__card { background: #fff; border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 40px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); }

.field__label { font-weight: 700; font-size: var(--fs-sm); color: var(--navy); }
.picked { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); padding: 12px; min-height: 56px; display: grid; align-items: center; }
.picked__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.picked__list:empty { display: none; }
.picked__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: var(--radius-pill); background: var(--navy); color: #fff; font-size: var(--fs-xs); font-weight: 700; animation: camps-up 250ms var(--ease); }
.picked__remove { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 16px; line-height: 1; }
.picked__remove:hover { background: var(--yellow); color: var(--navy); }
.picked__empty { font-size: var(--fs-sm); color: var(--text-soft); }

.type-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-choice__item { position: relative; cursor: pointer; }
.type-choice__item input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.type-choice__item span { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius-md); border: 1.5px solid var(--border-strong); transition: all var(--t-fast); }
.type-choice__item strong { font-family: var(--font-heading); color: var(--navy); }
.type-choice__item small { color: var(--text-muted); font-size: var(--fs-xs); }
.type-choice__item input:hover + span { border-color: var(--navy); }
.type-choice__item input:checked + span { border-color: var(--navy); background: var(--navy-soft); box-shadow: inset 0 0 0 1px var(--navy); }
.type-choice__item input:focus-visible + span { box-shadow: var(--focus-ring); }
.field.has-error .type-choice__item span, .field.has-error .picked { border-color: var(--red); }

/* ---------- sticky selection bar ---------- */
.pick-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: var(--navy); color: #fff; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
  padding-bottom: env(safe-area-inset-bottom, 0px); animation: camps-bar 300ms var(--ease);
}
.pick-bar[hidden] { display: none; }
.pick-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.pick-bar p { font-size: var(--fs-sm); }
.pick-bar strong { font-family: var(--font-heading); color: var(--yellow); font-size: 1.125rem; }
@keyframes camps-bar { from { transform: translateY(100%); } to { transform: none; } }
body:has(.pick-bar:not([hidden])) .wa-float { bottom: 86px; }

/* ---------- formats: animation & highlight ----------
   - each card lifts on hover with a coloured edge (1-to-1 yellow, group navy, school green)
   - the 1-to-1 card glows softly and its yellow button has a light sweep
   - ticks pop in one by one and the price slides up when a card scrolls into view
   - the school card's dashed border pulses green and its tag has a live dot */
.format { --edge: var(--navy); overflow: hidden; transition: opacity 600ms var(--ease), transform 600ms var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.format--featured { --edge: var(--yellow); }
.format--school { --edge: var(--green); }
.format::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--edge); transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease); }
.format:hover::before, .format:focus-within::before { transform: scaleX(1); }
.format:hover, .js .format.is-visible:hover, .format:focus-within, .js .format.is-visible:focus-within { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(19, 41, 75, 0.16); }
.format:not(.format--featured):hover { border-color: var(--edge); }
.format--school:hover { border-style: solid; }
.format__tag--school { display: inline-flex; align-items: center; gap: 8px; }
.format__tag--school::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.format .btn { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  /* soft glow on the most popular card */
  .format--featured { animation: fm-glow 3.2s ease-in-out infinite; }
  .format--featured:hover { animation: none; }
  /* light sweep across the yellow button */
  .format--featured .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent); transform: skewX(-18deg); animation: fm-shine 3.6s ease-in-out infinite 1.2s; }
  /* ticks pop in, price slides up, when the card appears */
  .js .format .checklist li::before { transform: scale(0); }
  .js .format.is-visible .checklist li::before { animation: fm-tick 450ms var(--ease) forwards; }
  .js .format.is-visible .checklist li:nth-child(1)::before { animation-delay: 250ms; }
  .js .format.is-visible .checklist li:nth-child(2)::before { animation-delay: 400ms; }
  .js .format.is-visible .checklist li:nth-child(3)::before { animation-delay: 550ms; }
  .js .format .format__price { opacity: 0; transform: translateY(10px); }
  .js .format.is-visible .format__price { animation: fm-up 600ms var(--ease) 650ms forwards; }
  /* school card: green dashed border breathes in and out */
  .format--school { animation: fm-dash 2.8s ease-in-out infinite; }
  .format--school:hover { animation: none; }
  .format__tag--school::before { animation: fm-dot 1.6s ease-out infinite; }
}
@keyframes fm-glow { 0%, 100% { box-shadow: var(--shadow-lg); } 50% { box-shadow: 0 0 0 6px rgba(255, 212, 0, 0.25), var(--shadow-lg); } }
@keyframes fm-shine { 0% { left: -60%; } 45%, 100% { left: 130%; } }
@keyframes fm-tick { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes fm-up { to { opacity: 1; transform: none; } }
@keyframes fm-dash { 0%, 100% { border-color: var(--border-strong); } 50% { border-color: var(--green); } }
@keyframes fm-dot { 0% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(46, 139, 87, 0); } }

/* ---------- "From sign-up to first project": floating steps ----------
   Cards float gently (each a little out of step), a dashed path with a
   moving yellow dot links the numbers, the numbers light up 1 → 4 in turn,
   and each card has a floating icon. Hover lifts a card with a yellow edge. */
.steps--float .step { overflow: visible; border: 1.5px solid transparent; transition: opacity 600ms var(--ease), transform 600ms var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-med) var(--ease); }
.steps--float .step:hover { background: #fff; border-color: var(--yellow); box-shadow: 0 20px 40px rgba(19, 41, 75, 0.12); }
.step__num { position: relative; z-index: 1; }
.step__icon { position: absolute; z-index: 2; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--navy); box-shadow: var(--shadow-md); }
.step__icon svg { width: 24px; height: 24px; }
.steps--float .step:nth-child(3) .step__icon { color: var(--whatsapp, #25D366); }
.steps--float .step:nth-child(4) .step__icon { color: #E0B400; }
.steps--float .step:hover .step__icon { background: var(--yellow); color: var(--navy); }
/* dashed path from each number to the next card (4 across only) */
@media (min-width: 1100px) {
  .steps--float .step:not(:last-child)::after {
    content: ""; position: absolute; top: 43px; left: 70px; width: calc(100% - 26px); height: 2px; z-index: 0;
    background: repeating-linear-gradient(90deg, var(--border-strong) 0 8px, transparent 8px 14px);
  }
  .steps--float .step:not(:last-child)::before {
    content: ""; position: absolute; top: 39px; left: 70px; width: 10px; height: 10px; border-radius: 50%; z-index: 1;
    background: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 212, 0, 0.25); opacity: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .steps--float .step.is-visible { animation: st-float 5s ease-in-out infinite; }
  .steps--float .step:nth-child(2).is-visible { animation-delay: -1.2s; }
  .steps--float .step:nth-child(3).is-visible { animation-delay: -2.4s; }
  .steps--float .step:nth-child(4).is-visible { animation-delay: -3.6s; }
  .steps--float .step:hover { animation-play-state: paused; }
  .steps--float .step__icon { animation: st-bob 3.2s ease-in-out infinite; }
  .steps--float .step:nth-child(2) .step__icon { animation-delay: -0.8s; }
  .steps--float .step:nth-child(3) .step__icon { animation-delay: -1.6s; }
  .steps--float .step:nth-child(4) .step__icon { animation-delay: -2.4s; }
  /* numbers light up in turn: 1, 2, 3, 4 (8 s loop) */
  .steps--float .step__num { animation: st-num 8s ease-in-out infinite; }
  .steps--float .step:nth-child(2) .step__num { animation-delay: 2s; }
  .steps--float .step:nth-child(3) .step__num { animation-delay: 4s; }
  .steps--float .step:nth-child(4) .step__num { animation-delay: 6s; }
  @media (min-width: 1100px) {
    .steps--float .step:not(:last-child)::before { animation: st-dot 8s ease-in-out infinite; }
    .steps--float .step:nth-child(2)::before { animation-delay: 2s; }
    .steps--float .step:nth-child(3)::before { animation-delay: 4s; }
    .steps--float .step:not(:last-child)::after { animation: st-dash 1.2s linear infinite; }
  }
}
/* "translate" (not "transform") so it adds to the scroll-reveal and hover lift */
@keyframes st-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes st-bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -6px; rotate: -6deg; } }
@keyframes st-num { 0%, 30%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 0, 0); scale: 1; } 6% { box-shadow: 0 0 0 10px rgba(255, 212, 0, 0.35); scale: 1.15; } 18% { box-shadow: 0 0 0 4px rgba(255, 212, 0, 0.2); scale: 1.05; } }
@keyframes st-dot { 0% { left: 70px; opacity: 0; } 4% { opacity: 1; } 22% { left: calc(100% + 30px); opacity: 1; } 25%, 100% { left: calc(100% + 30px); opacity: 0; } }
@keyframes st-dash { to { background-position: 14px 0; } }