:root{
    --ink:#111614; --ink-2:#414D4A; --ink-3:#77817F;
    --deep:#0C2B28; --deep-2:#123B36;
    --green:#12A150; --green-lt:#48D383;
    --paper:#fff; --paper-2:#F4F3EE; --line:#DCDAD2;
    --max:1320px;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
       -webkit-font-smoothing:antialiased;line-height:1.55}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
  a{color:inherit}
  h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.022em}
  .kicker{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink-2);margin:0 0 18px}

  /* header */
  header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:34px;height:82px}
  .brand{flex-shrink:0;text-decoration:none;display:flex;align-items:center}
  .brand img{height:50px;width:auto;display:block}
  .brand .fb{font-family:var(--serif);font-size:26px;font-weight:700;display:none}
  .brand .fb em{font-style:normal;color:var(--green)}
  .brand.failed img{display:none} .brand.failed .fb{display:block}
  .mainnav{display:flex;gap:26px;list-style:none;margin:0;padding:0;
           font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
  .mainnav a{text-decoration:none;padding:6px 0;border-bottom:3px solid transparent;transition:.15s}
  .mainnav a:hover{border-bottom-color:var(--green)}
  .util{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:13.5px;font-weight:600}
  .util a{text-decoration:none;color:var(--ink-2)} .util a:hover{color:var(--green)}
  .btn{display:inline-block;text-decoration:none;font-weight:700;font-size:13.5px;
       letter-spacing:.05em;text-transform:uppercase;padding:11px 22px;transition:.15s;
       border:2px solid var(--green);color:var(--green);background:transparent}
  .btn:hover{background:var(--green);color:#fff}
  .btn-onDark{border-color:#fff;color:#fff} .btn-onDark:hover{background:#fff;color:var(--deep)}

  /* hero */
  .hero{display:grid;grid-template-columns:1fr 1fr;min-height:588px;border-bottom:1px solid var(--line)}
  .hero-txt{padding:72px 60px 56px;display:flex;flex-direction:column;justify-content:center;
            max-width:760px;margin-left:auto;width:100%}
  .hero-txt h1{font-size:clamp(36px,4.05vw,58px);font-weight:800}
  .hero-txt h1 span{color:var(--green)}
  .hero-sub{font-size:17.5px;color:var(--ink-2);margin:26px 0 0;max-width:52ch}
  .themebar{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
  .themebar a{text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.04em;
              text-transform:uppercase;border:1px solid var(--line);padding:9px 15px;
              color:var(--ink-2);transition:.15s}
  .themebar a:hover{border-color:var(--green);color:var(--green)}
  /* hero slideshow */
  .hero-img{background:var(--deep);position:relative;overflow:hidden}
  .slides{display:flex;height:100%;width:100%;
          transition:transform .85s cubic-bezier(.45,.05,.2,1)}
  .slide{flex:0 0 100%;position:relative;height:100%}
  .slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .slide .slabel{position:absolute;left:0;bottom:0;z-index:2;background:#fff;color:var(--ink);
                 font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
                 padding:11px 18px}
  .dots{position:absolute;right:20px;bottom:20px;z-index:3;display:flex;gap:8px}
  .dots button{width:30px;height:4px;border:0;padding:0;cursor:pointer;
               background:rgba(255,255,255,.45);transition:background .2s}
  .dots button:hover{background:rgba(255,255,255,.8)}
  .dots button[aria-current="true"]{background:#fff}
  @media(prefers-reduced-motion:reduce){.slides{transition:none}}

  /* sections */
  section,.cta{scroll-margin-top:92px}
  section{padding:88px 0}
  .sec{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}
  .sec-label{border-top:6px solid var(--ink);padding-top:16px}
  .sec-label h2{font-size:26px;font-weight:800}
  .sec-label p{font-size:14px;color:var(--ink-3);margin:12px 0 0}
  .sec-body > p.intro{font-size:20px;line-height:1.55;color:var(--ink-2);margin:0 0 44px;max-width:78ch}

  /* themes */
  .themes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .theme{text-decoration:none;display:block}
  .theme .art{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--deep-2)}
  .theme .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                  transition:transform .5s ease}
  .theme:hover .art img{transform:scale(1.05)}
  .theme .tag{position:absolute;top:0;left:0;background:#fff;padding:13px 20px;z-index:2;
              font-size:16.5px;font-weight:800;display:flex;gap:10px;align-items:center}
  .theme .tag i{font-style:normal;color:var(--green)}
  .theme > p{font-size:15px;color:var(--ink-2);margin:16px 0 0}
  .theme ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
  .theme ul li{font-size:12px;font-weight:600;color:var(--ink-3);background:var(--paper-2);
               padding:5px 10px;border:1px solid var(--line)}

  /* how we work — typographic pillars */
  .how{background:var(--paper-2)}
  .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
           border:1px solid var(--line)}
  .pillar{background:var(--paper-2);padding:30px 26px 34px}
  .pillar .n{font-family:var(--serif);font-size:15px;color:var(--green);font-weight:700}
  .pillar h3{font-size:20px;font-weight:800;margin:12px 0 12px}
  .pillar p{font-size:14.5px;color:var(--ink-2);margin:0}
  .chain{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:40px}
  .chain span{border:1px solid var(--line);background:#fff;padding:10px 17px;font-size:13.5px;
              font-weight:700}
  .chain i{color:var(--green);font-style:normal;font-weight:800}

  /* reach / map */
  .figs{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin:0 0 44px;
        padding-bottom:38px;border-bottom:1px solid var(--line)}
  .fig .n{font-family:var(--serif);font-size:50px;font-weight:700;line-height:1;
          letter-spacing:-.03em;color:var(--deep)}
  .fig .t{font-size:14.5px;color:var(--ink-2);margin-top:12px;max-width:34ch}
  .fig .s{font-size:11.5px;color:var(--ink-3);margin-top:9px;font-family:var(--serif);font-style:italic}
  /* full-bleed map: sits outside .wrap so it spans the whole viewport */
  .mapfull{position:relative;width:100%;background:#F7F7F2;
           border-top:1px solid var(--line);border-bottom:1px solid var(--line);
           margin-top:8px}
  .mapstage{position:relative;max-width:1800px;margin:0 auto;padding:26px 20px}
  #worldmap{width:100%;height:auto;display:block}
  #worldmap .b{fill:#CFCEC3;stroke:#F7F7F2;stroke-width:.6}
  #worldmap .c{fill:#4FB077;stroke:#F7F7F2;stroke-width:.6;cursor:pointer;transition:fill .18s}
  #worldmap .c:hover{fill:var(--deep)}
  .tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;padding:8px 12px;
       font-size:12.5px;line-height:1.4;z-index:5;max-width:220px;transform:translate(-50%,-130%)}
  .tip b{display:block;font-size:13.5px} .tip span{color:var(--green-lt)}
  .mapfoot{display:flex;gap:22px;align-items:baseline;margin-top:16px;flex-wrap:wrap;
           font-size:13px;color:var(--ink-3)}
  .mapfoot .key{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink-2)}
  .mapfoot .key i{width:11px;height:11px;background:#4FB077;display:block}
  .mapfoot em{font-family:var(--serif);font-style:italic}

  /* work / publications */
  .work{background:var(--paper-2)}
  .items{border-top:2px solid var(--ink)}
  .item{display:grid;grid-template-columns:150px 1fr 170px;gap:28px;padding:24px 18px 24px 0;
        border-bottom:1px solid var(--line);align-items:start;transition:background .15s}
  .item:hover{background:#fff}
  .item .tag{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
             color:var(--green);padding-top:4px}
  .item h3{font-size:18px;font-weight:700;margin:0 0 7px;max-width:56ch}
  .item p{font-size:14px;color:var(--ink-2);margin:0;max-width:70ch}
  .item .venue{font-size:12.5px;color:var(--ink-3);text-align:right;font-family:var(--serif);
               font-style:italic;padding-top:4px;line-height:1.5}
  .growing{margin-top:26px;font-size:14.5px;color:var(--ink-3);font-family:var(--serif);
           font-style:italic}

  /* people — circular portrait and name only */
  /* three columns: comfortable at two people, room for a third without a reflow */
  .people{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .person{text-align:center}
  .person .portrait{width:100%;max-width:238px;margin:0 auto;aspect-ratio:1/1;
                    background:#E7E6DF;position:relative;overflow:hidden;border-radius:50%}
  /* Duotone rather than neutral black-and-white: the photo is desaturated, then an overlay of
     the Research section's paper tone is blended in "color" mode, so the portraits carry the
     same warm cast as the rest of the page instead of reading as cold greyscale. */
  .person .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
                        display:block;filter:grayscale(1) contrast(1.03) brightness(1.02)}
  /* #EDE7D8 is the Research section's hue at a saturation that actually shows; the exact
     #F4F3EE is too desaturated to register as anything other than plain grey. */
  .person .portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
                           background:#EDE7D8;mix-blend-mode:color}
  .person .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
              font-family:var(--serif);font-size:46px;font-weight:700;color:#A8B0AC;
              letter-spacing:.02em}
  .person h3{font-size:18.5px;font-weight:800;margin:20px 0 0}
  .person h3::after{content:"";display:block;width:34px;height:3px;background:var(--green);
                    margin:12px auto 0}

  /* cta + footer */
  .cta{background:var(--green);color:#fff;padding:74px 0 66px}
  .cta .sec{align-items:center} .cta .sec-label{border-top-color:#fff}
  .cta h2{font-size:clamp(26px,3vw,38px);font-weight:800;color:#fff}
  .cta p{font-size:18px;color:#E2F8EC;margin:0 0 28px;max-width:58ch}
  /* footer shares the CTA's green; a hairline keeps the two blocks legible */
  footer{background:var(--green);color:#D7F3E4;padding:60px 0 32px;font-size:14.5px;
         border-top:1px solid rgba(255,255,255,.3)}
  .f-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:44px}
  .f-logo img{height:54px;filter:brightness(0) invert(1);opacity:.97;display:block}
  footer h4{color:#fff;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
            margin:0 0 16px;font-weight:800}
  footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  footer a{text-decoration:none;transition:color .15s} footer a:hover{color:#fff}
  .social{display:flex;gap:10px;flex-wrap:wrap}
  .social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.45);border-radius:50%;
            display:flex;align-items:center;justify-content:center;transition:.15s}
  .social svg{width:17px;height:17px;fill:#fff;display:block;transition:fill .15s}
  .social a:hover{background:#fff;border-color:#fff}
  .social a:hover svg{fill:var(--green)}
  .social a:focus-visible{outline:2px solid #fff;outline-offset:3px}
  .f-bot{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.3);
         display:flex;justify-content:space-between;gap:20px;font-size:13px;flex-wrap:wrap}
  .flag{background:#FFF4D6;border:1px dashed #D9B341;color:#6B4E06;font-size:12px;
        padding:2px 8px;font-weight:700;display:inline-block}

  @media(max-width:1080px){
    .sec{grid-template-columns:1fr;gap:28px}
    .themes,.pillars,.figs{grid-template-columns:1fr}
    .item{grid-template-columns:1fr;gap:10px}
    .item .venue{text-align:left}
  }
  @media(max-width:860px){
    .mainnav,.util a:not(.btn){display:none}
    .hero{grid-template-columns:1fr} .hero-img{min-height:330px}
    .hero-txt{padding:52px 26px} .wrap{padding:0 24px}
    .people,.f-top{grid-template-columns:1fr}
    section{padding:60px 0}
  }