/*
Theme Name: KASIS Corporate
Theme URI: https://kasis.eu/
Author: KASIS
Description: One-page company site for KASIS, in English. Colours from the KASIS logo, self-hosted fonts (Jost, Instrument Sans), no ad slots. Contact e-mail, legal name and company number are set in Appearance › Customize › KASIS.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kasis-corporate
*/

/* Fonts (SIL Open Font License, see assets/fonts) ----------------------- */
@font-face {
	font-family: "Jost";
	src: url("assets/fonts/jost.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Instrument Sans";
	src: url("assets/fonts/instrument-sans.woff2") format("woff2");
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Instrument Sans";
	src: url("assets/fonts/instrument-sans-italic.woff2") format("woff2");
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-style: italic;
	font-display: swap;
}

/* Tokens: the five circles and the background of the KASIS logo --------- */
:root {
	--night: #233645;       /* logo background */
	--night-deep: #1a2a37;
	--ice: #d8e5ee;         /* circle 1 */
	--mint: #9cdacd;        /* circle 2 */
	--sky: #9dc6e0;         /* circle 3 */
	--jade: #1bb394;        /* circle 4 */
	--lagoon: #69b8c9;      /* circle 5 */
	--paper: #eef4f8;       /* light tint of the ice circle */
	--white: #fff;

	--text: #34495a;
	--text-soft: #566b7b;
	--on-night: #c3d4e0;
	--on-night-soft: #93abbb;
	--link: #0e7864;
	--line: #cddbe5;

	--display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
	--sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--fs-h1: clamp(2.625rem, 1.55rem + 4.4vw, 5rem);
	--fs-h2: clamp(2rem, 1.45rem + 2.2vw, 3rem);
	--fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.625rem);
	--fs-lede: clamp(1.125rem, 1.03rem + .4vw, 1.375rem);

	--wrap: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
	--header-h: 80px;
	--section-pad: clamp(80px, 9vw, 144px);
}

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
	margin: 0;
	background: var(--white);
	color: var(--text);
	font: 400 1.125rem/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--display);
	font-weight: 600;
	color: var(--night);
	letter-spacing: -.015em;
	text-wrap: balance;
}
p { margin: 0; }
p + p { margin-top: 1em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--jade); outline-offset: 3px; border-radius: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip-link {
	position: absolute; z-index: 100; left: 12px; top: -80px;
	padding: 10px 18px; border-radius: 999px;
	background: var(--white); color: var(--night); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* Header ---------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--night); }
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: block; border-radius: 6px; }
.brand svg { height: 58px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; font-size: .9375rem; font-weight: 500; }
.nav a { padding: 10px 14px; border-radius: 999px; color: var(--on-night); text-decoration: none; }
.nav a:hover { color: var(--white); background: rgba(216, 229, 238, .08); }
.nav .nav-contact { margin-left: 10px; padding-inline: 20px; background: var(--jade); color: var(--night); font-weight: 600; }
.nav .nav-contact:hover { background: var(--mint); color: var(--night); }
@media (max-width: 760px) {
	.nav a:not(.nav-contact) { display: none; }
	.brand svg { height: 48px; }
}

/* Hero ------------------------------------------------------------------ */
.hero {
	--mark-h: clamp(230px, 46vw, 640px);
	--mark-w: calc(var(--mark-h) * 93 / 169);
	--cross: calc(var(--section-pad) - 24px);
	position: relative;
	z-index: 2;
	padding: clamp(56px, 8vw, 120px) 0 clamp(190px, 16vw, 200px);
	background: var(--night);
	color: var(--on-night);
}
.hero h1 {
	max-width: 11.5em;
	color: var(--white);
	font-size: var(--fs-h1);
	line-height: 1.02;
	letter-spacing: -.025em;
}
.hero .lede { margin-top: 28px; max-width: 34em; font-size: var(--fs-lede); line-height: 1.55; }
.actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
	display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px;
	border-radius: 999px; font-weight: 600; font-size: 1.0625rem; text-decoration: none;
}
.btn-primary { background: var(--jade); color: var(--night); }
.btn-primary:hover { background: var(--mint); }
.btn-secondary { color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(216, 229, 238, .4); }
.btn-secondary:hover { box-shadow: inset 0 0 0 1.5px var(--ice); }

/* The logo mark, large, crossing from the hero into the next section. */
.hero-mark {
	position: absolute;
	z-index: 3;
	right: max(var(--gutter), (100% - var(--wrap)) / 2);
	bottom: calc(var(--cross) * -1);
	width: var(--mark-w);
	height: var(--mark-h);
	pointer-events: none;
}
.hero-mark svg { width: 100%; height: 100%; overflow: visible; }
.hero-mark circle { transform-box: fill-box; transform-origin: center; animation: kasis-pop .75s cubic-bezier(.2, .9, .3, 1.18) both; }
.hero-mark circle:nth-child(1) { animation-delay: .15s; }
.hero-mark circle:nth-child(2) { animation-delay: .27s; }
.hero-mark circle:nth-child(3) { animation-delay: .39s; }
.hero-mark circle:nth-child(4) { animation-delay: .51s; }
.hero-mark circle:nth-child(5) { animation-delay: .63s; }
@keyframes kasis-pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero-mark circle { animation: none; }
}
@media (min-width: 900px) {
	.hero .hero-text { max-width: calc(100% - var(--mark-w) - 64px); }
}
@media (max-width: 899px) {
	.hero { --mark-h: clamp(190px, 46vw, 300px); }
}

/* Sections -------------------------------------------------------------- */
.section { position: relative; padding: var(--section-pad) 0; }
.section--paper { background: var(--paper); }
.section--night { background: var(--night); color: var(--on-night); }
.section--night h2 { color: var(--white); }
.section-head { max-width: 40rem; }
.section-head h2 { font-size: var(--fs-h2); line-height: 1.08; }
.section-head p { margin-top: 18px; font-size: 1.1875rem; color: var(--text-soft); }

/* What we do: buy side | sell side, and what serves both ---------------- */
.sides { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: 1fr 1fr; }
.side { padding-bottom: 48px; }
.side--buy { padding-right: clamp(24px, 4vw, 64px); }
.side--sell { position: relative; padding-left: clamp(24px, 4vw, 64px); border-left: 1px solid var(--line); }
/* where the two sides meet */
.side--sell::after {
	content: ""; position: absolute; left: -7px; bottom: -7px;
	width: 13px; height: 13px; border-radius: 50%; background: var(--jade);
}
.side--both { grid-column: 1 / -1; padding: 44px 0 0; border-top: 1px solid var(--line); }
.side-title { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--text-soft); }
.both-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(48px, 8vw, 128px); }
.service { margin-top: 26px; }
.service h4 { display: flex; align-items: center; gap: 14px; font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
.service h4::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--dot); }
.service p { margin-top: 12px; max-width: 33em; }
@media (max-width: 760px) {
	.sides, .both-grid { grid-template-columns: 1fr; }
	.side--buy { padding-right: 0; }
	.side--sell { padding: 40px 0 48px; border-left: 0; border-top: 1px solid var(--line); }
	.side--sell::after { display: none; }
	.both-grid { gap: 0; }
}

/* How we work ----------------------------------------------------------- */
.principles { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px clamp(32px, 4vw, 64px); }
.principles h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
.principles p { margin-top: 12px; }
@media (max-width: 899px) { .principles { grid-template-columns: 1fr; max-width: 38rem; } }

/* Who we are ------------------------------------------------------------ */
.team { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: 1fr 1fr; gap: 64px clamp(40px, 6vw, 96px); }
.person { display: grid; grid-template-columns: 168px 1fr; gap: 36px; align-items: start; }
.portrait { position: relative; width: 168px; aspect-ratio: 1; margin: 0 16px 16px 0; }
.portrait::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: var(--dot); transform: translate(16px, 16px);
}
.portrait img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.person h3 { font-size: 1.75rem; font-weight: 500; line-height: 1.15; }
.person .role { margin-top: 6px; font-size: 1rem; font-weight: 600; color: var(--night); }
.person .bio { margin-top: 14px; }
.person .profile { display: inline-block; margin-top: 14px; font-weight: 600; }
@media (max-width: 1040px) { .team { grid-template-columns: 1fr; max-width: 46rem; } }
@media (max-width: 560px) {
	.person { grid-template-columns: 1fr; gap: 20px; }
	.portrait { width: 136px; }
}

.experience { margin-top: clamp(64px, 8vw, 104px); padding-top: 40px; border-top: 1px solid var(--line); }
.experience h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--text-soft); }
.names {
	list-style: none; margin: 18px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px 40px;
	font-family: var(--display); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); font-weight: 500; line-height: 1.35; color: var(--night);
}

/* Contact --------------------------------------------------------------- */
.contact h2 { font-size: var(--fs-h2); line-height: 1.08; }
.contact p { margin-top: 18px; max-width: 32em; font-size: 1.1875rem; }
.contact .email {
	display: inline-block; margin-top: 36px;
	font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 1rem + 5vw, 4.75rem); line-height: 1.1; letter-spacing: -.02em;
	color: var(--white);
	text-decoration: underline; text-decoration-color: var(--jade); text-decoration-thickness: .07em; text-underline-offset: .18em;
	overflow-wrap: anywhere;
}
.contact .email:hover { text-decoration-color: var(--mint); }

/* Footer ---------------------------------------------------------------- */
.site-footer { background: var(--night-deep); color: var(--on-night-soft); font-size: .9375rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; padding: 28px 0; }
.legal { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.site-footer a, .linklike { color: var(--on-night); }
.linklike {
	padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.linklike:hover { color: var(--white); text-decoration-thickness: 2px; }

/* Other pages (privacy policy, 404…) ------------------------------------ */
.page-body { padding: clamp(56px, 7vw, 96px) 0 var(--section-pad); }
.page-body .wrap { max-width: 46rem; }
.page-body h1 { font-size: var(--fs-h2); line-height: 1.1; }
.entry { margin-top: 32px; }
.entry > * + * { margin-top: 1em; }
.entry h2 { margin-top: 2em; font-size: 1.75rem; }
.entry h3 { margin-top: 1.6em; font-size: 1.375rem; }
.entry ul, .entry ol { padding-left: 1.3em; }