/* ARS BRAND + FACTORY BANNER + CONTACT MODAL (B.R.O.C.K. 2026-10-19). Loaded after site.css, so site.css stays
   untouched. Hotspot boxes are % of the 2076x757 banner (banner-hotspots.json), so they hold at every width.
   The CSP blocks inline style, which is why every position lives here. */

/* ---- LOGO: header carries the mark (arm + ARS), footer carries the full lockup ---- */
.c-brand{display:block;line-height:0}
.c-hdr__logo .c-brand img{height:48px;width:auto;max-width:none}
@media (min-width:1280px){.c-hdr__logo .c-brand img{height:56px}}

/* ---- HEADER FIT (2026-10-19 brock-ars-fix-1019). The Home item (66px) and the mark (121px wide at 56px tall; the old
   logo.svg was 80px) made the one-line bar 1016px of content in 922px at 1024, so "Start a project" ran past the right
   edge up to about 1076px wide, and at 1280 and up the "Request support" button squeezed the three panel items until
   their chevrons were cut off. Measured need: 95px back at 1024, 38px at 1280+. These rules give back about 125px
   (1024-1279) and 60px (1280+). site.css is untouched; same selectors, loaded after it. ---- */
@media (min-width:1024px){
  .c-nav,body.has-drawer .c-nav{margin-left:0}
  .c-nav__top{padding:0 8px}
  .c-nav__top[aria-current="page"]::after,.c-nav__l>li.is-active>.c-nav__top::after{left:8px;right:8px}
}
@media (min-width:1024px) and (max-width:1279.98px){
  .c-hdr__bar{gap:16px}
  .c-nav__top{padding:0 7px;font-size:.875rem}
  .c-nav__top[aria-current="page"]::after,.c-nav__l>li.is-active>.c-nav__top::after{left:7px;right:7px}
}
.c-foot__logo .c-brand img{height:120px;width:auto;max-width:100%}
@media (min-width:768px){.c-foot__logo .c-brand img{height:140px}}

/* ---- FACTORY BANNER ---- */
.c-fband{background:var(--ground);border-top:1px solid var(--rule);padding:0}
.c-fband__fig{position:relative;margin:0 auto;max-width:1440px;line-height:0}
.c-fband__img{display:block;width:100%;max-width:100%;height:auto}
.c-fband__hs{position:absolute;display:block;border-radius:6px;background:transparent;
  transition:background-color .15s ease,box-shadow .15s ease}
.c-fband__hs:hover{background:rgba(255,90,92,.10);box-shadow:inset 0 0 0 1px rgba(255,90,92,.55)}
.c-fband__hs:focus-visible{outline:3px solid var(--red-hi);outline-offset:2px;background:rgba(255,90,92,.12)}
.c-fband__hs--brand {left:28.71%;top:25.76%;width:42.53%;height:35.93%}
.c-fband__hs--slogan{left:31.40%;top:65.60%;width:36.96%;height:6.40%}
.c-fband__hs--tel   {left:10.02%;top:73.98%;width:17.24%;height:11.36%}
.c-fband__hs--mail  {left:29.62%;top:73.98%;width:18.93%;height:11.36%}
.c-fband__hs--web   {left:50.92%;top:73.98%;width:19.32%;height:11.36%}
.c-fband__hs--map   {left:72.30%;top:73.71%;width:18.16%;height:12.42%}
.c-fband__hs--motto {left:31.80%;top:87.60%;width:36.00%;height:5.40%}

/* Under 1200px a hotspot can be under 44px tall (42px at 1024, 32px at 768, 16px at 390), so all six destinations repeat as a
   text row at 48px tap height. There the slogan and motto boxes (9px and 7px tall at 390, about 3px above and below the
   contact row) stop taking pointer taps, and the four contact boxes grow into the freed gaps, so a tap on the phone, email,
   website or address text can only reach that item. Keyboard focus and labels are unchanged. (brock-ars-fix-1019) */
.c-fband__row{display:none}
@media (max-width:1199.98px){
  .c-fband__hs--slogan,.c-fband__hs--motto{pointer-events:none}
  .c-fband__hs--tel,.c-fband__hs--mail,.c-fband__hs--web,.c-fband__hs--map{top:72.4%;height:14.8%}
  .c-fband__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;margin:0;
    padding:12px 16px 16px;background:var(--panel);border-bottom:1px solid var(--rule)}
  .c-fband__row a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 10px;
    border:1px solid var(--rule-2);border-radius:var(--r-sm);background:var(--raised);color:var(--ink);
    font-size:.875rem;line-height:1.3;text-align:center;text-decoration:none;overflow-wrap:anywhere}
  .c-fband__row a:hover{border-color:var(--red-hi)}
}
@media (min-width:600px) and (max-width:1199.98px){.c-fband__row{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- CONTACT MODAL ---- */
.c-cmodal{width:calc(100% - 32px);max-width:640px;max-height:calc(100dvh - 32px);margin:auto;padding:0;
  border:1px solid var(--rule-2);border-radius:6px;background:var(--panel);color:var(--ink);overflow:auto}
.c-cmodal::backdrop{background:rgba(3,4,6,.78)}
.c-cmodal__box{position:relative;padding:28px 20px 24px}
@media (min-width:600px){.c-cmodal__box{padding:32px 32px 28px}}
.c-cmodal__x{position:absolute;top:8px;right:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font-size:1.75rem;line-height:1;cursor:pointer}
.c-cmodal__x:hover{background:var(--raised)}
.c-cmodal__h{margin:0 48px 6px 0;font-family:var(--f-display);font-size:1.375rem;line-height:1.25}
.c-cmodal__lede{margin:0 0 18px;color:var(--ink-2)}
.c-cmodal__form{max-width:none}
/* .c-form sets display:grid, which beats the UA [hidden] rule; without this the form stays on screen under the success box. */
.c-cmodal [hidden]{display:none!important}
.c-cmodal__act{margin:0}
.c-cmodal__send[disabled]{opacity:.6;cursor:progress}
.c-cmodal__ok{padding:16px 18px;border:1px solid var(--field);border-left:4px solid var(--red);border-radius:var(--r-sm);background:var(--raised);margin-bottom:16px}
.c-cmodal__err{padding:14px 16px;border:1px solid var(--red-hi);border-left-width:4px;border-radius:var(--r-sm);background:var(--raised);margin-bottom:16px}
.c-cmodal__ok p,.c-cmodal__err p{margin:0 0 6px}
.c-cmodal__err ul{margin:0;padding-left:20px}
.c-cmodal__ok a{color:var(--red-hi)}