/**
 * WEMountain landing design — stylesheet, plugin copy.
 *
 * Same file as the child theme's assets/landing/landing.css, with one change:
 * every selector that anchored on `.wem-landing-root` (the page template's
 * single wrapper) now anchors on `.wem-section`, which each widget puts on its
 * own outer element. Widgets render inside Elementor's containers, never inside
 * a shared root, so per-section scoping is the only kind that reaches them.
 *
 * The `body.wem-landing` rules are unchanged. The plugin adds that class when
 * the page carries any WEMountain widget (class-plugin.php body_class()), so
 * the page-level fixes — the overflow-x change that lets animation-timeline:
 * view() resolve against the viewport, scroll-behavior, ::selection, the
 * BuddyBoss wrapper neutralisers — apply exactly as on the template.
 *
 * Original header follows.
 */

/**
 * WEMountain landing template — extracted stylesheet.
 *
 * Loaded only by page-templates/landing.php (see functions.php).
 *
 * The design draft keeps almost all of its styling in inline `style` attributes,
 * which is deliberately preserved. Only the things that CANNOT live inline are
 * here:
 *   1. the draft <helmet> globals (html / body / a / ::selection)
 *   2. the @keyframes used by the inline `animation:` declarations
 *   3. the prefers-reduced-motion block
 *   4. the generated hover classes that replace the canvas-only
 *      `style-hover="…"` attribute
 *   5. overrides that let a full-bleed page live inside the BuddyBoss
 *      content wrappers
 *
 * Everything is scoped to `body.wem-landing` / `.wem-section` so nothing
 * leaks onto the rest of the site.
 */

/* ------------------------------------------------------------------ *
 * 1. Draft <helmet> globals, scoped to this template
 * ------------------------------------------------------------------ */

/* `scroll-behavior` has to sit on the scrolling element, which is <html>. */
html:has(> body.wem-landing) {
	scroll-behavior: smooth;
}

body.wem-landing {
	margin: 0;
	background: #f6f5f1;
}

.wem-section {
	color: #141414;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
}

.wem-section a {
	color: #0047e0;
}

.wem-section a:hover {
	color: #0032a4;
}

body.wem-landing ::selection {
	background: #0047e0;
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * 2. Keyframes driving the inline `animation:` declarations
 * ------------------------------------------------------------------ */

@keyframes wem-bob {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 10px); }
}

@keyframes wem-fade-up {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: none; }
}

@keyframes wem-slide-l {
	from { opacity: .35; transform: translateX(-160px); }
	to   { opacity: 1; transform: none; }
}

@keyframes wem-slide-r {
	from { opacity: .35; transform: translateX(160px); }
	to   { opacity: 1; transform: none; }
}

@keyframes wem-ink-in {
	from { color: #b3ada4; }
	to   { color: #141414; }
}

@keyframes wem-underline {
	from { background-size: 0% .09em; }
	to   { background-size: 100% .09em; }
}

/*
 * The hero copy, the Angels rows and the Angels portraits all enter by
 * uncovering themselves from the bottom edge upwards.
 */
@keyframes wem-clip-up {
	from { clip-path: inset(100% 0 0 0); }
	to   { clip-path: inset(0); }
}

/*
 * The Angels reveals are driven by `animation-timeline: view()`. Where that is
 * not supported the element would otherwise sit at the `from` keyframe for
 * ever, which is a fully clipped, invisible portrait. Dropping both properties
 * leaves it at its natural, uncovered state.
 */
/*
 * One-time reveals: [data-wem-once] elements start hidden only once the
 * script has marked the page (.wem-js, set in <head>), and play their
 * entrance once when they first scroll into view (.is-in, landing.js). They
 * then stay put: scrolling back up does not rewind them, which the
 * scroll-linked `animation-timeline: view()` reveals used to do. Without the
 * script, or for visitors who asked for reduced motion, they are simply there.
 */
@keyframes wem-clip-right {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0); }
}

.wem-js [data-wem-once="clip-up"]:not(.is-in) { clip-path: inset(100% 0 0 0); }
.wem-js [data-wem-once="clip-right"]:not(.is-in) { clip-path: inset(0 100% 0 0); }
.wem-js [data-wem-once="fade-up"]:not(.is-in),
.wem-js [data-wem-once="slide-in"]:not(.is-in) { opacity: 0; }

.wem-js [data-wem-once="clip-up"].is-in { animation: wem-clip-up 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--wem-delay, 0s); }
.wem-js [data-wem-once="clip-right"].is-in { animation: wem-clip-right .9s cubic-bezier(.65, 0, .35, 1) both; animation-delay: var(--wem-delay, 0s); }
.wem-js [data-wem-once="fade-up"].is-in { animation: wem-fade-up .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--wem-delay, 0s); }
.wem-js [data-wem-once="slide-in"].is-in { animation: wem-slide-in .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--wem-delay, 0s); }

@media (prefers-reduced-motion: reduce) {
	.wem-js [data-wem-once] {
		clip-path: none !important;
		opacity: 1 !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * 3. Hover classes generated from the canvas-only `style-hover` attribute
 *
 * `!important` is required: the elements carry the base value in an inline
 * `style` attribute, which would otherwise always beat a class selector.
 * Each rule answers to :hover and :focus-visible so the interaction is
 * reachable from the keyboard as well as the pointer.
 * ------------------------------------------------------------------ */

/* Draft value: color:#0047e0
 * Only used by the draft's own header nav, which this template drops in
 * favour of the site's BuddyBoss navigation. Kept so the mapping from the
 * draft stays complete and the class is available if that markup returns. */
.wem-hover-text-blue:hover,
.wem-hover-text-blue:focus-visible {
	color: #0047e0 !important;
}

/* Draft value: color:#8fb2ff */
.wem-hover-text-sky:hover,
.wem-hover-text-sky:focus-visible {
	color: #8fb2ff !important;
}

/* Draft value: background:#0047e0 */
.wem-hover-bg-blue:hover,
.wem-hover-bg-blue:focus-visible {
	background: #0047e0 !important;
}

/* Draft value: background:#0032a4 */
.wem-hover-bg-blue-deep:hover,
.wem-hover-bg-blue-deep:focus-visible {
	background: #0032a4 !important;
}

/* Draft value: background:#141414;color:#fff */
.wem-hover-bg-ink:hover,
.wem-hover-bg-ink:focus-visible {
	background: #141414 !important;
	color: #fff !important;
}

/*
 * The knowledge tiles. The design replaced the 3D card flip with a wipe: the
 * quote side is clipped away at the bottom edge and uncovers upwards on hover,
 * or when anything inside the card takes focus (the card carries tabindex="0",
 * so it is reachable from the keyboard).
 *
 * This is a rule rather than an inline style because a transition needs a
 * second state to move to, which an inline `style` attribute cannot express.
 */
.wem-card > .wem-card-back {
	clip-path: inset(100% 0 0 0);
	transition: clip-path .6s cubic-bezier(.2, .7, .2, 1);
}

.wem-card:hover > .wem-card-back,
.wem-card:focus-within > .wem-card-back,
.wem-card:focus-visible > .wem-card-back {
	clip-path: inset(0);
}

/* Visible focus ring for everything interactive in the landing markup. */
.wem-section a:focus-visible,
.wem-section button:focus-visible,
.wem-section input:focus-visible,
.wem-card:focus-visible {
	outline: 3px solid #8fb2ff;
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * 3b. Section layouts that cannot be expressed inline
 *
 * Each of these needs a media query or a pseudo-element, so none of them can
 * live in the `style` attribute the way the rest of the design does.
 * ------------------------------------------------------------------ */

/*
 * The hero sits under the fixed site header, so its copy is pushed clear of
 * the header's two rows. On a phone the header collapses to one row, and on a
 * short screen the heading steps down instead.
 */
@media (max-width: 760px) {
	.wem-section .wem-hero-copy {
		padding-top: 90px !important;
	}
}

@media (max-height: 680px) {
	.wem-section .wem-hero-copy h1 {
		font-size: clamp(30px, 4.6vw, 64px) !important;
	}

	.wem-section .wem-hero-copy {
		padding-top: 136px !important;
	}
}

/*
 * Anchor targets clear the fixed site header, which is two rows on a desktop
 * (76px + 52px) and one on a phone. Without this, following a link to #angels
 * or #quiz leaves the section's heading underneath the header.
 *
 * !important because each section carries the design's own scroll-margin-top
 * in its inline style attribute, which no class selector can outweigh, and the
 * height of the site header is a fact about the site rather than a value the
 * design owns.
 */
body.wem-landing .wem-section[id] {
	scroll-margin-top: 136px !important;
}

@media (max-width: 760px) {
	body.wem-landing .wem-section[id] {
		scroll-margin-top: 84px !important;
	}
}

/*
 * A Vimeo background film covers its section the way object-fit: cover would,
 * which an iframe cannot do on its own: the frame is sized from the holder's
 * width and height (container units) to whichever 16:9 box overfills both,
 * then centred. It stays transparent until the player reports playback, so
 * the poster behind it never flashes to black.
 */
.wem-section .wem-vimeo-bg {
	container-type: size;
}

.wem-section .wem-vimeo-bg iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh);
	height: max(100cqh, 56.25cqw);
	max-width: none;
	border: 0;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity .8s ease;
	pointer-events: none;
}

.wem-section .wem-vimeo-bg iframe[data-wem-playing] {
	opacity: 1;
}

/* On a phone the section's own hosted film, where it has one, plays instead. */
@media (max-width: 767px) {
	.wem-section .wem-vimeo-bg[data-wem-phone-video] {
		display: none;
	}
}

/* An Angels row stacks on a phone, with the quote under the portrait. */
@media (max-width: 760px) {
	.wem-section .wem-angel {
		grid-template-columns: 1fr !important;
	}

	.wem-section .wem-angel > blockquote {
		order: 2;
	}
}

/* ------------------------------------------------------------------ *
 * 4. Let the landing run full-bleed inside the BuddyBoss wrappers
 *
 * header.php opens #page > #content.site-content > .container > .bb-grid,
 * and the theme puts up to 80px of horizontal padding plus a max-width on
 * those. The draft manages its own gutters, so neutralise them here.
 * ------------------------------------------------------------------ */

body.wem-landing #content.site-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.wem-landing #content .container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.wem-landing #content .bb-grid.site-content-grid {
	display: block;
	margin: 0;
}

/*
 * The three rules above turned out not to be what was holding the coloured
 * bands off the viewport edge. Measured on the rendered page, #content,
 * .container and .bb-grid were already 1440px wide at x:0; the remaining 10px
 * a side came from BuddyBoss's grid-cell gutter:
 *
 *     .bb-grid-cell:not(.no-gutter), .bb-grid > :not(.no-gutter)
 *         { padding-left: 10px; padding-right: 10px }
 *
 * .wem-section is a direct child of .bb-grid.site-content-grid, so it
 * matched `.bb-grid > :not(.no-gutter)` and carried the gutter itself.
 */
body.wem-landing .wem-section {
	padding-left: 0;
	padding-right: 0;
}

/*
 * BuddyBoss clips horizontal overflow site-wide:
 *
 *     body { overflow-x: hidden }
 *     body:not(.page-template-page-fullscreen, .elementor-page) .site
 *         { overflow-x: hidden }
 *
 * `overflow-x: hidden` with a visible `overflow-y` computes to
 * `overflow-y: auto`, which makes #page.site a scroll container. That is what
 * `animation-timeline: view()` then resolves against instead of the viewport —
 * and because #page grows to its full 16447px content height and never
 * actually scrolls, every element counts as permanently in view. Measured, all
 * of the draft's scroll reveals reported playState "finished" at load: the
 * stats, the step images and the ink-in quote were all pinned to their end
 * state and never animated.
 *
 * Opting out restores the draft's own `overflow: visible` on the scrolling
 * ancestors. Note the theme already anticipates this: its own `:not(...)`
 * exempts the fullscreen page template for the same reason.
 *
 * The site header is `position: fixed`, and `overflow` alone does not create a
 * containing block for fixed positioning, so the header is unaffected.
 */
body.wem-landing,
body.wem-landing #page.site {
	overflow-x: visible;
}

/*
 * The partner quotes band breaks out to the full viewport width with
 * `margin: 0 calc(50% - 50vw)`. On a platform with classic (space-taking)
 * scrollbars, 100vw is wider than the content box by the scrollbar's width,
 * which would put a horizontal scrollbar on the page.
 *
 * `clip` rather than `hidden`: clip does not create a scroll container, so the
 * scroll-driven reveals above still resolve against the viewport. `hidden`
 * would reintroduce exactly the bug the rule above exists to fix.
 */
body.wem-landing {
	overflow-x: clip;
}

/* ------------------------------------------------------------------ *
 * 5. Undo the BuddyBoss element-level cascade
 *
 * The draft carries essentially all of its styling in inline `style`
 * attributes and relies on plain HTML elements inheriting everything else
 * from their section — the Community band is `background:#0047e0;color:#fff`
 * and its <h2> is expected to inherit that white.
 *
 * BuddyBoss styles bare element selectors (h1-h6, blockquote, p, a, img, form
 * controls). An explicit colour always beats inheritance, so those headings
 * came out dark-on-blue, the pull quotes came out grey and italic, and the
 * newsletter field grew a border and a fixed height.
 *
 * The fix is `revert` rather than a hard-coded value: it rolls the property
 * back to the user-agent level, as if no author stylesheet had touched it,
 * which is exactly the state the draft renders in. The draft's own inline
 * `style` declarations still win over these rules — inline beats a class
 * selector — so the draft stays the single source of truth for every value it
 * actually specifies, and only the values it leaves unspecified are affected.
 *
 * `fill` and `stroke` are deliberately NOT reverted anywhere below. The
 * draft's icons set them as SVG presentation attributes, which sit *below*
 * author CSS in the cascade and would be wiped out by a revert.
 * ------------------------------------------------------------------ */

/*
 * 5a. Box model.
 *
 * BuddyBoss ships `html { box-sizing: border-box }` plus
 * `*, ::before, ::after { box-sizing: inherit }`. The draft has no box-sizing
 * rule at all, so it lays out on the user-agent defaults: its pill buttons
 * (`min-height:50px; padding:14px 32px`) measure 78px tall in the draft and
 * were measuring 54px here.
 *
 * `revert`, not a literal `content-box`: the user-agent default is content-box
 * for ordinary elements but border-box for form controls. Hard-coding
 * content-box made the rescue-story <button> 12px wider than its container.
 */
body.wem-landing .wem-section,
body.wem-landing .wem-section *,
body.wem-landing .wem-section *::before,
body.wem-landing .wem-section *::after {
	box-sizing: revert;
}

/*
 * 5b. `.bb-grid-cell, .bb-grid > * { list-style: none }` lands on
 * .wem-section, and list-style-type then inherits into every descendant.
 * Nothing in the draft is a list today, so this changes no pixels; it is here
 * so the subtree still matches the draft if a list is ever added.
 */
body.wem-landing .wem-section {
	list-style: revert;
}

/* 5c. Headings — the reported dark-heading-on-the-blue-band bug. */
body.wem-landing .wem-section :is(h1, h2, h3, h4, h5, h6) {
	color: revert;
	font-family: revert;
	font-size: revert;
	font-style: revert;
	font-weight: revert;
	letter-spacing: revert;
	line-height: revert;
	margin: revert;
	padding: revert;
	text-transform: revert;
	word-break: revert;
}

/*
 * 5d. Quotes. BuddyBoss sets
 *   blockquote, q { font-size:1.25rem; font-weight:300; font-style:italic;
 *                   color:var(--bb-body-text-color); line-height:1.637 }
 * which italicised 57 elements, greyed both pull quotes, and — because the
 * draft sizes these blocks in `ch` units — resized every quote that depends
 * on the inherited font-size.
 */
body.wem-landing .wem-section :is(blockquote, q) {
	background: revert;
	border: revert;
	color: revert;
	font-family: revert;
	font-size: revert;
	font-style: revert;
	font-weight: revert;
	letter-spacing: revert;
	line-height: revert;
	margin: revert;
	padding: revert;
	quotes: revert;
	text-align: revert;
}

/* 5e. `.h1 … h6, address, hr, p { margin: 0 0 1.6875rem }`. */
body.wem-landing .wem-section :is(p, address, hr, figure, dl, dd) {
	margin: revert;
}

/*
 * 5f. Links. `a { text-decoration: none }` removed the user-agent underline
 * from the one link in the draft that relies on it (the hero scroll cue).
 * The colour is left alone: section 1 above already carries the draft's own
 * `a` rule, and reverting here would throw that away too.
 */
body.wem-landing .wem-section a {
	text-decoration: revert;
}

/*
 * 5g. `img { max-width:100%; height:auto; vertical-align:middle;
 *            font-style:italic }`.
 *
 * Only <img> is listed. An earlier version of this rule also covered iframe,
 * video, svg and canvas, and reverting `height` on <iframe> threw away
 * Typeform's own `height:100%` — the embedded quiz collapsed from 500px to
 * the 150px iframe default. Measured against the draft, BuddyBoss only moves
 * these four properties on <img>.
 */
body.wem-landing .wem-section img {
	border: revert;
	font-style: revert;
	height: revert;
	max-width: revert;
	vertical-align: revert;
}

/*
 * 5h. Form controls. BuddyBoss gives `input, select, textarea` a 41px height,
 * a border, a radius, `0 12px` padding and its own font size. The draft's
 * newsletter field is an unstyled, borderless, inherited-font input sitting
 * on a rule drawn by its parent, and `button` is likewise unstyled — the
 * rescue-story play control is a bare <button> holding an icon and a label.
 */
body.wem-landing .wem-section :is(input, select, textarea, button, label, fieldset, legend) {
	-webkit-appearance: revert;
	appearance: revert;
	background: revert;
	border: revert;
	border-radius: revert;
	box-shadow: revert;
	color: revert;
	font-family: revert;
	font-size: revert;
	font-style: revert;
	font-weight: revert;
	height: revert;
	letter-spacing: revert;
	line-height: revert;
	margin: revert;
	min-height: revert;
	padding: revert;
	text-align: revert;
	text-transform: revert;
	vertical-align: revert;
	width: revert;
}

/*
 * The newsletter field's placeholder. BuddyBoss lightens it to
 * rgb(195,198,201), against the draft's user-agent rgb(117,117,117) — a
 * visible drop in contrast on the draft's #f6f5f1 panel. A pseudo-element
 * cannot be reached by the draft's inline styles, so this is the only place
 * it can be corrected.
 */
body.wem-landing .wem-section :is(input, textarea)::placeholder {
	color: revert;
	font-family: revert;
	font-size: revert;
	font-weight: revert;
	opacity: revert;
}

/*
 * 5i. FitVids, which BuddyBoss loads, wraps every <iframe> at runtime in
 * `<div class="fluid-width-video-wrapper" style="padding-top:56.25%">`. The
 * draft's rescue-story player already supplies its own `position:relative;
 * aspect-ratio:16/9; min-height:520px; max-height:92vh` box and positions the
 * iframe with `inset:0`, so the wrapper is a second, differently-sized aspect
 * box competing with it. `display:contents` drops the wrapper's box without
 * dropping the iframe, which puts the iframe back to being positioned against
 * the draft's own container.
 */
body.wem-landing .wem-section .fluid-width-video-wrapper {
	display: contents;
}

/* ------------------------------------------------------------------ *
 * 6. Rescue-story play interaction (landing.js toggles the hidden state)
 * ------------------------------------------------------------------ */

.wem-story-idle[hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * 7. Reduced motion — the draft's global damper, scoped to this page
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	body.wem-landing *,
	body.wem-landing *::before,
	body.wem-landing *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* ------------------------------------------------------------------ *
 * 8. Newsletter sign-up
 *
 * The section renders the site's own form widget, so that sign-ups keep
 * reaching the mailing list. That widget arrives with the theme's form
 * styling: a boxed field and a default submit button. The design draws an
 * underlined field and a black pill, so the widget is restyled here rather
 * than replaced, which leaves its fields and its integration untouched.
 * ------------------------------------------------------------------ */

.wem-newsletter-live .elementor-form,
.wem-newsletter-live .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
	width: 100%;
	margin: 0;
}

.wem-newsletter-live .elementor-field-group {
	flex: 1 1 260px;
	padding: 0 !important;
	margin: 0;
}

/*
 * The field itself: a rule under the text, as the design draws it.
 *
 * Section 5 above resets form controls inside this page with
 * `body.wem-landing .wem-section :is(input, ...) { border: revert }`, which
 * outweighs a two-class selector and would hand the field back its default
 * box and 13px type. These rules carry the same prefix plus the section's own
 * class, so they sit above that reset instead of losing to it.
 */
body.wem-landing .wem-section.wem-newsletter-live :is(
	.elementor-field-textual,
	input[type="email"],
	input[type="text"]
) {
	width: 100%;
	min-height: 50px;
	padding: 10px 2px;
	border: 0;
	border-bottom: 2px solid rgba(20, 20, 20, .22);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #141414;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
}

body.wem-landing .wem-section.wem-newsletter-live :is(
	.elementor-field-textual,
	input[type="email"],
	input[type="text"]
):focus {
	border-bottom-color: #0047e0;
	box-shadow: none;
}

body.wem-landing .wem-section.wem-newsletter-live :is(
	.elementor-field-textual,
	input[type="email"],
	input[type="text"]
)::placeholder {
	color: #8b857d;
	opacity: 1;
}

/* The submit button: the same pill every other call to action uses. */
.wem-newsletter-live .elementor-field-type-submit {
	flex: 0 0 auto;
	padding: 0 !important;
}

/*
 * Elementor prints its own colour rule for each saved template's button, at
 * the same weight as a two-class selector, so which one won came down to the
 * order the sheets happened to print in: the French form took the pill and the
 * English one kept its old blue box. Carrying the page and section classes
 * here settles it for both.
 */
body.wem-landing .wem-section.wem-newsletter-live :is(
	.elementor-button[type="submit"],
	button.elementor-button
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 12px 30px;
	border: 0;
	border-radius: 999px;
	background: #141414;
	color: #fff;
	font-family: "Big Shoulders", sans-serif;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: background-color .25s ease;
}

body.wem-landing .wem-section.wem-newsletter-live :is(
	.elementor-button[type="submit"],
	button.elementor-button
):is(:hover, :focus-visible) {
	background: #0047e0;
}

/*
 * The spam check sits on its own row so it never squeezes the field, and the
 * widget's own messages inherit the section's type rather than the theme's.
 */
.wem-newsletter-live .elementor-field-type-recaptcha,
.wem-newsletter-live .elementor-field-type-recaptcha_v3,
.wem-newsletter-live .elementor-message {
	flex: 1 0 100%;
	margin: 0;
}

.wem-newsletter-live .elementor-message {
	font-size: 15px;
}

/* ------------------------------------------------------------------ *
 * 9. The Safety Angels portrait wall (wem-angels, "wall" layout)
 *
 * Square tiles on the brand blue, four to a row and 3px apart. Each tile
 * holds a cut-out portrait with the name on its bottom edge; the athlete's
 * answer waits in a panel folded to zero width beside the tile and slides
 * out over the two neighbouring tiles on hover or focus. Tiles in the right
 * half of a row open leftwards so the panel never leaves the grid. These are
 * rules rather than inline styles because every one of them is a state, a
 * position in the row or a breakpoint, none of which a style attribute can
 * express.
 * ------------------------------------------------------------------ */

.wem-section .wem-wall {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3px;
}

.wem-section .wem-wall-tile {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #0047e0;
	color: #fff;
	outline: none;
	container-type: inline-size;
}

.wem-section .wem-wall-tile:hover,
.wem-section .wem-wall-tile:focus-within {
	z-index: 3;
}

.wem-section .wem-wall-tile:focus-visible {
	outline: 3px solid #8fb2ff;
	outline-offset: -3px;
}

.wem-section .wem-wall-media {
	position: absolute;
	inset: 0;
	overflow: clip;
}

/* The wall's heading and its count share one line above a phone: the
 * heading takes the room, the count stays on the right at its foot. */
@media (min-width: 761px) {
	.wem-section .wem-wall-head {
		flex-wrap: nowrap !important;
	}

	.wem-section .wem-wall-head > div {
		flex: 1 1 auto;
	}

	.wem-section .wem-wall-count {
		flex: none;
	}
}

/* A tile with a profile page opens it: a link over the whole tile, under
 * the answer panel (whose own links stay clickable). Keyboard focus on the
 * link opens the answer as hovering does. */
.wem-section .wem-wall-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
}

.wem-section .wem-wall-link:focus-visible {
	outline: 3px solid #8fb2ff;
	outline-offset: -3px;
}

.wem-section .wem-wall-tile .wem-wall-words {
	z-index: 3;
}

.wem-section .wem-wall-more:hover,
.wem-section .wem-wall-more:focus-visible {
	color: #fff !important;
}

/* Name and titles on the bottom edge, fading out when the answer opens. The
 * blue is full well above the bottom, behind titles of three or four lines. */
.wem-section .wem-wall-who {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(40px, 4vw, 64px) clamp(16px, 1.8vw, 26px) clamp(16px, 1.8vw, 26px);
	background: linear-gradient(rgba(0, 71, 224, 0), rgba(0, 71, 224, .92) 45%);
	transition: opacity 260ms cubic-bezier(.16, 1, .3, 1);
}

.wem-section .wem-wall-tile:has(.wem-wall-words):hover .wem-wall-who,
.wem-section .wem-wall-tile:has(.wem-wall-words):focus-within .wem-wall-who {
	opacity: 0;
}

/*
 * The answer: folded away to the right of the tile until hovered. The tile
 * class is repeated in these selectors because section 5d rolls every
 * blockquote's background and padding back to the browser's, at a weight a
 * two-class selector does not reach.
 */
.wem-section .wem-wall-tile .wem-wall-words {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 0;
	box-sizing: border-box; /* the padding is inside the two-tile width; 5a reverts to content-box */
	margin-left: 3px;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: end;
	gap: clamp(16px, 3cqw, 32px);
	padding: 0;
	background: #0047e0;
	opacity: 0;
	pointer-events: none;
	transition: width 600ms cubic-bezier(.2, .7, .2, 1), opacity 300ms cubic-bezier(.16, 1, .3, 1);
}

.wem-section .wem-wall-tile:hover .wem-wall-words,
.wem-section .wem-wall-tile:focus-within .wem-wall-words {
	width: calc(200% + 6px);
	padding: clamp(22px, 2.4vw, 40px);
	opacity: 1;
	pointer-events: auto;
	transition-delay: 0ms, 120ms;
}

/* The right half of a row opens leftwards. */
.wem-section .wem-wall-tile:nth-child(4n+3) .wem-wall-words,
.wem-section .wem-wall-tile:nth-child(4n) .wem-wall-words {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: 3px;
}

/* The words themselves wipe in from the left once the panel has opened. */
.wem-section .wem-wall-tile .wem-wall-words > * {
	min-width: 0;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 520ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section .wem-wall-tile:hover .wem-wall-words > *,
.wem-section .wem-wall-tile:focus-within .wem-wall-words > * {
	clip-path: inset(0);
	transition-delay: 620ms;
}

.wem-section .wem-wall-tile:hover .wem-wall-words > footer,
.wem-section .wem-wall-tile:focus-within .wem-wall-words > footer {
	transition-delay: 760ms;
}

.wem-section .wem-wall-ig {
	transition: background 180ms cubic-bezier(.2, .7, .2, 1), color 180ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section .wem-wall-ig:hover,
.wem-section .wem-wall-ig:focus-visible {
	background: #fff !important;
	color: #0047e0 !important;
}

/* Two to a row on a tablet: the panel covers one neighbour, alternating sides. */
@media (max-width: 1000px) {
	.wem-section .wem-wall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wem-section .wem-wall-tile:nth-child(4n+3) .wem-wall-words,
	.wem-section .wem-wall-tile:nth-child(4n) .wem-wall-words {
		left: 100%;
		right: auto;
		margin-left: 3px;
		margin-right: 0;
	}

	.wem-section .wem-wall-tile:hover .wem-wall-words,
	.wem-section .wem-wall-tile:focus-within .wem-wall-words {
		width: calc(100% + 3px);
		grid-template-columns: 1fr;
	}

	.wem-section .wem-wall-tile:nth-child(2n) .wem-wall-words {
		left: auto;
		right: 100%;
		margin-left: 0;
		margin-right: 3px;
	}
}

/* On a phone the tiles stack and every answer is printed under its portrait. */
@media (max-width: 760px) {
	.wem-section .wem-wall {
		grid-template-columns: 1fr;
	}

	.wem-section .wem-wall-tile {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
	}

	.wem-section .wem-wall-media {
		position: relative;
		aspect-ratio: 1 / 1;
	}

	.wem-section .wem-wall-tile:has(.wem-wall-words) .wem-wall-who {
		display: none;
	}

	.wem-section .wem-wall-tile .wem-wall-words,
	.wem-section .wem-wall-tile:nth-child(2n) .wem-wall-words,
	.wem-section .wem-wall-tile:hover .wem-wall-words,
	.wem-section .wem-wall-tile:focus-within .wem-wall-words {
		position: static;
		width: auto;
		margin: 0;
		padding: 26px 24px 30px;
		opacity: 1;
		pointer-events: auto;
		grid-template-columns: 1fr;
		transition: none;
	}

	.wem-section .wem-wall-tile .wem-wall-words > * {
		clip-path: none;
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wem-section .wem-wall-tile .wem-wall-words,
	.wem-section .wem-wall-tile .wem-wall-words > *,
	.wem-section .wem-wall-who {
		transition: none;
	}

	.wem-section .wem-wall-tile .wem-wall-words > * {
		clip-path: none;
	}
}

/* ------------------------------------------------------------------ *
 * 10. The experts grid and the Voices quotes (experts page)
 *
 * Both are grids that step down by breakpoint, which a style attribute
 * cannot do: the expert cards go four, three, two, one to a row; the three
 * quote cards stack under 980px.
 * ------------------------------------------------------------------ */

.wem-section .wem-experts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3px;
}

@media (max-width: 1100px) {
	.wem-section .wem-experts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.wem-section .wem-experts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.wem-section .wem-experts {
		grid-template-columns: 1fr;
	}
}

/* The quote that fills the cells the grid's last row leaves empty: it spans
 * them at each column count, and is not shown where the row is full. */
.wem-section .wem-experts-fill {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wem-section .wem-experts-fill[data-f4="0"] { display: none; }
.wem-section .wem-experts-fill[data-f4="2"] { grid-column: span 2; }
.wem-section .wem-experts-fill[data-f4="3"] { grid-column: span 3; }

@media (max-width: 1100px) {
	.wem-section .wem-experts-fill[data-f4] { display: flex; grid-column: auto; }
	.wem-section .wem-experts-fill[data-f3="0"] { display: none; }
	.wem-section .wem-experts-fill[data-f3="2"] { grid-column: span 2; }
}

@media (max-width: 820px) {
	.wem-section .wem-experts-fill[data-f4][data-f3] { display: flex; grid-column: auto; }
	.wem-section .wem-experts-fill[data-f2="0"] { display: none; }
}

@media (max-width: 520px) {
	.wem-section .wem-experts-fill[data-f4][data-f3][data-f2] { display: none; }
}

/* The name takes the brand blue under the pointer, the design's only card state. */
.wem-section .wem-expert-name {
	transition: color 180ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section .wem-expert:hover .wem-expert-name {
	color: #0047e0 !important;
}

.wem-section .wem-quotes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3px;
}

@media (max-width: 980px) {
	.wem-section .wem-quotes {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 * 11. The course pages' grids and the film (e-learning page)
 *
 * Grids that step down by breakpoint, and the A2R rows, which put the
 * photograph beside the words and under them on a phone. The film hides its
 * poster once the player has been asked for.
 * ------------------------------------------------------------------ */

.wem-section .wem-courses,
.wem-section .wem-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3px;
}

/* A2R, "three blocks": the moves side by side; one under the other on a phone. */
.wem-section .wem-a2r-blocks {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3.4vw, 56px);
}

@media (max-width: 900px) {
	.wem-section .wem-a2r-blocks {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* As many columns as there are courses, up to three. */
.wem-section .wem-courses {
	grid-template-columns: repeat(var(--wem-cols, 3), minmax(0, 1fr));
}

/* Courses, "beside" layout: the heading and lead in a column on the left,
 * the courses on the right; stacked below 1100px. */
@media (min-width: 1100px) {
	.wem-section .wem-courses-side {
		display: grid;
		grid-template-columns: minmax(280px, .8fr) minmax(0, 2fr);
		gap: clamp(32px, 4vw, 72px);
		align-items: start;
	}

	.wem-section .wem-courses-side > .wem-reveal:first-child {
		position: sticky;
		top: 110px;
		margin-bottom: 0 !important;
	}
}

/* Four vertical films to a row; two on a tablet or phone. */
.wem-section .wem-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3px;
}

@media (max-width: 1024px) {
	.wem-section .wem-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wem-section .wem-grid-6 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3px;
}

@media (max-width: 980px) {
	.wem-section .wem-courses,
	.wem-section .wem-grid-3 {
		grid-template-columns: 1fr;
	}

	.wem-section .wem-grid-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.wem-section .wem-grid-6 {
		grid-template-columns: 1fr;
	}
}

.wem-section .wem-a2r-diagram svg {
	display: block;
	width: 100%;
	height: auto;
}

/* A phone gets the diagram drawn upright, when the widget has one; the wide
 * one is kept for larger screens. */
.wem-section .wem-a2r-phone {
	display: none;
}

.wem-section .wem-a2r-phone svg {
	display: block;
	width: 100%;
	max-width: 480px;
	height: auto;
	margin: 0 auto;
}

@media (max-width: 820px) {
	.wem-section .wem-a2r-phone {
		display: block;
	}

	.wem-section .wem-a2r-desk {
		display: none;
	}
}

/* Without an upright version the wide diagram would shrink its lesson labels
 * to a few pixels; it keeps a readable width and swipes sideways instead. */
@media (max-width: 820px) {
	.wem-section .wem-a2r-diagram {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding-bottom: 10px;
	}

	/* !important: the design's SVG carries width:100% in its own style. */
	.wem-section .wem-a2r-diagram svg {
		width: 820px !important;
		max-width: none !important;
	}
}

/*
 * On a phone the three segments cannot share one line at 80 / 10 / 10 and
 * keep their labels, so the bar becomes a small bar chart: a row per move,
 * its name, a track filled to its share in its colour, and the figure. The
 * 80 is visibly eight times the 10s. !important where the segment's inline
 * style sets the same property.
 */
.wem-section .wem-bar-track {
	display: none;
}

@media (max-width: 560px) {
	.wem-section .wem-bar {
		flex-direction: column;
		gap: 14px !important;
	}

	.wem-section .wem-bar .wem-bar-seg {
		display: grid !important;
		grid-template-columns: 5.2em minmax(0, 1fr) 2.6em;
		align-items: center !important;
		gap: 12px !important;
		padding: 0 !important;
		background: none !important;
		color: #141414 !important;
		overflow: visible !important;
	}

	.wem-section .wem-bar .wem-bar-label {
		font-size: 17px !important;
	}

	.wem-section .wem-bar .wem-bar-track {
		display: block;
		height: 28px;
		background: linear-gradient(90deg, var(--wem-seg) var(--wem-share), rgba(20, 20, 20, .08) var(--wem-share));
	}

	.wem-section .wem-bar .wem-bar-value {
		font-size: 24px !important;
		text-align: right;
	}
}

/* A photograph beside an A2R row slides in from the right as it scrolls up. */
@keyframes wem-slide-in {
	from { opacity: 0; transform: translateX(64px); }
	to   { opacity: 1; transform: none; }
}

/* .wem-slide-in now plays once: [data-wem-once="slide-in"], section 2. */

.wem-film-idle[hidden] {
	display: none !important;
}

.wem-section .wem-film button:hover span:first-child,
.wem-section .wem-film button:focus-visible span:first-child {
	background: #0047e0 !important;
	border-color: #0047e0 !important;
}

/* ------------------------------------------------------------------ *
 * 12. Rows that scroll sideways (lessons, a few experts) and outcome rows
 *
 * The track shows four cards at a time, three on a tablet and most of one on
 * a phone, snapping card by card; landing.js drives the arrows and dots. The
 * outcome rows take the brand blue under the pointer.
 * ------------------------------------------------------------------ */

/*
 * A flex row rather than a grid: percentage widths on implicit grid tracks
 * resolved to nothing inside the scroll container (measured: the cards fell
 * to their 280px minimum on a desktop and to 29px on a phone), while a flex
 * item's percentage basis resolves against the rail's width as it should.
 */
.wem-section .wem-track {
	display: flex;
	align-items: stretch;
	gap: 3px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.wem-section .wem-track::-webkit-scrollbar {
	display: none;
}

.wem-section .wem-track > * {
	flex: 0 0 max(280px, calc((100% - 9px) / 4));
	box-sizing: border-box; /* the card's padding sits inside its share; 5a reverts to content-box */
	scroll-snap-align: start;
}

@media (max-width: 1100px) {
	.wem-section .wem-track > * {
		flex-basis: max(280px, calc((100% - 6px) / 3));
	}
}

@media (max-width: 760px) {
	.wem-section .wem-track > * {
		flex-basis: 86%;
	}
}

/* !important: BuddyBoss styles every <button> (border, padding, radius,
 * minimum size, grey fill), which turned the dots into outlined pills. */
.wem-section [data-wem-track-dots] button {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 10px !important;
	min-width: 0 !important;
	height: 10px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	outline-offset: 3px;
	background: rgba(20, 20, 20, .22) !important;
	font-size: 0 !important;
	line-height: 0 !important;
	cursor: pointer;
	transition: width 250ms cubic-bezier(.2, .7, .2, 1), background 180ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section [data-wem-track-dots] button[aria-current] {
	width: 28px !important;
	background: #0047e0 !important;
}

/* On the dark and sky grounds the idle dots are light. */
.wem-section[style*="#0a2f8f"] [data-wem-track-dots] button:not([aria-current]),
.wem-section[style*="#0c0f12"] [data-wem-track-dots] button:not([aria-current]) {
	background: rgba(255, 255, 255, .35) !important;
}

.wem-section .wem-out-row:hover,
.wem-section .wem-out-row:focus-within {
	background: #0047e0;
	color: #fff;
}

.wem-section .wem-out-row:hover span,
.wem-section .wem-out-row:focus-within span {
	color: #fff !important;
}

/* ------------------------------------------------------------------ *
 * 20. The partner marquee (wem-partners)
 *
 * Two rows of logos drifting in opposite directions, in one ink until the
 * pointer lands on one, faded at both ends. Each row is printed twice so
 * the loop has no seam. The rows begin mid-travel (a negative delay), so
 * the logos are already spread across the middle of the band on the first
 * paint rather than filing in from one edge. Reduced motion stops the drift.
 * ------------------------------------------------------------------ */

.wem-section .wem-marq {
	overflow: hidden;
	display: grid;

	gap: clamp(34px, 4vw, 56px);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.wem-section .wem-marq-row {
	/*
	 * The band's own paper, painted on each moving row. A row that moves
	 * (transform), inside a strip with a fade mask, is a layer of its own,
	 * so the logos' multiply blend (below) can only mix with what the row
	 * itself paints: with nothing painted, a logo saved on a white box kept
	 * its box. Set --wem-marq-ground on a section with another ground.
	 */
	background: var(--wem-marq-ground, #f6f5f1);
	display: flex;
	align-items: center;
	width: max-content;
	gap: clamp(64px, 7vw, 120px);
	padding-right: clamp(64px, 7vw, 120px);
}

/* The homepage (both languages) is white behind the strip, not paper. */
body.home .wem-section {
	--wem-marq-ground: #fff;
}

.wem-section .wem-marq-row.a {
	animation: wem-marq-a 64s linear infinite;
	animation-delay: -32s;
}

.wem-section .wem-marq-row.b {
	animation: wem-marq-b 72s linear infinite;
	animation-delay: -36s;
}

.wem-section .wem-marq:hover .wem-marq-row {
	animation-play-state: paused;
}

/* The strip in one ink, black: greyscale, then contrast pushes every mark
 * to black and its white ground to white, and multiply drops that white
 * into the band, so a logo saved on a white box shows no box. */
.wem-section .wem-marq img,
.wem-section .wem-marq span > img {
	filter: grayscale(1) contrast(6);
	mix-blend-mode: multiply;
	opacity: 1;
	transition: filter 200ms cubic-bezier(.2, .7, .2, 1), opacity 200ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section .wem-marq img:hover,
.wem-section .wem-marq span:hover > img {
	filter: none;
	opacity: 1;
}

@keyframes wem-marq-a {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes wem-marq-b {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.wem-section .wem-marq-row {
		animation: none;
	}
}

/* ------------------------------------------------------------------ *
 * 21. The posts grid (wem-posts): the blog and the podcast
 *
 * Three cards to a row on paper, two on a tablet, one on a phone, with room
 * between them: a listing of articles reads better spaced than the 3px seam
 * of the course cards.
 * ------------------------------------------------------------------ */

.wem-section .wem-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 36px);
}

@media (max-width: 1100px) {
	.wem-section .wem-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.wem-section .wem-posts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Elementor widgets carried over unchanged into a rebuilt page (a booking
 * embed, a form, a film playlist) sit in the page's own column. */
.wem-landing .wem-carried {
	width: min(100%, 1540px);
	margin: 0 auto;
	padding: clamp(40px, 5vw, 72px) clamp(22px, 5.5vw, 88px);
	background: #f6f5f1;
}


/* ------------------------------------------------------------------ *
 * 22. The course comparison on a phone (wem-compare)
 *
 * Both courses fit the screen: the table drops its 560px floor, the cells
 * tighten and the course names step down, so the second column is not
 * hidden off to the side. !important because the cells are styled inline.
 * ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.wem-section .wem-compare-table {
		min-width: 0 !important;
		font-size: 13px !important;
	}

	.wem-section .wem-compare-table th,
	.wem-section .wem-compare-table td {
		padding: 14px 10px !important;
	}

	.wem-section .wem-compare-table th:first-child,
	.wem-section .wem-compare-table td:first-child {
		padding-left: 16px !important;
	}

	.wem-section .wem-compare-table thead th {
		font-size: 14px !important;
		letter-spacing: 0 !important;
		white-space: nowrap;
	}

	.wem-section .wem-compare-table thead th:first-child {
		font-size: 10px !important;
		letter-spacing: .14em !important;
	}

	.wem-section .wem-compare-table td {
		font-size: 13px;
	}
}

/* ------------------------------------------------------------------ *
 * 23. Partner logos as a grid of cards (wem-partners, "grid" layout)
 *
 * The partners page's cards (section on .wem-pool below), with the
 * widget's "logos per row" on a screen wide enough to hold them.
 * ------------------------------------------------------------------ */

/* The rewards logos come without the partner files' built-in margin. */
.wem-section .wem-pool.wem-logo-pool .wem-pool-logo img {
	padding: 12% 14%;
}

@media (min-width: 821px) {
	.wem-section .wem-pool.wem-pool-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wem-section .wem-pool.wem-pool-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* The marquee without motion: one centred, wrapping set of logos. */
@media (prefers-reduced-motion: reduce) {
	.wem-section .wem-marq-row {
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * 24. Screen-specific sections (wem-embed "Show on")
 *
 * The same breakpoint as Elementor's own "hide on mobile": 767px.
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.wem-section.wem-only-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.wem-section.wem-only-phone {
		display: none !important;
	}
}

/* The footer's social icons. */
.wem-section .wem-social {
	transition: opacity 180ms cubic-bezier(.2, .7, .2, 1), transform 180ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section .wem-social:hover,
.wem-section .wem-social:focus-visible {
	opacity: 1 !important;
	transform: translateY(-2px);
}

/* The stats band's figures: the final figure holds the width, the counting
 * figure is laid over it (landing.js, setUpRollups). */
.wem-section .wem-rollup {
	position: relative;
	display: inline-block;
}

.wem-section .wem-rollup-final {
	visibility: hidden;
}

.wem-section .wem-rollup-live {
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
}


/* A carried logo lockup with white lettering sits on the night ground. */
.wem-landing .wem-carried.wem-carried-night {
	width: 100%;
	max-width: none;
	background: #0c0f12;
}

/* ------------------------------------------------------------------ *
 * 25. Partner products and a product page (wem-product-grid,
 *     wem-product-detail)
 * ------------------------------------------------------------------ */

.wem-section .wem-pgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3px;
}

.wem-section .wem-pgrid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1180px) {
	.wem-section .wem-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.wem-section .wem-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.wem-section .wem-pgrid { grid-template-columns: minmax(0, 1fr); }
}

.wem-section .wem-pgcard {
	transition: border-color 180ms cubic-bezier(.16, 1, .3, 1);
}

.wem-section .wem-pgcard:hover,
.wem-section .wem-pgcard:focus-visible {
	border-color: #0047e0 !important;
}

.wem-section .wem-pgcard:hover .wem-pgcard-cta,
.wem-section .wem-pgcard:focus-visible .wem-pgcard-cta {
	background: #0047e0;
	border-color: #0047e0 !important;
	color: #fff;
}

.wem-section .wem-pgcard-price del,
.wem-section .wem-pdp2-price del {
	margin-right: 6px;
	color: #8a8580;
	font-weight: 400;
}

.wem-section .wem-pgcard-price ins,
.wem-section .wem-pdp2-price ins {
	text-decoration: none;
}

.wem-section .wem-pgrid-pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(20, 20, 20, .22);
	border-radius: 999px;
	color: #141414;
	font-family: 'Big Shoulders', sans-serif;
	font-weight: 800;
	text-decoration: none;
}

.wem-section .wem-pgrid-pages .page-numbers.current {
	background: #141414;
	border-color: #141414;
	color: #fff;
}

/* The partner shop's filters (wem-product-grid): partner pills on the blue
 * band, the sticky bar of kinds with the count and "Filter & sort", and the
 * side panel it opens. Pills as in the design: 9px 18px, Big Shoulders 800.
 * "body … a." outweighs the section's link rules; !important on the button
 * and the panel's fields, which BuddyBoss styles (as the track dots above). */
.wem-shop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}

body .wem-section a.wem-shop-chip,
body .wem-section a.wem-shop-chip-dark,
body .wem-section button.wem-shop-open {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	width: auto !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 9px 18px !important;
	border: 1px solid rgba(20, 20, 20, .22) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	background: transparent !important;
	color: #141414 !important;
	font-family: 'Big Shoulders', sans-serif !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background 180ms cubic-bezier(.16, 1, .3, 1), border-color 180ms cubic-bezier(.16, 1, .3, 1), color 180ms cubic-bezier(.16, 1, .3, 1);
}

body .wem-section a.wem-shop-chip:hover,
body .wem-section a.wem-shop-chip:focus-visible,
body .wem-section button.wem-shop-open:hover,
body .wem-section button.wem-shop-open:focus-visible {
	border-color: #0047e0 !important;
	color: #0047e0 !important;
}

body .wem-section a.wem-shop-chip.is-active {
	background: #0047e0 !important;
	border-color: #0047e0 !important;
	color: #fff !important;
}

body .wem-section a.wem-shop-chip-dark {
	padding: 8px 16px !important;
	border-color: rgba(255, 255, 255, .4) !important;
	color: #fff !important;
	font-size: 13px !important;
}

body .wem-section a.wem-shop-chip-dark:hover,
body .wem-section a.wem-shop-chip-dark:focus-visible {
	border-color: #fff !important;
}

body .wem-section a.wem-shop-chip-dark.is-active {
	background: #fff !important;
	border-color: #fff !important;
	color: #0a2f8f !important;
}

body .wem-section button.wem-shop-open {
	border: 1.5px solid #141414 !important;
}

.wem-section.wem-shop-filters {
	position: sticky;
	top: 0;
	z-index: 30;
	background: #f6f5f1;
	border-bottom: 1px solid rgba(20, 20, 20, .14);
}

.wem-shop-filters-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	width: min(100%, 1540px);
	margin: 0 auto;
}

.wem-shop-tools {
	display: flex;
	flex: none;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

body .wem-section .wem-shop-count {
	margin: 0;
	color: #56524c;
	font-size: 14px;
	white-space: nowrap;
}

.wem-shop-open-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: #0047e0;
	color: #fff;
	font-size: 12px;
	letter-spacing: 0;
}

/* Phones: the tools on top, the kinds in one row that scrolls sideways,
 * bleeding to the screen's edges. */
@media (max-width: 860px) {
	.wem-shop-filters-inner {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 12px;
	}

	.wem-shop-tools {
		justify-content: space-between;
		margin-left: 0;
	}

	.wem-shop-kinds {
		flex-wrap: nowrap;
		margin: 0 calc(-1 * clamp(22px, 5.5vw, 88px));
		padding: 0 clamp(22px, 5.5vw, 88px) 2px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.wem-shop-kinds::-webkit-scrollbar {
		display: none;
	}
}

/* The side panel. */
.wem-shop-sheet,
.wem-shop-sheet * {
	box-sizing: border-box;
}

.wem-shop-sheet {
	width: min(440px, 100vw);
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: #f6f5f1;
	color: #141414;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

.wem-shop-sheet::backdrop {
	background: rgba(10, 18, 40, .5);
}

.wem-shop-sheet[open] {
	animation: wemSheetIn 280ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes wemSheetIn {
	from { transform: translateX(40px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.wem-shop-sheet[open] { animation: none; }
}

.wem-shop-sheet form {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

.wem-shop-sheet-head,
.wem-shop-sheet-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 28px;
}

.wem-shop-sheet-head {
	border-bottom: 1px solid rgba(20, 20, 20, .14);
}

.wem-shop-sheet .wem-shop-sheet-head h2 {
	margin: 0;
	color: #141414;
	font-family: 'Big Shoulders', sans-serif;
	font-size: 28px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

.wem-shop-sheet button.wem-shop-sheet-close {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-grid !important;
	place-items: center;
	width: 40px !important;
	min-width: 0 !important;
	height: 40px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(20, 20, 20, .22) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	background: transparent !important;
	color: #141414 !important;
	font-size: 24px !important;
	line-height: 1 !important;
	cursor: pointer;
}

.wem-shop-sheet-body {
	flex: 1;
	overflow-y: auto;
	padding: 8px 28px 24px;
}

.wem-shop-sheet fieldset {
	min-width: 0 !important;
	margin: 0 !important;
	padding: 20px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(20, 20, 20, .14) !important;
	background: none !important;
}

.wem-shop-sheet legend {
	float: left;
	width: 100% !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 0 !important;
	color: #0047e0 !important;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
}

.wem-shop-sheet label.wem-shop-option {
	clear: both;
	display: flex !important;
	align-items: center;
	gap: 12px;
	margin: 0 !important;
	padding: 7px 0 !important;
	color: #141414 !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	cursor: pointer;
}

.wem-shop-sheet .wem-shop-option input {
	flex: none;
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	accent-color: #0047e0;
}

.wem-shop-option small {
	margin-left: auto;
	color: #56524c;
	font-size: 13px;
}

.wem-shop-price {
	clear: both;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.wem-shop-sheet .wem-shop-price label {
	display: flex !important;
	flex-direction: column;
	gap: 6px;
	margin: 0 !important;
	color: #56524c !important;
	font-size: 13px !important;
	font-weight: 400 !important;
}

.wem-shop-sheet .wem-shop-price input {
	-webkit-appearance: none !important;
	appearance: textfield !important;
	width: 100% !important;
	height: 44px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 1px solid rgba(20, 20, 20, .22) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	background: #fff !important;
	color: #141414 !important;
	font-size: 15px !important;
}

.wem-shop-sheet .wem-shop-price input:focus {
	border-color: #0047e0 !important;
	outline: 0;
}

.wem-shop-sheet-foot {
	border-top: 1px solid rgba(20, 20, 20, .14);
	background: #fff;
}

.wem-shop-sheet a.wem-shop-sheet-clear {
	color: #141414;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wem-shop-sheet button.wem-shop-sheet-apply {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 13px 26px !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	background: #0047e0 !important;
	color: #fff !important;
	font-family: 'Big Shoulders', sans-serif !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	cursor: pointer;
}

.wem-shop-sheet button.wem-shop-sheet-apply:hover,
.wem-shop-sheet button.wem-shop-sheet-apply:focus-visible {
	background: #0032a4 !important;
}

/* The product page's two columns. */
.wem-section .wem-pdp2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3px;
	align-items: start;
}

@media (max-width: 900px) {
	.wem-section .wem-pdp2 { grid-template-columns: minmax(0, 1fr); }
}

/* WooCommerce's add-to-cart form, drawn to the design: sizes as pills
 * (landing.js adds them over the select, which stays the source of truth),
 * quantity as a rounded stepper, the button as the blue pill. */
.wem-section .wem-pdp2-cart table.variations {
	width: 100%;
	margin: 0 0 20px;
	border: 0;
}

.wem-section .wem-pdp2-cart table.variations th,
.wem-section .wem-pdp2-cart table.variations td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.wem-section .wem-pdp2-cart table.variations label {
	display: block;
	margin: 0 0 10px;
	color: #56524c;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.wem-section .wem-pdp2-cart .wem-size-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.wem-section .wem-pdp2-cart .wem-size-pills button {
	padding: 11px 22px;
	border: 1px solid rgba(20, 20, 20, .22);
	border-radius: 999px;
	background: transparent;
	color: #141414;
	font-family: 'Big Shoulders', sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.wem-section .wem-pdp2-cart .wem-size-pills button[aria-pressed="true"] {
	background: #141414;
	border-color: #141414;
	color: #fff;
}

.wem-section .wem-pdp2-cart .wem-size-pills + select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.wem-section .wem-pdp2-cart .reset_variations {
	font-size: 12px;
	color: #56524c;
}

.wem-section .wem-pdp2-cart form.cart,
.wem-section .wem-pdp2-cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.wem-section .wem-pdp2-cart form.variations_form {
	display: block;
}

.wem-section .wem-pdp2-cart .quantity input.qty {
	width: 88px;
	height: 52px;
	padding: 0 12px;
	border: 1px solid rgba(20, 20, 20, .22);
	border-radius: 999px;
	font-family: 'Big Shoulders', sans-serif;
	font-size: 19px;
	font-weight: 800;
	text-align: center;
}

.wem-section .wem-pdp2-cart .single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
	min-height: 52px;
	padding: 14px 32px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #0047e0 !important;
	color: #fff !important;
	font-family: 'Big Shoulders', sans-serif !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
}

.wem-section .wem-pdp2-cart .single_add_to_cart_button:hover,
.wem-section .wem-pdp2-cart .single_add_to_cart_button:focus-visible {
	background: #0033a8 !important;
}

.wem-section .wem-pdp2-cart .woocommerce-variation-price {
	margin: 0 0 12px;
	font-family: 'Big Shoulders', sans-serif;
	font-size: 22px;
	font-weight: 900;
}

/* The currency switcher under the cart (WooCommerce Multilingual): WCML's
 * list, flat or as its dropdown, laid out as the size pills above — the
 * current currency filled. !important: WCML's markup is bare lists and
 * links, which BuddyBoss and the section's link colour both style. */
.wem-section .wem-pdp2-currency .wem-pdp2-currency-label {
	margin: 0 0 10px;
	color: #56524c;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.wem-section .wem-pdp2-currency ul {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.wem-section .wem-pdp2-currency li {
	display: contents !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.wem-section .wem-pdp2-currency ul ul {
	display: contents !important;
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
}

body .wem-section .wem-pdp2-currency a {
	display: inline-flex !important;
	align-items: center;
	padding: 11px 22px !important;
	border: 1px solid rgba(20, 20, 20, .22) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: #141414 !important;
	font-family: 'Big Shoulders', sans-serif !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: border-color 180ms cubic-bezier(.16, 1, .3, 1), color 180ms cubic-bezier(.16, 1, .3, 1);
}

body .wem-section .wem-pdp2-currency a:hover,
body .wem-section .wem-pdp2-currency a:focus-visible {
	border-color: #0047e0 !important;
	color: #0047e0 !important;
}

/* The current currency: filled, and not a link to itself. The dropdown's
 * toggle carries a caret drawn by WCML's CSS; none is printed here. */
body .wem-section .wem-pdp2-currency .wcml-cs-active-currency > a,
body .wem-section .wem-pdp2-currency a.wcml-cs-item-toggle {
	background: #141414 !important;
	border-color: #141414 !important;
	color: #fff !important;
	pointer-events: none;
}

body .wem-section .wem-pdp2-currency a.wcml-cs-item-toggle::after {
	content: none !important;
}

/* Cards in a grid rise one after another, three to a beat, when the grid is
 * first seen (a card's own --wem-delay, set inline, wins). */
[data-wem-once="fade-up"]:nth-child(3n + 2) { --wem-delay: .1s; }
[data-wem-once="fade-up"]:nth-child(3n + 3) { --wem-delay: .2s; }


/* Vertical interviews on a phone: the film's own title card already names
 * the rider, so the caption steps aside rather than run into it. */
@media (max-width: 860px) {
	.wem-section .wem-grid-4 figcaption {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * 26. The information pages: FAQ (wem-faq), values (wem-principles) and
 *     contact (wem-contact, and the site's own form beside it)
 *
 * The design system's rules: paper for reading, the 3px seam, hairlines
 * instead of boxes, Big Shoulders uppercase for questions, numbers and
 * names, the system sans in stone for answers, underlined form fields and a
 * pill button. Hover is a colour change only.
 * ------------------------------------------------------------------ */

/* FAQ: heading column left (kept in view on a wide screen), questions right. */
.wem-section .wem-faq-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(36px, 5vw, 92px);
	align-items: start;
}

.wem-section .wem-faq-head {
	position: sticky;
	top: 120px;
}

@media (max-width: 900px) {
	.wem-section .wem-faq-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wem-section .wem-faq-head {
		position: static;
	}
}

.wem-section .wem-faq-list {
	border-top: 2px solid #141414;
}

.wem-section .wem-faq-item {
	border-bottom: 1px solid rgba(20, 20, 20, .14);
}

.wem-section .wem-faq-item summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 28px;
	gap: clamp(14px, 2vw, 28px);
	align-items: baseline;
	padding: clamp(20px, 2.2vw, 30px) 0;
	cursor: pointer;
	list-style: none;
	color: #141414;
	transition: color 180ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section .wem-faq-item summary::-webkit-details-marker {
	display: none;
}

.wem-section .wem-faq-item summary:hover,
.wem-section .wem-faq-item summary:focus-visible,
.wem-section .wem-faq-item[open] summary {
	color: #0047e0;
}

.wem-section .wem-faq-item summary:focus-visible {
	outline: 2px solid #0047e0;
	outline-offset: 4px;
}

.wem-section .wem-faq-n {
	font-family: "Big Shoulders", sans-serif;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .06em;
	color: #0047e0;
}

.wem-section .wem-faq-q {
	font-family: "Big Shoulders", sans-serif;
	font-size: clamp(21px, 1.9vw, 28px);
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	text-wrap: balance;
}

/* The plus: two strokes; the upright one folds away as the answer opens. */
.wem-section .wem-faq-icon {
	position: relative;
	align-self: center;
	width: 22px;
	height: 22px;
}

.wem-section .wem-faq-icon::before,
.wem-section .wem-faq-icon::after {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 22px;
	height: 2.5px;
	background: currentColor;
	transition: transform 280ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section .wem-faq-icon::after {
	transform: rotate(90deg);
}

.wem-section .wem-faq-item[open] .wem-faq-icon::after {
	transform: rotate(0deg);
}

.wem-section .wem-faq-a {
	padding: 0 50px clamp(18px, 2vw, 28px) calc(clamp(14px, 2vw, 28px) + 22px);
	animation: wem-faq-open 280ms cubic-bezier(.16, 1, .3, 1);
}

@keyframes wem-faq-open {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
	.wem-section .wem-faq-a {
		padding: 0 0 20px;
	}
}

/* Values: heading and charter, the index of principles, one row each. */
.wem-section .wem-principles-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 92px);
	align-items: end;
}

@media (max-width: 820px) {
	.wem-section .wem-principles-head {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wem-section .wem-principles-index {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: clamp(36px, 5vw, 56px) 0 0;
	padding: 26px 0 0;
	border-top: 2px solid #141414;
}

.wem-section a.wem-principles-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid #141414;
	border-radius: 999px;
	color: #141414;
	font-family: "Big Shoulders", sans-serif;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .05em;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background-color 180ms cubic-bezier(.2, .7, .2, 1), color 180ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section a.wem-principles-pill span {
	color: #0047e0;
	transition: color 180ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section a.wem-principles-pill:hover,
.wem-section a.wem-principles-pill:focus-visible {
	background: #141414;
	color: #fff;
}

.wem-section a.wem-principles-pill:hover span,
.wem-section a.wem-principles-pill:focus-visible span {
	color: #8fb2ff;
}

.wem-section .wem-principles-rows {
	margin-top: clamp(48px, 6vw, 80px);
}

.wem-section .wem-principle {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(24px, 5vw, 92px);
	padding: clamp(40px, 5vw, 72px) 0;
	border-top: 1px solid rgba(20, 20, 20, .14);
	scroll-margin-top: 110px;
}

@media (max-width: 820px) {
	.wem-section .wem-principle {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
}

.wem-section .wem-principle-name {
	display: flex;
	align-items: baseline;
	gap: clamp(16px, 2vw, 28px);
}

.wem-section .wem-principle-n {
	flex: 0 0 auto;
	font-family: "Big Shoulders", sans-serif;
	font-size: clamp(64px, 8vw, 128px);
	font-weight: 900;
	line-height: .8;
	letter-spacing: -.02em;
	color: #0047e0;
}

.wem-section .wem-principle-line {
	margin: 0 0 20px;
	max-width: 26ch;
	font-family: "Big Shoulders", sans-serif;
	font-size: clamp(24px, 2.2vw, 34px);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	color: #141414;
}

.wem-section .wem-principle-list {
	margin: 4px 0 20px;
	padding: 0;
	max-width: 60ch;
	list-style: none;
	border-top: 1px solid rgba(20, 20, 20, .14);
}

.wem-section .wem-principle-list li {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 10px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid rgba(20, 20, 20, .14);
	color: #141414;
	font-size: 16px;
	line-height: 1.5;
}

.wem-section .wem-principle-list li span {
	font-family: "Big Shoulders", sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: #0047e0;
}

/* Contact: the site's form on paper beside the details panel on night,
 * 3px apart; one under the other on a phone. The band is an Elementor
 * container (class wem-contact-band) holding the form's container and the
 * details widget. */
.wem-landing .e-con.wem-contact-band {
	display: grid !important;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 3px !important;
	width: min(100% - 2 * clamp(22px, 5.5vw, 88px), 1540px) !important;
	max-width: none !important;
	margin: 0 auto !important;
	padding: 0 0 clamp(68px, 9vw, 124px) !important;
	/* Paper edge to edge behind it, as the intro above. */
	box-shadow: 0 0 0 100vmax #f6f5f1;
	clip-path: inset(0 -100vmax);
	background: #f6f5f1;
}

@media (max-width: 900px) {
	.wem-landing .e-con.wem-contact-band {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wem-landing .e-con.wem-contact-band > .e-con,
.wem-landing .e-con.wem-contact-band > .elementor-element {
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

.wem-landing .e-con.wem-contact-form {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	padding: clamp(28px, 4vw, 60px) !important;
	background: #fff !important;
	border: 1px solid rgba(20, 20, 20, .14);
}

.wem-section.wem-contact {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wem-landing .wem-contact-band .elementor-widget-wem-contact,
.wem-landing .wem-contact-band .elementor-widget-wem-contact > .elementor-widget-container {
	height: 100%;
}

.wem-section .wem-contact-list {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.wem-section .wem-contact-list li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	margin: 0;
	padding: 20px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.wem-section .wem-contact-glyph {
	color: #8fb2ff;
	line-height: 0;
	padding-top: 1px;
}

.wem-section .wem-contact-text {
	color: #fff;
	font-size: 17px;
	line-height: 1.5;
	text-decoration: none !important;
	transition: color 180ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section a.wem-contact-text:hover,
.wem-section a.wem-contact-text:focus-visible {
	color: #8fb2ff;
}

.wem-section .wem-contact-big {
	font-family: "Big Shoulders", sans-serif;
	font-size: clamp(26px, 2.4vw, 34px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
}

.wem-section .wem-contact-map {
	flex: 1 0 auto;
	min-height: 240px;
	margin-top: 30px;
}

.wem-section .wem-contact-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 240px;
	border: 0;
	filter: grayscale(1) contrast(1.05);
}

/* The site's own form, drawn as the design's form: labels in the
 * attribution style, underlined fields, a black pill that turns blue.
 * Elementor prints each saved form's colours per element, so these rules
 * carry the page, band and container classes (and !important where
 * Elementor's own rule would otherwise win). */
body.wem-landing .wem-contact-form .elementor-form-fields-wrapper {
	margin: 0 -14px !important;
	row-gap: 26px;
}

body.wem-landing .wem-contact-form .elementor-field-group {
	padding: 0 14px !important;
	margin-bottom: 0 !important;
}

body.wem-landing .wem-contact-form .elementor-field-label {
	margin: 0 0 6px;
	color: #141414 !important;
	font-family: inherit !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase;
}

body.wem-landing .wem-contact-form :is(.elementor-field-textual, input[type="email"], input[type="text"], input[type="tel"], textarea, select) {
	width: 100%;
	min-height: 50px;
	padding: 10px 2px !important;
	border: 0 !important;
	border-bottom: 2px solid rgba(20, 20, 20, .22) !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #141414 !important;
	font-family: inherit !important;
	font-size: 16px !important;
	line-height: 1.4;
}

body.wem-landing .wem-contact-form textarea {
	min-height: 150px;
	resize: vertical;
}

body.wem-landing .wem-contact-form :is(.elementor-field-textual, input, textarea, select):focus {
	border-bottom-color: #0047e0 !important;
	outline: none;
}

body.wem-landing .wem-contact-form :is(.elementor-field-textual, input, textarea)::placeholder {
	color: #8b857d;
	opacity: 1;
}

body.wem-landing .wem-contact-form .elementor-field-type-submit {
	margin-top: 10px;
}

body.wem-landing .wem-contact-form :is(.elementor-button[type="submit"], button.elementor-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 14px 34px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #141414 !important;
	color: #fff !important;
	font-family: "Big Shoulders", sans-serif !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase;
	transition: background-color 180ms cubic-bezier(.2, .7, .2, 1);
}

body.wem-landing .wem-contact-form :is(.elementor-button[type="submit"], button.elementor-button):is(:hover, :focus-visible) {
	background: #0047e0 !important;
}

body.wem-landing .wem-contact-form .elementor-message {
	margin-top: 14px;
	font-size: 15px;
}

/* A FAQ with no heading of its own (the page hero names it): the list alone,
 * on the hero's left edge, at a reading width. */
.wem-section .wem-faq-grid.wem-faq-solo {
	grid-template-columns: minmax(0, 1fr);
}

.wem-section .wem-faq-solo .wem-faq-list {
	max-width: 1100px;
}

/* ------------------------------------------------------------------ *
 * 27. A film with its story over it (wem-film with paragraphs)
 *
 * The words left-aligned in a reading column on the left, over a scrim
 * that is darkest behind them, and the play control to the right; one
 * under the other on a phone.
 * ------------------------------------------------------------------ */

.wem-section .wem-film-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(28px, 5vw, 92px);
	align-items: center;
	padding: clamp(56px, 7vw, 112px) clamp(22px, 5.5vw, 88px);
	text-align: left;
	background: linear-gradient(90deg, rgba(12, 15, 18, .6) 0%, rgba(12, 15, 18, .35) 45%, rgba(12, 15, 18, 0) 75%), var(--wem-film-poster, none) center / cover, #0c0f12;
}

.wem-section .wem-film-story-copy {
	max-width: 60ch;
}

.wem-section .wem-film-story-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-left: 22px;
	border-left: 3px solid #8fb2ff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.wem-section .wem-film-story-play {
	justify-self: center;
	margin-right: clamp(0px, 6vw, 120px);
}

@media (max-width: 820px) {
	.wem-section .wem-film-story {
		grid-template-columns: minmax(0, 1fr);
		background: linear-gradient(180deg, rgba(12, 15, 18, .15) 0%, rgba(12, 15, 18, .55) 100%), var(--wem-film-poster, none) center / cover, #0c0f12;
	}

	.wem-section .wem-film-story-play {
		justify-self: start;
		flex-direction: row !important;
		margin: 0;
	}

	.wem-section .wem-film-story-play > span:first-child {
		width: 64px !important;
		height: 64px !important;
	}
}

/* ------------------------------------------------------------------ *
 * 28. The partner pool (wem-partner-pool): every partner on a card
 *
 * White cards on paper, 3px apart; the partner's logo whole and unfiltered
 * on a white tile, the name in Big Shoulders, the teaser in stone. A linked
 * card opens the partner's site; under the pointer the name turns blue and
 * the hairline darkens (colour only, no lift).
 * ------------------------------------------------------------------ */

.wem-section .wem-pool {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 3px;
}

@media (max-width: 1100px) {
	.wem-section .wem-pool {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.wem-section .wem-pool {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.wem-section .wem-pool {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wem-section .wem-pool + .wem-pool-heading,
.wem-section .wem-pool + .wem-pool {
	margin-top: clamp(48px, 6vw, 80px);
}

.wem-section .wem-pool-heading {
	margin: 0 0 clamp(24px, 3vw, 36px);
	font-family: "Big Shoulders", sans-serif;
	font-size: clamp(30px, 3.2vw, 44px);
	font-weight: 900;
	line-height: .95;
	text-transform: uppercase;
	color: #141414;
}

.wem-section .wem-pool-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	border: 1px solid rgba(20, 20, 20, .14);
	color: #141414;
	text-decoration: none !important;
	transition: border-color 180ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section a.wem-pool-card:hover,
.wem-section a.wem-pool-card:focus-visible {
	border-color: #141414;
}

.wem-section a.wem-pool-card:focus-visible {
	outline: 2px solid #0047e0;
	outline-offset: 2px;
}

.wem-section .wem-pool-logo {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #fff;
	border-bottom: 1px solid rgba(20, 20, 20, .14);
}

/*
 * The logo fills the tile and is fitted inside it, whatever the file's own
 * size. Three classes deep so it outranks the img reset in 5g
 * (body.wem-landing .wem-section img), which reverts max-width and height
 * and let each logo print at its file size, off the card's right edge.
 */
.wem-section .wem-pool .wem-pool-logo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	padding: 4%; /* The partner files carry their own margin round the mark. */
	box-sizing: border-box;
	object-fit: contain;
}

/* One card to a row: a shorter tile and a smaller logo. */
@media (max-width: 520px) {
	.wem-section .wem-pool-logo {
		aspect-ratio: 2 / 1;
	}

	.wem-section .wem-pool .wem-pool-logo img {
		padding: 6% 22%;
	}
}

.wem-section .wem-pool-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	padding: clamp(20px, 2.2vw, 28px);
}

.wem-section .wem-pool-name {
	font-family: "Big Shoulders", sans-serif;
	font-size: 24px;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	color: #141414;
	transition: color 180ms cubic-bezier(.2, .7, .2, 1);
}

.wem-section a.wem-pool-card:hover .wem-pool-name,
.wem-section a.wem-pool-card:focus-visible .wem-pool-name {
	color: #0047e0;
}

.wem-section .wem-pool-teaser {
	color: #56524c;
	font-size: 15px;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ *
 * 29. "Who for" over the picture above (wem-audience, "Overlap" on)
 *
 * The heading moves into the blue panel, and the panel is pulled up over
 * the bottom of the film or picture above it, straddling the edge; the
 * cards follow below. The overlap stops well short of the film's centred
 * play button. !important only where the widget's inline style sets the
 * same property.
 * ------------------------------------------------------------------ */

.wem-section.wem-who-overlap {
	position: relative;
	z-index: 2;
	/* Its own formatting context, so the panel's pull does not carry the
	 * section (and its paper) up with it: only the panel overlaps. */
	display: flow-root;
	padding-top: 0 !important;
}

.wem-section.wem-who-overlap .wem-who-panel {
	position: relative;
	max-width: 880px;
	margin-top: calc(-1 * clamp(88px, 13vw, 200px));
	margin-bottom: clamp(40px, 5vw, 64px) !important;
}

/* ------------------------------------------------------------------ *
 * 30. Intro with a small picture on the right (wem-intro, "small-right")
 *
 * With "On phones, picture after paragraph" set, a phone shows the picture
 * between the paragraphs (after that one) instead of under them all, where
 * it would read as unrelated to the words it illustrates.
 * ------------------------------------------------------------------ */

.wem-section .wem-intro-inline {
	display: none;
}

/* A badge saved on a white box (the RUNS badge) shows no box on paper. */
.wem-section .wem-intro-inline,
.wem-section .wem-intro-aside img {
	mix-blend-mode: multiply;
}

@media (max-width: 760px) {
	.wem-section .wem-intro-inline {
		display: block;
	}

	.wem-section .wem-intro-aside.has-inline {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * 31. Words on a photograph
 *
 * The photographs show at full colour: no grey wash over the whole picture,
 * only a soft fade behind the words, set in each widget. The words carry a
 * shadow so they still read on snow and bright sky.
 * ------------------------------------------------------------------ */

.wem-section.wem-on-photo :is(h1, h2, h3, p, blockquote, figcaption),
.wem-section .wem-on-photo :is(h1, h2, h3, p, blockquote, figcaption) {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 16px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------------ *
 * 32. Long text (wem-text): terms, privacy policy, discharge
 *
 * A reading column on paper: headings in Big Shoulders, paragraphs and
 * lists in stone at a comfortable measure, links in brand blue.
 * ------------------------------------------------------------------ */

.wem-section .wem-text-body {
	max-width: 72ch;
	color: #56524c;
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.7;
}

.wem-section .wem-text-body > :first-child {
	margin-top: 0;
}

.wem-section .wem-text-body :is(h1, h2, h3, h4) {
	margin: 2em 0 .6em;
	color: #141414;
	font-family: "Big Shoulders", sans-serif;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

.wem-section .wem-text-body :is(h1, h2) {
	font-size: clamp(26px, 2.4vw, 34px);
}

.wem-section .wem-text-body :is(h3, h4) {
	font-size: clamp(20px, 1.7vw, 24px);
}

.wem-section .wem-text-body p {
	margin: 0 0 1em;
}

.wem-section .wem-text-body :is(ul, ol) {
	margin: 0 0 1.2em;
	padding-left: 1.3em;
}

.wem-section .wem-text-body li {
	margin: 0 0 .4em;
}

.wem-section .wem-text-body strong {
	color: #141414;
}

.wem-section .wem-text-body a {
	color: #0047e0;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wem-section .wem-text-body table {
	width: 100%;
	margin: 0 0 1.4em;
	border-collapse: collapse;
	font-size: .92em;
}

.wem-section .wem-text-body :is(th, td) {
	padding: 10px 12px;
	border: 1px solid rgba(20, 20, 20, .14);
	text-align: left;
	vertical-align: top;
}

/* ------------------------------------------------------------------ *
 * An intro that runs straight into its section ("Below: none"): the
 * section after it starts close under the words, not a full section's
 * breath away (Who are we: Safety Angels, partners, experts, team, board).
 * ------------------------------------------------------------------ */

.e-con:has(.wem-intro-follow) + .e-con .wem-section:first-child,
.elementor-element:has(> .elementor-widget-container > .wem-intro-follow) + .elementor-element .wem-section:first-child {
	padding-top: clamp(20px, 2.5vw, 36px) !important;
}

.e-con:has(.wem-intro-follow) + .e-con .wem-experts-section:first-child {
	padding-top: clamp(40px, 4.5vw, 64px) !important;
}