/**
 * Page-level styles for templates added to complete the public site
 * (Services/Products/Solutions/Industries/Case Studies/Blog/Careers/FAQ/About).
 * Additive only — reuses tokens from variables.css and base patterns from
 * cards.css/layout.css/grid.css; does not redeclare anything already styled
 * there. docs/design/17_Homepage_UI.md–27_FAQ_UI.md.
 */

/* ---------- Page hero (premium gradient header, consistent with homepage) ----------
   Milestone 9: interior page heroes now share the homepage hero's gradient
   language — dark navy→teal wash, subtle grid, light text — so every template
   opens with the same confident, branded header instead of a flat grey band.
   The breadcrumb renders inside .page-hero .container (container-aligned,
   muted-light) rather than as a full-width strip at the viewport edge. */
.page-hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-10) var(--space-12);
    background: linear-gradient(155deg, var(--color-primary-900) 0%, var(--color-primary-600) 60%, var(--color-secondary-700) 100%);
    color: var(--color-white);
}

@media (min-width: 1024px) {
    .page-hero { padding-block: var(--space-12) var(--space-16); }
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 90% 90% at 25% 15%, #000 40%, transparent 90%);
    mask-image: radial-gradient(ellipse 90% 90% at 25% 15%, #000 40%, transparent 90%);
}

.page-hero > .container { position: relative; z-index: 1; }
.page-hero__eyebrow,
.page-hero .eyebrow { color: var(--color-info-600); margin-bottom: var(--space-3); }
.page-hero h1 {
    font-size: var(--text-display-lg);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 900px;
    color: var(--color-white);
    text-wrap: balance;
}
.page-hero p,
.page-hero .body-lg { font-size: var(--text-subtitle); max-width: 680px; margin-top: var(--space-4); color: rgba(255, 255, 255, 0.82); }
.page-hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }

/* Split page hero — copy left, product mockup right (services/products). */
.page-hero__split { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: center; }

@media (min-width: 1024px) {
    .page-hero__split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--space-16); }
}

.page-hero__visual { display: flex; justify-content: center; }
.page-hero__visual .ui-mock { max-width: 440px; box-shadow: 0 24px 60px rgba(7, 25, 46, 0.45); }

@media (min-width: 1024px) { .page-hero__visual { justify-self: end; width: 100%; } }

@media (prefers-reduced-motion: no-preference) {
    .page-hero__visual .ui-mock { animation: hero-float 9s ease-in-out infinite; }
}

/* Contact hero — no illustration; a single wide typography-led column
   (~62% of the container at desktop) instead of the copy/mockup split,
   so the hero reads intentional rather than leaving empty space where a
   visual used to sit. */
.page-hero--contact .page-hero__content { margin-top: var(--space-6); max-width: 100%; }

@media (min-width: 1024px) {
    .page-hero--contact { padding-block: var(--space-16) var(--space-20); }
    .page-hero--contact .page-hero__content { margin-top: var(--space-8); max-width: 66%; }
}

/* Wide hero — no illustration/mockup column, full container width instead of
   a split (Careers). Wider than .page-hero--contact's narrow single-column
   treatment since this one carries two CTAs and longer copy. */
.page-hero--wide .page-hero__content { margin-top: var(--space-6); max-width: 1040px; }

@media (min-width: 1024px) {
    .page-hero--wide { padding-block: var(--space-16) var(--space-20); }
    .page-hero--wide .page-hero__content { margin-top: var(--space-8); }
    .page-hero--wide p { max-width: 760px; }
}

/* Breadcrumb placed inside the gradient hero — muted-light, container-aligned. */
.page-hero .breadcrumb { padding: 0 0 var(--space-5); }
.page-hero .breadcrumb__item,
.page-hero .breadcrumb__item a { color: rgba(255, 255, 255, 0.72); }
.page-hero .breadcrumb__item a:hover { color: var(--color-white); }
.page-hero .breadcrumb__item [aria-current="page"] { color: var(--color-white); }
.page-hero .breadcrumb__separator { color: rgba(255, 255, 255, 0.4); }

/* ---------- Filter pills (Case Studies industry filter — client-side buttons) ---------- */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-neutral-300);
    background: none;
    color: var(--color-neutral-700);
    font-family: inherit;
    font-size: var(--text-body-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.filter-pill:hover { text-decoration: none; border-color: var(--color-primary-600); color: var(--color-primary-600); }

.filter-pill.is-active {
    background: var(--color-primary-600);
    border-color: var(--color-primary-600);
    color: var(--color-white);
}

/* ---------- Media-style cards (Service / Product / Blog / Case Study) ---------- */
.media-card { display: flex; flex-direction: column; height: 100%; }

.media-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.media-card__body { flex: 1; display: flex; flex-direction: column; }
.media-card__title { margin-bottom: var(--space-2); }
.media-card__title a { color: inherit; }
.media-card__title a:hover { color: var(--color-primary-600); }
.media-card__description { color: var(--color-neutral-700); font-size: var(--text-body-sm); margin-bottom: var(--space-4); flex: 1; }
.media-card__footer { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-neutral-200); }

.case-study-card__facts { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-2); }
.case-study-card__facts dt { font-size: var(--text-label); font-weight: var(--weight-semibold); color: var(--color-primary-600); text-transform: uppercase; letter-spacing: 0.04em; }
.case-study-card__facts dd { margin: var(--space-1) 0 0; font-size: var(--text-body-sm); color: var(--color-neutral-700); }

/* Bleeds the featured image to the card edges — the negative margin must
   track the card's padding (space-6 mobile, space-8 ≥768px) so the image
   always meets the rounded card corners flush. */
.blog-card__image {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-secondary-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
    overflow: hidden;
}

@media (min-width: 768px) {
    .blog-card__image { margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-5); }
}

.blog-card__image img { width: 100%; height: 100%; object-fit: cover; }

.blog-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-body-sm);
    color: var(--color-neutral-500);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-neutral-100);
}

.blog-card__meta .avatar-initial {
    width: 26px;
    height: 26px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    font-weight: var(--weight-semibold);
}

/* Featured blog post — prominent horizontal card at the top of the listing. */
.featured-post {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

@media (min-width: 768px) {
    .featured-post { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
}

.featured-post__media {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-secondary-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
}

@media (min-width: 768px) {
    .featured-post__media { aspect-ratio: auto; min-height: 320px; }
}

.featured-post__media img { width: 100%; height: 100%; object-fit: cover; }

.featured-post__body {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

.featured-post__title { font-size: var(--text-h3); line-height: var(--leading-snug); }
.featured-post:hover .featured-post__title { color: var(--color-primary-600); }
.featured-post__excerpt { color: var(--color-neutral-700); }

/* ---------- Stat band (case study detail — 2-3 large numerals) ---------- */
.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6) 0;
    margin-bottom: var(--space-8);
    border-top: 1px solid var(--color-neutral-200);
    border-bottom: 1px solid var(--color-neutral-200);
}

.stat-band__item { text-align: center; }

.stat-band__value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-display-lg);
    font-weight: var(--weight-bold);
    color: var(--color-secondary-600);
    line-height: var(--leading-tight);
}

.stat-band__label { font-size: var(--text-body-sm); color: var(--color-neutral-700); }

/* Process rail/timeline styles live in layout.css (single source) — the
   legacy grid-based rail that used to live here hardcoded 5 columns and
   silently forced 6-step processes onto two rows. */

/* ---------- Team grid (About) ---------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    justify-content: center;
}

@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

.team-card { text-align: center; }

.team-card__photo {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    background: var(--color-primary-100);
    color: var(--color-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name { margin-bottom: 2px; }
.team-card__role { color: var(--color-neutral-700); font-size: var(--text-body-sm); }
.team-card__linkedin { display: inline-flex; margin-top: var(--space-2); color: var(--color-neutral-500); }
.team-card__linkedin:hover { color: var(--color-primary-600); }

/* Small circular initials avatar — used wherever a photo/media record may not exist yet */
.avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
}

/* ---------- Product detail — feature section (alternating), mockup placeholder ---------- */
.feature-section {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
    align-items: center;
    padding-block: var(--space-10);
}

@media (min-width: 1024px) {
    .feature-section { grid-template-columns: 5fr 7fr; }
    .feature-section--reverse { grid-template-columns: 7fr 5fr; }
    .feature-section--reverse .feature-section__mockup { order: 2; }
}

.feature-section__mockup {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-100);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-500);
}

.feature-section ul { margin-top: var(--space-4); }

.check-list { list-style: none; padding: 0; }

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    color: var(--color-neutral-700);
}

.check-list li svg { color: var(--color-secondary-600); flex-shrink: 0; margin-top: 2px; }

/* Two-column feature checklist (service pages' "What's included"). */
.check-list--columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3) var(--space-10);
}

@media (min-width: 768px) {
    .check-list--columns { grid-template-columns: 1fr 1fr; max-width: 880px; }
}

.check-list--columns li { font-size: var(--text-body-lg); }

/* ---------- Linked-entity callout (product <-> service cross-reference) ---------- */
.callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    background: var(--color-primary-50);
    border: 1px solid var(--color-primary-100);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-block: var(--space-8);
}

.callout p { margin: 0; color: var(--color-neutral-700); }
.callout strong { color: var(--color-neutral-900); }

.callout--cta {
    background: var(--color-primary-900);
    border-color: var(--color-primary-900);
}

.callout--cta h3 { color: var(--color-white); margin-bottom: var(--space-1); }
.callout--cta p { color: var(--color-neutral-300); }

/* ---------- Blog post table of contents ---------- */
.post-toc {
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-8);
}

.post-toc__title { font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-neutral-500); margin-bottom: var(--space-3); }
.post-toc ol { margin: 0; padding-left: var(--space-5); }
.post-toc li { margin-bottom: var(--space-2); font-size: var(--text-body-sm); }
.post-toc a { color: var(--color-neutral-700); }
.post-toc a:hover { color: var(--color-primary-600); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---------- Blog post author box ---------- */
.author-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-neutral-200);
}

.author-box__avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary-100);
    color: var(--color-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-semibold);
    font-size: var(--text-h5);
}

.author-box__name { margin: 0; font-weight: var(--weight-semibold); color: var(--color-neutral-900); }
.author-box__role { margin: 0; font-size: var(--text-body-sm); color: var(--color-neutral-700); }

/* Next/Previous article nav — post-adjacent-nav */
.post-adjacent-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: var(--space-10) 0;
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-neutral-200);
}

.post-adjacent-nav__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
    .post-adjacent-nav__link:hover { border-color: var(--color-primary-100); box-shadow: var(--shadow-sm); }
}

.post-adjacent-nav__link--next { text-align: right; align-items: flex-end; }

.post-adjacent-nav__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-neutral-500);
}

.post-adjacent-nav__link--prev .post-adjacent-nav__icon { transform: scaleX(-1); }
.post-adjacent-nav__title { color: var(--color-neutral-900); font-weight: var(--weight-semibold); }

/* ---------- Built-for industry strip (Product detail) ---------- */
.industry-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block: var(--space-6);
}

.industry-strip a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-full);
    font-size: var(--text-body-sm);
    color: var(--color-neutral-700);
}

.industry-strip a:hover { text-decoration: none; border-color: var(--color-secondary-600); color: var(--color-secondary-700); }

/* ---------- FAQ accordion (native <details>/<summary> — keyboard-accessible by default) ---------- */
.faq-category { margin-bottom: var(--space-12); }
.faq-category__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-neutral-200);
}
.faq-category__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--gradient-icon-3);
    color: var(--color-white);
}
.faq-category__title { margin: 0; font-size: var(--text-h3); }
.faq-category__count {
    margin-left: auto;
    font-size: var(--text-body-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-500);
    background: var(--color-neutral-100);
    border-radius: var(--radius-full);
    padding: 2px var(--space-3);
}

.faq-item {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    margin-bottom: var(--space-3);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.faq-item:hover { border-color: var(--color-primary-100); box-shadow: var(--shadow-sm); }
.faq-item[open] { border-color: var(--color-primary-100); box-shadow: var(--shadow-sm); }

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    font-weight: var(--weight-semibold);
    font-size: 1.25rem;
    line-height: var(--leading-snug);
    color: var(--color-neutral-900);
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; border-radius: var(--radius-md); }

.faq-item summary .faq-item__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-primary-50);
    color: var(--color-primary-600);
    transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.faq-item[open] summary .faq-item__icon { transform: rotate(180deg); background: var(--color-primary-600); color: var(--color-white); }

.faq-item__answer {
    padding: 0 var(--space-6) var(--space-5);
    color: var(--color-neutral-700);
    font-size: var(--text-body-md);
    line-height: var(--leading-relaxed);
}

.faq-item[open] .faq-item__answer { animation: faq-reveal var(--duration-base) var(--ease-out); }

.faq-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-10); }

/* ---------- Careers ---------- */
.role-list { display: flex; flex-direction: column; gap: var(--space-4); }

.role-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.role-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.role-card__title { margin-bottom: var(--space-1); }
.role-card__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; color: var(--color-neutral-500); font-size: var(--text-body-sm); }

.requirements-list { list-style: disc; padding-left: var(--space-6); color: var(--color-neutral-700); }
.requirements-list li { margin-bottom: var(--space-2); }

/* ---------- Blog post detail ---------- */
.post-header { max-width: 760px; margin-inline: auto; }
.post-meta { display: flex; align-items: center; gap: var(--space-3); color: var(--color-neutral-500); font-size: var(--text-body-sm); margin: var(--space-4) 0 var(--space-6); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }

.share-buttons { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.share-buttons a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-neutral-100); color: var(--color-neutral-700); }
.share-buttons a:hover { background: var(--color-primary-100); color: var(--color-primary-600); }

/* ---------- Generic content-grouping helpers reused across new pages ---------- */
.section-heading { max-width: 640px; margin-bottom: var(--space-8); }
.section-heading--center { margin-inline: auto; text-align: center; }

/* ---------- Locations (Local SEO) ---------- */
.location-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 640px) {
    .location-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .location-grid { grid-template-columns: repeat(3, 1fr); }
}

.location-card { text-decoration: none; }
.location-card .btn--tertiary { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-neutral-200); width: 100%; justify-content: flex-start; }

.location-crosslinks {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
    background: var(--color-neutral-50);
    border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
    .location-crosslinks { grid-template-columns: 1fr 1fr; }
}

.location-crosslinks__list { list-style: none; padding: 0; margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------- Feature split showcase (homepage rhythm-breaker) ----------
   Content on one side, a product mockup on the other. Alternates side via
   the --reverse modifier. Stacks visual-under-content on small screens. */
.feature-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 900px) {
    .feature-split { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
    .feature-split--reverse .feature-split__visual { order: -1; }
}

.feature-split__content { max-width: 520px; }
.feature-split__visual { display: flex; justify-content: center; }
.feature-split__visual .ui-mock { max-width: 440px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .feature-split__visual .ui-mock { transition: transform var(--duration-base) var(--ease-out); }
    .feature-split:hover .ui-mock { transform: translateY(-6px); }
}

.feature-split .check-list { margin: var(--space-6) 0; }
.feature-split--dark .check-list li { color: rgba(255, 255, 255, 0.9); }
.feature-split--dark .check-list li svg { color: var(--color-info-600); }

/* ---------- Contact ---------- */
.contact-info-card { text-align: left; }
.contact-info-card .card__description a { font-weight: var(--weight-semibold); }

/* Premium agency layout — trust column left, lead form right. */
.contact-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
}

@media (min-width: 1024px) {
    .contact-split { grid-template-columns: 5fr 7fr; align-items: start; }
}

.contact-details {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.contact-details li { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-details strong { color: var(--color-neutral-900); }
.contact-details a { font-weight: var(--weight-semibold); }

.contact-details__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--gradient-icon-3);
    color: var(--color-white);
}

.contact-why { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-neutral-200); }
.contact-why .check-list { margin-top: var(--space-4); }

.support-hours {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-secondary-100);
}
.support-hours strong { display: block; color: var(--color-neutral-900); }

.whatsapp-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: flex-start;
    margin-top: var(--space-6);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--color-secondary-100);
    border: 1px solid var(--color-secondary-600);
}

.whatsapp-cta__text { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.whatsapp-cta .btn { flex-shrink: 0; }

@media (min-width: 768px) {
    .whatsapp-cta { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- Case study (visual storytelling) ---------- */
.metric-band {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    text-align: center;
}

@media (min-width: 640px) {
    .metric-band { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

.metric-band__item {
    position: relative;
    padding: var(--space-6);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
    .metric-band__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}

.metric-band__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--color-secondary-100);
    color: var(--color-secondary-700);
    margin-bottom: var(--space-3);
}

.metric-band__value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-display-lg);
    font-weight: var(--weight-extrabold);
    line-height: 1;
    color: var(--color-secondary-600);
    font-variant-numeric: tabular-nums;
}

.metric-band__label { display: block; margin-top: var(--space-2); color: var(--color-neutral-700); font-size: var(--text-body-sm); }

/* Decorative KPI accent bar — animates to full width when the band scrolls
   into view (the metric band already carries data-scroll-reveal). */
.metric-band__bar {
    display: block;
    height: 4px;
    width: 100%;
    margin-top: var(--space-4);
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-secondary-600), var(--color-info-600));
    transform: scaleX(0.35);
    transform-origin: left;
    transition: transform var(--duration-slow) var(--ease-out);
}

[data-scroll-reveal].is-visible .metric-band__bar { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .metric-band__bar { transform: none; } }

.casestudy-overview { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }

@media (min-width: 960px) {
    .casestudy-overview { grid-template-columns: 1.5fr 1fr; align-items: start; }
}

.casestudy-split { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.casestudy-split__arrow { display: none; }

@media (min-width: 768px) {
    .casestudy-split { grid-template-columns: 1fr auto 1fr; align-items: center; }
    .casestudy-split__arrow { display: flex; align-items: center; justify-content: center; color: var(--color-neutral-300); }
}

/* story-flow — Problem -> Solution -> Result, 3-panel version of
   .casestudy-split (reuses the same panel/arrow primitives). */
.story-flow { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }

@media (min-width: 900px) {
    .story-flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; }
    .story-flow .casestudy-split__arrow { display: flex; align-items: center; justify-content: center; color: var(--color-neutral-300); }
}

.casestudy-split__panel {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}

.at-a-glance { margin: var(--space-4) 0 0; display: flex; flex-direction: column; gap: var(--space-4); }
.at-a-glance dt { font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-neutral-500); }
.at-a-glance dd { margin: var(--space-1) 0 0; color: var(--color-neutral-900); }

/* ---------- Solution patterns — before-after (Pattern B) ---------- */
.before-after { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: stretch; }
.before-after__arrow { display: none; }

@media (min-width: 768px) {
    .before-after { grid-template-columns: 1fr auto 1fr; align-items: center; }
    .before-after__arrow { display: flex; align-items: center; justify-content: center; color: var(--color-neutral-300); }
}

.before-after__panel {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}
.before-after__panel--after { border-color: var(--color-secondary-200); }
.before-after__label {
    display: inline-block;
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-neutral-100);
    color: var(--color-neutral-600);
    margin-bottom: var(--space-4);
}
.before-after__panel--after .before-after__label { background: var(--color-secondary-100); color: var(--color-secondary-700); }

/* ---------- Blog post (editorial) ---------- */
.post-hero__inner { max-width: 820px; }
.post-hero .badge { margin-bottom: var(--space-4); }
.post-hero h1 { font-size: var(--text-h1); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-white); text-wrap: balance; }
.post-hero__excerpt { font-size: var(--text-subtitle); color: rgba(255, 255, 255, 0.82); margin-top: var(--space-4); max-width: 680px; }
.post-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-6);
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--text-body-sm);
}
.avatar-initial--light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.16);
    color: var(--color-white);
    font-weight: var(--weight-semibold);
    font-size: 13px;
}

.post-featured-image {
    margin: calc(var(--space-12) * -1) auto var(--space-4);
    max-width: 960px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 2;
}
.post-featured-image img { display: block; width: 100%; height: auto; }
.post-featured-image figcaption { font-size: var(--text-body-sm); color: var(--color-neutral-500); text-align: center; padding: var(--space-3) var(--space-4); }

.post-layout { max-width: 720px; margin-inline: auto; }
.post-body { min-width: 0; }

@media (min-width: 1080px) {
    .post-layout--with-toc {
        max-width: 1040px;
        display: grid;
        grid-template-columns: 240px minmax(0, 720px);
        justify-content: center;
        gap: var(--space-10);
        align-items: start;
    }
    /* .post-toc's own padding-top (var(--space-5)) pushes its "In this
       article" label down from the grid row's top edge; matching that same
       offset on the article column keeps both columns' first line of text
       on one consistent vertical grid instead of the TOC starting ~21px
       lower purely because of its card padding. */
    .post-layout--with-toc .post-body {
        padding-top: var(--space-5);
    }
    .post-layout--with-toc .post-toc-aside { position: sticky; top: 100px; }
}

/* Smooth in-page nav from the TOC, with offset so the sticky header
   never covers the target heading. */
html { scroll-behavior: smooth; }
.rich-text h2 { scroll-margin-top: 96px; }

/* ==========================================================================
   Visual Rhythm Pass — homepage section components. Each is a distinct
   layout mechanic (docs: elevation scale L0-L4, existing tokens only).
   ========================================================================== */

/* ---------- command-center (Digital Marketing) — L3 ---------- */
.command-center {
    max-width: 720px;
    margin-top: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.command-center__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-neutral-50); border-bottom: 1px solid var(--color-neutral-200); }
.command-center__dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-neutral-300); }
.command-center__dot:nth-child(1) { background: #ff5f57; }
.command-center__dot:nth-child(2) { background: #febc2e; }
.command-center__dot:nth-child(3) { background: #28c840; }
.command-center__addr { margin-left: var(--space-3); font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-neutral-500); }
.command-center__body { display: flex; flex-direction: column; }
.command-center__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-neutral-100); color: var(--color-neutral-900); }
.command-center__row:last-child { border-bottom: none; }
.command-center__row-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--color-neutral-50); color: var(--color-primary-600); flex-shrink: 0; }
.command-center__row-label { flex: 1; font-weight: var(--weight-semibold); }
.command-center__row-live { display: flex; align-items: center; gap: 6px; font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-success-700); }
.command-center__pulse { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-success-600); }
.command-center__row-arrow { color: var(--color-neutral-300); }

@media (hover: hover) {
    .command-center__row { transition: background-color var(--duration-fast) var(--ease-out); }
    .command-center__row:hover { background: var(--color-neutral-50); }
    .command-center__row:hover .command-center__row-arrow { color: var(--color-primary-600); }
}

@media (prefers-reduced-motion: no-preference) {
    .command-center__pulse { animation: command-center-pulse 2s ease-in-out infinite; }
    [data-scroll-reveal].is-visible .command-center__row { animation: ui-mock-row-in 0.5s var(--ease-out) backwards; }
    [data-scroll-reveal].is-visible .command-center__row:nth-child(1) { animation-delay: 0.05s; }
    [data-scroll-reveal].is-visible .command-center__row:nth-child(2) { animation-delay: 0.1s; }
    [data-scroll-reveal].is-visible .command-center__row:nth-child(3) { animation-delay: 0.15s; }
    [data-scroll-reveal].is-visible .command-center__row:nth-child(4) { animation-delay: 0.2s; }
    [data-scroll-reveal].is-visible .command-center__row:nth-child(5) { animation-delay: 0.25s; }
    [data-scroll-reveal].is-visible .command-center__row:nth-child(6) { animation-delay: 0.3s; }
    [data-scroll-reveal].is-visible .command-center__row:nth-child(7) { animation-delay: 0.35s; }
    [data-scroll-reveal].is-visible .command-center__row:nth-child(8) { animation-delay: 0.4s; }
    [data-scroll-reveal].is-visible .command-center__row:nth-child(9) { animation-delay: 0.45s; }
}
@keyframes command-center-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 158, 90, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(30, 158, 90, 0); }
}

/* ---------- capability-radial (Software Development) — L3 hub, L1 nodes ---------- */
.capability-radial { position: relative; max-width: 620px; margin: var(--space-10) auto 0; aspect-ratio: 1 / 0.85; }
.capability-radial__glow { position: absolute; inset: -15%; background: radial-gradient(circle at center, var(--color-secondary-100) 0%, transparent 65%); z-index: 0; pointer-events: none; }
.capability-radial__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.capability-radial__hub {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
    width: 110px; height: 110px; border-radius: var(--radius-full);
    background: var(--color-white); border: 1px solid var(--color-neutral-200); box-shadow: var(--shadow-lg);
    text-align: center; padding: var(--space-2);
}
.capability-radial__hub-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--gradient-icon-3); color: var(--color-white); }
.capability-radial__hub strong { font-size: var(--text-caption); color: var(--color-neutral-900); }
.capability-radial__node { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; text-align: center; text-decoration: none !important; }
.capability-radial__node-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-white); border: 1px solid var(--color-neutral-200); box-shadow: var(--shadow-sm); color: var(--color-primary-600); }
.capability-radial__node-label { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-neutral-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .capability-radial__node-icon { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
    .capability-radial__node:hover .capability-radial__node-icon { transform: scale(1.1); box-shadow: var(--shadow-md); }
}

.capability-radial__mobile-list { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .capability-radial__node { opacity: 0; }
    [data-scroll-reveal].is-visible .capability-radial__node { animation: capability-node-in 0.5s var(--ease-out) forwards; }
    [data-scroll-reveal].is-visible .capability-radial__node:nth-of-type(1) { animation-delay: 0.1s; }
    [data-scroll-reveal].is-visible .capability-radial__node:nth-of-type(2) { animation-delay: 0.18s; }
    [data-scroll-reveal].is-visible .capability-radial__node:nth-of-type(3) { animation-delay: 0.26s; }
    [data-scroll-reveal].is-visible .capability-radial__node:nth-of-type(4) { animation-delay: 0.34s; }
    [data-scroll-reveal].is-visible .capability-radial__node:nth-of-type(5) { animation-delay: 0.42s; }
    [data-scroll-reveal].is-visible .capability-radial__node:nth-of-type(6) { animation-delay: 0.5s; }
}
@keyframes capability-node-in { to { opacity: 1; } }

@media (max-width: 767px) {
    .capability-radial { aspect-ratio: auto; height: auto; }
    .capability-radial__glow, .capability-radial__lines, .capability-radial__hub, .capability-radial__node { display: none; }
    .capability-radial__mobile-list { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; padding: 0; margin: 0; position: relative; z-index: 2; }
    .capability-radial__mobile-list a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-white); border: 1px solid var(--color-neutral-200); font-weight: var(--weight-semibold); color: var(--color-neutral-900); }
    .capability-radial__mobile-list .card__icon-tile { width: 32px; height: 32px; margin: 0; }
}

/* ---------- showcase-strip (Products) — L4 lead tile, L1 others, flagship visual ---------- */
.showcase-strip { display: flex; gap: var(--space-6); margin-top: var(--space-8); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-4); -webkit-overflow-scrolling: touch; }
.showcase-strip::-webkit-scrollbar { height: 8px; }
.showcase-strip::-webkit-scrollbar-thumb { background: var(--color-neutral-200); border-radius: var(--radius-full); }
.showcase-strip__tile { scroll-snap-align: start; flex: 0 0 300px; display: flex; flex-direction: column; }
.showcase-strip__tile:first-child { flex-basis: 340px; }
.showcase-strip__tile:first-child .showcase-strip__mockup .ui-mock { box-shadow: var(--shadow-xl); }
.showcase-strip__mockup { margin-bottom: var(--space-4); }
.showcase-strip__mockup .ui-mock { max-width: 100%; }
.showcase-strip__title { margin-bottom: var(--space-1); font-size: var(--text-h5); }
.showcase-strip__title a { color: var(--color-neutral-900); }
.showcase-strip__tagline { color: var(--color-neutral-700); font-size: var(--text-body-sm); margin-bottom: var(--space-3); }
.showcase-strip__modules { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.showcase-strip__modules li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); color: var(--color-neutral-700); }
.showcase-strip__modules li svg { color: var(--color-secondary-600); flex-shrink: 0; }
.showcase-strip__chip { align-self: flex-start; font-size: var(--text-caption); font-weight: var(--weight-semibold); padding: 3px var(--space-3); border-radius: var(--radius-full); background: var(--color-secondary-100); color: var(--color-secondary-700); }

@media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal].is-visible .showcase-strip__tile { animation: ui-mock-row-in 0.5s var(--ease-out) backwards; }
    [data-scroll-reveal].is-visible .showcase-strip__tile:nth-child(1) { animation-delay: 0.05s; }
    [data-scroll-reveal].is-visible .showcase-strip__tile:nth-child(2) { animation-delay: 0.15s; }
    [data-scroll-reveal].is-visible .showcase-strip__tile:nth-child(3) { animation-delay: 0.25s; }
    [data-scroll-reveal].is-visible .showcase-strip__tile:nth-child(4) { animation-delay: 0.35s; }
}

/* ---------- comparison (Why Cognidigit) — L2, one slow fade ---------- */
.comparison { display: grid; grid-template-columns: 1fr; gap: var(--space-6); max-width: 900px; margin-top: var(--space-10); }
@media (min-width: 768px) {
    .comparison { grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
}
.comparison__col { padding: var(--space-8); }
.comparison__col--against { background: var(--color-neutral-50); }
.comparison__col--for { background: var(--color-primary-900); color: var(--color-white); }
.comparison__col-label { display: block; font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-bold); margin-bottom: var(--space-6); }
.comparison__col--against .comparison__col-label { color: var(--color-neutral-500); }
.comparison__col--for .comparison__col-label { color: var(--color-white); }
.comparison__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.comparison__list li { display: flex; align-items: flex-start; gap: var(--space-3); line-height: 1.4; }
.comparison__col--against .comparison__list li { color: var(--color-neutral-700); }
.comparison__col--for .comparison__list li { color: rgba(255, 255, 255, 0.92); }
.comparison__mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-full); margin-top: 2px; }
.comparison__mark--no { background: var(--color-neutral-200); color: var(--color-neutral-500); }
.comparison__mark--yes { background: var(--color-secondary-600); color: var(--color-white); }

/* ---------- outcome-timeline (Case Studies) — L2 nodes, L1 line, editorial pace ---------- */
.outcome-timeline { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-10); position: relative; }
@media (min-width: 768px) {
    .outcome-timeline { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
    .outcome-timeline::before { content: ''; position: absolute; top: 20px; left: 5%; right: 5%; height: 2px; background: var(--color-neutral-200); z-index: 0; }
}
.outcome-timeline__node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); text-decoration: none !important; }
.outcome-timeline__dot { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-white); border: 2px solid var(--color-secondary-600); color: var(--color-secondary-700); font-weight: var(--weight-bold); font-size: var(--text-body-sm); box-shadow: var(--shadow-sm); }
.outcome-timeline__stat { font-family: var(--font-heading); font-size: var(--text-display-lg); font-weight: var(--weight-extrabold); color: var(--color-primary-600); line-height: 1; }
.outcome-timeline__label { font-size: var(--text-body-sm); color: var(--color-neutral-700); max-width: 200px; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .outcome-timeline__dot { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
    .outcome-timeline__node:hover .outcome-timeline__dot { transform: scale(1.12); box-shadow: var(--shadow-md); }
}

/* ---------- editorial-feature / editorial-list (Blog) — quiet, restrained pace ---------- */
.editorial-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: var(--space-8);
    padding: var(--space-10) var(--space-8);
    min-height: 280px;
    border-radius: var(--radius-xl);
    background-size: cover;
    background-position: center;
    background-color: var(--color-primary-900);
    color: var(--color-white);
    text-decoration: none !important;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.editorial-feature--no-image { background-image: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-900)) !important; }
.editorial-feature__badge { align-self: flex-start; font-size: var(--text-caption); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; padding: 4px var(--space-3); border-radius: var(--radius-full); background: var(--color-accent-600); color: var(--color-primary-900); margin-bottom: auto; }
.editorial-feature__title { font-family: var(--font-heading); font-size: var(--text-h2); color: var(--color-white); max-width: 640px; margin: 0 0 var(--space-2); }
.editorial-feature__excerpt { color: rgba(255, 255, 255, 0.85); max-width: 560px; margin: 0; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .editorial-feature { transition: transform var(--duration-base) var(--ease-out); }
    .editorial-feature:hover { transform: translateY(-4px); }
}

.editorial-list { list-style: none; padding: 0; margin: var(--space-6) 0; display: flex; flex-direction: column; }
.editorial-list li { border-bottom: 1px solid var(--color-neutral-200); }
.editorial-list li:first-child { border-top: 1px solid var(--color-neutral-200); }
.editorial-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; color: var(--color-neutral-900); }
.editorial-list__title { font-weight: var(--weight-semibold); }
.editorial-list__meta { flex-shrink: 0; font-size: var(--text-caption); color: var(--color-neutral-500); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .editorial-list a { transition: color var(--duration-fast) var(--ease-out); }
    .editorial-list a:hover .editorial-list__title { color: var(--color-primary-600); }
}

/* ==========================================================================
   Listing-page section components (Services, Products, Solutions,
   Industries, Case Studies) — same discipline as the homepage set above.
   ========================================================================== */

/* ---------- narrative-block (Services — Digital Marketing) ---------- */
.narrative-block { margin-top: var(--space-8); max-width: 720px; }
.narrative-block p { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: var(--color-neutral-700); margin-bottom: var(--space-6); }
.narrative-block__lead { font-size: var(--text-h4); color: var(--color-neutral-900); font-weight: var(--weight-semibold); }
.narrative-block p a { color: var(--color-secondary-700); font-weight: var(--weight-semibold); }
.narrative-block__quote {
    margin: var(--space-10) 0;
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--color-secondary-100);
    border-left: 4px solid var(--color-secondary-600);
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    color: var(--color-primary-600);
    line-height: 1.35;
}

/* ---------- bento-grid (Products listing) — structured but irregular ---------- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: var(--space-6);
}
@media (min-width: 768px) {
    .bento-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bento-grid__tile {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
    .bento-grid__tile--large { grid-column: span 4; }
    .bento-grid__tile--large .showcase-strip__mockup .ui-mock { max-width: 560px; margin: 0 auto var(--space-4); box-shadow: var(--shadow-xl); }
    .bento-grid__tile--large .showcase-strip__modules { columns: 2; }
}

@media (hover: hover) {
    .bento-grid__tile { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
    .bento-grid__tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
}

/* ---------- Products — 4 reusable card styles (product-card.php) ----------
   One partial, 4 visual treatments, so the grid stops repeating a single
   mockup+title+tagline+list anatomy. Sits inside .bento-grid__tile, which
   already provides the hover lift/shadow — not duplicated here. */
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card__visual { margin-bottom: var(--space-4); position: relative; }
.product-card__visual-frame { display: flex; align-items: flex-start; justify-content: center; height: 260px; overflow: hidden; }
.product-card__visual .ui-mock { max-width: 100%; flex-shrink: 0; }
.product-card__body { display: flex; flex-direction: column; flex: 1; }
.product-card__title { font-size: var(--text-h5); margin-bottom: var(--space-1); }
.product-card__title a { color: var(--color-neutral-900); }
.product-card__tagline { color: var(--color-neutral-700); font-size: var(--text-body-sm); margin-bottom: var(--space-3); }
.product-card__subhead { font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-neutral-500); margin: 0 0 var(--space-2); }
.product-card__list { margin: 0 0 var(--space-3); }
.product-card .showcase-strip__chip { margin-bottom: var(--space-4); }
.product-card__cta { margin-top: auto; align-self: flex-start; }

/* Style C — dashboard-first: a small real-count metric strip (modules,
   features, industries — actual counts, not fabricated performance stats)
   overlapping the mockup's bottom edge. */
.product-card__stat-strip {
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-5);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
}
.product-card__stat-strip div { text-align: center; }
.product-card__stat-strip strong { display: block; font-family: var(--font-heading); font-size: var(--text-h5); color: var(--color-primary-600); }
.product-card__stat-strip span { font-size: var(--text-caption); color: var(--color-neutral-500); }
.product-card--c .product-card__body { margin-top: var(--space-5); }

/* Styles B/D — left mockup / right details split (rendered inside the wide
   .bento-grid__tile--large so there's room for two columns). */
@media (min-width: 768px) {
    .product-card--b, .product-card--d { flex-direction: row; align-items: flex-start; gap: var(--space-8); }
    .product-card--b .product-card__visual, .product-card--d .product-card__visual { flex: 0 0 42%; margin-bottom: 0; }
    .product-card--b .product-card__body, .product-card--d .product-card__body { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal].is-visible .bento-grid__tile { animation: ui-mock-row-in 0.5s var(--ease-out) backwards; }
    [data-scroll-reveal].is-visible .bento-grid__tile:nth-child(1) { animation-delay: 0.04s; }
    [data-scroll-reveal].is-visible .bento-grid__tile:nth-child(2) { animation-delay: 0.1s; }
    [data-scroll-reveal].is-visible .bento-grid__tile:nth-child(3) { animation-delay: 0.16s; }
    [data-scroll-reveal].is-visible .bento-grid__tile:nth-child(4) { animation-delay: 0.22s; }
}

/* ---------- story-timeline (Solutions listing) — slowest pace, most generous spacing ---------- */
.story-timeline { position: relative; margin-top: var(--space-10); max-width: 900px; margin-left: auto; margin-right: auto; }
.story-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--color-neutral-200); transform: translateX(-50%); display: none; }
@media (min-width: 900px) { .story-timeline::before { display: block; } }
.story-timeline__entry { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-12); }
.story-timeline__entry:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
    .story-timeline__entry { grid-template-columns: 1fr 80px 1fr; align-items: start; margin-bottom: var(--space-16); }
    .story-timeline__entry .story-timeline__content { grid-column: 1; grid-row: 1; text-align: right; }
    .story-timeline__entry .story-timeline__marker { grid-column: 2; grid-row: 1; justify-self: center; }
    .story-timeline__entry--reverse .story-timeline__content { grid-column: 3; text-align: left; }
}
.story-timeline__marker { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-white); border: 2px solid var(--color-secondary-600); color: var(--color-secondary-700); box-shadow: var(--shadow-sm); z-index: 1; flex-shrink: 0; }
.story-timeline__content { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-white); border: 1px solid var(--color-neutral-200); box-shadow: var(--shadow-sm); }
.story-timeline__challenge { color: var(--color-neutral-700); }
.story-timeline__solution { color: var(--color-neutral-900); margin-top: var(--space-2); }
/* Each .story-timeline__entry carries its own [data-scroll-reveal], so it
   reveals independently as it scrolls into view (already-existing global
   [data-scroll-reveal] fade+slide rule in animations.css — no override
   needed here, matching the "reuse existing keyframes" motion discipline). */

/* ---------- careers-echo — smaller, quieter echo of the hero illustration ---------- */
.careers-echo { display: flex; align-items: center; justify-content: center; opacity: 0.85; }
.careers-echo .illustration { max-width: 320px; }

/* ---------- glass-panel utility — formalizes the informal blur/translucency
   treatment already used by .hero__float-card, for floating accents ---------- */
.glass-panel {
    background: color-mix(in srgb, var(--color-white) 82%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--shadow-lg);
}

/* ---------- cs-card (Case Studies listing) — every case study gets the
   same premium treatment: dashboard preview, industry badge, headline
   metric, title, summary, CTA. Uniform weight across the whole roster. ---------- */
.cs-card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-8); }
@media (min-width: 900px) { .cs-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cs-card { display: flex; flex-direction: column; border-radius: var(--radius-xl); background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); text-decoration: none !important; }
.cs-card[hidden] { display: none; }
.cs-empty { margin-top: var(--space-8); text-align: center; color: var(--color-neutral-500); }

.cs-card__visual { position: relative; padding: var(--space-8) var(--space-8) var(--space-6); }
.cs-card__visual .ui-mock { max-width: 100%; }
.cs-card__stat { position: absolute; bottom: 4px; right: var(--space-6); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); text-align: center; }
.cs-card__stat strong { display: block; font-family: var(--font-heading); font-size: var(--text-h4); color: var(--color-primary-600); }
.cs-card__stat span { font-size: var(--text-caption); color: var(--color-neutral-700); }

.cs-card__content { padding: 0 var(--space-8) var(--space-8); }
.cs-card__content .badge { margin-bottom: var(--space-3); }
.cs-card__headline { font-size: var(--text-h4); margin: 0 0 var(--space-2); color: var(--color-neutral-900); }
.cs-card__summary { color: var(--color-neutral-700); margin-bottom: var(--space-5); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .cs-card { transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
    .cs-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
}

/* ---------- mosaic-showcase (Industries listing) — irregular masonry, no rotation ---------- */
.mosaic-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--space-5); }
@media (min-width: 640px) { .mosaic-showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mosaic-showcase__tile { display: flex; flex-direction: column; border-radius: var(--radius-xl); background: var(--color-white); border: 1px solid var(--color-neutral-200); padding: var(--space-5); text-decoration: none !important; box-shadow: var(--shadow-sm); }
.mosaic-showcase__tile--large { grid-column: span 2; grid-row: span 2; box-shadow: var(--shadow-lg); }
.mosaic-showcase__tile--medium { grid-column: span 2; box-shadow: var(--shadow-md); }
.mosaic-showcase__tile--small { grid-column: span 1; }
.mosaic-showcase__mockup { flex: 1; display: flex; align-items: center; margin-bottom: var(--space-4); }
.mosaic-showcase__mockup .ui-mock { max-width: 100%; width: 100%; }
.mosaic-showcase__name { display: block; font-weight: var(--weight-semibold); color: var(--color-neutral-900); font-size: var(--text-body-md); }
.mosaic-showcase__tagline { display: block; font-size: var(--text-caption); color: var(--color-neutral-500); margin-top: 2px; }

@media (hover: hover) {
    .mosaic-showcase__tile { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
    .mosaic-showcase__tile:hover { transform: translateY(-4px); }
    .mosaic-showcase__tile--large:hover, .mosaic-showcase__tile--medium:hover { box-shadow: var(--shadow-lg); }
    .mosaic-showcase__tile--small:hover { box-shadow: var(--shadow-md); }
}

@media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal].is-visible .mosaic-showcase__tile { animation: ui-mock-row-in 0.5s var(--ease-out) backwards; }
    [data-scroll-reveal].is-visible .mosaic-showcase__tile:nth-child(1) { animation-delay: 0.04s; }
    [data-scroll-reveal].is-visible .mosaic-showcase__tile:nth-child(2) { animation-delay: 0.09s; }
    [data-scroll-reveal].is-visible .mosaic-showcase__tile:nth-child(3) { animation-delay: 0.14s; }
    [data-scroll-reveal].is-visible .mosaic-showcase__tile:nth-child(4) { animation-delay: 0.19s; }
    [data-scroll-reveal].is-visible .mosaic-showcase__tile:nth-child(5) { animation-delay: 0.24s; }
    [data-scroll-reveal].is-visible .mosaic-showcase__tile:nth-child(6) { animation-delay: 0.29s; }
}
/* Each .story-timeline__entry carries its own [data-scroll-reveal], so it
   reveals independently as it scrolls into view (already-existing global
   [data-scroll-reveal] fade+slide rule in animations.css — no override
   needed here, matching the "reuse existing keyframes" motion discipline). */