/* JisanPortal site view refresh */
body.has-main-bg {
  --sv-navy: #0f2747;
  --sv-blue: #224b9c;
  --sv-gold: #d99a2b;
  --sv-ink: #172033;
  --sv-muted: #667085;
  --sv-line: #e4e9f0;
  --sv-surface: #f4f7fb;
  --sv-card: #fff;
  --sv-radius: 24px;
  --sv-shadow: 0 20px 58px rgba(15, 39, 71, .09);
  background: var(--sv-surface) !important;
  color: var(--sv-ink);
}

body.has-main-bg .jp-header { z-index: 2147483000 !important; }

/*
 * Keep the document height stable when the project menu changes
 * from in-flow to fixed positioning. Without this compensation,
 * anchor targets move upward during the first smooth scroll.
 */
body.has-main-bg menu.is-fixed + .site-view {
  margin-top: 85px !important;
}

@media (max-width: 768px) {
  body.has-main-bg menu.is-fixed + .site-view {
    margin-top: 78px !important;
  }
}

/* Immersive opening */
body.has-main-bg #main-top {
  isolation: isolate;
  min-height: max(820px, calc(100dvh - 64px));
  height: auto;
  display: flex;
  align-items: center;
  background-position: center 45%;
}

body.has-main-bg #main-top::before {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 18, 35, .92) 0%, rgba(8, 31, 57, .74) 36%, rgba(8, 31, 57, .24) 70%, rgba(8, 31, 57, .08) 100%),
    linear-gradient(0deg, rgba(4, 16, 30, .42), transparent 45%);
}

body.has-main-bg #main-top > * { z-index: 1; }
body.has-main-bg .hero-content {
  box-sizing: border-box;
  width: min(calc(100% - 64px), 1380px);
  max-width: none;
  margin: 0 auto;
  padding: 110px 0 150px;
}
body.has-main-bg .hero-content::before {
  content: "JISANPORTAL  ·  PROJECT";
  align-self: flex-start;
  margin-bottom: 22px;
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.08);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
  backdrop-filter: blur(10px);
}
body.has-main-bg .hero-title {
  max-width: 880px;
  margin: 0;
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 820;
  line-height: 1.04;
  letter-spacing: -.06em;
  text-shadow: 0 14px 36px rgba(0,0,0,.26);
}
body.has-main-bg .hero-sub {
  max-width: 680px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 17px;
  line-height: 1.7;
  text-transform: none;
}
body.has-main-bg .hero-highlight-item {
  padding: 11px 16px;
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  font-size: 13px;
  font-weight: 650;
}
body.has-main-bg .scroll-mouse { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.8); }
body.has-main-bg .scroll-wheel { background: #fff; }

/* Project navigation */
body.has-main-bg menu {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(9, 19, 32, .9);
  box-shadow: 0 22px 55px rgba(0,0,0,.24);
  backdrop-filter: blur(22px) saturate(140%);
}
body.has-main-bg menu a { transition: color .18s ease, background .18s ease, transform .18s ease; }
body.has-main-bg menu li a:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
body.has-main-bg menu li i { color: #c4cad3; }
body.has-main-bg menu .menu-home a,
body.has-main-bg menu li.active a { color: #fff; background: rgba(217,154,43,.18); }
body.has-main-bg menu .menu-home i,
body.has-main-bg menu li.active i { color: #ffc66d; }

/* Reading canvas */
body.has-main-bg .site-view {
  margin-top: 0 !important;
  padding: 76px 24px 120px;
  background: linear-gradient(180deg, #eef3f8, #f8fafc 420px, #fff 100%);
  color: var(--sv-ink);
  backdrop-filter: none;
}
body.has-main-bg .site-view > section,
body.has-main-bg .site-view > div,
body.has-main-bg .site-view > .sv-gallery-wrap { width: min(100%, 1240px); }

/* Shared section language */
body.has-main-bg .sv-card,
body.has-main-bg .summary_pd,
body.has-main-bg .sv-location,
body.has-main-bg .sv-video,
body.has-main-bg .sv-brochures {
  box-sizing: border-box;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-radius);
  background: rgba(255,255,255,.98);
  color: var(--sv-ink);
  box-shadow: var(--sv-shadow);
}
body.has-main-bg .sv-card:hover { transform: none; box-shadow: var(--sv-shadow); }
body.has-main-bg .sv-h2,
body.has-main-bg .summary-title,
body.has-main-bg .sv-section-title,
body.has-main-bg .sv-brochure-header .sv-h2 {
  color: var(--sv-navy);
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.045em;
}
body.has-main-bg .summary-title { padding-left: 18px; }
body.has-main-bg .summary-title::before { width: 5px; height: 28px; background: linear-gradient(var(--sv-blue), #55a4df); }

/* Overview */
body.has-main-bg .sv-hero { padding-top: 0; }
body.has-main-bg .sv-hero__title {
  margin: 0 0 38px;
  padding: 0;
  color: var(--sv-navy);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 820;
  letter-spacing: -.055em;
}
body.has-main-bg .sv-hero__body { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); gap: 24px; }
body.has-main-bg .sv-hero__slider { border-radius: 22px; box-shadow: var(--sv-shadow); }
body.has-main-bg .sv-hero__spec { padding: 28px; border: 1px solid var(--sv-line); border-radius: 22px; background: #fff; box-shadow: var(--sv-shadow); }
body.has-main-bg .sv-hero__spec h3 { color: var(--sv-navy); font-size: 22px; text-align: left; }
body.has-main-bg .sv-table th,
body.has-main-bg .sv-table td { padding: 13px 10px; border-bottom: 1px solid #edf0f4; color: #475467; }
body.has-main-bg .sv-table th { width: 38%; color: #667085; font-size: 12px; }
body.has-main-bg .sv-table td { color: var(--sv-ink); font-weight: 650; }

/* Highlights and key data */
body.has-main-bg .sv-grid2 { gap: 16px; margin: 28px auto 64px; }
body.has-main-bg .sv-grid2 .sv-card { min-height: 190px; padding: 28px; overflow: hidden; }
body.has-main-bg .sv-grid2 .sv-card::after { content: ""; position: absolute; right: -42px; bottom: -52px; width: 130px; height: 130px; border-radius: 50%; background: #eef4ff; }
body.has-main-bg .sv-card h2 { color: var(--sv-navy); font-size: 20px; }
body.has-main-bg .sv-card p { color: var(--sv-muted); }
body.has-main-bg .sv-card li { color: #475467; line-height: 1.65; }
body.has-main-bg .sv-card li::before { color: var(--sv-blue); }
body.has-main-bg .sv-core-info { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr); gap: 18px; margin: 0 auto 64px; }
body.has-main-bg .sv-core-info > .sv-card,
body.has-main-bg .sv-management { margin: 0; padding: 30px; }
body.has-main-bg .sv-kv { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
body.has-main-bg .sv-kv li { padding: 15px; border: 1px solid #e8edf3; border-radius: 13px; background: #fafbfd; }
body.has-main-bg .sv-label-green { display: block; margin-bottom: 7px; color: var(--sv-blue); font-size: 11px; font-weight: 750; }

/* Rich text, map, industries */
body.has-main-bg .sv-summary { margin: 64px auto; }
body.has-main-bg .summary_pd { padding: 42px; color: #344054; line-height: 1.85; }
body.has-main-bg .sv-location { margin: 64px auto; padding: 36px; }
body.has-main-bg .sv-location__row { padding: 16px 18px; border: 1px solid var(--sv-line); border-radius: 13px; background: #f8fafc; }
body.has-main-bg .sv-label { color: var(--sv-blue); font-size: 12px; font-weight: 800; }
body.has-main-bg .sv-value { color: #344054; font-weight: 650; }
body.has-main-bg .sv-map { height: 460px; border-radius: 18px; box-shadow: none; }
body.has-main-bg .sv-map-btn { padding: 12px 18px; border-radius: 11px; background: #f7e600; font-size: 13px; }
body.has-main-bg .sv-industries { margin: 64px auto; padding: 36px; }
body.has-main-bg .sv-two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
body.has-main-bg .sv-box { padding: 24px !important; border: 1px solid var(--sv-line) !important; border-radius: 16px; background: #fafbfd; }
body.has-main-bg .sv-box--ok { border-top: 4px solid #2e8b67 !important; }
body.has-main-bg .sv-box--warn { border-top: 4px solid #d26a52 !important; }

/* Media and documents */
body.has-main-bg .sv-gallery-wrap { margin: 64px auto; }
body.has-main-bg .sv-gallery-section { margin: 18px 0; padding: 34px; }
body.has-main-bg .sv-gallery { gap: 16px; }
body.has-main-bg .sv-figure { overflow: hidden; border-radius: 16px; background: #f3f5f8; }
body.has-main-bg .sv-figure img { transition: transform .35s ease; }
body.has-main-bg .sv-figure:hover img { transform: scale(1.035); }
body.has-main-bg .sv-video { margin: 64px auto; padding: 36px; backdrop-filter: none; }
body.has-main-bg .sv-video-item { border-radius: 18px; box-shadow: 0 12px 36px rgba(15,39,71,.12); }
body.has-main-bg .sv-brochures { margin: 64px auto; }

/* FAQ and conversion */
body.has-main-bg .sv-faq { margin: 64px auto; padding: 38px; }
body.has-main-bg .sv-faq-item { border-bottom: 1px solid var(--sv-line); }
body.has-main-bg .sv-faq-q { min-height: 66px; color: var(--sv-ink); font-size: 16px; font-weight: 700; }
body.has-main-bg .sv-faq-a { color: var(--sv-muted); line-height: 1.8; }
body.has-main-bg .sv-cta {
  isolation: isolate;
  overflow: hidden;
  margin: 72px auto;
  padding: 52px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--sv-navy), #244f82);
  text-align: center;
}
body.has-main-bg .sv-btn--primary { display: inline-flex; min-height: 56px; align-items: center; padding: 0 26px; border-radius: 13px; background: #fff; color: var(--sv-navy); font-weight: 800; text-decoration: none; }
body.has-main-bg .sv-cta .sv-hint { color: rgba(255,255,255,.68); }

/* Floating actions */
body.has-main-bg .sv-fab-main,
body.has-main-bg .sv-fab-item { box-shadow: 0 14px 36px rgba(15,39,71,.2); }
body.has-main-bg .sv-mobile-bar { border-top: 1px solid var(--sv-line); background: rgba(255,255,255,.96); backdrop-filter: blur(18px); }

@media (max-width: 900px) {
  body.has-main-bg #main-top { min-height: 650px; }
  body.has-main-bg .hero-content { width: calc(100% - 40px); padding: 110px 0 130px; }
  body.has-main-bg .hero-title { font-size: 52px; }
  body.has-main-bg .sv-hero__body { grid-template-columns: 1fr; }
  body.has-main-bg .sv-core-info { grid-template-columns: 1fr; }
  body.has-main-bg .sv-grid2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body.has-main-bg {
    min-height: 100vh;
    min-height: 100svh;
  }
  body.has-main-bg #main-top {
    min-height: calc(100vh - 60px);
    min-height: calc(100svh - 60px);
    align-items: flex-start;
    overflow-anchor: none;
  }
  body.has-main-bg .main-bg-position {
    height: calc(100vh - 61px);
    height: calc(100svh - 61px);
    min-height: calc(100vh - 61px);
    min-height: calc(100svh - 61px);
    overflow-anchor: none;
  }
  body.has-main-bg #main-top::before { background: linear-gradient(180deg, rgba(5,18,35,.9), rgba(8,31,57,.58) 48%, rgba(5,18,35,.3)); }
  body.has-main-bg .hero-content { width: calc(100% - 20px); align-items: center; padding: 76px 0 120px; text-align: center; }
  body.has-main-bg .hero-content::before { align-self: center; }
  body.has-main-bg .hero-title { font-size: 39px; letter-spacing: -.05em; }
  body.has-main-bg .hero-sub { justify-content: center; margin-top: 16px; color: rgba(255,255,255,.82); font-size: 15px; white-space: normal; }
  body.has-main-bg .hero-highlights { justify-content: center; }
  body.has-main-bg .site-view { padding: 40px 8px 88px; }
  body.has-main-bg .sv-hero__title { margin-bottom: 24px; font-size: 31px; }
  body.has-main-bg .sv-hero__spec { padding: 18px 12px; }
  body.has-main-bg .sv-grid2 .sv-card,
  body.has-main-bg .sv-core-info > .sv-card,
  body.has-main-bg .sv-management,
  body.has-main-bg .summary_pd,
  body.has-main-bg .sv-location,
  body.has-main-bg .sv-industries,
  body.has-main-bg .sv-gallery-section,
  body.has-main-bg .sv-video,
  body.has-main-bg .sv-faq { padding: 20px 12px; border-radius: 16px; }
  body.has-main-bg .sv-kv { grid-template-columns: 1fr; }
  body.has-main-bg .sv-kv > *,
  body.has-main-bg .sv-table th,
  body.has-main-bg .sv-table td,
  body.has-main-bg .sv-faq-q,
  body.has-main-bg .sv-faq-a {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }
  body.has-main-bg .sv-two-col { grid-template-columns: 1fr; }
  body.has-main-bg .sv-map { height: 330px; border-radius: 14px; }
  body.has-main-bg .sv-cta { padding: 28px 14px; border-radius: 18px; }
  body.has-main-bg .sv-btn--primary { width: 100%; box-sizing: border-box; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  body.has-main-bg .sv-figure img,
  body.has-main-bg menu a { transition: none; }
}