/* Bespoke components with NO locked equivalent: the 5-way AI comparison table + the five pillars.
   Everything else (hero, splits, creed, values, what-section, science, founder, faqs) uses locked styles.css/hub.css/exemplar.css. */

/* 5-way comparison table (distinct from the locked pricing .cmp-table) */
.aicmp-section { background: var(--warm-sand); padding: 4.5rem 0; }
.aicmp-section__h { text-align: center; color: var(--navy); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.375rem); max-width: 50rem; margin: 0 auto 1.5rem; }
.aicmp-section__intro { max-width: 52rem; margin: 0 auto 2.5rem; }
.aicmp-section__intro p { text-align: center; color: var(--gray-700); line-height: 1.7; margin: 0 0 1rem; }
.aicmp-wrap { overflow-x: auto; }
.aicmp-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: transparent; border-radius: 14px; overflow: hidden; min-width: 760px; }
/* 5 value columns all equal width + centred; feature column takes the rest. */
.aicmp-table th, .aicmp-table td { width: 14%; text-align: center; vertical-align: middle; border: 0; padding: 1.1rem 0.5rem; }
.aicmp-table thead th { font-size: 0.8125rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--gray-200); }
.aicmp-table .aicmp-feat { width: 30%; text-align: left; font-size: 0.9rem; font-weight: 600; color: var(--navy); line-height: 1.35; padding-left: 1.25rem; }
/* Alternating row stripes per the mock: #FAFAFA and transparent. */
.aicmp-table tbody tr:nth-child(odd) { background: #fafafa; }
.aicmp-table tbody tr:nth-child(even) { background: transparent; }
.aicmp-y svg, .aicmp-n svg { width: 26px; height: 26px; display: inline-block; }
.aicmp-section__foot { text-align: center; color: var(--gray-700); line-height: 1.7; max-width: 52rem; margin: 3rem auto 0; }

/* Liam-directed: Mission/Vision creed quotes in italics (deliberate override of the no-italics lock for these quotes only). */
.creed__quote { font-style: italic; }

/* Collaborator Simple Explanation image: squarer to fill the navy panel (same width, more height). */
.what-section__illustration--square img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 25px; }

/* About hero: give the illustration more of the row + fill it, so there's less white space. */
@media (min-width: 880px) { .about-hero--fill .about-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3.5rem; } }
.about-hero--fill .about-hero__illustration img { width: 100%; max-width: none; }

/* Five pillars (collaborator) */
.pillars-section { background: var(--white); padding: 4.5rem 0; }
.pillars-section__h { text-align: center; color: var(--navy); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.375rem); margin: 0 0 1rem; }
.pillars-section__intro { text-align: center; color: var(--gray-700); line-height: 1.7; max-width: 48rem; margin: 0 auto 2.75rem; }
.pillars-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pillars-grid { grid-template-columns: repeat(5, 1fr); } }
.pillar__n { width: 40px; height: 40px; border-radius: 999px; background: var(--coral); color: var(--white); font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.pillar__t { color: var(--navy); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.6rem; text-align: center; }
.pillar__b { color: var(--gray-700); line-height: 1.6; font-size: 0.9rem; margin: 0; }