/* GENERATED by site-src/build_catalyse_wine_pages.py: do not edit.
   The homepage (catalyse-home-wine.html) tokens, base, S01 bar, pill header, mega menus and footer CSS, cut with
   build_catalyse_polls_wine.chrome(). wine-base.css (hand-written) comes after it. */
:root {
  --ink: #1e0a1a; --body: #261c23; --grey60: #6e6269; --grey70: #554a51; --menu-grey: #776b72; --line: #e8dfe3;
  --divider: #ddd3d7; --stat-rule: #a1959b; --page: #f7f2f4; --white: #fff;
  --blue: #b4235a; --blue70: #8e1a47; --blue80: #5e0f2e; --blue20: #f6c9d6; --blue10: #fbf0f3;
  --purple: #d6335e; --purple-hdr: #d6335e; --purple70: #b4235a;
  --cyan: #e8466f; --cyan20: #fdf1f4; --mint: #ffb3c7; --orchid: #f4a6bf; --focus: #ff5c8a;
  --navy: #33102c; --inset: #1e0a1a;
  --ph: #dccfd5; --ph-dark: rgba(255, 255, 255, .42);
  --display: 'Sora', 'Helvetica Neue', helvetica, arial, sans-serif;
  --text: 'Inter', 'Helvetica Neue', helvetica, arial, sans-serif;
  --ease-btn: cubic-bezier(.4, 0, 1, 1); --ease-nav: cubic-bezier(.28, .11, .32, 1); --ease-link: cubic-bezier(0, 0, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* reserve the scrollbar gutter like the reference page (layout width 1425 in a 1440 window) */
html { scrollbar-gutter: stable; background: var(--page); }
body { margin: 0; background: var(--page); color: var(--body); font: 400 16px/1.4 var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* container: 7% side padding at >=1200 (x 100..1326 at a 1425 layout width) */
.wrap { width: 100%; max-width: 1980px; margin: 0 auto; padding: 0 7%; }
.sec { position: relative; }

/* section tags (hidden unless ?tags=1) */
.tag { position: absolute; top: 8px; left: 8px; z-index: 60; pointer-events: none; font: 700 11px/1 var(--text);
  letter-spacing: .04em; color: #111; background: #ffd400; padding: 4px 6px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.tag--nav { top: 34px; left: 2px; }
html.clean .tag { display: none; }

/* type */
.h1 { font: 500 72px/72px var(--display); }
.h2 { font: 500 60px/60px var(--display); }
.h2f { font: 500 48px/60px var(--display); letter-spacing: -.96px; color: var(--blue); }
.h4d { font: 500 36px/39.96px var(--display); }
.lead { font: 400 18px/27px var(--text); }
.eyebrow { font: 600 16px/20.64px var(--text); text-transform: uppercase; }
.center { text-align: center; }
/* one line of a headline (the hero h1 in the markup; the other headlines are split by the motion script): a block, so
   the lines break where they did, and the scroll motion layer can raise them one by one */
.m-ln { display: block; }

/* buttons */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 12px 24px; border-radius: 9999px; border: 1px solid transparent; font: 600 18px/18px var(--text);
  white-space: nowrap; cursor: pointer; transition: color .2s var(--ease-btn), background-color .2s var(--ease-btn), border-color .2s var(--ease-btn); }
.btn:focus-visible { border-color: #fff; outline: 2px solid var(--focus); outline-offset: 2px; }
/* white text (4.67:1 on #d6335e; the skeleton's #fbf0f3 gave 4.20:1) */
.btn-purple { color: #fff; border-color: #fff; }
.btn-purple::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--purple);
  transition: background-color .2s var(--ease-btn); }
.btn-purple:hover::before { background: var(--purple70); }
.btn-light { background: var(--cyan20); border-color: var(--cyan20); color: var(--blue); }
.btn-light:hover { color: var(--blue70); background: var(--blue10); }
.btn-ghost-dark { color: #f7f2f4; border-color: #f7f2f4; }
.btn-ghost-dark:hover { color: var(--blue20); border-color: var(--blue20); }
.btn-ghost-blue { color: var(--blue); border-color: var(--blue); }
.btn-ghost-blue:hover { color: var(--blue70); border-color: var(--blue70); }

/* text link with arrow */
.tlink { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-top: 4px; font: 600 16px/22.4px var(--text);
  color: var(--blue); transition: color .3s var(--ease-link), transform .3s var(--ease-link); }
.tlink::after { content: ""; position: absolute; left: 0; right: 24px; bottom: -4px; height: 2px; background: currentColor; opacity: 0;
  transition: opacity .3s var(--ease-link); }
.tlink:hover { color: var(--blue70); transform: translateY(-4px); }
.tlink:hover::after { opacity: 1; }
.tlink svg { width: 16px; height: 16px; flex: none; }

/* neutral image slot (kept from the skeleton; no longer used on this content page) */
.slot { --sb: rgba(255, 255, 255, .06); --sl: rgba(255, 255, 255, .26); --lbg: rgba(30,10,26,.62); --lc: rgba(255, 255, 255, .92);
  position: relative; overflow: hidden; display: grid; place-items: center; border: 1px dashed var(--sl);
  background:
    linear-gradient(to top right, transparent calc(50% - .75px), var(--sl) calc(50% - .75px), var(--sl) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(to bottom right, transparent calc(50% - .75px), var(--sl) calc(50% - .75px), var(--sl) calc(50% + .75px), transparent calc(50% + .75px)),
    var(--sb); }
.slot__lbl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 80%; padding: 10px 16px;
  border-radius: 12px; background: var(--lbg); color: var(--lc); text-align: center; font: 600 12px/16px var(--text); letter-spacing: .06em;
  text-transform: uppercase; }
.slot__lbl small { font: 400 13px/18px var(--text); letter-spacing: 0; text-transform: none; opacity: .88; }

/* ---------------- S01 + S02 header ---------------- */
.hdr { position: sticky; top: 0; z-index: 51; height: 60px; transition: height .28s cubic-bezier(.33,1,.68,1); }
.hdr.ann-closed { height: 0; }
.ann { position: relative; z-index: 0; height: 60px; background: var(--ink); color: #fff; display: flex; align-items: center;
  justify-content: center; padding: 0 72px; overflow: hidden;
  transition: height .28s cubic-bezier(.33,1,.68,1), padding .28s cubic-bezier(.33,1,.68,1), opacity .16s linear; }
.hdr.ann-closed .ann { height: 0; opacity: 0; }
.ann__in { display: flex; align-items: center; justify-content: center; gap: 96px; width: 100%; }
.ann__msg { font: 400 18px/27px var(--text); text-align: center; }
.ann__cta { position: relative; display: inline-flex; align-items: center; gap: 6px; font: 600 16px/16px var(--text); white-space: nowrap; }
.ann__cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: #fff; opacity: 0; transition: opacity .2s ease; }
.ann__cta:hover::after { opacity: 1; }
.ann__arrow { width: 20px; height: 10px; }
.ann__x { position: absolute; right: 32px; top: 22px; width: 16px; height: 16px; color: #fff; transition: opacity .3s ease, transform .3s ease; }
.ann__x:hover { opacity: .75; }

.ovl { position: fixed; inset: 0; z-index: 1; background: rgba(0,0,0,.4); opacity: 0; visibility: hidden;
  transition: opacity .36s var(--ease-nav), visibility 0s linear .36s; }
.ovl.on { opacity: 1; visibility: visible; transition: opacity .36s var(--ease-nav), visibility 0s; }
.navwrap { position: absolute; z-index: 2; left: 0; right: 0; top: 100%; padding: 16px 24px; pointer-events: none; }
.pill { pointer-events: auto; max-width: 1360px; height: 58px; margin: 0 auto; background: #fff; border-radius: 999px;
  box-shadow: 0 5px 25px rgba(0,0,0,.1); padding: 6px 16px; display: flex; align-items: center; justify-content: space-between; }
.pill__l, .pill__r { display: flex; align-items: center; }
.pill__logo { width: 116px; height: 36px; display: flex; align-items: center; }
.pill__logo img { height: 36px; width: auto; display: block; }
.mnav { display: flex; gap: 2px; margin-left: 16px; }
.mnav__a { display: inline-flex; align-items: center; gap: 3px; height: 38px; padding: 10px; border-radius: 999px; font: 600 16px/18px var(--text);
  color: var(--ink); white-space: nowrap; transition: background-color .2s var(--ease-nav), box-shadow .2s var(--ease-nav); }
.mnav__a:hover { background: var(--page); }
.mnav__a.open { background: var(--blue20); }
.chev { width: 18px; height: 18px; flex: none; }
.pill__r { gap: 6px; }
.lang { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 8px; border-radius: 24px; font: 600 16px/20px var(--text);
  color: var(--ink); transition: background-color .2s var(--ease-nav); }
.lang:hover { background: var(--page); }
.lang.open { background: var(--blue20); }
.lang svg { width: 18px; height: 18px; }
.login { display: inline-flex; align-items: center; height: 40px; padding: 9px 12px; border-radius: 24px; font: 600 16px/20px var(--text);
  letter-spacing: -.18px; color: var(--ink); transition: background-color .2s var(--ease-nav); }
.login:hover { background: var(--blue20); }
.hcta { display: inline-flex; align-items: center; justify-content: center; min-width: 154px; height: 40px; padding: 9px 18px;
  border-radius: 999px; background: var(--purple-hdr); color: #fff; font: 600 16px/16px var(--text); white-space: nowrap; }

/* mega menus */
.mm { pointer-events: auto; position: absolute; top: 86px; left: 50%; width: calc(100% - 48px); max-width: 1360px; background: #fff;
  border-radius: 40px; padding: 40px; box-shadow: 0 5px 25px rgba(0,0,0,.1); opacity: 0; visibility: hidden;
  transform: translate(-50%, -10px); overflow: hidden;
  transition: opacity .36s var(--ease-nav), transform .36s var(--ease-nav), visibility 0s linear .36s; }
.mm.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .36s var(--ease-nav), transform .36s var(--ease-nav), visibility 0s; }
.mm--tabs { display: flex; }
.mm__side { width: 275px; flex: none; display: flex; flex-direction: column; gap: 8px; }
/* min-height (was height) so a two-line real tab name grows the tab instead of overflowing it */
.mm__tab { display: flex; align-items: center; gap: 12px; width: 275px; min-height: 55px; padding: 8px 16px 8px 8px; border-radius: 16px;
  font: 600 18px/23px var(--text); color: var(--blue70); text-align: left; transition: background-color .36s var(--ease-nav), color .36s var(--ease-nav); }
.mm__tab.on { background: var(--blue20); color: var(--ink); }
.mm__tab--link { color: var(--blue); }
.mm__ico { width: 39px; height: 39px; flex: none; border-radius: 8px; background: var(--page); display: grid; place-items: center; color: var(--blue); }
/* our own 18px line glyph per tab (in place of the skeleton's outlined square) */
.mm__ico svg { width: 18px; height: 18px; display: block; }
.mm__tab.on .mm__ico { background: var(--blue); color: #fff; }
/* the panes share one grid cell, so a menu keeps the height of its tallest pane while you hover the tabs; the promo
   sits at the bottom of every pane, so it does not move either */
.mm__main { flex: 1; min-width: 0; margin-left: 40px; padding-left: 40px; border-left: 1px solid var(--divider); display: grid; }
.mm__pane { grid-area: 1 / 1; display: flex; flex-direction: column; visibility: hidden; }
.mm__pane.on { visibility: inherit; }
.mm__pane > .mm__promo { margin-top: auto; }
.mm__pane > .mm__cols { margin-bottom: 25px; }
.mm__pane > .mm__title { align-self: flex-start; }
.mm__title { display: inline-flex; align-items: center; gap: 12px; height: 55px; font: 600 30px/34px var(--text); color: var(--ink); }
.mm__title--link { color: var(--blue); padding: 0 12px; margin-left: -12px; border-radius: 16px; transition: background-color .2s var(--ease-nav); }
.mm__title--link:hover { background: var(--page); }
.mm__title svg { width: 24px; height: 24px; }
.mm__cols { display: grid; grid-template-columns: 442px 442px; column-gap: 40px; margin-top: 40px; }
/* a pane with three link columns (the Solutions menu's Sectors tab, 21 Oct 2026) */
.mm__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
.mm__h { font: 600 16px/21px var(--text); color: var(--menu-grey); margin-bottom: 24px; }
.mm__links { display: flex; flex-direction: column; gap: 12px; }
.mm__links li { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; }
.mm__links a { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/22.4px var(--text); color: var(--blue); }
.mm__links a:hover { color: var(--blue70); text-decoration: underline; text-underline-offset: 4px; }
.mm__links svg { width: 16px; height: 16px; }
.mm__sub { font: 400 14px/18px var(--text); color: var(--menu-grey); }
.mm__promo { position: relative; display: flex; gap: 32px; margin-top: 25px; padding: 32px; border-radius: 16px; background: var(--purple); color: #fff; }
.mm__ptext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mm__ptitle { font: 600 30px/36px var(--text); }
.mm__pdesc { font: 400 16px/24px var(--text); margin-top: 8px; }
.mm__plink { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 16px/20px var(--text); }
.mm__pmedia { width: 445px; height: 284px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(255,179,199,0) 0 26px, rgba(255,179,199,.50) 26px 28px, rgba(255,179,199,0) 28px 46px),
              linear-gradient(135deg, #e8466f 0%, #f0759a 45%, #b4235a 100%); }
.mm__promo--icon { padding: 32px 208px 32px 32px; }
.mm__promo--icon .mm__ptext { max-width: 400px; }
.mm__burst { position: absolute; right: 34px; top: 50%; width: 140px; height: 140px; margin-top: -70px; }
/* drawn mini cards inside the promo media (our own drawings, ILLUSTRATIVE) */
.mini { width: 320px; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 14px; background: #fff; color: var(--body);
  box-shadow: 0 12px 30px rgba(94,15,46,.28); }
.mini__k { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.mini i { display: block; height: 12px; border-radius: 6px; background: var(--blue20); }
.mini i:first-of-type { background: var(--blue); }
.mini__q { font: 500 17px/23px var(--display); color: var(--ink); }
.mini__a { font: 400 14px/20px var(--text); }
.mini__a b { font-weight: 600; color: var(--blue70); }
.mini__s { font: 400 13px/18px var(--text); color: var(--grey60); }
/* the Polls promo: a ballot with the real question and its answer labels, no numbers */
.mini__opts { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.mini__opts li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px;
  font: 400 14px/18px var(--text); color: var(--body); }
.mini__opts li::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1.5px solid var(--blue); }
.langdd { pointer-events: auto; position: absolute; top: 77px; width: 304px; background: #fff; border-radius: 24px; padding: 16px;
  box-shadow: 0 5px 25px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden;
  transform: translateY(-10px); transition: opacity .36s var(--ease-nav), transform .36s var(--ease-nav), visibility 0s linear .36s; }
.langdd.on { opacity: 1; visibility: visible; transform: none; transition: opacity .36s var(--ease-nav), transform .36s var(--ease-nav), visibility 0s; }
.langdd a { position: relative; display: block; height: 35.6px; padding: 8px 8px 8px 31px; border-radius: 8px; font: 400 14px/19.6px var(--text); color: var(--ink); }
.langdd a:hover { background: var(--page); }
.langdd a.cur::before { content: ""; position: absolute; left: 16px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
/* scroll progress (owner, 20 Oct 2026, scroll motion layer): a thin rose bar along the bottom edge of the S01 bar (the top
   of the window once the bar is closed) that fills as the page scrolls. CSS scroll-driven where the browser has it, so it
   also works on the pages that copy this header (no script needed there); elsewhere it stays hidden unless the motion
   script drives it (html.sp-js sets --sp). Hidden with reduced motion and with ?motion=off (html.nomo). */
.sprog { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; height: 3px; pointer-events: none; display: none;
  transform-origin: 0 50%; scale: 0 1; background: linear-gradient(90deg, #b4235a 0%, #e8466f 55%, #ffb3c7 100%);
  box-shadow: 0 0 12px rgba(232,70,111,.7), 0 0 2px rgba(255,179,199,.9); }
@keyframes sprog { from { scale: 0 1; } to { scale: 1 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html:not(.nomo):not(.sm-js) .sprog { display: block; animation: sprog linear both; animation-timeline: scroll(root block); }
  }
  html.sp-js .sprog { display: block; scale: var(--sp, 0) 1; }
}

/* ---------------- S01 + S02 on smaller screens (responsive, 21 Oct 2026; owner: "make it phone friendly") ----------------
   RESPONSIVE breakpoints, the same on every wine page (wine-base.css RESPONSIVE note): max-width 1199.98px small laptop,
   1023.98px tablet landscape, 767.98px tablet portrait, 479.98px phone; each covers the screens narrower than 1200 /
   1024 / 768 / 480, so a 1024 tablet in landscape keeps the desktop header. Desktop (1200px and up) does not change:
   every rule below is inside one of these queries, and the menu button (.mbtn) and the menu panel (.mpanel) are
   display: none at 1024px and up.
   Below 1024px:
     - S01 bar 56px high, the poll line in two lines at most (then an ellipsis), the link and a 44px close button; it scrolls
       away with the page (the header sticks at top: -56px, so only the pill stays in view);
     - the pill (56px; 52px below 480px) holds the logo, Talk to sales and the 44px menu button; the mega menus, the
       market switch and Log in move into the menu panel;
     - #mpanel (built by the menu script from the same menus): full height, the top-level items as accordions, "Our panel"
       as a link, the market switch, then Log in and Talk to sales; Esc or the close button closes it, Tab stays inside it,
       the page under it does not scroll (html.mp-open). From 640px it is a 480px drawer on the right over a dimmed page
       (a tap on the dimmed part closes it).
   Below 480px the S01 bar is 72px high: the poll line in up to three lines and the link as a 44px arrow (its words stay
   for screen readers), so the whole finding shows.
   A page under this header clears the pill with: S01 bar 56 + 10 + pill 56 = 122px (below 480px: 72 + 8 + 52 = 132px);
   with the S01 bar closed, 66px (60px). The header is in the page flow (sticky), so a hero right under it only needs
   the part under the bar: 66px (60px) plus its own gap. */
.mbtn, .mpanel { display: none; }
@media (max-width: 1199.98px) {
  .ann { padding: 0 64px; }
  .ann__in { gap: 32px; }
  /* the pill keeps every item on one line down to 1024px (Log in wrapped at 1024) */
  .mnav { margin-left: 8px; }
  .mnav__a { padding-left: 8px; padding-right: 8px; }
  .login { white-space: nowrap; }
  .hcta { min-width: 0; }
  /* the mega menus keep their look; their columns and promo share the narrower width */
  .mm__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mm__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm__pmedia { width: 46%; min-width: 0; }
  .mm__promo--icon { padding-right: 32px; }
  .mm__burst { display: none; }
}
@media (max-width: 1023.98px) {
  .hdr { height: 56px; top: -56px; }
  .hdr.ann-closed { top: 0; }
  .ann { height: 56px; padding: 0 52px 0 20px; }
  .ann__in { gap: 16px; justify-content: space-between; }
  .ann__msg { flex: 1; min-width: 0; font: 400 15px/20px var(--text); text-align: left; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ann__cta { flex: none; min-height: 44px; font-size: 15px; }
  .ann__cta::after { bottom: 10px; }
  .ann__x { right: 4px; top: 6px; width: 44px; height: 44px; display: grid; place-items: center; }
  .ann__x svg { width: 16px; height: 16px; display: block; }
  .navwrap { padding: 10px 16px; }
  .pill { height: 56px; padding: 6px 6px 6px 18px; }
  .pill__logo { width: auto; height: 44px; }
  .mnav, .lang, .login, .mm, .langdd, .ovl { display: none; }
  .pill__r { gap: 8px; }
  .hcta { min-width: 0; height: 44px; padding: 0 18px; }
  .mbtn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; color: var(--ink);
    background: var(--page); transition: background-color .2s var(--ease-nav); }
  .mbtn:hover, .mbtn[aria-expanded="true"] { background: var(--blue20); }
  .mbtn svg { width: 22px; height: 22px; display: block; }

  /* the menu panel */
  .mpanel { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: #fff; color: var(--ink);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .3s var(--ease-nav), visibility 0s linear .3s; }
  .mpanel.on { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .3s var(--ease-nav), visibility 0s; }
  html.mp-open, html.mp-open body { overflow: hidden; }
  .mp__top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 76px;
    padding: 0 22px 0 34px; border-bottom: 1px solid var(--line); }
  .mp__x { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; background: var(--page); color: var(--ink); }
  .mp__x:hover { background: var(--blue20); }
  .mp__x svg { width: 16px; height: 16px; display: block; }
  .mp__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 34px 24px; }
  .mp__item { border-bottom: 1px solid var(--line); }
  .mp__hd { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 0; text-align: left;
    font: 600 20px/26px var(--text); color: var(--ink); }
  .mp__hd > span { flex: 1; min-width: 0; }
  .mp__hd > svg { width: 22px; height: 22px; flex: none; transition: transform .25s var(--ease-nav); }
  .mp__hd[aria-expanded="true"] { color: var(--blue); }
  .mp__hd[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
  .mp__hd--a { justify-content: space-between; }
  .mp__hd--a > svg { width: 18px; height: 18px; color: var(--blue); }
  .mp__mk > svg:first-child { width: 22px; height: 22px; color: var(--ink); }
  .mp__bd { padding: 0 0 20px; }
  .mp__bd[hidden] { display: none; }
  .mp__grp + .mp__grp { margin-top: 12px; }
  .mp__h { display: flex; align-items: center; gap: 6px; min-height: 40px; font: 600 13px/16px var(--text); letter-spacing: .06em;
    text-transform: uppercase; color: var(--menu-grey); }
  a.mp__h { min-height: 44px; color: var(--blue70); }
  .mp__h svg { width: 14px; height: 14px; flex: none; }
  .mp__links li { display: flex; flex-direction: column; }
  .mp__links a, .mp__all { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; font: 600 17px/22px var(--text); color: var(--blue); }
  .mp__links a.cur { color: var(--ink); }
  .mp__links a.cur::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
  .mp__sub { margin: -8px 0 6px; font: 400 14px/18px var(--text); color: var(--menu-grey); }
  .mp__all { margin-top: 8px; }
  .mp__all svg { width: 16px; height: 16px; flex: none; }
  .mp__foot { flex: none; display: flex; gap: 12px; padding: 16px 34px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  .mp__foot a { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px;
    border-radius: 999px; font: 600 17px/20px var(--text); white-space: nowrap; }
  .mp__login { color: var(--ink); border: 1px solid var(--divider); }
  .mp__cta { background: var(--purple-hdr); color: #fff; }
}
/* touch screens of 1024px and up (tablets in landscape keep the desktop header): the S01 link, the close button and the
   pill's items get a 44px hit area (an invisible extension) without moving anything */
@media (min-width: 1024px) and (hover: none) and (pointer: coarse) {
  .ann__cta::before { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px; }
  .ann__x::before { content: ""; position: absolute; inset: -14px; }
  .pill__logo, .mnav__a, .lang, .login, .hcta { position: relative; }
  .pill__logo::before, .mnav__a::before, .lang::before, .login::before, .hcta::before { content: ""; position: absolute; left: 0; right: 0;
    top: calc(50% - 22px); bottom: calc(50% - 22px); }
}
/* tablets: the menu panel is a drawer on the right (480px) over the dimmed page; the dimmed part is the panel's own
   background, so a tap there closes it (the menu script) */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .mpanel { align-items: flex-end; background: rgba(30,10,26,.45); }
  .mp__top, .mp__body, .mp__foot { width: min(480px, 100%); background: #fff; }
}
@media (max-width: 479.98px) {
  /* the S01 bar: the poll line in up to three lines over the full width; the whole bar is the link (its words stay for
     screen readers, its arrow sits in the bottom right corner under the close button) */
  .hdr { height: 72px; top: -72px; }
  .ann { height: 72px; padding: 0 48px 0 16px; }
  .ann__in { gap: 0; }
  .ann__msg { font-size: 15px; line-height: 19px; -webkit-line-clamp: 3; }
  .ann__cta { position: static; flex: none; width: 0; min-height: 0; overflow: visible; font-size: 0; line-height: 0; gap: 0; }
  .ann__cta::before { content: ""; position: absolute; inset: 0; z-index: 0; }
  .ann__cta:focus-visible { outline: none; }
  .ann__cta:focus-visible::before { outline: 2px solid #fff; outline-offset: -4px; }
  .ann__cta::after { content: none; }
  .ann__arrow { position: absolute; right: 17px; bottom: 11px; width: 18px; height: 10px; }
  .ann__x { top: 4px; z-index: 1; }
  .navwrap { padding: 8px 12px; }
  .pill { height: 52px; padding: 4px 4px 4px 14px; }
  .pill__logo img { height: 32px; }
  .hcta { padding: 0 15px; font-size: 15px; }
  .mp__top { height: 68px; padding: 0 16px 0 26px; }
  .mp__body { padding: 4px 24px 24px; }
  .mp__foot { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .mpanel, .mpanel.on, .mp__hd > svg { transition: none; }
}

/* ---------------- S16 footer ---------------- */
.ftr { background: var(--ink); color: var(--blue10); }
.ftr__main { padding: 80px 40px 40px; }
.ftr__in { max-width: 1360px; margin: 0 auto; }
.ftr__logo { display: flex; width: max-content; height: 58px; }
.ftr__logo img { height: 58px; width: auto; display: block; filter: brightness(0) invert(1); }
/* groups share grid rows, so second-row headings line up across columns (36px below the tallest first-row group);
   a column with a single group spans both rows */
.ftr__cols { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; grid-auto-flow: column;
  column-gap: 32px; row-gap: 36px; margin-top: 39px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.12); }
.ftr__col { display: contents; }
.ftr__col > .ftr__grp:only-child { grid-row: span 2; }
.ftr__grp { display: flex; flex-direction: column; gap: 12px; }
.ftr__grp h3 { padding-bottom: 0; font: 600 12px/14.4px var(--text); text-transform: uppercase; color: var(--orchid); }
/* links start 35px below the heading top, on a 32px pitch */
.ftr__grp ul { display: flex; flex-direction: column; gap: 11px; margin-top: 6.6px; }
.ftr__grp li { font-size: 14px; line-height: 21px; }
.ftr__grp a { font: 400 14px/21px var(--text); color: var(--blue10); transition: color .2s ease; }
.ftr__grp a:hover { color: rgba(255,255,255,.85); }
.ftr__min { padding: 0 40px 40px; }
.ftr__row { display: flex; justify-content: space-between; align-items: center; height: 20px; }
.social { display: flex; gap: 23px; }
.social a { width: 20px; height: 20px; display: grid; place-items: center; color: #fff; transition: opacity .2s ease; }
.social a:hover { opacity: .75; }
.social svg { width: 20px; height: 20px; display: block; }
.copy { font: 400 14px/18px var(--text); }
.ftr__hr { height: 1px; border: 0; margin: 27px 0 0; background: rgba(255,255,255,.12); }
.legal { display: flex; align-items: center; gap: 18px; height: 24px; margin-top: 27px; }
.legal a, .legal button { font: 400 14px/18px var(--text); color: var(--blue20); }
.legal a:hover, .legal button:hover { text-decoration: underline; }
/* smaller screens (responsive, 21 Oct 2026; breakpoints in the header CSS above): below 1024px the four link columns
   become two, links are 16px in 44px rows, the social row and the legal row wrap; below 480px each group is an
   accordion (the footer script turns its heading into a button there and back from 480px up) */
@media (max-width: 1023.98px) {
  .ftr__main { padding: 56px 7% 32px; }
  .ftr__min { padding: 0 7% 32px; }
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; row-gap: 40px; margin-top: 32px; }
  .ftr__col { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
  .ftr__col > .ftr__grp:only-child { grid-row: auto; }
  .ftr__grp { gap: 4px; }
  .ftr__grp h3 { font-size: 13px; line-height: 16px; }
  .ftr__grp ul { gap: 0; margin-top: 4px; }
  .ftr__grp li { font-size: 16px; line-height: 22px; }
  .ftr__grp a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; line-height: 22px; }
  .ftr__row { flex-wrap: wrap; gap: 8px 24px; height: auto; }
  .social { gap: 4px; margin-left: -12px; }
  .social a { width: 44px; height: 44px; }
  .copy { font-size: 15px; line-height: 20px; }
  .ftr__hr { margin-top: 16px; }
  .legal { flex-wrap: wrap; gap: 0 24px; height: auto; margin-top: 12px; }
  .legal a, .legal button { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 20px; }
}
@media (max-width: 479.98px) {
  .ftr__main { padding-top: 48px; padding-bottom: 24px; }
  .ftr__cols { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 28px; padding-top: 0; }
  .ftr__col { gap: 0; }
  .ftr__grp { gap: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .ftr__hb { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; text-align: left;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
  .ftr__hb svg { width: 18px; height: 18px; flex: none; transition: transform .25s ease; }
  .ftr__hb[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ftr__grp ul { margin: 0 0 12px; }
  .ftr__grp ul[hidden] { display: none; }
  .legal { flex-direction: column; align-items: flex-start; gap: 0; }
}