/* ==========================================================================
   Human Asset Consultants — site stylesheet
   Design v2: warm paper, deep ink serif, sage accent, square corners.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subset, variable)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --paper: #faf9f6;
  --paper-2: #eceae3;
  --card: #ffffff;
  --card-warm: #f6f4ee;
  --ink: #1f2a37;
  --ink-deep: #1a232e;
  --ink-2: #26323f;

  /* Text */
  --body: #4d5561;
  --body-2: #525a66;
  --body-3: #5a6270;
  --muted: #6b7280;
  --nav-ink: #3c4450;
  --quote-ink: #3c4450;

  /* Rules */
  --rule: #e6e3db;
  --rule-2: #e2ded4;
  --rule-3: #d8d4ca;
  --rule-4: #e0ddd4;
  --rule-5: #eae7df;
  --rule-6: #eeebe3;

  /* Sage — decorative accent (rules, borders, logo, marks) */
  --sage: #7e9a79;
  --sage-light: #b3c9ae;
  --sage-on-dark: #9fb09c;

  /* On-ink text */
  --on-ink: #f4f3ef;
  --on-ink-body: #c2c7cd;
  --on-ink-card: #b3b9c1;
  --on-ink-footer: #c6cbd2;
  --on-ink-meta: #8f96a0;
  --hairline-dark: rgba(255, 255, 255, .12);
  --hairline-grid: rgba(255, 255, 255, .14);

  /* --- ACCESSIBILITY-ADJUSTED TOKENS -------------------------------------
     The four values below are darkened from the source design so that text
     meets WCAG 2.1 AA (4.5:1). Each is used ONLY where it carries text.
     The decorative --sage above is unchanged, so rules, borders, the 4px card
     top-border, and the logo are exactly as designed.
       --sage-strong        was #7e9a79 (3.09:1 with white)  -> 4.54:1
       --sage-strong-hover  was #66815f (4.31:1 with white)  -> 6.05:1
       --sage-ink           unchanged  #5f7a5b (4.51 paper / 4.75 white)
       --muted-warm         was #8a8677 (3.46:1 on paper)    -> 4.50:1
       --placeholder        was #a5a091 (2.17:1 on paper-2)  -> 4.55:1
     To restore the original palette exactly, revert these five values.
     -------------------------------------------------------------------- */
  --sage-strong: #637d5f;
  --sage-strong-hover: #52684e;
  /* Sage as TEXT on a light surface needs to be darker than the fill value:
     4.50 on #eceae3, 4.93 on #f6f4ee, 5.15 on #faf9f6, 5.42 on #fff. */
  --sage-text: #597055;
  --sage-ink: #5f7a5b;
  --muted-warm: #777366;
  /* --muted-warm is tuned for paper and white (4.50 / 4.74). On the warm card
     surface it drops to 4.31, so anything warm-muted sitting on --card-warm
     uses this instead: 4.93 on card-warm, 5.15 on paper, 5.42 on white. */
  --muted-warm-on-warm: #6d6a5e;
  --placeholder: #6e695a;

  /* Type */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Layout */
  --wrap: 1240px;
  --wrap-narrow: 820px;
  --gutter: clamp(18px, 3vw, 44px);
  --section-y: clamp(46px, 6vw, 96px);
  --shadow-lift: 0 18px 38px rgba(31, 42, 55, .10);
  /* Sticky header height. Two rows on desktop (72 + 46 + 1px rule), one row
     on mobile. Everything that has to clear the header reads this rather
     than repeating a magic number. */
  --header-h: 119px;

  /* Paper texture */
  --grain-light: url('../img/paper-grain-light.png');
  --grain-dark: url('../img/paper-grain-dark.png');
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--body);
  background-color: var(--paper);
  background-image: var(--grain-light),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%);
  background-size: 256px 256px, 100% 1000px;
  background-repeat: repeat, no-repeat;
  background-attachment: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--sage-text); }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--sage-strong);
  outline-offset: 3px;
}

::selection { background: var(--sage-light); color: var(--ink); }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 22px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  color: #fff;
}

/* Screen-reader-only */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; }
.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; }

.section { padding: var(--section-y) var(--gutter); }
.section--tight-top { padding-top: 0; }
.section--tight-bottom { padding-bottom: 0; }

.section--white {
  background: var(--card);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.section--ink {
  background-color: var(--ink);
  background-image: var(--grain-dark),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 65%);
  background-size: 256px 256px, 100% 100%;
  background-repeat: repeat, no-repeat;
  color: var(--on-ink);
}

.section--band {
  background-color: var(--paper-2);
  background-image: var(--grain-light);
  background-size: 256px 256px;
  background-repeat: repeat;
  border-top: 1px solid var(--rule-2);
}

.grid {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--split {
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(34px, 5vw, 76px);
}

.stack { display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   5. Typography
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-warm);
  margin: 0 0 26px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--sage);
}
.eyebrow--plain { display: block; margin-bottom: 18px; }
.eyebrow--plain::before { content: none; }
.section--ink .eyebrow { color: var(--sage-on-dark); }
.section--ink .eyebrow::before { background: var(--sage-on-dark); }

.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: pretty;
}
.h1--hero { font-size: clamp(36px, 4.6vw, 62px); }

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  color: var(--ink);
  text-wrap: pretty;
}
.section--ink .h2 { color: var(--on-ink); }

.h2--sub {
  font-size: clamp(24px, 2.8vw, 34px);
}

.em {
  font-style: italic;
  color: var(--sage-ink);
}
.section--ink .em { color: var(--sage-on-dark); }

.lead {
  font-size: 19px;
  line-height: 1.75;
  color: var(--body-2);
  text-wrap: pretty;
}

.prose-p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--body);
  text-wrap: pretty;
}

.measure { max-width: 64ch; }
.measure--tight { max-width: 52ch; }
.measure--mid { max-width: 58ch; }

.rich-link {
  color: var(--sage-ink);
  border-bottom: 1px solid var(--sage);
}
.rich-link:hover { color: var(--sage-strong-hover); border-bottom-color: var(--sage-strong-hover); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: 19px 34px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn--primary { background: var(--sage-strong); color: #fff; }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--sage-strong-hover); color: #fff; }

.btn--outline { color: var(--ink); border-color: var(--rule-3); background: transparent; }
.btn--outline:hover,
.btn--outline:focus-visible { border-color: var(--ink); color: var(--ink); }

.btn--lg { padding: 20px 44px; }
.btn--sm { font-size: 13px; padding: 16px 30px; }
.btn--xs { font-size: 13px; padding: 14px 24px; }
.btn--block { display: block; width: 100%; }

.text-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--sage);
  padding-bottom: 6px;
  transition: color .2s ease;
}
.text-link:hover { color: var(--sage-text); }

/* .text-link is ink-coloured, which is invisible on the ink section. The
   competencies link added for the HR Consulting page sits there, so it takes
   the on-dark treatment. Caught by the contrast audit at a ratio of 1.00 --
   foreground identical to background. */
.section--ink .text-link {
  color: var(--on-ink);
  border-bottom-color: var(--sage-on-dark);
}
.section--ink .text-link:hover { color: var(--sage-on-dark); }

.text-link--bare {
  border-bottom: 0;
  padding-bottom: 0;
  color: var(--nav-ink);
  min-height: 24px;
  line-height: 24px;
}
.text-link--bare:hover { color: var(--sage-text); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(250, 249, 246, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

/* Two rows on desktop: brand + phone/CTA on top, nav centred underneath.
   A fourth nav item made the single row wrap, which put the logo alone on
   line one and everything else on line two -- the same total height, worse
   arrangement. Splitting it deliberately gives the nav room to breathe and
   keeps the phone and the CTA at the top where they convert. */
.site-header__inner {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  margin-left: auto;
}

.nav-row { border-top: 1px solid var(--rule-5); }
.nav-row .nav {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gutter);
  justify-content: center;
  min-height: 46px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 14px;
  flex: 0 0 auto;
}
.brand:hover { color: var(--ink); }
.brand__mark { flex: 0 0 auto; }
.brand__words { display: flex; flex-direction: column; line-height: 1.06; }
.brand__name {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .19em;
  color: var(--ink);
}
.brand__sub {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .315em;
  color: var(--sage-text);
  margin-top: 4px;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  font-family: var(--font-ui);
  font-size: 14px;
}

.nav__link {
  color: var(--nav-ink);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 8px 1px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav__link:hover { color: var(--ink); border-bottom-color: var(--sage); }
.nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--sage); }

.nav__phone {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .04em;
  border-left: 1px solid var(--rule-4);
  padding: 6px 0 6px 20px;
}
.nav__phone:hover { color: var(--sage-text); }

.nav__cta {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sage-strong);
  padding: 14px 24px;
  transition: background-color .2s ease;
}
.nav__cta:hover { background: var(--sage-strong-hover); color: #fff; }

.menu-toggle {
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 42px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--rule-4);
  cursor: pointer;
  transition: border-color .2s ease;
}
.menu-toggle:hover { border-color: var(--sage); }
.menu-toggle span { display: block; height: 1.5px; background: var(--ink); }

.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 18px 40px rgba(31, 42, 55, .12);
  flex-direction: column;
  gap: 2px;
  padding: 8px clamp(18px, 4vw, 40px) 26px;
  font-family: var(--font-ui);
  font-size: 17px;
}
.mobile-nav[data-open="true"] { display: flex; }

.mobile-nav a {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-5);
}
.mobile-nav a[aria-current="page"] { color: var(--sage-text); }
.mobile-nav .mobile-nav__phone { letter-spacing: .06em; border-bottom: 0; }
.mobile-nav .mobile-nav__cta {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .16em;
  color: #fff;
  background: var(--sage-strong);
  padding: 16px 24px;
  border-bottom: 0;
}
.mobile-nav .mobile-nav__cta:hover { background: var(--sage-strong-hover); color: #fff; }

@media (max-width: 939px) {
  :root { --header-h: 82px; }
  .nav-row { display: none; }
  .site-header__actions { display: none; }
  .menu-toggle { display: flex; }
  .site-header__inner { min-height: 82px; }
}

/* --------------------------------------------------------------------------
   8. Hero + stat panel
   -------------------------------------------------------------------------- */
.hero { padding: clamp(48px, 7vw, 110px) var(--gutter) clamp(36px, 5vw, 72px); }
/* TWO EXPLICIT COLUMNS rather than the inherited auto-fit, because .trust is
   now a third grid child spanning both. auto-fit only collapses tracks that
   are EMPTY, and a full-width item on row 2 fills every track it spans, so the
   third track stopped collapsing: at 1440px the hero resolved to three 365px
   columns with a 437px empty gutter on the right. Two explicit columns
   reproduce exactly what auto-fit gave with two children, measured identical
   at 809px (360px each) and 1440px (582px each). */
.hero__grid {
  align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.trust {
  display: flex;
  flex-wrap: wrap;
  /* CENTRED ON ONE LINE, and it has to span the full hero width to manage it.
     MEASURED in the left column at the narrowest desktop the 939px breakpoint
     allows: at a 944px viewport the column is 420px and the three items need
     518px even at 12px text, so one line was short by 98px and no gap or font
     change reaches it. Below the split grid the same items need 618px against
     887px available, on one line at the original 14px with 269px to spare.
     flex-wrap stays for mobile, where they stack as before. */
  justify-content: center;
  /* Spans both columns, so it sits below the copy and the panel rather than
     inside the left one. Measured in the left column at the narrowest desktop
     the layout allows: 420px available against 518px needed even at 12px text,
     short by 98px, and no gap or font change reaches that. Spanning, the same
     items need 618px against 887px. */
  grid-column: 1 / -1;
  gap: clamp(20px, 3vw, 44px);
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--muted);
}
.trust__item { display: flex; align-items: center; gap: 9px; }

/* THE CREDENTIAL LINE DOES HIERARCHY WORK: it establishes who is talking
   before the content starts, so when the hero stacks it belongs between the
   copy and the questions panel rather than after the panel, where it reads as
   a footnote.

   808px is MEASURED, not the site's 939px breakpoint. This grid is
   repeat(auto-fit, minmax(min(360px, 100%), 1fr)), so it collapses when the
   wrap can no longer hold two 360px tracks plus the gap, which at this padding
   and a 5vw gap happens at exactly 808px: at 809px the tracks resolve to
   360.016px each and at 808px to a single 759.531px track. Ordering at 939px
   would reorder a grid that is still two columns across a 131px band.
   Changing the wrap padding, the gap, or the 360px minimum moves this number. */
@media (max-width: 808px) {
  .hero__grid { grid-template-columns: 1fr; }
  .trust { order: 1; }
  .panel--questions { order: 2; }
}
.trust__stars { color: var(--sage-text); font-size: 15px; letter-spacing: .1em; }

.panel {
  border: 1px solid var(--rule-2);
  background: var(--card);
  padding: clamp(30px, 3.4vw, 52px);
}

/* The hero panel's client questions. Replaces the stat counters and their
   caption; see CALL_QUESTIONS in content.py for why they went.

   The panel keeps its own container untouched: same card, same border, same
   width, same grid position. This is a content change inside an established
   frame. */
.callouts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Air matters more here than rules do. The hairlines between the old stats
     are gone rather than kept as separators: five short quoted lines read
     calmer with space between them than with lines drawn across them. */
  gap: clamp(22px, 2.4vw, 32px);
}

.callout {
  font-family: var(--font-display);
  /* Between the old stat LABEL (14px) and the old stat NUMERAL (52 to 88px),
     near the h3 and .subhead scale. These have to read as sentences rather
     than as data, and the floor is 19px so they never drop below body scale on
     a narrow viewport. */
  font-size: clamp(19px, 1.45vw, 23px);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
  /* HANGING PUNCTUATION. The opening quote sits in the padding so the WORDS
     align optically with the eyebrow above, rather than the quote glyph doing
     it. Five quoted lines set flush-left produce a visibly ragged edge,
     because the mark is narrow and light and the eye aligns on the letters.
     Applies to the first line only, which is exactly the intent: a wrapped
     second line aligns on the true left edge. */
  text-indent: -.42em;
}

/* --------------------------------------------------------------------------
   9. Process steps
   -------------------------------------------------------------------------- */
.section-head { max-width: 660px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--wide { max-width: 700px; }

.steps { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(20px, 2.4vw, 32px); }

.step {
  background: var(--card-warm);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--sage);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px) clamp(30px, 3.2vw, 42px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.step__head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  background: var(--sage-strong);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 500;
}
.step__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sage-text);
}
.step__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 31px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.step__body { font-size: 17px; line-height: 1.75; color: var(--body-2); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   10. Long read
   -------------------------------------------------------------------------- */
.longread {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
/*
  The aside is sticky ONLY while the longread is genuinely two columns.
  The grid is `repeat(auto-fit, minmax(min(300px,100%),1fr))` with a
  clamp(30px,5vw,80px) gap, so two columns need roughly 300+300+gap plus the
  page gutter -- it collapses to one column below about 770px.

  Left sticky in one column, the aside pins at top:110px while the body scrolls
  underneath it, and the two overlap. Measured at 390px wide: 314px of overlap.

  Declared static first and switched on at a min-width, so the failure mode of
  the query not matching is "no sticky" rather than "overlapping text".
*/
.longread__aside { position: static; }

@media (min-width: 900px) {
  .longread__aside { position: sticky; top: calc(var(--header-h) + 16px); }
}
.longread__body { display: flex; flex-direction: column; gap: 22px; }

.pullquote {
  margin-top: 34px;
  border-left: 2px solid var(--sage);
  padding: 6px 0 6px 22px;
}
.pullquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--quote-ink);
  text-wrap: pretty;
}

.beliefs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 2px solid var(--sage);
  padding-left: 24px;
}
.beliefs li {
  font-family: var(--font-display);
  font-size: 19px;
  font-style: italic;
  line-height: 1.6;
  color: var(--quote-ink);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   11. Competencies (ink grid)
   -------------------------------------------------------------------------- */
.comp-head {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(34px, 4.5vw, 60px);
}
.comp-head__note {
  font-size: 17px;
  line-height: 1.8;
  color: var(--on-ink-body);
  max-width: 46ch;
  text-wrap: pretty;
}

.competencies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1px;
  background: var(--hairline-grid);
}
.competency {
  background: var(--ink);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 30px);
  transition: background-color .2s ease;
}
.competency:hover { background: var(--ink-2); }
.competency__icon { color: var(--sage-on-dark); margin-bottom: 20px; }
.competency__icon svg { width: 26px; height: 26px; }
.competency__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--on-ink);
}
.competency__body { font-size: 16px; line-height: 1.7; color: var(--on-ink-card); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   12. Founder strip
   -------------------------------------------------------------------------- */
.founder-strip { align-items: center; gap: clamp(30px, 5vw, 76px); }
.founder-photo { width: 100%; filter: saturate(.92); }

/* --------------------------------------------------------------------------
   13. Article cards
   -------------------------------------------------------------------------- */
.rule-head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(28px, 3.5vw, 48px);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.rule-head .h2 { font-size: clamp(26px, 3vw, 38px); }

.rule-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 34px);
  color: var(--ink);
  margin: 0 0 clamp(24px, 3vw, 40px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}


.post-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(24px, 3vw, 40px); }
.post-grid--bare { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.post-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.post-meta .post-date { margin: 0; }
.post-meta__dot { width: 3px; height: 3px; background: var(--rule-3); flex: 0 0 auto; }

.post-card__more {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-ink);
  border-bottom: 1px solid var(--sage);
  padding-bottom: 4px;
}

.post-date {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin: 0 0 12px;
}
.post-date--warm { color: var(--muted-warm); margin-bottom: 10px; }

.post-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: pretty;
}
.post-excerpt { font-size: 16px; line-height: 1.7; color: var(--body-3); text-wrap: pretty; }

/* Home: bare cards */
.post-bare { display: block; color: inherit; }
.post-bare .post-bare:hover .post-title { color: var(--sage-text); }

/* Resources: boxed cards */
.post-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule-2);
  /* The image used to give the card its top edge. A 3px sage rule replaces
     that weight without replacing it with a picture. */
  border-top: 3px solid var(--sage);
  height: 100%;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.post-card .post-card__body { padding: clamp(24px, 2.6vw, 32px); }

/* Featured */
.featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  background: var(--card);
  border: 1px solid var(--rule-2);
  color: var(--ink);
  transition: box-shadow .2s ease;
}
.featured:hover { box-shadow: var(--shadow-lift); }
.featured .featured__body { padding: clamp(28px, 3.4vw, 52px); }
.featured__kicker {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin: 0 0 18px;
}
.featured__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 18px;
  text-wrap: pretty;
}
.featured__excerpt { font-size: 17px; line-height: 1.75; color: var(--body-2); margin: 0 0 26px; text-wrap: pretty; }
.featured__cta {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-ink);
  border-bottom: 1px solid var(--sage);
  padding-bottom: 5px;
}


/* --------------------------------------------------------------------------
   14. Problems grid
   -------------------------------------------------------------------------- */
.problems {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.problem {
  background: var(--card);
  padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 30px);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: background-color .2s ease;
}
.problem:hover { background: var(--card-warm); }
.problem::before {
  content: "\201C";
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: .8;
  color: var(--sage-light);
}
.problem p {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   15. Article page
   -------------------------------------------------------------------------- */
.back-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-warm);
  margin-bottom: 26px;
  min-height: 24px;
  line-height: 24px;
}
.back-link:hover { color: var(--sage-text); }

.article-head .h1 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.18; letter-spacing: -.01em; margin-bottom: 20px; }
.article-meta {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-warm);
}


.article-body { display: flex; flex-direction: column; gap: 22px; }
.article-body > p { font-size: 18px; line-height: 1.85; color: var(--body); text-wrap: pretty; }
.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 18px;
  text-wrap: pretty;
}
.article-body h3 {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
  margin-top: 14px;
  text-wrap: pretty;
}
/* The Jost subhead look, independent of heading level. Wins over the h2 rule
   above so a semantically-h2 subhead still renders in the sans style. */
.article-body .subhead {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--ink);
  margin-top: 14px;
}

.marker-list { display: flex; flex-direction: column; gap: 14px; }
.marker-list li { display: flex; gap: 16px; align-items: baseline; }
.marker-list li::before {
  content: attr(data-marker);
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--sage-text);
  min-width: 22px;
}
.marker-list p { font-size: 18px; line-height: 1.8; color: var(--body); text-wrap: pretty; }

.data-table {
  border: 1px solid var(--rule-2);
  background: var(--card);
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.data-table th, .data-table td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--rule-6);
  vertical-align: top;
}
.data-table th {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  width: minmax(120px, 200px);
  min-width: 120px;
  max-width: 200px;
}
.data-table td { font-size: 15px; line-height: 1.6; color: var(--body-2); }
.data-table tr:last-child th, .data-table tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

.article-foot {
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 30px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  align-items: center;
  justify-content: space-between;
}
.article-foot p { font-size: 17px; line-height: 1.6; color: var(--body-3); max-width: 44ch; text-wrap: pretty; }

.related-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--rule-2);
  padding: clamp(22px, 2.4vw, 30px);
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.related-card .post-title { font-size: 19px; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   16. Founder page
   -------------------------------------------------------------------------- */
.founder-layout {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
.founder-aside { display: flex; flex-direction: column; gap: 24px; }

.cred-card {
  border: 1px solid var(--rule-2);
  background: var(--card);
  padding: 26px 28px;
}
.cred-card__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-warm);
  margin: 0 0 14px;
}
.cred-card ul { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.6; color: var(--body); }

.sub-block {
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rule);
}
.sub-block .h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   17. Start here / Calendly
   -------------------------------------------------------------------------- */
.how-card {
  background: var(--card);
  border: 1px solid var(--rule-2);
  padding: clamp(28px, 3vw, 44px);
}
.how-card .h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; margin-bottom: 22px; }
.how-list { display: flex; flex-direction: column; gap: 18px; }
.how-list li { display: flex; gap: 16px; align-items: flex-start; }
.how-list li::before {
  content: attr(data-num);
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sage-strong);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
}
.how-list p { font-size: 17px; line-height: 1.75; color: var(--body); text-wrap: pretty; }
.how-card__foot {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.booking {
  background: var(--card);
  border: 1px solid var(--rule-2);
  padding: clamp(26px, 3vw, 44px);
}
.booking .h2 { font-size: clamp(26px, 3vw, 40px); line-height: 1.2; margin-bottom: 18px; }
.booking__note { font-size: 17px; line-height: 1.75; color: var(--body-2); margin: 0 0 32px; max-width: 62ch; text-wrap: pretty; }

.calendly {
  width: 100%;
  height: clamp(660px, 85vh, 960px);
  min-height: 620px;
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}
@media (max-width: 759px) {
  .calendly { height: 1080px; }
}
.calendly__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 100%;
  padding: 32px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   18. Privacy / legal
   -------------------------------------------------------------------------- */
.legal { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); }
.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 29px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  text-wrap: pretty;
}
.legal__paras { display: flex; flex-direction: column; gap: 18px; }
.legal p, .legal__intro { font-size: 17px; line-height: 1.85; color: var(--body); text-wrap: pretty; }
.legal__intro { font-size: 18px; margin-bottom: clamp(34px, 4vw, 52px); }

.contact-foot {
  margin-top: clamp(34px, 4vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
}
.contact-foot p { font-size: 17px; color: var(--body-3); }

/* --------------------------------------------------------------------------
   19. CTA band
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band .eyebrow { justify-content: center; margin-bottom: 20px; }
.cta-band .h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.18; margin-bottom: 22px; }
.cta-band p { font-size: 18px; line-height: 1.75; color: var(--body-2); margin: 0 auto 36px; max-width: 58ch; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--ink-deep);
  background-image: var(--grain-dark),
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 65%);
  background-size: 256px 256px, 100% 100%;
  background-repeat: repeat, no-repeat;
  color: var(--on-ink-footer);
  padding: clamp(44px, 5.5vw, 84px) var(--gutter) 34px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: clamp(30px, 4vw, 52px);
  border-bottom: 1px solid var(--hairline-dark);
}
.site-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.site-footer__brand .brand__name { font-size: 15px; color: var(--on-ink); }
.site-footer__brand .brand__sub { font-size: 11px; color: var(--sage-on-dark); }
.site-footer__blurb { font-size: 15px; line-height: 1.75; max-width: 34ch; }
.site-footer h2 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-ink);
  margin: 0 0 18px;
}
.site-footer ul { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
/* Target Size (Minimum), WCAG 2.2 SC 2.5.8: standalone links get a 24px box. */
.site-footer li > a,
.site-footer li { min-height: 24px; display: flex; align-items: center; }

/* The address is two lines, so it opts out of the centred single-line box
   above and stacks instead. Still well over the 24px minimum target. */
.site-footer__address,
.site-footer__address > a { align-items: flex-start; }
.site-footer__address address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  line-height: 1.55;
}
.site-footer__address > a { padding: 2px 0; }
.site-footer a { color: var(--on-ink-footer); }
/* The email address is a 245px unbreakable token. Around 768px the footer grid
   gives each column roughly 230px, so it overflowed by 2px on EVERY page.
   body{overflow-x:hidden} hid the symptom by clipping the address -- so the
   contact address rendered visibly truncated rather than wrapping. */
.site-footer a[href^="mailto:"] { overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--sage-on-dark); }
.site-footer__cta-note { font-size: 15px; line-height: 1.7; margin: 0 0 18px; }
.site-footer a.site-footer__cta,
.site-footer__cta {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sage-strong);
  padding: 14px 26px;
  transition: background-color .2s ease;
}
.site-footer a.site-footer__cta:hover,
.site-footer__cta:hover { background: var(--sage-strong-hover); color: #fff; }
/* Utility links in the base bar, beside the copyright. They are utility rather
   than site sections, which is why they left the Company column, and this is
   where people look for them. Inherits the base bar's own size and colour, so
   no new tokens. */
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding-top: 24px;
  font-size: 13px;
  color: var(--on-ink-meta);
}

/* --------------------------------------------------------------------------
   21. 404
   -------------------------------------------------------------------------- */
.error-page { text-align: center; padding-block: clamp(60px, 10vw, 140px); }
.error-page .h1 { margin-bottom: 22px; }
.error-page p { font-size: 18px; line-height: 1.75; color: var(--body-2); margin: 0 auto 36px; max-width: 52ch; }
.error-page__links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-lead { margin-top: 28px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-30 { margin-top: 30px; }
.gap-20 { gap: 20px; }
.gap-22 { gap: 22px; }
.intro-split {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(30px, 4vw, 52px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   23. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .step:hover, .post-card:hover, .related-card:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .cta-band, .menu-toggle, .mobile-nav, .calendly { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 12pt 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* --------------------------------------------------------------------------
   24. /hr-consulting-orlando/
   All values come from the existing token set. No new fonts or colours.
   -------------------------------------------------------------------------- */

/* Florida compliance blocks */
.fl-blocks { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 42px); margin-top: clamp(26px, 3vw, 38px); }
.fl-block { border-left: 2px solid var(--sage); padding-left: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 16px; }
.fl-block__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}
.fl-note {
  margin-top: clamp(28px, 3.4vw, 40px);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  font-style: italic;
  text-wrap: pretty;
}

/* Services, grouped */
.service-groups { display: flex; flex-direction: column; gap: clamp(30px, 3.6vw, 46px); margin-top: clamp(28px, 3.4vw, 44px); }
.service-group__name {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-warm);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.service-group__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.service-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  background: var(--card);
  padding: clamp(20px, 2.2vw, 26px);
  color: var(--ink);
  transition: background-color .2s ease;
}
.service-card:hover { background: var(--card-warm); color: var(--ink); }
.service-card__icon { color: var(--sage-text); display: block; }
.service-card__icon svg { width: 24px; height: 24px; }
.service-card__title { font-family: var(--font-display); font-size: 19px; font-weight: 500; line-height: 1.3; }
.service-card__body { font-size: 15px; line-height: 1.65; color: var(--body-3); text-wrap: pretty; }

/* Who this fits */
.fit-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.fit-card {
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-top: 4px solid var(--rule-3);
  padding: clamp(24px, 2.8vw, 34px);
}
.fit-card--good { border-top-color: var(--sage); }
.fit-card__label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
}
.fit-list { display: flex; flex-direction: column; gap: 14px; }
.fit-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  text-wrap: pretty;
}
.fit-list li::before { content: ""; width: 6px; height: 6px; margin-top: 10px; background: var(--sage); }
.fit-card--no .fit-list li::before { background: var(--rule-3); }

/* Service area + NAP */
.area-grid { gap: clamp(28px, 4vw, 60px); align-items: start; }
.nap { margin-top: clamp(26px, 3vw, 34px); padding-top: 24px; border-top: 1px solid var(--rule); }
.nap__name { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--ink); margin: 0 0 10px; }
.nap__address { font-style: normal; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.7; color: var(--body); }
/* Target Size (Minimum), WCAG 2.2 SC 2.5.8 -- these measured 22.5px tall. */
.nap__address a { display: inline-block; min-height: 24px; line-height: 24px; }

/* Static map card. Deliberately NOT an embedded map iframe: an embed is not a
   ranking factor, and it would cost a looser frame-src, Google cookies and a
   consent surface on a site whose advantage is being fast and dependency-free.
   The NAP text above and hasMap in the schema do the actual SEO work. */
.map-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  background: var(--card-warm);
  border: 1px solid var(--rule-2);
  padding: clamp(28px, 3.4vw, 44px);
  min-height: 240px;
  color: var(--ink);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.map-card:hover { background: var(--card); box-shadow: var(--shadow-lift); color: var(--ink); }
.map-card__eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-warm-on-warm);
}
.map-card__addr { font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); line-height: 1.45; color: var(--ink); }
.map-card__cta {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-text);
}

/* FAQ. Native <details>, so it is keyboard accessible with no JavaScript and
   the answers are in the HTML source for the FAQPage schema to mirror. */
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 21px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  flex: 1 1 auto;
  text-wrap: pretty;
}
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  margin-top: 7px;
  border-right: 1.5px solid var(--sage-text);
  border-bottom: 1.5px solid var(--sage-text);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: 11px; }
.faq__q:focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 2px; }
.faq__a { padding: 0 0 24px; }
.faq__a p { font-size: 17px; line-height: 1.8; color: var(--body); max-width: 68ch; text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  .faq__q::after { transition: none; }
}

/* Reviewer byline. Its own line, sentence case -- deliberately NOT part of the
   uppercase meta run above. Fourth item in a middot chain of uppercase
   metadata reads as file properties; a byline reads as a named professional
   taking responsibility, which is the signal the page is actually sending.
   Rendered only where a review happened; absent entirely otherwise. */
.article-byline {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body-3);
}
.article-byline a {
  color: var(--sage-ink);
  border-bottom: 1px solid var(--sage);
}
.article-byline a:hover { color: var(--sage-strong-hover); }

/* --------------------------------------------------------------------------
   The answers library
   -------------------------------------------------------------------------- */

/* The hub groups every question under its cluster. .article-body supplies the
   vertical rhythm, so these only need the list reset and the link treatment. */
.answers-group { display: flex; flex-direction: column; gap: 14px; }
.answers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.answers-list > li { font-size: 17px; line-height: 1.6; }

/* The conversion path under an answer: quieter than body copy, because the
   answer is the content and the link is the next step rather than the point. */
.answers-related { font-size: 15px; color: var(--muted); }

/* The Credly badge in the footer's first column. The embed injects a
   fixed-size iframe, so this only needs to give it room and keep it from
   sitting flush against the blurb above. */

/* The credential, in its own full-width row between the column grid and the
   base bar.

   It was in the first column, where the caption set at 42 characters per line
   in a 267px column. That is about a third of a comfortable measure, and no
   amount of shrinking the type fixes a column that narrow. Its own row gives
   the text room and lets the badge sit beside it rather than above it. */
/* The credential, back in the first column under the blurb.
   
   It spent a spell as its own full-width row, which was right when it carried
   SHRM's five-line boilerplate: that set at 42 characters per line in a 267px
   column, a third of a comfortable measure. The caption is one sentence now and
   the badge is 100px rather than 150px, so the block fits the column it was too
   big for.

   STACKED rather than side by side. A 100px badge beside text in a 267px column
   leaves about 145px for the words, which is the same measure problem in a
   smaller form. */
.site-footer__credential {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
}

/* Served at 200px for a 100px display, so it stays sharp at 2x. width and
   height are on the element to reserve the box before it loads: without them
   the text below jumps 100px when it arrives. */
.site-footer__badge { width: 100px; height: 100px; }

.site-footer__credential-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}