/* Palette from the supplied UGLE reference: blue #004080, supporting blue,
grey and coral. Serif headings echo the supplied homepage mockup. */
:root {
    --blue:#004080;
    --navy:#07345b;
    --pale:#e6eef4;
    --support:#809cba;
    --grey:#aeb0b3;
    --coral:#c44c3a;
    --ink:#243f59;
    --white:#fff
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:110px
}
body {
    margin:0;
    color:var(--ink);
    font:16px/1.6 Arial,Helvetica,sans-serif
}
h1,h2,h3,p,figure,blockquote {
    margin:0
}
p+p {
    margin-top:16px
}
a {
    color:inherit;
    text-underline-offset:4px
}
button {
    font:inherit
}
h1,h2,h3 {
    font-family:Georgia,'Times New Roman',serif;
    font-weight:400;
    color:var(--blue);
    line-height:1.12
}
h1 {
    font-size:clamp(40px,4.5vw,68px);
    letter-spacing:-1.8px
}
h2 {
    font-size:clamp(28px,2.6vw,38px)
}
h3 {
    font-size:23px
}
.container {
    width:min(1280px,92%);
    margin:auto
}
.section {
    padding-top:52px;
    padding-bottom:52px
}
.section-title:after {
    content:'';
    display:block;
    width:40px;
    height:2px;
    background:var(--coral);
    margin:14px 0 20px
}
.eyebrow {
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
    font-weight:600;
    margin-bottom:12px
}
.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.98);
    transition:box-shadow .25s
}
.site-header.is-scrolled {
    box-shadow:0 4px 24px #07345b20
}
.header-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    min-height:110px
}
.brand {
    display:flex;
    align-items:center;
    text-decoration:none;
    font:26px/.95 Georgia,serif;
    text-transform:uppercase;
    color:var(--blue);
    flex-shrink:0
}
.brand small {
    display:block;
    font:8px/1.5 Arial,sans-serif;
    letter-spacing:1.8px;
    margin-top:12px
}
.brand-symbol {
    font:70px/1 Georgia,serif;
    margin-right:12px
}
nav {
    display:flex;
    align-items:center;
    gap:18px
}
nav a {
    font-size:12px;
    text-decoration:none
}
nav a:hover {
    text-decoration:underline
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    background:var(--blue);
    color:white;
    padding:13px 21px;
    text-decoration:none;
    border:1px solid transparent;
    border-radius:2px;
    font:17px/1.4 Georgia,serif;
    transition:transform .2s,box-shadow .2s,background .2s
}
.button:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 20px #001d3833
}
.button-small {
    font-size:13px;
    padding:12px
}
.button-light {
    background:#e7e0d2;
    color:#183b58
}
.button-outline {
    background:transparent;
    border-color:white
}
.hero {
    position:relative;
    overflow:hidden;
    background:var(--navy);
    color:white
}
.hero-photo {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 43%
}
.hero:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#003565fa 0%,#003565f2 28%,#0035655c 53%,transparent 75%)
}
.hero-inner {
    position:relative;
    z-index:1;
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:40px;
    padding-bottom:34px
}
.hero-content {
    max-width:550px
}
.hero h1 {
    color:white
}
.hero-intro {
    font:21px/1.42 Georgia,serif;
    max-width:450px;
    margin-top:20px
}
.actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px
}
.hero-address {
    font-size:14px;
    margin-top:24px
}
.hero-address a {
    text-decoration:none
}
.hero-quote {
    align-self:flex-start;
    text-align:center;
    font:italic 29px/1.12 Georgia,serif;
    color:var(--blue);
    max-width:230px;
    background:#ffffffc9;
    padding:18px
}
.hero-quote cite {
    display:block;
    font:11px/1.4 Arial,sans-serif;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-top:18px
}
.values {
    background:#f5f5f4;
    padding:26px 0
}
.values-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr)
}
.value {
    text-align:center;
    padding:0 30px;
    border-right:1px solid #d6dde3
}
.value:last-child {
    border:0
}
.value-icon {
    display:grid;
    place-items:center;
    width:60px;
    height:60px;
    border:1px solid var(--blue);
    border-radius:50%;
    font-size:40px;
    color:var(--blue);
    margin:0 auto 12px
}
.value h2 {
    font-size:23px;
    text-transform:uppercase;
    margin-bottom:10px
}
.value p {
    font-size:15px;
    line-height:1.5
}
.about-grid {
    display:grid;
    grid-template-columns:1.7fr .6fr .8fr;
    gap:24px
}
.about-grid h3 {
    margin-top:22px
}
.about-grid .button {
    margin-top:22px
}
.about-note {
    background:var(--pale);
    padding:28px 22px;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.about-note>span {
    font:70px/.6 Georgia,serif;
    color:var(--support)
}
.about-note p {
    font:italic 29px/1.3 Georgia,serif;
    color:var(--blue);
    margin-top:14px
}
.about-note small {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    margin-top:25px
}
.about-photo {
    position:relative;
    min-height:300px;
    overflow:hidden
}
.about-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:48%
}
.about-photo figcaption {
    position:absolute;
    bottom:0;
    background:#07345beb;
    color:white;
    width:100%;
    padding:16px;
    font-size:12px
}
.news {
    background:var(--pale)
}
.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.section-heading>span {
    font-size:13px
}
.news-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.news-card {
    display:flex;
    gap:16px;
    padding:16px;
    background:white;
    transition:transform .25s,box-shadow .25s
}
.news-card:hover {
    transform:translateY(-4px);
    box-shadow:0 10px 28px #00356515
}
.news-art {
    min-width:65px;
    background:#dce6ef;
    display:grid;
    place-items:center;
    font:48px Georgia,serif;
    color:var(--blue)
}
.news-card .eyebrow {
    font-size:9px;
    letter-spacing:1px
}
.news-card h3 {
    font-size:23px;
    margin-bottom:12px
}
.news-card p:not(.eyebrow) {
    font-size:14px
}
.placeholder-label {
    display:block;
    margin-top:15px;
    font-size:11px;
    color:#596a7c
}
.community {
    max-width:900px;
    text-align:center
}
.community .section-title:after {
    margin-left:auto;
    margin-right:auto
}
.join {
    background:var(--coral);
    color:white;
    padding:30px 0
}
.join-inner {
    display:flex;
    align-items:center;
    gap:26px
}
.join h2 {
    color:white;
    margin-bottom:10px
}
.join .button {
    margin-left:auto;
    flex-shrink:0
}
.join-icon {
    border:1px solid white;
    border-radius:50%;
    width:68px;
    height:68px;
    display:grid;
    place-items:center;
    font-size:42px;
    flex-shrink:0
}
.site-footer {
    background:var(--navy);
    color:white;
    padding:45px 0 28px
}
.site-footer .brand {
    color:white
}
.footer-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:35px
}
.site-footer nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
}
.site-footer address {
    font-style:normal;
    font-size:14px
}
.footer-bottom {
    border-top:1px solid #ffffff50;
    padding-top:24px;
    margin-top:30px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:13px
}
.prose {
    max-width:850px;
    min-height:55vh
}
.prose h1 {
    margin-bottom:24px
}
.prose>a {
    display:inline-block;
    margin-top:24px
}
.skip-link {
    position:fixed;
    left:12px;
    top:-100px;
    background:white;
    color:var(--blue);
    padding:12px;
    z-index:100
}
.skip-link:focus {
    top:12px
}
:focus-visible {
    outline:3px solid var(--coral);
    outline-offset:5px
}
.menu-toggle {
    background:white;
    color:var(--blue);
    border:1px solid var(--blue);
    padding:8px 12px
}
.reveal {
    opacity:1
}
.motion-ready .reveal {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease,transform .7s ease
}
.motion-ready .reveal.is-visible {
    opacity:1;
    transform:none
}
.motion-ready .value:nth-child(2),.motion-ready .news-card:nth-child(2) {
    transition-delay:.08s
}
.motion-ready .value:nth-child(3),.motion-ready .news-card:nth-child(3) {
    transition-delay:.16s
}
@media(max-width:1150px) {
    .header-inner {
        flex-wrap:wrap;
        padding:18px 0;
        gap:15px
    }
    nav {
        flex-wrap:wrap;
        gap:16px
    }
    .brand {
        font-size:23px
    }
    .hero-quote {
        font-size:24px
    }
    .about-grid {
        grid-template-columns:1.5fr .7fr
    }
    .about-note {
        display:none
    }
}
@media(max-width:760px) {
    html {
        scroll-padding-top:100px
    }
    .header-inner {
        min-height:85px
    }
    .brand {
        font-size:20px
    }
    .brand small {
        font-size:6px;
        letter-spacing:1px
    }
    .brand-symbol {
        font-size:48px;
        margin-right:8px
    }
    .menu-toggle:not([hidden]) {
        display:block
    }
    #navigation {
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        padding:8px 0
    }
    #navigation[hidden] {
        display:none
    }
    #navigation a {
        padding:7px;
        font-size:15px
    }
    .hero-inner {
        min-height:640px;
        align-items:flex-end;
        padding-top:160px
    }
    .hero-photo {
        object-position:62% top
    }
    .hero:after {
        background:linear-gradient(0deg,#003565 0%,#003565ed 40%,#00356520 100%)
    }
    .hero-content {
        max-width:100%
    }
    .hero h1 {
        font-size:43px
    }
    .hero-intro {
        font-size:19px
    }
    .hero-quote {
        display:none
    }
    .values-grid {
        grid-template-columns:1fr 1fr;
        gap:28px 0
    }
    .value {
        padding:0 16px
    }
    .value:nth-child(2) {
        border:0
    }
    .value h2 {
        font-size:20px
    }
    .about-grid {
        grid-template-columns:1fr
    }
    .about-photo {
        height:300px
    }
    .news-grid {
        grid-template-columns:1fr
    }
    .section-heading {
        display:block
    }
    .section-heading>span {
        display:block;
        margin-bottom:20px
    }
    .section {
        padding-top:35px;
        padding-bottom:35px
    }
    .join-inner {
        flex-wrap:wrap;
        gap:18px
    }
    .join-inner>div {
        flex:1;
        min-width:200px
    }
    .join .button {
        margin-left:0
    }
    .join p br {
        display:none
    }
    .footer-grid {
        grid-template-columns:1fr
    }
    .footer-bottom {
        flex-direction:column
    }
    .button {
        font-size:16px
    }
    .news-art {
        min-width:85px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        transition:none!important;
        animation:none!important
    }
    .motion-ready .reveal {
        opacity:1;
        transform:none
    }
    .button:hover,.news-card:hover {
        transform:none
    }
}