/* ============================================================
   HOMEPAGE + SHARED CHROME
   The hub runs on Ink and Paper only. No venture accent here —
   Oxblood, Deep Navy and Deep Moss appear inside their own
   sections, never on this page.
   ============================================================ */

/* ---------- HEADER ---------- */

.site-head {
  border-bottom: var(--ar-hairline);
  background: var(--ar-paper);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* The skip link and any in-page target must clear the sticky header rather
   than sliding underneath it. */
html { scroll-padding-top: 100px; }
:target, #main { scroll-margin-top: 100px; }

/* On a short viewport — a phone held sideways — any fixed band costs too much
   vertical space to be worth keeping. */
@media (max-height: 480px) {
  .site-head { position: static; }
  html { scroll-padding-top: 0; }
}
.site-head__in {
  display: flex;
  align-items: center;
  gap: var(--ar-lg);
  min-height: 84px;
  flex-wrap: wrap;
}
.site-head__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 32px;   /* the wordmark is 17px tall; the link target must not be */
}
.site-head__logo svg { width: 148px; height: auto; }

.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ar-md);
  list-style: none;
}
.site-nav a {
  color: var(--ar-slate);
  text-decoration: none;
  font-size: var(--ar-small);
  padding-block: var(--ar-2xs);
  border-bottom: 1px solid transparent;
  transition: color var(--ar-ease), border-color var(--ar-ease);
}
.site-nav a:hover { color: var(--ar-ink); border-bottom-color: var(--ar-ink); }

.site-head__tel {
  font-family: var(--ar-font-mono);
  font-size: var(--ar-label);
  letter-spacing: .14em;
  color: var(--ar-ink);
  text-decoration: none;
  padding: 9px 14px;
  border: 1px solid var(--ar-line-ui);
  border-radius: var(--ar-radius);
  white-space: nowrap;
}
.site-head__tel:hover { border-color: var(--ar-ink); }

@media (max-width: 900px) {
  .site-head__in { padding-block: var(--ar-sm); }
  .site-nav { margin-left: 0; width: 100%; order: 3; }
  .site-head__tel { margin-left: auto; }
}

/* ---------- HERO ---------- */

.hero { padding-block: var(--ar-3xl) var(--ar-2xl); }
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: var(--ar-2xl);
  align-items: center;
}
.hero__text h1 {
  margin-block: var(--ar-sm) var(--ar-md);
  font-size: var(--ar-display);
  line-height: 1.0;
  letter-spacing: -.025em;
  max-width: 100%;
  overflow-wrap: break-word;
}
.hero__lead { color: var(--ar-slate); max-width: 54ch; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ar-xs);
  margin-top: var(--ar-lg);
  max-width: none;
}
.hero__figure { margin: 0; }
.hero__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--ar-radius);
}

@media (max-width: 900px) {
  .hero { padding-block: var(--ar-2xl); }
  .hero__in { grid-template-columns: 1fr; gap: var(--ar-xl); }
  .hero__figure { order: -1; }
  .hero__text h1 { max-width: 100%; }
}

/* ---------- PROOF BAR ---------- */

.proof { border-block: var(--ar-hairline); padding-block: var(--ar-xl); }
.proof__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ar-lg);
  list-style: none;
}
.proof__list > li {
  border-left: var(--ar-hairline);
  padding-left: var(--ar-md);
}
.proof__n {
  display: block;
  font-family: var(--ar-font-display);
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--ar-ink);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.proof__d {
  display: block;
  margin-top: var(--ar-2xs);
  font-size: var(--ar-caption);
  line-height: 1.45;
  color: var(--ar-clay);
}
@media (max-width: 860px) { .proof__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .proof__list { grid-template-columns: 1fr; } }

/* ---------- TWO-COLUMN PROSE ---------- */

.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ar-xl);
}
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; gap: var(--ar-lg); } }

/* ---------- THREE DOORS ---------- */

.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  border-top: var(--ar-hairline);
}
.door {
  padding: var(--ar-lg) var(--ar-lg) var(--ar-xl) 0;
  border-right: var(--ar-hairline);
}
.door:last-child { border-right: 0; }
.door:not(:first-child) { padding-left: var(--ar-lg); }
.door h3 { margin-block: var(--ar-2xs) var(--ar-xs); }
.door h3 a { color: var(--ar-ink); text-decoration: none; }
.door h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.door p { font-size: var(--ar-small); }

@media (max-width: 860px) {
  .doors { grid-template-columns: 1fr; }
  .door { border-right: 0; border-bottom: var(--ar-hairline); padding: var(--ar-lg) 0; }
  .door:not(:first-child) { padding-left: 0; }
  .door:last-child { border-bottom: 0; }
}

/* ---------- SERVICE LIST ---------- */

.svc__lead { margin-bottom: var(--ar-lg); max-width: 62ch; }
.svc { list-style: none; border-top: var(--ar-hairline); }
.svc > li {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--ar-md);
  align-items: baseline;
  padding-block: var(--ar-md);
  border-bottom: var(--ar-hairline);
}
.svc > li > a {
  font-family: var(--ar-font-display);
  font-size: var(--ar-h4);
  font-weight: 500;
  color: var(--ar-ink);
  text-decoration: none;
}
.svc > li > a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.svc > li > span { font-size: var(--ar-small); color: var(--ar-slate); }
@media (max-width: 700px) {
  .svc > li { grid-template-columns: 1fr; gap: var(--ar-3xs); }
}

/* ---------- QUOTE BAND ---------- */

.quote { padding-block: var(--ar-3xl); }
.quote__in { max-width: 46ch; }
.quote .ar-eyebrow { color: var(--ar-accent-on-dark); }
.quote__v {
  font-family: var(--ar-font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ar-paper);
  margin-top: var(--ar-sm);
  max-width: none;
}

/* ---------- CREDENTIALS ---------- */

.creds dt { color: var(--ar-clay); }
.creds dd { margin: 0; color: var(--ar-slate); }
.creds dd a { color: var(--ar-ink); }

/* ---------- PULL QUOTE ---------- */

.pull { margin: 0; max-width: 62ch; }
.pull blockquote p {
  font-family: var(--ar-font-display);
  font-weight: 300;
  font-size: var(--ar-h3);
  line-height: 1.45;
  color: var(--ar-ink);
  max-width: none;
}
.pull figcaption { margin-top: var(--ar-md); }

/* ---------- CONTACT ---------- */

.contact__addr { font-style: normal; margin-top: var(--ar-2xs); }

/* ---------- FOOTER ---------- */

.site-foot { padding-block: var(--ar-2xl) var(--ar-xl); margin-top: var(--ar-3xl); }
.site-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--ar-xl);
  padding-bottom: var(--ar-xl);
  border-bottom: 1px solid #3a3835;
}
.site-foot__mark { width: 34px; height: auto; margin-bottom: var(--ar-sm); }
.site-foot__brand .ar-label,
.site-foot__contact .ar-label,
.site-foot__nav .ar-label { color: var(--ar-stone); }

.site-foot__nav ul {
  columns: 2;
  column-gap: var(--ar-lg);
  list-style: none;
}
.site-foot__nav li { margin-bottom: var(--ar-2xs); break-inside: avoid; }
.site-foot a { color: var(--ar-line); text-decoration: none; font-size: var(--ar-small); }
.site-foot a:hover { color: var(--ar-paper); text-decoration: underline; }
.site-foot address { font-style: normal; font-size: var(--ar-small); color: var(--ar-stone); margin-top: var(--ar-2xs); }
.site-foot__contact p { margin-top: var(--ar-2xs); }

.site-foot__a11y {
  padding-block: var(--ar-lg);
  font-size: var(--ar-caption);
  line-height: 1.6;
  color: var(--ar-stone);
  max-width: 90ch;
  border-bottom: 1px solid #3a3835;
}
.site-foot__a11y a { font-size: inherit; color: var(--ar-line); text-decoration: underline; }

.site-foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ar-md);
  align-items: center;
  padding-top: var(--ar-lg);
}
.site-foot__legal p {
  font-family: var(--ar-font-mono);
  font-size: var(--ar-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ar-stone);
  margin: 0;
}
.site-foot__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ar-md);
  list-style: none;
  margin-left: auto;
}
.site-foot__legal a {
  font-family: var(--ar-font-mono);
  font-size: var(--ar-label);
  letter-spacing: .13em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .site-foot__top { grid-template-columns: 1fr; gap: var(--ar-lg); }
  .site-foot__legal ul { margin-left: 0; }
}


/* ---------- ONLY THIS ---------- */

.only { border-block: var(--ar-hairline); padding-block: var(--ar-2xl); }
.only__h {
  font-size: var(--ar-h2);
  margin-bottom: var(--ar-xl);
}
.only__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  border-top: var(--ar-hairline);
}
.only__list > li {
  padding: var(--ar-lg) var(--ar-lg) var(--ar-lg) 0;
  border-right: var(--ar-hairline);
}
.only__list > li:last-child { border-right: 0; }
.only__list > li:not(:first-child) { padding-left: var(--ar-lg); }
.only__list p:last-child { margin-top: var(--ar-2xs); font-size: var(--ar-small); }
@media (max-width: 860px) {
  .only__list { grid-template-columns: 1fr; }
  .only__list > li {
    border-right: 0; border-bottom: var(--ar-hairline);
    padding: var(--ar-md) 0;
  }
  .only__list > li:not(:first-child) { padding-left: 0; }
  .only__list > li:last-child { border-bottom: 0; }
}

/* ---------- STANDING BAND ---------- */

.quote__sub {
  margin-top: var(--ar-md);
  font-size: var(--ar-small);
  color: var(--ar-line);
  max-width: 58ch;
}
.quote__sub a { color: var(--ar-paper); text-decoration: underline; }
.quote__in { max-width: 60ch; }

/* header logo as img */
.site-head__logo img { width: 148px; height: auto; }
.site-foot__mark { width: 34px; height: auto; margin-bottom: var(--ar-sm); }


/* ---------- THREE ROLES ---------- */

.roles { border-block: var(--ar-hairline); padding-block: var(--ar-2xl); }
.roles__eyebrow { margin-bottom: var(--ar-lg); }
.ar-surface-deep .doors { border-top-color: var(--ar-line); }
.roles__list { list-style: none; border-top: var(--ar-hairline); }
.roles__list > li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--ar-md);
  align-items: start;
  padding-block: var(--ar-lg);
  border-bottom: var(--ar-hairline);
}
.roles__list > li:last-child { border-bottom: 0; }
.roles__list h3 {
  font-size: var(--ar-h3);
  font-weight: 400;
  line-height: 1.4;
  max-width: 52ch;
  margin: 0;
}
.roles__list h3 a {
  color: var(--ar-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ar-ease);
}
.roles__list h3 a:hover { border-bottom-color: var(--ar-ink); }
.roles__list .ar-label { padding-top: .35em; }
@media (max-width: 700px) {
  .roles__list > li { grid-template-columns: 1fr; gap: var(--ar-2xs); }
  .roles__list .ar-label { padding-top: 0; }
}

/* ---------- THE PATIENTS ---------- */

.patients { padding-block: var(--ar-3xl); }
.patients__in { max-width: 62ch; }
.patients .ar-eyebrow { color: var(--ar-accent-on-dark); }
.patients__v {
  font-family: var(--ar-font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 1.05rem + 2.3vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ar-paper);
  margin-top: var(--ar-sm);
  max-width: none;
}
.patients__list {
  list-style: none;
  margin-top: var(--ar-xl);
  border-top: 1px solid #3a3835;
}
.patients__list li {
  padding-block: var(--ar-md);
  border-bottom: 1px solid #3a3835;
  color: var(--ar-line);
  font-size: var(--ar-lead);
  line-height: 1.5;
}

/* ============================================================
   INTERIOR PAGES
   ============================================================ */

.crumbs { padding-top: var(--ar-md); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--ar-2xs); list-style: none; }
.crumbs li { font-family: var(--ar-font-mono); font-size: var(--ar-label);
             letter-spacing: .13em; text-transform: uppercase; color: var(--ar-clay); }
.crumbs li + li::before { content: "/"; margin-right: var(--ar-2xs); color: var(--ar-line-soft); }
.crumbs a { color: var(--ar-clay); text-decoration: none; }
.crumbs a:hover { color: var(--ar-ink); text-decoration: underline; }

.phead { padding-block: var(--ar-2xl) var(--ar-xl); }
.phead__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: var(--ar-2xl);
  align-items: end;
}
.phead h1 { margin-block: var(--ar-sm) var(--ar-md); max-width: 100%; overflow-wrap: break-word; }
.phead__lead { max-width: 52ch; }
.phead figure { margin: 0; }
.phead img { width: 100%; height: auto; border-radius: var(--ar-radius); }
@media (max-width: 900px) {
  .phead__in { grid-template-columns: 1fr; gap: var(--ar-xl); }
  .phead figure { order: -1; }
}

.prose > * + * { margin-top: var(--ar-sm); }
.prose h3 { margin-top: var(--ar-lg); }

/* data rows — case volumes, memberships */
.data { list-style: none; border-top: var(--ar-hairline); }
.data > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--ar-md);
  align-items: baseline;
  padding-block: var(--ar-xs);
  border-bottom: var(--ar-hairline);
  font-size: var(--ar-small);
}
.data > li > span:last-child {
  font-family: var(--ar-font-mono);
  font-size: var(--ar-label);
  letter-spacing: .12em;
  color: var(--ar-ink);
}

/* simple stacked list */
.stack { list-style: none; border-top: var(--ar-hairline); }
.stack > li { padding-block: var(--ar-md); border-bottom: var(--ar-hairline); }
.stack .ar-label { display: block; margin-bottom: var(--ar-3xs); }
.stack p { font-size: var(--ar-small); margin: 0; }

/* ---------- COMPARISON TABLE ---------- */

.tablewrap { overflow-x: auto; margin-top: var(--ar-lg); }
table.ar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ar-small);
  min-width: 46rem;
}
.ar-table caption {
  text-align: left;
  font-family: var(--ar-font-mono);
  font-size: var(--ar-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ar-clay);
  padding-bottom: var(--ar-sm);
}
.ar-table th, .ar-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--ar-md) var(--ar-md) var(--ar-md) 0;
  border-bottom: var(--ar-hairline);
}
.ar-table thead th {
  font-family: var(--ar-font-mono);
  font-weight: 500;
  font-size: var(--ar-label);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ar-clay);
  border-bottom: 1px solid var(--ar-line-ui);
  padding-bottom: var(--ar-xs);
}
.ar-table tbody th {
  font-family: var(--ar-font-display);
  font-size: var(--ar-h4);
  font-weight: 500;
  color: var(--ar-ink);
  white-space: nowrap;
  padding-right: var(--ar-lg);
}
.ar-table td { color: var(--ar-slate); }

/* ---------- NUMBERED STEPS ---------- */

.steps { list-style: none; counter-reset: step; border-top: var(--ar-hairline); }
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--ar-md);
  padding-block: var(--ar-lg);
  border-bottom: var(--ar-hairline);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--ar-font-mono);
  font-size: var(--ar-label);
  letter-spacing: .15em;
  color: var(--ar-clay);
  padding-top: .45em;
}
.steps h3 { margin-bottom: var(--ar-3xs); }
.steps p { font-size: var(--ar-small); margin: 0; }
@media (max-width: 640px) {
  .steps > li { grid-template-columns: 1fr; gap: var(--ar-2xs); }
}

/* ---------- FAQ ---------- */

/* Four short credential facts beneath a page lead. */
.factstrip {
  list-style: none; display: grid; gap: var(--ar-md);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: var(--ar-hairline);
  margin-top: var(--ar-xl); padding-top: var(--ar-md);
}
.factstrip strong {
  display: block; font-family: var(--ar-font-display);
  font-size: var(--ar-h3); font-weight: 400; color: var(--ar-ink);
  margin-bottom: var(--ar-3xs);
}
.factstrip span { font-size: var(--ar-caption); color: var(--ar-clay); }

/* Hairline-separated list of named analysis areas. */
.areas { list-style: none; border-top: var(--ar-hairline); margin-top: var(--ar-lg); }
.areas > li { padding-block: var(--ar-lg); border-bottom: var(--ar-hairline); }
.areas h3 { margin-bottom: var(--ar-2xs); max-width: 60ch; }
.areas p { font-size: var(--ar-small); max-width: 68ch; }

.faq { list-style: none; border-top: var(--ar-hairline); }
.faq > li { padding-block: var(--ar-lg); border-bottom: var(--ar-hairline); }
/* The questions are <h2> for document structure, but they are list items and
   should not be sized like section headings. Visual weight matches the old h3. */
.faq h2 { font-size: var(--ar-h3); font-weight: 500; line-height: 1.25;
          letter-spacing: 0; margin-bottom: var(--ar-2xs); max-width: 60ch; }

/* A section title that labels its section but is not a heading, so it does not
   sit in the outline above sibling headings it does not contain. */
.sechead-title { font-family: var(--ar-font-display); color: var(--ar-ink);
                 font-size: var(--ar-h2); font-weight: 400; line-height: 1.1;
                 letter-spacing: -.01em; max-width: 100%; overflow-wrap: break-word; }
.faq p { font-size: var(--ar-small); }

/* A link that is the whole of its paragraph is a standalone target, not an
   inline one, so the 24px minimum applies to it. */
.ar-linkline { display: inline-block; min-height: 24px; padding-block: 2px; }

/* The scrolling table is a focusable region; it needs a visible focus ring. */
.tablewrap:focus-visible { outline: 2px solid var(--ar-ink); outline-offset: 2px; }

/* ---------- TAP TARGETS (WCAG 2.2 — 2.5.8 Target Size Minimum) ----------
   Standalone links in navigation lists need a 24px minimum target.
   Inline links within a sentence are exempt from the criterion. */

.site-foot__nav a,
.site-foot__legal a,
.site-foot__contact p a,
.crumbs a,
.stack > li > p > a,
.svc > li > a,
.doors h3 a,
.roles__list h3 a {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}
.site-foot__nav li { margin-bottom: var(--ar-3xs); }
.site-foot__legal ul { row-gap: var(--ar-2xs); }

@media (max-width: 640px) {
  .site-nav a { min-height: 32px; line-height: 32px; }
  .site-foot__nav ul { columns: 1; }
}

/* ---------- PRINT ---------- */

/* Below 1024px the navigation wraps onto a second line and the header grows
   to 127-174px, which is too much of a small screen to hold permanently.
   Compact it instead: the wordmark and telephone keep one row, the navigation
   takes a single scrollable row beneath. */
@media (max-width: 1023px) {
  .site-head__in { min-height: 0; padding-block: var(--ar-2xs); gap: var(--ar-2xs) var(--ar-md); }
  .site-nav { margin-left: 0; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
              scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav ul { flex-wrap: nowrap; gap: 0.85rem; }
  .site-nav a { white-space: nowrap; font-size: var(--ar-caption); }
  /* The row scrolls when it cannot fit. Fade the trailing edge so it is
     apparent there is more to reach, rather than cutting a word dead. */
  .site-nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .site-head__tel { margin-left: auto; }
  html { scroll-padding-top: 108px; }
  :target, #main { scroll-margin-top: 108px; }
}

@media print {
  .site-head__tel, .site-nav, .ar-skip, .crumbs { display: none; }
  .site-head { position: static; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .ar-surface-dark { background: #fff !important; color: #000 !important; }
  .ar-surface-dark h1, .ar-surface-dark h2, .ar-surface-dark h3,
  .ar-surface-dark .ar-eyebrow, .ar-surface-dark a { color: #000 !important; }
  .ar-surface-deep { background: #fff; }
  .site-foot { background: #fff; color: #000; margin-top: var(--ar-lg);
               border-top: 1px solid #999; }
  .site-foot a, .site-foot address, .site-foot .ar-label { color: #000; }
  .site-foot__nav { display: none; }
  a { text-decoration: underline; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  section, li, tr, figure { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .ar-section { padding-block: var(--ar-md); }
  img { max-width: 60%; }
}


/* WCAG 1.4.12 — user-applied text spacing must not clip or overlap content.
   Width limits are expressed as maxima the box may shrink from, never as fixed
   ch measures that added letter-spacing can overflow. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
.hero__lead, .phead__lead, .quote__in, .patients__in { max-width: min(54ch, 100%); }
.svc > li > a, .roles__list h3, .doors h3 { overflow-wrap: break-word; }
.site-nav ul { row-gap: var(--ar-2xs); }
