/* ==========================================================================
   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:20px}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:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;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 (manoskotidis.com)
   Global stylesheet, loaded on every page. Per-page styles live in
   assets/css/pages/{key}.css and load only there (see inc/enqueue.php).

   There is no Figma handoff for this site: the brand is the logo (petrol
   #1A393F monogram with a bone in the stem), extended with warm bone/sand
   grounds and a copper accent. Sections are full-width .be_row blocks with
   padding only - no max-width container; components cap themselves.

    1. Fonts
    2. Tokens
    3. Base
    4. Layout        .be_row .be_stack .be_grid .be_shead
    5. Type          .be_hd .be_eyebrow .be_lead .be_prose
    6. Buttons/links .be_btn .be_link .be_linkline
    7. Cards         .be_card .be_ph .be_iconlist
    8. Blocks        .be_keybox .be_callout .be_statband .be_ctaband .be_quote
                     .be_faq .be_table .be_timeline .be_toc .be_authorbox .be_chip
    9. Forms         .be_form
   10. Breadcrumb
   11. Header + navigation
   12. Footer
   13. Call bar + side tab
   ========================================================================== */


/* 1. Fonts ----------------------------------------------------------------
   Self-hosted, subset to Greek + Latin (assets/fonts, built with fontTools):
   Commissioner variable, instanced to wght 300-800 (the flair, volume and
   slant axes pinned to their defaults), 47 KB. Its open, slightly wide
   shapes echo the lettering under the logo's monogram.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Commissioner";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/commissioner-var.woff2") format("woff2-variations"),
		url("../fonts/commissioner-var.woff2") format("woff2");
}


/* 2. Tokens --------------------------------------------------------------- */
:root {
	/* Brand: petrol from the logo, bone/sand grounds, copper accent. */
	--be-petrol: #1a393f;
	--be-copper: #d9a877;     /* decorative accent, fills, accent on dark grounds */
	--be-copper-ink: #8e5a2e; /* copper that passes 5:1 as text on the light grounds */
	--be-deep: #102a2f;       /* footer */
	--be-panel: #24494f;
	--be-ground: #f7f3ee;
	--be-band: #efe7dc;
	--be-strip: #fbf8f4;
	--be-tint: #f2ebe1;
	--be-tint-2: #e9dccb;
	--be-tint-3: #dcc8ae;
	--be-clay: #f3e2d3;
	--be-mint: #dfeae7;       /* cool counterweight tile on the warm ground */
	--be-ink: #13292d;
	--be-text: #33494d;
	--be-muted: #56686b;
	--be-line: #e3d9cc;
	--be-line-2: #d8ccbb;
	--be-line-3: #ece4d9;
	/* CTA: copper fill with petrol text (5.8:1); the darker rim gives the control
	   its 3:1 edge against the light grounds. */
	--be-cta: #d9a877;
	--be-cta-hover: #cf9a66;
	--be-cta-on: #13292d;
	--be-cta-edge: #b5814f;

	--be-warn: #b5431f;
	--be-warn-bg: #fbede6;
	--be-white: #fff;

	/* On petrol / footer grounds */
	--be-on-dark: #f6efe6;
	--be-on-dark-soft: #d6dedc;
	--be-on-dark-mute: #a9bbb8;
	--be-on-dark-line: rgba(244, 236, 226, 0.16);

	/* Typography */
	--be-font-body: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
	--be-font-head: var(--be-font-body);

	--be-h1: clamp(38px, 4.6vw, 66px);
	--be-h2: clamp(32px, 3.6vw, 50px);
	--be-h2-sm: clamp(28px, 3vw, 40px);
	--be-h3: 26px;
	--be-h4: 20px;
	--be-body-size: 17px;
	--be-lead: 19px;
	--be-small: 15px;

	/* Shapes */
	--be-r-card: 22px;
	--be-r-card-lg: 28px;
	--be-r-panel: 32px;
	--be-r-panel-lg: 40px;
	--be-r-img: 26px;
	--be-r-field: 14px;
	--be-r-pill: 999px;

	/* Shadows */
	--be-shadow-card: 0 14px 34px rgba(16, 38, 43, 0.1);
	--be-shadow-btn: 0 8px 20px rgba(16, 38, 43, 0.18);
	--be-shadow-float: 0 18px 40px rgba(16, 38, 43, 0.14);

	/* Section padding: 100px sides on desktop, then the gutters grow slowly so a
	   2K screen keeps its proportions without a max-width container. */
	--be-pad-x: clamp(100px, 6.5vw, 240px);
	--be-pad-y: 104px;
	--be-gap: 48px;
}

/* Below 1240 the reference's 1240px container is no longer the limit — its
   padding is, so the gutters narrow here too and the content column tracks the
   reference within ~40px all the way down. */
@media (max-width: 1240px) {
	:root {
		--be-pad-x: 60px;
	}
}

@media (max-width: 1040px) {
	:root {
		--be-pad-y: 80px;
		--be-gap: 40px;
	}
}

@media (max-width: 860px) {
	:root {
		--be-pad-x: 20px;
		--be-pad-y: 56px;
		--be-h3: 24px;
		--be-gap: 32px;
	}
}


/* 3. Base ----------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	/* `clip`, not `hidden`: it cuts decorative overhangs (the ghost words, the
	   reviews slider track) without making body a scroll container, so the
	   sticky header keeps working. */
	overflow-x: clip;
	font-family: var(--be-font-body);
	font-size: var(--be-body-size);
	line-height: 1.6;
	color: var(--be-ink);
	background: var(--be-ground);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

p {
	margin: 0;
}

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

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

strong, b {
	font-weight: 700;
}

em, i {
	font-style: italic;
}

:focus-visible {
	outline: 3px solid var(--be-copper-ink);
	outline-offset: 3px;
	border-radius: 2px;
}

.be_dark :focus-visible {
	outline-color: var(--be-copper);
}

[hidden] {
	display: none !important;
}

/* Dark sections: text colours flip, light panels inside them flip back. */
.be_dark {
	color: var(--be-on-dark);
}

.be_dark .be_light {
	color: var(--be-ink);
}


/* 4. Layout --------------------------------------------------------------
   No max-width containers: every page section is a full-width block carrying
   .be_row padding. Modifiers change only the vertical rhythm or the ground.
   ------------------------------------------------------------------------- */
.be_row {
	padding: var(--be-pad-y) var(--be-pad-x);
}

.be_row--tight {
	padding-top: calc(var(--be-pad-y) * 0.6);
	padding-bottom: calc(var(--be-pad-y) * 0.6);
}

.be_row--flush-top {
	padding-top: 0;
}

.be_row--flush-bottom {
	padding-bottom: 0;
}

.be_row--petrol {
	background: var(--be-petrol);
}

.be_row--strip {
	background: var(--be-strip);
	border-top: 1px solid var(--be-line);
	border-bottom: 1px solid var(--be-line);
}

.be_row--band {
	background: var(--be-band);
}

/* Vertical stack with the section rhythm. */
.be_stack {
	display: flex;
	flex-direction: column;
	gap: var(--be-gap);
}

.be_stack--sm {
	gap: 24px;
}

.be_stack--xs {
	gap: 16px;
}

/* Two-column split that wraps (hero, doctor, FAQ, contact).
   The sections are full-width, so each column caps its own width and the extra
   space on very wide screens lands between the columns instead of stretching a
   portrait photo or a text measure past what the design intends. Below ~1500px
   nothing reaches its cap and the layout is identical to the reference. */
.be_split {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* The gutter grows with the viewport so a centred pair of columns still
	   covers most of a wide row instead of huddling in the middle. */
	gap: clamp(48px, 3.6vw, 110px);
}

.be_split > * {
	max-width: var(--be-split-max, 760px);
}

.be_split--wide {
	gap: clamp(56px, 4.2vw, 128px);
}

.be_split--center {
	align-items: center;
}

/* A two-column row is full-width, but its columns are not: prose stops being
   readable past ~940px and a sidebar card past ~360px. Below 1500 the leftover
   is small enough that space-between reads as a gutter; above it the two
   columns would drift to opposite edges of the screen, so they centre as a
   pair instead. The section, its background and its padding stay full-width. */
@media (min-width: 1500px) {
	.be_split {
		justify-content: center;
	}

	/* A one-column row has nothing to centre against: it stays on the margin,
	   in line with the breadcrumb above it. */
	.be_split--solo,
	.be_phero-row--solo {
		justify-content: flex-start;
	}
}

/* Auto-fitting card grid; --be-col sets the minimum column width. */
.be_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--be-col, 300px), 100%), 1fr));
	gap: var(--be-grid-gap, 20px);
}

.be_grid > .be_span2 {
	grid-column: span 2;
}

@media (max-width: 860px) {
	.be_split,
	.be_split--wide {
		gap: 36px;
	}

	.be_grid > .be_span2 {
		grid-column: auto;
	}
}

/* Section head: eyebrow + H2 + lead, with an optional link on the right. */
.be_shead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.be_shead-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 68ch;
}


/* 5. Type ---------------------------------------------------------------- */
.be_eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	color: var(--be-copper-ink);
}

.be_dark .be_eyebrow {
	color: var(--be-copper);
}

.be_dark .be_light .be_eyebrow {
	color: var(--be-copper-ink);
}

/* Display heading. .be_hd--h1/.be_hd--h2 set the size. */
.be_hd {
	font-family: var(--be-font-head);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.be_hd--h1 {
	font-size: var(--be-h1);
	letter-spacing: -0.02em;
	line-height: 1.04;
}

.be_hd--h2 {
	font-size: var(--be-h2);
}

.be_hd--h3 {
	font-size: var(--be-h3);
	line-height: 1.15;
}

.be_hd--h4 {
	font-size: 24px;
	line-height: 1.25;
}

.be_hd em,
.be_hd .be_accent {
	font-style: normal;
	color: var(--be-copper-ink);
}

.be_dark .be_hd em,
.be_dark .be_hd .be_accent {
	color: var(--be-copper);
}

.be_lead {
	font-size: var(--be-lead);
	color: var(--be-text);
	max-width: 62ch;
}

.be_dark .be_lead {
	color: var(--be-on-dark-soft);
}

.be_muted {
	color: var(--be-muted);
}

.be_dark .be_muted {
	color: var(--be-on-dark-mute);
}

.be_small {
	font-size: 14px;
}

/* Long-form content (WYSIWYG output). Measure is capped for readability: the
   sections are full-width, text lines are not. */
.be_prose {
	font-size: 18px;
	line-height: 1.75;
	color: var(--be-text);
	max-width: 74ch;
}

.be_prose > * + * {
	margin-top: 1.2em;
}

.be_prose h2 {
	font-family: var(--be-font-head);
	font-weight: 700;
	font-size: clamp(28px, 3vw, 38px);
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--be-ink);
	margin-top: 1.8em;
	scroll-margin-top: 24px;
}

.be_prose h3 {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--be-ink);
	margin-top: 1.6em;
}

.be_prose h4 {
	font-size: 19px;
	font-weight: 700;
	color: var(--be-ink);
	margin-top: 1.4em;
}

.be_prose > :first-child {
	margin-top: 0;
}

.be_prose ul,
.be_prose ol {
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.be_prose li {
	position: relative;
	padding-left: 30px;
}

.be_prose ul > li::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 0.62em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--be-copper);
}

.be_prose ol {
	counter-reset: be-prose;
}

.be_prose ol > li {
	counter-increment: be-prose;
}

.be_prose ol > li::before {
	content: counter(be-prose) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--be-copper-ink);
}

.be_prose a:not(.be_btn):not(.be_card) {
	color: var(--be-copper-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.be_prose a:not(.be_btn):not(.be_card):hover {
	text-decoration-thickness: 2px;
}

.be_prose blockquote {
	font-family: var(--be-font-head);
	font-size: 22px;
	line-height: 1.5;
	color: var(--be-ink);
	border-left: 3px solid var(--be-copper);
	padding-left: 24px;
}

.be_prose img {
	border-radius: var(--be-r-img);
}

.be_prose table {
	width: 100%;
}

.be_prose strong {
	color: var(--be-ink);
}


/* 6. Buttons and links -------------------------------------------------- */
.be_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--be-r-pill);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.be_btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--be-shadow-btn);
}

/* The class is doubled on purpose: the inlined parent reset has
   `a[href^="tel"] { color: inherit }`, which outranks a single class and made
   the phone button render white-on-white inside the navy CTA band. */
.be_btn.be_btn--cta {
	background: var(--be-cta);
	color: var(--be-cta-on);
	border: 1.5px solid var(--be-cta-edge);
}

.be_btn.be_btn--cta:hover {
	background: var(--be-cta-hover);
}

.be_btn.be_btn--petrol {
	background: var(--be-petrol);
	color: var(--be-white);
}

.be_btn.be_btn--line {
	border: 1.5px solid var(--be-petrol);
	color: var(--be-petrol);
	background: transparent;
}

.be_btn.be_btn--ink {
	border: 1.5px solid var(--be-ink);
	color: var(--be-ink);
	background: transparent;
}

.be_btn.be_btn--light {
	background: var(--be-white);
	color: var(--be-petrol);
}

.be_dark .be_btn.be_btn--line {
	border-color: var(--be-on-dark);
	color: var(--be-on-dark);
}

/* Hero-sized button */
.be_btn--lg {
	min-height: 56px;
	padding: 0 30px;
	font-size: 17px;
}

.be_btn:disabled,
.be_btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* Inline link that only changes colour on hover. Never red. */
.be_link {
	transition: color 0.15s ease, border-color 0.15s ease;
}

.be_link:hover {
	color: var(--be-copper-ink);
}

.be_dark .be_link:hover {
	color: var(--be-copper);
}

.be_dark .be_light .be_link:hover {
	color: var(--be-copper-ink);
}

/* Underlined «read more» link with an arrow.
   `width: fit-content` (rather than `align-self: flex-start`) keeps it from
   stretching inside column flex containers while still letting a row container
   align it — the section head bottom-aligns it next to the heading. */
.be_linkline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	font-weight: 700;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
	transition: color 0.15s ease;
}

.be_linkline:hover {
	color: var(--be-copper-ink);
}

/* A .be_linkline that is a <button>: picks which practice the map below shows
   (homepage «Τα ιατρεία», contact «Πού θα μας βρείτε»). */
.be_maplink {
	background: none;
	border: 0;
	border-bottom: 2px solid currentColor;
	padding: 0 0 2px;
	font: inherit;
	font-weight: 700;
	color: var(--be-ink);
	cursor: pointer;
}

.be_maplink[aria-pressed="true"] {
	color: var(--be-copper-ink);
}

/* The chosen practice. Pointing at a card is what switches the map, so the card
   has to say which one the map is showing — otherwise the map changes under the
   visitor with nothing to connect it to. */
.be_mapcard--on {
	border-color: var(--be-copper);
	box-shadow: 0 0 0 2px var(--be-tint-3), var(--be-shadow-card);
}

[data-be-map-src] {
	cursor: default;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
	[data-be-map-src]:hover {
		border-color: var(--be-copper);
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-be-map-src] {
		transition: none;
	}
}

.be_contact-loc .be_maplink {
	margin-top: auto;
	padding-top: 10px;
}

.be_dark .be_linkline:hover {
	color: var(--be-copper);
}

.be_linkline--push {
	margin-top: auto;
}


/* 7. Cards and images --------------------------------------------------- */
.be_card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.be_card:hover {
	transform: translateY(-3px);
	box-shadow: var(--be-shadow-card);
}

/* White bordered card (the default surface on the light ground). */
.be_cd {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--be-white);
	border: 1px solid var(--be-line);
	border-radius: var(--be-r-card-lg);
	padding: 32px;
}

.be_cd--sm {
	gap: 12px;
	border-radius: var(--be-r-card);
	padding: 28px;
}

.be_cd--tint {
	background: var(--be-tint);
	border-color: transparent;
}

.be_cd--panel {
	background: var(--be-panel);
	border-color: transparent;
	color: var(--be-on-dark);
}

.be_cd--petrol {
	background: var(--be-petrol);
	border-color: transparent;
	color: var(--be-on-dark);
}

.be_cd--clay {
	background: var(--be-clay);
	border-color: transparent;
	color: var(--be-ink);
}

.be_cd--flat:hover {
	transform: none;
	box-shadow: none;
}

/* A list of links inside a card, separated by hairlines. */
.be_clist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.be_clist > li > a {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	font-weight: 600;
	border-bottom: 1px solid var(--be-line-3);
}

.be_clist > li:last-child > a {
	border-bottom: 0;
}

.be_dark .be_clist > li > a {
	border-bottom-color: var(--be-on-dark-line);
}

.be_cd--clay .be_clist > li > a {
	border-bottom-color: rgba(16, 38, 43, 0.14);
}

/* Checklist with sky ticks. */
.be_iconlist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-weight: 600;
}

.be_iconlist > li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.be_iconlist svg {
	flex: none;
	margin-top: 4px;
	color: var(--be-copper-ink);
}

.be_dark .be_iconlist svg {
	color: var(--be-copper);
}

.be_dark .be_light .be_iconlist svg {
	color: var(--be-copper-ink);
}

/* Inline list of ticks (hero). */
.be_ticks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	font-size: var(--be-small);
	font-weight: 600;
	color: var(--be-text);
}

.be_ticks > li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.be_ticks svg {
	flex: none;
	color: var(--be-copper-ink);
}

/* Images: aspect ratio is set inline via --be-ph-ratio so the placeholder and
   the real photo reserve exactly the same box (no CLS when photos arrive). */
.be_img {
	display: block;
	width: 100%;
	aspect-ratio: var(--be-ph-ratio, auto);
	object-fit: cover;
	border-radius: var(--be-r-img);
}

/* Striped placeholder standing in for a pending photo (DESIGN.md → `.ph`). */
.be_ph {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	aspect-ratio: var(--be-ph-ratio, 4 / 3);
	padding: 24px;
	border-radius: var(--be-r-img);
	background: repeating-linear-gradient(135deg, var(--be-tint-3) 0 14px, var(--be-tint-2) 14px 28px);
	overflow: hidden;
}

.be_ph > span {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--be-muted);
	text-align: center;
}

.be_ph--map {
	align-items: center;
	background: repeating-linear-gradient(135deg, #e3edf7 0 14px, #eaf2fa 14px 28px);
}

.be_ph--sm {
	padding: 18px;
}

.be_ph--sm > span {
	font-size: 13px;
}


/* 8. Content blocks ----------------------------------------------------- */

/* «Βασικά σημεία» key box. */
.be_keybox {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--be-tint);
	border-radius: var(--be-r-panel);
	padding: 36px 40px;
}

.be_keybox h2,
.be_keybox .be_keybox-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--be-copper-ink);
	text-transform: none;
}

/* In-article CTA. Replaces the Elementor widget the old site had mid-content:
   tinted rather than navy, because the sidebar card and the closing band are
   already navy and three dark blocks on one page is two too many. */
.be_incta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	padding: 28px 32px;
	background: var(--be-tint);
	border: 1px solid var(--be-tint-3);
	border-radius: var(--be-r-panel);
}

.be_prose > .be_incta {
	margin: 2.2em 0;
}

.be_incta-text {
	flex: 1 1 320px;
	min-width: 0;
}

.be_incta-title {
	display: block;
	font-family: var(--be-font-head);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--be-petrol);
}

.be_prose > .be_incta .be_incta-lead {
	margin-top: 6px;
	font-size: 16px;
	color: var(--be-muted);
}

.be_incta-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.be_incta-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	font-size: 15px;
	font-weight: 700;
}

.be_incta .be_incta-contact a {
	color: var(--be-copper-ink);
	text-decoration: none;
}

.be_incta .be_incta-contact a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 620px) {
	.be_incta {
		padding: 24px 22px;
	}

	.be_incta-actions {
		width: 100%;
	}

	.be_incta-actions .be_btn {
		width: 100%;
	}
}

/* «Πότε χρειάζεται άμεση βοήθεια» callout. */
.be_callout {
	display: flex;
	gap: 20px;
	background: var(--be-warn-bg);
	border-radius: var(--be-r-panel);
	padding: 32px 36px;
}

.be_callout-icon {
	flex: none;
	color: var(--be-warn);
	margin-top: 2px;
}

.be_callout-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.be_callout-body h2,
.be_callout-body h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
}

/* Dark statistics band. */
.be_statband {
	display: flex;
	flex-direction: column;
	gap: 32px;
	background: var(--be-petrol);
	border-radius: var(--be-r-panel-lg);
	padding: 48px;
	color: var(--be-on-dark);
}

.be_stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.be_stat-value {
	font-family: var(--be-font-head);
	font-size: clamp(34px, 3.6vw, 48px);
	font-weight: 700;
	line-height: 1;
	color: var(--be-white);
}

.be_stat-label {
	font-size: 14px;
	color: var(--be-on-dark-soft);
}

/* Closing CTA band. */
.be_ctaband {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	background: var(--be-petrol);
	border-radius: var(--be-r-panel-lg);
	padding: 56px;
	color: var(--be-on-dark);
}

.be_ctaband--tint {
	background: var(--be-tint-2);
	color: var(--be-ink);
}

.be_ctaband-text {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 700px;
}

.be_ctaband-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* Review / philosophy quote card. */
.be_quote {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--be-white);
	border: 1px solid var(--be-line);
	border-radius: var(--be-r-card);
	padding: 32px;
}

.be_quote blockquote {
	margin: 0;
	font-family: var(--be-font-head);
	font-size: 21px;
	line-height: 1.5;
	color: var(--be-ink);
}

.be_quote figcaption {
	font-size: 14px;
	font-weight: 600;
	color: var(--be-muted);
}

/* FAQ accordion (<details>, no JavaScript). */
.be_faq {
	border-top: 1px solid var(--be-line-2);
}

.be_faq > details {
	border-bottom: 1px solid var(--be-line-2);
}

.be_faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.be_faq summary::-webkit-details-marker {
	display: none;
}

.be_faq summary > svg {
	flex: none;
	color: var(--be-copper-ink);
	transition: transform 0.2s ease;
}

.be_faq > details[open] > summary > svg {
	transform: rotate(45deg);
}

.be_faq-answer {
	padding: 0 48px 28px 0;
	color: var(--be-text);
}

.be_faq-answer > * + * {
	margin-top: 1em;
}

/* Open/close animation. `interpolate-size` lets a height transition run to
   `auto`, and ::details-content is the box the browser reveals. Browsers
   without either simply open instantly — the accordion still works, and only
   one panel is ever open because the <details> share a `name`. */
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}

	.be_faq > details::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete, opacity 0.2s ease;
	}

	.be_faq > details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

.be_faq summary:hover {
	color: var(--be-copper-ink);
}

@media (max-width: 860px) {
	.be_faq summary {
		font-size: 18px;
		gap: 16px;
	}

	.be_faq-answer {
		padding-right: 0;
	}
}

/* Comparison table (always inside .be_tablewrap for horizontal scrolling). */
.be_tablewrap {
	overflow-x: auto;
	border-radius: var(--be-r-card);
	border: 1px solid var(--be-line);
	background: var(--be-white);
}

.be_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	min-width: 560px;
}

.be_table th,
.be_table td {
	padding: 16px 18px;
	text-align: left;
	line-height: 1.5;
	border-bottom: 1px solid var(--be-line-2);
	vertical-align: top;
}

.be_table thead th {
	background: var(--be-tint);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--be-copper-ink);
	white-space: nowrap;
}

.be_table tbody tr:last-child th,
.be_table tbody tr:last-child td {
	border-bottom: 0;
}

.be_table tbody th {
	font-weight: 700;
	color: var(--be-ink);
}

.be_table td {
	color: var(--be-text);
}

/* Timeline (βιογραφικό): a two-column grid, year beside the entry, separated
   by hairlines — reference/Viografiko.html `.tl`. */
.be_timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.be_timeline > li {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 28px;
	padding: 26px 0;
	border-bottom: 1px solid var(--be-line-2);
}

.be_timeline > li:first-child {
	border-top: 1px solid var(--be-line-2);
}

.be_timeline-year {
	font-family: var(--be-font-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--be-copper-ink);
}

.be_timeline-title {
	display: block;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 4px;
}

.be_timeline-text {
	font-size: 16px;
	color: var(--be-muted);
}

@media (max-width: 700px) {
	.be_timeline > li {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* Sticky table of contents (condition / article sidebar). */
.be_toc {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--be-white);
	border: 1px solid var(--be-line);
	border-radius: var(--be-r-card);
	padding: 24px;
}

.be_toc-title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--be-copper-ink);
}

.be_toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	counter-reset: be-toc;
	/* Pages with 17 headings would otherwise push the CTA card below the fold;
	   the list takes at most 55% of the viewport and scrolls. (It was 40% while
	   the category list still sat under the card.) */
	max-height: 55vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--be-line-2) transparent;
}

.be_toc li {
	counter-increment: be-toc;
}

.be_toc a {
	display: block;
	padding: 8px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--be-text);
	border-bottom: 1px solid var(--be-line-3);
	transition: color 0.15s ease;
}

.be_toc li:last-child a {
	border-bottom: 0;
}

.be_toc a:hover {
	color: var(--be-copper-ink);
}

/* Author box. */
.be_authorbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	background: var(--be-tint);
	border-radius: var(--be-r-panel);
	padding: 32px 36px;
}

.be_authorbox-photo {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--be-tint-3);
}

.be_authorbox-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
}

.be_authorbox-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 220px;
	flex: 1 1 320px;
}

.be_authorbox-name {
	font-size: 18px;
	font-weight: 700;
}

/* Category / pagination chips. */
.be_chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.be_chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1.5px solid var(--be-line-2);
	border-radius: var(--be-r-pill);
	background: var(--be-white);
	font-size: 15px;
	font-weight: 700;
	color: var(--be-text);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.be_chip:hover {
	border-color: var(--be-copper-ink);
	color: var(--be-copper-ink);
}

.be_chip--on,
.be_chip[aria-current] {
	background: var(--be-petrol);
	border-color: var(--be-petrol);
	color: var(--be-white);
}

/* Small pill tag (post category badge). */
.be_tag {
	display: inline-flex;
	align-items: center;
	border-radius: var(--be-r-pill);
	background: var(--be-tint-2);
	color: var(--be-copper-ink);
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 700;
}

/* Post meta line. */
.be_meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--be-muted);
}

.be_dark .be_meta {
	color: var(--be-on-dark-mute);
}

/* Numbered step cards. */
.be_steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 24px;
	counter-reset: be-step;
}

.be_steps > li {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 24px;
	border-top: 2px solid var(--be-ink);
	counter-increment: be-step;
}

.be_steps > li::before {
	content: counter(be-step);
	font-family: var(--be-font-head);
	font-size: 44px;
	font-weight: 500;
	line-height: 1;
	color: var(--be-copper-ink);
}

.be_steps h3 {
	font-size: var(--be-h4);
	font-weight: 700;
	line-height: 1.35;
}

.be_dark .be_steps > li {
	border-top-color: var(--be-copper);
}

/* Google map embed. The iframe is in the markup; `loading="lazy"` keeps it off
   the critical path, and a background behind it so the band is not a white hole
   while Google is still answering. */
.be_map {
	position: relative;
	width: 100%;
	aspect-ratio: var(--be-ph-ratio, 21 / 8);
	min-height: 300px;
	/* 21/8 of a 2200px row is an 840px tall map. The ratio sets the shape on
	   normal screens; beyond that the band just stops growing. */
	max-height: 560px;
	border-radius: var(--be-r-img);
	overflow: hidden;
	background: var(--be-tint);
}

.be_map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}


/* 8b. Condition category grid ------------------------------------------
   template-parts/condition-grid.php — the seven-card grid shared by the
   homepage and the «Παθήσεις» hub (reference/Main.html → ΠΑΘΗΣΕΙΣ).
   ---------------------------------------------------------------------- */

/* Fixed columns, not auto-fit: seven cards with the featured one spanning two
   is eight column-units, which fills four columns in exactly two rows. Letting
   auto-fit decide gave six narrow columns on a 2K screen and left a card
   stranded on a third row. */
.be_cgrid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 1240px) {
	.be_cgrid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

@media (max-width: 600px) {
	.be_cgrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.be_cgrid .be_span2 {
		grid-column: auto;
	}
}

/* The link list sits at the top of the card and the category link at the foot,
   so cards of different lengths still line up. */
.be_cgrid > .be_card .be_clist {
	margin-bottom: 8px;
}

.be_cgrid-all {
	margin-top: auto;
	padding-top: 16px;
	font-size: var(--be-small);
	color: var(--be-copper-ink);
	border-bottom-color: var(--be-tint-3);
}

.be_cgrid-all:hover {
	border-bottom-color: currentColor;
}

.be_cd--clay .be_cgrid-all {
	/* --be-warn is 4.2:1 on the clay card; this shade clears 4.5:1 (5.2). */
	color: #9e3a1a;
	border-bottom-color: rgba(181, 67, 31, 0.35);
}

.be_cgrid--featured {
	gap: 24px;
	padding: 40px;
}

.be_cgrid-title {
	font-size: 40px;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.be_cgrid-text {
	max-width: 520px;
	color: #bcd3ea;
}

/* The featured card lists six hernias in two columns. */
.be_cgrid-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 4px 24px;
}

.be_cgrid-list > li > a {
	padding: 12px 0;
}

.be_cgrid-extra {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	font-size: var(--be-small);
}

.be_cgrid-extra .be_linkline {
	font-size: var(--be-small);
}


@media (max-width: 860px) {
	.be_cgrid--featured {
		padding: 28px 22px;
	}

	.be_cgrid-title {
		font-size: 30px;
	}

	.be_ctaband,
	.be_statband,
	.be_keybox,
	.be_callout,
	.be_authorbox {
		padding: 28px 22px;
		border-radius: var(--be-r-card);
	}
}


/* 8c. Card grids and the white CTA card ---------------------------------
   `.be_cardgrid` is the four-variant grid used inside long-form content and
   on the CV page; `.be_ctacard` is the white closing card used by the blog,
   the CV and the practice pages.
   ---------------------------------------------------------------------- */
.be_cardgrid {
	margin-top: 1.2em;
}

.be_cardgrid-item {
	gap: 6px;
	padding: 22px;
	border-radius: var(--be-r-card);
}

.be_cardgrid-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--be-ink);
}

.be_cardgrid-text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--be-muted);
}

.be_cardgrid-text p {
	margin: 0;
}

.be_cardgrid-text ul {
	gap: 8px;
	margin-top: 10px;
}

.be_cardgrid-text li {
	font-size: 16px;
}

/* «white» cards carry a heading plus a list and sit on a taller box. */
.be_cardgrid--white .be_cardgrid-item {
	padding: 24px;
	gap: 12px;
}

/* «tint» cards are the small benefit tiles. */
.be_cardgrid--tint .be_cardgrid-item {
	background: var(--be-tint);
	border-color: var(--be-tint);
}

.be_cardgrid--tint .be_cardgrid-title {
	font-size: 17px;
}

.be_cardgrid--tint .be_cardgrid-text {
	font-size: 16px;
	color: var(--be-text);
}

/* «step» cards are numbered. */
.be_cardgrid--step .be_cardgrid-item {
	padding: 24px;
	gap: 10px;
}

.be_cardgrid-num {
	font-family: var(--be-font-head);
	font-size: 36px;
	font-weight: 500;
	line-height: 1;
	color: var(--be-copper-ink);
}


	padding-top: 96px;
	padding-bottom: 96px;
}

.be_ctacard {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	border-radius: var(--be-r-panel);
	padding: 48px;
}

.be_ctacard .be_ctaband-text {
	max-width: 640px;
}

.be_ctacard-title {
	font-size: clamp(28px, 3vw, 40px);
}



/* 8d. Label + content split --------------------------------------------
   A narrow heading column beside a list or an accordion — reference/
   Iatreio.html and Errikos-Dynant.html.
   ---------------------------------------------------------------------- */
.be_labelsplit {
	gap: 56px;
}

.be_labelsplit-label {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-self: flex-start;
}

.be_labelsplit-body {
	flex: 2 1 520px;
	min-width: 0;
}

/* The checklist variant: ticks with regular-weight text. */
.be_iatreio-checklist-list {
	gap: 16px;
	font-weight: 400;
}

.be_iatreio-checklist-list strong {
	color: var(--be-ink);
}



/* 8f. Chips, stars, facts, journey ----------------------------------------
   Shared by the homepage and the inner pages that will reuse them.
   ------------------------------------------------------------------------ */
.be_chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.be_chip-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 18px;
	border-radius: var(--be-r-pill);
	border: 1.5px solid var(--be-line-2);
	background: var(--be-white);
	font-size: 15px;
	font-weight: 600;
	color: var(--be-ink);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.be_chip-link svg {
	color: var(--be-copper-ink);
}

a.be_chip-link:hover,
.be_chip-link--link:hover {
	background: var(--be-petrol);
	border-color: var(--be-petrol);
	color: var(--be-white);
}

a.be_chip-link:hover svg {
	color: var(--be-copper);
}

.be_stars {
	display: inline-flex;
	gap: 2px;
	color: #e7a93b;
}

/* Key facts: value over label, two or four across. */
.be_facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 1px;
	margin: 0;
	border-radius: var(--be-r-card);
	overflow: hidden;
	background: var(--be-line);
	border: 1px solid var(--be-line);
}

.be_facts > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
	background: var(--be-white);
}

.be_facts dt {
	font-size: 18px;
	font-weight: 700;
	color: var(--be-petrol);
}

.be_facts dd {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--be-muted);
}

/* Numbered journey: four steps joined by a line. */
.be_journey {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 32px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: be-journey;
}

.be_journey li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 72px;
	counter-increment: be-journey;
}

.be_journey li::before {
	content: counter(be-journey);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--be-petrol);
	color: var(--be-copper);
	font-size: 20px;
	font-weight: 700;
	z-index: 1;
}

.be_journey li::after {
	content: "";
	position: absolute;
	top: 26px;
	left: 64px;
	right: -16px;
	border-top: 1.5px dashed var(--be-tint-3);
}

.be_journey li:last-child::after {
	display: none;
}

.be_journey h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--be-petrol);
}

.be_journey p {
	line-height: 1.65;
	color: var(--be-text);
}

@media (max-width: 1040px) {
	.be_journey li::after {
		display: none;
	}
}


/* 8g. Shared page pieces ------------------------------------------------
   Used by the homepage and the inner pages: centred section heads, practice
   cards (with the map switcher), the FAQ split and the inner-page hero.
   ---------------------------------------------------------------------- */
.be_shead--center {
	justify-content: center;
	text-align: center;
}

.be_shead--center .be_shead-text {
	align-items: center;
}

.be_place {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 26px;
	border-radius: var(--be-r-card);
	background: var(--be-white);
	border: 1.5px solid var(--be-line);
}

.be_place.be_mapcard--on {
	border-color: var(--be-copper);
	box-shadow: 0 0 0 3px var(--be-tint), var(--be-shadow-card);
}

.be_place-title {
	font-size: 21px;
	font-weight: 700;
	color: var(--be-petrol);
}

.be_place-address,
.be_place-hours {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-style: normal;
	line-height: 1.5;
	color: var(--be-text);
}

.be_place-address svg,
.be_place-hours svg {
	flex: none;
	margin-top: 2px;
	color: var(--be-copper-ink);
}

.be_place-type {
	font-size: 14px;
	color: var(--be-muted);
}

.be_place-links {
	display: flex;
	gap: 22px;
	padding-top: 6px;
}

.be_home-faq-grid {
	display: grid;
	grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.5fr);
	gap: clamp(32px, 5vw, 96px);
	align-items: start;
}

.be_home-faq-intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: sticky;
	top: 120px;
}

@media (max-width: 960px) {
	.be_home-faq-grid {
		grid-template-columns: 1fr;
	}

	.be_home-faq-intro {
		position: static;
	}
}


/* Inner-page hero: a sand panel holding the breadcrumb, the H1 and, on the
   right, whatever the page needs most (quick contact, a photo …). */
.be_pghero {
	padding-top: 22px;
	padding-bottom: 24px;
}

.be_pghero-panel {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 40px);
	padding: clamp(24px, 3.4vw, 56px) clamp(24px, 4vw, 64px) clamp(32px, 4vw, 64px);
	border-radius: var(--be-r-panel-lg);
	background: var(--be-band);
}

.be_pghero-row {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: center;
}

.be_pghero-text {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.be_pghero-h1 {
	font-size: clamp(34px, 3.6vw, 56px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--be-petrol);
}

.be_pghero-lead {
	max-width: 56ch;
}

/* No image: one text column, capped for reading. */
.be_pghero-row--solo {
	grid-template-columns: minmax(0, 860px);
}

/* Calls + image inside the content pages' hero. */
.be_cnt-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 4px;
}

.be_cnt-media {
	margin: 0;
	border-radius: var(--be-r-img);
	overflow: hidden;
	background: #0b1416;
	box-shadow: 0 30px 60px rgba(16, 38, 43, 0.18);
}

.be_cnt-media .be_img,
.be_cnt-media .be_ph {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

@media (max-width: 960px) {
	.be_pghero-row {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.be_cnt-actions .be_btn {
		width: 100%;
	}
}

@media (max-width: 600px) {
	.be_pghero {
		padding-top: 14px;
	}

	.be_pghero-panel {
		padding: 22px 18px 26px;
		border-radius: 26px;
	}
}


/* 9. Forms -------------------------------------------------------------
   Styles Contact Form 7 output. The recommended CF7 template (see
   inc/forms.php) wraps every control in `<div class="be_field">` with a real
   <label>, matching the design.
   ---------------------------------------------------------------------- */
.be_form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--be-ground);
	color: var(--be-ink);
	border-radius: var(--be-r-panel);
	padding: 40px;
}

/* .be_form is the panel; the rows live inside CF7's own <form>, which needs
   the same column rhythm or each control ends up flush against the next label. */
.be_form form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* CF7's hidden inputs are a zero-height fieldset — as a flex item it would
   still add a 22px gap at the top of the form. */
.be_form .hidden-fields-container {
	display: none;
}

/* CF7 injects its spinner after the submit button at run time. In a flex column
   that is an empty 23px row between the button and whatever follows, so the
   button carries the submitting state instead. */
.be_form .wpcf7-spinner {
	display: none;
}

.be_form form.submitting .be_btn[type="submit"] {
	opacity: 0.6;
	pointer-events: none;
}

.be_form--plain {
	background: transparent;
	padding: 0;
	border-radius: 0;
}

.be_field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* reference/Epikoinonia.html puts name / phone / e-mail / practice in a
   two-column grid and keeps subject and message full width. */
.be_fieldgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 20px;
}

.be_field > label,
.be_form label:not(.be_check) {
	font-size: var(--be-small);
	font-weight: 700;
}

.be_form input[type="text"],
.be_form input[type="email"],
.be_form input[type="tel"],
.be_form input[type="url"],
.be_form input[type="date"],
.be_form input[type="search"],
.be_form select,
.be_form textarea {
	width: 100%;
	min-height: 52px;
	padding: 0 16px;
	border: 1.5px solid #d6c8b4;
	border-radius: var(--be-r-field);
	background: var(--be-white);
	font-size: 16px;
	font-weight: 500;
	color: var(--be-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.be_form textarea {
	min-height: 132px;
	padding: 14px 16px;
	line-height: 1.6;
	resize: vertical;
}

.be_form select {
	padding: 0 16px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--be-copper-ink) 50%), linear-gradient(135deg, var(--be-copper-ink) 50%, transparent 50%);
	background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 44px;
}

.be_form input:hover,
.be_form select:hover,
.be_form textarea:hover {
	border-color: var(--be-copper-ink);
}

.be_form input:focus,
.be_form select:focus,
.be_form textarea:focus {
	border-color: var(--be-copper-ink);
	box-shadow: 0 0 0 3px rgba(142, 90, 46, 0.14);
}

.be_form .be_field > label {
	color: var(--be-ink);
}

/* The acceptance row reads as a sentence, not as a form control. */
.be_form .wpcf7-acceptance .wpcf7-list-item {
	font-size: var(--be-small);
	line-height: 1.5;
	color: var(--be-text);
}

.be_form ::placeholder {
	color: var(--be-muted);
	opacity: 1;
}

/* Acceptance checkbox row. */
.be_form .wpcf7-acceptance .wpcf7-list-item,
.be_check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--be-muted);
}

/* CF7 wraps the box and the sentence in a <label> inside .wpcf7-list-item, so
   the flex row has to be the label: on the list item the second line of the
   sentence runs back under the checkbox instead of under the first line. */
.be_form .wpcf7-acceptance .wpcf7-list-item > label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.be_form .wpcf7-acceptance .wpcf7-list-item-label {
	flex: 1 1 auto;
}

.be_form input[type="checkbox"] {
	width: 22px;
	height: 22px;
	min-height: 0;
	margin-top: 2px;
	flex: none;
	accent-color: var(--be-copper-ink);
	appearance: auto;
}

.be_form .wpcf7-list-item-label a,
.be_check a {
	color: var(--be-copper-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* CF7 feedback. */
.be_form .wpcf7-not-valid-tip {
	font-size: 13px;
	font-weight: 600;
	color: var(--be-warn);
}

.be_form .wpcf7-not-valid {
	border-color: var(--be-warn);
}

.be_form .wpcf7-response-output {
	margin: 0;
	padding: 14px 18px;
	border: 1.5px solid var(--be-line-2);
	border-radius: var(--be-r-field);
	font-size: 15px;
	background: var(--be-white);
}

/* CF7 always prints the response container; only show it once it says something. */
.be_form .wpcf7-response-output:empty {
	display: none;
}

.be_form .wpcf7-spinner {
	margin: 0 auto;
}

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

.be_form .be_btn {
	align-self: flex-start;
	min-height: 56px;
	padding: 0 32px;
	font-size: 17px;
}

@media (max-width: 520px) {
	.be_form .be_btn {
		align-self: stretch;
	}
}

@media (max-width: 860px) {
	.be_form {
		padding: 28px 22px;
	}
}


/* 10. Breadcrumb ------------------------------------------------------- */
.be_breadcrumb-nav {
	font-size: 14px;
	color: var(--be-muted);
}

.be_breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.be_breadcrumb li + li::before {
	content: "/";
	margin-right: 10px;
	color: var(--be-line-2);
}

.be_breadcrumb [aria-current="page"] {
	color: var(--be-ink);
	font-weight: 700;
}

.be_dark .be_breadcrumb-nav {
	color: var(--be-on-dark-mute);
}

.be_dark .be_breadcrumb [aria-current="page"] {
	color: var(--be-on-dark);
}


/* 10b. Page hero and closing CTA band ----------------------------------
   Shared by templates/page-content.php, templates/page-katigoria.php and
   single.php: the light-blue band under the header (breadcrumb, eyebrow,
   H1, lead, CTAs, byline) and the navy band that closes the page.
   ---------------------------------------------------------------------- */
.be_phero {
	padding-top: 32px;
	padding-bottom: 64px;
	background: var(--be-band);
	border-bottom: 1px solid var(--be-line);
}

/* Two equal columns: the same flex-basis and the same grow on both means the
   text can never take more than half the row, whatever the viewport. They wrap
   to one column below roughly 900px. `.be_split > *` caps its children at
   760px by default, which would have left both columns short of half a wide
   row — here the cap is literally half. */
.be_phero-row {
	gap: clamp(36px, 3.4vw, 80px);
}

/* Only once the row is wide enough to hold the two columns side by side: their
   400px bases plus the gap need ~836px of row, which a 1040px viewport is the
   first to give once a scrollbar is accounted for. Below that the cap would
   halve each column while the two are still stacked. 1040 is also where the
   theme already switches the navigation. */
@media (min-width: 1040px) {
	.be_phero-row {
		--be-split-max: 50%;
	}
}

.be_phero-text {
	flex: 1 1 400px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.be_phero-h1 {
	font-size: clamp(40px, 5.4vw, 68px);
	letter-spacing: -0.02em;
	line-height: 1.06;
}

.be_phero-lead {
	max-width: 560px;
	font-size: 20px;
	color: var(--be-text);
}

.be_phero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.be_phero-author {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.be_phero-media {
	flex: 1 1 400px;
	min-width: 0;
}

/* Half of a 2 200px row is an 1 100px image; at 4/3 that is 825px tall beside
   roughly 450px of text. The ratio shapes it on normal screens, this stops it
   growing past the text on very wide ones. */
.be_phero-media .be_img,
.be_phero-media .be_ph {
	max-height: 520px;
}


/* The closing CTA band carries its own space above it. It used to have none and
   relied on the section before it, which works until that section has a
   background — then the navy block sits flush against the strip's edge with the
   padding hidden inside it, and the band looks glued on. */
.be_ctaband-row {
	padding-top: 72px;
	padding-bottom: 96px;
}

@media (max-width: 860px) {
	.be_ctaband-row {
		padding-top: 48px;
	}
}

.be_ctaband-title {
	font-size: clamp(30px, 3.4vw, 44px);
}



/* 10c. Long-form layout --------------------------------------------------
   The content column + sticky sidebar shared by templates/page-content.php
   and single.php, with the blocks that sit inside `.be_prose`, the author
   box, the sidebar cards and the related-article cards.
   ---------------------------------------------------------------------- */
/* --- content + sidebar --------------------------------------------------- */
.be_content-main {
	padding-top: 72px;
	padding-bottom: 40px;
}

/* The article row uses the whole width: no centring, no 760px cap from
   `.be_split > *`, and the prose column takes everything the sidebar does not.
   The text size grows with it — a 1 700px column at 17px is about 190
   characters a line, which nobody reads; at 20px it is nearer 140. */
.be_content-cols {
	--be-split-max: none;
	justify-content: flex-start;
	gap: clamp(40px, 3.2vw, 80px);
	align-items: flex-start;
}

.be_content-body {
	flex: 1 1 640px;
	min-width: 0;
	max-width: none;
	font-size: clamp(17px, 0.78vw, 20px);
}

.be_content-aside {
	flex: 0 1 360px;
	min-width: 280px;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 24px;
	/* A long page gives a long contents list; the column still has to fit the
	   screen, or its lower half (the CTA card) can never be reached. */
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--be-line-2) transparent;
	padding-right: 4px;
}

@media (max-width: 1040px) {
	.be_content-aside {
		position: static;
		max-width: none;
	}
}

/* Blocks inside .be_prose keep the prose rhythm but break out of its measure
   where the design shows them full column width. */
.be_prose > .be_keybox,
.be_prose > .be_callout,
.be_prose > .be_statband,
.be_prose > .be_cardgrid,
.be_prose > .be_tablewrap,
.be_prose > .be_faq,
.be_prose > .be_authorbox-card {
	max-width: none;
}

.be_prose > .be_keybox {
	gap: 14px;
	background: var(--be-white);
	border: 1px solid var(--be-line);
	border-radius: var(--be-r-card);
	padding: 28px 32px;
	margin-bottom: 48px;
}

.be_prose > .be_keybox ul {
	gap: 10px;
}

.be_prose > .be_callout {
	gap: 16px;
	border-radius: 20px;
	padding: 24px 28px;
}

.be_callout-title {
	display: block;
	margin-bottom: 6px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--be-ink);
}

.be_callout-body p {
	font-size: 17px;
}

/* --- FAQ inside the content --------------------------------------------- */
.be_faq--prose {
	margin-bottom: 8px;
}

.be_faq--prose summary {
	padding: 22px 0;
	font-size: 19px;
}

.be_faq--prose .be_faq-answer {
	padding-bottom: 24px;
	font-size: 17px;
}

/* --- author box ---------------------------------------------------------- */
.be_authorbox-card {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 56px;
}

.be_authorbox-photo {
	flex: none;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
}

.be_authorbox-photo img,
.be_authorbox-ph {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	padding: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.be_authorbox-body {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.be_authorbox-name {
	font-family: var(--be-font-head);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
}


/* --- sidebar ------------------------------------------------------------- */
.be_content-cta {
	gap: 16px;
	border-radius: var(--be-r-card);
	padding: 28px;
}

.be_content-cta-title {
	font-size: 26px;
	line-height: 1.2;
}

.be_content-cta-text {
	font-size: 16px;
	color: var(--be-on-dark-soft);
}

.be_content-cta-phone {
	font-weight: 700;
	font-size: 20px;
	text-align: center;
}

/* --- the rest of the category, at the end of a condition page ------------ */
.be_content-cat {
	padding-top: 72px;
	/* Its own tinted strip needs a foot; the white gap down to the band is the
	   band's padding-top. */
	padding-bottom: 56px;
}

.be_sibcard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 76px;
	padding: 18px 22px;
	background: var(--be-white);
	border: 1px solid var(--be-line);
	border-radius: var(--be-r-card);
	color: var(--be-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.be_sibcard:hover {
	border-color: var(--be-tint-3);
	box-shadow: var(--be-shadow-card);
	transform: translateY(-2px);
}

.be_sibcard-title {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
}

.be_sibcard > svg {
	flex: none;
	color: var(--be-copper-ink);
	transition: transform 0.15s ease;
}

.be_sibcard:hover > svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.be_sibcard,
	.be_sibcard > svg {
		transition: none;
	}

	.be_sibcard:hover {
		transform: none;
	}

	.be_sibcard:hover > svg {
		transform: none;
	}
}


/* --- related articles ---------------------------------------------------- */
.be_content-related {
	padding-top: 48px;
	padding-bottom: 0;
}

.be_content-related-title {
	font-size: clamp(28px, 3vw, 38px);
}

.be_relcard {
	display: flex;
	flex-direction: column;
	background: var(--be-white);
	border: 1px solid var(--be-line);
	border-radius: var(--be-r-card);
	overflow: hidden;
}

.be_relcard-media .be_img,
.be_relcard-media .be_ph,
.be_relcard-media .be_postart {
	border-radius: 0;
}

/* Article without a photo (bethree_child_post_image()): sand tile, monogram,
   the joint as a soft ghost word. */
.be_postart {
	position: relative;
	display: flex;
	align-items: flex-start;
	width: 100%;
	aspect-ratio: var(--be-ph-ratio, 16 / 10);
	padding: clamp(18px, 2vw, 28px);
	border-radius: var(--be-r-img);
	background: radial-gradient(120% 90% at 100% 100%, var(--be-mint) 0%, transparent 60%), var(--be-band);
	overflow: hidden;
	container-type: inline-size;
}

.be_postart-mark {
	width: 46px;
	height: auto;
	opacity: 0.9;
}

.be_postart-word {
	position: absolute;
	right: 0.06em;
	bottom: -0.17em;
	/* Sized by the tile, not the viewport: the word fits a 6-column card and
	   the wide featured card alike. */
	font-size: 26cqi;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(26, 57, 63, 0.09);
	white-space: nowrap;
}

.be_relcard-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
}

.be_relcard-date {
	font-size: 13px;
	font-weight: 600;
	color: var(--be-muted);
}

.be_relcard-title {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
}


/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1040px) {
	.be_content-main {
		padding-top: 56px;
	}
}

@media (max-width: 860px) {
	.be_phero {
		padding-top: 24px;
		padding-bottom: 40px;
	}

	.be_content-main {
		padding-top: 40px;
	}

	.be_content-cols {
		gap: 40px;
	}

	.be_content-related {
		padding-top: 32px;
		padding-bottom: 48px;
	}

	.be_ctaband-row {
		padding-bottom: 56px;
	}

	.be_prose > .be_keybox {
		padding: 24px 22px;
		margin-bottom: 32px;
	}

	.be_prose > .be_callout {
		padding: 22px;
	}

	.be_authorbox-card {
		padding: 24px 22px;
	}
}


/* --- Google reviews (Trustindex, injected by main.js) ---
   The widget keeps its own stylesheet; only the box around it is ours. Until
   the stylesheet lands the widget's inline style keeps it at height 0, so the
   box reserves the space itself and the section does not jump when it loads. */
.be_reviews {
	width: 100%;
}

.be_reviews:not(.be_reviews--on) {
	/* Measured: 242px for the rating block beside the carousel, roughly 400 once
	   they stack. Close enough that loading the widget shifts nothing visible. */
	min-height: 260px;
}

@media (max-width: 700px) {
	.be_reviews:not(.be_reviews--on) {
		min-height: 420px;
	}
}

/* Trustindex sets its own font stack; the site's is better and already loaded. */
.be_reviews .ti-widget {
	margin: 0;
	font-family: var(--be-font-body) !important;
}

/* Trustindex's «read more» grey is 3.9:1 on white; this one is 5.3:1. */
.be_reviews .ti-widget .ti-read-more-active {
	color: #6b6b6b !important;
}


/* 11. Header and navigation -------------------------------------------
    A floating bar: the sticky <header> is transparent and carries the side
    gutter, the white rounded .be_header-bar inside it is the visible bar.
    Desktop ≥1101px: logo + nav (CSS-only dropdowns) + phone + CTA.
    ≤1100px: nav in the burger panel; phone becomes a round button.
    Both navigations are fed by the same `primary` menu (inc/nav.php).
   -------------------------------------------------------------------- */
.be_site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	padding: 14px calc(var(--be-pad-x) - 24px) 0;
	/* main.js adds --hidden on the way down and removes it on the way up. */
	transition: transform 0.28s ease;
	will-change: transform;
	pointer-events: none;
}

.be_site-header > * {
	pointer-events: auto;
}

.be_site-header--hidden {
	transform: translateY(calc(-100% - 8px));
}

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

@media (max-width: 782px) {
	.admin-bar .be_site-header {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.be_site-header {
		transition: none;
	}
}

html {
	scroll-padding-top: 120px;
}

@media (max-width: 860px) {
	html {
		scroll-padding-top: 92px;
	}
}

.be_header-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 80px;
	padding: 0 14px 0 24px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border: 1px solid var(--be-line);
	border-radius: 22px;
	box-shadow: 0 10px 30px rgba(16, 38, 43, 0.06);
	transition: box-shadow 0.2s ease;
}

.be_site-header--stuck .be_header-bar {
	box-shadow: 0 14px 34px rgba(16, 38, 43, 0.12);
}

/* --- logo: monogram + live text --- */
.be_logo {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
	color: var(--be-petrol);
}

.be_logo-mark {
	display: block;
	width: 64px;
	height: auto;
	flex: none;
}

.be_logo-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding-left: 14px;
	border-left: 1px solid var(--be-line-2);
}

.be_logo-name {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.1;
	white-space: nowrap;
}

.be_logo-role {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--be-muted);
	white-space: nowrap;
}

/* --- desktop nav --- */
.be_nav {
	display: flex;
	min-width: 0;
	margin: 0 auto;
}

.be_nav-list {
	display: flex;
	align-items: stretch;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 600;
}

.be_nav-item {
	position: relative;
	display: flex;
	align-items: center;
}

.be_nav-link {
	display: block;
	padding: 10px 14px;
	border-radius: var(--be-r-pill);
	white-space: nowrap;
	color: var(--be-ink);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.be_nav-link:hover {
	background: var(--be-tint);
	color: var(--be-petrol);
}

.be_nav-link--on {
	background: var(--be-petrol);
	color: var(--be-white);
}

.be_nav-link--on:hover {
	background: var(--be-panel);
	color: var(--be-white);
}

.be_dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: -10px;
	z-index: 20;
	margin: 0;
	padding: 14px 0 0;
	list-style: none;
	min-width: 260px;
}

.be_nav-item--dd:hover > .be_dropdown,
.be_nav-item--dd:focus-within > .be_dropdown {
	display: block;
}

.be_dropdown-inner {
	background: var(--be-white);
	border: 1px solid var(--be-line);
	border-radius: 18px;
	padding: 10px;
	box-shadow: var(--be-shadow-float);
}

.be_dropdown-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.be_dropdown-list a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.be_dropdown-list a:hover,
.be_dropdown-list a.be_dd--on {
	background: var(--be-tint);
	color: var(--be-copper-ink);
}

.be_nav-item--mega {
	position: static;
}

.be_dropdown--mega {
	left: 0;
	right: 0;
	min-width: 0;
}

.be_dropdown--mega .be_dropdown-inner {
	padding: 22px 18px;
	max-height: calc(100vh - 130px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.be_dropdown-list--mega {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px 8px;
	align-items: start;
}

.be_dd-col {
	min-width: 0;
}

/* Two or three columns open as a panel under their item, not across the bar. */
.be_nav-item--mega.be_nav-item--cols {
	position: relative;
}

.be_nav-item--cols > .be_dropdown--mega {
	left: -20px;
	right: auto;
	width: max-content;
	min-width: 480px;
}

.be_nav-item--cols .be_dropdown-list--mega {
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	grid-template-columns: none;
	gap: 8px 22px;
}

/* Condition names are short enough to keep on one line in a column panel. */
.be_nav-item--cols .be_dropdown-list--mega .be_dd-sub a {
	white-space: nowrap;
}

.be_dd-head--label {
	display: block;
	padding: 6px 14px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--be-copper-ink);
	border-bottom: 1px solid var(--be-line-3);
	margin-bottom: 4px;
}

.be_dropdown-list--mega .be_dd-sub a {
	color: var(--be-ink);
	font-weight: 600;
}

/* «Όλες οι παθήσεις →»: the last row of a dropdown, set apart. */
.be_dd-all > a {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--be-line-3);
	border-radius: 0 0 10px 10px;
	color: var(--be-copper-ink);
}

.be_dd-all > a::after {
	content: " →";
}

.be_dd-head {
	color: var(--be-petrol);
	font-weight: 700;
	margin-bottom: 2px;
}

.be_dd-sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.be_dropdown-list--mega .be_dd-sub a {
	padding: 7px 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--be-muted);
	white-space: normal;
	line-height: 1.35;
}

/* --- phone + CTA --- */
.be_header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.be_header-phone {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--be-petrol);
}

.be_header-phone-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--be-tint);
	color: var(--be-copper-ink);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.be_header-phone:hover .be_header-phone-icon {
	background: var(--be-copper);
	color: var(--be-ink);
}

.be_header-phone-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.be_header-phone-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--be-muted);
}

.be_header-phone-number {
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
}

.be_header-cta {
	min-height: 50px;
	padding: 0 24px;
	font-size: 15px;
}

/* --- mobile burger panel --- */
.be_mnav {
	display: none;
}

.be_burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--be-petrol);
	color: var(--be-white);
	cursor: pointer;
	list-style: none;
}

.be_burger::-webkit-details-marker {
	display: none;
}

.be_burger .be_i-close {
	display: none;
}

.be_mnav[open] > .be_burger .be_i-close {
	display: block;
}

.be_mnav[open] > .be_burger .be_i-bars {
	display: none;
}

.be_mpanel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 10px);
	background: var(--be-white);
	border: 1px solid var(--be-line);
	border-radius: 22px;
	box-shadow: 0 28px 40px rgba(16, 38, 43, 0.18);
	padding: 8px 22px 22px;
	max-height: calc(100vh - 120px);
	max-height: calc(100dvh - 120px);
	overflow-y: auto;
}

.be_mitem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	font-size: 18px;
	font-weight: 700;
	color: var(--be-ink);
	border-bottom: 1px solid var(--be-line-3);
	list-style: none;
	cursor: pointer;
}

.be_mitem::-webkit-details-marker {
	display: none;
}

.be_mitem--on {
	color: var(--be-copper-ink);
}

.be_mitem > svg {
	flex: none;
	color: var(--be-copper-ink);
	transition: transform 0.2s ease;
}

.be_mgroup[open] > .be_mitem > svg {
	transform: rotate(45deg);
}

.be_msubwrap {
	padding: 4px 0 12px;
	border-bottom: 1px solid var(--be-line-3);
}

.be_msub {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding-left: 14px;
	font-size: 16px;
	font-weight: 600;
	color: var(--be-muted);
}

.be_msub:hover,
.be_msub--on {
	color: var(--be-copper-ink);
}

.be_msub-head {
	display: block;
	padding: 14px 0 4px 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--be-copper-ink);
}

.be_msub--all {
	font-weight: 700;
	color: var(--be-petrol);
}

.be_msub--toggle {
	justify-content: space-between;
	gap: 12px;
	font-weight: 700;
	color: var(--be-ink);
	list-style: none;
	cursor: pointer;
}

.be_msub--toggle::-webkit-details-marker {
	display: none;
}

.be_msub--toggle > svg {
	flex: none;
	color: var(--be-copper-ink);
	transition: transform 0.2s ease;
}

.be_mgroup--2[open] > .be_msub--toggle > svg {
	transform: rotate(45deg);
}

.be_msubwrap--2 {
	padding: 0 0 8px;
	border-bottom: 0;
	border-left: 2px solid var(--be-line-3);
	margin-left: 14px;
}

.be_msub--3 {
	min-height: 42px;
	padding: 6px 0 6px 14px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

.be_mcta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 22px;
}

.be_mcta .be_btn {
	width: 100%;
}

/* Logo + 6 menu items + phone number + CTA need ~1600px. Below that the
   phone keeps only its round icon, below 1340 the menu tightens, and below
   1180 it moves into the burger panel. */
@media (max-width: 1600px) {
	.be_header-phone-text {
		display: none;
	}

	.be_nav-link {
		padding: 10px 11px;
	}
}

@media (max-width: 1480px) {
	.be_logo-role {
		display: none;
	}
}

@media (max-width: 1340px) {
	.be_nav-link {
		padding: 10px 9px;
	}

	.be_nav-list {
		gap: 0;
		font-size: 14.5px;
	}

	.be_logo-role {
		display: none;
	}
}

@media (max-width: 1180px) {
	.be_logo-role {
		display: block;
	}

	.be_nav {
		display: none;
	}

	.be_mnav {
		display: block;
	}

	.be_header-actions {
		gap: 10px;
	}

	.be_header-bar {
		padding-right: 12px;
	}
}

@media (max-width: 860px) {
	.be_site-header {
		padding: 10px 10px 0;
	}

	.be_header-bar {
		min-height: 66px;
		padding: 0 10px 0 14px;
		border-radius: 18px;
	}

	.be_logo {
		gap: 10px;
	}

	.be_logo-mark {
		width: 50px;
	}

	.be_logo-text {
		padding-left: 10px;
	}

	.be_logo-name {
		font-size: 16px;
	}

	.be_logo-role {
		font-size: 11px;
	}

	/* The call bar at the foot of the screen carries the CTA on a phone. */
	.be_header-cta {
		display: none;
	}

	.be_header-phone-icon {
		width: 42px;
		height: 42px;
		background: var(--be-copper);
		color: var(--be-ink);
	}
}

@media (max-width: 400px) {
	.be_logo-role {
		display: none;
	}
}


/* 12. Footer ---------------------------------------------------------- */

/* Closing CTA band (every page but the homepage and the contact page). It
   keeps the normal section padding on top: the last section above it may end
   on a coloured band (the CV's «Έρευνα» panel), and with no padding the two
   panels would almost touch. */
.be_endcta {
	padding-top: var(--be-pad-y);
}

.be_endcta-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px 40px;
	padding: clamp(32px, 4vw, 56px);
	border-radius: var(--be-r-panel-lg);
	background: var(--be-band);
	border: 1px solid var(--be-line);
}

.be_endcta-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 760px;
}

.be_endcta-title {
	font-size: var(--be-h2-sm);
}

.be_endcta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.be_site-footer {
	position: relative;
	background: var(--be-deep);
	color: var(--be-on-dark-soft);
	padding: 80px var(--be-pad-x) 36px;
	border-radius: var(--be-r-panel-lg) var(--be-r-panel-lg) 0 0;
	overflow: hidden;
}

/* A large, faint monogram-free «MS» echo in the corner keeps the dark field
   from reading as a flat block, without an extra image request. */
.be_site-footer::after {
	content: "MS";
	position: absolute;
	right: -0.06em;
	bottom: -0.32em;
	font-size: clamp(180px, 22vw, 380px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(244, 236, 226, 0.035);
	pointer-events: none;
}

.be_footer-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.be_footer-cols {
	display: grid;
	grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(170px, 1fr)) minmax(240px, 1.3fr);
	gap: 48px 40px;
}

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

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

.be_footer-brand {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.be_footer-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--be-on-dark);
}

.be_footer-logo img {
	width: 62px;
	height: auto;
}

.be_footer-logo span {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: 14px;
	border-left: 1px solid var(--be-on-dark-line);
}

.be_footer-logo strong {
	font-size: 19px;
	font-weight: 700;
}

.be_footer-logo small {
	font-size: 13px;
	color: var(--be-on-dark-mute);
}

.be_footer-about {
	font-size: var(--be-small);
	line-height: 1.7;
	max-width: 42ch;
}

.be_footer-social {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.be_footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1.5px solid var(--be-on-dark-line);
	color: var(--be-on-dark);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.be_footer-social a:hover {
	background: var(--be-copper);
	border-color: var(--be-copper);
	color: var(--be-ink);
}

.be_footer-title {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--be-copper);
	margin-bottom: 8px;
}

.be_footer-nav {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: var(--be-small);
}

.be_footer-nav ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.be_footer-nav a,
.be_footer-addr,
.be_footer-legal a {
	transition: color 0.15s ease;
}

.be_footer-nav a:hover,
.be_footer-addr:hover,
.be_footer-legal a:hover {
	color: var(--be-copper);
}

.be_footer-contact {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: var(--be-small);
}

.be_footer-loc {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-style: normal;
	line-height: 1.6;
}

.be_footer-loc strong {
	color: var(--be-on-dark);
	font-weight: 700;
}

.be_footer-phone,
.be_footer-email {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	color: var(--be-on-dark);
	font-weight: 700;
	overflow-wrap: anywhere;
	transition: color 0.15s ease;
}

.be_footer-phone {
	font-size: 20px;
	margin-top: 4px;
}

.be_footer-phone svg,
.be_footer-email svg {
	color: var(--be-copper);
	flex: none;
}

.be_footer-phone:hover,
.be_footer-email:hover {
	color: var(--be-copper);
}

.be_footer-bottom {
	border-top: 1px solid var(--be-on-dark-line);
	padding-top: 28px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 28px;
	font-size: 13px;
	color: var(--be-on-dark-mute);
}

.be_footer-credit {
	color: var(--be-on-dark);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-left: 6px;
}

.be_footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 860px) {
	.be_site-footer {
		padding-top: 60px;
		border-radius: 28px 28px 0 0;
	}
}


/* 13. Call bar (≤860px) and side tab (≥1280px) ------------------------ */
.be_callbar {
	display: none;
}

@media (max-width: 860px) {
	.be_callbar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		gap: 10px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.97);
		border-top: 1px solid var(--be-line);
		box-shadow: 0 -8px 24px rgba(16, 38, 43, 0.1);
	}

	.be_callbar .be_btn {
		flex: 1 1 0;
		min-height: 50px;
		padding: 0 10px;
		font-size: 16px;
	}

	body {
		padding-bottom: 74px;
	}
}

.be_sidetab {
	display: none;
}

@media (min-width: 1280px) {
	.be_sidetab {
		position: fixed;
		right: 0;
		top: 50%;
		z-index: 25;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 18px 12px;
		writing-mode: vertical-rl;
		transform: translateY(-50%) rotate(180deg);
		border-radius: 0 14px 14px 0;
		background: var(--be-petrol);
		color: var(--be-on-dark);
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.04em;
		box-shadow: var(--be-shadow-float);
		transition: background-color 0.15s ease, padding 0.15s ease;
	}

	.be_sidetab svg {
		transform: rotate(90deg);
		color: var(--be-copper);
	}

	.be_sidetab:hover {
		background: var(--be-panel);
		padding-left: 16px;
	}
}


/* Reduced motion: keep the layout, drop the movement. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	.be_btn:hover,
	.be_card:hover {
		transform: none;
	}
}


/* 8e. Click-to-load video ------------------------------------------------
   The doctor's YouTube videos, migrated from the live pages. Nothing is
   requested from YouTube until the visitor presses play (GDPR + the LCP),
   and the embed then uses youtube-nocookie.com.
   ---------------------------------------------------------------------- */
.be_video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--be-r-card);
	overflow: hidden;
	background: var(--be-petrol);
}

.be_video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.be_video-play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	padding: 20px;
	border: 0;
	background: repeating-linear-gradient(135deg, #21454c 0 14px, #1a393f 14px 28px);
	color: var(--be-on-dark);
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.be_video-play:hover .be_video-icon {
	transform: scale(1.06);
	background: var(--be-cta);
}

.be_video-play:hover .be_video-icon::after {
	border-left-color: var(--be-cta-on);
}

/* The play triangle, drawn with borders so there is no icon request. */
.be_video-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.be_video-icon::after {
	content: "";
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--be-white);
	margin-left: 4px;
}

.be_video-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.be_video-label small {
	font-size: 12px;
	font-weight: 400;
	color: var(--be-on-dark-mute);
}

/* A hero with no photograph is a single text column, not a half-empty row.
   It must still be allowed to shrink, or on a phone it overflows the viewport
   and the whole page scrolls sideways. */
.be_phero-row--solo .be_phero-text {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 820px;
}


/* 14. Scroll reveal --------------------------------------------------------
    A section carrying `data-be-reveal` fades its direct children in, slightly
    staggered, the first time it comes into view (main.js adds .be_in). The
    hidden state only applies when `html.be_js` is set — see
    bethree_child_js_class() — so a visitor without JavaScript, or one whose
    main.js never arrives, gets the page fully visible.

    The hero is deliberately not marked: it holds the LCP image and must paint
    at once.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.be_js [data-be-reveal] > * {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 0.7, 0.3, 1);
	}

	.be_js [data-be-reveal] > *:nth-child(2) {
		transition-delay: 0.09s;
	}

	.be_js [data-be-reveal] > *:nth-child(3) {
		transition-delay: 0.18s;
	}

	.be_js [data-be-reveal] > *:nth-child(n + 4) {
		transition-delay: 0.27s;
	}

	.be_js [data-be-reveal].be_in > * {
		opacity: 1;
		transform: none;
	}
}

/* Video poster: YouTube's own thumbnail for the video being embedded, served
   from our own uploads so nothing reaches i.ytimg.com before the visitor asks
   for the video. Three of the animations have no thumbnail on YouTube, so the
   striped card stays as the fallback — hence .be_video--poster rather than a
   blanket rule. */
.be_video--poster .be_video-play {
	position: relative;
	padding: 0;
	background: var(--be-petrol);
	aspect-ratio: 16 / 9;
	justify-content: flex-end;
	align-items: stretch;
	overflow: hidden;
}

.be_video-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.be_video--poster .be_video-play:hover .be_video-thumb {
	transform: scale(1.04);
}

/* The play circle sits over the middle of the frame, the caption over a scrim
   at the foot, so the title stays readable on any thumbnail. */
.be_video--poster .be_video-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(26, 57, 63, 0.72);
	backdrop-filter: blur(2px);
}

.be_video--poster .be_video-play:hover .be_video-icon {
	transform: translate(-50%, -50%) scale(1.06);
}

.be_video--poster .be_video-label {
	position: relative;
	z-index: 1;
	padding: 48px 18px 16px;
	text-align: left;
	background: linear-gradient(to top, rgba(12, 30, 34, 0.92) 30%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.be_video-thumb,
	.be_video--poster .be_video-play:hover .be_video-thumb {
		transition: none;
		transform: none;
	}
}