/*
Dellco OKJ Hero Replica v3
IMPORTANT: all Oklahoma Joe's rem values have been converted to their actual
rendered pixel values from the reference root scale (html font-size:62.5%).
*/
@font-face{
	font-family:"Roboto Condensed";
	src:url("https://www.oklahomajoes.com/cdn/shop/files/RobotoCondensed-Regular.woff2?v=3505015043743742275") format("woff2"),
		url("https://www.oklahomajoes.com/cdn/shop/files/RobotoCondensed-Regular.woff?v=4152982209805653769") format("woff");
	font-weight:400;font-style:normal;font-display:swap
}
@font-face{
	font-family:"Teko";
	src:url("https://www.oklahomajoes.com/cdn/shop/files/Teko-Bold.woff2?v=4753684705349127440") format("woff2"),
		url("https://www.oklahomajoes.com/cdn/shop/files/Teko-Bold.woff?v=8740008089135574863") format("woff");
	font-weight:700;font-style:normal;font-display:swap
}

.dokj-hero-shell{
	--dokj-container:1400px;
	--dokj-container-padding:25px;
	--dokj-text-padding:24px;
	width:100vw!important;
	max-width:100vw!important;
	margin:0 calc(50% - 50vw)!important;
	padding:0!important;
	position:relative!important;
	overflow:hidden!important;
	clear:both!important;
	background:#000!important;
	color:#fff!important;
	box-sizing:border-box!important;
	z-index:2
}
.dokj-hero-shell *,.dokj-hero-shell *:before,.dokj-hero-shell *:after{box-sizing:border-box}
.dokj-hero{position:relative!important;width:100%!important;height:700px!important;overflow:hidden!important;background:#000!important}
.dokj-track{height:100%;display:flex;transform:translate3d(0,0,0);transition:transform .5s ease-out;will-change:transform}
.dokj-slide{position:relative;min-width:100%;width:100%;height:100%;flex:0 0 100%;overflow:hidden}
.dokj-media,.dokj-media img{position:absolute!important;inset:0;display:block!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important}
.dokj-media img{object-fit:cover!important;object-position:50% 50%!important;transform:scale(1.1);transition:transform 1s ease-out}
.dokj-slide.is-active .dokj-media img{transform:scale(1)}
.dokj-overlay{position:absolute;inset:0;z-index:2}
.dokj-container{height:100%;width:100%;max-width:var(--dokj-container);padding:0 var(--dokj-container-padding);margin:0 auto;display:flex}
.dokj-captions{position:relative;z-index:2;width:100%;max-width:100%;padding:var(--dokj-text-padding) 0;color:#fff}
.dokj-captions>*{position:relative;z-index:2}
.dokj-captions>*:not(:first-child){margin-top:15px!important}

.dokj-subheading{
	font-family:"Roboto Condensed",Arial,sans-serif!important;
	font-weight:700!important;
	font-style:normal!important;
	letter-spacing:0!important;
	line-height:1.3!important;
	text-transform:uppercase!important;
	color:#fff!important
}
.dokj-subheading--p1{font-size:20px!important}
.dokj-subheading--p2{font-size:18px!important}
.dokj-subheading--p3{font-size:16px!important}

.dokj-title{
	font-family:"Teko",sans-serif!important;
	font-weight:700!important;
	font-style:normal!important;
	letter-spacing:0!important;
	line-height:.8!important;
	text-transform:uppercase!important;
	color:#fff!important;
	margin:0!important;
	padding:0!important
}
.dokj-title--xxl{font-size:100px!important}
.dokj-title--xl{font-size:72px!important}

.dokj-button-wrap{margin:15px -8px!important}
.dokj-button{
	display:inline-block!important;
	width:auto!important;
	margin:15px 8px!important;
	padding:12.5px 35.8px!important;
	border:1px solid #fff!important;
	border-radius:7px!important;
	background:transparent!important;
	color:#fff!important;
	font-family:"Roboto Condensed",sans-serif!important;
	font-size:17.92px!important;
	font-weight:700!important;
	line-height:1!important;
	text-align:center!important;
	text-decoration:none!important;
	text-transform:uppercase!important;
	transition:all .2s ease-out!important;
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px)
}
.dokj-button:hover,.dokj-button:focus-visible{background:#fff!important;color:#221B16!important;border-color:#221B16!important}
.dokj-button:focus-visible,.dokj-arrow:focus-visible,.dokj-dot:focus-visible{outline:2px solid #fff!important;outline-offset:3px!important}

.dokj-slide--offset .dokj-container{justify-content:flex-end;align-items:flex-end}
.dokj-slide--offset .dokj-captions{text-align:right}
.dokj-slide--workstation .dokj-container{justify-content:center;align-items:center}
.dokj-slide--workstation .dokj-captions{text-align:center}
.dokj-slide--bronco .dokj-container{justify-content:center;align-items:flex-end}
.dokj-slide--bronco .dokj-captions{max-width:550px;text-align:center;padding-left:24px;padding-right:24px}

.dokj-slide--tint-shadow .dokj-captions:before{
	content:"";position:absolute;z-index:1;inset:0;
	margin:-15% -20%;background:radial-gradient(rgba(0,0,0,.51) 0%,transparent 60%)
}

.dokj-arrow{
	position:absolute!important;z-index:5!important;top:50%!important;
	width:40px!important;height:40px!important;margin:0!important;padding:10px!important;
	transform:translateY(-50%)!important;border:1px solid rgba(0,0,0,.2)!important;
	border-radius:50%!important;background:rgba(255,255,255,.70)!important;color:#000!important;
	cursor:pointer!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
	opacity:.85;transition:opacity .2s ease-out!important
}
.dokj-arrow:hover{opacity:1}
.dokj-arrow svg{display:block;width:100%;height:100%;fill:currentColor}
.dokj-arrow--prev{left:20px!important}
.dokj-arrow--next{right:20px!important}

.dokj-dots{
	position:absolute;z-index:6;left:0;bottom:0;width:100%;
	padding:10px;display:none;align-items:center;justify-content:center;gap:8px
}
.dokj-dot{
	width:9px!important;height:9px!important;min-width:0!important;min-height:0!important;
	padding:0!important;border:0!important;border-radius:50%!important;
	background:rgba(255,255,255,.3)!important;box-shadow:0 0 4px rgba(0,0,0,.2)!important;cursor:pointer
}
.dokj-dot.is-active{background:#fff!important}

/* Reference medium-down breakpoint: 66em = 1056px in the browser. */
@media(max-width:1056px){
	.dokj-hero-shell{--dokj-container-padding:20px;--dokj-text-padding:12px}
	.dokj-hero{height:600px!important}
	.dokj-arrow{display:none!important}
	.dokj-dots{display:flex}
	.dokj-slide .dokj-overlay{padding-bottom:40px}
	.dokj-title--xxl{font-size:85px!important}
	.dokj-title--xl{font-size:61.2px!important}
	.dokj-slide--offset .dokj-container{justify-content:center;align-items:center}
	.dokj-slide--offset .dokj-captions,
	.dokj-slide--workstation .dokj-captions,
	.dokj-slide--bronco .dokj-captions{max-width:100%;text-align:center;padding-left:0;padding-right:0}
	.dokj-slide--workstation .dokj-container,
	.dokj-slide--bronco .dokj-container{justify-content:center;align-items:flex-end}
	.dokj-slide--tint-shadow .dokj-captions:before{margin:0 -100px}
}

/* Reference small breakpoint: 38em = 608px. */
@media(max-width:608px){
	.dokj-hero-shell{--dokj-container-padding:15px}
	.dokj-hero{height:600px!important}
	.dokj-title--xxl{font-size:56px!important}
	.dokj-title--xl{font-size:64px!important}
	.dokj-subheading--p1{font-size:17.5px!important}
	.dokj-subheading--p2{font-size:15.75px!important}
	.dokj-subheading--p3{font-size:14px!important}
	.dokj-button{font-size:15.68px!important}
}
@media(prefers-reduced-motion:reduce){
	.dokj-track{transition:none}
	.dokj-media img{transition:none;transform:scale(1)}
}

/* Dellco 3.1 typography + control normalization */
.dokj-subheading{letter-spacing:.08em!important}
.dokj-button{border-radius:7px!important;min-height:48px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
.dokj-arrow{box-shadow:0 8px 24px rgba(0,0,0,.14)}
@media(max-width:608px){.dokj-button{min-height:46px!important}}

/* PHASE 2C (2026-09-11): visible homepage H1 + subline. Compact eyebrow block, centered, fluid type, no overflow. */
.dokj-hero-intro{background:#0f0f0f;color:#fff;text-align:center;padding:18px 16px 6px;max-width:100%;box-sizing:border-box}
.dokj-hero-intro .dokj-container{max-width:1100px;margin:0 auto;padding:0 16px;box-sizing:border-box}
.dokj-hero-shell .dokj-hero-intro h1.dokj-hero-h1{margin:0;font-size:clamp(20px,2.6vw,30px);line-height:1.25;font-weight:700;letter-spacing:.01em;color:#fff;overflow-wrap:break-word}
.dokj-hero-sub{margin:8px 0 0;font-size:clamp(13px,1.6vw,16px);line-height:1.5;color:rgba(255,255,255,.82);overflow-wrap:break-word}
.dokj-hero-sub a{color:#fff;text-decoration:underline;text-underline-offset:2px}
@media (max-width:480px){.dokj-hero-intro{padding:14px 12px 4px}}