html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-family: sans-serif;
}
body {
	margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}
audio,
canvas,
progress,
video {
	vertical-align: baseline;
	display: inline-block;
}
audio:not([controls]) {
	height: 0;
	display: none;
}
[hidden],
template {
	display: none;
}
a {
	background-color: #0000;
}
a:active,
a:hover {
	outline: 0;
}
abbr[title] {
	border-bottom: 1px dotted;
}
b,
strong {
	font-weight: bold;
}
dfn {
	font-style: italic;
}
h1 {
	margin: 0.67em 0;
	font-size: 2em;
}
mark {
	color: #000;
	background: #ff0;
}
small {
	font-size: 80%;
}
sub,
sup {
	vertical-align: baseline;
	font-size: 75%;
	line-height: 0;
	position: relative;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
img {
	border: 0;
}
svg:not(:root) {
	overflow: hidden;
}
hr {
	box-sizing: content-box;
	height: 0;
}
pre {
	overflow: auto;
}
code,
kbd,
pre,
samp {
	font-family: monospace;
	font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}
button {
	overflow: visible;
}
button,
select {
	text-transform: none;
}
button,
html input[type="button"],
input[type="reset"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled],
html input[disabled] {
	cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
input {
	line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
input[type="search"] {
	-webkit-appearance: none;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
legend {
	border: 0;
	padding: 0;
}
textarea {
	overflow: auto;
}
optgroup {
	font-weight: bold;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td,
th {
	padding: 0;
}
* {
	box-sizing: border-box;
}
html {
	height: 100%;
}
body {
	color: #333;
	background-color: #fff;
	min-height: 100%;
	margin: 0;
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
}
img {
	vertical-align: middle;
	max-width: 100%;
	display: inline-block;
}
.inline-block {
	max-width: 100%;
	display: inline-block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-bottom: 10px;
	font-weight: bold;
}
h1 {
	margin-top: 20px;
	font-size: 38px;
	line-height: 44px;
}
h2 {
	margin-top: 20px;
	font-size: 32px;
	line-height: 36px;
}
h3 {
	margin-top: 20px;
	font-size: 24px;
	line-height: 30px;
}
h4 {
	margin-top: 10px;
	font-size: 18px;
	line-height: 24px;
}
h5 {
	margin-top: 10px;
	font-size: 14px;
	line-height: 20px;
}
h6 {
	margin-top: 10px;
	font-size: 12px;
	line-height: 18px;
}
p {
	margin-top: 0;
	margin-bottom: 10px;
}
blockquote {
	border-left: 5px solid #e2e2e2;
	margin: 0 0 10px;
	padding: 10px 20px;
	font-size: 18px;
	line-height: 22px;
}
figure {
	margin: 0 0 10px;
}
ul,
ol {
	margin-top: 0;
	margin-bottom: 10px;
	padding-left: 40px;
}
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
button,
[type="button"],
[type="reset"] {
	cursor: pointer;
	-webkit-appearance: button;
	border: 0;
}
label {
	margin-bottom: 5px;
	font-weight: bold;
	display: block;
}
.container {
	max-width: 940px;
	margin-left: auto;
	margin-right: auto;
}
.container:before,
.container:after {
	content: " ";
	grid-area: 1 / 1 / 2 / 2;
	display: table;
}
.container:after {
	clear: both;
}
@media screen and (max-width: 991px) {
	.container {
		max-width: 728px;
	}
}
@media screen and (max-width: 479px) {
	.container {
		max-width: none;
	}
}
@keyframes spin {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}
/* Jost and Playfair Display replace Review and Feature Display site-wide —
   both self-hosted (same convention as the fonts they replace: a local
   woff2 in this folder, not a live Google Fonts <link>, so the page has no
   external font request at runtime and nothing changes about how
   font-display: block/document.fonts.ready already work in app.js).

   Both files are the actual VARIABLE fonts Google serves for these
   families, not a set of per-weight statics — confirmed by fetching every
   weight's own @font-face from fonts.googleapis.com/css2 and finding they
   all point at the identical file; the browser selects the specific weight
   off the file's own wght axis at render time. One file, one @font-face
   rule, `font-weight` as a RANGE (not the fixed single number a static font
   needs) is what actually declares that — this is why Review's own 3
   separate rules (300/400/900, one static file apiece) collapse into 1
   here rather than 3. Any weight inside the declared range now renders
   natively; nowhere in this codebase needs the "600 would be synthesised,
   only 300/400/900 are real files" caveat Review's own comments carried,
   though those comments haven't all been rewritten — they're now stricter
   than the truth, not wrong in the risky direction. */
@font-face {
	font-family: Jost;
	src: url("../fonts/jost-variable.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: Playfair Display;
	src: url("../fonts/playfairdisplay-variable.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: block;
}
/* Greek. Neither file above contains a single Greek glyph, so each family
   gets a second face under the SAME name, limited by unicode-range to the
   Greek block: Greek characters come from it, everything else still from the
   original file, and nothing in the CSS that says "Jost" or "Playfair
   Display" has to change. The browser only downloads these where a page
   actually contains Greek. Commissioner is the nearest geometric sans to
   Jost that has Greek; Noto Serif Display the nearest high-contrast serif to
   Playfair. Both are Google Fonts' own "greek" subsets, self-hosted. Weight
   ranges match the Latin faces so the pair behaves as one family. */
@font-face {
	font-family: Jost;
	src: url("../fonts/commissioner-greek-variable.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: block;
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
	font-family: Playfair Display;
	src: url("../fonts/notoserifdisplay-greek-variable.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: block;
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* ==========================================================================
   MINOS HOST — design tokens

   The template shipped with one accent colour doing two incompatible jobs:
   filling whole screens AND setting type on the light page. Gold cannot do
   the second — it measures 2.39:1 on the off-white, which fails at any size.
   So the accent is split in two:

     --vv-charcoal  dark surfaces, and all type on the light page   10.89:1
     --vv-gold      accent — type ONLY on charcoal or on photographs 4.56:1

   Never set gold type on --vv-off-white. Anything gold on a light background
   has to be decorative (rules, marks, the logo), never something to read.
   ========================================================================== */
:root {
	/* Palette */
	--vv-off-white: #f5f2ed; /* page + type on dark              */
	--vv-charcoal: #2e3644; /* type on light, dark surfaces     */
	--vv-gold: #b89a6b; /* accent — legible only on charcoal */
	--vv-gray: #5c6572; /* muted type — 4.9:1 on off-white  */
	/* The light grounds every section below a page's hero sits on, a shade
	   cooler and a touch deeper than pure white, like ice (on request) —
   --vv-off-white stays the type colour on dark:
	   --vv-cream the section ground, --vv-cream-card a card lifted on it. */
	--vv-cream: #edf0f3; /* an icy, just-off white */
	--vv-cream-card: #f7f9fa;

	/* Viewport unit fix (set from JS in assets/js/head.js) */
	--vh: 1vh;

	/* Card-deck type — ONE title size and ONE text size shared by every
	   stacking card deck on the site (WhyUs, /services, /about, /faq), so a
	   card title, or a card paragraph/bullet, never renders at two different
	   sizes on two pages. Held to the viewport's height as well as its width,
	   since each card is pinned inside a single screen: 72px / 20px at
	   1920×1080, down to 32px / 16px on a phone. Bullets use the text size,
	   the same as paragraphs. */
	--card-title-size: clamp(32px, min(3.75vw, 6.7vh), 72px);
	--card-text-size: clamp(16px, min(1.05vw, 1.9vh), 20px);

	/* The site-wide type scale — one size per text ROLE, applied to every
	   component in assets/css/type.css. Values are the 1920px size, scaling
	   down with the viewport. Card titles and all body text (paragraphs,
	   bullets, answers) use the two card tokens above. */
	--type-h1: clamp(28px, 3vw, 62px); /* page titles: Jost 900, uppercase */
	--type-display: clamp(44px, 5.2vw, 100px); /* decorative display words: Playfair */
	--type-h2: clamp(30px, 2.9vw, 56px); /* section titles: Playfair */
	--type-h3: clamp(18px, 1.25vw, 24px); /* sub-titles inside a block: Jost 600 */
	--type-lead: clamp(18px, 1.3vw, 25px); /* intro statements and quotes: Jost 400 */
	--type-text: var(--card-text-size); /* all body text: Jost 400 */
	--type-label: clamp(12px, 0.75vw, 14px); /* eyebrows, tags, small print: Jost */
}
.layout-hflex {
	flex-direction: row;
	align-items: flex-start;
	display: flex;
}
.layout-blockcontainer {
	max-width: 940px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
@media screen and (max-width: 991px) {
	.layout-blockcontainer {
		max-width: 728px;
	}
}
@media screen and (max-width: 767px) {
	.layout-blockcontainer {
		max-width: none;
	}
}
body {
	background-color: var(--vv-off-white);
	color: var(--vv-charcoal);
	letter-spacing: 0.025rem;
	font-family: Jost, Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.2;
}
h1 {
	letter-spacing: -0.031rem;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 0;
	font-family: Jost, Arial, sans-serif;
	font-size: 8.7rem;
	font-weight: 900;
	line-height: 0.8;
}
h2 {
	margin-top: 0;
	margin-bottom: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 6rem;
	font-weight: 400;
	line-height: 1;
}
h3 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
}
h4 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
}
h5 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
}
h6 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}
p {
	margin-bottom: 0;
}
a {
	color: #2d62ff;
}
ul,
ol {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 1.5rem;
}
li {
	margin-bottom: 0.25rem;
}
img {
	max-width: 100%;
	display: inline-block;
}
label {
	margin-bottom: 0.25rem;
	font-weight: 500;
}
blockquote {
	border-left: 0.25rem solid var(--vv-gold);
	margin-bottom: 0;
	padding: 0 1.25rem;
	font-size: 1.25rem;
	line-height: 1.5;
}
figure {
	margin-top: 2rem;
	margin-bottom: 2rem;
}
figcaption {
	text-align: center;
	margin-top: 0.25rem;
}
/* 3.25rem, not the original 4rem — trimmed site-wide for the same reason as
   every other title-sized rule touched in this pass (see the components
   that use it: About's own heading at desktop widths, Testimonials'
   "What owners say", neither of which carries a local override, so both
   move together with this one number). Left as a shared base-class value
   rather than duplicated per component specifically so the two stay
   uniform automatically instead of needing to be hand-matched. */
.u-h3-review {
	letter-spacing: 0;
	text-transform: uppercase;
	font-family: Jost, Arial, sans-serif;
	font-size: 3.25rem;
	font-weight: 900;
	line-height: 90%;
}
.u-p2 {
	letter-spacing: 0;
	text-transform: uppercase;
	font-family: Jost, Arial, sans-serif;
	font-size: 0.625rem;
	font-weight: 400;
	line-height: 120%;
}
/* 4.75rem, not the original 6rem — same trim as .u-h3-review above. Only
   Definitions ("Owners"/"Chania") actually renders at this raw value; Films
   and Services both carry their own local font-size that wins the cascade
   (5.2vw and 50px/42px/32px respectively, both fonttools-verified against
   real text widths — see films.css/services.css — so this change can't
   touch either). hero-stack.js measures this class's own painted width at
   runtime rather than assuming a fixed number, so Definitions' layout math
   adjusts to the smaller size on its own; nothing there needed updating to
   match. */
.u-h2-feature {
	letter-spacing: 0;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 4.75rem;
	font-weight: 400;
	line-height: 100%;
}
.space-between {
	justify-content: space-between;
}
.u-container {
	width: 100%;
	max-width: none;
	padding-left: 2rem;
	padding-right: 2rem;
}
/* Ranged, never justified — site-wide. Justification stretches every line but
   the last to the column's full width, so the gaps between words come out
   uneven and, on short lines, visibly wide. */
.u-p1 {
	text-align: start;
	letter-spacing: 0.025rem;
	text-transform: uppercase;
	font-family: Jost, Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 120%;
}
/* ===== .u-btn — the one CTA pill every button on the site uses ==========
   Orisa's .at-btn (scss/components/_buttons.scss), ported number for number
   — 17px/25px padding, 50px radius, 8px gap, the 16px arrow window and its
   16px/13px fly-out — in px, not rem, since this page's root font-size is
   fluid. Markup: src/components/Button.astro.

   Only the palette is Minos's. Orisa's pill is #1D1D1D on a light page; here
   it is gold fill with charcoal type, the one pairing that holds up on every
   ground a button lands on (photographs, charcoal, the lifted #333c4b cards)
   — see the design-tokens comment above. Uppercase Jost, since that is this
   site's voice for short labels (Orisa's own markup is uppercase too). */
.u-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 17px 25px;
	border: 0;
	border-radius: 50px;
	background-color: var(--vv-gold);
	color: var(--vv-charcoal);
	font-family: Jost, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
/* Two stacked copies of the label inside an overflow: hidden window —
   .text-2 parked one line below, both sliding up together on hover. */
.u-btn_label {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
}
.u-btn_label .text-1,
.u-btn_label .text-2 {
	display: block;
	transition: 0.3s;
}
.u-btn_label .text-1 {
	position: relative;
}
.u-btn_label .text-2 {
	position: absolute;
	top: 100%;
	left: 0;
}
/* A 16px window holding two arrows: the first flies out top-right while the
   second, parked bottom-left and invisible, flies in to take its place. */
.u-btn_icon {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	overflow: hidden;
}
.u-btn_icon svg {
	position: absolute;
	bottom: -1px;
	left: 1px;
	transform: translateY(-2px);
	transition: all 0.2s ease-out;
}
.u-btn_icon svg:last-child {
	left: -12px;
	bottom: -12px;
	transform: translate(0, 0);
	opacity: 0;
}
/* .u-btn-host: for a pill that sits inside a larger link (Films' whole
   panel is the <a>) — hovering anywhere on the host plays the roll too. */
.u-btn:hover .u-btn_label .text-1,
.u-btn-host:hover .u-btn_label .text-1 {
	transform: translateY(-150%);
}
.u-btn:hover .u-btn_label .text-2,
.u-btn-host:hover .u-btn_label .text-2 {
	top: 50%;
	transform: translateY(-50%);
}
.u-btn:hover .u-btn_icon svg:first-child,
.u-btn-host:hover .u-btn_icon svg:first-child {
	transform: translate(16px, -16px);
}
.u-btn:hover .u-btn_icon svg:last-child,
.u-btn-host:hover .u-btn_icon svg:last-child {
	opacity: 1;
	transform: translate(13px, -13px);
}
@media (prefers-reduced-motion: reduce) {
	.u-btn_label .text-1,
	.u-btn_label .text-2,
	.u-btn_icon svg {
		transition: none;
	}
}
/* Definitions' label ("Απευθυνόμαστε σε", "Έδρα μας") reads as one phrase,
   ranged left over its heading — not split to the column's two edges. The gap
   is a word space at the label's own size. */
.vv_decor {
	justify-content: flex-start;
	align-items: center;
	gap: 0.3em;
}
/* No word is ever broken across lines with a hyphen, anywhere on the site —
   hyphens is inherited, so this covers every text element. */
html {
	-webkit-hyphens: none;
	hyphens: none;
}
.u-body {
	background-color: var(--vv-charcoal);
}
.hero_stack_wrapper,
.about_stack_wrapper {
	flex-flow: column;
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	grid-auto-columns: 1fr;
	display: block;
	overflow: hidden;
}
.about_logo.difference {
	color: var(--vv-gold);
	mix-blend-mode: difference;
}
.about_logo.difference.mobile {
	display: none;
}
.about_decor.first {
	bottom: 2rem;
	left: 2rem;
}
.about_decor.second {
	bottom: 2rem;
	right: 2rem;
}
@media screen and (max-width: 991px) {
	h1 {
		letter-spacing: 0;
		line-height: 0.9;
	}
	.u-p2 {
		padding-left: 0;
	}
	.u-h2-feature {
		font-size: 4rem;
	}
	.about_stack_wrapper {
		display: block;
	}
	.about_logo.difference {
		display: none;
	}
	.about_logo.difference.mobile {
		display: block;
	}
}
@media screen and (max-width: 767px) {
	h1 {
		font-size: 2.5rem;
	}
	h2 {
		font-size: 2rem;
	}
	h3 {
		font-size: 1.5rem;
	}
	h4 {
		font-size: 1.25rem;
	}
	h5 {
		font-size: 1rem;
	}
	h6 {
		font-size: 0.875rem;
	}
	.u-h3-review {
		font-size: 1.5rem;
	}
}
@media screen and (max-width: 479px) {
	.u-h2-feature {
		font-size: 3rem;
	}
	.u-container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.about_decor.first {
		bottom: 1rem;
		left: 1rem;
	}
	.about_decor.second {
		bottom: 1rem;
		right: 1rem;
	}
}
/* Stacked scroll layers: every child occupies the same grid cell so the
   pinned sections can be cross-faded / clip-pathed on top of each other. */
.stack-layer,
#hist-imgs,
#hist-steps-inner,
#hist-conclusion {
	grid-area: 1 / 1 / 2 / 2;
}

/* Fluid root font size — the whole template scales from this one value. */
html {
	font-size: 3.25rem;
}
@media screen and (max-width: 5120px) {
	html {
		font-size: calc(0.75rem + 0.78125vw);
	}
}
@media screen and (max-width: 3840px) {
	html {
		font-size: 1.09375vw;
	}
}
@media screen and (max-width: 2560px) {
	html {
		font-size: calc(0.25rem + 0.9375vw);
	}
}
@media screen and (max-width: 1920px) {
	html {
		font-size: calc(-0.625rem + 1.6666666667vw);
	}
}
@media screen and (max-width: 1680px) {
	html {
		font-size: calc(0.25rem + 0.8333333333vw);
	}
}
@media screen and (max-width: 1440px) {
	html {
		font-size: 1rem;
	}
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000000s ease-in-out 0s;
	color: #f5f2ed !important;
	-webkit-text-fill-color: #f5f2ed !important;
}
::selection {
	background-color: var(--vv-gold);
	color: var(--vv-charcoal);
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
*:focus-visible {
	outline: 0.0625rem solid rgba(255, 255, 255, 0.5);
	outline-offset: 0.125rem;
}
body ::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none;
}
body {
	-ms-overflow-style: none;
}
html {
	scrollbar-width: none;
}
.hero_stack_wrapper {
	display: grid;
}
@media screen and (min-width: 992px) {
	.about_stack_wrapper {
		display: grid;
	}
}
html,
body {
	overscroll-behavior-y: none;
}
@media screen and (max-width: 767px) {
	html,
	body {
		overflow-x: clip;
	}
}
[data-film="1"],
[data-film="2"] {
	will-change: clip-path;
}
/* Centred — what the old justified-with-a-centred-last-line block read as,
   without the stretched word gaps justification put in every other line. */
.about_p {
	text-align: center;
}
/* Ranged left on a phone: a centred block over many short lines reads as
   ragged on both sides. */
@media screen and (max-width: 767px) {
	.u-p1,
.about_p {
		text-align: start;
		text-align-last: start;
	}
}

/* ==========================================================================
   Visibility utilities — these are never overridden anywhere else.
   ========================================================================== */
/* Always hidden */
.hide {
	display: none !important;
}