/* ==========================================================================
   PAconnect — Home landing page
   Implemented from the "Home Landing Page.dc.html" design-code prototype.
   Token names follow the PAconnect design system (tokens/colors.css).

   The page follows the prototype's light/dark banding, with one deliberate
   change: the Core Services band is dark. See the "services" block below.
   ========================================================================== */

:root {
  /* Forest green — green-700 is THE PAconnect green */
  --green-950: #071b0b;
  --green-900: #0c2c12;
  --green-800: #10431a;
  --green-700: #14571e;
  --green-600: #1e7a2b;
  --green-500: #2e9e3c;
  --green-400: #5cbf63;
  --green-300: #8fd694;
  --green-50:  #f1f8f2;

  /* Gold */
  --gold-700: #b87a0c;
  --gold-500: #f0a830;
  --gold-400: #f5be5c;

  /* Ink */
  --ink-950: #0a0c0a;
  --ink-900: #101211;
  --ink-800: #1c201d;
  --ink-700: #2b302c;
  --ink-600: #414843;
  --ink-500: #5a625c;
  --ink-400: #838c85;
  --ink-300: #b6bdb8;
  --ink-200: #d7dcd8;
  --ink-100: #ebeeec;
  --ink-50:  #f6f8f6;
  --white:   #ffffff;

  --red-600: #b32b22;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --shell: 1200px;

  /* Responsive scale — mobile values are overridden at the breakpoints below. */
  --hero-pad: 108px 24px 116px;
  --hero-measure: 66%;
  --hero-size: 72px;
  --hero-lead: 19px;
  --h2-size: 42px;
  --section-pad: 96px 24px;
  --section-pad-tight: 76px 24px;
  --logo-height: 44px;
  --header-gap: 32px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink-50);
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink-800);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--green-600); }

img { max-width: 100%; }
input, textarea, select, button { font-family: inherit; }

/* Two-tone focus ring — gold, with an ink band outside it (2026-09-11).
   Gold alone measured 2.03:1 on white, under the 3:1 WCAG asks of a focus
   indicator, and it appeared on every light section of the site.

   No single colour can fix it: the ring has to read on white (luminance 1.0),
   on the ink header and footer (0.0035) and on the green consultation band
   (0.074). Passing white needs a dark ring; passing green needs a light one.
   So both are drawn — gold inside, ink outside — and whichever ground the
   element sits on, one of the two edges carries the contrast. Gold stays the
   brand focus colour everywhere it already worked.

   The geometry matters: the outline sits 2–5px out and the shadow's 7px
   spread puts ink at 5–7px, i.e. OUTSIDE the gold. Components that draw their
   own ring repeat this shadow — with two exceptions, marked below, where a
   component's own box-shadow or a clipping parent gets in the way. */
:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--ink-950);
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 18px; border-radius: 0 0 8px 8px;
  background: var(--ink-900); color: var(--white);
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: 0; color: var(--white); }

@keyframes paRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes paFade { from { opacity: 0; } to { opacity: 1; } }

.rise { animation: paRise 520ms var(--ease) both; }

/* ------------------------------------------------------ shared pieces -- */

/* SIZE AND TRACKING SET 2026-10-16 (PK), from a measured side-by-side in
   prototypes/eyebrow-size/. It was 12px / 700 / .14em, which made it SMALLER
   THAN THE BODY COPY it introduces (17px) — PK: "I can barely see it, I just
   bypass those", and skipping it is the design working as built. Contrast was
   never the issue: green on white measures 8.71:1.

   THE TRACKING DID MORE THAN THE PIXELS. At 12px/.14em the letters scatter
   instead of forming a word you catch in one glance, which is what made it
   read as fine print. Tightening to .085em as the size rose means the label
   grew only 12px wider overall — stronger without costing horizontal room.

   PK's reasoning for going to the larger end: these are strategic points
   placed before the headline, meant to be pointed out rather than skipped.
   248 eyebrows across the site average 11.2 characters, so the overlong ones
   are about 6 per cent and want shortening as a copy pass — see
   work_files/Eyebrow-labels-too-long.md. Do not hold the size down for them. */
.eyebrow {
  font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .085em;
}
.eyebrow--gold  { color: var(--gold-500); }
.eyebrow--sand  { color: var(--gold-400); }
/* The light-ground eyebrow is GREEN, with the gold left in the rule beneath
   it (PK, 2026-09-11, from a measured side-by-side of four options —
   prototypes/gold-eyebrow-compare/). It was --gold-700, which measured 3.6:1
   on white and 3.1:1 on the friction tint, under the 4.5:1 that 12px text
   needs. Green-700 measures 8.71:1 and 7.44:1.

   This is not a patch, it is the same device the nav panel already uses: a
   green label over a gold rule, which the footer mirrors with --green-400 on
   ink. Gold keeps the rule, the buttons and the dark-band eyebrows, where it
   has always passed. The principle worth keeping: the brightest accent in the
   palette does not carry the smallest text.

   The class name is historical — "deep" meant deep gold. Left alone because
   renaming it would touch every page for no visual gain. */
.eyebrow--deep  { color: var(--green-700); }
.eyebrow--quiet { color: var(--ink-500); }

.rule { width: 64px; height: 2px; background: var(--gold-500); }

h2 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  margin: 0;
  line-height: 1.12;
  color: var(--ink-900);
  font-size: var(--h2-size);
}

.section-head {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 70ch;
}
.section-head p {
  margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-600);
}
.section-head--dark h2 { color: var(--white); }
.section-head--dark p { color: rgba(255, 255, 255, .78); }
.section-head--center {
  align-items: center; text-align: center; max-width: none; gap: 12px;
}
.section-head--center h2 { line-height: 1.15; }

.btn {
  display: inline-block;
  font-size: 15px; font-weight: 700;
  padding: 16px 30px;
  border: 0; border-radius: 999px;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background 180ms var(--ease), transform 120ms var(--ease);
}
.btn--gold { background: var(--gold-500); color: var(--ink-900); }
.btn--gold:hover { background: var(--gold-400); color: var(--ink-900); }
.btn--gold:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent; color: var(--white);
  border: 1px solid rgba(255, 255, 255, .5);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .1); color: var(--white); }
.btn--block { display: block; width: 100%; padding: 16px; }

/* -------------------------------------------------------------- header -- */

/* The header is dark by default (decided 2026-09-08). It sits above both dark
   heroes and light pages, so it carries its own bottom rule rather than
   relying on contrast with whatever follows. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink-950);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.utility-bar {
  background: #000;
  color: var(--ink-300);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.utility-inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 7px 24px;
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.utility-right, .utility-right a { color: var(--gold-400); }
.utility-right a { text-decoration: none; }
.utility-right a:hover { color: var(--gold-400); text-decoration: underline; }

.header-inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; gap: var(--header-gap);
}

.brand { display: block; flex: none; line-height: 0; }
.brand img { height: var(--logo-height); width: auto; display: block; }

.site-nav { display: flex; gap: 26px; margin-left: auto; }
.site-nav a {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-200); text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.site-nav a:hover { color: var(--green-400); border-bottom-color: var(--gold-500); }

.header-cta {
  margin-left: auto;
  /* Gold, not green: the green pill loses figure/ground separation on ink. */
  background: var(--gold-500); color: var(--ink-950);
  text-decoration: none;
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; white-space: nowrap;
  padding: 11px 20px;
  transition: background 180ms var(--ease);
}
.header-cta:hover { background: var(--gold-400); color: var(--ink-950); }
.header-cta--mobile { display: none; }

.nav-toggle {
  all: unset;
  display: none;
  cursor: pointer;
  width: 46px; height: 46px; flex: none;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--ink-100);
  align-items: center; justify-content: center;
  transition: background 180ms var(--ease);
}
.nav-toggle:hover { background: rgba(255, 255, 255, .08); }
.nav-toggle:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
/* `hidden` is a no-op on SVG elements, so swap the icons from the open state. */
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-burger { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  display: flex; flex-direction: column;
  padding: 8px 24px 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  animation: paFade 180ms var(--ease) both;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a {
  display: flex; align-items: center; min-height: 48px;
  font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-200); text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.mobile-nav a:hover { color: var(--green-400); }
.mobile-nav__cta {
  justify-content: center;
  margin-top: 14px;
  background: var(--gold-500); color: var(--ink-950) !important;
  border-bottom: 0 !important;
  border-radius: 999px;
  letter-spacing: .06em;
}
.mobile-nav__cta:hover { background: var(--gold-400); }

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  background: var(--ink-950);
  color: var(--white);
  overflow: hidden;
}
.hero__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .62;
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(7, 27, 11, .95) 0%,
    rgba(7, 27, 11, .82) 46%,
    rgba(7, 27, 11, .28) 100%);
}
/* The neutral ink scrim, for the homepage's billboard-backdrop hero
   (2026-09-22). The default above is green, and a green scrim over gold pulls
   the red channel down until gold reads olive — measured on the Managed IT
   hero, where it was the whole problem. This one holds the same darkness over
   the copy, which on the homepage runs out to ~54% of the frame, then opens
   late so the horizon beam and the gold glow survive at the right. */
.hero--ink .hero__scrim {
  background: linear-gradient(90deg,
    rgba(10, 12, 10, .92) 0%,
    rgba(10, 12, 10, .82) 44%,
    rgba(10, 12, 10, .5) 62%,
    rgba(10, 12, 10, .1) 100%);
}
/* Art at 80%, as on the service-page loops, rather than the shared 62%: the
   billboard gold is the point of this hero, and at 62% the swell barely
   registered. Measured at 1440 across ten frames including the swell's peak:
   worst text 6.94:1 (the green accent), against 7.33 at 62%. The
   :not(.has-video) guard matters — without it the still stays up under the
   playing video and the hero shows two offset copies (found on Managed IT
   v2, 2026-09-12). The doubled class outranks hero-video.css, which loads
   later. */
.hero.hero--ink:not(.has-video) .hero__art { opacity: .8; }
.hero.hero--ink.has-video .hero__video { opacity: .8; }
/* Below 1025px the copy runs the full width, so the gradient's premise — text
   left, art right — stops holding, and it becomes close to a flat dim. */
@media (max-width: 1024px) {
  .hero--ink .hero__scrim {
    background: linear-gradient(90deg,
      rgba(10, 12, 10, .9) 0%,
      rgba(10, 12, 10, .86) 50%,
      rgba(10, 12, 10, .78) 100%);
  }
}
/* The billboard mark on the beam (homepage only, js/hero-mark.js). Hidden
   until the script places it; opacity is then set per frame from the beam,
   which is why .is-on has no transition. */
.hero__mark { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: opacity, filter; }
.hero__mark img { display: block; width: 100%; height: auto; }
.hero__mark.is-on { opacity: 1; filter: drop-shadow(0 0 14px rgba(240, 168, 48, .45)); }
.hero__mark.is-pulse { animation: heroMarkPulse 1.8s ease-out both; }
@keyframes heroMarkPulse {
  0%   { filter: drop-shadow(0 0 14px rgba(240, 168, 48, .45)); scale: 1; }
  35%  { filter: drop-shadow(0 0 46px rgba(255, 196, 70, .95)); scale: 1.035; }
  100% { filter: drop-shadow(0 0 14px rgba(240, 168, 48, .45)); scale: 1; }
}
.hero__mark.is-off { opacity: 0; transition: opacity 1s ease-in-out; }
@media (max-width: 1199px), (prefers-reduced-motion: reduce) { .hero__mark { display: none; } }

.hero__inner {
  position: relative;
  max-width: var(--shell); margin: 0 auto;
  padding: var(--hero-pad);
}
.hero__copy {
  max-width: var(--hero-measure);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 22px;
}
.hero h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; text-transform: uppercase;
  line-height: .95; letter-spacing: -.01em;
  margin: 0;
  font-size: var(--hero-size);
}
.hero__accent { color: var(--green-400); }
.hero__lead {
  margin: 0;
  font-size: var(--hero-lead); line-height: 1.65;
  color: rgba(255, 255, 255, .82);
  max-width: 60ch;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px; padding-top: 6px;
}

/* --------------------------------------------------------------- stats -- */

.stats {
  background: var(--ink-900); color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.stats__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 34px 24px;
  display: grid; gap: 28px;
  grid-template-columns: repeat(4, 1fr);
}
/* Three tiles, 2026-10-05. The band carried four until the two unsupportable
   ones came off; a fourth returns only if a real fact turns up, and this rule
   comes off with it. See the comment on the section in index.html. */
.stats--three .stats__inner { grid-template-columns: repeat(3, 1fr); }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__value {
  font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 38px; line-height: 1;
  color: var(--green-400);
}
.stat__label { font-size: 13px; color: var(--ink-300); letter-spacing: .02em; }

/* ---------------------------------------------------------- proof card -- */
/* ai-services.html, 22 Oct: a small card that runs up into the bottom of the
   hero. White on purpose, with the gold top rule the overlapping scope panel
   uses, so it reads as the same family. Numbers in --green-700, not -400:
   the bright green fails contrast on white. */
.proofcard { position: relative; z-index: 3; background: var(--white); padding: 0 24px; }
.proofcard__inner { max-width: var(--shell); margin: 0 auto; }
.proofcard__panel {
  margin: -58px 0 0;
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 40px; align-items: center;
  background: var(--white); border-top: 3px solid var(--gold-500); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(10, 12, 10, .16);
  padding: 26px 36px;
}
.proofcard__lead { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--ink-900); }
.proofcard__stat { display: flex; align-items: baseline; gap: 12px; padding-left: 40px; border-left: 1px solid var(--ink-200); }
.proofcard__value { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 44px; line-height: 1; color: var(--green-700); }
.proofcard__label { max-width: 16ch; font-size: 14px; line-height: 1.35; color: var(--ink-600); }
@media (max-width: 900px) {
  .proofcard { padding: 0 16px; }
  .proofcard__panel { grid-template-columns: 1fr; gap: 16px; margin-top: -40px; padding: 22px 22px; }
  .proofcard__stat { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------------ friction -- */

.friction { background: var(--white); }
.friction__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: var(--section-pad);
  display: grid; gap: 56px; align-items: start;
  grid-template-columns: 1fr 1fr;
}
.friction__intro { display: flex; flex-direction: column; gap: 20px; }
.friction__intro p {
  margin: 0; font-size: 17px; line-height: 1.7;
  color: var(--ink-600); max-width: 60ch;
}
.friction__list { display: flex; flex-direction: column; gap: 12px; }

.symptom {
  all: unset;
  display: flex; gap: 12px; align-items: flex-start;
  box-sizing: border-box;
  cursor: pointer;
  padding: 18px 20px;
  border-radius: 10px;
  border: 1px solid var(--ink-200);
  background: var(--white);
  transition: border-color 180ms var(--ease), background 180ms var(--ease),
              transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.symptom:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .1); }
/* The card's own box-shadow would win over the global ring's, so the ink band
   is repeated here. Same in service-v2.css, which restyles these cards. */
.symptom:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--ink-950);
}
.symptom[aria-pressed="true"] {
  background: var(--green-50);
  border-color: var(--green-300);
}
.symptom__tick {
  flex: none;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 999px;
  border: 1px solid var(--ink-300);
  background: var(--white);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.symptom__tick svg { opacity: 0; transition: opacity 180ms var(--ease); }
.symptom[aria-pressed="true"] .symptom__tick {
  background: var(--green-600); border-color: var(--green-600);
}
.symptom[aria-pressed="true"] .symptom__tick svg { opacity: 1; }
.symptom__text { display: flex; flex-direction: column; gap: 6px; }
.symptom__title {
  font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink-800);
}
.symptom__answer {
  font-size: 14.5px; line-height: 1.6; color: var(--green-700);
  animation: paFade 320ms var(--ease) both;
}
.symptom__answer[hidden] { display: none; }

.friction__summary {
  margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-500);
}

/* ------------------------------------------------------------ services --
   The one dark band on an otherwise light page. It sits between the white
   "Why change" section and the dark "difference" band, so it goes a step
   deeper than that one (ink-950 vs ink-900) to keep the two from merging.
   Cards are one step lighter than the band, as elsewhere.               */

.services {
  background: var(--ink-950);
  color: var(--ink-100);
}
.services h2 { color: var(--white); }
.services .eyebrow--deep { color: var(--gold-400); }
.services .section-head p { color: var(--ink-300); }

.services__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: var(--section-pad);
  display: flex; flex-direction: column; gap: 36px;
}
.services__grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

.service {
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  background: var(--ink-900);
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 3px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  padding: 26px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease),
              border-color 180ms var(--ease);
}
/* A black drop shadow reads as nothing on a dark band, so hover lifts the
   border as well. */
.service:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .24);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .5);
}
.service.is-open,
.service:hover.is-open { border-top-color: var(--gold-500); }
.service__icon {
  width: 50px; height: 50px;
  border-radius: 10px;
  background: var(--green-900);
  color: var(--green-400);
  display: flex; align-items: center; justify-content: center;
}
.service__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: .01em;
  font-size: 21px; line-height: 1.15;
  margin: 0; color: var(--white);
}
.service__value {
  margin: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-500);
}
.service__blurb {
  margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-300);
  animation: paFade 320ms var(--ease) both;
}
.service__blurb[hidden] { display: none; }
.service__toggle {
  all: unset;
  cursor: pointer;
  margin-top: auto; padding-top: 2px;
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700;
  color: var(--green-400);
}
.service__toggle:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }
/* The link to the service's own page, on the cards whose page exists
   (2026-09-24). It sits under the disclosure toggle, quieter than it — the
   toggle is the card's own behaviour, this leaves the page — and it takes the
   `margin-top: auto` off the toggle so the pair stays anchored to the bottom
   of a card whatever length its blurb is. */
.service__link {
  margin-top: 2px;
  font-size: 14px; font-weight: 700;
  color: var(--ink-300);
  text-decoration: none;
}
.service:has(.service__link) .service__toggle { margin-top: auto; }
/* A card with two pages behind it keeps both links on one line, so its
   toggle stays level with the cards beside it. */
.service__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 2px; }
.service__links .service__link { margin-top: 0; }
.service:has(.service__links) .service__toggle { margin-top: auto; }
.service__link:hover { color: var(--green-400); text-decoration: underline; text-underline-offset: 3px; }
.service__toggle svg { transition: transform 180ms var(--ease); }
.service__toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }

/* ------------------------------------------------- team strip (home) --
   Directly under the hero, on ink, so it reads as the hero's last line:
   the two stats, then the people drifting left on a slow loop (A4 in
   prototypes/team-strip/, 26 Oct). The white ring on each face is what lifts
   it off the black; without it the faces sank (A3). Two identical tracks
   slide by their own width, so the loop has no seam. Hover pauses it;
   reduced motion gets a still row that scrolls by hand. */
.tstrip { background: var(--ink-950); color: var(--white); padding: 28px 0 30px; border-top: 1px solid rgba(255,255,255,.08); }
.tstrip__head { max-width: var(--shell); margin: 0 auto 22px; padding: 0 24px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.tstrip__proof { margin: 0; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.8); }
.tstrip__proof strong { color: var(--white); font-weight: 800; margin-right: 6px; }
.tstrip__proof span { color: var(--gold-500); font-weight: 700; }
.tstrip__link { font-size: 15px; font-weight: 800; color: var(--gold-500); text-decoration: none; white-space: nowrap; }
.tstrip__link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* padding-top leaves room for the hover zoom on the faces, which otherwise
   grew up into the label line (PK, 26 Oct) */
.tstrip__run { display: flex; overflow: hidden; padding-top: 10px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tstrip__track { flex: none; display: flex; gap: 34px; padding: 0 34px 0 0; margin: 0; list-style: none;
  animation: tstripSlide 70s linear infinite; }
.tstrip__run:hover .tstrip__track { animation-play-state: paused; }
@keyframes tstripSlide { to { transform: translateX(-100%); } }
.tstrip__p { width: 128px; text-align: center; }
.tstrip__p img { display: block; width: 104px; height: 104px; margin: 0 auto 10px; border-radius: 50%; object-fit: cover; object-position: 50% 22%;
  border: 3px solid var(--white); box-shadow: 0 6px 18px rgba(0,0,0,.55); transition: transform .3s; }
.tstrip__p:hover img { transform: scale(1.06); }
.tstrip__p b { display: block; font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--white); }
.tstrip__p span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink-300); }
@media (prefers-reduced-motion: reduce) {
  .tstrip__track { animation: none; }
  .tstrip__run { overflow-x: auto; }
  .tstrip__track[aria-hidden] { display: none; }
}
@media (max-width: 700px) {
  .tstrip__proof { font-size: 15px; }
  .tstrip__p { width: 104px; }
  .tstrip__p img { width: 84px; height: 84px; }
}

/* ---------------------------------------------------------- difference -- */

.difference {
  position: relative;
  background: var(--ink-900); color: var(--white);
  overflow: hidden;
}
.difference__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .22;
}
/* The hero art (ai-services.html, 22 Oct) is mostly dark already, so it can
   show far stronger than the old texture did. */
.difference__art--horizon { opacity: .7; object-position: right center; }
.difference__inner {
  position: relative;
  max-width: var(--shell); margin: 0 auto;
  padding: var(--section-pad);
  display: flex; flex-direction: column; gap: 34px;
}

/* ------------------------------------------- difference: who gets paid --
   Homepage only (26 Oct). Replaced the "typical MSP / PAconnect" toggle,
   which nobody clicked. One failing drive, two endings; prototype and the
   rejected versions in prototypes/who-gets-paid/.
   Plays once: the drive pill, the two boxes drop in empty, the story fills
   them, the bills, the closing line (js/who-paid.js, .s1 … .s9). Afterwards
   two lights stay alive: amber on the failing drive, a green heartbeat on the
   monitoring step. The left column stays still on purpose: nobody is
   watching it. A few of the photo's server lights blink behind it all. */
.difference--paid { background: var(--ink-950); }
.difference__art--lights { opacity: .75; }
.difference--paid .difference__inner { padding: 44px 24px 46px; gap: 18px; }   /* fits one screen under the sticky header at 1440x900 */
.difference--paid .section-head { max-width: none; }
.difference--paid .section-head h2 { max-width: 30ch; }
.difference--paid .section-head p { max-width: 72ch; }

.paid { --hurt: var(--red-600); --hurt-soft: #ff9d8f; --ok: var(--green-400); }
.paid__trigger { display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px; border-radius: 999px; margin: 0 0 16px;
  background: rgba(240,168,48,.12); border: 1px solid rgba(240,168,48,.5); font-weight: 700; font-size: 16px; line-height: 1.2; color: var(--gold-400);
  transition: opacity .5s, transform .5s; }
.paid__trigger i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-500); }
.paid__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.paid__col { border-radius: 10px; padding: 20px 26px 18px; background: rgba(10,12,10,.74); border: 1px solid rgba(255,255,255,.14);
  transform-origin: top center; transition: opacity .45s, transform .7s cubic-bezier(.2,1.35,.4,1); }
.paid__col--hour { border-top: 5px solid var(--hurt); }
.paid__col--us   { border-top: 5px solid var(--ok); }
.paid__head { margin: 0 0 12px; min-height: 54px; display: flex; flex-direction: column; justify-content: flex-end; }
/* Logo left, words beside it. align-items: center stops the flex box
   stretching the image, which pulled it out of shape in the prototype. */
.paid__head--us { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
.paid__logo { display: block; flex: none; height: 46px; width: auto; }
.paid__who { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--hurt-soft); }
.paid__head--us .paid__who { color: var(--white); }
.paid__how { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); }
.paid__head--us .paid__how { color: var(--ok); }
.paid__steps { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid rgba(255,255,255,.18); }
.paid__steps li { position: relative; margin: 0 0 9px; font-size: 15.5px; line-height: 1.4; color: var(--ink-100); transition: opacity .45s, transform .45s; }
.paid__steps li::before { content: ''; position: absolute; left: -25px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--hurt); }
.paid__col--us .paid__steps li::before { background: var(--ok); }
.paid__steps time { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.paid__bill { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,.3); display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  font-size: 15px; transition: opacity .5s, transform .5s; }
.paid__bill dt { font-size: 12px; font-weight: 700; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.paid__bill dd { margin: 0; font-weight: 700; color: var(--hurt-soft); }
.paid__col--us .paid__bill dd { color: var(--ok); }
.paid__say { margin: 16px 0 0; font-size: 24px; font-weight: 800; line-height: 1.25; color: var(--white); transition: opacity .6s, transform .6s; }
.paid__say span { color: var(--gold-400); }

/* play once */
.paid.armed:not(.s1) .paid__trigger { opacity: 0; transform: translateY(-8px); }
.paid.armed:not(.s2) .paid__col--hour,
.paid.armed:not(.s3) .paid__col--us { opacity: 0; transform: translateY(-46px) scaleY(.92); }
.paid.armed .paid__steps li { opacity: 0; transform: translateX(-8px); }
.paid.armed.s4 .paid__steps li:nth-child(1),
.paid.armed.s5 .paid__steps li:nth-child(2),
.paid.armed.s6 .paid__steps li:nth-child(3),
.paid.armed.s7 .paid__steps li:nth-child(4) { opacity: 1; transform: none; }
.paid.armed:not(.s8) .paid__bill { opacity: 0; transform: translateY(8px); }
.paid.armed:not(.s9) .paid__say { opacity: 0; transform: translateY(8px); }

/* the two lights that stay alive, once the story has played */
@keyframes paidWarn  { 0% { box-shadow: 0 0 0 0 rgba(240,168,48,.75); } 70%, 100% { box-shadow: 0 0 0 13px rgba(240,168,48,0); } }
@keyframes paidWatch { 0%, 100% { box-shadow: 0 0 0 0 rgba(92,191,99,0); transform: scale(1); } 50% { box-shadow: 0 0 10px 3px rgba(92,191,99,.75); transform: scale(1.25); } }
.paid__trigger i { animation: paidWarn 2.2s ease-out infinite; }
.paid__col--us .paid__steps li:first-child::before { animation: paidWatch 2.8s ease-in-out infinite; }
.paid.armed:not(.s9) .paid__trigger i,
.paid.armed:not(.s9) .paid__col--us .paid__steps li:first-child::before { animation: none; }

/* the photo's server lights, placed by js/who-paid.js */
.paid__tw { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, #fff 0 18%, var(--c) 30%, transparent); animation: paidTwinkle var(--d) ease-in-out var(--w) infinite; }
@keyframes paidTwinkle { 0%, 100% { opacity: 0; } 10%, 32% { opacity: 1; } 48% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .paid__trigger i, .paid__col--us .paid__steps li:first-child::before { animation: none; }
  .paid__tw { display: none; }
}
@media (max-width: 900px) {
  .paid__cols { grid-template-columns: 1fr; }
  .paid__say { font-size: 20px; }
}

/* The compare tablist below is no longer on any page (homepage replaced
   26 Oct). Kept, with its js/app.js handler, in case the toggle returns. */
.compare__tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-self: flex-start;
  padding: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
}
.compare__tab {
  all: unset;
  cursor: pointer;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.compare__tab:hover { color: var(--white); }
.compare__tab:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.compare__tab.is-active { background: var(--gold-500); color: var(--ink-900); }

.compare__grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  overflow: hidden;
}
.compare__grid:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; }
.compare__cell {
  background: var(--ink-900);
  padding: 30px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background 180ms var(--ease);
}
.compare__cell:hover { background: var(--ink-800); }
.compare__index {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .06em;
  color: var(--gold-500);
}
.compare__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600; text-transform: uppercase;
  font-size: 22px; line-height: 1.15;
  color: var(--green-400);
}
.compare__grid[data-side="them"] .compare__title { color: var(--ink-400); }
.compare__body {
  font-size: 15.5px; line-height: 1.65;
  color: rgba(255, 255, 255, .76);
  animation: paFade 320ms var(--ease) both;
}

/* -------------------------------------------------------- testimonials -- */

.testimonials { background: var(--white); }
.testimonials__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: var(--section-pad-tight);
  display: flex; flex-direction: column; gap: 32px;
}
.testimonials__grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.quote {
  margin: 0;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.quote:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .1); }
.quote__mark {
  font-family: 'Oswald', sans-serif;
  font-size: 44px; line-height: .6;
  color: var(--gold-500);
}
.quote blockquote {
  margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-800);
}
.quote figcaption {
  margin-top: auto;
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-500);
}

/* -------------------------------------------------------- consultation -- */

.consultation {
  position: relative;
  background: var(--green-700); color: var(--white);
  overflow: hidden;
}
/* The texture is band-hex-floor.jpg (2026-09-22): the billboard plate's hex
   floor and horizon, reduced to thin lines and tinted into this band's own
   green, with the glow and the gold arc taken out. It replaced the mesh,
   which left every page opening in the new brand world and closing in the
   old one. The tint is baked into the file, so it runs at full opacity; the
   mesh needed .14 because it was a full-colour image. ai-services-2 keeps
   its own photo here, dimmed in photo.css. Rebuild it with the script in
   work_files/Hero-Art/band-texture/. */
.consultation__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.consultation__inner {
  position: relative;
  max-width: var(--shell); margin: 0 auto;
  padding: var(--section-pad);
  display: grid; gap: 56px; align-items: start;
  grid-template-columns: 1fr 1fr;
}
.consultation__copy { display: flex; flex-direction: column; gap: 20px; }
.consultation h2 { color: var(--white); }
.consultation__lead {
  margin: 0; font-size: 17px; line-height: 1.7;
  color: rgba(255, 255, 255, .85); max-width: 52ch;
}
/* .78, not .7 (2026-09-22): the weakest text in the band — 5.17:1 on plain
   green — and the one most likely to cross a line of the hex-floor texture,
   where it measured 4.51 at its worst pixel. */
.consultation__sub {
  margin: 0; font-size: 15px; line-height: 1.7;
  color: rgba(255, 255, 255, .78); max-width: 52ch;
}
.consultation__phone {
  display: flex; align-items: center; gap: 12px;
  padding-top: 8px;
  font-family: 'Oswald', sans-serif; font-size: 28px; letter-spacing: .02em;
  color: var(--gold-400); text-decoration: none;
}
.consultation__phone:hover { color: var(--gold-400); text-decoration: underline; }

.form-card {
  background: var(--white);
  border-radius: 10px;
  padding: 32px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .24);
}

.lead-form { display: flex; flex-direction: column; gap: 18px; }
.lead-form[hidden] { display: none; }
.lead-form h3 {
  font-weight: 800; font-size: 22px; margin: 0; color: var(--ink-900);
}

.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-700);
}
/* SELECT ADDED 2026-10-19 with the careers page, which is the first form on
   the site to need one. It inherits the input treatment rather than getting
   its own, so a dropdown cannot drift away from the fields above and below
   it — the only additions are the native arrow (appearance:none strips it,
   so one is drawn back as a background chevron) and the padding to clear it. */
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 6px;
  font-size: 15px;
  color: var(--ink-900);
  background: var(--white);
  border: 1px solid var(--ink-200);
  outline: none;
  transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.field textarea { resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px;
  /* chevron in --ink-500, drawn rather than imported so it needs no asset */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a625c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  cursor: pointer;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(46, 158, 60, .35);
}
/* Fields keep that green glow, so they get an ink ring rather than the gold
   one: three colours stacked on one input is noise, and the glow's own
   box-shadow would fight the global ring's band anyway. Inputs only ever sit
   on the white form card, where ink measures 19:1 — no second colour needed. */
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ink-950);
  outline-offset: 2px;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red-600); }
.field__error {
  font-size: 13px; font-weight: 600; color: var(--red-600);
}
.field__error[hidden] { display: none; }

.form-note { font-size: 12.5px; line-height: 1.6; color: var(--ink-500); }

/* Audience chooser — opt-in per page (wiring-cabling.html first, 2026-09-11).
   Visible choices rather than a dropdown: with two or three options, a
   dropdown hides the very thing the visitor should notice. Real radios under
   the chips, so it is a labelled group to assistive tech and arrow keys move
   between options. Behaviour lives in js/app.js. */
.audience { margin: 0; padding: 0; border: 0; min-width: 0; }
.audience legend { padding: 0; margin-bottom: 9px; }
.audience__options { display: flex; flex-wrap: wrap; gap: 8px; }
.audience__opt { position: relative; cursor: pointer; }
.audience__opt input {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; margin: 0;
  opacity: 0;
}
.audience__opt span {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  background: var(--white);
  font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--ink-700);
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.audience__opt:hover span { border-color: var(--green-600); }
.audience__opt input:checked + span {
  background: var(--green-700);
  border-color: var(--green-700);
  color: var(--white);
}
/* The ring is drawn on the chip, not on the visually hidden radio (whose own
   ring is invisible at opacity 0), so it carries the ink band itself. */
.audience__opt input:focus-visible + span {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--ink-950);
}
.field[hidden] { display: none; }

.form-success {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  animation: paFade 320ms var(--ease) both;
}
.form-success[hidden] { display: none; }
.form-success__mark {
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-600);
  display: flex; align-items: center; justify-content: center;
}
.form-success h3 { font-weight: 800; font-size: 24px; margin: 0; color: var(--ink-900); }
.form-success p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-600); }

.linkish {
  all: unset;
  cursor: pointer;
  font-size: 14px; font-weight: 700;
  color: var(--green-700);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }

/* -------------------------------------------------------------- footer -- */
/* Not a mirror of the top nav. The header serves people who know where they are
   going; this serves people who reached the bottom without converting, so it
   carries what a header structurally cannot: name, address, phone, hours and
   coverage as crawlable text. Full reasoning in README.md, "Footer".

   Three tiers: the local business, the four outcome columns, a bottom bar.
   Its breakpoints live at the end of this block rather than with the page's,
   so the whole footer stays one self-contained thing to open in Pinegrow. */

.site-footer {
  background: var(--ink-900);
  color: var(--ink-300);
  font-size: 14px;
  line-height: 1.7;
}

.site-footer a { text-decoration: none; }

.site-footer__edge {
  height: 4px;
  background: linear-gradient(90deg, var(--ink-900) 0%, var(--green-700) 60%, var(--green-500) 100%);
}

.site-footer__shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------- tier 1 — the local business -- */

.site-footer__local {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.15fr .9fr;
  gap: 40px;
  padding: 56px 0 44px;
}

.site-footer__cell p { margin: 0; }

/* No white plate behind this. The PNG has transparent corners but an OPAQUE
   WHITE OVAL inside it, so a white box puts white on white — the oval stops
   reading as a shape and all you see is the box's rounded corners. The site
   header already uses this same file bare on --ink-950; a plate here would
   contradict it. 52px lands at ~126px wide, the footprint the old box had. */
.site-footer__logo {
  display: inline-block;
  line-height: 0;
  margin-bottom: 22px;
}
.site-footer__logo img { height: 52px; width: auto; display: block; }

.site-footer__name {
  color: var(--white);
  font-weight: 700;
  letter-spacing: .01em;
}

/* Selector carries .site-footer__cell so it outweighs the margin reset above
   without reaching for !important. */
.site-footer__cell p.site-footer__phone {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
}
.site-footer__phone a { color: var(--gold-400); }
.site-footer__phone a:hover { text-decoration: underline; }

/* Green, not gold. The first build had 7 gold eyebrows + 7 gold rules + the
   gold phone — 15 gold elements, which is exactly why it read as gold-heavy.
   Gold now means one thing here and one thing only: the phone number, plus the
   four rules below that echo the nav. An accent pointing at one thing works;
   an accent used 15 times is decoration.

   Careful with "our green": --green-700, THE PAconnect green, measures 2.16:1
   on --ink-900 and is effectively invisible. --green-400 is 8.14:1. Same trap
   the dark header hit. */
.site-footer__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--green-400);
  margin-bottom: 14px;
}

/* Tier 2 ONLY — a deliberate echo of the Services mega panel, whose four column
   heads carry exactly this rule (nav.css, .mega__head: 12px padding, 14px
   margin, 2px solid --gold-500). Same four columns, same device, so the
   Run/Protect/Connect/Advance framework reads as one system top and bottom.

   nav.css describes that head's resting state as "green headline over a gold
   rule". The footer has no headline, so the green eyebrow takes that role and
   the figure still matches. Keeping the eyebrow green rather than copying the
   nav's gold one is also what holds the gold count down.

   Tier 1 gets no rule — Office / Service areas / Client portals have no nav
   counterpart to echo, and that is where the gold-heaviness came from. */
.site-footer__nav .site-footer__eyebrow {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gold-500);
}

.site-footer__hours { color: var(--white); font-weight: 600; }

/* After-hours as an entitlement, not a blanket claim. See README, "Hours". */
.site-footer__cell p.site-footer__note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-400);
}

/* Coverage as text, not a "Service areas" link — the point of the block. */
.site-footer__towns { color: var(--ink-300); }
/* A place name must never break across lines — "North / Huntingdon" reads as
   two places, which is the opposite of what this block is for. */
.site-footer__towns .town { white-space: nowrap; }
.site-footer__towns .sep { color: var(--ink-500); padding: 0 3px; }

.site-footer__portals { display: flex; flex-direction: column; gap: 0; }
.site-footer__portals a {
  display: block;
  padding: 5px 0;
  line-height: 1.35;
  color: var(--ink-300);
  transition: color 180ms var(--ease);
}
.site-footer__portals a:hover { color: var(--green-400); }
.site-footer__portals a .ext {
  font-size: 11px;
  color: var(--ink-500);
  padding-left: 3px;
  vertical-align: 1px;
}

/* ------------------------------------------ tier 2 — the four outcomes -- */

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 40px 0 44px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.site-footer__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}
/* Block + padding, never gap. As inline elements these links were 19px tall —
   under the 24px WCAG 2.5.8 minimum — floating in 10px of dead, untappable
   space. Turning that gap into padding makes the target ~29px and removes the
   hollow band, so the rhythm reads tighter at effectively the same pitch.
   Tightening the gap instead would have made both problems worse. */
.site-footer__list a {
  display: block;
  padding: 5px 0;
  line-height: 1.35;
  color: var(--ink-300);
  transition: color 180ms var(--ease);
}
.site-footer__list a:hover { color: var(--green-400); }

/* ------------------------------------------------- tier 3 — bottom bar -- */
/* Company links live here rather than as a fifth column: low-frequency
   destinations, and it keeps the outcome row a clean four-up. */

.site-footer__base {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding: 20px 0 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px 32px;
  flex-wrap: wrap;
  font-size: 13px;
}

.site-footer__company { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer__company a {
  display: inline-block;
  padding: 4px 0;
  color: var(--ink-300);
  transition: color 180ms var(--ease);
}
.site-footer__company a:hover { color: var(--green-400); }

.site-footer__copy { color: var(--ink-400); }

/* ----------------------------------------------- footer breakpoints -- */

@media (max-width: 1024px) {
  .site-footer__local { grid-template-columns: 1fr 1fr; gap: 36px 40px; }
  .site-footer__nav   { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
}

@media (max-width: 720px) {
  .site-footer__local { padding: 44px 0 36px; }
  .site-footer__nav   { padding: 32px 0 36px; }
  .site-footer__base  { flex-direction: column; align-items: flex-start; }
}

/* Two columns hold all the way down to 540px, so large phones in landscape and
   small tablets keep them: measured at 600px, two-up takes tier 2 from 792px to
   429px with nothing wrapping. Below 540 the widest link ("Network Design &
   Management", 208px) no longer fits a half-width column, so it collapses. */
@media (max-width: 540px) {
  .site-footer__local,
  .site-footer__nav { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------- breakpoints -- */

/* The header row collapses to the compact treatment before the content grids
   do. This sat at 1024px until 2026-09-09, sized for a nav of five links; the
   rebuild cut the top level to three (Services, Why PAconnect, Company) and the
   breakpoint never came down with it, so every laptop, split window and side
   panel between 820 and 1024 got a burger it did not need.

   Measured: the three-item header needs 670px. At 820 that leaves ~47px of gap
   either side of the nav, at 880 ~77px. It does not overflow until well below
   760px.

   KEEP IN LOCKSTEP WITH nav.css — `.mega { display: none }` and the mega grid
   density band use the same boundary. Raise this without raising those and the
   nav triggers appear while the panels they open stay hidden. */
@media (max-width: 819px) {
  .utility-left { display: none; }
  .utility-inner { justify-content: flex-end; }
  .site-nav { display: none; }
  .header-cta--desktop { display: none; }
  .header-cta--mobile { display: inline-block; padding: 12px 16px; }
  .nav-toggle { display: inline-flex; }
}

/* Tablet: the three-up grids drop to two before collapsing entirely. */
@media (max-width: 1024px) and (min-width: 721px) {
  .services__grid,
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .compare__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .friction__inner,
  .consultation__inner { grid-template-columns: 1fr; gap: 44px; }
  :root { --hero-measure: 100%; --hero-size: 56px; }
}

/* Mobile — mirrors the prototype's `mobile: true` value set. */
@media (max-width: 720px) {
  :root {
    --hero-pad: 56px 20px 64px;
    --hero-measure: 100%;
    --hero-size: 40px;
    --hero-lead: 16px;
    --h2-size: 28px;
    --section-pad: 56px 20px;
    --section-pad-tight: 48px 20px;
    --logo-height: 36px;
    --header-gap: 10px;
  }

  .stats__inner { grid-template-columns: 1fr 1fr; }
  /* Three tiles on a two-column grid leaves one orphaned on its own row.
     Below this breakpoint they stack instead, which reads as a list rather
     than a broken grid. */
  .stats--three .stats__inner { grid-template-columns: 1fr; gap: 22px; }
  .services__grid,
  .testimonials__grid,
  .compare__grid { grid-template-columns: 1fr; }
  .friction__inner,
  .consultation__inner { gap: 40px; }
  .form-card { padding: 24px; }
  .compare__tabs { align-self: stretch; }
  .compare__tab { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .symptom:hover,
  .service:hover,
  .quote:hover { transform: none; }
}

/* Client portal links in the utility bar. They point off-site, so they open in
   a new tab — a client checking a bill shouldn't lose the page they were on.
   Below 720px the strip is too narrow for four items, so the portals drop out
   here and appear in the mobile menu instead, where they get real tap targets. */
.utility-right { display: flex; align-items: center; gap: 8px; }
.utility-portal { color: var(--gold-400); text-decoration: none; }
.utility-portal:hover { color: var(--gold-400); text-decoration: underline; }
.utility-sep { color: rgba(255, 255, 255, .35); }

@media (max-width: 720px) {
  .utility-portal, .utility-sep { display: none; }
}

/* Portal links sit above the CTA in the mobile menu, visually quieter than the
   service links because they are for existing clients, not prospects. */
.mobile-portal { color: var(--ink-300) !important; }
.mobile-portal:hover { color: var(--gold-400) !important; }

/* ==========================================================================
   FAQ — shared component
   Moved here from ai.css on 2026-09-10, when Managed IT became the second
   page to use it. It is a site component now, not an AI-page one, and ai.css
   no longer carries any of it.
   ========================================================================== */

/* --ink-50 is a 3% step off white and simply cannot be seen, so every page
   with an FAQ read as one continuous white sheet. --ink-100 is about 9%:
   still quiet, but it separates. Changed site-wide 12 Oct on PK's call,
   after the same fix on Our Team and Service Areas. */
.faq { background: var(--ink-100); }
.faq__inner {
  max-width: 900px; margin: 0 auto;
  padding: var(--section-pad-tight);
  display: flex; flex-direction: column; gap: 32px;
}
.faq__list { display: flex; flex-direction: column; gap: 12px; }

.faq__item {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  overflow: hidden;
}
.faq__item[open] { border-color: var(--ink-300); }

.faq__item summary {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: 'Oswald', sans-serif;
  font-size: 18px; font-weight: 500; letter-spacing: .01em;
  color: var(--ink-900);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--green-700); }
/* `.faq__item` clips (overflow: hidden), which is why this ring is inset —
   and why its ink band has to be inset too, drawn at the item's very edge
   with the gold just inside it. An outer shadow would be cut off. */
.faq__item summary:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 3px var(--ink-950);
}

/* The +/− indicator is drawn rather than typed, so it lines up at any size. */
.faq__item summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--gold-500), var(--gold-500)) center / 14px 2px no-repeat,
    linear-gradient(var(--gold-500), var(--gold-500)) center / 2px 14px no-repeat;
  transition: transform 200ms var(--ease);
}
.faq__item[open] summary::after {
  background: linear-gradient(var(--gold-500), var(--gold-500)) center / 14px 2px no-repeat;
  transform: rotate(180deg);
}

.faq__answer { padding: 0 24px 22px; }
.faq__answer p {
  margin: 0;
  font-size: 16px; line-height: 1.75; color: var(--ink-700);
  max-width: 68ch;
}

@media (max-width: 720px) {
  .faq__item summary { padding: 16px 18px; font-size: 16px; }
  .faq__answer { padding: 0 18px 18px; }
  .faq__answer p { font-size: 15px; }
}