/* =========================================================================
   CUBE Design & Construction - Main Stylesheet
   Brand tokens from the official CUBE Brand Kit
   ========================================================================= */

:root {
	/* Colors */
	--cube-charcoal: #1F2124;
	--cube-charcoal-deep: #17181B;
	--cube-white: #FFFFFF;
	--cube-cyan: #00AEEF;
	--cube-cyan-dark: #0092C8;
	--cube-grey-light: #F4F4F4;
	--cube-grey-mid: #9B9B9B;
	--cube-grey-soft: #E6E6E6;
	--cube-navy: #071A33;

	/* Type */
	--font-brand: 'Montserrat', 'Segoe UI', Arial, sans-serif;

	/* Layout */
	--container: 1180px;
	--radius: 10px;
	--section-pad: clamp(64px, 9vw, 110px);
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-brand);
	font-size: 16px;
	line-height: 1.6;
	color: var(--cube-charcoal);
	background: var(--cube-white);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
	outline: 3px solid var(--cube-cyan);
	outline-offset: 3px;
}

h1, h2, h3 { margin: 0; line-height: 1.15; }

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}

.section { padding-block: var(--section-pad); }

.section-dark {
	background: var(--cube-charcoal);
	color: var(--cube-white);
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--cube-cyan);
	color: var(--cube-white);
	padding: 10px 18px;
	z-index: 200;
	font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Icons ---------- */
.icon {
	width: 34px;
	height: 34px;
	color: var(--cube-cyan);
	flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	font-family: var(--font-brand);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 15px 30px;
	border-radius: 6px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
	min-height: 48px;
}

.btn-primary {
	background: var(--cube-cyan);
	color: var(--cube-white);
}
.btn-primary:hover { background: var(--cube-cyan-dark); transform: translateY(-2px); }

.btn-outline {
	background: transparent;
	color: var(--cube-white);
	border-color: var(--cube-white);
}
.btn-outline:hover { background: var(--cube-white); color: var(--cube-charcoal); }

/* ---------- Section headings ---------- */
.section-title {
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 40px;
}
.section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	background: var(--cube-cyan);
	border-radius: 2px;
}
.section-title-light { color: var(--cube-white); }

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.section-head .section-title { margin-bottom: 40px; }

.section-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--cube-cyan);
	margin-bottom: 44px;
}
.section-link .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.section-link:hover .icon { transform: translateX(4px); }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 100;
	padding-block: 18px;
	/* Safety scrim: keeps the white logo and menu readable even if a
	   template ever renders without a dark banner behind the header. */
	background: linear-gradient(180deg, rgba(23, 24, 27, .72) 0%, rgba(23, 24, 27, .35) 65%, rgba(23, 24, 27, 0) 100%);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-logo img,
.custom-logo { width: 170px; height: auto; }

.site-nav { display: flex; align-items: center; gap: 32px; }

.nav-list {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-list a {
	color: var(--cube-white);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 10px 2px;
	position: relative;
}
.nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 4px;
	width: 0;
	height: 2px;
	background: var(--cube-cyan);
	transition: width .25s var(--ease);
}
.nav-list a:hover::after,
.nav-list .current-menu-item a::after { width: 100%; }

.nav-cta { padding: 12px 22px; font-size: 12px; }

/* Mobile toggle */
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	padding: 12px;
	cursor: pointer;
}
.nav-toggle-bar {
	width: 26px;
	height: 3px;
	background: var(--cube-white);
	border-radius: 2px;
	transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	background: var(--cube-charcoal) center / cover no-repeat;
	color: var(--cube-white);
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(23, 24, 27, .94) 30%, rgba(23, 24, 27, .55) 70%, rgba(0, 174, 239, .18) 100%);
}

.hero-inner {
	position: relative;
	padding-block: 140px 90px;
	max-width: var(--container);
	width: 100%;
}

.hero-title {
	font-size: clamp(42px, 7.5vw, 84px);
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
}
.hero-title span:last-child { color: var(--cube-cyan); }

.hero-subtitle {
	margin: 22px 0 36px;
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 500;
	color: var(--cube-grey-soft);
	max-width: 480px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-scroll {
	position: absolute;
	left: 26px;
	bottom: 30px;
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--cube-grey-mid);
	writing-mode: vertical-rl;
}

/* =========================================================================
   STATS
   ========================================================================= */
.stats {
	background: var(--cube-white);
	border-bottom: 1px solid var(--cube-grey-soft);
	padding-block: 42px;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.stat { display: flex; align-items: center; gap: 16px; }

.stat-number {
	display: block;
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
}

.stat-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--cube-grey-mid);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-top: 4px;
}

/* =========================================================================
   FEATURED PROJECTS
   ========================================================================= */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.project-card { display: block; }

.project-thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--cube-grey-light);
	margin-bottom: 14px;
}
.project-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s var(--ease);
}
.project-card:hover .project-thumb img { transform: scale(1.06); }

.project-thumb-empty {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--cube-grey-light), var(--cube-grey-soft));
}

.project-name { font-size: 16px; font-weight: 700; }

.project-type {
	font-size: 12px;
	font-weight: 600;
	color: var(--cube-grey-mid);
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* =========================================================================
   SERVICES (One Window Solution)
   ========================================================================= */
.services-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.service {
	padding: 34px 24px;
	border-right: 1px solid rgba(255, 255, 255, .12);
	transition: background-color .25s var(--ease);
}
.service:last-child { border-right: 0; }
.service:hover { background: rgba(0, 174, 239, .08); }

.service-name {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 18px 0 8px;
}

.service-desc {
	margin: 0;
	font-size: 13.5px;
	color: var(--cube-grey-mid);
}

/* =========================================================================
   PROCESS
   ========================================================================= */
.process-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
	counter-reset: step;
}

.process-step {
	position: relative;
	padding-top: 20px;
}
.process-step::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--cube-grey-soft);
}
.process-step::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cube-cyan);
}

.process-num {
	font-size: 13px;
	font-weight: 800;
	color: var(--cube-cyan);
	letter-spacing: .1em;
}

.process-name {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 6px 0;
}

.process-desc {
	margin: 0;
	font-size: 13px;
	color: var(--cube-grey-mid);
}

/* =========================================================================
   WHY CHOOSE CUBE
   ========================================================================= */
.why-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 28px;
}

.why-item { text-align: left; }

.why-name {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 16px 0 8px;
}

.why-desc {
	margin: 0;
	font-size: 13.5px;
	color: var(--cube-grey-mid);
}

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.testimonials { background: var(--cube-grey-light); }

.testimonial-slider {
	position: relative;
	max-width: 780px;
	margin-inline: auto;
	background: var(--cube-white);
	border-radius: var(--radius);
	padding: 48px 48px 90px;
	box-shadow: 0 18px 50px rgba(31, 33, 36, .08);
}

.testimonial { display: none; margin: 0; }
.testimonial.is-active { display: block; }

.testimonial-mark {
	font-size: 56px;
	line-height: 1;
	font-weight: 800;
	color: var(--cube-cyan);
	display: block;
	margin-bottom: 10px;
}

.testimonial-quote {
	font-size: clamp(16px, 1.7vw, 19px);
	font-weight: 500;
	margin: 0 0 24px;
}

.testimonial-name {
	font-style: normal;
	font-weight: 700;
	display: block;
}

.testimonial-loc {
	font-size: 13px;
	color: var(--cube-grey-mid);
}

.testimonial-nav {
	position: absolute;
	right: 40px;
	bottom: 32px;
	display: flex;
	gap: 10px;
}

.testimonial-btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--cube-grey-soft);
	background: var(--cube-white);
	font-size: 18px;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.testimonial-btn:hover {
	background: var(--cube-cyan);
	color: var(--cube-white);
	border-color: var(--cube-cyan);
}

/* =========================================================================
   INSTAGRAM STRIP
   ========================================================================= */
.insta-handle {
	color: var(--cube-cyan);
	font-weight: 700;
	font-size: 14px;
	display: inline-block;
	margin-top: -30px;
	margin-bottom: 40px;
}

.insta-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}

.insta-item {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 8px;
	background: var(--cube-grey-light);
}
.insta-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.insta-item:hover img { transform: scale(1.07); opacity: .85; }

.insta-item-empty {
	background: linear-gradient(135deg, var(--cube-grey-light), var(--cube-grey-soft));
}

/* =========================================================================
   CTA STRIP
   ========================================================================= */
.cta-strip {
	background: linear-gradient(100deg, var(--cube-navy), var(--cube-charcoal));
	color: var(--cube-white);
	padding-block: 56px;
}

.cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.cta-title {
	font-size: clamp(22px, 2.8vw, 30px);
	font-weight: 800;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
	background: var(--cube-charcoal-deep);
	color: var(--cube-grey-soft);
	padding-top: 70px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 56px;
}

.footer-logo { width: 165px; margin-bottom: 18px; }

.footer-brand p {
	margin: 0;
	font-size: 14px;
	color: var(--cube-grey-mid);
	max-width: 260px;
}

.footer-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--cube-white);
	margin-bottom: 18px;
}

.footer-address {
	display: flex;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	color: var(--cube-grey-mid);
	text-decoration: none;
	transition: color .25s var(--ease);
}
.footer-address:hover { color: var(--cube-cyan); }
.footer-address .icon { width: 20px; height: 20px; margin-top: 2px; }

.footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.footer-contact a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--cube-grey-mid);
	transition: color .2s var(--ease);
}
.footer-contact a:hover { color: var(--cube-cyan); }
.footer-contact .icon { width: 18px; height: 18px; }

.footer-social { display: flex; gap: 10px; margin-top: 22px; }

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .15);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--cube-grey-soft);
	transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.social-link:hover {
	background: var(--cube-cyan);
	border-color: var(--cube-cyan);
	color: var(--cube-white);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-block: 20px;
}

.footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--cube-grey-mid);
}
.footer-bottom-inner p { margin: 0; }
.footer-tag { color: var(--cube-cyan); font-weight: 700; letter-spacing: .06em; }

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
	.projects-grid { grid-template-columns: repeat(2, 1fr); }
	.services-grid { grid-template-columns: repeat(3, 1fr); }
	.service:nth-child(3n) { border-right: 0; }
	.why-grid { grid-template-columns: repeat(3, 1fr); }
	.process-track { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.insta-grid { grid-template-columns: repeat(3, 1fr); }
	.insta-item:nth-child(n+4) { display: none; }
}

@media (max-width: 768px) {
	.nav-toggle { display: flex; }

	.site-nav {
		position: fixed;
		inset: 0;
		background: var(--cube-charcoal-deep);
		flex-direction: column;
		justify-content: center;
		gap: 24px;
		transform: translateX(100%);
		transition: transform .3s var(--ease);
		z-index: 90;
	}
	.site-nav.is-open { transform: translateX(0); }

	.nav-list {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.nav-list a { font-size: 18px; padding: 12px; }

	.nav-toggle { position: relative; z-index: 95; }

	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.services-grid { grid-template-columns: 1fr; }
	.service { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
	.why-grid { grid-template-columns: repeat(2, 1fr); }
	.process-track { grid-template-columns: repeat(2, 1fr); }
	.testimonial-slider { padding: 32px 24px 90px; }
	.testimonial-nav { right: 24px; }
	.cta-inner { justify-content: center; text-align: center; }
	.hero-scroll { display: none; }
}

@media (max-width: 520px) {
	.projects-grid,
	.stats-grid,
	.why-grid,
	.process-track,
	.footer-grid { grid-template-columns: 1fr; }
	.insta-grid { grid-template-columns: repeat(2, 1fr); }
	.insta-item:nth-child(n+3) { display: none; }
	.hero-actions .btn { width: 100%; text-align: center; }
}

/* =========================================================================
   V2 - INNER PAGES
   ========================================================================= */

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
	background: linear-gradient(105deg, var(--cube-charcoal-deep) 40%, var(--cube-charcoal) 75%, rgba(0, 174, 239, .25) 130%);
	color: var(--cube-white);
	padding: 170px 0 70px;
}

.page-hero-title {
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.page-hero-sub {
	margin: 14px 0 0;
	max-width: 560px;
	color: var(--cube-grey-soft);
	font-size: 16px;
}

/* ---------- Projects filter bar ---------- */
.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
}

.filter-link {
	padding: 10px 20px;
	border: 1px solid var(--cube-grey-soft);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filter-link:hover,
.filter-link.is-active {
	background: var(--cube-cyan);
	border-color: var(--cube-cyan);
	color: var(--cube-white);
}

/* ---------- Pagination ---------- */
.pagination-wrap { margin-top: 48px; }
.pagination-wrap .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.pagination-wrap .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--cube-grey-soft);
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
}
.pagination-wrap .page-numbers.current,
.pagination-wrap .page-numbers:hover {
	background: var(--cube-cyan);
	border-color: var(--cube-cyan);
	color: var(--cube-white);
}

/* ---------- Services page rows ---------- */
.service-rows { display: grid; gap: clamp(48px, 7vw, 90px); }

.service-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}
.service-row.is-flipped .service-row-media { order: 2; }

.service-row-media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--cube-grey-light);
}
.service-row-media img { width: 100%; height: 100%; object-fit: cover; }

.service-row-title {
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	text-transform: uppercase;
	margin: 14px 0 12px;
}

.service-row-content { color: #4a4d52; margin-bottom: 22px; }
.service-row-content p { margin: 0 0 14px; }

/* ---------- About page ---------- */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.about-media {
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--cube-grey-light);
	aspect-ratio: 4 / 3;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }

.entry-content { line-height: 1.75; }
.entry-content p { margin: 0 0 16px; }
.entry-content h2, .entry-content h3 { margin: 28px 0 12px; font-weight: 800; }
.entry-content img { border-radius: var(--radius); }
.entry-content a { color: var(--cube-cyan); font-weight: 600; }

/* ---------- Contact page ---------- */
.contact-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.contact-form { display: grid; gap: 18px; }

.form-field { margin: 0; display: grid; gap: 7px; }

.form-field label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	font-family: var(--font-brand);
	font-size: 15px;
	padding: 14px 16px;
	border: 1px solid var(--cube-grey-soft);
	border-radius: 8px;
	background: var(--cube-white);
	color: var(--cube-charcoal);
	transition: border-color .2s var(--ease);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--cube-cyan);
	box-shadow: 0 0 0 3px rgba(0, 174, 239, .18);
}

.hp-field {
	position: absolute !important;
	left: -9999px !important;
	height: 0;
	overflow: hidden;
}

.form-notice {
	padding: 14px 18px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 20px;
}
.form-notice-success { background: #E7F8EE; color: #157A42; border: 1px solid #B9E8CD; }
.form-notice-error   { background: #FDECEC; color: #B02A2A; border: 1px solid #F3C2C2; }

.contact-side { display: grid; gap: 18px; }

.contact-card {
	background: var(--cube-grey-light);
	border-radius: var(--radius);
	padding: 24px;
}
.contact-card .footer-title { color: var(--cube-charcoal); }
.contact-card .footer-address { color: #4a4d52; }

.contact-big {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 14px;
}
.contact-big .icon { width: 22px; height: 22px; }

.btn-block { display: block; text-align: center; }

.map-wrap { line-height: 0; }

/* ---------- Blog ---------- */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.blog-card {
	background: var(--cube-white);
	border: 1px solid var(--cube-grey-soft);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.blog-card:hover {
	box-shadow: 0 16px 40px rgba(31, 33, 36, .1);
	transform: translateY(-4px);
}

.blog-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cube-grey-light); }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }

.blog-card-body { padding: 22px; }

.blog-date {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-cyan);
}
.blog-date-hero { display: inline-block; margin-bottom: 10px; }

.blog-title { font-size: 18px; font-weight: 700; margin: 8px 0 10px; }
.blog-title a:hover { color: var(--cube-cyan); }

.blog-excerpt { margin: 0 0 14px; font-size: 14px; color: #4a4d52; }

.blog-card .section-link { margin-bottom: 0; }

.article-container { max-width: 820px; }

.article-hero-img {
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 36px;
}

.article-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--cube-grey-soft);
	font-weight: 600;
}
.article-nav a:hover { color: var(--cube-cyan); }

/* ---------- Inner pages responsive ---------- */
@media (max-width: 1024px) {
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.service-row,
	.about-grid,
	.contact-grid { grid-template-columns: 1fr; }
	.service-row.is-flipped .service-row-media { order: 0; }
	.blog-grid { grid-template-columns: 1fr; }
	.page-hero { padding: 140px 0 54px; }
}

/* =========================================================================
   V2.1 - SINGLE BLOG POST: ARTICLE + CONVERSION SIDEBAR
   ========================================================================= */

.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(32px, 4.5vw, 56px);
	align-items: start;
}

.blog-main { min-width: 0; }

.page-hero-title-post {
	text-transform: none;
	font-size: clamp(28px, 4vw, 44px);
	max-width: 900px;
}

/* ---------- Sidebar ---------- */
.blog-side {
	display: grid;
	gap: 22px;
	position: sticky;
	top: 24px;
}

.side-block {
	background: var(--cube-white);
	border: 1px solid var(--cube-grey-soft);
	border-radius: var(--radius);
	padding: 26px;
}

.side-title {
	font-size: 17px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 16px;
}
.side-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 38px;
	height: 3px;
	background: var(--cube-cyan);
	border-radius: 2px;
}
.side-title-light { color: var(--cube-white); }

.side-text {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.65;
}

.side-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #C9984D;
	margin-bottom: 10px;
}

/* Services list */
.side-services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}
.side-services li { border-bottom: 1px solid var(--cube-grey-light); }
.side-services li:last-child { border-bottom: 0; }
.side-services a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 4px;
	font-size: 14px;
	font-weight: 600;
	transition: color .2s var(--ease), transform .2s var(--ease);
}
.side-services a:hover {
	color: var(--cube-cyan);
	transform: translateX(4px);
}
.side-services .icon { width: 22px; height: 22px; }

/* Dark quotation block */
.side-block-dark {
	background: var(--cube-charcoal);
	border-color: var(--cube-charcoal);
	color: var(--cube-grey-soft);
}

.side-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-weight: 700;
	font-size: 15px;
	color: var(--cube-white);
}
.side-phone:hover { color: var(--cube-cyan); }
.side-phone .icon { width: 18px; height: 18px; }

/* Navy catalogue block (premium: deep navy + warm gold from brand kit) */
.side-block-navy {
	background: linear-gradient(140deg, var(--cube-navy) 55%, #0D2B4E 100%);
	border-color: var(--cube-navy);
	color: var(--cube-grey-soft);
}
.side-block-navy .side-title::after { background: #C9984D; }

.btn-gold {
	background: #C9984D;
	color: #14213A;
}
.btn-gold:hover {
	background: #DCAF66;
	transform: translateY(-2px);
}

/* WhatsApp CTA block */
.side-block-cta {
	background: var(--cube-grey-light);
	border-color: var(--cube-grey-soft);
}

.btn-whatsapp {
	background: #25D366;
	color: #FFFFFF;
}
.btn-whatsapp:hover {
	background: #1EBE5B;
	transform: translateY(-2px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.blog-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 860px) {
	.blog-layout { grid-template-columns: 1fr; }
	.blog-side {
		position: static;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.blog-side { grid-template-columns: 1fr; }
}

/* =========================================================================
   V2.2 - BLOG LIST ROWS, SIDEBAR EXTRAS, PROJECT DETAILS, PRE-FOOTER FORM
   ========================================================================= */

/* ---------- Blog listing rows ---------- */
.blog-list { display: grid; gap: 28px; }

.blog-row {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 24px;
	background: var(--cube-white);
	border: 1px solid var(--cube-grey-soft);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.blog-row:hover {
	box-shadow: 0 16px 40px rgba(31, 33, 36, .1);
	transform: translateY(-3px);
}

.blog-row-thumb {
	display: block;
	background: var(--cube-grey-light);
	min-height: 210px;
}
.blog-row-thumb img { width: 100%; height: 100%; object-fit: cover; }

.blog-row-body { padding: 22px 24px 22px 0; }
.blog-row-body .blog-title { font-size: 20px; }
.blog-row-body .section-link { margin-bottom: 0; }

.blog-row-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.blog-row-meta-hero { margin-bottom: 12px; }

.blog-cat {
	display: inline-block;
	background: rgba(0, 174, 239, .12);
	color: var(--cube-cyan);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 5px 12px;
	border-radius: 999px;
}
.page-hero .blog-cat { background: rgba(0, 174, 239, .22); }

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}
.post-tag {
	font-size: 13px;
	font-weight: 600;
	color: var(--cube-grey-mid);
	border: 1px solid var(--cube-grey-soft);
	border-radius: 999px;
	padding: 6px 14px;
	transition: all .2s var(--ease);
}
.post-tag:hover {
	background: var(--cube-cyan);
	border-color: var(--cube-cyan);
	color: var(--cube-white);
}

/* ---------- Sidebar: mini post lists ---------- */
.side-posts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}
.side-posts li { border-bottom: 1px solid var(--cube-grey-light); }
.side-posts li:last-child { border-bottom: 0; }
.side-posts a {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	align-items: center;
}
.side-posts a:hover .side-post-title { color: var(--cube-cyan); }

.side-post-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--cube-grey-light);
	display: block;
}
.side-post-thumb img { width: 100%; height: 100%; object-fit: cover; }

.side-post-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	transition: color .2s var(--ease);
}
.side-post-meta {
	display: block;
	font-size: 12px;
	color: var(--cube-grey-mid);
	margin-top: 3px;
}

.side-more { margin: 10px 0 0; }

/* Sidebar mini form */
.side-form { margin-top: 16px; gap: 12px; }
.side-form .form-field input,
.side-form .form-field textarea {
	padding: 12px 14px;
	font-size: 14px;
}

/* Promo block */
.side-block-promo { padding: 0; overflow: hidden; border: 0; }
.side-block-promo img {
	width: 100%;
	display: block;
	border-radius: var(--radius);
	transition: transform .35s var(--ease);
}
.side-block-promo a:hover img { transform: scale(1.03); }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Project details ---------- */
.project-facts {
	background: var(--cube-white);
	border-bottom: 1px solid var(--cube-grey-soft);
	padding-block: 26px;
}

.project-facts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.project-fact { display: flex; align-items: center; gap: 14px; }
.project-fact .icon { width: 30px; height: 30px; }

.fact-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-grey-mid);
}
.fact-value {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-top: 2px;
}

.project-video {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 40px;
	background: var(--cube-charcoal);
}
.project-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.project-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(32px, 4.5vw, 56px);
	align-items: start;
}

.project-features {
	background: var(--cube-grey-light);
	border-radius: var(--radius);
	padding: 26px;
	position: sticky;
	top: 24px;
}

.features-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 12px;
}
.features-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
}
.features-list .icon { width: 20px; height: 20px; margin-top: 1px; }

/* ---------- Pre-footer lead form ---------- */
.prefooter {
	background: linear-gradient(100deg, var(--cube-navy), var(--cube-charcoal));
	color: var(--cube-white);
	padding-block: clamp(48px, 7vw, 80px);
}

.prefooter-grid {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.prefooter-title {
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 14px;
	margin-bottom: 16px;
}
.prefooter-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 52px;
	height: 4px;
	background: var(--cube-cyan);
	border-radius: 2px;
}

.prefooter-text {
	margin: 0 0 18px;
	color: var(--cube-grey-soft);
	font-size: 15px;
}

.prefooter-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 16px;
}
.prefooter-msg { grid-column: 1 / -1; }

.prefooter-form .form-field input,
.prefooter-form .form-field select {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .18);
	color: var(--cube-white);
}
.prefooter-form .form-field input::placeholder { color: var(--cube-grey-mid); }
.prefooter-form .form-field select option { color: var(--cube-charcoal); }
.prefooter-form .form-field input:focus,
.prefooter-form .form-field select:focus {
	border-color: var(--cube-cyan);
	background: rgba(255, 255, 255, .1);
}

/* ---------- Footer additions ---------- */
.footer-timings {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--cube-grey-mid);
}
.footer-timings .icon { width: 18px; height: 18px; }

.social-icon { width: 20px; height: 20px; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.blog-row { grid-template-columns: 1fr; }
	.blog-row-thumb { aspect-ratio: 16 / 9; min-height: 0; }
	.blog-row-body { padding: 0 22px 22px; }
	.project-body { grid-template-columns: 1fr; }
	.project-features { position: static; }
	.project-facts-grid { grid-template-columns: 1fr; gap: 14px; }
	.prefooter-grid { grid-template-columns: 1fr; }
	.prefooter-fields { grid-template-columns: 1fr; }
}

/* =========================================================================
   V2.3 - ELEMENTOR SUPPORT + SHORTCODE SECTIONS
   ========================================================================= */

/* Blank Elementor canvas: full width, content starts under the header */
.cube-elementor-canvas { min-height: 60vh; }
.cube-elementor-canvas > .elementor { margin-top: 0; }

/* Shortcode sections: self-contained spacing so they look right anywhere */
.cube-sc { margin: 0 auto; }
.cube-sc-pad { padding: clamp(36px, 5vw, 60px) clamp(20px, 4vw, 48px); border-radius: var(--radius); }

/* Dark shortcode sections keep their own background when dropped on white pages */
.cube-sc.section-dark { background: var(--cube-charcoal); color: var(--cube-white); }

/* Stats shortcode: add its own vertical padding */
.stats.cube-sc { border: 0; }

/* Testimonial slider shortcode keeps its card look on any background */
.testimonial-slider.cube-sc { margin-inline: auto; }

/* CTA strip shortcode: rounded standalone version */
.cta-strip.cube-sc { border-radius: var(--radius); }
.cta-strip.cube-sc .cta-inner { padding-inline: clamp(20px, 4vw, 48px); }

/* Elementor editor: make sure theme fonts apply inside the editor iframe */
.elementor-widget-container .section-title,
.elementor-widget-container .btn { font-family: var(--font-brand); }

/* =========================================================================
   V2.4 - PROJECT CASE STUDY: MOSAIC GALLERY, BEFORE/AFTER, DETAILS
   ========================================================================= */

/* ---------- Hero badges ---------- */
.project-hero-badges { display: flex; gap: 10px; margin-bottom: 12px; }

.status-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 5px 12px;
	border-radius: 999px;
}
.status-completed { background: rgba(37, 211, 102, .18); color: #4ADE80; }
.status-ongoing   { background: rgba(201, 152, 77, .2);  color: #E3B778; }
.status-upcoming  { background: rgba(255, 255, 255, .14); color: var(--cube-grey-soft); }

.project-hero-loc {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.project-hero-loc .icon { width: 18px; height: 18px; }

.map-direction-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
	color: var(--cube-cyan);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.map-direction-link .icon { width: 16px; height: 16px; }
.map-direction-link:hover { text-decoration: underline; }

/* ---------- Facts bar (auto columns) ---------- */
.project-facts-grid { display: grid; gap: 22px; }
.facts-5 { grid-template-columns: repeat(5, 1fr); }
.facts-4 { grid-template-columns: repeat(4, 1fr); }
.facts-3 { grid-template-columns: repeat(3, 1fr); }
.facts-2 { grid-template-columns: repeat(2, 1fr); }
.facts-1 { grid-template-columns: 1fr; }

/* ---------- Mosaic gallery ----------
   First image = large feature tile, rest fill a smart grid.
   Fully responsive: 4 cols desktop, 2 tablet, 1-2 mobile. */
.mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 220px;
	gap: 14px;
}

.mosaic-item {
	position: relative;
	border: 0;
	padding: 0;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--cube-grey-light);
	display: block;
	width: 100%;
	height: 100%;
}
.mosaic-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s var(--ease);
}
.mosaic-item:hover img { transform: scale(1.06); }

/* Feature tiles pattern */
.mosaic-item:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic-item:nth-child(6n) { grid-column: span 2; }

.mosaic-zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 174, 239, .92);
	color: var(--cube-white);
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.mosaic-item:hover .mosaic-zoom,
.mosaic-item:focus-visible .mosaic-zoom { opacity: 1; transform: none; }

/* ---------- Lightbox ---------- */
.cube-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: rgba(23, 24, 27, .96);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cube-lightbox[hidden] { display: none; }

.lb-img {
	max-width: min(92vw, 1300px);
	max-height: 86vh;
	object-fit: contain;
	border-radius: 8px;
}

.lb-close, .lb-prev, .lb-next {
	position: absolute;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .25);
	color: var(--cube-white);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 22px;
	cursor: pointer;
	transition: background-color .2s var(--ease);
	display: flex;
	align-items: center;
	justify-content: center;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--cube-cyan); border-color: var(--cube-cyan); }

.lb-close { top: 20px; right: 20px; font-size: 30px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- Before / After compare ---------- */
.ba-compare {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 980px;
	margin-inline: auto;
	border-radius: var(--radius);
	overflow: hidden;
	user-select: none;
}

.ba-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ba-before-wrap {
	position: absolute;
	inset: 0 auto 0 0;
	width: 50%;
	overflow: hidden;
	border-right: 3px solid var(--cube-white);
}
.ba-before-wrap .ba-before {
	width: 100%;
	height: 100%;
	position: static;
}
/* Keep the before image sized to the container, not the clip wrapper */
.ba-compare { --ba-w: 100%; }
.ba-before-wrap .ba-before {
	position: absolute;
	inset: 0;
	width: auto;
	min-width: 100%;
	height: 100%;
}

.ba-label {
	position: absolute;
	top: 16px;
	padding: 6px 14px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-white);
	z-index: 2;
}
.ba-label-before { left: 16px; background: rgba(23, 24, 27, .75); }
.ba-label-after  { right: 16px; background: rgba(0, 174, 239, .9); }

.ba-range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: ew-resize;
	z-index: 4;
	margin: 0;
	-webkit-appearance: none;
}

.ba-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--cube-white);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
	z-index: 3;
	pointer-events: none;
}
.ba-handle::before, .ba-handle::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	transform: translateY(-50%);
}
.ba-handle::before { left: 8px; border-right-color: var(--cube-charcoal); }
.ba-handle::after { right: 8px; border-left-color: var(--cube-charcoal); }

/* ---------- Scope, rooms, team ---------- */
.project-subhead {
	font-size: 17px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 32px 0 14px;
}

.scope-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.scope-chip {
	background: rgba(0, 174, 239, .1);
	border: 1px solid rgba(0, 174, 239, .35);
	color: var(--cube-cyan-dark);
	font-size: 13px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 999px;
}

.rooms-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: 480px;
}

.room-stat {
	background: var(--cube-grey-light);
	border-radius: var(--radius);
	padding: 20px 14px;
	text-align: center;
}
.room-stat .icon { margin-inline: auto; }
.room-num {
	display: block;
	font-size: 26px;
	font-weight: 800;
	margin-top: 8px;
	line-height: 1;
}
.room-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--cube-grey-mid);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-top: 4px;
}

.team-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 12px;
}
.team-list li {
	background: var(--cube-white);
	border-radius: 8px;
	padding: 12px 16px;
}
.team-role {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-grey-mid);
}
.team-name {
	display: block;
	font-weight: 700;
	font-size: 15px;
	margin-top: 2px;
}

/* ---------- Floor plans ---------- */
.plans-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.plan-item {
	position: relative;
	border: 1px solid var(--cube-grey-soft);
	padding: 0;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--cube-white);
	aspect-ratio: 4 / 3;
}
.plan-item img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

.project-quote { max-width: 780px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
	.mosaic-item:first-child { grid-column: span 2; }
	.mosaic-item:nth-child(6n) { grid-column: span 1; }
	.facts-5, .facts-4 { grid-template-columns: repeat(3, 1fr); }
	.plans-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
	.mosaic-item:first-child { grid-column: span 2; grid-row: span 2; }
	.facts-5, .facts-4, .facts-3 { grid-template-columns: repeat(2, 1fr); }
	.rooms-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.plans-grid { grid-template-columns: 1fr; }
	.ba-compare { aspect-ratio: 4 / 3; }
	.lb-prev { left: 8px; }
	.lb-next { right: 8px; }
	.lb-prev, .lb-next { width: 44px; height: 44px; }
}

/* =========================================================================
   V2.4.1 - PROJECT PAGE REDESIGN
   1. Hero: featured image as soft background
   2. Gallery: masonry, natural image ratios, NO cropping
   3. Premium client review card
   4. More breathing room across the whole page
   ========================================================================= */

/* ---------- 1. Hero with light featured-image background ---------- */
.project-hero.has-bg {
	position: relative;
	overflow: hidden;
}
.project-hero.has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	opacity: .22; /* light show, not full */
	filter: saturate(.85);
}
.project-hero.has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		rgba(23, 24, 27, .92) 25%,
		rgba(23, 24, 27, .72) 65%,
		rgba(0, 174, 239, .18) 120%);
}
.project-hero .hero-content {
	position: relative;
	z-index: 2;
}
.project-hero {
	padding: 190px 0 90px;
}

/* ---------- 4. Generous spacing across project sections ---------- */
.project-section { padding-block: clamp(56px, 8vw, 96px); }
.project-section .section-title { margin-bottom: 48px; }

.project-body { gap: clamp(40px, 6vw, 80px); }

.project-desc .entry-content {
	font-size: 16.5px;
	line-height: 1.85;
	max-width: 720px;
}
.project-desc .entry-content p { margin-bottom: 20px; }
.project-desc .entry-content h2,
.project-desc .entry-content h3 { margin: 36px 0 14px; }

.project-subhead { margin: 44px 0 18px; }

/* ---------- 2. Masonry gallery: natural ratios, zero cropping ---------- */
.pmasonry {
	column-count: 3;
	column-gap: 16px;
}

.pmasonry-item {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--cube-grey-light);
	break-inside: avoid;
}
.pmasonry-item img {
	width: 100%;
	height: auto;      /* natural ratio, image never cropped */
	display: block;
	transition: transform .45s var(--ease), filter .3s var(--ease);
}
.pmasonry-item:hover img { transform: scale(1.03); filter: brightness(.92); }
.pmasonry-item:focus-visible { outline: 3px solid var(--cube-cyan); outline-offset: 3px; }

/* Lightbox always shows the full uncropped original */
.lb-img { object-fit: contain; background: transparent; }

/* ---------- 3. Premium client review ---------- */
.client-review-wrap { background: var(--cube-grey-light); }

.client-review {
	position: relative;
	max-width: 820px;
	margin-inline: auto;
	background: var(--cube-white);
	border-radius: 16px;
	padding: clamp(36px, 5vw, 56px);
	box-shadow: 0 24px 60px rgba(31, 33, 36, .1);
	border-top: 4px solid var(--cube-cyan);
	text-align: center;
}

.cr-mark {
	position: absolute;
	top: -34px;
	left: 50%;
	transform: translateX(-50%);
	width: 64px;
	height: 64px;
	background: var(--cube-cyan);
	color: var(--cube-white);
	border-radius: 50%;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.55;
	box-shadow: 0 10px 24px rgba(0, 174, 239, .4);
}

.cr-stars {
	display: flex;
	justify-content: center;
	gap: 4px;
	color: #F5B301;
	margin: 14px 0 20px;
}
.cr-stars svg { width: 20px; height: 20px; }

.cr-quote {
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 500;
	line-height: 1.7;
	color: var(--cube-charcoal);
	margin: 0 0 30px;
}

.cr-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	border-top: 1px solid var(--cube-grey-soft);
	padding-top: 24px;
	text-align: left;
}

.cr-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--cube-charcoal);
	color: var(--cube-white);
	font-weight: 800;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cr-name {
	display: block;
	font-style: normal;
	font-weight: 800;
	font-size: 16px;
}
.cr-loc {
	display: block;
	font-size: 13px;
	color: var(--cube-grey-mid);
	margin-top: 2px;
}

.cr-logo {
	width: 88px;
	height: auto;
	margin-left: auto;
	opacity: .85;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.pmasonry { column-count: 2; }
}

@media (max-width: 640px) {
	.pmasonry { column-count: 2; column-gap: 10px; }
	.pmasonry-item { margin-bottom: 10px; border-radius: 8px; }
	.project-hero { padding: 160px 0 64px; }
	.cr-footer { flex-wrap: wrap; }
	.cr-logo { margin-left: 0; }
}

@media (max-width: 440px) {
	.pmasonry { column-count: 1; }
}

/* =========================================================================
   MOBILE GALLERY CAROUSEL + BEFORE/AFTER NATURAL RATIO FIX
   ========================================================================= */

/* ---------- Gallery Carousel (mobile only) ---------- */
@media (max-width: 767px) {
	.pmasonry { display: none; }

	.gallery-carousel {
		position: relative;
		margin-bottom: 32px;
	}

	.carousel-inner {
		position: relative;
		overflow: hidden;
		border-radius: var(--radius);
		background: var(--cube-grey-light);
		touch-action: pan-y;
	}

	.carousel-slide {
		display: none;
		opacity: 0;
		transition: opacity .4s var(--ease);
	}
	.carousel-slide.is-active {
		display: block;
		opacity: 1;
	}

	.carousel-slide .pmasonry-item {
		border-radius: 0;
		margin: 0;
		display: block;
		width: 100%;
	}
	.carousel-slide .pmasonry-item:hover img { transform: none; }
	.carousel-slide .pmasonry-item:hover { cursor: pointer; }

	.carousel-prev, .carousel-next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: rgba(0, 174, 239, .9);
		color: var(--cube-white);
		border: 0;
		font-size: 18px;
		cursor: pointer;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background .2s var(--ease);
	}
	.carousel-prev:hover, .carousel-next:hover { background: var(--cube-cyan); }

	.carousel-prev {
		left: 12px;
		padding-left: 2px;
	}
	.carousel-next {
		right: 12px;
		padding-right: 2px;
	}

	.carousel-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		padding: 16px 0;
	}

	.carousel-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--cube-grey-soft);
		border: 0;
		cursor: pointer;
		transition: background .3s var(--ease), transform .3s var(--ease);
	}
	.carousel-dot.is-active {
		background: var(--cube-cyan);
		transform: scale(1.3);
	}
}

/* ---------- Before / After: Natural image ratio (no fixed aspect) ---------- */
.ba-compare {
	position: relative;
	max-width: 100%;
	width: 100%;
	margin-inline: auto;
	border-radius: var(--radius);
	overflow: hidden;
	user-select: none;
	background: var(--cube-grey-light);
}

/* Let images determine height, don't force 16:9 */
.ba-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: var(--cube-white);
}

.ba-before-wrap {
	position: absolute;
	inset: 0 auto 0 0;
	width: 50%;
	overflow: hidden;
	border-right: 3px solid rgba(255, 255, 255, .8);
}
.ba-before-wrap .ba-before {
	position: absolute;
	inset: 0;
	width: auto;
	min-width: 100%;
}

.ba-range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: ew-resize;
	z-index: 4;
	margin: 0;
	-webkit-appearance: none;
}

.ba-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--cube-white);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
	z-index: 3;
	pointer-events: none;
}
.ba-handle::before, .ba-handle::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	transform: translateY(-50%);
}
.ba-handle::before { left: 8px; border-right-color: var(--cube-charcoal); }
.ba-handle::after { right: 8px; border-left-color: var(--cube-charcoal); }

.ba-label {
	position: absolute;
	top: 16px;
	padding: 6px 14px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-white);
	z-index: 2;
}
.ba-label-before { left: 16px; background: rgba(23, 24, 27, .75); }
.ba-label-after  { right: 16px; background: rgba(0, 174, 239, .9); }

@media (max-width: 640px) {
	.ba-label { font-size: 10px; top: 10px; }
	.ba-compare { border-radius: 8px; }
}

/* =========================================================================
   HERO SLIDER - STATIC TEXT + ROTATING BACKGROUND IMAGES (v2.4.0 style)
   ========================================================================= */

.hero-slider {
	position: relative;
	overflow: hidden;
	background: var(--cube-charcoal);
	min-height: 100vh;
	display: flex;
	align-items: center;
}

/* Background image layers - rotate, text stays fixed */
.hero-bg-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .8s ease-in-out;
}

@media (min-width: 1025px) {
	.hero-bg-slide {
		background-attachment: fixed;
	}
}
.hero-bg-slide.is-active {
	opacity: 1;
}

/* Overlay gradient - same for all slides */
.hero-slider .hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		rgba(23, 24, 27, .85) 0%,
		rgba(23, 24, 27, .70) 50%,
		rgba(0, 174, 239, .1) 120%);
	z-index: 1;
}

/* Text content - static, same responsive as v2.4.0 */
.hero-slider .hero-inner {
	position: relative;
	z-index: 2;
	padding: clamp(80px, 12vh, 180px) 0;
}

.hero-slider .hero-title {
	font-size: clamp(42px, 6.5vw, 72px);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--cube-white);
	margin: 0 0 clamp(16px, 2vw, 24px);
	word-break: break-word;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.hero-slider .hero-title span {
	display: block;
}

.hero-slider .hero-subtitle {
	font-size: clamp(16px, 2vw, 22px);
	font-weight: 500;
	color: var(--cube-grey-soft);
	margin: 0 0 clamp(24px, 3vw, 40px);
	max-width: 620px;
	line-height: 1.6;
}

.hero-slider .hero-actions {
	display: flex;
	gap: clamp(12px, 2vw, 16px);
	flex-wrap: wrap;
}

/* Controls - only visible if multiple slides */
.hero-slider .hero-prev,
.hero-slider .hero-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: clamp(44px, 5vw, 52px);
	height: clamp(44px, 5vw, 52px);
	border-radius: 50%;
	background: rgba(0, 174, 239, .85);
	border: 0;
	color: var(--cube-white);
	font-size: clamp(16px, 2.5vw, 20px);
	cursor: pointer;
	transition: background .25s var(--ease), transform .25s var(--ease);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-slider .hero-prev:hover,
.hero-slider .hero-next:hover {
	background: var(--cube-cyan);
	transform: translateY(-50%) scale(1.1);
}

.hero-slider .hero-prev { left: clamp(14px, 3vw, 32px); }
.hero-slider .hero-next { right: clamp(14px, 3vw, 32px); }

/* Indicators */
.hero-slider .hero-indicators {
	position: absolute;
	bottom: clamp(20px, 3vh, 36px);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: clamp(8px, 1.5vw, 12px);
	z-index: 10;
}

.hero-slider .hero-dot {
	width: clamp(8px, 1.2vw, 11px);
	height: clamp(8px, 1.2vw, 11px);
	border-radius: 50%;
	background: rgba(255, 255, 255, .4);
	border: 0;
	cursor: pointer;
	transition: background .35s var(--ease), transform .35s var(--ease);
}
.hero-slider .hero-dot.is-active {
	background: var(--cube-cyan);
	transform: scale(1.4);
}
.hero-slider .hero-dot:hover {
	background: rgba(255, 255, 255, .7);
}

.hero-slider .hero-scroll {
	position: absolute;
	bottom: clamp(12px, 2vh, 28px);
	left: 50%;
	transform: translateX(-50%);
	font-size: clamp(9px, 1vw, 11px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-white);
	opacity: .6;
	animation: hero-bounce 2s ease-in-out infinite;
	z-index: 2;
}

@keyframes hero-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(6px); }
}

/* Tablet */
@media (max-width: 1024px) {
	.hero-slider { min-height: 85vh; }
	.hero-slider .hero-inner { padding: clamp(70px, 10vh, 140px) 0; }
}

/* Mobile */
@media (max-width: 768px) {
	.hero-slider { min-height: 70vh; }
	.hero-slider .hero-inner { padding: clamp(60px, 8vh, 100px) 0; }
	.hero-slider .hero-title { line-height: 1.15; }
	.hero-slider .hero-prev,
	.hero-slider .hero-next { width: 40px; height: 40px; font-size: 16px; }
}

/* Small mobile */
@media (max-width: 480px) {
	.hero-slider { min-height: 60vh; }
	.hero-slider .hero-inner { padding: clamp(50px, 6vh, 80px) 0; }
	.hero-slider .hero-prev,
	.hero-slider .hero-next { display: none; }
	.hero-slider .hero-indicators { bottom: 12px; gap: 6px; }
	.hero-slider .hero-dot { width: 7px; height: 7px; }
	.hero-slider .hero-dot.is-active { transform: scale(1.3); }
}:root {
	/* Colors */
	--cube-charcoal: #1F2124;
	--cube-charcoal-deep: #17181B;
	--cube-white: #FFFFFF;
	--cube-cyan: #00AEEF;
	--cube-cyan-dark: #0092C8;
	--cube-grey-light: #F4F4F4;
	--cube-grey-mid: #9B9B9B;
	--cube-grey-soft: #E6E6E6;
	--cube-navy: #071A33;

	/* Type */
	--font-brand: 'Montserrat', 'Segoe UI', Arial, sans-serif;

	/* Layout */
	--container: 1180px;
	--radius: 10px;
	--section-pad: clamp(64px, 9vw, 110px);
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-brand);
	font-size: 16px;
	line-height: 1.6;
	color: var(--cube-charcoal);
	background: var(--cube-white);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
	outline: 3px solid var(--cube-cyan);
	outline-offset: 3px;
}

h1, h2, h3 { margin: 0; line-height: 1.15; }

.container {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}

.section { padding-block: var(--section-pad); }

.section-dark {
	background: var(--cube-charcoal);
	color: var(--cube-white);
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--cube-cyan);
	color: var(--cube-white);
	padding: 10px 18px;
	z-index: 200;
	font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Icons ---------- */
.icon {
	width: 34px;
	height: 34px;
	color: var(--cube-cyan);
	flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-block;
	font-family: var(--font-brand);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 15px 30px;
	border-radius: 6px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
	min-height: 48px;
}

.btn-primary {
	background: var(--cube-cyan);
	color: var(--cube-white);
}
.btn-primary:hover { background: var(--cube-cyan-dark); transform: translateY(-2px); }

.btn-outline {
	background: transparent;
	color: var(--cube-white);
	border-color: var(--cube-white);
}
.btn-outline:hover { background: var(--cube-white); color: var(--cube-charcoal); }

/* ---------- Section headings ---------- */
.section-title {
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 40px;
}
.section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	background: var(--cube-cyan);
	border-radius: 2px;
}
.section-title-light { color: var(--cube-white); }

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.section-head .section-title { margin-bottom: 40px; }

.section-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--cube-cyan);
	margin-bottom: 44px;
}
.section-link .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.section-link:hover .icon { transform: translateX(4px); }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 100;
	padding-block: 18px;
	/* Safety scrim: keeps the white logo and menu readable even if a
	   template ever renders without a dark banner behind the header. */
	background: linear-gradient(180deg, rgba(23, 24, 27, .72) 0%, rgba(23, 24, 27, .35) 65%, rgba(23, 24, 27, 0) 100%);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-logo img,
.custom-logo { width: 170px; height: auto; }

.site-nav { display: flex; align-items: center; gap: 32px; }

.nav-list {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-list a {
	color: var(--cube-white);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 10px 2px;
	position: relative;
}
.nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 4px;
	width: 0;
	height: 2px;
	background: var(--cube-cyan);
	transition: width .25s var(--ease);
}
.nav-list a:hover::after,
.nav-list .current-menu-item a::after { width: 100%; }

.nav-cta { padding: 12px 22px; font-size: 12px; }

/* Mobile toggle */
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	padding: 12px;
	cursor: pointer;
}
.nav-toggle-bar {
	width: 26px;
	height: 3px;
	background: var(--cube-white);
	border-radius: 2px;
	transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	background: var(--cube-charcoal) center / cover no-repeat;
	color: var(--cube-white);
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, rgba(23, 24, 27, .94) 30%, rgba(23, 24, 27, .55) 70%, rgba(0, 174, 239, .18) 100%);
}

.hero-inner {
	position: relative;
	padding-block: 140px 90px;
	max-width: var(--container);
	width: 100%;
}

.hero-title {
	font-size: clamp(42px, 7.5vw, 84px);
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
}
.hero-title span:last-child { color: var(--cube-cyan); }

.hero-subtitle {
	margin: 22px 0 36px;
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 500;
	color: var(--cube-grey-soft);
	max-width: 480px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-scroll {
	position: absolute;
	left: 26px;
	bottom: 30px;
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--cube-grey-mid);
	writing-mode: vertical-rl;
}

/* =========================================================================
   STATS
   ========================================================================= */
.stats {
	background: var(--cube-white);
	border-bottom: 1px solid var(--cube-grey-soft);
	padding-block: 42px;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.stat { display: flex; align-items: center; gap: 16px; }

.stat-number {
	display: block;
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
}

.stat-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--cube-grey-mid);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-top: 4px;
}

/* =========================================================================
   FEATURED PROJECTS
   ========================================================================= */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.project-card { display: block; }

.project-thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--cube-grey-light);
	margin-bottom: 14px;
}
.project-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s var(--ease);
}
.project-card:hover .project-thumb img { transform: scale(1.06); }

.project-thumb-empty {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--cube-grey-light), var(--cube-grey-soft));
}

.project-name { font-size: 16px; font-weight: 700; }

.project-type {
	font-size: 12px;
	font-weight: 600;
	color: var(--cube-grey-mid);
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* =========================================================================
   SERVICES (One Window Solution)
   ========================================================================= */
.services-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.service {
	padding: 34px 24px;
	border-right: 1px solid rgba(255, 255, 255, .12);
	transition: background-color .25s var(--ease);
}
.service:last-child { border-right: 0; }
.service:hover { background: rgba(0, 174, 239, .08); }

.service-name {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 18px 0 8px;
}

.service-desc {
	margin: 0;
	font-size: 13.5px;
	color: var(--cube-grey-mid);
}

/* =========================================================================
   PROCESS
   ========================================================================= */
.process-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
	counter-reset: step;
}

.process-step {
	position: relative;
	padding-top: 20px;
}
.process-step::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--cube-grey-soft);
}
.process-step::after {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cube-cyan);
}

.process-num {
	font-size: 13px;
	font-weight: 800;
	color: var(--cube-cyan);
	letter-spacing: .1em;
}

.process-name {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 6px 0;
}

.process-desc {
	margin: 0;
	font-size: 13px;
	color: var(--cube-grey-mid);
}

/* =========================================================================
   WHY CHOOSE CUBE
   ========================================================================= */
.why-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 28px;
}

.why-item { text-align: left; }

.why-name {
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 16px 0 8px;
}

.why-desc {
	margin: 0;
	font-size: 13.5px;
	color: var(--cube-grey-mid);
}

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.testimonials { background: var(--cube-grey-light); }

.testimonial-slider {
	position: relative;
	max-width: 780px;
	margin-inline: auto;
	background: var(--cube-white);
	border-radius: var(--radius);
	padding: 48px 48px 90px;
	box-shadow: 0 18px 50px rgba(31, 33, 36, .08);
}

.testimonial { display: none; margin: 0; }
.testimonial.is-active { display: block; }

.testimonial-mark {
	font-size: 56px;
	line-height: 1;
	font-weight: 800;
	color: var(--cube-cyan);
	display: block;
	margin-bottom: 10px;
}

.testimonial-quote {
	font-size: clamp(16px, 1.7vw, 19px);
	font-weight: 500;
	margin: 0 0 24px;
}

.testimonial-name {
	font-style: normal;
	font-weight: 700;
	display: block;
}

.testimonial-loc {
	font-size: 13px;
	color: var(--cube-grey-mid);
}

.testimonial-nav {
	position: absolute;
	right: 40px;
	bottom: 32px;
	display: flex;
	gap: 10px;
}

.testimonial-btn {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--cube-grey-soft);
	background: var(--cube-white);
	font-size: 18px;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}
.testimonial-btn:hover {
	background: var(--cube-cyan);
	color: var(--cube-white);
	border-color: var(--cube-cyan);
}

/* =========================================================================
   INSTAGRAM STRIP
   ========================================================================= */
.insta-handle {
	color: var(--cube-cyan);
	font-weight: 700;
	font-size: 14px;
	display: inline-block;
	margin-top: -30px;
	margin-bottom: 40px;
}

.insta-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}

.insta-item {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 8px;
	background: var(--cube-grey-light);
}
.insta-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.insta-item:hover img { transform: scale(1.07); opacity: .85; }

.insta-item-empty {
	background: linear-gradient(135deg, var(--cube-grey-light), var(--cube-grey-soft));
}

/* =========================================================================
   CTA STRIP
   ========================================================================= */
.cta-strip {
	background: linear-gradient(100deg, var(--cube-navy), var(--cube-charcoal));
	color: var(--cube-white);
	padding-block: 56px;
}

.cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.cta-title {
	font-size: clamp(22px, 2.8vw, 30px);
	font-weight: 800;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
	background: var(--cube-charcoal-deep);
	color: var(--cube-grey-soft);
	padding-top: 70px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 56px;
}

.footer-logo { width: 165px; margin-bottom: 18px; }

.footer-brand p {
	margin: 0;
	font-size: 14px;
	color: var(--cube-grey-mid);
	max-width: 260px;
}

.footer-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--cube-white);
	margin-bottom: 18px;
}

.footer-address {
	display: flex;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	color: var(--cube-grey-mid);
}
.footer-address .icon { width: 20px; height: 20px; margin-top: 2px; }

.footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.footer-contact a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--cube-grey-mid);
	transition: color .2s var(--ease);
}
.footer-contact a:hover { color: var(--cube-cyan); }
.footer-contact .icon { width: 18px; height: 18px; }

.footer-social { display: flex; gap: 10px; margin-top: 22px; }

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .15);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--cube-grey-soft);
	transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.social-link:hover {
	background: var(--cube-cyan);
	border-color: var(--cube-cyan);
	color: var(--cube-white);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-block: 20px;
}

.footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--cube-grey-mid);
}
.footer-bottom-inner p { margin: 0; }
.footer-tag { color: var(--cube-cyan); font-weight: 700; letter-spacing: .06em; }

/* =========================================================================
   SCROLL REVEAL
   ========================================================================= */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
	.projects-grid { grid-template-columns: repeat(2, 1fr); }
	.services-grid { grid-template-columns: repeat(3, 1fr); }
	.service:nth-child(3n) { border-right: 0; }
	.why-grid { grid-template-columns: repeat(3, 1fr); }
	.process-track { grid-template-columns: repeat(3, 1fr); row-gap: 44px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.insta-grid { grid-template-columns: repeat(3, 1fr); }
	.insta-item:nth-child(n+4) { display: none; }
}

@media (max-width: 768px) {
	.nav-toggle { display: flex; }

	.site-nav {
		position: fixed;
		inset: 0;
		background: var(--cube-charcoal-deep);
		flex-direction: column;
		justify-content: center;
		gap: 24px;
		transform: translateX(100%);
		transition: transform .3s var(--ease);
		z-index: 90;
	}
	.site-nav.is-open { transform: translateX(0); }

	.nav-list {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
	.nav-list a { font-size: 18px; padding: 12px; }

	.nav-toggle { position: relative; z-index: 95; }

	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.services-grid { grid-template-columns: 1fr; }
	.service { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
	.why-grid { grid-template-columns: repeat(2, 1fr); }
	.process-track { grid-template-columns: repeat(2, 1fr); }
	.testimonial-slider { padding: 32px 24px 90px; }
	.testimonial-nav { right: 24px; }
	.cta-inner { justify-content: center; text-align: center; }
	.hero-scroll { display: none; }
}

@media (max-width: 520px) {
	.projects-grid,
	.stats-grid,
	.why-grid,
	.process-track,
	.footer-grid { grid-template-columns: 1fr; }
	.insta-grid { grid-template-columns: repeat(2, 1fr); }
	.insta-item:nth-child(n+3) { display: none; }
	.hero-actions .btn { width: 100%; text-align: center; }
}

/* =========================================================================
   V2 - INNER PAGES
   ========================================================================= */

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
	background: linear-gradient(105deg, var(--cube-charcoal-deep) 40%, var(--cube-charcoal) 75%, rgba(0, 174, 239, .25) 130%);
	color: var(--cube-white);
	padding: 170px 0 70px;
}

.page-hero-title {
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.page-hero-sub {
	margin: 14px 0 0;
	max-width: 560px;
	color: var(--cube-grey-soft);
	font-size: 16px;
}

/* ---------- Projects filter bar ---------- */
.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
}

.filter-link {
	padding: 10px 20px;
	border: 1px solid var(--cube-grey-soft);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filter-link:hover,
.filter-link.is-active {
	background: var(--cube-cyan);
	border-color: var(--cube-cyan);
	color: var(--cube-white);
}

/* ---------- Pagination ---------- */
.pagination-wrap { margin-top: 48px; }
.pagination-wrap .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.pagination-wrap .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--cube-grey-soft);
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
}
.pagination-wrap .page-numbers.current,
.pagination-wrap .page-numbers:hover {
	background: var(--cube-cyan);
	border-color: var(--cube-cyan);
	color: var(--cube-white);
}

/* ---------- Services page rows ---------- */
.service-rows { display: grid; gap: clamp(48px, 7vw, 90px); }

.service-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}
.service-row.is-flipped .service-row-media { order: 2; }

.service-row-media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--cube-grey-light);
}
.service-row-media img { width: 100%; height: 100%; object-fit: cover; }

.service-row-title {
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	text-transform: uppercase;
	margin: 14px 0 12px;
}

.service-row-content { color: #4a4d52; margin-bottom: 22px; }
.service-row-content p { margin: 0 0 14px; }

/* ---------- About page ---------- */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.about-media {
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--cube-grey-light);
	aspect-ratio: 4 / 3;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }

.entry-content { line-height: 1.75; }
.entry-content p { margin: 0 0 16px; }
.entry-content h2, .entry-content h3 { margin: 28px 0 12px; font-weight: 800; }
.entry-content img { border-radius: var(--radius); }
.entry-content a { color: var(--cube-cyan); font-weight: 600; }

/* ---------- Contact page ---------- */
.contact-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.contact-form { display: grid; gap: 18px; }

.form-field { margin: 0; display: grid; gap: 7px; }

.form-field label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	font-family: var(--font-brand);
	font-size: 15px;
	padding: 14px 16px;
	border: 1px solid var(--cube-grey-soft);
	border-radius: 8px;
	background: var(--cube-white);
	color: var(--cube-charcoal);
	transition: border-color .2s var(--ease);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--cube-cyan);
	box-shadow: 0 0 0 3px rgba(0, 174, 239, .18);
}

.hp-field {
	position: absolute !important;
	left: -9999px !important;
	height: 0;
	overflow: hidden;
}

.form-notice {
	padding: 14px 18px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 20px;
}
.form-notice-success { background: #E7F8EE; color: #157A42; border: 1px solid #B9E8CD; }
.form-notice-error   { background: #FDECEC; color: #B02A2A; border: 1px solid #F3C2C2; }

.contact-side { display: grid; gap: 18px; }

.contact-card {
	background: var(--cube-grey-light);
	border-radius: var(--radius);
	padding: 24px;
}
.contact-card .footer-title { color: var(--cube-charcoal); }
.contact-card .footer-address { color: #4a4d52; }

.contact-big {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 14px;
}
.contact-big .icon { width: 22px; height: 22px; }

.btn-block { display: block; text-align: center; }

.map-wrap { line-height: 0; }

/* ---------- Blog ---------- */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.blog-card {
	background: var(--cube-white);
	border: 1px solid var(--cube-grey-soft);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.blog-card:hover {
	box-shadow: 0 16px 40px rgba(31, 33, 36, .1);
	transform: translateY(-4px);
}

.blog-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cube-grey-light); }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }

.blog-card-body { padding: 22px; }

.blog-date {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-cyan);
}
.blog-date-hero { display: inline-block; margin-bottom: 10px; }

.blog-title { font-size: 18px; font-weight: 700; margin: 8px 0 10px; }
.blog-title a:hover { color: var(--cube-cyan); }

.blog-excerpt { margin: 0 0 14px; font-size: 14px; color: #4a4d52; }

.blog-card .section-link { margin-bottom: 0; }

.article-container { max-width: 820px; }

.article-hero-img {
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 36px;
}

.article-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--cube-grey-soft);
	font-weight: 600;
}
.article-nav a:hover { color: var(--cube-cyan); }

/* ---------- Inner pages responsive ---------- */
@media (max-width: 1024px) {
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.service-row,
	.about-grid,
	.contact-grid { grid-template-columns: 1fr; }
	.service-row.is-flipped .service-row-media { order: 0; }
	.blog-grid { grid-template-columns: 1fr; }
	.page-hero { padding: 140px 0 54px; }
}

/* =========================================================================
   V2.1 - SINGLE BLOG POST: ARTICLE + CONVERSION SIDEBAR
   ========================================================================= */

.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(32px, 4.5vw, 56px);
	align-items: start;
}

.blog-main { min-width: 0; }

.page-hero-title-post {
	text-transform: none;
	font-size: clamp(28px, 4vw, 44px);
	max-width: 900px;
}

/* ---------- Sidebar ---------- */
.blog-side {
	display: grid;
	gap: 22px;
	position: sticky;
	top: 24px;
}

.side-block {
	background: var(--cube-white);
	border: 1px solid var(--cube-grey-soft);
	border-radius: var(--radius);
	padding: 26px;
}

.side-title {
	font-size: 17px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 16px;
}
.side-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 38px;
	height: 3px;
	background: var(--cube-cyan);
	border-radius: 2px;
}
.side-title-light { color: var(--cube-white); }

.side-text {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.65;
}

.side-eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #C9984D;
	margin-bottom: 10px;
}

/* Services list */
.side-services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}
.side-services li { border-bottom: 1px solid var(--cube-grey-light); }
.side-services li:last-child { border-bottom: 0; }
.side-services a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 4px;
	font-size: 14px;
	font-weight: 600;
	transition: color .2s var(--ease), transform .2s var(--ease);
}
.side-services a:hover {
	color: var(--cube-cyan);
	transform: translateX(4px);
}
.side-services .icon { width: 22px; height: 22px; }

/* Dark quotation block */
.side-block-dark {
	background: var(--cube-charcoal);
	border-color: var(--cube-charcoal);
	color: var(--cube-grey-soft);
}

.side-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-weight: 700;
	font-size: 15px;
	color: var(--cube-white);
}
.side-phone:hover { color: var(--cube-cyan); }
.side-phone .icon { width: 18px; height: 18px; }

/* Navy catalogue block (premium: deep navy + warm gold from brand kit) */
.side-block-navy {
	background: linear-gradient(140deg, var(--cube-navy) 55%, #0D2B4E 100%);
	border-color: var(--cube-navy);
	color: var(--cube-grey-soft);
}
.side-block-navy .side-title::after { background: #C9984D; }

.btn-gold {
	background: #C9984D;
	color: #14213A;
}
.btn-gold:hover {
	background: #DCAF66;
	transform: translateY(-2px);
}

/* WhatsApp CTA block */
.side-block-cta {
	background: var(--cube-grey-light);
	border-color: var(--cube-grey-soft);
}

.btn-whatsapp {
	background: #25D366;
	color: #FFFFFF;
}
.btn-whatsapp:hover {
	background: #1EBE5B;
	transform: translateY(-2px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.blog-layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 860px) {
	.blog-layout { grid-template-columns: 1fr; }
	.blog-side {
		position: static;
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.blog-side { grid-template-columns: 1fr; }
}

/* =========================================================================
   V2.2 - BLOG LIST ROWS, SIDEBAR EXTRAS, PROJECT DETAILS, PRE-FOOTER FORM
   ========================================================================= */

/* ---------- Blog listing rows ---------- */
.blog-list { display: grid; gap: 28px; }

.blog-row {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 24px;
	background: var(--cube-white);
	border: 1px solid var(--cube-grey-soft);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.blog-row:hover {
	box-shadow: 0 16px 40px rgba(31, 33, 36, .1);
	transform: translateY(-3px);
}

.blog-row-thumb {
	display: block;
	background: var(--cube-grey-light);
	min-height: 210px;
}
.blog-row-thumb img { width: 100%; height: 100%; object-fit: cover; }

.blog-row-body { padding: 22px 24px 22px 0; }
.blog-row-body .blog-title { font-size: 20px; }
.blog-row-body .section-link { margin-bottom: 0; }

.blog-row-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.blog-row-meta-hero { margin-bottom: 12px; }

.blog-cat {
	display: inline-block;
	background: rgba(0, 174, 239, .12);
	color: var(--cube-cyan);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 5px 12px;
	border-radius: 999px;
}
.page-hero .blog-cat { background: rgba(0, 174, 239, .22); }

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}
.post-tag {
	font-size: 13px;
	font-weight: 600;
	color: var(--cube-grey-mid);
	border: 1px solid var(--cube-grey-soft);
	border-radius: 999px;
	padding: 6px 14px;
	transition: all .2s var(--ease);
}
.post-tag:hover {
	background: var(--cube-cyan);
	border-color: var(--cube-cyan);
	color: var(--cube-white);
}

/* ---------- Sidebar: mini post lists ---------- */
.side-posts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}
.side-posts li { border-bottom: 1px solid var(--cube-grey-light); }
.side-posts li:last-child { border-bottom: 0; }
.side-posts a {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	align-items: center;
}
.side-posts a:hover .side-post-title { color: var(--cube-cyan); }

.side-post-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--cube-grey-light);
	display: block;
}
.side-post-thumb img { width: 100%; height: 100%; object-fit: cover; }

.side-post-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	transition: color .2s var(--ease);
}
.side-post-meta {
	display: block;
	font-size: 12px;
	color: var(--cube-grey-mid);
	margin-top: 3px;
}

.side-more { margin: 10px 0 0; }

/* Sidebar mini form */
.side-form { margin-top: 16px; gap: 12px; }
.side-form .form-field input,
.side-form .form-field textarea {
	padding: 12px 14px;
	font-size: 14px;
}

/* Promo block */
.side-block-promo { padding: 0; overflow: hidden; border: 0; }
.side-block-promo img {
	width: 100%;
	display: block;
	border-radius: var(--radius);
	transition: transform .35s var(--ease);
}
.side-block-promo a:hover img { transform: scale(1.03); }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Project details ---------- */
.project-facts {
	background: var(--cube-white);
	border-bottom: 1px solid var(--cube-grey-soft);
	padding-block: 26px;
}

.project-facts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.project-fact { display: flex; align-items: center; gap: 14px; }
.project-fact .icon { width: 30px; height: 30px; }

.fact-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-grey-mid);
}
.fact-value {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-top: 2px;
}

.project-video {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 40px;
	background: var(--cube-charcoal);
}
.project-video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.project-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(32px, 4.5vw, 56px);
	align-items: start;
}

.project-features {
	background: var(--cube-grey-light);
	border-radius: var(--radius);
	padding: 26px;
	position: sticky;
	top: 24px;
}

.features-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 12px;
}
.features-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
}
.features-list .icon { width: 20px; height: 20px; margin-top: 1px; }

/* ---------- Pre-footer lead form ---------- */
.prefooter {
	background: linear-gradient(100deg, var(--cube-navy), var(--cube-charcoal));
	color: var(--cube-white);
	padding-block: clamp(48px, 7vw, 80px);
}

.prefooter-grid {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.prefooter-title {
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 14px;
	margin-bottom: 16px;
}
.prefooter-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 52px;
	height: 4px;
	background: var(--cube-cyan);
	border-radius: 2px;
}

.prefooter-text {
	margin: 0 0 18px;
	color: var(--cube-grey-soft);
	font-size: 15px;
}

.prefooter-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 16px;
}
.prefooter-msg { grid-column: 1 / -1; }

.prefooter-form .form-field input,
.prefooter-form .form-field select {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .18);
	color: var(--cube-white);
}
.prefooter-form .form-field input::placeholder { color: var(--cube-grey-mid); }
.prefooter-form .form-field select option { color: var(--cube-charcoal); }
.prefooter-form .form-field input:focus,
.prefooter-form .form-field select:focus {
	border-color: var(--cube-cyan);
	background: rgba(255, 255, 255, .1);
}

/* ---------- Footer additions ---------- */
.footer-timings {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--cube-grey-mid);
}
.footer-timings .icon { width: 18px; height: 18px; }

.social-icon { width: 20px; height: 20px; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.blog-row { grid-template-columns: 1fr; }
	.blog-row-thumb { aspect-ratio: 16 / 9; min-height: 0; }
	.blog-row-body { padding: 0 22px 22px; }
	.project-body { grid-template-columns: 1fr; }
	.project-features { position: static; }
	.project-facts-grid { grid-template-columns: 1fr; gap: 14px; }
	.prefooter-grid { grid-template-columns: 1fr; }
	.prefooter-fields { grid-template-columns: 1fr; }
}

/* =========================================================================
   V2.3 - ELEMENTOR SUPPORT + SHORTCODE SECTIONS
   ========================================================================= */

/* Blank Elementor canvas: full width, content starts under the header */
.cube-elementor-canvas { min-height: 60vh; }
.cube-elementor-canvas > .elementor { margin-top: 0; }

/* Shortcode sections: self-contained spacing so they look right anywhere */
.cube-sc { margin: 0 auto; }
.cube-sc-pad { padding: clamp(36px, 5vw, 60px) clamp(20px, 4vw, 48px); border-radius: var(--radius); }

/* Dark shortcode sections keep their own background when dropped on white pages */
.cube-sc.section-dark { background: var(--cube-charcoal); color: var(--cube-white); }

/* Stats shortcode: add its own vertical padding */
.stats.cube-sc { border: 0; }

/* Testimonial slider shortcode keeps its card look on any background */
.testimonial-slider.cube-sc { margin-inline: auto; }

/* CTA strip shortcode: rounded standalone version */
.cta-strip.cube-sc { border-radius: var(--radius); }
.cta-strip.cube-sc .cta-inner { padding-inline: clamp(20px, 4vw, 48px); }

/* Elementor editor: make sure theme fonts apply inside the editor iframe */
.elementor-widget-container .section-title,
.elementor-widget-container .btn { font-family: var(--font-brand); }

/* =========================================================================
   V2.4 - PROJECT CASE STUDY: MOSAIC GALLERY, BEFORE/AFTER, DETAILS
   ========================================================================= */

/* ---------- Hero badges ---------- */
.project-hero-badges { display: flex; gap: 10px; margin-bottom: 12px; }

.status-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 5px 12px;
	border-radius: 999px;
}
.status-completed { background: rgba(37, 211, 102, .18); color: #4ADE80; }
.status-ongoing   { background: rgba(201, 152, 77, .2);  color: #E3B778; }
.status-upcoming  { background: rgba(255, 255, 255, .14); color: var(--cube-grey-soft); }

.project-hero-loc {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.project-hero-loc .icon { width: 18px; height: 18px; }

.map-direction-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 10px;
	color: var(--cube-cyan);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.map-direction-link .icon { width: 16px; height: 16px; }
.map-direction-link:hover { text-decoration: underline; }

/* ---------- Facts bar (auto columns) ---------- */
.project-facts-grid { display: grid; gap: 22px; }
.facts-5 { grid-template-columns: repeat(5, 1fr); }
.facts-4 { grid-template-columns: repeat(4, 1fr); }
.facts-3 { grid-template-columns: repeat(3, 1fr); }
.facts-2 { grid-template-columns: repeat(2, 1fr); }
.facts-1 { grid-template-columns: 1fr; }

/* ---------- Mosaic gallery ----------
   First image = large feature tile, rest fill a smart grid.
   Fully responsive: 4 cols desktop, 2 tablet, 1-2 mobile. */
.mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 220px;
	gap: 14px;
}

.mosaic-item {
	position: relative;
	border: 0;
	padding: 0;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--cube-grey-light);
	display: block;
	width: 100%;
	height: 100%;
}
.mosaic-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s var(--ease);
}
.mosaic-item:hover img { transform: scale(1.06); }

/* Feature tiles pattern */
.mosaic-item:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic-item:nth-child(6n) { grid-column: span 2; }

.mosaic-zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 174, 239, .92);
	color: var(--cube-white);
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.mosaic-item:hover .mosaic-zoom,
.mosaic-item:focus-visible .mosaic-zoom { opacity: 1; transform: none; }

/* ---------- Lightbox ---------- */
.cube-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	background: rgba(23, 24, 27, .96);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cube-lightbox[hidden] { display: none; }

.lb-img {
	max-width: min(92vw, 1300px);
	max-height: 86vh;
	object-fit: contain;
	border-radius: 8px;
}

.lb-close, .lb-prev, .lb-next {
	position: absolute;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .25);
	color: var(--cube-white);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 22px;
	cursor: pointer;
	transition: background-color .2s var(--ease);
	display: flex;
	align-items: center;
	justify-content: center;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--cube-cyan); border-color: var(--cube-cyan); }

.lb-close { top: 20px; right: 20px; font-size: 30px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- Before / After compare ---------- */
.ba-compare {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 980px;
	margin-inline: auto;
	border-radius: var(--radius);
	overflow: hidden;
	user-select: none;
}

.ba-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ba-before-wrap {
	position: absolute;
	inset: 0 auto 0 0;
	width: 50%;
	overflow: hidden;
	border-right: 3px solid var(--cube-white);
}
.ba-before-wrap .ba-before {
	width: 100%;
	height: 100%;
	position: static;
}
/* Keep the before image sized to the container, not the clip wrapper */
.ba-compare { --ba-w: 100%; }
.ba-before-wrap .ba-before {
	position: absolute;
	inset: 0;
	width: auto;
	min-width: 100%;
	height: 100%;
}

.ba-label {
	position: absolute;
	top: 16px;
	padding: 6px 14px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-white);
	z-index: 2;
}
.ba-label-before { left: 16px; background: rgba(23, 24, 27, .75); }
.ba-label-after  { right: 16px; background: rgba(0, 174, 239, .9); }

.ba-range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: ew-resize;
	z-index: 4;
	margin: 0;
	-webkit-appearance: none;
}

.ba-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--cube-white);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
	z-index: 3;
	pointer-events: none;
}
.ba-handle::before, .ba-handle::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	transform: translateY(-50%);
}
.ba-handle::before { left: 8px; border-right-color: var(--cube-charcoal); }
.ba-handle::after { right: 8px; border-left-color: var(--cube-charcoal); }

/* ---------- Scope, rooms, team ---------- */
.project-subhead {
	font-size: 17px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 32px 0 14px;
}

.scope-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.scope-chip {
	background: rgba(0, 174, 239, .1);
	border: 1px solid rgba(0, 174, 239, .35);
	color: var(--cube-cyan-dark);
	font-size: 13px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 999px;
}

.rooms-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: 480px;
}

.room-stat {
	background: var(--cube-grey-light);
	border-radius: var(--radius);
	padding: 20px 14px;
	text-align: center;
}
.room-stat .icon { margin-inline: auto; }
.room-num {
	display: block;
	font-size: 26px;
	font-weight: 800;
	margin-top: 8px;
	line-height: 1;
}
.room-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--cube-grey-mid);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-top: 4px;
}

.team-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 12px;
}
.team-list li {
	background: var(--cube-white);
	border-radius: 8px;
	padding: 12px 16px;
}
.team-role {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-grey-mid);
}
.team-name {
	display: block;
	font-weight: 700;
	font-size: 15px;
	margin-top: 2px;
}

/* ---------- Floor plans ---------- */
.plans-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.plan-item {
	position: relative;
	border: 1px solid var(--cube-grey-soft);
	padding: 0;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--cube-white);
	aspect-ratio: 4 / 3;
}
.plan-item img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

.project-quote { max-width: 780px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
	.mosaic-item:first-child { grid-column: span 2; }
	.mosaic-item:nth-child(6n) { grid-column: span 1; }
	.facts-5, .facts-4 { grid-template-columns: repeat(3, 1fr); }
	.plans-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
	.mosaic-item:first-child { grid-column: span 2; grid-row: span 2; }
	.facts-5, .facts-4, .facts-3 { grid-template-columns: repeat(2, 1fr); }
	.rooms-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.plans-grid { grid-template-columns: 1fr; }
	.ba-compare { aspect-ratio: 4 / 3; }
	.lb-prev { left: 8px; }
	.lb-next { right: 8px; }
	.lb-prev, .lb-next { width: 44px; height: 44px; }
}

/* =========================================================================
   V2.4.1 - PROJECT PAGE REDESIGN
   1. Hero: featured image as soft background
   2. Gallery: masonry, natural image ratios, NO cropping
   3. Premium client review card
   4. More breathing room across the whole page
   ========================================================================= */

/* ---------- 1. Hero with light featured-image background ---------- */
.project-hero.has-bg {
	position: relative;
	overflow: hidden;
}
.project-hero.has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	opacity: .22; /* light show, not full */
	filter: saturate(.85);
}
.project-hero.has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		rgba(23, 24, 27, .92) 25%,
		rgba(23, 24, 27, .72) 65%,
		rgba(0, 174, 239, .18) 120%);
}
.project-hero .hero-content {
	position: relative;
	z-index: 2;
}
.project-hero {
	padding: 190px 0 90px;
}

/* ---------- 4. Generous spacing across project sections ---------- */
.project-section { padding-block: clamp(56px, 8vw, 96px); }
.project-section .section-title { margin-bottom: 48px; }

.project-body { gap: clamp(40px, 6vw, 80px); }

.project-desc .entry-content {
	font-size: 16.5px;
	line-height: 1.85;
	max-width: 720px;
}
.project-desc .entry-content p { margin-bottom: 20px; }
.project-desc .entry-content h2,
.project-desc .entry-content h3 { margin: 36px 0 14px; }

.project-subhead { margin: 44px 0 18px; }

/* ---------- 2. Masonry gallery: natural ratios, zero cropping ---------- */
.pmasonry {
	column-count: 3;
	column-gap: 16px;
}

.pmasonry-item {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--cube-grey-light);
	break-inside: avoid;
}
.pmasonry-item img {
	width: 100%;
	height: auto;      /* natural ratio, image never cropped */
	display: block;
	transition: transform .45s var(--ease), filter .3s var(--ease);
}
.pmasonry-item:hover img { transform: scale(1.03); filter: brightness(.92); }
.pmasonry-item:focus-visible { outline: 3px solid var(--cube-cyan); outline-offset: 3px; }

/* Lightbox always shows the full uncropped original */
.lb-img { object-fit: contain; background: transparent; }

/* ---------- 3. Premium client review ---------- */
.client-review-wrap { background: var(--cube-grey-light); }

.client-review {
	position: relative;
	max-width: 820px;
	margin-inline: auto;
	background: var(--cube-white);
	border-radius: 16px;
	padding: clamp(36px, 5vw, 56px);
	box-shadow: 0 24px 60px rgba(31, 33, 36, .1);
	border-top: 4px solid var(--cube-cyan);
	text-align: center;
}

.cr-mark {
	position: absolute;
	top: -34px;
	left: 50%;
	transform: translateX(-50%);
	width: 64px;
	height: 64px;
	background: var(--cube-cyan);
	color: var(--cube-white);
	border-radius: 50%;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.55;
	box-shadow: 0 10px 24px rgba(0, 174, 239, .4);
}

.cr-stars {
	display: flex;
	justify-content: center;
	gap: 4px;
	color: #F5B301;
	margin: 14px 0 20px;
}
.cr-stars svg { width: 20px; height: 20px; }

.cr-quote {
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 500;
	line-height: 1.7;
	color: var(--cube-charcoal);
	margin: 0 0 30px;
}

.cr-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	border-top: 1px solid var(--cube-grey-soft);
	padding-top: 24px;
	text-align: left;
}

.cr-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--cube-charcoal);
	color: var(--cube-white);
	font-weight: 800;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cr-name {
	display: block;
	font-style: normal;
	font-weight: 800;
	font-size: 16px;
}
.cr-loc {
	display: block;
	font-size: 13px;
	color: var(--cube-grey-mid);
	margin-top: 2px;
}

.cr-logo {
	width: 88px;
	height: auto;
	margin-left: auto;
	opacity: .85;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.pmasonry { column-count: 2; }
}

@media (max-width: 640px) {
	.pmasonry { column-count: 2; column-gap: 10px; }
	.pmasonry-item { margin-bottom: 10px; border-radius: 8px; }
	.project-hero { padding: 160px 0 64px; }
	.cr-footer { flex-wrap: wrap; }
	.cr-logo { margin-left: 0; }
}

@media (max-width: 440px) {
	.pmasonry { column-count: 1; }
}

/* =========================================================================
   MOBILE GALLERY CAROUSEL + BEFORE/AFTER NATURAL RATIO FIX
   ========================================================================= */

/* ---------- Gallery Carousel (mobile only) ---------- */
@media (max-width: 767px) {
	.pmasonry { display: none; }

	.gallery-carousel {
		position: relative;
		margin-bottom: 32px;
	}

	.carousel-inner {
		position: relative;
		overflow: hidden;
		border-radius: var(--radius);
		background: var(--cube-grey-light);
		touch-action: pan-y;
	}

	.carousel-slide {
		display: none;
		opacity: 0;
		transition: opacity .4s var(--ease);
	}
	.carousel-slide.is-active {
		display: block;
		opacity: 1;
	}

	.carousel-slide .pmasonry-item {
		border-radius: 0;
		margin: 0;
		display: block;
		width: 100%;
	}
	.carousel-slide .pmasonry-item:hover img { transform: none; }
	.carousel-slide .pmasonry-item:hover { cursor: pointer; }

	.carousel-prev, .carousel-next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: rgba(0, 174, 239, .9);
		color: var(--cube-white);
		border: 0;
		font-size: 18px;
		cursor: pointer;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: background .2s var(--ease);
	}
	.carousel-prev:hover, .carousel-next:hover { background: var(--cube-cyan); }

	.carousel-prev {
		left: 12px;
		padding-left: 2px;
	}
	.carousel-next {
		right: 12px;
		padding-right: 2px;
	}

	.carousel-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		padding: 16px 0;
	}

	.carousel-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--cube-grey-soft);
		border: 0;
		cursor: pointer;
		transition: background .3s var(--ease), transform .3s var(--ease);
	}
	.carousel-dot.is-active {
		background: var(--cube-cyan);
		transform: scale(1.3);
	}
}

/* ---------- Before / After: Natural image ratio (no fixed aspect) ---------- */
.ba-compare {
	position: relative;
	max-width: 100%;
	width: 100%;
	margin-inline: auto;
	border-radius: var(--radius);
	overflow: hidden;
	user-select: none;
	background: var(--cube-grey-light);
}

/* Let images determine height, don't force 16:9 */
.ba-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: var(--cube-white);
}

.ba-before-wrap {
	position: absolute;
	inset: 0 auto 0 0;
	width: 50%;
	overflow: hidden;
	border-right: 3px solid rgba(255, 255, 255, .8);
}
.ba-before-wrap .ba-before {
	position: absolute;
	inset: 0;
	width: auto;
	min-width: 100%;
}

.ba-range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: ew-resize;
	z-index: 4;
	margin: 0;
	-webkit-appearance: none;
}

.ba-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--cube-white);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
	z-index: 3;
	pointer-events: none;
}
.ba-handle::before, .ba-handle::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	transform: translateY(-50%);
}
.ba-handle::before { left: 8px; border-right-color: var(--cube-charcoal); }
.ba-handle::after { right: 8px; border-left-color: var(--cube-charcoal); }

.ba-label {
	position: absolute;
	top: 16px;
	padding: 6px 14px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-white);
	z-index: 2;
}
.ba-label-before { left: 16px; background: rgba(23, 24, 27, .75); }
.ba-label-after  { right: 16px; background: rgba(0, 174, 239, .9); }

@media (max-width: 640px) {
	.ba-label { font-size: 10px; top: 10px; }
	.ba-compare { border-radius: 8px; }
}

/* =========================================================================
   HERO SLIDER WITH AUTO-PLAY, SWIPE, AND INDICATORS
   ========================================================================= */

.hero-slider {
	position: relative;
	overflow: hidden;
	background: var(--cube-charcoal);
}

.hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
}
.hero-slide.is-active {
	position: relative;
	opacity: 1;
}

.hero-slide:not(.is-active) { display: none; }

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg,
		rgba(23, 24, 27, .85) 25%,
		rgba(23, 24, 27, .65) 60%,
		rgba(0, 174, 239, .2) 120%);
	z-index: 1;
}

.hero-inner {
	position: relative;
	z-index: 2;
	padding: 160px 0 100px;
}

.hero-eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--cube-cyan);
	margin-bottom: 12px;
}

.hero-title {
	font-size: clamp(32px, 6vw, 72px);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--cube-white);
	margin: 0 0 20px;
	word-break: break-word;
}
.hero-title span { display: block; }

.hero-subtitle {
	font-size: clamp(16px, 2.2vw, 24px);
	font-weight: 500;
	color: var(--cube-grey-soft);
	margin: 0 0 32px;
	max-width: 580px;
}

.hero-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.hero-scroll {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--cube-white);
	opacity: .7;
	animation: hero-bounce 2s ease-in-out infinite;
	z-index: 2;
}

@keyframes hero-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50% { transform: translateX(-50%) translateY(6px); }
}

/* Controls */
.hero-prev, .hero-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0, 174, 239, .85);
	border: 0;
	color: var(--cube-white);
	font-size: 20px;
	cursor: pointer;
	transition: background .25s var(--ease), transform .25s var(--ease);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-prev:hover, .hero-next:hover { background: var(--cube-cyan); transform: translateY(-50%) scale(1.1); }

.hero-prev { left: 24px; }
.hero-next { right: 24px; }

/* Indicators */
.hero-indicators {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}

.hero-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	border: 0;
	cursor: pointer;
	transition: background .35s var(--ease), transform .35s var(--ease);
}
.hero-dot.is-active {
	background: var(--cube-cyan);
	transform: scale(1.4);
}
.hero-dot:hover { background: rgba(255, 255, 255, .65); }

/* Responsive */
@media (max-width: 768px) {
	.hero-inner { padding: 120px 0 80px; }
	.hero-prev, .hero-next { width: 40px; height: 40px; font-size: 16px; }
	.hero-prev { left: 14px; }
	.hero-next { right: 14px; }
	.hero-indicators { bottom: 16px; gap: 8px; }
	.hero-dot { width: 8px; height: 8px; }
}

@media (max-width: 480px) {
	.hero-inner { padding: 100px 0 60px; }
	.hero-actions { gap: 10px; }
	.hero-prev, .hero-next { display: none; }
	.hero-indicators { gap: 6px; }
}

/* =========================================================================
   PROJECT CAROUSEL (end of single project page)
   ========================================================================= */

.related-projects {
	background: var(--cube-navy);
	color: var(--cube-white);
	padding: clamp(60px, 8vw, 100px) 0;
	margin-top: clamp(40px, 5vw, 80px);
}

.related-projects .section-title {
	color: var(--cube-white);
	margin-bottom: clamp(40px, 5vw, 60px);
}

.projects-carousel {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 3vw, 32px);
	animation: fadeInUp .6s ease-out;
}

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.project-carousel-item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: var(--cube-white);
	transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.project-carousel-item:hover { transform: translateY(-8px); }
.project-carousel-item:focus { outline: 2px solid var(--cube-cyan); outline-offset: 4px; }

.project-carousel-item .proj-img {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 4 / 3;
	background: var(--cube-charcoal);
	min-height: 180px;
}

.project-carousel-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s var(--ease);
	display: block;
}

.project-carousel-item:hover img {
	transform: scale(1.06);
}

.project-carousel-item .proj-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0, 174, 239, .2) 0%, transparent 60%);
	opacity: 0;
	transition: opacity .3s var(--ease);
	z-index: 1;
}
.project-carousel-item:hover .proj-overlay {
	opacity: 1;
}

.project-carousel-item .proj-arrow {
	position: absolute;
	bottom: 16px;
	right: 16px;
	font-size: 28px;
	color: var(--cube-cyan);
	opacity: 0;
	transform: translateX(-6px);
	transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
	z-index: 2;
	line-height: 1;
}
.project-carousel-item:hover .proj-arrow {
	opacity: 1;
	transform: translateX(0);
}

.project-carousel-item .proj-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	line-height: 1.4;
	color: var(--cube-white);
}

.project-carousel-item .proj-location {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	color: var(--cube-grey-soft);
	margin: 0;
	transition: color .3s var(--ease);
}
.project-carousel-item:hover .proj-location {
	color: var(--cube-cyan);
}
.project-carousel-item .proj-location .icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.project-carousel-item .proj-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	width: fit-content;
	margin-top: 4px;
}

.proj-status-completed {
	background: rgba(76, 175, 80, .25);
	color: #7cfc00;
}
.proj-status-ongoing {
	background: rgba(255, 193, 7, .25);
	color: var(--cube-gold);
}
.proj-status-upcoming {
	background: rgba(33, 150, 243, .25);
	color: #64b5f6;
}

@media (max-width: 1024px) {
	.projects-carousel {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.projects-carousel {
		display: flex;
		grid-template-columns: unset;
		overflow-x: auto;
		gap: clamp(16px, 2vw, 24px);
		padding-bottom: 12px;
		margin: 0 -16px;
		padding-left: 16px;
		padding-right: 16px;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
	}

	.project-carousel-item {
		min-width: clamp(280px, 85vw, 380px);
		flex-shrink: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.project-carousel-item .proj-img {
		aspect-ratio: 4 / 3;
		min-height: 200px;
	}

	.project-carousel-item .proj-title {
		font-size: 14px;
	}

	.related-projects {
		padding: clamp(50px, 6vw, 80px) 0;
		margin-top: clamp(30px, 4vw, 60px);
		overflow: hidden;
	}

	/* Scrollbar styling for touch devices */
	.projects-carousel::-webkit-scrollbar {
		height: 6px;
	}
	.projects-carousel::-webkit-scrollbar-track {
		background: rgba(255, 255, 255, .1);
		border-radius: 10px;
	}
	.projects-carousel::-webkit-scrollbar-thumb {
		background: var(--cube-cyan);
		border-radius: 10px;
	}
}

@media (max-width: 480px) {
	.projects-carousel {
		grid-template-columns: 1fr;
		gap: clamp(12px, 2vw, 20px);
	}
	.related-projects {
		padding: clamp(40px, 5vw, 60px) 0;
		margin-top: clamp(20px, 3vw, 40px);
	}
	.project-carousel-item .proj-arrow {
		font-size: 24px;
		bottom: 12px;
		right: 12px;
	}
}

/* Mobile micro carousel adjustments */
@media (max-width: 480px) {
	.projects-carousel {
		margin: 0 -12px;
		padding-left: 12px;
		padding-right: 12px;
		gap: clamp(12px, 2vw, 16px);
	}

	.project-carousel-item {
		min-width: clamp(240px, 90vw, 340px);
	}

	.project-carousel-item .proj-img {
		aspect-ratio: 4 / 3;
		min-height: 180px;
	}

	.project-carousel-item .proj-title {
		font-size: 13px;
	}

	.project-carousel-item .proj-location {
		font-size: 12px;
	}

	.project-carousel-item .proj-arrow {
		font-size: 20px;
		bottom: 10px;
		right: 10px;
	}
}

/* =========================================================================
   HERO IMAGE MOBILE IMPROVEMENTS
   ========================================================================= */

@media (max-width: 768px) {
	.hero-slider .hero-bg-slide {
		background-size: cover;
		background-position: center 30%;
	}
	
	.hero-slider .hero-inner {
		max-width: 100%;
		padding: clamp(60px, 8vh, 100px) 16px;
	}

	.hero-slider .hero-title {
		font-size: clamp(32px, 6vw, 48px);
		margin-bottom: clamp(12px, 2vw, 16px);
	}

	.hero-slider .hero-subtitle {
		font-size: clamp(14px, 1.9vw, 18px);
		margin-bottom: clamp(20px, 2.5vw, 28px);
		line-height: 1.5;
	}

	.hero-slider .hero-actions {
		gap: clamp(8px, 1.5vw, 12px);
	}

	.hero-slider .hero-actions .btn {
		font-size: clamp(12px, 1.8vw, 14px);
		padding: clamp(10px, 2vw, 12px) clamp(16px, 3vw, 20px);
	}
}

@media (max-width: 480px) {
	.hero-slider {
		min-height: 60vh;
	}

	.hero-slider .hero-bg-slide {
		background-position: center 40%;
		background-size: cover;
	}

	.hero-slider .hero-overlay {
		background: linear-gradient(135deg,
			rgba(23, 24, 27, .9) 0%,
			rgba(23, 24, 27, .8) 50%,
			rgba(0, 174, 239, .15) 120%);
	}

	.hero-slider .hero-inner {
		padding: clamp(50px, 8vh, 80px) 12px;
	}

	.hero-slider .hero-title {
		font-size: clamp(24px, 5.5vw, 32px);
		line-height: 1.2;
		margin-bottom: clamp(10px, 1.5vw, 12px);
	}

	.hero-slider .hero-subtitle {
		font-size: clamp(12px, 1.7vw, 14px);
		margin-bottom: clamp(16px, 2vw, 20px);
	}

	.hero-slider .hero-actions {
		gap: clamp(6px, 1vw, 8px);
		flex-direction: column;
	}

	.hero-slider .hero-actions .btn {
		width: 100%;
		font-size: clamp(11px, 1.6vw, 13px);
		padding: clamp(10px, 1.5vw, 12px) clamp(12px, 2vw, 16px);
	}

	.hero-slider .hero-scroll {
		font-size: clamp(7px, 1vw, 9px);
		bottom: clamp(10px, 1.5vh, 16px);
	}

	.hero-slider .hero-prev,
	.hero-slider .hero-next {
		display: none;
	}

	.hero-slider .hero-indicators {
		bottom: clamp(8px, 1.5vh, 12px);
		gap: clamp(5px, 1vw, 8px);
	}

	.hero-slider .hero-dot {
		width: clamp(6px, 1vw, 8px);
		height: clamp(6px, 1vw, 8px);
	}
}

/* =========================================================================
   v2.7.6 - CAROUSEL SAFETY FIXES (icon size lock + image rectangle mobile)
   ========================================================================= */

/* Lock ALL svg icons inside carousel cards - never render giant */
.project-carousel-item svg,
.project-carousel-item .icon {
	width: 14px !important;
	height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
	flex-shrink: 0;
	display: inline-block;
}

/* Image container - always rectangle, never collapse */
.project-carousel-item .proj-img {
	width: 100%;
	display: block;
}

.project-carousel-item .proj-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Mobile: clean rectangle featured image */
@media (max-width: 768px) {
	.project-carousel-item .proj-img {
		aspect-ratio: 16 / 10;
		min-height: 0;
		height: auto;
		max-height: 240px;
	}
}

@media (max-width: 480px) {
	.project-carousel-item .proj-img {
		aspect-ratio: 16 / 10;
		max-height: 210px;
	}
}

/* =========================================================================
   v2.8.0 - VISION/MISSION CARDS + AUTHORITY LOGO MARQUEE (About page)
   ========================================================================= */

/* ---- Vision & Mission ---- */
.vision-mission-section { padding-top: 0; }

.vm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 32px);
}

.vm-card {
	background: #f6f8fa;
	border: 1px solid rgba(31, 33, 36, .08);
	border-radius: var(--radius, 12px);
	padding: clamp(28px, 4vw, 44px);
	position: relative;
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease;
}

.vm-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(7, 26, 51, .10);
}

.vm-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--cube-cyan, #00AEEF);
}

.vm-card-accent {
	background: var(--cube-navy, #071A33);
	border-color: transparent;
}

.vm-card-accent .vm-title,
.vm-card-accent .vm-text { color: #fff; }

.vm-card-accent .vm-text { opacity: .85; }

.vm-card svg,
.vm-card .icon {
	width: 34px !important;
	height: 34px !important;
	max-width: 34px !important;
	max-height: 34px !important;
	color: var(--cube-cyan, #00AEEF);
	margin-bottom: 16px;
}

.vm-title {
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 800;
	margin: 0 0 12px;
	letter-spacing: .01em;
}

.vm-text {
	font-size: clamp(14px, 1.6vw, 16px);
	line-height: 1.75;
	margin: 0;
	color: #3c4248;
}

@media (max-width: 768px) {
	.vm-grid { grid-template-columns: 1fr; }
}

/* ---- Authority / Partner Logo Marquee ---- */
.partners-section {
	overflow: hidden;
	background: #fff;
}

.partners-section .section-title {
	text-align: center;
	margin-bottom: clamp(30px, 4vw, 48px);
}

.partners-marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partners-track {
	display: flex;
	align-items: center;
	gap: clamp(40px, 6vw, 80px);
	width: max-content;
	animation: partners-scroll 32s linear infinite;
	will-change: transform;
	padding: 8px 0;
}

.partners-marquee:hover .partners-track {
	animation-play-state: paused;
}

@keyframes partners-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.partner-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 72px;
	max-width: 160px;
}

.partner-logo img {
	max-height: 72px;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .65;
	transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

.partner-logo:hover img {
	filter: grayscale(0);
	opacity: 1;
	transform: scale(1.06);
}

@media (max-width: 768px) {
	.partner-logo { height: 56px; max-width: 130px; }
	.partner-logo img { max-height: 56px; max-width: 130px; }
	.partners-track { gap: clamp(28px, 8vw, 48px); animation-duration: 24s; }
}

@media (max-width: 480px) {
	.partner-logo { height: 48px; max-width: 110px; }
	.partner-logo img { max-height: 48px; max-width: 110px; }
	.partners-track { animation-duration: 20s; }
}

@media (prefers-reduced-motion: reduce) {
	.partners-track { animation: none; }
	.partners-marquee { overflow-x: auto; }
}

/* =========================================================================
   v2.8.1 - ONE WINDOW SOLUTION UPGRADE (big icons, clickable cards, subtitle)
   ========================================================================= */

/* Section subtitle under main title */
.section-subtitle {
	max-width: 640px;
	margin: -8px 0 clamp(32px, 4vw, 48px);
	font-size: clamp(14px, 1.7vw, 17px);
	line-height: 1.7;
	color: #5a6068;
}

.section-subtitle-light {
	color: rgba(255, 255, 255, .72);
}

/* Service card = full clickable link */
a.service {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform .3s ease, background .3s ease;
	border-radius: 10px;
	padding: clamp(18px, 2.5vw, 28px) clamp(14px, 2vw, 22px);
	margin: calc(-1 * clamp(14px, 2vw, 22px));
	margin-bottom: 0;
}

a.service:hover {
	transform: translateY(-6px);
	background: rgba(0, 174, 239, .06);
}

/* Bigger, attractive icon in cyan circle */
.service-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;   /* ICON CIRCLE SIZE - change this number */
	height: 52px;  /* keep same as width */
	border-radius: 50%;
	background: rgba(0, 174, 239, .12);
	border: 1px solid rgba(0, 174, 239, .25);
	margin-bottom: 14px;
	transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.service-icon-wrap svg,
.service-icon-wrap .icon {
	width: 26px !important;   /* ICON SIZE - change this number */
	height: 26px !important;  /* keep same as width */
	max-width: 26px !important;
	max-height: 26px !important;
	color: var(--cube-cyan, #00AEEF);
	stroke-width: 1.5;
}

a.service:hover .service-icon-wrap {
	background: var(--cube-cyan, #00AEEF);
	border-color: var(--cube-cyan, #00AEEF);
	transform: scale(1.08);
	box-shadow: 0 10px 28px rgba(0, 174, 239, .35);
}

a.service:hover .service-icon-wrap svg,
a.service:hover .service-icon-wrap .icon {
	color: #071A33;
}

/* Service name slightly bigger + hover cyan */
a.service .service-name {
	transition: color .3s ease;
	font-size: clamp(16px, 1.8vw, 19px);
}

a.service:hover .service-name {
	color: var(--cube-cyan, #00AEEF);
}

/* Learn More link revealed on hover (always visible on touch) */
.service-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cube-cyan, #00AEEF);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .3s ease, transform .3s ease;
}

.service-more svg,
.service-more .icon {
	width: 14px !important;
	height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
	transition: transform .3s ease;
}

a.service:hover .service-more {
	opacity: 1;
	transform: translateY(0);
}

a.service:hover .service-more svg {
	transform: translateX(4px);
}

a.service:focus-visible {
	outline: 2px solid var(--cube-cyan, #00AEEF);
	outline-offset: 4px;
}

/* Touch devices: Learn More always visible (no hover) */
@media (hover: none) {
	.service-more {
		opacity: 1;
		transform: none;
	}
}

/* Mobile sizing */
@media (max-width: 768px) {
	.service-icon-wrap {
		width: 46px;   /* MOBILE ICON CIRCLE SIZE */
		height: 46px;
	}
	.service-icon-wrap svg,
	.service-icon-wrap .icon {
		width: 23px !important;   /* MOBILE ICON SIZE */
		height: 23px !important;
		max-width: 23px !important;
		max-height: 23px !important;
	}
	.section-subtitle {
		font-size: 14px;
		margin-bottom: 28px;
	}
	a.service {
		margin: 0;
		padding: 18px 14px;
		background: rgba(255, 255, 255, .03);
		border-radius: 10px;
	}
}

/* =========================================================================
   v2.8.2 - SERVICES GRID CLEANUP (remove misaligned divider lines)
   ========================================================================= */

/* Kill old divider borders that clash with the new card layout */
.services .services-grid {
	border-top: 0 !important;
	gap: clamp(16px, 2vw, 24px) !important;
}

.services .service,
.services a.service {
	border-right: 0 !important;
	border-bottom: 0 !important;
	margin: 0 !important;
	padding: clamp(22px, 3vw, 32px) clamp(16px, 2vw, 24px) !important;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
}

.services a.service:hover {
	background: rgba(0, 174, 239, .08);
	border-color: rgba(0, 174, 239, .35);
	transform: translateY(-6px);
}

/* Same cleanup for the shortcode version */
.cube-sc .services-grid {
	border-top: 0 !important;
	gap: clamp(16px, 2vw, 24px) !important;
}

.cube-sc .service,
.cube-sc a.service {
	border-right: 0 !important;
	border-bottom: 0 !important;
	margin: 0 !important;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
}

/* Tablet: 3 then 2 columns, cards stay clean */
@media (max-width: 1024px) {
	.services .services-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	.services .services-grid { grid-template-columns: repeat(2, 1fr); }
	.services .service,
	.services a.service {
		border-bottom: 0 !important;
	}
}

@media (max-width: 480px) {
	.services .services-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   v2.8.3 - SERVICES PAGE ROW ICONS (restore proper size after icon cap)
   ========================================================================= */

.service-row-body > svg,
.service-row-body > .icon {
	width: 40px !important;
	height: 40px !important;
	max-width: 40px !important;
	max-height: 40px !important;
	color: var(--cube-cyan, #00AEEF);
	margin-bottom: 14px;
	display: inline-block;
}

@media (max-width: 768px) {
	.service-row-body > svg,
	.service-row-body > .icon {
		width: 32px !important;
		height: 32px !important;
		max-width: 32px !important;
		max-height: 32px !important;
	}
}