/*
Theme Name: STRATEGAD
Theme URI: http://strategad.com
Author: Alex Cristache @ Strategad
Author URI: http://strategad.com/
Description: Custom WordPress Theme — redesigned
Version: 2.0
Text Domain: strategad
*/

:root {
	--color-red:        #ED1846;
	--color-red-dark:   #c91138;
	--color-bubble:     #EFD1D7;
	--color-text:       #555555;
	--color-text-meta:  #666666;
	--color-text-soft:  #999999;
	--color-ink:        #191919;
	--color-paper:      #F8F5F5;
	--color-border:     #EEEEEE;
	--color-white:      #FFFFFF;
	--color-purple:     #3A204B;
	--font-serif: 'Georgia', 'Old Standard TT', 'Times New Roman', serif;
	--font-sans:  'Lato', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	--ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out-cubic:  cubic-bezier(0.33, 1, 0.68, 1);
	--d-micro:    200ms;
	--d-mid:      300ms;
	--d-entrance: 700ms;
	--d-ornament: 1200ms;
}

.grayscale { filter: grayscale(100%); -webkit-filter: grayscale(100%); }
.grayscale.grayscale-fade { transition: -webkit-filter .5s, filter .5s; }
.grayscale.grayscale-fade:hover { -webkit-filter: grayscale(0%); filter: none; }

*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; height: 100%; }
body {
	height: 100%;
	margin: 0 auto;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.55;
	color: var(--color-text);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-ink); outline: 0; text-decoration: none; }
a:hover { color: var(--color-red); }
a img { border: 0; }
img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: 400;
	color: var(--color-ink);
	line-height: 1.15;
	letter-spacing: -0.005em;
	margin: 1.4em 0 0.7em;
}
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; }

[data-reduced-motion="true"] * {
	animation-duration: 0.001ms !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}
:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }

.stg-skip-link {
	position: absolute; left: 8px; top: 8px; z-index: 999;
	background: var(--color-red); color: #fff; padding: 8px 14px;
	font: 11px/1 var(--font-sans); letter-spacing: 2px; text-transform: uppercase;
	transform: translateY(-200%); transition: transform 200ms var(--ease-out);
}
.stg-skip-link:focus { transform: translateY(0); }

.text-center { text-align: center; }
.hide-mobile { display: block; }
.small { font-size: 0.75em; }

.button,
.pagination a {
	position: relative;
	display: inline-block;
	padding: 12px 18px;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--color-red);
	border: 1px solid var(--color-red);
	z-index: 1;
	transition: background-color var(--d-micro) var(--ease-out), color var(--d-micro) var(--ease-out);
}
.button:hover,
.pagination a:hover { color: var(--color-red); background-color: #fff; }
.button:after, .pagination a:after { content: none; }

.headline-big, .headline-medium, .headline-small {
	font-family: var(--font-serif);
	font-weight: 400;
	letter-spacing: -0.005em;
	line-height: 1.15;
	white-space: normal;
	word-wrap: break-word;
	color: var(--color-ink);
}
.headline-big    { font-size: 60px; }
.headline-medium { font-size: 30px; }
.headline-small  { font-size: 24px; }
.headline-big a, .headline-medium a, .headline-small a { color: var(--color-ink); }
.headline-big a:hover, .headline-medium a:hover, .headline-small a:hover { color: var(--color-red); }

.preheadline {
	display: block;
	padding: 0;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-red);
	opacity: 0.85;
	margin-bottom: 14px;
}
.preheadline a { display: inline-block; position: relative; color: var(--color-red); font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
.preheadline a:hover { color: var(--color-purple); }
.headline-big.preheaded, .headline-medium.preheaded, .headline-small.preheaded { margin-top: 10px; }

a.link {
	display: inline-block;
	position: relative;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-red);
	border-bottom: 1px solid var(--color-red);
	padding-bottom: 4px;
	transition: color var(--d-micro) var(--ease-out), border-color var(--d-micro) var(--ease-out);
}
a.link:hover { color: var(--color-purple); border-color: var(--color-purple); }
a.link:after, .preheadline a:after { content: none; }

.intro { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--color-text); }

.clear:before, .clear:after, .container:before, .container:after { content: " "; display: table; }
.clear:after, .container:after { clear: both; }
.container { margin: 0 auto; width: 80%; max-width: 1280px; }

.grid:not('.container') { margin: 0 auto; width: 100%; }
.grid.spaced { padding: 5% 0; }
.row { margin: 0 auto; }
.grid.spaced .row { margin-left: -15px; margin-right: -15px; }

.col-1-1, .col-1-2, .col-1-3, .col-2-3, .col-1-4, .col-3-4 { float: left; }
.col-1-1 { width: 100%; }
.col-1-2 { width: 50%; }
.col-1-3 { width: 33.333%; }
.col-2-3 { width: 66.667%; }
.col-1-4 { width: 25%; }
.col-3-4 { width: 75%; }

.grid.spaced .col-1-1, .grid.spaced .col-1-2, .grid.spaced .col-1-3,
.grid.spaced .col-2-3, .grid.spaced .col-1-4, .grid.spaced .col-3-4,
.col-spaced { padding: 15px; }
.col-spaced-h { padding-top: 0 !important; padding-bottom: 0 !important; }

.grid:before, .grid:after, .row:before, .row:after { content: " "; display: table; }
.grid:after, .row:after { clear: both; }
.row-flex { display: flex; flex-direction: row; flex-flow: row wrap; }
.row-flex:before, .row-flex:after { display: none; }

.box-white { background-color: #fff; color: var(--color-text); padding: 5% 8%; }
.box-grey  { background-color: var(--color-paper); color: var(--color-text); padding: 5% 8%; }
.box-black { background-color: var(--color-ink); color: rgba(255,255,255,0.8); padding: 5% 8%; }
.col-1-3.box-white, .col-1-3.box-grey, .col-1-3.box-black { padding: 5%; }
.box-black .headline-big, .box-black .headline-big a,
.box-black .headline-medium, .box-black .headline-medium a,
.box-black .headline-small, .box-black .headline-small a { color: #fff; }
.box-black a.link { color: #fff; border-color: #fff; }
.box-black a.link:hover { color: var(--color-red); border-color: var(--color-red); }

#header {
	position: fixed; top: 0; left: 0; right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 48px;
	background: transparent;
	transition: background var(--d-mid) var(--ease-out), box-shadow var(--d-mid) var(--ease-out);
}
#header::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.28), transparent);
	pointer-events: none; z-index: -1;
	transition: opacity var(--d-mid) var(--ease-out);
}
#header.is-solid { background: var(--color-red); box-shadow: 0 1px 0 rgba(0,0,0,0.04); }
#header.is-solid::before { opacity: 0; }

#logo { padding: 0; }
#logo a {
	display: inline-flex; align-items: center; gap: 14px;
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: none;
	color: #fff;
}
#logo a:hover { color: #fff; opacity: 0.85; }

.stg-logo-mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--color-red);
	color: #fff;
	flex-shrink: 0;
	transition: background var(--d-micro) var(--ease-out), color var(--d-micro) var(--ease-out);
}
.stg-logo-mark svg { width: 16px; height: 16px; fill: currentColor; }
#header.is-solid .stg-logo-mark { background: #fff; color: var(--color-red); }

#nav { margin-top: 0; }
#nav ul {
	margin: 0; padding: 0;
	display: flex; gap: 38px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	list-style-type: none;
}
#nav > ul { overflow: visible; }
#nav ul li { display: inline-flex; margin: 0; }
#nav ul li:before { content: none; padding: 0; }
#nav ul li a {
	display: inline-block;
	margin: 0;
	padding-bottom: 4px;
	color: #fff;
	border-bottom: 1px solid transparent;
	transition: opacity var(--d-micro) var(--ease-out), border-color var(--d-micro) var(--ease-out);
}
#nav ul li a:hover { color: #fff; opacity: 0.78; }
#nav ul li a:after { content: none; }
#nav ul li.current-menu-item > a, #nav ul li.current_page_item > a, #nav ul li.current-menu-parent > a { border-bottom-color: #fff; font-weight: 700; }

.stg-nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 0; cursor: pointer; }
.stg-nav-toggle span { display: block; width: 22px; height: 1.5px; background: #fff; transition: transform 200ms var(--ease-out); }
.stg-nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.stg-nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

body.stg-page-404,
body:not(.stg-page-home):not(.stg-page-about):not(.stg-page-services):not(.stg-page-clients):not(.stg-page-contact):not(.stg-page-journal):not(.stg-page-jobs):not(.stg-page-article) #main-content { padding-top: 86px; }

#hero {
	position: relative;
	width: 100%;
	min-height: 580px;
	padding: 18% 0 14%;
	color: #fff;
	background-color: #2a0a14;
	overflow: hidden;
}
#hero:after {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 30% 80%, rgba(0,0,0,0.45), transparent 60%),
		linear-gradient(180deg, rgba(237,24,70,0.18), rgba(237,24,70,0.32)),
		repeating-linear-gradient(115deg, rgba(0,0,0,0) 0 24px, rgba(0,0,0,0.08) 24px 25px),
		linear-gradient(135deg, #2b0612 0%, #6a0e25 35%, var(--color-red) 100%);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 0;
	transition: transform 0.5s ease-in-out;
}
#hero:hover:after { transform: scale(1.03); }
#hero .container { position: relative; z-index: 2; text-align: center; }
#hero .preheadline, #hero .preheadline a { color: #fff; opacity: 0.92; letter-spacing: 0.5em; font-size: 13px; }
#hero .headline-big { color: #fff; width: 100%; font-size: 60px; }
#hero .headline-big a { color: #fff; }
#hero a:hover { color: #fff; opacity: 0.85; }

.fancy-headline {
	position: relative;
	width: 100%;
	min-height: 460px;
	padding: 200px 8% 80px;
	color: #fff;
	background-image: linear-gradient(135deg, #2b0612 0%, #6a0e25 35%, #ED1846 100%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.fancy-headline.fancy-big  { padding: 220px 8% 80px; background-attachment: scroll; }
.fancy-headline.fancy-huge { padding: 240px 8% 80px; background-attachment: scroll; }
.fancy-headline.fancy-clean:after { display: none; }
.fancy-headline:after {
	content: '';
	position: absolute; inset: 0; z-index: 0;
	background:
		radial-gradient(ellipse at 30% 80%, rgba(0,0,0,0.45), transparent 60%),
		linear-gradient(180deg, rgba(237,24,70,0.18), rgba(237,24,70,0.45)),
		repeating-linear-gradient(115deg, rgba(0,0,0,0) 0 24px, rgba(0,0,0,0.08) 24px 25px);
	pointer-events: none;
	transition: opacity .3s ease;
}
.fancy-headline.fancy-huge:after {
	background:
		radial-gradient(ellipse at 30% 80%, rgba(0,0,0,0.55), transparent 60%),
		linear-gradient(180deg, rgba(237,24,70,0.22), rgba(237,24,70,0.5)),
		repeating-linear-gradient(115deg, rgba(0,0,0,0) 0 24px, rgba(0,0,0,0.1) 24px 25px);
}
.fancy-headline.fancy-simple { background-image: none !important; background-color: var(--color-ink); }
.fancy-headline.fancy-simple:after { display: none; }
.fancy-headline.fancy-simple.fancy-light { background-color: var(--color-paper); color: var(--color-ink); }
.fancy-headline.fancy-light .headline-big, .fancy-headline.fancy-light .headline-medium, .fancy-headline.fancy-light .headline-small { color: var(--color-ink); }
.single-article .fancy-headline.fancy-image, .single-article .fancy-headline.fancy-big, .single-article .fancy-headline.fancy-huge { background-image: linear-gradient(160deg, #1a040d 0%, #6c0c22 40%, #c81339 100%); }

.fancy-headline > .headline-big, .fancy-headline > .preheadline, .fancy-headline > .intro {
	position: relative; z-index: 2;
	width: 80%;
	max-width: 760px;
	margin-left: auto; margin-right: auto;
	text-align: center;
	color: #fff;
}
.fancy-headline > .preheadline { color: rgba(255,255,255,0.9); }
.fancy-headline > .preheadline a { color: #fff; }
.fancy-headline > .headline-big { color: #fff; font-size: 60px; }
.fancy-headline .headline-big:last-child, .fancy-headline .headline-medium:last-child, .fancy-headline .headline-small:last-child { margin-bottom: 0; }
.fancy-headline > .intro a { color: #fff; }

.fancy-spacer {
	position: relative;
	width: 100%;
	padding: 70px 8%;
	text-align: center;
	color: #fff;
	background-color: var(--color-ink);
	background-image: linear-gradient(135deg, #2b0612 0%, #6a0e25 35%, var(--color-red) 100%);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.fancy-spacer.fancy-red   { background-image: none; background-color: var(--color-red); }
.fancy-spacer.fancy-black { background-image: none; background-color: var(--color-ink); }
.fancy-spacer.fancy-grey  { background-image: none; background-color: var(--color-paper); color: var(--color-ink); }
.fancy-spacer.fancy-white { background-image: none; background-color: #fff; color: var(--color-ink); }
.fancy-spacer .headline-big, .fancy-spacer .headline-big a,
.fancy-spacer .headline-medium, .fancy-spacer .headline-medium a,
.fancy-spacer .headline-small, .fancy-spacer .headline-small a { color: #fff; width: auto; }
.fancy-spacer.fancy-grey .headline-big, .fancy-spacer.fancy-grey .headline-medium, .fancy-spacer.fancy-grey .headline-small,
.fancy-spacer.fancy-white .headline-big, .fancy-spacer.fancy-white .headline-medium, .fancy-spacer.fancy-white .headline-small { color: var(--color-ink); }
.fancy-spacer .headline-big:last-child, .fancy-spacer .headline-medium:last-child, .fancy-spacer .headline-small:last-child { margin-bottom: 0; }
.fancy-spacer a.link { color: #fff; border-color: #fff; }
.fancy-spacer a.link:hover { color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.78); }

.photo { min-height: 250px; background-repeat: no-repeat; background-position: center; background-size: cover; }
.photo-right { float: right !important; }
.photo img { display: none; }

.stg-rail { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 30; }
.stg-rail__big {
	position: absolute;
	left: 60px;
	width: 132px; height: 132px;
	border-radius: 50%;
	border: 1px solid rgba(239, 209, 215, 0.85);
	background: transparent;
	pointer-events: auto;
	cursor: pointer;
	transition: transform 280ms var(--ease-out), background 280ms var(--ease-out);
	padding: 0;
}
.stg-rail__big:hover { transform: scale(1.04); background: rgba(255,255,255,0.06); }
.stg-rail__mark { position: absolute; top: 18px; left: 22px; color: #fff; }
.stg-rail__mark svg { fill: currentColor; }
.stg-rail__name {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	white-space: nowrap;
}
.stg-rail__line { position: absolute; left: 125px; width: 1px; }
.stg-rail__line--pink { background: var(--color-bubble); }
.stg-rail__line--gray { background: rgba(102,102,102,0.55); }
.stg-rail__bubble {
	position: absolute;
	left: 118px;
	width: 14px; height: 14px;
	border-radius: 50%;
	transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.stg-rail__bubble--travel { border: 1px solid rgba(102,102,102,0.75); background: #fff; }
.stg-rail__bubble--travel.is-over-hero { border-color: rgba(239,209,215,0.95); background: transparent; }
.stg-rail__bubble--end { border: 1px solid rgba(102,102,102,0.55); background: transparent; }

.article-archive { padding-top: 5%; padding-bottom: 5%; background-color: #fff; }
.article-image { width: 100%; position: relative; display: block; }
.article-image::before {
	content: ""; position: absolute; top: -6px; left: -6px; right: 6px; bottom: 6px;
	border: 1px solid var(--color-border); pointer-events: none;
}
.article-image, .article-image a { width: 100%; }
.article-image img { display: block; width: 100%; max-width: 100%; height: auto; filter: grayscale(1); transition: filter var(--d-mid) var(--ease-out); }
.article-archive .article { border: 0; background-color: #fff; padding: 24px; transition: background var(--d-micro) var(--ease-out); }
.article-archive .article:hover .article-image img { filter: grayscale(0.2); }

.pagination { margin: 30px 0 100px; display: flex; justify-content: space-between; gap: 16px; }
.pagination .left, .pagination .right { display: inline-block; }

.stg-filterbar { max-width: 1280px; margin: 0 auto 50px; padding: 30px 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
.stg-filterbar__label { font-size: 13px; color: var(--color-text); }
.stg-pill {
	position: relative;
	display: inline-block;
	padding: 12px 22px;
	font-family: var(--font-sans);
	font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--color-text);
	background: transparent;
	border: 1px solid var(--color-border);
	cursor: pointer;
}
.stg-pill.is-active { background: var(--color-bubble); border-color: var(--color-bubble); }
.stg-pill::after {
	content: ""; position: absolute; inset: -5px;
	border: 1px solid var(--color-red);
	pointer-events: none;
	opacity: 0; transform: scale(0.92);
	transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out-cubic);
}
.stg-pill:hover::after { opacity: 1; transform: scale(1); }
.stg-empty { text-align: center; padding: 60px 0; color: var(--color-text-soft); }

.article-body { position: relative; padding: 5% 0; }
.article-body .container { width: 80%; max-width: 720px; padding-right: 0; }
.article-body p { font-size: 17px; line-height: 1.7; color: var(--color-text); margin-bottom: 22px; }

.article-body blockquote {
	position: relative;
	margin: 2em 0;
	padding: 40px 64px 40px 96px;
	background: var(--color-paper);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 17px;
	line-height: 1.65;
	color: var(--color-ink);
	z-index: 1;
}
.article-body blockquote:before {
	content: '\201D';
	position: absolute;
	top: 30px; left: 26px;
	font-family: var(--font-serif);
	font-size: 70px;
	color: var(--color-red);
	line-height: 0.6;
	opacity: 0.85;
}
.article-body blockquote:after { content: none; }
.article-body blockquote > *:first-child { margin-top: 0; }
.article-body blockquote > *:last-child  { margin-bottom: 0; }
.article-body blockquote footer { margin: 14px 0 0; font-family: var(--font-sans); font-size: 12px; font-style: normal; text-align: right; color: var(--color-text-soft); }
.article-body blockquote footer:before { content: none; }
.article-body blockquote footer cite { font-weight: 700; color: var(--color-ink); font-style: normal; }

.article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 {
	font-family: var(--font-serif); color: var(--color-ink);
	letter-spacing: -0.005em; line-height: 1.15; font-weight: 400;
}
.article-body h2 { font-size: 36px; }
.article-body h3 { font-size: 30px; }
.article-body h4 { font-size: 24px; }
.article-body h5 { font-size: 18px; text-transform: uppercase; letter-spacing: 0.1em; }
.article-body h6 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.18em; }
.article-body a { text-decoration: underline; color: var(--color-red); }

.author-box { margin-top: 2em; padding: 30px; background-color: var(--color-paper); font-size: 14px; }

.social-share { margin-top: 2em; display: flex; gap: 12px; }
.social-share a {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 10px 16px;
	background: #fff;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	font-family: var(--font-sans);
	font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
	transition: background var(--d-micro) var(--ease-out), color var(--d-micro) var(--ease-out), border-color var(--d-micro) var(--ease-out);
	width: auto; height: auto; line-height: 1;
}
.social-share a svg { fill: var(--color-red); transition: fill var(--d-micro) var(--ease-out); }
.social-share a:hover { background: var(--color-red); color: #fff; border-color: var(--color-red); }
.social-share a:hover svg { fill: #fff; }

.stg-rhythm { text-align: center; margin: 60px 0 28px; }
.stg-rhythm__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--color-red); opacity: 0.55; }

.stg-hoverframe { position: relative; padding: 50px 44px 46px; min-height: 360px; }
.stg-hoverframe::before, .stg-hoverframe::after { content: ""; position: absolute; width: 40px; height: 40px; pointer-events: none; }
.stg-hoverframe::before { top: 0; left: 0; border-top: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; }
.stg-hoverframe::after  { bottom: 0; right: 0; border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; }
.stg-hoverframe__frame { position: absolute; inset: 0; border: 1px solid #dcdcdc; opacity: 0; transform: scale(0.985); transition: opacity 500ms var(--ease-out-cubic), transform 500ms var(--ease-out-cubic); pointer-events: none; }
.stg-hoverframe:hover .stg-hoverframe__frame { opacity: 1; transform: scale(1); }

.stg-service-card { position: relative; padding: 40px 36px 38px; min-height: 240px; background: #fff; }
.stg-service-card::before, .stg-service-card::after { content: ""; position: absolute; width: 40px; height: 40px; pointer-events: none; }
.stg-service-card::before { top: 0; left: 0; border-top: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; }
.stg-service-card::after  { bottom: 0; right: 0; border-bottom: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; }
.stg-service-card .stg-service-card__frame { position: absolute; inset: 0; border: 1px solid #dcdcdc; opacity: 0; transform: scale(0.985); transition: opacity 500ms var(--ease-out-cubic), transform 500ms var(--ease-out-cubic); pointer-events: none; }
.stg-service-card:hover .stg-service-card__frame { opacity: 1; transform: scale(1); }
.stg-service-card .headline-medium { display: inline-flex; align-items: center; font-size: 32px; margin: 0 0 22px; }
.stg-service-card .headline-medium::before {
	content: ""; width: 8px; height: 8px;
	border-radius: 50%; background: var(--color-purple);
	margin-right: 14px; opacity: 0; transform: scale(0.4);
	transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.stg-service-card:hover .headline-medium::before { opacity: 1; transform: scale(1); }

.stg-service-nav { max-width: 1280px; margin: 40px auto 60px; padding: 0 48px; }
.stg-service-nav__frame { position: relative; border: 1px solid var(--color-border); padding: 36px 28px 28px; }
.stg-service-nav__label { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: #fff; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; }
.stg-service-nav__cells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.stg-service-nav__cell {
	background: var(--color-paper);
	padding: 28px 12px; min-height: 96px;
	font-family: var(--font-serif); font-size: 16px; line-height: 1.25;
	color: var(--color-ink); text-align: center;
	border: 0; cursor: pointer;
	transition: background var(--d-micro) var(--ease-out), color var(--d-micro) var(--ease-out);
}
.stg-service-nav__cell:hover { background: var(--color-red); color: #fff; }

.image-grid .col-1-1, .image-grid .col-1-2, .image-grid .col-1-3, .image-grid .col-2-3, .image-grid .col-1-4, .image-grid .col-3-4 { padding: 0 !important; text-align: center; }
.image-grid img { display: block; margin: 0 auto; max-width: 60%; }
.image-grid .box-grey, .image-grid .box-white { padding: 6% 4%; min-height: 200px; display: flex; align-items: center; justify-content: center; transition: background var(--d-micro) var(--ease-out); }
.image-grid .box-grey:hover { background: #fff; }
.image-grid .box-white:hover { background: var(--color-paper); }

.stg-contact-rows { max-width: 1100px; margin: 0 auto; padding: 0 48px 120px; display: grid; gap: 14px; }
.stg-contact-row {
	background: var(--color-paper);
	border: 1px solid var(--color-border);
	padding: 22px 30px;
	display: grid; grid-template-columns: auto 1fr auto;
	align-items: center; gap: 24px;
	cursor: pointer; position: relative; z-index: 1;
	color: var(--color-ink);
	transition: transform var(--d-micro) var(--ease-out), border-color var(--d-micro) var(--ease-out);
}
.stg-contact-row:hover { border-color: var(--color-red); transform: translateY(-1px); z-index: 2; }
.stg-contact-row__label { font-size: 14.5px; color: var(--color-text); }
.stg-contact-row__value { font-size: 15px; color: var(--color-ink); }

#footer {
	position: relative;
	overflow: hidden;
	padding: 70px 8% 36px;
	font-family: var(--font-sans);
	font-size: 12.5px;
	color: rgba(255,255,255,0.78);
	background-color: var(--color-ink);
}
#footer .brand { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 36px; flex-wrap: wrap; }
#footer .brand .logo {
	display: inline-flex; align-items: center; gap: 14px;
	margin-right: 10px;
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.5px;
	text-transform: none;
	color: #fff;
}
#footer .brand .logo:hover { color: rgba(255,255,255,0.78); }
#footer .social { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 22px; height: 22px; color: #fff; opacity: 0.85; line-height: 1; transition: color var(--d-micro) var(--ease-out), opacity var(--d-micro) var(--ease-out); }
#footer .social:hover { color: var(--color-red); opacity: 1; }
#footer p .social, #footer .footer-list .social { display: inline-block; width: auto; height: auto; color: rgba(255,255,255,0.78); font-size: 12.5px; letter-spacing: 0.04em; margin-right: 12px; }
#footer p .social:hover, #footer .footer-list .social:hover { color: var(--color-red); opacity: 1; }

#footer .footer-cols { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; position: relative; z-index: 2; }
#footer .footer-heading { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: #fff; opacity: 0.85; margin: 0 0 16px; letter-spacing: 0; }
#footer .footer-heading--spaced { margin-top: 36px; }
#footer .footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#footer .footer-list li { font-size: 12.5px; color: rgba(255,255,255,0.78); display: flex; align-items: center; gap: 10px; }
#footer .footer-contact li { font-size: 13px; color: rgba(255,255,255,0.85); gap: 12px; }
#footer .footer-tags { line-height: 2; }

#footer .footer-base { max-width: 1280px; margin: 70px auto 0; display: flex; justify-content: space-between; position: relative; z-index: 2; font-size: 11.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.6); }

.footer-ornament { position: absolute; right: -110px; bottom: -110px; pointer-events: none; z-index: 1; }
.ring-red   { stroke: var(--color-red); stroke-dasharray: 1500; stroke-dashoffset: 1500; }
.ring-white { stroke: #fff;            stroke-dasharray: 1500; stroke-dashoffset: 1500; }
.footer-ornament.is-in .ring-red   { animation: stg-draw 1200ms 0ms   var(--ease-out-cubic) forwards; }
.footer-ornament.is-in .ring-white { animation: stg-draw 1200ms 120ms var(--ease-out-cubic) forwards; }
.ornament-tick { stroke: #fff; stroke-width: 1; opacity: 0.7; stroke-dasharray: 2 5; }
.ornament-dot { opacity: 0; }
.ornament-dot-red   { fill: var(--color-red); }
.ornament-dot-white { fill: #fff; }
.footer-ornament.is-in .ornament-dot-red   { animation: stg-fadein 600ms 800ms  ease-out forwards; }
.footer-ornament.is-in .ornament-dot-white { animation: stg-fadein 600ms 1000ms ease-out forwards; }

@keyframes stg-draw   { to { stroke-dashoffset: 0; } }
@keyframes stg-fadein { to { opacity: 1; } }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--d-entrance) var(--ease-out-cubic), transform var(--d-entrance) var(--ease-out-cubic); }
.reveal.is-in { opacity: 1; transform: none; }

.stg-article-meta { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-soft); margin-bottom: 30px; }
.stg-article-toolbar { max-width: 720px; margin: 40px auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stg-article-toolbar__cat { padding: 10px 18px; border: 1px solid var(--color-border); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text); }
.stg-article-pn { max-width: 720px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; padding: 0 0 100px; }

.stg-404 { text-align: center; max-width: 720px; margin: 0 auto; padding: 80px 24px 100px; }
.stg-404__code { font-family: var(--font-serif); font-size: 143px; line-height: 1; color: var(--color-red); font-weight: 400; margin: 0 0 24px; }

@media screen and (max-width: 1200px) {
	.article-body .container { padding-right: 0; }
	#footer { padding: 60px 6% 30px; }
}
@media screen and (max-width: 1023px) {
	.headline-big { font-size: 44px; }
	.headline-medium, .article-body h2 { font-size: 24px; }
	.headline-small,  .article-body h3 { font-size: 18px; }
	.fancy-spacer, .fancy-headline { padding: 140px 6% 60px; background-attachment: scroll; }
	.fancy-headline.fancy-big, .fancy-headline.fancy-huge { padding: 160px 6% 60px; }
	#hero { padding: 22% 0 14%; min-height: 460px; }
	#hero .headline-big { font-size: 44px; }
	#footer .footer-cols { grid-template-columns: 1fr; gap: 40px; }
	.stg-service-nav__cells { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 768px) {
	body { font-size: 16px; }
	.hide-mobile { display: none; }
	#header { padding: 14px 20px; }
	.stg-nav-toggle { display: inline-flex; }
	#nav { position: fixed; inset: 0; background: var(--color-red); display: none; align-items: center; justify-content: center; z-index: 49; margin: 0; }
	#nav.is-open { display: flex; }
	#nav ul { flex-direction: column; gap: 24px; text-align: center; font-size: 14px; }
	#nav ul li a { font-family: var(--font-serif); font-size: 28px; letter-spacing: 0; text-transform: none; border-bottom: none !important; }
	body.stg-menu-open { overflow: hidden; }
	#logo a { font-size: 18px; }
	.headline-big, #hero .headline-big { width: 100%; }
	.headline-big { font-size: 36px; }
	.col-1-1, .col-1-2, .col-1-3, .col-2-3, .col-1-4, .col-3-4 { float: none; width: 100%; }
	.box-white, .box-grey, .box-black, .col-1-3.box-white, .col-1-3.box-grey, .col-1-3.box-black { padding: 8%; }
	.image-grid .col-1-4 { width: 50%; float: left; }
	.fancy-headline > .headline-big, .fancy-headline > .preheadline, .fancy-headline > .intro { width: 100%; }
	.article-archive { padding: 0; }
	.article-archive .container { width: 100%; }
	.article-archive .article { margin-top: 1px; padding: 16px; }
	.article-body blockquote { font-size: 18px; padding: 36px 24px 36px 64px; }
	.article-body blockquote:before { left: 18px; font-size: 56px; }
	.pagination { margin: 1% 0 60px; }
	.pagination .left, .pagination .right { width: 49.5%; }
	.pagination .left a, .pagination .right a { width: 100%; margin: 0; text-align: center; }
	.stg-rail__big { width: 88px; height: 88px; left: 16px; }
	.stg-rail__name { font-size: 9px; letter-spacing: 0.24em; }
	.stg-rail__mark { top: 12px; left: 14px; }
	.stg-rail__line, .stg-rail__bubble { display: none; }
	.stg-service-nav__cells { grid-template-columns: repeat(2, 1fr); }
	#footer .footer-base { flex-direction: column; gap: 8px; align-items: center; text-align: center; }
}
@media screen and (max-device-width: 1200px) {
	.image-grid .grayscale { filter: none; -webkit-filter: none; }
}