/*
 * JNV Sikar Alumni: supplementary styles.
 * The main stylesheet is a pre-built Tailwind file (build/assets). These rules add the
 * few utilities used by newer templates that are not in that build yet, plus small
 * helpers. They use the same names as Tailwind so a future rebuild makes them redundant.
 */

/* Whole card clickable while keeping inner links (phone, website) usable */
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* Tailwind utilities missing from the current build */
.inset-x-0 { left: 0; right: 0; }
.w-1\/2 { width: 50%; }
.gap-x-6 { column-gap: 1.5rem; }
.scroll-mt-24 { scroll-margin-top: 6rem; }
.text-\[26px\] { font-size: 26px; }
.bg-white\/70 { background-color: rgb(255 255 255 / 0.7); }
.blur-\[3px\] { filter: blur(3px); }
.shadow-top { box-shadow: 0 -6px 20px rgba(15, 27, 51, 0.08); }
.hover\:opacity-90:hover { opacity: 0.9; }
.hover\:border-jnv-brand\/40:hover { border-color: rgb(52 115 182 / 0.4); }
.invisible { visibility: hidden; }
.opacity-70 { opacity: .7; }
.hover\:bg-pink-600:hover { background-color: #db2777; }
@media (min-width: 1024px) { .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } }
.bg-black\/30 { background-color: rgb(0 0 0 / 0.3); }
.hover\:bg-black\/50:hover { background-color: rgb(0 0 0 / 0.5); }
.hover\:text-jnv-orangeDk:hover, .group:hover .group-hover\:text-jnv-orangeDk { color: #c2410c; }
.max-w-\[calc\(100\%-1rem\)\] { max-width: calc(100% - 1rem); }
@media (min-width: 640px) {
  .sm\:-left-6 { left: -1.5rem; }
  .sm\:-right-5 { right: -1.25rem; }
}

/* ---------- Accessibility ---------- */

/* "Skip to main content" link: hidden until a keyboard user tabs to it */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; background: #1e3a8a; color: #fff; padding: .6rem 1rem; border-radius: .5rem; font-weight: 700; font-size: 14px; }
.skip-link:focus { top: .75rem; }
main:focus { outline: none; }

/* Desktop dropdowns open for keyboard users too (not just on hover) */
.has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateY(0); }

/* Visible focus ring on links and buttons for keyboard users */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid #3473b6; outline-offset: 2px; border-radius: 4px; }

/* Respect "reduce motion": stop the endless marquees and floating blobs */
@media (prefers-reduced-motion: reduce) {
  .animate-marquee, .animate-blob, .animate-pulse { animation: none !important; }
  .marquee-wrap { overflow-x: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lift, .lift:hover { transition: none; transform: none; }
  html { scroll-behavior: auto; }
}
/* Pause the notices ticker while it has keyboard focus */
.marquee-wrap:focus-within .marquee-track, .marquee-wrap:focus-within .animate-marquee { animation-play-state: paused; }

/* ---------- Rich text (stories, activities, CMS pages) ----------
   The Tailwind typography plugin isn't part of the build, so "prose"
   blocks rendered as one unformatted run of text. */
.prose { color: #334155; line-height: 1.75; }
.prose > * + * { margin-top: 1em; }
.prose p { margin: 0 0 1em; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: #0f1b33; font-family: Fraunces, Georgia, serif; font-weight: 600; line-height: 1.25; margin: 1.6em 0 .6em; }
.prose h1 { font-size: 1.8em; } .prose h2 { font-size: 1.45em; } .prose h3 { font-size: 1.2em; } .prose h4 { font-size: 1.05em; }
.prose a { color: #1e3a8a; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #c2410c; }
.prose strong, .prose b { color: #0f1b33; font-weight: 700; }
.prose ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; }
.prose ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1em; }
.prose li { margin: .3em 0; }
.prose blockquote { border-left: 4px solid #f97316; padding: .2em 0 .2em 1em; color: #475569; font-style: italic; margin: 1.2em 0; }
.prose img { max-width: 100%; height: auto; border-radius: .75rem; margin: 1.2em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95em; margin: 1.2em 0; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid #e2e8f0; padding: .5em .75em; text-align: left; }
.prose th { background: #f5f8fc; color: #0f1b33; }
.prose hr { border: 0; border-top: 1px solid #e2e8f0; margin: 2em 0; }
.prose code { background: #f1f5f9; padding: .1em .35em; border-radius: .3em; font-size: .9em; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* ---------- Page heroes: grid lines + brand colour glows ----------
   Applied with class="hero-grid" on each blue hero section. */
.hero-grid {
  isolation: isolate;
  background-color: #1e3a8a;
  background-image:
    radial-gradient(900px 480px at 88% -12%, rgba(52, 115, 182, .70), transparent 62%),
    radial-gradient(560px 360px at -4% 115%, rgba(249, 115, 22, .22), transparent 65%),
    radial-gradient(520px 300px at 58% 125%, rgba(251, 191, 36, .14), transparent 70%),
    linear-gradient(135deg, #1f3c8f 0%, #1b3478 55%, #142a63 100%);
}
/* the grid: fine 56px lines, fading out towards the edges */
.hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .085) 1px, transparent 1px);
  background-size: 56px 56px;
  /* anchored top-right so the lit squares below sit exactly on the lines */
  background-position: right -1px top -1px;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 70% 30%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 85% at 70% 30%, #000 25%, transparent 80%);
}
/* thin brand-coloured line along the bottom edge */
.hero-grid::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, #f97316 22%, #fbbf24 48%, #3473b6 76%, transparent 100%);
}
/* keep text and controls above the grid */
.hero-grid > .relative { z-index: 2; }

/* a few lit grid squares on the right, aligned to the 56px grid */
.hero-cells { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-cells i { position: absolute; width: 55px; height: 55px; margin: 0 1px 0 0; }
.hero-cells i:nth-child(1) { right: calc(56px * 3); top: calc(56px * 1); background: rgba(255, 255, 255, .06); }
.hero-cells i:nth-child(2) { right: calc(56px * 5); top: calc(56px * 2); background: rgba(249, 115, 22, .22); box-shadow: 0 0 40px rgba(249, 115, 22, .35); }
.hero-cells i:nth-child(3) { right: calc(56px * 2); top: calc(56px * 3); background: rgba(52, 115, 182, .35); }
.hero-cells i:nth-child(4) { right: calc(56px * 7); top: calc(56px * 0); background: rgba(255, 255, 255, .045); }
.hero-cells i:nth-child(5) { right: calc(56px * 1); top: calc(56px * 4); background: rgba(251, 191, 36, .14); }
.hero-cells i:nth-child(6) { right: calc(56px * 9); top: calc(56px * 4); background: rgba(255, 255, 255, .05); }
@media (max-width: 767px) {
  .hero-grid::before { background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse 120% 90% at 70% 20%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 120% 90% at 70% 20%, #000 20%, transparent 80%); }
  .hero-cells i { width: 39px; height: 39px; }
  .hero-cells i:nth-child(1) { right: calc(40px * 1); top: calc(40px * 1); }
  .hero-cells i:nth-child(2) { right: calc(40px * 3); top: calc(40px * 0); }
  .hero-cells i:nth-child(3) { right: calc(40px * 0); top: calc(40px * 3); }
  .hero-cells i:nth-child(n+4) { display: none; }
}

/* eyebrow label as a small pill with a glowing dot */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .8rem .35rem .65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fdba74;
  letter-spacing: .08em;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.hero-eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .25), 0 0 12px rgba(249, 115, 22, .8);
}
/* headline: soft light sheen so it reads crisper on the grid */
.hero-grid h1 { text-shadow: 0 2px 24px rgba(10, 20, 50, .35); }

/* ===== Homepage hero (light, photo wall). Inner pages keep .hero-grid ===== */
.hh {
  isolation: isolate;
  background-color: #fbf8f2;
  background-image:
    radial-gradient(720px 520px at 86% 34%, rgba(52,115,182,.18), transparent 66%),
    radial-gradient(560px 400px at -6% 104%, rgba(249,115,22,.14), transparent 70%),
    radial-gradient(380px 260px at 40% -10%, rgba(251,191,36,.14), transparent 70%),
    linear-gradient(180deg, #fdfbf7 0%, #f6f0e5 100%);
  border-bottom: 1px solid rgba(15,27,51,.06);
}
.hh-rings {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 76% 44%, transparent 0 63px, rgba(30,58,138,.10) 63px 64px);
  -webkit-mask-image: radial-gradient(circle at 76% 44%, #000 0, #000 260px, transparent 640px);
          mask-image: radial-gradient(circle at 76% 44%, #000 0, #000 260px, transparent 640px);
}
.hh > .relative { z-index: 1; }
.hh-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hh-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2.5rem; } }

.hh-eyebrow {
  display: inline-flex; white-space: nowrap; align-items: center; gap: .5rem;
  font-size: 12px; font-weight: 600; color: #1e3a8a;
  background: #fff; border: 1px solid rgba(30,58,138,.12);
  border-radius: 999px; padding: .4rem .85rem .4rem .55rem;
  box-shadow: 0 4px 14px -6px rgba(30,58,138,.25);
}
.hh-eyebrow-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,.18); }

.hh-title { color: #0f1b33; }
.hh-title .grad-text {
  position: relative; display: inline-block; padding-right: .08em;
  background: linear-gradient(92deg, #f97316, #ea580c 60%, #c2410c);
  -webkit-background-clip: text; background-clip: text;
}
.hh-title .grad-text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .2em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 50 4, 120 3, 197 9' fill='none' stroke='%23fbbf24' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: .8;
}

.hh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.5rem; border-radius: .85rem; font-weight: 700; text-align: center;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.hh-btn-primary { background: #f97316; color: #fff; box-shadow: 0 12px 24px -10px rgba(234,88,12,.6); }
.hh-btn-primary:hover { background: #ea580c; transform: translateY(-1px); }
.hh-btn-primary svg { transition: transform .2s; }
.hh-btn-primary:hover svg { transform: translateX(3px); }
.hh-btn-ghost { color: #1e3a8a; background: rgba(255,255,255,.7); border: 1.5px solid rgba(30,58,138,.25); }
.hh-btn-ghost:hover { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }

.hh-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 36rem;
  background: #fff; border: 1px solid rgba(15,27,51,.07); border-radius: 1.25rem;
  box-shadow: 0 18px 40px -24px rgba(15,27,51,.35); overflow: hidden;
}
.hh-stat { padding: .9rem 1.1rem; border-color: rgba(15,27,51,.07); border-style: solid; border-width: 0; }
.hh-stat:nth-child(odd) { border-right-width: 1px; }
.hh-stat:nth-child(-n+2) { border-bottom-width: 1px; }
.hh-stat-num { font-size: 1.6rem; font-weight: 600; color: #1e3a8a; line-height: 1.1; }
.hh-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin-top: .2rem; font-weight: 600; }
@media (min-width: 640px) {
  .hh-stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .hh-stat { border-width: 0 !important; }
  .hh-stat + .hh-stat { border-left-width: 1px !important; }
}

/* photo wall */
.hh-stage { position: relative; margin: 0 .25rem; }
.hh-stage::before {
  content: ""; position: absolute; inset: 22px -14px -14px 22px; border-radius: 30px; z-index: 0;
  background: linear-gradient(135deg, #f97316, #fbbf24); opacity: .9;
}
.hh-wall {
  position: relative; z-index: 1; height: 380px; overflow: hidden;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 0 10px;
  background: #1e3a8a; border-radius: 28px;
  box-shadow: 0 30px 60px -30px rgba(15,27,51,.6);
}
.hh-col { position: relative; overflow: hidden; height: 100%; }
.hh-track { display: flex; flex-direction: column; gap: 10px; animation: hh-up 46s linear infinite; will-change: transform; }
.hh-col-2 .hh-track { animation-name: hh-down; animation-duration: 54s; }
.hh-col-3 .hh-track { animation-duration: 40s; }
.hh-track img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; background: #27458f; }
.hh-wall:hover .hh-track { animation-play-state: paused; }
@keyframes hh-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 5px)); } }
@keyframes hh-down { from { transform: translateY(calc(-50% - 5px)); } to { transform: translateY(0); } }
.hh-single { grid-column: 1 / -1; width: calc(100% + 20px); margin: 0 -10px; height: 100%; object-fit: cover; }
.hh-wall::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 28px;
  background: linear-gradient(180deg, rgba(30,58,138,.85) 0%, rgba(30,58,138,0) 18%, rgba(30,58,138,0) 58%, rgba(20,42,99,.92) 100%);
}
.hh-wall-caption { position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 2; pointer-events: none; }

.hh-seal {
  position: absolute; z-index: 3; left: -22px; top: 46%; width: 104px; height: 104px;
  border-radius: 999px; background: #0f1b33; color: #fff;
  display: grid; place-items: center; box-shadow: 0 14px 30px -12px rgba(15,27,51,.7);
  border: 4px solid #fbf8f2;
}
.hh-seal-ring { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); animation: hh-spin 22s linear infinite; }
.hh-seal-ring text { fill: #fde68a; font-size: 10.5px; font-weight: 700; letter-spacing: 2.2px; }
.hh-seal-core { position: relative; text-align: center; font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 19px; line-height: 1; color: #fff; }
.hh-seal-core small { display: block; font-family: Outfit, system-ui, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fdba74; margin-bottom: 3px; }
@keyframes hh-spin { to { transform: rotate(360deg); } }

.hh-float {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid #f1f5f9; border-radius: 1rem; padding: .8rem .9rem;
  box-shadow: 0 18px 36px -16px rgba(15,27,51,.45);
  width: 15rem; max-width: calc(100% - 1rem);
}
.hh-float-top { top: -1.1rem; right: .5rem; }
.hh-float-bottom { bottom: -1.4rem; right: 1.5rem; display: none; transition: border-color .2s, transform .2s; }
.hh-float-bottom:hover { border-color: rgba(52,115,182,.4); transform: translateY(-2px); }
.hh-date {
  width: 2.75rem; height: 2.75rem; border-radius: .75rem; flex-shrink: 0;
  display: grid; place-content: center; text-align: center;
  background: rgba(249,115,22,.1); color: #c2410c; font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1.05;
}
.hh-date b { display: block; font-size: 17px; color: #ea580c; }

/* notices ticker */
.hh-ticker {
  display: flex; align-items: center; gap: 1rem; height: 3rem; padding: 0 1rem 0 .4rem;
  background: #1e3a8a; border-radius: 999px; overflow: hidden;
  box-shadow: 0 16px 30px -20px rgba(15,27,51,.7);
  margin-top: 3rem;
}
@media (min-width: 1024px) { .hh-ticker { margin-top: 4rem; } }
.hh-ticker-label {
  flex-shrink: 0; background: #f97316; color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .45rem .9rem;
}
.hh-ticker-track { width: max-content; }
.hh-ticker .marquee-wrap {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

@media (min-width: 640px) {
  .hh-wall { height: 460px; }
  .hh-float-bottom { display: flex; }
}
@media (min-width: 1024px) {
  .hh-wall { height: 540px; }
  .hh-stage { margin: 0 0 0 1.5rem; }
  .hh-seal { left: -52px; width: 116px; height: 116px; }
  .hh-float-top { right: auto; left: 2.5rem; }
  .hh-float-bottom { right: -1.25rem; }
}
@media (max-width: 1023px) {
  .hh-rings { background-image: repeating-radial-gradient(circle at 50% 78%, transparent 0 47px, rgba(30,58,138,.09) 47px 48px);
    -webkit-mask-image: radial-gradient(circle at 50% 78%, #000 0, #000 160px, transparent 460px);
            mask-image: radial-gradient(circle at 50% 78%, #000 0, #000 160px, transparent 460px); }
  .hh-seal { left: -8px; top: -1.6rem; width: 88px; height: 88px; }
  .hh-seal-core { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-track, .hh-seal-ring { animation: none !important; }
}

/* ===== Homepage sections (hp-*) ===== */
.hp-section { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 1024px) { .hp-section { padding-top: 6rem; padding-bottom: 6rem; } }
.hp-cream { background: linear-gradient(180deg, #fbf8f2, #f7f1e6); border-top: 1px solid rgba(15,27,51,.05); border-bottom: 1px solid rgba(15,27,51,.05); }

/* headings */
.hp-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ea580c; }
.hp-eyebrow::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #f97316, #fbbf24); }
.hp-eyebrow-light { color: #fdba74; }
.hp-h2 { margin-top: .6rem; font-weight: 600; font-size: 32px; line-height: 1.08; letter-spacing: -.01em; color: #0f1b33; }
@media (min-width: 1024px) { .hp-h2 { font-size: 44px; } }
.hp-h2 em { font-style: italic; color: #ea580c; }
.hp-h2-light { color: #fff; }
.hp-h2-light em { color: #fbbf24; }
.hp-lead { margin-top: 1rem; font-size: 15.5px; line-height: 1.7; color: #475569; max-width: 40rem; }
.hp-lead-light { color: rgba(219,234,254,.85); }
.hp-mini { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; }

.hp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.hp-head-center { justify-content: center; text-align: center; }
.hp-head-center .hp-lead { margin-left: auto; margin-right: auto; }

.hp-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.5rem; font-weight: 700; font-size: 14.5px; color: #1e3a8a; transition: gap .2s, color .2s; }
.hp-link svg { width: 1rem; height: 1rem; }
.hp-link:hover { gap: .75rem; color: #ea580c; }
.hp-pill-link { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; color: #1e3a8a; background: rgba(30,58,138,.07); border-radius: 999px; padding: .45rem .9rem; transition: background-color .2s, color .2s; white-space: nowrap; }
.hp-pill-link:hover { background: #1e3a8a; color: #fff; }
.hp-btn-light { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.75rem; padding: .8rem 1.3rem; border-radius: .85rem; font-weight: 700; font-size: 14px; color: #1e3a8a; background: #fff; transition: transform .2s, background-color .2s; }
.hp-btn-light svg { width: 1rem; height: 1rem; }
.hp-btn-light:hover { background: #fde68a; transform: translateY(-1px); }
.hp-btn-glass { color: #fff; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.25); }
.hp-btn-glass:hover { background: rgba(255,255,255,.2); }
.hp-btn-small { display: inline-block; white-space: nowrap; flex-shrink: 0; padding: .55rem 1.1rem; border-radius: .65rem; background: #1e3a8a; color: #fff; font-weight: 700; font-size: 13px; transition: background-color .2s; }
.hp-btn-small:hover { background: #3473b6; }

/* cards */
.hp-card { background: #fff; border: 1px solid rgba(15,27,51,.07); border-radius: 1.5rem; box-shadow: 0 18px 40px -28px rgba(15,27,51,.35); overflow: hidden; }
.hp-pad { padding: 1.4rem; }
.hp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; border-bottom: 1px solid rgba(15,27,51,.06); background: linear-gradient(180deg, #fdfbf7, #fff); }
.hp-card-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.hp-card-title { font-weight: 600; font-size: 19px; color: #0f1b33; display: inline-flex; align-items: center; gap: .55rem; }

/* quick tiles */
.hp-quick { margin-top: -2rem; }
.hp-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .85rem; }
@media (min-width: 1024px) { .hp-quick-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.1rem; } }
.hp-tile {
  --c: #1e3a8a; --bg: rgba(30,58,138,.08);
  position: relative; display: flex; flex-direction: column; gap: .3rem; min-width: 0;
  background: #fff; border: 1px solid rgba(15,27,51,.07); border-radius: 1.25rem; padding: 1.1rem;
  box-shadow: 0 16px 36px -26px rgba(15,27,51,.45); overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.hp-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.hp-tile:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -24px rgba(15,27,51,.45); border-color: transparent; }
.hp-tile:hover::after { transform: scaleX(1); }
.hp-tile-blue { --c: #1e3a8a; --bg: rgba(30,58,138,.08); }
.hp-tile-orange { --c: #ea580c; --bg: rgba(249,115,22,.1); }
.hp-tile-red { --c: #dc2626; --bg: rgba(239,68,68,.1); }
.hp-tile-green { --c: #0f8a45; --bg: rgba(15,167,81,.1); }
.hp-tile-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: .55rem; }
.hp-tile-icon { width: 2.75rem; height: 2.75rem; border-radius: .9rem; display: grid; place-items: center; color: var(--c); background: var(--bg); }
.hp-tile-icon svg { width: 1.35rem; height: 1.35rem; }
.hp-tile-arrow { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; color: #94a3b8; border: 1px solid rgba(15,27,51,.08); transition: background-color .25s, color .25s, border-color .25s, transform .25s; }
.hp-tile-arrow svg { width: .9rem; height: .9rem; }
.hp-tile:hover .hp-tile-arrow { background: var(--c); border-color: var(--c); color: #fff; transform: rotate(45deg); }
.hp-tile-title { font-weight: 600; font-size: 16px; color: #0f1b33; line-height: 1.2; }
.hp-tile-text { font-size: 12.5px; color: #64748b; line-height: 1.45; }
@media (min-width: 640px) { .hp-tile { padding: 1.35rem; } .hp-tile-title { font-size: 17px; } .hp-tile-text { font-size: 13px; } }

/* about */
.hp-split { display: grid; grid-template-columns: minmax(0,1fr); gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hp-split { grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 4rem; } }
.hp-pillars { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid rgba(15,27,51,.08); border-bottom: 1px solid rgba(15,27,51,.08); }
.hp-pillar { display: flex; flex-direction: column; gap: .15rem; padding: 1.1rem .9rem 1.1rem 0; }
.hp-pillar + .hp-pillar { padding-left: .9rem; border-left: 1px solid rgba(15,27,51,.08); }
.hp-pillar-num { font-size: 11px; font-weight: 700; color: #f97316; letter-spacing: .1em; }
.hp-pillar-title { font-weight: 600; font-size: 18px; color: #1e3a8a; }
.hp-pillar-text { font-size: 12.5px; color: #64748b; line-height: 1.4; }
@media (min-width: 640px) { .hp-pillar { padding-right: 1.25rem; } .hp-pillar + .hp-pillar { padding-left: 1.25rem; } .hp-pillar-title { font-size: 20px; } }

.hp-people { list-style: none; margin: 0; padding: .4rem 0; }
.hp-person { display: flex; align-items: center; gap: .85rem; padding: .75rem 1.4rem; transition: background-color .2s; }
.hp-person:hover { background: #fbf8f2; }
.hp-avatar { width: 3rem; height: 3rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(249,115,22,.35); }
.hp-avatar-initials { display: grid; place-items: center; font-weight: 600; color: #1e3a8a; background: linear-gradient(135deg, #e0e9f7, #fdf0e1); }
.hp-person-name { display: block; font-weight: 600; font-size: 14.5px; color: #0f1b33; line-height: 1.25; }
.hp-person-role { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #64748b; margin-top: .15rem; }

/* spotlight (dark) */
.hp-dark { position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background-color: #142a63;
  background-image: radial-gradient(640px 420px at 100% 0%, rgba(52,115,182,.55), transparent 70%), radial-gradient(520px 360px at 0% 100%, rgba(249,115,22,.22), transparent 70%), linear-gradient(135deg, #1e3a8a, #142a63); }
.hp-dark-rings { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 8% 30%, transparent 0 55px, rgba(255,255,255,.07) 55px 56px);
  -webkit-mask-image: radial-gradient(circle at 8% 30%, #000 0, #000 200px, transparent 520px); mask-image: radial-gradient(circle at 8% 30%, #000 0, #000 200px, transparent 520px); }
.hp-dark > .relative { z-index: 1; }
.hp-spot-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .hp-spot-grid { grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: 3rem; } }
.hp-spot-cards { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; scroll-padding: 0 1rem; scrollbar-width: none; }
.hp-spot-cards::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .hp-spot-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); overflow: visible; margin: 0; padding: 0; } }
.hp-spot { position: relative; flex: 0 0 68%; scroll-snap-align: start; aspect-ratio: 4 / 5; border-radius: 1.4rem; overflow: hidden; background: #27458f; box-shadow: 0 24px 44px -24px rgba(0,0,0,.6); }
.hp-spot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.hp-spot:hover img { transform: scale(1.05); }
.hp-spot::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,27,51,0) 35%, rgba(15,27,51,.9) 100%); }
.hp-spot-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.1rem; }
.hp-spot h3 { font-weight: 600; font-size: 19px; margin-top: .55rem; line-height: 1.2; }
.hp-spot p { font-size: 12.5px; color: rgba(226,232,240,.85); margin-top: .3rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-chip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #fff; background: #f97316; border-radius: 999px; padding: .25rem .6rem; }
.hp-spot-empty { padding: 2rem; border: 1.5px dashed rgba(255,255,255,.25); border-radius: 1.4rem; color: rgba(219,234,254,.8); text-align: center; flex: 1 0 100%; grid-column: 1 / -1; }

/* events */
.hp-events-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 3rem; }
@media (min-width: 1024px) { .hp-events-grid { grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 2.5rem; align-items: start; } }
.hp-events { display: grid; gap: 1rem; }
.hp-event { position: relative; display: flex; gap: 1rem; align-items: stretch; background: #fff; border: 1px solid rgba(15,27,51,.07); border-radius: 1.4rem; padding: .85rem; box-shadow: 0 16px 36px -28px rgba(15,27,51,.45); transition: transform .25s, box-shadow .25s, border-color .25s; }
.hp-event:hover { transform: translateY(-3px); border-color: rgba(52,115,182,.3); box-shadow: 0 24px 44px -26px rgba(15,27,51,.45); }
.hp-event-date { flex-shrink: 0; width: 5.25rem; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .75rem .4rem; color: #fff;
  background: linear-gradient(160deg, #1e3a8a, #3473b6); }
.hp-event-day { font-size: 34px; font-weight: 600; line-height: 1; }
.hp-event-mon { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fdba74; margin-top: .3rem; }
.hp-event-wd { font-size: 10.5px; color: rgba(219,234,254,.8); margin-top: .15rem; }
.hp-event-body { flex: 1; min-width: 0; padding: .3rem 0; display: flex; flex-direction: column; }
.hp-event-when { font-size: 11.5px; font-weight: 700; color: #ea580c; letter-spacing: .02em; }
.hp-event h3 { font-weight: 600; font-size: 19px; color: #0f1b33; line-height: 1.25; margin-top: .2rem; }
.hp-event-desc { font-size: 13.5px; color: #64748b; margin-top: .3rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-event-meta { display: flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .6rem; font-size: 12.5px; font-weight: 600; color: #475569; }
.hp-event-meta svg { width: .95rem; height: .95rem; color: #94a3b8; flex-shrink: 0; }
.hp-event-thumb { display: none; flex-shrink: 0; width: 8.5rem; border-radius: 1rem; overflow: hidden; background: #f1f5f9; }
.hp-event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hp-event-go { display: none; align-self: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 999px; place-items: center; color: #1e3a8a; background: rgba(30,58,138,.07); transition: background-color .25s, color .25s; }
.hp-event-go svg { width: 1rem; height: 1rem; }
.hp-event:hover .hp-event-go { background: #f97316; color: #fff; }
@media (min-width: 640px) {
  .hp-event { padding: 1rem; gap: 1.25rem; }
  .hp-event-date { width: 6rem; }
  .hp-event-thumb { display: block; }
  .hp-event-go { display: grid; margin-right: .25rem; }
}
.hp-empty { text-align: center; padding: 2.5rem 1.5rem; border: 1.5px dashed rgba(15,27,51,.14); border-radius: 1.4rem; background: #fdfbf7; }
.hp-empty-icon { width: 3rem; height: 3rem; margin: 0 auto; border-radius: 1rem; display: grid; place-items: center; color: #ea580c; background: rgba(249,115,22,.1); }
.hp-empty-icon svg { width: 1.4rem; height: 1.4rem; }
.hp-empty-title { margin-top: .9rem; font-weight: 600; font-size: 18px; color: #0f1b33; }
.hp-empty-text { margin-top: .3rem; font-size: 13.5px; color: #64748b; }

/* news timeline */
.hp-timeline { list-style: none; margin: 0; padding: .6rem 1.4rem 1rem; position: relative; }
.hp-timeline li { position: relative; padding-left: 1.4rem; }
.hp-timeline li::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: rgba(15,27,51,.08); }
.hp-timeline li:first-child::before { top: 1.3rem; }
.hp-timeline li:last-child::before { bottom: calc(100% - 1.3rem); }
.hp-timeline li:only-child::before { display: none; }
.hp-timeline li::after { content: ""; position: absolute; left: 0; top: 1.05rem; width: 10px; height: 10px; border-radius: 999px; background: #fff; border: 2px solid #f97316; }
.hp-timeline-item { display: block; padding: .8rem .6rem; border-radius: .8rem; transition: background-color .2s; }
a.hp-timeline-item:hover { background: #fbf8f2; }
.hp-timeline-date { display: block; font-size: 11.5px; font-weight: 600; color: #94a3b8; }
.hp-timeline-title { display: block; font-weight: 600; font-size: 14.5px; color: #0f1b33; margin-top: .15rem; line-height: 1.35; }
a.hp-timeline-item:hover .hp-timeline-title { color: #1e3a8a; }

/* get involved */
.hp-involve { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
@media (min-width: 768px) { .hp-involve { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; } }
.hp-involve-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(15,27,51,.07); border-radius: 1.5rem; padding: 1.6rem; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(15,27,51,.4); transition: transform .25s, box-shadow .25s; }
.hp-involve-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -28px rgba(15,27,51,.45); }
.hp-involve-num { position: absolute; right: 1.2rem; top: .6rem; font-size: 64px; font-weight: 600; line-height: 1; color: rgba(30,58,138,.06); }
.hp-involve-icon { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; }
.hp-involve-icon svg { width: 1.45rem; height: 1.45rem; }
.hp-ic-blue { color: #1e3a8a; background: rgba(30,58,138,.08); }
.hp-ic-orange { color: #ea580c; background: rgba(249,115,22,.12); }
.hp-ic-green { color: #0f8a45; background: rgba(15,167,81,.1); }
.hp-involve-card h3 { font-weight: 600; font-size: 21px; color: #0f1b33; margin-top: 1.1rem; }
.hp-involve-card p { font-size: 14px; line-height: 1.65; color: #64748b; margin-top: .45rem; flex: 1; }
.hp-involve-card .hp-link { margin-top: 1.1rem; }
.hp-involve-featured { background: linear-gradient(160deg, #1e3a8a, #142a63); border-color: transparent; color: #fff; }
.hp-involve-featured .hp-involve-num { color: rgba(255,255,255,.08); }
.hp-involve-featured .hp-ic-orange { background: rgba(249,115,22,.2); color: #fdba74; }
.hp-involve-featured h3 { color: #fff; }
.hp-involve-featured p { color: rgba(219,234,254,.85); }
.hp-involve-featured .hp-link { color: #fbbf24; }
.hp-involve-featured .hp-link:hover { color: #fff; }

/* businesses */
.hp-biz-grid { display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1rem; padding: .25rem 1rem 1.5rem; scroll-padding: 0 1rem; scrollbar-width: none; }
.hp-biz-grid::-webkit-scrollbar { display: none; }
.hp-biz-grid > .hp-biz { flex: 0 0 78%; scroll-snap-align: start; }
@media (min-width: 640px) { .hp-biz-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; overflow: visible; margin: 0; padding: 0; } }
@media (min-width: 640px) { .hp-biz-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .hp-biz-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.1rem; } }
.hp-biz { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid rgba(15,27,51,.07); border-radius: 1.4rem; padding: 1.3rem; box-shadow: 0 16px 36px -30px rgba(15,27,51,.45); transition: transform .25s, box-shadow .25s, border-color .25s; }
.hp-biz:hover { transform: translateY(-4px); border-color: rgba(249,115,22,.35); box-shadow: 0 24px 44px -28px rgba(15,27,51,.45); }
.hp-biz-top { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.hp-biz-logo { width: 3rem; height: 3rem; border-radius: .9rem; object-fit: contain; background: #fff; border: 1px solid rgba(15,27,51,.08); flex-shrink: 0; }
.hp-biz-initials { display: grid; place-items: center; font-weight: 600; font-size: 15px; color: #1e3a8a; background: linear-gradient(135deg, #e0e9f7, #fdf0e1); border: 0; }
.hp-biz-cat { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #c2410c; background: rgba(249,115,22,.1); border-radius: 999px; padding: .3rem .6rem; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-biz h3 { font-weight: 600; font-size: 17px; color: #0f1b33; margin-top: .6rem; line-height: 1.25; }
.hp-biz-desc { font-size: 13px; color: #64748b; line-height: 1.55; margin-top: .35rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp-biz-owner { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid rgba(15,27,51,.06); font-size: 12.5px; font-weight: 600; color: #475569; }
.hp-biz-owner-dot { width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: #fff; background: #1e3a8a; flex-shrink: 0; }
.hp-biz-add { align-items: flex-start; justify-content: center; background: #fdfbf7; border: 1.5px dashed rgba(234,88,12,.35); box-shadow: none; }
.hp-biz-plus { width: 3rem; height: 3rem; border-radius: 999px; display: grid; place-items: center; color: #fff; background: #f97316; box-shadow: 0 10px 20px -10px rgba(234,88,12,.7); transition: transform .25s; }
.hp-biz-plus svg { width: 1.3rem; height: 1.3rem; }
.hp-biz-add:hover .hp-biz-plus { transform: rotate(90deg); }
.hp-biz-add-title { font-weight: 600; font-size: 17px; color: #0f1b33; margin-top: 1rem; }
.hp-biz-add-text { font-size: 13px; color: #64748b; margin-top: .3rem; line-height: 1.5; }

/* community */
.hp-community { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .hp-community { grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 1.5rem; } }
.hp-community-side { display: grid; gap: 1.25rem; align-content: start; }
.hp-quote { position: relative; margin: 0; background: #fff; border: 1px solid rgba(15,27,51,.07); border-radius: 1.75rem; padding: 2rem 1.6rem; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(15,27,51,.4); display: flex; flex-direction: column; justify-content: center; }
.hp-quote::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 999px; background: repeating-radial-gradient(circle, transparent 0 17px, rgba(249,115,22,.14) 17px 18px); pointer-events: none; }
.hp-quote-mark { width: 3rem; height: 3rem; color: #f97316; margin-bottom: 1rem; }
.hp-quote-text { position: relative; margin: .75rem 0 0; font-size: 21px; line-height: 1.5; font-style: italic; color: #0f1b33; }
.hp-quote-by { position: relative; display: flex; align-items: center; gap: .85rem; margin-top: 1.75rem; }
@media (min-width: 1024px) { .hp-quote { padding: 2.75rem; } .hp-quote-text { font-size: 25px; } }
.hp-batches { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .5rem; }
@media (min-width: 640px) { .hp-batches { grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (min-width: 1024px) { .hp-batches { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.hp-batch { display: grid; place-items: center; height: 2.6rem; border-radius: .75rem; font-weight: 700; font-size: 13.5px; color: #1e3a8a; background: #f5f8fc; border: 1px solid rgba(30,58,138,.08); transition: background-color .2s, color .2s, transform .2s; }
.hp-batch:hover { background: #1e3a8a; color: #fff; transform: translateY(-2px); }
.hp-batch-all { background: #f97316; border-color: #f97316; color: #fff; }
.hp-batch-all:hover { background: #ea580c; }
.hp-cake { width: 2rem; height: 2rem; border-radius: .65rem; display: inline-grid; place-items: center; color: #ea580c; background: rgba(249,115,22,.1); }
.hp-cake svg { width: 1.05rem; height: 1.05rem; }
.hp-bdays { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hp-bday { display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: .9rem; background: #fdfbf7; border: 1px solid rgba(15,27,51,.05); }
.hp-bday-avatar { width: 2.4rem; height: 2.4rem; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; font-weight: 600; font-size: 13px; color: #1e3a8a; background: linear-gradient(135deg, #e0e9f7, #fdf0e1); }
.hp-bday-date { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #c2410c; background: rgba(249,115,22,.1); border-radius: 999px; padding: .3rem .65rem; }
.hp-bday-locked { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-radius: 1rem; background: #fdfbf7; border: 1px dashed rgba(15,27,51,.12); }
.hp-bday-locked p { font-size: 13.5px; color: #475569; line-height: 1.5; }

/* final CTA */
.hp-cta { position: relative; overflow: hidden; isolation: isolate; border-radius: 2rem; padding: 2.5rem 1.5rem;
  background-color: #142a63;
  background-image: radial-gradient(520px 360px at 100% 100%, rgba(249,115,22,.3), transparent 70%), radial-gradient(520px 360px at 0% 0%, rgba(52,115,182,.6), transparent 70%), linear-gradient(135deg, #1e3a8a, #142a63);
  box-shadow: 0 30px 60px -36px rgba(15,27,51,.7); }
.hp-cta-rings { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 92% 50%, transparent 0 47px, rgba(255,255,255,.08) 47px 48px);
  -webkit-mask-image: radial-gradient(circle at 92% 50%, #000 0, #000 160px, transparent 420px); mask-image: radial-gradient(circle at 92% 50%, #000 0, #000 160px, transparent 420px); }
.hp-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr); gap: 1.75rem; align-items: center; }
.hp-cta-actions { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .hp-cta { padding: 3rem; } .hp-cta-actions { flex-direction: row; } }
@media (min-width: 1024px) { .hp-cta { padding: 3.5rem 4rem; } .hp-cta-inner { grid-template-columns: minmax(0,1fr) auto; gap: 3rem; } }

@media (prefers-reduced-motion: reduce) {
  .hp-tile, .hp-event, .hp-biz, .hp-involve-card, .hp-spot img, .hp-batch { transition: none !important; transform: none !important; }
}

/* ===== Shared UI kit (ui-*) used by directory, list and about pages ===== */
.ui-toolbar {
  position: relative; z-index: 5; margin-top: -2rem;
  display: flex; flex-direction: column; gap: .65rem;
  background: #fff; border: 1px solid rgba(15,27,51,.07); border-radius: 1.25rem; padding: .65rem;
  box-shadow: 0 22px 46px -28px rgba(15,27,51,.45);
}
@media (min-width: 768px) { .ui-toolbar { flex-direction: row; align-items: center; } }
.ui-search { position: relative; flex: 1; min-width: 0; }
.ui-search-icon { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; color: #94a3b8; pointer-events: none; }
.ui-spin { display: none; position: absolute; right: .95rem; top: 50%; margin-top: -.5rem; width: 1rem; height: 1rem; color: #3473b6; }
.ui-input, .ui-select {
  width: 100%; height: 3rem; border-radius: .9rem; border: 1px solid transparent; background: #f5f7fb;
  font-size: 14.5px; color: #0f1b33; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.ui-input { padding: 0 2.6rem 0 2.75rem; }
.ui-input::placeholder { color: #94a3b8; }
.ui-input:focus, .ui-select:focus { outline: none; background: #fff; border-color: #3473b6; box-shadow: 0 0 0 4px rgba(52,115,182,.15); }
.ui-select-wrap { position: relative; flex-shrink: 0; }
@media (min-width: 768px) { .ui-select-wrap { width: 17rem; } .ui-select-sm { width: 12rem; } }
.ui-select { appearance: none; -webkit-appearance: none; padding: 0 2.5rem 0 1rem; font-weight: 600; cursor: pointer; }
.ui-select-chev { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: #64748b; pointer-events: none; }

.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 3rem; padding: 0 1.25rem; border-radius: .9rem; font-weight: 700; font-size: 14px; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.ui-btn svg { width: 1rem; height: 1rem; }
.ui-btn-sm { height: 2.35rem; padding: 0 1rem; border-radius: .7rem; font-size: 13px; }
.ui-btn-orange { background: #f97316; color: #fff; box-shadow: 0 12px 22px -12px rgba(234,88,12,.7); }
.ui-btn-orange:hover { background: #ea580c; transform: translateY(-1px); }
.ui-btn-blue { background: #1e3a8a; color: #fff; }
.ui-btn-blue:hover { background: #3473b6; }
.ui-btn-green { background: #0fa751; color: #fff; }
.ui-btn-green:hover { background: #0c8a43; }
.ui-btn-ghost { color: #1e3a8a; background: #fff; border: 1.5px solid rgba(30,58,138,.2); }
.ui-btn-ghost:hover { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
.ui-btn-ghost-light { color: #fff; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.25); }
.ui-btn-ghost-light:hover { background: rgba(255,255,255,.2); }

.ui-chips { display: flex; gap: .5rem; overflow-x: auto; margin: 1.1rem -1rem 0; padding: .2rem 1rem; scrollbar-width: none; }
.ui-chips::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .ui-chips { flex-wrap: wrap; overflow: visible; margin: 1.1rem 0 0; padding: 0; } }
.ui-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; height: 2.3rem; padding: 0 .6rem 0 .95rem; border-radius: 999px; font-size: 13px; font-weight: 600; color: #334155; background: #fff; border: 1px solid rgba(15,27,51,.1); transition: background-color .2s, color .2s, border-color .2s; }
.ui-chip span { min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #64748b; background: #f1f5f9; }
.ui-chip:hover { border-color: #1e3a8a; color: #1e3a8a; }
.ui-chip.is-active { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }
.ui-chip.is-active span { background: rgba(255,255,255,.18); color: #fff; }

.ui-results { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 1.25rem; font-size: 14px; color: #64748b; }
.ui-results strong { color: #0f1b33; font-weight: 700; }
.ui-clear { font-size: 13px; font-weight: 700; color: #ea580c; text-decoration: underline; text-underline-offset: 3px; }
.ui-clear:hover { color: #c2410c; }
.ui-loading { display: none; position: absolute; inset: 0; z-index: 10; background: rgba(255,255,255,.55); border-radius: 1.5rem; }

/* switch */
.ui-switch { display: inline-flex; align-items: center; gap: .6rem; height: 3rem; padding: 0 1rem; border-radius: .9rem; background: #f5f7fb; cursor: pointer; flex-shrink: 0; user-select: none; }
.ui-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-switch-track { position: relative; width: 2.4rem; height: 1.4rem; border-radius: 999px; background: #cbd5e1; transition: background-color .2s; flex-shrink: 0; }
.ui-switch-track::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.ui-switch input:checked + .ui-switch-track { background: #f97316; }
.ui-switch input:checked + .ui-switch-track::after { transform: translateX(1rem); }
.ui-switch input:focus-visible + .ui-switch-track { box-shadow: 0 0 0 3px rgba(52,115,182,.35); }
.ui-switch-label { font-size: 13.5px; font-weight: 700; color: #334155; }

/* guest lock bar */
.ui-lock-bar { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 1rem 1.1rem; gap: .9rem; }
.ui-lock-icon { width: 2.75rem; height: 2.75rem; border-radius: .9rem; display: grid; place-items: center; color: #ea580c; background: rgba(249,115,22,.1); flex-shrink: 0; }
.ui-lock-icon svg { width: 1.25rem; height: 1.25rem; }
.ui-lock-text { flex: 1; min-width: 14rem; font-size: 14px; color: #475569; line-height: 1.5; }
.ui-lock-text strong { color: #0f1b33; }
.ui-lock-bar + .relative { margin-top: 1.75rem; }

/* card bands (coloured header strip with rings) */
.ui-band { position: relative; height: 5.25rem; overflow: hidden; display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .8rem .9rem; }
.ui-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-radial-gradient(circle at 100% 0%, transparent 0 17px, rgba(255,255,255,.14) 17px 18px); }
.ui-band > * { position: relative; z-index: 1; }
.ui-band-blue { background: linear-gradient(135deg, #1e3a8a, #3473b6); }
.ui-band-orange { background: linear-gradient(135deg, #ea580c, #fbbf24); }
.ui-band-green { background: linear-gradient(135deg, #0c7a3d, #34b37a); }
.ui-band-ink { background: linear-gradient(135deg, #0f1b33, #314a7e); }
.ui-tone-blue { color: #1e3a8a; background: linear-gradient(135deg, #e0e9f7, #eef3fb); }
.ui-tone-orange { color: #c2410c; background: linear-gradient(135deg, #ffedd5, #fef3c7); }
.ui-tone-green { color: #0c7a3d; background: linear-gradient(135deg, #dcfce7, #ecfdf5); }
.ui-tone-ink { color: #0f1b33; background: linear-gradient(135deg, #e2e8f0, #f1f5f9); }
.ui-go { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.18); transition: background-color .25s, color .25s, transform .25s; flex-shrink: 0; }
.ui-go svg { width: .9rem; height: .9rem; }
.ui-icon-btn { position: relative; z-index: 2; width: 2.25rem; height: 2.25rem; border-radius: .7rem; display: grid; place-items: center; color: #1e3a8a; background: rgba(30,58,138,.07); transition: background-color .2s, color .2s; }
.ui-icon-btn svg { width: 1rem; height: 1rem; }
.ui-icon-btn:hover { background: #1e3a8a; color: #fff; }
.ui-lock-link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; font-size: 12px; font-weight: 700; color: #64748b; background: #f5f7fb; border-radius: 999px; padding: .4rem .75rem; transition: background-color .2s, color .2s; white-space: nowrap; }
.ui-lock-link svg { width: .85rem; height: .85rem; }
.ui-lock-link:hover { background: #fff1e6; color: #c2410c; }

/* empty state */
.ui-empty { grid-column: 1 / -1; text-align: center; padding: 3.5rem 1.5rem; border: 1.5px dashed rgba(15,27,51,.14); border-radius: 1.5rem; background: #fdfbf7; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ui-empty-icon { width: 3.25rem; height: 3.25rem; border-radius: 1rem; display: grid; place-items: center; color: #ea580c; background: rgba(249,115,22,.1); margin-bottom: .6rem; }
.ui-empty-icon svg { width: 1.5rem; height: 1.5rem; }
.ui-empty-title { font-weight: 600; font-size: 19px; color: #0f1b33; }
.ui-empty-text { font-size: 14px; color: #64748b; max-width: 26rem; }
.ui-empty .ui-btn { margin-top: 1rem; }

/* guest call-to-action strip */
.ui-cta-strip { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; justify-content: space-between; border-radius: 1.5rem; padding: 1.75rem; color: #fff;
  background-image: repeating-radial-gradient(circle at 100% 50%, transparent 0 39px, rgba(255,255,255,.07) 39px 40px), linear-gradient(135deg, #1e3a8a, #142a63); }
.ui-cta-strip-title { font-weight: 600; font-size: 22px; }
.ui-cta-strip-text { font-size: 14px; color: rgba(219,234,254,.85); margin-top: .3rem; }
.ui-cta-strip-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (min-width: 1024px) { .ui-cta-strip { flex-direction: row; align-items: center; padding: 2rem 2.5rem; } }

/* shared card shell */
.bz-card, .mb-card, .ev-card, .sp-card, .nw-card, .al-card, .jb-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff;
  border: 1px solid rgba(15,27,51,.07); border-radius: 1.4rem; overflow: hidden;
  box-shadow: 0 16px 36px -30px rgba(15,27,51,.5);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.bz-card:hover, .mb-card:hover, .ev-card:hover, .sp-card:hover, .nw-card:hover, .al-card:hover, .jb-card:hover {
  transform: translateY(-4px); box-shadow: 0 26px 48px -28px rgba(15,27,51,.5); border-color: rgba(52,115,182,.25);
}
.bz-card:hover .ui-go { background: #fff; color: #1e3a8a; transform: rotate(45deg); }

/* business cards */
.bz-grid, .mb-grid, .ev-grid, .sp-grid, .nw-grid, .al-grid, .jb-grid, .cm-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.1rem; }
@media (min-width: 640px) { .bz-grid, .ev-grid, .nw-grid, .al-grid, .jb-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .bz-grid, .ev-grid, .nw-grid, .al-grid, .jb-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.4rem; } }
.bz-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .3rem .65rem; max-width: calc(100% - 2.75rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-body { padding: 0 1.3rem; margin-top: -2rem; flex: 1; display: flex; flex-direction: column; }
.bz-logo { position: relative; z-index: 2; width: 4rem; height: 4rem; border-radius: 1.1rem; object-fit: contain; background: #fff; box-shadow: 0 0 0 4px #fff, 0 10px 20px -12px rgba(15,27,51,.5); flex-shrink: 0; }
.bz-logo-initials { display: grid; place-items: center; font-weight: 600; font-size: 20px; }
.bz-name { font-weight: 600; font-size: 18.5px; color: #0f1b33; line-height: 1.25; margin-top: .9rem; }
.bz-card:hover .bz-name { color: #1e3a8a; }
.bz-desc { font-size: 13.5px; color: #64748b; line-height: 1.6; margin-top: .4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bz-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1.1rem 1.3rem 0; padding: .9rem 0 1.1rem; border-top: 1px solid rgba(15,27,51,.06); }
.bz-owner { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.bz-owner-dot { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; font-size: 11px; font-weight: 600; color: #fff; background: #1e3a8a; object-fit: cover; }
.bz-owner-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.bz-owner-name { display: block; font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }

/* member cards */
.mb-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .85rem; }
@media (min-width: 768px) { .mb-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; } }
@media (min-width: 1024px) { .mb-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.3rem; } }
.mb-card .ui-band { height: 4.5rem; padding: .65rem; }
.mb-batch { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .25rem .55rem; white-space: nowrap; }
.mb-mentor { display: inline-flex; align-items: center; gap: .25rem; font-size: 10.5px; font-weight: 700; color: #0f1b33; background: #fde68a; border-radius: 999px; padding: .25rem .55rem; white-space: nowrap; }
.mb-mentor svg { width: .8rem; height: .8rem; }
.mb-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 .9rem; margin-top: -2.4rem; }
.mb-avatar { position: relative; z-index: 2; width: 4.75rem; height: 4.75rem; border-radius: 999px; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 4px #fff, 0 10px 22px -12px rgba(15,27,51,.6); background: #fff; }
.mb-avatar-initials { display: grid; place-items: center; font-weight: 600; font-size: 22px; }
.mb-name { font-weight: 600; font-size: 16px; color: #0f1b33; line-height: 1.25; margin-top: .75rem; }
.mb-card:hover .mb-name { color: #1e3a8a; }
.mb-role { font-size: 12.5px; font-weight: 600; color: #ea580c; margin-top: .25rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.mb-city { display: inline-flex; align-items: center; gap: .3rem; font-size: 12px; color: #64748b; margin-top: .35rem; }
.mb-city svg { width: .85rem; height: .85rem; color: #94a3b8; flex-shrink: 0; }
.mb-foot { margin: 1rem .9rem 0; padding: .75rem 0 .9rem; border-top: 1px solid rgba(15,27,51,.06); text-align: center; }
.mb-view { display: inline-flex; align-items: center; gap: .35rem; font-size: 12.5px; font-weight: 700; color: #1e3a8a; transition: gap .2s, color .2s; }
.mb-view svg { width: .9rem; height: .9rem; }
.mb-card:hover .mb-view { gap: .6rem; color: #ea580c; }
@media (min-width: 640px) { .mb-avatar { width: 5.25rem; height: 5.25rem; } .mb-name { font-size: 17px; } .mb-body { padding: 0 1.1rem; } }

/* committee cards (about page) */
.cm-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .85rem; margin-top: 3rem; }
@media (min-width: 768px) { .cm-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.1rem; } }
@media (min-width: 1024px) { .cm-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.3rem; } }
.cm-card .mb-body { padding-bottom: 1.1rem; }
.cm-avatar { width: 5.5rem; height: 5.5rem; }
@media (min-width: 640px) { .cm-avatar { width: 6rem; height: 6rem; } }
.cm-role { margin-top: .85rem; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ea580c; }
.cm-card .mb-name { margin-top: .25rem; }
.cm-card .mb-foot { margin-top: 0; }
.cm-phone { display: inline-flex; align-items: center; gap: .4rem; font-size: 13px; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; }
.cm-phone svg { width: .9rem; height: .9rem; color: #94a3b8; }
.cm-phone:hover { color: #1e3a8a; }

/* event cards */
.ev-media { position: relative; aspect-ratio: 16 / 10; background: #f5f1ea; overflow: hidden; display: grid; place-items: center; }
.ev-media img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; transition: transform .6s; }
.ev-card:hover .ev-media img, .nw-card:hover .nw-media img { transform: scale(1.04); }
.ev-media-blank { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(219,234,254,.85); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 29px, rgba(255,255,255,.07) 29px 30px), linear-gradient(135deg, #1e3a8a, #142a63); }
.ev-media-blank span { font-size: 56px; font-weight: 600; line-height: 1; color: #fff; letter-spacing: 0; margin-bottom: .3rem; }
.ev-date { position: absolute; left: .85rem; top: .85rem; z-index: 2; width: 3.4rem; padding: .45rem 0; border-radius: .9rem; text-align: center; background: #fff; box-shadow: 0 10px 20px -10px rgba(15,27,51,.5); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ea580c; line-height: 1.1; }
.ev-date b { display: block; font-size: 22px; color: #0f1b33; letter-spacing: 0; }
.ev-flag { position: absolute; right: .85rem; top: .85rem; z-index: 2; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #1e3a8a; border-radius: 999px; padding: .3rem .65rem; }
.ev-flag-soon { background: #f97316; }
.ev-flag-past { background: #64748b; }
.ev-card.is-past { opacity: .78; }
.ev-card.is-past .ev-media img { filter: grayscale(.6); }
.ev-body { flex: 1; display: flex; flex-direction: column; padding: 1.1rem 1.25rem 1.2rem; }
.ev-when { font-size: 12px; font-weight: 700; color: #ea580c; letter-spacing: .01em; }
.ev-title { font-weight: 600; font-size: 20px; color: #0f1b33; line-height: 1.25; margin-top: .3rem; }
.ev-card:hover .ev-title { color: #1e3a8a; }
.ev-desc { font-size: 13.5px; color: #64748b; line-height: 1.6; margin-top: .4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: 1rem; }
.ev-body .ev-foot { border-top: 1px solid rgba(15,27,51,.06); margin-top: 1rem; }
.ev-place { display: flex; align-items: center; gap: .35rem; min-width: 0; font-size: 12.5px; font-weight: 600; color: #475569; }
.ev-place svg { width: .95rem; height: .95rem; color: #94a3b8; flex-shrink: 0; }
.ev-go { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; font-size: 13px; font-weight: 700; color: #1e3a8a; transition: gap .2s, color .2s; }
.ev-go svg { width: .95rem; height: .95rem; }
.ev-card:hover .ev-go, .al-card:hover .ev-go { gap: .6rem; color: #ea580c; }

/* spotlight list cards */
.sp-grid { grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 640px) { .sp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .sp-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.4rem; } }
.sp-photo { position: relative; aspect-ratio: 4 / 4.2; overflow: hidden; background: #e2e8f0; }
.sp-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.sp-card:hover .sp-photo img { transform: scale(1.05); }
.sp-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,27,51,0) 55%, rgba(15,27,51,.55)); pointer-events: none; }
.sp-chip { position: absolute; left: .9rem; bottom: .9rem; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #fff; background: #f97316; border-radius: 999px; padding: .32rem .7rem; max-width: calc(100% - 1.8rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-body { flex: 1; display: flex; flex-direction: column; padding: 1.1rem 1.25rem 1.25rem; }
.sp-name { font-weight: 600; font-size: 21px; color: #0f1b33; line-height: 1.2; }
.sp-card:hover .sp-name, .nw-card:hover .nw-title, .al-card:hover .al-title { color: #1e3a8a; }
.sp-batch { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; margin-top: .3rem; }
.sp-excerpt { font-size: 13.5px; color: #64748b; line-height: 1.6; margin-top: .6rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-read { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: 1rem; font-size: 13px; font-weight: 700; color: #1e3a8a; transition: gap .2s, color .2s; }
.sp-read svg { width: .95rem; height: .95rem; }
.sp-card:hover .sp-read, .nw-card:hover .sp-read { gap: .6rem; color: #ea580c; }

/* news cards */
.nw-media { position: relative; aspect-ratio: 16 / 10; background: #f5f1ea; overflow: hidden; display: grid; place-items: center; }
.nw-media img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; transition: transform .6s; }
.nw-media-blank { width: 4rem; height: 4rem; border-radius: 1.2rem; display: grid; place-items: center; color: #ea580c; background: rgba(249,115,22,.1); }
.nw-media-blank svg { width: 2rem; height: 2rem; }
.nw-body { flex: 1; display: flex; flex-direction: column; padding: 1.1rem 1.25rem 1.25rem; }
.nw-title { font-weight: 600; font-size: 19px; color: #0f1b33; line-height: 1.3; margin-top: .3rem; }
.nw-excerpt { font-size: 13.5px; color: #64748b; line-height: 1.6; margin-top: .45rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* gallery album cards */
.al-card { overflow: visible; background: transparent; border: 0; box-shadow: none; }
.al-card:hover { box-shadow: none; border-color: transparent; }
.al-stack { position: relative; padding: 0 .9rem; }
.al-stack::before, .al-stack::after { content: ""; position: absolute; left: 1.8rem; right: 1.8rem; top: -.5rem; height: 2rem; border-radius: 1rem; background: #e7dcc9; transition: transform .3s; }
.al-stack::after { left: 2.8rem; right: 2.8rem; top: -1rem; background: #f1e9db; z-index: -1; }
.al-stack::before { z-index: 0; }
.al-card:hover .al-stack::before { transform: translateY(-3px); }
.al-card:hover .al-stack::after { transform: translateY(-6px); }
.al-cover { position: relative; z-index: 1; aspect-ratio: 4 / 3; border-radius: 1.3rem; overflow: hidden; background: #e2e8f0; box-shadow: 0 20px 40px -26px rgba(15,27,51,.6); }
.al-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.al-card:hover .al-cover img { transform: scale(1.05); }
.al-cover-blank { width: 100%; height: 100%; display: grid; place-items: center; color: #94a3b8; }
.al-cover-blank svg { width: 3rem; height: 3rem; }
.al-count { position: absolute; left: .85rem; bottom: .85rem; display: inline-flex; align-items: center; gap: .35rem; font-size: 11.5px; font-weight: 700; color: #0f1b33; background: rgba(255,255,255,.94); border-radius: 999px; padding: .35rem .7rem; box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }
.al-count svg { width: .85rem; height: .85rem; color: #ea580c; }
.al-body { padding: 1rem .9rem 0; }
.al-title { font-weight: 600; font-size: 21px; color: #0f1b33; line-height: 1.25; }
.al-desc { font-size: 13.5px; color: #64748b; line-height: 1.6; margin-top: .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.al-foot .ev-go { text-transform: none; letter-spacing: 0; }
.al-grid { row-gap: 2.25rem; padding-top: 1rem; }

/* job cards */
.jb-card { padding: 1.3rem; }
.jb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.jb-logo { width: 3.25rem; height: 3.25rem; border-radius: 1rem; display: grid; place-items: center; font-weight: 600; font-size: 17px; flex-shrink: 0; }
.jb-type { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: .32rem .7rem; }
.jb-type-blue { color: #1e3a8a; background: rgba(30,58,138,.08); }
.jb-type-green { color: #0c7a3d; background: rgba(15,167,81,.1); }
.jb-type-orange { color: #c2410c; background: rgba(249,115,22,.12); }
.jb-type-ink { color: #0f1b33; background: #e2e8f0; }
.jb-title { font-weight: 600; font-size: 19px; color: #0f1b33; line-height: 1.25; margin-top: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jb-card:hover .jb-title { color: #1e3a8a; }
.jb-company { font-size: 14px; font-weight: 600; color: #ea580c; margin-top: .2rem; }
.jb-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .7rem; font-size: 12.5px; font-weight: 600; color: #64748b; }
.jb-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.jb-meta svg { width: .9rem; height: .9rem; color: #94a3b8; }
.jb-desc { font-size: 13.5px; color: #64748b; line-height: 1.6; margin-top: .7rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jb-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid rgba(15,27,51,.06); }

/* about feature cards */
.ft-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; }
@media (min-width: 640px) { .ft-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .ft-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.25rem; } }
.ft-grid .hp-involve-card h3 { font-size: 19px; }

@media (prefers-reduced-motion: reduce) {
  .bz-card, .mb-card, .ev-card, .sp-card, .nw-card, .al-card, .jb-card, .ev-media img, .sp-photo img, .al-cover img, .nw-media img, .ui-go { transition: none !important; transform: none !important; }
}
.nw-media-empty { aspect-ratio: 16 / 6.5; background-image: repeating-radial-gradient(circle at 85% 120%, transparent 0 23px, rgba(234,88,12,.08) 23px 24px), linear-gradient(135deg, #fdf6ec, #f7efe2); }