/* ── Custom properties ───────────────────────────────────────────── */
    :root{
      --bg:#e9f3ef;
      --ink:#0b2628;
      --muted:#4c6265;
      --panel:#ffffff;
      --line:#d2e4de;
      --teal:#0d7268;
      --slate:#0b2f32;
      --soft:#f3f8f6;
      /* Layered shadows */
      --sh0:0 1px 3px rgba(5,38,36,.06);
      --sh1:0 2px 8px rgba(5,38,36,.06),0 8px 28px rgba(5,38,36,.08);
      --sh2:0 4px 16px rgba(5,38,36,.09),0 20px 52px rgba(5,38,36,.10);
      --sh3:0 12px 40px rgba(5,38,36,.13),0 40px 80px rgba(5,38,36,.11);
      --r:13px;
      --r-sm:9px;
      --r-lg:20px;
    }

    /* ── Reset ───────────────────────────────────────────────────────── */
    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{
      margin:0;
      background:
        radial-gradient(ellipse 120% 70% at 0% 110%,rgba(13,114,104,.08) 0%,transparent 55%),
        linear-gradient(175deg,#dff0ea 0%,#e9f3ef 40%,#f3f8f6 100%);
      background-attachment:fixed;
      color:var(--ink);
      font-family:'Inter',system-ui,-apple-system,sans-serif;
      font-size:15px;
      line-height:1.72;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{color:inherit;}
    :focus-visible{outline:3px solid #f0b44c;outline-offset:3px;}
    .skip-link{position:absolute;left:-999px;top:12px;background:#fff;color:#111;padding:10px 14px;border-radius:8px;z-index:20;}
    .skip-link:focus{left:12px;}

    /* ── Header / Hero ───────────────────────────────────────────────── */
    header{
      position:relative;overflow:hidden;
      background:linear-gradient(145deg,#051c1e 0%,#0a3436 38%,#104c50 70%,#082e30 100%);
    }
    header::before{
      content:"";
      position:absolute;inset:0;
      background:
        radial-gradient(ellipse 65% 90% at 85% 55%,rgba(20,168,148,.20) 0%,transparent 65%),
        radial-gradient(ellipse 45% 55% at 12% 18%,rgba(255,255,255,.06) 0%,transparent 60%);
      pointer-events:none;
    }
    /* Subtle diagonal line pattern */
    header::after{
      content:"";
      position:absolute;inset:0;
      background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 0,transparent 50%);
      background-size:24px 24px;
      pointer-events:none;
    }
    .hero{
      position:relative;z-index:1;
      max-width:1180px;margin:0 auto;
      display:grid;grid-template-columns:1.1fr .9fr;
      gap:44px;align-items:center;
      padding:68px 24px 56px;
      min-height:650px;
    }
    .eyebrow{
      display:inline-flex;align-items:center;gap:10px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.20);
      color:rgba(200,255,232,.9);
      padding:7px 15px;border-radius:999px;
      font-size:10.5px;font-weight:700;
      letter-spacing:.11em;text-transform:uppercase;
    }
    .eyebrow::before{
      content:"";
      flex-shrink:0;
      width:7px;height:7px;border-radius:50%;
      background:#1cce96;
      box-shadow:0 0 10px #1cce96,0 0 24px rgba(28,206,150,.5);
    }
    h1{
      font-family:Georgia,'Times New Roman',serif;
      font-size:clamp(40px,6.2vw,76px);
      line-height:.96;margin:22px 0 20px;
      color:#fff;letter-spacing:-.4px;
    }
    .hero p.lead{
      color:rgba(208,238,230,.88);
      font-size:16.5px;line-height:1.68;
      max-width:680px;margin:0 0 30px;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;}
    .button{
      display:inline-flex;align-items:center;gap:8px;
      border-radius:999px;
      border:1.5px solid rgba(255,255,255,.28);
      padding:11px 22px;
      color:rgba(255,255,255,.92);
      text-decoration:none;
      font-weight:600;font-size:13px;letter-spacing:.01em;
      background:rgba(255,255,255,.09);
      backdrop-filter:blur(6px);
      transition:background .2s ease,border-color .2s ease;
    }
    .button:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.50);}
    .button.primary{
      background:#ffffff;color:#0a3234;
      border-color:#fff;
      box-shadow:0 4px 28px rgba(0,0,0,.22),0 1px 4px rgba(0,0,0,.12);
    }
    .button.primary:hover{background:#e6f5f1;border-color:#e6f5f1;}

    /* Hero visual panel */
    .visual{
      background:rgba(255,255,255,.84);
      border:1px solid rgba(255,255,255,.62);
      border-radius:var(--r-lg);
      padding:20px;
      box-shadow:0 40px 100px rgba(0,0,0,.26),0 8px 24px rgba(0,0,0,.14);
      backdrop-filter:blur(10px);
    }
    .visual img{
      display:block;width:100%;height:auto;
      border-radius:var(--r-sm);
      border:1px solid rgba(14,76,76,.10);
      background:#e8f4f0;
    }
    .visual-caption{
      display:grid;grid-template-columns:repeat(3,1fr);
      gap:10px;margin-top:14px;
    }
    .vcap{
      background:var(--soft);
      border:1px solid var(--line);
      border-radius:var(--r-sm);
      padding:12px 8px;text-align:center;
    }
    .vcap b{
      display:block;color:var(--teal);
      font-size:17px;font-family:Georgia,'Times New Roman',serif;
      font-weight:700;
    }
    .vcap span{
      display:block;color:var(--muted);
      font-size:9.5px;text-transform:uppercase;
      letter-spacing:.08em;font-weight:700;margin-top:3px;
    }

    /* ── Table of contents nav ───────────────────────────────────────── */
    nav.toc{
      position:sticky;top:0;z-index:10;
      background:rgba(233,243,239,.97);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      border-bottom:1px solid var(--line);
      box-shadow:0 1px 0 rgba(255,255,255,.85),0 4px 22px rgba(8,46,44,.08);
    }
    .toc-inner{
      max-width:1180px;margin:0 auto;
      padding:10px 24px;
      display:flex;gap:6px;overflow-x:auto;
      scrollbar-width:none;
    }
    .toc-inner::-webkit-scrollbar{display:none;}
    .toc a{
      white-space:nowrap;text-decoration:none;
      color:#3a5a5c;
      background:#fff;
      border:1px solid var(--line);
      border-radius:999px;
      padding:7px 14px;
      font-size:11.5px;font-weight:600;
      letter-spacing:.01em;
      transition:all .18s ease;
      box-shadow:var(--sh0);
    }
    .toc a:hover{background:#dff0ea;border-color:#b4d4cc;color:var(--slate);}
    .toc a[aria-current="true"]{
      background:var(--slate);border-color:var(--slate);color:#fff;
      box-shadow:0 2px 14px rgba(8,46,44,.28);
    }

    /* Reading-progress bar */
    .reading-progress{position:absolute;inset:auto 0 0;height:2px;background:transparent;overflow:hidden;}
    .reading-progress span{
      display:block;width:100%;height:100%;
      background:linear-gradient(90deg,var(--teal) 0%,#22c592 50%,#f0a832 100%);
      transform:scaleX(0);transform-origin:left;
    }

    /* ── Main layout ─────────────────────────────────────────────────── */
    main{max-width:1180px;margin:0 auto;padding:44px 24px 88px;}
    section{
      --section-accent:var(--teal);
      scroll-margin-top:80px;
      margin:0;padding:58px 0;
      border-top:1px solid var(--line);
    }
    section:first-child{padding-top:22px;border-top:0;}

    /* Section accent colours */
    #overview{--section-accent:#0c7368;}
    #hydrogen{--section-accent:#1068a0;}
    #powertrain{--section-accent:#5040a0;}
    #battery{--section-accent:#127596;}
    #components{--section-accent:#7e3492;}
    #depollution{--section-accent:#168a56;}
    #certifications{--section-accent:#9c601a;}
    #economic{--section-accent:#8a4c38;}
    #company{--section-accent:#386070;}
    #conclusion{--section-accent:#0a6b5e;}
    #references{--section-accent:#435f6a;}

    /* ── Section head ────────────────────────────────────────────────── */
    .section-head{
      display:grid;grid-template-columns:auto 1fr;
      gap:18px;align-items:start;
      margin-bottom:32px;
      position:relative;padding-bottom:20px;
    }
    .section-head::after{
      content:"";
      position:absolute;left:66px;right:0;bottom:0;
      height:1px;
      background:linear-gradient(90deg,
        color-mix(in srgb,var(--section-accent) 55%,transparent),
        transparent 78%
      );
    }
    .section-kicker{
      display:block;margin:0 0 5px;
      color:var(--section-accent);
      font-size:10.5px;font-weight:800;
      text-transform:uppercase;letter-spacing:.14em;
    }
    .num{
      width:48px;height:48px;border-radius:10px;
      background:linear-gradient(150deg,
        var(--section-accent),
        color-mix(in srgb,var(--section-accent) 78%,#000)
      );
      color:#fff;
      display:flex;align-items:center;justify-content:center;
      font-weight:900;
      font-family:Georgia,'Times New Roman',serif;
      font-size:20px;
      box-shadow:4px 5px 0 color-mix(in srgb,var(--section-accent) 24%,transparent),
                 var(--sh1);
    }
    h2{
      font-family:Georgia,'Times New Roman',serif;
      font-size:clamp(26px,3.5vw,42px);
      line-height:1.1;margin:0;
      color:#0a2e30;letter-spacing:-.15px;
    }
    .section-head p{
      margin:8px 0 0;color:var(--muted);
      max-width:820px;font-size:14.5px;line-height:1.62;
    }

    /* ── Grid ────────────────────────────────────────────────────────── */
    .grid{
      display:grid;grid-template-columns:repeat(12,1fr);
      gap:18px;margin-bottom:18px;
    }
    .grid>*{min-width:0;}
    .span-3{grid-column:span 3;}
    .span-4{grid-column:span 4;}
    .span-5{grid-column:span 5;}
    .span-6{grid-column:span 6;}
    .span-7{grid-column:span 7;}
    .span-8{grid-column:span 8;}
    .span-12{grid-column:span 12;}

    /* ── Cards ───────────────────────────────────────────────────────── */
    .card{
      position:relative;
      background:var(--panel);
      border:1px solid var(--line);
      border-top:3px solid color-mix(in srgb,var(--section-accent) 68%,var(--line));
      border-radius:var(--r);
      padding:24px;
      box-shadow:var(--sh1);
      transition:transform .22s ease,box-shadow .22s ease;
    }
    .card:hover{
      transform:translateY(-4px);
      box-shadow:var(--sh2);
    }
    h3{
      margin:0 0 11px;
      font-family:Georgia,'Times New Roman',serif;
      font-size:18.5px;line-height:1.22;
      color:#0d3a3c;
    }
    h4{margin:14px 0 8px;color:#194e52;font-size:14.5px;font-weight:700;}
    p{margin:0 0 12px;}
    ul{margin:8px 0 0;padding:0;list-style:none;}
    li{
      position:relative;margin:8px 0;
      padding-left:18px;
      font-size:14px;line-height:1.62;
    }
    li::before{
      content:"";
      position:absolute;left:0;top:.75em;
      width:8px;height:2px;
      background:color-mix(in srgb,var(--section-accent) 75%,currentColor);
      border-radius:1px;
    }
    strong{font-weight:700;}

    /* ── KPI cards ───────────────────────────────────────────────────── */
    .kpi{
      display:grid;gap:5px;
      text-align:center;align-content:center;
      min-height:122px;
      background:linear-gradient(160deg,#fff 0%,#f0f8f5 100%);
    }
    .kpi b{
      font-family:Georgia,'Times New Roman',serif;
      font-size:30px;line-height:1.05;font-weight:900;
      background:linear-gradient(135deg,
        var(--teal) 20%,
        color-mix(in srgb,var(--teal) 62%,#1ce890)
      );
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .kpi span{
      font-size:11.5px;color:var(--muted);
      font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    }
    .kpi small{color:#86a0a2;font-size:11px;font-weight:400;}

    /* ── Badge cards ─────────────────────────────────────────────────── */
    .note{
      background:#fef9ec;
      border-color:#e5c870;
      border-top-color:#b8930e;
    }
    .note::before{
      content:"Note";
      display:inline-block;margin-bottom:12px;
      padding:4px 10px;border-radius:4px;
      font-size:10px;font-weight:800;line-height:1;
      text-transform:uppercase;letter-spacing:.1em;
      background:#f5dfa0;color:#664810;
    }
    .risk{
      background:#fef5f3;
      border-color:#e2aca4;
      border-top-color:#a83028;
    }
    .risk::before{
      content:"Risk";
      display:inline-block;margin-bottom:12px;
      padding:4px 10px;border-radius:4px;
      font-size:10px;font-weight:800;line-height:1;
      text-transform:uppercase;letter-spacing:.1em;
      background:#f5c8c2;color:#7a2620;
    }
    .opportunity{
      background:#f0faf5;
      border-color:#b0d8bc;
      border-top-color:#168a56;
    }
    .opportunity::before{
      content:"Opportunity";
      display:inline-block;margin-bottom:12px;
      padding:4px 10px;border-radius:4px;
      font-size:10px;font-weight:800;line-height:1;
      text-transform:uppercase;letter-spacing:.1em;
      background:#c6e8d0;color:#146040;
    }

    /* ── Dark card ───────────────────────────────────────────────────── */
    .dark{
      background:linear-gradient(148deg,#0c2d30 0%,#102e34 100%);
      color:#e6f8f2;
      border:1px solid #1e4850;
      border-top:3px solid color-mix(in srgb,var(--section-accent) 55%,#fff);
    }
    .dark h3,.dark h4{color:#e8fff8;}
    .dark p,.dark li{color:#c6e4de;}
    .dark li::before{background:rgba(130,210,185,.6);}
    .dark:hover{transform:translateY(-3px);box-shadow:var(--sh2);}

    /* ── Flow diagram ────────────────────────────────────────────────── */
    .flow{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:8px;align-items:stretch;
      margin-top:16px;
    }
    .flow div{
      position:relative;
      border:1px solid color-mix(in srgb,var(--section-accent) 30%,var(--line));
      border-radius:var(--r-sm);
      padding:14px 10px 12px;
      background:linear-gradient(160deg,#fff 0%,#f6faf8 100%);
      text-align:center;
      font-size:12px;font-weight:600;
      color:var(--ink);
    }
    .flow div:not(:last-child)::after{
      content:"";
      position:absolute;right:-8px;top:50%;
      width:8px;height:8px;
      border-top:2px solid color-mix(in srgb,var(--section-accent) 60%,transparent);
      border-right:2px solid color-mix(in srgb,var(--section-accent) 60%,transparent);
      transform:translateY(-50%) rotate(45deg);
      z-index:2;
    }
    .flow span{
      display:block;
      color:var(--teal);
      font-family:Georgia,'Times New Roman',serif;
      font-size:19px;font-weight:700;
      margin-bottom:5px;line-height:1;
    }
    .dark .flow div{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.14);
      color:#ddf5ee;
    }
    .dark .flow div::after{
      border-color:rgba(130,210,185,.5);
    }
    .dark .flow span{color:#4de0b8;}

    /* ── Tables ──────────────────────────────────────────────────────── */
    .table-wrap{
      overflow-x:auto;margin:0 0 18px;
      border:1px solid var(--line);
      border-radius:var(--r);
      background:#fff;
      box-shadow:var(--sh1);
    }
    table{width:100%;border-collapse:collapse;min-width:760px;}
    caption{
      text-align:left;padding:16px 20px 14px;
      font-family:Georgia,'Times New Roman',serif;
      font-size:16.5px;font-weight:800;
      color:#0d3a3c;
      background:linear-gradient(90deg,
        color-mix(in srgb,var(--section-accent) 9%,#fff) 0%,
        #fff 55%
      );
      border-bottom:1px solid var(--line);
      border-left:4px solid var(--section-accent);
    }
    th,td{
      padding:11px 16px;
      text-align:left;
      border-bottom:1px solid #ecf2ef;
      vertical-align:top;
      font-size:13.5px;
    }
    th{
      background:color-mix(in srgb,var(--section-accent) 7%,#f5f9f8);
      color:#2e5a5e;
      font-size:10.5px;font-weight:800;
      text-transform:uppercase;letter-spacing:.08em;
    }
    tbody tr:nth-child(even){background:#f8fbf9;}
    tbody tr:hover{background:color-mix(in srgb,var(--section-accent) 6%,#fff);}
    tr:last-child td{border-bottom:none;}

    /* ── Timeline ────────────────────────────────────────────────────── */
    .timeline{position:relative;padding-left:28px;}
    .timeline::before{
      content:"";
      position:absolute;left:9px;top:8px;bottom:8px;
      width:2px;
      background:linear-gradient(180deg,
        var(--section-accent),
        color-mix(in srgb,var(--section-accent) 25%,transparent)
      );
    }
    .event{position:relative;margin:0 0 18px;padding:0 0 0 14px;}
    .event::before{
      content:"";
      position:absolute;left:-24px;top:5px;
      width:12px;height:12px;border-radius:50%;
      background:var(--section-accent);
      box-shadow:
        0 0 0 4px color-mix(in srgb,var(--section-accent) 18%,#fff),
        0 0 0 8px color-mix(in srgb,var(--section-accent) 7%,#fff);
    }
    .event b{
      display:block;
      color:color-mix(in srgb,var(--section-accent) 90%,#000);
      font-size:12.5px;font-weight:800;
      text-transform:uppercase;letter-spacing:.07em;
    }
    .event span{display:block;color:var(--muted);font-size:13.5px;margin-top:2px;}

    /* ── Source links ────────────────────────────────────────────────── */
    .source-link{
      display:inline;font-weight:700;
      color:#0f6268;
      text-decoration-thickness:1.5px;
      text-underline-offset:3px;
    }
    .source-link:hover{color:var(--teal);}
    .source-meta{
      display:block;margin-top:8px;
      color:var(--muted);font-size:10.5px;
      text-transform:uppercase;letter-spacing:.07em;
    }

    /* ── Footer ──────────────────────────────────────────────────────── */
    footer{
      border-top:1px solid var(--line);
      padding:28px 24px;
      text-align:center;
      color:var(--muted);font-size:12px;
      background:var(--soft);
    }

    /* ── Responsive ──────────────────────────────────────────────────── */
    @media(max-width:860px){
      .hero{grid-template-columns:1fr;min-height:auto;padding-top:46px;}
      .visual-caption{grid-template-columns:1fr 1fr;}
      .span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 12;}
      .flow{grid-template-columns:1fr 1fr;}
      .flow div::after{display:none;}
    }
    @media(max-width:620px){
      main{padding-inline:16px;}
      .hero{padding-inline:16px;}
      .toc-inner{padding-inline:16px;}
      section{padding:40px 0;}
      .section-head{gap:12px;}
      .section-head::after{left:52px;}
      .num{width:40px;height:40px;font-size:17px;}
      .visual-caption{grid-template-columns:1fr;}
      .flow{grid-template-columns:1fr;}
      .flow div::after{display:none;}
      table{min-width:0;}
      thead{display:none;}
      tr{display:block;border-bottom:1px solid var(--line);padding:8px 0;}
      td{display:block;border-bottom:none;padding:7px 14px;}
      td::before{
        content:attr(data-label);
        display:block;color:#5a8082;
        font-weight:800;text-transform:uppercase;
        letter-spacing:.06em;font-size:9.5px;margin-bottom:2px;
      }
    }
    @media(prefers-reduced-motion:reduce){
      html{scroll-behavior:auto;}
      .toc a,.card,.button{transition:none;}
    }