/* =============================================================
   Kolibianakis IVF — Powder-Blue redesign (May 2026)
   Source-of-truth: home-page-kolibianakis-ivf/project/Homepage.jsx,
   PALETTES.bluePowder (default tweak in Homepage Redesign.html).
     bg #eaf0f5 · bg2 #dbe5ee · surface #f3f7fa
     ink #1c2a3a · ink2 #42526a · ink3 #8392a8
     accent #6f93b5 · accentDeep #4a6b8c
     line #c4d2e0 · deep #2b4761
   The earlier forest/ivory/brass tokens are kept as variable NAMES
   (--c-ivory, --c-forest, --c-brass …) so every existing rule still
   resolves; only the values flip. Site-wide effect.
   ============================================================= */

:root {
	/* Surfaces */
	--c-ivory:        #eaf0f5;   /* powder-blue page bg */
	--c-ivory-soft:   #dbe5ee;   /* alternate section bg */
	--c-forest:       #1c2a3a;   /* deep navy ink + footer / dark sections */
	--c-forest-deep:  #14202d;   /* deeper navy — copyright bar etc. */
	--c-teal:         #2b4761;   /* "deep" — used by tool + final CTA bg */

	/* Inks */
	--c-text:         #1c2a3a;   /* primary body text */
	--c-text-soft:    #42526a;   /* secondary text, paragraphs */
	--c-text-mute:    #8392a8;   /* muted captions */
	--c-text-on-dark: #f3f7fa;   /* text on deep-navy sections (tool, final, footer) */

	/* Accent */
	--c-brass:        #6f93b5;   /* the powder-blue accent (italics, eyebrows, rules) */
	--c-brass-soft:   #4a6b8c;   /* accentDeep — hover / borders */

	/* Lines */
	--c-rule:         #c4d2e0;
	--c-rule-soft:    rgba(196, 210, 224, 0.55);

	/* Direct powder-blue tokens (used by new sections only) */
	--c-surface:      #f3f7fa;   /* card / calculator bg */
	--c-deep:         #2b4761;   /* deep-navy section bg */
	--c-accent:       #6f93b5;   /* alias for --c-brass */
	--c-accent-deep: #4a6b8c;

	/* Typography */
	/* Spectral first — uniform Greek/Latin design, body-text-friendly.
	   Cormorant Garamond kept as fallback for any place its display
	   character is still desired.  [SK 2026-05-13 — sitewide fix for
	   Greek/Latin font inconsistency in Cormorant Garamond.] */
	--ff-serif:       "Source Serif 4", "Cormorant Garamond", "Times New Roman", Georgia, serif;
	--ff-sans:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Sizes — from the React source. clamp() gives responsive scaling. */
	--fs-eyebrow:     0.75rem;       /* 12px (was 11) */
	--fs-eyebrow-lg:  0.8125rem;     /* 13px (was 12) */
	--fs-small:       0.875rem;      /* 14px (was 13) */
	--fs-body:        1rem;          /* 16px */
	--fs-lead:        1.1875rem;     /* 19px */
	--fs-h4:          clamp(1.4rem, 2vw, 1.75rem);   /* 22–28px */
	--fs-h3:          clamp(1.75rem, 2.4vw, 2rem);   /* 28–32px */
	--fs-h2:          clamp(2.4rem, 4.5vw, 4rem);    /* 38–64px */
	--fs-display:     clamp(3.4rem, 7vw, 6rem);      /* 54–96px (hero) */
	--fs-mega:        clamp(2.8rem, 5vw, 4.5rem);    /* 45–72px (service numerals) */

	/* Letter-spacing */
	--ls-eyebrow:     0.22em;
	--ls-tight:       -0.01em;
	--ls-tighter:     -0.02em;

	/* Line-heights */
	--lh-display:     1.05;
	--lh-tight:       1.1;
	--lh-snug:        1.25;
	--lh-body:        1.6;

	/* Spacing scale */
	--space-xs:       0.5rem;
	--space-sm:       1rem;
	--space-md:       2rem;
	--space-lg:       4rem;
	--space-xl:       6rem;
	--space-2xl:      8rem;

	/* Layout */
	--container-max:  1280px;        /* 1440 minus 80×2 gutter */
	--gutter:         clamp(1.25rem, 5vw, 5rem);

	/* Gradient panels — re-mapped to the powder-blue palette using the
	   four Photo variants from Homepage.jsx (a/b/c/d). Variable names
	   kept so existing markup with .is-forest/.is-moss/.is-ivory/.is-smoke
	   keeps rendering. */
	--panel-forest:   linear-gradient(155deg, #dbe5ee 0%, #6f93b5 60%, #2b4761 100%);  /* variant a */
	--panel-moss:     linear-gradient(155deg, #f3f7fa 0%, #6f93b5 70%, #4a6b8c 100%);  /* variant b */
	--panel-ivory:    linear-gradient(155deg, #eaf0f5 0%, #dbe5ee 50%, #6f93b5 100%);  /* variant d */
	--panel-smoke:    linear-gradient(160deg, #2b4761 0%, #1c2a3a 100%);                /* variant c */
	--panel-overlay:  radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.32), transparent 65%);
}

/* Scope all redesign rules to body.kr-redesign so they don't leak to
   other pages until the user is ready to roll the identity site-wide. */

body.kr-redesign {
	background: var(--c-ivory);
	color: var(--c-text);
	font-family: var(--ff-sans) !important;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
}

/* Astra + Elementor have higher-specificity font-family rules (e.g.
   .entry-content h2, body.elementor-page h2) that override our class-based
   selectors. Brute-force the typography override site-wide on the redesign
   template via !important. The only place this matters is heading typography
   on this single page template, so the !important is contained. */
body.kr-redesign,
body.kr-redesign p,
body.kr-redesign span,
body.kr-redesign li,
body.kr-redesign a,
body.kr-redesign div { font-family: var(--ff-sans) !important; }

body.kr-redesign * { box-sizing: border-box; }
body.kr-redesign img,
body.kr-redesign svg { max-width: 100%; display: block; }

/* Container utility */
.kr-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

body.kr-redesign h1,
body.kr-redesign h2,
body.kr-redesign h3,
body.kr-redesign h4,
body.kr-redesign .kr-display,
body.kr-redesign .kr-h1,
body.kr-redesign .kr-h2,
body.kr-redesign .kr-h3,
body.kr-redesign .kr-h4,
body.kr-redesign .kr-scaffold__title,
body.kr-redesign .kr-quote,
/* Removed .kr-footer__tagline from this selector group — that rule was
   forcing color: var(--c-text) (dark slate) on the tagline, which is
   invisible on the dark-navy footer background. The dedicated rule at
   .kr-footer__tagline below now properly applies its --c-ivory-soft color
   and margin-top.  [SK 2026-05-09] */
body.kr-redesign .kr-footer__brand,
body.kr-redesign .kr-header__brand,
body.kr-redesign .kr-mega {
	font-family: var(--ff-serif) !important;
	font-weight: 400;
	color: var(--c-text);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	margin: 0;
}

.kr-display {
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-tighter);
}
.kr-h2      { font-size: var(--fs-h2); line-height: var(--lh-tight); }
.kr-h3      { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.kr-h4      { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.kr-mega    { font-size: var(--fs-mega); font-style: italic; color: var(--c-brass); }

/* Italic emphasis = brass — used for "Φροντίδα.", "καταψύξω;", "γονεϊκότητα", "εξατομικευμένη", etc. */
.kr-em,
body.kr-redesign h1 em,
body.kr-redesign h2 em,
body.kr-redesign h3 em,
.kr-display em, .kr-h1 em, .kr-h2 em, .kr-h3 em {
	font-style: italic;
	color: var(--c-brass);
	font-weight: inherit;
}

/* Eyebrow — short uppercase letter-spaced caption preceded by a brass hairline.
   Matches the React component on lines 431–462. */
.kr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.85em;
	font-family: var(--ff-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--c-brass);
	margin: 0;
}
.kr-eyebrow::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--c-brass);
	flex-shrink: 0;
}
.kr-eyebrow.is-centered::after {
	content: "";
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--c-brass);
}
.kr-eyebrow.is-centered { justify-content: center; }
.kr-eyebrow.is-on-dark { color: var(--c-brass-soft); }
.kr-eyebrow.is-on-dark::before,
.kr-eyebrow.is-on-dark::after { background: var(--c-brass-soft); }

/* Lead paragraph */
.kr-lead {
	font-family: var(--ff-sans);
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--c-text-soft);
	max-width: 38ch;
	margin: 0;
}

/* Body paragraph */
.kr-p {
	font-family: var(--ff-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-text-soft);
	max-width: 60ch;
	margin: 0;
}

/* Pull quote — italic serif on a brass left border */
.kr-quote {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 1.4rem;
	line-height: 1.4;
	color: var(--c-text-soft);
	border-left: 2px solid var(--c-brass);
	padding-left: 1.4rem;
	margin: 0;
	max-width: 32ch;
}

/* Hairline rules */
.kr-rule {
	border: 0;
	border-top: 1px solid var(--c-rule);
	margin: 0;
}
.kr-rule.is-soft { border-top-color: var(--c-rule-soft); }

/* ----------------------------------------------------------- *
 *  Sections
 * ----------------------------------------------------------- */

.kr-section {
	padding-block: var(--space-2xl);
	position: relative;
}
.kr-section.is-tight { padding-block: var(--space-lg); }
.kr-section.is-soft  { background: var(--c-ivory-soft); }
.kr-section.is-on-dark {
	background: var(--c-forest);
	color: var(--c-text-on-dark);
}
.kr-section.is-on-dark h1,
.kr-section.is-on-dark h2,
.kr-section.is-on-dark h3,
.kr-section.is-on-dark .kr-display,
.kr-section.is-on-dark .kr-h2,
.kr-section.is-on-dark .kr-h3 { color: var(--c-text-on-dark); }
.kr-section.is-on-dark .kr-p,
.kr-section.is-on-dark .kr-lead { color: var(--c-text-on-dark); opacity: 0.85; }

/* ----------------------------------------------------------- *
 *  Buttons + links
 * ----------------------------------------------------------- */

.kr-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 1rem 1.6rem;
	font-family: var(--ff-sans);
	font-size: var(--fs-eyebrow-lg);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--c-forest);
	color: var(--c-text-on-dark);
	border: 1px solid var(--c-forest);
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	cursor: pointer;
}
.kr-btn:hover,
.kr-btn:focus {
	background: var(--c-teal);
	border-color: var(--c-teal);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(31, 42, 36, 0.18);
	color: var(--c-text-on-dark);
}
.kr-btn.is-cream {
	background: var(--c-ivory);
	color: var(--c-text);
	border-color: var(--c-ivory);
}
.kr-btn.is-cream:hover { background: var(--c-ivory-soft); color: var(--c-text); }
.kr-btn.is-ghost {
	background: transparent;
	color: var(--c-text);
	border-color: var(--c-rule);
}
.kr-btn.is-ghost:hover { background: var(--c-ivory-soft); color: var(--c-text); border-color: var(--c-text); }

.kr-link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	font-family: var(--ff-sans);
	font-size: var(--fs-eyebrow-lg);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-text);
	border-bottom: 1px solid var(--c-text);
	padding-bottom: 0.25em;
	transition: color 0.18s ease, border-bottom-color 0.18s ease;
}
.kr-link:hover { color: var(--c-brass); border-bottom-color: var(--c-brass); }
.kr-link.is-on-dark { color: var(--c-text-on-dark); border-bottom-color: var(--c-brass); }
.kr-link.is-on-dark:hover { color: var(--c-brass-soft); border-bottom-color: var(--c-brass-soft); }

/* ----------------------------------------------------------- *
 *  Gradient panels — used as hero accent and service backgrounds
 *  (no actual photos; the gradients ARE the image)
 * ----------------------------------------------------------- */

.kr-panel {
	min-height: 380px;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
}
.kr-panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--panel-overlay);
	pointer-events: none;
}
.kr-panel.is-forest { background: var(--panel-forest); }
.kr-panel.is-moss   { background: var(--panel-moss); }
.kr-panel.is-ivory  { background: var(--panel-ivory); }
.kr-panel.is-smoke  { background: var(--panel-smoke); }

/* ----------------------------------------------------------- *
 *  Header
 * ----------------------------------------------------------- */

.kr-header {
	background: var(--c-ivory);
	border-bottom: 1px solid var(--c-rule);
	font-family: var(--ff-sans);
}
.kr-header__util {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
	padding-block: 1.5rem;
}
.kr-header__contact {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 1.25rem;         /* 20px — phone reads at a glance */
	font-weight: 700;
	color: var(--c-text);
	letter-spacing: 0.01em;
}
.kr-header__contact a { color: inherit; text-decoration: none; }
.kr-header__contact a:hover { color: var(--c-brass); }
.kr-header__contact .kr-dot { color: var(--c-brass); opacity: 0.6; }
.kr-header__brand {
	font-family: var(--ff-serif);
	font-size: 1.85rem;        /* ~30px (was ~22) */
	font-weight: 600;          /* was 400 — more anchor */
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	flex: 0 0 auto;
	line-height: 1;
}
.kr-header__brand a { color: var(--c-text); text-decoration: none; display: inline-block; }
.kr-header__brand small {
	display: block;
	font-family: var(--ff-sans);
	font-size: 0.7rem;         /* ~11px (was ~9.6) */
	font-weight: 500;
	letter-spacing: 0.34em;
	color: var(--c-accent);    /* powder-blue accent — brings the subtitle forward */
	margin-top: 0.5rem;
}
/* Wordmark vs monogram swap.
   Default (desktop): full KOLIBIANAKIS wordmark visible, monogram hidden.
   ≤600px: hide wordmark, show K-IVF monogram. */
.kr-header__brand-full { display: inline-block; }
.kr-header__brand-mono { display: none; }
.kr-header__brand-mono svg {
	width: 44px;
	height: 44px;
	display: block;
	border-radius: 8px;
}
@media (max-width: 600px) {
	.kr-header__brand-full { display: none; }
	/* !important needed to override the inline style="display:none" safety
	   net on the mono span (added 2026-05-09 to prevent giant-K bug if CSS
	   fails to load). */
	.kr-header__brand-mono { display: inline-block !important; }
}
.kr-header__cta {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	justify-content: flex-end;
}
.kr-header__lang {
	font-size: var(--fs-eyebrow-lg);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-mute);
}
.kr-header__lang a { color: inherit; text-decoration: none; padding: 0 0.3em; }
.kr-header__lang a.is-current { color: var(--c-text); font-weight: 600; }
.kr-header__cta .kr-btn { padding: 0.85rem 1.4rem; }
.kr-header__nav {
	display: flex;
	justify-content: center;
	gap: clamp(1.2rem, 3vw, 3rem);
	padding-block: 1.1rem;
	border-top: 1px solid var(--c-rule-soft);
}
.kr-header__nav a {
	font-size: var(--fs-eyebrow-lg);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-text);
	transition: color 0.18s ease;
}
.kr-header__nav a:hover { color: var(--c-brass); }
.kr-header__nav a.is-current { color: var(--c-brass); }

/* ----------------------------------------------------------- *
 *  Footer
 * ----------------------------------------------------------- */

.kr-footer {
	background: var(--c-forest);
	color: var(--c-text-on-dark);
	padding-block: var(--space-xl) var(--space-md);
}
.kr-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--space-lg);
}
.kr-footer__brand {
	font-family: var(--ff-serif);
	font-size: 1.5rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-on-dark) !important;   /* override the heading-color rule */
}
.kr-footer__brand small {
	display: block;
	font-family: var(--ff-sans);
	font-size: 0.6rem;
	letter-spacing: 0.32em;
	color: var(--c-brass);
	margin-top: 0.5rem;
}
.kr-footer__tagline {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--c-ivory-soft);
	margin-top: 1.2rem;
	max-width: 30ch;
	line-height: 1.5;
}
body.kr-redesign .kr-footer h4 {
	font-family: var(--ff-sans) !important;
	font-size: var(--fs-eyebrow) !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: var(--ls-eyebrow) !important;
	color: var(--c-brass) !important;   /* powder-blue accent — was being overridden by Astra to dark navy */
	margin: 0 0 0.9rem !important;
}
.kr-footer p, .kr-footer a {
	font-size: 0.95rem;
	color: var(--c-text-on-dark);
	text-decoration: none;
	line-height: 1.7;
	margin: 0;
}
.kr-footer a:hover { color: var(--c-brass-soft); }
.kr-footer ul { list-style: none; padding: 0; margin: 0; }
.kr-footer__copyright {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid rgba(245, 240, 228, 0.12);
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-brass);
}

/* ============================================================= *
 *  HERO — Phase 2
 *  Two-column: left text content, right forest gradient panel.
 *  Sizes mirror DirectionC.jsx: 96px H1, 19px italic sub, 18px button.
 * ============================================================= */

.kr-hero {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}
.kr-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: stretch;
}
.kr-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.kr-hero__title {
	font-family: var(--ff-serif) !important;
	font-weight: 400 !important;
	font-size: clamp(2.4rem, 4.7vw, 4rem) !important;   /* up to 64px (was 76) */
	line-height: 1 !important;
	letter-spacing: -0.025em !important;
	margin: 32px 0 28px !important;
	color: var(--c-text);
}
.kr-hero__title em {
	font-style: italic;
	color: var(--c-brass);
}
/* Removed .kr-hero__keyword on 2026-05-11 — the standalone H2 caused a
   serif/cascade collision with Astra's `body.kr-redesign h2` rule and
   the hero ran to eight visual lines.  Keyword signal is now carried
   by the .kr-eyebrow line, which was rewritten to include "Εξωσωματική
   γονιμοποίηση" (EL) / "IVF" (EN). */
.kr-hero__sub {
	font-family: var(--ff-serif) !important;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1rem, 1.4vw, 1.1875rem);   /* 16–19px */
	line-height: 1.6;
	color: var(--c-text-soft);
	max-width: 480px;
	margin: 0 0 40px 0;
}
.kr-hero__ctas {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.kr-hero__link-alt {
	letter-spacing: 0.06em;
	text-transform: none;
	font-size: var(--fs-small);
	font-weight: 400;
	font-family: var(--ff-sans);
	border-bottom: 1px solid var(--c-brass);
	padding-bottom: 4px;
}

/* The hero panel — uniformly rounded corners + brass border + soft shadow.
   Every image on the home page (hero, services, bio) shares this same
   16px radius for consistency. */
.kr-hero__panel {
	width: 100%;
	max-width: 480px;
	aspect-ratio: 4 / 5;
	min-height: 0;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
	background: var(--c-ivory-soft);
	align-self: center;
	justify-self: end;
	box-shadow: 0 24px 60px -20px rgba(31, 42, 36, 0.28),
	            0 8px 20px -8px rgba(31, 42, 36, 0.12);
}
.kr-hero__portrait {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;   /* favour face on a tall portrait crop */
	display: block;
}
/* The bottom-darkening gradient is removed now that the doctor stats
   overlay is gone — the photo stands alone. The brass border ::after
   below still provides the editorial frame. */
.kr-hero__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;     /* follow the arch shape */
	box-shadow: inset 0 0 0 2px rgba(184, 146, 83, 0.55);
	pointer-events: none;
	z-index: 3;
}
.kr-hero__doc {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 32px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	color: var(--c-ivory);
	gap: 16px;
	z-index: 2;
}
.kr-hero__doc-l { min-width: 0; flex: 1 1 auto; }
.kr-hero__doc-title {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 14px;
	opacity: 0.85;
	margin-bottom: 4px;
	color: var(--c-ivory);
}
.kr-hero__doc-name {
	font-family: var(--ff-serif) !important;
	font-size: clamp(1.5rem, 2.4vw, 2rem) !important;   /* 24–32px */
	font-weight: 400 !important;
	letter-spacing: 0.02em !important;
	color: var(--c-ivory) !important;
	line-height: 1.1;
}
.kr-hero__doc-r {
	text-align: right;
	flex-shrink: 0;
}
.kr-hero__doc-stat {
	font-family: var(--ff-serif);
	font-size: clamp(2.5rem, 4.5vw, 4rem);   /* 40–64px */
	font-weight: 400;
	line-height: 1;
	color: var(--c-brass);
	letter-spacing: -0.01em;
}
.kr-hero__doc-stat sup {
	font-size: 0.45em;
	top: -0.4em;
	margin-left: 0.05em;
}
.kr-hero__doc-stat-label {
	font-family: var(--ff-sans);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.85;
	margin-top: 4px;
	color: var(--c-ivory);
	white-space: nowrap;
}

/* ============================================================= *
 *  SERVICES — Phase 3
 *  Three editorial blocks; alternating layouts (number-text-panel
 *  / panel-text-number). Numbers are giant brass italic Cormorant.
 *  Panels are CSS gradients (forest, moss, ivory).
 *  Sizes mirror DirectionC.jsx: H2 72px, service H3 44px, num 64px.
 * ============================================================= */

.kr-services {
	background: var(--c-ivory-soft);
	padding-block: clamp(2.5rem, 4.5vw, 4.5rem);
}
.kr-services__head {
	max-width: 800px;
	margin-bottom: clamp(0.75rem, 1.4vw, 1.25rem);   /* tight — H2 sits close to the cards */
}
.kr-services__h2 {
	font-family: var(--ff-serif) !important;
	font-size: clamp(1.9rem, 3.4vw, 3.2rem) !important;   /* up to 51px (was 60) */
	font-weight: 400 !important;
	line-height: 1.04 !important;
	letter-spacing: -0.018em !important;
	margin: 24px 0 0 !important;
	color: var(--c-text);
}
.kr-services__h2 em {
	font-style: italic;
	color: var(--c-brass);
}

.kr-services__list {
	display: flex;
	flex-direction: column;
}
.kr-service {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 64px;
	align-items: center;
	padding: 48px 0;
	border-top: 1px solid var(--c-rule);
}
.kr-service.is-flip {
	grid-template-columns: 1.2fr 1fr;
}
.kr-service__close {
	border-top: 1px solid var(--c-rule);
}
.kr-service__num {
	font-family: var(--ff-serif) !important;
	font-size: clamp(2.5rem, 4.5vw, 4rem) !important;   /* up to 64px */
	font-weight: 400 !important;
	font-style: italic !important;
	color: var(--c-brass) !important;
	line-height: 1;
}
.kr-service__num.is-right { text-align: right; }
.kr-service__copy {
	max-width: 480px;
}
.kr-service__title {
	font-family: var(--ff-serif) !important;
	font-size: clamp(1.8rem, 3vw, 2.75rem) !important;  /* up to 44px */
	font-weight: 400 !important;
	margin: 0 0 16px !important;
	line-height: 1.1 !important;
	letter-spacing: -0.015em !important;
	color: var(--c-text);
}
.kr-service__desc {
	font-family: var(--ff-sans);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--c-text-soft);
	margin: 0 0 20px;
}
.kr-service__link {
	display: inline-block;
	font-family: var(--ff-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text);
	text-decoration: none;
	border-bottom: 1px solid var(--c-brass);
	padding-bottom: 4px;
	transition: color 0.18s ease, border-bottom-color 0.18s ease;
}
.kr-service__link:hover {
	color: var(--c-brass);
}
.kr-service__panel {
	min-height: 300px;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 18px 40px -16px rgba(31, 42, 36, 0.22),
	            0 6px 14px -6px rgba(31, 42, 36, 0.10);
}
/* When a service panel has a real image, the image fills it; the gradient
   class still provides a fallback colour while the image loads. */
.kr-service__panel--has-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
	display: block;
}
/* When there's a photo, drop the radial highlight overlay (the photo
   stands on its own) but keep a 1px brass border that follows the
   rounded corners — same treatment as hero + bio panels. */
.kr-service__panel--has-img.kr-panel::after {
	background: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(184, 146, 83, 0.35);
	z-index: 3;
}

@media (max-width: 900px) {
	.kr-service,
	.kr-service.is-flip {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 32px 0;
	}
	.kr-service__num,
	.kr-service__num.is-right { text-align: left; }
	.kr-service__panel { min-height: 240px; }
	/* On mobile, reorder: number, copy, panel — ignore the flip */
	.kr-service.is-flip .kr-service__panel { order: 3; }
	.kr-service.is-flip .kr-service__copy  { order: 2; }
	.kr-service.is-flip .kr-service__num   { order: 1; }
}

/* ============================================================= *
 *  Διαπιστεύσεις strip — under hero, hairline above
 * ============================================================= */
.kr-creds {
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid var(--c-rule);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}
.kr-creds__label {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 18px;
	color: var(--c-text-mute);
	flex-shrink: 0;
}
.kr-creds__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.kr-creds__list li {
	font-family: var(--ff-sans);
	font-size: var(--fs-small);
	color: var(--c-text-soft);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 18px;
	white-space: nowrap;
}
.kr-creds__list li::before {
	content: "—";
	color: var(--c-brass);
	margin-right: 4px;
}

@media (max-width: 900px) {
	.kr-hero__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.kr-hero__panel { min-height: 360px; order: -1; }
	.kr-creds { flex-direction: column; align-items: flex-start; gap: 1rem; }
	.kr-creds__list { gap: 0.5rem; }
	.kr-creds__list li { padding: 0; }
	.kr-creds__list li::before { margin-right: 8px; }
}

/* ============================================================= *
 *  CALCULATOR — Phase 4
 *  Deep-forest section. Left text + pull quote, right ivory card
 *  containing age slider, 1/2/3 selector, result, calculate button.
 * ============================================================= */

.kr-tool {
	background: var(--c-forest);
	color: var(--c-text-on-dark);
	padding-block: clamp(2.5rem, 4.5vw, 4.5rem);
}
.kr-tool__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.kr-tool__copy { color: var(--c-text-on-dark); }
.kr-tool__h2 {
	font-family: var(--ff-serif) !important;
	font-size: clamp(2rem, 3.2vw, 2.9rem) !important;   /* 32 → 46 px */
	font-weight: 400 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.015em !important;
	margin: 24px 0 24px !important;
	color: var(--c-text-on-dark) !important;
	text-wrap: balance;
}
.kr-tool__h2 em { font-style: italic; color: var(--c-brass); }
.kr-tool__sub {
	font-family: var(--ff-sans);
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(245, 240, 228, 0.7);
	max-width: 460px;
	margin: 0 0 32px;
}
.kr-tool__quote {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 1rem;
	color: var(--c-brass);
	max-width: 420px;
	margin: 0;
	line-height: 1.5;
}

/* The white card */
.kr-tool__card {
	background: var(--c-ivory);
	color: var(--c-text);
	padding: clamp(2rem, 4vw, 3rem);
	border-radius: 4px;
}

.kr-tool__field { margin-bottom: 32px; }
.kr-tool__field-label {
	font-family: var(--ff-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-text-mute);
	margin-bottom: 16px;
}
.kr-tool__step {
	font-family: var(--ff-serif);
	font-style: italic;
	color: var(--c-brass);
	margin-right: 8px;
	letter-spacing: 0;
}
.kr-tool__age-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
	gap: 8px;
}
.kr-tool__age-num {
	font-family: var(--ff-serif) !important;
	font-size: clamp(3.5rem, 6vw, 6rem);   /* up to 96px */
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--c-text);
}
.kr-tool__age-unit {
	font-family: var(--ff-serif) !important;
	font-style: italic;
	font-size: 1.125rem;
	color: var(--c-text-mute);
}
.kr-tool__slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 2px;
	background: var(--c-rule);
	outline: none;
	margin: 4px 0;
	cursor: pointer;
	accent-color: var(--c-teal);
}
.kr-tool__slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--c-teal);
	cursor: pointer;
	border: 2px solid var(--c-ivory);
	box-shadow: 0 0 0 1px var(--c-teal);
}
.kr-tool__slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--c-teal);
	cursor: pointer;
	border: 2px solid var(--c-ivory);
}
.kr-tool__slider-axis {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: var(--c-text-mute);
	margin-top: 6px;
	letter-spacing: 0.1em;
}

/* 1/2/3 segmented selector */
.kr-tool__seg {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
}
.kr-tool__seg-btn {
	font-family: var(--ff-serif);
	font-size: 1.5rem;
	font-weight: 400;
	background: transparent;
	border: 1px solid var(--c-rule);
	padding: 18px 0;
	cursor: pointer;
	color: var(--c-text);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kr-tool__seg-btn:hover { border-color: var(--c-brass); }
.kr-tool__seg-btn.is-active {
	background: var(--c-forest);
	color: var(--c-ivory);
	border-color: var(--c-forest);
}

/* Result block */
.kr-tool__result {
	border-top: 1px solid var(--c-rule);
	padding-top: 20px;
	margin-bottom: 28px;
}
.kr-tool__result-label {
	font-family: var(--ff-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-text-mute);
	margin-bottom: 8px;
}
.kr-tool__result-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.kr-tool__result-num {
	font-family: var(--ff-serif);
	font-size: clamp(3rem, 5vw, 5rem);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.03em;
	color: var(--c-brass);
}
.kr-tool__result-unit {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 1.125rem;
	color: var(--c-text-mute);
}

.kr-tool__cta { width: 100%; justify-content: center; }

@media (max-width: 900px) {
	.kr-tool__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================================= *
 *  DOCTOR BIO — Phase 5
 *  Two-column. Left: name + brass-italic role + bio paragraph + CV link.
 *  Right: ivory/brass gradient panel for portrait.
 * ============================================================= */

.kr-bio {
	padding-block: clamp(2.5rem, 4.5vw, 4.5rem);
}
.kr-bio__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.kr-bio__name {
	font-family: var(--ff-serif) !important;
	font-size: clamp(3rem, 6vw, 5.5rem) !important;   /* up to 88px */
	font-weight: 400 !important;
	line-height: 0.98 !important;
	letter-spacing: -0.025em !important;
	margin: 24px 0 8px !important;
	color: var(--c-text);
}
.kr-bio__role {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: clamp(1.15rem, 1.6vw, 1.375rem);   /* up to 22px */
	color: var(--c-brass);
	margin: 0 0 32px;
	line-height: 1.35;
}
.kr-bio__body {
	font-family: var(--ff-sans);
	font-size: 1.0625rem;          /* 17px */
	line-height: 1.75;
	color: var(--c-text-soft);
	margin: 0 0 32px;
	max-width: 60ch;
}
.kr-bio__panel {
	/* Same 16px radius + soft shadow + brass border as the hero & service
	   panels so all images on the home page share one frame treatment. */
	width: 100%;
	max-width: 520px;
	aspect-ratio: 1 / 1;
	min-height: 0;
	border-radius: 16px;
	position: relative;
	overflow: hidden;
	margin-inline: auto;
	justify-self: end;
	box-shadow: 0 24px 60px -20px rgba(31, 42, 36, 0.28),
	            0 8px 20px -8px rgba(31, 42, 36, 0.12);
}
.kr-bio__portrait {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;   /* favour the face on a tall portrait crop */
	z-index: 1;
	display: block;
}
/* Slim brass border + soft inner shadow give the portrait an editorial
   "framed" feel against the surrounding ivory. */
.kr-bio__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(184, 146, 83, 0.35),
	            inset 0 60px 120px rgba(31, 42, 36, 0.10);
	pointer-events: none;
	z-index: 2;
}

@media (max-width: 900px) {
	.kr-bio__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.kr-bio__panel { min-height: 360px; order: -1; }
}

/* ============================================================= *
 *  ARTICLES — Phase 6
 *  "Από το ημερολόγιο." — header row + 5 numbered category cards.
 *  Cards in a 5-col grid with hairline gaps (1px gap on rule colour).
 * ============================================================= */

.kr-articles {
	padding-block: clamp(2.5rem, 4.5vw, 4.5rem);
}
.kr-articles__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	gap: 2rem;
	flex-wrap: wrap;
}
.kr-articles__h2 {
	font-family: var(--ff-serif) !important;
	font-size: clamp(1.85rem, 3.4vw, 3.25rem) !important;   /* up to 52px (was 64) */
	font-weight: 400 !important;
	line-height: 1.04 !important;
	letter-spacing: -0.018em !important;
	margin: 20px 0 0 !important;
	color: var(--c-text);
}

.kr-articles__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--c-rule);
}
.kr-article {
	background: var(--c-ivory);
	padding: 36px 24px 28px;
	display: flex;
	flex-direction: column;
	min-height: 240px;
	text-decoration: none;
	color: var(--c-text);
	transition: background 0.18s ease;
}
.kr-article:hover { background: var(--c-ivory-soft); }
.kr-article__title {
	font-family: var(--ff-serif) !important;
	font-size: 1.5rem !important;            /* 24px */
	font-weight: 400 !important;
	line-height: 1.15 !important;
	margin: 0 0 12px !important;
	color: var(--c-text);
	letter-spacing: -0.005em;
}
.kr-article__desc {
	font-family: var(--ff-sans);
	font-size: 0.8125rem;             /* 13px */
	line-height: 1.55;
	color: var(--c-text-soft);
	margin: 0;
	flex: 1;
}
.kr-article__meta {
	font-family: var(--ff-sans);
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--c-rule);
	font-size: 11px;
	color: var(--c-text-mute);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (max-width: 1100px) {
	.kr-articles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.kr-articles__grid { grid-template-columns: 1fr; }
	.kr-article { min-height: auto; padding: 28px 20px 24px; }
}

/* ============================================================= *
 *  FINAL CTA — Phase 7
 *  Deep teal section with brass radial overlay. Centered display
 *  H2, italic sub, cream CTA button.
 * ============================================================= */

.kr-final {
	background: var(--c-teal);
	color: var(--c-text-on-dark);
	text-align: center;
	padding-block: clamp(5rem, 10vw, 10rem);
	position: relative;
	overflow: hidden;
}
.kr-final::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, rgba(184, 146, 83, 0.18), transparent 70%);
	pointer-events: none;
}
.kr-final__inner {
	position: relative;
	z-index: 1;
}
.kr-final__h2 {
	font-family: var(--ff-serif) !important;
	font-size: clamp(2.3rem, 4.4vw, 4.25rem) !important;   /* up to 68px (was 88) */
	font-weight: 400 !important;
	line-height: 1.02 !important;
	letter-spacing: -0.022em !important;
	margin: 32px auto 32px !important;
	max-width: 1000px;
	color: var(--c-text-on-dark) !important;
}
.kr-final__h2 em { font-style: italic; color: var(--c-brass); }
.kr-final__sub {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: clamp(1.05rem, 1.5vw, 1.375rem);   /* up to 22px */
	color: rgba(245, 240, 228, 0.8);
	max-width: 640px;
	margin: 0 auto 48px;
	line-height: 1.5;
}
.kr-final__cta { padding: 20px 40px !important; }

/* ============================================================= *
 *  INNER PAGE CONTENT — for template-redesign.php
 *  Wraps Elementor or post_content with consistent typography
 *  + spacing matching the redesign identity. Pages keep their own
 *  Elementor layouts; we just tune the chrome around them.
 * ============================================================= */

.kr-page-content--prose {
	padding-block: clamp(3rem, 6vw, 5.5rem);
}
.kr-page-content__header {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.kr-page-content__title {
	font-family: var(--ff-serif) !important;
	font-weight: 400 !important;
	font-size: clamp(2.6rem, 5.5vw, 5rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	color: var(--c-text);
	margin: 0 !important;
	max-width: 18ch;
}

/* Article-single H1 — capped smaller and wider so long titles
   (e.g. congress reports with dates + location) read as 2-3 lines
   instead of 8. Scoped to body.kr-article-single so it doesn't
   touch the home hero or other page-content titles.
   Title-column rework 2026-05-11 — wider max-width + roman Cormorant
   (no italic) so news/article headlines read as news, not as feature-
   magazine theatre. [SEO audit round 8 — single-post redesign] */
.kr-article-single .kr-page-content__title {
	font-style: normal !important;
	font-weight: 500 !important;
	font-size: clamp(1.65rem, 2.6vw, 2.15rem) !important;
	line-height: 1.18 !important;
	letter-spacing: -0.008em !important;
	max-width: 48ch !important;
	text-wrap: balance;  /* 2026-05-13 — avoids orphan last word (e.g. "ωοθηκών") */
}
.kr-page-content__body {
	max-width: 720px;
	font-family: var(--ff-sans);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--c-text-soft);
}
.kr-page-content__body h2,
.kr-page-content__body h3,
.kr-page-content__body h4 {
	font-family: var(--ff-serif) !important;
	color: var(--c-text);
	letter-spacing: -0.01em;
	margin: 2.5em 0 0.6em;
	line-height: 1.2;
}
.kr-page-content__body h2 { font-size: clamp(1.75rem, 2.4vw, 2.4rem) !important; }
.kr-page-content__body h3 { font-size: clamp(1.4rem, 1.9vw, 1.85rem) !important; }
.kr-page-content__body h4 { font-size: 1.25rem !important; }
.kr-page-content__body p,
.kr-page-content__body li { margin-block: 0 1em; }
.kr-page-content__body a {
	color: var(--c-text);
	text-decoration: underline;
	text-decoration-color: var(--c-brass);
	text-underline-offset: 4px;
}
.kr-page-content__body a:hover { color: var(--c-brass); }
.kr-page-content__body blockquote {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 1.25rem;
	border-left: 2px solid var(--c-brass);
	padding-left: 1.4rem;
	margin: 2em 0;
	color: var(--c-text-soft);
}
.kr-page-content__body img { border-radius: 4px; margin-block: 1.5em; }

/* When Elementor is rendering the body, give it a small top buffer below
   the redesigned header. Elementor controls its own internal spacing. */
.kr-page-content--elementor {
	padding-block: clamp(1rem, 3vw, 3rem) 0;
}

/* ============================================================= *
 *  ARCHIVE — category / tag / date listings
 *  Editorial 2-column card grid with featured images.
 * ============================================================= */

.kr-archive__header {
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.kr-archive__title {
	font-family: var(--ff-serif) !important;
	font-size: clamp(2.6rem, 5vw, 4.5rem) !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
	color: var(--c-text);
	margin: 16px 0 0 !important;
}
.kr-archive__desc {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	color: var(--c-text-soft);
	margin: 1.2rem 0 0;
	max-width: 60ch;
	line-height: 1.5;
}

.kr-archive__list {
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
.kr-archive__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
	border-top: 1px solid var(--c-rule);
	padding-top: clamp(2rem, 4vw, 3.5rem);
}
.kr-archive__card {
	background: transparent;
}
.kr-archive__link {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease;
}
.kr-archive__link:hover {
	transform: translateY(-2px);
}
.kr-archive__thumb {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--c-ivory-soft);
	border-radius: 4px;
}
.kr-archive__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.6s ease;
}
.kr-archive__link:hover .kr-archive__thumb img {
	transform: scale(1.03);
}

/* Override for wide-banner featured images on category archive pages.
   Medical-studies (1351 EL / 1548 EN) has a 1317×417 banner with the
   "CLINICAL RESEARCH" label — forcing 4:3 + cover crops the words off.
   Use contain + dark blue letterbox so the banner appears in full. */
.kr-archive__link[href*="medical-studies"] .kr-archive__thumb {
	background: #0b1e3a;
}
.kr-archive__link[href*="medical-studies"] .kr-archive__thumb img {
	object-fit: contain;
}
.kr-archive__thumb--blank {
	min-height: 0;
	border-radius: 4px;
}
.kr-archive__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.kr-archive__date {
	font-family: var(--ff-sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-mute);
}
.kr-archive__h2 {
	font-family: var(--ff-serif) !important;
	font-size: clamp(1.2rem, 1.55vw, 1.55rem) !important;
	font-weight: 500 !important;
	line-height: 1.22 !important;
	letter-spacing: -0.005em !important;
	color: var(--c-text);
	margin: 0 !important;
	transition: color 0.18s ease;
}
.kr-archive__link:hover .kr-archive__h2 {
	color: var(--c-brass);
}
.kr-archive__excerpt {
	font-family: var(--ff-sans);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--c-text-soft);
	margin: 0;
}
.kr-archive__more {
	font-family: var(--ff-sans);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text);
	font-weight: 500;
	border-bottom: 1px solid var(--c-brass);
	padding-bottom: 4px;
	align-self: flex-start;
	margin-top: 0.6rem;
	transition: color 0.18s ease;
}
.kr-archive__link:hover .kr-archive__more {
	color: var(--c-brass);
}

/* Pagination — editorial restraint */
.kr-archive__nav {
	padding-block: clamp(2rem, 4vw, 3.5rem);
	border-top: 1px solid var(--c-rule);
	margin-top: clamp(3rem, 5vw, 4.5rem);
}
.kr-archive__nav .nav-links {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.kr-archive__nav .page-numbers {
	font-family: var(--ff-sans);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-text);
	text-decoration: none;
	padding: 0.6rem 1rem;
	border-bottom: 1px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.kr-archive__nav .page-numbers:hover {
	color: var(--c-brass);
	border-bottom-color: var(--c-brass);
}
.kr-archive__nav .page-numbers.current {
	color: var(--c-brass);
	border-bottom-color: var(--c-brass);
}
.kr-archive__empty {
	padding-block: clamp(3rem, 5vw, 5rem);
	text-align: center;
	color: var(--c-text-mute);
}

@media (max-width: 700px) {
	.kr-archive__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ============================================================= *
 *  SINGLE ARTICLE — editorial body styling
 *  Layered on top of .kr-page-content--prose. Adds article-only
 *  refinements (eyebrow link colour, date alignment, thumb).
 * ============================================================= */

.kr-article-body .kr-page-content__header {
	max-width: 720px;
	padding-inline: 0;            /* match the hero + body — no container gutter */
	text-align: center;            /* eyebrow + title centered above body — SK 2026-05-11 */
}
/* Title and eyebrow inside the header lose their own width caps so
   they align to the same left edge (x = header.left) as the hero
   image, the body, and the closing meta block.  [SK 2026-05-11] */
.kr-article-single .kr-page-content__title {
	max-width: none !important;
	text-align: center !important;
}
.kr-article-body .kr-page-content__header .kr-eyebrow {
	padding-inline: 0;
	text-align: center;
	justify-content: center;       /* in case the eyebrow uses flex internally */
}

/* Body container also drops its kr-container gutter so paragraphs
   start at the same left edge as the header and hero image.
   Without this the body text was inset 76 px (clamp-derived
   container padding) while everything else aligned to x = column
   left.  [SK 2026-05-11] */
.kr-article-body .kr-page-content__body { padding-inline: 0; }
/* Datestamp under the title — paired with the category eyebrow above
   the title to form a single editorial datestamp pattern.  Both share
   the tracked-brass voice used in the news-index and bio. */
.kr-article-meta {
	font-family: var(--ff-sans);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-text-mute);
	margin: 1.2rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.1rem;
	align-items: center;
}
.kr-article-meta__pub  { color: var(--c-text-mute); }
.kr-article-meta__rev  { color: var(--c-brass); font-weight: 600; }
.kr-article-meta__sep  { color: var(--c-rule); margin: 0 -0.35rem; }

/* Article footer matter — medical reviewer credit + publish/updated
   datestamp.  Lives at the very END of the article (after the bio
   card, before the back-to-archive nav) per SK 2026-05-11.  Visual
   register: quiet, brass-rule top, single-line credit + small
   tracked-uppercase datestamp beneath.  Reads as a closure note,
   not a banner. */
.kr-article-review {
	max-width: 720px;
	margin: 2.5rem auto 0;
	padding: 1.4rem 0 0;
	padding-inline: 0;
	border-top: 1px solid var(--c-rule);
}
.kr-article-review__credit {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
	font-size: 0.78rem !important;
	line-height: 1.5 !important;
	color: var(--c-text-soft) !important;
	letter-spacing: 0.02em;
}
.kr-article-review__icon {
	color: var(--c-brass);
	font-size: 1.05rem;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 0.05rem;
}
.kr-article-review__text { flex: 1; }
.kr-article-review__dates {
	margin: 0.9rem 0 0 !important;
	padding-left: 1.8rem !important;
	font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--c-text-mute) !important;
	font-weight: 600 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.1rem;
	align-items: center;
}
.kr-article-review__rev { color: var(--c-brass) !important; }
.kr-article-review__sep { color: var(--c-rule); }

/* "Back to archive" inline brass link under the bio block. */
.kr-article-nav {
	max-width: 720px;
	margin: 2.5rem auto 1rem;
	padding-top: 1.4rem;
	padding-inline: 0;
	border-top: 1px solid var(--c-rule);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.kr-article-nav a {
	font-family: var(--ff-sans) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase !important;
	color: var(--c-brass) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	transition: gap 0.25s ease;
}
.kr-article-nav a:hover { gap: 0.8em; }

/* Related articles strip — 3-card grid pulled from the same primary
   category as the current post.  Mirrors the news-index card voice
   for visual continuity.  Sized to match the body reading column
   (720px) so the page renders as a single editorial spine.
   [SK 2026-05-11 option A] */
body.kr-redesign .kr-related {
	max-width: 720px;
	margin: clamp(3rem, 5vw, 4.5rem) auto 1rem;
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
	border-top: 1px solid var(--c-rule);
}
body.kr-redesign .kr-related__heading {
	font-family: var(--ff-sans) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.26em !important;
	text-transform: uppercase !important;
	color: var(--c-brass) !important;
	font-weight: 600 !important;
	margin: 0 0 1.4rem !important;
}
body.kr-redesign .kr-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 2.4vw, 2.2rem);
	list-style: none;
	padding: 0;
	margin: 0;
}
body.kr-redesign .kr-related__item { margin: 0; padding: 0; }
body.kr-redesign a.kr-related__link,
body.kr-redesign a.kr-related__link:link,
body.kr-redesign a.kr-related__link:visited {
	display: block;
	color: var(--c-text) !important;
	text-decoration: none !important;
}
body.kr-redesign .kr-related__thumb {
	display: block;
	overflow: hidden;
	background: var(--c-ivory-soft);
	aspect-ratio: 4 / 3;
	margin-bottom: 0.9rem;
}
body.kr-redesign .kr-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.9);
	transition: transform 0.6s ease, filter 0.4s ease;
}
body.kr-redesign a.kr-related__link:hover .kr-related__thumb img {
	transform: scale(1.04);
	filter: saturate(1);
}

/* Override for wide-banner featured images in the related strip.
   Medical-studies (1351 EL / 1548 EN) has a 1317×417 banner with the
   "CLINICAL RESEARCH" label — forcing 4:3 + cover crops the words off.
   Use contain + dark background so the banner appears in full. */
body.kr-redesign a.kr-related__link[href*="medical-studies"] .kr-related__thumb {
	background: #0b1e3a;
}
body.kr-redesign a.kr-related__link[href*="medical-studies"] .kr-related__thumb img {
	object-fit: contain;
}
body.kr-redesign .kr-related__date {
	font-family: var(--ff-sans);
	font-size: 0.65rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-brass);
	font-weight: 600;
	margin: 0 0 0.4rem;
	display: block;
}
body.kr-redesign .kr-related__title {
	font-family: var(--ff-serif) !important;
	font-size: 1.1rem !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	color: var(--c-text) !important;
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.18s ease;
}
body.kr-redesign a.kr-related__link:hover .kr-related__title {
	color: var(--c-brass) !important;
}
@media (max-width: 820px) {
	body.kr-redesign .kr-related__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}
.kr-article-thumb {
	/* Sized to match the body reading column (.kr-page-content__body
	   max-width 720px) so the article reads as a single editorial
	   column.  Previously 1100px, which created a visual mismatch
	   against the narrower body.  [SK 2026-05-11 option A] */
	max-width: 720px;
	margin: clamp(2rem, 4vw, 3rem) auto;
	padding: 0;
}
.kr-article-thumb img {
	width: 100%;
	height: auto;
	border-radius: 0;            /* sharp corners — Premium Boutique direction */
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: saturate(0.92) contrast(1.02);
	transition: filter 0.4s ease;
}
.kr-article-thumb:hover img { filter: saturate(1) contrast(1); }

/* (Number-range wrapping is now done via U+2011 non-breaking hyphen
   character replacement in keep-number-ranges-together.php — no HTML
   element added, so no font/style inconsistency can creep in. The old
   .kr-numrange class is left intentionally unstyled in case any cached
   page still contains it.) */

/* Posts whose featured image is a wide banner (≈3:1 with embedded text)
   need their native ratio honoured — forcing 16:9 crops the text off.
   Medical-studies (1351 EL / 1548 EN) uses a 1317×417 banner with the
   "CLINICAL RESEARCH" label that was being cut off. */
body.postid-1351 .kr-article-thumb img,
body.postid-1548 .kr-article-thumb img {
	aspect-ratio: 1317 / 417;
	object-fit: contain;
}

/* The article body of every post ends with a legacy author block:
     <figure class="wp-block-image"> (small portrait)
     <hr class="wp-block-separator">
     <hr class="wp-block-separator">
     <p>Stratis Kolibianakis is Professor of...</p>
   The bio paragraph is now stripped server-side by the
   strip-image-placeholder-text mu-plugin; we keep the figure +
   separators hidden as a belt-and-suspenders for any old cached
   render. */
/* :not(:first-of-type) added 2026-05-13 — without it, single-figure
   articles (e.g. /simplified-ivf/ with only the ELONVA molecule image)
   matched :last-of-type and got hidden.  Guard restricts the rule to
   multi-figure articles where the LAST figure is the legacy portrait. */
.kr-article-body .kr-page-content__body > figure.wp-block-image:not(:first-of-type):last-of-type,
.kr-article-body .kr-page-content__body > figure.wp-block-image:not(:first-of-type):last-of-type ~ hr.wp-block-separator {
	display: none !important;
}

/* Body inline figures — visual breathers between Q&A sections.
   Kept noticeably smaller than the hero (which fills the container)
   so the hierarchy reads as: hero = primary, body figures = secondary
   accents. 2026-05-13. */
.kr-article-body .kr-page-content__body > figure.wp-block-image {
	max-width: 62%;
	margin-inline: auto;
	margin-block: 2.5rem;
}
.kr-article-body .kr-page-content__body > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}
@media (max-width: 720px) {
	/* Narrow viewport — let figures breathe wider so they don't feel cramped. */
	.kr-article-body .kr-page-content__body > figure.wp-block-image {
		max-width: 85%;
		margin-block: 1.75rem;
	}
}

/* Reference block — emitted by the strip-image-placeholder mu-plugin
   when a trailing paragraph looks like a conference / paper citation
   (contains a year + a venue marker like "Συνέδριο", "Conference",
   "Hum Reprod", "et al.").  Styled as a quiet brass-rule aside so it
   reads as source attribution, not body prose. */
.kr-article-body .kr-article-refs {
	max-width: 720px;
	margin: 2.4rem 0 0;
	padding: 1.2rem 1.4rem;
	border-left: 2px solid var(--c-brass);
	background: var(--c-ivory-soft);
	font-family: var(--ff-serif);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--c-text-soft);
	font-style: italic;
}
.kr-article-body .kr-article-refs p { margin: 0; }
.kr-article-body .kr-article-refs__label {
	font-family: var(--ff-sans) !important;
	font-style: normal !important;
	font-size: 0.65rem !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase !important;
	color: var(--c-brass) !important;
	font-weight: 600 !important;
	margin: 0 0 0.4rem !important;
}

/* "Watch the presentation →" CTA inside the references aside.
   Tracked-brass small caps with a small play glyph — matches the
   "ΔΙΑΒΑΣΤΕ →" affordance pattern from the news-index card design
   so the visual register feels consistent. */
.kr-article-body .kr-article-refs__cta {
	margin: 0.9rem 0 0 !important;
	padding-top: 0.7rem !important;
	border-top: 1px dashed rgba(184, 146, 83, 0.45);
	font-family: var(--ff-sans) !important;
	font-style: normal !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--c-brass) !important;
	font-weight: 600 !important;
}
.kr-article-body .kr-article-refs__cta a {
	color: var(--c-brass) !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	transition: gap 0.25s ease;
}
.kr-article-body .kr-article-refs__cta a:hover { gap: 0.8em; }
.kr-article-body .kr-article-refs__cta-icon {
	font-size: 0.85em;
	color: var(--c-brass);
}

/* Body typography refinements for long-form medical reading.
   Article body switched to Cormorant serif on 2026-05-11 so the
   entire article reads in one editorial voice from title through
   H3s through body.  Inter stays for the eyebrow / datestamp / TOC
   label (small-caps UI moments).
   - Body: Cormorant 17.5 px (slightly smaller than the Inter
     setting because serif glyphs read a touch larger at the same
     declared size), line-height 1.7
   - First paragraph: slight size bump as a lede.
   - Sub-headings inherit Cormorant + brass-rule rhythm. */
.kr-article-body .kr-page-content__body {
	font-family: var(--ff-serif) !important;
	font-size: 1.09375rem;            /* 17.5 px */
	line-height: 1.7;
	color: var(--c-text);
}
/* Target <p> and <li> directly — body.kr-redesign p/li carries
   `font-family: var(--ff-sans) !important` site-wide (specificity
   0,1,2).  Our scoped rule below has specificity 0,3,2 so it wins
   and the article body actually renders in Cormorant.
   body.kr-article-single is the WP body_class used by single.php
   (NOT kr-article-body — that's on <article>). */
body.kr-article-single .kr-page-content__body p,
body.kr-article-single .kr-page-content__body li {
	font-family: var(--ff-serif) !important;
}
.kr-article-body .kr-page-content__body > p:first-of-type {
	font-size: 1.2rem;
	line-height: 1.65;
	color: var(--c-text);
}
/* TOC question text — fix inheritance: Astra's a-rule has higher
   specificity than .kr-article-toc__list li, so the link text was
   rendering in Inter sans.  Pin Cormorant on the <a> directly so
   the TOC matches the body voice. */
.kr-article-body .kr-page-content__body .kr-article-toc__list a {
	font-family: var(--ff-serif) !important;
}
.kr-article-body .kr-page-content__body h2 {
	position: relative;
	padding-top: 1.5rem;
	border-top: 1px solid var(--c-rule);
	margin-top: 2.4em !important;
}
.kr-article-body .kr-page-content__body h2::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 36px;
	height: 2px;
	background: var(--c-brass);
}

/* Q&A sub-heading — promoted from inline <p>Question?<br>Answer</p>
   by the strip-image-placeholder mu-plugin pattern #6.  Marked with
   .kr-article-q so we can give it stronger visual presence than a
   generic body H3.  Numbered with a CSS counter — the italic
   Cormorant numeral on the left is the visual anchor that replaces
   the lost old-site illustrations.  Same editorial pattern as the
   news-index date stamps. */
.kr-article-body .kr-page-content__body {
	counter-reset: kr-article-q;
}
.kr-article-body .kr-page-content__body h3.kr-article-q {
	counter-increment: kr-article-q;
	font-family: var(--ff-serif) !important;
	font-weight: 500 !important;
	font-size: clamp(1.35rem, 1.9vw, 1.7rem) !important;
	line-height: 1.25 !important;
	letter-spacing: -0.008em !important;
	color: var(--c-text) !important;
	margin: 3em 0 1em !important;
	padding-top: 1.6rem !important;
	border-top: 1px solid var(--c-rule);
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 1.1rem;
	align-items: baseline;
}
.kr-article-body .kr-page-content__body h3.kr-article-q::before {
	content: counter(kr-article-q, decimal-leading-zero);
	font-family: var(--ff-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--c-brass);
	letter-spacing: -0.02em;
	display: block;
	grid-column: 1;
	margin-top: 0.1rem;
}
.kr-article-body .kr-page-content__body h3.kr-article-q::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 36px;
	height: 2px;
	background: var(--c-brass);
}
/* The first Q on a page doesn't need the hairline above (the title
   block already provides the start-of-content boundary). */
.kr-article-body .kr-page-content__body > h3.kr-article-q:first-of-type {
	margin-top: 1em !important;
	padding-top: 0 !important;
	border-top: 0;
}
.kr-article-body .kr-page-content__body > h3.kr-article-q:first-of-type::after {
	display: none;
}
/* Mobile — collapse the numeral to a smaller inline lead so the H3
   doesn't wrap awkwardly on narrow viewports. */
@media (max-width: 700px) {
	.kr-article-body .kr-page-content__body h3.kr-article-q {
		grid-template-columns: 44px 1fr;
		gap: 0.7rem;
	}
	.kr-article-body .kr-page-content__body h3.kr-article-q::before {
		font-size: 1.6rem;
	}
}

/* Auto-generated Table of Contents — sits at the top of an article
   that has 3+ Q&A sections.  Editorial register: small tracked-
   brass eyebrow + a roman-serif numbered list.  Acts as a jumplist
   to deep-link the reader straight to the section they're after,
   compensating for the loss of the old site's section illustrations. */
.kr-article-body .kr-page-content__body > .kr-article-toc {
	margin: 0 0 2.2rem;
	padding: 1.4rem 1.4rem 1.1rem;
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
	background: rgba(244, 248, 251, 0.55);
}
.kr-article-toc__label {
	font-family: var(--ff-sans) !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase !important;
	color: var(--c-brass) !important;
	font-weight: 600 !important;
	margin: 0 0 0.7rem !important;
}
.kr-article-toc__list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	counter-reset: kr-toc;
	column-count: 2;
	column-gap: 2.2rem;
}
.kr-article-toc__list li {
	counter-increment: kr-toc;
	break-inside: avoid;
	margin: 0 0 0.45rem !important;
	padding: 0 0 0 2.2rem;
	position: relative;
	font-family: var(--ff-serif);
	font-size: 0.95rem;
	line-height: 1.35;
}
.kr-article-toc__list li::before {
	content: counter(kr-toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.05rem;
	font-style: italic;
	color: var(--c-brass);
	font-size: 0.85rem;
	letter-spacing: -0.01em;
}
.kr-article-toc__list a {
	color: var(--c-text) !important;
	text-decoration: none !important;
	border-bottom: 1px solid transparent;
	transition: border-color 0.18s ease, color 0.18s ease;
}
.kr-article-toc__list a:hover {
	color: var(--c-brass) !important;
	border-bottom-color: var(--c-brass);
}
@media (max-width: 720px) {
	.kr-article-toc__list { column-count: 1; }
}

/* Smooth-scroll for the jumplist anchors so the page scrolls
   gracefully when the reader clicks a TOC entry. */
html { scroll-behavior: smooth; }
.kr-article-body .kr-page-content__body h3.kr-article-q {
	scroll-margin-top: 100px; /* clear the sticky-ish header on jump */
}

/* "About the doctor" closer — sits right under the bio paragraph,
   close-spaced so they read as one consolidated block. No top
   hairline (the bio paragraph above provides natural closure). */
.kr-article-author {
	/* Narrowed to 720 px on 2026-05-11 to match the single editorial
	   column of the redesigned single-post template (header, hero,
	   body, related strip all sit on this same 720-wide axis). */
	max-width: 720px;
	margin: 2rem auto 0;
	padding-top: 1.5rem;
	padding-inline: 0;
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 2rem;
	align-items: center;
}
.kr-article-author__portrait {
	margin: 0;
	width: 180px;
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 28px -10px rgba(31, 42, 36, 0.20);
	position: relative;
	/* Image is set via inline background-image style on the element. */
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
	background-color: var(--c-ivory-soft);
}
.kr-article-author__portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(184, 146, 83, 0.35);
	pointer-events: none;
}
.kr-article-author__name {
	font-family: var(--ff-serif) !important;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
	font-weight: 400 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.1 !important;
	color: var(--c-text);
	margin: 0.6rem 0 0.4rem !important;
}
.kr-article-author__role {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--c-brass);
	margin: 0 0 1.2rem;
	line-height: 1.4;
}
@media (max-width: 700px) {
	.kr-article-author {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.kr-article-author__portrait { width: 160px; }
}

/* ----------------------------------------------------------- *
 *  Phase-1 scaffold notices — replaced section-by-section
 * ----------------------------------------------------------- */

.kr-scaffold {
	border: 1px dashed var(--c-rule);
	background: var(--c-ivory-soft);
	padding: 2rem 2.5rem;
	margin-block: 1.5rem;
	border-radius: 4px;
}
.kr-scaffold__label {
	font-family: var(--ff-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-brass);
	margin: 0 0 0.6rem;
}
.kr-scaffold__title {
	font-family: var(--ff-serif);
	font-weight: 400;
	font-size: 2.2rem;
	letter-spacing: var(--ls-tight);
	line-height: 1.15;
	margin: 0 0 0.5rem;
	color: var(--c-text);
}
.kr-scaffold__title em { font-style: italic; color: var(--c-brass); }
.kr-scaffold__hint {
	font-family: var(--ff-sans);
	font-size: 0.92rem;
	color: var(--c-text-mute);
	margin: 0;
}

/* ----------------------------------------------------------- *
 *  Mobile
 * ----------------------------------------------------------- */
@media (max-width: 900px) {
	.kr-header__util {
		grid-template-columns: 1fr;
		gap: 0.8rem;
		text-align: center;
		justify-items: center;
		padding-block: 1rem;
	}
	.kr-header__contact { flex-direction: column; gap: 0.2rem; align-items: center; }
	.kr-header__cta { justify-content: center; }
	.kr-header__nav { flex-wrap: wrap; gap: 1rem; padding-block: 0.8rem; }
	.kr-footer__grid { grid-template-columns: 1fr; gap: var(--space-md); }
	.kr-section { padding-block: var(--space-xl); }
}

@media (max-width: 600px) {
	.kr-header__brand { font-size: 1.1rem; }
	.kr-section { padding-block: var(--space-lg); }
}

/* ============================================================= *
 *  POWDER-BLUE REDESIGN — Phase 2 (May 2026)
 *  Source: home-page-kolibianakis-ivf/project/Homepage.jsx +
 *  Homepage Redesign.html.
 *  These rules are scoped to body.kr-home (the redesign template
 *  body class) so they only re-style the home page; the rest of
 *  the site keeps its current section styling but inherits the
 *  new palette from :root.
 * ============================================================= */

/* ---- Hero stats grid (replaces the old creds strip) ---- */
.kr-redesign .kr-hero__stats {
	margin-top: clamp(2.5rem, 5vw, 5.5rem);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
	max-width: 460px;
}
.kr-redesign .kr-stat {
	border-top: 1px solid var(--c-rule);
	padding-top: 1rem;
}
.kr-redesign .kr-stat__num {
	font-family: var(--ff-serif);
	font-size: clamp(2.2rem, 3.4vw, 2.75rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--c-text);
}
.kr-redesign .kr-stat__label {
	margin-top: 0.5rem;
	font-family: var(--ff-sans);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-text-mute);
}

/* ---- Hero photo overlay (initial top-right + bottom band) ---- */
.kr-redesign .kr-hero__panel { position: relative; }
.kr-redesign .kr-hero__panel-initial {
	position: absolute;
	top: 28px;
	right: 32px;
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: clamp(2.6rem, 4vw, 3.5rem);
	color: rgba(255, 255, 255, 0.78);
	line-height: 1;
	letter-spacing: 0.04em;
	text-shadow: 0 2px 16px rgba(20, 32, 45, 0.35);
	pointer-events: none;
	z-index: 2;
}
.kr-redesign .kr-hero__panel-band {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1.25rem, 2.4vw, 2.25rem);
	color: #fff;
	background: linear-gradient(to top, rgba(20, 32, 45, 0.78) 0%, rgba(20, 32, 45, 0.55) 50%, rgba(20, 32, 45, 0) 100%);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	text-align: center;
	gap: 1rem;
	z-index: 2;
}
.kr-redesign .kr-hero__panel-band-name {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}
.kr-redesign .kr-hero__panel-band-eyebrow {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 0.85rem;
	opacity: 0.82;
}
.kr-redesign .kr-hero__panel-band-title {
	font-family: var(--ff-serif);
	font-size: clamp(1.3rem, 1.8vw, 1.7rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.01em;
}
.kr-redesign .kr-hero__panel-band-stat { text-align: right; }
.kr-redesign .kr-hero__panel-band-num {
	display: block;
	font-family: var(--ff-serif);
	font-size: clamp(2.4rem, 4vw, 3.6rem);
	font-weight: 400;
	line-height: 0.9;
	color: var(--c-accent);
	letter-spacing: -0.02em;
}
.kr-redesign .kr-hero__panel-band-num sup { font-size: 0.5em; }
.kr-redesign .kr-hero__panel-band-label {
	display: block;
	margin-top: 0.35rem;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* ---- Services — 3-col uniform (override the alternating layout) ---- */
.kr-redesign .kr-services__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--c-rule);
	align-items: stretch;
}
.kr-redesign .kr-service {
	display: flex;
	flex-direction: column;
	padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1.25rem, 1.8vw, 2rem) clamp(1.5rem, 2.2vw, 2.25rem);
	border-right: 1px solid var(--c-rule);
	gap: 0;
}
.kr-redesign .kr-service:last-child { border-right: none; }
.kr-redesign .kr-service__panel {
	height: 110px;
	min-height: 0;          /* override the Phase 1 min-height: 300px */
	box-shadow: none;       /* override Phase 1 chunky shadow */
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: clamp(0.75rem, 1.2vw, 1rem);
	position: relative;
}
.kr-redesign .kr-service__panel img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.kr-redesign .kr-service__title {
	font-family: var(--ff-serif);
	font-size: clamp(1.6rem, 2vw, 2.25rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--c-text);
	margin: 0 0 0.85rem;
	min-height: 2.4em;
}
.kr-redesign .kr-service__desc {
	font-family: var(--ff-sans);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--c-text-soft);
	margin: 0 0 1.5rem;
	min-height: 4.5em;
}
.kr-redesign .kr-service__points {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	border-top: 1px solid var(--c-rule);
}
.kr-redesign .kr-service__points li {
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--c-rule);
	font-family: var(--ff-sans);
	font-size: 13px;
	color: var(--c-text-soft);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.kr-redesign .kr-service__points-num {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 14px;
	color: var(--c-accent);
	min-width: 1.6em;
}
.kr-redesign .kr-service__link { margin-top: auto; }

/* ---- Bio — plain rounded photo, sticky on desktop, no brass panel ---- */
.kr-redesign .kr-bio { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); }
.kr-redesign .kr-bio__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 5vw, 5rem);
	align-items: start;
}
.kr-redesign .kr-bio__photo-wrap {
	position: static;
	align-self: center;
}
.kr-redesign .kr-bio__portrait {
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;            /* 2026-06-22: mild ~16% side-crop to make the portrait taller (SK request); keeps face centred */
	object-fit: cover;
	object-position: center 35%;
	border-radius: 4px;
	position: static;              /* override base .kr-bio__portrait position:absolute (needed once the wrap is no longer sticky) */
	display: block;
}
.kr-redesign .kr-bio__name {
	font-family: var(--ff-serif);
	font-size: clamp(2.4rem, 4.5vw, 4.5rem) !important;   /* up to 72px — !important added 2026-06-22 to beat the leaked base .kr-bio__name 90px so the name fits beside a larger bio photo */
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.025em;
	margin: 1.25rem 0 0.5rem;
	color: var(--c-text);
}
.kr-redesign .kr-bio__role {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: clamp(1.1rem, 1.4vw, 1.3rem);
	color: var(--c-accent);
	line-height: 1.4;
	margin: 0 0 2rem;
}
.kr-redesign .kr-bio__body {
	font-family: var(--ff-sans);
	font-size: 1rem;
	line-height: 1.85;
	color: var(--c-text-soft);
	margin: 0 0 2.25rem;
}

/* ---- Ιστορίες ασθενών — full-width accent band, 3 case cards ---- */
.kr-redesign .kr-testi {
	padding-block: clamp(2.5rem, 4.5vw, 4.5rem);
	background: var(--c-accent);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.kr-redesign .kr-testi::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.12), transparent 65%);
	pointer-events: none;
}
.kr-redesign .kr-testi .kr-eyebrow.is-on-dark { color: rgba(255, 255, 255, 0.9); }
.kr-redesign .kr-testi .kr-eyebrow.is-on-dark::before { background: rgba(255, 255, 255, 0.9); }
.kr-redesign .kr-testi__head {
	position: relative;
	max-width: 720px;
	margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}
.kr-redesign .kr-testi__intro {
	margin: 1.25rem 0 0;
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 1.6vw, 1.6rem);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
}
.kr-redesign .kr-testi__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.kr-redesign .kr-testi__card {
	position: relative;
	padding: clamp(2rem, 3.2vw, 3rem) clamp(1.5rem, 2.4vw, 2.5rem) clamp(1.75rem, 2.6vw, 2.25rem);
	display: flex;
	flex-direction: column;
	border-right: 1px solid rgba(255, 255, 255, 0.22);
}
.kr-redesign .kr-testi__card:last-child { border-right: none; }
.kr-redesign .kr-testi__card-mark {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: clamp(4.5rem, 7vw, 6rem);
	line-height: 0.6;
	color: rgba(255, 255, 255, 0.25);
	margin-bottom: 0.75rem;
	display: block;
	pointer-events: none;
	user-select: none;
}
.kr-redesign .kr-testi__card-tag {
	margin: 0 0 1rem;
	font-family: var(--ff-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	font-weight: 500;
}
.kr-redesign .kr-testi__card-quote {
	margin: 0 0 1.75rem;
	padding: 0;
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: clamp(1.05rem, 1.4vw, 1.4rem);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: #fff;
	flex: 1;
}
.kr-redesign .kr-testi__card-by {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	font-family: var(--ff-sans);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
}
.kr-redesign .kr-testi__by-rule {
	width: 28px;
	height: 1px;
	background: #fff;
	flex: none;
}
@media (max-width: 900px) {
	.kr-redesign .kr-testi__grid { grid-template-columns: 1fr; }
	.kr-redesign .kr-testi__card {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	}
	.kr-redesign .kr-testi__card:last-child { border-bottom: none; }
}

/* ---- Process — 4-step grid ---- */
.kr-redesign .kr-process { padding-block: clamp(2.5rem, 4.5vw, 4.5rem); }
.kr-redesign .kr-process__head {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	max-width: 720px;
}
.kr-redesign .kr-process__h2 {
	font-family: var(--ff-serif);
	font-size: clamp(1.85rem, 3.4vw, 3.25rem);   /* up to 52px (was 64) */
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.018em;
	margin: 1.5rem 0 0;
	color: var(--c-text);
}
.kr-redesign .kr-process__h2 em {
	font-style: italic;
	color: var(--c-accent);
}
.kr-redesign .kr-process__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--c-rule);
}
.kr-redesign .kr-process__step {
	background: var(--c-ivory);
	padding: clamp(1.75rem, 2.4vw, 2.5rem) clamp(1.5rem, 2vw, 2rem);
	min-height: 280px;
	display: flex;
	flex-direction: column;
}
.kr-redesign .kr-process__step-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
}
.kr-redesign .kr-process__step-num {
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: clamp(2rem, 3vw, 3rem);
	color: var(--c-accent);
	line-height: 1;
	letter-spacing: 0.02em;
}
.kr-redesign .kr-process__step-tag {
	font-family: var(--ff-sans);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-text-mute);
}
.kr-redesign .kr-process__step-title {
	font-family: var(--ff-serif);
	font-size: clamp(1.25rem, 1.7vw, 1.65rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.85rem;
	color: var(--c-text);
}
.kr-redesign .kr-process__step-desc {
	font-family: var(--ff-sans);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--c-text-soft);
	flex: 1;
	margin: 0;
}

/* ---- Tool tabs — pill switcher above the calculator ---- */
.kr-redesign .kr-tool__tabs {
	display: inline-flex;
	gap: 0;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	padding: 6px;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.kr-redesign .kr-tool__tab {
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.78);
	padding: 0.85rem 1.75rem;
	font-family: var(--ff-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	white-space: nowrap;
}
.kr-redesign .kr-tool__tab:hover { color: #fff; }
.kr-redesign .kr-tool__tab.is-active {
	background: var(--c-text-on-dark);
	color: var(--c-deep);
	font-weight: 600;
}

/* Force-hide the inactive panel — the [hidden] attribute would otherwise
   be overridden by .kr-tool__grid's display: grid rule. */
.kr-redesign [data-kr-panel][hidden] { display: none !important; }

/* Scroll fade-ins. Gentle 24px-up + opacity, 0.7s ease-out, IntersectionObserver
   triggered. Respects prefers-reduced-motion (rule wrapped in @media). The
   data-kr-reveal-ready attribute is set by JS on first observer pass — until
   then nothing is hidden, so a JS-disabled visit shows content normally. */
@media (prefers-reduced-motion: no-preference) {
	body.kr-redesign[data-kr-reveal-ready] .kr-reveal:not(.is-visible) {
		opacity: 0;
		transform: translateY(24px);
	}
	body.kr-redesign .kr-reveal {
		transition: opacity 0.7s ease-out, transform 0.7s ease-out;
		will-change: opacity, transform;
	}
}

/* Wrapping segmented row for the IVF "cause of infertility" buttons (5 options). */
.kr-redesign .kr-tool__seg--wrap {
	flex-wrap: wrap;
	gap: 0.5rem;
}
.kr-redesign .kr-tool__seg--wrap .kr-tool__seg-btn {
	flex: 1 1 auto;
	min-width: 7.5rem;
	font-family: var(--ff-sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: none;
	padding: 0.7rem 1rem;
}

/* IVF result bars — three stacked horizontal progress bars so the
   cumulative growth reads as a progression instead of three near-identical
   numbers in a row. */
.kr-redesign .kr-tool__result--ivf .kr-tool__result-label {
	margin-bottom: 1rem;
}
.kr-redesign .kr-tool__ivf-bars {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin-top: 0.5rem;
}
.kr-redesign .kr-tool__ivf-bar-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.45rem;
}
.kr-redesign .kr-tool__ivf-bar-label {
	font-family: var(--ff-sans);
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-text-mute);
	font-weight: 500;
}
.kr-redesign .kr-tool__ivf-bar-num {
	font-family: var(--ff-serif);
	font-size: clamp(2.2rem, 3.6vw, 3rem);
	font-weight: 400;
	color: var(--c-accent-deep);
	line-height: 0.95;
	letter-spacing: -0.02em;
}
/* Each subsequent bar gets progressively bolder so the progression is
   visible at a glance even before reading the numbers. */
.kr-redesign .kr-tool__ivf-bar:nth-child(1) .kr-tool__ivf-bar-num { color: var(--c-accent); opacity: 0.78; }
.kr-redesign .kr-tool__ivf-bar:nth-child(2) .kr-tool__ivf-bar-num { color: var(--c-accent); opacity: 0.92; }
.kr-redesign .kr-tool__ivf-bar:nth-child(3) .kr-tool__ivf-bar-num { color: var(--c-accent-deep); opacity: 1; font-weight: 500; }
.kr-redesign .kr-tool__ivf-bar-track {
	width: 100%;
	height: 8px;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 999px;
	overflow: hidden;
}
.kr-redesign .kr-tool__ivf-bar-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-deep) 100%);
	border-radius: 999px;
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Bar 1 lighter shade, bar 3 deepest, to reinforce progression. */
.kr-redesign .kr-tool__ivf-bar:nth-child(1) .kr-tool__ivf-bar-fill { opacity: 0.65; }
.kr-redesign .kr-tool__ivf-bar:nth-child(2) .kr-tool__ivf-bar-fill { opacity: 0.85; }
.kr-redesign .kr-tool__ivf-bar:nth-child(3) .kr-tool__ivf-bar-fill { opacity: 1; }

/* Ovulation calculator: date input + result rows */
.kr-redesign .kr-tool__date {
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--c-rule);
	background: #fff;
	color: var(--c-text);
	font-family: var(--ff-sans);
	font-size: 1rem;
	border-radius: 4px;
}
.kr-redesign .kr-tool__date:focus {
	outline: 2px solid var(--c-accent);
	outline-offset: 1px;
}
.kr-redesign .kr-tool__ovu-result {
	margin-top: 0.5rem;
	border-top: 1px solid var(--c-rule);
	padding-top: 1rem;
	margin-bottom: 1.25rem;
}
.kr-redesign .kr-tool__ovu-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--c-rule);
}
.kr-redesign .kr-tool__ovu-row:last-child { border-bottom: none; }
.kr-redesign .kr-tool__ovu-label {
	font-family: var(--ff-sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-mute);
	font-weight: 500;
}
.kr-redesign .kr-tool__ovu-value {
	font-family: var(--ff-serif);
	font-size: 1.05rem;
	color: var(--c-accent-deep);
	text-align: right;
	font-weight: 500;
}

/* Ovulation per-day chart — Dunson 2002 age-stratified daily probabilities. */
.kr-redesign .kr-tool__ovu-chart {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--c-rule);
}
.kr-redesign .kr-tool__ovu-chart-label {
	font-family: var(--ff-sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-mute);
	font-weight: 500;
	margin-bottom: 0.85rem;
}
.kr-redesign .kr-tool__ovu-chart-rows {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.kr-redesign .kr-tool__ovu-chart-row {
	display: grid;
	grid-template-columns: 4.5rem 1fr 3rem;
	align-items: center;
	gap: 0.75rem;
}
.kr-redesign .kr-tool__ovu-chart-date {
	font-family: var(--ff-sans);
	font-size: 12px;
	color: var(--c-text-mute);
	letter-spacing: 0.04em;
}
.kr-redesign .kr-tool__ovu-chart-track {
	height: 10px;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 999px;
	overflow: hidden;
}
.kr-redesign .kr-tool__ovu-chart-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent-deep) 100%);
	border-radius: 999px;
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.kr-redesign .kr-tool__ovu-chart-pct {
	font-family: var(--ff-serif);
	font-size: 1rem;
	font-weight: 500;
	color: var(--c-accent-deep);
	text-align: right;
}
.kr-redesign .kr-tool__ovu-chart-row.is-peak .kr-tool__ovu-chart-pct {
	color: var(--c-text);
	font-weight: 600;
}
.kr-redesign .kr-tool__ovu-chart-row.is-peak .kr-tool__ovu-chart-track {
	background: rgba(31, 42, 36, 0.10);
}
.kr-redesign .kr-tool__ovu-chart-row.is-peak .kr-tool__ovu-chart-fill {
	background: linear-gradient(90deg, var(--c-accent-deep) 0%, var(--c-text) 100%);
}
.kr-redesign .kr-tool__ovu-chart-peak {
	margin-top: 1rem;
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--c-text);
}
.kr-redesign .kr-tool__ovu-chart-peak-tag {
	font-family: var(--ff-sans);
	font-style: normal;
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-accent);
	font-weight: 600;
	margin-right: 0.4rem;
}

/* ---- Tool — 50/70/90% triple result + disclaimer + sources ---- */
.kr-redesign .kr-tool__result-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-top: 0.5rem;
	border: 1px solid var(--c-rule);
}
.kr-redesign .kr-tool__result-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 1.1rem 0.6rem 1rem;
	border-right: 1px solid var(--c-rule);
}
.kr-redesign .kr-tool__result-cell:last-child { border-right: none; }
.kr-redesign .kr-tool__result-cell .kr-tool__result-num {
	font-family: var(--ff-serif);
	font-size: clamp(2.4rem, 4vw, 3.4rem);
	font-weight: 400;
	color: var(--c-accent);
	line-height: 0.9;
	letter-spacing: -0.02em;
}
.kr-redesign .kr-tool__result-cell-label {
	font-family: var(--ff-sans);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-mute);
	font-weight: 500;
	text-align: center;
}
.kr-redesign .kr-tool__result-unit-row {
	margin-top: 0.6rem;
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--c-text-mute);
	text-align: center;
}
.kr-redesign .kr-tool__cta.is-stale {
	opacity: 0.35;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.kr-redesign .kr-tool__cta {
	transition: opacity 0.25s ease;
}
.kr-redesign .kr-tool__disclaimer {
	margin: 1.25rem 0 0.4rem;
	font-family: var(--ff-sans);
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--c-text-soft);
	font-style: italic;
}
.kr-redesign .kr-tool__sources {
	margin: 1.75rem 0 0;
	font-family: var(--ff-sans);
	font-size: 10.5px;
	letter-spacing: 0.04em;
	line-height: 1.55;
	color: var(--c-text-mute);
}
.kr-redesign .kr-tool__disclaimer + .kr-tool__sources {
	margin-top: 0;
}
.kr-redesign .kr-tool__sources-label {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--c-accent);
	font-weight: 500;
	margin-right: 0.35rem;
}

/* ---- Mobile stacking for the new sections ---- */
@media (max-width: 900px) {
	.kr-redesign .kr-services__list { grid-template-columns: 1fr; }
	.kr-redesign .kr-service { border-right: none; border-bottom: 1px solid var(--c-rule); }
	.kr-redesign .kr-service:last-child { border-bottom: none; }
	.kr-redesign .kr-service__title,
	.kr-redesign .kr-service__desc { min-height: 0; }
	.kr-redesign .kr-bio__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.kr-redesign .kr-bio__photo-wrap { position: static; }
	.kr-redesign .kr-bio__portrait { height: auto; aspect-ratio: 3 / 2; }
	.kr-redesign .kr-process__grid { grid-template-columns: repeat(2, 1fr); }
	.kr-redesign .kr-hero__panel-band-stat { display: none; }
}
@media (max-width: 600px) {
	.kr-redesign .kr-process__grid { grid-template-columns: 1fr; }
	.kr-redesign .kr-hero__stats { grid-template-columns: 1fr; }
}

/* ============================================================= *
 *  PRACTICE SPACE — real interior photos, framed triptych.
 *  Added 2026-06-22 with SK's real practice photography.
 *  Brass inset frame matches the hero / bio portrait treatment.
 * ============================================================= */
.kr-redesign .kr-space {
	padding-block: clamp(2.5rem, 4.5vw, 4.5rem);
}
.kr-redesign .kr-space__head {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.kr-redesign .kr-space__h2 {
	font-family: var(--ff-serif);
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0.5rem 0 0;
	color: var(--c-text);
}
.kr-redesign .kr-space__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
}
.kr-redesign .kr-space__item {
	margin: 0;
	position: relative;
}
.kr-redesign .kr-space__img {
	width: 100%;
	height: clamp(240px, 26vw, 360px);
	object-fit: cover;
	border-radius: 6px;
	display: block;
	box-shadow: 0 18px 40px -18px rgba(28, 42, 58, 0.32);
}
.kr-redesign .kr-space__item::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba(184, 146, 83, 0.45);
	pointer-events: none;
}
.kr-redesign .kr-space__cap {
	margin-top: 0.6rem;
	font-family: var(--ff-sans);
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: var(--c-text-mute);
}
@media (max-width: 860px) {
	.kr-redesign .kr-space__grid { grid-template-columns: 1fr; gap: 1.25rem; }
	.kr-redesign .kr-space__img { height: clamp(220px, 60vw, 320px); }
}

/* Contact-page practice photos (real interiors) above the Find-us map. Added 2026-06-22. */
.kr-redesign .kr-contactphotos {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}
.kr-redesign .kr-contactphotos__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
}
.kr-redesign .kr-contactphotos__item {
	margin: 0;
	position: relative;
}
.kr-redesign .kr-contactphotos__img {
	width: 100%;
	height: clamp(220px, 28vw, 340px);
	object-fit: cover;
	border-radius: 6px;
	display: block;
	box-shadow: 0 18px 40px -18px rgba(28, 42, 58, 0.32);
}
.kr-redesign .kr-contactphotos__item::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba(184, 146, 83, 0.45);
	pointer-events: none;
}
@media (max-width: 760px) {
	.kr-redesign .kr-contactphotos__grid { grid-template-columns: 1fr; }
}

/* Services-page clinical accent — distinct captioned ultrasound closing band. Added 2026-06-22. */
.kr-redesign .kr-clinicalaccent {
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	background: var(--c-ivory-soft);
}
.kr-redesign .kr-clinicalaccent__figure {
	margin: 0 auto;
	max-width: 760px;
}
.kr-redesign .kr-clinicalaccent__frame {
	position: relative;
	display: block;
}
.kr-redesign .kr-clinicalaccent__img {
	width: 100%;
	height: clamp(260px, 36vw, 460px);
	object-fit: cover;
	border-radius: 8px;
	display: block;
	box-shadow: 0 24px 60px -24px rgba(28, 42, 58, 0.40);
}
.kr-redesign .kr-clinicalaccent__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px rgba(184, 146, 83, 0.45);
	pointer-events: none;
}
.kr-redesign .kr-clinicalaccent__cap {
	margin: 1.1rem auto 0;
	max-width: 620px;
	text-align: center;
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.5;
	color: var(--c-text-soft);
}
.kr-redesign .kr-clinicalaccent__cap .kr-eyebrow {
	display: block;
	margin-bottom: 0.55rem;
	font-style: normal;
}

/* Bio-page lead portrait (Elementor image widgets 7q0vk9m EL / x3ovh7p EN).
   The widget is locked to 320px and the office portrait is landscape, which
   reads small/unbalanced next to the credentials. Widen + portrait-crop it
   (object-fit cover, focused on the subject) so it works as a real lead photo.
   Added 2026-06-22. */
.kr-redesign .elementor-element-7q0vk9m,
.kr-redesign .elementor-element-x3ovh7p,
.kr-redesign .elementor-element-7q0vk9m .elementor-widget-container,
.kr-redesign .elementor-element-x3ovh7p .elementor-widget-container {
	width: 100% !important;
	max-width: 440px !important;
}
.kr-redesign .elementor-element-7q0vk9m img,
.kr-redesign .elementor-element-x3ovh7p img {
	width: 100% !important;
	height: clamp(400px, 30vw, 490px) !important;
	object-fit: cover !important;
	object-position: 30% center !important;
	border-radius: 6px !important;
	display: block !important;
	box-shadow: 0 22px 50px -22px rgba(28, 42, 58, 0.35);
}
@media (max-width: 980px) {
	.kr-redesign .elementor-element-7q0vk9m img,
	.kr-redesign .elementor-element-x3ovh7p img { height: clamp(340px, 70vw, 460px) !important; }
}

/* ============================================================= *
 *  BIO — Education & Training table
 *  Editorial <dl> rendering of the verified qualifications.
 *  Used inside Elementor text-editor on bio pages id=7 / 1524.
 * ============================================================= */

.kr-redesign dl.kr-edu {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(8rem, 11rem) 1fr;
	column-gap: clamp(1rem, 3vw, 2.5rem);
	row-gap: 0;
}
.kr-redesign dl.kr-edu dt {
	font-family: var(--ff-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
	font-weight: 500;
	color: var(--c-brass, #b89253);
	line-height: 1.1;
	padding: 1.1rem 0 1.1rem 0;
	border-top: 1px solid var(--c-rule, #d6cdb8);
	margin: 0;
}
.kr-redesign dl.kr-edu dd {
	margin: 0;
	font-family: var(--ff-sans, 'Inter', sans-serif);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--c-forest, #1f2a24);
	padding: 1.1rem 0;
	border-top: 1px solid var(--c-rule, #d6cdb8);
	align-self: stretch;
}
.kr-redesign dl.kr-edu dt:first-of-type,
.kr-redesign dl.kr-edu dd:first-of-type,
.kr-redesign dl.kr-edu dt:nth-of-type(1),
.kr-redesign dl.kr-edu dd:nth-of-type(1) {
	border-top: none;
	padding-top: 0.4rem;
}
.kr-redesign .kr-edu-note {
	display: block;
	font-size: 0.85em;
	color: rgba(31, 42, 36, 0.6);
	font-style: italic;
	margin-top: 0.3rem;
}
@media (max-width: 600px) {
	.kr-redesign dl.kr-edu {
		grid-template-columns: 1fr;
		row-gap: 0;
	}
	.kr-redesign dl.kr-edu dd { padding-top: 0.2rem; border-top: none; }
	.kr-redesign dl.kr-edu dt { padding-bottom: 0.1rem; }
}

/* ---- Contact page: "Find us" block ----
   Privacy-friendly map preview — pure CSS, no iframe, no Google scripts on
   page load. Visitor clicks the preview or the CTA button to open the real
   Google Maps in a new tab (visited link → maps.app.goo.gl/...). */
.kr-redesign .kr-mapblock {
	background: var(--c-bg);
	padding: 5rem 0 6rem;
	border-top: 1px solid var(--c-rule);
}
.kr-redesign .kr-mapblock__head {
	text-align: center;
	margin-bottom: 3rem;
}
.kr-redesign .kr-mapblock__h2 {
	font-family: var(--ff-serif);
	font-weight: 500;
	font-size: clamp(2rem, 3.2vw, 2.9rem);
	line-height: 1.15;
	margin: 0.6rem 0 0;
	color: var(--c-ink);
	text-wrap: balance;
}
.kr-redesign .kr-mapblock__h2 em {
	font-style: italic;
	color: var(--c-accent-deep);
	font-weight: 400;
}
.kr-redesign .kr-mapblock__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 2.5rem;
	align-items: stretch;
}
.kr-redesign .kr-mapblock__preview {
	position: relative;
	border: 1px solid var(--c-rule);
	border-radius: 4px;
	overflow: hidden;
	background: var(--c-bg2);
	min-height: 360px;
}
.kr-redesign .kr-mapblock__iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 360px;
	border: 0;
}
.kr-redesign .kr-mapblock__facts {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}
.kr-redesign .kr-mapblock__fact {
	display: block;
}
.kr-redesign .kr-mapblock__fact dt {
	font-family: var(--ff-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-accent);
	margin: 0 0 0.3rem;
}
.kr-redesign .kr-mapblock__fact dd {
	font-family: var(--ff-serif);
	font-size: 1.15rem;
	line-height: 1.45;
	color: var(--c-ink);
	margin: 0;
	/* Force lining figures so postal codes / phone numbers / hours align
	   uniformly with the surrounding letters — Lora defaults to old-style
	   text figures which look like a bug next to caps and Greek script. */
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}
.kr-redesign .kr-mapblock__fact dd a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}
.kr-redesign .kr-mapblock__fact dd a:hover {
	border-bottom-color: var(--c-accent);
}
.kr-redesign .kr-mapblock__cta {
	margin-top: 0.5rem;
	align-self: flex-start;
}
@media (max-width: 760px) {
	.kr-redesign .kr-mapblock { padding: 3.5rem 0 4rem; }
	.kr-redesign .kr-mapblock__grid { grid-template-columns: 1fr; gap: 2rem; }
	.kr-redesign .kr-mapblock__preview { min-height: 220px; }
}

/* ---- Contact page: phone block in the right column ----
   Sits in the now-empty Elementor sidebar column to the right of the form.
   Visitors who'd rather call than fill the form get the number at a glance.
   Vertical stack: small phone icon → uppercase label → big sans-serif
   number with tabular figures. Sticky on tall viewports so it stays in
   sight while scrolling through the form. */
.kr-redesign .kr-phone-side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 2rem 1.75rem;
	background: var(--c-surface);
	border: 1px solid var(--c-rule);
	border-radius: 4px;
	margin-top: 0.5rem;
	position: sticky;
	top: 6rem;
}
.kr-redesign .kr-phone-side__icon {
	width: 36px;
	height: 36px;
	color: var(--c-accent-deep);
	margin-bottom: 0.4rem;
}
.kr-redesign .kr-phone-side__label {
	font-family: var(--ff-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-accent);
}
.kr-redesign .kr-phone-side__num {
	display: inline-block;
	font-family: var(--ff-serif);
	font-size: 1.55rem;
	font-weight: 500;
	color: var(--c-ink);
	text-decoration: none;
	/* lining figures only — drop tabular-nums (which made the digits look
	   monospaced and clashed with the page's serif typography) */
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
	line-height: 1.2;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.kr-redesign .kr-phone-side__num:hover,
.kr-redesign .kr-phone-side__num:focus-visible {
	border-bottom-color: var(--c-accent);
	color: var(--c-accent-deep);
	outline: none;
}
@media (max-width: 760px) {
	/* On mobile the Elementor row collapses to one column anyway — drop the
	   sticky behaviour so the phone block flows naturally below the form. */
	.kr-redesign .kr-phone-side {
		position: static;
		margin: 0 0 2rem;
	}
}

/* ---- Contact page: hide redundant eyebrow widgets ----
   The Elementor heading widgets on /contact/ (GR) and /en/contact-us/ (EN)
   render an uppercase eyebrow ("ΕΠΙΚΟΙΝΩΝΙΑ" / "CONTACT") above the H1
   ("Επικοινωνήστε μαζί μας" / "Get in touch"). The eyebrow restates the
   topic already named by the H1, so we hide it visually without touching
   the Elementor data (which broke rendering when edited directly).
   Widget IDs come from _elementor_data; class form is .elementor-element-<id>. */
.kr-redesign .elementor-element-1c16a49,   /* GR — ΕΠΙΚΟΙΝΩΝΙΑ */
.kr-redesign .elementor-element-53365eb {  /* EN — CONTACT */
	display: none !important;
}

/* ---- Services page: Διερεύνηση Υπογονιμότητας / Fertility Investigation ----
   The new 3-axis text is structured and substantially longer than the
   single paragraph it replaces. The original layout pairs a 60% text
   column with a 35% decorative peach box that just shows a duplicate
   of the small magnifying-glass icon already present above the heading.
   With the longer text, that decorative box feels imbalanced and the
   icon repetition is noise. We hide the right column and let the text
   widen to a comfortable reading column. We also style the new <strong>
   axis labels (1./2./3.) in brass for clear vertical rhythm.
     GR (post 45): right col nfypuqs, left col la41fq6, text widget hbqhfa5
     EN (post 1534): right col 7w7uopn, left col 8i3k9kh, text widget tbkhk33 */

/* Hide the redundant right-side decorative peach panel */
.kr-redesign .elementor-element-nfypuqs,
.kr-redesign .elementor-element-7w7uopn {
	display: none !important;
}

/* Expand the text column to a comfortable reading width, centred */
.kr-redesign .elementor-element-la41fq6,
.kr-redesign .elementor-element-8i3k9kh {
	width: 100% !important;
	max-width: 880px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Paragraph rhythm inside the text widget — give the 3 axes breathing room */
.kr-redesign .elementor-element-hbqhfa5 p,
.kr-redesign .elementor-element-tbkhk33 p {
	margin: 0 0 1.15em !important;
	line-height: 1.65;
}
.kr-redesign .elementor-element-hbqhfa5 p:last-child,
.kr-redesign .elementor-element-tbkhk33 p:last-child {
	margin-bottom: 0 !important;
}

/* Accent the bold axis-lead phrases ("1. Διερεύνηση της γονιμότητας…")
   in brass so the eye can scan the three axes at a glance */
.kr-redesign .elementor-element-hbqhfa5 strong,
.kr-redesign .elementor-element-tbkhk33 strong {
	color: var(--c-accent-deep) !important;
	font-weight: 600 !important;
	letter-spacing: 0.005em;
}

/* ---- Contact page: hide redundant clinic-info widget ----
   Old right sidebar duplicated address/phone/email/hours that we now
   render in the kr-mapblock below. We hide ONLY the inner HTML widget,
   leaving the column visible — JS then injects a small kr-phone-side
   block into that empty column so the form keeps its 60/40 row layout.
     GR widget id: ba4bd45  ·  EN widget id: d65e7e5 */
.kr-redesign .elementor-element-ba4bd45,
.kr-redesign .elementor-element-d65e7e5,
.kr-redesign .clinic-info {
	display: none !important;
}

/* ============================================================================
   Contact (WPForms) — align to theme palette  [SK 2026-05-08]
   Default WPForms styling uses out-of-palette grays/beige — these rules pull
   inputs and the submit button into --c-forest / --c-rule / --c-text-mute.
   ============================================================================ */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form input[type="number"],
.wpforms-form select,
.wpforms-form textarea {
	background-color: #ffffff !important;
	border: 1px solid var(--c-rule) !important;
	color: var(--c-text) !important;
	font-family: var(--ff-sans) !important;
	border-radius: 2px !important;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder {
	color: var(--c-text-mute) !important;
	opacity: 1;
}

.wpforms-form input:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus {
	border-color: var(--c-forest) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(28, 42, 58, 0.08) !important;
}

.wpforms-form .wpforms-field-label,
.wpforms-form .wpforms-field-sublabel {
	color: var(--c-text-soft) !important;
	font-family: var(--ff-sans) !important;
	font-weight: 500 !important;
}

.wpforms-form button[type="submit"].wpforms-submit,
.wpforms-form .wpforms-submit {
	background-color: var(--c-forest) !important;
	border: 1px solid var(--c-forest) !important;
	color: var(--c-text-on-dark) !important;
	font-family: var(--ff-sans) !important;
	font-weight: 600 !important;
	font-size: 0.86rem !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	border-radius: 0 !important;
	padding: 14px 24px !important;
	cursor: pointer !important;
	transition: background-color .2s ease, border-color .2s ease;
}

.wpforms-form button[type="submit"].wpforms-submit:hover,
.wpforms-form .wpforms-submit:hover {
	background-color: var(--c-teal) !important;
	border-color: var(--c-teal) !important;
}

/* ============================================================================
   Service cards — align CTAs + bullet rows across the row  [SK 2026-05-08]
   Existing CSS: .desc has min-height 4.5em (line 1830) and .link has
   margin-top:auto (line 1861), but .copy was display:block so the auto
   margin had no flex context. Make copy a flex column and equalise the
   bullet block so 2-bullet cards don't pull their CTA up.
   ============================================================================ */
.kr-redesign .kr-service__copy {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.kr-redesign .kr-service__points {
	min-height: 140px;   /* fits 3 bullets at current padding/line-height */
}

/* ============================================================================
   Calculator widget — restore serif on age number + ετών label.
   Lines 111-116 force span -> sans !important; this rule wins via higher
   specificity (body.kr-redesign + .class beats body.kr-redesign + element).
   [SK 2026-05-08]
   ============================================================================ */
body.kr-redesign .kr-tool__age-num {
	font-family: var(--ff-serif) !important;
}
body.kr-redesign .kr-tool__age-unit {
	font-family: var(--ff-serif) !important;
	font-style: italic !important;
}

/* ============================================================================
   Calculator widget — focus state + label readability  [SK 2026-05-08]
   1) Replace Chrome's default bright-blue focus outline (out of palette)
      with a brass ring matching the rest of the design system.
   2) Bump section labels from --c-text-mute 11px to --c-text-soft 12px/500
      so "I. Η ΗΛΙΚΙΑ ΣΑΣ" / "II. ΕΠΙΘΥΜΗΤΟΣ..." become readable.
   ============================================================================ */
body.kr-redesign .kr-tool__seg-btn:focus { outline: none; }
body.kr-redesign .kr-tool__seg-btn:focus-visible {
	outline: 2px solid var(--c-brass);
	outline-offset: 2px;
}

body.kr-redesign .kr-tool__field-label {
	color: var(--c-text-soft) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

/* ============================================================================
   Calculator widget — result section contrast  [SK 2026-05-08]
   Heading + 50/70/90% labels were on --c-text-mute (failing contrast).
   Big numbers (9/16/29) were on --c-brass (powder-blue accent, too pale
   for primary data). Bump to deep navy / text-soft for readability.
   ============================================================================ */
body.kr-redesign .kr-tool__result-label {
	color: var(--c-text-soft) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

body.kr-redesign .kr-tool__result-cell-label {
	color: var(--c-text-soft) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
}

body.kr-redesign .kr-tool__result-num {
	color: var(--c-text) !important;
}

/* ============================================================================
   Calculator result cells — flip order so percentage label sits ABOVE the
   number. Reads as "50% πιθανότητα → 10 ωάρια" (probability is the input,
   number is the answer). [SK 2026-05-08]
   ============================================================================ */
body.kr-redesign .kr-tool__result-cell {
	flex-direction: column-reverse;
}


/* ============================================================================
   Calculator result rows — new live-slider layout  [SK 2026-05-08]
   Three labelled rows (mature / total / follicles >11mm) replacing the
   3-cell grid. Probability is now a slider (Field III) above this block.
   ============================================================================ */
body.kr-redesign .kr-tool__result-rows {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--c-rule);
}
body.kr-redesign .kr-tool__result-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 16px 4px;
	border-bottom: 1px solid var(--c-rule);
	gap: 16px;
}
body.kr-redesign .kr-tool__result-row:last-child {
	border-bottom: none;
}
body.kr-redesign .kr-tool__result-row-label {
	font-family: var(--ff-sans) !important;
	font-size: 13px !important;
	color: var(--c-text-soft) !important;
	font-weight: 500 !important;
	letter-spacing: 0.01em;
}
body.kr-redesign .kr-tool__result-row-value {
	font-family: var(--ff-serif) !important;
	font-size: 28px !important;
	font-weight: 400 !important;
	color: var(--c-text) !important;
	line-height: 1;
}


/* ============================================================================
   Calculator — polish pass  [SK 2026-05-08]
   1. Inline % / ετών next to the big number (was floated to far right)
   2. Tabular lining figures so the result column right-aligns cleanly
   3. Smooth opacity transition on value swap (driven by setVal in JS)
   4. Subtitle inside follicles row label
   5. Soft-cap warning style (high mature-count advisory)
   6. Assumptions footnote style (matches disclaimer typographic register)
   ============================================================================ */

/* 1. Inline number + unit — replace the existing space-between layout */
body.kr-redesign .kr-tool__age-row {
	justify-content: flex-start !important;
	align-items: baseline !important;
	gap: 0.4rem !important;
}
body.kr-redesign .kr-tool__age-unit {
	position: static !important;   /* in case prior CSS absolutely-positioned it */
}

/* 2. Tabular lining figures — only on data values, not the editorial display number */
body.kr-redesign .kr-tool__result-row-value {
	font-variant-numeric: tabular-nums lining-nums;
	transition: opacity 0.18s ease;
}

/* 4. Subtitle inside the row label */
body.kr-redesign .kr-tool__result-row-label {
	display: flex !important;
	flex-direction: column;
	gap: 2px;
}
body.kr-redesign .kr-tool__result-row-sublabel {
	font-family: var(--ff-sans) !important;
	font-size: 11px !important;
	color: var(--c-text-mute) !important;
	font-weight: 400 !important;
	text-transform: none;
	letter-spacing: 0;
}

/* 5. Soft-cap warning */
body.kr-redesign .kr-tool__warn {
	margin: 14px 0 0;
	padding: 10px 12px;
	background: rgba(111, 147, 181, 0.10);
	border-left: 2px solid var(--c-brass);
	font-family: var(--ff-sans) !important;
	font-size: 12px !important;
	color: var(--c-text-soft) !important;
	line-height: 1.5;
}

/* 6. Assumptions footnote — between disclaimer and sources */
body.kr-redesign .kr-tool__assumptions {
	margin: 6px 0 0;
	font-family: var(--ff-sans) !important;
	font-size: 11px !important;
	color: var(--c-text-mute) !important;
	line-height: 1.5;
}


/* ============================================================================
   Calculator hierarchy tune  [SK 2026-05-08]
   - Probability "48%" was as big as the age — drop it down so it doesn't
     compete with the result numbers below.
   - Bump result row values + labels so the answers carry the visual weight.
   - Age "34" stays at its current size (kept as the primary patient input).
   ============================================================================ */

/* Probability field — scale the big number down (target via data attr to
   distinguish from the age number which keeps its current size). */
body.kr-redesign [data-kr-prob-display].kr-tool__age-num {
	font-size: clamp(2.2rem, 3.6vw, 3.4rem) !important;   /* up to ~54px (was up to 96px) */
}

/* Result row values — bigger, so the answers dominate */
body.kr-redesign .kr-tool__result-row-value {
	font-size: clamp(2rem, 3vw, 2.6rem) !important;   /* ~32-42px (was 28px) */
	font-weight: 400 !important;
}

/* Result row labels — slightly bolder + larger so they hold their own */
body.kr-redesign .kr-tool__result-row-label {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--c-text) !important;   /* was --c-text-soft; lift contrast a notch */
}

/* Result row vertical breathing — give the bigger numbers a bit more room */
body.kr-redesign .kr-tool__result-row {
	padding: 18px 4px !important;
}


/* ============================================================================
   Gestation calc — segmented-button column counts  [SK 2026-05-08]
   Default .kr-tool__seg uses 3 cols (for 1/2/3 buttons in egg-freezing calc).
   Gestation has 4 day buttons + 2 twins buttons — match column count to
   button count so neither wraps awkwardly.
   ============================================================================ */
body.kr-redesign .kr-tool__seg:has([data-kr-gest-day]) {
	grid-template-columns: repeat(4, 1fr);
}
body.kr-redesign .kr-tool__seg:has([data-kr-gest-twins]) {
	grid-template-columns: repeat(2, 1fr);
}


/* ============================================================================
   Gestation calc — Day buttons: small uppercase eyebrow above big number.
   Strings now hold just '2' / '3' / '5' / '6'; eyebrow comes from CSS so it
   localises with the document language. Number carries visual weight.
   [SK 2026-05-08]
   ============================================================================ */
body.kr-redesign .kr-tool__seg-btn[data-kr-gest-day] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 0;
	line-height: 1;
	gap: 4px;
}
body.kr-redesign .kr-tool__seg-btn[data-kr-gest-day]::before {
	display: block;
	font-family: var(--ff-sans) !important;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-text-mute);
}
body.kr-redesign .kr-tool__seg-btn[data-kr-gest-day].is-active::before {
	color: rgba(243, 247, 250, 0.6);   /* muted on the active dark fill */
}
:lang(el) .kr-tool__seg-btn[data-kr-gest-day]::before { content: 'ΗΜΕΡΑ'; }
:lang(en) .kr-tool__seg-btn[data-kr-gest-day]::before { content: 'DAY'; }


/* ============================================================================
   IVF probability calc — match result number size + 5-col cause grid
   [SK 2026-05-08]
   ============================================================================ */
/* Match IVF bar number size to other result-row values (was up to 48px,
   now matches the egg-freezing 32-42px clamp). */
body.kr-redesign .kr-tool__ivf-bar-num {
	font-size: clamp(2rem, 3vw, 2.6rem) !important;
}

/* Cause-of-infertility row — 5 buttons in one row instead of 3+2 wrap. */
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-cause]),
body.kr-redesign .kr-tool__seg--wrap:has([data-kr-ivf-cause]) {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	flex-wrap: nowrap !important;
}
body.kr-redesign .kr-tool__seg--wrap:has([data-kr-ivf-cause]) .kr-tool__seg-btn {
	flex: unset !important;
	min-width: 0 !important;
	padding: 0.6rem 0.4rem !important;
	font-size: 12px !important;
}

/* Prev-pregnancy row — 2 columns (it's only 2 buttons) */
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-prev]) {
	grid-template-columns: repeat(2, 1fr);
}


/* ============================================================================
   IVF cause buttons — fix overlap on long Greek labels  [SK 2026-05-08]
   The 5-column grid is tight; "Ανωοθυλακιορρηξία" / "Ενδομητρίωση" overflow.
   Force min-width 0 (overrides the .kr-tool__seg--wrap min-width: 7.5rem),
   shrink font + padding, and allow wrapping inside the button.
   ============================================================================ */
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-cause]) .kr-tool__seg-btn,
body.kr-redesign .kr-tool__seg--wrap:has([data-kr-ivf-cause]) .kr-tool__seg-btn {
	min-width: 0 !important;
	flex: unset !important;
	padding: 0.6rem 0.35rem !important;
	font-size: 11px !important;
	line-height: 1.2 !important;
	white-space: normal !important;
	word-break: keep-all;
	hyphens: auto;
	letter-spacing: 0;
	text-transform: none;
}


/* ============================================================================
   IVF cause buttons — clean labels (no hyphenation needed) [SK 2026-05-08]
   Now that "Ανωοθυλακιορρηξία" → "Ανωορρηξία" and "Ανδρικός παράγοντας" →
   "Ανδρικός", all 5 labels fit one line at the 5-column grid. Drop the
   auto-hyphenation that was producing ugly Greek mid-word breaks.
   ============================================================================ */
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-cause]) .kr-tool__seg-btn,
body.kr-redesign .kr-tool__seg--wrap:has([data-kr-ivf-cause]) .kr-tool__seg-btn {
	hyphens: manual !important;
	word-break: normal !important;
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px !important;
	padding: 0.7rem 0.5rem !important;
}


/* ============================================================================
   IVF cause buttons — switch to 3-column grid (3 + 2 rows) [SK 2026-05-08]
   5-col was too narrow even with shortened labels. 3-col gives each button
   ~2x the horizontal space, all words fit single-line, no ellipsis needed.
   ============================================================================ */
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-cause]),
body.kr-redesign .kr-tool__seg--wrap:has([data-kr-ivf-cause]) {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	flex-wrap: nowrap !important;
	gap: 0.5rem;
}
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-cause]) .kr-tool__seg-btn,
body.kr-redesign .kr-tool__seg--wrap:has([data-kr-ivf-cause]) .kr-tool__seg-btn {
	min-width: 0 !important;
	flex: unset !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	hyphens: manual !important;
	word-break: normal !important;
	font-size: 13px !important;
	padding: 0.75rem 0.5rem !important;
	letter-spacing: 0;
	text-transform: none;
}


/* ============================================================================
   IVF cause buttons — 6-col grid, balanced 3+2 layout [SK 2026-05-08]
   Row 1: 3 buttons × span 2 cols = 6 (full row).
   Row 2: 2 buttons × span 3 cols = 6 (full row, no empty col).
   Both rows fill width cleanly — no awkward gap on row 2.
   ============================================================================ */
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-cause]),
body.kr-redesign .kr-tool__seg--wrap:has([data-kr-ivf-cause]) {
	grid-template-columns: repeat(6, 1fr) !important;
}
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-cause]) > [data-kr-ivf-cause],
body.kr-redesign .kr-tool__seg--wrap:has([data-kr-ivf-cause]) > [data-kr-ivf-cause] {
	grid-column: span 2;
}
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-cause]) > [data-kr-ivf-cause]:nth-child(4),
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-cause]) > [data-kr-ivf-cause]:nth-child(5),
body.kr-redesign .kr-tool__seg--wrap:has([data-kr-ivf-cause]) > [data-kr-ivf-cause]:nth-child(4),
body.kr-redesign .kr-tool__seg--wrap:has([data-kr-ivf-cause]) > [data-kr-ivf-cause]:nth-child(5) {
	grid-column: span 3;
}


/* ============================================================================
   IVF prev-pregnancy ΟΧΙ/ΝΑΙ — match cause-button sizing  [SK 2026-05-08]
   Was filling full row at 50% each (oversized vs cause buttons above).
   Now placed in a 6-col grid with each button spanning 2 cols, centered
   (cols 2-3 and 4-5), leaving cols 1 and 6 empty.
   ============================================================================ */
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-prev]) {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr) !important;
	gap: 0.5rem;
}
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-prev]) > [data-kr-ivf-prev]:nth-child(1) {
	grid-column: 2 / span 2;
}
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-prev]) > [data-kr-ivf-prev]:nth-child(2) {
	grid-column: 4 / span 2;
}


/* ============================================================================
   Gestation calc — today-anchor moved out of GA row.  [SK 2026-05-08]
   Now lives below all 3 result rows as a centered single line in muted text,
   so the GA row no longer has a 2-line label.
   ============================================================================ */
body.kr-redesign .kr-tool__gest-today {
	display: block;
	text-align: center;
	margin-top: 14px;
	font-family: var(--ff-sans) !important;
	font-size: 11px !important;
	letter-spacing: 0.06em;
	color: var(--c-text-mute) !important;
	font-weight: 400;
}


/* ============================================================================
   IVF probability calc — sub-tab toggle (Χωρίς PGT-A / Με PGT-A)
   [SK 2026-05-08]
   ============================================================================ */
body.kr-redesign .kr-tool__subtabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	background: rgba(28, 42, 58, 0.06);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 24px;
}
body.kr-redesign .kr-tool__subtab {
	font-family: var(--ff-sans) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 10px 12px;
	border: none;
	background: transparent;
	color: var(--c-text-soft) !important;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}
body.kr-redesign .kr-tool__subtab.is-active {
	background: #ffffff;
	color: var(--c-text) !important;
	box-shadow: 0 1px 2px rgba(28, 42, 58, 0.06);
}
body.kr-redesign .kr-tool__subtab:focus { outline: none; }
body.kr-redesign .kr-tool__subtab:focus-visible {
	outline: 2px solid var(--c-brass);
	outline-offset: 2px;
}

/* PGT-A panel — bars (reuse existing IVF bar styles, just slight tweaks) */
body.kr-redesign [data-kr-ivf-panel="with-pgta"] .kr-tool__ivf-bar-num {
	font-family: var(--ff-serif) !important;
	font-size: clamp(2rem, 3vw, 2.6rem) !important;
	font-weight: 400 !important;
	color: var(--c-text) !important;
}
body.kr-redesign [data-kr-ivf-panel="with-pgta"] .kr-tool__ivf-bar-fill {
	background: linear-gradient(90deg, var(--c-brass), var(--c-text));
}


/* ============================================================================
   IVF prev-pregnancy ΟΧΙ/ΝΑΙ — match cause-button typography  [SK 2026-05-08]
   Was inheriting default .kr-tool__seg-btn style (24px Cormorant) — too loud
   relative to the cause buttons (13px sans). Brings them into line so the
   form reads as a quiet input field rather than a decorative heading.
   ============================================================================ */
body.kr-redesign .kr-tool__seg:has([data-kr-ivf-prev]) .kr-tool__seg-btn {
	font-family: var(--ff-sans) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em;
	text-transform: none;
	padding: 0.7rem 0.5rem !important;
}


/* ============================================================================
   Testimonial card eyebrows — reserve 2-line height so quote text starts
   at the same vertical position across all three cards regardless of how
   many lines the eyebrow wraps to.  [SK 2026-05-08]
   ============================================================================ */
body.kr-redesign .kr-testi__card-tag {
	min-height: calc(2 * 1.4em);   /* 2 lines at the eyebrow's line-height */
	display: block;
}

/* ============================================================================
   Process step titles — reserve 2-line height so the description (body)
   starts at the same vertical position across all four steps, regardless
   of whether the title wraps to 1 or 2 lines.  [SK 2026-05-09]
   line-height of .kr-process__step-title is 1.15 (defined above at L2066).
   ============================================================================ */
body.kr-redesign .kr-process__step-title {
	min-height: calc(2 * 1.15em);
	display: block;
}

/* ============================================================================
   Articles cards — reserve 2-line height on titles so the body text starts
   at the same vertical position across all 5 cards, regardless of whether
   the title wraps to 1 or 2 lines.  [SK 2026-05-09]
   line-height of .kr-article__title is 1.15 (defined above at L1202).
   ============================================================================ */
body.kr-redesign .kr-article__title {
	min-height: calc(2 * 1.15em);
	display: block;
}

/* ============================================================================
   Footer legal links (Privacy · Cookies · Disclaimer) — own row beneath the
   copyright bar.  Sentence case, muted brass, smaller than copyright so they
   read as subordinate utility links, not as a third visual peer to ©/location.
   [SK 2026-05-09]
   ============================================================================ */
body.kr-redesign .kr-footer__legal {
	margin-top: 18px;
	text-align: center;
	font-family: var(--ff-sans);
	font-size: 0.85rem;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(245, 240, 228, 0.45);
}
body.kr-redesign .kr-footer__legal a {
	color: rgba(245, 240, 228, 0.7);
	text-decoration: none;
	transition: color 0.18s ease;
}
body.kr-redesign .kr-footer__legal a:hover {
	color: var(--c-brass);
}
body.kr-redesign .kr-footer__legal span[aria-hidden] {
	margin: 0 0.4em;
	opacity: 0.55;
}

/* ============================================================================
   Legal / utility pages (Privacy, Cookies, Disclaimer) — calmer heading scale
   than the editorial bio/services pages.  The default kr-page-content__title
   at 5rem is too theatrical for legal copy.  [SK 2026-05-09]
   Body class .kr-page--legal is added in template-redesign.php for these slugs.
   ============================================================================ */
body.kr-page--legal .kr-page-content__header {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
body.kr-page--legal .kr-page-content__title {
	font-size: clamp(2rem, 3.6vw, 3rem) !important;
	max-width: none;
}

/* H2: switch to lighter weight, drop italic feel, tighter scale.
   The numbered prefix ("1.", "2.") is part of the heading text — we scope it
   via the ::first-letter pseudo isn't reliable for "1." (two characters), so
   we just rely on font-weight 400 to calm the whole heading. */
body.kr-page--legal .kr-page-content__body h2 {
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
	margin-top: 2.2em !important;
	margin-bottom: 0.4em !important;
	color: var(--c-text);
}
body.kr-page--legal .kr-page-content__body h3 {
	font-weight: 500 !important;
	font-size: clamp(1.1rem, 1.6vw, 1.3rem) !important;
	margin-top: 1.8em !important;
}

/* List spacing — legal pages have a lot of bullet lists; tighten them so
   they don't feel airy. */
body.kr-page--legal .kr-page-content__body ul,
body.kr-page--legal .kr-page-content__body ol {
	padding-left: 1.4em;
	margin-block: 0.8em 1.2em;
}
body.kr-page--legal .kr-page-content__body li {
	margin-block: 0.3em;
}

/* ============================================================================
   Contact pages — hide the contact form.  [SK 2026-05-09]
   Decision: SK's Greek fertility patients reach the practice by phone, not
   by web form. With the form gone, the page surfaces phone / email / address
   / map only, the Privacy Policy gets shorter, and there's no patient PII
   in the WP database.

   We hide via CSS + JS rather than editing Elementor JSON (per SK's directive
   never to edit Elementor JSON directly — it broke the Contact pages on
   2026-05-08).

   The form on this site is NOT a standard Elementor Form widget — it's a
   Contact-Form-7 / WPForms / similar plugin embedded as a shortcode, so
   the .elementor-widget-form selector misses it. We target the generic
   <form> element instead, scoped to <main> to avoid hiding header/footer
   search forms.
   ============================================================================ */

/* Hide any form element inside the page content (not header/footer search). */
body.kr-redesign main form:not(.search-form):not([role="search"]) {
	display: none !important;
}

/* Collapse the wrapping Elementor section / column / row / Container so we
   don't leave a tall empty band of background color above the map block.
   We cover BOTH the legacy section model (.elementor-section + .elementor-
   column) AND the newer Container widget (.e-con, .elementor-element).
   :has() is supported in all current browsers. */
body.kr-redesign main .elementor-section:has(form:not(.search-form):not([role="search"])),
body.kr-redesign main .elementor-top-section:has(form:not(.search-form):not([role="search"])),
body.kr-redesign main .elementor-inner-section:has(form:not(.search-form):not([role="search"])),
body.kr-redesign main .elementor-column:has(form:not(.search-form):not([role="search"])),
body.kr-redesign main .e-con:has(form:not(.search-form):not([role="search"])),
body.kr-redesign main .e-container:has(form:not(.search-form):not([role="search"])),
body.kr-redesign main .elementor-widget-wrap:has(form:not(.search-form):not([role="search"])),
body.kr-redesign main .elementor-element:has(> .elementor-widget-container form),
body.kr-redesign main .elementor-element:has(> form) {
	display: none !important;
}

/* Also collapse the phone-side block previously injected into the form's
   sibling column — the kr-mapblock below already shows the phone, so the
   duplicate is no longer needed. */
body.kr-redesign .kr-phone-side {
	display: none !important;
}

/* ============================================================================
   Contact-page CTA — replaces the form-referencing intro paragraph with a
   playful, action-driving phone button + secondary email line + supportive
   note. The whole thing is centered.  [SK 2026-05-09]

   Structure injected by the rewrite() JS in template-redesign.php:
     <p class="kr-contact-intro-replaced">          (the old intro paragraph)
       <span class="kr-contact-cta-wrap">
         <a class="kr-contact-cta" href="tel:...">  ← the big pill button
           <svg class="kr-contact-cta__icon">...</svg>
           <span class="kr-contact-cta__num">2310 430531</span>
         </a>
       </span>
       <span class="kr-contact-alt">ή στείλτε email στο <a>...</a></span>
       <span class="kr-contact-note">Απαντούμε προσωπικά σε κάθε επικοινωνία.</span>
     </p>
   ============================================================================ */
body.kr-redesign .kr-contact-intro-replaced {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	padding-block: 1rem;
	max-width: none;
}
body.kr-redesign .kr-contact-cta-wrap {
	display: block;
	margin-bottom: 0.4rem;
}

/* The pill button itself — large, dark, brass on hover, lifts subtly. */
body.kr-redesign .kr-contact-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 32px;
	background: var(--c-text);
	color: var(--c-ivory);
	border-radius: 999px;
	font-family: var(--ff-sans);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
	box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.18);
}
body.kr-redesign .kr-contact-cta:hover,
body.kr-redesign .kr-contact-cta:focus-visible {
	transform: translateY(-2px);
	background: var(--c-brass);
	color: var(--c-text);
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.24);
	outline: none;
}
body.kr-redesign .kr-contact-cta__icon {
	width: 22px;
	height: 22px;
	fill: currentColor;
	transform-origin: center;
}
/* Phone icon shakes on hover — playful "ring ring" cue. */
body.kr-redesign .kr-contact-cta:hover .kr-contact-cta__icon,
body.kr-redesign .kr-contact-cta:focus-visible .kr-contact-cta__icon {
	animation: kr-phone-shake 0.6s ease-in-out;
}
@keyframes kr-phone-shake {
	0%, 100% { transform: rotate(0); }
	15%      { transform: rotate(-18deg); }
	30%      { transform: rotate(18deg); }
	45%      { transform: rotate(-12deg); }
	60%      { transform: rotate(12deg); }
	75%      { transform: rotate(-6deg); }
}
body.kr-redesign .kr-contact-cta__num {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

/* Subtle continuous pulse on the resting button so it draws the eye. */
body.kr-redesign .kr-contact-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 999px;
	box-shadow: 0 0 0 0 rgba(176, 138, 78, 0.55);  /* brass tint */
	animation: kr-cta-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
body.kr-redesign .kr-contact-cta {
	position: relative;
}
body.kr-redesign .kr-contact-cta:hover::before,
body.kr-redesign .kr-contact-cta:focus-visible::before {
	animation: none;  /* stop pulsing once the user is engaged */
}
@keyframes kr-cta-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(176, 138, 78, 0.55); }
	70%  { box-shadow: 0 0 0 14px rgba(176, 138, 78, 0); }
	100% { box-shadow: 0 0 0 0   rgba(176, 138, 78, 0); }
}

/* Secondary "or email" line — quieter, sits below the CTA. */
body.kr-redesign .kr-contact-alt {
	display: block;
	font-family: var(--ff-sans);
	font-size: 1rem;
	color: var(--c-text-soft);
	margin-top: 0.4rem;
}
body.kr-redesign .kr-contact-alt a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--c-brass);
	text-underline-offset: 4px;
}
body.kr-redesign .kr-contact-alt a:hover {
	color: var(--c-brass);
}

/* Honour reduced-motion preference: no pulse, no shake. */
@media (prefers-reduced-motion: reduce) {
	body.kr-redesign .kr-contact-cta::before { animation: none; }
	body.kr-redesign .kr-contact-cta:hover .kr-contact-cta__icon,
	body.kr-redesign .kr-contact-cta:focus-visible .kr-contact-cta__icon { animation: none; }
}

/* ============================================================================
   Inline calculator link (.kr-calc-link) — used on the Fertility Preservation
   service card to send visitors to the home-page egg-freezing calculator.
   Styled as a subtle brass chip with an animated arrow on hover so it reads
   clearly as "click here" without breaking the paragraph flow.
   [SK 2026-05-09]
   ============================================================================ */
body.kr-redesign .kr-calc-link {
	display: inline-flex !important;
	align-items: center;
	gap: 0.35em;
	background: rgba(176, 138, 78, 0.14);   /* brass tint @ ~14% */
	color: var(--c-brass) !important;
	padding: 0.15em 0.7em;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, gap 0.18s ease, box-shadow 0.18s ease;
	line-height: 1.4;
	white-space: nowrap;
	vertical-align: baseline;
}
body.kr-redesign .kr-calc-link::after {
	content: '→';
	font-size: 1em;
	transition: transform 0.18s ease;
	display: inline-block;
}
body.kr-redesign .kr-calc-link:hover,
body.kr-redesign .kr-calc-link:focus-visible {
	background: var(--c-brass);
	color: var(--c-ivory) !important;
	transform: translateY(-1px);
	gap: 0.55em;
	box-shadow: 0 4px 14px -4px rgba(176, 138, 78, 0.5);
	outline: none;
}
body.kr-redesign .kr-calc-link:hover::after,
body.kr-redesign .kr-calc-link:focus-visible::after {
	transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
	body.kr-redesign .kr-calc-link,
	body.kr-redesign .kr-calc-link::after { transition: none; }
}

/* ============================================================================
   404 page — Premium Boutique chrome.  [SK 2026-05-09]
   Replaces Astra's default 404 (English-only, old chrome).  Bilingual via
   Polylang language detection in 404.php; the body class kr-page--404 lets
   us scope future tweaks without touching other inner pages.
   ============================================================================ */
body.kr-redesign .kr-404 {
	padding-block: clamp(4rem, 10vw, 8rem);
	background: var(--c-ivory);
}
body.kr-redesign .kr-404__inner {
	max-width: 720px;
	text-align: center;
}
body.kr-redesign .kr-404__eyebrow {
	color: var(--c-brass);
	margin-bottom: 1.5rem;
	font-size: 1rem;
	letter-spacing: 0.3em;
	font-weight: 600;
}
body.kr-redesign .kr-404__title {
	font-family: var(--ff-serif) !important;
	font-size: clamp(2rem, 4vw, 3.2rem) !important;
	font-weight: 400 !important;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--c-text);
	margin: 0 0 1.5rem;
}
body.kr-redesign .kr-404__sub {
	font-family: var(--ff-sans);
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--c-text-soft);
	margin: 0 0 2.5rem;
}
body.kr-redesign .kr-404__choices {
	font-family: var(--ff-sans);
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-mute);
	margin: 0 0 1rem;
}
body.kr-redesign .kr-404__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 1rem;
}
body.kr-redesign .kr-404__links li { display: inline-block; }
body.kr-redesign .kr-404__links a {
	display: inline-block;
	padding: 0.5em 1.2em;
	border: 1px solid var(--c-brass);
	border-radius: 999px;
	color: var(--c-text);
	font-family: var(--ff-sans);
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
body.kr-redesign .kr-404__links a:hover,
body.kr-redesign .kr-404__links a:focus-visible {
	background: var(--c-brass);
	color: var(--c-ivory);
	transform: translateY(-1px);
	outline: none;
}

/* ============================================================================
   News index — list of posts in category 'nea'.  [SK 2026-05-09]
   Used by template-news-index.php.  Editorial list-style: stacked items,
   thin hairline separators, brass date marker, generous spacing.
   ============================================================================ */
body.kr-redesign .kr-news {
	max-width: 820px;
	margin: 0 auto;
	padding-block: 0 clamp(3rem, 7vw, 6rem);
}
body.kr-redesign .kr-news__head {
	text-align: center;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
body.kr-redesign .kr-news__head .kr-eyebrow {
	margin-bottom: 0.8rem;
}
body.kr-redesign .kr-news__title {
	max-width: 18ch;
	margin-inline: auto !important;
}
/* News index — bold magazine, 2026.
   3-column grid:
       [index numeral 80px] [content 1fr] [image 280px]
   The most modern moves: huge italic numeral indices ("01" through
   "04") as a design element on the left rail, dramatic italic
   Cormorant display headlines, single-line tracked date stamp,
   tracked-uppercase brass "READ ARTICLE" affordance, larger imagery,
   subtle vertical hover translate.  CSS counter handles the index
   numbering automatically.  [SK 2026-05-09] */
body.kr-redesign .kr-news {
	max-width: 1040px !important;
}
body.kr-redesign .kr-news__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--c-rule);
}
body.kr-redesign .kr-news__item {
	padding: 0 !important;
	margin: 0 !important;
	border: 0;
	border-bottom: 1px solid var(--c-rule);
	list-style: none;
}

/* Specificity bump (a.kr-news__link with link/visited) needed to beat
   Astra customizer's a:link colour rule, which would otherwise repaint
   the title and excerpt in brass.  [SK 2026-05-09]
   Layout: 2-col grid — content + image.  Left date rail dropped
   per SK 2026-05-09; date is now a quiet eyebrow above the title. */
body.kr-redesign a.kr-news__link,
body.kr-redesign a.kr-news__link:link,
body.kr-redesign a.kr-news__link:visited {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	column-gap: clamp(1.75rem, 3vw, 3rem);
	align-items: start;
	padding: 1.75rem 0 !important;
	margin: 0 !important;
	text-decoration: none !important;
	color: var(--c-text) !important;
	box-shadow: none;
	border-radius: 0;
	transition: transform 0.4s ease;
}
body.kr-redesign .kr-news__item:not(.kr-news__item--has-image) .kr-news__link {
	grid-template-columns: minmax(0, 1fr);
}

/* Date eyebrow — quiet single line above the title.  Format:
   "JUL · 24" — tracked uppercase brass, small.  No display drama,
   no large numerals.  [SK 2026-05-09] */
body.kr-redesign .kr-news__date {
	font-family: var(--ff-sans);
	font-size: 0.72rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--c-brass);
	font-weight: 600;
	margin: 0;
	padding: 0;
	display: block;
	line-height: 1;
}

/* Body — middle column.  Dramatic italic title, sans-serif excerpt,
   tracked-uppercase brass CTA affordance. */
body.kr-redesign .kr-news__body {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-width: 0;
	padding: 0;
	margin: 0;
}
body.kr-redesign .kr-news__item-title {
	font-family: var(--ff-serif) !important;
	font-style: normal !important;
	font-size: clamp(1.25rem, 1.8vw, 1.65rem) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.005em;
	margin: 0 !important;
	padding: 0;
	color: var(--c-text) !important;
	transition: color 0.2s ease;
	display: block;
	overflow: visible;
}
body.kr-redesign .kr-news__excerpt {
	font-family: var(--ff-sans);
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--c-text-mute);
	margin: 0 !important;
	padding: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
body.kr-redesign .kr-news__cta {
	font-family: var(--ff-sans);
	font-size: 0.68rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--c-brass) !important;
	font-weight: 600;
	margin: 0.4rem 0 0 0 !important;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	transition: gap 0.25s ease;
}
body.kr-redesign .kr-news__cta span {
	display: inline-block;
	transition: transform 0.25s ease;
}

/* Thumb — right column.  Fixed 280px, 4:3, sharp corners, slight
   desaturation lifted on hover.  Background placeholder while image
   loads stays ivory. */
body.kr-redesign .kr-news__thumb {
	display: block;
	overflow: hidden;
	background: var(--c-ivory-soft);
	border-radius: 0;
	box-shadow: none;
	width: 280px;
	max-width: 100%;
	margin: 0;
}
body.kr-redesign .kr-news__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.6s ease, filter 0.4s ease;
	border-radius: 0;
	filter: saturate(0.85) contrast(1.02);
}

/* Override for wide-banner featured images (e.g. medical-studies article,
   whose hero is a 1317×417 banner with text — forcing 4:3 + cover crops
   the words off).  Targets the card by permalink. */
body.kr-redesign .kr-news__link[href*="medical-studies"] .kr-news__thumb img {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--c-text, #0a1a14);
}

/* Visited-state override.  Astra paints descendants of :visited
   links in its visited link colour via a descendant selector that
   beats simple class rules in the cascade.  We re-assert the
   intended colours under :visited explicitly with an html prefix
   for extra specificity, so already-clicked posts don't render in
   brass-blue.  [SK 2026-05-09] */
html body.kr-redesign a.kr-news__link:visited .kr-news__item-title,
html body.kr-redesign a.kr-news__link:link    .kr-news__item-title {
	color: var(--c-text) !important;
}
html body.kr-redesign a.kr-news__link:visited .kr-news__date,
html body.kr-redesign a.kr-news__link:link    .kr-news__date,
html body.kr-redesign a.kr-news__link:visited .kr-news__cta,
html body.kr-redesign a.kr-news__link:link    .kr-news__cta {
	color: var(--c-brass) !important;
}
html body.kr-redesign a.kr-news__link:visited .kr-news__excerpt,
html body.kr-redesign a.kr-news__link:link    .kr-news__excerpt {
	color: var(--c-text-mute) !important;
}
body.kr-redesign .kr-news__link:hover .kr-news__item-title,
body.kr-redesign .kr-news__link:focus-visible .kr-news__item-title,
body.kr-redesign a.kr-news__link:visited:hover .kr-news__item-title,
body.kr-redesign a.kr-news__link:visited:focus-visible .kr-news__item-title {
	color: var(--c-brass) !important;
}
body.kr-redesign .kr-news__link:hover .kr-news__thumb img,
body.kr-redesign .kr-news__link:focus-visible .kr-news__thumb img {
	transform: scale(1.04);
	filter: saturate(1) contrast(1);
}
body.kr-redesign .kr-news__link:hover .kr-news__cta span,
body.kr-redesign .kr-news__link:focus-visible .kr-news__cta span {
	transform: translateX(4px);
}

/* Mobile — stack vertically.  Index goes inline with date as a
   compact eyebrow.  Image full-width 16:9. */
@media (max-width: 820px) {
	body.kr-redesign a.kr-news__link,
	body.kr-redesign a.kr-news__link:link,
	body.kr-redesign a.kr-news__link:visited {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1.5rem 0 !important;
	}
	body.kr-redesign .kr-news__item:not(.kr-news__item--has-image) .kr-news__link {
		grid-template-columns: 1fr;
	}
	body.kr-redesign .kr-news__thumb {
		width: 100%;
	}
	body.kr-redesign .kr-news__thumb img {
		aspect-ratio: 16 / 9;
	}
}
body.kr-redesign .kr-news__empty {
	text-align: center;
	font-family: var(--ff-serif);
	font-style: italic;
	font-size: 1.1rem;
	color: var(--c-text-mute);
	padding-block: 4rem;
}

/* Bio pages — CENTER-align both the Distinctions / Selected
   Recognition heading AND the bullet list beneath it, so they read
   as one centred unit.  Per SK 2026-05-09 (override of an earlier
   left-align attempt — the bullet list couldn't be left-aligned to
   match the heading without restructuring the Elementor flex column).
   We override at the rendered-CSS level rather than touching the
   JSON (per "no Elementor JSON edits" rule, 2026-05-08).

   Widget IDs:
     - 2ap86cv → /giatros/        heading "Επιλεγμένες διακρίσεις"
     - b4qs8vv → /giatros/        bullet list
     - vravrwa → /en/biography/   heading "Selected recognition"
     - krstmzz → /en/biography/   bullet list
   [SK 2026-05-09] */
.elementor-element-2ap86cv,
.elementor-element-2ap86cv > .elementor-widget-container,
.elementor-element-2ap86cv .elementor-heading-title,
.elementor-element-vravrwa,
.elementor-element-vravrwa > .elementor-widget-container,
.elementor-element-vravrwa .elementor-heading-title,
.elementor-element-b4qs8vv,
.elementor-element-b4qs8vv > .elementor-widget-container,
.elementor-element-b4qs8vv ul,
.elementor-element-b4qs8vv li,
.elementor-element-krstmzz,
.elementor-element-krstmzz > .elementor-widget-container,
.elementor-element-krstmzz ul,
.elementor-element-krstmzz li {
	text-align: center !important;
}

/* For the lists specifically: pull the bullet inline with the text
   (list-style-position: inside), zero the default left indent, AND
   force the UL to fill the widget container's full width, so the
   bullet+text pair centres on the column midline.  Without the
   explicit width:100%, the UL was rendering at ~820px pinned to the
   left edge of a 1460px column — so text-align:center only centred
   within the narrow band, not across the full column.  [SK 2026-05-09] */
.elementor-element-b4qs8vv ul,
.elementor-element-krstmzz ul {
	list-style-position: inside !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.elementor-element-b4qs8vv li,
.elementor-element-krstmzz li {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}