/* ==========================================================================
   HM Solutions, Inc.
   styles.css  |  single stylesheet, no build step
   Palette and type are locked. Change tokens here, not in the pages.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Base surfaces are charcoal. Indigo and green are ACCENTS only.
     The old --indigo-ink / --indigo-deep tokens now resolve to charcoal
     so every existing dark section becomes gray without touching markup.
     True indigo lives on in --accent for deliberate accent use.
     ------------------------------------------------------------------ */

  /* Charcoal base (lightened so purple accents read against it) */
  --char-900:      #24272F;   /* deepest, header and footer */
  --char-800:      #2E323C;   /* dark sections and hero */
  --char-700:      #3B404B;   /* raised panels on dark */
  --char-line:     rgba(255,255,255,0.14);

  /* Indigo accent. Deep for white backgrounds, bright for dark ones. */
  --accent:        #3B2A7A;   /* indigo on WHITE backgrounds */
  --accent-soft:   #4A3690;
  --accent-bright: #927BE6;   /* indigo on DARK/charcoal backgrounds, actually visible */

  /* Green accent */
  --green:         #6FBE44;
  --green-dark:    #3C761F;   /* AA on white both directions (5.5:1) */

  /* Legacy token names remap so nothing breaks. */
  --indigo:        #3B2A7A;
  --indigo-deep:   #262A33;
  --indigo-ink:    #1C1F26;

  /* Neutrals */
  --ink:           #14161A;
  --paper:         #F5F6F7;
  --paper-2:       #E9EBED;
  --gray:          #5C6470;
  --gray-line:     #DDE0E3;
  --white:         #FFFFFF;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Space, 8px scale */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 56px; --s7: 72px; --s8: 96px;

  --wrap: 1280px;          /* content column, steps up on big screens. html.narrow = old 1200 */
  --radius: 15px;
  --radius-sm: 11px;
  --radius-soft: 13px;
  --radius-pill: 999px;

  /* Industrial floor-marking motif, used for placeholders and accents */
  --stripe: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.05) 0 10px,
    rgba(255, 255, 255, 0) 10px 24px
  );
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--indigo); }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 var(--s3);
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
p  { margin: 0 0 var(--s3); }
p:last-child, ul:last-child { margin-bottom: 0; }
ul { margin: 0 0 var(--s3); padding-left: 1.15em; }
li { margin-bottom: var(--s1); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--green); color: var(--indigo-ink);
  padding: 12px 20px; font-weight: 700; z-index: 999;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s3); }
.section { padding: var(--s6) 0; }
@media (min-width: 900px) { .section { padding: var(--s8) 0; } }

.section--paper { background: var(--paper); }
.section--ink   { background: var(--char-800); color: var(--white);
  border-top: 3px solid var(--accent-bright); border-bottom: 3px solid var(--green); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }
.section--ink a { color: var(--green); }
/* ...but not buttons. A dark section was repainting .btn labels green, which made
   green text sit on a green pill and vanish. Buttons keep their own colours. */
.section--ink a.btn { color: inherit; }
.section--ink a.btn-primary { color: #12241A; }
.section--ink a.btn-primary:hover { color: #fff; }
.section--ink a.btn-ghost { color: var(--white); }
.section--ink a.btn-ghost:hover { color: var(--green); }

.lead { font-size: 1.18rem; color: var(--gray); max-width: 62ch; }
.section--ink .lead { color: rgba(255,255,255,0.72); }

.eyebrow {
  font-family: var(--display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0 0 var(--s2);
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 3px; flex: none;
  background: linear-gradient(90deg, var(--green) 60%, var(--accent) 60%);
}
.section--ink .eyebrow { color: var(--green); }

/* Homepage hero: broadcast what we offer. Big green eyebrow, headline slightly smaller. */
.hero--home .eyebrow {
  color: var(--green);
  font-size: clamp(1.4rem, 3.4vw, 2.5rem);
  letter-spacing: 0.04em;
  line-height: 1.1;
  gap: 16px;
  margin-bottom: var(--s3);
  flex-wrap: wrap;
}
.hero--home .eyebrow::before {
  width: 48px; height: 6px; border-radius: 2px;
  background: linear-gradient(90deg, var(--green) 60%, var(--accent-bright) 60%);
}
.hero--home h1 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
}

.head { max-width: 52rem; margin-bottom: var(--s5); }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 0.98rem;
  letter-spacing: 0.01em;
  padding: 16px 30px; border-radius: var(--radius-pill);
  text-decoration: none; border: 2.5px solid transparent; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--soft { border-radius: var(--radius-soft); }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--green); color: #12241A; border-color: var(--accent); }
.btn-primary:hover { background: var(--green-dark); border-color: var(--accent-soft); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-dark { background: var(--char-900); color: var(--white); border-color: var(--char-900); }
.btn-dark:hover { background: var(--char-700); border-color: var(--char-700); }
.btn-purple { background: var(--accent); color: var(--white); border-color: var(--green); }
.btn-purple:hover { background: var(--accent-soft); border-color: var(--green-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hero-staffing-mini {
  display: flex; align-items: center; gap: 16px;
  margin-top: var(--s4); max-width: 520px;
  text-decoration: none;
}
.hero-staffing-mini img {
  flex-shrink: 0; display: block; height: 64px; width: auto;
  background: var(--white); border-radius: var(--radius-soft);
  padding: 8px 12px;
}
.hero-staffing-mini span {
  color: rgba(255,255,255,0.68); font-size: 0.86rem; line-height: 1.45;
}
.hero-staffing-mini:hover img { box-shadow: 0 0 0 2px var(--green); }
.note { font-size: 0.86rem; color: var(--gray); margin-top: -6px; }
@media (max-width: 560px) {
  .hero-staffing-mini { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-staffing-mini img { height: 40px; border-radius: 999px; padding: 6px 10px; }
  .hero-staffing-mini span { color: rgba(255,255,255,0.9); font-size: 0.76rem; }
}

/* --------------------------------------------------------------- header */
.site-header {
  background: var(--char-900);
  position: sticky; top: 0; z-index: 100;
  border-bottom: 3px solid var(--green);
  box-shadow: 0 3px 0 0 var(--accent-bright);
}
.bar { display: flex; align-items: center; justify-content: space-between; min-height: 88px; gap: var(--s4); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); flex: none; }
/* The real HM wordmark. logo-light.png is the white-and-green version for
   dark backgrounds. logo-dark.png is the indigo version for white backgrounds. */
.brand-logo { height: 54px; width: auto; display: block; }
.brand-logo--footer { height: 52px; }

/* HM indigo box around the header logo, on every page */
.site-header .brand {
  border: 2px solid var(--accent-bright);
  border-radius: var(--radius-soft);
  padding: 8px 14px;
  background: rgba(146, 123, 230, 0.08);
  transition: border-color .18s ease, background-color .18s ease;
}
.site-header .brand:hover {
  border-color: var(--green);
  background: rgba(111, 190, 68, 0.08);
}


.nav { display: flex; align-items: center; gap: 20px; margin: 0 auto 0 12px; }
.nav a {
  color: rgba(255,255,255,0.82); text-decoration: none;
  font-size: 0.92rem; font-weight: 500; padding: 6px 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--white); border-bottom-color: var(--green); }
.nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--green); }

.header-cta { display: flex; align-items: center; gap: var(--s2); flex: none; }
.header-phone {
  color: var(--white); text-decoration: none; font-family: var(--display);
  font-weight: 700; font-size: 1rem; white-space: nowrap;
}
.header-phone span { display: block; font-family: var(--body); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.header-cta .btn { padding: 12px 20px; font-size: 0.9rem; }

.menu-btn {
  display: none; background: none; border: 1px solid rgba(255,255,255,0.3);
  color: var(--white); border-radius: var(--radius); padding: 10px 12px; cursor: pointer;
}
.menu-btn svg { display: block; }

@media (max-width: 1459px) {
  .nav, .header-actions { display: none; }
  .menu-btn { display: block; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--char-900); padding: var(--s2) var(--s3) var(--s4);
    border-bottom: 3px solid var(--green);
  }
  .nav.is-open a { padding: 14px 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.08); }
}


/* ----------------------------------------------------------------- hero */
.hero {
  background: var(--char-800);
  color: var(--white);
  position: relative; overflow: hidden;
  padding: var(--s7) 0 var(--s6);
  border-bottom: 3px solid var(--accent-bright);
}
@media (min-width: 900px) { .hero { padding: var(--s8) 0; } }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--stripe); opacity: 0.9;
  -webkit-mask-image: linear-gradient(105deg, transparent 55%, #000 100%);
  mask-image: linear-gradient(105deg, transparent 55%, #000 100%);
}
.hero .wrap { position: relative; z-index: 1; }

/* --------------------------------------------------- neon logo watermark
   Anchored inside the centered content wrap, in the right zone only. Its
   left edge is fixed at 58% of the wrap, always past the text block, so it
   can never sit behind the words. It shrinks with the viewport and stays
   pinned right. */
.hero--home { position: relative; overflow: hidden; }
.hero-neon-zone {
  position: absolute; z-index: 0; pointer-events: none;
  top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--wrap);
  padding: 0 var(--s3);
  display: grid; place-items: center end;
}
.hero-neon-zone > * { grid-area: 1 / 1; justify-self: end; align-self: center; }
.hero-photo {
  z-index: 0; pointer-events: none;
  width: 44%; min-width: 300px; max-width: 460px;
  height: auto; object-fit: contain;
  border-radius: var(--radius);
  opacity: 0.4;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  -webkit-mask-image: radial-gradient(125% 125% at 50% 50%, #000 52%, transparent 90%);
  mask-image: radial-gradient(125% 125% at 50% 50%, #000 52%, transparent 90%);
}
.hero-neon {
  position: relative; z-index: 1;
  width: 44%;
  min-width: 300px;
  max-width: 460px;
  height: auto;
  opacity: 0.34;
  filter: saturate(1.15);
}
/* Below 1120px the 620px text block and the logo cannot both fit in the
   wrap without touching, so hide the logo cleanly rather than crowd it. */
@media (max-width: 1200px) {
  .hero-neon-zone { display: none; }
}
.hero--home .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-neon { animation: neon-pulse 5.5s ease-in-out infinite; }
}
@keyframes neon-pulse {
  0%, 100% { opacity: 0.34; }
  50%      { opacity: 0.44; }
}
.hero h1 { color: var(--white); max-width: 15ch; }
.hero .lead { color: rgba(255,255,255,0.78); font-size: 1.22rem; max-width: 52ch; margin-bottom: var(--s5); }
.hero--home .wrap > * { max-width: 620px; }
.hero .eyebrow { color: var(--green); }

.hero--inner { padding: var(--s6) 0; }
.hero--inner h1 { max-width: 20ch; font-size: clamp(2rem, 4.4vw, 3.2rem); }
.crumb { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.68); margin-bottom: var(--s2); }
.crumb a { color: rgba(255,255,255,0.75); text-decoration: none; }
.crumb a:hover { color: var(--green); }

/* ------------------------------------------------------------ trust bar */
.trust {
  background: var(--char-800); color: var(--white);
  border-top: 3px solid var(--green);
  box-shadow: inset 0 6px 0 -3px var(--accent-bright);
}
.trust-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: rgba(255,255,255,0.09);
}
@media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .trust-grid { grid-template-columns: repeat(6, 1fr); } }
.trust-item { background: var(--char-800); padding: var(--s3) var(--s2); text-align: center; }
.trust-item strong {
  display: block; font-family: var(--display); font-size: 1.02rem; letter-spacing: -0.01em;
}
.trust-item span { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.78); margin-top: 4px; }

/* ---------------------------------------------------------------- cards */
.grid { display: grid; gap: var(--s3); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--radius); padding: var(--s4);
  display: flex; flex-direction: column;
}
.card h3 { margin-bottom: var(--s2); color: var(--accent); }
.card p { color: var(--gray); font-size: 0.97rem; margin-bottom: var(--s2); }
.card .icon { color: var(--indigo); margin-bottom: var(--s3); }
a.card { text-decoration: none; color: inherit; position: relative; transition: border-color .18s ease, transform .18s ease; }
a.card::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  background: var(--accent); border-radius: var(--radius) var(--radius) 0 0;
  opacity: 0; transition: opacity .18s ease;
}
a.card:hover::before { opacity: 1; }
a.card:hover { border-color: var(--indigo); transform: translateY(-2px); }
.card-link {
  margin-top: auto; font-family: var(--display); font-weight: 700;
  font-size: 0.88rem; color: var(--indigo); letter-spacing: 0.02em;
}
a.card:hover .card-link { color: var(--green-dark); }

.card--pain { border-left: 3px solid var(--accent); }
.card--pain h3 { color: var(--accent); }

.linkedin-cta {
  display: flex; align-items: center; gap: var(--s3);
  background: #EEF4FC; border: 1px solid #D7E6FA; border-radius: var(--radius-soft);
  padding: var(--s3); margin-top: auto; text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.linkedin-cta:hover, .linkedin-cta:focus-visible { border-color: #0A66C2; transform: translateY(-1px); }
.linkedin-cta .linkedin-cta__logo { height: 20px; width: auto; max-width: none; flex-shrink: 0; }
.linkedin-cta__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linkedin-cta__text strong { font-family: var(--display); font-size: 0.92rem; color: var(--indigo-ink); }
.linkedin-cta__text small { font-size: 0.8rem; color: var(--gray); }

/* --------------------------------------------------- signature: the spine */
.spine { position: relative; display: grid; gap: 0; }
.spine::before {
  content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px;
  width: 2px; background: var(--accent-bright); opacity: 0.55;
}
.spine-fill {
  position: absolute; left: 23px; top: 12px; width: 2px; height: 0;
  background: var(--green); transition: height 1.1s cubic-bezier(.2,.7,.3,1);
}
.rung {
  position: relative; display: grid; grid-template-columns: 48px 1fr;
  gap: var(--s3); padding: var(--s3) 0; align-items: start;
}
.rung-num {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--char-900); border: 2px solid rgba(255,255,255,0.28);
  font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--white);
  position: relative; z-index: 2; transition: border-color .4s ease, background-color .4s ease;
}
.rung.is-lit .rung-num { border-color: var(--accent-bright); background: var(--green); color: var(--indigo-ink); }
.rung h3 { margin-bottom: 6px; color: var(--white); }
.rung p { color: rgba(255,255,255,0.72); font-size: 0.98rem; margin: 0; }
.rung .freq {
  display: inline-block; margin-top: 10px; font-family: var(--display);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green); border: 1px solid rgba(111,190,68,0.4);
  padding: 4px 12px; border-radius: var(--radius-pill);
}
@media (min-width: 900px) {
  .rung { grid-template-columns: 64px 1fr; gap: var(--s4); }
}

/* ----------------------------------------------------------- comparison */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--gray-line); border-radius: var(--radius); background: var(--white); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 0.95rem; }
table.cmp th, table.cmp td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--gray-line); }
table.cmp thead th {
  font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--paper-2); color: var(--indigo);
  position: sticky; top: 0; z-index: 3;
}
table.cmp thead th:last-child { background: var(--green-dark); color: var(--white); border-top: 2px solid var(--accent); }
table.cmp tbody th {
  font-family: var(--display); font-weight: 700; font-size: 0.9rem; color: var(--ink);
  background: var(--white); position: sticky; left: 0; z-index: 2;
  border-right: 1px solid var(--gray-line); min-width: 190px;
}
table.cmp thead th:first-child { position: sticky; left: 0; z-index: 4; }
table.cmp td { color: var(--gray); }
table.cmp td.hm { color: var(--ink); font-weight: 600; background: rgba(111,190,68,0.09); border-left: 1px solid rgba(111,190,68,0.3); border-right: 1px solid rgba(111,190,68,0.3); }
table.cmp tr:last-child td, table.cmp tr:last-child th { border-bottom: none; }
.cmp-note { font-size: 0.85rem; color: var(--gray); margin-top: var(--s2); }

/* ---------------------------------------------------------------- proof */
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.proof-list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.proof-list svg { flex: none; margin-top: 3px; color: var(--green); }
@media (min-width: 900px) { .proof-list { grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s4); } }

.split { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s7); } }

.logo-wall {
  border: 1px dashed var(--gray-line); border-radius: var(--radius);
  padding: var(--s4); text-align: center; color: var(--gray); font-size: 0.9rem;
  background: var(--white);
}
.logo-wall strong { display: block; font-family: var(--display); color: var(--indigo); margin-bottom: 6px; font-size: 1rem; }

/* ------------------------------------------------- media and placeholders */
.media {
  position: relative; width: 100%; overflow: hidden; border-radius: var(--radius);
  background: var(--char-800);
  aspect-ratio: 16 / 9;
}
.media--portrait { aspect-ratio: 3 / 4; }
.media--square   { aspect-ratio: 1 / 1; }
.media--wide     { aspect-ratio: 21 / 9; }
.media img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.media::before {
  content: ""; position: absolute; inset: 0; background: var(--stripe); opacity: 0.9;
}
.media::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("images/logo-light.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(46%, 240px) auto;
  opacity: 0.22;
}
.media.is-empty img { display: none; }
.media-cap {
  font-size: 0.8rem; color: var(--gray); margin-top: 10px; display: block;
}

.avatar {
  width: 88px; height: 88px; border-radius: 50%; flex: none;
  background: var(--indigo); color: var(--white);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em;
}

/* ------------------------------------------------------------- timeline */
.timeline { display: grid; gap: var(--s3); counter-reset: step; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
.step {
  border-top: 3px solid var(--green); padding-top: var(--s3);
}
.step .day {
  font-family: var(--display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark);
  margin-bottom: 8px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--gray); font-size: 0.95rem; margin: 0; }

/* ------------------------------------------------------------ locations */
.states {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px; margin-bottom: var(--s4);
}
.st {
  aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: var(--radius-soft);
  font-family: var(--display); font-weight: 700; font-size: 0.82rem;
  border: 1px solid var(--gray-line); color: var(--gray); background: var(--white);
}
.st.on { background: var(--accent); border-color: var(--green); color: var(--white); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 0.87rem; color: var(--gray); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--gray-line); }
.swatch.on { background: var(--accent); border-color: var(--green); }

.loc-grid { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .loc-grid { grid-template-columns: repeat(4, 1fr); } }
.loc-state { border-top: 2px solid var(--indigo); padding-top: var(--s2); }
.loc-state h3 { font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.loc-state ul { list-style: none; padding: 0; margin: 0; }
.loc-state li { font-size: 0.93rem; color: var(--gray); margin-bottom: 4px; }

/* ----------------------------------------------------------------- form */
.form-wrap {
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--radius); padding: var(--s4);
}
@media (min-width: 640px) { .form-wrap { padding: var(--s5); } }
.field { margin-bottom: var(--s3); }
.field label {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.02em; margin-bottom: 8px; color: var(--ink);
}
.field .req { color: var(--green-dark); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  padding: 13px 16px; border: 1px solid var(--gray-line); border-radius: var(--radius-sm);
  background: var(--white); transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--indigo); }
.field textarea { min-height: 110px; resize: vertical; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C0392B; }
.err { display: none; color: #C0392B; font-size: 0.83rem; margin-top: 6px; }
.field.has-error .err { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.84rem; color: var(--gray); margin-top: var(--s2); }
.form-status { margin-top: var(--s2); font-size: 0.95rem; }
.form-status[data-state="error"] {
  color: #8E2A1F; background: #FBEAE7; border: 1px solid #E9BFB8;
  padding: 14px 16px; border-radius: var(--radius);
}
.form-success {
  border: 2px solid var(--green); border-radius: var(--radius);
  padding: var(--s4); background: rgba(111,190,68,0.08);
}
.form-success h3 { color: var(--indigo); }
button[disabled] { opacity: 0.6; cursor: progress; }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 14px; margin-bottom: var(--s3); align-items: flex-start; }
.contact-list svg { flex: none; color: var(--green-dark); margin-top: 4px; }
.contact-list a { color: var(--indigo); }
.contact-list .lbl { display: block; font-family: var(--display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 2px; }

/* ------------------------------------------------------------- cta band */
.cta-band { background: var(--char-800); color: var(--white); position: relative; overflow: hidden; border-top: 3px solid var(--accent-bright); }
.cta-band::after {
  content: ""; position: absolute; inset: 0; background: var(--stripe); opacity: 0.6;
  -webkit-mask-image: linear-gradient(75deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(75deg, #000 0%, transparent 60%);
}
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); max-width: 20ch; }
.cta-band p { color: rgba(255,255,255,0.78); max-width: 54ch; }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--char-900); color: rgba(255,255,255,0.7); padding: var(--s6) 0 var(--s3); font-size: 0.93rem; border-top: 3px solid var(--accent-bright); }
.foot-grid { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.site-footer h3, .site-footer h4 {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); margin-bottom: var(--s2);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: rgba(255,255,255,0.7); text-decoration: none; }
.site-footer a:hover { color: var(--green); }
.foot-tag { font-family: var(--display); font-weight: 700; color: var(--white); font-size: 1.05rem; letter-spacing: -0.01em; margin: var(--s2) 0; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--s5);
  padding-top: var(--s3); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: var(--s2) var(--s4);
  align-items: center; font-size: 0.85rem; color: rgba(255,255,255,0.62);
}
.foot-mid { grid-column: 2; text-align: center; }
@media (max-width: 700px) {
  .foot-bottom { grid-template-columns: 1fr; }
  .foot-mid { grid-column: auto; text-align: left; }
}
.foot-star {
  width: 150px; height: auto; display: block;
  margin-top: var(--s3);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
@media (max-width: 900px) { .foot-star { width: 132px; margin-top: var(--s2); } }
.badge {
  border: 1px solid rgba(255,255,255,0.22); border-radius: 2px;
  padding: 6px 10px; font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-family: var(--display); font-weight: 700;
  color: rgba(255,255,255,0.8);
  display: inline-block;
}
.foot-credentials {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s3);
}
.cred-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 6px; min-height: 46px;
}
.cred-logo img { height: 34px; width: auto; display: block; }
.cred-logo--isn img { height: 46px; margin-top: -6px; }
.cred-logo--isn span {
  font-size: 0.62rem; letter-spacing: 0.05em; white-space: nowrap;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.cred-logo--linkedin { justify-content: center; }
.cred-logo--linkedin svg { height: 34px; width: 34px; border-radius: 6px; transition: transform .18s ease, filter .18s ease; }
.cred-logo--linkedin:hover svg, .cred-logo--linkedin:focus-visible svg { transform: translateY(-2px); }
.foot-google--wordmark {
  display: inline-flex; align-items: center;
  margin-top: var(--s2); margin-left: var(--s3);
  font-family: Arial, sans-serif; font-size: 1.25rem; font-weight: 600;
  letter-spacing: -0.075em; line-height: 1; text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}
.foot-google--wordmark:hover, .foot-google--wordmark:focus-visible {
  transform: translateY(-2px); filter: brightness(1.08);
}
.google-blue { color: #4285f4; }
.google-red { color: #ea4335; }
.google-yellow { color: #fbbc05; }
.google-green { color: #34a853; }
.foot-everify { margin-top: var(--s2); vertical-align: middle; }
.foot-otuvy {
  display: inline-block; vertical-align: middle;
  margin-top: var(--s2); margin-left: var(--s2);
}
.foot-otuvy img { height: 26px; width: auto; display: block; border-radius: 5px; }
.foot-otuvy:hover img, .foot-otuvy:focus-visible img { opacity: 0.85; }
@media (max-width: 480px) { .foot-credentials { gap: var(--s3) var(--s4); } }

/* =========================================================== MOTION LAYER
   Scroll entrances. NOTHING here applies until main.js puts .rv on <html>,
   so a JS failure or a no-JS browser still renders the full page. Fires
   once per element, like a page you open for the first time.
   ---------------------------------------------------------------------- */
:root {
  --rv-dur:  0.78s;
  --rv-ease: cubic-bezier(0.22, 0.68, 0.32, 1);
  --rv-y:    30px;   /* vertical travel */
  --rv-x:    58px;   /* horizontal travel */
  --rv-step: 85ms;   /* stagger between siblings */
}

html.rv .reveal,
html.rv .rv-i {
  opacity: 0;
  transition: opacity var(--rv-dur) var(--rv-ease),
              transform var(--rv-dur) var(--rv-ease);
  transition-delay: var(--rv-d, 0ms);
}
html.rv [data-rv="up"]    { transform: translate3d(0, var(--rv-y), 0); }
html.rv [data-rv="rise"]  { transform: translate3d(0, calc(var(--rv-y) * 1.7), 0); }
html.rv [data-rv="left"]  { transform: translate3d(calc(var(--rv-x) * -1), 0, 0); }
html.rv [data-rv="right"] { transform: translate3d(var(--rv-x), 0, 0); }
html.rv [data-rv="pop"]   { transform: translate3d(0, var(--rv-y), 0) scale(0.97); }

html.rv .reveal.in,
html.rv .rv-i.in { opacity: 1; transform: none; }

/* a container whose children animate instead of itself */
html.rv .rv-group { opacity: 1 !important; transform: none !important; transition: none; }

/* Below 900px .split collapses to one column, so a sideways entrance would
   push the full-width child off screen. Slide vertically instead. */
@media (max-width: 899px) {
  html.rv [data-rv="left"], html.rv [data-rv="right"] {
    transform: translate3d(0, var(--rv-y), 0);
  }
}

/* kill switches: reduced motion, and the preview toggle */
@media (prefers-reduced-motion: reduce) {
  html.rv .reveal, html.rv .rv-i {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}
html.rv-off .reveal, html.rv-off .rv-i {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* ------------------------------------------------- margin rail artwork
   Thin dotted threads in the outer gutters. Sized so they can never
   reach the content column, pointer-events off, decorative only.      */
.rails { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: none; }
html.rails-on .rails { display: block; }

.rail {
  position: absolute; top: 0; bottom: 0;
  width: max(0px, calc((100vw - var(--wrap)) / 2 - 14px));
  max-width: 180px;
  opacity: 0.4;
  overflow: hidden;
}
.rail--l { left: 0; }
.rail--r { right: 0; }
.rail svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rail path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rail .p1 { stroke: var(--accent-bright); stroke-width: 2;   stroke-dasharray: 2 12; }
.rail .p2 { stroke: var(--green);         stroke-width: 2;   stroke-dasharray: 2 16; }
.rail .p3 { stroke: var(--accent-bright); stroke-width: 1;   opacity: 0.42; }
.rail .tick { stroke: var(--green); stroke-width: 2; opacity: 0.55; }

/* the gutters do not exist on laptops, tablets or phones, so neither do rails */
@media (max-width: 1279px) { .rails { display: none !important; } }

/* --------------------------------------------------------- layout width
   The column steps up with the screen instead of jumping to one big number,
   so a 1440 laptop still keeps a real margin and the rails have somewhere to
   live, while a 1920 monitor gets the full spread. html.narrow restores the
   original 1200 for side-by-side comparison.                              */
@media (min-width: 1560px) { :root { --wrap: 1360px; } }
@media (min-width: 1800px) { :root { --wrap: 1440px; } }
html.narrow { --wrap: 1200px; }
@media (min-width: 1240px) { .wrap { padding-left: var(--s4); padding-right: var(--s4); } }

/* ---------------------------------------------------------------- misc */
.rule { height: 3px; background: var(--gray-line); margin: var(--s5) 0; position: relative; }
.rule::after { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 3px;
  background: linear-gradient(90deg, var(--green) 55%, var(--accent) 55%); }
.prevents {
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--gray-line);
  font-size: 0.88rem; color: var(--indigo); font-weight: 600;
}
.tasks { columns: 1; font-size: 0.96rem; color: var(--gray); }
@media (min-width: 640px) { .tasks { columns: 2; column-gap: var(--s5); } }
.tasks li { break-inside: avoid; }
.small { font-size: 0.87rem; color: var(--gray); }
.stack > * + * { margin-top: var(--s3); }

/* --------------------------------------------------------- screen reader */
.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;
}

/* ------------------------------------------------------------- insights */
.article {
  display: grid; gap: var(--s2); border: 1px solid var(--gray-line);
  border-radius: var(--radius); padding: var(--s4); background: var(--white);
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.article:hover { border-color: var(--indigo); transform: translateY(-2px); }
.article-meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--display); font-weight: 700; color: var(--gray);
}
.tag {
  background: var(--accent); color: var(--white);
  padding: 4px 12px; border-radius: var(--radius-pill); letter-spacing: 0.09em;
  border: 1.5px solid var(--green);
}
.article h3 { font-size: 1.35rem; margin: 0; }
.article p { color: var(--gray); font-size: 0.97rem; margin: 0; }
.article-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: var(--display); font-weight: 700; font-size: 0.88rem; color: var(--indigo);
}
.article:hover .article-go { color: var(--green-dark); }

.article--feature { background: var(--char-800); border-color: var(--char-800); color: var(--white); }
.article--feature h3 { color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.article--feature p { color: rgba(255,255,255,0.76); font-size: 1.05rem; }
.article--feature .article-meta { color: rgba(255,255,255,0.66); }
.article--feature .tag { background: var(--green); color: var(--indigo-ink); border: 1.5px solid var(--accent); }
.article--feature .article-go { color: var(--green); }
.article--feature:hover { border-color: var(--green); }

.article-empty {
  border: 1px dashed var(--gray-line); border-radius: var(--radius);
  padding: var(--s5); text-align: center; color: var(--gray);
}

/* -------------------------------------------------------- article layout */
.series {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--indigo-ink); background: var(--green);
  padding: 7px 16px; border-radius: var(--radius-pill); margin-bottom: var(--s3);
  border: 2px solid var(--accent);
}
.byline {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  font-size: 0.87rem; color: rgba(255,255,255,0.72); margin-top: var(--s3);
}
.byline .dot { color: var(--green); }

.prose { max-width: 44rem; margin: 0 auto; font-size: 1.07rem; }
.prose > p { margin-bottom: var(--s3); }
.prose h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: var(--s6) 0 var(--s2);
  padding-top: var(--s2); position: relative;
}
.prose h2 .n {
  display: block; font-size: 0.74rem; letter-spacing: 0.16em;
  color: var(--green-dark); margin-bottom: 10px; font-weight: 700;
}
.prose h2:first-child { margin-top: 0; }
.prose .kicker {
  font-size: 1.24rem; line-height: 1.55; color: var(--ink); font-weight: 500;
  border-left: 4px solid var(--green); padding-left: var(--s3); margin-bottom: var(--s5);
}
.pull {
  margin: var(--s6) 0; padding: var(--s5) var(--s4);
  background: var(--char-800); border-radius: var(--radius); color: var(--white);
  font-family: var(--display); font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(1.25rem, 2.3vw, 1.7rem); line-height: 1.28;
}
.pull span { color: var(--green); display: block; margin-top: 12px; font-size: 0.95rem;
  font-family: var(--body); font-weight: 500; letter-spacing: 0; line-height: 1.5; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s5); }
.tags span {
  font-size: 0.8rem; color: var(--gray); border: 1px solid var(--gray-line);
  padding: 5px 13px; border-radius: var(--radius-pill);
}

/* before and after */
.ba { display: grid; gap: var(--s2); margin: var(--s5) 0; }
@media (min-width: 640px) { .ba { grid-template-columns: 1fr 1fr; } }
.ba figure { margin: 0; position: relative; }
.ba .media { aspect-ratio: 3 / 4; }
.ba .lbl {
  position: absolute; top: 0; left: 0; z-index: 3;
  font-family: var(--display); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 14px;
  color: var(--white);
}
.ba .lbl.before { background: #B23A2E; }
.ba .lbl.after { background: var(--green-dark); }
.ba-cap { text-align: center; font-size: 0.85rem; color: var(--gray); margin-top: 4px; }

.author-box {
  border: 1px solid var(--gray-line); border-left: 4px solid var(--green);
  border-radius: var(--radius); padding: var(--s4); background: var(--paper);
  margin-top: var(--s6);
}
.author-box h3 { margin-bottom: 10px; }
.author-box p { color: var(--gray); font-size: 0.97rem; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.02em; color: var(--indigo); margin-bottom: var(--s4);
}
.back-link:hover { color: var(--green-dark); }

.prose img { max-width: 100%; height: auto; }

.article-art {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  margin-bottom: var(--s2);
}
.article--feature .article-art { margin-bottom: var(--s3); }

/* ------------------------------------------------- indigo headings on light */
.section:not(.section--ink):not(.cta-band) h2,
.section--paper h2,
.prose h2 { color: var(--accent); }
.section:not(.section--ink) .head h2 { color: var(--accent); }
/* keep dark-section headings white */
.section--ink h2, .cta-band h2, .hero h1, .hero h2 { color: var(--white); }
.prose h2 { color: var(--accent); }
.prose h2 .n { color: var(--green-dark); }

.section--ink .card h3, .article--feature h3 { color: var(--white); }
.rung h3 { color: var(--white); }




/* ------------------------------------------------------- staffing band */
.staffing-split { align-items: center; }
.staffing-card {
  display: block; text-decoration: none;
  background: var(--white); border: 1px solid var(--gray-line);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
  padding: var(--s5); text-align: center;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.staffing-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59,42,122,0.14);
}
.staffing-card img {
  max-width: 340px; width: 100%; height: auto; margin: 0 auto var(--s3);
  border-radius: var(--radius-soft);
}
.staffing-services {
  display: block; font-size: 0.86rem; color: var(--gray);
  font-family: var(--display); font-weight: 700; letter-spacing: 0.04em;
}

/* coverage banner slot: native 4:1, no placeholder overlay */
.media--banner { aspect-ratio: 1584 / 396; background: #0E1014; }
.media--banner::before, .media--banner::after { display: none; }
.media--banner img { display: block; }

/* -------------------------------------------------------- neon tagline band */
.neon-band {
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(146,123,230,0.16), transparent 55%),
    radial-gradient(120% 140% at 85% 100%, rgba(111,190,68,0.16), transparent 55%),
    var(--char-900);
  padding: var(--s8) 0;
  text-align: center;
  border-top: 3px solid var(--green);
  box-shadow: 0 3px 0 0 var(--accent-bright);
  overflow: hidden;
}
.neon-tagline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #EDEEF2;
  margin: 0;
  text-shadow: 0 0 18px rgba(255,255,255,0.12);
}
.neon-p {
  color: #B79CFF;
  text-shadow:
    0 0 6px rgba(146,123,230,0.9),
    0 0 18px rgba(146,123,230,0.7),
    0 0 38px rgba(120,90,220,0.55),
    0 0 70px rgba(120,90,220,0.35);
}
.neon-g {
  color: #A6F06E;
  text-shadow:
    0 0 6px rgba(111,190,68,0.9),
    0 0 18px rgba(111,190,68,0.75),
    0 0 38px rgba(90,200,50,0.55),
    0 0 70px rgba(90,200,50,0.35);
}
@media (prefers-reduced-motion: no-preference) {
  .neon-p { animation: flick-p 6s ease-in-out infinite; }
  .neon-g { animation: flick-g 6s ease-in-out infinite; }
}
@keyframes flick-p {
  0%,100% { opacity: 1; }
  47% { opacity: 1; }
  48% { opacity: 0.72; }
  49% { opacity: 1; }
}
@keyframes flick-g {
  0%,100% { opacity: 1; }
  72% { opacity: 1; }
  73% { opacity: 0.7; }
  74% { opacity: 1; }
}

/* ------------------------------------------------------- guarantee block */
.guarantee-callout {
  background: var(--paper);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  margin-top: var(--s4);
}
.guarantee-callout .eyebrow { color: var(--green-dark); }
.guarantee-callout p:last-child { color: var(--ink); font-size: 1.05rem; margin: 0; }
.guarantee-list li { align-items: flex-start; }
.guarantee-list strong { color: var(--accent); font-family: var(--display); }
.guarantee-list--svc strong { color: var(--green-dark); }
.svc-dot {
  flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--accent);
}

/* ============================================================ ROI calculator */
.roi { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 900px) { .roi { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

.roi-inputs { display: grid; gap: var(--s3); }
.roi-group {
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--radius); padding: var(--s4);
}
.roi-group--accent { border-left: 4px solid var(--accent); }
.roi-group h3 {
  font-size: 1.02rem; color: var(--accent); margin-bottom: var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--gray-line);
}
.roi-sub, .roi-group h3 .roi-sub {
  font-family: var(--body); font-weight: 400; font-size: 0.82rem;
  color: var(--gray); letter-spacing: 0; text-transform: none;
}
.roi-field { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.roi-field:last-child { margin-bottom: 0; }
.roi-field label { font-size: 0.92rem; color: var(--ink); flex: 1; display: flex; align-items: center; gap: 6px; }
.roi-field input {
  width: 110px; flex: none; text-align: right;
  font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink);
  padding: 10px 14px; border: 1px solid var(--gray-line); border-radius: var(--radius-sm);
  background: var(--paper);
}
.roi-field input:focus { border-color: var(--accent); background: var(--white); outline: none; box-shadow: 0 0 0 3px rgba(59,42,122,0.35); }
.roi-money, .roi-pct { display: flex; align-items: center; flex: none; }
.roi-money span, .roi-pct span {
  font-family: var(--display); font-weight: 700; color: var(--gray); font-size: 0.95rem;
}
.roi-money span { margin-right: 4px; }
.roi-pct span { margin-left: 6px; }
.roi-money input, .roi-pct input { width: 88px; }

/* tooltip */
.i {
  display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none;
  border-radius: 50%; background: var(--gray-line); color: var(--ink);
  font-size: 0.68rem; font-weight: 700; font-style: normal; cursor: help;
  position: relative; font-family: var(--body);
}
.i:hover, .i:focus { background: var(--accent); color: var(--white); }
.i::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); width: 220px; background: var(--char-900); color: #fff;
  font-size: 0.78rem; font-weight: 400; line-height: 1.45; letter-spacing: 0;
  padding: 10px 12px; border-radius: var(--radius-soft); text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 20;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.i:hover::after, .i:focus::after { opacity: 1; }
@media (max-width: 900px) { .i::after { width: 170px; left: auto; right: 0; transform: none; } }

/* results panel */
.roi-results {
  background: var(--char-800); color: #fff; border-radius: var(--radius);
  padding: var(--s5); border-top: 3px solid var(--green);
  box-shadow: 0 3px 0 0 var(--accent-bright);
  position: sticky; top: 100px;
}
@media (max-width: 900px) { .roi-results { position: static; } }
.roi-headline { text-align: center; margin-bottom: var(--s4); }
.roi-headline-label {
  display: block; font-family: var(--display); font-size: 0.76rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}
.roi-total {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; color: #fff;
  letter-spacing: -0.02em;
}
.roi-mult {
  display: block; margin-top: 12px; font-family: var(--display); font-weight: 700;
  font-size: 1.05rem; color: var(--green);
}
.roi-bar {
  display: flex; height: 34px; border-radius: 4px; overflow: hidden;
  margin: var(--s4) 0 var(--s2); border: 1px solid rgba(255,255,255,0.15);
}
.roi-bar-wages { background: rgba(255,255,255,0.30); transition: width .4s ease; }
.roi-bar-hidden { background: var(--green); transition: width .4s ease; }
.roi-bar-legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 0.85rem; color: rgba(255,255,255,0.8); margin-bottom: var(--s4); }
.roi-bar-legend strong { color: #fff; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.sw-wages { background: rgba(255,255,255,0.45); }
.sw-hidden { background: var(--green); }

.roi-callouts { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.roi-callout {
  background: rgba(255,255,255,0.05); border-left: 3px solid var(--green);
  border-radius: 4px; padding: var(--s2) var(--s3);
}
.roi-callout--purple { border-left-color: var(--accent-bright); }
.roi-callout-num {
  display: block; font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  color: #fff; line-height: 1;
}
.roi-callout-lbl { display: block; font-size: 0.85rem; color: rgba(255,255,255,0.72); margin-top: 4px; }
/* Lighter indigo (already used by .neon-p) so 0.85rem text clears AA 4.5:1
   on the dark panel. --accent-bright measures 3.78:1 at this size. */
.roi-callout--purple .roi-callout-lbl strong { color: #B79CFF; }

.roi-cta { border-top: 1px solid rgba(255,255,255,0.15); padding-top: var(--s3); }
.roi-cta p { font-size: 0.95rem; color: rgba(255,255,255,0.85); margin-bottom: var(--s3); }
.roi-cta .btn { width: 100%; }
.roi-disclaimer { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: var(--s3); margin-bottom: 0; }

/* ---------------------------------------------------- mascot banner (Insights) */
.mascot-banner-wrap {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s3) var(--s2);
}
.mascot-banner-wrap img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--char-line);
  box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent-bright);
}
.mascot-caption {
  text-align: center; color: var(--gray); font-style: italic;
  font-size: 0.92rem; margin: var(--s2) 0 0;
}

/* uniform insight cards: same size, crisp images, no oversized featured */
.article-grid .article { display: flex; flex-direction: column; }
.article-grid .article-art {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); margin-bottom: var(--s2);
}
.article-grid .article h3 { font-size: 1.2rem; }
.article-grid .article p { font-size: 0.95rem; }

/* ---------------------------------------------- hero staffing cross-sell */
.hero-staffing {
  display: inline-flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4); max-width: 680px;
  padding: 14px 18px; border-radius: var(--radius);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--char-line);
  border-left: 3px solid var(--accent-bright);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.hero-staffing:hover {
  border-color: var(--green); background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}
.hero-staffing img {
  height: 88px; width: auto; flex: none; display: block;
  background: #fff; border-radius: var(--radius-sm); padding: 8px 12px;
}
.hero-staffing-text { display: flex; flex-direction: column; gap: 3px; }
.hero-staffing-text strong {
  color: #fff; font-family: var(--display); font-weight: 700; font-size: 1rem;
  line-height: 1.2;
}
.hero-staffing-text > span { color: rgba(255,255,255,0.72); font-size: 0.9rem; line-height: 1.4; }
.hero-staffing-go {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--green); font-weight: 600; white-space: nowrap;
}
.hero-staffing:hover .hero-staffing-go { color: #A6F06E; }
@media (max-width: 640px) {
  .hero-staffing { flex-direction: column; align-items: flex-start; gap: var(--s2); }
}

/* ---------------------------------------------- decorative equipment banners */
.equip-divider {
  max-width: 640px; margin: var(--s6) auto 0; padding: 0 var(--s3);
}
.equip-divider img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--char-line);
}
/* bright themed banners between Services scope sections: slim strips */
.svc-band {
  margin: 4px auto 20px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--gray-line); max-width: 760px;
}
.svc-band img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------- safety page */
.haz-tag {
  display: inline-block; font-family: var(--display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: var(--accent); border: 1.5px solid var(--green);
  padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: var(--s2);
}
.haz-control {
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--gray-line); font-size: 0.95rem;
}
.haz-control strong { color: var(--green-dark); }

.card--verify { display: flex; flex-direction: column; }
.verify-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.verify-badge {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  color: #fff; background: var(--accent); border: 2px solid var(--green);
  padding: 6px 18px; border-radius: var(--radius-pill); letter-spacing: 0.02em;
}
.verify-badge--eco { background: var(--green-dark); border-color: var(--accent); }
.verify-star { height: 72px; width: auto; flex: none; }
.verify-list { list-style: none; margin: var(--s2) 0; padding: 0; display: grid; gap: 10px; }
.verify-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.94rem; line-height: 1.5; }
.verify-list li svg { color: var(--green-dark); flex: none; margin-top: 3px; }
.verify-note { font-size: 0.9rem; color: var(--gray); margin-top: auto; padding-top: var(--s2); }
.fineprint { font-size: 0.75rem; color: var(--gray); line-height: 1.55; margin-top: var(--s4); max-width: 70rem; }

/* full-image media: show the whole picture, no crop (safety page photos) */
.media--full { aspect-ratio: auto; background: transparent; border-radius: var(--radius); overflow: hidden; }
.media--full img { position: static; width: 100%; height: auto; object-fit: contain; border-radius: var(--radius); }

/* staffing cross-sell on light (paper) sections of interior pages */
.hero-staffing--light {
  background: var(--white); border: 1px solid var(--gray-line);
  border-left: 3px solid var(--accent); margin-top: 0;
}
.hero-staffing--light:hover { border-color: var(--green); border-left-color: var(--green); background: var(--white); }
.hero-staffing--light .hero-staffing-text strong { color: var(--accent); }
.hero-staffing--light .hero-staffing-text > span { color: var(--gray); }
.hero-staffing--light .hero-staffing-go { color: var(--green-dark); }
.hero-staffing--light:hover .hero-staffing-go { color: var(--green-dark); }

/* ------------------------------------------------- client / customer chips */
.client-grid {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  max-width: 62rem; margin: 0 auto;
}
.client-chip {
  background: var(--white); border: 1px solid var(--gray-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 12px 20px;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--ink); letter-spacing: -0.01em;
  transition: border-color .16s ease, transform .16s ease;
}
.client-chip:nth-child(even) { border-left-color: var(--green); }
.client-chip:hover { transform: translateY(-2px); border-color: var(--green); }
@media (max-width: 640px) { .client-chip { font-size: 0.92rem; padding: 10px 16px; } }

/* ------------------------------------------------------------------ FAQ page */
.faq-wrap { max-width: 52rem; }
.faq-section { margin-bottom: var(--s5); }
.faq-section h2 { font-size: 1.4rem; color: var(--accent); margin-bottom: var(--s3); }
.faq-item {
  border: 1px solid var(--gray-line); border-radius: var(--radius);
  margin-bottom: 12px; background: var(--white); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 22px;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-plus { position: relative; width: 16px; height: 16px; flex: none; }
.faq-plus::before, .faq-plus::after {
  content: ""; position: absolute; background: var(--green-dark); border-radius: 2px;
}
.faq-plus::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-plus::after { left: 7px; top: 0; width: 2px; height: 16px; transition: transform .2s ease; }
.faq-item[open] .faq-plus::after { transform: rotate(90deg); opacity: 0; }
.faq-item[open] summary { color: var(--accent); border-bottom: 1px solid var(--gray-line); }
.faq-answer { padding: 16px 22px 20px; }
.faq-answer p { margin: 0; color: var(--gray); line-height: 1.65; }
.faq-answer a { color: var(--green-dark); font-weight: 600; }
.faq-more {
  margin-top: var(--s4); padding: var(--s4); background: var(--paper);
  border-radius: var(--radius); border-left: 3px solid var(--green);
}
.faq-more h3 { color: var(--accent); margin-bottom: 6px; }
.faq-more a { color: var(--green-dark); font-weight: 600; }

/* -------------------------------------------------- process strip + metrics */
.proc-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.proc-step {
  background: var(--white); border: 1px solid var(--gray-line);
  border-top: 3px solid var(--accent); border-radius: var(--radius);
  padding: var(--s3);
}
.proc-step:nth-child(even) { border-top-color: var(--green); }
.proc-num {
  font-family: var(--display); font-weight: 700; font-size: 1.6rem;
  color: var(--green-dark); display: block; margin-bottom: 8px;
}
.proc-step h3 { font-size: 1.1rem; color: var(--accent); margin-bottom: 6px; }
.proc-step p { font-size: 0.92rem; color: var(--gray); margin: 0; line-height: 1.55; }
@media (max-width: 900px) { .proc-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .proc-strip { grid-template-columns: 1fr; } }

.metric-band {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
  text-align: center;
}
.metric { padding: 12px 8px; border-left: 1px solid var(--char-line); }
.metric:first-child { border-left: none; }
.metric-num {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--green);
  line-height: 1.1;
}
.metric-label {
  display: block; font-size: 0.8rem; color: rgba(255,255,255,0.72);
  margin-top: 6px; line-height: 1.35;
}
@media (max-width: 900px) { .metric-band { grid-template-columns: repeat(3, 1fr); } .metric:nth-child(4) { border-left: none; } }
@media (max-width: 640px) { .metric-band { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------- credential logos in stat areas */
.metric-logo {
  height: 34px; width: auto; display: block; margin: 0 auto 8px;
}
.metric-logo--isn { height: 46px; margin-top: -6px; }
.metric { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.trust-item--logo img { height: 30px; width: auto; display: block; margin: 0 auto 6px; }
.trust-item--logo .trust-isn { height: 42px; margin-top: -6px; margin-bottom: 2px; }
.trust-item--logo { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.qc-badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--white); border: 1px solid var(--gray-line); border-radius: var(--radius);
  padding: 8px 20px 8px 8px; margin-top: var(--s4);
  box-shadow: 0 3px 0 0 var(--accent-bright);
  text-decoration: none; transition: transform .18s ease, border-color .18s ease;
}
.qc-badge:hover, .qc-badge:focus-visible { border-color: var(--indigo); transform: translateY(-2px); }
.qc-badge img { height: 36px; width: auto; display: block; border-radius: 8px; }
.qc-badge span {
  font-family: var(--display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.02em; color: var(--accent); text-transform: uppercase;
}
@media (max-width: 480px) { .qc-badge { flex-wrap: wrap; } }

/* ------------------------------------- brand banner (medium, About page) */
.brand-banner-wrap { max-width: 850px; margin: 0 auto; padding: var(--s5) var(--s3) 0; }
.brand-banner-wrap img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--char-line);
  box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent-bright);
}

/* ------------------- green cross-link band (Safety -> Sustainability) */
.eco-link { display: grid; grid-template-columns: 340px 1fr; gap: var(--s5); align-items: center; }
.eco-link img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--gray-line);
  box-shadow: 0 3px 0 0 var(--accent), 0 6px 0 0 var(--green);
}
.eco-link h2 { font-size: 1.5rem; color: var(--accent); margin-bottom: var(--s2); }
.eco-link p { color: var(--gray); margin-bottom: var(--s3); }
@media (max-width: 900px) {
  .eco-link { grid-template-columns: 1fr; }
  .eco-link img { max-width: 340px; margin: 0 auto; }
}

/* ---------------------------------------------- split hero (Contact page) */
.hero--split .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center;
}
.hero--split .hero-art img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--char-line);
  box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent-bright);
}
@media (max-width: 900px) { .hero--split .wrap { grid-template-columns: 1fr; } }



/* ------------------------------------------- newsletter signup (The Clean Sweep) */
.news-cta { background: var(--char-800); }
.news-cta[hidden] { display: none; }
.news-inner {
  max-width: 820px; margin: 0 auto; text-align: center;
  border: 1px solid var(--char-line); border-radius: var(--radius);
  background: var(--char-700); padding: var(--s5) var(--s4);
  box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent-bright);
}
.news-inner .eyebrow { color: var(--green); justify-content: center; }
.news-inner h2 { color: var(--white); font-size: 1.6rem; margin-bottom: var(--s2); }
.news-inner p { color: rgba(255,255,255,0.75); margin: 0 auto var(--s4); max-width: 46ch; }
.news-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.news-email {
  flex: 1 1 280px; max-width: 340px;
  padding: 14px 18px; font-size: 1rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06);
  color: var(--white); font: inherit; }
.news-email::placeholder { color: rgba(255,255,255,0.45); }
.news-email:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(111,190,68,0.3);
}
.news-fine { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin: var(--s3) 0 0; }
.news-fine a { color: #B79CFF; font-weight: 600; } /* AA at 0.82rem on dark */
@media (max-width: 640px) { .news-form { flex-direction: column; align-items: stretch; } .news-email { max-width: none; } }

/* --------------- "Why HM Solutions, Inc" lockup above the thesis statement.
   Rebuilt in CSS rather than shipped as an image: the source was a 799px
   screenshot of text, which goes soft the moment it is scaled. This version is
   sharp at any size, readable by Google and screen readers, and recolours with
   the brand tokens. */
.why-lockup { text-align: center; margin: 0 auto var(--s5); }
.why-lockup-line {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 2vw, 20px); margin: 0; flex-wrap: nowrap;
}
.why-word {
  font-family: var(--display); font-weight: 800; color: var(--accent);
  font-size: clamp(1.7rem, 4.2vw, 2.7rem); line-height: 1; letter-spacing: -0.02em;
}
.why-lockup-line img { width: clamp(150px, 26vw, 270px); height: auto; display: block; }
.why-rule {
  display: block; width: 190px; max-width: 45%; height: 0;
  border-top: 2px solid var(--accent); border-bottom: 2px solid var(--green);
  margin: var(--s3) auto var(--s2);
}
/* The tagline reads as neon signage, echoing the neon logo. Brand green on
   white is only 2.30:1 and fails even the large-text bar, so it sits on an ink
   chip instead, where the same green hits 7:1 and actually looks neon. */
.why-tag { margin: 0; }
.why-tag span {
  display: inline-block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.1rem, 2.7vw, 1.45rem); letter-spacing: 0.005em;
  color: #8FD94F;
  background: var(--ink);
  padding: 11px 26px; border-radius: var(--radius-pill);
  text-shadow: 0 0 10px rgba(143,217,79,0.55), 0 0 26px rgba(143,217,79,0.25);
  box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent);
}
@media (max-width: 640px) { .why-tag span { padding: 9px 18px; } }

/* --------- thin green-to-purple divider, replaces the colour bands on Services */
.svc-rule {
  max-width: 760px; margin: 10px auto 30px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--green) 0%, var(--accent) 100%);
}
/* on dark sections the deep indigo disappears, so use the bright one */
.section--ink .svc-rule, .cta-band .svc-rule {
  background: linear-gradient(90deg, var(--green) 0%, var(--accent-bright) 100%);
}

/* ------------- Cost calculator stacked above the Request a walk button */
.header-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.header-roi {
  font-family: var(--display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.04em; color: var(--green); text-decoration: none;
  text-align: center; white-space: nowrap;
}
.header-roi:hover, .header-roi:focus-visible { color: var(--white); text-decoration: underline; }

/* ------------------------------------- Google review QR block, Contact page */
.review-qr {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5); padding: var(--s3);
  border: 1px solid var(--gray-line); border-radius: var(--radius); background: #fff;
  box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent);
}
.review-qr img { width: 118px; height: 118px; flex: none; display: block; }
.review-qr .lbl { display: block; font-family: var(--display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.review-qr p { margin: 6px 0 0; font-size: 0.92rem; color: var(--gray); }
.review-qr a { font-weight: 600; }
@media (max-width: 640px) { .review-qr { flex-direction: column; text-align: center; } }

/* Pin a split to the top instead of centring it. Used on the Why HM
   accountability chain, where the tall spine column left the heading floating
   in the middle with dead space above and below. */
.split--top { align-items: start; }

/* ------------- portrait job-site photos (phone shots, real sites, real crews) */
.site-shot { margin: 0; }
.site-shot img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--gray-line);
  box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent);
}
.section--ink .site-shot img { border-color: var(--char-line); box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent-bright); }
.site-shot figcaption {
  margin-top: 10px; font-size: 0.85rem; color: var(--gray);
  font-style: italic; text-align: center;
}
.section--ink .site-shot figcaption { color: rgba(255,255,255,0.6); }
.site-shot--sm { max-width: 300px; margin-left: auto; margin-right: auto; }
.site-shot--md { max-width: 420px; margin-left: auto; margin-right: auto; }

/* ------------------- BBB accreditation links (proof, one click from the badge) */
.proof-link {
  display: block; color: inherit; text-decoration: none;
  transition: opacity .18s ease, transform .18s ease;
}
.proof-link:hover, .proof-link:focus-visible { opacity: 0.82; transform: translateY(-1px); }
.inline-proof {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--green); text-underline-offset: 2px; text-decoration-thickness: 1.5px;
}
.inline-proof:hover, .inline-proof:focus-visible { color: var(--green-dark); }

/* ---------------------------------------------- team photo grids + placeholders */
.photo-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; margin-top: var(--s4); }
@media (min-width: 640px)  { .photo-grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .photo-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--gray-line); box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent); }
.photo-grid figcaption { margin-top: 8px; font-size: 0.82rem; color: var(--gray); font-style: italic; }

/* PLACEHOLDER. Deliberately loud. These must never reach a live page, and the
   QA check fails the launch build if any survive. Replace with a real photo,
   do not just delete the label. */
.photo-slot {
  min-height: 118px; border: 2px dashed #C9A227; border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, #FFFBEB, #FFFBEB 10px, #FEF6DC 10px, #FEF6DC 20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--s2); gap: 3px;
}
.photo-slot b { font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #8A6D0B; }
.photo-slot code { font-size: 0.76rem; color: var(--ink); background: rgba(0,0,0,0.05);
  padding: 2px 7px; border-radius: 3px; }
.photo-slot span { font-size: 0.72rem; color: #7A6212; line-height: 1.35; }

/* ------------------------------- onboarding pathway (Careers), live HTML not an image.
   Was a 1280px JPEG squeezed into a 560px column: soft, and the labels were
   unreadable. As markup it is sharp at any size, real text for search and screen
   readers, and it stacks instead of shrinking on a phone. */
.path { position: relative; margin-top: var(--s5); }
.path-steps {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4);
  grid-template-columns: 1fr; position: relative;
}
.path-step { position: relative; padding-left: 54px; }
.path-dot {
  position: absolute; left: 0; top: 2px; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 0.86rem; color: var(--accent);
}
.path-step:last-child .path-dot {
  background: var(--green); border-color: var(--accent); color: var(--ink);
  box-shadow: 0 0 0 6px rgba(111,190,68,0.22);
}
.path-step h3 { margin: 4px 0 4px; font-size: 1.08rem; color: var(--accent); }
.path-step p { margin: 0; font-size: 0.92rem; color: var(--gray); }
/* the connector */
.path-steps::before {
  content: ""; position: absolute; left: 17px; top: 34px; bottom: 34px; width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--green));
}
@media (min-width: 900px) {
  .path-steps { grid-template-columns: repeat(5, 1fr); gap: var(--s3); }
  .path-step { padding-left: 0; padding-top: 52px; text-align: left; }
  .path-dot { left: 0; top: 0; width: 38px; height: 38px; font-size: 0.9rem; }
  .path-steps::before {
    left: 19px; right: 19px; top: 18px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--green));
  }
}

/* --------------------------------------------- founder portrait (About page) */
.founder-card { max-width: 300px; }
.founder-card img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--gray-line);
  box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent);
}
.founder-card h3 { margin: 16px 0 2px; font-size: 1.12rem; color: var(--accent); }
.founder-card .small { margin: 0; }
@media (max-width: 900px) { .founder-card { margin: 0 auto; } }

/* A grid holding only placeholders stays narrow. Once real photos replace them
   the grid returns to full width on its own. */
.photo-grid--pending { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------------- account photos: portrait-first, capped at half source width */
.acct { margin: var(--s5) 0 0; }
.acct-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .acct-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .acct-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.acct figure { margin: 0; }
.acct img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--gray-line);
  box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent);
}
.section--ink .acct img { border-color: var(--char-line); box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent-bright); }
.acct figcaption {
  margin-top: 9px; font-size: 0.85rem; color: var(--gray); font-style: italic; line-height: 1.4;
}
.section--ink .acct figcaption { color: rgba(255,255,255,0.62); }
/* single portrait, centred, never wider than half its source */
.acct--one { max-width: 440px; margin-left: auto; margin-right: auto; }
.acct--sm  { max-width: 300px; margin-left: auto; margin-right: auto; }
/* The floor care strip. Five photos in three orientations, so letting each cell
   size itself produced ragged rows and big holes. Uniform 3:2 tiles instead:
   every image fills the same frame and the grid reads as one set. The subject
   is the floor surface, so a crop costs nothing here. */
.acct-strip {
  display: grid; gap: var(--s3); grid-template-columns: 1fr;
  max-width: 960px; margin-left: auto; margin-right: auto;
}
@media (min-width: 640px)  { .acct-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .acct-strip { grid-template-columns: repeat(3, 1fr); } }
/* Six tiles, no captions. The photos carry it; the heading above says the rest. */
.acct-strip figure { margin: 0; }
.acct-strip img { aspect-ratio: 3 / 2; object-fit: cover; object-position: center 62%; }
.acct-strip img[src*="floor-aisle"], .acct-strip img[src*="floor-servery"],
.acct-strip img[src*="floor-epoxy"] { object-position: center 55%; }

/* Paired photos sit at a calmer size than a full-width two-up. */
.acct-pair { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Team and careers photos are 800px stock stand-ins, so display is capped at
   400px per the half-source rule. Uniform 3:2 tiles keep the grids tidy the way
   the floor strip does. Swap in real team photos and only the files change. */
.photo-grid figure { margin: 0; }
.photo-grid img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  border-radius: var(--radius); border: 1px solid var(--gray-line);
  box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent);
}
.photo-grid--3 { max-width: 1000px; margin-left: auto; margin-right: auto; }
.photo-grid--2 { max-width: 700px; margin-left: auto; margin-right: auto; }
/* Source is a tall portrait crop with the crew member and "HM Solutions" vest
   logo in the upper third; a centered crop pushed the logo to the frame edge. */
.photo-grid img[src*="careers-floor-buffer"] { object-position: center 32%; }

/* Wide lobby banner beside "Where we work, we live". Source is 800px, so 560 is
   1.4x rather than the usual 2x. Acceptable here: it is a wide, low-detail
   scene, not type or fine texture. Nothing crops; the full frame shows. */
.community-photo { max-width: 560px; margin: 0 auto; }
.community-photo figure { margin: 0; }
.community-photo img {
  width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--gray-line);
  box-shadow: 0 3px 0 0 var(--green), 0 6px 0 0 var(--accent);
}


/* ============ responsive pass: standard thresholds are 640 and 900 ============ */

/* Stacked hero art centres instead of pinning to one side (Insights, Contact). */
@media (max-width: 900px) {
  .hero--split .hero-art { margin-left: auto; margin-right: auto; margin-top: 24px; }
}
/* desktop only: the small insights hero image sits against the right column edge */
@media (min-width: 900px) {
  .hero--split .hero-art.capw-340 { margin-right: 0; }
}

/* Footer links get real touch targets (were ~20px tall). */
.foot-grid a { display: inline-block; padding: 6px 0; }

/* Width-cap utilities replacing inline px styles. width:100% guarantees the
   element shrinks with the viewport; max-width only sets the desktop ceiling. */
.capw-340, .capw-400, .capw-460, .capw-560, .capw-600, .capw-640, .capw-720, .capw-820 {
  width: 100%; margin-left: auto; margin-right: auto;
}
.capw-340 { max-width: 340px; } .capw-400 { max-width: 400px; }
.capw-460 { max-width: 460px; } .capw-560 { max-width: 560px; }
.capw-600 { max-width: 600px; } .capw-640 { max-width: 640px; }
.capw-720 { max-width: 720px; } .capw-820 { max-width: 820px; }
@media (max-width: 640px) {
  .capw-560, .capw-600, .capw-640, .capw-720, .capw-820 { max-width: 100%; }
}

/* ======================= PHONE HEADER, HARDENED (<=640px) =======================
   Lives at the ABSOLUTE END of the stylesheet: an earlier attempt sat above the
   base header rules and silently lost the cascade. Every constraint here is
   belt-and-braces so no single failure can push the menu button off screen. */
@media (max-width: 640px) {
  .bar { flex-wrap: nowrap; min-width: 0; gap: 8px; min-height: 56px; }
  /* brand physically cannot exceed 45% of the bar */
  .site-header .brand { max-width: 45%; padding: 3px 7px; border-width: 1px; flex: 0 1 auto; min-width: 0; }
  .brand-logo { height: 29px; width: auto; max-width: 100%; }
  .brand-sub { display: none; }
  /* compact number, no label */
  .header-cta { gap: 8px; flex: 0 1 auto; min-width: 0; }
  .header-phone { font-size: 0.8rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
  .header-phone span { display: none; }
  /* the menu button is sacred: right-pinned, unsqueezable, 44px tap target */
  .menu-btn { display: block; margin-left: auto; flex: none; min-width: 44px; min-height: 44px; padding: 9px 10px; }
  .menu-btn svg { width: 20px; height: 20px; }
  /* redundant insurance: desktop-only clusters can never appear on phones */
  .header-actions { display: none; }
  .nav { display: none; }
  /* (.nav.is-open still shows: higher specificity beats this line by design) */
}
/* very small phones: the number yields before anything can clip */
@media (max-width: 380px) {
  .header-phone { display: none; }
  .brand-logo { height: 27px; }
}