/* =====================================================================
   Resilience Academy — friendly, practical UI (Home page + shared header/footer)
   Deep blue + orange, Poppins headings, soft rounded cards, purposeful motion.
   Loaded after style.css on every public page; "hx-" components are used by Home.
   ===================================================================== */
:root {
  --hx-blue: var(--brand-blue, #0a4a8a);
  --hx-blue-2: var(--brand-blue-2, #1565c0);
  --hx-navy: var(--brand-navy, #0b1f4a);
  --hx-navy-2: #12295c;
  --hx-orange: var(--brand-orange, #f97316);
  --hx-orange-2: var(--brand-orange-2, #fb923c);
  --hx-green: var(--brand-green, #16a34a);
  --hx-bg: var(--brand-bg, #f3f6fb);
  --hx-sky: var(--brand-sky, #e8f1fb);
  --hx-line: var(--brand-line, #e3eaf4);
  --hx-ink: var(--brand-ink, #0f1a33);
  --hx-text: var(--brand-text, #475066);
  --hx-head: var(--brand-font-head, "Poppins", "Inter", system-ui, sans-serif);
  --hx-body: var(--brand-font-body, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  --hx-shadow: 0 1.125rem 2.5rem -1.375rem rgba(11, 31, 74, .35);
}

/* ---------------------------------------------------------------- header */
.hx-topbar { background: var(--hx-navy) !important; color: #d9e4ff !important; font-size: .8rem !important; }
.hx-topbar svg { color: var(--hx-orange-2) !important; }
.hx-topbar a:hover { color: #fff !important; }

header.hx-header { background: #fff !important; border-bottom: 1px solid var(--hx-line) !important; backdrop-filter: none; transition: box-shadow .3s; }
header.hx-header.is-stuck { box-shadow: 0 0.625rem 1.875rem -0.875rem rgba(11, 31, 74, .3); }
.hx-nav-link { position: relative; padding-top: 0.625rem; padding-bottom: 0.625rem; font: 500 .92rem/1 var(--hx-head); color: #1c2540; transition: color .2s; }
.hx-nav-link::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 2px; height: 2px; border-radius: 2px; background: var(--hx-orange); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.hx-nav-link:hover, .hx-nav-link.is-active { color: var(--hx-orange); }
.hx-nav-link:hover::after, .hx-nav-link.is-active::after { transform: scaleX(1); }

.hx-menu-panel { background: #fff !important; border: 1px solid var(--hx-line) !important; border-radius: 1rem !important; box-shadow: 0 1.875rem 3.75rem -1.5rem rgba(11, 31, 74, .35) !important; }
.hx-menu-eyebrow { display: block; margin-bottom: 0.75rem; font: 600 .7rem/1 var(--hx-head); letter-spacing: .16em; text-transform: uppercase; color: var(--hx-orange); }
.hx-menu-item { border-radius: 0.625rem; font: 500 .88rem/1.3 var(--hx-body); color: #25304d; transition: background .2s, color .2s, transform .2s; }
.hx-menu-item:hover { background: var(--hx-sky); color: var(--hx-blue); transform: translateX(3px); }
.hx-menu-ico { background: var(--hx-sky) !important; color: var(--hx-blue) !important; border-radius: 0.625rem !important; transition: background .2s, color .2s; }
.hx-menu-item:hover .hx-menu-ico { background: var(--hx-blue) !important; color: #fff !important; }
.hx-menu-all { border-top: 1px solid var(--hx-line) !important; color: var(--hx-blue) !important; font: 600 .86rem/1 var(--hx-head) !important; }

.hx-hbtn { display: inline-flex; align-items: center; gap: 0.5625rem; border-radius: 0.625rem; padding: 0.6875rem 1.25rem; font: 600 .84rem/1 var(--hx-head); transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.hx-hbtn svg { width: 1rem; height: 1rem; flex: none; }
.hx-hbtn-line { border: 1.5px solid var(--hx-blue); color: var(--hx-blue); background: #fff; }
.hx-hbtn-line:hover { background: var(--hx-blue); color: #fff; transform: translateY(-2px); }
.hx-hbtn-solid { background: var(--hx-orange); color: #fff; box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(249, 115, 22, .85); }
.hx-hbtn-solid:hover { background: #ea6a0a; transform: translateY(-2px); box-shadow: 0 1rem 1.75rem -0.75rem rgba(249, 115, 22, .95); }
#mobileDrawer nav a, #mobileDrawer nav button { font-family: var(--hx-head); font-weight: 500 !important; }
#mobileDrawer nav .text-brand { color: var(--hx-orange) !important; background: #fff4eb !important; }
#mobileMenuBtn { border-color: var(--hx-line) !important; border-radius: 0.75rem !important; color: var(--hx-blue) !important; }

/* ---------------------------------------------------------------- shared pieces */
/* header, page content and footer share one gutter, so logo / text / photo / buttons line up on every screen */
.hx-wrap { max-width: none; margin: 0 auto; padding-left: var(--brand-gutter, 5vw); padding-right: var(--brand-gutter, 5vw); }
header.hx-header, .hx-topbar { padding-left: var(--brand-gutter, 5vw) !important; padding-right: var(--brand-gutter, 5vw) !important; }
.site-footer { padding-left: var(--brand-gutter, 5vw) !important; padding-right: var(--brand-gutter, 5vw) !important; }
.footer-top-card, .footer-inner, .footer-bottom { max-width: none !important; }
.hx-sec { position: relative; padding: clamp(4rem, 8vw, 6.5rem) 0; }
.hx-eyebrow { display: inline-flex; align-items: center; gap: 0.625rem; margin: 0; font: 600 .78rem/1 var(--hx-head); letter-spacing: .14em; text-transform: uppercase; color: var(--hx-orange); }
.hx-eyebrow::before { content: ""; width: 2.125rem; height: 2px; background: currentColor; border-radius: 2px; }
.hx-center { text-align: center; }
.hx-center .hx-eyebrow::before { display: none; }
.hx-h1, .hx-h2, .hx-h3 { font-family: var(--hx-head); letter-spacing: -.01em; margin: 0; color: var(--hx-ink); }
.hx-h1 { font-weight: 700; font-size: clamp(2.3rem, 4.9vw, 3.9rem); line-height: 1.12; }
.hx-h2 { font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.65rem); line-height: 1.2; }
.hx-h2 b, .hx-h1 b { color: var(--hx-blue); font-weight: 700; }
.hx-lead { margin: 0; font: 400 1.05rem/1.8 var(--hx-body); color: var(--hx-text); }
.hx-head { max-width: 45rem; margin: 0 auto clamp(2.25rem, 4.5vw, 3.75rem); }
.hx-head .hx-h2 { margin-top: 0.75rem; }
.hx-head .hx-lead { margin-top: 0.875rem; }
.hx-dark .hx-h2, .hx-dark .hx-h3 { color: #fff; }
.hx-dark .hx-h2 b { color: var(--hx-orange-2); }
.hx-dark .hx-lead { color: #b9c6e4; }
.hx-mark { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c18-8 30 6 48-1s30-6 48 0 30 6 48-1 30-4 50 1' fill='none' stroke='%23f97316' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 0.6875rem; padding-bottom: 0.5rem; }

.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.9375rem 1.75rem; border-radius: 0.75rem; font: 600 .95rem/1 var(--hx-head); border: 2px solid transparent; cursor: pointer; text-align: center; transition: transform .25s ease, box-shadow .25s ease, background .25s, color .25s, border-color .25s; position: relative; overflow: hidden; }
.hx-btn svg { width: 1.125rem; height: 1.125rem; flex: none; transition: transform .25s; }
.hx-btn:hover svg { transform: translateX(0.25rem); }
.hx-btn::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); }
.hx-btn:hover::after { left: 130%; transition: left .7s ease; }
.hx-btn-blue { background: var(--hx-blue); color: #fff; box-shadow: 0 1rem 1.875rem -0.875rem rgba(10, 74, 138, .8); }
.hx-btn-blue:hover { background: var(--hx-navy); transform: translateY(-3px); }
.hx-btn-orange { background: var(--hx-orange); color: #fff; box-shadow: 0 1rem 1.875rem -0.875rem rgba(249, 115, 22, .9); }
.hx-btn-orange:hover { background: #ea6a0a; transform: translateY(-3px); }
.hx-btn-white { background: #fff; color: var(--hx-blue); border-color: var(--hx-line); box-shadow: 0 0.625rem 1.5rem -1rem rgba(11, 31, 74, .4); }
.hx-btn-white:hover { border-color: var(--hx-blue); transform: translateY(-3px); }
.hx-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.hx-btn-ghost:hover { background: #fff; color: var(--hx-navy); transform: translateY(-3px); }
.hx-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* scroll animations: the existing observer adds .in-view to .reveal */
.reveal[data-anim="left"] { transform: translateX(-2.5rem); }
.reveal[data-anim="right"] { transform: translateX(2.5rem); }
.reveal[data-anim="zoom"] { transform: scale(.92); }
.reveal[data-anim="left"].in-view, .reveal[data-anim="right"].in-view, .reveal[data-anim="zoom"].in-view { transform: none; }

/* ---------------------------------------------------------------- hero */
.hx-hero { position: relative; overflow: hidden; background: var(--hx-bg); }
.hx-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(10, 74, 138, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 74, 138, .07) 1px, transparent 1px); background-size: 2.875rem 2.875rem;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.hx-blob { position: absolute; border-radius: 50%; filter: blur(4.375rem); pointer-events: none; opacity: .55; }
.hx-blob-a { width: 26.25rem; height: 26.25rem; right: -5rem; top: -7.5rem; background: #bcd7f6; }
.hx-blob-b { width: 21.25rem; height: 21.25rem; left: -7.5rem; bottom: 2.5rem; background: #ffd9bd; }
.hx-hero-grid { position: relative; display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-top: clamp(2.875rem, 6vw, 5.25rem); padding-bottom: clamp(3.5rem, 6vw, 5.25rem); }
.hx-pill { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.5625rem 1.125rem; background: #fff; border: 1px solid #d9e5f5; border-radius: 62.4375rem; font: 600 .72rem/1 var(--hx-head); letter-spacing: .07em; text-transform: uppercase; color: var(--hx-blue); box-shadow: 0 0.5rem 1.375rem -0.875rem rgba(10, 74, 138, .6); }
.hx-pill i { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: var(--hx-orange); box-shadow: 0 0 0 0 rgba(249, 115, 22, .6); animation: hx-ping 2s infinite; }
@keyframes hx-ping { 70% { box-shadow: 0 0 0 0.625rem rgba(249, 115, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } }
.hx-hero-copy .hx-h1 { margin: 1.375rem 0 1.25rem; min-height: 2.35em; }
.hx-type { color: var(--hx-blue); white-space: nowrap; }
.hx-type::after { content: ""; display: inline-block; width: 3px; height: .95em; margin-left: 0.25rem; vertical-align: -.1em; background: var(--hx-orange); animation: hx-caret 1s steps(1) infinite; }
@keyframes hx-caret { 50% { opacity: 0; } }
.hx-hero-copy .hx-lead { max-width: 35rem; }
.hx-partner { margin: 1.625rem 0 1.75rem; }
.hx-partner small { display: block; margin-bottom: 0.75rem; font: 600 .74rem/1 var(--hx-head); letter-spacing: .12em; text-transform: uppercase; color: var(--hx-orange); }
.hx-partner div { display: flex; flex-wrap: wrap; gap: 0.5rem 0.625rem; }
.hx-partner span { padding: 0.4375rem 0.875rem; background: #fff; border: 1px solid var(--hx-line); border-radius: 62.4375rem; font: 600 .8rem/1 var(--hx-body); color: #33405e; }

.hx-hero-art { position: relative; justify-self: center; width: min(100%, 35rem); }
.hx-photo { position: relative; padding: 0.5rem; background: #fff; border-radius: 1.625rem; box-shadow: 0 2.5rem 4.375rem -1.875rem rgba(11, 31, 74, .5); transform: rotate(1.6deg); transition: transform .5s ease; }
.hx-photo:hover { transform: rotate(0); }
.hx-photo img { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; object-position: 50% 35%; border-radius: 1.1875rem; display: block; }
.hx-dots { position: absolute; z-index: -1; right: -1.625rem; bottom: -1.625rem; width: 9.375rem; height: 9.375rem; background-image: radial-gradient(var(--hx-orange) 2px, transparent 2.5px); background-size: 1rem 1rem; opacity: .55; }
.hx-ring { position: absolute; z-index: -1; left: -2.125rem; top: -2.125rem; width: 7.5rem; height: 7.5rem; border: 3px dashed #b9d0ee; border-radius: 50%; animation: hx-spin 30s linear infinite; }
@keyframes hx-spin { to { transform: rotate(360deg); } }
.hx-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.125rem 0.75rem 0.75rem; background: #fff; border-radius: 1rem; box-shadow: 0 1.375rem 2.5rem -1.25rem rgba(11, 31, 74, .55); animation: hx-float 5.5s ease-in-out infinite; }
.hx-chip b { display: block; font: 700 1.02rem/1.1 var(--hx-head); color: var(--hx-ink); }
.hx-chip span { display: block; margin-top: 3px; font: 500 .74rem/1.2 var(--hx-body); color: #6b7691; }
.hx-chip-ico { display: grid; place-items: center; width: 2.625rem; height: 2.625rem; border-radius: 0.75rem; flex: none; }
.hx-chip-ico svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-chip-a { left: -1.875rem; bottom: 3.375rem; }
.hx-chip-a .hx-chip-ico { background: #dcfce7; color: var(--hx-green); }
.hx-chip-b { right: -1.125rem; top: 1.75rem; animation-delay: -2.2s; }
.hx-chip-b .hx-chip-ico { background: #e0ecfd; color: var(--hx-blue); }
@keyframes hx-float { 50% { transform: translateY(-0.75rem); } }

.hx-ticker { background: var(--hx-navy); color: #fff; overflow: hidden; }
.hx-ticker-in { display: flex; align-items: stretch; }
.hx-ticker-label { display: flex; align-items: center; gap: 0.5rem; flex: none; padding: 0 1.375rem; background: var(--hx-orange); font: 700 .74rem/1 var(--hx-head); letter-spacing: .12em; text-transform: uppercase; }
.hx-ticker-view { flex: 1; overflow: hidden; }
.hx-ticker-track { display: flex; width: max-content; padding: 0.875rem 0; animation: hx-slide 38s linear infinite; }
.hx-ticker:hover .hx-ticker-track { animation-play-state: paused; }
.hx-ticker-track span { white-space: nowrap; padding: 0 2.125rem; font: 500 .88rem/1 var(--hx-body); color: #e3ebff; display: inline-flex; align-items: center; gap: 2.125rem; }
.hx-ticker-track span::after { content: "\2022"; color: var(--hx-orange-2); }
@keyframes hx-slide { to { transform: translateX(-50%); } }

.hx-logos { background: #fff; padding: 1.625rem 0 1.875rem; border-bottom: 1px solid var(--hx-line); overflow: hidden; }
.hx-logos p { margin: 0 0 1rem; text-align: center; font: 600 .72rem/1 var(--hx-head); letter-spacing: .14em; text-transform: uppercase; color: #7a859e; }
.hx-logos-view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.hx-logos-track { display: flex; width: max-content; animation: hx-slide 42s linear infinite; }
.hx-logos-track span { display: inline-flex; align-items: center; padding: 0 1.875rem; font: 700 1.15rem/1 var(--hx-head); color: #9aa5bd; white-space: nowrap; transition: color .3s; }
.hx-logos-track span:hover { color: var(--hx-blue); }

/* ---------------------------------------------------------------- about + stats */
.hx-about { background: #fff; }
.hx-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.25rem, 6vw, 5.25rem); align-items: center; }
.hx-about-copy .hx-h2 { margin: 0.75rem 0 1.25rem; }
.hx-ticks { list-style: none; margin: 1.625rem 0 1.875rem; padding: 0; display: grid; gap: 0.875rem; }
.hx-ticks li { position: relative; padding-left: 2.25rem; font: 500 .98rem/1.55 var(--hx-body); color: #2c3856; }
.hx-ticks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.875rem no-repeat; }
.hx-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding-bottom: 2.125rem; }
.hx-stat { padding: 2.125rem 1.25rem; text-align: center; background: #fff; border: 1px solid var(--hx-line); border-radius: 1.375rem; box-shadow: var(--hx-shadow); transition: transform .35s ease, box-shadow .35s ease, opacity .7s ease; }
.hx-stat.in-view:hover { transform: translateY(-0.5rem); }
.hx-stat:nth-child(even) { margin-top: 2.25rem; }
.hx-stat:nth-child(odd) { margin-bottom: 0; }
.hx-stat b { display: block; font: 700 clamp(2rem, 3.4vw, 2.7rem)/1 var(--hx-head); color: var(--hx-orange); }
.hx-stat span.l { display: block; margin-top: 0.75rem; font: 600 .74rem/1.3 var(--hx-head); letter-spacing: .1em; text-transform: uppercase; color: #5a6682; }
.hx-stat.is-blue { background: var(--hx-blue); border-color: var(--hx-blue); }
.hx-stat.is-blue b, .hx-stat.is-blue span.l { color: #fff; }
.hx-stat.is-gray { background: #eef2f8; box-shadow: none; }
.hx-stat.is-gray b { color: var(--hx-ink); }

/* ---------------------------------------------------------------- programs */
.hx-programs { background: var(--hx-bg); }
.hx-courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.625rem; }
.hx-course { display: flex; flex-direction: column; background: #fff; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 0.875rem 2.125rem -1.375rem rgba(11, 31, 74, .4); border: 1px solid #edf1f8; transition: transform .35s ease, box-shadow .35s ease, border-color .35s; }
.hx-course:hover { transform: translateY(-0.5rem); box-shadow: 0 1.875rem 3.125rem -1.625rem rgba(11, 31, 74, .5); border-color: #cfdcf0; }
.hx-course-img { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--hx-sky); }
.hx-course-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.hx-course:hover .hx-course-img img { transform: scale(1.08); }
.hx-course-tag { position: absolute; left: 0.875rem; top: 0.875rem; padding: 0.375rem 0.75rem; background: rgba(11, 31, 74, .85); color: #fff; border-radius: 62.4375rem; font: 600 .68rem/1 var(--hx-head); letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(0.375rem); }
.hx-course-body { display: flex; flex: 1; flex-direction: column; padding: 1.375rem 1.5rem 1.5rem; }
.hx-course h3 { margin: 0 0 0.5rem; font: 600 1.2rem/1.3 var(--hx-head); color: var(--hx-ink); }
.hx-course p { margin: 0 0 1rem; font: 400 .88rem/1.65 var(--hx-body); color: #5a6682; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hx-course ul { list-style: none; margin: auto 0 1.125rem; padding: 0.875rem 0 0; border-top: 1px solid var(--hx-line); display: grid; gap: 0.5625rem; }
.hx-course li { display: flex; align-items: center; gap: 0.625rem; font: 500 .82rem/1.3 var(--hx-body); color: #33405e; }
.hx-course li svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--hx-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-course-btns { display: flex; gap: 0.625rem; }
.hx-course-btns .hx-btn { flex: 1; padding: 0.75rem 0.625rem; font-size: .8rem; border-radius: 0.625rem; }
.hx-btn-sm-line { background: #fff; color: var(--hx-blue); border-color: #cddcf1; }
.hx-btn-sm-line:hover { border-color: var(--hx-blue); background: var(--hx-sky); transform: translateY(-2px); }
.hx-more { margin-top: 2.75rem; text-align: center; }

/* ---------------------------------------------------------------- steps */
.hx-steps-sec { background: #fff; }
.hx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; position: relative; }
.hx-steps::before { content: ""; position: absolute; left: 16%; right: 16%; top: 3.5rem; height: 0; border-top: 2px dashed #c9d8ee; }
.hx-step { position: relative; padding: 1.75rem 1.625rem 1.875rem; text-align: center; background: #fff; border: 1px solid var(--hx-line); border-radius: 1.375rem; box-shadow: var(--hx-shadow); transition: transform .35s; }
.hx-step:hover { transform: translateY(-0.5rem); }
.hx-step-n { position: relative; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.125rem; border-radius: 50%; background: var(--hx-orange); color: #fff; font: 700 1.2rem/1 var(--hx-head); box-shadow: 0 0 0 0.5rem #fff3e8; }
.hx-step h3 { margin: 0 0 0.625rem; font: 600 1.15rem/1.3 var(--hx-head); color: var(--hx-ink); }
.hx-step p { margin: 0; font: 400 .92rem/1.7 var(--hx-body); color: #5a6682; }

/* ---------------------------------------------------------------- dark approach */
.hx-dark { background: radial-gradient(43.75rem 22.5rem at 90% 0%, rgba(21, 101, 192, .35), transparent 60%), var(--hx-navy); color: #fff; }
.hx-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px); background-size: 1.75rem 1.75rem; }
.hx-approach-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.hx-approach-copy .hx-h2 { margin: 0.75rem 0 1.125rem; }
.hx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; margin-top: 1.875rem; }
.hx-tile { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: 0.75rem; font: 600 .92rem/1.3 var(--hx-head); color: #fff; transition: background .3s, transform .3s, border-color .3s; }
.hx-tile:hover { background: rgba(255, 255, 255, .1); transform: translateY(-0.25rem); border-color: rgba(251, 146, 60, .6); }
.hx-tile i { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: 0.625rem; background: var(--hx-blue-2); flex: none; }
.hx-tile svg { width: 1.1875rem; height: 1.1875rem; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hx-approach-photo { position: relative; }
.hx-approach-photo::before { content: ""; position: absolute; inset: 0; border: 2px solid rgba(251, 146, 60, .6); border-radius: 1.625rem; transform: translate(1rem, 1rem); }
.hx-approach-photo img { position: relative; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 1.625rem; display: block; box-shadow: 0 2.5rem 4.375rem -1.875rem rgba(0, 0, 0, .7); }

/* ---------------------------------------------------------------- formats */
.hx-formats { background: var(--hx-bg); }
.hx-format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.hx-format { padding: 1.875rem 1.75rem 1.625rem; background: #fff; border: 1px solid var(--hx-line); border-radius: 1.25rem; transition: transform .35s ease, box-shadow .35s ease, border-color .35s; }
.hx-format:hover { transform: translateY(-0.5rem); box-shadow: 0 1.75rem 2.875rem -1.625rem rgba(11, 31, 74, .45); border-color: #c6d6ee; }
.hx-format-ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 1rem; margin-bottom: 1.25rem; transition: transform .4s ease; }
.hx-format:hover .hx-format-ico { transform: rotate(-8deg) scale(1.08); }
.hx-format-ico svg { width: 1.625rem; height: 1.625rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-format:nth-child(6n+1) .hx-format-ico { background: #e0ecfd; color: var(--hx-blue); }
.hx-format:nth-child(6n+2) .hx-format-ico { background: #ffedd9; color: var(--hx-orange); }
.hx-format:nth-child(6n+3) .hx-format-ico { background: #dcfce7; color: var(--hx-green); }
.hx-format:nth-child(6n+4) .hx-format-ico { background: #fde7f1; color: #db2777; }
.hx-format:nth-child(6n+5) .hx-format-ico { background: #ede7fd; color: #6d3fd8; }
.hx-format:nth-child(6n+6) .hx-format-ico { background: #dff6fb; color: #0891b2; }
.hx-format h3 { margin: 0 0 0.625rem; font: 600 1.15rem/1.3 var(--hx-head); color: var(--hx-ink); }
.hx-format p { margin: 0 0 1.125rem; font: 400 .9rem/1.7 var(--hx-body); color: #5a6682; }
.hx-format em { display: inline-block; padding: 0.375rem 0.75rem; background: var(--hx-sky); border-radius: 62.4375rem; font: 600 .72rem/1 var(--hx-head); font-style: normal; color: var(--hx-blue); }

/* ---------------------------------------------------------------- who can join */
.hx-who { background: #fff; }
.hx-who-box { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.875rem, 5vw, 4.375rem); align-items: center; padding: clamp(1.875rem, 5vw, 3.5rem); background: linear-gradient(135deg, #f3f7fd, #fff4ea); border: 1px solid var(--hx-line); border-radius: 1.75rem; }
.hx-who-box .hx-h2 { margin: 0.75rem 0 1rem; }
.hx-chips { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hx-chips span { padding: 0.6875rem 1.25rem; background: #fff; border: 1px solid #dbe5f4; border-radius: 62.4375rem; font: 600 .86rem/1 var(--hx-head); color: #25304d; box-shadow: 0 0.5rem 1.125rem -0.875rem rgba(11, 31, 74, .5); transition: transform .25s, background .25s, color .25s, border-color .25s; }
.hx-chips span:hover { transform: translateY(-0.25rem) rotate(-1.5deg); background: var(--hx-blue); color: #fff; border-color: var(--hx-blue); }

/* ---------------------------------------------------------------- roadmap */
.hx-road { background: var(--hx-bg); }
.hx-road-line { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.125rem; padding-top: 0.75rem; }
.hx-road-line::before { content: ""; position: absolute; left: 4%; right: 4%; top: 2.5rem; height: 0.25rem; border-radius: 0.25rem; background: #d6e2f3; }
.hx-road-line::after { content: ""; position: absolute; left: 4%; top: 2.5rem; height: 0.25rem; width: 0; border-radius: 0.25rem; background: linear-gradient(90deg, var(--hx-blue), var(--hx-orange)); transition: width 1.8s cubic-bezier(.3, .7, .2, 1) .2s; }
.hx-road-line.in-view::after { width: 92%; }
.hx-node { position: relative; z-index: 1; text-align: center; padding: 0 0.375rem; }
.hx-node-n { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1.125rem; background: #fff; border: 3px solid var(--hx-blue); border-radius: 50%; font: 700 1.1rem/1 var(--hx-head); color: var(--hx-blue); box-shadow: 0 0.625rem 1.25rem -0.75rem rgba(11, 31, 74, .6); transition: background .3s, color .3s, transform .3s; }
.hx-node:hover .hx-node-n { background: var(--hx-orange); border-color: var(--hx-orange); color: #fff; transform: scale(1.12); }
.hx-node h3 { margin: 0 0 0.5rem; font: 600 .98rem/1.35 var(--hx-head); color: var(--hx-ink); }
.hx-node p { margin: 0; font: 400 .82rem/1.6 var(--hx-body); color: #5a6682; }

/* ---------------------------------------------------------------- final call */
.hx-cta { background: #fff; padding: clamp(3.5rem, 7vw, 6rem) 0; }
.hx-cta-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.75rem, 5vw, 3.75rem); padding: clamp(1.875rem, 5vw, 4rem); background: linear-gradient(135deg, var(--hx-blue) 0%, var(--hx-navy) 100%); border-radius: 1.875rem; box-shadow: 0 2.5rem 5rem -2.5rem rgba(11, 31, 74, .8); color: #fff; }
.hx-cta-panel::before { content: ""; position: absolute; right: -5.625rem; top: -5.625rem; width: 20rem; height: 20rem; border-radius: 50%; background: rgba(249, 115, 22, .22); }
.hx-cta-panel::after { content: ""; position: absolute; left: -3.75rem; bottom: -6.875rem; width: 17.5rem; height: 17.5rem; border-radius: 50%; border: 2.25rem solid rgba(255, 255, 255, .05); }
.hx-cta-copy { position: relative; z-index: 1; }
.hx-cta-copy .hx-h2 { margin: 0.75rem 0 1rem; color: #fff; }
.hx-cta-copy .hx-h2 b { color: var(--hx-orange-2); }
.hx-cta-copy .hx-lead { color: #c6d3ee; }
.hx-cta-copy .hx-ticks li { color: #e8eefc; }
.hx-cta-copy .hx-ticks li::before { background-color: rgba(255, 255, 255, .15); }
.hx-call { display: inline-flex; align-items: center; gap: 0.875rem; margin-top: 0.375rem; color: #fff; }
.hx-call i { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--hx-orange); flex: none; animation: hx-ring 2.6s ease-in-out infinite; }
.hx-call svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-call small { display: block; font: 600 .68rem/1 var(--hx-head); letter-spacing: .14em; text-transform: uppercase; color: #aebddf; }
.hx-call b { display: block; margin-top: 0.375rem; font: 700 1.35rem/1 var(--hx-head); }
@keyframes hx-ring { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 92% { transform: rotate(-10deg); } 96% { transform: rotate(6deg); } }
.hx-form-card { position: relative; z-index: 1; padding: clamp(1.5rem, 3vw, 2.25rem); background: #fff; border-radius: 1.375rem; box-shadow: 0 1.875rem 3.125rem -1.75rem rgba(0, 0, 0, .6); color: var(--hx-ink); }
.hx-form-card h3 { margin: 0 0 0.25rem; font: 700 1.35rem/1.25 var(--hx-head); color: var(--hx-ink); }
.hx-form-card > p, .hx-form-card form > p.hx-sub { margin: 0 0 1.125rem; font: 400 .88rem/1.5 var(--hx-body); color: #6b7691; }
.hx-field { display: block; margin-bottom: 0.875rem; }
.hx-field span { display: block; margin-bottom: 0.375rem; font: 600 .78rem/1 var(--hx-head); color: #33405e; }
.hx-field input, .hx-field select { width: 100%; padding: 0.8125rem 0.875rem; border: 1.5px solid #dbe3f0; border-radius: 0.625rem; background: #fff; font: 500 .95rem/1.3 var(--hx-body); color: var(--hx-ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.hx-field input:focus, .hx-field select:focus { border-color: var(--hx-blue); box-shadow: 0 0 0 0.25rem rgba(10, 74, 138, .12); }
.hx-form-card .hx-btn, .hx-modal .hx-btn { width: 100%; }
.hx-fine { margin: 0.75rem 0 0; text-align: center; font: 400 .74rem/1.4 var(--hx-body); color: #8591ab; }

/* ---------------------------------------------------------------- apply tab + modal + toast */
.hx-apply-tab { position: fixed; right: 0; top: 50%; z-index: 70; transform: translateY(-50%); padding: 1.125rem 0.75rem; background: var(--hx-blue); color: #fff; border: 0; border-radius: 0.75rem 0 0 0.75rem; cursor: pointer; font: 600 .92rem/1 var(--hx-head); letter-spacing: .06em; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); box-shadow: -0.5rem 0.625rem 1.875rem -0.625rem rgba(11, 31, 74, .6); transition: padding .25s, background .25s; }
.hx-apply-tab:hover { background: var(--hx-orange); padding-left: 1.125rem; }
.hx-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 5vh 1rem; overflow-y: auto; background: rgba(8, 18, 44, .62); backdrop-filter: blur(0.25rem); }
.hx-modal.is-open { display: flex; animation: hx-fade .25s ease; }
.hx-dialog { width: min(100%, 30rem); margin: auto; background: #fff; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 2.5rem 5rem -1.875rem rgba(0, 0, 0, .7); animation: hx-pop .35s cubic-bezier(.2, .8, .2, 1); }
.hx-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.5rem; background: linear-gradient(135deg, var(--hx-blue), var(--hx-navy)); color: #fff; }
.hx-dialog header h3 { margin: 0; font: 600 1.15rem/1.2 var(--hx-head); color: #fff; }
.hx-dialog header button { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background .2s, transform .2s; }
.hx-dialog header button:hover { background: var(--hx-orange); transform: rotate(90deg); }
.hx-dialog form { padding: 1.375rem 1.5rem 1.625rem; }
@keyframes hx-fade { from { opacity: 0; } }
@keyframes hx-pop { from { opacity: 0; transform: translateY(1.5rem) scale(.96); } }
.hx-toast { position: fixed; left: 50%; top: 6rem; z-index: 300; transform: translateX(-50%); max-width: 92%; padding: 0.875rem 1.5rem; border-radius: 0.875rem; color: #fff; font: 600 .92rem/1.4 var(--hx-body); box-shadow: 0 1.5rem 3.125rem -1rem rgba(0, 0, 0, .5); animation: hx-toast 7s forwards; }
.hx-toast.ok { background: #15803d; }
.hx-toast.err { background: #dc2626; }
@keyframes hx-toast { 0% { opacity: 0; transform: translate(-50%, -1.25rem); } 6%, 88% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -1.25rem); visibility: hidden; } }

/* ---------------------------------------------------------------- floating buttons (call + whatsapp left, top right) */
.floating-actions { right: auto !important; left: 1.375rem; bottom: 1.375rem; }
.floating-actions.floating-right { left: auto !important; right: 1.375rem !important; }
.call-float { background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; box-shadow: 0 0 0 0.375rem rgba(34, 197, 94, .16), 0 1rem 1.875rem rgba(34, 197, 94, .35); }
.top-float { background: var(--hx-orange) !important; color: #fff !important; border: 0 !important; box-shadow: 0 0.875rem 1.875rem -0.625rem rgba(249, 115, 22, .8) !important; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: radial-gradient(50rem 22.5rem at 90% 0%, rgba(21, 101, 192, .3), transparent 60%), var(--hx-navy) !important; color: #b9c6e4 !important; border-top: 0 !important; }
.footer-top-card { background: linear-gradient(135deg, var(--hx-orange), #ea580c) !important; border: 0 !important; border-radius: 1.375rem !important; box-shadow: 0 1.875rem 3.125rem -1.75rem rgba(249, 115, 22, .8) !important; }
.footer-top-copy span { color: #ffe3cc !important; }
.footer-top-copy h3 { color: #fff !important; font-family: var(--hx-head) !important; font-weight: 700; }
.footer-top-card a { background: #fff !important; color: var(--hx-orange) !important; border-radius: 0.75rem !important; font-family: var(--hx-head); box-shadow: 0 0.875rem 1.625rem -0.875rem rgba(0, 0, 0, .5) !important; transition: transform .25s; }
.footer-top-card a:hover { transform: translateY(-3px); }
.footer-logo { background: #fff; padding: 0.625rem 1.125rem; border-radius: 0.75rem; height: 5.75rem; }
.footer-about { color: #a9b8d8 !important; }
.footer-badges span { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .15) !important; color: #dbe5ff !important; border-radius: 62.4375rem !important; }
.footer-col h4 { color: #fff !important; font-family: var(--hx-head); }
.footer-col h4::after { background: var(--hx-orange) !important; }
.footer-col a { color: #a9b8d8 !important; }
.footer-col a:hover { color: #fff !important; }
.footer-contact-panel p { color: #a9b8d8 !important; }
.footer-contact-panel svg { background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .15) !important; color: var(--hx-orange-2) !important; border-radius: 0.75rem !important; }
.footer-contact-panel a { color: #e3ebff !important; }
.footer-contact-panel a:hover { color: #fff !important; }
.social-row a { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .15) !important; color: #fff !important; }
.social-row a:hover { background: var(--hx-orange) !important; border-color: var(--hx-orange) !important; }
.footer-bottom { border-top-color: rgba(255, 255, 255, .12) !important; color: #8f9fc4 !important; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1060px) {
  .hx-courses, .hx-format-grid { grid-template-columns: repeat(2, 1fr); }
  .hx-road-line { grid-template-columns: repeat(3, 1fr); row-gap: 2.375rem; }
  .hx-road-line::before, .hx-road-line::after { display: none; }
}
@media (max-width: 900px) {
  .hx-hero-grid, .hx-about-grid, .hx-approach-grid, .hx-who-box, .hx-cta-panel { grid-template-columns: 1fr; }
  .hx-hero-art { order: -1; width: min(100%, 28.75rem); }
  .hx-chip-a { left: -0.375rem; bottom: 1.75rem; }
  .hx-chip-b { right: -0.375rem; }
  .hx-steps { grid-template-columns: 1fr; }
  .hx-steps::before { display: none; }
  .hx-stats { padding-bottom: 0; }
  .hx-stat:nth-child(even) { margin-top: 0; }
  .hx-approach-photo { max-width: 32.5rem; }
}
@media (max-width: 640px) {
  .hx-courses, .hx-format-grid, .hx-tiles { grid-template-columns: 1fr; }
  .hx-road-line { grid-template-columns: 1fr 1fr; }
  .hx-actions .hx-btn { flex: 1 1 100%; }
  .hx-hero-copy .hx-h1 { min-height: 0; }
  .hx-type { white-space: normal; }
  .hx-apply-tab { padding: 0.875rem 0.5625rem; font-size: .8rem; }
  .hx-ticker-label { padding: 0 0.875rem; }
  .hx-chip { padding: 0.5625rem 0.875rem 0.5625rem 0.5625rem; }
  .hx-chip-ico { width: 2.25rem; height: 2.25rem; }
  .floating-actions { left: 0.875rem; bottom: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-chip, .hx-ring, .hx-ticker-track, .hx-logos-track, .hx-call i, .hx-pill i, .hx-type::after { animation: none !important; }
  .hx-road-line::after { transition: none; width: 92%; }
  .hx-btn, .hx-course, .hx-stat, .hx-step, .hx-format { transition: none; }
}

a.hx-course-img { display: block; }

/* sections that slide in from the side must never create a horizontal scrollbar */
.hx-sec, .hx-hero, .hx-cta, .hx-strip { overflow-x: clip; }

/* =====================================================================
   Large desktop screens
   Below 1440px nothing changes. From 1440px up the root font size grows smoothly
   (16px at 1440 -> ~20px at 2560 -> ~23px at 3440), and because every size in this
   design is in rem, text, buttons, cards, spacing and the content column all grow
   together instead of staying small in the middle of a huge screen.
   ===================================================================== */
html { font-size: max(16px, calc(.357vw + 10.86px)); }
body { font-size: 1rem; }

/* the header logo and the old footer / floating-button sizes were in px: bring them into the same scale */
header.hx-header > a img { height: 5.25rem; width: auto; }
.hx-topbar { font-size: .8rem !important; padding-top: .625rem !important; padding-bottom: .625rem !important; }
.hx-topbar svg { width: .95rem; height: .95rem; }
.site-footer { padding-top: 5.6rem !important; }
.footer-top-card { padding: 2.4rem 2.75rem !important; margin-bottom: 4rem !important; border-radius: 1.4rem !important; }
.footer-inner { gap: 3.4rem !important; padding-bottom: 4rem !important; }
.footer-logo { height: 5.75rem !important; }
.footer-bottom { padding: 1.9rem 0 !important; }
.footer-contact-panel p { grid-template-columns: 2.4rem 1fr !important; gap: .75rem !important; }
.footer-contact-panel svg { width: 2.4rem !important; height: 2.4rem !important; }
.floating-actions { gap: .85rem; bottom: 1.4rem; }
.floating-actions:not(.floating-right) { left: 1.4rem; }
.floating-actions.floating-right { right: 1.4rem !important; }
.floating-action { width: 3.6rem; height: 3.6rem; }
.floating-action svg { width: 1.5rem; height: 1.5rem; }

@media (max-width: 640px) {
  .floating-action { width: 3.4rem; height: 3.4rem; }
  .floating-actions:not(.floating-right) { left: .9rem; }
  .floating-actions.floating-right { right: .9rem !important; }
  header.hx-header > a img { height: 4.6rem; }
}

/* small laptops / tablets landscape: the desktop header has to fit between 861px and ~1120px */
@media (min-width: 861px) and (max-width: 1120px) {
  header.hx-header { gap: 1rem !important; }
  header.hx-header > a img { height: 4rem; }
  header.hx-header nav { gap: .15rem !important; }
  header.hx-header nav .hx-nav-link { padding-left: .6rem !important; padding-right: .6rem !important; font-size: .86rem; }
  header.hx-header .hx-hbtn { padding: .65rem .85rem; font-size: .78rem; gap: .4rem; }
  header.hx-header .hx-hbtn svg { width: .9rem; height: .9rem; }
}
@media (min-width: 861px) and (max-width: 960px) {
  header.hx-header > a img { height: 3.4rem; }
  header.hx-header nav .hx-nav-link { padding-left: .4rem !important; padding-right: .4rem !important; font-size: .82rem; }
  header.hx-header .hx-hbtn { padding: .6rem .7rem; font-size: .74rem; }
  header.hx-header .hx-hbtn svg { display: none; }
}

/* Courses dropdown: IT and Non-IT side by side */
.hx-mega { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.hx-mega-col { padding: 0.5rem; border-radius: 1rem; background: #f6f9fe; border: 1px solid #e6edf8; }
.hx-mega-col .hx-menu-item:hover { background: #fff; }
.hx-mega-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.375rem; padding: 0.75rem; border-radius: 0.75rem; text-decoration: none; color: #fff; }
.hx-mega-col.is-it .hx-mega-head { background: linear-gradient(135deg, #1d6fe0, #0a4a8a); }
.hx-mega-col.is-nonit .hx-mega-head { background: linear-gradient(135deg, #ff7a1a, #ea580c); }
.hx-mega-badge { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 0.625rem; background: rgba(255, 255, 255, .2); }
.hx-mega-head b { display: block; font: 700 .95rem/1.2 var(--hx-head); }
.hx-mega-head small { display: block; margin-top: 3px; font: 500 .72rem/1.2 var(--hx-body); color: rgba(255, 255, 255, .85); }
.hx-mega-empty { margin: 0; padding: 0.75rem; font: 500 .84rem/1.4 var(--hx-body); color: #6b7691; }

/* ---------------------------------------------------------------- Enroll Form pop-up (two panels) */
.hx-dialog.hx-enroll { display: grid; grid-template-columns: .92fr 1.08fr; width: min(100%, 56rem); border-radius: 1.5rem; }
.hx-enroll-side { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.5rem); color: #fff; background: radial-gradient(22rem 16rem at 105% -5%, rgba(255, 122, 26, .5), transparent 65%), radial-gradient(18rem 14rem at -10% 110%, rgba(56, 189, 248, .3), transparent 65%), linear-gradient(165deg, #0f55b8, #08173a); }
.hx-enroll-logo { align-self: flex-start; height: 3rem; width: auto; padding: 0.4rem 0.8rem; background: #fff; border-radius: 0.75rem; margin-bottom: 1.75rem; }
.hx-enroll-eyebrow { margin: 0 0 0.75rem; font: 600 .72rem/1 var(--hx-head); letter-spacing: .16em; text-transform: uppercase; color: #ffb347; }
.hx-enroll-eyebrow.dark { color: var(--hx-orange); }
.hx-enroll-side h2 { margin: 0 0 1.25rem; font: 700 clamp(1.5rem, 2.4vw, 1.9rem)/1.2 var(--hx-head); color: #fff; letter-spacing: -.01em; }
.hx-enroll-side ul { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.75rem; }
.hx-enroll-side li { position: relative; padding-left: 1.9rem; font: 500 .92rem/1.45 var(--hx-body); color: #dbe7ff; }
.hx-enroll-side li::before { content: ""; position: absolute; left: 0; top: 1px; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--hx-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
.hx-enroll-call { margin-top: auto; display: block; padding: 0.875rem 1rem; border-radius: 0.875rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; text-decoration: none; transition: background .25s; }
.hx-enroll-call:hover { background: rgba(255, 255, 255, .18); }
.hx-enroll-call span { display: block; font: 600 .68rem/1 var(--hx-head); letter-spacing: .14em; text-transform: uppercase; color: #aebddf; }
.hx-enroll-call b { display: block; margin-top: 0.4rem; font: 700 1.2rem/1 var(--hx-head); }
.hx-enroll-main { position: relative; padding: clamp(1.75rem, 3vw, 2.5rem); background: #fff; }
.hx-enroll-main h3 { margin: 0 0 0.4rem; font: 700 1.6rem/1.2 var(--hx-head); color: var(--hx-ink); letter-spacing: -.01em; }
.hx-enroll-sub { margin: 0 0 1.25rem; font: 400 .92rem/1.55 var(--hx-body); color: #5a6682; }
.hx-enroll-main form { padding: 0; }
.hx-enroll-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
.hx-enroll-main .hx-btn { width: 100%; margin-top: 0.25rem; }
.hx-enroll-x { position: absolute; right: 1rem; top: 1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: #eef2f9; color: #44506b; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .2s, color .2s, transform .3s; }
.hx-enroll-x:hover { background: var(--hx-orange); color: #fff; transform: rotate(90deg); }
@media (max-width: 760px) {
  .hx-dialog.hx-enroll { grid-template-columns: 1fr; width: min(100%, 30rem); }
  .hx-enroll-side { display: none; }
  .hx-enroll-two { grid-template-columns: 1fr; }
  .hx-enroll-main { padding-top: 3.25rem; }
}

/* ---------------------------------------------------------------- sticky social icons */
.hx-social-side { position: fixed; z-index: 69; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.375rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(0.5rem); border: 1px solid #e3eaf4; box-shadow: 0 1rem 2.25rem -1rem rgba(11, 31, 74, .5); }
.hx-social-side.is-left { left: 0; top: 50%; transform: translateY(-50%); border-left: 0; border-radius: 0 1rem 1rem 0; }
.hx-social-side.is-right { right: 0; top: calc(50% + 5.75rem); border-right: 0; border-radius: 1rem 0 0 1rem; }
.hx-social-side a { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.5rem; color: #fff; transition: transform .25s, box-shadow .25s; }
.hx-social-side a svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-social-side.is-left a:hover { transform: translateX(5px); }
.hx-social-side.is-right a:hover { transform: translateX(-5px); }
.hx-social-side a:hover { box-shadow: 0 0.6rem 1.2rem -0.5rem rgba(0, 0, 0, .55); }
.hx-social-side .s-fb { background: #1877f2; }
.hx-social-side .s-ig { background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
.hx-social-side .s-in { background: #0a66c2; }
.hx-social-side .s-yt { background: #ff0000; }
.hx-social-side .s-x { background: #111; }
.hx-social-side .s-wa { background: #25d366; }
.hx-social-side .s-tg { background: #229ed9; }
@media (max-width: 640px) {
  .hx-social-side { gap: 0.25rem; padding: 0.375rem; }
  .hx-social-side a { width: 1.75rem; height: 1.75rem; border-radius: 0.45rem; }
  .hx-social-side a svg { width: 0.9rem; height: 0.9rem; }
  .hx-social-side.is-right { top: calc(50% + 5rem); }
}