:root {
      --carbon:#191b1d; --dark-silver:#4b4f54; --brushed:#aeb4ba;
      --mist:#bdc2c7; --pearl:#f4f4f4; --alloy:#e3e5e7;
      --impact:#3e5c6b; --white:#fff; --max:1180px;
    }
    * { box-sizing:border-box }
    html { scroll-behavior:smooth; scroll-padding-top:74px }
    body { margin:0; overflow-x:hidden; background:var(--pearl); color:var(--carbon); font-family:Montserrat,Arial,sans-serif }
    a { color:inherit; text-decoration:none }
    button,input { font:inherit }
    button { color:inherit }
    .wrap { width:min(var(--max),calc(100% - 48px)); margin:auto }
    .h1 { margin:0; font-size:clamp(50px,6.5vw,88px); line-height:.95; letter-spacing:-.05em; font-weight:700 }
    .h2 { margin:0; font-size:clamp(36px,4.7vw,62px); line-height:1; letter-spacing:-.046em; font-weight:600 }
    .h3 { margin:0; font-size:26px; line-height:1.08; letter-spacing:-.03em; font-weight:500 }
    .body { font-size:16px; line-height:1.72; font-weight:400 }
    .eyebrow { color:#777f84; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase }
    .btn { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:0 22px; border:1px solid; border-radius:999px; font-size:12px; font-weight:800; cursor:pointer }
    .btn:hover,.btn:focus-visible { transform:translateY(-1px) }
    :focus-visible { outline:3px solid rgba(62,92,107,.5); outline-offset:3px }

    header { position:relative; z-index:20; background:#fff; border-bottom:1px solid #d7dbdd }
    .topbar { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:28px }
    .logo { font-size:16px; font-weight:500; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap }
    .navlinks { display:flex; align-items:center; gap:28px; color:#52595e }
    .navlinks a { font-size:12px; font-weight:500 }
    .navlinks .active { color:#c77743; border-bottom:1px solid #c77743; padding-bottom:6px }
    .navlinks .cta-nav { min-height:36px; display:inline-flex; align-items:center; padding:0 18px; border-radius:999px; background:var(--carbon); color:#fff; font-weight:700 }
    .menu-toggle { display:none; width:42px; height:42px; border:0; background:transparent; font-size:25px; cursor:pointer }

    .ph { position:relative; overflow:hidden; background:linear-gradient(135deg,#cfd5d9,#929ba0) }
    .ph::after { content:attr(data-placeholder); position:absolute; inset:0; display:grid; place-items:center; padding:18px; color:rgba(255,255,255,.82); font-size:12px; font-weight:700; letter-spacing:.12em; text-align:center; text-transform:uppercase }
    .ph:has(img)::after { display:none }
    .ph img { width:100%; height:100%; display:block; object-fit:cover }

    .hero { min-height:610px; position:relative; display:flex; align-items:flex-end; overflow:hidden; color:#fff; background:linear-gradient(90deg,rgba(25,27,29,.72) 0%,rgba(25,27,29,.42) 48%,rgba(25,27,29,.12) 100%),linear-gradient(180deg,rgba(25,27,29,.08),rgba(25,27,29,.5)),url('/assets/images/impact/impact-hero.jpg') center/cover no-repeat }
    .hero .wrap { position:relative; z-index:2; padding-bottom:64px }
    .hero-copy { max-width:760px }
    .hero .eyebrow { color:#d9e5ea }
    .hero h1 { margin:10px 0 18px }
    .hero p { max-width:630px; margin:0 0 24px; color:#e4ecef }
    .hero .btn { border-color:#fff; background:#fff; color:var(--impact) }
    .hero-note { margin-top:16px; color:#dce6ea; font-size:12px }

    .contributors { padding:34px 0; background:#fff; text-align:center }
    .logos { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:18px }
    .logo-box { min-width:158px; padding:16px 22px; border:1px solid #d6dbde; border-radius:10px; color:#6d767b; font-size:12px; font-weight:700 }

    .story { padding:88px 0; background:var(--pearl) }
    .story-head { max-width:760px; margin:0 auto 44px; text-align:center }
    .story-head h2 { margin:8px 0 14px }
    .story-head p,.copy p { margin-bottom:0; color:#616a70 }
    .split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:44px }
    .split:last-child { margin-bottom:0 }
    .split .ph { min-height:320px; border-radius:18px }
    .copy h3 { margin:8px 0 12px }

    .model { padding:90px 0; background:var(--alloy) }
    .model-head { max-width:780px; margin-bottom:34px }
    .model-head h2 { margin:8px 0 14px }
    .model-head p { margin:0; color:#5f686e }
    .flow { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
    .card { min-height:210px; padding:24px; border:1px solid #d7dcdf; border-radius:16px; background:#fff }
    .card .num { color:var(--impact); font-size:11px; font-weight:800 }
    .card h3 { margin:18px 0 10px; font-size:18px }
    .card p { margin:0; color:#616a70; font-size:13px; line-height:1.65 }

    .recognition { padding:96px 0; background:#fff }
    .recognition-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center }
    .recognition .ph { min-height:480px; border-radius:20px }
    .recognition h2 { margin:8px 0 14px }
    .recognition > .wrap > div > p { color:#616a70 }
    .benefit { display:grid; grid-template-columns:42px 1fr; gap:14px; padding:16px 0; border-top:1px solid #d8dde0 }
    .benefit:last-child { border-bottom:1px solid #d8dde0 }
    .benefit p { margin:4px 0 0; color:#616a70; font-size:12px; line-height:1.6 }

    .annual { padding:96px 0; background:var(--pearl) }
    .annual-head { max-width:760px; margin:0 auto 34px; text-align:center }
    .annual-head h2 { margin:8px 0 14px }
    .annual-head p { margin:0; color:#616a70 }
    .annual-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:16px }
    .annual-main { min-height:430px; border-radius:20px }
    .annual-side { display:grid; gap:16px }
    .annual-side .ph { min-height:207px; border-radius:16px }

    .faq { padding:90px 0; background:#fff }
    .faq-head { max-width:720px; margin-bottom:28px }
    .faq-head h2 { margin:8px 0 14px }
    .faq-head p { margin:0; color:#616a70 }
    details { padding:18px 0; border-top:1px solid #d5dade }
    details:last-child { border-bottom:1px solid #d5dade }
    summary { font-size:14px; font-weight:600; cursor:pointer }
    details p { margin:12px 0 0; color:#616a70; font-size:13px; line-height:1.7 }

    .final-cta { padding:88px 0; background:var(--impact); color:#fff }
    .final-grid { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end }
    .final-cta .eyebrow { color:#d9e5ea }
    .final-cta h2 { margin:8px 0 14px }
    .final-cta p { max-width:650px; margin:0; color:#dbe6ea }
    .final-cta .btn { border-color:#fff; background:#fff; color:var(--impact) }

    footer { padding:42px 0 28px; background:#111315; color:#979ea3 }
    .footergrid { display:grid; grid-template-columns:1.15fr .95fr 1.2fr 1.25fr; gap:34px; align-items:start }
    .footer-col h4 { margin:0 0 18px; color:#fff; font-size:18px; font-weight:700 }
    .footer-col p,.footer-col a,.footer-col li { margin:0; color:#c6cacf; font-size:12px; line-height:1.6 }
    .footer-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px }
    .footer-group { margin-top:16px }
    .footer-group:first-of-type { margin-top:0 }
    .news-input { width:100%; height:40px; margin:10px 0 18px; border:1px solid #585f64; border-radius:2px; background:transparent; padding:0 12px; color:#fff; font-size:12px }
    .news-btn { min-height:38px; padding:0 18px; border:1px solid #fff; border-radius:999px; background:transparent; color:#fff; font-size:12px; font-weight:800; cursor:pointer }
    .socials { display:flex; gap:14px; margin-top:18px }
    .socials a { width:28px; height:28px; display:grid; place-items:center; border:1px solid #8f969b; border-radius:50%; color:#fff; font-weight:700 }
    .footer-bottom { margin-top:36px; text-align:center; color:#8d9499 }
    .footer-bottom .brand { display:block; margin-bottom:8px; font-size:18px; font-weight:700 }
    .footer-bottom p { margin:0; font-size:11px }

    @media (max-width:900px) {
      .split,.recognition-grid,.annual-grid,.final-grid,.footergrid { grid-template-columns:1fr }
      .flow { grid-template-columns:1fr 1fr }
      .final-grid { align-items:start }
    }
    @media (max-width:720px) {
      html { scroll-padding-top:68px }
      .wrap { width:min(var(--max),calc(100% - 30px)) }
      .topbar { min-height:68px }
      .menu-toggle { display:block }
      .navlinks { position:absolute; top:68px; left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px 15px 18px; border-bottom:1px solid #d7dbdd; background:#fff; box-shadow:0 12px 24px rgba(0,0,0,.08) }
      .navlinks.open { display:flex }
      .navlinks a { padding:13px 12px }
      .navlinks .active { border:0; padding-bottom:13px }
      .navlinks .cta-nav { justify-content:center; margin-top:6px }
      .hero { min-height:540px }
      .hero .wrap { padding-bottom:44px }
      .story,.model,.recognition,.annual,.faq,.final-cta { padding:68px 0 }
      .story-head { text-align:left }
      .split { gap:28px }
      .split:nth-child(3) .ph { order:2 }
      .flow { grid-template-columns:1fr }
      .recognition .ph { min-height:360px }
      .annual-main { min-height:330px }
      .annual-side .ph { min-height:220px }
      .footergrid { gap:34px }
    }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } * { transition:none!important } }