:root{
      --bg-1:#212a3d;
      --bg-2:#29354c;
      --accent:#ed9700;
      --accent-hover:#be7900;
      --white:#ffffff;
      --muted:#d4d7db;
      --ink:#0f172a;
      --ink-2:#334155;
      --panel: rgba(255,255,255,.06);
      --panel-2: rgba(255,255,255,.10);
      --border: rgba(255,255,255,.14);
      --shadow: 0 18px 60px rgba(0,0,0,.28);
      --radius: 18px;
      --max: 1120px;
      --light-bg: #f0f2f6;
      --light-panel: #ffffff;
      /* Solid surfaces for the dark sections. Translucent white fills read
         as "glass", which this audience reads as marketing rather than
         engineering, so cards sit on a real surface one step up from --bg-2. */
      --surface-dark: #2b3750;
      --border-dark: rgba(255,255,255,.10);
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    /* min-height, not height: a fixed 100% height on body made it the
       containing block for the sticky header, so the header could only
       stick for one viewport and then scrolled away. No overflow-x here
       either -- it would make body a scroll container and break sticky.
       Every decorative overflowing element is clipped by its own parent. */
    html,body{ min-height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      line-height:1.55;
      color:var(--white);
      background: var(--bg-1);
    }

    a{ color:inherit; text-decoration:none; }
    button{ font-family:inherit; }
    .wrap{ max-width:var(--max); margin:0 auto; padding:0 22px; }

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:50;
      background: var(--bg-1);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:14px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width: auto;
      padding-left: 2px;
    }
    .brand h1{
      margin:0;
      font-size:14px;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-weight:700;
    }
    .brand p{
      margin:2px 0 0;
      font-size:12px;
      color:rgba(255,255,255,.74);
    }

    .navlinks{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .navlinks a{
      font-size:13px;
      color:rgba(255,255,255,.78);
      padding:8px 10px;
      border-radius:12px;
    }
    .navlinks a:hover{ background: rgba(255,255,255,.06); color:rgba(255,255,255,.92); }
    .cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:10px 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color:rgba(255,255,255,.92);
      font-weight:600;
      font-size:13px;
      cursor:pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
      user-select:none;
      white-space:nowrap;
    }
    .cta:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); transform: translateY(-1px); }

    .cta.primary{
      background: var(--accent);
      border-color: rgba(0,0,0,.08);
      color: #1b2436;
    }
    .cta.primary:hover{ background: var(--accent-hover); transform: translateY(-1px); }

    .lang{
      display:inline-flex;
      gap:6px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      padding:6px;
      border-radius:14px;
    }
    .lang button{
      border:0;
      background:transparent;
      color:rgba(255,255,255,.72);
      font-weight:700;
      font-size:12px;
      padding:7px 10px;
      border-radius:10px;
      cursor:pointer;
    }
    .lang button[aria-pressed="true"]{
      background: rgba(255,255,255,.14);
      color: rgba(255,255,255,.95);
    }

    /* Sections */
    section{ padding: 86px 0; }
    .hero{ padding: 78px 0 64px; position:relative; }
    .heroInner{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:34px;
      align-items:center;
      position:relative;
    }
    .kicker{
      display:inline-block;
      font-size:12px;
      font-weight:600;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(255,255,255,.62);
    }
    h2{
      margin:16px 0 12px;
      font-size:56px;
      line-height:1.05;
      letter-spacing:-.02em;
    }
    .subhead{
      margin:0 0 22px;
      color: rgba(255,255,255,.86);
      font-size:18px;
      max-width: 58ch;
    }
    .heroActions{
      display:flex; gap:12px; flex-wrap:wrap; align-items:center;
      margin-top: 18px;
    }

    .heroCard{
      border-radius: var(--radius);
      border:1px solid var(--border-dark);
      background: var(--surface-dark);
      padding: 22px;
      position:relative;
      overflow:hidden;
    }
    .heroCard > *{ position:relative; }
    .cardTitle{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
      margin-bottom: 10px;
    }
    .cardTitle h3{
      margin:0;
      font-size:14px;
      letter-spacing:.10em;
      text-transform:uppercase;
      color: rgba(255,255,255,.82);
    }
    .badge{
      font-size:12px;
      font-weight:700;
      color: #1b2436;
      background: rgba(237,151,0,.95);
      padding: 7px 10px;
      border-radius: 999px;
    }
    .mini{
      color: rgba(255,255,255,.82);
      font-size:14px;
      margin: 0 0 14px;
    }
    .list{
      display:grid;
      gap:10px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color: rgba(255,255,255,.82);
      font-size:13px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
    }
    .check{
      width:18px; height:18px;
      border-radius:6px;
      background: rgba(237,151,0,.18);
      border:1px solid rgba(237,151,0,.35);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 18px;
      margin-top: 1px;
    }
    .check svg{ width:12px; height:12px; fill: var(--accent); }



    .dark-section{
      position: relative;
      background: linear-gradient(180deg, #24314a 0%, #29354c 100%);
      overflow: hidden;
    }

    .dark-section::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(500px 220px at 100% 0%, rgba(212,215,219,.05), transparent 60%);
      pointer-events:none;
    }

    .dark-section > .wrap{
      position:relative;
      z-index:1;
    }

    /* Light sections */
    .light{
      background: var(--light-bg);
      color: var(--ink);
    }
    .light .muted{ color: var(--ink-2); }
    .light .panel{
      background: var(--light-panel);
      border: 1px solid #dde1e8;
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
    }
    .light a{ color: var(--ink); }
    .light .cta{ border-color:#d4d8e0; background:var(--light-panel); color:var(--ink); }
    .light .cta:hover{ background:#eef1f6; }
    .light .cta.primary{ background: var(--accent); color:#1b2436; border-color: rgba(0,0,0,.08); }
    .light .cta.primary:hover{ background: var(--accent-hover); }

    .sectionHead{
      display:grid;
      grid-template-columns: 1fr;
      gap:10px;
      margin-bottom: 22px;
    }
    .sectionHead h3{
      margin:0;
      font-size:34px;
      line-height:1.15;
      letter-spacing:-.02em;
    }
    .sectionHead p{
      margin:0;
      max-width: 72ch;
      font-size:16px;
      color: rgba(255,255,255,.82);
    }
    .light .sectionHead p{ color: var(--ink-2); }

    /* Page intro band (Approach). This preamble sits directly above a light
       step section, so it carries the navy .dark-section surface to separate
       the two -- no hairline needed, the colour change does that work. It is
       tighter than a full section because it is a preamble, not a step, and
       it must keep a real padding-bottom: with padding-bottom:0 the
       .sectionHead margin collapsed out through .wrap and the section,
       exposing the navy body background as a stripe. */
    .pageIntro{ padding: 72px 0 40px; }
    .pageIntro .sectionHead{ margin-bottom: 0; }

    .cols2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .panel{
      border-radius: var(--radius);
      border: 1px solid var(--border-dark);
      background: var(--surface-dark);
      padding: 20px;
    }

    .bullets{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .bullets li{
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--border-dark);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.86);
    }
    .light .bullets li{
      border-color:#dde1e8;
      background:var(--light-panel);
      color: var(--ink);
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }

    .steps{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 16px;
    }
    .step{
      border-radius: var(--radius);
      border: 1px solid var(--border-dark);
      background: var(--surface-dark);
      padding: 16px 16px 18px;
    }
    .light .step{
      border-color:#dde1e8;
      background:var(--light-panel);
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }
    .step .num{
      width:34px; height:34px;
      border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(237,151,0,.16);
      border:1px solid rgba(237,151,0,.35);
      color: var(--accent);
      font-weight:800;
      margin-bottom: 10px;
    }
    .step h4{
      margin:0 0 6px;
      font-size:16px;
      letter-spacing:-.01em;
    }
    .step p{
      margin:0;
      color: rgba(255,255,255,.78);
      font-size:14px;
    }
    .light .step p{ color: var(--ink-2); }

    .cards{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-top: 16px;
    }
    .card{
      border-radius: var(--radius);
      border: 1px solid var(--border-dark);
      background: var(--surface-dark);
      padding: 18px 18px 20px;
    }
    .light .card{ border-color:#dde1e8; background:var(--light-panel); box-shadow: 0 1px 4px rgba(0,0,0,.04); }
    .card h4{ margin:0 0 8px; font-size:16px; }
    .card p{ margin:0; color: rgba(255,255,255,.78); font-size:14px; line-height:1.6; }
    .light .card p{ color: var(--ink-2); }

    .timeline{
      display:grid;
      gap: 10px;
      margin-top: 14px;
    }
    .titem{
      display:grid;
      grid-template-columns: 44px 1fr;
      gap: 12px;
      align-items:flex-start;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid var(--border-dark);
      background: var(--surface-dark);
    }
    .titem .tbadge{
      width:44px; height:44px;
      border-radius: 16px;
      display:flex; align-items:center; justify-content:center;
      font-weight:900;
      color:#1b2436;
      background: rgba(237,151,0,.95);
    }
    .titem h4{ margin:0 0 4px; font-size:15px; }
    .titem p{ margin:0; color: rgba(255,255,255,.78); font-size:14px; line-height:1.6; }

    /* Closing */
    .closing{
      background: linear-gradient(135deg, rgba(237,151,0,1), rgba(237,151,0,.70));
      color: #1b2436;
      position:relative;
      overflow:hidden;
    }
    .closing .wrap{ position:relative; }
    .closing h3{ margin:0 0 10px; font-size:38px; letter-spacing:-.02em; }
    .closing p{ margin:0 0 18px; font-size:16px; color: rgba(27,36,54,.86); max-width: 72ch; }
    .closing .cta{
      background: #ffffff;
      border-color: rgba(0,0,0,.06);
      color: #1b2436;
    }
    .closing .cta:hover{ background: rgba(255,255,255,.92); transform: translateY(-1px); }

    footer{
      padding: 26px 0 36px;
      border-top: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.70);
    }
    footer .frow{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
    }
    footer small{ font-size:12px; }

    /* Language */
    [data-lang="nl"] .en{ display:none; }
    [data-lang="en"] .nl{ display:none; }

    /* Back to top button */
    .backToTop{
      position:fixed;
      bottom:28px;
      right:28px;
      z-index:40;
      width:48px; height:48px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(33,42,61,.96);
      color:var(--white);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      opacity:0;
      pointer-events:none;
      transition: opacity .25s ease, transform .15s ease;
      box-shadow: 0 8px 24px rgba(0,0,0,.3);
    }
    .backToTop.visible{ opacity:1; pointer-events:auto; }
    .backToTop:hover{ transform: translateY(-2px); background: rgba(237,151,0,.9); border-color: rgba(237,151,0,.5); }
    .backToTop svg{ width:22px; height:22px; fill:currentColor; }

    /* Demo slideshow */
    .slideshow{
      position:relative;
      border-radius: var(--radius) var(--radius) 0 0;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.14);
      border-bottom:0;
      background: rgba(255,255,255,.04);
      box-shadow: var(--shadow);
    }
    .slideshow-track{
      display:flex;
      /* not the default stretch: stretching the images to the flex line
         height made each box taller than its own 16:9 ratio, which is
         what produced the dark letterbox bars above and below */
      align-items:flex-start;
      transition: transform .4s ease;
    }
    .slideshow-track img{
      width:100%;
      height:auto;
      flex:0 0 100%;
      display:block;
    }
    .slideshow-controls{
      position:absolute;
      bottom:0;
      left:0; right:0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 16px;
      background: linear-gradient(transparent, rgba(0,0,0,.6));
    }
    .slideshow-btn{
      width:36px; height:36px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.3);
      background: rgba(33,42,61,.72);
      color:#fff;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      transition: background .15s;
    }
    .slideshow-btn:hover{ background: rgba(255,255,255,.25); }
    .slideshow-btn svg{ width:18px; height:18px; fill:currentColor; }
    .slideshow-dots{
      display:flex; gap:8px;
    }
    .slideshow-dot{
      width:10px; height:10px;
      border-radius:50%;
      background: rgba(255,255,255,.35);
      border:1px solid rgba(255,255,255,.2);
      cursor:pointer;
      transition: background .2s;
    }
    .slideshow-dot.active{
      background: var(--accent);
      border-color: var(--accent);
    }
    .slideshow-caption{
      display:flex;
      align-items:center;
      justify-content:center;
      /* two lines' worth, so the frame height does not jump between
         slides with longer and shorter captions */
      min-height:62px;
      text-align:center;
      padding:12px 18px;
      font-size:13px;
      line-height:1.5;
      color: rgba(255,255,255,.7);
      background: rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.14);
      border-top:1px solid rgba(255,255,255,.08);
      border-radius: 0 0 var(--radius) var(--radius);
    }
    /* The demo section is light, but these were only ever styled for a
       dark background -- the caption was white text on near-white. */
    .light .slideshow{
      border-color:#dde1e8;
      background: var(--light-panel);
      box-shadow: 0 10px 36px rgba(0,0,0,.12);
    }
    .light .slideshow-caption{
      color: var(--ink-2);
      background: var(--light-panel);
      border-color:#dde1e8;
      border-top-color:#e6e9ee;
    }

    /* WP link style */
    .wp-link{
      color: var(--accent);
      text-decoration:underline;
      text-underline-offset:3px;
    }
    .wp-link:hover{ color: var(--accent-hover); }
    .light .wp-link{ color: var(--accent-hover); }

    /* Reality section - four equal problem cards */
    .reality-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .reality-card{
      display:flex;
      flex-direction:column;
      padding: 24px 22px;
      border-radius: var(--radius);
      border: 1px solid #dde1e8;
      border-top: 3px solid var(--accent);
      background: var(--light-panel);
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
      position:relative;
      transition: transform .2s ease, box-shadow .2s ease;
      overflow:hidden;
    }
    .reality-card:hover{
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(0,0,0,.10);
    }
    /* Every card shares one header row: icon on the left, and the hard
       figure on the right for the two cards that have one. Fixed height,
       so the titles and body text line up across all four. */
    .reality-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      min-height:48px;
      margin-bottom:16px;
    }
    .reality-icon{
      width:48px; height:48px;
      flex:0 0 auto;
      border-radius:14px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(237,151,0,.12);
      border:1px solid rgba(237,151,0,.25);
      color: var(--accent-hover);
    }
    /* On the navy sections the darker accent goes muddy. */
    .dark-section .reality-icon{ color: var(--accent); }
    .card > .reality-icon{ margin-bottom:14px; }
    .reality-card h4{
      margin:0 0 10px;
      font-size:16px;
      color: var(--ink);
      letter-spacing:-.01em;
    }
    .reality-card p{
      margin:0;
      font-size:13.5px;
      line-height:1.65;
    }

    .reality-callout{
      display:flex;
      gap:0;
      margin-top:20px;
      border-radius: var(--radius);
      overflow:hidden;
      border: 1px solid rgba(237,151,0,.3);
      background: linear-gradient(135deg, rgba(237,151,0,.10), rgba(237,151,0,.03));
      position:relative;
    }
    .reality-callout-bar{
      width:5px;
      flex:0 0 5px;
      background: var(--accent);
    }
    .reality-callout-content{
      padding: 22px 24px;
    }

    /* Designed For cards - dynamic layout */
    .designed-for-grid{
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 16px;
    }
    .df-card{
      padding: 28px 24px;
      border-radius: var(--radius);
      border: 1px solid var(--border-dark);
      background: var(--surface-dark);
      transition: transform .2s ease, border-color .2s ease;
      position:relative;
      overflow:hidden;
    }
    .df-card:hover{
      transform: translateY(-3px);
      border-color: rgba(237,151,0,.35);
    }
    .df-card.df-hero{
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      background: linear-gradient(145deg, rgba(237,151,0,.15), rgba(237,151,0,.04));
      border-color: rgba(237,151,0,.30);
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .df-card.df-hero .df-icon{
      width:64px; height:64px;
      border-radius:20px;
    }
    .df-card.df-hero h4{ font-size:20px; }
    .df-card.df-hero p{ font-size:15px; }
    .df-icon{
      width:52px; height:52px;
      border-radius:16px;
      display:flex; align-items:center; justify-content:center;
      background: linear-gradient(135deg, rgba(237,151,0,.18), rgba(237,151,0,.06));
      border:1px solid rgba(237,151,0,.28);
      color: var(--accent);
      margin-bottom:16px;
    }
    .df-card h4{
      margin:0 0 8px;
      font-size:16px;
    }
    .df-card p{
      margin:0;
      color: rgba(255,255,255,.78);
      font-size:14px;
      line-height:1.6;
    }
    .df-bottom-banner{
      margin-top:20px;
      padding: 28px 32px;
      border-radius: var(--radius);
      border: 1px solid var(--border-dark);
      background: var(--surface-dark);
      text-align:center;
      position:relative;
      overflow:hidden;
    }
    .df-bottom-banner p{
      position:relative;
      margin:0;
      color: rgba(255,255,255,.86);
      font-size:15px;
    }

    /* Responsive */
    @media (max-width: 980px){
      .heroInner{ grid-template-columns: 1fr; }
      h2{ font-size: 44px; }
      .cols2{ grid-template-columns: 1fr; }
      .steps{ grid-template-columns: 1fr; }
      .cards{ grid-template-columns: 1fr; }
      .designed-for-grid{ grid-template-columns: 1fr; }
      .df-card.df-hero{ grid-column: span 1; grid-row: span 1; }
      .df-card[style*="grid-column"]{ grid-column: span 1 !important; }
      section{ padding: 68px 0; }
      .pageIntro{ padding: 54px 0 32px; }
    }
    @media (max-width: 520px){
      h2{ font-size: 38px; }
      .brand{ min-width: auto; }
      .navlinks{ gap: 8px; }
      .cta{ padding: 10px 12px; }
    }

    /* ============================================================
       Multi-page additions
       ============================================================ */
    :root{ --headerH: 68px; }

    /* Kicker - light-section variant */
    .light .kicker{ color: var(--ink-2); }

    /* Nav: active page state */
    .navlinks a.active{
      color: var(--white);
      background: rgba(255,255,255,.10);
      border-radius: 999px;
    }

    /* ---------- Journey sub-nav (Approach page) ---------- */
    .journey{
      position: sticky;
      top: var(--headerH);
      z-index: 40;
      background: var(--light-bg);
      border-bottom: 1px solid #dde1e8;
    }
    .journeyInner{
      display:flex;
      align-items:center;
      gap:8px;
      padding:12px 0;
      overflow-x:auto;
      scrollbar-width:none;
    }
    .journeyInner::-webkit-scrollbar{ display:none; }
    .jstep{
      display:inline-flex;
      align-items:center;
      gap:8px;
      flex:0 0 auto;
      font-size:13px;
      font-weight:600;
      color: var(--ink-2);
      background: var(--light-panel);
      border:1px solid #dde1e8;
      padding:9px 14px;
      border-radius:999px;
      transition: background .18s ease, color .18s ease, border-color .18s ease;
    }
    .jstep:hover{ background:#e7ebf2; }
    .jstep.active{
      background: var(--accent);
      border-color: rgba(0,0,0,.08);
      color:#1b2436;
    }
    .jstep .jnum{
      font-size:11px;
      font-weight:800;
      opacity:.6;
    }
    .jsep{
      flex:0 0 auto;
      color:#aeb6c4;
      font-size:14px;
    }

    /* ---------- Grid variants ---------- */
    .steps.four{ grid-template-columns: repeat(4, 1fr); }
    .steps.layers{ grid-template-columns: repeat(4, 1fr); }

    /* Layer cards: the analytical pair (L7 / L8) */
    .step.analytic{
      border-color: rgba(237,151,0,.42);
      background: rgba(237,151,0,.07);
    }
    .light .step.analytic{
      border-color: rgba(237,151,0,.55);
      background: #fffaf1;
    }
    .step .lnum{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:34px; height:34px;
      padding:0 8px;
      border-radius:12px;
      background: rgba(237,151,0,.16);
      border:1px solid rgba(237,151,0,.35);
      color: var(--accent);
      font-weight:800;
      font-size:13px;
      letter-spacing:.04em;
      margin-bottom:10px;
    }
    .light .step .lnum{ color: var(--accent-hover); }

    /* Layer legend */
    .legend{
      margin-top:16px;
      font-size:13px;
      color: rgba(255,255,255,.70);
    }
    .light .legend{ color: var(--ink-2); }

    /* ---------- Layer tags (L1 · L2 · L3) ---------- */
    .ltags{
      display:inline-flex;
      gap:6px;
      flex-wrap:wrap;
      margin-left:8px;
      vertical-align:middle;
    }
    .ltag{
      font-size:11px;
      font-weight:800;
      letter-spacing:.04em;
      padding:3px 7px;
      border-radius:999px;
      background: rgba(237,151,0,.14);
      border:1px solid rgba(237,151,0,.32);
      color: var(--accent);
    }
    .light .ltag{ color: var(--accent-hover); background: rgba(237,151,0,.10); }

    /* ---------- Week cards (Proof of concept) ----------
       A fixed vertical rhythm so all four cards line up row for row:
       week label, layer tags, title, body text. */
    .step.week{ display:flex; flex-direction:column; }
    .week .weekLabel{ display:block; margin:0 0 10px; }
    .week .ltags{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      margin:0 0 12px;
      /* reserved even on week 1, which has no layers, so the
         title blocks below still start on the same line. */
      min-height:25px;
    }
    .week .weekTitle{
      margin:0 0 12px;
      display:flex;
      align-items:flex-start;
      /* held so the body copy below still starts on the same line
         across all four cards, whether the title wraps or not. */
      min-height:42px;
      color: var(--white);
      font-size:15px;
      font-weight:800;
      line-height:1.3;
      letter-spacing:-.01em;
    }
    .light .week .weekTitle{ color: var(--ink); }
    .week p{ margin:0; }

    /* Responsibility band under the week cards */
    .pocRole{ margin-top:14px; }
    .pocRole h4{ margin:0 0 6px; font-size:19px; }
    .pocRole p{ margin:0; font-size:14.5px; color: rgba(255,255,255,.82); }
    .light .pocRole p{ color: var(--ink-2); }

    .weekLabel{
      font-size:12px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
      color: var(--accent);
    }
    .light .weekLabel{ color: var(--accent-hover); }

    /* ---------- Proof of concept layout ---------- */

    /* ---------- Rollout ladder ---------- */
    .ladder{
      display:grid;
      gap:12px;
      margin-top:18px;
    }
    .rung{
      display:grid;
      grid-template-columns: 46px 1fr;
      gap:14px;
      align-items:center;
      padding:16px 18px;
      border-radius:16px;
      border:1px solid var(--border-dark);
      background: var(--surface-dark);
      position:relative;
      overflow:hidden;
    }
    .light .rung{
      border-color:#dde1e8;
      background: var(--light-panel);
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }
    .rung::after{
      content:"";
      position:absolute;
      left:0; bottom:0;
      height:3px;
      background: linear-gradient(90deg, var(--accent), rgba(237,151,0,.35));
      width: var(--fill, 25%);
    }
    .rung .rnum{
      width:46px; height:46px;
      border-radius:14px;
      display:flex; align-items:center; justify-content:center;
      font-weight:900;
      color:#1b2436;
      background: rgba(237,151,0,.95);
    }
    .rung h4{ margin:0 0 3px; font-size:16px; }
    .rung p{ margin:0; font-size:14px; color: rgba(255,255,255,.78); }
    .light .rung p{ color: var(--ink-2); }

    /* ---------- Timeline light variant (Onboarding) ---------- */
    .light .titem{
      border-color:#dde1e8;
      background: var(--light-panel);
      box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }
    .light .titem p{ color: var(--ink-2); }

    /* ---------- Home page chapter cards ---------- */
    .chapters{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:16px;
      margin-top:18px;
    }
    .chapter{
      display:block;
      padding:26px 24px;
      border-radius: var(--radius);
      border:1px solid var(--border-dark);
      background: var(--surface-dark);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .light .chapter{
      border-color:#dde1e8;
      background: var(--light-panel);
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
    }
    .chapter:hover{
      transform: translateY(-3px);
      border-color: rgba(237,151,0,.45);
      box-shadow: 0 10px 30px rgba(0,0,0,.12);
    }
    .chapter h4{
      margin:0 0 8px;
      font-size:19px;
      letter-spacing:-.01em;
    }
    .chapter p{
      margin:0 0 14px;
      font-size:14.5px;
      color: rgba(255,255,255,.78);
    }
    .light .chapter p{ color: var(--ink-2); }
    .chapter .more{
      font-size:13px;
      font-weight:700;
      color: var(--accent);
      letter-spacing:.02em;
    }
    .light .chapter .more{ color: var(--accent-hover); }

    /* ---------- Two-column blocks: keep both columns flush ----------
       .steps and .timeline carry a margin-top for when they follow a
       section heading; side by side with another box that offset makes
       the tops disagree. */
    .cols2 > * > .steps:first-child,
    .cols2 > .timeline:first-child,
    .cols2 > * > .timeline:first-child{ margin-top:0; }

    /* Share the row height so the bottoms agree too. */
    .cols2 .timeline.even{ grid-auto-rows: 1fr; }
    .colStack{ display:flex; flex-direction:column; gap:16px; }
    .colStack > :last-child{ margin-top:auto; }

    /* ---------- Anchor offsets for the sticky header ---------- */
    section[id]{ scroll-margin-top: calc(var(--headerH) + 12px); }
    /* Approach page sits under the header AND the journey bar */
    .hasJourney section[id]{ scroll-margin-top: calc(var(--headerH) + 74px); }

    /* ---------- Dark panel inside a light section ---------- */
    .darkPanel{
      position:relative;
      overflow:hidden;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, #24314a 0%, #29354c 100%);
      color: var(--white);
      padding:26px 24px;
    }
    .darkPanel h4{ color: var(--white); }

    /* ---------- Nested dark panel inside a light section ----------
       Restores the dark treatment for components that would otherwise
       inherit the .light variants from the surrounding section. */
    .light .darkPanel .muted,
    .light .dark-section .muted{ color: rgba(255,255,255,.80); }
    .light .darkPanel .bullets li,
    .light .dark-section .bullets li{
      border-color: rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.86);
      box-shadow: none;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 1080px){
      .steps.four, .steps.layers{ grid-template-columns: repeat(2, 1fr); }
      .reality-grid{ grid-template-columns: repeat(2, 1fr); }
      .chapters{ grid-template-columns: 1fr; }
    }
    @media (max-width: 720px){
      .steps.four, .steps.layers{ grid-template-columns: 1fr; }
    }
    @media (max-width: 620px){
      .reality-grid{ grid-template-columns: 1fr; }
    }