@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --navy:#071d2d; --navy2:#102d3d; --ink:#17242d; --red:#d71920; --ash:#e9edef; --line:#cbd5da; --muted:#667681; --white:#fff; --green:#43ad6a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ash); font-family:"DM Sans",sans-serif; }
a { color:inherit; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; z-index:50; padding:.7rem; background:#fff; }
.topbar { min-height:86px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:0 clamp(1.25rem,5vw,6rem); color:#fff; background:var(--navy); border-bottom:5px solid var(--red); }
.brand { display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border:2px solid #fff; border-radius:50%; font-family:"Archivo Black"; }
.brand span:last-child { display:grid; }
.brand small { opacity:.65; }
.office-state { display:flex; align-items:center; gap:.65rem; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.office-state i,.live-hours i { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 7px rgba(67,173,106,.15); }
.office-state.closed i,.live-hours.closed i { background:#98a4aa; box-shadow:0 0 0 7px rgba(152,164,170,.14); }
.portal-link { justify-self:end; font-weight:700; text-underline-offset:4px; }
main { max-width:1700px; margin:auto; background:#fff; }
.hero { position:relative; min-height:570px; display:grid; grid-template-columns:1.2fr .8fr; gap:5rem; align-items:end; overflow:hidden; padding:clamp(3rem,7vw,7rem) clamp(1.25rem,5vw,6rem); color:#fff; background:linear-gradient(115deg,#071d2d 5%,#0d3042 70%,#17495b); }
.hero-grid { position:absolute; inset:0; opacity:.25; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:80px 80px; transform:perspective(700px) rotateX(55deg) scale(1.5) translateY(22%); transform-origin:bottom; }
.hero>*:not(.hero-grid) { position:relative; z-index:1; }
.eyebrow { margin:0 0 .8rem; color:var(--red); font-size:.72rem; font-weight:800; letter-spacing:.17em; }
h1,h2 { font-family:"Archivo Black",sans-serif; }
h1 { margin:0; font-size:clamp(3.6rem,7.5vw,8rem); line-height:.82; letter-spacing:-.055em; }
h1 em { color:var(--red); font-style:normal; }
.hero-intro { max-width:38rem; font-size:1.08rem; line-height:1.7; }
.hero-intro a { display:flex; justify-content:space-between; margin-top:2rem; padding:1rem 0; border-top:1px solid rgba(255,255,255,.4); font-weight:700; text-decoration:none; }
.hero-intro a+a { margin-top:0; }
.contact-channels { display:grid; grid-template-columns:repeat(3,1fr); background:#fff; }
.channel { position:relative; min-height:330px; display:flex; flex-direction:column; padding:clamp(1.5rem,3vw,3rem); border-right:1px solid var(--line); text-decoration:none; transition:color .25s,background .25s; }
.channel:last-child { border:0; }
.channel:hover,.channel.primary { color:#fff; background:var(--red); }
.channel .number { position:absolute; right:1.5rem; top:1rem; color:#d8dfe2; font-family:"Archivo Black"; font-size:2.2rem; }
.channel.primary .number,.channel:hover .number { color:rgba(255,255,255,.35); }
.channel small { margin-bottom:2.5rem; font-weight:800; letter-spacing:.12em; }
.channel strong { font-family:"Archivo Black"; font-size:clamp(1.45rem,2.4vw,2.7rem); line-height:1.05; }
.channel p { max-width:28rem; color:var(--muted); line-height:1.55; }
.channel.primary p,.channel:hover p { color:rgba(255,255,255,.78); }
.channel b { margin-top:auto; }
.staff-section { padding:clamp(4rem,7vw,7rem) clamp(1.25rem,5vw,6rem); background:var(--ash); }
.staff-head { display:grid; grid-template-columns:1fr .65fr; gap:5rem; align-items:end; margin-bottom:2.5rem; }
.staff-head h2 { margin:.3rem 0 0; font-size:clamp(2.2rem,4.5vw,5rem); line-height:.92; }
.staff-head>p { margin:0; color:var(--muted); line-height:1.7; }
.staff-controls { position:sticky; top:0; z-index:4; display:grid; grid-template-columns:minmax(250px,.75fr) 1fr auto; gap:1.5rem; align-items:end; padding:1rem 1.2rem; background:rgba(255,255,255,.96); border:1px solid var(--line); box-shadow:0 14px 30px rgba(7,29,45,.08); }
.staff-controls label span { display:block; margin-bottom:.35rem; color:var(--muted); font-size:.65rem; font-weight:800; letter-spacing:.11em; }
.staff-controls input { width:100%; min-height:43px; padding:.65rem .8rem; border:1px solid var(--line); color:var(--ink); background:#fff; font:inherit; }
.staff-filters { display:flex; flex-wrap:wrap; gap:.4rem; }
.staff-filters button { min-height:43px; padding:.55rem .75rem; border:1px solid var(--line); color:var(--ink); background:#fff; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }
.staff-filters button.active { color:#fff; background:var(--navy); border-color:var(--navy); }
#staff-count { min-width:90px; padding-bottom:.7rem; color:var(--red); text-align:right; }
.staff-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:1.5rem; background:var(--line); border:1px solid var(--line); }
.staff-card { min-width:0; background:#fff; }
.staff-photo { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:4/4.2; overflow:hidden; color:#fff; background:linear-gradient(145deg,#173b4d,#071d2d); }
.staff-photo img { width:100%; height:100%; object-fit:cover; object-position:center top; filter:saturate(.82); transition:transform .4s,filter .4s; }
.staff-card:hover .staff-photo img { transform:scale(1.025); filter:saturate(1); }
.staff-initials { font-family:"Archivo Black"; font-size:clamp(3rem,6vw,6rem); color:rgba(255,255,255,.85); }
.staff-photo small { position:absolute; left:1rem; bottom:1rem; padding:.38rem .5rem; color:#fff; background:rgba(7,29,45,.85); font-size:.61rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.staff-info { min-height:210px; display:flex; flex-direction:column; padding:1.25rem; }
.staff-info h3 { margin:0; font-family:"Archivo Black"; font-size:1.05rem; line-height:1.15; }
.staff-info p { margin:.7rem 0; color:var(--muted); font-size:.84rem; line-height:1.45; }
.staff-info a { margin-top:auto; padding-top:.8rem; color:var(--red); border-top:1px solid var(--line); font-size:.78rem; font-weight:800; text-decoration:none; overflow-wrap:anywhere; }
.staff-info span { margin-top:auto; padding-top:.8rem; color:#8a969d; border-top:1px solid var(--line); font-size:.75rem; }
.staff-empty { padding:3rem; text-align:center; background:#fff; }
.visit-section { display:grid; grid-template-columns:1.1fr .9fr; background:var(--ash); }
.visit-panel,.schedule-panel { min-height:570px; padding:clamp(3rem,6vw,6rem); }
.visit-panel { color:#fff; background:linear-gradient(135deg,rgba(7,29,45,.96),rgba(16,45,61,.9)); }
.visit-panel h2,.write-section h2,.social-section h2 { margin:.3rem 0 2.5rem; font-size:clamp(2rem,4vw,4.5rem); line-height:.95; }
.address-block { margin:3rem 0; padding-left:1.3rem; border-left:4px solid var(--red); }
.address-block span { color:#90a4af; font-size:.7rem; font-weight:800; letter-spacing:.15em; }
.address-block strong { display:block; margin:.6rem 0; font-size:1.2rem; }
.address-block p { color:#9eafb8; line-height:1.6; }
.visit-panel>a { display:flex; justify-content:space-between; padding-top:1rem; border-top:1px solid #536b78; font-weight:700; text-decoration:none; }
.schedule-panel { background:#fff; }
.schedule-row { display:flex; justify-content:space-between; gap:2rem; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.schedule-row span { color:var(--red); font-weight:700; }
.schedule-note { margin:2rem 0; color:var(--muted); line-height:1.6; }
.live-hours { display:flex; align-items:center; gap:.8rem; padding:1rem; background:var(--ash); font-weight:700; }
.write-section,.social-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:6rem; padding:clamp(4rem,7vw,7rem) clamp(1.25rem,5vw,6rem); }
.topics,.social-links { display:grid; align-content:center; }
.topics a,.social-links a { display:flex; justify-content:space-between; align-items:center; padding:1.25rem 0; border-bottom:1px solid var(--line); text-decoration:none; font-size:1.05rem; font-weight:700; }
.topics a:hover,.social-links a:hover { color:var(--red); }
.social-section { color:#fff; background:var(--navy); }
.social-links a { border-color:#38515f; }
footer { display:flex; justify-content:space-between; gap:1rem; padding:2rem clamp(1.25rem,5vw,6rem); color:#fff; background:#04131d; }
@media (max-width:1200px) { .staff-grid { grid-template-columns:repeat(3,1fr); } .staff-controls { grid-template-columns:1fr; } #staff-count { text-align:left; } }
@media (max-width:1000px) { .topbar { grid-template-columns:1fr auto; } .office-state { display:none; } .hero,.visit-section,.write-section,.social-section,.staff-head { grid-template-columns:1fr; gap:2rem; } .contact-channels { grid-template-columns:1fr; } .channel { min-height:260px; border-right:0; border-bottom:1px solid var(--line); } .staff-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .portal-link { display:none; } .schedule-row { display:grid; gap:.4rem; } .staff-controls { position:static; } .staff-grid { grid-template-columns:1fr; } .staff-photo { aspect-ratio:4/3.5; } footer { display:grid; } }