/**
 * EULAI About Page
 *
 * Page-specific composition and presentation for the About EULAI page.
 */


/* --------------------------------------------------------------
   Company Profile
-------------------------------------------------------------- */

.about-profile {
	overflow: clip;
}


/* --------------------------------------------------------------
   Company Profile — Layout
-------------------------------------------------------------- */

.about-profile__layout {
	display: grid;
	grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr);
	gap: clamp(3rem, 4vw, 5rem);
	align-items: start;
}


/* --------------------------------------------------------------
   Company Profile — Project Delivery Proof
-------------------------------------------------------------- */

.about-profile__proof {
	min-width: 0;
	padding-top: 0.25rem;
}

.about-profile__proof-label {
	margin: 0 0 0.875rem;

	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.02em;

	color: var(--eulai-color-text-secondary);
}

.about-profile__proof-value {
	display: block;
	width: fit-content;

	font-size: clamp(4.25rem, 6vw, 6rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.05em;

	background: var(--eulai-gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}


/* --------------------------------------------------------------
   Company Profile — Content
-------------------------------------------------------------- */

.about-profile__content {
	min-width: 0;
}

.about-profile__intro {
	margin: 0;
	max-width: 60rem;

	font-size: 1.0625rem;
	line-height: 1.9;

	color: var(--eulai-color-text-secondary);
}


/* --------------------------------------------------------------
   Company Profile — Capabilities
-------------------------------------------------------------- */

.about-profile__capabilities {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2.5rem, 4vw, 4.5rem);
	row-gap: clamp(2.75rem, 4vw, 4rem);

	margin-top: clamp(3rem, 5vw, 4.5rem);
}

.about-profile__capability {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;

	min-width: 0;
}

.about-profile__icon {
	display: flex;
	align-items: flex-start;
	justify-content: center;

	width: 2.75rem;
	height: 2.75rem;
}

.about-profile__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.about-profile__capability-body {
	min-width: 0;
}

.about-profile__capability-title {
	margin: 0 0 0.75rem;

	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.45;

	color: var(--eulai-color-text-primary);
}

.about-profile__capability-text {
	margin: 0;

	font-size: 0.875rem;
	line-height: 1.8;

	color: var(--eulai-color-text-secondary);
}


/* --------------------------------------------------------------
   Company Profile — Entrance Motion
-------------------------------------------------------------- */

.about-profile__header,
.about-profile__proof,
.about-profile__content {
	opacity: 0;

	transition:
		opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);

	will-change: opacity, transform;
}

/* H2: top → down */
.about-profile__header {
	transform: translateY(-2rem);
}

/* Proof: left → right */
.about-profile__proof {
	transform: translateX(-2rem);
}

/* Content: right → left */
.about-profile__content {
	transform: translateX(2rem);
}

.about-profile.is-visible .about-profile__header,
.about-profile.is-visible .about-profile__proof,
.about-profile.is-visible .about-profile__content {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}


/* --------------------------------------------------------------
   Headquarters — Dark Section
-------------------------------------------------------------- */

.about-headquarters {
    background: var(--eulai-gradient-surface-dark);
}

/* Headquarters — Gradient H2 */
.eulai-section--dark .about-headquarters__title {
    width: fit-content;
    max-width: 100%;

    background: var(--eulai-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* ==============================================================
   Headquarters — Layout
   ============================================================== */

/* Header */

.about-headquarters__header {
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}

.about-headquarters__intro {
    max-width: 60rem;
    margin: 1.75rem 0 0;

    font-size: 1.0625rem;
    line-height: 1.9;

    color: var(--eulai-color-text-inverse-muted);
}


/* Project Rendering */

.about-headquarters__media {
    width: 100%;
    margin: 0;
}

.about-headquarters__image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* Four Development Features */

.about-headquarters__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: clamp(3rem, 5vw, 5.5rem);
    row-gap: clamp(3rem, 4vw, 4rem);

    margin-top: clamp(3rem, 5vw, 4.5rem);
}

.about-headquarters__feature {
    min-width: 0;
}

/* Two separators above the second row only */

.about-headquarters__feature:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding-top: clamp(2rem, 3vw, 3rem);
}


/* Feature Typography */

.about-headquarters__feature-title {
    margin: 0 0 0.75rem;

    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.45;

    color: var(--eulai-color-text-inverse);
}

.about-headquarters__feature-text {
    margin: 0;

    font-size: 0.875rem;
    line-height: 1.8;

    color: var(--eulai-color-text-inverse-muted);
}


/* ==============================================================
   Headquarters — Tablet
   ============================================================== */

@media (max-width: 999px) {

    .about-headquarters__intro {
        max-width: none;
    }

    .about-headquarters__features {
        column-gap: clamp(2.5rem, 5vw, 4rem);
        row-gap: 3rem;

        margin-top: 3rem;
    }

    .about-headquarters__feature:nth-child(n + 3) {
        padding-top: 2.5rem;
    }

}


/* ==============================================================
   Headquarters — Mobile
   ============================================================== */

@media (max-width: 767px) {

    .about-headquarters__intro {
        margin-top: 1.5rem;

        font-size: 1rem;
        line-height: 1.85;
    }

    .about-headquarters__features {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;

        margin-top: 2.75rem;
    }

    .about-headquarters__feature {
        padding: 0;
        border: 0;
    }

    .about-headquarters__feature + .about-headquarters__feature {
        margin-top: 2rem;
        padding-top: 2rem;

        border-top: 1px solid rgba(255, 255, 255, 0.22);
    }

    .about-headquarters__feature-title {
        margin-bottom: 0.625rem;
    }

}




/* --------------------------------------------------------------
   Company Profile — Tablet
-------------------------------------------------------------- */

@media (max-width: 999px) {

	.about-profile__layout {
		grid-template-columns: 1fr;
		gap: 2.75rem;
	}

		.about-profile__proof-value {
		font-size: clamp(4rem, 9vw, 5rem);
	}

	.about-profile__capabilities {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2.5rem, 5vw, 4rem);
		row-gap: 2.75rem;
		margin-top: 3rem;
	}

	.about-profile__capability {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		gap: 0.875rem;
	}

	.about-profile__icon {
		width: 2.5rem;
		height: 2.5rem;
	}

}

/* --------------------------------------------------------------
   Company Profile — Mobile
-------------------------------------------------------------- */

@media (max-width: 767px) {

	.about-profile__layout {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.about-profile__proof {
		padding-top: 0;
	}

	.about-profile__proof-label {
		margin-bottom: 0.625rem;
	}

	.about-profile__proof-value {
		font-size: clamp(4rem, 20vw, 5rem);
	}

	.about-profile__intro {
		font-size: 1rem;
		line-height: 1.85;
	}

	.about-profile__capabilities {
		grid-template-columns: 1fr;
		gap: 2.5rem;

		margin-top: 2.75rem;
	}

	.about-profile__capability {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		gap: 0.875rem;
	}

	.about-profile__icon {
		width: 2.25rem;
		height: 2.25rem;
	}

	.about-profile__capability-title {
		margin-bottom: 0.625rem;
	}

}

/* --------------------------------------------------------------
   Company Profile — Reduced Motion
-------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.about-profile__header,
	.about-profile__proof,
	.about-profile__content {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}

}


/* --------------------------------------------------------------
   Headquarters — Grouped Entrance Motion
-------------------------------------------------------------- */

html.eulai-about-motion-ready .about-headquarters__title,
html.eulai-about-motion-ready .about-headquarters__intro,
html.eulai-about-motion-ready .about-headquarters__media,
html.eulai-about-motion-ready .about-headquarters__feature {
    opacity: 0;

    transition:
        opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Header: H2 top → down; Intro left → right */

html.eulai-about-motion-ready .about-headquarters__title {
    transform: translate3d(0, -2rem, 0);
}

html.eulai-about-motion-ready .about-headquarters__intro {
    transform: translate3d(-2rem, 0, 0);
}

/* Image and feature rows: bottom → up */

html.eulai-about-motion-ready .about-headquarters__media,
html.eulai-about-motion-ready .about-headquarters__feature {
    transform: translate3d(0, 3rem, 0);
}

/* Reveal */

html.eulai-about-motion-ready .about-headquarters__header.is-visible
    .about-headquarters__title,
html.eulai-about-motion-ready .about-headquarters__header.is-visible
    .about-headquarters__intro,
html.eulai-about-motion-ready .about-headquarters__media.is-visible,
html.eulai-about-motion-ready .about-headquarters__feature.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    html.eulai-about-motion-ready .about-headquarters__title,
    html.eulai-about-motion-ready .about-headquarters__intro,
    html.eulai-about-motion-ready .about-headquarters__media,
    html.eulai-about-motion-ready .about-headquarters__feature {
        opacity: 1;
        transform: none;
        transition: none;
    }

}


/* ==============================================================
   About — Honors & Intellectual Property
   ============================================================== */

.about-honors {
    background: var(--eulai-color-surface);
}

/* --------------------------------------------------------------
   Showcase — Certificates & Award
   -------------------------------------------------------------- */

.about-honors__showcase {
    display: grid;
    grid-template-columns:
        minmax(0, 590fr)
        minmax(0, 260fr);
    gap: clamp(1.25rem, 2vw, 2rem);
    align-items: end;
    justify-content: center;

    width: 100%;
    max-width: 900px;
    margin-inline: auto;
}

.about-honors__certificates,
.about-honors__award {
    min-width: 0;
    margin: 0;
}

/* Certificates — preserve transparent composition */

.about-honors__certificates {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.about-honors__certificates-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: 350px;
    object-fit: contain;
}

/* Award — visually balanced with certificates */

.about-honors__award {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.about-honors__award-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 390px;
    height: auto;
    object-fit: contain;
}


/* --------------------------------------------------------------
   Award Statement
   -------------------------------------------------------------- */

.about-honors__statement {
    margin: clamp(2.75rem, 4vw, 4rem) 0 0;

    font-size: clamp(1.125rem, 1.65vw, 1.375rem);
    font-weight: 700;
    line-height: 1.65;
    text-align: center;

    color: var(--eulai-color-text);
}

.about-honors__award-name {
    display: inline;
    font-size: 1.25em;
    font-weight: 700;

    background: var(--eulai-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ==============================================================
   About — Honors — Tablet
   ============================================================== */

@media (max-width: 999px) and (min-width: 768px) {

    .about-honors__showcase {
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.75fr);
        max-width: 850px;
        gap: 1.5rem;
    }

    .about-honors__award-image {
        max-height: 340px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .about-honors__showcase {
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
        gap: 1.5rem;
    }

    .about-honors__certificates-image {
        width: 100%;
        height: auto;
    }

    .about-honors__award-image {
        max-height: 290px;
    }

    .about-honors__statement {
        margin-top: 2rem;
        font-size: 1rem;
        line-height: 1.7;
    }

    .about-honors__award-name {
        font-size: 1.2em;
    }
}


/* ==============================================================
   About — Honors — Grouped Entrance Motion
   ============================================================== */

html.eulai-about-motion-ready .about-honors__header,
html.eulai-about-motion-ready .about-honors__showcase,
html.eulai-about-motion-ready .about-honors__statement {
    opacity: 0;

    transition:
        opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* H2: top → down */

html.eulai-about-motion-ready .about-honors__header {
    transform: translate3d(0, -2rem, 0);
}

/* Images and statement: bottom → up */

html.eulai-about-motion-ready .about-honors__showcase,
html.eulai-about-motion-ready .about-honors__statement {
    transform: translate3d(0, 3rem, 0);
}

/* Reveal */

html.eulai-about-motion-ready .about-honors__header.is-visible,
html.eulai-about-motion-ready .about-honors__showcase.is-visible,
html.eulai-about-motion-ready .about-honors__statement.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    html.eulai-about-motion-ready .about-honors__header,
    html.eulai-about-motion-ready .about-honors__showcase,
    html.eulai-about-motion-ready .about-honors__statement {
        opacity: 1;
        transform: none;
        transition: none;
    }

}