/*
Theme Name: Futurion
Theme URI: http://wonderfour.se
Author: WONDERFOUR W4 Webbyrå Stockholm
Author URI: http://wonderfour.se/
Text Domain: wonderfour
*/

/*
___  ___          _        _             _    _                 _          ______               
|  \/  |         | |      | |           | |  | |               | |         |  ___|              
| .  . | __ _  __| | ___  | |__  _   _  | |  | | ___  _ __   __| | ___ _ __| |_ ___  _   _ _ __ 
| |\/| |/ _` |/ _` |/ _ \ | '_ \| | | | | |/\| |/ _ \| '_ \ / _` |/ _ \ '__|  _/ _ \| | | | '__|
| |  | | (_| | (_| |  __/ | |_) | |_| | \  /\  / (_) | | | | (_| |  __/ |  | || (_) | |_| | |   
\_|  |_/\__,_|\__,_|\___| |_.__/ \__, |  \/  \/ \___/|_| |_|\__,_|\___|_|  \_| \___/ \__,_|_|   
                                  __/ |                                                         
                                 |___/

*/ 



@font-face {
  font-family: "GT-Walsheim";
  src:
    url("fonts/GT-Walsheim-Regular.woff2") format("woff2"),
    url("fonts/GT-Walsheim-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT-Walsheim";
  src:
    url("fonts/GT-Walsheim-Medium.woff2") format("woff2"),
    url("fonts/GT-Walsheim-Medium.woff") format("woff"); 
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT-Walsheim"; 
  src:
    url("fonts/GT-Walsheim-Bold.woff2") format("woff2"),
    url("fonts/GT-Walsheim-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


* {
  font-variant-ligatures: none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas {
  display: inline-block;
  max-width: 100%;
}
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust:     100%;
  background-color: var(--futurion-purple);
}
body,
button,
input,
textarea {
  border:none;
  color: var(--green-900);
  font-size: 18px;
  line-height: 1.5;
  -webkit-appearance: none;
  border-radius: 0;
}
input[type="radio"]{
    -webkit-appearance: radio;
}

a {
  text-decoration: none;
}
a:focus {
  outline: none;
}
a:hover,
a:active {
  outline: 0;
}
a:active,
a:hover {

}
.posrel {
    position: relative;
}

b,
strong {
  font-weight: 500;
}
cite,
dfn,
em,
i {
  font-style: italic;
}

mark,
ins {
  text-decoration: none;
}
code,
kbd,
tt,
var,
samp,
pre {
  font-family: monospace, serif;
  font-size: 15px;
  -webkit-hyphens: none;
  -moz-hyphens:    none;
  -ms-hyphens:     none;
  hyphens:         none;
  line-height: 1.6;
}
pre {
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  margin-bottom: 24px;
  max-width: 100%;
  overflow: auto;
  padding: 12px;
  #fbfef5-space: pre;
  #fbfef5-space: pre-wrap;
  word-wrap: break-word;
}
blockquote,
q {
  -webkit-hyphens: none;
  -moz-hyphens:    none;
  -ms-hyphens:     none;
  hyphens:         none;
  quotes: none;
}
sup,
sub {
  font-size: 75%;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}
dl {
  margin-bottom: 24px;
}
dt {

}
dd {
  margin-bottom: 24px;
}
ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    margin: 0;
    padding: 0;
}
img {
  -ms-interpolation-mode: bicubic;
  border: 0;
  vertical-align: middle;
}
figure {
  margin: 0;
}
fieldset {
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 0 24px;
  padding: 11px 12px 0;
}
legend {
  #fbfef5-space: normal;
}
button,
input,
select,
textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  font-size: 100%;
  margin: 0;
  max-width: 100%;
  vertical-align: baseline;
}
button,
input {
  line-height: normal;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
input[disabled] {
  cursor: default;
}
input[type="radio"] {
  padding: 0;
}
 input[type="checkbox"]{
  -webkit-appearance: checkbox;
} 
input[type='checkbox']:checked {
  -webkit-appearance: none;
  }
input[type="search"] {
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
  vertical-align: top;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  border-width: 1px 0 0 1px;
  margin-bottom: 24px;
  width: 100%;
}

caption,
th,
td {
  text-align: left;
}

th {
  border-width: 0 1px 1px 0;
}

td {
  border-width: 0 1px 1px 0;
}

del {
  color: #767676;
}

hr {
  background-color: rgba(0, 0, 0, 0.1);
  border: 0;
  height: 1px;
  margin-bottom: 23px;
}

::selection {
  background: #191919;
  color: #fbfef5;
  text-shadow: none;
}

::-moz-selection {
  background: #191919;
  color: #fbfef5;
  text-shadow: none;
}

/* Style for <del> (deleted/strikethrough text) */
del {
    text-decoration: line-through; /* Add a strikethrough */
    color: #999; /* Set a color for the deleted text */
}
input:focus {
  outline: none;
}
/* Remove colored background for Chrome and Safari autofill */
/* input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--green-900);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #fbfef5;
} */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
} 

/* =========================
   Base / Reset-ish
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family:  "GT-Walsheim", system-ui, -apple-system, sans-serif;
  background-color: var(--neutral-200);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'lnum';
-moz-font-feature-settings: 'lnum';
-ms-font-feature-settings: 'lnum';
  margin: 0;
  min-height: 100vh;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

html.menu-theme-open,
body.menu-theme-open {
  background: #006c5c;
}

/* Images behave */
img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Form controls inherit typography */
input, button, textarea, select {
  font: inherit;
}

/* =========================
   Typography defaults
   ========================= */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-2);
  font-weight: 500;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
}

h6 {
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
}



/* Nice default link behavior */
a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 0.12em;
}

.editor-content a {
  border-bottom: 2px solid var(--green-300);
  width: fit-content;
}
.editor-content a:hover {
  border-bottom: 2px solid var(--green-900);
}

/* LIBRARY */
.b-lazy {
  opacity: 0;
  transition-property: opacity;
  transition: .3s ease-in-out !important;
}

.b-lazy.b-loaded {
  opacity: 1
}

.nowrap {
  white-space: nowrap;
}


.futurion_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  min-height: 40px;
  margin-top: 40px;
  padding: 14px 36px 12px;
  border: 2px solid var(--futurion-purple);
  border-radius: 999px;
  color: var(--futurion-purple);
  background: transparent;
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  text-decoration: none;
  box-sizing: border-box;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.futurion_button:hover,
.futurion_button:focus-visible {
  color: var(--futurion-white);
  background: var(--futurion-purple);
}


@media (min-width: 1100px) {
  .futurion_button {
    min-width: 148px;
    min-height: 52px;
    margin-top: 64px;
    padding: 10px 28px;
    font-size: 21px;
  }
}

@media (min-width: 1100px) {

  .futurion_button {
    font-size: 22px;
  }
}

@media (min-width: 1440px) {

  .futurion_button {
    min-width: 150px;
    min-height: 52px;
    font-size: 22px;
  }
}

.underscored {
  text-decoration: underline;
}


.page-wrapper {
  background-color: var(--neutral-200);
}

body.no-page-banner main {
  padding-top: 30px;
}

@media (min-width: 1024px) {
  body.no-page-banner main {
    padding-top: 80px;
  }
}

/**
 * Shared Gutenberg / entry content.
 * Used by regular pages and articles.
 * Mobile first.
 */

.entry-content {
	color: var(--futurion-purple);
	font-size: 15px;
	line-height: 1.2;
	font-weight: 400;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > :last-child {
	margin-bottom: 0;
}

/*
 * Body copy only -- every element-level rule in this block excludes anything
 * carrying a futurion- class.
 *
 * Without that, .entry-content p (0,1,1) outranks .futurion-contact-person__
 * eyebrow (0,1,0) and quietly replaces the component's own 28px margin with
 * 1.3em, and .entry-content h2 does the same to every module heading dropped
 * into page content -- margin, colour and font-size at once. That only started
 * mattering when these modules became blocks: as widgets they rendered outside
 * .entry-content and never met these rules.
 *
 * An attribute substring rather than a list of component classes so it keeps
 * holding for components added later, and rather than :not() with a descendant
 * selector, which is a much newer feature than this codebase needs to rely on.
 * The theme is rigorously BEM-classed, so "has a futurion- class" is a
 * dependable stand-in for "belongs to a component, not to body copy".
 */
.entry-content p:not([class*="futurion-"]) {
	margin: 0 0 1.3em;
}

.entry-content h2:not([class*="futurion-"]),
.entry-content h3:not([class*="futurion-"]),
.entry-content h4:not([class*="futurion-"]),
.entry-content h5:not([class*="futurion-"]),
.entry-content h6:not([class*="futurion-"]) {
	/*
	 * Deliberately asymmetric: a heading belongs to the text under it, so it
	 * sits close to that and far from whatever came before. Matching the two
	 * would leave it floating between two blocks and belonging to neither.
	 *
	 * The top margin used to be 1.15em, which collapsed against the previous
	 * paragraph's 1.3em to about 34px against a 26px paragraph gap -- only
	 * 1.3x, too little to read as a section break. Margins here are em, so
	 * each level scales its own spacing with its own size.
	 */
	margin: 1.5em 0 0.35em;
	color: var(--futurion-purple);
}

.entry-content h2:not([class*="futurion-"]) {
	font-size: 24px;
}

.entry-content h3:not([class*="futurion-"]) {
	font-size: 20px;
}

.entry-content h4:not([class*="futurion-"]) {
	font-size: 17px;
}

.entry-content h5:not([class*="futurion-"]) {
	font-size: 16px;
}

.entry-content h6:not([class*="futurion-"]) {
	font-size: 15px;
}

.entry-content ul:not([class*="futurion-"]),
.entry-content ol:not([class*="futurion-"]) {
	margin: 0 0 1.35em;
	padding-left: 1.25em;
}

.entry-content ul:not([class*="futurion-"]) {
	list-style: disc;
}

.entry-content ol:not([class*="futurion-"]) {
	list-style: decimal;
}

.entry-content ul ul,
.entry-content ol ul {
	list-style: circle;
}

.entry-content li + li {
	margin-top: 0.4em;
}

/*
 * Body-copy links only. Components dropped into page content via shortcode --
 * cards, buttons, the contact block -- style their own links and must not
 * inherit the underline, or every card title in an embedded module comes out
 * looking like a run of inline links.
 */
.entry-content a:not(.futurion-nice-link):not(.futurion-widget-button):not(.futurion-contact-person__contact a):not(.futurion-content-card__link):not(.futurion-content-card__download):not(.futurion-module__eyebrow-link) {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.futurion-shortcode-button {
	margin: 1.6em 0;
}

.entry-content blockquote {
	margin: 1.75em 0;
	padding-left: 18px;
	border-left: 2px solid var(--futurion-blue);
	font-size: 1.2em;
	line-height: 1.18;
}

/*
 * Quote attribution.
 *
 * The Quote block's citation field is where a signature belongs, so it stays
 * inside the blockquote rather than trailing after it as a loose paragraph.
 * Two things need overriding: the global rule italicises every <cite>, and a
 * signature is a person rather than a work title, so it is set upright; and
 * the blockquote is enlarged, so the citation is brought back to body size.
 */
.entry-content blockquote cite {
	display: block;
	margin-top: 0.9em;
	font-size: 0.83em;
	font-style: normal;
	line-height: 1.35;
}

.entry-content img {
	max-width: 100%;
	height: auto;
}

/*
 * Backstop for every iframe in imported content, not only the ones the
 * responsive-embed wrapper below reaches. WordPress's own self-embeds (a
 * bare link to another futurion.se post, auto-embedded as a hidden
 * wp-embedded-content iframe) carry a fixed width in their own inline style
 * and are not wrapped by that PHP filter, since their height is meant to
 * be resized live by wp-embed.min.js rather than fixed to one ratio. This
 * just stops any iframe -- wrapped, unwrapped, current or future -- from
 * pushing the page wider than the viewport.
 */
.entry-content iframe {
	max-width: 100%;
}

/*
 * Responsive wrapper for fixed-size classic-content embeds (YouTube, Facebook,
 * Anchor.fm), applied server-side by futurion_responsive_classic_embeds() in
 * functions.php. --futurion-embed-ratio is that iframe's own height/width,
 * calculated once at render time; the padding-top percentage trick is used
 * rather than CSS aspect-ratio because Chrome does not reliably derive an
 * iframe's intrinsic ratio from its width/height HTML attributes the way it
 * does for <img> -- confirmed directly, a plain `height: auto` fell back to
 * the ~150px default iframe height instead of scaling with the column.
 */
.entry-content .futurion-responsive-embed {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: var(--futurion-embed-ratio, 56.25%);
	margin: 1.5em 0;
	overflow: hidden;
}

.entry-content .futurion-responsive-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.entry-content .wp-block-image,
.entry-content .wp-caption {
	max-width: 100%;
	margin: 0 0 1.75em;
}

.entry-content .wp-block-image img,
.entry-content .wp-caption img {
	display: block;
	border-radius: 5px;
}

.entry-content .wp-block-image figcaption,
.entry-content .wp-caption .wp-caption-text {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	max-width: 85%;
	margin: -24px 14px 0 14px;
	padding: 14px 18px;
	border-left: 3px solid var(--futurion-blue);
	border-radius: 2px;
	background: var(--futurion-white);
	box-shadow: 0 10px 26px rgba(66, 44, 110, 0.14);
	color: var(--futurion-purple);
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
}

/*
 * On themes without theme.json, WP core (wp_restore_image_outer_container)
 * splits aligned image blocks so the align class lands on the inner
 * <figure>, not combined with .wp-block-image on the same element:
 *   <div class="wp-block-image"><figure class="alignright ...">
 * so alignment overrides must target the figure/caption class directly
 * rather than a compound `.wp-block-image.alignright` selector.
 */
.entry-content figure.aligncenter figcaption,
.entry-content .wp-caption.aligncenter .wp-caption-text {
	margin-left: auto;
	margin-right: auto;
}

.entry-content figure.alignright figcaption,
.entry-content .wp-caption.alignright .wp-caption-text {
	margin-left: auto;
}

/*
 * Same split as above, with a consequence for floated images: core puts the
 * align class on the inner <figure>, so the float happens inside a full-width
 * block wrapper and body copy never wraps alongside it. Collapsing the wrapper
 * hands the figure straight to the surrounding text flow. The wrapper's own
 * bottom margin goes with it, so the float carries its spacing itself.
 */
.entry-content .wp-block-image:has(> figure.alignright),
.entry-content .wp-block-image:has(> figure.alignleft) {
	display: contents;
}

/*
 * Alignment has to be caught on three different elements, because the imported
 * archive predates the block editor. A block image carries it on the <figure>;
 * a classic-editor image carries it on the <img> itself; and the [caption]
 * shortcode carries it on a .wp-caption wrapper with an inline pixel width.
 * All three mean the same thing to a reader, so they get the same treatment.
 */
.entry-content figure.alignright,
.entry-content img.alignright,
.entry-content .wp-caption.alignright {
	float: right;
	margin: 0.35em 0 1.5em 28px;
}

.entry-content figure.alignleft,
.entry-content img.alignleft,
.entry-content .wp-caption.alignleft {
	float: left;
	margin: 0.35em 28px 1.5em 0;
}

.entry-content figure.aligncenter,
.entry-content img.aligncenter,
.entry-content .wp-caption.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

/* The shortcode writes its width inline, which has to yield on small screens. */
.entry-content .wp-caption {
	max-width: 100%;
}

/*
 * The caption style further up is an overlay designed for a full-width figure:
 * it pulls up over the image on a white card. At the width of a float that has
 * nowhere to sit, so a floated caption falls back to plain text underneath.
 */
.entry-content .wp-caption.alignright .wp-caption-text,
.entry-content .wp-caption.alignleft .wp-caption-text,
.entry-content figure.alignright figcaption,
.entry-content figure.alignleft figcaption {
	max-width: none;
	margin: 10px 0 0;
	padding: 0;
	border-left: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 13px;
}

/*
 * Floats are set at a fixed pixel width, inline or in the block attributes. On
 * a narrow column that leaves an unreadable ribbon of text beside them, so
 * below the tablet breakpoint the float is dropped and the image stands alone.
 */
@media (max-width: 767px) {
	.entry-content figure.alignright,
	.entry-content figure.alignleft,
	.entry-content img.alignright,
	.entry-content img.alignleft,
	.entry-content .wp-caption.alignright,
	.entry-content .wp-caption.alignleft {
		float: none;
		margin: 0 0 1.5em;
	}
}

/*
 * A cover can be taller than the copy beside it, so the next section's rule or
 * heading would otherwise ride up alongside the float. These start a new band.
 */
.entry-content .wp-block-separator,
.entry-content hr,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	clear: both;
}

@media (min-width: 768px) {
	.entry-content .wp-block-image figcaption,
	.entry-content .wp-caption .wp-caption-text {
		max-width: 70%;
		margin-top: -32px;
		padding: 16px 22px;
		font-size: 15px;
	}
}

@media (min-width: 768px) {
	.entry-content {
		font-size: 18px;
	}

	.entry-content h2:not([class*="futurion-"]) {
		font-size: 27px;
	}

	.entry-content h3:not([class*="futurion-"]) {
		font-size: 26px;
	}

	.entry-content h4:not([class*="futurion-"]) {
		font-size: 25px;
	}

	.entry-content h5:not([class*="futurion-"]) {
		font-size: 24px;
	}

	.entry-content h6:not([class*="futurion-"]) {
		font-size: 23px;
	}
}

@media (min-width: 1024px) {
	.entry-content {
		font-size: 21px;
	}

	.entry-content h2:not([class*="futurion-"]) {
		font-size: 30px;
	}

	.entry-content h3:not([class*="futurion-"]) {
		font-size: 29px;
	}

	.entry-content h4:not([class*="futurion-"]) {
		font-size: 28px;
	}

	.entry-content h5:not([class*="futurion-"]) {
		font-size: 27px;
	}

	.entry-content h6:not([class*="futurion-"]) {
		font-size: 26px;
	}
}

/*
 * Sized against the measure rather than the viewport. Up to 1100 the copy has
 * the full 890px column and the sizes above are right for it. At 1100 the page
 * switches to two columns and the column drops to 578px — narrower than the
 * 688px it gets at 768 — then climbs back to 890px by 1500. Holding 21px across
 * that put only ~61 characters on a line, which is what made a laptop read
 * cramped and shouty; this tracks the column instead, keeping line length in the
 * high 60s to mid 80s all the way up.
 *
 * The step down at 1100 is the point, not an artefact to smooth away: the
 * container genuinely narrows there, so the type does too. Nothing at 1500 and
 * above changed.
 */
@media (min-width: 1100px) {
	.entry-content {
		font-size: clamp(17px, calc(17px + (100vw - 1100px) * 0.01), 21px);
	}

	.entry-content h2:not([class*="futurion-"]) {
		font-size: clamp(25px, calc(25px + (100vw - 1100px) * 0.0125), 30px);
	}

	.entry-content h3:not([class*="futurion-"]) {
		font-size: clamp(24px, calc(24px + (100vw - 1100px) * 0.0125), 29px);
	}

	.entry-content h4:not([class*="futurion-"]) {
		font-size: clamp(23px, calc(23px + (100vw - 1100px) * 0.0125), 28px);
	}

	.entry-content h5:not([class*="futurion-"]) {
		font-size: clamp(22px, calc(22px + (100vw - 1100px) * 0.0125), 27px);
	}

	.entry-content h6:not([class*="futurion-"]) {
		font-size: clamp(21px, calc(21px + (100vw - 1100px) * 0.0125), 26px);
	}

}


/**** HEADER ****/

/*
 * WP toolbar offset. Everything the theme pins to the viewport -- the
 * header, the menu overlay and its orbs, the desktop search panel -- reads
 * this one value instead of restating a toolbar height, so the logged-out
 * case (0px) and both toolbar heights are handled in a single place.
 *
 * WP publishes --wp-admin--admin-bar--height on <html> itself (32px, and
 * 46px below 783px) and only ships that stylesheet when the toolbar is
 * really rendered, so following it keeps the theme off WP's breakpoints.
 */
:root {
  --futurion-admin-bar-height: 0px;
}

body.admin-bar {
  --futurion-admin-bar-height: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * Below 600px WP drops the toolbar to position: absolute, so it scrolls
 * off with the page rather than staying put. A fixed offset here is what
 * left the scrolled mobile header with an empty white band where the
 * toolbar used to be; script.js measures how much of the toolbar is still
 * on screen and writes it to --futurion-admin-bar-visible, so the header
 * closes the gap as the toolbar leaves and sits flush once it is gone.
 */
@media (max-width: 600px) {
  body.admin-bar {
    --futurion-admin-bar-height: var(--futurion-admin-bar-visible, 46px);
  }
}

:root {
  --futurion-purple: #422C6E;
  --futurion-white: #fffefa;
  --futurion-orange: #ff461d;
  /*
   * Restored alongside orange after the full green->orange swap turned out
   * too broad: the brand asked for orange only on hover/focus effects (the
   * swipe-underline pattern, and the handful of literal :hover/:focus-visible
   * state changes). Every static, always-visible use -- the newsletter
   * panel's branding and the focus-card "green" colour option -- reverts to
   * this. See the individual declarations below for which is which.
   */
  --futurion-green: #b7ff73;
  --futurion-purple-dark: #4b3676;
  --futurion-yellow: #f9e2ac;
  --futurion-blue: #5e72ed;
  --futurion-pink: #f2c3d3;
  --futurion-grey: #f0e8d7;
  --futurion-cream: #fff8e7;

  /*
   * Feedback colours. The palette above is brand colour: orange and yellow
   * carry form status against the purple panel but have no contrast on cream,
   * so success and error get their own values for light grounds.
   */
  --futurion-success: #1f6b4f;
  --futurion-error: #8a3a2f;

  --grid-gutter: 20px;
  --header-height: 86px;

  --mobile-header-top: 18px;
  --mobile-menu-button-width: 56px;
  --mobile-menu-button-height: 37px;

  /*
   * Height of the decorative orb layer, shared by the hero and the menu
   * overlay so the two render identically and the orbs don't shift when
   * the menu opens. Sized to the viewport, not to the hero.
   */
  --futurion-orb-height: 100vh;

  /*
   * futurion-header.svg has no empty space: its flat-topped letters start
   * 6.8 units into the 1662.83-wide viewBox, and only the round O
   * overshoots to y=0. Pulling up by that 6.8/1662.83 slice sits the flat
   * tops flush against the viewport top; the O's apex is clipped as a
   * deliberate trade. Percentage margins resolve against the containing
   * block's *width* — which is the wordmark's own width — so this stays
   * exact at every viewport size.
   */
  --futurion-wordmark-top-trim: -0.409%;

  /*
   * The round letters' bottoms land exactly on the viewBox edge, so a
   * fractional `height: auto` lets the browser round the SVG viewport
   * down and shave the last antialiased row. The viewBox carries 6 units
   * of empty padding below the artwork (293.6 -> 299.6) to keep the curve
   * off that edge; this pulls the same 6/1662.83 back out of the layout so
   * nothing below the wordmark moves. Width-relative, like the top trim.
   */
  --futurion-wordmark-bottom-trim: -0.361%;

  /*
   * Active-page bullet in the overlay menu; gutter = bullet + its gap.
   * Must stay <= --grid-gutter so the pull-left/widen trick below never
   * drags the bullet past the viewport edge; widened again at 600px+
   * once the grid gutter itself grows past this value.
   */
  --futurion-menu-bullet-size: 10px;
  --futurion-menu-bullet-gutter: 18px;

  --max-width: 1650px;
}

/* Reusable horizontal page grid */
.site-grid {
  width: 100%;
  max-width: 100%;
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/*
 * Lock the page behind the overlay. The class goes on <html> as well as
 * <body> because whichever element ends up as the scrolling box has to be
 * the one that's locked, and overscroll-behavior stops a scroll that
 * reaches the end of the overlay from chaining through to the page.
 */
html.menu-is-open,
body.menu-is-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Mobile closed header: visually only the hamburger, but aligned to the global grid */
.site-header {
  position: fixed;
  top: var(--futurion-admin-bar-height, 0px);
  right: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  background: transparent;
  pointer-events: none;
  -webkit-transform: translate3d(0, -120%, 0);
  transform: translate3d(0, -120%, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.site-header.is-visible {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: futurion-header-slide-down 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation: futurion-header-slide-down 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.site-header.is-instantly-visible {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes futurion-header-slide-down {
  from {
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes futurion-header-slide-down {
  from {
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: calc(var(--mobile-header-top) + var(--mobile-menu-button-height));
  padding-top: var(--mobile-header-top);
  padding-bottom: 18px;
}

.site-header__logo,
.site-header__desktop-nav,
.site-header__languages,
.site-header__search-button {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.site-header__menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mobile-menu-button-width);
  height: var(--mobile-menu-button-height);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--futurion-purple);
  color: var(--futurion-white);
  font: inherit;
  cursor: pointer;
}

/*
 * On mobile the label -- and with it the orange underline that marks focus
 * on desktop -- is hidden, so this button would be left with no focus
 * indicator at all. Give it the theme's own ring instead of the browser's.
 */
.site-header__menu-button:focus-visible {
  outline: 2px solid var(--futurion-purple);
  outline-offset: 3px;
}

.site-header__menu-label {
  display: none;
}

.site-header__burger {
  position: relative;
  display: block;
  width: 28px;
  height: 9px;
}

.site-header__burger span {
  position: absolute;
  right: 0;
  width: 28px;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.25s ease, top 0.25s ease;
}

.site-header__burger span:first-child {
  top: 0;
}

.site-header__burger span:last-child {
  top: 100%;
}

/*
 * Mobile scrolled state. Closed and at the top of the page the bar is just
 * the burger floating over the hero; as soon as the page moves it picks up
 * the desktop bar's background and logo, so the header reads as a solid
 * strip over the content it now overlaps. Everything else -- links,
 * language switcher, search -- stays inside the overlay on mobile.
 */
@media (max-width: 1023px) {
  .site-header {
    transition: background-color 0.25s ease;
  }

  .site-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /*
     * Only once it has a background of its own: until then the bar is
     * invisible and must not swallow taps meant for the hero behind it.
     */
    pointer-events: auto;
  }

  .site-header__inner {
    justify-content: space-between;
  }

  /*
   * Laid out at all times rather than toggled from display:none, so the
   * logo can fade in and so its arrival never reflows the burger.
   */
  .site-header__logo {
    display: inline-flex;
    align-self: center;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translate3d(0, -6px, 0);
    transform: translate3d(0, -6px, 0);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .site-header.is-scrolled .site-header__logo {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__logo {
    transition: none;
  }
}

/* Overlay */
.site-menu-overlay {
  position: fixed;
  top: var(--futurion-admin-bar-height, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  max-width: 100vw;
  background: #422c70;
  color: var(--futurion-white);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.site-menu-overlay.is-open {
  visibility: visible;
  opacity: 1;
}

/*
 * Decorative echo of the front-page hero: the same wordmark and ball
 * image behind the menu, so opening it reads as the hero staying put
 * rather than a separate screen. The wordmark keeps the hero's width
 * and top edge; the ball image is free to fill the whole overlay
 * instead of stopping at the hero's bottom edge.
 */
/*
 * Fixed, not absolute: the overlay is its own scroll container, and an
 * absolutely positioned child there is sized to the viewport but anchored
 * to the top of the *scrollable content* — so on short, wide screens where
 * the menu scrolls, it would slide up and leave bare purple below it.
 * Pinning to the viewport keeps the orbs still while the menu scrolls, and
 * keeps the top edge aligned with the hero's copy. No ancestor sets
 * transform/filter/will-change, so this does resolve against the viewport.
 */
.site-menu-overlay__decor {
  position: fixed;
  top: var(--futurion-admin-bar-height, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/*
 * Box geometry here MUST stay identical to .futurion-hero__background::after
 * (same top edge, same width, same --futurion-orb-height, same cover /
 * center-bottom) — that is what keeps the orbs from visibly jumping when
 * the menu opens over the hero. The hero simply clips its copy short.
 * hero-bollar-3.webp is pure white with only its alpha varying, so opacity
 * alone tints it toward a light purple against the overlay's background.
 */
.site-menu-overlay__decor-image {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--futurion-orb-height);
  background-image: url("assets/images/backgrounds/hero-bollar-3.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  opacity: 0.1;
}

/*
 * The overlay takes focus itself when it opens (see openMenu). It is a
 * scroll container, not a control, so it gets no focus ring -- the
 * controls inside keep their own indicators.
 */
.site-menu-overlay:focus,
.site-menu-overlay:focus-visible {
  outline: none;
}

.site-menu-overlay__decor-wordmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  line-height: 0;
}

.site-menu-overlay__decor-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--futurion-wordmark-top-trim);
  margin-bottom: var(--futurion-wordmark-bottom-trim);
}

/* A faint light-purple lift off the background, not a bright white. */
.site-menu-overlay__decor-wordmark .cls-1,
.site-menu-overlay__decor-wordmark path {
  fill: rgba(255, 255, 255, 0.06);
}

.site-menu-overlay__inner {
  position: relative;
  min-height: 100%;
  max-width: 100vw;
  padding-top: 0;
  padding-bottom: 28px;
  overflow-x: hidden;
}

.site-menu-overlay__top,
.site-menu-overlay__search,
.site-menu-overlay__content {
  position: relative;
  z-index: 1;
}

.site-menu-overlay__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: calc(var(--mobile-header-top) + var(--mobile-menu-button-height));
  padding-top: var(--mobile-header-top);
  margin-bottom: 36px;
}

/* SVG logo */
.site-header__logo,
.site-menu-overlay__logo {
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.site-header__logo {
  color: var(--futurion-purple);
}

.site-menu-overlay__logo {
  display: inline-flex;
  color: var(--futurion-white);
  margin-top: 3px;
}

.futurion-logo-svg {
  display: block;
  width: 156px;
  height: auto;
  color: inherit;
}

.site-menu-overlay__top-actions {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 14px;
}

.site-menu-overlay__languages {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}

.site-menu-overlay__language {
  position: relative;
  color: rgba(255, 255, 255, 0.65);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

.site-menu-overlay__language.is-active {
  color: var(--futurion-white);
}

/* Underline: solid for the active item, revealed on hover for any item (orange, text color never changes). */
.site-menu-overlay__language::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background: var(--futurion-blue);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.site-menu-overlay__language.is-active::after {
  opacity: 1;
}

.site-header__language:hover::after,
.site-menu-overlay__language:hover::after {
  opacity: 1;
  background: var(--futurion-orange);
}

.site-menu-overlay__search-icon {
  display: none;
}

.site-menu-overlay__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--mobile-menu-button-width);
  height: var(--mobile-menu-button-height);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--futurion-white);
  font: inherit;
  font-size: 0;
  cursor: pointer;
}

.site-menu-overlay__close span {
  display: none;
}

.site-menu-overlay__close i {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
}

.site-menu-overlay__close i::before,
.site-menu-overlay__close i::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  width: 28px;
  height: 1px;
  background: currentColor;
}

.site-menu-overlay__close i::before {
  transform: rotate(45deg);
}

.site-menu-overlay__close i::after {
  transform: rotate(-45deg);
}

.site-menu-overlay__search {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin-bottom: 38px;
  border: 4px solid transparent;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.52);
  box-sizing: border-box;
}

.site-menu-overlay__search input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--futurion-purple);
  font-size: 18px;
  outline: none;
  box-sizing: border-box;
}

.site-menu-overlay__search input::placeholder {
  color: rgba(63, 42, 115, 0.8);
}

.site-menu-overlay__search button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  width: 52px;
  border-radius: 5px;
  border: 0;
  background: var(--futurion-purple);
  color: var(--futurion-white);
  cursor: pointer;
}

.site-menu-overlay__search-icon span,
.site-header__search-button span {
  display: block;
  width: 25px;
  height: 25px;
  background-color: currentColor;
  -webkit-mask: url("assets/images/svgs/search.svg") center / contain no-repeat;
  mask: url("assets/images/svgs/search.svg") center / contain no-repeat;
}

/* Search form submit icon: matches the desktop search panel's inline-SVG styling. */
.site-menu-overlay__search button span {
  width: 18px;
  height: 18px;
}

.site-menu-overlay__search button span svg * {
  fill: var(--futurion-white);
}

.site-menu-overlay__primary-menu,
.site-menu-overlay__secondary-menu {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu-overlay__primary-menu {
  margin-bottom: 38px;
}

.site-menu-overlay__primary-menu a,
.site-menu-overlay__secondary-menu a {
  color: var(--futurion-white);
  text-decoration: none;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

/*
 * The active-page bullet hangs in a gutter that every item reserves, so
 * the labels stay aligned with each other instead of the active one being
 * pushed right. Both lists are pulled left and widened by the same gutter
 * (below), which cancels this padding out for the label and pushes the
 * bullet out into the page margin, level with the grid edge above and
 * below it.
 */
.site-menu-overlay__primary-menu a,
.site-menu-overlay__secondary-menu a {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-left: var(--futurion-menu-bullet-gutter);
}

.site-menu-overlay__primary-menu a {
  font-size: 33px;
  font-weight: 400;
}

.site-menu-overlay__secondary-menu a {
  font-size: 23px;
}

/*
 * Pulling the lists left and widening them by the bullet gutter cancels the
 * padding-left above for the label, so the label lands back on the grid
 * edge while the bullet sits in the reserved gutter to its left. This only
 * holds as long as --futurion-menu-bullet-gutter <= --grid-gutter, which is
 * why the gutter var is kept small on mobile and widened in step with
 * --grid-gutter at larger breakpoints.
 */
.site-menu-overlay__primary-menu,
.site-menu-overlay__secondary-menu {
  width: calc(100% + var(--futurion-menu-bullet-gutter));
  max-width: none;
  margin-left: calc(-1 * var(--futurion-menu-bullet-gutter));
}

/*
 * The bullet marks the current item and any section containing it, so the
 * overlay reads as a trail -- "Studio & samtal" and "Samtal" both dotted --
 * rather than losing its marker the moment you go one level in.
 */
.site-menu-overlay__primary-menu .current-menu-item > a::before,
.site-menu-overlay__primary-menu .current_page_item > a::before,
.site-menu-overlay__primary-menu .current-menu-ancestor > a::before,
.site-menu-overlay__secondary-menu .current-menu-item > a::before,
.site-menu-overlay__secondary-menu .current_page_item > a::before,
.site-menu-overlay__secondary-menu .current-menu-ancestor > a::before {
  content: "";
  position: absolute;
  left: 0.05em;
  /*
   * Half of the 1.2 line-height puts this on the centre of the first line,
   * so it stays put if a long label wraps.
   */
  top: 0.6em;
  width: var(--futurion-menu-bullet-size);
  height: var(--futurion-menu-bullet-size);
  border-radius: 50%;
  background: var(--futurion-blue);
  transform: translateY(-50%);
}

/*
 * Extended menu sub-items.
 *
 * The parent stays a link to its own page and the disclosure is a separate
 * button beside it, so opening a branch never costs the reader that page. The
 * list is collapsed with a grid-rows animation rather than max-height, so it
 * takes exactly the height of its contents at any length and needs no magic
 * number to be kept in step with the item count.
 */
.site-menu-overlay__primary-menu .menu-item-has-children > a {
  padding-right: 44px;
}

.futurion-menu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.futurion-menu-toggle span {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
}

/* A plus that loses its upright stroke when the branch opens, leaving a minus. */
.futurion-menu-toggle span::before,
.futurion-menu-toggle span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: var(--futurion-white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.futurion-menu-toggle span::after {
  transform: rotate(90deg);
}

.futurion-menu-toggle[aria-expanded="true"] span::after {
  opacity: 0;
  transform: rotate(0deg);
}

/*
 * The item is the positioning context for the button, and the label needs the
 * same bullet gutter the top level already reserves.
 */
.site-menu-overlay__primary-menu .menu-item-has-children {
  position: relative;
}

.site-menu-overlay__primary-menu .sub-menu {
  display: grid;
  /*
   * grid-template-rows alone only sizes the first row — every item after it
   * falls into an implicit row and keeps its natural height, so a two-item
   * branch stayed 50px tall when closed. grid-auto-rows collapses the rest.
   * Open, 1fr resolves to each row's own content height, because the list has
   * no fixed height for the rows to share out.
   */
  grid-template-rows: 0fr;
  grid-auto-rows: 0fr;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: grid-template-rows 0.3s ease, grid-auto-rows 0.3s ease;
}

.site-menu-overlay__primary-menu .sub-menu > li {
  min-height: 0;
  overflow: hidden;
}

.site-menu-overlay__primary-menu .menu-item-has-children.is-open > .sub-menu {
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
}

/*
 * Indented past the bullet gutter the top level reserves, so the hierarchy
 * reads from position as well as size. A current sub-item's bullet moves with
 * the label, since it is drawn from the link's own left edge.
 */
.site-menu-overlay__primary-menu .sub-menu a {
  display: inline-block;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: calc(var(--futurion-menu-bullet-gutter) + 20px);
  font-size: 20px;
  font-weight: 400;
  opacity: 0.82;
}

.site-menu-overlay__primary-menu .sub-menu > li:first-child a {
  padding-top: 12px;
}

.site-menu-overlay__primary-menu .sub-menu > li:last-child a {
  padding-bottom: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .site-menu-overlay__primary-menu .sub-menu {
    transition: none;
  }
}

.site-menu-overlay__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  width: 100%;
  max-width: 100%;
  margin-top: 82px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  line-height: 1.4;
}

.site-menu-overlay__footer p {
  margin: 0 0 34px;
}

/* Same orange underline treatment as .site-footer__column a / .site-footer__social a. */
.site-menu-overlay__footer a {
  position: relative;
  z-index: 0;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.site-menu-overlay__footer a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 3px;
  background: var(--futurion-orange);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.site-menu-overlay__footer a:hover::after,
.site-menu-overlay__footer a:focus-visible::after {
  opacity: 1;
}

.site-menu-overlay__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Mirrors .site-footer__social-list — both render the socials_menu location. */
.site-menu-overlay__social-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu-overlay__social-list li {
  margin: 0;
}

/* Screen reader helper */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/** DESKTOP SEARCH PANEL **/

body.search-is-open {
	overflow: hidden;
}

.site-search-panel {
	display: none;
}

/** DESKTOP HEADER COLOUR OVERRIDES **/

@media (min-width: 1024px) {

	/* Desktop header default colours; the overlay equivalents default to white via their own base rules. */
	.site-header .site-header__desktop-nav a,
	.site-header .site-header__search-button,
	.site-header .site-header__menu-button .site-header__menu-label {
		color: var(--futurion-purple);
	}

	.site-header .site-header__desktop-nav a,
	.site-header .site-header__search-button,
	.site-header .site-header__menu-button .site-header__menu-label,
	.site-menu-overlay__primary-menu a,
	.site-menu-overlay__secondary-menu a,
	.site-menu-overlay__search-icon,
	.site-menu-overlay__close {
		position: relative;
		z-index: 0;
	}

	.site-header .site-header__desktop-nav a::after,
	.site-header .site-header__search-button::after,
	.site-header .site-header__menu-button .site-header__menu-label::after,
	.site-menu-overlay__primary-menu a::after,
	.site-menu-overlay__secondary-menu a::after,
	.site-menu-overlay__search-icon::after,
	.site-menu-overlay__close::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 1px;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 4px;
		background: var(--futurion-orange);
		opacity: 0;
		transition: opacity 0.2s ease;
		pointer-events: none;
	}

	/*
	 * Both lists reserve a left gutter for the active-page bullet, so the
	 * underline has to start after that gutter — otherwise the bar runs
	 * under the bullet instead of underlining just the word. `right` is
	 * already 0 above, so clearing the shared width lets the bar span
	 * exactly the text.
	 */
	.site-menu-overlay__primary-menu a::after,
	.site-menu-overlay__secondary-menu a::after {
		left: var(--futurion-menu-bullet-gutter);
		width: auto;
	}

	/*
	 * The extended menu adds two more pockets of padding the bar has to keep
	 * out of. A parent reserves 44px on the right for its disclosure button, so
	 * the bar ran on past the label towards the toggle; a sub-item is indented
	 * a further 20px and sits on 6px of padding beneath the text, so its bar
	 * started before the word and hung too low under it.
	 */
	.site-menu-overlay__primary-menu .menu-item-has-children > a::after {
		right: 44px;
	}

	.site-menu-overlay__primary-menu .sub-menu a::after {
		bottom: 7px;
		left: calc(var(--futurion-menu-bullet-gutter) + 20px);
	}

  	.site-header .site-header__search-button::after,
	.site-menu-overlay__search-icon::after {
		bottom: -6px;
	}

	/* Desktop menu button */
	.site-header .site-header__menu-button {
		background-color: transparent;
	}

	/* Language underline: purple in the header, white inside the overlay; solid for the active item, revealed on hover for any item. */
	.site-header__language::after,
	.site-menu-overlay__language::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: -5px;
		left: 0;
		width: 100%;
		height: 2px;
		background: var(--futurion-purple);
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.site-menu-overlay__language::after {
		background: var(--futurion-white);
	}

	.site-header__language.is-active::after,
	.site-menu-overlay__language.is-active::after {
		opacity: 1;
	}

	/* Keyboard focus and hover reveal the same orange underline. */
	.site-header .site-header__desktop-nav a:focus-visible::after,
	.site-header .site-header__desktop-nav a:hover::after,
	.site-header .site-header__search-button:hover::after,
	.site-header .site-header__menu-button:hover .site-header__menu-label::after,
	.site-menu-overlay__primary-menu a:focus-visible::after,
	.site-menu-overlay__primary-menu a:hover::after,
	.site-menu-overlay__secondary-menu a:focus-visible::after,
	.site-menu-overlay__secondary-menu a:hover::after,
	.site-menu-overlay__search-icon:focus-visible::after,
	.site-menu-overlay__search-icon:hover::after,
	.site-menu-overlay__close:focus-visible::after,
	.site-menu-overlay__close:hover::after {
		opacity: 1;
	}

	/*
	 * Drop the browser's own focus ring on the controls above -- but
	 * only here, at the width where the orange underline they reveal on
	 * :focus-visible is actually rendered. That underline IS the focus
	 * indicator, so keyboard users still see focus (WCAG 2.4.7 holds);
	 * the UA ring was a second, unstyled indicator drawn on top of a
	 * designed one. :focus is suppressed alongside :focus-visible
	 * because Safari also rings these buttons on plain mouse click.
	 *
	 * Anything WITHOUT that underline keeps a ring -- see the burger
	 * button's own rule in the mobile styles.
	 */
	.site-header .site-header__desktop-nav a:focus,
	.site-header .site-header__desktop-nav a:focus-visible,
	.site-header .site-header__search-button:focus,
	.site-header .site-header__menu-button:focus,
	.site-menu-overlay__primary-menu a:focus,
	.site-menu-overlay__primary-menu a:focus-visible,
	.site-menu-overlay__secondary-menu a:focus,
	.site-menu-overlay__secondary-menu a:focus-visible,
	.site-menu-overlay__search-icon:focus,
	.site-menu-overlay__search-icon:focus-visible,
	.site-menu-overlay__close:focus,
	.site-menu-overlay__close:focus-visible {
		outline: none;
	}

	/*
	 * Keyboard-only, and in the theme's purple rather than the browser's
	 * blue. A mouse click never matches :focus-visible on a button, so
	 * clicking these shows nothing at all -- no ring, and no underline
	 * pretending to be a hover.
	 */
	.site-header .site-header__search-button:focus-visible,
	.site-header .site-header__menu-button:focus-visible {
		outline: 2px solid var(--futurion-purple);
		outline-offset: 4px;
		border-radius: 2px;
	}
}

@media (min-width: 1024px) {
	.site-search-panel {
		position: fixed;
		top: calc(var(--header-height) + var(--futurion-admin-bar-height, 0px));
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1100;
		display: block;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition:
			opacity 180ms ease,
			visibility 180ms ease;
	}

	.site-search-panel.is-open {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

	.site-search-panel__inner {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		height: 100%;
		padding-top: clamp(150px, 31vh, 280px);
	}

	.site-search-panel__form {
		display: flex;
		width: min(100%, 520px);
		border: 5px solid rgba(255, 255, 255, 0.78);
		border-radius: 5px;
		background: rgba(255, 255, 255, 0.94);
		box-sizing: border-box;
		box-shadow: 0 4px 24px rgba(63, 42, 115, 0.08);
	}

	.site-search-panel__form input {
		flex: 1;
		width: 100%;
		min-width: 0;
		height: 56px;
		padding: 5px 27px 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--futurion-purple);
		font: inherit;
		font-size: 20px;
		outline: none;
		box-sizing: border-box;
	}

	.site-search-panel__form input::placeholder {
		color: rgba(63, 42, 115, 0.78);
		opacity: 1;
	}

	.site-search-panel__form input::-webkit-search-cancel-button {
		appearance: none;
	}

	.site-search-panel__form button {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 65px;
		width: 65px;
		padding: 0;
		border: 0;
		border-radius: 5px;
		background: var(--futurion-purple);
		color: var(--futurion-white);
		cursor: pointer;
	}

	.site-search-panel__form button span {
		width: 18px;
		height: 18px;	
	}
	.site-search-panel__form button span svg *{
		fill: var(--futurion-white);
	}

	.site-search-panel__form button:hover,
	.site-search-panel__form button:focus-visible {
		background: var(--futurion-purple-dark);
	}

	/*
	 * No focus ring on the field itself. :focus-visible always matches a
	 * text input -- however it was focused -- so this drew a blue box
	 * every time the panel opened and JS moved focus here, which read as
	 * a browser artifact rather than a designed state. The blinking
	 * caret in an already-open search panel is the focus affordance.
	 */
}

/* Small tablet */
@media (min-width: 600px) {
  :root {
    --grid-gutter: 28px;
    /* Grid gutter is wider from here up, so the bullet gutter can grow too. */
    --futurion-menu-bullet-gutter: 26px;
  }
}

/* Tablet */
@media (min-width: 768px) {
  :root {
    --grid-gutter: 40px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --grid-gutter: 48px;
    --header-height: 65px;

    /* 16px at 1024 -> 20px at 1800; see the note above .site-header__menu. */
    --header-type-size: clamp(16px, 10.72px + 0.516vw, 20px);
    /*
     * The search glyph, a step larger than the type, on the same ramp. Its
     * button box stays deliberately smaller than the glyph it holds -- the
     * mask overflows the box on purpose so the icon optically matches the
     * cap height of the labels beside it rather than their line box.
     */
    --header-icon-size: clamp(17px, 11.72px + 0.516vw, 21px);
    --header-icon-box: clamp(13px, 7.72px + 0.516vw, 17px);
    /* Reserves the widest of "Meny"/"Menu"/"Stäng" at the size above. */
    --header-label-min-width: clamp(42px, 27.49px + 1.418vw, 53px);
  }

  .site-header {
    right: auto;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    pointer-events: auto;
    transition: background-color 0.25s ease;
  }

  /* Hovering the bar lets a little more of the page show through it. */
  .site-header:hover {
    background-color: rgba(255, 255, 255, 0.78);
  }

  .site-header__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    /*
     * A floor on the space between logo, nav and actions. Doing this with a
     * margin on the nav would override its margin-left:auto and stop it being
     * pushed right at all.
     */
    column-gap: 24px;
    min-height: var(--header-height);
    padding-top: 0;
  }

  .site-header__logo {
    display: inline-flex;
  }

  .site-header__desktop-nav {
    display: block;
    margin-left: auto;
  }

  /*
   * The menu labels are taxonomy names -- "Insikter & åsikter", "Analys &
   * rapporter" -- which are long enough that 20px does not fit on one row
   * until about 1280. Rather than stepping the size at a breakpoint, which
   * makes the whole block visibly jump, type and gaps interpolate.
   *
   * The type ramp used to top out at 1280, which left every laptop and
   * smaller desktop carrying the full 20px bar. It now runs 16px at 1024 up
   * to 20px at 1800, so only genuinely wide screens get the largest size.
   * The ramp is a single straight line on purpose: a steeper first leg would
   * buy a smaller 1440 at the cost of a visible bend mid-resize.
   * One shared --header-type-size drives the nav links, the language
   * switcher and the "Meny"/"Stäng" labels together so the row stays
   * optically even, and the search glyph rides the same ramp through
   * --header-icon-size. The overlay's top row reuses both, because it sits
   * exactly where the bar's own row was and must not jump when the menu
   * opens.
   */
  .site-header__menu {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3.906vw - 20px, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-header__menu a {
    font-size: var(--header-type-size);
    line-height: 1;
    text-decoration: none;
    /* a longer label should overflow visibly, not silently stack to two lines */
    white-space: nowrap;
  }

  /*
   * Ancestor as well as current: the section stays marked while the visitor
   * is on one of its child archives or reading an article filed under it.
   * See futurion_mark_section_ancestor_menu_items().
   */
  .site-header__menu .current-menu-item > a,
  .site-header__menu .current_page_item > a,
  .site-header__menu .current-menu-ancestor > a {
    font-weight: 500;
  }

  .site-header__actions {
    display: flex;
    align-items: flex-end;
    gap: clamp(16px, 3.846vw - 23.4px, 32px);
    /*
     * Ramps to the same 110px the 1440 breakpoint used to set outright. As a
     * step it opened an 88px gap in one pixel of resize and threw the menu
     * back toward the middle; spread across 1024-1700 it just breathes.
     */
    margin-left: clamp(22px, 13.018vw - 111.3px, 110px);
  }

  .site-header__languages {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .site-header__language {
    position: relative;
    color: var(--futurion-purple);
    font-size: var(--header-type-size);
    text-decoration: none;
	line-height: 1;
  }
  
  .site-menu-overlay__language {
    font-size: var(--header-type-size);
  }

  .site-header__language.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: var(--futurion-purple);
  }

  .site-header__search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--header-icon-box);
    height: var(--header-icon-box);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--futurion-purple);
    cursor: pointer;
  }

  .site-header__search-button span {
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    color: var(--futurion-purple);
    position: relative;
    bottom: 2px;
  }

  .site-header__menu-button {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .site-header__menu-label {
    display: inline-block;
    font-size: var(--header-type-size);
    line-height: 1;
    min-width: var(--header-label-min-width);
  }

  .site-header__burger {
    display: none;
  }

  .site-header__logo .futurion-logo-svg,
  .site-menu-overlay__logo .futurion-logo-svg {
    width: 190px;
  }

  .site-menu-overlay__inner {
    padding-top: 0;
    padding-bottom: 64px;
  }

  .site-menu-overlay__top {
    align-items: flex-end;
    min-height: var(--header-height);
    padding-top: 0;
    margin-bottom: 0;
	padding-bottom: 18px;
  }

  .site-menu-overlay__logo {
    margin-top: 0;
  }

  .site-menu-overlay__top-actions {
    align-items: flex-end;
    gap: 22px;
  }

  .site-menu-overlay__languages {
    padding-top: 0;
  }

  .site-menu-overlay__search {
    display: none;
  }

  .site-menu-overlay__search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--header-icon-box);
    height: var(--header-icon-box);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--futurion-white);
    cursor: pointer;
  }
  .site-menu-overlay__search-icon span {
    width: var(--header-icon-box);
    height: var(--header-icon-box);
    color: currentColor;
  }

  .site-menu-overlay__close {
    width: auto;
    height: auto;
    border-radius: 0;
    font-size: var(--header-type-size);
    min-width: var(--header-label-min-width);
  }

  .site-menu-overlay__close span {
    display: inline;
  }

  .site-menu-overlay__close i {
    display: none;
  }

  /*
   * Sat below the wordmark, derived rather than guessed.
   *
   * The wordmark is an SVG spanning 100vw with a 1662.83 x 299.6 viewBox and a
   * -0.409% top trim, so its bottom edge is always 17.609vw — checked against
   * measurements from 1280 to 2560 and exact at every one. The top row above
   * this content is a constant 65px at every desktop breakpoint, also measured.
   * So 19.209vw - 65px puts the first menu item 1.6vw below the wordmark: about
   * 20px at 1280 and 41px at 2560, growing with the mark it sits beneath.
   *
   * This replaces six hand-stepped values (185/245/285/350/420/500px at
   * 1024/1280/1440/1700/2100/2400) that approximated the same curve and drifted
   * from it — the gap wandered between 77px and 116px, and on a large screen it
   * pushed the footer far enough down to need scrolling.
   */
  .site-menu-overlay__content {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(220px, 1fr);
    column-gap: 90px;
    width: 100%;
    max-width: 900px;
    margin: calc(19.209vw - 65px) auto 0;
  }

  .site-menu-overlay__primary-menu a {
    font-size: 39px;
    line-height: 1.28;
  }

  .site-menu-overlay__secondary-menu {
    margin-top: 3px;
  }

  .site-menu-overlay__secondary-menu a {
    font-size: 25px;
    line-height: 1.38;
  }

  /*
   * The footer is a third grid item inside the two-column
   * .site-menu-overlay__content, so it has to span the full row. Its own
   * columns reuse the parent's track sizes and gap, which lines the
   * contact block up under the primary menu and the socials under the
   * secondary one.
   */
  .site-menu-overlay__footer {
    grid-column: 1 / -1;
    grid-template-columns: minmax(280px, 1fr) minmax(220px, 1fr);
    column-gap: 90px;
    margin-top: 125px;
    font-size: 19px;
    line-height: 1.5;
  }

  .site-menu-overlay__footer p {
    margin-bottom: 46px;
  }
}

/* Wide desktop */
@media (min-width: 1280px) {
  :root {
    --grid-gutter: 56px;
  }

  .site-menu-overlay__footer {
    margin-top: 145px;
    font-size: 21px;
  }

  .site-menu-overlay__footer p {
    margin-bottom: 52px;
  }
}

/* Widest screens */
@media (min-width: 1440px) {
  :root {
    --grid-gutter: 60px;
  }
    /*
     * Only the overlay keeps the fixed step; the header's own actions are
     * interpolated in the 1024 block above.
     */
    .site-menu-overlay__top-actions {
    margin-left: 110px;
	  gap: 32px;
  }
}
@media (min-width: 1700px) {
  /*
   * The "Meny"/"Stäng" labels and the overlay languages used to snap to 20px
   * here; they now ride --header-type-size, which reaches 20px at 1800, so
   * pinning them at 1700 would only reintroduce a step just short of the top
   * of the ramp.
   */
  .site-menu-overlay__footer {
    font-size: 23px;
  }
}

/** SEARCH RESULTS **/

.futurion-search-results {
	min-height: 70vh;
	padding-top: calc(var(--header-height) + 55px);
	padding-bottom: 85px;
	background: var(--futurion-grey);
	color: var(--futurion-purple);
}

.futurion-search-results__inner {
	width: 100%;
}

.futurion-search-results__header {
	max-width: 900px;
	margin-bottom: 62px;
}

.futurion-search-results__kicker {
	margin: 0 0 15px;
	color: var(--futurion-blue);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
}

.futurion-search-results__title {
	margin: 0;
	font-size: clamp(39px, 10vw, 65px);
	font-weight: 400;
	line-height: 1;
	overflow-wrap: anywhere;
}

.futurion-search-results__count {
	margin: 18px 0 0;
	font-size: 15px;
	line-height: 1.4;
}

.futurion-search-results__form,
.futurion-error404__form {
	display: flex;
	width: 100%;
	max-width: 620px;
	margin-top: 34px;
	border: 2px solid var(--futurion-purple);
	border-radius: 5px;
	background: var(--futurion-white);
	box-sizing: border-box;
}

.futurion-search-results__form input,
.futurion-error404__form input {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 56px;
	padding: 0 20px;
	border: 0;
	background: transparent;
	color: var(--futurion-purple);
	font: inherit;
	font-size: 17px;
	outline: none;
	box-sizing: border-box;
}

.futurion-search-results__form input::placeholder,
.futurion-error404__form input::placeholder {
	color: rgba(63, 42, 115, 0.7);
	opacity: 1;
}

.futurion-search-results__form button,
.futurion-error404__form button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 60px;
	width: 60px;
	padding: 0;
	border: 0;
	background: var(--futurion-purple);
	color: var(--futurion-white);
	cursor: pointer;
}

.futurion-search-results__form button span,
.futurion-error404__form button span {
	width: 18px;
	height: 18px;
}
.futurion-search-results__form button span svg *,
.futurion-error404__form button span svg *{
	fill: var(--futurion-white);
}


.futurion-search-results__grid {
	margin-top: 0;
}

.futurion-search-results__pagination {
	margin-top: 60px;
}

.futurion-search-results__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}

.futurion-search-results__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 8px 13px;
	border: 1px solid var(--futurion-purple);
	border-radius: 999px;
	color: var(--futurion-purple);
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
}

.futurion-search-results__pagination .page-numbers.current,
.futurion-search-results__pagination a.page-numbers:hover,
.futurion-search-results__pagination a.page-numbers:focus-visible {
	background: var(--futurion-purple);
	color: var(--futurion-white);
}

.futurion-search-results__empty {
	max-width: 620px;
}

.futurion-search-results__empty h2 {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.15;
}

.futurion-search-results__empty p {
	margin: 0;
	font-size: 17px;
	line-height: 1.45;
}

@media (min-width: 700px) {
	.futurion-search-results {
		padding-top: calc(var(--header-height) + 75px);
		padding-bottom: 105px;
	}

	.futurion-search-results__header {
		margin-bottom: 78px;
	}

	.futurion-search-results__form,
	.futurion-error404__form {
		margin-top: 40px;
	}

	.futurion-search-results__form input,
	.futurion-error404__form input {
		height: 62px;
		padding-right: 25px;
		padding-left: 25px;
		font-size: 18px;
	}

	.futurion-search-results__form button,
	.futurion-error404__form button {
		flex-basis: 68px;
		width: 68px;
	}
}

@media (min-width: 1100px) {
	.futurion-search-results {
		padding-top: calc(var(--header-height) + 95px);
		padding-bottom: 125px;
	}

	.futurion-search-results__header {
		margin-bottom: 90px;
	}

	.futurion-search-results__title {
		font-size: 72px;
	}
}

/** SPOTLIGHT MODULE **/

.futurion-spotlight {
	position: relative;
	overflow: hidden;
	background: #fbf4e5;
	color: var(--futurion-purple);
}

.futurion-spotlight::before,
.futurion-spotlight::after {
	--blob-fill:
		linear-gradient(
			160deg,
			rgba(255, 218, 225, 0.85) 0%,
			rgba(243, 226, 245, 0.6) 100%
		);
}

.futurion-spotlight::before {
	top: -180px;
	right: -230px;
	width: 520px;
	height: 740px;
}

/* The second blob draws its own shape so the pair never mirrors itself. */
.futurion-spotlight::after {
	top: 520px;
	left: 120px;
	width: 460px;
	height: 720px;
	--blob-image: var(--blob2-image);
	--blob-rotate: var(--blob2-rotate);
	--blob-scale: var(--blob2-scale);
	--blob-x: var(--blob2-x);
	--blob-y: var(--blob2-y);
	--blob-flip: var(--blob2-flip);
}

.futurion-spotlight__inner {
	position: relative;
	z-index: 1;
	max-width: var(--max-width);
	margin-right: auto;
	margin-left: 0;
	padding-top: 36px;
	padding-bottom: 42px;
}

.futurion-spotlight__header {
	margin-bottom: 16px;
}

.futurion-spotlight__title {
	margin: 0;
}

.futurion-spotlight__featured-grid,
.futurion-spotlight__latest-grid {
	display: grid;
	grid-template-columns: 1fr;
}

.futurion-spotlight__featured-grid {
	gap: 34px;
}

.futurion-spotlight__latest-grid {
	gap: 28px;
	margin-top: 36px;
}

.futurion-content-card {
	min-width: 0;
	margin: 0;
}

.futurion-content-card__link {
	display: grid;
	grid-template-columns: 98px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	border-radius: 4px;
	color: var(--futurion-purple);
	text-decoration: none;
}

.futurion-content-card__image-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0;
	aspect-ratio: 128 / 150;
	border-radius: 5px;
	background: rgba(63, 42, 115, 0.1);
}

.futurion-content-card__image-wrap::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: rgba(63, 42, 115, 0.16);
	content: "";
	opacity: 0;
	transition: opacity 300ms ease;
}

.futurion-content-card__image,
.futurion-content-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

.futurion-content-card__placeholder {
	background: rgba(63, 42, 115, 0.08);
}

.futurion-content-card__content {
	min-width: 0;
	transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.futurion-content-card__label {
	color: var(--futurion-blue);
	font-weight: 500;
	text-transform: uppercase;
}

.futurion-content-card__title {
	margin: 0;
	color: var(--futurion-purple);
	font-weight: 500;
	transition: color 250ms ease;
}

.futurion-content-card__date {
	display: block;
	color: var(--futurion-purple);
	text-transform: uppercase;
}

.futurion-content-card--without-image .futurion-content-card__link {
	grid-template-columns: minmax(0, 1fr);
}

.futurion-content-card--spotlight-featured .futurion-content-card__link {
	grid-template-columns: 1fr;
	gap: 12px;
}

.futurion-content-card--spotlight-featured .futurion-content-card__image-wrap {
	aspect-ratio: 1.44 / 1;
}

.futurion-content-card--spotlight-featured .futurion-content-card__label {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.15;
}

.futurion-content-card--spotlight-featured .futurion-content-card__title {
	font-size: 23px;
	line-height: 1.06;
}

.futurion-content-card--spotlight-featured .futurion-content-card__date {
	margin: 14px 0 0;
	font-size: 11px;
	line-height: 1.2;
}

.futurion-spotlight__footer {
	margin-top: 34px;
}

.futurion-spotlight__archive-link {
	position: relative;
	display: inline-block;
	color: var(--futurion-purple);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	z-index: 0;
}

.futurion-spotlight__archive-link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 1px;
	left: 0;
	height: 5px;
	background: rgba(63, 42, 115, 0.35);
	transition: background-color 200ms ease;
	pointer-events: none;
	z-index: -1;
}

.futurion-content-card__link:focus-visible,
.futurion-spotlight__archive-link:focus-visible {
	outline: 2px solid var(--futurion-blue);
	outline-offset: 5px;
}

.futurion-spotlight__archive-link:focus-visible::after {
	background: var(--futurion-orange);
}

@media (hover: hover) {

	.futurion-content-card__link:hover .futurion-content-card__title,
	.futurion-content-card__link:focus-visible .futurion-content-card__title {
		text-decoration: underline;
	}

	.futurion-content-card__link:hover .futurion-content-card__image-wrap::after,
	.futurion-content-card__link:focus-visible .futurion-content-card__image-wrap::after {
		opacity: 1;
	}

	.futurion-content-card__link:hover .futurion-content-card__title,
	.futurion-content-card__link:focus-visible .futurion-content-card__title {
		color: var(--futurion-purple-dark);
	}

	.futurion-spotlight__archive-link:hover::after {
		background: var(--futurion-orange);
	}

	.futurion-content-card--spotlight-featured .futurion-content-card__link:hover .futurion-content-card__image,
	.futurion-content-card--spotlight-featured .futurion-content-card__link:focus-visible .futurion-content-card__image,
	.futurion-content-card--archive .futurion-content-card__link:hover .futurion-content-card__image,
	.futurion-content-card--archive .futurion-content-card__link:focus-visible .futurion-content-card__image {
		transform: scale(1.025);
	}

}

@media (prefers-reduced-motion: reduce) {

	.futurion-content-card__image-wrap::after,
	.futurion-content-card__image,
	.futurion-content-card__content,
	.futurion-content-card__title,
	.futurion-spotlight__archive-link::after {
		transition: none;
	}
}

@media (min-width: 700px) {

	.futurion-spotlight__inner {
		padding-top: 44px;
		padding-bottom: 54px;
	}

	.futurion-spotlight__featured-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 36px;
	}

	.futurion-spotlight__latest-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px 36px;
		margin-top: 42px;
	}
}

@media (min-width: 1280px) {

	.futurion-spotlight__archive-link {
		font-size: 20px;
	}

	/*
	 * These two are drawn for a ~1800px stage. Held at fixed pixels they
	 * kept that size all the way down to 1280px, where 900px + 820px of
	 * blob cannot fit side by side -- the pair overlapped by ~420px and
	 * fused into one pink wash across the whole module (worse still once
	 * the seeded --blob-scale, up to 1.15, is applied on top).
	 *
	 * So size and offset them in vw instead. Each track is a straight
	 * line through two anchors -- full drawn size at 1800px, and roughly
	 * 62% of it at 1280px -- then min()/max() freezes every value at the
	 * original pixels from 1800px up, so wide screens look exactly as
	 * before. Shrinking faster than the viewport is what opens the gap:
	 * the blobs lose width quicker than the stage does.
	 *
	 * aspect-ratio replaces the fixed height so the silhouettes keep
	 * their proportions while the width moves.
	 */
	.futurion-spotlight::before {
		top: max(-520px, -28.9vw);
		right: auto;
		left: min(90px, 5vw);
		width: clamp(560px, 65.4vw - 277px, 900px);
		height: auto;
		aspect-ratio: 900 / 1120;
	}

	.futurion-spotlight::after {
		top: max(-260px, -14.4vw);
		right: max(-110px, -6.1vw);
		left: auto;
		width: clamp(500px, 61.5vw - 287px, 820px);
		height: auto;
		aspect-ratio: 820 / 980;
	}

	.futurion-content-card--spotlight-featured .futurion-content-card__date {
		font-size: 13px;
	}

	.futurion-spotlight__inner {
		padding-top: 48px;
		padding-bottom: 52px;
	}

	.futurion-spotlight__header {
		margin-bottom: 28px;
	}

	.futurion-spotlight__featured-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(48px, 5vw, 88px);
		align-items: start;
	}

	.futurion-content-card--spotlight-featured .futurion-content-card__link {
		grid-template-columns: clamp(220px, 16vw, 300px) minmax(0, 1fr);
		align-items: start;
		gap: clamp(22px, 1.6vw, 30px);
	}

	.futurion-content-card--spotlight-featured .futurion-content-card__image-wrap {
		aspect-ratio: 1 / 1;
	}

	.futurion-content-card--spotlight-featured .futurion-content-card__title {
		font-size: clamp(30px, 2.15vw, 38px);
	}

	.futurion-content-card--spotlight-featured .futurion-content-card__content {
		max-width: 450px;
	}

	.futurion-spotlight__latest-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: clamp(44px, 4vw, 72px);
		row-gap: 48px;
		margin-top: 48px;
	}

	.futurion-content-card--spotlight-featured .futurion-content-card__label {
		font-size: clamp(12px, 0.9vw, 15px);
	}

	.futurion-spotlight__footer {
		margin-top: 64px;
	}
}

@media (min-width: 1700px) {

	/*
	 * On very wide screens the module was still capped at
	 * var(--max-width) (1650px), left-aligned, leaving a lot of empty
	 * background to the right. Let the container and the featured
	 * images grow further; text sizing (title clamp, content column
	 * max-width) is intentionally left untouched.
	 */
	.futurion-spotlight__inner {
		max-width: clamp(1650px, 90vw, 2000px);
	}

	.futurion-content-card--spotlight-featured .futurion-content-card__link {
		grid-template-columns: clamp(220px, 16vw, 360px) minmax(0, 1fr);
	}
}

/**** HERO SECTION ****/

@property --futurion-hero-gold-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 18%;
}

@property --futurion-hero-gold-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 12%;
}

@property --futurion-hero-pink-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 82%;
}

@property --futurion-hero-pink-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 62%;
}

@property --futurion-hero-rose-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 55%;
}

@property --futurion-hero-rose-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 88%;
}

@property --futurion-hero-gold-reach {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 68%;
}

@property --futurion-hero-pink-reach {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 64%;
}

@property --futurion-hero-rose-reach {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 58%;
}

/* Hero */
.futurion-hero {
  position: relative;
  width: 100%;
  height: 60svh;
  max-height: 420px;
  overflow: hidden;
  background: #f6efe2;
  isolation: isolate;
}

/*
 * The drifting gradient is factored out of the hero so the article colour
 * bar can wear the same one at its own much shorter height. The radial
 * layers read the --futurion-hero-*-x/y/reach properties, which every
 * element using this animates for itself, so the layers size to whatever
 * box they land in and two elements never drift in step. Both the paint
 * and the timing travel together — change one here, both places follow.
 */
:root {
  /*
   * One knob for the whole drift. Lower = faster; the three base
   * durations stay in their uneven 16/22/19 relationship so the blobs
   * keep falling out of sync with each other at any speed.
   */
  --futurion-hero-drift-scale: 0.47;

  --futurion-drift-background-color: #f6efe2;

  /* The static brand sweep every drifting surface is painted on top of. */
  --futurion-drift-base-sweep:
    linear-gradient(96deg, #f3f2ea 2%, #f3eee3 21%, #eeb63b 40%, #e8ab40 54%, #e98d98 74%, #edb0ad 87%, #f1efe7 99%);
}

/*
 * Only static values are shareable through :root above. A custom property
 * resolves its own var()s where it is DECLARED, not where it is used, so a
 * gradient parked on :root would bake in :root's copies of the animated
 * --futurion-hero-*-x/y/reach properties -- which are @property
 * inherits:false, so :root only ever holds their initial values -- and
 * arrive here frozen. Same trap for the animation shorthand: resolved on
 * :root it would bake in :root's drift scale and ignore any local
 * override. Both must therefore be written out on the animated element
 * itself. Keep the layer list here and the colour bar's in step by hand.
 */
.futurion-hero__background {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background-color: var(--futurion-drift-background-color);
  background-image:
    linear-gradient(0deg, rgba(247, 243, 232, 0.56) 0%, rgba(247, 243, 232, 0) 62%),
    radial-gradient(ellipse at var(--futurion-hero-gold-x, 18%) var(--futurion-hero-gold-y, 12%), rgba(255, 205, 45, 0.72) 0%, rgba(242, 178, 42, 0.42) calc(var(--futurion-hero-gold-reach, 68%) - 24%), rgba(242, 178, 42, 0) var(--futurion-hero-gold-reach, 68%)),
    radial-gradient(ellipse at var(--futurion-hero-pink-x, 82%) var(--futurion-hero-pink-y, 62%), rgba(241, 116, 143, 0.68) 0%, rgba(235, 132, 124, 0.4) calc(var(--futurion-hero-pink-reach, 64%) - 22%), rgba(235, 132, 124, 0) var(--futurion-hero-pink-reach, 64%)),
    radial-gradient(ellipse at var(--futurion-hero-rose-x, 55%) var(--futurion-hero-rose-y, 88%), rgba(199, 110, 145, 0.6) 0%, rgba(199, 110, 145, 0.34) calc(var(--futurion-hero-rose-reach, 58%) - 20%), rgba(199, 110, 145, 0) var(--futurion-hero-rose-reach, 58%)),
    var(--futurion-drift-base-sweep);
  animation:
    futurion-hero-gold-drift calc(16s * var(--futurion-hero-drift-scale)) ease-in-out infinite,
    futurion-hero-pink-drift calc(22s * var(--futurion-hero-drift-scale)) ease-in-out infinite,
    futurion-hero-rose-drift calc(19s * var(--futurion-hero-drift-scale)) ease-in-out infinite;
}

/*
 * The orb layer is sized to the viewport rather than to the hero, and the
 * hero just clips whatever falls past its bottom edge. That way this box
 * and .site-menu-overlay__decor-image resolve to exactly the same
 * geometry, so the orbs hold their position when the menu opens over the
 * hero. Keep the two rules in sync.
 */
.futurion-hero__background::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--futurion-orb-height);
  background-image: url("assets/images/backgrounds/hero-bollar-3.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

/*
 * Three independent, differently-timed drifts (base 16s / 22s / 19s,
 * scaled by --futurion-hero-drift-scale above,
 * uneven keyframe spacing, wide travel across the full hero) so the
 * gold, pink, and rose blobs sweep through like waves and never move
 * in sync — each traces its own loose diagonal path and swells or
 * shrinks as it goes. Reach is kept well under the box's farthest
 * corner so each color pools into a visibly smaller, more saturated
 * patch instead of an all-over wash, making the travel easier to see.
 */
@keyframes futurion-hero-gold-drift {
  0%,
  100% {
    --futurion-hero-gold-x: 18%;
    --futurion-hero-gold-y: 12%;
    --futurion-hero-gold-reach: 68%;
  }

  30% {
    --futurion-hero-gold-x: 84%;
    --futurion-hero-gold-y: 30%;
    --futurion-hero-gold-reach: 96%;
  }

  60% {
    --futurion-hero-gold-x: 55%;
    --futurion-hero-gold-y: 80%;
    --futurion-hero-gold-reach: 52%;
  }

  85% {
    --futurion-hero-gold-x: 22%;
    --futurion-hero-gold-y: 58%;
    --futurion-hero-gold-reach: 82%;
  }
}

@keyframes futurion-hero-pink-drift {
  0%,
  100% {
    --futurion-hero-pink-x: 82%;
    --futurion-hero-pink-y: 62%;
    --futurion-hero-pink-reach: 64%;
  }

  25% {
    --futurion-hero-pink-x: 22%;
    --futurion-hero-pink-y: 78%;
    --futurion-hero-pink-reach: 92%;
  }

  55% {
    --futurion-hero-pink-x: 14%;
    --futurion-hero-pink-y: 16%;
    --futurion-hero-pink-reach: 48%;
  }

  80% {
    --futurion-hero-pink-x: 70%;
    --futurion-hero-pink-y: 10%;
    --futurion-hero-pink-reach: 78%;
  }
}

@keyframes futurion-hero-rose-drift {
  0%,
  100% {
    --futurion-hero-rose-x: 55%;
    --futurion-hero-rose-y: 88%;
    --futurion-hero-rose-reach: 58%;
  }

  35% {
    --futurion-hero-rose-x: 10%;
    --futurion-hero-rose-y: 40%;
    --futurion-hero-rose-reach: 84%;
  }

  65% {
    --futurion-hero-rose-x: 88%;
    --futurion-hero-rose-y: 22%;
    --futurion-hero-rose-reach: 44%;
  }

  90% {
    --futurion-hero-rose-x: 60%;
    --futurion-hero-rose-y: 65%;
    --futurion-hero-rose-reach: 70%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .futurion-hero__background,
  .futurion-article__colour-bar {
    animation: none;
  }
}

.futurion-hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
}

.futurion-hero__wordmark {
  position: relative;
  width: 100vw;
  line-height: 0;
  pointer-events: none;
}

.futurion-hero__wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--futurion-wordmark-top-trim);
  margin-bottom: var(--futurion-wordmark-bottom-trim);
}

.futurion-hero__wordmark .cls-1,
.futurion-hero__wordmark path {
  fill: var(--futurion-purple);
}

.futurion-hero__tagline {
  position: relative;
  z-index: 3;
  margin-top: 18px;
  color: var(--futurion-purple);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  text-transform: uppercase;
}

/* Calendar banner */
.futurion-hero__calendar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 5;
  background: rgba(63, 42, 115, 0.96);
  color: var(--futurion-white);
  overflow: hidden;
}

.futurion-hero__calendar-inner {
  display: flex;
  align-items: stretch;
  min-height: 60px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
}

.futurion-hero__calendar-label {
  display: none;
}

.futurion-hero__calendar-carousel {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.futurion-hero__calendar-track {
  display: inline-flex;
  align-items: stretch;
  height: 100%;
  will-change: transform;
}

.futurion-hero__calendar-track.is-looping {
  animation: futurion-calendar-scroll linear infinite;
  animation-duration: var(--futurion-calendar-duration, 30s);
}

.futurion-hero__calendar-carousel:hover .futurion-hero__calendar-track,
.futurion-hero__calendar-carousel:focus-within .futurion-hero__calendar-track {
  animation-play-state: paused;
}

@keyframes futurion-calendar-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .futurion-hero__calendar-track.is-looping {
    animation: none;
  }
}

.futurion-hero__calendar-item {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  width: auto;
  max-width: calc(100vw - (var(--grid-gutter) * 2));
  min-width: 0;
  padding: 15px 28px;
  color: var(--futurion-white);
  text-decoration: none;
  box-sizing: border-box;
  transition: color 0.2s ease;
}

.futurion-hero__calendar-item::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  bottom: 25%;
  width: 1px;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.futurion-hero__calendar-item:hover {
  color: var(--futurion-orange);
}

.futurion-hero__calendar-date {
  flex: 0 0 auto;
  font-size: 9px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0.9;
  white-space: nowrap;
}

.futurion-hero__calendar-title {
  min-width: 0;
  max-width: 52vw;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .futurion-hero__calendar-inner {
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .futurion-hero {
    height: clamp(600px, 36vw, 1200px);
    max-height: none;
  }

  .futurion-hero__tagline {
    margin-top: 16px;
    font-size: 16px;
  }

  .futurion-hero__calendar-inner {
    min-height: 72px;
  }

  .futurion-hero__calendar-label {
    display: flex;
    align-items: center;
    flex: 0 0 140px;
    padding-right: 32px;
    color: var(--futurion-white);
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
  }

  .futurion-hero__calendar-label span {
    margin-left: 8px;
  }

  .futurion-hero__calendar-carousel {
    flex: 1 1 auto;
  }

  .futurion-hero__calendar-item {
    max-width: 520px;
    padding: 0 38px;
  }

  .futurion-hero__calendar-date {
    font-size: 14px;
  }

  .futurion-hero__calendar-title {
    max-width: 330px;
    font-size: 19px;
  }
}

@media (min-width: 1100px) {
  .futurion-hero__tagline {
    margin-top: 24px;
    font-size: 18px;
  }

  .futurion-hero__calendar-inner {
    min-height: 80px;
  }

  .futurion-hero__calendar-label {
    font-size: 20px;
    flex-basis: 150px;
  }

  .futurion-hero__calendar-item {
    max-width: 560px;
    padding-left: 42px;
    padding-right: 42px;
  }

  .futurion-hero__calendar-title {
    max-width: 360px;
    font-size: 23px;
  }
}

/**** 50/50 PUFF MODULE / 50/50 PUFF WIDGET ****/

.futurion-fifty-puff {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--futurion-grey);
  color: var(--futurion-purple);
}

.futurion-fifty-puff__inner {
  display: grid;
  gap: 28px;
  padding-top: 52px;
  padding-bottom: 52px;
}

.futurion-fifty-puff__card {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 200px;
  border-radius: 20px;
  color: var(--futurion-purple);
  background: var(--futurion-white);
  box-sizing: border-box;
}

.futurion-fifty-puff__link {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 45px 25px 22px;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

.futurion-fifty-puff__link[href]:focus-visible {
  outline: 2px solid var(--futurion-purple);
  outline-offset: -5px;
}

/*
 * Sized off the card width with a fixed ratio rather than a full inset, so
 * the blob keeps its silhouette instead of stretching to fill the card.
 */
/*
 * First card: sized and inset so the blob sits almost entirely inside the
 * card, with only a sliver of its foot cropped by the bottom edge.
 */
.futurion-fifty-puff__shape {
  top: auto;
  right: 5%;
  bottom: -4%;
  left: auto;
  width: 44%;
  aspect-ratio: 1 / 0.92;
  z-index: 1;
  opacity: 0.5;
  --blob-fill:
    linear-gradient(
      140deg,
      rgba(226, 206, 240, 0.9) 0%,
      rgba(242, 195, 211, 0.7) 100%
    );
}

/* Second card: blob2 on the left, pushed well past the edge, turned upside down. */
.futurion-fifty-puff__card--2 .futurion-fifty-puff__shape {
  right: auto;
  left: -18%;
  bottom: -6%;
  width: 44%;
  --blob-flip-y: -1;
}

/*
 * Second card only: blob5 out to the right edge. Sits clear of the blob on the
 * left rather than overlapping it — the two are separately translucent and
 * would compound into a darker patch. Must follow the --card--2 rule above,
 * which it also matches.
 */
.futurion-fifty-puff__card--2 .futurion-fifty-puff__shape--secondary {
  right: -7%;
  left: auto;
  bottom: -30%;
  width: 42%;
  --blob-flip-y: 1;
}

.futurion-fifty-puff__content {
  position: relative;
  z-index: 2;
  max-width: 750px
}

/* Shared typography for section-level module eyebrows. */
.futurion-module__eyebrow {
	margin: 0;
	color: var(--futurion-blue);
	font-size: 20px;
	line-height: 1;
	font-weight: 400;
}

/*
 * The eyebrow doubles as the module's link to its archive on the events
 * carousel, the rapport module and (per puff) the 50/50 puff widget. Same
 * orange highlighter-swipe as .site-footer__column a and the focus tile's
 * "Se innehåll", so a text link reads the same way everywhere on the site.
 */
.futurion-module__eyebrow a,
.futurion-module__eyebrow-link {
	position: relative;
	z-index: 0;
	color: inherit;
	text-decoration: none;
}

.futurion-module__eyebrow a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -0.05em;
	left: 0;
	z-index: -1;
	height: 3px;
	background: var(--futurion-orange);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.futurion-module__eyebrow a:hover::after,
.futurion-module__eyebrow a:focus-visible::after {
	opacity: 1;
}

.futurion-fifty-puff__vignette {
	margin-bottom: 28px;
}

.futurion-fifty-puff__title {
  margin: 0;
  color: var(--futurion-purple);
  font-size: 27px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.futurion-fifty-puff__description {
  display: none;
  letter-spacing: -0.01em;
}

.futurion-fifty-puff__description p {
  margin: 0;
}

.futurion-fifty-puff__description p + p {
  margin-top: 1em;
}

/* Shared pill button used by the intro, 50/50 puff, and image puff widgets. */
.futurion-widget-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px 10px;
  border: 1px solid var(--futurion-purple);
  border-radius: 999px;
  color: var(--futurion-purple);
  background: transparent;
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.futurion-widget-button:hover,
.futurion-widget-button:focus-visible {
  color: var(--futurion-orange);
  background: var(--futurion-purple);
}

@media (min-width: 768px) {
  .futurion-widget-button {
    padding: 15px 33px 12px;
    font-size: 18px;
  }
}

@media (min-width: 1100px) {
  .futurion-widget-button {
    padding: 17px 40px 14px;
    font-size: 20px;
  }
}

@media (min-width: 1440px) {
  .futurion-widget-button {
    padding: 18px 47px 15px;
    font-size: 23px;
  }
}

.futurion-fifty-puff__button {
  margin-top: 40px;
}

.futurion-fifty-puff__link:hover .futurion-fifty-puff__button,
.futurion-fifty-puff__link:focus-visible .futurion-fifty-puff__button {
  color: var(--futurion-orange);
  background: var(--futurion-purple);
}

@media (min-width: 768px) {
  .futurion-fifty-puff__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .futurion-fifty-puff__card {
    min-height: 300px;
    border-radius: 14px;
  }

  .futurion-fifty-puff__link {
    padding: 64px 36px 38px;
  }

  .futurion-fifty-puff__shape {
    right: 6%;
    bottom: -4%;
    width: 42%;
  }

  .futurion-fifty-puff__card--2 .futurion-fifty-puff__shape {
    right: auto;
    bottom: -6%;
    width: 42%;
  }

  .futurion-fifty-puff__card--2 .futurion-fifty-puff__shape--secondary {
    right: -2%;
    left: auto;
    width: 50%;
    bottom: -38%;
  }

  .futurion-fifty-puff__vignette {
    margin-bottom: 22px;
  }

  .futurion-module__eyebrow {
    font-size: 27px;
  }

  .futurion-fifty-puff__title {
    font-size: 34px;
    line-height: 1.04;
  }

  .futurion-fifty-puff__description {
    display: block;
    margin-top: 24px;
    color: var(--futurion-purple);
    font-size: 17px;
    line-height: 1.2;
    font-weight: 400;
  }

  .futurion-fifty-puff__button {
    margin-top: 64px;
  }
}

@media (min-width: 1100px) {

    .futurion-fifty-puff__title {
    font-size: 40px;
    }
  .futurion-fifty-puff__inner {
    gap: 26px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .futurion-fifty-puff__card {
    min-height: 420px;
  }

  .futurion-fifty-puff__link {
    padding: 68px 40px 42px;
  }

  .futurion-module__eyebrow {
    font-size: 28px;
  }

  .futurion-fifty-puff__title {
    font-size: 38px;
  }

  .futurion-fifty-puff__description {
    font-size: 18px;
  }

  .futurion-fifty-puff__button {
    margin-top: 68px;
  }
}

@media (min-width: 1440px) {
    .futurion-fifty-puff__card--2 .futurion-fifty-puff__shape.futurion-fifty-puff__shape--secondary {
    bottom: -48%;
    left: auto;
  }

    .futurion-fifty-puff__card--2 .futurion-fifty-puff__shape {
    bottom: -16%;
    left: -20%
  }

  .futurion-fifty-puff__inner {
    gap: 28px;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .futurion-fifty-puff__card {
    min-height: 430px;
  }

  .futurion-fifty-puff__link {
    padding: 70px 42px 44px;
  }

  .futurion-module__eyebrow {
    font-size: 29px;
  }

  .futurion-fifty-puff__title {
    font-size: 40px;
  }

  .futurion-fifty-puff__description {
    font-size: 20px;
  }

  .futurion-fifty-puff__button {
    margin-top: 70px;
  }
}

@media (min-width: 1700px) {

  .futurion-fifty-puff__inner {
    gap: 30px;
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .futurion-fifty-puff__card {
    min-height: 440px;
  }

  .futurion-fifty-puff__link {
    padding: 74px 48px 46px;
  }

  .futurion-module__eyebrow {
    font-size: 30px;
  }

}

/*
 * 50/50 puff -- bottom-aligned buttons
 *
 * The button hung off a fixed top margin, so where it landed depended on how
 * much text sat above it and the two cards disagreed by about 22px. Making the
 * link and its content flex columns lets the button absorb the leftover space
 * instead. Only from 768px, where the cards sit side by side -- stacked, there
 * is nothing to align against.
 */
@media (min-width: 768px) {
  .futurion-fifty-puff__link {
    display: flex;
    flex-direction: column;
  }

  .futurion-fifty-puff__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .futurion-fifty-puff__button {
    margin-top: auto;
    align-self: flex-start;
  }

  /*
   * Once the text is tall enough to fill the card the auto margin collapses to
   * nothing, so the gap above the button is held here rather than on it.
   */
  .futurion-fifty-puff__description {
    margin-bottom: 28px;
  }
}

/*
 * 50/50 puff -- 1100 to 1500
 *
 * The awkward band: the cards are at their narrowest two-up width, so the text
 * wraps hardest, while the frame is still carrying large-desktop padding and
 * min-height on top of that. Trim the frame and ease the type down a step.
 * Wider than this there is room for the full treatment, so it is left alone.
 */
@media (min-width: 1100px) and (max-width: 1500px) {
  .futurion-fifty-puff__inner {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .futurion-fifty-puff__card {
    min-height: 330px;
  }

  .futurion-fifty-puff__link {
    padding: 44px 34px 34px;
  }

  /*
   * Scoped to the puff's own eyebrow rather than .futurion-module__eyebrow,
   * which other modules share.
   */
  .futurion-fifty-puff__vignette {
    margin-bottom: 18px;
    font-size: 23px;
  }

  .futurion-fifty-puff__title {
    font-size: 32px;
  }

  .futurion-fifty-puff__description {
    margin-top: 18px;
    margin-bottom: 22px;
    font-size: 17px;
  }
}

/**** INTRO MODULE / INTRO WIDGET ****/

.futurion-intro {
	position: relative;
	z-index: 2;
	background: var(--futurion-white);
	color: var(--futurion-purple);
}

.futurion-intro__inner {
	display: flex;
	flex-direction: column;
	padding-top: 48px;
	padding-bottom: 56px;
}

.futurion-intro__content {
	width: 100%;
}

.futurion-intro__text {
	max-width: 760px;
}

.futurion-intro__copy {
	color: var(--futurion-purple);
	font-size: 21px;
	line-height: 1.2;
	font-weight: 400;
}

/*
 * Optional per-breakpoint copy. Both variants are only in the markup when
 * the widget actually has a mobile text; otherwise a single unmodified
 * .futurion-intro__copy is rendered and neither rule below matches.
 *
 * display: none rather than a visually-hidden technique on purpose -- the
 * inactive variant has to leave the accessibility tree, or screen readers
 * would announce the same passage twice. Swap point is 1100px, where this
 * module takes on its desktop layout and the image column appears.
 */
.futurion-intro__copy--desktop {
	display: none;
}

@media (min-width: 1100px) {
	.futurion-intro__copy--mobile {
		display: none;
	}

	.futurion-intro__copy--desktop {
		display: block;
	}
}

.futurion-intro__bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--futurion-purple);
	vertical-align: 0.12em;
}

.futurion-intro__copy p {
	margin: 0;
}

.futurion-intro__copy p:first-of-type {
	display: inline;
}

.futurion-intro__copy p + p {
	margin-top: 1em;
}

.futurion-intro__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 32px;
	padding-left: 0;
}

.futurion-intro__media {
	display: none;
}

.futurion-intro__image {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {

	.futurion-intro__inner {
		padding-top: 72px;
		padding-bottom: 92px;
	}

	.futurion-intro__text {
		max-width: 760px;
	}

	.futurion-intro__copy {
		font-size: 22px;
		line-height: 1.2;
	}

	.futurion-intro__bullet {
		width: 9px;
		height: 9px;
		margin-right: 9px;
		vertical-align: 0.1em;
	}

	.futurion-intro__buttons {
		gap: 16px;
		margin-top: 42px;
	}
}

@media (min-width: 1100px) {

	.futurion-intro__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
		/*
		 * 56px at 1100 up to 120px at 1800, rather than stepping 80 -> 120 at
		 * 1440. The full gap is right on a wide screen and merely wasteful on
		 * a laptop, where it was squeezing the copy column for space the
		 * layout did not need; interpolating also removes the jump that a
		 * 40px step put in the middle of a resize. Declared once here -- the
		 * 1440 block below no longer sets column-gap, or it would win on
		 * source order and pin the whole range back to 120px.
		 */
		column-gap: clamp(56px, calc(56px + (100vw - 1100px) * 0.0914), 120px);
		align-items: start;
		padding-top: 64px;
		padding-bottom: 92px;
	}

	.futurion-intro__content {
		padding-top: 0;
	}

	.futurion-intro__text {
		max-width: 780px;
	}

	.futurion-intro__bullet {
		width: 10px;
		height: 10px;
		margin-right: 10px;
		vertical-align: 0.08em;
	}

	.futurion-intro__buttons {
		gap: 18px;
		margin-top: 46px;
	}

	/*
	 * Inside the grid, not bleeding past it. This used to be widened by one
	 * --grid-gutter and pulled the same distance right, running the image off
	 * the viewport edge; it now ends on the same line as the header, the
	 * footer and every other module on the page.
	 */
	.futurion-intro__media {
		display: block;
		position: relative;
		width: 100%;
		margin-top: 0;
	}

	.futurion-intro__image {
		width: 100%;
		aspect-ratio: 67 / 42;
		object-fit: cover;
	}
}

@media (min-width: 1440px) {

	/*
	 * Image column and copy size both interpolate up to 1800, where they meet
	 * the values the 1700 breakpoint used to set outright.
	 *
	 * As two steps -- 460px/28px here, 560px/30px at 1700 -- the 1440-1700
	 * range got the narrowest picture and nearly the largest type at the same
	 * time, which left the image looking undersized next to copy set about as
	 * wide as it is tall. Ramping both means the picture grows with the
	 * viewport instead of waiting for 1700, and the type only reaches 30px
	 * where there is a column wide enough to carry it.
	 */
	.futurion-intro__inner {
		grid-template-columns:
			minmax(0, 1fr)
			clamp(520px, calc(520px + (100vw - 1440px) * 0.1111), 560px);
		padding-top: 64px;
		padding-bottom: 92px;
	}

	.futurion-intro__text {
		max-width: 915px;
	}

	.futurion-intro__copy {
		font-size: clamp(25px, calc(25px + (100vw - 1440px) * 0.01389), 30px);
	}

	.futurion-intro__buttons {
		margin-top: 46px;
	}
}


/**** FOCUS AREAS GRID ****/

/*
 * The article keeps its own generous bottom padding for pages that end on
 * their copy. When the grid follows, that padding stacks on top of the grid's
 * own leading space and opens a gap wide enough to read as a missing section,
 * so the article gives most of it up and the grid sets the distance instead.
 */
.futurion-page--has-focus-grid .futurion-page__article {
	padding-bottom: 24px;
}

/*
 * No hero blob on these pages. It is drawn hanging well below the image, which
 * works when open page ends the section -- but here the tiles start just under
 * it, so the shape gets caught between the picture and the first row and reads
 * as a stray object rather than decoration. The tiles carry blobs of their
 * own, so the page loses nothing by dropping this one.
 */
.futurion-page--has-focus-grid .futurion-page__media::before,
.futurion-page--has-focus-grid .futurion-page__media::after {
	display: none;
}

/*
 * A shorter hero than an ordinary page gets. The image is capped at 650px and
 * then 800px on the way up, which is right when a column of copy runs down
 * beside it; a page that leads with a single paragraph and hands over to the
 * grid has nothing to fill that height, and the picture just opens a well of
 * empty cream to its left. The aspect ratio is fixed at 8/5.2, so capping the
 * width is what caps the height.
 *
 * Two classes deep on purpose: the 1500px rule below sets this width again
 * with a single class, and specificity rather than source order is what keeps
 * this winning at every width above 1100.
 */
@media (min-width: 1100px) {
	.futurion-page--has-focus-grid .futurion-page__media {
		width: min(100%, 520px);
	}
}

@media (min-width: 1100px) {
	.futurion-page--has-focus-grid .futurion-page__article {
		padding-bottom: 40px;
	}
}

/*
 * The collecting page's presentation of the same four areas the band module
 * carries. The band is built to be met one at a time on the way down a page;
 * a page whose whole subject is the set wants them together, so this is a
 * grid of four solid colour fields rather than four full-width bands.
 *
 * Enabled per page from "Visa fokusområden som rutnät", which also stands the
 * band module down for that request so nothing is listed twice.
 */
.futurion-focus-grid {
	position: relative;
	z-index: 2;
	padding-bottom: 90px;
}

.futurion-focus-grid__inner {
	display: grid;
	gap: 16px;
}

.futurion-focus-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
	border-radius: 20px;
	color: var(--futurion-purple);
}

/*
 * The same white-masked blobs as the band, at the scale of a tile rather than
 * a full-width strip: here the height comes from the tile's own width through
 * aspect-ratio, so a tall narrow tile on a phone does not stretch the shape
 * into a vertical smear. Purely decorative, and hidden outright when PHP has
 * not supplied a mask -- without one these would paint as white rectangles.
 */
.futurion-focus-tile::before,
.futurion-focus-tile::after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
	opacity: 0.18;
	background: #fff;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.futurion-focus-tile::before {
	left: calc(var(--focus-x-a, 10%) * 0.5);
	bottom: -18%;
	width: 62%;
	aspect-ratio: 1 / 0.92;
	-webkit-mask-image: var(--focus-image-a);
	mask-image: var(--focus-image-a);
	transform: scaleX(var(--focus-flip-a, 1));
}

.futurion-focus-tile::after {
	right: -14%;
	top: -20%;
	width: 48%;
	aspect-ratio: 1 / 0.95;
	-webkit-mask-image: var(--focus-image-b);
	mask-image: var(--focus-image-b);
	transform: scaleX(var(--focus-flip-b, 1));
}

.futurion-focus-tile:not([style*="--focus-image"])::before,
.futurion-focus-tile:not([style*="--focus-image"])::after {
	display: none;
}

.futurion-focus-tile__media {
	position: relative;
	z-index: 2;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.futurion-focus-tile__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.futurion-focus-tile__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 26px 24px 28px;
}

.futurion-focus-tile__label {
	margin-bottom: 14px;
	font-size: 16px;
	line-height: 1;
	font-weight: 400;
}

.futurion-focus-tile__title {
	margin: 0;
	font-size: 32px;
	line-height: 0.98;
	font-weight: 400;
}

/*
 * One focus stop per area: the title's link is stretched over the whole tile
 * rather than the arrow below being a second link to the same place. The
 * pseudo-element sits above the blobs but below nothing else, so the tile is
 * clickable edge to edge.
 */
.futurion-focus-tile__link {
	color: inherit;
	text-decoration: none;
}

.futurion-focus-tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.futurion-focus-tile__link:focus-visible {
	outline: 2px solid var(--futurion-purple);
	outline-offset: 3px;
}

.futurion-focus-tile__text {
	margin-top: 16px;
	font-size: 17px;
	line-height: 1.2;
}

.futurion-focus-tile__text p {
	margin: 0;
}

.futurion-focus-tile__text p + p {
	margin-top: 0.8em;
}

/*
 * Pushed to the bottom so the arrow sits on the same line across a row of
 * tiles whose descriptions run to different lengths.
 *
 * Aligned to the end rather than the centre, like the band module's button:
 * the arrow points down-right, so its visual weight is low, and centring the
 * label against the glyph's box left the text reading as if it were hanging
 * off the top of the arrow rather than sitting beside its point.
 */
.futurion-focus-tile__cta {
	display: inline-flex;
	align-items: flex-end;
	gap: 12px;
	margin-top: auto;
	padding-top: 30px;
	font-size: 14px;
	line-height: 1;
	font-weight: 500;
}

.futurion-focus-tile__cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	transition: transform 0.25s ease;
}

.futurion-focus-tile__cta-icon svg {
	width: 100%;
	height: 100%;
}

.futurion-focus-tile__cta-icon svg path {
	fill: var(--futurion-purple);
}

/*
 * The band module's treatment, not an underline: a 4px orange bar sitting
 * behind the baseline that fades in, like a highlighter stroke. Kept
 * identical to .futurion-focus-card__button-text so the two presentations of
 * the same four areas behave the same way under the cursor.
 */
.futurion-focus-tile__cta-text {
	position: relative;
}

.futurion-focus-tile__cta-text::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 1px;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 4px;
	background: var(--futurion-orange);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

@media (hover: hover) {
	.futurion-focus-tile:hover .futurion-focus-tile__image {
		transform: scale(1.04);
	}

	.futurion-focus-tile:hover .futurion-focus-tile__cta-icon {
		transform: translate(4px, 4px);
	}

	.futurion-focus-tile:hover .futurion-focus-tile__cta-text::after {
		opacity: 1;
	}
}

/* Keyboard parity: the link is stretched over the tile, so focus lights the same cues. */
.futurion-focus-tile__link:focus-visible ~ .futurion-focus-tile__cta .futurion-focus-tile__cta-icon,
.futurion-focus-tile:focus-within .futurion-focus-tile__cta-icon {
	transform: translate(4px, 4px);
}

.futurion-focus-tile:focus-within .futurion-focus-tile__cta-text::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.futurion-focus-tile__image,
	.futurion-focus-tile__cta-icon,
	.futurion-focus-tile__cta-text::after {
		transition: none;
	}

	.futurion-focus-tile:hover .futurion-focus-tile__image {
		transform: none;
	}
}

@media (min-width: 768px) {
	.futurion-focus-grid__inner {
		gap: 20px;
	}

	.futurion-focus-tile__body {
		padding: 32px 30px 34px;
	}

	.futurion-focus-tile__title {
		font-size: 38px;
	}

	.futurion-focus-tile__text {
		font-size: 18px;
	}

	.futurion-focus-tile__cta {
		font-size: 15px;
	}
}

@media (min-width: 900px) {
	.futurion-focus-grid__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.futurion-focus-grid {
		padding-bottom: 120px;
	}

	.futurion-focus-grid__inner {
		gap: 24px;
	}

	.futurion-focus-tile__body {
		padding: 38px 36px 40px;
	}

	/*
	 * Everything in the tile ramps to its full size at 1800 rather than
	 * stepping there. The description carries the biggest increase -- at a
	 * flat 19px it was the one part of the tile that did not grow with the
	 * picture and the title above it, and read as small print on a wide
	 * screen. The title moves least; it was already the loudest thing here.
	 */
	.futurion-focus-tile__label {
		margin-bottom: 18px;
		font-size: clamp(17px, calc(17px + (100vw - 1100px) * 0.00429), 20px);
	}

	.futurion-focus-tile__title {
		font-size: clamp(38px, calc(38px + (100vw - 1100px) * 0.02), 52px);
	}

	.futurion-focus-tile__text {
		margin-top: 20px;
		font-size: clamp(19px, calc(19px + (100vw - 1100px) * 0.0057), 23px);
	}

	.futurion-focus-tile__cta {
		gap: 14px;
		font-size: clamp(15px, calc(15px + (100vw - 1100px) * 0.00429), 18px);
	}

	/* Kept in step with the label beside it, or the glyph starts to look shrunken. */
	.futurion-focus-tile__cta-icon {
		width: clamp(21px, calc(21px + (100vw - 1100px) * 0.00429), 24px);
		height: clamp(21px, calc(21px + (100vw - 1100px) * 0.00429), 24px);
	}
}



/**** FULL-BLEED MODULE BLOCKS ****/

/*
 * Lets a module block placed in page content escape the copy column and run
 * the width of the page, the way the same module does from a widget area.
 *
 * The board carousel in particular is built to be wider than its container --
 * it clips its own overflow at the section edge -- so inside an 890px column
 * it would show two and a half cards and call it a slider.
 *
 * Anchored to --grid-gutter, NOT the usual `50% - 50vw` centring trick: the
 * copy column is the left column of the page's two-column grid, not a centred
 * container, so a formula assuming symmetry drags the block off the left edge
 * by half the media column. What is reliably true is that .futurion-page__
 * article is a full-width .site-grid, so the copy column's left edge always
 * sits exactly one gutter in from the viewport -- at every breakpoint, since
 * the gutter is the thing that changes.
 */
.futurion-block--fullbleed {
	width: 100vw;
	margin-left: calc(-1 * var(--grid-gutter));
}

/*
 * ...and the guard that makes the above safe. html carries overflow-y: scroll,
 * so the scrollbar is always present and 100vw is always wider than the space
 * the page actually has by exactly its width -- which a 50vw pull turns into a
 * horizontal scrollbar on every page carrying one of these blocks.
 *
 * clip rather than hidden: hidden would make main a scroll container, which
 * silently kills position: sticky for anything inside it. hidden is left in
 * first as the fallback for browsers without clip (Safari < 16), where a
 * scroll container is the lesser problem.
 */
.futurion-page {
	overflow-x: hidden;
	overflow-x: clip;
}

/**** VERKSAMHETSBERÄTTELSER MODULE ****/

.futurion-verksamhet {
	position: relative;
	z-index: 2;
	padding-top: 60px;
	padding-bottom: 70px;
	background: var(--futurion-cream);
	color: var(--futurion-purple);
}

/*
 * Eyebrow spacing kept in step with .futurion-board__heading-wrap, which is
 * the reference: the two modules sit directly above/below each other on Om
 * Futurion, so an eyebrow that clears its content by a different amount in
 * each reads as two sections built to different rules. Board runs
 * 24/26/25/28px across base/600/1024/1700 and this follows it exactly.
 */
.futurion-verksamhet__heading {
	margin: 0 0 24px;
}

/*
 * Sized by column width rather than a fixed count, because this module has two
 * homes with very different widths: full-bleed in a widget area, and inside a
 * page's 890px copy column when placed as a shortcode. A fixed three columns
 * is right in the first and crushes the cards to ~145px of text in the second.
 * auto-fill lands on two or three by itself depending on the room it gets.
 */
.futurion-verksamhet__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 34px;
}

/*
 * The card's own link and the download sit in one column, with the button
 * pushed to the bottom so a row of cards whose titles run to different
 * lengths still has its buttons on one line.
 */
.futurion-verksamhet__grid .futurion-content-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.futurion-content-card__document {
	margin-top: auto;
	padding-top: 16px;
}

.futurion-content-card__download {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding-top: 11px;
	padding-bottom: 9px;
	font-size: 14px;
}

/* Secondary to the label it sits under, and never the thing you read first. */
.futurion-content-card__download-size {
	font-size: 12px;
	opacity: 0.75;
}

@media (min-width: 700px) {
	.futurion-verksamhet__grid {
		column-gap: 55px;
		row-gap: 44px;
	}
}

@media (min-width: 1100px) {
	.futurion-verksamhet {
		padding-top: 80px;
		padding-bottom: 100px;
	}

	.futurion-verksamhet__grid {
		column-gap: clamp(44px, 4vw, 72px);
		row-gap: 48px;
	}

	.futurion-content-card__download {
		font-size: 15px;
	}
}

/**** NEWSLETTER FLOATER ****/

.futurion-newsletter {
  position: fixed;
  right: var(--grid-gutter);
  bottom: 22px;
  z-index: 80;
  width: auto;
  max-width: calc(100vw - (var(--grid-gutter) * 2));
  color: var(--futurion-white);
  transform: translateY(calc(-1 * var(--newsletter-lift, 0px)));
  transition: transform 0.15s ease-out;
}

.futurion-newsletter__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  max-width: 100%;
  min-height: 46px;
  margin-left: auto;
  padding: 10px 14px 10px 22px;
  border: 0;
  border-radius: 999px;
  color: var(--futurion-white);
  background: var(--futurion-purple);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
}

.futurion-newsletter.is-open .futurion-newsletter__trigger {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

.futurion-newsletter__trigger-inner {
  display: flex;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
}

.futurion-newsletter__brand {
  flex: 0 0 auto;
  color: var(--futurion-green);
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  padding-top:2px;
}

.futurion-newsletter__trigger-text {
  display: inline-block;
  max-width: 0;
  margin-left: 0;
  color: var(--futurion-white);
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    max-width 0.3s ease,
    margin-left 0.3s ease,
    opacity 0.2s ease,
    transform 0.3s ease;
}

.futurion-newsletter__trigger:hover .futurion-newsletter__trigger-text,
.futurion-newsletter__trigger:focus-visible .futurion-newsletter__trigger-text {
  /*
   * A ceiling for the reveal, not a width -- the span is inline-block, so it
   * only ever grows to its own text. It is sized just above "Prenumerera"
   * with room for a longer translation: the old 260px was cut for
   * "Prenumerera på nyhetsbrevet", and left over that string the animation
   * finished a third of the way in and then ran on doing nothing visible.
   */
  max-width: 130px;
  margin-left: 7px;
  opacity: 1;
  transform: translateX(0);
}

.futurion-newsletter__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-left: 14px;
  border-radius: 8px;
  transform: translateY(0);
}

.futurion-newsletter__arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

.futurion-newsletter__arrow svg path {
  fill: var(--futurion-green);
}


.futurion-newsletter__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(320px, calc(100vw - (var(--grid-gutter) * 2)));
  padding: 24px 24px 22px;
  border-radius: 22px;
  background: var(--futurion-purple);
  color: var(--futurion-white);
  box-sizing: border-box;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.2);
}

.futurion-newsletter__panel[hidden] {
  display: none;
}

.futurion-newsletter__close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--futurion-green);
  background: transparent;
  font: inherit;
  font-size: 25px;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
}

.futurion-newsletter__close:hover,
.futurion-newsletter__close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.futurion-newsletter__form {
  margin: 0;
}

.futurion-newsletter__title {
  margin: 0 34px 12px 0;
  color: var(--futurion-green);
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
}

.futurion-newsletter__title span {
  color: var(--futurion-green);
  font-weight: 500;
}

.futurion-newsletter__fields {
  display: grid;
  gap: 6px;
}

.futurion-newsletter__fields input {
  width: 100%;
  height: 39px;
  padding: 8px 14px;
  border: 1px solid rgba(63, 42, 115, 0.2);
  border-radius: 4px;
  color: var(--futurion-purple);
  background: #f2eef3;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  box-sizing: border-box;
}

.futurion-newsletter__fields input::placeholder {
  color: rgba(63, 42, 115, 0.78);
  opacity: 1;
}

.futurion-newsletter__consent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  color: var(--futurion-white);
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.futurion-newsletter__consent input {
  appearance: none;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin: 0;
  border: 1px solid rgba(63, 42, 115, 0.2);
  border-radius: 4px;
  background: #f2eef3;
  cursor: pointer;
}

.futurion-newsletter__consent input:checked {
  background:
    linear-gradient(var(--futurion-green), var(--futurion-green)) center / 10px 10px no-repeat,
    #f2eef3;
}

.futurion-newsletter__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  padding: 10px 22px;
  border: 1px solid var(--futurion-green);
  border-radius: 999px;
  color: var(--futurion-green);
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

/*
 * Deliberately green rather than the orange every other hover/focus state
 * uses: this button sits inside the purple panel, where an orange fill
 * fought both the panel and the green outline it grows out of.
 */
.futurion-newsletter__submit:hover,
.futurion-newsletter__submit:focus-visible {
  color: var(--futurion-purple);
  background: var(--futurion-green);
}

/*
 * Honeypot. Moved out of sight rather than display:none, which some bots skip
 * over -- the point is that a script fills it in and gives itself away.
 */
.futurion-newsletter__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.futurion-newsletter__form.is-sending .futurion-newsletter__submit {
  opacity: 0.6;
  pointer-events: none;
}

/*
 * The status paragraph is always in the DOM so screen readers are watching it
 * before there is anything to announce; it only takes up space once filled.
 */
.futurion-newsletter__status {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
}

.futurion-newsletter__status:empty {
  display: none;
}

.futurion-newsletter__status.is-success {
  margin-top: 12px;
  color: var(--futurion-green);
}

.futurion-newsletter__status.is-error {
  margin-top: 12px;
  color: var(--futurion-yellow);
}

/*
 * Newsletter form, page variant
 * ----------------------------------------------------------------------------
 * The same markup as the floating panel, standing on its own in page content.
 * Everything overridden here is something tuned for the purple panel that has
 * no contrast on cream: the consent line and submit button were white and
 * orange respectively. The inputs are left alone -- they were already a light
 * field on a light fill and read correctly either way.
 */

.futurion-newsletter-block {
  margin: 2.2em 0;
}

.futurion-newsletter__form--page {
  max-width: 620px;
  padding: 28px 30px 30px;
  border: 1px solid rgba(66, 44, 110, 0.16);
  border-radius: 10px;
  background: var(--futurion-white);
  box-sizing: border-box;
}

.futurion-newsletter__form--page .futurion-newsletter__fields {
  gap: 12px;
}

/*
 * Two up once there is room: four stacked full-width inputs read as a long
 * form, which is a lot of visual weight for four short fields.
 */
@media (min-width: 620px) {
  .futurion-newsletter__form--page .futurion-newsletter__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.futurion-newsletter__form--page .futurion-newsletter__fields input {
  height: 46px;
  padding: 12px 16px;
  font-size: 15px;
}

.futurion-newsletter__form--page .futurion-newsletter__consent {
  margin-top: 18px;
  color: var(--futurion-purple);
  font-size: 14px;
}

.futurion-newsletter__form--page .futurion-newsletter__submit {
  width: auto;
  min-height: 46px;
  margin-top: 20px;
  padding: 13px 34px 11px;
  border-color: var(--futurion-purple);
  color: var(--futurion-purple);
  font-size: 15px;
}

.futurion-newsletter__form--page .futurion-newsletter__submit:hover,
.futurion-newsletter__form--page .futurion-newsletter__submit:focus-visible {
  color: var(--futurion-white);
  background: var(--futurion-purple);
}

.futurion-newsletter__form--page .futurion-newsletter__status {
  font-size: 14px;
  line-height: 1.35;
}

.futurion-newsletter__form--page .futurion-newsletter__status.is-success {
  color: var(--futurion-success);
}

.futurion-newsletter__form--page .futurion-newsletter__status.is-error {
  color: var(--futurion-error);
}

/*
 * Footnote for the legal text, styled small so it reads as fine print rather
 * than body copy competing with the fields above it.
 */
.futurion-newsletter__footnote {
  margin: 14px 0 0;
  color: rgba(66, 44, 110, 0.65);
  font-size: 11px;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .futurion-newsletter {
    right: var(--grid-gutter);
    bottom: 28px;
    max-width: calc(100vw - (var(--grid-gutter) * 2));
  }

  .futurion-newsletter__trigger {
    min-height: 50px;
    padding: 11px 15px 11px 24px;
  }

  .futurion-newsletter__brand,
  .futurion-newsletter__trigger-text {
    font-size: 18px;
  }

  .futurion-newsletter__trigger:hover .futurion-newsletter__trigger-text,
  .futurion-newsletter__trigger:focus-visible .futurion-newsletter__trigger-text {
    max-width: 150px;
    margin-left: 8px;
  }

  .futurion-newsletter__arrow {
    width: 36px;
    height: 36px;
    margin-left: 18px;
    font-size: 30px;
  }

  .futurion-newsletter__panel {
    width: 330px;
  }
}

@media (min-width: 1100px) {
  .futurion-newsletter {
    right: var(--grid-gutter);
    bottom: 34px;
  }

  .futurion-newsletter__trigger {
    min-height: 54px;
    padding: 12px 16px 12px 28px;
  }

  .futurion-newsletter__brand,
  .futurion-newsletter__trigger-text {
    font-size: 20px;
  }

  .futurion-newsletter__trigger:hover .futurion-newsletter__trigger-text,
  .futurion-newsletter__trigger:focus-visible .futurion-newsletter__trigger-text {
    max-width: 170px;
    margin-left: 8px;
  }

  .futurion-newsletter__arrow {
    width: 38px;
    height: 38px;
    margin-left: 20px;
    font-size: 32px;
  }

  .futurion-newsletter__panel {
    width: 330px;
  }
}

@media (min-width: 1440px) {
  .futurion-newsletter {
    right: var(--grid-gutter);
    bottom: 38px;
  }

  .futurion-newsletter__trigger {
    min-height: 56px;
    padding-left: 30px;
    padding-right: 16px;
  }

  .futurion-newsletter__brand,
  .futurion-newsletter__trigger-text {
    font-size: 21px;
  }

  .futurion-newsletter__arrow {
    width: 38px;
    height: 38px;
    margin-left: 22px;
    font-size: 32px;
  }
}

/**** FOCUS AREAS MODULE ****/

.futurion-focus-areas {
	position: relative;
	z-index: 2;
	overflow: hidden;
	isolation: isolate;
}

.futurion-focus-card {
	--focus-card-collapsed-height: 145px;
	--focus-card-expanded-height: 1200px;

	position: relative;
	max-height: var(--focus-card-collapsed-height);
	overflow: hidden;
	color: var(--futurion-purple);
	background: #bba5ff;
	transition: max-height 0.85s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: max-height;
}

.futurion-focus-card.is-visible {
	max-height: var(--focus-card-expanded-height);
}

/*
 * Two blobs per band, sized larger than the band and anchored mostly outside
 * it, so what crosses the band is one sweeping edge rather than a whole shape
 * parked inside. That placement is the point — a blob scaled to fit reads as a
 * disc, and a blob centred on the band reads as a flat wash with one diagonal
 * edge. Both were tried.
 *
 * Both axes are pinned to the band: width as a percentage, height off
 * --focus-card-shape-height. Sizing by width plus aspect-ratio instead makes
 * the height track the viewport while the band tracks its content, so the
 * composition drifts between breakpoints.
 *
 * That var is used rather than the card box because the card animates its
 * max-height; a percentage would stretch the shapes open during the fold-out
 * instead of uncovering them.
 */
.futurion-focus-card::before,
.futurion-focus-card::after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
	opacity: 0.16;
	background: #fff;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transition: opacity 0.9s ease;
}

.futurion-focus-card.is-visible::before,
.futurion-focus-card.is-visible::after {
	opacity: 0.2;
}

/*
 * Rises from below: a positive top offset pushes it off the bottom edge, so
 * the curve that shows inside the band is its top.
 *
 * Both shapes are placed with a free `left` rather than a left/right anchor,
 * so they float across the band instead of being tucked into its ends. Widths
 * here must match those futurion_focus_shape_vars() assumes when it spaces the
 * pair apart.
 */
.futurion-focus-card::before {
	left: var(--focus-x-a, 10%);
	top: calc(var(--focus-card-shape-height, 420px) * var(--focus-y-a, 0.3));
	width: 40%;
	height: calc(var(--focus-card-shape-height, 420px) * 1.1);
	-webkit-mask-image: var(--focus-image-a);
	mask-image: var(--focus-image-a);
	transform: scaleX(var(--focus-flip-a, 1));
}

/* Drops in from above, mirroring the first: negative offset, overhangs the top. */
.futurion-focus-card::after {
	left: var(--focus-x-b, 60%);
	top: calc(var(--focus-card-shape-height, 420px) * var(--focus-y-b, -0.44));
	width: 32%;
	height: calc(var(--focus-card-shape-height, 420px) * 0.95);
	-webkit-mask-image: var(--focus-image-b);
	mask-image: var(--focus-image-b);
	transform: scaleX(var(--focus-flip-b, 1));
}

/* No mask means a bare white rectangle, so hide until PHP supplies one. */
.futurion-focus-card:not([style*="--focus-image"])::before,
.futurion-focus-card:not([style*="--focus-image"])::after {
	display: none;
}

/*
 * Below the 850px layout switch the band stacks and becomes several times
 * taller than it is wide. A height driven off --focus-card-shape-height then
 * stretches the mask into a tall vertical smear, so here the height comes from
 * the width via aspect-ratio — the same way the puff and calendar blobs are
 * built — and the pair is spread down the band instead of overhanging it.
 *
 * Widths and anchors are set so the two just meet at 56% and never overlap,
 * which matters on a short band where --focus-t-a and --focus-t-b land close.
 */
@media (max-width: 849px) {

	.futurion-focus-card::before {
		right: auto;
		left: -16%;
		top: calc(var(--focus-card-shape-height, 420px) * var(--focus-t-a, 0.08));
		width: 72%;
		height: auto;
		aspect-ratio: 1 / 0.92;
	}

	.futurion-focus-card::after {
		left: auto;
		right: -14%;
		top: calc(var(--focus-card-shape-height, 420px) * var(--focus-t-b, 0.62));
		width: 58%;
		height: auto;
		aspect-ratio: 1 / 0.95;
	}
}

.futurion-focus-card--purple,
.futurion-focus-tile--purple {
	background: #b9a4ff;
}

.futurion-focus-card--pink,
.futurion-focus-tile--pink {
	background: var(--futurion-pink);
}

.futurion-focus-card--yellow,
.futurion-focus-tile--yellow {
	background: var(--futurion-yellow);
}

/*
 * Genuinely green again, not a renamed orange: this is a static background
 * colour option, one of the four an editor can pick for a card, not a hover
 * effect -- so it was out of scope for the swap and is reverted here.
 */
.futurion-focus-card--green,
.futurion-focus-tile--green {
	background: var(--futurion-green);
}

.futurion-focus-card--blue,
.futurion-focus-tile--blue {
	background: var(--futurion-blue);
}

.futurion-focus-card__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding-top: 30px;
	padding-bottom: 23px;
}

.futurion-focus-card__content {
	min-width: 0;
}

/*
 * Deliberately not .futurion-module__eyebrow. The shared eyebrow runs 20/27/28/
 * 29/30px, which is set for modules that lead with it; here it sits directly
 * above a very large title and reads as a second heading rather than a label,
 * so it keeps the same role and colour at a consistently smaller scale.
 */
.futurion-focus-card__label {
	margin-bottom: 20px;
	color: var(--futurion-purple);
	font-size: 16px;
	line-height: 1;
	font-weight: 400;
}

.futurion-focus-card__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	color: var(--futurion-purple);
	font-size: 40px;
	line-height: 0.96;
	font-weight: 400;
	letter-spacing: -0.025em;
}

.futurion-focus-card__dash {
	display: block;
}

.futurion-focus-card__body-row {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 28px;
}

.futurion-focus-card__text {
	color: var(--futurion-purple);
	font-size: 17px;
	line-height: 1.2;
	font-weight: 400;
}

.futurion-focus-card__text p {
	margin: 0;
}

.futurion-focus-card__text p + p {
	margin-top: 1em;
}

.futurion-focus-card__links {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.futurion-focus-card__links li {
	margin: 0 0 7px;
}

.futurion-focus-card__links a {
	position: relative;
	z-index: 0;
	display: inline-block;
	color: var(--futurion-purple);
	font-size: 16px;
	line-height: 1.15;
	font-weight: 500;
	text-decoration: none;
}

.futurion-focus-card__links a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 1px;
	left: 0;
	z-index: -1;
	height: 5px;
	background: rgba(63, 42, 115, 0.35);
	transition: background-color 200ms ease;
	pointer-events: none;
}

.futurion-focus-card__links a:focus-visible::after {
	background: var(--futurion-orange);
}

.futurion-focus-card__button {
	display: inline-flex;
	align-items: end;
	gap: 16px;
	margin-top: 32px;
	color: var(--futurion-purple);
	font-size: 13px;
	line-height: 1;
	font-weight: 500;
	text-decoration: none;
}

.futurion-focus-card__button-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	transition: transform 0.2s ease;
}

.futurion-focus-card__button-icon svg {
	width: 100%;
	height: 100%;
}

.futurion-focus-card__button-icon svg path {
	fill: var(--futurion-purple);
}

.futurion-focus-card__media {
	width: 100%;
	margin-top: 28px;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 16 / 10;
}

.futurion-focus-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

  .futurion-focus-card__button .futurion-focus-card__button-text {
    position: relative;
  }
	.futurion-focus-card__button .futurion-focus-card__button-text::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 1px;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 4px;
		background: var(--futurion-orange);
		opacity: 0;
		transition: opacity 0.2s ease;
		pointer-events: none;
	}

@media (hover: hover) {
	.futurion-focus-card__links a:hover::after {
		background: var(--futurion-orange);
	}
	.futurion-focus-card__button:hover .futurion-focus-card__button-text::after {
    opacity: 1;
    
	}

	.futurion-focus-card__button:hover .futurion-focus-card__button-icon {
		transform: translate(4px, 4px);
	}
}

.futurion-focus-card__button:focus-visible .futurion-focus-card__button-icon {
	transform: translate(4px, 4px);
}
.futurion-focus-card__button:focus-visible .futurion-focus-card__button-text::after {
		opacity: 1;
}

/* Tablet */
@media (min-width: 850px) {

	.futurion-focus-card {
		--focus-card-collapsed-height: 155px;
	}

	.futurion-focus-card__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 360px;
		column-gap: 48px;
		align-items: center;
		padding-bottom: 30px;
	}

	.futurion-focus-card__label {
		font-size: 18px;
	}

	.futurion-focus-card__title {
		display: block;
		font-size: 52px;
		line-height: 0.95;
	}

	.futurion-focus-card__dash {
		display: inline;
	}

	.futurion-focus-card__body-row {
		display: grid;
		grid-template-columns: minmax(0, 380px) 80px;
		column-gap: 50px;
		align-items: start;
		margin-top: 24px;
	}

	.futurion-focus-card__links {
		display: block;
	}

	/*
	 * The inner grid centres its columns, which is what the image wants but not
	 * the text: with the image column taller than the copy, the whole text block
	 * floated in the middle, so cards with different title lengths put their
	 * eyebrow and their "Se innehåll" link at different heights next to each
	 * other. The content column now fills the row height and distributes its own
	 * children, which pins the eyebrow to the top and the link to the bottom.
	 */
	.futurion-focus-card__content {
		display: flex;
		flex-direction: column;
		align-self: stretch;
	}

	.futurion-focus-card__button {
		/*
		 * align-self keeps the link at its natural width inside a stretching
		 * column, and the gap above it is padding rather than margin so that
		 * margin-top: auto can take the free space without eating the spacing
		 * on cards that have none to give.
		 */
		align-self: flex-start;
		gap: 17px;
		margin-top: auto;
		padding-top: 34px;
		font-size: 14px;
	}

	.futurion-focus-card__button-icon {
		width: 24px;
		height: 24px;
	}

	.futurion-focus-card__media {
		margin-top: 0;
	}
}


/* Desktop */
@media (min-width: 1100px) {

	.futurion-focus-card {
		--focus-card-collapsed-height: 160px;
	}

	.futurion-focus-card__inner {
		grid-template-columns: minmax(0, 1fr) 470px;
		column-gap: 80px;
	}

	/*
	 * Grows with the title rather than stepping: a linear ramp from 20px at
	 * 1100px to its 25px ceiling at 1700px, which is where the title reaches
	 * its own maximum of 90px. Both stop growing at the same width, so the
	 * label keeps a constant relationship to the heading above 1700 instead of
	 * drifting smaller as the title carries on.
	 */
	.futurion-focus-card__label {
		font-size: clamp(20px, calc(20px + (100vw - 1100px) * 0.00833), 25px);
	}

	/*
	 * From here the layout becomes two columns with a fixed-width image beside
	 * the text, so the content column is *narrower* at 1100px (454px) than it
	 * was at 1024px (520px) while the type was stepping up. 62px in 454px broke
	 * the title over two lines and read as oversized until about 1300px. Sizing
	 * it fluidly against the viewport tracks the column instead of fighting it,
	 * and it still arrives at the intended 62px by the time the band ends.
	 */
	.futurion-focus-card__title {
		gap: 24px;
		font-size: clamp(44px, 4.3vw, 62px);
	}

	.futurion-focus-card__body-row {
		grid-template-columns: minmax(0, 360px) 130px;
		column-gap: 76px;
		margin-top: 24px;
	}

	.futurion-focus-card__button {
		padding-top: 38px;
		font-size: 15px;
	}

	.futurion-focus-card__media {
		border-radius: 15px;
	}
}


/* Large desktop */
@media (min-width: 1440px) {

	.futurion-focus-card {
		--focus-card-collapsed-height: 185px;
	}

	.futurion-focus-card__inner {
		grid-template-columns: minmax(0, 1fr) 560px;
		column-gap: 110px;
		padding-bottom: 50px;
	}

	.futurion-focus-card__content {
		max-width: 900px;
	}

	.futurion-focus-card__label {
		margin-bottom: 40px;
	}

	/* The image column widens again here, so the same fluid treatment applies. */
	.futurion-focus-card__title {
		gap: 28px;
		font-size: clamp(60px, 4.75vw, 76px);
	}

	.futurion-focus-card__body-row {
		grid-template-columns: minmax(0, 1fr) 150px;
		column-gap: 100px;
		margin-top: 26px;
	}

	.futurion-focus-card__text {
		font-size: 20px;
	}

	.futurion-focus-card__links li {
		margin: 0 0 12px;
	}

	.futurion-focus-card__links a {
		font-size: 20px;
	}

	.futurion-focus-card__button {
		padding-top: 42px;
		font-size: 17px;
	}
}


/* Extra large desktop */
@media (min-width: 1700px) {

	.futurion-focus-card {
		--focus-card-collapsed-height: 190px;
	}

	.futurion-focus-card__inner {
		grid-template-columns: minmax(0, 1fr) 620px;
		column-gap: 140px;
	}

	.futurion-focus-card__content {
		max-width: 1040px;
	}

	.futurion-focus-card__title {
		gap: 32px;
		font-size: 90px;
	}

	.futurion-focus-card__body-row {
		grid-template-columns: minmax(0, 500px) 170px;
		column-gap: 120px;
		margin-top: 28px;
	}

	.futurion-focus-card__text {
		font-size: 20px;
	}

	.futurion-focus-card__button {
		gap: 28px;
		padding-top: 46px;
		font-size: 20px;
	}

	.futurion-focus-card__button-icon {
		width: 38px;
		height: 38px;
	}
}


@media (prefers-reduced-motion: reduce) {

	.futurion-focus-card,
	.futurion-focus-card::before,
	.futurion-focus-card::after {
		transition-duration: 0.01ms;
	}

	.futurion-focus-card__links a::after,
	.futurion-focus-card__button-icon {
		transition: none;
	}
}

/**** EVENTS CAROUSEL MODULE ****/

.futurion-events-carousel {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #fff8e9;
  color: var(--futurion-purple);
}

.futurion-events-carousel__inner {
  padding-top: 62px;
  padding-bottom: 28px;
  padding-right: 0;
}

.futurion-events-carousel__heading {
  margin: 0 0 28px;
  padding-right: var(--grid-gutter);
}

.futurion-events-carousel__slider {
  width: 100%;
  overflow: visible;
}

.futurion-events-carousel__track {
  align-items: stretch;
}

.swiper-slide.futurion-event-card {
  flex: 0 0 auto;
  width: 280px;
  height: 370px;
}

.futurion-event-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 18px 24px 24px;
  overflow: hidden;
  border-radius: 5px;
  color: var(--futurion-purple);
  background: #f5eddc;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.2s ease;
}
.futurion-event-card__link:hover {
  background: var(--futurion-yellow);
}

/*
 * Roughly card-width and square, anchored bottom-left, so it bleeds past two
 * edges and leaves the top of the card clear for the thumbnail. Vertical
 * drift is biased upward so some cards get the blob high instead of low.
 */
.futurion-event-card__background {
  top: auto;
  right: auto;
  bottom: -18%;
  left: -24%;
  width: 104%;
  height: auto;
  aspect-ratio: 1 / 1;
  z-index: 1;
  opacity: 0.5;
  --blob-fill:
    linear-gradient(
      150deg,
      rgba(242, 195, 211, 0.85) 0%,
      rgba(226, 206, 240, 0.55) 100%
    );
}

/*
 * flex-shrink is the whole fix here. The card is a fixed-height flex column, so
 * a four-line title overflows it and every flex item gives up height to
 * compensate — the thumbnail included, which lost a quarter of its height and
 * came out at ratio 1.15 against the 0.85 it declares. Refusing to shrink keeps
 * the aspect ratio honest and pushes the overflow onto the text instead, which
 * is the trade wanted: a title that runs lower reads fine, a squashed image
 * does not.
 */
.futurion-event-card__image-wrap {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  align-self: flex-end;
  width: 110px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(75, 54, 118, 0.08);
  aspect-ratio: 17 / 20;
}

.futurion-event-card__image-wrap--placeholder {
  background:
    radial-gradient(
      circle at 28% 72%,
      rgba(245, 188, 213, 0.56) 0%,
      rgba(245, 188, 213, 0) 58%
    ),
    linear-gradient(
      145deg,
      rgba(94, 114, 237, 0.16),
      rgba(75, 54, 118, 0.08)
    );
}

.futurion-event-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.futurion-event-card__content {
  position: relative;
  z-index: 2;
  padding-top: 16px;
}

.futurion-event-card__date {
  margin-bottom: 16px;
  color: var(--futurion-purple);
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
}

/*
 * Capped at four lines. Now that the thumbnail refuses to shrink, an
 * over-long title is the only thing left that can overflow a fixed-height card,
 * and because the card clips its overflow that loss lands on the footer — the
 * "EVENT" label and arrow disappear with no warning. Truncating the title is
 * the visible, recoverable failure; losing the footer is not.
 */
.futurion-event-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  max-width: 96%;
  color: var(--futurion-purple);
  font-size: 27px;
  line-height: 1.08;
  font-weight: 500;
}

.futurion-event-card__footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: auto;
  /*
   * Only a minimum: margin-top:auto already parks the footer at the bottom
   * whenever there is spare room, so this value never adds space to a short
   * card — it just caps how close a long title may come.
   */
  padding-top: 20px;
}

.futurion-event-card__type {
  color: var(--futurion-blue);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  padding-bottom: 3px;
}

.futurion-event-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  transition: transform 0.2s ease;
}

.futurion-event-card__arrow svg {
  display: block;
  width: 22px;
  height: 22px;
}

.futurion-event-card__arrow svg path {
  fill: var(--futurion-purple);
}

.futurion-event-card__link:hover .futurion-event-card__arrow,
.futurion-event-card__link:focus-visible .futurion-event-card__arrow {
  transform: translate(4px, 4px);
}

@media (min-width: 768px) {
  .futurion-events-carousel__inner {
    padding-top: 74px;
    padding-bottom: 54px;
  }

  .futurion-events-carousel__heading {
    margin-bottom: 30px;
  }

  .swiper-slide.futurion-event-card {
    width: 320px;
    height: 400px;
  }

  .futurion-event-card__link {
    padding: 18px 24px 24px;
  }

  .futurion-event-card__image-wrap {
    width: 115px;
  }

  .futurion-event-card__date {
    margin-bottom: 12px;
    font-size: 18px;
  }

  .futurion-event-card__title {
    font-size: 30px;
  }

  .futurion-event-card__footer {
    padding-top: 22px;
  }

  .futurion-event-card__type {
    font-size: 14px;
  }
}

@media (min-width: 1100px) {
  .futurion-events-carousel__inner {
    padding-top: 94px;
    padding-bottom: 68px;
  }

  .futurion-events-carousel__heading {
    margin-bottom: 30px;
  }

  /*
   * The card used to take its full 400x450 the moment this breakpoint opened
   * and hold it all the way to 1920, so it was widest *relative to the row* at
   * the narrowest end: 40% of the carousel at 1100px against 30% at 1440 and
   * 22% at 1920, which left barely two and a half cards in view. Everything
   * that sets the card's bulk now ramps from a smaller start at 1100 to the
   * existing 1440 values, so the step lands where the room appears.
   */
  .swiper-slide.futurion-event-card {
    width: clamp(350px, calc(350px + (100vw - 1100px) * 0.147), 400px);
    height: clamp(420px, calc(420px + (100vw - 1100px) * 0.0882), 450px);
  }

  .futurion-event-card__link {
    padding: 20px clamp(24px, calc(24px + (100vw - 1100px) * 0.0235), 32px) 28px;
  }

  .futurion-event-card__image-wrap {
    width: clamp(108px, calc(108px + (100vw - 1100px) * 0.0559), 127px);
  }

  .futurion-event-card__date {
    margin-bottom: 12px;
  }

  .futurion-event-card__title {
    font-size: clamp(30px, calc(30px + (100vw - 1100px) * 0.0147), 35px);
  }

  /*
   * The card gains height here, so the title can afford a fourth line; below
   * this it cannot, and a fourth line pushes the footer out of a card that
   * clips its overflow.
   */
  .futurion-event-card__title {
    -webkit-line-clamp: 4;
  }

  .futurion-event-card__footer {
    padding-top: clamp(20px, calc(20px + (100vw - 1100px) * 0.0029), 21px);
  }

  .futurion-event-card__type {
    font-size: clamp(15px, calc(15px + (100vw - 1100px) * 0.00882), 18px);
  }

  .futurion-event-card__arrow {
    width: 32px;
    height: 32px;
  }

  .futurion-event-card__arrow svg {
    width: 24px;
    height: 24px;
  }
}

@media (min-width: 1440px) {
  .futurion-events-carousel__inner {
    padding-top: 110px;
    padding-bottom: 82px;
  }

  .futurion-events-carousel__heading {
    margin-bottom: 34px;
  }

  .swiper-slide.futurion-event-card {
    width: 400px;
    height: 450px;
  }

  .futurion-event-card__link {
    padding: 20px 32px 28px;
  }

  .futurion-event-card__image-wrap {
    width: 127px;
  }

  .futurion-event-card__date {
    font-size: 20px;
  }

  .futurion-event-card__title {
    font-size: 35px;
  }
  .futurion-event-card__type {
    font-size: 18px;
  }
}

@media (min-width: 1700px) {

  .swiper-slide.futurion-event-card {
    width: 400px;
    height: 450px;
  }

}

.futurion-events-carousel__slider-shell {
  position: relative;
}

/*
 * Same rounded-square, pseudo-element arrow as .futurion-board__navigation
 * and .futurion-rapport__navigation. No custom property needed for the
 * vertical centre here: unlike those two, the card's own height is a fixed
 * CSS value at every breakpoint (see .swiper-slide.futurion-event-card
 * above), so centring on the shell itself already lands on the card.
 */
.futurion-events-carousel__navigation {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  color: var(--futurion-white);
  background: rgba(75, 54, 118, 0.55);
  backdrop-filter: blur(3px);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    opacity 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.futurion-events-carousel__navigation--previous {
  left: 12px;
}

.futurion-events-carousel__navigation--next {
  right: 12px;
}

.futurion-events-carousel__navigation span {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
}

.futurion-events-carousel__navigation span::before,
.futurion-events-carousel__navigation span::after {
  content: "";
  position: absolute;
}

.futurion-events-carousel__navigation span::before {
  top: 5px;
  left: 0;
  width: 12px;
  height: 1px;
  background: currentColor;
}

.futurion-events-carousel__navigation span::after {
  top: 2px;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.futurion-events-carousel__navigation--previous span {
  transform: rotate(180deg);
}

.futurion-events-carousel__navigation.swiper-button-disabled,
.futurion-events-carousel__navigation.swiper-button-lock {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.futurion-events-carousel__navigation:focus-visible {
  outline: 2px solid var(--futurion-blue);
  outline-offset: 3px;
}

@media (hover: hover) {
  .futurion-events-carousel__navigation:hover,
  .futurion-events-carousel__navigation:focus-visible {
    border-color: var(--futurion-white);
    background: rgba(75, 54, 118, 0.75);
  }
}

@media (min-width: 1024px) {
  .futurion-events-carousel__navigation--previous {
    left: 20px;
  }

  .futurion-events-carousel__navigation--next {
    right: 20px;
  }
}


/**** FOOTER ****/

.site-footer {
  position: relative;
  z-index: 2;
  background: var(--futurion-purple);
  color: var(--futurion-white);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 72px;
  padding-top: 48px;
  padding-bottom: 34px;
}

.site-footer__brand {
  grid-column: 1 / 2;
}

.site-footer__logo {
  display: block;
  width: 140px;
  max-width: 100%;
  color: var(--futurion-white);
  line-height: 0;
  text-decoration: none;
}

.site-footer__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer__logo svg path,
.site-footer__logo svg polygon,
.site-footer__logo svg rect,
.site-footer__logo svg circle {
  fill: currentColor;
}

.site-footer__tagline {
  max-width: 180px;
  margin-top: 18px;
  color: var(--futurion-white);
  font-size: 12px;
  line-height: 1.08;
  font-weight: 500;
  text-transform: uppercase;
}

.site-footer__content {
  grid-column: 2 / 3;
  display: grid;
  gap: 40px;
  align-content: start;
}

.site-footer__column,
.site-footer__menu,
.site-footer__social {
  color: var(--futurion-white);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}

.site-footer__column p {
  margin: 0;
}

.site-footer__column p + p {
  margin-top: 1em;
}

.site-footer__column a,
.site-footer__menu a,
.site-footer__social a {
  position: relative;
  z-index: 0;
  color: var(--futurion-white);
  text-decoration: none;
}

.site-footer__column a::after,
.site-footer__menu a::after,
.site-footer__social a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 3px;
  background: var(--futurion-orange);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.site-footer__column a:hover::after,
.site-footer__column a:focus-visible::after,
.site-footer__menu a:hover::after,
.site-footer__menu a:focus-visible::after,
.site-footer__social a:hover::after,
.site-footer__social a:focus-visible::after {
  opacity: 1;
}

.site-footer__menu-list,
.site-footer__social-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__menu-list li,
.site-footer__social-list li {
  margin: 0;
}

.site-footer__bottom {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  align-items: end;
}

.site-footer__copyright,
.site-footer__credit {
  color: rgba(255, 255, 255, 0.76);
  font-size: 9px;
  line-height: 1.1;
  font-weight: 400;
  text-decoration: none;
}

.site-footer__credit {
  position: relative;
  z-index: 0;
  justify-self: start;
}

.site-footer__credit::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 2px;
  background: var(--futurion-orange);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.site-footer__credit:hover::after,
.site-footer__credit:focus-visible::after {
  opacity: 1;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    column-gap: 54px;
    row-gap: 100px;
    padding-top: 64px;
    padding-bottom: 42px;
  }

  .site-footer__logo {
    width: 210px;
  }

  .site-footer__tagline {
    max-width: 240px;
    margin-top: 22px;
    font-size: 16px;
  }

  .site-footer__content {
    gap: 36px;
  }


  .site-footer__copyright,
  .site-footer__credit {
    font-size: 15px;
  }
}

@media (min-width: 1100px) {
  .site-footer__inner {
    grid-template-columns: 33% 16% 22% 1fr;
    column-gap: 42px;
    padding-top: 52px;
    padding-bottom: 42px;
  }

  .site-footer__brand {
    grid-column: 1 / 2;
  }

  .site-footer__logo {
    width: 178px;
  }

  .site-footer__tagline {
    max-width: unset;
    line-height: 1;
  }

  .site-footer__content {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: 195px 195px 1fr;
    column-gap: 54px;
    align-content: start;
  }

  .site-footer__column,
  .site-footer__menu,
  .site-footer__social {
    font-size: 17px;
    line-height: 1.25;
  }

  .site-footer__menu,
  .site-footer__social {
    grid-column: 3;
    justify-self: end;
    min-width: 150px;
  }

  .site-footer__menu {
    grid-row: 1;
  }

  .site-footer__social {
    grid-row: 2;
  }

  .site-footer__bottom {
    grid-column: 1 / -1;
    grid-template-columns: 33% 16% 22% 1fr;
    column-gap: 42px;
  }

  .site-footer__copyright {
    grid-column: 1 / 2;
  }

  .site-footer__credit {
    grid-column: 4 / 5;
    justify-self: start;
  }

  .site-footer__column,
  .site-footer__menu,
  .site-footer__social {
    font-size: 20px;
  }

}

@media (min-width: 1440px) {
  .site-footer__inner {
    grid-template-columns: 34% 16% 22% 1fr;
    column-gap: 48px;
    padding-top: 52px;
    padding-bottom: 42px;
  }

  .site-footer__content {
    grid-template-columns: minmax(180px, 250px) minmax(220px, 300px) minmax(150px, 1fr) auto;
    column-gap: clamp(32px, 3vw, 64px);
  }

  .site-footer__menu {
    grid-column: 3;
  }

  .site-footer__social {
    grid-column: 4;
  }

  .site-footer__menu,
  .site-footer__social {
    grid-row: 1;
  }


  .site-footer__bottom {
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
  }
}

/**** IMAGE PUFF MODULE ****/

.futurion-image-puff {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: #fff8e9;
  color: var(--futurion-purple);
}

.futurion-image-puff__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 44px;
  padding-bottom: 44px;
}

.futurion-image-puff__content {
  width: 100%;
  max-width: 790px;
}

.futurion-image-puff__vignette {
  margin-bottom: 12px;
}

.futurion-image-puff__title {
  margin: 0;
  color: var(--futurion-purple);
  font-size: 31px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.futurion-image-puff__description {
  margin-top: 16px;
  color: var(--futurion-purple);
  font-size: 17px;
  line-height: 1.24;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.futurion-image-puff__description p {
  margin: 0;
}

.futurion-image-puff__description p + p {
  margin-top: 1em;
}

.futurion-image-puff__button {
  margin-top: 34px;
}

.futurion-image-puff__media {
  width: 100%;
  overflow: hidden;
  border-radius: 9px;
  aspect-ratio: 16 / 11;
}

.futurion-image-puff__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {

  .futurion-image-puff__vignette {
    margin-bottom: 14px;
  }

  .futurion-image-puff__title {
    font-size: 36px;
  }

  .futurion-image-puff__description {
    margin-top: 18px;
    font-size: 18px;
  }

  .futurion-image-puff__media {
    border-radius: 8px;
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 1100px) {
  .futurion-image-puff__inner {
        display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    column-gap: 90px;
    padding-top: 58px;
    padding-bottom: 58px;
  }


  .futurion-image-puff__title {
    font-size: 38px;
  }

  .futurion-image-puff__description {
    font-size: 19px;
  }

  .futurion-image-puff__button {
    margin-top: 46px;
  }
}

@media (min-width: 1440px) {
  .futurion-image-puff__inner {
    grid-template-columns: minmax(0, 1fr) 540px;
    column-gap: 120px;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .futurion-image-puff__title {
    font-size: 40px;
  }

  .futurion-image-puff__description {
    font-size: 20px;
    margin-top: 30px;
  }

  .futurion-image-puff__button {
    margin-top: 48px;
  }
}

@media (min-width: 1700px) {
  .futurion-image-puff__inner {
    grid-template-columns: minmax(0, 1fr) 580px;
    column-gap: 140px;
    padding-top: 64px;
    padding-bottom: 64px;
  }



}

/**
 * Single Artikel
 * Mobile first.
 */

/*
 * The hero's palette and timing, but re-cut for a bar that is ~20x wider
 * than it is tall. The hero's blobs spend most of their travel on the y
 * axis, which is worth almost nothing here, so these read only the
 * --futurion-hero-*-x variables and pin themselves to the vertical
 * middle: all of the motion lands on the axis you can actually see.
 *
 * Explicit ellipse radii do the rest. Narrow (a third of the animated
 * reach) and much taller than the bar, so each colour is a soft vertical
 * band with a hard-ish horizontal falloff that sweeps end to end and
 * swells as it goes, instead of an all-over wash that merely shifts. The
 * hero's top scrim is dropped for the same reason -- on 75px it just
 * mutes the thing we are trying to make visible.
 */
.futurion-article__colour-bar {
	width: 100%;
	height: 75px;

	/* Faster than the hero: short travel needs more pace to register. */
	--futurion-hero-drift-scale: 0.4;

	background-color: var(--futurion-drift-background-color);
	background-image:
		radial-gradient(ellipse calc(var(--futurion-hero-gold-reach, 68%) * 0.34) 190% at var(--futurion-hero-gold-x, 18%) 50%, rgba(255, 205, 45, 0.92) 0%, rgba(242, 178, 42, 0.5) 46%, rgba(242, 178, 42, 0) 100%),
		radial-gradient(ellipse calc(var(--futurion-hero-pink-reach, 64%) * 0.34) 190% at var(--futurion-hero-pink-x, 82%) 50%, rgba(241, 116, 143, 0.88) 0%, rgba(235, 132, 124, 0.48) 46%, rgba(235, 132, 124, 0) 100%),
		radial-gradient(ellipse calc(var(--futurion-hero-rose-reach, 58%) * 0.34) 190% at var(--futurion-hero-rose-x, 55%) 50%, rgba(199, 110, 145, 0.8) 0%, rgba(199, 110, 145, 0.44) 46%, rgba(199, 110, 145, 0) 100%),
		var(--futurion-drift-base-sweep);
	animation:
		futurion-hero-gold-drift calc(16s * var(--futurion-hero-drift-scale)) ease-in-out infinite,
		futurion-hero-pink-drift calc(22s * var(--futurion-hero-drift-scale)) ease-in-out infinite,
		futurion-hero-rose-drift calc(19s * var(--futurion-hero-drift-scale)) ease-in-out infinite;
}

.futurion-article {
	overflow: hidden;
	background: #fff9e9;
	color: var(--futurion-purple);
}

.futurion-article__article {
	padding-top: 42px;
	padding-bottom: 80px;
}

.futurion-article__layout {
	display: grid;
	grid-template-areas:
		"intro"
		"media"
		"body"
		"details"
		"footer";
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}

.futurion-article__intro {
	grid-area: intro;
	min-width: 0;
}

.futurion-article__eyebrow {
	margin-bottom: 14px;
	color: var(--futurion-blue);
	font-size: 12px;
	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
}

.futurion-article__eyebrow-link {
	color: inherit;
	text-decoration: none;
}

.futurion-article__eyebrow-link:hover,
.futurion-article__eyebrow-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.futurion-article__title {
	max-width: 720px;
	margin: 0;
	color: var(--futurion-purple);
	font-size: clamp(34px, 10vw, 48px);
	line-height: 0.98;
	font-weight: 500;
}

.futurion-article__date {
	display: block;
	margin-top: 12px;
	color: var(--futurion-purple);
	font-size: 9px;
	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
}

/* Lead paragraph. Runs about 1.2x body text at every width. */
.futurion-article__ingress {
	margin-bottom: 1.3em;
	border-bottom: 2px solid var(--futurion-blue);
	color: var(--futurion-purple);
	font-size: 17px;
	line-height: 1.2;
	font-weight: 400;
}

/*
 * Quieter lead, set per block from "Mindre ingress".
 *
 * Still above body text -- about 1.1x rather than 1.2x -- so it reads as an
 * intro without competing with the headline above it. Sized in em against
 * .entry-content, which is where the body ramp already lives, so this one
 * declaration tracks every breakpoint instead of restating four of them.
 *
 * The class is doubled to raise specificity: the ramp below sets font-size
 * again inside media queries at equal specificity and later in the file, so a
 * single class here would be overridden from 768px up whatever the toggle said.
 */
.futurion-article__ingress.futurion-article__ingress--compact {
	font-size: 1.1em;
}

.futurion-article__ingress > :first-child {
	margin-top: 0;
}

.futurion-article__ingress > :last-child {
	margin-bottom: 1.3em;
}

.futurion-article__media {
	position: relative;
	grid-area: media;
	min-width: 0;
	margin-top: 32px;
	padding-bottom: 35px;
}

/*
 * Stacked, the article text sits directly under the image, so this blob has to
 * stay close to home. It used to sit at `bottom: 0` — the bottom of the media
 * box, already 35px below the picture — and hang 18% past the right edge; the
 * seeded scale (up to ~1.18) then pushed its painted edge a further ~23-48px
 * out in every direction, which put it over the first heading. Anchoring it
 * just inside the image bottom and trimming the side overhang keeps it behind
 * the picture with only a sliver showing, and leaves 17-42px of clear space
 * above the text from 390px up to 999px.
 *
 * The aside layout from 1000px redefines both values; it has a whole empty
 * column to spill into and is not affected by this.
 */
.futurion-article__media::before,
.futurion-article__media::after {
	right: -8%;
	bottom: 45px;
	width: 88%;
	aspect-ratio: 1 / 0.85;
	--blob-fill:
		linear-gradient(
			135deg,
			rgba(197, 229, 224, 0.86) 0%,
			rgba(219, 190, 240, 0.9) 100%
		);
}

/*
 * The same faint second copy the page media uses: an identical blob laid
 * over the figure instead of behind it, so the shape reads as continuing
 * through the photo rather than stopping at its edge. Both pseudo-elements
 * pull the same --blob-* properties off the parent, so they stay the same
 * silhouette and stay registered with each other with no placement repeated.
 */
.futurion-article__media::after {
	z-index: 2;
	opacity: 0.12;
}

.futurion-article__figure {
	position: relative;
	z-index: 1;
	margin: 0;
}

.futurion-article__image-wrap {
	overflow: hidden;
	border-radius: 5px;
	aspect-ratio: 1 / 1;
}

.futurion-article__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.futurion-article__caption {
	margin-top: 14px;
	margin-right: 15px;
	margin-left: 15px;
	color: var(--futurion-purple);
	font-size: 13px;
	line-height: 1.1;
}

.futurion-article__body {
	grid-area: body;
	min-width: 0;
  margin-top: 1.3em;
}

.futurion-article__page-links {
	margin-top: 24px;
}

.futurion-article__footer {
	grid-area: footer;
	min-width: 0;
	margin-top: 34px;
}

.futurion-article__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 10px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--futurion-blue);
}

.futurion-article__terms a {
	color: var(--futurion-purple);
	font-size: 11px;
	line-height: 1.1;
	text-decoration: none;
	text-transform: uppercase;
  font-weight: 500;
}

/*
 * The underline bar lives on this inner span, not the <a> or its
 * pseudo-elements, specifically so the "/" separator (a pseudo-
 * element on the link itself, see below) can never end up inside
 * the box right:0/left:0 measures — putting the bar and the
 * separator on the same element was tried twice and failed both
 * ways round, since the anchor's own content box always includes
 * whichever pseudo-element it's carrying.
 */
.futurion-article__terms-label {
	position: relative;
	z-index: 0;
	display: inline-block;
}

.futurion-article__terms-label::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 1px;
	left: 0;
	z-index: -1;
	height: 3px;
	background: rgba(63, 42, 115, 0.35);
	transition: background-color 200ms ease;
	pointer-events: none;
}

.futurion-article__terms a:focus-visible .futurion-article__terms-label::after {
	background: var(--futurion-orange);
}

.futurion-article__terms a:not(:first-child)::before {
	margin-right: 10px;
	content: "/";
	text-decoration: none;
}

@media (hover: hover) {
	.futurion-article__terms a:hover .futurion-article__terms-label::after {
		background: var(--futurion-orange);
	}
}

/*
 * The related-article card itself is now the shared --archive
 * template/variant (template-parts/archive/article-card.php), same
 * as the archive and search result listings, so it carries no width
 * of its own — it's normally constrained by its parent grid's
 * minmax() track there. This section has no such grid (only ever one
 * related post), so cap it here instead to keep the card from
 * stretching to the full article content-column width.
 */
.futurion-article__related {
	margin-top: 14px;
	max-width: 390px;
}

.futurion-article__related-heading {
	margin: 0 0 12px;
}

@media (min-width: 768px) {
	.futurion-article__article {
		padding-top: 56px;
		padding-bottom: 100px;
	}

	/*
	 * The article stays in one column here. It used to split into text plus a
	 * 280px aside at 768, which left the body only 358px wide — narrower than
	 * the 711px it has at 767 — so the column collapsed just as the screen got
	 * bigger. The split now waits until 1000px, below.
	 */
	.futurion-article__title {
		font-size: 52px;
	}

	.futurion-article__eyebrow {
		font-size: 16px;
	}

	.futurion-article__date {
		font-size: 12px;
	}

	.futurion-article__ingress {
		font-size: 21px;
	}

	.futurion-article__terms a {
		font-size: 12px;
	}

	/*
	 * Stacked, the image is a square that would otherwise run the full width of
	 * the column — 820px tall at a 900px viewport, burying the article under a
	 * screen and a half of picture before a word of it is visible. Capped near
	 * the size it takes as an aside just above this range, so crossing 1000px
	 * reads as the layout moving rather than the image resizing.
	 */
	.futurion-article__media {
		max-width: 460px;
	}
}

@media (min-width: 1000px) {
	.futurion-article__layout {
		grid-template-columns: minmax(0, 1fr) 280px;
		grid-template-areas:
			"intro media"
			"body media"
			"details media"
			"footer media";
		column-gap: 50px;
		align-items: start;
	}

	/*
	 * One ramp across the whole two-column range rather than a step to 60px
	 * that used to land at 1024 and then never move. The text column starts at
	 * roughly 630px here and grows to 740px by 1440, so the title grows with it
	 * and only reaches 60px at 1700.
	 *
	 * The step down from 52px below this breakpoint is intended and mirrors the
	 * layout: just under 1000 the article is a single column around 950px wide,
	 * and at 1000 it splits and the text column drops to about 630px.
	 */
	.futurion-article__title {
		font-size: clamp(48px, calc(48px + (100vw - 1000px) * 0.01714), 60px);
	}

	/* The media becomes an aside here, so it loses its stacked spacing and cap. */
	.futurion-article__media {
		max-width: none;
		margin-top: 0;
		padding-bottom: 75px;
	}

	.futurion-article__media::before,
	.futurion-article__media::after {
		right: -28%;
		/* Back to the media box bottom: as an aside it has empty column to fall into. */
		bottom: 0;
		width: 112%;
	}
}

@media (min-width: 1024px) {
  .futurion-article__related-heading {
	margin: 0 0 17px;
}
	.futurion-article__colour-bar {
		height: 165px;
	}

	.futurion-article__article {
		padding-top: 34px;
		padding-bottom: 115px;
	}

	.futurion-article__eyebrow {
		margin-bottom: 25px;
		font-size: 20px;
	}

	.futurion-article__title {
		max-width: 760px;
		line-height: 0.99;
	}

	.futurion-article__date {
		margin-top: 20px;
		font-size: 15px;
	}

	.futurion-article__ingress {
		font-size: 25px;
	}

	.futurion-article__caption {
		margin-top: 25px;
		margin-right: 30px;
		margin-left: 30px;
		font-size: 18px;
	}

	.futurion-article__footer {
		margin-top: 36px;
	}

	.futurion-article__terms {
		gap: 9px 14px;
		padding-bottom: 18px;
	}

	.futurion-article__terms a {
		font-size: 15px;
	}

	.futurion-article__terms a:not(:first-child)::before {
		margin-right: 14px;
	}

	.futurion-article__related {
		max-width: 430px;
	}
}

/*
 * Declared here rather than beside the entry-content ramp further up: both
 * rules have the same specificity, so the 1024 rule above would win on source
 * order and the ingress would stay at 25px through the whole laptop range.
 */
@media (min-width: 1100px) {
	.futurion-article__ingress {
		font-size: clamp(20.5px, calc(20.5px + (100vw - 1100px) * 0.01125), 25px);
	}
}

/*
 * The wider aside used to arrive at 1024, which made the text column *narrower*
 * than it had been at 1000 (528px against 590px). It now waits until 1200 and
 * the layout is given the extra width it needs, so the column only ever grows:
 * roughly 630px at 1000, 650 once the 980px cap is reached, 660 here, 740 from
 * 1440.
 */
@media (min-width: 1200px) {
	.futurion-article__layout {
		grid-template-columns: minmax(0, 660px) 330px;
		column-gap: 70px;
		max-width: 1060px;
	}
}

@media (min-width: 1440px) {
	.futurion-article__layout {
		grid-template-columns: minmax(0, 740px) 400px;
		column-gap: 30px;
		max-width: 1170px;
	}
}

/**
 * Default page
 * Mobile first.
 */

.futurion-page {
	overflow: hidden;
	background: var(--futurion-cream);
	color: var(--futurion-purple);
}

.futurion-page__article {
	padding-top: 60px;
	padding-bottom: 80px;
}

.futurion-page__layout {
	display: grid;
	grid-template-areas:
		"header"
		"media"
		"content";
	width: 100%;
}

/*
 * Lifted above the media blob's overlay copy, which is z-index 2 and can
 * overhang the media box. Without this the faint layer washes over the body
 * copy on stacked layouts.
 */
.futurion-page__header,
.futurion-page__content {
	position: relative;
	z-index: 3;
}

.futurion-page__header {
	grid-area: header;
	min-width: 0;
}

.futurion-page__vignette {
	margin-bottom: 14px;
	color: var(--futurion-purple);
	font-size: 13px;
	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
}

.futurion-page__title {
	max-width: 890px;
	margin: 0;
	color: var(--futurion-purple);
	font-size: clamp(27px, 8vw, 50px);
	line-height: 1.02;
}

.futurion-page__media {
	position: relative;
	grid-area: media;
	min-width: 0;
	margin-top: 32px;
	padding-bottom: 10px;
}

/*
 * Below 1100px the layout is stacked (header / media / content), so anything
 * hanging past the bottom of the media box lands on the body copy. Here the
 * blob overhangs sideways instead: anchored right and past the image edge,
 * with a positive `bottom` that keeps it clear of the text entirely.
 *
 * At 1100px media becomes its own grid column with empty space below it, so
 * that breakpoint re-anchors left and takes the vertical overhang back.
 */
.futurion-page__media::before,
.futurion-page__media::after {
	left: auto;
	right: -10%;
	bottom: 7%;
	width: 74%;
	aspect-ratio: 1 / 0.95;
	--blob-fill:
		linear-gradient(
			135deg,
			rgba(197, 229, 224, 0.84) 0%,
			rgba(219, 190, 240, 0.9) 100%
		);
}

/*
 * A second, faint copy stacked above the figure so the blob reads as showing
 * through the photo. Both pseudo-elements read the same --blob-* custom
 * properties from the parent, so they are identical and stay registered with
 * each other without repeating any of the placement.
 */
.futurion-page__media::after {
	z-index: 2;
	opacity: 0.12;
}

.futurion-page__figure {
	position: relative;
	z-index: 1;
	margin: 0;
}

.futurion-page__image-wrap {
	overflow: hidden;
	border-radius: 15px;
	aspect-ratio: 8 / 5.2;
}

.futurion-page__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.futurion-page__caption {
	margin-top: 14px;
	margin-right: 15px;
	margin-left: 15px;
	color: var(--futurion-purple);
	font-size: 13px;
	line-height: 1.1;
}

.futurion-page__content {
	grid-area: content;
	min-width: 0;
	max-width: 890px;
	margin-top: 32px;
}

.futurion-page__page-links {
	margin-top: 24px;
}

@media (min-width: 768px) {
	.futurion-page__article {
		padding-top: 58px;
		padding-bottom: 100px;
	}

	.futurion-page__vignette {
		margin-bottom: 18px;
		font-size: 16px;
	}

	.futurion-page__title {
		font-size: 58px;
	}

	.futurion-page__media {
		margin-top: 44px;
		padding-bottom: 15px;
	}

	.futurion-page__content {
		margin-top: 40px;
	}
}

@media (min-width: 1100px) {
	.futurion-page__article {
		padding-top: 100px;
		padding-bottom: 120px;
	}

	.futurion-page__layout {
		grid-template-columns: minmax(0, 890px) minmax(360px, 1fr);
		/*
		 * The media spans both rows. Left to size themselves, the two rows
		 * share out any height the media has beyond header + content, which
		 * drops the surplus *between* the title and the copy -- invisible on
		 * a long page, and a chasm on a short one. Pinning the header row to
		 * its own height sends all of it to the content row instead, where
		 * align-items:start leaves it below the copy where it belongs.
		 */
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"header media"
			"content media";
		column-gap: clamp(50px, 6vw, 125px);
		align-items: start;
	}

	.futurion-page__vignette {
		margin-bottom: 20px;
		font-size: 20px;
	}

	/* Sits in the same narrowing column as the copy, so it follows the same curve. */
	.futurion-page__title {
		font-size: clamp(53px, calc(53px + (100vw - 1100px) * 0.035), 67px);
		line-height: 1.02;
	}

	.futurion-page__media {
		justify-self: end;
		width: min(100%, 650px);
		margin-top: 10px;
	}

	.futurion-page__media::before,
	.futurion-page__media::after {
		right: auto;
		left: -6%;
		bottom: -54%;
		width: 88%;
	}

	.futurion-page__caption {
		margin-top: 25px;
		margin-right: 30px;
		margin-left: 30px;
		font-size: 18px;
	}

	.futurion-page__content {
		margin-top: 26px;
	}
}

@media (min-width: 1500px) {
	.futurion-page__layout {
		column-gap: clamp(80px, 7vw, 145px);
	}
    	.futurion-page__article {
		padding-top: 130px;
	}
  	.futurion-page__media {
		width: min(100%, 800px);
	}
}

/**
 * Futurion Rapport
 * Mobile first.
 */

.futurion-rapport {
	overflow: hidden;
	padding-top: 44px;
	padding-bottom: 78px;
	background: var(--futurion-grey);
	color: var(--futurion-purple);
}

.futurion-rapport__inner {
	width: 100%;
}

.futurion-rapport__heading {
	margin: 0 0 38px;
}

.futurion-rapport__swiper {
	overflow: visible;
	width: 100%;
}

.futurion-rapport__swiper .swiper-slide.futurion-rapport__slide {
	flex-shrink: 0;
	width: min(78vw, 302px);
	max-width: 430px;
	height: auto;
}

.futurion-rapport__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	color: var(--futurion-purple);
	text-decoration: none;
}

.futurion-rapport__image-wrap {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	width: 100%;
	max-width: 430px;
	aspect-ratio: 430 / 407;
	border-radius: 5px;
	background: rgba(63, 42, 115, 0.08);
	transform: translateZ(0);
}

.futurion-rapport__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateZ(0) scale(1);
	transform-origin: center;
	backface-visibility: hidden;
	will-change: transform;
	transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.futurion-rapport__image--placeholder {
	background:
		linear-gradient(
			135deg,
			rgba(111, 140, 255, 0.8) 0%,
			rgba(183, 255, 115, 0.8) 100%
		);
}

.futurion-rapport__title {
	margin: 19px 17px 0;
	color: var(--futurion-purple);
	font-size: 20px;
	line-height: 1.05;
	font-weight: 500;
}

.futurion-rapport__swiper.swiper-container-lock {
	overflow: visible;
}

@media (hover: hover) {
	.futurion-rapport__card:hover .futurion-rapport__image {
		transform: translateZ(0) scale(1.025);
	}

	.futurion-rapport__card:hover .futurion-rapport__title {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;
	}
}

@media (min-width: 768px) {
	.futurion-rapport {
		padding-top: 70px;
		padding-bottom: 90px;
	}

	.futurion-rapport__heading {
		margin-bottom: 30px;
	}

	.futurion-rapport__swiper .swiper-slide.futurion-rapport__slide {
		width: min(43vw, 430px);
	}

	.futurion-rapport__title {
		margin-top: 22px;
		margin-right: 22px;
		margin-left: 22px;
		font-size: 21px;
	}
}

@media (min-width: 1100px) {
	.futurion-rapport {
		padding-top: 104px;
		padding-bottom: 95px;
		border-bottom-width: 1px;
	}

	/*
	 * Unlike the event card this one was already proportional — a steady ~32%
	 * of the row from 1100 all the way to 1440 — so it is only held back a
	 * little at the narrow end rather than rebuilt: roughly 8% smaller at 1100,
	 * tapering out by about 1400 where the three-up formula takes over again.
	 */
	.futurion-rapport__swiper .swiper-slide.futurion-rapport__slide {
		width: min(
			calc((100% - 54px) / 3),
			clamp(292px, calc(292px + (100vw - 1100px) * 0.406), 430px)
		);
	}

	.futurion-rapport__title {
		margin-top: 25px;
		margin-right: 27px;
		margin-left: 27px;
		font-size: clamp(21px, calc(21px + (100vw - 1100px) * 0.00588), 23px);
		line-height: 1.06;
	}
}

@media (prefers-reduced-motion: reduce) {
	.futurion-rapport__image {
		transition: none;
	}
}

.futurion-rapport__slider-shell {
	position: relative;
}

/*
 * Same treatment as .futurion-board__navigation -- a rounded-square button
 * with the arrow drawn from two pseudo-elements, centred on the image band
 * (not the card as a whole, which also carries the title). Height comes
 * from js/script.js reading the first slide's rendered image, same reason
 * as the board slider: the image's aspect-ratio is fixed, but its rendered
 * height still depends on the slide width Swiper computes per breakpoint.
 */
.futurion-rapport__navigation {
	position: absolute;
	z-index: 5;
	top: calc(var(--futurion-rapport-image-height, 302px) / 2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 5px;
	color: var(--futurion-white);
	background: rgba(75, 54, 118, 0.12);
	backdrop-filter: blur(3px);
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		opacity 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease;
}

.futurion-rapport__navigation--previous {
	left: 12px;
}

.futurion-rapport__navigation--next {
	right: 12px;
}

.futurion-rapport__navigation span {
	position: relative;
	display: block;
	width: 12px;
	height: 12px;
}

.futurion-rapport__navigation span::before,
.futurion-rapport__navigation span::after {
	content: "";
	position: absolute;
}

.futurion-rapport__navigation span::before {
	top: 5px;
	left: 0;
	width: 12px;
	height: 1px;
	background: currentColor;
}

.futurion-rapport__navigation span::after {
	top: 2px;
	right: 0;
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.futurion-rapport__navigation--previous span {
	transform: rotate(180deg);
}

.futurion-rapport__navigation.swiper-button-disabled,
.futurion-rapport__navigation.swiper-button-lock {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.futurion-rapport__navigation:focus-visible {
	outline: 2px solid var(--futurion-blue);
	outline-offset: 3px;
}

@media (hover: hover) {
	.futurion-rapport__navigation:hover,
	.futurion-rapport__navigation:focus-visible {
		border-color: var(--futurion-white);
		background: rgba(75, 54, 118, 0.65);
	}
}

@media (min-width: 1024px) {
	.futurion-rapport__navigation--previous {
		left: 20px;
	}

	.futurion-rapport__navigation--next {
		right: 20px;
	}
}

/** CONTENT ARCHIVES **/

.futurion-content-archive {
	--futurion-archive-background: #b8a7f4;

	position: relative;
	overflow: hidden;
	background: var(--futurion-white);
	color: var(--futurion-purple);
}

/*
 * The per-archive colour (set from the ACF options page, delivered as the
 * inline --futurion-archive-background on the section) fades out down the
 * hero by losing alpha rather than by blending toward white, so the
 * section's own white shows through and the falloff never passes through
 * a muddy midpoint.
 *
 * The stops trace an ease-out rather than a straight ramp: full strength
 * is held near the top, most of the drop happens through the middle, and
 * the last of it tapers off gently. A linear alpha ramp reads as a hard
 * edge at both ends and bands badly across an area this large.
 *
 * The first declaration is the fallback for browsers without color-mix();
 * they drop the second at parse time and get a plain linear fade.
 */
.futurion-content-archive__hero {
	position: relative;
	padding-top: 70px;
	padding-bottom: 150px;
	background-image: linear-gradient(
		180deg,
		var(--futurion-archive-background) 0%,
		transparent 100%
	);
	background-image: linear-gradient(
		180deg,
		var(--futurion-archive-background) 0%,
		color-mix(in srgb, var(--futurion-archive-background) 82%, transparent) 22%,
		color-mix(in srgb, var(--futurion-archive-background) 58%, transparent) 45%,
		color-mix(in srgb, var(--futurion-archive-background) 32%, transparent) 66%,
		color-mix(in srgb, var(--futurion-archive-background) 13%, transparent) 84%,
		color-mix(in srgb, var(--futurion-archive-background) 0%, transparent) 100%
	);
}

.futurion-content-archive__hero-grid,
.futurion-content-archive__results {
	width: 100%;
	max-width: var(--max-width);
	margin-right: 0;
	margin-left: 0;
}

.futurion-content-archive__hero-grid {
	display: grid;
	gap: 42px;
}

.futurion-content-archive__hero-content {
	min-width: 0;
}

/*
 * Only rendered for a child term that is itself a parent (Podd, under
 * Studio & samtal) -- the sibling strip further down only ever links to
 * that term's own children, so this is the one way back up to the level it
 * actually belongs to. Kept plain rather than routed through the sibling
 * filter styling: it points the opposite direction (up, not sideways) and
 * needs to read that way at a glance.
 */
.futurion-content-archive__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 16px;
	color: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.futurion-content-archive__back:hover .futurion-content-archive__back-label,
.futurion-content-archive__back:focus-visible .futurion-content-archive__back-label {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.futurion-content-archive__kicker {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.2;
	text-transform: uppercase;
}

/*
 * 900px was clipping the heading before its own column did: "Analyser &
 * rapporter —" needs 949px at the 92px size used from 1700 up, so it broke over
 * two lines with room to spare beside it.
 */
.futurion-content-archive__title {
	max-width: 1200px;
	margin: 0;
	font-size: clamp(43px, 12vw, 72px);
	font-weight: 400;
	line-height: 0.98;
}

/*
 * The hero grid reserves a second column for the archive image, and did so even
 * when there is no image — every archive today — which squeezed the heading into
 * roughly 700px at 1280 and 800px at 1440, enough to wrap it with the rest of
 * the row standing empty. The template already marks these archives; this is
 * the first rule to use that class.
 */
.futurion-content-archive--without-image .futurion-content-archive__hero-grid {
	grid-template-columns: minmax(0, 1fr);
}

.futurion-content-archive__title span {
	white-space: nowrap;
}

.futurion-content-archive__introductions {
	display: grid;
	gap: 20px;
	max-width: 940px;
	margin-top: 26px;
}

.futurion-content-archive__introduction {
	max-width: 440px;
	font-size: 16px;
	line-height: 1.35;
}

/*
 * Only one column was ever meant to stay narrow -- the left/right split
 * exists so two intros can sit side by side without crowding each other.
 * An archive with just one (the new podcast sub-categories, for instance)
 * has no neighbour to make room for, so it widens rather than leaving the
 * other half of the row empty. Capped at 700px rather than filling the
 * whole 940px row: that width is fine split across two columns of ~450px
 * each, but as a single measure it read as too long a line to sit
 * comfortably under the title.
 */
.futurion-content-archive__introduction:only-child {
	max-width: 700px;
}

.futurion-content-archive__introduction > * {
	margin-top: 0;
}

.futurion-content-archive__introduction > *:last-child {
	margin-bottom: 0;
}

/*
 * A link dropped into the intro's WYSIWYG (e.g. pointing an archive to a
 * fuller writeup elsewhere) otherwise inherits the surrounding text's
 * colour and weight, per the global "a { color: inherit }" default -- it
 * reads as body copy, not as something to click. Bolding it and holding the
 * underline back until hover marks it as a link without competing with the
 * heading, matching the treatment on .futurion-nice-link__title.
 */
.futurion-content-archive__introduction a {
	font-weight: 600;
	text-decoration: none;
}

.futurion-content-archive__introduction a:hover,
.futurion-content-archive__introduction a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.futurion-content-archive__hero-image {
	overflow: hidden;
	width: 100%;
	margin: 0;
	aspect-ratio: 585 / 372;
	border-radius: 12px;
}

.futurion-content-archive__hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.futurion-content-archive__results {
	position: relative;
	z-index: 1;
	margin-top: -74px;
	padding-bottom: 80px;
}

.futurion-content-archive__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 42px;
}

.futurion-content-card--archive .futurion-content-card__image-wrap {
	aspect-ratio: 128 / 150;
	border-radius: 4px;
	background: #f0ecdf;
}

.futurion-content-card--archive .futurion-content-card__image-wrap::after {
	background: rgba(63, 42, 115, 0.1);
}

.futurion-content-card--archive .futurion-content-card__content {
	padding-top: 1px;
}

.futurion-content-card--archive .futurion-content-card__label {
	margin: 0 0 9px;
	font-size: 12px;
	line-height: 1.15;
}

.futurion-content-card--archive .futurion-content-card__title {
	font-size: 19px;
	line-height: 1.12;
}

.futurion-content-card--archive .futurion-content-card__date {
	margin-top: 14px;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.2;
}

.futurion-content-archive__pagination {
	display: flex;
	margin-top: 46px;
}

/* Held while a "load more" request is in flight. */
.futurion-content-archive__load-more.is-loading {
	opacity: 0.55;
	cursor: progress;
}

.futurion-content-archive__empty {
	margin: 0;
	font-size: 18px;
	line-height: 1.4;
}

@media (min-width: 700px) {
	.futurion-content-archive__hero {
		padding-top: 90px;
		padding-bottom: 175px;
	}

	.futurion-content-archive__introductions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}

	/* Spans both tracks rather than sitting in the first with the second empty. */
	.futurion-content-archive__introduction:only-child {
		grid-column: 1 / -1;
	}

	.futurion-content-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 55px;
		row-gap: 54px;
	}

	.futurion-content-archive__results {
		margin-top: -92px;
	}

	.futurion-content-card--archive .futurion-content-card__link {
		grid-template-columns: 105px minmax(0, 1fr);
		gap: 15px;
	}
}

@media (min-width: 1100px) {

    .futurion-content-archive__kicker {
	font-size: 20px;
}

	.futurion-content-archive__hero {
		padding-top: 95px;
		padding-bottom: 185px;
	}

	.futurion-content-archive__hero-grid {
		grid-template-columns: minmax(0, 1.55fr) minmax(380px, 0.85fr);
		gap: 80px;
		align-items: start;
	}

	.futurion-content-archive__hero-image {
		margin-top: -30px;
	}

	.futurion-content-archive__title {
		font-size: clamp(64px, 5.5vw, 92px);
	}

	.futurion-content-archive__introductions {
		margin-top: 34px;
	}

	.futurion-content-archive__results {
		margin-top: -105px;
		padding-bottom: 120px;
	}

	/*
	 * Fluid thirds rather than auto-fit with a max track: capping each
	 * column stopped the row growing and stranded empty space at the
	 * right edge on wide screens. The extra width now goes into the
	 * gutters, which widen with the viewport up to the same ceiling the
	 * spotlight module's latest-grid uses, so the two read as one system.
	 */
	.futurion-content-archive__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: clamp(44px, 4vw, 72px);
		row-gap: 48px;
	}

	.futurion-content-card--archive .futurion-content-card__title {
		font-size: 20px;
	}

    .futurion-content-archive__introduction {
	    font-size: 20px;
    }
}

@media (min-width: 1500px) {

	.futurion-content-archive__hero-grid {
		gap: 120px;
	}

	.futurion-content-archive__hero-image {
		max-width: 585px;
		justify-self: end;
	}

	.futurion-content-card--archive .futurion-content-card__link {
		grid-template-columns: 128px minmax(0, 1fr);
		gap: 17px;
	}

	.futurion-content-card--archive .futurion-content-card__title {
		font-size: 25px;
	}
    .futurion-content-card--archive .futurion-content-card__label {
	font-size: 15px;
    }

    .futurion-content-card--archive .futurion-content-card__date {
        font-size: 13px;
    }
}
@media (min-width: 1700px) {
    .futurion-content-archive__hero {
        padding-top: 150px;
    }

	/*
	 * Same release the spotlight module gets at this width: capped at
	 * var(--max-width) and left-aligned, the archive left a widening
	 * strip of empty background down the right on large screens. The
	 * hero grid moves with the results so the two keep a common right
	 * edge. Card and text sizing is deliberately left alone.
	 */
	.futurion-content-archive__hero-grid,
	.futurion-content-archive__results {
		max-width: clamp(1650px, 90vw, 2000px);
	}
}

/**
 * Styrelse slider
 * Mobile first, currently designed up to 1700px.
 */

.futurion-board-widget {
	margin: 0;
	background: var(--futurion-white);
}

.futurion-board {
	position: relative;
	overflow: hidden;
	padding-top: 32px;
	padding-bottom: 56px;
	color: var(--futurion-purple);
	background-color: var(--futurion-cream);
}

.futurion-board__heading-wrap {
	margin-bottom: 24px;
}

.futurion-board__heading span {
	display: inline-block;
	margin-left: 3px;
}

.futurion-board__slider-shell {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.futurion-board__slider {
	position: relative;
	overflow: visible;
	width: 100%;
	padding-left: var(--grid-gutter);
	box-sizing: border-box;
}

.futurion-board__slider .swiper-wrapper {
	display: flex;
	align-items: flex-start;
	box-sizing: border-box;
}

/*
 * Width itself comes entirely from Swiper's numeric `slidesPerView`
 * (see js/script.js) dividing up the available space, which is what
 * guarantees a partial "peek" slide at the edge at every width
 * instead of occasionally landing on a whole number of slides. Don't
 * add width/max-width here — Swiper sets slide width via inline
 * style from its own configured breakpoints, and a competing CSS
 * width constraint fights that instead of just visually capping it,
 * since Swiper's internal slide-position math is based on what it
 * set, not on the post-CSS rendered size.
 */
.futurion-board__slider .swiper-slide.futurion-board__slide {
	height: auto;
	box-sizing: border-box;
}

.futurion-board__image-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1.25 / 1;
	border-radius: 9px;
	background: #eee8da;
	box-sizing: border-box;
}

.futurion-board__image-wrap img,
.futurion-board__image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
	object-fit: cover;
	object-position: center;
}

.futurion-board__content {
	width: 100%;
	padding-top: 8px;
	box-sizing: border-box;
}

.futurion-board__name {
	margin: 0;
	color: var(--futurion-purple);
	font-size: 15px;
	line-height: 1.15;
	font-weight: 400;
}

.futurion-board__role {
	margin: 2px 0 0;
	color: var(--futurion-purple);
	font-size: 14px;
	line-height: 1.2;
	font-weight: 400;
	padding-right: 15px;
}

.futurion-board__navigation {
	position: absolute;
	z-index: 5;
	/*
	 * Half the rendered image height, kept in sync from
	 * js/script.js, so the buttons stay centered on the image
	 * regardless of slide width or breakpoint.
	 */
	top: calc(var(--futurion-board-image-height, 244px) / 2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 5px;
	color: var(--futurion-white);
	background: rgba(75, 54, 118, 0.12);
	backdrop-filter: blur(3px);
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		opacity 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease;
}

.futurion-board__navigation--previous {
	left: calc(var(--grid-gutter) + 10px);
}

.futurion-board__navigation--next {
	right: 14px;
}

.futurion-board__navigation span {
	position: relative;
	display: block;
	width: 12px;
	height: 12px;
}

.futurion-board__navigation span::before,
.futurion-board__navigation span::after {
	content: "";
	position: absolute;
}

.futurion-board__navigation span::before {
	top: 5px;
	left: 0;
	width: 12px;
	height: 1px;
	background: currentColor;
}

.futurion-board__navigation span::after {
	top: 2px;
	right: 0;
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.futurion-board__navigation--previous span {
	transform: rotate(180deg);
}

.futurion-board__navigation.swiper-button-disabled,
.futurion-board__navigation.swiper-button-lock {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.futurion-board__navigation:focus-visible {
	outline: 2px solid var(--futurion-blue);
	outline-offset: 3px;
}

@media (hover: hover) {
	.futurion-board__navigation:hover,
	.futurion-board__navigation:focus-visible {
		border-color: var(--futurion-white);
		background: rgba(75, 54, 118, 0.65);
	}
}

@media (min-width: 600px) {
	.futurion-board {
		padding-top: 36px;
		padding-bottom: 64px;
	}

	.futurion-board__heading-wrap,
	.futurion-verksamhet__heading {
		margin-bottom: 26px;
	}
}

@media (min-width: 768px) {

	.futurion-board__name {
		font-size: 16px;
	}

	.futurion-board__role {
		font-size: 15px;
	}
}

@media (min-width: 1024px) {
	.futurion-board {
		padding-top: 34px;
		padding-bottom: 62px;
	}

	.futurion-board__heading-wrap,
	.futurion-verksamhet__heading {
		margin-bottom: 25px;
	}

	.futurion-board__navigation--next {
		right: 20px;
	}
}

@media (min-width: 1280px) {
		.futurion-board__name {
		font-size: 22px;
	}

	.futurion-board__role {
		font-size: 20px;
		padding-right: 25px;
	}

	.futurion-board__content {
		padding-top: 9px;
	}

	.futurion-board__navigation--next {
		right: 24px;
	}
}

@media (min-width: 1440px) {
	.futurion-board {
		padding-top: 34px;
		padding-bottom: 66px;
	}

	.futurion-board__navigation--next {
		right: 28px;
	}
}

@media (min-width: 1700px) {
	.futurion-board {
		padding-top: 38px;
		padding-bottom: 72px;
	}

	.futurion-board__heading-wrap,
	.futurion-verksamhet__heading {
		margin-bottom: 28px;
	}

	.futurion-board__navigation--next {
		right: 32px;
	}
}

/** CONTACT PERSON BLOCK **/

.futurion-contact-person {
	width: 100%;
	max-width: 523px;
	margin: 56px 0;
	color: var(--futurion-purple);
}

.futurion-contact-person__eyebrow {
	margin: 0 0 28px;
}

/*
 * The 56px above is for the block standing on its own, which is how it is used
 * on Om Futurion. Directly under a heading that introduces it -- the press page
 * puts it below "Pressfrågor" -- that margin stacks with the heading's own
 * spacing and opens a gap wide enough to read as a mistake.
 */
.entry-content h2 + .futurion-contact-person,
.entry-content h3 + .futurion-contact-person {
	margin-top: 10px;
}

.futurion-contact-person__image-wrap {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 32 / 33;
	border-radius: 16px;
	background: rgba(63, 42, 115, 0.08);
	max-width: 400px;
}

.futurion-contact-person__image {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.futurion-contact-person__content {
	margin-top: 14px;
}

.futurion-contact-person__name,
.futurion-contact-person__role,
.futurion-contact-person__contact {
	margin: 0;
	color: var(--futurion-purple);
	font-size: 18px;
	line-height: 1.28;
	font-weight: 400;
}

.futurion-contact-person__name {
	font-size: 20px;
}

.futurion-contact-person__contact a {
	position: relative;
	z-index: 0;
	color: inherit;
	text-decoration: none;
}

.futurion-contact-person__contact a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 1px;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 3px;
	background: var(--futurion-orange);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.futurion-contact-person--empty {
	padding: 24px;
	border: 1px dashed rgba(63, 42, 115, 0.35);
}

.futurion-contact-person--empty p {
	margin: 0;
}

@media (hover: hover) {
	.futurion-contact-person__contact a:hover::after,
	.futurion-contact-person__contact a:focus-visible::after {
		opacity: 1;
	}
}

@media (min-width: 768px) {
	.futurion-contact-person {
		margin: 88px 0;
	}

	.futurion-contact-person__eyebrow {
		margin-bottom: 42px;
	}

	.futurion-contact-person__name,
	.futurion-contact-person__role,
	.futurion-contact-person__contact {
		font-size: 20px;
	}

	.futurion-contact-person__name {
		font-size: 22px;
	}
}
/** ------------------------------------------------------------------
 *  BLOB SYSTEM
 *  ------------------------------------------------------------------
 *  The six shapes in assets/images/blobs are used as masks, not images,
 *  so each module tints them with its own --blob-fill while sharing the
 *  same silhouettes. futurion_blob_style_attr() in functions.php sets
 *  --blob-image plus the rotate/scale/drift/flip vars per element, which
 *  is what keeps placement from looking gridded.
 *
 *  New modules can opt in with the .futurion-blob class instead of being
 *  added to the selector list below; they only need to size and position
 *  the element and set --blob-fill.
 *
 *  Size a blob with width + aspect-ratio and anchor it from one corner.
 *  Pinning all four insets makes mask-size: 100% 100% stretch the shape to
 *  the container, which reads as a colour wash rather than a blob.
 * ------------------------------------------------------------------ */

.futurion-blob,
.futurion-article__media::before,
.futurion-article__media::after,
.futurion-page__media::before,
.futurion-page__media::after,
.futurion-fifty-puff__shape,
.futurion-spotlight::before,
.futurion-spotlight::after,
.futurion-event-card__background {
	position: absolute;
	pointer-events: none;
	content: "";
	border-radius: 0;
	background: var(--blob-fill, rgba(219, 190, 240, 0.9));
	-webkit-mask-image: var(--blob-image, none);
	mask-image: var(--blob-image, none);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transform:
		translate(var(--blob-x, 0%), var(--blob-y, 0%))
		rotate(var(--blob-rotate, 0deg))
		scale(var(--blob-scale, 1))
		scaleX(var(--blob-flip, 1))
		scaleY(var(--blob-flip-y, 1));
}

/*
 * Without a mask image the element would paint as a hard rectangle, so hide
 * it until PHP has supplied one (e.g. blocks rendered from cached markup).
 */
.futurion-blob:not([style*="--blob-image"]),
.futurion-article__media:not([style*="--blob-image"])::before,
.futurion-article__media:not([style*="--blob-image"])::after,
.futurion-page__media:not([style*="--blob-image"])::before,
.futurion-page__media:not([style*="--blob-image"])::after,
.futurion-spotlight:not([style*="--blob-image"])::before,
.futurion-spotlight:not([style*="--blob-image"])::after,
.futurion-fifty-puff__shape:not([style*="--blob-image"]),
.futurion-event-card__background:not([style*="--blob-image"]) {
	display: none;
}


/**
 * Event details
 * ----------------------------------------------------------------------------
 * Sits between the article body and its footer on the single-event view, so it
 * takes the "details" row added to both grid-template-areas above. Events are
 * the only post type that renders it.
 */

.futurion-article__date--event {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.futurion-event-details {
	grid-area: details;
	min-width: 0;
	margin-top: 34px;
	padding: 24px 26px;
	border: 1px solid rgba(94, 114, 237, 0.28);
	border-radius: 6px;
	background: var(--futurion-white);
}

.futurion-event-details__heading {
	margin: 0 0 18px;
	color: var(--futurion-purple);
	font-size: 12px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.futurion-event-details__list {
	display: grid;
	gap: 15px 30px;
	margin: 0;
}

.futurion-event-details__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.futurion-event-details__item dt {
	color: var(--futurion-blue);
	font-size: 10px;
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.futurion-event-details__item dd {
	margin: 0;
	color: var(--futurion-purple);
	font-size: 17px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.futurion-event-details__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.futurion-event-details__cta,
.futurion-event-details__calendar {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border-radius: 999px;
	font-size: 13px;
	line-height: 1;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.futurion-event-details__cta {
	border: 1px solid var(--futurion-purple);
	background: var(--futurion-purple);
	color: var(--futurion-white);
}

.futurion-event-details__cta:hover,
.futurion-event-details__cta:focus-visible {
	background: var(--futurion-purple-dark);
	border-color: var(--futurion-purple-dark);
}

.futurion-event-details__calendar {
	border: 1px solid rgba(66, 44, 110, 0.25);
	background: transparent;
	color: var(--futurion-purple);
}

.futurion-event-details__calendar:hover,
.futurion-event-details__calendar:focus-visible {
	border-color: var(--futurion-purple);
	background: var(--futurion-orange);
}

.futurion-event-details__cta:focus-visible,
.futurion-event-details__calendar:focus-visible {
	outline: 2px solid var(--futurion-blue);
	outline-offset: 2px;
}

@media (min-width: 600px) {
	.futurion-event-details__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.futurion-event-details__cta,
	.futurion-event-details__calendar {
		transition: none;
	}
}


/**** GRAVITY FORMS ****/

/*
 * Gravity Forms 3 ships its "Orbital" theme, which handles layout, validation
 * states and focus behaviour. That is worth keeping, so this recolours it
 * rather than replacing it: the palette is driven by --gf-color-* custom
 * properties, and overriding those reaches every control at once.
 *
 * !important is needed and is not laziness. Gravity Forms prints those
 * variables in an inline <style> scoped to `#gform_wrapper_<id>[data-form-index]
 * .gform-theme`, which carries an id and therefore outranks any selector a
 * stylesheet can write for a form whose id is not known in advance.
 */
.entry-content .gform-theme--orbital {
	--gf-color-primary: var(--futurion-purple) !important;
	--gf-color-primary-rgb: 66, 44, 110 !important;
	--gf-color-primary-contrast: var(--futurion-white) !important;
	--gf-color-primary-contrast-rgb: 255, 254, 250 !important;
	--gf-color-primary-darker: #2f1f4f !important;
	--gf-color-primary-lighter: #5e72ed !important;

	--gf-color-in-ctrl-primary: var(--futurion-purple) !important;
	--gf-color-in-ctrl-primary-rgb: 66, 44, 110 !important;
	--gf-color-in-ctrl-primary-contrast: var(--futurion-white) !important;
	--gf-color-in-ctrl-primary-darker: #2f1f4f !important;
	--gf-color-in-ctrl-primary-lighter: #5e72ed !important;

	--gf-color-secondary-contrast: var(--futurion-purple) !important;
	--gf-color-in-ctrl-contrast: var(--futurion-purple) !important;
	--gf-color-out-ctrl-dark: var(--futurion-purple) !important;

	--gf-radius: 5px !important;
}

/*
 * The card. Without it the form reads as loose paragraphs continuing the
 * article rather than as something to fill in, which is what the fields were
 * doing on a cream page with cream inputs.
 */
.entry-content .gform_wrapper {
	margin: 2em 0;
	padding: 30px 26px 34px;
	border: 1px solid rgba(66, 44, 110, 0.22);
	border-radius: 10px;
	background: var(--futurion-white);
}

.entry-content .gform_wrapper .gform_heading {
	margin-bottom: 22px;
}

/* Labels sit closer to their control than Orbital's default. */
.entry-content .gform_wrapper .gfield_label {
	margin-bottom: 6px;
	color: var(--futurion-purple);
	font-size: 15px;
	font-weight: 500;
}

/* The "(Obligatoriskt)" marker was a loud red against the purple. */
.entry-content .gform_wrapper .gfield_required,
.entry-content .gform_wrapper .gfield_required .gfield_required_text {
	color: rgba(66, 44, 110, 0.6);
	font-size: 13px;
	font-weight: 400;
}

.entry-content .gform_wrapper input[type="text"],
.entry-content .gform_wrapper input[type="email"],
.entry-content .gform_wrapper input[type="tel"],
.entry-content .gform_wrapper input[type="url"],
.entry-content .gform_wrapper input[type="number"],
.entry-content .gform_wrapper textarea,
.entry-content .gform_wrapper select {
	border: 1px solid rgba(66, 44, 110, 0.3);
	border-radius: 5px;
	background: var(--futurion-white);
	color: var(--futurion-purple);
	font-size: 16px;
}

.entry-content .gform_wrapper input:focus,
.entry-content .gform_wrapper textarea:focus,
.entry-content .gform_wrapper select:focus {
	border-color: var(--futurion-purple);
	outline: 2px solid rgba(94, 114, 237, 0.35);
	outline-offset: 1px;
}

/*
 * The consent blocks — newsletter opt-in and the GDPR terms — carry a long
 * explanation under the checkbox. Tinting them separates the small print from
 * the fields above without another border inside a bordered card.
 */
.entry-content .gform_wrapper .gfield--type-consent .gfield_consent_description {
	margin-top: 10px;
	padding: 14px 16px;
	border: 0;
	border-radius: 5px;
	background: rgba(66, 44, 110, 0.05);
	color: rgba(66, 44, 110, 0.8);
	font-size: 14px;
	line-height: 1.45;
}

/* The submit button, matching the theme's pill rather than Orbital's block. */
.entry-content .gform_wrapper .gform_footer {
	margin-top: 6px;
	padding-bottom: 0;
}

.entry-content .gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px 12px;
	border: 1px solid var(--futurion-purple);
	/*
	 * !important for the same reason as the palette above: the framework's own
	 * button rule chains five classes and an attribute, so no selector written
	 * here outranks it. Setting its --gf-local-radius instead does not work —
	 * a later framework rule reassigns that variable on the same element.
	 */
	border-radius: 999px !important;
	background: var(--futurion-purple);
	color: var(--futurion-white);
	font-size: 16px;
	line-height: 1;
	font-weight: 400;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) {
	.entry-content .gform_wrapper .gform_button:hover {
		background: transparent;
		color: var(--futurion-purple);
	}
}

.entry-content .gform_wrapper .gform_button:focus-visible {
	outline: 2px solid var(--futurion-blue);
	outline-offset: 2px;
}

/* Confirmation and validation messages in the theme's own voice. */
.entry-content .gform_confirmation_message {
	margin: 2em 0;
	padding: 22px 24px;
	border: 1px solid rgba(66, 44, 110, 0.22);
	border-left: 4px solid var(--futurion-blue);
	border-radius: 10px;
	background: var(--futurion-white);
	color: var(--futurion-purple);
}

@media (min-width: 768px) {
	.entry-content .gform_wrapper {
		padding: 38px 36px 42px;
	}
}


/**** 404 ****/

/*
 * Built on the search-results page's proportions, because the two do the same
 * job: a reader who did not find what they wanted. The kicker carries the code
 * so the heading can be a sentence rather than a number.
 */
.futurion-error404 {
	min-height: 70vh;
	padding-top: calc(var(--header-height) + 55px);
	padding-bottom: 85px;
	background: var(--futurion-grey);
	color: var(--futurion-purple);
}

.futurion-error404__inner {
	width: 100%;
}

.futurion-error404__header {
	max-width: 760px;
}

.futurion-error404__kicker {
	margin: 0 0 15px;
	color: var(--futurion-blue);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.04em;
}

.futurion-error404__title {
	margin: 0;
	font-size: clamp(39px, 10vw, 65px);
	font-weight: 400;
	line-height: 1;
	overflow-wrap: anywhere;
}

.futurion-error404__text {
	margin: 22px 0 0;
	max-width: 620px;
	font-size: 17px;
	line-height: 1.45;
}

.futurion-error404__sections {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
}

.futurion-error404__home {
	margin: 34px 0 0;
	font-size: 16px;
}

.futurion-error404__home a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	.futurion-error404 {
		padding-bottom: 110px;
	}

	.futurion-error404__text {
		font-size: 19px;
	}

	.futurion-error404__sections {
		gap: 14px;
		margin-top: 48px;
	}
}


/**** ARCHIVE SUBCATEGORY NAV ****/

/*
 * Sits between the archive hero and the grid. Pills rather than a list, so it
 * reads as a filter row and not as more content; the current one is filled
 * instead of outlined, which is the only state difference the row needs.
 */
/*
 * No bottom padding: the hero's own padding already leaves a wide band between
 * this row and the grid, even after the results section pulls up into it.
 */
.futurion-archive-filters {
	padding-top: 20px;
}

.futurion-archive-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.futurion-archive-filters__item {
	margin: 0;
}

.futurion-archive-filters__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px 8px;
	border: 1px solid var(--futurion-purple);
	border-radius: 999px;
	color: var(--futurion-purple);
	background: transparent;
	font-size: 15px;
	line-height: 1;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.futurion-archive-filters__link.is-current {
	background: var(--futurion-purple);
	color: var(--futurion-white);
}

@media (hover: hover) {
	.futurion-archive-filters__link:hover {
		background: var(--futurion-purple);
		color: var(--futurion-orange);
	}
}

.futurion-archive-filters__link:focus-visible {
	outline: 2px solid var(--futurion-blue);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.futurion-archive-filters {
		padding-top: 30px;
	}

	.futurion-archive-filters__list {
		gap: 12px;
	}

	.futurion-archive-filters__link {
		padding: 12px 24px 10px;
		font-size: 16px;
	}
}