/* ══════════════════════════════════════════════
       SECTION 1, HERO  (identical pattern to about/careers)
    ══════════════════════════════════════════════ */
    .cr-hero {
      position: relative;
      min-height: 440px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .cr-hero__image {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .cr-hero__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .cr-hero__image::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to right,
        rgba(15,26,46,0.72) 0%,
        rgba(15,26,46,0.42) 50%,
        rgba(15,26,46,0.08) 100%);
      pointer-events: none;
    }
    .cr-hero__text {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 var(--gutter);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .cr-hero__text-inner {
      max-width: 640px;
      padding-top: 40px;
    }
    .cr-hero__heading {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      font-size: clamp(30px, 3.8vw, 52px);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: #ffffff;
      margin: 0 0 12px;
    }
    .cr-accent {
      position: relative;
      display: inline-block;
    }
    .cr-accent::after {
      content: '';
      position: absolute;
      left: -2px;
      right: -2px;
      bottom: 0.06em;
      height: 0.27em;
      background: var(--e-global-color-accent);
      opacity: 0.85;
      z-index: -1;
      transform: skew(-6deg);
      border-radius: 4px;
    }
    .cr-hero__sub {
      font-family: 'Inter', sans-serif;
      font-size: clamp(15px, 1.1vw, 17px);
      line-height: 1.65;
      color: rgba(255,255,255,0.78);
      margin: 0 0 20px;
    }
    .cr-hero__stats {
      display: flex;
      gap: 36px;
      margin-top: 32px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.22);
    }
    .cr-hero__stat strong {
      display: block;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      font-size: 28px;
      color: #ffffff;
      line-height: 1;
      margin-bottom: 6px;
    }
    .cr-hero__stat span {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: rgba(255,255,255,0.62);
    }

    /* ══════════════════════════════════════════════
       SECTION 2, INTRO  "Our Clients & Projects"
    ══════════════════════════════════════════════ */
    .pj-intro { padding: var(--section-pad-y) 0; background: var(--e-global-color-bg); }
    .pj-intro__wrap {
      max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
      display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start;
    }
    .pj-intro__label {
      font-family: 'JetBrains Mono', monospace; font-weight: 500;
      font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--e-global-color-primary); margin: 0 0 18px;
    }
    .pj-intro__heading {
      font-family: 'JetBrains Mono', monospace; font-weight: 700;
      font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12;
      letter-spacing: -0.02em; color: var(--e-global-color-text); margin: 0;
    }
    .pj-intro__body {
      font-family: 'Inter', sans-serif; font-size: 16px;
      line-height: 1.75; color: var(--e-global-color-text-dim);
      margin: 0; padding-top: 6px;
    }

    /* ══════════════════════════════════════════════
       SECTION 3, CURRENT PROJECTS  (carousel)
    ══════════════════════════════════════════════ */
    .pj-current {
      padding: var(--section-pad-y) 0; background: var(--e-global-color-bg-soft);
      position: relative; overflow: hidden;
    }
    .pj-current__deco {
      position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
      font-family: 'JetBrains Mono', monospace; font-weight: 700;
      font-size: clamp(80px, 12vw, 200px); line-height: 0.85; letter-spacing: -0.05em;
      color: var(--e-global-color-text); opacity: 0.035;
      user-select: none; pointer-events: none; white-space: nowrap;
    }
    .pj-current__head {
      position: relative; z-index: 1;
      max-width: var(--content-max); margin: 0 auto 56px; padding: 0 var(--gutter);
      display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px clamp(28px, 4vw, 48px); align-items: end;
    }
    .pj-current__intro {
      font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.7;
      color: var(--e-global-color-text-dim); margin: 0;
    }
    .pj-current__label {
      font-family: 'JetBrains Mono', monospace; font-weight: 500;
      font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--e-global-color-primary); margin: 0;
    }
    .pj-current__heading {
      font-family: 'JetBrains Mono', monospace; font-weight: 700;
      font-size: clamp(26px, 3vw, 38px); line-height: 1.15;
      letter-spacing: -0.02em; color: var(--e-global-color-text); margin: 0;
    }

    /* Track */
    .pj-current__viewport {
      position: relative; z-index: 1;
      width: 100%; margin: 0; padding: 0 0 32px;
    }
    .pj-track {
      position: relative;
      display: flex; gap: 24px;
      overflow-x: auto; scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none; -ms-overflow-style: none;
      padding: 24px 0 40px;
    }
    .pj-track::-webkit-scrollbar { display: none; }

    /* Banner, one focused rectangle, neighbours peek (offset + dimmed) */
    .pj-banner {
      position: relative; flex: 0 0 53%;
      scroll-snap-align: center;
      aspect-ratio: 16 / 7.5;
      border-radius: 20px; overflow: hidden;
      box-shadow: 0 24px 60px -28px rgba(15,26,46,0.30);
      opacity: 0.62; transform: scale(0.95);
      transition: opacity .45s ease, transform .45s ease;
    }
    .pj-banner.is-active { opacity: 1; transform: scale(1); }
    .pj-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    .pj-banner__overlay {
      position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(15,26,46,0.92) 0%, rgba(15,26,46,0.78) 32%, rgba(15,26,46,0.40) 62%, rgba(15,26,46,0.08) 100%);
    }
    .pj-banner__content {
      position: relative; z-index: 2; height: 100%;
      display: flex; flex-direction: column; justify-content: center;
      gap: 16px; padding: 44px 52px; max-width: 600px;
    }
    .pj-banner__tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .pj-banner__content .pj-tag { background: rgba(255,255,255,0.94); color: var(--e-global-color-text); }
    .pj-banner__title {
      font-family: 'JetBrains Mono', monospace; font-weight: 700;
      font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.02em;
      color: #ffffff; margin: 0;
    }
    .pj-card__tags {
      position: absolute; top: 14px; left: 14px;
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .pj-tag {
      font-family: 'JetBrains Mono', monospace; font-weight: 600;
      font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 999px;
      background: rgba(255,255,255,0.96); backdrop-filter: blur(6px);
      color: var(--e-global-color-text);
    }
    .pj-tag--cyan   { background: rgba(56,196,234,0.16); color: #0e6c84; }
    .pj-tag--peach  { background: rgba(255,177,138,0.22); color: #8a4a1f; }
    .pj-tag--mint   { background: rgba(110,213,170,0.22); color: #1f6b4d; }
    .pj-tag--violet { background: rgba(168,134,234,0.22); color: #5a3a99; }

    .pj-banner__meta { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 0; }
    .pj-banner__meta div { display: flex; flex-direction: column; gap: 2px; }
    .pj-banner__meta dt {
      font-family: 'JetBrains Mono', monospace; font-size: 10px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }
    .pj-banner__meta dd {
      font-family: 'Inter', sans-serif; font-size: 13.5px;
      color: #ffffff; margin: 0;
    }
    /* Industrie-meta in de case-kaartjes: alleen zichtbaar op telefoon (≤640px) */
    .pj-banner__intro {
      font-family: 'Inter', sans-serif; font-size: 14.5px; line-height: 1.65;
      color: rgba(255,255,255,0.82); margin: 0; max-width: 480px;
    }
    /* same expandable pill as the careers 6-step card CTA (.pf__card-cta) */
    .pj-banner__btn {
      align-self: flex-start;
      display: inline-flex; align-items: center; gap: 0;
      height: 44px; padding: 0 11px; margin-top: 4px;
      background: var(--e-global-color-primary);
      color: #fff; border: 0; border-radius: 12px;
      cursor: pointer; text-decoration: none; overflow: hidden;
      box-shadow: 0 6px 14px -6px rgba(56,196,234,0.55);
      transition: gap .25s ease, padding .25s ease, background .2s ease,
                  transform .2s ease, box-shadow .2s ease;
    }
    .pj-banner__btn-label {
      font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
      color: #fff; white-space: nowrap;
      max-width: 0; overflow: hidden;
      transition: max-width .45s steps(9, end);
    }
    .pj-banner__btn:hover {
      gap: 8px; padding-right: 16px;
      background: #28aed0;
      box-shadow: 0 10px 20px -8px rgba(56,196,234,0.65);
    }
    .pj-banner__btn:hover .pj-banner__btn-label {
      max-width: 120px; transition: max-width .5s steps(9, end) .1s;
    }
    .pj-banner__btn-arrow {
      width: 22px; height: 22px; color: #fff;
      display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .pj-banner__btn svg { width: 16px; height: 16px; }

    /* Nav arrows, flank the centred active banner (left/right) */
    .pj-nav {
      position: absolute;
      top: calc(50% - 16px); left: 50%;
      transform: translate(-50%, -50%);
      width: 58%; z-index: 4;
      display: flex; justify-content: space-between;
      margin: 0; padding: 0;
      pointer-events: none;
    }
    .pj-nav__btn { pointer-events: auto; }
    .pj-nav__btn {
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--e-global-color-bg); color: var(--e-global-color-text);
      border: 1.5px solid var(--e-global-color-border);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; padding: 0;
      transition: background .2s, color .2s, border-color .2s, transform .2s;
    }
    .pj-nav__btn:hover {
      background: var(--e-global-color-primary);
      color: #fff; border-color: var(--e-global-color-primary);
      transform: translateY(-2px);
    }
    .pj-nav__btn:disabled { opacity: 0.35; pointer-events: none; }
    .pj-nav__btn svg { width: 24px; height: 24px; }

    /* ══════════════════════════════════════════════
       SECTION 4, EXPECTATIONS  "What can you expect?"
    ══════════════════════════════════════════════ */
    .pj-expect { padding: var(--section-pad-y) 0 calc(var(--section-pad-y) + 160px); background: var(--e-global-color-bg); }
    .pj-expect__head {
      max-width: 720px; margin: 0 auto 60px; padding: 0 var(--gutter);
      display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
    }
    .pj-expect__label {
      font-family: 'JetBrains Mono', monospace; font-weight: 500;
      font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--e-global-color-primary); margin: 0;
    }
    .pj-expect__heading {
      font-family: 'JetBrains Mono', monospace; font-weight: 700;
      font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12;
      letter-spacing: -0.02em; color: var(--e-global-color-text); margin: 0;
    }
    /* horizontal expand-accordion: one card expanded, others collapsed.
       Hover expands a card and it STAYS until another card is hovered
       (same idea as the Jack/Jeroen cards on the about page). */
    .exp-acc {
      max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
      display: flex; gap: 16px; height: 300px;
    }
    .exp-card {
      position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
      border-radius: 16px;
      background: var(--e-global-color-bg);
      border: 1px solid var(--e-global-color-border);
      padding: 32px; cursor: pointer;
      display: flex; flex-direction: column; justify-content: flex-end;
      transition: flex-grow .55s cubic-bezier(.4, 0, .2, 1), box-shadow .4s ease, border-color .4s ease, background .45s ease;
    }
    .exp-card.is-active {
      flex-grow: 3.4;
      box-shadow: 0 24px 50px -28px rgba(15, 26, 46, 0.16);
    }
    /* expanded card: border + light background in its OWN accent colour */
    .exp-card--navy.is-active   { border-color: var(--e-global-color-secondary); background: rgba(13,89,209,0.015);  }
    .exp-card--yellow.is-active { border-color: var(--e-global-color-accent);    background: rgba(238,198,17,0.04); }
    .exp-card--red.is-active    { border-color: var(--e-global-color-alert);     background: rgba(254,91,91,0.018);  }
    .exp-card__icon {
      position: absolute; top: 32px; left: 32px;
      width: 48px; height: 48px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
    }
    .exp-card__icon svg { width: 22px; height: 22px; }
    .exp-card--navy   .exp-card__icon { background: rgba(13,89,209,0.12);  color: var(--e-global-color-secondary);  }
    .exp-card--yellow .exp-card__icon { background: rgba(238,198,17,0.22); color: var(--e-global-color-accent);     }
    .exp-card--red    .exp-card__icon { background: rgba(254,91,91,0.14);  color: var(--e-global-color-alert);      }
    .exp-card__title {
      font-family: 'JetBrains Mono', monospace; font-weight: 700;
      font-size: 22px; line-height: 1.25; letter-spacing: -0.01em;
      color: var(--e-global-color-text); margin: 0; white-space: normal;
      min-height: 2.5em; display: flex; align-items: flex-end;
    }
    .exp-card__reveal {
      display: grid; grid-template-rows: 0fr; overflow: hidden;
      transition: grid-template-rows .55s cubic-bezier(.4, 0, .2, 1);
    }
    .exp-card.is-active .exp-card__reveal { grid-template-rows: 1fr; }
    .exp-card__desc {
      font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.7;
      color: var(--e-global-color-text-dim); margin: 0; width: 460px; max-width: 100%;
      overflow: hidden; min-height: 0; padding-top: 16px;
      opacity: 0; transition: opacity .4s ease .1s;
    }
    .exp-card.is-active .exp-card__desc { opacity: 1; }
    @media (max-width: 1024px) {
      .exp-acc { flex-direction: column; height: auto; }
      .exp-card { flex: none; min-height: 200px; }
      .exp-card__desc { width: 100%; }
      .exp-card.is-active { flex-grow: 0; }
      .exp-card__title { white-space: normal; }
      .exp-card__desc { opacity: 1; max-height: none; margin-top: 14px; overflow: visible; }
    }

    /* ══════════════════════════════════════════════
       SECTION 5, INDUSTRIES  (tabs + bento grid)
    ══════════════════════════════════════════════ */
    .pj-industries {
      padding: var(--section-pad-y) 0; background: var(--e-global-color-bg-soft);
    }
    .pj-industries__intro {
      max-width: 880px; margin: 0 auto 40px; padding: 0 var(--gutter);
      text-align: center;
      font-family: 'Inter', sans-serif; font-size: 15.5px; line-height: 1.75;
      color: var(--e-global-color-text-dim);
    }
    /* underline tabs (bottom hairline + cyan indicator under the active tab) */
    .pj-tabs-wrap { max-width: var(--content-max); margin: 0 auto 40px; padding: 0 var(--gutter); }
    .pj-tabs::-webkit-scrollbar { display: none; }
    .pj-tabs {
      display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; gap: 0;
      width: 100%; min-width: 0;
    }
    .pj-tab {
      position: relative;
      font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px;
      color: var(--e-global-color-text-mute);
      background: none; border: none;
      padding: 14px 18px; cursor: pointer; line-height: 1;
      white-space: nowrap; flex-shrink: 0;
      transition: color .2s ease;
    }
    .pj-tab::before {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0;
      height: 1px; background: var(--e-global-color-border);
    }
    .pj-tab::after {
      content: ''; position: absolute; left: 12px; right: 12px; bottom: 0;
      height: 2px; border-radius: 2px; z-index: 1;
      background: var(--e-global-color-primary);
      transform: scaleX(0); transition: transform .25s ease;
    }
    .pj-tab:hover { color: var(--e-global-color-text); }
    .pj-tab.is-active { color: var(--e-global-color-text); }
    .pj-tab.is-active::after { transform: scaleX(1); }

    .pj-bento {
      max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: 180px;
      gap: 18px;
    }
    .pj-bento__item {
      position: relative;
      border-radius: 0; overflow: hidden;
      background: var(--e-global-color-bg);
      box-shadow: 0 8px 24px -10px rgba(15,26,46,0.12);
      transition: opacity .4s ease, transform .4s ease;
    }
    .pj-bento__item.is-hidden { display: none; }
    @keyframes pjEnter {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .pj-bento__item.is-entering { animation: pjEnter .55s cubic-bezier(0.22, 1, 0.36, 1) both; }
    @media (prefers-reduced-motion: reduce) { .pj-bento__item.is-entering { animation: none; } }
    .pj-bento__item img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform .55s cubic-bezier(0.4,0,0.2,1);
    }
    .pj-bento__item:hover img { transform: scale(1.05); }
    /* Casenaam altijd in beeld; meta/intro/knop schuiven smooth in bij hover.
       Gradient donkert mee via ::after (gradients zelf animeren niet). */
    .pj-bento__overlay {
      position: absolute; inset: 0;
      padding: 30px 32px;
      display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
      color: #fff;
    }
    .pj-bento__overlay::before,
    .pj-bento__overlay::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
    .pj-bento__overlay::before {
      background: linear-gradient(to top, rgba(10,15,25,0.78) 0%, rgba(10,15,25,0.24) 45%, rgba(10,15,25,0) 72%);
    }
    .pj-bento__overlay::after {
      background: linear-gradient(to top, rgba(10,15,25,0.93) 0%, rgba(10,15,25,0.68) 55%, rgba(10,15,25,0.42) 100%);
      opacity: 0; transition: opacity .35s ease;
    }
    .pj-bento__overlay > * { position: relative; z-index: 1; }
    .pj-bento__item:hover .pj-bento__overlay::after,
    .pj-bento__item:focus-within .pj-bento__overlay::after { opacity: 1; }
    .pj-bento__more {
      display: grid; grid-template-rows: 0fr; opacity: 0;
      transition: grid-template-rows .4s ease, opacity .3s ease;
    }
    .pj-bento__more-inner {
      overflow: hidden; min-height: 0;
      display: flex; flex-direction: column; gap: 14px;
    }
    .pj-bento__item:hover .pj-bento__more,
    .pj-bento__item:focus-within .pj-bento__more { grid-template-rows: 1fr; opacity: 1; }
    .pj-bento__overlay .pj-banner__title { font-size: clamp(22px, 2vw, 30px); }
    .pj-bento__intro {
      font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6;
      color: rgba(255,255,255,0.82); margin: 0; max-width: 460px;
    }

    /* Featured item, soft pastel block */
    .pj-bento__featured {
      grid-column: span 3; grid-row: span 2;
      background: linear-gradient(135deg, #fbe6df 0%, #f4c2c4 55%, #d4b6ec 100%);
      display: flex; align-items: center; justify-content: center;
      padding: 32px;
    }
    .pj-bento__featured p {
      font-family: 'JetBrains Mono', monospace; font-weight: 700;
      font-size: clamp(22px, 2.5vw, 32px); line-height: 1.2;
      color: #1a1a1a; text-align: center; margin: 0;
    }
    .pj-bento__featured em {
      font-style: italic; font-weight: 500;
      font-family: 'Caveat', 'Inter', cursive;
      font-size: 1.15em; color: #d4604f;
    }

    /* Bento sizes */
    .pj-bento__item--sq-sm { grid-column: span 3; grid-row: span 2; }
    .pj-bento__item--md    { grid-column: span 3; grid-row: span 2; }
    .pj-bento__item--wide  { grid-column: span 4; grid-row: span 2; }
    .pj-bento__item--sm    { grid-column: span 2; grid-row: span 2; }

    /* ══════════════════════════════════════════════
       SECTION 6, CONTACT
    ══════════════════════════════════════════════ */
    .pj-contact { padding: var(--section-pad-y) 0; background: var(--e-global-color-bg); }
    .pj-contact__inner {
      max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
      display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: start;
    }
    .pj-contact__label {
      font-family: 'JetBrains Mono', monospace; font-weight: 500;
      font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--e-global-color-primary); margin: 0 0 18px;
    }
    .pj-contact__heading {
      font-family: 'JetBrains Mono', monospace; font-weight: 700;
      font-size: clamp(32px, 3.5vw, 48px); line-height: 1.08;
      letter-spacing: -0.02em; color: var(--e-global-color-text); margin: 0 0 22px;
    }
    .pj-contact__lead {
      font-family: 'Inter', sans-serif; font-size: 15.5px; line-height: 1.7;
      color: var(--e-global-color-text-dim); margin: 0 0 36px; max-width: 460px;
    }
    .pj-contact__list { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 32px; }
    .pj-contact__item { display: flex; flex-direction: column; gap: 6px; }
    .pj-contact__item-head { display: flex; align-items: center; gap: 12px; }
    .pj-contact__icon {
      flex-shrink: 0; color: var(--e-global-color-primary);
      display: flex; align-items: center; justify-content: center;
    }
    .pj-contact__icon svg { width: 22px; height: 22px; }
    .pj-contact__item-title {
      font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px;
      color: var(--e-global-color-text); margin: 0;
    }
    .pj-contact__item-sub {
      font-family: 'Inter', sans-serif; font-size: 15px;
      color: var(--e-global-color-text-mute); margin: 0;
    }
    .pj-contact__item-value {
      font-family: 'Inter', sans-serif; font-size: 16px;
      color: var(--e-global-color-text); text-decoration: none;
    }
    .pj-contact__item-value:hover { color: var(--e-global-color-primary); }

    /* Form card (reuses ct- form pattern from contact.html) */
    .pj-card-form {
      background: #fff; border-radius: 16px;
      padding: 40px;
      box-shadow: 0 4px 28px rgba(15,26,46,0.10);
      border: 1px solid var(--e-global-color-border);
    }
    .pj-card-form__title {
      font-family: 'JetBrains Mono', monospace; font-weight: 700;
      font-size: 22px; color: var(--e-global-color-text); margin: 0 0 6px;
    }
    .pj-card-form__sub {
      font-family: 'Inter', sans-serif; font-size: 14px;
      color: var(--e-global-color-text-mute); margin: 0 0 28px;
    }
    .pj-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .pj-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .pj-field label {
      font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
      color: var(--e-global-color-text);
    }
    .pj-req { color: var(--e-global-color-primary); }
    .pj-field input,
    .pj-field textarea,
    .pj-field select {
      font-family: 'Inter', sans-serif; font-size: 14px;
      padding: 12px 16px; border-radius: 10px;
      border: 1.5px solid var(--e-global-color-border);
      background: transparent; color: var(--e-global-color-text);
      outline: none; width: 100%; box-sizing: border-box;
      transition: border-color .2s, background .2s;
    }
    .pj-field input:focus,
    .pj-field textarea:focus,
    .pj-field select:focus {
      border-color: var(--e-global-color-primary); background: #fff;
    }
    .pj-field textarea { resize: vertical; min-height: 110px; }
    .pj-submit {
      width: 100%; padding: 14px; border: none; border-radius: 10px;
      background: var(--e-global-color-primary); color: #fff;
      font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
      cursor: pointer; margin-top: 6px;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      transition: background .2s, transform .2s;
    }
    .pj-submit:hover { background: #28aed0; transform: translateY(-2px); }

    /* ══════════════════════════════════════════════
       SECTION 7, CTA  (ab-cta dark panel)
    ══════════════════════════════════════════════ */
    .ct-section-2 { padding: 0 0 var(--section-pad-y); background: var(--e-global-color-bg-soft); }
    .ct-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 64px); align-items: start; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
    .ct-form-side { padding-top: 110px; }
    .ct-form-heading { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(32px,3.6vw,50px); line-height: 1.1; color: var(--e-global-color-text); margin: 0 0 20px; letter-spacing: -0.02em; }
    .ct-form-lead { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.7; color: var(--e-global-color-text-dim); margin: 0; }
    .ct-card { background: #fff; border-radius: 16px; padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); margin-top: -120px; position: relative; z-index: 2; }
    .ct-card-title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 22px; color: var(--e-global-color-text); margin: 0 0 8px; }
    .ct-card-sub { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--e-global-color-text-mute); margin: 0 0 28px; }
    .ct-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .ct-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .ct-field label { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--e-global-color-text); }
    .req { color: var(--e-global-color-primary); }
    .ct-field input, .ct-field textarea, .ct-field select { font-family: 'Inter', sans-serif; font-size: 14px; padding: 12px 16px; border-radius: 10px; border: 1.5px solid var(--e-global-color-border); background: transparent; color: var(--e-global-color-text); outline: none; transition: border-color .2s, background .2s; width: 100%; box-sizing: border-box; }
    .ct-field input:focus, .ct-field textarea:focus, .ct-field select:focus { border-color: var(--e-global-color-primary); background: #fff; }
    .ct-field textarea { resize: vertical; }
    .ct-submit { width: 100%; padding: 14px; border: none; border-radius: 10px; background: var(--e-global-color-primary); color: #fff; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .2s; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .ct-submit:hover { background: #1FA7CC; }
    @media (max-width: 1024px) { .ct-grid-2 { grid-template-columns: 1fr; gap: 32px; } .ct-card { padding: 28px; margin-top: -56px; } .ct-form-side { padding-top: 0; order: -1; } .pj-expect { padding-bottom: calc(var(--section-pad-y) + 80px); } }

    /* ══════════════════════════════════════════════
       RESPONSIVE  (tablet + phone), appended; desktop untouched
    ══════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      /* Section vertical padding now flows from --section-pad-y (60px here);
         only structural/layout changes live in these queries. */
      .pj-current__head {
        grid-template-columns: 1fr; gap: 16px;
        margin-bottom: 40px;
      }
      /* text + form/visual rows stack at tablet */
      .pj-intro__wrap { grid-template-columns: 1fr; gap: 28px; }
      .pj-contact__inner { grid-template-columns: 1fr; gap: 40px; }
      .pj-contact__list { grid-template-columns: 1fr 1fr; }
      /* Bento: collapse 6-col spans -> 2-col layout */
      .pj-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
      .pj-bento__featured,
      .pj-bento__item--sq-sm,
      .pj-bento__item--md,
      .pj-bento__item--wide,
      .pj-bento__item--sm { grid-column: span 1; grid-row: span 1; }
    }

    @media (max-width: 640px) {
      /* Section vertical padding and horizontal gutter flow from the global
         tokens (--section-pad-y / --gutter); only layout + type changes here. */
      /* Hero */
      .cr-hero { min-height: 380px; }
      .cr-hero__text-inner { padding-top: 28px; }
      .cr-hero__heading { font-size: clamp(20px, 6.2vw, 30px); }
      .cr-hero__stats { gap: 20px; flex-wrap: wrap; margin-top: 24px; }
      .cr-hero__stat strong { font-size: 24px; }

      /* Current / bento section */
      .pj-current__head { margin-bottom: 32px; }
      .pj-current__deco { font-size: clamp(60px, 18vw, 110px); top: 40px; }

      /* Tabs stay scrollable; 44px tap height */
      .pj-tabs-wrap { margin-bottom: 28px; }
      .pj-tab { font-size: 15px; padding: 15px 16px; }

      /* Bento -> single column */
      .pj-bento { grid-template-columns: 1fr; grid-auto-rows: 220px; gap: 14px; }
      .pj-bento__overlay { padding: 22px 22px; }
      .pj-bento__overlay::after { opacity: 1; }
      .pj-bento__more { grid-template-rows: 1fr; opacity: 1; }
      .pj-bento__overlay .pj-banner__title { font-size: 24px; }
      .pj-bento__featured { padding: 28px; min-height: 200px; }
      /* Case-kaartjes op telefoon: intro-tekst en "Klant" weg (alleen omschrijving) */
      .pj-bento__intro { display: none; }
      .pj-banner__meta .pj-meta--client { display: none; }

      /* Expect: alle 3 USP's permanent uitgeklapt op telefoon,
         inclusief de accentkleur-stijl die op desktop alleen bij hover/actief geldt */
      .pj-expect__head { margin-bottom: 36px; }
      .exp-acc { gap: 14px; }
      .exp-card { padding: 24px; cursor: default; }
      .exp-card__icon { position: static; margin-bottom: 16px; }
      .exp-card__title { min-height: 0; align-items: flex-start; font-size: 19px; }
      .exp-card__desc { padding-top: 4px; font-size: 14.5px; }
      .exp-card .exp-card__reveal { grid-template-rows: 1fr; }
      .exp-card .exp-card__desc { opacity: 1; }
      .exp-acc .exp-card { box-shadow: 0 24px 50px -28px rgba(15, 26, 46, 0.16); }
      .exp-acc .exp-card--navy   { border-color: var(--e-global-color-secondary); background: rgba(13,89,209,0.015); }
      .exp-acc .exp-card--yellow { border-color: var(--e-global-color-accent);    background: rgba(238,198,17,0.04); }
      .exp-acc .exp-card--red    { border-color: var(--e-global-color-alert);     background: rgba(254,91,91,0.018); }

      /* Contact (ct-section): overlap-layout uit op telefoon.
         Het formulierkaartje werd door margin-top:-56px (z-index:2) over de
         "Share your message"-tekst getrokken; de padding van .pj-expect en
         .ct-section-2 compenseerde die desktop-overlap. */
      .pj-expect { padding-bottom: var(--section-pad-y); }
      .ct-section-2 { padding-top: var(--section-pad-y); }
      .ct-card { padding: 24px; margin-top: 0; }

      /* Contact list (pj-contact variant, if present) */
      .pj-contact__list { grid-template-columns: 1fr; gap: 24px; }
      .pj-card-form { padding: 24px; }
      .pj-field-row { grid-template-columns: 1fr; gap: 0; }
    }

    @media (max-width: 420px) {
      .cr-hero__stats { gap: 16px; }
    }
  
    /* ── Uniform met de industrie-verzamelpagina (referentie voor alle
       cr-hero's): zelfde tekst-padding en geen minimumhoogte op telefoon,
       zodat alle hero's op elk toestel even hoog zijn. Staat bewust als
       laatste in dit stylesheet en overschrijft de regels hierboven. ── */
    @media (max-width: 1024px) {
      .cr-hero { min-height: 440px; }
      .cr-hero__text { padding: 120px 24px 56px; }
      .cr-hero__text-inner { padding-top: 0; }
    }
    @media (max-width: 640px) {
      .cr-hero { min-height: 0; }
      .cr-hero__text { padding: 104px 18px 44px; }
      .cr-hero__text-inner { padding-top: 0; }
    }
  
    /* ── Breadcrumb in de hero (zelfde als industries/services; stijl lokaal
       omdat deze pagina overview.css niet laadt) ── */
    .ov-crumb {
      display: flex; align-items: center; gap: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px; letter-spacing: 0.06em;
      margin: 0 0 18px;
    }
    .ov-crumb a { text-decoration: none; transition: color .2s ease; }
    .ov-crumb__sep { opacity: 0.5; }
    .ov-crumb--light { color: rgba(255, 255, 255, 0.7); }
    .ov-crumb--light a { color: rgba(255, 255, 255, 0.7); }
    .ov-crumb--light a:hover { color: #fff; }
    .ov-crumb--light [aria-current] { color: #fff; }