/* Homepage capabilities, Stack, process and security. */
.home-section { --block-blue: var(--brand-orange-85); --block-green: var(--brand-orange-65); --ink: #000; --muted: #656565; --line: #d7d7d7; --surface: #f9f9f9; --surface-alt: #eaeaea; --font: 'Instrument Sans', sans-serif; --mono: 'Martian Mono', monospace; --arch-ivory: var(--surface); --arch-ink: var(--ink); --arch-mono: var(--mono); --rail-inset: 40px; --header-height: 48px; --card-padding: var(--home-inset, 40px); --section-gap: 120px; }
.home-section { margin: 0px; background: var(--surface); color: var(--ink); font: 400 16px/24px var(--font); -webkit-font-smoothing: antialiased; }
.home-section h1, .home-section h2, .home-section h3 { font-weight: 500; }
.home-section a { color: inherit; text-decoration: none; }
.home-section .feature-grid { display: grid; position: relative; }
.home-section .vertex-box { position: relative; }
.home-section .security-heading { padding: 40px var(--card-padding); }
.home-section .security-heading p { max-width: 585px; margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--muted); }
.home-section .security-grid { border-block: 1px solid var(--line); }
@media (max-width: 800px) {
  .home-section .security-heading { padding-block: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-section * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}
/* All six enterprise safeguards stay visible, with no disclosure controls. */
.home-section .security-grid { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); align-items: stretch; }
.home-section .security-illustration { display: flex; align-items: center; border-right: 1px solid var(--line); }
.home-section .security-illustration img { width: 100%; height: auto; }
.home-section .security-features { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-section .security-item { min-width: 0; padding: 28px var(--card-padding); }
.home-section .security-item:nth-child(even) { border-left: 1px solid var(--line); }
.home-section .security-item:nth-child(n + 3) { border-top: 1px solid var(--line); }
.home-section .security-item h3 { font: 500 22px/1.25 var(--font); letter-spacing: -.025em; }
.home-section .security-item p { margin-top: 8px; font: 400 16px/24px var(--font); color: var(--muted); }
@media (max-width: 1000px) {
  .home-section .security-grid { grid-template-columns: 1fr; }
  .home-section .security-illustration { justify-content: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .home-section .security-illustration img { width: min(100%, 360px); }
}
@media (max-width: 560px) {
  .home-section .security-features { grid-template-columns: 1fr; }
  .home-section .security-item { padding-block: 24px; }
  .home-section .security-item:nth-child(even) { border-left: 0; }
  .home-section .security-item + .security-item { border-top: 1px solid var(--line); }
}
.home-section .working-floors { position: relative; display: block; width: 100%; min-height: 0px; overflow: hidden; }
.home-section .working-floors canvas { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; visibility: hidden; }
.home-section .working-floors__fallback { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-section .working-floors.is-ready canvas { visibility: visible; }
.home-section .working-floors.is-ready > img { visibility: hidden; }
.home-section .stack-working-preview .working-floors:focus-visible { outline-offset: -4px; }
.home-section { min-width: 0px; }
.home-section .rails { position: relative; margin-inline: 0px; border-inline: 0px; }
.home-section .stack-working-preview { min-width: 0px; }

/* Capabilities and operating-partner process. */
.home-section .section-heading { padding: 40px var(--card-padding); }
@media (max-width: 800px) {
  .home-section .section-heading { padding-block: 32px; }
}
.home-section .editorial-heading h2 > span { color: rgb(128, 128, 128); }
.home-section .editorial-heading > p { max-width: 800px; margin-top: 8px; color: var(--muted); font: 400 16px/24px var(--font); }
.home-section .process { background: var(--surface); }
.home-section .process-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); border-block: 1px solid var(--line); }
.home-section .process-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 320px; padding: var(--card-padding); border-right: 1px solid var(--line); }
.home-section .process-card:last-child { border-right: 0px; }
.home-section .step-label { display: inline-flex; padding: 4px 8px; border-radius: 0; font: 400 12px/16px var(--mono); text-transform: uppercase; background: var(--color-orange-700); color: var(--ink); }
.home-section .process-card:nth-of-type(2) .step-label { background: var(--block-blue); }
.home-section .process-card:nth-of-type(3) .step-label { background: var(--block-green); }
.home-section .process-card h3 { font-size: 24px; line-height: 1.2; letter-spacing: -0.04em; margin-top: 16px; }
.home-section .process-card p { margin-top: auto; padding-top: 80px; font-size: 16px; line-height: 24px; color: var(--muted); }
@media (max-width: 800px) {
  .home-section .process-grid { grid-template-columns: 1fr; }
  .home-section .process-card { min-height: 240px; border-right: 0px; border-bottom: 1px solid var(--line); }
  .home-section .process-card:last-child { border-bottom: 0px; }
  .home-section .process-card p { padding-top: 48px; max-width: 560px; }
}

/* Three equal capabilities, one shared title / illustration / copy rhythm. Card padding and
   right-hand dividers match the process grid below, so text edges and rules share columns. */
.home-section .capabilities-showcase { padding: 0; min-height: 0; background: var(--surface); }
/* The introduction sits on the third card's text edge; stacked below 1200px. */
.home-section .capabilities-showcase__header { display: grid; grid-template-columns: 2fr 1fr; align-items: end; gap: 0; padding: 40px 0; }
.home-section .capabilities-showcase__header > * { padding-inline: var(--card-padding); }
.home-section .capabilities-showcase__header p { max-width: 520px; color: var(--muted); font: 400 16px/24px var(--font); }
.home-section .capabilities-showcase__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.home-section .capabilities-showcase__grid > article { min-width: 0; padding: var(--card-padding); display: grid; grid-template-rows: auto clamp(200px, 32svh, 300px) 1fr; gap: 24px; background: var(--surface); }
.home-section .capabilities-showcase__grid > article:not(:last-child) { border-right: 1px solid var(--line); }
/* Side by side, the cards share the grid's rows: a title that wraps at tablet widths
   keeps every illustration and paragraph on the same line as its neighbours.
   The grid's row gap matches the cards' own gap, so subgrid adds no extra spacing. */
@media (min-width: 701px) {
  .home-section .capabilities-showcase__grid { grid-template-rows: auto clamp(200px, 32svh, 300px) 1fr; row-gap: 24px; }
  .home-section .capabilities-showcase__grid > article { grid-row: span 3; grid-template-rows: subgrid; }
}
/* The number badge centres on the title's first line, so two-line titles keep it level. */
.home-section .capabilities-showcase__grid h3 { --title-size: clamp(19px, 1.65vw, 24px); display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: var(--title-size); line-height: 1.2; letter-spacing: -.035em; }
.home-section .capability-number { display: inline-grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; margin-top: calc(var(--title-size, 24px) * .6 - 13px); background: var(--accent, var(--brand-orange)); color: var(--ink); font: 500 12px/16px var(--font); }
.home-section .capability-feature__visual { position: relative; width: 100%; height: 100%; min-height: 0; margin: 0; aspect-ratio: auto; overflow: hidden; }
/* Bias the crop left so the people remain in view in the narrowest cards. */
.home-section .capability-feature--implementation .enablement-image img { position: static; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: 16% 50%; filter: grayscale(1); }
.home-section .capability-feature__copy { min-width: 0; }
.home-section .capability-feature__copy p { color: var(--muted); font-size: 16px; line-height: 24px; }
.home-section .capabilities-stack__link { position: static; width: fit-content; min-width: 0; }
.home-section .capabilities-stack__scene.stack-working-preview { position: relative; display: block; grid-area: auto; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; contain: none; }
.home-section .capabilities-stack__scene .working-floors { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; cursor: default; touch-action: auto; }
.home-section .factory-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1050px) {
  .home-section .capabilities-showcase__grid > article { gap: 20px; }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .home-section .capabilities-showcase__grid { row-gap: 20px; }
}
@media (max-width: 1199px) {
  .home-section .capabilities-showcase__header { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 800px) {
  .home-section .capabilities-showcase__header { padding-block: 32px; }
}
@media (max-width: 700px) {
  .home-section .capabilities-showcase__grid { grid-template-columns: 1fr; }
  .home-section .capabilities-showcase__grid > article { grid-template-rows: auto 260px auto; }
  .home-section .capabilities-showcase__grid > article:not(:last-child) { border-right: 0; }
  .home-section .capabilities-showcase__grid > article + article { border-top: 1px solid var(--line); }
}

/* One editorial H2 scale for landing sections, not the footer labels inside main. */
.workshop-home main h2:not(.pl-footer h2) { letter-spacing: -.04em; }
/* Phones use the shared 32px scale in site-rails.css. */
@media (width > 600px) {
  .workshop-home main h2:not(.pl-footer h2) { font-size: 40px; line-height: 40px; }
}
/* Balanced headings and no single-word last lines; each authored heading line wraps on its own. */
.workshop-home main :is(h2, h3) { text-wrap: balance; }
.workshop-home main p { text-wrap: pretty; }
.workshop-home main .h2-line { display: block; }
