/* ============================================================
   BEA — Advanced / Custom CSS (the "advanced CSS area")
   Loaded LAST, so anything here overrides bea-theme.css.
   Put one-off tweaks and client-specific overrides HERE — never
   edit the parent theme, and avoid editing bea-theme.css for
   small page-level adjustments.
   (In WP you also have Appearance → Customize → Additional CSS.)
   ============================================================ */

/* Example override (commented):
   :root { --gold: #F5E11A; }            // nudge the brand gold
   .section { padding: 72px 0; }          // tighten section rhythm
*/

/* ------------------------------------------------------------
   Make the HTML `hidden` attribute actually win.
   The browser's default [hidden]{display:none} is only (0,1,0),
   so component rules like .mcard .more{display:inline-flex} (0,2,0)
   override it and the element stays visible. This restores it.
   Used by: the "Take the survey" link on the home page Fiber card
   (front-page.php, data-bea-pending="fiber-survey") — hidden until
   BEA supplies the survey URL.
   ------------------------------------------------------------ */
[hidden] { display: none !important; }

/* ------------------------------------------------------------
   Card action row — two or more .more links side by side.
   The theme styles a single .more as inline-flex; two of them in
   a row would sit on a collapsed whitespace gap and, on a phone,
   land too close together to tap accurately. Own class, own
   prefix, so nothing the theme already owns is redeclared.
   Used by: home page Residential Solar card (front-page.php).
   ------------------------------------------------------------ */
.bea-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
}

/* WCAG 2.5.5 — 44px minimum tap target on touch pointers. Applied
   only where the pointer is coarse so the desktop layout is
   unchanged; negative margin keeps the text on its original
   baseline while the hit area grows around it. */
@media (pointer: coarse) {
    .bea-card-actions .more {
        min-height: 44px;
        padding-block: 10px;
        margin-block: -10px;
    }
}


/* BEA — mobile header logo fit (2026-09-29)
   Desktop is untouched. On phones the logo grows to fill whatever space is
   left beside the theme toggle, Pay Bill and menu buttons, up to its full
   mobile size, so the header never pushes off the right edge. */
@media (max-width:760px){
  .nav .brand{flex:1 1 auto;min-width:0;}
  .nav .brand-logo{height:auto;width:100%;max-width:233px;max-height:112px;object-fit:contain;object-position:left center;}
}
/* Footer: the logo shrinks to its column instead of squeezing the other columns
   on tablets / small laptops. Full size (124px desktop, 84px phone) otherwise. */
.foot-brand{min-width:0;}
.foot-brand .brand-logo{max-width:100%;height:auto;max-height:124px;}
@media (max-width:760px){
  .foot-brand .brand-logo{max-height:84px;}
}
@media (max-width:480px){
  .nav{padding:0 14px;gap:10px;}
  .nav-right{gap:8px;}
  .nav-right .btn-sm{padding:9px 12px;}
}
/* Phones/tablets: the light/dark switch lives inside the ☰ menu (bea-ui.js
   moves it there), as the FIRST row, with full-size 44px tap targets. No text label: the
   sun/moon icons say it, and screen readers hear "Color theme". */
@media (max-width:900px){
  .menu>li.menu-theme{display:flex;align-items:center;padding:12px 4px;}
  .menu-theme .toggle button{width:44px;height:44px;}
  .menu-theme .toggle button svg{width:18px;height:18px;}
}
/* Phones/tablets: menu sections (About, Account, Operations, Contact) start
   collapsed and open on tap, with a chevron that flips. Keeps the menu short. */
@media (max-width:900px){
  .menu>li.menu-theme{border-bottom:1px solid var(--divider);}
  .menu{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .menu>li.menu-item-has-children>.sub-menu{display:none;}
  .menu>li.menu-item-has-children.expanded>.sub-menu{display:block;}
  .menu>li.menu-item-has-children>a{display:flex;}
  .menu>li.menu-item-has-children>a::after{content:"";position:static;left:auto;right:auto;bottom:auto;background:none;border-radius:0;width:8px;height:8px;margin-right:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s;flex:none;}
  .menu>li.menu-item-has-children.expanded>a::after{transform:rotate(-135deg) translate(-2px,-1px);}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .menu>li.menu-item-has-children>a::after{transition:none;}
}
/* Footer bottom row on phones: copyright on its own line, then the four policy
   links as a tidy 2x2 grid of 44px buttons (the " · " separators are hidden
   here, since they were wrapping onto the start of the next line). */
@media (max-width:760px){
  .foot-bottom{flex-direction:column;align-items:stretch;gap:14px;text-align:center;}
  .foot-bottom>span:last-child{font-size:0;display:flex;flex-wrap:wrap;margin:-4px;}
  .foot-bottom>span:last-child a{flex:1 1 calc(50% - 8px);margin:4px;box-sizing:border-box;font-size:13.5px;line-height:1.25;display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:6px 10px;border:1px solid var(--divider);border-radius:10px;background:var(--badge-bg);text-decoration:none;}
  .foot-bottom>span:last-child a:hover,.foot-bottom>span:last-child a:focus-visible{color:var(--link-hover);border-color:currentColor;}
}
/* Call-to-action buttons (e.g. "Power out?" Call / View Outage Map): always the
   same size as each other, centered text and icon, and the phone number never
   breaks across two lines. Desktop: side by side, equal width. Phones: stacked,
   full width, equal height. */
.cta-btns{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;justify-content:center;}
.cta-btns .btn{justify-content:center;text-align:center;white-space:nowrap;min-height:48px;box-sizing:border-box;}
.cta-btns .btn-gold{border:1px solid transparent;} /* match the outlined button's 1px border so heights are identical */
@media (max-width:560px){
  .cta-btns{display:grid;grid-auto-flow:row;grid-template-columns:1fr;justify-content:stretch;width:100%;max-width:340px;margin:0 auto;gap:12px;}
  .cta-btns .btn{width:100%;padding:14px 18px;}
}
/* Live System Status panel: the ".band p" paragraph spacing (26px) was also
   landing on the "View the live outage map" link, leaving an empty strip at the
   bottom of the box. The link keeps its 44px tap height. */
.band .panel .panel-link{margin-bottom:0;}
/* Scrollbar: slim, in the site's navy (light) / steel blue (dark), on the page
   background, so it no longer looks like a plain gray Windows bar. Phones and
   Macs hide scrollbars until scrolling, so this mostly shows on Windows. */
:root{--sb-thumb:#5A6E8C;--sb-thumb-hover:#223055;--sb-track:#ECF1F9;}
[data-theme="dark"]{--sb-thumb:#3E5578;--sb-thumb-hover:#7F9CBC;--sb-track:#080C1A;color-scheme:dark;}
@supports (scrollbar-color:auto){
  html{scrollbar-color:var(--sb-thumb) var(--sb-track);scrollbar-width:thin;}
}
@supports not (scrollbar-color:auto){
  ::-webkit-scrollbar{width:11px;height:11px;}
  ::-webkit-scrollbar-track{background:var(--sb-track);}
  ::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:10px;border:3px solid var(--sb-track);}
  ::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);}
}
/* Back-to-top arrow (bea-ui.js adds it on long pages). Navy in light mode,
   gold in dark mode, with a ring that fills as you scroll down the page. It
   rises above the footer's bottom row so it never covers those links. */
.bea-top{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:150;
  width:52px;height:52px;border-radius:50%;border:none;padding:0;cursor:pointer;display:grid;place-items:center;
  color:var(--accent-text);background:conic-gradient(var(--gold) calc(var(--p,0)*1%),rgba(255,255,255,.28) 0);
  box-shadow:var(--card-lift);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s,bottom .15s linear;}
.bea-top::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);transition:background .2s;}
.bea-top svg{position:relative;width:22px;height:22px;transition:transform .2s;}
.bea-top.show{opacity:1;visibility:visible;transform:none;}
.bea-top:hover{transform:translateY(-3px);}
.bea-top:hover::before{background:var(--gold-hover);}
.bea-top:hover{color:var(--gold-text);}
.bea-top:hover svg{transform:translateY(-2px);}
.bea-top:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;}
[data-theme="dark"] .bea-top{background:conic-gradient(#fff calc(var(--p,0)*1%),rgba(255,255,255,.18) 0);}
@media (max-width:760px){
  .bea-top{width:46px;height:46px;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));}
  .bea-top svg{width:20px;height:20px;}
}
@media (prefers-reduced-motion:reduce){
  .bea-top,.bea-top::before,.bea-top svg{transition:none;}
  .bea-top:hover,.bea-top:hover svg{transform:none;}
}
@media print{.bea-top{display:none;}}

/* About page — "Our History" (2026-09-29). Intro on the left, a glass-card
   timeline on the right; stacks on phones. Theme tokens only, so light and
   dark mode follow automatically. The year labels use --eyebrow (navy on
   light, gold on dark) so small text stays readable in both. */
.bea-hist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;}
.bea-hist .sec-head{margin-bottom:22px;}
.bea-hist .sec-head h2{text-wrap:balance;}
.bea-hist .sec-head p,.bea-hist-mission{text-wrap:pretty;}
.bea-hist-mission{font-size:16px;line-height:1.7;color:var(--text2);max-width:520px;margin:0;}
.bea-tl{list-style:none;margin:0;padding:32px 30px;position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:22px;box-shadow:var(--card-shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);}
.bea-tl li{position:relative;padding:0 0 28px 38px;}
.bea-tl li:last-child{padding-bottom:0;}
.bea-tl li::before{content:"";position:absolute;left:5px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--badge-bg);}
.bea-tl li:not(:last-child)::after{content:"";position:absolute;left:11px;top:26px;bottom:2px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--gold),var(--divider));}
.bea-tl-yr{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow);margin-bottom:4px;}
.bea-tl h3{font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--text1);margin:0 0 6px;text-wrap:balance;}
.bea-tl p{font-size:14.5px;line-height:1.6;color:var(--text2);margin:0;text-wrap:pretty;}
@media (max-width:860px){
  .bea-hist{grid-template-columns:1fr;gap:32px;}
  .bea-tl{padding:26px 22px;}
}

/* ---- TVA Info page (2026-09-29) ---- */
.tva-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:40px;margin-top:48px;padding:32px 48px;border-radius:28px;background:var(--ombre-band);box-shadow:var(--card-shadow);}
.tva-hero .glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(ellipse,rgba(232,185,35,.16),transparent 70%);top:-60%;right:-4%;pointer-events:none;}
.tva-hero > *:not(.glow){position:relative;z-index:1;}
.tva-hero .tva-logo-link{display:block;width:160px;color:#fff;border-radius:12px;padding:10px;transition:color .2s ease,transform .25s ease;}
.tva-hero .tva-logo-link:hover{color:#E8B923;transform:translateY(-2px);}
.tva-hero-copy{padding-left:48px;border-left:1px solid rgba(255,255,255,.16);}
.tva-hero .eyebrow{color:#E8B923;}
.tva-hero h3{font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.4px;color:#fff;margin:6px 0 8px;text-wrap:balance;}
.tva-hero p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.8);margin:0;max-width:520px;text-wrap:pretty;}
.tva-hero .btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap;}
[data-theme="dark"] .tva-hero{background:linear-gradient(120deg,rgba(28,46,80,.72) 0%,rgba(19,32,59,.6) 55%,rgba(40,34,20,.55) 100%);border:1px solid rgba(232,185,35,.28);box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
[data-theme="dark"] .tva-hero .glow{background:radial-gradient(ellipse,rgba(232,185,35,.22),transparent 70%);}
.tva-logo{display:block;width:100%;height:auto;}
.tva-hero + .stats{margin-top:32px;}
.tva-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.tva-link-card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:26px 24px 0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--card-shadow);transition:transform .3s,box-shadow .3s;}
.tva-link-card:hover{transform:translateY(-4px);box-shadow:var(--card-lift);}
.tva-link-card > .ti{width:44px;height:44px;border-radius:12px;background:var(--ico-bg);color:var(--accent);font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.tva-link-card h3{font-size:17px;font-weight:700;color:var(--text1);margin:0 0 8px;text-wrap:balance;}
.tva-link-card p{flex:1;font-size:14.5px;line-height:1.6;color:var(--text2);margin:0 0 20px;text-wrap:pretty;}
.tva-go{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;margin:0 -24px;padding:0 24px;border-top:1px solid var(--card-border);font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;}
.tva-go::after{content:"";position:absolute;inset:0;border-radius:18px;}
.tva-go .ti{font-size:18px;transition:transform .25s ease;}
.tva-link-card:hover .tva-go{text-decoration:underline;text-underline-offset:3px;}
.tva-link-card:hover .tva-go .ti{transform:translate(2px,-2px);}
.tva-logo-link:focus-visible,.tva-go:focus-visible{outline:none;}
.tva-logo-link:focus-visible{box-shadow:0 0 0 3px #E8B923;}
.tva-go:focus-visible::after{box-shadow:0 0 0 3px var(--accent);}
@media (max-width:1100px){.tva-links{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:980px){
  .tva-hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:24px;padding:40px 28px;}
  .tva-hero-copy{padding-left:0;border-left:0;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);}
  .tva-hero .eyebrow{justify-content:center;}
  .tva-hero p{margin:0 auto;}
  .tva-hero .tva-logo-link{width:140px;}
}
@media (max-width:560px){.tva-links{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){
  .tva-link-card,.tva-hero .tva-logo-link,.tva-go .ti{transition:none;}
  .tva-link-card:hover,.tva-hero .tva-logo-link:hover{transform:none;}
  .tva-link-card:hover .tva-go .ti{transform:none;}
}

/* Sitewide hover for phone + directions links (2026-09-30).
   Matches by href so any current or future tel: / Maps-directions link gets it.
   Buttons, tiles, nav phone and announce bar keep their own hover rules. */
a[href^="tel:"]:not([class*="btn"]):not(.qtile):not(.nav-phone),
a[href*="google.com/maps/dir"]:not([class*="btn"]):not(.qtile){transition:color .2s ease;}
a[href^="tel:"]:not([class*="btn"]):not(.qtile):not(.nav-phone):hover,
a[href^="tel:"]:not([class*="btn"]):not(.qtile):not(.nav-phone):focus-visible,
a[href*="google.com/maps/dir"]:not([class*="btn"]):not(.qtile):hover,
a[href*="google.com/maps/dir"]:not([class*="btn"]):not(.qtile):focus-visible{color:var(--link-hover);}
/* Always-dark surfaces (hero "Verify a BEA Visit" panel, page-head band): gold, as the breadcrumb does.
   !important because the page markup carries an inline color:#fff. */
.bea-verify a[href^="tel:"]:hover,.bea-verify a[href^="tel:"]:focus-visible,
.bea-verify a[href*="google.com/maps/dir"]:hover,.bea-verify a[href*="google.com/maps/dir"]:focus-visible,
.page-head a[href^="tel:"]:not([class*="btn"]):hover,.page-head a[href*="google.com/maps/dir"]:not([class*="btn"]):hover{color:#E8B923!important;}
/* A phone number never breaks across lines: "(731) 658-5257" has a space the browser would otherwise wrap at. */
a[href^="tel:"]{white-space:nowrap;}
@media (prefers-reduced-motion:reduce){a[href^="tel:"],a[href*="google.com/maps/dir"]{transition:none;}}

/* Menus slide down instead of popping (2026-09-30).
   Desktop: the dropdown is revealed top-to-bottom with a clip-path wipe.
   Phones: the section sub-menus open like an accordion (max-height). */
@media (min-width:901px){
  .sub-menu{transform:translateY(-6px);clip-path:inset(0 -24px 100% -24px);transition:clip-path .3s ease,opacity .2s ease,transform .3s ease,visibility 0s linear .3s;}
  .nav-links>li:hover>.sub-menu,.nav-links>li:focus-within>.sub-menu{clip-path:inset(0 -24px -40px -24px);transition-delay:0s;}
}
@media (max-width:900px){
  .menu>li.menu-item-has-children>.sub-menu{display:block;max-height:0;overflow:hidden;visibility:hidden;padding-top:0;padding-bottom:0;transition:max-height .3s ease,padding .3s ease,visibility 0s linear .3s;}
  .menu>li.menu-item-has-children.expanded>.sub-menu{max-height:800px;visibility:visible;padding-top:2px;padding-bottom:10px;transition-delay:0s;}
}
@media (prefers-reduced-motion:reduce){
  .sub-menu,.menu>li.menu-item-has-children>.sub-menu{transition:none !important;}
}


/* ============================================================
   BEA — Home page cards polish (2026-09-30)
   .gcard (What we offer) and .mcard (Programs). Layout-only:
   colors all come from the theme tokens so light/dark both work.
   - Cards in a row stretch to equal height; the link row is pinned
     to the bottom of every card, so links line up across cards
     no matter how long the copy is.
   - Footer row = hairline divider, link on the left, arrow chip on
     the right; chip fills gold on hover/focus.
   Rollback: bea-custom.BEFORE-cards-20260930.css
   ============================================================ */

/* shared: arrow chip + footer row */
.gcard .more,
.mcard .more { font-size: 14.5px; line-height: 1.3; }
.gcard .more svg,
.mcard .more svg {
    box-sizing: content-box; width: 14px; height: 14px; padding: 6px;
    border-radius: 50%; background: var(--ico-bg); flex-shrink: 0;
    transition: background .25s, transform .25s, stroke .25s;
}
.gcard .more:hover svg,
.mcard .more:hover svg,
.gcard .more:focus-visible svg,
.mcard .more:focus-visible svg {
    background: var(--gold); stroke: #0D1A30; transform: translateX(3px);
}
.gcard .more:focus-visible,
.mcard .more:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 8px; }

/* What we offer (.gcard) */
.cards3 { align-items: stretch; }
.gcard { display: flex; flex-direction: column; padding: 32px 30px 26px; }
.gcard::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--ombre-gold); opacity: 0; transition: opacity .3s;
}
.gcard:hover::before { opacity: 1; }
.gcard .ico {
    width: 56px; height: 56px; border-radius: 16px; margin-bottom: 22px;
    background: linear-gradient(145deg, var(--ico-bg), transparent);
    border: 1px solid var(--divider);
}
.gcard .ico svg { width: 25px; height: 25px; }
.gcard h3 { font-size: 20px; margin-bottom: 10px; }
.gcard p, .mcard p { text-wrap: wrap; }
.gcard p { flex: 1 1 auto; font-size: 15px; line-height: 1.65; margin-bottom: 22px; }
.gcard .more {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding-top: 16px; border-top: 1px solid var(--divider);
}

/* Programs (.mcard) */
.cards2 { align-items: stretch; gap: 26px; }
.mcard .media {
    position: relative; overflow: hidden; width: 168px;
    background:
        radial-gradient(circle at 50% 50%, rgba(232,185,35,.20), transparent 62%),
        var(--ombre-navy);
}
.mcard .media::before,
.mcard .media::after {
    content: ''; position: absolute; left: 50%; top: 50%; border-radius: 50%;
    border: 1px solid rgba(232,185,35,.22); transform: translate(-50%, -50%);
    pointer-events: none;
}
.mcard .media::before { width: 118px; height: 118px; }
.mcard .media::after  { width: 176px; height: 176px; border-color: rgba(232,185,35,.10); }
.mcard .media svg {
    position: relative; z-index: 1; box-sizing: content-box;
    width: 30px; height: 30px; padding: 17px; border-radius: 50%;
    background: rgba(232,185,35,.12); border: 1px solid rgba(232,185,35,.40);
    box-shadow: 0 0 28px rgba(232,185,35,.25);
}
.mcard .body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 32px 34px 26px; }
.mcard h3 { font-size: 22px; letter-spacing: -.3px; margin-bottom: 10px; }
.mcard p { flex: 1 1 auto; font-size: 15.5px; line-height: 1.65; margin-bottom: 22px; }
.mcard .bea-card-actions { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--divider); gap: 10px 28px; }

@media (max-width: 1180px) {
    .mcard .media { width: 120px; }
    .mcard .media::before { width: 88px; height: 88px; }
    .mcard .media::after  { width: 132px; height: 132px; }
    .mcard .media svg { width: 26px; height: 26px; padding: 13px; }
    .mcard .body { padding: 28px 26px 22px; }
}
@media (max-width: 900px) {
    .cards2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .mcard .media { width: 84px; }
    .mcard .media::before { width: 70px; height: 70px; }
    .mcard .media::after  { width: 104px; height: 104px; }
    .mcard .media svg { width: 22px; height: 22px; padding: 11px; }
    .mcard .body { padding: 24px 22px 20px; }
    .mcard h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .gcard .more svg, .mcard .more svg, .gcard::before { transition: none; }
    .gcard .more:hover svg, .mcard .more:hover svg { transform: none; }
}


/* ============================================================
   BEA — Card system, all pages (2026-09-30)
   One family: same radius, same icon tile, same hover, same
   equal-height behavior. Low specificity on purpose so page-level
   <style> blocks (payment options, policies) still win where they
   set their own grid.  Rollback: bea-custom.BEFORE-cards-20260930.css
   ============================================================ */

/* ---- .infocard : icon tile + title + text (About, Staff, Spec sheets, Billing, Policies…) ---- */
.infogrid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: stretch; }
.bea-pay-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.infocard {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    border-radius: 18px; padding: 26px 26px 24px;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}
.infocard::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--ombre-gold); opacity: 0; transition: opacity .3s;
}
.infocard:hover::before { opacity: 1; }
.infocard > .ti:first-child,
.tva-link-card > .ti:first-child {
    display: grid; place-items: center; flex-shrink: 0;
    width: 52px; height: 52px; margin: 0 0 18px; border-radius: 15px;
    font-size: 24px; line-height: 1; color: var(--accent);
    background: linear-gradient(145deg, var(--ico-bg), transparent);
    border: 1px solid var(--divider);
    transition: transform .3s, background .3s;
}
.infocard:hover > .ti:first-child { transform: scale(1.06); }
.infocard h3 { font-size: 18px; letter-spacing: -.2px; line-height: 1.25; margin-bottom: 8px; }
.infocard p { font-size: 15px; line-height: 1.65; }
.infocard p + p { margin-top: 8px; }
.infocard a { text-underline-offset: 3px; }

/* compact person / label cards: only when EVERY card in the grid is icon + title + one paragraph,
   so a mixed grid (About → Governance) stays one consistent stacked style */
.infogrid:not(:has(.infocard:not(:has(> .ti:first-child + h3 + p:last-child)))) > .infocard {
    display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; align-content: start;
    padding: 20px 22px;
}
.infogrid:not(:has(.infocard:not(:has(> .ti:first-child + h3 + p:last-child)))) > .infocard > .ti:first-child { grid-row: 1 / span 2; margin: 0; align-self: start; }
.infogrid:not(:has(.infocard:not(:has(> .ti:first-child + h3 + p:last-child)))) > .infocard > h3 { grid-column: 2; margin: 2px 0 4px; align-self: start; }
.infogrid:not(:has(.infocard:not(:has(> .ti:first-child + h3 + p:last-child)))) > .infocard > p  { grid-column: 2; margin: 0; align-self: start; font-size: 14px; }

/* ---- .stat ---- */
.stat { position: relative; overflow: hidden; padding: 32px 22px 28px; transition: transform .3s, box-shadow .3s; }
.stat::before {
    content: ''; position: absolute; inset: 0 auto auto 50%; width: 44px; height: 3px;
    transform: translateX(-50%); border-radius: 0 0 4px 4px; background: var(--ombre-gold);
}
.stat .num { font-size: 36px; }
.stat .lbl { font-size: 13.5px; font-weight: 500; letter-spacing: .01em; }

/* ---- .doclink lists: fill the row, bigger targets ---- */
.doclist { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 14px; max-width: none; }
.doclink { gap: 16px; padding: 16px 20px; border-radius: 16px; min-height: 76px; }
.doclink .di { width: 46px; height: 46px; border-radius: 13px; font-size: 22px; border: 1px solid var(--divider); background: linear-gradient(145deg, var(--ico-bg), transparent); }
.doclink .dt { font-size: 15.5px; line-height: 1.3; }
.doclink .ds { margin-top: 2px; font-size: 12.5px; }
.doclink .darr {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    font-size: 17px; background: var(--ico-bg); color: var(--accent); flex-shrink: 0;
    transition: background .25s, color .25s, transform .25s;
}
.doclink:hover .darr, .doclink:focus-visible .darr { background: var(--gold); color: #0D1A30; transform: translateY(2px); }
@media (max-width: 480px) { .doclist { grid-template-columns: 1fr; } }

/* ---- TVA resource cards: link pinned to the bottom ---- */
.tva-link-card { display: flex; flex-direction: column; }
.tva-link-card p { flex: 1 1 auto; }

/* ---- Rates: month buttons are real tap targets ---- */
.mbtn { padding: 13px 4px; border-radius: 12px; }

/* ---- fee cards + requirement list (New Service) ---- */
.fee-2col { gap: 18px; margin-bottom: 26px; }
.feecard {
    position: relative; overflow: hidden; padding: 22px 24px 12px; border-radius: 16px;
    background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
}
.feecard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ombre-gold); }
.feecard h4 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 8px; }
.fee { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--divider); font-size: 15px; line-height: 1.4; color: var(--text2); }
.fee b { flex-shrink: 0; font-size: 17px; font-weight: 700; color: var(--text1); font-variant-numeric: tabular-nums; }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.req-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--text2); }
.req-list .ck { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--ico-bg); color: var(--accent); font-size: 17px; }
.innercard { border-radius: 18px; padding: 24px; }
@media (max-width: 720px) { .req-list { grid-template-columns: 1fr; } }

/* ---- help cards ---- */
.help-card { border-radius: 18px; padding: 26px; background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.help-card .ai { width: 52px; height: 52px; border-radius: 15px; font-size: 24px; border: 1px solid var(--divider); background: linear-gradient(145deg, var(--ico-bg), transparent); margin-bottom: 16px; }
.help-card h3 { font-size: 18px; }
.help-card p { font-size: 15px; line-height: 1.65; }

/* ---- Start / Stop chooser ---- */
.choice { padding: 24px; border-radius: 18px; }
.choice .cico { width: 56px; height: 56px; border-radius: 16px; font-size: 26px; border: 1px solid var(--divider); background: linear-gradient(145deg, var(--ico-bg), transparent); }
.choice h3 { font-size: 19px; }
.choice p { font-size: 15px; line-height: 1.55; }
.choice .pick { font-size: 13px; }

/* ---- Application form: fieldsets + radio pills (their base styles were never loaded) ---- */
.app-shell fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.app-shell legend { padding: 0; margin-bottom: 10px; font-weight: 600; color: var(--text1); }
.radiorow { display: flex; flex-wrap: wrap; gap: 12px; }
.app-shell .radiopill {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 48px;
    border: 1.5px solid var(--divider); background: var(--surface); color: var(--text1); font-weight: 600;
}
.app-shell .radiopill input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.app-shell .field .radiopill { flex-direction: row; align-items: center; width: auto; font-size: 14.5px; font-weight: 600; padding: 13px 18px; }
.app-shell .field .radiopill input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; border-radius: 0; flex: 0 0 18px; }
.app-shell .field .radiorow { display: flex; flex-direction: row; flex-wrap: wrap; }
.app-shell .radiopill:has(input:checked) { border-color: var(--gold); background: rgba(232,185,35,.14); box-shadow: 0 0 0 3px rgba(232,185,35,.22); }
.app-shell .radiopill:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.app-secondary .btn { flex: 0 1 auto; }
.print-steps { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 18px 0 0; padding: 16px 20px; list-style: none; border-radius: 14px; background: var(--surface); border: 1px solid var(--divider); font-size: 14px; color: var(--text2); counter-reset: ps; }
.print-steps li { display: flex; align-items: center; gap: 10px; counter-increment: ps; }
.print-steps li::before { content: counter(ps); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 700; background: var(--gold); color: #0D1A30; flex-shrink: 0; }

/* ============================================================
   Printable one-page application  (#bea-sheet, built by the
   New Service page script; hidden on screen)
   ============================================================ */
#bea-sheet { display: none; }
@media print {
    @page { size: letter; margin: .45in; }
    body.bea-printing > *:not(#bea-sheet) { display: none !important; }
    body.bea-printing #bea-sheet { display: block; }
    body.bea-printing { background: #fff !important; }
}
#bea-sheet, #bea-sheet * { box-sizing: border-box; }
#bea-sheet {
    font-family: Inter, "Segoe UI", Arial, sans-serif; color: #0D1A30; font-size: 10pt; line-height: 1.3;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.bs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 3px solid #E8B923; }
.bs-head img { height: .72in; width: auto; display: block; }
.bs-title { text-align: right; }
.bs-title small { display: block; font-size: 8pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a6d0a; }
.bs-title h1 { margin: 2px 0 0; font-size: 17pt; line-height: 1.1; letter-spacing: -.3px; color: #16233f; }
.bs-title p { margin: 3px 0 0; font-size: 8.5pt; color: #3A4F72; }
.bs-band { margin: 12px 0 6px; padding: 4px 10px; font-size: 8.5pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: linear-gradient(100deg, #16213F, #2C4470); border-radius: 4px; }
.bs-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px 10px; }
.bs-f { grid-column: span 3; min-width: 0; }
.bs-f.w2 { grid-column: span 2; } .bs-f.w4 { grid-column: span 4; } .bs-f.w6 { grid-column: span 6; }
.bs-f label { display: block; margin-bottom: 2px; font-size: 7.5pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3A4F72; }
.bs-f .v { min-height: .3in; padding: 5px 8px 3px; border: 1px solid #9DB0CC; border-radius: 4px; font-size: 10.5pt; font-weight: 600; background: #fff; overflow-wrap: anywhere; }
.bs-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 3px; }
.bs-check { display: inline-flex; align-items: center; gap: 6px; font-size: 10pt; }
.bs-box { display: inline-grid; place-items: center; width: 13px; height: 13px; flex-shrink: 0; border: 1.5px solid #16233f; border-radius: 3px; font-size: 10px; font-weight: 800; line-height: 1; }
.bs-box.on { background: #16233f; color: #fff; }
.bs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.bs-card { padding: 7px 10px; border: 1px solid #C9D4E6; border-radius: 6px; font-size: 8.8pt; color: #22304f; }
.bs-card h2 { margin: 0 0 3px; font-size: 8pt; letter-spacing: .1em; text-transform: uppercase; color: #8a6d0a; }
.bs-card ul { margin: 0; padding: 0; list-style: none; }
.bs-card li { display: flex; justify-content: space-between; gap: 10px; padding: 1.5px 0; border-bottom: 1px dotted #C9D4E6; }
.bs-card li:last-child { border-bottom: 0; }
.bs-card li b { white-space: nowrap; }
.bs-card.bring li { justify-content: flex-start; align-items: center; gap: 8px; border: 0; }
.bs-sign { display: grid; grid-template-columns: 1fr 1.6in; gap: 18px; margin-top: 10px; align-items: end; }
.bs-sign .line { height: .36in; border-bottom: 1.5px solid #16233f; }
.bs-sign span { display: block; margin-top: 2px; font-size: 7.5pt; letter-spacing: .06em; text-transform: uppercase; color: #3A4F72; }
.bs-note { margin: 6px 0 0; font-size: 8.3pt; color: #3A4F72; }
.bs-office { margin-top: 12px; padding: 8px 10px 10px; border: 1.5px dashed #16233f; border-radius: 6px; background: #F3F6FB; }
.bs-office h2 { margin: 0 0 6px; font-size: 8pt; letter-spacing: .14em; text-transform: uppercase; color: #16233f; }
.bs-office .bs-grid { grid-template-columns: repeat(4, 1fr); }
.bs-office .bs-f { grid-column: span 1; }
.bs-office .bs-f .v { min-height: .28in; }
.bs-foot { margin-top: 12px; padding-top: 7px; border-top: 3px solid #E8B923; display: flex; justify-content: space-between; gap: 16px; font-size: 8.5pt; color: #22304f; }
.bs-foot b { color: #16233f; }
.bs-foot > div:last-child { text-align: right; white-space: nowrap; }

/* ---- Rates: the Archive band needs the same breathing room as every other section ---- */
.page-section.bea-rates-archive { padding-top: clamp(48px, 6vw, 72px); }

/* ---- New Service: the two help cards ---- */
.svc-help { padding: 48px 0 88px; }
.help-grid { align-items: stretch; gap: 22px; }
.help-card { display: flex; flex-direction: column; padding: 30px 30px 26px; }
.help-card h3 { font-size: 20px; letter-spacing: -.2px; margin-bottom: 10px; }
.help-card p { flex: 1 1 auto; text-wrap: wrap; margin-bottom: 22px; }
.help-card a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.help-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--divider); }
.help-actions .btn { flex: 0 1 auto; justify-content: center; text-decoration: none; }
@media (max-width: 480px) { .help-actions .btn { flex: 1 1 100%; } }
.help-card a.btn-gold { color: var(--gold-text); }
.help-card a.btn-outline { color: var(--link); }
.help-actions .btn { white-space: nowrap; }

/* ---- New Service: action area under the form ---- */
.app-actions { justify-content: center; }
.app-actions .btn-lg { min-height: 60px; font-size: 17px; padding-inline: 32px; border-radius: 14px; }
.print-steps { justify-content: center; align-items: center; gap: 10px 14px; padding: 18px 22px; margin-top: 20px; }
.print-steps li { gap: 10px; }
.print-steps li:not(:last-child)::after { content: ""; width: 8px; height: 8px; margin-left: 6px; border-top: 2px solid var(--text3); border-right: 2px solid var(--text3); transform: rotate(45deg); }
.print-steps li strong { color: var(--text1); }
.app-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.app-tips .tip { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--divider); }
.app-tips .tip > i { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; font-size: 20px; color: var(--accent); background: linear-gradient(145deg, var(--ico-bg), transparent); border: 1px solid var(--divider); }
.app-tips .tip b { display: block; margin-bottom: 3px; font-size: 14.5px; color: var(--text1); }
.app-tips .tip span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--text2); text-wrap: wrap; }
.app-tips .tip a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.app-fine { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 18px; border-radius: 14px; border: 1px dashed var(--divider); color: var(--text2); font-size: 13.5px; line-height: 1.55; }
.app-fine i { flex-shrink: 0; margin-top: 2px; font-size: 18px; color: var(--accent); }
.app-fine p { margin: 0; text-align: left; font-size: inherit; color: inherit; text-wrap: wrap; }
.app-fine b { color: var(--text1); }
.app-reset { display: flex; justify-content: center; margin-top: 18px; }
.linkbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 0; background: none; cursor: pointer; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text3); }
.linkbtn:hover { color: var(--link-hover); background: var(--ico-bg); }
.linkbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 860px) { .app-tips { grid-template-columns: 1fr; } .print-steps li:not(:last-child)::after { display: none; } .print-steps { align-items: flex-start; flex-direction: column; } }

/* ============================================================
   Row alignment across sibling cards (2026-09-30, pass 2)
   Icon row, heading+text row and action row line up card to card.
   ============================================================ */

/* New Service help cards: subgrid rows = icon / heading / text / actions */
@media (min-width: 761px) {
    .help-grid { grid-template-rows: auto auto 1fr auto; row-gap: 0; column-gap: 22px; }
    .help-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}
@media (max-width: 760px) { .help-card + .help-card { margin-top: 18px; } }
.help-card .ai { margin-bottom: 18px; }
.help-card h3 { margin-bottom: 10px; }
.help-card p { margin-bottom: 0; }
.help-actions { margin-top: 22px; flex-wrap: nowrap; }
.help-actions .btn { padding-inline: 18px; font-size: 15px; min-height: 48px; }
@media (max-width: 480px) { .help-actions { flex-wrap: wrap; } .help-actions .btn { flex: 1 1 100%; } }

/* New Service tips: stacked like every other card, rows aligned */
.app-tips { grid-template-rows: auto auto 1fr; row-gap: 0; column-gap: 14px; }
.app-tips .tip { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-items: start; padding: 20px 20px 18px; }
.app-tips .tip > i { margin-bottom: 14px; }
.app-tips .tip > div { display: contents; }
.app-tips .tip b { margin-bottom: 4px; font-size: 15px; }
.app-tips .tip span { font-size: 14px; }
.app-tips .tip a { text-decoration-thickness: 1px; }
@media (max-width: 860px) {
    .app-tips { grid-template-rows: none; row-gap: 12px; }
    .app-tips .tip { grid-row: auto; grid-template-rows: none; }
}

/* About → Governance: the link line sits at the bottom of every card */
.infocard > p + p:last-child { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--divider); }
@media (min-width: 900px) {
    .infogrid:has(> .infocard > p + p:last-child) { row-gap: 0; }
    .infogrid:has(> .infocard > p + p:last-child) > .infocard { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}

/* Start / Stop chooser: the "Fill out the form" cue lines up */
.choice > span:last-child { display: flex; flex-direction: column; align-self: stretch; }
.choice .pick { margin-top: auto; padding-top: 10px; }

/* ---- New Service tips, pass 3: one quiet info strip instead of three boxes ---- */
.app-tips {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: none; gap: 0;
    margin-top: 20px; border-radius: 16px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--divider);
}
.app-tips .tip {
    display: flex; grid-row: auto; grid-template-rows: none; gap: 14px; align-items: flex-start;
    padding: 20px 22px; border: 0; border-radius: 0; background: none;
}
.app-tips .tip + .tip { border-left: 1px solid var(--divider); }
.app-tips .tip > i {
    width: 38px; height: 38px; margin: 0; border: 0; border-radius: 50%;
    font-size: 18px; color: var(--accent); background: rgba(232,185,35,.16);
}
.app-tips .tip > div { display: block; min-width: 0; }
.app-tips .tip b { margin-bottom: 4px; font-size: 15px; }
.app-tips .tip span { font-size: 14px; line-height: 1.55; }
.app-tips .tip-links { display: flex !important; flex-direction: column; gap: 6px; margin-top: 10px; }
.app-tips .tip-links a {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    font-size: 14px; font-weight: 600; color: var(--link); text-decoration: none;
}
.app-tips .tip-links a i { font-size: 15px; transition: transform .2s; }
.app-tips .tip-links a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
.app-tips .tip-links a:hover i { transform: translateX(3px); }
.app-tips .tip-links a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 860px) {
    .app-tips { grid-template-columns: 1fr; row-gap: 0; }
    .app-tips .tip + .tip { border-left: 0; border-top: 1px solid var(--divider); }
}
@media (prefers-reduced-motion: reduce) { .app-tips .tip-links a i { transition: none; } }
.app-tips .tip-links a { white-space: nowrap; }

/* ===== Shrinking header logo (2026-10-12) =====
   bea-ui.js adds .is-scrolled to <header class="site"> once the page is
   scrolled; it comes off again at the top. Logo and bar both ease down,
   text sizes are untouched. Reduced-motion: global rule makes it instant. */
header.site .nav,
header.site .brand-logo{transition:height .3s ease;}
header.site.is-scrolled .nav{height:96px;}
header.site.is-scrolled .brand-logo{height:80px;}
/* Anti-wiggle (2026-10-15): shrinking the in-flow sticky header moved the page
   up, the browser's scroll anchoring nudged scrollY under the "back to top"
   threshold, the header grew again, and it looped (one wheel notch flickered
   the header/theme; two notches got past it). The margin keeps the header's
   layout footprint constant (140-96 = 44), so shrinking never shifts content;
   anchoring is also off for the document. */
html{overflow-anchor:none;}
header.site{transition:background .45s ease,border-color .45s ease,margin-bottom .3s ease;}
header.site.is-scrolled{margin-bottom:44px;}
@media (max-width:760px){
  header.site.is-scrolled .nav{height:92px;}
  header.site.is-scrolled .brand-logo{height:76px;}
  header.site.is-scrolled{margin-bottom:36px;}
}

/* Footer hours (2026-10-16): keep the two ranges as stacked rows so "Fri" is
   never stranded on its own line and the two ranges never recombine. The clock
   icon stays as the first flex item of .foot-contact div; the stack span is the
   second. Each line is nowrap so the day label and its times stay together. */
.foot-hours__stack{display:flex;flex-direction:column;gap:2px;}
.foot-hours__stack span{white-space:nowrap;}

/* ===== Smaller header logo (2026-10-16) =====
   Resting header was 140px bar / 120px logo and pushed the hero slides down.
   Now 104 / 84 (phones 100 / 84). Scrolled state 88 / 72 (phones 84 / 68).
   The scrolled margin-bottom is always (resting bar - scrolled bar) so the
   anti-wiggle footprint stays constant: 104-88 = 16, 100-84 = 16.
   (Restored 2026-10-16: an earlier upload had dropped this block.) */
.nav{height:104px;}
.brand-logo{height:84px;}
.foot-brand .brand-logo{height:auto;}
header.site.is-scrolled .nav{height:88px;}
header.site.is-scrolled .brand-logo{height:72px;}
header.site.is-scrolled{margin-bottom:16px;}
@media (max-width:760px){
  .nav{height:100px;}
  .nav .brand-logo{max-height:84px;}
  header.site.is-scrolled .nav{height:84px;}
  header.site.is-scrolled .brand-logo{height:68px;}
  header.site.is-scrolled{margin-bottom:16px;}
}

/* ============================================================
   ADA 2026-10-21 — skip link, policy-card focus ring
   ============================================================ */
.skip-link{position:fixed;left:12px;top:-120px;z-index:100000;padding:12px 20px;border-radius:10px;background:var(--gold);color:var(--gold-text);font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.35);}
.skip-link:focus,.skip-link:focus-visible{top:12px;outline:3px solid var(--focus-ring);outline-offset:2px;}
main#main:focus{outline:none;}
/* The Policies page's inline <style> sets .more:focus-visible{outline:none} with no replacement; the extra "html" wins on specificity. */
html .bea-linkcards .infocard .more:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px;}