/*!
Theme Name: stefaniagoulioti
Theme URI: http://underscores.me/
Author: konstantinos papakonstantinou
Author URI: http://underscores.me/
Description: website of actress Stefania Goulioti
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: stefaniagoulioti
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

stefaniagoulioti is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
	width: 100%;
	overflow: hidden;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */

@font-face {
    font-family: Futura-Boo;
    src: url(fonts/FuturaTOT-Boo.otf);
    font-weight: normal;
}
@font-face {
    font-family: FuturaNeu;
    src: url(fonts/PFFuturaNeu-Book.otf);
    font-weight: normal;
}
@font-face {
    font-family: NeutrTexGreBoo;
    src: url(fonts/NeutrTexGreBoo.otf);
    font-weight: normal;
}

body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

h2 {
	font-family: "NeutrTexGreBoo", sans-serif;
	font-size: 64px;
	font-weight: 400;
	letter-spacing: 12px;
	text-transform: uppercase;
}
p{
	font-family: "Futura-Boo", sans-serif;
	text-align: left;
	font-size: 24px;
	line-height: 2rem;
}

.h1-titles {
	text-align: center;
	font-size: 68px;
	padding: 2% 0 6%;
	font-family: "NeutrTexGreBoo", sans-serif;
	font-weight: 200;
	letter-spacing: 10px;
	text-transform: uppercase;
	color: #557d94;
}

@media screen and (max-width: 1000px) {
	.h1-titles {
		font-size: 30px;
	}
}


dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #404040;
	text-transform: none;
	text-decoration: none;
}

a:visited {
	color: #5f8799;
}

a:hover,
a:focus,
a:active {
	color: #5f8799;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
.container-front {
	padding: 4% 22%;
}
.container {
	padding: 4% 4%;
}
/* FRONT PAGE  */
.front-about-container, .front-me-container {
	position: relative;
}
.front-about-container::before, .front-me-container::before {
  content: "";
  position: absolute;
  margin-bottom: 20px;
  width: 40px;
  height: 40px;
  background: #96adaf;
}
.front-about-head {
	margin-top: 4%;
}
.front-about-heading > .front-about-head {
	margin-bottom: 0px;
	font-size: 64px;
	font-family: "NeutrTexGreBoo", sans-serif;
	font-weight: 400;
	letter-spacing: 12px;
	color: #96adaf;
	text-transform: uppercase;
}
.front-about-heading > .front-about-name {
	margin: 0px;
	color: #111;
	font-size: 56px;
	font-weight: 200;
	letter-spacing: 20px;
	text-transform: uppercase;
}
.front-about-text {
	display: flex;
}
.front-about-image {
	width: 40%;
	text-align: left;
	/* padding: 0 5% 5%; */
}
.front-about-p{
	width: 50%;
	padding: 4% 5% 4% 0;
}
.front-me-heading h2 {
	margin-bottom: 0px;
	margin-top: 4%;
	font-size: 64px;
	font-family: "NeutrTexGreBoo", sans-serif;
	font-weight: 400;
	letter-spacing: 12px;
	color: #96adaf;
	text-transform: uppercase;
}
.front-divide {
	background-image: url("http://stefaniagoulioti.local/wp-content/themes/stefaniagoulioti/img/divider-stefania.jpg");
	background-color: #96adaf;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	min-height: 540px;
}
.front-divide-texts{
	position: relative;
	left: 33%;
	width: 33%;
	min-height: 500px;
}
.front-divide-p {
	font-size: 24px;
	color: #fff;
	font-family: "NeutrTexGreBoo", sans-serif;
}
.front-divide-button {
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.7rem;
	color: #111;
	background-color: #567d94;
	padding: 2% 4%;
	border: 0px;
	border-radius: 0px;
}
/* ========================================
   FEATURED STORY
======================================== */
.featured-story {
    --featured-bg: #96adaf;
    --featured-panel: rgba(35, 39, 41, 0.88);
    --featured-text: #ffffff;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-height: clamp(420px, 42vw, 680px);
    overflow: visible;
    background-color: var(--featured-bg);
}
/* ========================================
   IMAGES
======================================== */
.featured-story__media {
    position: relative;
    min-width: 0;
    overflow: hidden;
}
.featured-story__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Darken the left image slightly,
   like the reference image */
.featured-story__media--left::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient( 90deg, rgba(5, 12, 18, 0.45), rgba(5, 12, 18, 0.08));
}
/* ========================================
   CONTENT
======================================== */
.featured-story__content {
    position: absolute;
    z-index: 5;
    /* top: 50%;
    left: 50%;
    width: min(430px, 36vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, -50%); */
	inset: 0;
	pointer-events: none;
}
/* ========================================
   CONTENT PANEL
======================================== */
.featured-story__panel {
    width: 100%;
    padding: clamp(24px, 3vw, 48px);
    color: var(--featured-text);
    background-color: var(--featured-panel);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* ========================================
   TITLE
======================================== */
.featured-story__title {
    position: absolute;
    top: 0;
    left: 50%;
    margin: 0;
    padding: 12px 20px 10px;
    transform: translate(-50%, -45%);
    color: var(--featured-text);
    background-color: #141719;
    font-size: clamp(32px, 4vw, 64px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
/* ========================================
   TEXT
======================================== */
.featured-story__text {
    position: absolute;
    top: 47%;
    left: 50%;
    width: min(390px, 32vw);
    padding: clamp(22px, 2.5vw, 40px);
    transform: translate(-50%, -50%);
    color: var(--featured-text);
    background-color: var(--featured-dark);
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.25;
}
.featured-story__text p {
    margin: 0;
	font-size: 25px;
}
.featured-story__text p + p {
    margin-top: 1em;
}
/* ========================================
   BUTTON
======================================== */
.featured-story__button {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 48px;
    padding: 12px 30px;
    transform: translate(-50%, 40%);
    pointer-events: auto;
    color: #1f2325;
    background-color: var(--featured-bg);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.35em;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}
.featured-story__button:hover {
    color: #1f2325;
    transform: translate(-50%, 30%);
}
.featured-story__button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}
@media (max-width: 768px) {
    .featured-story {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-bottom: 0;
    }
    /* =================================
       FIRST IMAGE
    ================================= */
    .featured-story__media--left {
        order: 1;
    }
    /* =================================
       CONTENT
    ================================= */
    .featured-story__content {
        position: static;
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 24px 36px;
        pointer-events: auto;
        background-color: var(--featured-bg);
    }
    /* =================================
       TITLE
    ================================= */
    .featured-story__title {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        margin: 0 0 28px;
        transform: translateY(-50%);
        font-size: clamp(34px, 11vw, 52px);
        white-space: normal;
        text-align: center;
    }
    /* =================================
       TEXT
    ================================= */
    .featured-story__text {
        position: static;
        width: 100%;
        max-width: 560px;
        padding: 26px;
        transform: none;
        font-size: 15px;
        line-height: 1.5;
    }
    /* =================================
       BUTTON
    ================================= */
    .featured-story__button {
        position: static;
        margin-top: 28px;
        transform: none;
    }
    .featured-story__button:hover {
        transform: translateY(-3px);
    }
    /* =================================
       SECOND IMAGE
    ================================= */
    .featured-story__media--right {
        order: 3;
    }
    /* =================================
       IMAGES
    ================================= */
    .featured-story__media {
        width: 100%;
        height: clamp(280px, 80vw, 500px);
    }
}
/* .front-projects {
	background-color: #96a1a2;
}
.front-project-div {
	margin: 0 auto;
	padding: 0 20%;
	border: 10px solid #fff;
	min-height: 240px;
	display: grid;
	grid-template-columns: 420px 1fr;
	align-items: end;
}
.front-project-div::before {
  content: "";
  position: absolute;
  margin-bottom: 240px;
  left: 40%;
  width: 40px;
  height: 40px;
  background: #567d94;
}
.front-project-div img {
	height: 250px;
	object-fit: cover;
}
.front-project-div h3 {
	letter-spacing: 0.22em;
	font-family: "NeutrTexGreBoo", sans-serif;
	font-size: 30px;
	font-weight: 400;
	color: #fff;
} */
.desktopvideo {
    display: block;
}
.mobilevideo {
    display: none;
}
@media (max-width: 768px) {
    .desktopvideo {
        display: none;
    }
    .mobilevideo {
        display: block;
    }
}

/* ========================================
   HOME PROJECTS
======================================== */
.home-projects {
    --projects-bg: #96a1a2;
    --projects-text: #ffffff;
    --projects-marker: #5f8799;
    --projects-side-space: clamp(80px, 14.5vw, 240px);
    --projects-image-width: min(38vw, 620px);
    position: relative;
    width: 100%;
    margin-block: clamp(80px, 10vw, 160px);
    background-color: var(--projects-bg);
}
/* ========================================
   PROJECT
======================================== */
.home-project {
    position: relative;
    display: grid;
    grid-template-columns: var(--projects-side-space) var(--projects-image-width) minmax(0, 1fr);
    width: 100%;
    background-color: var(--projects-bg);
}
.home-project + .home-project {
    border-top: 10px solid #ffffff;
}
/* ========================================
   IMAGE
======================================== */
.home-project__image-wrap {
    grid-column: 2;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.home-project__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ========================================
   CONTENT
======================================== */
.home-project__content {
    grid-column: 3;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: clamp(30px, 4vw, 70px);
    color: var(--projects-text);
}
/* ========================================
   TITLE
======================================== */
.home-project__title {
    width: 100%;
    margin: 0;
    font-size: clamp(22px, 2.5vw, 42px);
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.home-project__link {
    display: inline-block;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
}
a.home-project__link:hover {
    color: #5f8799;
    transform: translateX(8px);
    opacity: 0.82;
}
a.home-project__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 8px;
}
/* ========================================
   MARKER ZONE
======================================== */
.home-project__marker-zone {
    position: absolute;
    z-index: 5;
    top: 0;
    left: calc( var(--projects-side-space) + var(--projects-image-width) + clamp(22px, 3vw, 48px) );
    width:  clamp(120px, 14vw, 220px);
    height: clamp(40px, 5vw, 72px);
    display: flex;
    align-items: center;
    transform: translateY(-50%);
}
/* ========================================
   MARKER
======================================== */
.home-project__marker {
    display: block;
    width: clamp(32px, 4vw, 56px);
    aspect-ratio: 1;
    background-color: var(--projects-marker);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ========================================
   DESKTOP HOVERS
======================================== */
@media (hover: hover) and (pointer: fine) {
    .home-project__marker-zone:hover
    .home-project__marker {
        transform: translateX( clamp( 50px, 7vw, 120px ) );
    }
    .home-project:hover
    .home-project__image {
        transform: scale(1.025);
    }
}
@media (max-width: 1100px) {
    .home-projects {
        --projects-side-space: clamp(30px, 6vw, 70px);
        --projects-image-width: min(46vw, 520px);
    }
    .home-project__content {
        padding: clamp(24px, 3vw, 45px);
    }
    .home-project__title {
        font-size: clamp(20px, 2.7vw, 32px);
        letter-spacing: 0.14em;
    }
}
@media (max-width: 767px) {
    .home-projects {
        margin-block: 70px;
        background-color: var(--projects-bg);
    }
    /* =================================
       PROJECT
    ================================= */
    .home-project {
        display: block;
        width: 100%;
    }
    .home-project + .home-project {
        border-top-width: 8px;
    }
    /* =================================
       IMAGE
    ================================= */
    .home-project__image-wrap {
        width: 100%;
        aspect-ratio: 4 / 3;
    }
    /* =================================
       CONTENT
    ================================= */
    .home-project__content {
        position: relative;
        min-height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 38px 24px 34px;
        text-align: center;
    }
    /*
     * Small static square
     * between image and title.
     */
    .home-project__content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 28px;
        width: 30px;
        aspect-ratio: 1;
        background-color: var(--projects-marker);
        transform: translateY(-50%);
    }
    /* =================================
       TITLE
    ================================= */
    .home-project__title {
        max-width: 560px;
        font-size: clamp(20px, 6vw, 30px);
        line-height: 1.45;
        letter-spacing: 0.14em;
    }
    /*
     * No desktop marker on mobile.
     */
    .home-project__marker-zone {
        display: none;
    }
    /*
     * Disable horizontal link movement.
     */
    a.home-project__link:hover {
        transform: none;
    }
}

/* ========================================
   HOME GALLERY
======================================== */
.home-gallery {
    --gallery-gap: 5px;
    width: 100%;
    margin-block: clamp(80px, 10vw, 160px);
    background-color: #ffffff;
}
/* ========================================
   MASONRY GRID
======================================== */
.home-gallery__grid {
    width: 100%;
    column-count: 4;
    column-gap: var(--gallery-gap);
}
/* ========================================
   GALLERY ITEM
======================================== */
.home-gallery__item {
    width: 100%;
    margin: 0 0 var(--gallery-gap);
    break-inside: avoid;
    overflow: hidden;
}
/* ========================================
   IMAGE
======================================== */
.home-gallery__image {
    display: block;
    width: 100%;
    height: auto;
}
/* ========================================
   TABLET
======================================== */
@media (max-width: 1100px) {
    .home-gallery__grid {
        column-count: 3;
    }
}
/* ========================================
   MOBILE
======================================== */
@media (max-width: 767px) {
    .home-gallery {
        --gallery-gap: 4px;
        margin-block: clamp(60px, 16vw, 100px);
    }
    .home-gallery__grid {
        column-count: 2;
    }
}
/* ========================================
   VERY SMALL MOBILE
======================================== */
@media (max-width: 380px) {
    .home-gallery__grid {
        column-count: 1;
    }
}
@media screen and (max-width: 767px) { 
	.front-about-head {
		margin-top: 10%;
	}
	.container-front {
		padding: 2% 4%;
	}
	.front-about-heading > .front-about-head {
		font-size: 30px;
		font-family: "NeutrTexGreBoo", sans-serif;
		font-weight: 400;
		letter-spacing: 6px;
	}
	.front-about-heading > .front-about-name {
		font-size: 25px;
		font-weight: 200;
		letter-spacing: 5px;
	}
	.front-about-text {
		display: block;
	}
	.front-about-image {
		width: 100%;
		text-align: center;
		/* padding: 0 5% 5%; */
	}
	.front-about-p{
		width: 100%;
		padding: 4% 2% 4% 2%;
	}
	.front-me-heading h2{
		margin-top: 10%;
		font-size: 30px;
		font-family: "NeutrTexGreBoo", sans-serif;
		font-weight: 400;
		letter-spacing: 6px;
	}
}
/* FRONT PAGE  */

/* theatrical */
.theatrical-container .swiper .swiper-wrapper {
	gap: 1px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.theatrical-container .swiper .swiper-wrapper .swiper-slide {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    min-height: 200px;
    cursor: pointer;
    border-radius: 1px;
    transition: all 0.4 ease -in;
    width: 32% !important;
}
.h3-theatrical-work {
	position: relative;
	top: -50px;
	left: 6px;
	font-size: 15px;
	font-family: "NeutrTexGreBoo", sans-serif;
	font-weight: 200;
	letter-spacing: 1.5px;
	color: #fff;
	text-transform: uppercase;
}
.theatrical-container .swiper .swiper-wrapper .swiper-slide img {
	height: 100%;
}
@media screen and (max-width: 1000px) {
	.theatrical-container .swiper .swiper-wrapper .swiper-slide {
		width: 48% !important;
		height: 120px;
		min-height: 100px;
	}
	.theatrical-container .swiper .swiper-wrapper .swiper-slide img {
		width: 100%;
		height: 115px;
	}
	.h3-theatrical-work {
		font-size: 10px;
		left: 3px;
	}
}
.credit-main-swiper {
    width: 100%;
    margin-bottom: 15px;
}
.credit-main-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}
.credit-thumbs-swiper .swiper-slide {
    opacity: 0.4;
    cursor: pointer;
}
.credit-thumbs-swiper .swiper-slide-thumb-active {
    opacity: 1;
}
.credit-thumbs-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.h2-credits {
	font-size: clamp(32px, 4vw, 64px);
	color: #587d96;
	text-align: center;
	padding: 5% 0;
	letter-spacing: 0.35em;
	line-height: 1.05;
	font-weight: 300;
}
.the-credit-background {
	position: relative;
	width: 100%;
}
.credit-gallery {
	width: min(100% - 40px, 900px);
	margin: auto;
}
.the-credit-background::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 50%;
	background-color: #acacab;
	left: 0;
	right: 0;
	top: 10%;
	z-index: 0;
}
.the-credit-background::after {
	content: "";
	position: absolute;
	width: 52px;
	height: 52px;
	background-color: #96adaf;
	left: 8%;
	top: 6%;
	z-index: 2;
}
.credit-role-description {
	width: min(100% - 40px, 900px);
	margin: auto;
}
/* single slider */

/* director page */
.director-works-page {
    width: 100%;
    overflow: hidden;
}
.director-work {
    position: relative;
    padding: 5% 0;
}
.director-work:first-child {
    padding-top: 1%;
}
.director-work__content {
    width: min(100% - 40px, 900px);
    margin: 0 auto 70px;
}
.director-work__label {
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: #587d96;
    font-weight: 300;
    margin-bottom: 8px;
}
.director-work__title {
    margin: 0 0 50px;
	color: #587d96;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    font-weight: 300;
}
.director-work__description {
    max-width: min(100% - 40px, 900px);
    font-size: 14px;
    line-height: 1.45;
    color: #111;
}
.director-work__gallery-band {
    position: relative;
    width: 100%;
}
.director-work__gallery-band::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 16%;
    height: 55%;
    background: #acacab;
    z-index: 0;
}
.director-work__gallery-band::after {
    content: "";
    position: absolute;
    width: 52px;
    height: 52px;
    background: #96adaf;
	left: 8%;
    top: 12%;
    z-index: 2;
}
.director-work:nth-child(odd) .director-work__gallery-band::after {
    
}
.director-work:nth-child(even) .director-work__gallery-band::after {
    right: 7%;
    bottom: 12%;
}
.director-work__gallery {
    position: relative;
    z-index: 1;
    width: min(100% - 40px, 920px);
    margin: 0 auto;
}
.director-work__main-slider {
    width: 100%;
    background: #000;
}
.director-work__main-slider .swiper-slide {
    height: auto;
}
.director-work__main-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.director-work__thumbs-slider {
    width: 100%;
    background: #111;
}
.director-work__thumbs-slider .swiper-slide {
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.25s ease;
}
.director-work__thumbs-slider .swiper-slide-thumb-active {
    opacity: 1;
}
.director-work__thumb-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 16;
    object-fit: cover;
}
.director-work__arrow {
    color: #fff;
    width: 54px;
    height: 54px;
}
.director-work__arrow::after {
    font-size: 42px;
    font-weight: 300;
}
.director-work__arrow--prev {
    left: -95px;
}
.director-work__arrow--next {
    right: -95px;
}
@media (max-width: 1200px) {
    .director-work__arrow--prev {
        left: 15px;
    }
    .director-work__arrow--next {
        right: 15px;
    }
}
@media (max-width: 768px) {
    .director-work {
        padding: 90px 0 80px;
    }
    .director-work:first-child {
        padding-top: 70px;
    }
    .director-work__content {
        margin-bottom: 45px;
    }
    .director-work__label {
        font-size: 15px;
        letter-spacing: 0.28em;
    }
    .director-work__title {
        margin-bottom: 35px;
        letter-spacing: 0.2em;
    }
    .director-work__description {
        font-size: 13px;
    }
    .director-work__gallery-band::before {
        top: 20%;
        height: 48%;
    }
    .director-work__gallery-band::after {
        width: 34px;
        height: 34px;
    }
    .director-work__thumb-image {
        aspect-ratio: 16 / 16;
    }
    .director-work__arrow::after {
        font-size: 28px;
    }
}
.director-work__gallery .swiper {
    width: 100%;
    overflow: hidden;
}
.director-work__gallery .swiper-wrapper {
    display: flex;
}
.director-work__gallery .swiper-slide {
    flex-shrink: 0;
}
.director-work__main-image,
.director-work__thumb-image {
    display: block;
    width: 100%;
    height: auto;
}
.director-work__thumb-image {
    aspect-ratio: 16 / 16;
    object-fit: cover;
}
.director-work__gallery .swiper-button-prev,
.director-work__gallery .swiper-button-next {
    color: #fff;
}
.director-work__gallery .swiper {
    width: 100%;
    overflow: hidden;
}
.director-work__gallery .swiper-wrapper {
    display: flex;
}
.director-work__gallery .swiper-slide {
    flex-shrink: 0;
}
.director-work__main-image {
    display: block;
    width: 100%;
    height: auto;
}
.director-work__thumb-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 16;
    object-fit: cover;
}
.director-work__gallery .swiper {
    width: 100%;
    overflow: hidden;
	margin-bottom: 15px;
}
.director-work__gallery .swiper-wrapper {
    display: flex;
}
.director-work__gallery .swiper-slide {
    flex-shrink: 0;
}
.director-work__main-image {
    display: block;
    width: 100%;
    height: auto;
}
.director-work__thumb-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 16;
    object-fit: cover;
}
/* director page */

/* ARCHIVE PAGE */

/* =========================================================
   CREDITS TAXONOMY ARCHIVE
   Taxonomy: credit-category
   ========================================================= */
/* ---------------------------------------------------------
   MAIN ARCHIVE
   --------------------------------------------------------- */
.credits-archive {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: #ffffff;
}
/* =========================================================
   ARCHIVE HERO
   ========================================================= */
.credits-archive__hero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 380px;
	padding: 70px 30px;
	background: #ffffff;
}
/* Inner hero wrapper */
.credits-archive__hero-inner {
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
}
/* Archive title */
.credits-archive__title {
	margin: 0;
	color: #4b91aa;
	font-size: clamp(32px, 4vw, 58px);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 0.22em;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: break-word;
}
/* =========================================================
   ARCHIVE CONTENT
   Only a small space before the footer
   ========================================================= */
.credits-archive__content {
	width: 100%;
	padding: 0 0 30px;
}
/* =========================================================
   GRID
   DEFAULT / DESKTOP:
   3 POSTS PER ROW
   ========================================================= */
.credits-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	margin: 0;
	padding: 0;
	gap: 4px;
	background: #ffffff;
}
/* =========================================================
   CREDIT CARD
   ========================================================= */
.credit-card {
	min-width: 0;
	margin: 0;
	padding: 0;
	background: transparent;
}
/* Card link */
.credit-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
/* =========================================================
   CREDIT IMAGE
   ========================================================= */
.credit-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111111;
}
/* Featured image */
.credit-card__image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}
/* Placeholder for posts without a featured image */
.credit-card__placeholder {
	width: 100%;
	height: 100%;
	background: #111111;
}
/* =========================================================
   TITLE BAR
   ========================================================= */
.credit-card__caption {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 52px;
	padding: 10px 20px;
	box-sizing: border-box;
	background: #8cc6bb;
}
/* Post title */
.credit-card__title {
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}
/* =========================================================
   HOVER
   Only for devices that actually support hover
   ========================================================= */
@media (hover: hover) {
	.credit-card__link:hover .credit-card__image {
		transform: scale(1.025);
	}
}
/* =========================================================
   EMPTY CATEGORY
   ========================================================= */
.credits-archive__empty {
	grid-column: 1 / -1;
	width: 100%;
	padding: 60px 30px;
	box-sizing: border-box;
	text-align: center;
}
/* =========================================================
   TABLET
   2 POSTS PER ROW
   ========================================================= */
@media screen and (max-width: 1024px) {
	.credits-archive__hero {
		min-height: 320px;
		padding: 60px 30px;
	}
	.credits-archive__title {
		font-size: clamp(30px, 5vw, 46px);
		letter-spacing: 0.17em;
	}
	.credits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.credits-archive__content {
		padding-bottom: 25px;
	}
}
/* =========================================================
   MOBILE
   1 POST PER ROW
   ========================================================= */
@media screen and (max-width: 767px) {
	.credits-archive__hero {
		min-height: 240px;
		padding: 50px 20px;
	}
	.credits-archive__title {
		font-size: clamp(24px, 7vw, 34px);
		line-height: 1.45;
		letter-spacing: 0.11em;
	}
	.credits-grid {
		grid-template-columns: 1fr;
	}
	.credit-card__caption {
		min-height: 48px;
		padding: 10px 16px;
	}
	.credit-card__title {
		font-size: 12px;
		line-height: 1.4;
		letter-spacing: 0.1em;
	}
	.credits-archive__content {
		padding-bottom: 20px;
	}
}
/* ARCHIVE PAGE */
/* footer */
.site-footer {
	background-color: #96adaf;
	padding: 5% 4% 2%;
}
.site-footer p {
	font-family: "NeutrTexGreBoo", sans-serif;
	color: #fff;
	align-items: center;
	word-spacing: 6px;
	font-weight: 100;
	font-size: 18px;
}
.site-info {
	display: flex;
}
.left-footer, .right-footer {
	width: 50%;
	align-items: center;
}
.left-footer p {
	line-height: 2.2rem;
}
.right-footer p{
	text-align: center;
}
.social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
@media screen and (max-width: 1000px) {
	.site-footer{
		padding: 4% 4% 4%;
	}
	.site-info {
		display: block;
	}
	.left-footer, .right-footer {
		width: 100%;
		text-align: center;
	}
	.left-footer p {
		font-size: 15px;
		word-spacing: 4px;
		line-height: 2rem;
	}
	.right-footer p {
		font-size: 13px;
		word-spacing: 3px;
	}
}

/* footer */

/* =========================================================
   NEWS ARCHIVE
   ========================================================= */
/* ---------------------------------------------------------
   GLOBAL VARIABLES
   --------------------------------------------------------- */
.news-archive {
	--news-blue: #3f91ad;
	--news-mint: #8aa6a9;
	--news-grey: #acacab;
	--news-black: #111111;
	--news-white: #ffffff;
	--news-max-width: 1540px;
	--news-side-space: clamp(32px, 6vw, 200px);
	width: 100%;
	padding-top: clamp(90px, 10vw, 170px);
	padding-bottom: clamp(70px, 8vw, 130px);
	overflow-x: hidden;
	background: var(--news-white);
}
/* Make sizing predictable */
.news-archive,
.news-archive *,
.news-archive *::before,
.news-archive *::after {
	box-sizing: border-box;
}
/* ---------------------------------------------------------
   NEWS LIST
   --------------------------------------------------------- */
.news-archive__list {
	width: 100%;
}
/* ---------------------------------------------------------
   EACH NEWS ROW
   --------------------------------------------------------- */
.news-row {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--news-white);
}
/*
 * Large white space between News items,
 * as in the reference design.
 */
.news-row + .news-row {
	margin-top: clamp(90px, 10vw, 170px);
}
/* Remove possible theme styles */
.news-row article, .news-row figure {
	margin: 0;
}
.news-row__title {
	margin: 0;
	padding: 0;
	color: #587d96;
	font-size: clamp(32px, 4vw, 60px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	overflow-wrap: break-word;
}
.news-row__subtitle {
	margin: 12px 0 0;
	padding: 0;
	color: var(--news-blue);
	font-size: clamp(12px, 1vw, 16px);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.news-row__subtitle-dash {
	margin-right: 0.35em;
}
.news-row__body {
	font-size: clamp(14px, 0.95vw, 17px);
	font-weight: 400;
	line-height: 1.5;
}
.news-row__body p {
	margin-top: 0;
	margin-bottom: 1em;
}
.news-row__body p:last-child {
	margin-bottom: 0;
}
.news-row__body ul,
.news-row__body ol {
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 1.3em;
}
.news-row__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
/* =========================================================
   LAYOUT A
   3+ IMAGES
   SWIPER GALLERY
   ========================================================= */
.news-row--gallery {
	--news-gallery-header-height: clamp(105px, 8vw, 145px);
	position: relative;
	isolation: isolate;
}
/* Grey full-width background */
.news-row--gallery::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: var(--news-gallery-header-height);
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--news-grey);
}
/* ---------------------------------------------------------
   GALLERY ROW INNER CONTAINER
   --------------------------------------------------------- */
.news-row__inner--gallery {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 44%) minmax(0, 56%);
	column-gap: clamp(45px, 6vw, 105px);
	align-items: start;
	width: calc( 100% - (var(--news-side-space) * 2) );
	max-width: var(--news-max-width);
	margin: 0 auto;
}
.news-gallery,
.news-row__content--gallery {
	min-width: 0;
}
.news-gallery {
	position: relative;
	width: 100%;
	border-top: 12px solid var(--news-mint);
	border-bottom: 12px solid var(--news-mint);
	background: var(--news-mint);
}
.news-gallery__main {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #111111;
}
.news-gallery__main .swiper-wrapper {
	align-items: stretch;
}
.news-gallery__main .swiper-slide {
	height: auto;
}
.news-gallery__main-image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #111111;
}
.news-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}
.news-gallery__thumbs {
	width: 100%;
	margin-top: 4px;
	overflow: hidden;
}
.news-gallery__thumbs .swiper-slide {
	height: auto;
	cursor: pointer;
	opacity: 0.62;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.news-gallery__thumbs
.swiper-slide-thumb-active {
	opacity: 1;
}
.news-gallery__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #111111;
}
.news-gallery__thumb-image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}
@media (hover: hover) {
	.news-gallery__thumbs .swiper-slide:hover {
		opacity: 1;
	}
}
.news-gallery__prev,
.news-gallery__next {
	position: absolute;
	z-index: 20;
	top: 42%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 60px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	color: var(--news-mint);
	background: transparent;
	font-size: 32px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}
.news-gallery__prev {
	left: -52px;
}
.news-gallery__next {
	right: -52px;
}
.news-gallery__prev span, .news-gallery__next span {
	display: block;
}
.news-gallery__prev:hover, .news-gallery__next:hover {
	opacity: 0.7;
}
.news-gallery__prev:focus,
.news-gallery__next:focus {
	outline-offset: 4px;
}
.news-row__content--gallery {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.news-row__content--gallery .news-row__header {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: var(--news-gallery-header-height);
	padding: 4px 0 24px;
}
.news-row__content--gallery .news-row__body {
	flex: 1;
	padding: clamp(30px, 3vw, 48px)
		clamp(15px, 2vw, 35px)
		clamp(35px, 4vw, 60px)
		0;
	color: var(--news-white);
}
.news-row__content--gallery .news-row__body a {
	color: var(--news-white);
}
.news-row--static {
	position: relative;
	background: var(--news-white);
}
.news-row__inner--static {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
	column-gap: clamp(55px, 7vw, 100px);
	align-items: center;
	width: calc( 100% - (var(--news-side-space) * 2));
	max-width: var(--news-max-width);
	margin: 0 auto;
}
.news-row__content--static, .news-row__media {
	min-width: 0;
}
.news-row__content--static {
	padding: 20px 0;
}
.news-row__content--static .news-row__header {
	margin-bottom: clamp(25px, 3vw, 45px);
}
.news-row__content--static .news-row__body {
	color: var(--news-black);
}
.news-row__media {
	position: relative;
	z-index: 2;
	display: grid;
	width: 100%;
	gap: 4px;
}
.news-row__media--count-1 {
	grid-template-columns: 1fr;
}
.news-row__media--count-1
.news-row__static-image {
	aspect-ratio: 1 / 1;
}
.news-row__media--count-2 {
	grid-template-columns: 1fr;
}
.news-row__media--count-2
.news-row__static-image {
	aspect-ratio: 4 / 3;
}
.news-row__static-image {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #111111;
}
.news-row__image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}
.news-row__accent {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: 0;
	width: 15%;
	height: 80%;
	transform: translateY(-50%);
	background: var(--news-mint);
	pointer-events: none;
}
.news-archive__empty {
	width: calc( 100% - (var(--news-side-space) * 2));
	max-width: var(--news-max-width);
	margin: 0 auto;
	padding: 80px 0;
	text-align: center;
}
@media screen and (max-width: 1200px) {
	.news-archive {
		--news-side-space: 42px;
	}
	.news-row + .news-row {
		margin-top: 110px;
	}
	/* Gallery layout */
	.news-row--gallery {
		--news-gallery-header-height: 115px;
	}
	.news-row__inner--gallery {
		grid-template-columns:
			minmax(0, 45%)
			minmax(0, 55%);
		column-gap: 45px;
	}
	.news-row__title {
		font-size: clamp(32px, 4.5vw, 48px);
		letter-spacing: 0.17em;
	}
	/* Keep arrows inside the gallery */
	.news-gallery__prev {
		left: 10px;
	}
	.news-gallery__next {
		right: 10px;
	}
	.news-gallery__prev,
	.news-gallery__next {
		color: var(--news-mint);
		text-shadow:
			0 1px 4px rgba(0, 0, 0, 0.3);
	}
	.news-row__inner--static {
		grid-template-columns: minmax(0, 1.4fr)	minmax(280px, 0.9fr);
		column-gap: 55px;
	}
}
@media screen and (max-width: 900px) {
	.news-archive {
		--news-side-space: 32px;
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.news-row + .news-row {
		margin-top: 90px;
	}
	.news-row--gallery {
		--news-gallery-header-height: 105px;
	}
	.news-row__inner--gallery {
		grid-template-columns: minmax(0, 46%) minmax(0, 54%);
		column-gap: 32px;
	}
	.news-row__title {
		font-size: clamp(29px, 5vw, 42px);
		letter-spacing: 0.15em;
	}
	.news-row__subtitle {
		font-size: 12px;
		letter-spacing: 0.13em;
	}
	.news-row__body {
		font-size: 14px;
		line-height: 1.5;
	}
	.news-row__content--gallery
	.news-row__body {
		padding: 28px 15px 35px	0;
	}
	.news-row__inner--static {
		grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.8fr);
		column-gap: 40px;
	}
	.news-row__content--static .news-row__header {
		margin-bottom: 25px;
	}
	.news-row__accent {
		height: 140px;
	}
}
@media screen and (max-width: 767px) {
	.news-archive {
		--news-side-space: 20px;
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.news-row + .news-row {
		margin-top: 75px;
	}
	.news-row__title {
		font-size: clamp(27px, 8vw, 38px);
		line-height: 1.15;
		letter-spacing: 0.14em;
	}
	.news-row__subtitle {
		margin-top: 10px;
		font-size: 11px;
		line-height: 1.55;
		letter-spacing: 0.12em;
	}
	.news-row__body {
		font-size: 14px;
		line-height: 1.55;
	}
	.news-row--gallery::before {
		display: none;
	}
	.news-row__inner--gallery {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"news-header"
			"news-gallery"
			"news-body";
		width: calc( 100% - (var(--news-side-space) * 2) );
		column-gap: 0;
	}
	/*
	 * Let the header and body become direct
	 * grid children.
	 */
	.news-row__content--gallery {
		display: contents;
	}
	/* Title first */
	.news-row__content--gallery
	.news-row__header {
		grid-area: news-header;
		min-height: 0;
		padding: 0 0 25px;
	}
	/* Gallery second */
	.news-gallery {
		grid-area: news-gallery;
		border-top-width: 9px;
		border-bottom-width: 9px;
	}
	/* Text third */
	.news-row__content--gallery
	.news-row__body {
		grid-area: news-body;
		margin-right: calc( var(--news-side-space) * -1	);
		margin-left: calc( var(--news-side-space) * -1 );
		padding: 30px var(--news-side-space) 35px;
		color: var(--news-white);
		background: var(--news-grey);
	}
	/* Arrows */
	.news-gallery__prev,
	.news-gallery__next {
		top: 40%;
		width: 40px;
		height: 50px;
		font-size: 27px;
	}
	.news-gallery__prev {
		left: 4px;
	}
	.news-gallery__next {
		right: 4px;
	}
	/* =====================================================
	   MOBILE STATIC LAYOUT
	   ===================================================== */
	.news-row__inner--static {
		grid-template-columns: 1fr;
		row-gap: 30px;
	}
	.news-row__content--static {
		padding: 0;
	}
	.news-row__content--static
	.news-row__header {
		margin-bottom: 22px;
	}
	.news-row__media {
		width: 100%;
	}
	/*
	 * The green strip remains on the far right,
	 * immediately after the image container.
	 */
	.news-row__accent {
		top: auto;
		right: 0;
		bottom: 12%;
		width: var(--news-side-space);
		height: clamp(90px, 26vw, 135px);
		transform: none;
	}
	/* One image */
	.news-row__media--count-1
	.news-row__static-image {
		aspect-ratio: 1 / 1;
	}
	/* Two stacked images */
	.news-row__media--count-2
	.news-row__static-image {
		aspect-ratio: 4 / 3;
	}
}
/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */
@media screen and (max-width: 480px) {
	.news-archive {
		--news-side-space: 16px;
	}
	.news-row + .news-row {
		margin-top: 65px;
	}
	.news-row__title {
		font-size: 27px;
		letter-spacing: 0.12em;
	}
	.news-row__subtitle {
		font-size: 10px;
		letter-spacing: 0.1em;
	}
	.news-row__body {
		font-size: 13px;
	}
	.news-row__content--gallery
	.news-row__body {
		padding-top: 26px;
		padding-bottom: 30px;
	}
	.news-gallery__prev,
	.news-gallery__next {
		font-size: 24px;
	}
}
/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.news-gallery__thumbs .swiper-slide {
		transition: none;
	}
}
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}
.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}
.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}
.main-navigation ul ul a {
	width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}
.main-navigation li {
	position: relative;
}
.main-navigation a {
	display: block;
	text-decoration: none;
} 
	/*LALLA*/
.menu-container {
	margin-top: 1%;
	padding: 1% 4%;
	display: flex;
}
.logo {
	width: 150px;
}
.main-navigation {
	display: flex;
	justify-content: end;
	align-items: center;
	width: 100%;
	position: relative;
}
.burger-button {
	cursor: pointer;
	width: 24px;
	height: 18px;
	position: relative;
	background: none repeat scroll 0 0 transparent;
	border: medium none;
	border-spacing: 0;
	list-style: none outside none;
	margin: 0;
	padding: 0;
	text-indent: 0;
	float: right;
}
.main-navigation ul {
	display: flex;
}
.main-navigation li {
	position: relative;
}
.main-navigation li a{
	display: block;
	padding-inline: 10px;
	text-transform: uppercase;
	letter-spacing: 0.20em;
	text-decoration: none;
	font-family: "FuturaNeu", sans-serif;
	font-size: 14px;
	color: #1d1d1b;
}
.main-navigation a:hover {
	color: #96adaf;
}
.main-navigation ul ul a:hover {
	color: #1d1d1b;
}
.main-navigation ul ul{
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	display: block;
	position: absolute;
	top: 100%;
	width: 250%;
	z-index: 99999;
	padding: 5%;
	background-color: #96adaf;
}
.main-navigation ul ul a {
	display: block;
	padding: 4%;
	width: 150%;
	font-size: 14px;
	color: #fff;
}
/* LALA */
@media screen and (max-width: 1000px) {
	.menu-container {
		display: flex;
		align-items: center;
	}
	.logo {
		width: 120px;
	}
	.menu-menu-1-container {
		float: left;
	}
	.main-navigation li {
		padding: 2% 0px;
		margin: 4%;
	}
	.main-navigation ul li.focus > ul {
		position: relative;
		margin: 0;
		width: 100%;
		left: 0;
	}
	.main-navigation ul li.focus > ul li {
		padding: 0px;
		margin: 0px;
	}
	.main-navigation ul ul {
		padding: 0;
	}
	.main-navigation ul ul a{
		display: block;
		padding: 4% 0px;
		width: 100%;
		color:#261E26;
	}
	.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
		left: unset;
}
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}
@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: flex;
	}
}
/* la */
.burger-button {
	cursor: pointer;
    width: 24px;
    height: 18px;
    position: relative;
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    border-spacing: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-indent: 0;
	float: right;
}
.burger-button span:first-child {
    top: 0;
}
.burger-button span {
    transition: all 0.3sease;
    border-radius: 4px;
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    background-color: #111;
}
.menu-container .burger-button span:first-child {
	top: 0;
  }
  .menu-container .burger-button span:nth-child(2) {
	top: 6px;
  }
  .menu-container .burger-button span:last-child {
	top: 12px;
  }
  .menu-container .open.burger-button span:first-child,
  .menu-container .open.burger-button span:last-child {
	top: 6px;
  }
  .menu-container .open.burger-button span:first-child {
	transform: rotate(45deg);
  }
  .menu-container .open.burger-button span:nth-child(2) {
	opacity: 0;
	width: 0;
  }
  .menu-container .open.burger-button span:last-child {
	transform: rotate(-45deg);
  }
.main-navigation ul .menu-item-has-children > a:after {
    content: "";
    background-image: url("./img/arrow-down.svg");
    top: 6px;
    width: 20px;
    height: 12px;
    display: block;
    position: absolute;
    right: -2px;
    background-size: cover;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in;
}
.main-navigation ul .menu-item-has-children.focus > a:after {
	transform: rotate(180deg);
}
.main-navigation ul {
	display: flex;
}
@media screen and (max-width: 1000px) {
	.site-branding {
		z-index: 999999;
	}
	.main-navigation {
        position: relative;
		display: block;
        /* min-height: 100vh; */
        width: 100vw;
        /* z-index: 20; */
        background: white;
        /* transform: translateX(-100vw);
        transition: all 0.4sease-in; */
        left: 0;
        /* top: 92px; */
        height: 100%;
    }
	.main-navigation ul {
		display: none;
		list-style: none;
		margin: 10% -5%;
		padding-right: 0;
		padding-inline-start: 0;
		position: absolute;
		width: 100vw;
		background-color: #fff;
		height: auto;
		z-index: 1;
		right: 0;
		text-align: center;
		z-index: 1000;
	}
	.main-navigation ul ul {
		background-color: #fff;
		box-shadow: none;
	}
	.main-navigation ul .menu-item-has-children > a:after{
		top: 14px;
		right: 14px;
	}
}
/* la*/
.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}
/*  */
/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}
/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}
/* Alignments
--------------------------------------------- */
.alignleft {
	/*rtl:ignore*/
	float: left;
	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}
.alignright {
	/*rtl:ignore*/
	float: right;
	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/**** VIDEO ******/
/* .video-container {
	background-color: #96adaf;
	border-top: 50px solid #96adaf;
	border-bottom: 40px solid #96adaf;
}
.background-video {
	position: relative;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
} */

/***** VIDEO ******/
/* ========================================
   HERO VIDEO
======================================== */
.video-container {
    --video-bg: #96adaf;
    --video-control-color: #242424;
    width: 100%;
	margin-top: 4%;
    padding-top: 50px;
    padding-bottom: 40px;
    background-color: var(--video-bg);
}
.video-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #111;
}
/* ========================================
   VIDEO
======================================== */
.background-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ========================================
   GREYSCALE VIDEO SLICES
======================================== */
.video-slice {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    pointer-events: none;
    background-color: rgba(50, 50, 50, 0.25);
    -webkit-backdrop-filter: grayscale(1) brightness(0.7) contrast(0.9);
    backdrop-filter: grayscale(1) brightness(0.7) contrast(0.9);
}
/* LEFT PANEL */
.video-slice--left {
    left: 10.5%;
    width: 7.2%;
}
/* RIGHT PANEL */
.video-slice--right {
    right: 8.2%;
    width: 14.2%;
}
/* ========================================
   RIGHT THIN VERTICAL LINE
======================================== */
.video-vertical-line {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 4.8%;
    width: 16px;
    height: 86%;
    pointer-events: none;
    background-color: rgba(35, 35, 35, 0.85);
}
/* ========================================
   CONTROLS
======================================== */
.video-controls {
    position: absolute;
    z-index: 5;
    left: 17.7%;
    right: 0;
    bottom: 0;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    background-color: var(--video-bg);
}
/* ========================================
   CONTROL BUTTONS
======================================== */
.video-control {
    appearance: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    color: var(--video-control-color);
    background: transparent;
    cursor: pointer;
}
.video-control:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}
/* ========================================
   PLAY BUTTON
======================================== */
.video-control--play {
    width: 20px;
    height: 28px;
}
.video-play-icon {
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid currentColor;
}
/* ========================================
   PAUSE ICON
======================================== */
.video-container.is-playing .video-play-icon {
    position: relative;
    width: 15px;
    height: 18px;
    border: 0;
}
.video-container.is-playing .video-play-icon::before,
.video-container.is-playing .video-play-icon::after {
    content: "";
    position: absolute;
    top: 0;
    width: 4px;
    height: 18px;
    background-color: currentColor;
}
.video-container.is-playing .video-play-icon::before {
    left: 1px;
}
.video-container.is-playing .video-play-icon::after {
    right: 1px;
}
/* ========================================
   FORWARD BUTTON
======================================== */
.video-control--forward {
    width: 28px;
    height: 28px;
}
.video-forward-icon {
    display: block;
    width: 26px;
    height: 18px;
}
/* ========================================
   VIDEO TIME
======================================== */
.video-time {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: 2px;
    color: var(--video-control-color);
    font-size: 14px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.video-time__separator {
    opacity: 0.9;
}

/* ========================================
   CONTACT PAGE
======================================== */
.contact-page {
    --contact-accent: #96a1a2;
    --contact-text: #202426;
    width: 100%;
    padding: clamp(80px, 9vw, 150px) clamp(30px, 7vw, 120px);
    color: var(--contact-text);
    background-color: #ffffff;
}
/* ========================================
   INNER
======================================== */
.contact-page__inner {
    width: min(100%, 1500px);
    min-height: min(720px, 72vh);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
    align-items: center;
    column-gap: clamp(70px, 9vw, 170px);
}
/* ========================================
   IMAGE
======================================== */
.contact-page__media {
    position: relative;
    width: 100%;
    max-width: 650px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.contact-page__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ========================================
   CONTENT
======================================== */
.contact-page__content {
    width: 100%;
    max-width: 580px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* ========================================
   MARKER
======================================== */
.contact-page__marker {
    display: block;
    width: clamp(34px, 3vw, 52px);
    aspect-ratio: 1;
    margin-bottom: clamp(32px, 4vw, 60px);
    background-color: var(--contact-accent);
}
/* ========================================
   TITLE
======================================== */
.contact-page__title {
    margin: 0 0 clamp(30px, 3vw, 48px);
    color: var(--contact-text);
    font-size: clamp(42px, 5vw, 78px);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* ========================================
   TEXT
======================================== */
.contact-page__text {
    width: min(100%, 470px);
    margin-bottom: clamp(35px, 4vw, 60px);
    font-size: clamp(17px, 1.4vw, 22px);
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: 0.01em;
}
.contact-page__text p {
    margin: 0;
}
.contact-page__text p + p {
    margin-top: 1em;
}
/* ========================================
   EMAIL
======================================== */
.contact-page__email {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--contact-text);
    font-size: clamp(17px, 1.65vw, 27px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.contact-page__email-text {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.contact-page__email-line {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 10px;
    background-color: currentColor;
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact-page__email:focus-visible {
    outline: 2px solid var(--contact-accent); 
		outline-offset: 8px;
}
/* ========================================
   DESKTOP HOVERS
======================================== */
@media (hover: hover) and (pointer: fine) {
    .contact-page__media:hover
    .contact-page__image {
        transform: scale(1.02);
    }
    .contact-page__email:hover
    .contact-page__email-line {
        transform: scaleX(0.45);
    }
}
/* ========================================
   TABLET
======================================== */
@media (max-width: 1100px) {
    .contact-page {
        padding: clamp(70px, 9vw, 110px) clamp(30px, 5vw, 70px);
    }
    .contact-page__inner {
        min-height: 620px;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
        column-gap: clamp(45px, 6vw, 80px);
    }
    .contact-page__media {
        max-width: 540px;
    }
    .contact-page__marker {
        margin-bottom: 32px;
    }
    .contact-page__title {
        margin-bottom: 28px;
        font-size: clamp(38px, 6vw, 60px);
    }
    .contact-page__text {
        margin-bottom: 36px;
        font-size: clamp(16px, 1.8vw, 20px);
    }
    .contact-page__email {
        font-size: clamp(16px, 2vw, 22px);
    }
}
/* ========================================
   SMALL TABLET
======================================== */
@media (max-width: 900px) {
    .contact-page__inner {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, 0.9fr);
        column-gap: 40px;
    }
    .contact-page__title {
        font-size: clamp(34px, 6vw, 48px);
    }
    .contact-page__text {
        font-size: 16px;
    }
}
/* ========================================
   MOBILE
======================================== */
@media (max-width: 767px) {
    .contact-page {
        padding: 0 0 clamp(70px, 18vw, 110px);
    }
    .contact-page__inner {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .contact-page__media {
        width: 100%;
        max-width: none;
        aspect-ratio: 4 / 5;
    }
    .contact-page__content {
        width: 100%;
        max-width: none;
        padding: clamp(50px, 14vw, 80px) clamp(24px, 8vw, 48px) 0;
    }
    .contact-page__marker {
        width: clamp(30px, 9vw, 42px);
        margin-bottom: clamp(30px, 9vw, 46px);
    }
    .contact-page__title {
        margin-bottom: clamp(28px, 8vw, 42px);
        font-size: clamp(38px, 12vw, 58px);
        line-height: 1;
    }
    .contact-page__text {
        width: 100%;
        max-width: 480px;
        margin-bottom: clamp(35px, 10vw, 52px);
        font-size: clamp(16px, 4.8vw, 20px);
        line-height: 1.65;
    }
    .contact-page__email {
        width: fit-content;
        max-width: 100%;
        font-size: clamp(16px, 4.7vw, 21px);
    }
}
/* ========================================
   VERY SMALL MOBILE
======================================== */
@media (max-width: 380px) {
    .contact-page__content {
        padding-inline: 20px;
    }
    .contact-page__title {
        font-size: 36px;
    }
    .contact-page__text {
        font-size: 16px;
    }
    .contact-page__email {
        font-size: 15px;
    }
}
/* ========================================
   REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
    .contact-page__image,
    .contact-page__email-line {
        transition: none;
    }
}

/* ========================================
   BIO PAGE
======================================== */

.bio-page {
    --bio-accent: #96a1a2;
    --bio-text: #202426;
    --bio-bg: #ffffff;
    --bio-green-text: #ffffff;

    color: var(--bio-text);
    background-color: var(--bio-bg);
}


/* ========================================
   BIO MARKERS
======================================== */

.bio-marker {
    display: block;

    width: clamp(38px, 3.5vw, 58px);
    aspect-ratio: 1;

    flex: 0 0 auto;

    background-color: var(--bio-accent);
}


.bio-marker--hero {
    width: clamp(52px, 5vw, 84px);
}


/* ========================================
   BIO HERO
======================================== */

.bio-hero {
    position: relative;

    width: 100%;

    padding:
        clamp(70px, 8vw, 140px)
        clamp(30px, 7vw, 120px)
        clamp(110px, 12vw, 200px);

    overflow: hidden;
}


.bio-hero__inner {
    width: min(100%, 1600px);

    margin-inline: auto;
}


/* ========================================
   BIO HERO HEADER
======================================== */

.bio-hero__header {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap: 40px;

    margin-bottom:
        clamp(50px, 7vw, 120px);
}


.bio-hero__title {
    margin: 0;

    color: var(--bio-text);

    font-size:
        clamp(82px, 13vw, 210px);

    font-weight: 300;

    line-height: 0.76;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}


.bio-marker--hero {
    margin-right:
        clamp(20px, 9vw, 150px);

    transform:
        translateY(
            clamp(10px, 2vw, 30px)
        );
}


/* ========================================
   BIO HERO MAIN
======================================== */

.bio-hero__main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(340px, 0.85fr);

    align-items: center;

    column-gap:
        clamp(70px, 10vw, 180px);
}


/* ========================================
   BIO HERO IMAGE
======================================== */

.bio-hero__media {
    position: relative;

    width: 100%;
    max-width: 680px;

    margin: 0;

    aspect-ratio: 4 / 5;

    overflow: hidden;
}


.bio-hero__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        var(
            --bio-image-position,
            center center
        );

    transition:
        transform 1s
        cubic-bezier(0.22, 1, 0.36, 1);
}


/* ========================================
   BIO HERO INTRO
======================================== */

.bio-hero__intro {
    width: min(100%, 620px);

    margin-top:
        clamp(40px, 7vw, 120px);

    font-size:
        clamp(18px, 1.35vw, 23px);
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.005em;
}
.bio-hero__intro p {
    margin: 0;
}
.bio-hero__intro p + p {
    margin-top: 1.6em;
}
/* ========================================
   BIO SECTIONS
======================================== */
.bio-sections {
    width: 100%;
    overflow: hidden;
}
.bio-section {
    position: relative;
    width: 100%;
    padding: clamp(100px, 11vw, 190px) clamp(30px, 7vw, 120px);
}
.bio-section__inner {
    position: relative;
    width: min(100%, 1500px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(18px, 2.5vw, 42px);
    row-gap: clamp(40px, 6vw, 90px);
    align-items: start;
}
/* ========================================
   SECTION MARKERS
======================================== */
.bio-section__marker-wrap {
    grid-column: 1 / -1;
    display: flex;
    margin-bottom: clamp(10px, 2vw, 30px);
}
.bio-section__marker-wrap--left {
    justify-content: flex-start;
}
.bio-section__marker-wrap--center {
    justify-content: center;
    transform: translateX( clamp(-50px, -3vw, -20px) );
}
.bio-section__marker-wrap--right {
    justify-content: flex-end;
    padding-right: clamp(20px, 8vw, 140px);
}
/* ========================================
   SECTION CONTENT
======================================== */
.bio-section__content {
    position: relative;
    min-width: 0;
    z-index: 2;
}
.bio-section__title {
    max-width: 12ch;
    margin: 0 0 clamp(35px, 4vw, 70px);
    color: inherit;
    font-size: clamp(42px, 5vw, 80px);
    font-weight: 300;
    line-height: 0.98;
    letter-spacing: -0.025em;
}
.bio-section__text {
    width: min(100%, 64ch);
    font-size: clamp(17px, 1.25vw, 21px);
    font-weight: 300;
    line-height: 1.8;
    letter-spacing: 0.003em;
}
.bio-section__text p {
    margin: 0;
}
.bio-section__text p + p {
    margin-top: 1.5em;
}
.bio-section__text a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
/* ========================================
   IMAGE RIGHT
======================================== */
.bio-section--has-image.bio-section--image-right
.bio-section__content {
    grid-column: 2 / 7;
}
.bio-section--has-image.bio-section--image-right
.bio-section__media {
    grid-column: 8 / 13;
    justify-self: end;
}
/* ========================================
   IMAGE LEFT
======================================== */
.bio-section--has-image.bio-section--image-left
.bio-section__media {
    grid-column: 1 / 6;
    justify-self: start;
}
.bio-section--has-image.bio-section--image-left
.bio-section__content {
    grid-column: 7 / 12;
}
/* ========================================
   TEXT LEFT — NO IMAGE
======================================== */
.bio-section--no-image.bio-section--text-left
.bio-section__content {
    grid-column: 2 / 8;
}
/* ========================================
   TEXT RIGHT — NO IMAGE
======================================== */
.bio-section--no-image.bio-section--text-right
.bio-section__content {
    grid-column: 6 / 12;
}
/* ========================================
   SMALL IMAGE
======================================== */
.bio-section--image-small
.bio-section__media {
    width: min(100%, 380px);
    aspect-ratio: 4 / 5;
}
/* ========================================
   MEDIUM IMAGE
======================================== */
.bio-section--image-medium
.bio-section__media {
    width: min(100%, 540px);
    aspect-ratio: 1 / 1;
}
/* ========================================
   LARGE IMAGE
======================================== */
.bio-section--image-large
.bio-section__media {
    width: min(100%, 720px);
    aspect-ratio: 4 / 3;
}
/* ========================================
   SECTION IMAGES
======================================== */
.bio-section__media {
    position: relative;
    margin: 0;
    overflow: hidden;
}
.bio-section__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var( --bio-image-position, center center );
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ========================================
   CONTROLLED ASYMMETRY
======================================== */
@media (min-width: 1101px) {
    .bio-section--has-image:nth-child(odd)
    .bio-section__media {
        transform: translateY(-35px);
    }
    .bio-section--has-image:nth-child(even)
    .bio-section__media {
        transform: translateY(55px);
    }
}
/* ========================================
   FEATURE SECTION
======================================== */
.bio-section--feature.bio-section--no-image
.bio-section__content {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1fr);
    column-gap: clamp(70px, 10vw, 180px);
    align-items: start;
}
.bio-section--feature
.bio-section__title {
    max-width: 8ch;
    margin: 0;
    font-size: clamp(64px, 8.5vw, 96px);
    line-height: 0.82;
    letter-spacing: -0.055em;
}
.bio-section--feature
.bio-section__text {
    padding-top: clamp(20px, 5vw, 80px);
}
.bio-section--feature.bio-section--has-image
.bio-section__content {
    grid-column: 1 / 8;
}
.bio-section--feature.bio-section--has-image
.bio-section__media {
    grid-column: 9 / 13;
}
/* ========================================
   GREEN SECTION
======================================== */
.bio-section--green {
    padding-block: clamp(110px, 12vw, 210px);
    color: var(--bio-green-text);
    background-color: var(--bio-accent);
}
.bio-section--green
.bio-marker {
    background-color: #ffffff;
}
.bio-section--green.bio-section--no-image
.bio-section__content {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1fr);
    column-gap: clamp(70px, 10vw, 170px);
    align-items: start;
}
.bio-section--green
.bio-section__title {
    max-width: 9ch;
    margin: 0;
    font-size: clamp(54px, 7vw, 120px);
    line-height: 0.88;
    letter-spacing: -0.045em;
}
.bio-section--green.bio-section--no-image
.bio-section__text {
    padding-top: clamp(15px, 4vw, 60px);
}
.bio-section--green.bio-section--has-image
.bio-section__content {
    grid-column: 1 / 8;
}
.bio-section--green.bio-section--has-image
.bio-section__media {
    grid-column: 9 / 13;
}
/* ========================================
   DESKTOP HOVERS
======================================== */
@media (hover: hover) and (pointer: fine) {
    .bio-hero__media:hover
    .bio-hero__image {
        transform: scale(1.02);
    }
    .bio-section__media:hover
    .bio-section__image {
        transform: scale(1.025);
    }
}
/* ========================================
   TABLET
======================================== */
@media (max-width: 1100px) {
    .bio-hero {
        padding: clamp(60px, 8vw, 100px) clamp(30px, 5vw, 70px) clamp(90px, 12vw, 150px);
    }
    .bio-hero__title {
        font-size: clamp(75px, 13vw, 150px);
    }
    .bio-hero__main {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
        column-gap: clamp(45px, 6vw, 80px);
    }
    .bio-hero__intro {
        margin-top: 30px;
        font-size: clamp(17px, 1.8vw, 20px);
    }
    .bio-section {
        padding: clamp(85px, 10vw, 140px) clamp(30px, 5vw, 70px);
    }
    .bio-section__inner {
        column-gap: clamp(16px, 2vw, 30px);
    }
    .bio-section__title {
        font-size: clamp(38px, 5.5vw, 64px);
    }
    .bio-section__text {
        font-size: clamp(16px, 1.7vw, 19px);
    }
    .bio-section--has-image.bio-section--image-right
    .bio-section__content {
        grid-column: 1 / 7;
    }
    .bio-section--has-image.bio-section--image-right
    .bio-section__media {
        grid-column: 8 / 13;
    }
    .bio-section--has-image.bio-section--image-left
    .bio-section__media {
        grid-column: 1 / 6;
    }
    .bio-section--has-image.bio-section--image-left
    .bio-section__content {
        grid-column: 7 / 13;
    }
    .bio-section--feature.bio-section--no-image
    .bio-section__content,
    .bio-section--green.bio-section--no-image
    .bio-section__content {
        column-gap: clamp(40px, 6vw, 80px);
    }
    .bio-section--feature
    .bio-section__title {
        font-size:
            clamp(58px, 9vw, 100px);
    }
    .bio-section--green
    .bio-section__title {
        font-size: clamp(50px, 8vw, 90px);
    }
}
/* ========================================
   MOBILE
======================================== */
@media (max-width: 767px) {
    /* --------------------------------
       HERO
    ------------------------------- */
    .bio-hero {
        padding: 50px 24px 100px;
    }
    .bio-hero__header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
        margin-bottom: 60px;
    }
    .bio-hero__title {
        font-size: clamp(72px, 23vw, 125px);
        line-height: 0.8;
    }
    .bio-marker--hero {
        width: clamp(40px, 12vw, 56px);
        margin-right: 0;
        transform: translateY(15px);
    }
    .bio-hero__main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 60px;
    }
    .bio-hero__media {
        width: 88%;
        max-width: none;
        aspect-ratio: 4 / 5;
    }
    .bio-hero__intro {
        width: 100%;
        margin-top: 0;
        font-size: clamp(17px, 4.7vw, 20px);
        line-height: 1.7;
    }
    /* --------------------------------
       SECTIONS
    -------------------------------- */
    .bio-section {
        padding: clamp(80px, 22vw, 120px) 24px;
    }
    .bio-section__inner {
        display: flex;
        flex-direction: column;
        gap: clamp(40px, 12vw, 70px);
    }
    /* --------------------------------
       MARKERS
    -------------------------------- */
    .bio-section__marker-wrap {
        width: 100%;
        margin-bottom: 0;
    }
    .bio-section__marker-wrap--right {
        padding-right: 8vw;
    }
    .bio-section__marker-wrap--center {
        transform: none;
    }
    .bio-marker {
        width: clamp(34px, 10vw, 46px);
    }
    /* --------------------------------
       CONTENT
    -------------------------------- */
    .bio-section__content {
        width: 100%;
    }
    .bio-section__title {
        max-width: 10ch;
        margin-bottom: clamp(32px, 10vw, 50px);
        font-size: clamp(40px, 12vw, 62px);
        line-height: 0.95;
    }
    .bio-section__text {
        width: 100%;
        font-size: clamp(16px, 4.5vw, 19px);
        line-height: 1.75;
    }
    /* --------------------------------
       IMAGES
    -------------------------------- */
    .bio-section__media {
        transform: none !important;
    }
    .bio-section--image-small
    .bio-section__media {
        width: 68%;
        aspect-ratio: 4 / 5;
    }
    .bio-section--image-medium
    .bio-section__media {
        width: 82%;
        aspect-ratio: 1 / 1;
    }
    .bio-section--image-large
    .bio-section__media {
        width: 100%;
        aspect-ratio: 4 / 3;
    }
    .bio-section--image-left
    .bio-section__media {
        margin-right: auto;
        margin-left: 0;
    }
    .bio-section--image-right
    .bio-section__media {
        margin-right: 0;
        margin-left: auto;
    }
    /* --------------------------------
       FEATURE
    -------------------------------- */
    .bio-section--feature.bio-section--no-image
    .bio-section__content {
        display: block;
    }
    .bio-section--feature
    .bio-section__title {
        max-width: 8ch;
        margin-bottom: 50px;
        font-size: clamp(56px, 17vw, 60px);
        line-height: 0.84;
    }
    .bio-section--feature
    .bio-section__text {
        padding-top: 0;
	}
    /* --------------------------------
       GREEN SECTION
    -------------------------------- */
    .bio-section--green {
        padding-block:
            clamp(90px, 25vw, 140px);
    }
    .bio-section--green.bio-section--no-image
    .bio-section__content {
        display: block;
    }
    .bio-section--green
    .bio-section__title {
        max-width: 9ch;
        margin-bottom: 50px;
        font-size: clamp(50px, 15vw, 78px);
    }
    .bio-section--green
    .bio-section__text {
        padding-top: 0;
    }
}
/* ========================================
   VERY SMALL MOBILE
======================================== */
@media (max-width: 380px) {
    .bio-hero,
    .bio-section {
        padding-inline: 20px;
    }
    .bio-hero__title {
        font-size: 68px;
    }
    .bio-section__title {
        font-size: 38px;
    }
    .bio-section--feature
    .bio-section__title {
        font-size: 52px;
    }
    .bio-section--green
    .bio-section__title {
        font-size: 48px;
    }
}
/* ========================================
   REDUCED MOTION
======================================== */
@media (prefers-reduced-motion: reduce) {
    .bio-hero__image,
    .bio-section__image {
        transition: none;
    }
}