/* ==========================================================================
   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 (kalochristianakis.gr)
   Global stylesheet, loaded on every page. Per-page styles live in
   assets/css/pages/{key}.css and load only there (see inc/enqueue.php).

   Values come from the design handoff: DESIGN.md (tokens, type scale, radii,
   rhythm) and reference/*.html (the final markup). The only deliberate
   difference: the reference centres content in a 1240px `.wrap`, while BeThree
   sections are full-width blocks with padding only. `--be-pad-x: 100px` makes a
   1440px viewport render exactly the reference's 1240px column; wider screens
   simply get a wider column.

    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
   ========================================================================== */


/* 1. Fonts ----------------------------------------------------------------
   Self-hosted, subset to Greek + Latin (assets/fonts, built with fontTools):
   one variable font for everything.
   - Manrope variable 400–800: body, UI and headings

   The design called for Noto Serif Display in the headings, but it is a display
   serif — hairline-thin strokes and a very high contrast — and in Greek, at the
   sizes this site uses it, it reads as tiring rather than editorial. Headings
   now use Manrope at 700, which also removes 53 KB of fonts and one preload.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/manrope-var.woff2") format("woff2-variations"),
		url("../fonts/manrope-var.woff2") format("woff2");
}


/* 2. Tokens --------------------------------------------------------------- */
:root {
	/* Colours (DESIGN.md → Χρώματα) */
	--be-navy: #142959;
	--be-sky: #61b7e5;
	--be-blue: #1e6fa8; /* sky derivative that passes contrast on light grounds */
	--be-footer: #0d1b45;
	--be-panel: #1e3a78;
	--be-ground: #f4f7fa;
	--be-band: #e8f3fb;
	--be-strip: #fafcfe; /* trust / review strips */
	--be-tint: #eaf3fb;
	--be-tint-2: #dceef9;
	--be-tint-3: #cfe8f7;
	--be-clay: #f0ddd3; /* «Επείγουσα χειρουργική» card */
	--be-ink: #0f1b3a;
	--be-text: #2b3d62;
	--be-muted: #4b5b7c;
	--be-line: #dae3ec;
	--be-line-2: #d0dbe6;
	--be-line-3: #e4ebf2;
	/* CTA. Sky blue needs DARK text: white on #61b7e5 is 2.2:1, navy is 6.3:1. */
	--be-cta: #61b7e5;
	--be-cta-hover: #4aabde;
	--be-cta-on: #142959;
	/* The fill alone is only 2.1:1 against a white or tinted ground, under the
	   3:1 WCAG asks of a control's edge; this darker rim draws it at 3.4:1
	   without touching the fill. Same 1.5px as .be_btn--line, and box-sizing is
	   border-box, so the button keeps its height. */
	--be-cta-edge: #2f92cc;

	/* The old CTA terracotta stays on for what it was also doing: warnings,
	   form errors and the «Επείγουσα χειρουργική» card, where warm is the
	   point and blue would read as «fine, carry on». */
	--be-warn: #b5431f;
	--be-warn-bg: #fbede6;
	--be-white: #fff;

	/* On navy / footer grounds */
	--be-on-dark: #eaf3fb;
	--be-on-dark-soft: #c5daee;
	--be-on-dark-mute: #a8c4e0;
	--be-on-dark-line: rgba(234, 243, 251, 0.18);

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

	/* DESIGN.md gives H2 as clamp(30px,3.4vw,46px); the reference markup, which
	   README calls the source of truth for CSS, uses clamp(34px,4vw,52px) on
	   every main section heading and the smaller value only on the narrower
	   bands (process, second opinion). Both are kept. */
	--be-h1: clamp(38px, 5vw, 64px);
	--be-h2: clamp(34px, 4vw, 52px);
	--be-h2-sm: clamp(30px, 3.4vw, 44px);
	--be-h3: 28px;
	--be-h4: 20px;
	--be-body-size: 17px;
	--be-lead: 19px;
	--be-small: 15px;

	/* Shapes (DESIGN.md → Σχήματα και ρυθμός) */
	--be-r-card: 24px;
	--be-r-card-lg: 28px;
	--be-r-panel: 32px;
	--be-r-panel-lg: 36px;
	--be-r-img: 28px;
	--be-r-field: 14px;
	--be-r-pill: 999px;

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

	/* Section padding: every section carries .be_row; header/footer set their own.
	   100px sides so a 1440px viewport gives the reference's 1240px column, then
	   the gutters grow slowly so a 2K screen keeps its proportions instead of
	   either capping the content or stretching it edge to edge. 2560 → 166px. */
	--be-pad-x: clamp(100px, 6.5vw, 240px);
	--be-pad-y: 96px;
	--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 {
	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-blue);
	outline-offset: 3px;
	border-radius: 2px;
}

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

[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--navy {
	background: var(--be-navy);
}

.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-blue);
}

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

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

/* 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-blue);
}

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

.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-sky);
}

.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-blue);
}

.be_prose a:not(.be_btn):not(.be_card) {
	color: var(--be-blue);
	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-sky);
	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--navy {
	background: var(--be-navy);
	color: var(--be-white);
}

.be_btn.be_btn--line {
	border: 1.5px solid var(--be-navy);
	color: var(--be-navy);
	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-navy);
}

.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-blue);
}

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

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

/* 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-blue);
}

/* 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-blue);
}

/* 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-sky);
	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-sky);
	}
}

@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-sky);
}

.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--navy {
	background: var(--be-navy);
	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(15, 27, 58, 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-blue);
}

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

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

/* 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-blue);
}

/* 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-blue);
	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-navy);
}

.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-blue);
	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-navy);
	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-navy);
	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-blue);
	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-blue);
}

@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-blue);
	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-blue);
}

.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-blue);
}

.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-blue);
}

/* 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-blue);
	color: var(--be-blue);
}

.be_chip--on,
.be_chip[aria-current] {
	background: var(--be-navy);
	border-color: var(--be-navy);
	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-blue);
	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-blue);
}

.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-sky);
}

/* 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-blue);
	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-blue);
}


	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);
}



/* 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 #c3d0df;
	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-blue) 50%), linear-gradient(135deg, var(--be-blue) 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-blue);
}

.be_form input:focus,
.be_form select:focus,
.be_form textarea:focus {
	border-color: var(--be-blue);
	box-shadow: 0 0 0 3px rgba(30, 111, 168, 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-blue);
	appearance: auto;
}

.be_form .wpcf7-list-item-label a,
.be_check a {
	color: var(--be-blue);
	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-blue);
	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 {
	border-radius: 0;
}

.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 -------------------------------------------
    Desktop ≥1041px: logo + nav with CSS-only dropdowns.
    ≤1040px: nav hidden, burger <details> panel instead.
    Both are fed by the same `primary` menu (inc/nav.php).
   -------------------------------------------------------------------- */
.be_site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--be-white);
	border-bottom: 1px solid var(--be-line);
	/* main.js adds --hidden on the way down and removes it on the way up, so the
	   menu is one small scroll away anywhere on a 28,000px condition page. */
	transition: transform 0.28s ease, box-shadow 0.2s ease;
	will-change: transform;
}

.be_site-header--stuck {
	box-shadow: 0 10px 28px rgba(15, 27, 58, 0.08);
}

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

/* The admin bar is fixed above everything; without this the header hides under it. */
.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;
	}
}

/* Anchor links (the table of contents, #iatreia, #form) must not land under the
   sticky bar. */
html {
	scroll-padding-top: 116px;
}

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

/* Landline button in the bar. It is the third element after the logo and the
   menu, so it only appears once the bar is wide enough to hold all three:
   measured, the menu and logo alone need 1 100px of the 1 240px a 1 440px
   viewport gives, and the button needs another 190. */
.be_header-phone {
	display: none;
	flex: none;
	min-height: 46px;
	padding: 0 20px;
	font-size: 15px;
	gap: 8px;
}

@media (min-width: 1400px) {
	.be_header-phone {
		display: inline-flex;
	}
}

.be_header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: nowrap;
	min-height: 96px;
	padding: 0 var(--be-pad-x);
}

.be_logo {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
}

.be_logo img {
	display: block;
	height: 64px;
	width: auto;
	max-width: 100%;
}

.be_logo-text {
	font-family: var(--be-font-head);
	font-size: 24px;
	font-weight: 700;
}

/* --- desktop nav --- */
.be_nav {
	display: flex;
}

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

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

.be_nav-link {
	display: block;
	padding: 34px 0;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.be_nav-link:hover {
	color: var(--be-blue);
}

.be_nav-link--on {
	color: var(--be-blue);
	border-bottom-color: var(--be-sky);
}

/* The dropdown starts flush under the trigger; its transparent padding-top is
   the visual gap, and .be_dropdown-inner draws the panel (so moving the pointer
   from the link into the panel never leaves the hover area). */
.be_dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 20;
	margin: 0;
	padding: 8px 0 0;
	list-style: none;
	min-width: 250px;
}

.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 {
	background: var(--be-tint);
	color: var(--be-blue);
}

/* --- mega panel (a dropdown whose children have children) ---
   The trigger is position:static so the panel resolves against .be_site-header
   and can span the full content width: seven categories of up to eleven links
   never fit in a column anchored to a 90px wide menu item. */
.be_nav-item--mega {
	position: static;
}

.be_dropdown--mega {
	left: var(--be-pad-x);
	right: var(--be-pad-x);
	min-width: 0;
}

.be_dropdown--mega .be_dropdown-inner {
	padding: 22px 18px;
	/* A short laptop viewport cannot show 2 rows of columns at once. */
	max-height: calc(100vh - 130px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.be_dropdown-list--mega {
	display: grid;
	/* 168px is what lets all seven categories sit on one row inside the 1360px
	   content column; narrower viewports drop to four and then three. */
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 20px 8px;
	align-items: start;
}

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

.be_dd-head {
	color: var(--be-navy);
	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);
	/* Condition titles are long; a column wraps them instead of overflowing. */
	white-space: normal;
	line-height: 1.35;
}

.be_dropdown-list a.be_dd--on {
	color: var(--be-blue);
	background: var(--be-tint);
}

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

.be_burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1.5px solid var(--be-navy);
	color: var(--be-navy);
	cursor: pointer;
	list-style: none;
}

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

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

.be_mnav[open] > .be_burger {
	background: var(--be-navy);
	color: var(--be-white);
}

.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: 100%;
	background: var(--be-white);
	border-top: 1px solid var(--be-line);
	box-shadow: 0 28px 40px rgba(15, 27, 58, 0.18);
	padding: 4px var(--be-pad-x) 24px;
	max-height: calc(100vh - 80px);
	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-blue);
}

.be_mitem > svg {
	flex: none;
	color: var(--be-blue);
	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-blue);
}

/* --- third level in the burger panel ---
   The category row is the <summary> that expands it; the category page itself is
   the first link inside («Επισκόπηση»), so every URL stays reachable. */
.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-blue);
	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-left: 14px;
	font-size: 15px;
	font-weight: 500;
	/* Condition titles wrap on a phone instead of being cut off. */
	line-height: 1.3;
	padding-top: 6px;
	padding-bottom: 6px;
}

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

.be_mcta .be_btn {
	width: 100%;
}

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

	.be_mnav {
		display: block;
	}
}

@media (max-width: 860px) {
	.be_header-bar {
		min-height: 76px;
	}

	.be_logo img {
		height: 48px;
	}
}


/* 12. Footer ---------------------------------------------------------- */
.be_site-footer {
	background: var(--be-footer);
	color: var(--be-on-dark-soft);
	padding: 72px var(--be-pad-x) 40px;
}

.be_footer-inner {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.be_footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 40px;
}

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

.be_footer-logo {
	display: block;
	align-self: flex-start;
	max-width: 100%;
	background: var(--be-white);
	border-radius: 18px;
	padding: 14px 18px;
}

.be_footer-logo img {
	display: block;
	height: 52px;
	width: auto;
	max-width: 100%;
}

/* Before/after case photographs — two across on desktop, one on a phone, so a
   pair can be compared side by side without zooming. */
.be_prinmeta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(16px, 1.6vw, 28px);
	margin: 28px 0 8px;
	max-width: 1100px;
}

.be_prinmeta-fig {
	margin: 0;
	border-radius: var(--be-radius, 16px);
	overflow: hidden;
	background: var(--be-tint);
}

.be_prinmeta-fig img {
	display: block;
	width: 100%;
	height: auto;
}

.be_prinmeta-fig figcaption {
	padding: 12px 16px 14px;
	font-size: var(--be-small);
	line-height: 1.45;
	color: var(--be-muted);
}

.be_footer-address {
	margin: 0;
	font-style: normal;
	font-size: var(--be-small);
	line-height: 1.7;
}

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

/* The address lines are links to each practice's map, but four bold lines read
   as a list of headings - keep them the weight they were as plain text and let
   the underline on hover say they are clickable. */
.be_footer-address a.be_footer-addr {
	font-weight: 400;
	text-decoration: none;
	transition: color 0.18s ease;
}

.be_footer-addr:hover,
.be_footer-addr:focus-visible {
	color: var(--be-sky);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* The e-mail is the one footer address line that is read, not scanned: keep it
   on its own line and underlined, so it reads as the mailto link it is. */
.be_footer-email {
	display: inline-block;
	margin-top: 6px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.be_footer-email:hover {
	color: var(--be-sky);
}

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

.be_footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	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-white);
	border-color: var(--be-white);
	color: var(--be-navy);
}

.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: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.be_footer-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--be-sky);
	margin-bottom: 6px;
}

.be_footer-bottom {
	border-top: 1px solid rgba(234, 243, 251, 0.16);
	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-bottom a {
	color: inherit;
}

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

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


/* 13. Call bar (≤860px) ----------------------------------------------- */
.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 16px 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(15, 27, 58, 0.1);
	}

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

	body {
		padding-bottom: 72px;
	}
}


/* 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-navy);
}

.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, #1b3160 0 14px, #142959 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-navy);
	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(20, 41, 89, 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(10, 20, 45, 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;
	}
}