/* ==========================================================================
   SunnyKnowledge Consulting: site stylesheet
   One file, no framework. Colours, type and spacing are set once as
   variables below; change them there and the whole site follows.

   Contents
   1. Fonts and variables      6. Home page sections
   2. Base and typography      7. Inner page components
   3. Layout helpers           8. Forms
   4. Buttons and links        9. Closing band, footer, mobile action bar
   5. Header and navigation   10. Chinese pages, motion, print
   ========================================================================== */

/* 1. Fonts and variables --------------------------------------------------- */

@font-face {
  font-family: "Besley";
  src: url("../fonts/besley-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Besley";
  src: url("../fonts/besley-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour: graph-pad paper, teal ink from the logo, sun yellow, a red marking pen. */
  --pad: #f2f8f3;
  --pad-line: #d7e6dc;
  --white: #ffffff;
  --ink: #0b3b3c;
  --ink-soft: #44615f;
  --ink-deep: #072c2d;
  --sun: #ffb627;
  --sun-deep: #b96a00;
  --sun-pale: #ffe9b5;
  --pen: #c23a27;
  --rule: rgba(11, 59, 60, 0.18);

  --font-display: "Besley", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, "PingFang HK", "Microsoft JhengHei", "Noto Sans HK", "Noto Sans CJK HK", sans-serif;
  --font-cjk: "PingFang HK", "Microsoft JhengHei", "Noto Sans HK", "Noto Sans CJK HK", "Heiti TC", sans-serif;

  --wrap: 72rem;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 10px;
  --lift: 4px 4px 0 var(--ink);
  --header-h: 4.5rem;
}

/* 2. Base and typography --------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1,
h2,
h3 {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.2rem);
  letter-spacing: -0.012em;
  line-height: 1.07;
}

h2 {
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem);
  letter-spacing: -0.006em;
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
}

p,
ul,
ol,
dl,
figure,
blockquote,
address {
  margin: 0 0 1em;
}

p,
li,
dd {
  text-wrap: pretty;
}

address {
  font-style: normal;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--sun-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

.lead {
  max-width: 44rem;
  color: var(--ink-soft);
  font-size: 1.2rem;
  line-height: 1.5;
}

.icon {
  flex: none;
}

.nowrap {
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
}

.skip:focus {
  top: 0;
}

/* 3. Layout helpers -------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: 50rem;
}

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section--tint {
  background: var(--pad);
}

/* Two white sections in a row: the second drops its top padding. */
.section--join {
  padding-top: 0;
}

/* First section after a page heading sits closer to it. */
.section--flush {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.section__head {
  max-width: 46rem;
  margin-bottom: 2.25rem;
}

.section__head > :last-child {
  margin-bottom: 0;
}

.section__head--sub {
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
}

.section__head--sub p {
  color: var(--ink-soft);
}

.split {
  display: grid;
  gap: 2rem 4rem;
  align-items: start;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  }

  .split--even {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

.note {
  max-width: 46rem;
  margin: 2rem 0 0;
  color: var(--ink-soft);
}

.more {
  margin: 1.5rem 0 0;
}

/* Squared paper, used behind the hero and page headings. */
.hero,
.pagehead {
  background-color: var(--pad);
  background-image:
    linear-gradient(var(--pad-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pad-line) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: center top;
  border-bottom: 1px solid var(--rule);
}

/* 4. Buttons and links ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.8rem 1.25rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--sun);
  box-shadow: var(--lift);
  color: var(--ink);
  font: 700 1rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.btn:hover {
  background: #ffc54f;
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(2px, 2px);
}

.btn:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(4px, 4px);
}

.btn--plain {
  background: var(--white);
}

.btn--plain:hover {
  background: var(--sun-pale);
}

.btn--small {
  padding: 0.55rem 0.95rem;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 0.95rem;
}

.btn--large {
  padding: 1rem 1.5rem;
  font-size: 1.08rem;
}

.btn--on-dark {
  border-color: var(--white);
  background: transparent;
  box-shadow: none;
  color: var(--white);
}

.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  transform: none;
}

.textlink {
  font-weight: 700;
  text-decoration-color: var(--sun);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.textlink:hover {
  background: var(--sun-pale);
}

/* 5. Header and navigation ------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.site-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 46px;
  height: 46px;
}

.brand__name {
  font: 700 1.2rem/1.1 var(--font-display);
  letter-spacing: -0.01em;
}

.brand__suffix {
  display: block;
  font: 400 0.82rem/1.3 var(--font-body);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: 700 0.95rem/1 var(--font-body);
  cursor: pointer;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__list a {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.98rem;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 transparent;
}

.site-nav__list a:hover {
  box-shadow: inset 0 -3px 0 var(--sun-pale);
}

.site-nav__list a[aria-current="page"] {
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--sun);
}

.site-nav__end {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lang-switch {
  padding: 0.3rem 0.6rem;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  font-size: 0.9rem;
  text-decoration: none;
}

.lang-switch:hover {
  border-color: var(--ink);
}

@media (max-width: 66rem) {
  .js .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
  }

  /* With JavaScript the menu is a panel under the header that opens on tap.
     Without it, the links simply wrap onto the page. */
  .js .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--white);
    border-bottom: 2px solid var(--ink);
    box-shadow: 0 14px 24px -18px rgba(7, 44, 45, 0.55);
  }

  .js .site-nav.is-open {
    display: flex;
  }

  .js .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .site-nav__list a {
    padding: 0.8rem 0;
    border-bottom: 1px dashed var(--rule);
    font-size: 1.05rem;
  }

  .js .site-nav__end {
    justify-content: space-between;
    padding-top: 1rem;
  }

  html:not(.js) .site-header__in {
    flex-wrap: wrap;
    padding-block: 0.6rem;
  }

  html:not(.js) .site-nav__list {
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
  }
}

@media (max-width: 24rem) {
  .brand__name {
    font-size: 1.05rem;
  }
}

/* 6. Home page sections ---------------------------------------------------- */

/* Hero */
.hero__in {
  display: grid;
  gap: 2.5rem 3.5rem;
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 60rem) {
  .hero__in {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }
}

.hero__copy .lead {
  margin-bottom: 0;
}

.facts {
  display: grid;
  gap: 0.6rem 1.5rem;
  margin: 2.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1.5px solid var(--ink);
  list-style: none;
  font-size: 0.98rem;
  line-height: 1.4;
}

.facts li {
  display: flex;
  gap: 0.45rem;
}

.facts .icon {
  margin-top: 0.12rem;
  color: var(--sun-deep);
}

@media (min-width: 40rem) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hero__plot {
  margin: 0;
}

.hero__plot figcaption {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

@media (max-width: 59.99rem) {
  .hero__plot {
    max-width: 32rem;
  }
}

.plot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.plot__area {
  fill: var(--sun-pale);
}

.plot__middle {
  fill: var(--sun);
}

.plot__curve {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plot__axis {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.plot__mean {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
}

.plot__ticks line {
  stroke: var(--ink);
  stroke-width: 2;
}

.plot__ticks text {
  fill: var(--ink-soft);
  font: 400 15px var(--font-body);
  text-anchor: middle;
}

.plot__share {
  fill: var(--ink);
  font: 700 46px var(--font-display);
  text-anchor: middle;
}

/* Subjects */
.subjects {
  display: grid;
  gap: 2.25rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 36rem) {
  .subjects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .subjects {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.subject {
  padding-top: 1.25rem;
  border-top: 3px solid var(--ink);
}

.subject h3 {
  margin: 0.75rem 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 700;
}

.subject p {
  margin-bottom: 0.6rem;
  color: var(--ink-soft);
}

.subject .subject__courses {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.si {
  display: block;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.si__axis {
  stroke: var(--ink-soft);
  stroke-width: 1.6;
}

.si__fill {
  fill: var(--sun);
  stroke: none;
}

.si__dot {
  fill: var(--sun);
}

.si__accent {
  stroke: var(--sun-deep);
}

/* Rates */
.ratesheet {
  margin: 0;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
}

.ratesheet__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1.5rem;
  align-items: center;
  padding: 1.1rem 1.4rem;
  border-top: 1px dashed var(--rule);
}

.ratesheet__row:first-child {
  border-top: 0;
}

.ratesheet dt {
  font-weight: 700;
  line-height: 1.35;
}

.ratesheet dt small {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 400;
}

.ratesheet dd {
  margin: 0;
  text-align: right;
}

.ratesheet dd b {
  display: block;
  font: 700 1.7rem/1.1 var(--font-display);
  white-space: nowrap;
}

.ratesheet dd span {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* Steps: a real sequence, so the numbers carry meaning. */
.steps {
  display: grid;
  gap: 2rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 52rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
  font: 700 1.3rem/1 var(--font-display);
}

.steps h3 {
  margin-bottom: 0.35rem;
  font-size: 1.3rem;
  font-weight: 700;
}

.steps p {
  margin: 0;
  color: var(--ink-soft);
}

/* Reviews */
.reviews {
  columns: 1;
  column-gap: 1.25rem;
}

@media (min-width: 40rem) {
  .reviews {
    columns: 2;
  }
}

@media (min-width: 64rem) {
  .reviews {
    columns: 3;
  }
}

.review {
  break-inside: avoid;
  margin: 0 0 1.25rem;
  padding: 1.25rem 1.35rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.stars {
  display: inline-flex;
  gap: 2px;
}

.stars svg {
  fill: #e39a00;
}

.review blockquote {
  margin: 0.6rem 0 0.9rem;
}

.review blockquote p {
  margin: 0;
}

.review figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.6rem;
}

.review__name {
  font-weight: 700;
}

.review__source {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* Marks students sent back: the red pen is used here and nowhere else. */
.marks {
  display: grid;
  gap: 2rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 36rem) {
  .marks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .marks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mark__score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0 0 0.9rem;
}

.mark__num {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  padding: 0.45rem 1.4rem 0.5rem 1.1rem;
  color: var(--pen);
}

.mark__num b {
  font: 700 2.1rem/1 var(--font-display);
}

.mark__num small {
  font: 700 1.05rem/1 var(--font-display);
}

.pen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  fill: none;
  stroke: var(--pen);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform: rotate(-3deg);
}

.pen path {
  vector-effect: non-scaling-stroke;
}

.mark__what {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.mark blockquote {
  margin: 0 0 0.6rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--pad-line);
}

.mark blockquote p {
  margin: 0;
}

.mark__by {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* Tick lists */
.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  gap: 0.65rem;
  padding: 0.75rem 0;
  border-top: 1px dashed var(--rule);
  break-inside: avoid;
}

.checklist li:first-child {
  border-top: 0;
  padding-top: 0;
}

.checklist .icon {
  margin-top: 0.2rem;
  color: var(--sun-deep);
}

@media (min-width: 44rem) {
  .checklist--cols {
    columns: 2;
    column-gap: 2.5rem;
  }

  .checklist--cols li:first-child {
    padding-top: 0.75rem;
  }

  .checklist--cols li {
    border-top: 0;
    border-bottom: 1px dashed var(--rule);
  }
}

/* Other services */
.others {
  display: grid;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .others {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.others li {
  padding-left: 1.15rem;
  border-left: 3px solid var(--sun);
}

.others h3 {
  margin-bottom: 0.3rem;
}

.others p {
  margin-bottom: 0.6rem;
  color: var(--ink-soft);
}

/* Questions */
.faq details {
  border-top: 1px solid var(--rule);
}

.faq details:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  position: relative;
  padding: 1.05rem 2.75rem 1.05rem 0;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-52%);
  font: 600 1.7rem/1 var(--font-display);
  color: var(--sun-deep);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq summary:hover {
  background: rgba(255, 233, 181, 0.45);
}

.faq details p {
  max-width: 42rem;
  margin: 0;
  padding: 0 0 1.2rem;
  color: var(--ink-soft);
}

.faqgroup + .faqgroup {
  margin-top: 3.25rem;
}

.faqgroup h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
}

/* 7. Inner page components ------------------------------------------------- */

.pagehead {
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

.pagehead h1 {
  max-width: 50rem;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem);
}

.pagehead .lead {
  margin-bottom: 0;
}

.pagehead--solo {
  min-height: 55vh;
  border-bottom: 0;
}

.linklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.legend {
  display: inline-flex;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0.35rem 0.8rem;
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  font-size: 0.92rem;
}

.jump {
  margin-top: 1.5rem;
}

.jump ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

/* Priced plans */
.plans {
  display: grid;
  gap: 2rem;
  max-width: 56rem;
}

@media (min-width: 44rem) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.plan {
  padding: 1.6rem 1.6rem 1.75rem;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
}

.plan__name {
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  margin-bottom: 1.1rem;
}

.plan__price b {
  font: 700 2.6rem/1 var(--font-display);
}

.plan__price span {
  color: var(--ink-soft);
}

.plan__details {
  margin: 0 0 1.5rem;
}

.plan__details div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px dashed var(--rule);
}

.plan__details dt {
  color: var(--ink-soft);
}

.plan__details dd {
  margin: 0;
}

/* Areas and courses */
.areas {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.areas li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font: 700 1.25rem/1.2 var(--font-display);
}

.courses {
  display: grid;
  gap: 1.75rem 2rem;
}

@media (min-width: 36rem) {
  .courses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .courses {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.courses__group {
  padding-top: 1rem;
  border-top: 2px solid var(--ink);
}

.courses__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.courses__group li {
  padding: 0.4rem 0;
  color: var(--ink-soft);
  line-height: 1.4;
}

.courses__group li b {
  display: block;
  color: var(--ink);
}

/* Tables */
.tablewrap {
  max-width: 48rem;
  overflow-x: auto;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 0.9rem 1.15rem;
  text-align: left;
  white-space: nowrap;
}

.table thead th {
  border-bottom: 2px solid var(--ink);
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

.table tbody tr + tr {
  border-top: 1px dashed var(--rule);
}

.table tbody th {
  font-weight: 700;
}

.table__price {
  font: 700 1.1rem/1.2 var(--font-display);
}

/* About page */
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  display: grid;
  gap: 0.2rem 1.5rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule);
}

.timeline li:first-child {
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 40rem) {
  .timeline li {
    grid-template-columns: 11rem minmax(0, 1fr);
  }

  .timeline__time {
    grid-row: span 2;
  }
}

.timeline__time {
  margin: 0;
  padding-top: 0.15rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.timeline h3 {
  margin: 0;
}

.timeline h3 span {
  display: block;
  color: var(--ink-soft);
  font: 400 1rem/1.4 var(--font-body);
}

.timeline__meta {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
}

.timeline__meta span {
  display: block;
}

.timeline__meta:empty {
  display: none;
}

.degrees {
  margin: 0;
  padding: 0;
  list-style: none;
}

.degrees li {
  padding: 0.9rem 0;
  border-top: 1px dashed var(--rule);
}

.degrees li:first-child {
  padding-top: 0;
  border-top: 0;
}

.degrees b,
.degrees span {
  display: block;
}

.degrees span {
  color: var(--ink-soft);
}

.certs__title {
  margin: 2.25rem 0 0.9rem;
}

.certs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.certs img {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--white);
}

.pairs {
  margin: 0;
}

.pairs div {
  display: grid;
  gap: 0.1rem 1.25rem;
  padding: 0.7rem 0;
  border-top: 1px dashed var(--rule);
}

@media (min-width: 30rem) {
  .pairs div {
    grid-template-columns: 10.5rem minmax(0, 1fr);
  }

  .pairs--wide div {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
}

.pairs dt {
  font-weight: 700;
}

.pairs dd {
  margin: 0;
  color: var(--ink-soft);
}

.prose p {
  max-width: 42rem;
}

.address {
  line-height: 1.7;
}

/* Schedule */
.calendar {
  overflow: hidden;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}

.calendar iframe {
  display: block;
  width: 100%;
  height: 40rem;
  border: 0;
}

@media (min-width: 48rem) {
  .calendar iframe {
    height: 62rem;
  }
}

/* Payment */
.paygrid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 40rem) {
  .paygrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .paygrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pay {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.5rem;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
}

.pay h3 {
  margin: 0;
}

.pay form {
  display: grid;
  gap: 0.5rem;
}

.pay label {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.pay form .btn {
  margin-top: 0.5rem;
}

/* Statistics tables */
.stat {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: start;
}

@media (min-width: 56rem) {
  .stat {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  }

  .stat__head {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

.stat__head h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
}

.stat__curve {
  display: block;
  max-width: 19rem;
  width: 100%;
  padding: 0.5rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.stat__table {
  display: block;
  max-width: 46rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  text-decoration: none;
}

.stat__table img {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}

.stat__table:hover span {
  text-decoration: underline;
}

/* 8. Forms ----------------------------------------------------------------- */

input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.65rem 0.8rem;
  background: var(--white);
  border: 1.5px solid #5f7d7a;
  border-radius: 8px;
}

textarea {
  min-height: 9rem;
  resize: vertical;
}

input[type="file"] {
  width: 100%;
  padding: 0.6rem;
  background: var(--white);
  border: 1.5px dashed #5f7d7a;
  border-radius: 8px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--ink);
  outline-offset: 1px;
}

[aria-invalid="true"] {
  border-color: var(--pen) !important;
  border-width: 2px !important;
}

.form {
  max-width: 44rem;
}

.form__note {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.field {
  min-width: 0;
  margin: 0 0 1.35rem;
  padding: 0;
  border: 0;
}

.field > label,
.field > legend {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0;
  font-weight: 700;
}

.req {
  color: var(--pen);
}

.opt {
  color: var(--ink-soft);
  font-weight: 400;
}

.field__hint {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.field__error {
  margin: 0.35rem 0 0;
  color: var(--pen);
  font-size: 0.95rem;
  font-weight: 700;
}

.form__row {
  display: grid;
  gap: 0 1.25rem;
}

@media (min-width: 40rem) {
  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  background: var(--white);
  border: 1.5px solid #5f7d7a;
  border-radius: 999px;
  cursor: pointer;
}

.check input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--ink);
}

.check:has(input:checked) {
  background: var(--sun-pale);
  border-color: var(--ink);
}

.times {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
}

.times label {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Hidden trap field for spam bots. Real visitors never see or reach it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  max-width: 44rem;
  margin-bottom: 1.75rem;
  padding: 1.1rem 1.3rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--pad);
}

.notice > :last-child {
  margin-bottom: 0;
}

.notice h2 {
  font-size: 1.5rem;
}

.notice--error {
  border-color: var(--pen);
  background: #fdf2ef;
}

.notice--error ul {
  padding-left: 1.2rem;
}

/* Contact page layout */
.contact {
  display: grid;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .contact {
    grid-template-columns: minmax(0, 1fr) 21.5rem;
  }

  .contact__card {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

.contact__card {
  padding: 1.5rem;
  background: var(--pad);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
}

.contact__card h2 {
  font-size: 1.35rem;
}

.contact__who b,
.contact__who span {
  display: block;
}

.contact__who span {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.contact__list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.contact__list li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0 0.6rem;
  padding: 0.75rem 0;
  border-top: 1px dashed var(--rule);
}

.contact__list .icon {
  grid-row: span 2;
  margin-top: 0.2rem;
  color: var(--sun-deep);
}

.contact__list span {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.contact__list a,
.contact__list address {
  grid-column: 2;
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.contact__list address {
  font-weight: 400;
}

.contact__prefer {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Calculator */
.calc {
  padding: 1.5rem;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--ink);
}

.calc .field {
  display: grid;
  gap: 0.3rem 1rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

@media (min-width: 30rem) {
  .calc .field {
    grid-template-columns: 8.5rem minmax(0, 1fr);
  }

  .calc .field > label {
    margin: 0;
  }
}

.unit {
  display: flex;
}

.unit span {
  display: grid;
  place-items: center;
  padding: 0 0.8rem;
  background: var(--pad);
  border: 1.5px solid #5f7d7a;
  color: var(--ink-soft);
  font-size: 0.95rem;
  white-space: nowrap;
}

.unit span:first-child {
  border-right: 0;
  border-radius: 8px 0 0 8px;
}

.unit span:first-child + input {
  border-radius: 0 8px 8px 0;
}

.unit--after input {
  border-radius: 8px 0 0 8px;
}

.unit--after span {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.calc .actions {
  margin-top: 1.25rem;
}

.calc__out {
  min-height: 2.2rem;
  margin: 1.25rem 0 0;
  font: 700 1.35rem/1.3 var(--font-display);
}

.calc__out:empty {
  display: none;
}

.calc__out.is-error {
  color: var(--pen);
  font: 700 1rem/1.4 var(--font-body);
}

/* 9. Closing band, footer, mobile action bar ------------------------------- */

.band {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: center top;
  color: var(--white);
}

.band__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 3rem;
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
}

.band__text {
  flex: 1 1 24rem;
  max-width: 40rem;
}

.band__text h2 {
  margin-bottom: 0.4em;
}

.band__text p {
  margin: 0;
  color: #d3e4df;
}

.band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.band .btn:not(.btn--on-dark) {
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}

.band :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--white);
}

.site-footer {
  background: var(--ink-deep);
  color: #cfe1dc;
  font-size: 0.98rem;
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer__in {
  display: grid;
  gap: 2.25rem 3rem;
  padding-block: 3rem 2rem;
}

@media (min-width: 48rem) {
  .site-footer__in {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

.site-footer__name {
  margin-bottom: 0.5rem;
  color: var(--white);
  font: 700 1.25rem/1.2 var(--font-display);
}

.site-footer__brand p,
.site-footer__brand address {
  max-width: 24rem;
}

.site-footer__h {
  margin-bottom: 0.8rem;
  color: var(--white);
  font: 700 1rem/1.3 var(--font-body);
  letter-spacing: 0;
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li {
  margin-bottom: 0.55rem;
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}

.site-footer__list--cols {
  columns: 2;
  column-gap: 1.5rem;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 1.25rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.9rem;
}

.site-footer__base p {
  margin: 0;
}

.site-footer__base a {
  text-decoration: underline;
}

/* Call / WhatsApp / Book bar pinned to the bottom of phone screens. */
.actionbar {
  display: none;
}

@media (max-width: 45rem) {
  .actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 1fr 1.7fr;
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--white);
    border-top: 2px solid var(--ink);
  }

  .actionbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 3.4rem;
    padding: 0.5rem 0.4rem;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
  }

  .actionbar a + a {
    border-left: 1px solid var(--rule);
  }

  .actionbar .actionbar__main {
    background: var(--sun);
    border-left: 2px solid var(--ink);
  }

  body:not(.page-contact) {
    padding-bottom: calc(3.4rem + env(safe-area-inset-bottom, 0px));
  }
}

/* 10. Chinese pages, motion, print ----------------------------------------- */

html[lang="zh-HK"] body {
  line-height: 1.75;
}

html[lang="zh-HK"] h1,
html[lang="zh-HK"] h2,
html[lang="zh-HK"] h3,
html[lang="zh-HK"] .brand__name,
html[lang="zh-HK"] .areas li,
html[lang="zh-HK"] .site-footer__name span {
  font-family: var(--font-cjk);
  letter-spacing: 0.01em;
  line-height: 1.35;
}

html[lang="zh-HK"] h1 {
  font-size: clamp(1.85rem, 1.1rem + 2.9vw, 2.9rem);
}

html[lang="zh-HK"] .brand__name {
  font-size: 1.3rem;
}

html[lang="zh-HK"] .lead {
  line-height: 1.7;
}

/* The one orchestrated moment: the curve draws itself when the home page loads.
   The finished drawing is the resting state, so it still shows if animation is off. */
@media (prefers-reduced-motion: no-preference) {
  .plot__curve {
    stroke-dasharray: 1;
    animation: plot-draw 1.5s 0.25s cubic-bezier(0.6, 0, 0.2, 1) backwards;
  }

  .plot__area,
  .plot__middle,
  .plot__mean,
  .plot__share {
    animation: plot-show 0.7s ease-out backwards;
  }

  .plot__area {
    animation-delay: 1.2s;
  }

  .plot__middle {
    animation-delay: 1.55s;
  }

  .plot__mean,
  .plot__share {
    animation-delay: 1.9s;
  }
}

@keyframes plot-draw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes plot-show {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

@media print {
  .site-header,
  .band,
  .actionbar,
  .site-footer,
  .skip {
    display: none;
  }

  .hero,
  .pagehead {
    background: none;
  }

  body {
    padding: 0;
  }
}