.hud-sec{ background:#FFFDFC; padding:72px 0 64px; }
.hud-wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
.hud-eb{ font-size:.78rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:#7A8290 !important; -webkit-text-fill-color:#7A8290 !important; margin:0 0 10px; text-align:center; }
.hud-h2{ font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1.1;
  color:#23354A !important; -webkit-text-fill-color:#23354A !important; margin:0 0 12px; text-align:center; }
.hud-sub{ max-width:560px; margin:0 auto 36px; text-align:center; font-size:1rem; line-height:1.65;
  color:#68717C !important; -webkit-text-fill-color:#68717C !important; }

/* two across, two rows — artwork on top, copy beneath */
/* Five cards: three across, so the last row holds two rather than one lonely
   card stranded under a 2-column grid. */
.hud-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch; }
@media (max-width:1100px){ .hud-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }
.hud-box{ display:flex; flex-direction:column; min-width:0; width:100%; text-align:left; padding:0; cursor:pointer;
  font:inherit; background:#FFFDFC; border:1px solid rgba(31,47,65,.08); border-radius:26px; overflow:hidden;
  box-shadow:0 12px 32px rgba(31,47,65,.06); transition:transform .18s ease, box-shadow .18s ease; }
@media (hover:hover){ .hud-box:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(31,47,65,.12); } }
.hud-box:focus-visible{ outline:3px solid rgba(90,126,140,.5); outline-offset:3px; }
/* Frame matches the artwork's own 4:3 so nothing is cropped and the HU
   logo at the top of each image stays fully visible. */
.hud-media{ position:relative; width:100%; aspect-ratio:4 / 3; background:#F4F1EC; overflow:hidden; }
.hud-media img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.hud-body{ display:flex; flex-direction:column; flex:1; padding:24px 26px 26px; }
.hud-kick{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.hud-ico{ width:44px; height:44px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.hud-ico svg{ width:21px; height:21px; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hud-b1 .hud-ico{ background:#DCEBEA; } .hud-b1 .hud-ico svg{ stroke:#376B69; }
.hud-b2 .hud-ico{ background:#E6EDDC; } .hud-b2 .hud-ico svg{ stroke:#4F6B3C; }
.hud-b3 .hud-ico{ background:#F6E2DA; } .hud-b3 .hud-ico svg{ stroke:#B26A55; }
.hud-b4 .hud-ico{ background:#E9E3F3; } .hud-b4 .hud-ico svg{ stroke:#6A5B90; }
/* Fifth place: Life Vault. Navy-ish to match its own artwork. */
.hud-b5 .hud-ico{ background:#DFE6EF; } .hud-b5 .hud-ico svg{ stroke:#3D5573; }
.hud-b6 .hud-ico{ background:#E4F0DC; } .hud-b6 .hud-ico svg{ stroke:#5C7B48; }
/* HU Kids is presented as its own wide banner below the four tiles */
.hud-kidsban{ display:block; width:100%; margin:26px 0 0; padding:0; border:1px solid rgba(31,47,65,.08);
  border-radius:26px; overflow:hidden; background:#FFFDFC; cursor:pointer; font:inherit;
  box-shadow:0 12px 32px rgba(31,47,65,.06); transition:transform .18s ease, box-shadow .18s ease; }
@media (hover:hover){ .hud-kidsban:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(31,47,65,.12); } }
.hud-kidsban:focus-visible{ outline:3px solid rgba(90,126,140,.5); outline-offset:3px; }
.hud-kidsban img{ display:block; width:100%; height:auto; }
/* Two banners side by side (Aug 2026). They stack below 900px so neither is
   squeezed to the point the phone mock-up inside them stops being readable. */
.hud-bans{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:26px 0 0; }
.hud-bans .hud-ban{ margin:0 !important; }
@media (max-width:900px){ .hud-bans{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .hud-kidsban{ transition:none; } }
.hud-cat{ font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#B2604B !important; -webkit-text-fill-color:#B2604B !important; }
.hud-t{ font-family:'Playfair Display',Georgia,serif; font-size:1.75rem; line-height:1.15; margin:0 0 8px;
  color:#23354A !important; -webkit-text-fill-color:#23354A !important; }
.hud-tag{ font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:1.06rem; line-height:1.35;
  margin:0 0 12px; color:#B2604B !important; -webkit-text-fill-color:#B2604B !important; }
.hud-d{ font-size:.95rem; line-height:1.65; margin:0 0 18px;
  color:#68717C !important; -webkit-text-fill-color:#68717C !important; }
.hud-go{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.92rem;
  color:#376B69 !important; -webkit-text-fill-color:#376B69 !important; }
.hud-go svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Flow layer band */
.huf-sec{ background:linear-gradient(180deg,#FBF9FD 0%,#FFFDFC 100%); padding:58px 0 64px; }
.huf-in{ max-width:900px; margin:0 auto; padding:0 20px; text-align:center; }
.huf-eb{ display:inline-flex; align-items:center; gap:8px; background:#EFE9F7; border-radius:999px; padding:7px 16px;
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:#5B4C86 !important; -webkit-text-fill-color:#5B4C86 !important; margin-bottom:16px; }
.huf-eb svg{ width:15px; height:15px; fill:none; stroke:#6A5B90; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.huf-h{ font-family:'Playfair Display',Georgia,serif; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.2;
  color:#23354A !important; -webkit-text-fill-color:#23354A !important; margin:0 0 12px; }
.huf-p{ max-width:620px; margin:0 auto 26px; font-size:1rem; line-height:1.65;
  color:#68717C !important; -webkit-text-fill-color:#68717C !important; }
.huf-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.huf-one{ background:#fff; border:1px solid rgba(31,47,65,.08); border-radius:999px; padding:9px 17px;
  font-size:.86rem; font-weight:700; color:#5A6470 !important; -webkit-text-fill-color:#5A6470 !important; }

@media (max-width:760px){
  .hud-grid{ grid-template-columns:1fr; gap:20px; }
  .hud-t{ font-size:1.5rem; }
  .hud-body{ padding:20px 20px 22px; }
  .hud-sec{ padding:52px 0 46px; }
}
@media (prefers-reduced-motion:reduce){ .hud-box{ transition:none; } }