@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Light.ttf') format('truetype');
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

/* =========================================================
   JK Services AZ — Brand Stylesheet
   Palette pulled from the existing JK Services logo:
   deep teal #1B4C4F, warm red #DD4445, plus cream/sand neutrals
   ========================================================= */

:root {
  --jk-teal: #1b4c4f;
  --jk-teal-dark: #123335;
  --jk-red: #dd4445;
  --jk-red-dark: #c93334;
  --jk-cream: #faf6ee;
  --jk-sand: #efe3cf;
  --jk-white: #ffffff;
  --jk-ink: #2c2c2c;
  /* Actual on-screen height of the fixed <header>, set by js/custom.js at
     runtime (it measures the real header and keeps this in sync on load
     and resize). The fallback value here is only used for the instant
     before that script runs, or if JS is unavailable, so it's set a
     little tall on purpose to avoid ever under-shooting. */
  --jk-header-h: 160px;
}

body.clinic_version {
  color: var(--jk-ink);
}

a { color: var(--jk-teal); }
a:hover, a:focus { color: var(--jk-red); }

/* ---------- Header ---------- */
.jk-icontop { background-color: var(--jk-teal) !important; }
.jk-header-link { color: #666 !important; }
.header-top { padding: 12px 0; }
.info-inner span.icontop.jk-icontop { width: 32px; height: 32px; }
.iconcont { font-size: 14px !important; letter-spacing: normal !important; }
.header-bottom { background: var(--jk-white); border-top: 1px solid #eee; }
.header-bottom nav.main-menu ul.nav.navbar-nav > li a {
  padding: 14px 16px !important;
  font-size: 13px !important;
}
.nav.navbar-nav > li > a { color: var(--jk-teal) !important; font-weight: 600; }
.nav.navbar-nav > li > a.active,
.nav.navbar-nav > li > a:hover,
.nav.navbar-nav > li > a:focus { color: var(--jk-red) !important; }
/* The base theme CSS (custom.css) puts a solid red background + white
   box-shadow on hovered/active/focused nav links, which combined with
   the red text above produced an unreadable red-on-red box. Override
   both here so hover/active state reads as a subtle highlight instead. */
.header-bottom nav.main-menu ul.nav.navbar-nav > li a:hover,
.header-bottom nav.main-menu ul.nav.navbar-nav > li a:focus,
.header-bottom nav.main-menu ul.nav.navbar-nav > li a.active {
  background: var(--jk-cream) !important;
  box-shadow: none !important;
  color: var(--jk-red) !important;
}
.jk-header-cta { margin-left: 10px; }
/* This item is only meant to appear in the collapsed mobile menu.
   !important guards against it appearing at desktop widths, which was
   showing an extra "Schedule a Tour" row under the main nav. */
.jk-nav-cta-mobile { display: none !important; }
@media (max-width: 991px) {
  .jk-header-cta { display: none; }
  .jk-nav-cta-mobile { display: block !important; }
  .jk-nav-cta-mobile a { color: var(--jk-red) !important; font-weight: 700; }
}

/* ---------- Mobile: top info bar (phone/email/hours) ---------- */
/* The original build set the header-top container to a plain flex row
   with no wrapping, so on phones the logo + phone + email + hours all
   fought for space and caused horizontal overflow/squished text. */
.header-top .container { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 767px) {
  .header-top .container { justify-content: space-between; }
  .right-header { margin: 0; }
  .header-info { display: flex; flex-wrap: wrap; gap: 10px 16px; }
  .info-inner { margin-left: 0 !important; }
  .info-inner span.icontop.jk-icontop { width: 28px; height: 28px; }
  .iconcont { font-size: 12px !important; }
  /* Business hours are the least essential item at this width. */
  .header-info .info-inner:nth-child(3) { display: none; }
}
@media (max-width: 420px) {
  /* Email address wraps awkwardly on very small phones; phone number
     and the mobile "Schedule a Tour" nav item remain available. */
  .header-info .info-inner:nth-child(2) { display: none; }
}

/* ---------- Buttons ---------- */
.jk-btn-primary {
  background: var(--jk-red-dark);
  border: 2px solid var(--jk-red-dark);
  color: #fff !important;
  border-radius: 30px;
  padding: 12px 28px;
  font-weight: 700;
  text-transform: none;
  display: inline-block;
  transition: all .25s ease;
}
.jk-btn-primary:hover { background: #b12b2c; border-color: #b12b2c; color: #fff !important; transform: translateY(-2px); }

.jk-btn-outline {
  background: transparent;
  border: 2px solid var(--jk-white);
  color: #fff !important;
  border-radius: 30px;
  padding: 12px 28px;
  font-weight: 700;
  display: inline-block;
  transition: all .25s ease;
}
.jk-btn-outline:hover { background: rgba(255,255,255,0.15); color: #fff !important; }

.jk-btn-teal {
  background: var(--jk-teal);
  border: 2px solid var(--jk-teal);
  color: #fff !important;
  border-radius: 30px;
  padding: 12px 28px;
  font-weight: 700;
  display: inline-block;
  transition: all .25s ease;
}
.jk-btn-teal:hover { background: var(--jk-teal-dark); border-color: var(--jk-teal-dark); color: #fff !important; }

.jk-btn-sm { padding: 8px 18px; font-size: 14px; border-radius: 24px; }

/* ---------- Layout helpers ---------- */
.jk-section { padding: 70px 0; }
.jk-section-cream { background: var(--jk-cream); }
.jk-section-sand { background: var(--jk-sand); }
.jk-section-teal { background: var(--jk-teal); color: #fff; }
.jk-section-teal h2, .jk-section-teal h3, .jk-section-teal p { color: #fff; }

.jk-eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--jk-red-dark);
  font-size: 13px;
  margin-bottom: 10px;
  display: block;
}
.jk-heading { color: var(--jk-teal); font-weight: 800; margin-bottom: 18px; }
.jk-lead { color: #4a4a4a; font-size: 18px; line-height: 1.7; }
.jk-center { text-align: center; }
.jk-max-720 { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
.jk-hero {
  position: relative;
  background: linear-gradient(120deg, var(--jk-teal) 0%, var(--jk-teal-dark) 100%);
  color: #fff;
  padding: calc(var(--jk-header-h) + 40px) 0 90px;
  text-align: left;
}
.jk-hero h1 { font-size: 48px; font-weight: 800; color: #fff; line-height: 1.15; }
.jk-hero .jk-hero-sub { font-size: 22px; color: var(--jk-sand); font-weight: 600; margin-bottom: 18px; }
.jk-hero p.jk-hero-copy { font-size: 18px; color: #f1ede2; width: 100%; line-height: 1.7; }
.jk-hero-buttons { margin-top: 25px; display: flex; flex-wrap: nowrap; gap: 12px; }
.jk-hero-buttons a { margin: 0; white-space: nowrap; }

/* ---------- Hero media (image) ---------- */
.jk-hero-media { display: flex; align-items: center; justify-content: center; margin-top: 20px; }
.jk-hero-media img { max-width: 100%; height: auto; border-radius: 20px; }
@media (min-width: 768px) {
  .jk-hero-media { margin-top: 0; }
}
/* At the narrower end of the md breakpoint (992-1199px, ~750px column)
   the three hero buttons are tight for space on one line. Trim padding
   and type size just enough to keep them on a single row rather than
   letting the row wrap onto two lines. */
@media (min-width: 992px) and (max-width: 1199px) {
  .jk-hero-buttons { gap: 8px; }
  .jk-hero-buttons a.jk-btn-primary,
  .jk-hero-buttons a.jk-btn-outline { padding: 11px 18px; font-size: 15px; }
}
@media (max-width: 767px) {
  .jk-hero { padding-bottom: 50px; text-align: center; }
  .jk-hero .jk-eyebrow,
  .jk-hero .jk-hero-buttons { text-align: center; }
  .jk-hero h1 { font-size: 32px; }
  .jk-hero .jk-hero-sub { font-size: 18px; }
  .jk-hero p.jk-hero-copy { font-size: 16px; }
  .jk-hero-buttons { flex-wrap: wrap; }
  .jk-hero-buttons a { display: block; width: 100%; margin: 8px 0; text-align: center; }
  .jk-hero-media { order: -1; margin-bottom: 25px; }
  .jk-hero-media img { max-width: 85%; }
}

/* ---------- Discover Center intro media (illustration) ---------- */
.jk-discover-media { display: flex; align-items: center; justify-content: center; }
.jk-discover-media img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
  .jk-discover-media { margin-top: 30px; }
  .jk-discover-media img { max-width: 80%; }
}
/* Interior-page hero (About, Careers, Programs, etc). Previously this used
   a smaller, hardcoded padding-top (110px) than the home hero (130px) even
   though both sit under the exact same fixed header — on pages where the
   header rendered taller than 110px (e.g. header-top wrapping to two
   lines, or a page with a mis-sized logo) the eyebrow/H1 ended up hidden
   behind the nav. Both heroes now derive from the same measured value. */
.jk-hero-page { padding: calc(var(--jk-header-h) + 30px) 0 60px; text-align: center; }
.jk-hero-page h1 { font-size: 40px; }
.jk-hero-page p { font-size: 19px; max-width: 780px; margin: 0 auto; color: #f1ede2; }

/* Any in-page anchor link (e.g. "Apply for a Job" -> #service, footer
   "back to top" -> #top, skip link -> #main-content) needs the same
   offset, or the fixed header covers the top of the target section when
   the browser jumps to it. */
main#main-content,
[id] { scroll-margin-top: var(--jk-header-h); }

/* ---------- Cards ---------- */
.jk-card {
  background: #fff;
  border-radius: 14px;
  padding: 30px 26px;
  box-shadow: 0 6px 24px rgba(27,76,79,0.08);
  height: 100%;
  margin-bottom: 30px;
  border-top: 4px solid var(--jk-red);
  transition: transform .2s ease, box-shadow .2s ease;
}
.jk-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(27,76,79,0.14); }
.jk-card .jk-card-icon { font-size: 34px; color: var(--jk-red); margin-bottom: 16px; }
.jk-card h2, .jk-card h3, .jk-card h4 { color: var(--jk-teal); font-weight: 700; margin-bottom: 10px; }
.jk-card h2 { font-size: 18px; }
.jk-card p { color: #555; margin-bottom: 8px; }
.jk-card ul { padding-left: 18px; color: #555; }
.jk-card-teal-top { border-top-color: var(--jk-teal); }

/* Feature/callout card variant — a single highlighted card that sits next
   to a block of prose (e.g. the homepage "Community Experts" preview).
   A round icon badge and a touch more padding reads as a deliberate
   callout rather than a generic grid tile. */
.jk-card-highlight {
  padding: 36px 32px;
  border-top: none;
  border-left: 4px solid var(--jk-teal);
}
.jk-card-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--jk-teal);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.jk-card-highlight h3 { font-size: 21px; }
.jk-card-highlight p { color: #555; font-size: 16px; line-height: 1.7; margin-bottom: 0; }

/* Bootstrap's float-based grid can misalign the next row when cards in
   the previous row have different heights (seen on the contact-us.php
   department cards, where the taller "Careers" card pushed the row
   below it to wrap in the wrong place). Switching any row that holds
   jk-cards to flexbox avoids that entirely, site-wide.
   NOTE: only the column(s) that themselves directly wrap a .jk-card get
   display:flex — a previous version applied this to every column in the
   row, which broke mixed rows (e.g. a text column next to a card column)
   by turning the text column's own children (eyebrow, heading,
   paragraphs, button) into horizontal flex items instead of a normal
   stacked block. */
.row:has(> [class*="col-"] > .jk-card) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}
.row:has(> [class*="col-"] > .jk-card) > [class*="col-"]:has(> .jk-card) {
  display: flex;
}

/* "Chip" cards — a jk-card whose only content is a short heading (no
   paragraph copy), used for things like a list of program values or job
   perks. Left at the default jk-card padding these end up as tall,
   mostly-empty boxes with a lot of dead space around one short line, and
   when they sit in a 4-per-row grid an uneven item count (e.g. 7) leaves
   a lopsided, unaligned last row. Giving them a compact, centered,
   flexible width fixes both: they read as tidy label chips, and they
   wrap/center naturally regardless of how many there are. */
.jk-card:has(> h4:only-child),
.jk-card:has(> h3:only-child) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px 24px;
  min-height: 84px;
}
.jk-card:has(> h4:only-child) h4,
.jk-card:has(> h3:only-child) h3 { margin-bottom: 0; }
.row:has(> [class*="col-"] > .jk-card:has(> h4:only-child)) > [class*="col-"],
.row:has(> [class*="col-"] > .jk-card:has(> h3:only-child)) > [class*="col-"] {
  flex: 1 1 230px;
  max-width: 270px;
  width: auto;
}

/* Narrow icon/step grids — five- or six-item "process" rows built from
   Bootstrap's col-md-2 (~16% width). At that width, sentence-length copy
   ("Coordinate authorization and an anticipated start date.") wraps into
   many short lines inside a very narrow column. Give these a sane
   minimum width and let them wrap to fewer per row instead. */
.row:has(> .col-md-2) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.row:has(> .col-md-2) > .col-md-2 {
  flex: 1 1 170px;
  max-width: 210px;
  width: auto;
}
@media (max-width: 767px) {
  .row:has(> .col-md-2) > .col-md-2 { flex: 1 1 45%; max-width: none; }
}

/* Vertically center two mismatched-height columns in a row (e.g. a text
   column next to a shorter/taller card) instead of the default
   float-based top alignment, which left one column visibly floating
   above or below the other. */
.jk-row-middle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Timeline (typical day) ---------- */
.jk-timeline { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.jk-timeline-item {
  background: #fff;
  border-radius: 12px;
  padding: 18px 16px;
  width: 190px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(27,76,79,0.10);
  border-bottom: 4px solid var(--jk-red);
}
.jk-timeline-item .jk-time { display: block; font-weight: 800; color: var(--jk-red); margin-bottom: 6px; font-size: 15px; }
.jk-timeline-item .jk-activity { color: var(--jk-teal); font-weight: 600; font-size: 15px; }

/* ---------- Weekly rhythm ---------- */
.jk-week-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 30px; }
@media (max-width: 991px) { .jk-week-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jk-week-grid { grid-template-columns: 1fr; } }
.jk-week-card { background: #fff; border-radius: 12px; padding: 22px 18px; box-shadow: 0 4px 16px rgba(27,76,79,0.10); border-left: 5px solid var(--jk-teal); }
.jk-week-card h3 { color: var(--jk-red); margin-bottom: 6px; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }
.jk-week-card h4 { color: var(--jk-teal); font-weight: 700; margin-bottom: 8px; }
.jk-week-card p { color: #555; font-size: 14px; }

/* ---------- Monthly themes ---------- */
.jk-month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
@media (max-width: 991px) { .jk-month-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jk-month-grid { grid-template-columns: 1fr; } }
.jk-month-card { background: var(--jk-cream); border-radius: 10px; padding: 16px; text-align: center; }
.jk-month-card .jk-month-name { display: block; font-weight: 800; color: var(--jk-teal); }
.jk-month-card .jk-month-theme { color: #555; font-size: 14px; }

/* ---------- Program area badges (Discover Center) ---------- */
.jk-program-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 20px; }
@media (max-width: 767px) { .jk-program-grid { grid-template-columns: 1fr; } }

/* ---------- Service cards (Our Programs) ---------- */
.jk-service-card { background: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 6px 24px rgba(27,76,79,0.08); margin-bottom: 30px; border-top: 4px solid var(--jk-teal); }
.jk-service-card .jk-service-code { display: inline-block; background: var(--jk-sand); color: var(--jk-teal-dark); font-weight: 700; font-size: 12px; letter-spacing: 1px; padding: 4px 10px; border-radius: 20px; margin-left: 10px; }
.jk-service-card h2 { color: var(--jk-teal); font-size: 24px; font-weight: 800; }
.jk-service-card .jk-service-meta { margin: 14px 0; }
.jk-service-card .jk-service-meta strong { color: var(--jk-red-dark); }

/* ---------- CTA banner ---------- */
.jk-cta-banner { background: var(--jk-red-dark); color: #fff; border-radius: 16px; padding: 50px 40px; text-align: center; }
.jk-cta-banner h2, .jk-cta-banner p { color: #fff; }
.jk-cta-banner .jk-btn-outline { border-color: #fff; }

/* ---------- Forms ---------- */
.jk-form-card { background: #fff; border-radius: 14px; padding: 34px; box-shadow: 0 6px 24px rgba(27,76,79,0.10); }
.jk-form-card label { font-weight: 600; color: var(--jk-teal); display: block; margin-bottom: 6px; }
.jk-form-card input,
.jk-form-card select,
.jk-form-card textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 14px;
}
.jk-form-card .jk-form-note { background: var(--jk-cream); border-left: 4px solid var(--jk-teal); padding: 14px 16px; border-radius: 6px; font-size: 14px; color: #444; margin-bottom: 20px; }

/* ---------- Video embed wrapper ---------- */
.jk-video-wrap {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(27,76,79,0.10);
  padding: 20px;
}
.jk-video-frame { position: relative; width: 100%; max-width: 480px; margin: 0 auto; }

/* ---------- Footer ---------- */
.jk-footer {
  position: relative;
  float: none;
  width: 100%;
  overflow: hidden;
  padding: 66px 0 28px;
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, rgba(210,70,65,.18), transparent 28%),
    linear-gradient(135deg, #173f42 0%, #0f3235 100%);
}
.jk-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--jk-red), #ef9d78 52%, var(--jk-red));
}
.jk-footer .container { position: relative; z-index: 1; }

.jk-footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 52px;
  padding: 28px 32px;
  color: var(--jk-teal-dark);
  background: linear-gradient(135deg, #fffaf2 0%, #f3e4ce 100%);
  border: 1px solid rgba(255,255,255,.55);
  border-left: 6px solid var(--jk-red);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(3,24,26,.24);
}
.jk-footer-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--jk-red-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.jk-footer-cta h2 { margin: 0 0 6px; color: var(--jk-teal-dark); font-size: 28px; line-height: 1.2; }
.jk-footer-cta p { margin: 0; color: #526163; font-size: 16px; }
.jk-footer-cta-actions { display: flex; flex: 0 0 auto; gap: 11px; }
.jk-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 21px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.jk-footer-btn:hover { transform: translateY(-2px); }
.jk-footer-btn-primary { color: #fff; background: var(--jk-red-dark); }
.jk-footer-btn-primary:hover,
.jk-footer-btn-primary:focus { color: #fff; background: #b73536; }
.jk-footer-btn-secondary { color: var(--jk-teal-dark); border-color: var(--jk-teal); background: transparent; }
.jk-footer-btn-secondary:hover,
.jk-footer-btn-secondary:focus { color: #fff; background: var(--jk-teal); }

.jk-footer-grid {
  display: grid;
  grid-template-columns: 1.15fr .8fr 1.15fr 1fr;
  gap: 46px;
  align-items: start;
}
.jk-footer-brand,
.jk-footer-column { min-width: 0; }
.jk-footer-logo {
  display: inline-flex;
  width: 82px;
  height: 82px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 26px rgba(0,0,0,.2);
}
.jk-footer-logo img { display: block; width: 68px; height: 68px; object-fit: contain; }
.jk-footer-brand h2 { margin: 0 0 12px; color: #fff; font-size: 21px; line-height: 1.3; }
.jk-footer-brand p { max-width: 310px; margin: 0; color: rgba(238,246,244,.76); font-size: 15px; line-height: 1.75; }
.jk-footer-column h3 {
  position: relative;
  margin: 8px 0 24px;
  padding-bottom: 13px;
  color: #fff;
  font-size: 17px;
  line-height: 1.25;
}
.jk-footer-column h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 3px;
  border-radius: 99px;
  background: var(--jk-red);
}
.jk-footer-links { display: grid; gap: 9px; list-style: none; padding: 0; margin: 0; }
.jk-footer-links li { margin: 0; }
.jk-footer-links a {
  display: inline-flex;
  align-items: center;
  color: rgba(238,246,244,.82);
  font-size: 14px;
  line-height: 1.45;
}
.jk-footer-links a::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--jk-red);
  transition: transform .2s ease;
}
.jk-footer-links a:hover,
.jk-footer-links a:focus { color: #fff; }
.jk-footer-links a:hover::before,
.jk-footer-links a:focus::before { transform: scale(1.6); }

.jk-footer-contact-list { display: grid; gap: 15px; margin: 0; font-style: normal; }
.jk-footer-contact-list > span { display: flex; align-items: flex-start; gap: 11px; color: rgba(238,246,244,.82); font-size: 14px; line-height: 1.55; }
.jk-footer-contact-list i {
  display: inline-flex;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  margin-top: -3px;
  color: #fff;
  background: rgba(210,70,65,.9);
  border-radius: 9px;
}
.jk-footer-contact-list a,
.jk-footer-hours a { color: #fff; }
.jk-footer-contact-list a:hover,
.jk-footer-hours a:hover { color: #f6c6b0; }
.jk-footer-emergency {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 0;
  padding: 11px 13px;
  color: #fff;
  background: var(--jk-red);
  border: 1px solid var(--jk-red);
  border-radius: 11px;
  font-size: 14px;
  line-height: 1.4;
}
.jk-footer-emergency i { color: #fff; }
.jk-footer-emergency strong { color: #fff !important; }

.jk-contact-map {
  margin-top: 32px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(27,76,79,.14);
}

.jk-contact-split {
  display: flex;
  align-items: stretch;
}
.jk-contact-column {
  display: flex;
  flex-direction: column;
}
.jk-contact-column .jk-form-card { flex: 1; }
.jk-contact-location-column { padding-left: 34px; }
.jk-contact-intro {
  padding: 3px 2px 0;
}
.jk-contact-intro .jk-heading { margin-bottom: 12px; }
.jk-contact-intro p {
  max-width: 520px;
  margin-bottom: 0;
  color: #555;
  font-size: 17px;
  line-height: 1.7;
}
.jk-contact-location-column .jk-contact-map { margin-top: 26px; }
.jk-contact-location-column .jk-private-embed-frame { min-height: 390px; }

.jk-footer-hours { margin: 0; }
.jk-footer-hours > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.jk-footer-hours dt,
.jk-footer-hours dd { margin: 0; font-size: 14px; font-weight: 400; }
.jk-footer-hours dt { color: rgba(238,246,244,.72); }
.jk-footer-hours dd { color: #fff; text-align: right; }
.jk-footer-closed { color: #ffb09a !important; }
.jk-footer-directions { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: #fff; font-size: 14px; font-weight: 700; }
.jk-footer-directions i { color: #ff9c80; }
.jk-footer-directions:hover { color: #f6c6b0; }

.jk-copyright {
  float: none;
  width: 100%;
  padding: 18px 0;
  color: rgba(255,255,255,.76);
  background: #09282b;
  border-top: 1px solid rgba(255,255,255,.08);
}
.jk-copyright-inner { display: flex; align-items: center; gap: 28px; }
.jk-copyright p { flex: 1 1 auto; margin: 0; color: rgba(255,255,255,.72); font-size: 13px; }
.jk-footer-legal { display: flex; align-items: center; gap: 18px; }
.jk-footer-legal a { color: rgba(255,255,255,.72); font-size: 13px; }
.jk-footer-legal a:hover { color: #fff; }
.jk-footer-social {
  display: flex !important;
  float: none;
  width: auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jk-footer-social li { float: none; margin: 0; }
.jk-footer-social li a {
  display: inline-flex;
  width: 35px;
  height: 35px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  transition: transform .2s ease, background-color .2s ease;
}
.jk-footer-social li a:hover,
.jk-footer-social li a:focus { color: #fff; background: var(--jk-red-dark); transform: translateY(-2px); }
.jk-footer-social li a i { margin: 0; color: inherit; font-size: 15px; }

/* ---------- Misc ---------- */
.jk-badge-list { list-style: none; padding: 0; margin: 0; }
.jk-badge-list li { padding: 8px 0; border-bottom: 1px dashed #e2e2e2; color: #555; }
.jk-badge-list li i { color: var(--jk-red); margin-right: 8px; }

/* ---------- Card grid (Grid-based, not the centered flex-wrap rows
   above) ---------- */
/* Used for sets of jk-cards that should form a clean, evenly-spaced
   grid — e.g. the About page "Licensing, Contracting & Quality
   Assurance" cards. Bootstrap's col-md-4 + the centered flex-wrap fix
   above worked for full rows, but an incomplete last row (5 cards in a
   3-column layout) got centered as a block, visually offsetting it from
   the fixed-width columns in the row above. A real CSS grid keeps every
   row on the same column tracks, so a short last row simply left-aligns
   under the first N columns instead of floating in the middle. */
.jk-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 10px;
}
.jk-card-grid .jk-card { margin-bottom: 0; height: 100%; }
@media (min-width: 992px) {
  /* Cap at 3 columns on large screens so cards don't stretch too wide
     when there are only 5 items. */
  .jk-card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Checklist grid ---------- */
/* Two-column card-style checklist (About page "How We Support Every
   Member"), replacing a plain single-column dashed list with something
   that reads as a designed feature list rather than default browser
   list styling. */
.jk-checklist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 900px;
  margin: 30px auto 0;
}
@media (min-width: 768px) {
  .jk-checklist-grid { grid-template-columns: 1fr 1fr; }
}
.jk-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 4px 14px rgba(27,76,79,0.06);
}
.jk-checklist-item i {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--jk-red);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.jk-checklist-item span { color: #444; font-size: 16px; line-height: 1.5; }
.jk-note-box { background: var(--jk-cream); border-left: 4px solid var(--jk-red); padding: 16px 20px; border-radius: 8px; color: #444; margin: 20px 0; }
.jk-note-error { border-left-color: var(--jk-red-dark); background: #fdecec; color: #7a1f20; }
.jk-hp { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; }

/* ---------- Accessibility: skip link + focus states ---------- */
body.clinic_version { zoom: var(--jk-a11y-zoom, 1); }

.jk-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--jk-teal);
  color: #fff !important;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  text-decoration: none;
}
.jk-skip-link:focus {
  left: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.jk-btn-primary:focus-visible,
.jk-btn-teal:focus-visible,
.jk-btn-outline:focus-visible {
  outline: 3px solid var(--jk-red-dark);
  outline-offset: 2px;
}
/* Fallback for browsers without :focus-visible support */
a:focus,
button:focus,
.jk-btn-primary:focus,
.jk-btn-teal:focus,
.jk-btn-outline:focus {
  outline: 3px solid var(--jk-red-dark);
  outline-offset: 2px;
}

.jk-a11y-launcher {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid #fff;
  border-radius: 28px;
  background: var(--jk-teal-dark);
  color: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.24);
  font-weight: 700;
  cursor: pointer;
  transition: bottom .2s ease, background-color .2s ease;
}
.jk-cookie-banner-open .jk-a11y-launcher {
  bottom: calc(18px + var(--jk-cookie-banner-height, 0px));
}
.jk-a11y-launcher:hover,
.jk-a11y-launcher:focus { background: var(--jk-red-dark); color: #fff; }
.jk-a11y-launcher i { font-size: 21px; }

.jk-a11y-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5,25,27,.72);
}
.jk-a11y-overlay[hidden] { display: none !important; }
.jk-a11y-panel {
  width: min(520px, 100%);
  max-height: var(--jk-a11y-panel-max-height, calc(100vh - 40px));
  overflow-y: auto;
  padding: 26px;
  border: 3px solid var(--jk-teal);
  border-radius: 18px;
  background: #fff;
  color: var(--jk-ink);
  box-shadow: 0 20px 60px rgba(0,0,0,.32);
}
.jk-a11y-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.jk-a11y-kicker {
  display: block;
  color: var(--jk-red-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.jk-a11y-panel h2 { margin: 4px 0 0; color: var(--jk-teal); font-size: 27px; }
.jk-a11y-panel > p { margin: 12px 0 20px; color: #444; }
.jk-a11y-close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--jk-teal);
  border-radius: 50%;
  background: #fff;
  color: var(--jk-teal);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.jk-a11y-group {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.jk-a11y-group legend { margin-bottom: 9px; color: var(--jk-teal-dark); font-size: 15px; font-weight: 800; }
.jk-a11y-size-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jk-a11y-size-options button,
.jk-a11y-toggles button,
.jk-a11y-reset {
  min-height: 44px;
  border: 2px solid var(--jk-teal);
  border-radius: 10px;
  background: #fff;
  color: var(--jk-teal-dark);
  font-weight: 700;
  cursor: pointer;
}
.jk-a11y-size-options button[aria-pressed="true"],
.jk-a11y-toggles button[aria-pressed="true"] {
  background: var(--jk-teal);
  color: #fff;
}
.jk-a11y-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.jk-a11y-toggles button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 10px 12px;
  text-align: left;
}
.jk-a11y-toggles button span:last-child { margin-top: 2px; font-size: 11px; font-weight: 500; opacity: .78; }
.jk-a11y-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #d9e1df;
}
.jk-a11y-reset { padding: 8px 15px; }
.jk-a11y-panel-footer a { font-weight: 700; text-decoration: underline; }
body.jk-a11y-dialog-open { overflow: hidden; }

html.jk-a11y-readable body,
html.jk-a11y-readable body * { font-family: Arial, Helvetica, sans-serif !important; }

html.jk-a11y-links main a:not([class*="btn"]),
html.jk-a11y-links footer a,
html.jk-a11y-links header a:not(.navbar-brand) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px;
}

html.jk-a11y-motion *,
html.jk-a11y-motion *::before,
html.jk-a11y-motion *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

html.jk-a11y-motion { scroll-behavior: auto !important; }

html.jk-a11y-contrast body,
html.jk-a11y-contrast .jk-section,
html.jk-a11y-contrast .header-top,
html.jk-a11y-contrast .header-bottom,
html.jk-a11y-contrast .jk-footer,
html.jk-a11y-contrast .jk-copyright,
html.jk-a11y-contrast .jk-card,
html.jk-a11y-contrast .jk-form-card,
html.jk-a11y-contrast .jk-note-box,
html.jk-a11y-contrast .jk-footer-cta {
  background: #000 !important;
  color: #fff !important;
}
html.jk-a11y-contrast body h1,
html.jk-a11y-contrast body h2,
html.jk-a11y-contrast body h3,
html.jk-a11y-contrast body h4,
html.jk-a11y-contrast body h5,
html.jk-a11y-contrast body h6,
html.jk-a11y-contrast body p,
html.jk-a11y-contrast body li,
html.jk-a11y-contrast body label,
html.jk-a11y-contrast body dt,
html.jk-a11y-contrast body dd,
html.jk-a11y-contrast body span { color: #fff !important; }
html.jk-a11y-contrast body a { color: #ffeb3b !important; text-decoration: underline !important; }
html.jk-a11y-contrast input,
html.jk-a11y-contrast textarea,
html.jk-a11y-contrast select {
  border: 2px solid #fff !important;
  background: #fff !important;
  color: #000 !important;
}
html.jk-a11y-contrast .jk-a11y-panel {
  border-color: #fff;
  background: #000;
  color: #fff;
}
html.jk-a11y-contrast .jk-a11y-panel button {
  border-color: #fff;
  background: #000;
  color: #fff;
}
html.jk-a11y-contrast .jk-a11y-panel button[aria-pressed="true"] {
  background: #ffeb3b;
  color: #000;
}
html.jk-a11y-contrast .jk-a11y-panel button[aria-pressed="true"] span { color: #000 !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 560px) {
  .jk-a11y-launcher span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .jk-a11y-launcher { width: 50px; padding: 0; justify-content: center; }
  .jk-a11y-panel { padding: 20px; }
  .jk-a11y-size-options,
  .jk-a11y-toggles { grid-template-columns: 1fr; }
  .jk-a11y-panel-footer { align-items: flex-start; flex-direction: column; }
}

/* ---------- Cookie consent banner ---------- */
.jk-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--jk-teal);
  color: #fff;
  padding: 16px 20px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}
.jk-cookie-banner[hidden] { display: none !important; }
.jk-cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.jk-cookie-banner-copy { max-width: 760px; }
.jk-cookie-banner-copy > strong { display: block; margin-bottom: 4px; font-size: 16px; color: #fff; }
.jk-cookie-banner p { margin: 0; color: #fff; font-size: 14px; }
.jk-cookie-banner a { color: #fff; text-decoration: underline; }
.jk-cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.jk-cookie-choice {
  min-height: 44px;
  padding: 9px 18px;
  border: 2px solid #fff;
  border-radius: 24px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.jk-cookie-choice:hover,
.jk-cookie-choice:focus { background: #fff; color: var(--jk-teal); }
@media (max-width: 600px) {
  .jk-cookie-banner-inner { flex-direction: column; align-items: flex-start; }
  .jk-cookie-banner-actions { width: 100%; flex-direction: column; }
  .jk-cookie-choice { width: 100%; }
}

/* Third-party maps stay disconnected until a visitor explicitly loads them. */
.jk-private-embed {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(27,76,79,.18);
  border-radius: 14px;
  background: var(--jk-cream);
}
.jk-private-embed-notice {
  max-width: 440px;
  padding: 28px;
  text-align: center;
  color: var(--jk-ink);
}
.jk-private-embed-notice > i {
  display: block;
  margin-bottom: 8px;
  color: var(--jk-red-dark);
  font-size: 28px;
}
.jk-private-embed-notice > strong { display: block; color: var(--jk-teal); font-size: 17px; }
.jk-private-embed-notice p { margin: 7px 0 14px; font-size: 13px; line-height: 1.55; }
.jk-private-embed-notice a { display: block; margin-top: 10px; font-size: 13px; text-decoration: underline; }
.jk-private-embed-load {
  min-height: 44px;
  padding: 9px 20px;
  border: 2px solid var(--jk-teal);
  border-radius: 24px;
  background: var(--jk-teal);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.jk-private-embed-load:hover,
.jk-private-embed-load:focus { background: var(--jk-teal-dark); border-color: var(--jk-teal-dark); }
.jk-private-embed-frame { display: block; width: 100%; height: 320px; border: 0; }

/* =========================================================
   2026 layout refresh
   A shared rhythm and explicit grid system keep cards, media,
   forms and calls to action aligned across every page.
   ========================================================= */
html { overflow-x: hidden; }
body.clinic_version {
  overflow-x: hidden;
  line-height: 1.65;
  background: #fff;
}
body.clinic_version p { margin-top: 0; }
body.clinic_version img { max-width: 100%; }

.jk-section {
  float: none !important;
  clear: both;
  width: 100%;
  padding: 64px 0;
}
.wow { visibility: visible !important; animation: none !important; }
#preloader { display: none !important; }
main > .services#service { float: none !important; clear: both; width: 100%; }
.jk-section-compact { padding: 40px 0; }
.jk-section-intro { margin: 0 auto 30px; }
.jk-section-intro .jk-heading { margin-bottom: 10px; }
.jk-section-intro p { color: #5d5d5d; margin-bottom: 0; }
.jk-heading { margin-top: 0; line-height: 1.2; }
.jk-lead { margin-bottom: 18px; }
.jk-split-row { row-gap: 34px; }
.jk-rounded-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(27,76,79,.12);
}

.jk-hero-buttons { flex-wrap: wrap; align-items: center; }
.jk-hero-page .jk-hero-buttons,
.jk-section-teal .jk-hero-buttons,
.jk-center.jk-hero-buttons { justify-content: center; }
.jk-section-teal > .container > p { margin-bottom: 0; }

.jk-home-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 78px;
  align-items: stretch;
  max-width: 610px;
}
.jk-home-hero-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
}

.jk-contact-hero-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
}
.jk-contact-hero-details span { display: inline-flex; align-items: center; }
.jk-contact-hero-details span:not(:last-child)::after {
  content: "|";
  margin: 0 12px;
  color: rgba(255,255,255,.6);
}
.jk-contact-hero-details a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Explicit equal-width grids replace Bootstrap float wrapping. */
.jk-card-layout,
.row:not(.jk-row-middle):has(> [class*="col-"] > .jk-card) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  align-items: stretch;
}
.jk-card-layout::before,
.jk-card-layout::after,
.row:not(.jk-row-middle):has(> [class*="col-"] > .jk-card)::before,
.row:not(.jk-row-middle):has(> [class*="col-"] > .jk-card)::after {
  display: none;
  content: none;
}
.jk-card-layout > [class*="col-"],
.row:not(.jk-row-middle):has(> [class*="col-"] > .jk-card) > [class*="col-"] {
  width: auto;
  max-width: none;
  float: none;
  padding: 0;
  display: block;
}
.jk-card-layout .jk-card,
.row:not(.jk-row-middle):has(> [class*="col-"] > .jk-card) .jk-card {
  height: 100%;
  margin-bottom: 0;
}
.row:not(.jk-row-middle):has(> .col-md-3 > .jk-card) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row:not(.jk-row-middle):has(> .col-md-6 > .jk-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jk-card-layout-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jk-card-layout-3 { grid-auto-rows: 1fr; }

/* Balance odd card counts instead of leaving a lone card at the left edge. */
.row.jk-balanced-five-grid,
.jk-card-grid.jk-balanced-five-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 24px;
  margin-left: 0;
  margin-right: 0;
}
.row.jk-balanced-five-grid::before,
.row.jk-balanced-five-grid::after { display: none; content: none; }
.row.jk-balanced-five-grid > [class*="col-"],
.jk-card-grid.jk-balanced-five-grid > .jk-card {
  grid-column: span 2;
  width: auto;
  float: none;
  margin: 0;
}
.row.jk-balanced-five-grid > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
.jk-card-grid.jk-balanced-five-grid > .jk-card { padding: 26px; }
.row.jk-balanced-five-grid > :nth-child(4),
.jk-card-grid.jk-balanced-five-grid > :nth-child(4) { grid-column: 2 / span 2; }
.row.jk-balanced-five-grid > :nth-child(5),
.jk-card-grid.jk-balanced-five-grid > :nth-child(5) { grid-column: 4 / span 2; }
.row.jk-balanced-five-grid .jk-card { height: 100%; margin-bottom: 0; }

.row.jk-balanced-seven-chip-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 24px;
  margin-left: 0;
  margin-right: 0;
}
.row.jk-balanced-seven-chip-grid::before,
.row.jk-balanced-seven-chip-grid::after { display: none; content: none; }
.row.jk-balanced-seven-chip-grid > [class*="col-"] {
  grid-column: span 2;
  width: auto;
  float: none;
  padding: 0;
}
.row.jk-balanced-seven-chip-grid > :nth-child(5) { grid-column: 2 / span 2; }
.row.jk-balanced-seven-chip-grid > :nth-child(6) { grid-column: 4 / span 2; }
.row.jk-balanced-seven-chip-grid > :nth-child(7) { grid-column: 6 / span 2; }
.row.jk-balanced-seven-chip-grid .jk-card { height: 100%; margin-bottom: 0; }

.row.jk-five-chip-row,
.row.jk-five-step-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 18px;
  margin-left: 0;
  margin-right: 0;
}
.row.jk-five-chip-row::before,
.row.jk-five-chip-row::after,
.row.jk-five-step-row::before,
.row.jk-five-step-row::after { display: none; content: none; }
.row.jk-five-chip-row > [class*="col-"],
.row.jk-five-step-row > [class*="col-"] {
  width: auto;
  float: none;
  padding: 0;
}
.row.jk-five-chip-row .jk-card,
.row.jk-five-step-row .jk-card { height: 100%; margin-bottom: 0; }

.jk-card {
  padding: 26px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(27,76,79,.09);
}
.jk-card:hover { transform: translateY(-3px); }
.jk-card-photo {
  display: block;
  width: calc(100% + 52px);
  max-width: none !important;
  height: 150px;
  object-fit: cover;
  margin: -26px -26px 22px;
  border-radius: 12px 12px 0 0;
}
.jk-card h2,
.jk-card h3,
.jk-card h4 { margin-top: 0; line-height: 1.25; }
.jk-card p:last-child { margin-bottom: 0; }

/* Fixes the contact card grid shown in the supplied screenshot. */
.jk-card-layout-3 .jk-card { min-height: 210px; }
.jk-card-layout-3 .jk-card-icon { margin-bottom: 18px; }

/* Home page real-photo collage. */
.jk-home-photo-collage {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: repeat(2, 170px);
  gap: 12px;
}
.jk-home-photo-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
.jk-home-photo-collage .jk-collage-feature { grid-row: 1 / 3; }
.jk-home-photo-collage img:last-child {
  position: absolute;
  width: 148px;
  height: 105px;
  right: 34px;
  bottom: -22px;
  border: 5px solid #fff;
  box-shadow: 0 8px 22px rgba(27,76,79,.18);
}
.jk-home-photo-collage { position: relative; margin-bottom: 22px; }

.jk-sample-day-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 30px 34px;
  background: var(--jk-cream);
  border: 1px solid #eadfcd;
  border-radius: 16px;
}
.jk-sample-day-callout .jk-heading { margin-bottom: 8px; }
.jk-sample-day-callout p { margin-bottom: 0; color: #555; }
.jk-sample-day-callout .jk-btn-teal { flex: 0 0 auto; }

.jk-video-wrap { padding: 12px; border-radius: 18px; }
.jk-video-wrap video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  background: var(--jk-teal-dark);
}

/* Discover Center overview and outcome blocks. */
.jk-discover-visual-pair {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 12px;
  align-items: stretch;
}
.jk-discover-visual-pair img {
  display: block;
  width: 100%;
  height: 330px;
  object-fit: cover;
  border-radius: 16px;
}
.jk-discover-visual-pair img:first-child { object-fit: contain; background: var(--jk-cream); padding: 14px; }

.jk-outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.jk-outcome-grid > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 86px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(27,76,79,.06);
}
.jk-outcome-grid i,
.jk-support-grid i {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--jk-red);
  color: #fff;
  font-size: 12px;
}
.jk-outcome-grid strong { display: block; color: var(--jk-teal); }

/* Accessible expandable photo cards based on the supplied mockup. */
.jk-program-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
.jk-program-card {
  background: #fff;
  border: 1px solid #e4dfd3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(27,76,79,.07);
  transition: box-shadow .2s ease, transform .2s ease;
}
.jk-program-card:hover,
.jk-program-card[open] { box-shadow: 0 12px 28px rgba(27,76,79,.13); }
.jk-program-card summary { list-style: none; cursor: pointer; }
.jk-program-card summary::-webkit-details-marker { display: none; }
.jk-program-card summary:focus-visible { outline: 3px solid var(--jk-red-dark); outline-offset: -3px; }
.jk-program-card summary > img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}
.jk-program-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}
.jk-program-summary strong { display: block; color: var(--jk-teal); font-size: 20px; line-height: 1.25; margin-bottom: 5px; }
.jk-program-summary small { display: block; color: #5a5a5a; font-size: 15px; line-height: 1.5; }
.jk-program-summary i { color: var(--jk-red); margin-top: 5px; transition: transform .2s ease; }
.jk-program-card[open] .jk-program-summary i { transform: rotate(180deg); }
.jk-program-detail { padding: 16px 20px 20px; border-top: 1px solid #e9e3d8; background: #fdfbf7; }
.jk-program-detail p { color: #555; margin-bottom: 8px; }
.jk-program-detail p:last-child { margin-bottom: 0; }
.jk-program-detail strong { color: var(--jk-teal-dark); }

.jk-week-grid-compact .jk-week-card { min-height: 116px; text-align: center; border-left: 0; border-top: 4px solid var(--jk-teal); }
.jk-week-grid-compact .jk-week-card h4 { margin: 0; line-height: 1.35; }

.jk-day-timeline {
  display: grid;
  grid-template-columns: repeat(8, minmax(118px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scrollbar-color: var(--jk-teal) #e8e2d7;
}
.jk-day-timeline > div {
  min-height: 112px;
  padding: 18px 12px;
  text-align: center;
  background: #fff;
  border: 1px solid #e5dfd4;
  border-bottom: 4px solid var(--jk-red);
  border-radius: 12px;
}
.jk-day-timeline time { display: block; color: var(--jk-red-dark); font-weight: 800; margin-bottom: 8px; }
.jk-day-timeline span { display: block; color: var(--jk-teal); font-size: 14px; line-height: 1.35; font-weight: 700; }

.jk-month-grid-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.jk-month-grid-compact .jk-month-card { min-height: 96px; display: flex; flex-direction: column; justify-content: center; padding: 14px 10px; border: 1px solid #eadfcd; }
.jk-month-grid-compact .jk-month-name { color: var(--jk-red-dark); text-transform: uppercase; letter-spacing: 1px; font-size: 12px; margin-bottom: 4px; }

.jk-sensory-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jk-sensory-gallery img { display: block; width: 100%; height: 180px; object-fit: cover; border-radius: 14px; }
.jk-media-caption { color: #666; font-size: 13px; margin: 10px 0 0; }
.jk-support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 940px; margin: 0 auto; }
.jk-support-grid > span { display: flex; align-items: center; gap: 11px; min-height: 64px; background: #fff; padding: 14px 16px; border-radius: 12px; color: #444; }

/* Our Programs: one documented photo, compact repeated details. */
.jk-service-card { max-width: 980px; margin: 0 auto 24px; padding: 28px 30px; }
.jk-service-card-featured { max-width: 1100px; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 30px; align-items: center; }
.jk-service-card-photo img { display: block; width: 100%; min-height: 330px; height: 100%; object-fit: cover; border-radius: 12px; }
.jk-service-card h2 { margin-top: 0; }
.jk-service-card .jk-service-meta p { margin-bottom: 9px; }
.jk-service-contact { padding: 12px 14px; background: var(--jk-cream); border-radius: 8px; }

iframe { display: block; max-width: 100%; border: 0; }
.jk-form-card { padding: 30px; }
.jk-form-card form > .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  margin-left: 0;
  margin-right: 0;
}
.jk-form-card form > .row::before,
.jk-form-card form > .row::after { display: none; content: none; }
.jk-form-card form > .row > [class*="col-"] {
  width: auto;
  float: none;
  padding-left: 0;
  padding-right: 0;
}
.jk-form-card form > .row > .col-md-12 { grid-column: 1 / -1; }

@media (min-width: 992px) {
  .footer-area > .container > .row:first-child { display: flex; align-items: flex-start; }
}

@media (max-width: 991px) {
  .jk-section { padding: 54px 0; }
  .jk-card-layout,
  .row:not(.jk-row-middle):has(> [class*="col-"] > .jk-card),
  .row:not(.jk-row-middle):has(> .col-md-3 > .jk-card),
  .row:not(.jk-row-middle):has(> .col-md-6 > .jk-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jk-discover-visual-pair img { height: 280px; }
  .jk-month-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jk-service-card-featured { grid-template-columns: 1fr; }
  .jk-service-card-photo img { min-height: 0; max-height: 420px; aspect-ratio: 16 / 9; }
  .row.jk-balanced-five-grid,
  .jk-card-grid.jk-balanced-five-grid,
  .row.jk-balanced-seven-chip-grid,
  .row.jk-five-chip-row,
  .row.jk-five-step-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .row.jk-balanced-five-grid > [class*="col-"],
  .jk-card-grid.jk-balanced-five-grid > .jk-card,
  .row.jk-balanced-seven-chip-grid > [class*="col-"] { grid-column: auto; }
  .row.jk-balanced-five-grid > :last-child,
  .jk-card-grid.jk-balanced-five-grid > :last-child,
  .row.jk-balanced-seven-chip-grid > :last-child,
  .row.jk-five-chip-row > :last-child,
  .row.jk-five-step-row > :last-child {
    grid-column: 1 / -1;
    width: calc(50% - 12px);
    justify-self: center;
  }
  .jk-footer-cta { align-items: flex-start; }
  .jk-footer-cta-actions { flex-direction: column; min-width: 190px; }
  .jk-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 54px; }
  .jk-copyright-inner { flex-wrap: wrap; }
  .jk-copyright p { flex-basis: calc(100% - 280px); }
}

@media (max-width: 767px) {
  .jk-contact-split { display: block; }
  .jk-contact-location-column {
    margin-top: 44px;
    padding-left: 15px;
  }
  .jk-contact-location-column .jk-private-embed-frame { min-height: 320px; }
  .jk-section { padding: 46px 0; }
  .jk-section-compact { padding: 30px 0; }
  .jk-heading { font-size: 29px; }
  .jk-row-middle { display: flex; }
  .jk-split-row > [class*="col-"] { width: 100%; }
  .jk-home-photo-collage { grid-template-rows: repeat(2, 130px); margin-top: 8px; }
  .jk-home-photo-collage img:last-child { width: 120px; height: 86px; right: 16px; bottom: -16px; }
  .jk-sample-day-callout { align-items: flex-start; flex-direction: column; padding: 26px; }
  .jk-sample-day-callout .jk-btn-teal { width: 100%; text-align: center; }
  .jk-discover-visual-pair { grid-template-columns: 1fr 1.35fr; }
  .jk-discover-visual-pair img { height: 230px; }
  .jk-program-card summary > img { height: 170px; }
  .jk-sensory-gallery img { height: 145px; }
  .jk-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jk-service-card { padding: 24px; }
  .jk-form-card { padding: 24px 20px; }
  .jk-footer { padding: 48px 0 24px; }
  .jk-footer-cta { flex-direction: column; margin-bottom: 42px; padding: 26px; }
  .jk-footer-cta-actions { width: 100%; min-width: 0; flex-direction: row; }
  .jk-footer-btn { flex: 1 1 0; }
  .jk-footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .jk-footer-brand p { max-width: 520px; }
  .jk-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
  .jk-footer-column h3 { margin-bottom: 18px; }
  .jk-copyright-inner { justify-content: center; gap: 16px 24px; text-align: center; }
  .jk-copyright p { flex: 1 0 100%; }
}

@media (max-width: 600px) {
  .jk-card-layout,
  .row:not(.jk-row-middle):has(> [class*="col-"] > .jk-card),
  .row:not(.jk-row-middle):has(> .col-md-3 > .jk-card),
  .row:not(.jk-row-middle):has(> .col-md-6 > .jk-card),
  .jk-program-card-grid { grid-template-columns: 1fr; }
  .jk-card-layout-3 .jk-card { min-height: 0; }
  .jk-card-layout-3 { grid-auto-rows: auto; }
  .jk-home-hero-actions,
  .row.jk-balanced-five-grid,
  .jk-card-grid.jk-balanced-five-grid,
  .row.jk-balanced-seven-chip-grid,
  .row.jk-five-chip-row,
  .row.jk-five-step-row,
  .jk-form-card form > .row { grid-template-columns: 1fr !important; }
  .jk-home-hero-actions a { margin: 0; }
  .jk-home-hero-actions { grid-auto-rows: 60px; }
  .row.jk-balanced-five-grid > :last-child,
  .jk-card-grid.jk-balanced-five-grid > :last-child,
  .row.jk-balanced-seven-chip-grid > :last-child,
  .row.jk-five-chip-row > :last-child,
  .row.jk-five-step-row > :last-child {
    grid-column: auto;
    width: auto;
  }
  .jk-form-card form > .row > .col-md-12 { grid-column: auto; }
  .jk-contact-hero-details { display: grid; gap: 8px; }
  .jk-contact-hero-details span { display: block; }
  .jk-contact-hero-details span:not(:last-child)::after { content: none; }
  .jk-footer-cta h2 { font-size: 24px; }
  .jk-footer-cta-actions { flex-direction: column; }
  .jk-footer-btn { width: 100%; }
  .jk-footer-links { grid-template-columns: 1fr; }
  .jk-footer-legal { width: 100%; justify-content: center; flex-wrap: wrap; gap: 9px 18px; }
  .jk-outcome-grid { grid-template-columns: 1fr; }
  .jk-outcome-grid > div { min-height: 0; }
  .jk-month-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jk-support-grid { grid-template-columns: 1fr; }
  .jk-discover-visual-pair { grid-template-columns: 1fr; }
  .jk-discover-visual-pair img { height: 240px; }
  .jk-discover-visual-pair img:first-child { height: 190px; }
  .jk-service-card .jk-service-code { margin: 7px 0 0; vertical-align: middle; }
}