/* =========================================================
   OGE ENGINEERING — PREMIUM CORPORATE DESIGN SYSTEM v2
========================================================= */

:root{
	/* --- Brand palette sampled directly from the OGE logo --- */
	--blue:        #1C78C1;   /* logo blue (deep)  */
	--blue-light:  #0AACEB;   /* logo blue (light) */
	--blue-dark:   #145A93;
	--accent:      #ED9250;   /* logo orange       */
	--accent-2:    #F5AC77;
	--accent-dark: #D97B36;
	--navy:        #08131F;   /* near-black base   */
	--navy-2:      #0F2438;
	--navy-3:      #1B4262;
	--ink:         #101E2B;
	--body:        #5A6B7C;
	--line:        #E1E8EF;
	--bg-soft:     #F4F8FB;
	--white:       #fff;
	--radius:      4px;
	--wrap:        1240px;
	--f-alt:       'Montserrat',sans-serif;
	--f-body:      'Inter','Roboto',-apple-system,sans-serif;
	--shadow:      0 18px 50px rgba(8,19,31,.13);
}

body{ font-family: var(--f-body); color: var(--body); font-size:16px; }

h1,h2,h3,h4,h5{ font-family: var(--f-alt); color: var(--ink); font-weight:800; line-height:1.18; letter-spacing:-.02em; margin:0 0 18px; }
h1{ font-size: clamp(38px, 5.2vw, 64px); }
h2{ font-size: clamp(28px, 3.6vw, 44px); }
h3{ font-size: clamp(19px, 2vw, 23px); }
p { margin:0 0 18px; line-height:1.75; }

.wrap{ max-width: var(--wrap); margin:0 auto; padding:0 28px; }
.sec{ padding: 100px 0; }
.sec--sm{ padding: 64px 0; }
.sec--soft{ background: var(--bg-soft); }
.sec--navy{ background: var(--navy); }
.sec--navy h2,.sec--navy h3{ color:#fff; }
.sec--navy p{ color: rgba(255,255,255,.72); }
.tc{ text-align:center; }

/* ---------- Eyebrow label ---------- */
.eyebrow{
	display:inline-flex; align-items:center; gap:10px;
	font-family: var(--f-alt); font-weight:700; font-size:12px;
	letter-spacing:.22em; text-transform:uppercase; color: var(--accent);
	margin-bottom:14px;
}
.eyebrow::before{ content:''; width:34px; height:2px; background: var(--accent); }
.tc .eyebrow{ justify-content:center; }
.tc .eyebrow::after{ content:''; width:34px; height:2px; background: var(--accent); }

.lead{ font-size:17px; max-width:680px; }
.tc .lead{ margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex; align-items:center; gap:10px;
	padding:16px 34px;
	background: var(--accent); color:#fff !important;
	font-family: var(--f-alt); font-weight:700; font-size:13px;
	letter-spacing:.14em; text-transform:uppercase;
	border:2px solid var(--accent); border-radius: var(--radius);
	transition:.25s; cursor:pointer;
}
.btn:hover{ background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); }
.btn--ghost{ background:transparent; color:#fff !important; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover{ background:#fff; color: var(--navy) !important; border-color:#fff; }
.btn--dark{ background: var(--blue); border-color: var(--blue); }
.btn--dark:hover{ background: var(--blue-dark); border-color: var(--blue-dark); }

/* =========================================================
   TOP BAR
========================================================= */
.topbar{
	background: var(--navy);
	color: rgba(255,255,255,.72);
	font-size:13.5px;
}
.topbar__in{
	max-width: var(--wrap); margin:0 auto; padding:11px 28px;
	display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.topbar__list{ display:flex; gap:26px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.topbar__list li{ display:flex; align-items:center; gap:8px; }
.topbar__list svg{ color: var(--accent); flex:none; }
.topbar a:hover{ color:#fff; }
.topbar__social{ display:flex; gap:10px; }
.topbar__social a{
	width:28px; height:28px; border:1px solid rgba(255,255,255,.2); border-radius:50%;
	display:flex; align-items:center; justify-content:center; transition:.2s;
}
.topbar__social a:hover{ background: var(--accent); border-color: var(--accent); color:#fff; }
@media (max-width: 860px){ .topbar{ display:none; } }

/* =========================================================
   HEADER
========================================================= */
.hdr{ background:#fff; position:sticky; top:0; z-index:900; border-bottom:1px solid var(--line); }
.hdr.is-stuck{ box-shadow:0 6px 24px rgba(8,19,31,.10); }
.hdr__in{
	max-width: var(--wrap); margin:0 auto; padding:0 28px;
	display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:84px;
}
.brand{ font-family: var(--f-alt); font-weight:800; font-size:23px; color: var(--navy); letter-spacing:-.02em; line-height:1.1; }
.brand small{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.2em; color: var(--blue); text-transform:uppercase; margin-top:3px; }
.brand img, .custom-logo{ max-height:60px; width:auto; display:block; }
.brand a{ display:block; }

.nav ul{ display:flex; gap:34px; list-style:none; margin:0; padding:0; }
.nav a{
	position:relative; display:block; padding:30px 0;
	font-family: var(--f-alt); font-weight:600; font-size:14px;
	letter-spacing:.05em; text-transform:uppercase; color: var(--ink); transition:.2s;
}
.nav a::after{
	content:''; position:absolute; left:0; bottom:22px; width:0; height:2px;
	background: var(--accent); transition:.25s;
}
.nav a:hover{ color: var(--accent); }
.nav a:hover::after, .nav .current-menu-item > a::after{ width:100%; }
.nav .current-menu-item > a{ color: var(--accent); }

.hdr__act{ display:flex; align-items:center; gap:16px; }
.burger{ display:none; background:none; border:0; padding:6px; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; background: var(--navy); margin:5px 0; transition:.25s; }

@media (max-width: 1024px){
	.nav ul{ gap:22px; }
	.hdr__act .btn{ padding:13px 22px; font-size:12px; }
}
@media (max-width: 900px){
	.nav{
		display:none; position:absolute; top:100%; left:0; right:0;
		background:#fff; border-top:1px solid var(--line); box-shadow:0 14px 30px rgba(8,19,31,.12);
	}
	.nav.open{ display:block; }
	.nav ul{ flex-direction:column; gap:0; padding:8px 28px 18px; }
	.nav li + li{ border-top:1px solid var(--line); }
	.nav a{ padding:16px 0; }
	.nav a::after{ display:none; }
	.burger{ display:block; }
	.hdr__act .btn{ display:none; }
	.hdr__in{ min-height:70px; }
}

/* =========================================================
   HERO
========================================================= */
.hero{ position:relative; overflow:hidden; background: var(--navy); }
.hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.hero__bg::after{
	content:''; position:absolute; inset:0;
	background: linear-gradient(100deg, rgba(8,19,31,.95) 0%, rgba(8,19,31,.88) 42%, rgba(8,19,31,.55) 100%);
}
.hero__in{ position:relative; z-index:2; padding: 140px 0 120px; }
.hero__col{ max-width:720px; }
.hero h1{ color:#fff; margin-bottom:22px; }
.hero h1 em{ font-style:normal; color: var(--accent); }
.hero__sub{ color: rgba(255,255,255,.8); font-size:18px; max-width:600px; margin-bottom:30px; }
.hero__tags{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0 0 34px; }
.hero__tags li{
	font-family: var(--f-alt); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
	color: rgba(255,255,255,.85);
	padding:8px 17px; border:1px solid rgba(255,255,255,.28); border-radius:40px;
	backdrop-filter: blur(3px);
}
.hero__btns{ display:flex; gap:14px; flex-wrap:wrap; }

/* hero bottom strip */
.hero__strip{
	position:relative; z-index:2;
	background: rgba(255,255,255,.06);
	border-top:1px solid rgba(255,255,255,.12);
	backdrop-filter: blur(6px);
}
.hero__strip .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.hstat{ padding:30px 22px; border-right:1px solid rgba(255,255,255,.10); }
.hstat:last-child{ border-right:0; }
.hstat b{ display:block; font-family: var(--f-alt); font-size:34px; font-weight:800; color: var(--accent); line-height:1; }
.hstat span{ display:block; margin-top:8px; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.62); }

@media (max-width: 900px){
	.hero__in{ padding: 88px 0 74px; }
	.hero__strip .wrap{ grid-template-columns:repeat(2,1fr); padding-left:14px; padding-right:14px; }
	.hstat{ padding:22px 14px; }
	.hstat:nth-child(2){ border-right:0; }
	.hstat:nth-child(1),.hstat:nth-child(2){ border-bottom:1px solid rgba(255,255,255,.1); }
}

/* =========================================================
   SECTION HEAD
========================================================= */
.shead{ max-width:760px; margin:0 auto 58px; }
.shead.left{ margin-left:0; }

/* =========================================================
   SERVICE CARDS (image + overlay)
========================================================= */
.grid{ display:grid; gap:26px; grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.scard{
	position:relative; background:#fff; border:1px solid var(--line);
	border-radius: var(--radius); overflow:hidden; transition:.35s;
	display:flex; flex-direction:column;
}
.scard:hover{ transform:translateY(-8px); box-shadow: var(--shadow); border-color:transparent; }
.scard__img{ position:relative; aspect-ratio:16/10; overflow:hidden; background: var(--navy-2); }
.scard__img img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.scard:hover .scard__img img{ transform:scale(1.07); }
.scard__img::after{
	content:''; position:absolute; inset:0;
	background: linear-gradient(to top, rgba(8,19,31,.72), rgba(8,19,31,0) 58%);
}
.scard__num{
	position:absolute; left:0; bottom:0; z-index:2;
	background: var(--accent); color:#fff;
	font-family: var(--f-alt); font-weight:800; font-size:14px;
	padding:9px 16px; letter-spacing:.08em;
}
.scard__body{ padding:28px 26px 30px; flex:1; display:flex; flex-direction:column; }
.scard__body p{ font-size:14.6px; flex:1; }
.scard__link{
	display:inline-flex; align-items:center; gap:8px;
	font-family: var(--f-alt); font-weight:700; font-size:12.5px;
	letter-spacing:.14em; text-transform:uppercase; color: var(--navy); transition:.2s;
}
.scard__link:hover{ color: var(--accent); gap:14px; }

/* pillar cards (no image) */
.pcard{
	background:#fff; border:1px solid var(--line); border-left:3px solid var(--blue);
	border-radius: var(--radius); padding:38px 34px; transition:.3s;
}
.pcard:hover{ box-shadow: var(--shadow); transform:translateY(-5px); }
.pcard__ico{
	width:56px; height:56px; border-radius:50%;
	background: linear-gradient(135deg, rgba(10,172,235,.16), rgba(28,120,193,.16));
	display:flex; align-items:center; justify-content:center; color: var(--blue); margin-bottom:22px;
}
.pcard ul{ list-style:none; padding:0; margin:0 0 24px; }
.pcard li{ position:relative; padding-left:26px; margin-bottom:11px; font-size:15px; }
.pcard li::before{
	content:''; position:absolute; left:0; top:8px;
	width:8px; height:8px; background: var(--accent); border-radius:2px; transform:rotate(45deg);
}

@media (max-width: 992px){ .grid, .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .grid, .grid--2, .grid--4{ grid-template-columns:1fr; } }

/* =========================================================
   SPLIT / ABOUT
========================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split--rev .split__media{ order:2; }
.split__media{ position:relative; }
.split__media img{ border-radius: var(--radius); width:100%; }
.split__media--stack{ padding-bottom:70px; padding-right:60px; }
.split__media--stack .img-b{
	position:absolute; right:0; bottom:0; width:56%;
	border:8px solid #fff; border-radius: var(--radius); box-shadow: var(--shadow);
}
.badge{
	position:absolute; left:0; bottom:0; z-index:3;
	background: var(--accent); color:#fff; padding:24px 30px; border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.badge b{ display:block; font-family: var(--f-alt); font-size:40px; font-weight:800; line-height:1; }
.badge span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.92; }

.checklist{ list-style:none; padding:0; margin:0 0 30px; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.checklist li{ position:relative; padding-left:30px; font-size:15px; color: var(--ink); font-weight:500; }
.checklist li::before{
	content:'✓'; position:absolute; left:0; top:-1px;
	width:20px; height:20px; background: rgba(237,146,80,.14); color: var(--accent);
	border-radius:50%; font-size:11px; display:flex; align-items:center; justify-content:center; font-weight:700;
}

@media (max-width: 900px){
	.split{ grid-template-columns:1fr; gap:40px; }
	.split--rev .split__media{ order:0; }
	.split__media--stack{ padding-bottom:0; padding-right:0; }
	.split__media--stack .img-b{ display:none; }
	.checklist{ grid-template-columns:1fr; }
}

/* =========================================================
   BAND (photo background w/ overlay)
========================================================= */
.band{ position:relative; background: var(--navy); overflow:hidden; }
.band__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.band__bg::after{ content:''; position:absolute; inset:0; background: rgba(8,19,31,.90); }
.band__in{ position:relative; z-index:2; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stats b{ display:block; font-family: var(--f-alt); font-size:clamp(36px,4vw,52px); font-weight:800; color: var(--accent); line-height:1; }
.stats span{ display:block; margin-top:10px; font-size:13px; letter-spacing:.13em; text-transform:uppercase; color: rgba(255,255,255,.66); }
@media (max-width: 700px){ .stats{ grid-template-columns:repeat(2,1fr); gap:34px 20px; } }

/* =========================================================
   PROCESS STEPS
========================================================= */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:s; }
.step{ position:relative; padding-top:12px; }
.step__n{
	width:58px; height:58px; border-radius:50%; background:#fff; border:2px solid var(--accent);
	color: var(--accent); font-family: var(--f-alt); font-weight:800; font-size:19px;
	display:flex; align-items:center; justify-content:center; margin-bottom:20px; position:relative; z-index:2;
}
.step::after{
	content:''; position:absolute; top:41px; left:58px; right:-24px; height:2px;
	background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
}
.step:last-child::after{ display:none; }
.step h3{ font-size:18px; margin-bottom:10px; }
.step p{ font-size:14.5px; margin:0; }
@media (max-width: 900px){ .steps{ grid-template-columns:repeat(2,1fr); } .step::after{ display:none; } }
@media (max-width: 520px){ .steps{ grid-template-columns:1fr; } }

/* =========================================================
   CTA BAND
========================================================= */
.cta{ position:relative; overflow:hidden; }
.cta__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.cta__bg::after{
	content:''; position:absolute; inset:0;
	background: linear-gradient(90deg, rgba(8,19,31,.95), rgba(8,19,31,.70));
}
.cta__in{
	position:relative; z-index:2; padding:76px 0;
	display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta h2{ color:#fff; margin:0 0 8px; }
.cta p{ color: rgba(255,255,255,.72); margin:0; }

/* =========================================================
   PAGE HEADER (interior pages)
========================================================= */
.phead{ position:relative; overflow:hidden; background: var(--navy); }
.phead__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.phead__bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(8,19,31,.94), rgba(8,19,31,.74)); }
.phead__in{ position:relative; z-index:2; padding:96px 0 84px; }
.phead h1{ color:#fff; margin-bottom:12px; }
.phead p{ color: rgba(255,255,255,.72); max-width:620px; margin:0; }
.crumb{ font-size:13px; color: rgba(255,255,255,.55); margin-bottom:16px; letter-spacing:.05em; }
.crumb a:hover{ color: var(--accent); }

/* =========================================================
   FORMS
========================================================= */
.form{ display:grid; gap:18px; background:#fff; padding:40px; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form label{ display:block; font-family: var(--f-alt); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--navy); margin-bottom:8px; }
.form input, .form textarea, .form select{
	width:100%; padding:14px 16px; border:1px solid var(--line); border-radius: var(--radius);
	font-family: var(--f-body); font-size:15px; color: var(--ink); background: #fbfcfd; transition:.2s;
}
.form input:focus, .form textarea:focus{ outline:none; border-color: var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(237,146,80,.12); }
.form .btn{ justify-content:center; }
.notice-ok{ background:#e9f7ef; color:#1c7a45; padding:14px 18px; border-radius: var(--radius); border-left:3px solid #1c7a45; }
.notice-err{ background:#fdecec; color:#b3261e; padding:14px 18px; border-radius: var(--radius); border-left:3px solid #b3261e; }
@media (max-width: 640px){ .form{ padding:26px; } .form__row{ grid-template-columns:1fr; } }

.cinfo{ display:grid; gap:16px; }
.cinfo__item{ display:flex; gap:18px; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:22px 24px; transition:.25s; }
.cinfo__item:hover{ box-shadow: var(--shadow); border-color:transparent; }
.cinfo__ic{
	width:48px; height:48px; flex:none; border-radius:50%; background: rgba(237,146,80,.12);
	color: var(--accent); display:flex; align-items:center; justify-content:center;
}
.cinfo__item strong{ display:block; font-family: var(--f-alt); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--body); margin-bottom:5px; }
.cinfo__item p{ margin:0; color: var(--ink); font-weight:500; font-size:15.5px; }

/* =========================================================
   FOOTER
========================================================= */
.ftr{ background: var(--navy); color: rgba(255,255,255,.62); padding-top:80px; font-size:15px; }
.ftr h4{ color:#fff; font-family: var(--f-alt); font-size:14px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:24px; position:relative; padding-bottom:14px; }
.ftr h4::after{ content:''; position:absolute; left:0; bottom:0; width:32px; height:2px; background: var(--accent); }
.ftr__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:44px; padding-bottom:56px; }
.ftr ul{ list-style:none; padding:0; margin:0; }
.ftr li{ margin-bottom:12px; }
.ftr li a{ transition:.2s; position:relative; padding-left:0; }
.ftr li a:hover{ color: var(--accent); padding-left:6px; }
.ftr__brand{ font-family: var(--f-alt); font-weight:800; font-size:23px; color:#fff; margin-bottom:18px; display:block; }
.ftr__contact li{ display:flex; gap:12px; align-items:flex-start; }
.ftr__contact svg{ color: var(--accent); flex:none; margin-top:4px; }
.ftr__bot{
	border-top:1px solid rgba(255,255,255,.1); padding:24px 0;
	display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; font-size:13.5px;
}
.ftr__social{ display:flex; gap:11px; }
.ftr__social a{
	width:36px; height:36px; border:1px solid rgba(255,255,255,.2); border-radius:50%;
	display:flex; align-items:center; justify-content:center; transition:.25s;
}
.ftr__social a:hover{ background: var(--accent); border-color: var(--accent); color:#fff; transform:translateY(-3px); }
@media (max-width: 900px){ .ftr__grid{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width: 560px){ .ftr__grid{ grid-template-columns:1fr; } .ftr__bot{ flex-direction:column; text-align:center; } }

/* =========================================================
   ELEMENTOR SAFETY
========================================================= */
.elementor-page .wrap{ max-width:none; padding:0; }

/* reveal animation */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }