/*
 * Oct-2026 Base44 update — scoped styles (prefix .jkoc-) for the new/changed
 * pieces. The compiled Tailwind file cannot be rebuilt, so everything new
 * lives here and never depends on classes missing from tailwind.css.
 */

/* ---- Global: image protection (index.css) ------------------------------ */
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---- Layout helpers ---------------------------------------------------- */
.jkoc-wrap { max-width: 80rem; margin: 0 auto; padding: 0 1rem; width: 100%; }
@media (min-width: 640px) { .jkoc-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .jkoc-wrap { padding: 0 2rem; } }
.jkoc-sec { padding: 3rem 0; }
@media (min-width: 768px) { .jkoc-sec { padding: 5rem 0; } }
.jkoc-sec--sm { padding: 2rem 0; }
@media (min-width: 768px) { .jkoc-sec--sm { padding: 3rem 0; } }
.jkoc-bg-soft { background: #F8F9FA; }
.jkoc-bg-white { background: #fff; }
.jkoc-center { text-align: center; }
.jkoc-just { text-align: justify; }
.jkoc-ink { color: #2c2c2c; line-height: 1.625; font-size: 1rem; }
.jkoc-block { display: block; }

.jkoc-badge { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .75rem; padding: .375rem .75rem; border-radius: .375rem; background-color: #EBF1E9; color: #2d4d1f; }
.jkoc-h2 { font-size: 32px; font-weight: 800; line-height: 1.25; letter-spacing: -.025em; color: hsl(0 0% 12%); margin: 0 0 1rem; font-family: var(--font-heading, 'Inter', sans-serif); }
.jkoc-lede { line-height: 1.625; color: #2c2c2c; margin: 0; }
.jkoc-head { margin-bottom: 3rem; text-align: left; }
.jkoc-head--c { text-align: center; }

/* Pill buttons */
.jkoc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 3rem; padding: 0 1.5rem; border-radius: 9999px; font-weight: 700; font-size: 1rem; text-align: center; text-decoration: none; transition: filter .2s, background-color .2s; border: 2px solid transparent; line-height: 1.2; }
.jkoc-btn:hover { filter: brightness(1.07); }
.jkoc-btn--orange { background: #e65100; color: #fff; }
.jkoc-btn--green { background: #589146; color: #fff; }
.jkoc-btn--white { border-color: #fff; color: #fff; background: transparent; }
.jkoc-btn--outline-green { border-color: #589146; color: #589146; background: transparent; }
@media (max-width: 639px) { .jkoc-btn { font-size: .875rem; } }
.jkoc-btnrow { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .jkoc-btnrow { flex-direction: row; } }
.jkoc-btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 1.75rem; height: 3rem; font-weight: 700; border-radius: 9999px; color: #fff !important; background: #589146; font-size: 1rem; text-decoration: none; transition: filter .2s; }
.jkoc-btn-pill:hover { filter: brightness(1.08); }
.jkoc-faq-more { margin-top: 2rem; display: flex; justify-content: center; }
.jkoc-bannerbtn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.5rem; border-radius: 4px; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; }

/* ---- Hero slider (Home) ------------------------------------------------- */
.jkoc-hero-eyebrow { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.2); }
.jkoc-hero-ctas { display: grid; grid-template-columns: 1fr; gap: .75rem; max-width: 42rem; }
@media (min-width: 640px) { .jkoc-hero-ctas { grid-template-columns: 1fr 1fr; } }
.jkoc-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; transition: all .2s; }
.jkoc-hero-arrow:hover { background: rgba(255,255,255,.2); transform: translateY(-50%) scale(1.1); }
.jkoc-hero-prev { left: 1rem; } .jkoc-hero-next { right: 1rem; }
@media (min-width: 768px) { .jkoc-hero-arrow { width: 3rem; height: 3rem; } .jkoc-hero-prev { left: 2rem; } .jkoc-hero-next { right: 2rem; } }
.jkoc-hero-dot { height: .5rem; width: .5rem; border-radius: 9999px; background: rgba(255,255,255,.4); border: 0; padding: 0; cursor: pointer; transition: all .3s; }
.jkoc-hero-dot:hover { background: rgba(255,255,255,.6); }
.jkoc-hero-dot.is-active { background: #fff; width: 2.5rem; }
.jkoc-hero-content[hidden] { display: none; }

/* ---- FAQ accordion (components/shared/FAQAccordion.jsx) ------------------ */
.jkoc-faq { display: flex; flex-direction: column; gap: .5rem; }
.jkoc-faq .py-4.jkoc-faq-item { padding: 0; border: 1px solid #fff; border-radius: 2px; overflow: hidden; }
.jkoc-faq-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 0 1rem; height: 50px; background-color: #EBF1E9; color: #000; border: 0; cursor: pointer; transition: background-color .2s; }
.jkoc-faq-bar[aria-expanded="true"] { background-color: #589146; color: #fff; }
.jkoc-faq-q { font-weight: 600; line-height: 1.25; font-size: 1rem; }
.jkoc-faq-chev { flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9999px; width: 1.75rem; height: 1.75rem; background: #589146; color: #fff; }
.jkoc-faq-bar[aria-expanded="true"] .jkoc-faq-chev { background: #fff; color: #589146; }
.jkoc-faq-chev > span { display: flex; }
.jkoc-faq-panel { padding: 1rem; background-color: #EBF1E9; }
.jkoc-faq-panel p { margin: 0 0 .75rem; line-height: 1.625; font-size: 1rem; color: #2c2c2c; text-align: justify; }
.jkoc-faq-links { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .375rem 1rem; align-items: center; }
.jkoc-faq-links-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: #767676; }
.jkoc-faq-links a { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 600; color: #599146; text-underline-offset: 2px; }
.jkoc-faq-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 2.5rem; }
.jkoc-faq-title { font-size: 32px; margin: 0; }
.jkoc-faq-wrap { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }

/* ---- Survey form --------------------------------------------------------- */
.jkoc-req { color: #dc2626; }
.jkoc-validate input.jkoc-invalid, .jkoc-validate select.jkoc-invalid, .jkoc-validate textarea.jkoc-invalid { border-color: #ef4444 !important; background-color: #fef2f2 !important; }
.jkoc-gdpr-box.jkoc-invalid { border: 1px solid #ef4444; background: #fef2f2; padding: .5rem; }
.jkoc-err { color: #dc2626; font-size: .75rem; margin: .25rem 0 0; }
.jkoc-submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; background: #e65100; border: 2px solid #e65100; color: #fff; padding: .875rem 2rem; font-size: .875rem; font-weight: 700; border-radius: 9999px; cursor: pointer; transition: background-color .2s, border-color .2s; }
.jkoc-submit:hover { background: #f06414; border-color: #f06414; }
.jkoc-submit:disabled { opacity: .5; }

/* ---- Split hero (Book a Survey + Root Barriers) ---------------------------- */
.jkoc-split { position: relative; width: 100%; display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 768px) { .jkoc-split { flex-direction: row; min-height: 669px; } }
.jkoc-split-l { width: 100%; display: flex; align-items: center; justify-content: flex-end; background-color: #2d4d1f; }
@media (min-width: 768px) { .jkoc-split-l { width: 50%; } }
.jkoc-split-in { width: 100%; max-width: 700px; padding: 4rem 1rem; }
.jkoc-split-in.is-tall { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 640px) { .jkoc-split-in { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .jkoc-split-in { padding-left: 2rem; padding-right: 2rem; } }
.jkoc-crumb { color: rgba(255,255,255,.7); font-size: .75rem; margin-bottom: 1.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.jkoc-crumb a { color: inherit; text-decoration: none; }
.jkoc-crumb a:hover { color: #fff; }
.jkoc-crumb .cur { color: #fff; }
.jkoc-crumb svg { opacity: .6; }
.jkoc-split h1 { font-weight: 800; color: #fff; line-height: 1.25; letter-spacing: -.025em; font-size: clamp(26px, 2.9vw, 42px); margin: 0; font-family: var(--font-heading, 'Inter', sans-serif); }
.jkoc-split p { color: rgba(255,255,255,.9); line-height: 1.625; font-size: 1rem; text-align: justify; margin: 1.5rem 0 0; }
.jkoc-split p + p { margin-top: 1rem; }
.jkoc-split-r { position: relative; width: 100%; min-height: 280px; background-size: cover; background-position: center; }
@media (min-width: 768px) { .jkoc-split-r { width: 50%; min-height: 100%; } }
.jkoc-split-r::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; pointer-events: none; background: linear-gradient(to right, #2d4d1f 0%, rgba(45,77,31,.9) 22%, rgba(45,77,31,.62) 45%, rgba(45,77,31,.34) 68%, rgba(45,77,31,.12) 86%, rgba(45,77,31,0) 100%); }
@media (min-width: 768px) { .jkoc-split-r::before { width: 75%; } }
.jkoc-split-btns { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; max-width: 620px; }
@media (min-width: 640px) { .jkoc-split-btns { flex-direction: row; } .jkoc-split-btns .jkoc-btn:first-child { width: 214px; flex-shrink: 0; } .jkoc-split-btns .jkoc-btn:last-child { flex: 1; } }
.jkoc-split-btns.is-2col { display: grid; grid-template-columns: 1fr 1fr; max-width: 440px; }
.jkoc-split-btns.is-2col .jkoc-btn { width: auto !important; flex: none; }

/* ---- Stats strip ---------------------------------------------------------- */
.jkoc-stats { background: #EBF1E9; width: 100%; padding: 1.25rem 0; }
@media (min-width: 1024px) { .jkoc-stats { height: 130px; padding: 0; display: flex; align-items: center; } }
.jkoc-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; width: 100%; }
@media (min-width: 1024px) { .jkoc-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.jkoc-stat { text-align: center; }
.jkoc-stat-v { font-weight: 800; line-height: 1; font-size: clamp(18px, 1.8vw, 26px); color: #e65100; font-family: var(--font-heading, 'Inter', sans-serif); }
.jkoc-stat-t { margin-top: .375rem; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #3a6228; }
.jkoc-stat-p { margin: .25rem 0 0; line-height: 1.625; font-size: .75rem; color: #2c2c2c; font-weight: 700; text-align: center; font-family: 'Inter 18pt', 'Inter', sans-serif; }

/* ---- Two-column content blocks ----------------------------------------------- */
.jkoc-two { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .jkoc-two { grid-template-columns: 1fr 1fr; gap: 3.5rem; } .jkoc-two.is-center { align-items: center; } }
.jkoc-two > .o1 { order: 1; } .jkoc-two > .o2 { order: 2; }
@media (min-width: 1024px) { .jkoc-two > .l-o2 { order: 2; } .jkoc-two > .l-o1 { order: 1; } }

.jkoc-formcard { border-radius: 1rem; border: 1px solid hsl(40 16% 89%); padding: 1.5rem; background: #f8f9fa; box-shadow: 0 10px 15px -3px rgba(58,97,40,.1), 0 4px 6px -4px rgba(58,97,40,.08); }
@media (min-width: 768px) { .jkoc-formcard { padding: 2rem; } }
.jkoc-formcard h2 { font-size: 1.5rem; font-weight: 800; color: #1c1c1c; margin: 0 0 .25rem; font-family: 'Inter 18pt', 'Inter', sans-serif; }
.jkoc-formcard > p { margin: 0 0 1.5rem; color: #2c2c2c; }
.jkoc-incl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.jkoc-incl li { display: flex; align-items: flex-start; gap: .75rem; color: #2c2c2c; }
.jkoc-incl svg { flex-shrink: 0; margin-top: 2px; color: #599146; }
.jkoc-note { margin-top: 1.5rem; border-radius: .75rem; padding: 1.25rem; background: #EBF1E9; }
@media (min-width: 768px) { .jkoc-note { padding: 1.5rem; } }
.jkoc-note p { margin: 0; color: #2c2c2c; line-height: 1.625; text-align: justify; font-style: italic; font-weight: 600; font-family: 'Inter 18pt', 'Inter', sans-serif; }
.jkoc-h3 { font-size: 1.125rem; font-weight: 700; color: #1c1c1c; margin: 2rem 0 1.25rem; letter-spacing: .025em; font-family: 'Inter 18pt', 'Inter', sans-serif; }
.jkoc-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; user-select: none; }
.jkoc-photo { position: relative; overflow: hidden; border-radius: .75rem; aspect-ratio: 1/1; }
.jkoc-photo.is-wide { grid-column: span 2; aspect-ratio: 2/1; }
.jkoc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ---- Image-overlay cards (costs, benefits) --------------------------------------- */
.jkoc-cards3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .jkoc-cards3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .jkoc-cards3 { grid-template-columns: repeat(3, 1fr); } }
.jkoc-imgcard { position: relative; overflow: hidden; border-radius: .75rem; border: 1px solid hsl(40 16% 89%); border-top: 4px solid #599146; min-height: 340px; display: flex; flex-direction: column; }
.jkoc-imgcard.is-lg { border-radius: 1rem; }
.jkoc-imgcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jkoc-imgcard-shade { position: absolute; inset: 0; background: linear-gradient(rgba(20,32,14,.32), rgba(20,32,14,.86)); }
.jkoc-imgcard-body { position: relative; padding: 1.5rem; }
@media (min-width: 768px) { .jkoc-imgcard-body { padding: 1.75rem; } }
.jkoc-imgcard-ic { width: 3.5rem; height: 3.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); box-shadow: 0 1px 8px rgba(0,0,0,.35); color: #fff; }
.jkoc-imgcard h3 { color: #fff; font-weight: 700; font-size: 1rem; margin: 0 0 .5rem; text-shadow: 0 1px 8px rgba(0,0,0,.6); font-family: var(--font-heading, 'Inter', sans-serif); }
@media (min-width: 768px) { .jkoc-imgcard h3 { font-size: 1.125rem; } }
.jkoc-imgcard p { color: #fff; line-height: 1.625; font-size: 1rem; margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,.7); }

/* ---- Why choose (5 round icons) --------------------------------------------------- */
.jkoc-five { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .jkoc-five { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .jkoc-five { grid-template-columns: repeat(5, 1fr); } }
.jkoc-five > div { text-align: center; }
.jkoc-five-ic { width: 7rem; height: 7rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; background: #EBF1E9; border: 1px solid rgba(89,145,70,.28); color: #599146; }
.jkoc-five h3 { font-size: 1rem; font-weight: 700; color: #1c1c1c; margin: 0 0 .5rem; font-family: var(--font-heading, 'Inter', sans-serif); }
.jkoc-five p { margin: 0; line-height: 1.625; color: #2c2c2c; text-align: center; }

/* ---- Root barrier: intro image, steps, methods ------------------------------------- */
.jkoc-bigimg { width: 100%; height: 640px; object-fit: cover; border-radius: .75rem; box-shadow: 0 10px 15px -3px rgba(58,97,40,.1); display: block; }
@media (max-width: 1023px) { .jkoc-bigimg { height: 360px; } }
.jkoc-steps { display: flex; flex-direction: column; gap: 1.5rem; }
.jkoc-step { border-radius: .75rem; overflow: hidden; border: 1px solid hsl(40 16% 89%); display: grid; grid-template-columns: 1fr; background: #EBF1E9; }
@media (min-width: 768px) { .jkoc-step { grid-template-columns: 1fr 1fr; } }
.jkoc-step-img { position: relative; min-height: 260px; }
@media (min-width: 768px) { .jkoc-step-img { min-height: 320px; } }
.jkoc-step-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jkoc-step-body { padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) { .jkoc-step-body { padding: 2rem; } }
@media (min-width: 768px) {
	.jkoc-step .jkoc-step-img { order: 2; } .jkoc-step .jkoc-step-body { order: 1; border-left: 4px solid #599146; }
	.jkoc-step.is-flip .jkoc-step-img { order: 1; } .jkoc-step.is-flip .jkoc-step-body { order: 2; border-left: 0; border-right: 4px solid #599146; }
}
.jkoc-step-top { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.jkoc-step-ic { width: 4rem; height: 4rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(89,145,70,.1); color: #2d4d1f; }
.jkoc-step h3 { font-size: 22px; line-height: 1.375; font-weight: 700; margin: 0; color: hsl(0 0% 12%); font-family: var(--font-heading, 'Inter', sans-serif); }
.jkoc-step h3 span { display: block; }
.jkoc-step h3 .s1 { font-family: 'Inter 18pt', 'Inter', sans-serif; }
.jkoc-step-body p { margin: 0; line-height: 1.625; color: #2c2c2c; text-align: justify; }
.jkoc-fullband { margin-top: 2.5rem; background: #3a6128; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 2rem calc(50vw - 50%); display: flex; align-items: center; }
@media (min-width: 768px) { .jkoc-fullband { min-height: 200px; } }
.jkoc-fullband-in { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.jkoc-fullband p { color: #fff; line-height: 1.625; text-align: center; font-size: 1.25rem; font-weight: 700; margin: 0; font-family: 'Inter 18pt', 'Inter', sans-serif; }
.jkoc-fullband .jkoc-btn { white-space: nowrap; }
.jkoc-rb-wrap { overflow-x: clip; }

.jkoc-methods { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .jkoc-methods { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .jkoc-methods { grid-template-columns: repeat(3, 1fr); } }
.jkoc-method { background: #fff; border-radius: .75rem; padding: 1.5rem; border: 1px solid hsl(40 16% 89%); border-top: 4px solid #599146; display: flex; flex-direction: column; }
@media (min-width: 768px) { .jkoc-method { padding: 1.75rem; } }
.jkoc-method-img { margin: -1.5rem -1.5rem 1.25rem; overflow: hidden; border-radius: .75rem .75rem 0 0; }
@media (min-width: 768px) { .jkoc-method-img { margin: -1.75rem -1.75rem 1.25rem; } }
.jkoc-method-img img { width: 100%; height: 10rem; object-fit: cover; display: block; }
@media (min-width: 768px) { .jkoc-method-img img { height: 11rem; } }
.jkoc-method h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .5rem; color: hsl(0 0% 12%); font-family: var(--font-heading, 'Inter', sans-serif); }
.jkoc-method .sub { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: #589146; margin: 0 0 .5rem; }
.jkoc-method .txt { line-height: 1.625; color: #2c2c2c; text-align: justify; margin: 0 0 1.25rem; }
.jkoc-method .ft { font-size: .875rem; font-weight: 700; color: hsl(0 0% 12%); margin: 0 0 .5rem; }
.jkoc-method ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.jkoc-method li { display: flex; gap: .5rem; line-height: 1.625; color: #2c2c2c; }
.jkoc-method li i { margin-top: 9px; width: 6px; height: 6px; border-radius: 9999px; background: #589146; flex-shrink: 0; }
.jkoc-method li span { text-align: justify; }

.jkoc-ctaband { position: relative; max-width: 80rem; margin: 0 auto; overflow: hidden; border-radius: 12px; }
.jkoc-ctaband-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.jkoc-ctaband-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,30,18,.88) 0%, rgba(15,30,18,.85) 100%); }
.jkoc-ctaband-in { position: relative; z-index: 2; padding: 3rem 1rem; text-align: center; }
@media (min-width: 768px) { .jkoc-ctaband-in { padding: 4rem 2rem; } }
.jkoc-ctaband h2 { font-size: 32px; font-weight: 800; line-height: 1.25; color: #fff; letter-spacing: -.025em; margin: 0 0 1.25rem; font-family: var(--font-heading, 'Inter', sans-serif); }
.jkoc-ctaband p { color: rgba(255,255,255,.85); line-height: 1.625; font-size: 1rem; margin: 0 0 1rem; text-align: center; }
@media (min-width: 768px) { .jkoc-ctaband p { font-size: 1.125rem; } }
.jkoc-ctaband p.sm { color: rgba(255,255,255,.7); font-size: .875rem; font-weight: 600; margin-top: 2.5rem; }
.jkoc-ctaband .jkoc-btnrow { justify-content: center; margin-top: 2rem; }
.jkoc-padx { padding: 0 1rem; } @media (min-width: 640px) { .jkoc-padx { padding: 0 1.5rem; } } @media (min-width: 1024px) { .jkoc-padx { padding: 0 2rem; } }

/* ---- FAQ hub ------------------------------------------------------------------------- */
.jkoc-fh-section { overflow-x: clip; }
.jkoc-fh-search { width: 100%; background: #f4f6f3; border: 1px solid #ccc; padding: .75rem 3rem .75rem 1rem; font-size: .875rem; color: #333; border-radius: 4px; box-sizing: border-box; }
.jkoc-fh-search:focus { outline: 2px solid rgba(140,198,63,.4); outline-offset: 0; }
.jkoc-fh-search-icon { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: #999; display: flex; }
.jkoc-fh-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 1rem 0 2rem; scroll-margin-top: 10rem; }
@media (min-width: 640px) { .jkoc-fh-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .jkoc-fh-grid { grid-template-columns: repeat(3, 1fr); } }
.jkoc-fh-tile { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: .75rem; padding: 1rem; text-align: left; min-height: 64px; border-radius: 4px; overflow: hidden; color: #fff; border: 1px solid rgba(255,255,255,.2); background-size: cover; background-position: center; cursor: pointer; text-decoration: none; font: inherit; }
@media (min-width: 640px) { .jkoc-fh-tile { flex-direction: column; justify-content: center; gap: .5rem; padding: .75rem; text-align: center; min-height: 120px; } }
@media (min-width: 1024px) { .jkoc-fh-tile { min-height: 0; aspect-ratio: 2/1; } }
.jkoc-fh-tile.is-active { border-color: #8cc63f; }
.jkoc-fh-tile.is-active .jkoc-fh-tile-icon { background: rgba(45,75,31,.92); }
.jkoc-fh-tile-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: rgba(45,75,31,.82); color: #fff; }
.jkoc-fh-tile-icon svg { width: 24px; height: 24px; }
@media (min-width: 640px) { .jkoc-fh-tile-icon { width: 3rem; height: 3rem; } .jkoc-fh-tile-icon svg { width: 28px; height: 28px; } }
.jkoc-fh-tile-label { line-height: 1.25; font-weight: 700; font-size: .875rem; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.5); font-family: 'Inter', sans-serif; }
@media (min-width: 640px) { .jkoc-fh-tile-label { font-size: 1rem; } }
.jkoc-fh-h2 { font-size: 1.25rem; font-weight: 800; color: #000; margin: 0 0 1rem; font-family: 'Inter 18pt', 'Inter', sans-serif; }
@media (min-width: 640px) { .jkoc-fh-h2 { font-size: 1.5rem; } }
.jkoc-fh-popular { display: grid; grid-template-columns: 1fr; gap: .5rem 2rem; }
@media (min-width: 768px) { .jkoc-fh-popular { grid-template-columns: 1fr 1fr; } }
.jkoc-fh-pop { display: flex; align-items: flex-start; gap: .5rem; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.jkoc-fh-pop svg { flex-shrink: 0; margin-top: 4px; }
.jkoc-fh-pop span { font-size: 1rem; color: #2c2c2c; font-weight: 500; font-family: 'Inter', sans-serif; }
.jkoc-fh-pop:hover span { color: #599146; }
#faq-results { scroll-margin-top: 10rem; }
.jkoc-fh-results { padding: 2rem calc(50vw - 50%); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #edf2eb; }
.jkoc-fh-legal { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 2px; font-size: .875rem; color: #333; font-style: italic; background: #f4f6f3; border: 1px solid #e0e0e0; }
.jkoc-fh-legal[hidden], .jkoc-fh-item[hidden], .jkoc-fh-a[hidden], .jkoc-fh-empty[hidden], #jkoc-fh-endcta[hidden], #jkoc-fh-marquee[hidden] { display: none !important; }
.jkoc-fh-list { display: flex; flex-direction: column; gap: .5rem; }
.jkoc-fh-item { scroll-margin-top: 6rem; border: 1px solid #fff; border-radius: 2px; overflow: hidden; }
.jkoc-fh-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: .75rem 1rem; background: #f4f6f3; color: #000; border: 0; cursor: pointer; font-weight: 600; line-height: 1.25; font-size: 1rem; font-family: inherit; }
.jkoc-fh-q .jkoc-fh-chev { flex-shrink: 0; color: #8cc63f; display: flex; transition: transform .2s; }
.jkoc-fh-item.is-open .jkoc-fh-q { background: #8cc63f; color: #1c2813; }
.jkoc-fh-item.is-open .jkoc-fh-chev { transform: rotate(180deg); color: #1c2813; }
.jkoc-fh-a { padding: 1rem; background: #fff; }
.jkoc-fh-a > p { margin: 0; line-height: 1.625; font-size: 1rem; color: #2c2c2c; text-align: justify; }
.jkoc-fh-links { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .375rem 1rem; align-items: center; }
.jkoc-fh-mini { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: #767676; }
.jkoc-fh-links a, .jkoc-fh-rel { display: inline-flex; align-items: flex-start; gap: .25rem; font-size: .875rem; font-weight: 600; color: #599146; text-underline-offset: 2px; }
.jkoc-fh-links a { align-items: center; }
.jkoc-fh-related { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e0e0e0; }
.jkoc-fh-empty { font-size: .875rem; color: #555; text-align: center; padding: 2rem 0; }
.jkoc-fh-back { display: inline-flex; align-items: center; gap: .5rem; background: #599146; color: #fff; padding: 0 1.5rem; height: 3rem; font-size: .875rem; font-weight: 700; border-radius: 4px; border: 0; cursor: pointer; }
.jkoc-fh-back:hover { background: #4d7c3e; }
.jkoc-fh-endcta { position: relative; overflow: hidden; margin-top: 1.5rem; padding: 2rem 1.25rem; display: flex; flex-direction: column; gap: 1.5rem; border-radius: 6px; background-size: cover; background-position: center; color: #fff; }
@media (min-width: 640px) { .jkoc-fh-endcta { padding: 2rem 1.5rem; } }
@media (min-width: 768px) { .jkoc-fh-endcta { padding: 2rem 2.5rem; } }
@media (min-width: 1024px) { .jkoc-fh-endcta { flex-direction: row; align-items: center; justify-content: space-between; min-height: 250px; } }
.jkoc-fh-endcta-shade { position: absolute; inset: 0; background: #000; opacity: .55; }
.jkoc-fh-endcta-text { position: relative; z-index: 10; max-width: 42rem; }
.jkoc-fh-endcta h3 { margin: 0 0 .75rem; font-weight: 800; font-size: 1.5rem; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.65); font-family: 'Inter 18pt', 'Inter', sans-serif; }
@media (min-width: 640px) { .jkoc-fh-endcta h3 { font-size: 1.875rem; } } @media (min-width: 768px) { .jkoc-fh-endcta h3 { font-size: 2.25rem; } }
.jkoc-fh-endcta p { margin: 0; line-height: 1.625; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.65); }
.jkoc-fh-endcta-btns { position: relative; z-index: 10; display: flex; flex-direction: column; gap: .75rem; width: 100%; flex-shrink: 0; }
@media (min-width: 1024px) { .jkoc-fh-endcta-btns { width: auto; min-width: 240px; } .jkoc-fh-endcta-btns a:last-child { align-self: flex-end; } }
.jkoc-fh-endcta-btns a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-size: 1rem; font-weight: 600; padding: .75rem 1rem; border-radius: 4px; color: #fff; text-decoration: none; text-align: center; }
@media (min-width: 768px) { .jkoc-fh-endcta-btns a { font-size: 18px; padding: .75rem 1.5rem; white-space: nowrap; } }
.jkoc-split-btns .jkoc-btn { padding: 0 1rem; }

/* ---- ChemicalFreeUSP (Home + About) --------------------------------------------------- */
.jkoc-usp { width: 100%; background: #f4f6f3; border-top: 1px solid #e8e5df; border-bottom: 1px solid #e8e5df; }
.jkoc-usp-in { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .jkoc-usp-in { padding-top: 5rem; padding-bottom: 5rem; } }
.jkoc-usp-head { text-align: center; max-width: 48rem; margin: 0 auto 2.5rem; }
.jkoc-usp-head .eyebrow { justify-content: center; }
.jkoc-usp-head h2 { margin: .75rem 0 0; font-weight: 800; font-size: 1.875rem; line-height: 1.25; color: #1c2813; font-family: var(--font-heading, 'Inter', sans-serif); }
@media (min-width: 768px) { .jkoc-usp-head h2 { font-size: 2.25rem; } }
.jkoc-usp-head p { margin: 1rem 0 0; color: #4a4a4a; font-size: 1.125rem; line-height: 1.625; }
.jkoc-usp-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .jkoc-usp-grid { grid-template-columns: repeat(3, 1fr); } }
.jkoc-usp-card { background: #fff; border-radius: .75rem; border: 1px solid #e8e5df; padding: 1.5rem; box-shadow: 0 1px 3px rgba(58,97,40,.08); }
@media (min-width: 768px) { .jkoc-usp-wide { padding: 2rem; } }
.jkoc-usp-ic { width: 3rem; height: 3rem; border-radius: .5rem; background: #ebf1e9; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: #599146; }
.jkoc-usp-card h3 { margin: 0 0 .5rem; font-weight: 700; font-size: 1.125rem; color: #1c2813; font-family: var(--font-heading, 'Inter', sans-serif); }
.jkoc-usp-card p { margin: 0; font-size: .875rem; color: #4a4a4a; line-height: 1.625; }
.jkoc-usp-wide { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .jkoc-usp-wide { flex-direction: row; align-items: center; } .jkoc-usp-wide-txt { flex: 1; } }
.jkoc-usp-wide h3 { font-size: 1.25rem; }
.jkoc-usp-btns { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) and (max-width: 767px) { .jkoc-usp-btns { flex-direction: row; } }
@media (min-width: 768px) { .jkoc-usp-btns { flex-shrink: 0; } }
.jkoc-usp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 1.5rem; height: 3rem; font-size: .875rem; font-weight: 700; border-radius: 4px; white-space: nowrap; text-decoration: none; transition: background-color .2s; }
.jkoc-usp-btn.is-solid { background: #599146; color: #fff; }
.jkoc-usp-btn.is-solid:hover { background: #4d7c3e; }
.jkoc-usp-btn.is-outline { background: #fff; color: #599146; border: 1px solid #599146; }

/* ---- Awards banner winner pill ----------------------------------------------------------- */
.jkoc-winner { display: inline-block; padding: .25rem .75rem; border-radius: 9999px; font-size: 11px; font-weight: 800; letter-spacing: .05em; color: #fff; background-color: #3a6228; border: 1.5px solid #d4af37; }