/* ==========================================================================
   WHC — About Us page  (Figma 992:8075)
   Theme: orange hero, dark-red mission, dark-grey CTA, multi-color pills.
   ========================================================================== */

.au-page {
    background: var(--whc-white);
}

/* ============================================================
   1. Hero (orange)
   ============================================================ */
.au-hero {
    position: relative;
    background: var(--whc-orange-2);
    overflow: hidden;
    min-height: 684px;
}
.au-hero__inner {
    position: relative;
    height: 684px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.au-hero__content {
    position: relative;
    z-index: 2;
    color: var(--whc-white);
    padding-left: var(--container-pad);
    width: 100%;
    max-width: calc(477px + var(--container-pad));
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.au-hero__title {
    margin: 0;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -0.96px;
    color: var(--whc-white);
    font-weight: 400;
}
.au-hero__title strong { font-weight: 600; }
.au-hero__cta { align-self: flex-start; }
.au-hero__pattern {
    position: absolute;
    top: 0;
    left: calc(50% - 11%);
    width: 684px;
    height: 684px;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.au-hero__pattern img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0) invert(1);
}
.au-hero__visual {
    position: relative;
    z-index: 2;
    align-self: stretch;
    overflow: hidden;
}
.au-hero__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   2. Intro (title + subtitle + banner with stat card overlay)
   ============================================================ */
.au-intro {
    background: var(--whc-white);
    padding: 96px 0 45px;
}
.au-intro__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.au-intro__cols {
    display: grid;
    grid-template-columns: minmax(0, 570px) 1fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 96px;
}
.au-intro__lead {
    margin: 0;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--whc-black);
}
.au-intro__body {
    margin: 28px 0 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--whc-black);
    max-width: 632px;
}
.au-intro__media { position: relative; }
.au-intro__banner {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1285 / 549;
}
.au-intro__banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-intro__stat {
    position: absolute;
    right: -47px;
    bottom: 22px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: 636px;
    max-width: 100%;
    padding: 32px;
    background: var(--whc-green-dark);
    border-radius: 12px;
}
.au-intro__stat-number {
    margin: 0;
    font-size: 75px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -3px;
    color: #D7F48C;
    white-space: nowrap;
}
.au-intro__stat-label {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--whc-white);
    max-width: 349px;
}

/* ============================================================
   3. Mission (dark red + pattern overlay right)
   ============================================================ */
.au-mission {
    position: relative;
    background: var(--whc-red-dark);
    padding: 116px 0;
    overflow: hidden;
    margin-top: 45px;
}
.au-mission__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.au-mission__copy {
    display: flex;
    flex-direction: column;
    gap: 21px;
    color: var(--whc-white);
    max-width: 601px;
}
.au-mission__title {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.64px;
    color: var(--whc-white);
}
.au-mission__text {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--whc-white);
}
.au-mission__pattern {
    position: absolute;
    top: 0; right: 0;
    z-index: 1;
    pointer-events: none;
}
.au-mission__pattern img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0) invert(1);
}

/* ============================================================
   4. Commitment to Excellence (3 colored cards)
   ============================================================ */
.au-excellence {
    background: var(--whc-white);
    padding: 88px 0;
}
.au-excellence__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.au-excellence__title {
    margin: 0 0 56px;
    text-align: center;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--whc-black);
}
.au-excellence__title strong { font-weight: 600; color: var(--whc-orange-2); }
.au-excellence__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 21px;
}
.au-ex-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 251px;
    padding: 32px 16px;
    border-radius: 12px;
    color: var(--whc-white);
}
.au-ex-card--blue  { background: var(--whc-blue-dark); }
.au-ex-card--green { background: var(--whc-green-dark); }
.au-ex-card--pink  { background: var(--whc-pink); }

.au-ex-card__icon { width: 40px; height: 40px; display: inline-flex; }
.au-ex-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.au-ex-card__heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--whc-white);
}
.au-ex-card__title {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--whc-white);
}
.au-ex-card__text {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--whc-white);
}

/* ============================================================
   5. Principles — bg image + colored pills
   ============================================================ */
.au-principles {
    position: relative;
    min-height: 534px;
    padding: 78px 0 121px;
    overflow: hidden;
    color: var(--whc-white);
}
.au-principles__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.au-principles__bg img { width: 100%; height: 100%; object-fit: cover; }
.au-principles__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}
.au-principles__inner {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.au-principles__title {
    margin: 0 auto 63px;
    text-align: center;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--whc-white);
    max-width: 374px;
}
.au-principles__title strong { font-weight: 600; }
.au-principles__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 14px;
    margin: 0 auto;
}
.au-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 72px;
    padding: 18px 27px;
    background: var(--whc-white);
    border: 1px solid #B3B3B3;
    border-radius: 12px;
}
.au-pill__icon { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; }
.au-pill__icon img { width: 100%; height: 100%; object-fit: contain; }
.au-pill__label {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.au-pill--blue   .au-pill__label { color: var(--whc-blue-dark); letter-spacing: -0.28px; }
.au-pill--red    .au-pill__label { color: #A32F2F; }
.au-pill--green  .au-pill__label { color: var(--whc-green-dark); }
.au-pill--pink   .au-pill__label { color: var(--whc-pink); }
.au-pill--orange .au-pill__label { color: var(--whc-orange); }

/* ============================================================
   6. Legacy — hover-triggered sparkle reveal
   Default: small orange sparkle centered on white.
   Hover the glyph: it rotates 90° and scales up 11× so it overflows
   the section. The shape's body covers the corners (orange), while
   its inner negative space reveals the white center where the
   title + body text fade in.
   ============================================================ */
.au-legacy {
    position: relative;
    overflow: hidden;
    background: var(--whc-white);
    aspect-ratio: 1440 / 820;
    min-height: 540px;
}

.au-legacy__glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 216px;
    height: 216px;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    transform-origin: center center;
    transition: transform 0.7s var(--ease);
    will-change: transform;
    cursor: pointer;
    z-index: 2;
}

.au-legacy__glyph img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.au-legacy__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

.au-legacy__content-inner {
    max-width: 55%;
    text-align: center;
    opacity: 0;
    transition: opacity 0.45s var(--ease);
}

.au-legacy__title {
    margin: 0 0 16px;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.8px;
    color: var(--whc-black);
}

.au-legacy__title strong {
    font-weight: 500;
    color: var(--whc-orange-2);
}

.au-legacy__text {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--whc-black);
}

.au-legacy__text strong {
    font-weight: 600;
    color: var(--whc-orange-2);
}

/* Trigger on entering the whole section (mouse enter), not just the small glyph,
   so the reveal is easy to land. */
.au-legacy:hover .au-legacy__glyph {
    transform: translate(-50%, -50%) rotate(90deg) scale(11);
}

.au-legacy:hover .au-legacy__content .au-legacy__content-inner {
    opacity: 1;
    transition: opacity 0.45s var(--ease) 0.35s;
}

/* ============================================================
   7. CTA (dark grey)
   ============================================================ */
.au-cta {
    position: relative;
    background: var(--whc-grey-dark);
    overflow: hidden;
    min-height: 580px;
}
.au-cta__inner {
    position: relative;
    height: 580px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.au-cta__pattern {
    position: absolute;
    top: -9px;
    left: calc(50% - 270px);
    width: 598px; height: 598px;
    pointer-events: none;
    z-index: 3;
}
.au-cta__pattern img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0) invert(1);
}
.au-cta__copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: calc(424px + var(--container-pad));
    padding-left: var(--container-pad);
    color: var(--whc-white);
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.au-cta__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--whc-white);
}
.au-cta__title {
    margin: 0;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--whc-white);
}
.au-cta__sub {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 380px;
    color: var(--whc-white);
}
.au-cta__cta { width: 153px; padding-left: 0; padding-right: 0; }
.au-cta__visual { position: relative; z-index: 2; align-self: stretch; overflow: hidden; }
.au-cta__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
    .au-hero__pattern { display: none; }
    .au-intro__cols { grid-template-columns: 1fr; gap: 24px; }
    .au-intro__body { margin-top: 0; }
    .au-intro__lead { font-size: 32px; }
    .au-intro__stat { right: 0; }
    .au-excellence__title,
    .au-principles__title,
    .au-legacy__title { font-size: 36px; }
    .au-pill__label { font-size: 22px; }
    .au-cta__title { font-size: 36px; }
}
@media (max-width: 991px) {
    .au-hero__inner,
    .au-cta__inner { grid-template-columns: 1fr; }

    .au-hero { min-height: auto; }
    .au-hero__inner { height: auto; }
    .au-hero__content { padding: 64px var(--container-pad) 48px; max-width: none; }
    .au-hero__visual { height: 320px; }

    .au-intro { padding-top: 64px; }
    .au-intro__cols { margin-bottom: 64px; }
    .au-intro__lead { font-size: 28px; }
    .au-intro__body { font-size: 18px; }
    .au-intro__stat {
        position: static; right: auto; bottom: auto;
        width: 100%; margin-top: 16px;
        gap: 24px; padding: 24px;
    }
    .au-intro__stat-number { font-size: 56px; letter-spacing: -2px; }

    .au-mission { padding: 80px 0; }
    .au-mission__title { font-size: 26px; }
    /* Tone down + centre the flower pattern so it doesn't fight the copy. */
    .au-mission__pattern {
        opacity: 0.22;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }

    .au-excellence { padding: 64px 0; }
    .au-excellence__grid { grid-template-columns: 1fr; }

    .au-principles { padding: 64px 0; }
    .au-principles__title { margin-bottom: 56px; }
    .au-principles__pills { gap: 16px 12px; }
    .au-pill { height: auto; padding: 14px 18px; }

    .au-legacy { aspect-ratio: auto; min-height: 420px; }
    .au-legacy__title { font-size: 32px; letter-spacing: -0.5px; }
    .au-legacy__text { font-size: 16px; }

    /* Mobile has no hover, so the reveal can't fire — show the copy statically
       and demote the flower glyph to a faint, centred decorative mark instead
       of letting a tap blow it up to 11x. */
    .au-legacy__glyph {
        width: 150px;
        height: 150px;
        opacity: 0.12;
        transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
        pointer-events: none;
    }
    .au-legacy__content-inner { opacity: 1; max-width: 100%; }

    .au-cta { min-height: auto; }
    .au-cta__inner { height: auto; }
    .au-cta__copy { padding: 64px var(--container-pad); max-width: none; }
    .au-cta__visual { height: 320px; }
    .au-cta__pattern { display: none; }
}
@media (max-width: 600px) {
    .au-hero__title { font-size: 32px; letter-spacing: -0.5px; }
    .au-intro__lead { font-size: 24px; }
    .au-intro__body { font-size: 16px; }
    .au-mission__title { font-size: 22px; }
    .au-excellence__title,
    .au-principles__title,
    .au-legacy__title { font-size: 28px; letter-spacing: -0.5px; }
    .au-cta__title { font-size: 26px; }

    .au-ex-card__title { font-size: 24px; }
    .au-pill { width: 100%; }
    .au-pill__label { font-size: 20px; white-space: normal; text-align: left; }

    .au-legacy { min-height: 380px; }
    .au-legacy__title { font-size: 26px; letter-spacing: -0.4px; white-space: normal; }
    .au-legacy__text { font-size: 14px; }
}