/* =====================================================================================================================
   Educe public site — "Sunrise Campus" theme (design-system/educe/MASTER.md).
   Loaded after Bootstrap, site.css and sunrise-tokens.css, which holds the palette, radii, shadows, motion and the
   self-hosted Outfit / Nunito fonts. Nothing here hard-codes a colour that has a token, and there are no inline
   styles anywhere on the site: the Content-Security-Policy forbids them.
   Accessibility: 4.5:1 text contrast (3:1 for large text and control boundaries), a visible focus ring on every
   focusable element, 44px targets, no horizontal scrolling at 320px, and no motion under prefers-reduced-motion.
   ===================================================================================================================== */

:root {
    --header-h: 76px;
    /* The boundary of a control the visitor can operate — an input, a select, a check box, an outlined button,
       a pager link — is the only thing that shows where the control is, so WCAG 1.4.11 asks for 3:1 against the
       surface behind it. --line-2 reaches only ~1.3:1, so every control boundary uses this darker line instead
       (3.47:1 on white, 3.27:1 on --sun-50). --line and --line-2 stay for dividers and card edges, which are
       decoration. */
    --control-line: #8A879F;
    --field-bg: #FCFBFF;
}

/* ---------------------------------------------------------------- base */

/* site.css drops the root size to 14px on small screens; the Sunrise scale is built on 16px everywhere. */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body.public-site {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--body);
    background: var(--paper);
    overflow-x: hidden;
}

.public-site h1,
.public-site h2,
.public-site h3,
.public-site h4,
.public-site h5,
.public-site h6 {
    font-family: var(--font-head);
    color: var(--ink);
    letter-spacing: -.015em;
    line-height: 1.2;
}

.public-site h1 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
}

.public-site h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
}

.public-site h3 {
    font-size: 1.15rem;
    font-weight: 600;
}

/* Every paragraph on the public site reads as a justified column. */
.public-site p {
    text-align: justify;
}

/* A rule on the paragraph itself beats the alignment it would otherwise inherit, so a paragraph inside a block
   that centres or right-aligns its text is handed back to that block. */
.public-site .sec-head--center p,
.public-site .certified p,
.public-site .person-card p,
.public-site .empty-state p,
.public-site .status-card p,
.public-site .photo-drop p,
.public-site .mark-sheet p,
.public-site .board__more,
.public-site .marksheet-number {
    text-align: inherit;
}

/* Links are the coral accent; indigo is kept for things you press. */
.public-site a {
    color: var(--sun-600);
    text-underline-offset: 3px;
}

.public-site a:hover {
    color: var(--sun-700);
}

.public-site img {
    max-width: 100%;
    height: auto;
}

.public-site strong,
.public-site b {
    color: var(--ink);
}

/* One focus ring everywhere: white inside, sky outside, so it shows on white, cream, navy and blue alike. The
   transparent outline keeps it visible in Windows high-contrast themes, where box-shadows are dropped. */
.public-site :focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* site.css puts its own blue ring on Bootstrap buttons, including after a mouse click; the ring above is the
   only one the site uses, and only for keyboard focus. */
.public-site .btn:focus,
.public-site .btn:active:focus,
.public-site .btn-link.nav-link:focus {
    box-shadow: none;
}

.public-site .btn:focus-visible {
    box-shadow: var(--focus-ring);
}

.public-site .form-control:focus-visible,
.public-site .form-select:focus-visible,
.public-site .form-control:focus,
.public-site .form-select:focus {
    border-color: var(--sky-600);
    box-shadow: var(--focus-ring);
    outline: 2px solid transparent;
    outline-offset: 0;
}

.public-site .form-check-input:focus {
    border-color: var(--sky-600);
    box-shadow: var(--focus-ring);
}

.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-head);
    font-weight: 700;
    text-decoration: none;
}

.public-site .skip-link:hover {
    color: var(--paper);
}

/* Full bleed: the top strip, header, hero, page body and footer span the viewport instead of sitting
   in a centred column. Long text still reads, because the blocks inside cap their own measure in ch. */
.sc-wrap {
    width: 100%;
    padding-inline: clamp(16px, 4vw, 32px);
}

.site-main:focus {
    outline: none;
}

.page-body {
    padding-block: clamp(32px, 5vw, 56px);
}

.status-area .alert {
    margin: 24px 0 0;
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: currentColor;
    vertical-align: -.22em;
}

/* The highlighted word in a heading ("Shaping lives"): coral, 5.2:1 on white. */
.hl {
    color: var(--sun-600);
}

.brand-name {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--sun-700);
}

/* ---------------------------------------------------------------- buttons and links */

.sbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 22px;
    border: 2px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.sbtn:hover {
    transform: translateY(-2px);
}

.sbtn:active {
    transform: translateY(0);
}

.sbtn:disabled,
.sbtn[aria-busy="true"] {
    transform: none;
    cursor: progress;
    opacity: .8;
}

.sbtn--lg {
    min-height: 52px;
    padding: 15px 28px;
    font-size: 1.0625rem;
}

/* Every variant is written as ".public-site .sbtn--x" because a button is often an <a>, and
   ".public-site a" (0,1,1) would otherwise outrank a bare ".sbtn--x" (0,1,0) and paint the label
   in the link colour instead of its own.
   --sun is the class every main action carries ("Explore courses", "Submit", "View result"). In the Indigo &
   Coral palette the main action is indigo with white text (6.3:1, 7.9:1 on hover). */
.public-site .sbtn--sun {
    background: var(--sky-600);
    color: var(--paper);
    box-shadow: var(--shadow-sky);
}

.public-site .sbtn--sun:hover {
    background: var(--sky-700);
    color: var(--paper);
}

/* On the indigo call-to-action band an indigo button would disappear, so there it turns coral with ink text
   (5.7:1, 7.1:1 on hover). */
.public-site .cta .sbtn--sun {
    background: var(--sun-500);
    color: var(--ink);
    box-shadow: var(--shadow-sun);
}

.public-site .cta .sbtn--sun:hover {
    background: var(--sun-400);
    color: var(--ink);
}

.public-site .sbtn--blue {
    background: var(--sky-600);
    color: var(--paper);
    box-shadow: var(--shadow-sky);
}

.public-site .sbtn--blue:hover {
    background: var(--sky-700);
    color: var(--paper);
}

/* The deep indigo of the contact strip and the footer, for the staff Login pill in the white header: a
   quieter shade than the visitor's own main actions. White on it is 16.0:1, and the pill reads 16.0:1
   against the white header. */
.public-site .sbtn--navy {
    background: var(--sky-900);
    color: var(--paper);
    box-shadow: var(--shadow-md);
}

.public-site .sbtn--navy:hover {
    background: var(--sky-700);
    color: var(--paper);
}

/* The secondary action ("Check result") reads in the coral accent, like a link with a border. */
.public-site .sbtn--ghost {
    background: var(--paper);
    border-color: var(--control-line);
    color: var(--sun-600);
}

.public-site .sbtn--ghost:hover {
    border-color: var(--sky-600);
    background: var(--sky-50);
    color: var(--sun-700);
}

.public-site .sbtn--white-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
    color: var(--paper);
}

.public-site .sbtn--white-outline:hover {
    background: rgba(255, 255, 255, .14);
    border-color: var(--paper);
    color: var(--paper);
}

/* The keyboard focus ring (WCAG 2.4.7). It comes after the variants and outranks them: their own shadow
   (".public-site .sbtn--sun", 0,2,0) would otherwise replace the ring from ".public-site :focus-visible". */
.public-site .sbtn:focus-visible {
    box-shadow: var(--focus-ring);
}

/* ---------------------------------------------------------------- security check (CAPTCHA) */

.captcha {
    padding: clamp(14px, 2vw, 18px);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--sky-50);
}

.captcha__row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.captcha__image {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--paper);
}

.captcha__question {
    flex: 1;
    margin: 0;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 700;
}

/* Icon only, and 44px so it is still a comfortable target. Its name is on the element (aria-label), not in
   text inside it, and overflow is clipped so nothing can ever spill out of the circle. */
.public-site .captcha__refresh {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border: 1.5px solid var(--control-line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--sky-700);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.public-site .captcha__refresh:hover {
    border-color: var(--sky-600);
    background: var(--sky-50);
}

.captcha__refresh .icon {
    width: 20px;
    height: 20px;
}

.captcha__answer {
    max-width: 16rem;
}

/* Reads as a link, but it has to be a button so that it posts the form and keeps what was typed. Out of sight
   until the keyboard reaches it (visually-hidden-focusable), so these rules only show while it has focus. */
.public-site .captcha__alt {
    display: inline-block;
    width: auto;
    margin-top: 10px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--sky-700);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    text-align: start;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.public-site .captcha__alt:hover {
    color: var(--sky-900);
}

/* ---------------------------------------------------------------- back to top */

/* The focus target at the very top of the page: nothing to see, and no outline when "Back to top" lands on it. */
.top-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.top-anchor:focus {
    outline: none;
}

/* A white disc in the corner, with a coral ring that fills as the page is read. While it is out of sight it is
   visibility: hidden as well as transparent, so it cannot be tabbed to or read out; the delay on visibility lets it
   fade before it goes. The arrow is 6.3:1 on white, the ring 5.2:1. */
.public-site .to-top {
    position: fixed;
    right: clamp(14px, 3vw, 28px);
    bottom: clamp(14px, 3vw, 28px);
    z-index: 1030;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--sky-600);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.9);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
}

.public-site .to-top.is-shown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.public-site .to-top[hidden] {
    display: none;
}

.public-site .to-top.is-shown:hover {
    color: var(--sky-700);
    transform: translateY(-2px);
}

.public-site .to-top:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), var(--shadow-md);
}

.to-top__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.to-top__track,
.to-top__progress {
    fill: none;
    stroke-width: 4;
}

.to-top__track {
    stroke: var(--sky-100);
}

.to-top__progress {
    stroke: var(--sun-600);
    stroke-linecap: round;
}

.to-top .icon {
    position: relative;
    width: 22px;
    height: 22px;
}

@media print {
    .public-site .to-top {
        display: none;
    }
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--sun-600);
    text-decoration: none;
}

.public-site .text-link:hover {
    color: var(--sun-700);
    text-decoration: underline;
}

.text-link .icon {
    transition: transform var(--dur-fast) var(--ease-out);
}

.text-link:hover .icon {
    transform: translateX(3px);
}

.text-link--on-blue,
.public-site .text-link--on-blue:hover {
    color: var(--paper);
}

/* ---------------------------------------------------------------- small components */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border-radius: var(--r-pill);
    background: var(--sun-100);
    color: var(--sun-700);
    font-family: var(--font-head);
    font-size: .875rem;
    font-weight: 600;
}

.eyebrow .icon {
    display: block;
    width: 24px;
    height: 24px;
    padding: 4px;
    border-radius: 50%;
    background: var(--paper);
}

.eyebrow--sky {
    background: var(--sky-100);
    color: var(--sky-700);
}

.eyebrow--mint {
    background: var(--mint-100);
    color: var(--mint-700);
}

.eyebrow--on-blue {
    background: rgba(255, 255, 255, .16);
    color: var(--paper);
}

.eyebrow--on-blue .icon {
    background: var(--sun-500);
    color: var(--ink);
}

.tile {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    background: var(--sun-100);
    color: var(--sun-700);
    transition: transform var(--dur-base) var(--ease-out);
}

.tile .icon {
    width: 26px;
    height: 26px;
    vertical-align: middle;
}

.tile--sun {
    background: var(--sun-100);
    color: var(--sun-700);
}

.tile--sky {
    background: var(--sky-100);
    color: var(--sky-700);
}

.tile--mint {
    background: var(--mint-100);
    color: var(--mint-700);
}

.tile--lilac {
    background: var(--lilac-100);
    color: var(--lilac-700);
}

.tile--rose {
    background: var(--rose-100);
    color: var(--rose-700);
}

.tile--lemon {
    background: var(--lemon-100);
    color: var(--lemon-700);
}

.card-s {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: clamp(18px, 2.5vw, 26px);
}

.section {
    padding-block: clamp(48px, 6vw, 88px);
}

.sec-title::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin-bottom: 14px;
    border-radius: 4px;
    background: var(--sun-500);
}

.sec-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    margin-bottom: clamp(24px, 3vw, 40px);
}

.sec-head p {
    max-width: 62ch;
    margin: 0;
    color: var(--muted);
    font-size: 1.0625rem;
}

.sec-head--center {
    align-items: center;
    text-align: center;
}

.sec-head--center .sec-title::before {
    margin-inline: auto;
}

@media (min-width: 900px) {
    .sec-head--split {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--s-5);
    }

    .sec-head--split > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-4);
    }
}

.checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 700;
    color: var(--ink);
}

.checks .icon {
    color: var(--mint-700);
    width: 1.3em;
    height: 1.3em;
    margin-top: .1em;
}

.checks--stack {
    flex-direction: column;
    gap: 12px;
}

.checks--stack li {
    font-weight: 400;
    color: var(--body);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.chips li {
    padding: 7px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-pill);
    background: var(--sun-50);
    color: var(--ink);
    font-family: var(--font-head);
    font-size: .875rem;
    font-weight: 600;
}

.plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lead-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.55;
    text-align:justify;
}

.steps {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.steps li b {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sun-100);
    color: var(--sun-700);
    font-family: var(--font-head);
    font-size: 1rem;
}

.steps--compact li {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* Rich text that staff wrote (notices) and the legacy prose lists. */
.rich-text > :last-child {
    margin-bottom: 0;
}

.rich-text a {
    text-decoration: underline;
}

.rich-text img {
    border-radius: var(--r-sm);
}

.rich-text table {
    max-width: 100%;
    margin-bottom: .5rem;
    border-collapse: collapse;
}

.rich-text th,
.rich-text td {
    padding: 4px 8px;
    border: 1px solid var(--line-2);
}

/* ---------------------------------------------------------------- top strip */

.top-strip {
    background: var(--sky-900);
    color: #E4E2FF;
    font-size: .8125rem;
}

.top-strip__in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 24px;
    min-height: 40px;
    padding-block: 4px;
}

.top-strip p,
.top-strip ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-strip__note,
.top-strip li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-strip__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 24px;
}

.top-strip .icon {
    color: var(--sun-300);
}

.public-site .top-strip strong {
    color: inherit;
    font-weight: 700;
}

.public-site .top-strip a {
    display: inline-block;
    padding-block: 5px;
    color: #E4E2FF;
    text-decoration: none;
}

.public-site .top-strip a:hover {
    color: var(--paper);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .top-strip__note {
        display: none;
    }
}

/* ---------------------------------------------------------------- header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.site-header__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--header-h);
    position: relative;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding-block: 8px;
    text-decoration: none;
}

.brand__logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 58px;
    height: 58px;
    padding: 5px;
    border-radius: var(--r-sm);
    background: var(--paper);
    box-shadow: 0 0 0 2px var(--sun-200), var(--shadow-sm);
}

.brand__logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.brand__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.brand__name {
    font-family: var(--font-head);
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.01em;
}

.brand__sub {
    max-width: 17ch;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
}

.site-nav {
    display: flex;
    align-items: center;
}

.burger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    border: 2px solid var(--control-line);
    border-radius: var(--r-pill);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-head);
    font-weight: 600;
    cursor: pointer;
}

.burger:hover {
    border-color: var(--sun-300);
    background: var(--sun-50);
}

.burger__bars {
    position: relative;
    width: 22px;
    height: 16px;
}

.burger__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    border-radius: 3px;
    background: var(--ink);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-base) var(--ease-out);
}

.burger__bars span:nth-child(1) {
    top: 0;
}

.burger__bars span:nth-child(2) {
    top: 6.75px;
    width: 70%;
}

.burger__bars span:nth-child(3) {
    top: 13.5px;
}

.burger[aria-expanded="true"] {
    border-color: var(--sun-200);
    background: var(--sun-100);
}

.burger[aria-expanded="true"] .burger__bars span:nth-child(1) {
    top: 6.75px;
    transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bars span:nth-child(2) {
    opacity: 0;
}

.burger[aria-expanded="true"] .burger__bars span:nth-child(3) {
    top: 6.75px;
    transform: rotate(-45deg);
}

/* Folded menu: a panel under the header. Without JavaScript the panel stays folded, and every link is also in
   the footer, so nothing is out of reach. */
.snav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    max-height: calc(100vh - var(--header-h));
    padding: 12px clamp(16px, 4vw, 32px) 20px;
    overflow-y: auto;
    background: var(--paper);
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.snav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.snav__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 16px;
    border-radius: var(--r-sm);
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.public-site .snav__list a:hover {
    background: var(--sun-50);
    color: var(--sun-700);
}

.public-site .snav__list a[aria-current="page"] {
    background: var(--sun-100);
    color: var(--sun-700);
    font-weight: 700;
}

.snav__account {
    display: flex;
    margin-top: 14px;
}

.snav__account .sbtn {
    width: 100%;
}

@media (min-width: 1200px) {
    .burger {
        display: none;
    }

    /* Bootstrap's collapse keeps the panel hidden on small screens; from here the menu is always a row. */
    .site-header .snav,
    .site-header .snav.collapse:not(.show) {
        display: flex;
        position: static;
        align-items: center;
        gap: 12px;
        max-height: none;
        padding: 0;
        overflow: visible;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .snav__list {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 2px;
    }

    .snav__list a {
        padding: 9px 8px;
        border-radius: var(--r-pill);
        font-size: .875rem;
        white-space: nowrap;
    }

    .snav__account {
        margin-top: 0;
    }

    .snav__account .sbtn {
        width: auto;
        padding: 11px 18px;
    }
}

/* Between 1200px and the wider layout the menu needs the room the subtitle takes; the name and logo stay. */
@media (min-width: 1200px) and (max-width: 1339.98px) {
    .brand__sub {
        display: none;
    }
}

@media (min-width: 1340px) {
    .snav__list a {
        padding: 9px 11px;
        font-size: .9375rem;
    }
}

/* ---------------------------------------------------------------- page header band */

.page-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(28px, 4vw, 52px);
    background: linear-gradient(180deg, var(--sky-50) 0%, var(--paper) 100%);
    border-bottom: 1px solid var(--line);
}

.page-hero__sun {
    position: absolute;
    right: -120px;
    top: -170px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, #DCD8FF 0 26%, #E6E3FF 26.2% 42%, #EEEDFF 42.2% 58%, #F3F2FF 58.2% 72%, transparent 72.2%);
}

.page-hero__dots {
    position: absolute;
    left: clamp(16px, 4vw, 48px);
    bottom: 10px;
    width: 160px;
    height: 48px;
    pointer-events: none;
    opacity: .16;
    background-image: radial-gradient(var(--sky-600) 2px, transparent 2.6px);
    background-size: 16px 16px;
}

.page-hero__in {
    position: relative;
}

.page-hero h1 {
    margin: 10px 0 0;
    max-width: 24ch;
    font-weight: 800;
    letter-spacing: -.025em;
}

.page-hero__lead {
    margin: 14px 0 0;
    max-width: 62ch;
    color: var(--body);
    font-size: 1.0625rem;
}

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-head);
    font-size: .875rem;
    font-weight: 600;
}

.crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sun-700);
}

.crumbs li + li::before {
    content: "›";
    margin-right: 2px;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
}

.crumbs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--sky-700);
    text-decoration: none;
}

.crumbs a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
    position: relative;
    margin-top: clamp(56px, 8vw, 104px);
    padding-top: clamp(48px, 6vw, 72px);
    background: var(--sky-900);
    color: #CBC8F2;
    border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
}

.site-footer__sun {
    position: absolute;
    top: -40px;
    right: clamp(24px, 10vw, 160px);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sun-400) 0 55%, var(--sun-200) 55.5% 72%, transparent 72.5%);
}

.site-footer__grid {
    position: relative;
    display: grid;
    gap: 36px;
    padding-bottom: 40px;
}

.public-site .site-footer h2,
.public-site .site-footer strong {
    color: var(--paper);
}

.f-heading {
    margin-bottom: 18px;
    font-size: 1.0625rem;
    font-weight: 600;
}

.public-site .site-footer a {
    color: #CBC8F2;
    text-decoration: none;
}

.public-site .site-footer a:hover {
    color: var(--sun-300);
    text-decoration: underline;
}

.site-footer p,
.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.f-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: .9375rem;
}

.f-brand__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.f-brand__row img {
    width: 62px;
    height: auto;
    padding: 5px;
    border-radius: var(--r-sm);
    background: var(--paper);
}

.f-brand__row strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1.4rem;
    line-height: 1.1;
}

.f-brand__row span {
    font-size: .8125rem;
}

.f-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.f-facts li {
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .1);
    font-size: .8125rem;
    font-weight: 600;
}

.f-nav__lists {
    display: flex;
    flex-wrap: wrap;
    gap: 0 32px;
}

.f-links {
    display: grid;
    gap: 2px;
    min-width: 170px;
    font-size: .9375rem;
    font-weight: 600;
}

.f-links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}

.f-links a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sun-400);
}

.f-contact {
    display: grid;
    gap: 14px;
    font-size: .9375rem;
}

.f-contact li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.f-contact > li > .icon {
    display: grid;
    place-items: center;
    flex: none;
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 9px;
    border-radius: var(--r-sm);
    background: rgba(252, 138, 112, .16);
    color: var(--sun-300);
}

.f-contact p {
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.site-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .875rem;
}

.site-footer__bar-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    padding-block: 18px 24px;
}

.f-bar-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
}

.site-footer__bar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

@media (min-width: 640px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .site-footer__grid {
        grid-template-columns: 1.25fr 1.2fr 1fr;
        gap: 48px;
    }
}

/* ---------------------------------------------------------------- home: hero */

.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 52px) 0 clamp(88px, 10vw, 128px);
    background: linear-gradient(180deg, var(--sky-50) 0%, var(--cream) 62%, var(--paper) 100%);
}

.hero__sun {
    position: absolute;
    right: -26%;
    top: 12%;
    width: min(900px, 140vw);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, #DCD8FF 0 26%, #E6E3FF 26.2% 40%, #EEEDFF 40.2% 54%, #F3F2FF 54.2% 68%, transparent 68.2%);
}

.hero__grid {
    position: relative;
    display: grid;
    gap: clamp(36px, 5vw, 60px);
    align-items: center;
}

.hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-5);
}

.public-site .hero h1 {
    max-width: 14ch;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.swoosh {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    z-index: 0;
}

.swoosh svg {
    position: absolute;
    left: -2%;
    bottom: -.14em;
    z-index: -1;
    width: 104%;
    height: .42em;
    overflow: visible;
}

.swoosh path {
    fill: none;
    stroke: var(--sun-400);
    stroke-width: 9;
    stroke-linecap: round;
}

.hero__lead {
    max-width: 52ch;
    margin: 0;
    font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
    line-height: 1.6;
    text-align: justify;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}

.hero__art {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
}

/* Sits behind the photo and shows as a crescent along its right and lower edge. Its inset is deliberately
   tight: any further down and it reads as a second shape under the picture rather than a backing to it. */
.blob-sun {
    position: absolute;
    inset: 14% -3% 0 18%;
    border-radius: 44% 56% 62% 38% / 42% 45% 55% 58%;
    background: linear-gradient(140deg, var(--sun-400), var(--sun-500) 70%);
}

.dots {
    position: absolute;
    right: -1%;
    top: -2%;
    width: 30%;
    height: 22%;
    opacity: .35;
    background-image: radial-gradient(var(--sky-600) 2.2px, transparent 2.8px);
    background-size: 18px 18px;
}

.hero__photo {
    position: relative;
    margin: 0 8% 6% 2%;
    border: 8px solid var(--paper);
    border-radius: 57% 43% 48% 52% / 50% 56% 44% 50%;
    overflow: hidden;
    background: var(--sun-100);
    box-shadow: var(--shadow-lg);
}

.hero__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 55% 40%;
}

.blob-sky {
    position: absolute;
    display: grid;
    place-items: center;
    left: -1%;
    top: -4%;
    width: 24%;
    aspect-ratio: 1;
    border-radius: 58% 42% 38% 62% / 52% 60% 40% 48%;
    background: var(--sky-600);
    color: var(--sun-200);
}

.blob-sky .icon {
    width: 44%;
    height: 44%;
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}

.fact-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(19rem, 100%);
    padding: 10px 16px 10px 10px;
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: var(--shadow-md);
}

.fact-chip .tile {
    width: 42px;
    height: 42px;
    border-radius: var(--r-sm);
}

.fact-chip .tile .icon {
    width: 21px;
    height: 21px;
}

.fact-chip strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1rem;
    line-height: 1.2;
    color: var(--ink);
}

.fact-chip small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
}

@media (min-width: 576px) {

    .fact-chip {
        max-width: 17rem;
    }
}

@media (min-width: 992px) {
    .hero__grid {
        grid-template-columns: 1.05fr .95fr;
    }

    /* Still two columns here, so the chips run along the foot of the hero, under both of them. */
    .hero__facts {
        grid-column: 1 / -1;
        margin-top: 8px;
    }
}

/* Wide enough for a column of its own: the chips stack in the space between the words and the photo,
   which the 52ch cap on the lead paragraph leaves empty. Below this the three columns would squeeze
   the heading and break the two buttons onto separate lines. */
@media (min-width: 1280px) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, .95fr);
    }

    .hero__art {
        grid-column: 3;
        grid-row: 1;
    }

    .hero__facts {
        grid-column: 2;
        grid-row: 1;
        flex-direction: column;
        flex-wrap: nowrap;
        align-self: center;
        width: 17rem;
        gap: 14px;
        margin: 0;
    }

    .fact-chip {
        max-width: none;
    }
}

/* ---------------------------------------------------------------- home: quick links tray */

.services {
    position: relative;
    z-index: 2;
    margin-top: clamp(-88px, -7vw, -56px);
}

.tray {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
    padding: clamp(18px, 2.6vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--paper);
    box-shadow: var(--shadow-md);
}

.tray__head h2 {
    font-size: clamp(1.3rem, 2vw, 1.55rem);
}

.tray__head p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: .9375rem;
}

.tag-sun {
    display: block;
    width: 40px;
    height: 6px;
    margin-bottom: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--sun-500), var(--sun-300));
}

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

.svc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: 100%;
    padding: 16px 14px;
    border: 2px solid transparent;
    border-radius: var(--r-lg);
    color: var(--ink);
    text-decoration: none;
    transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.public-site .svc:hover {
    transform: translateY(-3px);
    background: var(--sun-50);
    border-color: var(--sun-100);
    color: var(--ink);
    text-decoration: none;
}

.svc:hover .tile {
    transform: rotate(-8deg) scale(1.06);
}

.svc .tile {
    border-radius: var(--r-sm);
}

.svc__t {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
}

.svc__t .icon {
    width: .9em;
    height: .9em;
    color: var(--sun-700);
}

.svc__d {
    color: var(--muted);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
}

@media (min-width: 700px) {
    .tray__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .tray {
        grid-template-columns: 210px 1fr;
        align-items: center;
    }

    .tray__head {
        padding-right: 24px;
        border-right: 2px dashed var(--line-2);
    }

    .tray__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;
    }
}

/* ---------------------------------------------------------------- home: welcome */

.welcome__grid {
    display: grid;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}

.welcome__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align:justify;
}

.welcome__copy p {
    max-width: 62ch;
    margin: 0;
}

.welcome__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 6px;
}

.welcome__art,
.intro__art {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding: 0 0 18px 18px;
}

.welcome__blob,
.intro__blob {
    position: absolute;
    inset: 12% 8% 0 0;
    border-radius: 62% 38% 46% 54% / 44% 52% 48% 56%;
    background: var(--sky-100);
}

.welcome__photo,
.intro__photo {
    position: relative;
    margin: 0 0 0 6%;
    border: 8px solid var(--paper);
    border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 100px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.welcome__photo img,
.intro__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 40% 40%;
}

.est-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    margin: 0;
    border-radius: 50%;
    background: var(--sun-500);
    color: var(--ink);
    text-align: center;
    box-shadow: var(--shadow-sun);
}

.est-badge span {
    display: block;
    font-family: var(--font-head);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.public-site .est-badge strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}

@media (min-width: 992px) {
    .welcome__grid {
        grid-template-columns: .95fr 1.05fr;
    }
}

/* ---------------------------------------------------------------- home: notices and certification */

.corner__grid {
    display: grid;
    gap: 24px;
    align-items: start;
}

@media (min-width: 992px) {
    .corner__grid {
        grid-template-columns: 1.3fr .7fr;
        gap: 32px;
    }
}

.board {
    position: relative;
    padding: clamp(20px, 3vw, 32px);
    border: 2px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.board__pin {
    position: absolute;
    display: grid;
    place-items: center;
    top: -16px;
    left: 50%;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sun-500);
    color: var(--ink);
    transform: translateX(-50%) rotate(-12deg);
    box-shadow: var(--shadow-sun);
}

.board__pin .icon {
    width: 18px;
    height: 18px;
}

.board__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.board__head h2 {
    margin: 0;
}

.board__head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .9375rem;
    font-weight: 600;
}

.board__list {
    max-height: 26rem;
    overflow-y: auto;
    border-radius: var(--r-sm);
}

.board__list:focus-visible {
    box-shadow: var(--focus-ring);
}

/* The Pause / Play control of the Daily Updates scroll (public.js), right above the list it controls. */
.board__bar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 8px;
}

.board__bar[hidden] {
    display: none;
}

.public-site .board__toggle {
    gap: 8px;
    padding: 8px 18px;
    font-size: .9375rem;
}

.board__toggle .icon {
    width: 18px;
    height: 18px;
}

/* Pause shows while the list moves; Play once it is paused. */
.board__toggle-pause,
.board__toggle.is-paused .board__toggle-play {
    display: inline-flex;
}

.board__toggle-play,
.board__toggle.is-paused .board__toggle-pause {
    display: none;
}

/* The copy that lets the scroll run round keeps the dashed line between the last notice and the first. */
.notices--copy > li:first-child {
    border-top: 2px dashed var(--line);
}

@media print {
    .board__bar,
    .notices--copy {
        display: none !important;
    }
}

.notices {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 16px 4px;
    border-top: 2px dashed var(--line);
}

.notices li:first-child .notice,
.notices > li:first-child {
    border-top: 0;
}

.notice__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    margin: 0;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--sun-100);
    color: var(--sun-700);
    font-family: var(--font-head);
    font-size: .8125rem;
    font-weight: 600;
}

.notice__date .icon {
    width: 1em;
    height: 1em;
}

.notice__main {
    flex: 1 1 14rem;
    min-width: 0;
}

.notice__title {
    margin: 0 0 4px;
    font-size: 1.0625rem;
    font-weight: 700;
}

.notice__body {
    overflow-wrap: anywhere;
}

.notice__body p {
    margin-bottom: .35rem;
}

.board__message {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 16px;
    border-radius: var(--r-md);
    background: var(--sun-50);
    color: var(--ink);
    font-weight: 600;
}

.board__message .icon {
    color: var(--sun-700);
}

.board__more {
    margin: 8px 0 0;
    text-align: right;
}

.certified {
    text-align: center;
}

.certified .sec-title::before {
    margin-inline: auto;
}

.certified__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.certified__list li {
    width: 194px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--sun-50);
}

.certified__list img {
    display: block;
    width: 100%;
    border-radius: var(--r-sm);
    background: var(--paper);
}

.certified__note {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: .875rem;
}

/* ---------------------------------------------------------------- home: courses */

.panel {
    position: relative;
    overflow: hidden;
    margin-inline: clamp(8px, 1.6vw, 24px);
    border-radius: clamp(28px, 4vw, 48px);
    background: var(--cream);
}

.panel::before {
    content: "";
    position: absolute;
    right: -230px;
    top: -270px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sky-100) 0 45%, transparent 45.5%);
}

.panel > .sc-wrap {
    position: relative;
}

.course-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-tile {
    display: grid;
    place-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.course-tile img {
    display: block;
    width: 100%;
    max-width: 238px;
    height: auto;
}

.courses__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: clamp(24px, 3vw, 36px);
}

.industrial {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1 1 22rem;
}

.industrial h2,
.industrial h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.industrial--wide {
    flex: 1 1 auto;
}

.industrial-section {
    margin-top: clamp(32px, 4vw, 48px);
}

/* ---------------------------------------------------------------- home: special features */

.features {
    background: linear-gradient(180deg, var(--paper) 0%, var(--sky-50) 100%);
}

.features__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feat {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border: 2px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.feat p {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.5;
}

.feat .tile {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
}

.feat .tile .icon {
    width: 22px;
    height: 22px;
}

.feat:hover {
    transform: translateY(-3px);
    border-color: var(--sun-200);
    box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------------- call-to-action bands */

.cta-wrap {
    padding-bottom: clamp(24px, 4vw, 48px);
}

.cta {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 36px;
    align-items: center;
    padding: clamp(28px, 5vw, 64px);
    border-radius: clamp(28px, 4vw, 48px);
    background: linear-gradient(135deg, var(--sky-600) 0%, var(--sky-700) 60%, var(--sky-900) 100%);
    /* Near-white, not a lavender tint: indigo is lighter than the blue this band used to be, and under the aside's
       6% white wash a tinted text fell to 4.4:1. This keeps 4.8:1 there and 5.4:1 on the bare band. */
    color: #EEEDFF;
}

.cta__sun {
    position: absolute;
    left: -150px;
    bottom: -230px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, var(--sun-400) 0 36%, rgba(252, 138, 112, .4) 36.5% 56%, rgba(252, 138, 112, .16) 56.5% 76%, transparent 76.5%);
}

.cta__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.public-site .cta h2 {
    max-width: 16ch;
    color: var(--paper);
    font-size: clamp(1.8rem, 3.4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.cta__hl {
    color: var(--sun-300);
}

.cta p {
    max-width: 52ch;
    margin: 0;
}

.cta__steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cta__steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--paper);
    font-weight: 700;
}

.public-site .cta__steps li b {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* White on the lightest end of the band (--sky-600): .18 leaves only 4.45:1, .14 gives 4.84:1. */
    background: rgba(255, 255, 255, .14);
    color: var(--paper);
    font-family: var(--font-head);
    font-size: .875rem;
}

.cta__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.cta__aside {
    position: relative;
    padding: clamp(20px, 3vw, 28px);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-lg);
    /* One column below 992px puts this panel over the lightest end of the band. The wash stays at .06: with the
       band's #EEEDFF text that is 4.8:1 at the lightest point, and any stronger wash would cost the margin. */
    background: rgba(255, 255, 255, .06);
}

.cta__aside p,
.cta__aside address {
    margin: 0 0 10px;
}

.cta__aside-head {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--paper);
    font-family: var(--font-head);
    font-weight: 700;
}

.cta__aside-head .icon {
    color: var(--sun-300);
}

/* White for the plain links on the dark band, but not for a button: the orange one carries ink text
   (7.1:1), and white on that orange would be 2.1:1. */
.public-site .cta a:not(.sbtn) {
    color: var(--paper);
}

@media (min-width: 992px) {
    .cta {
        grid-template-columns: 1.15fr .85fr;
    }
}

.join-band {
    margin: clamp(32px, 5vw, 56px) 0 0;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid var(--sky-100);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--sky-50), var(--paper));
}

.join-band__in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.join-band h2 {
    margin: 0 0 6px;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

.join-band p {
    max-width: 58ch;
    margin: 0;
    color: var(--body);
}

.join-band__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------------------------------------------------------------- inner pages: prose and cards */

.prose-page > * + * {
    margin-top: clamp(36px, 5vw, 64px);
}

.prose p,
.prose li {
    font-size: 1.0625rem;
    line-height: 1.75;
}

.prose p {
    max-width: 100%;
    margin: 0 0 1rem;
}

.prose > h2,
.prose > h3 {
    scroll-margin-top: calc(var(--header-h) + 24px);
}

.content-subheading {
    margin: 28px 0 10px;
    color: var(--sun-700);
    font-size: 1.25rem;
    font-weight: 700;
}

.prose--intro {
    margin-top: 0;
}

.intro__grid {
    display: grid;
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
}

.intro__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.intro__copy p {
    /*max-width: 62ch;*/
    margin: 0;
}

@media (min-width: 992px) {
    .intro__grid {
        grid-template-columns: 1.1fr .9fr;
    }
}

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 12px;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.fact {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: var(--r-lg);
    background: var(--bg, var(--sun-100));
}

.fact::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
}

.public-site .fact b {
    position: relative;
    display: block;
    color: var(--fg, var(--sun-700));
    font-family: var(--font-head);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
}

.fact span {
    position: relative;
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
}

.fact--sun {
    --bg: var(--sun-100);
    --fg: var(--sun-700);
}

.fact--sky {
    --bg: var(--sky-100);
    --fg: var(--sky-700);
}

.fact--mint {
    --bg: var(--mint-100);
    --fg: var(--mint-700);
}

.fact--lilac {
    --bg: var(--lilac-100);
    --fg: var(--lilac-700);
}

.toc {
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--sun-500);
    border-radius: var(--r-md);
    background: var(--sun-50);
}

.toc__title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
}

.toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.toc a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 16px;
    border: 1px solid var(--control-line);
    border-radius: var(--r-pill);
    background: var(--paper);
    color: var(--sky-700);
    font-family: var(--font-head);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.toc a:hover {
    border-color: var(--sky-600);
    background: var(--sky-50);
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 16px;
    margin-top: 20px;
}

.info-card h3 {
    margin: 14px 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
}

.info-card p {
    margin: 0 0 .75rem;
    font-size: 1rem;
    line-height: 1.65;
}

.info-card p:last-child {
    margin-bottom: 0;
}

.table-card {
    max-width: 100%;
    margin: 0 0 1.25rem;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

.policy-table,
.crash-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 1rem;
}

.policy-table th,
.policy-table td,
.crash-table th,
.crash-table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.policy-table thead th,
.crash-table thead th {
    background: var(--sun-50);
    color: var(--sun-700);
    font-family: var(--font-head);
    font-weight: 700;
    white-space: nowrap;
}

.policy-table tbody th,
.crash-table tbody th {
    font-weight: 400;
    color: var(--body);
}

.policy-table tbody tr:last-child td,
.crash-table tbody tr:last-child th,
.crash-table tbody tr:last-child td {
    border-bottom: 0;
}

.crash-table td {
    width: 6rem;
    white-space: nowrap;
}

.crash-table tfoot td {
    width: auto;
    padding-top: 12px;
    color: var(--muted);
    white-space: normal;
}

.rules-list {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.rules-list li {
    margin-bottom: .5rem;
}

/* ---------------------------------------------------------------- courses page */

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-card {
    display: flex;
    flex-direction: column;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
}

.course-card__img {
    display: grid;
    place-items: center;
    padding: 10px;
    margin-bottom: 14px;
    border-radius: var(--r-sm);
    background: var(--sun-50);
}

.course-card__img img {
    display: block;
    width: 100%;
    max-width: 238px;
    height: auto;
}

.course-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.course-card__head h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
}

.course-card__duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--sky-100);
    color: var(--sky-700);
    font-family: var(--font-head);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.course-card__duration .icon {
    width: 1em;
    height: 1em;
}

.course-card__name {
    margin: 10px 0 0;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}

.course-card__topics {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px dashed var(--line-2);
    list-style: none;
}

.course-card__topics li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9375rem;
    line-height: 1.5;
}

.course-card__topics .icon {
    width: 1.1em;
    height: 1.1em;
    margin-top: .15em;
    color: var(--mint-700);
}

.crash {
    margin-top: clamp(40px, 5vw, 64px);
}

.crash__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 20px;
}

.crash__grid .table-card {
    max-width: none;
    margin: 0;
}

/* ---------------------------------------------------------------- faculty and placement */

.people {
    margin-top: clamp(36px, 5vw, 56px);
}

/* A wrapping flex row rather than a grid: a row that does not fill the width (the two leadership
   cards, the three trailing faculty cards) then centres instead of sitting against the left edge.
   A grid cannot do this, because its empty tracks keep their width on the last row. */
.people-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.person-card {
    /* 200px keeps a card at its photo's own width (169 x 200) instead of stretching it. */
    flex: 1 1 170px;
    max-width: 200px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.person-card__photo {
    display: block;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--sky-50);
}

.person-card__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 169 / 200;
    object-fit: cover;
}

.person-card__role {
    margin: 12px 0 0;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 700;
}

.person-card__subrole {
    margin: 0;
    color: var(--muted);
    font-size: .875rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------- admission page */

.admission__grid {
    display: grid;
    gap: clamp(24px, 4vw, 40px);
    align-items: start;
}

@media (min-width: 992px) {
    .admission__grid {
        grid-template-columns: 1.4fr .6fr;
    }

    .admission__side {
        position: sticky;
        top: calc(var(--header-h) + 24px);
    }
}

.admission__side {
    display: grid;
    gap: 16px;
}

.apply-card h2 {
    margin: 14px 0 10px;
    font-size: 1.25rem;
}

.apply-card p {
    margin: 0 0 12px;
}

.apply-card .steps {
    margin-bottom: 18px;
}

.apply-card .sbtn {
    width: 100%;
}

/* ---------------------------------------------------------------- notices page */

.notice-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notice-card {
    border-left: 4px solid var(--sun-500);
}

.notice-card__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--sun-100);
    color: var(--sun-700);
    font-family: var(--font-head);
    font-size: .8125rem;
    font-weight: 600;
}

.notice-card__date .icon {
    width: 1em;
    height: 1em;
}

.notice-card__title {
    margin: 0 0 8px;
    font-size: 1.25rem;
}

.notice-card__body {
    overflow-wrap: anywhere;
}

.empty-state {
    max-width: 34rem;
    margin-inline: auto;
    text-align: center;
}

.empty-state .tile {
    margin: 0 auto 14px;
}

.empty-state__title {
    margin: 0 0 6px;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 700;
}

.empty-state p {
    color: var(--muted);
}

.empty-state .sbtn {
    margin-top: 16px;
}

/* ---------------------------------------------------------------- result lookup */

.lookup {
    max-width: 34rem;
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--paper);
    box-shadow: var(--shadow-lg);
}

.lookup__top {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 3vw, 30px);
    background: linear-gradient(135deg, var(--sky-600), var(--sky-700));
    color: #EEEDFF;
}

.lookup__top::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -60px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sun-400) 0 34%, rgba(252, 138, 112, .35) 34.5% 56%, rgba(252, 138, 112, .15) 56.5% 78%, transparent 78.5%);
}

.public-site .lookup__top h2 {
    position: relative;
    margin: 14px 0 0;
    color: var(--paper);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.lookup__top p {
    position: relative;
    max-width: 38ch;
    margin: 8px 0 0;
}

.lookup form {
    display: grid;
    gap: 16px;
    padding: clamp(20px, 3vw, 28px);
}

.lookup .sbtn {
    width: 100%;
}

.lookup__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--muted);
    font-size: .875rem;
}

.lookup__note .icon {
    color: var(--sky-700);
}

.lookup__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 20px;
    margin: 0;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.marksheet-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}

.marksheet-toolbar__title {
    margin: 0;
}

.marksheet-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------------------------------------------------------------- sign-in (split panel) */

.auth-page {
    padding-block: clamp(32px, 5vw, 64px);
    background: linear-gradient(180deg, var(--sky-50) 0%, var(--paper) 100%);
}

.auth-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 62rem;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--paper);
    box-shadow: var(--shadow-lg);
}

.auth-card__side {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(24px, 4vw, 40px);
    background: linear-gradient(150deg, var(--sky-600) 0%, var(--sky-700) 60%, var(--sky-900) 100%);
    color: #EEEDFF;
}

.auth-card__side::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -130px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, var(--sun-400) 0 34%, rgba(252, 138, 112, .35) 34.5% 56%, rgba(252, 138, 112, .15) 56.5% 78%, transparent 78.5%);
}

.auth-card__side > * {
    position: relative;
    z-index: 1;
    margin: 0;
}

.auth-card__logo {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    padding: 8px;
    border-radius: var(--r-md);
    background: var(--paper);
}

.auth-card__title {
    color: var(--paper);
    font-family: var(--font-head);
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 700;
    line-height: 1.2;
}

.auth-card__points {
    display: grid;
    gap: 10px;
    padding: 0;
    list-style: none;
    font-weight: 600;
}

.auth-card__points li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.auth-card__points .icon {
    color: var(--sun-300);
    margin-top: .15em;
}

.auth-card__foot {
    margin-top: auto;
    padding-top: 12px;
    font-size: .9375rem;
}

.public-site .auth-card__side a {
    color: var(--paper);
    font-weight: 700;
}

.auth-card__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(24px, 4vw, 40px);
}

.auth-card__form h1 {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2rem);
}

.auth-card__lead {
    margin: -8px 0 0;
    color: var(--muted);
    font-weight: 600;
}

.auth-card__form form {
    display: grid;
    gap: 16px;
}

.auth-card__form .sbtn {
    width: 100%;
}

.auth-card__remember .form-check-label {
    font-weight: 600;
}

.auth-card__links {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.auth-card__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-family: var(--font-head);
    font-weight: 600;
    text-decoration: none;
}

.auth-card__links a:hover {
    text-decoration: underline;
}

@media (min-width: 900px) {
    .auth-card {
        grid-template-columns: .85fr 1.15fr;
    }
}

@media (max-width: 899.98px) {
    .auth-card__points,
    .auth-card__foot {
        display: none;
    }
}

/* ---------------------------------------------------------------- error pages */

.status-page {
    padding-block: clamp(40px, 6vw, 80px);
    background: linear-gradient(180deg, var(--sky-50) 0%, var(--paper) 100%);
}

.status-card {
    max-width: 38rem;
    margin-inline: auto;
    padding: clamp(24px, 4vw, 40px);
    text-align: center;
}

.status-card .tile {
    margin: 0 auto 16px;
}

.status-card__code {
    display: inline-block;
    margin: 0 0 10px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--sky-50);
    color: var(--sky-700);
    font-family: var(--font-head);
    font-size: .8125rem;
    font-weight: 600;
}

.status-card h1 {
    margin: 0 0 10px;
}

.status-card__message {
    margin: 0 auto;
    max-width: 46ch;
    color: var(--muted);
}

.status-card__reference {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.status-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

/* ---------------------------------------------------------------- forms (shared by every public form) */

.public-site .form-label {
    margin-bottom: 7px;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: .9375rem;
    font-weight: 600;
}

.public-site .form-control,
.public-site .form-select {
    min-height: 48px;
    padding: 11px 14px;
    border: 2px solid var(--control-line);
    border-radius: var(--r-sm);
    background-color: var(--field-bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
}

.public-site .form-control[type="file"]::file-selector-button {
    padding: 11px 14px;
    margin: -11px -14px;
    margin-inline-end: 14px;
    border: 0;
    border-inline-end: 1px solid var(--control-line);
    background: var(--sun-50);
    color: var(--ink);
    font-family: var(--font-head);
    font-weight: 600;
}

.public-site .form-control[type="file"]:hover::file-selector-button {
    background: var(--sun-100);
}

.public-site textarea.form-control {
    min-height: 6rem;
    line-height: 1.6;
}

.public-site .form-control:hover,
.public-site .form-select:hover {
    border-color: var(--sky-700);
}

.public-site .form-control::placeholder {
    color: var(--muted);
}

.public-site .form-text {
    margin-top: 6px;
    color: var(--muted);
    font-size: .875rem;
}

.field {
    min-width: 0;
}

.field + .field {
    margin-top: 18px;
}

.lookup .field + .field,
.auth-card__form .field + .field,
.form-grid .field + .field {
    margin-top: 0;
}

.public-site .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .15rem;
    border: 2px solid var(--control-line);
    background-color: var(--paper);
}

.public-site .form-check-input:checked {
    border-color: var(--sky-600);
    background-color: var(--sky-600);
}

.public-site .form-check-label {
    padding-left: .25rem;
    color: var(--ink);
}

.public-site .text-danger {
    display: inline-block;
    color: var(--rose-700) !important;
    font-weight: 600;
}

.public-site .text-danger:empty {
    display: none;
}

.required-marker {
    margin-left: .15rem;
    color: var(--rose-700);
    font-weight: 700;
}

.form-required-note {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: .9375rem;
}

.form-optional {
    color: var(--muted);
    font-size: .875em;
    font-weight: 400;
}

.public-site .alert {
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-weight: 600;
}

.public-site .alert-success {
    border-color: var(--mint-100);
    background: var(--mint-100);
    color: #0A5B3C;
}

.public-site .alert-warning {
    border-color: var(--lemon-100);
    background: var(--lemon-100);
    color: var(--lemon-700);
}

.public-site .alert-danger {
    border-color: var(--rose-100);
    background: var(--rose-100);
    color: var(--rose-700);
}

.public-site .alert-danger a,
.public-site .alert-success a {
    color: inherit;
}

.public-site .validation-summary-errors ul {
    margin: 0;
    padding-left: 1.2rem;
}

/* Bootstrap buttons that stay in shared partials (the pager) follow the theme. */
.public-site .btn {
    min-height: 44px;
    border-radius: var(--r-pill);
    font-family: var(--font-head);
    font-weight: 600;
}

/* Bootstrap's primary button, where another module's public page uses it: the same indigo main action. */
.public-site .btn-primary {
    border-color: transparent;
    background: var(--sky-600);
    color: var(--paper);
}

.public-site .btn-primary:hover {
    background: var(--sky-700);
    color: var(--paper);
}

.public-site .btn-outline-secondary {
    border: 2px solid var(--control-line);
    background: var(--paper);
    color: var(--sky-700);
}

.public-site .btn-outline-secondary:hover {
    border-color: var(--sky-600);
    background: var(--sky-50);
    color: var(--sky-700);
}

.public-site .btn-sm {
    min-height: 40px;
}

/* Pager (shared _Pager partial). */
.public-site .pagination {
    gap: 6px;
}

.public-site .page-link {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--control-line);
    border-radius: var(--r-sm);
    background: var(--paper);
    color: var(--sky-700);
    font-family: var(--font-head);
    font-weight: 600;
}

.public-site .page-link:hover {
    border-color: var(--sky-600);
    background: var(--sky-50);
}

.public-site .page-item.active .page-link {
    border-color: var(--sky-600);
    background: var(--sky-600);
    color: var(--paper);
}

/* A disabled pager link is not operable, so it keeps the quiet line: the darker control boundary would read as
   "you can press this". WCAG 1.4.11 does not apply to disabled controls. */
.public-site .page-item.disabled .page-link {
    border-color: var(--line-2);
    background: var(--line);
    color: var(--muted);
}

/* ---------------------------------------------------------------- motion (subtle, and only when welcome) */

/* public.js marks the sections still below the fold; they fade and rise once, when scrolled to. Without
   JavaScript, and with prefers-reduced-motion, nothing is ever hidden. */
.reveal-pending {
    opacity: 0;
    transform: translateY(12px);
}

.js-reveal [data-reveal] {
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .public-site *,
    .public-site *::before,
    .public-site *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal-pending {
        opacity: 1;
        transform: none;
    }

    .sbtn:hover,
    .svc:hover,
    .feat:hover,
    .svc:hover .tile {
        transform: none;
    }
}

/* ---------------------------------------------------------------- print */

@media print {
    .top-strip,
    .site-header,
    .site-footer,
    .page-hero__sun,
    .page-hero__dots,
    .crumbs-nav,
    .join-band,
    .skip-link {
        display: none !important;
    }

    /* A section that has not been scrolled to yet still prints. */
    .reveal-pending {
        opacity: 1;
        transform: none;
    }

    .page-hero {
        padding: 0 0 12px;
        background: none;
        border: 0;
    }

    .sc-wrap {
        padding: 0;
    }

    .card-s,
    .lookup,
    .status-card {
        box-shadow: none;
    }
}