/* ==========================================================
   JCL SITE HEADER + FOOTER
   themes/jcl-theme/assets/css/chrome.css
   ----------------------------------------------------------
   Generated from the mockup's css/site.css (jcl-mockup.vercel.app):
   only the rules for the header, footer, mobile drawer, bottom bar,
   newsletter widgets (the accessibility panel is the Accessibility Widget plugin), scoped to .jcl-chrome
   so they never reach page content. WordPress-only additions are at
   the end of the file.
   ========================================================== */
@keyframes notice-pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(34,197,94,0.24); }
    50% { box-shadow: 0 0 0 9px rgba(34,197,94,0.06); } }
@keyframes notice-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html, body { overflow-x: hidden; max-width: 100%; }
html .jcl-chrome { --navy: #052460;
    --navy-dark: #041a4a;
    --red: #da2c38;
    --orange: #ff6b35;
    --lilac: #c8b8db;
    --ink: #0a0a0a;
    --ink-muted: #4d4d4d;
    --ink-soft: #6e6e73;
    --line: rgba(0,0,0,0.08);
    --line-strong: rgba(0,0,0,0.14);
    --surface: #ffffff;
    --surface-alt: #f5f5f7;    
    --surface-warm: #fafafa;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg: 0 30px 60px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    --shadow-hover: 0 20px 50px rgba(5,36,96,0.18), 0 6px 16px rgba(0,0,0,0.08);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);       
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 220ms;
    --dur: 420ms;
    --dur-slow: 700ms;
    --font-display: 'Arimo', system-ui, -apple-system, sans-serif;
    --font-brand: 'Comfortaa', 'Arimo', system-ui, sans-serif; }
:where(.jcl-chrome) *,
:where(.jcl-chrome) *::before,
:where(.jcl-chrome) *::after { box-sizing: border-box; margin: 0; padding: 0; }
html .jcl-chrome { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.jcl-chrome { font-family: var(--font-display);
    color: var(--ink);
    background: var(--surface);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.01em; }
:where(.jcl-chrome) img,
:where(.jcl-chrome) svg { display: block; max-width: 100%; }
:where(.jcl-chrome) a { color: inherit; text-decoration: none; }
:where(.jcl-chrome) button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }
:where(.jcl-chrome) ::selection { background: var(--navy); color: #fff; }
:where(.jcl-chrome) .site-topbar { position: sticky; top: 0;
    z-index: 60;
    background: var(--surface);
    border-bottom: 1px solid var(--line); }
:where(.jcl-chrome) .notice-bar { background: linear-gradient(90deg, #05132e 0%, var(--navy) 55%, #0a3a8e 100%);
    color: #fff;
    min-height: 56px;
    padding: 16px 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-bottom: 3px solid var(--orange);
    position: relative; }
:where(.jcl-chrome) .notice-bar .dot { width: 10px; height: 10px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34,197,94,0.24);
    flex-shrink: 0;
    animation: notice-pulse 2.4s ease-in-out infinite; }
:where(.jcl-chrome) .notice-text { color: #fff; font-size: 14px; letter-spacing: 0.01em; }
:where(.jcl-chrome) .notice-text b { font-weight: 700; color: var(--orange); }
:where(.jcl-chrome) .notice-sep { opacity: 0.35; }
:where(.jcl-chrome) .top-signup { background: var(--lilac);
    color: var(--navy);
    padding: 12px 32px;
    display: flex; align-items: center; justify-content: center;
    gap: 18px; flex-wrap: wrap; }
:where(.jcl-chrome) .top-signup .lbl { font-family: var(--font-brand);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em; }
:where(.jcl-chrome) .top-signup .lbl .glyph { margin-right: 8px; }
:where(.jcl-chrome) .top-signup form { display: flex; align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--navy);
    border-radius: 999px;
    overflow: hidden;
    max-width: 460px; width: 100%;
    box-shadow: 0 2px 0 rgba(5,36,96,0.12); }
:where(.jcl-chrome) .top-signup form input { flex: 1; border: 0; outline: none;
    padding: 8px 16px;
    font-family: var(--font-display);
    font-size: 13px;
    background: transparent;
    color: var(--ink);
    min-width: 0; }
:where(.jcl-chrome) .top-signup form button { border: 0; cursor: pointer;
    background: var(--navy); color: #fff;
    font-family: var(--font-brand);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0 20px;
    transition: background 200ms; }
:where(.jcl-chrome) .top-signup form button:hover { background: var(--red); }
:where(.jcl-chrome) .top-signup .fine { font-family: var(--font-display);
    font-size: 12px; color: rgba(5,36,96,0.7); }
@media (max-width: 720px) {
  :where(.jcl-chrome) .top-signup { padding: 10px 16px; gap: 10px; }
  :where(.jcl-chrome) .top-signup .fine { display: none; }
}
@media (min-width: 721px) {
  :where(.jcl-chrome) .top-signup { display: none; }
}
:where(.jcl-chrome) .btm-signup { position: fixed;
    right: 20px; bottom: 20px;
    z-index: 90;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px 20px;
    box-shadow: 0 20px 44px rgba(5,36,96,0.18),
                0 4px 12px rgba(5,36,96,0.08);
    transform: translateY(24px);
    opacity: 0;
    pointer-events: none;
    transition: transform 400ms cubic-bezier(0.22,1,0.36,1),
                opacity 400ms; }
:where(.jcl-chrome) .btm-signup.is-shown { transform: translateY(0);
    opacity: 1;
    pointer-events: auto; }
:where(.jcl-chrome) .btm-signup.is-hidden { display: none; }
:where(.jcl-chrome) .btm-signup .close { position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: transparent;
    border: 0; cursor: pointer;
    color: var(--ink-soft);
    font-size: 18px; line-height: 1;
    border-radius: 50%;
    transition: background 160ms, color 160ms; }
:where(.jcl-chrome) .btm-signup .close:hover { background: var(--surface-alt); color: var(--ink); }
:where(.jcl-chrome) .btm-signup .kicker { font-family: var(--font-brand);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--red);
    margin-bottom: 6px; }
:where(.jcl-chrome) .btm-signup h3 { font-family: var(--font-brand);
    font-size: 18px; font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin-bottom: 6px;
    line-height: 1.2; }
:where(.jcl-chrome) .btm-signup p { font-family: var(--font-display);
    font-size: 13px; line-height: 1.4;
    color: var(--ink-soft);
    margin-bottom: 12px; }
:where(.jcl-chrome) .btm-signup form { display: flex; align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    overflow: hidden; }
:where(.jcl-chrome) .btm-signup form input { flex: 1; border: 0; outline: none;
    padding: 10px 16px;
    font-family: var(--font-display);
    font-size: 13px;
    background: transparent;
    color: var(--ink);
    min-width: 0; }
:where(.jcl-chrome) .btm-signup form button { border: 0; cursor: pointer;
    background: var(--navy); color: #fff;
    font-family: var(--font-brand);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0 18px;
    transition: background 200ms; }
:where(.jcl-chrome) .btm-signup form button:hover { background: var(--red); }
:where(.jcl-chrome) .btm-signup .fine { display: block;
    font-family: var(--font-display);
    font-size: 12px; color: var(--ink-soft);
    margin-top: 8px; }
/* The OrangeBoy sign-up form (inc/newsletter.php) fills the card under its texts; on a short window the card stays
   inside the screen and the form scrolls within its frame */
:where(.jcl-chrome) .btm-signup { width: 400px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px);
    display: flex; flex-direction: column; }
:where(.jcl-chrome) .btm-signup .ob-frame { flex: 1 1 auto; min-height: 240px; height: 520px;
    padding: 4px 0 0 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
:where(.jcl-chrome) .btm-signup .ob-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
:where(.jcl-chrome) .btm-signup h3,
:where(.jcl-chrome) .btm-signup .kicker { padding-right: 28px; }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup .ob-frame { border-color: rgba(255,255,255,0.18); }
@media (max-width: 720px) {
  :where(.jcl-chrome) .btm-signup { display: none; }
}
:where(.jcl-chrome) .top-links { display: flex; gap: 28px; color: var(--ink-soft); align-items: center; }
:where(.jcl-chrome) .top-links span { transition: color var(--dur-fast) var(--ease-smooth); cursor: pointer; }
:where(.jcl-chrome) .top-links span:hover { color: var(--ink); }
:where(.jcl-chrome) .header { display: flex;
    height: 68px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    align-items: stretch;
    padding: 0;
    gap: 0; }
:where(.jcl-chrome) .brand { display: flex; align-items: center; justify-content: center;
    width: 160px; height: inherit;
    background: var(--navy);
    flex-shrink: 0; }
:where(.jcl-chrome) .brand img { height: 48px;
    filter: brightness(0) invert(1); }
:where(.jcl-chrome) .search-bar { position: relative;
    flex: 1;
    display: flex; align-items: center; gap: 12px;
    padding: 0 24px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    transition: background var(--dur-fast) var(--ease); }
:where(.jcl-chrome) .search-bar:hover { background: var(--surface-alt); }
:where(.jcl-chrome) .search-bar.is-open { background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
:where(.jcl-chrome) .search-bar .search-ico { width: 28px; height: 28px; opacity: 0.65; }
:where(.jcl-chrome) .search-bar input { flex: 1; border: none; background: transparent; outline: none;
    font-family: 'Arimo', sans-serif; font-size: 16px; color: var(--ink); }
:where(.jcl-chrome) .search-bar input::placeholder { color: var(--ink-soft); }
:where(.jcl-chrome) .search-suggest { position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.06);
    border-top: 1px solid var(--line);
    z-index: 60;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .search-bar.is-open .search-suggest { opacity: 1; transform: translateY(0); pointer-events: auto; }
:where(.jcl-chrome) .search-suggest-inner { display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0; }
:where(.jcl-chrome) .suggest-col { padding: 24px 28px; }
:where(.jcl-chrome) .suggest-col + .suggest-col { border-left: 1px solid var(--line); }
:where(.jcl-chrome) .suggest-heading { font-family: 'Arimo', sans-serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 12px; }
:where(.jcl-chrome) .suggest-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
:where(.jcl-chrome) .suggest-item { display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    font-size: 15px; font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-smooth), padding var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .suggest-item:hover { background: var(--surface-alt); padding-left: 20px; }
:where(.jcl-chrome) .suggest-item .s-icon { width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; }
:where(.jcl-chrome) .suggest-item .s-icon img { width: 24px; height: 24px; }
:where(.jcl-chrome) .suggest-item .s-body { flex: 1; display: flex; flex-direction: column; }
:where(.jcl-chrome) .suggest-item .s-label { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
:where(.jcl-chrome) .suggest-item .s-sub { font-size: 12px; color: var(--ink-soft); font-weight: 400; margin-top: 2px; }
:where(.jcl-chrome) .suggest-item .s-chev { opacity: 0; transform: translateX(-4px);
    transition: opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
    color: var(--navy); }
:where(.jcl-chrome) .suggest-item .s-chev img { width: 14px; height: 14px; }
:where(.jcl-chrome) .suggest-item:hover .s-chev { opacity: 1; transform: translateX(0); }
:where(.jcl-chrome) .suggest-tags { display: flex; flex-wrap: wrap; gap: 6px; }
:where(.jcl-chrome) .suggest-tag { padding: 6px 12px;
    background: var(--surface-alt);
    font-size: 12px; font-weight: 500;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .suggest-tag:hover { background: var(--navy); color: #fff; }
:where(.jcl-chrome) .search-backdrop { position: fixed; inset: 0;
    background: rgba(0,0,0,0.24);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .search-backdrop.is-open { opacity: 1; pointer-events: auto; }
:where(.jcl-chrome) .header-cell { display: flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 0 22px;
    font-family: var(--font-brand);
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    border-right: 1px solid var(--line); }
:where(.jcl-chrome) .header-cell.get-card { background: linear-gradient(135deg, #ff6b35 0%, #e04e17 100%);
    color: #fff;
    min-width: 220px;
    font-weight: 600;
    overflow: hidden; }
:where(.jcl-chrome) .header-cell.get-card::before { content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 900ms var(--ease); }
:where(.jcl-chrome) .header-cell.get-card:hover::before { transform: translateX(120%); }
:where(.jcl-chrome) .header-cell.get-card:hover { background: linear-gradient(135deg, #ff7a45 0%, #d94816 100%); }
:where(.jcl-chrome) .main-nav { display: flex;
    align-items: stretch;
    justify-content: space-between;
    background: var(--surface);
    position: relative;
    z-index: 40;
    height: 44px;
    padding: 0 20px; }
:where(.jcl-chrome) .nav-primary { display: flex; align-items: stretch;
    gap: 2px; }
:where(.jcl-chrome) .main-nav .top-links { display: flex; align-items: center;
    gap: 22px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    letter-spacing: 0.01em; }
:where(.jcl-chrome) .main-nav .top-links > span { cursor: pointer;
    transition: color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .main-nav .top-links > span:hover { color: var(--red); }
:where(.jcl-chrome) .nav-item { display: flex; align-items: center; gap: 6px;
    padding: 0 16px;
    font-size: 13px; font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
    position: static; 
    transition: color var(--dur-fast) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .nav-item:hover,
:where(.jcl-chrome) .nav-item.is-open { color: var(--ink); background: var(--surface-alt); }
:where(.jcl-chrome) .nav-item .caret { width: 8px; height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .nav-item:hover .caret,
:where(.jcl-chrome) .nav-item.is-open .caret { transform: rotate(225deg) translateY(0); }
:where(.jcl-chrome) .nav-dropdown { position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.05);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
    z-index: 45;
    
    padding: 28px max(40px, calc((100% - 1360px) / 2)) 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 24px;
    text-align: left; }
:where(.jcl-chrome) .nav-dropdown::before { content: '';
    position: absolute;
    top: -14px; left: 0; right: 0; height: 14px; }
:where(.jcl-chrome) .nav-item.is-open .nav-dropdown { opacity: 1;
    transform: translateY(0);
    pointer-events: auto; }
:where(.jcl-chrome) .nav-dropdown-locations { display: block; }
:where(.jcl-chrome) .nav-dropdown-locations .nav-dropdown-heading { padding-top: 0;
    margin-bottom: 12px; }
:where(.jcl-chrome) .loc-grid { display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px; }
:where(.jcl-chrome) .loc-card { display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-smooth),
                transform var(--dur-fast) var(--ease-smooth),
                box-shadow var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .loc-card:hover { border-color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(5,36,96,0.08); }
:where(.jcl-chrome) .loc-thumb { height: 100px;
    background-size: cover;
    background-position: center;
    position: relative; }
:where(.jcl-chrome) .loc-thumb::after { content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.35) 100%); }
:where(.jcl-chrome) .loc-body { padding: 12px 14px 4px;
    flex: 1; }
:where(.jcl-chrome) .loc-name { font-family: var(--font-brand);
    font-size: 14px; font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--navy);
    margin-bottom: 4px; }
:where(.jcl-chrome) .loc-addr { font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.4;
    margin-bottom: 8px; }
:where(.jcl-chrome) .loc-status { display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    color: var(--navy);
    letter-spacing: 0.02em; }
:where(.jcl-chrome) .loc-status::before { content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
:where(.jcl-chrome) .loc-cta { display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    font-family: var(--font-brand);
    font-size: 12px; font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.02em;
    transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .loc-card:hover .loc-cta { background: var(--navy); color: #fff; border-top-color: var(--navy); }
:where(.jcl-chrome) .loc-arrow { width: 20px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .loc-arrow img { width: 100%; height: 100%; transition: filter var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .loc-card:hover .loc-cta .loc-arrow { transform: translateX(4px) translateY(-2px); }
:where(.jcl-chrome) .loc-card:hover .loc-arrow img { filter: brightness(0) invert(1); }
:where(.jcl-chrome) .loc-foot { display: flex; justify-content: space-between; align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
    color: var(--ink-soft); }
:where(.jcl-chrome) .loc-foot-link { font-family: var(--font-brand);
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .loc-foot-link:hover { color: var(--red); }
:where(.jcl-chrome) .nav-dropdown-services { display: block; }
:where(.jcl-chrome) .nav-dropdown-services .nav-dropdown-heading { padding-top: 0;
    margin-bottom: 12px; }
:where(.jcl-chrome) .nav-svc-grid { min-height: 220px; }
:where(.jcl-chrome) .nav-svc-grid .svc-tile { min-height: 90px; padding: 12px 14px; gap: 6px; }
:where(.jcl-chrome) .nav-svc-grid .svc-tile > img { width: 22px; height: 22px; }
:where(.jcl-chrome) .nav-svc-grid .svc-tile-title { font-size: 13px; }
:where(.jcl-chrome) .nav-svc-grid .svc-tile-sub { font-size: 12px; margin-top: 2px; }
:where(.jcl-chrome) .nav-svc-grid .svc-tile-tall { padding: 14px 16px; }
:where(.jcl-chrome) .nav-svc-grid .svc-tile-tall > img { width: 36px; height: 36px; }
:where(.jcl-chrome) .nav-svc-grid .svc-tile-wide { padding: 12px 16px; }
:where(.jcl-chrome) .nav-svc-grid .svc-tile-wide > img { width: 32px; height: 32px; }
:where(.jcl-chrome) .nav-dropdown-heading { grid-column: 1 / -1;
    font-family: 'Arimo', sans-serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-soft);
    padding: 4px 14px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px; }
:where(.jcl-chrome) .nav-drop-item { display: flex; align-items: flex-start; gap: 14px;
    padding: 12px 14px;
    font-size: 14px; font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    border-radius: 8px;
    transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .nav-drop-item:hover { background: var(--surface-alt); transform: translateX(2px); }
:where(.jcl-chrome) .nav-drop-item .nd-icon { width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; }
:where(.jcl-chrome) .nav-drop-item .nd-icon img { width: 24px; height: 24px; }
:where(.jcl-chrome) .nav-drop-item .nd-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where(.jcl-chrome) .nav-drop-item .nd-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--navy); }
:where(.jcl-chrome) .nav-drop-item .nd-sub { font-size: 12px; color: var(--ink-soft); font-weight: 400; line-height: 1.4; }
:where(.jcl-chrome) .svc-tile-grid { display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: 10px;
    min-height: 300px; }
:where(.jcl-chrome) .svc-tile { background: var(--surface);
    border: 1px solid var(--line);
    padding: 16px 18px;
    display: flex; flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 140px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-smooth),
                border-color var(--dur-fast) var(--ease-smooth),
                transform var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .svc-tile:hover { background: var(--navy);
    border-color: var(--navy);
    transform: translateY(-2px); }
:where(.jcl-chrome) .svc-tile > img { width: 30px; height: 30px;
    align-self: flex-start;
    transition: filter var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .svc-tile:hover > img { filter: brightness(0) invert(1); }
:where(.jcl-chrome) .svc-tile-title { font-size: 14px; font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--navy);
    transition: color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .svc-tile:hover .svc-tile-title { color: #fff; }
:where(.jcl-chrome) .svc-tile-sub { font-size: 12px; font-weight: 500;
    line-height: 1.4;
    color: var(--ink-soft);
    margin-top: 3px;
    transition: color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .svc-tile:hover .svc-tile-sub { color: rgba(255,255,255,0.75); }
:where(.jcl-chrome) .svc-tile-tall { grid-row: span 2; padding: 22px 22px; }
:where(.jcl-chrome) .svc-tile-tall > img { width: 52px; height: 52px; }
:where(.jcl-chrome) .svc-tile-wide { grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 20px 22px; }
:where(.jcl-chrome) .svc-tile-wide > img { width: 48px; height: 48px; align-self: center; }
:where(.jcl-chrome) .footer-links { padding: 48px 40px 40px;
    background: var(--surface);
    border-top: 1px solid var(--line); }
:where(.jcl-chrome) .footer-links-inner { max-width: 1360px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px; }
:where(.jcl-chrome) .footer-col h4 { font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--navy);
    margin-bottom: 12px; }
:where(.jcl-chrome) .footer-col h4.footer-col-sub { margin-top: 20px; }
:where(.jcl-chrome) .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
:where(.jcl-chrome) .footer-col li { font-size: 13px; color: var(--ink-soft);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .footer-col li:hover { color: var(--red); transform: translateX(2px); }
:where(.jcl-chrome) .footer-col-signup p { font-size: 12px; color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 12px;
    max-width: 260px; }
:where(.jcl-chrome) .footer-signup { display: flex;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 3px;
    background: var(--surface);
    max-width: 320px;
    transition: border-color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .footer-signup:focus-within { border-color: var(--navy); }
:where(.jcl-chrome) .footer-signup input { flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    padding: 8px 12px;
    font-family: 'Arimo', sans-serif;
    font-size: 13px;
    color: var(--ink); }
:where(.jcl-chrome) .footer-signup input::placeholder { color: var(--ink-soft); }
:where(.jcl-chrome) .footer-signup button { padding: 8px 16px;
    background: var(--navy); color: #fff;
    font-family: 'Arimo', sans-serif;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-smooth);
    white-space: nowrap; }
:where(.jcl-chrome) .footer-signup button:hover { background: var(--red); }
:where(.jcl-chrome) .footer-strip { background: var(--navy);
    color: #fff;
    padding: 28px 40px; }
:where(.jcl-chrome) .footer-strip-inner { max-width: 1360px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap; }
:where(.jcl-chrome) .footer-strip-brand { display: flex; align-items: center;
    gap: 20px;
    min-width: 0;
    flex: 1 1 auto; }
:where(.jcl-chrome) .footer-strip-brand img { height: 64px;
    filter: brightness(0) invert(1);
    flex-shrink: 0; }
:where(.jcl-chrome) .footer-strip-brand span { font-size: 14px;
    color: rgba(255,255,255,0.72);
    letter-spacing: -0.01em;
    line-height: 1.4;
    max-width: 340px; }
:where(.jcl-chrome) .footer-strip-links { display: flex; align-items: center; gap: 8px; }
:where(.jcl-chrome) .badge-pill { width: 36px; height: 36px;
    background: url('../images/demo/program-badge.png') center/cover;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 50%;
    transition: transform var(--dur-fast) var(--ease-smooth);
    cursor: pointer; }
:where(.jcl-chrome) .badge-pill:hover { transform: translateY(-2px); }
:where(.jcl-chrome) .social-icon { width: 36px; height: 36px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--dur-fast) var(--ease-smooth);
    cursor: pointer; }
:where(.jcl-chrome) .social-icon:hover { background: var(--surface); border-color: #fff; transform: translateY(-2px); }
:where(.jcl-chrome) .social-icon img { width: 16px; height: 16px;
    filter: brightness(0) invert(1);           
    transition: filter var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .social-icon:hover img { filter: brightness(0); }
@media (max-width: 1100px) {
  :where(.jcl-chrome) .svc-tile-grid { grid-template-columns: repeat(4, 1fr); grid-auto-flow: row; }
  :where(.jcl-chrome) .svc-tile-tall { grid-row: auto; }
  :where(.jcl-chrome) .svc-tile-wide { grid-column: span 2; }
  :where(.jcl-chrome) .footer-links-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 720px) {
  :where(.jcl-chrome) .notice-bar { padding: 0 16px; height: 32px; font-size: 12px; }
  :where(.jcl-chrome) .notice-text { font-size: 12px; }
  :where(.jcl-chrome) .top-links > span { display: none; }
  :where(.jcl-chrome) .header { padding: 0; height: 60px; }
  :where(.jcl-chrome) .brand { width: 100px; }
  :where(.jcl-chrome) .brand img { height: 36px; }
  :where(.jcl-chrome) .header-cell.get-card { min-width: 0; padding: 0 14px; font-size: 13px; }
  :where(.jcl-chrome) .header-cell.get-card > *:not(.card-badge) { display: none; }
  :where(.jcl-chrome) .search-bar { padding: 0 14px; }
  :where(.jcl-chrome) .search-bar input { font-size: 14px; }
  :where(.jcl-chrome) .search-bar .search-ico { width: 22px; height: 22px; }
  :where(.jcl-chrome) .main-nav { display: none; }
  :where(.jcl-chrome) .svc-tile-grid { grid-template-columns: repeat(2, 1fr); }
  :where(.jcl-chrome) .svc-tile { min-height: 110px; padding: 12px 14px; }
  :where(.jcl-chrome) .svc-tile-wide { grid-column: span 2; flex-direction: row; }
  :where(.jcl-chrome) .footer-strip-inner { flex-direction: column; align-items: flex-start; }
  :where(.jcl-chrome) .footer-links-inner { grid-template-columns: 1fr; }
  :where(.jcl-chrome) .footer-links { padding: 32px 20px 24px; }
  :where(.jcl-chrome) .footer-strip { padding: 16px 20px; }
}
:where(.jcl-chrome) .m-bb-0 { display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    grid-template-columns: repeat(4, 1fr); }
:where(.jcl-chrome) .m-bb-0 a { display: flex; flex-direction: column;
    align-items: center; gap: 3px;
    padding: 6px 4px;
    color: var(--ink-soft);
    text-decoration: none;
    font-family: var(--font-brand);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.02em; }
:where(.jcl-chrome) .m-bb-0 a .ic { font-size: 20px; line-height: 1; color: var(--navy); }
:where(.jcl-chrome) .m-bb-0 a.on { color: var(--red); }
:where(.jcl-chrome) .m-bb-0 a.on .ic { color: var(--red); }
@media (max-width: 720px) {
  :where(.jcl-chrome) .m-bb-0 { display: grid; }
  .jcl-chrome { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.jcl-chrome) *,
  :where(.jcl-chrome) *::before,
  :where(.jcl-chrome) *::after { animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important; }
}
html[data-theme="dark"] .jcl-chrome { --ink: #E4E6EB;
    --ink-muted: #B0B3B8;
    --ink-soft: #8A8D91;
    --surface: #18191A;
    --surface-alt: #242526;
    --surface-warm: #1E1F20;
    --line: rgba(255,255,255,0.10);
    --line-strong: rgba(255,255,255,0.16);
    --navy-dark: #0a3a8e;
    color-scheme: dark; }
html[data-theme="dark"] .jcl-chrome { background: var(--surface);
    color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .brand img { filter: brightness(0) invert(1); }
html[data-theme="dark"] :where(.jcl-chrome) .site-topbar,
html[data-theme="dark"] :where(.jcl-chrome) .main-nav,
html[data-theme="dark"] :where(.jcl-chrome) .header,
html[data-theme="dark"] :where(.jcl-chrome) .footer-links { background: var(--surface);
    color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .notice-bar { background: #101828; }
html[data-theme="dark"] :where(.jcl-chrome) .top-signup,
html[data-theme="dark"] :where(.jcl-chrome) .top-signup .lbl { background: #242847; color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .top-signup .fine { color: rgba(228,230,235,0.65); }
html[data-theme="dark"] :where(.jcl-chrome) .top-signup form { background: #1a1d2e; border-color: rgba(255,255,255,0.18); }
html[data-theme="dark"] :where(.jcl-chrome) .top-signup form input { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .top-signup form input::placeholder { color: #8A8D91; }
html[data-theme="dark"] :where(.jcl-chrome) .svc-tile,
html[data-theme="dark"] :where(.jcl-chrome) .footer-strip { background: var(--surface-alt);
    border-color: var(--line);
    color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .svc-tile:hover,
html[data-theme="dark"] :where(.jcl-chrome) .svc-tile:hover .svc-tile-title,
html[data-theme="dark"] :where(.jcl-chrome) .svc-tile:hover .svc-tile-sub { color: #fff; }
html[data-theme="dark"] :where(.jcl-chrome) .svc-tile-title { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .svc-tile-sub { color: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-chrome) .header-cell.get-card { background: var(--navy); color: #fff; }
html[data-theme="dark"] :where(.jcl-chrome) .search-bar { background: var(--surface-alt); border-color: var(--line-strong); color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .search-bar input { color: var(--ink); background: transparent; }
html[data-theme="dark"] :where(.jcl-chrome) .search-bar input::placeholder { color: var(--ink-soft); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup { background: var(--surface-alt); border-color: var(--line); box-shadow: 0 20px 44px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup h3 { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup p,
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup .fine { color: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup form { background: var(--surface-warm); border-color: rgba(255,255,255,0.18); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup form input { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup form input::placeholder { color: var(--ink-soft); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup .close:hover { background: rgba(255,255,255,0.08); color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .m-bb-0 { background: rgba(24,25,26,0.92); border-top-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] :where(.jcl-chrome) .m-bb-0 a { color: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-chrome) .m-bb-0 a .ic { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .m-bb-0 a.on,
html[data-theme="dark"] :where(.jcl-chrome) .m-bb-0 a.on .ic { color: var(--orange); }
html[data-theme="dark"] :where(.jcl-chrome) h1,
html[data-theme="dark"] :where(.jcl-chrome) h2,
html[data-theme="dark"] :where(.jcl-chrome) h3,
html[data-theme="dark"] :where(.jcl-chrome) h4 { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) p { color: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-chrome) a { color: inherit; }
html[data-theme="dark"] :where(.jcl-chrome) .footer-links a { color: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-chrome) .footer-links a:hover { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .svc-tile img,
html[data-theme="dark"] :where(.jcl-chrome) .nav-svc-grid img,
html[data-theme="dark"] :where(.jcl-chrome) .nav-drop-item img,
html[data-theme="dark"] :where(.jcl-chrome) .loc-arrow img,
html[data-theme="dark"] :where(.jcl-chrome) img[src*="vector-arrow"],
html[data-theme="dark"] :where(.jcl-chrome) img[src*="service-"] { filter: brightness(0) invert(0.88); }
html[data-theme="dark"] :where(.jcl-chrome) .svc-tile:hover img { filter: brightness(0) invert(1); }
html[data-theme="dark"] :where(.jcl-chrome) .svc-tile-title,
html[data-theme="dark"] :where(.jcl-chrome) .svc-tile-sub,
html[data-theme="dark"] :where(.jcl-chrome) .nav-drop-item .nd-title,
html[data-theme="dark"] :where(.jcl-chrome) .loc-addr,
html[data-theme="dark"] :where(.jcl-chrome) .footer-links h4,
html[data-theme="dark"] :where(.jcl-chrome) .footer-links a,
html[data-theme="dark"] :where(.jcl-chrome) a { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .svc-tile-sub,
html[data-theme="dark"] :where(.jcl-chrome) .nd-title + .nd-sub,
html[data-theme="dark"] :where(.jcl-chrome) .footer-links a,
html[data-theme="dark"] :where(.jcl-chrome) p { color: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-chrome) .brand-name,
html[data-theme="dark"] :where(.jcl-chrome) .brand-name small { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .search-bar,
html[data-theme="dark"] :where(.jcl-chrome) input[type="text"],
html[data-theme="dark"] :where(.jcl-chrome) input[type="email"],
html[data-theme="dark"] :where(.jcl-chrome) input[type="search"] { background: var(--surface-alt); color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] :where(.jcl-chrome) .search-bar input { background: transparent; color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) input::placeholder { color: var(--ink-soft); }
html[data-theme="dark"] :where(.jcl-chrome) .glyph,
html[data-theme="dark"] :where(.jcl-chrome) .ic { color: inherit; }
html[data-theme="dark"] :where(.jcl-chrome) [style*="color: var(--navy)"] { color: var(--ink) !important; }
html[data-theme="dark"] :where(.jcl-chrome) [style*="color:#052460"] { color: var(--ink) !important; }
html[data-theme="dark"] :where(.jcl-chrome) [style*="color: #052460"] { color: var(--ink) !important; }
html[data-theme="dark"] :where(.jcl-chrome) .search-ico,
html[data-theme="dark"] :where(.jcl-chrome) .search-bar img,
html[data-theme="dark"] :where(.jcl-chrome) img[src*="search.svg"],
html[data-theme="dark"] :where(.jcl-chrome) img[src*="vector-arrow"],
html[data-theme="dark"] :where(.jcl-chrome) img[src*="service-"],
html[data-theme="dark"] :where(.jcl-chrome) img[src*="facebook.svg"],
html[data-theme="dark"] :where(.jcl-chrome) img[src*="instagram.svg"],
html[data-theme="dark"] :where(.jcl-chrome) img[src*="youtube.svg"],
html[data-theme="dark"] :where(.jcl-chrome) img[src*="link.svg"] { filter: brightness(0) invert(0.88); }
html[data-theme="dark"] :where(.jcl-chrome) .search-bar { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .search-bar svg { color: var(--ink-muted); stroke: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-chrome) .header-cell.get-card { background: var(--navy); color: #fff; }
html[data-theme="dark"] :where(.jcl-chrome) .top-links,
html[data-theme="dark"] :where(.jcl-chrome) .top-links span { color: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-chrome) .top-links span:hover { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .footer-strip { background: var(--surface); color: var(--ink-muted); border-top-color: var(--line); }
html[data-theme="dark"] :where(.jcl-chrome) .footer-links { background: var(--surface); color: var(--ink); border-top-color: var(--line); }
html[data-theme="dark"] :where(.jcl-chrome) .footer-links h4 { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .footer-links a { color: var(--ink-muted); }
html[data-theme="dark"] :where(.jcl-chrome) .footer-links a:hover { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .brand img { filter: brightness(0) invert(1) !important; }
html[data-theme="dark"] :where(.jcl-chrome) .search-bar { background: var(--surface-alt); border-right-color: var(--line); }
html[data-theme="dark"] :where(.jcl-chrome) .search-bar .search-ico { filter: brightness(0) invert(0.85); opacity: 0.9; }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup .kicker { color: var(--orange); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup h3 { color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup form { background: var(--surface-warm); border-color: rgba(255,255,255,0.18); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup form input { color: var(--ink); background: transparent; }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup form input::placeholder { color: var(--ink-soft); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup form button { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
html[data-theme="dark"] :where(.jcl-chrome) .btm-signup form button:hover { background: rgba(255,255,255,0.08); border-color: var(--ink); }
html[data-theme="dark"] :where(.jcl-chrome) .top-signup .lbl .glyph { color: var(--orange); }
html[data-theme="dark"] :where(.jcl-chrome) .top-signup form button { background: var(--ink); color: var(--surface); }
html[data-theme="dark"] :where(.jcl-chrome) .top-signup form button:hover { background: var(--ink-muted); }
:where(.jcl-chrome) :focus-visible { outline: 3px solid #f5a623; outline-offset: 2px; }
body { zoom: var(--a11y-zoom, 1); }
:where(.jcl-chrome) .main-nav { height: 52px; }
:where(.jcl-chrome) .nav-item { font-size: 15px; padding: 0 13px; color: var(--ink); }
:where(.jcl-chrome) .main-nav .top-links { font-size: 15px; font-weight: 600; color: var(--ink-muted); gap: 20px; }
:where(.jcl-chrome) .main-nav .top-links > span:hover { color: var(--red); }
@media (max-width: 1240px) {
  :where(.jcl-chrome) .nav-item { padding: 0 9px; font-size: 14px; }
  :where(.jcl-chrome) .main-nav .top-links { font-size: 14px; gap: 14px; }
}
:where(.jcl-chrome) .header { height: 80px; }
:where(.jcl-chrome) .brand { width: auto; padding: 0 28px 0 22px; gap: 14px;
    justify-content: flex-start; text-decoration: none; }
:where(.jcl-chrome) .brand img { height: 66px; }
:where(.jcl-chrome) .brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: #fff; }
:where(.jcl-chrome) .brand-name { font-family: var(--font-brand); font-weight: 700; font-size: 19px; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; }
:where(.jcl-chrome) .header-cell.get-card { font-size: 17px; }
:where(.jcl-chrome) .m-head-btn { display: none; }
:where(.jcl-chrome) .notice-bar { min-height: 96px; padding: 0 32px; gap: 0;
    font-size: 20px; overflow: hidden; }
:where(.jcl-chrome) .notice-label { display: inline-flex; align-items: center; gap: 12px;
    flex-shrink: 0;
    padding: 9px 18px 9px 14px; margin-right: 28px;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28);
    font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
:where(.jcl-chrome) .notice-viewport { overflow: hidden; min-width: 0; }
:where(.jcl-chrome) .notice-track { display: flex; }
:where(.jcl-chrome) .notice-group { display: flex; align-items: center; gap: 26px; flex-shrink: 0; }
:where(.jcl-chrome) .notice-dup { display: none; }
:where(.jcl-chrome) .notice-text { font-size: 20px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
:where(.jcl-chrome) .notice-text b { color: #ffb38f; font-weight: 700; }
:where(.jcl-chrome) .notice-sep { opacity: 0.45; font-size: 10px; }
@media (max-width: 1240px) {
  :where(.jcl-chrome) .notice-text { font-size: 18px; }
  :where(.jcl-chrome) .notice-group { gap: 18px; }
}
html .jcl-chrome { --cat-kids: var(--navy); --cat-prog: var(--red); --cat-learn: #157347; --cat-author: #6b3fa8; }
html[data-a11yw-contrast="light"] :is(.jcl-chrome, .jcl-demo-page) { --ink: #000; --ink-muted: #000; --ink-soft: #1a1a1a;
    --line: rgba(0,0,0,0.55); --line-strong: #000;
    --surface: #fff; --surface-alt: #fff; --surface-warm: #fff;
    --navy: #00175a; --red: #b00012; }
html[data-a11yw-contrast="light"][data-theme="dark"] :is(.jcl-chrome, .jcl-demo-page) { --ink: #fff; --ink-muted: #fff; --ink-soft: #f0f0f0;
    --line: rgba(255,255,255,0.6); --line-strong: #fff;
    --surface: #000; --surface-alt: #000; --surface-warm: #000; }
html[data-a11yw-contrast="light"] :where(.jcl-chrome) .notice-bar { background: #000; border-bottom-color: #ffd400; }
html[data-a11yw-contrast="light"] :where(.jcl-chrome) .notice-text b { color: #ffd400; }
html[data-a11yw-contrast="light"] :where(.jcl-chrome) .svc-tile { border: 2px solid var(--ink) !important; box-shadow: none !important; }
html[data-a11yw-contrast="light"] :where(.jcl-chrome) a:not(.btn):not(.event-row):not(.book-card):not(.branch-card):not(.svc-tile):not(.agenda-row):not(.brand):not(.mc-day):not(.ev-pill):not(.m-drawer-cta) { text-decoration: underline; text-underline-offset: 3px; }
:where(.jcl-chrome) .m-drawer,
:where(.jcl-chrome) .m-drawer-backdrop { display: none; }
@media (max-width: 1100px) {
  :where(.jcl-chrome) .main-nav { display: none; }
  :where(.jcl-chrome) .header-cell.get-card { display: none; }
  :where(.jcl-chrome) .m-head-btn { display: inline-flex; align-items: center; justify-content: center;
        width: 64px; height: auto; align-self: stretch; min-height: 64px; background: var(--navy); color: #fff;
        border-left: 1px solid rgba(255,255,255,0.18); }
  :where(.jcl-chrome) .burger,
  :where(.jcl-chrome) .burger::before,
  :where(.jcl-chrome) .burger::after { display: block; width: 24px; height: 2.5px; background: #fff; position: relative; }
  :where(.jcl-chrome) .burger::before,
  :where(.jcl-chrome) .burger::after { content: ''; position: absolute; left: 0; }
  :where(.jcl-chrome) .burger::before { top: -8px; }
  :where(.jcl-chrome) .burger::after { top: 8px; }
  :where(.jcl-chrome) .notice-bar { min-height: 0; height: 72px; padding: 0 0 0 20px; }
  :where(.jcl-chrome) .notice-label { margin-right: 0; position: relative; z-index: 1; background: #0a2a6b; }
  :where(.jcl-chrome) .notice-viewport { flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); }
  :where(.jcl-chrome) .notice-track { width: max-content; animation: notice-ticker 26s linear infinite; }
  :where(.jcl-chrome) .notice-bar:hover .notice-track,
  :where(.jcl-chrome) .notice-bar:focus-within .notice-track,
  :where(.jcl-chrome) .notice-bar.is-paused .notice-track { animation-play-state: paused; }
  :where(.jcl-chrome) .notice-dup { display: flex; }
  :where(.jcl-chrome) .notice-group { gap: 22px; padding-left: 22px; }
  :where(.jcl-chrome) .m-drawer-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 150; }
  :where(.jcl-chrome) .m-drawer:not([hidden]) { display: flex; flex-direction: column;
        position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 360px); z-index: 160;
        background: var(--surface); color: var(--ink); overflow-y: auto;
        box-shadow: -10px 0 40px rgba(0,0,0,0.25); }
  :where(.jcl-chrome) .m-drawer-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  :where(.jcl-chrome) .m-drawer-title { font-family: var(--font-brand); font-weight: 700; font-size: 20px; }
  :where(.jcl-chrome) .m-drawer-close { width: 44px; height: 44px; font-size: 30px; line-height: 1; }
  :where(.jcl-chrome) .m-drawer-cta { margin: 16px 18px 8px; padding: 14px; text-align: center; background: var(--orange); color: #fff; font-weight: 700; font-size: 17px; }
  :where(.jcl-chrome) .m-drawer-list { list-style: none; padding: 4px 0; }
  :where(.jcl-chrome) .m-drawer-list a { display: block; padding: 15px 22px; font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--line); }
  /* Sections with pages under them: the label goes to the section, the arrow beside it opens its pages (chrome.js) */
  :where(.jcl-chrome) .m-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
  :where(.jcl-chrome) .m-row > a { flex: 1; min-width: 0; border-bottom: 0; }
  :where(.jcl-chrome) .m-sub-btn { display: flex; align-items: center; justify-content: center; flex: 0 0 56px; min-height: 52px;
        border-left: 1px solid var(--line); color: var(--ink-muted); background: none; }
  :where(.jcl-chrome) .m-sub-btn svg { width: 22px; height: 22px; transition: transform var(--dur-fast) var(--ease-smooth); }
  :where(.jcl-chrome) .m-sub-btn[aria-expanded="true"] { color: var(--navy); }
  :where(.jcl-chrome) .m-sub-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  :where(.jcl-chrome) .m-sub-btn:focus-visible { outline-offset: -4px; }
  :where(.jcl-chrome) .m-sub { list-style: none; margin: 0; padding: 4px 0 8px; background: var(--surface-alt); border-bottom: 1px solid var(--line); }
  :where(.jcl-chrome) .m-sub[hidden] { display: none; }
  :where(.jcl-chrome) .m-drawer-list .m-sub a { padding: 11px 22px 11px 34px; font-size: 16px; font-weight: 500; line-height: 1.35; border-bottom: 0; color: var(--ink); }
  :where(.jcl-chrome) .m-drawer-list a[aria-current="page"] { color: var(--navy); font-weight: 700; box-shadow: inset 4px 0 0 var(--navy); }
  html[data-theme="dark"] :where(.jcl-chrome) .m-sub-btn[aria-expanded="true"] { color: #8fb3ff; }
  html[data-theme="dark"] :where(.jcl-chrome) .m-drawer-list a[aria-current="page"] { color: #8fb3ff; box-shadow: inset 4px 0 0 #8fb3ff; }
}
@media (max-width: 720px) {
  :where(.jcl-chrome) .header { height: auto; flex-wrap: wrap; }
  :where(.jcl-chrome) .brand { flex: 1; width: auto; height: 64px; padding: 0 12px; gap: 10px; }
  :where(.jcl-chrome) .brand img { height: 48px; }
  :where(.jcl-chrome) .brand-name { font-size: 15px; white-space: normal; }
  :where(.jcl-chrome) .search-bar { order: 3; flex: 1 1 100%; height: 54px; border-top: 1px solid var(--line); }
  :where(.jcl-chrome) .notice-bar { min-height: 0; height: 58px; padding: 0 0 0 12px; font-size: 16px; }
  :where(.jcl-chrome) .notice-label { margin-right: 0; padding: 7px 10px; font-size: 12px; gap: 8px; position: relative; z-index: 1; background: #0a2a6b; }
  :where(.jcl-chrome) .notice-group { gap: 18px; padding-left: 18px; }
  :where(.jcl-chrome) .notice-text { font-size: 16px; }
  :where(.jcl-chrome) .top-signup { max-height: 220px; overflow: hidden; transition: max-height 600ms var(--ease), padding 600ms var(--ease), opacity 400ms var(--ease); }
  :where(.jcl-chrome) .top-signup.is-collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.jcl-chrome) .notice-track { animation: none !important; }
  :where(.jcl-chrome) .notice-dup { display: none !important; }
  :where(.jcl-chrome) .notice-viewport { overflow-x: auto; }
}
:where(.jcl-chrome) .header-cell.hdr-link { display: flex; align-items: center; gap: 10px;
    padding: 0 26px; border-left: 1px solid var(--line);
    font-size: 17px; font-weight: 700; color: var(--navy); white-space: nowrap;
    background: var(--surface);
    transition: background var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .header-cell.hdr-link svg { width: 24px; height: 24px; flex-shrink: 0; }
:where(.jcl-chrome) .header-cell.hdr-link:hover { background: var(--navy); color: #fff; }
html[data-theme="dark"] :where(.jcl-chrome) .header-cell.hdr-link { color: var(--ink); }
:where(.jcl-chrome) .nav-item,
:where(.jcl-chrome) .main-nav .top-links > span { white-space: nowrap; }
@media (max-width: 1100px) {
  :where(.jcl-chrome) .header-cell.hdr-link { padding: 0 16px; font-size: 15px; }
  :where(.jcl-chrome) .header-cell.hdr-link svg { display: none; }
}
@media (max-width: 720px) {
  :where(.jcl-chrome) .header-cell.hdr-link { display: none; }
}
html[data-a11yw-size] :where(.jcl-chrome) .main-nav { height: auto; flex-wrap: wrap; row-gap: 4px; padding-top: 6px; padding-bottom: 6px; }
html[data-a11yw-size] :where(.jcl-chrome) .nav-item { min-height: 40px; }
html[data-a11yw-size] :where(.jcl-chrome) .nav-primary { flex-wrap: wrap; }
html[data-a11yw-size] :where(.jcl-chrome) .header { flex-wrap: wrap; height: auto; min-height: 80px; }
@media (min-width: 1101px) {
  html[data-a11yw-size] :where(.jcl-chrome) .notice-bar { padding-top: 14px; padding-bottom: 14px; }
  html[data-a11yw-size] :where(.jcl-chrome) .notice-group { flex-wrap: wrap; row-gap: 6px; }
  html[data-a11yw-size] :where(.jcl-chrome) .notice-text { white-space: normal; }
  html[data-a11yw-size] :where(.jcl-chrome) .notice-viewport { flex: 1; }
  html[data-a11yw-size] :where(.jcl-chrome) .notice-group:not(.notice-dup) { flex-shrink: 1; width: 100%; }
}
html[data-a11yw-size] :where(.jcl-chrome) .header-cell.get-card { flex: 1 1 auto; min-height: 56px; }
@media (max-width: 720px) {
  :where(.jcl-chrome) .search-suggest-inner { grid-template-columns: 1fr !important; }
  :where(.jcl-chrome) .suggest-col { min-width: 0; }
  :where(.jcl-chrome) .suggest-tags { flex-wrap: wrap; }
}
:where(.jcl-chrome) a.nav-label { color: inherit; display: flex; align-items: center; height: 100%; }
:where(.jcl-chrome) .nav-item.is-current > .nav-label { color: var(--navy); box-shadow: inset 0 -2px 0 var(--orange); }
html[data-theme="dark"] :where(.jcl-chrome) .nav-item.is-current > .nav-label { color: var(--ink); }
:where(.jcl-chrome) .main-nav .top-links > a { cursor: pointer; color: inherit; transition: color var(--dur-fast) var(--ease-smooth); }
:where(.jcl-chrome) .main-nav .top-links > a:hover { color: var(--red); }
:where(.jcl-chrome) a.header-cell.get-card { color: #fff; text-decoration: none; }
:where(.jcl-chrome) .footer-col li a { color: inherit; }
:where(.jcl-chrome) .suggest-item[data-href] { cursor: pointer; }
:where(.jcl-chrome) .brand-locs { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.92); white-space: nowrap; }
:where(.jcl-chrome) .brand-locs i { font-style: normal; color: var(--orange); }
@media (max-width: 720px) {
  :where(.jcl-chrome) .brand-locs { font-size: 12px; letter-spacing: 0.02em; gap: 4px; }
}
@media (max-width: 360px) {
  :where(.jcl-chrome) .brand-locs { text-transform: none; letter-spacing: 0; }
}
@media (max-width: 1240px) {
  :where(.jcl-chrome) .brand-locs { flex-wrap: wrap; white-space: normal; max-width: 176px; row-gap: 2px; letter-spacing: 0.06em; }
  :where(.jcl-chrome) .brand-text { gap: 4px; }
}
@media (max-width: 720px) {
  :where(.jcl-chrome) .brand-locs { max-width: 170px; text-transform: none; letter-spacing: 0.01em; font-weight: 600; }
  :where(.jcl-chrome) .brand-text { gap: 3px; }
}
@media (max-width: 1240px) {
  :where(.jcl-chrome) .brand-locs i.mid { flex-basis: 100%; height: 0; overflow: hidden; }
}
@media (max-width: 1100px) and (min-width: 721px) {
  :where(.jcl-chrome) .header .search-bar { min-width: 0; flex: 1 1 0; }
  :where(.jcl-chrome) .header .search-bar input { min-width: 0; width: 100%; }
}
@media (max-width: 360px) {
  :where(.jcl-chrome) .brand-name { font-size: 14px !important; white-space: nowrap !important; }
  :where(.jcl-chrome) .brand { padding: 0 8px !important; gap: 8px !important; }
  :where(.jcl-chrome) .brand img { height: 40px !important; }
}
@media (min-width: 721px) {
  :where(.jcl-chrome) .brand-locs { font-size: 10.5px; letter-spacing: 0.03em; gap: 5px; flex-wrap: nowrap; white-space: nowrap; max-width: none; }
  :where(.jcl-chrome) .brand-locs i.mid { flex-basis: auto; height: auto; overflow: visible; }
  :where(.jcl-chrome) .brand { padding: 0 20px 0 18px; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  :where(.jcl-chrome) .brand-locs { flex-wrap: wrap; white-space: normal; max-width: 150px; }
  :where(.jcl-chrome) .brand-locs i.mid { flex-basis: 100%; height: 0; overflow: hidden; }
}
@media (max-width: 720px) {
  body:not(.home) :where(.jcl-chrome) .top-signup { display: none; }
}
html[data-theme="dark"] :where(.jcl-chrome) .nav-item.is-current > .nav-label { color: var(--ink); }
:where(.jcl-chrome) .kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent, var(--red)); margin-bottom: 10px; display: block; }
html[data-theme="dark"] :where(.jcl-chrome) .kicker { color: var(--orange); }

/* ==========================================================
   WordPress-only additions (not in the mockup)
   ========================================================== */
/* The template-part wrappers and .jcl-chrome draw nothing: the header and footer lay out as in the mockup */
.wp-block-template-part:has(> .jcl-chrome),
.jcl-chrome { display: contents; }

/* Mockup: [data-theme="dark"] body */
html[data-theme="dark"] body { background: #18191A; color: #E4E6EB; }

/* Skip link: hidden until it receives keyboard focus */
.jcl-skip-link {
  position: absolute;
  top: -200px;
  left: 16px;
  z-index: 1000;
  padding: 12px 18px;
  background: #052460;
  color: #fff;
  font: 700 16px/1.2 "Arimo", system-ui, sans-serif;
  text-decoration: underline;
}
.jcl-skip-link:focus { top: 8px; }

/* ---------- Locations menu: live branch status ---------- */
/* Filled in by chrome.js; a red dot while the branch is closed */
:where(.jcl-chrome) .loc-status:empty { display: none; }
:where(.jcl-chrome) .loc-status.is-closed::before { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
/* Dark mode: branch names and status were navy on a dark panel (the mockup has no dark colours for them) */
html[data-theme="dark"] :where(.jcl-chrome) .loc-name,
html[data-theme="dark"] :where(.jcl-chrome) .loc-status { color: var(--ink); }

/* ---------- Responsive fixes: widths where the mockup's header breaks ---------- */
/* Phones: the brand row grows instead of clipping its text (narrow screens, larger text, translations) */
@media (max-width: 720px) {
  :where(.jcl-chrome) .brand { height: auto; min-height: 64px; }
}
/* 361–399px: the mockup's compact brand (it starts at 360px), so the name stays on one line */
@media (min-width: 361px) and (max-width: 399px) {
  :where(.jcl-chrome) .brand { padding: 0 8px; gap: 8px; }
  :where(.jcl-chrome) .brand img { height: 40px; }
  :where(.jcl-chrome) .brand-name { font-size: 14px; white-space: nowrap; }
}
/* Below 340px the name wraps rather than pushing the menu button onto a second row */
@media (max-width: 339px) {
  :where(.jcl-chrome) .brand { min-width: 0; padding: 8px !important; }
  :where(.jcl-chrome) .brand-text { min-width: 0; }
  :where(.jcl-chrome) .brand-name { white-space: normal !important; }
}
/* The search icon keeps its shape when the search box is narrow */
:where(.jcl-chrome) .search-bar .search-ico { flex-shrink: 0; }
/* 721–860px: Catalog and Digital Library (both also in the menu) make room for the search box */
@media (min-width: 721px) and (max-width: 860px) {
  :where(.jcl-chrome) .header-cell.hdr-link { display: none; }
}
/* 1101–1199px: the Services menu tiles shrink to fit instead of running off the screen */
@media (min-width: 1101px) and (max-width: 1199px) {
  :where(.jcl-chrome) .nav-svc-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  :where(.jcl-chrome) .nav-svc-grid .svc-tile { min-width: 0; }
}
/* 721–1100px: search suggestions open across the whole header row, not just the narrow search box */
@media (min-width: 721px) and (max-width: 1100px) {
  :where(.jcl-chrome) .header { position: relative; }
  :where(.jcl-chrome) .header .search-bar { position: static; }
  :where(.jcl-chrome) .search-suggest { left: 0; right: 0; }
}
/* 1101px and up: when the search box is narrower than the mockup's 1440px one (smaller screens, larger
   text size), the suggestions keep that 450px panel instead of squeezing two columns into the box */
@media (min-width: 1101px) {
  :where(.jcl-chrome) .search-suggest { right: auto; width: max(calc(100% + 2px), 450px); }
}
/* The two suggestion columns share the panel's width; long words wrap inside it */
:where(.jcl-chrome) .search-suggest-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
:where(.jcl-chrome) .suggest-col { min-width: 0; overflow-wrap: anywhere; }
/* Larger text: the search box stays wide enough to show what's typed; the cells after it wrap instead */
@media (min-width: 721px) {
  html[data-a11yw-size] :where(.jcl-chrome) .header .search-bar { min-width: 240px; }
}
/* 1101px and up: the search box always keeps room to type in (it used to shrink to nothing next to longer labels,
   e.g. in Spanish). When the row is short of room, "Digital Library" and "Get Your Library Card" take two lines */
@media (min-width: 1101px) {
  :where(.jcl-chrome) .header .search-bar { min-width: 230px; }
  :where(.jcl-chrome) .header .search-bar input { min-width: 0; width: 100%; }
  :where(.jcl-chrome) .header-cell.hdr-link,
  :where(.jcl-chrome) .header-cell.get-card { white-space: normal; text-align: center; line-height: 1.2; text-wrap: balance; }
  :where(.jcl-chrome) .header-cell.get-card { min-width: 0; }
}
/* 1101–1240px: the header's link cells sit a little closer to their labels */
@media (min-width: 1101px) and (max-width: 1240px) {
  :where(.jcl-chrome) .header-cell.hdr-link,
  :where(.jcl-chrome) .header-cell.get-card { padding: 0 16px; }
}
/* 1101–1199px: Catalog and Digital Library drop their icons, as they do on tablets, so the labels keep their room */
@media (min-width: 1101px) and (max-width: 1199px) {
  :where(.jcl-chrome) .header-cell.hdr-link svg { display: none; }
}
/* Tablets and phones (≤1100px): the catalog search moves into the menu drawer; the
   header bar keeps the library name, Catalog and Digital Library (861–1100px) and the menu button */
@media (max-width: 1100px) {
  :where(.jcl-chrome) .header .search-bar { display: none; }
  :where(.jcl-chrome) .header .brand { margin-right: auto; }
  /* The drawer scrolls instead of squeezing its parts when it is taller than the screen */
  :where(.jcl-chrome) .m-drawer > * { flex-shrink: 0; }
  /* Drawer search: a field with a clear edge (3:1 against the drawer), the search icon, and a navy Go button */
  :where(.jcl-chrome) .m-drawer-search { position: relative; display: flex; align-items: center; margin: 20px 18px 8px; height: 58px;
      padding-left: 18px; border: 1px solid var(--ink-soft); background: var(--surface);
      transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
  :where(.jcl-chrome) .m-drawer-search:hover { border-color: var(--ink-muted); }
  :where(.jcl-chrome) .m-drawer-search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(5,36,96,0.22); }
  :where(.jcl-chrome) .m-drawer-search .m-search-ico { width: 22px; height: 22px; flex-shrink: 0; opacity: 0.6; }
  :where(.jcl-chrome) .m-drawer-search input { flex: 1; min-width: 0; height: 100%; padding: 0 12px 0 14px; border: 0; outline: none;
      background: transparent; color: var(--ink); font-family: 'Arimo', sans-serif; font-size: 17px; }
  :where(.jcl-chrome) .m-drawer-search input::placeholder { color: var(--ink-soft); opacity: 1; }
  :where(.jcl-chrome) .m-drawer-search input::-webkit-search-cancel-button { cursor: pointer; }
  :where(.jcl-chrome) .m-drawer-search button { display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      width: 58px; height: calc(100% + 2px); margin: -1px -1px -1px 0; background: var(--navy); color: #fff; cursor: pointer;
      transition: background var(--dur-fast) var(--ease); }
  :where(.jcl-chrome) .m-drawer-search button:hover { background: #0a3a8f; }
  :where(.jcl-chrome) .m-drawer-search button:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
  :where(.jcl-chrome) .m-drawer-search button svg { width: 24px; height: 24px; }
  :where(.jcl-chrome) .m-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  html[data-theme="dark"] :where(.jcl-chrome) .m-drawer-search { background: var(--surface-alt); }
  html[data-theme="dark"] :where(.jcl-chrome) .m-drawer-search:focus-within { border-color: #8fb3ff; box-shadow: 0 0 0 3px rgba(143,179,255,0.3); }
  html[data-theme="dark"] :where(.jcl-chrome) .m-drawer-search .m-search-ico { filter: brightness(0) invert(0.85); opacity: 0.8; }
  html[data-theme="dark"] :where(.jcl-chrome) .m-drawer-search button { background: #2a4f9e; }
  html[data-theme="dark"] :where(.jcl-chrome) .m-drawer-search button:hover { background: #3560b5; }
}
/* Phones (≤720px): the footer's last strip clears the fixed bottom bar (Search · Card · Events · Menu), so the social
   links aren't hidden behind it. The mockup pads <body>; here .jcl-chrome is display: contents, so the strip takes the room */
@media (max-width: 720px) {
  :where(.jcl-chrome) .footer-strip { padding-bottom: calc(16px + 76px + env(safe-area-inset-bottom)); }
}
/* Notice ribbon: one line that scrolls (a ticker) on every screen, as the mockup does below 1101px.
   Hovering, keyboard focus or a tap stops it (WCAG 2.2.2); with reduced motion it stays still and scrolls by hand. */
@media (min-width: 1101px) {
  :where(.jcl-chrome) .notice-bar { justify-content: flex-start; padding-right: 24px; }
  :where(.jcl-chrome) .notice-viewport { flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
  :where(.jcl-chrome) .notice-track { width: max-content; animation: notice-ticker 26s linear infinite; }
  :where(.jcl-chrome) .notice-bar:hover .notice-track,
  :where(.jcl-chrome) .notice-bar:focus-within .notice-track,
  :where(.jcl-chrome) .notice-bar.is-paused .notice-track { animation-play-state: paused; }
  :where(.jcl-chrome) .notice-dup { display: flex; }
  :where(.jcl-chrome) .notice-group { padding-left: 26px; }
  /* larger text keeps the single scrolling line too */
  html[data-a11yw-size] :where(.jcl-chrome) .notice-track .notice-group:not(.notice-dup) { flex-wrap: nowrap; width: auto; flex-shrink: 0; }
  html[data-a11yw-size] :where(.jcl-chrome) .notice-track .notice-text { white-space: nowrap; }
}
/* the same reading speed on every screen: chrome.js sets the loop's length from the notices' width */
:where(.jcl-chrome) .notice-track { animation-duration: var(--ticker-duration, 26s); }
:where(.jcl-chrome) .notice-viewport:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* 1101–1150px: the top menu's links keep to one line ("About Us", not "About / Us") with slightly tighter spacing */
:where(.jcl-chrome) .main-nav .top-links > a { white-space: nowrap; }
/* The menu's two groups never touch ("Locations ⌄About Us") */
@media (min-width: 1101px) {
  :where(.jcl-chrome) .main-nav { column-gap: 12px; }
}
@media (min-width: 1101px) and (max-width: 1150px) {
  :where(.jcl-chrome) .main-nav { padding: 0 12px; }
  :where(.jcl-chrome) .nav-item { padding: 0 7px; }
  :where(.jcl-chrome) .main-nav .top-links { gap: 10px; }
}
/* Spanish labels are longer ("Genealogía e historia local", "Sobre nosotros"): from 1101px to 1439px the menu's
   text and spacing grow with the screen, so the whole menu stays on one line */
@media (min-width: 1101px) and (max-width: 1439px) {
  html[lang^="es"] :where(.jcl-chrome) .main-nav { padding: 0 12px; }
  html[lang^="es"] :where(.jcl-chrome) .nav-item { padding: 0 clamp(4px, calc(4px + (100vw - 1101px) * 0.0266), 13px);
      font-size: clamp(13px, calc(13px + (100vw - 1101px) * 0.0059), 15px); }
  html[lang^="es"] :where(.jcl-chrome) .main-nav .top-links { gap: clamp(6px, calc(6px + (100vw - 1101px) * 0.0414), 20px);
      font-size: clamp(13px, calc(13px + (100vw - 1101px) * 0.0059), 15px); }
}
/* "Get Your Library Card" and the drawer button: a deeper orange so the white text reaches WCAG AA (4.6:1) */
:where(.jcl-chrome) .header-cell.get-card { background: linear-gradient(135deg, #d93a00 0%, #b5300a 100%); }
:where(.jcl-chrome) .header-cell.get-card:hover { background: linear-gradient(135deg, #c43500 0%, #9e2a08 100%); }
:where(.jcl-chrome) .m-drawer-cta { background: #d93a00; }
/* Branch names kept untranslated inside a sentence (chrome.js wraps them in <jcl-name>): no box of their own,
   so they never change layout, not even inside flex buttons */
jcl-name { display: contents; }
/* Menu arrows: flipped up (menu open / hover), the two-border chevron's point sits about 3px above the label's
   middle, so it moves down by that much; the closed arrow keeps the mockup's position. Same function list in
   both states so the flip animates as a plain rotation. */
:where(.jcl-chrome) .nav-item .caret { transform: translateY(0) rotate(45deg) translateY(-2px); }
:where(.jcl-chrome) .nav-item:hover .caret,
:where(.jcl-chrome) .nav-item.is-open .caret { transform: translateY(3px) rotate(225deg) translateY(0); }
/* Notice ribbon while the whole library is closed: the "Today" dot turns red and stops pulsing (chrome.js) */
:where(.jcl-chrome) .notice-bar.is-closed .dot { background: #e5484d; box-shadow: 0 0 0 5px rgba(229,72,77,0.24); animation: none; }


/* ---------- Accessibility: the Accessibility Widget plugin (plugins/a11y-widget) ----------
   Its button and panel live in their own Shadow DOM; it sets data-a11yw-* on <html> for each setting the visitor
   turns on and applies them to the whole page. These rules suit this site's own parts to those settings. */
/* Visually hidden text (labels for screen readers) */
:where(.jcl-chrome) .a11y-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The page's last strip leaves room under its logo and links, so the round button never covers them */
:where(.jcl-chrome) .footer-strip { padding-bottom: 96px; }
@media (max-width: 720px) {
  /* Phones: the button sits above the bottom bar (Search · Card · Events · Menu) */
  :where(.jcl-chrome) .footer-strip { padding-bottom: calc(16px + 76px + 64px + env(safe-area-inset-bottom)); }
}
/* Bigger Text zooms the page: the zoom as a variable, so widths in vw can be divided by it */
html[data-a11yw-size="1.1"] { --a11y-zoom: 1.1; }
html[data-a11yw-size="1.2"] { --a11y-zoom: 1.2; }
html[data-a11yw-size="1.3"] { --a11y-zoom: 1.3; }
/* The phone/tablet menu drawer: at Bigger Text it was wider than a phone screen */
:where(.jcl-chrome) .m-drawer:not([hidden]) { width: min(360px, calc(88vw / var(--a11y-zoom, 1))); }
/* With the button on the right, the newsletter box moves to the left corner so the two never overlap */
html[data-a11yw-side="right"] :where(.jcl-chrome) .btm-signup { right: auto; left: 20px; }
/* Text Spacing: a book's title and author show in full (more lines) instead of being cut off with "…" */
html[data-a11yw-spacing] :where(.jcl-demo-page) .book-info .title { display: block; -webkit-line-clamp: unset; overflow: visible; }
html[data-a11yw-spacing] :where(.jcl-demo-page) .book-info .author { white-space: normal; overflow: visible; }
/* Pause Animations: the notice ribbon stands still and scrolls by hand */
html[data-a11yw-motion] :where(.jcl-chrome) .notice-track { animation: none !important; }
html[data-a11yw-motion] :where(.jcl-chrome) .notice-dup { display: none !important; }
html[data-a11yw-motion] :where(.jcl-chrome) .notice-viewport { overflow-x: auto; }
/* Hide Images: the library logo stays; photos used as backgrounds become a plain dark tile so white text on them stays readable */
html[data-a11yw-images] body .jcl-chrome :is(.brand, .footer-strip-brand) img { opacity: 1 !important; }
html[data-a11yw-images] :is(.jcl-chrome, .jcl-demo-page) [style*="background-image:url"] { background-color: #4a5163 !important; }