:root {
  --blue-950: #05284c;
  --blue-900: #073766;
  --blue-800: #064a87;
  --blue-700: #005baa;
  --blue-600: #0875c9;
  --blue-500: #119ee8;
  --cyan-400: #27c4ec;
  --cyan-100: #dff7fd;
  --ink: #102a43;
  --muted: #5d7185;
  --line: #dce6ee;
  --soft: #f2f7fa;
  --white: #fff;
  --green: #16825d;
  --gold: #e0a52c;
  --red: #b42336;
  --shadow: 0 20px 60px rgba(5, 40, 76, .12);
  --shadow-small: 0 8px 30px rgba(5, 40, 76, .09);
  --radius: 22px;
  --radius-small: 13px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--cyan-400); outline-offset: 3px; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.narrow { max-width: 790px; }
.sr-only { position: absolute !important; 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: 12px; left: 12px; z-index: 999; padding: 10px 16px; background: white; color: var(--blue-900); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.muted { color: var(--muted); }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(220,230,238,.8); backdrop-filter: blur(15px); }
.nav-wrap { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; min-width: 0; }
.brand img { width: 78px; height: 56px; object-fit: contain; }
.brand span { display: flex; flex-direction: column; line-height: 1.15; }
.brand strong { font-size: 15px; color: var(--blue-900); letter-spacing: -.01em; }
.brand small { margin-top: 5px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.primary-nav { display: flex; align-items: center; gap: 22px; }
.primary-nav a { color: var(--ink); font-weight: 650; font-size: 14px; text-decoration: none; }
.primary-nav a:hover { color: var(--blue-600); }
.primary-nav .nav-cta { padding: 11px 19px; border-radius: 999px; color: white; background: var(--blue-700); }
.primary-nav .nav-cta:hover { color: white; background: var(--blue-800); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: var(--soft); border-radius: 10px; }
.nav-toggle > span:not(.sr-only) { display: block; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; color: rgba(255,255,255,.82); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .13em; }
.eyebrow span { width: 26px; height: 2px; background: var(--cyan-400); }
.eyebrow.blue { color: var(--blue-700); }
.eyebrow.light { color: rgba(255,255,255,.74); }
.eyebrow.centred { justify-content: center; }
.hero { position: relative; min-height: 680px; display: flex; align-items: center; overflow: hidden; color: white; background: radial-gradient(circle at 80% 18%, rgba(39,196,236,.25), transparent 25%), linear-gradient(125deg, var(--blue-950) 0%, var(--blue-800) 52%, var(--blue-600) 100%); }
.hero-watermark { position: absolute; width: 600px; height: 600px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; right: -160px; top: -190px; box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.02); }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-media.video-failed .hero-video { display: none; }
.hero-tint { position: absolute; inset: 0; background: radial-gradient(circle at 80% 18%, rgba(39,196,236,.3), transparent 30%), linear-gradient(125deg, rgba(5,40,76,.94) 0%, rgba(6,74,135,.88) 52%, rgba(8,117,201,.8) 100%); }
.hero-droplets { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.hero-droplets span { position: absolute; bottom: -60px; display: block; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; background: rgba(255,255,255,.16); transform: rotate(45deg); animation: dropletRise 11s linear infinite; }
.hero-droplets span:nth-child(1) { left: 8%; width: 10px; height: 10px; animation-duration: 9s; animation-delay: 0s; }
.hero-droplets span:nth-child(2) { left: 22%; width: 16px; height: 16px; animation-duration: 13s; animation-delay: 1.5s; }
.hero-droplets span:nth-child(3) { left: 41%; width: 9px; height: 9px; animation-duration: 10s; animation-delay: 3s; }
.hero-droplets span:nth-child(4) { left: 63%; width: 13px; height: 13px; animation-duration: 14s; animation-delay: .8s; }
.hero-droplets span:nth-child(5) { left: 79%; width: 18px; height: 18px; animation-duration: 12s; animation-delay: 4s; }
.hero-droplets span:nth-child(6) { left: 92%; width: 11px; height: 11px; animation-duration: 16s; animation-delay: 2.2s; }
@keyframes dropletRise { 0% { transform: translateY(0) rotate(45deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: .6; } 100% { transform: translateY(-760px) rotate(45deg); opacity: 0; } }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 80px; padding-block: 84px 112px; }
.hero h1 { max-width: 720px; margin: 0; font-size: clamp(47px, 5.4vw, 76px); line-height: .99; letter-spacing: -.055em; }
.hero-lead { max-width: 650px; margin: 27px 0 32px; color: rgba(255,255,255,.8); font-size: 18px; line-height: 1.7; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 20px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-weight: 750; font-size: 14px; line-height: 1.2; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: var(--blue-700); box-shadow: 0 9px 22px rgba(0,91,170,.22); }
.button-primary:hover { color: white; background: var(--blue-800); box-shadow: 0 12px 26px rgba(0,91,170,.3); }
.hero .button-primary { background: var(--cyan-400); color: var(--blue-950); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.hero .button-primary:hover { background: white; }
.button-ghost-light { color: white; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.button-ghost-light:hover { color: white; background: rgba(255,255,255,.12); }
.button-white { background: white; color: var(--blue-800); }
.button-outline { border-color: var(--line); color: var(--blue-800); background: white; }
.button-outline:hover { color: var(--blue-900); border-color: #b6c9d7; }
.button-quiet { color: var(--muted); background: transparent; }
.button-small { min-height: 40px; padding: 9px 16px; font-size: 13px; }
.button-full { width: 100%; }
.button-danger { background: var(--red); color: white; }
.button-danger:hover { color: white; background: #8e1628; }
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 35px; color: rgba(255,255,255,.62); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #64e4ae; box-shadow: 0 0 0 5px rgba(100,228,174,.12); }
.divider { width: 1px; height: 13px; background: rgba(255,255,255,.22); }
.hero-visual { position: relative; }
.image-frame { position: relative; border: 10px solid rgba(255,255,255,.1); border-radius: 34px; box-shadow: 0 35px 80px rgba(0,0,0,.28); transform: rotate(1.5deg); overflow: hidden; }
.image-frame > img { width: 100%; height: 445px; object-fit: cover; }
.image-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(5,40,76,.85)); }
.image-label { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 22px; display: flex; flex-direction: column; }
.image-label strong { font-size: 20px; }
.image-label span { color: rgba(255,255,255,.75); font-size: 13px; }
.floating-card { position: absolute; z-index: 3; left: -45px; bottom: 36px; display: flex; align-items: center; gap: 13px; padding: 16px 20px; color: var(--ink); background: white; border-radius: 15px; box-shadow: 0 20px 45px rgba(0,0,0,.23); transform: rotate(-2deg); }
.floating-card > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.floating-card small { color: var(--muted); }
.drop-icon { display: grid; place-items: center; width: 38px; height: 38px; color: white; background: var(--blue-600); border-radius: 12px; font-size: 18px; }
.hero-wave { position: absolute; z-index: 3; left: 0; bottom: -1px; width: 100%; height: 80px; fill: white; }
.hero-wave-back { opacity: .5; fill: rgba(255,255,255,.7); animation: waveDrift 13s ease-in-out infinite; }
.hero-wave-front { animation: waveDrift 9s ease-in-out infinite reverse; }
@keyframes waveDrift { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-18px) translateY(4px); } }

.section { padding-block: 92px; }
.soft-section { background: var(--soft); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 42px; }
.section-heading > p { max-width: 470px; margin: 0 0 7px; color: var(--muted); }
.section-heading.compact { align-items: center; }
h1, h2, h3 { color: inherit; line-height: 1.15; letter-spacing: -.035em; }
.section-heading h2, .about-grid h2, .contact-panel h2 { margin: 0; color: var(--blue-950); font-size: clamp(31px, 4vw, 46px); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { min-height: 270px; display: flex; flex-direction: column; padding: 28px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; box-shadow: 0 4px 15px rgba(5,40,76,.03); transition: transform .28s cubic-bezier(.26,1.4,.4,1), border .22s ease, box-shadow .28s ease; }
.feature-card:hover { transform: translateY(-6px) scale(1.015); border-color: #9dcfe9; box-shadow: var(--shadow-small); }
.feature-card:active { transform: translateY(-2px) scale(.99); }
.feature-top { display: flex; justify-content: space-between; align-items: center; }
.feature-number { color: var(--blue-600); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.feature-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--blue-600); background: var(--cyan-100); font-style: normal; }
.feature-card h3 { margin: 48px 0 12px; font-size: 21px; }
.feature-card p { margin: 0 0 25px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.feature-grid-6 { grid-template-columns: repeat(3, 1fr); }
.feature-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: white; background: linear-gradient(135deg, var(--blue-600), var(--cyan-400)); box-shadow: 0 8px 18px rgba(8,117,201,.28); transition: transform .25s ease; }
.feature-icon svg { width: 24px; height: 24px; }
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-4deg); }
.feature-card::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); opacity: 0; background: radial-gradient(160px 120px at 85% -10%, rgba(39,196,236,.14), transparent 70%); transition: opacity .3s ease; pointer-events: none; }
.feature-card { position: relative; overflow: hidden; }
.feature-card:hover::after { opacity: 1; }
.feature-card--gold .feature-icon { background: linear-gradient(135deg, #d99a1f, #f4c752); box-shadow: 0 8px 18px rgba(217,154,31,.32); }
.feature-card--gold:hover { border-color: #f4c752; }
.feature-card--gold::after { background: radial-gradient(160px 120px at 85% -10%, rgba(244,199,82,.22), transparent 70%); }
.feature-card--coral .feature-icon { background: linear-gradient(135deg, #d9502c, #f47a54); box-shadow: 0 8px 18px rgba(217,80,44,.3); }
.feature-card--coral:hover { border-color: #f4a58c; }
.feature-card--coral::after { background: radial-gradient(160px 120px at 85% -10%, rgba(244,122,84,.2), transparent 70%); }
.feature-card--indigo .feature-icon { background: linear-gradient(135deg, #4839c4, #7c6ff0); box-shadow: 0 8px 18px rgba(72,57,196,.3); }
.feature-card--indigo:hover { border-color: #b3aaf5; }
.feature-card--indigo::after { background: radial-gradient(160px 120px at 85% -10%, rgba(124,111,240,.2), transparent 70%); }
.feature-card--teal .feature-icon { background: linear-gradient(135deg, #0d8a72, #29c9a8); box-shadow: 0 8px 18px rgba(13,138,114,.3); }
.feature-card--teal:hover { border-color: #7fe0ca; }
.feature-card--teal::after { background: radial-gradient(160px 120px at 85% -10%, rgba(41,201,168,.2), transparent 70%); }
.feature-card--pink .feature-icon { background: linear-gradient(135deg, #c22a72, #ef5fa7); box-shadow: 0 8px 18px rgba(194,42,114,.3); }
.feature-card--pink:hover { border-color: #f4a6cd; }
.feature-card--pink::after { background: radial-gradient(160px 120px at 85% -10%, rgba(239,95,167,.2), transparent 70%); }
.feature-card--blue .feature-icon { background: linear-gradient(135deg, var(--blue-600), var(--cyan-400)); box-shadow: 0 8px 18px rgba(8,117,201,.28); }
.feature-card--blue:hover { border-color: #9dcfe9; }
.reveal-item.pending-reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--reveal-delay, 0) * 70ms); }
.reveal-item.is-visible { opacity: 1; transform: none; }
.text-link { margin-top: auto; color: var(--blue-700); font-size: 13px; font-weight: 800; text-decoration: none; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.resource-card { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-small); }
.resource-cover { height: 215px; background: #dcebf4; overflow: hidden; }
.resource-cover img { width: 100%; height: 100%; object-fit: cover; }
.resource-cover-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; color: white; background: linear-gradient(145deg, var(--blue-800), var(--blue-500)); }
.resource-cover-placeholder span { font-size: 64px; font-weight: 850; line-height: 1; }
.resource-cover-placeholder small { letter-spacing: .2em; font-weight: 800; }
.resource-body { padding: 25px; }
.resource-body h2, .resource-body h3 { margin: 16px 0 10px; font-size: 21px; }
.resource-body p { min-height: 48px; margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.resource-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--blue-800); background: var(--cyan-100); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.impact-banner { color: white; background: radial-gradient(circle at 85% 50%, rgba(39,196,236,.25), transparent 25%), var(--blue-900); }
.impact-grid { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.impact-grid h2 { margin: 0 0 14px; font-size: clamp(34px, 4vw, 50px); }
.impact-grid p:last-child { max-width: 670px; margin: 0; color: rgba(255,255,255,.75); }

.page-hero { padding-block: 73px 78px; color: white; background: radial-gradient(circle at 85% 20%, rgba(39,196,236,.2), transparent 27%), linear-gradient(120deg, var(--blue-950), var(--blue-700)); }
.page-hero h1 { margin: 15px 0 18px; max-width: 820px; font-size: clamp(43px, 6vw, 68px); }
.page-hero p:not(.eyebrow) { max-width: 720px; margin: 0; color: rgba(255,255,255,.76); font-size: 18px; }
.page-hero .eyebrow { margin-top: 28px; }
.compact-hero { padding-block: 55px 60px; }
.back-link { color: rgba(255,255,255,.72); font-size: 13px; font-weight: 700; text-decoration: none; }
.back-link:hover { color: white; }
.back-link.dark { display: inline-block; margin-bottom: 12px; color: var(--blue-700); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 35px; }
.filter-pill { padding: 9px 15px; color: var(--muted); background: var(--soft); border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; }
.filter-pill:hover, .filter-pill.active { color: white; background: var(--blue-700); }
.empty-state { max-width: 760px; margin: 20px auto; padding: 65px 35px; text-align: center; background: var(--soft); border: 1px dashed #afc8d8; border-radius: var(--radius); }
.empty-state.small { max-width: none; padding-block: 45px; }
.empty-state h2, .empty-state h3 { margin: 12px 0 7px; }
.empty-state p { max-width: 560px; margin: 0 auto 22px; color: var(--muted); }
.empty-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: auto; color: var(--blue-700); background: var(--cyan-100); border-radius: 17px; font-size: 26px; }

.form-section { background: var(--soft); }
.form-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 45px; align-items: start; }
.form-card { padding: clamp(25px, 5vw, 45px); background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-small); }
.form-field { margin-bottom: 22px; }
.form-field > label { display: block; margin-bottom: 7px; color: var(--blue-950); font-size: 14px; font-weight: 750; }
.required { color: var(--red); margin-left: 3px; }
.form-control { width: 100%; min-height: 48px; padding: 11px 13px; color: var(--ink); background: #fbfdfe; border: 1px solid #c8d6e0; border-radius: 10px; outline: none; transition: border .15s, box-shadow .15s, background .15s; }
textarea.form-control { resize: vertical; }
.form-control:focus { background: white; border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(17,158,232,.13); }
input[type="file"].form-control { padding: 8px; }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 12px; color: var(--blue-800); background: var(--cyan-100); border: 0; border-radius: 7px; font-weight: 700; cursor: pointer; }
.checkbox-field { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 10px; padding: 16px; background: var(--soft); border-radius: 10px; }
.checkbox-input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--blue-700); }
.checkbox-field label { margin: 0; font-weight: 550; }
.checkbox-field .field-error { grid-column: 2; }
.radio-group { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; list-style: none; margin: 0; padding: 0; }
.radio-group > div label { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 11px 7px; text-align: center; color: var(--muted); background: var(--soft); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: 11px; font-weight: 700; }
.radio-group input { margin: 0 0 6px; accent-color: var(--blue-700); }
.field-label-top { display: block; margin-bottom: 12px; color: var(--blue-950); font-size: 14px; font-weight: 750; }
.emoji-rating { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 22px 12px; background: linear-gradient(180deg, var(--cyan-100), var(--soft)); border: 1px solid var(--line); border-radius: 18px; }
.emoji-choice { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 74px; height: 84px; background: white; border: 2px solid var(--line); border-radius: 16px; cursor: pointer; transition: transform .18s cubic-bezier(.26,1.4,.4,1), border-color .18s, box-shadow .18s, background .18s; }
.emoji-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.emoji-glyph { font-size: 30px; line-height: 1; transition: transform .18s cubic-bezier(.26,1.6,.4,1); }
.emoji-choice .choice-caption { font-size: 10px; font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.emoji-choice:hover { transform: translateY(-4px); border-color: var(--cyan-400); box-shadow: var(--shadow-small); }
.emoji-choice:hover .emoji-glyph { transform: scale(1.15); }
.emoji-choice:has(input:focus-visible) { outline: 3px solid var(--cyan-400); outline-offset: 2px; }
.emoji-choice.is-selected { background: linear-gradient(180deg, var(--blue-600), var(--blue-700)); border-color: var(--blue-800); box-shadow: 0 10px 24px rgba(8,117,201,.35); transform: translateY(-4px) scale(1.05); animation: emojiPop .35s cubic-bezier(.26,1.6,.4,1); }
.emoji-choice.is-selected .choice-caption { color: white; }
@keyframes emojiPop { 0% { transform: scale(.85); } 60% { transform: translateY(-4px) scale(1.12); } 100% { transform: translateY(-4px) scale(1.05); } }
.help-text { display: block; margin-top: 6px; color: var(--muted); }
.field-error { margin: 6px 0 0; color: var(--red); font-size: 12px; font-weight: 650; }
.has-error .form-control { border-color: var(--red); }
.form-alert { margin-bottom: 20px; padding: 13px 16px; color: #761729; background: #fff1f3; border: 1px solid #fac8d0; border-radius: 10px; }
.form-alert ul { margin: 0; padding-left: 20px; }
.form-aside { position: sticky; top: 115px; padding: 34px; color: white; background: var(--blue-900); border-radius: var(--radius); }
.form-aside h2 { margin: 18px 0 12px; }
.form-aside p { color: rgba(255,255,255,.73); }
.form-aside a { color: white; }
.aside-icon { display: grid; place-items: center; width: 45px; height: 45px; color: var(--blue-900); background: var(--cyan-400); border-radius: 50%; font-weight: 900; }
.privacy-note { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); font-size: 12px; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-card { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-small); box-shadow: var(--shadow-small); }
.gallery-card img { width: 100%; height: 280px; object-fit: cover; }
.gallery-card figcaption { display: flex; flex-direction: column; padding: 18px; }
.gallery-card figcaption span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; }
.large-copy { margin-top: 25px; color: var(--muted); font-size: 18px; line-height: 1.8; }
.mandate-card { padding: 42px; color: white; background: linear-gradient(145deg, var(--blue-900), var(--blue-600)); border-radius: var(--radius); box-shadow: var(--shadow); }
.mandate-card > span { color: var(--cyan-400); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.mandate-card blockquote { margin: 25px 0 0; font-size: 23px; font-weight: 650; line-height: 1.55; }
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.value-grid article { padding: 27px; background: white; border: 1px solid var(--line); border-radius: var(--radius-small); }
.value-grid article > span { color: var(--blue-500); font-size: 12px; font-weight: 850; }
.value-grid h3 { margin: 34px 0 10px; font-size: 19px; }
.value-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.contact-panel { display: flex; align-items: center; justify-content: space-between; gap: 50px; padding: 42px 48px; background: var(--soft); border-radius: var(--radius); }
.contact-panel h2 { font-size: clamp(28px, 4vw, 41px); }
.contact-panel p:last-child { margin-bottom: 0; color: var(--muted); }
.social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }
.social-card { display: grid; grid-template-columns: 56px 1fr 36px; align-items: center; gap: 18px; padding: 24px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-small); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.social-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-small); }
.social-monogram { display: grid; place-items: center; width: 56px; height: 56px; color: white; background: var(--blue-700); border-radius: 16px; font-size: 23px; font-weight: 850; }
.social-card > span:nth-child(2) { display: flex; flex-direction: column; }
.social-card small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.social-card strong { margin-top: 3px; }
.social-card em { color: var(--blue-600); font-size: 13px; font-style: normal; }
.prose { max-width: 820px; }
.prose h2 { margin: 36px 0 10px; color: var(--blue-900); font-size: 24px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: #465d70; }
.notice { margin-top: 38px; padding: 22px; background: #fff8df; border-left: 4px solid #efb820; border-radius: 7px; }
.notice p { margin-bottom: 0; }
.success-section { position: relative; overflow: hidden; min-height: 650px; display: grid; place-items: center; padding: 70px 20px; background: radial-gradient(circle at 50% 0%, var(--cyan-100), transparent 38%), var(--soft); }
.success-card { position: relative; z-index: 2; width: min(100%, 620px); padding: 55px 45px; text-align: center; background: white; border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); animation: cardPop .5s cubic-bezier(.26,1.4,.4,1) both; }
.success-card h1 { margin: 14px 0; color: var(--blue-950); font-size: 51px; }
.success-mark { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 25px; color: white; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 10px rgba(22,130,93,.1); font-size: 31px; font-weight: 900; animation: markPop .6s cubic-bezier(.26,1.6,.4,1) .1s both; }
.success-mark span { display: inline-block; animation: markDraw .35s ease .5s both; }
.success-mark.warning { background: var(--blue-700); box-shadow: 0 0 0 10px rgba(0,91,170,.1); }
.reference-box { width: fit-content; display: flex; flex-direction: column; margin: 28px auto 15px; padding: 12px 30px; color: var(--blue-900); background: var(--cyan-100); border-radius: 10px; }
.reference-box small { text-transform: uppercase; letter-spacing: .09em; }
.reference-box strong { font-family: ui-monospace, Consolas, monospace; font-size: 23px; letter-spacing: .08em; }
@keyframes cardPop { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes markPop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes markDraw { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.confetti-burst { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.confetti-burst span { position: absolute; top: 46%; left: 50%; width: 10px; height: 14px; background: var(--cyan-400); border-radius: 2px; opacity: 0; animation: confettiPop .9s ease-out forwards; }
.confetti-burst span:nth-child(1) { --x: -220px; --y: -160px; --r: -40deg; background: var(--cyan-400); animation-delay: .05s; }
.confetti-burst span:nth-child(2) { --x: -170px; --y: -210px; --r: 30deg; background: var(--gold, #e0a52c); animation-delay: .09s; }
.confetti-burst span:nth-child(3) { --x: -110px; --y: -250px; --r: 80deg; background: var(--blue-600); animation-delay: .02s; }
.confetti-burst span:nth-child(4) { --x: -40px; --y: -270px; --r: -20deg; background: var(--green); animation-delay: .12s; }
.confetti-burst span:nth-child(5) { --x: 30px; --y: -270px; --r: 60deg; background: var(--cyan-400); animation-delay: .06s; }
.confetti-burst span:nth-child(6) { --x: 100px; --y: -250px; --r: -60deg; background: var(--gold, #e0a52c); animation-delay: .15s; }
.confetti-burst span:nth-child(7) { --x: 160px; --y: -210px; --r: 25deg; background: var(--blue-600); animation-delay: .03s; }
.confetti-burst span:nth-child(8) { --x: 210px; --y: -160px; --r: -70deg; background: var(--green); animation-delay: .1s; }
.confetti-burst span:nth-child(9) { --x: 240px; --y: -90px; --r: 45deg; background: var(--cyan-400); animation-delay: .18s; }
.confetti-burst span:nth-child(10) { --x: -240px; --y: -90px; --r: -45deg; background: var(--gold, #e0a52c); animation-delay: .07s; }
.confetti-burst span:nth-child(11) { --x: -190px; --y: -20px; --r: 15deg; background: var(--blue-600); animation-delay: .2s; }
.confetti-burst span:nth-child(12) { --x: 190px; --y: -20px; --r: -15deg; background: var(--green); animation-delay: .13s; }
.confetti-burst span:nth-child(13) { --x: -260px; --y: -130px; --r: 55deg; background: var(--cyan-400); animation-delay: .16s; }
.confetti-burst span:nth-child(14) { --x: 260px; --y: -130px; --r: -55deg; background: var(--gold, #e0a52c); animation-delay: .04s; }
.confetti-burst span:nth-child(15) { --x: -60px; --y: -300px; --r: 90deg; background: var(--blue-600); animation-delay: .21s; }
.confetti-burst span:nth-child(16) { --x: 60px; --y: -300px; --r: -90deg; background: var(--green); animation-delay: .08s; }
.confetti-burst span:nth-child(17) { --x: -140px; --y: -230px; --r: -30deg; background: var(--cyan-400); animation-delay: .19s; }
.confetti-burst span:nth-child(18) { --x: 140px; --y: -230px; --r: 30deg; background: var(--gold, #e0a52c); animation-delay: .11s; }
@keyframes confettiPop {
  0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) rotate(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--x), calc(var(--y) + 90px)) rotate(var(--r)); }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-burst { display: none; }
}
.centred { justify-content: center; }

/* National branch network */
.network-section { position: relative; overflow: hidden; color: white; background: radial-gradient(circle at 92% 8%, rgba(39,196,236,.24), transparent 28%), linear-gradient(130deg,var(--blue-950),var(--blue-700)); }
.network-section::after { content: ""; position: absolute; width: 420px; height: 420px; right: -190px; bottom: -280px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 65px rgba(255,255,255,.025),0 0 0 130px rgba(255,255,255,.018); }
.network-showcase { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); gap: 70px; align-items: center; }
.network-copy h2 { margin: 0 0 20px; font-size: clamp(40px,5vw,64px); }
.network-copy > p:not(.eyebrow) { max-width: 650px; color: rgba(255,255,255,.76); font-size: 17px; }
.network-capacity { min-height: 330px; display: flex; flex-direction: column; justify-content: center; padding: 42px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.17); border-radius: 32px 32px 8px 32px; backdrop-filter: blur(10px); }
.network-capacity > strong { font-size: clamp(72px,9vw,112px); line-height: .82; letter-spacing: -.07em; }
.network-capacity > span { margin-top: 18px; color: var(--cyan-400); font-weight: 750; }
.network-principles { display: grid; gap: 9px; margin-top: 34px; }
.network-principles span { padding-top: 9px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.75); font-size: 13px; }
.featured-branch-row { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 45px; }
.featured-branch-row a { min-width: 0; display: flex; flex-direction: column; padding: 18px; color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; text-decoration: none; }
.featured-branch-row small { color: var(--cyan-400); font-weight: 800; letter-spacing: .08em; }
.featured-branch-row strong { margin: 5px 0 2px; }
.featured-branch-row span { overflow: hidden; color: rgba(255,255,255,.62); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.branch-hero { padding-bottom: 62px; }
.branch-finder { display: grid; grid-template-columns: minmax(240px,1fr) 230px auto; align-items: end; gap: 10px; margin-top: 32px; padding: 13px; color: var(--ink); background: rgba(255,255,255,.98); border-radius: 16px; box-shadow: 0 18px 50px rgba(3,26,49,.22); }
.branch-finder label, .resource-search-panel label { display: block; margin: 0 0 5px; color: var(--blue-900); font-size: 12px; font-weight: 800; }
.branch-directory-section { padding-top: 65px; }
.directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.directory-heading h2 { margin: 0; color: var(--blue-950); font-size: clamp(28px,4vw,42px); }
.branch-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.branch-card { min-width: 0; display: flex; flex-direction: column; min-height: 340px; padding: 27px; background: white; border: 1px solid var(--line); border-top: 4px solid var(--blue-600); border-radius: 18px; box-shadow: var(--shadow-small); }
.branch-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.branch-code { color: var(--blue-600); font-size: 12px; font-weight: 850; letter-spacing: .09em; }
.branch-card h2 { margin: 28px 0 8px; font-size: 23px; }
.branch-card h2 a { color: var(--blue-950); text-decoration: none; }
.branch-card > p { margin: 0 0 13px; color: var(--muted); }
.branch-location { color: var(--blue-700) !important; font-size: 13px; font-weight: 750; }
.service-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 20px; }
.service-chips span { padding: 5px 8px; color: var(--blue-800); background: var(--cyan-100); border-radius: 999px; font-size: 11px; font-weight: 700; }
.branch-card-actions { display: flex; align-items: center; gap: 15px; margin-top: auto; }
.branch-call { font-size: 13px; font-weight: 800; text-decoration: none; }
.branch-profile-hero { padding: 72px 0 78px; color: white; background: radial-gradient(circle at 86% 10%,rgba(39,196,236,.22),transparent 27%),linear-gradient(125deg,var(--blue-950),var(--blue-700)); }
.branch-profile-head { display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: end; gap: 70px; }
.branch-profile-head h1 { margin: 15px 0; font-size: clamp(44px,6vw,72px); }
.branch-profile-head > div:first-child > p:last-child { max-width: 700px; color: rgba(255,255,255,.75); font-size: 17px; }
.branch-contact-card { display: flex; flex-direction: column; padding: 28px; background: white; border-radius: 20px 20px 4px 20px; box-shadow: 0 22px 55px rgba(0,0,0,.2); }
.branch-contact-card > span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.branch-contact-card a { overflow-wrap: anywhere; margin-top: 8px; text-decoration: none; }
.branch-contact-card .branch-phone { color: var(--blue-900); font-size: 24px; font-weight: 850; }
.branch-contact-card small { margin-top: 15px; color: var(--muted); }
.branch-contact-card p { margin: 12px 0 2px; color: var(--muted); font-size: 13px; }
.branch-profile-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: 55px; align-items: start; }
.branch-profile-grid h2 { margin-top: 0; font-size: clamp(31px,4vw,44px); color: var(--blue-950); }
.branch-facts { margin: 28px 0; }
.branch-facts > div { display: grid; grid-template-columns: 135px 1fr; gap: 25px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.branch-facts dt { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.branch-facts dd { margin: 0; }
.branch-services-panel { padding: 35px; color: white; background: linear-gradient(150deg,var(--blue-900),var(--blue-600)); border-radius: 24px 24px 5px 24px; box-shadow: var(--shadow); }
.branch-services-panel h2 { color: white; }
.branch-services-panel ul { margin: 25px 0 30px; padding: 0; list-style: none; }
.branch-services-panel li { padding: 11px 0 11px 27px; border-bottom: 1px solid rgba(255,255,255,.14); position: relative; }
.branch-services-panel li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan-400); font-weight: 900; }
.branch-services-panel > p:not(.eyebrow) { color: rgba(255,255,255,.72); }
.branch-services-panel a { color: white; font-weight: 800; }
.branch-event-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.branch-event-list > a { display: grid; grid-template-columns: 54px 1fr 20px; align-items: center; gap: 15px; padding: 18px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; }
.branch-event-list time { display: flex; flex-direction: column; align-items: center; color: white; background: var(--blue-700); border-radius: 10px; padding: 7px; }
.branch-event-list time strong { font-size: 20px; line-height: 1; }
.branch-event-list time span { font-size: 9px; font-weight: 800; text-transform: uppercase; }
.branch-event-list > a > span { min-width: 0; display: flex; flex-direction: column; }
.branch-event-list small { color: var(--blue-600); font-size: 10px; font-weight: 800; }
.branch-event-list em { color: var(--muted); font-size: 11px; font-style: normal; }
.resource-search-panel { display: grid; grid-template-columns: minmax(240px,1fr) 260px auto; align-items: end; gap: 10px; margin-bottom: 18px; padding: 15px; background: var(--soft); border: 1px solid var(--line); border-radius: 14px; }
.resource-result-heading { margin-top: 35px; }
.resource-branch-link { display: inline-block; margin: -4px 0 10px; font-size: 12px; font-weight: 800; text-decoration: none; }
.resource-branch-link.national { color: var(--muted); }

.branch-staff-filter { grid-template-columns: minmax(220px,1fr) 180px 180px auto auto; }
.status-danger { color: #9b1d31; background: #ffe5ea; }
.import-guidance ul { padding-left: 20px; color: var(--muted); }
.import-guidance li { margin-bottom: 8px; }
.branch-import-layout .panel > h2:not(:first-child) { margin-top: 40px; }
.mobile-action-dock { display: none; }
.offline-section { min-height: 70vh; display: grid; place-items: center; padding: 60px 20px; background: radial-gradient(circle at 50% 10%,var(--cyan-100),transparent 40%),var(--soft); }
.offline-card { width: min(100%,560px); padding: 48px 30px; text-align: center; background: white; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); }
.offline-card h1 { margin: 12px 0; color: var(--blue-950); font-size: 45px; }
.offline-card > p:not(.eyebrow) { color: var(--muted); }
.offline-card .button { margin: 12px 4px 0; }
.offline-mark { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 25px; color: white; background: var(--blue-700); border-radius: 50%; font-size: 33px; }

.site-footer { padding: 64px 0 25px; color: rgba(255,255,255,.68); background: var(--blue-950); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: 60px; }
.footer-grid h2 { margin: 0 0 12px; color: white; font-size: 14px; text-transform: uppercase; letter-spacing: .09em; }
.footer-grid p { margin: 0; font-size: 13px; }
.footer-grid a { color: rgba(255,255,255,.78); }
.footer-brand { margin-bottom: 10px; color: white; font-size: 18px; font-weight: 800; }
.footer-base { display: flex; justify-content: space-between; gap: 20px; margin-top: 50px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 11px; }
.messages { position: fixed; top: 95px; left: 50%; z-index: 90; transform: translateX(-50%); }
.message { padding: 13px 17px; background: white; border: 1px solid var(--line); border-left: 4px solid var(--blue-600); border-radius: 9px; box-shadow: var(--shadow-small); }
.message.success { border-left-color: var(--green); }

/* Staff centre */
.staff-body { background: #eef3f7; }
.staff-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.staff-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 25px 18px 18px; color: white; background: var(--blue-950); overflow-y: auto; }
.staff-brand { display: flex; align-items: center; gap: 12px; padding: 0 9px 24px; color: white; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1); }
.staff-brand img { width: 62px; height: 45px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.staff-brand > span { display: flex; flex-direction: column; line-height: 1.25; }
.staff-brand strong { font-size: 14px; }
.staff-brand small { color: rgba(255,255,255,.55); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.staff-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 18px; }
.staff-nav-label { margin: 17px 11px 6px; color: rgba(255,255,255,.36); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.staff-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: rgba(255,255,255,.73); border-radius: 9px; font-size: 13px; font-weight: 650; text-decoration: none; }
.staff-nav a:hover { color: white; background: rgba(255,255,255,.09); }
.staff-profile { display: grid; grid-template-columns: 36px 1fr 28px; align-items: center; gap: 9px; margin-top: auto; padding: 16px 5px 0; border-top: 1px solid rgba(255,255,255,.1); }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; color: var(--blue-950); background: var(--cyan-400); border-radius: 50%; font-weight: 850; }
.staff-profile > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.staff-profile strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.staff-profile small { color: rgba(255,255,255,.45); font-size: 9px; }
.staff-profile button { color: rgba(255,255,255,.7); background: none; border: 0; cursor: pointer; font-size: 18px; }
.staff-content { min-width: 0; }
.staff-topbar { min-height: 73px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 34px; background: white; border-bottom: 1px solid var(--line); }
.staff-topbar > div { display: flex; flex-direction: column; line-height: 1.4; }
.staff-topbar strong { color: var(--blue-950); font-size: 15px; }
.staff-topbar small { color: var(--muted); font-size: 11px; }
.staff-menu { display: none; padding: 8px 11px; color: var(--blue-900); background: var(--soft); border: 0; border-radius: 8px; }
.staff-main { padding: 38px; }
.staff-messages { padding: 15px 38px 0; }
.staff-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 27px; }
.staff-page-head h1 { margin: 5px 0 8px; color: var(--blue-950); font-size: clamp(29px, 4vw, 40px); }
.staff-page-head p { margin: 0; color: var(--muted); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 22px; }
.stat-card { display: flex; flex-direction: column; padding: 23px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: var(--radius-small); text-decoration: none; }
.stat-card:hover { border-color: #9dcfe9; box-shadow: var(--shadow-small); }
.stat-card > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.stat-card strong { margin: 8px 0; color: var(--blue-900); font-size: 35px; line-height: 1; }
.stat-card small { color: var(--blue-600); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.staff-grid-two { display: grid; grid-template-columns: 1.25fr .75fr; gap: 20px; align-items: start; }
.panel { padding: 25px; background: white; border: 1px solid var(--line); border-radius: var(--radius-small); box-shadow: 0 3px 15px rgba(5,40,76,.03); }
.panel-head { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 19px; }
.panel-head h2 { margin: 0 0 4px; color: var(--blue-950); font-size: 19px; }
.panel-head p { margin: 0; color: var(--muted); font-size: 12px; }
.activity-list > a { display: grid; grid-template-columns: 39px 1fr 15px; align-items: center; gap: 11px; padding: 12px 0; color: var(--ink); border-top: 1px solid #edf2f5; text-decoration: none; }
.activity-list > a:first-child { border-top: 0; }
.activity-icon { display: grid; place-items: center; width: 36px; height: 36px; color: var(--blue-800); background: var(--cyan-100); border-radius: 9px; font-weight: 850; }
.activity-list a > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.activity-list strong { font-size: 13px; }
.activity-list small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.quick-panel > a { display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 11px; margin-top: 9px; padding: 12px; color: var(--ink); background: var(--soft); border-radius: 9px; text-decoration: none; }
.quick-panel > a > span { display: grid; place-items: center; width: 36px; height: 36px; color: white; background: var(--blue-600); border-radius: 9px; }
.quick-panel > a div { display: flex; flex-direction: column; }
.quick-panel strong { font-size: 12px; }
.quick-panel small { color: var(--muted); font-size: 10px; }
.panel-empty { padding: 45px 20px; text-align: center; color: var(--muted); }
.panel-empty strong { color: var(--blue-950); font-size: 17px; }
.panel-empty p { margin: 5px auto 20px; }
.table-panel { padding: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 13px 17px; text-align: left; color: #667b8c; background: #f7fafc; border-bottom: 1px solid var(--line); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
td { padding: 15px 17px; border-bottom: 1px solid #edf2f5; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td strong, td small { display: block; }
td small { max-width: 350px; margin-top: 3px; color: var(--muted); }
.summary-cell { max-width: 340px; color: var(--muted); }
.status { display: inline-flex; margin: 2px; padding: 4px 8px; color: #667687; background: #edf2f5; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.status-good { color: #08684a; background: #dff7ed; }
.status-blue { color: var(--blue-800); background: var(--cyan-100); }
.table-actions { white-space: nowrap; }
.table-actions a { margin-right: 10px; font-weight: 750; text-decoration: none; }
.danger-link { color: var(--red); }
.staff-form-panel { max-width: 850px; padding: 35px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; padding-top: 20px; border-top: 1px solid var(--line); }
.filter-bar { display: grid; grid-template-columns: minmax(220px, 1fr) 220px auto auto; gap: 9px; margin-bottom: 15px; padding: 13px; background: white; border: 1px solid var(--line); border-radius: 11px; }
.filter-bar .form-control { min-height: 40px; padding-block: 8px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 22px; font-size: 12px; }
.pagination a { font-weight: 750; text-decoration: none; }
.detail-layout { grid-template-columns: 1.15fr .85fr; }
.detail-list { margin: 0; }
.detail-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 13px 0; border-top: 1px solid #edf2f5; }
.detail-list > div:first-child { border-top: 0; }
.detail-list dt { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.detail-list dd { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.review-photo { max-height: 420px; border-radius: 9px; }
.danger-panel { max-width: 630px; margin: 40px auto; padding: 45px; text-align: center; }
.danger-panel h1 { color: var(--blue-950); }
.danger-panel .form-actions { justify-content: center; }
.danger-mark { display: grid; place-items: center; width: 55px; height: 55px; margin: auto; color: white; background: var(--red); border-radius: 50%; font-size: 24px; font-weight: 900; }
.qr-layout { grid-template-columns: .7fr 1.3fr; }
.qr-card { text-align: center; }
.qr-card img { width: min(100%, 370px); margin: auto; }
.qr-card p { margin: 12px 0 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.qr-card strong { color: var(--blue-900); }
.url-box { margin: 20px 0; padding: 17px; background: var(--soft); border: 1px solid var(--line); border-radius: 9px; word-break: break-all; }
.instruction-list { padding-left: 23px; color: var(--muted); }
.instruction-list li { margin-bottom: 10px; padding-left: 5px; }

.login-body { min-height: 100vh; display: grid; place-items: center; padding: 35px 20px; background: radial-gradient(circle at 20% 5%, rgba(39,196,236,.18), transparent 28%), linear-gradient(145deg, #eaf5fa, #f7fafc); }
.login-shell { width: min(100%, 470px); }
.login-brand { width: fit-content; margin: 0 auto 22px; }
.login-card { padding: 40px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.login-card h1 { margin: 5px 0 9px; color: var(--blue-950); font-size: 38px; }
.login-card > p:not(.eyebrow) { margin: 0 0 28px; color: var(--muted); }
.login-back { margin-top: 25px; }
.login-help { text-align: center; color: var(--muted); font-size: 11px; }

@media (max-width: 1020px) {
  .hero-grid { gap: 45px; }
  .feature-grid, .value-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .staff-grid-two { grid-template-columns: 1fr; }
  .qr-layout { grid-template-columns: .8fr 1.2fr; }
  .network-showcase { gap: 35px; }
  .branch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .featured-branch-row { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 800px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .container { width: min(calc(100% - 30px), var(--container)); }
  .nav-wrap { min-height: 70px; }
  .brand img { width: 62px; height: 46px; }
  .brand small { display: none; }
  .nav-toggle { display: block; }
  .primary-nav { position: absolute; left: 15px; right: 15px; top: 75px; display: none; flex-direction: column; align-items: stretch; gap: 3px; padding: 12px; background: white; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
  .primary-nav.open { display: flex; }
  .primary-nav a { padding: 11px 13px; }
  .primary-nav .nav-cta { text-align: center; }
  .mobile-action-dock { position: fixed; z-index: 80; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4,1fr); padding: 6px; background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 12px 40px rgba(5,40,76,.24); backdrop-filter: blur(14px); }
  .mobile-action-dock a { min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--blue-900); border-radius: 12px; text-decoration: none; }
  .mobile-action-dock a:active { background: var(--cyan-100); }
  .mobile-action-dock a[aria-current="page"] { color: white; background: var(--blue-700); }
  .mobile-action-dock span { font-size: 19px; line-height: 1; }
  .mobile-action-dock small { font-size: 11px; font-weight: 800; }
  .site-footer { padding-bottom: 45px; }
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; padding-block: 70px 115px; }
  .hero-visual { max-width: 580px; }
  .hero h1 { font-size: clamp(46px, 12vw, 67px); }
  .image-frame > img { height: 390px; }
  .section { padding-block: 70px; }
  .section-heading { align-items: start; flex-direction: column; gap: 16px; }
  .impact-grid, .contact-panel { align-items: flex-start; flex-direction: column; }
  .form-layout, .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .form-aside { position: static; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .staff-shell { display: block; }
  .staff-sidebar { position: fixed; z-index: 100; left: 0; top: 0; width: 270px; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 20px 0 40px rgba(0,0,0,.2); }
  .staff-sidebar.open { transform: translateX(0); }
  .staff-menu { display: block; }
  .staff-topbar { padding-inline: 20px; justify-content: flex-start; }
  .staff-topbar .button { margin-left: auto; }
  .staff-main { padding: 25px 18px; }
  .staff-messages { padding-inline: 18px; }
  .qr-layout { grid-template-columns: 1fr; }
  .network-showcase, .branch-profile-head, .branch-profile-grid { grid-template-columns: 1fr; }
  .network-capacity { min-height: 280px; }
  .branch-profile-head { gap: 30px; }
  .branch-finder, .resource-search-panel { grid-template-columns: 1fr; }
  .branch-event-list { grid-template-columns: 1fr; }
  .branch-staff-filter { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .container { width: min(calc(100% - 24px), var(--container)); }
  .brand strong { font-size: 13px; }
  .hero-grid { padding-top: 54px; gap: 50px; }
  .hero h1 { font-size: 46px; }
  .hero-lead { font-size: 16px; }
  .hero-trust { gap: 7px; }
  .hero-trust .divider { display: none; }
  .hero-trust span:not(.pulse-dot) { margin-right: 7px; }
  .image-frame { border-width: 7px; border-radius: 24px; }
  .image-frame > img { height: 300px; }
  .floating-card { left: -4px; bottom: -24px; }
  .section { padding-block: 58px; }
  .feature-grid, .resource-grid, .value-grid, .social-grid, .gallery-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 235px; }
  .feature-card h3 { margin-top: 35px; }
  .network-section { padding-block: 62px; }
  .network-copy h2 { font-size: 40px; }
  .network-capacity { min-height: 250px; padding: 30px 24px; }
  .network-capacity > strong { font-size: 78px; }
  .featured-branch-row, .branch-grid { grid-template-columns: 1fr; }
  .featured-branch-row { margin-top: 28px; }
  .branch-hero { padding-bottom: 42px; }
  .branch-finder { padding: 12px; }
  .directory-heading { align-items: flex-start; flex-direction: column; }
  .branch-card { min-height: 0; padding: 23px 20px; }
  .branch-card h2 { margin-top: 22px; }
  .branch-card-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .branch-call { min-height: 44px; display: grid; place-items: center; }
  .branch-profile-hero { padding: 48px 0 55px; }
  .branch-profile-head h1 { font-size: 43px; }
  .branch-contact-card { padding: 24px 20px; }
  .branch-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .branch-services-panel { padding: 28px 22px; }
  .page-hero { padding-block: 48px 56px; }
  .page-hero h1 { font-size: 42px; }
  .page-hero p:not(.eyebrow) { font-size: 16px; }
  .form-card { padding: 23px 18px; }
  .radio-group { grid-template-columns: 1fr; }
  .radio-group > div label { flex-direction: row; justify-content: flex-start; gap: 8px; text-align: left; }
  .radio-group input { margin: 0; }
  .gallery-card img { height: 260px; }
  .mandate-card { padding: 30px 24px; }
  .mandate-card blockquote { font-size: 19px; }
  .contact-panel { padding: 30px 24px; }
  .social-card { grid-template-columns: 50px 1fr 34px; padding: 18px; }
  .social-monogram { width: 50px; height: 50px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-base { flex-direction: column; }
  .success-card { padding: 42px 22px; }
  .success-card h1 { font-size: 41px; }
  .staff-topbar { min-height: 64px; }
  .staff-topbar > div { display: none; }
  .staff-page-head { align-items: flex-start; flex-direction: column; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .stat-card { padding: 17px; }
  .stat-card strong { font-size: 29px; }
  .panel { padding: 19px; }
  .table-panel { padding: 0; }
  .filter-bar { grid-template-columns: 1fr; }
  .detail-list > div { grid-template-columns: 1fr; gap: 4px; }
  .staff-form-panel { padding: 22px 18px; }
  .login-card { padding: 32px 23px; }
}

@media print {
  .site-header, .site-footer, .mobile-action-dock, .staff-sidebar, .staff-topbar, .button, .filter-bar { display: none !important; }
  body, .staff-body { background: white; }
  .staff-shell { display: block; }
  .staff-main { padding: 0; }
  .panel { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Water-inspired visitor experience */
.feature-section, .form-section { position: relative; isolation: isolate; overflow: hidden; background: #eaf6fa; }
.feature-section::before, .form-section::before { content: ""; position: absolute; z-index: -1; inset: -25%; pointer-events: none; background: repeating-radial-gradient(ellipse at 75% 35%, transparent 0 65px, #159fc414 67px 69px, transparent 72px 115px), radial-gradient(ellipse at 10% 60%, #85ddd96b, transparent 55%); animation: water-drift 18s ease-in-out infinite alternate; }
@keyframes water-drift { to { transform: translate(3%, 3%) rotate(8deg); } }
.water-art { position: relative; height: 360px; display: grid; place-items: center; }
.water-art > span { position: absolute; bottom: 0; letter-spacing: .35em; font-size: 11px; color: #b1eaf5; }
.water-drop { width: 175px; height: 175px; border-radius: 8% 65% 65% 65%; transform: rotate(45deg); background: radial-gradient(circle at 30% 25%, #ecffffe6, #42cce5a6 30%, #087dc6 65%, #004a86); box-shadow: inset -12px -14px 26px #00376199, inset 5px 5px 15px #a5ffff, 25px 25px 70px #00cef755; animation: drop-float 7s ease-in-out infinite alternate; }
@keyframes drop-float { to { transform: translateY(-18px) rotate(45deg); } }
.water-orbit, .water-ripple { position: absolute; width: 310px; height: 310px; border: 1px solid #86e9ff55; border-radius: 50%; box-shadow: 0 0 0 32px #7bdfff09, 0 0 0 65px #7bdfff07; }
.water-ripple { height: 55px; bottom: 45px; background: #2dcdeb22; animation: water-drift 8s ease-in-out infinite alternate; }
.feature-card { background: linear-gradient(120deg, #f9fdffff 25%, #e1f4f8ee); border-color: #b7dce8; box-shadow: 0 8px 25px #005b8a0c; }
.feature-card > :not(.card-art) { position: relative; z-index: 1; }
.card-art { position: absolute; width: 155px; height: 155px; right: -18px; top: 10px; color: #168ab4; opacity: .12; transform: rotate(-12deg); }
.card-art svg { width: 100%; height: 100%; }
.feature-card::before { content: ""; position: absolute; width: 290px; height: 130px; right: -45px; bottom: -65px; border: 1px solid #159fc42b; border-radius: 50%; box-shadow: 0 -16px 0 #21adc00a, 0 -33px 0 #21adc00a; }
.feature-card p { color: #39566c; max-width: 32ch; }
.feature-card .feature-icon { background: linear-gradient(135deg, #005baa, #13adbd); box-shadow: 0 6px 14px #005baa24; }
.form-card { background: #ffffffed; border: 1px solid #b8dfea; box-shadow: 0 20px 65px #065c8514; }
.form-aside { padding: 25px; background: #e1f5f8e8; border: 1px solid #b8dfea; border-radius: 20px; }
.star-rating { display: flex; justify-content: center; padding: 22px 0; background: linear-gradient(135deg, #e2f6fc, #effbf8); border-radius: 18px; }
.star-choice { position: relative; display: block; width: 23px; height: 48px; cursor: pointer; overflow: hidden; color: #aac6d3; }
.star-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.star-half { display: block; width: 46px; font-size: 46px; line-height: 48px; }
.star-choice:nth-child(even) .star-half { transform: translateX(-23px); }
.star-choice.is-filled { color: #007daa; filter: drop-shadow(0 2px 2px #00b3c638); }
.star-choice:has(~ .star-choice input:checked) { color: #007daa; }
.star-choice:has(input:focus-visible) { outline: 2px solid #004477; outline-offset: 2px; }
.star-choice:has(input:checked) .star-half { color: #007daa; }
.rating-value { text-align: center; font-size: 13px; color: #245975; }
.mobile-action-dock svg { width: 23px; height: 23px; }
.social-monogram svg { width: 27px; height: 27px; }
@media (max-width: 800px) { .water-art { height: 265px; } .water-drop { width: 130px; height: 130px; } .water-orbit { width: 220px; height: 220px; } .water-ripple { width: 230px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }
/* Visitor comfort, appearance and water feedback */
.form-card, .staff-form-panel, .form-aside { color: #111827; }
.form-field label, .field-label-top, .form-field .help-text, .form-aside p { color: #17212b; }
.form-control, input, textarea, select { color: #101820; }
.form-control::placeholder { color: #586672; opacity: 1; }
.form-control:focus { border-color: #0086b8; box-shadow: 0 0 0 3px #0086b81f; }
.phone-field { display: grid; grid-template-columns: 100px minmax(0, 1fr); column-gap: 10px; }
.phone-field > label, .phone-field > small, .phone-field > .field-error { grid-column: 1 / -1; }
.phone-field input { width: 100%; min-width: 0; }
.theme-control { margin-left: auto; }
.theme-control select { border: 1px solid #b8d5e3; border-radius: 99px; background: #eef9fc; color: #064269; padding: 8px 12px; font-size: 12px; font-weight: 700; max-width: 125px; cursor: pointer; }
.nav-wrap { gap: 16px; }
.water-sprinkle { position: fixed; z-index: 9999; pointer-events: none; width: 0; height: 0; }
.water-sprinkle i { position: absolute; width: 7px; height: 11px; border-radius: 60% 40% 60% 40%; background: #25c5ea; box-shadow: 0 0 5px #0089c499; animation: water-splash .6s ease-out forwards; }
@keyframes water-splash { from { opacity: 1; transform: translate(0,0) scale(.4); } to { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(.7) rotate(80deg); } }
.water-success { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 50% 25%, #bbf0ed, #e9f7fc 65%); padding: 80px 20px; }
.water-success .success-card { position: relative; z-index: 1; background: #fffffff2; border: 1px solid #b9e1e9; box-shadow: 0 30px 80px #006e9022; max-width: 680px; }
.water-success .success-mark { background: linear-gradient(140deg, #005baa, #0bb9bb); color: white; box-shadow: 0 0 0 12px #0099bd0d, 0 0 0 24px #0099bd08; }
.water-success .success-mark span { color: white; }
.water-success h1 { letter-spacing: -.04em; }
.water-success .reference-box { display: grid; gap: 6px; background: #eaf8fb; border: 1px dashed #6aafc9; border-radius: 18px; padding: 20px; }
.reference-box > span { font-size: 12px; color: #31556d; }
.success-next { display: flex; gap: 16px; text-align: left; padding: 24px 0; }
.success-next > span { color: #0084ac; font-size: 32px; }
.success-next p { font-size: 14px; margin: 4px 0; }
.success-water-rings { position: absolute; inset: 0; pointer-events: none; }
.success-water-rings span { position: absolute; border: 1px solid #1daab233; border-radius: 50%; width: 650px; height: 650px; left: calc(50% - 325px); top: 10%; animation: receipt-ripple 7s ease-out infinite; }
.success-water-rings span:nth-child(2) { animation-delay: -2s; }
.success-water-rings span:nth-child(3) { animation-delay: -4s; }
@keyframes receipt-ripple { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
.hero.has-video .water-art { visibility: hidden; }
.hero.has-video .hero-video { opacity: 1; }
.hero.has-video .hero-tint { background: linear-gradient(100deg, #002844df, #00456e80); }
.visitor-admin-banner { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: #e1f5f8; padding: 22px; border: 1px solid #aad4df; border-radius: 18px; margin-bottom: 25px; }
.visitor-admin-banner p { margin: 5px 0 0; }
.visitor-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.visitor-filters label { display: block; font-size: 12px; color: #182b3a; font-weight: 700; }
.visitor-filters .form-alert, .visitor-filters .button-row { grid-column: 1 / -1; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 25px; }
.analytics-grid h2 { margin-top: 0; }
.analytics-bar { margin-block: 17px; }
.analytics-bar > div:first-child { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.bar-track { height: 10px; border-radius: 99px; margin-top: 7px; background: #e2f0f5; overflow: hidden; }
.bar-track > span { display: block; height: 100%; background: linear-gradient(90deg, #005baa, #16bfc1); border-radius: inherit; }
html[data-theme="light"] .feature-section, html[data-theme="light"] .form-section { background: #f5f7fa; }
html[data-theme="light"] .feature-section::before, html[data-theme="light"] .form-section::before { opacity: .2; }
html[data-theme="dark"] { color-scheme: dark; --ink: #ecf6fc; --muted: #b8c9d5; --line: #315166; --soft: #122c3d; --white: #091b29; --blue-900: #d2efff; --blue-950: #e1f5ff; --blue-700: #73d6f5; }
html[data-theme="dark"] body { background: #091b29; color: #ecf6fc; }
html[data-theme="dark"] .site-header, html[data-theme="dark"] .primary-nav, html[data-theme="dark"] .mobile-action-dock { background: #102737f5; border-color: #315166; }
html[data-theme="dark"] .theme-control select { background: #16394d; color: #e5f8ff; border-color: #46697c; }
html[data-theme="dark"] :is(.feature-section, .form-section, .soft-section, .success-section) { background: #0b2332; }
html[data-theme="dark"] :is(.form-card, .form-aside, .success-card, .feature-card, .resource-card, .social-card, .branch-card, .contact-panel, .mandate-card) { background: #133244; border-color: #345b70; color: #eef8ff; }
html[data-theme="dark"] :is(.form-field label, .field-label-top, .form-field .help-text, .form-aside p, .feature-card p, .success-card p, .rating-value, .reference-box > span, .resource-card p) { color: #e0edf5; }
html[data-theme="dark"] :is(.form-control, .form-field input, .form-field textarea, .form-field select) { background: #0b2332; color: #f5faff; border-color: #537386; }
html[data-theme="dark"] .form-control::placeholder { color: #b3c8d5; }
html[data-theme="dark"] :is(.star-rating, .reference-box) { background: #0c293b; border-color: #396278; }
html[data-theme="dark"] .star-choice { color: #607d8d; }
html[data-theme="dark"] .star-choice.is-filled, html[data-theme="dark"] .star-choice:has(input:checked) .star-half, html[data-theme="dark"] .star-choice:has(~ .star-choice input:checked) { color: #53d4f6; }
html[data-theme="dark"] .button-primary, html[data-theme="dark"] .nav-cta, html[data-theme="dark"] .mobile-action-dock a[aria-current="page"] { background: #0674ac; color: white; }
html[data-theme="dark"] :is(.hero, .page-hero, .site-footer, .impact-banner) { background-color: #06233b; background-image: linear-gradient(120deg,#071c2c,#08476c); }
html[data-theme="dark"] .hero-wave-front { fill: #0b2332; }
html[data-theme="dark"] .card-art { color: #79d8f0; opacity: .16; }
html[data-theme="dark"] .field-error, html[data-theme="dark"] .required { color: #ffb0b8; }
@media (max-width: 800px) {
  .theme-control select { width: 105px; font-size: 11px; padding: 8px; }
  .brand img { width: 46px; } .brand { gap: 7px; } .nav-wrap { gap: 8px; }
  .hero.has-video .hero-grid { display: block; min-height: 540px; padding-top: 65px; }
  .hero.has-video .water-art { display: none; }
  .hero.has-video .hero-tint { background: linear-gradient(180deg, #00233bbd, #002b49d9); }
  .hero.has-video .hero-copy { position: relative; z-index: 2; }
  .analytics-grid, .visitor-filters { grid-template-columns: 1fr; }
  .visitor-admin-banner { align-items: stretch; flex-direction: column; }
}
@media (max-width: 420px) { .brand strong { max-width: 104px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .water-sprinkle, .success-water-rings { display: none; } }

.visitor-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .visitor-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.theme-toggle { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; margin-left: auto; padding: 5px; color: #006795; background: #e9f8fc; border: 1px solid #a6d4e3; border-radius: 50%; cursor: pointer; box-shadow: 0 3px 12px #007bab12; transition: transform .25s, background .25s; }
.theme-toggle svg { width: 34px; height: 34px; }
.theme-toggle:hover { transform: rotate(12deg); background: #d2f1f8; }
html[data-theme="dark"] .theme-toggle { color: #a9eeff; background: #143d54; border-color: #4a8da4; box-shadow: 0 0 16px #2dd4f222; }

.preview-banner { padding: 12px 20px; text-align: center; background: #fff2cb; color: #4b3705; font-size: 13px; border-bottom: 1px solid #e8ce85; }

/* Publication-first exhibition, shared by Local and International. */
.hero.has-video .hero-grid{grid-template-columns:1fr 1fr;min-height:650px}
.hero.has-video .hero-copy{grid-column:2;max-width:600px;padding:45px 0 65px 24px}
.hero.has-video .hero-video{object-position:25% center;opacity:1}
.hero.has-video .hero-tint{background:linear-gradient(90deg,rgba(0,30,50,.05) 0%,rgba(0,30,50,.3) 32%,rgba(0,27,48,.93) 61%,#001b30 100%)}
.hero.has-video .water-art{display:none}
.hero.has-video .hero-copy h1{font-size:clamp(2.4rem,4.4vw,4.2rem)}
.video-toggle{position:absolute;z-index:4;bottom:65px;left:32px;border:1px solid #ffffff80;border-radius:30px;padding:12px 18px;color:white;background:#001b30b8;font:inherit;cursor:pointer;min-height:44px}
.video-toggle:focus-visible{outline:3px solid #72ddff;outline-offset:4px}
.publication-spotlight{background:radial-gradient(ellipse at 12% 0%,#bbecf96b,transparent 60%),var(--page-bg,#f0f8fc)}
.publication-shelf,.publication-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.publication-art-card{position:relative;isolation:isolate;min-height:480px;border-radius:24px;overflow:hidden;background:#064267;box-shadow:0 16px 35px #002b491a;transition:transform .25s}
.publication-art-card:hover{transform:translateY(-5px)}
.publication-art-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:-3}
.publication-art-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 10%,#001b3020 28%,#001b30e8 62%,#001b30 100%)}
.publication-art-copy{position:absolute;bottom:0;padding:28px;color:#fff;width:100%;box-sizing:border-box}
.publication-art-copy h3{color:#fff;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1.14;margin:12px 0}
.publication-art-copy p{color:#e8f5ff;font-size:.94rem;line-height:1.5;margin:0 0 20px}
.publication-kicker{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#9de5ff}
.publication-art-fallback{font-size:5rem;font-weight:900;color:#ffffff45;transform:rotate(-20deg);padding:60px 0}
.publication-search{max-width:680px;margin-bottom:32px}.publication-search>div{display:flex;gap:12px;margin-top:8px}.publication-search input{flex:1;min-width:0}
.profile-control{padding:16px;color:#fff;border:1px solid #ffffff30;border-radius:12px;margin:16px 0}.profile-control form{display:grid;gap:10px;margin-top:12px}.profile-control label{font-size:.8rem}.profile-control select{padding:10px;color:#132d43;background:white;border-radius:6px}.report-profile-filter{margin-bottom:24px}.report-profile-filter select{max-width:220px}
[data-theme="dark"] .publication-spotlight{background:radial-gradient(ellipse at 12% 0%,#12557665,transparent 60%),#071e2b}
@media(max-width:900px){.hero.has-video .hero-grid{display:block;min-height:590px;padding-top:50px}.hero.has-video .hero-copy{max-width:620px;margin-left:auto;padding:30px 0 90px}.hero.has-video .hero-tint{background:linear-gradient(180deg,#001b3060,#001b30da 45%,#001b30 100%)}.hero.has-video .hero-video{object-position:30% center}.publication-shelf,.publication-library{gap:18px}.publication-art-copy{padding:22px}.publication-art-card{min-height:460px}}
@media(max-width:640px){.hero.has-video .hero-grid{min-height:610px;padding-top:24px}.hero.has-video .hero-copy{padding-top:36px}.hero.has-video .hero-copy h1{font-size:2.6rem}.video-toggle{left:20px;bottom:55px}.publication-shelf{display:grid;grid-auto-flow:column;grid-auto-columns:88%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:22px}.publication-shelf .publication-art-card{scroll-snap-align:start}.publication-library{grid-template-columns:1fr}.publication-art-card{min-height:480px}.publication-spotlight .section-heading{align-items:flex-start;gap:16px}.publication-art-copy h3{font-size:1.8rem}}
@media(prefers-reduced-motion:reduce){.publication-art-card{transition:none}.publication-art-card:hover{transform:none}}

.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:25% center}.hero.has-video .hero-tint{background:linear-gradient(90deg,rgba(0,27,45,.12) 0%,rgba(0,27,45,.45) 40%,rgba(0,27,45,.96) 58%,#001b2d 100%)}
@media(min-width:901px){.hero.has-video .hero-video,.hero.has-video .hero-poster{width:70%;object-position:center}}
@media(max-width:900px){.hero.has-video .hero-tint{background:linear-gradient(180deg,rgba(0,27,45,.45),rgba(0,27,45,.72))}}

.publication-preview-layout{display:grid;grid-template-columns:minmax(180px,280px) minmax(0,1fr);gap:32px;align-items:start}.publication-preview-cover{width:100%;height:auto;border-radius:16px;box-shadow:0 12px 32px #002b4925}.publication-reader{width:100%;height:78vh;min-height:480px;border:1px solid #87aec1;border-radius:12px;background:#fff}.publication-preview-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.publication-preview-copy{margin-top:16px}@media(max-width:700px){.publication-preview-layout{grid-template-columns:1fr}.publication-preview-cover{max-width:260px;display:block;margin:auto}.publication-reader{height:65vh;min-height:400px}}

.publication-reader{height:auto;min-height:400px;padding:16px;background:var(--page-bg,#eef5f8);color:var(--text,#132d43)}.reader-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}.reader-toolbar .button{padding:10px 14px}.reader-page{overflow:auto;background:#cbd9e0;border-radius:6px}.reader-page canvas{display:block;margin:auto;max-width:100%;height:auto}.reader-text{margin-top:16px}.reader-text summary{cursor:pointer;font-weight:700}.reader-text [data-page-text]{white-space:pre-wrap;padding-top:12px}.reader-toolbar button:disabled{opacity:.45;cursor:default}[data-theme="dark"] .publication-reader{background:#102e40;color:#e8f5ff}@media(max-width:700px){.publication-reader{height:auto;padding:10px}.reader-toolbar{gap:8px;font-size:12px}.reader-toolbar .button{padding:8px 10px;font-size:12px}}