/* ==========================================================================
   Peace English Medium School — design system
   Navy / royal blue / gold on white, with generous whitespace.

   Self-contained: CSS Grid handles layout, so no framework grid is loaded.
   The only third-party CSS the site pulls in is Remix Icon (icon font),
   Swiper (testimonial carousel) and Magnific Popup (gallery lightbox).
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
    /* brand */
    --pc-navy:        #0A2E5D;
    --pc-navy-deep:   #061E3E;
    --pc-navy-soft:   #143f77;
    --pc-royal:       #1857C4;
    --pc-royal-light: #3B7BE8;
    --pc-gold:        #C8A24A;
    --pc-gold-light:  #E3C77E;
    --pc-gold-soft:   #F6EEDC;

    /* neutrals */
    --pc-ink:         #0E1726;
    --pc-body:        #4B5666;
    --pc-muted:       #77839A;
    --pc-line:        #E4E8EF;
    --pc-line-soft:   #EFF2F7;
    --pc-grey:        #F5F7FA;
    --pc-grey-deep:   #EDF1F6;
    --pc-white:       #FFFFFF;

    /* type */
    --pc-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --pc-display:     'Plus Jakarta Sans', var(--pc-font);

    /* rhythm */
    --pc-section:     clamp(4.5rem, 9vw, 8.5rem);
    --pc-radius:      18px;
    --pc-radius-lg:   26px;
    --pc-radius-pill: 100px;

    /* elevation */
    --pc-shadow-sm:   0 1px 2px rgba(10, 46, 93, .04), 0 4px 14px rgba(10, 46, 93, .05);
    --pc-shadow:      0 2px 6px rgba(10, 46, 93, .05), 0 18px 44px rgba(10, 46, 93, .09);
    --pc-shadow-lg:   0 30px 80px rgba(10, 46, 93, .16);

    --pc-ease:        cubic-bezier(.22, 1, .36, 1);
    --pc-header-h:    76px;
}

/* ----------------------------------------------------------- 2. Base reset */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--pc-header-h) + 20px);
    -webkit-text-size-adjust: 100%;
    /* The off-canvas drawer parks beyond the right edge, so the horizontal
       axis is clipped here. It must be `clip`, not `hidden`: `hidden` turns
       the element into a scroll container (the other axis computes to `auto`),
       and that silently disables every `position: sticky` on the page. */
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--pc-font);
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--pc-body);
    background: var(--pc-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;               /* `hidden` here would also break sticky */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--pc-display);
    color: var(--pc-ink);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.022em;
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.95rem); }
h3 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
h4 { font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
h5 { font-size: 1.0625rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--pc-royal);
    text-decoration: none;
    transition: color .25s var(--pc-ease);
}
a:hover { color: var(--pc-navy); }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
li { margin-bottom: .45rem; }

hr {
    border: 0;
    border-top: 1px solid var(--pc-line);
    margin: 3rem 0;
    opacity: 1;
}

::selection { background: var(--pc-navy); color: #fff; }

:focus-visible {
    outline: 3px solid var(--pc-royal-light);
    outline-offset: 3px;
    border-radius: 4px;
}

.pc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 3000;
    background: var(--pc-navy);
    color: #fff;
    padding: .9rem 1.5rem;
    border-radius: 0 0 var(--pc-radius) 0;
    font-weight: 600;
}
.pc-skip-link:focus {
    left: 0;
    color: #fff;
}

/* ------------------------------------------------------------ 3. Utilities */

.pc-container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}
.pc-container--narrow { max-width: 880px; }
.pc-container--wide   { max-width: 1440px; }

.pc-section        { padding-block: var(--pc-section); position: relative; }
.pc-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.pc-section--grey  { background: var(--pc-grey); }
.pc-section--navy  { background: var(--pc-navy); color: rgba(255, 255, 255, .78); }
.pc-section--navy h1,
.pc-section--navy h2,
.pc-section--navy h3,
.pc-section--navy h4 { color: #fff; }

.pc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--pc-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pc-royal);
    margin-bottom: 1.15rem;
}
.pc-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--pc-gold);
    border-radius: 2px;
}
.pc-section--navy .pc-eyebrow { color: var(--pc-gold-light); }

.pc-lead {
    font-size: clamp(1.075rem, 1.6vw, 1.28rem);
    line-height: 1.62;
    color: var(--pc-body);
}
.pc-section--navy .pc-lead { color: rgba(255, 255, 255, .82); }

.pc-head          { max-width: 720px; margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.pc-head--center  { margin-inline: auto; text-align: center; }
.pc-head--center .pc-eyebrow::before { display: none; }

/* show only from a breakpoint up — the only display utilities the site needs,
   which is why Bootstrap is not loaded */
.pc-from-md  { display: none !important; }
.pc-from-lg  { display: none !important; }
@media (min-width: 768px)  { .pc-from-md { display: inline-flex !important; } }
@media (min-width: 992px)  { .pc-from-lg { display: inline-flex !important; } }

.pc-muted    { color: var(--pc-muted); }
.pc-gold     { color: var(--pc-gold); }
.pc-nowrap   { white-space: nowrap; }
.pc-mt-lg    { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pc-center   { text-align: center; }

/* ------------------------------------------------------------- 4. Buttons */

.pc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-family: var(--pc-display);
    font-size: .96rem;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1;
    padding: 1.05rem 1.95rem;
    border: 1px solid transparent;
    border-radius: var(--pc-radius-pill);
    cursor: pointer;
    text-align: center;
    transition: transform .3s var(--pc-ease), background-color .25s var(--pc-ease),
                color .25s var(--pc-ease), border-color .25s var(--pc-ease),
                box-shadow .3s var(--pc-ease);
}
.pc-btn i { font-size: 1.15em; }
.pc-btn:hover { transform: translateY(-2px); }
.pc-btn:active { transform: translateY(0); }

.pc-btn--primary {
    background: var(--pc-navy);
    color: #fff;
    box-shadow: 0 8px 24px rgba(10, 46, 93, .22);
}
.pc-btn--primary:hover {
    background: var(--pc-navy-soft);
    color: #fff;
    box-shadow: 0 14px 34px rgba(10, 46, 93, .3);
}

.pc-btn--gold {
    background: var(--pc-gold);
    color: var(--pc-navy-deep);
    box-shadow: 0 8px 24px rgba(200, 162, 74, .3);
}
.pc-btn--gold:hover {
    background: var(--pc-gold-light);
    color: var(--pc-navy-deep);
    box-shadow: 0 14px 34px rgba(200, 162, 74, .38);
}

/* The outline is drawn in the brand navy rather than the hairline grey — at
   1px on a light-grey section band the grey was all but invisible. */
.pc-btn--ghost {
    background: transparent;
    color: var(--pc-navy);
    border-color: var(--pc-navy);
}
.pc-btn--ghost:hover {
    border-color: var(--pc-navy);
    background: var(--pc-navy);
    color: #fff;
}

.pc-btn--glass {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.pc-btn--glass:hover {
    background: #fff;
    color: var(--pc-navy);
    border-color: #fff;
}

.pc-btn--sm { padding: .78rem 1.4rem; font-size: .88rem; }
.pc-btn--block { width: 100%; }

.pc-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--pc-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--pc-royal);
}
.pc-link i { transition: transform .3s var(--pc-ease); }
.pc-link:hover i { transform: translateX(4px); }

.pc-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}
.pc-btn-row--center { justify-content: center; }

/* ---------------------------------------------------- 5. Header + navigation */

.pc-topbar {
    background: var(--pc-navy-deep);
    color: rgba(255, 255, 255, .72);
    font-size: .82rem;
}
.pc-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 42px;
    flex-wrap: wrap;
}
.pc-topbar a { color: rgba(255, 255, 255, .78); }
.pc-topbar a:hover { color: var(--pc-gold-light); }
.pc-topbar__list {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.pc-topbar__list li { margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
.pc-topbar__list i { color: var(--pc-gold); font-size: 1rem; }
.pc-topbar__social { display: flex; gap: .3rem; }
.pc-topbar__social a {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
    transition: background-color .25s var(--pc-ease), color .25s var(--pc-ease);
}
/* These sit inside a .pc-topbar__list, whose `i` rule paints every icon gold.
   That rule is meant for the pin and clock icons; left to apply here it also
   painted the social glyphs gold — which vanished against the gold hover fill.
   Inheriting from the anchor lets them follow both the rest and hover states. */
.pc-topbar__social a i { color: inherit; }
.pc-topbar__social a:hover { background: var(--pc-gold); color: var(--pc-navy-deep); }

.pc-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--pc-line-soft);
    transition: box-shadow .3s var(--pc-ease), background-color .3s var(--pc-ease);
}
.pc-header.is-stuck { box-shadow: 0 6px 30px rgba(10, 46, 93, .09); }

.pc-header__inner {
    position: relative;          /* the containing block for the mega panels */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--pc-header-h);
}

.pc-brand { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.pc-brand img { height: 46px; width: auto; }
.pc-brand__crest { height: 46px; width: auto; }
.pc-brand__text { display: none; }
@media (min-width: 400px) {
    .pc-brand__text {
        display: block;
        font-family: var(--pc-display);
        font-weight: 800;
        font-size: .92rem;
        letter-spacing: .04em;
        line-height: 1.2;
        color: var(--pc-navy);
        text-transform: uppercase;
    }
    .pc-brand__text span {
        display: block;
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .11em;
        color: var(--pc-muted);
        margin-top: .18rem;
    }
}

/* desktop menu — six items fit beside the brand and CTA from 1280px up. The old
   eight-item menu needed 1300px and had to drop the wordmark between 1300 and
   1460px to make room; grouping the pages into mega panels bought back the
   wordmark at every width and a little room besides. "Curriculum & Syllabus" is
   the long one — at 1200px it squeezed the gaps down to the 24px flex minimum,
   so the handover to the drawer sits at 1280 rather than 1200. */
.pc-nav { display: none; }
@media (min-width: 1280px) {
    .pc-nav { display: block; margin-inline: auto; }
}
.pc-nav__list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pc-nav__list > li { margin: 0; position: relative; }
.pc-nav__list > li > a {
    display: inline-flex;
    align-items: center;
    gap: .22rem;
    font-family: var(--pc-display);
    font-size: .885rem;
    font-weight: 600;
    color: var(--pc-ink);
    padding: .62rem .62rem;
    border-radius: var(--pc-radius-pill);
    white-space: nowrap;
}
@media (min-width: 1460px) {
    .pc-nav__list { gap: .1rem; }
    .pc-nav__list > li > a { font-size: .93rem; padding: .65rem .82rem; }
}
.pc-nav__list > li > a::after { color: var(--pc-muted); }
.pc-nav__list > li:hover > a,
.pc-nav__list > li.is-active > a { color: var(--pc-royal); background: var(--pc-grey); }
.pc-nav__caret { font-size: .95rem; opacity: .55; transition: transform .25s var(--pc-ease); }
.pc-nav__list > li:hover .pc-nav__caret { transform: rotate(180deg); }

/* ---- mega panel -----------------------------------------------------------
   The panel spans the header rather than hanging off its own menu item, so the
   trigger goes `position: static` and the panel resolves against
   .pc-header__inner. Three titled columns plus a feature card: it is what lets
   six menu items carry forty pages without a wall of long dropdowns. */
.pc-nav__list > li.has-mega { position: static; }

.pc-mega {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--pc-line-soft);
    border-radius: var(--pc-radius-lg);
    box-shadow: 0 24px 70px rgba(6, 30, 62, .16);
    padding: 2rem 2.1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .26s var(--pc-ease), transform .26s var(--pc-ease), visibility .26s;
}
.pc-nav__list > li.has-mega:hover .pc-mega,
.pc-nav__list > li.has-mega:focus-within .pc-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* a hit area bridging the gap between the trigger and the panel, so the menu
   does not close while the pointer travels down to it */
.pc-mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

.pc-mega__inner { display: grid; grid-template-columns: 1fr 300px; gap: 2.4rem; }
@media (max-width: 1459px) {
    .pc-mega__inner { grid-template-columns: 1fr 250px; gap: 1.8rem; }
    .pc-mega { padding: 1.7rem 1.8rem; }
}
.pc-mega__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2rem; }

.pc-mega__title {
    font-family: var(--pc-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pc-royal);
    margin: 0 0 .9rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--pc-line);
}
.pc-mega__col ul { list-style: none; margin: 0; padding: 0; }
.pc-mega__col li { margin: 0; }
.pc-mega__col a {
    display: block;
    padding: .5rem .65rem;
    margin-left: -.65rem;
    border-radius: 10px;
    transition: background-color .18s var(--pc-ease);
}
.pc-mega__col a:hover,
.pc-mega__col a:focus-visible,
.pc-mega__col a.is-active { background: var(--pc-grey); }
.pc-mega__label {
    display: block;
    font-family: var(--pc-display);
    font-size: .92rem;
    font-weight: 600;
    color: var(--pc-ink);
    line-height: 1.3;
}
.pc-mega__col a:hover .pc-mega__label,
.pc-mega__col a.is-active .pc-mega__label { color: var(--pc-royal); }
.pc-mega__desc {
    display: block;
    font-size: .765rem;
    color: var(--pc-muted);
    line-height: 1.35;
    margin-top: .12rem;
}

.pc-mega__feature {
    position: relative;
    display: block;
    border-radius: var(--pc-radius);
    overflow: hidden;
    min-height: 100%;
    background: var(--pc-navy-deep);
}
.pc-mega__feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform .5s var(--pc-ease);
}
.pc-mega__feature:hover img { transform: scale(1.05); }
.pc-mega__featuretext {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .55rem;
    min-height: 260px;
    padding: 1.3rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(6, 30, 62, .06) 0%, rgba(6, 30, 62, .58) 46%, rgba(6, 30, 62, .9) 100%);
}
.pc-mega__featuretext strong {
    font-family: var(--pc-display);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.28;
    text-wrap: balance;
}
.pc-mega__featuretext > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--pc-gold-light);
}
.pc-mega__feature:hover .pc-mega__featuretext > span i { transform: translateX(4px); }
.pc-mega__featuretext i { transition: transform .25s var(--pc-ease); }

.pc-header__actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.pc-header__cta { display: none; }
@media (min-width: 768px) { .pc-header__cta { display: inline-flex; } }

.pc-burger {
    display: inline-grid;
    place-items: center;
    width: 46px; height: 46px;
    border: 1px solid var(--pc-line);
    border-radius: 14px;
    background: #fff;
    color: var(--pc-navy);
    font-size: 1.4rem;
    cursor: pointer;
}
/* Must match the .pc-nav breakpoint exactly. If the burger hides before the bar
   appears, the band between them has no navigation at all. */
@media (min-width: 1280px) { .pc-burger { display: none; } }

/* mobile drawer */
.pc-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 92vw);
    background: #fff;
    z-index: 2000;
    transform: translateX(102%);
    /* hidden while parked, so its links stay out of the tab order */
    visibility: hidden;
    transition: transform .45s var(--pc-ease), visibility .45s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--pc-shadow-lg);
}
.pc-drawer.is-open { transform: translateX(0); visibility: visible; }
.pc-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--pc-line-soft);
}
.pc-drawer__close {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border: 1px solid var(--pc-line);
    border-radius: 12px;
    background: #fff;
    font-size: 1.3rem;
    color: var(--pc-navy);
    cursor: pointer;
}
.pc-drawer__body { overflow-y: auto; padding: 1rem 1.35rem 2rem; flex: 1; }
.pc-drawer__list { list-style: none; margin: 0; padding: 0; }
.pc-drawer__list li { margin: 0; border-bottom: 1px solid var(--pc-line-soft); }
.pc-drawer__list > li > a,
.pc-drawer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: .5rem;
    padding: .95rem .2rem;
    font-family: var(--pc-display);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--pc-ink);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.pc-drawer__toggle i { transition: transform .3s var(--pc-ease); color: var(--pc-muted); }
.pc-drawer__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.pc-drawer__sub {
    list-style: none;
    margin: 0;
    padding: 0 0 .6rem .2rem;
    display: none;
}
.pc-drawer__sub.is-open { display: block; }
.pc-drawer__sub li { border: 0; }
.pc-drawer__sub a {
    display: block;
    padding: .5rem 0;
    font-size: .94rem;
    color: var(--pc-body);
}
.pc-drawer__sub a:hover,
.pc-drawer__sub a.is-active { color: var(--pc-royal); }
/* the mega panel's column headings, carried into the drawer so the grouping
   survives on a phone rather than collapsing into one long undifferentiated run */
.pc-drawer__group {
    font-family: var(--pc-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pc-muted);
    padding: .85rem 0 .3rem;
}
.pc-drawer__group:first-child { padding-top: .35rem; }
.pc-drawer__foot { padding: 1.25rem 1.35rem; border-top: 1px solid var(--pc-line-soft); display: grid; gap: .6rem; }

.pc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 30, 62, .5);
    backdrop-filter: blur(3px);
    z-index: 1900;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--pc-ease), visibility .4s;
}
.pc-overlay.is-open { opacity: 1; visibility: visible; }
body.pc-locked { overflow: hidden; }

/* ------------------------------------------------------------ 6. Hero (home) */

.pc-hero {
    position: relative;
    min-height: min(100svh, 940px);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--pc-navy-deep);
    color: #fff;
    text-align: center;
    isolation: isolate;
}
.pc-hero__media { position: absolute; inset: 0; z-index: -2; }
.pc-hero__media video,
.pc-hero__media img,
.pc-hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* the loop fades in once it can actually play, so there is no flash of an
   empty frame over the poster */
.pc-hero__media video {
    opacity: 0;
    transition: opacity 1.2s ease-in;
}
.pc-hero__media video.is-playing { opacity: 1; }
.pc-hero__slide {
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.6s ease-in-out, transform 8s linear;
}
.pc-hero__slide.is-active { opacity: 1; transform: scale(1); }
/* The scrim is split in two so the footage can be seen.
   This layer is the light global grade — it holds the open field at the top and
   bottom of the frame at roughly a quarter opacity, where before a flat .55–.88
   wash buried it. The darkness the copy needs is applied separately, by
   .pc-hero__inner::before, which tracks the text block at every breakpoint. */
.pc-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(6, 30, 62, .48)   0%,     /* behind the transparent header */
        rgba(6, 30, 62, .26)  20%,     /* open field — the footage reads here */
        rgba(6, 30, 62, .26)  66%,
        rgba(6, 30, 62, .32)  80%,
        rgba(6, 30, 62, .62)  86%,     /* carries the scroll cue */
        rgba(6, 30, 62, .84) 100%);    /* joins the marquee below */
    z-index: 1;
}

.pc-hero__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(6rem, 14vh, 9rem) clamp(5rem, 10vh, 7rem);
    max-width: 1000px;
}
.pc-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 30, 62, .52) 0%, rgba(6, 30, 62, .35) 42%, rgba(6, 30, 62, .68) 100%),
        radial-gradient(120% 80% at 50% 30%, rgba(10, 46, 93, .18) 0%, rgba(6, 30, 62, .72) 100%);
    z-index: 1;
}
.pc-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem 1.1rem;
    border-radius: var(--pc-radius-pill);
    /* A navy chip, not a white one. Over a lighter scrim a 10% white wash
       raised the background luminance and dropped the label to 3.5:1; tinting
       the other way makes the chip legible whatever the footage is doing. */
    background: rgba(6, 30, 62, .42);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 1.9rem;
}
.pc-hero__badge i { color: var(--pc-gold-light); }

.pc-hero h1 {
    color: #fff;
    font-size: clamp(2.3rem, 6.4vw, 5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.03;
    margin-bottom: 1.4rem;
    /* a tight shadow for edge definition plus the wide one for lift — over
       moving footage the 40px blur alone gives the glyphs nothing to bite on */
    text-shadow: 0 1px 2px rgba(6, 30, 62, .5), 0 2px 40px rgba(0, 0, 0, .3);
}
.pc-hero__tagline {
    font-family: var(--pc-display);
    font-size: clamp(.92rem, 1.9vw, 1.24rem);
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--pc-gold-light);
    text-transform: uppercase;
    margin-bottom: 2.6rem;
    text-shadow: 0 1px 3px rgba(6, 30, 62, .55);
}
.pc-hero .pc-btn-row { justify-content: center; }
/* Scoped to the hero: over brighter footage a white-tinted glass button loses
   its edge, so these tint towards the navy instead. Elsewhere on the site the
   glass buttons sit on flat navy and are left as they are. */
.pc-hero .pc-btn--glass { background: rgba(6, 30, 62, .3); border-color: rgba(255, 255, 255, .45); }

.pc-hero__scroll {
    position: absolute;
    bottom: 1.9rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 3px rgba(6, 30, 62, .6);
}
.pc-hero__scroll span {
    width: 1px;
    height: 42px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent);
    animation: pcScroll 2.4s var(--pc-ease) infinite;
}
@keyframes pcScroll {
    0%   { transform: scaleY(0); transform-origin: top; }
    45%  { transform: scaleY(1); transform-origin: top; }
    55%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

.pc-hero__mute {
    position: absolute;
    right: clamp(1rem, 3vw, 2.2rem);
    bottom: 1.9rem;
    z-index: 3;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.pc-hero__mute:hover { background: rgba(255, 255, 255, .24); }

/* ----------------------------------------------------- 7. Page hero (inner) */

.pc-pagehero {
    position: relative;
    background: var(--pc-navy-deep);
    color: rgba(255, 255, 255, .8);
    overflow: hidden;
    isolation: isolate;
}
.pc-pagehero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: .3;
    transform: scale(1.04);
}
.pc-pagehero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, rgba(6, 30, 62, .95) 0%, rgba(10, 46, 93, .82) 55%, rgba(24, 87, 196, .55) 100%);
}
.pc-pagehero__inner {
    padding-block: clamp(3.75rem, 9vw, 6.75rem);
    max-width: 820px;
}
.pc-pagehero h1 { color: #fff; margin-bottom: 1rem; }
.pc-pagehero .pc-lead { color: rgba(255, 255, 255, .8); }
.pc-pagehero .pc-eyebrow { color: var(--pc-gold-light); }

.pc-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .58);
}
.pc-crumbs li { margin: 0; display: inline-flex; align-items: center; gap: .5rem; }
.pc-crumbs li + li::before { content: "/"; opacity: .45; }
.pc-crumbs a { color: rgba(255, 255, 255, .8); }
.pc-crumbs a:hover { color: var(--pc-gold-light); }

/* ---------------------------------------------------------- 8. Grid helpers */

.pc-grid { display: grid; gap: clamp(1.15rem, 2.2vw, 1.85rem); }
.pc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.pc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); }
.pc-grid--6 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr)); }

.pc-split {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
@media (min-width: 900px) {
    .pc-split { grid-template-columns: 1fr 1fr; }
    .pc-split--wide-left  { grid-template-columns: 1.15fr .85fr; }
    .pc-split--wide-right { grid-template-columns: .85fr 1.15fr; }
    .pc-split--reverse > :first-child { order: 2; }
}

/* A split whose narrow column carries a sticky panel. The column has to
   stretch to the full height of the row — if it only wraps its own content
   (as `align-items: flex-start` or `center` would leave it) the sticky box
   has no distance to travel and simply never moves. */
.pc-split--sticky { align-items: stretch; }

/* ---------------------------------------------------------------- 9. Cards */

.pc-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--pc-line-soft);
    border-radius: var(--pc-radius);
    padding: clamp(1.6rem, 2.6vw, 2.1rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .4s var(--pc-ease), box-shadow .4s var(--pc-ease),
                border-color .4s var(--pc-ease);
}
.pc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pc-shadow);
    border-color: transparent;
}
.pc-card h3 { font-size: 1.18rem; margin-bottom: .55rem; }
.pc-card p  { font-size: .965rem; margin-bottom: 0; }
.pc-card__icon {
    width: 54px; height: 54px;
    border-radius: 15px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--pc-grey), #fff);
    border: 1px solid var(--pc-line-soft);
    color: var(--pc-royal);
    font-size: 1.5rem;
    margin-bottom: 1.3rem;
    transition: background .4s var(--pc-ease), color .4s var(--pc-ease), border-color .4s var(--pc-ease);
}
.pc-card:hover .pc-card__icon {
    background: var(--pc-navy);
    border-color: var(--pc-navy);
    color: var(--pc-gold-light);
}
.pc-card__link { margin-top: auto; padding-top: 1.15rem; }
.pc-card__stretch::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* media card — image on top */
.pc-mediacard {
    background: #fff;
    border: 1px solid var(--pc-line-soft);
    border-radius: var(--pc-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .45s var(--pc-ease), box-shadow .45s var(--pc-ease);
}
.pc-mediacard:hover { transform: translateY(-6px); box-shadow: var(--pc-shadow); }
.pc-mediacard__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--pc-grey);
}
.pc-mediacard__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1s var(--pc-ease);
}
.pc-mediacard:hover .pc-mediacard__media img { transform: scale(1.06); }
.pc-mediacard__body {
    padding: clamp(1.35rem, 2.2vw, 1.85rem);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.pc-mediacard__body h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.pc-mediacard__body p  { font-size: .96rem; }
.pc-mediacard__tag {
    position: absolute;
    top: 1rem; left: 1rem;
    z-index: 2;
    background: rgba(255, 255, 255, .94);
    color: var(--pc-navy);
    font-family: var(--pc-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .4rem .8rem;
    border-radius: var(--pc-radius-pill);
    backdrop-filter: blur(8px);
}
.pc-mediacard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    font-size: .82rem;
    color: var(--pc-muted);
    margin-bottom: .8rem;
}
.pc-mediacard__meta i { color: var(--pc-gold); margin-right: .3rem; }

/* list of ticks */
.pc-ticks { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.pc-ticks li {
    position: relative;
    padding-left: 1.85rem;
    margin-bottom: .6rem;
    font-size: .95rem;
}
.pc-ticks li::before {
    /* ri-check-line. Verified against assets/css/vendor/remixicon.css — do not
       edit this codepoint by hand; look it up there. */
    content: "\eb7b";
    font-family: 'remixicon';
    position: absolute;
    left: 0;
    top: -.04em;
    color: var(--pc-gold);
    font-size: 1.1rem;
}
.pc-section--navy .pc-ticks li::before { color: var(--pc-gold-light); }

/* ------------------------------------------------------------ 10. Statistics */

.pc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
    gap: 1px;
    background: var(--pc-line);
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius-lg);
    overflow: hidden;
}
.pc-stat {
    background: #fff;
    padding: clamp(1.7rem, 3vw, 2.5rem) clamp(1.1rem, 2vw, 1.6rem);
    text-align: center;
}
.pc-stat__value {
    font-family: var(--pc-display);
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--pc-navy);
    line-height: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .05em;
}
.pc-stat__value .pc-suffix { color: var(--pc-gold); }
.pc-stat__label {
    font-family: var(--pc-display);
    font-weight: 600;
    font-size: .96rem;
    color: var(--pc-ink);
    margin-top: .7rem;
}
.pc-stat__note {
    font-size: .8rem;
    color: var(--pc-muted);
    margin-top: .3rem;
    line-height: 1.5;
}
.pc-section--navy .pc-stats { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.13); }
.pc-section--navy .pc-stat { background: var(--pc-navy); }
.pc-section--navy .pc-stat__value { color: #fff; }
.pc-section--navy .pc-stat__label { color: #fff; }
.pc-section--navy .pc-stat__note  { color: rgba(255,255,255,.6); }

/* ------------------------------------------------------- 11. Journey timeline */

.pc-journey { position: relative; display: grid; gap: 0; }
.pc-journey::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 34px;
    bottom: 34px;
    width: 2px;
    background: var(--pc-line);
}
.pc-journey__fill {
    position: absolute;
    left: 27px;
    top: 34px;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, var(--pc-royal), var(--pc-gold));
    transition: height 1.4s var(--pc-ease);
}
.pc-step {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 1.4rem;
    padding-block: 1.15rem;
    align-items: flex-start;
}
.pc-step__dot {
    position: relative;
    z-index: 2;
    width: 56px; height: 56px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #fff;
    border: 2px solid var(--pc-line);
    color: var(--pc-muted);
    font-size: 1.35rem;
    transition: all .5s var(--pc-ease);
}
.pc-step.is-lit .pc-step__dot {
    background: var(--pc-navy);
    border-color: var(--pc-navy);
    color: var(--pc-gold-light);
    box-shadow: 0 0 0 6px rgba(10, 46, 93, .07);
}
.pc-step__body { padding-top: .35rem; }
.pc-step__body h3 { font-size: 1.16rem; margin-bottom: .35rem; }
.pc-step__body p  { font-size: .95rem; margin: 0; }
.pc-step__index {
    font-family: var(--pc-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pc-gold);
    display: block;
    margin-bottom: .3rem;
}
@media (min-width: 992px) {
    .pc-journey { max-width: 760px; margin-inline: auto; }
}

/* ---------------------------------------------------------- 12. Icon marquee */

.pc-icontile {
    text-align: center;
    padding: clamp(1.4rem, 2.4vw, 2rem) .8rem;
    border-radius: var(--pc-radius);
    border: 1px solid var(--pc-line-soft);
    background: #fff;
    transition: transform .4s var(--pc-ease), box-shadow .4s var(--pc-ease), border-color .4s;
    height: 100%;
}
.pc-icontile:hover {
    transform: translateY(-5px);
    box-shadow: var(--pc-shadow-sm);
    border-color: var(--pc-gold);
}
.pc-icontile i {
    display: block;
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    color: var(--pc-royal);
    margin-bottom: .85rem;
    transition: color .4s var(--pc-ease);
}
.pc-icontile:hover i { color: var(--pc-gold); }
.pc-icontile span {
    font-family: var(--pc-display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--pc-ink);
    line-height: 1.35;
    display: block;
}

/* --------------------------------------------------------- 13. Results chart */

.pc-bars { display: grid; gap: 1.65rem; }
.pc-bar__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .6rem;
}
.pc-bar__label {
    font-family: var(--pc-display);
    font-weight: 600;
    color: var(--pc-ink);
    font-size: .99rem;
}
.pc-bar__value {
    font-family: var(--pc-display);
    font-weight: 800;
    color: var(--pc-navy);
    font-size: 1.12rem;
}
.pc-bar__track {
    height: 10px;
    border-radius: 20px;
    background: var(--pc-grey-deep);
    overflow: hidden;
}
.pc-bar__fill {
    height: 100%;
    width: 0;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--pc-navy), var(--pc-royal) 65%, var(--pc-gold));
    transition: width 1.6s var(--pc-ease);
}
.pc-bar__note { font-size: .84rem; color: var(--pc-muted); margin-top: .45rem; }

/* -------------------------------------------------------- 14. Portrait blocks */

.pc-portrait {
    position: relative;
    border-radius: var(--pc-radius-lg);
    overflow: hidden;
    background: var(--pc-grey);
    box-shadow: var(--pc-shadow);
}
.pc-portrait img { width: 100%; height: 100%; object-fit: cover; }
.pc-portrait--tall  { aspect-ratio: 4 / 5; }
.pc-portrait--wide  { aspect-ratio: 4 / 3; }
.pc-portrait--square{ aspect-ratio: 1 / 1; }

.pc-figure {
    position: relative;
    border-radius: var(--pc-radius-lg);
    overflow: hidden;
    box-shadow: var(--pc-shadow);
}
.pc-figure img { width: 100%; }
.pc-figure__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2.5rem 1.6rem 1.35rem;
    background: linear-gradient(180deg, transparent, rgba(6, 30, 62, .88));
    color: #fff;
    font-size: .9rem;
}

.pc-personcard {
    background: #fff;
    border: 1px solid var(--pc-line-soft);
    border-radius: var(--pc-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .45s var(--pc-ease), box-shadow .45s var(--pc-ease);
}
.pc-personcard:hover { transform: translateY(-6px); box-shadow: var(--pc-shadow); }
.pc-personcard__photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--pc-grey); }
.pc-personcard__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.pc-personcard__body { padding: 1.45rem; flex: 1; display: flex; flex-direction: column; }
.pc-personcard__body h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.pc-personcard__role {
    font-size: .85rem;
    font-weight: 600;
    color: var(--pc-royal);
    margin-bottom: .7rem;
}
.pc-personcard__body p { font-size: .93rem; }

/* ---- staff grouped by team ---- */
.pc-team--next { margin-top: clamp(3rem, 5vw, 4.5rem); }
.pc-team__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem 1rem;
    margin-bottom: 1.6rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--pc-line);
}
.pc-team__head h3 {
    font-size: 1.32rem;
    margin: 0;
    color: var(--pc-navy);
}
.pc-team__head p { margin: 0; font-size: .93rem; color: var(--pc-muted); }

/* The head of a team, set out ahead of the others: same photograph, given room
   and a gold edge so the hierarchy reads at a glance instead of having to be
   inferred from the job title. */
.pc-headcard {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(1.4rem, 3vw, 2.4rem);
    align-items: center;
    margin-bottom: 1.6rem;
    padding: clamp(1.3rem, 2.4vw, 1.8rem);
    background: linear-gradient(120deg, var(--pc-grey), #fff 65%);
    border: 1px solid var(--pc-line-soft);
    border-left: 4px solid var(--pc-gold);
    border-radius: var(--pc-radius);
}
@media (max-width: 620px) {
    .pc-headcard { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
.pc-headcard__photo {
    width: 220px;
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: var(--pc-radius);
    overflow: hidden;
    background: var(--pc-grey);
}
.pc-headcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.pc-headcard__pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .7rem;
    padding: .3rem .8rem;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-navy);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.pc-headcard__body h4 {
    font-family: var(--pc-display);
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    line-height: 1.24;
    margin: 0 0 .25rem;
    color: var(--pc-ink);
}

/* ------------------------------------------------------------ 15. Quote block */

.pc-quote {
    position: relative;
    border-left: 3px solid var(--pc-gold);
    padding: .4rem 0 .4rem 1.85rem;
    margin: 2rem 0;
    font-family: var(--pc-display);
    font-size: clamp(1.08rem, 1.9vw, 1.35rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.55;
    color: var(--pc-ink);
}
.pc-quote cite {
    display: block;
    margin-top: .9rem;
    font-family: var(--pc-font);
    font-size: .88rem;
    font-style: normal;
    font-weight: 600;
    color: var(--pc-muted);
    letter-spacing: .01em;
}
.pc-quote cite::before { content: "— "; }
.pc-section--navy .pc-quote { color: #fff; }
.pc-section--navy .pc-quote cite { color: rgba(255,255,255,.65); }

.pc-verse {
    background: var(--pc-gold-soft);
    border: 1px solid #EADFC4;
    border-radius: var(--pc-radius);
    padding: clamp(1.5rem, 3vw, 2.2rem);
    margin: 2rem 0;
    text-align: center;
}
.pc-verse p {
    font-family: var(--pc-display);
    font-size: clamp(1.02rem, 1.8vw, 1.22rem);
    font-weight: 500;
    font-style: italic;
    color: #6B5320;
    line-height: 1.6;
    margin-bottom: .7rem;
}
.pc-verse cite {
    font-size: .84rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #97783A;
}

/* ------------------------------------------------------ 16. Testimonial slider */

.pc-testimonial {
    background: #fff;
    border: 1px solid var(--pc-line-soft);
    border-radius: var(--pc-radius);
    padding: clamp(1.7rem, 3vw, 2.4rem);
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}
.pc-testimonial__stars { color: var(--pc-gold); font-size: 1rem; letter-spacing: .12em; }
.pc-testimonial p {
    font-size: 1.02rem;
    line-height: 1.68;
    color: var(--pc-ink);
    margin: 0;
    flex: 1;
}
.pc-testimonial__by { display: flex; align-items: center; gap: .9rem; }
.pc-testimonial__avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--pc-navy);
    color: var(--pc-gold-light);
    font-family: var(--pc-display);
    font-weight: 700;
    font-size: 1.02rem;
    flex-shrink: 0;
}
.pc-testimonial__name {
    font-family: var(--pc-display);
    font-weight: 700;
    color: var(--pc-ink);
    font-size: .98rem;
    line-height: 1.3;
}
.pc-testimonial__role { font-size: .84rem; color: var(--pc-muted); }

/* ---- slider arrows, shared by any carousel on the site ---- */

.pc-swipenav {
    display: flex;
    gap: .55rem;
    flex-shrink: 0;
}
.pc-swipenav button {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 1px solid var(--pc-line);
    background: #fff;
    color: var(--pc-navy);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    cursor: pointer;
    transition: background .3s var(--pc-ease), color .3s var(--pc-ease),
                border-color .3s var(--pc-ease), transform .3s var(--pc-ease),
                opacity .3s var(--pc-ease), box-shadow .3s var(--pc-ease);
}
.pc-swipenav button:hover:not(:disabled) {
    background: var(--pc-navy);
    border-color: var(--pc-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(10, 46, 93, .24);
}
.pc-swipenav button:disabled {
    opacity: .3;
    cursor: default;
}
/* on a dark band the arrows invert */
.pc-section--navy .pc-swipenav button,
.pc-cinema .pc-swipenav button {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.pc-section--navy .pc-swipenav button:hover:not(:disabled),
.pc-cinema .pc-swipenav button:hover:not(:disabled) {
    background: #fff;
    color: var(--pc-navy);
    border-color: #fff;
}

/* a section head with the arrows sitting opposite the heading */
.pc-head--split {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}
.pc-head--split > div { max-width: 720px; }
.pc-head--split .pc-swipenav { padding-bottom: .35rem; }
@media (max-width: 700px) {
    .pc-head--split { display: block; }
    .pc-head--split .pc-swipenav { margin-top: 1.5rem; }
}

.pc-swiper { overflow: hidden; padding-bottom: 3.5rem; }
/* A slider carrying its own arrows needs no dot row underneath. The small
   vertical padding gives the cards' hover lift and shadow room to show
   without the track clipping them. */
.pc-swiper--nav   { padding-bottom: 0; }
.pc-swiper--cards { padding: 12px 0 16px; }
.pc-swiper--cards .swiper-wrapper { align-items: stretch; }
.pc-swiper--cards .swiper-slide   { height: auto; display: flex; }
.pc-swiper--cards .swiper-slide > * { width: 100%; }

/* arrows floated over the left and right edges of a track */
.pc-slider { position: relative; }
.pc-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}
.pc-slider__arrow--prev { left: 0; }
.pc-slider__arrow--next { right: 0; }
.pc-slider__arrow button {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 26px rgba(10, 46, 93, .18);
}
/* once there is room outside the container, sit the arrows clear of the cards */
@media (min-width: 1380px) {
    .pc-slider__arrow--prev { left: -26px; }
    .pc-slider__arrow--next { right: -26px; }
}
/* on touch widths the arrows would cover a card, so drag takes over */
@media (max-width: 700px) {
    .pc-slider__arrow { display: none; }
}
.pc-swiper .swiper-slide { height: auto; }
.pc-swiper .swiper-pagination {
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: .5rem;
}
.pc-swiper .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: var(--pc-line);
    opacity: 1;
    margin: 0 !important;
    transition: all .3s var(--pc-ease);
}
.pc-swiper .swiper-pagination-bullet-active {
    background: var(--pc-navy);
    width: 26px;
    border-radius: 5px;
}

/* ------------------------------------------------------- 17. Gallery + filter */

.pc-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}
.pc-filter button {
    font-family: var(--pc-display);
    font-size: .88rem;
    font-weight: 600;
    padding: .62rem 1.15rem;
    border-radius: var(--pc-radius-pill);
    border: 1px solid var(--pc-line);
    background: #fff;
    color: var(--pc-body);
    cursor: pointer;
    transition: all .3s var(--pc-ease);
}
.pc-filter button:hover { border-color: var(--pc-navy); color: var(--pc-navy); }
.pc-filter button.is-active {
    background: var(--pc-navy);
    border-color: var(--pc-navy);
    color: #fff;
}

.pc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.pc-gallery__item {
    position: relative;
    display: block;
    border-radius: var(--pc-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--pc-grey);
}
.pc-gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--pc-ease);
}
.pc-gallery__item:hover img { transform: scale(1.07); }

/* Darkening scrim on hover. The magnifier itself is a real element rather
   than a pseudo-element glyph — a hard-coded codepoint here once resolved to
   `ri-checkbox-blank-line` and drew a plain square. */
.pc-gallery__item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 30, 62, 0) 40%, rgba(6, 30, 62, .72));
    opacity: 0;
    transition: opacity .4s var(--pc-ease);
    pointer-events: none;
}
.pc-gallery__item:hover::after,
.pc-gallery__item:focus-visible::after { opacity: 1; }

.pc-gallery__zoom {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.pc-gallery__zoom i {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    color: var(--pc-navy);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 26px rgba(6, 30, 62, .35);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .35s var(--pc-ease), transform .35s var(--pc-ease);
}
.pc-gallery__item:hover .pc-gallery__zoom i,
.pc-gallery__item:focus-visible .pc-gallery__zoom i { opacity: 1; transform: scale(1); }

.pc-gallery__item.is-hidden { display: none; }

/* A caption that stays on the tile rather than appearing on hover — these
   photographs need naming, and a hover-only label is invisible on a phone.
   The gradient reaches .78 by the point the text starts, which holds white at
   better than 8:1 over even a blown-out highlight underneath. */
.pc-gallery__caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    padding: 2.4rem .95rem .85rem;
    background: linear-gradient(180deg,
        rgba(6, 30, 62, 0) 0%, rgba(6, 30, 62, .78) 45%, rgba(6, 30, 62, .92) 100%);
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.35;
}

/* An award made to the school: crest, name, what it was for, the citation, and
   the school's own line about it set off at the foot. */
.pc-awardcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--pc-line-soft);
    border-radius: var(--pc-radius);
    padding: clamp(1.6rem, 2.6vw, 2.1rem);
    box-shadow: var(--pc-shadow-sm);
}
.pc-awardcard__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    font-size: 1.6rem;
    color: var(--pc-navy);
    background: linear-gradient(140deg, var(--pc-gold-light), var(--pc-gold));
}
.pc-awardcard h3 {
    font-size: 1.12rem;
    line-height: 1.3;
    margin-bottom: .5rem;
}
.pc-awardcard__for {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pc-royal);
    margin-bottom: 1.1rem;
}
.pc-awardcard p { font-size: .93rem; line-height: 1.62; margin-bottom: .9rem; }
.pc-awardcard__note {
    margin-top: auto;          /* pins the closing line to the foot of every card */
    margin-bottom: 0;
    padding: .9rem 0 0 1rem;
    border-left: 3px solid var(--pc-gold);
    font-style: italic;
    color: var(--pc-ink);
}

/* Peace Vision principle card: an illustrated badge above centred copy. The
   badges are full colour illustrations, so the card stays plain white and lets
   them carry the interest. */
.pc-vcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    background: #fff;
    border: 1px solid var(--pc-line-soft);
    border-radius: var(--pc-radius);
    padding: 1.9rem 1.5rem 1.8rem;
    box-shadow: var(--pc-shadow-sm);
    transition: transform .3s var(--pc-ease), box-shadow .3s var(--pc-ease);
}
a.pc-vcard:hover { transform: translateY(-4px); box-shadow: var(--pc-shadow); }

/* 3:2, the shape the illustrations are — a square box would letterbox them and
   throw away a third of the size the artwork needs to stay readable. */
.pc-vcard__badge {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 3 / 2;
    margin-bottom: 1rem;
}
.pc-vcard__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .45s var(--pc-ease);
}
a.pc-vcard:hover .pc-vcard__badge img { transform: scale(1.05); }
/* the fallback, for a principle whose badge has not been supplied */
.pc-vcard__badge i { font-size: 3.6rem; color: var(--pc-navy); }

/* the card is an <a>, so the copy has to be told not to take the link colour */
.pc-vcard h3 { font-size: 1.06rem; line-height: 1.32; margin-bottom: .55rem; color: var(--pc-ink); }
.pc-vcard p  { font-size: .91rem; margin-bottom: 0; color: var(--pc-body); }
a.pc-vcard:hover h3 { color: var(--pc-royal); }
.pc-vcard .pc-step__index { margin-bottom: .4rem; }
.pc-vcard__link { margin-top: auto; padding-top: 1.1rem; }

/* A programme's own logo, centred above the copy it belongs to. These are
   supplied as artwork on a white field, so they sit on white sections only —
   on grey or navy the white box would show as a rectangle around them. */
.pc-proglogo {
    display: block;
    width: 340px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 1.75rem;
}
.pc-proglogo--sm { width: 190px; margin-bottom: 1.5rem; }

/* Heading for a run of gallery tiles. */
.pc-album__title {
    font-family: var(--pc-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--pc-royal);
    margin: 0 0 1.1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--pc-line);
}

/* A gallery tile with its caption underneath, for photographs that need a line
   of explanation. The .pc-figure overlay caption is the alternative, but it
   sits across the bottom third of the image — fine over a building, wrong over
   a face. */
.pc-award { margin: 0; }
.pc-award figcaption {
    margin-top: .9rem;
    font-size: .87rem;
    line-height: 1.5;
    color: var(--pc-muted);
}
.pc-award figcaption strong {
    display: block;
    margin-bottom: .15rem;
    font-family: var(--pc-display);
    font-size: .96rem;
    font-weight: 600;
    color: var(--pc-ink);
}

/* --------------------------------------------------------------- 18. Accordion */

.pc-accordion { border-top: 1px solid var(--pc-line); }
.pc-accordion__item { border-bottom: 1px solid var(--pc-line); }
.pc-accordion__btn {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--pc-display);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    font-weight: 600;
    color: var(--pc-ink);
    line-height: 1.45;
}
.pc-accordion__btn:hover { color: var(--pc-royal); }
.pc-accordion__btn i {
    flex-shrink: 0;
    font-size: 1.35rem;
    color: var(--pc-royal);
    transition: transform .35s var(--pc-ease);
    margin-top: .05rem;
}
.pc-accordion__btn[aria-expanded="true"] i { transform: rotate(45deg); }
.pc-accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s var(--pc-ease);
}
.pc-accordion__panel.is-open { grid-template-rows: 1fr; }
.pc-accordion__panel > div { overflow: hidden; }
.pc-accordion__panel p {
    padding-bottom: 1.5rem;
    margin: 0;
    max-width: 66ch;
    font-size: .99rem;
}

/* ------------------------------------------------------------- 19. Steps grid */

.pc-steps { counter-reset: pcstep; display: grid; gap: clamp(1.15rem, 2.2vw, 1.75rem); }
.pc-stepcard {
    position: relative;
    background: #fff;
    border: 1px solid var(--pc-line-soft);
    border-radius: var(--pc-radius);
    padding: clamp(1.6rem, 2.6vw, 2.1rem);
    padding-top: 3.4rem;
    height: 100%;
    transition: transform .4s var(--pc-ease), box-shadow .4s var(--pc-ease);
}
.pc-stepcard:hover { transform: translateY(-5px); box-shadow: var(--pc-shadow); }
.pc-stepcard::before {
    counter-increment: pcstep;
    content: counter(pcstep, decimal-leading-zero);
    position: absolute;
    top: 1.5rem;
    left: clamp(1.6rem, 2.6vw, 2.1rem);
    font-family: var(--pc-display);
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--pc-gold);
}
.pc-stepcard h3 { font-size: 1.14rem; margin-bottom: .5rem; }
.pc-stepcard p { font-size: .95rem; margin: 0; }

/* ------------------------------------------------------------------ 20. Forms */

.pc-form { display: grid; gap: 1.15rem; }
.pc-field { display: grid; gap: .45rem; }
.pc-field label {
    font-family: var(--pc-display);
    font-size: .87rem;
    font-weight: 600;
    color: var(--pc-ink);
}
.pc-field label .req { color: #C2453B; }
.pc-field input,
.pc-field select,
.pc-field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--pc-ink);
    background: #fff;
    border: 1px solid var(--pc-line);
    border-radius: 13px;
    padding: .92rem 1.05rem;
    transition: border-color .25s var(--pc-ease), box-shadow .25s var(--pc-ease);
}
.pc-field textarea { min-height: 148px; resize: vertical; }
.pc-field input:focus,
.pc-field select:focus,
.pc-field textarea:focus {
    outline: none;
    border-color: var(--pc-royal);
    box-shadow: 0 0 0 4px rgba(24, 87, 196, .11);
}
.pc-field input::placeholder,
.pc-field textarea::placeholder { color: #A3ADBE; }
.pc-field__hint { font-size: .82rem; color: var(--pc-muted); }
.pc-form__row { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .pc-form__row { grid-template-columns: 1fr 1fr; } }

.pc-formcard {
    background: #fff;
    border: 1px solid var(--pc-line-soft);
    border-radius: var(--pc-radius-lg);
    padding: clamp(1.7rem, 3.4vw, 2.85rem);
    box-shadow: var(--pc-shadow-sm);
}

.pc-note {
    display: flex;
    gap: .85rem;
    padding: 1.1rem 1.3rem;
    border-radius: 14px;
    background: var(--pc-grey);
    border: 1px solid var(--pc-line-soft);
    font-size: .92rem;
}
.pc-note i { color: var(--pc-royal); font-size: 1.2rem; flex-shrink: 0; margin-top: .1rem; }
.pc-note--gold { background: var(--pc-gold-soft); border-color: #EADFC4; }
.pc-note--gold i { color: #A5822F; }

/* ------------------------------------------------------------------ 21. Table */

.pc-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    -webkit-overflow-scrolling: touch;
}
.pc-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.pc-table th,
.pc-table td {
    padding: 1.05rem 1.3rem;
    text-align: left;
    border-bottom: 1px solid var(--pc-line-soft);
    font-size: .96rem;
}
.pc-table thead th {
    background: var(--pc-grey);
    font-family: var(--pc-display);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pc-navy);
    white-space: nowrap;
}
.pc-table tbody tr:last-child td { border-bottom: 0; }
.pc-table tbody tr:hover { background: #FBFCFE; }

/* ------------------------------------------------------------- 22. CTA banner */

.pc-cta {
    position: relative;
    background: var(--pc-navy);
    border-radius: var(--pc-radius-lg);
    padding: clamp(2.4rem, 5vw, 4.25rem);
    overflow: hidden;
    color: rgba(255, 255, 255, .8);
    isolation: isolate;
}
.pc-cta::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 520px; height: 520px;
    right: -140px; top: -220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(24, 87, 196, .55), transparent 68%);
}
.pc-cta::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 380px; height: 380px;
    left: -130px; bottom: -200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 162, 74, .32), transparent 68%);
}
.pc-cta h2 { color: #fff; margin-bottom: .85rem; }
.pc-cta .pc-lead { color: rgba(255, 255, 255, .8); margin-bottom: 2rem; }
.pc-cta__inner { position: relative; max-width: 720px; }
.pc-cta--center .pc-cta__inner { margin-inline: auto; text-align: center; }
.pc-cta--center .pc-btn-row { justify-content: center; }

/* ------------------------------------------------- 22b. The school film stage

   The film is a finished production: it opens on a branded title card, carries
   a logo bug and burned-in captions, and has its own soundtrack. So it is not
   used as a backdrop for our own type — it gets a darkened stage of its own,
   with nothing laid over the picture.                                       */

.pc-cinema {
    position: relative;
    background: var(--pc-navy-deep);
    color: rgba(255, 255, 255, .74);
    overflow: hidden;
    isolation: isolate;
}
.pc-cinema::before,
.pc-cinema::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
}
.pc-cinema::before {
    width: min(900px, 90vw); height: min(900px, 90vw);
    top: -45%; left: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(24, 87, 196, .30), transparent 62%);
}
.pc-cinema::after {
    width: min(700px, 80vw); height: min(700px, 80vw);
    bottom: -40%; left: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(200, 162, 74, .16), transparent 64%);
}
.pc-cinema h2 { color: #fff; }
.pc-cinema .pc-lead { color: rgba(255, 255, 255, .76); }

.pc-stage {
    position: relative;
    max-width: 1180px;
    margin-inline: auto;
    border-radius: clamp(14px, 2vw, 22px);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .09),
        0 40px 120px rgba(0, 0, 0, .6),
        0 0 90px -20px rgba(24, 87, 196, .5);
    transition: transform .6s var(--pc-ease);
}
.pc-stage:hover { transform: translateY(-4px); }
.pc-stage video,
.pc-stage > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.pc-stage.is-live > img { opacity: 0; pointer-events: none; }

/* the play affordance sits over the poster only, never over playing footage */
.pc-stage__play {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    border: 0;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(180deg, rgba(6, 30, 62, .28) 0%, rgba(6, 30, 62, .52) 100%);
    transition: opacity .5s var(--pc-ease), visibility .5s, background .4s var(--pc-ease);
}
.pc-stage__play:hover { background: linear-gradient(180deg, rgba(6, 30, 62, .18) 0%, rgba(6, 30, 62, .44) 100%); }
.pc-stage.is-live .pc-stage__play { opacity: 0; visibility: hidden; }

.pc-stage__playinner {
    display: grid;
    justify-items: center;
    gap: .95rem;
    pointer-events: none;
}
.pc-stage__disc {
    width: clamp(70px, 8vw, 96px);
    height: clamp(70px, 8vw, 96px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .95);
    color: var(--pc-navy);
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .4);
    transition: transform .4s var(--pc-ease), background .3s var(--pc-ease);
}
.pc-stage__play:hover .pc-stage__disc { transform: scale(1.07); background: #fff; }
.pc-stage__label {
    font-family: var(--pc-display);
    font-weight: 600;
    font-size: clamp(.92rem, 1.4vw, 1.05rem);
    text-shadow: 0 2px 20px rgba(0, 0, 0, .55);
}
.pc-stage__runtime {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}
/* the pulsing rings read as "live", so they disappear with the play button */
.pc-stage__play::before,
.pc-stage__play::after {
    content: "";
    position: absolute;
    width: clamp(70px, 8vw, 96px);
    height: clamp(70px, 8vw, 96px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .4);
    animation: pcPulse 2.8s var(--pc-ease) infinite;
    pointer-events: none;
    transform: translateY(-22px);
}
.pc-stage__play::after { animation-delay: 1.4s; }

.pc-stage__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem 1.6rem;
    margin-top: 1.6rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, .6);
}
.pc-stage__caption i { color: var(--pc-gold); margin-right: .4rem; }

@media (max-width: 700px) {
    .pc-stage { border-radius: 12px; }
    .pc-stage__caption { font-size: .82rem; }
}

/* ------------------------------------------------------- 23. Floating actions */

/* The launcher is pinned to the very bottom-right corner. The options are
   taken out of flow and anchored above it, so while they are closed they
   reserve no height and cannot push the button up the screen. */
.pc-quick {
    position: fixed;
    right: clamp(.9rem, 2vw, 1.6rem);
    bottom: clamp(.9rem, 2vw, 1.6rem);
    z-index: 1200;
    line-height: 0;
}

.pc-quick__items {
    position: absolute;
    bottom: calc(100% + .85rem);
    right: 0;
    display: flex;
    flex-direction: column-reverse;   /* Call sits nearest the thumb, Email furthest */
    gap: .55rem;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(.94);
    transform-origin: bottom right;
    transition: opacity .3s var(--pc-ease), transform .35s var(--pc-ease), visibility .35s;
}
.pc-quick.is-open .pc-quick__items {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.pc-quick__item {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .42rem .42rem .42rem 1.05rem;
    background: #fff;
    border: 1px solid var(--pc-line-soft);
    border-radius: var(--pc-radius-pill);
    box-shadow: 0 6px 22px rgba(10, 46, 93, .16);
    font-family: var(--pc-display);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1;
    color: var(--pc-ink);
    white-space: nowrap;
    /* each option rises a beat after the one below it */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s var(--pc-ease), transform .3s var(--pc-ease),
                box-shadow .3s var(--pc-ease), color .25s var(--pc-ease);
}
.pc-quick.is-open .pc-quick__item { opacity: 1; transform: none; }
.pc-quick.is-open .pc-quick__item:nth-child(1) { transition-delay: .04s; }
.pc-quick.is-open .pc-quick__item:nth-child(2) { transition-delay: .08s; }
.pc-quick.is-open .pc-quick__item:nth-child(3) { transition-delay: .12s; }
.pc-quick.is-open .pc-quick__item:nth-child(4) { transition-delay: .16s; }
.pc-quick.is-open .pc-quick__item:nth-child(5) { transition-delay: .20s; }

.pc-quick__item:hover {
    color: var(--pc-navy);
    box-shadow: 0 10px 28px rgba(10, 46, 93, .24);
    transform: translateX(-4px);
}
.pc-quick__item i {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--pc-navy);
    color: #fff;
    font-size: 1.12rem;
    flex-shrink: 0;
}
.pc-quick__item--wa i  { background: #25D366; }
.pc-quick__item--call i{ background: #1857C4; }
.pc-quick__item--adm i { background: var(--pc-gold); color: var(--pc-navy-deep); }
.pc-quick__item--loc i { background: #E0574B; }
.pc-quick__item--mail i{ background: var(--pc-navy-soft); }

/* ---- the launcher itself ---- */
.pc-quick__toggle {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--pc-navy);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(10, 46, 93, .38);
    transition: background .3s var(--pc-ease), transform .3s var(--pc-ease),
                box-shadow .3s var(--pc-ease);
}
.pc-quick__toggle:hover { background: var(--pc-navy-soft); transform: scale(1.05); }
.pc-quick.is-open .pc-quick__toggle {
    background: var(--pc-gold);
    color: var(--pc-navy-deep);
    box-shadow: 0 12px 32px rgba(200, 162, 74, .42);
}

/* two icons cross-fade in place: a headset while closed, a cross while open */
.pc-quick__toggle i {
    grid-area: 1 / 1;
    font-size: 1.55rem;
    line-height: 1;
    transition: opacity .28s var(--pc-ease), transform .35s var(--pc-ease);
}
.pc-quick__toggle .pc-quick__ico--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.pc-quick.is-open .pc-quick__toggle .pc-quick__ico--open  { opacity: 0; transform: rotate(90deg) scale(.6); }
.pc-quick.is-open .pc-quick__toggle .pc-quick__ico--close { opacity: 1; transform: none; }

/* a slow halo so the launcher is noticed without nagging; it stops once opened */
.pc-quick__toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--pc-navy);
    animation: pcQuickPing 3.2s var(--pc-ease) infinite;
    pointer-events: none;
}
.pc-quick.is-open .pc-quick__toggle::after,
.pc-quick__toggle:hover::after { animation: none; opacity: 0; }
@keyframes pcQuickPing {
    0%        { transform: scale(1);    opacity: .55; }
    70%, 100% { transform: scale(1.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-quick__toggle::after { animation: none; opacity: 0; }
}

/* on the narrowest screens the labels would crowd the viewport edge */
@media (max-width: 380px) {
    .pc-quick__item { font-size: .82rem; padding-left: .85rem; }
    .pc-quick__item i { width: 34px; height: 34px; font-size: 1rem; }
    .pc-quick__toggle { width: 54px; height: 54px; }
}

/* A phone held sideways leaves roughly 270px above the launcher, which the
   full-size stack overruns — so compact it rather than let the top option
   disappear off the screen. */
@media (max-height: 520px) {
    .pc-quick__items { gap: .38rem; bottom: calc(100% + .6rem); }
    .pc-quick__item {
        font-size: .8rem;
        padding: .28rem .28rem .28rem .85rem;
        gap: .5rem;
    }
    .pc-quick__item i { width: 30px; height: 30px; font-size: .95rem; }
    .pc-quick__toggle { width: 50px; height: 50px; }
    .pc-quick__toggle i { font-size: 1.3rem; }
}

.pc-totop {
    position: fixed;
    left: clamp(.8rem, 2vw, 1.5rem);
    bottom: clamp(.8rem, 2vw, 1.5rem);
    z-index: 1150;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid var(--pc-line);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    color: var(--pc-navy);
    font-size: 1.2rem;
    display: grid; place-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .35s var(--pc-ease);
}
.pc-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* --------------------------------------------------------------- 24. Footer */

.pc-footer {
    background: var(--pc-navy-deep);
    color: rgba(255, 255, 255, .66);
    font-size: .94rem;
}
.pc-footer a { color: rgba(255, 255, 255, .72); }
.pc-footer a:hover { color: var(--pc-gold-light); }
.pc-footer__top {
    padding-block: clamp(3.25rem, 6vw, 5rem);
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 720px)  { .pc-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pc-footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }

.pc-footer h4 {
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 1.3rem;
}
.pc-footer__list { list-style: none; margin: 0; padding: 0; }
.pc-footer__list li { margin-bottom: .68rem; }
/* Footer lock-up: the crest as artwork, the school name as real text. The
   supplied wide logo still carries the former name in its wordmark, and setting
   the name in type also keeps it sharp on every display and readable to search
   engines and screen readers. */
.pc-footer__lockup {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.4rem;
    text-decoration: none;
    color: inherit;
}
.pc-footer__lockup img {
    width: 64px;
    height: auto;
    flex-shrink: 0;
}
.pc-footer__lockup-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pc-footer__lockup-name {
    font-family: var(--pc-display);
    font-weight: 700;
    font-size: 1.16rem;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #fff;
    text-wrap: balance;
}
.pc-footer__lockup-sub {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pc-gold-light);
}
.pc-footer__lockup:hover .pc-footer__lockup-name { color: var(--pc-gold-light); }
.pc-footer__lockup:focus-visible { outline: 2px solid var(--pc-gold-light); outline-offset: 4px; border-radius: 6px; }

/* The four-column footer starts at 1024px, where the brand column is at its
   narrowest — about 232px. Set side by side, that leaves roughly 155px for the
   type and the strapline breaks across two lines. Stacking the crest above the
   text hands the whole column width back and keeps it on one. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .pc-footer__lockup { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .pc-footer__lockup img { width: 56px; }
    .pc-footer__lockup-name { font-size: 1.08rem; }
    .pc-footer__lockup-sub { font-size: .7rem; letter-spacing: .04em; }
}
.pc-footer__brand p { max-width: 40ch; margin-bottom: 1.5rem; }

.pc-footer__contact { list-style: none; margin: 0; padding: 0; }
.pc-footer__contact li {
    display: flex;
    gap: .8rem;
    margin-bottom: 1rem;
    line-height: 1.55;
}
.pc-footer__contact i { color: var(--pc-gold); font-size: 1.1rem; flex-shrink: 0; margin-top: .12rem; }

.pc-footer__social { display: flex; gap: .55rem; }
.pc-footer__social a {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1.1rem;
    transition: all .3s var(--pc-ease);
}
.pc-footer__social a:hover { background: var(--pc-gold); color: var(--pc-navy-deep); transform: translateY(-3px); }

.pc-newsletter { display: flex; gap: .5rem; margin-top: 1rem; }
.pc-newsletter input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: var(--pc-radius-pill);
    padding: .82rem 1.1rem;
    color: #fff;
    font-family: inherit;
    font-size: .92rem;
}
.pc-newsletter input::placeholder { color: rgba(255, 255, 255, .45); }
.pc-newsletter input:focus { outline: none; border-color: var(--pc-gold); }
.pc-newsletter button {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 0;
    background: var(--pc-gold);
    color: var(--pc-navy-deep);
    font-size: 1.2rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .3s var(--pc-ease);
}
.pc-newsletter button:hover { background: var(--pc-gold-light); }

.pc-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-block: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.75rem;
    justify-content: space-between;
    align-items: center;
    font-size: .87rem;
}
.pc-footer__bottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pc-footer__bottom li { margin: 0; }

.pc-emergency {
    background: rgba(200, 162, 74, .1);
    border: 1px solid rgba(200, 162, 74, .28);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    margin-top: 1.35rem;
    font-size: .88rem;
}
.pc-emergency strong { color: var(--pc-gold-light); display: block; margin-bottom: .3rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------------------------------------- 25. Prose body */

.pc-prose { max-width: 74ch; }
.pc-prose h2 { margin-top: 2.75rem; }
.pc-prose h3 { margin-top: 2.25rem; font-size: 1.32rem; }
.pc-prose h2:first-child,
.pc-prose h3:first-child { margin-top: 0; }
.pc-prose ul { padding-left: 0; list-style: none; }
.pc-prose ul li {
    position: relative;
    padding-left: 1.7rem;
    margin-bottom: .55rem;
}
.pc-prose ul li::before {
    content: "";
    position: absolute;
    left: .35rem;
    top: .72em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pc-gold);
}
.pc-prose ol { padding-left: 1.3rem; }
.pc-prose ol li::marker { color: var(--pc-royal); font-weight: 700; }

/* The column that holds a sticky panel. It deliberately carries no scroll
   reveal: the reveal animates a `transform`, and a transformed ancestor
   becomes the containing block for anything sticky inside it. */
.pc-stickycol { transform: none; }

.pc-sticky {
    position: sticky;
    top: calc(var(--pc-header-h) + 28px);
    /* stops the panel being stretched to the full column height, which would
       leave it with no room to travel */
    align-self: start;
}

/* A panel with enough content to overrun a short viewport. Pinning it there
   would strand its lower half off-screen, so below the height at which it
   fits whole it simply scrolls with the page — better than pinning it and
   giving a block of body copy its own scrollbar. The max-height is a backstop
   in case the copy grows later. */
/* No inner scrollbar: a scroll region inside a pinned panel is a second thing
   to scroll and reads as a bug. So a panel either fits the viewport whole and
   pins, or it does not fit and scrolls with the page like anything else.
   The two breakpoints below are the measured panel height plus the header and
   the 28px margins above and below — re-measure if a panel gains content.
   A few px of slack is deliberate — the panel heights are fractional.
       --tall    594px panel  ->  pins from 730px viewport   (founder)
       --taller  733px panel  ->  pins from 867px viewport   (smart classrooms) */
@media (max-height: 729px) { .pc-sticky--tall   { position: static; } }
@media (max-height: 866px) { .pc-sticky--taller { position: static; } }

/* Below the split breakpoint the two columns stack, so there is no second
   column to scroll past — pinning here would just park a panel over the
   content beneath it. */
@media (max-width: 899px) {
    .pc-sticky {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.pc-sidecard {
    background: var(--pc-grey);
    border: 1px solid var(--pc-line-soft);
    border-radius: var(--pc-radius);
    padding: 1.75rem;
}
.pc-sidecard h4 {
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pc-navy);
    margin-bottom: 1.15rem;
}
.pc-sidecard__list { list-style: none; margin: 0; padding: 0; }
.pc-sidecard__list li { margin-bottom: .1rem; }
.pc-sidecard__list a {
    display: block;
    padding: .58rem .75rem;
    border-radius: 10px;
    font-size: .93rem;
    font-weight: 500;
    color: var(--pc-body);
}
.pc-sidecard__list a:hover { background: #fff; color: var(--pc-navy); }
.pc-sidecard__list a.is-active { background: #fff; color: var(--pc-navy); font-weight: 600; box-shadow: var(--pc-shadow-sm); }

/* --------------------------------------------------------- 26. Video / player */

.pc-videoblock {
    position: relative;
    border-radius: var(--pc-radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--pc-navy);
    box-shadow: var(--pc-shadow);
}
.pc-videoblock img,
.pc-videoblock video,
.pc-videoblock iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border: 0;
}
.pc-play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: rgba(6, 30, 62, .35);
    border: 0;
    cursor: pointer;
    transition: background .35s var(--pc-ease);
}
.pc-play:hover { background: rgba(6, 30, 62, .5); }
.pc-play span {
    width: clamp(64px, 8vw, 88px);
    height: clamp(64px, 8vw, 88px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .95);
    color: var(--pc-navy);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    transition: transform .35s var(--pc-ease);
}
.pc-play:hover span { transform: scale(1.08); }
.pc-play::before,
.pc-play::after {
    content: "";
    position: absolute;
    width: clamp(64px, 8vw, 88px);
    height: clamp(64px, 8vw, 88px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .45);
    animation: pcPulse 2.6s var(--pc-ease) infinite;
}
.pc-play::after { animation-delay: 1.3s; }
@keyframes pcPulse {
    0%   { transform: scale(1);   opacity: .8; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* -------------------------------------------------------- 27. Scroll reveals */

.pc-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--pc-ease), transform .8s var(--pc-ease);
}
/* No `will-change` here on purpose. It would stay on every revealed element
   for the life of the page, promoting ~100 layers and — because it creates a
   containing block — interfering with the sticky panels nested inside these
   wrappers. The reveal is a one-off fade; it does not need the hint. */
.pc-reveal.is-visible { opacity: 1; transform: none; }
.pc-reveal--left  { transform: translateX(-30px); }
.pc-reveal--right { transform: translateX(30px); }
.pc-reveal--zoom  { transform: scale(.95); }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .pc-reveal { opacity: 1 !important; transform: none !important; }
    .pc-hero__slide { transition: opacity .4s linear; transform: none; }
}

/* ------------------------------------------------------------- 28. Marquee */

.pc-marquee {
    overflow: hidden;
    border-block: 1px solid var(--pc-line);
    padding-block: 1.15rem;
    background: #fff;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pc-marquee__track {
    display: flex;
    gap: 3.5rem;
    width: max-content;
    animation: pcMarquee 44s linear infinite;
}
.pc-marquee:hover .pc-marquee__track { animation-play-state: paused; }
.pc-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--pc-display);
    font-size: .93rem;
    font-weight: 600;
    color: var(--pc-navy);
    white-space: nowrap;
}
.pc-marquee__item i { color: var(--pc-gold); font-size: 1.1rem; }
@keyframes pcMarquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ 29. Misc bits */

.pc-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border-radius: var(--pc-radius-pill);
    background: var(--pc-grey);
    border: 1px solid var(--pc-line-soft);
    font-family: var(--pc-display);
    font-size: .78rem;
    font-weight: 600;
    color: var(--pc-navy);
}
.pc-pill--gold { background: var(--pc-gold-soft); border-color: #EADFC4; color: #8A6A22; }

.pc-datechip {
    flex-shrink: 0;
    width: 68px;
    border-radius: 14px;
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--pc-line-soft);
}
.pc-datechip__m {
    background: var(--pc-navy);
    color: #fff;
    font-family: var(--pc-display);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .3rem 0;
}
.pc-datechip__d {
    background: #fff;
    font-family: var(--pc-display);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--pc-navy);
    padding: .35rem 0 .45rem;
    line-height: 1;
}

.pc-eventrow {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--pc-line-soft);
}
.pc-eventrow:last-child { border-bottom: 0; }
.pc-eventrow__body { flex: 1; min-width: 0; }
.pc-eventrow__body h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.pc-eventrow__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.1rem;
    font-size: .85rem;
    color: var(--pc-muted);
    margin-bottom: .6rem;
}
.pc-eventrow__meta i { color: var(--pc-gold); margin-right: .3rem; }
.pc-eventrow p { font-size: .94rem; margin-bottom: .8rem; }
/* whatever ends a row, it should not leave a trailing gap above the divider */
.pc-eventrow__body > *:last-child { margin-bottom: 0; }

.pc-empty {
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
    border: 1px dashed var(--pc-line);
    border-radius: var(--pc-radius);
    background: var(--pc-grey);
}
.pc-empty i { font-size: 2.4rem; color: var(--pc-muted); margin-bottom: 1rem; display: block; }

/* magnific popup polish */
.mfp-bg { background: #061E3E; opacity: .96; }
.mfp-figure::after { box-shadow: none; background: transparent; }
.mfp-counter { color: rgba(255, 255, 255, .6); font-size: .85rem; }
.mfp-title { color: rgba(255, 255, 255, .8); font-size: .9rem; padding-top: .6rem; }

/* print */
@media print {
    .pc-header, .pc-topbar, .pc-quick, .pc-totop, .pc-footer__top,
    .pc-hero__media, .pc-drawer, .pc-overlay { display: none !important; }
    body { color: #000; }
    .pc-section { padding-block: 1.5rem; }
}