:root{
        color-scheme:light;
        --navy:#020624;
        --blue:#07145f;
        --ink:#101827;
        --muted:#536173;
        --soft:#eef3f8;
        --paper:#ffffff;
        --line:#cbd5e1;
        --gold:#d9a441;
        --teal:#2f8f83;
        --cyan:#67e8f9;
      }
      *{box-sizing:border-box}
      html{scroll-behavior:smooth}
      body{
        margin:0;
        min-height:100dvh;
        overflow-x:hidden;
        background:linear-gradient(180deg,#f2f6fb 0,#edf2f8 52%,#f8fafc 100%);
        color:var(--ink);
        font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      }
      a{color:inherit}
      .skip{
        position:absolute;
        left:16px;
        top:-80px;
        z-index:20;
        min-height:44px;
        display:inline-flex;
        align-items:center;
        border-radius:8px;
        background:#fff;
        color:var(--blue);
        padding:10px 12px;
        font-weight:900;
        text-decoration:none;
      }
      .skip:focus{top:14px}
      .hero{
        position:relative;
        isolation:isolate;
        min-height:58dvh;
        overflow:hidden;
        background:
          linear-gradient(90deg,rgba(2,6,36,.98) 0%,rgba(2,6,36,.90) 48%,rgba(7,20,95,.62) 100%),
          linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
          linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),
          var(--navy);
        background-size:auto,36px 36px,36px 36px,auto;
        color:#fff;
      }
      .hero::after{
        content:"";
        position:absolute;
        inset:auto -8% -32% 42%;
        z-index:-1;
        height:56%;
        background:radial-gradient(ellipse at center,rgba(103,232,249,.18),rgba(103,232,249,0) 62%);
        pointer-events:none;
      }
      .topbar{
        width:min(1180px,calc(100% - 40px));
        margin:0 auto;
        min-height:74px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:18px;
      }
      .brand{
        min-height:44px;
        display:inline-flex;
        align-items:center;
        gap:11px;
        color:#fff;
        text-decoration:none;
        font-weight:950;
      }
      .mark{
        width:42px;
        height:42px;
        display:grid;
        place-items:center;
        border:1px solid rgba(255,255,255,.18);
        border-radius:9px;
        background:var(--blue);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
      }
      .mark svg{width:30px;height:30px}
      .top-links{display:flex;align-items:center;gap:6px}
      .top-links a{
        min-height:44px;
        display:inline-flex;
        align-items:center;
        border-radius:8px;
        padding:10px 11px;
        color:#d7e3f3;
        text-decoration:none;
        font-weight:850;
      }
      .top-links a:hover,.top-links a:focus-visible{background:rgba(255,255,255,.09);color:#fff;outline:none}
      .hero-inner{
        width:min(1180px,calc(100% - 40px));
        margin:0 auto;
        padding:42px 0 64px;
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(310px,.38fr);
        gap:36px;
        align-items:end;
      }
      .hero-copy{display:grid;gap:18px}
      .eyebrow{
        color:var(--gold);
        font-size:12px;
        font-weight:950;
        letter-spacing:.12em;
        text-transform:uppercase;
      }
      h1,h2,h3,p{margin:0}
      h1{
        max-width:860px;
        font-size:clamp(56px,8vw,116px);
        line-height:.88;
        letter-spacing:0;
        overflow-wrap:anywhere;
      }
      .lead{
        max-width:780px;
        color:#dbe8f8;
        font-size:clamp(18px,2.1vw,25px);
        line-height:1.38;
      }
      .actions{display:flex;flex-wrap:wrap;gap:10px}
      .button{
        min-height:46px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(255,255,255,.2);
        border-radius:8px;
        padding:12px 16px;
        background:#fff;
        color:var(--blue);
        text-decoration:none;
        text-align:center;
        font-weight:950;
      }
      .button.secondary{background:rgba(255,255,255,.08);color:#fff}
      .button.gold{background:transparent;color:var(--gold);border-color:rgba(217,164,65,.58)}
      .quick-map{
        display:grid;
        gap:12px;
        padding-left:18px;
        border-left:1px solid rgba(255,255,255,.22);
      }
      .quick-map b{color:#fff;font-size:18px}
      .quick-map a{
        min-height:42px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        border-bottom:1px solid rgba(255,255,255,.12);
        color:#dbe8f8;
        text-decoration:none;
        font-weight:850;
      }
      .quick-map a:last-child{border-bottom:0}
      .quick-map span{color:var(--cyan);font-size:18px;line-height:1}
      main{background:transparent}
      .section{
        width:min(1180px,calc(100% - 40px));
        margin:0 auto;
        padding:34px 0 0;
        display:grid;
        gap:18px;
      }
      .section-head{
        display:flex;
        align-items:end;
        justify-content:space-between;
        gap:22px;
      }
      h2{
        color:var(--blue);
        font-size:clamp(28px,3.8vw,48px);
        line-height:1.02;
        letter-spacing:0;
      }
      .section-head p{max-width:610px;color:var(--muted);line-height:1.55}
      .role-grid{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:14px;
      }
      .role{
        min-width:0;
        min-height:214px;
        display:grid;
        align-content:space-between;
        gap:18px;
        border:1px solid var(--line);
        border-radius:8px;
        background:var(--paper);
        padding:18px;
        box-shadow:0 16px 38px rgba(15,23,42,.08);
        text-decoration:none;
      }
      .role small{
        color:#7a5714;
        font-size:12px;
        font-weight:950;
        letter-spacing:.08em;
        text-transform:uppercase;
      }
      .role b{display:block;margin:8px 0 7px;color:var(--ink);font-size:22px;line-height:1.1}
      .role p{color:var(--muted);line-height:1.5}
      .role span{color:var(--blue);font-weight:950}
      .route{
        display:grid;
        grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
        gap:16px;
        align-items:stretch;
      }
      .route-copy,.route-list,.note{
        border:1px solid var(--line);
        border-radius:8px;
        background:var(--paper);
        box-shadow:0 16px 38px rgba(15,23,42,.07);
      }
      .route-copy{padding:22px;display:grid;align-content:start;gap:12px}
      .route-copy h3{color:var(--blue);font-size:28px;line-height:1.08}
      .route-copy p,.note p{color:var(--muted);line-height:1.58}
      .route-list{padding:6px}
      .step{
        display:grid;
        grid-template-columns:44px 1fr;
        gap:12px;
        padding:14px;
        border-bottom:1px solid #e3e9f2;
      }
      .step:last-child{border-bottom:0}
      .num{
        width:34px;
        height:34px;
        display:grid;
        place-items:center;
        border-radius:8px;
        background:#ecfdf8;
        color:#14675f;
        font-weight:950;
      }
      .step b{display:block;color:var(--ink);margin-bottom:4px}
      .step p{color:var(--muted);line-height:1.48}
      .module-grid{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:12px;
      }
      .module{
        min-width:0;
        display:grid;
        gap:8px;
        border-top:4px solid var(--blue);
        border-radius:8px;
        background:#fff;
        padding:16px;
        box-shadow:0 10px 28px rgba(15,23,42,.06);
      }
      .module:nth-child(2n){border-top-color:var(--teal)}
      .module:nth-child(3n){border-top-color:var(--gold)}
      .module b{color:var(--ink);font-size:18px}
      .module p{color:var(--muted);line-height:1.48}
      .note{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        gap:18px;
        align-items:center;
        padding:20px;
        margin-bottom:34px;
      }
      .note b{display:block;color:var(--blue);font-size:22px;margin-bottom:6px}
      .note .button{border-color:var(--blue);background:var(--blue);color:#fff}
      footer{
        width:min(1180px,calc(100% - 40px));
        margin:0 auto;
        padding:22px 0 28px;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        border-top:1px solid var(--line);
        color:#657386;
        font-size:14px;
      }
      footer nav{display:flex;flex-wrap:wrap;gap:12px}
      footer a{color:#657386;text-decoration:none;font-weight:800}
      @media(max-width:980px){
        .top-links{display:none}
        .hero-inner{grid-template-columns:1fr;align-items:start;padding:30px 0 46px}
        .quick-map{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:14px}
        .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
        .route{grid-template-columns:1fr}
        .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      }
      @media(max-width:640px){
        .topbar,.hero-inner,.section,footer{width:min(100% - 28px,1180px)}
        .hero{min-height:0}
        .hero-inner{gap:22px;padding:24px 0 34px}
        h1{font-size:clamp(44px,16vw,68px)}
        .actions{display:grid}
        .button{width:100%}
        .section{padding-top:24px}
        .section-head{display:grid}
        .role-grid,.module-grid{grid-template-columns:1fr}
        .role{min-height:0}
        .note{grid-template-columns:1fr}
      }
      @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}