/* Jikensitu about page companion CSS. Generated by scripts/generate_jikensitu_about_elementor_json.py */
#jks-about-page {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

#jks-about-page,
#jks-about-page * {
  box-sizing: border-box;
}

#jks-about-page .e-con,
#jks-about-page .e-con-inner,
#jks-about-page .elementor-widget,
#jks-about-page .elementor-widget-container,
#jks-about-page .elementor-heading-title,
#jks-about-page .elementor-text-editor {
  max-width: 100%;
  min-width: 0;
}

#jks-about-page p {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: strict;
}

#jks-about-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 400;
  width: 0;
  height: 3px;
  min-height: 3px;
  background: linear-gradient(90deg, #436C8E, #E8AD2C);
}

#jks-about-page [id*="-line"],
#jks-about-promise-head-eyebrow-line-left,
#jks-about-promise-head-eyebrow-line-right {
  flex: 0 0 auto;
}

#jks-about-hero {
  position: relative;
}

#jks-about-hero::after {
  content: "ABOUT";
  position: absolute;
  right: -32px;
  bottom: -44px;
  color: rgba(67,108,142,.05);
  font-size: 190px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}

#jks-about-hero-title .elementor-heading-title {
  max-width: 1040px;
  margin-inline: auto;
}

#jks-about-hero-inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

#jks-about-hero-title .elementor-heading-title::first-letter {
  color: inherit;
}

#jks-about-hero-sub {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

#jks-about-hero-tags,
#jks-about-idea-tags {
  justify-content: center;
}

#jks-about-brand-symbol,
#jks-about-promise-num-01,
#jks-about-promise-num-02,
#jks-about-promise-num-03,
#jks-about-promise-num-04,
#jks-about-contact-icon-01,
#jks-about-contact-icon-02,
#jks-about-contact-icon-03,
#jks-about-contact-icon-04 {
  flex: 0 0 auto;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
}

#jks-about-contact-icon-01 .elementor-widget-icon,
#jks-about-contact-icon-02 .elementor-widget-icon,
#jks-about-contact-icon-03 .elementor-widget-icon,
#jks-about-contact-icon-04 .elementor-widget-icon,
#jks-about-contact-icon-01 .elementor-widget-container,
#jks-about-contact-icon-02 .elementor-widget-container,
#jks-about-contact-icon-03 .elementor-widget-container,
#jks-about-contact-icon-04 .elementor-widget-container,
#jks-about-contact-icon-01 .elementor-icon-wrapper,
#jks-about-contact-icon-02 .elementor-icon-wrapper,
#jks-about-contact-icon-03 .elementor-icon-wrapper,
#jks-about-contact-icon-04 .elementor-icon-wrapper,
#jks-about-contact-icon-01 .elementor-icon,
#jks-about-contact-icon-02 .elementor-icon,
#jks-about-contact-icon-03 .elementor-icon,
#jks-about-contact-icon-04 .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}

#jks-about-story-block-01,
#jks-about-story-block-02 {
  align-items: center;
}

#jks-about-note-stack {
  position: relative;
  height: 386px;
}

#jks-about-note-card-01,
#jks-about-note-card-02,
#jks-about-note-card-03 {
  position: absolute;
  width: 66%;
  box-shadow: 0 20px 44px rgba(67,108,142,.16);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}

#jks-about-note-card-01 {
  top: 0;
  left: 0;
  border-top-color: #436C8E;
  transform: rotate(-6deg);
}

#jks-about-note-card-02 {
  top: 96px;
  left: 17%;
  z-index: 2;
  border-top-color: #E8AD2C;
  transform: rotate(2.5deg);
}

#jks-about-note-card-03 {
  top: 196px;
  left: 34%;
  border-top-color: #5a87ae;
  transform: rotate(-3deg);
}

#jks-about-note-card-01:hover { transform: rotate(-6deg) translateY(-8px); }
#jks-about-note-card-02:hover { transform: rotate(2.5deg) translateY(-8px); }
#jks-about-note-card-03:hover { transform: rotate(-3deg) translateY(-8px); }

#jks-about-stat-lab {
  margin-left: auto;
}

#jks-about-stat-row-01,
#jks-about-stat-row-02,
#jks-about-stat-row-03 {
  align-items: baseline;
}

#jks-about-stat-row-01 > .e-con-inner,
#jks-about-stat-row-02 > .e-con-inner,
#jks-about-stat-row-03 > .e-con-inner {
  align-items: baseline;
}

#jks-about-stat-row-01 .elementor-widget-heading:nth-child(3),
#jks-about-stat-row-02 .elementor-widget-heading:nth-child(3),
#jks-about-stat-row-03 .elementor-widget-heading:nth-child(3) {
  margin-left: auto;
}

#jks-about-mini-chart {
  height: 76px;
  min-height: 76px;
  align-items: flex-end;
}

#jks-about-chart-bar-01,
#jks-about-chart-bar-02,
#jks-about-chart-bar-03,
#jks-about-chart-bar-04,
#jks-about-chart-bar-05,
#jks-about-chart-bar-06 {
  flex: 1 1 0;
  min-height: 8px;
  transform: scaleY(.12);
  transform-origin: bottom;
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}

#jks-about-chart-bar-01 { height: 42%; }
#jks-about-chart-bar-02 { height: 60%; }
#jks-about-chart-bar-03 { height: 50%; }
#jks-about-chart-bar-04 { height: 78%; }
#jks-about-chart-bar-05 { height: 66%; }
#jks-about-chart-bar-06 {
  height: 94%;
  background: linear-gradient(180deg, #fdf6e3, #E8AD2C);
}

#jks-about-stat-card.jks-about-reveal-on #jks-about-chart-bar-01,
#jks-about-stat-card.jks-about-reveal-on #jks-about-chart-bar-02,
#jks-about-stat-card.jks-about-reveal-on #jks-about-chart-bar-03,
#jks-about-stat-card.jks-about-reveal-on #jks-about-chart-bar-04,
#jks-about-stat-card.jks-about-reveal-on #jks-about-chart-bar-05,
#jks-about-stat-card.jks-about-reveal-on #jks-about-chart-bar-06 {
  transform: scaleY(1);
}

#jks-about-profile-card,
#jks-about-career-edit-hint,
#jks-about-career-wrap {
  margin-inline: auto;
}

#jks-about-career-wrap {
  max-width: 880px;
  width: 100%;
}

#jks-about-career-track-01,
#jks-about-career-track-02,
#jks-about-career-track-03,
#jks-about-career-track-04 {
  position: relative;
}

#jks-about-career-track-01::before,
#jks-about-career-track-02::before,
#jks-about-career-track-03::before,
#jks-about-career-track-04::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 26px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #436C8E;
}

#jks-about-career-track-04::before {
  background: #E8AD2C;
  border-color: #E8AD2C;
  box-shadow: 0 0 0 4px #fdf6e3;
}

#jks-about-photo-stage {
  overflow: hidden;
}

#jks-about-photo-frame-01,
#jks-about-photo-frame-02,
#jks-about-photo-frame-03 {
  position: absolute;
  background: #fff;
  transition: transform .32s ease, box-shadow .32s ease, z-index .32s ease;
}

#jks-about-photo-frame-01 {
  left: 4%;
  top: 30px;
  width: 42%;
  height: 190px;
  transform: rotate(-4deg);
}

#jks-about-photo-frame-02 {
  left: 31%;
  top: 78px;
  z-index: 2;
  width: 42%;
  height: 196px;
}

#jks-about-photo-frame-03 {
  right: 4%;
  top: 18px;
  width: 38%;
  height: 180px;
  transform: rotate(4deg);
}

#jks-about-photo-caption-01,
#jks-about-photo-caption-02,
#jks-about-photo-caption-03 {
  position: absolute;
  left: 12px;
  bottom: 12px;
}

#jks-about-meetup-note {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
}

#jks-about-terminal-bar {
  min-height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

#jks-about-repo-lines {
  padding: 22px;
}

#jks-about-repo-stats {
  padding: 0 22px 22px;
}

#jks-about-contact-item-01 a,
#jks-about-contact-item-02 a,
#jks-about-contact-item-03 a,
#jks-about-contact-item-04 a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

#jks-about-contact-item-01 strong,
#jks-about-contact-item-02 strong,
#jks-about-contact-item-03 strong,
#jks-about-contact-item-04 strong {
  color: #1a2332;
  font-size: 13px;
}

@media (max-width: 1024px) and (min-width: 769px) {
  #jks-about-hero,
  #jks-about-story,
  #jks-about-philosophy,
  #jks-about-story,
  #jks-about-promise,
  #jks-about-career,
  #jks-about-proof,
  #jks-about-cases,
  #jks-about-events,
  #jks-about-contact {
    padding-inline: 32px;
  }

  #jks-about-philosophy-grid,
  #jks-about-proof-grid,
  #jks-about-contact-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  #jks-about-story-block-01,
  #jks-about-story-block-02,
  #jks-about-career-row-01,
  #jks-about-career-row-02,
  #jks-about-career-row-03,
  #jks-about-career-row-04 {
    grid-template-columns: minmax(0, 1fr);
  }

  #jks-about-story-two-visual {
    order: 2;
  }

  #jks-about-story-two-text {
    order: 1;
  }

  #jks-about-promise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #jks-about-hero-title .elementor-heading-title {
    font-size: 42px;
  }
}

@media (max-width: 768px) {
  #jks-about-page,
  #jks-about-page *,
  #jks-about-page *::before,
  #jks-about-page *::after {
    box-sizing: border-box !important;
  }

  #jks-about-page,
  #jks-about-page .e-con,
  #jks-about-page .e-con-inner,
  #jks-about-page .elementor-element,
  #jks-about-page .elementor-widget,
  #jks-about-page .elementor-widget-container {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #jks-about-hero,
  #jks-about-story,
  #jks-about-philosophy,
  #jks-about-promise,
  #jks-about-career,
  #jks-about-proof,
  #jks-about-cases,
  #jks-about-events,
  #jks-about-contact {
    width: 100% !important;
    max-width: 100vw !important;
    padding-inline: 20px;
    overflow-x: hidden;
  }

  #jks-about-page [id*="eyebrow-line"] {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }

  #jks-about-hero-title-line {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
  }

  #jks-about-page [id*="title-line"]:not(#jks-about-hero-title-line) {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  #jks-about-hero-inner,
  #jks-about-story-wrap,
  #jks-about-promise-wrap,
  #jks-about-career-wrap,
  #jks-about-proof-wrap,
  #jks-about-cases-wrap,
  #jks-about-events-wrap,
  #jks-about-contact-wrap {
    width: 100% !important;
    max-width: calc(100vw - 40px) !important;
  }

  #jks-about-page .elementor-heading-title,
  #jks-about-page .elementor-text-editor,
  #jks-about-page .elementor-text-editor p {
    max-width: calc(100vw - 40px) !important;
  }

  #jks-about-hero {
    padding-top: 96px;
    padding-bottom: 58px;
  }

  #jks-about-hero::after {
    right: -20px;
    bottom: -18px;
    font-size: 92px;
  }

  #jks-about-hero-title .elementor-heading-title {
    display: block;
    width: 100%;
    max-width: 320px !important;
    margin-inline: auto;
    font-size: 30px;
    line-height: 1.18;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  #jks-about-story-head-title .elementor-heading-title,
  #jks-about-promise-head-title .elementor-heading-title,
  #jks-about-career-head-title .elementor-heading-title,
  #jks-about-proof-head-title .elementor-heading-title,
  #jks-about-cases-head-title .elementor-heading-title,
  #jks-about-events-head-title .elementor-heading-title,
  #jks-about-contact-head-title .elementor-heading-title {
    display: block;
    width: 100%;
    max-width: 320px !important;
    margin-inline: auto;
    font-size: 28px;
    line-height: 1.24;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  #jks-about-story-one-text h2.elementor-heading-title,
  #jks-about-story-two-text h2.elementor-heading-title {
    display: block;
    width: 100%;
    max-width: 320px !important;
    font-size: 28px;
    line-height: 1.26;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  #jks-about-page [id*="-eyebrow"] .elementor-heading-title,
  #jks-about-page [id*="-tag"] .elementor-heading-title,
  #jks-about-story-one-text-index .elementor-heading-title,
  #jks-about-story-two-text-index .elementor-heading-title {
    width: auto;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  #jks-about-story-one-text-index,
  #jks-about-story-two-text-index {
    width: fit-content !important;
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 8px;
  }

  #jks-about-story-one-text-index-num,
  #jks-about-story-two-text-index-num {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }

  #jks-about-philosophy,
  #jks-about-promise,
  #jks-about-career,
  #jks-about-proof,
  #jks-about-cases,
  #jks-about-events,
  #jks-about-contact {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  #jks-about-philosophy-grid,
  #jks-about-promise-grid,
  #jks-about-proof-grid,
  #jks-about-contact-panel,
  #jks-about-contact-list,
  #jks-about-meetup-note,
  #jks-about-repo-stats,
  #jks-about-story-block-01,
  #jks-about-story-block-02,
  #jks-about-cases-grid,
  #jks-about-events-grid,
  #jks-about-career-row-01,
  #jks-about-career-row-02,
  #jks-about-career-row-03,
  #jks-about-career-row-04,
  #jks-about-profile-card {
    grid-template-columns: minmax(0, 1fr);
  }

  #jks-about-story-block-02 {
    margin-top: 56px;
  }

  #jks-about-note-stack {
    height: 340px;
    min-height: 340px;
  }

  #jks-about-note-card-01,
  #jks-about-note-card-02,
  #jks-about-note-card-03 {
    width: 78%;
  }

  #jks-about-note-card-02 {
    left: 12%;
  }

  #jks-about-note-card-03 {
    left: 22%;
    top: 178px;
  }

  #jks-about-career-period-01,
  #jks-about-career-period-02,
  #jks-about-career-period-03,
  #jks-about-career-period-04 {
    padding: 0 0 8px 32px;
  }

  #jks-about-career-period-01 .elementor-heading-title,
  #jks-about-career-period-02 .elementor-heading-title,
  #jks-about-career-period-03 .elementor-heading-title,
  #jks-about-career-period-04 .elementor-heading-title {
    text-align: left;
  }

  #jks-about-career-track-01,
  #jks-about-career-track-02,
  #jks-about-career-track-03,
  #jks-about-career-track-04 {
    padding-bottom: 26px;
  }

  #jks-about-career-track-01::before,
  #jks-about-career-track-02::before,
  #jks-about-career-track-03::before,
  #jks-about-career-track-04::before {
    top: 4px;
  }

  #jks-about-brand-panel {
    min-height: 400px;
  }

  #jks-about-photo-stage {
    min-height: 620px;
    margin: 4px 20px 24px;
  }

  #jks-about-photo-frame-01,
  #jks-about-photo-frame-02,
  #jks-about-photo-frame-03 {
    left: 50%;
    right: auto;
    width: 78%;
    height: 150px;
    transform: translateX(-50%) rotate(0);
  }

  #jks-about-photo-frame-01 { top: 20px; }
  #jks-about-photo-frame-02 { top: 150px; }
  #jks-about-photo-frame-03 { top: 280px; }

  #jks-about-meetup-note {
    left: 20px;
    right: 20px;
    bottom: 22px;
  }

  #jks-about-contact-panel {
    padding: 24px;
  }
}