/* ==========================================================================
   Photon Academy, subject tuition pages 2026 (the "Mix" subject template, concept-m/sg-math.html).
   Page layout only. Tokens, buttons (.s26-btn), text links (.s26-tl), the class finder and the shell live in
   site-2026.css. Everything here is prefixed sj-; element rules are scoped to <main class="sj-main"> with :where()
   so they cannot reach the header, the footer or any other page.
   Pages: /ib-math-tuition/ and the nine other IB subject pages (tools/site2026_subject.py writes the markup).
   ========================================================================== */
body.sj {
  --max: var(--s26-max);
  --gut: var(--s26-gut);
  --gap: var(--s26-gap);
  --r: var(--s26-r);
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 17px/1.62 var(--fu);
  font-kerning: normal;
}
@media (max-width: 599px) {
  body.sj {
    font-size: 16.5px;
  }
}
.sj-main {
  display: block;
}
.sj-main [hidden] {
  display: none !important;
}
:where(.sj-main) img,
:where(.sj-main) svg {
  max-width: 100%;
  display: block;
}
:where(.sj-main) img {
  height: auto;
}
:where(.sj-main) a {
  color: inherit;
}
:where(.sj-main) p {
  margin: 0 0 1em;
  font: inherit;
  color: inherit;
  text-wrap: pretty;
}
:where(.sj-main) ol,
:where(.sj-main) ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(.sj-main) h1,
:where(.sj-main) h2,
:where(.sj-main) h3,
:where(.sj-main) h4 {
  margin: 0;
}
:where(.sj-main) h1,
:where(.sj-main) h2 {
  font-family: var(--fd);
  font-weight: 380;
  font-optical-sizing: auto;
  text-wrap: balance;
  color: inherit;
}
:where(.sj-main) h1 {
  font-size: clamp(36px, 4.7vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
:where(.sj-main) h2 {
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
:where(.sj-main) h3 {
  font: 600 21px/1.3 var(--fu);
  color: inherit;
}
:where(.sj-main) h4 {
  font: 600 17px/1.35 var(--fu);
  color: inherit;
}
:where(.sj-main) em {
  font-style: italic;
}
:where(.sj-main) strong {
  font-weight: 600;
}
:where(.sj-main) h1 em,
:where(.sj-main) h2 em {
  font-weight: 360;
  color: var(--goldt);
}
.sj-band-navy h1 em,
.sj-band-navy h2 em {
  color: var(--gold);
}
:where(.sj-main) :focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}
.sj-band-navy :focus-visible {
  outline-color: var(--gold);
}
.sj-main :where(figure) {
  margin: 0;
}
.sj-main :where(figcaption) {
  font: italic 400 14px/1.45 var(--fd);
  color: var(--ink2);
  margin-top: 10px;
}
.sj-band-navy :where(figcaption) {
  color: var(--onnavy);
}
.sj-ph {
  border-radius: var(--r);
  filter: saturate(0.92) contrast(1.02);
  background: var(--chalk);
}

/* ---------- Bands, section heads, small type ---------- */
.sj-sec {
  padding-block: clamp(48px, 7vw, 108px);
}
.sj-band-chalk {
  background: var(--chalk);
}
.sj-band-navy {
  background: var(--navy);
  color: #fff;
}
.sj-rh {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font: 600 12px/1.25 var(--fu);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink2);
}
.sj-rh::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: var(--gold);
}
.sj-band-navy .sj-rh {
  color: var(--onnavy);
}
.sj-lab {
  display: block;
  margin: 0 0 6px;
  font: 600 12px/1.3 var(--fu);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink2);
}
.sj-band-navy .sj-lab {
  color: var(--onnavy);
}
.sj-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--ink2);
  max-width: 36em;
}
.sj-band-navy .sj-lede {
  color: var(--onnavy);
}
.sj-small {
  font-size: 15px;
  color: var(--ink2);
  margin: 16px 0 0;
}
.sj-band-navy .sj-small {
  color: var(--onnavy);
}
.sj-mk {
  font: 500 0.82em/1.3 var(--fu);
  letter-spacing: 0.02em;
  color: var(--goldt);
  font-variant-numeric: lining-nums tabular-nums;
}
.sj-band-navy .sj-mk {
  color: var(--gold);
}
.sj-lk {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.sj-sh {
  margin-bottom: clamp(30px, 4vw, 56px);
}
.sj-sh > .sj-lede {
  margin-top: 18px;
}
.sj-sh h2 {
  max-width: 22ch;
}
.sj-sh--split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 20px var(--gap);
  align-items: end;
}
.sj-sh--split > .sj-lede {
  margin: 0 0 6px;
  max-width: 30em;
}
.sj-sh--split h2 {
  max-width: 24ch;
}
.sj-sh__r {
  justify-self: end;
  padding-bottom: 6px;
}
.sj-h2like {
  font: 380 clamp(30px, 3.4vw, 50px) / 1.08 var(--fd);
  letter-spacing: -0.015em;
  color: inherit;
  margin: 0;
  max-width: 22ch;
}
.sj-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-top: 28px;
}

/* ---------- Hero ---------- */
.sj-hero {
  padding: clamp(28px, 3.6vw, 52px) 0 clamp(48px, 6vw, 92px);
}
.sj-hgrid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: calc(var(--gap) * 1.6);
  align-items: start;
}
.sj-hl,
.sj-hr {
  min-width: 0;
}
.sj-hero__eb {
  margin-bottom: 4px;
}
.sj-hero h1 {
  margin: 10px 0 clamp(20px, 2.4vw, 32px);
  max-width: 15em;
}
.sj-hero .sj-lede {
  margin: 0;
}
.sj-h-cta .sj-cta-row {
  margin-top: 28px;
}
.sj-btn--cta {
  min-height: 52px;
  padding: 0 30px;
  font-size: 16px;
}
.sj-rs {
  margin: 12px 0 0;
  font: 500 14.5px/1.4 var(--fu);
  color: var(--ink2);
}
.sj-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  margin: 6px 0 0;
}
.sj-hero__small {
  margin: 14px 0 0;
  max-width: 36em;
  font-size: 15px;
  color: var(--ink2);
}
.sj-hero__small strong {
  color: var(--ink);
}
.sj-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  border-top: 1px solid var(--line);
}
.sj-ledger--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sj-ledger--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sj-ledger li {
  padding: 18px 14px 0 0;
}
.sj-ledger li + li {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}
.sj-fg {
  display: block;
  font: 400 clamp(19px, 1.65vw, 24px) / 1.12 var(--fd);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}
.sj-fc {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink2);
}
.sj-ledger__note {
  margin: 14px 0 0;
  max-width: 40em;
  font-size: 13.5px;
  line-height: 1.5;
}
.sj-hero__fig {
  margin: clamp(30px, 3vw, 44px) 0 0;
}
.sj-hero__fig img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 50%;
}
.sj-hero__fig--l img {
  aspect-ratio: 16/10;
}
.sj-hero__tag {
  margin: 12px 0 0;
}
.sj-fd-other {
  margin: 6px 0 0;
  font-size: 15px;
}
.sj-nojs {
  padding: 22px 24px;
  margin: 0;
}

/* the class finder on a subject page: the subject is preset, so the programme and school steps stay in the sheet */
.sj-h-find .s26-fx [data-st="p"],
.sj-h-find .s26-fx [data-st="sc"] {
  display: none;
}
.sj-h-find .s26-fx__lk a:not([href^="/admissions"]) {
  display: none;
}
.sj-h-find .s26-fx__r .s26-fx__q {
  display: none;
}

/* WhatsApp results block (math, physics) */
.sj-rblock {
  margin-top: clamp(48px, 5vw, 80px);
}
.sj-rblock h2 {
  max-width: 20ch;
}
.sj-wafigs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 16px;
  margin-top: 28px;
}
.sj-wafig img {
  width: 100%;
  border: 1px solid var(--line);
}
.sj-wafig figcaption {
  margin-top: 8px;
  font-style: normal;
  font: 600 13px/1.35 var(--fu);
  color: var(--ink2);
}
.sj-rb__a {
  margin: 14px 0 0;
}

@media (max-width: 1023px) {
  .sj-hgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-hl,
  .sj-hr {
    display: contents;
  }
  .sj-h-text {
    order: 1;
  }
  .sj-h-cta {
    order: 2;
    margin-top: 26px;
  }
  .sj-h-cta .sj-cta-row {
    margin-top: 0;
  }
  .sj-h-more {
    order: 3;
  }
  .sj-h-find {
    order: 4;
    margin-top: 30px;
  }
  .sj-ledger {
    order: 5;
    margin-top: 30px;
  }
  .sj-ledger__note {
    order: 5;
  }
  .sj-rblock {
    order: 6;
  }
  .sj-hero__fig {
    order: 7;
    margin-top: clamp(44px, 6vw, 64px);
  }
  .sj-hero__fig img,
  .sj-hero__fig--l img {
    aspect-ratio: 4/3;
  }
  .sj-rblock {
    margin-top: clamp(48px, 5vw, 80px);
  }
  .sj-sh--split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .sj-sh__r {
    justify-self: start;
    padding: 0;
  }
  .sj-sh h2,
  .sj-sh--split h2 {
    max-width: 24ch;
  }
}
@media (max-width: 599px) {
  .sj-hero {
    padding-top: 24px;
  }
  .sj-h-cta {
    margin-top: 22px;
  }
  .sj-cta-row {
    gap: 6px 22px;
  }
  .sj-cta-row .s26-btn {
    width: 100%;
  }
  .sj-hero__fig {
    order: 3;
    margin-top: 24px;
  }
  .sj-hero__fig img,
  .sj-hero__fig--l img {
    aspect-ratio: 16/9;
  }
  .sj-h-find {
    order: 4;
    margin-top: 26px;
  }
  .sj-h-more {
    order: 5;
    margin-top: 22px;
  }
  .sj-ledger {
    order: 6;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sj-ledger--3 li:nth-child(3) {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .sj-ledger li {
    padding: 16px 10px 18px 0;
  }
  .sj-ledger li:nth-child(2) {
    padding-left: 14px;
  }
  .sj-ledger__note {
    order: 6;
  }
  .sj-rblock {
    order: 7;
  }
  .sj-wafigs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* the inline finder on phones: course and level, then "Find my class" (the rest lives in the sheet) */
  .sj-h-find .s26-fx__row {
    display: block;
  }
  .sj-h-find .s26-fx__row [data-st="se"] {
    display: none;
  }
  .sj-h-find .s26-fx__row:has([data-st="lv"][hidden]) {
    display: none;
  }
  .sj-h-find .s26-fx__go {
    display: inline-flex;
  }
}

/* ---------- Overview: "On this page" ---------- */
.sj-ovw {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.sj-ovw .sj-lede {
  margin-top: 22px;
}
.sj-idx {
  list-style: none;
}
.sj-idx li {
  border-top: 1px solid var(--line);
}
.sj-idx li:last-child {
  border-bottom: 1px solid var(--line);
}
.sj-idx a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 24px;
  padding: 18px 0;
  text-decoration: none;
  min-height: 44px;
}
.sj-idx .n {
  font: 400 clamp(22px, 2.2vw, 30px) / 1.15 var(--fd);
  letter-spacing: -0.01em;
}
.sj-idx .d {
  grid-column: 1;
  font-size: 15.5px;
  color: var(--ink2);
}
.sj-idx a::after {
  content: "\2192";
  grid-column: 2;
  grid-row: 1 / span 2;
  font: 600 22px/1 var(--fu);
  color: var(--goldt);
  transition: transform 0.2s;
}
.sj-idx a:hover .n {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.sj-idx a:hover::after {
  transform: translateX(4px);
}
.sj-ovw nav > .sj-lab {
  margin-bottom: 8px;
}
@media (max-width: 1023px) {
  .sj-ovw {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Study-materials strip (math, physics) ---------- */
.sj-res {
  list-style: none;
}
.sj-res li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5.2fr) minmax(0, 3fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.sj-res li:last-child {
  border-bottom: 1px solid var(--line);
}
.sj-res .k {
  font: 600 12px/1.4 var(--fu);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goldt);
}
.sj-res .t {
  display: block;
  font: 400 clamp(22px, 2.2vw, 30px) / 1.15 var(--fd);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--ink);
  text-decoration: none;
}
.sj-res .t::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sj-res .t:focus-visible {
  outline: none;
}
.sj-res .t:focus-visible::after {
  outline: 3px solid var(--navy);
  outline-offset: -3px;
}
.sj-res .d {
  display: block;
  color: var(--ink2);
  font-size: 16px;
  max-width: 36em;
}
.sj-res .go {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  font-size: 15px;
}
.sj-res .go::after {
  content: "\2192";
  margin-left: 0.45em;
  color: var(--goldt);
}
.sj-res li:hover .t {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.sj-res .th {
  display: block;
  width: 100%;
  justify-self: end;
}
.sj-res .th img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.sj-res .th--fig {
  border-left: 3px solid var(--gold);
  padding-left: 18px;
}
.sj-res .bigfig {
  display: block;
  font: 380 clamp(36px, 4vw, 54px) / 1 var(--fd);
  letter-spacing: -0.02em;
}
.sj-res .th--books {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.sj-res .th--books img {
  border: 0;
  width: calc(50% - 5px);
  box-shadow:
    0 1px 0 rgba(13, 31, 60, 0.18),
    0 8px 14px -10px rgba(13, 31, 60, 0.5);
  border-radius: 2px;
}
@media (max-width: 1023px) {
  .sj-res li {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 28px;
  }
  .sj-res .k {
    grid-column: 1 / -1;
  }
}
@media (max-width: 599px) {
  .sj-res li {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-res .th {
    max-width: 320px;
    justify-self: start;
  }
}

/* ---------- Carried-over content (intro, levels, challenges, why, topics, approach, syllabus...) ---------- */
.sj-gen > * + * {
  margin-top: clamp(28px, 3.4vw, 48px);
}
.sj-gen > .sj-sh + * {
  margin-top: 0;
}
.sj-gen p {
  max-width: 44em;
}
.sj-gen a:not([class]) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.sj-gen a:not([class]):hover {
  text-decoration-thickness: 3px;
}
.sj-band-navy .sj-gen a:not([class]) {
  color: #fff;
}
.sj-gen h3 {
  font: 420 clamp(22px, 2.1vw, 28px) / 1.2 var(--fd);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.sj-gen h4 {
  font: 600 18px/1.35 var(--fu);
  margin: 0 0 6px;
}
.sj-gen > h3,
.sj-gen > div > h3:first-child {
  margin-bottom: 14px;
}
.sj-gen ul:not([class]),
.sj-gen ol:not([class]) {
  margin: 0 0 1em;
}
.sj-gen ul:not([class]) li {
  position: relative;
  padding: 7px 0 7px 26px;
  line-height: 1.5;
}
.sj-gen ul:not([class]) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 11px;
  height: 2px;
  background: var(--gold);
}
.sj-gen ol:not([class]) {
  counter-reset: sjn;
}
.sj-gen ol:not([class]) li {
  counter-increment: sjn;
  position: relative;
  padding: 7px 0 7px 34px;
}
.sj-gen ol:not([class]) li::before {
  content: counter(sjn);
  position: absolute;
  left: 0;
  top: 7px;
  font: 600 14px/1.7 var(--fu);
  color: var(--goldt);
}
.sj-grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 34px) clamp(28px, 4vw, 64px);
  align-items: start;
}
.sj-grid[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sj-grid[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sj-grid[data-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sj-grid[data-cols="auto"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.sj-card {
  min-width: 0;
  border-top: 1px solid #cbd4e0;
  padding: 22px 0 8px;
}
.sj-card > :last-child {
  margin-bottom: 0;
}
.sj-card p {
  color: var(--ink2);
}
.sj-card p:has(> strong:first-child) {
  color: var(--ink);
}
.sj-card ul:not([class]) li {
  color: var(--ink);
}
.sj-card .sj-lab {
  margin-bottom: 10px;
  color: var(--goldt);
}
.sj-card > p:first-child:not(:only-child) {
  margin-top: 0;
}
.sj-grid--stat .sj-card {
  padding-bottom: 20px;
}
.sj-grid--stat .sj-card p:nth-child(2) {
  font: 380 clamp(26px, 2.6vw, 36px) / 1.1 var(--fd);
  color: var(--ink);
  margin-bottom: 4px;
}
.sj-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.sj-split__t {
  min-width: 0;
}
.sj-split__t > .sj-sh {
  margin-bottom: 24px;
}
.sj-split__t > .sj-sh h2 {
  max-width: 18ch;
}
.sj-split__i {
  min-width: 0;
}
.sj-split__i img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r);
}
.sj-split > .sj-stack {
  display: grid;
  gap: 4px;
}
.sj-stack {
  display: grid;
  gap: 0;
}
.sj-cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.sj-fig img {
  width: 100%;
  border-radius: var(--r);
}
.sj-gen > .sj-fig {
  max-width: 640px;
}
.sj-gen > .sj-fig img {
  border: 1px solid var(--line);
}
.sj-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
}
.sj-step {
  border-top: 1px solid #cbd4e0;
  padding: 22px 0 8px;
}
.sj-step__n {
  font: 600 12px/1.3 var(--fu);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--goldt);
  margin-bottom: 8px;
}
.sj-step p {
  color: var(--ink2);
}
.sj-claim {
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px clamp(18px, 2.4vw, 32px);
  max-width: 52em;
}
.sj-claim__h {
  font: 380 clamp(22px, 2.2vw, 30px) / 1.25 var(--fd) !important;
  letter-spacing: -0.01em;
  margin: 6px 0 12px !important;
}
.sj-claim__p {
  color: var(--ink2);
}
.sj-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  list-style: none;
}
.sj-tick {
  position: relative;
  padding-left: 22px;
  font-weight: 600;
  font-size: 15.5px;
}
.sj-tick::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 11px;
  height: 2px;
  background: var(--gold);
}
.sj-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 14px;
  list-style: none;
}
.sj-pills > * {
  padding: 3px 10px;
  border: 1px solid var(--ctl);
  border-radius: var(--r);
  font: 500 13px/1.5 var(--fu);
  color: var(--ink);
}
.sj-pills a {
  text-decoration: none;
}
.sj-pills a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.sj-gen .sj-quote,
.sj-gen blockquote {
  margin: 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--gold);
}
.sj-gen .sj-quote p {
  font: italic 360 clamp(18px, 1.7vw, 22px) / 1.45 var(--fd);
  color: var(--ink);
  margin: 0 0 10px;
}
.sj-gen .sj-quote cite,
.sj-quote cite {
  display: block;
  font: 600 12.5px/1.4 var(--fu);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink2);
  font-style: normal;
}
.sj-gen table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}
.sj-gen th,
.sj-gen td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px 12px 0;
  border-top: 1px solid #cbd4e0;
}
.sj-gen th {
  font: 600 12px/1.4 var(--fu);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink2);
}
@media (max-width: 1023px) {
  .sj-grid[data-cols="3"],
  .sj-grid[data-cols="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sj-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-split__i {
    order: -1;
    max-width: 560px;
  }
  .sj-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 599px) {
  .sj-grid[data-cols] {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-gen > .sj-fig {
    max-width: none;
  }
}

/* ---------- Results (navy band) ---------- */
.sj-results__top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.sj-results .sj-sh {
  margin-bottom: clamp(26px, 3vw, 40px);
}
.sj-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}
.sj-stats li {
  padding: 22px 16px 22px 0;
  border-top: 1px solid var(--navyline);
}
.sj-stats li:nth-child(even) {
  padding-left: 18px;
  border-left: 1px solid var(--navyline);
}
.sj-stats li:nth-child(n + 3) {
  border-top: 1px solid var(--navyline);
}
.sj-stats li:last-child,
.sj-stats li:nth-last-child(2):nth-child(odd) {
  border-bottom: 1px solid var(--navyline);
}
.sj-big {
  display: block;
  font: 380 clamp(38px, 4.4vw, 62px) / 1 var(--fd);
  letter-spacing: -0.02em;
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}
.sj-big--w {
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.05;
  padding-top: 0.2em;
}
.sj-cap {
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--onnavy);
}
.sj-quotes {
  display: grid;
  gap: clamp(22px, 2.6vw, 34px);
}
.sj-results .sj-quote {
  margin: 0;
}
.sj-results .sj-quote p {
  font: italic 360 clamp(19px, 1.8vw, 24px) / 1.38 var(--fd);
  letter-spacing: -0.008em;
  text-indent: -0.42em;
  margin: 0 0 12px;
  color: #fff;
  text-wrap: balance;
}
.sj-results .sj-quote:first-child p {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.27;
}
.sj-results .sj-quote cite {
  display: block;
  font: 600 12px/1.4 var(--fu);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--onnavy);
  font-style: normal;
}
.sj-evid {
  margin-top: clamp(36px, 4vw, 56px);
}
.sj-evid__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px));
  gap: clamp(14px, 2vw, 28px);
  margin-top: 10px;
}
.sj-evid .sj-evid__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  object-position: top;
  border-radius: var(--r);
  border: 1px solid var(--navyline);
  cursor: zoom-in;
}
.sj-evid .evidence-card__img-wrap {
  border: 0;
  border-radius: var(--r);
  background: none;
}
.sj-evid .evidence-card__img-wrap img {
  height: auto;
}
.sj-evid__fig figcaption {
  margin-top: 8px;
  font: 600 13px/1.35 var(--fu);
  font-style: normal;
}
.sj-counted {
  margin-top: clamp(28px, 3vw, 40px);
  max-width: 46em;
  padding-left: 18px;
  border-left: 2px solid var(--gold);
}
.sj-counted p {
  margin: 0;
  font-size: 16px;
  color: var(--onnavy);
}
.sj-results__a {
  margin: clamp(22px, 2.6vw, 32px) 0 0;
}
.s26-btn--line-w {
  white-space: normal;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 1.5px solid currentColor;
  border-radius: var(--s26-r);
  font: 600 15.5px/1 var(--fu);
  color: #fff;
  text-decoration: none;
}
.s26-btn--line-w:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
@media (max-width: 1023px) {
  .sj-results__top {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-evid__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 599px) {
  .sj-evid__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sj-counted p {
    font-size: 16px;
  }
}

/* ---------- Fees ---------- */
.sj-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: 940px;
}
.sj-plan {
  padding: 26px clamp(20px, 3vw, 40px) 30px;
  background: #fff;
  border-top: 3px solid var(--line);
}
.sj-plan--first {
  border-top-color: var(--gold);
}
.sj-plan + .sj-plan {
  border-left: 1px solid var(--line);
}
.sj-plan h3 {
  font: 400 clamp(24px, 2.3vw, 30px) / 1.15 var(--fd);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.sj-plan .sj-lab {
  margin-bottom: 8px;
  color: var(--goldt);
}
.sj-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 0 20px;
}
.sj-price {
  font: 380 clamp(44px, 5vw, 66px) / 1 var(--fd);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.sj-unit {
  margin-left: -8px;
  font: 400 clamp(20px, 2vw, 26px) / 1 var(--fd);
  color: var(--ink2);
}
.sj-plan__list li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.45;
}
.sj-plan__list li:last-child {
  border-bottom: 1px solid var(--line);
}
.sj-plan__a {
  margin: 22px 0 0;
}
.sj-fees-foot {
  margin: 18px 0 0;
  max-width: 46em;
  font-size: 15px;
  color: var(--ink2);
}
.sj-ticks-wrap {
  margin-top: 22px;
}
@media (max-width: 767px) {
  .sj-plans {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-plan + .sj-plan {
    border-left: 0;
    border-top: 3px solid var(--line);
  }
}

/* ---------- Slim call-to-action bands ---------- */
.sj-tband {
  background: #fff;
  border-block: 1px solid var(--line);
}
.sj-tband__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding-block: 20px;
}
.sj-tband p {
  margin: 0;
  font: 400 clamp(20px, 2vw, 26px) / 1.25 var(--fd);
  letter-spacing: -0.01em;
}
@media (max-width: 599px) {
  .sj-tband__in {
    display: block;
    padding-block: 22px;
  }
  .sj-tband .s26-btn {
    margin-top: 14px;
    width: 100%;
  }
}

/* ---------- Tutors ---------- */
.sj-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px) clamp(32px, 6vw, 96px);
}
.sj-person {
  display: flex;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: flex-start;
  min-width: 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.sj-person--lead {
  grid-column: 1 / -1;
}
.sj-person__ph {
  flex: none;
  width: clamp(110px, 14vw, 190px);
}
.sj-person--lead .sj-person__ph {
  width: clamp(130px, 18vw, 260px);
}
.sj-person__ph img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 24%;
  filter: grayscale(1) contrast(1.05);
}
.sj-person__b {
  min-width: 0;
  flex: 1 1 auto;
}
.sj-person h3 {
  font: 400 clamp(26px, 2.6vw, 36px) / 1.12 var(--fd);
  letter-spacing: -0.012em;
  margin: 0 0 6px;
}
.sj-role {
  margin: 0 0 12px;
  font: 600 12px/1.45 var(--fu);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--goldt);
}
.sj-cr {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink2);
}
.sj-bio {
  margin: 0 0 12px;
  max-width: 38em;
}
.sj-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 8px;
}
.sj-certs .cert-thumb {
  margin: 0;
  width: 120px;
  cursor: zoom-in;
}
.sj-certs .cert-thumb img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.15s;
}
.sj-certs .cert-thumb:hover img {
  border-color: var(--gold) !important;
  transform: none !important;
}
.sj-certs .cert-thumb figcaption {
  font: 500 12px/1.35 var(--fu);
  font-style: normal;
  margin-top: 6px;
  color: var(--ink2);
}
.sj-person__a {
  margin: 8px 0 0;
}
.sj-person__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
}
.sj-person--np .sj-person__b {
  max-width: 52em;
}
@media (max-width: 1023px) {
  .sj-people {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 599px) {
  .sj-person--np {
    display: block;
  }
  .sj-person:not(.sj-person--np) {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 4px 16px;
  }
  .sj-person__ph,
  .sj-person--lead .sj-person__ph {
    width: 96px;
    grid-row: 1;
  }
  .sj-person__b {
    display: contents;
  }
  .sj-person__b > h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }
  .sj-person__b > :not(h3) {
    grid-column: 1 / -1;
  }
  .sj-role {
    margin-top: -2px;
  }
  .sj-person__b > h3 + .sj-role {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
}

/* ---------- Google reviews widget ---------- */
.sj-reviews .sj-sh {
  margin-bottom: clamp(24px, 3vw, 36px);
}
.sj-reviews .g-reviews-header {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.sj-reviews .g-reviews-header__rating {
  color: var(--ink);
  font: 380 38px/1 var(--fd);
}
.sj-reviews .g-reviews-header__count {
  color: var(--ink2);
}
.sj-reviews .g-reviews-header__link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.sj-reviews .g-review-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.sj-reviews .g-review-card__name {
  color: var(--ink);
}
.sj-reviews .g-review-card__time {
  color: var(--ink2);
}
.sj-reviews .g-review-card__text {
  color: var(--ink);
}
.sj-reviews .g-review-card__avatar {
  background: var(--navy);
  color: #fff;
}
.sj-reviews .g-review-card__photo {
  border-color: var(--line);
}

/* ---------- FAQ ---------- */
.sj-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
  align-items: start;
}
.sj-faq details {
  border-top: 1px solid #cbd4e0;
}
.sj-faq__col details:last-child {
  border-bottom: 1px solid #cbd4e0;
}
.sj-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  font: 500 18px/1.35 var(--fu);
  min-height: 44px;
}
.sj-faq summary::-webkit-details-marker {
  display: none;
}
.sj-faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  background:
    linear-gradient(var(--goldt), var(--goldt)) center/100% 2px no-repeat,
    linear-gradient(var(--goldt), var(--goldt)) center/2px 100% no-repeat;
}
.sj-faq details[open] summary::after {
  background: linear-gradient(var(--goldt), var(--goldt)) center/100% 2px no-repeat;
}
.sj-faq__a {
  padding: 0 0 6px;
}
.sj-faq__a p {
  margin: 0 0 18px;
  color: var(--ink2);
  font-size: 16.5px;
  max-width: 34em;
}
@media (max-width: 1023px) {
  .sj-faq {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-faq__col + .sj-faq__col details:first-child {
    border-top: 0;
  }
}
@media (max-width: 599px) {
  .sj-faq summary {
    font-size: 17px;
  }
}

/* ---------- Study materials band (navy) ---------- */
.sj-bridge__in {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.sj-bridge h2 {
  max-width: 14ch;
  color: #fff;
}
.sj-bridge h2 span {
  color: var(--gold);
  font-style: italic;
}
.sj-bridge .sj-lede {
  margin-top: 20px;
  max-width: 34em;
}
.sj-bl {
  list-style: none;
  margin: 30px 0 0;
}
.sj-bl li {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 6px 18px;
  align-items: baseline;
  padding: 15px 0;
  min-height: 44px;
  border-top: 1px solid var(--navyline);
}
.sj-bl li:last-child {
  border-bottom: 1px solid var(--navyline);
}
.sj-bl a {
  display: contents;
  color: #fff;
  text-decoration: none;
}
.sj-bl li::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sj-bl .k {
  font: 600 11.5px/1.4 var(--fu);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.sj-bl .n {
  font-size: 16.5px;
  line-height: 1.4;
  color: #fff;
}
.sj-bl .n strong {
  display: block;
  font-weight: 600;
}
.sj-bl .d {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  color: var(--onnavy);
}
.sj-bl .go {
  color: var(--gold);
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
}
.sj-bl .go::after {
  content: "\2192";
  margin-left: 0.4em;
}
.sj-bl li:hover .n strong {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.sj-shelf__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(12px, 1.6vw, 22px);
  align-items: end;
  border-bottom: 1px solid var(--navyline);
  margin-bottom: 14px;
}
.sj-shelf__row img {
  width: 100%;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.6);
}
@media (max-width: 1023px) {
  .sj-bridge__in {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-shelf {
    max-width: 480px;
  }
  .sj-bridge h2 {
    max-width: 18ch;
  }
}
@media (max-width: 599px) {
  .sj-bl li {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-bl .go {
    margin-top: 4px;
  }
}

/* ---------- Closing call to action ---------- */
.sj-cta {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 104px);
  align-items: center;
}
.sj-cta__fig img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 35%;
}
.sj-cta h2 {
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 1.04;
  max-width: 16ch;
}
.sj-cta .sj-lede {
  margin-top: 22px;
}
@media (max-width: 1023px) {
  .sj-cta {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 32px;
  }
}
@media (max-width: 767px) {
  .sj-cta {
    grid-template-columns: minmax(0, 1fr);
  }
  .sj-cta__fig img {
    aspect-ratio: 4/3;
  }
}

/* ---------- Enquiry ---------- */
.sj-contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.sj-contact .sj-lede {
  margin-top: 18px;
}
.sj-wa-line {
  margin: 22px 0 0;
  font-size: 16.5px;
}
.sj-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 3vw, 40px);
}
.sj-panel form {
  display: grid;
  gap: 16px;
}
.sj-panel .mini-enquiry__input,
.sj-panel .mini-enquiry__textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--ctl);
  border-radius: var(--r);
  background: #fff;
  font: 400 17px/1.3 var(--fu);
  color: var(--ink);
}
.sj-panel .mini-enquiry__textarea {
  min-height: 112px;
  resize: vertical;
}
.sj-panel .mini-enquiry__input::placeholder,
.sj-panel .mini-enquiry__textarea::placeholder {
  color: #6b7690;
}
.sj-panel .mini-enquiry__input:focus,
.sj-panel .mini-enquiry__textarea:focus {
  outline: 3px solid rgba(27, 58, 107, 0.28);
  border-color: var(--navy);
}
.sj-panel .mini-enquiry__submit {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  font: 600 15.5px/1 var(--fu);
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 0.18s;
}
.sj-panel .mini-enquiry__submit:hover {
  background: var(--navy);
  opacity: 1;
}
.sj-panel .mini-enquiry__thanks {
  color: var(--ink);
}
@media (max-width: 1023px) {
  .sj-contact {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Other subjects ---------- */
.sj-others {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(26px, 4vw, 64px);
  list-style: none;
}
.sj-others a {
  display: inline-block;
  font: 380 clamp(26px, 3vw, 40px) / 1.2 var(--fd);
  letter-spacing: -0.015em;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}
.sj-others a:hover {
  border-bottom-color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .sj-main *,
  .sj-main *::before,
  .sj-main *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Phone visuals: real photographs and screens between long stretches of text (hidden from 600px up) ---------- */
.sj-vis {
  display: none;
}
@media (max-width: 599px) {
  .sj-vis {
    display: block;
    margin: 32px 0 0;
  }
  .sj-vis img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--r);
    background: var(--chalk);
  }
  .sj-vis--screen img {
    aspect-ratio: 16/10;
    border: 1px solid var(--line);
  }
  .sj-band-navy .sj-vis--screen img {
    border-color: var(--navyline);
  }
  .sj-grid > .sj-vis,
  .sj-steps > .sj-vis {
    margin-top: 24px;
  }
}