/* Shared refinements for the data-first pages and legacy navigation. */
:root { --focus-ring: #f4bd4f; --reading-width: 68ch; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 1000; background: #fff; color: #10222e; padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 5px; }
html { scroll-padding-top: 6rem; }
.mega-toggle { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
header .nav-links > li > .mega-toggle {
    font-family: 'IBM Plex Mono', monospace; font-size: .78rem; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); padding: .4rem 0;
}
header .has-mega.open > .mega, header .has-mega:focus-within > .mega {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.hero-detail { color: rgba(255,255,255,.75); max-width: 42rem; margin-bottom: 2rem; }
/* Plain surfaces keep attention on the work and the people delivering it. */
.hero { background: var(--ink); }
.delivery-intro { max-width: 840px; }
.delivery-intro h2 { margin-bottom: 1.4rem; }
.delivery-intro p { max-width: var(--reading-width); margin-bottom: 1.4rem; }
.tool-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 3rem; align-items: center; padding: 2rem 0 3rem; }
.tool-feature h3 { font-size: 2rem; margin-bottom: 1rem; }
.tool-feature h3 a { color: inherit; }
.tool-feature p { margin-bottom: 1.4rem; }
.tool-role { color: var(--muted); font-size: .95rem; }
.tool-delivery { border-top: 1px solid var(--line); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tool-feature .platform-screen { margin: 0; }
.data-hero .eyebrow, .data-hero h1, .data-hero .hero-sub,
.data-hero .hero-ctas, .data-hero .hero-meta { animation: none; opacity: 1; transform: none; }
.section-intro { max-width: var(--reading-width); font-size: 1.12rem; margin-bottom: 1.4rem; }
.context-note { max-width: var(--reading-width); margin-top: 1.6rem; font-size: .92rem; }
.project-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.project-stories a { display: block; color: inherit; text-decoration: none; padding-top: 1.5rem; border-top: 3px solid var(--red); }
.project-stories span { font-size: .9rem; color: var(--muted); }
.project-stories h3 { font-size: 1.65rem; margin: .7rem 0 1rem; }
.project-stories p { margin-bottom: 1.2rem; }
.project-stories b { color: var(--red-dark); font-size: .95rem; }
.project-stories a:hover h3 { text-decoration: underline; text-underline-offset: .2em; }
.product-note { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line-dark); max-width: var(--reading-width); }
.product-note p { margin: 1rem 0 1.4rem; }
.deliverable { max-width: var(--reading-width); border-left: 3px solid var(--red); padding-left: 1rem; margin: 1.5rem 0; }
.answer { border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.answer summary { cursor: pointer; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.answer p { margin-top: 1rem; max-width: var(--reading-width); }
.article-copy { max-width: 840px; padding-top: 2.5rem; padding-bottom: 3rem; }
.article-copy section { padding: 1.5rem 0; }
.article-copy h2 { font-size: 1.7rem; margin-bottom: 1rem; }
.article-copy p { margin-bottom: 1.1rem; font-size: 1.07rem; }
.article-copy ul, .article-copy ol { padding-left: 1.5rem; margin: 1rem 0; }
.article-copy li { margin-bottom: .75rem; }
.article-table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.article-copy table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.article-copy caption { text-align: left; font-weight: 600; margin-bottom: .75rem; }
.article-copy th, .article-copy td { padding: .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-copy th { color: var(--ink); background: var(--panel); }
.article-byline { font-size: .9rem !important; }
.article-copy a:not(.btn), .context-note a, .answer a { text-decoration: underline; text-underline-offset: .2em; }
.grid .cell h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.breadcrumb { color: rgba(255,255,255,.7); font-size: .9rem; margin-bottom: 1.6rem; }
.page-hero .hero-ctas { margin-top: 1.5rem; }
/* Content stays readable when scripting is unavailable or fails to initialise. */
.scroll-reveal { opacity: 1; transform: none; }
@media (max-width: 968px) {
    header .has-mega.open > .mega, header .has-mega:focus-within > .mega { transform: none; }
    header .nav-links > li > .mega-toggle { width: 100%; text-align: left; padding: .9rem 0; }
    header .mobile-menu-btn { font-size: 1.65rem; }
}
@media (max-width: 768px) {
    .tool-feature, .tool-delivery { grid-template-columns: 1fr; gap: 2rem; }
    .project-stories { grid-template-columns: 1fr; gap: 2rem; }
    .hero-ctas .btn { max-width: 100%; white-space: normal; }
    .section-intro { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Platform previews reuse the existing brand typography, panels and crimson accents. */
.platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.platform-card { padding: 1.6rem; border: 1px solid var(--line); background: var(--panel); }
.platform-card h3 { font-size: 1.8rem; margin-bottom: 1rem; }
.platform-card h3 a { color: inherit; }
.platform-card > p { margin-bottom: 1rem; }
.platform-screen { margin: 1.5rem 0; }
.platform-screen img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.platform-screen figcaption { color: var(--muted); font-size: .85rem; margin-top: .7rem; }
.platform-screen figcaption span { display: block; }
.platform-caller { grid-column: 1 / -1; }
.platform-workflow { display: flex; flex-wrap: wrap; gap: 1rem 3rem; padding-left: 1.4rem; margin: 1.5rem 0; }
@media (max-width: 768px) { .platform-grid { grid-template-columns: 1fr; } .platform-card { padding: 1.2rem; } }

/* Reference pages use the established type and colour system. */
.offer-facts { font-weight: 600; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.article-copy > p, .article-copy > ul, .article-copy > ol { margin-bottom: 1.5rem; }
.article-copy > h2 { margin-top: 2rem; }
.article-copy li { margin-bottom: .65rem; }
.reference-search { padding: 1.25rem; background: var(--paper); border: 1px solid var(--line); margin: 2rem 0; }
.reference-search label { display: block; font-weight: 600; margin-bottom: .75rem; }
.reference-search input { display: block; width: 100%; box-sizing: border-box; padding: .8rem; font: inherit; border: 1px solid var(--muted); border-radius: 0; background: white; color: var(--ink); }
.reference-search button { font: inherit; cursor: pointer; padding: .4rem .8rem; margin-top: .5rem; }
.learning-reference .reference-term { border-top: 1px solid var(--line); padding: 1.4rem 0; }
.reference-term h3 { margin-bottom: .6rem; }
.reference-term p { margin-bottom: .75rem; }
.term-permalink { font-size: .85rem; }
.learning-reference [hidden] { display: none !important; }
@media print {
    header, footer, #contact, .reference-search, .skip-link { display: none !important; }
    .learning-reference .term-section, .learning-reference .reference-term { display: block !important; }
    .learning-reference { max-width: none; }
    .reference-term { break-inside: avoid; }
    .hero { min-height: auto; padding: 2rem 0; background: white; }
    .hero h1, .hero .hero-sub { color: black; }
}