/* ---------- Homepage specific ---------- */
  .home-hero{
    position:relative;
    background:var(--gen-frost);
    color:var(--gen-navy);
    overflow:hidden;
    padding:64px 0 0;
    border-bottom:1px solid var(--gen-navy-line);
  }
  .home-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(ellipse at 78% 25%, rgba(42,157,143,0.10), transparent 55%);
    z-index:1;
  }
  /* On a phone the globe rides alongside the button, filling the space the
     button leaves rather than sitting under the copy as a block of its own.
     Full size beside the copy once there is room. The export had it two-up
     at every width, which squeezed the hero text into half a phone screen. */
  .home-hero-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "copy   copy"
      "action globe";
    column-gap:20px;
    row-gap:32px;
    align-items:center;
    padding-bottom:48px;
  }
  .home-hero-copy{ grid-area:copy; }
  .home-hero-actions{ grid-area:action; }
  @media (min-width:860px){
    .home-hero-grid{
      grid-template-columns:1.1fr 0.9fr;
      grid-template-areas:
        "copy   globe"
        "action globe";
      column-gap:48px;
      padding-bottom:64px;
    }
  }
  h1.home-head{
    font-family:var(--gen-font);
    font-weight:700;
    font-size:clamp(2.4rem,4.6vw,4rem);
    line-height:1.06;
    letter-spacing:-0.01em;
    color:var(--gen-navy);
  }
  .home-hero-sub{
    margin-top:22px;
    max-width:50ch;
    color:var(--gen-text-dim);
    font-size:16.5px;
    line-height:1.65;
  }
  .globe-panel{
    grid-area:globe;
    aspect-ratio:1/1;
    z-index:2;
    width:clamp(120px,32vw,200px);
    justify-self:end;
  }
  @media (min-width:860px){
    .globe-panel{ width:auto; justify-self:stretch; }
  }
  .globe-panel svg{ display:block; width:100%; height:100%; }
  /* Strokes stay the same weight however small the globe is drawn, so the
     phone-sized one reads as crisply as the full-size one. */
  .globe-line,
  .globe-outline,
  .globe-arc{ fill:none; vector-effect:non-scaling-stroke; }
  .globe-line{ stroke: rgba(13,34,64,0.22); stroke-width:1; }
  .globe-outline{ stroke: rgba(13,34,64,0.4); stroke-width:1.3; }
  .globe-arc{ stroke: rgba(42,157,143,0.55); stroke-width:1.3; }
  .globe-node{ fill:var(--gen-navy-2); }
  .globe-node.flag{ fill:var(--gen-gold); stroke:var(--gen-navy); stroke-width:0.5; }
  @media (prefers-reduced-motion: no-preference){
    .globe-pulse{ animation: globePulse 3.6s ease-in-out infinite; transform-origin:center; }
    .globe-pulse:nth-child(2){ animation-delay:.7s; }
    .globe-pulse:nth-child(3){ animation-delay:1.5s; }
  }
  @keyframes globePulse{
    0%,100%{ opacity:1; r:4; }
    50%{ opacity:.45; r:6; }
  }

  .about-copy p{
    color:var(--gen-text-dim);
    font-size:16px;
    line-height:1.75;
    margin-bottom:18px;
    max-width:78ch;
  }

  /* Partner grid — a logo and the partner's name in every cell. */
  .partner-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    margin-top:24px;
  }
  .partner-cell{
    background:var(--gen-frost-2);
    border-radius:3px;
    padding:14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
  }
  /* A box three times as wide as it is tall with the mark contained inside,
     so a square symbol and a 4.2:1 wordmark carry the same visual weight.
     Both halves of the width earn their place: 100% is what keeps a wordmark
     inside its cell — at 320, 520 and 860px the cell is narrower than 132px,
     and a bare max-width:132px scrolls the page sideways at all three — and
     132px is the 3:1 ceiling that stops a wordmark dwarfing its neighbours in
     the wider cells. */
  .partner-logo{
    width:min(100%,132px);
    height:44px;
    object-fit:contain;
  }
  /* Eight of the fourteen logos are a bare symbol with no name in them, so
     the name goes under every mark rather than under only the eight that need
     it. Text rather than baked into the image because it has to hold up at
     44px: the lockups that do carry their own name bury it in microtype at
     this size. The marks drop to alt="" as decoration it repeats. */
  .partner-name{
    font-size:12.5px;
    line-height:1.3;
    text-align:center;
  }
  @media (min-width:520px){ .partner-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (min-width:860px){ .partner-grid{ grid-template-columns:repeat(5,1fr); } }

  /* The same hairline grid as .gen-stat-grid in site.css. */
  .next-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    margin-top:20px;
    background:var(--gen-navy-line);
    border:1px solid var(--gen-navy-line);
  }
  .next-card{
    display:block;
    background:var(--gen-frost);
    padding:26px 24px;
    color:var(--gen-navy);
    text-decoration:none;
  }
  .next-card:hover{ background:var(--gen-frost-2); }
  .next-title{
    display:block;
    font-size:1.1rem;
    font-weight:700;
  }
  .next-card p{
    margin:8px 0 0;
    font-size:13.8px;
    line-height:1.6;
    color:var(--gen-text-dim);
  }
  @media (min-width:860px){ .next-grid{ grid-template-columns:repeat(3,1fr); } }