/* Home page (template-home.php): the hero with the video, the tiles, the stats and the banners. The bands use content.css.
   BEM "wttc-hv" (hero video). Colours, radii and type follow DESIGN.md. */


.wttc-home { background: var(--wttc-white); }

/* ---------- Hero: full-screen carousel. Slide 1 = the brand (video), then featured items and the latest news. The queue of cards on the
   right never shows the active slide; the next card grows into the background (see home.js). Veil only behind the text. ---------- */
.wttc-hv { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 560px; overflow: hidden; background: var(--wttc-navy); color: var(--wttc-white); }
.wttc-hv__bgs { position: absolute; inset: 0; }
.wttc-hv__bg { position: absolute; inset: 0; opacity: 0; }
.wttc-hv__bg.is-on { opacity: 1; }
.wttc-hv__img, .wttc-hv__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wttc-hv__video { opacity: 0; transition: opacity 1.2s ease; }
.wttc-hv__video.is-playing { opacity: 1; }
/* Ken Burns, very subtle: the photo behind the active slide zooms in about 7% and drifts a hair over 14 s (linear). It starts at scale 1 each time a slide becomes active,
   which is exactly when the morph from the card lands, so the hand-over is seamless. Slides with a video are left alone; it pauses when the hero is off-screen. */
.wttc-hv__bg.is-on:not(:has(.wttc-hv__video)) .wttc-hv__img { animation: wttc-hv-kb 14s linear forwards; will-change: transform; }
.wttc-hv.is-away .wttc-hv__bg.is-on .wttc-hv__img { animation-play-state: paused; }
@keyframes wttc-hv-kb { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.07) translate3d(-1%, -.7%, 0); } }
.wttc-hv::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 52% 62% at 0% 100%, rgba(21, 27, 52, .78) 0%, rgba(21, 27, 52, .5) 45%, rgba(21, 27, 52, 0) 100%), linear-gradient(180deg, rgba(21, 27, 52, .34), rgba(21, 27, 52, 0) 14%), linear-gradient(0deg, rgba(21, 27, 52, .26), rgba(21, 27, 52, 0) 16%); }
.wttc-hv__in { position: absolute; z-index: 2; inset: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; padding: 0 clamp(24px, 4vw, 56px) clamp(32px, 5vw, 56px); }
.wttc-hv__copies { display: grid; flex: 1; min-width: 0; max-width: 760px; padding-bottom: 6px; }
.wttc-hv__cp { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.wttc-hv__cp.is-on { opacity: 1; visibility: visible; transition: visibility 0s .6s; }
.wttc-hv__chip { display: inline-block; margin: 0; padding: 5px 12px; border-radius: var(--wttc-radius); background: var(--wttc-white); color: var(--wttc-navy); font: 500 11px/1.3 var(--wttc-font-sans); letter-spacing: .4px; text-transform: uppercase; }
.wttc-hv__meta { display: inline-block; margin-left: 12px; color: rgba(255, 255, 255, .85); font: 500 12px/1 var(--wttc-font-sans); letter-spacing: .4px; text-transform: uppercase; }
.wttc-hv__title { max-width: 15ch; margin: 22px 0 0; color: var(--wttc-white); font: 400 clamp(44px, min(5.4vw, 9vh), 76px)/1.03 var(--wttc-font-serif); letter-spacing: -.8px; text-wrap: balance; }
.wttc-hv__cp.is-long .wttc-hv__title { max-width: 30ch; font-size: clamp(26px, 3vw, 42px); line-height: 1.12; letter-spacing: -.4px; }
.wttc-hv__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.wttc-hv__button { margin: 0; }
/* discreet "Watch video" next to the main button: a ring with a play triangle and a text, no box */
.wttc-hv__play, .wttc-hv__play:hover, .wttc-hv__play:focus-visible, .wttc-hv__play:active { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 4px 2px; border: 0; border-radius: 0; background: transparent; color: var(--wttc-white); font: 500 14px/1.2 var(--wttc-font-sans); cursor: pointer; }
.wttc-hv__play-ic { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; transition: background .2s, border-color .2s, color .2s, transform .35s cubic-bezier(.22, 1, .36, 1); }
.wttc-hv__play .wttc-hv__ic { width: 12px; height: 12px; margin-left: 2px; }
.wttc-hv__play:hover .wttc-hv__play-ic, .wttc-hv__play:focus-visible .wttc-hv__play-ic { background: var(--wttc-accent); border-color: var(--wttc-accent); color: var(--wttc-navy); transform: scale(1.06); }
.wttc-hv__play:focus-visible { outline: 2px solid var(--wttc-accent); outline-offset: 4px; }
.wttc-hv a.wttc-button--light, .wttc-hv a.wttc-button--light:visited { background: var(--wttc-white); border-color: var(--wttc-white); color: var(--wttc-navy); }
.wttc-hv a.wttc-button--light:hover, .wttc-hv a.wttc-button--light:focus-visible, .wttc-hv a.wttc-button--light:active { background: var(--wttc-accent); border-color: var(--wttc-accent); color: var(--wttc-navy); }
.wttc-hv__ic { display: block; flex: none; width: 16px; height: 16px; }

/* the queue (as wide as its cards) with the controls under it */
.wttc-hv__rail { flex: none; display: flex; flex-direction: column; gap: 22px; width: max-content; max-width: 100%; min-width: 0; margin-left: auto; }
.wttc-hv__cards { display: flex; align-items: flex-end; justify-content: flex-end; gap: 14px; overflow: hidden; padding: 4px 0 6px; }
.wttc-hv__card { position: relative; flex: none; width: clamp(120px, 11vw, 168px); aspect-ratio: 1 / 1.08; margin: 0; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--wttc-navy); color: var(--wttc-white); text-align: left; cursor: pointer; will-change: transform; }
.wttc-hv__card img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wttc-hv__card::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(21, 27, 52, .9), rgba(21, 27, 52, .05) 65%); }
.wttc-hv__card span { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--wttc-white); font: 400 15px/1.2 var(--wttc-font-serif); text-overflow: ellipsis; white-space: normal; text-align: left; max-height: 2.4em; transition: max-height .45s cubic-bezier(.22, 1, .36, 1); }
/* hover/focus: the card keeps its white text and unfolds the whole title (it is cut at two lines with "..." at rest) */
.wttc-hv__card, .wttc-hv__card:hover, .wttc-hv__card:focus-visible, .wttc-hv__card:active { background: var(--wttc-navy); border-color: transparent; color: var(--wttc-white); }
.wttc-hv__card::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(21, 27, 52, .94) 0%, rgba(21, 27, 52, .78) 100%); opacity: 0; transition: opacity .3s ease; }
.wttc-hv__card:hover::after, .wttc-hv__card:focus-within::after { opacity: 1; }
.wttc-hv__card:hover span, .wttc-hv__card:focus-within span { color: var(--wttc-white); }
.wttc-hv__pick, .wttc-hv__pick:hover, .wttc-hv__pick:focus-visible, .wttc-hv__pick:active { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--wttc-white); text-align: left; cursor: pointer; }
.wttc-hv__card:has(.wttc-hv__pick:focus-visible) { outline: 2px solid var(--wttc-accent); outline-offset: 3px; }
/* small "Watch video" button that appears on the unfolded card of the brand slide */
.wttc-hv__watch, .wttc-hv__watch:visited { position: absolute; z-index: 3; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border: 0; border-radius: 999px; background: var(--wttc-white); color: var(--wttc-navy); font: 500 11px/1 var(--wttc-font-sans); letter-spacing: .2px; cursor: pointer; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .3s ease .12s, transform .4s cubic-bezier(.22, 1, .36, 1) .12s, background .2s; }
.wttc-hv__watch .wttc-hv__ic { width: 12px; height: 12px; }
.wttc-hv__card:hover .wttc-hv__watch, .wttc-hv__card:focus-within .wttc-hv__watch { opacity: 1; transform: none; pointer-events: auto; }
.wttc-hv__watch:hover, .wttc-hv__watch:focus-visible { background: var(--wttc-accent); color: var(--wttc-navy); }
/* the video viewer */
.wttc-hv__modal { width: min(1100px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #000; color: var(--wttc-white); }
.wttc-hv__modal::backdrop { background: rgba(21, 27, 52, .82); }
.wttc-hv__modal-stage video { display: block; width: 100%; max-height: calc(100dvh - 32px); background: #000; }
.wttc-hv__modal-stage.is-embed { aspect-ratio: 16 / 9; }
.wttc-hv__modal-stage.is-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.wttc-hv__modal-x, .wttc-hv__modal-x:hover { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--wttc-white); color: var(--wttc-navy); cursor: pointer; }
.wttc-hv__modal-x:hover, .wttc-hv__modal-x:focus-visible { background: var(--wttc-accent); }
.wttc-hv__pick:focus-visible, .wttc-hv__watch:focus-visible, .wttc-hv__nav:focus-visible { outline: 2px solid var(--wttc-accent); outline-offset: 3px; }
.wttc-hv__card.is-gone { display: none; }
.wttc-hv__ctrl { display: flex; align-items: center; gap: 12px; width: 0; min-width: 100%; }
.wttc-hv__nav { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: rgba(21, 27, 52, .25); color: var(--wttc-white); line-height: 0; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.wttc-hv__nav .wttc-hv__ic { width: 14px; height: 14px; }
.wttc-hv__nav--prev .wttc-hv__ic { transform: rotate(180deg); }
.wttc-hv__nav:hover, .wttc-hv__nav:focus-visible { background: var(--wttc-accent); border-color: var(--wttc-accent); color: var(--wttc-navy); }
.wttc-hv__line { position: relative; flex: 1; min-width: 0; height: 2px; margin: 0 4px; background: rgba(255, 255, 255, .28); }
.wttc-hv__line::after { content: ""; position: absolute; inset: 0; background: var(--wttc-accent); transform-origin: 0 50%; transform: scaleX(0); }
.wttc-hv__line.is-run::after { animation: wttc-hv-fill 7s linear forwards; }
.wttc-hv:hover .wttc-hv__line.is-run::after, .wttc-hv.is-away .wttc-hv__line.is-run::after, .wttc-hv:focus-within .wttc-hv__line.is-run::after { animation-play-state: paused; }
@keyframes wttc-hv-fill { to { transform: scaleX(1); } }
.wttc-hv__count { display: flex; align-items: baseline; gap: 4px; flex: none; font: 400 clamp(22px, 2vw, 30px)/1 var(--wttc-font-serif); letter-spacing: -.5px; }
.wttc-hv__count small { margin-left: 4px; font: 500 11px/1 var(--wttc-font-sans); letter-spacing: .4px; opacity: .7; }
/* odometer: the same construction as in WTTC Core (rolling strip of digits) */
.wttc-hv__odo { display: inline-flex; align-items: flex-start; height: 1.15em; overflow: hidden; vertical-align: bottom; }
.wttc-hv__odo-col { display: block; width: .62em; height: 1.15em; overflow: hidden; text-align: center; }
.wttc-hv__odo-strip { display: flex; flex-direction: column; will-change: transform; }
.wttc-hv__odo-strip span { display: block; height: 1.15em; line-height: 1.15em; }
.wttc-hv__morph { position: absolute; z-index: 1; margin: 0; overflow: hidden; pointer-events: none; }
.wttc-hv__morph img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Strip: two statements side by side under the hero (Group style "Strip") ---------- */
.wttc-content > .is-style-wttc-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(var(--wttc-container, 1240px), calc(100% - 48px)); margin: 0 auto; padding: 0; border-bottom: 1px solid var(--wttc-border, #d1cfc8); }
.wttc-content > .is-style-wttc-strip > .wp-block-group { margin: 0; padding: 34px 40px 34px 0; }
.wttc-content > .is-style-wttc-strip > .wp-block-group + .wp-block-group { padding-left: 40px; border-left: 1px solid var(--wttc-border, #d1cfc8); }
.wttc-content > .is-style-wttc-strip h3 { margin: 0; font: 400 clamp(22px, 2.2vw, 28px)/1.2 var(--wttc-font-serif); }
.wttc-content > .is-style-wttc-strip p { max-width: 48ch; margin: 8px 0 0; color: rgba(21, 27, 52, .82); }

/* ---------- Tiles: a picture with its title, line and an arrow; the whole tile is the link ---------- */
.wttc-content .is-style-wttc-tiles, .wttc-content .is-style-wttc-tiles-grid, .wttc-content .is-style-wttc-tiles-4 { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.wttc-content .is-style-wttc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(300px, 1fr)); }
.wttc-content .is-style-wttc-tiles > :nth-child(1) { grid-row: 1 / span 2; }
.wttc-content .is-style-wttc-tiles > :nth-child(4) { grid-column: 2 / span 2; }
.wttc-content .is-style-wttc-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(340px, 1fr); }
.wttc-content .is-style-wttc-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(380px, 1fr); }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; overflow: hidden; border-radius: 16px; background: var(--wttc-navy); color: var(--wttc-white); isolation: isolate; padding: clamp(22px, 2.4vw, 32px); }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group > .wp-block-image { position: absolute; inset: 0; z-index: -2; margin: 0; }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group > .wp-block-image { transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group > .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(21, 27, 52, .86) 0%, rgba(21, 27, 52, .38) 52%, rgba(21, 27, 52, .05) 100%); }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group:hover > .wp-block-image { transform: scale(1.05); }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) h3 { margin: 0; padding-right: 64px; color: var(--wttc-white); font: 400 clamp(22px, 2.2vw, 32px)/1.15 var(--wttc-font-serif); text-wrap: balance; }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) h3 a, .wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) h3 a:hover { color: var(--wttc-white); text-decoration: none; }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) h3 a::after { content: ""; position: absolute; inset: 0; }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) p { max-width: 46ch; margin: 10px 0 0; padding-right: 64px; color: rgba(255, 255, 255, .86); font-size: 15px; line-height: 1.55; }
/* the arrow in a circle, bottom right: fills teal on hover */
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group::after { content: ""; position: absolute; right: clamp(18px, 2vw, 28px); bottom: clamp(18px, 2vw, 28px); width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%; background: var(--wttc-ic-arrow-up-right) center / 20px no-repeat; transition: background-color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group:hover::after { background-color: var(--wttc-accent); border-color: var(--wttc-accent); transform: translate(3px, -3px); }

/* ---------- Stats (three figures with a line): a navy circle with an icon, the figure in serif, the line below ---------- */

/* ---------- Banner: a rounded picture band (the Research Hub, Together in Travel) with a navy veil, in the container ---------- */

/* event cards inside [wttc_latest] */
.wttc-content .wttc-latest .wttc-card__kind { display: flex; align-items: center; gap: 8px; }
.wttc-content .wttc-latest .wttc-card__when { color: var(--wttc-navy); font-size: 13px; font-weight: 500; }

@media (max-width: 1100px) {
	.wttc-content .is-style-wttc-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.wttc-hv__in { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 22px; }
	.wttc-hv__rail { width: 100%; margin-left: 0; }
	.wttc-hv__cards { justify-content: flex-start; overflow-x: auto; }
	.wttc-hv__title { max-width: 12ch; }
	.wttc-content > .is-style-wttc-strip { grid-template-columns: minmax(0, 1fr); }
	.wttc-content > .is-style-wttc-strip > .wp-block-group + .wp-block-group { padding-left: 0; border-left: 0; border-top: 1px solid var(--wttc-border, #d1cfc8); }
	.wttc-content .is-style-wttc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(300px, auto); }
	.wttc-content .is-style-wttc-tiles > :nth-child(1) { grid-row: auto; grid-column: 1 / span 2; min-height: 380px; }
	.wttc-content .is-style-wttc-tiles > :nth-child(4) { grid-column: 1 / span 2; }
}
@media (max-width: 599px) {
	.wttc-content .is-style-wttc-tiles, .wttc-content .is-style-wttc-tiles-grid, .wttc-content .is-style-wttc-tiles-4 { grid-template-columns: minmax(0, 1fr); }
	.wttc-content .is-style-wttc-tiles > :nth-child(1), .wttc-content .is-style-wttc-tiles > :nth-child(4) { grid-column: auto; }
	.wttc-content :is(.is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) { grid-auto-rows: 300px; }
}
@media (prefers-reduced-motion: reduce) { .wttc-hv__bg .wttc-hv__img { animation: none; will-change: auto; } .wttc-hv__card span, .wttc-hv__card::after, .wttc-hv__watch, .wttc-hv__play-ic { transition: none; } .wttc-hv__line.is-run::after { animation: none; transform: scaleX(1); } .wttc-hv__video { transition: none; } .wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group > .wp-block-image img, .wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group::after { transition: none; } }

/* ---------- Bento (Group style "Bento", section 2): Summit tall + Governments + Research + Members ---------- */
.wttc-content .is-style-wttc-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(330px, auto) auto; gap: 20px; }
.wttc-content .is-style-wttc-bento > .wp-block-group { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; margin: 0; padding: 30px; overflow: hidden; border-radius: 12px; background: var(--wttc-navy); color: var(--wttc-white); isolation: isolate; }
.wttc-content .is-style-wttc-bento > .wttc-bento__summit { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.wttc-content .is-style-wttc-bento > .wttc-bento__gov { grid-column: 6 / span 4; }
.wttc-content .is-style-wttc-bento > :is(.wttc-bento__gov, .wttc-bento__work) { padding-top: 78px; }   /* room under the chip so a long title never touches it */
.wttc-content .is-style-wttc-bento > .wttc-bento__work { grid-column: 10 / span 3; }
.wttc-content .is-style-wttc-bento > .wttc-bento__members { grid-column: 6 / span 7; grid-row: 2; min-height: 306px; padding-bottom: 22px; justify-content: flex-start; background: var(--wttc-cream); color: var(--wttc-navy); border: .5px solid rgba(209, 207, 200, .55); }
/* picture behind the text, darker towards the bottom so the text always reads */
.wttc-content .is-style-wttc-bento > .wp-block-group > .wp-block-image { position: absolute; inset: 0; z-index: -2; margin: 0; }
.wttc-content .is-style-wttc-bento > .wp-block-group > .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wttc-content .is-style-wttc-bento > .wp-block-group:not(.wttc-bento__members)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 27, 52, .16) 0%, rgba(21, 27, 52, 0) 34%, rgba(21, 27, 52, .5) 74%, rgba(21, 27, 52, .78) 100%); }
.wttc-content .is-style-wttc-bento > .wttc-bento__summit::before { background: linear-gradient(180deg, rgba(21, 27, 52, .2) 0%, rgba(21, 27, 52, 0) 24%, rgba(21, 27, 52, .58) 46%, rgba(21, 27, 52, .9) 74%, rgba(21, 27, 52, .95) 100%); }
/* Research: blue tint over the whole picture */
.wttc-content .is-style-wttc-bento > .wttc-bento__tint > .wp-block-image::after { content: ""; position: absolute; inset: 0; background: rgba(24, 42, 104, .6); mix-blend-mode: multiply; }
.wttc-content .is-style-wttc-bento > .wttc-bento__tint > .wp-block-image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(40, 70, 170, .22); }
.wttc-content .is-style-wttc-bento > .wttc-bento__tint > .wp-block-image img { filter: saturate(.85); }
.wttc-content .is-style-wttc-bento > .wttc-bento__gov > .wp-block-image img { object-position: 50% 45%; }
/* text */
.wttc-content .is-style-wttc-bento h3 { max-width: 17ch; margin: 0; padding: 0; color: inherit; font: 400 clamp(28px, 2.6vw, 38px)/1.08 var(--wttc-font-serif); letter-spacing: -.3px; text-wrap: balance; }
.wttc-content .is-style-wttc-bento h3 a, .wttc-content .is-style-wttc-bento h3 a:hover { color: inherit; text-decoration: none; }
.wttc-content .is-style-wttc-bento h3 a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.wttc-content .is-style-wttc-bento > .wttc-bento__summit h3 { max-width: 12ch; font-size: clamp(34px, 3.4vw, 50px); }
.wttc-content .is-style-wttc-bento p { max-width: 46ch; margin: 12px 0 0; padding: 0; color: rgba(255, 255, 255, .9); font-size: 15px; line-height: 1.55; }
.wttc-content .is-style-wttc-bento p.wttc-bento__meta { margin: 8px 0 0; font: 500 12px/1.3 var(--wttc-font-sans); letter-spacing: .4px; text-transform: uppercase; opacity: .9; }
.wttc-content .is-style-wttc-bento p.wttc-bento__next { display: flex; align-items: center; gap: 10px; max-width: none; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .35); font: 500 12px/1.3 var(--wttc-font-sans); letter-spacing: .4px; text-transform: uppercase; }
.wttc-content .is-style-wttc-bento p.wttc-bento__next::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wttc-accent); }
/* the chip: white label top left over the pictures (static above the title in the Members tile) */
.wttc-content .is-style-wttc-bento p.is-style-wttc-chip { position: absolute; z-index: 3; left: 30px; top: 28px; max-width: none; margin: 0; padding: 5px 12px; border-radius: var(--wttc-radius); background: var(--wttc-white); color: var(--wttc-navy); font: 500 11px/1.3 var(--wttc-font-sans); letter-spacing: .4px; text-transform: uppercase; opacity: 1; }
.wttc-content .is-style-wttc-bento > .wttc-bento__members p.is-style-wttc-chip { position: static; align-self: flex-start; margin: 0 0 12px; border: 1px solid var(--wttc-border, #d1cfc8); }
.wttc-content .is-style-wttc-bento > .wttc-bento__members p { color: rgba(21, 27, 52, .82); }
.wttc-content .is-style-wttc-bento > .wttc-bento__members p.wttc-bento__meta { color: rgba(21, 27, 52, .68); }
.wttc-content .is-style-wttc-bento > .wttc-bento__members > :is(h3, p) { max-width: min(47%, 36ch); }
.wttc-content .is-style-wttc-bento > .wttc-bento__members h3 { max-width: 47%; }
/* the arrow in a circle: top right (bottom right in Members); fills with the accent on hover */
.wttc-content .is-style-wttc-bento > .wp-block-group::after { content: ""; position: absolute; z-index: 3; right: 22px; top: 22px; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23fff' d='M198 64v104a6 6 0 0 1-12 0V78.48L68.24 196.24a6 6 0 0 1-8.48-8.48L177.52 70H88a6 6 0 0 1 0-12h104a6 6 0 0 1 6 6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: background-color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.wttc-content .is-style-wttc-bento > .wp-block-group:hover::after, .wttc-content .is-style-wttc-bento > .wp-block-group:focus-within::after { background-color: var(--wttc-accent); border-color: var(--wttc-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23151B34' d='M198 64v104a6 6 0 0 1-12 0V78.48L68.24 196.24a6 6 0 0 1-8.48-8.48L177.52 70H88a6 6 0 0 1 0-12h104a6 6 0 0 1 6 6'/%3E%3C/svg%3E"); transform: scale(1.06); }
.wttc-content .is-style-wttc-bento > .wttc-bento__members::after { top: auto; bottom: 22px; border-color: var(--wttc-navy); background-image: none; }
.wttc-content .is-style-wttc-bento > .wttc-bento__members::before { content: ""; position: absolute; z-index: 4; right: 22px; bottom: 22px; width: 44px; height: 44px; background: var(--wttc-navy); -webkit-mask: var(--wttc-ic-arrow-up-right) center / 18px no-repeat; mask: var(--wttc-ic-arrow-up-right) center / 18px no-repeat; pointer-events: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.wttc-content .is-style-wttc-bento > .wttc-bento__members:hover::before { transform: scale(1.06); }
.wttc-content .is-style-wttc-bento > .wp-block-group:has(a:focus-visible) { outline: 2px solid var(--wttc-navy); outline-offset: 3px; }
.wttc-content .is-style-wttc-bento h3 a:focus-visible { outline: none; }
/* faces of the Members tile: an irregular cloud in the top-right corner (desktop), stacked with the arrow on mobile */
.wttc-content .wttc-bento__cloud { position: absolute; z-index: 1; right: 0; top: 0; margin: 0; width: 53.4%; aspect-ratio: 382 / 420; container-type: size; pointer-events: none; }
.wttc-bento__cloud .wttc-bento__face { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--s) / 382 * 100cqw); height: calc(var(--s) / 382 * 100cqw); transform: translate(-50%, -50%); }
.wttc-bento__face { display: block; overflow: hidden; border: 3px solid var(--wttc-white); border-radius: 50%; background: var(--wttc-cream); }
.wttc-bento__face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.wttc-content .wttc-bento__stack { display: none; margin: 0; }
/* entrance: the faces pop in one after the other when the tile enters the screen (class .is-in set by home.js; visible without JS) */
.wttc-bento__members.is-anim .wttc-bento__face, .wttc-bento__members.is-anim .wttc-bento__go { opacity: 0; scale: .5; transition: opacity .5s ease, scale .65s cubic-bezier(.34, 1.56, .64, 1), translate .65s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i, 0) * 55ms + 120ms); }
.wttc-bento__members.is-anim .wttc-bento__stack .wttc-bento__face, .wttc-bento__members.is-anim .wttc-bento__go { translate: -14px 0; }
.wttc-bento__members.is-anim.is-in .wttc-bento__face, .wttc-bento__members.is-anim.is-in .wttc-bento__go { opacity: 1; scale: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .wttc-bento__members.is-anim .wttc-bento__face, .wttc-bento__members.is-anim .wttc-bento__go { opacity: 1; scale: 1; translate: 0 0; transition: none; } }
@media (max-width: 1000px) {
	.wttc-content .is-style-wttc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(340px, auto); }
	.wttc-content .is-style-wttc-bento > .wttc-bento__summit { grid-column: 1 / -1; grid-row: auto; min-height: 460px; }
	.wttc-content .is-style-wttc-bento > .wttc-bento__gov, .wttc-content .is-style-wttc-bento > .wttc-bento__work { grid-column: auto; }
	.wttc-content .is-style-wttc-bento > .wttc-bento__members { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
	.wttc-content .is-style-wttc-bento { grid-template-columns: 1fr; gap: 16px; grid-auto-rows: auto; }
	.wttc-content .is-style-wttc-bento > .wp-block-group { padding: 24px; min-height: 340px; }
	.wttc-content .is-style-wttc-bento > .wttc-bento__summit { min-height: 480px; }
	.wttc-content .is-style-wttc-bento p.is-style-wttc-chip { left: 24px; }
	.wttc-content .is-style-wttc-bento > .wp-block-group::after { right: 18px; top: 18px; }
	.wttc-content .is-style-wttc-bento > .wttc-bento__members { min-height: 0; padding-bottom: 28px; }
	.wttc-content .is-style-wttc-bento > .wttc-bento__members > :is(h3, p), .wttc-content .is-style-wttc-bento > .wttc-bento__members h3 { max-width: none; }
	.wttc-content .is-style-wttc-bento > .wttc-bento__members::after, .wttc-content .is-style-wttc-bento > .wttc-bento__members::before { display: none; }
	.wttc-bento__cloud { display: none; }
	.wttc-content .wttc-bento__stack { display: flex; align-items: center; margin-top: 22px; }
	.wttc-bento__stack .wttc-bento__face { flex: none; width: 56px; height: 56px; margin-left: -18px; }
	.wttc-bento__stack .wttc-bento__face:first-child { margin-left: 0; }
	.wttc-bento__go { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin-left: 14px; border: 1px solid var(--wttc-navy); border-radius: 50%; }
	.wttc-bento__go::after { content: ""; width: 18px; height: 18px; background: var(--wttc-navy); -webkit-mask: var(--wttc-ic-arrow-up-right) center / contain no-repeat; mask: var(--wttc-ic-arrow-up-right) center / contain no-repeat; }
	.wttc-bento__members:hover .wttc-bento__go { background: var(--wttc-accent); border-color: var(--wttc-accent); }
}

/* ---------- Home: the "features" band (WTTC represents the global private sector): on desktop the picture starts at the top of the text
   column and is exactly as tall as that column (the text sets the height; the picture fills it). Tablet and mobile keep the stacked layout. ---------- */
@media (min-width: 1001px) {
	.wttc-home .wttc-content .is-style-wttc-features > .wp-block-media-text { align-items: stretch; }
	.wttc-home .wttc-content .is-style-wttc-features > .wp-block-media-text > .wp-block-media-text__media { align-self: stretch; min-height: 360px; }
	.wttc-home .wttc-content .is-style-wttc-features > .wp-block-media-text > .wp-block-media-text__media > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }
}

/* ---------- Tiles (Membership band and the other tile grids): same height for every card, arrow in the right colour ---------- */
/* The Group layout added a top margin to every card but the first: the first looked bigger than the rest. */
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group { margin: 0; }
/* the arrow icon of the theme is dark: white over the picture, navy on the accent fill (hover) */
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23fff' d='M198 64v104a6 6 0 0 1-12 0V78.48L68.24 196.24a6 6 0 0 1-8.48-8.48L177.52 70H88a6 6 0 0 1 0-12h104a6 6 0 0 1 6 6'/%3E%3C/svg%3E"); }
.wttc-content :is(.is-style-wttc-tiles, .is-style-wttc-tiles-grid, .is-style-wttc-tiles-4) > .wp-block-group:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23151B34' d='M198 64v104a6 6 0 0 1-12 0V78.48L68.24 196.24a6 6 0 0 1-8.48-8.48L177.52 70H88a6 6 0 0 1 0-12h104a6 6 0 0 1 6 6'/%3E%3C/svg%3E"); }

/* ---------- Home: the "Interested in joining?" band: the question is the headline on its own line, the rest a smaller line under it ---------- */
.wttc-home .wttc-content .is-style-wttc-split > :first-child { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.3; text-wrap: balance; }
.wttc-home .wttc-content .is-style-wttc-split > :first-child::first-line { font-size: 1.7em; line-height: 1.15; }
@media (max-width: 640px) { .wttc-home .wttc-content .is-style-wttc-split > :first-child::first-line { font-size: 1.3em; } }


/* ---------- Banners: a logo (Research Hub, Together in Travel) on the right of the call to action; it falls below the text on tablet and mobile ---------- */

/* ---------- Home: features band: the mission sentence is a quote: Libre Bodoni italic, a little larger than the text, between quotation marks, a thin accent rule; calm on purpose ---------- */
.wttc-home .wttc-content .is-style-wttc-features .wttc-mission-quote { margin: 22px 0 0; padding: 2px 0 2px 20px; border: 0; border-left: 2px solid var(--wttc-accent); }
.wttc-home .wttc-content .is-style-wttc-features .wttc-mission-quote p { margin: 0; color: var(--wttc-navy); font-family: var(--wttc-font-serif); font-style: italic; font-weight: 400; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.45; }
.wttc-home .wttc-content .is-style-wttc-features .wttc-mission-quote p::before { content: "“"; }
.wttc-home .wttc-content .is-style-wttc-features .wttc-mission-quote p::after { content: "”"; }

/* ---------- Two calls to action in halves (Group style "Call to action in two halves"): the Research Hub and Together in Travel as ONE section, full width and full
   height, split in two, no boxes: each half is a picture with the navy veil, its logo, headline, text and button. At the very end of the Home. ---------- */
.wttc-content > .wp-block-group.is-style-wttc-cta-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 100%; max-width: none; min-height: 100vh; min-height: 100svh; margin: 0; padding: 0; background: var(--wttc-navy); color: var(--wttc-white); }
.wttc-content > .is-style-wttc-cta-halves > .wp-block-group { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin: 0; padding: clamp(40px, 6vw, 112px); box-sizing: border-box; overflow: hidden; isolation: isolate; background: var(--wttc-navy); }
.wttc-content > .is-style-wttc-cta-halves > .wp-block-group + .wp-block-group { border-left: 1px solid rgba(255, 255, 255, .28); }
/* the pictures are full width but the content stays boxed: the left half starts where the site container starts, the right half ends where it ends */
.wttc-content > .is-style-wttc-cta-halves > .wp-block-group:first-child { padding-left: max(24px, calc((100vw - var(--wttc-container, 1240px)) / 2)); }
.wttc-content > .is-style-wttc-cta-halves > .wp-block-group:last-child { padding-right: max(24px, calc((100vw - var(--wttc-container, 1240px)) / 2)); }
.wttc-content > .is-style-wttc-cta-halves > .wp-block-group > * { margin-top: 0; margin-bottom: 0; }
.wttc-content > .is-style-wttc-cta-halves > .wp-block-group > .wp-block-image:not(.wttc-split__logo) { position: absolute; inset: 0; z-index: -2; margin: 0; }
.wttc-content > .is-style-wttc-cta-halves > .wp-block-group > .wp-block-image:not(.wttc-split__logo) img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.wttc-content > .is-style-wttc-cta-halves > .wp-block-group:hover > .wp-block-image:not(.wttc-split__logo) img { transform: scale(1.03); }
/* the Research Hub picture is a wide strip with the turtle on the right: keep the turtle in view in the tall half */
.wttc-content > .is-style-wttc-cta-halves > .wp-block-group > .wp-block-image img[src*="research-hub-header-bg"] { object-position: 80% 50%; }
.wttc-content > .is-style-wttc-cta-halves > .wp-block-group::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 27, 52, .72) 0%, rgba(21, 27, 52, .55) 45%, rgba(21, 27, 52, .86) 100%); }
.wttc-content > .is-style-wttc-cta-halves .wttc-split__logo { order: -1; display: flex; align-items: flex-end; height: clamp(84px, 13vh, 120px); margin: 0 0 clamp(28px, 5vh, 56px); }
.wttc-content > .is-style-wttc-cta-halves .wttc-split__logo img { display: block; width: auto; height: 100%; max-width: min(300px, 100%); object-fit: contain; object-position: left bottom; }
.wttc-content > .is-style-wttc-cta-halves p.is-style-wttc-chip { margin-bottom: 18px; background: var(--wttc-white); }
.wttc-content > .is-style-wttc-cta-halves h2 { max-width: 14ch; color: var(--wttc-white); }
.wttc-content > .is-style-wttc-cta-halves p:not(.is-style-wttc-chip) { max-width: 46ch; margin-top: 16px; color: rgba(255, 255, 255, .9); font-size: 17px; }
.wttc-content > .is-style-wttc-cta-halves .wp-block-buttons { margin-top: 28px; }
.wttc-content > .is-style-wttc-cta-halves .wp-block-button .wp-block-button__link, .wttc-content > .is-style-wttc-cta-halves .wp-block-button .wp-block-button__link:visited { background: var(--wttc-white); border-color: var(--wttc-white); color: var(--wttc-navy); }
.wttc-content > .is-style-wttc-cta-halves .wp-block-button .wp-block-button__link:hover, .wttc-content > .is-style-wttc-cta-halves .wp-block-button .wp-block-button__link:focus-visible, .wttc-content > .is-style-wttc-cta-halves .wp-block-button .wp-block-button__link:active { background: var(--wttc-accent); border-color: var(--wttc-accent); color: var(--wttc-navy); }
@media (max-width: 1000px) {
	.wttc-content > .wp-block-group.is-style-wttc-cta-halves { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.wttc-content > .is-style-wttc-cta-halves > .wp-block-group { min-height: 80vh; min-height: 80svh; padding: 48px 24px; }
	.wttc-content > .is-style-wttc-cta-halves > .wp-block-group + .wp-block-group { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); }
}

/* Page background that changes with the scroll (class "wttc-reveal-bg" on the band where the new colour starts; home.js tweens the colour of the whole page white -> cream, so there is no dividing line). Without JS or with reduced motion the band is simply cream. */
.wttc-content > .wp-block-group.wttc-reveal-bg { background: var(--wttc-cream); }
.wttc-content > .wp-block-group.wttc-reveal-bg.has-reveal { background: transparent; }