@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
    color-scheme: light;
    --canvas: #f2f4ef;
    --canvas-deep: #e8ece5;
    --surface: #ffffff;
    --surface-soft: #f8faf6;
    --surface-teal: #e7f2ef;
    --ink: #102a2d;
    --muted: #506366;
    --subtle: #667678;
    --line: #d9e0da;
    --line-strong: #bdcac4;
    --primary: #123f42;
    --primary-deep: #0a2d30;
    --primary-soft: #d9ece7;
    --accent: #a64b13;
    --accent-hover: #843908;
    --accent-soft: #fbe8d9;
    --success: #176b55;
    --danger: #a53a35;
    --ho: #123f42;
    --zo: #176b55;
    --ro: #a64b13;
    --do: #5b4aa5;
    --ap: #785320;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 2px rgba(16, 42, 45, .06);
    --shadow: 0 12px 35px -24px rgba(16, 42, 45, .42), 0 2px 8px rgba(16, 42, 45, .05);
    --shadow-raised: 0 22px 55px -28px rgba(10, 45, 48, .48);
    --content: 1600px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }
body {
    background: radial-gradient(circle at 8% 2%, rgba(255,255,255,.92), transparent 28rem), var(--canvas);
    color: var(--ink);
    font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--primary-deep); font-family: 'Manrope', 'DM Sans', sans-serif; letter-spacing: -.025em; }
a { color: var(--success); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input { font: inherit; }
button { color: inherit; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font: 700 10px 'IBM Plex Mono', monospace; letter-spacing: .11em; text-transform: uppercase; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 5000; transform: translateY(-160%); border-radius: var(--radius-sm); background: var(--surface); color: var(--primary-deep); padding: 10px 14px; box-shadow: var(--shadow-raised); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }

/* Header and product identity */
.appbar { min-height: 68px; padding: 10px clamp(16px, 3vw, 38px); display: flex; align-items: center; gap: 18px; background: rgba(10, 45, 48, .96); color: #fff; border-bottom: 1px solid rgba(255,255,255,.11); backdrop-filter: blur(18px); position: relative; z-index: 1500; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; min-width: max-content; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg, #fff 0 53%, #e6a06f 54% 100%); color: var(--primary-deep); font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 8px 20px rgba(0,0,0,.15); }
.brand-copy { display: grid; line-height: 1.05; }
.brand-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.brand-sub { margin-top: 5px; color: rgba(255,255,255,.68); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.top-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.top-nav a { color: rgba(255,255,255,.76); text-decoration: none; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 600; }
.top-nav a:hover, .top-nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.09); }
.trust-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 700; white-space: nowrap; }
.trust-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #7dd3a8; box-shadow: 0 0 0 3px rgba(125,211,168,.12); }

/* Inputs, controls and surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--primary-deep); font-size: 14px; font-weight: 700; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.btn:hover { background: var(--surface-soft); border-color: #98aaa2; }
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: wait; opacity: .66; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-quiet { min-height: 36px; padding: 7px 10px; border-color: transparent; background: transparent; color: var(--success); }
.btn-quiet:hover { background: var(--surface-teal); border-color: transparent; }
.search { min-height: 54px; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; padding: 5px 6px 5px 15px; box-shadow: 0 0 0 4px rgba(23,107,85,.05), var(--shadow); transition: border-color .15s, box-shadow .15s; }
.search:focus-within { border-color: var(--success); box-shadow: 0 0 0 4px rgba(23,107,85,.12), var(--shadow); }
.search-symbol { color: var(--success); font-size: 17px; line-height: 1; }
.search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; }
.search input::placeholder { color: #718083; opacity: 1; }
.key-hint { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 2px 6px; color: var(--subtle); background: var(--surface-soft); font: 10px 'IBM Plex Mono', monospace; }
.autocomplete { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1800; display: none; max-height: min(430px, 60vh); overflow-y: auto; padding: 6px; background: rgba(255,255,255,.98); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-raised); }
.autocomplete.open { display: block; }
.autocomplete [role="option"] { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.autocomplete [role="option"]:hover, .autocomplete [role="option"].active { background: var(--surface-teal); }
.autocomplete-copy { min-width: 0; display: grid; }
.autocomplete-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 700; }
.autocomplete-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.person-mark { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 11px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { min-height: 34px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.7); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.chip:hover { border-color: var(--success); color: var(--primary-deep); }
.chip[aria-pressed="true"] { border-color: var(--success); background: var(--surface-teal); color: var(--primary-deep); box-shadow: inset 0 0 0 1px rgba(23,107,85,.06); }

/* Directory record language */
.tag { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 3px 7px; border-radius: 6px; color: #fff; font: 700 10px 'IBM Plex Mono', monospace; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.tag-HO { background: var(--ho); } .tag-ZO { background: var(--zo); }
.tag-RO { background: var(--ro); } .tag-DO { background: var(--do); }
.tag-AP, .tag-HH, .tag-GH { background: var(--ap); }
.detail-head { display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap; }
.detail-head h2 { flex: 1; min-width: min(280px, 70%); margin: -2px 0 0; font-size: clamp(20px, 2vw, 28px); line-height: 1.18; }
.crumbs { margin: 10px 0 0; color: var(--subtle); font-size: 12px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 5px; color: #96a3a1; }
.fields { margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.field { min-width: 0; padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); }
.field:nth-child(odd) { margin-right: 18px; }
.flabel { margin: 0 0 5px; color: var(--subtle); font: 700 10px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.fval { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.fval.mono { font: 500 13px/1.65 'IBM Plex Mono', monospace; }
.fval a { font-weight: 700; }
.record-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; }
.offs-title { margin: 27px 0 11px; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.offs-title .count { padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 700 11px 'IBM Plex Mono', monospace; }
.offs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
.offs li { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.offs li.highlighted { outline: 3px solid rgba(166,75,19,.27); border-color: var(--accent); background: #fff8f1; }
.off-name { font-weight: 800; color: var(--primary-deep); }
.off-desig { margin-top: 2px; color: var(--muted); font-size: 13px; }
.off-line { margin-top: 7px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.empty { padding: 30px 4px; color: var(--muted); }

.hierarchy { margin: 0 0 18px; overflow: hidden; }
.hierarchy summary { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 13px 15px; list-style: none; cursor: pointer; }
.hierarchy summary::-webkit-details-marker { display: none; }
.hier-title { display: block; font-family: 'Manrope', sans-serif; font-weight: 800; color: var(--primary-deep); }
.hier-hint { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.hier-toggle { color: var(--success); font: 700 10px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.hier-toggle::before { content: 'Explore'; }
.hierarchy[open] .hier-toggle::before { content: 'Close'; }
.hier-body { padding: 14px 15px 16px; border-top: 1px solid var(--line); }
.hier-path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.hier-step { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink); font-size: 12px; text-decoration: none; }
.hier-step.current { border-color: var(--primary); background: var(--primary); color: #fff; }
.hier-sep { color: var(--subtle); font-size: 11px; }
.hier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hier-block { min-width: 0; }
.hier-block h4 { margin: 0 0 7px; color: var(--subtle); font: 700 10px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.hier-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hier-list a { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 12px; text-decoration: none; }
.hier-list a:hover { border-color: var(--success); color: var(--success); }
.hier-list .office-link-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hier-more { padding: 5px 1px 0; color: var(--subtle); font-size: 11px; }

/* Public supporting pages */
.prose-shell { width: min(760px, calc(100% - 32px)); margin: 48px auto 80px; }
.prose-card { padding: clamp(24px, 5vw, 54px); }
.prose-card h1 { margin-bottom: 8px; font-size: clamp(30px, 5vw, 48px); }
.prose-card h2 { margin: 32px 0 10px; font-size: 19px; }
.prose-card p, .prose-card li { color: var(--muted); line-height: 1.75; }
.prose-card .lede { color: var(--ink); font-size: 17px; }
.prose-meta { color: var(--subtle); font-size: 12px; }
.notice { padding: 14px 16px; border: 1px solid #e9c4a8; border-radius: 11px; background: var(--accent-soft); color: #662d0a; }

:focus-visible { outline: 3px solid #e59a61; outline-offset: 3px; }
::selection { background: #c7e3da; color: var(--primary-deep); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 900px) { .top-nav a:not([aria-current="page"]) { display: none; } .trust-pill { display: none; } .fields, .offs { grid-template-columns: 1fr; } .field:nth-child(odd) { margin-right: 0; } }
@media (max-width: 620px) { .appbar { min-height: 62px; padding: 9px 14px; } .brand-mark { width: 38px; height: 38px; border-radius: 11px; } .brand-title { font-size: 14px; } .brand-sub { font-size: 9px; } .top-nav { display: none; } .hier-grid { grid-template-columns: 1fr; } .key-hint { display: none; } }