/*

Theme Name: Textiltryck Malmö
Description: Custom made theme for Textiltryck Malmö
Author: WP and coding by Abrovink
Author URI: https://www.abrovink.se
Text Domain: textiltryck-malmo
Version: 1.1.0

*/


@font-face {
	font-family: "Lexend Deca";
	src: url("assets/fonts/LexendDeca-Variable.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root{

	--container-max-width:      1440px;
	
	/* --content-wrap-max-width: 800px; */
	--content-wrap-max-width: 100%;
	
	/* Padding for different element types */
	--padding-section: 24px;
	--padding-content: 24px;
	--padding-card: 24px;
	
	--gap-columns: 60px;
	--gap-grid: 24px;
	--gap-chips: 8px;

	/* --- Typography --- */
	--font-family-base:   "Lexend Deca", sans-serif;
	--font-family-base-headings:   "Lexend Deca", sans-serif;
	--font-family-mono:   Courier, monospace;

	--font-size-base:     1rem;       /* 16px */
	--font-size-sm:       0.875rem;   /* 14px */
	--font-size-xs:       0.75rem;    /* 12px */

	--font-weight-thin:       100;
	--font-weight-light:      300;
	--font-weight-regular:    400;
	--font-weight-semibold:   600;
	--font-weight-bold:       700;

	--line-height-base:     1.49;
	--line-height-heading:  1.15;
	

	/* --- Palette — raw swatches (KKV-TM; black-and-white direction 2026-10-02) ---
	   Neutrals: White (bg), Ink (body text), Black (header + footer), Gray
	   (muted text), Gray mid. Light gray carries Ink text; Rose carries White
	   text. Rose light is kept for the heading stripes only. Teal and Purple
	   were removed 2026-10-02. */
	--palette-white:      #ffffff;   /* body + header bg */
	--palette-ink:        #231f20;   /* body text */
	--palette-black:      #000000;   /* header + footer */
	--palette-gray:       #58585a;   /* muted text + borders */
	--palette-gray-mid:   #767676;   /* image map dots + panel headers (white text passes 4.5:1) */

	--palette-light-gray:  #e6e6e6;   /* black at 10% on white — text: ink */
	--palette-rose:       #f15a53;   /* text: white */
	--palette-rose-light: #f58883;   /* heading stripes only (.stripe-rose-light) */

	/* --- Feedback / state colours --- */
	--color-success:				#63bca1;
	--color-error:					#cc3333;
	--color-on-feedback:			#ffffff;

	/* --- Context tokens — adaptive, overridden by .bg-* classes ---
	   Components read --ctx-* so they adapt to whatever background
	   they sit on. No more specificity battles for color.

		Defaults = light context on a white background:
	*/
	--ctx-bg:      var(--palette-white);
	--ctx-surface: var(--palette-light-gray);

	--ctx-fg:            var(--palette-ink);
	--ctx-fg-card:       var(--palette-black);   /* item-card text: one colour for every line */
	--ctx-fg-muted:      var(--palette-gray);

	--ctx-fg-heading:    var(--palette-ink);
	--ctx-fg-heading-em: var(--ctx-fg-heading);

	--ctx-accent:        var(--palette-rose);
	--ctx-accent-fg:     var(--palette-white);

	--ctx-border:        var(--palette-gray);
	--ctx-border-subtle: var(--palette-light-gray);

	--ctx-btn-primary-bg:      var(--palette-black);
	--ctx-btn-primary-text:    var(--palette-white);
	--ctx-btn-primary-border:  var(--palette-black);

	--ctx-btn-secondary-bg:     var(--palette-gray-mid);
	--ctx-btn-secondary-text:   var(--palette-white);
	--ctx-btn-secondary-border: var(--palette-gray-mid);

	--ctx-btn-outline-bg:      transparent;
	--ctx-btn-outline-text:    var(--palette-ink);
	--ctx-btn-outline-border:  var(--palette-ink);

	--ctx-btn-accent-bg:       var(--palette-rose);
	--ctx-btn-accent-text:     var(--palette-white);
	--ctx-btn-accent-border:   var(--palette-rose);


	/* --- Borders --- */
	--border-color: var(--ctx-border);
	--border-radius: 0px;
	
	/* --- Shadows --- */
	--box-shadow: 0 0 15px rgba(0,0,0, .15);

	/* --- Layout --- */
	--header-height: 70px;

}



@media screen and (min-width: 1024px) {

	:root {
		--header-height: 80px;
		--padding-section: 36px;
		--padding-content: 36px;
	}

}

@media screen and (min-width: 1280px) {

	:root {
		--header-height: 100px;
		--padding-section: 48px;
		--padding-content: 48px;
	}

}



/* ============================================================
   MODERN CSS RESET
   ============================================================ */

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

* {
	margin: 0;
}

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

body {
	min-height: 100%;
	background: var(--ctx-bg);
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	font-weight: 300;
	color: var(--ctx-fg);
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeSpeed;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

fieldset {
	min-width: inherit;
}

caption,
th,
td {
	font-size: .85em;
	line-height: 1.5;
	font-weight: 300;
	text-align: left;
}

/* ************************************************************************************** */
/* general typographic
/* ************************************************************************************** */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-display: swap;
	font-optical-sizing: auto;
	clear: both;
	margin: 0;
	padding: 0;
}

h1, h2, h3 {
	font-family: var(--font-family-base-headings);
	font-weight: 700;
	font-style: normal;
	color: var(--ctx-fg-heading);
    text-wrap: pretty;
}
h1 em, h2 em, h3 em{
	color: var(--ctx-fg-heading-em);
	font-style: normal;
}

h1,
h2.as-h1{
	margin: 0 0 .15em 0;
	font-size: 34px;
	line-height: 1.25;

}
h2 {
	margin: 0 0 .25em 0;
	font-size: 28px;
	line-height: 1.27;
}

h3 {
	margin: 0 0 .25em 0;
	font-size: 22px;
	line-height: 1.25;
}
h4 {
	margin: 0 0 .25em 0;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 700;
}
p, .gallery, table {
	margin-bottom: 2em;
	text-wrap: pretty;
}
p + p{
	margin-top: -.25em;
}

strong, b{
	font-weight: 600;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
strong em,
em strong{
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: +.075em;
	font-weight: 600;
}

blockquote{
	hyphens: none;
	quotes: none;
	margin: 0 0 .5em 0;
	padding: 0;
	font-size: 1.37em;
	line-height: 1.33;
	font-weight: 700;
	color: inherit;
	font-style: normal;	
	letter-spacing: -.025em;
}
blockquote p:last-child{
	margin-bottom: 0;
}

@media screen and (min-width: 1024px) {
	blockquote{
		font-size: 36px;
	}
}

cite{
	font-style: normal;
	font-weight: 400;
}

blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote strong{ font-style: italic; }
address {
	font-style: normal;
	margin: 0 0 1.5em;
}
pre {
	background: var(--ctx-surface);
	font-family: Courier, monospace;
	font-size: 0.78em;
	line-height: 1.6em;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.15em;
}
code, kbd, tt, var {
	font-family: Courier, monospace;
	font-size: .8em;
}
abbr, acronym {
	border-bottom: 1px dotted var(--border-color);
	cursor: help;
}
mark, ins {
	background: var(--ctx-surface);
	text-decoration: none;
}
small {
	font-size: smaller;
	font-weight: 500;
}
big {
	font-size: larger;
}
:focus:not(:focus-visible) {
	outline: none;
}
:focus-visible {
	outline: 2px solid var(--ctx-accent);
	outline-offset: 2px;
}
hr {
	background-color: var(--border-color);
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}
ul, ol {
	margin: 0 0 1em 1.5em;
	padding: 0;
}
p + ul{ margin-top: -24px; }
ul { list-style: square; }
ol { list-style: decimal; }
li, li p{ margin-bottom: .25em; }
ul li::marker{ color: inherit; }
li > ul, li > ol { margin-bottom: 0; }

dt { font-weight: 700; }
dd { margin: 0 1.5em 1.5em; }

sup{
	font-size: 65%;
	line-height: 1;
	font-weight: 100;
	white-space: break-after;
}
sub{
	font-size: 65%;
	line-height: 1;
	font-weight: 100;
	white-space: break-after;
}

table {
	border-collapse: collapse;
	margin: 0 0 2em 0;
	width: 100%;
	max-width: 100%;
	overflow: auto;
}
thead th {
	border-bottom: 2px solid var(--border-color);
	padding-bottom: 0.5em;
}
th {
	padding: .4em;
	font-weight: 500;
	text-align: left;
}
tr {
	border-bottom: 1px solid var(--border-color);
}
td {
	padding: 0.4em;
}
th:first-child,
td:first-child {
	padding-left: 0;
}
th:last-child,
td:last-child {
	padding-right: 0;
}

/* Price list: <table class="price-table"> in the editor. Second column
   right-aligned and kept on one line; h4 rows (colspan="2") act as
   section headings, so no empty spacer rows are needed. */
.price-table td {
	vertical-align: top;
}
.price-table td:last-child:not([colspan]) {
	text-align: right;
	white-space: nowrap;
}
.price-table h4 {
	margin: 1.5em 0 .25em;
}
.price-table tr:first-child h4 {
	margin-top: 0;
}
.price-table tr:has(> td[colspan]) {
	border-bottom: 0;
}
a {
	color: inherit;
	text-decoration: underline;
	transition: all .25s;
}
a:hover,
a:active,
a:focus {
	outline: 0;
}
.alignleft {
	float: left;
	margin-right: 1.5em;
}
.alignright {
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
video {
	display: block;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object,
canvas {
	max-width: 100%;
	margin-bottom: 0;
}
p > embed,
p > iframe,
p > object{
	max-width: 100%;
	margin-bottom: 0;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption-text {
	margin: 1.25em 0;
	font-size: .85em;
	line-height: 1.5em;
	font-weight: 300;
}

/* Neutral figure reset — no aspect-ratio, no overflow; override per context as needed */
figure {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1.5em 0;
}

/* Responsive embed container — forces 16/9 ratio for iframes, video etc */
.embed-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1.5em 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
figure.embed-container iframe,
.embed-container iframe,
.embed-container object,
.embed-container embed,
.embed-container canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.embed-container + p{
	margin-bottom: 0;
}


/* ************************************************************************************** */
/* gallery defaults - small screen, override column setting */
/* ************************************************************************************** */
.gallery{
	display: grid;
	gap: var(--gap-grid);
	grid-template-columns: 1fr 1fr;
}
.gallery > br{
	display: none;
}

@media screen and (min-width: 768px){

	.gallery{
		margin-top: 5px;
	}
	.gallery.gallery-columns-3,
	.gallery.gallery-columns-4,
	.gallery.gallery-columns-5,
	.gallery.gallery-columns-6{
		grid-template-columns: 1fr 1fr 1fr;
	}
	
}

@media (min-width: 1024px) {

	.gallery.gallery-columns-4{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

}

@media (min-width: 1280px) {

	.gallery.gallery-columns-5{	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;	}
	.gallery.gallery-columns-6{	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;	}
	
}




/* ************************************************************************************** */
/* form styles */
/* ************************************************************************************** */
form label{
	display: inline-block;
	margin-bottom: 2px;
	font-size: 12px;
	font-weight: 400;
	color: var(--ctx-fg);
}
form p{
	margin-bottom: 1em;
}
form input,
form select,
form textarea{
	display: inline-block;
	margin: 0;
	padding: .5em .5em;
	border: solid 2px var(--ctx-border);
	border-radius: var(--border-radius);
	background: rgba(255,255,255, 0);
	font-size: inherit;
	font-weight: 400;
	transition: all .2s ease;
}
form input[type="text"],
form input[type="email"],
form input[type="date"],
form input[type="time"],
form textarea{
	width: 100%;
}
form textarea{
	height: 150px;
}
form input:focus,
form textarea:focus{
	background: rgba(255,255,255, 1);
}
form button,
form input[type="button"],
form input[type="submit"]{
	position: relative;
	margin: 12px 0;
	padding: 10px 16px;
	font-family: inherit;
	font-size: 0.8125rem;   /* 13px — same scale as a.btn and the tabs */
	line-height: 20px;
	font-weight: 600;
	/* same look as a.btn.btn-primary */
	color: var(--ctx-btn-primary-text);
	background: var(--ctx-btn-primary-bg);
	border: solid 2px var(--ctx-btn-primary-border);
	border-radius: var(--border-radius);
	cursor: pointer;
	text-align: center;
	transition: all .15s;
}
/* The a.btn arrow. An <input> has no ::after, so the arrow is cut out of the
   button with a mask instead — the section background shows through, which
   is the button's text colour in every .bg-* context (light gray: near-white). */
form input[type="submit"]{
	padding-right: 36px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat right 15px center / 22px 22px, linear-gradient(#000, #000);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat right 15px center / 22px 22px, linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	transition: all .15s, -webkit-mask-position .25s, mask-position .25s;
}
form input[type="submit"]:hover{
	-webkit-mask-position: right 10px center, 0 0;
	mask-position: right 10px center, 0 0;
}
form button:hover,
form input[type="button"]:hover,
form input[type="submit"]:hover,
form button:focus-visible,
form input[type="button"]:focus-visible,
form input[type="submit"]:focus-visible{
	background: color-mix(in srgb, var(--ctx-btn-primary-bg) 85%, white);
	border-color: color-mix(in srgb, var(--ctx-btn-primary-border) 85%, white);
}
/* inset like a.btn — the mask would clip an outline */
form button:focus-visible,
form input[type="button"]:focus-visible,
form input[type="submit"]:focus-visible{
	box-shadow: 0px 0px 0px 2px #fff inset;
}
form button:active,
form input[type="button"]:active,
form input[type="submit"]:active{
	background: color-mix(in srgb, var(--ctx-btn-primary-bg) 85%, black);
	border-color: color-mix(in srgb, var(--ctx-btn-primary-border) 85%, black);
}

/* Mailchimp embed: its inline <style> sets Helvetica 14px + white bg on the wrapper */
div#mc_embed_signup{
	font: inherit;
	background: transparent;
}
/* form layout specs */
form .form-row{
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}
form .form-field{
	flex: 1 1 100%;
	min-width: 0;
}
@media screen and (min-width: 768px){
	form .form-field.w50{ flex: 1 1 calc(50% - 12px); }
	form .form-field.w25{ flex: 1 1 calc(25% - 18px); }
}

/* contact form 7 overrides */
div.wpcf7{
	padding-top: 1.25em;
}
.wpcf7-form > p:last-of-type{
	margin-bottom: 0;
	padding-bottom: 0;
}
form .wpcf7-not-valid{
	border-color: var(--color-error);
}
form .wpcf7-form-control-wrap .wpcf7-not-valid-tip{
	display: inline-block;
	margin-top: -7px;
	padding: 2px 12px;
	background: var(--color-error);
	border-radius: var(--border-radius);
	font-size: .775em;
	color: var(--color-on-feedback);
}
.wpcf7-list-item{
	margin-left: 2px;
}
.wpcf7-list-item-label{
	margin-left: 6px;
}
.wpcf7-checkbox{
	display: block;
	margin-bottom: 2.5em;
}
.wpcf7-checkbox > span{
	display: block;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{
	margin: 0;
	margin-top: 0;
	padding: .75em 1.5em;
	border: 0;
	border-radius: var(--border-radius);
	color: var(--color-on-feedback);
	background: var(--color-error);
}
form .wpcf7-spinner{
	position: relative;
	top: 5px;
	display: inline-block;
	background: var(--ctx-fg);
	opacity: 1;
}
.wpcf7-spinner::before{
	background: var(--color-on-feedback);
}
form .wpcf7-acceptance label{
	display: block;
	position: relative;
	top: 0;
	left: -6px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	font-size: 14px;
	user-select: none;
}
form .wpcf7-acceptance .wpcf7-list-item{
	margin: 0;
	padding: 0;
}

/* Hide the browser's default checkbox */
form .wpcf7-acceptance input{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
form .wpcf7-acceptance .wpcf7-list-item-label{
	position: relative;
	padding-top: 2px;
	padding-left: 32px;
}

/* Create a custom checkbox */
form .wpcf7-acceptance .wpcf7-list-item-label::before{
	position: absolute;
	top: 0;
	left: 0;
	height: 22px;
	width: 22px;
	background-color: #ced8de;
	border: solid 2px #ced8de;
	border-radius: var(--border-radius);
}

/* When the checkbox is checked, add a blue background */
form .wpcf7-acceptance label input:checked ~ .wpcf7-list-item-label::before {
	border-color: var(--color-success);
	background-color: var(--color-success);
}

/* Create the checkmark/indicator (hidden when not checked) */
.wpcf7-list-item-label::after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
form .wpcf7-acceptance label input:checked ~ .wpcf7-list-item-label::after {
  display: block;
}

/* Style the checkmark/indicator */
form .wpcf7-acceptance label .wpcf7-list-item-label::after{
  left: 7px;
  top: 2px;
  width: 8px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}










/* ************************************************************************************** */
/* Extra RTE stylings */
/* ************************************************************************************** */
p.introtext{
	font-size: 1.35em;
	line-height: 1.5;
	font-weight: 300;   /* same as body text */
	letter-spacing: -.015em;
}
li p.introtext{
	margin-bottom: 0;
}
p.caption{
	margin: 0 0 24px 0;
	font-size: 14px;
	font-weight: 400;
}
p.footnote{
	margin: 12px 0 24px 0;
	font-size: 14px;
}
p.pre-headline{
	font-size: 1.2em;
	line-height: 1.5;
	letter-spacing: -.015em;
	margin-bottom: .25em;
	font-weight: 600;
}
.rounded{
	border-radius: var(--border-radius);
	overflow: hidden;
}

/* Heading on a full-width colour stripe.
   In the RTE these are offered for h2 only (see editor-style.css). */
[class*="stripe-"]{
	display: block;
	margin-bottom: 0;   /* sits flush on whatever follows, e.g. a [post_item] card */
	padding: .4em .7em;
	font-weight: 400;
	color: var(--palette-white);
}
[class*="stripe-"] em{ color: inherit; }
.stripe-rose-light{ background-color: var(--palette-rose-light); }




/* ************************************************************************************** */
/* a.btn	 */
/* Common styles for buttons */
/* ************************************************************************************** */

a.btn{
	position: relative;
	overflow: hidden;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 16px 8px 0 0;
	padding: 10px 36px 10px 16px;
	font-size: 0.8125rem;   /* 13px — matches the content-sections tabs */
	line-height: 20px;
	font-style: normal;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	/*border-radius: 12px 4px 12px 4px;*/
	border: 0;
	border: solid 2px transparent;
	transition: all .15s;
}
.btn:active{
	box-shadow: none;
}
.btn::after {
	position: absolute;
	right: 13px;
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat center center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230b3b5b; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='14.26 5.51 12.84 6.92 16.92 11 3.33 11 3.33 13 16.92 13 12.84 17.08 14.26 18.49 20.75 12 14.26 5.51'/%3E%3C/svg%3E") no-repeat center center;
	-webkit-mask-size: 22px 22px;
	mask-size: 22px 22px;
	transition: all 0.25s;
}
.btn:hover::after{
	right: 8px;
}

/* .btn-primary */
.btn.btn-primary{
	color: var(--ctx-btn-primary-text);
	background: var(--ctx-btn-primary-bg);
	border-color: var(--ctx-btn-primary-border);
}
.btn.btn-primary:hover{
	color: var(--ctx-btn-primary-text);
	background: color-mix(in srgb, var(--ctx-btn-primary-bg) 85%, white);
	border-color: color-mix(in srgb, var(--ctx-btn-primary-border) 85%, white);
}
.btn.btn-primary:focus-visible{
	color: var(--ctx-btn-primary-text);
	background: color-mix(in srgb, var(--ctx-btn-primary-bg) 85%, white);
	border-color: color-mix(in srgb, var(--ctx-btn-primary-border) 85%, white);
	box-shadow: 0px 0px 0px 2px #fff inset;
}
.btn.btn-primary:active{
	color: var(--ctx-btn-primary-text);
	background: color-mix(in srgb, var(--ctx-btn-primary-bg) 85%, black);
	border-color: color-mix(in srgb, var(--ctx-btn-primary-border) 85%, black);
}

/* .btn-secondary */
.btn.btn-secondary{
	color: var(--ctx-btn-secondary-text);
	background: var(--ctx-btn-secondary-bg);
	border-color: var(--ctx-btn-secondary-border);
}
.btn.btn-secondary:hover{
	color: var(--ctx-btn-secondary-text);
	background: color-mix(in srgb, var(--ctx-btn-secondary-bg) 85%, white);
	border-color: color-mix(in srgb, var(--ctx-btn-secondary-border) 85%, white);
}
.btn.btn-secondary:focus-visible{
	color: var(--ctx-btn-secondary-text);
	background: color-mix(in srgb, var(--ctx-btn-secondary-bg) 85%, white);
	border-color: color-mix(in srgb, var(--ctx-btn-secondary-border) 85%, white);
	box-shadow: 0px 0px 0px 2px #fff inset;
}
.btn.btn-secondary:active{
	color: var(--ctx-btn-secondary-text);
	background: color-mix(in srgb, var(--ctx-btn-secondary-bg) 85%, black);
	border-color: color-mix(in srgb, var(--ctx-btn-secondary-border) 85%, black);
}

/* .btn-outline */
.btn.btn-outline{
	color: var(--ctx-btn-outline-text);
	background: var(--ctx-btn-outline-bg);
	border-color: var(--ctx-btn-outline-border);
}
.btn.btn-outline:hover{
	color: var(--ctx-btn-outline-text);
	background: color-mix(in srgb, var(--ctx-btn-outline-bg) 85%, white);
	border-color: color-mix(in srgb, var(--ctx-btn-outline-border) 85%, white);
}
.btn.btn-outline:focus-visible{
	color: var(--ctx-btn-outline-text);
	background: color-mix(in srgb, var(--ctx-btn-outline-bg) 85%, white);
	border-color: color-mix(in srgb, var(--ctx-btn-outline-border) 85%, white);
	box-shadow: 0px 0px 0px 2px #fff inset;
}
.btn.btn-outline:active{
	color: var(--ctx-btn-outline-text);
	background: color-mix(in srgb, var(--ctx-btn-outline-bg) 85%, black);
	border-color: color-mix(in srgb, var(--ctx-btn-outline-border) 85%, black);
}

/* .btn-accent */
.btn.btn-accent{
	color: var(--ctx-btn-accent-text);
	background: var(--ctx-btn-accent-bg);
	border-color: var(--ctx-btn-accent-border);
}
.btn.btn-accent:hover{
	color: var(--ctx-btn-accent-text);
	background: color-mix(in srgb, var(--ctx-btn-accent-bg) 85%, white);
	border-color: color-mix(in srgb, var(--ctx-btn-accent-border) 85%, white);
}
.btn.btn-accent:focus-visible{
	color: var(--ctx-btn-accent-text);
	background: color-mix(in srgb, var(--ctx-btn-accent-bg) 85%, white);
	border-color: color-mix(in srgb, var(--ctx-btn-accent-border) 85%, white);
	box-shadow: 0px 0px 0px 2px #fff inset;
}
.btn.btn-accent:active{
	color: var(--ctx-btn-accent-text);
	background: color-mix(in srgb, var(--ctx-btn-accent-bg) 85%, black);
	border-color: color-mix(in srgb, var(--ctx-btn-accent-border) 85%, black);
}





/* Icons: Phosphor Icons, regular weight (phosphoricons.com)
   download-simple (U+E20A), check (U+E182) */
li.download,
li.checkmark {
    list-style: none;
	margin-left: 0;
    padding-left: 32px; /* icon width + gap */
    position: relative;
}

li.download::before,
li.checkmark::before {
    content: '';
    display: inline-block;
    width: 1.5em;   /* ← control size here */
    height: 1.5em;
    position: absolute;
    left: 0;
    top: -0.05em;   /* vertical alignment tweak */
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
li.download::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z'/%3E%3C/svg%3E");
}
li.checkmark::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
}

ul.no-bullets{
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}



/* ************************************************************************************** */
/* button.toggle-button */
/* ************************************************************************************** */
button.toggle-button{
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	margin: 0 0 2em 0;
	padding: 0;
	font-size: 1em;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	border: 0;
	background: transparent;
	cursor: pointer;
}
button.toggle-button::after{
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	margin-left: .5em;
	border-radius: 50px;
	background: no-repeat center center var(--ctx-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %230b3b5b; stroke-width: 3; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3Cline class='cls-1' x1='12' y1='18' x2='12' y2='6'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 24px 24px;
	transition: transform .2s;
}
button.toggle-button.active::after{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %230b3b5b; stroke-width: 3; stroke-miterlimit: 10; %7D %3C/style%3E%3C/defs%3E%3Cline class='cls-1' x1='18' y1='12' x2='6' y2='12'/%3E%3C/svg%3E");
	transform: rotate(180deg);
}


/* used by expandable panels through shortcode - not the best solution... */
.initially-hidden{
	display: none;
}

/* ************************************************************************************** */



p.va_bottom{
	margin-top: auto;
	margin-bottom: 0;
}
p.va_bottom .button-primary,
p.va_bottom .button-secondary{
	margin-bottom: 0;
}
/* .screen-reader-text is WordPress core's name for the same thing (pagination headings etc.) */
.visually-hidden,
.screen-reader-text {
	position: absolute !important;
	height: 1px; 
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.soft-hyphen::after{
	display: block;
	float: none;
	clear: both;
	content: "";
}

/* sticky footer */
html, body {
	height: 100%;
}
body {
	display: flex;
	flex-direction: column;
}
#main {
	flex: 1 0 auto;
}
#footer {
	flex-shrink: 0;
}
/* /sticky footer */


.pad{
	padding: 0 var(--padding-section);
}
.container{
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	
}





/* ************************************************************************************** */
/* page sections — base rules */
/* ************************************************************************************** */

/* --- Base section --- */
.page-section {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: var(--padding-section) 0;
	background: url() no-repeat center center transparent;
}

/* --- First section (non-hero): extra air below fixed header --- */
.page-section.section-1:not(.hero) {
	padding-top: calc( var(--padding-section) + var(--padding-section) );
}

/* --- Padding utilities (via additional CSS class) --- */
.page-section.no-padding { padding: 0; }
.page-section.no-padding-top { padding-top: 0; }
.page-section.no-padding-bottom { padding-bottom: 0; }
.page-section.extra-padding { padding: calc( var(--padding-section) * 2 ); }
.page-section.extra-padding-top { padding-top: calc( var(--padding-section) * 2 ); }
.page-section.extra-padding-bottom { padding-bottom: calc( var(--padding-section) * 2 ); }

/* --- Section intro & outro --- */
.section-intro,
.section-outro {
	display: block;
	width: 100%;
	max-width: var(--content-wrap-max-width);
	margin: 0 auto 0 0;
	padding: 0;
}
.section-intro { padding-bottom: var(--padding-content); }
.page-section.compact .section-intro { padding-bottom: 12px; }
/* An intro that ends with a stripe heading sits flush on the items below */
.section-intro:has(> .intro-outro-wrap > [class*="stripe-"]:last-child) { padding-bottom: 0; }
.section-outro { padding-top: var(--padding-content); }
.page-section.centered .section-intro,
.page-section.centered .section-outro { margin: 0 auto; }

.page-section.section-intro-w50c .section-intro {
	width: 47%;
	margin-left: auto;
	margin-right: auto;
}

/* --- Width constraint utility --- */
.page-section.w66 .items-container {
	width: 66%;
	margin-left: auto;
	margin-right: auto;
}

/* --- Content-wrap base + vertical alignment --- */
.content-wrap {
	width: 100%;
	max-width: var(--content-wrap-max-width);
	padding: 0;
}
.va_top .content-wrap {
	align-self: flex-start;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.va_middle .content-wrap { align-self: center; }
.va_bottom .content-wrap { align-self: flex-end; }


/* backgrounds for sections, cells and whatnots
   Each .bg-* class overrides --ctx-* tokens so child components
   automatically adapt their colours — no extra selectors needed. */
.bg-transparent{ background-color: transparent; color: inherit; }
.bg-inherit{ background-color: inherit; }
.bg-image{ background: url() no-repeat center center transparent; background-size: cover; }


/* Each .bg-* class re-declares EVERY --ctx-* token so values from a parent
   bg-* context can't bleed through via CSS custom property inheritance.

   Auto-paired text (per Sofia's colour defs): White and Light gray carry Ink text;
   Rose carries White text. */


/* ----- WHITE: explicit light context (resets back to root defaults) ----- */

.bg-white, .item.bg-white, .ibg-white .container{
	--ctx-bg:      var(--palette-white);
	--ctx-surface: var(--palette-light-gray);

	--ctx-fg:            var(--palette-ink);
	--ctx-fg-card:       var(--palette-black);   /* item-card text: one colour for every line */
	--ctx-fg-muted:      var(--palette-gray);

	--ctx-fg-heading:    var(--palette-ink);
	--ctx-fg-heading-em: var(--ctx-fg-heading);

	--ctx-accent:        var(--palette-rose);
	--ctx-accent-fg:     var(--palette-white);

	--ctx-border:        var(--palette-gray);
	--ctx-border-subtle: var(--palette-light-gray);

	--ctx-btn-primary-bg:      var(--palette-black);
	--ctx-btn-primary-text:    var(--palette-white);
	--ctx-btn-primary-border:  var(--palette-black);

	--ctx-btn-secondary-bg:     var(--palette-gray-mid);
	--ctx-btn-secondary-text:   var(--palette-white);
	--ctx-btn-secondary-border: var(--palette-gray-mid);

	--ctx-btn-outline-bg:      transparent;
	--ctx-btn-outline-text:    var(--palette-ink);
	--ctx-btn-outline-border:  var(--palette-ink);

	--ctx-btn-accent-bg:       var(--palette-rose);
	--ctx-btn-accent-text:     var(--palette-white);
	--ctx-btn-accent-border:   var(--palette-rose);

	background-color: var(--ctx-bg);
	color:            var(--ctx-fg);
	border-color:     var(--ctx-border);
}


/* ----- LIGHT GRAY (black 10%, ink text) ----- */

.bg-light-gray, .item.bg-light-gray, .ibg-light-gray .container{
	--ctx-bg:      var(--palette-light-gray);
	--ctx-surface: var(--palette-white);

	--ctx-fg:            var(--palette-ink);
	--ctx-fg-card:       var(--palette-black);   /* item-card text: one colour for every line */
	--ctx-fg-muted:      var(--palette-gray);

	--ctx-fg-heading:    var(--palette-ink);
	--ctx-fg-heading-em: var(--ctx-fg-heading);

	--ctx-accent:        var(--palette-rose);
	--ctx-accent-fg:     var(--palette-white);

	--ctx-border:        var(--palette-gray);
	--ctx-border-subtle: color-mix(in srgb, var(--palette-light-gray) 85%, var(--palette-ink));

	--ctx-btn-primary-bg:      var(--palette-black);
	--ctx-btn-primary-text:    var(--palette-white);
	--ctx-btn-primary-border:  var(--palette-black);

	--ctx-btn-secondary-bg:     var(--palette-gray-mid);
	--ctx-btn-secondary-text:   var(--palette-white);
	--ctx-btn-secondary-border: var(--palette-gray-mid);

	--ctx-btn-outline-bg:      transparent;
	--ctx-btn-outline-text:    var(--palette-ink);
	--ctx-btn-outline-border:  var(--palette-ink);

	--ctx-btn-accent-bg:       var(--palette-rose);
	--ctx-btn-accent-text:     var(--palette-white);
	--ctx-btn-accent-border:   var(--palette-rose);

	background-color: var(--ctx-bg);
	color:            var(--ctx-fg);
	border-color:     var(--ctx-border);
}


/* ----- ROSE ----- */

.bg-rose, .item.bg-rose, .ibg-rose .container{
	--ctx-bg:      var(--palette-rose);
	--ctx-surface: color-mix(in srgb, var(--palette-rose) 75%, white);

	--ctx-fg:            var(--palette-white);
	--ctx-fg-card:       var(--palette-white);   /* item-card text: one colour for every line */
	--ctx-fg-muted:      color-mix(in srgb, var(--palette-white) 75%, var(--palette-rose));

	--ctx-fg-heading:    var(--palette-white);
	--ctx-fg-heading-em: color-mix(in srgb, var(--palette-white) 75%, var(--palette-rose));

	--ctx-accent:        var(--palette-white);
	--ctx-accent-fg:     var(--palette-rose);

	--ctx-border:        var(--palette-white);
	--ctx-border-subtle: color-mix(in srgb, var(--palette-white) 40%, var(--palette-rose));

	--ctx-btn-primary-bg:      var(--palette-white);
	--ctx-btn-primary-text:    var(--palette-rose);
	--ctx-btn-primary-border:  var(--palette-white);

	--ctx-btn-secondary-bg:     transparent;
	--ctx-btn-secondary-text:   var(--palette-white);
	--ctx-btn-secondary-border: var(--palette-white);

	--ctx-btn-outline-bg:      transparent;
	--ctx-btn-outline-text:    var(--palette-white);
	--ctx-btn-outline-border:  var(--palette-white);

	--ctx-btn-accent-bg:       var(--palette-white);
	--ctx-btn-accent-text:     var(--palette-rose);
	--ctx-btn-accent-border:   var(--palette-white);

	background-color: var(--ctx-bg);
	color:            var(--ctx-fg);
	border-color:     var(--ctx-border);
}





/* Text color overrides — for use with background images via additional CSS class */
.light-text {
	--ctx-fg:            var(--palette-white);
	--ctx-fg-card:       var(--palette-white);   /* item-card text: one colour for every line */
	--ctx-fg-muted:      var(--palette-light-gray);
	--ctx-fg-heading:    var(--palette-white);
	--ctx-fg-heading-em: var(--palette-light-gray);
	--ctx-border:        var(--palette-white);
	--ctx-border-subtle: var(--palette-light-gray);
	--ctx-accent:        var(--palette-white);
	--ctx-accent-fg:     var(--palette-ink);
	color:               var(--ctx-fg);
}
.dark-text {
	--ctx-fg:            var(--palette-ink);
	--ctx-fg-card:       var(--palette-black);   /* item-card text: one colour for every line */
	--ctx-fg-muted:      var(--palette-gray);
	--ctx-fg-heading:    var(--palette-ink);
	--ctx-fg-heading-em: var(--ctx-fg-heading);
	--ctx-border:        var(--palette-gray);
	--ctx-border-subtle: var(--palette-light-gray);
	--ctx-accent:        var(--palette-rose);
	--ctx-accent-fg:     var(--palette-white);
	color:               var(--ctx-fg);
}

/* ************************************************************************************** */
/* single */
/* ************************************************************************************** */
.single .wp-post-image{
	margin-bottom: 48px;
}

.article-meta{
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: 24px;
	font-size: 14px;
	font-style: italic;
	text-transform: uppercase;
}
.article-meta ul.post-categories{
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.single .cell-1 .content-wrap{
	max-width: 100%;
}
.single .cell-2 .content-wrap{
	padding-right: 48px;
}
/* ************************************************************************************** */





/* ************************************************************************************** */
/* search.php */
/* ************************************************************************************** */
.search-results__heading{
	margin-bottom: var(--padding-content);
}
.search-results__heading em{
	font-style: italic;
}
.search-result{
	margin-bottom: var(--padding-content);
}
.search-result__label{
	font-size: 14px;
	margin-bottom: 0.25em;
	color: var(--ctx-fg-muted, #666);
}
.search-result__separator{
	margin: 0 0.35em;
}
.search-result__title{
	margin-bottom: 0.25em;
}
.search-result__excerpt{
	margin-bottom: 0.25em;
}
.search-result__link{
	margin-top: 0;
}
.search-results__pagination{
	margin-top: var(--padding-content);
}
/* ************************************************************************************** */







/* ============================================================
   SOCIAL ICONS
   ============================================================ */

/* Icons are Phosphor (bold weight) — https://phosphoricons.com
   Rendered with background-color: currentColor + mask-image, so the
   icon color follows the text color of the surrounding context. */

a.icon {
	display: inline-block;
	width: 2.5em;
	height: 2.5em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: 2em 2em;
	mask-size: 2em 2em;
	opacity: 0.9;
}

.icon.icon-facebook {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm12,191.13V156h20a12,12,0,0,0,0-24H140V112a12,12,0,0,1,12-12h16a12,12,0,0,0,0-24H152a36,36,0,0,0-36,36v20H96a12,12,0,0,0,0,24h20v55.13a84,84,0,1,1,24,0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm12,191.13V156h20a12,12,0,0,0,0-24H140V112a12,12,0,0,1,12-12h16a12,12,0,0,0,0-24H152a36,36,0,0,0-36,36v20H96a12,12,0,0,0,0,24h20v55.13a84,84,0,1,1,24,0Z'/%3E%3C/svg%3E");
}

.icon.icon-instagram {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,72a24,24,0,1,1,24-24A24,24,0,0,1,128,152ZM176,20H80A60.07,60.07,0,0,0,20,80v96a60.07,60.07,0,0,0,60,60h96a60.07,60.07,0,0,0,60-60V80A60.07,60.07,0,0,0,176,20Zm36,156a36,36,0,0,1-36,36H80a36,36,0,0,1-36-36V80A36,36,0,0,1,80,44h96a36,36,0,0,1,36,36ZM196,76a16,16,0,1,1-16-16A16,16,0,0,1,196,76Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,72a24,24,0,1,1,24-24A24,24,0,0,1,128,152ZM176,20H80A60.07,60.07,0,0,0,20,80v96a60.07,60.07,0,0,0,60,60h96a60.07,60.07,0,0,0,60-60V80A60.07,60.07,0,0,0,176,20Zm36,156a36,36,0,0,1-36,36H80a36,36,0,0,1-36-36V80A36,36,0,0,1,80,44h96a36,36,0,0,1,36,36ZM196,76a16,16,0,1,1-16-16A16,16,0,0,1,196,76Z'/%3E%3C/svg%3E");
}

.icon.icon-pinterest {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,112c0,23.6-8.29,45.23-23.35,60.88C190.52,187.57,171.33,196,152,196c-15.45,0-26.78-4.18-34.89-9.31l-9.43,40.06a12,12,0,1,1-23.36-5.5l32-136a12,12,0,1,1,23.36,5.5l-16.45,69.93C126.72,164.86,135.16,172,152,172c25.56,0,52-22.45,52-60A68,68,0,1,0,77.09,146a12,12,0,0,1-20.77,12A92,92,0,1,1,228,112Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,112c0,23.6-8.29,45.23-23.35,60.88C190.52,187.57,171.33,196,152,196c-15.45,0-26.78-4.18-34.89-9.31l-9.43,40.06a12,12,0,1,1-23.36-5.5l32-136a12,12,0,1,1,23.36,5.5l-16.45,69.93C126.72,164.86,135.16,172,152,172c25.56,0,52-22.45,52-60A68,68,0,1,0,77.09,146a12,12,0,0,1-20.77,12A92,92,0,1,1,228,112Z'/%3E%3C/svg%3E");
}

.icon.icon-linkedin {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,20H40A20,20,0,0,0,20,40V216a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V40A20,20,0,0,0,216,20Zm-4,192H44V44H212ZM112,176V120a12,12,0,0,1,21.43-7.41A40,40,0,0,1,192,148v28a12,12,0,0,1-24,0V148a16,16,0,0,0-32,0v28a12,12,0,0,1-24,0ZM96,120v56a12,12,0,0,1-24,0V120a12,12,0,0,1,24,0ZM68,80A16,16,0,1,1,84,96,16,16,0,0,1,68,80Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,20H40A20,20,0,0,0,20,40V216a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V40A20,20,0,0,0,216,20Zm-4,192H44V44H212ZM112,176V120a12,12,0,0,1,21.43-7.41A40,40,0,0,1,192,148v28a12,12,0,0,1-24,0V148a16,16,0,0,0-32,0v28a12,12,0,0,1-24,0ZM96,120v56a12,12,0,0,1-24,0V120a12,12,0,0,1,24,0ZM68,80A16,16,0,1,1,84,96,16,16,0,0,1,68,80Z'/%3E%3C/svg%3E");
}














@media screen and (min-width: 768px){

	.soft-hyphen{
		display: none;
	}

	h1,
	h2.as-h1{
		font-size: 40px;
	}

}

@media (max-width: 1023px) {

	.hide-s{
		display: none;
	}

}
	
@media (min-width: 1024px) {

	body{
		font-size: 17px;
	}
	
	.hide-l{
		display: none;
	}

}

@media (min-width: 1280px) {
	
	h1,
	h2.as-h1{
		font-size: 44px;
	}
	p.pre-headline{
		font-size: 1.5em;
	}

}