/* Hand-written rules that stand in for what the design does with React state.
   Everything visual still comes from the design; this file only decides which
   of the variants the build ships is showing. */

/* The design renders the nav and a "Contact" button above 1180px, and a
   "Menu" button with a full-screen overlay below it (site.js swaps the label
   and wires the overlay). */
@media (max-width: 1179px) {
  [data-wide-nav] { display: none !important; }
  /* hero buttons drop from size lg to md, as the design's heroBtnSize does */
  #heroType a[style*="--control-height-lg"] {
    height: var(--control-height) !important;
    padding: 0 24px !important;
    font: var(--type-nav) !important;
  }
}

#siteMenu[hidden] { display: none !important; }
#formThanks[hidden] { display: none !important; }

/* Visible keyboard focus for links and buttons the design styles inline. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--j9-violet-500);
  outline-offset: 2px;
}

/* Skip link */
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 10px 16px; background: #000; color: #fff; border: none; }
.skip-link:focus { top: 8px; color: #fff; }

/* Staging / preview builds only (tools/build.js adds the element). */
.stage-badge { position: fixed; left: 12px; bottom: 12px; z-index: 1000; padding: 6px 12px; border-radius: 999px; background: #f59173; color: #0b0608; font: 600 12px/1.35 var(--font-body); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }

/* The design styles blocks inline (display:grid, flex), which would beat the
   hidden attribute; site.js hides and shows with it. */
[hidden] { display: none !important; }

/* Images carry width/height attributes (tools/build.js) to reserve space.
   Keep their proportions wherever the design sets only a width. */
img[width][height] { height: auto; }

/* Client portal: the design shows a sidebar above 860px and a top bar below
   (React state in the prototype); both ship, CSS picks one. */
@media (min-width: 860px) { [data-portal-narrow] { display: none !important; } }
@media (max-width: 859px) { [data-portal-wide] { display: none !important; } }

/* generated: component hover/focus states */
.h0:hover{background:rgba(255,255,255,.14) !important}
.h1:hover{border-color:#fff !important}
.h3:hover{color:var(--j9-violet-700) !important}
.h2:hover .h4{width:100% !important}
.h5:hover .h6{width:100% !important}
.h7:hover .h8{width:100% !important}
.h9:hover .ha{width:100% !important}
.hb:hover{background:var(--j9-violet-700) !important}
.hc:hover{color:#85459f !important}
.hd:hover{background:var(--state-hover-tint) !important;border:2px solid var(--j9-violet-700) !important}
.he:hover{opacity:1 !important}
.hg:hover{transform:var(--lift-hover) !important}
.hf:hover .hh{transform:scale(var(--image-zoom-hover)) !important}
.hi:hover .hj{transform:scale(var(--image-zoom-hover)) !important}
.hk:hover .hl{transform:scale(var(--image-zoom-hover)) !important}
.hm:hover .hn{transform:scale(var(--image-zoom-hover)) !important}
.ho:hover{background:var(--j9-blue-700) !important}
.hp:hover{background:var(--j9-terra-600) !important}
.hq:hover{background:var(--state-hover-tint) !important}
.hr:hover{background:var(--j9-ink-0) !important;color:var(--j9-ink-900) !important}
.hs:hover{color:#522b62 !important;border-color:#522b62 !important}
.ht:focus{border:1px solid var(--color-brand) !important;box-shadow:0 0 0 2px var(--state-hover-tint) !important}
.hu:hover{background:var(--state-hover-tint) !important;border:2px solid var(--j9-ink-700) !important}
.hv:hover .hw{background:rgba(255,255,255,.14) !important}
.hx:hover{border-color:#fff !important;color:#fff !important}
.hy:hover .hz{width:100% !important}
.h10:hover .h11{width:100% !important}
.h12:hover .h13{width:100% !important}
.h14:hover .h15{background:rgba(255,255,255,.14) !important}
.h16:hover .h17{width:100% !important}
.h18:hover .h19{width:100% !important}
.h1a:hover .h1b{width:100% !important}
.h1c:hover .h1d{background:rgba(255,255,255,.14) !important}
.h1e:hover .h1f{width:100% !important}
.h1g:hover .h1h{width:100% !important}
.h1i:hover .h1j{width:100% !important}
.h1k:hover{color:inherit !important}
.h1l:hover{transform:scale(1.03) !important}
.h1m:hover .h1n{background:rgba(255,255,255,.14) !important}
.h1o:hover .h1p{width:100% !important}
.h1q:hover .h1r{width:100% !important}
.h1s:hover .h1t{width:100% !important}
.h1u:hover .h1v{background:rgba(255,255,255,.14) !important}
.h1w:hover .h1x{width:100% !important}
.h1y:hover .h1z{width:100% !important}
.h20:hover .h21{width:100% !important}
.h22:hover .h23{background:rgba(255,255,255,.14) !important}
.h24:hover .h25{width:100% !important}
.h26:hover .h27{width:100% !important}
.h28:hover .h29{width:100% !important}
.h2a:hover .h2b{background:rgba(255,255,255,.14) !important}
.h2c:hover .h2d{width:100% !important}
.h2e:hover .h2f{width:100% !important}
.h2g:hover .h2h{width:100% !important}
.h2i:hover .h2j{background:rgba(255,255,255,.14) !important}
.h2k:hover .h2l{width:100% !important}
.h2m:hover .h2n{width:100% !important}
.h2o:hover .h2p{width:100% !important}
.h2q:hover .h2r{background:rgba(255,255,255,.14) !important}
.h2s:hover .h2t{width:100% !important}
.h2u:hover .h2v{width:100% !important}
.h2w:hover .h2x{width:100% !important}
.h2y:hover .h2z{background:rgba(255,255,255,.14) !important}
.h30:hover .h31{width:100% !important}
.h32:hover .h33{width:100% !important}
.h34:hover .h35{width:100% !important}
.h36:hover .h37{background:rgba(255,255,255,.14) !important}
.h38:hover .h39{width:100% !important}
.h3a:hover .h3b{width:100% !important}
.h3c:hover .h3d{width:100% !important}
.h3e:hover .h3f{background:rgba(255,255,255,.14) !important}
.h3g:hover .h3h{width:100% !important}
.h3i:hover .h3j{width:100% !important}
.h3k:hover .h3l{width:100% !important}
.h3m:hover{transform:translateY(-2px) !important;color:inherit !important}
.h3n:hover .h3o{background:rgba(255,255,255,.14) !important}
.h3p:hover .h3q{width:100% !important}
.h3r:hover .h3s{width:100% !important}
.h3t:hover .h3u{width:100% !important}
.h3v:hover .h3w{width:100% !important}
.h3x:hover{color:#522b62 !important}
.h3y:hover .h3z{background:rgba(255,255,255,.14) !important}
.h40:hover .h41{width:100% !important}
.h42:hover .h43{width:100% !important}
.h44:hover .h45{width:100% !important}
.h46:hover .h47{width:100% !important}
.h48:focus{box-shadow:0 0 0 2px var(--state-hover-tint) !important}
.h49:hover .h4a{background:rgba(255,255,255,.14) !important}
.h4b:hover .h4c{width:100% !important}
.h4d:hover .h4e{width:100% !important}
.h4f:hover .h4g{width:100% !important}
.h4h:hover .h4i{width:100% !important}
.h4j:hover .h4k{background:rgba(255,255,255,.14) !important}
.h4l:hover .h4m{width:100% !important}
.h4n:hover .h4o{width:100% !important}
.h4p:hover .h4q{width:100% !important}
.h4r:hover{color:#fff !important;border-color:#fff !important}
.h4s:hover{color:#02526a !important}
.h4t:hover .h4u{transform:scale(var(--image-zoom-hover)) !important}
.h4v:hover .h4w{transform:scale(var(--image-zoom-hover)) !important}
.h4x:hover .h4y{transform:scale(var(--image-zoom-hover)) !important}
.h4z:hover .h50{background:rgba(255,255,255,.14) !important}
.h51:hover .h52{width:100% !important}
.h53:hover .h54{width:100% !important}
.h55:hover .h56{width:100% !important}
.h57:hover .h58{transform:scale(var(--image-zoom-hover)) !important}
.h59:hover .h5a{transform:scale(var(--image-zoom-hover)) !important}
.h5b:hover .h5c{transform:scale(var(--image-zoom-hover)) !important}
.h5d:hover .h5e{background:rgba(255,255,255,.14) !important}
.h5f:hover .h5g{width:100% !important}
.h5h:hover .h5i{width:100% !important}
.h5j:hover .h5k{width:100% !important}
.h5l:hover .h5m{transform:scale(var(--image-zoom-hover)) !important}
.h5n:hover .h5o{transform:scale(var(--image-zoom-hover)) !important}
.h5p:hover .h5q{transform:scale(var(--image-zoom-hover)) !important}
.h5r:hover .h5s{background:rgba(255,255,255,.14) !important}
.h5t:hover .h5u{width:100% !important}
.h5v:hover .h5w{width:100% !important}
.h5x:hover .h5y{width:100% !important}
.h5z:hover .h60{transform:scale(var(--image-zoom-hover)) !important}
.h61:hover .h62{transform:scale(var(--image-zoom-hover)) !important}
.h63:hover .h64{transform:scale(var(--image-zoom-hover)) !important}
.h65:hover .h66{background:rgba(255,255,255,.14) !important}
.h67:hover .h68{width:100% !important}
.h69:hover .h6a{width:100% !important}
.h6b:hover .h6c{width:100% !important}
.h6d:hover .h6e{transform:scale(var(--image-zoom-hover)) !important}
.h6f:hover .h6g{transform:scale(var(--image-zoom-hover)) !important}
.h6h:hover .h6i{transform:scale(var(--image-zoom-hover)) !important}
.h6j:hover .h6k{background:rgba(255,255,255,.14) !important}
.h6l:hover .h6m{width:100% !important}
.h6n:hover .h6o{width:100% !important}
.h6p:hover .h6q{width:100% !important}
.h6r:hover .h6s{background:rgba(255,255,255,.14) !important}
.h6t:hover .h6u{width:100% !important}
.h6v:hover .h6w{width:100% !important}
.h6x:hover .h6y{width:100% !important}
.h6z:hover .h70{background:rgba(255,255,255,.14) !important}
.h71:hover .h72{width:100% !important}
.h73:hover .h74{width:100% !important}
.h75:hover .h76{width:100% !important}
.h77:hover .h78{background:rgba(255,255,255,.14) !important}
.h79:hover .h7a{width:100% !important}
.h7b:hover .h7c{width:100% !important}
.h7d:hover .h7e{width:100% !important}
.h7f:hover .h7g{background:rgba(255,255,255,.14) !important}
.h7h:hover{background:#e6f2f7 !important}
.h7i:hover{color:#026c8a !important}
.h7j:hover{box-shadow:0 6px 20px rgba(11,6,8,.08) !important}
.h7k:hover .h7l{width:100% !important}
.h7m:hover .h7n{width:100% !important}
.h7o:hover .h7p{width:100% !important}
.h7q:hover .h7r{width:100% !important}
.h7s:hover{color:#d3bcda !important}
.h7t:hover{color:#8ac4d8 !important}