/* ===========================================================
   ARCHER SOLAR — polish layer
   Focus, typography and micro-interaction. Loaded last so it
   can correct earlier rules without !important.
   =========================================================== */

/* ---------------- keyboard focus ----------------
   Nothing on the site showed a focus ring, so anyone navigating by
   keyboard was flying blind. :focus-visible keeps it off for mouse users. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:3px solid var(--brand);
  outline-offset:3px;
  border-radius:6px;
}
.on-dark :where(a, button):focus-visible,
.page-hero :where(a, button):focus-visible,
.final-cta :where(a, button):focus-visible{outline-color:#bfeaff;}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;
}
/* form controls kept outline:none with only a colour change to signal focus —
   fine for sighted mouse users, invisible in high-contrast modes */
@media (forced-colors: active){
  :where(a, button, input, select, textarea):focus-visible{outline:3px solid Highlight;}
}

/* ---------------- skip link ---------------- */
.skip{
  position:absolute;left:16px;top:-60px;z-index:400;
  background:#fff;color:var(--brand-2);font-weight:800;font-size:14px;
  padding:12px 20px;border-radius:0 0 12px 12px;text-decoration:none;
  box-shadow:0 10px 30px -12px rgba(6,44,71,.5);transition:top .18s ease;
}
.skip:focus{top:0;}

/* ---------------- typography ---------------- */
h1,h2,h3,h4{text-wrap:balance;}
.page-hero h1,.head-left h2,.section-head h2{letter-spacing:-.028em;}
.display{font-variant-numeric:tabular-nums;}
p{text-wrap:pretty;}
.section-head p,.head-left .lede{max-width:52ch;}
.lead-card p.sub,.bcard p,.icard p{max-width:46ch;}
/* numerals in tables and stats should not jitter as they change */
table.atable td.num,.statbox b,.tile b,.sc-amt,.og-metric .v,.wx-read b{font-variant-numeric:tabular-nums;}

/* ---------------- links in prose ---------------- */
.faq-a-inner a,.callout a,.table-note a,.split p a,.step-body a{
  color:var(--brand-2);font-weight:700;text-decoration:underline;
  text-decoration-thickness:1.5px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--brand) 45%, transparent);
  transition:text-decoration-color .18s ease;
}
.faq-a-inner a:hover,.callout a:hover,.split p a:hover{text-decoration-color:var(--brand);}
.on-dark .faq-a-inner a,.on-dark .callout a{color:#bfeaff;}

/* ---------------- micro-interaction ---------------- */
.btn{will-change:transform;}
.btn:active{transform:translateY(1px) scale(.995);}
.bcard,.icard,.chip,.office,.citycard,.ccontact,.tile,.rail-card,.vcard{
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease,
             border-color .26s ease,background .26s ease;
}
.faq-q{transition:color .18s ease;}
.faq-q:hover{color:var(--brand-2);}
.faq-item.open .faq-q{color:var(--brand-2);}
.nav-link,.dropdown a,.footer-grid ul a{transition:color .16s ease,background .16s ease;}
.footer-grid ul a{position:relative;}
.footer-grid ul a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:currentColor;transition:width .22s cubic-bezier(.2,.7,.3,1);
}
.footer-grid ul a:hover::after{width:100%;}

/* section seams: a hairline where two light washes meet */
.section + .section:not(.on-dark),.ground + .section:not(.on-dark),
.section + .ground,.ground + .ground{box-shadow:inset 0 1px 0 rgba(6,44,71,.05);}

/* ---------------- selection + scrollbar ---------------- */
::selection{background:var(--brand);color:#fff;}
@supports (scrollbar-color: auto){
  html{scrollbar-color:var(--brand-tint-2) transparent;}
}

/* ---------------- print ---------------- */
@media print{
  .site-header,.mobile-sticky,.journey,.strip,footer .footer-photo{display:none !important;}
  .page-hero,.section.on-dark,.final-cta{background:#fff !important;color:#000 !important;}
  .page-hero h1,.on-dark h2,.on-dark h3,.final-cta h2{color:#000 !important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555;}
}

/* ---- accessibility polish ---------------------------------------------- */
/* .sr-only was only ever defined for form labels; make it general so headings
   can restore document outline without changing the visual design. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Touch targets: 44px minimum on coarse pointers (WCAG 2.5.8). */
.og-btn{min-width:38px;min-height:38px;}
.rail-btn{width:44px;height:44px;}
@media (max-width:760px){
  .og-btn{min-width:44px;min-height:44px;border-radius:11px;font-size:18px;}
  .og-qty{min-width:34px;font-size:16px;}
  .og-hours input{min-height:44px;}
  .footer-grid ul a{display:inline-block;padding:4px 0;}
  .f-contact a{display:inline-block;padding:3px 0;}
}
.ccontact .big{display:flex;align-items:center;padding:8px 0;min-height:44px;}
.icard h3 a::after,.ccontact h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit;}

/* ---- numerals ---------------------------------------------------------
   Big figures were set in IBM Plex Mono. At display size that reads as code
   rather than as a headline number, and the uniform advance width opens a
   gap in values with a unit ("1+  MW"). Move the large ones to the display
   face at heavy weight with tight tracking, keeping tabular figures so any
   column still lines up. Small uppercase mono labels are left alone — the
   eyebrows, category tags and table cells are where that face belongs. */
.hero-stats .stat b,
.ph-stats b,
.statbox b,
.wp-stat b,
.calc-amount,
.calc-bill-total .amt,
.gj-section .gj-stat .num,
.og-metric .v,
.og-band .amt,
.sc-size,
.sc-amt,
.sunpath .wx-read b,
.or-out .v,
.rd-meter b{
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.025em;
}
/* sans digits sit a touch narrower than mono at the same size — give the
   headline figures back the presence that costs them */
.hero-stats .stat b{font-size:clamp(23px,2.7vw,30px);line-height:1.12;}
.ph-stats b{font-size:clamp(22px,2.6vw,29px);line-height:1.12;}
.statbox b{font-size:clamp(25px,3.2vw,33px);line-height:1.1;}
.sc-amt{font-size:clamp(36px,5.8vw,50px);letter-spacing:-.03em;}
.calc-amount{letter-spacing:-.03em;}