/* Shared Mattear portfolio cards and pilot previews. */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.portfolio-card { display: flex; flex-direction: column; min-width: 0; padding: 1.8rem; background: #fffdf9; border: 1px solid #dbe2dc; border-radius: 1.2rem; transition: border-color .2s, box-shadow .2s; }
.portfolio-card:hover { border-color: #87a797; box-shadow: 0 10px 30px #212e280b; }
.portfolio-card-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 2rem; }
.portfolio-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; color: #415a50; background: #e1e9e5; border-radius: 12px; }
.portfolio-icon svg { width: 25px; height: 25px; }
.portfolio-category { color: #945338; font-size: .75rem; font-weight: 700; letter-spacing: .035em; margin-bottom: .55rem; }
.portfolio-card h3 { color: #212e28; font-size: 1.65rem; line-height: 1.2; letter-spacing: -.04em; scroll-margin-top: 90px; margin-bottom: 1rem; }
.portfolio-value { color: #314438; font-size: 1.02rem; font-weight: 650; line-height: 1.5; margin-bottom: .7rem; }
.portfolio-description { color: #58645e; font-size: .9rem; line-height: 1.7; margin-bottom: 1.7rem; }
.portfolio-card .solution-link { background: transparent; border: 0; border-radius: 0; padding: .3rem 0; box-shadow: none; display: inline-flex; gap: .45rem; align-items: center; align-self: flex-start; color: #415a50; font-size: .84rem; font-weight: 750; text-decoration: none; margin-top: auto; }
.portfolio-card .solution-link:hover { color: #945338; text-decoration: underline; text-underline-offset: .25em; }
.portfolio-more { margin: 2.6rem auto 0; text-align: center; }
.portfolio-more > a { display: inline-flex; gap: .8rem; align-items: center; }
.portfolio-more p { max-width: 44rem; margin: 1.4rem auto 0; color: #58645e; font-size: .95rem; line-height: 1.8; }
.portfolio-more p a { color: #415a50; font-weight: 650; text-decoration: underline; text-decoration-color: #c3d3cb; text-underline-offset: .2em; }
.portfolio-more p a:hover { color: #945338; text-decoration-color: currentColor; }
.offer-stage { display: inline-flex; border: 1px solid #c3d3cb; border-radius: 100px; background: #e1e9e5; color: #314438; padding: .4rem .75rem; font-size: .73rem; font-weight: 650; margin: 0 0 1.25rem; }
.portfolio-demo { transform: none; box-shadow: 0 22px 60px #212e2814; }
.demo-body { padding: 1.4rem; }
.vision-scene { display: grid; justify-items: center; background: #f0f4f2; border: 1px solid #e1e9e5; border-radius: .75rem; padding: 1.5rem 1rem; color: #58645e; font-size: .72rem; }
.vision-scene svg { width: 100%; max-width: 320px; height: 130px; margin-bottom: .8rem; }
.demo-labels, .demo-result { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.demo-labels { margin-top: 1.5rem; margin-bottom: .6rem; color: #58645e; font-size: .64rem; text-transform: uppercase; letter-spacing: .055em; }
.demo-result { padding: .8rem 0; border-bottom: 1px solid #e1e9e5; font-size: .81rem; }
.demo-result span { background: #e1e9e5; color: #415a50; border-radius: .4rem; padding: .3rem .6rem; font-size: .72rem; }
.demo-caption { font-size: .68rem; line-height: 1.6; margin-top: 1.2rem; color: #58645e; }
.demo-question { font-weight: 700; font-size: 1.05rem; color: #314438; line-height: 1.45; margin-bottom: 1.3rem; }
.scenario-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.scenario-pair > div { padding: 1rem; border: 1px solid #c3d3cb; border-radius: .7rem; background: #f0f4f2; }
.scenario-pair > div:last-child { background: #faf0e9; border-color: #f0d2c5; }
.scenario-pair span { display: block; color: #58645e; font-size: .66rem; margin-bottom: .6rem; }
.scenario-pair strong { font-size: .82rem; line-height: 1.55; display: block; color: #314438; }
.demo-evidence { border-left: 3px solid #b46446; background: #faf7f0; margin-top: 1rem; padding: 1rem; }
.demo-evidence span, .demo-evidence strong { display: block; font-size: .69rem; line-height: 1.5; color: #58645e; }
.demo-evidence strong { color: #314438; margin: .3rem 0; }
.demo-evidence p { font-size: .82rem; line-height: 1.65; color: #314438; }
.demo-next { font-size: .76rem; line-height: 1.65; color: #415a50; margin-top: 1rem; }
.use-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.scope-note { border-left: 3px solid #b46446; padding: 1.3rem 1.5rem; margin-top: 2rem; background: #f5f0e6; border-radius: 0 .6rem .6rem 0; }
.scope-note strong { font-size: 1rem; color: #314438; }
.scope-note p { margin-top: .5rem; color: #58645e; font-size: .9rem; line-height: 1.75; }
.catalog-hero { padding-top: 5.5rem; padding-bottom: 3.5rem; }
.catalog-hero h1 { font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -.055em; max-width: 900px; }
.catalog-hero h1 span { display: block; color: #b46446; }
.catalog-hero .hero-lead { max-width: 730px; }
.catalog-jumps { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.catalog-jumps a { font-size: .8rem; font-weight: 650; border: 1px solid #c3d3cb; padding: .7rem 1rem; border-radius: 100px; text-decoration: none; color: #415a50; }
.catalog-jumps a:hover { background: #e1e9e5; }
.catalog-section { padding-top: 2.5rem; padding-bottom: 4.5rem; scroll-margin-top: 80px; }
.catalog-heading { max-width: 730px; margin-bottom: 2rem; }
.catalog-heading h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -.04em; color: #314438; }
.catalog-heading > p:last-child:not(.section-label) { color: #58645e; font-size: .95rem; line-height: 1.7; margin-top: 1rem; }
@media (max-width: 1000px) {
    .portfolio-card { padding: 1.4rem; }
    .portfolio-card h3 { font-size: 1.4rem; }
}
@media (max-width: 760px) {
    .portfolio-grid, .use-case-grid { grid-template-columns: 1fr; }
    .portfolio-card { padding: 1.7rem; }
    .portfolio-card-top { margin-bottom: 1.5rem; }
    .portfolio-card h3 { font-size: 1.65rem; }
    .catalog-hero { padding-top: 3.5rem; padding-bottom: 1.5rem; }
    .catalog-section { padding-bottom: 2.5rem; }
}
@media (max-width: 380px) {
    .scenario-pair { grid-template-columns: 1fr; }
    .demo-body { padding: 1rem; }
}