/* =========================================================
   UNION design: bold bands of colour, a thin bar above the menu, pill-shaped buttons, photos cut
   into a curved and angled shape, date tiles for news and events. Its layout ideas come from the
   Usdaw website; colours, fonts and logos come from each site's settings. It is loaded after
   springwood.css, whose forms, phone menu and back-to-top button it borrows (restyled at the end).
   Layout responds to the width of the page itself (container queries), so the editor's phone
   preview behaves like a real phone. Every rule starts with .d-union or .x-union.
   ========================================================= */

.site.d-union, .x-union {
  --un-main: var(--c-main, #201F1D);
  --un-accent: var(--c-accent, #EC2027);
  /* Buttons and bands carrying white words use a slightly deeper accent, so the words stay readable. */
  --un-accent-deep: color-mix(in srgb, var(--un-accent) 86%, #000);
  --un-support: var(--c-support, #366732);
  --un-tint: var(--c-tint, #D6D7BD);
  --un-grey: #F4F3F0;
  --un-ink: #1C1B1A;
  --un-soft: #57534E;
  --un-line: #DFDCD5;
  --un-foot: color-mix(in srgb, var(--un-main) 86%, #fff);
  --wrap: 1290px;
  --gutter: clamp(16px, 4.6cqi, 64px);
}
.site.d-union { position: relative; font-family: var(--f-body); color: var(--un-ink); font-size: 18px; line-height: 1.6; background: #fff; }

/* Resets for the design's own parts only. They carry no weight, so the rules below always win. */
:where(.d-union .un) :is(p, h1, h2, h3, ul, ol, figure, blockquote) { margin: 0; }
:where(.d-union .un) :is(ul, ol) { padding: 0; list-style: none; }
:where(.d-union .un) :is(h1, h2, h3) { font-family: var(--f-head); color: inherit; letter-spacing: normal; line-height: 1.15; font-weight: 400; text-wrap: balance; }
:where(.d-union .un) a { color: inherit; text-decoration: none; }
:where(.d-union .un) img { display: block; max-width: 100%; }
.d-union .un-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); box-sizing: border-box; }
.d-union .un-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Shared blocks keep their usual spacing in this design. */
.d-union .un-main > section:not(.un), .d-union .ed-block > section:not(.un) { padding: 72px 0; }

/* ---------- Sections and their backgrounds ---------- */
.d-union .un-sec { position: relative; padding-block: clamp(56px, 8cqi, 104px); }
.d-union .un-bg-white { background: #fff; }
.d-union .un-bg-grey { background: var(--un-grey); }
.d-union .un-bg-tint { background: var(--un-tint); }
.d-union .un-bg-main { background: var(--un-main); color: #fff; }
.d-union .un-bg-support { background: var(--un-support); color: #fff; }
.d-union .un-bg-accent { background: var(--un-accent-deep); color: #fff; }
/* Two white or two grey sections in a row read as one. */
.d-union .un-bg-white + .un-bg-white, .d-union .un-bg-grey + .un-bg-grey,
.d-union .ed-block:has(> .un-bg-white) + .ed-block > .un-bg-white, .d-union .ed-block:has(> .un-bg-grey) + .ed-block > .un-bg-grey { padding-top: 0; }

.d-union .un-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4cqi, 44px); }
.d-union .un-h2 { font-size: clamp(30px, 3.6cqi, 46px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.12; }
.d-union .un-intro { margin-top: 12px; max-width: 60ch; font-size: clamp(19px, 1.8cqi, 24px); line-height: 1.4; }
.d-union .un-prose { font-size: 18.5px; line-height: 1.7; }
.d-union .un-prose :is(p, ul) + :is(p, ul) { margin-top: 1.05em; }
.d-union .un-prose ul { list-style: disc; padding-inline-start: 1.3em; }
.d-union .un-prose li + li { margin-top: .35em; }
.d-union .un-prose a { text-decoration: underline; text-underline-offset: 3px; color: var(--un-accent-deep); overflow-wrap: anywhere; }
.d-union .un-empty { color: inherit; opacity: .8; }

.d-union .un-chev { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg); }
.d-union .un-chev.back { transform: rotate(-135deg); }

/* ---------- Buttons: pills ---------- */
.d-union .btn.un-pill, .x-union .btn.un-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 30px; border: 0; border-radius: 999px;
  font: 700 17px/1.2 var(--f-body); letter-spacing: -0.005em; white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: none; transform: none; transition: background-color .2s, color .2s, box-shadow .2s;
}
.d-union .btn.un-pill:hover { transform: none; }
.d-union .btn.un-fill, .x-union .btn.un-fill { background: var(--un-accent-deep); color: #fff; }
.d-union .btn.un-fill:hover, .x-union .btn.un-fill:hover { background: color-mix(in srgb, var(--un-accent-deep) 80%, #000); }
.d-union .btn.un-white, .x-union .btn.un-white { background: #fff; color: var(--un-accent-deep); }
.d-union .btn.un-white:hover, .x-union .btn.un-white:hover { background: var(--un-grey); }
.d-union .btn.un-line { background: transparent; color: var(--un-main); box-shadow: inset 0 0 0 1.5px var(--un-main); }
.d-union .btn.un-line:hover { background: var(--un-main); color: #fff; }
.d-union .btn.un-line-white { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.d-union .btn.un-line-white:hover { background: #fff; color: var(--un-main); }
.d-union .btn.un-small { padding: 11px 22px; font-size: 15.5px; }
.d-union .un-pills { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 30px; }
.d-union .un-pills:empty { display: none; }
.d-union .un-below { margin-top: 40px; }

/* ---------- Header: a thin bar of quick links, then a white bar with the logo and menu ---------- */
.d-union .un-head { position: relative; z-index: 20; background: #fff; }
.d-union .un-top { background: var(--un-main); color: #fff; font-size: 14.5px; line-height: 1.6; }
.d-union .un-top ul { display: flex; justify-content: flex-end; gap: 30px; padding-block: 9px; white-space: nowrap; }
.d-union .un-top a { opacity: .92; }
.d-union .un-top a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.d-union .un-bar { border-bottom: 1px solid var(--un-line); }
.d-union .un-bar-row { display: flex; align-items: center; gap: 34px; padding-block: 16px; }
.d-union .un-brand { display: inline-flex; flex-shrink: 0; }
.d-union .un-brand img { height: 50px; width: auto; }
.d-union .un-wordmark { display: inline-flex; align-items: center; gap: 10px; font: 900 26px/1 var(--f-head); color: var(--un-main); }
.d-union .un-wordmark svg { height: 46px; width: auto; margin: 0; flex: none; }
.d-union .un-nav-links { display: flex; flex-shrink: 0; gap: 30px; margin-inline-end: auto; font-size: 16.5px; font-weight: 700; color: var(--un-main); }
.d-union .un-nav-links a { white-space: nowrap; padding-block: 6px; border-bottom: 2px solid transparent; transition: border-color .2s, color .2s; }
.d-union .un-nav-links a:hover { color: var(--un-accent-deep); border-bottom-color: currentColor; }
.d-union .un-nav-refer { display: none; }
/* The anniversary seal hangs from the right of the menu bar, over the top of the banner. */
.d-union .un-bar-row { position: relative; }
.d-union .un-badge { position: absolute; z-index: 25; top: calc(100% - 30px); inset-inline-end: calc(var(--gutter) + 59px); width: 138px; transform: rotate(-7deg); pointer-events: none; filter: drop-shadow(0 7px 9px rgba(0, 0, 0, .35)); font-family: var(--f-body); }
.d-union .un-badge svg { display: block; width: 100%; height: auto; }
/* On the public site it swings from the bar when the page opens, each swing smaller, and comes to rest.
   Stop things moving (tools.css) and a device set to reduced motion both leave it still. */
@media (prefers-reduced-motion: no-preference) {
  .d-union.sw-live .un-badge { transform-origin: 50% 6%; animation: un-swing 5s ease-out .6s both; }
}
@keyframes un-swing {
  0% { transform: rotate(-7deg); }
  10% { transform: rotate(-15deg); }
  26% { transform: rotate(0deg); }
  42% { transform: rotate(-11deg); }
  58% { transform: rotate(-4deg); }
  74% { transform: rotate(-8.8deg); }
  88% { transform: rotate(-6.2deg); }
  100% { transform: rotate(-7deg); }
}
.d-union .un-nav-toggle { display: none; margin-inline-start: auto; position: relative; z-index: 31; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--un-accent-deep); color: #fff; cursor: pointer; }
.d-union .un-nav-toggle span { position: absolute; inset-inline-start: 14px; inset-inline-end: 14px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .2s; }
.d-union .un-nav-toggle span:nth-child(1) { top: 17px; }
.d-union .un-nav-toggle span:nth-child(2) { top: 23px; }
.d-union .un-nav-toggle span:nth-child(3) { top: 29px; }
.d-union.menu-open .un-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.d-union.menu-open .un-nav-toggle span:nth-child(2) { opacity: 0; }
.d-union.menu-open .un-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* On the public site the header stays at the top of the window (pinHeader in springwood.js). The thin
   bar of quick links scrolls away first (--head-skip is its height); the white bar with the menu stays,
   with a soft shadow once the page moves under it. The anniversary seal tucks away meanwhile. */
.d-union .un-head.sw-pinned { position: sticky; top: calc(-1 * var(--head-skip, 0px)); }
.d-union .un-head .un-bar { transition: box-shadow .25s; }
.d-union .un-head.is-stuck .un-bar { box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.d-union .un-head .un-badge { transition: opacity .3s, visibility .3s; }
.d-union .un-head.is-stuck .un-badge { opacity: 0; visibility: hidden; }

/* The menu folds behind a button on narrow screens, and whenever its links would not fit on one line
   (Springwood's fitMenu adds sw-fold). The width rule covers the moment before that runs. */
@container site (max-width: 980px) {
  .d-union .un-badge { width: 100px; inset-inline-end: var(--gutter); top: calc(100% - 6px); }
  .d-union .un-nav-toggle { display: block; }
  .d-union .un-bar-row > .btn, .d-union .un-nav-links { display: none; }
}
.d-union.sw-fold .un-nav-toggle { display: block; }
.d-union.sw-fold .un-bar-row > .btn, .d-union.sw-fold .un-nav-links { display: none; }
/* The folded menu opens as a panel under the header (tools.css draws it). */
.d-union.sw-fold.menu-open .un-nav-links a:hover { border-bottom-color: var(--un-line); }

/* ---------- Bold banner ---------- */
.d-union .un-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--un-accent-deep); }
.d-union .un-hero-home { display: flex; align-items: center; min-height: clamp(520px, 58cqi, 720px); }
.d-union .un-hero-page { display: flex; align-items: flex-end; min-height: clamp(340px, 34cqi, 440px); }
.d-union .un-hero-body { position: relative; z-index: 2; padding-block: clamp(64px, 9cqi, 120px); }
.d-union .un-hero-page .un-hero-body { padding-block: 40px clamp(48px, 6cqi, 76px); }
.d-union .un-hero-title .un-hero-body { padding-block: 34px clamp(48px, 6cqi, 72px); }
.d-union .un-hero-bg { position: absolute; inset: 0; z-index: 0; }
.d-union .un-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.d-union .un-hero-bg > .ed-img-ph { width: 100%; height: 100%; }
/* A photo in your colours: grey, then multiplied by a sweep from the accent to a darker shade. */
.d-union .un-hero { --wash-a: color-mix(in srgb, var(--un-accent) 66%, #000); --wash-b: color-mix(in srgb, var(--un-accent) 30%, #000); }
.d-union .un-hero.un-tone-main { --wash-a: color-mix(in srgb, var(--un-main) 45%, #fff); --wash-b: var(--un-main); background: var(--un-main); }
.d-union .un-hero.un-tone-support { --wash-a: color-mix(in srgb, var(--un-support) 70%, #fff); --wash-b: color-mix(in srgb, var(--un-support) 60%, #000); background: var(--un-support); }
.d-union .un-wash-duotone .un-hero-bg img { filter: grayscale(1) contrast(1.12) brightness(1.08); }
.d-union .un-hero-wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.d-union .un-wash-duotone .un-hero-wash { background: linear-gradient(calc(105deg * var(--mirror, 1)), var(--wash-b) 0%, var(--wash-a) 75%); mix-blend-mode: multiply; }
.d-union .un-wash-duotone .un-hero-wash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(calc(90deg * var(--mirror, 1)), rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 70%); mix-blend-mode: normal; }
.d-union .un-wash-natural .un-hero-wash { background: linear-gradient(calc(90deg * var(--mirror, 1)), rgba(0, 0, 0, .7), rgba(0, 0, 0, .18) 75%); }
/* Without a photo: a plain band, pale ones with dark words. */
.d-union .un-hero.un-no-photo.un-tone-tint, .d-union .un-hero-title.un-tone-tint { background: var(--un-tint); color: var(--un-ink); }
.d-union .un-hero.un-no-photo.un-tone-grey, .d-union .un-hero-title.un-tone-grey { background: var(--un-grey); color: var(--un-ink); }
.d-union .un-hero-title { border-bottom: 1px solid var(--un-line); }

.d-union .un-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 26px; font-size: 14.5px; }
.d-union .un-crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.d-union .un-kicker { margin-bottom: 18px; font-size: clamp(17px, 1.6cqi, 20px); font-weight: 700; }
.d-union .un-h1 { max-width: 16ch; font-weight: 900; font-size: clamp(40px, 5.4cqi, 70px); line-height: 1.04; letter-spacing: -0.022em; }
.d-union .un-hero-home .un-h1 { max-width: 14ch; font-size: clamp(44px, 7cqi, 92px); }
.d-union .un-hero-title .un-h1 { max-width: 22ch; }
.d-union .un-lead { max-width: 46ch; margin-top: 22px; font-size: clamp(19px, 1.9cqi, 23px); line-height: 1.45; }
.d-union .un-hero .un-pills { margin-top: 36px; }

/* ---------- Shaped photo with text ---------- */
.d-union .un-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 7cqi, 110px); align-items: center; }
.d-union .un-feature.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.d-union .un-feature.flip > .un-shape { order: 2; }
.d-union .un-feature-copy { max-width: 580px; }
.d-union .un-strap { margin-top: 18px; font-size: clamp(22px, 2.3cqi, 30px); line-height: 1.25; }
.d-union .un-feature .un-prose { margin-top: 18px; }
.d-union .un-shape { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--un-grey); }
.d-union .un-shape img { width: 100%; height: 100%; object-fit: cover; }
.d-union .un-shape > .ed-img-ph { width: 100%; height: 100%; }
/* Curved at one top corner and cut away at the opposite bottom corner. */
.d-union .un-shape-cut { border-start-end-radius: 42% 30%; clip-path: polygon(0 0, 100% 0, 100% 100%, 24% 100%, 0 81%); }
.d-union .un-shape-cut.flip { border-start-end-radius: 0; border-start-start-radius: 42% 30%; clip-path: polygon(0 0, 100% 0, 100% 81%, 76% 100%, 0 100%); }
/* In a right-to-left language each photo is cut on its other side, so the cut faces the words. */
[dir="rtl"] .d-union .un-shape-cut { clip-path: polygon(0 0, 100% 0, 100% 81%, 76% 100%, 0 100%); }
[dir="rtl"] .d-union .un-shape-cut.flip { clip-path: polygon(0 0, 100% 0, 100% 100%, 24% 100%, 0 81%); }
/* Arrows point the way the page reads. The play triangle is the same in every language. */
[dir="rtl"] .d-union .un-chev, [dir="rtl"] .d-union .un-more a::before { scale: -1 1; }
.d-union .un-shape-arch { border-radius: 999px 999px 0 0 / 38% 38% 0 0; }
.d-union .un-bg-main .un-shape, .d-union .un-bg-support .un-shape, .d-union .un-bg-accent .un-shape { background: rgba(255, 255, 255, .08); }

/* ---------- Colour tiles ---------- */
.d-union .un-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.d-union .un-tiles.n-4, .d-union .un-tiles.n-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.d-union .un-tiles.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-union .un-tile-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 260px; padding: 30px 28px 92px; border-end-end-radius: 56px; background: var(--un-main); color: #fff; transition: transform .25s ease; }
.d-union .un-tile-card.un-tone-accent { background: var(--un-accent-deep); }
.d-union .un-tile-card.un-tone-support { background: var(--un-support); }
.d-union .un-tile-card.un-tone-tint { background: var(--un-tint); color: var(--un-ink); }
.d-union .un-tile-card h3 { font-size: clamp(23px, 2.1cqi, 27px); font-weight: 700; line-height: 1.15; }
.d-union .un-tile-card p { font-size: 17px; line-height: 1.5; opacity: .92; }
.d-union .un-round { position: absolute; inset-inline-start: 28px; bottom: 26px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color .2s, color .2s; }
.d-union .un-round .un-chev { margin-inline-start: -4px; }
.d-union a.un-tile-card:hover { transform: translateY(-4px); }
.d-union a.un-tile-card:hover .un-round { background: #fff; color: var(--un-main); }
.d-union a.un-tile-card.un-tone-tint:hover .un-round { background: var(--un-main); color: #fff; }

/* ---------- Row of cards that scrolls ---------- */
.d-union .un-arrows { display: flex; flex-shrink: 0; gap: 12px; }
.d-union .un-arrow { display: grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.d-union .un-arrow .un-chev { margin-inline-start: -4px; }
.d-union .un-arrow .un-chev.back { margin-block: 0 0; margin-inline: 0 -4px; }
.d-union .un-arrow:hover:not(:disabled) { background: var(--un-main); color: #fff; }
.d-union .un-arrow:disabled { opacity: .3; cursor: default; }
.d-union .un-fits .un-arrows { visibility: hidden; }
.d-union .un-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 22px) / 4); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.d-union .un-track::-webkit-scrollbar { display: none; }
.d-union .un-track:focus-visible { outline: 3px solid var(--un-accent); outline-offset: 6px; }
.d-union .un-card { display: flex; flex-direction: column; scroll-snap-align: start; }
.d-union .un-card-img { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--un-tint); }
.d-union .un-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.d-union .un-card-img > .ed-img-ph { width: 100%; height: 100%; }
.d-union a.un-card:hover .un-card-img img, .d-union a.un-post-card:hover .un-card-img img { transform: scale(1.05); }
.d-union .un-card h3 { margin-top: 22px; font-size: clamp(23px, 2.1cqi, 28px); line-height: 1.2; }
.d-union .un-card p { margin-top: 12px; font-size: 17px; line-height: 1.55; }
.d-union a.un-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
/* A card without a picture shows its heading large on one of the site's colours. */
.d-union .un-card-word { display: flex; align-items: flex-end; padding: 24px; color: #fff; background: var(--un-main); }
.d-union .un-card-word span { font: 900 clamp(26px, 2.6cqi, 34px)/1 var(--f-head); letter-spacing: -0.01em; text-transform: uppercase; }
.d-union .un-card-word.un-tone-accent { background: var(--un-accent-deep); }
.d-union .un-card-word.un-tone-support { background: var(--un-support); }
.d-union .un-card-word.un-tone-tint { background: var(--un-tint); color: var(--un-ink); }

/* ---------- Big figures ---------- */
.d-union .un-fig-h { margin-bottom: 44px; }
.d-union .un-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.d-union .un-figs.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-union .un-figs.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.d-union .un-fig { padding-inline-start: 24px; border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.d-union .un-fig b { display: block; font: 900 clamp(42px, 5.6cqi, 76px)/1 var(--f-head); letter-spacing: -0.025em; }
.d-union .un-fig span { display: block; max-width: 26ch; margin-top: 14px; font-size: 18px; line-height: 1.45; opacity: .9; }
.d-union .un-bg-main .un-fig b { color: color-mix(in srgb, var(--un-accent) 78%, #fff); }
.d-union :is(.un-bg-white, .un-bg-grey, .un-bg-tint) .un-fig b { color: var(--un-accent-deep); }

/* ---------- Rough, poster-like texture on a band ---------- */
.d-union .un-textured { overflow: hidden; isolation: isolate; }
.d-union .un-texture { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--un-main) 78%, #fff); opacity: .55;
  -webkit-mask: url(texture.svg) 0 0 / 900px 600px repeat; mask: url(texture.svg) 0 0 / 900px 600px repeat; }
.d-union :is(.un-bg-accent, .un-hero.un-tone-accent) > .un-texture { background: var(--un-main); opacity: .22; }
.d-union :is(.un-bg-support, .un-hero.un-tone-support) > .un-texture { background: color-mix(in srgb, var(--un-support) 60%, #fff); opacity: .35; }

/* ---------- News and events side by side, and rows with a date tile ---------- */
.d-union .un-digest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.d-union .un-digest .un-h2 { margin-bottom: 28px; }
.d-union .un-rows { display: grid; gap: 14px; }
.d-union .un-row { display: flex; align-items: stretch; min-height: 84px; background: #fff; color: var(--un-ink); box-shadow: 0 0 0 1px var(--un-line); }
.d-union .un-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; width: 84px; padding: 8px 4px; border-inline-end: 1px solid var(--un-line); line-height: 1.05; text-align: center; text-transform: uppercase; }
.d-union .un-tile .m { font-size: 14px; letter-spacing: .05em; }
.d-union .un-tile .d { font-size: 32px; }
.d-union .un-tile .y { margin-top: 4px; font-size: 13px; color: var(--un-soft); }
.d-union .un-tile-tba .m { font-size: 13px; font-weight: 700; }
.d-union .un-tile-tba .t { margin-top: 3px; font-size: 11.5px; line-height: 1.2; text-transform: none; }
.d-union .un-row-body { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 3px; padding-block: 14px 14px; padding-inline: 22px 20px; min-width: 0; }
.d-union .un-row-title { font-size: 19px; line-height: 1.3; }
.d-union .un-row-sub { font-size: 14.5px; color: var(--un-soft); }
.d-union .un-row > .un-chev { align-self: center; margin-inline-end: 26px; color: var(--un-accent-deep); }
.d-union a.un-row:hover .un-row-title { text-decoration: underline; text-underline-offset: 3px; }
.d-union .un-more { margin-top: 20px; font-weight: 700; }
.d-union .un-more a { text-decoration: underline; text-underline-offset: 4px; }
.d-union .un-more a::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }

/* ---------- News list, with a filter by year, and news cards ---------- */
.d-union .un-news.has-filter { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; }
.d-union .un-filter h2 { font-size: 32px; color: var(--un-main); }
.d-union .un-filter p { margin: 6px 0 18px; font-size: 16px; color: var(--un-soft); }
.d-union .un-filter-btns { display: flex; flex-direction: column; border-top: 1px solid var(--un-line); }
.d-union .un-filter-btns button { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; border: 0; border-bottom: 1px solid var(--un-line); background: none; color: var(--un-main); font: 600 17px/1.3 var(--f-body); text-align: start; cursor: pointer; }
.d-union .un-filter-btns button::after { content: ""; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--un-soft); }
.d-union .un-filter-btns button[aria-pressed="true"] { color: var(--un-accent-deep); }
.d-union .un-filter-btns button[aria-pressed="true"]::after { background: var(--un-accent-deep); box-shadow: none; }
.d-union .un-filter-btns button:hover { color: var(--un-accent-deep); }
.d-union .un-news-item { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 32px; align-items: start; padding-block: 28px; border-bottom: 1px solid var(--un-line); }
.d-union .un-news-item:first-child { padding-top: 0; }
.d-union .un-news-item[hidden] { display: none; }
.d-union .un-news-item h3 { font-size: clamp(21px, 2cqi, 25px); line-height: 1.3; color: var(--un-main); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.d-union a.un-news-item:hover h3 { color: var(--un-accent-deep); }
.d-union .un-news-item time { display: block; margin-top: 10px; font-size: 15px; color: var(--un-soft); }
.d-union .un-news-item p { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--un-soft); }
.d-union .un-news-pic { overflow: hidden; aspect-ratio: 1; border-start-end-radius: 42% 30%; background: var(--un-tint); }
.d-union .un-news-pic > img { width: 100%; height: 100%; object-fit: cover; }
.d-union .un-mark { display: grid; place-items: center; width: 100%; height: 100%; }
.d-union .un-mark img { width: 62%; height: auto; }
.d-union .un-post-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 26px; }
.d-union .un-post-card { display: flex; flex-direction: column; }
.d-union .un-post-card .un-card-img { aspect-ratio: 3 / 2; border-start-end-radius: 64px; }
.d-union .un-post-card time { margin-top: 18px; font-size: 15px; color: var(--un-soft); }
.d-union .un-post-card h3 { margin-top: 6px; font-size: 23px; font-weight: 700; line-height: 1.25; }
.d-union .un-post-card p { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--un-soft); }
.d-union a.un-post-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Events with date tiles; past events fold away ---------- */
.d-union .un-events { display: grid; gap: 16px; }
.d-union .un-event { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; background: #fff; box-shadow: 0 0 0 1px var(--un-line); }
.d-union .un-event-date .un-tile { width: auto; height: 100%; min-height: 128px; }
.d-union .un-event-date .un-tile .d { font-size: 42px; }
.d-union .un-event-date .un-tile-tba { padding-inline: 10px; }
.d-union .un-event-date .un-tile-tba .t { font-size: 13px; }
.d-union .un-event-body { padding: 24px 28px; }
.d-union .un-kind { margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--un-accent-deep); }
.d-union .un-event h3 { font-size: clamp(22px, 2.1cqi, 27px); line-height: 1.2; }
.d-union .un-event-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 8px; font-size: 16px; color: var(--un-soft); }
.d-union .un-event-meta > span + span::before { content: "·"; margin: 0 10px; }
.d-union .un-event-text { margin-top: 10px; font-size: 17px; line-height: 1.55; max-width: 70ch; }
.d-union .un-event-go { display: flex; align-items: center; padding-block: 24px 24px; padding-inline: 0 28px; }
.d-union .un-event-go:not(:has(*)) { padding: 0; }
.d-union .un-event.is-past .un-tile { color: var(--un-soft); }
.d-union .un-event.is-past .un-kind { color: var(--un-soft); }
.d-union .un-past { margin-top: 40px; border-top: 1px solid var(--un-line); }
.d-union .un-past summary { display: flex; align-items: center; gap: 14px; padding: 24px 0; list-style: none; cursor: pointer; font: 700 22px/1.2 var(--f-head); color: var(--un-main); }
.d-union .un-past summary::-webkit-details-marker { display: none; }
.d-union .un-past summary .un-chev { margin-left: auto; transform: rotate(135deg); transition: transform .2s; }
.d-union .un-past[open] summary .un-chev { transform: rotate(-45deg); }
.d-union .un-count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--un-main); color: #fff; font-size: 14px; }

/* ---------- Publications to download ---------- */
.d-union .un-doc { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 26px; align-items: center; padding-block: 26px; border-bottom: 1px solid var(--un-line); }
.d-union .un-doc:first-child { border-top: 1px solid var(--un-line); }
.d-union .un-doc-icon { display: grid; place-items: end center; width: 56px; height: 70px; padding-bottom: 11px; box-sizing: border-box; background: var(--un-accent-deep); color: #fff; font-size: 13px; font-weight: 900; letter-spacing: .08em; clip-path: polygon(0 0, 68% 0, 100% 24%, 100% 100%, 0 100%); }
.d-union .un-doc h3 { font-size: clamp(20px, 1.9cqi, 24px); font-weight: 700; line-height: 1.25; }
.d-union .un-doc p { margin-top: 6px; font-size: 17px; line-height: 1.5; color: var(--un-soft); }
.d-union .un-doc .un-doc-meta { font-size: 14.5px; }
.d-union :is(.un-bg-main, .un-bg-support, .un-bg-accent) :is(.un-doc p, .un-news-item p, .un-news-item time) { color: inherit; opacity: .85; }

/* ---------- Slogan band ---------- */
.d-union .un-slogan { overflow: hidden; isolation: isolate; padding-block: clamp(72px, 10cqi, 140px); }
.d-union .un-slogan .un-wrap { position: relative; z-index: 1; }
.d-union .un-slogan-mark { position: absolute; z-index: 0; inset-inline-end: -6%; top: 50%; width: min(48%, 700px); height: auto; opacity: .12; transform: translateY(-50%) rotate(-6deg); pointer-events: none; }
.d-union .un-slogan-text { max-width: 15ch; font: 900 clamp(44px, 7cqi, 100px)/1 var(--f-head); letter-spacing: -0.025em; text-wrap: balance; }
.d-union .un-slogan-soft { max-width: 42ch; margin-top: 26px; font-size: clamp(20px, 2cqi, 26px); line-height: 1.4; opacity: .94; }
.d-union :is(.un-bg-white, .un-bg-grey, .un-bg-tint).un-slogan .un-slogan-text { color: var(--un-main); }

/* ---------- Help band ---------- */
.d-union .un-cta .un-wrap { position: relative; z-index: 1; }
.d-union .un-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 56px; }
.d-union .un-cta-row > div:first-child { max-width: 680px; }
.d-union .un-cta .un-pills { margin-top: 0; }

/* ---------- Contact panel ---------- */
.d-union .un-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.d-union .un-address { margin-top: 24px; font-size: 18px; line-height: 1.55; }
.d-union .un-contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.d-union .un-contact-cards > .un-contact-card:last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
.d-union .un-contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 30px 28px; border-start-end-radius: 56px; background: #fff; color: var(--un-ink); box-shadow: 0 0 0 1px var(--un-line); }
.d-union .un-contact-card h3 { font-size: 22px; font-weight: 700; }
.d-union .un-contact-card p { font-size: 17px; line-height: 1.5; color: var(--un-soft); }
.d-union .un-big-link { font: 900 27px/1.2 var(--f-head); color: var(--un-main); letter-spacing: -0.01em; }
.d-union .un-mail { font-weight: 700; color: var(--un-accent-deep); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.d-union .un-contact-card .btn { margin-top: 6px; }

/* ---------- A news post's own page ---------- */
.d-union .un-post { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; }
.d-union .un-post-main { max-width: 760px; }
.d-union .un-post-pic { aspect-ratio: 16 / 10; margin-bottom: 40px; }
.d-union .un-post-side { position: sticky; top: 24px; }
.d-union .un-post-side h2 { margin-bottom: 18px; font-size: 26px; }
.d-union .un-post-side .un-row-title { font-size: 16.5px; }

/* ---------- Footer ---------- */
.d-union .un-foot { padding-block: 56px 28px; background: var(--un-foot); color: #fff; font-size: 16.5px; line-height: 1.55; }
.d-union .un-foot-brand { display: inline-flex; }
.d-union .un-foot-brand img { height: 58px; width: auto; }
.d-union .un-foot .un-wordmark { color: #fff; }
.d-union .un-foot-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.7fr) auto; gap: 36px 48px; align-items: start; margin-top: 40px; }
.d-union .un-foot nav ul { display: grid; gap: 8px; }
.d-union .un-foot nav a:hover, .d-union .un-foot-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.d-union .un-foot-help h2 { margin-bottom: 10px; font-size: 26px; }
.d-union .un-foot-help p { opacity: .9; }
.d-union .un-foot-contact { margin-top: 14px; font-weight: 700; opacity: 1 !important; }
.d-union .un-foot-small { font-size: 14px; opacity: .78; }
.d-union .un-foot-help .un-foot-small { margin-top: 10px; }
.d-union .un-foot .un-pills { margin-top: 0; }
.d-union .un-foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 52px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .22); }
.d-union .un-foot .sw-social { display: flex; flex-wrap: wrap; gap: 10px; }
.d-union .un-foot .sw-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; transition: background-color .2s, color .2s; }
.d-union .un-foot .sw-social a:hover { background: #fff; color: var(--un-main); }
.d-union .un-foot .sw-social svg { display: block; width: 18px; height: 18px; }

/* ---------- The header's round buttons: the shared tools (shared/tools.css) in this design's colours ---------- */
.site.d-union {
  --tl-main: var(--un-main); --tl-accent: var(--un-accent-deep); --tl-ink: var(--un-ink); --tl-soft: var(--un-soft); --tl-line: var(--un-line); --tl-grey: var(--un-grey);
  --tl-font: var(--f-body); --tl-wrap: var(--wrap); --tl-gutter: var(--gutter); --tl-corner: 28px; --tl-button: 999px; --tl-tool-fill: var(--un-main); --tl-tool-on: #fff;
}
.d-union .un-bar { position: relative; }
.d-union .tl-tool { color: var(--un-main); background: #fff; }
.d-union .tl-tool:hover, .d-union .tl-tool[aria-expanded="true"] { background: var(--un-main); color: #fff; }
.d-union .un-bar-row { gap: 14px; }
.d-union .un-nav-links { margin-inline-end: auto; }
.d-union .un-bar-row > .un-brand { margin-inline-end: 20px; }
/* When the menu folds, the round buttons sit next to the menu button instead. */
@container site (max-width: 980px) {
  .d-union .un-badge { width: 100px; inset-inline-end: var(--gutter); top: calc(100% - 6px); } .d-union :is(.tl-tool-lang, .tl-tool-a11y:not(.tl-tool-lang ~ *)) { margin-inline-start: auto; } .d-union .un-nav-toggle { margin-inline-start: 0; } }
.d-union.sw-fold :is(.tl-tool-lang, .tl-tool-a11y:not(.tl-tool-lang ~ *)) { margin-inline-start: auto; }
.d-union.sw-fold .un-nav-toggle { margin-inline-start: 0; }

/* ---------- High contrast, chosen in the header panel ---------- */
html.a11y-contrast .site.d-union {
  --un-main: #000; --un-ink: #000; --un-soft: #1b1b1b; --un-line: #000; --un-grey: #fff; --un-tint: #fff;
  --un-accent-deep: color-mix(in srgb, var(--un-accent) 55%, #000);
  --un-support: color-mix(in srgb, var(--c-support, #1e5b63) 50%, #000);
}
html.a11y-contrast .site.d-union a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
/* A whole card that is one link underlines only its heading, not every line of its words. */
html.a11y-contrast .site.d-union a:not(.btn):has(:is(h2, h3, h4)) { text-decoration: none; }
html.a11y-contrast .site.d-union a:not(.btn) :is(h2, h3, h4) { text-decoration: underline; text-underline-offset: 4px; }
html.a11y-contrast .site.d-union :is(.un-row, .un-event, .un-contact-card, .un-doc, .un-logos) { box-shadow: 0 0 0 2px #000; }
html.a11y-contrast .site.d-union .un-hero-wash { background: rgba(0, 0, 0, .74) !important; mix-blend-mode: normal !important; }
html.a11y-contrast .site.d-union .un-hero-wash::after { display: none; }
html.a11y-contrast .site.d-union .un-texture { display: none; }
html.a11y-contrast .site.d-union :focus-visible { outline: 3px solid #ffd800; outline-offset: 3px; }
html.a11y-contrast .site.d-union .un-bg-tint, html.a11y-contrast .site.d-union .un-bg-grey { border-block: 2px solid #000; }

/* ---------- Moving banner: slides that stay a few seconds, then slide along slowly ---------- */
.d-union .un-slider { position: relative; overflow: hidden; }
.d-union .un-slides { display: grid; overflow: hidden; }
.d-union .un-slide { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.d-union .un-slide:is(.is-current, .is-entering, .is-leaving) { visibility: visible; }
.d-union .un-slider .un-hero-body { padding-bottom: clamp(64px, 9cqi, 120px); }
/* The buttons are small, pale and tucked into the bottom corner, so they stay out of the way. They
   brighten when the mouse or keyboard reaches them. */
.d-union .un-slider-ui { position: absolute; z-index: 5; inset-inline-end: 16px; bottom: 14px; pointer-events: none; }
.d-union .un-slider-btns { display: flex; gap: 10px; pointer-events: auto; opacity: .5; transition: opacity .25s; }
.d-union .un-slider:hover .un-slider-btns, .d-union .un-slider-btns:focus-within { opacity: 1; }
.d-union .un-slider .un-arrow { width: 42px; height: 42px; }
.d-union .un-slider .un-arrow .un-chev { width: 10px; height: 10px; margin-inline-start: -4px; border-width: 2.5px; }
.d-union .un-slider .un-arrow .un-chev.back { margin-block: 0 0; margin-inline: 0 -4px; }
.d-union .un-arrow-light { color: #fff; background: rgba(0, 0, 0, .18); }
.d-union .un-arrow-light:hover:not(:disabled) { background: #fff; color: var(--un-main); }
.d-union .un-pause span { position: relative; display: block; width: 12px; height: 14px; }
.d-union .un-pause span::before, .d-union .un-pause span::after { content: ""; position: absolute; top: 0; width: 4px; height: 14px; border-radius: 1px; background: currentColor; }
.d-union .un-pause span::before { inset-inline-start: 0; }
.d-union .un-pause span::after { inset-inline-end: 0; }
.d-union .un-pause[aria-pressed="true"] span { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.d-union .un-pause[aria-pressed="true"] span::before, .d-union .un-pause[aria-pressed="true"] span::after { display: none; }
/* In the editor every slide shows, one under the other. */
.d-union .un-slider-edit .un-slides { display: block; }
.d-union .un-slider-edit .un-slide { visibility: visible; }
.d-union .un-slider-edit .un-slide + .un-slide { border-top: 4px solid #fff; }
@media (prefers-reduced-motion: no-preference) {
  .motion .d-union .un-slide { transition: transform 1.5s cubic-bezier(.65, .05, .25, 1); }
  .motion .d-union .un-slide .un-hero-bg:not(.in) img { transform: none; }
}

/* ---------- People with photos, and the logo wall ---------- */
.d-union .un-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; }
.d-union .un-people.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.d-union .un-person-img { overflow: hidden; aspect-ratio: 4 / 5; border-start-end-radius: 42% 30%; background: var(--un-tint); }
.d-union .un-person-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.d-union .un-person-img > .ed-img-ph { width: 100%; height: 100%; }
.d-union .un-person h3 { margin-top: 20px; font-size: clamp(22px, 2cqi, 26px); font-weight: 700; line-height: 1.2; }
.d-union .un-person-role { margin-top: 6px; font-size: 13.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--un-accent-deep); }
.d-union .un-bg-main .un-person-role, .d-union .un-bg-support .un-person-role, .d-union .un-bg-accent .un-person-role { color: inherit; opacity: .85; }
.d-union .un-person-text { margin-top: 12px; font-size: 16.5px; line-height: 1.55; color: var(--un-soft); }
.d-union :is(.un-bg-main, .un-bg-support, .un-bg-accent) .un-person-text { color: inherit; opacity: .92; }
.d-union .un-logos { display: grid; justify-items: center; gap: 20px; margin: 0; padding: clamp(20px, 3cqi, 40px); background: #fff; box-shadow: 0 0 0 1px var(--un-line); }
.d-union .un-logos img { width: auto; max-width: min(100%, 640px); height: auto; }
.d-union .un-logos figcaption { max-width: 60ch; font-size: 16px; text-align: center; color: var(--un-soft); }

/* ---------- Narrower screens ---------- */
@container site (max-width: 1100px) {
  .d-union .un-track { grid-auto-columns: calc((100% - 2 * 22px) / 3); }
  .d-union .un-tiles.n-4, .d-union .un-tiles.n-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-union .un-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); }
  .d-union .un-foot-grid > .un-pills { grid-column: 1 / -1; }
}
@container site (max-width: 980px) {
  .d-union .un-badge { width: 100px; inset-inline-end: var(--gutter); top: calc(100% - 6px); }
  .d-union .un-feature, .d-union .un-feature.flip { grid-template-columns: 1fr; }
  .d-union .un-feature.flip > .un-shape { order: 0; }
  .d-union .un-feature > .un-shape { width: min(100%, 460px); }
  .d-union .un-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-union .un-people, .d-union .un-people.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-union .un-figs.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-union .un-digest-grid { grid-template-columns: 1fr; }
  .d-union .un-news.has-filter { grid-template-columns: 1fr; gap: 36px; }
  .d-union .un-filter-btns { flex-direction: row; flex-wrap: wrap; gap: 10px; border-top: 0; }
  .d-union .un-filter-btns button { gap: 10px; padding: 9px 16px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--un-line); font-size: 15.5px; }
  .d-union .un-filter-btns button::after { display: none; }
  .d-union .un-filter-btns button[aria-pressed="true"] { background: var(--un-accent-deep); color: #fff; box-shadow: none; }
  .d-union .un-post-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-union .un-post { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .d-union .un-post-side { position: static; }
  .d-union .un-contact { grid-template-columns: 1fr; gap: 32px; }
  .d-union .un-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .d-union .un-foot-help { grid-column: 1 / -1; }
}
@container site (max-width: 700px) {
  /* The quick links wrap onto a second line rather than run off the edge. */
  .d-union .un-top ul { flex-wrap: wrap; justify-content: center; gap: 2px 20px; font-size: 13.5px; }
  .d-union .un-brand img { height: 42px; }
  .d-union .un-bar-row { padding-block: 14px; }
  .d-union .un-track { grid-auto-columns: 78%; gap: 16px; }
  .d-union .un-tiles, .d-union .un-tiles.n-2, .d-union .un-tiles.n-4, .d-union .un-tiles.n-8 { grid-template-columns: 1fr; }
  .d-union .un-tile-card { min-height: 0; }
  .d-union .un-figs, .d-union .un-figs.n-2, .d-union .un-figs.n-4 { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .d-union .un-fig { padding-inline-start: 16px; }
  .d-union .un-fig span { font-size: 16px; }
  .d-union .un-post-cards { grid-template-columns: 1fr; }
  .d-union .un-news-item { grid-template-columns: minmax(0, 1fr) 92px; gap: 18px; }
  .d-union .un-event { grid-template-columns: 84px minmax(0, 1fr); }
  .d-union .un-event-date .un-tile { min-height: 100%; }
  .d-union .un-event-date .un-tile .d { font-size: 32px; }
  .d-union .un-event-date .un-tile-tba .t { font-size: 11.5px; }
  .d-union .un-event-body { padding: 18px 18px 16px; }
  .d-union .un-event-go { grid-column: 2; padding: 0 18px 20px; }
  .d-union .un-event-meta { flex-direction: column; }
  .d-union .un-event-meta > span + span::before { content: none; }
  .d-union .un-doc { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .d-union .un-doc-icon { width: 44px; height: 56px; padding-bottom: 8px; font-size: 11px; }
  .d-union .un-doc > .btn { grid-column: 2; justify-self: start; }
  .d-union .un-row-title { font-size: 17px; }
  .d-union .un-tile { width: 70px; }
  .d-union .un-row > .un-chev { margin-inline-end: 18px; }
  .d-union .un-head-row:has(.un-arrows) { align-items: flex-end; }
  .d-union .un-arrow { width: 44px; height: 44px; }
  .d-union .un-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .d-union .btn.un-pill { white-space: normal; text-align: center; }
}
@container site (max-width: 440px) {
  .d-union .un-figs, .d-union .un-figs.n-2, .d-union .un-figs.n-4 { grid-template-columns: 1fr; }
  .d-union .un-news-item { grid-template-columns: 1fr; }
  .d-union .un-news-pic { display: none; }
  .d-union .un-people, .d-union .un-people.n-4 { grid-template-columns: 1fr; }
  .d-union .un-person-img { max-width: 300px; }
  .d-union .un-foot-grid { grid-template-columns: 1fr; }
  .d-union .un-arrows { display: none; }
}

/* ---------- Motion on the public site only (the editor never adds .motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .d-union .sw-rise { transition: opacity .8s ease, transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
  .motion .d-union .sw-rise:not(.in) { opacity: 0; transform: translateY(24px); }
  .motion .d-union [data-words] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0 .14em; padding-inline: 0 .08em; margin-block: 0 -.14em; margin-inline: 0 -.08em; }
  .motion .d-union [data-words] .w > span { display: inline-block; transition: transform .9s cubic-bezier(.2, .75, .2, 1); transition-delay: calc(var(--d, 0ms) + var(--wi) * 55ms); }
  .motion .d-union [data-words]:not(.in) .w > span { transform: translateY(115%); }
  .motion .d-union :is(.un-shape, .un-card-img, .un-hero-bg) img { transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); }
  .motion .d-union :is(.un-shape, .un-card-img, .un-hero-bg):not(.in) img { transform: scale(1.09); }
  /* A banner photo set to drift keeps zooming slowly in and out after it settles in. */
  .motion .d-union .un-drift .un-hero-bg { animation: un-breathe 18s ease-in-out 1.8s infinite alternate; }
  @keyframes un-breathe { from { transform: scale(1); } to { transform: scale(1.1) translate(-1.2%, -0.8%); } }
}

/* ---------- Springwood's public-site extras, in this design's look ---------- */
.x-union { font-family: var(--f-body); }
.x-union .sw-to-top { background: var(--un-accent-deep); }
.x-union .sw-to-top:hover { background: var(--un-main); }
/* The forms: the same questions and checks as Springwood's, with pill buttons and this design's colours. */
.x-union, .d-union .sw-form-preview { --forest: var(--un-accent-deep); --forest-ink: var(--un-accent-deep); --sans: var(--f-body); --mist: var(--un-grey); }
.x-union .sw-modal-panel, .d-union .sw-form-preview .sw-modal-panel { border-start-start-radius: 0; border-start-end-radius: 56px; border-end-end-radius: 0; border-end-start-radius: 0; }
.x-union .sw-modal-head h2, .d-union .sw-form-preview .sw-modal-head h2 { font-weight: 900; letter-spacing: -0.02em; }
.x-union .btn.sw-navy, .d-union .sw-form-preview .btn.sw-navy { padding: 15px 30px; border-radius: 999px; background: var(--un-accent-deep); font-size: 17px; font-weight: 700; }
.x-union .btn.sw-navy:hover { background: color-mix(in srgb, var(--un-accent-deep) 80%, #000); }
.x-union .sw-fg :is(input, select, textarea), .d-union .sw-form-preview .sw-fg :is(input, select, textarea) { border-radius: 6px; }
.x-union .sw-choice, .d-union .sw-form-preview .sw-choice { border-radius: 6px; }