/* Page hero, banners, and shared interior-page components.
 *
 * Split into dedicated files:
 *   page-careers.css    Careers, Life at Vimta, Open Positions
 *   page-investors.css  Investor documents + hub
 *   page-blog.css       Blog, search, pagination
 *   page-sector.css     Sector sidebar, subnav, hub
 */

/* Page hero and interior page layout (group_page_hero) */

@layer components {

  .page-hero {
    position: relative;
  }

  .page-hero__bg {
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    opacity: 0.15;
  }

  .page-hero .container {
    position: relative;
    z-index: 1;
  }


  /* ════════════════════════════════════════════════════════════════════
     PAGE BANNER — shorter interior hero for archive / single templates
     ════════════════════════════════════════════════════════════════════ */

  .page-banner {
    position: relative;
    min-block-size: clamp(10rem, 22vh, 16rem);
    display: flex;
    align-items: flex-end;
    padding-block: var(--space-2xl) var(--space-xl);
    padding-inline: var(--gutter);
    background-color: var(--primary-dark);
    background-image: linear-gradient(
      155deg,
      var(--primary-ultra-dark)  0%,
      var(--primary-dark)       50%,
      var(--primary)            100%
    );
  }

  .page-banner__bg {
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    /* Stronger photo overlay so it blends with gradient */
    opacity: 0.22;
    mix-blend-mode: luminosity;
  }

  .page-banner .container {
    position: relative;
    z-index: 1;
    inline-size: 100%;
  }

  .page-banner__title {
    font-size: clamp(1.75rem, 3.5vw, var(--heading-l));
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-on-dark);
    margin: 0;
  }

  /* Meta pills (client / industry on case-study banners) */
  .page-banner__meta {
    display: flex;
    gap: var(--space-s);
    flex-wrap: wrap;
    margin-block-start: var(--space-s);
  }

  .page-banner__meta-item {
    font-size: var(--text-xs);
    color: var(--text-on-dark-muted);
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--overlay-strong);
    border-radius: var(--radius-s);
    letter-spacing: 0.02rem;
  }


  /* ════════════════════════════════════════════════════════════════════
     CONTACT PAGE
     ════════════════════════════════════════════════════════════════════ */

  /* Quick contact bar */
  .contact-quickbar {
    padding-block: var(--space-m);
    padding-inline: var(--gutter);
    border-block-end: 1px solid var(--border-secondary);
  }

  .contact-quickbar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l);
    align-items: center;
  }

  .contact-quickbar__item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    color: var(--text-accent);
    font-weight: var(--weight-semibold);
    font-size: var(--text-m);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .contact-quickbar__item:hover {
    color: var(--primary-dark);
  }

  .contact-quickbar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    background: var(--primary-ultra-light);
    color: var(--icon-color);
    flex-shrink: 0;
  }

  /* Intro */
  .contact-intro {
    max-inline-size: 72ch;
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    font-size: var(--text-l);
    margin: 0;
  }

  /* Office cards */
  .contact-office {
    padding: var(--space-l);
    background: var(--surface-raised, #fff);
    border-radius: var(--radius-l);
    border: 1px solid var(--border-muted);
    border-block-start: var(--card-accent-strip);
  }

  .contact-office--head {
    border-block-start-color: var(--secondary-dark);
  }

  .contact-office__city {
    font-size: var(--heading-xs);
    font-weight: var(--weight-bold);
    color: var(--text-accent);
    margin: 0 0 var(--space-s);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  .contact-office__address {
    font-style: normal;
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    font-size: var(--text-s);
    margin: 0 0 var(--space-s);
  }

  .contact-office__detail {
    font-size: var(--text-s);
    margin: var(--space-2xs) 0 0;
  }

  .contact-office__detail a {
    color: var(--text-link);
    text-decoration: none;
  }

  .contact-office__detail a:hover {
    text-decoration: underline;
  }

  /* Map */
  .contact-map {
    border-radius: var(--radius-l);
    overflow: hidden;
    border: 1px solid var(--border-muted);
  }

  .contact-map__embed iframe,
  .contact-map__embed > * {
    display: block;
    inline-size: 100%;
    block-size: clamp(20rem, 50vh, 36rem);
  }


  /* ════════════════════════════════════════════════════════════════════
     BREADCRUMB — base + dark-banner context overrides
     ════════════════════════════════════════════════════════════════════ */

  .breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-s);
  }

  .breadcrumb__item {
    display: flex;
    align-items: center;
  }

  /* Slash separator */
  .breadcrumb__item + .breadcrumb__item::before {
    content: '/';
    padding-inline: var(--space-2xs);
    color: var(--text-muted);
    aria-hidden: true;
  }

  .breadcrumb__link {
    color: var(--text-link);
    text-decoration: none;
  }

  .breadcrumb__link:hover {
    text-decoration: underline;
    color: var(--text-link-hover);
  }

  .breadcrumb__current {
    color: var(--text-muted);
  }

  /* Inside .page-banner (dark primary background) — invert to white */
  .page-banner .breadcrumb__item + .breadcrumb__item::before {
    color: var(--text-on-dark-subtle);
  }

  .page-banner .breadcrumb__link {
    color: var(--text-on-dark-muted);
  }

  .page-banner .breadcrumb__link:hover {
    color: var(--text-on-dark);
  }

  .page-banner .breadcrumb__current {
    color: var(--text-on-dark-subtle);
  }


  /* ════════════════════════════════════════════════════════════════════
     RESOURCE ARCHIVE — styled list rows
     ════════════════════════════════════════════════════════════════════ */

  .resource-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: var(--space-s) var(--space-l);
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--border-subtle);
  }

  .resource-item:first-child {
    border-block-start: 1px solid var(--border-subtle);
  }

  .resource-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-block-end: var(--space-2xs);
  }

  .resource-item__type {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-accent);
    background-color: color-mix(in oklch, var(--text-accent) 10%, transparent);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-s);
  }

  .resource-item__date {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .resource-item__title {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
  }

  .resource-item__title a {
    color: var(--text-main);
    text-decoration: none;
  }

  .resource-item__title a:hover {
    color: var(--text-link);
  }

  .resource-item__excerpt {
    margin: 0;
    font-size: var(--text-m);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
  }

  .resource-item__action {
    flex-shrink: 0;
    align-self: center;
  }

  @media (max-width: 40em) {
    .resource-item {
      grid-template-columns: 1fr;
    }

    .resource-item__action {
      justify-self: start;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     RESOURCE SINGLE — eyebrow label for resource type
     ════════════════════════════════════════════════════════════════════ */

  .page-banner__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-on-dark-muted);
    margin-block-end: var(--space-2xs);
  }


  /* ════════════════════════════════════════════════════════════════════
     ENTRY CONTENT — WordPress prose output (the_content)
     Scoped to .entry-content so it only targets editor output,
     not theme UI elements.
     ════════════════════════════════════════════════════════════════════ */

  .entry-content {
    max-inline-size: 72ch;
  }

  .entry-content > * + * {
    margin-block-start: var(--space-m);
  }

  /* Headings inside editor content */
  .entry-content h2,
  .entry-content h3,
  .entry-content h4,
  .entry-content h5,
  .entry-content h6 {
    margin-block-start: var(--space-xl);
    margin-block-end: var(--space-xs);
    color: var(--text-main);
  }

  .entry-content h2 { font-size: var(--heading-m); }
  .entry-content h3 { font-size: var(--heading-s); }
  .entry-content h4 { font-size: var(--heading-xs); }

  /* Lists inside editor content */
  .entry-content ul,
  .entry-content ol {
    padding-inline-start: var(--space-l);
  }

  .entry-content ul { list-style: disc; }
  .entry-content ol { list-style: decimal; }

  .entry-content li + li {
    margin-block-start: var(--space-2xs);
  }

  /* Blockquote */
  .entry-content blockquote {
    padding-inline-start: var(--space-m);
    border-inline-start: var(--card-accent-strip);
    color: var(--text-body);
    font-size: var(--text-l);
    line-height: var(--leading-relaxed);
  }

  /* Images */
  .entry-content img {
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-s);
  }

  /* Tables — scrollable on narrow viewports */
  .entry-content table {
    display: block;          /* block outer display enables overflow-x */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: var(--text-s);
    border: var(--card-border);
    border-radius: var(--radius-m);
    max-inline-size: 100%;
  }

  /* Entry thumbnail (featured image above content) */
  .entry-thumbnail {
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--shadow-m);
    margin-block-end: var(--space-xl);
  }

  .entry-thumbnail img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
  }


  /* ════════════════════════════════════════════════════════════════════
     404 PAGE
     ════════════════════════════════════════════════════════════════════ */

  .not-found {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
    padding-block: var(--space-2xl);
  }

  .not-found__code {
    font-family: var(--font-heading);
    font-size: clamp(6rem, 20vw, 14rem);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--primary-ultra-light);
    margin: 0;
    user-select: none;
  }

  .not-found__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    max-inline-size: 48rem;
  }

  .not-found__title {
    font-size: var(--heading-l);
    color: var(--text-accent);
    margin: 0;
  }

  .not-found__message {
    font-size: var(--text-l);
    color: var(--text-body);
    max-inline-size: 52ch;
    margin: 0;
  }

  .not-found__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }

  .not-found__links {
    padding-block-start: var(--space-l);
    border-block-start: 1px solid var(--border-muted);
  }

  .not-found__links-label {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-block-end: var(--space-xs);
  }

  .not-found__links-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-l);
    list-style: none;
    padding: 0;
  }

  .not-found__links-list a {
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--text-link);
    text-decoration: none;
  }

  .not-found__links-list a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
  }

  @media (min-width: 48em) {
    .not-found {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--space-3xl);
    }

    .not-found__code {
      flex-shrink: 0;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     PAGE IMAGE BANNER — short photo strip for interior pages
     (about, investors, careers, contact).
     No text overlay — purely decorative image.
     ════════════════════════════════════════════════════════════════════ */

  .page-img-banner {
    position: relative;
    overflow: hidden;
    max-block-size: clamp(10rem, 22vw, 18rem);
    line-height: 0; /* collapse inline gap */
  }

  /* Bottom fade into the blush title strip */
  .page-img-banner::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 45%;
    background: linear-gradient(to bottom, transparent, var(--surface-secondary));
    pointer-events: none;
  }

  .page-img-banner img {
    display: block;
    inline-size: 100%;
    block-size: clamp(10rem, 22vw, 18rem);
    object-fit: cover;
    object-position: center 40%;
  }


  /* ════════════════════════════════════════════════════════════════════
     PAGE TITLE STRIP — blush heading bar beneath the image banner
     ════════════════════════════════════════════════════════════════════ */

  .page-title-strip {
    background-color: var(--surface-secondary);
    border-block-end: 1px solid var(--border-secondary);
    padding-block: var(--space-m) var(--space-l);
    padding-inline: var(--gutter);
  }

  .page-title-strip__heading {
    font-size: clamp(1.5rem, 3.5vw, var(--heading-l));
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-main);
    margin: 0;
  }

  .page-title-strip__sub {
    font-size: var(--text-m);
    color: var(--text-muted);
    margin: var(--space-2xs) 0 0;
    line-height: var(--leading-relaxed);
  }


  /* ════════════════════════════════════════════════════════════════════
     ENTRY HEADER + TITLE — page/single.php generic page template
     ════════════════════════════════════════════════════════════════════ */

  .entry-header {
    margin-block-end: var(--space-m);
  }

  .entry-title {
    font-size: clamp(1.5rem, 3.5vw, var(--heading-l));
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-main);
    margin: 0;
  }


  /* ════════════════════════════════════════════════════════════════════
     CASE STUDY SINGLE — content wrapper
     ════════════════════════════════════════════════════════════════════ */

  .case-study-single {
    max-inline-size: 72ch;
  }


  /* ════════════════════════════════════════════════════════════════════
     SERVICE-TYPE INTRO — tinted section on service-type archive
     ════════════════════════════════════════════════════════════════════ */

  .service-type-intro__heading {
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-main);
    margin: 0;
  }

  .service-type-intro__text {
    font-size: var(--text-m);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
  }

  .service-type-intro__text > * + * {
    margin-block-start: var(--space-s);
  }


  /* ════════════════════════════════════════════════════════════════════
     RESOURCE ITEM CONTENT — grid child, prevent overflow
     ════════════════════════════════════════════════════════════════════ */

  .resource-item__content {
    min-inline-size: 0;
  }


  /* ════════════════════════════════════════════════════════════════════
     GRIEVANCE CELL — officer, registrar, forms
     ════════════════════════════════════════════════════════════════════ */

  .grievance-officer__heading,
  .grievance-registrar__heading,
  .grievance-forms__heading {
    font-size: var(--heading-xs);
    font-weight: var(--weight-bold);
    color: var(--text-accent);
    margin: 0;
  }

  .grievance-officer__name,
  .grievance-registrar__company {
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    margin: 0;
  }

  .grievance-officer__designation {
    font-size: var(--text-s);
    color: var(--text-muted);
    margin: 0;
  }

  .grievance-forms__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .grievance-form__link {
    font-weight: var(--weight-semibold);
    color: var(--text-link);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .grievance-form__link::after {
    content: '↓';
    font-size: var(--text-s);
    opacity: 0.7;
  }

  .grievance-form__link:hover {
    text-decoration: underline;
    color: var(--primary-dark);
  }

  .grievance-form__name {
    font-weight: var(--weight-medium);
    color: var(--text-main);
  }

  .grievance-form__desc {
    font-size: var(--text-s);
    color: var(--text-muted);
    margin: 0;
    line-height: var(--leading-relaxed);
  }


  /* ════════════════════════════════════════════════════════════════════
     MEET OUR LEADERS — grouped team grid
     ════════════════════════════════════════════════════════════════════ */

  .meet-leaders__intro {
    max-inline-size: 72ch;
  }

  .meet-leaders__group-heading {
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    color: var(--text-accent);
    text-align: center;
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-l);
  }

  .meet-leaders__grid {
    container-type: inline-size;
    container-name: meet-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--grid-gap);
  }

  @container meet-grid (width < 28rem) {
    .meet-leaders__grid {
      grid-template-columns: 1fr;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     JOB SINGLE — single job-opening template
     ════════════════════════════════════════════════════════════════════ */

  .job-single-header {
    background-color: var(--surface-tinted);
    padding-block: var(--space-l) var(--space-xl);
    border-block-end: 1px solid var(--border-default);
  }

  .job-single-header__title {
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    font-weight: var(--weight-bold);
    color: var(--text-main);
    margin-block-start: var(--space-s);
    line-height: var(--leading-tight);
  }

  .job-single-header__dept {
    margin-block-start: var(--space-2xs);
    font-size: var(--text-m);
    color: var(--brand-primary);
    font-weight: var(--weight-semibold);
  }

  /* Two-column layout: sidebar | body */
  .job-single__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    align-items: start;
  }

  @media (width >= 50em) {
    .job-single__layout {
      grid-template-columns: 18rem 1fr;
    }
  }

  /* Meta sidebar */
  .job-single__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    position: sticky;
    top: calc(var(--header-height, 5rem) + var(--space-m));
  }

  .job-meta-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--card-radius);
    overflow: hidden;
  }

  .job-meta-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-s) var(--space-m);
    border-block-end: 1px solid var(--border-default);
  }

  .job-meta-list__item:last-child {
    border-block-end: none;
  }

  .job-meta-list__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
  }

  .job-meta-list__value {
    font-size: var(--text-m);
    color: var(--text-body);
    font-weight: var(--weight-medium);
  }

  .job-single__apply-btn {
    width: 100%;
    justify-content: center;
  }

  /* Body / description column */
  .job-single__description {
    /* inherits entry-content prose styles */
  }

  /* Apply CTA at bottom — visible on mobile, hidden on desktop (sidebar takes over) */
  .job-single__apply-cta {
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-l);
    border-block-start: 1px solid var(--border-default);
  }

  @media (width >= 50em) {
    .job-single__apply-cta {
      display: none;
    }

    .job-single__meta .job-single__apply-btn {
      display: inline-flex;
    }
  }

  @media (width < 50em) {
    .job-single__meta .job-single__apply-btn {
      display: none;
    }
  }


  /* ════════════════════════════════════════════════════════════════════
     Page banner — centered variant (dark full-bleed hero for interior pages)
     ════════════════════════════════════════════════════════════════════ */

  .page-banner--center .page-banner__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-m);
    max-inline-size: 48ch;
    margin-inline: auto;
  }

  .page-banner__subtitle {
    margin: 0;
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-on-dark-muted);
  }


  /* ════════════════════════════════════════════════════════════════════
     TESTIMONIALS PAGE
     ════════════════════════════════════════════════════════════════════ */

  /* ── Featured hero (horizontal split — avatar left, content right) ── */

  .testimonial-hero {
    container-type: inline-size;
    container-name: testimonial-hero;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3xl);
    align-items: center;
  }

  .testimonial-hero__avatar-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  img.testimonial-hero__avatar {
    display: block;
    inline-size: clamp(10rem, 18vw, 14rem);
    block-size: clamp(10rem, 18vw, 14rem);
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 4px solid var(--border-subtle);
    filter: grayscale(1);
  }

  /* SVG placeholder */
  .testimonial-hero__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: clamp(10rem, 18vw, 14rem);
    block-size: clamp(10rem, 18vw, 14rem);
    border-radius: var(--radius-full);
    background-color: var(--avatar-bg);
    color: var(--avatar-text);
    border: 4px solid var(--border-subtle);
  }

  .testimonial-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
  }

  .testimonial-hero__stars {
    display: flex;
    gap: var(--space-3xs);
    color: var(--icon-color);
  }

  .testimonial-hero__quote {
    margin: 0;
  }

  .testimonial-hero__quote p {
    margin: 0;
    font-size: clamp(var(--text-xl), 2.5vw, var(--heading-xs));
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
  }

  .testimonial-hero__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .testimonial-hero__author {
    margin: 0;
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  .testimonial-hero__role {
    margin: 0;
    font-size: var(--text-s);
    color: var(--text-muted);
  }

  @container testimonial-hero (width < 40rem) {
    .testimonial-hero {
      grid-template-columns: 1fr;
      gap: var(--space-xl);
      text-align: center;
      justify-items: center;
    }

    img.testimonial-hero__avatar,
    .testimonial-hero__avatar--placeholder {
      inline-size: 8rem;
      block-size: 8rem;
    }

    .testimonial-hero__meta {
      align-items: center;
    }

    .testimonial-hero__stars {
      justify-content: center;
    }
  }


  /* ── Testimonials grid (Chakra UI Pro card pattern) ── */

  .testimonials-grid {
    container-type: inline-size;
    container-name: testimonials-grid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: var(--grid-gap);
  }

  .testimonials-grid__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    background-color: var(--surface-sunken);
    border-radius: var(--card-radius);
    padding: var(--card-padding-spacious);
    transition:
      box-shadow var(--card-transition),
      transform  var(--card-transition);
  }

  .testimonials-grid__item:hover {
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
  }

  /* Company name at top of card */
  .testimonials-grid__company {
    margin: 0;
    font-size: var(--text-m);
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  .testimonials-grid__quote {
    margin: 0;
    flex: 1;
  }

  /* Decorative open-quote before text */
  .testimonials-grid__quote::before {
    content: '\201C\201C';
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--icon-color);
    margin-block-end: var(--space-xs);
  }

  .testimonials-grid__quote p {
    margin: 0;
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
  }

  .testimonials-grid__meta {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin-block-start: auto;
    padding-block-start: var(--space-m);
  }

  img.testimonials-grid__avatar {
    inline-size: var(--avatar-m);
    block-size: var(--avatar-m);
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
  }

  /* SVG placeholder */
  .testimonials-grid__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--avatar-m);
    block-size: var(--avatar-m);
    border-radius: var(--radius-full);
    background-color: var(--avatar-bg);
    color: var(--avatar-text);
    flex-shrink: 0;
  }

  .testimonials-grid__author-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .testimonials-grid__author {
    margin: 0;
    font-size: var(--text-s);
    font-weight: var(--weight-bold);
    color: var(--text-main);
  }

  .testimonials-grid__role {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  @container testimonials-grid (width < 24rem) {
    .testimonials-grid__meta {
      flex-direction: column;
      align-items: flex-start;
    }
  }


  /* ── Testimonials CTA strip ── */

  .testimonials-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-m);
    max-inline-size: 48ch;
    margin-inline: auto;
  }

  .testimonials-cta__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--heading-s);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-on-dark);
  }

  .testimonials-cta__text {
    margin: 0;
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-on-dark-muted);
  }

}