/* Interior pages (package E): hubs, company pages, catalogues, enquiry forms and error pages.
   Type, labels, buttons, surfaces and form fields come from system.css (package A); motion from effects.css (B).
   This file only lays things out and gives page components their surface values. It loads before system.css,
   so it never sets font sizes, weights or tracking on headings. */

/* ==========================================================================
   Interior heroes and sections
   ========================================================================== */
.interior-hero { position: relative; min-height: 0; }
/* The hero accent stub sits on the shared left edge (80px at 1440, 320 at 1920, the gutter below 1280). */
.interior-hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: max(var(--gutter), calc((100% - var(--container)) / 2));
    width: 4rem;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    pointer-events: none;
}
.interior-section :is(.grid, .flex) > * { min-width: 0; }
.interior-section pre { max-width: 100%; overflow: auto; }
.interior-section article { overflow-wrap: anywhere; }
.interior-section .interior-document-hero { padding-top: 0; padding-bottom: 3rem; }

/* Arxis module pages: a product hero (slug in code beside its status), the design list and the family strip. */
.package-tagline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.package-tagline code { padding: 0.25rem 0.625rem; border: 1px solid var(--line-1); border-radius: var(--radius-sm); background: var(--well); font: 500 var(--fs-ui)/1.4 var(--font-mono); color: var(--accent); }
.package-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; color: var(--ink-3); font-size: var(--fs-small); }
.package-status-line a { color: var(--ink-1); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.2em; }
.package-status-line a:hover { text-decoration-color: var(--accent); }
.feature-list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.feature-list > li { position: relative; padding-left: 2.75rem; color: var(--ink-1); font-weight: 500; }
.feature-list > li::before { content: ''; position: absolute; left: 1.25rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-radius: 50%; background: var(--accent); }
.arxis-family-card[aria-current="page"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2)); background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.arxis-family-card[aria-current="page"] .text-link { color: var(--ink-3); }
/* Small print under a hero (experimental-tool notices). */
.hero-note { max-width: 40rem; margin-top: 0.5rem; color: var(--ink-4); font-size: var(--fs-meta); line-height: 1.6; }
/* Several lead paragraphs in a column. */
.prose-stack > * + * { margin-top: 1.25rem; }

/* Long-form reading inside a page (case studies, posts). Type comes from system.css. */
.interior-reading p { margin-block: 0 1.4em; }
.interior-reading :is(ul, ol) { padding-left: 1.5rem; margin-block: 1rem 1.5rem; }
.interior-reading ul { list-style: disc; }
.interior-reading ol { list-style: decimal; }
.interior-reading li { padding-left: 0.25rem; margin-bottom: 0.5rem; }
.interior-reading li::marker { color: var(--ink-4); }
.interior-reading strong { color: var(--ink-1); }
.interior-reading a { color: var(--accent); text-underline-offset: 0.2em; text-decoration: underline; }
.interior-reading pre { padding: 1.25rem; background: var(--surface-1); border: 1px solid var(--line-1); border-radius: var(--radius-md); }
.interior-reading table { display: block; overflow-x: auto; border-collapse: collapse; }
.interior-reading :is(th, td) { padding: 0.75rem; border-bottom: 1px solid var(--line-2); text-align: left; }

@media (max-width: 639px) {
    .interior-hero .mb-12, .interior-hero .mb-16 { margin-bottom: 2rem; }
    .interior-hero .mb-8 { margin-bottom: 1.5rem; }
    .interior-section > div > .p-8 { padding: 1.5rem; }
}

/* Section heads: one left-aligned block (eyebrow, title, lead) above the content. */
.section-head { max-width: var(--measure-head); margin-bottom: var(--space-head); }
.section-head > .lead:last-child,
.section-head > p:last-child { margin-bottom: 0; }
.section-head--split { max-width: none; display: grid; gap: 1rem 4rem; align-items: end; }
@media (min-width: 1024px) {
    .section-head--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
    .section-head--split > :last-child { padding-bottom: 0.35rem; }
}

/* Cards that live on a page (not links). Padding scales; surfaces come from .surface. */
.card-pad { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.card-pad-lg { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.card-body { color: var(--ink-3); font-size: var(--fs-small); line-height: 1.65; }
.card-foot { margin-top: auto; padding-top: 1.25rem; }
.card-stack { display: flex; flex-direction: column; }
/* Small fact boxes inside a card (core contract / product effect). */
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0; }
.fact-grid > div { min-width: 0; padding: 0.875rem 1rem; border: 1px solid var(--line-1); border-radius: var(--radius-sm); background: var(--surface-1); }
.fact-grid dt { margin: 0 0 0.375rem; font: 500 var(--fs-meta)/1.4 var(--font-sans); color: var(--ink-4); }
.fact-grid dd { margin: 0; font: 500 var(--fs-ui)/1.4 var(--font-sans); color: var(--ink-1); }
.fact-grid > .fact-grid-wide { grid-column: 1 / -1; }
/* A plain list with an accent marker. */
.dot-list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.dot-list > li { position: relative; padding-left: 1.125rem; color: var(--ink-3); }
.dot-list > li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--accent); }
.dot-list strong { display: block; margin-bottom: 0.25rem; color: var(--ink-1); font-weight: 600; }
/* Icon tiles inside cards. */
.icon-tile { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: var(--radius-sm); }
.icon-tile > svg { width: 1.375rem; height: 1.375rem; }
/* Numbered steps (01, 02 ...) inside cards. */
.step-index { display: block; margin-bottom: 0.75rem; }
/* A step card with its index beside the title, sitting on the title's first baseline. */
.step-row { display: flex; align-items: baseline; gap: 1rem; padding: 1.25rem; }
.step-row > .step-index { flex-shrink: 0; margin-bottom: 0; }
/* Title-and-line rows (step cards, icon rows): the title sits close to its line. */
:is(.step-row, .feature-rows) .card-title { margin-bottom: 0.25rem; }

/* The section pill sits just under the hero and stays pinned under the nav for the whole page. */
main > .section-nav[data-section-nav] { margin: 1rem auto 0; }

/* ==========================================================================
   Pillar hubs: a clear introduction paired with useful routes into the work
   ========================================================================== */
.hub-hero { position: relative; padding-inline: var(--gutter); background: var(--canvas); border-bottom: 1px solid var(--line-2); }
.hub-hero-grid {
    position: relative;
    max-width: var(--container);
    margin-inline: auto;
    display: grid;
    /* The copy column is wide enough at 1440 for the hub display size to reach its 72px cap with
       two-line titles that never end on a single word (--fs-hub is sized by this column). */
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 4.5vw, 4.5rem);
    align-items: center;
}
.hub-hero-copy { min-width: 0; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 2rem; }
.hub-route-map { padding: 1.5rem 1.75rem 0.5rem; }
.hub-route-map::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 1.75rem;
    width: 4rem;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    pointer-events: none;
}
.hub-route-label { margin: 0 0 0.5rem; }
.hub-route-map .hub-route {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: 0.875rem;
    min-height: 2.75rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--line-1);
    color: inherit;
    text-decoration: none;
}
.hub-route-number { align-self: start; padding-top: 0.3rem; }
.hub-route strong { display: block; margin-bottom: 0.25rem; }
.hub-route small { display: block; color: var(--ink-3); font: 400 var(--fs-meta)/1.55 var(--font-sans); }
.hub-route-arrow { color: var(--accent); justify-self: end; }
.hub-route:hover strong { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.25em; }

@media (max-width: 1023px) {
    .hub-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .hub-hero-copy { max-width: 46rem; }
}
@media (max-width: 639px) {
    .hub-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
    .hub-actions > a { width: 100%; }
    .hub-route-map { padding: 1.25rem 1.25rem 0.25rem; }
    .hub-route-map::before { left: 1.25rem; }
    .hub-route-map .hub-route { padding: 0.875rem 0; }
    .hub-route small { display: none; }
    .hub-route strong { margin-bottom: 0; }
}

/* ==========================================================================
   Micro catalogue and product cards
   ========================================================================== */
.micro-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.micro-products-grid .collection-catalog-group { margin-top: 1.25rem; padding-bottom: 0.5rem; order: 0; }
.micro-products-grid > [data-collection] { order: 0; }
.micro-product-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid var(--line-2);
    border-top-color: var(--line-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    box-shadow: var(--shadow-card);
    color: inherit;
    text-decoration: none;
}
.micro-product-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
/* The product's own hue lives only on its mark. */
.micro-product-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--product-accent) 40%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--product-accent) 26%, transparent), color-mix(in srgb, var(--product-accent) 8%, transparent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: var(--product-accent);
    font: 600 1.125rem/1 var(--font-display);
}
.micro-product-card .micro-product-category { margin-bottom: 0.5rem; color: var(--ink-3); }
.micro-product-description { margin-bottom: 1.5rem; color: var(--ink-3); font-size: var(--fs-small); line-height: 1.65; }
.micro-product-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line-1);
    color: var(--ink-1);
    font: 600 var(--fs-ui)/1.2 var(--font-sans);
}
.micro-product-link > span { color: var(--accent); }

@media (max-width: 1023px) { .micro-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .micro-products-grid { grid-template-columns: minmax(0, 1fr); } }

/* Notice line above a catalogue (working titles, planned work). */
.catalog-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: var(--measure-head);
    margin: 0 0 2rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--line-2);
    border-left: 2px solid var(--status-pilot);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    color: var(--ink-2);
    font-size: var(--fs-small);
    line-height: 1.6;
}
.catalog-note > svg { width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; flex-shrink: 0; color: var(--status-pilot); }

/* Mindset carousel (home-navigation.js reads .pillar-carousel-* and .micro-carousel-controls). */
.micro-carousel-controls { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
/* The status takes the free space (no reading measure), so the arrows sit flush right. */
.micro-carousel-controls p { flex: 1; max-width: none; }
.micro-carousel-controls button {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line-3);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink-1);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.micro-carousel-controls button:disabled { opacity: 0.35; cursor: default; }
.micro-carousel-controls button:enabled:hover { color: var(--brand-ink); background: var(--brand-accent); border-color: var(--brand-accent); }
.micro-mindset-track > .micro-mindset-slide { flex: 0 0 calc((100% - 1.25rem) / 2); min-width: 0; min-height: 18rem; scroll-snap-align: start; }
.micro-mindset-slide { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.75rem; }
.micro-mindset-slide .card-body { font-size: var(--fs-body); }
.micro-mindset-slide > .tag { align-self: flex-start; }
@media (max-width: 639px) { .micro-mindset-track > .micro-mindset-slide { flex-basis: 90%; } }
/* From 1024px three slides are visible at once; the status and buttons still page through the fourth. */
@media (min-width: 1024px) {
    .micro-mindset-track > .micro-mindset-slide { flex-basis: calc((100% - 2.5rem) / 3); min-height: 16rem; }
}

/* Concept sketches on Micro product pages: a labelled frame, never a product screen. */
.sketch-plate {
    position: relative;
    margin: 0;
    padding: 1.25rem;
    border: 1px dashed var(--line-3);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}
.sketch-plate-head { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-1); }
.sketch-plate-head .eyebrow { margin: 0; }
.sketch-plate-head .meta { margin-left: auto; }
/* Sketch labels are ordinary words, so they use the Inter label voice (mono is for code and indices). */
main .sketch-plate .meta { font: 500 var(--fs-meta)/1.4 var(--font-sans); letter-spacing: -0.003em; color: var(--ink-3); }
.sketch-plate figcaption { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--line-1); font: 400 var(--fs-meta)/1.55 var(--font-sans); color: var(--ink-4); }
.sketch-bubble { max-width: 85%; padding: 0.75rem 1rem; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink-1); }
.sketch-bubble--self { margin-left: auto; border-color: color-mix(in srgb, var(--accent) 30%, var(--line-2)); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border-bottom-right-radius: var(--radius-xs); }
.sketch-bubble--reply { border-bottom-left-radius: var(--radius-xs); }
.sketch-thread { display: grid; gap: 0.875rem; }
/* Below 390px the three sketch wells (e.g. /micro/fitzz/ roles) tighten so their labels stay inside the well.
   (0,2,0) beats the .p-4 utility on the wells. */
@media (max-width: 389px) {
    .sketch-thread .grid-cols-3 { gap: 0.375rem; }
    .sketch-thread .surface--well { padding-inline: 0.25rem; }
}
/* Before/after pairs: colour always comes with an icon and a word. */
.pair-tile { display: grid; justify-items: center; gap: 0.5rem; }
.pair-tile-box { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: var(--radius-md); font: 600 1.5rem/1 var(--font-display); }
.pair-tile--ok .pair-tile-box { border: 1px solid rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.1); color: #6ee7b7; }
.pair-tile--work .pair-tile-box { border: 1px solid rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.1); color: #fca5a5; }
.pair-tile-label { display: inline-flex; align-items: center; gap: 0.375rem; font: 500 var(--fs-micro)/1.2 var(--font-sans); }
.pair-tile-label > svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.pair-tile--ok .pair-tile-label { color: #6ee7b7; }
.pair-tile--work .pair-tile-label { color: #fca5a5; }
/* Legacy upper-case msgids shown in sentence case (keeps existing translations). */
.case-sentence { display: inline-block; text-transform: lowercase; }
.case-sentence::first-letter { text-transform: uppercase; }
.sketch-word { font: 600 2.25rem/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--ink-1); }

/* ==========================================================================
   Catalogues: search, filter chips and feedback
   ========================================================================== */
/* Filtered-out cards and groups: the hidden attribute beats every card display value. */
[data-collection-browser] [hidden] { display: none; }
.collection-toolbar {
    margin-bottom: 2.5rem;
    padding: 0.75rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}
.collection-toolbar-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: center; }
@media (min-width: 1024px) { .collection-toolbar-row { grid-template-columns: minmax(0, 1fr) auto; } }
.collection-search { position: relative; display: block; min-width: 0; }
.collection-search > svg { position: absolute; left: 1rem; top: 50%; width: 1.125rem; height: 1.125rem; translate: 0 -50%; color: var(--ink-4); pointer-events: none; }
.collection-search input {
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 1rem 0.625rem 2.75rem;
    border: 1px solid var(--field-line);
    border-radius: var(--radius-sm);
    background: var(--field);
    color: var(--ink-1);
    font: 400 1rem/1.5 var(--font-sans);
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.collection-search input:hover { border-color: var(--field-line-hover); }
.collection-search input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(245, 181, 68, 0.28); }
.collection-search input::placeholder { color: var(--field-line-hover); }
/* Filter chips: a segmented control. */
.collection-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.25rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    background: var(--canvas);
}
.collection-filter-button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    font: 500 var(--fs-ui)/1 var(--font-sans);
    letter-spacing: var(--tr-ui);
    color: var(--ink-3);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.collection-filter-button:hover { color: var(--ink-1); background: rgba(255, 255, 255, 0.04); }
.collection-filter-button:is(.is-active, [aria-pressed="true"]) {
    color: var(--ink-1);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 70%, transparent); /* 3:1+ against the chip row on every accent */
}
.collection-filter-button:focus-visible { outline-offset: -2px; }
@media (pointer: coarse) { .collection-filter-button { min-height: 2.75rem; } }
/* Below 640px the chips wrap onto a second row (no hidden scroller), so every filter stays visible. */
.collection-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.75rem;
    margin-top: 0.5rem;
    padding-inline: 0.25rem;
    color: var(--ink-3);
    font: 500 var(--fs-meta)/1.4 var(--font-sans);
}
.collection-feedback [data-collection-count] { font: 500 0.75rem/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-1); }
.collection-feedback button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    border: 0;
    background: transparent;
    font: 600 var(--fs-ui)/1 var(--font-sans);
    color: var(--ink-1);
    cursor: pointer;
}
.collection-feedback button > span { color: var(--accent); }
.collection-feedback button:hover { text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.25em; }
.collection-empty { margin-top: 2rem; padding: 1.5rem; border: 1px dashed var(--line-3); border-radius: var(--radius-md); color: var(--ink-3); text-align: center; }

/* Catalogue filter (motion catalogue 29): collection-catalog.js names the visible cards and groups for one
   same-document view transition; the page itself does not cross-fade, only the cards move (240ms). */
@media (prefers-reduced-motion: no-preference) {
    html.is-filtering::view-transition-old(root),
    html.is-filtering::view-transition-new(root) { animation: none; }
    html.is-filtering::view-transition-group(*) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-out); }
}

/* Catalogue order is defined in HTML, including for keyboard and screen readers. */
.catalog-ordered > [data-collection], .catalog-ordered > [data-collection-group] { order: 0; }
.catalog-ordered .collection-catalog-card { min-height: 0; height: auto; }
.catalog-ordered > [data-collection-group] { margin-top: 1.5rem; }
.catalog-ordered > [data-collection-group]:first-child { margin-top: 0; }
/* Catalogue cards: graphite link cards with the status top right and the action at the foot. */
.collection-catalog-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    color: inherit;
    text-decoration: none;
}
.collection-catalog-card .card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
.collection-catalog-card .card-top .eyebrow { margin: 0; }
.collection-catalog-card .card-body { margin-bottom: 1.5rem; }
.collection-catalog-card .fact-grid { margin-bottom: 1.5rem; }
.collection-catalog-card .card-foot { margin-top: auto; padding-top: 0.5rem; }
.collection-catalog-card .meta.slug { display: block; margin-bottom: 0.75rem; color: var(--accent); }
.collection-catalog-card .card-top .meta.slug { margin-bottom: 0; }
.collection-catalog-group { padding-bottom: 1rem; border-bottom: 1px solid var(--line-2); }
.collection-catalog-group .card-title { max-width: 46rem; margin-bottom: 0; color: var(--ink-2); }
.collection-catalog-group .eyebrow { margin-bottom: 0.5rem; }

/* ==========================================================================
   Ventures
   ========================================================================== */
.venture-portfolio { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
@media (min-width: 1024px) {
    .venture-portfolio { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; }
}
.venture-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); color: inherit; text-decoration: none; }
.venture-card .card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.5rem; }
.venture-card .card-top .eyebrow { margin: 0; }
.venture-card-flag { display: inline-flex; align-items: center; gap: 0.75rem; }
.venture-card-flag .meta { color: var(--accent); }
.venture-card-tagline { margin: 0 0 1rem; color: var(--ink-2); font: 500 var(--fs-body)/1.5 var(--font-sans); }
.venture-card .card-body { margin-bottom: 1.75rem; }
.venture-card .fact-grid { margin-bottom: 1.75rem; }
.venture-card .card-foot { margin-top: auto; padding-top: 0; }
.venture-card--flagship .card-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
@media (max-width: 639px) { .venture-card .fact-grid { grid-template-columns: minmax(0, 1fr); } }

/* Venture detail: partnership facts and integrations. */
.venture-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--line-2); }
.venture-facts > div { padding: 1.25rem 0; border-bottom: 1px solid var(--line-2); }
.venture-facts dt { margin: 0 0 0.5rem; font: 500 var(--fs-meta)/1.4 var(--font-sans); color: var(--ink-4); }
.venture-facts dd { margin: 0; color: var(--ink-1); font: 600 var(--fs-card)/1.3 var(--font-sans); letter-spacing: var(--tr-card); }
.venture-facts dd + dd { margin-top: 0.375rem; color: var(--ink-3); font: 400 var(--fs-small)/1.5 var(--font-sans); letter-spacing: 0; }
@media (min-width: 768px) {
    .venture-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); }
}
.venture-pillars { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.venture-pillars > li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line-2); }
.venture-pillars .index { padding-top: 0.35rem; }
.venture-pillars h3 { margin: 0 0 0.375rem; }
.venture-pillars p { color: var(--ink-3); }
.venture-integrations { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.venture-integrations > li { display: flex; align-items: center; gap: 0.875rem; padding: 1rem; color: var(--ink-1); font: 500 var(--fs-ui)/1.4 var(--font-sans); }

/* ==========================================================================
   Principles
   ========================================================================== */
.principles-page { padding-inline: var(--gutter); background: var(--canvas); }
.principles-grid { max-width: var(--container); margin: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.principle-panel {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--line-2);
    border-top-color: var(--line-3);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    box-shadow: var(--shadow-card);
}
.principle-panel > p:not(.brand-eyebrow):not(.eyebrow), .principles-decisions p { color: var(--ink-3); line-height: 1.7; }
.principle-panel ul { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-1); color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.7; }
.principle-panel li { position: relative; padding-left: 1.25rem; margin-bottom: 0.5rem; }
.principle-panel li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--accent); }
.principles-decisions { max-width: var(--container); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 5rem); }
/* Panels and the decisions block stack before their copy gets too narrow to read. */
@media (max-width: 767px) { .principles-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) { .principles-decisions { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
.decision-list details { border-bottom: 1px solid var(--line-2); }
.decision-list details:first-child { border-top: 1px solid var(--line-2); }
.decision-list summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 1rem 0.25rem;
    cursor: pointer;
    font: 500 var(--fs-h4)/1.4 var(--font-sans);
    color: var(--ink-1);
    transition: color var(--dur-fast) var(--ease-standard);
}
.decision-list summary::-webkit-details-marker { display: none; }
.decision-list summary::after {
    content: '+';
    flex-shrink: 0;
    color: var(--accent);
    font: 400 1.25rem/1 var(--font-sans);
    transition: transform var(--dur-fast) var(--ease-standard);
}
.decision-list details[open] > summary::after { transform: rotate(45deg); }
.decision-list summary:hover { color: var(--accent); }
.decision-list details > p { padding: 0 0.25rem 1.5rem; font-size: var(--fs-small); }
.principles-closing { max-width: var(--container); margin: auto; border-top: 1px solid var(--line-2); padding-block: 3rem 0; }
.principles-closing p { color: var(--ink-3); margin-bottom: 1.75rem; }

/* ==========================================================================
   Enquiry pages (briefing, contact, lead result)
   ========================================================================== */
.enquiry-page { padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--gutter); background: var(--canvas); }
.enquiry-layout {
    max-width: var(--container);
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas: 'aside form';
    align-items: start;
    gap: clamp(2rem, 6vw, 6rem);
}
.enquiry-aside { grid-area: aside; display: grid; row-gap: 2.5rem; min-width: 0; }
.enquiry-intro { min-width: 0; }
.enquiry-next { padding-top: 2rem; border-top: 1px solid var(--line-2); }
/* The label above the steps is an h2 with A's muted eyebrow role (type comes from system.css). */
main .enquiry-next > h2 { display: block; margin: 0 0 1.25rem; }
.enquiry-next ol { margin: 0; padding: 0; list-style: none; }
.enquiry-next li { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.enquiry-next li > .index { padding-top: 0.3rem; }
.enquiry-next strong { display: block; margin-bottom: 0.25rem; }
.enquiry-next p { color: var(--ink-3); font-size: var(--fs-ui); line-height: 1.65; }
.enquiry-form { min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem); }
.enquiry-layout > .enquiry-form { grid-area: form; }
.enquiry-form :is(input, textarea, select) { max-width: 100%; }
.enquiry-form form { display: grid; gap: 1.25rem; }
.enquiry-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 768px) { .enquiry-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.enquiry-form button[type=submit] { width: 100%; }
.enquiry-privacy { color: var(--ink-3); font-size: var(--fs-meta); line-height: 1.7; margin-top: 1.5rem; }
.enquiry-privacy a { color: var(--ink-1); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.2em; }
.enquiry-privacy a:hover { text-decoration-color: var(--accent); }
/* From 1024px the introduction and next steps stay in view beside the form, when the screen is tall enough. */
@media (min-width: 1024px) and (min-height: 760px) {
    .enquiry-aside { position: sticky; top: calc(var(--anchor-offset) + 1.5rem); }
}
@media (max-width: 1023px) {
    /* One column: introduction, form, then what happens next. */
    .enquiry-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'intro' 'form' 'steps'; max-width: 44rem; row-gap: 2.5rem; }
    .enquiry-aside { display: contents; }
    .enquiry-intro { grid-area: intro; }
    .enquiry-next { grid-area: steps; }
}
.lead-result { max-width: 42rem; margin-inline: auto; }

/* ==========================================================================
   Sprint, R&D and company pages
   ========================================================================== */
.closing-band { border-top: 1px solid var(--line-2); }
.route-list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.route-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 2.75rem;
    padding: 1rem 1.25rem;
    color: inherit;
    text-decoration: none;
}
.route-row strong { display: block; color: var(--ink-1); font-weight: 600; }
.route-row small { display: block; margin-top: 0.125rem; color: var(--ink-3); font-size: var(--fs-ui); }

/* ==========================================================================
   Error pages
   ========================================================================== */
main .interior-hero.error-hero { display: flex; align-items: center; min-height: calc(100svh - 5rem); }
.error-hero > div { width: 100%; }
.error-mark { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.error-mark > svg { width: 2.75rem; height: 2.75rem; flex-shrink: 0; color: var(--accent); }
.error-code { font: 600 clamp(3.5rem, 2rem + 8vw, 8rem)/0.9 var(--font-display); letter-spacing: -0.04em; color: var(--ink-4); font-variant-numeric: tabular-nums; }
/* 500.html renders without the site chrome or Tailwind. */
.error-standalone { min-height: 100svh; margin: 0; }
.error-standalone, .error-standalone *, .error-standalone *::before, .error-standalone *::after { box-sizing: border-box; }
.error-standalone :is(h1, p) { margin-top: 0; }
.error-standalone a { text-decoration: none; }
.error-standalone .error-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.error-standalone .hero-actions a { display: inline-flex; }