@import url(https://p.typekit.net/p.css?s=1&k=jps4fpa&ht=tk&f=10446.10448.10452.10454.10456.10460&a=42187193&app=typekit&e=css);


/*
! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}::before,
::after {
  --tw-content: '';
}/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}/*
Remove the default font size and weight for headings.
*/h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}/*
Reset links to optimize for opt-in styling instead of opt-out.
*/a {
  color: inherit;
  text-decoration: inherit;
}/*
Add the correct font weight in Edge and Safari.
*/b,
strong {
  font-weight: bolder;
}/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}/*
Add the correct font size in all browsers.
*/small {
  font-size: 80%;
}/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}sub {
  bottom: -0.25em;
}sup {
  top: -0.5em;
}/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}/*
Remove the inheritance of text transform in Edge and Firefox.
*/button,
select {
  text-transform: none;
}/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}/*
Use the modern Firefox focus style for all focusable elements.
*/:-moz-focusring {
  outline: auto;
}/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/:-moz-ui-invalid {
  box-shadow: none;
}/*
Add the correct vertical alignment in Chrome and Firefox.
*/progress {
  vertical-align: baseline;
}/*
Correct the cursor style of increment and decrement buttons in Safari.
*/::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}/*
Remove the inner padding in Chrome and Safari on macOS.
*/::-webkit-search-decoration {
  -webkit-appearance: none;
}/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}/*
Add the correct display in Chrome and Safari.
*/summary {
  display: list-item;
}/*
Removes the default spacing and border for appropriate elements.
*/blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}fieldset {
  margin: 0;
  padding: 0;
}legend {
  padding: 0;
}ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}/*
Reset default styling for dialogs.
*/dialog {
  padding: 0;
}/*
Prevent resizing textareas horizontally by default.
*/textarea {
  resize: vertical;
}/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}/*
Set the default cursor for buttons.
*/button,
[role="button"] {
  cursor: pointer;
}/*
Make sure disabled buttons don't get the pointer cursor.
*/:disabled {
  cursor: default;
}/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/img,
video {
  max-width: 100%;
  height: auto;
}/* Make elements with the HTML hidden attribute stay hidden by default */[hidden] {
  display: none;
}*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}.font-primary {
    font-family: "Palatino Linotype", serif;
  }.fluid-fs {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));
  }.heading1 {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-h1);
    --min-fs: var(--text-h1-min);
    line-height: 1.5;
  }.heading2 {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-h2);
    --min-fs: var(--text-h2-min);
    line-height: 1.5;
  }.heading3 {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-h3);
    --min-fs: var(--text-h3-min);
    line-height: 1.25;
  }.heading4 {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-h4);
    --min-fs: var(--text-h4-min);
    line-height: 1.25;
  }.heading5 {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-h5);
    --min-fs: var(--text-h5-min);
    line-height: 1.5;
  }.heading6 {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-h6);
    --min-fs: var(--text-h6-min);
    line-height: 1.5;
  }.text-body-1 {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-body-1);
    --min-fs: var(--text-body-1-min);
    line-height: 1.5;
  }.text-body-2 {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-body-2);
    --min-fs: var(--text-body-2-min);
    line-height: 1.5;
  }.text-body-3 {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-body-3);
    --min-fs: var(--text-body-3-min);
    line-height: 1.5;
  }.text-body-4 {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-body-4);
    --min-fs: var(--text-body-4-min);
    line-height: 1.5;
  }.text-body-5 {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-body-5);
    --min-fs: var(--text-body-5-min);
    line-height: 1.5;
  }.text-small {
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-small);
    --min-fs: var(--text-small-min);
    line-height: 1.5;
  }.visible{
  visibility: visible;
}.invisible{
  visibility: hidden;
}.collapse{
  visibility: collapse;
}.static{
  position: static;
}.fixed{
  position: fixed;
}.absolute{
  position: absolute;
}.relative{
  position: relative;
}.sticky{
  position: sticky;
}.right-5{
  right: 1.25rem;
}.top-0{
  top: 0px;
}.top-5{
  top: 1.25rem;
}.mx-auto{
  margin-left: auto;
  margin-right: auto;
}.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}.\!mb-2{
  margin-bottom: 0.5rem !important;
}.ml-auto{
  margin-left: auto;
}.mt-\[14px\]{
  margin-top: 14px;
}.mt-\[var\(--header-height\)\]{
  margin-top: var(--header-height);
}.block{
  display: block;
}.inline{
  display: inline;
}.flex{
  display: flex;
}.table{
  display: table;
}.grid{
  display: grid;
}.hidden{
  display: none;
}.h-\[1px\]{
  height: 1px;
}.h-auto{
  height: auto;
}.min-h-screen{
  min-height: 100vh;
}.w-full{
  width: 100%;
}.min-w-\[150px\]{
  min-width: 150px;
}.max-w-\[95\%\]{
  max-width: 95%;
}.flex-shrink{
  flex-shrink: 1;
}.border-collapse{
  border-collapse: collapse;
}.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}.cursor-pointer{
  cursor: pointer;
}.resize{
  resize: both;
}.flex-row{
  flex-direction: row;
}.flex-col{
  flex-direction: column;
}.flex-wrap{
  flex-wrap: wrap;
}.items-center{
  align-items: center;
}.justify-end{
  justify-content: flex-end;
}.gap-5{
  gap: 1.25rem;
}.gap-\[14px\]{
  gap: 14px;
}.overflow-hidden{
  overflow: hidden;
}.text-wrap{
  text-wrap: wrap;
}.rounded{
  border-radius: 0.25rem;
}.rounded-\[14px\]{
  border-radius: 14px;
}.border{
  border-width: 1px;
}.border-t{
  border-top-width: 1px;
}.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}.bg-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(117 133 146 / var(--tw-bg-opacity));
}.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}.py-\[9px\]{
  padding-top: 9px;
  padding-bottom: 9px;
}.pb-7{
  padding-bottom: 1.75rem;
}.pt-2{
  padding-top: 0.5rem;
}.pt-\[14px\]{
  padding-top: 14px;
}.text-left{
  text-align: left;
}.text-center{
  text-align: center;
}.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}.text-\[17px\]{
  font-size: 17px;
}.font-bold{
  font-weight: 700;
}.font-normal{
  font-weight: 400;
}.uppercase{
  text-transform: uppercase;
}.italic{
  font-style: italic;
}.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}.underline{
  text-decoration-line: underline;
}.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}.outline{
  outline-style: solid;
}.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}.backdrop-filter{
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}/* Third Party Libraries *//**
 * Swiper 11.0.7
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 27, 2024
 */@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}.swiper-creative .swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;backface-visibility:hidden;overflow:hidden}/*
 * The Typekit service used to deliver this font or fonts for use on websites
 * is provided by Adobe and is subject to these Terms of Use
 * http://www.adobe.com/products/eulas/tou_typekit. For font license
 * information, see the list below.
 *
 * allumi-std:
 *   - http://typekit.com/eulas/00000000000000007759c318
 *   - http://typekit.com/eulas/00000000000000007759c308
 *   - http://typekit.com/eulas/0000000000000000775a013d
 *   - http://typekit.com/eulas/0000000000000000775a0141
 *   - http://typekit.com/eulas/00000000000000007759c316
 *   - http://typekit.com/eulas/00000000000000007759c30c
 *
 * © 2009-2026 Adobe Systems Incorporated. All Rights Reserved.
 *//*{"last_published":"2026-06-20 07:31:32 UTC"}*/@font-face {
font-family:"allumi-std";
src:url("https://use.typekit.net/af/bb7214/00000000000000007759c318/31/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/bb7214/00000000000000007759c318/31/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/bb7214/00000000000000007759c318/31/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n3&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}@font-face {
font-family:"allumi-std";
src:url("https://use.typekit.net/af/9de560/00000000000000007759c308/31/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/9de560/00000000000000007759c308/31/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/9de560/00000000000000007759c308/31/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n6&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:600;font-stretch:normal;
}@font-face {
font-family:"allumi-std";
src:url("https://use.typekit.net/af/e7d3c0/0000000000000000775a013d/31/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/e7d3c0/0000000000000000775a013d/31/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/e7d3c0/0000000000000000775a013d/31/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}@font-face {
font-family:"allumi-std";
src:url("https://use.typekit.net/af/c9ccb8/0000000000000000775a0141/31/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/c9ccb8/0000000000000000775a0141/31/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/c9ccb8/0000000000000000775a0141/31/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}@font-face {
font-family:"allumi-std";
src:url("https://use.typekit.net/af/590c69/00000000000000007759c316/31/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n2&v=3") format("woff2"),url("https://use.typekit.net/af/590c69/00000000000000007759c316/31/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n2&v=3") format("woff"),url("https://use.typekit.net/af/590c69/00000000000000007759c316/31/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n2&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:200;font-stretch:normal;
}@font-face {
font-family:"allumi-std";
src:url("https://use.typekit.net/af/839a2e/00000000000000007759c30c/31/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/839a2e/00000000000000007759c30c/31/d?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/839a2e/00000000000000007759c30c/31/a?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n5&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:500;font-stretch:normal;
}.tk-allumi-std { font-family: "allumi-std",sans-serif; }.tk-allumi-std-extended { font-family: "allumi-std-extended",sans-serif; }.tk-allumi-std-hair { font-family: "allumi-std-hair",sans-serif; }/* Configure all fonts here *//* @font-face {
  font-family: "Palatino Linotype";
  src: url("../fonts/pala-regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Palatino Linotype";
  src: url("../fonts/pala-bold.ttf") format("truetype");
  font-weight: 700;
} */@font-face {
  font-family: 'Young Serif';
  src: url(../fonts/3qTpojO2nS2VtkB3KtkQZ1t93kY6ah7E.woff2?69bf8704be477a11dc8c8c1b23242073) format("woff2");
}:root {
  --min-vw: 640;
  --max-vw: 1920;

  /* convert to px */
  --min-vw-px: calc(var(--min-vw) * 1px);
  --max-vw-px: calc(var(--max-vw) * 1px);

  /* font sizes at --max-vw */
  --text-h1: 64;
  --text-h2: 44;
  --text-h3: 32;
  --text-h4: 28;
  --text-h5: 24;
  --text-h6: 22;
  --text-body-1: 20;
  --text-body-2: 18;
  --text-body-3: 16;
  --text-body-4: 15;
  --text-body-5: 17;
  --text-base: 16;
  --text-small: 14;

  /* font sizes at --min-vw */
  --text-h1-min: calc(var(--text-h1) * 0.644);
  --text-h2-min: calc(var(--text-h2) * 0.5);
  --text-h3-min: calc(var(--text-h3) * 0.59375);
  --text-h4-min: calc(var(--text-h4) * 0.7);
  --text-h5-min: calc(var(--text-h5) * 0.75);
  --text-h6-min: calc(var(--text-h6) * 0.772);
  --text-body-1-min: calc(var(--text-body-1) * 0.7);
  --text-body-2-min: calc(var(--text-body-2) * 0.88);
  --text-body-3-min: calc(var(--text-body-3) * 0.875);
  --text-body-4-min: calc(var(--text-body-4) * 0.866);
  --text-body-5-min: calc(var(--text-body-5) * 0.764);
  --text-small-min: calc(var(--text-small) * 0.85);
  --text-base-min: 14;
}body {
    font-family: "Palatino Linotype", serif;
  }/* Configure website containers here */:root {
  --container: 1760px;
  --container-md: 1560px;
  --container-sm: 1360px;
  --container-md-px: 5.68%;
  --container-sm-px: 10.46%;
}.container {
  max-width: 1760px;
  width: 100%;
  padding: 0 20px;
}@media (min-width: 640px) {
  .container-md {
    padding: 0 var(--container-md-px);
  }
  .container-sm {
    padding: 0 var(--container-sm-px);
  }
}/* ═══════════════════════════════════════════════════════
   HKMU ADMISSIONS — DESIGN TOKENS
   Ported from design/admission-content-styles.css (Design System v2.3).
   Imported by app.css, so it is available on the front end and — through
   editor-style.css — inside the block editor preview as well.
   ═══════════════════════════════════════════════════════ */:root {
  /* Brand */
  --brand-blue: #005FDB;
  --brand-orange: #e9873f;
  --brand-green: #7fc241;
  --brand-ice: #e1eff1;
  --brand-white: #ffffff;

  /* Palette */
  --color-blue: #144f9d;
  --color-blue-dark: #0d3870;
  --color-blue-surface: #ebf2fa;
  --color-orange: #e9873f;
  --color-orange-dark: #c86520;
  --color-orange-surface: #fdf0e6;
  --color-green: #7fc241;
  --color-green-dark: #5c9030;
  --color-green-surface: #eef7e2;

  /* Study-mode accents */
  --mode-ug-color: #005FDB;
  --mode-ug-surface: #f0f6ff;
  --mode-tpg-color: #316500;
  --mode-tpg-surface: #f8fff3;
  --mode-rpg-color: #BB5000;
  --mode-rpg-surface: #fff1e4;
  --mode-dl-color: #6200b8;
  --mode-dl-surface: #f3edff;
  --mode-sub-color: #906200;
  --mode-sub-surface: #fff6e4;

  /* Neutrals */
  --color-ink: #1a1a1a;
  --color-body: #333333;
  --color-cta: #4e4d4e;
  --color-cta-hover: #838283;
  --color-muted: #626262;
  --color-disabled: #9e9e9e;
  --color-border: #d0d8e0;
  --color-surface: #f5f8fa;
  --color-white: #ffffff;
  --footer-blue: #003377;

  /* Type */
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "allumi-std", "Helvetica Neue", Arial, sans-serif;
  --text-xs: clamp(12px, 0.7rem + 0.15vw, 13px);
  --text-sm: clamp(13px, 0.75rem + 0.2vw, 15px);
  --text-base: clamp(14px, 0.8rem + 0.25vw, 16px);
  --text-md: clamp(15px, 0.85rem + 0.3vw, 18px);
  --text-lg: clamp(17px, 0.95rem + 0.4vw, 20px);
  --text-xl: clamp(20px, 1.1rem + 0.5vw, 24px);
  --text-2xl: clamp(19px, 5.2vw, 32px);
  --text-3xl: clamp(28px, 1.4rem + 2vw, 50px);
  --text-4xl: clamp(36px, 1.8rem + 3vw, 72px);
  --text-h2: clamp(26px, 1.8vw + 16px, 36px);
  --text-h3: clamp(16px, 2.2vw, 26px);
  --text-body-lg: clamp(16px, 1.4vw, 22px);
  --text-hero: clamp(32px, 2.09vw + 23.84px, 64px);
  --text-body-md: clamp(15px, 0.85rem + 0.3vw, 17px);
  --text-body-xs: clamp(12px, 0.7rem + 0.15vw, 14px);
  --lh-tight: 1.05;
  --lh-heading: 1.2;
  --lh-body: 1.5;
  --lh-loose: 1.65;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Space */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-15: 60px;
  --sp-20: 80px;

  /* Radius / shadow / motion */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 100px;
  --radius-circle: 50%;
  --shadow-xs: 0 1px 4px rgba(20, 79, 157, 0.08);
  --shadow-sm: 0 2px 10px rgba(20, 79, 157, 0.1);
  --shadow-md: 0 6px 24px rgba(20, 79, 157, 0.13);
  --ease-fast: 150ms ease;
  --ease-base: 240ms ease;

  /* Layout — 1920px canvas, 180px content gutter (see design/CLAUDE.md) */
  --canvas-max: 1920px;
  --gutter-content: clamp(24px, 9.375vw, 180px);
  --gutter-header: clamp(24px, 4.1667vw, 80px);
}@media (max-width: 768px) {
  :root {
    --gutter-content: 20px;
    --gutter-header: 20px;
  }
}/* Shared section shell used by every HKMU block */.hkmu-block {
  font-family: var(--font-body);
  color: var(--color-body);
}.hkmu-container {
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: 0 var(--gutter-content);
  width: 100%;
}/* Accent themes — set on a block wrapper to recolour the whole section */.hkmu-accent--blue {
  --accent: var(--mode-ug-color);
  --accent-surface: var(--mode-ug-surface);
  --accent-dark: #0d3870;
  --accent-deep: #061836;
}.hkmu-accent--green {
  --accent: #448d00;
  --accent-surface: #EAF5DC;
  --accent-dark: #366f00;
  --accent-deep: #0c2600;
}.hkmu-accent--orange {
  --accent: var(--mode-rpg-color);
  --accent-surface: var(--mode-rpg-surface);
  --accent-dark: #a84800;
  --accent-deep: #7a3200;
}.hkmu-accent--purple {
  --accent: var(--mode-dl-color);
  --accent-surface: var(--mode-dl-surface);
  --accent-dark: #4d0091;
  --accent-deep: #2a0a4a;
}.hkmu-accent--gold {
  --accent: var(--mode-sub-color);
  --accent-surface: var(--mode-sub-surface);
  --accent-dark: #6f4c00;
  --accent-deep: #3d2a00;
}/* Editor-only affordance: give unconfigured blocks a visible footprint */.hkmu-block__placeholder {
  padding: var(--sp-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-align: center;
}/* ═══════════════════════════════════════════════════════
   GLOBAL HEADER — ported from design/assets/hkmu-header.js
   ═══════════════════════════════════════════════════════ */.hkmu-hd {
  --hkmu-hd-fs-section: 20px;
  --hkmu-hd-fs-link: 14px;
  --hkmu-hd-fs-sep: 16px;
  --hkmu-hd-fs-cta: 16px;
  --hkmu-hd-logo-w: 288px;
  --hkmu-hd-logo-h: 70px;
  --hkmu-hd-cta-w: 249px;
  --hkmu-hd-divider: #cccccc;
  --hkmu-hd-sep: #888888;

  position: sticky;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid rgba(23, 19, 19, 0.06);
  font-family: var(--font-body);
}.hkmu-hd *,
.hkmu-hd *::before,
.hkmu-hd *::after {
  box-sizing: border-box;
}.hkmu-hd__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: 20px var(--gutter-header);
}/* Brand */.hkmu-hd__brand {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  margin-right: auto;
}.hkmu-hd__logo {
  display: block;
  position: relative;
  width: auto;
  height: auto;
  overflow: hidden;
  flex: 0 0 auto;
  max-width: 150px;
}@media (min-width:1280px) {
  .hkmu-hd__logo {
    display: block;
    position: relative;
    width: var(--hkmu-hd-logo-w);
    height: var(--hkmu-hd-logo-h);
    overflow: hidden;
    flex: 0 0 auto;
    max-width: unset;
  }
}.hkmu-hd__logo img {
  position: absolute;
  position: relative;
  height: auto;
  width: 100%;
}@media (min-width: 1280px){.hkmu-hd__logo img{
    position: absolute;
    left: -2.24%;
    top: -14.83%;
    height: 129.66%;
    width: 104.93%;
  }
}.hkmu-hd__divider {
  flex: 0 0 auto;
  width: 1px;
  height: var(--hkmu-hd-logo-h);
  background: var(--hkmu-hd-divider);
}.hkmu-hd__section {
  font-size: var(--hkmu-hd-fs-section);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--color-body);
  white-space: nowrap;
}/* Right hand side */.hkmu-hd__info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}.hkmu-hd__row {
  display: flex;
  align-items: center;
  gap: 28px;
}.hkmu-hd__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}.hkmu-hd .hkmu-hd__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--hkmu-hd-fs-link);
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
}.hkmu-hd__link:hover,
.hkmu-hd__link:hover span {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}.hkmu-hd__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-blue);
  cursor: pointer;
}/* Quick Links dropdown */.hkmu-hd__quick {
  position: relative;
}.hkmu-hd__quick>.hkmu-hd__link {
  gap: 8px;
}.hkmu-hd__quick>.hkmu-hd__link .chev {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}.hkmu-hd__quick.is-open>.hkmu-hd__link .chev {
  transform: rotate(0deg);
}.hkmu-hd__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 50;
  min-width: 240px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(23, 19, 19, 0.08);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(23, 19, 19, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}.hkmu-hd__quick.is-open .hkmu-hd__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}.hkmu-hd__menu button,
.hkmu-hd__menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--color-ink);
  font-size: var(--hkmu-hd-fs-link);
  text-decoration: none;
}.hkmu-hd__menu a:hover {
  background: #f2f6fc;
  color: var(--color-blue);
  text-decoration: none;
}.hkmu-hd__menu-divider {
  height: 1px;
  margin: 8px 0;
  background: rgba(0, 0, 0, 0.08);
}/* Languages */.hkmu-hd__langs {
  display: flex;
  align-items: center;
  gap: 8px;
}.hkmu-hd__lang {
  font-size: var(--hkmu-hd-fs-link);
  color: var(--color-muted);
  text-decoration: none;
}.hkmu-hd__lang:hover,
.hkmu-hd__lang.is-active {
  color: var(--color-blue);
  text-decoration: none;
}.hkmu-hd__sep {
  color: var(--hkmu-hd-sep);
  font-size: var(--hkmu-hd-fs-sep);
}/* Find Your Programmes */.hkmu-hd__cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: var(--hkmu-hd-cta-w);
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--color-blue);
  border-radius: 50px;
  color: var(--color-blue);
  font-size: var(--hkmu-hd-fs-cta);
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ease-fast), color var(--ease-fast);
}.hkmu-hd__cta:hover {
  background: var(--brand-blue);
  color: #fff;
  text-decoration: none;
}.hkmu-hd__cta:hover svg path {
  fill: #fff;
}/* Hamburger */.hkmu-hd .hkmu-hd__burger {
  /* display: none; */
  align-items: center;
  justify-content: end;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  color: var(--color-ink);
  cursor: pointer;
}.hkmu-hd__burger svg {
  width: 26px;
  height: 26px;
}.hkmu-hd__burger:hover {
  color: var(--color-blue);
}/* Sticky reveal — a clone of the header pinned to the top */.hkmu-hd--pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(23, 19, 19, 0.06);
  box-shadow: 0 2px 16px rgba(23, 19, 19, 0.1);
  transform: translateY(-101%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  will-change: transform;
}.hkmu-hd--pinned.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}/* ── Mobile overlay ─────────────────────────────────────── */.hkmu-mobile-overlay,
.hkmu-mo-sub {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: 30vw;
  min-width: 360px;
  max-width: 520px;
  max-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  font-family: var(--font-body);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
  height: 100%;
}.hkmu-mo-sub {
  z-index: 10001;
}.hkmu-mobile-overlay.is-open,
.hkmu-mo-sub.is-open {
  transform: translateX(0);
  visibility: visible;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.18);
}.hkmu-mobile-overlay .hkmu-mo__item,
.hkmu-mobile-overlay .hkmu-mo__citem {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}.hkmu-mobile-overlay.is-open .hkmu-mo__item,
.hkmu-mobile-overlay.is-open .hkmu-mo__citem {
  opacity: 1;
  transform: translateY(0);
}.hkmu-mobile-overlay.is-open .hkmu-mo__nav .hkmu-mo__item:nth-child(1) {
  transition-delay: 0.14s;
}.hkmu-mobile-overlay.is-open .hkmu-mo__nav .hkmu-mo__item:nth-child(2) {
  transition-delay: 0.2s;
}.hkmu-mobile-overlay.is-open .hkmu-mo__nav .hkmu-mo__item:nth-child(3) {
  transition-delay: 0.26s;
}.hkmu-mobile-overlay.is-open .hkmu-mo__nav .hkmu-mo__item:nth-child(4) {
  transition-delay: 0.32s;
}.hkmu-mobile-overlay.is-open .hkmu-mo__nav .hkmu-mo__item:nth-child(5) {
  transition-delay: 0.38s;
}.hkmu-mobile-overlay.is-open .hkmu-mo__nav .hkmu-mo__item:nth-child(6) {
  transition-delay: 0.44s;
}.hkmu-mobile-overlay.is-open .hkmu-mo__connect .hkmu-mo__citem:nth-child(2) {
  transition-delay: 0.5s;
}.hkmu-mobile-overlay.is-open .hkmu-mo__connect .hkmu-mo__citem:nth-child(3) {
  transition-delay: 0.56s;
}.hkmu-mobile-overlay.is-open .hkmu-mo__connect .hkmu-mo__citem:nth-child(4) {
  transition-delay: 0.62s;
}.hkmu-mo__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 14px 20px;
}.hkmu-mo__logo {
  display: block;
  height: 50px;
}.hkmu-mo__logo img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
}.hkmu-mo__close,
.hkmu-mo-sub__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 50%;
  color: #333;
  cursor: pointer;
}.hkmu-mo__close:hover,
.hkmu-mo-sub__close:hover {
  border-color: #999;
}.hkmu-mo__close svg,
.hkmu-mo-sub__close svg {
  width: 18px;
  height: 18px;
}.hkmu-mo__nav {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  padding: 16px 0 0;
}.hkmu-mo__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 28px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-lg);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}.hkmu-mo__item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}.hkmu-mo__bar {
  flex-shrink: 0;
  width: 4px;
  height: 28px;
  border-radius: 2px;
}.hkmu-mo__item-label {
  flex: 1;
}.hkmu-mo__chev {
  margin-left: auto;
  flex-shrink: 0;
  color: #bbb;
}.hkmu-mo__connect {
  flex-shrink: 0;
  margin-top: auto;
  padding: 28px 28px 0;
}.hkmu-mo__connect-label {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
}.hkmu-mo__citem {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: 0;
  color: var(--color-ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}.hkmu-mo__citem-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #7a8a9e;
}.hkmu-mo__citem-icon svg {
  width: 20px;
  height: 20px;
}.hkmu-mo__langs {
  display: flex;
  flex-shrink: 0;
  margin: 24px 28px 32px;
  overflow: hidden;
  background: #f0f2f5;
  border-radius: 999px;
}.hkmu-mo__lang {
  flex: 1;
  padding: 12px 0;
  border-radius: 999px;
  color: #777;
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-body-4);
    --min-fs: var(--text-body-4-min);
    line-height: 1.5;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s;
}.hkmu-mo__lang.is-active {
  background: linear-gradient(135deg, #00d89a, #006cec);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 108, 236, 0.25);
}/* Sub panels */.hkmu-mo-sub__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}.hkmu-mo-sub__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 0;
  color: #666;
  cursor: pointer;
}.hkmu-mo-sub__back svg {
  width: 20px;
  height: 20px;
}.hkmu-mo-sub__title {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: #002360;
  text-align: center;
}.hkmu-mo-sub__list {
  flex: 0 0 auto;
  /* padding: 24px 28px; */
}.hkmu-mo-sub__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  color: #171313;
  font-size: clamp(15px, 0.85rem + 0.3vw, 17px);
  font-weight: 400;
  text-decoration: none;
}/* A study mode's panels hover in that mode's Accent Colour (Site Header →
   Study Modes), set as --mode-accent on the panel; blue elsewhere. */.hkmu-mo-sub__link:hover {
  color: var(--mode-accent, var(--color-blue));
}button.hkmu-mo-sub__link {
  width: 100%;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}button.hkmu-mo-sub__link .hkmu-mo__chev {
  margin-left: auto;
}/* Third level (e.g. Undergraduate → JUPAS) stacks over its parent panel */.hkmu-mo-sub--type {
  z-index: 10002;
}.hkmu-mo-sub--type .hkmu-mo-sub__link {
  padding: 15px 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  transition: color 0.3s ease;
}.hkmu-mo-sub--type .hkmu-mo-sub__link:last-child {
  border-bottom: 0;
}.hkmu-mo-sub__ext {
  flex-shrink: 0;
  opacity: 0.5;
}.hkmu-mo-sub__divider {
  height: 1px;
  margin: 8px 0;
  background: rgba(0, 0, 0, 0.08);
}/* ── Responsive ─────────────────────────────────────────── */@media (min-width: 1921px) {
  .hkmu-hd__inner {
    padding-left: 80px;
    padding-right: 80px;
  }
}@media (max-width: 1040px) {
  .hkmu-hd__logo {
    width: clamp(150px, 20vw, 206px);
    /* height: clamp(36px, 4.854vw, 50px); */
    height: auto;
  }

  .hkmu-hd:not(.hkmu-hd--pinned) {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
  }

  .hkmu-hd--pinned {
    display: none;
  }

  .hkmu-hd__inner {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .hkmu-hd__info {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .hkmu-hd__cta {
    display: none;
  }

  /* Of the top row only the search icon stays, beside the burger. */
  .hkmu-hd__info .hkmu-hd__row:first-child {
    gap: 0;
  }

  .hkmu-hd__info .hkmu-hd__row:first-child> :not([data-hkmu-search]) {
    display: none;
  }

  .hkmu-hd__info [data-hkmu-search] {
    width: 30px;
    height: 30px;
  }

  .hkmu-hd__info .hkmu-hd__row:last-child {
    gap: 0;
  }

  .hkmu-hd__burger {
    display: inline-flex;
  }

  .hkmu-hd__logo,
  .hkmu-hd__divider {
    /* height: clamp(36px, 4.854vw, 50px); */
    height: auto;
  }

  .hkmu-hd__section {
    font-size: clamp(14px, 1.758vw, 18px);
  }
}@media (max-width: 480px) {
  .hkmu-hd__brand {
    gap: 10px;
  }

  .hkmu-hd__section {
    font-size: 12px;
  }

  .hkmu-hd__divider {
    height: 20px;
  }

  .hkmu-mobile-overlay,
  .hkmu-mo-sub {
    width: 88vw;
    min-width: 0;
    max-width: none;
    font-family: "allumi-std";
  }
}@media screen and (max-width:361px) {
  .hkmu-hd__logo {
    max-width: 130px;
  }
}@media screen and (max-width:350px) {
  .hkmu-hd__logo {
    max-width: 100px;
  }
}.hnm-sub-eyebrow {
  padding: 4px 28px 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #999;
  font-family: "allumi-std";
}.hnm-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s;
  z-index: 9999;
}.hnm-scrim.is-open {
  opacity: 1;
  visibility: visible;
}/* Search panel — design/assets/hkmu-search.js: docked under the header (its
   top is set from the header's bottom edge in header-base.js). */.hkmu-srch {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 995;
  border-bottom: 1px solid rgba(23, 19, 19, 0.08);
  background: #fff;
  box-shadow: 0 14px 34px rgba(23, 19, 19, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-14px);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, visibility 0.28s;
}.hkmu-srch[hidden] {
  display: none;
}.hkmu-srch.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}.hkmu-srch__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 40px);
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 44px) clamp(24px, 9.375vw, 180px) clamp(28px, 3.4vw, 52px);
  font-family: var(--font-body);
}.hkmu-srch__body {
  flex: 1;
  min-width: 0;
}.hkmu-srch__title {
  margin: 0 0 clamp(18px, 2vw, 30px);
  font-size: var(--text-base);
  font-weight: 800;
  line-height: 1.2;
  color: #144f9d;
}.hkmu-srch__field {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #626262;
}.hkmu-srch__input {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-base);
  color: #171313;
}.hkmu-srch__input::-moz-placeholder {
  color: #8a8a8a;
}.hkmu-srch__input::placeholder {
  color: #8a8a8a;
}.hkmu-srch__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}.hkmu-srch__go,
.hkmu-srch__close {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: #171313;
  cursor: pointer;
}.hkmu-srch__go {
  padding: 6px;
  border-radius: 50%;
}.hkmu-srch__close {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 8px;
}.hkmu-srch__go:hover,
.hkmu-srch__close:hover {
  color: #144f9d;
}.hkmu-srch__go:focus-visible,
.hkmu-srch__close:focus-visible {
  outline: 2px solid #144f9d;
  outline-offset: 2px;
}@media (max-width: 640px) {
  .hkmu-srch__inner {
    padding-right: 24px;
    padding-left: 24px;
  }
}.connect-sp-popup .gform_title {
  font-size: var(--text-xl);
  font-family: var(--font-body);
  font-weight: 700;
  color: #171313;
  margin: 0 0 8px;
  line-height: 1.15;
}.connect-sp-popup .gform_description {
  font-size: var(--text-xs);
  font-family: var(--font-body);
  color: #3f3f3f;
  margin: 0 0 18px;
}.connect-sp-popup .gform_required_legend {
  display: none;
}.connect-sp-popup .gform-theme--foundation .gform-field-label__text {
  color: #171313;
  font-weight: 500;
  font-size: var(--text-xs);
}.connect-sp-popup .gform-theme--foundation .gfield input[type=email],
.connect-sp-popup .gform-theme--foundation .gfield input[type=text] {
  font-size: var(--text-xs);
  padding: 10px 13px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  color: #171313;
  background: #fff;
  outline: none;
}.connect-sp-popup .gform-theme--foundation .gfield input[type=email]::-moz-placeholder, .connect-sp-popup .gform-theme--foundation .gfield input[type=text]::-moz-placeholder {
  font-size: var(--text-xs);
}.connect-sp-popup .gform-theme--foundation .gfield input[type=email]::placeholder,
.connect-sp-popup .gform-theme--foundation .gfield input[type=text]::placeholder {
  font-size: var(--text-xs);
}.connect-sp-popup .gform-theme--framework .gfield--type-choice .gchoice label {
  font-size: var(--text-xs);
  color: #171313;
  margin-left: 8px;
}.connect-sp-popup .gform-theme--framework .gfield--type-choice .gchoice label a{
  text-decoration-line: underline;
  text-underline-offset: 2px;
}.connect-sp-popup .gform-theme--foundation .gfield input[type=checkbox] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid #bdbdbd;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .12s ease;
}.connect-sp-popup .gform-theme--foundation .gfield input[type=checkbox]:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}.connect-sp-popup .gform-theme--foundation .gform_fields{
  gap: 14px;
}.connect-sp-popup .gform-theme--foundation .gfield input[type=checkbox]:checked {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
}.connect-sp-popup .gform-theme--framework input[type=checkbox]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before {
  color: #fff;
}.connect-sp-popup .gform-theme--framework .gfield--type-choice .gfield_checkbox{
  flex-direction: row;
  flex-wrap: wrap;
}.connect-sp-popup .gform-theme--framework .gfield--type-choice .gchoice{
  cursor: pointer;
}.connect-sp-popup .gfield--type-html {
  font-size: 12px;
  color: #7b7b7b;
  line-height: 1.5;
  margin: 4px 0 0;
  font-weight: 400;
}.connect-sp-popup .gform-theme--framework.gform-theme.gform_wrapper .gform-footer .button {
  font-size: var(--text-sm) !important;
  margin-top: 4px;
  width: 100%;
  border: none;
  cursor: pointer;
  background: #144F9D;
  color: #fff;
  font-weight: 500;
  padding: 13px;
  border-radius: 100px;
  letter-spacing: 0.3px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}.connect-sp-popup .gform-theme--framework.gform-theme.gform_wrapper .gform-footer .button:hover {
  opacity: 0.92;
}/* Thank-you view after the Connect form submits — design/assets/hkmu-connect-modal.js (.cm-success). */.connect-sp-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 8px 8px;
}.connect-sp-success[hidden] {
  display: none;
}.connect-sp-success__icon {
  margin-bottom: 18px;
  color: #144F9D;
}.connect-sp-success__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-h3);
  color: #171313;
  margin: 0 0 12px;
  line-height: 1.15;
}.connect-sp-success__text {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: #3f3f3f;
  margin: 0 0 22px;
  max-width: 440px;
  line-height: 1.5;
}.connect-sp-success__btn {
  width: 100%;
  border: none;
  cursor: pointer;
  background: #144F9D;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: 13px;
  border-radius: 100px;
  letter-spacing: 0.3px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}.connect-sp-success__btn:hover {
  opacity: 0.92;
}#hkmu-integrity-title {
  margin: 0 0 16px;
  font-size: var(--text-2xl);
  line-height: 1.25;
  font-weight: 400;
  color: var(--color-ink);
  font-family: var(--font-body);
}.hkmu-mdl__body {
  margin: 0 0 28px;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-body);
  text-wrap: pretty;
  font-family: var(--font-body);
}.hkmu-mdl__img-pic {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(23, 19, 19, .10);
}.hkmu-mdl__img-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: var(--text-sm);
    font-weight: 700;
}.hkmu-mdl__img {
    display: block;
    text-decoration: none;
    color: var(--brand-blue);
    font-family: var(--font-body);
}.hkmu-mdl__img:hover .hkmu-mdl__img-cta {
    text-decoration: underline;
    text-underline-offset: 4px;
}.hkmu-mdl__img:hover .hkmu-mdl__img-pic {
    border-color: var(--hkmu-blue);
}/* ═══════════════════════════════════════════════════════
   GLOBAL FOOTER — ported from design/assets/hkmu-footer.js
   ═══════════════════════════════════════════════════════ */.hkmu-ft {
  --hkmu-ft-blue: #003377;
  --hkmu-ft-fs: 14px;
  --hkmu-ft-logo-h: 56px;
  --hkmu-ft-ico: 24px;

  width: 100%;
  margin-top: auto;
  padding: clamp(30px, 3vw + 10px, 60px) 0 20px;
  background: var(--hkmu-ft-blue);
  color: #fff;
  font-family: var(--font-body);
}.hkmu-ft *,
.hkmu-ft *::before,
.hkmu-ft *::after {
  box-sizing: border-box;
}.hkmu-ft__inner {
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: 0 var(--gutter-content);
}.hkmu-ft__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}.hkmu-ft__logo {
  display: block;
}.hkmu-ft__logo img {
  display: block;
  width: auto;
  height: var(--hkmu-ft-logo-h);
}.hkmu-ft__social {
  display: flex;
  gap: 20px;
}.hkmu-ft__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--hkmu-ft-ico);
  height: var(--hkmu-ft-ico);
  color: #fff;
  opacity: 0.9;
  transition: opacity var(--ease-fast);
}.hkmu-ft__social a svg {
  width: 100%;
  height: 100%;
}.hkmu-ft__social a:hover {
  opacity: 1;
}.hkmu-ft__divider {
  height: 1px;
  margin-bottom: 20px;
  background: #8090a5;
}.hkmu-ft__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--hkmu-ft-fs);
  line-height: 1.6;
}.hkmu-ft__copy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}.hkmu-ft__copy .muted {
  opacity: 0.5;
}.hkmu-ft__links {
  display: flex;
  gap: 20px;
}.hkmu-ft__links a {
  color: #fff;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity var(--ease-fast);
}.hkmu-ft__links a:hover {
  opacity: 1;
  text-decoration: none;
}@media (min-width: 1921px) {
  .hkmu-ft__inner {
    padding-left: 180px;
    padding-right: 180px;
  }
}@media (max-width: 768px) {
  .hkmu-ft__top {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .hkmu-ft__bottom {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }

  .hkmu-ft__copy,
  .hkmu-ft__links {
    justify-content: center;
  }
}/* Lifts the footer over the Footer Illustration block's arc, which carries a
   negative bottom margin so the curve bleeds into this background. */.hkmu-ft {
  position: relative;
  z-index: 2;
}/* Back to Top — 01 Homepage.html's .hkmu-fab. Above Sticky Apply (1000). */.hkmu-fab {
  position: fixed;
  right: 48px;
  bottom: 48px;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}.hkmu-fab__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 60px;
  height: 60px;
  padding: 10px;
  border: 0;
  background-color: #626262;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s ease;
}.hkmu-fab__top:hover {
  background-color: #171313;
}.hkmu-fab__top:focus-visible {
  outline: 3px solid var(--brand-orange, #c86520);
  outline-offset: 2px;
}/* The design's arrow points left and is turned to point up. */.hkmu-fab__icon {
  display: flex;
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
}.hkmu-fab__icon svg {
  width: 100%;
  height: 100%;
}.hkmu-fab__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}/* hkmu-footer.js's mobile sizes. */@media (max-width: 768px) {
  .hkmu-fab {
    right: 12px;
    bottom: 20px;
    gap: 10px;
  }

  .hkmu-fab__top {
    width: 46px;
    height: 46px;
    padding: 6px;
    gap: 2px;
  }

  .hkmu-fab__icon {
    width: 14px;
    height: 14px;
  }

  .hkmu-fab__label {
    font-size: 10px;
  }

  /* sticky-apply-pill.css: clear the Apply Now pill along the bottom. */
  body:has(.sticky-apply) .hkmu-fab {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
}/* Error 404 — from the design bundle's 64 Error 404.html.

   The design page reaches for .btn / .btn-accent from admission-content-styles.css,
   which this theme does not carry, so the button is styled here instead. */.e404 {
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: 80px var(--gutter-content);
}.e404__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  min-height: min(62vh, 640px);
}/* ── Left: 404 figure ── */.e404__figure {
  display: grid;
  place-items: center;
  min-width: 0;
}.e404__svg {
  width: min(100%, 520px);
  max-width: 100%;
  height: auto;
}/* ── Right: copy ── */.e404__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-5);
  font-size: var(--text-sm);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange-dark);
}.e404__eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--brand-orange);
}.e404__title {
  margin-bottom: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  line-height: var(--lh-heading);
  text-wrap: pretty;
}.e404__body {
  max-width: 56ch;
  font-size: var(--text-md);
  color: var(--color-body);
  line-height: var(--lh-loose);
  text-wrap: pretty;
  font-family: var(--font-body);
}.e404__body p + p {
  margin-top: var(--sp-4);
}.e404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}.e404__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 34px;
  border: 2px solid var(--color-orange-dark);
  border-radius: var(--radius-pill);
  background: var(--brand-orange);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--ease-fast), color var(--ease-fast);
  width: 100%;
}.e404__cta:hover {
  background: var(--color-orange-dark);
  text-decoration: none;
}.e404__cta svg {
  flex-shrink: 0;
}@media (max-width: 960px) {
  .e404__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-10);
  }

  .e404__figure {
    aspect-ratio: 16 / 10;
  }

  .e404__actions {
    margin-top: var(--sp-8);
  }
}@media (max-width: 600px) {
  .e404__cta {
    height: 48px;
  }

  .e404__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .e404__cta {
    justify-content: center;
  }
}/* Search results — 65 Search Result.html and 66 Search Empty.html
   (<style id="srch-css">), for search.php. Brand blue throughout, as the
   design draws it. */.sr {
  /* The theme sets body in its Tailwind serif; blocks set their own face, and
     this template has none, so it sets the body font itself (as .e404 does). */
  font-family: var(--font-body);
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: clamp(28px, 3vw, 48px) clamp(24px, 9.375vw, 180px) clamp(56px, 7vw, 120px);
}.sr__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-muted);
  cursor: pointer;
}.sr__back:hover {
  color: var(--brand-blue);
}.sr__head {
  margin-top: var(--sp-6);
}.sr__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-ink);
  text-wrap: pretty;
}.sr__title em {
  font-style: normal;
  color: var(--brand-blue);
}.sr__count {
  margin-top: var(--sp-3);
  font-size: var(--text-base);
  color: var(--color-muted);
}.sr__rule {
  height: 1px;
  margin: clamp(24px, 3vw, 40px) 0 0;
  border: 0;
  background: var(--color-border);
}/* Results */.sr__list {
  display: flex;
  flex-direction: column;
}.sr__card {
  display: block;
  padding: clamp(24px, 2.6vw, 36px) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
}.sr__card:hover {
  text-decoration: none;
}.sr__card:hover .sr__card-title {
  color: var(--color-blue-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}.sr__card-title {
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--brand-blue);
  text-wrap: pretty;
}.sr__card-url {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
  word-break: break-all;
}.sr__card-body {
  margin-top: var(--sp-3);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}.sr mark {
  padding: 0 2px;
  border-radius: 2px;
  background: #ffe9a8;
  color: inherit;
}/* No keyword */.sr__empty {
  max-width: 70ch;
  padding: clamp(40px, 5vw, 72px) 0;
}.sr__empty h2 {
  margin-bottom: var(--sp-3);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.sr__empty p {
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
}/* Pagination */.sr__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: clamp(32px, 4vw, 56px);
}.sr__pg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-body);
  text-decoration: none;
}a.sr__pg:hover {
  border-color: var(--brand-blue);
  background: var(--color-blue-surface);
  color: var(--brand-blue);
  text-decoration: none;
}.sr__pg.is-active {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
  color: #fff;
}.sr__pg.is-disabled {
  opacity: 0.4;
}.sr__pg-gap {
  padding: 0 4px;
  color: var(--color-muted);
}/* No results (66) */.empty {
  padding: clamp(40px, 5vw, 72px) 0 0;
}.empty__title {
  margin-bottom: var(--sp-3);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-wrap: pretty;
}.empty__lead {
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}.empty__tips {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}.empty__tips li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
}.empty__tips li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
}.retry {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 760px;
  margin-top: clamp(28px, 3vw, 40px);
}.retry__field {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}.retry__field:focus-within {
  border-color: var(--brand-blue);
}.retry__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-ink);
}.retry__btn {
  height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--brand-blue);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: #fff;
  cursor: pointer;
}.retry__btn:hover {
  background: var(--color-blue-dark);
}/* Scroll reveal — design/assets/scroll-reveal.js. The class is only ever added
   by resources/js/scroll-reveal.js, so nothing is hidden without it. */.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}.reveal.is-in {
  opacity: 1;
  transform: none;
}@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}/* Eligibility Table (banded header) — from 06 Entry Requirements.html.

   IMPORTANT: `.elig-table` is already owned by blocks/data-table/data-table.css,
   which styles it as an alias of `.data-table` — width, collapse, cell padding,
   the accent header band, the 768px size step. 23 Entry Requirement.html relies
   on exactly those rules for the tables it writes into accordion rich text.

   So nothing here redefines a bare `.elig-table` selector. Everything is scoped
   to the `--banded` modifier and adds only what 06 needs on top: a second
   header row of subject columns, a tinted row-label column, vertical cell
   rules, and a stacked card view. Two stylesheets fighting over the same
   selector would resolve by enqueue order, which is not something to rely on. *//* The design lets long subject names wrap; data-table only sets word-wrap. */.elig-table--banded thead th {
  white-space: normal;
}/* Second header row — the subject columns under each group label. */.elig-table--banded thead tr + tr th {
  background: var(--accent-surface, #ebf2fa);
  color: var(--accent, #144f9d);
  border: 1px solid var(--color-border);
}.elig-table--banded thead th + th {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}/* Row-label column. */.elig-table--banded tbody th {
  background: var(--accent-surface, #e1eff1);
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
}/* A matrix needs vertical rules; a plain data table does not. */.elig-table--banded td + td,
.elig-table--banded th + td {
  border-left: 1px solid var(--color-border);
}/* Under 680px the matrix stops scrolling sideways and becomes one labelled
   card per row, reading each cell's data-label. data-table has an equivalent
   at 640px but only behind its opt-in .stack-mobile class, and the design
   stacks this table unconditionally. *//* Prefixed with the block wrapper: the accent-wide ".hkmu-accent--blue table
   tbody td" in data-table.css otherwise outranks these on phones. */@media (max-width: 680px) {
  .elig-table-wrap--banded {
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .elig-table-wrap--banded .elig-table--banded {
    display: block;
    width: 100%;
    --max-fs: var(--text-base);
    --min-fs: var(--text-base-min);

    --slope: calc((var(--max-fs) - var(--min-fs)) / (var(--max-vw) - var(--min-vw)));

    --min-fs-px: calc(var(--min-fs) * 1px);
    --max-fs-px: calc(var(--max-fs) * 1px);
    --fs-px: calc(var(--slope) * (100vw - var(--min-vw-px)) + var(--min-fs-px));

    font-size: clamp(var(--min-fs-px), var(--fs-px), var(--max-fs-px));

    --max-fs: var(--text-body-4);
    --min-fs: var(--text-body-4-min);
    line-height: 1.5;
  }

  .elig-table-wrap--banded .elig-table--banded thead {
    display: none;
  }

  .elig-table-wrap--banded .elig-table--banded tbody,
  .elig-table-wrap--banded .elig-table--banded tbody tr {
    display: block;
  }

  .elig-table-wrap--banded .elig-table--banded tbody tr {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
  }

  .elig-table-wrap--banded .elig-table--banded tbody tr + tr {
    margin-top: var(--sp-3);
  }

  .elig-table-wrap--banded .elig-table--banded tbody th {
    display: block;
    padding: 12px 16px;
    background: var(--accent, #144f9d);
    color: #fff;
    font-size: 14px;
  }

  .elig-table-wrap--banded .elig-table--banded tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 11px 16px;
    border-bottom: 1px solid var(--color-border);
    border-left: 0;
    background: #fff;
    font-size: 15px;
    line-height: 1.5;
  }

  .elig-table-wrap--banded .elig-table--banded tbody tr:last-child td:last-child {
    border-bottom: none;
  }

  .elig-table-wrap--banded .elig-table--banded tbody td::before {
    content: attr(data-label);
    flex: 1;
    font-weight: var(--fw-bold);
    color: var(--color-body);
  }

  .elig-table-wrap--banded .elig-table--banded tbody td strong {
    white-space: nowrap;
    text-align: right;
  }
}/* Data Table — from design/08 JUPAS Interview.html (.data-table) and design/23 Entry Requirement.html (.elig-table) */.data-table-wrap,
.elig-table-wrap {
  overflow-x: auto;
  margin: var(--sp-6) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}/* Small Margin — a table set between paragraphs, as 29 Scholarships & Prizes
   has it (.sch-table-wrap): 16px above, 32px below. */.content-section.small-margin > .data-table-wrap,
.content-section.small-margin > .elig-table-wrap {
  margin: var(--sp-4) 0 var(--sp-8);
}.data-table-wrap:focus-visible,
.elig-table-wrap:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}.hkmu-accent--green table,
.hkmu-accent--blue table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-body);
}.hkmu-accent--green table thead{
  background: #275100;
}.hkmu-accent--green table thead th{
  padding: 12px 14px;
  /* background: var(--accent); */
  color: #fff;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  text-align: left;
  vertical-align: middle;
  line-height: 1.3;
}.hkmu-accent--blue thead th,
.data-table thead th {
  padding: 12px 14px;
  background: var(--accent, #144f9d);
  color: #fff;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  text-align: left;
  vertical-align: middle;
  line-height: 1.3;
}.hkmu-accent--blue table thead th.th-center,
.data-table thead th.th-center {
  text-align: center;
}.hkmu-accent--blue table thead th.th-right,
.data-table thead th.th-right {
  text-align: right;
}.hkmu-accent--blue table tbody td,
.data-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.5;
  vertical-align: top;
}.hkmu-accent--green table tbody td{
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.5;
  vertical-align: top;
}.data-table tbody td.td-center {
  text-align: center;
}.data-table tbody td.td-right {
  text-align: right;
}.data-table tbody tr:last-child td {
  border-bottom: none;
}.data-table .group-row td,
.elig-table .group-row td {
  padding: 9px 14px;
  background: #333333;
  border-bottom: none;
  color: #fff;
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
}/* Compact "eligibility" variant */.elig-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: var(--color-white);
  font-size: var(--text-base);
}.elig-table th,
.elig-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-body);
}.elig-table thead th {
  background: var(--accent, #144f9d);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  word-wrap: break-word;
}.elig-table tbody tr:last-child > * {
  border-bottom: none;
}.elig-table td {
  font-size: var(--text-sm);
  color: var(--color-body);
}.elig-table td strong {
  color: var(--color-ink);
}.data-table__footnote {
  margin-top: var(--sp-4);
  font-size: 14px;
  color: var(--color-muted);
  line-height: var(--lh-loose);
}.data-table__footnote p {
  margin: 0 0 6px;
}.data-table__footnote p:last-child {
  margin-bottom: 0;
}@media (max-width: 768px) {
  .data-table,
  .elig-table {
    font-size: 13px;
  }

  .data-table thead th,
  .data-table tbody td,
  .elig-table th,
  .elig-table td {
    padding: 8px;
  }
}/* ── Advanced display settings ────────────────────────────── */.data-table__caption {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}/* Density */.data-table.is-compact thead th,
.elig-table.is-compact thead th {
  padding: 8px 10px;
}.data-table.is-compact tbody td,
.elig-table.is-compact tbody td,
.elig-table.is-compact tbody th {
  padding: 6px 10px;
  font-size: var(--text-sm);
}/* Header colour */.data-table.head-dark thead th,
.elig-table.head-dark thead th {
  background: #333333;
}/* Deep — the accent's dark tone taken toward black: #275100 for green, the
   header 29 Scholarships & Prizes draws. */.data-table.head-deep thead th,
.elig-table.head-deep thead th {
  background: color-mix(in srgb, var(--accent-dark, #0e3a73) 72%, #000);
}.data-table.head-light thead th,
.elig-table.head-light thead th {
  background: var(--accent-surface, var(--color-blue-surface));
  color: var(--accent-dark, var(--brand-blue));
  border-bottom: 2px solid var(--accent, var(--brand-blue));
}/* Row backgrounds live on the <tr> so sticky cells can inherit them */.data-table tbody tr,
.elig-table tbody tr {
  background: var(--color-white);
}.data-table:not(.no-zebra) tbody tr:nth-child(even):not(.is-highlighted),
.elig-table:not(.no-zebra) tbody tr:nth-child(even):not(.is-highlighted) {
  background: #f6f6f6;
}.data-table tbody tr.is-highlighted,
.elig-table tbody tr.is-highlighted {
  background: var(--accent-surface, var(--color-blue-surface));
}.data-table tbody tr.is-highlighted > td,
.elig-table tbody tr.is-highlighted > td {
  font-weight: var(--fw-bold);
}/* Sticky header — needs a scroll container with a max height */.data-table-wrap.is-sticky-header,
.elig-table-wrap.is-sticky-header {
  overflow-y: auto;
  max-height: 70vh;
}.is-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}/* Sticky first column */.is-sticky-first tbody tr:not(.group-row) td:first-child,
.is-sticky-first thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}.is-sticky-first thead th:first-child {
  z-index: 3;
  background: var(--accent, #144f9d);
}.is-sticky-first .head-dark thead th:first-child {
  background: #333333;
}.is-sticky-first .head-deep thead th:first-child {
  background: color-mix(in srgb, var(--accent-dark, #0e3a73) 72%, #000);
}.is-sticky-first tbody tr:not(.group-row) td:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}/* Horizontal scroll hint */.has-scroll-hint {
  position: relative;
}.has-scroll-hint.is-scrollable::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
  pointer-events: none;
}.has-scroll-hint.is-scrolled-end::after {
  opacity: 0;
}/* Stack rows as cards on small screens — 08 JUPAS Interview.html's mobile
   treatment (the same rules in 05, 06, 07, 09, 10): a white rounded card per
   row, each cell a small uppercase label over its value, group rows as
   rounded bars, and a code column as a pill. */@media (max-width: 680px) {
  /* Cards stack in the page, so Max Height (inline, for the sticky header) no longer applies. */
  .data-table-wrap:has(.stack-mobile) {
    max-height: none !important;
    overflow: visible;
    margin: var(--sp-5) 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .data-table-wrap:has(.stack-mobile)::after {
    content: none;
  }

  .stack-mobile {
    display: block;
    width: 100%;
    background: transparent;
    font-size: 15px;
  }

  .stack-mobile thead {
    display: none;
  }

  .stack-mobile tbody,
  .stack-mobile tbody tr {
    display: block;
  }

  .stack-mobile tbody tr.group-row {
    margin: var(--sp-6) 0 var(--sp-3);
    border-radius: var(--radius-md);
    background: #333;
    overflow: hidden;
  }

  .stack-mobile tbody tr.group-row:first-child {
    margin-top: 0;
  }

  .stack-mobile tbody tr.group-row td {
    display: block;
    padding: 11px 16px;
    border: none;
    font-size: 13px;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: #fff;
  }

  /* The wrapper class outranks the zebra rows (.data-table:not(.no-zebra) …). */
  .data-table-wrap .stack-mobile tbody tr:not(.group-row),
  .data-table-wrap .stack-mobile tbody tr:nth-child(even):not(.group-row) {
    margin-bottom: var(--sp-3);
    padding: 4px 16px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-xs);
  }

  .stack-mobile tbody tr:not(.group-row) td {
    display: block;
    width: auto;
    padding: 11px 0 0;
    border: none;
    background: none;
    /* font-size: 15px; */
    line-height: 1.5;
    text-align: left;
  }

  .stack-mobile tbody tr:not(.group-row) td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .stack-mobile tbody td:empty {
    display: none;
  }

  /* Sticky First Column means nothing in a card: no sticking, tint or rule. */
  .is-sticky-first .stack-mobile tbody tr:not(.group-row) td:first-child {
    position: static;
    background: none;
  }

  .is-sticky-first .stack-mobile tbody tr:not(.group-row) td:first-child::after {
    content: none;
  }

  .stack-mobile tbody tr:not(.group-row) td.code-cell[data-code] {
    padding-top: 14px;
    font-size: 0;
    white-space: normal;
  }

  .stack-mobile tbody tr:not(.group-row) td.code-cell[data-code]::before {
    font-size: 11px;
  }

  /* Also undoes Sticky First Column's divider, which uses the same ::after. */
  .stack-mobile tbody tr:not(.group-row) td.code-cell[data-code]::after {
    content: attr(data-code);
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    display: inline-block;
    margin-top: 2px;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    background: var(--accent-surface, var(--color-blue-surface));
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--accent, var(--brand-blue));
  }
}.content-section.hkmu-accent--blue table td{
  /* @apply text-ink; */
}.data-table .group-row--green td,
.elig-table .group-row--green td {
  background: #448d00;
}.data-table .group-row--pink td,
.elig-table .group-row--pink td {
  background: #d02e6f;
}.data-table .group-row--blue td,
.elig-table .group-row--blue td {
  background: #144f9d;
}.data-table .group-row--orange td,
.elig-table .group-row--orange td {
  background: #d85c00;
}.data-table .group-row--purple td,
.elig-table .group-row--purple td {
  background: #6200b8;
}/* Programme / JUPAS codes — from 08 JUPAS Interview.html (.code-cell).
   Set from the column's "holds a code" flag in the table field, so the class
   lands on the <td> and an editor never has to write markup. */.data-table td.code-cell,
.elig-table td.code-cell {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--accent, var(--brand-blue));
  white-space: nowrap;
}.data-table td.code-cell b,
.data-table td.code-cell strong,
.elig-table td.code-cell b,
.elig-table td.code-cell strong {
  font-weight: var(--fw-bold);
  color: inherit;
}.act-title {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.act-prog {
  display: block;
  color: var(--color-body);
  margin-top: 5px;
  font-size: var(--text-sm);
  line-height: 1.5;
}/* News schedule tables (15 News Details): time over venue in the first cell. */.venue-time {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  white-space: nowrap;
}.venue-loc {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: 3px;
}.subsec-note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0 0 var(--sp-3);
  font-style: italic;
}.lang-note {
  font-size: var(--text-sm);
  color: var(--color-body);
  line-height: var(--lh-body);
  margin-top: var(--sp-4);
}/* Content Section — from design/admission-content-styles.css + design/23 Entry Requirement.html */.content-section {
  margin-bottom: clamp(44px, 5vw, 72px);
  scroll-margin-top: 100px;
}.content-section.small-margin {
  margin-bottom: 20px;
}.content-section:last-child {
  margin-bottom: 0;
}/* Eyebrow heading variant (design/08 JUPAS Interview.html) */.content-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-5);
}.content-eyebrow__bar {
  flex-shrink: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, #005fdb);
}.content-eyebrow__label {
  font-family: var(--font-body);
  font-size: clamp(11px, 3.2vw, 14px);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #171313;
}.content-section__title {
  margin-bottom: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  line-height: var(--lh-heading);
}/* Title Font Size 42px (Title only style) — scales down like --text-2xl. */.content-section__title--42 {
  font-size: clamp(24px, 6.5vw, 42px);
}/* Inside the sidebar layout's content column a plain title is a section
   heading, not a page heading, so it steps down to the same size as
   .sec-head__title. From design/05 Online Application.html. */.detail-panel .content-section__title {
  font-size: var(--text-2xl);
}/* Accent bar heading variant (design/23 Entry Requirement.html) */.sec-head {
  display: flex;
  align-items: stretch;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}.sec-head__bar {
  flex-shrink: 0;
  width: 4px;
  min-height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent, var(--brand-blue));
}.sec-head__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  line-height: var(--lh-heading);
}/* Title and button share one row at every width, as 26 Complete your
   Qualification Verification draws it: a long title wraps its own text rather
   than pushing Expand All onto a line of its own. */.sec-head--with-action {
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}.sec-head--with-action .sec-head__title {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}.sec-head--with-action .expand-all-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}/* Body copy */.content-section__body p,
.content-section>p {
  margin-bottom: var(--sp-5);
  font-size: var(--text-base);
  color: var(--color-body);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}#sec-payment-tuition .content-section__body p,
#sec-commencement .content-section__body p,
#sec-tuition-fees .content-section__body p,
#sec-financial-assistance .content-section__body p 
{
  font-size:  var(--text-md);
}#sec-tuition-fees .content-section__body p {
  margin: 0 0 var(--sp-4);
}.content-section__body p:last-child {
  margin-bottom: 0;
}.content-section .callout-box ul,
.content-section .callout-box ol,
.content-section__body ul,
.content-section__body ol{
  margin-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}/* Sub-headings inside the body — 29 Scholarships & Prizes' .sub-heading. */.content-section__body h3 {
  margin: var(--sp-8) 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.content-section__body h3:first-child {
  margin-top: 0;
}/* A list followed by more copy keeps the paragraph gap, so a pasted <ol>
   needs no inline margin. */.content-section__body > ul:not(:last-child),
.content-section__body > ol:not(:last-child) {
  margin-bottom: var(--sp-5);
}.content-section__body li {
  font-size: var(--text-base);
  color: var(--color-body);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}/* Tables pasted into the body — 29 Scholarships & Prizes (.sch-table-wrap >
   .data-table). Any table is styled, with or without the design's classes;
   the header is the accent's dark tone taken toward black (#275100 on green). */.content-section__body .content-table-wrap,
.content-section__body .data-table-wrap {
  overflow-x: auto;
  margin: var(--sp-4) 0 var(--sp-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}/* Generic body tables only: an .elig-table or .ctable (39 Student VISA) brings
   its own look, in visa.css / data-table.css, and its own phone layout. */.content-section__body table:not(.elig-table):not(.ctable) {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: var(--color-white);
}.content-section__body table:not(.elig-table):not(.ctable) thead th {
  padding: 12px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  background: color-mix(in srgb, var(--accent-dark, #0e3a73) 72%, #000);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: #fff;
  text-align: left;
  vertical-align: middle;
}.content-section__body table:not(.elig-table):not(.ctable) thead th:last-child {
  border-right: none;
}.content-section__body table:not(.elig-table):not(.ctable) tbody td {
  padding: 12px 14px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-body);
  vertical-align: top;
}.content-section__body table:not(.elig-table):not(.ctable) tbody td:last-child {
  border-right: none;
}.content-section__body table:not(.elig-table):not(.ctable) tbody tr:last-child td {
  border-bottom: none;
}.content-section__body table:not(.elig-table):not(.ctable) tbody tr:nth-child(even) {
  background: #f6f6f6;
}.content-section__body table:not(.elig-table):not(.ctable) tbody td a {
  color: var(--brand-blue);
  text-decoration: none;
}.content-section__body table:not(.elig-table):not(.ctable) tbody td a:hover {
  text-decoration: underline;
}/* Phones and tablets (≤1024px) — each row becomes a card and each cell shows
   its column heading above the value, from the design's mobile-fixes.css.
   The headings are written onto the cells as data-label on render
   (hkmu_label_table_cells()), where the design copies them in with a script. */@media (max-width: 1024px) {
  .content-section__body .content-table-wrap,
  .content-section__body .data-table-wrap {
    overflow: visible;
    max-width: 100%;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .content-section__body table:not(.elig-table):not(.ctable),
  .content-section__body table:not(.elig-table):not(.ctable) thead,
  .content-section__body table:not(.elig-table):not(.ctable) tbody,
  .content-section__body table:not(.elig-table):not(.ctable) tr,
  .content-section__body table:not(.elig-table):not(.ctable) th,
  .content-section__body table:not(.elig-table):not(.ctable) td {
    display: block;
    width: auto !important; /* beats inline column widths */
  }

  .content-section__body table:not(.elig-table):not(.ctable) {
    background: transparent;
  }

  /* The headings are read from each cell's label instead. */
  .content-section__body table:not(.elig-table):not(.ctable) thead {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .content-section__body table:not(.elig-table):not(.ctable) tbody tr,
  .content-section__body table:not(.elig-table):not(.ctable) tbody tr:nth-child(even) {
    margin: 0 0 12px;
    padding: 6px 0;
    /* White on every card: the desktop stripe (and .data-table's own, which is
       more specific) would grey every second one. */
    background: #fff !important;
    border: 1px solid #e2e5e9;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .content-section__body table:not(.elig-table):not(.ctable) tbody td {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px dashed #e5e8ec;
    /* font-size: 15px; */
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .content-section__body table:not(.elig-table):not(.ctable) tbody td:last-child {
    border-bottom: 0;
  }

  .content-section__body table:not(.elig-table):not(.ctable) td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
  }
}/* Callout */.callout-box {
  margin-bottom: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: #fdf6ee;
  border: 0;
  border-left: 4px solid var(--brand-orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-base);
  color: var(--color-body);
  line-height: var(--lh-body);
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}@media (min-width: 768px){.callout-box{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}.callout-box p {
  margin: 0;
  color: var(--color-body);
  line-height: var(--lh-body);
}/* Term chip — 34 RPG Programme Listing's "Autumn Term Intake only" pill
   beside a body h3. Write it as <span class="term-chip"> inside the h3; the
   h3 then lays out as the design's .doc-head-row. */.content-section__body h3:has(.term-chip) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}.term-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--accent, var(--brand-blue));
  border-radius: var(--radius-pill);
  background: var(--accent-surface, var(--color-blue-surface));
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--accent, var(--brand-blue));
}/* CTA buttons */.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-decoration: none;
  transition: all var(--ease-fast);
}.cta-btn:hover {
  background: var(--accent-surface, var(--color-blue-surface));
  border-color: var(--accent, var(--brand-blue));
  color: var(--accent-dark, var(--brand-blue));
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transform: translateY(-1px);
}.cta-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--accent-surface, var(--color-blue-surface));
  color: var(--accent-dark, var(--brand-blue));
}.cta-btn:hover .cta-btn__icon {
  background: var(--accent, var(--brand-blue));
  color: #fff;
}.cta-btn__arrow {
  flex-shrink: 0;
  color: var(--color-disabled);
  transition: transform var(--ease-fast), color var(--ease-fast);
}.cta-btn:hover .cta-btn__arrow {
  color: var(--accent-dark, var(--brand-blue));
  transform: translateX(3px);
}.content-divider {
  height: 1px;
  margin-bottom: clamp(44px, 5vw, 72px);
  background: var(--color-border);
  border: none;
}/* Divider Spacing — the gap above the line is the section's bottom margin,
   the gap below is the line's own, so both change together. Large is the rule
   above; 30 Recognition of Former Qualifications uses Medium (the design's 40px). */.content-divider--medium {
  margin-bottom: 40px;
}.content-divider--small {
  margin-bottom: 24px;
}.content-section-fee--large{
  padding-bottom: clamp(48px, 3.5vw, 72px);
  margin-bottom: 0;
}.content-section-fee--medium {
  padding-bottom: clamp(32px, 3.5vw, 48px);
  margin-bottom: 0;
}.content-section-fee--small {
  padding-bottom: 24px;
  margin-bottom: 0;
}.content-section:has(+ .content-divider--medium) {
  margin-bottom: 40px;
}.content-section:has(+ .content-divider--small) {
  margin-bottom: 24px;
}@media (max-width: 768px) {
  .cta-row {
    flex-direction: column;
  }

  .sec-head__title,
  .content-section__title {
    font-size: var(--text-2xl);
    line-height: 1.28;
  }
}/* Tailwind's reset strips list markers; body and callout lists keep them, as
   the design draws them (29's schemes, 30's transcripts). */.content-section .callout-box ul,
.content-section__body ul {
  list-style-type: disc;
}.content-section .callout-box ol,
.content-section__body ol {
  list-style-type: decimal;
}.content-section__body a{
  color: var(--accent);
}/* Body Font Size — a fixed size for the body's paragraphs and list items,
   in place of the fluid --text-base. */.content-section__body--16 p,
.content-section__body--16 li {
  font-size: var(--text-base);
}.content-section__body--18 p,
.content-section__body--18 li {
  font-size: var(--text-md);
}/* Remark references — 47 Application Guideline's superscript footnote links
   (<a href="#remark-1" class="dl-remark-ref">1</a>), typed in rich text and
   pointing at an Application Tracks block's Remarks. Scoped so the listing
   blocks keep their own .dl-remark-ref. */:is(.content-section__body, .guide-tracks) .dl-remark-ref {
  margin: 0 1px;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
  text-decoration: none;
  color: var(--accent, #7200d5);
  cursor: help;
}:is(.content-section__body, .guide-tracks) .dl-remark-ref:hover {
  text-decoration: underline;
}/* Remark Card — from 06 Entry Requirements.html (.remark-card).
   Global selectors, like elig-table, so the same card works when written into
   an accordion row's rich text. */.remark-card {
  padding: var(--sp-6);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}.remark-card__eyebrow {
  margin-bottom: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}.remark-card__title {
  margin-bottom: var(--sp-4);
  font-size: clamp(17px, 0.95rem + 0.4vw, 20px);
  font-weight: var(--fw-extrabold);
  color: var(--color-ink);
  line-height: var(--lh-heading);
}.remark-card__body ol,
.remark-card ul,
.remark-card ol.remark-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-body);
  line-height: var(--lh-loose);
}.remark-card__body{
  font-size: var(--text-base);
}.remark-card ul {
  padding-left: 1.3em;
  list-style: disc;
}.remark-card__body ol,
.remark-card ol.remark-card__list {
  padding-left: 1.4em;
  list-style: decimal;
}.remark-card a {
  text-decoration: underline;
  text-underline-offset: 2px;
}.remark-card strong {
  color: var(--color-ink);
}.custom-margin-bottom{
      margin-bottom: clamp(44px, 5vw, 72px);
}/* Phones — 06 Entry Requirements.html sets the notes at 14px. The Remark Card
   block's own wrapper only, not Remark Grid's cards, which share the class. */@media (max-width: 680px) {
  .hkmu-block.remark-card li {
    font-size: 14px;
    line-height: 1.65;
  }
}.content-disclaimer {
     margin-top: var(--sp-10);
     padding-top: 1rem;
     padding-bottom: 1rem;
     padding-left: 1rem;
     padding-right: 1rem;
 }@media (min-width: 768px){.content-disclaimer{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}.content-disclaimer {
     background: var(--accent-surface);
     border: 1.5px solid var(--color-border);
     border-radius: var(--radius-md);
     display: flex;
     gap: var(--sp-4);
     align-items: flex-start;
 }.content-disclaimer__icon {
     width: 32px;
     height: 32px;
     border-radius: var(--radius-circle);
     background: var(--accent);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     color: #fff
 }.content-disclaimer__text {
     font-size: var(--text-base);
     color: var(--color-muted);
     line-height: var(--lh-loose);
 }.content-disclaimer__text strong {
     color: var(--color-ink);
     font-weight: var(--fw-bold);
 }/* Sidebar Layout — from design/admission-content-styles.css (.main-wrapper / .main-layout / .sidebar-*) */.main-wrapper {
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: clamp(36px, 4vw, 64px) var(--gutter-content);
}.main-layout {
  display: grid;
  grid-template-columns: clamp(260px, 20vw, 320px) 1fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: start;
}.main-layout > aside {
  align-self: stretch;
}.sidebar-wrap {
  position: sticky;
  top: 200px;
  width: 100%;
  border: 1px solid #e2e5e9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}.sidebar-label {
  margin: 0;
  padding: 20px 24px;
  background: var(--accent, var(--brand-blue));
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-extrabold);
  line-height: 1.3;
}/* Mobile dropdown trigger — hidden on desktop (see design/CLAUDE.md sidebar standard) */.hkmu-block .sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: var(--accent, var(--brand-blue));
  border: 0;
  color: #fff;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}.sidebar-toggle__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}.sidebar-toggle__eyebrow {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 1.2px;
  line-height: 1.4;
  text-transform: uppercase;
  opacity: 0.8;
}.sidebar-toggle__label {
  overflow: hidden;
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}.sidebar-toggle__icon {
  display: flex;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}.sidebar-wrap.is-open .sidebar-toggle__icon {
  transform: rotate(180deg);
}.sidebar-overlay {
  display: none;
}.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}.sidebar-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #e5e8ec;
  color: var(--color-ink);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  text-decoration: none;
  transition: background var(--ease-fast), color var(--ease-fast);
}.sidebar-nav__item:last-child {
  border-bottom: 0;
}.sidebar-nav__item:hover,
.sidebar-nav__item.is-active:hover {
  background: var(--accent-surface, #eef4fc);
  color: var(--accent-dark, #144f9d);
  text-decoration: none;
}.sidebar-nav__item.is-active {
  background: transparent;
  color: var(--accent, #144f9d);
  font-weight: var(--fw-bold);
}.sidebar-nav__item .ext-icon {
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity var(--ease-fast);
}.sidebar-nav__item:hover .ext-icon,
.sidebar-nav__item.is-active .ext-icon {
  opacity: 1;
}/* Child rows — from 23 Entry Requirement.html: jump links to sections of the
   current page, indented under the row above with a bullet. The parent and
   its children read as one group, so the rules between them are dropped and
   the group closes with the usual rule. */.sidebar-nav__item--child {
  position: relative;
  padding: 6px 24px 6px 40px;
  border-bottom: 0;
  font-size: 15px;
}.sidebar-nav__item--child > span {
  font-size: 14px;
}.sidebar-nav__item--child::before {
  content: "•";
  position: absolute;
  top: 50%;
  left: 26px;
  color: var(--color-muted);
  font-size: 16px;
  line-height: 1;
  opacity: 0.7;
  transform: translateY(-50%);
}.sidebar-nav__item--child.is-active {
  font-weight: var(--fw-regular);
}.sidebar-nav__item--child.is-active::before {
  color: var(--accent-dark, var(--accent, #144f9d));
  opacity: 1;
}.sidebar-nav__item:has(+ .sidebar-nav__item--child) {
  padding-bottom: 6px;
  border-bottom: 0;
}.sidebar-nav__item:not(.sidebar-nav__item--child) + .sidebar-nav__item--child {
  padding-top: 10px;
}.sidebar-nav__item--child:has(+ .sidebar-nav__item:not(.sidebar-nav__item--child)) {
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e8ec;
}.detail-panel {
  min-width: 0;
}.content-main {
  min-width: 0;
}@media (max-width: 1024px) {
  .main-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .sidebar-wrap {
    position: static;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .sidebar-label {
    display: none;
  }

  /* Matches the desktop rule's specificity, or display: none wins here too. */
  .hkmu-block .sidebar-toggle {
    display: flex;
  }

  .sidebar-nav {
    display: none;
    border: 1px solid #e2e5e9;
    border-top: 0;
  }

  .sidebar-wrap.is-open .sidebar-nav {
    display: flex;
  }

  /*
   * Front end only — from the design's sbr-topbar.css. The toggle becomes a
   * bar pinned under the site header, and the menu drops down beneath it over
   * a dimmed page. The editor canvas is often narrower than 1024px, so it keeps
   * the in-flow dropdown above instead of a bar fixed over the editor.
   * --sbr-top (header bottom) and --sbr-bar (bar height) are kept current by
   * sidebar-layout.js; the fallbacks cover the moment before it runs.
   */
  body:not(.editor-styles-wrapper) .main-layout {
    row-gap: 0;
  }

  body:not(.editor-styles-wrapper) .sidebar-wrap {
    overflow: visible;
  }

  body:not(.editor-styles-wrapper) .hkmu-block .sidebar-toggle {
    position: fixed;
    top: var(--sbr-top, 64px);
    right: 0;
    left: 0;
    z-index: 990;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  }

  body:not(.editor-styles-wrapper) .sidebar-nav,
  body:not(.editor-styles-wrapper) .sidebar-wrap.is-open .sidebar-nav {
    display: flex;
    position: fixed;
    top: calc(var(--sbr-top, 64px) + var(--sbr-bar, 64px));
    right: 0;
    left: 0;
    z-index: 989;
    max-height: calc(100vh - var(--sbr-top, 64px) - var(--sbr-bar, 64px) - var(--sbr-bottom, 0px) - 12px);
    max-height: calc(100dvh - var(--sbr-top, 64px) - var(--sbr-bar, 64px) - var(--sbr-bottom, 0px) - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: transform 0.24s ease, opacity 0.2s ease, visibility 0s linear 0.24s;
    /* Visible scrollbar so a long menu reads as scrollable — the design's #jupas-tabs scrollbar. */
    scrollbar-width: thin;
    scrollbar-color: #626262 transparent;
  }

  body:not(.editor-styles-wrapper) .sidebar-nav::-webkit-scrollbar {
    width: 6px;
  }

  body:not(.editor-styles-wrapper) .sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
  }

  body:not(.editor-styles-wrapper) .sidebar-nav::-webkit-scrollbar-thumb {
    background: #626262;
    border-radius: 3px;
  }

  body:not(.editor-styles-wrapper) .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
  }

  body:not(.editor-styles-wrapper) .sidebar-wrap.is-open .sidebar-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.24s ease, opacity 0.2s ease, visibility 0s;
  }

  body:not(.editor-styles-wrapper) .sidebar-overlay {
    display: block;
    position: fixed;
    top: calc(var(--sbr-top, 64px) + var(--sbr-bar, 64px));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 988;
    background: rgba(20, 30, 10, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  body:not(.editor-styles-wrapper) .sidebar-wrap.is-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
  }

  /* The design's drawer lists pages only; jump links stay on desktop. */
  body:not(.editor-styles-wrapper) .sidebar-nav__item--child {
    display: none;
  }

  /* With its children hidden, a parent row is an ordinary row again. */
  body:not(.editor-styles-wrapper) .sidebar-nav__item:has(+ .sidebar-nav__item--child) {
    padding-bottom: 16px;
  }

  /* Menu rows, as the design's drawer draws them. */
  body:not(.editor-styles-wrapper) .sidebar-nav__item {
    padding: 16px 20px;
    font-size: 15px;
    line-height: 1.4;
    border-bottom: 0;
    border-top: 1px solid #e5e8ec;
    border-left: 4px solid transparent;
  }

  body:not(.editor-styles-wrapper) .sidebar-nav__item:first-child {
    border-top: 0;
  }

  body:not(.editor-styles-wrapper) .sidebar-nav__item:hover,
  body:not(.editor-styles-wrapper) .sidebar-nav__item.is-active {
    background: var(--accent-surface, #eef4fc);
    color: var(--accent, #144f9d);
    border-left-color: var(--accent, #144f9d);
  }

  /* The bar is out of flow, so push the page down by its height. */
  body:not(.editor-styles-wrapper):has(.sidebar-toggle) .site-content {
    padding-top: var(--sbr-bar, 64px);
  }
}/* Apply Routes — from 48 Online Application.html (.apply-routes).
   Two clearly separated audiences. The design hardcodes DL purple; --accent
   first lets a row follow the section it sits in. */.apply-routes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin: var(--sp-6) 0 0;
}@media (max-width: 860px) {
  .apply-routes {
    grid-template-columns: 1fr;
  }
}.apply-route {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(20px, 2vw, 28px);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}.apply-route__tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--accent-surface, var(--mode-dl-surface));
  border-radius: var(--radius-pill);
  background: var(--accent-surface, var(--mode-dl-surface));
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark, #5a00a8);
}/* The lead route is filled rather than tinted, so the two cards read in order. */.apply-route--primary .apply-route__tag {
  border-color: var(--accent, var(--mode-dl-color));
  background: var(--accent, var(--mode-dl-color));
  color: #fff;
}.apply-route__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.25;
}.apply-route__desc {
  margin: 0;
  font-size: var(--text-base);
  color: var(--color-body);
  line-height: var(--lh-body);
}.apply-route__actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: var(--sp-3);
}.apply-route__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border: 1.5px solid var(--accent, var(--mode-dl-color));
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--accent, var(--mode-dl-color));
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}.apply-route__btn:hover {
  border-color: var(--accent-dark, #5a00a8);
  background: var(--accent-surface, var(--mode-dl-surface));
  color: var(--accent-dark, #4a008c);
  text-decoration: none;
}.apply-route__guide {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  font-size: var(--text-base);
  color: var(--color-ink);
  text-decoration: none;
}.apply-route__guide:hover {
  color: var(--accent-dark, #4a008c);
  text-decoration: underline;
}.apply-route__guide svg {
  flex-shrink: 0;
}.apply-route__guide .apply-route__dl {
  margin-left: auto;
}/* Divider Line Below — the gap above the line is this block's bottom margin,
   the gap below is the line's own (content-section.css), so both follow
   Divider Spacing. */.apply-routes:has(+ .content-divider) {
  margin-bottom: clamp(44px, 5vw, 72px);
}.apply-routes:has(+ .content-divider--medium) {
  margin-bottom: 40px;
}.apply-routes:has(+ .content-divider--small) {
  margin-bottom: 24px;
}/* Description is rich text: its paragraphs take the block's own spacing. */.apply-route__desc p {
  margin: 0 0 var(--sp-2);
}.apply-route__desc p:last-child {
  margin-bottom: 0;
}/* Application Period Timeline — from design/02 Undergraduate.html (#apt-css and .ap3-switcher) */.apt-section {
  /* background: var(--color-surface); */
  /* padding: clamp(60px, 6vw, 100px) 0; */
  padding: 50px 0;
}.apt-heading {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  line-height: var(--lh-heading);
  text-align: center;
}.apt-subhead {
  margin: 0 auto clamp(28px, 3vw, 44px);
  font-size: var(--text-base);
  color: var(--color-muted);
  line-height: var(--lh-body);
  text-align: center;
  max-width: 100%;
}@media (min-width: 1024px){.apt-subhead{
    max-width: 750px;
  }
}/* Tabs */.ap3-switcher {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(32px, 3.5vw, 52px);
}.ap3-switcher__track {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
}.hkmu-block .ap3-switcher__btn {
  padding: 12px 26px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-muted);
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.25s ease;
}.ap3-switcher__btn:hover:not(.is-active) {
  background: var(--color-surface);
  color: var(--color-ink);
}.ap3-switcher__btn.is-active {
  background: var(--apt-accent, var(--brand-blue));
  color: #fff;
  box-shadow: 0 2px 8px rgba(20, 79, 157, 0.22);
}.ap3-tab-short {
  display: none;
}/* Stepper */.apt-tracker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto 8px;
  padding: 0 4px;
  min-height: 24px;
}.apt-tracker::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 50%;
  z-index: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--color-border);
  transform: translateY(-50%);
}.apt-fill {
  position: absolute;
  left: 18px;
  top: 50%;
  z-index: 1;
  height: 3px;
  border-radius: 3px;
  background: var(--apt-fill, linear-gradient(90deg, var(--brand-green), var(--brand-blue)));
  transform: translateY(-50%);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}.hkmu-block .apt-dot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: var(--color-white);
  border: 3px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}.apt-dot:hover {
  transform: scale(1.08);
}.apt-dot.active {
  width: 24px;
  height: 24px;
  border-color: var(--apt-accent, var(--brand-blue));
  box-shadow: 0 0 0 4px var(--apt-accent-soft, var(--color-blue-surface));
}.apt-dot.active::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--apt-accent, var(--brand-blue));
}.apt-labels {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto 36px;
  padding: 0 4px;
}.apt-label {
  width: 64px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--color-muted);
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
}.apt-label.is-active {
  color: var(--apt-accent, var(--brand-blue));
}.apt-label .apt-label-yr {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.06em;
  opacity: 0.75;
}/* Cards */.apt-stage {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
  margin-inline: calc(-1 * var(--gutter-content));
}.apt-track {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4.166vw, 80px);
  transition: transform 0.55s cubic-bezier(0.33, 0, 0.2, 1);
  will-change: transform;
}.apt-card {
  display: flex;
  align-items: stretch;
  flex: 0 0 min(1000px, calc(100vw - 48px));
  max-width: 1000px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid rgba(20, 79, 157, 0.12);
  border-radius: var(--radius-lg);
  transition: opacity 0.45s ease;
}.apt-card:not(.is-show) {
  opacity: 0.4;
  cursor: pointer;
}.apt-card:not(.is-show):hover {
  opacity: 0.65;
}.apt-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 200px;
  padding: calc(var(--sp-7) + 18px) var(--sp-6);
  background: linear-gradient(180deg, var(--apt-side-from, #f2f7fd), var(--apt-side-to, #e9f1fa));
  text-align: center;
}.apt-mon {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--apt-accent, var(--brand-blue));
}.apt-day {
  display: block;
  margin: 8px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(44px, 3vw, 60px);
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1;
}.apt-yr {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-muted);
}.apt-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-5);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}.apt-tag--open {
  background: var(--color-green-surface);
  color: var(--color-green-dark);
}.apt-tag--closing {
  background: var(--color-orange-surface);
  color: var(--color-orange-dark);
}.apt-tag--upcoming {
  background: var(--apt-accent-soft, var(--color-blue-surface));
  color: var(--apt-accent, var(--brand-blue));
}.apt-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: calc(var(--sp-7) + 18px) var(--sp-8);
}.apt-group {
  margin: 0 0 var(--sp-2);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  overflow-wrap: break-word;
  text-wrap: pretty;
}.apt-card h3 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(22px, 1.5vw + 8px, 30px);
  font-weight: 400;
  color: var(--color-ink);
  line-height: var(--lh-heading);
}.apt-card p {
  margin: 0;
  max-width: 100%;
  font-size: var(--text-sm);
  color: var(--color-body);
  line-height: var(--lh-loose);
  overflow-wrap: break-word;
  text-wrap: pretty;
}.apt-range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-5);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.apt-range svg {
  flex-shrink: 0;
  color: var(--apt-accent, var(--brand-blue));
}.apt-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-5);
  color: var(--apt-accent, var(--brand-blue));
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: gap 0.2s ease;
}.apt-cta:hover {
  gap: 12px;
  text-decoration: underline;
}.apt-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}.hkmu-block .apt-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background var(--ease-fast), border-color var(--ease-fast), transform 0.15s ease;
}.hkmu-block .apt-nav:hover:not(:disabled) {
  background: var(--apt-accent-soft, var(--color-blue-surface));
  border-color: var(--apt-accent, var(--brand-blue));
  transform: translateY(-1px);
}.apt-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}.apt-counter {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
}.apt-counter b {
  color: var(--color-ink);
}.apt-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 1000px;
  margin: var(--sp-8) auto 0;
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: var(--lh-loose);
  text-align: center;
  text-wrap: pretty;
}.apt-note svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}/* Footnote Alignment "Left" — same box as the cards, text from the icon. */.apt-note--left {
  justify-content: flex-start;
  text-align: left;
}@media (max-width: 768px) {
  /* .apt-section {
    padding: 60px 0;
  } */

  .ap3-tab-full {
    display: none;
  }

  .ap3-tab-short {
    display: inline;
  }

  .hkmu-block .ap3-switcher__btn {
    padding: 11px 22px;
    font-size: 14px;
  }

  .apt-label {
    width: 52px;
  }

  .apt-side {
    flex-basis: 150px;
    padding: var(--sp-5);
  }

  .apt-main {
    padding: var(--sp-5);
  }
}@media (max-width: 640px) {
  .ap3-switcher__track {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    border-radius: var(--radius-md);
  }

  .ap3-switcher__btn {
    width: 100%;
    text-align: center;
  }

  .apt-card {
    flex-direction: column;
  }

  .apt-side {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
    flex-basis: auto;
    padding: var(--sp-4) var(--sp-5);
  }

  .apt-day {
    margin: 0;
  }

  .apt-tag {
    margin-top: 0;
    margin-left: auto;
    align-self: center;
  }
}/* Accent — a non-blue Accent Colour remaps the palette above. Purple carries
   43 Distance Learning.html's own fill and date-side gradients. */.apt-section--accent {
  --apt-accent: var(--accent);
  --apt-accent-soft: var(--accent-surface);
  --apt-fill: var(--accent);
  --apt-side-from: var(--accent-surface);
  --apt-side-to: var(--accent-surface);
}.apt-section--accent.hkmu-accent--purple {
  --apt-fill: linear-gradient(90deg, #c100d9, var(--accent));
  --apt-side-from: #f9f4fe;
  --apt-side-to: #f3ebfb;
}/* Month Only — a vague "Early Nov" date: month and year, no day. */.apt-side--mo .apt-mon {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(26px, 2vw, 36px);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink);
}.apt-side--mo .apt-yr {
  font-size: var(--text-md);
}/* More — the toggle and the list it reveals (43's programme-specific deadlines).
   The note above a More toggle is the design's bold lead line (.htl-note__lead). */.apt-main>p:has(+ .apt-more-btn) {
  margin-bottom: 0;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.apt-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--apt-accent, var(--brand-blue));
  cursor: pointer;
}.apt-more-btn svg {
  transition: transform 0.2s ease;
}.apt-more-btn.is-open svg {
  transform: rotate(180deg);
}.apt-more {
  margin-top: var(--sp-3);
}.apt-more[hidden] {
  display: none;
}/* Rich text inside More: write the list as <ul class="htl-note__list">, a tag
   as <span class="htl-note__tag htl-note__tag--warn|closed">, a nested list as
   <ol class="htl-note__sub">. */.htl-note__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}.htl-note__list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-body);
}.htl-note__list>li+li {
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
}.htl-note__tag {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}.htl-note__tag--warn {
  background: #fff3e0;
  color: #b85217;
}.htl-note__tag--closed {
  background: #eef1f5;
  color: #626262;
}.htl-note__sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 0;
  padding-left: 20px;
  list-style: decimal;
}.htl-note__sub li {
  font-size: 14px;
  line-height: 1.5;
}/* Term Commences */.apt-commence {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--color-muted);
}.apt-tag--closed {
  background: #eef1f5;
  color: #626262;
}/* Score Conversion — from 06 Entry Requirements.html (.score-conv-list).

   .req-table is global rather than scoped: the same table appears inside
   accordion rows elsewhere in the bundle, and accordion content is a WYSIWYG
   field, so that markup is rich text rather than a nested block.

   The design wraps each table in an inline style="overflow-x:auto" and then
   has to undo it with an attribute selector at the mobile breakpoint. Here the
   wrapper is a class, so the breakpoint just changes the class. */.score-conv-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-6);
}.score-conv-heading {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  font-weight: 400;
  color: var(--color-ink);
}.score-conv-subheading {
  margin: 0 0 var(--sp-2);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.score-conv-scroll {
  overflow-x: auto;
}.req-table {
  width: 100%;
  margin: var(--sp-4) 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
}.req-table th,
.req-table td {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-loose);
}.req-table thead th {
  background: var(--accent-surface, var(--color-blue-surface));
  /* color: var(--accent, var(--brand-blue)); */
      color: #1A1A1A;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
}.req-table td {
  color: var(--color-body);
  font-size: var(--text-sm);
}.req-table td:first-child {
  width: 35%;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}/* Same treatment as the eligibility matrix: stop scrolling sideways and read
   each cell's data-label instead. *//* Phones — 06 Entry Requirements.html's .req-table mobile rules: each row a
   card, its first cell (the row's label, e.g. "Score") a tinted strip, every
   other cell its column label (data-label, e.g. 5**) small and uppercase over
   its value. Scoped to this block's wrapper: .req-table is a generic name. */@media (max-width: 680px) {
  .score-conv-list .score-conv-scroll {
    overflow: visible;
  }

  .score-conv-list .req-table {
    display: block;
    width: 100%;
    font-size: 14px;
  }

  .score-conv-list .req-table thead {
    display: none;
  }

  .score-conv-list .req-table tbody {
    display: block;
  }

  .score-conv-list .req-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: var(--sp-3);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
  }

  .score-conv-list .req-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .score-conv-list .req-table tbody td {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-top: 1px solid var(--color-border);
    background: none;
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-body);
    text-align: left;
  }

  .score-conv-list .req-table tbody td:first-child {
    width: 100%;
    border-top: none;
    background: var(--accent-surface, var(--color-blue-surface));
    font-size: 13px;
    font-weight: var(--fw-bold);
    color: var(--accent, var(--brand-blue));
  }

  .score-conv-list .req-table tbody td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
}/* 07 Student Registration *//* Section shell — from 07 Student Registration.html (.reg-section).
   Shared by Registration Timeline, Check List, Support Cards and Department
   Card, so it lives on its own rather than in any one of them. */.reg-section {
  margin-top: clamp(48px, 5vw, 76px);
  scroll-margin-top: 120px;
}.reg-section__title {
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.reg-section__sub {
  margin-bottom: clamp(24px, 2.6vw, 38px);
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--color-muted);
}.reg-section__sub p {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--color-muted);
}.reg-section__sub p:last-child {
  margin-bottom: 0;
}.reg-section__sub strong {
  font-weight: var(--fw-bold);
  /* color: var(--color-ink); */
}/* Shared pill button — from admission-content-styles.css (.quick-link-btn). */.quick-link-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  height: 48px;
  padding: 0 var(--sp-6);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--ease-fast), background var(--ease-fast),
    color var(--ease-fast), box-shadow var(--ease-fast);
}.quick-link-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--accent, var(--brand-blue));
}.quick-link-btn:hover {
  border-color: var(--accent, var(--brand-blue));
  background: var(--accent-surface, var(--color-blue-surface));
  box-shadow: var(--shadow-sm);
  color: var(--accent, var(--brand-blue));
  text-decoration: none;
}.quick-link-btn:active {
  transform: translateY(1px);
}.quick-link-btn:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}@media (max-width: 768px) {
  .quick-link-btn {
    height: 44px;
    padding: 0 var(--sp-4);
    font-size: var(--text-xs);
    white-space: normal;
  }
}/* Registration Rounds — from 07 Student Registration.html (.flow-card).
   The design hardcodes UG blue on the active tab; --accent first lets the card
   follow whichever accent wrapper it sits in. */.flow-card {
  overflow: hidden;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}.proc-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}.proc-tab {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2.2vw, 36px);
  border: none;
  border-bottom: 1.5px solid var(--color-border);
  background: var(--color-white);
  text-align: left;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast);
}.proc-tab + .proc-tab {
  border-left: 1.5px solid var(--color-border);
}.proc-tab__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}.proc-tab__title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.proc-tab.is-active {
  border-bottom-color: transparent;
  background: linear-gradient(135deg, #054AD6 0%, #1A7BFF 100%);
  /* background: linear-gradient(135deg, var(--accent, #054AD6) 0%, var(--accent-dark, #0d3870) 100%); */
}.proc-tab.is-active .proc-tab__eyebrow {
  color: rgba(255, 255, 255, 0.6);
}.proc-tab.is-active .proc-tab__title {
  color: var(--color-white);
}.proc-tab:not(.is-active):hover {
  background: var(--color-surface);
}.proc-tab:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: -3px;
}.tab-panel {
  display: none;
}.tab-panel.is-active {
  display: block;
}.round-body {
  padding: clamp(26px, 2.8vw, 40px) clamp(24px, 2.5vw, 40px);
}.date-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: clamp(24px, 2.6vw, 36px);
}.date-card {
  padding: var(--sp-5) var(--sp-6);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}.date-card--accent {
  border-color: rgba(20, 79, 157, 0.25);
  background: var(--accent-surface, var(--color-blue-surface));
}.date-card__label {
  margin-bottom: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, var(--brand-blue));
}.date-card__value {
  font-size: var(--text-lg);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.date-card__note {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: var(--color-muted);
}.date-card__note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}.round-intro p {
  max-width: 88ch;
  margin-bottom: var(--sp-4);
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}.round-intro p:last-child {
  margin-bottom: 0;
}.remark-grid .remark-card__body a,
.date-card__note a,
.round-intro a{
  color: var(--brand-blue);
}.round-intro .fineprint {
  font-size: var(--text-sm);
  color: var(--color-muted);
}@media (max-width: 768px) {
  .proc-tabs {
    grid-template-columns: 1fr;
  }

  .proc-tab + .proc-tab {
    border-top: 1.5px solid var(--color-border);
    border-left: none;
  }

  .date-grid {
    grid-template-columns: 1fr;
  }
}/* Jump Cards — from 07 Student Registration.html (.jump-grid).
   The design hardcodes UG blue on the icon tile; --accent first lets the row
   follow whichever accent wrapper it sits in. */.jump-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: clamp(28px, 3vw, 44px);
}.jump-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  transition: box-shadow var(--ease-base), transform var(--ease-base),
    border-color var(--ease-base);
}.jump-card:hover {
  border-color: var(--accent, var(--brand-blue));
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  text-decoration: none;
}.jump-card:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}.jump-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-surface, var(--color-blue-surface));
  color: var(--accent, var(--brand-blue));
}.jump-card__icon svg {
  width: 20px;
  height: 20px;
}.jump-card__title {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.jump-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--accent, var(--brand-blue));
}.jump-card__more svg {
  flex-shrink: 0;
}@media (max-width: 1024px) {
  .jump-grid {
    grid-template-columns: 1fr 1fr;
  }
}@media (max-width: 560px) {
  .jump-grid {
    grid-template-columns: 1fr;
  }
}/* Registration Timeline — from 07 Student Registration.html (.timeline).
   The section shell and pill button live in reg-section.css. */.timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}.tl-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(16px, 1.8vw, 28px);
}.tl-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}.tl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--accent-surface, var(--color-blue-surface));
  color: var(--accent, var(--brand-blue));
}.tl-icon svg {
  width: 24px;
  height: 24px;
}.tl-line {
  flex: 1;
  width: 0;
  min-height: 24px;
  margin: var(--sp-2) 0;
  border-left: 2px dotted var(--color-disabled);
}.tl-content {
  min-width: 0;
  padding-bottom: clamp(26px, 2.8vw, 40px);
}.tl-step:last-child .tl-content {
  padding-bottom: 0;
}.tl-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}.tl-num {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--color-disabled);
}.tl-title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.tl-title a,
.tl-desc a{
  color: var(--brand-blue);
}.tl-cols {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: stretch;
}.tl-desc {
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
}.tl-desc ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-left: 1.3em;
  list-style: disc;
}.tl-desc ul ul {
  margin-top: var(--sp-2);
  list-style: circle;
}.tl-desc a {
  text-decoration: underline;
  text-underline-offset: 2px;
}.tl-desc strong {
  color: var(--color-ink);
}.tl-desc .tip {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
}.tl-desc code {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--brand-ice);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  color: var(--color-ink);
}.deadline-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border: 1.5px solid rgba(200, 101, 32, 0.35);
  border-radius: var(--radius-pill);
  background: var(--color-orange-surface);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-orange-dark);
}/* The screenshot is a button so the lightbox is reachable from the keyboard;
   it has to shed the browser's button chrome to read as the design's card. */.shot-img {
  display: block;
  max-width: 520px;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  transition: box-shadow var(--ease-base), transform var(--ease-base);
}.shot-img:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}.shot-img:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}.shot-img img {
  display: block;
  width: 100%;
  height: auto;
}.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}.lightbox-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
}.lightbox-box img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
}.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-circle);
  background: rgba(0, 0, 0, 0.65);
  color: var(--color-white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ease-fast);
}.lightbox-close:hover {
  background: rgba(0, 0, 0, 0.85);
}@media (max-width: 600px) {
  .deadline-pill {
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-md);
    text-align: center;
  }
}@media (max-width: 768px) {
  .tl-step {
    grid-template-columns: 44px 1fr;
  }

  .tl-icon {
    width: 44px;
    height: 44px;
  }
}/* Warning Box — from 07 Student Registration.html (.warn-box).
   Always orange: it marks a consequence, not the section's study mode, so it
   deliberately does not follow --accent. */.warn-box {
  margin-top: clamp(26px, 2.8vw, 40px);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid rgba(200, 101, 32, 0.25);
  border-left: 4px solid var(--brand-orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-orange-surface);
}.warn-box p { 
  font-size: var(--text-base); 
  color: var(--color-ink); 
  line-height: var(--lh-body); 
  margin: 0; 
}.warn-box__label {
  margin-bottom: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* color: var(--color-orange-dark); */
}.warn-box__body p {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-ink);
}.warn-box__body p:last-child {
  margin-bottom: 0;
}/* The Tailwind reset strips list markers; the design's lists keep them
   (49 Payment Methods' numbered Remarks). */.warn-box__body ol {
  list-style: decimal;
}.warn-box__body ul {
  list-style: disc;
}.warn-box__body ul,
.warn-box__body ol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0 var(--sp-5);
}.warn-box__body li {
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-ink);
}.warn-box__body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}.warn-box__body strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}/* Footnote under the box — 12 Government Subsidies puts the text an asterisk
   points to here, in small muted italics. */.warn-box__footnote {
  margin-top: var(--sp-4);
}.warn-box__footnote p {
  margin: 0;
  font-size: var(--text-xs);
  font-style: italic;
  line-height: var(--lh-body);
  color: var(--color-muted);
}/* Remark style — 25 Fees & Payment Methods (.fees-remark). No outline, a
   cream ground, a wider gap above, and the design's unified note typography
   (<style id="note-box-typo-unified">): 14px label, body-colour copy. */.warn-box--remark {
  margin-top: clamp(32px, 4vw, 48px);
  border: 0;
  border-left: 4px solid var(--brand-orange);
  background: #fdf6ee;
}.warn-box--remark .warn-box__label {
  font-size: 14px;
  line-height: 1.4;
  color: #c86520;
}.warn-box--remark .warn-box__body p,
.warn-box--remark .warn-box__body li {
  font-size: var(--text-base);
  color: var(--color-body);
}/* Remark Grid — from 07 Student Registration.html (.remark-grid).
   The cards reuse .remark-card from remark-card.css; only the grid and the
   list styling inside a card belong here. */.remark-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: clamp(26px, 2.8vw, 40px);
}.remark-grid .remark-card__title {
  margin-bottom: var(--sp-4);
  font-size: var(--text-lg);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.remark-grid .remark-card__body ul,
.remark-grid .remark-card__body ol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-left: 1.3em;
  list-style: disc;
}.remark-grid .remark-card__body li {
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--color-body);
}.remark-grid .remark-card__body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}.remark-grid .remark-card__body strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}/* Divider Line Below — the gap above the line is this block's bottom margin,
   the gap below is the line's own (content-section.css), so both follow
   Divider Spacing. */.remark-grid:has(+ .content-divider) {
  margin-bottom: clamp(44px, 5vw, 72px);
}.remark-grid:has(+ .content-divider--medium) {
  margin-bottom: 40px;
}.remark-grid:has(+ .content-divider--small) {
  margin-bottom: 24px;
}@media (max-width: 768px) {
  .remark-grid {
    grid-template-columns: 1fr;
  }
}/* Card Style "Top rule" — 40 Scholarships for RPG Students.html (.fa-grid,
   .fa-card): a 3px accent rule on top, 1px border, larger title. In the
   design the grid closes the section above it, so that section takes its
   small margin and the grid carries the section gap. */.remark-grid--top-rule {
  gap: clamp(12px, 1.5vw, 16px);
  margin: var(--sp-4) 0 clamp(44px, 5vw, 72px);
}.remark-grid--top-rule .remark-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--accent);
  overflow-wrap: anywhere;
  word-wrap: break-word;
}.remark-grid--top-rule .remark-card__title {
  margin-bottom: var(--sp-3);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  text-wrap: balance;
}.remark-grid--top-rule .remark-card__body p {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-body);
}.remark-grid--top-rule .remark-card__body p:last-child {
  margin-bottom: 0;
}.remark-grid--top-rule .remark-card__body a {
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}.remark-grid--top-rule .remark-card__body a:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}@media (max-width: 900px) {
  .remark-grid--top-rule {
    grid-template-columns: 1fr;
  }
}/* Date Tiles — from 40 Scholarships for RPG Students.html
   (.pgs-card__timeline). Values are the design's; the tint and label colour
   follow the accent. */.date-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.5vw, 16px);
  margin: var(--sp-5) 0 clamp(44px, 5vw, 72px);
}/* In the design the tiles sit inside the section above them, so that section
   ends without its bottom margin and the tiles carry it instead. */.content-section:has(+ .date-tiles) {
  margin-bottom: 0;
}.date-tiles:first-child {
  margin-top: 0;
}/* Divider Line Below — the gap above the line is this block's bottom margin,
   the gap below is the line's own (content-section.css), so both follow
   Divider Spacing. */.date-tiles:has(+ .content-divider) {
  margin-bottom: clamp(44px, 5vw, 72px);
}.date-tiles:has(+ .content-divider--medium) {
  margin-bottom: 40px;
}.date-tiles:has(+ .content-divider--small) {
  margin-bottom: 24px;
}.date-tiles .pgs-card__timeline-item {
  min-width: 0;
  padding: clamp(14px, 1.8vw, 20px);
  border-radius: var(--radius-md);
  background: var(--accent-surface);
}.date-tiles dt {
  margin-bottom: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
}.date-tiles dd {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-body);
}.date-tiles dd p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}.date-tiles dd strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}@media (max-width: 900px) {
  .date-tiles {
    grid-template-columns: 1fr;
  }
}/* Document components — rich text pasted into an Accordion with Item Style
   "Sections", from 55 Complete your Qualification Verification.html. Scoped
   to that style so tables already pasted elsewhere keep their own look.
   Values are the design's; its DL purples read the accent tokens:
   #4A008C → --accent-dark, #7200D5 → --accent, #F3E8FC → --accent-surface.

   Write them in the item's Text tab:
     numbered table    <div class="elig-table-wrap"><table class="elig-table no-zebra">
                       … <td class="num-cell">1</td>
     programme list    <ul class="prog-list"><li><span class="prog-code">CEDU</span>Original document of …</li></ul>
     opening hours     use the item's Info Box fields, not HTML
     venue table       <div class="venue-table-wrap"><table class="venue-table"> with td.v-date / td.v-hours /
                       td.v-address (<span class="v-address__sub">), tr.is-special, <span class="v-badge">
     warning box       <div class="warn-box"><div class="warn-box__label">…</div><p>…</p></div> */.acc-item__content {
  --doc-deep: var(--accent-dark, #4a008c);
  --doc-accent: var(--accent, #7200d5);
  --doc-soft: var(--accent-surface, #f3e8fc);
}/* Numbered table */.accordion--sections .elig-table-wrap {
  overflow-x: auto;
  margin: var(--sp-5) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}.accordion--sections .elig-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
  font-size: var(--text-base);
}.accordion--sections .elig-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-body);
  text-align: left;
  vertical-align: top;
}.accordion--sections .elig-table tbody tr:last-child>* {
  border-bottom: none;
}.accordion--sections .elig-table .num-cell,
.accordion--sections .elig-table.no-zebra tbody tr:nth-child(even)>.num-cell {
  width: 56px;
  background: var(--doc-deep);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-align: center;
}.accordion--sections .elig-table.no-zebra tbody tr:nth-child(even)>td:not(.num-cell) {
  background: #fff;
}.accordion--sections .elig-table td a {
  color: var(--doc-accent);
}.accordion--sections .elig-table td p {
  margin: 0 0 var(--sp-2);
  font-size: var(--text-base);
  line-height: var(--lh-body);
}.accordion--sections .elig-table td p:last-child {
  margin-bottom: 0;
}.accordion--sections .elig-table td ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  list-style: disc;
}.accordion--sections .elig-table td li {
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-body);
}.accordion--sections .elig-table td strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}/* Programme list — write it as <ul class="prog-list"><li><span class="prog-code">CEDU</span>…</li></ul>.
   The editor keeps this on save; the design's <dl> with <div>s does not survive
   the Visual tab. The bullet, bold code and " — " are the design's. */.accordion--sections .prog-list {
  margin: var(--sp-3) 0 0;
  padding-left: 1.4em;
  list-style: disc;
}.accordion--sections .elig-table td .prog-list {
  display: block;
  margin: var(--sp-3) 0 0;
}.accordion--sections .prog-list li,
.accordion--sections .elig-table td .prog-list li {
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: var(--color-body);
}.accordion--sections .prog-list li:last-child {
  margin-bottom: 0;
}.accordion--sections .prog-list .prog-code {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.accordion--sections .prog-list .prog-code::after {
  content: " — ";
  font-weight: var(--fw-regular);
  color: var(--color-body);
}/* The design's own <dl> markup, kept for content pasted before prog-list. */.accordion--sections .prog-grid--plain {
  display: block;
  margin: var(--sp-3) 0 0;
  padding-left: 1.4em;
}.accordion--sections .prog-grid--plain .prog-grid__item {
  display: list-item;
  margin-bottom: var(--sp-3);
  list-style: disc;
}.accordion--sections .prog-grid--plain .prog-grid__item:last-child {
  margin-bottom: 0;
}.accordion--sections .prog-grid--plain dt {
  display: inline;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.accordion--sections .prog-grid--plain dt::after {
  content: " — ";
  font-weight: var(--fw-regular);
  color: var(--color-body);
}.accordion--sections .prog-grid--plain dd {
  display: inline;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-body);
}/* Info Box — the item's Info Box fields render this (with an inline icon) in
   either Item Style. The --clock mask is for a row pasted as HTML, where rich
   text has dropped the <svg>. */.acc-item__content .info-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}.acc-item__content .info-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-xs);
}.acc-item__content .info-item {
  display: flex;
  flex: 1 1 260px;
  align-items: flex-start;
  gap: var(--sp-4);
  min-width: 0;
}.acc-item__content .info-row__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--doc-soft);
  color: var(--doc-accent);
  font-size: 0;
}.acc-item__content .info-row__icon svg {
  width: 22px;
  height: 22px;
}.acc-item__content .info-row__icon--clock::before {
  content: "";
  width: 22px;
  height: 22px;
  background: var(--doc-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
}.acc-item__content .info-row__body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}.acc-item__content .info-row__body p {
  margin: 0 0 4px;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-body);
}.acc-item__content .info-row__body p:last-child {
  margin-bottom: 0;
}.acc-item__content .info-row__body .info-row__label {
  margin-bottom: 6px;
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--doc-accent);
}/* Venue table */.accordion--sections .venue-table-wrap {
  overflow-x: auto;
  margin: var(--sp-5) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}.accordion--sections .venue-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
  font-size: var(--text-sm);
}.accordion--sections .venue-table thead th {
  padding: var(--sp-3) var(--sp-4);
  background: var(--doc-deep);
  font-size: 14px;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: #fff;
}.accordion--sections .venue-table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-body);
  vertical-align: middle;
}.accordion--sections .venue-table tbody tr:last-child td {
  border-bottom: none;
}.accordion--sections .venue-table .v-date {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  white-space: nowrap;
}.accordion--sections .venue-table .v-hours {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}.accordion--sections .venue-table .v-address__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--text-base);
  color: var(--color-muted);
}.accordion--sections .venue-table .v-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--doc-deep);
  font-size: 10px;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}/* Warning box: the design's lighter version of the global .warn-box */.accordion--sections .acc-item__content .warn-box {
  margin: var(--sp-5) 0;
  padding: var(--sp-5) var(--sp-6);
  border: 0;
  border-left: 4px solid #e9873f;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: #fef6e9;
}.accordion--sections .acc-item__content .warn-box__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a4a00;
}.accordion--sections .acc-item__content .warn-box p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-body);
}@media (max-width: 720px) {
  .accordion--sections .venue-table thead {
    display: none;
  }

  .accordion--sections .venue-table,
  .accordion--sections .venue-table tbody,
  .accordion--sections .venue-table tr,
  .accordion--sections .venue-table td {
    display: block;
    width: 100%;
  }

  .accordion--sections .venue-table tr {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .accordion--sections .venue-table tbody td {
    padding: var(--sp-2) var(--sp-4);
    border: none;
  }

  .accordion--sections .venue-table .v-hours,
  .accordion--sections .venue-table .v-date {
    white-space: normal;
  }
}/* Check List — from 07 Student Registration.html (.check-card).

   The list comes from a rich text field, so the markup is whatever the editor
   wrote: a plain <ul> of <li>. The tick is drawn by ::before rather than being
   an inline <svg> per item, which keeps the editing surface a normal list.

   Selectors carry the .check-card ancestor deliberately — editor-style.css
   loads after app.css and puts disc bullets back on `.editor-styles-wrapper
   ul`, so a single class would lose the tie inside the block editor. */.check-card {
  margin-bottom: var(--sp-6);
  padding: clamp(24px, 2.6vw, 40px) clamp(24px, 2.8vw, 44px);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}.check-card .check-list ul,
.check-card .check-list ol {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}.check-card .check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-4) 0;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-body);
  text-align: left;
}.check-card .check-list li + li {
  border-top: 1px solid var(--color-border);
}/* Masked rather than a background image, so the tick takes a colour token
   instead of baking one into the data URI. */.check-card .check-list li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background-color: var(--check-tick, var(--color-green-dark));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8'/%3E%3Cpath d='M6.5 10.2l2.3 2.3 4.7-4.7'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='8'/%3E%3Cpath d='M6.5 10.2l2.3 2.3 4.7-4.7'/%3E%3C/svg%3E") no-repeat center / contain;
}/* A stray paragraph — an intro line above the list, say — reads as copy, not
   as a checklist row, so it keeps its own rhythm and gets no tick. */.check-card .check-list p {
  margin: 0 0 var(--sp-4);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
}.check-card .check-list p:last-child {
  margin-bottom: 0;
}.check-card .check-list a {
  text-decoration: underline;
  text-underline-offset: 2px;
}.check-card .check-list strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}/* Support Cards — from 07 Student Registration.html (.support-grid). */.support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}.support-card {
  padding: var(--sp-6);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}.support-card--tint {
  border-color: rgba(20, 79, 157, 0.25);
  background: var(--accent-surface, var(--color-blue-surface));
}.support-card__title {
  margin-bottom: var(--sp-3);
  font-size: var(--text-lg);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.support-card__body p {
  margin: 0 0 var(--sp-4);
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--color-body);
}.support-card__body p:last-child {
  margin-bottom: 0;
}.support-card__body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}.support-card .quick-link-btn {
  height: 40px;
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
}@media (max-width: 768px) {
  .support-grid {
    grid-template-columns: 1fr;
  }
}/* Department Card — from 07 Student Registration.html (.dept-card).
   The design hardcodes UG blue on the accent rule and the icon tiles;
   --accent first lets the card follow the section it sits in. */.dept-card {
  display: flex;
  flex-direction: column;
  max-width: 680px;
  overflow: hidden;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--ease-base), transform var(--ease-base);
}.dept-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}.dept-card__accent {
  height: 4px;
  background: var(--accent, var(--brand-blue));
}.dept-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(20px, 2vw, 32px);
}.dept-card__bar {
  width: 48px;
  height: 3px;
  margin-bottom: var(--sp-5);
  border-radius: 2px;
  background: var(--accent, var(--brand-blue));
}.dept-card__name {
  margin-bottom: var(--sp-5);
  font-size: var(--text-lg);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.dept-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}.dept-card__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}.dept-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--accent-surface, var(--color-blue-surface));
  color: var(--accent, var(--brand-blue));
}.dept-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}.dept-card__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
}.dept-card__value {
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: var(--color-ink);
  word-break: break-word;
}.dept-card__value a {
  color: var(--color-body);
  text-decoration: none;
}.dept-card__value a:hover {
  text-decoration: underline;
}.dept-card__divider {
  height: 1px;
  margin: var(--sp-3) 0;
  background: var(--color-border);
}.dept-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
}.btn-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast),
    color var(--ease-fast);
}.btn-card:hover {
  border-color: var(--accent, var(--brand-blue));
  background: var(--accent-surface, var(--color-blue-surface));
  color: var(--accent, var(--brand-blue));
  text-decoration: none;
}.btn-card svg {
  flex-shrink: 0;
}@media (max-width: 768px) {
  .dept-card__actions {
    flex-direction: column;
  }

  .dept-card__actions .btn-card {
    width: 100%;
  }
}/* Title Style "Sub-heading" — 34 RPG Programme Listing's Enquiries block:
   a 22px bold h3 (.doc-heading) over a plain intro line, set straight under
   the divider that ends the section above, so no top margin of its own. */.reg-section--sub {
  margin-top: 0;
}.reg-section--sub .doc-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.reg-section--sub .reg-section__sub,
.reg-section--sub .reg-section__sub p {
  margin-bottom: var(--sp-5);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
}.reg-section--sub .reg-section__sub p:last-child {
  margin-bottom: 0;
}/* Card Label, Card Width "Narrow" — 41 Support to Students with Special
   Needs.html (.contact-grid): an accent label tucked under the name, and a
   480px card. */.dept-card--narrow {
  max-width: 480px;
}.dept-card__name.has-label {
  margin-bottom: var(--sp-1);
}.dept-card__eyebrow {
  margin: 0 0 var(--sp-5);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent, var(--brand-blue));
}/* Margin Top — a fixed gap above the block, overriding reg-section's fluid
   margin and the Sub-heading style's 0. */.reg-section.reg-section--mt-0 {
  margin-top: 0;
}.reg-section.reg-section--mt-20 {
  margin-top: 20px;
}.reg-section.reg-section--mt-48 {
  margin-top: 48px;
}.reg-section.reg-section--mt-76 {
  margin-top: 76px;
}/* School Links — from 34 RPG Programme Listing.html (.cta-row / .school-btn).
   .cta-row.school-links outranks Content Section's flex .cta-row. */.cta-row.school-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
}@media (max-width: 640px) {
  .cta-row.school-links {
    grid-template-columns: 1fr;
  }
}.school-btn {
  --school-color: var(--accent, var(--brand-blue));
  --school-dark: var(--accent-dark, var(--color-blue-dark));
  --school-surface: var(--accent-surface, var(--color-blue-surface));
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-decoration: none;
  transition: all var(--ease-fast);
}.school-btn--ass { --school-color: #d85c00; --school-dark: #b34700; --school-surface: #fff1e4; }.school-btn--ba  { --school-color: #6200b8; --school-dark: #4c008f; --school-surface: #f3edff; }.school-btn--el  { --school-color: #448d00; --school-dark: #366f00; --school-surface: #eaf5dc; }.school-btn--nhs { --school-color: #d02e6f; --school-dark: #a62256; --school-surface: #fcebf2; }.school-btn--st  { --school-color: #144f9d; --school-dark: #0d3870; --school-surface: #ebf2fa; }.school-btn:hover {
  border-color: var(--school-color);
  background: var(--school-surface);
  box-shadow: var(--shadow-sm);
  color: var(--school-dark);
  text-decoration: none;
  transform: translateY(-1px);
}.school-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--school-surface);
  color: var(--school-dark);
  transition: background var(--ease-fast), color var(--ease-fast);
}.school-btn:hover .school-btn__icon {
  background: var(--school-color);
  color: #fff;
}.school-btn__arrow {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--color-disabled);
  transition: transform var(--ease-fast), color var(--ease-fast);
}.school-btn:hover .school-btn__arrow {
  color: var(--school-dark);
  transform: translateX(3px);
}/* School Cards — from 35 Area of Research Interest.html (.visual-grid of
   .vis-card). Section padding is the shared .dir-section (link-cards.css).
   Scoped to .school-cards: the class names are generic and 11 Student
   Finance's design styles a different .vis-card. */.school-cards .section-head {
  margin-bottom: clamp(40px, 4.5vw, 64px);
  text-align: center;
}.school-cards .section-title {
  margin-bottom: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw + 8px, 52px);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.school-cards .visual-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}.school-cards .vis-card {
  --sc: var(--accent, #d85c00);
  --sc-dark: var(--accent-dark, #bb5000);
  --sc-surface: var(--accent-surface, #fbeee2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--sc);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 1px 4px rgba(122, 50, 0, 0.08);
  transition: box-shadow var(--ease-base), transform var(--ease-base);
}.school-cards .vis-card:hover {
  box-shadow: 0 6px 24px rgba(122, 50, 0, 0.15);
  transform: translateY(-4px);
}.school-cards .vis-card--ass    { --sc: #d85c00; --sc-dark: #b34700; --sc-surface: #fff1e4; }.school-cards .vis-card--ba     { --sc: #6200b8; --sc-dark: #4c008f; --sc-surface: #f3edff; }.school-cards .vis-card--el     { --sc: #448d00; --sc-dark: #366f00; --sc-surface: #eaf5dc; }.school-cards .vis-card--nhs    { --sc: #d02e6f; --sc-dark: #a62256; --sc-surface: #fcebf2; }.school-cards .vis-card--st     { --sc: #144f9d; --sc-dark: #0d3870; --sc-surface: #ebf2fa; }.school-cards .vis-card--lipace { --sc: #00786b; --sc-dark: #005c52; --sc-surface: #e4f3f1; }.school-cards .vis-card__img {
  position: relative;
  height: clamp(150px, 13vw, 200px);
  overflow: hidden;
}.school-cards .vis-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}.school-cards .vis-card__mode-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  background: var(--sc);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: #fff;
}.school-cards .vis-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}.school-cards .vis-card__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}/* The design sets 14px inline on every description. */.school-cards .vis-card__desc {
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--color-muted);
  text-wrap: pretty;
}.school-cards .vis-card__footer {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}.school-cards .btn-goto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--sc);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease-fast);
}.school-cards .btn-goto:hover {
  background-color: var(--sc);
  background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
  color: #fff;
  text-decoration: none;
}.school-cards .btn-goto:active {
  transform: translateY(1px);
}.school-cards .btn-goto:focus-visible {
  outline: 3px solid var(--sc-dark);
  outline-offset: 2px;
}.school-cards .btn-goto__arrow {
  flex: none;
}@media (max-width: 1024px) {
  .school-cards .visual-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}@media (max-width: 680px) {
  .school-cards .visual-grid {
    grid-template-columns: 1fr;
  }
}/* School page — single-school.php, from 36 School of Arts and Social
   Sciences.html. Scoped to .school-page: .content-section, .data-table,
   .cta-btn and .content-divider are also theme-wide classes with other
   values. The design's inline title sizes (32px sections, 24px area names)
   and #BB5000 table header are folded in here. */.school-page {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-body);
}.school-page .page-body {
  padding-top: 60px;
  padding-bottom: 80px;
}.school-page .content-section {
  margin-bottom: clamp(44px, 5vw, 72px);
}.school-page .content-section:last-child {
  margin-bottom: 0;
}.school-page .content-section__title {
  margin-bottom: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.school-page .content-divider {
  height: 1px;
  margin: 0 0 clamp(44px, 5vw, 72px);
  border: none;
  background: var(--color-border);
}/* Strategic Research Areas */.school-page .sra-layout__text .content-section__title {
  margin-bottom: 0;
}.school-page .sra-layout__text > p {
  max-width: 1040px;
  margin-top: var(--sp-4);
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}.school-page .sra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: var(--sp-6);
}.school-page .sra-item {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 2.4vw, 40px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition: box-shadow var(--ease-base), transform var(--ease-base);
}.school-page .sra-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #d85c00;
}.school-page .sra-item:hover {
  box-shadow: 0 6px 24px rgba(122, 50, 0, 0.15);
  transform: translateY(-3px);
}.school-page .sra-item__num {
  display: block;
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: clamp(44px, 4vw + 8px, 68px);
  line-height: 1;
  color: #d85c00;
  opacity: 0.35;
}.school-page .sra-item__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #bb5000;
}.school-page .sra-item__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-regular);
  line-height: 1.25;
  color: var(--color-ink);
}.school-page .contact-note {
  width: 100%;
  margin-top: 24px;
  font-size: var(--text-base);
  line-height: 1.7;
  color: #1b2733;
  text-wrap: pretty;
}.school-page .contact-note p {
  margin: 0;
}.school-page .contact-note a {
  color: #d85c00;
  text-decoration: none;
}.school-page .contact-note a:hover {
  color: #bb5000;
  text-decoration: underline;
}/* The design's assets/contact-link-neutral.css: phone and email values are
   neutral grey, not the accent. Applied here only; the design applies it to
   every page. */.school-page a[href^="tel:"]:not([class]),
.school-page a[href^="mailto:"]:not([class]),
.school-page a[href^="tel:"]:not([class]):hover,
.school-page a[href^="mailto:"]:not([class]):hover {
  color: #333;
}/* Before You Apply */.school-page .remark-note-lead {
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--color-body);
}.school-page .remark-note-lead p {
  margin-bottom: var(--sp-4);
}.school-page .remark-note-lead p:last-child {
  margin-bottom: var(--sp-5);
}.school-page .remark-note-lead__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}.school-page .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: 0 1px 4px rgba(122, 50, 0, 0.08);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-decoration: none;
  transition: all var(--ease-fast);
}.school-page .cta-btn:hover {
  border-color: #bb5000;
  background: #fdede1;
  box-shadow: 0 2px 10px rgba(122, 50, 0, 0.1);
  color: #bb5000;
  text-decoration: none;
  transform: translateY(-1px);
}.school-page .cta-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: #fdede1;
  color: #bb5000;
}.school-page .cta-btn:hover .cta-btn__icon {
  background: #bb5000;
  color: #fff;
}.school-page .cta-btn__label {
  color: #1a1a1a;
  font-style: normal;
  text-decoration: none;
}.school-page .cta-btn:hover .cta-btn__label {
  color: #bb5000;
}.school-page .cta-btn__arrow {
  flex-shrink: 0;
  color: var(--color-disabled);
  transition: transform var(--ease-fast);
}.school-page .cta-btn:hover .cta-btn__arrow {
  color: #bb5000;
  transform: translateX(3px);
}.school-page .remark-note {
  max-width: 1040px;
  padding: var(--sp-6) var(--sp-7);
  border: 1px solid rgba(216, 92, 0, 0.2);
  border-left: 4px solid #d85c00;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: #fbeee2;
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
}.school-page .remark-note p {
  margin-bottom: var(--sp-4);
}.school-page .remark-note p:last-child {
  margin-bottom: 0;
}.school-page .remark-note strong {
  color: #bb5000;
}.school-page .remark-note a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}/* Staff & Research Interests. The table is pasted HTML, so it is styled by
   element under .staff-table: the design's classes (staff-name, staff-quals,
   interest-list) work, and so does a plain table — a <strong> name in the
   first cell, a <ul> of interests in the second. */.school-page .staff-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
}.school-page .staff-head__text {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 1040px;
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}/* Several paragraphs make .staff-head__text a <div>; space them as the design's p. */.school-page div.staff-head__text p {
  margin: 0 0 var(--sp-4);
}.school-page div.staff-head__text p:last-child {
  margin-bottom: 0;
}.school-page .sra-layout__text > p a,
.school-page .staff-head__text a {
  color: #d85c00;
}.school-page .staff-search {
  position: relative;
  flex: 0 0 auto;
  width: min(320px, 100%);
}.school-page .staff-search__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--color-muted);
  pointer-events: none;
  transform: translateY(-50%);
}.school-page .staff-search__input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  background: var(--color-white);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}.school-page .staff-search__input::-moz-placeholder {
  color: var(--color-muted);
}.school-page .staff-search__input::placeholder {
  color: var(--color-muted);
}.school-page .staff-search__input:focus {
  border-color: #bb5000;
  box-shadow: 0 0 0 3px rgba(187, 80, 0, 0.14);
}.school-page .data-table-wrap {
  overflow-x: auto;
  max-height: none;
  margin: var(--sp-6) 0 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(122, 50, 0, 0.08);
}.school-page .staff-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-body);
}.school-page .staff-table thead th {
  padding: 14px 18px;
  background: #bb5000;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-align: left;
  vertical-align: middle;
  color: #fff;
}.school-page .staff-table thead th:first-child {
  width: 38%;
}.school-page .staff-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
  line-height: 1.5;
  vertical-align: top;
}.school-page .staff-table tbody tr:last-child td {
  border-bottom: none;
}.school-page .staff-table tbody tr:nth-child(even) {
  background: #f6f6f6;
}.school-page .staff-table tbody tr:hover {
  background: #fdf6ef;
}.school-page .staff-name,
.school-page .staff-table td:first-child strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--color-ink);
}/* A plain pasted table: the first cell's loose text is the qualifications
   line, set like .staff-quals under a <strong> name; the <br> between them
   is not needed once the name is a block. */.school-page .staff-table tbody td:first-child {
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-muted);
}.school-page .staff-table td:first-child strong + br {
  display: none;
}.school-page .staff-table tr[hidden] {
  display: none;
}.school-page .staff-quals {
  display: block;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--color-muted);
}.school-page .interest-list,
.school-page .staff-table td ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}.school-page .interest-list li,
.school-page .staff-table td li {
  position: relative;
  padding-left: 18px;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-body);
}.school-page .interest-list li::before,
.school-page .staff-table td li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d85c00;
}.school-page .staff-noresult {
  padding: 20px 14px;
  font-size: var(--text-sm);
  color: var(--color-muted);
}.school-page .staff-noresult[hidden] {
  display: none;
}.school-page .table-note {
  margin-top: var(--sp-4);
  font-size: var(--text-body-xs);
  line-height: 1.6;
  color: var(--color-muted);
}@media (max-width: 768px) {
  .school-page .sra-grid {
    grid-template-columns: 1fr;
  }

  .school-page .page-body {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .school-page .staff-table thead th,
  .school-page .staff-table tbody td {
    padding: 12px;
    font-size: var(--text-body-xs);
  }

  .school-page .staff-head {
    gap: 14px;
  }

  .school-page .staff-search {
    width: 100%;
  }
}/* Link Cards — from 11 Student Finance.html (.dir-section > .text-grid).
   A full width section: it brings its own .hkmu-container gutter, so it is not
   meant to sit inside the sidebar layout's content column. */.dir-section {
  padding: clamp(60px, 6vw, 100px) 0;
}.dir-section--alt {
  background: var(--color-surface);
}.text-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}.txt-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--ease-base), transform var(--ease-base);
}.txt-card:hover {
  box-shadow: var(--shadow-md);
  /* transform: translateY(-3px); */
}.txt-card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}.txt-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
}/* Icon tints — picked per card, so they do not follow the section accent. */.icon-blue   { background: var(--color-blue-surface);   color: var(--brand-blue); }.icon-green  { background: var(--color-green-surface);  color: var(--color-green-dark); }.icon-orange { background: var(--color-orange-surface); color: var(--color-orange-dark); }.icon-purple { background: var(--mode-dl-surface);      color: var(--mode-dl-color); }.icon-teal   { background: #e3f7f5;                     color: #00796b; }.icon-ice    { background: var(--brand-ice);            color: var(--brand-blue); }.txt-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}.txt-card__badge {
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}.badge-tool    { background: var(--color-blue-surface);   color: var(--brand-blue); }.badge-finance { background: var(--color-green-surface);  color: var(--color-green-dark); }.badge-files   { background: var(--color-orange-surface); color: var(--color-orange-dark); }.badge-qa      { background: #fff0e8;                     color: var(--mode-rpg-color); }.badge-stories { background: var(--mode-dl-surface);      color: var(--mode-dl-color); }.badge-support { background: var(--brand-ice);            color: var(--color-ink); }.txt-card__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.txt-card__desc {
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--color-muted);
  text-wrap: pretty;
}/* The description is editor output, so its paragraphs and lists need spacing
   that doesn't leak past the card edges. */.txt-card__desc > * {
  margin: 0;
}.txt-card__desc > * + * {
  margin-top: 0.75em;
}.txt-card__desc ul,
.txt-card__desc ol {
  padding-left: 1.25em;
}.txt-card__desc a {
  color: var(--brand-blue);
  text-decoration: underline;
}.btn-explore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: auto;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--accent, var(--brand-blue));
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease-fast), border-color var(--ease-fast),
    color var(--ease-fast);
}.btn-explore:hover {
  border-color: var(--accent, var(--brand-blue));
  background: var(--accent-surface, var(--color-blue-surface));
  color: var(--accent, var(--brand-blue));
  text-decoration: none;
}.btn-explore:active {
  transform: translateY(1px);
}.btn-explore:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}.btn-explore svg {
  flex-shrink: 0;
}/* Compact — 28 Financial Assistance & Scholarships (.inline-panel[data-panel="financial"]
   .fin-grid): two up, tighter padding. */.dir-section--compact {
  padding: clamp(36px, 4vw, 64px) 0;
}.dir-section--compact .text-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--sp-6);
}.dir-section--compact .txt-card {
  padding: clamp(20px, 2vw, 28px);
}/* Square — the cards and buttons Compact shares with 51 Financial Assistance &
   Scholarships (Distance Learning), which keeps the three-up grid. Declarations
   are the designs'; the hover colours follow each card's icon tint, as the
   designs pair the green icon with the green button. */.dir-section--square .txt-card {
  border-radius: var(--radius-md);
}.dir-section--square .txt-card:hover {
  transform: translateY(-3px);
}.dir-section--square .icon-orange {
  background: #fff0e8;
  color: var(--mode-rpg-color);
}.dir-section--square .btn-explore {
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-ink);
}.dir-section--square .btn-explore:hover {
  border-color: #366f00;
  background: #eaf5dc;
  color: #366f00;
}.dir-section--square .txt-card--orange .btn-explore:hover {
  border-color: #e9873f;
  background: #fdf2e8;
  color: #a85411;
}.dir-section--square .txt-card--blue .btn-explore:hover {
  border-color: var(--brand-blue);
  background: var(--color-blue-surface);
  color: var(--brand-blue);
}.dir-section--square .txt-card--purple .btn-explore:hover {
  border-color: var(--mode-dl-color);
  background: var(--mode-dl-surface);
  color: var(--mode-dl-color);
}@media (max-width: 1024px) {
  .text-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}@media (max-width: 680px) {
  .text-grid {
    grid-template-columns: 1fr;
  }
}/* Compact goes straight from two columns to one, at the design's 900px. */@media (max-width: 1024px) {
  .dir-section--compact .text-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}@media (max-width: 900px) {
  .dir-section--compact .text-grid {
    grid-template-columns: 1fr;
  }
}/* Programme Accordion — from 12 Government Subsidies SSSDP-NMTSS.html
   (.acc-group / .acc-item--<school> / .prog-acc__content table / .new-badge).
   Renamed to prog-acc* so it never competes with the Accordion block's
   .acc-item rules. Each school sets its own colour pair; a row with no school
   falls back to the section accent. */.prog-acc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-5);
  --school-color: var(--accent, var(--brand-blue));
  --school-surface: var(--accent-surface, var(--color-blue-surface));
}.prog-acc__item--ass { --school-color: #d85c00; --school-surface: #fff1e4; }.prog-acc__item--ba  { --school-color: #6200b8; --school-surface: #f3edff; }.prog-acc__item--el  { --school-color: #448d00; --school-surface: #eaf5dc; }.prog-acc__item--nhs { --school-color: #d02e6f; --school-surface: #fcebf2; }.prog-acc__item--st  { --school-color: #144f9d; --school-surface: #ebf2fa; }.prog-acc__item {
  overflow: hidden;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--ease-base), border-color var(--ease-fast);
}.prog-acc__item:hover,
.prog-acc__item.is-open {
  box-shadow: var(--shadow-sm);
}.prog-acc__item.is-open {
  border-color: var(--school-color);
}.hkmu-block .prog-acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  margin: 0;
  padding: var(--sp-5) var(--sp-6);
  background: transparent;
  border: none;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--ease-fast);
}.hkmu-block .prog-acc__trigger:hover,
.prog-acc__item.is-open .prog-acc__trigger {
  background: var(--school-surface);
}.prog-acc__trigger:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: -3px;
}.prog-acc__label {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  color: var(--color-ink);
}.prog-acc__item.is-open .prog-acc__label {
  color: var(--school-color);
}.prog-acc__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--color-surface);
  color: var(--color-muted);
  transition: transform var(--ease-base), background var(--ease-fast), color var(--ease-fast);
}.prog-acc__item.is-open .prog-acc__icon {
  transform: rotate(180deg);
  background: var(--school-color);
  color: #fff;
}.prog-acc__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s ease;
}.prog-acc__item.is-open .prog-acc__body {
  max-height: 4000px;
}.prog-acc__content {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--color-border);
}/* Rich text in the panel — the same rhythm as the Accordion block. */.prog-acc__content > * + * {
  margin-top: var(--sp-4);
}.prog-acc__content p,
.prog-acc__content li {
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}.prog-acc__content p {
  margin-bottom: 0;
}.prog-acc__content ul,
.prog-acc__content ol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-left: var(--sp-5);
}.prog-acc__content ul { list-style: disc; }.prog-acc__content ol { list-style: decimal; }.prog-acc__content h3,
.prog-acc__content h4 {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.prog-acc__content strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.prog-acc__content a {
  color: var(--school-color);
}/* Programme table */.prog-table-wrap {
  overflow-x: auto;
  margin: var(--sp-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}.prog-acc__content .prog-table-wrap:first-child {
  margin-top: 0;
}.prog-acc__content .prog-table-wrap:last-child {
  margin-bottom: 0;
}.prog-acc__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}.prog-acc__content table thead {
  background: var(--school-color);
}.prog-acc__content table th {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 2px solid var(--school-color);
  background: var(--school-color);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-align: left;
  white-space: normal;
  color: #fff;
}.prog-acc__content table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  vertical-align: top;
  color: var(--color-body);
}.prog-acc__content table tr:last-child td {
  border-bottom: none;
}.prog-acc__content table tbody tr:nth-child(even) {
  background: #f6f6f6;
}.prog-acc__content table tbody tr:hover,
.prog-acc__content table tbody tr:nth-child(even):hover {
  background: var(--school-surface);
}.prog-acc__content table td.td-center { text-align: center; }.prog-acc__content table td.td-right  { text-align: right; }.prog-acc__content table td a {
  font-weight: var(--fw-bold);
  color: var(--school-color);
}.prog-acc__content table td a:hover {
  text-decoration: underline;
}.prog-acc__content table .subsidy-amount {
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--color-ink);
}/* Amount Column — the block adds has-amount-col-N to the panel, so a pasted
   table needs no class on its cells. A cell marked .subsidy-amount by hand
   gets the same treatment. */.has-amount-col-1 tbody td:nth-child(1),
.has-amount-col-2 tbody td:nth-child(2),
.has-amount-col-3 tbody td:nth-child(3),
.has-amount-col-4 tbody td:nth-child(4),
.has-amount-col-5 tbody td:nth-child(5),
.has-amount-col-6 tbody td:nth-child(6),
.has-amount-col-7 tbody td:nth-child(7),
.has-amount-col-8 tbody td:nth-child(8),
.has-amount-col-9 tbody td:nth-child(9),
.has-amount-col-10 tbody td:nth-child(10) {
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--color-ink);
}.prog-acc__content table .new-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-orange-surface);
  font-size: 11px;
  font-weight: var(--fw-bold);
  vertical-align: middle;
  color: var(--color-orange-dark);
}@media (max-width: 768px) {
  .prog-acc__content table th,
  .prog-acc__content table td {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-xs);
  }
}/* Scheme List — from 13 Financial Assistance & Scholarships.html (.scheme-list).
   The design hardcodes brand blue; reading --accent first lets the list take
   the colour of the sidebar-layout section it sits in. */.scheme-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-3) 0 var(--sp-5) var(--sp-6);
  padding: 0;
  list-style: none;
}.scheme-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-left: 4px solid var(--accent, var(--brand-blue));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-xs);
}.scheme-item__main {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 260px;
}.scheme-item__main a,
.scheme-item__name {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  color: var(--accent, var(--brand-blue));
  text-decoration: none;
}.scheme-item__main a:hover {
  text-decoration: underline;
}.scheme-item .link-abbr {
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  white-space: nowrap;
  color: var(--color-muted);
}.scheme-item__phone {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--color-ink);
  text-decoration: none;
}a.scheme-item__phone:hover {
  text-decoration: underline;
}.scheme-item__phone svg {
  flex-shrink: 0;
  color: var(--accent, var(--brand-blue));
}/* The rule closing a section sits the section gap below the list. */.scheme-list__divider {
  margin-top: clamp(44px, 5vw, 72px);
}@media (max-width: 320px) {
  .scheme-item__main {
    display: flex;
    flex-direction: column;
  }
}/* News Listing — from 14 News Listing.html (.content-header, .news-grid,
   .event-card, .pagination). Cards are News & Events posts, filtered and
   paged on the server. Every rule is scoped to .news-listing: names like
   .pagination and .filter-select are generic enough that another block could
   want them. Interactive colours read --accent, falling back to brand blue as
   the design hardcodes. */.news-listing__inner {
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: clamp(36px, 4vw, 64px) var(--gutter-content);
}/* Header: optional title, filter row, result count */.news-listing .content-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}.news-listing .content-header__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.news-listing .content-header__count {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}.news-listing .filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
}.news-listing .listing-search {
  position: relative;
}.news-listing .listing-search__icon,
.news-listing .sort-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  display: flex;
  color: var(--color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}.news-listing .listing-search__input {
  width: 260px;
  height: 40px;
  padding: 0 var(--sp-4) 0 38px;
  background: #fff;
  border: 1px solid #d5d9de;
  border-radius: 8px;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
}.news-listing .listing-search__input::-moz-placeholder {
  color: var(--color-muted);
}.news-listing .listing-search__input::placeholder {
  color: var(--color-muted);
}.news-listing .listing-search__input:hover,
.news-listing .listing-search__input:focus {
  border-color: var(--accent, var(--brand-blue));
  outline: none;
}.news-listing .filter-select {
  min-width: 160px;
  height: 40px;
  padding: 0 36px 0 var(--sp-4);
  background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23626262' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: border-color var(--ease-fast);
}.news-listing .filter-select:hover,
.news-listing .filter-select:focus {
  border-color: var(--accent, var(--brand-blue));
  outline: none;
}/* Keyboard focus still needs a visible ring once the border change is the
   only hover cue. */.news-listing .filter-select:focus-visible,
.news-listing .listing-search__input:focus-visible {
  /* outline: 3px solid var(--brand-orange);
  outline-offset: 1px; */
}.news-listing .sort-wrap {
  position: relative;
  margin-left: auto;
}.news-listing .sort-wrap .filter-select {
  padding-left: 38px;
}/* Apply submits the filters without JavaScript. Once the view script makes
   the selects submit themselves it is visually hidden, but stays reachable
   so a keyboard user can still submit a typed search. */.news-listing__submit {
  height: 40px;
  padding: 0 var(--sp-4);
  background: var(--accent, var(--brand-blue));
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: #fff;
  cursor: pointer;
}.is-enhanced .news-listing__submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}.hkmu-block .filter-clear {
  margin: 0;
  padding: 0 var(--sp-2);
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--accent, var(--brand-blue));
  text-decoration: underline;
  cursor: pointer;
}.hkmu-block .filter-clear:hover {
  color: var(--color-ink);
}/* Card grid */.news-listing .news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}.news-listing .event-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--ease-base), transform var(--ease-base);
}.news-listing a.event-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  text-decoration: none;
}.news-listing .event-card__img {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--color-surface);
}.news-listing .event-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}.news-listing .event-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}.news-listing .event-card__tag--orange { background: var(--brand-orange); }.news-listing .event-card__tag--blue   { background: var(--brand-blue); }.news-listing .event-card__tag--purple { background: #7200d5; }.news-listing .event-card__tag--green  { background: var(--color-green-dark); }.news-listing .event-card__tag--gold   { background: #9d6606; }.news-listing .event-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 20px 28px 24px;
}.news-listing .event-card__date {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted);
}.news-listing .event-card__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--color-ink);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}.news-listing .event-card__desc {
  display: -webkit-box;
  flex: 1;
  margin: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-body);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}.news-listing .event-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--accent, var(--brand-blue));
}.news-listing .event-card:hover .event-card__cta {
  text-decoration: underline;
  text-underline-offset: 3px;
}.news-listing .event-card__cta svg {
  flex-shrink: 0;
}.news-listing .no-results {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  width: 100%;
  min-height: 420px;
  padding: 60px 20px;
  font-size: var(--text-md);
  text-align: center;
  color: var(--color-muted);
}/* Pagination */.news-listing .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8) 0 var(--sp-1);
}.hkmu-block .pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-width: 36px;
  height: 36px;
  margin: 0;
  padding: 0 var(--sp-3);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  transition: all 0.18s ease;
}.hkmu-block .pagination__btn:hover {
  background: var(--accent-surface, var(--color-blue-surface));
  border-color: var(--accent, var(--brand-blue));
  color: var(--accent, var(--brand-blue));
}.hkmu-block .pagination__btn.is-active {
  background: var(--accent, var(--brand-blue));
  border-color: var(--accent, var(--brand-blue));
  color: #fff;
}.hkmu-block .pagination__btn {
  text-decoration: none;
}.hkmu-block .pagination__btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}@media (max-width: 1024px) {
  .news-listing .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}@media (max-width: 768px) {
  .news-listing .news-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .news-listing .filter-row {
    flex-direction: column;
    width: 100%;
  }

  .news-listing .filter-select {
    width: 100%;
    min-width: 0;
  }

  .news-listing .sort-wrap,
  .news-listing .listing-search,
  .news-listing .listing-search__input {
    width: 100%;
  }

  .news-listing .sort-wrap {
    margin-left: 0;
  }

  .news-listing .event-card__img {
    height: 140px;
  }

  .news-listing .event-card__tag {
    padding: 5px 10px;
    font-size: clamp(11px, 0.65rem + 0.15vw, 13px);
  }

  .news-listing .event-card__body {
    gap: 8px;
    padding: 14px 16px 16px;
  }

  .news-listing .event-card__title {
    /* font-size: clamp(16px, 0.9rem + 0.3vw, 20px); */
  }

  .news-listing .event-card__desc {
    /* font-size: clamp(13px, 0.75rem + 0.2vw, 15px); */
  }

  .news-listing .event-card__date {
    font-size: clamp(12px, 0.7rem + 0.15vw, 14px);
  }

  .news-listing .event-card__cta {
    font-size: 14px;
  }
}/* News & Events detail — from 15 News Details.html (.page-crumb,
   .event-hero, .event-summary, .detail-sidebar / .detail-routecard). The
   article itself is post content built from blocks, which bring their own
   styles; only the layout and plain core blocks are styled here. *//* The page body is a legacy serif; blocks set the UI face on .hkmu-block,
   and a template has to do the same for itself. */.news-detail {
  font-family: var(--font-body);
  color: var(--color-body);
}.news-detail__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}/* Breadcrumb bar */.page-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: 14px var(--gutter-content);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-muted);
}.page-crumb a {
  color: var(--color-muted);
  text-decoration: none;
}.page-crumb a:hover {
  color: var(--brand-blue);
  text-decoration: underline;
}.page-crumb .sep {
  margin: 0 var(--sp-2);
  opacity: 0.6;
}.page-crumb [aria-current] {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}/* Banner — the image keeps its own proportions, as in the design's poster. */.event-hero {
  display: block;
  width: 100%;
  max-width: var(--canvas-max);
  margin: 0 auto;
  background: #f3f2f0;
  line-height: 0;
}.event-hero__img {
  display: block;
  width: 100%;
  height: full;
  max-height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
}/* Summary strip */.event-summary {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}.event-summary__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 40px;
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: clamp(20px, 2.5vw, 36px) var(--gutter-content);
  list-style: none;
}.summary-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 0;
}.summary-item__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--color-blue-surface);
  color: var(--brand-blue);
}.summary-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}.summary-item__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}.summary-item__value,
.summary-item__value p,
.summary-item__value li {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  color: var(--color-ink);
}.summary-item__value ol,
.summary-item__value ul {
  margin: 0;
  padding-left: 1.2em;
}.summary-item__value ol { list-style: decimal; }.summary-item__value ul { list-style: disc; }.summary-item__value a {
  color: var(--brand-blue);
}/* Article with the "On this page" card */.news-detail__main {
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: clamp(36px, 4vw, 64px) var(--gutter-content);
}.news-detail__layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
  gap: 80px;
}.news-detail__layout--full {
  grid-template-columns: minmax(0, 1fr);
}.detail-sidebar {
  position: sticky;
  top: 208px;
}.detail-routecard {
  overflow: hidden;
  border: 1px solid #e2e5e9;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}.detail-routecard__head {
  margin: 0;
  padding: 20px 24px;
  background: var(--brand-blue);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-extrabold);
  line-height: 1.3;
  color: #fff;
}.detail-nav {
  display: flex;
  flex-direction: column;
  background: #fff;
}.detail-nav__item {
  display: block;
  padding: 13px 22px;
  border-bottom: 1px solid #edf0f3;
  border-left: 3px solid transparent;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-body);
  text-decoration: none;
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
}.detail-nav__item:last-child {
  border-bottom: none;
}.detail-nav__item:hover {
  background: #eef4fc;
  border-left-color: #144f9d;
  color: #144f9d;
  text-decoration: none;
}.detail-nav__item.is-active {
  border-left-color: #144f9d;
  font-weight: var(--fw-bold);
  color: #144f9d;
}/* The body is a column of blocks; each keeps its own spacing. Anchored
   headings stop clear of the sticky header and study mode bar. */.news-detail__body {
  min-width: 0;
}.news-detail__body h2[id] {
  scroll-margin-top: 200px;
}/* Core blocks written straight into the article. Tailwind's reset flattens
   them, and the HKMU blocks style only themselves. The H2 matches the
   design's .sec-head__title; a section after the first gets the design's
   gap above it. */.news-detail__body > h2 {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: clamp(22px, 1.2rem + 0.8vw, 32px);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.news-detail__body > * + h2 {
  margin-top: clamp(40px, 4.5vw, 64px);
}.news-detail__body > p,
.news-detail__body > ul,
.news-detail__body > ol {
  margin: 0 0 var(--sp-4);
  font-size: 16px;
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}.news-detail__body > ul { padding-left: 1.25em; list-style: disc; }.news-detail__body > ol { padding-left: 1.25em; list-style: decimal; }.news-detail__body > p a,
.news-detail__body > ul a,
.news-detail__body > ol a {
  color: var(--brand-blue);
  text-decoration: underline;
}.news-detail__body > figure {
  margin: 0 0 var(--sp-6);
}.news-detail__body > figure img {
  border-radius: var(--radius-lg);
}.news-detail__body > hr {
  height: 1px;
  margin: clamp(32px, 4vw, 56px) 0;
  background: var(--color-border);
  border: none;
}.news-detail__body > h3,
.news-detail__body .content-section__body h3 {
  margin: var(--sp-6) 0 var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--brand-blue);
}.news-detail__body > .content-section:last-child,
.news-detail__body > :last-child {
  margin-bottom: 0;
}/* Scroll reveal — from the design's scroll-reveal.js. news-detail.js adds
   .reveal, so without JavaScript nothing is ever hidden. */.news-detail .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}.news-detail .reveal.is-in {
  opacity: 1;
  transform: none;
}@media (prefers-reduced-motion: reduce) {
  .news-detail .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}@media (max-width: 1024px) {
  .news-detail__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .detail-sidebar {
    position: static;
  }

  .event-summary__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }
}@media (max-width: 768px) {
  .news-detail__main {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .event-summary__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}/* Intro with Image — from 15 News Details.html (#sec-overview:
   .overview-grid, .panel-intro, .highlight-list, .btn-register,
   .overview-media). The highlight list is the Content field's own bullet
   list. The photo column stretches to the text's height and the
   image covers it, as in the design. */.media-intro {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 440px);
  align-items: start;
  gap: clamp(32px, 3.5vw, 56px);
  margin-bottom: clamp(40px, 4.5vw, 64px);
}@media screen and (max-width:1561px) {.media-intro {
     grid-template-columns: repeat(2, minmax(0, 1fr))
}
  }.media-intro--no-image {
  grid-template-columns: 1fr;
}.media-intro .panel-intro {
  margin: 0;
}.media-intro__title {
  margin: 0;
  padding-bottom: 20px;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.media-intro__intro p {
  margin: 0 0 var(--sp-4);
  font-size: 16px;
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}.media-intro__intro p:last-child {
  margin-bottom: 0;
}.media-intro__intro a {
  color: var(--brand-blue);
  text-decoration: underline;
}/* The Content field's bullet list is the design's .highlight-list. A list
   straight after the intro paragraphs gets the design's gap above it. */.media-intro__intro ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}.media-intro__intro ul:first-child {
  margin-top: 0;
}.media-intro__intro ul li {
  position: relative;
  margin: 0;
  padding-left: 30px;
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
}.media-intro__intro ul li::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-orange);
}.media-intro__intro strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.media-intro__intro ol {
  margin: var(--sp-4) 0 0;
  padding-left: 1.25em;
  list-style: decimal;
}.media-intro__intro ol li {
  margin-bottom: var(--sp-2);
  font-size: 16px;
  line-height: var(--lh-loose);
  color: var(--color-body);
}.media-intro__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}.media-intro .btn-register {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  background: var(--brand-blue);
  border: 2px solid var(--brand-blue);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: #fff;
  text-decoration: none;
  transition: background var(--ease-fast), transform var(--ease-fast);
}.media-intro .btn-register:hover {
  background: #054AD6;
  border: 2px solid #054AD6;
  text-decoration: none;
  transform: translateY(-1px);
}.media-intro .btn-register:active {
  transform: translateY(1px);
}.media-intro__media {
  position: relative;
  width: 100%;
  min-height: 340px;
  overflow: hidden;
  border-radius: var(--radius-lg, 16px);
}.media-intro__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}/* The divider that closes the section carries the gap, not the grid. */.media-intro:has(+ .media-intro__divider) {
  margin-bottom: 0;
}.media-intro__divider {
  margin: clamp(32px, 4vw, 56px) 0;
}@media (max-width: 900px) {
  .media-intro {
    grid-template-columns: 1fr;
  }

  .media-intro__media {
    max-width: 560px;
    min-height: 0;
    aspect-ratio: 1024 / 683;
  }
}@media (max-width: 768px) {
  .media-intro__intro p {
    font-size: 15px;
  }

  .media-intro__cta {
    flex-direction: column;
  }
}/* Contact Offices — from 16 Contact Us.html (.contact-section,
   .contact-intro, .contact-grid). The cards are .dept-card from
   dept-card.css; the rules below only carry what the Contact Us card does
   differently: a full width grid cell, a subtitle, and the design's larger
   inline type sizes. */.contact-offices__inner {
  padding-top: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(40px, 4vw, 64px);
}/* Intro */.contact-intro {
  margin-bottom: clamp(32px, 4vw, 56px);
}.contact-intro__heading {
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.contact-intro__desc {
  max-width: 680px;
  margin-bottom: var(--sp-5);
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}.contact-intro__desc p {
  margin: 0;
}.contact-intro__desc p + p {
  margin-top: var(--sp-3);
}.contact-intro__desc a {
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--brand-blue);
}.contact-intro__count {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--color-muted);
}/* Cards */.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 32px);
  margin-bottom: clamp(40px, 4vw, 64px);
}.contact-offices .dept-card {
  max-width: none;
}.contact-offices .dept-card__name {
  margin-bottom: var(--sp-1);
  font-size: var(--text-xl);
}.contact-offices .dept-card__subtitle {
  margin: 0 0 var(--sp-5);
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-orange);
}/* The design pads a detail group 20px down from a bare title and from the
   divider; after the subtitle its own margin already gives that gap. */.contact-offices .dept-card__name + .dept-card__details,
.contact-offices .dept-card__divider + .dept-card__details {
  padding-top: 20px;
}/* Subtitle, address and office hours are WYSIWYG output. */.contact-offices .dept-card__subtitle p,
.contact-offices .dept-card__value p {
  margin: 0;
}.contact-offices .dept-card__value p + p {
  margin-top: var(--sp-1);
}.contact-offices .dept-card__label {
  font-size: 14px;
}.contact-offices .dept-card__value,
.contact-offices .btn-card {
  font-size: var(--text-base);
}.contact-offices .dept-card__value a {
  color: #333;
}/* Map card — 32 Contact Us: the accent strip over a Google Map that fills
   the grid cell, at least 420px tall. */.contact-offices .contact-map {
  padding: 0;
}.contact-map__frame {
  display: block;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}/* Inside a Sidebar Layout the content column already carries the gutter and
   the spacing. */.content-main .contact-offices .hkmu-container {
  max-width: none;
  padding: 0;
}.content-main .contact-offices .contact-grid {
  margin-bottom: 0;
}/* Compact size — 32 Contact Us (Taught Postgraduate), whose intro and card
   type the design sets inline, a step smaller than 16's. Chosen with Size →
   Compact, and always used inside a Sidebar Layout. */.contact-offices--compact .contact-intro,
.content-main .contact-offices .contact-intro {
  margin-bottom: 32px;
}.contact-offices--compact .contact-intro__heading,
.content-main .contact-offices .contact-intro__heading {
  margin-bottom: 12px;
  font-size: clamp(24px, 2.8vw + 10px, 36px);
  font-weight: 500;
  line-height: 1.5;
}.contact-offices--compact .contact-intro__desc,
.content-main .contact-offices .contact-intro__desc {
  max-width: none;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.5;
}.contact-offices--compact .contact-grid,
.content-main .contact-offices .contact-grid {
  gap: clamp(16px, 2vw, 24px);
}.contact-offices--compact .dept-card__name,
.content-main .contact-offices .dept-card__name {
  font-size: var(--text-body-lg);
}.contact-offices--compact .dept-card__label,
.content-main .contact-offices .dept-card__label {
  font-size: 12px;
  letter-spacing: 0.05em;
}.contact-offices--compact .dept-card__value,
.contact-offices--compact .dept-card__value p,
.content-main .contact-offices .dept-card__value,
.content-main .contact-offices .dept-card__value p {
  font-size: 15px;
  line-height: 1.5;
}.contact-offices--compact .btn-card,
.content-main .contact-offices .btn-card {
  font-size: 14px;
}@media (max-width: 999px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}@media (max-width: 480px) {
  .contact-offices .dept-card__body {
    padding: var(--sp-4);
  }
}/* FAQ Explorer — from 17 FAQ.html (.faq-layout, .faq-content__topbar,
   .faq-search, .faq-cat, .faq-notice, .faq-table, the faq17-css block) and
   assets/faq-component.css (.faq-item, .faq-disclaimer, .faq-expand-all).
   The route card is .sidebar-wrap from sidebar-layout.css; only the left
   rule the FAQ card adds is set here. Colours follow the block's accent. */.faq-explorer {
  --faq-accent: var(--accent, var(--brand-blue));
  --faq-hover: var(--accent-surface, var(--color-blue-surface));
  --faq-hover-soft: var(--color-surface);
}/* The design tints with --color-blue-surface, a shade deeper than the
   Undergraduate accent surface; other study modes use their own. */.faq-explorer.hkmu-accent--blue {
  --faq-hover: var(--color-blue-surface);
}.faq-explorer [hidden] {
  display: none !important;
}.faq-layout {
  display: grid;
  grid-template-columns: clamp(240px, 16vw + 40px, 300px) 1fr;
  gap: clamp(32px, 3vw + 12px, 64px);
  padding: clamp(28px, 3vw, 48px) 0 clamp(48px, 5vw, 80px);
}/* Stretch, so the sticky card inside has the column's height to travel. */.faq-sidebar {
  align-self: stretch;
}.faq-nav__item {
  border-left: 3px solid transparent;
  font-size: 15px;
}.faq-nav__item:hover,
.faq-nav__item.is-active {
  border-left-color: var(--faq-accent);
}/* Content column */.faq-content {
  min-width: 0;
}.faq-content__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--sp-6);
}.faq-content__title {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.faq-content__count {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}.faq-content__count:empty {
  display: none;
}/* Keyword search */.faq-search__field {
  position: relative;
  display: flex;
  align-items: center;
  width: 320px;
  max-width: 100%;
  margin-left: auto;
}.faq-search__icon {
  position: absolute;
  left: 18px;
  color: var(--color-muted);
  pointer-events: none;
}.faq-explorer .faq-search__input {
  width: 100%;
  height: 48px;
  padding: 0 18px 0 50px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}.faq-explorer .faq-search__input::-moz-placeholder {
  color: var(--color-muted);
}.faq-explorer .faq-search__input::placeholder {
  color: var(--color-muted);
}.faq-explorer .faq-search__input:focus {
  outline: none;
  border-color: var(--faq-accent);
  box-shadow: 0 0 0 3px rgba(20, 79, 157, 0.12);
}.faq-noresults {
  margin: 0;
  padding: var(--sp-8);
  font-size: 16px;
  text-align: center;
  color: var(--color-muted);
}/* Expand All */.faq-expand-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-pill);
  background: #f2f2f2;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: #4a4a4a;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
}.faq-expand-all:hover {
  border-color: #5a5a5a;
  background: #5a5a5a;
  color: #fff;
}.faq-expand-all svg {
  width: 14px;
  height: 14px;
}.faq-expand-all .faq-expand-all__bar {
  transform-origin: center;
  transition: opacity var(--ease-base), transform var(--ease-base);
}.faq-expand-all.is-all-open .faq-expand-all__bar {
  opacity: 0;
  transform: scaleY(0);
}/* Category within a route */.faq-cat {
  margin-top: var(--sp-8);
}.faq-cat:first-child {
  margin-top: 0;
}.faq-cat__heading {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--faq-hover);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faq-accent);
}.faq-cat__heading::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--brand-orange);
}.faq-cat__items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}/* Question */.faq-item {
  overflow: hidden;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--ease-base);
}.faq-item:hover,
.faq-item.is-open {
  box-shadow: var(--shadow-sm);
}.faq-item.is-open {
  border-color: var(--faq-accent);
}.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) var(--sp-6);
  border: none;
  background: transparent;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--ease-fast);
}.faq-item__trigger:hover {
  background: var(--faq-hover);
}.faq-item.is-open .faq-item__trigger {
  background: var(--faq-hover);
}.faq-item__trigger:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: -3px;
}.faq-item__qwrap {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}.faq-item__num {
  flex-shrink: 0;
  min-width: 38px;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--faq-accent);
}.faq-item__question {
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  color: var(--color-ink);
}.faq-item.is-open .faq-item__question {
  color: var(--faq-accent);
}.faq-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  background: var(--color-surface);
  color: var(--color-muted);
  transition: transform var(--ease-base), background var(--ease-fast), color var(--ease-fast);
}.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
  background: var(--faq-accent);
  color: #fff;
}/* Height hugs the answer — no hardcoded cap. */.faq-item__body {
  height: 0;
  overflow: hidden;
  interpolate-size: allow-keywords;
  transition: height 0.35s ease;
}.faq-item.is-open .faq-item__body {
  height: auto;
}/* Answer */.faq-item__answer {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  border-top: 1px solid var(--color-border);
}.faq-item__answer p {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}.faq-item__answer p:last-child {
  margin-bottom: 0;
}.faq-item__answer ul,
.faq-item__answer ol {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: var(--sp-3) 0 var(--sp-3);
  padding-left: var(--sp-6);
}.faq-item__answer ul {
  list-style: disc;
}.faq-item__answer ol {
  list-style: decimal;
}.faq-item__answer li {
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}.faq-item__answer em {
  font-style: italic;
  color: var(--color-ink);
}.faq-item__answer strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.faq-item__answer a {
  color: var(--faq-accent);
}.faq-item__answer a:hover {
  text-decoration: underline;
}.faq-item__answer a[href^="tel:"],
.faq-item__answer a[href^="mailto:"] {
  color: #333;
}/* Answer tables. Values are what the design renders: its shared accordion
   rules (.faq-item__answer table …) outrank the page's .faq-table ones, so
   cells are 14px, top aligned and left aligned — including the tables marked
   .faq-table--center — and the note under a table is body size. Only the
   blue head row comes from .faq-table. Scoped to .faq-explorer so
   data-table.css's .hkmu-accent--* table rules do not reach them. */.faq-table-wrap {
  margin-top: var(--sp-4);
  overflow-x: auto;
}.faq-explorer .faq-item__answer table {
  width: 100%;
  min-width: 420px;
  margin: var(--sp-3) 0;
  border-collapse: collapse;
  font-size: 14px;
}.faq-explorer .faq-item__answer caption {
  margin-bottom: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-align: left;
  color: var(--color-ink);
}.faq-explorer .faq-item__answer th,
.faq-explorer .faq-item__answer td {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  line-height: var(--lh-body);
  text-align: left;
  vertical-align: top;
  color: var(--color-body);
}.faq-explorer .faq-item__answer th {
  background: var(--faq-hover);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.faq-explorer .faq-item__answer thead th {
  background: var(--faq-accent);
  color: #fff;
}.faq-explorer .faq-item__answer tbody th {
  background: var(--color-surface);
}.faq-explorer .faq-item__answer .faq-table__note {
  margin-top: var(--sp-2);
}/* Notice panel (a route with no questions of its own) */.faq-notice {
  padding: var(--sp-8);
  border: 1.5px solid var(--color-border);
  border-left: 5px solid var(--faq-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}.faq-notice__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-5);
  border-radius: var(--radius-circle);
  background: var(--faq-hover);
  color: var(--faq-accent);
}.faq-notice__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
}.faq-notice__text {
  max-width: 640px;
  margin-bottom: var(--sp-5);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
}.faq-notice__text p {
  margin: 0;
}.faq-notice__text p + p {
  margin-top: var(--sp-3);
}.faq-notice__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}.faq-notice__lang a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border: 1.5px solid var(--faq-accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--faq-accent);
  text-decoration: none;
  transition: background var(--ease-fast), color var(--ease-fast);
}.faq-notice__lang a:hover {
  background: var(--faq-accent);
  color: #fff;
  text-decoration: none;
}/* The design's .btn.btn-secondary */.faq-notice__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border: 2px solid var(--faq-accent);
  border-radius: var(--radius-pill);
  background: var(--faq-accent);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  transition: background var(--ease-fast), border-color var(--ease-fast);
}.faq-notice__btn:hover {
  border-color: var(--accent-dark, #1763c7);
  background: var(--accent-dark, #1763c7);
  color: #fff;
  text-decoration: none;
}.faq-notice__btn:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}/* Disclaimer */.faq-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
  padding: var(--sp-5) var(--sp-6);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}.faq-disclaimer__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--faq-accent);
  color: #fff;
}.faq-disclaimer__text {
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--color-muted);
}.faq-disclaimer__text p {
  margin: 0;
}.faq-disclaimer__text p + p {
  margin-top: var(--sp-2);
}.faq-disclaimer__text strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}/* Below 1024px the route card is the Sidebar Layout dropdown bar. */@media (max-width: 1024px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}@media (max-width: 768px) {
  .faq-content__topbar {
    align-items: flex-start;
  }

  .faq-item__trigger {
    padding: var(--sp-4) var(--sp-5);
  }

  .faq-item__num {
    min-width: 30px;
  }

  .faq-item__question {
    font-size: 16px;
  }

  .faq-item__answer {
    overflow-x: auto;
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
  }

  .faq-item__answer p,
  .faq-item__answer li,
  .faq-item__answer a {
    overflow-wrap: anywhere;
  }

  .faq-notice__lang {
    flex-direction: column;
    align-items: flex-start;
  }

  .faq-disclaimer {
    flex-direction: column;
    gap: var(--sp-3);
  }
}/* ── Layout: Category sections — 31 FAQ.html (Taught Postgraduate,
   .inline-panel[data-panel="faqs"]: .faq-cat-layout, .faq-catcard, .faq-sec).
   Declarations are the design's; greens are the block's accent. ── */.faq-explorer--categories .faq-layout {
  grid-template-columns: 280px 1fr;
  gap: 48px;
}/* The card stays in view and scrolls on its own if it outgrows the screen. */.faq-explorer--categories .sidebar-wrap {
  max-height: calc(100vh - 224px);
  overflow-y: auto;
}.faq-explorer--categories .faq-nav__item {
  padding: 14px 24px;
}.faq-explorer--categories .faq-nav__item.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}.faq-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  margin: 0 0 var(--sp-6);
}.faq-toolbar .faq-search__field {
  flex: 0 0 320px;
  max-width: 100%;
}.faq-sec {
  scroll-margin-top: 170px;
}.faq-sec + .faq-sec {
  margin-top: clamp(40px, 4vw, 64px);
  padding-top: clamp(32px, 3.5vw, 48px);
  border-top: 1px solid #d0d8e0;
}.faq-sec .sec-head {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}.faq-sec__count {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}.faq-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}.faq-no-results {
  padding: 40px 24px;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 16px;
  line-height: var(--lh-loose);
  text-align: center;
  color: var(--color-muted);
}@media (max-width: 1024px) {
  .faq-explorer--categories .faq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .faq-explorer--categories .sidebar-wrap {
    max-height: none;
    overflow-y: visible;
  }
}@media (max-width: 760px) {
  .faq-toolbar .faq-search__field {
    flex: 1 1 100%;
  }
}/* CTA Band — from 17 FAQ.html (.cta-band, .btn-primary, and .btn-ghost with
   the page's inline black-on-white override). The band takes the accent's
   surface tint (for blue, the design's own). */.cta-band {
  padding: var(--sp-12) 0;
  background: var(--accent-surface, var(--color-blue-surface));
  text-align: center;
}/* The design's band is --color-blue-surface, a shade deeper than the
   Undergraduate accent surface. */.cta-band.hkmu-accent--blue {
  background: var(--color-blue-surface);
}.cta-band__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
}.cta-band__sub {
  max-width: 560px;
  margin: 0 auto var(--sp-6);
  font-size: var(--text-md);
  color: var(--color-muted);
}.cta-band__sub p {
  margin: 0;
}.cta-band__sub p + p {
  margin-top: var(--sp-2);
}.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}.cta-band__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border: 2px solid;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast), transform var(--ease-fast);
}.cta-band__btn:hover {
  text-decoration: none;
}.cta-band__btn:active {
  transform: translateY(1px);
}.cta-band__btn:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}.cta-band__btn--primary {
  padding: 0 32px;
  border-color: var(--color-cta);
  background: var(--color-cta);
  font-size: var(--text-md);
  color: #fff;
}.cta-band__btn--primary:hover {
  border-color: var(--color-cta-hover);
  background: var(--color-cta-hover);
  color: #fff;
}.cta-band__btn--outline {
  padding: 0 24px;
  border-color: #000;
  background: #fff;
  font-size: var(--text-md);
  color: #000;
}.cta-band__btn--outline:hover {
  background: var(--color-blue-surface);
  color: #000;
}@media (max-width: 768px) {
  .cta-band__actions {
    flex-direction: column;
    align-items: center;
  }
}/* Content Column — from 18 Applicants with Disabilities.html (.content-wrap,
   .content-main): one column at the content gutter, for pages without a
   sidebar. The gutter token drops to 20px on mobile, as the design does. */.content-wrap {
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: clamp(48px, 5vw, 80px) var(--gutter-content);
}.content-wrap .content-main {
  min-width: 0;
}/* Sidebar pages cap section titles at 32px (content-section.css); with the
   full width column the design keeps its base 42px. Mobile keeps the theme's
   small-screen size. *//* .content-wrap .content-section__title {
  font-size: clamp(26px, 2.2vw + 12px, 42px);
}

@media (max-width: 768px) {
  .content-wrap .content-section__title {
    font-size: clamp(19px, 5.2vw, 32px);
  }
} *//* Contact Card — from 18 Applicants with Disabilities.html (.sao-card,
   .sao-contact). Colours follow the block's accent; for blue they are the
   design's own. */.contact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(40px, 4vw, 56px);
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid rgba(20, 79, 157, 0.18);
  border-radius: var(--radius-lg);
  background: var(--accent-surface, var(--color-blue-surface));
}.contact-card.hkmu-accent--blue {
  background: var(--color-blue-surface);
}/* In the design the card sits inside the section above it, so that section
   ends without its bottom margin and the card's own top margin is the gap. */.content-section:has(+ .contact-card) {
  margin-bottom: 0;
}.contact-card:first-child {
  margin-top: 0;
}.contact-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--accent, var(--brand-blue));
  color: #fff;
}.contact-card.hkmu-accent--blue .contact-card__icon {
  background: var(--brand-blue);
}.contact-card__body {
  flex: 1;
  /* min-width: 260px; */
}.contact-card__title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.contact-card__desc {
  margin-bottom: var(--sp-5);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-body);
  text-wrap: pretty;
}.contact-card__desc p {
  margin: 0;
}.contact-card__desc p + p {
  margin-top: var(--sp-3);
}.contact-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}.contact-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 var(--sp-5);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--ease-fast), background var(--ease-fast), color var(--ease-fast);
}.contact-card__link svg {
  flex-shrink: 0;
  color: var(--brand-blue);
}.contact-card__link:hover {
  border-color: var(--brand-blue);
  background: var(--color-blue-surface);
  color: var(--brand-blue);
  text-decoration: none;
}/* Study Period Header / Table / Notes — from 22 Regular Study Period &
   Estimated Conferment Period.html (.inline-panel[data-panel="study-period"]).
   The design scopes everything to its panel; here each block carries its own
   root class, and the table uses .sp-table rather than .data-table so
   data-table.css's header band and zebra never reach it. */.sp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}/* ── Header ──────────────────────────────────────────── */.sp-head__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  line-height: var(--lh-heading);
  margin-bottom: var(--sp-5);
}.sp-notes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  margin-left: 10px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--color-muted);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}.sp-notes-btn:hover,
.sp-notes-btn:focus-visible {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
}.sp-notes-btn[hidden] {
  display: none;
}.sp-head__intake {
  margin-bottom: var(--sp-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-muted);
}.sp-head__intro {
  margin-bottom: var(--sp-6);
}.sp-head__intro:has(+ hr) {
  margin-bottom: clamp(44px, 5vw, 72px);
}.sp-head__intro p {
  margin-bottom: var(--sp-3);
  font-size: var(--text-base);
  color: var(--color-body);
  line-height: var(--lh-loose);
}.sp-head__intro p:last-child {
  margin-bottom: 0;
}/* ── Search + Expand All ─────────────────────────────── */.sp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: var(--sp-4) 0 var(--sp-6);
}.sp-search {
  position: relative;
  flex: 0 0 380px;
  max-width: 100%;
  margin-right: auto;
}.sp-search__icon {
  position: absolute;
  top: 50%;
  left: 15px;
  display: flex;
  color: var(--color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}.sp-search__input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 44px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color .18s ease, box-shadow .18s ease;
}.sp-search__input::-moz-placeholder {
  color: var(--color-muted);
}.sp-search__input::placeholder {
  color: var(--color-muted);
}.sp-search__input:hover {
  border-color: #9a9a9a;
}.sp-search__input:focus {
  outline: none;
  border-color: #6b6b6b;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .08);
}.sp-search__empty:empty {
  display: none;
}.sp-search__empty {
  margin: 0 0 var(--sp-6);
  font-size: var(--text-base);
  color: var(--color-muted);
}.sp-toggle-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: #4a4a4a;
  background: #f2f2f2;
  border: 1.5px solid rgba(0, 0, 0, .12);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--ease-fast);
}.sp-toggle-all:hover,
.sp-toggle-all:focus-visible {
  color: #fff;
  background: #5a5a5a;
  border-color: #5a5a5a;
}.sp-toggle-all[aria-expanded="true"] .sp-toggle-all__v {
  display: none;
}mark.sp-hl {
  padding: 0 1px;
  color: inherit;
  background: #ffe7a3;
  border-radius: 2px;
}/* ── School table ────────────────────────────────────── */.sp-school {
  --school-color: var(--accent, #448d00);
  --school-surface: var(--accent-surface, #eaf5dc);
  scroll-margin-top: 100px;
}.sp-school--ass {
  --school-color: #d85c00;
  --school-surface: #fff1e4;
}.sp-school--ba {
  --school-color: #6200b8;
  --school-surface: #f3edff;
}.sp-school--el {
  --school-color: #448d00;
  --school-surface: #eaf5dc;
}.sp-school--nhs {
  --school-color: #d02e6f;
  --school-surface: #fcebf2;
}.sp-school--st {
  --school-color: #144f9d;
  --school-surface: #ebf2fa;
}/* Separator and rhythm between schools, tighter when the upper one is shut. */.sp-school+.sp-school {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #e6e6e6;
}.sp-school.is-collapsed+.sp-school {
  margin-top: 24px;
  padding-top: 24px;
}.sp-school:has(+ :not(.sp-school)),
.sp-school:last-child {
  margin-bottom: var(--sp-8);
}.sp-school[hidden] {
  display: none;
}.sp-school__title {
  margin: 0 0 var(--sp-4);
  transition: margin var(--ease-fast);
}.sp-school.is-collapsed .sp-school__title {
  margin-bottom: 0;
}.sp-school__toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: var(--lh-heading);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}/* The mortarboard glyph, tinted with the school colour. */.sp-school__toggle::before {
  content: '';
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: -4px;
  background: var(--school-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10L12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5'/%3E%3Cpath d='M22 10v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10L12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5'/%3E%3Cpath d='M22 10v6'/%3E%3C/svg%3E") center / contain no-repeat;
}.sp-school__toggle:hover,
.sp-school__toggle:focus-visible {
  color: var(--school-color);
}.sp-school__chevron {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--school-color);
  transform: rotate(180deg);
  transition: transform .25s ease;
}.sp-school__chevron svg {
  width: 22px;
  height: 22px;
}.sp-school.is-collapsed .sp-school__chevron {
  transform: rotate(0deg);
}/* Collapse animates on grid rows, so no height has to be measured. */.sp-school__body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows .35s ease, opacity .25s ease;
}/* position: relative makes this the containing block for the absolutely
   positioned .sp-sr labels in the dash cells. Without it they are placed
   against the page, escape the overflow clip while collapsed, and leave a
   table's height of blank page below the footer. */.sp-school__inner {
  position: relative;
  min-height: 0;
  overflow: hidden;
}.sp-school.is-collapsed .sp-school__body {
  grid-template-rows: 0fr;
  opacity: 0;
}.sp-school.is-collapsed .sp-school__inner {
  visibility: hidden;
  transition: visibility 0s .35s;
}.sp-table-wrap {
  overflow-x: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-body);
  background: var(--color-white);
}.sp-table thead th {
  padding: 12px 14px;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: 1.3;
  text-align: left;
  vertical-align: middle;
  background: var(--school-color);
}.sp-table thead th:nth-child(1) {
  width: 429px;
}.sp-table thead th:nth-child(2) {
  width: 131px;
}.sp-table thead th:nth-child(3) {
  width: 156px;
}.sp-table thead th:nth-child(4) {
  width: 165px;
}.sp-table thead th:nth-child(5) {
  width: 193px;
}.sp-table .sp-table__center {
  text-align: center;
}.sp-table .sp-table__nowrap {
  white-space: nowrap;
}.sp-table__unit {
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
}.sp-table thead .sp-table__unit {
  color: #fff;
}.sp-table tbody td {
  padding: 10px 14px;
  font-size: var(--text-base) !important;
  line-height: 1.4;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--color-border);
}/* One <tbody> per programme: the first row carries the heavier rule, the
   first row of each code a dashed one, and every other programme is banded. */.sp-table tbody tr:first-child td {
  border-top: 2px solid #c9d4e0;
}.sp-table tbody tr.sp-row--code td {
  border-bottom: 1px dashed #e3e9f0;
}.sp-table tbody:last-child tr:last-child td {
  border-bottom: none;
}.sp-table tbody:nth-of-type(odd) td {
  background: #f6f6f6;
}.sp-table tbody:hover td {
  background: var(--school-surface);
}.sp-table__prog {
  min-width: 280px;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.sp-prog__link {
  color: var(--color-ink);
  text-decoration: none;
  transition: color .15s ease;
}.sp-prog__link:hover {
  color: var(--school-color, var(--color-ink));
  text-decoration: underline;
}.sp-prog__spec {
  display: block;
  margin-top: 4px;
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--color-muted);
}.sp-table__code {
  font-size: 14px;
  font-weight: var(--fw-regular);
  color: #1a1a1a;
  white-space: nowrap;
}.sp-table__route {
  display: block;
  font-size: 12px;
  font-weight: var(--fw-regular);
  color: var(--color-muted);
  white-space: normal;
}.sp-table__dur {
  font-weight: var(--fw-regular);
  color: var(--color-ink);
  white-space: nowrap;
}.sp-table__conf {
  font-weight: var(--fw-regular);
  color: #333;
  white-space: nowrap;
}.sp-table__conf small,
.sp-stat__v small {
  display: inline;
  margin-left: 2px;
  font-size: 12px;
  font-weight: var(--fw-regular);
  color: var(--color-muted);
}.sp-table__dash {
  font-weight: var(--fw-bold);
  color: var(--color-disabled);
}.sp-table tbody[hidden],
.sp-card[hidden] {
  display: none;
}.sp-key {
  margin-top: var(--sp-3);
  font-size: 13px;
  color: var(--color-muted);
  word-spacing: .2em;
}/* ── Note numbers ────────────────────────────────────── */.sp-ref {
  margin-left: 2px;
  line-height: 0;
}.sp-ref__btn {
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--accent-dark);
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  cursor: pointer;
}.sp-ref__btn:hover,
.sp-ref__btn:focus-visible {
  color: var(--accent);
}.sp-table thead .sp-ref__btn {
  color: inherit;
}/* ── Mobile cards (≤1024px) ──────────────────────────── */.sp-cards {
  display: none;
}@media (max-width: 1024px) {
  .sp-table-wrap {
    display: none;
  }

  .sp-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 4px 0 8px;
  }
}.sp-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}.sp-card__head {
  padding: 14px 16px;
  background: #f2f2f2;
  border-bottom: 1px solid var(--color-border);
}.sp-eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #666;
}.sp-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: #171313;
  line-height: 1.35;
}.sp-card__title .sp-ref__btn {
  font-size: 11px;
}.sp-card__code {
  padding: 14px 16px;
}.sp-card__code+.sp-card__code {
  border-top: 1px solid #ededed;
}.sp-card__code-val {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
}.sp-card__code-val .sp-table__route {
  margin-top: 2px;
  color: #666;
}.sp-card__modes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}.sp-card__mode {
  display: grid;
  grid-template-columns: minmax(88px, auto) 1fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fafafa;
  border: 1px solid #ededed;
  border-radius: 8px;
}.sp-card__mode-label {
  white-space: nowrap;
  font-size: var(--text-base);
}.sp-stat__k {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #666;
}.sp-stat__v {
  font-size: 14px;
  font-weight: 700;
  color: #171313;
  line-height: 1.3;
}.sp-stat__v small {
  font-size: 11px;
}@media (max-width: 760px) {
  .sp-search {
    flex: 1 1 100%;
  }
}@media (max-width: 768px) {

  .sp-head__title,
  .sp-school__toggle {
    font-size: var(--text-2xl);
    line-height: 1.28;
  }
}@media (max-width: 400px) {
  .sp-card__mode {
    grid-template-columns: 1fr 1fr;
    row-gap: 8px;
  }

  .sp-card__mode-label {
    grid-column: 1 / -1;
  }
}/* ── Notes ───────────────────────────────────────────── *//* Hidden on the page, as the design has it: read by the popup and tooltip. */.sp-notes {
  display: none;
}.sp-notes.is-visible {
  display: block;
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  background: #f6f6f6;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}.sp-notes .hkmu-block__placeholder {
  margin-bottom: var(--sp-4);
  background: #fff;
}.sp-notes__title {
  margin-bottom: var(--sp-4);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
}/* The Notes field is one editor box holding a numbered list. */.sp-notes__list>ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sp-note;
}.sp-notes__list>ol>li {
  position: relative;
  margin-bottom: var(--sp-4);
  padding-left: 34px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-body);
}.sp-notes__list>ol>li:last-child {
  margin-bottom: 0;
}.sp-notes__list>ol>li::before {
  counter-increment: sp-note;
  content: counter(sp-note);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: #fff;
  background: #333;
  border-radius: var(--radius-circle);
}/* ── Note popup + tooltip (built by study-period.js) ─── */.connect-sp-popup {
  font-family: var(--font-body);
  width: 100%;
  margin: auto;
  padding: 0;
  border: 0;

}.integrity-sp-popup-content{
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  padding: clamp(20px, 3.4vw, 32px);
}.connect-sp-popup-content {
  /* max-height: min(700px, calc(100vh - 48px)); */
  /* height: auto; */
  /* overflow-y: auto; */
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  padding: clamp(20px, 3.4vw, 32px);
  padding-right: clamp(10px, 3.4vw, 16px);
  /* @apply md:max-w-[640px] max-w-[95%]; */
}.common-gravity-form {
  padding-right: clamp(10px, 3.4vw, 16px);
}.sp-popup {
  font-family: var(--font-body);
  width: 100%;
  /* @apply md:max-w-[640px] max-w-[95%]; */
  max-height: min(700px, calc(100vh - 48px));
  margin: auto;
  padding: 0;
  overflow-y: auto;
  background: #fff;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}.integrity-sp-popup::backdrop,
.connect-sp-popup::backdrop,
.sp-popup::backdrop {
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}.connect-sp-popup__head,
.sp-popup__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 20px 0 40px;
  background: #fff;
}.connect-sp-popup__title,
.sp-popup__title {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-extrabold);
  color: var(--color-ink);
  line-height: 1.3;
}.sp-popup__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-ink);
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}.sp-popup__close:hover,
.sp-popup__close:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-ink);
}.connect-sp-popup__body,
.sp-popup__body {
  margin: 0;
  padding: 20px 40px 40px;
  list-style: none;
}.connect-sp-popup__item,
.sp-popup__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-body);
}.connect-sp-popup__item+.connect-sp-popup__item,
.sp-popup__item+.sp-popup__item {
  margin-top: 10px;
}.connect-sp-popup__num,
.sp-popup__num {
  flex-shrink: 0;
  min-width: 18px;
}.connect-sp-popup__num::after,
.sp-popup__num::after {
  content: '.';
}.connect-sp-popup__item a,
.sp-popup__item a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}@media (max-width: 900px) {

  .connect-sp-popup__head,
  .sp-popup__head {
    padding: 24px 16px 0 24px;
  }

  .connect-sp-popup__body,
  .sp-popup__body {
    padding: 16px 24px 28px;
  }
}.sp-tip {
  position: fixed;
  z-index: 1300;
  max-width: 320px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
  background: #1b1b1b;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, visibility .14s;
}.sp-tip.is-open {
  opacity: 1;
  visibility: visible;
}.sp-tip p {
  margin: 0;
  color: #fff;
}.sp-tip a {
  color: #a3e635;
}.sp-tip__eyebrow {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a3e635;
}.sp-tip__item+.sp-tip__item {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}@media (hover: none) {
  .sp-tip {
    display: none;
  }
}@media (prefers-reduced-motion: reduce) {

  .sp-school__body,
  .sp-school__chevron,
  .sp-school__title {
    transition: none;
  }
}/* Fee Cards — from 25 Fees & Payment Methods.html (<style id="fee-cards">).
   The design hardcodes Taught Postgraduate green; the icon and links read the
   accent of the Sidebar Layout they sit in, which is the same green there.
   The hover is the accent-dark mixed toward black, which is the design's
   #275100 for green. */.fee-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
  align-items: stretch;
}.fee-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: clamp(16px, 1.3vw, 22px);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px);
}.fee-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}.fee-card__head svg {
  flex-shrink: 0;
  color: var(--accent, #448d00);
}.fee-card__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-ink);
}.fee-card__sub {
  margin: -8px 0 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-muted);
}.fee-card__rows {
  display: flex;
  flex-direction: column;
}.fee-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--color-border);
}.fee-card__row:first-child {
  padding-top: 2px;
  border-top: 0;
}.fee-card__label {
  font-size: var(--text-base);
  color: var(--color-ink);
}.fee-card__amount {
  font-size: 22px;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  color: var(--color-ink);
}.fee-card__amount span {
  margin-right: 6px;
  font-size: 14px;
  font-weight: var(--fw-regular);
  color: var(--color-muted);
}.fee-card__body {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-body);
  text-wrap: pretty;
}.fee-card__note {
  margin: auto 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #8a8f98;
}/* A multi-paragraph Body or Note renders as a div of paragraphs. */.fee-card__body p,
.fee-card__note p {
  margin: 0 0 var(--sp-2);
}.fee-card__body p:last-child,
.fee-card__note p:last-child {
  margin-bottom: 0;
}.fee-card__note a,
.fee-card__body a {
  color: var(--accent-dark, #366f00);
  text-decoration: underline;
  text-underline-offset: 2px;
}.fee-card__note a:hover,
.fee-card__body a:hover {
  color: color-mix(in srgb, var(--accent-dark, #366f00) 72%, #000);
}@media (max-width: 900px) {
  .fee-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}/* Logo Cards — from 25 Fees & Payment Methods.html (.logo-grid / .logo-card,
   scoped there to .inline-panel[data-panel="fees"]). The logo sizes were
   inline styles on each <img>; they are rules here, with a --pair modifier
   for two logos side by side. */.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}.logo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--ease-base), transform var(--ease-base);
}.logo-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}.logo-card__img {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(120px, 9vw, 160px);
  padding: 20px;
  background: #fff;
}.logo-card__img img {
  max-width: 80%;
  max-height: 80%;
  -o-object-fit: contain;
     object-fit: contain;
}.logo-card__img--pair {
  gap: 16px;
}.logo-card__img--pair img {
  max-width: 45%;
  max-height: 70%;
}.logo-card__accent {
  flex-shrink: 0;
  height: 3px;
  background: #144f9d;
}.logo-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}.logo-card__name {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-ink);

  text-wrap: balance; /* Evenly distributes words across lines for headings */
  overflow-wrap: break-word;
  word-break: break-word;
}.logo-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-muted);
}/* In the design the Remarks box sits inside this section, 48px under the
   grid. As the next block it would sit the section gap (72px) below, so the
   section drops its margin and the box's own margin-top is the gap. */.logo-section:has(+ .warn-box--remark) {
  margin-bottom: 0;
}@media (max-width: 1024px) {
  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}@media (max-width: 720px) {
  .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}@media (max-width: 420px) {
  .logo-grid {
    grid-template-columns: 1fr;
  }

  /* .logo-section .logo-grid {
    grid-template-columns: repeat(2, 1fr);
  } */
}/* Icon in place of a logo — 49 Payment Methods (.logo-card__mark). The card's
   Accent Colour arrives as --mark-color. */.logo-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mark-color, var(--mode-dl-color));
}.logo-card__mark svg {
  width: 44px;
  height: 44px;
}/* Fee Schedule — from 38 Fees & Payment Methods.html (#sec-tuition-fees).
   Scoped to .fee-schedule: .note-box is also a theme-wide class. The design
   stacks several overriding rules on the table headers; what wins there
   (!important) is a solid header in the year's colour with white text, and
   that is what is written here. Tones: accent #D85C00, deep #7A3200. */.fee-schedule .fee-yearsel {
  display: flex;
  gap: 4px;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin: 0 0 var(--sp-5);
  padding: 4px;
  border: 1.5px solid var(--color-border);
  border-radius: 100px;
  background: var(--color-white, #fff);
}.fee-schedule .fee-yearsel__btn {
  padding: 11px 26px;
  border: 0;
  border-radius: 100px;
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-muted);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: background 0.2s ease, color 0.2s ease;
}.fee-schedule .fee-yearsel__btn--accent:hover:not(.is-active) {
  background: #fff1e4;
  color: #b34700;
}.fee-schedule .fee-yearsel__btn--deep:hover:not(.is-active) {
  background: #f5ebe3;
  color: #7a3200;
}.fee-schedule .fee-yearsel__btn--accent.is-active {
  background: #d85c00;
  box-shadow: 0 2px 8px rgba(216, 92, 0, 0.24);
  color: #fff;
}.fee-schedule .fee-yearsel__btn--deep.is-active {
  /* background: #7a3200; */
  background: var(--accent-deep);
  box-shadow: 0 2px 8px rgba(122, 50, 0, 0.26);
  color: #fff;
}.fee-schedule .fee-yearsel__btn:focus-visible {
  outline: 3px solid #7a3200;
  outline-offset: 2px;
}.fee-schedule .fee-year[hidden] {
  display: none;
}.fee-schedule .fee-group {
  margin: 0 0 var(--sp-6);
}.fee-schedule .fee-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 10px;
}.fee-schedule .fee-group__title {
  font-size: var(--text-base);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.01em;
  color: var(--color-ink);
}.fee-schedule .fee-group__meta {
  font-size: var(--text-xs);
  color: var(--color-muted);
}.fee-schedule .fee-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-xs);
}.fee-schedule .fee-table-wrap table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: clamp(13px, 0.35vw + 11.5px, 15px);
  table-layout: fixed;
}.fee-schedule .fee-table-wrap th,
.fee-schedule .fee-table-wrap td {
  padding: 14px var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  text-align: right;
  vertical-align: middle;
}.fee-schedule .fee-table-wrap thead th {
  width: 240px;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-wrap: balance;
  color: #fff;
}.fee-schedule .fee-year--accent thead th {
  /* background: #d85c00;
  border-bottom-color: #d85c00; */
  background: var(--accent);
  border-bottom-color: var(--accent);
}.fee-schedule .fee-year--deep thead th {
  /* background: #7a3200;
  border-bottom-color: #7a3200; */
  background: var(--accent-deep);
  border-bottom-color: var(--accent-deep);
}.fee-schedule .fee-table-wrap thead th:first-child {
  width: auto;
}.fee-schedule .fee-table-wrap th:first-child,
.fee-schedule .fee-table-wrap td:first-child {
  text-align: left;
}.fee-schedule .fee-table-wrap tbody th {
  /* font-size: clamp(14px, 0.4vw + 12.5px, 17px); */
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  white-space: normal;
  text-wrap: pretty;
  color: var(--color-ink);
}.fee-schedule .fee-table-wrap tbody th .prog {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--color-muted);
}.fee-schedule .fee-table-wrap tbody tr:last-child > * {
  border-bottom: none;
}.fee-schedule .fee-table-wrap tbody tr:hover > * {
  background: #fdf8f4;
}/* Amount cells: every body td (the design marks them .amt). */.fee-schedule .fee-table-wrap tbody td {
  font-size: clamp(13px, 0.35vw + 11.5px, 16px);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}@media (min-width: 1024px){.fee-schedule .fee-table-wrap tbody td{
    white-space: nowrap;
  }
}.fee-schedule .fee-table-wrap tbody td {
  color: var(--color-ink);
}.fee-schedule .fee-table-wrap .cur {
  margin-right: 3px;
  /* font-size: 12px; */
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--color-muted);
}.fee-schedule .fee-table-wrap .fee-band {
  display: block;
  margin: 2px 0 3px;
  /* font-size: 12px; */
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}.fee-schedule .note-box {
  margin: var(--sp-5) 0;
  padding: var(--sp-5) var(--sp-6);
  border: 0;
  border-left: 4px solid #d85c00;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: #fff1e4;
}.fee-schedule .note-box p {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-body);
}.fee-schedule .note-box p:last-child {
  margin-bottom: 0;
}.fee-schedule .note-box strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.fee-schedule .note-box__label {
  margin-bottom: var(--sp-2);
  font-size: 14px;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* color: #7a3200; */
  color: var(--accent);
}@media (max-width: 640px) {
  .fee-schedule .fee-table-wrap th,
  .fee-schedule .fee-table-wrap td {
    padding: 12px;
  }
}/* Phone: each row a card, each amount labelled with its column heading
   (data-label, written on render by hkmu_label_table_cells()). */@media (max-width: 560px) {
  .fee-schedule .fee-table-wrap {
    overflow-x: visible;
  }

  .fee-schedule .fee-table-wrap table,
  .fee-schedule .fee-table-wrap tbody,
  .fee-schedule .fee-table-wrap tr,
  .fee-schedule .fee-table-wrap tbody th,
  .fee-schedule .fee-table-wrap td {
    display: block;
    width: auto;
  }

  .fee-schedule .fee-table-wrap table {
    table-layout: auto;
  }

  .fee-schedule .fee-table-wrap thead {
    display: none;
  }

  .fee-schedule .fee-table-wrap tbody tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
  }

  .fee-schedule .fee-table-wrap tbody tr:last-child {
    border-bottom: none;
  }

  .fee-schedule .fee-table-wrap tbody th {
    padding: 0 0 8px;
    border: none;
    text-align: left;
  }

  .fee-schedule .fee-table-wrap td {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0 16px;
    padding: 6px 0;
    border: none;
    text-align: right;
  }

  .fee-schedule .fee-table-wrap td::before {
    content: attr(data-label);
    margin-right: auto;
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .fee-schedule .fee-table-wrap tbody tr:hover > * {
    background: transparent;
  }
}/* Student VISA — 39 Student VISA Application.html (and 27, its Taught
   Postgraduate twin). Three things live here:

   1. Audience: the Audience Toggle, and blocks hidden for the other
      audience. The design's two palettes are --vt-new-* and --vt-cur-*;
      every rule below reads --vt-* and a Current Student block remaps them,
      so a block tagged Current draws in the deep brown the design uses.
   2. Rich-text components pasted into Content Section and Accordion
      (vsteps, dchk, ctable, the numbered-note tables, Roman sub-heads). Rich
      text loses <svg>, so the ticks, marks and icons are drawn here.
   3. Accordion Search, Accordion's sub-heading title, Link Buttons.

   Values are the design's, copied; the palette hexes are set per accent. */.hkmu-accent--orange {
  --vt-new: #d85c00;
  --vt-new-dark: #bb5000;
  --vt-new-deep: #8f3d00;
  --vt-new-soft: #fbeee2;
  --vt-new-tint: #fef6f1;
  --vt-cur: #7a3200;
  --vt-cur-dark: #5e2600;
  --vt-cur-deep: #3f1900;
  --vt-cur-soft: #f0e3da;
  --vt-cur-tint: #faf5f1;
}.hkmu-accent--orange,
.link-buttons,
.accordion-search,
.vtab-toggle {
  --vt: var(--vt-new, #d85c00);
  --vt-dark: var(--vt-new-dark, #bb5000);
  --vt-deep: var(--vt-new-deep, #8f3d00);
  --vt-soft: var(--vt-new-soft, #fbeee2);
  --vt-tint: var(--vt-new-tint, #fef6f1);
}[data-audience="current"] {
  --vt: var(--vt-cur, #7a3200);
  --vt-dark: var(--vt-cur-dark, #5e2600);
  --vt-deep: var(--vt-cur-deep, #3f1900);
  --vt-soft: var(--vt-cur-soft, #f0e3da);
  --vt-tint: var(--vt-cur-tint, #faf5f1);
}/* ── 1. Audience ───────────────────────────────────────────── */.is-audience-hidden {
  display: none !important;
}/* The editor shows both audiences; say which one a block is for. */.editor-styles-wrapper [data-audience]::before {
  content: "New Student only";
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--vt-soft);
  font-size: 12px;
  font-weight: 700;
  color: var(--vt-dark);
}.editor-styles-wrapper [data-audience="current"]::before {
  content: "Current Student only";
}.vtab-toggle {
  display: flex;
  gap: 4px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--sp-7);
  padding: 4px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
}.vtab-toggle__btn {
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: #8a8f98;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}.vtab-toggle__btn[data-vtab-btn="new"]:hover:not(.is-active) {
  background: var(--vt-new-soft, #fbeee2);
  color: var(--vt-new-dark, #bb5000);
}.vtab-toggle__btn[data-vtab-btn="current"]:hover:not(.is-active) {
  background: var(--vt-cur-soft, #f0e3da);
  color: var(--vt-cur-dark, #5e2600);
}.vtab-toggle__btn[data-vtab-btn="new"].is-active {
  background: var(--vt-new, #d85c00);
  box-shadow: 0 2px 8px rgba(216, 92, 0, 0.22);
  color: #fff;
}.vtab-toggle__btn[data-vtab-btn="current"].is-active {
  background: var(--vt-cur, #7a3200);
  box-shadow: 0 2px 8px rgba(122, 50, 0, 0.24);
  color: #fff;
}/* Accordions: the design's orange (or brown, for Current) open state. */.hkmu-accent--orange .acc-item.is-open {
  border-color: var(--vt-dark);
}.hkmu-accent--orange .acc-item.is-open .acc-item__trigger,
[data-audience="current"] .acc-item__trigger:hover {
  background: var(--vt-tint);
}.hkmu-accent--orange .acc-item.is-open .acc-item__label,
[data-audience="current"] .acc-item:hover:not(.is-open) .acc-item__label {
  color: var(--vt-dark);
}.hkmu-accent--orange .acc-item.is-open .acc-item__icon {
  background: var(--vt-dark);
  color: #fff;
}[data-audience="current"] .acc-item:hover:not(.is-open) {
  border-color: var(--vt-dark);
}/* ── 2. Rich-text components ───────────────────────────────── *//* Sub-heads with a Roman numeral badge: <h3 class="sub-head"><span
   class="sub-head__roman">I</span>…</h3>. Numbered Section prints them from
   its rows; in an Accordion item the editor writes a plain Heading 4 and
   switches on Numbered Sub-headings, and the badge is a CSS counter. */.has-numbered-subheads .acc-item__content {
  counter-reset: subhead;
}.content-section__body .sub-head,
.numbered-section .sub-head,
.acc-item__content .sub-head,
.has-numbered-subheads .acc-item__content > h4,
.faq-tools .sub-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: var(--sp-8) 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}.content-section__body .sub-head:first-child,
.numbered-section__item:first-of-type > .sub-head {
  margin-top: var(--sp-2);
}.has-numbered-subheads .acc-item__content > h4 {
  counter-increment: subhead;
}.sub-head__roman,
.has-numbered-subheads .acc-item__content > h4:not(:has(.sub-head__roman))::before {
  flex-shrink: 0;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  background: var(--vt-soft);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--vt-dark);
}.has-numbered-subheads .acc-item__content > h4:not(:has(.sub-head__roman))::before {
  content: counter(subhead, upper-roman);
}/* Notes box: <div class="notes-box"><p class="notes-box__title">…</p><p>…</p></div> */.content-section__body .notes-box,
.acc-item__content .notes-box {
  margin: var(--sp-5) 0;
  padding: var(--sp-5) var(--sp-6);
  border-left: 4px solid var(--brand-orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: #fdf6ee;
}.content-section__body .notes-box p,
.acc-item__content .notes-box p,
.notes-box li {
  margin: 0;
  font-size: clamp(14px, 0.83vw, 16px);
  line-height: var(--lh-body);
  color: var(--color-body);
}.notes-box ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0 0 0 var(--sp-5);
}.content-section__body .notes-box .notes-box__title,
.acc-item__content .notes-box .notes-box__title {
  margin-bottom: var(--sp-2);
  font-family: var(--font-body);
  font-size: clamp(12px, 0.7rem + 0.15vw, 13px);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c86520;
}/* Info box: <div class="info-box"><p class="info-box__label">…</p>…</div> — the notes box's twin. */.content-section__body .info-box,
.acc-item__content .info-box {
  margin: var(--sp-5) 0;
  padding: var(--sp-5) var(--sp-6);
  border: 0;
  border-left: 4px solid var(--brand-orange);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: #fdf6ee;
}.content-section__body .info-box p,
.acc-item__content .info-box p,
.info-box li {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-body);
}.content-section__body .info-box .info-box__label,
.acc-item__content .info-box .info-box__label {
  margin-bottom: var(--sp-2);
  font-family: var(--font-body);
  font-size: clamp(12px, 0.7rem + 0.15vw, 13px);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c86520;
}.info-box ul,
.notes-box ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0 var(--sp-5);
  list-style: disc;
}/* The design keeps Current Student body links in the text colour. */[data-audience="current"] .content-section__body > p a,
[data-audience="current"] .content-section__body > ol a,
[data-audience="current"] .content-section__body > ul a,
[data-audience="current"] .acc-item__content > p a,
[data-audience="current"] /* Numbered Section's Description is rich text: a <div> of <p>s, spaced as
   the design's second .vstep__desc (margin-top 8px). */
.content-section__body .vstep__desc p {
  margin: 0 0 8px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}.content-section__body .vstep__desc p:last-child {
  margin-bottom: 0;
}.numbered-section__text + .numbered-section__text {
  margin-top: var(--sp-5);
}.vstep__desc a {
  color: #333;
}/* Jump menu rows pointing into the hidden audience (audience-toggle.js). */.sidebar-nav__item[hidden] {
  display: none !important;
}/* Tables: .elig-table (data-table.css's alias) in this page's colours. */.hkmu-accent--orange .content-section__body .elig-table-wrap,
.hkmu-accent--orange .acc-item__content .elig-table-wrap {
  overflow-x: auto;
  margin: var(--sp-5) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}.hkmu-accent--orange .content-section__body .elig-table,
.hkmu-accent--orange .acc-item__content .elig-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: var(--color-white);
  font-size: var(--text-base);
}.hkmu-accent--orange .content-section__body .elig-table th,
.hkmu-accent--orange .content-section__body .elig-table td,
.hkmu-accent--orange .acc-item__content .elig-table th,
.hkmu-accent--orange .acc-item__content .elig-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  line-height: var(--lh-body);
  text-align: left;
  vertical-align: top;
}.hkmu-accent--orange .content-section__body .elig-table thead th,
.hkmu-accent--orange .acc-item__content .elig-table thead th {
  background: var(--vt);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  white-space: normal;
  color: #fff;
}.hkmu-accent--orange .content-section__body .elig-table tbody th,
.hkmu-accent--orange .acc-item__content .elig-table tbody th {
  background: var(--vt-soft);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.hkmu-accent--orange .content-section__body .elig-table td,
.hkmu-accent--orange .acc-item__content .elig-table td {
  font-size: var(--text-base);
  color: var(--color-body);
}.hkmu-accent--orange .content-section__body .elig-table tbody tr:last-child > *,
.hkmu-accent--orange .acc-item__content .elig-table tbody tr:last-child > * {
  border-bottom: none;
}.hkmu-accent--orange .content-section__body .elig-table tbody tr:nth-child(even) > td,
.hkmu-accent--orange .acc-item__content .elig-table tbody tr:nth-child(even) > td {
  background: #f6f6f6;
}.hkmu-accent--orange .content-section__body .elig-table.no-zebra tbody tr:nth-child(even) > td,
.hkmu-accent--orange .acc-item__content .elig-table.no-zebra tbody tr:nth-child(even) > td {
  background: var(--color-white);
}.hkmu-accent--orange .elig-table .num-cell,
.hkmu-accent--orange .elig-table.no-zebra tbody tr:nth-child(even) > .num-cell {
  width: 56px;
  background: var(--vt-deep) !important;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  text-align: center !important;
  color: #fff !important;
}.hkmu-accent--orange .elig-table td a {
  color: var(--vt-dark);
}.hkmu-accent--orange[data-audience="current"] .elig-table td a {
  color: #333;
}.hkmu-accent--orange .elig-table td strong {
  color: var(--color-ink);
}.hkmu-accent--orange .elig-table td ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-2) var(--sp-5);
}.hkmu-accent--orange .elig-table td p {
  margin: 0 0 var(--sp-2);
}.hkmu-accent--orange .elig-table td p:last-child {
  margin-bottom: 0;
}.hkmu-accent--orange .elig-table .cond-tag {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 1px 10px;
  border: 1px solid rgba(216, 92, 0, 0.25);
  border-radius: var(--radius-pill);
  background: #fdf6ee;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--color-orange-dark, #b34700);
}.hkmu-accent--orange .imp-notes-tbl td,
.hkmu-accent--orange .imp-notes-tbl td p {
  /* font-size: clamp(14px, 0.4vw + 12.5px, 16px); */
  font-size: var(--text-base);
}.hkmu-accent--orange .nol-imp-tbl td,
.hkmu-accent--orange .nol-imp-tbl td p,
.hkmu-accent--orange .nol-imp-tbl td li {
  font-size: clamp(15px, 0.4vw + 13.5px, 16px) !important;
}/* Step timeline: .vsteps > .vsteps__list > li.vstep */.vsteps {
  margin: var(--sp-4) 0 var(--sp-6);
}.vsteps__meta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 6px;
  /* font-size: clamp(13px, calc(0.25vw + 12px), 14px) !important; */
  font-size: var(--text-sm) !important;
  line-height: 1.5;
  color: var(--color-muted);
}/* The design's clock icon, drawn (rich text drops <svg>). */.vsteps__meta::before {
  content: "";
  flex: 0 0 16px;
  height: 16px;
  margin-top: 3px;
  background: var(--vt);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
}.vsteps__meta svg {
  display: none;
}.vsteps__lede {
  margin: 0;
  font-size: clamp(15px, calc(0.35vw + 14px), 17px);
  line-height: 1.5;
  color: var(--color-body);
}.content-section__body .vsteps__list,
.acc-item__content .vsteps__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}.vsteps__list::before {
  content: "";
  position: absolute;
  top: 23px;
  bottom: 31px;
  left: 15px;
  width: 2px;
  background: #e6dcd3;
}.content-section__body .vstep,
.acc-item__content .vstep {
  display: grid;
  grid-template-columns: 32px 1fr;
  -moz-column-gap: 14px;
       column-gap: 14px;
  align-items: start;
  margin: 0 -16px;
  padding: 7px 16px 8px;
  border-radius: 12px;
  transition: background 0.15s;
}.vstep:hover {
  background: var(--vt-tint);
}.vstep:hover .vstep__num {
  border-color: #e0a877;
}.vstep__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d9c9bb;
  border-radius: 50%;
  background: #fff;
  font-size: 13px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-muted);
}.vstep--done .vstep__num,
.vstep--done:hover .vstep__num {
  border-color: var(--vt-deep);
  background: var(--vt-deep);
  color: #fff;
}/* The done step's tick, drawn (rich text drops <svg>). */.vstep--done .vstep__num::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}.vstep--done .vstep__num svg {
  display: none;
}.vstep__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  min-height: 32px;
  margin: 0 0 2px;
}.content-section__body .vstep__title,
.acc-item__content .vstep__title {
  flex: 0 1 auto;
  max-width: none;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-ink);
}.vstep__who {
  padding: 3px 8px;
  border-radius: 5px;
  background: #f2eeea;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #5a4a3c;
}.vstep__who--you {
  background: var(--vt-soft);
  color: var(--vt-deep);
}.content-section__body .vstep__desc,
.acc-item__content .vstep__desc {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-body);
  text-wrap: pretty;
}.vstep__desc a {
  color: var(--vt-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}.content-section__body .vstep--plain,
.acc-item__content .vstep--plain {
  align-items: center;
}.vsteps__list--plain {
  margin-top: var(--sp-4);
}.vsteps__links {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
}.vsteps__links-label {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--color-muted);
}.vsteps__links ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}.vsteps__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(15px, calc(0.35vw + 14px), 17px);
  color: var(--color-ink);
  text-decoration: none;
}.vsteps__link:hover {
  color: var(--vt-deep);
  text-decoration: underline;
}.vsteps__link .tag {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--color-muted);
  text-decoration: none;
}/* Required Documents Checklist: .dchk */.content-section__body .dchk,
.acc-item__content .dchk {
  margin: var(--sp-6) 0;
  padding: clamp(24px, 2.4vw, 40px);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 30, 50, 0.05);
}.dchk__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--sp-6);
}/* The design's clipboard icon, drawn (rich text drops <svg>). */.dchk__head::before {
  content: "";
  flex: 0 0 34px;
  height: 34px;
  background: var(--vt);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4 6l1 1 2-2M4 12l1 1 2-2M4 18l1 1 2-2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4 6l1 1 2-2M4 12l1 1 2-2M4 18l1 1 2-2'/%3E%3C/svg%3E") center / contain no-repeat;
}.dchk__head-icon {
  display: none;
}.content-section__body .dchk__title,
.acc-item__content .dchk__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  line-height: 1.2;
  color: var(--color-ink);
}.dchk__intro {
  margin-bottom: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #f7f9fb;
}.dchk__intro-lead {
  margin: 0 0 var(--sp-3);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  color: var(--color-ink);
}.dchk__intro ol {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding-left: 22px;
}.dchk__intro li {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-body);
}.dchk__intro li strong {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.dchk__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}.dchk__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
}/* The design's filled check mark, drawn (rich text drops <svg>). */.dchk__item::before {
  content: "";
  flex: 0 0 24px;
  height: 24px;
  margin-top: 1px;
  background: var(--vt);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm4.67 8.54a1.1 1.1 0 0 0-1.56-1.56l-5 5-2.23-2.16a1.1 1.1 0 1 0-1.53 1.58l3 2.9a1.1 1.1 0 0 0 1.54-.01z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm4.67 8.54a1.1 1.1 0 0 0-1.56-1.56l-5 5-2.23-2.16a1.1 1.1 0 1 0-1.53 1.58l3 2.9a1.1 1.1 0 0 0 1.54-.01z'/%3E%3C/svg%3E") center / contain no-repeat;
}.dchk__item--cond::before {
  background: #c6cfda;
}.dchk__mark {
  display: none;
}.content-section__body .dchk__item-title,
.acc-item__content .dchk__item-title {
  margin: 0 0 3px;
  /* font-size: clamp(15px, calc(0.4vw + 13.5px), 16px); */
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--color-ink);
}.content-section__body .dchk__item-sub,
.acc-item__content .dchk__item-sub {
  margin: 0;
  /* font-size: clamp(13px, calc(0.3vw + 12px), 14px); */
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-muted);
}.dchk__item-sub .cond {
  font-weight: var(--fw-bold);
  color: var(--vt-dark);
}.content-section__body .dchk__note,
.acc-item__content .dchk__note {
  margin: var(--sp-5) 0 0;
  /* font-size: 13px; */
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-muted);
}.dchk__note strong {
  color: var(--color-ink);
}.dchk__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: var(--sp-6);
}.dchk__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  border-radius: 12px;
  /* font-size: clamp(14px, calc(0.4vw + 12.5px), 16px); */
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}.dchk__btn--primary {
  border: 1px solid var(--vt-dark);
  background: var(--vt-dark);
  color: #fff;
}.dchk__btn--primary:hover {
  background: var(--vt-deep);
  color: #fff;
  text-decoration: none;
}.dchk__btn--ghost {
  border: 1px solid #c6cfda;
  background: #fff;
  color: var(--vt-dark);
}.dchk__btn--ghost:hover {
  border-color: var(--vt-dark);
  background: var(--vt-tint);
  text-decoration: none;
}.dchk__btn:active {
  transform: translateY(1px);
}/* .content-section__body a outranks the single-class colours above, which
   left the primary button's label accent on accent. */.dchk .dchk__btn--primary,
.dchk .dchk__btn--primary:hover {
  color: #fff;
}.dchk .dchk__btn--ghost {
  color: var(--vt-dark);
}/* Numbered Section → Checklist part. The box and footnote are rich text, so
   their paragraphs and list are bare tags: the first paragraph is the box's
   bold lead, and content-section body sizes are put back to the design's. */.dchk__grid + .dchk__intro {
  margin-top: var(--sp-6);
  margin-bottom: 0;
}.content-section__body .dchk__intro p {
  margin: 0 0 var(--sp-3);
  font-size: clamp(14px, calc(0.25vw + 13px), 15px);
  line-height: 1.5;
  color: var(--color-body);
}.content-section__body .dchk__intro p:first-child {
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.content-section__body .dchk__intro p:last-child {
  margin-bottom: 0;
}.content-section__body .dchk__intro ol,
.content-section__body .dchk__intro ul {
  gap: 6px;
  margin: 0;
}.content-section__body .dchk__intro li {
  font-size: clamp(14px, calc(0.25vw + 13px), 15px);
  line-height: 1.5;
}.content-section__body .dchk__note p {
  margin: 0 0 var(--sp-2);
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}.content-section__body .dchk__note p:last-child {
  margin-bottom: 0;
}/* Contact table: .ctable */.content-section__body .ctable-wrap,
.acc-item__content .ctable-wrap {
  overflow: hidden;
  margin-top: var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}.content-section__body .ctable,
.acc-item__content .ctable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-body);
}.ctable th,
.ctable td {
  padding: 14px 18px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}.ctable th:last-child,
.ctable td:last-child {
  border-right: 0;
}.ctable tr:last-child th,
.ctable tr:last-child td {
  border-bottom: 0;
}.content-section__body .ctable thead th,
.acc-item__content .ctable thead th {
  border-right-color: rgba(255, 255, 255, 0.28);
  border-bottom-color: var(--vt-deep);
  background: var(--vt-deep);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: #fff;
}.ctable thead th:first-child {
  width: 120px;
}.content-section__body .ctable tbody th,
.acc-item__content .ctable tbody th{
  width: 100%;
}@media (min-width: 1024px){.content-section__body .ctable tbody th,
.acc-item__content .ctable tbody th{
    width: 120px;
  }
}.content-section__body .ctable tbody th,
.acc-item__content .ctable tbody th {
  background: #fff;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--color-muted);
}.ctable td {
  width: calc((100% - 120px) / 2);
}.content-section__body .ctable a,
.acc-item__content .ctable a {
  color: var(--vt-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}/* The design's contact-link-neutral.css: phone and email values in grey. */.content-section__body .ctable a[href^="tel:"],
.content-section__body .ctable a[href^="mailto:"],
.acc-item__content .ctable a[href^="tel:"],
.acc-item__content .ctable a[href^="mailto:"] {
  color: #333;
}.ctable .k {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}.ctable .addr {
  display: block;
}.ctable .addr + .addr {
  margin-top: 8px;
}/* ── 3. Accordion Search, Accordion sub-heading, Link Buttons ── */.accordion-search.content-section {
  margin-bottom: var(--sp-5);
}.sec-head--with-action .faq-search__field {
  flex: 0 0 320px;
  margin-left: auto;
}.faq-search__field {
  position: relative;
  display: flex;
  align-items: center;
  width: 320px;
  max-width: 100%;
  margin-left: auto;
}.faq-search__icon {
  position: absolute;
  left: 16px;
  color: var(--color-muted);
  pointer-events: none;
}.faq-search__input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 44px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
}.faq-search__input::-moz-placeholder {
  color: var(--color-muted);
}.faq-search__input::placeholder {
  color: var(--color-muted);
}.faq-search__input:focus {
  border-color: var(--vt);
  outline: none;
  box-shadow: 0 0 0 3px rgba(216, 92, 0, 0.14);
}.faq-noresults {
  padding: var(--sp-6);
  font-size: 16px;
  text-align: center;
  color: var(--color-muted);
}.faq-noresults[hidden],
.acc-item[hidden],
.accordion--sub.is-search-empty,
.content-section.is-search-empty {
  display: none;
}.accordion--sub.content-section {
  margin-bottom: 0;
}.accordion--sub.content-section:has(+ hr) {
    margin-bottom: clamp(44px, 5vw, 72px);
}.faq-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0 20px;
}.faq-tools > .sub-head {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}.faq-tools .expand-all-btn {
  margin-top: 0;
}.link-buttons .link-buttons__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}.link-buttons .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  text-decoration: none;
  transition: all var(--ease-fast);
}.link-buttons .cta-btn:hover {
  border-color: var(--vt-dark);
  background: var(--vt-soft);
  box-shadow: var(--shadow-sm);
  color: var(--vt-dark);
  text-decoration: none;
  transform: translateY(-1px);
}.link-buttons .cta-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--vt-soft);
  color: var(--vt-dark);
}.link-buttons .cta-btn:hover .cta-btn__icon {
  background: var(--vt-dark);
  color: #fff;
}.link-buttons .cta-btn__arrow {
  flex-shrink: 0;
  color: var(--color-disabled);
  transition: transform var(--ease-fast);
}.link-buttons .cta-btn:hover .cta-btn__arrow {
  color: var(--vt-dark);
  transform: translateX(3px);
}@media (max-width: 900px) {
  .ctable,
  .ctable tbody,
  .ctable tr {
    display: block;
  }

  .ctable thead {
    display: none;
  }

  .ctable tbody th,
  .ctable td {
    display: block;
    width: auto;
    border-right: 0;
  }

  .ctable td::before {
    content: attr(data-org);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: var(--fw-bold);
    color: var(--color-muted);
  }
}@media (max-width: 820px) {
  .dchk__grid,
  .dchk__actions {
    grid-template-columns: 1fr;
  }
}@media (max-width: 720px) {
  .sec-head--with-action {
    flex-wrap: wrap;
  }

  .sec-head--with-action .sec-head__title {
    flex: 1 1 100%;
  }

  .sec-head--with-action .faq-search__field {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 12px;
    margin-left: 0;
  }

  .faq-tools {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .faq-tools > .sub-head {
    order: 2;
    width: 100%;
  }

  .faq-tools > .expand-all-btn {
    order: 1;
  }
}@media (max-width: 768px) {
  .hkmu-accent--orange .content-section__body .elig-table,
  .hkmu-accent--orange .acc-item__content .elig-table {
    font-size: 13px;
  }

  .hkmu-accent--orange .content-section__body .elig-table th,
  .hkmu-accent--orange .content-section__body .elig-table td,
  .hkmu-accent--orange .acc-item__content .elig-table th,
  .hkmu-accent--orange .acc-item__content .elig-table td {
    padding: 8px;
  }

  .content-section__body .sub-head,
  .numbered-section .sub-head,
  .acc-item__content .sub-head,
  .has-numbered-subheads .acc-item__content > h4,
  .faq-tools .sub-head {
    /* font-size: clamp(17px, 4.4vw, 24px); */
    font-size: var(--text-xl);
    line-height: 1.3;
  }
}@media (max-width: 560px) {
  .content-section__body .vstep,
  .acc-item__content .vstep {
    grid-template-columns: 28px 1fr;
  }

  .vstep__num {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .vstep__head {
    gap: 8px;
    min-height: 28px;
  }

  .vsteps__list::before {
    left: 13px;
  }

  .content-section__body .dchk,
  .acc-item__content .dchk {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .dchk__head {
    gap: 10px;
    margin-bottom: var(--sp-4);
  }

  .dchk__head::before {
    flex-basis: 26px;
    height: 26px;
  }

  .dchk__intro {
    margin-bottom: var(--sp-4);
    padding: var(--sp-4);
  }

  .dchk__item {
    gap: 12px;
    padding: 14px 16px;
  }

  .dchk__btn {
    height: 52px;
  }
}/* 39 Student VISA Application (Research Postgraduate) only — phones and
   tablets turn every .elig-table into a stack of row-cards, from the design's
   mobile-fixes.css. Scoped to that page's slug body class (added in
   functions.php, not the page ID, which differs between environments) so 27
   (its Taught Postgraduate twin) keeps the plain table. Each cell's column
   heading is its data-label,
   written on render by hkmu_label_table_cells(). */@media (max-width: 1024px) {
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table-wrap {
    overflow: visible;
    max-width: 100% !important; /* beats an inline max-width */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table,
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table thead,
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table tbody,
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table tr,
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table th,
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table td {
    display: block;
    width: auto;
    min-width: 0;
  }

  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table {
    background: transparent;
  }

  /* The headings are read from each cell's label instead. */
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table thead {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table tbody tr {
    margin: 0 0 12px;
    padding: 6px 0;
    border: 1px solid #e2e5e9;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .content-section__body .elig-table tbody tr > *,
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .acc-item__content .elig-table tbody tr > * {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px dashed #e5e8ec;
    background: transparent;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .content-section__body .elig-table tbody tr > :last-child,
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .acc-item__content .elig-table tbody tr > :last-child {
    border-bottom: 0;
  }

  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table tbody th {
    font-weight: 800;
    color: var(--color-ink);
  }

  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .elig-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
  }

  /* The numbered chip stays compact instead of taking a whole row. */
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .content-section__body .elig-table tbody tr > .num-cell,
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .acc-item__content .elig-table tbody tr > .num-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 6px 0 0 14px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
  }
}@media (max-width: 420px) {
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .content-section__body .elig-table tbody tr > *,
  .page-student-visa-application-research-postgraduate .hkmu-accent--orange .acc-item__content .elig-table tbody tr > * {
    padding: 10px 12px;
    font-size: 14px;
  }
}/* HKMU — shared breadcrumb bar (pages with no banner slot) */.crumb-bar{max-width:1920px;margin:0 auto;padding:20px clamp(24px,9.375vw,180px) 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-body,'Allumi Std','Helvetica Neue',Arial,sans-serif);font-size:14px;font-weight:600;color:#626262;letter-spacing:.2px}.crumb-bar a{color:#626262;text-decoration:none}.crumb-bar a:hover{color:#144F9D;text-decoration:underline}.crumb-bar .sep{opacity:.55}.crumb-bar [aria-current]{color:#1A1A1A}.crumb-bar--inline{max-width:none;padding:0;margin:0 0 18px}@media(max-width:768px){.crumb-bar{font-size:12px;gap:6px;padding-top:14px}}@media (min-width: 480px){.xs\:flex-nowrap{
    flex-wrap: nowrap;
  }
}@media (min-width: 640px){.sm\:max-w-\[560px\]{
    max-width: 560px;
  }
}@media (min-width: 768px){.md\:max-w-\[640px\]{
    max-width: 640px;
  }.md\:max-w-\[720px\]{
    max-width: 720px;
  }.md\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }.md\:py-5{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}@media (min-width: 1024px){.lg\:ml-0{
    margin-left: 0px;
  }.lg\:w-\[120px\]{
    width: 120px;
  }.lg\:max-w-\[750px\]{
    max-width: 750px;
  }
}@media (min-width: 1280px){.xl\:absolute{
    position: absolute;
  }.xl\:left-\[-2\.24\%\]{
    left: -2.24%;
  }.xl\:top-\[-14\.83\%\]{
    top: -14.83%;
  }.xl\:h-\[129\.66\%\]{
    height: 129.66%;
  }.xl\:w-\[104\.93\%\]{
    width: 104.93%;
  }
}