/* ==========================================================================
   Reset (from the parent theme bethree/style.css, inlined here so the browser
   downloads one stylesheet less before the first paint; inc/performance.php
   dequeues the parent file). Keep in sync if the parent reset ever changes.
   ========================================================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:calc(20 * var(--u))}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:calc(5 * var(--u));line-height:normal;padding:calc(15 * var(--u)) calc(23 * var(--u)) calc(14 * var(--u));text-decoration:none;top:calc(5 * var(--u));width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:calc(6 * var(--u));top:calc(7 * var(--u));font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:calc(15 * var(--u)) calc(23 * var(--u)) calc(14 * var(--u));z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

/* ==========================================================================
   BeThree Child – main.css (mantalos.gr)
   Global stylesheet, loaded on every page (after the parent reset).
   Per-page styles live in assets/css/pages/{key}.css and load only there
   (see inc/enqueue.php for the key → file mapping).

   1. Fonts          6. Header
   2. Tokens         7. Footer
   3. Base           8. CTA band + contact band
   4. Layout         9. Forms
   5. Components    10. Utilities
   ========================================================================== */


/* 1. Fonts ----------------------------------------------------------------
   Geom (body, headings) and Inter Tight (menu, H1, H3), variable fonts,
   self-hosted Greek + Latin subsets (assets/fonts). Greek is preloaded.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Geom";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/geom-greek.woff2") format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: "Geom";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/geom-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/inter-tight-greek.woff2") format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: "Inter Tight";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/inter-tight-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. Tokens ---------------------------------------------------------------
   Figma TxcVrsBc7FYeQ0MnIUZANd, 1920px desktop frame; typography from the
   file's text styles (H1, Η2, H3, H4, Body Text).
   -------------------------------------------------------------------------- */
:root {
	/* Colours */
	--be-ink: #040515;          /* header, top of the page gradient */
	--be-navy: #0d1529;         /* photo grounds */
	--be-panel: #172845;        /* accordion / icon boxes */
	--be-blue: #243852;         /* CTA band, bottom of the page gradient */
	--be-blue-light: #2e4562;   /* footer */
	--be-gold: #dda858;
	--be-white: #ffffff;
	--be-muted: rgba(255, 255, 255, 0.5);

	/* Typography */
	--be-font-body: "Geom", "Century Gothic", "Segoe UI", sans-serif;
	--be-font-display: "Inter Tight", "Segoe UI", Arial, sans-serif;
	--be-h1: 300 120px/100px var(--be-font-display);
	--be-h2: 400 32px/45px var(--be-font-body);
	--be-h3: 300 26px/32px var(--be-font-display);
	--be-h4: 300 22px/28px var(--be-font-display);
	--be-title: 300 32px/1.25 var(--be-font-display);   /* line titles (Ρινοπλαστική, Άρθρα …) */
	--be-display: 300 100px/1.2 var(--be-font-display); /* CTA / contact band titles */
	--be-body: 300 18px/24px var(--be-font-body);
	--be-menu: 700 16px/20px var(--be-font-display);

	/* Spacing: every section gets .be_row; header/footer set their own. */
	--be-pad-x: 100px;
	--be-pad-y: 100px;
	--be-gap: 50px;

	/* Figma pixel unit. Desktop (≥1281px) scales the 1920 frame proportionally to the
	   viewport, so wide screens (2560, 3840) keep the composition instead of leaving
	   empty bands (no max-width containers). Below 1281 it is a plain pixel and the
	   tablet/phone rules take over. Body copy stays in px for readability. */
	--u: 1px;
	/* Figma prototype timings (smart animate / dissolve). */
	--be-ease-gentle: cubic-bezier(0.25, 0.8, 0.35, 1);
	--be-t-fast: 0.3s linear;
	--be-t-btn: 0.639s var(--be-ease-gentle);
	--be-t-section: 0.8s ease-out;
	--be-t-slow: 1s linear;
}

@media (min-width: 1281px) {
	:root {
		--u: calc(100vw / 1920);
		--be-h1: 300 calc(120 * var(--u))/1 var(--be-font-display);
		--be-h2: 400 max(26px, calc(32 * var(--u)))/1.4 var(--be-font-body);
		--be-h3: 300 max(22px, calc(26 * var(--u)))/1.23 var(--be-font-display);
		--be-h4: 300 max(19px, calc(22 * var(--u)))/1.27 var(--be-font-display);
		--be-title: 300 max(26px, calc(32 * var(--u)))/1.25 var(--be-font-display);
		--be-display: 300 calc(100 * var(--u))/1.2 var(--be-font-display);
		--be-body: 300 max(16px, calc(18 * var(--u)))/1.34 var(--be-font-body);
		--be-pad-x: calc(100 * var(--u));
		--be-pad-y: calc(100 * var(--u));
		--be-gap: calc(50 * var(--u));
	}
}

@media (max-width: 1280px) {
	:root {
		--be-h1: 300 76px/1 var(--be-font-display);
		--be-display: 300 64px/1.2 var(--be-font-display);
		--be-pad-x: 50px;
	}
}

@media (max-width: 1024px) {
	:root {
		--be-h1: 300 64px/1.05 var(--be-font-display);
		--be-display: 300 56px/1.15 var(--be-font-display);
		--be-pad-x: 40px;
		--be-pad-y: 80px;
	}
}

@media (max-width: 700px) {
	:root {
		--be-h1: 300 48px/1.1 var(--be-font-display);
		--be-h2: 400 24px/32px var(--be-font-body);
		--be-h3: 300 22px/28px var(--be-font-display);
		--be-h4: 300 20px/26px var(--be-font-display);
		--be-title: 300 26px/1.25 var(--be-font-display);
		--be-display: 300 32px/1.25 var(--be-font-display);
		--be-body: 300 16px/22px var(--be-font-body);
		--be-pad-x: 20px;
		--be-pad-y: 60px;
		--be-gap: 32px;
	}
}


/* 3. Base ------------------------------------------------------------------ */
html {
	-webkit-text-size-adjust: 100%;
	background: var(--be-blue-light);
}

body {
	font: var(--be-body);
	color: var(--be-white);
	background: var(--be-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 400;
}

h1 {
	font: var(--be-h1);
}

h2 {
	font: var(--be-h2);
}

h3 {
	font: var(--be-h3);
}

h4 {
	font: var(--be-h4);
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--be-t-fast), opacity var(--be-t-fast), border-color var(--be-t-fast), background-color var(--be-t-fast);
}

img,
svg,
video,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

strong,
b {
	font-weight: 500;
}

em,
i {
	font-style: italic;
}

:focus-visible {
	outline: 2px solid var(--be-gold);
	outline-offset: 3px;
}

::selection {
	background: var(--be-gold);
	color: var(--be-ink);
}

.be_skip-link:focus {
	left: calc(10 * var(--u));
	top: calc(10 * var(--u));
}

/* Page ground: the gradient of every Figma frame (#020210 → #172845 48.6% → #416186)
   under a 20% black layer. */
.be_content {
	display: block;
	overflow-x: clip; /* side entrances (.be_anim--left/right) never add a horizontal scroll; clip keeps sticky working */
	background:
		linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
		linear-gradient(180deg, #020210 0, #172845 48.6%, #416186 100%);
}


/* 4. Layout ---------------------------------------------------------------- */
.be_row {
	padding: var(--be-pad-y) var(--be-pad-x);
}

/* Rich text from the editor (ACF wysiwyg, post content). */
.be_text > * + * {
	margin-top: calc(24 * var(--u));
}

.be_text p:empty {
	display: none;
}

.be_text a {
	color: var(--be-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.be_text strong,
.be_text b {
	font-weight: 500;
	color: var(--be-gold);
}

.be_text ul,
.be_text ol {
	padding-left: calc(27 * var(--u));
}

.be_text li + li {
	margin-top: calc(4 * var(--u));
}

.be_text ul {
	list-style: disc;
}

.be_text ol {
	list-style: decimal;
}

.be_text h2 {
	font: var(--be-h3);
	margin-top: calc(40 * var(--u));
}

.be_text h3 {
	font: var(--be-h4);
	margin-top: calc(32 * var(--u));
}

.be_text h4 {
	font: 500 18px/24px var(--be-font-body);
	color: var(--be-gold);
}

.be_text img {
	margin: calc(24 * var(--u)) 0;
}

.be_text table {
	width: 100%;
	border: 1px solid var(--be-muted);
}

.be_text th,
.be_text td {
	padding: calc(10 * var(--u)) calc(14 * var(--u));
	border: 1px solid var(--be-muted);
	text-align: left;
}

.be_text blockquote {
	padding-left: calc(24 * var(--u));
	border-left: 2px solid var(--be-gold);
}


/* 5. Components ------------------------------------------------------------ */

/* Dashed round button (Figma "Button" 54:851 / 120:474): 145px (md) or 120px (sm),
   2px dashed white border, Geom Bold 18/24 on two lines, circled plus below.
   Hover (Assets page): gold fill. */
.be_circle-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(10 * var(--u));
	flex: none;
	width: calc(145 * var(--u));
	height: calc(145 * var(--u));
	padding: calc(24 * var(--u));
	border: 2px dashed var(--be-white);
	border-radius: 50%;
	background: transparent;
	color: var(--be-white);
	font: 700 18px/24px var(--be-font-body);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--be-t-btn), border-color var(--be-t-btn), color var(--be-t-btn);
}

.be_circle-btn--sm {
	width: calc(120 * var(--u));
	height: calc(120 * var(--u));
	padding: calc(12 * var(--u));
}

/* flex: none - three-line labels and the 120px size would otherwise squash the icon. */
.be_circle-btn-icon {
	display: block;
	flex: none;
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	background: url("../img/icon-plus-circle.svg") center / contain no-repeat;
	transition: transform var(--be-t-btn);
}

.be_circle-btn:hover .be_circle-btn-icon {
	transform: rotate(90deg);
}

.be_circle-btn:hover,
.be_circle-btn:focus-visible {
	background-color: var(--be-gold);
	border-color: var(--be-gold);
	border-style: solid;
}

@media (max-width: 700px) {
	.be_circle-btn {
		width: 120px;
		height: 120px;
		padding: 16px;
		font-size: 16px;
		line-height: 22px;
	}
}

/* Line title: 50px rule + Inter Tight Light 32 (Figma "Frame 237787"). */
.be_line-title {
	display: flex;
	align-items: center;
	gap: calc(50 * var(--u));
	font: var(--be-title);
	color: var(--be-white);
}

.be_line-title::before {
	content: "";
	flex: none;
	width: calc(50 * var(--u));
	height: 2px;
	background: var(--be-white);
}

@media (max-width: 700px) {
	.be_line-title {
		gap: 20px;
	}

	.be_line-title::before {
		width: 30px;
	}
}

/* Text link with the underline and plus (hub «Μάθετε Περισσότερα», footer categories). */
.be_more-link {
	display: flex;
	align-items: center;
	gap: calc(10 * var(--u));
	padding-bottom: calc(12 * var(--u));
	border-bottom: 1px solid var(--be-white);
	font: var(--be-body);
	transition: color var(--be-t-btn), border-color var(--be-t-btn);
}

.be_more-link::after {
	content: "";
	flex: none;
	width: calc(10 * var(--u));
	height: calc(10 * var(--u));
	background: url("../img/icon-plus.svg") center / contain no-repeat;
	transition: transform var(--be-t-btn);
}

.be_more-link:hover::after {
	transform: rotate(90deg);
}

.be_more-link:hover {
	color: var(--be-gold);
	border-color: var(--be-gold);
}

.be_highlight {
	color: var(--be-gold);
}

/* Breadcrumb (Inter Tight Light 16, separators "|", current gold). */
.be_breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: calc(6 * var(--u)) calc(12 * var(--u));
	list-style: none;
	font: 300 16px/1.2 var(--be-font-display);
}

.be_breadcrumb-list li {
	display: flex;
	gap: calc(12 * var(--u));
}

.be_breadcrumb-list li + li::before {
	content: "|";
}

.be_breadcrumb-list a:hover {
	color: var(--be-gold);
}

.be_breadcrumb-list [aria-current] {
	color: var(--be-gold);
}

/* Square arrow button (sliders, Figma "Arrow button" 241:2253): 62.5x40, white border. */
.be_arrow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(62 * var(--u));
	height: calc(40 * var(--u));
	padding: 0;
	border: 1px solid var(--be-white);
	background: transparent;
	color: var(--be-white);
	cursor: pointer;
	transition: border-color var(--be-t-btn), color var(--be-t-btn), opacity var(--be-t-btn);
}

/* The arrow is a mask filled with currentColor, so the hover can turn it gold
   (Figma Arrow Button 241:2255: gold frame and arrow, smart animate 639ms). */
.be_arrow-btn::before {
	content: "";
	width: calc(25 * var(--u));
	height: calc(25 * var(--u));
	background: currentColor;
	-webkit-mask: url("../img/icon-arrow-down.svg") center / contain no-repeat;
	mask: url("../img/icon-arrow-down.svg") center / contain no-repeat;
	transform: rotate(90deg);
}

.be_arrow-btn--next::before {
	transform: rotate(-90deg);
}

.be_arrow-btn:hover:not(:disabled),
.be_arrow-btn:focus-visible {
	border-color: var(--be-gold);
	color: var(--be-gold);
}

.be_arrow-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Accordion (Figma 228:1526): navy panel, white border, square arrow box, H3 title.
   [data-accordion] > button[data-accordion-toggle] + .be_accordion-panel (main.js). */
.be_accordions {
	display: grid;
	gap: calc(50 * var(--u));
}

/* Hover / open (Figma 228:1530 / 228:1535, smart animate 639ms gentle): lighter blue
   panel #416186 without the frame; the arrow turns up when open. */
.be_accordion {
	border: 1px solid var(--be-white);
	background: var(--be-panel);
	transition: background-color var(--be-t-btn), border-color var(--be-t-btn);
}

.be_accordion:hover,
.be_accordion.is-open {
	border-color: #416186;
	background: #416186;
}

.be_accordion-toggle {
	display: flex;
	align-items: center;
	gap: calc(24 * var(--u));
	width: 100%;
	padding: calc(20 * var(--u));
	border: 0;
	background: none;
	color: var(--be-white);
	font: var(--be-h3);
	text-align: left;
	cursor: pointer;
}

.be_accordion-toggle::before {
	content: "";
	flex: none;
	width: calc(40 * var(--u));
	height: calc(62 * var(--u));
	border: 1px solid var(--be-white);
	background: url("../img/icon-arrow-down.svg") center / calc(25 * var(--u)) calc(25 * var(--u)) no-repeat;
	transition: transform var(--be-t-btn);
}

.be_accordion.is-open .be_accordion-toggle::before {
	transform: rotate(180deg);
}

/* Panels open with a height animation: grid rows 0fr → 1fr around an overflow-hidden inner. */
.be_accordion-panel,
.be_faq-answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--be-t-btn);
}

.be_accordion.is-open .be_accordion-panel,
.be_faq-item.is-open .be_faq-answer {
	grid-template-rows: 1fr;
}

.be_accordion-inner,
.be_faq-answer-inner {
	min-height: 0;
	overflow: hidden;
}

.be_accordion-inner {
	padding: 0 calc(20 * var(--u)) 0 calc(84 * var(--u));
}

.be_accordion.is-open .be_accordion-inner {
	padding-bottom: calc(30 * var(--u));
}

@media (max-width: 700px) {
	.be_accordions {
		gap: 20px;
	}

	.be_accordion-toggle {
		gap: 16px;
		padding: 14px;
	}

	.be_accordion-toggle::before {
		width: 32px;
		height: 48px;
		background-size: 20px 20px;
	}

	.be_accordion-inner {
		padding: 0 14px;
	}

	.be_accordion.is-open .be_accordion-inner {
		padding-bottom: 24px;
	}
}

/* FAQ (Figma 310:5537): numbered rows, bottom border, round plus / gold close icon. */
.be_faq-list {
	display: grid;
	gap: calc(24 * var(--u));
	counter-reset: be-faq;
}

.be_faq-item {
	border-bottom: 1px solid var(--be-white);
	counter-increment: be-faq;
}

.be_faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(24 * var(--u));
	width: 100%;
	padding: calc(24 * var(--u));
	border: 0;
	background: none;
	color: var(--be-white);
	font: 300 max(26px, calc(32 * var(--u)))/1.2 var(--be-font-body);
	text-align: left;
	cursor: pointer;
}

.be_faq-question::before {
	content: counter(be-faq) ".";
	flex: none;
	align-self: flex-start;
	margin-right: -14px;
	color: var(--be-gold);
}

.be_faq-question-text {
	flex: 1;
}

.be_faq-question::after {
	content: "";
	flex: none;
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	background: url("../img/icon-faq-open.svg") center / contain no-repeat;
}

.be_faq-item.is-open .be_faq-question::after {
	background-image: url("../img/icon-faq-close.svg");
}

.be_faq-answer-inner {
	padding: 0 calc(88 * var(--u)) 0 calc(24 * var(--u));
}

.be_faq-item.is-open .be_faq-answer-inner {
	padding-bottom: calc(24 * var(--u));
}

.be_faq-question {
	transition: color var(--be-t-btn);
}

.be_faq-question:hover {
	color: var(--be-gold);
}

.be_faq-question::after {
	transition: transform var(--be-t-btn);
}

@media (max-width: 700px) {
	.be_faq-question {
		gap: 14px;
		padding: 16px 0;
		font-size: 20px;
	}

	.be_faq-question::before {
		margin-right: -6px;
	}

	.be_faq-question::after {
		width: 30px;
		height: 30px;
	}

	.be_faq-answer-inner,
	.be_faq-item.is-open .be_faq-answer-inner {
		padding: 0 0 0;
	}

	.be_faq-item.is-open .be_faq-answer-inner {
		padding-bottom: 20px;
	}
}

/* Icon rows (Figma 294:5211): bordered row, gold label, 50px icon box on the right. */
.be_rows {
	display: grid;
	gap: calc(24 * var(--u));
}

.be_row-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(20 * var(--u));
	padding: calc(24 * var(--u));
	border: 1px solid var(--be-white);
}

.be_row-item-label {
	color: var(--be-gold);
}

.be_row-item-icon {
	flex: none;
	width: calc(50 * var(--u));
	height: calc(50 * var(--u));
	padding: 2px;
	background: var(--be-panel);
	object-fit: contain;
}

/* Numbered steps (Figma 310:5290): four per row, gold border. */
.be_steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: calc(24 * var(--u));
	list-style: none;
	counter-reset: be-step;
}

.be_step {
	padding: calc(24 * var(--u));
	border: 1px solid var(--be-gold);
	font-size: 16px;
	counter-increment: be-step;
}

.be_step::before {
	content: counter(be-step) ".";
	display: block;
	font: 300 max(26px, calc(32 * var(--u)))/max(26px, calc(32 * var(--u))) var(--be-font-body);
}

.be_step-label {
	display: block;
	margin-top: calc(8 * var(--u));
	color: var(--be-gold);
	font-weight: 500;
}

@media (max-width: 1024px) {
	.be_steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.be_steps {
		grid-template-columns: 1fr;
	}
}

/* Slider: [data-slider] > [data-slider-track] (scroll-snap) + prev/next buttons (main.js). */
.be_slider-track {
	position: relative; /* clips absolutely positioned children (screen-reader text) too */
	display: flex;
	gap: calc(50 * var(--u));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.be_slider-track::-webkit-scrollbar {
	display: none;
}

.be_slider-track > * {
	position: relative;
	flex: none;
	scroll-snap-align: start;
}

/* Dash indicators (mobile «Αισθητικές Παρεμβάσεις», Figma 193:747). */
.be_slider-dots {
	display: flex;
	gap: calc(18 * var(--u));
	justify-content: center;
}

.be_slider-dot {
	flex: 1;
	max-width: calc(70 * var(--u));
	height: calc(5 * var(--u));
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
}

.be_slider-dot.is-active {
	background: var(--be-white);
}


/* Blog cards (page-blog.php slider, «Σχετικά άρθρα» on posts and treatment pages,
   template-parts/related-posts.php). Figma 316:8939: dashed top rule, black-and-white photo
   that takes its colours on hover, gold date, enter icon that turns into a gold ×. */
.be_blog-date {
	font: 300 16px/24px var(--be-font-body);
	color: var(--be-gold);
}

.be_blog-enter {
	display: block;
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	color: var(--be-white);
	background: currentColor;
	-webkit-mask: url("../img/icon-enter.svg") center / contain no-repeat;
	mask: url("../img/icon-enter.svg") center / contain no-repeat;
	transition: color var(--be-t-btn), transform var(--be-t-btn);
}

.be_blog-enter--sm {
	width: max(20px, calc(25 * var(--u)));
	height: max(20px, calc(25 * var(--u)));
	-webkit-mask-image: url("../img/icon-enter-sm.svg");
	mask-image: url("../img/icon-enter-sm.svg");
}

.be_blog-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(20 * var(--u));
	padding-top: calc(20 * var(--u));
	border-top: 1px dashed var(--be-white);
}

.be_blog-card-photo {
	display: block;
	width: 100%;
	aspect-ratio: 557 / 144;
	overflow: hidden;
	background: var(--be-navy);
}

.be_blog-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter var(--be-t-btn);
}

.be_blog-card:hover .be_blog-card-photo img {
	filter: grayscale(0);
}

.be_blog-card-title {
	flex: 1;
	font: var(--be-h4);
}

.be_blog-card-title a:hover {
	color: var(--be-gold);
}

.be_blog-card .be_blog-date {
	margin-top: -16px;
}

.be_blog-card:hover .be_blog-enter,
.be_blog-enter:focus-visible {
	color: var(--be-gold);
	transform: rotate(45deg);
}

/* «Σχετικά άρθρα»: three cards in a row (two on tablets, one on phones). */
.be_related {
	display: flex;
	flex-direction: column;
	gap: calc(30 * var(--u));
}

.be_related-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(24 * var(--u));
	list-style: none;
}

@media (max-width: 1024px) {
	.be_related-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 700px) {
	.be_related {
		gap: 24px;
	}

	.be_related-list {
		grid-template-columns: 1fr;
	}

	.be_blog-card-photo {
		aspect-ratio: 335 / 160;
	}
}


/* 6. Header (Figma 31:242) ------------------------------------------------- */
.be_site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--be-ink);
}

.admin-bar .be_site-header {
	top: 32px;
}

/* Desktop: one flex row, the six items and the logo spread evenly (Figma 31:242:
   justify-content: space-between on the whole bar). The two lists and the nav are
   display: contents, so their items take part in the bar's own layout. */
.be_site-header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(24 * var(--u));
	padding: calc(24 * var(--u)) var(--be-pad-x);
}

.be_menu,
.be_nav-list {
	display: contents;
	list-style: none;
}

.be_nav-list--left > li {
	order: 1;
}

.be_site-header-logo {
	order: 2;
	flex: none;
}

.be_nav-list--right > li {
	order: 3;
}

.be_site-header-logo img {
	width: calc(239 * var(--u));
	height: auto;
}

.be_menu-toggle {
	display: none;
}

.be_nav-list > li {
	position: relative;
}

/* Top-level items: Inter Tight Bold 16 uppercase. Hover (Figma "Menu" Variant2, smart
   animate 300ms linear): gold label and a gold 1px rule that grows under it. */
.be_nav-list > li > a {
	display: block;
	padding: calc(3 * var(--u)) 0;
	font: var(--be-menu);
	text-transform: uppercase;
	white-space: nowrap;
	background: linear-gradient(var(--be-gold), var(--be-gold)) left bottom / 0 1px no-repeat;
	transition: background-size 0.3s linear, color 0.3s linear;
}

.be_nav-list > li:hover > a,
.be_nav-list > li > a:focus-visible,
.be_nav-list > .current-menu-item > a,
.be_nav-list > .current-menu-ancestor > a,
.be_nav-list > .current-page-ancestor > a {
	color: var(--be-gold);
	background-size: 100% 1px;
}

.be_submenu-toggle {
	display: none;
}

/* Dropdown: starts right under the item (top: 100%) with a transparent padding-top
   equal to the visual gap; the panel is drawn on .be_dropdown-inner. */
.be_dropdown {
	position: absolute;
	top: 100%;
	left: -24px;
	z-index: 60;
	padding-top: calc(28 * var(--u));
	list-style: none;
	visibility: hidden;
	opacity: 0;
	transform: translateY(calc(6 * var(--u)));
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.be_nav-list > li:hover > .be_dropdown,
.be_nav-list > li:focus-within > .be_dropdown,
.be_nav-list > li.is-open > .be_dropdown {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.be_dropdown-inner {
	display: block;
	min-width: calc(260 * var(--u));
	padding: calc(24 * var(--u));
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: var(--be-ink);
	box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.be_dropdown-list {
	display: grid;
	gap: calc(14 * var(--u));
	list-style: none;
}

.be_dropdown-list a,
.be_mega-title {
	display: block;
	font: 300 18px/24px var(--be-font-body);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.be_dropdown-list a:hover,
.be_dropdown-list .current-menu-item > a {
	color: var(--be-gold);
}

/* Mega dropdown: one column per category (ΠΡΟΣΩΠΟ, ΣΤΗΘΟΣ …). */
.be_dropdown--mega .be_dropdown-list {
	grid-auto-flow: column;
	grid-auto-columns: minmax(calc(210 * var(--u)), calc(240 * var(--u)));
	gap: calc(40 * var(--u));
}

.be_mega-title {
	white-space: normal;
	overflow-wrap: anywhere;
	margin-bottom: calc(16 * var(--u));
	padding-bottom: calc(10 * var(--u));
	border-bottom: 1px solid var(--be-white);
	font: 300 20px/24px var(--be-font-display);
	text-transform: uppercase;
	color: var(--be-gold);
}

.be_mega-list {
	display: grid;
	gap: calc(12 * var(--u));
	list-style: none;
}

.be_mega-list a {
	white-space: normal;
	font-size: 16px;
	line-height: max(18px, calc(22 * var(--u)));
}

/* Desktop below 1500px: tighter header. */
@media (max-width: 1500px) and (min-width: 1201px) {
	.be_nav-list > li > a {
		font-size: 14px;
	}

	.be_site-header-logo img {
		width: 190px;
	}
}

/* Burger menu below 1200px (Figma 193:300: logo left, burger right). */
@media (max-width: 1200px) {
	.be_site-header-bar {
		display: flex;
		justify-content: space-between;
		padding: 20px var(--be-pad-x);
	}

	.be_site-header-logo {
		order: 0;
	}

	.be_menu-toggle {
		order: 1;
	}

	.be_site-header-logo img {
		width: 194px;
	}

	.be_menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 9px;
		width: 44px;
		height: 44px;
		padding: 4px;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.be_menu-toggle-bar {
		display: block;
		height: 2px;
		background: var(--be-white);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

	.be_menu-toggle[aria-expanded="true"] .be_menu-toggle-bar:nth-child(2) {
		transform: translateY(11px) rotate(45deg);
	}

	.be_menu-toggle[aria-expanded="true"] .be_menu-toggle-bar:nth-child(3) {
		opacity: 0;
	}

	.be_menu-toggle[aria-expanded="true"] .be_menu-toggle-bar:nth-child(4) {
		transform: translateY(-11px) rotate(-45deg);
	}

	.be_menu {
		position: fixed;
		inset: var(--be-header-h, 92px) 0 0;
		z-index: 40;
		display: block;
		overflow-y: auto;
		padding: 24px var(--be-pad-x) 60px;
		background: var(--be-ink);
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.25s ease, visibility 0.25s;
	}

	.be_menu.is-open {
		visibility: visible;
		opacity: 1;
	}

	.be_menu-open {
		overflow: hidden;
	}

	.be_nav-list {
		display: block;
	}

	.be_nav-list > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	}

	.be_nav-list > li > a {
		flex: 1;
		padding: 18px 0;
		font-size: 18px;
		background: none;
	}

	.be_nav-list > li.current-menu-item > a,
	.be_nav-list > li.current-menu-ancestor > a {
		color: var(--be-gold);
	}

	.be_submenu-toggle {
		display: block;
		position: relative;
		width: 44px;
		height: 44px;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.be_submenu-toggle::before,
	.be_submenu-toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 14px;
		height: 2px;
		margin: -1px 0 0 -7px;
		background: var(--be-white);
		transition: transform 0.25s ease;
	}

	.be_submenu-toggle::after {
		transform: rotate(90deg);
	}

	.be_submenu-toggle[aria-expanded="true"]::after {
		transform: none;
	}

	.be_dropdown {
		position: static;
		flex-basis: 100%;
		display: none;
		padding: 0 0 20px;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.be_nav-list > li:hover > .be_dropdown,
	.be_nav-list > li:focus-within > .be_dropdown {
		display: none;
	}

	.be_nav-list > li.is-open > .be_dropdown {
		display: block;
	}

	.be_dropdown-inner {
		min-width: 0;
		padding: 0 0 0 16px;
		border: 0;
		box-shadow: none;
	}

	.be_dropdown--mega .be_dropdown-list {
		grid-auto-flow: row;
		gap: 24px;
	}

	.be_dropdown-list a {
		white-space: normal;
	}
}


/* 7. Footer (Figma 123:544 / mobile 193:872) ------------------------------- */
.be_footer {
	padding: calc(100 * var(--u)) var(--be-pad-x) calc(50 * var(--u));
	background: var(--be-blue-light);
}

.be_footer-columns {
	display: grid;
	grid-template-columns: minmax(0, calc(306 * var(--u))) minmax(0, calc(346 * var(--u))) minmax(0, calc(306 * var(--u)));
	justify-content: space-between;
	align-items: start;
	gap: calc(50 * var(--u));
}

.be_footer-title {
	font: var(--be-h2);
}

.be_footer-title--center {
	text-align: center;
}

.be_footer-col--menu,
.be_footer-col--social {
	display: grid;
	gap: calc(24 * var(--u));
}

.be_footer-col--brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(31 * var(--u));
}

.be_footer-logo img {
	width: calc(346 * var(--u));
}

.be_footer-text {
	font: var(--be-body);
}

/* Footer categories (menu «footer-treatments»): Geom Bold 20/32, rule below, + toggles the list. */
.be_footer-menu {
	display: grid;
	padding: 0;
	gap: calc(24 * var(--u));
	max-width: calc(275 * var(--u));
	list-style: none;
}

.be_footer-menu > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: calc(12 * var(--u));
	border-bottom: 1px solid var(--be-white);
}

.be_footer-menu > li > a {
	flex: 1;
	font: 700 20px/32px var(--be-font-body);
}

.be_footer-menu > li > a:hover {
	color: var(--be-gold);
}

.be_footer-menu .be_submenu-toggle {
	display: block;
	position: relative;
	width: max(24px, calc(24 * var(--u)));  /* WCAG 2.2 target size */
	height: max(24px, calc(24 * var(--u)));
	padding: 0;
	border: 0;
	background: url("../img/icon-plus.svg") center / max(10px, calc(10 * var(--u))) no-repeat;
	cursor: pointer;
	transition: transform var(--be-t-btn);
}

.be_footer-menu .be_submenu-toggle::before,
.be_footer-menu .be_submenu-toggle::after {
	display: none;
}

.be_footer-menu .be_submenu-toggle[aria-expanded="true"] {
	transform: rotate(45deg);
}

.be_footer-menu .sub-menu {
	display: none;
	flex-basis: 100%;
	padding-top: calc(12 * var(--u));
	list-style: none;
}

.be_footer-menu .is-open > .sub-menu {
	display: grid;
	gap: calc(8 * var(--u));
}

.be_footer-menu .sub-menu a {
	font: 300 16px/22px var(--be-font-body);
}

.be_footer-menu .sub-menu a:hover {
	color: var(--be-gold);
}

.be_socials {
	display: flex;
	flex-wrap: wrap;
	gap: calc(12 * var(--u));
	list-style: none;
}

.be_socials a {
	display: block;
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

.be_socials a:hover {
	background-color: var(--be-gold);
}

.be_socials img {
	width: calc(44 * var(--u));
	height: calc(44 * var(--u));
}

.be_footer-bar {
	display: flex;
	justify-content: space-between;
	gap: calc(12 * var(--u)) calc(40 * var(--u));
	margin-top: calc(40 * var(--u));
	padding: calc(12 * var(--u)) 0;
	border-top: 1px solid var(--be-white);
	border-bottom: 1px solid var(--be-white);
	font: 300 16px/22px var(--be-font-body);
}

.be_footer-bar a:hover {
	color: var(--be-gold);
}

.be_footer-legal {
	display: flex;
	flex-wrap: wrap;
	row-gap: calc(4 * var(--u));
	list-style: none;
}

.be_footer-legal li {
	white-space: nowrap;
}

/* The separator trails each item, so a wrapped line never starts with "|". */
.be_footer-legal li:not(:last-child)::after {
	content: "|";
	margin: 0 calc(6 * var(--u));
}

@media (max-width: 1024px) {
	.be_footer-columns {
		grid-template-columns: 1fr 1fr;
	}

	.be_footer-col--brand {
		grid-column: 1 / -1;
		order: -1;
	}
}

@media (max-width: 700px) {
	.be_footer {
		padding: 50px var(--be-pad-x) 24px;
	}

	.be_footer-columns {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.be_footer-col--brand {
		gap: 24px;
	}

	.be_footer-logo img {
		width: 100%;
		max-width: 330px;
	}

	.be_footer-menu {
		max-width: none;
	}

	.be_footer-menu > li > a {
		font-size: 18px;
	}

	.be_footer-bar {
		flex-direction: column-reverse;
		font-size: 14px;
		line-height: 20px;
	}
}


/* 8. CTA band (Figma 228:1160) + contact band (148:589) --------------------- */
.be_cta {
	display: grid;
	grid-template-columns: minmax(0, calc(674 * var(--u))) minmax(0, calc(932 * var(--u)));
	justify-content: space-between;
	gap: calc(50 * var(--u));
	background: var(--be-blue);
}

/* Figma sets 100px; Thanos asked for a smaller title (2026-10-11): 72% of the display size. */
.be_cta-title {
	font: var(--be-display);
	font-size: calc(72 * var(--u));
	max-width: 6em; /* keeps the Figma lines at any size: Η Ομορφιά / σας Αξίζει / Προσωπική / Φροντίδα
	                   (longest line 5em, "Η Ομορφιά σας" 6.77em must not fit) */
}

@media (max-width: 1280px) {
	.be_cta-title {
		font-size: 52px;
	}
}

@media (max-width: 1024px) {
	.be_cta-title {
		font-size: 44px;
	}
}

@media (max-width: 700px) {
	.be_cta-title {
		font-size: 28px;
	}
}

.be_cta-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: calc(24 * var(--u));
	padding-top: calc(24 * var(--u));
}

.be_cta-image {
	width: 100%;
	aspect-ratio: 932 / 192;
	background: #000;
}

.be_cta-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

@media (max-width: 1024px) {
	.be_cta {
		grid-template-columns: 1fr;
	}

	.be_cta-body {
		padding-top: 0;
	}
}

.be_contact-band {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, calc(674 * var(--u))) minmax(0, calc(932 * var(--u)));
	justify-content: space-between;
	gap: calc(50 * var(--u)) calc(108 * var(--u));
	overflow: hidden;
	background: var(--be-blue);
}

.be_contact-band-info {
	display: flex;
	flex-direction: column;
	gap: calc(69 * var(--u));
}

.be_contact-band-title {
	font: var(--be-display);
}

.be_contact-band-details {
	display: flex;
	flex-direction: column;
	gap: calc(36 * var(--u));
}

.be_contact-band-phone,
.be_contact-band-email,
.be_contact-band-find {
	font: 700 max(26px, calc(32 * var(--u)))/max(36px, calc(45 * var(--u))) var(--be-font-body);
}

.be_contact-band-phone {
	display: flex;
	align-items: center;
	min-height: calc(82 * var(--u));
	border-bottom: 1px solid var(--be-white);
}

.be_contact-band-phone:hover,
.be_contact-band-email:hover,
.be_contact-band-address a:hover {
	color: var(--be-gold);
}

.be_contact-band-hours {
	max-width: calc(504 * var(--u));
}

.be_contact-band-form {
	display: flex;
	flex-direction: column;
	gap: calc(37 * var(--u));
}

.be_contact-band-address {
	font: 700 18px/24px var(--be-font-body);
}

@media (max-width: 1024px) {
	.be_contact-band {
		grid-template-columns: 1fr;
	}

	.be_contact-band-info {
		gap: 40px;
	}

	.be_contact-band-title .be_highlight {
		color: var(--be-gold);
	}
}

@media (max-width: 700px) {
	.be_contact-band-phone,
	.be_contact-band-email,
	.be_contact-band-find {
		font-size: 24px;
		line-height: 32px;
	}

	.be_contact-band-details {
		gap: 24px;
	}

	.be_contact-band-form {
		gap: 24px;
	}
}


/* 9. Forms (Contact Form 7, inc/forms.php; Figma "Πεδίο" 148:531) ----------- */
.wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(37 * var(--u)) calc(61 * var(--u));
}

.wpcf7-form > *,
.wpcf7-form .hidden-fields-container {
	grid-column: 1 / -1;
}

.wpcf7-form > .wpcf7-form-control-wrap:nth-of-type(-n + 4) {
	grid-column: auto;
}

.wpcf7-form .hidden-fields-container {
	display: none;
}

.wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	display: block;
	width: 100%;
	height: calc(53 * var(--u));
	padding: 0 0 calc(12 * var(--u));
	border: 0;
	border-bottom: 1px solid var(--be-white);
	border-radius: 0;
	background: transparent;
	color: var(--be-white);
	font: var(--be-body);
	transition: border-color 0.2s ease;
}

.wpcf7-form textarea {
	height: calc(190 * var(--u));
	resize: vertical;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: var(--be-muted);
	opacity: 1;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: 0;
	border-color: var(--be-gold);
}

/* Acceptance + submit on one row. */
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form > .wpcf7-form-control-wrap:has(.wpcf7-acceptance) {
	grid-column: 1;
	align-self: center;
	font: 300 16px/24px var(--be-font-body);
}

.wpcf7-form > .be_circle-btn {
	grid-column: 2;
	justify-self: end;
}

.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-acceptance label {
	display: flex;
	align-items: center;
	gap: calc(6 * var(--u));
	cursor: pointer;
}

.wpcf7-acceptance input {
	flex: none;
	width: calc(15 * var(--u));
	height: calc(15 * var(--u));
	margin: 0;
	accent-color: var(--be-gold);
}

.wpcf7-acceptance a {
	text-decoration: underline;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: calc(6 * var(--u));
	color: #ffb4a8;
	font-size: 14px;
}

.wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 16px;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
	color: #ffb4a8;
}

.wpcf7-form.sent .wpcf7-response-output {
	color: var(--be-gold);
}

.wpcf7-spinner {
	display: none;
}

.wpcf7-form.submitting .be_circle-btn {
	opacity: 0.6;
	pointer-events: none;
}

@media (max-width: 700px) {
	.wpcf7-form {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.wpcf7-form > .wpcf7-form-control-wrap:nth-of-type(-n + 4),
	.wpcf7-form .wpcf7-acceptance,
	.wpcf7-form > .wpcf7-form-control-wrap:has(.wpcf7-acceptance),
	.wpcf7-form > .be_circle-btn {
		grid-column: 1;
		justify-self: start;
	}
}


/* «Η Κλινική» / «Η Ομάδα» (Figma 218:727 / 218:770; template-parts/enotita.php,
   used on /iatros/ and on the standalone pages). ----------------------------- */
.be_enotita {
	display: flex;
	flex-direction: column;
	gap: calc(25 * var(--u));
	padding-top: calc(50 * var(--u));
	padding-bottom: calc(50 * var(--u));
}

.be_enotita-body {
	display: flex;
	gap: calc(25 * var(--u));
	align-items: flex-start;
}

.be_enotita-text {
	flex: 1;
	min-width: 0;
	max-width: calc(1256 * var(--u));
}

.be_enotita-photos {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: calc(25 * var(--u));
	max-width: calc(439 * var(--u));
	list-style: none;
}

.be_enotita-photo {
	width: calc(207 * var(--u));
}

.be_enotita-photo img {
	width: 100%;
	aspect-ratio: 207 / 235;
	object-fit: cover;
	background: var(--be-panel);
}

.be_enotita-member figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: calc(10 * var(--u));
	font-size: 16px;
	line-height: max(18px, calc(22 * var(--u)));
}

.be_enotita-member-name {
	font-weight: 500;
}

.be_enotita-member-role {
	color: var(--be-gold);
}

.be_enotita-more {
	display: inline-flex;
}

.be_enotita-head {
	padding-top: calc(50 * var(--u));
	padding-bottom: 0;
}

.be_enotita-embed {
	display: flex;
	flex-direction: column;
	gap: calc(25 * var(--u));
	padding-top: calc(25 * var(--u));
}

.be_enotita-embed-title {
	font: var(--be-h3);
}

.be_enotita-embed-frame iframe {
	width: 100%;
	height: calc(600 * var(--u));
	border: 0;
}

@media (max-width: 1024px) {
	.be_enotita-body {
		flex-direction: column;
	}

	.be_enotita-photos {
		justify-content: flex-start;
		max-width: none;
	}
}

@media (max-width: 700px) {
	.be_enotita {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.be_enotita-photos {
		gap: 16px;
	}

	.be_enotita-photo {
		width: calc(50% - 8px);
	}

	.be_enotita-embed-frame iframe {
		height: 420px;
	}
}

/* /kliniki/ only: the photos go under the text, one full-width row (Thanos 2026-10-11).
   /iatros/ and /omada/ keep the side layout. */
.page-template-page-enotita #kliniki .be_enotita-body {
	flex-direction: column;
	gap: calc(50 * var(--u));
}

.page-template-page-enotita #kliniki .be_enotita-photos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(207 * var(--u)), 1fr));
	width: 100%;
	max-width: none;
}

.page-template-page-enotita #kliniki .be_enotita-photo {
	width: auto;
}

@media (max-width: 700px) {
	.page-template-page-enotita #kliniki .be_enotita-photos {
		grid-template-columns: 1fr 1fr;
	}
}


/* 10. Utilities ------------------------------------------------------------ */
.be_center {
	text-align: center;
}

.be_media-cover {
	position: relative;
	overflow: hidden;
}

.be_media-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scroll reveals (.be_anim be_anim--{up|left|right|zoom|wipe|line}, delay via --d).
   main.js adds .is-reveal-pending (hidden) and swaps it for .is-revealed when the element
   scrolls into view. Keyframes only define the start ("from"), so every element animates back
   to its own styles, and fill-mode backwards leaves hover transforms/opacities untouched after
   the entrance. No JS or reduced motion: nothing is ever hidden. */
.be_anim.is-reveal-pending {
	opacity: 0;
}

.be_anim.is-revealed {
	animation: be-reveal-up 1s var(--be-ease-gentle) var(--d, 0ms) backwards;
}

.be_anim--left.is-revealed {
	animation-name: be-reveal-left;
}

.be_anim--right.is-revealed {
	animation-name: be-reveal-right;
}

.be_anim--zoom.is-revealed {
	animation-name: be-reveal-zoom;
}

.be_anim--wipe.is-revealed {
	animation-name: be-reveal-wipe;
	animation-duration: 1.2s;
}

.be_anim--line.is-revealed {
	animation-name: be-reveal-line;
	animation-duration: 1.2s;
}

@keyframes be-reveal-up {
	from {
		opacity: 0;
		transform: translateY(calc(50 * var(--u)));
	}
}

@keyframes be-reveal-left {
	from {
		opacity: 0;
		transform: translateX(calc(-80 * var(--u)));
	}
}

@keyframes be-reveal-right {
	from {
		opacity: 0;
		transform: translateX(calc(80 * var(--u)));
	}
}

@keyframes be-reveal-zoom {
	from {
		opacity: 0;
		transform: scale(0.85);
	}
}

@keyframes be-reveal-wipe {
	from {
		clip-path: inset(0 100% 0 0);
	}
}

@keyframes be-reveal-line {
	from {
		clip-path: inset(0 0 100% 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

.be_row-item-text ul,
.be_row-item-text ol {
	margin-top: calc(8 * var(--u));
	padding-left: calc(24 * var(--u));
	list-style: disc;
}

.be_row-item-text a {
	color: var(--be-gold);
	text-decoration: underline;
}

/* CTA / contact band hover states (Figma 224:1147, 148:555). */
.be_cta .be_highlight,
.be_contact-band--home .be_contact-band-title .be_highlight {
	color: inherit;
	transition: color 0.8s ease-out;
}

.be_cta:hover .be_highlight,
.be_contact-band--home:hover .be_contact-band-title .be_highlight {
	color: var(--be-gold);
}

.be_contact-band-bg {
	position: absolute;
	top: 17%;
	left: 58%;
	width: 39%;
	height: 83%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease-out;
}

.be_contact-band-bg img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom;
}

/* Figma 148:555 (hover, dissolve 800ms ease-out): the photo is a 10% fill behind the content. */
.be_contact-band:hover .be_contact-band-bg {
	opacity: 0.1;
}

.be_contact-band-info,
.be_contact-band-form {
	position: relative;
}

@media (max-width: 1024px) {
	.be_contact-band--home .be_contact-band-title .be_highlight {
		color: var(--be-gold);
	}

	.be_contact-band-bg {
		top: auto;
		bottom: 0;
		left: 30%;
		width: 70%;
		height: 60%;
		opacity: 0.1;
	}
}

/* Reviews band (template-parts/reviews.php, home + /testimonials/). */
.be_reviews {
	display: flex;
	flex-direction: column;
	gap: calc(50 * var(--u));
	padding-top: calc(50 * var(--u));
}

.be_reviews-widget {
	min-height: calc(260 * var(--u));
}

/* Trustindex widget on the dark ground: the rating summary is dark by default. */
.be_reviews .ti-widget .ti-footer .ti-rating-text,
.be_reviews .ti-widget .ti-footer .ti-rating-text *,
.be_reviews .ti-widget .ti-footer .ti-rating,
.be_reviews .ti-widget .ti-footer .ti-rating * {
	color: var(--be-white) !important;
}

/* Lightbox (main.js, a[data-lightbox]): results images in a modal with arrows. */
.be_results-link {
	position: relative;
	display: block;
	cursor: zoom-in;
}

.be_results-link img {
	transition: opacity var(--be-t-btn);
}

.be_results-link:hover img {
	opacity: 0.85;
}

.be_lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	padding: 60px 40px;
	background: rgba(4, 5, 21, 0.94);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.be_lightbox.is-open {
	opacity: 1;
}

.be_lightbox[hidden] {
	display: none;
}

.be_lightbox-open {
	overflow: hidden;
}

.be_lightbox-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	min-width: 0;
	max-height: 100%;
}

.be_lightbox-figure img {
	max-width: 100%;
	max-height: calc(100vh - 160px);
	object-fit: contain;
	transition: opacity 0.2s ease;
}

.be_lightbox.is-loading img {
	opacity: 0.3;
}

.be_lightbox-figure figcaption {
	font: 300 16px/22px var(--be-font-body);
	color: var(--be-gold);
	text-align: center;
}

.be_lightbox-counter {
	color: var(--be-white);
}

.be_lightbox .be_arrow-btn {
	flex: none;
	width: 62px;
	height: 40px;
}

.be_lightbox .be_arrow-btn::before {
	width: 25px;
	height: 25px;
}

.be_lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: var(--be-white);
	-webkit-mask: url("../img/icon-faq-close.svg") center / contain no-repeat;
	mask: url("../img/icon-faq-close.svg") center / contain no-repeat;
	cursor: pointer;
	transition: background-color var(--be-t-btn);
}

.be_lightbox-close:hover,
.be_lightbox-close:focus-visible {
	background: var(--be-gold);
}

@media (max-width: 700px) {
	.be_lightbox {
		flex-wrap: wrap;
		gap: 16px;
		padding: 70px 12px 20px;
	}

	.be_lightbox-figure {
		order: -1;
		width: 100%;
	}

	.be_lightbox-figure img {
		max-height: calc(100vh - 200px);
	}
}