
  /* ============ PAGE HEADER STRIP ============ */
  .page-header{
    background:var(--paper);
    padding-top:clamp(56px,8vw,96px);
    padding-bottom:clamp(48px,7vw,80px);
  }
  .page-header-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:clamp(32px,6vw,72px);
    align-items:center;
  }
  .page-header h1{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(38px,4.2vw,50px);
    margin-top:16px;
    max-width:17ch;
    line-height:1.14;
    color:var(--purple);
  }
  .page-header .lede{
    margin-top:24px;
    font-size:17px;
    line-height:1.75;
    color:var(--ink);
    max-width:52ch;
  }
  .page-header-motif{
    display:flex;
    justify-content:center;
  }
  .page-header-motif svg.cx-graphic{
    display:block;
    width:100%;
    max-width:400px;
    height:auto;
    overflow:visible;
  }
  @media (max-width:900px){
    .page-header-grid{ grid-template-columns:1fr; }
    .page-header-motif{ order:-1; max-width:250px; margin-inline:auto; }
  }

  /* ============ SITUATIONS SEQUENCE ============ */
  /* A single continuous warm-neutral band behind the full 01–04 sequence —
     lighter than the Engagement Formats panel below. Boundaries on both
     sides are handled by the background change alone, no internal rule. */
  .situations{
    background:var(--panel-soft);
  }
  .situation{
    padding-block:clamp(48px,6.5vw,80px);
    border-top:1px solid var(--line);
  }
  /* Section introduction — sits above the numbered situations, using the
     established Level 2 heading treatment (Libre Caslon Display 400,
     purple, same clamp as elsewhere) with no new size or weight. */
  .situations-intro{
    padding-top:clamp(56px,7.5vw,88px);
    margin-bottom:clamp(8px,1.5vw,16px);
  }
  .situations-intro h2{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(31px,3.8vw,44px);
    color:var(--purple);
    margin-top:14px;
  }
  .situation:first-of-type{
    border-top:none;
    padding-top:clamp(40px,5.5vw,64px);
  }
  .situation-grid{
    display:grid;
    grid-template-columns:0.72fr 1.28fr;
    gap:clamp(24px,4.5vw,56px);
    align-items:start;
  }
  .situation-head{ position:relative; }
  .situation-num{
    display:block;
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(44px,5vw,60px);
    line-height:1;
    color:var(--gold);
    opacity:0.9;
  }
  .situation-head h2{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(24px,2.6vw,30px);
    margin-top:10px;
    line-height:1.22;
    max-width:14ch;
  }
  .situation-desc{
    font-size:17px;
    line-height:1.75;
    color:var(--ink);
    max-width:62ch;
  }
  .situation-list{
    margin-top:32px;
  }

  @media (max-width:900px){
    .situation-grid{ grid-template-columns:1fr; gap:20px; }
    .situation-num{ font-size:38px; }
  }

  /* ============ ENGAGEMENT FORMATS ============ */
  .engagement{ background:var(--paper); }
  .engagement-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:clamp(36px,6vw,90px);
  }
  .engagement-grid h2{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(31px,3.8vw,44px);
    color:var(--purple);
  }
  .engagement-body p{
    font-size:16.5px;
    color:var(--ink);
    line-height:1.8;
  }
  .engagement-body p + p{ margin-top:20px; }
  .engagement-list{ margin-top:32px; }

  @media (max-width:900px){ .engagement-grid{ grid-template-columns:1fr; } }
