@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

/* ==========================================================================
   OKC — About Hero
   Port of themes/okc/page-templates/about_t.php lines 9-62.

   The legacy page loaded Tailwind Play CDN (v3 defaults + Preflight),
   assets/css/main.css and the Great Vibes @import from style.css. Every
   utility below is resolved to a literal value so no Tailwind is needed.

   Source utilities:
     section   : sm:min-h-[55vh] md:min-h-[65vh] lg:min-h-[75vh] flex items-center
                 justify-center pt-20 sm:pt-24 md:pt-28 lg:pt-32 pb-10 sm:pb-12
                 md:pb-10 lg:pb-10 hero-bg-container overflow-hidden
     bg layer  : absolute inset-0 about-hero-bg   (+ inline background-image)
     overlay   : absolute inset-0 bg-gradient-to-b from-white/40 via-white/50 to-white/70
     container : container mx-auto px-4 sm:px-6 md:px-8 lg:px-12 text-center relative z-10
     script    : text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-9xl 2xl:text-9xl
                 mb-2 sm:mb-3 md:mb-4 lg:mb-5 font-bold animate-fade-in text-[#003049]
                 (inline font-family: 'Great Vibes', cursive)
     heading   : text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-black text-[#0A3B5C]
                 leading-none mb-4 md:mb-6 tracking-tighter uppercase
     wordmark  : h-8 sm:h-10 md:h-12 lg:h-14 xl:h-16 w-auto mx-auto animate-fade-in
     badge box : circle-logo-position absolute right-4 sm:right-6 md:right-8 lg:right-12
                 xl:right-16 2xl:right-20 z-40
     badge img : w-16 h-16 sm:w-20 sm:h-20 md:w-28 md:h-28 lg:w-36 lg:h-36 xl:w-44 xl:h-44
                 2xl:w-48 2xl:h-48 animate-spin-slow

   main.css contributions reproduced here:
     .hero-bg-container   { position: relative; overflow: hidden }
     .about-hero-bg       { background-size: cover; background-position: center;
                            animation: kenburns 20s ease-in-out infinite alternate }
     .circle-logo-position{ top: calc(70vh - 60px) } + five width-banded overrides
     .animate-fade-in     { animation: fadeIn 1s ease-out }
     .animate-spin-slow   { animation: spinSlow 20s linear infinite }
     @media (max-width:768px){ h1 { font-size: 3rem !important } }   <- see HEADING

   Keyframes okc-kenburns / okc-fade-in / okc-spin-slow come from okc-base.css.
   Breakpoints (min-width, mobile-first): sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536
   ========================================================================== */

/* --------------------------------------------------------------------------
   Root wrapper.
   In the legacy markup the badge was a SIBLING of the hero <section> (a direct
   child of <body>) so the section's overflow:hidden never clipped it, and its
   `absolute` resolved against the initial containing block. This wrapper takes
   that role: it is the positioned ancestor for the badge and is NOT clipped.
   -------------------------------------------------------------------------- */
.okc-about-hero {
	position: relative;
}

/* --------------------------------------------------------------------------
   Hero section
   -------------------------------------------------------------------------- */
.okc-about-hero .okc-about-hero__hero {
	position: relative;        /* .hero-bg-container */
	overflow: hidden;          /* .hero-bg-container + overflow-hidden */
	display: flex;             /* flex */
	align-items: center;       /* items-center */
	justify-content: center;   /* justify-center */
	padding-top: 5rem;         /* pt-20 */
	padding-bottom: 2.5rem;    /* pb-10 */
	/* No min-height below 640px — the legacy markup had no unprefixed min-h. */
}

@media (min-width: 640px) {
	.okc-about-hero .okc-about-hero__hero {
		min-height: 55vh;       /* sm:min-h-[55vh] */
		padding-top: 6rem;      /* sm:pt-24 */
		padding-bottom: 3rem;   /* sm:pb-12 */
	}
}

@media (min-width: 768px) {
	.okc-about-hero .okc-about-hero__hero {
		min-height: 65vh;        /* md:min-h-[65vh] */
		padding-top: 7rem;       /* md:pt-28 */
		padding-bottom: 2.5rem;  /* md:pb-10 */
	}
}

@media (min-width: 1024px) {
	.okc-about-hero .okc-about-hero__hero {
		min-height: 75vh;        /* lg:min-h-[75vh] */
		padding-top: 8rem;       /* lg:pt-32 */
		padding-bottom: 2.5rem;  /* lg:pb-10 */
	}
}

/* --------------------------------------------------------------------------
   Background layer — absolute inset-0 + main.css .about-hero-bg
   -------------------------------------------------------------------------- */
.okc-about-hero .okc-about-hero__bg {
	position: absolute;   /* absolute */
	top: 0;               /* inset-0 */
	right: 0;
	bottom: 0;
	left: 0;
	background-size: cover;
	background-position: center;
	animation: okc-kenburns 20s ease-in-out infinite alternate;
}

.okc-about-hero--no-kenburns .okc-about-hero__bg {
	animation: none;
}

/* --------------------------------------------------------------------------
   Gradient overlay — bg-gradient-to-b from-white/40 via-white/50 to-white/70
   Tailwind emits: linear-gradient(to bottom, <from> 0%, <via> 50%, <to> 100%)
   The custom properties let the three Elementor colour controls drive it.
   -------------------------------------------------------------------------- */
.okc-about-hero .okc-about-hero__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(
		to bottom,
		var(--okc-ah-overlay-from, rgb(255 255 255 / 0.4)) 0%,
		var(--okc-ah-overlay-via, rgb(255 255 255 / 0.5)) 50%,
		var(--okc-ah-overlay-to, rgb(255 255 255 / 0.7)) 100%
	);
}

/* --------------------------------------------------------------------------
   Content container — Tailwind `container` (width:100% + a hard max-width at
   every breakpoint) + mx-auto + px-4 sm:px-6 md:px-8 lg:px-12 + relative z-10
   -------------------------------------------------------------------------- */
.okc-about-hero .okc-about-hero__container {
	position: relative;    /* relative */
	z-index: 10;           /* z-10 */
	text-align: center;    /* text-center */
	width: 100%;           /* container */
	margin-left: auto;     /* mx-auto */
	margin-right: auto;
	padding-left: 1rem;    /* px-4 */
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.okc-about-hero .okc-about-hero__container {
		max-width: 640px;
		padding-left: 1.5rem;   /* sm:px-6 */
		padding-right: 1.5rem;
	}
}

@media (min-width: 768px) {
	.okc-about-hero .okc-about-hero__container {
		max-width: 768px;
		padding-left: 2rem;     /* md:px-8 */
		padding-right: 2rem;
	}
}

@media (min-width: 1024px) {
	.okc-about-hero .okc-about-hero__container {
		max-width: 1024px;
		padding-left: 3rem;     /* lg:px-12 */
		padding-right: 3rem;
	}
}

@media (min-width: 1280px) {
	.okc-about-hero .okc-about-hero__container {
		max-width: 1280px;
	}
}

@media (min-width: 1536px) {
	.okc-about-hero .okc-about-hero__container {
		max-width: 1536px;
	}
}

/* --------------------------------------------------------------------------
   Script line ("Welcome to")
   -------------------------------------------------------------------------- */
.okc-about-hero .okc-about-hero__eyebrow {
	font-family: "Great Vibes", cursive;  /* inline style on the legacy <p> */
	font-size: 1.5rem;                    /* text-2xl */
	line-height: 2rem;
	font-weight: 700;                     /* font-bold */
	color: #003049;                       /* text-[#003049] */
	margin-bottom: 0.5rem;                /* mb-2 */
	animation: okc-fade-in 1s ease-out;   /* .animate-fade-in */
}

@media (min-width: 640px) {
	.okc-about-hero .okc-about-hero__eyebrow {
		font-size: 1.875rem;    /* sm:text-3xl */
		line-height: 2.25rem;
		margin-bottom: 0.75rem; /* sm:mb-3 */
	}
}

@media (min-width: 768px) {
	.okc-about-hero .okc-about-hero__eyebrow {
		font-size: 2.25rem;   /* md:text-4xl */
		line-height: 2.5rem;
		margin-bottom: 1rem;  /* md:mb-4 */
	}
}

@media (min-width: 1024px) {
	.okc-about-hero .okc-about-hero__eyebrow {
		font-size: 3rem;         /* lg:text-5xl */
		line-height: 1;
		margin-bottom: 1.25rem;  /* lg:mb-5 */
	}
}

@media (min-width: 1280px) {
	.okc-about-hero .okc-about-hero__eyebrow {
		font-size: 8rem;   /* xl:text-9xl (2xl:text-9xl repeats the same value) */
		line-height: 1;
	}
}

/* --------------------------------------------------------------------------
   Heading
   The legacy inline style read
       style="font-family: 'Pragmatica', sans-serif, font-weight: 900"
   which is malformed CSS (a colon inside the font-family value), so browsers
   dropped the whole declaration and the live page fell back to the inherited
   body font. The clear intent — and the reason Pragmatica is bundled — is
   Pragmatica 900, which is what we apply. Change it with the Typography
   control if the broken original is wanted.
   -------------------------------------------------------------------------- */
.okc-about-hero .okc-about-hero__title {
	font-family: "Pragmatica", sans-serif;
	font-size: 3.75rem;          /* text-6xl */
	line-height: 1;              /* leading-none (text-6xl also pairs 1) */
	font-weight: 900;            /* font-black */
	color: #0a3b5c;              /* text-[#0A3B5C] */
	letter-spacing: -0.05em;     /* tracking-tighter */
	text-transform: uppercase;   /* uppercase */
	margin-bottom: 1rem;         /* mb-4 */
}

@media (min-width: 640px) {
	.okc-about-hero .okc-about-hero__title {
		font-size: 4.5rem;   /* sm:text-7xl */
		line-height: 1;
	}
}

@media (min-width: 768px) {
	.okc-about-hero .okc-about-hero__title {
		font-size: 6rem;        /* md:text-8xl */
		line-height: 1;
		margin-bottom: 1.5rem;  /* md:mb-6 */
	}
}

@media (min-width: 1024px) {
	.okc-about-hero .okc-about-hero__title {
		font-size: 8rem;   /* lg:text-9xl */
		line-height: 1;
	}
}

/* main.css shipped a global `@media (max-width:768px){ h1 { font-size:3rem
   !important } }`, so on the legacy site this heading was 3rem — not 3.75rem
   or 4.5rem — everywhere up to and including 768px. Reproduced here by source
   order (no !important, so the Typography control can still win). */
@media (max-width: 768px) {
	.okc-about-hero .okc-about-hero__title {
		font-size: 3rem;
		line-height: 1;
	}
}

/* --------------------------------------------------------------------------
   KC/MO wordmark
   -------------------------------------------------------------------------- */
.okc-about-hero .okc-about-hero__logo {
	display: block;
	height: 2rem;                       /* h-8 */
	width: auto;                        /* w-auto */
	margin-left: auto;                  /* mx-auto */
	margin-right: auto;
	animation: okc-fade-in 1s ease-out; /* .animate-fade-in */
}

@media (min-width: 640px) {
	.okc-about-hero .okc-about-hero__logo {
		height: 2.5rem;   /* sm:h-10 */
	}
}

@media (min-width: 768px) {
	.okc-about-hero .okc-about-hero__logo {
		height: 3rem;     /* md:h-12 */
	}
}

@media (min-width: 1024px) {
	.okc-about-hero .okc-about-hero__logo {
		height: 3.5rem;   /* lg:h-14 */
	}
}

@media (min-width: 1280px) {
	.okc-about-hero .okc-about-hero__logo {
		height: 4rem;     /* xl:h-16 */
	}
}

/* --------------------------------------------------------------------------
   Circle logo badge — .circle-logo-position + right-4 … 2xl:right-20 + z-40
   It deliberately hangs below the hero and overlaps whatever follows, exactly
   as it did in the legacy layout.
   -------------------------------------------------------------------------- */
.okc-about-hero .okc-about-hero__badge {
	position: absolute;        /* absolute */
	top: calc(70vh - 60px);    /* .circle-logo-position */
	right: 1rem;               /* right-4 */
	z-index: 40;               /* z-40 */
	line-height: 0;
}

@media (min-width: 640px) {
	.okc-about-hero .okc-about-hero__badge {
		right: 1.5rem;   /* sm:right-6 */
	}
}

@media (min-width: 768px) {
	.okc-about-hero .okc-about-hero__badge {
		right: 2rem;     /* md:right-8 */
	}
}

@media (min-width: 1024px) {
	.okc-about-hero .okc-about-hero__badge {
		right: 3rem;     /* lg:right-12 */
	}
}

@media (min-width: 1280px) {
	.okc-about-hero .okc-about-hero__badge {
		right: 4rem;     /* xl:right-16 */
	}
}

@media (min-width: 1536px) {
	.okc-about-hero .okc-about-hero__badge {
		right: 5rem;     /* 2xl:right-20 */
	}
}

/* The five width-banded top overrides from main.css, reproduced verbatim and
   in the original order. Note main.css's own quirks, kept as-is: the 501-600
   and 601-639 bands hold the same value, the 320-420 and 420-500 bands hold
   the same value, and nothing overrides the base value above 768px or below
   320px. */
@media only screen and (min-width: 640px) and (max-width: 768px) {
	.okc-about-hero .okc-about-hero__badge {
		top: calc(70vh - 100px);
	}
}

@media only screen and (min-width: 601px) and (max-width: 639px) {
	.okc-about-hero .okc-about-hero__badge {
		top: calc(70vh - 300px);
	}
}

@media only screen and (min-width: 501px) and (max-width: 600px) {
	.okc-about-hero .okc-about-hero__badge {
		top: calc(70vh - 300px);
	}
}

@media only screen and (min-width: 420px) and (max-width: 500px) {
	.okc-about-hero .okc-about-hero__badge {
		top: calc(70vh - 255px);
	}
}

@media only screen and (min-width: 320px) and (max-width: 420px) {
	.okc-about-hero .okc-about-hero__badge {
		top: calc(70vh - 255px);
	}
}

/* Badge image — square size ladder + slow spin */
.okc-about-hero .okc-about-hero__badge-img {
	display: block;
	width: 4rem;    /* w-16 */
	height: 4rem;   /* h-16 */
	animation: okc-spin-slow 20s linear infinite;   /* .animate-spin-slow */
}

.okc-about-hero--no-spin .okc-about-hero__badge-img {
	animation: none;
}

@media (min-width: 640px) {
	.okc-about-hero .okc-about-hero__badge-img {
		width: 5rem;    /* sm:w-20 */
		height: 5rem;   /* sm:h-20 */
	}
}

@media (min-width: 768px) {
	.okc-about-hero .okc-about-hero__badge-img {
		width: 7rem;    /* md:w-28 */
		height: 7rem;   /* md:h-28 */
	}
}

@media (min-width: 1024px) {
	.okc-about-hero .okc-about-hero__badge-img {
		width: 9rem;    /* lg:w-36 */
		height: 9rem;   /* lg:h-36 */
	}
}

@media (min-width: 1280px) {
	.okc-about-hero .okc-about-hero__badge-img {
		width: 11rem;   /* xl:w-44 */
		height: 11rem;  /* xl:h-44 */
	}
}

@media (min-width: 1536px) {
	.okc-about-hero .okc-about-hero__badge-img {
		width: 12rem;   /* 2xl:w-48 */
		height: 12rem;  /* 2xl:h-48 */
	}
}

/* okc-base.css gives every widget image a hover scale; on the spinning badge
   the running animation already wins the cascade (same as the legacy page),
   but the link wrapper must not add its own box. */
.okc-about-hero .okc-about-hero__badge-link {
	display: block;
}

/* --------------------------------------------------------------------------
   Elementor plumbing — the badge must be free to hang out of the widget box.
   -------------------------------------------------------------------------- */
.elementor-widget-okc-about-hero .elementor-widget-container {
	overflow: visible;
}

/* --------------------------------------------------------------------------
   Motion preference (not in the legacy CSS; opt-out only)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.okc-about-hero .okc-about-hero__bg,
	.okc-about-hero .okc-about-hero__badge-img,
	.okc-about-hero .okc-about-hero__eyebrow,
	.okc-about-hero .okc-about-hero__logo {
		animation: none;
	}
}