/* ==========================================================================
   Robo Co-op — English home page
   --------------------------------------------------------------------------
   Pairs with includes/home/*.php and assets/js/home.js. Everything is scoped
   to body.rc-hp, so no other page (including /ja/) is affected.

   Mobile first: base rules are the phone layout, and each min-width block
   adds to it. The header keeps its own 960px burger breakpoint
   (includes/header.php); nothing here moves it.

   Fonts: Roboto only — includes/header.php forces it on every element.
   Colours: the site's own palette (paper #F5F5F0, accent #06B6D4, footer
   navy #0F172A, platform blue / red / green), plus darker "-ink" shades
   wherever one of those has to carry text and pass WCAG AA contrast.

   Contents
     00  Tokens and base
     01  Shared pieces (wrap, eyebrow, headings, buttons, links)
     02  Header (one accessibility fix)
     03  Hero
     04  Challenge
     05  Approach
     06  Ecosystem
     07  Model
     08  Impact
     09  Stories
     10  Get involved
     11  Reveal
     12  Reduced motion
   ========================================================================== */


/* ==========================================================================
   00  TOKENS AND BASE
   ========================================================================== */

.rc-hp {
    --hp-navy: #0F172A;
    --hp-navy-deep: #0A1020;
    --hp-ink: #0D0F12;
    --hp-body: #3D4048;
    --hp-muted: #5B6170;
    --hp-soft: #4A5060;

    --hp-paper: #F3F1EA;
    --hp-paper-2: #FAFAF7;
    --hp-white: #FFFFFF;

    --hp-line: rgba(13, 15, 18, .09);
    --hp-line-2: rgba(13, 15, 18, .16);

    --hp-accent: #06B6D4;
    --hp-accent-ink: #0E7490;
    --hp-accent-hi: #22D3EE;
    --hp-accent-pale: #67E8F9;
    --hp-gold: #F8B03E;
    --hp-gold-ink: #9A5800;

    --hp-ease: cubic-bezier(.22, 1, .36, 1);
    --hp-gutter: clamp(20px, 5vw, 40px);
    --hp-band: clamp(48px, 5.6vw, 80px);
    --hp-measure: 1240px;
    --hp-r: 20px;
    --hp-r-lg: 28px;
    --hp-sh-1: 0 1px 2px rgba(13, 15, 18, .04), 0 6px 18px -10px rgba(13, 15, 18, .12);
    --hp-sh-2: 0 2px 6px rgba(13, 15, 18, .05), 0 26px 50px -22px rgba(13, 15, 18, .28);
    --hp-header: 76px;
}

html:has(body.rc-hp) {
    /* the header is sticky — keep in-page anchors from landing under it */
    scroll-padding-top: var(--hp-header, 76px);
    /* `clip`, not `hidden`: contains the parked mobile menu without
       breaking position: sticky on the header */
    overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
    html:has(body.rc-hp) {
        scroll-behavior: smooth;
    }
}

body.rc-hp {
    margin: 0;
    background: var(--hp-paper-2);
    color: var(--hp-ink);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.rc-hp main,
.rc-hp main *,
.rc-hp main *::before,
.rc-hp main *::after {
    box-sizing: border-box;
}

.rc-hp main {
    display: block;
}

.rc-hp main img,
.rc-hp main svg {
    max-width: 100%;
}

.rc-hp main h1,
.rc-hp main h2,
.rc-hp main h3,
.rc-hp main p,
.rc-hp main figure,
.rc-hp main blockquote {
    margin: 0;
}

.rc-hp ::selection {
    background: var(--hp-accent-hi);
    color: var(--hp-navy);
}

/* One focus ring for the whole page: thick, offset, and dark on light
   bands / bright on the navy ones. */
.rc-hp main a:focus-visible,
.rc-hp main button:focus-visible {
    outline: 3px solid var(--hp-accent-ink);
    outline-offset: 3px;
    border-radius: 6px;
}

.rc-hp .hp-hero a:focus-visible,
.rc-hp .hp-involve a:focus-visible,
.rc-hp .rc-site-footer a:focus-visible {
    outline: 3px solid var(--hp-accent-hi);
    outline-offset: 3px;
}

.rc-hp .hp-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rc-hp .hp-nobr {
    white-space: nowrap;
}

/* "⇄" falls in Roboto's "math" subset — a separate 40 KB download on the
   critical path for one character. System fonts all draw it, so it is set
   in those instead. The character itself is unchanged. */
.rc-hp .hp-glyph {
    font-family: "Segoe UI Symbol", "Apple Symbols", system-ui, sans-serif !important;
    font-weight: 400;
}

.rc-hp .skip-link:focus {
    z-index: 10001 !important;
}

/* The section bands share one top/bottom rhythm. */
.rc-hp .hp-sec {
    position: relative;
    padding-block: var(--hp-band);
}

.rc-hp .hp-challenge { background: var(--hp-paper-2); }
.rc-hp .hp-approach  { background: var(--hp-paper); }
.rc-hp .hp-eco       { background: var(--hp-paper-2); }
.rc-hp .hp-model     { background: var(--hp-white); }
.rc-hp .hp-impact    { background: var(--hp-paper); }
.rc-hp .hp-stories   { background: var(--hp-paper-2); }

/* The closing band and the shared footer are the same navy; a hairline
   keeps them reading as two things. */
.rc-hp .rc-site-footer {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* footer.php's bottom line is .45 white on navy: 4.48:1, just under AA */
.rc-hp .rc-ftr__sub,
.rc-hp .rc-ftr__sub a {
    color: rgba(255, 255, 255, .62);
}


/* ==========================================================================
   01  SHARED PIECES
   ========================================================================== */

.rc-hp .hp-wrap {
    width: min(100% - 2 * var(--hp-gutter), var(--hp-measure));
    margin-inline: auto;
}

.rc-hp .hp-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(16px, 2vw, 22px);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hp-accent-ink);
}

.rc-hp .hp-eyebrow__num {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--hp-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
}

.rc-hp .hp-eyebrow__num::after {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

.rc-hp .hp-eyebrow--light {
    color: var(--hp-accent-pale);
}

.rc-hp .hp-eyebrow--light .hp-eyebrow__num {
    color: rgba(255, 255, 255, .6);
}

.rc-hp .hp-head--center {
    text-align: center;
}

.rc-hp .hp-head--center .hp-eyebrow {
    justify-content: center;
}

.rc-hp .hp-h2 {
    font-size: clamp(2.05rem, 1.25rem + 3.6vw, 3.9rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--hp-ink);
    text-wrap: balance;
}

.rc-hp .hp-h2__soft {
    font-weight: 300;
    color: var(--hp-soft);
}

.rc-hp .hp-h2--light {
    color: #fff;
}

.rc-hp .hp-h2__accent {
    font-weight: 300;
    color: var(--hp-accent-pale);
}

.rc-hp .hp-lede {
    margin-top: clamp(18px, 2.4vw, 28px);
    max-width: 60ch;
    font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem);
    line-height: 1.65;
    color: var(--hp-body);
    text-wrap: pretty;
}

.rc-hp .hp-lede--light {
    color: rgba(255, 255, 255, .76);
}

.rc-hp .hp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(28px, 3.4vw, 40px);
}

.rc-hp .hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.005em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s var(--hp-ease), border-color .25s var(--hp-ease),
                color .25s var(--hp-ease), transform .25s var(--hp-ease), box-shadow .25s var(--hp-ease);
}

/* Phones: full-width, stacked buttons — one clear target per row. */
@media (max-width: 479px) {
    .rc-hp .hp-actions .hp-btn {
        flex: 1 1 100%;
    }
}

.rc-hp .hp-btn__icon {
    flex-shrink: 0;
    transition: transform .25s var(--hp-ease);
}

.rc-hp .hp-btn:hover .hp-btn__icon {
    transform: translateX(3px);
}

.rc-hp .hp-btn:active {
    transform: translateY(1px) scale(.99);
}

/* Bright accent with dark text: #06B6D4 can't carry white text at AA. */
.rc-hp .hp-btn--primary {
    background: var(--hp-accent-hi);
    color: #04111F;
    box-shadow: 0 10px 28px -12px rgba(34, 211, 238, .65);
}

.rc-hp .hp-btn--primary:hover {
    background: var(--hp-accent-pale);
    color: #04111F;
}

.rc-hp .hp-btn--ghost-light {
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
    background: rgba(255, 255, 255, .02);
}

.rc-hp .hp-btn--ghost-light:hover {
    border-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.rc-hp .hp-link {
    color: var(--hp-accent-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
    text-decoration-color: rgba(14, 116, 144, .4);
    transition: text-decoration-color .2s ease, color .2s ease;
}

.rc-hp .hp-link:hover {
    color: #0B5C73;
    text-decoration-color: currentColor;
}

/* Arrows are drawn, never typed: "→" sits outside Roboto's latin subset and
   would cost the page two extra font downloads. */
.rc-hp .hp-link__arrow {
    display: inline-block;
    margin-left: .3em;
    vertical-align: -.12em;
    transition: transform .25s var(--hp-ease);
}

.rc-hp .hp-link:hover .hp-link__arrow {
    transform: translateX(3px);
}


/* ==========================================================================
   02  HEADER
   The sitewide header (includes/header.php) is used exactly as on every
   other page. The one addition is not visual: the closed burger panel is
   only translated off screen, so its links stayed in the tab order and in
   front of screen readers. Hide it properly until it opens.
   ========================================================================== */

@media (max-width: 960px) {
    .rc-hp .rc-hdr__nav {
        visibility: hidden;
        transition: transform .3s ease, visibility 0s linear .3s;
    }

    .rc-hp .rc-hdr__nav.rc-open {
        visibility: visible;
        transition: transform .3s ease, visibility 0s linear 0s;
    }
}


/* ==========================================================================
   03  HERO
   ========================================================================== */

.rc-hp .hp-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--hp-navy);
    color: #fff;
    padding: clamp(32px, 5vw, 64px) 0 clamp(36px, 5.5vw, 72px);
}

/* A faint dot field and two glows: warm on the human side, cool on the
   machine side. Pure CSS, no image requests. */
.rc-hp .hp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.3px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 75% 85% at 75% 45%, #000 15%, transparent 72%);
    mask-image: radial-gradient(ellipse 75% 85% at 75% 45%, #000 15%, transparent 72%);
}

.rc-hp .hp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(620px 420px at 82% 38%, rgba(34, 211, 238, .14), transparent 70%),
        radial-gradient(520px 380px at 55% 92%, rgba(248, 176, 62, .08), transparent 70%),
        linear-gradient(180deg, var(--hp-navy) 0%, var(--hp-navy-deep) 100%);
}

.rc-hp .hp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

/* Block, not flex: the line has to wrap between words like ordinary text,
   never in front of the dash. */
.rc-hp .hp-hero__eyebrow {
    margin-bottom: clamp(16px, 2.4vw, 26px);
    font-size: clamp(.84rem, .8rem + .2vw, .98rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .78);
}

.rc-hp .hp-hero__eyebrow::before {
    content: "";
    display: inline-block;
    vertical-align: .08em;
    width: 8px;
    height: 8px;
    margin: 0 .7em 0 4px;
    border-radius: 50%;
    background: var(--hp-accent-hi);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .16);
}

.rc-hp .hp-hero__eyebrow-lead {
    font-weight: 700;
    color: #fff;
}

.rc-hp .hp-hero__eyebrow-os {
    white-space: nowrap;
}

.rc-hp .hp-hero__title {
    font-size: clamp(3rem, 1.5rem + 7vw, 6.6rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -.045em;
    white-space: nowrap;
    color: #fff;
}

.rc-hp .hp-hero__statement {
    margin-top: clamp(12px, 1.6vw, 20px);
    font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.65rem);
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
}

.rc-hp .hp-hero__accent {
    font-weight: 500;
    color: var(--hp-accent-pale);
}

.rc-hp .hp-hero__lede {
    margin-top: clamp(18px, 2.4vw, 28px);
    max-width: 34em;
    font-size: clamp(1rem, .96rem + .28vw, 1.15rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .76);
    text-wrap: pretty;
}

.rc-hp .hp-hero__visual {
    margin: clamp(28px, 6vw, 44px) auto 0;
    width: 100%;
    max-width: 620px;
}

.rc-hp .hp-net {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.rc-hp .hp-net__legend text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    fill: rgba(255, 255, 255, .6);
}

.rc-hp .hp-net__legend .hp-net__legend-link {
    font-size: 15px;
    letter-spacing: 0;
    fill: var(--hp-accent-pale);
}

/* motion — every piece of it is turned off in §12 */
.rc-hp .hp-net__halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: hp-breathe 6s ease-in-out infinite;
}

.rc-hp .hp-net__halo--2 { animation-delay: -1.5s; }
.rc-hp .hp-net__halo--3 { animation-delay: -3s; }
.rc-hp .hp-net__halo--4 { animation-delay: -2.2s; animation-duration: 7s; }
.rc-hp .hp-net__halo--5 { animation-delay: -4.4s; animation-duration: 7s; }

/* The Robo Co-op mark at the crossing: still, so the brand never moves —
   it only fades in with the rest of the figure. */
.rc-hp .hp-net__core {
    animation: hp-fade 1s .3s var(--hp-ease) both;
}

.rc-hp .hp-net__flow {
    animation: hp-flow 2.6s linear infinite;
}

.rc-hp .hp-net__flow--back {
    animation-direction: reverse;
}

.rc-hp .hp-net__loops path {
    stroke-dasharray: 1;
    animation: hp-draw 2.2s var(--hp-ease) both;
}

.rc-hp .hp-net__loops path:nth-child(2) { animation-delay: .12s; }
.rc-hp .hp-net__loops path:nth-child(3) { animation-delay: .24s; }
.rc-hp .hp-net__loops path:nth-child(4) { animation-delay: .36s; }
.rc-hp .hp-net__loops path:nth-child(5) { animation-delay: .48s; }

.rc-hp .hp-net__people,
.rc-hp .hp-net__machines,
.rc-hp .hp-net__links,
.rc-hp .hp-net__cross,
.rc-hp .hp-net__pulses {
    animation: hp-fade 1.2s .6s var(--hp-ease) both;
}

.rc-hp .hp-hero.is-paused *,
.rc-hp .hp-hero.is-paused *::before,
.rc-hp .hp-hero.is-paused *::after {
    animation-play-state: paused !important;
}

@keyframes hp-breathe {
    0%, 100% { opacity: .3; transform: scale(.9); }
    50%      { opacity: 1;  transform: scale(1.08); }
}

@keyframes hp-flow {
    to { stroke-dashoffset: -18; }
}

@keyframes hp-draw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}

@keyframes hp-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (min-width: 960px) {
    .rc-hp .hp-hero {
        display: flex;
        align-items: center;
        min-height: min(calc(100svh - 76px), 640px);
    }

    .rc-hp .hp-hero__grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
        gap: clamp(24px, 3vw, 56px);
    }

    .rc-hp .hp-hero__visual {
        margin: 0;
        max-width: none;
    }
}


/* ==========================================================================
   04  CHALLENGE
   ========================================================================== */

.rc-hp .hp-challenge__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 5vw, 56px);
}

.rc-hp .hp-stat {
    padding-top: 22px;
    border-top: 2px solid var(--hp-ink);
}

.rc-hp .hp-stat__value {
    font-size: clamp(3.6rem, 2rem + 6.4vw, 6.75rem);
    font-weight: 200;
    line-height: .9;
    letter-spacing: -.05em;
    color: var(--hp-ink);
    font-variant-numeric: lining-nums;
}

.rc-hp .hp-stat__unit {
    margin-left: .14em;
    font-size: .36em;
    font-weight: 400;
    letter-spacing: -.01em;
}

.rc-hp .hp-stat__label {
    margin-top: 16px;
    max-width: 28ch;
    font-size: clamp(1.05rem, 1rem + .2vw, 1.15rem);
    line-height: 1.5;
    color: var(--hp-body);
}

.rc-hp .hp-stat__src {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--hp-line);
    font-size: .84rem;
    line-height: 1.55;
    color: var(--hp-muted);
}

.rc-hp .hp-stat__src a {
    color: var(--hp-accent-ink);
    font-weight: 600;
    text-underline-offset: .2em;
}

@media (min-width: 900px) {
    .rc-hp .hp-challenge__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        column-gap: clamp(56px, 7vw, 112px);
        align-items: end;
    }

    .rc-hp .hp-stat {
        margin-bottom: 6px;
    }
}


/* ==========================================================================
   05  APPROACH
   ========================================================================== */

.rc-hp .hp-approach__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 56px);
    align-items: center;
}

.rc-hp .hp-weave {
    width: 100%;
    max-width: 560px;
    justify-self: center;
}

.rc-hp .hp-weave__venn {
    position: relative;
}

.rc-hp .hp-weave__svg {
    display: block;
    width: 100%;
    height: auto;
    isolation: isolate;
}

/* Robo Lab multiplies over Co-op Lab, so where they overlap both sets of
   stripes stay visible and cross into a weave. */
.rc-hp .hp-weave__mark--lab {
    mix-blend-mode: multiply;
}

.rc-hp .hp-weave__label {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--hp-paper);
    font-size: clamp(.72rem, .68rem + .25vw, .82rem);
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.rc-hp .hp-weave__label--people {
    left: 21%;
    color: #C8261C;
}

.rc-hp .hp-weave__label--ai {
    left: 79%;
    color: #0069B0;
}

.rc-hp .hp-weave__core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--hp-navy);
    color: #fff;
    font-size: clamp(.78rem, .74rem + .25vw, .9rem);
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .55);
}

.rc-hp .hp-weave__flow {
    --flow-gap: clamp(20px, 4vw, 30px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px var(--flow-gap);
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.rc-hp .hp-weave__flow li {
    position: relative;
    padding: 8px clamp(12px, 2.4vw, 16px);
    border: 1px solid var(--hp-line-2);
    border-radius: 999px;
    background: var(--hp-white);
    font-size: clamp(.82rem, .78rem + .2vw, .9rem);
    font-weight: 600;
    color: var(--hp-ink);
}

.rc-hp .hp-weave__flow li + li::before {
    content: "";
    position: absolute;
    left: calc(var(--flow-gap) / -2);
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%235B6170' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rc-hp .hp-weave__tail {
    margin-top: 14px;
    text-align: center;
    font-size: .95rem;
    color: var(--hp-muted);
}

.rc-hp .hp-signature {
    margin-top: clamp(40px, 5.5vw, 72px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid var(--hp-line-2);
    font-size: clamp(1.75rem, 1rem + 3.3vw, 3.5rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
    color: var(--hp-ink);
    text-wrap: balance;
}

.rc-hp .hp-signature span {
    display: block;
    font-weight: 300;
    color: var(--hp-soft);
}

@media (min-width: 960px) {
    .rc-hp .hp-approach__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(48px, 6vw, 96px);
    }
}


/* ==========================================================================
   06  ECOSYSTEM
   ========================================================================== */

.rc-hp .hp-eco__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: clamp(28px, 3.5vw, 44px) 0 0;
    padding: 0;
    list-style: none;
}

.rc-hp .hp-eco__card {
    --c: #007DD1;
    --c-ink: #0069B0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r-lg);
    background: var(--hp-white);
    box-shadow: var(--hp-sh-1);
    transition: transform .4s var(--hp-ease), box-shadow .4s var(--hp-ease), border-color .4s var(--hp-ease);
}

.rc-hp .hp-eco__card--coop { --c: #FF3F33; --c-ink: #C8261C; }
.rc-hp .hp-eco__card--uni  { --c: #6EC207; --c-ink: #3E7A00; }

.rc-hp .hp-eco__logo {
    display: grid;
    place-items: center;
    padding: clamp(20px, 4vw, 40px) 24px;
    border-bottom: 1px solid var(--hp-line);
    background: #F6F8FA;
    background: color-mix(in srgb, var(--c) 6%, #FFFFFF);
}

.rc-hp .hp-eco__logo img {
    display: block;
    width: clamp(104px, 30vw, 160px);
    height: auto;
    aspect-ratio: 1;
    transition: transform .6s var(--hp-ease);
}

/* The Robo University lockup is a wide mark in the same square artboard,
   so at equal size it reads smaller than the other two. */
.rc-hp .hp-eco__card--uni .hp-eco__logo img {
    width: clamp(140px, 40vw, 190px);
    margin-block: -15px;
}

.rc-hp .hp-eco__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(22px, 2.6vw, 32px);
}

.rc-hp .hp-eco__name {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--c-ink);
}

.rc-hp .hp-eco__link {
    color: inherit;
    text-decoration: none;
}

/* The whole card is the link's hit area. */
.rc-hp .hp-eco__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.rc-hp .hp-eco__link:focus-visible {
    outline: none;
}

.rc-hp .hp-eco__card:focus-within {
    outline: 3px solid var(--c-ink);
    outline-offset: 4px;
}

.rc-hp .hp-eco__card:has(.hp-eco__link:focus:not(:focus-visible)) {
    outline: none;
}

.rc-hp .hp-eco__mode {
    margin-top: 14px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--hp-body);
}

.rc-hp .hp-eco__line {
    margin-top: 6px;
    font-size: clamp(1.4rem, 1.15rem + .9vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--hp-ink);
    text-wrap: balance;
}

.rc-hp .hp-eco__copy {
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hp-body);
}

.rc-hp .hp-eco__go {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 22px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--c-ink);
}

.rc-hp .hp-eco__go svg {
    transition: transform .3s var(--hp-ease);
}

@media (hover: hover) {
    .rc-hp .hp-eco__card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--c) 35%, transparent);
        box-shadow: var(--hp-sh-2);
    }

    .rc-hp .hp-eco__card:hover .hp-eco__logo img {
        transform: scale(1.05);
    }

    .rc-hp .hp-eco__card:hover .hp-eco__go svg {
        transform: translate(2px, -2px);
    }
}

.rc-hp .hp-eco__foot {
    margin: clamp(24px, 3vw, 36px) auto 0;
    max-width: 62ch;
    text-align: center;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--hp-body);
}

/* Tablet: one card per row, logo beside the text. */
@media (min-width: 620px) and (max-width: 959px) {
    .rc-hp .hp-eco__card {
        flex-direction: row;
    }

    .rc-hp .hp-eco__logo {
        flex: 0 0 34%;
        border-bottom: 0;
        border-right: 1px solid var(--hp-line);
    }
}

@media (min-width: 960px) {
    .rc-hp .hp-eco__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}


/* ==========================================================================
   07  MODEL
   ========================================================================== */

.rc-hp .hp-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: clamp(32px, 4vw, 52px) 0 0;
    padding: 0;
    list-style: none;
}

.rc-hp .hp-step {
    position: relative;
    padding: 0 0 34px 68px;
    min-height: 44px;
}

.rc-hp .hp-step:last-child {
    padding-bottom: 0;
}

/* Each step draws the segment of rail that leads to the next node: a grey
   track (::before) and the coloured line over it (::after), which grows in
   one segment after another when the section is revealed. The gradient
   runs gold to cyan across the whole rail, each segment showing its slice.
   (Plain .hp-step selectors on purpose: the 900px block below has to be
   able to override these, so they must not out-rank it.) */
.rc-hp .hp-step::before,
.rc-hp .hp-step::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: 0;
    width: 2px;
    background: var(--hp-line-2);
}

.rc-hp .hp-step::after {
    left: 20.5px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--hp-gold), var(--hp-accent));
    background-size: 100% 300%;
    background-position: 0 calc(var(--i, 0) * 50%);
    transform-origin: 50% 0;
}

/* Drawing. home.js "arms" the timeline (empty line, unlit nodes) and adds
   .is-drawn once half of it is on screen. The segments then grow one after
   another at a constant speed, so they read as a single stroke travelling
   from 01 to 04, and each node lights up the moment the stroke reaches it.
   Segment i starts at .15s + i × .7s and takes .7s. */
.rc-hp .hp-steps.is-armed .hp-step::after {
    transform: scaleY(0);
}

.rc-hp .hp-steps.is-armed.is-drawn .hp-step::after {
    transform: none;
    transition: transform .7s linear calc(.15s + var(--i, 0) * .7s);
}

.rc-hp .hp-steps.is-armed .hp-step__node {
    border-color: var(--hp-line-2);
    background: var(--hp-white);
    color: var(--hp-muted);
}

.rc-hp .hp-steps.is-armed.is-drawn .hp-step__node {
    border-color: var(--hp-navy);
    background: var(--hp-navy);
    color: #fff;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
    transition-delay: calc(.15s + var(--i, 0) * .7s);
    animation: hp-node-pop .45s var(--hp-ease) calc(.15s + var(--i, 0) * .7s) both;
}

@keyframes hp-node-pop {
    0%, 100% { transform: scale(1); }
    45%      { transform: scale(1.14); box-shadow: 0 0 0 7px rgba(6, 182, 212, .18); }
}

.rc-hp .hp-step__node {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 2px solid var(--hp-navy);
    border-radius: 50%;
    background: var(--hp-navy);
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.rc-hp .hp-step__title {
    padding-top: 9px;
    font-size: clamp(1.2rem, 1.1rem + .4vw, 1.35rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--hp-ink);
}

.rc-hp .hp-step__text {
    margin-top: 8px;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hp-body);
}

@media (max-width: 899px) {
    .rc-hp .hp-step:last-child::before,
    .rc-hp .hp-step:last-child::after {
        content: none;
    }
}

@media (min-width: 900px) {
    .rc-hp .hp-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: clamp(20px, 2.6vw, 36px);
    }

    .rc-hp .hp-step {
        padding: 72px 0 0;
    }

    /* horizontal: each segment runs from this node to the next one, across
       the column gap; after the last node a short tail fades out — the
       cycle carries on */
    .rc-hp .hp-step::before,
    .rc-hp .hp-step::after {
        content: "";
        position: absolute;
        left: 44px;
        right: calc(-1 * clamp(20px, 2.6vw, 36px));
        top: 21px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: var(--hp-line-2);
    }

    .rc-hp .hp-step:last-child::before,
    .rc-hp .hp-step:last-child::after {
        right: 35%;
    }

    .rc-hp .hp-step:last-child::before {
        background: linear-gradient(90deg, var(--hp-line-2), transparent);
    }

    .rc-hp .hp-step::after {
        top: 20.5px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--hp-gold), var(--hp-accent));
        background-size: 400% 100%;
        background-position: calc(var(--i, 0) * 33.333%) 0;
        transform-origin: 0 50%;
    }

    .rc-hp .hp-step:last-child::after {
        background: linear-gradient(90deg, var(--hp-accent), transparent);
    }

    .rc-hp .hp-steps.is-armed .hp-step::after {
        transform: scaleX(0);
    }

    .rc-hp .hp-steps.is-armed.is-drawn .hp-step::after {
        transform: none;
    }

    .rc-hp .hp-step__title {
        padding-top: 0;
    }
}

.rc-hp .hp-programmes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: clamp(36px, 4.5vw, 60px);
}

.rc-hp .hp-prog {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    overflow: hidden;
    padding: clamp(26px, 3.2vw, 40px);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    background: var(--hp-paper-2);
}

.rc-hp .hp-prog::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hp-gold), var(--hp-accent));
}

.rc-hp .hp-prog__tag {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hp-muted);
}

.rc-hp .hp-prog__tag b {
    font-weight: 800;
    color: var(--hp-ink);
}

.rc-hp .hp-prog__title {
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--hp-ink);
}

.rc-hp .hp-prog__text {
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--hp-body);
}

.rc-hp .hp-prog .hp-link {
    margin-top: 6px;
}

@media (min-width: 760px) {
    .rc-hp .hp-programmes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}


/* ==========================================================================
   08  IMPACT
   ========================================================================== */

.rc-hp .hp-impact__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 5vw, 56px);
    align-items: end;
}

.rc-hp .hp-photo {
    overflow: hidden;
    border-radius: var(--hp-r);
    background: #E7E4DA;
    box-shadow: var(--hp-sh-1);
}

.rc-hp .hp-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.rc-hp .hp-photo figcaption {
    padding: 12px 16px 14px;
    background: var(--hp-white);
    font-size: .84rem;
    line-height: 1.5;
    color: var(--hp-muted);
}

.rc-hp .hp-impact__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 5vw, 60px);
    margin-top: clamp(36px, 4.5vw, 60px);
}

.rc-hp .hp-subhead {
    margin-bottom: 18px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hp-ink);
}

.rc-hp .hp-subnote {
    margin: -8px 0 18px;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--hp-muted);
}

.rc-hp .hp-awards {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hp-line-2);
}

.rc-hp .hp-award {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 4px 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--hp-line);
}

.rc-hp .hp-award__year {
    grid-row: span 2;
    padding-top: 1px;
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--hp-accent-ink);
}

.rc-hp .hp-award__name {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--hp-ink);
}

.rc-hp .hp-award__by {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--hp-muted);
}

.rc-hp .hp-award__by a {
    color: var(--hp-accent-ink);
    font-weight: 600;
    white-space: nowrap;
    text-underline-offset: .2em;
}

.rc-hp .hp-orgs {
    display: grid;
    gap: 26px;
    margin-top: clamp(36px, 4.5vw, 60px);
}

.rc-hp .hp-award__name--plain {
    font-weight: 500;
}

.rc-hp .hp-orgs__label {
    margin-bottom: 12px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hp-muted);
}

.rc-hp .hp-orgs__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-hp .hp-org {
    display: grid;
    place-items: center;
    height: 76px;
    padding: 14px 18px;
    border: 1px solid var(--hp-line);
    border-radius: 14px;
    background: var(--hp-white);
}

.rc-hp .hp-org img {
    display: block;
    max-width: 76%;
    max-height: 34px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .78;
    transition: filter .3s ease, opacity .3s ease;
}

.rc-hp .hp-org:hover img {
    filter: none;
    opacity: 1;
}

.rc-hp .hp-impact__more {
    margin-top: 22px;
    font-size: .95rem;
}

@media (min-width: 560px) {
    .rc-hp .hp-orgs__row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .rc-hp .hp-impact__top {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        column-gap: clamp(56px, 7vw, 104px);
    }

    .rc-hp .hp-impact__cols {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        column-gap: clamp(56px, 7vw, 104px);
        align-items: start;
    }
}


/* ==========================================================================
   09  STORIES
   ========================================================================== */

.rc-hp .hp-stories__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: clamp(28px, 3.5vw, 44px);
}

.rc-hp .hp-story {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
        "quote quote"
        "photo who";
    gap: 26px 18px;
    align-items: center;
    padding: clamp(26px, 3.4vw, 44px);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r-lg);
    background: var(--hp-white);
    box-shadow: var(--hp-sh-1);
}

.rc-hp .hp-story__portrait {
    grid-area: photo;
    width: 84px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px var(--hp-line-2), 0 0 0 5px var(--hp-white), 0 0 0 6px rgba(248, 176, 62, .55);
}

.rc-hp .hp-story--rozma .hp-story__portrait {
    box-shadow: 0 0 0 1px var(--hp-line-2), 0 0 0 5px var(--hp-white), 0 0 0 6px rgba(6, 182, 212, .55);
}

.rc-hp .hp-story__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rc-hp .hp-story__quote {
    grid-area: quote;
    position: relative;
    padding-top: 34px;
}

.rc-hp .hp-story__quote::before {
    content: "“";
    position: absolute;
    left: -4px;
    top: -18px;
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--hp-gold);
}

.rc-hp .hp-story--rozma .hp-story__quote::before {
    color: var(--hp-accent);
}

.rc-hp .hp-story__quote p {
    font-size: clamp(1.12rem, 1rem + .55vw, 1.4rem);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -.008em;
    color: var(--hp-ink);
    text-wrap: pretty;
}

.rc-hp .hp-story__who {
    grid-area: who;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rc-hp .hp-story__name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--hp-ink);
}

.rc-hp .hp-story__role {
    font-size: .95rem;
    color: var(--hp-body);
}

.rc-hp .hp-story__place {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hp-muted);
}

/* "From the field" slideshow (home.js §4). Slides share one grid cell and
   cross-fade, so the block never changes height. Without JS (no .hp-js on
   <html>) they simply stack and the controls stay hidden. */
.rc-hp .hp-field {
    margin-top: clamp(28px, 3.5vw, 44px);
}

.rc-hp .hp-field__slides {
    display: grid;
    gap: 28px;
}

.rc-hp .hp-field__slide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin: 0;
}

.hp-js .rc-hp .hp-field__slides {
    gap: 0;
}

.hp-js .rc-hp .hp-field__slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}

.hp-js .rc-hp .hp-field__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s ease, visibility 0s linear 0s;
}

.rc-hp .hp-field__photo {
    overflow: hidden;
    border-radius: var(--hp-r-lg);
    background: #E7E4DA;
    box-shadow: var(--hp-sh-1);
}

.rc-hp .hp-field__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.rc-hp .hp-field__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.rc-hp .hp-field__kicker {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hp-accent-ink);
}

.rc-hp .hp-field__title {
    margin-top: 10px;
    font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--hp-ink);
    text-wrap: balance;
}

.rc-hp .hp-field__caption {
    margin-top: 12px;
    max-width: 46ch;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--hp-body);
}

.rc-hp .hp-field__link {
    margin-top: 14px;
}

.rc-hp .hp-field__controls {
    display: none;
}

.hp-js .rc-hp .hp-field__controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.rc-hp .hp-field__toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--hp-line-2);
    border-radius: 50%;
    background: var(--hp-white);
    color: var(--hp-ink);
    cursor: pointer;
    transition: border-color .2s ease;
}

.rc-hp .hp-field__toggle:hover {
    border-color: var(--hp-ink);
}

.rc-hp .hp-field__icon-play,
.rc-hp .hp-field.is-paused .hp-field__icon-pause {
    display: none;
}

.rc-hp .hp-field.is-paused .hp-field__icon-play {
    display: block;
}

.rc-hp .hp-field__dots {
    display: flex;
    gap: 6px;
}

/* A 40 x 32 hit area around a slim bar. The active bar fills over 3s, and
   that fill is the clock: home.js moves on when the animation ends, so a
   pause (hover, focus, off screen, the button) freezes bar and timer together. */
.rc-hp .hp-field__dot {
    display: grid;
    place-items: center;
    width: 40px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.rc-hp .hp-field__bar {
    position: relative;
    display: block;
    width: 32px;
    height: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--hp-line-2);
}

.rc-hp .hp-field__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hp-accent-ink);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.rc-hp .hp-field__dot.is-active .hp-field__bar::after {
    transform: scaleX(1);
}

.rc-hp .hp-field.is-auto .hp-field__dot.is-active .hp-field__bar::after {
    animation: hp-field-clock 3s linear both;
    animation-play-state: paused;
}

.rc-hp .hp-field.is-auto.is-running .hp-field__dot.is-active .hp-field__bar::after {
    animation-play-state: running;
}

@keyframes hp-field-clock {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (min-width: 900px) {
    .rc-hp .hp-field__slide {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: clamp(40px, 5vw, 72px);
    }

    /* the controls sit under the text column */
    .hp-js .rc-hp .hp-field__controls {
        margin-left: calc((100% - clamp(40px, 5vw, 72px)) * 1.1 / 2 + clamp(40px, 5vw, 72px));
    }
}

.rc-hp .hp-stories__more {
    margin-top: clamp(24px, 3vw, 36px);
    font-size: 1rem;
    color: var(--hp-body);
}

@media (min-width: 900px) {
    .rc-hp .hp-stories__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .rc-hp .hp-story {
        grid-template-columns: 128px minmax(0, 1fr);
        grid-template-rows: 1fr auto;
    }

    .rc-hp .hp-story__portrait {
        width: 128px;
    }
}


/* ==========================================================================
   10  GET INVOLVED
   ========================================================================== */

.rc-hp .hp-involve {
    isolation: isolate;
    overflow: hidden;
    background: var(--hp-navy);
    color: #fff;
}

.rc-hp .hp-involve::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.3px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 10%, transparent 70%);
}

.rc-hp .hp-involve::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(680px 380px at 50% -5%, rgba(34, 211, 238, .16), transparent 70%),
        radial-gradient(480px 320px at 90% 100%, rgba(248, 176, 62, .07), transparent 70%);
}

.rc-hp .hp-involve__head {
    max-width: 1000px;
    margin-inline: auto;
    text-align: center;
}

.rc-hp .hp-involve__head .hp-eyebrow,
.rc-hp .hp-involve__head .hp-actions {
    justify-content: center;
}

.rc-hp .hp-involve__head .hp-lede {
    margin-inline: auto;
}

.rc-hp .hp-involve__head .hp-h2__accent {
    display: block;
}

.rc-hp .hp-paths {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: clamp(32px, 4.5vw, 56px) 0 0;
    padding: 0;
    list-style: none;
}

.rc-hp .hp-path {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.8vw, 34px);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: var(--hp-r);
    background: rgba(255, 255, 255, .035);
}

.rc-hp .hp-path__who {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hp-accent-pale);
}

.rc-hp .hp-path__title {
    margin-top: 12px;
    font-size: clamp(1.3rem, 1.15rem + .5vw, 1.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #fff;
}

.rc-hp .hp-path__text {
    margin-top: 10px;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .74);
}

.rc-hp .hp-path__links {
    margin: auto 0 0;
    padding: 22px 0 0;
    list-style: none;
}

.rc-hp .hp-path__links li {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.rc-hp .hp-path__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 12px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: color .2s ease;
}

.rc-hp .hp-path__links a svg {
    flex-shrink: 0;
    color: var(--hp-accent-pale);
    transition: transform .25s var(--hp-ease);
}

.rc-hp .hp-path__links a:hover {
    color: var(--hp-accent-pale);
}

.rc-hp .hp-path__links a:hover svg {
    transform: translateX(3px);
}

@media (min-width: 960px) {
    .rc-hp .hp-paths {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}


/* ==========================================================================
   11  REVEAL
   home.js marks blocks that start below the fold as .is-pending and
   releases them as they scroll in. Blocks already on screen are never
   hidden, and without JS nothing is hidden at all.
   ========================================================================== */

.rc-hp [data-reveal] {
    transition: opacity .8s var(--hp-ease), transform .8s var(--hp-ease);
    transition-delay: calc(var(--d, 0) * 90ms);
}

.rc-hp [data-reveal].is-pending {
    opacity: 0;
    transform: translateY(18px);
}

/* the card lift on hover must not inherit the reveal's delay */
.rc-hp .hp-eco__card[data-reveal]:not(.is-pending) {
    transition: opacity .8s var(--hp-ease), transform .4s var(--hp-ease),
                box-shadow .4s var(--hp-ease), border-color .4s var(--hp-ease);
}


/* ==========================================================================
   12  REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .rc-hp *,
    .rc-hp *::before,
    .rc-hp *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }

    .rc-hp .hp-net__pulses {
        display: none;
    }

    .rc-hp [data-reveal].is-pending {
        opacity: 1;
        transform: none;
    }

    .rc-hp .hp-steps.is-armed .hp-step::after,
    .rc-hp .hp-steps.is-armed .hp-step__node {
        transform: none;
    }
}