/* Finalized roomier school hero. */

.hero-school-v2 .hero-alternative-band { padding-block: calc(var(--navigation-top) + 8px) 112px; }

.hero-school-v2 .hero-alternative-brand-row,
.hero-school-v2 .hero-alternative-inner {
    max-width: 1480px;
    padding-inline: clamp(24px, 5vw, 80px);
}

.hero-school-v2 .hero-alternative-brand-row { margin-bottom: 80px; }
.hero-school-v2 .hero-alternative-brand-slot { height: 96px; }
.hero-school-v2 .hero-alternative-brand-slot .hero-wordmark { width: 360px; }

.hero-school-v2 .hero-alternative-heading {
    max-width: 1120px;
    font-size: clamp(36px, 3.6vw, 56px);
    line-height: 1.12;
}

.hero-school-v2 .hero-alternative-body { margin-top: 32px; }

.hero-school-v2 .hero-alternative-lead {
    max-width: 62ch;
    font-size: clamp(19px, 1.5vw, 23px);
}

.hero-school-v2 .hero-alternative-conversion { margin-top: 40px; gap: 24px; }

.hero-school-v2 .hero-school-art {
    right: max(24px, calc((100% - 1480px) / 2 - 64px));
    bottom: -112px;
    width: min(46vw, 840px);
}

/* Quiet text actions with a translucent white secondary surface. */
.hero-v2-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    max-width: 100%;
}
.hero-v2-primary,
.hero-v2-secondary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 10px;
    padding: 16px 22px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: color 220ms ease;
}
.hero-v2-primary { background: #fff; color: #143c29; }
.hero-v2-primary:is(:hover, :focus-visible) { color: #143c29; }
.hero-v2-secondary {
    padding: 16px 21px;
    background: rgb(255 255 255 / 8%);
    color: #e6f0ea;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background-color 220ms ease, color 220ms ease;
}
.hero-v2-secondary:is(:hover, :focus-visible) { background: rgb(255 255 255 / 13%); color: #fff; }
.hero-v2-primary::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
}
.hero-v2-primary::before { background: #e5f2eb; }
.hero-v2-primary:is(:hover, :focus-visible)::before { opacity: 1; }
.hero-v2-primary:active::before { opacity: .65; }

/* On hover a 2px line traces the button 2px inside its edge, from the bottom centre in both directions until it closes at the top.
   The rect path starts top-left; --outline-start (set by hero-school-v2.js from the button size) is the path position of the bottom centre. */
.hero-v2-outline { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-v2-outline rect { x: 3px; y: 3px; width: calc(100% - 6px); height: calc(100% - 6px); rx: 7px; fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: butt; stroke-dasharray: 0px 100px; stroke-dashoffset: calc(0px - var(--outline-start, 69px)); transition: stroke-dasharray 460ms cubic-bezier(.2, .7, .2, 1), stroke-dashoffset 460ms cubic-bezier(.2, .7, .2, 1); }
:is(.hero-v2-primary, .hero-v2-secondary):is(:hover, :focus-visible) .hero-v2-outline rect { stroke-dasharray: 100px 0px; stroke-dashoffset: calc(50px - var(--outline-start, 69px)); transition-duration: 760ms; }

.hero-school-v2 .hero-v2-conversion { width: fit-content; max-width: 100%; }

/* Permanent trust links: connected municipalities and transport interfaces. */
.hero-trust { width: 500px; max-width: 100%; padding-top: 32px; color: #b5cdbd; line-height: 1.55; }
.hero-trust a:focus-visible { outline: 2px solid #b8deca; outline-offset: 5px; border-radius: 2px; }
.hero-trust ::selection { color: #0a2118; background: #d1e9db; }
.modern-proof-rail {
    --rail-intro-start: 1300ms;
    --rail-combo-ease: cubic-bezier(.22, .68, 0, 1);
    display: grid;
    gap: 8px;
    padding-left: 26px;
    font-size: 16px;
}
.modern-proof-link {
    --rail-row-delay: 0ms;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    max-width: 100%;
    padding-right: 16px;
    color: inherit;
    text-decoration: none;
    transition: color 260ms ease;
}
.modern-proof-link > span { min-width: 0; }
.modern-proof-link:last-child { --rail-row-delay: 560ms; }
.modern-proof-detail { display: block; margin: 0; min-height: 28px; color: #abc5b6; font-size: 15px; line-height: 1.6; }
.modern-proof-rail a:is(:hover, :focus-visible) { color: #eff9f2; text-decoration: none; }
.modern-proof-rail strong { color: #dcebe2; font-weight: 500; transition: color 260ms ease; }
.modern-proof-rail a:is(:hover, :focus-visible) strong { color: #f4fff8; }
.modern-proof-rail .rail-label { position: relative; z-index: 1; display: block; }

.modern-proof-rail .rail-node { display: block; position: absolute; z-index: 2; top: 7px; left: -24px; width: 10px; height: 10px; pointer-events: none; }
.modern-proof-rail .rail-node-disc { display: block; position: relative; width: 100%; height: 100%; border: 1px solid #8eb59b; border-radius: 50%; background: #2f5940; transition: transform 420ms var(--rail-combo-ease), background-color 280ms ease, border-color 280ms ease; }
.modern-proof-rail .rail-node-disc::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; border-radius: 50%; background: #d5f0df; opacity: 0; transform: translate(-50%, -50%); transition: opacity 280ms ease; }
.modern-proof-rail .rail-stem { display: block; position: absolute; z-index: 0; top: 12px; bottom: -20px; left: -19.75px; width: 1.5px; pointer-events: none; }
.modern-proof-rail .rail-stem-track,
.modern-proof-rail .rail-trace { display: block; position: absolute; inset: 0; border-radius: 1px; }
.modern-proof-rail .rail-stem-track { background: #497557; }
.modern-proof-rail .rail-trace { background: #b5ddc3; opacity: 0; transform: scaleY(0); transform-origin: top; transition: transform 560ms var(--rail-combo-ease), opacity 260ms ease; }
.modern-proof-rail .rail-branch,
.modern-proof-rail .rail-entry-branch { display: block; position: absolute; z-index: 0; top: 11.25px; left: -14px; width: 7px; height: 1.5px; border-radius: 1px; background: #b5ddc3; opacity: 0; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.modern-proof-rail .rail-branch { transition: transform 440ms var(--rail-combo-ease), opacity 240ms ease; }
.modern-proof-rail .rail-reveal { display: block; flex: 1; min-width: 0; }
.modern-proof-rail .rail-label { transform-origin: left center; transition: transform 460ms var(--rail-combo-ease); }
.modern-proof-rail:has(a:is(:hover, :focus-visible)) .rail-trace { transform: scaleY(1); opacity: 1; }
.modern-proof-rail a:is(:hover, :focus-visible) .rail-node-disc { transform: scale(1.12); background: #67987a; border-color: #c4e8d0; }
.modern-proof-rail a:is(:hover, :focus-visible) .rail-node-disc::after { opacity: 1; }
.modern-proof-rail a:is(:hover, :focus-visible) .rail-branch { transform: scaleX(1); opacity: 1; }
.modern-proof-rail a:is(:hover, :focus-visible) .rail-label { transform: translateX(6px) scale(1.02); }
.modern-proof-rail a:last-child:is(:hover, :focus-visible) .rail-branch { transition-delay: 80ms; }

/* Start as the final hero movement settles, with the first label following at 1440ms.
   Entrance wrappers and hover children keep their transforms independent. */
@media (prefers-reduced-motion: no-preference) {
    .modern-proof-rail .rail-node { animation: rail-combo-node 380ms var(--rail-combo-ease) calc(var(--rail-intro-start) + var(--rail-row-delay)) both; }
    .modern-proof-rail .rail-stem { animation: rail-combo-stem 500ms var(--rail-combo-ease) calc(var(--rail-intro-start) + 120ms) both; }
    .modern-proof-rail .rail-entry-branch { animation: rail-combo-branch 500ms var(--rail-combo-ease) calc(var(--rail-intro-start) + var(--rail-row-delay) + 70ms) both; }
    .modern-proof-rail .rail-reveal { animation: rail-combo-label 520ms var(--rail-combo-ease) calc(var(--rail-intro-start) + var(--rail-row-delay) + 140ms) both; }
}
@keyframes rail-combo-node {
    from { opacity: 0; transform: scale(.45); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes rail-combo-stem {
    from { opacity: 0; clip-path: inset(0 0 100% 0); }
    to { opacity: 1; clip-path: inset(0); }
}
@keyframes rail-combo-branch {
    0% { opacity: 0; transform: scaleX(0); }
    35% { opacity: .85; transform: scaleX(1); }
    65% { opacity: .65; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
}
@keyframes rail-combo-label {
    from { opacity: 0; filter: blur(2px); transform: translateX(-4px); }
    to { opacity: 1; filter: blur(0); transform: translateX(0); }
}

@media (max-width: 1100px) {
    .hero-school-v2 .hero-alternative-band { padding-block: calc(var(--navigation-top) + 92px) 0; }
    .hero-school-v2 .hero-alternative-brand-row { margin-bottom: 56px; }
    .hero-school-v2 .hero-alternative-brand-slot { height: 96px; }
    .hero-school-v2 .hero-alternative-brand-slot .hero-wordmark { width: 336px; }
    .hero-school-v2 .hero-alternative-heading { max-width: none; font-size: clamp(38px, 4.8vw, 50px); }
    .hero-school-v2 .hero-alternative-lead { max-width: 62ch; }

    .hero-school-v2 .hero-school-art {
        right: auto;
        bottom: -48px;
        width: min(620px, calc(100% - 48px));
        margin: 32px auto 0;
    }
}

@media (max-width: 700px) {
    /* No header bar on phones, so the band only needs its own breathing room. */
    .hero-school-v2 .hero-alternative-band { padding-top: 40px; }
    .hero-school-v2 .hero-alternative-brand-slot { height: 81px; }
    .hero-school-v2 .hero-alternative-brand-slot .hero-wordmark { width: min(310px, calc(100vw - 48px)); }
    .hero-school-v2 .hero-alternative-heading { font-size: clamp(32px, 6.3vw, 42px); }
    .hero-school-v2 .hero-alternative-body { margin-top: 28px; }
    .hero-school-v2 .hero-alternative-lead { font-size: 18px; }
    .hero-school-v2 .hero-alternative-conversion { margin-top: 32px; gap: 20px; }
    .hero-v2-actions { width: 100%; gap: 8px; }
    .hero-v2-actions a { width: 100%; }
    .hero-school-v2 .hero-school-art {
        bottom: -32px;
        width: min(460px, calc(100% - 32px));
        margin-top: 24px;
    }
}

/* Short viewports: give back vertical rhythm so more of the hero lands above the fold,
   without changing its proportions. Keyed on height and never below 701px, so phones and
   tall displays are untouched. */
@media (min-width: 701px) and (max-height: 900px) {
    .hero-school-v2 .hero-alternative-brand-row { margin-bottom: 44px; }
    .hero-school-v2 .hero-alternative-brand-slot { height: 76px; }
    .hero-school-v2 .hero-alternative-brand-slot .hero-wordmark { width: 300px; }
    .hero-school-v2 .hero-alternative-body { margin-top: 24px; }
    .hero-school-v2 .hero-alternative-conversion { margin-top: 28px; gap: 18px; }
    .hero-trust { padding-top: 22px; }
}

@media (min-width: 1101px) and (max-height: 900px) {
    .hero-school-v2 .hero-alternative-band { padding-bottom: 72px; }
}

@media (min-width: 701px) and (max-height: 740px) {
    .hero-school-v2 .hero-alternative-brand-row { margin-bottom: 30px; }
    .hero-school-v2 .hero-alternative-brand-slot { height: 64px; }
    .hero-school-v2 .hero-alternative-brand-slot .hero-wordmark { width: 264px; }
    .hero-school-v2 .hero-alternative-heading { font-size: clamp(30px, 3vw, 44px); }
    .hero-school-v2 .hero-alternative-lead { font-size: clamp(17px, 1.3vw, 20px); }
    .hero-school-v2 .hero-alternative-body { margin-top: 20px; }
    .hero-school-v2 .hero-alternative-conversion { margin-top: 22px; gap: 14px; }
    .hero-trust { padding-top: 18px; font-size: 15px; }
}

@media (min-width: 1101px) and (max-height: 740px) {
    .hero-school-v2 .hero-alternative-band { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-v2-actions a,
    .hero-v2-primary::before,
    .hero-v2-outline rect,
    .modern-proof-rail .modern-proof-link,
    .modern-proof-rail span,
    .modern-proof-rail strong { transition: none; }
    .modern-proof-rail .rail-label,
    .modern-proof-rail .rail-node-disc { transform: none !important; }
    .modern-proof-rail .rail-node-disc::after { transition: none; }
}