/*
Theme Name: RT-Theme 18 Child
Theme URI: https://iontech.iscona.com/
Description: Child theme за RT-Theme 18 (IONTECH). Съдържа само визуални overrides (CSS) — не променя core файловете на родителската тема.
Author: IONTECH
Author URI: https://iontech.iscona.com/
Template: rttheme18
Version: 1.7.8
Text Domain: rttheme18-child
*/

/* ==========================================================================
   IONTECH — Custom overrides
   Всички визуални корекции се добавят по-долу. Файлът се зарежда след
   всички стилове на родителската тема (виж functions.php, priority 100),
   така че override-ите тук печелят при еднаква специфичност на селекторите.
   ========================================================================== */

:root{
	--iontech-blue: #4593BC;
	--iontech-blue-dark: #2c5f7d;
	--iontech-navy: #1c3b4a;
	--iontech-gold: #e0a336;
	--iontech-ink: #2b3a42;
	--iontech-muted: #6d7d85;
	--iontech-line: #e7edf0;
	--iontech-bg-soft: #f4f8fa;
	--iontech-gray-bg: #eef1f3;
	--iontech-gray-icon: #b7c2c8;
}

/* shared "no photo" placeholder — soft light grey block with a picture icon,
   used both on archive cards and on single project pages */
.iontech-photo-placeholder{
	display:block;
	border-radius:8px;
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%23b7c2c8' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='13' width='50' height='38' rx='5'/><circle cx='23' cy='27' r='5'/><path d='M7 43l13-12 9 8 9-7 16 13'/></g></svg>") no-repeat center / 42px 42px,
		var(--iontech-gray-bg);
}

/* --------------------------------------------------------------------------
   1. Projects archive grid — card polish
   -------------------------------------------------------------------------- */
.type-portfolio .featured_image,
.portfolio .featured_image{
	overflow:hidden;
	border-radius:6px;
	box-shadow:0 6px 22px rgba(28,59,74,0.10);
}
.featured_image .imgeffect{
	overflow:hidden;
}
.featured_image .imgeffect img{
	transition:transform .5s ease, filter .5s ease;
}
.featured_image:hover .imgeffect img{
	transform:scale(1.08);
}
.featured_image .imgeffect:before{
	content:"";
	position:absolute;
	inset:0;
	/* was nearly black and far too heavy — now a light wash running to the
	   brand navy at the bottom */
	background:linear-gradient(180deg, rgba(43,156,216,0) 48%, rgba(43,156,216,0.45) 100%);
	opacity:0;
	transition:opacity .35s ease;
	z-index:1;
	pointer-events:none;
}
.featured_image:hover .imgeffect:before{
	opacity:1;
}
.featured_image .imgeffect .icon-zoom-in,
.featured_image .imgeffect .icon-link{
	opacity:0;
	transform:translateY(6px);
	transition:opacity .3s ease, transform .3s ease;
}
.featured_image:hover .imgeffect .icon-zoom-in,
.featured_image:hover .imgeffect .icon-link{
	opacity:1;
	transform:translateY(0);
}
.portfolio_info h4 a{
	color:var(--iontech-navy);
	font-weight:700;
	transition:color .25s ease;
}
.portfolio_info h4 a:hover{
	color:var(--iontech-blue);
}

/* category filter tabs */
.filter_navigation li a{
	border-radius:3px;
}

/* archive cards with no photo — keep the grid visually consistent */
.portfolio_item_holder:not(:has(.featured_image)){
	display:flex;
	flex-direction:column;
}
.portfolio_item_holder:not(:has(.featured_image))::before{
	content:"";
	display:block;
	height:170px;
	margin-bottom:10px;
	border-radius:8px;
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%23b7c2c8' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='13' width='50' height='38' rx='5'/><circle cx='23' cy='27' r='5'/><path d='M7 43l13-12 9 8 9-7 16 13'/></g></svg>") no-repeat center / 36px 36px,
		var(--iontech-gray-bg);
}
.portfolio_item_holder:not(:has(.featured_image)) .portfolio_info{
	margin-top:0;
}

/* --------------------------------------------------------------------------
   1b. Single project — "Back to Projects" button. Returns to the /projects/
   grid with the correct filter tab (Active/Completed) pre-applied — see
   iontech_project_back_link() + iontech_projects_back_filter_script() in
   functions.php.
   -------------------------------------------------------------------------- */
.iontech-back-row{
	margin:0 0 16px;
}
.iontech-back-btn{
	display:inline-flex;
	align-items:center;
	gap:9px;
	padding:9px 18px 9px 14px;
	background:#fff;
	border:1px solid var(--iontech-line);
	border-radius:30px;
	color:var(--iontech-blue-dark);
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.03em;
	text-decoration:none;
	box-shadow:0 4px 12px rgba(28,59,74,0.08);
	transition:background .25s ease, box-shadow .25s ease, transform .25s ease, color .25s ease, border-color .25s ease;
}
.iontech-back-btn svg{
	width:16px;
	height:16px;
	flex:0 0 auto;
	transition:transform .25s ease;
}
.iontech-back-btn:hover,
.iontech-back-btn:focus{
	background:var(--iontech-blue);
	border-color:var(--iontech-blue);
	color:#fff;
	text-decoration:none;
	box-shadow:0 8px 20px rgba(28,59,74,0.22);
	transform:translateY(-2px);
}
.iontech-back-btn:hover svg,
.iontech-back-btn:focus svg{
	transform:translateX(-3px);
}

/* --------------------------------------------------------------------------
   2. Single project — custom header bar (icon + title left, status + year right)
   Replaces the theme's default title/breadcrumb info bar (see functions.php:
   iontech_hide_portfolio_info_bar) with the same soft-grey full-width strip,
   just re-purposed for our own content.
   -------------------------------------------------------------------------- */
.iontech-project-header-bar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
	margin:0 0 26px;
	padding:18px 24px;
	background:var(--iontech-gray-bg);
	border:1px solid var(--iontech-line);
	border-radius:8px;
}
.iontech-project-header-left{
	display:flex;
	align-items:center;
	gap:14px;
	min-width:0;
}
.iontech-project-header-icon{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	width:46px;
	height:46px;
	border-radius:50%;
	background:#fff;
	color:var(--iontech-blue);
	box-shadow:0 6px 16px rgba(28,59,74,0.12);
}
.iontech-project-header-icon svg{
	width:23px;
	height:23px;
}
.iontech-project-header-title{
	margin:0;
	font-size:24px;
	font-weight:700;
	letter-spacing:.02em;
	text-transform:uppercase;
	color:var(--iontech-navy);
	line-height:1.25;
}
.iontech-project-header-right{
	display:flex;
	align-items:baseline;
	gap:12px;
	flex:0 0 auto;
}
.iontech-project-header-right .iontech-status{
	background:#fff;
}

@media (max-width: 640px){
	.iontech-project-header-bar{
		padding:14px 16px;
	}
	.iontech-project-header-title{
		font-size:19px;
	}
}

/* --------------------------------------------------------------------------
   3. Single project — intro row (framed cover photo + overview / details card)
   -------------------------------------------------------------------------- */
.iontech-intro-row{
	display:flex;
	align-items:flex-start;
	gap:28px;
	margin:6px 0 30px;
}
.iontech-intro-media{
	flex:0 0 36%;
	max-width:36%;
}
.iontech-intro-info{
	flex:1 1 auto;
	min-width:0;
}
.iontech-cover-frame{
	background:#fff;
	padding:10px;
	border:1px solid var(--iontech-line);
	border-radius:10px;
	box-shadow:0 14px 34px rgba(28,59,74,0.14);
	margin-bottom:18px;
}
.iontech-cover-frame .imgeffect,
.iontech-cover-frame img{
	display:block;
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	border-radius:5px;
}
.iontech-cover-placeholder{
	width:100%;
	aspect-ratio:1/1;
	border-radius:5px;
	background-size:52px 52px, cover;
}
.iontech-intro-overview{
	font-size:15px;
}
.iontech-intro-overview .iontech-overview{
	font-size:15px;
	line-height:1.65;
}
.iontech-intro-overview .iontech-overview p:first-of-type{
	font-size:15.5px;
}
.iontech-intro-overview .iontech-overview p{
	text-align:justify;
}

/* "Project Information" card — white frame + a very light gradient wash
   (kept weak on purpose so the text stays perfectly readable) */
.iontech-overview-card{
	background:
		linear-gradient(135deg, rgba(69,147,188,0.07) 0%, rgba(224,163,54,0.05) 100%),
		#fff;
	border:1px solid var(--iontech-line);
	border-radius:10px;
	padding:22px 24px 20px;
	box-shadow:0 10px 26px rgba(28,59,74,0.08);
}
.iontech-overview-card .title_line{
	margin:0 0 14px !important;
	padding-bottom:10px;
	border-bottom:1px solid var(--iontech-line);
}
.iontech-overview-card .featured_article_title{
	margin:0;
	font-size:15px;
	font-weight:700;
	letter-spacing:.05em;
	text-transform:uppercase;
	color:var(--iontech-navy);
}
.iontech-overview-card .heading_icon{
	color:var(--iontech-blue);
	margin-right:6px;
}

@media (max-width: 900px){
	.iontech-intro-row{
		flex-direction:column;
	}
	.iontech-intro-media{
		flex:1 1 auto;
		max-width:340px;
	}
}

/* --------------------------------------------------------------------------
   3. Single project — bottom gallery (uniform, cropped tiles)
   -------------------------------------------------------------------------- */
.iontech-gallery-section{
	margin-top:12px;
}
.iontech-gallery-heading{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	font-size:16px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.05em;
	color:var(--iontech-navy);
	margin:0 0 4px;
}
.iontech-gallery-heading:before,
.iontech-gallery-heading:after{
	content:"";
	width:26px;
	height:2px;
	background:var(--iontech-blue);
	display:inline-block;
}
/* Scattered "photo wall" collage — white polaroid-style frames, tossed at
   slightly different angles/offsets, grayscale until hovered (then colour +
   lift to the front). The scatter pattern below repeats every 9 photos;
   which actual photos land in which slot is randomised server-side (see
   single-portfolio-content.php), so the wall looks different every visit. */
.photo_gallery{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin:0 !important;
	padding:6px 10px 10px;
}
.photo_gallery li.box{
	list-style:none;
	margin:16px 20px 40px;
	padding:0 !important;
	box-sizing:border-box;
	flex:0 0 auto;
	position:relative;
	transition:transform .35s ease, z-index 0s;
}
.photo_gallery .imgeffect{
	display:block;
	background:#fff;
	padding:10px;
	border:1px solid var(--iontech-line);
	border-radius:3px;
	box-shadow:0 14px 30px rgba(28,59,74,0.20);
	overflow:visible;
}
.photo_gallery .imgeffect img{
	display:block;
	width:210px;
	height:210px;
	object-fit:cover;
	border-radius:2px;
	filter:grayscale(1) contrast(1.02);
	transition:filter .5s ease;
}
/* Kill the theme's default "zoom" pill button AND its white wipe-in
   overlay (.imgeffect:after) — colourise-on-hover is the only effect we
   want. The link is forced full-size + invisible in every state (including
   :hover, where the theme's own higher-specificity rules would otherwise
   shrink/move it), so a click anywhere on the photo still opens the
   lightbox exactly as before. */
.photo_gallery .imgeffect:after,
.photo_gallery .imgeffect:hover:after{
	content:none !important;
	width:0 !important;
	background:transparent !important;
	box-shadow:none !important;
}
.photo_gallery .imgeffect a,
.photo_gallery .imgeffect:hover a,
.photo_gallery .imgeffect a:first-child,
.photo_gallery .imgeffect:hover a:first-child,
.photo_gallery .imgeffect a:nth-child(2),
.photo_gallery .imgeffect:hover a:nth-child(2){
	position:absolute !important;
	top:0 !important;
	right:0 !important;
	bottom:0 !important;
	left:0 !important;
	width:auto !important;
	height:auto !important;
	margin:0 !important;
	padding:0 !important;
	background:transparent !important;
	opacity:1 !important;
	z-index:2 !important;
}
/* centred "zoom" hint on hover — soft black glass circle lifted with a
   shadow, plus a crisp white magnifying glass on top of it (black backdrop
   keeps the white glyph legible against light and dark photos alike). The
   theme's own default a:before icon is fought off with !important on every
   property (it previously needed a blanket content:none !important here). */
.photo_gallery .imgeffect a:before{
	content:"" !important;
	position:absolute !important;
	top:50% !important;
	left:50% !important;
	right:auto !important;
	bottom:auto !important;
	width:48px !important;
	height:48px !important;
	margin:-24px 0 0 -24px !important;
	padding:0 !important;
	border-radius:50% !important;
	background:rgba(0,0,0,0.48) !important;
	box-shadow:0 10px 22px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.18) inset !important;
	opacity:0 !important;
	transform:scale(.75) translateY(4px) !important;
	transition:opacity .3s ease, transform .3s ease !important;
	pointer-events:none !important;
	z-index:1 !important;
}
.photo_gallery .imgeffect:hover a:before{
	opacity:1 !important;
	transform:scale(1) translateY(0) !important;
}
.photo_gallery .imgeffect a:after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:34px;
	height:34px;
	margin:-17px 0 0 -17px;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") no-repeat center / 22px 22px;
	filter:drop-shadow(0 2px 4px rgba(0,0,0,0.45));
	opacity:0;
	transform:scale(.75) translateY(4px);
	transition:opacity .3s ease .03s, transform .3s ease .03s;
	pointer-events:none;
}
.photo_gallery .imgeffect:hover a:after{
	opacity:1;
	transform:scale(1) translateY(0);
}
.photo_gallery li.box:hover{
	transform:rotate(0deg) translateY(-8px) scale(1.06) !important;
	z-index:20;
}
.photo_gallery li.box:hover .imgeffect{
	box-shadow:0 22px 44px rgba(28,59,74,0.30);
}
.photo_gallery li.box:hover .imgeffect img{
	filter:grayscale(0) contrast(1);
}

.photo_gallery li.box:nth-child(9n+1){ transform:rotate(-4deg) translate(6px, 10px); }
.photo_gallery li.box:nth-child(9n+2){ transform:rotate(3deg) translate(-10px, -6px); }
.photo_gallery li.box:nth-child(9n+3){ transform:rotate(-2deg) translate(4px, 18px); }
.photo_gallery li.box:nth-child(9n+4){ transform:rotate(5deg) translate(-8px, -12px); }
.photo_gallery li.box:nth-child(9n+5){ transform:rotate(-6deg) translate(10px, 4px); }
.photo_gallery li.box:nth-child(9n+6){ transform:rotate(2deg) translate(-4px, 14px); }
.photo_gallery li.box:nth-child(9n+7){ transform:rotate(-3deg) translate(8px, -10px); }
.photo_gallery li.box:nth-child(9n+8){ transform:rotate(4deg) translate(-6px, 8px); }
.photo_gallery li.box:nth-child(9n+9){ transform:rotate(-5deg) translate(2px, -4px); }
.photo_gallery li.box:nth-child(3n+1){ margin-top:6px; }
.photo_gallery li.box:nth-child(3n+2){ margin-top:34px; }
.photo_gallery li.box:nth-child(3n){ margin-top:16px; }

@media (max-width: 640px){
	.photo_gallery .imgeffect img{
		width:150px;
		height:150px;
	}
	.photo_gallery li.box{
		margin:10px 10px 30px;
	}
}

/* --------------------------------------------------------------------------
   4. Project overview — lead paragraph
   -------------------------------------------------------------------------- */
.iontech-overview{
	font-size:17px;
	line-height:1.75;
	color:var(--iontech-ink);
}
.iontech-overview p:first-of-type{
	font-size:19px;
	line-height:1.65;
	color:var(--iontech-navy);
	font-weight:500;
}

/* --------------------------------------------------------------------------
   5. Project details card (Client / Location / Commodity / Capacity / Process / Services / Status)
   -------------------------------------------------------------------------- */
.iontech-project-card{
	position:relative;
	background:#fff;
	border:1px solid var(--iontech-line);
	border-radius:12px;
	padding:30px 30px 26px;
	margin:0;
	height:100%;
	box-sizing:border-box;
	box-shadow:0 18px 46px rgba(28,59,74,0.12);
}
/* "Project Details" heading — same as "Project Information": no icon, just the text */
/* No heading at all above the details card — the card sits right at the
   top of the column, level with the cover photo. */
.project_info > .title_line{
	display:none !important;
	margin:0 !important;
}
.iontech-project-card:before{
	content:"";
	position:absolute;
	top:0; left:0; right:0;
	height:4px;
	border-radius:12px 12px 0 0;
	background:linear-gradient(90deg, var(--iontech-blue-dark) 0%, #bfe0ef 100%);
}

.iontech-status-wrap{
	display:flex;
	align-items:baseline;
	gap:12px;
	margin:2px 0 18px;
}
.iontech-status{
	display:inline-block;
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	padding:5px 12px;
	border-radius:4px;
	background:var(--iontech-bg-soft);
	border:1px solid var(--iontech-line);
}
.iontech-status.is-active{ color:#2f7d34; }
.iontech-status.is-completed{ color:var(--iontech-blue-dark); }
.iontech-status.is-discontinued{ color:#a24b3f; }
.iontech-status-year{
	font-family:Georgia, "Times New Roman", serif;
	font-style:italic;
	font-size:16px;
	color:var(--iontech-muted);
}

.iontech-meta-grid{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:14px;
	margin:0 0 6px;
	padding:0;
	list-style:none;
}
.iontech-meta-item{
	position:relative;
	background:var(--iontech-bg-soft);
	border:1px solid #cfdae0;
	border-radius:10px;
	padding:14px 14px 12px;
	box-shadow:0 6px 16px rgba(28,59,74,0.05);
	transition:transform .2s ease, box-shadow .2s ease;
}
.iontech-location-link{
	color:inherit;
	text-decoration:none;
	display:inline-block;
	padding:3px 7px;
	margin:-3px -7px;
	border-radius:6px;
	transition:background .2s ease, box-shadow .2s ease;
}
.iontech-location-link:hover{
	background:rgba(255,255,255,0.85);
	box-shadow:0 0 0 1px rgba(255,255,255,0.95) inset, 0 2px 8px rgba(28,59,74,0.10);
	color:var(--iontech-blue-dark);
	text-decoration:none;
}
.iontech-meta-item:hover{
	transform:translateY(-2px);
	box-shadow:0 12px 24px rgba(28,59,74,0.12);
}
.iontech-meta-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:50%;
	background:#fff;
	color:var(--iontech-blue);
	box-shadow:0 4px 10px rgba(28,59,74,0.12);
	margin-bottom:9px;
}
.iontech-meta-icon svg{
	width:17px;
	height:17px;
	display:block;
}
.iontech-meta-item .iontech-meta-label{
	display:block;
	font-size:10.5px;
	text-transform:uppercase;
	letter-spacing:.07em;
	color:var(--iontech-muted);
	margin-bottom:3px;
}
.iontech-meta-item .iontech-meta-value{
	display:block;
	font-size:14px;
	font-weight:600;
	color:var(--iontech-navy);
	line-height:1.35;
}

.iontech-subhead{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:12.5px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:var(--iontech-blue-dark);
	margin:22px 0 12px;
	padding-top:18px;
	border-top:1px solid var(--iontech-line);
}
.iontech-subhead-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	flex:0 0 auto;
}
.iontech-subhead-icon svg{
	width:16px;
	height:16px;
}
.iontech-project-card .iontech-meta-grid + .iontech-subhead,
.iontech-project-card > .iontech-subhead:first-of-type{
	border-top:none;
	padding-top:0;
	margin-top:20px;
}

.iontech-process{
	display:grid;
	/* Column count adapts to the card width, not to how many steps there
	   are — so 3 short steps sit on one tidy row instead of 2-then-1, and
	   longer lists simply wrap into full rows without an awkward orphan. */
	grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));
	gap:16px 30px;
	list-style:none;
	margin:0;
	padding:0;
}
.iontech-process li{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	background:#fff;
	color:var(--iontech-navy);
	font-size:12.5px;
	font-weight:400;
	line-height:1.35;
	padding:12px 14px;
	border-radius:12px;
	border:1px solid var(--iontech-line);
	box-shadow:0 4px 10px rgba(28,59,74,0.06);
}
.iontech-process-name{
	display:block;
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.03em;
	color:var(--iontech-blue-dark);
	padding-bottom:6px;
	margin-bottom:6px;
	border-bottom:2px solid var(--iontech-blue-lighter);
}
.iontech-process-desc{
	display:block;
}
.iontech-process li:not(:last-child):after{
	content:"\2192";
	position:absolute;
	top:50%;
	right:-24px;
	transform:translateY(-50%);
	color:var(--iontech-blue);
	font-weight:700;
	font-size:15px;
}

.iontech-services{
	list-style:none;
	margin:0;
	padding:0;
	columns:2;
	column-gap:24px;
}
.iontech-services li{
	position:relative;
	padding:0 0 9px 22px;
	font-size:13.5px;
	line-height:1.45;
	color:var(--iontech-ink);
	break-inside:avoid;
}
.iontech-services li:before{
	content:"\2713";
	position:absolute;
	left:0;
	top:0;
	color:var(--iontech-blue);
	font-weight:700;
}
.iontech-services li.has-name{
	padding-bottom:12px;
}
.iontech-list-name{
	display:block;
	font-size:12.5px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.03em;
	color:var(--iontech-blue-dark);
	padding-bottom:5px;
	margin-bottom:5px;
	border-bottom:2px solid var(--iontech-blue-lighter);
}
.iontech-list-desc{
	display:block;
}

.iontech-status-note{
	margin:20px 0 0;
	padding:13px 16px;
	background:var(--iontech-bg-soft);
	border-left:3px solid var(--iontech-gold);
	border-radius:4px;
	font-size:13.5px;
	color:var(--iontech-ink);
}

@media (max-width: 767px){
	.iontech-services{ columns:1; }
	.iontech-project-card{ padding:22px 18px; }
	.iontech-meta-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px){
	.iontech-meta-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   IONTECH — content pages built from the client's materials (EXPERTISE,
   SERVICES). Presentation lives here rather than in inline styles inside the
   builder, so the copy stays plain, editable HTML in Elementor.
   Palette follows the company brochure: navy + bright blue with an orange rule.
   ========================================================================== */

:root{
	--io-navy:#12386b;
	--io-blue:#2b9cd8;
	--io-orange:#f0912d;
	--io-ink:#2b3a42;
	--io-body:#4a5a63;
	--io-line:#e2eaf0;
	--io-soft:#f5f9fc;
}

/* --- page header ------------------------------------------------------ */
.io-page-head{ background:linear-gradient(180deg,#fff 0%, var(--io-soft) 100%); border-bottom:1px solid var(--io-line); }
.io-page-title{
	font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.08; margin:0 0 .5em;
	color:var(--io-navy); font-weight:700; letter-spacing:.01em;
}
.io-page-title::after{
	content:""; display:block; width:74px; height:4px; margin-top:.42em;
	background:var(--io-orange); border-radius:2px;
}
.io-page-strap{
	font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.65; color:var(--io-body);
	max-width:56ch; margin:0 0 2em;
}

/* --- the four-area index ---------------------------------------------- */
.io-areanav{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.io-areanav a{
	display:flex; align-items:center; gap:12px; padding:16px 18px;
	background:#fff; border:1px solid var(--io-line); border-radius:10px;
	color:var(--io-navy); font-weight:600; text-decoration:none;
	transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.io-areanav a:hover{
	border-color:var(--io-blue); transform:translateY(-2px);
	box-shadow:0 8px 22px rgba(18,56,107,.10);
}
.io-areanav-no{
	font-size:.78rem; font-weight:700; letter-spacing:.08em;
	color:var(--io-blue); background:rgba(43,156,216,.10);
	padding:5px 9px; border-radius:6px;
}

/* --- an expertise / service area -------------------------------------- */
.io-area--alt{ background:var(--io-soft); }
/* offset for the fixed header so #anchor links don't hide under it */
.io-anchor{ position:relative; top:-120px; display:block; height:0; }

.io-area-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:.9em; }
.io-area-no{
	font-size:.9rem; font-weight:700; letter-spacing:.1em; color:var(--io-orange);
}
.io-area-title{
	font-size:clamp(1.5rem,2.8vw,2.1rem); color:var(--io-navy);
	font-weight:700; margin:0; line-height:1.15;
}

.io-area-inner p{ color:var(--io-body); line-height:1.75; margin:0 0 1.1em; }
.io-area-inner p.io-lead{
	font-size:1.09rem; color:var(--io-ink);
	border-left:3px solid var(--io-blue); padding-left:18px;
}
.io-sub{
	font-size:1.12rem; font-weight:700; color:var(--io-navy);
	margin:2em 0 .9em; padding-bottom:.45em; border-bottom:1px solid var(--io-line);
}

/* --- feedstock cards --------------------------------------------------- */
.io-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px; margin-bottom:.6em; }
.io-card{
	background:#fff; border:1px solid var(--io-line); border-top:3px solid var(--io-blue);
	border-radius:10px; padding:20px 20px 6px;
}
.io-area--alt .io-card{ background:#fff; }
.io-card h4{
	font-size:1rem; font-weight:700; color:var(--io-navy);
	margin:0 0 .55em; line-height:1.3;
}
.io-card p{ font-size:.945rem; line-height:1.68; }

/* --- "Our expertise covers" definition list ---------------------------- */
.io-deflist{ margin:0 0 1.4em; }
.io-deflist dt{
	font-weight:700; color:var(--io-navy); font-size:1.02rem;
	margin-top:1.15em; padding-left:20px; position:relative;
}
.io-deflist dt::before{
	content:""; position:absolute; left:0; top:.52em;
	width:9px; height:9px; border-radius:50%; background:var(--io-orange);
}
.io-deflist dd{
	margin:.34em 0 0 20px; color:var(--io-body); line-height:1.75;
}

@media (max-width:767px){
	.io-area-head{ flex-direction:column; gap:4px; }
	.io-deflist dd{ margin-left:20px; }
}

/* --- service capability blocks (SERVICES page) -------------------------- */
.io-block{
	background:#fff; border:1px solid var(--io-line); border-left:3px solid var(--io-blue);
	border-radius:10px; padding:22px 24px; margin:0 0 16px;
}
.io-block h4{
	font-size:1.06rem; font-weight:700; color:var(--io-navy);
	margin:0 0 .6em; line-height:1.3; display:flex; align-items:baseline; gap:11px;
}
.io-block > p{ margin:0 0 1em; }

.io-block-no{
	flex:0 0 auto; min-width:26px; height:26px; border-radius:6px;
	background:var(--io-navy); color:#fff; font-size:.8rem; font-weight:700;
	display:inline-flex; align-items:center; justify-content:center;
}
.io-block--num{ border-left-color:var(--io-orange); }

/* the two lists (capabilities / equipment) side by side */
.io-lists{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px 28px; }
.io-listcol h5{
	font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
	color:var(--io-blue); margin:.5em 0 .6em;
}
.io-block ul{ margin:0 0 .6em; padding:0; list-style:none; }
.io-block li{
	position:relative; padding-left:18px; margin-bottom:.42em;
	color:var(--io-body); line-height:1.62; font-size:.95rem;
}
.io-block li::before{
	content:""; position:absolute; left:2px; top:.62em;
	width:6px; height:6px; border-radius:1px; background:var(--io-blue); transform:rotate(45deg);
}
.io-block--num li::before{ background:var(--io-orange); }
.io-block--num li{ font-size:.965rem; }

/* ==========================================================================
   Footer — was a heavy navy band with a diagonal weave. Asked for light grey
   with a different texture, so: a pale ground with a fine dotted grid, and the
   type flipped to navy over it. The orange rule at the top stays as the join.
   ========================================================================== */

.content_footer.footer_widgets_holder,
footer#footer{
	/* NEUTRAL grey — the earlier tint and the navy grid lines pulled the whole
	   band towards blue on screen */
	background-color:#eeeeef;
	background-image:
		/* drawing-sheet grid: a heavy 96px module over a light 24px one */
		linear-gradient(rgba(60,60,60,.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(60,60,60,.055) 1px, transparent 1px),
		linear-gradient(rgba(60,60,60,.027) 1px, transparent 1px),
		linear-gradient(90deg, rgba(60,60,60,.027) 1px, transparent 1px),
		linear-gradient(180deg,#f5f5f6 0%, #e9e9ea 100%);
	background-size:96px 96px, 96px 96px, 24px 24px, 24px 24px, auto;
	background-position:center top;
	border-top:none;
	color:#5b6b76;
}
.content_footer.footer_widgets_holder{
	border-top:none;
	padding-top:52px; padding-bottom:34px;
}

/* widget columns */
.footer_widgets .widget{ color:#5b6b76; }
.footer_widgets .widget h3,
.footer_widgets .widget .widget-title{
	color:var(--io-navy); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
	margin-bottom:1.1em; padding-bottom:.6em;
	border-bottom:1px solid rgba(18,56,107,.16);
}
.footer_widgets .textwidget{ line-height:1.75; color:#5b6b76; }

/* footer nav */
.footer_widgets .menu li{ border-bottom:1px solid rgba(18,56,107,.10); }
.footer_widgets .menu li:last-child{ border-bottom:none; }
.footer_widgets .menu li a{
	display:block; padding:.62em 0; color:#3f5567; text-decoration:none;
	transition:color .16s ease, padding-left .16s ease;
}
/* the labels dance: hover slides the label right, orange and bold; mouse
   out and it slides back, drops the bold and the orange. Only the active
   page keeps them. The skin styles widget links at higher specificity, so
   these are pinned. */
.content_footer .footer_widgets .menu li a{
	transition:color .18s ease, padding-left .18s ease !important;
}
.content_footer .footer_widgets .menu li a:hover{
	color:var(--io-orange) !important;
	padding-left:12px !important;
	font-weight:700;
}
.content_footer .footer_widgets .menu li.current-menu-item > a,
.content_footer .footer_widgets .menu li.current_page_item > a{
	color:var(--io-orange) !important;
	font-weight:700;
}
.footer_widgets .menu li a::before{
	content:"›"; color:var(--io-orange); margin-right:9px; opacity:.9;
}
/* the menu descriptions are for the main nav, not the footer list */
.footer_widgets .menu .sub{ display:none; }

/* copyright bar */
footer#footer .footer_info{
	border-top:1px solid rgba(18,56,107,.14);
	padding-top:22px; padding-bottom:22px;
}
footer#footer .copyright{ color:#8b9aa5; font-size:.88rem; }
footer#footer a{ color:#3f5567; }
footer#footer a:hover{ color:var(--io-navy); }
@media (max-width:767px){
	.content_footer.footer_widgets_holder{ padding-top:36px; padding-bottom:20px; }
}

/* ==========================================================================
   Main navigation — .menu-style-two pins the white plate (.nav_border) at
   1079px and the six buttons need slightly more, which is what wrapped
   CONTACTS onto a second row. The plate now hugs the row of buttons and
   centres itself; the buttons keep their original type and padding.
   ========================================================================== */

@media (min-width:1200px){
	.menu-style-two .nav_shadow{ width:100%; }
	.menu-style-two .nav_border{
		width:max-content;
		min-width:1079px;
		margin:0 auto;
	}
	nav#navigation_bar{ margin:0; width:auto; }
	ul#navigation.menu{
		display:flex !important;
		flex-wrap:nowrap !important;
		float:none !important;
	}
	ul#navigation.menu > li{ float:none !important; flex:0 0 auto; }
	ul#navigation.menu > li > a{ white-space:nowrap; }
	ul#navigation.menu > li > a > span{ white-space:nowrap; }
}

/* The skin already paints hover/active as a blue plate with white text —
   that stays. Only the marker bar is ours: orange, 6px tall, dropped 3px
   below the button top and inset 3px from either side. */
#navigation_bar > ul > li > a:after{
	background:rgba(255,255,255,.75) !important;
	height:6px !important;
	top:3px !important;
	left:3px !important;
}
#navigation_bar > ul > li.current_page_item > a:after,
#navigation_bar > ul > li.current-menu-ancestor > a:after,
#navigation_bar > ul > li:hover > a:after{
	background-color:rgba(255,255,255,.75) !important;
	height:6px !important;
	top:3px !important;
	left:3px !important;
	width:calc(100% - 6px) !important;
}
/* ==========================================================================
   The page-title / breadcrumb bar. Which section you are in is already said
   by the highlighted button in the menu, so the strip goes. The H1 stays in
   the document for search engines, just with no height.
   ========================================================================== */

section.info_bar{
	padding:0 !important;
	margin:0 !important;
	min-height:0 !important;
	height:0 !important;
	overflow:hidden !important;
	border:0 !important;
}

/* no rule above the footer — the band starts clean */
.content_footer.footer_widgets_holder{
	border-top:none !important;
}

/* half the height it had, and the list breathes without gaping */
.content_footer.footer_widgets_holder{
	padding-top:26px !important;
	padding-bottom:12px !important;
}
.footer_widgets .widget{ margin-bottom:10px; }
.footer_widgets .menu li a{ padding:.18em 0 !important; }
.footer_widgets .widget h3,
.footer_widgets .widget .widget-title{ margin-bottom:.7em; padding-bottom:.45em; }
footer#footer .footer_info{ padding-top:12px !important; padding-bottom:12px !important; }


/* ==========================================================================
   Projects grid — every card identical whether or not it has a photo yet:
   fixed 4:3 image area with the picture covering it, capital titles, a
   translucent year badge, and a single magnifier on a white block that opens
   the project page (the theme's white sweep on hover stays).
   ========================================================================== */

.portfolio_boxes .featured_image .imgeffect{
	aspect-ratio:4/3;
}
.portfolio_boxes .featured_image .imgeffect img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.portfolio_boxes .portfolio_info h4,
.portfolio_boxes .portfolio_info h4 a{
	text-transform:uppercase;
	letter-spacing:.03em;
}

/* year badge — the theme treats any span inside .imgeffect as its slide-up
   caption (opacity 0, bottom -100px), so every property it touches is pinned */
.imgeffect > span.io-year{
	position:absolute !important;
	top:12px !important;
	right:12px !important;
	bottom:auto !important;
	left:auto !important;
	width:auto !important;
	opacity:1 !important;
	box-shadow:none !important;
	z-index:3;
	background:rgba(255,255,255,.78) !important;
	color:var(--io-navy);
	font-weight:700;
	font-size:1.25rem !important;
	line-height:1;
	padding:.34em .58em;
	border-radius:10px;
	letter-spacing:.05em;
	pointer-events:none;
}

/* one magnifier: a 52px square pinned to the exact centre of the image.
   The theme positions its icons with top/right/margin games that differ per
   state, which is why it sat somewhere else on every card — every offset it
   sets is overridden and the centring is done with one transform. */
.portfolio_boxes .imgeffect a.icon-zoom-in{
	width:52px !important;
	height:52px !important;
	padding:0 !important;
	margin:0 !important;
	top:50% !important;
	left:50% !important;
	right:auto !important;
	bottom:auto !important;
	transform:translate(-50%,-50%) !important;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(255,255,255,.85) !important;
	color:var(--io-navy) !important;
	font-size:1.3rem;
	line-height:1;
	border-radius:12px;
	box-shadow:0 6px 20px rgba(18,56,107,.18);
}
.portfolio_boxes .imgeffect a.icon-zoom-in:hover{
	background:#ffffff !important;
	color:var(--io-blue) !important;
}

/* --------------------------------------------------------------------------
   PROJECTS filter bar: the plugin hardcodes "show all" in lowercase while the
   term tabs are uppercase — uppercase them all for one consistent row.
   -------------------------------------------------------------------------- */
.filter-holder .filter_navigation li a{
	text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   STICKY navbar (scrolled state): logo + menu centred as one group, the logo
   slightly larger and vertically centred against the menu buttons. Only the
   .stuck state is touched - the resting header keeps the theme layout.
   -------------------------------------------------------------------------- */
html .nav_shadow.stuck .nav_border{
	display:flex !important;
	align-items:center;
	justify-content:center;
	gap:20px;
	width:100% !important;
	min-width:0 !important;
}
html .stuck #sticky_logo{
	float:none;
	width:150px;
	max-width:150px;
	height:46px;
	padding:0;
	margin:0;
	display:flex;
	align-items:center;
}
html .stuck #sticky_logo a{display:block;line-height:0;}
/* the logo lives INSIDE #navigation_bar, before the ul - so the nav itself is
   the flex row: logo first, buttons after it, all on one middle-aligned line */
html .stuck #navigation_bar{
	display:flex !important;
	align-items:center;
	justify-content:center;
	gap:20px;
	flex:0 0 auto;
	float:none;
}
html .stuck #navigation_bar > ul{flex:0 0 auto;margin:0;}