/* ============================================================
       Direction C — "Portfolio-First" specific overrides
       Visual-led, image-heavy, work speaks for itself.
       Inspired by IJS/Chameleon. "Look at what we've done."
       ============================================================ */

    /* --- Hero: compact, centred, gets out of the way fast --- */
    .hero--direction-c {
      min-height: 65vh;
      justify-content: center;
      align-items: center;
    }

    .hero--direction-c .hero__overlay {
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.25) 45%,
        rgba(0, 0, 0, 0.6) 100%
      );
    }

    .hero--direction-c .hero__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 100%;
    }

    .hero--direction-c h1 {
      font-size: 32px;
      letter-spacing: -0.3px;
      margin-bottom: 8px;
    }

    /* Hero wordmark replaced by the stacked EI logo (Neale, 2026). The
       <h1> stays for the document outline; zero out its text metrics and
       let the image carry the size. */
    .hero--direction-c .hero__logo {
      margin: 0 0 14px;
      line-height: 0;
    }

    .hero--direction-c .hero__logo img {
      width: clamp(150px, 20vw, 220px);
      height: auto;
      /* Lift the logo off the hero photo so the purple "PRODUCTIONS"
         wordmark stays legible whatever image sits behind it. */
      filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.45));
    }

    .hero--direction-c .hero__subtitle {
      font-size: 15px;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: 0.5px;
      margin-bottom: 28px;
      font-family: var(--font-body);
      font-weight: 400;
    }

    /* --- Portfolio masonry grid — the page centrepiece --- */
    .portfolio-masonry {
      padding: 20px 0 80px;
      background: var(--bg-primary);
    }

    .portfolio-masonry__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-flow: dense;
      gap: 12px;
    }

    .portfolio-masonry__grid .portfolio-card--span2 {
      grid-column: span 2;
    }

    .portfolio-masonry__cta {
      text-align: center;
      margin-top: 28px;
    }

    /* --- Stats: larger numbers than A or B --- */
    .stats-section--c {
      padding: 80px 0;
      background: var(--bg-secondary);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .stats-section--c .stats {
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
    }

    .stats-section--c .stats__item {
      padding: 24px 20px;
      text-align: center;
    }

    .stats-section--c .stats__item:not(:last-child) {
      border-right: 1px solid rgba(255, 255, 255, 0.08);
    }

    .stats-section--c .stats__number {
      font-size: 56px;
    }

    .stats-section--c .stats__label {
      font-size: 14px;
      color: var(--text-secondary);
      margin-top: 6px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    /* --- Services: compact pills, subordinate to portfolio --- */
    .services-compact {
      padding: var(--section-gap) 0;
      background: var(--bg-primary);
    }

    .services-compact__row {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .service-pill {
      background: var(--bg-secondary);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      padding: 28px 32px;
      text-align: center;
      flex: 1;
      max-width: 280px;
      transition: border-color 0.25s, background 0.25s;
    }

    .service-pill:hover {
      border-color: rgba(124, 58, 237, 0.3);
      background: var(--bg-surface);
    }

    .service-pill__num {
      font-family: var(--font-heading);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      color: var(--accent);
      display: block;
      margin-bottom: 10px;
    }

    .service-pill__icon {
      font-size: 28px;
      margin-bottom: 8px;
      display: block;
      line-height: 1;
    }

    .service-pill__title {
      font-family: var(--font-heading);
      font-size: 17px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .service-pill__desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    /* --- About: brief, centred, two sentences --- */
    .about-brief {
      padding: var(--section-gap) 0;
      background: var(--bg-secondary);
    }

    .about-brief .container--narrow {
      text-align: center;
    }

    .about-brief h2 {
      margin-bottom: 20px;
    }

    .about-brief p {
      font-size: 17px;
      color: var(--text-body);
      line-height: 1.7;
      max-width: 560px;
      margin: 0 auto;
    }

    /* --- Partners: compact strip with smaller logos --- */
    .partners--direction-c {
      padding: 56px 0;
      /* Slightly raised dark panel so the partners strip reads as
         its own band but stays in the dark-mode palette. The previous
         light-grey background was paired with mix-blend-mode:multiply
         to darken brand-coloured logos — that no longer works now
         that the brand-supplied logos are white-on-transparent
         (sourced for dark-mode placement). */
      background: var(--bg-secondary);
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .partners--direction-c .partners__label {
      text-align: center;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text-tertiary);
      margin-bottom: 32px;
    }

    .partners--direction-c .partners__grid {
      gap: 32px 48px;
      align-items: center;
    }

    .partners--direction-c .partners__grid img {
      height: 32px;
      max-width: 160px;
      object-fit: contain;
      /* Desaturate everything to a uniform off-white at rest so the
         strip reads as a calm set, not a row of competing brand
         colours. Brand colour returns on hover — signals the logos
         are interactive (each links to the partner's site) and
         rewards the eye after the visitor has parsed the whole row.
         brightness(1.1) lifts the result back above the dark panel
         since grayscale alone would render some logos quite dim. */
      filter: grayscale(1) brightness(1.1);
      opacity: 0.75;
      transition: filter 0.25s ease, opacity 0.25s ease;
    }

    .partners--direction-c .partners__grid img:hover {
      filter: none;
      opacity: 1;
    }

    /* --- Footer columns (same as Direction A) --- */
    .footer__col {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .footer__nav-heading {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--text-tertiary);
      margin-bottom: 12px;
    }

    .footer__nav-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .footer__nav-links a {
      font-size: 14px;
      color: var(--text-secondary);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer__nav-links a:hover {
      color: var(--text-primary);
    }

    /* --- Responsive --- */
    @media (max-width: 900px) {
      .portfolio-masonry__grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .portfolio-masonry__grid .portfolio-card--span2 {
        grid-column: span 1;
      }

      .stats-section--c .stats {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 768px) {
      .hero--direction-c {
        min-height: 55vh;
      }

      .portfolio-masonry__grid {
        grid-template-columns: 1fr;
      }

      .services-compact__row {
        flex-direction: column;
        align-items: center;
      }

      .service-pill {
        max-width: 100%;
        width: 100%;
      }

      .stats-section--c .stats {
        grid-template-columns: 1fr;
      }

      .stats-section--c .stats__item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
    }