/* ==========================================================================
   Homepage premium polish (loaded only on templates/webapp/home.html)
   Scoped to main.hpx so About / Team / other pages that reuse the same
   section templates are untouched. Builds on home.css tokens (--hp-*).
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────── */
.hpx {
  --hp-pad: clamp(46px, 4.8vw, 70px);
  --px-glass:      linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  --px-glass-line: rgba(255, 255, 255, .09);
  --px-glass-hi:   rgba(255, 255, 255, .12);
  --px-shadow:     0 28px 60px -34px rgba(0, 0, 0, .85);
  --px-shadow-hi:  0 36px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(232, 201, 122, .25);
  --px-ambient:    rgba(201, 168, 76, .10);
  --px-grid:       rgba(245, 240, 232, .025);
  --px-gold-grad:  linear-gradient(100deg, #B8902F 0%, #E8C97A 45%, #F6E3A8 55%, #C9A84C 100%);
}
html[data-theme="light"] .hpx {
  --px-glass:      linear-gradient(150deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78));
  --px-glass-line: rgba(155, 116, 29, .14);
  --px-glass-hi:   #FFFFFF;
  --px-shadow:     0 24px 50px -30px rgba(31, 35, 40, .28), 0 2px 6px rgba(31, 35, 40, .04);
  --px-shadow-hi:  0 34px 64px -30px rgba(31, 35, 40, .34), 0 0 0 1px rgba(184, 144, 47, .35);
  --px-ambient:    rgba(201, 168, 76, .12);
  --px-grid:       rgba(28, 30, 26, .03);
  --px-gold-grad:  linear-gradient(100deg, #8B6A18 0%, #B8902F 45%, #D4AF55 55%, #9B741D 100%);
}

/* ── Rhythm: tighter sections and headers ───────────────────────────── */
.hpx .hp-head { margin-bottom: clamp(24px, 2.6vw, 36px); }
.hpx .hp-center { margin-top: 30px; }
.hpx .hp-section--tight { padding: clamp(30px, 3.2vw, 44px) 0; }
.hpx .hp-cta { padding: clamp(60px, 6.4vw, 92px) 0; }

/* two "alt" sections in a row (e.g. Journal → Partners) alternate instead of merging */
.hpx .hp-section--alt + .hp-section--alt { background: var(--hp-bg); }
.hpx .hp-section--alt + .hp-section--alt::before { display: none; }

/* ambient depth: soft gold glow + faint architectural grid on every section */
.hpx > .hp-section { isolation: isolate; }
.hpx > .hp-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(520px 360px at 6% 0%, var(--px-ambient), transparent 70%),
    linear-gradient(90deg, var(--px-grid) 1px, transparent 1px) 0 0 / 120px 100%;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.hpx > .hp-section:nth-child(even)::after {
  background:
    radial-gradient(520px 360px at 94% 0%, var(--px-ambient), transparent 70%),
    linear-gradient(90deg, var(--px-grid) 1px, transparent 1px) 0 0 / 120px 100%;
}
.hpx > .hp-section > .container { position: relative; z-index: 1; }

/* ── Typography accents ─────────────────────────────────────────────── */
.hpx .hp-title em,
.hpx .hp-cta h2 em {
  background: var(--px-gold-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: px-shine 7s ease-in-out infinite;
}
@keyframes px-shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* ── Buttons: glossy gold + glass line ──────────────────────────────── */
.hpx .hp-btn { position: relative; overflow: hidden; isolation: isolate; }
.hpx .hp-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .4) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .9s var(--hp-ease);
  pointer-events: none;
}
.hpx .hp-btn:hover::after { transform: translateX(130%); }
.hpx .hp-btn--gold {
  background: linear-gradient(180deg, #F5DD98 0%, #DDB95E 48%, #B8902F 100%);
  color: #14110A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(120, 90, 20, .35), 0 16px 36px -16px rgba(201, 168, 76, .85);
}
.hpx .hp-btn--gold:hover { background: linear-gradient(180deg, #FAE6AE 0%, #E6C46C 48%, #C29A38 100%); color: #14110A; }
.hpx .hp-btn--line {
  background: var(--px-glass);
  border-color: var(--hp-gold-line);
  box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hpx .hp-btn--line::after { background: linear-gradient(100deg, transparent 30%, rgba(232, 201, 122, .25) 50%, transparent 70%); }

/* ══ Services ═══════════════════════════════════════════════════════ */
.hpx .hp-service {
  box-shadow: var(--px-shadow);
  transition: transform .5s var(--hp-ease), box-shadow .5s ease;
}
.lux-home.hpx .hp-service.visible:hover { transform: translateY(-8px); box-shadow: var(--px-shadow-hi); }
.hpx .hp-service__no {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(232, 201, 122, .45);
  border-radius: 50%;
  background: rgba(13, 13, 11, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #E8C97A;
  font-size: 17px;
}
.hpx .hp-service__body {
  position: relative;
  margin: 0 12px 12px;
  padding: 22px 20px 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top-color: rgba(232, 201, 122, .45);
  background: linear-gradient(160deg, rgba(20, 18, 12, .55), rgba(10, 10, 8, .35));
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  transition: background .5s ease, transform .5s var(--hp-ease);
}
.hpx .hp-service:hover .hp-service__body { background: linear-gradient(160deg, rgba(20, 18, 12, .72), rgba(10, 10, 8, .5)); }
.hpx .hp-service::after { inset: 0; }
.hpx .hp-service:hover::after { inset: 6px; }
/* light sweep across the photo */
.hpx .hp-service__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 1.2s var(--hp-ease);
}
.hpx .hp-service:hover .hp-service__media::after { transform: translateX(100%); }

/* ══ Projects ═══════════════════════════════════════════════════════ */
.hpx .hp-projects__grid { grid-auto-rows: 236px; }
/* four projects: big + two stacked + one wide, no orphan */
.hpx .hp-projects__grid:has(> .hp-project:nth-child(4):last-child) .hp-project:nth-child(4) { grid-column: 1 / -1; }
.hpx .hp-projects__grid:has(> .hp-project:nth-child(4):last-child) .hp-project:nth-child(4) .hp-project__body { max-width: 720px; }

.hpx .hp-project {
  box-shadow: var(--px-shadow);
  transition: transform .5s var(--hp-ease), box-shadow .5s ease;
}
.hpx .hp-project:hover { transform: translateY(-6px); box-shadow: var(--px-shadow-hi); }
.hpx .hp-project::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgba(232, 201, 122, 0);
  pointer-events: none;
  transition: inset .5s var(--hp-ease), border-color .5s ease;
}
.hpx .hp-project:hover::after { inset: 10px; border-color: rgba(232, 201, 122, .55); }
.hpx .hp-project__body {
  position: relative;
  margin: 0 14px 14px;
  padding: 18px 20px;
  max-width: 520px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 2px solid #E8C97A;
  background: linear-gradient(160deg, rgba(20, 18, 12, .55), rgba(10, 10, 8, .3));
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.hpx .hp-chip {
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(20, 20, 16, .62), rgba(20, 20, 16, .35));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.hpx .hp-filter {
  padding: 5px;
  border: 1px solid var(--px-glass-line);
  border-radius: 999px;
  background: var(--px-glass);
  box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow);
}
.hpx .hp-filter button { border-radius: 999px; }
.hpx .hp-filter button.active {
  background: linear-gradient(180deg, #F2D68E, #C9A84C 55%, #A8862F);
  color: #14110A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 18px -10px rgba(201, 168, 76, .9);
}

/* ══ Why choose us ═════════════════════════════════════════════════ */
.hpx .hp-why__grid { gap: 14px; border: 0; }
.hpx .hp-feature {
  border: 1px solid var(--px-glass-line);
  background: var(--px-glass);
  box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow);
  transition: transform .45s var(--hp-ease), box-shadow .45s ease, background .4s ease;
}
.hpx .hp-feature:hover { transform: translateY(-5px); box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow-hi); background: var(--px-glass); }
.hpx .hp-feature::before { left: 0; top: 0; background: var(--px-gold-grad); }
.hpx .hp-feature:hover::before { width: 100%; }
.hpx .hp-feature__icon {
  border: 0;
  background: radial-gradient(circle at 32% 28%, #FBEBBB, #D9B65E 50%, #8B6E2E 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .6), inset 0 -6px 12px rgba(0, 0, 0, .22), 0 12px 24px -12px rgba(201, 168, 76, .9);
}
.hpx .hp-feature__icon svg { stroke: #1A1408; }
html:not([data-theme="light"]) .hpx .hp-feature__icon img { filter: brightness(0) saturate(100%) invert(7%) sepia(12%) saturate(1200%) hue-rotate(10deg); }
.hpx .hp-feature__icon img { filter: brightness(0) saturate(100%) invert(7%) sepia(12%) saturate(1200%) hue-rotate(10deg); }
.hpx .hp-feature__no {
  font-size: 30px;
  opacity: 1;
  background: var(--px-gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hpx .hp-feature h3 { margin-top: 22px; }

/* ══ About ═════════════════════════════════════════════════════════ */
.hpx .hp-about__visual::before { border-color: rgba(201, 168, 76, .5); box-shadow: inset 0 0 40px -10px rgba(201, 168, 76, .25); }
.hpx .hp-about__frame { box-shadow: var(--px-shadow-hi); }
.hpx .hp-about__frame::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(232, 201, 122, .45);
  pointer-events: none;
}
.hpx .hp-about__badge {
  background: linear-gradient(180deg, #F5DD98 0%, #DDB95E 48%, #B8902F 100%);
  color: #14110A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 20px 40px -16px rgba(201, 168, 76, .9);
}
.hpx .hp-ticks li::before { box-shadow: 0 0 10px rgba(232, 201, 122, .5); }

/* ══ Leadership ════════════════════════════════════════════════════ */
.hpx .hp-leader__portrait figure {
  border: 0;
  box-shadow: var(--px-shadow-hi);
}
.hpx .hp-leader__portrait figure::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(232, 201, 122, .5);
  pointer-events: none;
}
.hpx .hp-leader__nameplate {
  border: 1px solid var(--px-glass-line);
  border-top: 2px solid transparent;
  border-image: var(--px-gold-grad) 1;
  border-image-slice: 1 0 0 0;
  background: var(--px-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow);
}
.hpx .hp-leader__quote { filter: drop-shadow(0 6px 14px rgba(201, 168, 76, .35)); }
.hpx .hp-leader__sign {
  background: var(--px-gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ══ Testimonials ══════════════════════════════════════════════════ */
.hpx .hp-voice {
  border: 1px solid var(--px-glass-line);
  background: var(--px-glass);
  box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow);
  padding: 34px 30px 28px;
}
.hpx .hp-voice::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--px-gold-grad);
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .6s var(--hp-ease);
}
.lux-home.hpx .hp-voice.visible:hover { box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow-hi); }
.hpx .hp-voice:hover::after { transform: scaleX(1); }
.hpx .hp-voice::before {
  opacity: .3;
  background: var(--px-gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hpx .hp-voice__stars { color: #D9B65E; text-shadow: 0 0 10px rgba(232, 201, 122, .45); }
.hpx .hp-voice figcaption img,
.hpx .hp-voice__avatar { box-shadow: 0 0 0 2px var(--hp-surface), 0 0 0 3px rgba(201, 168, 76, .6); }
.hpx .hp-voice__avatar { background: radial-gradient(circle at 32% 28%, #FBEBBB, #D9B65E 50%, #8B6E2E 100%); color: #1A1408; }

/* ══ CSR stories ═══════════════════════════════════════════════════ */
.hpx .hp-story {
  border: 1px solid var(--px-glass-line);
  background: var(--px-glass);
  box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow);
}
.hpx .hp-story:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow-hi); border-color: var(--px-glass-line); }
.hpx .hp-story figure { position: relative; }
.hpx .hp-story figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 8, .35));
}
.hpx .hp-story__tag {
  display: inline-flex;
  padding: 5px 10px;
  border: 1px solid var(--hp-gold-line);
  border-radius: 999px;
  background: var(--hp-gold-soft);
}

/* ══ Blood bank band — glossy deep red, same in both themes ════════ */
.hpx .hp-blood__panel {
  gap: 30px;
  padding: 34px 40px;
  border: 0;
  background:
    radial-gradient(420px 200px at 8% 0%, rgba(255, 150, 165, .35), transparent 70%),
    radial-gradient(520px 260px at 100% 100%, rgba(60, 0, 12, .55), transparent 70%),
    linear-gradient(120deg, #8E1526 0%, #C41E3A 55%, #7A0F1F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 30px 60px -30px rgba(142, 21, 38, .8);
  isolation: isolate;
}
.hpx .hp-blood__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent);
}
.hpx .hp-blood__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: px-sweep 7s ease-in-out 1s infinite;
  pointer-events: none;
}
@keyframes px-sweep { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.hpx .hp-blood__drop {
  border: 1px solid rgba(255, 255, 255, .35);
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08) 70%);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .06), 0 0 30px rgba(255, 120, 140, .45);
}
.hpx .hp-blood__drop svg { fill: #fff; }
.hpx .hp-blood .hp-eyebrow--red { color: #FFD3D9; }
.hpx .hp-blood .hp-eyebrow--red::before { background: #FFD3D9; }
.lux-home.hpx .hp-blood h2 { color: #fff; }
.hpx .hp-blood p { color: rgba(255, 235, 238, .82); }
.hpx .hp-btn--red {
  background: #fff;
  color: #A51C30;
  box-shadow: inset 0 -2px 0 rgba(165, 28, 48, .15), 0 14px 30px -14px rgba(0, 0, 0, .6);
}
.hpx .hp-btn--red::after { background: linear-gradient(100deg, transparent 30%, rgba(229, 72, 93, .2) 50%, transparent 70%); }
.hpx .hp-btn--red:hover { filter: none; color: #8E1526; }

/* ══ Journal ═══════════════════════════════════════════════════════ */
.hpx .hp-post {
  border: 1px solid var(--px-glass-line);
  background: var(--px-glass);
  box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow);
  transition: transform .45s var(--hp-ease), box-shadow .45s ease;
}
.hpx .hp-post:hover { transform: translateY(-5px); border-color: var(--px-glass-line); box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow-hi); }
.hpx .hp-post__meta span {
  padding: 4px 9px;
  border: 1px solid var(--hp-gold-line);
  border-radius: 999px;
  background: var(--hp-gold-soft);
}

/* ══ Partners ══════════════════════════════════════════════════════ */
.hpx .hp-plaque {
  border-color: var(--px-glass-line);
  background: var(--px-glass);
  box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow);
}
.hpx .hp-plaque:hover { box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow-hi); }
.hpx .hp-partners__count strong {
  background: var(--px-gold-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ══ Contact ═══════════════════════════════════════════════════════ */
.hpx .hp-contact__panel {
  position: relative;
  border: 1px solid var(--px-glass-line);
  background: var(--px-glass);
  box-shadow: inset 0 1px 0 var(--px-glass-hi), var(--px-shadow-hi);
}
.hpx .hp-contact__panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--px-gold-grad);
}
.hpx .hp-contact__icon {
  border: 0;
  background: radial-gradient(circle at 32% 28%, #FBEBBB, #D9B65E 50%, #8B6E2E 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), 0 10px 20px -10px rgba(201, 168, 76, .9);
}
.hpx .hp-contact__icon svg { stroke: #1A1408; }

/* ══ Closing CTA: gold frame ═══════════════════════════════════════ */
.hpx .hp-cta__inner { position: relative; }
.hpx .hp-cta::after {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(232, 201, 122, .3);
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .hpx { --hp-pad: clamp(40px, 7vw, 56px); }
  .hpx .hp-projects__grid:has(> .hp-project:nth-child(4):last-child) .hp-project:nth-child(4) { grid-column: auto; }
}

@media (max-width: 640px) {
  .hpx .hp-service__body { margin: 0 8px 8px; padding: 16px 16px 14px; }
  .hpx .hp-project__body { margin: 0 10px 10px; padding: 14px 16px; }
  .hpx .hp-blood__panel { padding: 28px 22px; gap: 18px; text-align: left; }
  .hpx .hp-btn--red { width: 100%; }
  .hpx .hp-cta::after { inset: 10px; }
  .hpx .hp-why__grid { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hpx .hp-title em, .hpx .hp-cta h2 em, .hpx .hp-blood__panel::after { animation: none; }
  .hpx .hp-btn::after, .hpx .hp-service__media::after { display: none; }
}

/* services: the glass plate carries the text, so the photo needs less darkening */
.hpx .hp-service::before { background: linear-gradient(180deg, rgba(10, 10, 8, 0) 30%, rgba(10, 10, 8, .18) 55%, rgba(10, 10, 8, .55) 100%); }
.hpx .hp-service__body { background: linear-gradient(160deg, rgba(20, 18, 12, .5), rgba(10, 10, 8, .32)); }
.hpx .hp-service p { color: rgba(255, 255, 255, .82); }