.hero-milestone__title { letter-spacing: -0.02em; }

.hero-milestone__copy > * { opacity: 0; transform: translateY(1.25rem); animation: hero-milestone-rise 800ms cubic-bezier(.2, .8, .2, 1) forwards; }
.hero-milestone__copy > *:nth-child(2) { animation-delay: 100ms; }
.hero-milestone__copy > *:nth-child(3) { animation-delay: 200ms; }
.hero-milestone__copy > *:nth-child(4) { animation-delay: 300ms; }

.hero-milestone__panel { opacity: 0; transform: translateY(2rem); transition: opacity 800ms ease, transform 800ms cubic-bezier(.2, .8, .2, 1); }
.hero-milestone__panel.is-visible { opacity: 1; transform: none; }

.hero-milestone__stage { height: 16rem; }
.hero-milestone__chart { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-milestone__chart [data-line] { transition: stroke-dashoffset 2200ms cubic-bezier(.45, .05, .35, 1) 300ms; }
.hero-milestone__chart [data-area] { transition: opacity 900ms ease 1800ms; }
.hero-milestone__panel.is-visible .hero-milestone__chart [data-area] { opacity: .16; }

.hero-milestone__pin { transform: translate(-50%, calc(-100% + .625rem)); }
.hero-milestone__tip { white-space: nowrap; opacity: 0; transform: translateY(.5rem) scale(.8); transform-origin: bottom center; transition: opacity 400ms ease, transform 500ms cubic-bezier(.34, 1.56, .64, 1); }
.hero-milestone__dot { width: 1.25rem; height: 1.25rem; transform: scale(0); transition: transform 450ms cubic-bezier(.34, 1.56, .64, 1); }
.hero-milestone__pin.is-on .hero-milestone__tip { opacity: 1; transform: none; transition-delay: 120ms; }
.hero-milestone__pin.is-on .hero-milestone__dot { transform: scale(1); }
.hero-milestone__micro { font-size: .75rem; line-height: 1rem; }

.hero-milestone__icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.hero-milestone__icon + * { min-width: 0; overflow-wrap: anywhere; }
.hero-milestone__badge { opacity: 0; transform: translateY(1rem); transition: opacity 500ms ease, transform 500ms ease; }
.hero-milestone.is-done .hero-milestone__badge { opacity: 1; transform: none; }
.hero-milestone.is-done li:nth-child(2) > .hero-milestone__badge { transition-delay: 100ms; }
.hero-milestone.is-done li:nth-child(3) > .hero-milestone__badge { transition-delay: 200ms; }
.hero-milestone.is-done li:nth-child(4) > .hero-milestone__badge { transition-delay: 300ms; }

@keyframes hero-milestone-rise { to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
    .hero-milestone__stage { height: 12rem; }
    .hero-milestone__tip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-milestone__copy > * { animation: none; opacity: 1; transform: none; }
    .hero-milestone__panel, .hero-milestone__badge, .hero-milestone__tip, .hero-milestone__dot,
    .hero-milestone__chart [data-line], .hero-milestone__chart [data-area] { transition: none; opacity: 1; transform: none; }
}

/* wpg-hidden: utility classes are renamed in production builds, so hidden states must not rely on .hidden / .d-none alone */
.hero-milestone[hidden], .hero-milestone [hidden], .hero-milestone .hidden.d-none { display: none !important; }

/* Bootstrap flex-md-row: cap thumb width (parity with Tailwind md:w-80) */
.content-v41-thumb-wrap {
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .content-v41-thumb-wrap {
        width: 20rem;
        max-width: 20rem;
    }
}

.spread-chapter__visual--rise:hover { transform: scale(1.05); transition: transform .2s ease; }

.spread-chapter__jump--rise:hover { transform: scale(1.05); transition: transform .2s ease; }

.content-col-grow {
    flex: 1 1 0%;
    min-width: 0;
}

.content-grid-gap {
    gap: 2rem;
}

.content-img-expands {
    display: block;
    width: 100%;
    height: 18rem;
    min-height: 18rem;
    flex-shrink: 0;
    object-fit: cover;
}
@media (min-width: 768px) {
    .content-img-expands {
        height: 24rem;
        min-height: 24rem;
    }
}

.about-reel__head { max-width: 44rem; }

.about-reel__arrow { width: 3.25rem; height: 3.25rem; appearance: none; -webkit-appearance: none; cursor: pointer; transition: transform 200ms ease, opacity 200ms ease; }
.about-reel__arrow[disabled] { opacity: .35; cursor: default; transform: none; }

.about-reel__timeline { padding: 0 .25rem; }
.about-reel__rail { top: 1.125rem; height: .25rem; }
.about-reel__rail-fill { width: 0; transition: width 250ms ease-out; }
.about-reel__node { appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; opacity: .55; transition: opacity 300ms ease; }
.about-reel__node.is-active, .about-reel__node.is-done { opacity: 1; }
.about-reel__node:focus-visible { outline: 2px solid; outline-offset: 4px; border-radius: .5rem; }
.about-reel__dot { width: 2.5rem; height: 2.5rem; font-size: .9375rem; transform: scale(.82); transition: transform 300ms cubic-bezier(.3, 1.4, .4, 1); }
.about-reel__node.is-active .about-reel__dot { transform: scale(1.08); }
.about-reel__node-label { font-size: .875rem; line-height: 1.25rem; }

.about-reel__track { scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.about-reel__track:focus-visible { outline: 2px solid; outline-offset: 4px; border-radius: 1.5rem; }
.about-reel__card { flex: 0 0 86%; scroll-snap-align: start; opacity: .55; transform: scale(.96); transition: opacity 500ms ease, transform 500ms cubic-bezier(.2, .8, .2, 1); }
.about-reel__card.is-active { opacity: 1; transform: none; }
@media (min-width: 640px) { .about-reel__card { flex-basis: 60%; } }
@media (min-width: 1024px) { .about-reel__card { flex-basis: 40%; } }
@media (min-width: 1280px) { .about-reel__card { flex-basis: 36%; } }

.about-reel__figure { aspect-ratio: 16 / 10; }
.about-reel__img { object-fit: cover; transform: scale(1.1); transition: transform 1200ms cubic-bezier(.2, .8, .2, 1); }
.about-reel__card.is-active .about-reel__img { transform: scale(1); }

.about-reel__caption { font-size: .875rem; line-height: 1.25rem; min-width: 0; overflow-wrap: anywhere; }
.about-reel__meter { height: .5rem; }
.about-reel__meter-fill { width: 0; transition: width 1400ms cubic-bezier(.2, .8, .2, 1) 200ms; }

@media (prefers-reduced-motion: reduce) {
    .about-reel__track { scroll-behavior: auto; }
    .about-reel__card, .about-reel__img, .about-reel__meter-fill, .about-reel__rail-fill, .about-reel__dot { transition: none; }
    .about-reel__card { opacity: 1; transform: none; }
}
/* keep edge labels inside the container */
.about-reel__node-label { max-width: 9rem; text-align: center; }
.about-reel__timeline li:first-child .about-reel__node { align-items: flex-start !important; }
.about-reel__timeline li:first-child .about-reel__node-label { text-align: left; }
.about-reel__timeline li:last-child .about-reel__node { align-items: flex-end !important; }
.about-reel__timeline li:last-child .about-reel__node-label { text-align: right; }
@media (max-width: 767px) { .about-reel__node-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* wpg-hidden: utility classes are renamed in production builds, so hidden states must not rely on .hidden / .d-none alone */
.about-reel[hidden], .about-reel [hidden], .about-reel .hidden.d-none { display: none !important; }

.header-ui__box-12 { width: 3rem; height: 3rem; }

.tools-reel__intro { max-width: 42rem; }
.tools-reel__btn { appearance: none; -webkit-appearance: none; cursor: pointer; transition: transform 200ms ease, opacity 200ms ease; }
.tools-reel__btn:disabled { opacity: .35; cursor: default; }

.tools-reel__track { scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.tools-reel__track::-webkit-scrollbar { display: none; }
.tools-reel__card { width: 20rem; scroll-snap-align: start; transition: transform 250ms ease; }
.tools-reel__card:hover { transform: translateY(-4px); }
.tools-reel__card.is-in { animation: tools-reel-in 600ms cubic-bezier(.2, .8, .2, 1) both; }

.tools-reel__arrow { transition: transform 200ms ease; }
.tools-reel__card:hover .tools-reel__arrow { transform: translateX(4px); }

.tools-reel__rail { height: .25rem; }
.tools-reel__progress { width: 0; transition: width 250ms ease; }

@keyframes tools-reel-in { from { opacity: 0; transform: translateX(2rem); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .tools-reel__track { scroll-behavior: auto; }
    .tools-reel__card.is-in { animation: none; }
}

/* wpg-hidden: utility classes are renamed in production builds, so hidden states must not rely on .hidden / .d-none alone */
.tools-reel[hidden], .tools-reel [hidden], .tools-reel .hidden.d-none { display: none !important; }

.content-grid-gap {
    gap: 2rem;
}

.content-full-frame {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.content-heading-gap {
    margin-bottom: 2rem;
}

.content-section-pad {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.content-base-height {
    display: block;
    width: 100%;
    height: 16rem;
    min-height: 16rem;
    flex-shrink: 0;
    object-fit: cover;
}

.stats-ladder__title { letter-spacing: -0.02em; }
.stats-ladder__medal { width: 5.5rem; height: 5.5rem; flex-shrink: 0; }
.stats-ladder__rank { opacity: 0; transform: scale(.94); transition: opacity 600ms ease, transform 700ms cubic-bezier(.34, 1.56, .64, 1); }
.stats-ladder.is-visible .stats-ladder__rank { opacity: 1; transform: none; }

.stats-ladder__row { transition: transform 900ms cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.stats-ladder__track { height: .75rem; }
.stats-ladder__fill { width: 0; height: 100%; transition: width 1500ms cubic-bezier(.2, .8, .2, 1); }

@media (prefers-reduced-motion: reduce) {
    .stats-ladder__rank { opacity: 1; transform: none; transition: none; }
    .stats-ladder__row, .stats-ladder__fill { transition: none; }
}

/* wpg-hidden: utility classes are renamed in production builds, so hidden states must not rely on .hidden / .d-none alone */
.stats-ladder[hidden], .stats-ladder [hidden], .stats-ladder .hidden.d-none { display: none !important; }


.chronicle-writers__snippet--glow:hover { transform: scale(1.05); transition: transform .2s ease; }

.chronicle-writers__picture--glow:hover { transform: scale(1.05); transition: transform .2s ease; }

/* cta v40 — relay steps: scroll-driven progress line + node activation (no colors) */
.cta-relay__steps { --relay-p: 0; }
.cta-relay__node { width: 4rem; height: 4rem; z-index: 1; }
.cta-relay__on { opacity: 0; transform: scale(.6); transition: opacity 400ms ease, transform 500ms cubic-bezier(.2, .8, .2, 1); }
.cta-relay__step.is-active .cta-relay__on { opacity: 1; transform: none; }
.cta-relay__num { width: 1.5rem; height: 1.5rem; top: -.25rem !important; right: -.25rem !important; font-size: .75rem; z-index: 2; }
.cta-relay__body { min-width: 0; }
.cta-relay__badge { width: 3rem; height: 3rem; }

/* mobile: vertical track through node centres */
.cta-relay__track { width: .25rem; top: 2rem !important; bottom: 2rem; left: calc(2rem - .125rem) !important; z-index: 0; }
.cta-relay__fill { transform-origin: 50% 0; transform: scaleY(var(--relay-p)); transition: transform 120ms linear; }
.cta-relay__step { opacity: .55; transition: opacity 500ms ease; }
.cta-relay__step.is-active { opacity: 1; }

@media (min-width: 992px) {
    .cta-relay__steps:not(.is-row) .cta-relay__track { width: auto; height: .25rem; top: calc(2rem - .125rem) !important; bottom: auto; left: 16.666% !important; right: 16.666%; }
}
.cta-relay__steps.is-row .cta-relay__fill { transform-origin: 0 50%; transform: scaleX(var(--relay-p)); }

@media (prefers-reduced-motion: reduce) {
    .cta-relay__on, .cta-relay__fill, .cta-relay__step { transition: none; }
}

/* wpg-hidden: utility classes are renamed in production builds, so hidden states must not rely on .hidden / .d-none alone */
.cta-relay[hidden], .cta-relay [hidden], .cta-relay .hidden.d-none { display: none !important; }

/* CTA bar: the button group may shrink and wrap so long labels never run past the bar */
.cta-relay :has(> a[href] + a[href]) { flex-shrink: 1 !important; min-width: 0; max-width: 100%; }
.cta-relay :has(> a[href] + a[href]) > a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.cta-relay :has(+ :has(> a[href] + a[href])) { min-width: 0; }


.writeup-document__accent-trail {
    margin-bottom: 2rem;
    width: 4rem;
    height: 0.25rem;
}

.writeup-document__title-trail { margin-bottom: 2rem; }

.writeup-document__hull-section-pad {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.content-prose-measure {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.content-heading-gap {
    margin-bottom: 2rem;
}