@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");
:root { --blue:#037ef3; --blue-dark:#0055b8; --navy:#0b1736; --ink:#18223d; --muted:#5b6680; --line:#dce7f3; --tint:#f1f8ff; --white:#fff; --shadow:0 18px 46px rgba(15,55,98,.13); --radius:18px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; color:var(--ink); background:var(--white); font-family:Lato,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.6; }
body.dialog-open { overflow:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; }
.shell { width:min(1160px,calc(100% - 40px)); margin-inline:auto; }
.section { padding:104px 0; }
.section-tint { background:var(--tint); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:10px; left:10px; z-index:100; transform:translateY(-150%); padding:10px 14px; border-radius:8px; background:var(--navy); color:var(--white); }
.skip-link:focus { transform:none; }
.site-header { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:0 max(24px,calc((100vw - 1160px)/2)); border-bottom:1px solid rgba(220,231,243,.9); background:rgba(255,255,255,.94); backdrop-filter:blur(14px); }
.brand { color:var(--blue); font-size:1.3rem; font-weight:900; letter-spacing:-.05em; text-decoration:none; }
.site-nav { display:flex; align-items:center; gap:30px; }
.site-nav>a:not(.button) { color:var(--navy); font-size:.88rem; font-weight:700; text-decoration:none; }
.site-nav>a:not(.button):hover { color:var(--blue); }
.menu-toggle { display:none; border:0; background:transparent; padding:8px; }
.menu-toggle span:not(.sr-only) { display:block; width:24px; height:2px; margin:5px 0; background:var(--navy); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:0 24px; border:2px solid var(--blue); border-radius:999px; background:var(--blue); color:var(--white); font-size:.92rem; font-weight:800; text-decoration:none; box-shadow:0 10px 24px rgba(3,126,243,.24); transition:transform 180ms ease,background 180ms ease,box-shadow 180ms ease; }
.button:hover { transform:translateY(-2px); background:var(--blue-dark); box-shadow:0 14px 28px rgba(3,126,243,.3); }
.button:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible { outline:3px solid #ffca28; outline-offset:3px; }
.button-small { min-height:40px; padding:0 20px; font-size:.84rem; }
.hero { position:relative; width:min(100%,1440px); margin-inline:auto; min-height:660px; display:grid; align-items:center; overflow:hidden; background:#eaf5ff; }
.hero-photo { position:absolute; inset:0; background-color:#eaf5ff; background-image:linear-gradient(90deg,rgba(238,248,255,.98) 0%,rgba(238,248,255,.93) 34%,rgba(238,248,255,.48) 49%,rgba(238,248,255,.08) 63%,rgba(238,248,255,0) 78%),url("https://images.unsplash.com/photo-1757584666096-59deb41f1124?auto=format&fit=crop&fm=jpg&q=84&w=2400"); background-size:100% 100%,auto 94%; background-position:center,center; background-repeat:no-repeat; }
.hero-content { position:relative; z-index:2; padding-block:90px; }
.hero-content>* { max-width:650px; }
.eyebrow { margin:0 0 13px; color:var(--blue); font-size:.76rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow-light { color:#c7e7ff; }
h1,h2,h3,h4 { margin-top:0; color:var(--navy); line-height:1.08; }
h1 { max-width:720px!important; margin-bottom:24px; font-size:clamp(3.5rem,7.4vw,6.5rem); letter-spacing:-.065em; }
h2 { margin-bottom:22px; font-size:clamp(2.2rem,4.2vw,3.6rem); letter-spacing:-.045em; }
h3 { margin-bottom:14px; font-size:1.25rem; letter-spacing:-.02em; }
.hero-statement { margin:0 0 30px; color:#24324f; font-size:clamp(1.05rem,1.7vw,1.28rem); line-height:1.55; }
.hero-actions { display:flex; align-items:center; gap:24px; }
.status { display:inline-flex; align-items:center; gap:9px; color:var(--navy); font-size:.88rem; font-weight:800; }
.status span { width:9px; height:9px; border-radius:50%; background:#20a35a; box-shadow:0 0 0 5px rgba(32,163,90,.13); }
.photo-credit { position:absolute; right:16px; bottom:10px; z-index:2; margin:0; padding:4px 8px; border-radius:5px; background:rgba(7,21,48,.65); color:#fff; font-size:.68rem; }
.about-grid,.faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:start; }
.about-copy { color:var(--muted); font-size:1.12rem; }
.about-copy p:first-child { margin-top:2px; }
.strong-line { color:var(--navy); font-weight:800; }
.section-heading { display:flex; justify-content:space-between; gap:50px; align-items:end; margin-bottom:42px; }
.section-heading h2 { margin-bottom:0; }
.section-heading>p { width:min(410px,100%); margin:0 0 8px; color:var(--muted); }
.department-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.department-card { overflow:hidden; padding:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); color:inherit; font:inherit; text-align:left; cursor:pointer; box-shadow:0 1px 0 rgba(11,23,54,.02); transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease; }
.department-card:hover { transform:translateY(-5px); border-color:#a9d4ff; box-shadow:var(--shadow); }
.department-card img { width:100%; height:180px; object-fit:contain; object-position:center; background:#eaf5ff; }
.card-body { position:relative; display:flex; flex-direction:column; min-height:188px; padding:19px 46px 22px 20px; }
.card-number { margin-bottom:8px; color:var(--blue); font-size:.72rem; font-weight:900; letter-spacing:.13em; }
.card-body strong { display:block; margin-bottom:8px; color:var(--navy); font-size:1rem; line-height:1.25; }
.card-body>span:not(.card-number):not(.card-arrow) { color:var(--muted); font-size:.88rem; line-height:1.48; }
.card-arrow { position:absolute; right:17px; bottom:17px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--tint); color:var(--blue); font-weight:900; }
.faq-list details { border-top:1px solid var(--line); }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { position:relative; cursor:pointer; list-style:none; padding:25px 50px 25px 2px; color:var(--navy); font-size:1.02rem; font-weight:800; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:4px; top:20px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--tint); color:var(--blue); font-size:1.25rem; }
.faq-list details[open] summary::after { content:"-"; }
.faq-list details p { margin:-8px 52px 24px 2px; color:var(--muted); }
.cta-section { padding:84px 0; background:var(--blue); color:var(--white); }
.cta-inner { display:flex; justify-content:space-between; align-items:center; gap:50px; }
.cta-section h2 { margin-bottom:12px; color:var(--white); }
.cta-section p:last-child { max-width:650px; margin:0; font-size:1.08rem; }
.button-light { border-color:var(--white); background:var(--white); color:var(--blue-dark); box-shadow:none; }
.button-light:hover { background:#eaf5ff; }
.site-footer { padding:34px 0; background:var(--white); }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.footer-inner strong { color:var(--navy); }
.footer-inner p { margin:3px 0 0; color:var(--muted); font-size:.82rem; }
.social-links { display:flex; flex-wrap:wrap; gap:22px; }
.social-links a { color:var(--blue-dark); font-size:.88rem; font-weight:800; text-decoration:none; }
.social-links a:hover { text-decoration:underline; }
.department-dialog { width:min(940px,calc(100% - 30px)); max-height:90dvh; overflow:auto; padding:0; border:0; border-radius:24px; color:var(--ink); background:var(--white); box-shadow:0 30px 90px rgba(4,25,55,.34); }
.department-dialog::backdrop { background:rgba(4,19,42,.74); backdrop-filter:blur(5px); }
.dialog-frame { position:relative; }
.dialog-close { position:absolute; top:16px; right:16px; z-index:2; display:grid; place-items:center; width:42px; height:42px; padding:0 0 3px; border:0; border-radius:50%; background:rgba(8,28,58,.88); color:var(--white); font:500 1.8rem/1 Inter,sans-serif; cursor:pointer; }
.dialog-department>img { display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:cover; }
.dialog-copy { padding:42px 50px 50px; }
.department-number { margin:0 0 10px; color:var(--blue); font-size:.74rem; font-weight:900; letter-spacing:.14em; }
.dialog-copy h2 { margin-bottom:12px; font-size:clamp(2.2rem,5vw,3.6rem); }
.dialog-copy h3 { color:var(--blue-dark); }
.dialog-copy h4 { margin:28px 0 10px; font-size:1rem; }
.dialog-copy>p,.dialog-copy li { color:var(--muted); }
.dialog-copy ul { display:grid; gap:9px; margin:0; padding-left:22px; }
.dialog-copy strong { color:var(--ink); }
.fit-note { margin:28px 0 0!important; padding:18px 20px; border-left:3px solid var(--blue); border-radius:0 12px 12px 0; background:var(--tint); color:var(--ink)!important; font-weight:600; }
@media(max-width:920px){ .department-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .hero{min-height:620px;} .about-grid,.faq-grid{grid-template-columns:1fr;gap:30px;} }
@media(max-width:680px){ .shell{width:min(100% - 30px,1160px);} .section{padding:72px 0;} .site-header{min-height:68px;padding-inline:16px;} .menu-toggle{display:block;} .site-nav{position:absolute;top:68px;left:0;right:0;display:none;align-items:stretch;padding:20px;border-bottom:1px solid var(--line);background:var(--white);box-shadow:0 18px 32px rgba(15,55,98,.12);} .site-nav.open{display:grid;gap:10px;} .site-nav>a:not(.button){padding:10px 4px;} .hero{min-height:650px;align-items:end;} .hero-photo{background-image:linear-gradient(180deg,rgba(238,248,255,.1) 0%,rgba(238,248,255,.66) 43%,rgba(238,248,255,1) 71%),url("https://images.unsplash.com/photo-1757584666096-59deb41f1124?auto=format&fit=crop&fm=jpg&q=82&w=1400");background-size:cover;background-position:59% center;} .hero-content{padding:245px 0 70px;} h1{font-size:clamp(3rem,15vw,4.5rem);} .hero-actions,.section-heading,.cta-inner,.footer-inner{align-items:flex-start;flex-direction:column;} .hero-actions{gap:19px;} .section-heading{gap:8px;} .department-grid{grid-template-columns:1fr;} .department-card{display:grid;grid-template-columns:130px 1fr;} .department-card img{height:100%;min-height:170px;} .card-body{min-height:170px;} .cta-inner .button{width:100%;} .dialog-copy{padding:34px 24px 38px;} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition-duration:.01ms!important;} }

/* Keep display headings and interface labels in Inter. */
h1,h2,h3,h4,.card-body strong,.site-nav,.button,.eyebrow,.status,.card-number,.department-number,.faq-list summary,.social-links,.footer-inner strong { font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

/* Landscape frames keep group photos edge-to-edge at every screen width. */
.department-card img { width:100%; height:auto; min-height:0; aspect-ratio:3/2; object-fit:cover; object-position:50% 30%; }
.department-card[data-department="membership"] img { aspect-ratio:679/526; object-position:center; }
.department-card[data-department="relations"] img { aspect-ratio:1009/719; object-position:center; }
.department-card[data-department="incoming"] img { object-position:50% 20%; }
.department-card[data-department="finance"] img { object-position:50% 25%; }
.department-card[data-department="outgoing"] img { object-position:50% 35%; }
.department-card[data-department="engage"] img { object-position:center; }
.department-card[data-department="marketing"] img { aspect-ratio:2048/1172; object-position:center; }
.department-card[data-department="business"] img { height:auto; aspect-ratio:auto; }
@media(max-width:680px) {
  .department-card { display:block; }
  .department-card img { height:auto; min-height:0; }
}

/* Top-align photo content inside equal-height button cards, including Safari. */
.department-card { display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; }
.department-card > img { display:block; flex-shrink:0; margin:0; }
.department-card > .card-body { flex:1; width:100%; }

/* Uniform preview geometry keeps every photo and text block aligned. */
.department-card[data-department] > img {
  width:100%; height:auto; aspect-ratio:7/5; min-height:0;
  object-fit:cover; object-position:50% 25%;
}
.department-card[data-department="membership"] > img { object-position:50% 75%; }
.department-card[data-department="relations"] > img { object-position:50% 0%; }
.department-card[data-department="marketing"] > img { object-position:50% 35%; }

/* Keep the department introduction visible when a detail dialog opens. */
.dialog-department > img {
  width:auto; height:auto; max-width:100%; max-height:28dvh;
  aspect-ratio:auto; object-fit:contain; margin-inline:auto;
}
.dialog-copy { padding:24px 40px 40px; }
.dialog-copy h2 { font-size:clamp(1.65rem,3vw,2.4rem); margin-bottom:10px; }
.dialog-copy .department-number { margin-bottom:8px; }
.dialog-copy h3 { margin-bottom:12px; }
@media(max-width:680px) {
  .dialog-copy { padding:20px 24px 30px; }
}

/* Match the large Marketing reference while retaining visible introduction space. */
.dialog-department > img {
  width:100%; height:min(57vw,64dvh,538px); max-height:none;
  aspect-ratio:auto; object-fit:cover; object-position:50% 25%;
}
.dialog-department > img[src*="membership-experience"] { object-position:50% 85%; }
.dialog-department > img[src*="public-relations"] { object-position:50% 0%; }
@media(max-width:680px) {
  .dialog-department > img { height:min(57vw,48dvh); }
}

/* The wider membership photo fills the popup naturally without cropping. */
.dialog-department > img[src*="membership-experience"] {
  width:100%; height:auto; max-height:none; aspect-ratio:auto;
  object-fit:cover; object-position:center;
}
.department-card[data-department="membership"] > img { object-position:center; }