/* Home hero, initiatives and contact form (footer comes from site-shell.css).
   Reused page components live in home-components.css. */
@font-face {
    font-family:Helvetica;
    src:url('../font/helvetica-255/Helvetica.ttf') format('truetype');
    font-display:swap;
}

@font-face {
    font-family:Helvetica;
    src:url('../font/helvetica-255/Helvetica-Bold.ttf') format('truetype');
    font-weight:700;
    font-display:swap;
}

:root {
    --navy:#031337;
    --ink:#202733;
    --blue:#073763;
    --yellow:#f7b21b;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    color:var(--ink);
    font:16px Helvetica,Arial,sans-serif;
}

a {
    color:inherit;
    text-decoration:none;
}

button, input, select, textarea {
    font:inherit;
}

button, a, input, summary, select, textarea {
    -webkit-tap-highlight-color:transparent;
}

a:focus-visible, button:focus-visible, summary:focus-visible {
    outline:3px solid #f7b21b;
    outline-offset:5px;
}

button, summary {
    cursor:pointer;
}

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

h1, h2, h3, p {
    margin:0;
}

h2 {
    font:700 44px/1.2 Georgia,'Times New Roman',serif;
    text-align:center;
}

button {
    border:0;
}

button:disabled {
    opacity:.6;
    cursor:wait;
}

.wrap {
    width:calc(100% - 160px);
    max-width:1280px;
    margin:auto;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
}

.skip-link {
    position:fixed;
    top:-60px;
    left:20px;
    padding:12px;
    background:white;
    z-index:100;
}

.skip-link:focus {
    top:10px;
}

.hero {
    max-width:1440px;
    margin:auto;
    padding:0 10% 56px 10%;
}

.photo-grid {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    grid-auto-rows:auto;
    gap:22px 20px;
}

.hero-intro {
    grid-column:span 2;
    align-self:center;
}

.hero-intro img {
    width:145px;
    height:auto;
    margin-bottom:15px;
}

.hero-intro p {
    font-size:18px;
    line-height:1.48;
    max-width:365px;
    color:#111;
}

.tile {
    position:relative;
    aspect-ratio:177/168;
    overflow:hidden;
}

.tile img {
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(1);
}

.brand-dots {
    position:absolute;
    width:66%;
    height:70%;
    left:18%;
    top:15%;
}

.brand-dots i {
    position:absolute;
    background:#ffbb32;
    width:24%;
    aspect-ratio:1;
    border-radius:50%;
}

.brand-dots i:nth-child(1) {
    left:0;
    top:0;
}

.brand-dots i:nth-child(2) {
    left:37%;
    top:0;
}

.brand-dots i:nth-child(3) {
    right:0;
    top:0;
}

.brand-dots i:nth-child(4) {
    right:0;
    top:35%;
}

.brand-dots i:nth-child(5) {
    right:0;
    bottom:0;
}

.brand-dots i:nth-child(6) {
    width:57%;
    background:#00476e;
    left:0;
    bottom:0;
}

.initiatives {
    padding:82px 0 80px;
    background:linear-gradient(110deg,#cbbaff,#f8e4d1 59%,#ffecb4);
    min-height:598px;
}

.initiatives h2 {
    margin-bottom:40px;
}

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

.initiative-card {
    border-radius:16px;
    overflow:hidden;
    background:#2898f7;
    color:white;
    transition:transform .2s;
}

.initiative-card:hover {
    transform:translateY(-5px);
}

.initiative-card img {
    width:100%;
    aspect-ratio:412/266;
    object-fit:cover;
}

.initiative-card h3 {
    font:700 30px/1.2 Georgia,serif;
    text-align:center;
    padding:23px 5px;
}

.initiative-card:nth-child(2) {
    background:#315da4;
}

.initiative-card:nth-child(3) {
    background:#f7b21b;
}

.status {
    font-size:13px;
    line-height:1.5;
    margin-top:8px;
}

.status:empty {
    display:none;
}

dialog {
    border:0;
    border-radius:20px;
    padding:36px;
    width:min(680px,calc(100% - 32px));
    color:var(--ink);
    max-height:90vh;
}

dialog::backdrop {
    background:#031337bb;
}

dialog h2 {
    font-size:34px;
    margin-bottom:28px;
}

.close-dialog {
    position:absolute;
    right:16px;
    top:12px;
    background:none;
    font-size:30px;
    color:var(--blue);
}

.contact-form {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.contact-form label {
    font-size:13px;
    display:flex;
    gap:8px;
    flex-direction:column;
}

.contact-form input, .contact-form select, .contact-form textarea {
    width:100%;
    padding:12px;
    border:1px solid #b9c9d5;
    border-radius:7px;
    background:white;
    color:var(--ink);
}

.contact-form .wide {
    grid-column:1/-1;
}

.contact-form textarea {
    min-height:100px;
    resize:vertical;
}

.contact-form button {
    justify-self:start;
}

@media(min-width:1441px) {
    .hero {
        padding-left:214px;
        padding-right:118px;
    }

    .photo-grid {
        gap:22px 20px;
    }

}

@media(max-width:1100px) {
    .wrap {
        width:calc(100% - 64px);
    }

    .hero {
        padding-left:8%;
        padding-right:8%;
    }

    .photo-grid {
        gap:12px;
    }

    .hero-intro p {
        font-size:16px;
    }

    .hero-intro img {
        width:130px;
    }

    .initiative-card h3 {
        font-size:24px;
    }

}

@media(max-width:700px) {
    h2 {
        font-size:32px;
    }

    .wrap {
        width:calc(100% - 36px);
    }

    .contact-button {
        font-size:13px;
        padding:10px 15px;
    }

    .hero {
        padding:15px 18px 38px;
    }

    .photo-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:10px;
    }

    .hero-intro {
        padding:0 0 20px;
        display:flex;
        gap:22px;
        align-items:center;
    }

    .hero-intro img {
        width:115px;
        margin:0;
    }

    .hero-intro p {
        font-size:15px;
        max-width:230px;
    }

    .tile {
        aspect-ratio:1;
    }

    .initiatives {
        padding:48px 0;
        min-height:0;
    }

    .initiatives h2 {
        margin-bottom:28px;
    }

    .initiative-grid {
        grid-template-columns:1fr;
        gap:24px;
    }

    .initiative-card h3 {
        font-size:26px;
        padding:20px;
    }

    .contact-form {
        grid-template-columns:1fr;
    }

    dialog {
        padding:36px 22px;
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }

    .initiative-card {
        transition:none;
    }

}

@media(min-width:701px) {
    .photo-grid {
        gap:10px;
    }

    .hero-intro img {
        width:145px;
        height:76px;
        object-fit:contain;
    }

    .hero-intro p {
        font-size:18px;
    }

    .hero-intro {
        align-self:center;
    }

}

h2, .initiative-card h3 {
    font-family:'DM Serif Display',Georgia,serif;
    font-weight:400;
}

.hero-intro img {
    flex-shrink:0;
}

.hero-intro h1 {
    flex-shrink:0;
}

@media(min-width:1101px) {
    .initiatives {
        height:598px;
        min-height:598px;
    }

}

@media(max-width:700px) {

    .hero-intro img {
        width:115px;
    }

    .hero-intro h1 {
        width:115px;
    }

}


/* Footer: match conclave.html's about-footer exactly */
.about-footer {
    background:#00123a;
    font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;
    line-height:24px;
}

/* conclave keeps the 4-column footer down to 1101px */
@media (min-width:1101px) {
    .about-footer {
        padding:50px 80px 22px;
    }

    .about-footer .footer-top {
        grid-template-columns:396fr 283fr 117fr 404fr;
        gap:30px;
    }

    .about-footer .subscribe {
        grid-column:auto;
        width:100%;
        max-width:none;
    }
}

.about-footer .footer-top {
    min-height:144px;
    align-items:normal;
}

.about-footer .foundation p {
    line-height:21px;
}

.about-footer .footer-top h3 {
    font-family:Helvetica;
    line-height:14px;
}

.about-footer .footer-top>div:not(.foundation)>a+a {
    margin-top:7px;
}

.about-footer .subscribe input,
.about-footer .subscribe button {
    line-height:21px;
}

.about-footer .subscribe input {
    flex:0 1 auto;
    width:75%;
}

.about-footer .subscribe button {
    flex:0 1 auto;
    width:95px;
    color:#00123a;
}

.about-footer #subscribe-status {
    line-height:19.5px;
}

.about-footer .socials {
    margin-top:0;
    color:#8290a6;
}

.about-footer .socials a {
    margin-top:10px;
    font-size:14px;
    line-height:23.68px;
    letter-spacing:.16px;
}

.about-footer .footer-bottom .round {
    color:#718096;
}

@media (max-width:1199px) {
    .about-footer .socials {
        margin-left:0;
    }

    .about-footer .socials a {
        margin-top:28px;
    }

    .about-footer .subscribe input {
        width:0;
        flex:1;
    }

    .about-footer .subscribe button {
        flex:0 0 70px;
        width:auto;
    }

    .about-footer .footer-bottom {
        grid-template-columns:1fr auto 45px;
        gap:30px;
        margin-top:36px;
    }
}

@media (max-width:767px) {
    .about-footer .subscribe {
        max-width:404px;
    }

    .about-footer .footer-bottom {
        grid-template-columns:1fr 45px;
    }
}