/* Together and Stronger Americas — pop-off site layer (23 Oct 2026)
   Every page: moving photo reel → short introduction → a desk of topic tiles.
   Each topic opens in its own window (centre, side panel or expanded); open windows are listed as tabs under the desk.
   Nothing here may cover the voice button (bottom-right, z-index 900): windows stay below z-index 900 and leave the bottom corner free. */

/* ---------- stored sections: visible only when scripts are off ---------- */
.js [data-winstore]{display:none}
html:not(.js) .desk,html:not(.js) .windock{display:none}

/* ---------- the desk ---------- */
.desk{background:var(--white);padding:clamp(28px,3.4vw,48px) 0 clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.desk__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(20px,2.4vw,32px)}
.desk__h{font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.2}
.desk__lede{margin:6px 0 0;color:var(--slate);font-size:.9375rem;max-width:640px}
.desk__count{font:700 .8125rem/1 var(--num);letter-spacing:.08em;text-transform:uppercase;color:var(--acc);white-space:nowrap}
.desk__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1180px){.desk__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.desk__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:460px){.desk__grid{grid-template-columns:1fr}}
.desk__tile{position:relative;display:flex;flex-direction:column;gap:8px;height:100%;min-height:150px;width:100%;text-align:left;background:var(--grey);border:1px solid transparent;border-radius:var(--r);padding:22px 22px 44px;color:var(--ink);text-decoration:none;cursor:pointer;font:inherit;transition:background-color .2s,border-color .2s,transform .2s}
.desk__tile:hover{background:var(--mist);border-color:rgba(30,90,138,.25);transform:translateY(-2px)}
.desk__tile:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.desk__num{font:700 .75rem/1 var(--num);letter-spacing:.1em;color:var(--acc)}
.desk__tile h3{font-size:1.2rem;line-height:1.25;margin:0}
.desk__tile p{margin:0;font-size:.875rem;line-height:1.6;color:var(--slate);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.desk__go{position:absolute;left:22px;bottom:16px;font:700 .8125rem/1 var(--num);color:var(--acc)}
.desk__go::after{content:" ↗"}
.desk__tile.is-open{background:var(--white);border-color:var(--acc)}
.desk__tile.is-open .desk__go::after{content:" ●"}

/* ---------- tabs of open windows ---------- */
.windock{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.windock__in{display:flex;align-items:center;gap:10px;min-height:56px;flex-wrap:wrap;padding-block:8px}
.windock__t{font:700 .75rem/1 var(--num);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-right:6px}
.windock__none{margin:0;font-size:.875rem;color:var(--slate)}
.wintab{display:inline-flex;align-items:center;gap:8px;max-width:260px;min-height:38px;padding:0 6px 0 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:500 .875rem/1 var(--sans);cursor:pointer}
.wintab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wintab[aria-pressed="true"]{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.wintab.is-min{opacity:.6}
.wintab__x{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--slate);font-size:18px;line-height:1;cursor:pointer}
.wintab__x:hover{background:var(--grey);color:var(--ink)}

/* ---------- windows ---------- */
.winscrim{position:fixed;inset:0;background:rgba(19,40,63,.28);z-index:840;opacity:0;pointer-events:none;transition:opacity .25s}
.winscrim.is-on{opacity:1;pointer-events:auto}
.win{position:fixed;z-index:850;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 80px rgba(19,40,63,.28);overflow:hidden;
  left:50%;top:calc(var(--hdr) + 24px);width:min(1040px,calc(100vw - 48px));height:min(calc(100vh - var(--hdr) - 120px),860px);transform:translateX(-50%);
  animation:winin .28s ease}
@keyframes winin{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.win.is-front{box-shadow:0 36px 90px rgba(19,40,63,.36);z-index:860}
.win.is-min{display:none}
.win[data-mode="side"]{left:auto;right:0;top:0;transform:none;width:min(560px,100vw);height:calc(100vh - 92px);border-radius:0 0 0 var(--r);animation:sidein .28s ease}
@keyframes sidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.win[data-mode="full"]{left:12px;right:12px;top:12px;width:auto;height:calc(100vh - 104px);transform:none;animation:none}
.win__bar{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 18px;background:var(--grey);border-bottom:1px solid var(--line);cursor:move;user-select:none}
.win[data-mode="side"] .win__bar,.win[data-mode="full"] .win__bar{cursor:default}
.win__title{flex:1;min-width:0;margin:0;font:600 1rem/1.3 var(--serif);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win__k{font:700 .6875rem/1 var(--num);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-right:4px}
.win__btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.win__btn:hover{background:var(--white);border-color:var(--line)}
.win__btn:focus-visible{outline:3px solid var(--acc);outline-offset:1px}
.win__btn svg{width:18px;height:18px}
.win__btn--x{font-size:22px;line-height:1}
.win__body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.win__body > section,.win__body > nav{min-height:100%}
.win .sec,.win .stage,.win .facts,.win .beliefs,.win .cta{padding:clamp(24px,3vw,40px) 0}
.win .wrap{padding-inline:clamp(18px,3.2vw,40px);max-width:none}
.win .sec__head{margin-bottom:24px}
.win .sec__lede{margin-bottom:20px}
.win .tiles,.win .doors,.win .bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.win[data-mode="side"] .tiles,.win[data-mode="side"] .doors,.win[data-mode="side"] .bgrid{grid-template-columns:1fr}
.win h2{font-size:clamp(1.6rem,2.4vw,2.2rem)}
.win__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:8px 18px;border-top:1px solid var(--line);background:var(--white);font-size:.8125rem;color:var(--slate)}
.win__nav{display:flex;gap:6px}
.win__nav button{min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:500 .8125rem/1 var(--sans);cursor:pointer}
.win__nav button:hover{background:var(--grey)}
.win__nav button:disabled{opacity:.4;cursor:default}

@media (max-width:860px){
  .win,.win[data-mode="side"],.win[data-mode="full"]{left:0;right:0;top:0;width:100vw;height:calc(100vh - 86px);transform:none;border-radius:0 0 var(--r) var(--r);animation:none}
  .win__bar{cursor:default;padding-left:14px}
  .win__btn--side,.win__btn--full{display:none}
  .win__foot{padding-right:112px}
}
@media (prefers-reduced-motion:reduce){.win,.win[data-mode="side"]{animation:none}.winscrim{transition:none}}
@media print{.desk,.windock,.winscrim{display:none}.js [data-winstore]{display:block}}

/* ---------- mega-menu in the header ---------- */
.mega{position:static}
.mega summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);font:500 .9rem/1.3 var(--sans);white-space:nowrap;cursor:pointer;position:relative}
.mega summary::-webkit-details-marker{display:none}
.mega summary::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.mega[open] summary::after,.mega[data-current="true"] summary::after{transform:scaleX(1)}
.mega__chev{width:10px;height:7px;transition:transform .2s;color:var(--slate)}
.mega[open] .mega__chev{transform:rotate(180deg)}
.mega__panel{position:absolute;left:0;right:0;top:100%;background:var(--white);border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);box-shadow:0 24px 50px rgba(15,26,43,.14);z-index:70;padding:26px 28px 30px}
.mega__in{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:28px 48px}
.mega__intro h3{font-size:1.35rem;margin-bottom:8px}
.mega__intro p{font-size:.9rem;line-height:1.6;color:var(--slate);margin-bottom:14px}
.mega__intro .btn{min-height:42px;padding:9px 20px;font-size:.875rem}
.mega__list{columns:3;column-gap:28px}
.mega__list li{break-inside:avoid;padding:0}
.mega__list a{display:flex;gap:10px;align-items:baseline;min-height:40px;padding:7px 8px;border-radius:6px;color:var(--ink);text-decoration:none;font:500 .875rem/1.4 var(--sans);white-space:normal}
.mega__list a:hover{background:var(--grey);color:var(--acc)}
.mega__list a::after{display:none}
.mega__n{font:700 .6875rem/1.6 var(--num);letter-spacing:.06em;color:var(--acc);flex:none}
.mega__t{font:700 .6875rem/1 var(--num);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin:0 0 10px}
@media (max-width:1100px){.mega__list{columns:2}}
@media (max-width:1259px){
  .mega summary{min-height:52px;font-size:1.0625rem;border-bottom:1px solid var(--line)}
  .mega summary::after{display:none}
  .mega__panel{position:static;box-shadow:none;border:0;padding:6px 0 14px}
  .mega__in{display:block}
  .mega__intro h3{display:none}
  .mega__intro p{display:none}
  .mega__list{columns:1}
}

/* ---------- header fit: seven menu items + regions + languages + button ---------- */
@media (min-width:1260px) and (max-width:1600px){
  .nav__list{gap:4px 12px}
  .mega summary{font-size:.84rem;gap:4px}
  .nav__tools{gap:10px}
  .nav__cta{padding-inline:16px;font-size:.875rem}
  .hdr__in{gap:16px}
}
@media (min-width:1260px) and (max-width:1380px){
  .brand__full{display:none}
  .mega summary{font-size:.8rem}
  .fam summary{font-size:.75rem}
}
/* shorter introduction, since the content lives in the windows */
.js .hero__in{padding-block:36px 28px}
.js .hero h1{font-size:clamp(2.4rem,4.4vw,4rem)}
.js .hero__lede{margin-bottom:22px}
.js .phero{padding-block:28px 24px}

/* ---------- two-row header on desktop: brand + tools on top, the menu on its own row ---------- */
@media (min-width:1260px){
  html.js{--hdr:156px}
  .hdr__in{flex-wrap:wrap;min-height:0;padding-top:4px}
  .nav{display:contents}
  .brand{order:1;min-height:76px;display:flex;align-items:center}
  .nav__tools{order:2;margin-left:auto;gap:14px}
  .nav__cta{padding-inline:22px;font-size:.9rem}
  .nav__list{order:3;flex:1 1 100%;justify-content:flex-start;gap:4px clamp(18px,2.2vw,36px);margin:0;border-top:1px solid var(--line);min-height:56px}
  .mega summary{font-size:.95rem;min-height:56px}
  .brand__full{display:inline}
}
.win:focus{outline:none}