/*
 * Sandbox-only fallback stylesheet.
 *
 * This dev environment's copy of the free "Elementor" plugin is an
 * unbuilt source checkout — its compiled assets/css and assets/js bundles
 * (frontend.min.css, frontend.min.js, and all the per-widget
 * widget-*.min.css files for CORE widgets like Container, Icon Box,
 * Button, Heading, Social Icons, Accordion, Counter) were never generated,
 * and this sandbox has no network access to fetch a real release build.
 * Elementor Pro's OWN widgets (Form, Posts, Nav Menu) shipped as a real
 * built plugin and are unaffected.
 *
 * Without core's base CSS, every "container" element on the page (which is
 * everything — Elementor 4's whole layout system is built on
 * `elType: container`) has no `display: flex` at all, because Elementor
 * writes each container's flex settings as CSS custom properties
 * (`--display`, `--flex-direction`, `--gap`, etc.) that are meant to be
 * *read* by a base `.e-con { display: var(--display); }` rule living in
 * the missing file. This file reconstructs that base rule (and the other
 * widgets' default sizing) from Elementor's own SCSS source, which IS
 * present on disk even though the compiled output isn't.
 *
 * On a real production host with a normal Elementor install from
 * wordpress.org, this file is redundant (real rules already apply) and
 * harmless (same selectors, same values) — but delete it once real
 * assets/css/frontend.min.css is present, to avoid double-defining the
 * same rules for no reason.
 */

/* ---- Global resets (ported from assets/dev/scss/frontend/_global.scss) ----
 * The single most consequential rule missing from this checkout: real
 * Elementor scopes `box-sizing: border-box` to everything inside an
 * `.elementor` element. Without it, every widget/container that combines a
 * percentage or `auto` width with its own padding/border renders wider
 * than intended (content-box adds padding+border ON TOP of the specified
 * width) — a real, general-purpose bug behind more than one "spacing looks
 * off" symptom on this build, not just one specific element. */
.elementor,
.elementor *,
.elementor *::before,
.elementor *::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

[id] {
	scroll-margin-top: 90px;
}

.elementor a { box-shadow: none; text-decoration: none; }
.elementor hr { margin: 0; background-color: transparent; }
.elementor img { height: auto; max-width: 100%; border: none; border-radius: 0; box-shadow: none; }

/* ---- Container (the foundation: every section/row/column is one) ----
 * Ported directly from assets/dev/scss/frontend/_container.scss (present
 * as unbuilt source in this sandbox) rather than reconstructed from
 * scratch, after an earlier hand-rolled version of this block caused a
 * real bug: a "boxed" grid/flex container renders as TWO nested flex/grid
 * boxes (the outer `.e-con` wrapper + an inner `.e-con-inner` div), and
 * Elementor's own CSS deliberately gives the OUTER box exactly one
 * column/row (`.e-con-boxed.e-grid { grid-template-columns: 1fr; }`) so
 * the multi-column layout only applies to the INNER box. Without that
 * override, the outer wrapper also became an N-column grid with only one
 * real child (`.e-con-inner`), which grid then placed in just the first
 * 1/N of the row — every "boxed" N-column/row layout rendered squeezed
 * into the left fraction of the page instead of spanning full width. */
/* This block is the single most important fix in this file, added after a
 * real, hard-to-spot bug traced all the way from a mis-sized hero image
 * column: EVERY value below (`--padding-top`, `--align-items`, `--width`,
 * the grid template vars, all of it) is a plain INHERITED CSS custom
 * property. Real Elementor's own compiled CSS *re-declares* every single
 * one of them on every `.e-con`, to its own default, whether or not that
 * particular container needs a non-default value. Our first pass at this
 * file skipped that re-declaration step and only ever *read* these vars
 * with `var(--x, fallback)` — which looks equivalent but isn't: the
 * `fallback` only kicks in when a variable is completely unset, never when
 * it's inherited from an ancestor with a real value. The result: a hero
 * with 120px/96px top/bottom padding leaked that padding into every
 * nested row and column inside it that didn't set its own, and each level
 * of nesting added the leaked padding again — a two-column hero image row
 * was rendering ~430px taller than its content, purely from its
 * grandparent's padding being silently re-applied twice on the way down.
 * Re-declaring every var here, on every `.e-con`, is what stops that: a
 * nested container with no explicit override now genuinely gets the
 * *default*, not whatever its ancestor happened to set. */
.e-con {
	--position: relative;
	--width: 100%;
	--min-height: initial;
	--height: auto;
	--border-radius: 0;
	--z-index: revert;
	--overflow: visible;
	--padding-left: 10px;
	--padding-right: 10px;
	--padding-top: 10px;
	--padding-bottom: 10px;
	--margin-top: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	--margin-right: 0px;
	--border-style: none;
	--border-color: initial;
	--border-top-width: 0;
	--border-right-width: 0;
	--border-bottom-width: 0;
	--border-left-width: 0;
	--display: block;
	--flex-direction: row;
	--flex-wrap: nowrap;
	--justify-content: flex-start;
	--align-items: stretch;
	--align-content: normal;
	--row-gap: 20px;
	--column-gap: 20px;
	--e-con-grid-template-columns: repeat( 3, 1fr );
	--e-con-grid-template-rows: none;
	--grid-auto-flow: row;
	--justify-items: initial;
	--grid-justify-content: start;
	--grid-align-content: start;
	--text-align: initial;
	--content-width: min( 100%, var( --container-max-width, 1140px ) );
	position: var( --position );
	width: var( --width );
	min-width: 0;
	min-height: var( --min-height );
	height: var( --height );
	border-radius: var( --border-radius );
	z-index: var( --z-index );
	overflow: var( --overflow );
	padding-inline-start: var( --padding-left );
	padding-inline-end: var( --padding-right );
	margin-block-start: var( --margin-top );
	margin-block-end: var( --margin-bottom );
	border-style: var( --border-style );
	border-color: var( --border-color );
	border-top-width: var( --border-top-width );
	border-right-width: var( --border-right-width );
	border-bottom-width: var( --border-bottom-width );
	border-left-width: var( --border-left-width );
}

.e-con.e-parent,
.e-con-full {
	margin-inline-start: var( --margin-left, auto );
	margin-inline-end: var( --margin-right, auto );
	max-width: min( 100%, var( --width, 100% ) );
}

.e-con-boxed {
	max-width: var( --content-width );
	margin-inline-start: auto;
	margin-inline-end: auto;
	text-align: initial;
	gap: initial;
}

.e-con-full,
.e-con > .e-con-inner {
	text-align: var( --text-align, initial );
	padding-block-start: var( --padding-top, 10px );
	padding-block-end: var( --padding-bottom, 10px );
}

.e-con,
.e-con > .e-con-inner {
	display: var( --display, block );
}

.e-con-full.e-flex,
.e-con.e-flex > .e-con-inner {
	flex-direction: var( --flex-direction, row );
}

.e-con.e-grid {
	--grid-justify-content: start;
	--grid-align-content: start;
	--grid-auto-flow: row;
}

.e-con.e-grid,
.e-con.e-grid > .e-con-inner {
	grid-template-columns: var( --e-con-grid-template-columns, repeat( 3, 1fr ) );
	grid-template-rows: var( --e-con-grid-template-rows, none );
	justify-content: var( --grid-justify-content, start );
	align-content: var( --grid-align-content, start );
	grid-auto-flow: var( --grid-auto-flow, row );
	justify-items: var( --justify-items, initial );
	align-items: var( --align-items, stretch );
}

/* The outer "boxed" wrapper always collapses to a single cell — see the
 * comment at the top of this section. This is the fix. */
.e-con-boxed.e-flex {
	flex-direction: column;
	flex-wrap: initial;
	justify-content: initial;
	align-items: initial;
	align-content: initial;
}

.e-con-boxed.e-grid {
	justify-items: initial;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.e-con.e-flex > .e-con-inner {
	flex-wrap: var( --flex-wrap, nowrap );
	justify-content: var( --justify-content, flex-start );
	align-items: var( --align-items, stretch );
	align-content: var( --align-content, normal );
	flex-basis: initial;
	flex-grow: 1;
	flex-shrink: initial;
	align-self: initial;
}

/* Elementor's OWN real CSS (verified against `_container.scss`) only ever
 * applies `flex-wrap`/`justify-content`/`align-items`/`align-content`/`gap`
 * to `.e-flex > .e-con-inner` — and that inner div only exists for a
 * "Boxed" container (`container.php`'s `before_render()` prints it only
 * when `is_boxed_container()`). A "Full Width" flex container has no
 * `.e-con-inner` at all, so on a real production Elementor site too — not
 * just this sandbox — those settings silently do nothing on it. This
 * project uses several full-width flex rows on purpose (the header, and a
 * few full-bleed hero button rows) specifically so a colored/transparent
 * background can span edge-to-edge while the row itself still needs
 * centering/spacing/wrapping — so this rule carries the same real settings
 * over to the outer element for that case. */
.e-con-full.e-flex {
	flex-wrap: var( --flex-wrap, nowrap );
	justify-content: var( --justify-content, flex-start );
	align-items: var( --align-items, stretch );
	align-content: var( --align-content, normal );
	gap: var( --row-gap, 20px ) var( --column-gap, 20px );
}

.e-con.e-grid > .e-con-inner {
	justify-items: var( --justify-items, initial );
	align-items: var( --align-items, stretch );
}

.e-con > .e-con-inner {
	gap: var( --row-gap, 20px ) var( --column-gap, 20px );
	width: 100%;
	max-width: var( --content-width );
	margin: 0 auto;
	padding-inline-start: 0;
	padding-inline-end: 0;
	height: 100%;
}

.e-con.e-flex,
.e-con.e-grid {
	--gap: var( --widgets-spacing, 20px );
}

/* Elementor widgets sit one-per-container by default; without the real
 * bundle's reset, default WP margins on headings/paragraphs inside a
 * widget wrapper double up the (correct) container gap. */
.e-con .elementor-widget:where(:not(.elementor-widget-text-editor)) > .elementor-widget-container > :is(h1,h2,h3,h4,h5,h6,p) {
	margin: 0;
}

/* ---- Icon (Icon Box, Icon List, Social Icons all share this) ---- */
.elementor-icon {
	display: inline-block;
	line-height: 1;
	color: var( --e-icon-color, #6D7882 );
	font-size: 50px;
	text-align: center;
}
.elementor-icon i,
.elementor-icon svg {
	width: 1em;
	height: 1em;
	position: relative;
	display: block;
}
.elementor-view-stacked .elementor-icon {
	padding: .5em;
	background-color: #69727d;
	color: #fff;
	fill: #fff;
	border-radius: 50%;
}
.elementor-view-framed .elementor-icon {
	padding: .5em;
	border: 3px solid #69727d;
	background-color: transparent;
	border-radius: 50%;
}
.elementor-shape-square .elementor-icon { border-radius: 0; }
.elementor-shape-rounded .elementor-icon { border-radius: 10%; }

/* ---- Icon Box ---- */
.elementor-icon-box-wrapper {
	display: flex;
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}
.elementor-icon-box-icon { display: inline-block; flex: 0 0 auto; line-height: 0; }
.elementor-icon-box-content { width: 100%; }
.elementor-icon-box-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.elementor-icon-box-title a { color: inherit; text-decoration: none; }
.elementor-icon-box-description { margin: 0; color: #4a4a4a; }

/* ---- Button ---- */
.elementor-button {
	display: inline-block;
	line-height: 1;
	background-color: #69727d;
	font-size: 15px;
	padding: 12px 24px;
	border-radius: 3px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border: none;
	cursor: pointer;
}
.elementor-button:hover, .elementor-button:focus, .elementor-button:visited { color: #fff; text-decoration: none; }
.elementor-button-content-wrapper { display: flex; justify-content: center; align-items: center; gap: 5px; }
.elementor-size-xs .elementor-button, .elementor-button.elementor-size-xs { font-size: 13px; padding: 10px 20px; border-radius: 2px; }
.elementor-size-md .elementor-button, .elementor-button.elementor-size-md { font-size: 16px; padding: 15px 30px; border-radius: 4px; }
.elementor-size-lg .elementor-button, .elementor-button.elementor-size-lg { font-size: 18px; padding: 20px 40px; border-radius: 5px; }
.elementor-widget-button .elementor-button.elementor-button-outline,
.elementor-button-type-outline .elementor-button {
	background-color: transparent !important;
	border: 2px solid currentColor;
	color: #221D1B;
}

/* ---- Heading ---- */
.elementor-heading-title { padding: 0; margin: 0; line-height: 1.3; }
.elementor-heading-title.elementor-size-small { font-size: 15px; }
.elementor-heading-title.elementor-size-medium { font-size: 19px; }
.elementor-heading-title.elementor-size-large { font-size: 29px; }
.elementor-heading-title.elementor-size-xl { font-size: 39px; }
.elementor-heading-title.elementor-size-xxl { font-size: 59px; }
/* These base sizes are the real Elementor defaults (verified against the
 * kit's own typography scale) but ship with no responsive scaling built
 * in — each page's own responsive font-size controls are what normally
 * scale them down per-breakpoint, and this theme deliberately doesn't set
 * those per-heading, so hero H1s were rendering at their full desktop size
 * on a 380px phone. These two breakpoints keep every heading legible and
 * well-proportioned without needing a per-page override. */
@media (max-width: 1024px) {
	.elementor-heading-title.elementor-size-xxl { font-size: 44px; }
	.elementor-heading-title.elementor-size-xl { font-size: 32px; }
}
@media (max-width: 600px) {
	.elementor-heading-title.elementor-size-xxl { font-size: 32px; }
	.elementor-heading-title.elementor-size-xl { font-size: 27px; }
	.elementor-heading-title.elementor-size-large { font-size: 24px; }
}

/* ---- Text editor ---- */
.elementor-widget-text-editor { line-height: 1.7; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ---- Social icons ----
 * Ported from assets/dev/scss/global/global.scss (.elementor-screen-only)
 * and assets/dev/scss/frontend/widgets/social-icons.scss + _grid.scss
 * (.elementor-grid). Without these, the visually-hidden accessibility label
 * span ("Instagram", "Youtube"...) renders inline on top of the icon glyph
 * instead of being clipped off-screen, and the wrapper has no grid/gap so
 * icons overlap each other. */
.elementor-screen-only {
	position: absolute;
	top: -10000em;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
}
.elementor-social-icons-wrapper.elementor-grid {
	display: inline-grid;
	grid-template-columns: repeat( 3, auto );
	grid-column-gap: var( --grid-column-gap, 5px );
	grid-row-gap: var( --grid-row-gap, 5px );
	justify-content: var( --justify-content, center );
	justify-items: var( --justify-content, center );
}
.elementor-grid-item { min-width: 0; }
.elementor-icon.elementor-social-icon {
	font-size: var( --icon-size, 25px );
	line-height: var( --icon-size, 25px );
	width: calc( var( --icon-size, 25px ) + ( 2 * var( --icon-padding, 0.5em ) ) );
	height: calc( var( --icon-size, 25px ) + ( 2 * var( --icon-padding, 0.5em ) ) );
}
.elementor-social-icon {
	--e-social-icon-icon-color: #fff;
	display: inline-flex;
	background-color: #69727d;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 50%;
	cursor: pointer;
}
.elementor-social-icon i, .elementor-social-icon svg { color: var(--e-social-icon-icon-color); fill: var(--e-social-icon-icon-color); width: 0.6em; height: 0.6em; }
.elementor-social-icon-instagram { background: linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d); }
.elementor-social-icon-youtube { background-color: #cd201f; }
.elementor-social-icon-tiktok { background-color: #010101; }
.elementor-social-icon-facebook { background-color: #3b5998; }

/* ---- Forms (Elementor Pro's Form widget leans on core's base field
 * styling — widget-form.min.css only carries multi-step/select-caret
 * extras, so the base .elementor-field-group/.elementor-field-textual
 * rules below (ported from assets/dev/scss/frontend/_forms.scss) are
 * still required here). ---- */
.elementor-form-fields-wrapper { display: flex; flex-wrap: wrap; }
.elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group > input,
.elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group > textarea,
.elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group > .elementor-select-wrapper {
	flex-basis: 100%;
	max-width: 100%;
}
.elementor-field-group { display: flex; flex-wrap: wrap; align-items: center; margin-block-end: 15px; }
.elementor-field-group.elementor-column { padding: 0 5px; }
.elementor-field-group.elementor-col-100 { width: 100%; }
.elementor-field-label { cursor: pointer; display: block; margin-block-end: 5px; }
.elementor-field-textual {
	width: 100%;
	max-width: 100%;
	flex-grow: 1;
	line-height: 1.4;
	font-size: 15px;
	min-height: 40px;
	padding: 5px 14px;
	border-radius: 3px;
	border: 1px solid #d5d8dc;
	background-color: #fff;
	color: #3f444b;
	vertical-align: middle;
}
textarea.elementor-field-textual { min-height: 120px; }
.elementor-select-wrapper { display: flex; position: relative; width: 100%; }
.elementor-select-wrapper select { width: 100%; appearance: auto; }
.elementor-field-subgroup { display: flex; flex-wrap: wrap; }
.elementor-field-subgroup .elementor-field-option { flex-basis: 100%; }
.elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option { flex-basis: auto; padding-inline-end: 10px; }
.elementor-field-type-checkbox .elementor-field-subgroup .elementor-field-option input,
.elementor-field-type-radio .elementor-field-subgroup .elementor-field-option input {
	display: inline-block; width: auto; margin-inline-end: 6px;
}
.elementor-form .elementor-button { border: none; }
.elementor-form .elementor-button-content-wrapper { display: flex; justify-content: center; }
.elementor-message { margin: 10px 0; font-size: 0.95em; }
.elementor-message-danger { color: #a92121; }
.elementor-message-success, .form-message-success { color: #2c8a3d; }

/* ---- Accordion ---- */
.elementor-accordion { text-align: start; }
.elementor-accordion-item { border: 1px solid #d5d8dc; }
.elementor-accordion-item + .elementor-accordion-item { border-block-start: none; }
.elementor-tab-title {
	margin: 0;
	padding: 15px 20px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	outline: none;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.elementor-tab-title::-webkit-details-marker { display: none; }
.elementor-tab-title .elementor-accordion-icon { display: inline-block; width: 1.2em; flex: 0 0 auto; }
.elementor-tab-title .elementor-accordion-icon svg { width: 1em; height: 1em; }
.elementor-tab-title .elementor-accordion-icon-opened { display: none; }
.elementor-tab-title.elementor-active .elementor-accordion-icon-closed { display: none; }
.elementor-tab-title.elementor-active .elementor-accordion-icon-opened { display: block; }
.elementor-tab-content {
	display: none;
	padding: 5px 20px 20px;
	border-block-start: 1px solid #d5d8dc;
}
.elementor-tab-content.jjh-open { display: block; }

/* ---- Counter ---- */
.elementor-counter { text-align: center; }
.elementor-counter-number-wrapper { font-size: 40px; font-weight: 700; line-height: 1.2; color: #802525; }
.elementor-counter-title { margin-top: 6px; font-size: 15px; color: #4a4a4a; }

/* ---- Spacer ---- */
.elementor-spacer-inner { height: var( --spacer-size, 40px ); }

/* ---- Image ---- */
.elementor-image img { height: auto; max-width: 100%; display: block; }
/* Elementor's placeholder graphic has a very tall intrinsic aspect ratio;
 * cap it so placeholder photos don't dominate the page before real assets
 * are in place. */
.elementor-widget-image img { max-height: 420px; width: 100%; object-fit: cover; border-radius: 4px; }
/* `width: 100%` above is a percentage of the widget's own wrapper div, not
 * of the page — and a flex/grid column that isn't `align-items: stretch`
 * (several of ours use "center", inherited from an ancestor section) sizes
 * that wrapper by shrink-to-fit, i.e. by the IMAGE's own measured size. For
 * a lazy-loaded placeholder image with no width/height attributes, that
 * measured size is 0 until the browser actually loads it, so the whole
 * column can render at 0 width — confirmed on the "As Seen With" row on
 * mobile, real and reproducible, not just a screenshot-timing fluke.
 * `align-self: stretch` sidesteps the content-dependent sizing entirely:
 * the column fills its track's width immediately, independent of whether
 * the image has loaded — which is also just the correct default for a
 * widget whose whole job is to fill and cover its box. */
.elementor-widget-image { align-self: stretch; }

/* ---- General body baseline (the missing bundle also carries global
 * typography resets applied via each page's Kit CSS custom properties).
 * `:where(...)` drops these two rules to zero specificity ON PURPOSE: once
 * jjh_setup_brand_kit() (inc/setup.php) has run, Elementor's own real
 * Kit-generated CSS sets a genuine `body{font-family/color}` and
 * `a{color}` from Site Settings → Theme Style Typography — a real
 * `body`/`a` selector always outranks a zero-specificity `:where()` one
 * regardless of source order, so this is purely a pre-Kit-setup /
 * sandbox-missing-core-JS fallback and can never fight the real,
 * dashboard-editable typography once it exists. */
:where(body) { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #2B2420; line-height: 1.6; }
:where(a) { color: #802525; }

/* =========================================================================
 * DESIGN SYSTEM — premium redesign pass
 *
 * Everything below is new, additive styling on top of the base Elementor
 * reconstruction above. None of it changes what a widget IS in the editor
 * (still a plain Button/Container/Icon Box widget, still fully editable
 * with real Elementor controls) — it only changes how those same widgets
 * look, via the `_css_classes`/`css_classes` hooks set in inc/setup.php
 * (jjh-btn, jjh-card, jjh-hero, jjh-header-band, etc.) plus a few Elementor
 * structural classes that don't need a custom class to target (the nav
 * menu's own current-page/dropdown markup).
 *
 * Visual language: a soft "glass + clay" hybrid — frosted, translucent,
 * blurred surfaces for anything that floats above content (the sticky
 * header, the mobile nav panel), paired with soft-elevated, gently
 * rounded, subtly 3D "clay" cards for anything that sits IN the content
 * (icon boxes, horse cards, ways-to-partner). Brand color (dark red) is
 * used sparingly and intentionally: button fills, the nav's active-page
 * indicator, hover accents, and card icon color — never as a wash across
 * large areas, and never green anywhere.
 * ---------------------------------------------------------------------- */

:root {
	--jjh-red: #802525;
	--jjh-red-dark: #5E1B1B;
	--jjh-black: #1C1917;
	--jjh-gold: #B98A31;
	--jjh-cream: #FBF6EE;
	--jjh-sand: #F6ECDD;
	--jjh-ink: #2B2420;
	--jjh-muted: #9C8D77;
	--jjh-radius: 20px;
	--jjh-radius-sm: 14px;
	/* Claymorphism pair: a light inset on the top-left edge (simulated light
	 * source) plus a soft dark inset on the bottom-right (simulated depth),
	 * layered on top of an outer lift shadow. That combination — not just a
	 * rounded corner and a soft shadow — is what actually reads as
	 * "puffy/embossed clay" rather than a plain elevated card. Neutral
	 * white/black-based so the same pair works on light card surfaces AND
	 * on saturated button fills (red/gold/ink) without per-color tuning. */
	--jjh-clay-highlight: inset 2px 2px 4px rgba(255, 255, 255, 0.5);
	--jjh-clay-shade: inset -3px -3px 8px rgba(28, 25, 23, 0.10);
	--jjh-shadow-card: 0 1px 2px rgba(28, 25, 23, 0.04), 0 12px 28px -12px rgba(28, 25, 23, 0.16), inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -3px -3px 8px rgba(28, 25, 23, 0.10);
	--jjh-shadow-card-hover: 0 4px 10px rgba(28, 25, 23, 0.06), 0 22px 40px -14px rgba(128, 37, 37, 0.22), inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -3px -3px 8px rgba(28, 25, 23, 0.10);
	--jjh-shadow-glass: 0 8px 30px rgba(28, 25, 23, 0.10);
}

/* Respect reduced-motion preferences before anything else below. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---- Subtle entrance animation ----
 * A gentle fade-up on load for hero content and cards — CSS-only (no
 * IntersectionObserver/JS dependency), so it plays consistently everywhere
 * without relying on Elementor's own scroll-triggered animation JS bundle. */
@keyframes jjh-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.jjh-hero > .e-con-inner > .elementor-widget,
.jjh-hero > .e-con-inner > .e-con {
	animation: jjh-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.jjh-hero > .e-con-inner > .elementor-widget:nth-child(1) { animation-delay: 0.02s; }
.jjh-hero > .e-con-inner > .elementor-widget:nth-child(2) { animation-delay: 0.08s; }
.jjh-hero > .e-con-inner > .elementor-widget:nth-child(3) { animation-delay: 0.14s; }
.jjh-hero > .e-con-inner > .elementor-widget:nth-child(4),
.jjh-hero > .e-con-inner > .e-con { animation-delay: 0.2s; }
.jjh-card { animation: jjh-fade-up 0.5s ease-out both; }

/* ---- Hero ----
 * A soft gradient wash plus two blurred color blobs (pure CSS, no images)
 * for depth, instead of a flat single-color band. `overflow: hidden` on
 * the hero clips the blobs so they never spill into the next section. */
.jjh-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 60% 50% at 15% -10%, rgba(128, 37, 37, 0.10), transparent 60%),
		radial-gradient(ellipse 55% 45% at 100% 10%, rgba(185, 138, 49, 0.14), transparent 60%),
		linear-gradient(180deg, #FBF6EE 0%, #FFFFFF 100%);
}
.jjh-hero::before,
.jjh-hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	z-index: 0;
	pointer-events: none;
}
.jjh-hero::before { width: 320px; height: 320px; top: -120px; left: -80px; background: rgba(128, 37, 37, 0.10); }
.jjh-hero::after { width: 380px; height: 380px; bottom: -160px; right: -100px; background: rgba(185, 138, 49, 0.16); }
.jjh-hero > .e-con-inner { position: relative; z-index: 1; }
@media (max-width: 767px) {
	/* The 120px/96px top/bottom hero padding (set per-page in inc/setup.php
	 * for desktop breathing room) is excessive on a phone, pushing the H1
	 * far down the viewport with nothing above it. Elementor writes each
	 * side's padding as a `--padding-*` custom property that the base
	 * `.e-con` rule reads — overriding those variables here (rather than
	 * `padding` itself) keeps this working with the real engine on a
	 * production install too, not just this fallback. */
	.jjh-hero { --padding-top: 64px; --padding-bottom: 56px; }
}
.jjh-hero-kicker {
	display: inline-block;
	margin: 0 auto 14px;
	padding: 6px 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jjh-red);
	background: rgba(128, 37, 37, 0.08);
	border: 1px solid rgba(128, 37, 37, 0.16);
	border-radius: 999px;
}

/* ---- Closing CTA band (jjh_eb_cta_band()) ----
 * REAL PROBLEM this fixes: this band sits directly above the footer on
 * every single page (it's the sitewide "closing CTA" pattern), and both
 * were the exact same flat #1C1917 with no border, gap, or contrast
 * between them — reading as one undifferentiated black slab, not two
 * intentional sections. Rather than just adding a divider line, the band
 * moves to the same warm gradient-wash + soft color-blob treatment as
 * every hero (`.jjh-hero` above) — lighter, and consistent with the rest
 * of the site's "never flat" premium treatment — so the dark footer that
 * follows now reads as a clear, deliberate change of section instead of
 * more of the same black. */
.jjh-pillars-section-wrap {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

.jjh-pillars-header {
	text-align: center;
	margin-bottom: 44px;
}

.jjh-pillars-title {
	font-family: var(--jjh-font-heading) !important;
	color: #1C1917 !important;
	font-size: clamp(2rem, 3.8vw, 2.75rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
	line-height: 1.2 !important;
	margin: 0 auto 12px !important;
}

.jjh-pillars-lead {
	color: #615546 !important;
	font-size: 1.1rem !important;
	line-height: 1.65 !important;
	max-width: 64ch !important;
	margin: 0 auto !important;
}

.jjh-pillars-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-bottom: 48px;
}

@media (max-width: 1100px) {
	.jjh-pillars-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.jjh-pillars-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

.jjh-pillar-card {
	background: #FFFFFF !important;
	border: 1px solid rgba(28, 25, 23, 0.08) !important;
	border-radius: 20px !important;
	padding: 28px 24px !important;
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.jjh-pillar-card:hover {
	transform: translateY(-6px) !important;
	border-color: rgba(185, 138, 49, 0.35) !important;
	box-shadow: 0 16px 36px -8px rgba(128, 37, 37, 0.12), 0 4px 12px rgba(185, 138, 49, 0.08) !important;
}

.jjh-pillar-featured-card {
	background: linear-gradient(180deg, #FFFFFF 0%, #FAF5EE 100%) !important;
	border: 1.5px solid rgba(185, 138, 49, 0.35) !important;
}

.jjh-pillar-card {
	background: #FFFFFF !important;
	border: 1px solid rgba(185, 138, 49, 0.2) !important;
	border-radius: 20px !important;
	padding: 28px 24px 24px !important;
	box-shadow: 0 4px 20px rgba(28, 25, 23, 0.04) !important;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	position: relative !important;
}

.jjh-pillar-card:hover {
	transform: translateY(-8px) !important;
	border-color: rgba(185, 138, 49, 0.5) !important;
	box-shadow: 0 16px 36px rgba(28, 25, 23, 0.1) !important;
}

.jjh-pillar-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	gap: 10px;
}

.jjh-pillar-icon-box {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #FAF3E8;
	color: var(--jjh-red);
	border: 1px solid rgba(185, 138, 49, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(28, 25, 23, 0.04);
}

.jjh-icon-accent {
	background: #FAF2DF;
	color: #9A6F1A;
	border-color: rgba(185, 138, 49, 0.35);
}

.jjh-pillar-card:hover .jjh-pillar-icon-box {
	background: var(--jjh-red);
	color: #FFFFFF;
	border-color: var(--jjh-red);
	transform: scale(1.08) translateY(-2px);
	box-shadow: 0 6px 14px rgba(128, 37, 37, 0.25);
}

.jjh-pillar-card:hover .jjh-icon-accent {
	background: #B98A31;
	color: #FFFFFF;
	border-color: #B98A31;
	transform: scale(1.08) translateY(-2px);
	box-shadow: 0 6px 14px rgba(185, 138, 49, 0.3);
}

.jjh-pillar-tag {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	color: #7A6F62;
	background: rgba(28, 25, 23, 0.04);
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(28, 25, 23, 0.08);
	white-space: nowrap !important;
	text-transform: uppercase;
	line-height: 1.2;
}

.jjh-tag-gold {
	color: #8C6418;
	background: rgba(185, 138, 49, 0.1);
	border-color: rgba(185, 138, 49, 0.25);
}

.jjh-pillar-heading {
	font-family: var(--jjh-font-heading) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	color: #1C1917 !important;
	line-height: 1.3 !important;
	margin: 0 0 10px !important;
}

.jjh-pillar-desc {
	color: #615546 !important;
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	margin: 0 0 16px !important;
	flex-grow: 1;
}

.jjh-pillar-perks {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 20px !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 1px dashed rgba(28, 25, 23, 0.1);
	padding-top: 14px !important;
}

.jjh-pillar-perks li {
	font-size: 12.5px;
	color: #4A3E30;
	display: flex;
	align-items: center;
	gap: 8px;
}

.jjh-perk-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(185, 138, 49, 0.12);
	color: #B98A31;
	flex-shrink: 0;
}

.jjh-pillar-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: var(--jjh-red) !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	text-decoration: none !important;
	padding-top: 12px;
	border-top: 1px solid rgba(28, 25, 23, 0.06);
	transition: all 0.25s ease !important;
	margin-top: auto !important;
}

.jjh-pillar-link svg {
	transition: transform 0.25s ease;
}

.jjh-pillar-link:hover {
	color: #A32D2D !important;
}

.jjh-pillar-link:hover svg {
	transform: translateX(4px);
}

/* Dedicated Cowgirl Armor Spotlight Banner */
.jjh-cowgirl-armor-home-banner {
	background: linear-gradient(135deg, #231E1A 0%, #171310 100%) !important;
	border: 1px solid rgba(212, 175, 55, 0.3) !important;
	border-radius: 24px !important;
	padding: 44px 40px !important;
	color: #FFFFFF !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.jjh-cowgirl-armor-home-banner::before {
	content: '';
	position: absolute;
	top: -100px;
	right: -100px;
	width: 350px;
	height: 350px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(185, 138, 49, 0.16) 0%, transparent 70%);
	pointer-events: none;
}

.jjh-cga-banner-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	align-items: center;
	position: relative;
	z-index: 2;
}

@media (max-width: 900px) {
	.jjh-cowgirl-armor-home-banner {
		padding: 32px 24px !important;
	}
	.jjh-cga-banner-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

.jjh-cga-banner-title {
	font-family: var(--jjh-font-heading) !important;
	font-size: clamp(1.85rem, 3.2vw, 2.35rem) !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin: 0 0 12px !important;
	line-height: 1.25 !important;
	letter-spacing: -0.015em !important;
}

.jjh-cga-banner-text {
	color: #C9BFAF !important;
	font-size: 14.5px !important;
	line-height: 1.65 !important;
	margin: 0 0 20px !important;
	max-width: 52ch !important;
}

.jjh-cga-perks-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.jjh-cga-perk-pill {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 600;
	color: #FAF6EF;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 6px 14px;
	border-radius: 999px;
}

.jjh-cga-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.jjh-cga-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	height: 46px !important;
	padding: 0 24px !important;
	border-radius: 999px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.jjh-cga-btn-primary {
	background: linear-gradient(135deg, #802525 0%, #631B1B 100%) !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(212, 175, 55, 0.4) !important;
	box-shadow: 0 6px 18px rgba(128, 37, 37, 0.35) !important;
}

.jjh-cga-btn-primary:hover {
	background: linear-gradient(135deg, #9C2E2E 0%, #7D2121 100%) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 24px -2px rgba(128, 37, 37, 0.5) !important;
}

.jjh-cga-btn-store {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #FAF6EF !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(8px) !important;
}

.jjh-cga-btn-store:hover {
	background: rgba(255, 255, 255, 0.16) !important;
	border-color: rgba(212, 175, 55, 0.7) !important;
	color: #D4AF37 !important;
	transform: translateY(-2px) !important;
}

.jjh-cga-banner-art {
	display: flex;
	justify-content: center;
}

/* Fixed-size frame that fits an image of any ratio: the image is shown
   whole (contain), and a blurred, darkened copy of the same image fills the
   leftover space. The label sits below the image, never on top of it. */
.jjh-cga-art-frame {
	position: relative;
	width: 100%;
	max-width: 380px;
	height: 240px;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(212, 175, 55, 0.35);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
	background: #171310;
	display: flex;
	flex-direction: column;
}

.jjh-cga-art-frame::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: var(--jjh-cga-art, none) center / cover no-repeat;
	filter: blur(22px) brightness(0.45) saturate(1.15);
	z-index: 0;
}

.jjh-cga-art-stage {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 14px 10px;
}

.jjh-cga-art-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 8px;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.jjh-cga-art-frame:hover .jjh-cga-art-img {
	transform: scale(1.03);
}

.jjh-cga-art-tag {
	position: relative;
	z-index: 1;
	flex: none;
	margin: 0 12px 12px;
	background: rgba(23, 19, 16, 0.85);
	backdrop-filter: blur(12px);
	padding: 10px 16px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.jjh-cga-tag-brand {
	font-family: var(--jjh-font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: #FFFFFF;
}

.jjh-cga-tag-sub {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #D4AF37;
	background: rgba(185, 138, 49, 0.15);
	padding: 3px 8px;
	border-radius: 999px;
}

/* ==========================================================================
   Luxury Direct Channels & Social Hub (Contact Page)
   ========================================================================== */
.jjh-contact-channels-wrap {
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
}

.jjh-contact-channels-header {
	text-align: center;
	margin-bottom: 44px;
}

.jjh-contact-channels-title {
	font-family: var(--jjh-font-heading) !important;
	font-size: clamp(2rem, 3.8vw, 2.75rem) !important;
	font-weight: 700 !important;
	color: #1C1917 !important;
	line-height: 1.2 !important;
	margin: 0 0 12px !important;
}

.jjh-contact-channels-lead {
	color: #615546 !important;
	font-size: 15.5px !important;
	line-height: 1.6 !important;
	max-width: 680px;
	margin: 0 auto !important;
}

.jjh-contact-channels-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-bottom: 32px;
}

@media (max-width: 1024px) {
	.jjh-contact-channels-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 640px) {
	.jjh-contact-channels-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

.jjh-channel-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-radius: 20px;
	padding: 26px 22px 22px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 18px rgba(28, 25, 23, 0.04);
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.jjh-channel-card:hover {
	transform: translateY(-6px);
	border-color: rgba(185, 138, 49, 0.5);
	box-shadow: 0 16px 32px rgba(28, 25, 23, 0.09);
}

.jjh-channel-card-featured {
	background: linear-gradient(180deg, #FFFFFF 0%, #FAF5EE 100%);
	border: 1.5px solid rgba(185, 138, 49, 0.35);
}

.jjh-channel-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.jjh-channel-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 8px rgba(28, 25, 23, 0.06);
}

.jjh-channel-card:hover .jjh-channel-icon {
	transform: scale(1.08) translateY(-2px);
}

.jjh-ch-instagram {
	background: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
	color: #FFFFFF;
}

.jjh-ch-youtube {
	background: #FF0000;
	color: #FFFFFF;
}

.jjh-ch-podcast {
	background: #1DB954;
	color: #FFFFFF;
}

.jjh-ch-armor {
	background: linear-gradient(135deg, #B98A31 0%, #8C6418 100%);
	color: #FFFFFF;
}

.jjh-channel-badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #7A6F62;
	background: rgba(28, 25, 23, 0.04);
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(28, 25, 23, 0.08);
	text-transform: uppercase;
}

.jjh-channel-name {
	font-family: var(--jjh-font-heading) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #1C1917 !important;
	line-height: 1.3 !important;
	margin: 0 0 8px !important;
}

.jjh-channel-desc {
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: #615546 !important;
	margin: 0 0 18px !important;
	flex-grow: 1;
}

.jjh-channel-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: var(--jjh-red) !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	text-decoration: none !important;
	padding-top: 12px;
	border-top: 1px solid rgba(28, 25, 23, 0.06);
	transition: all 0.25s ease !important;
	margin-top: auto !important;
}

.jjh-channel-link svg {
	transition: transform 0.25s ease;
}

.jjh-channel-link:hover {
	color: #A32D2D !important;
}

.jjh-channel-link:hover svg {
	transform: translateX(4px);
}

/* Advisory turnaround banner */
.jjh-contact-advisory-banner {
	background: #F7EFE2;
	border: 1px solid rgba(185, 138, 49, 0.3);
	border-radius: 16px;
	padding: 18px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: 0 2px 10px rgba(28, 25, 23, 0.03);
}

.jjh-advisory-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(185, 138, 49, 0.15);
	color: #9A6F1A;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.jjh-advisory-text {
	font-size: 13.5px;
	color: #4A3E30;
	line-height: 1.5;
}

.jjh-advisory-text strong {
	color: #1C1917;
}

@media (max-width: 640px) {
	.jjh-contact-advisory-banner {
		flex-direction: column;
		text-align: center;
		padding: 16px;
	}
}

.jjh-cta-band,
.jjh-luxury-light-cta {
	position: relative !important;
	overflow: hidden !important;
	background:
		radial-gradient(ellipse 60% 70% at 15% 10%, rgba(128, 37, 37, 0.08), transparent 60%),
		radial-gradient(ellipse 55% 65% at 85% 90%, rgba(185, 138, 49, 0.14), transparent 60%),
		linear-gradient(180deg, #FAF6EF 0%, #F5EFE4 100%) !important;
	padding: 48px 24px !important;
	border-top: 1px solid rgba(185, 138, 49, 0.22) !important;
	border-bottom: 1px solid rgba(185, 138, 49, 0.15) !important;
	text-align: center !important;
}
.jjh-cta-band::before,
.jjh-cta-band::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	z-index: 0;
	pointer-events: none;
}
.jjh-cta-band::before { width: 240px; height: 240px; top: -60px; right: 8%; background: radial-gradient(circle, rgba(128, 37, 37, 0.07) 0%, transparent 70%); }
.jjh-cta-band::after { width: 260px; height: 260px; bottom: -70px; left: 8%; background: radial-gradient(circle, rgba(185, 138, 49, 0.1) 0%, transparent 70%); }
.jjh-cta-band > .e-con-inner,
.jjh-cta-band .e-con-inner { position: relative; z-index: 2; }
.jjh-cta-badge-wrap { display: flex; justify-content: center; margin-bottom: 0.5rem !important; }
.jjh-cta-kicker {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 4px 14px !important;
	background: rgba(128, 37, 37, 0.06) !important;
	border: 1px solid rgba(128, 37, 37, 0.2) !important;
	border-radius: 999px !important;
	color: var(--jjh-red) !important;
	font-weight: 700 !important;
	font-size: 11px !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
}
.jjh-cta-kicker .jjh-star { color: #B98A31 !important; font-size: 10px !important; }
.jjh-cta-band .jjh-cta-title,
.jjh-cta-band h2 {
	font-family: var(--jjh-font-heading) !important;
	color: #1C1917 !important;
	font-size: clamp(1.65rem, 3.2vw, 2.25rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.02em !important;
	margin: 0 auto !important;
}
.jjh-cta-lead {
	color: #615546 !important;
	font-size: 1.025rem !important;
	line-height: 1.55 !important;
	max-width: 58ch !important;
	margin: 0.35rem auto 0 !important;
}
.jjh-cta-band .elementor-button {
	font-weight: 600 !important;
	border-radius: 999px !important;
	padding: 11px 26px !important;
	font-size: 13.5px !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.jjh-cta-band .jjh-btn-primary .elementor-button,
.jjh-cta-band .elementor-button[style*="#802525"],
.jjh-cta-band .elementor-button[style*="#B98A31"] {
	background: linear-gradient(135deg, #802525 0%, #631B1B 100%) !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(212, 175, 55, 0.4) !important;
}
.jjh-cta-band .jjh-btn-outline .elementor-button {
	background: rgba(255, 255, 255, 0.75) !important;
	color: #1C1917 !important;
	border: 1.5px solid rgba(28, 25, 23, 0.2) !important;
}

/* ---- Footer (jjh_footer_content()) ----
 * Was flat #1C1917 — identical to the CTA band above it, with nothing
 * marking where one section ends and the next begins. Now that the CTA
 * band above is light (see .jjh-cta-band), the color change alone creates
 * separation, but a footer this size still read as one flat, slightly
 * lifeless block on its own. Two changes: a thin brand-gradient line right
 * at the seam, so the transition reads as designed rather than accidental;
 * and a subtle top-to-bottom gradient instead of a single flat color, for
 * the same "never flat" depth every card and hero on this site already
 * has. Link colors are brightened too — the sitewide default link color
 * (`--jjh-red`, #802525) is tuned for red-on-cream and goes muddy on
 * near-black; a lighter warm red keeps the Quick Links list legible and
 * on-brand instead of sinking into the background. */
.jjh-footer-band {
	position: relative;
	background: linear-gradient(180deg, #1D1814 0%, #15120F 60%, #100D0B 100%) !important;
	border-top: 1px solid rgba(212, 175, 55, 0.22) !important;
}
.jjh-footer-band::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.65) 50%, transparent 100%);
	pointer-events: none;
}
.jjh-footer-band a {
	color: #A89B8C;
	transition: color 0.28s cubic-bezier(0.25, 1, 0.5, 1), transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), text-shadow 0.28s cubic-bezier(0.25, 1, 0.5, 1);
}
.jjh-footer-band a:hover,
.jjh-footer-band a:focus {
	color: #FFFFFF !important;
	text-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}
.jjh-footer-band .elementor-item-active { color: #FFFFFF !important; }
.jjh-footer-band .elementor-item-active::after { background-color: var(--jjh-gold) !important; }

/* ---- Buttons (.jjh-btn — see jjh_eb_button_style() in inc/setup.php) ----
 * `_css_classes` lands on the WIDGET WRAPPER div (.elementor-widget-button),
 * not on the inner `<a class="elementor-button">` itself — Elementor's own
 * widget markup, not something to fight — so every rule here targets the
 * real button as a DESCENDANT of the jjh-btn-* wrapper class, never a
 * compound `.jjh-btn.elementor-button` (which matches nothing, since no
 * single element carries both classes). */
.jjh-btn .elementor-button {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
	/* Same clay highlight/shade pair as the cards (see :root), so filled
	 * pill buttons get the same puffy/embossed surface instead of reading
	 * as a flat color chip. */
	box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06), var(--jjh-clay-highlight), var(--jjh-clay-shade);
}
.jjh-btn:hover .elementor-button {
	transform: translateY(-2px);
}
.jjh-btn-primary:hover .elementor-button { box-shadow: 0 10px 22px -6px rgba(128, 37, 37, 0.45), var(--jjh-clay-highlight), var(--jjh-clay-shade); }
.jjh-btn-dark:hover .elementor-button { box-shadow: 0 10px 22px -6px rgba(28, 25, 23, 0.4), var(--jjh-clay-highlight), var(--jjh-clay-shade); }
.jjh-btn-accent:hover .elementor-button { box-shadow: 0 10px 22px -6px rgba(185, 138, 49, 0.45), var(--jjh-clay-highlight), var(--jjh-clay-shade); }
.jjh-btn-outline .elementor-button,
.jjh-btn-ghost-white .elementor-button {
	/* Deliberately excluded from the clay treatment: these are flat,
	 * border-only buttons on purpose (secondary emphasis, or sitting on a
	 * photo/dark background for ghost-white) — an inset shadow needs an
	 * opaque fill to read as "puffy" against, and would just look like a
	 * smudge on a transparent one. */
	background-color: transparent !important;
	border: 2px solid currentColor;
	box-shadow: none;
}
.jjh-btn-outline:hover .elementor-button { background-color: rgba(128, 37, 37, 0.06) !important; }
.jjh-btn-ghost-white:hover .elementor-button { background-color: rgba(255, 255, 255, 0.12) !important; }

/* ---- Cards (.jjh-card — see jjh_eb_card() in inc/setup.php) ----
 * The shared elevated card used for every card grid on the site. `height:
 * 100%` is what makes cards in the same row match height even when their
 * content doesn't (paired with `grid_align_items=>'stretch'` set on the
 * grid/row container in PHP, which is what makes each card's own grid
 * TRACK equal height in the first place — this rule then fills that
 * track). A real claymorphism surface: warm off-white gradient, gently
 * rounded corners, and a layered shadow stack — a tight outer shadow for
 * edge definition, a soft wide outer shadow for lift, PLUS the
 * --jjh-clay-highlight/--jjh-clay-shade inset pair for the puffy, embossed
 * "pressed into clay" look (not just a rounded card with a drop shadow). */
.jjh-card {
	height: 100%;
}

/* ---- Logo wall (.jjh-logo-row / .jjh-logo-tile — see jjh_eb_logo_strip()
 * in inc/setup.php) ----
 * Used for every brand/sponsor/media logo showcase on the site (homepage
 * "As Seen With", Rodeo's "Sponsors", Partnerships' "Brands Worked With").
 * Before this, each logo was a bare Image widget sitting straight on the
 * page background — Elementor's own placeholder photo shown at full
 * saturation, no shared size, no card — which read as an unfinished page
 * rather than a deliberate "logos coming soon" moment.
 *
 * Each tile is a lighter sibling of .jjh-card: same warm gradient surface
 * and rounded corners, but a flatter single shadow (a wall of many small
 * tiles doesn't want the full clay/embossed treatment every hero card
 * gets — that would compete with itself down a row of four). The logo
 * image itself is desaturated and slightly faded at rest, and returns to
 * full color with a gentle lift on hover — a common real "logo wall"
 * treatment on premium partnership pages, and one that also means this
 * looks calm and intentional even while every tile is still the same
 * generic placeholder graphic (rather than four identical photos all
 * shouting for attention). The instant a real logo is dropped into a
 * tile's Image widget, it inherits this same treatment with zero code
 * changes. */
.jjh-logo-row { margin: 0 auto; }
.jjh-logo-tile {
	height: 110px;
	overflow: hidden;
	background: linear-gradient(180deg, #FFFFFF 0%, #FDFAF4 100%);
	border: 1px solid rgba(28, 25, 23, 0.07);
	border-radius: var(--jjh-radius-sm);
	box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 8px 18px -10px rgba(28, 25, 23, 0.14);
	padding: 18px 22px;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.jjh-logo-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 10px rgba(28, 25, 23, 0.05), 0 16px 28px -12px rgba(128, 37, 37, 0.20);
	border-color: rgba(128, 37, 37, 0.16);
}
/* Fixed PIXEL max-height (not a % one) on purpose: the <img> sits several
 * wrapper divs deep (Elementor's own .elementor-widget-image /
 * .elementor-image wrappers, none of which carry an explicit height), so a
 * percentage max-height has no ancestor height to resolve against and the
 * placeholder graphic rendered at its natural (much larger) size — spilling
 * out past the tile's rounded edges. A fixed px cap sidesteps that chain
 * entirely and scales down consistently once real logo files (almost
 * always wider than tall) replace the placeholder. */
.jjh-logo-tile img {
	display: block;
	max-height: 52px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1) opacity(0.55);
	transition: filter 0.35s ease;
}
.jjh-logo-tile:hover img { filter: grayscale(0) opacity(1); }
@media (max-width: 767px) {
	.jjh-logo-tile { height: 88px; padding: 14px 18px; }
	.jjh-logo-tile img { max-height: 40px; }
}

/* ---- Career Timeline (.jjh-timeline — see jjh_eb_accordion() in inc/setup.php) ----
 * First pass at this used the Accordion widget's own numbered rows and read
 * too much like an FAQ list — flat rows, a generic plus/minus, no real
 * sense of "this is a chronology." This version makes the timeline shape
 * itself the point: a connecting line down the left edge with a real
 * per-stage icon MEDALLION (seedling/graduation cap/horse/trophy/mic/
 * camera/shield/megaphone — one per career stage, baked into `tab_title`
 * as real HTML by jjh_eb_accordion(), see that function's own comment for
 * why that's safe) sitting directly on the line as the timeline's node —
 * not a plain number, and not part of the clickable row's icon slot. Each
 * stage is still one of the site's own clay cards, offset to the right of
 * its node, with a warm highlight while open.
 *
 * Also fixes a real centering bug in the expand/collapse (+/-) toggle: the
 * two icon states (`.elementor-accordion-icon-closed/-opened`) are plain
 * `<span>`s that Elementor's own base CSS shows via `display:block` (or,
 * for the default closed state, no explicit display at all — browser
 * default `inline`) — never flex — so the SVG glyph inside sits on its
 * inline baseline, leaving a few pixels of descender space UNDER the glyph
 * that reads as "not quite centered" in the circle. Confirmed by reading
 * the actual computed styles/DOM in a real browser, not guessed. Fixed
 * below by making whichever span is currently visible its own flex-centered
 * box, and forcing the SVG itself to `display:block` (kills the baseline
 * gap outright, regardless of the span's own display type).
 *
 * Note: `_css_classes` on an Elementor widget lands on the OUTER
 * `.elementor-widget` wrapper, not on the widget's own inner
 * `.elementor-accordion` div (confirmed via the actual rendered markup) —
 * so every rule below deliberately uses `.jjh-timeline .elementor-accordion`
 * as a descendant combinator, never `.jjh-timeline.elementor-accordion` as
 * a compound selector on one element, which would silently never match. */
.jjh-timeline .elementor-accordion {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	padding-inline-start: 52px;
}
.jjh-timeline .elementor-accordion::before {
	content: '';
	position: absolute;
	left: 25px;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background: linear-gradient(180deg, var(--jjh-red) 0%, var(--jjh-gold) 100%);
	opacity: 0.30;
}
.jjh-timeline .elementor-accordion .elementor-accordion-item {
	position: relative;
	border: 1px solid rgba(185, 138, 49, 0.22) !important;
	background: #FFFFFF !important;
	border-radius: 14px !important;
	box-shadow: 0 4px 15px rgba(28, 25, 23, 0.05) !important;
	margin-block-end: 16px !important;
	transition: all 0.3s ease !important;
	overflow: visible;
}
.jjh-timeline .elementor-accordion .elementor-accordion-item:hover {
	box-shadow: 0 8px 25px rgba(28, 25, 23, 0.1) !important;
	border-color: rgba(185, 138, 49, 0.5) !important;
}
.jjh-timeline .elementor-accordion .elementor-accordion-item:last-child { margin-block-end: 0; }

.jjh-timeline-node {
	position: absolute;
	left: -47px;
	top: 14px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1C1917 0%, #2B2420 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 4px #FBF6EE; /* Matches section bg to cutout the line */
	z-index: 2;
}
.jjh-timeline-node i,
.jjh-timeline-node svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: var(--jjh-gold);
	color: var(--jjh-gold);
}

.jjh-timeline .elementor-tab-title {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 18px 24px !important;
	color: var(--jjh-ink);
	font-size: 1.1em;
	cursor: pointer !important;
	outline: none !important;
	border: none !important;
	border-radius: 14px !important;
	margin: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	user-select: none !important;
}
.jjh-timeline .elementor-tab-title:focus {
	outline: none !important;
}

.jjh-timeline .elementor-tab-title:hover {
	background-color: rgba(185, 138, 49, 0.03) !important;
}

.jjh-timeline .elementor-tab-title .elementor-accordion-title {
	order: 1;
	flex: 1 1 auto;
	text-align: start;
	color: var(--jjh-ink);
	text-decoration: none !important;
}
.jjh-timeline-title-text { font-weight: 700; }

/* the native expand/collapse (+/-) toggle — exact 1:1 circular badge */
.jjh-timeline .elementor-tab-title .elementor-accordion-icon {
	order: 2 !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	max-width: 32px !important;
	max-height: 32px !important;
	flex: 0 0 32px !important;
	border-radius: 50% !important;
	aspect-ratio: 1 / 1 !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--jjh-sand) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--jjh-gold) !important;
	transition: all 0.25s ease !important;
	line-height: 1 !important;
}
.jjh-timeline .elementor-tab-title .elementor-accordion-icon-closed,
.jjh-timeline .elementor-tab-title .elementor-accordion-icon-opened {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.jjh-timeline .elementor-tab-title .elementor-accordion-icon-closed { display: flex !important; }
.jjh-timeline .elementor-tab-title .elementor-accordion-icon-opened { display: none !important; }

.jjh-timeline .elementor-tab-title.elementor-active .elementor-accordion-icon-closed {
	display: none !important;
}
.jjh-timeline .elementor-tab-title.elementor-active .elementor-accordion-icon-opened {
	display: flex !important;
}

.jjh-timeline .elementor-tab-title .elementor-accordion-icon svg { 
	width: 14px !important;
	height: 14px !important;
	display: block !important; 
	margin: auto !important;
}
.jjh-timeline .elementor-tab-title .elementor-accordion-icon i { 
	font-size: 14px !important; 
	line-height: 1 !important;
	display: block !important; 
	margin: auto !important;
}

.jjh-timeline .elementor-tab-title.elementor-active .elementor-accordion-icon {
	background: var(--jjh-gold) !important;
	color: #fff !important;
	transform: rotate(180deg) !important;
}

.jjh-timeline .elementor-tab-title.elementor-active {
	background-color: #FAF6EF !important;
	border: none !important;
	border-bottom: 1px solid rgba(185, 138, 49, 0.15) !important;
	border-radius: 14px 14px 0 0 !important;
}

.jjh-timeline .elementor-tab-content {
	border: none !important;
	border-radius: 0 0 14px 14px !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 18px 24px 22px !important;
	color: var(--jjh-muted);
	line-height: 1.7;
	font-size: 0.98rem;
}
.jjh-timeline .elementor-tab-content.elementor-active,
.jjh-timeline .elementor-tab-content.jjh-open {
	display: block !important;
}
.jjh-timeline .elementor-tab-content p { margin: 10px 0 0; }

@media (max-width: 767px) {
	.jjh-timeline .elementor-accordion { padding-inline-start: 40px; }
	.jjh-timeline .elementor-accordion::before { left: 19px; }
	.jjh-timeline-node { left: -37px; top: 12px; width: 34px; height: 34px; }
	.jjh-timeline-node i, .jjh-timeline-node svg { width: 15px; height: 15px; }
	.jjh-timeline .elementor-tab-title { padding: 14px 16px 14px 22px; font-size: 1em; }
	.jjh-timeline .elementor-tab-content { padding: 2px 16px 18px 22px; }
}

/* ---- FAQ accordion (.jjh-faq — see jjh_eb_faq() in inc/setup.php) ----
 * Same underlying Elementor Accordion widget as the Career Timeline above,
 * just without the per-stage node/line treatment — each question is its own
 * rounded, elevated card (a lighter sibling of .jjh-card) instead of the
 * plain flat-bordered default the base .elementor-accordion-item rule
 * gives every other accordion on the site.
 *
 * REDESIGN NOTE: the original version of this block only overrode padding/
 * color/icon-background on top of the base `.elementor-tab-title` rule
 * above (`display:flex; justify-content:space-between;`) without ever
 * giving the title text a `flex-grow`. Since the icon is a fixed-width
 * flex child and the `<a class="elementor-accordion-title">` next to it
 * was left to shrink to its own content width, `space-between` shoved the
 * icon to the far left and the (now free-floating) title text to the far
 * right edge of the card — a wide dead gap in the middle and a right-
 * aligned-looking question. Confirmed via a screenshot AND via inspecting
 * live computed flex styles (getComputedStyle), not from reading the CSS
 * alone. The Career Timeline right above never had this bug because it
 * already sets `order` + `flex: 1 1 auto` on its own title text — this
 * block now does the same, and additionally swaps the icon circle's
 * near-invisible 8%-opacity tint for the same solid `--jjh-sand` chip the
 * timeline uses, since the tint was too faint to read as a distinct
 * control against the card's own cream gradient. */
.jjh-faq .elementor-accordion { display: flex; flex-direction: column; gap: 14px; }
.jjh-faq .elementor-accordion-item {
	border: 1px solid rgba(28, 25, 23, 0.08);
	border-radius: var(--jjh-radius-sm);
	background: linear-gradient(180deg, #FFFFFF 0%, #FDFAF4 100%);
	box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
	overflow: hidden;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.jjh-faq .elementor-accordion-item + .elementor-accordion-item { border-block-start: 1px solid rgba(28, 25, 23, 0.08); }
.jjh-faq .elementor-accordion-item:hover {
	border-color: rgba(128, 37, 37, 0.18);
	box-shadow: 0 10px 22px -12px rgba(28, 25, 23, 0.18);
}
.jjh-faq .elementor-tab-title {
	justify-content: flex-start;
	padding: 20px 26px;
	font-size: 1.08em;
	color: var(--jjh-ink);
}
.jjh-faq .elementor-tab-title .elementor-accordion-title {
	flex: 1 1 auto;
	text-align: start;
}
.jjh-faq .elementor-tab-title.elementor-active { color: var(--jjh-red); }
.jjh-faq .elementor-tab-title .elementor-accordion-icon {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--jjh-sand);
	color: var(--jjh-red);
	transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.jjh-faq .elementor-tab-title:hover .elementor-accordion-icon { transform: scale(1.08); }
.jjh-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
	background: var(--jjh-red);
	color: #FFFFFF;
}
/* The +/- glyph was landing ~1-2px above true center of its circle. The
 * parent `.elementor-accordion-icon` is flex-centered, so its icon-state
 * children (`-closed`/`-opened`) are already "blockified" flex items and
 * land at the mathematically exact center — confirmed via getBoundingClientRect,
 * not assumed. The residual offset is a real optical effect, not a layout
 * bug: a thin flat glyph (the minus bar especially) centered by the numbers
 * inside a circle reads to the eye as sitting slightly high, the same
 * reason a pause/play glyph in a badge is usually nudged rather than left
 * at its literal geometric center. `line-height: 0` removes any leftover
 * font-metric-driven box height on the wrapping span so the glyph's own
 * box is all that's centered, and a small downward nudge on the glyph
 * itself corrects the remaining optical illusion. */
.jjh-faq .elementor-tab-title .elementor-accordion-icon-closed,
.jjh-faq .elementor-tab-title .elementor-accordion-icon-opened {
	line-height: 0;
}
.jjh-faq .elementor-tab-title .elementor-accordion-icon svg {
	width: 0.8em;
	height: 0.8em;
	display: block;
	transform: translateY(1px);
}
.jjh-faq .elementor-tab-content {
	border-block-start: 1px solid rgba(28, 25, 23, 0.08);
	padding: 4px 26px 24px;
	color: var(--jjh-muted);
	line-height: 1.7;
}
.jjh-faq .elementor-tab-content p { margin: 10px 0 0; }
@media (max-width: 767px) {
	.jjh-faq .elementor-tab-title { padding: 16px 18px; font-size: 1em; }
	.jjh-faq .elementor-tab-content { padding: 2px 18px 20px; }
}

/* ---- Photo Gallery (Elementor PRO's real Gallery widget — see
 * jjh_eb_gallery() in inc/setup.php) ----
 * Real Elementor normally lays this widget out entirely in JS (masonry
 * math, grid packing) — there's no static `display:grid` anywhere in the
 * real compiled widget-gallery.min.css, confirmed by reading it directly.
 * With this sandbox's core frontend.min.js missing (the same recurring gap
 * documented throughout this file), that JS never runs, so this is a real
 * CSS Grid laid out by hand — a genuinely simpler, equally valid way to
 * arrange a fixed set of images, not a lesser stand-in. The one thing CSS
 * alone can't do — painting each `.e-gallery-image` div's background from
 * its own `data-thumbnail` attribute, and opening a lightbox on click — is
 * handled by the small polyfill at the bottom of accordion-fallback.js.
 *
 * CRITICAL: unlike the JS polyfills (each guarded by
 * `if (window.elementorFrontend) return;`), CSS has no way to check for a
 * JS global — so every rule here is instead gated on `:not(.e-gallery-container)`.
 * The real vendored gallery JS (assets/lib/e-gallery/js/e-gallery.js, a REAL
 * compiled file even in this sandbox) always does
 * `this.$container.addClass('e-gallery-container e-gallery-<type> ...')`
 * on init — confirmed by reading that file directly — onto the very same
 * div this CSS targets (it starts out with only the static
 * `elementor-gallery__container` class from PHP). Without this gate, a
 * hardcoded 3-column `display:grid` here would sit at equal CSS specificity
 * with the real system's OWN base `.e-gallery-container{display:flex}` rule
 * (used under masonry/justified layouts), and source order — not correctness
 * — would decide which one a real production site with working JS actually
 * gets. Gating on the class the real JS adds means this CSS is only ever
 * live in the exact situation it exists for: real JS hasn't run. */
.elementor-gallery__container:not(.e-gallery-container) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.elementor-gallery__container:not(.e-gallery-container) .elementor-gallery-item {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--jjh-radius-sm);
	overflow: hidden;
	box-shadow: var(--jjh-shadow-card);
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.elementor-gallery__container:not(.e-gallery-container) .elementor-gallery-item:hover {
	transform: translateY(-5px);
	box-shadow: var(--jjh-shadow-card-hover);
}
.elementor-gallery__container:not(.e-gallery-container) .e-gallery-image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-color: var(--jjh-sand);
}
@media (max-width: 767px) {
	.elementor-gallery__container:not(.e-gallery-container) { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
	.elementor-gallery__container:not(.e-gallery-container) { grid-template-columns: 1fr; }
}

/* the click-to-enlarge lightbox itself — see the JS polyfill above */
.jjh-lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(23, 19, 15, 0.92);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.jjh-lightbox-overlay.jjh-lightbox-open {
	opacity: 1;
	pointer-events: auto;
}
.jjh-lightbox-img {
	max-width: 90vw;
	max-height: 85vh;
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.jjh-lightbox-close {
	position: absolute;
	top: 20px;
	right: 28px;
	background: none;
	border: none;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.jjh-lightbox-close:hover {
	opacity: 1;
	transform: scale(1.1);
}

/* ---- Header / nav ----
 * A frosted glass sticky bar (translucent + blurred, not a flat opaque
 * color) with a hairline bottom edge, real logo sizing, a brand-color
 * active-page pill (Elementor's own real `.elementor-item-active` class,
 * added by its Nav Menu widget from a genuine WordPress core current-page
 * check — not something specific to this theme), and a from-scratch
 * frosted-glass mobile dropdown panel in place of the plain flat list. */
.jjh-header-band {
	background-color: rgba(251, 246, 238, 0.72);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	border-bottom: 1px solid rgba(128, 37, 37, 0.10);
	box-shadow: var(--jjh-shadow-glass);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* The header's real justify-content/align-items/flex-wrap settings (logo
 * left, nav right) are restored by the general `.e-con-full.e-flex` rule
 * near the top of this file — see that rule's comment for why a full-width
 * flex container needed it at all. */
.jjh-logo-wrap { min-height: 40px; flex: 0 0 auto; }
.jjh-logo-wrap img { max-height: 40px; width: auto; display: block; }
.jjh-main-nav { flex: 0 0 auto; }

.jjh-main-nav.elementor-nav-menu--main .elementor-nav-menu {
	gap: 4px;
}
.jjh-main-nav .elementor-item {
	position: relative;
	padding: 8px 16px !important;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.jjh-main-nav .elementor-item:hover {
	background-color: rgba(128, 37, 37, 0.07);
	color: var(--jjh-red);
}
.jjh-main-nav .elementor-item.elementor-item-active {
	color: var(--jjh-red);
	background-color: rgba(128, 37, 37, 0.10);
}
/* The header's real CTA lives inside the hero/page content now (the old
 * header "Book Jordan" button was removed per design feedback), so the nav
 * itself stays a clean logo + links bar with no competing button. */

/* Mobile dropdown panel: Elementor's own real markup/classes
 * (.elementor-nav-menu--dropdown, toggled via aria-hidden) — restyled as a
 * frosted glass card with a slide-and-fade entrance instead of a flat
 * white box, and each link as its own pill (matching the desktop nav)
 * rather than a full-width flat row.
 *
 * REAL BUG, found via computed-style inspection, not visible from the CSS
 * text alone: CSS `max-height` can never shrink an element below its own
 * padding+border — a border-box element with 10px padding + 1px border
 * still renders at ~22px tall even at `max-height:0`, because the content
 * area can't go negative to compensate. Elementor Pro's real CSS sets
 * `max-height:0` on this exact selector while CLOSED (confirmed in the
 * loaded `widget-nav-menu.min.css`), so putting padding/border/background
 * directly on `.elementor-nav-menu--dropdown` — applying unconditionally,
 * closed or open — left a ~22px sliver of the panel (including a peek of
 * the red active-page pill) visibly poking out from under the sticky
 * header at every viewport, all the time, not just while open. The fix:
 * every bit of visual chrome below only applies once the toggle actually
 * carries `.elementor-active` — mirroring the exact selector shape
 * Elementor Pro's own CSS uses for the closed state, just inverted. */
/* SECOND real bug in this same box, found separately: with the dropdown
 * left at `position: static` (Elementor's own default — it only switches
 * to `position: absolute` when its "Stretch dropdown to full width"
 * setting is on, which this menu doesn't use), the browser still has to
 * give the CLOSED panel a width, and it does that by measuring the full,
 * un-collapsed 10-item menu's natural content width — `max-height:0` and
 * `overflow:hidden` clip it vertically, but neither one stops that width
 * from being measured. That invisible ~130px-wide box was the flex column
 * the toggle icon sits in, and Elementor's own `margin:0 auto` on the icon
 * centers it inside THAT column, not inside the header — so the icon sat
 * visibly left of the header's true right edge instead of flush against
 * it. Collapsing the width the same way the height is already collapsed
 * fixes it: the column shrinks to just the visible 33px button. Scoped to
 * the closed state only (mirrors Elementor's own selector shape below) so
 * the open panel's already-verified layout is untouched. */
.elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container {
	width: 0;
}
.elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
	/* Near-opaque on purpose: this panel now floats as a fixed full-width
	 * drawer over page content (see the toggle fallback's JS comment), so
	 * anything translucent enough to let a bold H1 show through behind it
	 * reads as broken, not "glassy." The blur is still layered on top for
	 * browsers that support it, but legibility never depends on it. */
	background-color: rgb(251, 246, 238) !important;
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
	border-radius: var(--jjh-radius-sm);
	box-shadow: var(--jjh-shadow-glass);
	border: 1px solid rgba(128, 37, 37, 0.10);
	padding: 10px;
	animation: jjh-fade-up 0.25s ease-out both;
}
.elementor-nav-menu--dropdown .elementor-nav-menu { display: flex; flex-direction: column; gap: 4px; }
.elementor-nav-menu--dropdown .menu-item > a {
	display: block;
	padding: 12px 16px;
	border-radius: var(--jjh-radius-sm);
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.elementor-nav-menu--dropdown .menu-item > a:hover { background-color: rgba(128, 37, 37, 0.07); }
.elementor-nav-menu--dropdown .elementor-item-active {
	background-color: var(--jjh-red) !important;
	color: #FFFFFF !important;
}
.elementor-menu-toggle {
	color: var(--jjh-black);
	transition: transform 0.2s ease;
}
.elementor-menu-toggle svg { width: 22px; height: 22px; }

/* ==========================================================================
   About Page Custom Sections (Family & Faith, Looking Ahead, Testimonials)
   ========================================================================== */

/* 1. Family & Faith */
.jjh-family-faith-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 0;
}

.jjh-family-faith-card {
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.25);
	border-radius: 20px;
	padding: 48px 40px;
	box-shadow: 0 8px 30px rgba(28, 25, 23, 0.05);
	position: relative;
	overflow: hidden;
}

.jjh-family-faith-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--jjh-red, #802525) 0%, var(--jjh-gold, #B98A31) 100%);
}

.jjh-family-faith-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 32px;
}

.jjh-family-faith-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 6px;
}

.jjh-family-faith-subtitle {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	margin: 0;
}

.jjh-family-faith-quote-box {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-radius: 14px;
	padding: 24px 32px;
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 880px;
	margin: 0 auto 40px;
	box-shadow: 0 4px 16px rgba(28, 25, 23, 0.04);
}

.jjh-family-faith-quote-icon {
	color: var(--jjh-gold, #B98A31);
	flex-shrink: 0;
	opacity: 0.85;
}

.jjh-family-faith-lead {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.08rem;
	line-height: 1.7;
	color: #3D322A;
	font-style: italic;
	margin: 0;
}

.jjh-family-faith-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.jjh-faith-pillar-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-radius: 14px;
	padding: 28px 22px;
	text-align: center;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 10px rgba(28, 25, 23, 0.03);
}

.jjh-faith-pillar-card:hover {
	transform: translateY(-4px);
	border-color: var(--jjh-gold, #B98A31);
	box-shadow: 0 8px 24px rgba(185, 138, 49, 0.12);
}

.jjh-faith-pillar-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #FAF6EF;
	border: 1.5px solid rgba(185, 138, 49, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	color: var(--jjh-gold, #B98A31);
	transition: all 0.3s ease;
	box-shadow: 0 3px 10px rgba(185, 138, 49, 0.1);
}

.jjh-faith-pillar-icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--jjh-gold, #B98A31);
	transition: stroke 0.3s ease;
}

.jjh-faith-pillar-card:hover .jjh-faith-pillar-icon {
	background: var(--jjh-gold, #B98A31);
	transform: scale(1.06);
	box-shadow: 0 6px 16px rgba(185, 138, 49, 0.25);
}

.jjh-faith-pillar-card:hover .jjh-faith-pillar-icon svg {
	stroke: #FFFFFF;
}

.jjh-faith-pillar-content h4 {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 8px;
}

.jjh-faith-pillar-content p {
	font-size: 0.92rem;
	line-height: 1.6;
	color: #6B5D50;
	margin: 0;
}

/* 2. Looking Ahead */
.jjh-looking-ahead-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 0;
}

.jjh-looking-ahead-header {
	text-align: center;
	max-width: 780px;
	margin: 0 auto 40px;
}

.jjh-looking-ahead-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 6px;
}

.jjh-looking-ahead-subtitle {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	margin: 0 0 14px;
}

.jjh-looking-ahead-lead {
	font-size: 1.1rem;
	line-height: 1.7;
	color: #5B4C3D;
	margin: 0;
}

.jjh-looking-ahead-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.jjh-horizon-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-radius: 16px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 4px 20px rgba(28, 25, 23, 0.05);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}

.jjh-horizon-card:hover {
	transform: translateY(-6px);
	border-color: var(--jjh-gold, #B98A31);
	box-shadow: 0 16px 36px rgba(185, 138, 49, 0.14);
}

.jjh-horizon-logo-placeholder {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #FAF6EF;
	border: 1.5px dashed rgba(185, 138, 49, 0.45);
	border-radius: 10px;
	margin-bottom: 20px;
	transition: all 0.3s ease;
}

.jjh-horizon-card:hover .jjh-horizon-logo-placeholder {
	border-color: var(--jjh-gold, #B98A31);
	background: #F4EAD8;
}

.jjh-horizon-icon-wrap {
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jjh-gold, #B98A31);
	flex-shrink: 0;
	transition: all 0.3s ease;
}

.jjh-horizon-icon-wrap svg {
	width: 22px;
	height: 22px;
	stroke: var(--jjh-gold, #B98A31);
	transition: stroke 0.3s ease;
}

.jjh-horizon-card:hover .jjh-horizon-icon-wrap {
	background: var(--jjh-gold, #B98A31);
}

.jjh-horizon-card:hover .jjh-horizon-icon-wrap svg {
	stroke: #FFFFFF;
}

.jjh-logo-badge-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--jjh-charcoal, #2B2420);
	opacity: 0.75;
	text-transform: uppercase;
	line-height: 1.3;
}

.jjh-horizon-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jjh-red, #802525);
	margin-bottom: 8px;
}

.jjh-horizon-card-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 12px;
}

.jjh-horizon-card-desc {
	font-size: 0.95rem;
	line-height: 1.65;
	color: #5B4C3D;
	margin: 0 0 24px;
	flex-grow: 1;
}

.jjh-horizon-link {
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--jjh-red, #802525);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.2s ease;
}

.jjh-horizon-link:hover {
	color: var(--jjh-gold, #B98A31);
	transform: translateX(4px);
}

/* 3. Testimonials */
.jjh-testimonials-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 0;
}

.jjh-testimonials-header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 40px;
}

.jjh-testimonials-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 10px;
}

.jjh-testimonials-lead {
	font-size: 1.1rem;
	line-height: 1.7;
	color: #5B4C3D;
	margin: 0;
}

.jjh-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-bottom: 32px;
}

.jjh-testimonial-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-radius: 16px;
	padding: 32px 26px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 6px 24px rgba(28, 25, 23, 0.05);
	transition: all 0.3s ease;
	position: relative;
}

.jjh-testimonial-card:hover {
	transform: translateY(-5px);
	border-color: var(--jjh-gold, #B98A31);
	box-shadow: 0 16px 36px rgba(185, 138, 49, 0.12);
}

.jjh-testimonial-stars {
	color: var(--jjh-gold, #B98A31);
	font-size: 16px;
	letter-spacing: 2px;
	margin-bottom: 16px;
}

.jjh-testimonial-quote {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.02rem;
	line-height: 1.7;
	color: #3D322A;
	font-style: italic;
	margin: 0 0 24px;
	flex-grow: 1;
}

.jjh-testimonial-author {
	display: flex;
	align-items: center;
	gap: 14px;
	border-top: 1px solid rgba(185, 138, 49, 0.12);
	padding-top: 18px;
}

.jjh-testimonial-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #FAF6EF;
	border: 1.5px solid rgba(185, 138, 49, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jjh-gold, #B98A31);
	flex-shrink: 0;
	transition: all 0.3s ease;
}

.jjh-testimonial-avatar svg {
	width: 22px;
	height: 22px;
	stroke: var(--jjh-gold, #B98A31);
	transition: stroke 0.3s ease;
}

.jjh-testimonial-card:hover .jjh-testimonial-avatar {
	background: var(--jjh-gold, #B98A31);
	border-color: var(--jjh-gold, #B98A31);
}

.jjh-testimonial-card:hover .jjh-testimonial-avatar svg {
	stroke: #FFFFFF;
}

.jjh-testimonial-meta {
	display: flex;
	flex-direction: column;
}

.jjh-author-name {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
}

.jjh-author-role {
	font-size: 0.8rem;
	color: #8C7B6E;
	margin-top: 2px;
}

.jjh-testimonials-footer-note {
	text-align: center;
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.18);
	border-radius: 12px;
	padding: 16px 24px;
	max-width: 860px;
	margin: 0 auto;
}

.jjh-testimonials-footer-note p {
	margin: 0;
	font-size: 0.95rem;
	color: #5B4C3D;
}

.jjh-testimonials-footer-note a {
	color: var(--jjh-red, #802525);
	font-weight: 700;
	text-decoration: none;
	margin-left: 6px;
}

.jjh-testimonials-footer-note a:hover {
	color: var(--jjh-gold, #B98A31);
	text-decoration: underline;
}

/* Responsive Styles */
@media (max-width: 900px) {
	.jjh-family-faith-pillars,
	.jjh-looking-ahead-grid,
	.jjh-testimonials-grid,
	.jjh-journey-pillars-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	.jjh-family-faith-card,
	.jjh-journey-showcase-card {
		padding: 36px 24px !important;
	}
	.jjh-family-faith-quote-box,
	.jjh-journey-lead-box {
		flex-direction: column !important;
		text-align: center !important;
		padding: 22px 20px !important;
	}
}

/* ==========================================================================
   Athlete Page: The Journey Showcase
   ========================================================================== */
.jjh-journey-showcase-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 0;
}

.jjh-journey-showcase-card {
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.25);
	border-radius: 20px;
	padding: 48px 40px;
	box-shadow: 0 8px 30px rgba(28, 25, 23, 0.05);
	position: relative;
	overflow: hidden;
}

.jjh-journey-showcase-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--jjh-red, #802525) 0%, var(--jjh-gold, #B98A31) 100%);
}

.jjh-journey-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 30px;
}

.jjh-journey-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 6px;
}

.jjh-journey-subtitle {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	margin: 0;
}

.jjh-journey-lead-box {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-left: 4px solid var(--jjh-gold, #B98A31);
	border-radius: 12px;
	padding: 24px 28px;
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 920px;
	margin: 0 auto 36px;
	box-shadow: 0 4px 16px rgba(28, 25, 23, 0.04);
}

.jjh-journey-quote-icon {
	color: var(--jjh-gold, #B98A31);
	flex-shrink: 0;
}

.jjh-journey-lead-text {
	font-size: 1.05rem;
	line-height: 1.75;
	color: #3D322A;
	font-style: italic;
	margin: 0;
}

.jjh-journey-pillars-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 32px;
}

.jjh-journey-pillar-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-radius: 14px;
	padding: 28px 22px;
	text-align: center;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 10px rgba(28, 25, 23, 0.03);
}

.jjh-journey-pillar-card:hover {
	transform: translateY(-4px);
	border-color: var(--jjh-gold, #B98A31);
	box-shadow: 0 10px 28px rgba(185, 138, 49, 0.14);
}

.jjh-journey-pillar-card.jjh-pillar-featured {
	border-color: rgba(185, 138, 49, 0.4);
	background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF7 100%);
}

.jjh-journey-pillar-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #FAF6EF;
	border: 1.5px solid rgba(185, 138, 49, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	color: var(--jjh-gold, #B98A31);
	transition: all 0.3s ease;
	box-shadow: 0 3px 10px rgba(185, 138, 49, 0.1);
}

.jjh-journey-pillar-icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--jjh-gold, #B98A31);
	transition: stroke 0.3s ease;
}

.jjh-journey-pillar-card:hover .jjh-journey-pillar-icon {
	background: var(--jjh-gold, #B98A31);
	transform: scale(1.06);
	box-shadow: 0 6px 16px rgba(185, 138, 49, 0.25);
}

.jjh-journey-pillar-card:hover .jjh-journey-pillar-icon svg {
	stroke: #FFFFFF;
}

.jjh-journey-pillar-tag {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jjh-red, #802525);
	margin-bottom: 8px;
}

.jjh-journey-pillar-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 10px;
}

.jjh-journey-pillar-desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: #6B5D50;
	margin: 0;
}

.jjh-journey-badges-strip {
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-radius: 999px;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 900px;
	margin: 0 auto;
	font-size: 0.88rem;
	font-weight: 600;
	color: #3D322A;
}

.jjh-journey-star {
	color: var(--jjh-gold, #B98A31);
	font-weight: 700;
	margin-right: 4px;
}

.jjh-journey-badge-sep {
	color: rgba(185, 138, 49, 0.5);
}

/* ==========================================================================
   Athlete Page: Season Schedule Showcase
   ========================================================================== */
.jjh-schedule-showcase-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 0;
}

.jjh-schedule-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 40px;
}

.jjh-schedule-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 6px;
}

.jjh-schedule-subtitle {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	margin: 0 0 14px;
}

.jjh-schedule-lead {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #5B4C3D;
	margin: 0;
}

.jjh-schedule-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-bottom: 32px;
}

.jjh-schedule-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-radius: 16px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 4px 20px rgba(28, 25, 23, 0.05);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
}

.jjh-schedule-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--jjh-red, #802525) 0%, var(--jjh-gold, #B98A31) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.jjh-schedule-card:hover {
	transform: translateY(-6px);
	border-color: var(--jjh-gold, #B98A31);
	box-shadow: 0 16px 36px rgba(185, 138, 49, 0.14);
}

.jjh-schedule-card:hover::before {
	opacity: 1;
}

.jjh-schedule-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(185, 138, 49, 0.12);
}

.jjh-schedule-date-pill {
	display: inline-block;
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	letter-spacing: 0.05em;
}

.jjh-schedule-status-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--jjh-red, #802525);
	padding: 4px 10px;
	border-radius: 999px;
}

.jjh-schedule-season-tag {
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jjh-gold, #B98A31);
	margin-bottom: 6px;
}

.jjh-schedule-event-name {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.22rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 12px;
	line-height: 1.35;
}

.jjh-schedule-location {
	font-size: 0.92rem;
	color: #5B4C3D;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.jjh-schedule-location svg {
	color: var(--jjh-red, #802525);
	flex-shrink: 0;
}

.jjh-schedule-type-note {
	display: inline-block;
	font-size: 0.82rem;
	font-weight: 600;
	color: #8C7B6E;
	background: #FAF6EF;
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid rgba(185, 138, 49, 0.15);
}

.jjh-schedule-live-notice {
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.25);
	border-radius: 14px;
	padding: 24px 32px;
	display: flex;
	align-items: center;
	gap: 22px;
	box-shadow: 0 4px 16px rgba(28, 25, 23, 0.04);
}

.jjh-schedule-notice-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1.5px solid rgba(185, 138, 49, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jjh-gold, #B98A31);
	flex-shrink: 0;
}

.jjh-schedule-notice-content {
	flex-grow: 1;
}

.jjh-notice-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	display: block;
	margin-bottom: 4px;
}

.jjh-notice-desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: #5B4C3D;
	margin: 0;
}

.jjh-schedule-notice-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	background: var(--jjh-red, #802525);
	color: #FFFFFF !important;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 8px;
	white-space: nowrap;
	transition: all 0.25s ease;
	box-shadow: 0 4px 14px rgba(128, 37, 37, 0.25);
}

.jjh-schedule-notice-btn:hover {
	background: #962E2E;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(128, 37, 37, 0.35);
}

/* ==========================================================================
   Athlete Page: The Horses Showcase
   ========================================================================== */
.jjh-horses-showcase-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 0;
}

.jjh-horses-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 40px;
}

.jjh-horses-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 6px;
}

.jjh-horses-subtitle {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	margin: 0 0 14px;
}

.jjh-horses-lead {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #5B4C3D;
	margin: 0;
}

.jjh-horses-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-bottom: 36px;
}

.jjh-horse-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 20px rgba(28, 25, 23, 0.05);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}

.jjh-horse-card:hover {
	transform: translateY(-6px);
	border-color: var(--jjh-gold, #B98A31);
	box-shadow: 0 16px 36px rgba(185, 138, 49, 0.14);
}

.jjh-horse-photo-slot {
	background: #FAF6EF;
	border: 1.5px dashed rgba(185, 138, 49, 0.4);
	border-radius: 12px;
	padding: 20px 16px;
	margin-bottom: 20px;
	text-align: center;
	transition: all 0.3s ease;
}

.jjh-horse-card:hover .jjh-horse-photo-slot {
	border-color: var(--jjh-gold, #B98A31);
	background: #F4EAD8;
}

.jjh-horse-photo-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.jjh-horse-icon-badge {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1.5px solid rgba(185, 138, 49, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jjh-gold, #B98A31);
	transition: all 0.3s ease;
}

.jjh-horse-icon-badge svg {
	width: 24px;
	height: 24px;
	stroke: var(--jjh-gold, #B98A31);
	transition: stroke 0.3s ease;
}

.jjh-horse-card:hover .jjh-horse-icon-badge {
	background: var(--jjh-gold, #B98A31);
}

.jjh-horse-card:hover .jjh-horse-icon-badge svg {
	stroke: #FFFFFF;
}

.jjh-horse-slot-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--jjh-charcoal, #2B2420);
	opacity: 0.75;
	text-transform: uppercase;
}

.jjh-horse-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.jjh-horse-role-tag {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jjh-red, #802525);
	margin-bottom: 6px;
}

.jjh-horse-name {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 4px;
}

.jjh-horse-tagline {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--jjh-gold, #B98A31);
	margin-bottom: 12px;
}

.jjh-horse-desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: #5B4C3D;
	margin: 0 0 18px;
	flex-grow: 1;
}

.jjh-horse-traits {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 14px;
	border-top: 1px solid rgba(185, 138, 49, 0.12);
}

.jjh-horse-trait-pill {
	font-size: 0.8rem;
	font-weight: 600;
	color: #4A3E33;
	background: #FAF6EF;
	padding: 4px 10px;
	border-radius: 4px;
	border: 1px solid rgba(185, 138, 49, 0.12);
}

.jjh-horses-philosophy-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-left: 4px solid var(--jjh-gold, #B98A31);
	border-radius: 14px;
	padding: 24px 32px;
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 900px;
	margin: 0 auto;
	box-shadow: 0 4px 16px rgba(28, 25, 23, 0.04);
}

.jjh-philosophy-quote-icon {
	color: var(--jjh-gold, #B98A31);
	flex-shrink: 0;
}

.jjh-philosophy-quote-text {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.05rem;
	line-height: 1.7;
	color: #3D322A;
	font-style: italic;
	margin: 0;
}

@media (max-width: 900px) {
	.jjh-schedule-grid,
	.jjh-horses-grid,
	.jjh-gallery-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	.jjh-schedule-live-notice,
	.jjh-horses-philosophy-card {
		flex-direction: column !important;
		text-align: center !important;
		padding: 22px 20px !important;
	}
}

/* ==========================================================================
   Athlete Page: Gallery Showcase
   ========================================================================== */
.jjh-gallery-showcase-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 10px 0;
}

.jjh-gallery-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 40px;
}

.jjh-gallery-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 6px;
}

.jjh-gallery-subtitle {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	margin: 0 0 14px;
}

.jjh-gallery-lead {
	font-size: 1.05rem;
	line-height: 1.7;
	color: #5B4C3D;
	margin: 0;
}

.jjh-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 36px;
}

.jjh-gallery-item-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(28, 25, 23, 0.05);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
}

.jjh-gallery-item-card:hover {
	transform: translateY(-6px);
	border-color: var(--jjh-gold, #B98A31);
	box-shadow: 0 16px 36px rgba(185, 138, 49, 0.14);
}

.jjh-gallery-slot {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.jjh-gallery-slot-content {
	background: #FAF6EF;
	border-bottom: 1px solid rgba(185, 138, 49, 0.18);
	padding: 44px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	transition: all 0.3s ease;
	min-height: 180px;
}

.jjh-gallery-item-card:hover .jjh-gallery-slot-content {
	background: #F4EAD8;
}

.jjh-gallery-icon-wrap {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1.5px solid rgba(185, 138, 49, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--jjh-gold, #B98A31);
	margin-bottom: 4px;
	transition: all 0.3s ease;
}

.jjh-gallery-icon-wrap svg {
	width: 26px;
	height: 26px;
	stroke: var(--jjh-gold, #B98A31);
	transition: stroke 0.3s ease;
}

.jjh-gallery-item-card:hover .jjh-gallery-icon-wrap {
	background: var(--jjh-gold, #B98A31);
}

.jjh-gallery-item-card:hover .jjh-gallery-icon-wrap svg {
	stroke: #FFFFFF;
}

.jjh-gallery-slot-label {
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--jjh-charcoal, #2B2420);
	text-transform: uppercase;
}

.jjh-gallery-slot-hint {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	letter-spacing: 0.04em;
}

.jjh-gallery-card-info {
	padding: 20px 22px;
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.jjh-gallery-cat-tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jjh-gold, #B98A31);
	margin-bottom: 6px;
}

.jjh-gallery-card-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 6px;
}

.jjh-gallery-card-desc {
	font-size: 0.88rem;
	line-height: 1.55;
	color: #6B5D50;
	margin: 0;
}

.jjh-gallery-footer-note {
	text-align: center;
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.18);
	border-radius: 12px;
	padding: 16px 24px;
	max-width: 860px;
	margin: 0 auto;
}

.jjh-gallery-footer-note p {
	margin: 0;
	font-size: 0.95rem;
	color: #5B4C3D;
}

.jjh-gallery-footer-note a {
	color: var(--jjh-red, #802525);
	font-weight: 700;
	text-decoration: none;
	margin-left: 6px;
}

.jjh-gallery-footer-note a:hover {
	color: var(--jjh-gold, #B98A31);
	text-decoration: underline;
}

/* ==========================================================================
   In The LOOP — Podcast Engagement (Apply to Be a Guest & Sponsor)
   ========================================================================== */
.jjh-engage-showcase-wrap {
	max-width: 1140px;
	margin: 0 auto;
	box-sizing: border-box;
}

.jjh-engage-header {
	text-align: center;
	margin-bottom: 40px;
}

.jjh-engage-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 6px;
}

.jjh-engage-subtitle {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.22rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	margin: 0 0 12px;
}

.jjh-engage-lead {
	font-size: 1.02rem;
	color: #6B5D50;
	max-width: 720px;
	margin: 0 auto;
	line-height: 1.6;
}

.jjh-engage-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	align-items: stretch;
}

.jjh-engage-card {
	background: #FFFFFF;
	border-radius: 18px;
	border: 1px solid rgba(185, 138, 49, 0.22);
	box-shadow: 0 8px 30px rgba(44, 30, 22, 0.05);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	position: relative;
}

.jjh-engage-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #802525 0%, #B98A31 100%);
}

.jjh-engage-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 40px rgba(44, 30, 22, 0.1);
	border-color: var(--jjh-gold, #B98A31);
}

.jjh-engage-card-header {
	padding: 34px 34px 22px;
	border-bottom: 1px solid #F0EAE1;
	background: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%);
}

.jjh-engage-icon-circle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--jjh-red, #802525);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	box-shadow: 0 4px 14px rgba(128, 37, 37, 0.25);
}

.jjh-engage-icon-sponsor {
	background: var(--jjh-gold, #B98A31);
	color: #1C1917;
	box-shadow: 0 4px 14px rgba(185, 138, 49, 0.25);
}

.jjh-engage-card-tag {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jjh-red, #802525);
	margin-bottom: 6px;
}

.jjh-engage-card-sponsor .jjh-engage-card-tag {
	color: #966B16;
}

.jjh-engage-card-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.65rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 8px;
	line-height: 1.25;
}

.jjh-engage-card-desc {
	font-size: 0.94rem;
	color: #6B5D50;
	line-height: 1.55;
	margin: 0;
}

.jjh-engage-card-body {
	padding: 28px 34px 34px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.jjh-engage-subhead {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 14px;
	letter-spacing: 0.02em;
}

.jjh-engage-feature-list {
	list-style: none;
	padding: 0;
	margin: 0 0 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.jjh-engage-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.92rem;
	color: #3B332B;
	line-height: 1.5;
}

.jjh-check-icon {
	color: var(--jjh-gold, #B98A31);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.3;
}

/* Guest Form Container & Fluent Forms Slot */
.jjh-guest-form-container {
	margin-top: 10px;
}

.jjh-fluent-form-slot {
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-radius: 14px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.jjh-slot-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(185, 138, 49, 0.14);
}

.jjh-slot-badge {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jjh-red, #802525);
}

.jjh-slot-shortcode {
	font-family: monospace;
	font-size: 0.76rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
	background: #EAE1D2;
	color: #4A3C2F;
}

.jjh-mock-form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.jjh-mock-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
}

.jjh-mock-field-full {
	grid-column: span 2;
}

.jjh-mock-field label {
	font-size: 0.76rem;
	font-weight: 700;
	color: #4A3C2F;
	letter-spacing: 0.02em;
}

.jjh-mock-input {
	background: #FFFFFF;
	border: 1px solid #D9CEBE;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 0.84rem;
	color: #9C8D77;
	user-select: none;
}

.jjh-mock-textarea {
	background: #FFFFFF;
	border: 1px solid #D9CEBE;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 0.84rem;
	color: #9C8D77;
	min-height: 52px;
	line-height: 1.4;
	user-select: none;
}

.jjh-mock-submit-btn {
	background: var(--jjh-red, #802525);
	color: #FFFFFF;
	font-size: 0.88rem;
	font-weight: 700;
	text-align: center;
	padding: 10px 16px;
	border-radius: 6px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(128, 37, 37, 0.2);
	transition: all 0.2s ease;
}

.jjh-mock-submit-btn:hover {
	background: #661D1D;
}

.jjh-slot-hint {
	font-size: 0.73rem;
	color: #8C7C6B;
	text-align: center;
	display: block;
}

/* Also support live Fluent Form rendering when active */
.jjh-guest-form-container .fluentform {
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-radius: 14px;
	padding: 20px 22px;
}
.jjh-guest-form-container .ff-el-form-control {
	background: #FFFFFF !important;
	border: 1px solid #D9CEBE !important;
	border-radius: 6px !important;
}
.jjh-guest-form-container .ff-btn-submit {
	background: var(--jjh-red, #802525) !important;
	border-color: var(--jjh-red, #802525) !important;
	color: #FFFFFF !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
}

.jjh-sponsor-action-box {
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-radius: 14px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: center;
}

.jjh-action-box-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.jjh-action-box-label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #7A6956;
}

.jjh-action-box-badge {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 9999px;
	background: #E8DFC8;
	color: #4A3C2F;
}

.jjh-badge-gold {
	background: #F4E8D0;
	color: #8C6212;
}

.jjh-action-box-note {
	font-size: 0.88rem;
	color: #4A3C2F;
	margin: 0;
	text-align: left;
	line-height: 1.45;
}

.jjh-engage-btn {
	display: inline-block;
	padding: 13px 22px;
	border-radius: 8px;
	font-size: 0.93rem;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	transition: all 0.22s ease;
	cursor: pointer;
}

.jjh-engage-btn-primary {
	background: var(--jjh-red, #802525);
	color: #FFFFFF !important;
	border: 1px solid var(--jjh-red, #802525);
	box-shadow: 0 4px 12px rgba(128, 37, 37, 0.2);
}

.jjh-engage-btn-primary:hover {
	background: #661D1D;
	border-color: #661D1D;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(128, 37, 37, 0.3);
}

.jjh-engage-btn-accent {
	background: var(--jjh-gold, #B98A31);
	color: #1C1917 !important;
	border: 1px solid var(--jjh-gold, #B98A31);
	box-shadow: 0 4px 12px rgba(185, 138, 49, 0.2);
}

.jjh-engage-btn-accent:hover {
	background: #A07424;
	border-color: #A07424;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(185, 138, 49, 0.3);
}

.jjh-action-box-hint {
	font-size: 0.73rem;
	color: #8C7C6B;
	display: block;
}

@media (max-width: 880px) {
	.jjh-engage-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.jjh-engage-title {
		font-size: 1.85rem;
	}
	.jjh-engage-card-header {
		padding: 24px 20px 18px;
	}
	.jjh-engage-card-body {
		padding: 20px;
	}
}

/* ==========================================================================
   Cowgirl Armor: The Mission, Collections, Community & Shop
   ========================================================================== */

/* Shared Armor Section Wrap */
.jjh-armor-mission-wrap,
.jjh-armor-collections-wrap,
.jjh-armor-community-wrap,
.jjh-armor-shop-wrap {
	max-width: 1140px;
	margin: 0 auto;
	box-sizing: border-box;
}

.jjh-armor-header {
	margin-bottom: 36px;
}
.jjh-armor-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 6px;
}
.jjh-armor-subtitle {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.22rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	margin: 0 0 12px;
}
.jjh-armor-lead {
	font-size: 1.02rem;
	line-height: 1.65;
	color: #6B5D50;
	max-width: 720px;
	margin: 0 auto;
}

/* 1. The Mission */
.jjh-armor-mission-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-radius: 20px;
	padding: 44px 38px;
	box-shadow: 0 8px 30px rgba(44, 30, 22, 0.05);
	position: relative;
	overflow: hidden;
}
.jjh-armor-mission-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #802525 0%, #B98A31 50%, #802525 100%);
}
.jjh-armor-quote-box {
	background: #FAF6EF;
	border-left: 4px solid var(--jjh-gold, #B98A31);
	border-radius: 12px;
	padding: 24px 30px;
	margin: 0 auto 36px;
	max-width: 860px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.jjh-armor-quote-icon {
	color: var(--jjh-gold, #B98A31);
	flex: 0 0 32px;
}
.jjh-armor-quote-text {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.12rem;
	line-height: 1.7;
	color: #3B312A;
	font-style: italic;
	margin: 0 0 6px;
}
.jjh-armor-quote-author {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jjh-red, #802525);
}
.jjh-armor-pillars-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.jjh-armor-pillar-card {
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.18);
	border-radius: 14px;
	padding: 24px 22px;
	text-align: center;
	transition: all 0.3s ease;
}
.jjh-armor-pillar-card:hover {
	transform: translateY(-4px);
	border-color: var(--jjh-gold, #B98A31);
	background: #FFFFFF;
	box-shadow: 0 10px 24px rgba(44, 30, 22, 0.08);
}
.jjh-armor-pillar-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1.5px solid rgba(185, 138, 49, 0.3);
	color: var(--jjh-gold, #B98A31);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
}
.jjh-armor-pillar-card h4 {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 8px;
}
.jjh-armor-pillar-card p {
	font-size: 0.9rem;
	line-height: 1.55;
	color: #6B5D50;
	margin: 0;
}

/* 2. Collections */
.jjh-armor-collections-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.jjh-collection-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-radius: 16px;
	padding: 28px 24px;
	box-shadow: 0 6px 22px rgba(44, 30, 22, 0.05);
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
}
.jjh-collection-card:hover {
	transform: translateY(-5px);
	border-color: var(--jjh-gold, #B98A31);
	box-shadow: 0 14px 34px rgba(44, 30, 22, 0.1);
}
.jjh-collection-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.jjh-collection-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.25);
	color: var(--jjh-red, #802525);
	display: flex;
	align-items: center;
	justify-content: center;
}
.jjh-collection-badge {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 9999px;
	background: #FAF6EF;
	color: #8C6212;
	border: 1px solid rgba(185, 138, 49, 0.2);
}
.jjh-collection-tag {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jjh-gold, #B98A31);
	margin-bottom: 6px;
}
.jjh-collection-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 10px;
	line-height: 1.3;
}
.jjh-collection-desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: #6B5D50;
	margin: 0 0 18px;
	flex-grow: 1;
}
.jjh-collection-link a {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--jjh-red, #802525);
	text-decoration: none;
	transition: color 0.2s ease;
}
.jjh-collection-link a:hover {
	color: var(--jjh-gold, #B98A31);
	text-decoration: underline;
}

/* 3. Community */
.jjh-armor-community-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-bottom: 32px;
}
.jjh-community-card {
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-radius: 16px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
}
.jjh-community-card:hover {
	transform: translateY(-4px);
	background: #FFFFFF;
	border-color: var(--jjh-gold, #B98A31);
	box-shadow: 0 10px 28px rgba(44, 30, 22, 0.08);
}
.jjh-community-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1.5px solid rgba(185, 138, 49, 0.3);
	color: var(--jjh-gold, #B98A31);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}
.jjh-community-role {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--jjh-red, #802525);
	margin-bottom: 6px;
}
.jjh-community-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 10px;
	line-height: 1.3;
}
.jjh-community-desc {
	font-size: 0.92rem;
	line-height: 1.6;
	color: #6B5D50;
	margin: 0;
}
.jjh-community-banner {
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.25);
	border-radius: 14px;
	padding: 24px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.jjh-community-banner-text strong {
	display: block;
	font-size: 1.05rem;
	color: var(--jjh-charcoal, #2B2420);
	margin-bottom: 4px;
}
.jjh-community-banner-text p {
	font-size: 0.92rem;
	color: #6B5D50;
	margin: 0;
}
.jjh-community-banner-btn {
	display: inline-block;
	white-space: nowrap;
	padding: 11px 22px;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	background: var(--jjh-red, #802525);
	color: #FFFFFF !important;
	transition: all 0.2s ease;
}
.jjh-community-banner-btn:hover {
	background: #661D1D;
	transform: translateY(-2px);
}

/* 4. Shop Cowgirl Armor */
.jjh-armor-shop-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.25);
	border-radius: 20px;
	padding: 44px 40px;
	box-shadow: 0 10px 32px rgba(44, 30, 22, 0.06);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.jjh-armor-shop-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #B98A31 0%, #802525 50%, #B98A31 100%);
}
.jjh-shop-card-content {
	max-width: 780px;
	margin: 0 auto;
}
.jjh-shop-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 6px;
}
.jjh-shop-subtitle {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	margin: 0 0 14px;
}
.jjh-shop-desc {
	font-size: 1.02rem;
	line-height: 1.65;
	color: #6B5D50;
	margin: 0 0 26px;
}
.jjh-shop-perks {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
	padding: 16px 20px;
	background: #FAF6EF;
	border-radius: 12px;
	border: 1px solid rgba(185, 138, 49, 0.16);
	margin-bottom: 28px;
}
.jjh-shop-perk-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 600;
	color: #4A3E33;
}
.jjh-perk-icon {
	font-size: 1.1rem;
}
.jjh-shop-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.jjh-shop-btn {
	display: inline-block;
	padding: 15px 34px;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.22s ease;
	cursor: pointer;
}
.jjh-shop-btn-primary {
	background: var(--jjh-red, #802525);
	color: #FFFFFF !important;
	box-shadow: 0 6px 18px rgba(128, 37, 37, 0.25);
}
.jjh-shop-btn-primary:hover {
	background: #661D1D;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(128, 37, 37, 0.35);
}
.jjh-shop-secure-note {
	font-size: 0.78rem;
	color: #8C7C6B;
}

@media (max-width: 900px) {
	.jjh-armor-pillars-grid,
	.jjh-armor-collections-grid,
	.jjh-armor-community-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.jjh-armor-title,
	.jjh-shop-title {
		font-size: 1.85rem;
	}
	.jjh-community-banner {
		flex-direction: column;
		text-align: center;
	}
	.jjh-armor-quote-box {
		flex-direction: column;
		text-align: center;
		padding: 20px;
	}
	.jjh-shop-perks {
		flex-direction: column;
		gap: 10px;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Speaking Page: Reel, Testimonials & Booking Form Redesign
   ========================================================================== */

/* Shared Header for Speaking Sections */
.jjh-speaking-reel-wrap,
.jjh-speaking-testimonials-wrap,
.jjh-speaking-booking-wrap {
	width: 100%;
	margin: 0 auto;
}
.jjh-speaking-reel-wrap {
	max-width: 1060px;
}
.jjh-speaking-testimonials-wrap {
	max-width: 1180px;
}
.jjh-speaking-booking-wrap {
	max-width: 900px;
}

.jjh-speaking-header {
	margin-bottom: 38px;
}
.jjh-speaking-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.35rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 6px;
	line-height: 1.25;
}
.jjh-speaking-subtitle {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	margin: 0 0 12px;
}
.jjh-speaking-lead {
	font-size: 1.05rem;
	line-height: 1.65;
	color: #6B5D50;
	max-width: 68ch;
	margin: 0 auto;
}

/* ==========================================================================
   Minimalist Video Reel Component (Speaking & Broadcast Reels)
   ========================================================================== */

.jjh-minimal-reel-wrap {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}
.jjh-minimal-reel-header {
	margin-bottom: 24px;
}
.jjh-minimal-eyebrow {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jjh-red, #802525);
	display: block;
	margin-bottom: 6px;
}
.jjh-minimal-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.1rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 8px;
	line-height: 1.25;
}
.jjh-minimal-lead {
	font-size: 0.98rem;
	line-height: 1.6;
	color: #6B5D50;
	max-width: 58ch;
	margin: 0 auto;
}

.jjh-minimal-player-box {
	position: relative;
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-radius: 16px;
	padding: 14px;
	box-shadow: 0 10px 30px rgba(44, 30, 22, 0.05);
}
.jjh-minimal-video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #14110E;
}
.jjh-minimal-video-cover {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(30, 24, 20, 0.85) 0%, rgba(15, 12, 10, 0.95) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.3s ease;
}
.jjh-minimal-video-cover:hover {
	background: linear-gradient(135deg, rgba(30, 24, 20, 0.75) 0%, rgba(15, 12, 10, 0.9) 100%);
}
.jjh-minimal-play-btn {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: var(--jjh-charcoal, #2B2420);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	transition: transform 0.22s ease, background-color 0.22s ease, color 0.22s ease;
	padding-left: 3px;
}
.jjh-minimal-video-cover:hover .jjh-minimal-play-btn {
	transform: scale(1.08);
	background: var(--jjh-gold, #B98A31);
	color: #FFFFFF;
}
.jjh-minimal-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 6px 4px;
	font-size: 0.85rem;
	color: #6B5D50;
}
.jjh-minimal-meta-title {
	font-weight: 600;
	color: var(--jjh-charcoal, #2B2420);
}
.jjh-minimal-meta-duration {
	font-weight: 700;
	color: var(--jjh-gold, #B98A31);
	background: #FAF6EF;
	padding: 2px 8px;
	border-radius: 4px;
	border: 1px solid rgba(185, 138, 49, 0.18);
}

@media (max-width: 768px) {
	.jjh-minimal-title {
		font-size: 1.75rem;
	}
	.jjh-minimal-player-box {
		padding: 10px;
	}
	.jjh-minimal-play-btn {
		width: 52px;
		height: 52px;
	}
	.jjh-minimal-meta-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

/* 2. Testimonials Grid */
.jjh-speaking-testi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
	margin-bottom: 34px;
}
.jjh-speaking-testi-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-radius: 18px;
	padding: 32px 26px;
	box-shadow: 0 10px 30px rgba(44, 30, 22, 0.06);
	display: flex;
	flex-direction: column;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
	position: relative;
}
.jjh-speaking-testi-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 38px rgba(44, 30, 22, 0.1);
	border-color: var(--jjh-gold, #B98A31);
}
.jjh-testi-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.jjh-testi-stars {
	color: #D4AF37;
	font-size: 1.1rem;
	letter-spacing: 2px;
}
.jjh-testi-tag {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 9999px;
	background: #FAF6EF;
	color: #8C6212;
	border: 1px solid rgba(185, 138, 49, 0.2);
}
.jjh-testi-quote-wrap {
	position: relative;
	margin-bottom: 22px;
	flex-grow: 1;
}
.jjh-testi-quote-mark {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 3rem;
	line-height: 1;
	color: rgba(185, 138, 49, 0.25);
	position: absolute;
	top: -16px;
	left: -8px;
	user-select: none;
}
.jjh-testi-quote-text {
	position: relative;
	font-size: 0.95rem;
	line-height: 1.65;
	color: #4A3E33;
	font-style: italic;
	margin: 0;
}
.jjh-testi-author-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid #F0E6D8;
	margin-bottom: 14px;
}
.jjh-testi-author-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #FAF6EF;
	border: 1.5px solid var(--jjh-gold, #B98A31);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	flex-shrink: 0;
}
.jjh-testi-author-name {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 2px;
}
.jjh-testi-author-role {
	font-size: 0.78rem;
	font-weight: 600;
	color: #6B5D50;
	display: block;
}
.jjh-testi-event-name {
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--jjh-red, #802525);
	display: block;
}
.jjh-testi-badge-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.75rem;
	font-weight: 600;
	color: #8C7C6B;
	background: #FAF6EF;
	padding: 6px 10px;
	border-radius: 8px;
}
.jjh-testi-verified-badge {
	color: #2F6B38;
	font-weight: 700;
}

/* Stats Highlights Bar */
.jjh-speaking-stats-bar {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.25);
	border-radius: 16px;
	padding: 24px 20px;
	box-shadow: 0 8px 24px rgba(44, 30, 22, 0.05);
	flex-wrap: wrap;
	gap: 16px;
}
.jjh-speaking-stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 4px 16px;
}
.jjh-stat-num {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--jjh-red, #802525);
	line-height: 1.2;
}
.jjh-stat-lbl {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6B5D50;
	margin-top: 4px;
}
.jjh-stat-divider {
	width: 1px;
	height: 36px;
	background: #E8DDCE;
}

/* 3. Request to Book Jordan Form */
.jjh-speaking-booking-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.25);
	border-radius: 20px;
	padding: 44px 38px;
	box-shadow: 0 12px 36px rgba(44, 30, 22, 0.06);
	position: relative;
	overflow: hidden;
}
.jjh-speaking-booking-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #B98A31 0%, #802525 50%, #B98A31 100%);
}
.jjh-booking-form-container {
	margin-bottom: 28px;
}
.jjh-booking-fluent-slot {
	background: #FAF6EF;
	border: 1.5px dashed rgba(185, 138, 49, 0.45);
	border-radius: 16px;
	padding: 28px 24px;
}
.jjh-booking-form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 14px;
}
.jjh-booking-submit-btn {
	background: var(--jjh-red, #802525);
	color: #FFFFFF;
	text-align: center;
	padding: 15px 24px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(128, 37, 37, 0.25);
	transition: all 0.2s ease;
}
.jjh-booking-submit-btn:hover {
	background: #661D1D;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(128, 37, 37, 0.35);
}
.jjh-booking-perks-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
	padding: 16px 20px;
	background: #FAF6EF;
	border-radius: 12px;
	border: 1px solid rgba(185, 138, 49, 0.16);
}
.jjh-booking-perk {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 600;
	color: #4A3E33;
}
.jjh-perk-ico {
	font-size: 1.1rem;
}

@media (max-width: 900px) {
	.jjh-speaking-testi-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.jjh-reel-pro-meta {
		grid-template-columns: 1fr;
	}
	.jjh-booking-form-grid {
		grid-template-columns: 1fr;
	}
	.jjh-speaking-title {
		font-size: 1.85rem;
	}
	.jjh-speaking-stats-bar {
		flex-direction: column;
		gap: 18px;
	}
	.jjh-stat-divider {
		display: none;
	}
}

	}
}

/* Media Photos Gallery */
.jjh-media-photos-gallery-wrap {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}
.jjh-media-photos-header {
	margin-bottom: 38px;
}
.jjh-media-photos-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 2.35rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 12px 0 6px;
	line-height: 1.25;
}
.jjh-media-photos-subtitle {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--jjh-red, #802525);
	margin: 0 0 12px;
}
.jjh-media-photos-lead {
	font-size: 1.05rem;
	line-height: 1.65;
	color: #6B5D50;
	max-width: 68ch;
	margin: 0 auto;
}

.jjh-media-photos-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.jjh-media-photo-card {
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.22);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(44, 30, 22, 0.05);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.jjh-media-photo-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(44, 30, 22, 0.09);
	border-color: var(--jjh-gold, #B98A31);
}
.jjh-media-photo-slot {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.jjh-media-photo-slot-content {
	height: 200px;
	background: linear-gradient(135deg, #F5ECE0 0%, #E8DAC6 100%);
	border-bottom: 1px solid rgba(185, 138, 49, 0.18);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	position: relative;
}
.jjh-media-photo-icon-wrap {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--jjh-red, #802525);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	box-shadow: 0 4px 12px rgba(185, 138, 49, 0.15);
	transition: transform 0.2s ease;
}
.jjh-media-photo-card:hover .jjh-media-photo-icon-wrap {
	transform: scale(1.08);
}
.jjh-media-photo-slot-label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #8C6212;
	text-transform: uppercase;
}
.jjh-media-photo-slot-hint {
	font-size: 0.68rem;
	color: #8C7C6B;
	margin-top: 2px;
}
.jjh-media-photo-card-info {
	padding: 22px 20px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
}
.jjh-media-photo-cat-tag {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jjh-gold, #B98A31);
	margin-bottom: 6px;
}
.jjh-media-photo-card-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--jjh-charcoal, #2B2420);
	margin: 0 0 8px;
	line-height: 1.35;
}
.jjh-media-photo-card-desc {
	font-size: 0.9rem;
	line-height: 1.55;
	color: #6B5D50;
	margin: 0;
}

@media (max-width: 900px) {
	.jjh-media-photos-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.jjh-media-photos-title {
		font-size: 1.85rem;
	}
}

/* ==========================================================================
   Target Luxury Glassmorphism Hero Section (Exact 1:1 Design Match)
   ========================================================================== */

.jjh-target-hero-wrap {
	position: relative;
	width: 100% !important;
	max-width: 1240px !important;
	margin: 0 auto !important;
}

.jjh-target-hero-main {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	min-height: 560px;
	position: relative;
}

.jjh-target-hero-left {
	width: 52% !important;
	flex: 1 1 52% !important;
	max-width: 620px !important;
	padding-bottom: 110px;
	z-index: 2;
}

.jjh-target-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.28);
	border-radius: 9999px;
	padding: 5px 14px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8C6212;
	margin-bottom: 14px;
}

.jjh-target-hero-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif) !important;
	font-size: 3.5rem !important;
	font-weight: 700 !important;
	line-height: 1.12 !important;
	color: var(--jjh-charcoal, #2B2420) !important;
	margin: 0 0 14px !important;
	letter-spacing: -0.025em;
}

.jjh-target-hero-sub {
	font-family: var(--jjh-font-heading, 'Bitter', serif) !important;
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	color: var(--jjh-red, #802525) !important;
	margin: 0 0 14px !important;
	letter-spacing: 0.01em;
}

.jjh-target-hero-lead {
	font-size: 1.08rem !important;
	line-height: 1.65 !important;
	color: #5B4C3D !important;
	margin: 0 0 28px !important;
	max-width: 52ch;
}

.jjh-target-hero-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

a.jjh-target-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 9999px;
	font-size: 0.98rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
	cursor: pointer;
}

a.jjh-target-btn-primary {
	background: var(--jjh-red, #802525) !important;
	color: #FFFFFF !important;
	box-shadow: 0 8px 22px rgba(128, 37, 37, 0.28);
}
a.jjh-target-btn-primary:hover {
	background: #661D1D !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(128, 37, 37, 0.38);
}

a.jjh-target-btn-secondary {
	background: var(--jjh-gold, #B98A31) !important;
	color: #FFFFFF !important;
	box-shadow: 0 8px 22px rgba(185, 138, 49, 0.25);
}
a.jjh-target-btn-secondary:hover {
	background: #9B7020 !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(185, 138, 49, 0.35);
}

.jjh-target-hero-right {
	width: 48% !important;
	flex: 1 1 48% !important;
	max-width: 48% !important;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	position: relative;
	z-index: 1;
}

.jjh-target-portrait-wrap {
	position: relative;
	width: 100% !important;
	max-width: 500px !important;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/* Elementor's Image widget puts `_css_classes` on the widget's wrapper
   div, not the actual <img> tag it renders — object-fit/object-position
   have zero effect on a div, so this must target the real descendant. */
.jjh-target-portrait-img img {
	width: 100%;
	max-height: 680px;
	object-fit: contain;
	object-position: bottom center;
	display: block;
}

/* Docked Glassmorphism Cards Overlapping Hero and Portrait */
.jjh-target-glass-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-top: -100px;
	z-index: 10;
}

/* Explicit 3-column layout default when 3 cards are present */
.jjh-target-glass-grid:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(3, 1fr);
}

/* 2-column balanced layout when 2 cards are present */
.jjh-target-glass-grid:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 520px));
	justify-content: center;
}

/* 4-column layout when 4 cards are present */
.jjh-target-glass-grid:has(> :nth-child(4):last-child) {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

/* 1-card centered layout when only 1 card is present */
.jjh-target-glass-grid:has(> :only-child) {
	grid-template-columns: minmax(0, 560px);
	justify-content: center;
}

.jjh-target-glass-card {
	background: rgba(255, 255, 255, 0.62);
	backdrop-filter: blur(28px) saturate(190%);
	-webkit-backdrop-filter: blur(28px) saturate(190%);
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 22px;
	padding: 24px 22px 20px;
	box-shadow: 0 20px 48px rgba(44, 30, 22, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9);
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition: transform 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease, border-color 0.28s ease;
}

.jjh-target-glass-card:hover {
	transform: translateY(-8px);
	background: rgba(255, 255, 255, 0.82);
	border-color: rgba(185, 138, 49, 0.45);
	box-shadow: 0 28px 60px rgba(44, 30, 22, 0.14), inset 0 1px 1px #FFFFFF;
}

.jjh-tgcard-top {
	margin-bottom: 14px;
}

.jjh-tgcard-title {
	font-family: var(--jjh-font-heading, 'Bitter', serif) !important;
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	color: var(--jjh-charcoal, #2B2420) !important;
	margin: 0 0 6px !important;
	line-height: 1.25 !important;
}

.jjh-tgcard-desc {
	font-size: 0.9rem !important;
	line-height: 1.52 !important;
	color: #5B4C3D !important;
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.jjh-tgcard-media {
	width: 100%;
	height: 205px;
	border-radius: 16px;
	overflow: hidden;
	background: #181513;
	margin-bottom: 16px;
	border: 1px solid rgba(185, 138, 49, 0.18);
	box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.15);
}

.jjh-tgcard-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.jjh-target-glass-card:hover .jjh-tgcard-img img {
	transform: scale(1.06);
}

.jjh-tgcard-footer {
	margin-top: auto;
}

.jjh-tgcard-link {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--jjh-red, #802525);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.2s ease, gap 0.2s ease;
}

.jjh-target-glass-card:hover .jjh-tgcard-link {
	color: #551616;
	gap: 9px;
}

/* ==========================================================================
   Comprehensive Universal Responsive Optimization (Mobile, Tablet & Desktop)
   ========================================================================== */

/* 1. Global Viewport & Container Resets */
@media (max-width: 768px) {
	:root {
		--jjh-container-gutter: 16px;
	}
	
	.e-con-boxed,
	.e-con-full,
	.elementor-section {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* 2. Hero Section Mobile & Tablet Responsiveness */
@media (min-width: 641px) and (max-width: 1024px) {
	.jjh-target-hero-main {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		gap: 20px;
	}
	.jjh-target-hero-left {
		max-width: 100% !important;
		align-items: center !important;
		padding-bottom: 16px !important;
	}
	.jjh-target-hero-lead {
		max-width: 80% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.jjh-target-hero-actions {
		justify-content: center !important;
	}
	.jjh-target-portrait-wrap {
		max-width: 360px !important;
	}
	.jjh-target-portrait-img img {
		max-height: 400px !important;
	}
	.jjh-target-glass-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 20px !important;
		margin-top: 24px !important;
	}
	.jjh-target-glass-card:last-child:nth-child(odd) {
		grid-column: 1 / -1 !important;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.jjh-showcase-hero-section {
		padding-top: 40px !important;
		padding-bottom: 48px !important;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
	.jjh-target-hero-main {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
		padding-bottom: 12px !important;
	}
	.jjh-target-hero-left {
		max-width: 100% !important;
		padding-bottom: 16px !important;
		align-items: center !important;
	}
	.jjh-target-hero-title {
		font-size: clamp(1.85rem, 7vw, 2.35rem) !important;
		line-height: 1.18 !important;
	}
	.jjh-target-hero-lead {
		font-size: 0.95rem !important;
		line-height: 1.55 !important;
		margin-bottom: 22px !important;
	}
	.jjh-target-hero-actions {
		flex-direction: column !important;
		width: 100% !important;
		gap: 12px !important;
	}
	a.jjh-target-btn {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
		min-height: 48px !important;
		padding: 13px 20px !important;
	}
	.jjh-target-portrait-wrap {
		max-width: 290px !important;
		margin-top: 8px !important;
	}
	.jjh-target-portrait-img img {
		max-height: 310px !important;
	}
	.jjh-target-glass-grid {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
		margin-top: 18px !important;
	}
	.jjh-target-glass-card {
		padding: 18px 16px !important;
		border-radius: 18px !important;
	}
	.jjh-tgcard-media {
		height: 175px !important;
		border-radius: 12px !important;
		margin-bottom: 12px !important;
	}
	.jjh-tgcard-title {
		font-size: 1.25rem !important;
	}
	.jjh-tgcard-desc {
		font-size: 0.86rem !important;
		line-height: 1.48 !important;
	}
}

/* 3. Forms & Mock Form Slots */
@media (max-width: 640px) {
	.jjh-mock-form-grid,
	.jjh-booking-form-grid {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}
	.jjh-mock-field-full {
		grid-column: span 1 !important;
	}
	.jjh-mock-input,
	.jjh-mock-textarea {
		font-size: 16px !important; /* Prevents auto-zoom on iOS */
		padding: 10px 12px !important;
	}
	.jjh-mock-submit-btn,
	.jjh-booking-submit-btn {
		min-height: 48px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
	}
	.jjh-fluent-form-slot {
		padding: 20px 16px !important;
		border-radius: 14px !important;
	}
	.jjh-slot-header {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 6px !important;
	}
}

/* 4. Podcast Dark Band Responsive */
@media (max-width: 900px) {
	.jjh-podcast-dark-band {
		padding: 56px 20px !important;
	}
	.jjh-podcast-display-title {
		font-size: 2.15rem !important;
	}
	.jjh-podcast-host-strap {
		flex-wrap: wrap !important;
		gap: 6px !important;
	}
	.jjh-podcast-highlights-strip {
		flex-wrap: wrap !important;
		gap: 8px !important;
	}
	.jjh-podcast-actions-row {
		flex-direction: column !important;
		width: 100% !important;
		gap: 10px !important;
	}
	.jjh-podcast-actions-row a {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
	}
	.jjh-podcast-card-wrapper {
		max-width: 380px !important;
		margin: 0 auto 32px !important;
	}
}

/* 5. Schedule Notice & Speaking Stats Bar */
@media (max-width: 768px) {
	.jjh-schedule-live-notice {
		flex-direction: column !important;
		text-align: center !important;
		gap: 16px !important;
		padding: 24px 18px !important;
	}
	.jjh-schedule-notice-btn {
		width: 100% !important;
		text-align: center !important;
		justify-content: center !important;
	}
	.jjh-speaking-stats-bar {
		flex-wrap: wrap !important;
		gap: 16px !important;
		padding: 20px 16px !important;
	}
	.jjh-stat-divider {
		display: none !important;
	}
	.jjh-speaking-stat-item {
		flex: 1 1 40% !important;
	}
	.jjh-speaking-booking-card {
		padding: 24px 16px !important;
	}
	.jjh-booking-perks-row {
		flex-direction: column !important;
		gap: 10px !important;
	}
}

/* 6. Community Banner & Shop Perks */
@media (max-width: 768px) {
	.jjh-community-banner {
		flex-direction: column !important;
		text-align: center !important;
		gap: 16px !important;
		padding: 24px 18px !important;
	}
	.jjh-community-banner-btn {
		width: 100% !important;
		justify-content: center !important;
	}
	.jjh-shop-perks {
		flex-direction: column !important;
		gap: 10px !important;
	}
	.jjh-shop-actions {
		flex-direction: column !important;
		gap: 12px !important;
	}
	.jjh-shop-btn {
		width: 100% !important;
		text-align: center !important;
	}
}

/* 7. Journey & Family Faith Badges */
@media (max-width: 768px) {
	.jjh-journey-badges-strip {
		flex-direction: column !important;
		gap: 8px !important;
		padding: 16px !important;
	}
	.jjh-journey-badge-sep {
		display: none !important;
	}
}

/* ==========================================================================
   Floating Back-to-Top Button
   ========================================================================== */
.jjh-back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #1C1917;
	color: #D4AF37;
	border: 1px solid rgba(212, 175, 55, 0.4);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 9999;
}
.jjh-back-to-top.jjh-btt-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.jjh-back-to-top:hover {
	background: #802525;
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(128, 37, 37, 0.4);
}

/* ==========================================================================
   404 Luxury Page Layout
   ========================================================================== */
.jjh-404-main-stage {
	min-height: 75vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 20px;
	background: radial-gradient(circle at center, #FAF6EF 0%, #F4ECE1 100%);
}
.jjh-404-container {
	width: 100%;
	max-width: 840px;
	margin: 0 auto;
}
.jjh-404-card {
	background: #FFFFFF;
	border: 1.5px solid rgba(185, 138, 49, 0.25);
	border-radius: 28px;
	padding: 56px 48px;
	text-align: center;
	box-shadow: 0 16px 48px rgba(28, 25, 23, 0.08);
}
.jjh-404-title {
	font-family: var(--jjh-font-heading) !important;
	font-size: clamp(2rem, 3.8vw, 2.75rem) !important;
	font-weight: 700 !important;
	color: #1C1917 !important;
	line-height: 1.2 !important;
	margin: 0 0 16px !important;
}
.jjh-404-lead {
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: #615546 !important;
	max-width: 580px;
	margin: 0 auto 36px !important;
}
.jjh-404-search-box {
	max-width: 480px;
	margin: 0 auto 40px;
}
.jjh-404-search-box .search-form {
	display: flex;
	gap: 8px;
}
.jjh-404-search-box input[type="search"] {
	flex: 1;
	height: 48px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1.5px solid rgba(185, 138, 49, 0.3);
	background: #FAF6EF;
	font-size: 14.5px;
	color: #1C1917;
	outline: none;
	transition: border-color 0.2s ease;
}
.jjh-404-search-box input[type="search"]:focus {
	border-color: #802525;
}
.jjh-404-search-box input[type="submit"],
.jjh-404-search-box button[type="submit"],
.jjh-404-search-box .search-submit {
	height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	background: #802525;
	color: #FFFFFF;
	font-weight: 600;
	font-size: 14px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
}
.jjh-404-search-box input[type="submit"]:hover,
.jjh-404-search-box button[type="submit"]:hover,
.jjh-404-search-box .search-submit:hover {
	background: #9E2F2F;
}
.jjh-404-links-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	text-align: left;
}
@media (max-width: 640px) {
	.jjh-404-card {
		padding: 36px 20px;
	}
	.jjh-404-links-grid {
		grid-template-columns: 1fr;
	}
}
.jjh-404-link-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: #FAF6EF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-radius: 16px;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.jjh-404-link-card:hover {
	background: #FFFFFF;
	border-color: rgba(185, 138, 49, 0.5);
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(28, 25, 23, 0.08);
}
.jjh-404-link-icon {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: rgba(185, 138, 49, 0.15);
	color: #9A6F1A;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.jjh-404-link-info h4 {
	font-family: var(--jjh-font-heading);
	font-size: 15px;
	font-weight: 700;
	color: #1C1917;
	margin: 0 0 4px;
}
.jjh-404-link-info p {
	font-size: 12.5px;
	color: #7A6F62;
	margin: 0;
	line-height: 1.4;
}
.jjh-404-arrow {
	margin-left: auto;
	color: #B98A31;
	font-weight: 700;
	font-size: 16px;
	transition: transform 0.25s ease;
}
.jjh-404-link-card:hover .jjh-404-arrow {
	transform: translateX(4px);
	color: #802525;
}

/* ==========================================================================
   Editorial Blog & Archive Layout
   ========================================================================== */
.jjh-archive-main-stage,
.jjh-single-post-stage {
	padding: 60px 20px 90px;
	background-color: #FDFBF7;
}
.jjh-archive-container {
	max-width: var(--jjh-container-width);
	margin: 0 auto;
}
.jjh-archive-header {
	text-align: center;
	margin-bottom: 50px;
}
.jjh-archive-title {
	font-family: var(--jjh-font-heading) !important;
	font-size: clamp(2.2rem, 4vw, 3rem) !important;
	font-weight: 700 !important;
	color: #1C1917 !important;
	margin: 0 0 12px !important;
}
.jjh-archive-desc {
	font-size: 16px;
	color: #615546;
	max-width: 620px;
	margin: 0 auto;
}
.jjh-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-bottom: 50px;
}
@media (max-width: 1024px) {
	.jjh-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.jjh-blog-grid {
		grid-template-columns: 1fr;
	}
}
.jjh-blog-card {
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 16px rgba(28, 25, 23, 0.04);
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.jjh-blog-card:hover {
	transform: translateY(-6px);
	border-color: rgba(185, 138, 49, 0.5);
	box-shadow: 0 16px 36px rgba(28, 25, 23, 0.09);
}
.jjh-blog-card-thumb {
	position: relative;
	width: 100%;
	height: 220px;
	overflow: hidden;
	display: block;
}
.jjh-blog-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.jjh-blog-card:hover .jjh-blog-card-thumb img {
	transform: scale(1.06);
}
.jjh-blog-card-body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.jjh-blog-card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 12px;
	color: #8A7F6E;
}
.jjh-single-cat-badge {
	font-size: 11px;
	font-weight: 700;
	color: #802525;
	background: rgba(128, 37, 37, 0.08);
	padding: 3px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.jjh-blog-card-title {
	font-family: var(--jjh-font-heading);
	font-size: 19px;
	font-weight: 700;
	color: #1C1917;
	line-height: 1.35;
	margin: 0 0 10px;
}
.jjh-blog-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.jjh-blog-card-title a:hover {
	color: #802525;
}
.jjh-blog-card-excerpt {
	font-size: 14px;
	color: #615546;
	line-height: 1.6;
	margin: 0 0 20px;
	flex-grow: 1;
}
.jjh-blog-card-link {
	font-size: 13.5px;
	font-weight: 700;
	color: #802525;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap 0.25s ease;
}
.jjh-blog-card-link:hover {
	gap: 10px;
	color: #9E2F2F;
}
.jjh-pagination-wrap {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}
.jjh-pagination-wrap .nav-links {
	display: flex;
	gap: 8px;
}
.jjh-pagination-wrap .page-numbers {
	padding: 8px 16px;
	border-radius: 10px;
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	color: #1C1917;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.2s ease;
}
.jjh-pagination-wrap .page-numbers.current,
.jjh-pagination-wrap .page-numbers:hover {
	background: #802525;
	color: #FFFFFF;
	border-color: #802525;
}

/* ==========================================================================
   Editorial Single Post
   ========================================================================== */
.jjh-single-article {
	max-width: 820px;
	margin: 0 auto;
	background: #FFFFFF;
	border: 1px solid rgba(185, 138, 49, 0.2);
	border-radius: 24px;
	padding: 48px 44px;
	box-shadow: 0 8px 32px rgba(28, 25, 23, 0.05);
}
@media (max-width: 640px) {
	.jjh-single-article {
		padding: 28px 20px;
		border-radius: 16px;
	}
}
.jjh-single-header {
	margin-bottom: 32px;
}
.jjh-single-meta-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 13px;
	color: #8A7F6E;
}
.jjh-single-title {
	font-family: var(--jjh-font-heading) !important;
	font-size: clamp(2rem, 3.8vw, 2.75rem) !important;
	font-weight: 700 !important;
	color: #1C1917 !important;
	line-height: 1.25 !important;
	margin: 0 0 24px !important;
}
.jjh-single-author-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(185, 138, 49, 0.15);
}
.jjh-single-avatar img {
	border-radius: 50%;
	display: block;
}
.jjh-single-author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.jjh-author-name {
	font-weight: 700;
	color: #1C1917;
	font-size: 14.5px;
}
.jjh-read-time {
	font-size: 12.5px;
	color: #8A7F6E;
}
.jjh-single-featured-wrap {
	margin: 0 -44px 36px;
	overflow: hidden;
}
@media (max-width: 640px) {
	.jjh-single-featured-wrap {
		margin: 0 -20px 24px;
	}
}
.jjh-single-featured-img {
	width: 100%;
	height: auto;
	max-height: 460px;
	object-fit: cover;
	display: block;
}
.jjh-single-content {
	font-size: 17px;
	line-height: 1.8;
	color: #2C2621;
}
.jjh-single-content p {
	margin-bottom: 1.6em;
}
.jjh-single-content h2,
.jjh-single-content h3 {
	font-family: var(--jjh-font-heading);
	color: #1C1917;
	margin-top: 2em;
	margin-bottom: 0.8em;
}
.jjh-single-footer {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid rgba(185, 138, 49, 0.15);
}
.jjh-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 32px;
	padding: 20px;
	background: #FAF6EF;
	border-radius: 14px;
}
.jjh-post-nav a {
	color: #802525;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
.jjh-post-nav a:hover {
	text-decoration: underline;
}