/* ── CTA LINK (same underline draw as Kastenlab) ── */
    .cta-link {
      position: relative;
      display: inline-block;
      text-decoration: none;
      color: inherit;
      font-family: var(--font-body);
      font-weight: 600;
      font-size: 14px;
      letter-spacing: .04em;
      padding-bottom: 3px;
    }
    .cta-link::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 0%;
      height: 1.5px;
      background: var(--perm-blue);
      transition: width var(--dur-slow) var(--ease-out);
    }
    .cta-link:hover::after, .cta-link:focus-visible::after { width: 100%; }

    /* ════════════════════════════════════════════
       1. HERO — full-width photo with text overlay (max 65vh)
    ════════════════════════════════════════════ */
    .hero {
      min-height: 70vh;
      display: grid;
      grid-template-rows: 1fr auto;
      position: relative;
      overflow: hidden;
      /* Photo base with strong dark overlay so text stays legible */
      background:
        linear-gradient(to bottom, rgba(6,10,15,0.55) 0%, rgba(6,10,15,0.78) 55%, rgba(6,10,15,0.92) 100%),
        radial-gradient(ellipse 70% 55% at 18% 25%, rgba(122,59,59,0.18) 0%, transparent 65%),
        url('../images/permanentie-noodrenovatie-werken-appartement.webp') center 30%/cover no-repeat;
    }

    /* Hide the separate bg div — background is on .hero itself */
    .hero-bg {
      display: none;
    }

    /* Blueprint grid overlay — keeps the technical feel */
    .hero-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(127,168,192,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127,168,192,.035) 1px, transparent 1px);
      background-size: 64px 64px;
      pointer-events: none;
      mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 70%, transparent 100%);
    }

    /* Hero body — flex column, sits in the 1fr row above the stats bar */
    .hero-body {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: clamp(20px, 3vw, 36px) var(--gutter) clamp(28px, 4vw, 44px);
    }

    .hero-eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--perm-blue);
      opacity: .8;
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      gap: 16px;
      animation: fadeUp 0.6s ease both;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero-eyebrow::before {
      content: '';
      display: block;
      width: 32px;
      height: 1px;
      background: var(--perm-blue);
      opacity: .5;
    }

    .hero-title {
      font-weight: 400;
      font-style: italic;
      font-size: clamp(40px, 5.5vw, 76px);
      line-height: 1.0;
      letter-spacing: -.02em;
      color: rgba(245,239,235,0.6);
      margin-bottom: clamp(16px, 2vw, 28px);
      max-width: 14ch;
      animation: fadeUp 0.7s 0.1s ease both;
    }
    .hero-title em {
      font-style: normal;
      font-weight: 900;
      color: #F5EFEB;
      display: block;
    }

    .hero-sub {
      font-size: clamp(14px, 1.4vw, 16px);
      font-weight: 300;
      color: rgba(245,239,235,0.75);
      max-width: 58ch;
      line-height: 1.7;
      margin-bottom: clamp(20px, 2.5vw, 32px);
      animation: fadeUp 0.7s 0.2s ease both;
    }

    .hero-ctas {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
      animation: fadeUp 0.7s 0.3s ease both;
    }.btn-primary .pulse-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: rgba(241,237,230,.8);
      flex-shrink: 0;
      animation: pulseDot 2.2s ease-in-out infinite;
    }
    @keyframes pulseDot {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:.4; transform:scale(.7); }
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0 24px;
      height: 48px;
      border: 1.5px solid rgba(200,217,230,.35);
      border-radius: 50px;
      font-family: var(--font-nav);
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(245,239,235,0.75);
      text-decoration: none;
      transition: border-color 280ms, background 280ms, transform 200ms var(--ease-out);
      backdrop-filter: blur(8px);
    }
    .btn-secondary:hover { border-color: rgba(200,217,230,.7); background: rgba(44,80,110,.2); transform: translateY(-1px); }

    /* Hero bottom bar — stats */
    .hero-stats {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid rgba(245,239,235,0.07);
    }
    .hero-stat {
      padding: clamp(20px, 3vw, 32px) var(--gutter);
      border-right: 1px solid rgba(245,239,235,0.07);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .hero-stat:last-child { border-right: none; }
    .hero-stat-num {
      font-family: var(--font-wordmark);
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 700;
      line-height: 1;
      color: #F5EFEB;
    }
    .hero-stat-label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(200,217,230,0.75);
    }@keyframes scrollCueBounce {
      0%,100% { transform: translateY(0); opacity: .25; }
      50%      { transform: translateY(6px); opacity: .5; }
    }

    /* ════════════════════════════════════════════
       2. INTRO STATEMENT
    ════════════════════════════════════════════ */
    .intro-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 6vw, 96px);
      align-items: center;
    }
    .intro-headline {
      font-family: var(--font-wordmark);
      font-weight: 400;
      font-style: italic;
      font-size: clamp(24px, 3.2vw, 42px);
      line-height: 1.25;
      letter-spacing: -.01em;
      color: rgba(245,239,235,0.6);
      margin-bottom: 24px;
    }
    .intro-body p {
      font-size: clamp(14px, 1.4vw, 16px);
      color: rgba(245,239,235,0.75);
      margin-bottom: 16px;
    }
    .intro-body p:last-child { margin-bottom: 0; }

    /* Blueprint-corner marks (same as Kastenlab) */
    .sketch-corner {
      position: absolute;
      width: 14px; height: 14px;
      color: rgba(200,217,230,.3);
      pointer-events: none;
    }
    .intro-figure {
      position: relative;
      aspect-ratio: 16/10;
      background: rgba(200,217,230,.06);
      border: 1px solid rgba(200,217,230,.1);
      overflow: hidden;
    }
    .intro-figure-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 25%;
      display: block;
      filter: grayscale(15%) contrast(1.05);
    }

    /* Foto bij pillar-body */
    .pillar-figure {
      margin-top: 24px;
      overflow: hidden;
      border: 1px solid rgba(200,217,230,0.1);
    }
    .pillar-figure img {
      width: 100%;
      height: clamp(200px, 22vw, 320px);
      object-fit: cover;
      object-position: center center;
      display: block;
      filter: grayscale(15%) contrast(1.05);
      transition: transform 600ms var(--ease-out), filter 500ms;
    }
    .pillar-figure:hover img {
      transform: scale(1.03);
      filter: grayscale(0%) contrast(1.05);
    }

    /* ════════════════════════════════════════════
       3. DIENSTEN — 3 pillar rows
    ════════════════════════════════════════════ */
    .pillar-stack { display: flex; flex-direction: column; }

    .pillar-row {
      display: grid;
      grid-template-columns: 64px 1fr 2fr;
      gap: 0 clamp(24px, 3vw, 48px);
      align-items: start;
      padding: clamp(28px, 3.5vw, 44px) 0;
      border-bottom: 1px solid rgba(245,239,235,0.07);
      position: relative;
      transition: background 300ms;
    }
    .pillar-row:first-child { border-top: 1px solid rgba(245,239,235,0.07); }
    .pillar-row::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 0;
      background: rgba(200,217,230,.04);
      transition: width 400ms var(--ease-out);
    }
    .pillar-row:hover::before { width: 100%; }

    .pillar-marker {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding-top: 4px;
    }
    .pm-rule {
      width: 1px;
      height: 32px;
      background: rgba(200,217,230,.25);
      position: relative;
      flex-shrink: 0;
    }
    .pm-notch {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 5px;
      height: 5px;
      border: 1px solid rgba(200,217,230,.5);
      border-radius: 50%;
      background: var(--perm-dark);
    }
    .pm-num {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .15em;
      color: rgba(245,239,235,0.75);
    }

    .pillar-head { padding-top: 2px; }
    .pillar-tag {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--perm-blue);
      opacity: .7;
      margin-bottom: 10px;
    }
    .pillar-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(16px, 2vw, 22px);
      letter-spacing: -.01em;
      color: rgba(245,239,235,0.85);
      line-height: 1.2;
    }

    .pillar-
    .pillar-body ul {
      list-style: none;
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .pillar-body ul li {
      display: flex;
      align-items: baseline;
      gap: 10px;
      color: rgba(245,239,235,0.75);
    }
    .pillar-body ul li::before {
      content: '—';
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--perm-blue);
      opacity: .5;
      flex-shrink: 0;
    }
    .pillar-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 16px;
    }
    .pillar-badge {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 4px 10px;
      border: 1px solid rgba(200,217,230,.2);
      border-radius: 50px;
      color: rgba(200,217,230,0.75);
    }
    .pillar-badge--red {
      border-color: rgba(86,124,141,.4);
      color: rgba(245,239,235,0.75);
    }

    /* ════════════════════════════════════════════
       4. TIJDLIJN — PE systeem
    ════════════════════════════════════════════ */
    .pe-section { background: var(--perm-darker); }

    .pe-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(241,237,230,.06);
      border: 1px solid rgba(245,239,235,0.06);
      border-radius: 2px;
      overflow: hidden;
      margin-top: clamp(40px, 5vw, 64px);
    }
    .pe-card {
      background: rgba(14,24,34,.95);
      padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px);
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      overflow: hidden;
      transition: background 300ms;
    }
    .pe-card:hover { background: rgba(24,36,50,.95); }
    .pe-card::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
    }
    .pe-card--1::after { background: #7A3B3B; }
    .pe-card--2::after { background: #CBAD8D; }
    .pe-card--3::after { background: #7FA8C0; }

    .pe-label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
    }
    .pe-card--1 .pe-label { color: rgba(245,239,235,0.8); }
    .pe-card--2 .pe-label { color: rgba(245,239,235,0.8); }
    .pe-card--3 .pe-label { color: rgba(200,217,230,0.8); }

    .pe-time {
      font-family: var(--font-wordmark);
      font-size: clamp(32px, 4vw, 52px);
      font-weight: 700;
      line-height: 1;
      color: #F5EFEB;
    }
    .pe-time span {
      font-size: .45em;
      font-weight: 400;
      font-style: italic;
      opacity: .5;
      margin-left: 4px;
    }

    .pe-def {
      font-size: clamp(12px, 1.3vw, 14px);
      color: rgba(245,239,235,0.75);
      line-height: 1.6;
      flex: 1;
    }
    .pe-note {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .1em;
      color: rgba(245,239,235,0.75);
      border-top: 1px solid rgba(245,239,235,0.06);
      padding-top: 12px;
      margin-top: auto;
    }

    /* ════════════════════════════════════════════
       5. PROCESS — vertical timeline
    ════════════════════════════════════════════ */
    .process-list {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .process-list::before {
      content: '';
      position: absolute;
      left: 26px;
      top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent, rgba(127,168,192,.2) 15%, rgba(127,168,192,.2) 85%, transparent);
    }
    .process-row {
      display: grid;
      grid-template-columns: 64px 140px 1fr;
      gap: 0 clamp(24px, 3vw, 40px);
      align-items: start;
      padding: clamp(24px, 3vw, 40px) 0;
      border-bottom: 1px solid rgba(245,239,235,0.05);
      position: relative;
    }
    .process-row:last-child { border-bottom: none; }

    .process-node {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border: 1px solid rgba(200,217,230,.2);
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
      background: var(--perm-dark);
      transition: border-color 300ms, background 300ms;
    }
    .process-node-num {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .1em;
      color: rgba(200,217,230,0.75);
    }
    .process-row:hover .process-node {
      border-color: rgba(200,217,230,.5);
      background: rgba(200,217,230,.06);
    }

    .process-head { padding-top: 14px; }
    .process-eyebrow {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--perm-blue);
      opacity: .6;
      margin-bottom: 6px;
    }
    .process-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(15px, 1.6vw, 18px);
      color: rgba(245,239,235,0.78);
      line-height: 1.25;
    }

    .process-

    /* ════════════════════════════════════════════
       6. REFERENTIECASE — spotlight
    ════════════════════════════════════════════ */
    .case-section { background: var(--perm-navy); }

    .case-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 6vw, 96px);
      align-items: center;
    }
    .case-label {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(200,217,230,0.75);
      margin-bottom: 12px;
    }
    .case-title {
      font-family: var(--font-wordmark);
      font-size: clamp(20px, 2.2vw, 32px);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -.01em;
      color: #F5EFEB;
      margin-bottom: clamp(16px, 2vw, 24px);
    }
    .case-body {
      font-size: clamp(13px, 1.2vw, 15px);
      line-height: 1.75;
      color: rgba(245,239,235,0.75);
      margin-bottom: 14px;
    }
    .case-body:last-of-type { margin-bottom: clamp(20px, 2.5vw, 32px); }
    .case-

    .case-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(241,237,230,.06);
      border: 1px solid rgba(245,239,235,0.06);
      margin-bottom: clamp(28px, 3vw, 40px);
      border-radius: 2px;
      overflow: hidden;
    }
    .case-metric {
      background: rgba(14,24,34,.6);
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .case-metric-num {
      font-family: var(--font-wordmark);
      font-size: clamp(20px, 2.5vw, 30px);
      font-weight: 700;
      color: #F5EFEB;
      line-height: 1;
    }
    .case-metric-label {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(200,217,230,0.75);
    }

    .case-visual {
      position: relative;
      aspect-ratio: 16/10;
      background: rgba(200,217,230,.05);
      border: 1px solid rgba(200,217,230,.1);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .case-visual::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 40% 40%, rgba(44,80,110,.25) 0%, transparent 60%);
      pointer-events: none;
    }
    .case-visual-placeholder {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .15em;
      color: rgba(200,217,230,.3);
      text-transform: uppercase;
      text-align: center;
      padding: 24px;
      z-index: 1;
    }
    .case-tag {
      position: absolute;
      top: 20px;
      left: 20px;
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 5px 12px;
      background: rgba(14,24,34,.75);
      border: 1px solid rgba(200,217,230,.2);
      border-radius: 50px;
      color: rgba(200,217,230,0.75);
      backdrop-filter: blur(8px);
    }

    /* ════════════════════════════════════════════
       7. VALIDATIE — aannemingserkenning + cijfers
    ════════════════════════════════════════════ */
    .validation-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 6vw, 96px);
      align-items: start;
    }
    .validation-items {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .validation-item {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 0 16px;
      align-items: start;
      padding: 20px 0;
      border-bottom: 1px solid rgba(245,239,235,0.06);
    }
    .validation-item:last-child { border-bottom: none; }
    .validation-icon {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(200,217,230,.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .validation-icon svg { width: 14px; height: 14px; color: rgba(200,217,230,0.75); }
    .validation-label {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(200,217,230,0.75);
      margin-bottom: 4px;
    }
    .validation-value {
      font-size: clamp(13px, 1.3vw, 15px);
      color: rgba(245,239,235,0.75);
      line-height: 1.5;
    }

    .validation-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: rgba(241,237,230,.06);
      border: 1px solid rgba(245,239,235,0.06);
      border-radius: 2px;
      overflow: hidden;
    }
    .validation-stat {
      background: rgba(14,24,34,.8);
      padding: clamp(20px, 3vw, 32px);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .validation-stat-num {
      font-family: var(--font-wordmark);
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 700;
      line-height: 1;
      color: #F5EFEB;
    }
    .validation-stat-label {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(200,217,230,0.75);
      line-height: 1.4;
    }.cta-sub {
      font-size: clamp(14px, 1.4vw, 16px);
      color: rgba(245,239,235,0.75);
      line-height: 1.75;
      max-width: 46ch;
      margin: 0 auto clamp(36px, 4vw, 56px);
    }/* ════════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════════ */
    @media (max-width: 900px) {
      .intro-grid    { grid-template-columns: 1fr; }
      .intro-figure  { aspect-ratio: 16/9; order: -1; }
      .case-grid     { grid-template-columns: 1fr; }
      .case-visual   { aspect-ratio: 16/9; order: -1; }
      .validation-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      .hero-stats { grid-template-columns: 1fr; }
      .hero-stat  { border-right: none; border-bottom: 1px solid rgba(245,239,235,0.07); }
      .hero-stat:last-child { border-bottom: none; }

      .pe-grid { grid-template-columns: 1fr; }

      .pillar-row {
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
      }
      .pillar-head { grid-column: 2; }
      .pillar-body { grid-column: 2; }

      .process-row {
        grid-template-columns: 52px 1fr;
        grid-template-rows: auto auto;
      }
      .process-head { grid-column: 2; }
      .process-body { grid-column: 2; }

      .case-metrics { grid-template-columns: 1fr 1fr; }
      .validation-stats { grid-template-columns: 1fr; }
    }

    @media (max-width: 480px) {
      .hero-stats { grid-template-columns: 1fr; }
      .pe-grid { grid-template-columns: 1fr; }
      .case-metrics { grid-template-columns: 1fr; }
    }


    /* ════════════════════════════════════════════
       5. RESILIENCE CASES
    ════════════════════════════════════════════ */
    .resilience-section {
      padding: clamp(64px, 8vw, 112px) 0;
    }
    .resilience-header {
      max-width: 72ch;
      margin-bottom: clamp(48px, 6vw, 80px);
    }
    .resilience-title {
      font-family: var(--font-wordmark);
      font-weight: 400;
      font-style: italic;
      font-size: clamp(28px, 3.5vw, 48px);
      line-height: 1.1;
      letter-spacing: -.015em;
      color: rgba(245,239,235,0.6);
      margin-bottom: 20px;
    }
    .resilience-intro {
      font-size: clamp(14px, 1.3vw, 16px);
      line-height: 1.75;
      color: rgba(245,239,235,0.75);
      max-width: 64ch;
    }

    .resilience-cases {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: clamp(48px, 6vw, 72px);
    }

    .resilience-case {
      display: grid;
      grid-template-columns: 480px 1fr;
      align-items: center;
      border: 1px solid rgba(200,217,230,0.1);
      overflow: hidden;
    }
    .resilience-case--alt {
      grid-template-columns: 1fr 480px;
    }
    .resilience-case--alt .resilience-case-photo {
      order: 2;
    }
    .resilience-case--alt .resilience-case-content {
      order: 1;
    }

    .resilience-case-photo {
      position: relative;
      aspect-ratio: 16/10;
      background: rgba(200,217,230,.06);
      overflow: hidden;
      align-self: center;
      border: 1px solid rgba(200,217,230,0.2);
      outline: 1px solid rgba(200,217,230,.07);
      outline-offset: 7px;
    }
    .resilience-photo-placeholder {
      width: 100%; height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        repeating-linear-gradient(
          45deg,
          transparent,
          transparent 20px,
          rgba(127,168,192,.03) 20px,
          rgba(127,168,192,.03) 21px
        );
      border: 1px dashed rgba(200,217,230,.15);
    }
    .resilience-photo-placeholder span {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(200,217,230,.35);
      text-align: center;
      padding: 24px;
      max-width: 28ch;
      line-height: 1.6;
    }
    .resilience-case-photo img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      filter: grayscale(12%) contrast(1.04);
      transition: transform 600ms var(--ease-out), filter 500ms;
    }
    .resilience-case:hover .resilience-case-photo img {
      transform: scale(1.03);
      filter: grayscale(0%) contrast(1.04);
    }
    .resilience-case-tag {
      position: absolute;
      bottom: 16px; left: 16px;
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(245,239,235,0.75);
      background: rgba(14,24,34,.7);
      padding: 6px 10px;
      backdrop-filter: blur(8px);
    }

    .resilience-case-content {
      padding: clamp(28px, 3.5vw, 48px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      border-left: 1px solid rgba(200,217,230,0.08);
    }
    .resilience-case--alt .resilience-case-content {
      border-left: none;
      border-right: 1px solid rgba(200,217,230,0.08);
    }
    .resilience-case-number {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .22em;
      color: rgba(200,217,230,0.75);
      margin-bottom: 10px;
    }
    .resilience-case-title {
      font-family: var(--font-wordmark);
      font-weight: 400;
      font-size: clamp(18px, 2vw, 26px);
      line-height: 1.2;
      color: #F5EFEB;
      margin-bottom: 16px;
    }
    .resilience-case-body {
      font-size: clamp(13px, 1.2vw, 14px);
      line-height: 1.78;
      color: rgba(245,239,235,0.75);
      margin-bottom: 12px;
    }
    .resilience-case-body:last-of-type {
      margin-bottom: 20px;
    }
    .resilience-case-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .resilience-tag {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(200,217,230,0.75);
      border: 1px solid rgba(200,217,230,.2);
      padding: 4px 10px;
    }

    .resilience-cta {
      display: flex;
      align-items: center;
      gap: clamp(24px, 4vw, 48px);
      padding: clamp(28px, 3.5vw, 40px) clamp(28px, 3.5vw, 40px);
      border: 1px solid rgba(200,217,230,0.1);
      flex-wrap: wrap;
    }
    .resilience-cta-text {
      font-size: clamp(14px, 1.3vw, 16px);
      color: rgba(245,239,235,0.75);
      line-height: 1.6;
      flex: 1;
      min-width: 20ch;
    }

    @media (max-width: 900px) {
      .resilience-case,
      .resilience-case--alt {
        grid-template-columns: 1fr;
      }
      .resilience-case--alt .resilience-case-photo { order: 0; }
      .resilience-case--alt .resilience-case-content { order: 0; border-right: none; }
      .resilience-case-content { border-left: none; border-top: 1px solid rgba(200,217,230,0.08); }
      .resilience-case-photo { min-height: 240px; }
    }

    @media (max-width: 480px) {
      .resilience-cta { flex-direction: column; align-items: flex-start; }
    }


    /* ════════════════════════════════════════════
       CLOSING / SEO BLOCK
    ════════════════════════════════════════════ */
    .swr-container {
      max-width: var(--max-w, 1280px);
      margin: 0 auto;
      padding: clamp(48px, 6vw, 80px) var(--gutter);
    }
    .swr-closing-bg {
      background: var(--perm-parchment);
    }
    .swr-closing-inner {
      max-width: 900px;
      margin: 0 auto;
      border: 1px solid rgba(200,217,230,0.25);
      padding: clamp(32px, 4vw, 56px);
    }
    .swr-closing-pre {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(200,217,230,0.75);
      margin-bottom: 20px;
    }
    .swr-closing-title {
      font-family: var(--font-wordmark);
      font-weight: 400;
      font-style: italic;
      font-size: clamp(24px, 3vw, 42px);
      line-height: 1.15;
      letter-spacing: -.02em;
      color: #2F4156;
      margin-bottom: 28px;
    }
    .swr-closing-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 32px;
    }
    .swr-closing-body p {
      font-size: clamp(14px, 1.3vw, 15px);
      line-height: 1.85;
      color: rgba(47,65,86,0.78);
    }

/* ── Typografie onderste secties gelijk aan de casekaarten (02-10-2026) ── */
.section-spine-meta .ci-title { font-family: var(--font-wordmark); font-weight: 400; font-style: italic; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; letter-spacing: -.015em; color: rgba(245,239,235,0.88); margin: 10px 0 20px; }
#intro-title ~ p, #diensten-title ~ p { font-family: var(--font-body); font-size: clamp(14px, 1.3vw, 16px); line-height: 1.75; color: rgba(245,239,235,0.75); max-width: 64ch; margin-bottom: 12px; }
.pillar-title { font-family: var(--font-wordmark); font-weight: 400; font-size: clamp(18px, 2vw, 26px); letter-spacing: 0; line-height: 1.2; color: #F5EFEB; }
.pillar-body > p { font-family: var(--font-body); font-size: clamp(13px, 1.2vw, 14px); line-height: 1.78; color: rgba(245,239,235,0.75); margin-bottom: 12px; }
.pillar-body ul li { font-family: var(--font-body); font-size: clamp(13px, 1.2vw, 14px); line-height: 1.6; color: rgba(245,239,235,0.75); }