.detail-page-header .nav-brand-link {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 42px;
  gap: 2px;
}

.detail-page-header .nav-brand-avatar {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: none;
}

.detail-page-header .nav-logo-wordmark {
  display: block;
  position: relative;
  width: 84px;
  height: 28px;
  overflow: hidden;
  flex: none;
}

.detail-page-header .nav-logo-wordmark img {
  position: absolute;
  display: block;
  width: 164px;
  height: 164px;
  max-width: none;
  left: -68px;
  top: -68px;
}

.school-detail-page main { padding-top: 24px; }
.school-detail-page .detail-page-header { margin-bottom: 8px; }
.detail-page-header > .flex { margin-bottom: 12px; }
#overview { padding-top: 12px; padding-bottom: 24px; }

/* Keep adjacent content sections visually continuous. */
#overview,
#curriculum,
#records,
#tuition,
#calendar,
#gallery,
#evaluation {
  border-bottom: 0;
}

#curriculum,
#records,
#tuition,
#calendar,
#gallery,
#evaluation {
  padding-top: 40px;
  padding-bottom: 40px;
}

#curriculum { padding-bottom: 20px; }
#records { padding-top: 20px; }

body.school-detail-page:not(.is-ready) main section { visibility: hidden; }
.school-detail-page { color: #132a4a; background: #f8fafc; }
.school-detail-page main { background: #f8fafc; }
.school-detail-page main section { background: #f8fafc; }
.detail-section-inner { max-width: 1024px; }
.detail-school-heading { display: flex; align-items: center; gap: 20px; margin-bottom: 12px; }
.detail-school-info { flex: 1; min-width: 0; }
.detail-school-logo { display: grid; place-items: center; width: 96px; height: 96px; flex: none; color: #132a4a; }
.detail-school-logo img { width: 94px; height: 94px; object-fit: contain; }
.detail-school-logo .material-symbols-outlined { font-size: 36px; }
.detail-school-heading h1 { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.25; font-weight: 750; }
.detail-slogan { margin: 8px 0 0; color: #52627a; font-size: 14px; line-height: 1.5; }
.detail-media-stack { display: grid; gap: 28px; }
.detail-media-row + .detail-media-row { padding-top: 24px; border-top: 1px solid #e0e6ef; }
.detail-media-row h2 { margin: 0 0 14px; color: #132a4a; font-size: 19px; font-weight: 750; }
.detail-media-row h3 { margin: 0 0 14px; color: #132a4a; font-size: 17px; font-weight: 700; }
.detail-media-row > .detail-empty { margin: 0; padding: 24px; border: 1px solid #e0e6ef; border-radius: 14px; background: white; }
.detail-video-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.detail-video-layout > .detail-empty { margin: 0; padding: 24px; border: 1px solid #e0e6ef; border-radius: 14px; background: white; }
.detail-video-sidebar { min-width: 0; }
.detail-cover { position: relative; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; border-radius: 16px; background: #e8edf3; }
.detail-cover video { display: block; width: 100%; height: 100%; object-fit: contain; background: #132a4a; }
.detail-cover img { display: block; width: 100%; height: 100%; object-fit: contain; background: #132a4a; }
#detail-cover-image { object-fit: cover; object-position: center 42%; }
.detail-cover [hidden] { display: none; }
.detail-cover-arrow { position: absolute; z-index: 2; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; transform: translateY(-50%); border: 1px solid #ffffffb8; border-radius: 50%; background: #fffdf0e8; color: #132a4a; box-shadow: 0 2px 12px #132a4a40; cursor: pointer; }
.detail-cover-arrow:hover { background: white; }
.detail-cover-arrow:focus-visible { outline: 3px solid #ff5722; outline-offset: 2px; }
.detail-cover-arrow .material-symbols-outlined { font-size: 30px; }
.detail-cover-arrow--prev { left: 14px; }
.detail-cover-arrow--next { right: 14px; }
.detail-thumbnails { display: flex; gap: 10px; min-width: 0; overflow-x: auto; padding-bottom: 4px; }
.detail-thumbnails button { position: relative; width: 132px; min-height: 44px; aspect-ratio: 16 / 9; flex: none; overflow: hidden; border: 2px solid transparent; border-radius: 9px; background: white; padding: 0; cursor: pointer; }
.detail-thumbnails button.is-active { border-color: #ff5722; }
.detail-thumbnails img { width: 100%; height: 100%; object-fit: cover; }
.detail-video-play-icon { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%; background: #132a4acc; color: white; font-size: 24px; }
.detail-media-gallery { position: relative; }
.detail-media-photos { display: grid; grid-template-columns: none; grid-auto-columns: calc((100% - 30px) / 4); grid-auto-flow: column; gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #b8c8db transparent; }
.detail-media-arrow[hidden] { display: none; }
.detail-media-photos::-webkit-scrollbar { display: block; height: 6px; }
.detail-media-photos::-webkit-scrollbar-thumb { border-radius: 999px; background: #b8c8db; }
.detail-media-photos button { display: block; min-width: 0; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 0; border-radius: 10px; background: #e8edf3; cursor: pointer; scroll-snap-align: start; }
.detail-media-photos button:focus-visible { outline: 3px solid #ff5722; outline-offset: -3px; }
.detail-media-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.detail-stat, .detail-panel { background: white; border: 1px solid #e0e6ef; border-radius: 14px; box-shadow: 0 2px 5px #132a4a08; }
.detail-stat { padding: 18px; min-width: 0; }
.detail-stat span { display: block; font-size: 12px; color: #617089; }
.detail-stat strong { display: block; margin-top: 8px; font-size: 19px; overflow-wrap: anywhere; }
.detail-stat--address strong { font-size: 15px; line-height: 1.5; }
.detail-section-heading { margin-bottom: 20px; }
.detail-section-heading > span { color: #ff5722; font-size: 11px; font-weight: 750; letter-spacing: .1em; }
.detail-section-heading h2 { margin: 4px 0 0; color: #132a4a; font-size: clamp(23px, 2.5vw, 30px); font-weight: 750; }
.detail-section-heading p { margin: 8px 0 0; color: #617089; font-size: 14px; line-height: 1.7; }
.detail-panel { padding: 24px; line-height: 1.8; overflow-wrap: anywhere; }
.detail-prose { white-space: pre-line; }
.detail-panel.detail-course-panel { padding: 0; overflow: hidden; }
.detail-course-item { display: grid; grid-template-columns: minmax(160px, .28fr) minmax(0, 1fr); align-items: start; gap: 24px; padding: 24px; }
.detail-course-item + .detail-course-item { border-top: 1px solid #e0e6ef; }
.detail-course-item h3 { margin: 0; color: #132a4a; font-size: 18px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.detail-course-description p { max-width: 75ch; margin: 0; color: #40526c; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.detail-empty { color: #8490a2; font-size: 14px; font-weight: 400; }
.detail-fee-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px 20px; border: 1px solid #e0e6ef; border-radius: 28px; background: white; box-shadow: 0 5px 18px #132a4a0b; }
.detail-fee-summary > div { min-width: 0; text-align: center; }
.detail-fee-summary > div + div { border-left: 1px solid #c8d6e8; }
.detail-fee-summary > div > span { color: #52627a; font-size: 15px; font-weight: 600; }
.detail-fee-summary strong { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin-top: 8px; color: #132a4a; font-size: clamp(27px, 4vw, 42px); line-height: 1.15; }
.detail-fee-summary strong small { color: #617089; font-size: 16px; font-weight: 500; }
.detail-fee-summary strong em { font-size: 17px; font-style: normal; font-weight: 600; }
.detail-fee-breakdown { margin-top: 16px; padding: 26px 30px 30px; border: 1px solid #e0e6ef; border-radius: 28px; background: white; box-shadow: 0 5px 18px #132a4a0b; }
.detail-fee-breakdown h3 { margin: 0 0 24px; padding-bottom: 14px; border-bottom: 1px solid #e1e8f1; color: #132a4a; font-size: 20px; font-weight: 750; }
.detail-fee-breakdown-body { display: grid; grid-template-columns: minmax(190px, 280px) minmax(0, 300px); justify-content: center; gap: 64px; align-items: center; }
.detail-fee-chart { position: relative; display: grid; place-items: center; width: min(100%, 260px); aspect-ratio: 1; margin: 0; border-radius: 50%; background: conic-gradient(#ff5722 0 var(--school-fee-share), #1e4779 var(--school-fee-share) 100%); }
.detail-fee-chart::before { position: absolute; inset: 38px; border-radius: 50%; background: white; content: ''; }
.detail-fee-chart > div { position: relative; display: flex; flex-direction: column; align-items: center; color: #132a4a; }
.detail-fee-chart strong { font-size: clamp(25px, 3vw, 32px); line-height: 1.1; }
.detail-fee-chart span { margin-top: 3px; color: #617089; font-size: 14px; }
.detail-fee-items { display: grid; gap: 7px; min-width: 0; width: 100%; max-width: 300px; justify-self: center; }
.detail-fee-group, .detail-fee-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: baseline; gap: 9px; padding-left: 30px; }
.detail-fee-group { color: #132a4a; font-size: 15px; }
.detail-fee-group b { white-space: nowrap; }
.detail-fee-group--accommodation { margin-top: 10px; }
.detail-fee-swatch { width: 13px; height: 13px; align-self: center; border-radius: 3px; }
.detail-fee-swatch--school { background: #ff5722; }
.detail-fee-swatch--accommodation { background: #1e4779; }
.detail-fee-item { color: #52627a; font-size: 14px; }
.detail-fee-item::before { color: #adbacb; content: '•'; text-align: center; }
.detail-fee-item strong { color: #132a4a; font-weight: 700; white-space: nowrap; }
.detail-fee-disclaimer { margin: 12px 4px 0; color: #8490a2; font-size: 12px; line-height: 1.6; }
.detail-fee-note { color: #617089; font-size: 13px; line-height: 1.7; }
.detail-fee-note { margin: 10px 4px 0; }
.detail-fit-grid ul { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0; margin: 0; list-style: none; }
.detail-fit-grid li { position: relative; padding-left: 18px; color: #344b68; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.detail-fit-grid li::before { position: absolute; left: 0; color: #ff5722; content: '•'; }
.detail-fit-grid li.detail-fit-summary { grid-column: 1 / -1; }
.detail-calendar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; height: 330px; align-items: stretch; }
.detail-calendar-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 9px; min-height: 0; }
.detail-calendar-month { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 12px; border: 1px solid #dce5ef; border-radius: 14px; background: white; color: #132a4a; text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.detail-calendar-month:not(:disabled):hover { border-color: #ff5722; transform: translateY(-2px); }
.detail-calendar-month:focus-visible { outline: 3px solid #ff5722; outline-offset: 2px; }
.detail-calendar-month.is-active { border-color: #132a4a; background: #132a4a; color: white; }
.detail-calendar-month:disabled { background: #f3f5f9; color: #98a4b5; cursor: default; }
.detail-calendar-month-label { display: flex; align-items: baseline; gap: 2px; }
.detail-calendar-month-label strong { font-size: 25px; line-height: 1; }
.detail-calendar-month-label span { font-size: 12px; font-weight: 650; }
.detail-calendar-detail { display: flex; align-items: center; min-width: 0; min-height: 0; padding: 24px; overflow-y: auto; border: 1px solid #dce5ef; border-radius: 18px; background: white; }
.detail-calendar-detail ul { display: grid; width: 100%; gap: 10px; margin: 0; padding: 0; list-style: none; }
.detail-calendar-detail ul.is-dense { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.detail-calendar-detail li { position: relative; padding-left: 18px; color: #344b68; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.detail-calendar-detail li::before { position: absolute; left: 0; color: #ff5722; content: '•'; }
.detail-calendar-note { margin: 12px 2px 0; color: #617089; font-size: 13px; line-height: 1.6; }
.detail-gallery-list { display: grid; gap: 22px; }
.detail-gallery-group h3, .detail-fit-grid h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.detail-gallery-group { padding: 22px; border: 1px solid #e0e6ef; border-radius: 14px; background: white; }
.detail-image-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.detail-image-grid a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; }
.detail-image-grid img { width: 100%; height: 100%; object-fit: cover; }
.detail-results-images { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
.detail-results-images button { display: block; width: 100%; min-width: 0; padding: 12px; border: 1px solid #e0e6ef; border-radius: 16px; background: white; box-shadow: 0 5px 18px #132a4a0d; cursor: zoom-in; }
.detail-results-images button:hover { border-color: #b9c9dd; box-shadow: 0 8px 24px #132a4a1a; }
.detail-results-images button:focus-visible { outline: 3px solid #ff5722; outline-offset: 3px; }
.detail-results-images img { display: block; width: 100%; height: auto; border-radius: 8px; }
.detail-results-lightbox { position: fixed; width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 48px 16px 16px; border: 0; border-radius: 16px; background: white; box-shadow: 0 20px 60px #07182b66; }
.detail-results-lightbox::backdrop { background: #0b1b31cc; }
.detail-results-lightbox img { display: block; max-width: 100%; max-height: calc(100dvh - 96px); margin: auto; object-fit: contain; }
.detail-results-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #eef3f8; color: #132a4a; cursor: pointer; }
.detail-results-close:hover { background: #dce5ef; }
.detail-results-close:focus-visible { outline: 3px solid #ff5722; outline-offset: 2px; }
.detail-fit-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.detail-fit-grid p { margin: 0 0 16px; color: #344b68; font-size: 14px; line-height: 1.6; }

@media (max-width: 640px) {
  .school-detail-page main { padding-top: 16px; }
  .school-detail-page .detail-page-header { margin-bottom: 4px; }
  #overview { padding-top: 8px; padding-bottom: 20px; }
  .detail-school-heading { align-items: flex-start; gap: 12px; }
  .detail-school-logo { width: 68px; height: 68px; }
  .detail-school-logo img { width: 66px; height: 66px; }
  .detail-school-heading h1 { font-size: 25px; }
  .detail-cover { aspect-ratio: 4 / 3; }
  .detail-cover-arrow { width: 36px; height: 36px; }
  .detail-cover-arrow--prev { left: 8px; }
  .detail-cover-arrow--next { right: 8px; }
  .detail-video-layout { gap: 8px; }
  .detail-thumbnails { gap: 8px; }
  .detail-thumbnails button { width: 96px; }
  .detail-video-play-icon { width: 28px; height: 28px; font-size: 21px; }
  .detail-media-photos { grid-auto-columns: calc((100% - 10px) / 2); }
  .detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .detail-stat { padding: 12px; }
  .detail-stat strong { font-size: 16px; }
  .detail-stat--address strong { font-size: 14px; }
  .detail-fit-grid ul { grid-template-columns: 1fr; }
  .detail-fee-summary { padding: 20px 10px; }
  .detail-fee-summary > div > span { font-size: 12px; }
  .detail-fee-summary strong { font-size: clamp(24px, 5vw, 32px); }
  .detail-fee-summary strong small, .detail-fee-summary strong em { font-size: 12px; }
  .detail-fee-breakdown { padding: 18px 16px 22px; }
  .detail-fee-breakdown-body { grid-template-columns: 1fr; gap: 24px; }
  .detail-fee-chart { width: 210px; margin: auto; }
  .detail-fee-chart::before { inset: 30px; }
  .detail-calendar { grid-template-columns: 1fr; grid-template-rows: 250px minmax(0, 1fr); height: 520px; }
  .detail-calendar-months { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .detail-calendar-detail { padding: 18px; }
  .detail-calendar-detail ul.is-dense { grid-template-columns: 1fr; }
  .detail-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-results-images { gap: 14px; }
  .detail-results-images button { padding: 6px; border-radius: 10px; }
  .detail-results-lightbox { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 44px 8px 8px; }
  .detail-panel, .detail-gallery-group { padding: 16px; }
  .detail-course-item { grid-template-columns: 1fr; gap: 8px; padding: 18px 16px; }
  .detail-course-item h3 { font-size: 17px; }
  .detail-course-description p { font-size: 14px; line-height: 1.75; }
  .detail-page-header .nav-brand-link {
    height: 38px;
    margin-left: -5px;
  }

  .detail-page-header .nav-brand-avatar {
    width: 38px;
    height: 38px;
  }

  .detail-page-header .nav-logo-wordmark {
    width: 77px;
    height: 26px;
  }

  .detail-page-header .nav-logo-wordmark img {
    width: 150px;
    height: 150px;
    left: -62px;
    top: -62px;
  }

  .detail-page-header [aria-current="page"] {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .detail-fee-summary { grid-template-columns: 1fr; gap: 18px; }
  .detail-fee-summary > div + div { padding-top: 18px; border-top: 1px solid #c8d6e8; border-left: 0; }
  .detail-calendar-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-media-photos { grid-auto-columns: 100%; }
}