/* About / Services / Contact (generated by tools/build-info-pages.py). Builds on style.css tokens and
   o3 primitives (.panel, .row-label, .chips, .channel, .btn); only page-specific layout lives here. */

/* ---------- layout ---------- */
@media (min-width: 1024px) {
  .grid > .info-hero { grid-column: span 8; }
  .grid > .info-side { grid-column: span 4; }
  .grid > .info-formpanel { grid-column: span 7; }
  .grid > .info-aside { grid-column: span 5; }
}
.info-gap { margin-top: var(--gap); }
.info > * + * { margin-top: var(--s2); }
.info .grid > section { margin-top: 0; } /* style.css adds section+section spacing; panels in a grid row must align */

/* ---------- hero ---------- */
.info-hero .panel__body { display: flex; align-items: flex-end; }
.info-h1 { font-size: clamp(2.25rem, 5.6vw + 0.5rem, 4.75rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; overflow-wrap: anywhere; }
.info-side .panel__body { display: flex; align-items: flex-end; }
.info-side__p { color: var(--ink-2); font-size: var(--t-md); line-height: 1.6; text-wrap: pretty; }
@media (min-width: 1024px) { .info-hero .panel__body { min-height: 260px; } }

/* ---------- prose + bodies ---------- */
.info-prose .panel__body { display: grid; gap: var(--s4); }
.info-prose p { font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 68ch; text-wrap: pretty; }
.info-prose b { font-weight: 600; color: var(--ink); }
.info-prose .hl { color: var(--accent-ink); }
.info-body { margin-top: var(--s2); font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
.info-summary { max-width: 64ch; }
.info-sub { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); }
.info-plus { display: grid; gap: var(--s1) var(--s5); margin-top: var(--s2); }
.info-plus li { position: relative; padding-left: 18px; font-size: var(--t-sm); }
.info-plus li::before { content: "+"; position: absolute; left: 0; font-family: var(--mono); color: var(--accent-ink); }
@media (min-width: 600px) { .info-plus { grid-template-columns: 1fr 1fr; } }

/* ---------- achievements ---------- */
.info-win { font-family: var(--mono); font-weight: 500; font-size: clamp(1.25rem, 0.8vw + 1rem, 1.6rem); line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }

/* ---------- timeline ---------- */
.info-flush > .panel__body { padding: 0; }
.info-tl li { display: grid; gap: var(--s1) var(--s5); padding: var(--s4); }
.info-tl li + li { border-top: 1px solid var(--line); }
.info-tl__year { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.info-tl__co { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.info-tl__role { margin-top: var(--s1); font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.06em; }
.info-tl__stat { font-family: var(--mono); font-weight: 500; font-size: var(--t-xl); letter-spacing: -0.02em; line-height: 1.2; }
@media (min-width: 768px) {
  .info-tl li { grid-template-columns: 160px minmax(0, 1fr) 200px; align-items: baseline; padding: var(--s5); }
  .info-tl__stat { text-align: right; }
}

/* ---------- chips (capabilities) ---------- */
.info-chips { gap: var(--s2); }
.info-chips li { font-size: var(--t-sm); padding: var(--s1) var(--s3); }

/* ---------- services ---------- */
.info-svc { margin-top: var(--s5); border-top: 1px solid var(--line-strong); }
.info-svc li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.info-svc li:last-child { border-bottom: 0; padding-bottom: 0; }
.info-ord { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); padding-top: 3px; }
.info-svc__t { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }

/* ---------- CTA rows ---------- */
.info-cta { display: grid; gap: var(--s4); align-items: center; }
.info-cta .btn { justify-self: start; }
.info-cta .btn svg { width: 14px; height: 14px; }
@media (min-width: 768px) { .info-cta { grid-template-columns: 1fr auto; } }

/* ---------- contact form ---------- */
.info-form { --err: #B42318; display: grid; gap: var(--s4); }
@media (min-width: 600px) { .info-form { grid-template-columns: 1fr 1fr; } .info-field--wide { grid-column: 1 / -1; } }
.info-field { display: grid; gap: var(--s1); min-width: 0; align-content: start; }
.info-field label { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); }
.info-field input, .info-field textarea { width: 100%; min-height: 44px; padding: var(--s2) var(--s3); font: inherit; font-size: var(--t-md); color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); transition: border-color var(--dur) var(--ease); }
.info-field textarea { resize: vertical; min-height: 148px; line-height: 1.5; }
.info-field input::placeholder, .info-field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.info-field input:hover, .info-field textarea:hover { border-color: var(--ink-3); }
.info-field input:focus, .info-field textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.info-field [aria-invalid="true"] { border-color: var(--err); }
.info-err { font-size: var(--t-sm); color: var(--err); }
.info-err::before { content: "! "; font-family: var(--mono); font-weight: 600; }
.info-submit { cursor: pointer; }
.info-submit svg { width: 14px; height: 14px; }

/* ---------- contact aside ---------- */
.info-col { display: grid; gap: var(--gap); }
.info-aside .channels li { list-style: none; }
.info-static { grid-template-columns: 1fr; }
.info-static:hover { border-color: var(--line-strong); background: transparent; }
.info-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: var(--s2); vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .info-dot { animation: info-pulse 2s var(--ease) infinite; }
  @keyframes info-pulse { 50% { opacity: 0.35; } }
}