/* DESIGN A · SWISS GRID (ui-ux-pro-max: Swiss Modernism 2.0)
     12 column grid, mathematical 8px spacing, one accent, no decoration.
     Type contrast carries the hierarchy. Mood board palette and type. */
  :root{
    --ink:#0B0A1F; --mid:#1A1450; --surf:#110F2B; --deep:#1C1259;
    --ultra:#7A2CFF; --volt:#5B4BFF; --cobalt:#2F6BFF;
    --ice:#9DBBFF; --body:#E9ECFF; --lav:#D9C8FF; --purp:#B79BFF; --spark:#D4FF4F;
    --display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
    --u:8px;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--ink);color:var(--body);font-family:var(--display);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:var(--ice);text-decoration:none}
  a:hover{color:var(--spark)}
  a:focus-visible{outline:3px solid var(--spark);outline-offset:2px}
  h1,h2,h3{color:#fff;margin:0;font-weight:400;letter-spacing:-.02em;line-height:1.06}
  h1{font-size:clamp(30px,3.4vw,44px)}
  h2{font-size:clamp(26px,3vw,38px)}
  h3{font-size:17px;font-weight:500;letter-spacing:-.01em}
  p{margin:0}
  img{display:block;max-width:100%}
  figure{margin:0}
  .wrap{max-width:1280px;margin:0 auto;padding:0 32px}
  .note{background:var(--surf);color:var(--purp);font-family:var(--mono);font-size:11px;padding:8px 32px}

  /* header: no rule, one line, the CTA sits last as your page list asks */
  header{padding:26px 0 0}
  .nav{display:flex;align-items:center;gap:24px}
  .wordmark{font-family:var(--mono);font-size:17px;letter-spacing:.3em;color:#fff}
  nav.menu{display:flex;gap:26px;margin-left:auto;font-size:15px}
  nav.menu a{color:var(--body);padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap}
  nav.menu a:hover{border-bottom-color:var(--spark);color:#fff}
  .cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 22px;font-size:15px;font-weight:500;background:var(--ultra);color:#fff;white-space:nowrap;transition:background .16s,transform .16s cubic-bezier(.16,1,.3,1)}
  .cta:hover{background:var(--volt);color:#fff}
  .cta:active{transform:translateY(1px)}
  .cap{font-family:var(--mono);font-size:11px;color:var(--purp)}
  .rule{border-top:1px solid var(--mid)}

  /* 12 column grid, everything snaps to it */
  .g12{display:grid;grid-template-columns:repeat(12,1fr);gap:calc(var(--u) * 4)}

  .hero{padding-top:96px}
  .hero .text{grid-column:1 / span 6;align-self:center}
  .hero .pic{grid-column:7 / span 6}
  .hero h1{margin-bottom:calc(var(--u) * 3);max-width:26ch}
  .hero .sub{font-size:18px;color:var(--lav);max-width:34ch;margin-bottom:calc(var(--u) * 5)}
  .shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
  .shot .cap{margin-top:calc(var(--u) * 1.5)}

  section{padding:112px 0 0}
  .stack{max-width:62ch}
  .stack h2{margin-bottom:calc(var(--u) * 2.5)}
  .stack p{font-size:18px;color:var(--lav)}

  .facts{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*4);margin-top:calc(var(--u)*7)}
  .facts div{border-top:2px solid var(--ultra);padding-top:calc(var(--u)*2)}
  .facts h3{margin-bottom:calc(var(--u))}
  .facts p{font-size:15px;color:var(--body)}

  .grid4{grid-column:1 / span 12;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:calc(var(--u)*5);margin-top:calc(var(--u)*8)}
  .grid4 h3{margin-bottom:calc(var(--u)*1.25)}
  .grid4 p{font-size:15px;color:var(--body)}

  .run{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(12,1fr);gap:calc(var(--u)*4);margin-top:0}
  .run .pic{grid-column:1 / span 7}
  .run .list{grid-column:8 / span 5;align-self:center}
  .run .list div{padding:calc(var(--u)*2.5) 0;border-top:1px solid var(--mid)}
  .run .list div:last-child{border-bottom:1px solid var(--mid)}
  .run h3{margin-bottom:calc(var(--u)*.75)}
  .run p{font-size:15px;color:var(--body)}

  .evidence{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(12,1fr);gap:calc(var(--u)*4);margin-top:calc(var(--u)*8)}
  .evidence figure img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;margin-bottom:calc(var(--u)*1.5)}
  .evidence h3{margin-bottom:var(--u)}
  .evidence p{font-size:14px;color:var(--purp)}
  .e1,.e2,.e3{grid-column:span 4}
  .e4,.e5{grid-column:span 6}
  .evidence .e1 img,.evidence .e2 img,.evidence .e3 img{aspect-ratio:16/10}

  .trust{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(12,1fr);gap:calc(var(--u)*4);margin-top:calc(var(--u)*8);align-items:center}
  .trust .num{grid-column:1 / span 4;font-family:var(--mono);font-size:clamp(56px,8vw,110px);line-height:.9;color:#fff}
  .trust .num span{display:block;font-size:11px;letter-spacing:.16em;color:var(--spark);margin-top:calc(var(--u)*2)}
  .trust .txt{grid-column:6 / span 7}
  .trust .txt p{font-size:16px;color:var(--body);max-width:56ch}
  .trust .txt p+p{margin-top:calc(var(--u)*2)}
  .trust .txt h2{margin-bottom:calc(var(--u)*3)}

  .ask{padding:128px 0 120px}
  .ask h2{margin-bottom:calc(var(--u)*3);max-width:18ch}
  .ask p{font-size:18px;color:var(--lav);margin-bottom:calc(var(--u)*4);max-width:52ch}
  .ask .cta{background:var(--spark);color:var(--ink)}
  .ask .cta:hover{opacity:.86;background:var(--spark);color:var(--ink)}

  footer{padding:0 0 64px}
  .foot{display:flex;gap:28px;flex-wrap:wrap;align-items:baseline}
  .foot span{font-family:var(--mono);font-size:12px;color:var(--purp);max-width:52ch}
  .foot nav{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap}
  .foot nav a{font-size:14px;color:var(--purp);white-space:nowrap}

    .motif{display:block;width:56px;height:3px;margin:16px 0 26px;background:linear-gradient(to top,var(--ultra),var(--cobalt))}
  @media (max-width:1080px){
    nav.menu{display:none}
    .hero .text,.hero .pic,.run .pic,.run .list,.trust .num,.trust .txt{grid-column:1 / span 12}
    .hero .pic{margin-top:calc(var(--u)*6)}
    .facts,.grid4{grid-template-columns:1fr 1fr}
    .run .list{margin-top:calc(var(--u)*5)}
    .evidence .e1,.evidence .e2,.evidence .e3,.evidence .e4,.evidence .e5{grid-column:span 6}
    .trust .num{margin-bottom:calc(var(--u)*4)}
    section{padding:72px 0 0}
    .hero{padding-top:64px}
    .ask{padding:80px 0 72px}
  }
  @media (max-width:640px){
    .facts,.grid4{grid-template-columns:1fr}
    .evidence .e1,.evidence .e2,.evidence .e3,.evidence .e4,.evidence .e5{grid-column:span 12}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

  /* responsive and accessibility layer */
  html{scroll-padding-top:84px}
  .skip{position:absolute;left:-9999px;top:0;z-index:30;background:var(--spark);color:var(--ink);padding:12px 18px;font-family:var(--mono);font-size:13px}
  .skip:focus{left:12px;top:12px}
  .sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .navtoggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;margin-left:auto;background:transparent;border:1px solid var(--mid);color:#fff;cursor:pointer;transition:border-color .16s}
  .navtoggle:hover{border-color:var(--ultra)}
  .navtoggle .bars{display:block;width:18px;height:2px;background:#fff;position:relative}
  .navtoggle .bars:before,.navtoggle .bars:after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff}
  .navtoggle .bars:before{top:-6px}
  .navtoggle .bars:after{top:6px}
  .navtoggle[aria-expanded="true"] .bars{background:transparent}
  .navtoggle[aria-expanded="true"] .bars:before{top:0;transform:rotate(45deg)}
  .navtoggle[aria-expanded="true"] .bars:after{top:0;transform:rotate(-45deg)}
  .facts>div:first-child{grid-column:span 2}

  /* small viewport units so the hero does not jump when a phone address bar moves */
  @supports (height: 100svh){
    .bleed img{height:min(78svh,760px)}
    .afterbleed img{height:min(62svh,600px)}
    .spread .full img{height:min(70svh,680px)}
  }

  @media (max-width:1080px){
    .nav{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px}
    .navtoggle{display:inline-flex}
    .menu{display:none;flex-basis:100%;flex-direction:column;gap:0;margin:8px 0 0;order:9;border-top:1px solid var(--mid);padding:4px 0 8px}
    .menu.open{display:flex}
    .menu a{display:flex;align-items:center;min-height:48px;padding:12px 2px;border-bottom:1px solid var(--mid)}
    .menu a:last-child{border-bottom:none}
    .menu a:hover{border-bottom-color:var(--mid)}
    .facts>div:first-child{grid-column:span 1}
    .wrap{padding-left:22px;padding-right:22px}
    .g12{gap:14px}
    .hero{padding-top:44px}
  }
  @media (max-width:640px){
    .top h1,.hero h1{max-width:none}
    .facts,.grid4,.quad,.tiles,.cols{grid-template-columns:1fr}
    .strip,.run,.wide,.trust,.stat,.track,.mosaic,.evidence{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

  /* site pages, design A */
  .phead{padding:64px 0 44px;border-bottom:1px solid var(--mid)}
  .phead h1{max-width:none}
  .stand{font-size:18px;color:var(--lav);max-width:58ch;margin-top:calc(var(--u) * 2.5)}
  .pband{padding:56px 0;border-bottom:1px solid var(--mid)}
  .pband h2{margin-bottom:calc(var(--u) * 2.5)}
  .pband > p{color:var(--lav);font-size:17px;max-width:66ch}
  .pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--mid);border:1px solid var(--mid);margin-top:calc(var(--u) * 4)}
  .pcards > div{background:var(--ink);padding:24px}
  .pcards h3{margin-bottom:calc(var(--u))}
  .pcards p{font-size:15px}
  .prows{margin-top:calc(var(--u) * 4);border-top:1px solid var(--mid)}
  .prows > div{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:18px 0;border-bottom:1px solid var(--mid)}
  .prows h3{font-size:17px}
  .prows p{font-size:15.5px}
  .pask{padding:72px 0;background:var(--surf);border-bottom:1px solid var(--mid)}
  .pask h2{margin-bottom:calc(var(--u) * 2)}
  .pask p{color:var(--lav);max-width:56ch;margin-bottom:calc(var(--u) * 3)}
  .pask .cta{background:var(--spark);color:var(--ink)}
  .pform{margin-top:calc(var(--u) * 4);max-width:620px;display:grid;gap:calc(var(--u) * 2.5)}
  .field{display:grid;gap:6px}
  .field label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ice)}
  .field input,.field textarea{background:var(--ink);border:1px solid var(--mid);color:var(--body);font:inherit;padding:12px 14px;min-height:46px;width:100%}
  .field input:focus,.field textarea:focus{outline:3px solid var(--spark);outline-offset:2px;border-color:var(--ultra)}
  .hint{font-family:var(--mono);font-size:12px;color:var(--purp);margin-top:calc(var(--u) * 2)}
  .sent{border:1px solid var(--ultra);padding:16px 18px;color:var(--body)}
  @media (max-width:1080px){
    .pcards{grid-template-columns:1fr 1fr}
    .prows > div{grid-template-columns:1fr;gap:6px}
    .phead{padding:48px 0 34px}
    .pband{padding:44px 0}
  }
  @media (max-width:640px){ .pcards{grid-template-columns:1fr} }