/* =========================================================================
   JCKC — custom.css
   Additive enhancements layered ON TOP of the ported theme style.css.
   Loaded after style.css so equal-specificity rules win by cascade order.
   Scope: (1) icon hardening + polish, (2) footer layout, (3) Services mega menu.
   Applies to all 160 pages / 4 languages without touching page markup.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ICONS
   Remove the filled "chip" box behind decorative icons (the pale square on
   dark cards, tinted square on light cards) so icons sit clean on the card.
   !important is needed to beat the dark-card compound rule
   (.bento…--dark .bento__icon{background:rgba(255,255,255,.08)}).
   ------------------------------------------------------------------------- */
.bento__icon,
.contact-card__icon,
.why__item-icon {
  background: transparent !important;
  width: auto;
  border-radius: 0;
}
/* nudge the icons a little larger now that there's no chip around them */
.bento__icon svg,
.contact-card__icon svg,
.why__item-icon svg {
  width: 30px;
  height: 30px;
}
/* inline icons in flex rows must never get squished */
.header__phone svg,
.header__cta svg,
.btn svg,
.footer__langs svg,
.lang-toggle__icon svg,
.header__link--dropdown svg,
.footer__list--contact svg {
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   2. FOOTER — stop the Locations column from wrapping city names, tidy langs
   ------------------------------------------------------------------------- */
/* Locations: a single column of the first 6 cities, then the View-all link */
.footer__list--cities {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.footer__list--cities a {
  white-space: nowrap;
}
.footer__cities-all {
  margin-top: var(--sp-4);
}
.footer__link--all {
  font-weight: var(--fw-semibold);
  color: var(--color-accent-light);
}
.footer__link--all:hover { color: var(--color-white); }
/* language line: keep the globe glued to its text, vertically centred */
.footer__langs {
  align-items: center;
  flex-wrap: nowrap;
}
.footer__langs svg { position: relative; top: 0; }

/* -------------------------------------------------------------------------
   3. SERVICES MEGA MENU
   Restyles the existing Services dropdown (the one WITHOUT --cities) into a
   wide two-column mega menu with a per-service icon chip. Pure CSS, keyed to
   href suffixes so it works for /services/… and /es|fr|kr/services/…
   ------------------------------------------------------------------------- */
.header__dropdown:not(.header__dropdown--cities) {
  min-width: 720px;
  padding: var(--sp-8);
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: var(--sp-6);
}
/* left "featured" panel = the Services overview link, spanning the full height */
.header__dropdown:not(.header__dropdown--cities) .header__dropdown-link:first-child {
  grid-column: 1;
  grid-row: 1 / span 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-10);
  padding: var(--sp-20);
  background: linear-gradient(165deg, var(--color-navy-50), var(--color-navy-100));
  border-radius: var(--r-12);
}
.header__dropdown:not(.header__dropdown--cities) .header__dropdown-link:first-child .header__dropdown-title {
  font-size: var(--fz-18);
}
/* right column: the five service links, each a compact icon + text row */
.header__dropdown:not(.header__dropdown--cities) .header__dropdown-link {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--sp-12);
  row-gap: 2px;
  align-items: center;
  padding: var(--sp-10) var(--sp-12);
  border-radius: 10px;
  transition: background-color 0.15s var(--ease-out), transform 0.15s var(--ease-out);
}
.header__dropdown:not(.header__dropdown--cities) .header__dropdown-link::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--color-navy-50);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  transition: background-color 0.15s var(--ease-out);
}
.header__dropdown:not(.header__dropdown--cities) .header__dropdown-title {
  grid-column: 2; grid-row: 1; font-size: var(--fz-15);
}
.header__dropdown:not(.header__dropdown--cities) .header__dropdown-sub {
  grid-column: 2; grid-row: 2; line-height: 1.4;
}
/* refined hover — subtle neutral wash + icon chip tint, not a heavy blue block */
.header__dropdown:not(.header__dropdown--cities) .header__dropdown-link:hover {
  background: var(--color-gray-50);
}
.header__dropdown:not(.header__dropdown--cities) .header__dropdown-link:hover::before {
  background-color: var(--color-navy-100);
}
.header__dropdown:not(.header__dropdown--cities) .header__dropdown-link:first-child:hover {
  background: linear-gradient(165deg, var(--color-navy-100), var(--color-navy-200));
  transform: none;
}

/* per-service icons (feather-style, brand navy #1a2f52) */
.header__dropdown-link[href$="/services/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a2f52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}
.header__dropdown-link[href$="/services/tax-services/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a2f52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E");
}
.header__dropdown-link[href$="/services/aca-obamacare/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a2f52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 1 0-7.8 7.8L12 21l7.8-8.6a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
}
.header__dropdown-link[href$="/services/life-insurance/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a2f52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}
.header__dropdown-link[href$="/services/medicare/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a2f52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
}
.header__dropdown-link[href$="/services/notary-services/"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a2f52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.5 13.5 17 22l-5-3-5 3 1.5-8.5'/%3E%3C/svg%3E");
}
/* the featured overview chip reads on the tinted bg */
.header__dropdown:not(.header__dropdown--cities) .header__dropdown-link:first-child::before {
  background-color: var(--color-white);
}

/* keep the mega menu from spilling past the viewport's right edge */
@media (min-width: 1024px) and (max-width: 1200px) {
  .header__dropdown:not(.header__dropdown--cities) { left: auto; right: 0; }
}

/* -------------------------------------------------------------------------
   4. PAGE FAQ  (<section class="jckc-page-faq"> with native <details>)
   This auto-injected FAQ ships with NO styling, so it fell back to raw
   browser <details> markers. Style it into a clean accordion (CSS-only —
   native <details> handles the toggle) matching the site's other FAQ.
   Appears on About, Blog, Booking, Contact, Locations, Services (all langs).
   ------------------------------------------------------------------------- */
.jckc-page-faq {
  max-width: 820px;
  margin: var(--sp-24) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.jckc-page-faq > h2 {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.jckc-page-faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--r-12);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.jckc-page-faq__item[open] {
  border-color: var(--color-accent-light);
  box-shadow: var(--sh-sm);
}
.jckc-page-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-20);
}
.jckc-page-faq__item > summary::-webkit-details-marker { display: none; }
.jckc-page-faq__item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a2f52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-base) var(--ease-out);
}
.jckc-page-faq__item[open] > summary::after { transform: rotate(180deg); }
.jckc-page-faq__item summary h3 {
  margin: 0;
  flex: 1;
  font-size: var(--fz-17, 1.0625rem);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.jckc-page-faq__item > :not(summary) {
  margin: 0;
  padding: 0 var(--sp-20) var(--sp-20);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* -------------------------------------------------------------------------
   5. SERVICE DETAIL PAGES — card grids were cramped
   The 3-col .options-grid sat inside a 760px reading column, squeezing each
   card to ~220px. Widen the content on service-detail pages only (:has),
   keep running text at a comfortable measure, and let the coverage grid
   size its cards responsively. Affects tax/ACA/life/Medicare/notary pages.
   ------------------------------------------------------------------------- */
.container--narrow:has(.service-detail) {
  max-width: 1060px;
}
.service-detail__main > :is(p, h2, h3, h4, .service-detail__list) {
  max-width: 70ch;
}
.service-detail__main .options-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* -------------------------------------------------------------------------
   6. CONTENT SECTIONS — readable prose, separated headings, styled lists
   Text-heavy bodies (service pages, location intros, blog articles) were
   reading as undifferentiated walls of text: tight leading, headings with
   no top margin, and cramped disc-bullet lists. This gives them rhythm.
   ------------------------------------------------------------------------- */

/* comfortable line-height for body copy in content columns */
.service-detail__main p,
.container--narrow p,
.article__body p,
.article__body li,
.jckc-page-faq__item > :not(summary) {
  line-height: 1.75;
}

/* breathing room between stacked content blocks (only between siblings, not at top) */
.service-detail__main > * + h2,
.service-detail__main > * + h3,
.article__body * + h2,
.article__body * + h3 {
  margin-top: 2.6rem;
}
.service-detail__main > h2,
.article__body h2 { margin-bottom: 0.6rem; }

/* clean, spaced check-lists in place of cramped disc bullets */
.service-detail__list,
.service-detail__main ul:not([class]),
.article__body ul:not([class]) {
  list-style: none;
  padding-left: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: 0.65rem;
}
.service-detail__list li,
.service-detail__main ul:not([class]) li,
.article__body ul:not([class]) li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.6;
}
.service-detail__list li::before,
.service-detail__main ul:not([class]) li::before,
.article__body ul:not([class]) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 1.2rem;
  height: 1.2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23345485' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* location intro prose: a little more space between paragraphs */
.container--narrow > .reveal > p + p { margin-top: 0.9rem; }

/* -------------------------------------------------------------------------
   7. HERO EYEBROW — bump the small badge text for legibility
   ------------------------------------------------------------------------- */
.hero__eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.09em;
  padding: 7px 16px;
}

/* -------------------------------------------------------------------------
   8. ABOUT — founder hero redesigned as a two-column editorial layout
   Photo + pull-quote on the left; story intro + a credentials/fact strip on
   the right. Replaces the old centered stack. Facts use only verified data.
   ------------------------------------------------------------------------- */
.about-hero .about-hero__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3rem;
  align-items: start;
}
.about-hero__media {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.about-hero__photo { margin: 0; }
.about-hero__photo img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 14px 44px rgba(15, 23, 42, 0.2);
  border: 5px solid #fff;
  display: block;
}
.about-hero__quote { margin: 0; }
.about-hero__body {
  max-width: 620px;
  text-align: left;
}
.about-hero__lede {
  font-size: var(--fz-18);
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}
.about-hero__facts {
  list-style: none;
  padding: 0;
  margin: 1.85rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}
.about-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 0.9rem;
  border-left: 3px solid var(--color-accent-light);
}
.about-hero__fact-k {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  font-size: var(--fz-15);
}
.about-hero__fact-v {
  color: var(--color-text-muted);
  font-size: var(--fz-14);
}
@media (max-width: 820px) {
  .about-hero .about-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-hero__media { max-width: 320px; margin: 0 auto; order: 2; }
  .about-hero__facts { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   9. WHO WE HELP — balanced 4-up icon cards with hover lift (chip-less icons)
   ------------------------------------------------------------------------- */
.who-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-16);
}
.who-card {
  padding: var(--sp-24);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.who-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--color-accent-light);
}
.who-card__icon { color: var(--color-accent); margin-bottom: var(--sp-4); }
.who-card__icon svg { width: 32px; height: 32px; }
.who-card h3 { font-size: var(--fz-18); margin: 0; }
.who-card p { color: var(--color-text-muted); font-size: var(--fz-15); line-height: 1.6; margin: 0; }
@media (max-width: 1000px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .who-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   10. HOW IT WORKS — connected step flow with an animated line (step 1 -> 3)
   ------------------------------------------------------------------------- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-24);
  position: relative;
  text-align: center;
}
/* static connecting rail behind the badges */
.steps::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 16.66%;
  right: 16.66%;
  height: 3px;
  border-radius: 2px;
  background: var(--color-border);
  z-index: 0;
}
/* animated highlight travelling from step 1 to step 3 */
.steps::after {
  content: "";
  position: absolute;
  top: 32px;
  left: 16.66%;
  right: 16.66%;
  height: 3px;
  border-radius: 2px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  background-size: 45% 100%;
  background-repeat: no-repeat;
  animation: stepsFlow 2.8s linear infinite;
}
@keyframes stepsFlow {
  0%   { background-position: -45% 0; }
  100% { background-position: 145% 0; }
}
.steps__item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}
.steps__badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fz-24);
  color: #fff;
  background: linear-gradient(150deg, var(--color-navy-500), var(--color-navy-800));
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
  border: 4px solid var(--color-bg-subtle);
}
.steps__title { font-size: var(--fz-18); margin: var(--sp-8) 0 0; }
.steps__item p {
  color: var(--color-text-muted);
  font-size: var(--fz-15);
  line-height: 1.6;
  max-width: 34ch;
  margin: var(--sp-4) auto 0;
}
@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; gap: var(--sp-32); }
  .steps::before, .steps::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .steps::after { animation: none; opacity: 0.6; }
}

/* -------------------------------------------------------------------------
   11. HOME HERO — professional polish
   ------------------------------------------------------------------------- */
/* brighter, higher-contrast headline emphasis */
.hero__headline-emph {
  background: linear-gradient(90deg, #5ab0ff, #bcdcff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #bcdcff; /* fallback */
}
/* larger, clearer sub copy with better contrast on navy */
.hero__sub {
  color: rgba(255, 255, 255, 0.9);
  max-width: 60ch;
}
/* stats become glass stat-cards */
.hero__trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-16);
  margin-top: var(--sp-40);
  border-top: 0;
}
.hero__trust-item {
  padding: var(--sp-20) var(--sp-20);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
.hero__trust-item:hover {
  transform: translateY(-3px);
  border-color: rgba(122, 155, 199, 0.6);
  background: rgba(255, 255, 255, 0.08);
}
.hero__trust-value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fz-36, 2.25rem);
  line-height: 1;
  background: linear-gradient(90deg, #7db8ea, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__trust-label {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fz-14);
  line-height: 1.4;
}
.hero__ctas { align-items: center; gap: var(--sp-20); margin-top: var(--sp-28); }
@media (max-width: 720px) {
  .hero__trust { grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
}

/* -------------------------------------------------------------------------
   12. ACCESSIBILITY — visible keyboard focus + reduced motion
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #40b0f0;
  outline-offset: 2px;
  border-radius: 4px;
}
/* honour reduced-motion: stop the hero particle canvas + section animations */
@media (prefers-reduced-motion: reduce) {
  .hero__canvas { display: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   13. TESTIMONIALS — premium card, slider-ready (scroll-snap for >1 card)
   ------------------------------------------------------------------------- */
.tslider {
  display: flex;
  gap: var(--sp-20);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--sp-8) 0 var(--sp-16);
  margin-top: var(--sp-24);
  scrollbar-width: thin;
}
.tcard {
  scroll-snap-align: center;
  flex: 0 0 100%;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-20, 20px);
  box-shadow: var(--sh-md);
  padding: var(--sp-40) var(--sp-40) var(--sp-32);
  text-align: center;
}
.tcard::before {
  content: "\201C";
  position: absolute;
  top: 4px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-navy-100);
  pointer-events: none;
}
.tcard__stars {
  color: #c99744;
  letter-spacing: 4px;
  font-size: 1.15rem;
  margin-bottom: var(--sp-16);
}
.tcard__quote {
  font-family: var(--font-display);
  font-size: var(--fz-24);
  line-height: 1.5;
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin: 0 0 var(--sp-20);
}
.tcard__author {
  color: var(--color-text-muted);
  font-size: var(--fz-15);
  font-weight: var(--fw-semibold);
}

/* -------------------------------------------------------------------------
   13b. TESTIMONIALS GRID — 3-up cards with an elevated featured card
   ------------------------------------------------------------------------- */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-24);
  margin-top: var(--sp-32);
  align-items: start;
}
.tgcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-20, 20px);
  padding: var(--sp-28) var(--sp-24);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.tgcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.tgcard--featured {
  border-color: var(--color-accent-light);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  transform: translateY(-10px);
}
.tgcard__head { display: flex; align-items: center; gap: var(--sp-12); }
.tgcard__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fz-16);
  color: #fff;
  background: linear-gradient(150deg, var(--color-navy-400), var(--color-navy-700));
}
.tgcard__meta { display: flex; flex-direction: column; line-height: 1.3; }
.tgcard__name { font-weight: var(--fw-semibold); color: var(--color-text); }
.tgcard__role { font-size: var(--fz-13); color: var(--color-text-muted); }
.tgcard__stars { color: #c99744; letter-spacing: 2px; font-size: 0.95rem; }
.tgcard__quote { margin: 0; color: var(--color-text-body); line-height: 1.65; font-size: var(--fz-15); position: relative; z-index: 1; }
.tgcard__mark {
  position: absolute; right: 16px; top: 18px;
  font-family: var(--font-display); font-size: 3rem; line-height: 1;
  color: var(--color-gray-200); z-index: 0; pointer-events: none;
}
.tgcard--placeholder { opacity: 0.62; }
.tgcard--placeholder .tgcard__avatar { background: var(--color-gray-300); color: var(--color-gray-600); }
.tgcard--placeholder .tgcard__stars { color: var(--color-gray-300); }
@media (max-width: 900px) { .tgrid { grid-template-columns: 1fr 1fr; } .tgcard--featured { transform: none; } }
@media (max-width: 560px) { .tgrid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   14. CONTACT PAGE — two-column: info sidebar + form card
   ------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-40);
  align-items: start;
}
.contact-layout__info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
/* stack the contact cards vertically as an info rail */
.contact-layout__info .contact-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin: 0;
}
.contact-layout__info .contact-card {
  text-align: left;
  align-items: flex-start;
}
/* form lives in a prominent card */
.contact-layout__form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-20, 20px);
  padding: var(--sp-32);
  box-shadow: var(--sh-md);
}
.contact-layout__form > h2:first-child,
.contact-layout__form > h2 { margin-top: 0; }
@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--sp-28); }
}

/* -------------------------------------------------------------------------
   13c. TESTIMONIAL — single verified review, centered feature
   (placeholders removed until real client reviews are supplied)
   ------------------------------------------------------------------------- */
.tsolo {
  max-width: 620px;
  margin: var(--sp-32) auto 0;
}
.tgcard--solo {
  width: 100%;
  align-items: center;
  text-align: center;
  gap: var(--sp-14);
  padding: var(--sp-40);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  border-color: var(--color-accent-light);
}
.tgcard--solo .tgcard__head { flex-direction: column; align-items: center; gap: var(--sp-6); }
.tgcard--solo .tgcard__avatar { width: 56px; height: 56px; font-size: var(--fz-18); }
.tgcard--solo .tgcard__meta { align-items: center; text-align: center; }
.tgcard--solo .tgcard__stars { letter-spacing: 3px; font-size: 1.05rem; }
.tgcard--solo .tgcard__quote { font-size: var(--fz-20); line-height: 1.6; margin: var(--sp-4) 0 0; }
.tgcard--solo .tgcard__mark { display: none; }

/* (Header logo: using the original full JCKC badge from the theme — no override.) */

/* -------------------------------------------------------------------------
   16. ACCESSIBILITY — extended
   ------------------------------------------------------------------------- */
/* skip link: off-screen until focused, then clearly visible */
.skip-link, .a11y-skip {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 100000;
  background: var(--color-primary);
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  font-weight: var(--fw-semibold);
  transition: top 0.15s ease;
}
.skip-link:focus, .a11y-skip:focus { top: 8px; }
/* comfortable tap targets on touch devices */
@media (pointer: coarse) {
  .header__mobile-menu a,
  .footer__link,
  .header__link { min-height: 44px; display: inline-flex; align-items: center; }
}
/* honour the OS "increase contrast" setting */
@media (prefers-contrast: more) {
  :root {
    --color-text-muted: var(--color-gray-700);
    --color-text-soft: var(--color-gray-700);
    --color-border: var(--color-gray-500);
  }
  .btn { border: 2px solid currentColor; }
}

/* -------------------------------------------------------------------------
   17. ACCESSIBILITY WIDGET (floating button + panel) — built by a11y.js
   ------------------------------------------------------------------------- */
/* retire the theme's partial a11y button in favour of the full widget */
#jckc-a11y-btn, #jckc-a11y-panel { display: none !important; }

.a11yw__fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 99990;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
  transition: transform 0.15s ease, background 0.15s ease;
}
.a11yw__fab:hover { transform: scale(1.06); background: var(--color-primary-hover); }
.a11yw__fab svg { width: 26px; height: 26px; }

.a11yw__panel {
  position: fixed; left: 20px; bottom: 84px; z-index: 99991;
  width: 300px; max-width: calc(100vw - 40px);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
  padding: 8px; font-size: 15px;
}
.a11yw__head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; border-bottom: 1px solid var(--color-border); margin-bottom: 6px; }
.a11yw__title { font-size: 1.1rem; margin: 0; flex: 1; }
.a11yw__ic { color: var(--color-primary); display: inline-flex; }
.a11yw__ic svg { width: 20px; height: 20px; }
.a11yw__ic--head svg { width: 24px; height: 24px; }
.a11yw__close { margin-left: auto; background: var(--color-bg-muted); border: none; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; }
.a11yw__close:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.a11yw__close svg { width: 16px; height: 16px; }

.a11yw__row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; }
.a11yw__label { flex: 1; }

/* segmented text-size control */
.a11yw__seg { display: inline-flex; background: var(--color-bg-muted); border-radius: 9px; padding: 3px; gap: 2px; }
.a11yw__seg button { border: none; background: transparent; cursor: pointer; border-radius: 7px; padding: 5px 11px; font-weight: 600; color: var(--color-text-muted); line-height: 1; }
.a11yw__seg button.is-on { background: var(--color-primary); color: #fff; }

/* toggle switch */
.a11yw__switch { position: relative; width: 44px; height: 26px; border-radius: 999px; border: none; cursor: pointer; background: var(--color-gray-300); transition: background 0.15s ease; flex: 0 0 auto; }
.a11yw__switch.is-on { background: var(--color-primary); }
.a11yw__knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.a11yw__switch.is-on .a11yw__knob { transform: translateX(18px); }

.a11yw__reset { width: 100%; margin-top: 6px; padding: 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-subtle); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; color: var(--color-text); }
.a11yw__reset:hover { background: var(--color-bg-muted); }
.a11yw__reset svg { width: 16px; height: 16px; }

/* ---- the preference modes (applied on <html>) ---- */
.a11y-text-1 { font-size: 112.5%; }
.a11y-text-2 { font-size: 125%; }
.a11y-contrast body { filter: contrast(1.3) saturate(1.1); }
.a11y-links a { text-decoration: underline !important; text-underline-offset: 2px; outline: 1px solid currentColor; outline-offset: 1px; background: rgba(255, 214, 0, 0.28); }
.a11y-readable body, .a11y-readable body * { font-family: Verdana, Tahoma, "Segoe UI", system-ui, sans-serif !important; letter-spacing: 0.02em; word-spacing: 0.06em; line-height: 1.75 !important; }
.a11y-motion *, .a11y-motion *::before, .a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.a11y-motion .hero__canvas { display: none !important; }
.a11y-cursor, .a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 4l22 12-9 3-3 9z' fill='%23ffffff' stroke='%230f1d36' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}
@media (max-width: 560px) { .a11yw__fab { width: 46px; height: 46px; left: 14px; bottom: 14px; } .a11yw__panel { left: 14px; bottom: 68px; } }

/* -------------------------------------------------------------------------
   18. A11y contrast fix — consent-banner link (teal was ~4.3:1 on white)
   ------------------------------------------------------------------------- */
.jckc-consent__d a { color: #0b5563 !important; text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  .jckc-consent__d a { color: #7dd3e8 !important; }
}

/* -------------------------------------------------------------------------
   19. PERF — skip initial layout of off-screen sections
   The long pages have many sections; laying them all out up front dominates
   main-thread time. content-visibility:auto defers off-screen sections until
   they're near the viewport (contain-intrinsic-size reserves space, so no CLS).
   The hero and the first section (above the fold) are left to render normally.
   ------------------------------------------------------------------------- */
main > section:not(.hero):not(.page-hero):not(.carriers),
.jckc-page-faq,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

/* -------------------------------------------------------------------------
   4. BLOG PAGINATION
   The blog index is split into pages of nine cards (tools/gen-blog-pagination.mjs),
   which the ported theme has no styles for. Built from the same tokens as the
   buttons and post cards so it reads as part of the original design.
   ------------------------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12) var(--sp-16);
  margin-top: var(--sp-48);
}

.pagination__list {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__num,
.pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: 44px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-pill);
  background: var(--color-white);
  color: var(--color-text-body);
  font-family: var(--font-display);
  font-size: var(--fz-15);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}

.pagination__num {
  min-width: 44px;
  padding: 0 var(--sp-12);
}

.pagination__arrow {
  padding: 0 var(--sp-20);
  border-color: var(--color-border-strong);
  color: var(--color-primary);
}

.pagination__num:hover,
.pagination__arrow:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

.pagination__num:focus-visible,
.pagination__arrow:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pagination__num.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--sh-sm);
}

.pagination__arrow.is-disabled {
  opacity: 0.4;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.pagination__gap {
  display: inline-flex;
  min-width: 24px;
  justify-content: center;
  color: var(--color-text-muted);
}

/* The "Page 1 of 2" line sits under the controls on its own row: a
   non-shrinkable 100% basis, and max-width:none to escape the theme's
   `p{max-width:65ch}` — capped at 65ch the basis resolves to ~490px, which
   fits back onto the controls' line instead of wrapping below them. */
.pagination__status {
  flex: 0 0 100%;
  max-width: none;
  margin: 0;
  text-align: center;
  font-size: var(--fz-14);
  color: var(--color-text-muted);
}

@media (max-width: 560px) {
  .pagination__arrow {
    padding: 0 var(--sp-16);
  }
  .pagination__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}