@font-face {
    font-family: "Aesthetic Violet";
    src: url("../fonts/Aesthetic Violet.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Minimalist Aesthetic";
    src: url("../fonts/Minimalist Aesthetic.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
.about-page {
    --about-section-ivory: #F7F1E8;
    --about-placeholder: #e7ebef;
    --about-rule: #e5edef;
    font-family: "Montserrat", sans-serif;
    overflow-wrap: anywhere;
}
.about-page h1 { font-family: "Montserrat", sans-serif; }
.about-page h2 { line-height: 1.3; margin-bottom: 24px; }
.about-page p { margin: 0 0 20px; }
.about-page p:last-child { margin-bottom: 0; }
.about-page :focus-visible { outline: 3px solid var(--color-purple); outline-offset: 4px; }
.about-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    background: var(--color-primary) url("../images/about/hero/aymee-about-hero-background.webp") center / cover no-repeat;
    width: 100%;
    min-height: 470px;
    padding-inline: max(20px, calc((100% - var(--container)) / 2));
    border-radius: 0;
    overflow: hidden;
    margin: 0;
}
.about-hero__copy { position: relative; min-width: 0; padding: 28px clamp(20px, 3vw, 40px); }
.about-hero h1 {
    color: var(--color-gradient-blue);
    font-weight: 400;
    font-synthesis: none;
    line-height: 1.2;
    margin-bottom: 18px;
}
.about-hero__greeting, .about-hero__name { display: block; width: fit-content; max-width: 100%; }
.about-hero__greeting { font-family: "Minimalist Aesthetic", "Montserrat", sans-serif; font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 8px; }
.about-hero__name { font-family: "Aesthetic Violet", "Segoe Print", cursive; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.45; padding: .12em .06em .24em; overflow: visible; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .about-hero__greeting, .about-hero__name {
        background: var(--gradient-blue-purple);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.about-hero__copy p { color: var(--color-bg); font-size: 18px; line-height: 1.65; max-width: 48ch; }
.about-hero__description { max-width: 48ch; font-size: 18px; }
.about-hero__visual { position: relative; min-width: 0; width: 100%; align-self: end; }
.about-hero__visual img { width: 100%; height: auto; max-height: 470px; object-fit: contain; object-position: center bottom; }
/* Layout only: button appearance comes from the reusable banner component. */
.about-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.about-hero__actions .banner-button { max-width: 100%; text-align: center; }
@media (min-width: 1001px) {
    .about-hero__actions { gap: 20px; }
}
/* Match the Home desktop viewport; leave tablet/mobile height content-driven. */
@media (min-width: 1001px) {
    .about-hero { height: 470px; min-height: 0; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .about-hero__copy { padding-block: 20px; }
    .about-hero h1 { margin-bottom: 8px; }
    .about-hero__name { white-space: nowrap; font-size: clamp(38px, 3.4vw, 48px); }
    .about-hero__visual img { height: 470px; }
}
@media (min-width: 1450px) {
    .about-hero { padding-inline: clamp(48px, 5vw, 120px); }
    .about-hero__visual img { object-position: 35% bottom; }
    .about-hero__copy { max-width: 760px; }
    .about-hero__name { font-size: clamp(48px, 3.4vw, 60px); }
}
@media (forced-colors: active) {
    .about-hero__greeting, .about-hero__name { background: none; -webkit-text-fill-color: currentColor; }
}
.about-page__content { padding-inline: clamp(0px, 3vw, 48px); }
.about-section { padding-block: clamp(28px, 4vw, 52px); }
.about-page .about-section:is([aria-labelledby="about-trajectory-title"], [aria-labelledby="about-philosophy-title"], [aria-labelledby="about-recognitions-title"]) {
    background-color: var(--about-section-ivory);
}
.about-page .about-section:is([aria-labelledby="about-training-title"], [aria-labelledby="about-media-title"]) {
    background-color: var(--hero-light);
}
.about-page .about-section:is([aria-labelledby="about-trajectory-title"], [aria-labelledby="about-training-title"], [aria-labelledby="about-philosophy-title"], [aria-labelledby="about-media-title"], [aria-labelledby="about-recognitions-title"]) {
    margin-top: 19px;
}
.about-section--ruled { border-top: 1px solid var(--about-rule); }
.about-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); align-items: center; }
.about-split > * { min-width: 0; }
.about-portrait { padding: 20px; background: url("../images/decorative/mandala-hero.svg") center / contain no-repeat; }
.about-portrait img { width: 100%; height: auto; }
.about-trajectory { padding-block: 0; }
.about-trajectory__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 3vw, 40px); align-items: end; }
.about-trajectory__copy { min-width: 0; padding-block: clamp(28px, 4vw, 48px); }
.about-trajectory .about-portrait { width: 90%; min-width: 0; padding: 0; background: none; justify-self: center; align-self: end; }
.about-trajectory .about-portrait img { width: 90%; height: auto; object-fit: contain; display: block; margin-inline: auto; }
.about-trajectory h2 { width: fit-content; max-width: 100%; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .about-trajectory h2 { background: var(--gradient-blue-purple); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
}
@media (forced-colors: active) {
    .about-trajectory h2 { background: none; -webkit-text-fill-color: currentColor; }
}
@media (max-width: 620px) {
    .about-trajectory__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .about-trajectory .about-portrait { max-width: 320px; }
}
.about-training { align-items: start; }
.about-page .about-section[aria-labelledby="about-training-title"] { padding-bottom: clamp(20px, 2vw, 28px); }
.about-training__photo img { display: block; width: 90%; height: auto; max-height: 432px; object-fit: contain; border-radius: 6px; margin-inline: auto; }
.about-philosophy { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.about-page .about-section[aria-labelledby="about-philosophy-title"] { padding-bottom: 0; }
.about-philosophy__photo { width: 100%; max-width: 400px; justify-self: end; align-self: end; }
.about-philosophy__photo img { display: block; width: 100%; height: auto; object-fit: contain; }
.about-placeholder { display: grid; place-items: center; background: var(--about-placeholder); border-radius: 6px; color: var(--color-text); text-align: center; padding: 20px; font-size: 14px; }
.about-philosophy__photo .about-placeholder { aspect-ratio: 4 / 5; }
.about-gallery { position: relative; padding-inline: 28px; }
.about-gallery__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; }
.about-gallery__item { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; scroll-snap-align: start; }
.about-gallery__item img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: var(--color-soft); border-radius: 6px; }
.about-gallery__item--pending { padding: 18px; border: 1px solid var(--about-rule); border-radius: 10px; }
.about-gallery__item--pending .about-placeholder { aspect-ratio: 3 / 2; }
.about-gallery.is-ready .about-gallery__track { overflow: hidden; touch-action: pan-y pinch-zoom; }
.about-gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-primary); color: var(--color-text); font: 32px/1 Arial, sans-serif; cursor: pointer; }
.about-gallery__arrow[data-previous] { left: -22px; }
.about-gallery__arrow[data-next] { right: -22px; }
.about-gallery__arrow:disabled { opacity: .45; cursor: default; }
.about-gallery__dots { display: flex; justify-content: center; margin-top: 12px; }
.about-gallery__dots button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.about-gallery__dots button::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--about-placeholder); }
.about-gallery__dots button[aria-current="true"]::after { background: var(--color-primary); }
.about-gallery [hidden] { display: none; }
.about-media-list { columns: 2; column-gap: 64px; column-rule: 1px solid var(--about-rule); margin: 24px 0 0; padding-left: 20px; }
.about-media-list li { break-inside: avoid; margin: 0 0 10px; padding-left: 5px; }
.about-media-list { list-style: none; }
.about-media-list li { position: relative; }
.about-media-list li::before { content: ""; position: absolute; left: -20px; top: .35em; width: 17px; height: 17px; background: url("../images/decorative/bullet-loto.svg") center / contain no-repeat; }
.about-page [aria-labelledby="about-media-title"] .about-gallery__item img { background-color: var(--hero-light); }
.about-recognitions h2 { text-align: center; }
.about-recognitions h2::after { margin-inline: auto; }
.about-recognitions {
    --recognitions-control: #2c7376;
    --recognitions-control-hover: #255f63;
    --recognitions-control-icon: #fff;
}
@supports (color: color-mix(in srgb, black, white)) {
    .about-recognitions {
        --recognitions-control: color-mix(in srgb, var(--color-primary) 60%, black);
        --recognitions-control-hover: color-mix(in srgb, var(--color-primary) 50%, black);
    }
}
.about-recognitions .about-gallery__item img { object-fit: contain; object-position: center; max-width: 100%; background-color: var(--about-section-ivory); }
.about-recognitions .about-gallery__arrow { background: var(--recognitions-control); color: var(--recognitions-control-icon); }
.about-recognitions .about-gallery__arrow:hover { background: var(--recognitions-control-hover); }
.about-recognitions :focus-visible { outline: 3px solid var(--recognitions-control); outline-offset: 4px; }
.about-recognitions .about-gallery__dots button[aria-current="true"]::after { background: var(--recognitions-control); }
.about-page :is([aria-labelledby="about-media-title"], .about-recognitions) .about-gallery__arrow { background-color: var(--color-purple); color: var(--color-bg); }
.about-cta { text-align: center; padding: clamp(28px, 4vw, 48px); background: var(--color-primary); border-radius: 12px; margin-block: 0 32px; }
.about-cta h2 { color: var(--color-purple); margin-bottom: 16px; }
.about-cta .btn { margin-bottom: 20px; gap: 10px; }
.about-cta p { max-width: 920px; margin-inline: auto; }
.about-cta__notice { font-size: 13px; }
@media (max-width: 900px) {
    .about-hero__copy { padding: 24px 16px; }
    .about-gallery__item { flex-basis: calc((100% - 24px) / 2); }
    .about-media-list { column-gap: 36px; }
}
@media (max-width: 620px) {
    .about-hero, .about-split { grid-template-columns: minmax(0, 1fr); }
    .about-hero { padding-inline: 12px; min-height: 0; background-position: 65% center; }
    .about-hero__copy { padding: 24px 12px 32px; }
    .about-hero__copy p { font-size: 16px; }
    .about-hero__description { font-size: 16px; }
    .about-hero__visual { max-width: 380px; justify-self: center; }
    .about-page__content { padding-inline: 0; }
    .about-portrait { padding: 0; }
    .about-training__photo img { max-height: 360px; }
    .about-philosophy__photo { max-width: 300px; justify-self: center; }
    .about-gallery { padding-inline: 26px; }
    .about-gallery__item { flex-basis: 100%; }
    .about-gallery__arrow[data-previous] { left: -10px; }
    .about-gallery__arrow[data-next] { right: -10px; }
    .about-media-list { columns: 1; }
}