/* ============================================================
   Eternal Worldwide - About Page Styles
   Matched to Populous.com/about design
   ============================================================ */

/* --- CSS Variables --- */
:root {
    --ew-black: #010101;
    --ew-white: #ffffff;
    --ew-accent: #006de4;
    --ew-gray-light: #f5f5f5;
    --ew-gray-border: #e5e5e5;

    /* Spacing scale (simplified from Populous) */
    --spacing-small: 1rem;
    --spacing-medium: 2rem;
    --spacing-large: 4rem;
    --spacing-big: 6rem;
    --spacing-enormous: 8rem;

    /* Font sizes (exact Populous values) */
    --font-size-huge: clamp(3.5rem, 9.72vw, 8.75rem);
    --font-size-h1: clamp(2.25rem, 5.56vw, 5rem);
    --font-size-h4: clamp(1.75rem, 2.5vw, 2.25rem);
    --font-size-body: clamp(0.875rem, 1.11vw, 1rem);
    --font-size-body-large: clamp(1.625rem, 1.875vw, 1.6875rem);

    /* Container */
    --container-margin: clamp(1rem, 5vw, 2rem);
    --container-max: 1200px;
}


/* ============================================
   BASE RESET (About Page Only)
   ============================================ */
html.about-page,
body.about-page {
    margin: 0;
    background-color: var(--ew-white) !important;
    color: var(--ew-black) !important;
    font-family: "SuisseIntl", -apple-system, BlinkMacSystemFont, "avenir next", avenir, "segoe ui", "helvetica neue", helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Strip RAD background / glow overrides */
.about-page .root,
.about-page .container,
.about-page .responsivegrid,
.about-page .aem-Grid,
.about-page main#main {
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: none !important;
}

.about-page *::before,
.about-page *::after {
    box-shadow: none !important;
}

/* Exempt header/footer pseudo-elements */
.about-page .ew-header *::before,
.about-page .ew-header *::after,
.about-page .rad-footer *::before,
.about-page .rad-footer *::after {
    display: initial !important;
    content: initial !important;
}

.about-page .ew-header__nav-link::after {
    display: block !important;
    content: '' !important;
}


/* ============================================
   HERO SECTION
   Matches Populous c-careers-hero
   ============================================ */
.ew-about-hero {
    --page-title-margin-top: var(--spacing-large);
    --min-height-content: calc(100svh - 130px - var(--page-title-margin-top) * 2);
    position: relative;
    background: var(--ew-white);
}

.ew-about-hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--container-margin);
    padding-right: var(--container-margin);
}

.ew-about-hero__content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-medium);
    padding-top: var(--spacing-large);
    padding-bottom: var(--spacing-large);
    min-height: var(--min-height-content);
}

.ew-about-hero__title {
    text-align: center;
    max-width: 63.75rem;
    font-size: var(--font-size-huge);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--ew-black);
    margin: 0;
    margin-bottom: 0.1em;
}

/* Hero progress images (scroll-reveal area) */
.ew-about-hero__progress {
    position: relative;
    overflow: hidden;
}

.ew-about-hero__progress-area {
    height: 4px;
    background: var(--ew-gray-border);
    position: sticky;
    top: 50%;
    z-index: 1;
    margin: 0 var(--container-margin);
}

.ew-about-hero__progress-inner {
    padding: var(--spacing-large) var(--container-margin);
}

.ew-about-hero__images {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    max-width: var(--container-max);
    margin: 0 auto;
}

.ew-about-hero__images li {
    list-style: none;
}

.ew-about-hero__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0;
}

.ew-about-hero__image--fluid {
    aspect-ratio: 16 / 9;
}

.ew-about-hero__image-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: grayscale(0.3);
    transition: filter 0.4s ease;
}

.ew-about-hero__image-img:hover {
    filter: grayscale(0);
}


/* ============================================
   INTRO EXCERPT
   Matches Populous c-excerpt
   ============================================ */
.ew-excerpt {
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--container-margin);
    padding-right: var(--container-margin);
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-big);
}

.ew-excerpt__content {
    max-width: 57.25rem;
    margin: 0 auto;
    font-size: var(--font-size-h4);
    line-height: 1.2;
    letter-spacing: -0.05em;
    font-weight: 400;
    color: var(--ew-black);
}


/* ============================================
   EDITORIAL BODY CONTENT
   Matches Populous c-editorial + c-wysiwyg
   ============================================ */
.ew-editorial {
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--container-margin);
    padding-right: var(--container-margin);
    margin-bottom: var(--spacing-large);
}

.ew-editorial__content {
    max-width: 31.25rem;
    margin: 0 auto;
}

.ew-editorial__content p {
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================
   STATS SECTION
   Matches Populous c-listing-stats -alt
   ============================================ */
.ew-stats {
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--container-margin);
    padding-right: var(--container-margin);
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large);
}

.ew-stats__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-medium);
    max-width: var(--container-max);
    margin: 0 auto;
    margin-top: var(--spacing-medium);
}

.ew-stats__item {
    list-style: none;
}

.ew-stats__item-inner {
    text-align: left;
}

.ew-stats__label {
    display: block;
    font-size: var(--font-size-body);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #666;
    padding-bottom: var(--spacing-small);
}

.ew-stats__value {
    font-family: "TiemposFine", "Georgia", "Times New Roman", serif;
    font-weight: 200;
    letter-spacing: -0.03em;
    color: var(--ew-accent);
    font-size: clamp(3.75rem, 5.56vw, 5rem);
    line-height: 1;
    margin: 0;
}


/* ============================================
   AWARDS TABLE SECTION
   Matches Populous c-listing-table
   ============================================ */
.ew-awards {
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large);
}

.ew-awards__container {
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--container-margin);
    padding-right: var(--container-margin);
    margin-bottom: var(--spacing-medium);
}

.ew-awards__heading {
    font-size: var(--font-size-body-large);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--ew-black);
    line-height: 1;
}

.ew-awards__table {
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--container-margin);
    padding-right: var(--container-margin);
}

.ew-awards__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ew-gray-border);
}

.ew-awards__item {
    list-style: none;
    display: flex;
    position: relative;
    padding-top: 0.75rem;
    padding-bottom: var(--spacing-small);
    gap: var(--spacing-medium);
    border-bottom: 1px solid var(--ew-gray-border);
}

.ew-awards__item-col {
    flex: 1;
}

.ew-awards__item-col--info {
    flex: 1;
}

.ew-awards__label {
    max-width: 18.75rem;
    font-size: var(--font-size-body);
    font-weight: 400;
    color: var(--ew-black);
    margin: 0;
    line-height: 1.5;
}

.ew-awards__value {
    max-width: 24.75rem;
}

.ew-awards__value ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ew-awards__value ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ew-awards__link {
    font-size: var(--font-size-body);
    color: var(--ew-black);
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
    line-height: 1.5;
}

.ew-awards__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--ew-black);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s ease;
}

.ew-awards__link:hover {
    color: var(--ew-accent);
}

.ew-awards__link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
    background: var(--ew-accent);
}


/* ============================================
   FOOTER PUSH (Pre-Footer CTA)
   Matches Populous c-footer-push
   ============================================ */
.ew-footer-push {
    margin-right: auto;
    margin-left: auto;
    padding-left: var(--container-margin);
    padding-right: var(--container-margin);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-medium);
    margin-top: var(--spacing-enormous);
    margin-bottom: var(--spacing-big);
}

.ew-footer-push__title {
    font-size: var(--font-size-h1);
    line-height: 1;
    letter-spacing: -0.05em;
    font-weight: 400;
    color: var(--ew-black);
    margin: 0;
    margin-bottom: 0.5em;
}

.ew-footer-push__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    border: 2px solid var(--ew-black);
    border-radius: 0;
    color: var(--ew-black);
    text-decoration: none;
    font-size: var(--font-size-body);
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: background 0.3s ease, color 0.3s ease;
    background: transparent;
}

.ew-footer-push__cta:hover {
    background: var(--ew-black);
    color: var(--ew-white);
}

.ew-footer-push__cta-icon {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.ew-footer-push__cta:hover .ew-footer-push__cta-icon {
    transform: translateX(4px);
}

.ew-footer-push__cta-label {
    line-height: 1;
}


/* ============================================
   SCROLL ANIMATIONS (CSS-only)
   ============================================ */

/* Fade-up on scroll (approximate using animation-delay) */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes maskReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Apply entrance animations to sections */
.ew-excerpt {
    animation: fadeUp 0.8s ease both;
    animation-timeline: view();
    animation-range: entry 10% entry 30%;
}

.ew-editorial {
    animation: fadeUp 0.8s ease both;
    animation-timeline: view();
    animation-range: entry 10% entry 30%;
}

.ew-stats__item {
    animation: fadeUp 0.6s ease both;
}

.ew-stats__item:nth-child(1) {
    animation-delay: 0s;
}

.ew-stats__item:nth-child(2) {
    animation-delay: 0.15s;
}

.ew-stats__item:nth-child(3) {
    animation-delay: 0.3s;
}

.ew-awards__item {
    animation: fadeUp 0.5s ease both;
}

.ew-awards__item:nth-child(1) {
    animation-delay: 0s;
}

.ew-awards__item:nth-child(2) {
    animation-delay: 0.08s;
}

.ew-awards__item:nth-child(3) {
    animation-delay: 0.16s;
}

.ew-awards__item:nth-child(4) {
    animation-delay: 0.24s;
}

.ew-awards__item:nth-child(5) {
    animation-delay: 0.32s;
}

.ew-awards__item:nth-child(6) {
    animation-delay: 0.40s;
}

.ew-awards__item:nth-child(7) {
    animation-delay: 0.48s;
}

.ew-awards__item:nth-child(8) {
    animation-delay: 0.56s;
}

/* Staggered reveal for hero images */
.ew-about-hero__images li {
    animation: fadeUp 0.7s ease both;
}

.ew-about-hero__images li:nth-child(1) {
    animation-delay: 0s;
}

.ew-about-hero__images li:nth-child(2) {
    animation-delay: 0.2s;
}

.ew-about-hero__images li:nth-child(3) {
    animation-delay: 0.4s;
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .ew-stats__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .ew-about-hero__content {
        min-height: auto;
        padding-top: 6rem;
        padding-bottom: 3rem;
    }

    .ew-about-hero__title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }

    .ew-stats__list {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ew-stats__value {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .ew-awards__item {
        flex-direction: column;
        gap: 0.25rem;
    }

    .ew-awards__label {
        max-width: none;
    }

    .ew-footer-push {
        margin-top: 4rem;
        margin-bottom: 3rem;
    }
}

@media (max-width: 480px) {
    .ew-about-hero__images {
        gap: 1rem;
    }

    .ew-about-hero__image {
        aspect-ratio: 4 / 3;
    }

    .ew-excerpt__content {
        font-size: 1.25rem;
    }
}


/* ============================================
   ACCESSIBILITY: Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    .ew-excerpt,
    .ew-editorial,
    .ew-stats__item,
    .ew-awards__item,
    .ew-about-hero__images li,
    .ew-footer-push__cta,
    .ew-footer-push__cta-icon,
    .ew-awards__link::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ============================================
   ACCESSIBILITY: High Contrast Mode
   ============================================ */
@media (forced-colors: active) {
    .ew-stats__value {
        color: LinkText;
    }

    .ew-footer-push__cta {
        border-color: ButtonText;
        color: ButtonText;
    }

    .ew-footer-push__cta:hover {
        background: Highlight;
        color: HighlightText;
    }
}


/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

    .ew-about-hero__progress,
    .ew-footer-push {
        display: none;
    }

    .ew-about-hero__content {
        min-height: auto;
        padding: 2rem 0;
    }
}