/* Companies page: the booklet seen from the team's side. Builds on site.css tokens. */

.co-cover { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 16px 24px; }
.co-copy { align-self: start; padding-top: 24px; }
.co-copy h1 { max-width: 14ch; }
.co-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.co-art { width: min(100%, 520px); height: auto; justify-self: center; }

.co-steps { margin-top: 40px; }
.co-steps .scene { max-width: 230px; }
.spec-art { width: 100%; max-width: 300px; height: auto; margin-top: 32px; }

.spec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; align-items: start; }
.spec-list { margin: 0; background: var(--paper); border: var(--key); border-radius: 24px; overflow: hidden; }
.spec-list div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding: 18px 24px; }
.spec-list div:nth-child(odd) { background: var(--page-2); }
.spec-list dt { font-weight: 900; font-size: 17px; }
.spec-list dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }

.co-proof { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
.co-proof img { width: 100%; max-width: 420px; height: auto; }
.co-proof + .plate { margin-top: 32px; }


.order { background: var(--ad-grad); color: var(--paper); border-radius: 32px; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.order .h2 { color: var(--paper); }
.order p { margin: 16px 0 28px; font-size: 20px; line-height: 1.5; color: var(--blue-100); max-width: 40ch; }
.order .btn-paper { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); border-radius: 999px; }
.order-browse { display: inline-block; margin: 18px 0 0 4px; color: var(--paper); }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.order-list li { display: flex; align-items: center; gap: 14px; font-weight: 800; font-size: 18px; background: #0b2556; border-radius: 16px; padding: 12px 16px; }
.order-list .callout { padding: 6px; background: var(--paper); border-color: var(--paper); }
.order-list .callout img { height: 30px; }

@media (max-width: 1000px) {
  .co-cover, .spec, .co-proof, .order { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .spec-list div { grid-template-columns: 1fr; gap: 4px; }
}

/* The hero panel keeps its own breathing room over the cover grid's padding. */
.co-cover.ad-panel { padding: clamp(24px, 3.4vw, 48px); }
.co-cover.ad-panel .co-copy { padding-top: 0; }

/* Depth, as in site.css: the order panel sits on a solid base under the campaign gradient. */
.order { border: var(--key); background: var(--sheen), var(--ad-grad); box-shadow: var(--base-lg), var(--air); }
.order .btn-paper { box-shadow: var(--base-sm); }
.order-list li { box-shadow: 0 4px 0 #020b1f; }
.order { background-color: #0b3a86; }
.order { background-image: radial-gradient(560px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, 0.16), transparent 60%), var(--sheen), var(--ad-grad); }

/* Piece icons keep their own shape: rows never squeeze them. */
.order-list .callout, .callout { flex: none; }
.callout img { width: auto; flex: none; }

/* Equal icon boxes, so every label in the order list starts at the same x. */
.order-list .callout { width: 52px; justify-content: center; }