/*
Mercan theme — main stylesheet (design system, chrome, widget CSS).
This is NOT the WordPress theme header (that lives in style.css); main.css is
enqueued directly by functions.php. Bind colours/fonts to the Elementor globals
via var(--e-global-color-*) — never hardcode hex.
*/

/* Brand font — Gotham Greek (Mercan licensed web fonts, self-hosted) */
@font-face { font-family: 'Gotham Greek'; src: url('fonts/GothamGreek-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham Greek'; src: url('fonts/GothamGreek-Book.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham Greek'; src: url('fonts/GothamGreek-Bold.woff2')  format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham Greek'; src: url('fonts/GothamGreek-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

/* Apply Gotham to text elements (never to icon fonts) */
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.elementor-heading-title, .elementor-widget-text-editor,
.elementor-button, .hfe-nav-menu .hfe-menu-item,
.eael-entry-title, .elementor-counter-number-wrapper,
.elementor-widget-wp-widget-polylang {
	font-family: 'Gotham Greek', Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
}

:root {
	/* Light-only design — keep UA form controls/scrollbars light and opt out of browser force-dark.
	   (Paired with <meta name="color-scheme" content="light"> in header.php.) */
	color-scheme: light;
	--brand-navy:   var(--e-global-color-primary, #1D2442);
	--brand-slate:  var(--e-global-color-secondary, #465469);
	--brand-accent: var(--e-global-color-accent, #B38731);
	--navy-deep: #161C32;
	--ease: cubic-bezier(.22,.61,.36,1);
	--header-h: 78px;
}

/* mixed-weight display headlines: base is light, <strong> emphasis is bold */
#hero .elementor-widget-text-editor strong,
#intro .elementor-widget-text-editor strong,
#portfolio .elementor-widget-text-editor strong,
#metrics .elementor-widget-text-editor strong,
#vision .elementor-widget-text-editor strong,
#news .elementor-widget-text-editor strong,
#cta .elementor-widget-text-editor strong { font-weight: 800; }
#hero .elementor-widget-text-editor p,
#intro .elementor-widget-text-editor p { margin: 0; }

/* =========================================================
   HEADER — fixed; transparent over the hero, navy on scroll
   ========================================================= */
#masthead {
	position: fixed !important;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: var(--header-bg, var(--brand-navy));
	transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
/* let #masthead's own background show through the Elementor containers */
#masthead .e-con, #masthead .e-con-inner { background-color: transparent !important; }
/* transparent at the top of the homepage only */
body.home:not(.site-scrolled) #masthead { background: transparent; }
body.site-scrolled #masthead { box-shadow: 0 8px 30px rgba(0,0,0,.22); }
/* all header text white (over navy / over dark hero) */
#masthead a,
#masthead .elementor-widget-hfe-site-title a,
#masthead .elementor-heading-title,
#masthead .hfe-nav-menu .hfe-menu-item { color: #fff !important; }
#masthead .hfe-nav-menu .hfe-menu-item { font-size: 12px; letter-spacing: .5px; font-weight: 500; text-transform: uppercase; transition: opacity .2s var(--ease); }
#masthead .hfe-nav-menu .hfe-menu-item:hover { opacity: .7; }
#masthead .hfe-nav-menu .menu-item { margin: 0 !important; }
#masthead .hfe-nav-menu .menu-item a.hfe-menu-item { padding-left: 13px !important; padding-right: 13px !important; }

/* Brand logo (Mercan SVG) replaces the text site-title */
#masthead .elementor-widget-hfe-site-title { line-height: 0; }
#masthead .elementor-widget-hfe-site-title a {
	display: inline-block; width: 84px; height: 66px;
	overflow: hidden; text-indent: -9999px; white-space: nowrap;
	background: url('assets/mercan-logo.svg') left center / contain no-repeat;
}
/* push inner-page content below the fixed header (hero on home sits under it) */
body:not(.home) { padding-top: var(--header-h); }

/* language switcher — inline, no bullets */
.elementor-widget-wp-widget-polylang ul { list-style:none; margin:0; padding:0; display:flex; gap:4px; align-items:center; }
.elementor-widget-wp-widget-polylang li { margin:0; }
.elementor-widget-wp-widget-polylang a { display:inline-block; padding:4px 9px; font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; border-radius:2px; transition:background-color .2s var(--ease); }
.elementor-widget-wp-widget-polylang a:hover,
.elementor-widget-wp-widget-polylang li.current-lang a { background: rgba(255,255,255,.15); }

/* =========================================================
   DIAMOND-ACCENTED BUTTONS (skip the hero play button)
   ========================================================= */
.elementor-button .elementor-button-text::before {
	content: "\25C6";
	color: var(--brand-accent);
	margin-right: .65em;
	font-size: .72em;
	vertical-align: middle;
}
#hero .elementor-button .elementor-button-text::before { content: none; }
.elementor-button { transition: transform .2s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.elementor-button:hover { transform: translateY(-2px); }
/* outlined buttons fill on hover */
#intro .elementor-button:hover, #news .elementor-button:hover { background: var(--brand-navy) !important; color:#fff !important; }
#portfolio .elementor-button:hover { background: #fff !important; color: var(--brand-navy) !important; }
#hero .elementor-button:hover { background: rgba(255,255,255,.92) !important; color: var(--brand-navy) !important; }
#hero .elementor-button:hover .elementor-button-icon i { color: var(--brand-navy); }

/* =========================================================
   HERO — parallax handled by theme.js
   ========================================================= */
.js-hero-inner { will-change: transform, opacity; }

/* =========================================================
   PORTFOLIO — cinematic overlay cards (title over image)
   ========================================================= */
#portfolio .eael-grid-post {
	position: relative; overflow: hidden; border-radius: 4px; background: transparent;
}
#portfolio .eael-entry-media,
#portfolio .eael-entry-thumbnail { overflow: hidden; }
#portfolio .eael-entry-media img,
#portfolio .eael-entry-thumbnail img {
	aspect-ratio: 4/5; object-fit: cover; width: 100%;
	transition: transform .7s var(--ease);
}
#portfolio .eael-grid-post:hover .eael-entry-media img,
#portfolio .eael-grid-post:hover .eael-entry-thumbnail img { transform: scale(1.07); }
#portfolio .eael-grid-post::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top, rgba(15,19,38,.92) 0%, rgba(15,19,38,.35) 45%, transparent 70%);
}
#portfolio .eael-entry-wrapper {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 26px 24px; transition: transform .4s var(--ease);
}
#portfolio .eael-grid-post:hover .eael-entry-wrapper { transform: translateY(-6px); }
#portfolio .eael-entry-title { margin: 0; font-size: 24px; line-height: 1.2; }
#portfolio .eael-entry-title a { color: #fff; }
#portfolio .eael-entry-title a:hover { color: #fff; }

/* =========================================================
   PORTFOLIO — scroll-pinned full-bleed carousel ([mercan_portfolio])
   ========================================================= */
.pf-carousel { position: relative; background: var(--brand-navy); }
.pf-sticky { height: 100vh; overflow: hidden; }
.pf-bg { position: absolute; inset: 0; }
.pf-bg::after { content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg, rgba(15,19,38,.85) 0%, rgba(15,19,38,.4) 45%, rgba(15,19,38,.12) 100%); }
.pf-slide { position: absolute; inset: 0; background-size: cover; background-position: center;
	opacity: 0; transform: scale(1.05); transition: opacity 1s var(--ease), transform 7s var(--ease); }
.pf-slide.is-active { opacity: 1; transform: scale(1); }
.pf-caption { position: absolute; z-index: 2; left: max(40px,7%); bottom: 16vh; color: #fff; max-width: 64%; }
.pf-kicker { display: block; color: var(--brand-accent); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; }
.pf-title-window { height: 1.15em; overflow: visible; position: relative; }
.pf-title-stack { display: flex; flex-direction: column; transition: transform .6s var(--ease); }
.pf-title { font-family: 'Gotham Greek', sans-serif !important; font-size: clamp(36px,5.4vw,78px); line-height: 1.12; font-weight: 300;
	color: rgba(255,255,255,.30); text-decoration: none; white-space: nowrap; transition: color .5s var(--ease); }
.pf-title.is-active { color: #fff; }
#pf-carousel .pf-next { margin-top: 36px; width: 60px !important; height: 60px !important; min-width: 0; padding: 0 !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,.55) !important;
	background: transparent !important; color: #fff !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: none !important; transition: background .3s var(--ease), color .3s var(--ease); }
#pf-carousel .pf-next:hover { background: #fff !important; color: var(--brand-navy) !important; }
#pf-carousel .pf-next svg { display: block; }
.pf-progress { position: absolute; z-index: 2; left: max(40px,7%); right: max(40px,7%); bottom: 8vh; height: 2px; background: rgba(255,255,255,.2); }
.pf-progress-bar { display: block; height: 100%; width: 0; background: #fff; }
@media (max-width: 768px) { .pf-caption { max-width: 88%; left: 24px; } .pf-title { font-size: 32px; } }

/* =========================================================
   METRICS — flat gradient bar chart ([mercan_metrics])
   Refreshed away from LAMDA's 3D isometric look: flat navy→gold
   bars with rounded tops, a gold diamond marker (no ring), no
   dotted leader line, and a thin gold baseline under the row.
   ========================================================= */
.mx-wrap { max-width: 1240px; margin: 0 auto; }
.mx-heading { color: #fff !important; font-weight: 300; font-size: clamp(28px,3.4vw,42px); margin: 0 0 90px; }
.mx-heading strong { font-weight: 800; }
.mx-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; border-bottom: 1px solid color-mix(in srgb, var(--brand-accent), transparent 62%); }
.mx { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 170px; min-width: 150px; }
.mx-dot { width: 12px; height: 12px; border-radius: 1px; background: var(--brand-accent); box-shadow: none; transform: rotate(45deg); margin-bottom: 18px; }
.mx-fig { color: #fff; font-weight: 300; font-size: clamp(42px,4.6vw,62px); line-height: 1; display: inline-flex; align-items: flex-start; }
.mx-num { font-style: normal; }
.mx-pre { font-weight: 300; margin-right: 1px; }
.mx-link { text-decoration: none; color: inherit; }
.mx-row.mx-cols-2 .mx { flex: 1 1 calc(50% - 26px); }
.mx-row.mx-cols-3 .mx { flex: 1 1 calc(33.33% - 26px); }
.mx-row.mx-cols-4 .mx { flex: 1 1 calc(25% - 26px); }
.mx-row.mx-cols-5 .mx { flex: 1 1 calc(20% - 26px); }
.mx-unit { font-size: 14px; font-weight: 400; color: rgba(255,255,255,.7); margin-left: 6px; top: .35em; }
.mx-label { color: #9aa3bd; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin: 16px 0 0; max-width: 200px; line-height: 1.5; }
.mx-stem { display: none; }
.mx-bar { position: relative; width: 54px; height: var(--h); margin-top: 6px; }
.mx-bar-fill { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: linear-gradient(to top, color-mix(in srgb, var(--brand-accent), var(--brand-navy) 58%), var(--brand-accent)); border-radius: 7px 7px 0 0; transition: height 1.2s var(--ease); }
/* flat bars — LAMDA's 3D isometric top/side faces removed */
.mx-bar-fill::before, .mx-bar-fill::after { display: none; }
.mx.in .mx-bar-fill { height: 100%; }
/* Metrics mobile layout is consolidated into the MOBILE OPTIMISATION PASS block (end of file) —
   the old `.mx{flex:42%}` here was dead, out-specified by `.mx-row.mx-cols-N .mx`. */

/* =========================================================
   VISION — image/text slider with dot pagination ([mercan_vision])
   ========================================================= */
.vs { width: 100%; }
.vs-head { max-width: 1240px; margin: 0 auto 54px; padding: 0 24px; text-align: center; }
.vs-kicker { display: block; color: var(--brand-accent); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.vs-title { color: var(--brand-navy); font-weight: 300; font-size: clamp(28px,3.4vw,44px); margin: 0; }
.vs-title strong { font-weight: 800; }
.vs-stage { position: relative; width: 100%; }
.vs-slides { position: relative; height: calc(100vh - 80px); min-height: 480px; overflow: hidden; z-index: 1; }
/* LAMDA three-slides reveal: slides are stacked, z-index set inline per slide (earlier = on top).
   An outgoing slide's image slides LEFT and uncovers the next image waiting beneath it, while its
   text panel rises and fades. Images only ever move left, so they never overlap the text column. */
.vs-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 52% 48%; grid-template-rows: 100%; }
.vs-img { position: relative; overflow: hidden; background: color-mix(in srgb, var(--brand-slate) 7%, #fff); transform: translateX(0); transition: transform .9s var(--ease); will-change: transform; }
.vs-slide.is-past .vs-img { transform: translateX(-101%); }
/* Contain (not cover) so the whole image stays visible — uncropped — while the holder keeps its
   full-height footprint; an opaque mat fills the letterbox (and hides the stacked slides behind).
   The <img> is absolutely positioned (top/left + 100%) to fill the box, with the selector
   qualified (.vs-slide .vs-img img) to out-specify Elementor's `.elementor img { height:auto }`,
   which would otherwise collapse it via its width/height-attr aspect-ratio. */
.vs-slide .vs-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.vs-txt { display: flex; flex-direction: column; justify-content: center; padding: 0 9% 0 6%; transform: translateY(34px); opacity: 0; transition: transform .9s var(--ease), opacity .7s var(--ease); will-change: transform, opacity; }
.vs-slide.is-active .vs-txt { transform: translateY(0); opacity: 1; }
.vs-slide.is-past .vs-txt { transform: translateY(-34px); opacity: 0; }
.vs-k { display: block; color: var(--brand-accent); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }
.vs-h { color: var(--brand-navy); font-weight: 700; font-size: clamp(28px,2.8vw,40px); line-height: 1.15; margin: 0 0 20px; }
.vs-p { color: var(--brand-slate); font-size: 19px; line-height: 1.75; margin: 0 0 30px; max-width: 520px; }
.vs-btn { align-self: flex-start; display: inline-block; padding: 16px 34px; border: 1px solid var(--brand-navy); color: var(--brand-navy); background: transparent; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: background .25s var(--ease), color .25s var(--ease); }
.vs-btn:hover { background: var(--brand-navy); color: #fff; }
.vs-dots { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 18px; z-index: 3; }
#vision .vs-dot, .elementor-widget-mercan-vision .vs-dot { width: 11px !important; height: 11px !important; min-width: 0; border-radius: 50%; border: none; background: #cbd0dc; cursor: pointer; padding: 0 !important; box-shadow: none; line-height: 0; transition: background .3s var(--ease), transform .3s var(--ease); }
#vision .vs-dot.is-active, .elementor-widget-mercan-vision .vs-dot.is-active { background: var(--brand-accent); transform: scale(1.4); }
@media (prefers-reduced-motion: reduce) {
	.vs-slide { opacity: 0; transition: opacity .35s var(--ease); }
	.vs-slide.is-active { opacity: 1; }
	.vs-img, .vs-img img, .vs-txt { transform: none !important; }
	.vs-txt { opacity: 1; }
}
@media (max-width: 900px) {
	.vs-slides { height: 640px; }
	.vs-slide { grid-template-columns: 1fr; grid-template-rows: 250px 1fr; }
	.vs-txt { padding: 28px 24px 0; }
	.vs-dots { right: 16px; }
}

/* =========================================================
   NEWS — flat cards (image, accent date, rule, bold title)
   ========================================================= */
#news .eael-grid-post { background: transparent; box-shadow: none; border-radius: 0; }
#news .eael-entry-media,
#news .eael-entry-thumbnail { overflow: hidden; border-radius: 3px; }
#news .eael-entry-media img,
#news .eael-entry-thumbnail img { aspect-ratio: 3/2; object-fit: cover; width: 100%; transition: transform .6s var(--ease); }
#news .eael-grid-post:hover .eael-entry-media img { transform: scale(1.05); }
#news .eael-entry-wrapper { padding: 18px 2px 0; }
#news .eael-entry-meta,
#news .eael-posted-on,
#news .eael-entry-meta * { font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--brand-accent) !important; }
#news .eael-entry-title { margin-top: 12px; padding-top: 14px; border-top: 1px solid #d9dce4; font-size: 20px; line-height: 1.3; font-weight: 600; }
#news .eael-entry-title a { color: var(--brand-navy); }
#news .eael-entry-title a:hover { color: var(--brand-accent); }

/* =========================================================
   FOOTER
   ========================================================= */
#colophon .hfe-nav-menu .hfe-menu-item { color:#C7CCDA; font-size:15px; padding:4px 0; transition:color .2s var(--ease); }
#colophon .hfe-nav-menu .hfe-menu-item:hover { color:#fff; }
#colophon a { color:#C7CCDA; }

/* =========================================================
   Floating Mercan Labs promo card
   ========================================================= */
.labs-card { position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 998;
	width: 300px; max-width: calc(100vw - 48px); background: var(--brand-navy); color: #fff;
	border-radius: 14px; padding: 28px 24px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.35);
	transition: transform .5s var(--ease), opacity .5s var(--ease); }
.labs-card.is-closed { transform: translate(140%, -50%); opacity: 0; pointer-events: none; }
.labs-close { position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border: none;
	border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: background .2s var(--ease); }
.labs-close:hover { background: rgba(255,255,255,.25); }
.labs-badge { display: inline-block; font-weight: 800; font-size: 20px; letter-spacing: 1px; color: #fff; margin-bottom: 16px; }
.labs-badge b { display: block; font-weight: 300; font-size: 13px; letter-spacing: 5px; color: var(--brand-accent); }
.labs-text { font-size: 14px; line-height: 1.6; color: #c7ccda; margin: 0 0 18px; }
.labs-btn { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #fff; text-decoration: none; }
.labs-btn::before { content: "\25C6"; color: var(--brand-accent); margin-right: 8px; font-size: .8em; }
.labs-btn:hover { color: var(--brand-accent); }
@media (max-width: 768px) {
	/* Hide the floating Mercan Labs promo on mobile — it overlapped page content. */
	.labs-card { display: none !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
	#vision .elementor-widget-image img, .elementor-widget-mercan-vision .elementor-widget-image img { aspect-ratio: 16/9; }
}
@media (max-width: 767px) {
	#portfolio .eael-entry-title { font-size: 20px; }
	#metrics .elementor-heading-title { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
	.js-hero-inner { transform:none !important; opacity:1 !important; }
}

/* =========================================================
   Custom-theme chrome (PHP header/footer)
   ========================================================= */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--header-bg, var(--brand-navy)); transition: background .35s var(--ease), box-shadow .35s var(--ease); }
.site-header__inner { display: flex; align-items: center; gap: 28px; padding: 16px 40px; }
.site-logo { flex: 0 0 auto; line-height: 0; }
.site-logo img { width: 84px; height: auto; display: block; }
.site-logo--text { display: inline-flex; align-items: center; line-height: 1; text-decoration: none; }
.site-logo__text { font-family: 'Gotham Greek', Arial, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: .3px; color: #fff; white-space: nowrap; }
.site-nav { margin-left: auto; }
.site-menu { display: flex; list-style: none; margin: 0; padding: 0; }
.site-menu li { margin: 0; }
.site-menu > li > a { display: block; padding: 8px 13px; color: #fff; text-decoration: none; font-size: 12px; letter-spacing: .5px; font-weight: 500; text-transform: uppercase; transition: opacity .2s var(--ease); }
.site-menu > li > a:hover, .site-menu .current-menu-item > a { opacity: .65; }
/* dropdown sub-menus */
.site-header { overflow: visible; }
.site-menu .menu-item-has-children { position: relative; }
.site-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 240px; margin: 0; padding: 12px 0; list-style: none; background: var(--brand-navy); box-shadow: 0 16px 36px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 1001; }
.site-menu .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-menu .sub-menu li { margin: 0; }
.site-menu .sub-menu a { display: block; padding: 10px 22px; text-transform: none; letter-spacing: .2px; font-size: 13px; font-weight: 400; white-space: nowrap; opacity: .85; }
.site-menu .sub-menu a:hover { opacity: 1; background: rgba(255,255,255,.08); }
.site-lang ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-lang a { display: inline-block; padding: 4px 9px; color: #fff; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; border-radius: 2px; transition: background .2s var(--ease); }
.site-lang a:hover, .site-lang .current-lang a { background: rgba(255,255,255,.15); }
.site-lang.is-vertical ul { flex-direction: column; align-items: flex-start; }
.site-lang li:not(:last-child)::after { content: var(--lang-sep); margin: 0 4px; opacity: .55; }
.site-lang { display: inline-flex; align-items: center; }
/* "Login" link after the language switcher — goes to the Mercan client portal. */
.site-login { margin-left: 18px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; opacity: .85; white-space: nowrap; text-decoration: none; transition: opacity .2s ease; }
a.site-login:hover, a.site-login:focus { color: #fff; opacity: 1; }
.mercan-social__label { font-size: 14px; line-height: 1; }
body.home:not(.site-scrolled) .site-header { background: transparent; }
body.site-scrolled .site-header { box-shadow: 0 8px 30px rgba(0,0,0,.22); }
body:not(.home) { padding-top: var(--header-h); }
.site-burger { display: none; }

.site-footer { background: var(--footer-bg, var(--brand-navy)); color: #c7ccda; padding: 80px 40px 28px; }
.site-footer__cols { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 44px 40px; justify-content: space-between; align-items: flex-start; }
.ft-col { flex: 1 1 200px; }
.ft-brand { flex: 1 1 260px; }
.ft-logo { width: 96px; height: auto; margin-bottom: 16px; }
.ft-col h4 { color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.ft-col p { font-size: 14px; line-height: 1.7; color: #c7ccda; }
.ft-col a { color: #c7ccda; text-decoration: none; }
.ft-col a:hover { color: #fff; }
.ft-menu { list-style: none; margin: 0; padding: 0; }
.ft-menu li { margin: 0 0 8px; }
.ft-menu a { font-size: 15px; }
.ft-social { display: flex; gap: 14px; margin-top: 18px; font-size: 16px; }
.ft-social a { color: #fff; }
.ft-social a:hover { color: var(--brand-accent); }
.site-footer__bar { max-width: 1240px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: 13px; }
.site-footer__bar a { color: #c7ccda; }
.ft-copy { color: #8b92a8; }

/* Option-driven contact + social widgets (light default; footer = navy) */
.mercan-contact { display: flex; flex-direction: column; gap: 5px; }
.mercan-contact .lc-tagline { font-size: 14px; line-height: 1.7; margin: 0 0 10px; color: var(--brand-slate); }
.mercan-contact .lc-company { font-size: 16px; font-weight: 600; color: var(--brand-navy); margin-bottom: 4px; }
.mercan-contact .lc-line { font-size: 14px; line-height: 1.8; color: var(--brand-slate); text-decoration: none; }
.mercan-contact a.lc-line:hover { color: var(--brand-accent); }
.mercan-social { display: flex; gap: 12px; margin-top: 18px; }
.mercan-social__link { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(0,0,0,.06); color: var(--brand-navy); font-size: 16px; transition: background .2s var(--ease), color .2s var(--ease); }
.mercan-social__link:hover { background: var(--brand-accent); color: #fff; }
.site-footer .mercan-contact .lc-tagline, .site-footer .mercan-contact .lc-line { color: #c7ccda; }
.site-footer .mercan-contact .lc-company { color: #fff; }
.site-footer .mercan-contact a.lc-line:hover { color: #fff; }
.site-footer .mercan-social__link { background: rgba(255,255,255,.08); color: #fff; }
.site-footer .mercan-social__link:hover { background: var(--brand-accent); }
.site-footer .wpcf7 .nl-field { display: flex; align-items: center; gap: 6px; max-width: 380px; border-bottom: 1px solid rgba(255,255,255,.35); }
.site-footer .wpcf7 .wpcf7-form-control-wrap { flex: 1; }
.site-footer .wpcf7 input[type=email] { width: 100%; background: transparent; border: none; color: #fff; padding: 12px 2px; font-size: 15px; }
.site-footer .wpcf7 input[type=email]::placeholder { color: rgba(255,255,255,.5); }
.site-footer .wpcf7 input[type=submit] { background: transparent; border: none; color: var(--brand-accent); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; transition: transform .2s var(--ease); }
.site-footer .wpcf7 input[type=submit]:hover { transform: translateX(3px); }
.site-footer .wpcf7-spinner { display: none; }
/* footer text links grey (not the default blue) */
.site-footer .elementor-widget-text-editor a, .site-footer .ft-menu a { color: #c7ccda !important; transition: color .2s var(--ease); }
.site-footer .elementor-widget-text-editor a:hover, .site-footer .ft-menu a:hover { color: #fff !important; }
/* footer social icons */
.site-footer .elementor-social-icon { background: rgba(255,255,255,.08) !important; width: 38px; height: 38px; transition: background .2s var(--ease); }
.site-footer .elementor-social-icon:hover { background: var(--brand-accent) !important; }
.site-footer .elementor-widget-social-icons { margin-top: 8px; }

.page-shell { max-width: 900px; margin: 0 auto; padding: 70px 24px 90px; }
.page-title { color: var(--brand-navy); margin-bottom: 24px; }
.page-shell .page-content > p { font-size: 19px; line-height: 1.7; color: var(--brand-slate); }
.page-shell .wpcf7 { margin-top: 30px; }
.page-shell .wpcf7 p { margin: 0 0 18px; }
.page-shell .wpcf7 label { display: block; font-size: 13px; letter-spacing: .4px; color: var(--brand-navy); font-weight: 600; }
.page-shell .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]), .page-shell .wpcf7 textarea, .page-shell .wpcf7 select { width: 100%; border: 1px solid #d6d6d6; border-radius: 3px; padding: 13px 14px; font-family: inherit; font-size: 15px; margin-top: 6px; background: #fff; }
/* Focus indicator — must out-specify the base field rule above (its :not() chain is 0,5,1),
   else the navy border never shows and outline:none leaves no focus ring at all (a11y). */
.page-shell .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]):focus,
.page-shell .wpcf7 textarea:focus,
.page-shell .wpcf7 select:focus { outline: none; border-color: var(--brand-navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-navy) 20%, transparent); }
.page-shell .wpcf7 input[type=submit] { width: auto; background: var(--brand-navy); color: #fff; border: none; padding: 15px 36px; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 3px; margin-top: 6px; transition: background .25s var(--ease); }
.page-shell .wpcf7 input[type=submit]:hover { background: var(--brand-accent); }
/* Contact-center department grid (builder `grid` sections): bordered text cells, LAMDA-style. */
.mc-grid-cell { border-top: 1px solid #d9dce4; padding-top: 22px; }
.mc-grid-cell .elementor-heading-title { font-size: 17px; letter-spacing: .2px; }
.mc-grid-cell p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: var(--brand-slate); }
.mc-grid-cell a { color: var(--brand-accent); text-decoration: none; font-weight: 600; }
.mc-grid-cell a:hover { color: var(--brand-navy); }

/* The rebuilt contact page embeds CF7 via the Elementor shortcode widget (no .page-shell wrapper) — same design-system styling. */
.elementor-widget-shortcode .wpcf7 { margin-top: 10px; }
.elementor-widget-shortcode .wpcf7 p { margin: 0 0 18px; }
.elementor-widget-shortcode .wpcf7 label { display: block; font-size: 13px; letter-spacing: .4px; color: var(--brand-navy); font-weight: 600; }
.elementor-widget-shortcode .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]), .elementor-widget-shortcode .wpcf7 textarea, .elementor-widget-shortcode .wpcf7 select { width: 100%; box-sizing: border-box; max-width: 100%; border: 1px solid #d6d6d6; border-radius: 3px; padding: 13px 14px; font-family: inherit; font-size: 15px; margin-top: 6px; background: #fff; }
.elementor-widget-shortcode .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]):focus,
.elementor-widget-shortcode .wpcf7 textarea:focus,
.elementor-widget-shortcode .wpcf7 select:focus { outline: none; border-color: var(--brand-navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-navy) 20%, transparent); }
.elementor-widget-shortcode .wpcf7 input[type=submit] { width: auto; background: var(--brand-navy); color: #fff; border: none; padding: 15px 36px; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 3px; margin-top: 6px; transition: background .25s var(--ease); }
.elementor-widget-shortcode .wpcf7 input[type=submit]:hover { background: var(--brand-accent); }
/* Captcha image + code input side by side; consent checkbox inline with its text. */
.wpcf7 img.wpcf7-captchac { display: inline-block; vertical-align: middle; height: 46px; width: auto; border: 1px solid #d6d6d6; border-radius: 3px; margin: 6px 12px 0 0; background: #fff; }
.wpcf7 input.wpcf7-captchar { display: inline-block !important; vertical-align: middle; width: 130px !important; text-align: center; letter-spacing: 3px; }
.wpcf7 .wpcf7-acceptance label { display: inline-flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; color: var(--brand-slate); line-height: 1.5; text-transform: none; letter-spacing: 0; }
.wpcf7 .wpcf7-acceptance input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--brand-accent); }
.wpcf7 .wpcf7-acceptance a { color: var(--brand-accent); font-weight: 600; text-decoration: none; }
.wpcf7 .wpcf7-acceptance a:hover { color: var(--brand-navy); }

/* =========================================================
   Inner pages — archive (listing) + single (detail)
   ========================================================= */
.page-hero { background: var(--brand-navy); padding: 72px 40px; }
.page-hero__inner { max-width: 1240px; margin: 0 auto; }
.page-hero__kicker { display: block; color: var(--brand-accent); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.page-hero__title { color: #fff !important; font-weight: 300; font-size: clamp(32px,4vw,56px); margin: 0; }

.archive { max-width: 1240px; margin: 0 auto; padding: 80px 24px 100px; }
.archive-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 44px 36px; }
.arch-card { text-decoration: none; display: block; }
.arch-card__img { display: block; overflow: hidden; border-radius: 3px; background: #eef0f4; }
/* height:auto is required so the img's HTML height attribute doesn't defeat aspect-ratio —
   archive.php is a theme template (NOT inside .elementor), so it lacks Elementor's img{height:auto} reset. */
.arch-card__img img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.arch-card:hover .arch-card__img img { transform: scale(1.05); }
.arch-card__meta { display: block; margin-top: 16px; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--brand-accent); }
.arch-card__title { margin: 10px 0 0; font-size: 21px; line-height: 1.25; font-weight: 600; color: var(--brand-navy); transition: color .2s var(--ease); }
.arch-card:hover .arch-card__title { color: var(--brand-accent); }
.archive-pagination { margin-top: 60px; text-align: center; }
.archive-pagination .page-numbers { padding: 8px 14px; color: var(--brand-navy); text-decoration: none; }
.archive-pagination .current { color: var(--brand-accent); font-weight: 700; }
.archive-empty { max-width: 1240px; margin: 0 auto; padding: 80px 24px; }

/* --- Blog (News) archive: filter tabs + category-badged cards on navy --- */
.blog-filters { background: var(--brand-navy); padding: 4px 24px 0; }
.blog-filters__inner { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.08); }
.blog-filter { display: inline-block; padding: 11px 22px; border-radius: 4px; font-size: 13px; font-weight: 600; letter-spacing: .5px; color: #c7ccda; text-decoration: none; transition: color .2s var(--ease), background .2s var(--ease); }
.blog-filter:hover { color: #fff; }
.blog-filter.is-active { background: var(--brand-accent); color: var(--brand-navy); }
.archive--blog { background: var(--brand-navy); }
.archive--blog .archive-pagination .page-numbers { color: #c7ccda; }
.archive--blog .archive-pagination .current { color: var(--brand-accent); }
.arch-card--blog { background: #fff; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.arch-card--blog .arch-card__img { border-radius: 0; }
.arch-card--blog .arch-card__img img { aspect-ratio: 16/10; }
.arch-card__body { display: flex; flex-direction: column; padding: 22px 22px 26px; }
.arch-card__cat { align-self: flex-start; padding: 5px 12px; border: 1px solid #d9dce4; border-radius: 3px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--brand-slate); margin-bottom: 16px; }
.arch-card--blog .arch-card__title { margin-top: 0; font-size: 20px; }
.arch-card__excerpt { display: block; margin-top: 12px; font-size: 14px; line-height: 1.6; color: #5a6378; }
.arch-card--blog .arch-card__meta { margin-top: auto; padding-top: 18px; color: #9aa3bd; }

body.single-project, body.single-news { padding-top: 0; }
.single-hero { position: relative; min-height: 68vh; display: flex; align-items: flex-end; background-size: cover; background-position: center; background-color: var(--brand-navy); }
.single-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,19,38,.85), rgba(15,19,38,.25)); }
.single-hero__inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; width: 100%; padding: 120px 40px 60px; }
.single-hero__kicker { display: block; color: #fff; opacity: .85; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.single-hero__title { color: #fff !important; font-weight: 300; font-size: clamp(34px,4.5vw,60px); line-height: 1.1; margin: 0; max-width: 900px; }
.single-hero__date { display: block; margin-top: 16px; color: #fff; opacity: .8; font-size: 14px; letter-spacing: 1px; }
.single-body { max-width: 820px; margin: 0 auto; padding: 80px 24px 100px; }
.single-body__inner { font-size: 19px; line-height: 1.8; color: var(--brand-slate); }
.single-body__inner p { margin: 0 0 1.4em; }
/* Real-content imports embed full-size figures/galleries — never let them exceed the column (688px overflow at 360px otherwise). */
.single-body img { max-width: 100%; height: auto; }
.single-body .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
.single-body .gallery .gallery-item { margin: 0; }
.single-body .gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; display: block; }
@media (max-width: 700px) { .single-body .gallery { grid-template-columns: repeat(2, 1fr); } }
.single-back { margin-top: 40px; }
/* The Ellinikon destination — district rows */
#ellinikon .elementor-widget-image img { aspect-ratio: 4/3; object-fit: cover; width: 100%; border-radius: 3px; display: block; }
@media (max-width: 900px) { #ellinikon .e-con .e-con { width: 100% !important; } }
@media (max-width: 900px) { .archive-grid { grid-template-columns: 1fr; } .single-hero { min-height: 52vh; } }

@media (max-width: 900px) {
	/* --- Inner-page content clears the now-60px header (Customizer prints an inline
	       body{--header-h:Npx} with no !important, so beat it at body scope). --- */
	:root { --header-h: 60px; }
	body { --header-h: 60px !important; }
	body:not(.home) { padding-top: 60px; }

	/* --- Fallback (.site-header__inner) markup — only live if the Elementor header template is absent. --- */
	.site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--brand-navy); padding: 12px 22px; margin: 0; }
	.site-nav.is-open { display: block; }
	.site-nav .site-menu { flex-direction: column; }

	/* --- Collapse the Elementor header template (logo + nav + lang) into ONE ~60px row.
	       The outer e-con wrapped (logo too wide) and the block-sibling burger dropped to a
	       3rd row → 158px header. Force the outer e-con to a single nowrap row; zero the
	       e-con min-heights; pin the burger absolutely in the fixed header. --- */
	.site-header { min-height: 60px; }
	.site-header > .elementor,
	.site-header > .elementor .e-con,
	.site-header > .elementor .e-con-inner { min-height: 0 !important; }
	.site-header > .elementor > .e-con {
		min-height: 60px !important;
		padding: 0 64px 0 22px !important;
		flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important;
	}
	.site-logo__text { font-size: 17px; letter-spacing: .2px; }
	.site-logo img { width: 64px; }

	/* --- Burger: neutralise Elementor's inflated button padding (computed 100×52) back to a
	       44px tap target, pinned top-right inside the fixed header. --- */
	.site-header .site-burger, button.site-burger {
		display: flex; flex-direction: column; position: absolute; top: 0; right: 14px;
		width: 44px; height: 60px; margin: 0; cursor: pointer;
		min-width: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
		align-items: center; justify-content: center; gap: 5px; line-height: 0;
	}
	.site-header .site-burger span { width: 22px; height: 2px; background: #fff; display: block; }

	/* --- Nav + lang are hidden until the burger opens, then their shared inner e-con drops as
	       ONE fixed, scrollable panel directly under the bar (anchoring to .site-header.nav-open's
	       raised stacking context, above the cookie banner). --- */
	.site-header .mercan-nav, .site-header .site-lang { display: none; }
	.site-header.nav-open { z-index: 100002; }
	.site-header.nav-open > .elementor > .e-con > .e-con {
		position: fixed !important; top: 60px; left: 0; right: 0;
		flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 2px;
		background: var(--brand-navy); padding: 8px 22px 18px !important;
		max-height: calc(100svh - 60px); overflow-y: auto; -webkit-overflow-scrolling: touch;
	}
	.site-header.nav-open .mercan-nav, .site-header.nav-open .site-lang { display: block; }
	/* lang switcher to the top of the drawer (otherwise it sits below the full mega tree) */
	.site-header.nav-open .elementor-widget-mercan-lang { order: -1; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
	.site-header.nav-open .mercan-nav .site-menu { flex-direction: column; }
	.site-header.nav-open .site-menu > li > a { padding: 12px 2px; }
	.site-header.nav-open .site-menu .sub-menu a { padding: 13px 12px; }
	.site-header.nav-open .site-lang ul { justify-content: flex-start; gap: 6px; padding-top: 8px; }
	/* In the mobile drawer the login sits on its own line — drop the inline divider. */
	.site-header.nav-open .site-login { display: block; margin: 10px 0 0; padding: 11px 14px 0; border: 0; opacity: 1; }
	.site-header.nav-open .site-lang a,
	.site-header.nav-open .elementor-widget-wp-widget-polylang a { padding: 11px 14px; min-height: 44px; display: inline-flex; align-items: center; }
	/* keep the scroll-to-top button from floating over the open drawer's links */
	.site-header.nav-open ~ .mercan-totop { display: none; }
}
/* the Elementor header container should not force its own min-height */
.site-header > .elementor { width: 100%; }

/* =========================================================
   Hero widget ([Mercan Hero])
   ========================================================= */
.lh-hero { position: relative; display: flex; align-items: flex-end; background-size: cover; background-position: center; overflow: hidden; }
.lh-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Hero media slider — stacked slides crossfade; active slide gets a slow Ken Burns zoom. */
.lh-hero--slider .lh-bg { opacity: 0; transition: opacity 1.4s var(--ease); }
.lh-hero--slider .lh-bg.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.lh-hero--slider .lh-bg.is-active { animation: lh-slide-zoom 9s ease-out forwards; }
}
@keyframes lh-slide-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }

/* =========================================================
   Scroll-reveal effects (.mrv) — theme.js adds the classes,
   so content stays fully visible without JS. Reduced-motion
   users never get the classes at all.
   ========================================================= */
.mrv { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--mrv-delay, 0s); will-change: opacity, transform; }
.mrv.mrv-in { opacity: 1; transform: none; }
.mercan-empty { padding: 40px; text-align: center; color: var(--brand-slate); border: 1px dashed rgba(0,0,0,.2); border-radius: 6px; font-size: 14px; }
.project-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px 28px; margin: 36px 0 0; padding: 28px 0 0; border-top: 1px solid rgba(0,0,0,.1); }
.project-facts dt { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-slate); margin: 0 0 4px; }
.project-facts dd { margin: 0; font-size: 17px; color: var(--brand-navy); font-weight: 600; }
.project-facts a { color: var(--brand-accent); text-decoration: none; }
.lh-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lh-overlay { position: absolute; inset: 0; background: rgba(20,26,48,.55); z-index: 1; }
.lh-inner { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 120px 40px 90px; }
.lh-kicker { display: block; color: var(--brand-accent); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; }
.lh-hero .lh-headline { color: #fff !important; font-weight: 300; font-size: clamp(34px,5vw,66px); line-height: 1.08; margin: 0 0 30px; max-width: 1000px; }
.lh-hero .lh-headline strong { font-weight: 800; color: #fff !important; }
.lh-btn { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.7); border-radius: 60px; padding: 15px 30px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; transition: background .3s var(--ease), color .3s var(--ease); }
.lh-btn:hover { background: #fff; color: var(--brand-navy); }
.lh-play { font-size: .82em; }
.lh-inner .lh-btn + .lh-btn { margin-left: 14px; }
.lh-btn--secondary { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.lh-btn--secondary:hover { background: #fff; color: var(--brand-navy); border-color: #fff; }
.lh-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); color: #fff; opacity: .85; z-index: 2; animation: mercan-bounce 1.8s var(--ease) infinite; }
@keyframes mercan-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* =========================================================
   Content widgets: Intro / News / CTA
   ========================================================= */
.ln-intro { max-width: 1240px; margin: 0 auto; }
.ln-intro-h { color: var(--brand-navy); font-weight: 300; font-size: clamp(28px,3.4vw,52px); line-height: 1.1; margin: 0 0 26px; }
.ln-intro-h strong { font-weight: 800; }
.ln-intro-body { display: flex; align-items: flex-start; gap: 40px; }
.ln-intro-copy { max-width: 60%; }
.ln-intro-copy p { font-size: 20px; line-height: 1.7; color: var(--brand-slate); margin: 0 0 22px; }
.ln-btn-outline { display: inline-block; padding: 16px 34px; border: 1px solid var(--brand-navy); color: var(--brand-navy); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: background .25s var(--ease), color .25s var(--ease); }
.ln-btn-outline::before { content: "\25C6"; color: var(--brand-accent); margin-right: .6em; font-size: .72em; }
.ln-btn-outline:hover { background: var(--brand-navy); color: #fff; }

.ln-news { max-width: 1240px; margin: 0 auto; }
.ln-news-h { color: var(--brand-navy); font-weight: 300; font-size: clamp(28px,3.2vw,44px); margin: 0 0 44px; }
.ln-news-h strong { font-weight: 800; }
.ln-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.ln-card { text-decoration: none; display: block; }
.ln-card-img { display: block; overflow: hidden; border-radius: 3px; }
.ln-card-img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .6s var(--ease); }
.ln-card:hover .ln-card-img img { transform: scale(1.05); }
.ln-card-meta { display: block; margin-top: 18px; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--brand-accent); }
/* News widget — category filter tabs + per-card badge (in-place JS filtering) */
.ln-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: -8px 0 40px; }
.ln-filter { padding: 11px 22px; border: none; background: transparent; border-radius: 4px; font-family: 'Gotham Greek', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .5px; color: var(--brand-slate); cursor: pointer; transition: color .2s var(--ease), background .2s var(--ease); }
.ln-filter:hover { color: var(--brand-navy); }
.ln-filter.is-active { background: var(--brand-accent); color: #fff; }
.ln-card-cat { display: inline-block; margin-top: 18px; padding: 5px 12px; border: 1px solid #d9dce4; border-radius: 3px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--brand-slate); }
.ln-card-cat + .ln-card-meta { margin-top: 10px; }
.ln-hidden { display: none !important; }
.ln-news-more { text-align: center; margin-top: 44px; }
.ln-news-more[hidden] { display: none; }
.ln-loadmore { cursor: pointer; background: transparent; font-family: 'Gotham Greek', Arial, 'Helvetica Neue', Helvetica, sans-serif; }
.ln-loadmore[disabled] { opacity: .5; cursor: default; }
.ln-news.is-loading .ln-grid { opacity: .45; pointer-events: none; transition: opacity .2s var(--ease); }
.ln-card-title { margin: 12px 0 0; padding-top: 14px; border-top: 1px solid #d9dce4; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--brand-navy); transition: color .2s var(--ease); }
.ln-card:hover .ln-card-title { color: var(--brand-accent); }
.ln-card-excerpt { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--brand-slate); }
.ln-news-foot { text-align: center; margin-top: 48px; }

/* About-CTA block ([mercan_about]) — homepage, below the contact section */
.mercan-about { max-width: 1240px; margin: 0 auto; }
.mercan-about__cta { display: inline-block; background: var(--brand-navy); color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 22px 44px; min-width: min(520px, 100%); text-align: center; transition: background .25s var(--ease); }
.mercan-about__cta:hover { background: var(--brand-accent); }
.mercan-about__nav { margin-top: 40px; max-width: 520px; }
.mercan-about__main { display: inline-flex; align-items: center; gap: 14px; color: var(--brand-navy); text-decoration: none; font-size: clamp(19px, 2vw, 23px); font-weight: 300; }
.mercan-about__arrow { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #c7ccda; border-radius: 50%; font-size: 15px; transition: border-color .2s var(--ease), color .2s var(--ease); }
.mercan-about__main:hover { color: var(--brand-accent); }
.mercan-about__main:hover .mercan-about__arrow { border-color: var(--brand-accent); color: var(--brand-accent); }
.mercan-about__subs { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 22px; padding-top: 22px; border-top: 1px solid #e3e6ec; }
.mercan-about__sub { color: var(--brand-slate); text-decoration: none; font-size: 13px; letter-spacing: .4px; transition: color .2s var(--ease); }
.mercan-about__sub:hover { color: var(--brand-accent); }

/* Framed office map ([type:map] — contact page) */
#office-map .elementor-widget-heading { margin-bottom: 8px; }
#office-map .elementor-widget-google_maps { margin-top: 26px; }
#office-map .elementor-widget-google_maps .elementor-custom-embed { border-radius: 12px; overflow: hidden; box-shadow: 0 26px 60px rgba(20,26,48,.18); border: 1px solid #e3e6ec; }
#office-map .elementor-widget-google_maps iframe { display: block; filter: grayscale(.12) saturate(.96); transition: filter .45s var(--ease); }
#office-map .elementor-widget-google_maps:hover iframe { filter: none; }

.ln-cta { max-width: 1240px; margin: 0 auto; text-align: center; }
.ln-cta-h { color: #fff; font-weight: 300; font-size: clamp(28px,3.2vw,44px); margin: 0 0 26px; }
.ln-cta-h strong { font-weight: 800; }
.ln-cta-sub { color: rgba(255,255,255,.82); font-size: 18px; line-height: 1.6; margin: 0 0 28px; }
.ln-cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; }
.ln-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--brand-accent); padding: 16px 38px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: transform .2s var(--ease); }
.ln-cta-btn:hover { transform: translateY(-2px); }
.ln-cta-btn--alt { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.ln-cta-btn--alt:hover { background: rgba(255,255,255,.12); }
.ln-cta-btn-ico { display: inline-flex; line-height: 0; }
@media (max-width: 900px) { .ln-grid { grid-template-columns: 1fr; gap: 30px; } .ln-intro-body { flex-direction: column; } .ln-intro-copy { max-width: 100%; } }

/* =========================================================
   Accessibility: skip link + visible keyboard focus
   ========================================================= */
.skip-link { position: absolute; left: 8px; top: -64px; z-index: 100001; background: var(--brand-navy); color: #fff; padding: 12px 22px; border-radius: 0 0 6px 6px; text-decoration: none; font-size: 14px; font-weight: 600; transition: top .2s var(--ease); }
.skip-link:focus { top: 0; }
.site-main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }

/* =========================================================
   Cookie consent notice (bilingual, localStorage-gated)
   ========================================================= */
.mercan-cookie { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 200%); z-index: 100000; width: min(960px, calc(100% - 40px)); background: var(--brand-navy); color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.35); padding: 20px 24px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; transition: transform .4s var(--ease); }
.mercan-cookie.is-visible { transform: translate(-50%, 0); }
.mercan-cookie__text { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.88); }
.mercan-cookie__text a { color: #fff; text-decoration: underline; }
.mercan-cookie__actions { display: flex; gap: 12px; flex: 0 0 auto; }
.mercan-cookie__btn { cursor: pointer; border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; padding: 11px 22px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 50px; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.mercan-cookie__btn--accept { background: #fff; color: var(--brand-navy); border-color: #fff; }
.mercan-cookie__btn:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
@media (max-width: 600px) { .mercan-cookie { bottom: 0; border-radius: 10px 10px 0 0; } .mercan-cookie__actions { width: 100%; } .mercan-cookie__btn { flex: 1; } }

/* =========================================================
   THEME OPTIONS HOOKS — consume Customizer body classes / vars
   (each rule is inert until the matching option is set)
   ========================================================= */
/* "Always solid" header: keep it solid even at the top of the homepage. */
body.header-solid.home:not(.site-scrolled) #masthead,
body.header-solid.home:not(.site-scrolled) .site-header { background: var(--header-bg, var(--brand-navy)); }
/* Disable the scrolled drop-shadow. */
body.no-header-shadow.site-scrolled #masthead,
body.no-header-shadow.site-scrolled .site-header { box-shadow: none; }
/* Hide the diamond ◆ accent on all buttons. */
body.no-diamond .elementor-button .elementor-button-text::before,
body.no-diamond .ln-btn-outline::before,
body.no-diamond .labs-btn::before,
body.no-diamond .mega-promo-btn::before { content: none; }
/* Optional Customizer-driven legal line below the footer. */
.site-footer__legal { max-width: 1240px; margin: 18px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.10); font-size: 13px; color: #8b92a8; text-align: center; }
/* Scroll-to-top button (Customizer-toggled). */
.mercan-totop { position: fixed; right: 22px; bottom: 22px; z-index: 9999; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: var(--brand-navy); color: #fff; cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s var(--ease); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.mercan-totop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mercan-totop:hover { background: var(--brand-accent); }

/* =========================================================
   MEGA MENU (mercan-nav --mega) — full-width panels
   ========================================================= */
.mercan-nav--mega .site-menu { position: static; }
.site-menu > li.has-mega { position: static; }
.site-menu > li.has-mega > a { display: inline-flex; align-items: center; gap: 5px; }
.mega-panel {
	position: fixed; left: 0; right: 0; top: var(--mega-top, 78px);
	background: #fff; color: var(--brand-navy);
	box-shadow: 0 28px 60px rgba(0,0,0,.16); border-top: 1px solid #eceef3;
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
	z-index: 1001;
}
.site-menu > li.has-mega.is-open > .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner {
	max-width: 1240px; margin: 0 auto; padding: 44px 40px 52px;
	display: grid; grid-template-columns: 1fr 340px;
	grid-template-areas: "intro promo" "cols promo"; gap: 0 56px;
}
.mega-intro { grid-area: intro; display: flex; align-items: center; gap: 16px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid #e7e9ef; }
.mega-intro-h { font-size: 24px; font-weight: 300; color: var(--brand-navy); }
.mega-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #cfd3dd; color: var(--brand-navy); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.mega-arrow:hover { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
.mega-cols { grid-area: cols; display: flex; flex-wrap: wrap; gap: 26px 56px; align-content: flex-start; }
.mega-col { min-width: 180px; }
.mega-col-h { display: block; color: var(--brand-accent); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
.mega-list { list-style: none; margin: 0; padding: 0; }
/* Up to 2 columns, but only when there's room (≥200px each) — a short/narrow leaf list
   (e.g. About Us) stays a single column instead of cramming into ~110px columns that wrap. */
.mega-list--multi { columns: 200px 2; column-gap: 56px; }
.mega-list li { margin: 0 0 12px; break-inside: avoid; }
.mega-list a { color: var(--brand-slate); text-decoration: none; font-size: 15px; line-height: 1.4; white-space: nowrap; transition: color .2s var(--ease); }
.mega-list a:hover { color: var(--brand-accent); }
.mega-promo { grid-area: promo; display: flex; flex-direction: column; text-decoration: none; background: #f6f7f9; border-radius: 8px; overflow: hidden; align-self: start; transition: box-shadow .25s var(--ease); }
.mega-promo:hover { box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.mega-promo-img { display: block; height: 175px; background-size: cover; background-position: center; }
/* Imageless promo card: no fixed height — the frame hugs its text (client fix 2026-07-14). */
.mega-promo--plain { background: var(--brand-navy); color: #fff; }
.mega-promo-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.mega-promo-h { font-size: 16px; font-weight: 700; color: var(--brand-navy); line-height: 1.3; }
.mega-promo--plain .mega-promo-h { color: #fff; }
.mega-promo-text { font-size: 13px; line-height: 1.55; color: var(--brand-slate); }
.mega-promo--plain .mega-promo-text { color: rgba(255,255,255,.82); }
.mega-promo-btn { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--brand-accent); }
.mega-promo-btn::before { content: "\25C6"; margin-right: 7px; font-size: .8em; }
.mega-promo--plain .mega-promo-btn { color: #fff; }

@media (max-width: 900px) {
	/* Accordion in the burger drawer: each section's panel is collapsed until its
	   parent <li> gets .is-open (toggled by theme.js on tap). One section open at a time. */
	.mega-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; border: 0; max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
	.site-menu > li.has-mega.is-open > .mega-panel { max-height: 1800px; }
	.mega-inner { display: block; padding: 4px 0 12px 10px; }
	.mega-cols { display: block; }
	.mega-col { margin-bottom: 12px; }
	.mega-col-h { color: rgba(255,255,255,.6); margin-bottom: 8px; }
	.mega-list--multi { columns: 1; }
	.mega-list li { margin: 0; }
	.mega-list a { color: #fff; font-size: 14px; display: block; padding: 9px 0; opacity: .9; }
	.mega-intro { border: 0; margin: 0 0 4px; padding: 4px 0; }
	.mega-intro-h { color: #fff; font-size: 15px; opacity: .7; }
	.mega-arrow { display: inline-flex; width: 30px; height: 30px; border-color: rgba(255,255,255,.4); color: #fff; }
	.mega-promo { display: none; }

	/* Expand/collapse chevron on each top-level section that has children. */
	.site-header.nav-open .site-menu > li.has-mega > a { justify-content: space-between; }
	.site-header.nav-open .site-menu > li.has-mega > a::after {
		content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-left: 12px;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); opacity: .85;
	}
	.site-header.nav-open .site-menu > li.has-mega.is-open > a::after { transform: rotate(-135deg) translateY(2px); }
}

/* =========================================================
   MOBILE OPTIMISATION PASS (2026-06-01)
   Empirical audit @320/360/768 + 6-agent review. Every rule below is
   inside a max-width query or provably width-invariant, so desktop
   (>=901px) renders byte-identically. Header fixes live in the
   @media(max-width:900px) chrome block above.
   ========================================================= */

/* Box-sizing safety for the custom (non-Elementor) .page-shell form controls — width:100% +
   padding painted ~6px past the viewport (Contact @360). Scoped to mobile so desktop is
   untouched (the .page-shell field content-box width on desktop is pre-existing + out of scope). */
@media (max-width: 900px) {
	.page-shell .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
	.page-shell .wpcf7 textarea,
	.page-shell .wpcf7 select,
	.site-footer .wpcf7 input[type=email] { box-sizing: border-box; max-width: 100%; }
}

/* Skip-link / anchor landing offsets the fixed header (content was tucking under it). */
.site-main { scroll-margin-top: calc(var(--header-h) + 8px); }

/* Inner-page titles: the Elementor kit emits `.elementor-kit-4 h1{60px}/h2{44px}` (0,1,1)
   which beats the single-class clamp (0,1,0), so the 56px max was dead and long unbreakable
   Greek words overflowed (+52px Contact @360, +92px @320). Compound selectors (0,2,0)
   reclaim the cascade and enable word-breaking. */
@media (max-width: 600px) {
	.page-hero .page-hero__title,
	.page-shell .page-title { font-size: clamp(26px, 8.5vw, 34px); overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
	.single-hero .single-hero__title { font-size: clamp(26px, 8.5vw, 36px); overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
	.lh-hero .lh-headline { font-size: clamp(28px, 8vw, 40px); line-height: 1.12; margin-bottom: 22px; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
	.ln-intro .ln-intro-h,
	.ln-cta .ln-cta-h,
	.ln-news .ln-news-h { font-size: clamp(24px, 7.2vw, 32px); overflow-wrap: break-word; hyphens: auto; }
	/* native <h2>/<h3> widget headings also lose their clamp to the kit (.elementor-kit-4 h2{44px}/h3) —
	   compound selectors (0,2,0) reclaim a sensible mobile size (no overflow, just oversized before). */
	.mx-wrap .mx-heading { font-size: clamp(24px, 6.5vw, 30px); }
	.vs-head .vs-title { font-size: clamp(24px, 6.5vw, 30px); }
	.vs-txt .vs-h { font-size: clamp(22px, 6vw, 28px); }
}

/* Native Elementor Heading widgets carry the band titles on the Elementor-built sub-pages and
   inherit the kit's h1{60px}/h2{44px} with no word-breaking — a long Greek word overflowed +172px
   @360 (e.g. "Βιώσιμη Χρηματοδότηση"). Allow breaking on mobile + scale the big headings down.
   `.elementor-widget-heading h1` (0,2,1) beats `.elementor-kit-4 h1` (0,1,1) but stays under any
   per-widget Elementor size (.elementor-element-ID .elementor-heading-title = 0,2,0… set responsively). */
@media (max-width: 900px) {
	.elementor-heading-title { overflow-wrap: break-word; word-break: break-word; }
}
@media (max-width: 600px) {
	.elementor-widget-heading h1.elementor-heading-title { font-size: clamp(28px, 8vw, 40px); line-height: 1.15; }
	.elementor-widget-heading h2.elementor-heading-title { font-size: clamp(24px, 6.5vw, 34px); line-height: 1.2; }
}

/* Roomier side padding + tighter vertical rhythm for the 40px-padded sections on small phones,
   and stack the (up to two) hero buttons full-width instead of a ragged wrapped margin-left. */
@media (max-width: 600px) {
	.lh-inner { padding: 96px 22px 64px; }
	.page-hero { padding: 52px 22px; }
	.single-hero__inner { padding: 96px 22px 44px; }
	.site-footer { padding: 56px 22px 24px; }
	.mega-inner { padding-left: 22px; padding-right: 22px; }
	.lh-inner .lh-btn { display: flex; width: 100%; justify-content: center; padding: 15px 22px; }
	.lh-inner .lh-btn + .lh-btn { margin-left: 0; margin-top: 12px; }
	.pf-title { font-size: 26px; }
	.mx-label { font-size: 12px; }
}

/* Tablet / large-phone 2-col tier for the theme's own card grids (were 3-col → 1-col straight). */
@media (min-width: 601px) and (max-width: 900px) {
	.archive-grid, .ln-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.archive-grid, .ln-grid { grid-template-columns: 1fr; }
}

/* METRICS: the old @768 `.mx{flex:42%}` was dead (out-specified by `.mx-cols-N .mx`) and
   `min-width:150px` forced 1-col with full inline-`--h` bars (~370px). Reclaim specificity,
   drop the floor, cap the bar height (min() still honours smaller authored bars). */
@media (max-width: 900px) {
	.mx-row { gap: 34px 18px; border-bottom: none; }
	.mx-row .mx { min-width: 0; flex: 1 1 calc(50% - 18px); }
	.mx-row.mx-cols-2 .mx, .mx-row.mx-cols-3 .mx, .mx-row.mx-cols-4 .mx, .mx-row.mx-cols-5 .mx { flex: 1 1 calc(50% - 18px); }
	.mx-bar { width: 44px; height: min(var(--h), 120px); }
	.mx-heading { margin: 0 0 40px; }
}

/* VISION dots: keep the 11px visual dot but lift the hit area to 44px via a transparent ::after
   (box-sizing-independent). Pinned carousel uses the stable small-viewport height (no URL-bar jump). */
@media (max-width: 900px) {
	#vision .vs-dot, .elementor-widget-mercan-vision .vs-dot { position: relative; overflow: visible; }
	#vision .vs-dot::after, .elementor-widget-mercan-vision .vs-dot::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; }
	.pf-sticky { height: 100svh; }
}

/* Tap-target floors for the stacked mobile menus + footer contact links. */
@media (max-width: 900px) {
	.mega-list a { display: block; padding: 12px 0; }
	#colophon .hfe-nav-menu .hfe-menu-item { padding: 12px 0; }
	.site-footer .ft-menu a { display: block; padding: 11px 0; }
	.site-footer a.lc-line { display: block; min-height: 44px; padding: 9px 0; line-height: 1.5; }
}

/* Fixed overlays: 44px cookie buttons; lift the labs card above the bottom-0 cookie band +
   the to-top button (the `.mercan-cookie ~ .labs-card` lift is a no-op — labs prints first). */
@media (max-width: 600px) {
	.mercan-cookie__btn { padding: 14px 22px; min-height: 44px; }
	.labs-card { left: 14px; right: 14px; bottom: 92px; top: auto; transform: none; }
	.labs-card.is-closed { transform: translateY(360%); }
	/* lift the labs promo above the full-width cookie band (~190px tall) ONLY while it is showing;
	   theme.js adds body.cc-open with the banner and removes it on consent → labs drops back to 92px. */
	body.cc-open .labs-card { bottom: 220px; }
}
@media (max-width: 360px) {
	.mercan-cookie { gap: 12px; padding: 16px; }
	.mercan-cookie__actions { gap: 10px; }
}

/* Landscape / very short viewports: drop the heavy hero min-heights so the first view isn't
   one full screen of empty hero. (The open drawer already scrolls via max-height in the header block.) */
@media (max-width: 900px) and (max-height: 520px) {
	.lh-hero, .single-hero { min-height: 0 !important; }
	.lh-inner { padding-top: 84px; padding-bottom: 40px; }
	.single-hero__inner { padding-top: 84px; padding-bottom: 32px; }
}

/* =========================================================
   INNER-PAGE CONTENT WIDGETS — Testimonial + Cards
   ========================================================= */
.mx-quote { display: flex; gap: 44px; align-items: center; max-width: 1100px; margin: 0 auto; }
.mx-quote__media { flex: 0 0 240px; }
.mx-quote__img { width: 240px; height: 240px; object-fit: cover; border-radius: 8px; display: block; }
.mx-quote__text { font-size: clamp(20px, 2.1vw, 28px); line-height: 1.5; font-weight: 300; color: var(--brand-navy); margin: 0 0 20px; }
.mx-quote__text strong { font-weight: 700; }
.mx-quote__cite { display: flex; flex-direction: column; }
.mx-quote__name { font-weight: 700; color: var(--brand-navy); font-size: 16px; }
.mx-quote__role { color: var(--brand-slate); font-size: 14px; margin-top: 2px; }

.mx-cards { max-width: 1240px; margin: 0 auto; }
.mx-cards__h { color: var(--brand-navy); font-weight: 300; font-size: clamp(28px, 3vw, 42px); margin: 0 0 40px; }
.mx-cards__h strong { font-weight: 800; }
.mx-cards__grid { display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr); }
.mx-cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mx-cards--cols-4 { grid-template-columns: repeat(4, 1fr); }
.mx-card { text-decoration: none; display: flex; flex-direction: column; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.06); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.mx-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.12); }
.mx-card__img { display: block; aspect-ratio: 3/2; overflow: hidden; background: #eef0f4; }
.mx-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-card__title { font-size: 21px; font-weight: 600; color: var(--brand-navy); line-height: 1.25; padding: 22px 24px 0; }
.mx-card__text { font-size: 15px; line-height: 1.6; color: var(--brand-slate); padding: 10px 24px 0; flex: 1 1 auto; }
.mx-card__link { padding: 16px 24px 24px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-accent); }
.mx-card__link::after { content: " \2192"; }
@media (min-width: 601px) and (max-width: 900px) { .mx-cards__grid, .mx-cards--cols-3, .mx-cards--cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
	.mx-cards__grid, .mx-cards--cols-2, .mx-cards--cols-3, .mx-cards--cols-4 { grid-template-columns: 1fr; }
	.mx-quote { flex-direction: column; text-align: center; gap: 22px; }
	.mx-quote__media { flex: 0 0 auto; }
	.mx-quote__img { width: 140px; height: 140px; border-radius: 50%; }
	.mx-quote__cite { align-items: center; }
}

/* Content document / award lists (Elementor icon-list widget). FontAwesome is removed from the
   theme, so the icon span is empty — hide it and use a CSS accent marker instead. */
.elementor-widget-icon-list .elementor-icon-list-icon { display: none !important; }
.elementor-widget-icon-list .elementor-icon-list-text { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.5; color: var(--brand-slate); transition: color .2s var(--ease); overflow-wrap: break-word; }
.elementor-widget-icon-list .elementor-icon-list-text::before { content: "\203A"; position: absolute; left: 2px; top: -1px; color: var(--brand-accent); font-weight: 700; }
.elementor-widget-icon-list a:hover .elementor-icon-list-text { color: var(--brand-accent); }

/* ============================================================
   Mercan section widgets: accordion, gallery + lightbox, logos
   ============================================================ */

/* --- Accordion (mercan-accordion) --- */
.mx-acc { max-width: 980px; margin: 0 auto; }
.mx-acc__h { font-size: clamp(24px, 4vw, 34px); line-height: 1.15; color: var(--brand-navy); margin: 0 0 24px; }
.mx-acc__item { border-bottom: 1px solid #e3e6ec; }
.mx-acc__head { width: 100%; display: flex; align-items: center; gap: 18px; padding: 20px 6px; margin: 0; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.mx-acc__meta { flex: 0 0 auto; min-width: 56px; max-width: 42%; color: var(--brand-accent); font-weight: 700; font-size: 14px; letter-spacing: 1px; overflow-wrap: anywhere; }
.mx-acc__title { flex: 1 1 auto; min-width: 0; color: var(--brand-navy); font-weight: 600; font-size: clamp(16px, 2.4vw, 18px); line-height: 1.4; overflow-wrap: anywhere; }
.mx-acc__ico { flex: 0 0 auto; position: relative; width: 18px; height: 18px; }
.mx-acc__ico::before, .mx-acc__ico::after { content: ""; position: absolute; background: var(--brand-navy); transition: transform .25s var(--ease); }
.mx-acc__ico::before { top: 8px; left: 0; width: 18px; height: 2px; }
.mx-acc__ico::after { top: 0; left: 8px; width: 2px; height: 18px; }
.mx-acc__item.is-open .mx-acc__ico::after { transform: scaleY(0); }
.mx-acc__panel { max-height: 0; overflow: hidden; transition: max-height .32s var(--ease); }
.mx-acc__inner { padding: 0 6px 22px; color: var(--brand-slate); line-height: 1.65; }
.mx-acc__inner > :first-child { margin-top: 0; }

/* --- Gallery (mercan-gallery) --- */
.mx-gal__h { font-size: clamp(24px, 4vw, 34px); line-height: 1.15; color: var(--brand-navy); margin: 0 0 24px; }
.mx-gal__grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.mx-gal__grid.mx-gal--cols-1 { grid-template-columns: 1fr; }
.mx-gal__grid.mx-gal--cols-2 { grid-template-columns: repeat(2, 1fr); }
.mx-gal__grid.mx-gal--cols-3 { grid-template-columns: repeat(3, 1fr); }
.mx-gal__grid.mx-gal--cols-4 { grid-template-columns: repeat(4, 1fr); }
.mx-gal__item { display: block; overflow: hidden; border-radius: 8px; line-height: 0; }
.mx-gal__img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .45s var(--ease); }
.mx-gal__grid.mx-gal--cols-1 .mx-gal__img { aspect-ratio: auto; }   /* single full image (e.g. org chart) — uncropped */
.mx-gal__item[data-zoom] { cursor: zoom-in; }
.mx-gal__item:hover .mx-gal__img { transform: scale(1.04); }

/* --- Lightbox overlay (shared) --- */
.mx-lightbox { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 28px; background: rgba(8, 10, 22, .93); }
.mx-lightbox.is-open { display: flex; }
.mx-lightbox img { max-width: 94vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.mx-lightbox__close { position: absolute; top: 14px; right: 22px; width: 44px; height: 44px; background: none; border: 0; color: #fff; font-size: 38px; line-height: 1; cursor: pointer; }
body.mx-lightbox-open { overflow: hidden; }

/* --- Logos strip (mercan-logos) --- */
.mx-logos__h { text-align: center; color: var(--brand-slate); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 22px; }
.mx-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 48px; }
.mx-logos .mx-logos__img { height: 54px !important; width: auto !important; max-width: 180px; object-fit: contain; }
.mx-logos--gray .mx-logos__img { filter: grayscale(1); opacity: .65; transition: filter .3s var(--ease), opacity .3s var(--ease); }
.mx-logos--gray .mx-logos__img:hover { filter: none; opacity: 1; }
.mx-logos__item { display: inline-flex; align-items: center; }

/* Continuous carousel mode: one flat track holding the logo set twice, shifted -50% for a seamless loop. */
.mx-logos__viewport { overflow: hidden; }
.mx-logos--carousel .mx-logos__item { flex: 0 0 auto; padding: 0 40px; }
.mx-logos__track { display: flex; align-items: center; width: max-content; animation: mx-logos-marquee 36s linear infinite; }
.mx-logos__viewport:hover .mx-logos__track { animation-play-state: paused; }
@keyframes mx-logos-marquee { to { transform: translateX(-50%); } }
@media (max-width: 781px) {
	.mx-logos--carousel .mx-logos__item { padding: 0 24px; }
	.mx-logos--carousel .mx-logos__img { height: 40px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.mx-logos__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; gap: 30px 0; }
	.mx-logos__track .mx-logos__item[aria-hidden] { display: none; }
}

@media (max-width: 781px) {
	.mx-gal__grid.mx-gal--cols-3, .mx-gal__grid.mx-gal--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.mx-gal__grid.mx-gal--cols-2, .mx-gal__grid.mx-gal--cols-3, .mx-gal__grid.mx-gal--cols-4 { grid-template-columns: 1fr; }
	.mx-acc__head { gap: 12px; padding: 16px 2px; }
	.mx-acc__meta { min-width: 52px; font-size: 13px; }
}

/* =========================================================
   Investor Portal redirect page (interstitial / no-JS fallback)
   ========================================================= */
.portal-redirect { text-align: center; }
.portal-redirect p { font-size: 20px; line-height: 1.7; color: var(--brand-slate); margin: 0 0 26px; }
.portal-redirect__action { margin: 0; }