/*!
Theme Name: Code Curators
Theme URI: http://underscores.me/
Author: BOSC Tech Labs
Author URI: https://bosctechlabs.com/
Description: Dedicated theme for Code Curators.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: codecurators
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Code Curators is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ================================================
   style.css — Code Curators
   Base: user's version + all new visual effects
   ================================================ */

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: 'Outfit', sans-serif;
    background: #000;
    color: #aaa;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    /* Smooth scroll feel */
    scroll-behavior: smooth;
}

/* Body push when offcanvas open */
body.offcanvas-open { overflow: hidden; }
body.offcanvas-open .site-header,
body.offcanvas-open main,
body.offcanvas-open .footer {
    transform: translateX(-380px);
    transition: transform .5s cubic-bezier(.77, 0, .175, 1);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Marcellus', serif;
    color: #fff;
    line-height: 1.15;
    font-weight: 400;
}

h1 { font-size: clamp(52px, 7.5vw, 110px); letter-spacing: -.03em; line-height: 1.25; }
h2 { font-size: clamp(32px, 4vw, 60px); letter-spacing: -.02em; }
h3 { font-size: clamp(18px, 2.2vw, 24px); }
h4 { font-size: 18px; }

em { font-style: normal; color: #C4EF17; }

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
ul { list-style: none; }
button { cursor: pointer; background: none; border: none; color: inherit; }
input, select, textarea { font-family: 'Outfit', sans-serif; }

.container { max-width: 1300px; margin: 0 auto; padding: 0 40px; }

/* ── CUSTOM CURSOR ── */
.cc-cursor {
    position: fixed;
    width: 36px; height: 36px;
    border: 1.5px solid rgba(196, 239, 23, .6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width .25s ease, height .25s ease, background .25s ease, border-color .25s ease;
    mix-blend-mode: difference;
}
.cc-cursor-dot {
    position: fixed;
    width: 5px; height: 5px;
    background: #C4EF17;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform .08s ease;
}
body.cursor-hover .cc-cursor {
    width: 60px; height: 60px;
    background: rgba(196, 239, 23, .08);
    border-color: #C4EF17;
}
@media (hover: none) { .cc-cursor, .cc-cursor-dot { display: none; } }

/* ── PRELOADER ── */
#preloader {
    position: fixed; inset: 0; background: #000;
    z-index: 9997;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .6s ease .2s, visibility .6s ease .2s;
}
#preloader.gone { opacity: 0; visibility: hidden; }
.pre-inner { display: flex; gap: 8px; }
.pre-inner span {
    width: 10px; height: 10px; border-radius: 50%; background: #C4EF17;
    animation: preloaderBounce 1.4s ease-in-out infinite;
}
.pre-inner span:nth-child(1) { animation-delay: -.32s; }
.pre-inner span:nth-child(2) { animation-delay: -.16s; }

/* ── BACK TO TOP ── */
.back-to-top {
    position: fixed; bottom: 32px; right: 32px;
    width: 46px; height: 46px;
    background: #C4EF17; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #000; z-index: 200;
    opacity: 0; visibility: hidden; transform: translateY(16px);
    transition: all .35s cubic-bezier(.16, 1, .3, 1);
    font-size: 16px;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #fff; transform: translateY(-3px); }

/* ── OFFCANVAS ── */
.offcanvas-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 800;
    opacity: 0; visibility: hidden;
    transition: opacity .45s ease, visibility .45s ease;
}
.offcanvas-overlay.show { opacity: 1; visibility: visible; }

.offcanvas {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 380px;
    background: #141414;
    z-index: 850;
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.77, 0, .175, 1);
    display: flex; flex-direction: column;
}
.offcanvas.open { transform: translateX(0); }

.offcanvas-close {
    position: absolute; top: 24px; right: 24px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    transition: all .2s ease;
}
.offcanvas-close:hover { color: #fff; border-color: rgba(255,255,255,.4); }

.offcanvas-body {
    padding: 80px 48px 48px;
    display: flex; flex-direction: column; gap: 40px; flex: 1;
    overflow-y: auto;
}

.offcanvas-section h4 {
    font-family: 'Marcellus', serif;
    font-size: 20px; color: #fff; margin-bottom: 14px;
}
.offcanvas-section p {
    font-size: 14px; color: rgba(255,255,255,.5); line-height: 1.8;
}

.offcanvas-links { display: flex; flex-direction: column; gap: 10px; }
.offcanvas-links a {
    font-size: 14px; color: rgba(255,255,255,.5);
    transition: color .2s ease; letter-spacing: .02em;
}
.offcanvas-links a:hover { color: #C4EF17; }

.offcanvas-cta {
    display: inline-block; margin-top: auto;
    font-size: 14px; font-weight: 600; letter-spacing: .05em;
    color: #000; background: #C4EF17;
    padding: 16px 32px; text-transform: uppercase;
    transition: background .2s ease;
    text-align: center;
}
.offcanvas-cta:hover { background: #fff; }

/* ── HEADER ── */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 500;
    padding: 22px 0;
    transition: background .4s ease, padding .4s ease, border-color .4s ease, transform .5s cubic-bezier(.77, 0, .175, 1);
    border-bottom: 1px solid transparent;
}
.site-header.stuck {
    background: rgba(0,0,0,.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 14px 0;
    border-bottom-color: rgba(255,255,255,.07);
}
.header-inner {
    max-width: 1300px; margin: 0 auto; padding: 0 40px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-link img {
    height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ============================================================
 * Code Curators — Main Nav with Multi-Level Dropdowns
 *
 * Append to your main.scss / main.css. Replaces the previous
 * .main-nav block (the simple one). Designed to match the
 * dark + lime + monospace theme aesthetic.
 * ============================================================ */

/* ---------- Top-level nav ---------- */
.main-nav > ul {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav li {
	position: relative;
	list-style: none;
}

.main-nav a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 400;
	color: #fff;
	padding: 8px 14px;
	text-decoration: none;
	letter-spacing: .01em;
	transition: color .2s ease;
	position: relative;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current-menu-parent > a {
	color: #C4EF17;
}

/* Lime dot prefix for the active branch — matches .sec-tag pattern */
.main-nav .current-menu-item > a::before,
.main-nav .current-menu-ancestor > a::before,
.main-nav .current-menu-parent > a::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #C4EF17;
	margin-right: 2px;
	box-shadow: 0 0 8px rgba(196, 239, 23, .6);
}

/* Chevron */
.cc-nav-chev {
	transition: transform .25s ease;
	opacity: .7;
	flex-shrink: 0;
}

.cc-menu-item:hover > a .cc-nav-chev:not(.cc-nav-chev--right) {
	transform: rotate(180deg);
	opacity: 1;
}

.cc-menu-item:hover > a .cc-nav-chev--right {
	transform: translateX(2px);
	opacity: 1;
}

/* Force sub-menus into a vertical stack regardless of parent rules. */
.main-nav .cc-sub-menu,
.main-nav ul.cc-sub-menu {
	display: block !important;
	flex-direction: column;
	gap: 0;
}
 
.main-nav .cc-sub-menu > li {
	display: block;
	width: 100%;
}
 
/* Anchors inside sub-menus stay block-level flex items
   (icon-and-text inline) but the <li> itself stacks vertically. */
.main-nav .cc-sub-menu > li > a {
	display: flex;
	align-items: center;
	justify-content: left;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
}
 
/* Re-assert the top-level row stays horizontal. */
.main-nav > ul {
	display: flex !important;
	gap: 2px;
	flex-direction: row;
}
 
 
/* ============================================================
 * Mobile — keep the override consistent there too.
 * Sub-menus must be block, not flex, inside the mobile drawer.
 * ============================================================ */
@media (max-width: 991px) {
    .main-nav .cc-sub-menu,
    .main-nav ul.cc-sub-menu {
        display: block !important;
    }
    .main-nav > ul {
        display: flex !important;
        flex-direction: column;
        gap: 0;
    }
    .main-nav li{
        width: 100%;
    }
}


/* ============================================================
 * Sub-menu — Level 1 (e.g. Services → AI Development)
 * ============================================================ */
.cc-sub-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: -12px;
	min-width: 260px;
	padding: 8px;
	margin: 0;
	list-style: none;

	background: #0a0a0a;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 4px;
	box-shadow:
		0 24px 48px -16px rgba(0, 0, 0, .5),
		0 2px 8px rgba(0, 0, 0, .3),
		inset 0 1px 0 rgba(255, 255, 255, .04);

	/* Hidden state */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity .25s ease,
		transform .25s ease,
		visibility 0s linear .25s;

	z-index: 100;
}

/* Connector — fills the gap between top item and dropdown so hover doesn't drop */
.cc-sub-menu::before {
	content: '';
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

/* Lime top border accent */
.cc-sub-menu::after {
	content: '';
	position: absolute;
	top: -1px;
	left: 18px;
	width: 24px;
	height: 2px;
	background: #C4EF17;
	box-shadow: 0 0 12px rgba(196, 239, 23, .5);
}

/* Open on hover OR focus-within (keyboard a11y) */
.cc-has-children:hover > .cc-sub-menu,
.cc-has-children:focus-within > .cc-sub-menu,
.cc-has-children.is-open > .cc-sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity .25s ease,
		transform .25s ease,
		visibility 0s linear 0s;
}

.cc-sub-menu li {
	display: block;
}

.cc-sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .85);
	transition:
		background .2s ease,
		color .2s ease,
		padding-left .2s ease;
}

.cc-sub-menu a:hover,
.cc-sub-menu a:focus-visible {
	background: rgba(196, 239, 23, .08);
	color: #C4EF17;
	padding-left: 18px;
}

/* Reset the lime-dot prefix inside sub-menus (it’s already a sub item) */
.cc-sub-menu .current-menu-item > a::before,
.cc-sub-menu .current-menu-ancestor > a::before,
.cc-sub-menu .current-menu-parent > a::before {
	display: none;
}

/* Active sub item — left lime bar */
.cc-sub-menu .current-menu-item > a {
	color: #C4EF17;
	background: rgba(196, 239, 23, .06);
	padding-left: 18px;
	position: relative;
}

.cc-sub-menu .current-menu-item > a::after {
	content: '';
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 14px;
	background: #C4EF17;
	border-radius: 1px;
}


/* ============================================================
 * Sub-menu — Level 2 (the side-flyout for grandchildren)
 * ============================================================ */
.cc-sub-menu--lvl-2 {
	top: -9px;            /* align with parent <li> padding */
	left: calc(100% + 6px);
	transform: translateX(-8px);
}

.cc-sub-menu--lvl-2::after {
	/* Move the lime accent to the LEFT edge for side flyouts */
	top: 18px;
	left: -1px;
	width: 2px;
	height: 24px;
	box-shadow: 0 0 12px rgba(196, 239, 23, .5);
}

/* Connector on the LEFT side instead of top */
.cc-sub-menu--lvl-2::before {
	top: 0;
	bottom: 0;
	left: -6px;
	right: auto;
	width: 6px;
	height: auto;
}

.cc-has-children:hover > .cc-sub-menu--lvl-2,
.cc-has-children:focus-within > .cc-sub-menu--lvl-2,
.cc-has-children.is-open > .cc-sub-menu--lvl-2 {
	transform: translateX(0);
}


/* ============================================================
 * Mobile — collapse the nav into the existing mobile drawer
 * (your main.js handles the .is-open toggle on the parent menu)
 * ============================================================ */
@media (max-width: 991px) {
	.main-nav {
		position: fixed;
		inset: 0;
		background: #0a0a0a;
		padding: 100px 24px 40px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .35s cubic-bezier(.4, 0, .2, 1);
		z-index: 90;
	}

	.main-nav.is-open {
		transform: translateX(0);
	}

	.main-nav > ul {
		flex-direction: column;
		gap: 0;
	}

	.main-nav a {
		padding: 16px 0;
		font-size: 18px;
		justify-content: space-between;
		border-bottom: 1px solid rgba(255, 255, 255, .06);
	}

	.cc-sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 0 0 0 16px;
		max-height: 0;
		overflow: hidden;
		transition: max-height .35s ease;
	}

	.cc-sub-menu::before,
	.cc-sub-menu::after {
		display: none;
	}

	.cc-has-children.is-open > .cc-sub-menu {
		max-height: 800px;
	}

	.cc-has-children.is-open > a .cc-nav-chev {
		transform: rotate(180deg);
	}

	.cc-sub-menu a {
		padding: 14px 0;
		font-size: 16px;
	}

	.cc-sub-menu--lvl-2 {
		padding-left: 16px;
	}

	/* On mobile we use a tap to expand instead of hover —
	   main.js should toggle .is-open on .cc-has-children. */
	.cc-has-children:hover > .cc-sub-menu {
		max-height: 0; /* don't auto-open on hover on mobile */
	}
	.cc-has-children.is-open:hover > .cc-sub-menu {
		max-height: 800px;
	}
}

.btn-cta {
    font-size: 13px; font-weight: 600; color: #000;
    background: #C4EF17; padding: 11px 26px; border-radius: 2px;
    transition: background .2s ease;
    letter-spacing: .02em; white-space: nowrap;
}
.btn-cta:hover { background: #fff; }

.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Grid button (offcanvas trigger) */
.grid-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.15); border-radius: 2px;
    color: rgba(255,255,255,.6);
    transition: all .2s ease;
}
.grid-btn:hover { border-color: #C4EF17; color: #C4EF17; }

/* Hamburger */
.nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all .3s ease; }
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── SECTION COMMON ── */
.sec-tag {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 12px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
    color: #C4EF17; margin-bottom: 14px;
}

.btn-outline {
    display: inline-block;
    font-size: 14px; font-weight: 600; color: #fff;
    border: 1px solid rgba(255,255,255,.25); padding: 14px 36px;
    letter-spacing: .02em;
    transition: all .25s ease;
}
.btn-outline:hover { border-color: #C4EF17; color: #C4EF17; }

/* Circle button */
.btn-circle {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 140px; height: 140px; border-radius: 50%;
    font-family: 'Marcellus', serif;
    font-size: 15px; font-weight: 400; line-height: 1.3; text-align: center;
    color: #000; background: #fff; letter-spacing: .06em; text-transform: uppercase;
    transition: background .3s ease, transform .3s ease;
    position: relative; overflow: hidden;
}
.btn-circle::before {
    content: '';
    position: absolute; inset: 0; border-radius: 50%;
    background: #C4EF17;
    transform: scale(0);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.btn-circle span { position: relative; z-index: 1; }
.btn-circle:hover::before { transform: scale(1); }
.btn-circle:hover { transform: scale(1.05); }
.btn-circle--sm { width: 110px; height: 110px; font-size: 12px; }

/* ── HERO ── */
.hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: flex-end; padding-bottom: 80px;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.77, 0, .175, 1);
}

.hero-bg {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    z-index: 0;
}
.hero-img-1, .hero-img-2 { overflow: hidden; }
.hero-img-1 img, .hero-img-2 img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%) brightness(.5);
    transform: scale(1.05);
    transition: transform 10s ease;
    will-change: transform;
}
/* Subtle ken burns on load */
.hero-img-1 img { animation: kenburns1 14s ease-in-out infinite alternate; }
.hero-img-2 img { animation: kenburns2 16s ease-in-out infinite alternate; }

@keyframes kenburns1 {
    from { transform: scale(1.05) translate(0, 0); }
    to   { transform: scale(1.12) translate(-2%, -1%); }
}
@keyframes kenburns2 {
    from { transform: scale(1.05) translate(0, 0); }
    to   { transform: scale(1.1)  translate(1%, 2%); }
}

.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,.15) 100%);
    z-index: 1;
}

.hero .container { position: relative; z-index: 2; width: 100%; }
.hero-content { padding-top: 160px; }

/* H1 lines */
.hero h1 { color: #fff; margin-bottom: 64px; }
.h1-line  { color: #fff; }
.h1-mid   { color: #868686; }
.h1-highlight { color: #C4EF17; padding-bottom: 1rem; }

/* Hero bottom row */
.hero-row {
    display: flex; align-items: center; gap: 48px;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 44px;
}
.hero-desc {
    display: flex; align-items: flex-start; gap: 16px;
    max-width: 380px; flex: 1;
}
.hero-star {
    font-size: 24px; color: #C4EF17; flex-shrink: 0; line-height: 1;
    margin-top: 4px;
    animation: updown 3s ease-in-out infinite;
}
.hero-desc p { font-size: 15px; color: rgba(255,255,255,.75); line-height: 1.8; }
.hero-side-img {
    width: 200px; height: 135px; flex-shrink: 0;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.hero-side-img img {
    filter: grayscale(100%) brightness(.65);
    transition: filter .5s ease, transform .5s ease;
    transform: scale(1.04);
}
.hero-side-img:hover img { filter: grayscale(0) brightness(.9); transform: scale(1); }
.hero-row .btn-circle { margin-left: auto; }

/* ── TRUST BAR ── */
/* ── BRAND / TRUST BAR ── */
.brand-bar {
    background: #080808;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 60px 0 56px;
    overflow: hidden;
}

.brand-label {
    font-family: 'Outfit', sans-serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(255,255,255,.3);
    text-align: center;
    margin-bottom: 44px;
}

/* Slider wrap — fade edges */
.brand-slider-wrap {
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
}

.brand-track {
    display: flex;
    align-items: center;
    gap: 100px;
    width: max-content;
    animation: brandScroll 22s linear infinite;
    will-change: transform;
}

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

@keyframes brandScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.brand-slide {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 131px;
}

.brand-slide img {
    width: 100%; height: auto; object-fit: contain;
    filter: brightness(0) invert(1) opacity(.55);
    transition: filter .35s ease;
}

.brand-slide:hover img {
    filter: brightness(0) invert(1) opacity(.75);
}

/* ── SERVICES ── */
.services { padding: 80px 0 50px; }
.sec-title { padding-bottom: 56px; }
.services h2 .h2-top { display: block; color: #fff; }
.services h2 .h2-bot { display: block; color: rgba(255,255,255,.28); }

/* Grid layout: 2 large top, 3 small bottom */
/* .srv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 8px;
} */

/* 3-column row for small cards */
/* .srv-box--small:nth-child(3) { grid-column: 1; }
.srv-box--small:nth-child(4) { grid-column: 2; }
.srv-box--small:nth-child(5) { grid-column: 3; } */

/* When small cards exist, make grid 3-col for row 2 */
/* .srv-grid:has(.srv-box--small) {
    grid-template-columns: 1fr 1fr 1fr;
}
.srv-box--large { grid-column: span 1; }
.srv-grid .srv-box--large:nth-child(1) { grid-column: 1 / 2; }
.srv-grid .srv-box--large:nth-child(2) { grid-column: 2 / 4; } */

/* Grid Layout */
.srv-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

/* Top 2 large boxes = 50% / 50% */
.srv-grid .srv-box--large {
    grid-column: span 3;
}

/* Bottom 3 small boxes = 33.33% each */
/* .srv-grid .srv-box--small {
    grid-column: span 2;
} */

/* Card base */
.srv-box {
    position: relative;
    background: #111;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none;
    /*border: 1px solid rgba(255,255,255,.06);*/
    transition: border-color .35s ease;
}
.srv-box:hover { border-color: rgba(255,255,255,.15); }

/* Number badge */
.srv-box-num {
    position: absolute;
    top: 20px; left: 20px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,.35);
    letter-spacing: .5px;
    z-index: 2;
}

/* Image container — zoom-out on hover */
.srv-box-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 48px 32px 24px;
    overflow: hidden;
}
.srv-box--large .srv-box-img { min-height: 280px; }
.srv-box--small .srv-box-img { min-height: 220px; }

.srv-box-img img {
    width: auto;
    max-width: 65%;
    max-height: 200px;
    object-fit: contain;
    transform: scale(1.00);
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
}
.srv-box:hover .srv-box-img img {
    transform: scale(1.15);
}

/* Footer: title + arrow */
.srv-box-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px 24px 24px;
    border-top: 1px solid rgba(255,255,255,.06);
    gap: 12px;
}
.srv-box-foot h3 {
    font-family: 'Marcellus', serif;
    font-size: clamp(18px, 1.8vw, 22px);
    color: #fff; font-weight: 400;
    line-height: 1.25;
    margin: 0;
    transition: color .25s ease;
}
.srv-box:hover .srv-box-foot h3 { color: #C4EF17; }

.srv-box-arrow {
    font-size: 20px;
    color: rgba(255,255,255,.3);
    flex-shrink: 0;
    line-height: 1;
    transition: color .25s ease, transform .25s ease;
}
.srv-box:hover .srv-box-arrow {
    color: #C4EF17;
    transform: translate(2px, -2px);
}

/* "See all services" CTA */
.srv-grid-cta {
    text-align: center;
    margin-top: 48px;
}
.srv-grid-cta .btn-outline {
    padding: 13px 40px;
    font-size: 13px; letter-spacing: .08em;
}

/* Responsive */
@media (max-width: 900px) {
    .srv-grid,
    .srv-grid:has(.srv-box--small) { grid-template-columns: 1fr 1fr; }
    /* .srv-grid .srv-box--large:nth-child(1) { grid-column: 1 / 2; }
    .srv-grid .srv-box--large:nth-child(2) { grid-column: 2 / 3; } */
    .srv-box--small:nth-child(3),
    .srv-box--small:nth-child(4) { grid-column: auto; }
    .srv-box--small:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .srv-grid,
    .srv-grid:has(.srv-box--small) { grid-template-columns: 1fr; }
    /* .srv-grid .srv-box--large:nth-child(1),
    .srv-grid .srv-box--large:nth-child(2),
    .srv-box--small:nth-child(3),
    .srv-box--small:nth-child(4),
    .srv-box--small:nth-child(5) { grid-column: auto; } */
}

/* ── ABOUT / STATS ── */
.about { overflow: hidden; }
.about-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    min-height: 720px;
}
.about-left {
    background: #080808;
    padding: 100px 70px 80px 40px;
    display: flex; flex-direction: column;
}
.about-left h2 { margin: 10px 0 40px; line-height: 1.25; }
.about-content h3 { font-size: 20px; color: #fff; margin-bottom: 16px; }
.about-content p  { font-size: 15px; color: rgba(255,255,255,.5); line-height: 1.8; margin-bottom: 32px; }

.stats-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    margin-top: auto; padding-top: 56px;
}
.stat-box {
    background: #080808; padding: 28px 22px;
    border: 1px solid rgba(255,255,255,.03);
}
.stat-n {
    font-family: 'Marcellus', serif; font-size: 46px; color: #C4EF17; line-height: 1;
    margin-bottom: 6px;
}
.stat-l { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.38); letter-spacing: .3px; }

.about-right { position: relative; overflow: hidden; }
.about-imgs { position: absolute; inset: 0; }
.about-img-main {
    width: 100%; height: 75%; object-fit: cover;
    filter: grayscale(55%); transition: filter .6s ease;
}
.about-right:hover .about-img-main { filter: grayscale(0); }
.about-img-sm {
    position: absolute; bottom: 0; left: 0; right: 0; height: 26%;
    object-fit: cover; border-top: 3px solid #C4EF17;
    filter: grayscale(55%); transition: filter .6s ease;
}

/* ── INDUSTRIES ── */
.industries { padding: 80px 0; }
.ind-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
    margin-bottom: 56px;
}
.ind-head p { font-size: 15px; color: rgba(255,255,255,.45); max-width: 400px; }
.ind-head h2 { margin-top: 10px; }

.ind-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.125rem;
}
.ind-card {
    background: linear-gradient(150deg, #12121a 50%, #1a2a0a 100%);
    padding: 0 0 32px;
    position: relative;
    overflow: hidden;
    transition: background .3s ease;
    border-radius: 5px;
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.4);
    border-bottom: 3px solid #C4EF17;
}

.ind-card:hover {
    box-shadow: 0 20px 32px -12px rgba(196, 239, 23, 0.3);
    border-bottom-width: 4px;
    /*transform: translateY(-2px);*/
    background: linear-gradient(135deg, #161622 0%, #1f3510 100%);
}

.ind-num {
    font-family: 'Marcellus', serif; font-size: 72px; color: rgba(255,255,255,.035);
    position: absolute; top: 12px; right: 16px; line-height: 1;
    transition: color .4s ease;
    user-select: none;
}
.ind-card:hover .ind-num { color: rgba(196,239,23,.07); }

.ind-img { height: 180px; overflow: hidden; }
.ind-img img { transition: all .55s ease; }
.ind-card:hover .ind-img img { transform: scale(1.05); }

.ind-card h3 { font-size: 16px; color: #fff; margin: 22px 22px 10px; }
.ind-card p  { font-size: 13px; color: rgba(255,255,255,.42); line-height: 1.7; margin: 0 22px 18px; }

.ind-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 22px; }
.ind-tags span {
    font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
    color: rgba(255,255,255,.3); padding: 4px 9px;
    border: 1px solid rgba(255,255,255,.09); border-radius: 1px;
    transition: all .2s ease;
}
.ind-card:hover .ind-tags span { color: #C4EF17; border-color: rgba(196,239,23,.2); }

/* ── MID CTA ── */
.mid-cta { position: relative; padding: 140px 0; overflow: hidden; }
.mid-cta-bg { position: absolute; inset: 0; }
.mid-cta-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(.16); }
.mid-cta-ov { position: absolute; inset: 0; background: rgba(196,239,23,.45); }
.mid-cta .container { position: relative; z-index: 1; }

.mid-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.mid-cta-text h2 { margin-bottom: 40px; }

.mid-cta-nums { display: flex; gap: 32px; }
.mid-num { display: flex; align-items: center; gap: 20px; }
.mid-num > div strong {
    display: block; font-family: 'Marcellus', serif; font-size: 40px; color: #fff; line-height: 1;
}
.mid-num > div span { display: inline-block; color: #fff; margin-top: 4px; letter-spacing: .5px; text-transform: uppercase; }

/* ── PORTFOLIO ── */
.portfolio { padding: 80px 0 60px; }

.port-head {
    display: flex; align-items: flex-end;
    justify-content: space-between; gap: 40px;
    margin-bottom: 48px;
}
.port-head h2 .h2-top { color: #fff; }
.port-head h2 .h2-bot { color: rgba(255,255,255,.28); }

.port-head-right {
    display: flex; align-items: center; gap: 32px;
    flex-shrink: 0; padding-bottom: 6px;
}

.see-all {
    font-size: 13px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(255,255,255,.45);
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding-bottom: 2px;
    transition: color .2s, border-color .2s;
    white-space: nowrap;
}
.see-all:hover { color: #C4EF17; border-color: #C4EF17; }

/* Prev/Next arrow buttons */
.port-arrows { display: flex; gap: 8px; }
.port-arrow-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.15);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.5);
    transition: all .25s ease;
}
.port-arrow-btn:hover { border-color: #C4EF17; color: #C4EF17; }
.port-arrow-btn:disabled { opacity: .25; pointer-events: none; }

/* Full-width slider track */
.port-slider-outer {
    overflow: hidden;
    cursor: grab;
    user-select: none;
}
.port-slider-outer:active { cursor: grabbing; }

.port-track {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0 calc((100vw - 1300px) / 2) 0 calc((100vw - 1300px) / 2);
    /* fallback for narrow viewports */
    padding-left: max(40px, calc((100vw - 1300px) / 2));
    padding-right: max(40px, calc((100vw - 1300px) / 2));
    transition: transform .85s cubic-bezier(.77,0,.175,1);
    will-change: transform;
}

/* Each slide */
.port-slide {
    flex-shrink: 0;
    width: 420px;
    transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .6s ease;
}

/* Image box */
.port-slide-img {
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 4px;
    background: #111;
    position: relative;
}
.port-slide-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(.55);
    transform: scale(1.06);
    transition:
        filter   .65s ease,
        transform .65s cubic-bezier(.16,1,.3,1);
}
/* View project button — centered on active slide */
.port-view-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    width: 110px; height: 110px; border-radius: 50%;
    background: #C4EF17;
    color: #000;
    font-family: 'Marcellus', serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity   .45s cubic-bezier(.16,1,.3,1),
        transform .45s cubic-bezier(.16,1,.3,1);
    z-index: 3;
}

/* Only show on active slide */
.port-slide.is-active .port-view-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.port-view-btn:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.08) !important;
}

.port-view-btn svg {
    width: 18px; height: 18px;
    transition: transform .25s ease;
}
.port-view-btn:hover svg {
    transform: translate(2px, -2px);
}

/* Active slide — full size, brighter */
.port-slide.is-active {
    width: 680px;
}
.port-slide.is-active .port-slide-img {
    height: 500px;
}
.port-slide.is-active .port-slide-img img {
    filter: grayscale(15%) brightness(.8);
    transform: scale(1);
}

/* Non-active slides slightly dimmed & smaller */
.port-slide:not(.is-active) {
    opacity: .55;
    transform: scale(.97);
}

/* Title & subtitle below image */
.port-slide-info {
    padding: 18px 4px 0;
    overflow: hidden;
}
.port-slide-info h3 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 700; letter-spacing: 1.5px;
    color: #fff; text-transform: uppercase;
    margin-bottom: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .3s ease;
}
.port-slide.is-active .port-slide-info h3 { color: #fff; }
.port-slide:not(.is-active) .port-slide-info h3 { color: rgba(255,255,255,.4); }

.port-slide-info span {
    font-size: 13px; color: rgba(255,255,255,.4);
    font-weight: 400;
    transition: color .3s;
}
.port-slide.is-active .port-slide-info span { color: rgba(255,255,255,.65); }

/* Progress bar */
.port-progress-wrap {
    height: 1px;
    background: rgba(255,255,255,.1);
    margin-top: 48px;
    border-radius: 1px;
    overflow: hidden;
}
.port-progress-bar {
    height: 100%;
    background: #C4EF17;
    border-radius: 1px;
    transition: width .65s cubic-bezier(.16,1,.3,1);
    width: 20%; /* default: 1 of 5 */
}

/* Counter */
.port-counter {
    display: flex; align-items: center; gap: 12px;
    margin-top: 20px; justify-content: flex-end;
}
#portCurrent {
    font-family: 'Marcellus', serif;
    font-size: 18px; color: #fff;
}
#portTotal {
    font-size: 14px; color: rgba(255,255,255,.3);
}
.port-counter-sep {
    flex: 1; height: 1px;
    background: rgba(255,255,255,.1);
    max-width: 60px;
}

/* Responsive */
@media (max-width: 900px) {
    .port-slide { width: 320px; }
    .port-slide.is-active { width: 480px; }
    .port-slide-img,
    .port-slide.is-active .port-slide-img { height: 380px; }
    .port-track { padding-left: 24px; padding-right: 24px; }
    .port-head { flex-direction: column; align-items: flex-start; gap: 20px; }
}
@media (max-width: 600px) {
    .port-slide { width: 280px; }
    .port-slide.is-active { width: 320px; }
    .port-slide-img,
    .port-slide.is-active .port-slide-img { height: 300px; }
}

/* ── MARQUEE BAND ── */
.marquee-band {
    background: #C4EF17; padding: 17px 0; overflow: hidden; margin-bottom: 80px;
}
.marquee-track { overflow: hidden; }
.marquee-inner {
    display: flex; align-items: center; white-space: nowrap; width: max-content;
    animation: marqueeScroll 32s linear infinite;
}
.marquee-inner span {
    font-family: 'Outfit', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
    color: #000; text-transform: uppercase; padding: 0 22px;
}
.marquee-inner em { color: rgba(0,0,0,.35); font-style: normal; font-size: 9px; flex-shrink: 0; }
.marquee-band:hover .marquee-inner { animation-play-state: paused; }

/* ── PROCESS ── */
.process { padding: 80px 0; }
.proc-head { margin-bottom: 56px; }
.proc-head h2 { margin-top: 10px; }

/* Two-column layout: steps left, image right */
.proc-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 0 80px;
    align-items: start;
    position: relative;
}

/* Steps */
.proc-list { display: flex; flex-direction: column; }

.proc-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    border-top: 1px solid rgba(255,255,255,.07);
    padding: 36px 0;
    cursor: default;
    transition: background .25s ease;
    position: relative;
}
.proc-item:last-child { border-bottom: 1px solid rgba(255,255,255,.07); }

/* Highlight bar on active step */
.proc-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: #C4EF17;
    transition: width .4s cubic-bezier(.16,1,.3,1);
    border-radius: 0 2px 2px 0;
}
/*.proc-item.is-hovered::before { width: 3px; }*/
.proc-item.is-hovered { background: rgba(196,239,23,.03); }

.proc-num {
    font-family: 'Marcellus', serif;
    font-size: 17px; color: rgba(255,255,255,.25);
    padding-top: 3px; letter-spacing: .5px;
    transition: color .3s ease;
}
.proc-item.is-hovered .proc-num { color: #C4EF17; }

.proc-body h3 {
    font-size: 20px; color: #fff;
    margin-bottom: 10px;
    transition: color .3s ease;
}
.proc-item.is-hovered .proc-body h3 { color: #fff; }
.proc-body p {
    font-size: 15px; color: rgba(255,255,255,.45);
    line-height: 1.75; max-width: 600px;
}

/* ── Floating image panel ── */
.proc-img-panel {
    position: sticky;
    top: 120px;                      /* sticks while scrolling through steps */
    height: 360px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.proc-img-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

.proc-img-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: #111;
    border: 1px solid rgba(255,255,255,.08);
}

/* All images stacked, only one visible */
.proc-img-slot {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06) translateY(12px);
    transition:
        opacity    .55s cubic-bezier(.16,1,.3,1),
        transform  .55s cubic-bezier(.16,1,.3,1);
    filter: grayscale(30%) brightness(.75);
    will-change: opacity, transform;
}
.proc-img-slot.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.proc-img-slot.exit {
    opacity: 0;
    transform: scale(.96) translateY(-10px);
    transition:
        opacity   .4s ease,
        transform .4s ease;
}

/* Label overlay at bottom of image */
.proc-img-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px 22px;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}
.proc-img-label span:first-child {
    font-family: 'Marcellus', serif;
    font-size: 13px; color: #C4EF17;
    letter-spacing: 1px;
}
.proc-img-label span:last-child {
    font-family: 'Outfit', sans-serif;
    font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,.75);
}

/* Responsive: hide image panel on small screens */
@media (max-width: 900px) {
    .proc-layout { grid-template-columns: 1fr; }
    .proc-img-panel { display: none; }
    .proc-item { grid-template-columns: 70px 1fr; }
}

/* ── WHY US ── */
.why-us { padding: 0 0 80px; }
.why-head { margin-bottom: 56px; }
.why-head h2 { margin-top: 10px; padding-bottom: 0.5rem; }

.why-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.06);
}
.why-item {
    background: #000; padding: 70px 35px;
    position: relative; overflow: hidden;
    transition: background .3s ease;
}
.why-item:hover { background: #0a0a0a; }
.why-item::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: #C4EF17; transform: scaleX(0); transform-origin: left;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.why-item:hover::before { transform: scaleX(1); }

.why-num {
    font-family: 'Marcellus', serif; font-size: 60px; color: rgba(255,255,255,.08);
    line-height: 1; position: absolute; top: 14px; right: 20px;
    transition: color .3s; user-select: none;
}
.why-item:hover .why-num { color: rgba(196,239,23,.4); }
.why-item h3 { font-size: 18px; color: #fff; margin-bottom: 14px; position: relative; }
.why-item p  { font-size: 14px; color: rgba(255,255,255,.42); line-height: 1.7; position: relative; }

/* ── TESTIMONIALS ── */
.testimonials { padding: 80px 0; background: #050505; }

.testi-top {
    display: flex; align-items: flex-end;
    gap: 80px; margin-bottom: 56px;
}
.testi-top h2 { margin-top: 10px; }
.testi-top > p {
    font-size: 15px; color: rgba(255,255,255,.45);
    max-width: 420px; line-height: 1.8;
}

/* Overflow clip */
.testi-overflow {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 4px;
    /* Needed so 100% on children resolves to THIS container's width */
    position: relative;
}

/* Sliding track — cards sit side by side, JS moves it */
.testi-grid {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    transition: transform .75s cubic-bezier(.77, 0, .175, 1);
    will-change: transform;
    cursor: grab;
    user-select: none;
}
.testi-grid:active { cursor: grabbing; }

/* Each card = exactly the overflow container width */
.testi-card {
    width: 100%;
    min-width: 100%;
    flex: 0 0 100%;
    flex-shrink: 0;
    background: #050505;
    padding: 52px 60px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Yellow quote circle */
.testi-q-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: #C4EF17;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Quote text */
.testi-card > p {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(15px, 1.4vw, 18px);
    color: rgba(255,255,255,.75);
    line-height: 1.85;
    max-width: 880px;
}

/* Author */
.testi-author {
    display: flex; flex-direction: column; gap: 4px;
}
.testi-author strong {
    font-family: 'Outfit', sans-serif;
    font-size: 14px; font-weight: 700;
    color: #fff; text-transform: uppercase;
    letter-spacing: .08em;
}
.testi-author span {
    font-size: 12px; color: rgba(255,255,255,.35);
    text-transform: uppercase; letter-spacing: 1px;
}

/* Dots */
.testi-dots-row {
    display: flex; align-items: center;
    justify-content: center; gap: 8px;
    margin-top: 32px;
}
.testi-dot {
    width: 8px; height: 8px;
    border-radius: 50%; padding: 0;
    background: rgba(255,255,255,.2);
    border: none; cursor: pointer;
    transition: all .3s ease;
}
.testi-dot.active {
    background: #C4EF17;
    width: 24px; border-radius: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .testi-top { flex-direction: column; gap: 20px; }
    .testi-card { padding: 36px 28px; }
    .hero { height: 80vh; align-items: center; }
    .hero-desc, .mid-cta-nums { flex-direction: column; }
    .mid-cta-text{ padding-left: 1rem; padding-right: 1rem; }
    .mid-num > div strong{ font-size: 2rem; text-align: left; }
}

/* ── FAQ ── */
.faq { padding: 80px 0; border-top: 1px solid rgba(255,255,255,.05); }
.faq-inner { display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: start; }

.faq-left h2 { margin-top: 10px; }
.faq-left > p { font-size: 15px; color: rgba(255,255,255,.45); line-height: 1.8; margin-top: 16px; }

.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.07); }
.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 22px 0; text-align: left;
    font-size: 15px; font-weight: 500; color: rgba(255,255,255,.75);
    transition: color .2s;
}
.faq-q:hover { color: #fff; }
.faq-q[aria-expanded="true"] { color: #C4EF17; }
.faq-q[aria-expanded="true"] .faq-ico { transform: rotate(180deg); border-color: rgba(196,239,23,.4); color: #C4EF17; }

.faq-ico {
    flex-shrink: 0; width: 28px; height: 28px;
    border: 1px solid rgba(255,255,255,.12); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.4);
    transition: transform .35s ease, border-color .2s, color .2s;
}
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s ease, padding .35s ease; }
.faq-a.open { max-height: 320px; padding-bottom: 22px; }
.faq-a p { font-size: 14px; color: rgba(255,255,255,.45); line-height: 1.8; }

/* ── BLOG ── */
.blog-sec { padding: 120px 0; border-top: 1px solid rgba(255,255,255,.05); }
.blog-head { margin-bottom: 56px; }
.blog-head h2 { margin-top: 10px; }

.blog-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.blog-card { background: #0a0a0a; overflow: hidden; transition: background .3s ease; }
.blog-card:hover { background: #121700; }

.blog-img { position: relative; height: 220px; overflow: hidden; }
.blog-img img { filter: grayscale(60%) brightness(.5); transition: all .55s ease; }
.blog-card:hover .blog-img img { filter: grayscale(0) brightness(.72); transform: scale(1.05); }

.blog-cat {
    position: absolute; top: 16px; left: 16px; z-index: 1;
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: #000; background: #C4EF17; padding: 4px 11px; border-radius: 1px;
}
.blog-body { padding: 26px 26px 34px; }
.blog-meta { display: flex; gap: 5px; margin-bottom: 12px; }
.blog-meta span { font-size: 12px; color: rgba(255,255,255,.28); }
.blog-body h3 { font-size: 17px; margin-bottom: 12px; line-height: 1.4; }
.blog-body h3 a { color: #fff; transition: color .2s; }
.blog-body h3 a:hover { color: #C4EF17; }
.blog-body p  { font-size: 13px; color: rgba(255,255,255,.4); line-height: 1.7; margin-bottom: 18px; }
.blog-link { font-size: 13px; font-weight: 600; color: #C4EF17; transition: letter-spacing .2s; }
.blog-link:hover { letter-spacing: .8px; }

/* ── CONTACT ── */
.contact { position: relative; padding: 120px 0; overflow: hidden; }
.contact-bg { position: absolute; inset: 0; }
.contact-bg img { filter: grayscale(100%) brightness(.1); }
.contact-ov { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.contact .container { position: relative; z-index: 1; }

.contact-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
.contact-left h2 { margin: 10px 0 20px; }
.contact-left > p { font-size: 15px; color: rgba(255,255,255,.55); line-height: 1.8; margin-bottom: 36px; }
.contact-info { display: flex; flex-direction: column; gap: 16px; }
.contact-info li { display: flex; align-items: center; gap: 14px; font-size: 14px; color: rgba(255,255,255,.55); }

.contact-form-wrap {
    background: rgba(8,8,8,.97); border: 1px solid rgba(255,255,255,.07);
    padding: 48px; backdrop-filter: blur(12px);
    border-top: 2px solid #C4EF17;
}
.contact-form-wrap h3 { font-size: 22px; color: #fff; margin-bottom: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 8px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 13px 16px;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
    color: #fff; font-size: 14px;
    transition: border-color .2s ease;
    -webkit-appearance: none; appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: #C4EF17; outline: none; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.18); }
.field select option { background: #111; color: #fff; }
.field textarea { resize: vertical; min-height: 96px; }

.btn-submit {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 17px;
    background: #C4EF17; color: #000;
    font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    transition: background .2s ease, transform .15s ease;
}
.btn-submit:hover { background: #fff; }
.btn-submit:active { transform: scale(.98); }

/* ── FOOTER ── */
.footer {
    border-top: 1px solid rgba(255,255,255,.06); background: #050505; padding-top: 80px;
    transition: transform .5s cubic-bezier(.77, 0, .175, 1);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 60px; }
.footer-brand .logo-link { margin-bottom: 18px; display: inline-flex; }
.footer-brand > p { font-size: 14px; color: rgba(255,255,255,.35); line-height: 1.75; margin-bottom: 26px; max-width: 300px; }
.f-social { display: flex; gap: 9px; }
.f-social a {
    width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.09);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.35); transition: all .2s ease;
}
.f-social a:hover { border-color: #C4EF17; color: #C4EF17; }

.footer-col h4 {
    font-family: 'Outfit', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,.35); transition: color .2s; }
.footer-col a:hover { color: #C4EF17; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.05); padding: 22px 0;
    display: flex; align-items: center; justify-content: space-between;
}
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,.28); }
.footer-bottom div { display: flex; gap: 22px; }
.footer-bottom a { font-size: 12px; color: rgba(255,255,255,.28); transition: color .2s; }
.footer-bottom a:hover { color: rgba(255,255,255,.55); }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
    .container, .header-inner { padding-left: 28px; padding-right: 28px; }
    .about-left { padding: 80px 48px 72px 28px; }
    .ind-grid { grid-template-columns: 1fr 1fr; }
    .why-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .srv-card { min-width: 50%; }
    .faq-inner { grid-template-columns: 300px 1fr; gap: 48px; }
    .offcanvas { width: 340px; }
}

@media (max-width: 900px) {
    h1 { font-size: clamp(38px, 8vw, 68px); }
    h2 { font-size: clamp(28px, 5.5vw, 46px); }

    .main-nav {
        position: fixed;
        inset: 0;
        background: #0a0a0a;
        padding: 88px 24px 40px;
        overflow-y: auto;
        z-index: 400;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        transform: translateX(100%);
        visibility: hidden;
        opacity: 1;
        transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0.38s;
    }
    .main-nav.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0s;
    }
    .main-nav > ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }
    .main-nav a { font-size: 16px; font-weight: 400; }
    .nav-hamburger { display: flex; z-index: 500; }
    .btn-cta { display: none; }

    .hero-row { flex-wrap: wrap; gap: 28px; }
    .hero-side-img { display: none; }
    .btn-circle { width: 100px; height: 100px; font-size: 12px; }

    .about-inner { grid-template-columns: 1fr; }
    .about-right { height: 340px; }
    .about-imgs { position: relative; height: 100%; }

    .ind-grid { grid-template-columns: 1fr 1fr; }
    .ind-head { flex-direction: column; gap: 16px; align-items: flex-start; }

    .mid-cta-inner { flex-direction: column; text-align: center; gap: 44px; }

    .port-grid { grid-template-columns: 1fr; }
    .port-card:nth-child(3) { grid-column: auto; }

    .why-grid { grid-template-columns: 1fr 1fr; }

    /* testi-grid uses flex, not grid — no override needed */
    .testi-top { flex-direction: column; gap: 20px; align-items: flex-start; }

    .faq-inner { grid-template-columns: 1fr; gap: 48px; }

    .contact-inner { grid-template-columns: 1fr; gap: 48px; }
    .contact-form-wrap { padding: 32px 24px; }
    .form-row { grid-template-columns: 1fr; }

    .blog-grid { grid-template-columns: 1fr 1fr; }
    .srv-card { min-width: 80%; }
}

@media (max-width: 600px) {
    :root { --section-py: 72px; }
    .container, .header-inner { padding-left: 20px; padding-right: 20px; }
    .ind-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
    .hero-content { padding-top: 120px; }
    .hero { padding-bottom: 60px; }
    .hero-row { border-top: none; padding-top: 24px; }
    .stats-row { grid-template-columns: 1fr 1fr; }
    .srv-card { min-width: 88%; }
    .testi-card { padding: 32px 22px; }
    .offcanvas { width: 100%; }
    body.offcanvas-open .site-header,
    body.offcanvas-open main,
    body.offcanvas-open .footer { transform: translateX(0); }
    .proc-item { grid-template-columns: 60px 1fr; }
}

/* ============================================================
   MOBILE NAV — paste at the very bottom of style.css
   This block wins because it comes last.
   ============================================================ */

@media (max-width: 991px) {

    /* ── Drawer shell ── */
    .main-nav {
        position: fixed !important;
        inset: 0 !important;
        background: #0a0a0a !important;
        padding: 88px 24px 48px !important;
        overflow-y: auto !important;
        z-index: 400 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;

        transform: translateX(100%) !important;
        visibility: hidden !important;
        opacity: 1 !important;
        transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0.38s !important;
    }

    .main-nav.open {
        height:100dvh;
        height:100vh;
        transform: translateX(0) !important;
        visibility: visible !important;
        transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s linear 0s !important;
    }

    /* ── Top-level list ── */
    .main-nav > ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    /* ── Depth-0 links ── */
    .main-nav .cc-depth-0 > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 18px 0 !important;
        font-size: 1.15rem !important;
        font-weight: 500 !important;
        color: #fff !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .main-nav .cc-depth-0 > a:hover {
        color: #C4EF17 !important;
        background: transparent !important;
        padding-left: 0 !important;
    }

    /* ── Chevrons ── */
    .cc-nav-chev,
    .cc-nav-chev--right {
        flex-shrink: 0 !important;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        opacity: 0.5 !important;
    }

    .cc-depth-0.is-open > a .cc-nav-chev {
        transform: rotate(180deg) !important;
        opacity: 1 !important;
    }

    .cc-depth-1.is-open > a .cc-nav-chev--right {
        transform: rotate(90deg) !important;
        opacity: 1 !important;
    }

    /* ── Sub-menu: reset desktop styles, apply accordion ── */
    .main-nav .cc-sub-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        min-width: 0 !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        list-style: none !important;
        margin: 0 !important;

        /* Accordion animation */
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        transform: translateY(-6px) !important;
        visibility: visible !important;
        transition:
            max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
            opacity    0.35s ease,
            transform  0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .main-nav .cc-sub-menu::before,
    .main-nav .cc-sub-menu::after {
        display: none !important;
    }

    .main-nav .cc-has-children.is-open > .cc-sub-menu {
        max-height: 600px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* ── Level-1 links ── */
    .main-nav .cc-sub-menu--lvl-1 > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 14px 0 14px 16px !important;
        font-size: 0.975rem !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .main-nav .cc-sub-menu--lvl-1 > li > a:hover {
        color: #C4EF17 !important;
        background: transparent !important;
        padding-left: 20px !important;
    }

    /* ── Level-2 sub-menu ── */
    .main-nav .cc-sub-menu--lvl-2 {
        padding-left: 12px !important;
    }

    /* ── Level-2 links ── */
    .main-nav .cc-sub-menu--lvl-2 > li > a {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 0 10px 16px !important;
        font-size: 0.85rem !important;
        color: rgba(255, 255, 255, 0.32) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .main-nav .cc-sub-menu--lvl-2 > li:last-child > a {
        border-bottom: none !important;
    }

    .main-nav .cc-sub-menu--lvl-2 > li > a::before {
        content: '' !important;
        display: inline-block !important;
        width: 4px !important;
        height: 4px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.18) !important;
        flex-shrink: 0 !important;
    }

    .main-nav .cc-sub-menu--lvl-2 > li > a:hover {
        color: rgba(255, 255, 255, 0.75) !important;
        background: transparent !important;
        padding-left: 20px !important;
    }

    /* ── Hover should NOT open sub-menus on mobile ── */
    .main-nav .cc-has-children:hover > .cc-sub-menu {
        max-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(-6px) !important;
    }

    .main-nav .cc-has-children.is-open:hover > .cc-sub-menu {
        max-height: 600px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    .main-nav .cc-sub-menu > li > a{
        justify-content: left;
    }
}