@font-face {
    font-family: Bricolage;
    src: url("../fonts/shunifu-home/bricolage-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}
@font-face {
    font-family: Hanken;
    src: url("../fonts/shunifu-home/hanken-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-display: swap;
}
.sh-public {
    --ink: #172644;
    --muted: #475773;
    --blue: #244bb5;
    --line: #cdd5e4;
    --pale: #edf2fa;
    margin: 0;
    color: var(--ink);
    background: #fff;
    font: 18px/1.6 Hanken, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.sh-public * { box-sizing: border-box; }
.sh-public [hidden] { display: none !important; }
.sh-public h1, .sh-public h2, .sh-public h3, .brand {
    font-family: Bricolage, Arial, sans-serif;
    letter-spacing: -0.035em;
    line-height: 1.12;
}
.sh-public h1 { font-size: clamp(40px, 4.35vw, 64px); margin: 0 0 26px; font-weight: 700; }
.sh-public h2 { font-size: clamp(32px, 3.3vw, 48px); margin: 0 0 24px; font-weight: 700; }
.sh-public h3 { font-size: 24px; margin: 0 0 14px; }
.sh-public p { margin: 0 0 20px; }
.sh-public a { color: var(--blue); text-underline-offset: 5px; }
.sh-public a:hover { text-decoration-thickness: 2px; }
.sh-public :focus-visible { outline: 3px solid #b64b00; outline-offset: 5px; }
.wrap { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
.section { padding-block: 90px; }
.site-header-shell { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid #e3e8f0; }
.site-header { position: relative; min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-weight: 800; font-size: 36px; text-decoration: none; color: var(--ink) !important; white-space: nowrap; }
.brand span { color: var(--blue); }
.header-enquiry { display: none; }
.site-header nav { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 600; }
.site-header nav > a:not(.button) { text-decoration: none; color: var(--ink); padding: 10px 0; }
.nav-group > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; list-style: none; cursor: pointer; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
.nav-group[open] > summary { color: var(--blue); }
.nav-group[open] .nav-chevron { transform: rotate(225deg); margin-top: 4px; }
.nav-panel { position: absolute; top: 100%; left: 0; width: 100%; display: grid; gap: 28px; background: #fff; padding: 32px; border: 1px solid var(--line); border-top: 4px solid var(--blue); box-shadow: 0 20px 38px #1726441f; font-weight: 400; }
.nav-platform { grid-template-columns: 1.1fr 1fr 1fr 1fr; }
.nav-people { grid-template-columns: 1fr 2fr; }
.nav-resources { grid-template-columns: 1.2fr 1fr 1fr; }
.nav-managed { grid-template-columns: 1fr 3fr; }
.nav-managed-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 28px; align-content: start; }
.nav-description { display: block; color: var(--muted); font-size: 14px; margin-top: 5px; }
.sh-public .nav-panel h2 { font: 700 16px/1.4 Hanken, Arial, sans-serif; letter-spacing: 0; color: var(--muted); margin: 0 0 8px; }
.nav-panel a { display: block; min-height: 44px; padding: 11px 8px; color: var(--ink); text-decoration: none; line-height: 1.4; font-size: 16px; }
.nav-panel a:hover { background: var(--pale); color: var(--blue); }
.nav-introduction { padding-right: 24px; border-right: 1px solid var(--line); }
.nav-introduction strong { display: block; font: 700 28px/1.12 Bricolage, Arial, sans-serif; letter-spacing: -0.035em; }
.nav-introduction p { font-size: 15px; color: var(--muted); margin: 14px 0; }
.nav-introduction a { font-weight: 700; color: var(--blue); padding-left: 0; }
.nav-role-links { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; align-content: start; }
.sh-public [id] { scroll-margin-top: 118px; }
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 18px;
    background: var(--blue); color: #fff !important; text-decoration: none;
    padding: 16px 24px; border: 1px solid var(--blue); border-radius: 4px;
    font: 700 17px/1.35 Hanken, Arial, sans-serif; min-height: 52px; cursor: pointer;
}
.button:hover { background: #193887; text-decoration: underline; }
.button.small { font-size: 15px; padding: 13px 17px; min-height: 48px; }
.button:disabled { cursor: wait; background: var(--muted); border-color: var(--muted); }
.button-light { background: #fff; color: var(--ink) !important; border-color: #fff; }
.button-light:hover { background: #edf2fa; }
.menu-toggle { font: 600 16px Hanken, Arial, sans-serif; background: #fff; border: 1px solid var(--line); padding: 10px 14px; min-height: 44px; border-radius: 4px; color: var(--ink); }
.skip-link { position: absolute; top: 8px; left: 8px; transform: translateY(-160%); z-index: 50; background: #fff; padding: 12px; }
.skip-link:focus { transform: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; }
.text-link { font-weight: 700; display: inline-flex; gap: 14px; align-items: center; min-height: 44px; }
/* The original opening and product frame form one continuous composition. */
.original-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ink);
    color: #fff;
    padding: 84px 0 190px;
}
.hero-film {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}
.hero-film-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Keep white copy readable while showing the full header footage. */
    background: rgba(9, 18, 43, 0.7);
}
.hero-film-toggle {
    position: absolute;
    top: 20px;
    right: max(20px, calc((100vw - 1240px) / 2));
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 48px;
    padding: 12px 18px;
    border: 1px solid #c9d4e9;
    border-radius: 4px;
    background: var(--ink);
    color: #fff;
    font: 700 14px/1.4 Hanken, Arial, sans-serif;
    cursor: pointer;
}
.hero-film-toggle:hover { background: var(--blue); }
.original-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
}
.original-hero h1 {
    font-size: clamp(44px, 5.15vw, 74px);
    line-height: 1.08;
    max-width: 860px;
    margin-inline: auto;
}
.original-hero-copy > p {
    max-width: 680px;
    margin-inline: auto;
    color: #dce4f3;
    font-size: 21px;
}
.hero-proof { display: inline-flex; align-items: center; justify-content: center; gap: 12px; color: #fff !important; font-size: 15px; line-height: 1.4; min-height: 44px; margin-top: 22px; text-underline-offset: 5px; }
.original-hero .hero-note {
    font-size: 15px;
    max-width: 640px;
    margin: 24px auto 0;
    color: #c9d4e9;
}
.original-hero :focus-visible,
.school-roles :focus-visible,
.closing-enquiry :focus-visible { outline-color: #fff; }
.original-product {
    position: relative;
    z-index: 1;
    margin-top: -120px;
    padding-bottom: 48px;
}
.original-product .wrap { max-width: 1100px; }
.original-product figure { margin: 0; }
.browser-frame {
    background: #fff;
    border: 1px solid #c8d1e1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 58px -25px #17264466;
}
.browser-frame-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-height: 43px;
    padding: 9px 17px;
    background: #edf1f7;
    border-bottom: 1px solid #d8dfeb;
    font-size: 13px;
    color: var(--muted);
}
.browser-frame-bar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #91a1ba;
    flex-shrink: 0;
}
.browser-frame-bar span { margin-left: 11px; overflow-wrap: anywhere; }
.browser-frame > img, .browser-frame > a > img {
    display: block;
    width: 100%;
    height: auto;
}
.browser-frame > a { display: block; }
.browser-frame > a:focus-visible { outline-color: var(--blue); outline-offset: -5px; }
.original-product figcaption,
.original-product .product-caption {
    max-width: 810px;
    margin: 22px auto 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}
.original-product figcaption a { display: inline-block; min-height: 30px; }
.school-entry { border-block: 1px solid var(--line); background: #f7f8fb; }
.school-entry .wrap {
    display: flex;
    justify-content: center;
    gap: 24px;
    align-items: center;
    padding-block: 16px;
    font-size: 16px;
}
.school-entry p { margin: 0; }
.school-entry a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 44px;
    font-weight: 700;
}
.institution-users .section-heading { max-width: 900px; }
.institution-users .section-label { text-align: center; font-size: 16px; }
.institution-motion-control { display: flex; justify-content: flex-end; }
.logo-motion-toggle { min-height: 44px; padding: 8px 15px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 14px; cursor: pointer; }
.institution-logo-window { margin-top: 24px; }
.institution-logo-group { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 0; }
.institution-logo-group li { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ink); }
.institution-logo-group img { width: 72px; height: 72px; object-fit: contain; }
.institution-logo-window.is-moving-list { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #a8b5c9 transparent; padding-block: 12px; }
.is-moving-list .institution-logo-track { display: flex; width: max-content; }
.is-moving-list .institution-logo-group { display: flex; gap: 32px; padding-right: 32px; flex-shrink: 0; }
.is-moving-list .institution-logo-group li { flex: 0 0 160px; width: 160px; }
.institution-list-link { margin-top: 30px; text-align: center; }
.institution-story { background: var(--pale); color: var(--ink); border-block: 1px solid var(--line); }
.accomplishments-wrap { max-width: 1000px; }
.accomplishments-header { border-bottom: 2px solid var(--blue); padding-bottom: 24px; margin-bottom: 32px; }
.accomplishments-header h2 { margin: 0; }
.institution-stack { margin: 0; }
.institution-story p { max-width: 72ch; color: var(--muted); font-size: 18px; }
.institution-story a { color: var(--blue); }
.cbe-story h3 { max-width: 32ch; font-size: clamp(28px, 2.5vw, 36px); line-height: 1.2; margin-bottom: 20px; text-wrap: balance; }
.cbe-story p { margin-bottom: 0; }
.institution-evidence, .institution-press { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 32px; }
.institution-evidence h3, .institution-press h3 { font-size: 28px; line-height: 1.25; }
.institution-story .institution-note { margin-bottom: 0; }
.institution-sources { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 32px; margin-top: 16px; }
.institution-sources .text-link { min-height: 44px; font-size: 16px; }
.institution-press .press-title { font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.institution-press .press-meta { font-size: 16px; margin-bottom: 0; }
.accomplishments-row { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 28px; }
.accomplishments-row h3 { display: flex; align-items: center; justify-content: space-between; gap: 28px; font-size: 27px; line-height: 1.25; margin: 0; }
.accomplishments-row .award-title { max-width: 360px; }
.accomplishments-row .award-prize { color: var(--blue); font-size: clamp(40px, 4vw, 60px); line-height: 1.1; white-space: nowrap; }
.institution-story .accomplishments-action { margin: 32px 0 0; }
.accomplishments-action a { font-size: 16px; }
.testimonial-wrap { max-width: 1000px; }
.testimonial-wrap > h2 { font-size: 36px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 32px; }
.testimonial-feature { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px 40px; margin: 0; }
.testimonial-school { grid-row: span 2; }
.testimonial-school img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 16px; }
.testimonial-school .testimonial-school-name { font: 600 20px/1.35 Hanken, Arial, sans-serif; letter-spacing: 0; margin-bottom: 8px; }
.testimonial-school .testimonial-school-type { color: var(--muted); font-size: 15px; margin: 0; }
.testimonial-feature blockquote { margin: 0; }
.testimonial-feature blockquote p { max-width: 65ch; font: 400 22px/1.6 Hanken, Arial, sans-serif; letter-spacing: 0; margin: 0; }
.testimonial-feature figcaption { grid-column: 2; font-size: 16px; }
.testimonial-feature figcaption p { margin-bottom: 10px; font-weight: 600; line-height: 1.5; }
.testimonial-feature figcaption a { font-size: 16px; }
.platform-intro { text-align: center; }
.platform-intro > h2, .platform-intro .platform-copy h2 {
    max-width: 780px;
    margin-inline: auto;
}
.platform-intro > p, .platform-intro .platform-copy > p {
    max-width: 780px;
    margin-inline: auto;
    font-size: 20px;
    color: var(--muted);
}
.platform-intro .platform-copy { margin-inline: auto; }
.original-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px;
    margin-top: 54px;
    text-align: left;
}
.original-pillars article {
    border-top: 3px solid var(--blue);
    padding-top: 24px;
}
.original-pillars .pillar-label,
.original-pillars article > p:first-child {
    color: var(--blue);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
}
.original-pillars h3 { font-size: 28px; margin-bottom: 18px; }
.original-pillars article > p:not(:first-child) {
    font-size: 17px;
    line-height: 1.65;
    color: var(--muted);
}
.section-heading {
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}
.section-heading > p {
    max-width: 720px;
    margin-inline: auto;
    color: var(--muted);
    font-size: 19px;
}
.section-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 14px !important;
}
.module-map-section { border-top: 1px solid #e1e6ef; }
.module-core {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 42px auto 42px;
    width: fit-content;
    padding: 13px 28px;
    border-radius: 6px;
    background: var(--ink);
    color: #fff;
    font: 700 23px/1.3 Bricolage, Arial, sans-serif;
}
.module-core::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    height: 22px;
    border-left: 1px solid #a8b7d0;
}
.module-network {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
    align-items: start;
}
.module-network::before {
    content: "";
    position: absolute;
    top: -20px;
    left: calc((100% - 68px) / 6);
    right: calc((100% - 68px) / 6);
    border-top: 1px solid #a8b7d0;
}
.module-column {
    position: relative;
    min-width: 0;
    background: #f5f7fb;
    padding: 27px 26px 16px;
    border-top: 3px solid var(--blue);
}
.module-column::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -23px;
    height: 20px;
    border-left: 1px solid #a8b7d0;
}
.module-column h3 { font-size: 24px; margin-bottom: 19px; }
.module-column > p { font-size: 15px; color: var(--muted); }
.module-column ul { list-style: none; padding: 0; margin: 0; }
.module-column li { margin: 0; }
.module-column a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 54px;
    padding: 13px 0;
    border-top: 1px solid #d7dfec;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.module-column a:hover { color: var(--blue); text-decoration: underline; }
.module-column a small { color: var(--muted); font-weight: 400; font-size: 13px; }
.module-map-section > .wrap > .text-link { display: flex; width: fit-content; margin: 30px auto 0; }
.capability-section { background: #f5f7fb; }
.capability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 70px;
    max-width: 1100px;
    margin: 42px auto 0;
}
.capability-grid article { border-top: 1px solid #c5cfdf; padding-top: 24px; }
.capability-grid h3 { font-size: 26px; }
.capability-grid p { color: var(--muted); font-size: 17px; }
.configuration-note { max-width: 780px; text-align: center; margin: 32px auto 0 !important; font-size: 15px; color: var(--muted); }
.data-access > .text-link { display: flex; width: fit-content; margin: 30px auto 0; }
.practical-work { max-width: 1100px; }
.practical-work > div:first-child { max-width: 800px; margin: 0 auto 40px; text-align: center; }
.practical-work > div:first-child > p { color: var(--muted); font-size: 19px; }
.work-comparison article { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 44px; padding-block: 25px; border-top: 1px solid var(--line); }
.work-comparison article:last-child { border-bottom: 1px solid var(--line); }
.work-comparison h3 { font-size: 25px; margin: 0; }
.work-comparison p { color: var(--muted); font-size: 17px; margin: 0; }
.school-roles { background: var(--ink); color: #fff; }
.role-intro {
    max-width: 820px;
    margin: 0 auto 50px;
    text-align: center;
}
.role-intro h2 { font-size: clamp(38px, 4vw, 56px); }
.role-intro > p { max-width: 660px; margin-inline: auto; color: #dce4f3; font-size: 20px; }
.school-roles .section-label { color: #b9cdff; }
.role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 72px;
    max-width: 1080px;
    margin-inline: auto;
}
.role-grid article { padding-top: 24px; border-top: 1px solid #ffffff40; }
.role-grid h3 { font-size: 26px; }
.role-grid p { color: #dce4f3; font-size: 17px; margin: 0; }
.getting-started { background: #edf2fa; }
.start-title { max-width: 780px; margin: 0 auto 54px; text-align: center; }
.start-title > p { max-width: 680px; margin-inline: auto; color: var(--muted); font-size: 19px; }
.start-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 90px;
    align-items: start;
    max-width: 1100px;
    margin-inline: auto;
}
.start-copy > p { max-width: 430px; color: var(--muted); }
.start-copy .button { margin-top: 12px; }
.start-grid > div > .button { margin-top: 30px; }
.steps { list-style: none; padding: 0; margin: 0; }
.steps li {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 22px;
    padding: 0 0 34px;
    margin: 0;
}
.steps .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
    font: 700 24px/1 Bricolage, Arial, sans-serif;
    z-index: 1;
}
.steps li::after {
    content: "";
    position: absolute;
    left: 24px;
    top: 48px;
    bottom: 0;
    border-left: 1px solid #b6c6e3;
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 26px; margin: 9px 0 10px; }
.steps p { color: var(--muted); margin: 0; font-size: 17px; }
.onboarding-media { margin: 0; min-width: 0; max-width: 430px; }
.school-film {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 9px;
    border: 1px solid #c5cfdf;
    background: #e4eaf5;
}
.onboarding-media figcaption { margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.faq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 105px; }
.faq-grid > div > p { font-size: 17px; color: var(--muted); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-size: 18px; font-weight: 700; cursor: pointer; padding: 22px 40px 22px 0; position: relative; list-style: none; min-height: 64px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 27px; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details > p { color: var(--muted); font-size: 17px; padding-bottom: 22px; margin: 0; }
.closing-enquiry { background: var(--ink); color: #fff; padding-block: 80px; text-align: center; }
.closing-enquiry > .wrap { max-width: 820px; }
.closing-enquiry h2 { font-size: clamp(40px, 4.4vw, 62px); margin-bottom: 22px; }
.closing-enquiry p { color: #e6edff; max-width: 680px; font-size: 20px; margin: 0 auto; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; margin-top: 30px; }
.closing-actions .text-link { color: #fff; font-size: 17px; }
.closing-enquiry .button { border-color: #a8bcff; }
.site-footer-shell { background: #f3f6fb; border-top: 1px solid var(--line); }
.site-footer { display: grid; grid-template-columns: 1.15fr 1fr 1.1fr 0.75fr; gap: 42px; padding-block: 64px 28px; font-size: 15px; }
.site-footer p { margin: 12px 0 0; color: var(--muted); }
.sh-public .site-footer h2 { font: 700 17px/1.4 Hanken, Arial, sans-serif; letter-spacing: 0; margin-bottom: 12px; }
.site-footer nav, .footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.site-footer a:not(.brand) { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); }
.footer-brand > p { max-width: 240px; margin: 18px 0 16px; }
.footer-contact p { margin: 9px 0 12px; max-width: 240px; }
.site-footer .footer-social { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 28px; }
.sh-public .footer-social h2 { margin: 0 12px 0 0; }
.footer-social img { object-fit: contain; }
.footer-bottom { grid-column: 1/-1; border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 13px; }
.footer-bottom > p { margin: 0; }
.footer-bottom > div { display: flex; flex-wrap: wrap; gap: 28px; }
.media-section { background: var(--pale); }
.media-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 42px; }
.media-heading > div { max-width: 740px; }
.media-heading p { color: var(--muted); margin-bottom: 0; }
.media-heading > a { flex-shrink: 0; }
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.youtube-player { position: relative; aspect-ratio: 16/9; background: var(--ink); overflow: hidden; margin-bottom: 24px; border: 1px solid #aebbd2; }
.youtube-player > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.youtube-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-recovery-notice { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(9,18,43,0.8); padding: 12px; }
.video-recovery-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sh-public .video-recovery-notice p { color: #fff; font-size: 17px; margin: 0; text-align: center; }
.video-recovery, .video-recovery-retry { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 14px; color: #fff !important; background: var(--blue); border: 1px solid #fff; font: 700 16px/1.4 Hanken, Arial, sans-serif; cursor: pointer; }
.video-recovery:focus-visible, .video-recovery-retry:focus-visible { outline-color: #fff; }
.youtube-play { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(transparent 35%, rgba(9,18,43,0.9)); color: #fff; font: 700 17px/1.4 Hanken, Arial, sans-serif; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.youtube-play:hover .play-symbol { background: #193887; }
.youtube-play:focus-visible { outline-color: #fff; outline-offset: -6px; }
.play-symbol { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--blue); border: 2px solid #fff; box-shadow: 0 2px 14px #09122b44; }
.play-symbol::before { content: ''; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid #fff; margin-left: 4px; }
.youtube-play > span:last-child { padding: 8px 14px; background: var(--ink); border: 1px solid #ffffff70; border-radius: 3px; }
.media-grid h3 { font-size: 26px; }
.media-grid p { color: var(--muted); font-size: 17px; margin-bottom: 12px; }
.media-grid .text-link { font-size: 16px; }
.media-interview { display: flex; gap: 24px; align-items: center; border-top: 1px solid #bdc8dd; padding-top: 24px; margin-top: 36px; font-size: 16px; }
.media-interview p { margin: 0; color: var(--muted); }
.media-interview a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* The enquiry page shares the brand, navigation and form states. */
.contact-intro { background: var(--pale); padding-block: 48px; border-block: 1px solid var(--line); }
.contact-intro h1 { margin-top: 0; }
.contact-intro p { max-width: 650px; color: var(--muted); }
.contact-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 80px; }
.contact-form h2 { font-size: 30px; }
.form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field.full { grid-column: 1/-1; }
.field label { display: block; font-size: 16px; font-weight: 700; margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; border: 1px solid #7c8ba3; background: #fff; color: var(--ink); border-radius: 4px; padding: 12px; font: 17px Hanken, Arial, sans-serif; }
.field textarea { resize: vertical; min-height: 120px; }
.field [aria-invalid="true"] { border: 2px solid #a42121; }
.field-error { font-size: 15px; color: #a42121; margin-top: 6px !important; }
.contact-form .button { margin-top: 26px; }
.form-status:not(:empty) { margin-top: 24px; padding: 18px; border: 1px solid var(--line); background: var(--pale); font-size: 17px; }
.form-status[data-state="error"] { border-color: #a42121; background: #fff2f2; color: #801b1b; }
.contact-aside { border-top: 1px solid var(--line); padding-top: 24px; }
.contact-aside h3 { margin-top: 32px; }
.contact-aside h3:first-child { margin-top: 0; }
.contact-aside a { display: inline-flex; min-height: 44px; align-items: center; overflow-wrap: anywhere; }
.contact-aside p { color: var(--muted); font-size: 17px; }
.contact-form > p { color: var(--muted); font-size: 16px; }
.no-script { border: 1px solid var(--line); padding: 16px; font-size: 16px; }


@media (max-width: 1100px) {
    .site-header nav { gap: 20px; }
    .original-pillars { gap: 30px; }
    .original-pillars h3 { font-size: 25px; }
    .module-network { gap: 24px; }
    .module-network::before { left: calc((100% - 48px) / 6); right: calc((100% - 48px) / 6); }
    .module-column { padding-inline: 21px; }
    .module-column h3 { font-size: 22px; }
    .capability-grid { gap: 20px 44px; }
    .role-grid { gap: 32px 44px; }
    .start-grid, .faq-grid, .contact-grid { gap: 44px; }
}
@media (max-width: 1200px) {
    .site-header-shell { position: relative; }
    .site-header { min-height: 80px; flex-wrap: wrap; padding-block: 18px; }
    .site-header nav { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; }
    .nav-group { border-bottom: 1px solid var(--line); }
    .nav-group > summary { padding: 12px 4px; justify-content: space-between; }
    .nav-panel { position: static; display: grid; grid-template-columns: 1fr; padding: 12px 16px 20px; gap: 20px; box-shadow: none; border: 0; border-left: 3px solid var(--blue); }
    .nav-introduction { border-right: 0; padding-right: 0; }
    .nav-introduction strong { font-size: 24px; }
    .nav-role-links { grid-template-columns: 1fr; gap: 0; }
    .nav-managed-links { grid-template-columns: 1fr; gap: 0; }
    .site-header nav > a:not(.button) { min-height: 44px; padding: 10px 4px; }
    .sh-public [id] { scroll-margin-top: 24px; }
    .media-heading { flex-direction: column; align-items: flex-start; gap: 16px; }
    .media-grid { gap: 30px; }
    .site-footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .wrap { width: calc(100% - 48px); }
    .site-header { min-height: 80px; flex-wrap: wrap; padding-block: 18px; }
    .site-header nav { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; }
    .site-header nav > a:not(.button) { min-height: 44px; padding: 10px 4px; }
    .section { padding-block: 64px; }
    .testimonial-wrap > h2 { font-size: 32px; margin-bottom: 28px; }
    .testimonial-feature { grid-template-columns: 1fr; }
    .testimonial-school { grid-row: auto; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 4px 18px; }
    .testimonial-school img { grid-row: span 2; margin: 0; }
    .testimonial-school .testimonial-school-name { font-size: 19px; margin: 0; }
    .testimonial-feature blockquote p { font-size: 20px; }
    .testimonial-feature figcaption { grid-column: 1; font-size: 15px; }
    .original-hero { padding: 80px 0 150px; }
    .hero-film-toggle { right: 24px; top: 14px; }
    .original-hero h1 { font-size: 58px; }
    .original-hero-copy > p { font-size: 20px; }
    .original-product { margin-top: -90px; padding-bottom: 38px; }
    .platform-intro > p, .platform-intro .platform-copy > p { font-size: 19px; }
    .original-pillars { gap: 25px; margin-top: 40px; }
    .original-pillars h3 { font-size: 24px; }
    .original-pillars article > p:not(:first-child) { font-size: 16px; }
    .module-network { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; gap: 26px; }
    .module-core::after, .module-network::before, .module-column::before { display: none; }
    .module-core { margin: 32px auto; }
    .module-column { padding: 26px 28px 12px; }
    .module-column h3 { font-size: 26px; }
    .module-column a { min-height: 54px; font-size: 17px; }
    .role-intro { margin-bottom: 38px; }
    .start-grid { gap: 42px; grid-template-columns: 1fr 0.8fr; }
    .faq-grid, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .site-footer { grid-template-columns: 1fr 1fr; }
    .contact-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
    .contact-aside h3 { margin-top: 0; }
}
@media (max-width: 600px) {
    .sh-public { font-size: 17px; }
    .wrap { width: calc(100% - 36px); }
    .brand { font-size: 31px; }
    .sh-public h2 { font-size: 34px; }
    .sh-public h3 { font-size: 24px; }
    .sh-public h1, .sh-public h2, .sh-public h3 { overflow-wrap: anywhere; }
    .section { padding-block: 48px; }
    .original-hero { padding: 82px 0 126px; }
    .hero-film-toggle { top: 15px; right: 18px; padding: 10px 14px; font-size: 13px; }
    .original-hero h1 { font-size: clamp(37px, 10.3vw, 48px); margin-bottom: 24px; }
    .original-hero-copy > p { font-size: 18px; line-height: 1.65; }
    .original-hero .hero-note { font-size: 14px; margin-top: 18px; }
    .original-product { margin-top: -76px; padding-bottom: 28px; }
    .browser-frame { border-radius: 7px; }
    .browser-frame-bar { font-size: 11px; min-height: 34px; padding: 8px 10px; gap: 5px; }
    .browser-frame-bar i { width: 6px; height: 6px; }
    .browser-frame-bar span { margin-left: 6px; }
    .original-product figcaption, .original-product .product-caption { margin-top: 15px; font-size: 13px; text-align: left; }
    .school-entry .wrap { display: block; padding-block: 15px; font-size: 15px; }
    .school-entry a { gap: 12px; }
    .institution-evidence h3, .institution-press h3 { font-size: 25px; }
    .institution-logo-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .institution-logo-group li { font-size: 13px; gap: 12px; }
    .institution-logo-group img { width: 56px; height: 56px; }
    .is-moving-list .institution-logo-group { gap: 24px; padding-right: 24px; }
    .is-moving-list .institution-logo-group li { flex-basis: 132px; width: 132px; }
    .accomplishments-header { padding-bottom: 20px; margin-bottom: 28px; }
    .institution-evidence, .institution-press { margin-top: 28px; padding-top: 28px; }
    .institution-sources { flex-direction: column; gap: 8px; }
    .accomplishments-row h3 { flex-direction: column; align-items: flex-start; gap: 16px; }
    .testimonial-wrap > h2 { font-size: 30px; margin-bottom: 24px; }
    .platform-intro > p, .platform-intro .platform-copy > p { font-size: 18px; text-align: left; }
    .original-pillars { grid-template-columns: 1fr; gap: 25px; margin-top: 34px; }
    .original-pillars article { padding-top: 22px; }
    .original-pillars h3 { font-size: 27px; }
    .original-pillars article > p:not(:first-child) { font-size: 17px; }
    .section-heading > p { font-size: 18px; text-align: left; }
    .module-core { font-size: 22px; }
    .module-column { padding: 24px 20px 10px; }
    .module-column h3 { font-size: 24px; }
    .module-column a { gap: 8px; font-size: 16px; }
    .module-column a small { font-size: 12px; }
    .capability-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 30px; }
    .capability-grid article { padding-top: 22px; }
    .role-intro { margin-bottom: 30px; }
    .role-intro h2 { font-size: 38px; }
    .role-intro > p { font-size: 18px; }
    .role-grid { grid-template-columns: 1fr; gap: 27px; }
    .role-grid article { padding-top: 20px; }
    .role-grid h3 { margin-bottom: 12px; }
    .work-comparison article { grid-template-columns: 1fr; gap: 12px; padding-block: 22px; }
    .practical-work > div:first-child > p { text-align: left; font-size: 18px; }
    .start-title { margin-bottom: 32px; }
    .start-title > p { font-size: 18px; }
    .start-grid { grid-template-columns: 1fr; gap: 32px; }
    .steps li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding-bottom: 28px; }
    .steps .step-number { width: 40px; height: 40px; font-size: 22px; }
    .steps li::after { left: 20px; top: 40px; }
    .steps h3 { margin-top: 7px; }
    .onboarding-media { width: min(100%, 390px); margin-inline: auto; }
    .faq-grid { gap: 25px; }
    .faq summary { font-size: 17px; padding-block: 20px; }
    .closing-enquiry { padding-block: 48px; }
    .closing-enquiry h2 { font-size: 42px; }
    .closing-enquiry p { font-size: 18px; }
    .closing-actions { flex-direction: column; align-items: stretch; gap: 15px; margin-top: 25px; }
    .closing-actions .button { width: 100%; }
    .closing-actions .text-link { align-self: center; overflow-wrap: anywhere; }
    .site-footer { grid-template-columns: 1fr; gap: 24px; padding-block: 36px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .footer-bottom > div { flex-direction: column; gap: 4px; }
    .media-grid { grid-template-columns: 1fr; gap: 32px; }
    .media-heading { margin-bottom: 28px; }
    .media-grid h3 { font-size: 25px; }
    .media-interview { display: block; margin-top: 28px; }
    .hero-proof { font-size: 13px; margin-top: 14px; }
    .site-footer nav a { min-height: 44px; }
    .contact-intro { padding-block: 32px; }
    .contact-intro h1 { font-size: 40px; }
    .form-fields, .contact-aside { grid-template-columns: 1fr; }
    .contact-form .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sh-public *, .sh-public *:before, .sh-public *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Homepage composition; contact and the legacy marketing pages keep their own styles. */
body.home-aligned { font-size: 18px; }
/* Keep standalone home links easy to tap without changing the wordmark size. */
body.home-aligned .brand { display: inline-flex; align-items: center; min-height: 44px; }
body.home-aligned .site-footer nav a { min-width: 44px; }
@media (min-width: 601px) and (max-width: 900px) {
    body.home-aligned .institution-logo-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.home-aligned .wrap:not(.site-header) { width: min(1200px, calc(100% - 80px)); }
body.home-aligned h2, body.home-aligned h3, body.home-aligned h4, body.home-aligned h5 {
    font-family: Hanken, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
body.home-aligned h2 { font-size: 38px; }
body.home-aligned h3 { font-size: 27px; }
body.home-aligned h4 { font-size: 23px; margin: 0 0 14px; }
body.home-aligned h5 { font-size: 21px; margin: 0 0 10px; }
body.home-aligned [id] { scroll-margin-top: 96px; }
body.home-aligned .original-hero { min-height: 640px; padding: 112px 0 128px; }
body.home-aligned .original-hero-copy { max-width: 1200px; text-align: left; }
body.home-aligned .original-hero h1 {
    max-width: 640px;
    font-size: clamp(52px, 5vw, 70px);
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 26px;
}
body.home-aligned .original-hero-copy > p { max-width: 560px; margin-inline: 0; font-size: 20px; line-height: 1.6; }
body.home-aligned .original-hero .hero-note { margin: 22px 0 0; font-size: 15px; }
body.home-aligned .platform-intro { padding-block: 0 88px; text-align: left; }
body.home-aligned .platform-overview { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
body.home-aligned .platform-copy { padding-top: 64px; margin: 0; }
body.home-aligned .platform-copy h2 { margin: 0 0 24px; }
body.home-aligned .platform-copy > p { font-size: 18px; line-height: 1.65; margin: 0; max-width: 65ch; color: var(--muted); }
body.home-aligned .original-product { margin-top: -48px; padding-bottom: 0; }
body.home-aligned .opening-enquiry { border-bottom: 1px solid var(--line); background: #fff; padding-block: 18px; }
body.home-aligned .opening-enquiry > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
body.home-aligned .opening-enquiry p { margin: 0; font-size: 18px; }
body.home-aligned .opening-enquiry + .platform-intro { padding-top: 48px; }
body.home-aligned .opening-enquiry + .platform-intro .platform-copy { padding-top: 0; }
body.home-aligned .opening-enquiry + .platform-intro .original-product { margin-top: 0; }
body.home-aligned .original-product figure { margin: 0; }
body.home-aligned .original-product figcaption { text-align: left; font-size: 14px; margin-top: 18px; }
body.home-aligned .original-pillars { gap: 36px; margin-top: 48px; }
body.home-aligned .original-pillars h3 { font-size: 25px; line-height: 1.3; }
body.home-aligned .original-pillars .pillar-label { font-weight: 600; font-size: 15px; }
body.home-aligned .original-pillars article > p:not(:first-child) { font-size: 17px; line-height: 1.65; }
body.home-aligned .institution-users { padding-block: 52px; border-top: 1px solid var(--line); }
body.home-aligned .institution-users .section-heading { max-width: 760px; }
body.home-aligned .institution-users h2 { font-size: 32px; }
body.home-aligned .institution-users .section-label { font-size: 15px; font-weight: 600; }
body.home-aligned .institution-motion-control { margin-top: -6px; }
body.home-aligned .institution-story { padding-block: 64px; }
body.home-aligned .accomplishments-wrap, body.home-aligned .testimonial-wrap { max-width: 1000px; }
body.home-aligned .accomplishments-header { margin-bottom: 32px; }
body.home-aligned .cbe-story h3 { font-size: 32px; max-width: 760px; }
body.home-aligned .institution-evidence h3, body.home-aligned .institution-press h3 { font-size: 25px; }
body.home-aligned .institution-story p { font-size: 18px; }
body.home-aligned .institution-press .press-meta { font-size: 15px; }
body.home-aligned .institution-press .press-title { font-size: 20px; }
body.home-aligned .accomplishments-row h3 { font-size: 25px; }
body.home-aligned .accomplishments-row .award-prize { font-size: 48px; }
body.home-aligned .school-testimonial { padding-block: 64px 88px; }
body.home-aligned .testimonial-wrap > h2 { font-size: 32px; }
body.home-aligned .testimonial-feature blockquote p { font: 400 22px/1.6 Hanken, Arial, sans-serif; letter-spacing: 0; }
body.home-aligned .home-exploration { padding-block: 88px; border-top: 1px solid var(--line); }
body.home-aligned .media-section { background: #fff; padding: 0; }
body.home-aligned .media-heading { align-items: flex-start; gap: 40px; }
body.home-aligned .media-heading p { max-width: 66ch; font-size: 18px; }
body.home-aligned .media-grid { gap: 32px; }
body.home-aligned .media-grid h3 { font-size: 23px; }
body.home-aligned .media-grid p { font-size: 17px; }
body.home-aligned .exploration-part { padding-block: 56px 0; margin-top: 56px; border-top: 1px solid var(--line); }
body.home-aligned .exploration-heading, body.home-aligned .practical-work > div:first-child, body.home-aligned .role-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 40px;
    text-align: left;
    max-width: none;
    margin: 0 0 36px;
}
body.home-aligned .exploration-heading h3, body.home-aligned .practical-work > div:first-child h3 { max-width: 440px; }
body.home-aligned .exploration-heading p, body.home-aligned .practical-work > div:first-child p { font-size: 18px; color: var(--muted); margin: 0; }
body.home-aligned .module-catalogue { border-bottom: 1px solid var(--line); }
body.home-aligned .module-family { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; padding-block: 32px; border-top: 1px solid var(--line); }
body.home-aligned .module-family > h3 { color: var(--blue); font-size: 21px; }
body.home-aligned .module-family ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; list-style: none; padding: 0; margin: 0; }
body.home-aligned .module-family li { min-width: 0; }
body.home-aligned .module-family h4 { font-size: 21px; margin-bottom: 10px; }
body.home-aligned .module-family h4 a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
body.home-aligned .module-family h4 a:hover { color: var(--blue); text-decoration: underline; }
body.home-aligned .module-family p { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0; }
body.home-aligned .module-map-section > .wrap > .text-link { margin: 28px 0 0; }
body.home-aligned .school-roles { background: #fff; color: var(--ink); }
body.home-aligned .school-roles :focus-visible { outline-color: #b64b00; }
body.home-aligned .school-roles .section-label { color: var(--blue); font-size: 15px; }
body.home-aligned .role-intro > p { max-width: 65ch; color: var(--muted); font-size: 18px; margin: 0; }
body.home-aligned .role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 36px; max-width: none; }
body.home-aligned .role-grid article { border-top-color: var(--line); padding-top: 22px; }
body.home-aligned .role-grid h4 { font-size: 22px; }
body.home-aligned .role-grid p { color: var(--muted); font-size: 17px; }
body.home-aligned .work-comparison article { gap: 40px; padding-block: 22px; }
body.home-aligned .work-comparison h4 { font-size: 22px; margin: 0; }
body.home-aligned .work-comparison p { font-size: 17px; }
body.home-aligned .capability-section { background: #fff; }
body.home-aligned .capability-section .section-heading { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; max-width: none; text-align: left; }
body.home-aligned .capability-section .section-heading > p { font-size: 18px; margin: 0; }
body.home-aligned .capability-grid { max-width: none; gap: 28px 48px; margin-top: 36px; }
body.home-aligned .capability-grid h4 { font-size: 22px; }
body.home-aligned .configuration-note { text-align: left; max-width: none; font-size: 15px; }
body.home-aligned .home-adoption { background: var(--pale); padding-block: 88px; }
body.home-aligned .getting-started { background: transparent; padding: 0; }
body.home-aligned .start-title { text-align: left; max-width: none; margin: 0 0 40px; }
body.home-aligned .start-title > p { max-width: 720px; margin: 0; }
body.home-aligned .start-grid { max-width: none; gap: 72px; }
body.home-aligned .adoption-part { margin-top: 48px; padding-block: 48px 0; border-top: 1px solid var(--line); }
body.home-aligned .data-access .section-heading { text-align: left; max-width: 800px; margin: 0; }
body.home-aligned .data-access .section-heading > p { margin: 0; font-size: 18px; }
body.home-aligned .data-access .original-pillars { margin-top: 32px; }
body.home-aligned .data-access .original-pillars article { border-top-width: 1px; border-top-color: var(--line); }
body.home-aligned .data-access .original-pillars h4 { font-size: 22px; }
body.home-aligned .data-access > .text-link { margin: 28px 0 0; }
body.home-aligned .faq-grid { gap: 72px; }
body.home-aligned .faq-grid h3 { max-width: 420px; }
body.home-aligned .closing-enquiry { padding-block: 80px; }
body.home-aligned .closing-enquiry h2 { font-size: 40px; }
body.home-aligned .exploration-heading h2, body.home-aligned .role-intro h2, body.home-aligned .capability-section h2, body.home-aligned .work-details h2 { font-size: 30px; margin-bottom: 0; }
body.home-aligned .role-grid, body.home-aligned .capability-grid { align-items: start; }
body.home-aligned .role-detail, body.home-aligned .capability-detail { border-top: 1px solid var(--line); }
body.home-aligned .role-detail summary, body.home-aligned .capability-detail summary, body.home-aligned .work-details summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding-block: 16px; cursor: pointer; list-style: none; }
body.home-aligned .role-detail summary::-webkit-details-marker, body.home-aligned .capability-detail summary::-webkit-details-marker, body.home-aligned .work-details summary::-webkit-details-marker { display: none; }
body.home-aligned .role-detail summary::after, body.home-aligned .capability-detail summary::after, body.home-aligned .work-details summary::after { content: "+"; color: var(--blue); font: 400 26px/1 Hanken, Arial, sans-serif; flex-shrink: 0; }
body.home-aligned .role-detail[open] summary::after, body.home-aligned .capability-detail[open] summary::after, body.home-aligned .work-details[open] summary::after { content: "−"; }
body.home-aligned .role-detail h3, body.home-aligned .capability-detail h3 { font-size: 21px; margin: 0; }
body.home-aligned .role-detail p, body.home-aligned .capability-detail p { font-size: 17px; color: var(--muted); margin: 0 0 20px; }
body.home-aligned .work-comparison h3, body.home-aligned .data-access .original-pillars h3 { font-size: 22px; }
body.home-aligned .section-anchor { display: block; }
.contact-hours { width: 100%; border-collapse: collapse; font-size: 16px; }
.contact-hours th, .contact-hours td { padding: 6px 0; text-align: left; vertical-align: top; }
.contact-hours th { font-weight: 600; padding-right: 16px; }

/* Detailed destinations share the site's restrained typography and reading width. */
.module-guide { background: #f4f7fb; color: #172644; font: 18px/1.6 Hanken, Arial, sans-serif; }
.module-guide-heading { max-width: 720px; margin-bottom: 28px; }
.module-guide h2 { font: 600 36px/1.25 Hanken, Arial, sans-serif; letter-spacing: -.015em; margin: 0 0 18px; }
.module-guide-heading p { color: #475773; }
.module-guide-index { display: flex; flex-wrap: wrap; gap: 4px 24px; border-block: 1px solid #cdd5e4; padding-block: 20px; }
.module-guide-index a, .module-overview-link { display: inline-flex; align-items: center; min-height: 44px; color: #244bb5; text-underline-offset: 5px; }
.module-guide a:focus-visible, .module-overview-link:focus-visible { outline: 3px solid #b64b00; outline-offset: 5px; }
.module-detail-group { margin-top: 56px; }
.module-detail-group-title { font: 600 22px/1.3 Hanken, Arial, sans-serif; margin: 0 0 24px; color: #244bb5; }
.module-detail { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 64px; border-top: 1px solid #cdd5e4; padding-block: 36px; scroll-margin-top: 120px; }
.module-detail-anchor { position: absolute; top: 0; scroll-margin-top: 120px; }
.module-detail h4 { grid-column: 1; font: 600 25px/1.3 Hanken, Arial, sans-serif; margin: 0 0 18px; }
.module-detail-description, .module-detail-setup { grid-column: 1; margin: 0 0 20px; color: #475773; max-width: 70ch; }
.module-detail-setup { font-size: 16px; }
.module-detail-workflow { grid-column: 2; grid-row: 1 / 5; margin: 0; }
.module-detail-workflow > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding-block: 0 22px; }
.module-detail-workflow dt { font-weight: 600; }
.module-detail-workflow dd { margin: 0; color: #475773; }
.module-detail-actions { grid-column: 1; display: flex; align-items: flex-start; flex-direction: column; gap: 8px; font-size: 16px; }
.module-detail-actions a { display: inline-flex; align-items: center; min-height: 44px; color: #244bb5; text-decoration: underline; text-underline-offset: 5px; }
.module-detail-contact { font-weight: 600; }
@media (max-width: 900px) {
    .module-detail { grid-template-columns: 1fr; gap: 0; }
    .module-detail-workflow { grid-column: 1; grid-row: auto; margin-block: 8px 12px; }
    .module-detail-setup { margin-top: 8px; }
    .module-detail-actions { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
}
@media (max-width: 600px) {
    .module-guide { font-size: 17px; }
    .module-guide h2 { font-size: 30px; }
    .module-guide-index { display: grid; grid-template-columns: 1fr; gap: 0; }
    .module-detail { padding-block: 28px; scroll-margin-top: 24px; }
    .module-detail-anchor { scroll-margin-top: 24px; }
    .module-detail-workflow > div { grid-template-columns: 1fr; gap: 5px; padding-bottom: 20px; }
    .module-detail-actions { flex-direction: column; }
}

@media (max-width: 1200px) {
    .site-header .header-enquiry { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; min-height: 44px; padding: 8px 12px; border-radius: 4px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
    .site-header .menu-toggle { font-size: 14px; padding-inline: 10px; }
    body.home-aligned [id] { scroll-margin-top: 24px; }
}
@media (max-width: 1099px) {
    body.home-aligned .wrap:not(.site-header) { width: calc(100% - 48px); }
    body.home-aligned .original-hero { min-height: 580px; padding-block: 88px; }
    body.home-aligned .platform-intro { padding-block: 56px; }
    body.home-aligned .platform-overview { grid-template-columns: 1fr; gap: 32px; }
    body.home-aligned .platform-copy { padding-top: 0; max-width: 720px; }
    body.home-aligned .original-product { margin-top: 0; }
    body.home-aligned .original-pillars { grid-template-columns: 1fr; gap: 28px; }
    body.home-aligned .original-pillars article { max-width: 720px; }
    body.home-aligned .home-exploration, body.home-aligned .home-adoption { padding-block: 56px; }
    body.home-aligned .module-family { grid-template-columns: 1fr; gap: 18px; }
    body.home-aligned .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.home-aligned .exploration-heading, body.home-aligned .practical-work > div:first-child, body.home-aligned .role-intro, body.home-aligned .capability-section .section-heading { grid-template-columns: 1fr; gap: 18px; }
    body.home-aligned .start-grid { grid-template-columns: 1fr 0.8fr; gap: 40px; }
    body.home-aligned .faq-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 900px) {
    body.home-aligned .media-grid { grid-template-columns: 1fr; gap: 36px; }
    body.home-aligned .testimonial-feature blockquote p { font-size: 20px; }
    body.home-aligned .start-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    body.home-aligned { font-size: 17px; }
    body.home-aligned .wrap:not(.site-header) { width: calc(100% - 36px); }
    body.home-aligned .opening-enquiry > .wrap { flex-direction: column; align-items: stretch; gap: 12px; }
    body.home-aligned .opening-enquiry p { font-size: 17px; }
    body.home-aligned h2 { font-size: 32px; }
    body.home-aligned h3 { font-size: 25px; }
    body.home-aligned .original-hero { min-height: 0; padding: 82px 0 64px; }
    body.home-aligned .original-hero h1 { font-size: clamp(38px, 10.5vw, 44px); }
    body.home-aligned .original-hero-copy > p { font-size: 18px; }
    body.home-aligned .original-hero .hero-note { font-size: 14px; }
    body.home-aligned .platform-intro { padding-block: 48px; }
    body.home-aligned .platform-copy > p { font-size: 18px; }
    body.home-aligned .original-pillars { margin-top: 36px; }
    body.home-aligned .original-pillars h3 { font-size: 24px; }
    body.home-aligned .institution-users { padding-block: 36px; }
    body.home-aligned .institution-users h2 { font-size: 28px; }
    body.home-aligned .institution-story { padding-block: 48px; }
    body.home-aligned .cbe-story h3 { font-size: 27px; }
    body.home-aligned .institution-evidence h3, body.home-aligned .institution-press h3 { font-size: 23px; }
    body.home-aligned .institution-story p { font-size: 17px; }
    body.home-aligned .accomplishments-row .award-prize { font-size: 40px; }
    body.home-aligned .school-testimonial { padding-block: 48px; }
    body.home-aligned .testimonial-wrap > h2 { font-size: 30px; }
    body.home-aligned .home-exploration, body.home-aligned .home-adoption { padding-block: 48px; }
    body.home-aligned .exploration-part { margin-top: 40px; padding-top: 40px; }
    body.home-aligned .module-family { padding-block: 28px; }
    body.home-aligned .module-family ul { grid-template-columns: 1fr; gap: 26px; }
    body.home-aligned .module-family h5 { font-size: 21px; }
    body.home-aligned .role-grid, body.home-aligned .capability-grid { grid-template-columns: 1fr; }
    body.home-aligned .work-comparison article { grid-template-columns: 1fr; gap: 12px; }
    body.home-aligned .adoption-part { margin-top: 40px; padding-top: 40px; }
    body.home-aligned .closing-enquiry { padding-block: 48px; }
    body.home-aligned .closing-enquiry h2 { font-size: 34px; }
}
@media (max-width: 360px) {
    .site-header, body.home-aligned .site-header { gap: 8px; }
    .site-header .brand, body.home-aligned .site-header .brand { font-size: 27px; }
    .site-header .header-enquiry, body.home-aligned .site-header .header-enquiry { font-size: 13px; padding-inline: 8px; }
    .site-header .menu-toggle { font-size: 13px; padding-inline: 8px; }
}

/* Selected homepage opening. The rest of the page keeps its existing layout. */
body.home-aligned .opening-header { position: relative; }
body.home-aligned .opening-header .site-header { width: calc(100% - 112px); max-width: none; min-height: 94px; padding-block: 16px; }
body.home-aligned .opening-header .brand { font-size: 36px; }
body.home-aligned .opening-header nav { gap: 28px; font-size: 15px; }
body.home-aligned .opening-header .button.small { min-height: 50px; padding-inline: 24px; font-size: 15px; }
body.home-aligned .selected-opening { position: relative; display: flex; align-items: center; min-height: clamp(480px, 39vw, 780px); overflow: hidden; background: var(--pale); color: var(--ink); isolation: isolate; }
.selected-opening .opening-media { position: absolute; inset: 0 0 0 34%; background: var(--pale); }
.selected-opening .hero-film, .selected-opening .opening-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.selected-opening .opening-poster { display: none; }
.selected-opening.is-still .hero-film { display: none; }
.selected-opening.is-still .opening-poster { display: block; }
.selected-opening .opening-copy { position: relative; z-index: 1; width: 34%; margin: clamp(24px, 3vh, 42px) 0 clamp(24px, 3vh, 42px) 4.9%; padding: clamp(30px, 2.65vw, 54px); background: #fff; text-align: left; }
body.home-aligned .selected-opening h1 { margin: 0 0 clamp(24px, 2.3vw, 48px); font-size: clamp(42px, 3.5vw, 72px); line-height: 1.04; letter-spacing: -1.9px; font-weight: 700; }
.selected-opening .opening-copy > p { margin: 0 0 clamp(24px, 1.85vw, 38px); font-size: clamp(17px, 1.2vw, 24px); line-height: 1.5; }
.selected-opening .opening-copy > .button { padding: clamp(14px, 1.3vw, 26px) clamp(24px, 1.8vw, 36px); font-size: clamp(17px, 1.2vw, 22px); }
.selected-opening .opening-detail-link { display: flex; align-items: center; width: fit-content; min-height: 44px; margin-top: clamp(14px, 1.15vw, 23px); padding-block: 8px; color: var(--blue); font-size: clamp(15px, 1.1vw, 21px); font-weight: 700; text-underline-offset: 3px; }
.selected-opening .opening-video-controls { position: absolute; right: 18px; bottom: 18px; z-index: 2; display: flex; gap: 8px; }
.selected-opening .hero-film-toggle { position: static; min-height: 48px; padding: 12px 16px; border: 1px solid #e0e7f2; font-size: 14px; }
.selected-opening .hero-film-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.selected-opening .opening-media-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.opening-connections { --connection-cycle: 25s; --connection-step: 5s; --connection-vertical: 0; --burst-spread: 1; --burst-ring-scale: 5.5; }
body.home-aligned .opening-enquiry.opening-connections { padding: 0; }
body.home-aligned .opening-connections > .connection-list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; align-items: start; padding: 26px 0 12px; margin-block: 0; list-style: none; text-align: center; }
.opening-connections .connection-list::before, .opening-connections .connection-list::after { content: ''; position: absolute; top: 32px; left: 10%; width: 80%; height: 2px; background: #dce5f2; }
.opening-connections .connection-list::after { background: var(--blue); transform-origin: left; animation: connection-travel var(--connection-cycle) linear infinite; }
.opening-connections .connection-list li { position: relative; z-index: 1; --connection-index: 0; }
.opening-connections .connection-list li:nth-child(2) { --connection-index: 1; }
.opening-connections .connection-list li:nth-child(3) { --connection-index: 2; }
.opening-connections .connection-list li:nth-child(4) { --connection-index: 3; }
.opening-connections .connection-list li:nth-child(5) { --connection-index: 4; }
.opening-connections .connection-list li::before { content: ''; display: block; width: 13px; height: 13px; margin: 0 auto 16px; border-radius: 50%; background: var(--blue); animation: connection-node var(--connection-cycle) ease-in-out infinite; animation-delay: calc(var(--connection-index) * var(--connection-step)); }
.opening-connections .connection-list .theme-link { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; width: calc(100% - 16px); max-width: 240px; min-height: 108px; padding: 12px 14px; border: 1px solid #dce5f2; background: #f8faff; color: var(--ink); border-radius: 8px; font-size: 16px; font-weight: 600; text-decoration: none; text-wrap: balance; animation: connection-highlight var(--connection-cycle) ease-in-out infinite; animation-delay: calc(var(--connection-index) * var(--connection-step)); }
.opening-connections .theme-link:hover, .opening-connections .theme-link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.opening-connections .connection-list svg { width: 23px; height: 23px; flex: 0 0 23px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.opening-connections .connection-burst { position: absolute; top: 6.5px; left: 50%; width: 0; height: 0; pointer-events: none; }
.connection-burst b { position: absolute; left: 0; top: 0; width: 8px; height: 12px; border-radius: 2px; background: var(--blue); opacity: 0; animation: connection-confetti var(--connection-cycle) ease-out infinite; animation-delay: calc(var(--connection-index) * var(--connection-step)); }
.connection-burst b:nth-child(1) { --burst-x: -48px; --burst-y: -38px; --burst-turn: -150deg; }
.connection-burst b:nth-child(2) { --burst-x: -18px; --burst-y: -58px; --burst-turn: 110deg; background: #e9a22b; }
.connection-burst b:nth-child(3) { --burst-x: 22px; --burst-y: -54px; --burst-turn: 200deg; background: #24a487; }
.connection-burst b:nth-child(4) { --burst-x: 52px; --burst-y: -30px; --burst-turn: -130deg; background: #6aa5ed; }
.connection-burst b:nth-child(5) { --burst-x: 55px; --burst-y: 20px; --burst-turn: 160deg; }
.connection-burst b:nth-child(6) { --burst-x: 22px; --burst-y: 50px; --burst-turn: -200deg; background: #e9a22b; }
.connection-burst b:nth-child(7) { --burst-x: -27px; --burst-y: 46px; --burst-turn: 120deg; background: #24a487; }
.connection-burst b:nth-child(8) { --burst-x: -56px; --burst-y: 14px; --burst-turn: -170deg; background: #6aa5ed; }
.connection-burst::after { content: ''; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border: 2px solid #8097df; border-radius: 50%; opacity: 0; animation: connection-ripple var(--connection-cycle) ease-out infinite; animation-delay: calc(var(--connection-index) * var(--connection-step)); }
body.home-aligned .opening-connections > .connection-controls { justify-content: flex-end; padding-bottom: 6px; }
.connection-controls label { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px 8px; color: var(--ink); font-size: 14px; cursor: pointer; }
.connection-motion-pause { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.connection-motion-pause:focus-visible { outline: 3px solid #b15b17; outline-offset: 4px; }
.opening-connections:has(.connection-motion-pause:checked) .connection-list::after,
.opening-connections:has(.connection-motion-pause:checked) .connection-list li::before,
.opening-connections:has(.connection-motion-pause:checked) .connection-list .theme-link,
.opening-connections:has(.connection-motion-pause:checked) .connection-burst b,
.opening-connections:has(.connection-motion-pause:checked) .connection-burst::after { animation-play-state: paused; }
/* Keep one animation clock when the layout changes direction at the mobile breakpoint. */
@keyframes connection-travel {
    0% { transform: scale(var(--connection-vertical), calc(1 - var(--connection-vertical))); }
    20% { transform: scale(calc(.25 + .75 * var(--connection-vertical)), calc(1 - .75 * var(--connection-vertical))); }
    40% { transform: scale(calc(.5 + .5 * var(--connection-vertical)), calc(1 - .5 * var(--connection-vertical))); }
    60% { transform: scale(calc(.75 + .25 * var(--connection-vertical)), calc(1 - .25 * var(--connection-vertical))); }
    80%, 100% { transform: scale(1); }
}
@keyframes connection-node { 0%, 14% { box-shadow: 0 0 0 6px #324eb21c; } 20%, 100% { box-shadow: 0 0 0 0 #324eb200; } }
@keyframes connection-highlight {
    0%, 4%, 14% { background: #edf2ff; border-color: #8097df; transform: translateY(-2px) scale(1); }
    1.6% { background: #edf2ff; border-color: #8097df; transform: translateY(-3px) scale(1.035); }
    20%, 100% { background: #f8faff; border-color: #dce5f2; transform: translateY(0); }
}
@keyframes connection-confetti {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.65) rotate(0); }
    1%, 4% { opacity: 1; }
    9%, 100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x) * var(--burst-spread)), calc(-50% + var(--burst-y) * var(--burst-spread))) scale(1) rotate(var(--burst-turn)); }
}
@keyframes connection-ripple {
    0% { opacity: 0; transform: scale(.7); }
    1% { opacity: .85; }
    10%, 100% { opacity: 0; transform: scale(var(--burst-ring-scale)); }
}
@media (prefers-reduced-motion: reduce) {
    .opening-connections .connection-list::after, .opening-connections .connection-burst { display: none; }
    .opening-connections .connection-list li::before, .opening-connections .connection-list .theme-link,
    .opening-connections .connection-burst b, .opening-connections .connection-burst::after { animation: none; }
    body.home-aligned .opening-connections > .connection-controls { display: none; }
}
@media (max-width: 1200px) {
    body.home-aligned .opening-header .site-header { width: calc(100% - 48px); min-height: 80px; }
    body.home-aligned .opening-header nav { gap: 8px; }
}
@media (max-width: 1050px) {
    body.home-aligned .selected-opening { flex-direction: column; align-items: stretch; min-height: 0; }
    .selected-opening .opening-copy { width: auto; margin: 0; padding: 36px 32px; }
    .selected-opening .opening-media { position: relative; inset: auto; order: 1; aspect-ratio: 16 / 10; }
}
@media (max-width: 900px) {
    .opening-connections { --connection-vertical: 1; --burst-spread: .55; --burst-ring-scale: 3.5; }
    /* Five equal rows keep each quarter-step on a dot, including when labels wrap. */
    body.home-aligned .opening-connections > .connection-list { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; align-items: stretch; gap: 12px; padding-block: 21px; text-align: left; }
    /* The inset accounts for the five rows, 21px outer padding and four 12px gaps. */
    .opening-connections .connection-list::before, .opening-connections .connection-list::after { top: calc(10% + 12px); bottom: calc(10% + 12px); left: 18px; width: 2px; height: auto; }
    .opening-connections .connection-list::after { transform-origin: top; }
    .opening-connections .connection-list li { display: flex; align-items: center; gap: 20px; padding-left: 12px; }
    .opening-connections .connection-list li::before { flex: 0 0 13px; margin: 0; }
    .opening-connections .connection-list .theme-link { flex: 1; flex-direction: row; align-self: stretch; justify-content: flex-start; gap: 10px; width: auto; max-width: none; min-height: 80px; text-align: left; text-wrap: initial; }
    .opening-connections .connection-burst { top: 50%; left: 18.5px; }
}
@media (max-width: 650px) {
    body.home-aligned .opening-header .site-header { width: calc(100% - 36px); }
    body.home-aligned .opening-header .brand { font-size: 30px; }
    .selected-opening .opening-copy { padding: 28px 20px; }
    body.home-aligned .selected-opening h1 { font-size: 42px; letter-spacing: -1.5px; }
    .selected-opening .opening-media { aspect-ratio: 1; }
    .selected-opening .opening-video-controls { left: 12px; right: 12px; bottom: 12px; justify-content: flex-end; }
    .selected-opening .hero-film-toggle { min-height: 44px; padding: 10px 12px; }
}

/* Theme links land on concrete workflows within the existing Features page. */
/* Education guide: shared brand, compact editorial reading layout and stable section links. */
.education-guide { overflow-wrap: anywhere; }
.about-page { color: var(--ink); overflow-wrap: anywhere; }
.about-page h1, .about-page h2, .about-page h3, .about-page p, .about-page figure { margin: 0; }
.about-page p { font-size: 18px; line-height: 1.7; }
.about-page h2 { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.2; letter-spacing: -1px; }
.about-page h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.4px; }
.about-page-hero { padding: 30px 0 42px; background: var(--pale); }
.about-page-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 28px; font-size: 15px; }
.about-page-breadcrumb a { color: var(--blue); text-underline-offset: 4px; }
.about-page-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-page-intro-text { grid-template-columns: minmax(0, 860px); }
.about-page-intro h1 { font-size: clamp(38px, 4vw, 56px); line-height: 1.05; letter-spacing: -2px; max-width: 620px; }
.about-page-intro p { margin-top: 22px; font-size: 20px; max-width: 55ch; }
.about-page-intro .button { margin-top: 26px; }
.about-page-intro figure { overflow: hidden; border-radius: 6px; }
.about-page-intro img { display: block; width: 100%; height: auto; aspect-ratio: 1.8; max-height: 300px; object-fit: cover; object-position: center; }
.about-page-purpose { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; padding-block: 48px; }
.about-page-purpose p + p { margin-top: 16px; }
.about-page-approach { padding-block: 40px; background: #f5f7fb; }
.about-page-approach h2 { max-width: 760px; }
.about-page-approach ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 30px 0 0; list-style: none; }
.about-page-approach li { border-top: 2px solid #bbc9e6; padding-top: 20px; }
.about-page-approach p { margin-top: 12px; font-size: 17px; }
.about-page-focus { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; padding-block: 48px; }
.about-page-focus-heading p { margin-top: 18px; max-width: 40ch; }
.about-page-focus ul { list-style: none; padding: 0; margin: 0; }
.about-page-focus li { border-top: 1px solid #d8e1ee; }
.about-page-focus li:last-child { border-bottom: 1px solid #d8e1ee; }
.about-page-focus a { display: flex; align-items: flex-start; gap: 18px; padding: 22px 4px; color: var(--ink); text-decoration: none; }
.about-page-focus a:hover h3, .about-page-focus a:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; }
.about-page-focus h3 { color: var(--blue); }
.about-page-focus p { margin-top: 8px; font-size: 17px; }
.about-page-icon { display: flex; flex: 0 0 34px; padding-top: 1px; color: var(--blue); }
.about-page-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.about-page-contact { padding-block: 36px; background: var(--pale); }
.about-page-contact > .wrap { display: flex; justify-content: space-between; gap: 36px; align-items: center; }
.about-page-contact p { margin-top: 14px; max-width: 70ch; }
.about-page-contact .button { flex-shrink: 0; }
@media (max-width: 900px) {
    .about-page-intro { gap: 28px; }
    .about-page-purpose, .about-page-focus { grid-template-columns: 1fr; gap: 24px; padding-block: 36px; }
    .about-page-focus-heading p { max-width: 70ch; }
    .about-page-approach ul { gap: 22px; }
    .about-page-contact > .wrap { align-items: flex-start; flex-direction: column; gap: 24px; }
}
@media (max-width: 600px) {
    .about-page-hero { padding-block: 24px 30px; }
    .about-page-intro { grid-template-columns: 1fr; gap: 28px; }
    .about-page-intro h1 { font-size: 38px; letter-spacing: -1.3px; }
    .about-page-intro p { font-size: 18px; margin-top: 18px; }
    .about-page-intro img { aspect-ratio: 2; max-height: 220px; }
    .about-page-approach ul { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
    .about-page-approach, .about-page-contact { padding-block: 30px; }
    .about-page-purpose p { font-size: 17px; }
    .about-page-focus a { gap: 12px; padding-block: 20px; }
    .about-page-focus h3 { font-size: 20px; }
}

.education-guide-heading { padding: 40px 0 32px; background: var(--pale); }
.education-guide-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; font-size: 15px; margin-bottom: 24px; }
.education-guide h1 { max-width: 920px; font-size: clamp(36px, 4vw, 54px); margin: 0 0 20px; }
.education-guide-intro { max-width: 70ch; font-size: 21px; line-height: 1.6; }
.education-guide-image { margin: 28px 0 0; background: #e0e6f0; border-radius: 6px; overflow: hidden; }
.education-guide-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; max-height: 240px; object-fit: cover; object-position: center 40%; }
.education-guide-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding-block: 40px; align-items: start; }
.education-guide-index { position: sticky; top: 120px; padding: 20px 18px; border-left: 3px solid var(--blue); background: #f1f5fb; }
.education-guide-index p { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.education-guide-index ul { list-style: none; padding: 0; margin: 0; }
.education-guide-index a { display: block; padding: 10px 0; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
.education-guide-index a:hover { text-decoration: underline; }
.education-guide-content { min-width: 0; max-width: 780px; }
.education-guide-section { padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.education-guide-section:first-child { padding-top: 0; }
.education-guide h2 { font-size: clamp(27px, 2.5vw, 34px); margin: 0 0 18px; }
.education-guide-section p { font-size: 18px; line-height: 1.75; margin: 0 0 16px; }
.education-guide-section p:last-child { margin-bottom: 0; }
.education-guide-regions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; list-style: none; padding: 0; margin: 20px 0 0; }
.education-guide-regions a, .education-guide-sources a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.education-guide-sources { padding-left: 22px; margin: 20px 0 0; }
.education-guide-note { margin-top: 28px; padding-left: 20px; border-left: 3px solid var(--line); color: var(--muted); font-size: 16px; }
.education-guide-note p { margin: 0; }
.education-guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; }
@media (max-width: 900px) {
    .education-guide-layout { grid-template-columns: 1fr; gap: 28px; padding-block: 28px; }
    .education-guide-index { position: static; }
    .education-guide-index ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
    .education-guide-section { scroll-margin-top: 24px; }
}
@media (max-width: 600px) {
    .education-guide-heading { padding-block: 28px; }
    .education-guide-intro { font-size: 18px; }
    .education-guide-image img { aspect-ratio: 5 / 2; }
    .education-guide-index ul { grid-template-columns: 1fr; }
    .education-guide-section { padding-block: 24px; }
    .education-guide-section p { font-size: 17px; }
    .education-guide-actions { align-items: stretch; flex-direction: column; }
}

.theme-guide { padding: 64px 0; background: #fff; }
.theme-guide-layout { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 64px; align-items: start; }
.theme-hero { margin: 28px 0 32px; overflow: hidden; background: #eef2f7; border-radius: 6px; }
.theme-hero img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; max-height: 280px; object-fit: cover; object-position: center 35%; }
.theme-guide-nav { position: sticky; top: 120px; max-height: calc(100vh - 144px); overflow-y: auto; padding: 24px 18px; background: #f1f5fb; border-left: 3px solid var(--blue); }
.theme-guide-nav p { margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.theme-guide-nav ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.theme-guide-nav a { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 10px 0; font-size: 15px; line-height: 1.5; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.theme-guide-nav a span { min-width: 0; }
.theme-guide-nav a:hover, .theme-guide-nav a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.theme-guide svg { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.theme-guide-content { min-width: 0; }
.theme-guide .theme-detail { position: relative; padding: 32px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; overflow-wrap: anywhere; }
.theme-guide .theme-detail:first-child { padding-top: 0; }
.theme-cms-anchor { position: absolute; top: 0; }
.theme-detail-heading { max-width: 760px; }
.theme-heading-title { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.theme-section-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 52px; height: 52px; background: #eaf0fc; color: var(--blue); border-radius: 4px; }
.theme-section-icon svg { width: 30px; height: 30px; }
.theme-detail h2 { margin: 0; font-size: clamp(30px, 2.7vw, 38px); line-height: 1.2; letter-spacing: -1px; }
.theme-detail .theme-summary { margin: 0; max-width: 68ch; font-size: 20px; line-height: 1.65; color: #42516b; }
.theme-tools { padding: 0; margin: 28px 0; list-style: none; }
.theme-tools li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 28px; padding: 22px 0; border-top: 1px solid #e2e8f1; }
.theme-detail h3 { margin: 0; font-size: 20px; line-height: 1.4; }
.theme-detail .theme-tools p { margin: 0; font-size: 17px; line-height: 1.65; }
.theme-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.theme-actions a { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; line-height: 1.5; }
.theme-guide a.theme-contact { padding: 12px 20px; background: var(--blue); color: #fff; border-radius: 4px; font-weight: 600; text-decoration: none; }
.theme-guide a.theme-contact:hover { background: #173a99; text-decoration: underline; text-underline-offset: 4px; }
.opening-connections .theme-link { overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .theme-guide { padding: 36px 0; }
    .theme-guide-layout { grid-template-columns: 1fr; gap: 36px; }
    .theme-guide-nav { position: static; max-height: none; overflow: visible; }
    .theme-guide-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
    .theme-guide-nav a { overflow-wrap: anywhere; }
    .theme-guide .theme-detail { scroll-margin-top: 24px; }
}
@media (max-width: 600px) {
    .theme-guide > .wrap { width: calc(100% - 36px); }
    .theme-guide-nav ul { grid-template-columns: 1fr; }
    .theme-guide .theme-detail { padding-block: 24px; }
    .theme-guide .theme-detail:first-child { padding-top: 0; }
    .theme-heading-title { align-items: flex-start; gap: 14px; }
    .theme-section-icon { flex-basis: 42px; height: 42px; }
    .theme-section-icon svg { width: 26px; height: 26px; }
    .theme-detail h2 { font-size: 30px; }
    .theme-detail .theme-summary { font-size: 18px; }
    .theme-hero img { aspect-ratio: 5 / 2; }
    .theme-tools li { grid-template-columns: 1fr; gap: 10px; }
    .theme-actions { align-items: stretch; flex-direction: column; }
}