/*!
 * Helderkruin About Widgets — frontend styles
 *
 * Sections:
 *   1. Shared tokens
 *   2. Kruin Flip Cards
 *   3. Kruin Journey
 *   4. Kruin Milestones
 *   5. Kruin Project Trio
 */

/* =========================================================================
   1. SHARED TOKENS
   ========================================================================= */
.hkaw-flip-cards *,
.hkaw-journey *,
.hkaw-milestones *,
.hkaw-trio * {
    box-sizing: border-box;
}

/* =========================================================================
   2. KRUIN FLIP CARDS — 3D transform flip on hover/focus/tap
   ========================================================================= */
.hkaw-flip-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    perspective: 1200px; /* enables 3D for children */
}

.hkaw-flip-card {
    position: relative;
    height: 220px;
    border-radius: 18px;
    cursor: pointer;
    outline: none;
    --hkaw-accent: #E71615;
}

.hkaw-flip-card:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hkaw-accent) 40%, transparent);
}

.hkaw-flip-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transform-style: preserve-3d;
}

/* Hover (desktop), focus (keyboard), or explicit .is-flipped (tap) */
.hkaw-flip-card:hover .hkaw-flip-card__inner,
.hkaw-flip-card:focus-within .hkaw-flip-card__inner,
.hkaw-flip-card.is-flipped .hkaw-flip-card__inner {
    transform: rotateY(180deg);
}

.hkaw-flip-card__face {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
    text-align: center;
    box-shadow: 0 10px 26px -12px rgba(21, 32, 77, 0.2);
    overflow: hidden;
}

.hkaw-flip-card__front {
    background: #FFFFFF;
    color: #15204D;
}

.hkaw-flip-card__back {
    background: #15204D;
    color: #FFFFFF;
    transform: rotateY(180deg);
    justify-content: flex-start;
    text-align: left;
    padding: 28px 22px 20px;
}

.hkaw-flip-card__front-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #F6F8FC;
    margin-bottom: 16px;
    color: var(--hkaw-accent);
    font-size: 22px;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hkaw-flip-card__front-icon i,
.hkaw-flip-card__front-icon svg {
    width: 22px;
    height: 22px;
    line-height: 1;
}

.hkaw-flip-card:hover .hkaw-flip-card__front-icon {
    transform: scale(1.08);
}

.hkaw-flip-card__front-title {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 1px;
    line-height: 1.15;
    text-transform: uppercase;
    font-weight: 400;
}

/* Front hint: rotate icon at bottom-right */
.hkaw-flip-card__hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--hkaw-accent);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0.55;
    transition: opacity 0.25s ease, transform 0.4s ease;
}
.hkaw-flip-card:hover .hkaw-flip-card__hint {
    opacity: 1;
    transform: rotate(180deg);
}

/* Back face */
.hkaw-flip-card__back-band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--hkaw-accent);
}

.hkaw-flip-card__back-title {
    margin: 0 0 10px 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 0.6px;
    line-height: 1.15;
    text-transform: uppercase;
    font-weight: 400;
}

.hkaw-flip-card__back-text {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

.hkaw-flip-card__back-quote {
    margin: 12px 0 0 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive */
@media (max-width: 1024px) {
    .hkaw-flip-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .hkaw-flip-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .hkaw-flip-card {
        height: 180px;
    }
    .hkaw-flip-card__front-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }
    .hkaw-flip-card__front-title {
        font-size: 18px;
    }
    .hkaw-flip-card__back {
        padding: 22px 16px 16px;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hkaw-flip-card__inner { transition: none; }
    .hkaw-flip-card__front-icon { transition: none; }
    .hkaw-flip-card__hint { transition: none; }
}

/* =========================================================================
   3. KRUIN JOURNEY — two-stage toggle with sliding stages
   ========================================================================= */
.hkaw-journey {
    position: relative;
    width: 100%;
    padding: 28px 28px 32px;
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 18px 40px -14px rgba(21, 32, 77, 0.15);
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
}

/* Toggle pills */
.hkaw-journey__toggle {
    display: inline-flex;
    padding: 6px;
    background: #F0F3F9;
    border-radius: 999px;
    gap: 4px;
    margin-bottom: 28px;
    max-width: 100%;
    flex-wrap: wrap;
}

.hkaw-journey__toggle-btn {
    padding: 10px 22px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #55627E;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    transition: background 0.25s ease, color 0.25s ease, transform 0.18s ease;
    white-space: nowrap;
}

.hkaw-journey__toggle-btn:hover:not(.is-active) {
    color: #15204D;
    background: rgba(255, 255, 255, 0.6);
}

.hkaw-journey__toggle-btn.is-active {
    background: #15204D;
    color: #FFFFFF;
    box-shadow: 0 6px 14px -6px rgba(21, 32, 77, 0.4);
}

/* Stages — all stacked in one grid cell, only active is visible */
.hkaw-journey__stages {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}

.hkaw-journey__stage {
    grid-area: 1 / 1 / 2 / 2;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.45s;
}

.hkaw-journey__stage.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 1;
}

/* Grid layout per stage: image + content */
.hkaw-journey__grid {
    display: grid;
    grid-template-columns: var(--hkaw-journey-img-w, 42%) 1fr;
    gap: 32px;
    align-items: center;
}

.hkaw-journey__grid > * { min-width: 0; }

/* Image */
.hkaw-journey__image {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 26px -12px rgba(21, 32, 77, 0.25);
    background: var(--hkaw-stage-accent, #7096C8);
}

.hkaw-journey__image-inner {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hkaw-journey__image-inner--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 64px;
}

.hkaw-journey:hover .hkaw-journey__image-inner {
    transform: scale(1.05);
}

/* Content */
.hkaw-journey__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hkaw-journey__subtitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #E71615;
    margin-bottom: 2px;
}

.hkaw-journey__title {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: 1px;
    color: #15204D;
    font-weight: 400;
    text-transform: uppercase;
}

.hkaw-journey__badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hkaw-stage-accent, #7096C8) 15%, white);
    color: var(--hkaw-stage-accent, #7096C8);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    align-self: flex-start;
}

.hkaw-journey__description {
    margin: 4px 0 8px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #55627E;
}

.hkaw-journey__achievements-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #55627E;
    margin: 4px 0;
}

.hkaw-journey__achievements {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hkaw-journey__achievements li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #55627E;
}

.hkaw-journey__achievements i {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hkaw-stage-accent, #7096C8) 18%, white);
    color: var(--hkaw-stage-accent, #7096C8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 1px;
}

.hkaw-journey__quote {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 8px;
    padding: 14px 16px;
    background: #F6F8FC;
    border-left: 3px solid var(--hkaw-stage-accent, #7096C8);
    border-radius: 0 10px 10px 0;
    font-size: 13px;
    line-height: 1.5;
    font-style: italic;
    color: #15204D;
}

.hkaw-journey__quote i {
    color: var(--hkaw-stage-accent, #7096C8);
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .hkaw-journey {
        padding: 22px 20px 26px;
    }
    .hkaw-journey__grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .hkaw-journey__title {
        font-size: 26px;
    }
    .hkaw-journey__toggle-btn {
        padding: 9px 16px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hkaw-journey__stage { transition: opacity 0.15s; transform: none; }
    .hkaw-journey__image-inner { transition: none; }
}

/* =========================================================================
   4. KRUIN MILESTONES — horizontal scroll-snap timeline (desktop) / stack (mobile)
   ========================================================================= */
.hkaw-milestones {
    position: relative;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    --hkaw-card-w: 320px;
}

.hkaw-milestones__header {
    margin-bottom: 24px;
    text-align: center;
}

.hkaw-milestones__heading {
    margin: 0 0 6px 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 38px;
    letter-spacing: 1.4px;
    color: #15204D;
    line-height: 1.05;
    font-weight: 400;
    text-transform: uppercase;
}

.hkaw-milestones__subheading {
    margin: 0;
    font-size: 14px;
    font-style: italic;
    color: #55627E;
    line-height: 1.4;
}

/* Navigation — centered below the scroller */
.hkaw-milestones__nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    z-index: 3;
}

.hkaw-milestones__nav-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: #FFFFFF;
    color: #15204D;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 14px -4px rgba(21, 32, 77, 0.18);
    transition: background 0.2s ease, transform 0.18s ease, color 0.2s ease;
}

.hkaw-milestones__nav-btn:hover {
    background: #15204D;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.hkaw-milestones__nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.hkaw-milestones__nav-btn:disabled:hover {
    background: #FFFFFF;
    color: #15204D;
}

/* Scroller — horizontal on desktop AND mobile; drag-to-scroll */
.hkaw-milestones__scroller {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* firefox */
    padding: 40px 0 20px;
    margin: 0 -8px; /* small bleed so cards flush to section edge */
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.hkaw-milestones__scroller::-webkit-scrollbar {
    display: none;
}

/* While actively dragging with a mouse: change cursor + suppress card hover
   shifts + disable text selection. Also suppress scroll-snap during drag so
   the card doesn't fight the user's finger; JS settles it on release. */
.hkaw-milestones__scroller.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
    -webkit-user-select: none;
}

.hkaw-milestones__scroller.is-dragging .hkaw-milestone__card {
    transition: none;
}

.hkaw-milestones__scroller.is-dragging .hkaw-milestone__card:hover {
    transform: none;
    box-shadow: 0 14px 30px -12px rgba(21, 32, 77, 0.15);
}

/* Prevent images/text inside cards from being draggable — it hijacks the
   cursor drag and breaks the scroll gesture */
.hkaw-milestones__scroller img,
.hkaw-milestones__scroller a {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Track line — lives inside the cards row so it spans the cards' actual
   extent. Positioned absolutely at the dot centre height. Initial state
   is scaleX(0) so the JS reveal animation draws it left-to-right. */
.hkaw-milestones__cards {
    position: relative;
    display: flex;
    gap: 20px;
    padding: 0 8px;
    z-index: 1;
}

.hkaw-milestones__track {
    position: absolute;
    /* Dot centre: card padding-top 26px is on the .hkaw-milestone child, but
       within the cards container the first child starts at top: 0. Dot has
       top: 10px and height: 14px, so dot centre is at 17px from container top. */
    top: 17px;
    /* Horizontal: cards container has padding: 0 8px, each .hkaw-milestone
       child starts flush left (no extra padding), dot has left: 24px width: 14px
       → dot centre at (8 + 24 + 7) = 39px from container left. Same on right. */
    left: 39px;
    right: 39px;
    height: 2px;
    background: var(--hkaw-track-color, #D8DEEC);
    border-radius: 1px;
    z-index: 2;
    pointer-events: none;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform var(--hkaw-track-duration, 1.6s) cubic-bezier(0.65, 0, 0.35, 1);
}

.hkaw-milestones.is-animated .hkaw-milestones__track {
    transform: scaleX(1);
}

.hkaw-milestones[data-hkaw-no-track="1"] .hkaw-milestones__track {
    display: none;
}

.hkaw-milestone {
    position: relative;
    flex: 0 0 var(--hkaw-card-w);
    width: var(--hkaw-card-w);
    scroll-snap-align: start;
    padding-top: 26px;
    --hkaw-milestone-accent: #15204D;
}

/* Dot on the track */
.hkaw-milestone__dot {
    position: absolute;
    top: 10px;
    left: 24px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--hkaw-milestone-accent);
    border: 3px solid #FFFFFF;
    box-shadow: 0 0 0 1px var(--hkaw-milestone-accent);
    z-index: 4;
    /* Initial state: tiny and invisible. Reveals + pulses when the wrapper
       gains .is-animated class. The delay is set inline per dot so each
       dot lights up when the track's sweep reaches it. */
    transform: scale(0);
    opacity: 0;
    transition: none;
}

.hkaw-milestones.is-animated .hkaw-milestone__dot {
    animation: hkaw-dot-arrive 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--hkaw-dot-delay, 0s);
}

@keyframes hkaw-dot-arrive {
    0%   { transform: scale(0);    opacity: 0; }
    45%  { transform: scale(1.45); opacity: 1; }
    70%  { transform: scale(0.9);  opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

/* Card */
.hkaw-milestone__card {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 24px 24px 26px;
    box-shadow: 0 14px 30px -12px rgba(21, 32, 77, 0.15);
    border-top: 4px solid var(--hkaw-milestone-accent);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.hkaw-milestone__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px -14px rgba(21, 32, 77, 0.22);
}

.hkaw-milestone__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.hkaw-milestone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--hkaw-milestone-accent) 12%, white);
    color: var(--hkaw-milestone-accent);
    font-size: 16px;
    flex-shrink: 0;
}

.hkaw-milestone__icon i,
.hkaw-milestone__icon svg {
    width: 16px;
    height: 16px;
    line-height: 1;
}

.hkaw-milestone__date-detail {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #55627E;
    text-align: right;
}

.hkaw-milestone__date {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 46px;
    line-height: 1;
    letter-spacing: 1.2px;
    color: var(--hkaw-milestone-accent);
    margin-bottom: 10px;
    font-weight: 400;
}

.hkaw-milestone__headline {
    margin: 0 0 10px 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 0.6px;
    color: #15204D;
    line-height: 1.2;
    font-weight: 400;
    text-transform: uppercase;
}

.hkaw-milestone__description {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #55627E;
    flex: 1;
}

/* Mobile: horizontal scrolling kept (swipe is native). Only sizes change. */
@media (max-width: 768px) {
    .hkaw-milestones__heading { font-size: 30px; }

    /* Slightly narrower default card on small screens so more than one is
       visible when a card is centered (helps communicate "scrollable"). */
    .hkaw-milestones { --hkaw-card-w: 260px; }

    .hkaw-milestones__scroller {
        padding: 36px 0 16px;
    }

    .hkaw-milestone__date {
        font-size: 38px;
    }

    /* Track dots sit on a thinner, closer-to-cards track on mobile */
    .hkaw-milestones__track {
        top: 66px;
    }
}

/* Very small (phones): use scroll-padding so the snap-aligned card appears
   flush-left with a tiny margin, not under the page edge */
@media (max-width: 480px) {
    .hkaw-milestones__scroller {
        scroll-padding-left: 16px;
        padding-left: 16px;
    }
    .hkaw-milestones__cards {
        padding-right: 24px; /* tail breathing room */
    }
}

@media (prefers-reduced-motion: reduce) {
    .hkaw-milestone__card { transition: none; }
    .hkaw-milestones__nav-btn { transition: none; }
    .hkaw-milestones__scroller { scroll-behavior: auto; }
}

/* =========================================================================
   5. KRUIN PROJECT TRIO — pillars with slide-up leader reveal
   ========================================================================= */
.hkaw-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}

.hkaw-trio__pillar {
    position: relative;
    height: 420px;
    background: #FFFFFF;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 18px 40px -14px rgba(21, 32, 77, 0.15);
    cursor: pointer;
    outline: none;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease;
    --hkaw-accent: #E71615;
}

.hkaw-trio__pillar:hover,
.hkaw-trio__pillar:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -16px rgba(21, 32, 77, 0.22);
}

.hkaw-trio__pillar:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hkaw-accent) 40%, transparent),
                0 18px 40px -14px rgba(21, 32, 77, 0.15);
}

/* Accent top band */
.hkaw-trio__pillar::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--hkaw-accent);
    z-index: 3;
}

/* Top section (always visible) */
.hkaw-trio__top {
    padding: 36px 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hkaw-trio__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--hkaw-accent) 14%, white);
    color: var(--hkaw-accent);
    margin-bottom: 18px;
    font-size: 28px;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.hkaw-trio__icon i,
.hkaw-trio__icon svg {
    width: 28px;
    height: 28px;
    line-height: 1;
}

.hkaw-trio__emoji {
    font-size: 34px;
    line-height: 1;
}

.hkaw-trio__pillar:hover .hkaw-trio__icon {
    transform: scale(1.08) rotate(-3deg);
}

.hkaw-trio__title {
    margin: 0 0 12px 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 1.1px;
    color: #15204D;
    line-height: 1.1;
    font-weight: 400;
    text-transform: uppercase;
}

.hkaw-trio__description {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #55627E;
}

/* Slide-up reveal panel (hidden below bottom edge until hover/focus) */
.hkaw-trio__reveal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* Start fully below */
    transform: translateY(100%);
    background: #15204D;
    padding: 22px 28px 26px;
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 70%;
    overflow-y: auto;
}

.hkaw-trio__pillar:hover .hkaw-trio__reveal,
.hkaw-trio__pillar:focus-visible .hkaw-trio__reveal,
.hkaw-trio__pillar.is-revealed .hkaw-trio__reveal {
    transform: translateY(0);
}

.hkaw-trio__reveal-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
}

.hkaw-trio__leaders {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hkaw-trio__leader {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hkaw-trio__leader-photo {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.hkaw-trio__leader-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hkaw-trio__leader-info {
    min-width: 0;
    flex: 1;
}

.hkaw-trio__leader-name {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hkaw-trio__leader-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
}

/* Hover hint chevron */
.hkaw-trio__hint {
    position: absolute;
    bottom: 12px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--hkaw-accent);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 4;
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: hkaw-trio-hint-bob 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    pointer-events: none;
}

.hkaw-trio__pillar:hover .hkaw-trio__hint,
.hkaw-trio__pillar:focus-visible .hkaw-trio__hint,
.hkaw-trio__pillar.is-revealed .hkaw-trio__hint {
    opacity: 0;
    transform: translateY(10px);
    animation: none;
}

@keyframes hkaw-trio-hint-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Responsive */
@media (max-width: 1024px) {
    .hkaw-trio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .hkaw-trio {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .hkaw-trio__pillar {
        height: 380px;
    }
    .hkaw-trio__top {
        padding: 30px 22px 20px;
    }
    .hkaw-trio__reveal {
        padding: 18px 22px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hkaw-trio__pillar,
    .hkaw-trio__top,
    .hkaw-trio__icon,
    .hkaw-trio__reveal,
    .hkaw-trio__hint {
        transition: none;
        animation: none;
    }
}