/* ==========================================================================
   LHMSU public website
   Direction taken from the university's own flyers: deep indigo and orange
   on white, bold condensed headings, and the angled corner wedge that runs
   across their printed material. The apply page uses the same typefaces, so
   the website, the application form and the portal read as one institution.
   ========================================================================== */

:root {
    --indigo:      #1e1246;
    --indigo-deep: #150c33;
    --indigo-soft: #2e1f66;
    --orange:      #f15a22;
    --orange-deep: #d1440f;
    --orange-wash: #fff1eb;

    --ink:    #16121f;
    --body:   #3c3a45;
    --muted:  #6f6c7a;
    --line:   #e6e4ee;
    --paper:  #f7f6fb;
    --white:  #ffffff;

    --radius:    12px;
    --radius-lg: 20px;
    --shadow:    0 2px 16px rgba(30,18,70,.07);
    --shadow-lg: 0 24px 60px rgba(30,18,70,.18);

    --wrap: 1180px;
}

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

html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }

body {
    font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--body);
    background: var(--white);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--indigo); text-decoration: none; }

h1, h2, h3, h4, .display {
    font-family: 'Archivo', 'Public Sans', sans-serif;
    color: var(--indigo);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }

/* ── Header ─────────────────────────────────────────────────────────────── */

.topline {
    background: var(--indigo-deep);
    color: rgba(255,255,255,.82);
    font-size: 13px;
}

.topline .wrap {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-wrap: wrap;
}

.topline a { color: #fff; }
.topline .sep { opacity: .4; margin: 0 8px; }

.masthead {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 900;
}

.masthead .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.brand { display: flex; align-items: center; gap: 13px; }
.brand img { height: 52px; width: auto; }

.brand-mark {
    width: 50px; height: 50px; flex: 0 0 50px;
    border-radius: 50%;
    background: var(--indigo);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Archivo', sans-serif; font-weight: 800;
    font-size: 12.5px; letter-spacing: -.02em;
    border: 2px solid var(--orange);
    overflow: hidden;
}

/* Both are spans. Without display:block the motto runs on after the name and
   the lockup collapses into a ragged three-line block. */
.brand-text { min-width: 0; max-width: 330px; }

.brand-text .n {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 14.5px;
    color: var(--indigo);
    line-height: 1.2;
    letter-spacing: -.02em;
}

.brand-text .m {
    display: block;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 600;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mainnav { display: flex; align-items: center; gap: 4px; }

.mainnav a {
    padding: 9px 13px;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}

.mainnav a:hover { background: var(--paper); color: var(--indigo); }

.mainnav a.active {
    color: var(--indigo);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--orange);
}

/* `.mainnav a` (0,1,1) out-specifies `.btn-*` (0,1,0), so the nav's dark text
   colour was painting the Student Portal button dark-on-dark. */
.mainnav a.btn-indigo,
.mainnav a.btn-indigo:hover { color: #fff; }
.mainnav a.btn-orange,
.mainnav a.btn-orange:hover { color: #fff; }
.mainnav a.btn { border-radius: 999px; }
.mainnav a.btn:hover { background: var(--indigo-soft); }
/* The Student Portal button holds its orange on hover — `.mainnav a.btn:hover`
   above would otherwise repaint it indigo. */
.mainnav a.btn-orange:hover {
    background: var(--orange);
    border-color: var(--orange);
}

.navtoggle {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 19px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: .01em;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn-orange { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-orange:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.btn-indigo { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.btn-indigo:hover { background: var(--indigo-soft); border-color: var(--indigo-soft); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-line { background: #fff; color: var(--indigo); border-color: var(--line); }
.btn-line:hover { border-color: var(--indigo); }
.btn-sm { padding: 9px 17px; font-size: 13px; }

/* ── Hero — the angled wedge from the flyers ────────────────────────────── */

.hero {
    position: relative;
    background: var(--indigo);
    color: #fff;
    overflow: hidden;
    padding: 76px 0 96px;
}

.hero::after {
    content: "";
    position: absolute;
    right: -8%;
    top: -30%;
    width: 46%;
    height: 160%;
    background: var(--orange);
    transform: rotate(14deg);
    opacity: .93;
}

.hero.plain::after { opacity: .16; }

.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; font-size: clamp(31px, 5.2vw, 55px); max-width: 15ch; }
.hero .kicker {
    display: inline-block;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    padding: 6px 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.hero p.lede { font-size: 18px; color: rgba(255,255,255,.9); max-width: 56ch; margin-top: 18px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.hero-slide-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .3;
    z-index: 0;
}

/* When a real photo is set the photo leads: it runs at full strength, a
   left-to-right scrim keeps the headline readable, and the flyer wedge drops
   to a translucent tint so the subject stays visible through it.
   Stacking order is set explicitly — ::after is the last child and would
   otherwise paint over everything. */
.hero.has-image .hero-slide-img { opacity: 1; }

/* ── Hero carousel ──────────────────────────────────────────────────────────
   Every slide is stacked in the same grid cell, so the hero is as tall as its
   tallest copy block and nothing jumps as the slides change. Only the panel
   carrying .is-on is visible; the rest sit at opacity 0 and are inert.
   ------------------------------------------------------------------------ */

.hero .hero-slide-img { opacity: 0; transition: opacity .85s ease; }
.hero.has-image .hero-slide-img { opacity: 0; }
.hero.has-image .hero-slide-img.is-on { opacity: 1; }
.hero:not(.has-image) .hero-slide-img { display: none; }

.hero-stack { display: grid; }
.hero-copy {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(16px);
    /* The outgoing copy clears out quickly; the incoming waits for it. Run
       both at the same speed and the two headlines sit on top of each other
       through the whole crossfade, which reads as a rendering fault. */
    transition: opacity .26s ease-out, transform 0s linear .26s;
    pointer-events: none;
}
.hero-copy.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity .5s ease .24s, transform .6s cubic-bezier(.2,.6,.2,1) .24s;
}

/* Timer bar, pinned to the top of the hero so it can never collide with the
   facts band riding up over the bottom edge. */
.hero-progress {
    position: absolute; left: 0; right: 0; top: 0;
    height: 3px; z-index: 3;
    background: rgba(255,255,255,.16);
}
.hero-progress span {
    display: block; height: 100%; width: 0;
    background: var(--orange);
}

.hero-nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
}

.hero-arrow {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.hero-arrow svg { width: 19px; height: 19px; }
.hero-arrow:hover { background: var(--orange); border-color: var(--orange); transform: scale(1.06); }
.hero-arrow:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.hero-dots { display: flex; align-items: center; gap: 9px; margin-left: 6px; }
.hero-dot {
    width: 9px; height: 9px; padding: 0;
    border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.38);
    transition: background .25s ease, width .35s ease, border-radius .35s ease;
}
.hero-dot.is-on { background: var(--orange); width: 26px; border-radius: 5px; }
.hero-dot:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.hero-count {
    margin-left: auto;
    font-family: 'Archivo', sans-serif;
    font-size: 12.5px; font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255,255,255,.72);
}
.hero-count span { color: #fff; }

@media (max-width: 720px) {
    .hero-nav { margin-top: 26px; gap: 10px; }
    .hero-arrow { width: 36px; height: 36px; }
    .hero-count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero .hero-slide-img, .hero-copy { transition: none; }
    .hero-copy { transform: none; }
    .hero-progress { display: none; }
}

.hero.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
        rgba(30,18,70,.93) 0%,
        rgba(30,18,70,.84) 34%,
        rgba(30,18,70,.42) 62%,
        rgba(30,18,70,.10) 100%);
}

/* Slides with a photo carry no orange wedge — the indigo scrim above does all
   the work, so the picture stays true to colour. */
.hero.has-image::after {
    display: none;
}

/* Page banner for interior pages */
.banner {
    background: var(--indigo);
    color: #fff;
    padding: 54px 0 58px;
    position: relative;
    overflow: hidden;
}
.banner::after {
    content: ""; position: absolute; right: -6%; top: -40%;
    width: 34%; height: 180%; background: var(--orange);
    transform: rotate(14deg); opacity: .85;
}
.banner .wrap { position: relative; z-index: 2; }
.banner h1 { color: #fff; font-size: clamp(27px, 4vw, 40px); }
.banner p { color: rgba(255,255,255,.85); margin-top: 8px; max-width: 62ch; }
.crumb { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.crumb a { color: rgba(255,255,255,.9); }

/* ── Sections ───────────────────────────────────────────────────────────── */

.section { padding: 72px 0; }
.section.tint { background: var(--paper); }
.section-head { margin-bottom: 34px; }
.section-head .eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--orange); margin-bottom: 9px;
}
.section-head h2 { font-size: clamp(25px, 3.4vw, 35px); }
.section-head p { color: var(--muted); margin-top: 10px; max-width: 62ch; }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #d8d5e6; }
.card-pad { padding: 24px; }
.card img.cover { width: 100%; height: 190px; object-fit: cover; }

/* Programme card — the orange rule is the flyer's list motif */
.prog {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--orange);
    border-radius: 10px;
    padding: 22px 22px 20px;
    transition: box-shadow .18s ease, transform .18s ease;
}
.prog:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.prog .ico { font-size: 27px; margin-bottom: 11px; }
.prog h3 { font-size: 17.5px; }
.prog .award {
    display: inline-block; margin-top: 6px;
    color: var(--orange); font-weight: 700; font-size: 13px;
}
.prog p { font-size: 14px; color: var(--muted); margin-top: 9px; }

/* Checklist — the flyer's orange tick */
.ticks { list-style: none; }
.ticks li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 12px;
}
.ticks li::before {
    content: "✓";
    position: absolute; left: 0; top: 1px;
    width: 21px; height: 21px;
    background: var(--orange); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}

/* Fact strip */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
/* ── Facts band ─────────────────────────────────────────────────────────────
   Lifted out of the white and set on indigo, riding up over the bottom edge
   of the hero so the photo and the page are joined by one object instead of
   meeting at a hard line. Orange hairline along the top, orange micro-labels
   matching the leadership cards.
   Note: `.facts div` as a DESCENDANT selector also matched .n and .l, giving
   every inner line the cell's own padding — hence `>` here.
   ------------------------------------------------------------------------ */

.section.facts-band {
    padding-top: 0;
    padding-bottom: 64px;
    position: relative;
    z-index: 3;
}

.facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: -62px;                    /* the overlap onto the hero */
    /* A shade lighter than the hero scrim, so the band still reads as its own
       object where it overlaps the dark left side of the photo. */
    background: linear-gradient(135deg, var(--indigo-soft) 0%, var(--indigo) 78%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.facts::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--orange);
}

.facts > div {
    padding: 30px 22px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,.13);
    transition: background .3s ease;
}

.facts > div:first-child { border-left: 0; }
.facts > div:hover { background: rgba(255,255,255,.05); }

.facts .n {
    font-family: 'Archivo', sans-serif;
    /* Scales down so a long value like "February 2016" stays on one line. */
    font-size: clamp(20px, 2.1vw, 30px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
}

.facts .l {
    margin-top: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #ffa87e;
}

/* Date blocks for admissions */
.dates { display: grid; gap: 12px; }
.date-row {
    display: flex; align-items: center; gap: 16px;
    background: #fff; border: 1px solid var(--line);
    border-radius: 10px; padding: 15px 18px;
}
.date-row .d {
    background: var(--indigo); color: #fff; border-radius: 9px;
    padding: 9px 13px; text-align: center; min-width: 66px;
    font-family: 'Archivo', sans-serif;
}
.date-row .d .day { font-size: 21px; font-weight: 800; line-height: 1; }
.date-row .d .mon { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }

/* CTA band */
.cta {
    background: var(--indigo);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 46px 44px;
    position: relative;
    overflow: hidden;
}
.cta::after {
    content: ""; position: absolute; right: -10%; top: -60%;
    width: 40%; height: 220%; background: var(--orange);
    transform: rotate(14deg); opacity: .9;
}
.cta > * { position: relative; z-index: 2; }
.cta h2 { color: #fff; font-size: clamp(23px, 3vw, 32px); max-width: 20ch; }
.cta p { color: rgba(255,255,255,.9); margin-top: 10px; max-width: 52ch; }

/* Article body written in the CMS */
.prose { font-size: 16.5px; color: var(--body); }
.prose h2 { font-size: 26px; margin: 34px 0 12px; }
.prose h3 { font-size: 20px; margin: 28px 0 10px; }
.prose p { margin: 14px 0; }
.prose ul, .prose ol { margin: 14px 0 14px 22px; }
.prose li { margin: 7px 0; }
.prose img { border-radius: 10px; margin: 20px 0; }
.prose blockquote {
    border-left: 4px solid var(--orange);
    background: var(--orange-wash);
    padding: 14px 20px; border-radius: 0 10px 10px 0; margin: 20px 0;
}
.prose a { color: var(--orange-deep); text-decoration: underline; }

.tag {
    display: inline-block; padding: 4px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: var(--orange-wash); color: var(--orange-deep);
}
.tag.indigo { background: #efecfa; color: var(--indigo-soft); }

/* Forms */
.field { margin-bottom: 17px; }
.field label {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.input {
    width: 100%; padding: 13px 15px; border: 1px solid var(--line);
    border-radius: 10px; font-family: inherit; font-size: 15.5px; color: var(--ink);
    background: #fff;
}
.input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(30,18,70,.1); }
textarea.input { min-height: 130px; resize: vertical; }

.note { padding: 14px 17px; border-radius: 10px; margin-bottom: 20px; font-size: 15px; }
.note-ok { background: #e9f7ef; color: #14663d; border: 1px solid #bfe4cf; }
.note-bad { background: #fdecec; color: #96262c; border: 1px solid #f3c9cb; }

/* Gallery */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tiles a, .tiles .tile { display: block; border-radius: 10px; overflow: hidden; background: var(--paper); }
.tiles img { width: 100%; height: 190px; object-fit: cover; transition: transform .3s ease; }
.tiles a:hover img, .tiles .tile:hover img { transform: scale(1.05); }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
/* Closed state is display:none, not opacity/visibility — a transparent overlay
   left in the layout swallows every click on the page beneath it. */
.lb {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(18, 11, 42, .93);
    align-items: center;
    justify-content: center;
    padding: 46px 64px;
}
.lb.is-on { display: flex; }

.lb-stage {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.lb-img {
    max-width: 100%;
    max-height: calc(100vh - 130px);
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.lb-cap {
    color: rgba(255, 255, 255, .88);
    font-size: 14.5px;
    text-align: center;
    max-width: 70ch;
}

.lb-close, .lb-arrow {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    cursor: pointer;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background .2s ease, transform .2s ease;
}
.lb-close:hover, .lb-arrow:hover { background: var(--orange); border-color: var(--orange); transform: scale(1.06); }
.lb-close:focus-visible, .lb-arrow:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.lb-close { top: 18px; right: 20px; width: 42px; height: 42px; font-size: 26px; }
.lb-arrow { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 30px; padding-bottom: 4px; }
.lb-arrow:hover { transform: translateY(-50%) scale(1.06); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

@media (max-width: 720px) {
    .lb { padding: 60px 12px 74px; }
    .lb-img { max-height: calc(100vh - 170px); }
    .lb-arrow { top: auto; bottom: 16px; transform: none; }
    .lb-arrow:hover { transform: scale(1.06); }
    .lb-prev { left: calc(50% - 56px); }
    .lb-next { right: calc(50% - 56px); }
}

/* Staff */
.person { text-align: center; }
.person img, .person .ph {
    width: 100%; height: 250px; object-fit: cover;
    border-radius: var(--radius); background: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Archivo', sans-serif; font-size: 40px; color: var(--indigo);
}
.person h3 { font-size: 17px; margin-top: 14px; }
.person .role { color: var(--orange); font-size: 13.5px; font-weight: 600; margin-top: 3px; }

/* ── Leadership cards (home page) ───────────────────────────────────────────
   The name plate is cut at the same angle as the wedge on the university's
   flyers, with the orange edge left showing along the cut. The cut is set in
   px, not %, so the angle stays consistent whatever width the card lands at.
   ------------------------------------------------------------------------ */

.leader-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.leader {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--indigo);
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow);
    transition: box-shadow .35s ease, transform .35s ease;
}

.leader:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.leader img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* Held back a touch at rest so the row reads as one set rather than four
       unrelated snapshots, then released on hover. */
    object-position: center 28%;          /* favours the face in a 4:5 crop */
    filter: grayscale(.34) contrast(1.04);
    transform: scale(1.001);
    transition: filter .45s ease, transform .6s cubic-bezier(.2,.6,.2,1);
}

.leader:hover img,
.leader:focus-within img { filter: none; transform: scale(1.055); }

/* No photo on file: initials on indigo, same plate, same shape. */
.leader-initials {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, var(--indigo-soft), var(--indigo-deep));
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 74px;
    letter-spacing: .02em;
    color: rgba(255,255,255,.22);
}

.leader-plate {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--orange);
    clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%);
    padding-top: 3px;
}

.leader-plate .in {
    background: linear-gradient(180deg, rgba(21,12,51,.74) 0%, rgba(21,12,51,.96) 62%);
    clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%);
    padding: 46px 18px 18px;
}

.leader-plate h3 {
    color: #fff;
    font-size: 16.5px;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.leader-role {
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #ffa87e;                       /* lifted orange — legible on indigo */
    transition: color .3s ease;
}

.leader:hover .leader-role { color: #ffc4a6; }

.leader-link { display: block; color: inherit; }
.leader-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

@media (max-width: 980px) {
    .leader-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 460px) {
    /* Stays two-up rather than dropping to one — a single full-width portrait
       is enormous, and a landscape crop cuts the tops of heads off. */
    .leader-grid { gap: 12px; }
    .leader-plate .in { padding: 40px 13px 14px; }
    .leader-plate h3 { font-size: 14.5px; }
    .leader-role { font-size: 10.5px; letter-spacing: .08em; }
    .leader-initials { font-size: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .leader, .leader img { transition: none; }
    .leader:hover { transform: none; }
    .leader:hover img, .leader:focus-within img { transform: none; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.footer { background: var(--indigo-deep); color: rgba(255,255,255,.72); padding: 58px 0 0; margin-top: 0; }
.footer h4 { color: #fff; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 15px; }
.footer a { color: rgba(255,255,255,.72); display: block; padding: 4px 0; font-size: 14.5px; }
.footer a:hover { color: var(--orange); }
.footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 36px; }
.footer .motto { color: var(--orange); font-weight: 700; font-size: 14px; margin-top: 12px; }
.footer .bottom {
    border-top: 1px solid rgba(255,255,255,.13);
    margin-top: 44px; padding: 20px 0;
    display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    font-size: 13.5px;
}

/* Pagination */
.pager { display: flex; gap: 7px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pager a, .pager span {
    padding: 9px 15px; border-radius: 9px; border: 1px solid var(--line);
    font-size: 14px; color: var(--ink);
}
.pager .on { background: var(--indigo); color: #fff; border-color: var(--indigo); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .g4 { grid-template-columns: repeat(2, 1fr); }
    .g3 { grid-template-columns: repeat(2, 1fr); }
    .facts { grid-template-columns: repeat(2, 1fr); margin-top: -40px; }
    .facts > div { border-top: 1px solid rgba(255,255,255,.13); padding: 24px 16px 22px; }
    .facts > div:nth-child(-n+2) { border-top: 0; }
    .facts > div:nth-child(odd) { border-left: 0; }
    .facts .l { font-size: 10px; letter-spacing: .1em; }
    .tiles { grid-template-columns: repeat(3, 1fr); }
    .footer .cols { grid-template-columns: 1fr 1fr; }
    .split { grid-template-columns: 1fr; gap: 30px; }

    .navtoggle { display: flex; }

    .mainnav {
        display: none;
        position: absolute;
        left: 0; right: 0; top: 100%;
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
        flex-direction: column;
        align-items: stretch;
        padding: 10px 16px 16px;
        gap: 2px;
        max-height: 78vh;
        overflow-y: auto;
    }

    .mainnav.open { display: flex; }
    .mainnav a { padding: 13px 12px; border-radius: 9px; }
    .mainnav a.active { box-shadow: none; background: var(--orange-wash); }
    .masthead .wrap { position: relative; }
}

@media (max-width: 720px) {
    .section { padding: 48px 0; }
    .hero { padding: 54px 0 66px; }
    .hero::after { width: 70%; right: -25%; opacity: .8; }
    /* Narrow screens: the text sits over the middle of the photo, so the
       scrim has to run top-to-bottom rather than left-to-right. */
    .hero.has-image::before {
        background: linear-gradient(180deg, rgba(30,18,70,.80), rgba(30,18,70,.93));
    }

    .g2, .g3, .g4 { grid-template-columns: 1fr; }
    .tiles { grid-template-columns: repeat(2, 1fr); }
    .facts { grid-template-columns: 1fr 1fr; }
    .footer .cols { grid-template-columns: 1fr; gap: 26px; }
    .cta { padding: 32px 24px; }
    .topline .wrap { justify-content: center; font-size: 12px; }
    .input { font-size: 16px; }   /* stops iOS zooming on focus */
    .brand img { height: 40px; }
    .brand-text { max-width: 190px; }
    .brand-text .n {
        font-size: 12.5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .brand-text .m { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .masthead, .topline, .footer, .navtoggle, .cta { display: none !important; }
    body { color: #000; }
}