/* Human-AI Systems shared stylesheet.
   Loaded on every page after the page's own inline styles, so rules here win on equal specificity.
   Holds site-wide accessibility fixes and the shared patterns added in the November 2026 redesign.
   See SITE_RULES.md, "Shared stylesheet". */

/* ── Typeface ──────────────────────────────────────────────────────
   Source Sans 3 is served from this site (variable font, weights 400 to 700) rather than Google Fonts:
   one fewer round of connections, and the latin file is preloaded so text rarely shows in the fallback first. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/source-sans-3-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/source-sans-3-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Metric-matched fallback: Arial scaled to the width of Source Sans 3, so lines wrap the same way before and
   after the web font arrives and the page does not shift. */
@font-face { font-family: "Source Sans 3 Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 90.5%; ascent-override: 113%; descent-override: 44%; line-gap-override: 0%; }
body { font-family: "Source Sans 3", "Source Sans 3 Fallback", "Segoe UI", Arial, sans-serif; }

:root {
  /* Steel Grey darkened for text so it passes WCAG AA (5.5:1 on white, 5.0:1 on Soft Grey).
     The brand Steel Grey #6B7C8F stays in use for lines, icons and diagram connectors. */
  --steel: #5A6B7E;
  --steel-line: #6B7C8F;
}

/* ── Accessibility ─────────────────────────────────────────────── */

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 8px;
  background: #FFFFFF;
  color: #1F3A5F;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(16, 28, 46, 0.25);
}
.skip-link:focus { top: 12px; }

/* Two-tone focus ring: blue reads on light backgrounds, aqua on dark ones. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #3EC1C9;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #1F3A5F;
  border-radius: 4px;
}

/* The closed mobile menu must not take keyboard focus. */
@media (max-width: 860px) {
  .mobile-menu { visibility: hidden; transition: max-height 260ms ease, visibility 0s linear 260ms; }
  .mobile-menu.is-open { visibility: visible; transition: max-height 260ms ease, visibility 0s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .reveal, .node { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Images ────────────────────────────────────────────────────── */

/* Responsive photographs (see SITE_RULES.md, "Image Assets"). The picture element takes no part in layout,
   and the width and height attributes give the browser the aspect ratio without forcing the height. */
picture.ph { display: contents; }
:where(picture.ph) img { height: auto; }

/* ── Framework diagrams ────────────────────────────────────────── */

.fw-ico { display: block; width: 104px; height: auto; aspect-ratio: 120 / 72; margin: 0 0 14px; overflow: visible; }
.fw-ico .nd { transform-box: fill-box; transform-origin: center; }
.fw-ico .ln { stroke-dasharray: 1; }

@keyframes fw-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fw-pop { from { transform: scale(0.35); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Diagrams draw in as they scroll into view. CSS only: browsers without scroll-driven
   animation, and anyone who prefers reduced motion, see the finished diagram. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fw-ico .ln { animation: fw-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 32%; }
    .fw-ico .nd { animation: fw-pop linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
  }
}

/* Engagement pathway strip (Services) */
.pathway { background: #FFFFFF; border-bottom: 1px solid rgba(31, 58, 95, 0.08); padding: 28px 0; }
.pathway ol { list-style: none; margin: 0 auto; padding: 0; width: min(1200px, calc(100% - 48px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pathway li { position: relative; }
.pathway li:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #3EC1C9; border-right: 2px solid #3EC1C9; transform: translateY(-50%) rotate(45deg); z-index: 1; }
.pathway a { display: block; height: 100%; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(31, 58, 95, 0.10); background: #F3F5F7; transition: border-color 200ms ease, background 200ms ease, transform 200ms ease; }
.pathway a:hover { border-color: #2A6F74; background: #FFFFFF; transform: translateY(-2px); }
.pathway .fw-ico { width: 84px; margin-bottom: 10px; }
.pathway-step { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2A6F74; }
.pathway-name { display: block; margin: 2px 0 4px; font-size: 1.08rem; font-weight: 600; color: #1F3A5F; line-height: 1.25; }
.pathway-line { display: block; font-size: 0.94rem; color: var(--steel); }
@media (max-width: 860px) {
  .pathway ol { grid-template-columns: 1fr 1fr; }
  .pathway li::after { display: none; }
}

/* ── Insights illustrations ────────────────────────────────────── */

.article-figure { margin: 0 0 40px; }
.article-figure img { display: block; width: 100%; height: auto; border-radius: 14px; }
.article-figure figcaption { margin-top: 10px; font-size: 0.94rem; line-height: 1.45; color: var(--steel); }
.insight-art { display: block; width: 100%; height: auto; border-radius: 10px; margin: 0 0 20px; }

/* ── Expandable sections ───────────────────────────────────────────
   Native <details>/<summary>: content is in the page for search engines and works without JavaScript.
   Pages lead with the essentials; depth sits behind these. See SITE_RULES.md, "Expandable sections". */

details.more { margin: 16px 0 0; border: 1px solid rgba(31, 58, 95, 0.12); border-radius: 12px; background: #FFFFFF; }
details.more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; font-size: 1rem; font-weight: 600; line-height: 1.35; color: #1F3A5F; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: ""; flex: 0 0 auto; margin-left: auto; margin-right: 4px; width: 9px; height: 9px; border-right: 2px solid #2A6F74; border-bottom: 2px solid #2A6F74; transform: translateY(-2px) rotate(45deg); transition: transform 200ms ease; }
details.more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
details.more > summary:hover { background: #F3F5F7; }
details.more[open] > summary { border-bottom: 1px solid rgba(31, 58, 95, 0.08); border-radius: 12px 12px 0 0; }
details.more > summary h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: inherit; text-transform: none; letter-spacing: 0; }
.more-hint { margin-left: auto; font-size: 0.88rem; font-weight: 400; color: var(--steel); white-space: nowrap; }
details.more > summary .more-hint + * { margin-left: 0; }
details.more > summary:has(.more-hint)::after { margin-left: 0; }
.more-kicker { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; background: rgba(62, 193, 201, 0.16); color: #1D5A5E; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.more-body { padding: 16px; }
.more-body > :first-child { margin-top: 0; }
.more-body > :last-child { margin-bottom: 0; }
.more-body.unbox { margin: 0; padding: 16px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.more-body > .unbox-inner { margin: 0; }

/* Plain variant: a quiet text disclosure, for prose that continues a section */
details.more.more-plain { border: 0; background: none; }
details.more.more-plain > summary { display: inline-flex; padding: 6px 0; color: #2A6F74; border-radius: 6px; }
details.more.more-plain > summary::after { margin-left: 2px; }
details.more.more-plain > summary:hover { background: none; text-decoration: underline; }
details.more.more-plain[open] > summary { border-bottom: 0; }
details.more.more-plain > .more-body { padding: 8px 0 0; }
details.more.more-center { text-align: center; }
details.more.more-center > .more-body { text-align: left; padding-top: 18px; }

/* Group variant: a heading and one-line summary that opens to a set of cards */
details.more.more-group { margin-top: 14px; background: #FFFFFF; }
.more-head { display: block; }
.more-head h3 { margin: 0 0 2px; font-size: 1.15rem; }
.more-head p { margin: 0; font-size: 0.96rem; font-weight: 400; color: var(--steel); }
details.more.more-faq { margin-top: 10px; }

@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details.more::details-content { height: 0; overflow: clip; transition: height 240ms ease, content-visibility 240ms allow-discrete; }
    details.more[open]::details-content { height: auto; }
  }
}

/* ── Home: photo tiles and illustrated cards ───────────────────── */

.card-photo { display: block; width: calc(100% + 56px); max-width: none; margin: -28px -28px 20px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 13px 13px 0 0; }
.card-art { display: block; width: 100%; height: auto; margin: 0 0 18px; border-radius: 10px; }
@media (max-width: 860px) {
  .sector-tiles { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .sector-tiles .card { padding: 14px; }
  .sector-tiles .card-photo { width: calc(100% + 28px); margin: -14px -14px 12px; aspect-ratio: 3 / 2; }
  .sector-tiles .card h3 { font-size: 1.02rem; margin-bottom: 0; }
  .sector-tiles .card p { display: none; }
}

/* Heading widths are set in em, not ch. A ch is the width of "0" in whichever font is showing, so a ch-based
   max-width changed when Source Sans 3 replaced the fallback font and shifted the whole page (CLS 0.68 on sector pages). */