/* ============================================================
   COMPANY PAGES (/about, /careers, /work and every case study).
   Builds on the .lp landing-page system and .art illustrations in
   site.css. Colours come only from theme tokens, so light and dark
   both work. Loaded after site.css on these pages only.
   ============================================================ */

/* Hero extras */
.co-hero .crumbs{padding:0 0 18px}
.co-hero .lp-lede b{color:var(--ink); font-weight:600}

/* Result strip: .lp-trust with five cells and longer values */
.lp-trust.co-trust{grid-template-columns:repeat(5,1fr)}
.co-trust b{font-size:19px; line-height:1.25; letter-spacing:-.02em}
.co-trust span{font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
@media (max-width:1000px){
  .lp-trust.co-trust{grid-template-columns:1fr 1fr}
  .co-trust div{border-right:1px solid var(--line) !important; border-bottom:1px solid var(--line)}
  .co-trust div:nth-child(2n){border-right:0 !important}
  .co-trust div:last-child{grid-column:1 / -1; border-right:0 !important; border-bottom:0}
}
@media (max-width:420px){.co-trust div{padding:18px 16px} .co-trust b{font-size:17px}}

/* Story sections: text beside one illustration */
.co-split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.co-split.co-flip > .co-art{order:-1}
@media (max-width:960px){.co-split{grid-template-columns:1fr; gap:32px} .co-split.co-flip > .co-art{order:0}}
.co-art .art{margin:0; border-radius:var(--r-l); box-shadow:var(--shadow)}
.co-step{display:inline-grid; place-items:center; min-width:30px; height:24px; padding:0 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent-deep); font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.06em; margin-bottom:14px}
.co-prose p{font-size:18px; line-height:1.7; color:var(--ink-2); margin-top:18px; max-width:62ch}
.co-prose a,.lp .co-link a{color:var(--accent-deep); font-weight:600}
@media (max-width:760px){.co-prose p{font-size:17px}}
.lp .flowfig{margin-top:44px; border-radius:var(--r-l); background:var(--surface)}
.lp .flowfig figcaption{font-size:16px}

/* "What we built" pieces */
.co-pieces{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px; counter-reset:piece}
.co-pieces.co-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.co-pieces.co-3{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.co-pieces,.co-pieces.co-3{grid-template-columns:1fr}}
.co-pieces .lp-card{display:flex; flex-direction:column; gap:4px; transition:border-color .3s, transform .3s}
.co-pieces .lp-card:hover{border-color:var(--accent); transform:translateY(-3px)}
.co-pieces .lp-card::before{counter-increment:piece; content:counter(piece,decimal-leading-zero); font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--accent-deep); margin-bottom:8px}
.co-pieces .lp-card .art{margin-bottom:12px}

/* Takeaways card */
.co-take{margin-top:32px}
.co-take h3{margin:2px 0 6px}
.co-take li{font-size:17px}

/* Stack table at landing-page scale */
.lp .stackwrap{margin-top:40px; border-radius:var(--r-l)}
.lp .stackrow{grid-template-columns:190px minmax(0,1fr)}
@media (max-width:600px){.lp .stackrow{grid-template-columns:minmax(0,1fr)}}
.lp .stackrow .lbl{font-size:11.5px; padding:20px 22px}
.lp .stackrow .chips{padding:16px 22px}
.lp .stackrow .chips span{font-size:13px; padding:6px 12px}
@media (max-width:600px){.lp .stackrow .lbl{padding:18px 18px 0} .lp .stackrow .chips{padding:10px 18px 18px}}

/* Generic three-up grid */
.co-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
@media (max-width:1000px){.co-grid3{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.co-grid3{grid-template-columns:1fr}}
.co-cost{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line-2); font-family:var(--mono); font-size:12.5px; color:var(--signal)}

/* Link cards (engpick, roles) at landing-page scale */
.co-links{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.co-links{grid-template-columns:1fr}}

/* Timeline (About) built on .lp-weeks */
.co-tl .lp-wk{font-size:14px; font-weight:700}
.co-tl p a{color:var(--accent-deep); font-weight:600}

/* Work index: one story card per build */
.co-cases{display:flex; flex-direction:column; gap:28px; margin-top:48px}
.co-case{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:32px; scroll-margin-top:90px; transition:border-color .3s}
.co-case:hover{border-color:var(--accent)}
.co-case:nth-child(even) > .co-art{order:2}
@media (max-width:960px){.co-case{grid-template-columns:1fr; gap:24px; padding:24px} .co-case:nth-child(even) > .co-art{order:0}}
@media (max-width:420px){.co-case{padding:18px}}
.co-case .co-art .art{box-shadow:none}
.co-case .lp-tag{display:block; line-height:1.5}
.co-case h3{font-size:28px; letter-spacing:-.03em; margin-top:8px}
.co-case .co-lede{font-size:18px; line-height:1.6; color:var(--ink-2); margin-top:12px}
.co-case dl{margin:22px 0 0; display:grid; gap:0; border-top:1px solid var(--line)}
.co-case dl div{display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--line)}
@media (max-width:560px){.co-case dl div{grid-template-columns:1fr; gap:4px}}
.co-case dt{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-deep); padding-top:3px}
.co-case dd{margin:0; font-size:16px; line-height:1.6; color:var(--muted)}
.co-case .chips{margin-top:18px}
.co-case .chips span{font-size:12px}
.co-case .lp-more{display:inline-block; margin-top:14px; text-decoration:none}
.co-case .lp-more:hover{text-decoration:underline}

.co-clients{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px}
.co-clients span{font-family:var(--display); font-weight:600; font-size:17px; padding:12px 18px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2)}
.lp .quotes.work .quote footer b{display:block; font-size:15px}
.lp .quotes.work .quote footer span span{font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.lp .quotes.work{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.lp .quotes.work{grid-template-columns:1fr}}

/* Compare columns that both stay neutral (careers) */
.co-compare .lp-col h3{margin-bottom:6px}
.co-compare .lp-col li{font-size:17px}

/* Illustration helpers (new, theme-token coloured) */
.art .co-wave{fill:var(--accent); transform-box:fill-box; transform-origin:50% 100%; animation:co-wave 1.1s ease-in-out infinite}
@keyframes co-wave{0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)}}
.art .co-float{animation:co-float 3.2s ease-in-out infinite}
@keyframes co-float{50%{transform:translateY(-4px)}}
.art .co-spin{transform-box:fill-box; transform-origin:center; animation:z-spin 6s linear infinite}
.art .co-line{fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.art .co-sigline{fill:none; stroke:var(--signal); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:3 3}
.art .co-strike{stroke:var(--signal); stroke-width:1.8; stroke-linecap:round}
.art .co-ink{fill:var(--ink)}
.art .co-faint{fill:var(--faint)}
.art .co-big{font-family:var(--display); font-size:22px; font-weight:800; letter-spacing:-.02em; fill:var(--accent-deep)}
.art .co-flow{fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:2 7; animation:co-flow 1.2s linear infinite}
@keyframes co-flow{to{stroke-dashoffset:-18}}
.art .co-move{animation:co-move 6s ease-in-out infinite}
@keyframes co-move{0%,20%{transform:translateY(0)} 40%,80%{transform:translateY(var(--dy,-24px))} 100%{transform:translateY(0)}}
.art .co-walk{animation:co-walk 8s ease-in-out infinite}
@keyframes co-walk{0%,15%{transform:translateX(0)} 25%,40%{transform:translateX(80px)} 50%,65%{transform:translateX(160px)} 75%,92%{transform:translateX(240px)} 100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.co-pieces .lp-card,.co-case{transition:none} .art .co-wave,.art .co-float,.art .co-spin,.art .co-flow,.art .co-move,.art .co-walk{animation:none !important}}
@media (min-width:961px){.co-case > .co-art{position:sticky; top:96px}}
@media (min-width:1001px){.co-pieces.co-5{grid-template-columns:repeat(6,1fr)} .co-5 > *{grid-column:span 2} .co-5 > :nth-child(4){grid-column:2 / span 2}}