/*
 * JCC 19-page rewrite: Brand Book v1.12.5 component alignment.
 *
 * This stylesheet is linked only by the 19 protected-staging rewrite routes.
 * It deliberately leaves the shared shell and sitewide navigation untouched.
 */

html body main .jcc-architecture-hero__content > p:first-child {
  font-family: "Hanken Grotesk", Arial, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html body main .jcc-architecture-hero__content > h1 {
  max-width: 820px !important;
  font-family: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif !important;
  font-size: 56px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

html body main .jcc-programme-content__inner {
  width: min(100%, 960px) !important;
  max-width: 960px !important;
  padding: 88px 32px 104px !important;
}

html body main .jcc-programme-answer {
  display: block !important;
  padding-bottom: 72px !important;
}

html body main .jcc-programme-answer > div {
  max-width: 820px;
}

html body main .jcc-programme-status {
  display: none !important;
}

html body main :is(.jcc-programme-answer h2, .jcc-programme-section > h2) {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  margin: 0 !important;
  font-family: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 1.11 !important;
  letter-spacing: 0 !important;
}

html body main :is(.jcc-programme-answer__text, .jcc-programme-answer__follow, .jcc-programme-section > p, .jcc-programme-section > ul, .jcc-programme-section > ol) {
  max-width: 820px;
}

html body main .jcc-programme-answer__text {
  font-size: 20px !important;
  line-height: 1.62 !important;
}

html body main .jcc-programme-section {
  padding: 72px 0 !important;
}

html body main .jcc-programme-section :is(p, li) {
  letter-spacing: 0 !important;
}

/* A scan-friendly preparation set uses neutral cards and restrained markers. */
html body main #prepare > ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  width: min(100%, 900px);
  margin: 32px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: jcc-prepare-item;
}

html body main #prepare > ul > li {
  position: relative;
  min-height: 154px;
  margin: 0 !important;
  padding: 62px 26px 26px !important;
  border: 1px solid var(--jcc-brand-stone, #d8d2c8) !important;
  border-radius: 10px !important;
  background: var(--jcc-brand-white, #fff) !important;
  color: var(--jcc-brand-charcoal-deep, #202020) !important;
  box-shadow: none !important;
  counter-increment: jcc-prepare-item;
}

html body main #prepare > ul > li::before {
  content: counter(jcc-prepare-item, decimal-leading-zero);
  position: absolute;
  top: 24px;
  left: 26px;
  font-family: "Hanken Grotesk", Arial, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  color: var(--jcc-brand-forest, #355b4a);
}

html body main #prepare > ul > li::after {
  content: "";
  position: absolute;
  top: 44px;
  left: 26px;
  width: 34px;
  height: 2px;
  background: var(--jcc-brand-muted-gold, #b98b43);
}

/* Official sources use quiet editorial cards rather than an undifferentiated list. */
html body main #sources > ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: min(100%, 900px);
  margin: 30px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body main #sources > ul > li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 112px;
  margin: 0 !important;
  padding: 24px 54px 24px 24px !important;
  border: 1px solid var(--jcc-brand-stone, #d8d2c8) !important;
  border-radius: 10px !important;
  background: var(--jcc-brand-white, #fff) !important;
  color: var(--jcc-brand-charcoal-deep, #202020) !important;
  box-shadow: none !important;
}

html body main #sources > ul > li::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  color: var(--jcc-brand-forest, #355b4a);
  font-family: "Hanken Grotesk", Arial, system-ui, sans-serif;
  font-size: 20px;
  line-height: 1;
}

html body main #sources > ul > li > a {
  color: var(--jcc-brand-charcoal-deep, #202020) !important;
  font-family: "Libre Caslon Text", Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

html body main #sources > ul > li:focus-within {
  outline: 3px solid var(--jcc-brand-forest, #355b4a);
  outline-offset: 3px;
}

html body main #sources > ul > li > a:focus-visible {
  outline: none;
}

/* FAQ: one calm, full-width stack with a whole-row disclosure button. */
html body main #faq {
  display: block !important;
}

html body main #faq > h2 {
  margin-bottom: 32px !important;
}

html body main #faq > details.jcc-programme-faq {
  display: block !important;
  width: min(100%, 900px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 1px solid var(--jcc-brand-stone, #d8d2c8) !important;
  border-radius: 10px !important;
  background: var(--jcc-brand-white, #fff) !important;
  box-shadow: none !important;
}

html body main #faq > details.jcc-programme-faq[open] {
  border: 1px solid var(--jcc-brand-stone, #d8d2c8) !important;
  background: var(--jcc-brand-ivory, #f6f2ea) !important;
  box-shadow: none !important;
}

html body main #faq > details.jcc-programme-faq > summary {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100%;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 20px 64px 20px 26px !important;
  border-radius: 9px !important;
  color: var(--jcc-brand-charcoal-deep, #202020) !important;
  font-family: "Hanken Grotesk", Arial, system-ui, sans-serif !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  list-style: none !important;
  cursor: pointer !important;
}

html body main #faq > details.jcc-programme-faq > summary::-webkit-details-marker {
  display: none !important;
}

html body main #faq > details.jcc-programme-faq > summary::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 29px !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  margin: -8px 0 0 !important;
  border: 0 !important;
  border-right: 1.5px solid var(--jcc-brand-charcoal-deep, #202020) !important;
  border-bottom: 1.5px solid var(--jcc-brand-charcoal-deep, #202020) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  transform: rotate(45deg) !important;
  transform-origin: center !important;
}

html body main #faq > details.jcc-programme-faq[open] > summary::after {
  margin-top: -3px !important;
  transform: rotate(225deg) !important;
}

html body main #faq > details.jcc-programme-faq > summary:focus-visible {
  outline: 3px solid var(--jcc-brand-charcoal-deep, #202020) !important;
  outline-offset: 3px !important;
}

html body main #faq > details.jcc-programme-faq > div {
  border-top: 1px solid rgba(32, 32, 32, .24);
}

html body main #faq > details.jcc-programme-faq > div > p {
  max-width: 820px !important;
  margin: 0 !important;
  padding: 24px 64px 28px 26px !important;
  color: var(--jcc-brand-mid-grey, #55534f) !important;
  font-family: "Hanken Grotesk", Arial, system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.68 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 1041px) {
  html body main .jcc-architecture-hero__content > h1 {
    font-size: 48px !important;
  }

  html body main :is(.jcc-programme-answer h2, .jcc-programme-section > h2) {
    font-size: 36px !important;
  }
}

@media (max-width: 760px) {
  html body main .jcc-programme-content__inner {
    padding: 72px 24px 88px !important;
  }

  html body main .jcc-programme-section {
    padding: 60px 0 !important;
  }

  html body main :is(#prepare > ul, #sources > ul) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body main #prepare > ul > li {
    min-height: 0;
    padding: 58px 22px 24px !important;
  }

  html body main #prepare > ul > li::before,
  html body main #prepare > ul > li::after {
    left: 22px;
  }
}

@media (max-width: 640px) {
  html body main .jcc-architecture-hero__content > h1 {
    font-size: 38px !important;
    line-height: 1.07 !important;
  }

  html body main :is(.jcc-programme-answer h2, .jcc-programme-section > h2) {
    font-size: 30px !important;
    line-height: 1.12 !important;
  }

  html body main .jcc-programme-answer__text {
    font-size: 18px !important;
  }

  html body main #faq > h2 {
    margin-bottom: 26px !important;
  }

  html body main #faq > details.jcc-programme-faq > summary {
    min-height: 68px !important;
    padding: 18px 54px 18px 20px !important;
    font-size: 19px !important;
  }

  html body main #faq > details.jcc-programme-faq > summary::after {
    right: 23px !important;
  }

  html body main #faq > details.jcc-programme-faq > div > p {
    padding: 20px 20px 24px !important;
  }

  html body main #sources > ul > li {
    min-height: 104px;
    padding: 22px 50px 22px 20px !important;
  }

  html body main #sources > ul > li::after {
    right: 20px;
  }
}

@media (max-width: 390px) {
  html body main .jcc-programme-content__inner {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body main #faq > details.jcc-programme-faq > summary::after {
    transition: none !important;
  }
}

/*
 * The legacy bundle contains deliberate multi-ID specificity locks. These
 * route-only locks make the current Brand Book tokens authoritative without
 * changing the shared bundle or any other route.
 */
html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, .jcc-architecture-hero__content) > p:first-child {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, .jcc-page-hero__eyebrow) {
  font-family: "Hanken Grotesk", Arial, system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, .jcc-architecture-hero__content) > h1 {
  max-width: 820px !important;
  font-size: 56px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, .jcc-page-hero h1) {
  max-width: 820px !important;
  font-family: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif !important;
  font-size: 56px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, .jcc-programme-answer h2, .jcc-programme-section > h2) {
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  font-size: 42px !important;
  line-height: 1.11 !important;
  letter-spacing: 0 !important;
}

html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, #faq > details.jcc-programme-faq > summary) {
  min-height: 74px !important;
  font-size: 21px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 1041px) {
  html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, .jcc-architecture-hero__content) > h1 {
    font-size: 48px !important;
  }

  html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, .jcc-programme-answer h2, .jcc-programme-section > h2) {
    font-size: 36px !important;
  }

  html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, .jcc-page-hero h1) {
    font-size: 48px !important;
  }
}

@media (max-width: 640px) {
  html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, .jcc-architecture-hero__content) > h1 {
    font-size: 38px !important;
    line-height: 1.07 !important;
  }

  html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, .jcc-programme-answer h2, .jcc-programme-section > h2) {
    font-size: 30px !important;
    line-height: 1.12 !important;
  }

  html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, .jcc-page-hero h1) {
    font-size: 38px !important;
    line-height: 1.07 !important;
  }

  html body main :is(#jcc-19-brand#jcc-19-brand#jcc-19-brand#jcc-19-brand, #faq > details.jcc-programme-faq > summary) {
    min-height: 68px !important;
    font-size: 19px !important;
  }
}

/* Restore Brand Book v1.12.5 sections 6 and 19.
   Only Directors' Duties uses the legacy rewrite layout in this repair.
   Match existing specificity locks so nested sections cannot acquire a gutter. */
html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) {
  --jcc-repair-space: 56px;
  --jcc-repair-edge: 32px;
}
html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) :is(#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair, .jcc-programme-content) {
  padding: 0 var(--jcc-repair-edge) !important;
}
html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) :is(#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair, .jcc-programme-content__inner) {
  width: 100% !important;
  max-width: 960px !important;
  margin-inline: auto !important;
  padding: var(--jcc-repair-space) 0 !important;
}
html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) :is(#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair, .jcc-programme-answer) {
  margin: 0 !important;
  padding: 0 !important;
}
html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) :is(#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair, .jcc-programme-section) {
  margin: 0 !important;
  padding: var(--jcc-repair-space) 0 0 !important;
}
html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) :is(#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair, .jcc-programme-answer > div) {
  max-width: 960px !important;
}
html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) :is(#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair, .jcc-programme-answer__text, .jcc-programme-answer__follow, .jcc-programme-section > p) {
  max-width: 820px !important;
  margin-inline: 0 !important;
  text-align: left !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
}
html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) :is(#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair, .jcc-programme-answer__text) {
  font-size: 20px !important;
}
@media (max-width: 1041px) {
  html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) { --jcc-repair-space: 48px; }
}
@media (max-width: 640px) {
  html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) { --jcc-repair-space: 40px; --jcc-repair-edge: 20px; }
  html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) :is(#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair, .jcc-programme-content__inner) { max-width: 620px !important; }
  html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) :is(#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair, .jcc-programme-answer__follow, .jcc-programme-section > p) { font-size: 16px !important; }
  html body main:has([data-jcc-hero-route="/directors-duties-singapore/"]) :is(#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair#jcc-repair, .jcc-programme-answer__text) { font-size: 18px !important; }
}