/* Restores the shared shell layout for the current header/footer markup. */
.header-area {
  position: relative;
  z-index: 20;
  background: #fff;
}
.header-main {
  min-height: 96px;
  background: #fff;
  border-bottom: 1px solid rgba(14, 63, 88, .08);
}
.header-main > .container,
.header-main > .container > .row {
  min-height: 96px;
}
.header__logo {
  width: 150px;
  line-height: 0;
}
.header__logo a,
.header__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.header__logo img { max-height: 76px; object-fit: contain; }
.header-main .main-menu { width: auto; }
.header-main .main-menu > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.5vw, 30px);
  margin: 0;
  padding: 0;
}
.header-main .main-menu > ul > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 96px;
  color: var(--brand-blue-dark);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.header-main .main-menu > ul > li > a:hover { color: var(--brand-cyan); }
.header-main .main-menu ul.dp-menu { z-index: 30; }
.header-right { min-height: 96px; }
.header__navicon { line-height: 0; }
.header__navicon .bar-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 4px;
}
.header__navicon .bar-icon span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--brand-blue-dark);
}
.header-area + main { position: relative; z-index: 1; }

/* The off-canvas panel is hidden until main.js adds .info-open. */
aside.fix { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: visible; }
.side-info { visibility: hidden; pointer-events: none; }
.side-info.info-open { visibility: visible; pointer-events: auto; }
.offcanvas-overlay { visibility: hidden; opacity: 0; }
.offcanvas-overlay.overlay-open { visibility: visible; opacity: 1; }

.footer { position: relative; z-index: 5; color: rgba(255,255,255,.8); }
.footer-main.footer-main--platform {
  padding: 82px 0 68px;
  margin-top: 0;
}
.footer-main.footer-main--platform::before { display: none; }
.footer-platform__logo {
  display: inline-block;
  width: 152px;
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
.footer-platform__logo img { display: block; width: 100%; height: auto; }
.footer-platform__desc { max-width: 390px; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.75; }
.footer-section-title {
  margin: 0 0 24px;
  padding: 0 0 14px;
  color: #fff;
  font-family: var(--title-font), "Noto Sans HK", sans-serif;
  font-size: 22px;
  line-height: 1.3;
  border-bottom: 1px solid rgba(183,211,223,.25);
}
.footer-service__list { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.footer-service__list a { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.78); font-size: 16px; }
.footer-service__list a i { color: var(--brand-cyan); font-size: 11px; }
.footer-contact__list { display: grid; gap: 22px; }
.footer-contact__item { display: flex; align-items: flex-start; gap: 12px; }
.footer-contact__item > i { width: 20px; flex: 0 0 20px; margin-top: 4px; color: var(--brand-cyan); text-align: center; font-size: 18px; }
.footer-contact__item strong, .footer-contact__item a { display: block; }
.footer-contact__item strong { margin-bottom: 5px; color: #fff; font-family: var(--title-font), "Noto Sans HK", sans-serif; font-size: 17px; }
.footer-contact__item a { color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.55; }
.footer-social { display: flex; align-items: center; margin-top: 24px; }
.footer-social__links { display: flex; gap: 10px; }
.footer-social__links a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-blue); color: #fff; }
.footer-bottom { padding: 18px 0; background: rgba(3, 34, 51, .96); }
.footer-bottom__wrapper--centered { display: flex; justify-content: center; text-align: center; }
.footer-bottom__copyright { color: rgba(255,255,255,.72); font-size: 14px; }
.footer-bottom__copyright a { color: #fff; }

@media (max-width: 1199.98px) {
  .header-main .main-menu > ul { gap: 12px; }
  .header-main .main-menu > ul > li > a { font-size: 13px; }
}
@media (max-width: 991.98px) {
  .header-main, .header-main > .container, .header-main > .container > .row, .header-right { min-height: 82px; }
  .header-main .main-menu > ul > li > a { min-height: 82px; }
  .header__logo { width: 136px; }
  .footer-main.footer-main--platform { padding: 64px 0 54px; }
}
@media (max-width: 575.98px) {
  .header-main, .header-main > .container, .header-main > .container > .row, .header-right { min-height: 68px; }
  .header__logo { width: 120px; }
  .header-whatsapp-btn span { display: none; }
  .header-whatsapp-btn { min-width: 42px; padding: 8px 10px; }
  .footer-main.footer-main--platform { padding: 48px 0 42px; }
  .footer-section-title { margin-bottom: 20px; font-size: 20px; }
}

/* Semantic heading elements keep the original visual treatment. */
.rd-option-name {
  margin: 0;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: inherit;
  color: #0c5f80;
}
.top-services__role-title {
  margin: 0;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.top-services__team-stat-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}
.top-services__team-stat-heading .top-services__team-stat-value { font: inherit; }
.top-services__team-stat-heading .top-services__team-stat-label { margin-bottom: 0; }
.testimonial-demo__stat-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}
.testimonial-demo__stat-heading > strong { color: #0c5f80; font-size: 32px; line-height: 1.2; }
.testimonial-demo__stat-heading > strong span { margin-left: 2px; font-size: 17px; }
.testimonial-demo__stat-heading > span { margin-top: 5px; color: #61767c; font-size: 13px; font-weight: 700; }
.testimonial-demo__stat-heading > span i { color: #f3bb23; margin-right: 3px; }
.service-faq-item__title {
  flex: 1;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Homepage typography system: one heading scale and one description treatment. */
.banner-demo {
  --bd-ink: #043b50;
  --home-heading-color: var(--bd-ink);
  --home-h2-size: clamp(30px, 4vw, 38px);
  --home-h3-size: 22px;
  --home-h2-line: 1.3;
  --home-description-color: #56717b;
  --home-description-size: 16px;
  --home-description-line: 1.8;
}
.banner-demo h1 {
  color: var(--home-heading-color);
  font-size: clamp(40px, 4.7vw, 62px);
  line-height: 1.12;
}
.banner-demo h2,
.banner-demo .rd-section-title,
.banner-demo .section-title__title,
.banner-demo #home-service-flow-title,
.banner-demo #home-cta-title,
.banner-demo #testimonial-demo-title,
.banner-demo #faq-title {
  color: var(--home-heading-color) !important;
  font-size: var(--home-h2-size) !important;
  line-height: var(--home-h2-line) !important;
}
.banner-demo__lead,
.banner-demo .rd-section-subtitle,
.banner-demo .home-service-flow__lead,
.banner-demo .top-services__team-copy,
.banner-demo .cta-demo__content > p:not(.cta-demo__eyebrow),
.banner-demo .testimonial-demo__heading > p,
.banner-demo .home-faq .service-section-heading > p:last-child {
  color: var(--home-description-color) !important;
  font-size: var(--home-description-size) !important;
  line-height: var(--home-description-line) !important;
}
.banner-demo .rd-service-card__title,
.banner-demo .rd-option-name,
.banner-demo .home-service-flow__step h3,
.banner-demo .top-services__role-title,
.banner-demo .why-choose-us__item-title,
.banner-demo .service-faq-item__title {
  color: var(--home-heading-color) !important;
}
.banner-demo .rd-service-card__title,
.banner-demo .why-choose-us__item-title {
  font-size: var(--home-h3-size) !important;
  line-height: 1.35 !important;
}
.banner-demo__lead { max-width: 620px; }
.banner-demo .home-service-flow__lead,
.banner-demo .rd-section-subtitle,
.banner-demo .testimonial-demo__heading > p,
.banner-demo .home-faq .service-section-heading > p:last-child {
  margin-top: 14px;
}

/* Homepage banner: gentler type scale and more space between content groups. */
.banner-demo > .banner-demo__hero--light {
  padding: 72px 0 !important;
}
.banner-demo > .banner-demo__hero--light .banner-demo__inner {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 48px;
}
.banner-demo > .banner-demo__hero--light h1 {
  margin: 16px 0 16px;
  font-size: clamp(38px, 3.4vw, 54px);
  line-height: 1.2;
  letter-spacing: -.035em;
}
.banner-demo > .banner-demo__hero--light h2 {
  font-size: clamp(27px, 2.3vw, 34px) !important;
  line-height: 1.4 !important;
}
.banner-demo > .banner-demo__hero--light .banner-demo__proof {
  gap: 8px;
  margin-top: 28px;
}
.banner-demo > .banner-demo__hero--light .banner-demo__lead {
  max-width: 600px;
  margin-top: 26px;
  line-height: 1.95 !important;
}
.banner-demo > .banner-demo__hero--light .banner-demo__actions {
  gap: 16px;
  margin-top: 32px;
}
.banner-demo > .banner-demo__hero--light .banner-demo__visual img {
  right: -4%;
  bottom: 0;
  width: 112%;
}
.banner-demo > .banner-demo__hero--light .banner-demo__wash {
  right: -8%;
  width: 108%;
  height: 88%;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .banner-demo > .banner-demo__hero--light .banner-demo__inner { gap: 32px; }
  .banner-demo > .banner-demo__hero--light h1 { font-size: 38px; }
}
@media (max-width: 991.98px) {
  .banner-demo > .banner-demo__hero--light { padding: 56px 0 40px !important; }
  .banner-demo > .banner-demo__hero--light .banner-demo__inner { grid-template-columns: 1fr; gap: 32px; }
  .banner-demo > .banner-demo__hero--light h1 { white-space: normal; font-size: clamp(32px, 5.5vw, 46px); }
  .banner-demo > .banner-demo__hero--light .banner-demo__visual { width: min(560px, 100%); }
  .banner-demo > .banner-demo__hero--light .banner-demo__visual img { right: 0; width: 100%; }
  .banner-demo > .banner-demo__hero--light .banner-demo__wash { right: 4%; width: 88%; }
}
@media (max-width: 767.98px) {
  .banner-demo > .banner-demo__hero--light { padding: 40px 0 28px !important; }
  .banner-demo > .banner-demo__hero--light h1 { margin-top: 24px; font-size: clamp(30px, 7.8vw, 40px); text-wrap: balance; }
  .banner-demo > .banner-demo__hero--light h2 { font-size: clamp(22px, 5.4vw, 28px) !important; }
  .banner-demo > .banner-demo__hero--light .banner-demo__proof { gap: 10px 8px; margin-top: 24px; }
  .banner-demo > .banner-demo__hero--light .banner-demo__lead { margin-top: 24px; text-align: left; }
  .banner-demo > .banner-demo__hero--light .banner-demo__actions { gap: 12px; margin-top: 28px; }
  .banner-demo > .banner-demo__hero--light .banner-demo__visual { min-height: 0; aspect-ratio: 1.45; }
}

@media (max-width: 699.98px) {
  .testimonial-demo__stat-heading > strong { font-size: 25px; }
  .testimonial-demo__stat-heading > span { font-size: 11px; }
}