/* Athena IT Group components. Every value comes from dist/css/tokens.css; load that first.
   Class names are the contract the React components and HTML specimens share. */

.ath-root { background: var(--ath-color-bg-ground); color: var(--ath-color-text-primary); font-family: var(--ath-font-body); font-size: var(--ath-type-body-font-size); line-height: var(--ath-type-body-line-height); }
:where(.ath-root) :where(h1, h2, h3) { font-family: var(--ath-font-display); color: var(--ath-color-text-heading); letter-spacing: var(--ath-base-font-tracking-display); text-wrap: balance; margin: 0; }
:where(.ath-root) :where(h1, h2) { font-weight: var(--ath-type-section-font-weight); }
:where(.ath-root) :where(h3) { font-weight: var(--ath-type-card-title-font-weight); }

/* Eyebrow: uppercase label that always sits directly above a heading */
.ath-eyebrow { display: block; font-size: var(--ath-type-eyebrow-font-size); font-weight: var(--ath-type-eyebrow-font-weight); letter-spacing: var(--ath-type-eyebrow-letter-spacing); text-transform: uppercase; color: var(--ath-color-text-meta); margin: 0 0 var(--ath-base-space-2); }

/* Band: the full-width logo-blue block. One per screen */
.ath-band { background: var(--ath-color-bg-brand); color: var(--ath-color-on-brand-body); padding: var(--ath-base-space-10) var(--ath-layout-gutter) var(--ath-base-space-14); }
.ath-band__inner { max-width: var(--ath-layout-content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--ath-base-space-3); }
.ath-band .ath-eyebrow { color: var(--ath-color-on-brand-eyebrow); }
.ath-band__title { font-family: var(--ath-font-display); font-weight: var(--ath-type-page-title-font-weight); font-size: var(--ath-type-page-title-font-size); line-height: var(--ath-type-page-title-line-height); letter-spacing: var(--ath-type-page-title-letter-spacing); color: var(--ath-color-on-brand-heading); margin: 0; text-wrap: balance; }
.ath-band__title em { font-style: normal; color: var(--ath-color-on-brand-emphasis); }
.ath-band__lead { font-size: var(--ath-type-lead-font-size); line-height: var(--ath-type-lead-line-height); max-width: 60ch; margin: 0; }
@media (max-width: 760px) { .ath-band__title { font-size: 34px; } }
@media (max-width: 900px) { .ath-band { padding-inline: 28px; } }
@media (max-width: 480px) { .ath-band { padding-inline: 18px; } }

/* Buttons: always full pills */
.ath-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ath-base-space-2); border-radius: var(--ath-radius-pill); padding: 13px 22px; font: var(--ath-base-font-weight-bold) 15px/1 var(--ath-font-body); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ath-btn--primary { background: var(--ath-color-action-primary-bg); color: var(--ath-color-action-primary-text); }
.ath-btn--primary:hover { background: var(--ath-color-action-primary-bg-hover); }
.ath-btn--secondary { background: var(--ath-color-action-secondary-bg); color: var(--ath-color-action-secondary-text); border-color: var(--ath-color-action-secondary-border); }
.ath-btn--highlight { background: var(--ath-color-highlight-bg); color: var(--ath-color-highlight-text); }
.ath-btn:focus-visible, .ath-input:focus-visible, .ath-link:focus-visible { outline: 2px solid var(--ath-color-border-focus); outline-offset: 2px; }
:where(.ath-band, .ath-header, .ath-panel) :focus-visible { outline: 2px solid var(--ath-color-border-focus-on-brand); outline-offset: 2px; }

/* Links */
.ath-link { color: var(--ath-color-text-link); font-weight: var(--ath-base-font-weight-semibold); text-decoration: underline; text-underline-offset: 2px; }
.ath-link:hover { color: var(--ath-color-text-link-hover); }

/* Inputs */
.ath-input { border: 1px solid var(--ath-color-border-input); border-radius: var(--ath-radius-pill); background: var(--ath-color-bg-surface); color: var(--ath-color-text-primary); padding: 12px 18px; font: inherit; font-size: 15px; min-width: 0; }
.ath-input::placeholder { color: var(--ath-color-text-meta); }
.ath-form-row { display: flex; gap: var(--ath-base-space-2); }
@media (max-width: 480px) { .ath-form-row { flex-direction: column; } }

/* Pillar card: tint carries the category. No border */
.ath-pillar { border-radius: var(--ath-radius-card); padding: var(--ath-base-space-6); display: flex; flex-direction: column; gap: var(--ath-base-space-2); }
.ath-pillar h3 { font-size: 20px; }
.ath-pillar p { margin: 0; font-size: var(--ath-type-small-font-size); }
.ath-pillar--find  { background: var(--ath-color-pillar-find-tint);  color: var(--ath-color-pillar-find-body); }
.ath-pillar--find h3, .ath-pillar--find .ath-eyebrow { color: var(--ath-color-pillar-find-heading); }
.ath-pillar--fix   { background: var(--ath-color-pillar-fix-tint);   color: var(--ath-color-pillar-fix-body); }
.ath-pillar--fix h3, .ath-pillar--fix .ath-eyebrow { color: var(--ath-color-pillar-fix-heading); }
.ath-pillar--run { background: var(--ath-color-pillar-run-tint); color: var(--ath-color-pillar-run-body); }
.ath-pillar--run h3, .ath-pillar--run .ath-eyebrow { color: var(--ath-color-pillar-run-heading); }

/* Module: white summary block on the gray ground */
.ath-module { background: var(--ath-color-bg-surface); border: 1px solid var(--ath-color-border-default); border-radius: var(--ath-radius-module); padding: var(--ath-base-space-4) var(--ath-base-space-5); }

/* List rows: meta line above the title, hairline dividers */
.ath-list { list-style: none; margin: 0; padding: 0; }
.ath-row { display: flex; gap: var(--ath-base-space-3); align-items: flex-start; padding: var(--ath-base-space-3) 0; border-bottom: 1px solid var(--ath-color-border-default); }
.ath-row:last-child { border-bottom: none; }
.ath-row__text { display: flex; flex-direction: column; min-width: 0; }
.ath-row__meta { font-size: 12px; font-weight: var(--ath-base-font-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ath-color-text-meta); }
.ath-row__title { font-family: var(--ath-font-display); font-weight: var(--ath-base-font-weight-semibold); font-size: 15px; color: var(--ath-color-text-heading); }
.ath-row__detail { font-size: 13px; color: var(--ath-color-text-muted); }

/* Icon tile: solid pillar color, white glyph */
.ath-tile { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--ath-radius-tile); display: grid; place-items: center; color: #fff; background: var(--ath-color-text-primary); font-size: 14px; font-weight: 700; }
.ath-tile--find { background: var(--ath-color-pillar-find-heading); }
.ath-tile--fix { background: var(--ath-color-pillar-fix-heading); }
.ath-tile--run { background: var(--ath-color-pillar-run-heading); }

/* Status dots: rows of 5-7 */
.ath-dots { display: inline-flex; gap: 6px; }
.ath-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ath-color-border-default); }
.ath-dot--done { background: var(--ath-color-status-success); }
.ath-dot--partial { background: var(--ath-color-highlight-bg); }

/* Segmented progress */
.ath-progress { display: flex; flex-direction: column; gap: 6px; }
.ath-progress__bar { display: flex; gap: 3px; }
.ath-progress__seg { flex: 1; height: 4px; border-radius: 2px; background: var(--ath-color-border-default); }
.ath-progress__seg--on { background: var(--ath-color-highlight-bg); }
.ath-progress__label { font-size: 12px; color: var(--ath-color-text-meta); }

/* Callouts: tint bound to meaning (The Numbers = Find, Watch Out = Fix, Do This = Run) */
.ath-callout { border-radius: var(--ath-radius-module); padding: var(--ath-base-space-4) var(--ath-base-space-5); display: flex; flex-direction: column; gap: var(--ath-base-space-1); }
.ath-callout strong { font-family: var(--ath-font-display); font-size: 15px; }
.ath-callout--numbers  { background: var(--ath-color-pillar-find-tint); }
.ath-callout--numbers strong { color: var(--ath-color-pillar-find-heading); }
.ath-callout--watch { background: var(--ath-color-pillar-fix-tint); }
.ath-callout--watch strong { color: var(--ath-color-pillar-fix-heading); }
.ath-callout--do       { background: var(--ath-color-pillar-run-tint); }
.ath-callout--do strong { color: var(--ath-color-pillar-run-heading); }

/* Chips */
.ath-chip { display: inline-flex; align-items: center; border: 1px solid var(--ath-color-border-default); border-radius: var(--ath-radius-pill); padding: 3px 10px; font-size: 12px; font-weight: var(--ath-base-font-weight-semibold); color: var(--ath-color-text-muted); background: var(--ath-color-bg-surface); }

/* Dark panel: navy. Final CTA, study mode, downloads. At most one per page */
.ath-panel { background: var(--ath-color-bg-brand-deep); color: var(--ath-color-on-brand-body); border-radius: var(--ath-radius-panel); padding: var(--ath-base-space-14) var(--ath-base-space-10); display: flex; flex-direction: column; gap: var(--ath-base-space-3); align-items: flex-start; }
.ath-panel .ath-eyebrow { color: var(--ath-color-on-brand-eyebrow); }
.ath-panel h2 { color: var(--ath-color-on-brand-heading); font-size: var(--ath-type-section-font-size); }
@media (max-width: 760px) { .ath-panel { padding: var(--ath-base-space-10) var(--ath-base-space-6); } }

/* ---------------------------------------------------------------------------
   Site components (added for athenaitgroup.com, v1.0.0). Same rules: tokens only, no hex.
   --------------------------------------------------------------------------- */

/* Logo: the wordmark SVG from logos/svg. Height sets the size; never stretch, recolor or redraw it */
.ath-logo { display: inline-flex; align-items: center; line-height: 0; }
.ath-logo img, .ath-logo svg { height: 28px; width: auto; display: block; }

/* Layout helpers */
.ath-container { max-width: var(--ath-layout-content-max); margin: 0 auto; padding-inline: var(--ath-layout-gutter); }
.ath-section { padding-block: var(--ath-layout-section-gap) 0; }
.ath-section:last-child { padding-bottom: var(--ath-layout-section-gap); }
.ath-stack { display: flex; flex-direction: column; gap: var(--ath-base-space-4); }
.ath-grid { display: grid; gap: var(--ath-base-space-4); grid-template-columns: repeat(var(--ath-cols, 3), minmax(0, 1fr)); }
@media (max-width: 900px) { .ath-container { padding-inline: 28px; } }
@media (max-width: 760px) { .ath-grid { grid-template-columns: 1fr; } .ath-section { padding-top: var(--ath-base-space-14); } }
@media (max-width: 480px) { .ath-container { padding-inline: 18px; } }

/* Header: sits on the band color so header + band read as one block (still one band per screen).
   Add .is-open to .ath-header for the mobile menu (toggle with a button; see the site's main.js) */
.ath-header { background: var(--ath-color-bg-brand); color: var(--ath-color-on-brand-body); }
.ath-header__inner { max-width: var(--ath-layout-content-max); margin: 0 auto; padding: var(--ath-base-space-5) var(--ath-layout-gutter) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--ath-base-space-6); }
.ath-nav { display: flex; align-items: center; gap: var(--ath-base-space-6); list-style: none; margin: 0; padding: 0; }
.ath-nav a:not(.ath-btn) { color: var(--ath-color-on-brand-body); font-weight: var(--ath-base-font-weight-semibold); font-size: 15px; text-decoration: none; }
.ath-nav a:not(.ath-btn):hover, .ath-nav a[aria-current="page"] { color: var(--ath-color-on-brand-heading); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.ath-nav-toggle { display: none; background: none; border: 1px solid var(--ath-color-on-brand-body); color: var(--ath-color-on-brand-heading); border-radius: var(--ath-radius-pill); padding: 8px 14px; font: var(--ath-base-font-weight-bold) 14px/1 var(--ath-font-body); cursor: pointer; }
.ath-header + .ath-band { padding-top: var(--ath-base-space-14); }
@media (max-width: 900px) { .ath-header__inner { padding-inline: 28px; } }
@media (max-width: 760px) {
  .ath-header__inner { flex-wrap: wrap; }
  .ath-nav-toggle { display: inline-flex; }
  .ath-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--ath-base-space-4); padding-block: var(--ath-base-space-4); }
  .ath-header.is-open .ath-nav { display: flex; }
  .ath-header + .ath-band { padding-top: var(--ath-base-space-8); }
}
@media (max-width: 480px) { .ath-header__inner { padding-inline: 18px; } }

/* Footer: on the ground, hairline above, meta text */
.ath-footer { border-top: 1px solid var(--ath-color-border-default); color: var(--ath-color-text-meta); font-size: var(--ath-type-small-font-size); }
.ath-footer__inner { max-width: var(--ath-layout-content-max); margin: 0 auto; padding: var(--ath-base-space-10) var(--ath-layout-gutter); display: flex; flex-wrap: wrap; gap: var(--ath-base-space-6) var(--ath-base-space-10); justify-content: space-between; align-items: flex-start; }
.ath-footer a { color: var(--ath-color-text-muted); }
.ath-footer__links { display: flex; flex-wrap: wrap; gap: var(--ath-base-space-3) var(--ath-base-space-6); list-style: none; margin: 0; padding: 0; }
@media (max-width: 480px) { .ath-footer__inner { padding-inline: 18px; } }

/* Table: numbers in a white module, hairline rows, figures right-aligned. .is-key marks the row that matters */
.ath-table { width: 100%; border-collapse: collapse; background: var(--ath-color-bg-surface); border: 1px solid var(--ath-color-border-default); border-radius: var(--ath-radius-module); overflow: hidden; font-size: 15px; }
.ath-table th, .ath-table td { text-align: left; padding: var(--ath-base-space-3) var(--ath-base-space-5); border-bottom: 1px solid var(--ath-color-border-default); }
.ath-table tr:last-child > * { border-bottom: none; }
.ath-table th { font-size: 12px; font-weight: var(--ath-base-font-weight-bold); letter-spacing: var(--ath-base-font-tracking-label); text-transform: uppercase; color: var(--ath-color-text-meta); }
.ath-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ath-table .is-key > * { font-weight: var(--ath-base-font-weight-bold); color: var(--ath-color-text-heading); background: var(--ath-color-pillar-find-tint); }
.ath-table caption { caption-side: bottom; text-align: left; padding-top: var(--ath-base-space-2); font-size: var(--ath-type-caption-font-size); color: var(--ath-color-text-meta); }

/* Steps: numbered rows. The number sits in a tile in the pillar color (default Find) */
.ath-steps { list-style: none; margin: 0; padding: 0; counter-reset: ath-step; }
.ath-steps > li { counter-increment: ath-step; display: grid; grid-template-columns: 32px 1fr; gap: var(--ath-base-space-3); padding: var(--ath-base-space-3) 0; border-bottom: 1px solid var(--ath-color-border-default); }
.ath-steps > li:last-child { border-bottom: none; }
.ath-steps > li::before { content: counter(ath-step); width: 32px; height: 32px; border-radius: var(--ath-radius-tile); display: grid; place-items: center; background: var(--ath-color-pillar-find-heading); color: var(--ath-color-on-brand-heading); font: var(--ath-base-font-weight-bold) 14px/1 var(--ath-font-body); }
.ath-steps--fix > li::before { background: var(--ath-color-pillar-fix-heading); }
.ath-steps--run > li::before { background: var(--ath-color-pillar-run-heading); }
.ath-steps strong { display: block; font-family: var(--ath-font-display); font-weight: var(--ath-base-font-weight-semibold); color: var(--ath-color-text-heading); }
.ath-steps p { margin: 2px 0 0; color: var(--ath-color-text-muted); font-size: 15px; }

/* FAQ: native <details> rows in a module */
.ath-faq { background: var(--ath-color-bg-surface); border: 1px solid var(--ath-color-border-default); border-radius: var(--ath-radius-module); padding: 0 var(--ath-base-space-5); }
.ath-faq details { border-bottom: 1px solid var(--ath-color-border-default); }
.ath-faq details:last-child { border-bottom: none; }
.ath-faq summary { cursor: pointer; list-style: none; padding: var(--ath-base-space-4) 0; display: flex; justify-content: space-between; gap: var(--ath-base-space-4); font-family: var(--ath-font-display); font-weight: var(--ath-base-font-weight-semibold); color: var(--ath-color-text-heading); }
.ath-faq summary::-webkit-details-marker { display: none; }
.ath-faq summary::after { content: "+"; font-family: var(--ath-font-body); font-weight: var(--ath-base-font-weight-bold); color: var(--ath-color-text-link); }
.ath-faq details[open] summary::after { content: "\2212"; }
.ath-faq summary:focus-visible { outline: 2px solid var(--ath-color-border-focus); outline-offset: 2px; }
.ath-faq details > :not(summary) { margin: 0 0 var(--ath-base-space-4); color: var(--ath-color-text-muted); }

/* Sticky CTA: phone-only bottom bar with one primary button. Give <body> .has-sticky so content clears it */
.ath-sticky { display: none; }
@media (max-width: 760px) {
  .ath-sticky { display: flex; position: fixed; inset: auto 0 0 0; z-index: 40; padding: var(--ath-base-space-3) 18px calc(var(--ath-base-space-3) + env(safe-area-inset-bottom)); background: var(--ath-color-bg-surface); border-top: 1px solid var(--ath-color-border-default); box-shadow: var(--ath-shadow-float); }
  .ath-sticky .ath-btn { flex: 1; }
  .has-sticky { padding-bottom: 76px; }
}

/* Print sheet: letter page for the one-pager and reports. Load dist/css/tokens-print.css too */
.ath-sheet { width: 8.5in; min-height: 11in; margin: 24px auto; background: var(--ath-color-bg-surface); display: flex; flex-direction: column; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media print { @page { size: letter; margin: 0; } .ath-sheet { margin: 0; } }